Initial commit

resources/_keenthemes/src/js/components/_init.js

@@ -0,0 +1,42 @@
+//
+// Global init of core components
+//
+
+// Init components
+var KTComponents = function () {
+    // Public methods
+    return {
+        init: function () {
+            KTApp.init();
+			KTDrawer.init();
+			KTMenu.init();
+			KTScroll.init();
+			KTSticky.init();
+			KTSwapper.init();
+			KTToggle.init();
+			KTScrolltop.init();
+			KTDialer.init();	
+			KTImageInput.init();
+			KTPasswordMeter.init();	
+        }
+    }	
+}();
+
+// On document ready
+if (document.readyState === "loading") {
+	document.addEventListener("DOMContentLoaded", function() {
+		KTComponents.init();
+	});
+ } else {
+	KTComponents.init();
+ }
+
+ // Init page loader
+window.addEventListener("load", function() {
+    KTApp.hidePageLoading();
+});
+
+// Declare KTApp for Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+	window.KTComponents = module.exports = KTComponents;
+}

resources/_keenthemes/src/js/components/app.js

@@ -0,0 +1,684 @@
+"use strict";
+
+// Class definition
+var KTApp = function () {
+    var initialized = false;
+    var select2FocusFixInitialized = false;
+    var countUpInitialized = false;
+
+    var createBootstrapTooltip = function (el, options) {
+        if (el.getAttribute("data-kt-initialized") === "1") {
+            return;
+        }
+
+        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();
+            });
+        }
+
+        el.setAttribute("data-kt-initialized", "1");
+
+        return tp;
+    }
+
+    var createBootstrapTooltips = function () {
+        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+
+        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+            createBootstrapTooltip(tooltipTriggerEl, {});
+        });
+    }
+
+    var createBootstrapPopover = function (el, options) {
+        if (el.getAttribute("data-kt-initialized") === "1") {
+            return;
+        }
+
+        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);
+            });
+        }
+
+        el.setAttribute("data-kt-initialized", "1");
+
+        return popover;
+    }
+
+    var createBootstrapPopovers = function () {
+        var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
+
+        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
+            createBootstrapPopover(popoverTriggerEl, {});
+        });
+    }
+
+    var createBootstrapToasts = function () {
+        var toastElList = [].slice.call(document.querySelectorAll('.toast'));
+        var toastList = toastElList.map(function (toastEl) {
+            if (toastEl.getAttribute("data-kt-initialized") === "1") {
+                return;
+            }
+
+            toastEl.setAttribute("data-kt-initialized", "1");
+
+            return new bootstrap.Toast(toastEl, {})
+        });
+    }
+
+    var createButtons = function () {
+        var buttonsGroup = [].slice.call(document.querySelectorAll('[data-kt-buttons="true"]'));
+
+        buttonsGroup.map(function (group) {
+            if (group.getAttribute("data-kt-initialized") === "1") {
+                return;
+            }
+
+            var selector = group.hasAttribute('data-kt-buttons-target') ? group.getAttribute('data-kt-buttons-target') : '.btn';
+            var activeButtons = [].slice.call(group.querySelectorAll(selector));
+
+            // Toggle Handler
+            KTUtil.on(group, selector, 'click', function (e) {
+                activeButtons.map(function (button) {
+                    button.classList.remove('active');
+                });
+
+                this.classList.add('active');
+            });       
+
+            group.setAttribute("data-kt-initialized", "1");
+        });
+    }
+
+    var createDateRangePickers = 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) {
+            if (element.getAttribute("data-kt-initialized") === "1") {
+                return;
+            }
+
+            var display = element.querySelector('div');
+            var attrOpens  = element.hasAttribute('data-kt-daterangepicker-opens') ? element.getAttribute('data-kt-daterangepicker-opens') : 'left';
+            var range = element.getAttribute('data-kt-daterangepicker-range');
+
+            var cb = function(start, end) {
+                var current = moment();
+
+                if (display) {
+                    if ( current.isSame(start, "day") && current.isSame(end, "day") ) {
+                        display.innerHTML = start.format('D MMM YYYY');
+                    } else {
+                        display.innerHTML = start.format('D MMM YYYY') + ' - ' + end.format('D MMM YYYY');
+                    }                    
+                }
+            }
+
+            if ( range === "today" ) {
+                start = moment();
+                end = moment();
+            }
+
+            $(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);
+
+            element.setAttribute("data-kt-initialized", "1");
+        });
+    }
+
+    var createSelect2 = 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) {
+            if (element.getAttribute("data-kt-initialized") === "1") {
+                return;
+            }
+
+            var options = {
+                dir: document.body.getAttribute('direction')
+            };
+
+            if (element.getAttribute('data-hide-search') == 'true') {
+                options.minimumResultsForSearch = Infinity;
+            }
+
+            $(element).select2(options);
+
+            element.setAttribute("data-kt-initialized", "1");
+        });
+
+        /*
+        * 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 createAutosize = function () {
+        if (typeof autosize === 'undefined') {
+            return;
+        }
+
+        var inputs = [].slice.call(document.querySelectorAll('[data-kt-autosize="true"]'));
+
+        inputs.map(function (input) {
+            if (input.getAttribute("data-kt-initialized") === "1") {
+                return;
+            }
+
+            autosize(input);
+
+            input.setAttribute("data-kt-initialized", "1");
+        });
+    }
+
+    var createCountUp = function () {
+        if (typeof countUp === 'undefined') {
+            return;
+        }
+
+        var elements = [].slice.call(document.querySelectorAll('[data-kt-countup="true"]:not(.counted)'));
+
+        elements.map(function (element) {
+            if (KTUtil.isInViewport(element) && KTUtil.visible(element)) {
+                if (element.getAttribute("data-kt-initialized") === "1") {
+                    return;
+                }
+
+                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');
+
+                element.setAttribute("data-kt-initialized", "1");
+            }
+        });
+    }
+
+    var createCountUpTabs = function () {
+        if (typeof countUp === 'undefined') {
+            return;
+        }
+
+        if (countUpInitialized === false) {
+            // Initial call
+            createCountUp();
+
+            // Window scroll event handler
+            window.addEventListener('scroll', createCountUp);
+        }      
+
+        // Tabs shown event handler
+        var tabs = [].slice.call(document.querySelectorAll('[data-kt-countup-tabs="true"][data-bs-toggle="tab"]'));
+        tabs.map(function (tab) {
+            if (tab.getAttribute("data-kt-initialized") === "1") {
+                return;
+            }
+
+            tab.addEventListener('shown.bs.tab', createCountUp);
+
+            tab.setAttribute("data-kt-initialized", "1");
+        });
+
+        countUpInitialized = true;
+    }
+
+    var createTinySliders = function () {
+        if (typeof tns === 'undefined') {
+            return;
+        }
+
+        // Sliders
+        const elements = Array.prototype.slice.call(document.querySelectorAll('[data-tns="true"]'), 0);
+
+        if (!elements && elements.length === 0) {
+            return;
+        }
+
+        elements.forEach(function (el) {
+            if (el.getAttribute("data-kt-initialized") === "1") {
+                return;
+            }
+
+            initTinySlider(el);
+
+            el.setAttribute("data-kt-initialized", "1");
+        });
+    }
+
+    var initTinySlider = 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,
+            center: true,
+            autoplayButtonOutput: false,
+        }, tnsOptions);
+
+        if (el.closest('.tns')) {
+            KTUtil.addClass(el.closest('.tns'), 'tns-initiazlied');
+        }
+
+        return tns(opt);
+    }
+
+    var initSmoothScroll = function () {
+        if (initialized === true) {
+            return;
+        }
+
+        if (typeof SmoothScroll === 'undefined') {
+            return;
+        }
+
+        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 initCard = function() {
+        // Toggle Handler
+        KTUtil.on(document.body, '[data-kt-card-action="remove"]', 'click', function (e) {
+            e.preventDefault();
+            
+            const card = this.closest('.card');
+
+            if (!card) {
+                return;
+            }
+
+            const confirmMessage = this.getAttribute("data-kt-card-confirm-message");
+            const confirm = this.getAttribute("data-kt-card-confirm") === "true";
+
+            if (confirm) {
+                // Show message popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                Swal.fire({
+                    text: confirmMessage ? confirmMessage : "Are you sure to remove ?",
+                    icon: "warning",
+                    buttonsStyling: false,
+                    confirmButtonText: "Confirm",
+                    denyButtonText: "Cancel",
+                    customClass: {
+                        confirmButton: "btn btn-primary",
+                        denyButton: "btn btn-danger"
+                    }
+                }).then(function (result) {
+                    if (result.isConfirmed) { 
+                        card.remove();
+                    }
+                });
+            } else {
+                card.remove();
+            }            
+        });        
+    }
+
+    var initModal = function() {
+        var elements = Array.prototype.slice.call(document.querySelectorAll("[data-bs-stacked-modal]"));
+
+        if (elements && elements.length > 0) {
+            elements.forEach((element) => {
+                if (element.getAttribute("data-kt-initialized") === "1") {
+                    return;
+                }
+    
+                element.setAttribute("data-kt-initialized", "1");
+    
+                element.addEventListener("click", function(e) {
+                    e.preventDefault();
+    
+                    const modalEl = document.querySelector(this.getAttribute("data-bs-stacked-modal"));
+    
+                    if (modalEl) {
+                        const modal = new bootstrap.Modal(modalEl);
+                        modal.show();
+                    }                
+                }); 
+            });
+        }        
+    }
+
+    var initCheck = function () {
+        if (initialized === true) {
+            return;
+        }
+
+        // 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 initBootstrapCollapse = function() {
+        if (initialized === true) {
+            return;
+        }
+
+        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() {
+        if (initialized === true) {
+            return;
+        }
+        
+        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 initLozad = function() {
+        // Check if lozad included
+        if (typeof lozad === 'undefined') {
+            return;
+        }
+
+		const observer = lozad(); // lazy loads elements with default selector as '.lozad'
+        observer.observe();
+	}
+
+    var showPageLoading = function() {
+        document.body.classList.add('page-loading');
+        document.body.setAttribute('data-kt-app-page-loading', "on");
+    }
+
+    var hidePageLoading = function() {
+        // CSS3 Transitions only after page load(.page-loading or .app-page-loading class added to body tag and remove with JS on page load)
+        document.body.classList.remove('page-loading');
+        document.body.removeAttribute('data-kt-app-page-loading');
+    }
+
+    return {
+        init: function () {
+            initLozad();
+
+            initSmoothScroll();
+
+            initCard();
+
+            initModal();
+
+            initCheck();
+
+            initBootstrapCollapse();
+
+            initBootstrapRotate();            
+
+            createBootstrapTooltips();
+
+            createBootstrapPopovers();
+
+            createBootstrapToasts();
+
+            createDateRangePickers();
+
+            createButtons();
+
+            createSelect2();
+
+            createCountUp();
+
+            createCountUpTabs();
+
+            createAutosize();
+
+            createTinySliders();
+
+            initialized = true;
+        },
+
+        initTinySlider: function(el) {
+            initTinySlider(el);
+        },
+
+        showPageLoading: function () {
+            showPageLoading();
+        },
+
+        hidePageLoading: function () {
+            hidePageLoading();
+        },
+
+        createBootstrapPopover: function(el, options) {
+            return createBootstrapPopover(el, options);
+        },
+
+        createBootstrapTooltip: function(el, options) {
+            return createBootstrapTooltip(el, options);
+        }
+    };
+}();
+
+// Declare KTApp for Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTApp;
+}

resources/_keenthemes/src/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)
+    }
+
+    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, handlerId) {
+        return KTEventHandler.off(the.element, name, handlerId);
+    }
+
+    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/_keenthemes/src/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/_keenthemes/src/js/components/dialer.js

@@ -0,0 +1,289 @@
+"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, handlerId) {
+        return KTEventHandler.off(the.element, name, handlerId);
+    }
+
+    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.querySelectorAll(selector);
+
+    if ( elements && elements.length > 0 ) {
+        for (var i = 0, len = elements.length; i < len; i++) {
+            new KTDialer(elements[i]);
+        }
+    }
+}
+
+// Global initialization
+KTDialer.init = function() {
+    KTDialer.createInstances();
+};
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTDialer;
+}

resources/_keenthemes/src/js/components/drawer.js

@@ -0,0 +1,463 @@
+"use strict";
+
+var KTDrawerHandlersInitialized = false; 
+
+// Class definition
+var KTDrawer = function(element, options) {
+    //////////////////////////////
+    // ** Private variables  ** //
+    //////////////////////////////
+    var the = this;
+
+    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(document.body, togglers, 'click', function(e) {
+                e.preventDefault();
+
+                the.toggleElement = this;
+                _toggle();
+            });
+        }
+
+        if ( closers !== null && closers.length > 0 ) {
+            KTUtil.on(document.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();
+
+        document.body.removeAttribute('data-kt-drawer-' + the.name, 'on');
+        document.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();
+        document.body.setAttribute('data-kt-drawer-' + the.name, 'on');
+        document.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(document.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
+
+            document.body.append(the.overlayElement);
+
+            KTUtil.addClass(the.overlayElement, _getOption('overlay-class'));
+
+            KTUtil.addEvent(the.overlayElement, 'click', function(e) {
+                e.preventDefault();
+
+                if ( _getOption('permanent') !== true ) {
+                    _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, handlerId) {
+        return KTEventHandler.off(the.element, name, handlerId);
+    }
+
+    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 drawer = KTDrawer.getInstance(items[i]);
+
+            if (drawer) {
+                drawer.update();
+            }
+        }
+    }
+}
+
+// Create instances
+KTDrawer.createInstances = function(selector = '[data-kt-drawer="true"]') {
+    // Initialize Menus
+    var elements = document.querySelectorAll(selector);
+
+    if ( elements && elements.length > 0 ) {
+        for (var i = 0, len = elements.length; i < len; i++) {
+            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) {
+        e.preventDefault();
+        
+        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();
+            }
+        } 
+    });
+}
+
+// Handle resize
+KTDrawer.handleResize = function() {
+    // Window resize Handling
+    window.addEventListener('resize', function() {
+        var timer;
+
+        KTUtil.throttle(timer, function() {
+            // Locate and update drawer instances on window resize
+            var elements = document.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();
+
+    if (KTDrawerHandlersInitialized === false) {
+        KTDrawer.handleResize();
+        KTDrawer.handleShow();
+        KTDrawer.handleDismiss();
+
+        KTDrawerHandlersInitialized = true;
+    }
+};
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTDrawer;
+}

resources/_keenthemes/src/js/components/event-handler.js

@@ -0,0 +1,121 @@
+"use strict";
+
+// Class definition
+var KTEventHandler = function() {
+    ////////////////////////////
+    // ** Private Variables  ** //
+    ////////////////////////////
+    var _handlers = {};
+
+    ////////////////////////////
+    // ** Private Methods  ** //
+    ////////////////////////////
+    var _triggerEvent = function(element, name, target) {
+        var returnValue = true;
+        var eventValue;
+
+        if ( KTUtil.data(element).has(name) === true ) {
+            var handlerIds = KTUtil.data(element).get(name);
+            var handlerId;
+
+            for (var i = 0; i < handlerIds.length; i++) {
+                handlerId = handlerIds[i];
+                
+                if ( _handlers[name] && _handlers[name][handlerId] ) {
+                    var handler = _handlers[name][handlerId];
+                    var value;
+    
+                    if ( handler.name === name ) {
+                        if ( handler.one == true ) {
+                            if ( handler.fired == false ) {
+                                _handlers[name][handlerId].fired = true;
+    
+                                eventValue = handler.callback.call(this, target);
+                            }
+                        } else {
+                            eventValue = handler.callback.call(this, target);
+                        }
+
+                        if ( eventValue === false ) {
+                            returnValue = false;
+                        }
+                    }
+                }
+            }            
+        }
+
+        return returnValue;
+    }
+
+    var _addEvent = function(element, name, callback, one) {
+        var handlerId = KTUtil.getUniqueId('event');
+        var handlerIds = KTUtil.data(element).get(name);
+
+        if ( !handlerIds ) {
+            handlerIds = [];
+        } 
+
+        handlerIds.push(handlerId);
+
+        KTUtil.data(element).set(name, handlerIds);
+
+        if ( !_handlers[name] ) {
+            _handlers[name] = {};
+        }
+
+        _handlers[name][handlerId] = {
+            name: name,
+            callback: callback,
+            one: one,
+            fired: false
+        };
+
+        return handlerId;
+    }
+
+    var _removeEvent = function(element, name, handlerId) {
+        var handlerIds = KTUtil.data(element).get(name);
+        var index = handlerIds && handlerIds.indexOf(handlerId);
+        
+        if (index !== -1) {
+            handlerIds.splice(index, 1);
+            KTUtil.data(element).set(name, handlerIds);
+        }
+
+        if (_handlers[name] && _handlers[name][handlerId]) {
+            delete _handlers[name][handlerId];
+        }
+    }
+
+    ////////////////////////////
+    // ** Public Methods  ** //
+    ////////////////////////////
+    return {
+        trigger: function(element, name, target) {
+            return _triggerEvent(element, name, target);
+        },
+
+        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, handlerId) {
+            return _removeEvent(element, name, handlerId);
+        },
+
+        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/_keenthemes/src/js/components/feedback.js

@@ -0,0 +1,163 @@
+"use strict";
+
+// Class definition
+var KTFeedback = function(options) {
+    ////////////////////////////
+    // ** Private Variables  ** //
+    ////////////////////////////
+    var the = this;
+
+    // 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();
+        }
+
+        document.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, handlerId) {
+        return KTEventHandler.off(the.element, name, handlerId);
+    }
+
+    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/_keenthemes/src/js/components/image-input.js

@@ -0,0 +1,209 @@
+"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.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, handlerId) {
+        return KTEventHandler.off(the.element, name, handlerId);
+    }
+
+    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();
+};
+
+// Webpack Support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTImageInput;
+}

resources/_keenthemes/src/js/components/password-meter.js

@@ -0,0 +1,253 @@
+"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() {
+        if (the.highlightElement) {
+            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(':scope > i:not(.d-none)');
+        var hiddenIcon = the.visibilityElement.querySelector(':scope > i.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();
+};
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTPasswordMeter;
+}

resources/_keenthemes/src/js/components/scroll.js

@@ -0,0 +1,358 @@
+"use strict";
+
+var KTScrollHandlersInitialized = false;
+
+// Class definition
+var KTScroll = function(element, options) {
+    ////////////////////////////
+    // ** Private Variables  ** //
+    ////////////////////////////
+    var the = this;
+
+    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 () {
+        var namespace = _getStorageNamespace();
+
+        if ( _getOption('save-state') === true && the.id ) {
+            if ( localStorage.getItem(namespace + the.id + 'st') ) {
+                var pos = parseInt(localStorage.getItem(namespace + the.id + 'st'));
+
+                if ( pos > 0 ) {
+                    the.element.scroll({
+                        top: pos,
+                        behavior: 'instant'
+                    });
+                }
+            }
+        }
+    }
+
+    var _getStorageNamespace = function(postfix) {
+        return document.body.hasAttribute("data-kt-name") ? document.body.getAttribute("data-kt-name") + "_" : "";
+    }
+
+    var _setupScrollHandler = function() {
+        if ( _getOption('save-state') === true && 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 () {
+        var namespace = _getStorageNamespace();
+        localStorage.setItem(namespace + 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
+        //console.log('Q:' + JSON.stringify(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"]') {
+    // Initialize Menus
+    var elements = document.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
+KTScroll.handleResize = function() {
+    window.addEventListener('resize', function() {
+        var timer;
+    
+        KTUtil.throttle(timer, function() {
+            // Locate and update Offcanvas instances on window resize
+            var elements = document.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();
+
+    if (KTScrollHandlersInitialized === false) {
+        KTScroll.handleResize();
+
+        KTScrollHandlersInitialized = true;
+    }    
+};
+
+// Webpack Support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTScroll;
+}

resources/_keenthemes/src/js/components/scrolltop.js

@@ -0,0 +1,164 @@
+"use strict";
+
+// Class definition
+var KTScrolltop = function(element, options) {
+    ////////////////////////////
+    // ** Private variables  ** //
+    ////////////////////////////
+    var the = this;
+
+    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 ( document.body.hasAttribute('data-kt-scrolltop') === false ) {
+                document.body.setAttribute('data-kt-scrolltop', 'on');
+            }
+        } else {
+            if ( document.body.hasAttribute('data-kt-scrolltop') === true ) {
+                document.body.removeAttribute('data-kt-scrolltop');
+            }
+        }
+    }
+
+    var _go = function() {
+        var speed = parseInt(_getOption('speed'));
+
+        window.scrollTo({top: 0, behavior: 'smooth'});
+        //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"]') {
+    // Initialize Menus
+    var elements = document.body.querySelectorAll(selector);
+
+    if ( elements && elements.length > 0 ) {
+        for (var i = 0, len = elements.length; i < len; i++) {
+            new KTScrolltop(elements[i]);
+        }
+    }
+}
+
+// Global initialization
+KTScrolltop.init = function() {
+    KTScrolltop.createInstances();
+};
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTScrolltop;
+}

resources/_keenthemes/src/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, handlerId) {
+        return KTEventHandler.off(the.element, name, handlerId);
+    }
+};
+
+// 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/_keenthemes/src/js/components/stepper.js

@@ -0,0 +1,347 @@
+"use strict";
+
+// Class definition
+var KTStepper = function(element, options) {
+    //////////////////////////////
+    // ** Private variables  ** //
+    //////////////////////////////
+    var the = this;
+
+    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 listeners
+        the.nextListener = function(e) {
+            e.preventDefault();
+
+            KTEventHandler.trigger(the.element, 'kt.stepper.next', the);
+        };
+
+        the.previousListener = function(e) {
+            e.preventDefault();
+
+            KTEventHandler.trigger(the.element, 'kt.stepper.previous', the);
+        };
+
+        the.stepListener = 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;
+                    }
+                }
+            }
+        };
+
+        // Event Handlers
+        KTUtil.addEvent(the.btnNext, 'click', the.nextListener);
+
+        KTUtil.addEvent(the.btnPrevious, 'click', the.previousListener);
+
+        the.stepListenerId = KTUtil.on(the.element, '[data-kt-stepper-action="step"]', 'click', the.stepListener);
+
+        // 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() {
+        // Event Handlers
+        KTUtil.removeEvent(the.btnNext, 'click', the.nextListener);
+
+        KTUtil.removeEvent(the.btnPrevious, 'click', the.previousListener);
+
+        KTUtil.off(the.element, 'click', the.stepListenerId);
+
+        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 _getNextStepIndex();
+    }
+
+    the.getPassedStepIndex = function() {
+        return the.passedStepIndex;
+    }
+
+    the.getClickedStepIndex = function() {
+        return the.clickedStepIndex;
+    }
+
+    the.getPreviousStepIndex = function() {
+        return _getPreviousStepIndex();
+    }
+
+    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, handlerId) {
+        return KTEventHandler.off(the.element, name, handlerId);
+    }
+
+    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/_keenthemes/src/js/components/sticky.js

@@ -0,0 +1,409 @@
+"use strict";
+
+var KTStickyHandlersInitialized = false;
+
+// Class definition
+var KTSticky = function(element, options) {
+    ////////////////////////////
+    // ** Private Variables  ** //
+    ////////////////////////////
+    var the = this;
+
+    if ( typeof element === "undefined" || element === null ) {
+        return;
+    }
+
+    // Default Options
+    var defaultOptions = {
+        offset: 200,
+        reverse: false,
+        release: null,
+        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.attributeName2 = 'data-kt-' + 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 release = _getOption('release');
+        var reverse = _getOption('reverse');
+        var st;
+        var attrName;
+        var diff;
+
+        // Exit if false
+        if ( offset === false ) {
+            return;
+        }
+
+        offset = parseInt(offset);
+        release = release ? document.querySelector(release) : null;
+
+        st = KTUtil.getScrollTop();
+        diff = document.documentElement.scrollHeight - window.innerHeight - KTUtil.getScrollTop();
+        
+        var proceed = (!release || (release.offsetTop - release.clientHeight) > st);
+
+        if ( reverse === true ) {  // Release on reverse scroll mode
+            if ( st > offset && proceed ) {
+                if ( document.body.hasAttribute(the.attributeName) === false) {
+                    
+                    if (_enable() === false) {
+                        return;
+                    }
+
+                    document.body.setAttribute(the.attributeName, 'on');
+                    document.body.setAttribute(the.attributeName2, 'on');
+                    the.element.setAttribute("data-kt-sticky-enabled", "true");
+                }
+
+                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 ( document.body.hasAttribute(the.attributeName) === true) {
+                    _disable();
+                    document.body.removeAttribute(the.attributeName);
+                    document.body.removeAttribute(the.attributeName2);
+                    the.element.removeAttribute("data-kt-sticky-enabled");
+                }
+
+                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 && proceed ) {
+                if ( document.body.hasAttribute(the.attributeName) === false) {
+                    
+                    if (_enable() === false) {
+                        return;
+                    } 
+                    
+                    document.body.setAttribute(the.attributeName, 'on');
+                    document.body.setAttribute(the.attributeName2, 'on');
+                    the.element.setAttribute("data-kt-sticky-enabled", "true");
+                }
+
+                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 ( document.body.hasAttribute(the.attributeName) === true ) {
+                    _disable();
+                    document.body.removeAttribute(the.attributeName);
+                    document.body.removeAttribute(the.attributeName2);
+                    the.element.removeAttribute("data-kt-sticky-enabled");
+                }
+
+                if ( the.eventTriggerState === false ) {
+                    KTEventHandler.trigger(the.element, 'kt.sticky.off', the);
+                    KTEventHandler.trigger(the.element, 'kt.sticky.change', the);
+                    the.eventTriggerState = true;
+                }
+            }
+        }      
+
+        if (release) {
+            if ( release.offsetTop - release.clientHeight > st ) {
+                the.element.setAttribute('data-kt-sticky-released', 'true');
+            } else {
+                the.element.removeAttribute('data-kt-sticky-released');
+            }
+        } 
+    }
+
+    var _enable = function(update) {
+        var top = _getOption('top');
+        top = top ? parseInt(top) : 0;
+
+        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();
+        var heightOffset = _getOption('height-offset');
+        heightOffset = heightOffset ? parseInt(heightOffset) : 0;
+
+        if (height + heightOffset + top > KTUtil.getViewPort().height) {
+            return false;
+        }
+        
+        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 >= 0 ) {
+            KTUtil.css(the.element, 'top', String(top) + 'px');
+        }
+
+        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 _check = function() {
+
+    }
+
+    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 ( document.body.hasAttribute(the.attributeName) === true ) {
+            _disable();
+            document.body.removeAttribute(the.attributeName);
+            document.body.removeAttribute(the.attributeName2);
+            _enable(true);
+            document.body.setAttribute(the.attributeName, 'on');
+            document.body.setAttribute(the.attributeName2, '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, handlerId) {
+        return KTEventHandler.off(the.element, name, handlerId);
+    }
+
+    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"]') {
+    // Initialize Menus
+    var elements = document.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
+KTSticky.handleResize = function() {
+    window.addEventListener('resize', function() {
+        var timer;
+    
+        KTUtil.throttle(timer, function() {
+            // Locate and update Offcanvas instances on window resize
+            var elements = document.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();
+
+    if (KTStickyHandlersInitialized === false) {
+        KTSticky.handleResize();
+        KTStickyHandlersInitialized = true;
+    }    
+};
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTSticky;
+}

resources/_keenthemes/src/js/components/swapper.js

@@ -0,0 +1,180 @@
+"use strict";
+
+var KTSwapperHandlersInitialized = false;
+
+// 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, handlerId) {
+        return KTEventHandler.off(the.element, name, handlerId);
+    }
+
+    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
+KTSwapper.handleResize = function() {
+    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();
+
+    if (KTSwapperHandlersInitialized === false) {
+        KTSwapper.handleResize();
+        KTSwapperHandlersInitialized = true;
+    }
+};
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTSwapper;
+}

resources/_keenthemes/src/js/components/toggle.js

@@ -0,0 +1,216 @@
+"use strict";
+
+// Class definition
+var KTToggle = function(element, options) {
+    ////////////////////////////
+    // ** Private variables  ** //
+    ////////////////////////////
+    var the = this;
+
+    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, handlerId) {
+        return KTEventHandler.off(the.element, name, handlerId);
+    }
+
+    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]') {
+    // 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 KTToggle(elements[i]);
+        }
+    }
+}
+
+// Global initialization
+KTToggle.init = function() {
+    KTToggle.createInstances();
+};
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTToggle;
+}

resources/_keenthemes/src/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 copyIcon = button.querySelector('.ki-copy');                
+                var checkIcon = button.querySelector('.ki-check');
+                
+                // exit if check icon is already shown
+                if (checkIcon) {
+                   return;  
+                }
+
+                // Create check icon
+                checkIcon = document.createElement('i');
+                checkIcon.classList.add('ki-solid');
+                checkIcon.classList.add('ki-check');
+                checkIcon.classList.add('fs-2');
+
+                // Append check icon
+                button.appendChild(checkIcon);
+
+                // Highlight target
+                license.classList.add('text-success');
+
+                // Hide copy icon
+                copyIcon.classList.add('d-none');
+
+                // Set 3 seconds timeout to hide the check icon and show copy icon back
+                setTimeout(function() {
+                    // Remove check icon
+                    copyIcon.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/_keenthemes/src/js/custom/account/billing/general.js

@@ -0,0 +1,138 @@
+"use strict";
+
+// Class definition
+var KTAccountBillingGeneral = function () {
+    // Private variables
+    var cancelSubscriptionButton;
+
+    // Private functions
+    var handlePlan = function () {
+        cancelSubscriptionButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            swal.fire({
+                text: "Are you sure you would like to cancel your subscription ?",
+                icon: "warning",
+                buttonsStyling: false,
+                showDenyButton: true,
+                confirmButtonText: "Yes",
+                denyButtonText: 'No',
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    denyButton: "btn btn-light-danger"
+                }
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    Swal.fire({
+                        text: 'Your subscription has been canceled.', 
+                        icon: 'success',
+                        confirmButtonText: "Ok",
+                        buttonsStyling: false,
+                        customClass: {
+                            confirmButton: "btn btn-light-primary"
+                        }
+                    })
+                } 
+            });
+        });
+    }
+
+    var handleCardDelete = function() {
+        KTUtil.on(document.body,  '[data-kt-billing-action="card-delete"]', 'click', function(e) {
+            e.preventDefault();
+
+            var el = this;
+
+            swal.fire({
+                text: "Are you sure you would like to delete selected card ?",
+                icon: "warning",
+                buttonsStyling: false,
+                showDenyButton: true,
+                confirmButtonText: "Yes",
+                denyButtonText: 'No',
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    denyButton: "btn btn-light-danger"
+                }
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    el.setAttribute('data-kt-indicator', 'on');            
+                    el.disabled = true;
+
+                    setTimeout(function() {
+                        Swal.fire({
+                            text: 'Your selected card has been successfully deleted', 
+                            icon: 'success',
+                            confirmButtonText: "Ok",
+                            buttonsStyling: false,
+                            customClass: {
+                                confirmButton: "btn btn-light-primary"
+                            }
+                        }).then((result) => {
+                            el.closest('[data-kt-billing-element="card"]').remove();
+                        });
+                    }, 2000);
+                } 
+            });   
+        });
+    } 
+
+    var handleAddressDelete = function() {
+        KTUtil.on(document.body,  '[data-kt-billing-action="address-delete"]', 'click', function(e) {
+            e.preventDefault();
+
+            var el = this;
+
+            swal.fire({
+                text: "Are you sure you would like to delete selected address ?",
+                icon: "warning",
+                buttonsStyling: false,
+                showDenyButton: true,
+                confirmButtonText: "Yes",
+                denyButtonText: 'No',
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    denyButton: "btn btn-light-danger"
+                }
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    el.setAttribute('data-kt-indicator', 'on');            
+                    el.disabled = true;
+
+                    setTimeout(function() {
+                        Swal.fire({
+                            text: 'Your selected address has been successfully deleted', 
+                            icon: 'success',
+                            confirmButtonText: "Ok",
+                            buttonsStyling: false,
+                            customClass: {
+                                confirmButton: "btn btn-light-primary"
+                            }
+                        }).then((result) => {
+                            el.closest('[data-kt-billing-element="address"]').remove();
+                        });
+                    }, 2000);
+                } 
+            });   
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {            
+            cancelSubscriptionButton = document.querySelector('#kt_account_billing_cancel_subscription_btn');
+
+            if ( cancelSubscriptionButton ) {
+                handlePlan();
+            }            
+
+            handleCardDelete();
+            handleAddressDelete();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTAccountBillingGeneral.init();
+});

resources/_keenthemes/src/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/_keenthemes/src/js/custom/account/referrals/referral-program.js

@@ -0,0 +1,43 @@
+"use strict";
+
+// Class definition
+var KTAccountReferralsReferralProgram = function () {
+    // Private functions
+
+    var initReferralProgrammClipboard = function() {
+        var button = document.querySelector('#kt_referral_program_link_copy_btn');
+        var input = document.querySelector('#kt_referral_link_input');
+        var clipboard = new ClipboardJS(button);
+
+        clipboard.on('success', function(e) {
+            var buttonCaption = button.innerHTML;
+            //Add bgcolor
+            input.classList.add('bg-success');
+            input.classList.add('text-inverse-success');
+
+            button.innerHTML = 'Copied!';
+
+            setTimeout(function() {
+                button.innerHTML = buttonCaption;
+
+                // Remove bgcolor
+                input.classList.remove('bg-success'); 
+                input.classList.remove('text-inverse-success'); 
+            }, 3000);  // 3seconds
+
+            e.clearSelection();
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initReferralProgrammClipboard();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTAccountReferralsReferralProgram.init();
+});

resources/_keenthemes/src/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 copyIcon = button.querySelector('.ki-copy');                
+                var checkIcon = button.querySelector('.ki-check');
+                
+                // exit if check icon is already shown
+                if (checkIcon) {
+                   return;  
+                }
+
+                // Create check icon
+                checkIcon = document.createElement('i');
+                checkIcon.classList.add('ki-solid');
+                checkIcon.classList.add('ki-check');
+                checkIcon.classList.add('fs-2');
+
+                // Append check icon
+                button.appendChild(checkIcon);
+
+                // Highlight target
+                license.classList.add('text-success');
+
+                // Hide copy icon
+                copyIcon.classList.add('d-none');
+
+                // Set 3 seconds timeout to hide the check icon and show copy icon back
+                setTimeout(function() {
+                    // Remove check icon
+                    copyIcon.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/_keenthemes/src/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/_keenthemes/src/js/custom/account/settings/deactivate-account.js

@@ -0,0 +1,116 @@
+"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');
+
+            if (!form) {
+                return;
+            }
+            
+            submitButton = document.querySelector('#kt_account_deactivate_account_submit');
+
+            initValidation();
+            handleForm();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTAccountSettingsDeactivateAccount.init();
+});

resources/_keenthemes/src/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/_keenthemes/src/js/custom/account/settings/profile-details.js

@@ -0,0 +1,155 @@
+"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');
+            
+            if (!form) {
+                return;
+            }
+
+            submitButton = form.querySelector('#kt_account_profile_details_submit');
+
+            initValidation();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTAccountSettingsProfileDetails.init();
+});

resources/_keenthemes/src/js/custom/account/settings/signin-methods.js

@@ -0,0 +1,236 @@
+"use strict";
+
+// Class definition
+var KTAccountSettingsSigninMethods = function () {
+    var signInForm;
+    var signInMainEl;
+    var signInEditEl;
+    var passwordMainEl;
+    var passwordEditEl;
+    var signInChangeEmail;
+    var signInCancelEmail;
+    var passwordChange;
+    var passwordCancel;
+
+    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');
+    }
+
+    // Private functions
+    var initSettings = function () {  
+        if (!signInMainEl) {
+            return;
+        }        
+
+        // 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 handleChangeEmail = function (e) {
+        var validation;        
+
+        if (!signInForm) {
+            return;
+        }
+
+        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/
+                        toggleChangeEmail();
+                    });
+                } 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');
+
+        if (!passwordForm) {
+            return;
+        }
+
+        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/
+                        toggleChangePassword();
+                    });
+                } 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 () {
+            signInForm = document.getElementById('kt_signin_change_email');
+            signInMainEl = document.getElementById('kt_signin_email');
+            signInEditEl = document.getElementById('kt_signin_email_edit');
+            passwordMainEl = document.getElementById('kt_signin_password');
+            passwordEditEl = document.getElementById('kt_signin_password_edit');
+            signInChangeEmail = document.getElementById('kt_signin_email_button');
+            signInCancelEmail = document.getElementById('kt_signin_cancel');
+            passwordChange = document.getElementById('kt_signin_password_button');
+            passwordCancel = document.getElementById('kt_password_cancel');
+
+            initSettings();
+            handleChangeEmail();
+            handleChangePassword();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTAccountSettingsSigninMethods.init();
+});

resources/_keenthemes/src/js/custom/apps/calendar/calendar.js

@@ -0,0 +1,831 @@
+"use strict";
+
+// Class definition
+var KTAppCalendar = function () {
+    // Shared variables
+    // Calendar variables
+    var calendar;
+    var data = {
+        id: '',
+        eventName: '',
+        eventDescription: '',
+        eventLocation: '',
+        startDate: '',
+        endDate: '',
+        allDay: 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, {
+            //locale: 'es', // Set local --- more info: https://fullcalendar.io/docs/locale
+            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) {
+                formatArgs(arg);
+                handleNewEvent();
+            },
+
+            // Click event --- more info: https://fullcalendar.io/docs/eventClick
+            eventClick: 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
+                });
+                
+                handleViewEvent();
+            },
+
+            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'
+                }
+            ],
+
+            // Handle changing calendar views --- more info: https://fullcalendar.io/docs/datesSet
+            datesSet: function(){
+                // do some stuff
+            }
+        });
+
+        calendar.render();
+    }
+
+    // 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 => {
+            // 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/_keenthemes/src/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/_keenthemes/src/js/custom/apps/contacts/edit-contact.js

@@ -0,0 +1,160 @@
+"use strict";
+
+// Class definition
+var KTAppContactEdit = function () {
+    // Shared variables
+
+
+    // Private functions
+    const initForm = () => {
+        // Select form
+        const form = document.getElementById('kt_ecommerce_settings_general_form');
+
+        if (!form) {
+            return;
+        }
+
+        // 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 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-contacts-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"
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 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 with flags
+    const initSelect2Flags = () => {
+        // Format options
+        var optionFormat = function(item) {
+            if ( !item.id ) {
+                return item.text;
+            }
+
+            var span = document.createElement('span');
+            var template = '';
+
+            template += '<img src="' + item.element.getAttribute('data-kt-select2-country') + '" class="rounded-circle me-2" style="height:19px;" alt="image"/>';
+            template += item.text;
+
+            span.innerHTML = template;
+
+            return $(span);
+        }
+
+        // Init Select2 --- more info: https://select2.org/
+        $('[data-kt-ecommerce-settings-type="select2_flags"]').select2({
+            placeholder: "Select a country",
+            minimumResultsForSearch: Infinity,
+            templateSelection: optionFormat,
+            templateResult: optionFormat
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+
+            initForm();
+            initSelect2Flags();
+
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppContactEdit.init();
+});

resources/_keenthemes/src/js/custom/apps/contacts/view-contact.js

@@ -0,0 +1,74 @@
+"use strict";
+
+// Class definition
+var KTAppContactView = function () {
+    // Private functions
+    const handleDeleteButton = () => {
+        // Select form
+        const deleteButton = document.getElementById('kt_contact_delete');
+
+        if (!deleteButton) {
+            return;
+        }
+
+        deleteButton.addEventListener('click', e => {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Show popup confirmation 
+            Swal.fire({
+                text: "Delete contact confirmation",
+                icon: "warning",
+                buttonsStyling: false,
+                showCancelButton: true,
+                confirmButtonText: "Yes, delete it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-danger",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    Swal.fire({
+                        text: "Contact has been deleted!",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary"
+                        }
+                    }).then(function (result) {
+                        if (result.value) {
+                            // Redirect to customers list page
+                            window.location = deleteButton.getAttribute("data-kt-redirect");
+                        }
+                    });
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Contact has not been deleted!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+
+            handleDeleteButton();
+
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppContactView.init();
+});

resources/_keenthemes/src/js/custom/apps/customers/add.js

@@ -0,0 +1,238 @@
+"use strict";
+
+// Class definition
+var KTModalCustomersAdd = function () {
+    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: {
+                    'name': {
+						validators: {
+							notEmpty: {
+								message: 'Customer name is required'
+							}
+						}
+					},
+                    'email': {
+						validators: {
+							notEmpty: {
+								message: 'Customer email is required'
+							}
+						}
+					},
+					'first-name': {
+						validators: {
+							notEmpty: {
+								message: 'First name is required'
+							}
+						}
+					},
+					'last-name': {
+						validators: {
+							notEmpty: {
+								message: 'Last name is required'
+							}
+						}
+					},
+					'country': {
+						validators: {
+							notEmpty: {
+								message: 'Country is required'
+							}
+						}
+					},
+					'address1': {
+						validators: {
+							notEmpty: {
+								message: 'Address 1 is required'
+							}
+						}
+					},
+					'city': {
+						validators: {
+							notEmpty: {
+								message: 'City is required'
+							}
+						}
+					},
+					'state': {
+						validators: {
+							notEmpty: {
+								message: 'State is required'
+							}
+						}
+					},
+					'postcode': {
+						validators: {
+							notEmpty: {
+								message: 'Postcode 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="country"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('country');
+        });
+
+		// 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: "Form has been successfully submitted!",
+								icon: "success",
+								buttonsStyling: false,
+								confirmButtonText: "Ok, got it!",
+								customClass: {
+									confirmButton: "btn btn-primary"
+								}
+							}).then(function (result) {
+								if (result.isConfirmed) {
+									// Hide modal
+									modal.hide();
+
+									// Enable submit button after loading
+									submitButton.disabled = false;
+
+									// Redirect to customers list page
+									window.location = form.getAttribute("data-kt-redirect");
+								}
+							});							
+						}, 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",
+                        }
+                    });
+                }
+            });
+		})
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            // Elements
+            modal = new bootstrap.Modal(document.querySelector('#kt_modal_add_customer'));
+
+            form = document.querySelector('#kt_modal_add_customer_form');
+            submitButton = form.querySelector('#kt_modal_add_customer_submit');
+            cancelButton = form.querySelector('#kt_modal_add_customer_cancel');
+			closeButton = form.querySelector('#kt_modal_add_customer_close');
+
+            handleForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+	KTModalCustomersAdd.init();
+});

resources/_keenthemes/src/js/custom/apps/customers/list/export.js

@@ -0,0 +1,189 @@
+"use strict";
+
+// Class definition
+var KTCustomersExport = 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_customers_export_modal');
+            modal = new bootstrap.Modal(element);
+
+            form = document.querySelector('#kt_customers_export_form');
+            submitButton = form.querySelector('#kt_customers_export_submit');
+            cancelButton = form.querySelector('#kt_customers_export_cancel');
+			closeButton = element.querySelector('#kt_customers_export_close');
+
+            handleForm();
+            initForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTCustomersExport.init();
+});

resources/_keenthemes/src/js/custom/apps/customers/list/list.js

@@ -0,0 +1,283 @@
+"use strict";
+
+// Class definition
+var KTCustomersList = function () {
+    // Define shared variables
+    var datatable;
+    var filterMonth;
+    var filterPayment;
+    var table
+
+    // Private functions
+    var initCustomerList = 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 5th 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': [],
+            '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();
+            KTMenu.init(); // reinit KTMenu instances 
+        });
+    }
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-customer-table-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Filter Datatable
+    var handleFilterDatatable = () => {
+        // Select filter options
+        filterMonth = $('[data-kt-customer-table-filter="month"]');
+        filterPayment = document.querySelectorAll('[data-kt-customer-table-filter="payment_type"] [name="payment_type"]');
+        const filterButton = document.querySelector('[data-kt-customer-table-filter="filter"]');
+
+        // Filter datatable on submit
+        filterButton.addEventListener('click', function () {
+            // Get filter values
+            const monthValue = filterMonth.val();
+            let paymentValue = '';
+
+            // Get payment value
+            filterPayment.forEach(r => {
+                if (r.checked) {
+                    paymentValue = r.value;
+                }
+
+                // Reset payment value if "All" is selected
+                if (paymentValue === 'all') {
+                    paymentValue = '';
+                }
+            });
+
+            // Build filter string from filter options
+            const filterString = monthValue + ' ' + paymentValue;
+
+            // Filter datatable --- official docs reference: https://datatables.net/reference/api/search()
+            datatable.search(filterString).draw();
+        });
+    }
+
+    // Delete customer
+    var handleDeleteRows = () => {
+        // Select all delete buttons
+        const deleteButtons = table.querySelectorAll('[data-kt-customer-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();
+                        });
+                    } 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",
+                            }
+                        });
+                    }
+                });
+            })
+        });
+    }
+
+    // Reset Filter
+    var handleResetForm = () => {
+        // Select reset button
+        const resetButton = document.querySelector('[data-kt-customer-table-filter="reset"]');
+
+        // Reset datatable
+        resetButton.addEventListener('click', function () {
+            // Reset month
+            filterMonth.val(null).trigger('change');
+
+            // Reset payment type
+            filterPayment[0].checked = true;
+
+            // Reset datatable --- official docs reference: https://datatables.net/reference/api/search()
+            datatable.search('').draw();
+        });
+    }
+
+    // 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-customer-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;
+                    });
+                } 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-customer-table-toolbar="base"]');
+        const toolbarSelected = document.querySelector('[data-kt-customer-table-toolbar="selected"]');
+        const selectedCount = document.querySelector('[data-kt-customer-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');
+        }
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            table = document.querySelector('#kt_customers_table');
+            
+            if (!table) {
+                return;
+            }
+
+            initCustomerList();
+            initToggleToolbar();
+            handleSearchDatatable();
+            handleFilterDatatable();
+            handleDeleteRows();
+            handleResetForm();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTCustomersList.init();
+});

resources/_keenthemes/src/js/custom/apps/customers/update.js

@@ -0,0 +1,131 @@
+"use strict";
+
+// Class definition
+var KTModalUpdateCustomer = function () {
+    var element;
+    var submitButton;
+    var cancelButton;
+    var closeButton;
+    var form;
+    var modal;
+
+    // Init form inputs
+    var initForm = function () {
+        // Action buttons
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Show loading indication
+            submitButton.setAttribute('data-kt-indicator', 'on');
+
+            // Simulate form submission
+            setTimeout(function () {
+                // Simulate form submission
+                submitButton.removeAttribute('data-kt-indicator');
+
+                // 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);
+        });
+
+        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",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            // Elements
+            element = document.querySelector('#kt_modal_update_customer');
+            modal = new bootstrap.Modal(element);
+
+            form = element.querySelector('#kt_modal_update_customer_form');
+            submitButton = form.querySelector('#kt_modal_update_customer_submit');
+            cancelButton = form.querySelector('#kt_modal_update_customer_cancel');
+            closeButton = element.querySelector('#kt_modal_update_customer_close');
+
+            initForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTModalUpdateCustomer.init();
+});

resources/_keenthemes/src/js/custom/apps/customers/view/add-payment.js

@@ -0,0 +1,207 @@
+"use strict";
+
+// Class definition
+var KTModalAddPayment = function () {
+    var element;
+    var submitButton;
+    var cancelButton;
+    var closeButton;
+    var validator;
+    var newBalance;
+    var form;
+    var modal;
+
+    // Init form inputs
+    var initForm = function () {
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'invoice': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Invoice number is required'
+                            }
+                        }
+                    },
+                    'status': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Invoice status is required'
+                            }
+                        }
+                    },
+                    'amount': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Invoice amount 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="status"]')).on('change', function () {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('status');
+        });
+
+        // Action buttons
+        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: "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();
+
+                                    // Enable submit button after loading
+                                    submitButton.disabled = false;
+
+                                    // 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"
+                            }
+                        });
+                    }
+                });
+            }
+        });
+
+        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",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            // Elements
+            element = document.querySelector('#kt_modal_add_payment');
+            modal = new bootstrap.Modal(element);
+
+            form = element.querySelector('#kt_modal_add_payment_form');
+            submitButton = form.querySelector('#kt_modal_add_payment_submit');
+            cancelButton = form.querySelector('#kt_modal_add_payment_cancel');
+            closeButton = element.querySelector('#kt_modal_add_payment_close');
+
+            initForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTModalAddPayment.init();
+});

resources/_keenthemes/src/js/custom/apps/customers/view/adjust-balance.js

@@ -0,0 +1,241 @@
+"use strict";
+
+// Class definition
+var KTModalAdjustBalance = function () {
+    var element;
+    var submitButton;
+    var cancelButton;
+    var closeButton;
+    var validator;
+    var maskInput;
+    var newBalance;
+    var form;
+    var modal;
+
+    // Init form inputs
+    var initForm = function () {
+        // Init inputmask plugin --- For more info please refer to the official documentation here: https://github.com/RobinHerbots/Inputmask
+        Inputmask("US$ 9,999,999.99", {
+            "numericInput": true
+        }).mask("#kt_modal_inputmask");
+    }
+
+    var handleBalanceCalculator = function () {
+        // Select elements
+        const currentBalance = element.querySelector('[kt-modal-adjust-balance="current_balance"]');
+        newBalance = element.querySelector('[kt-modal-adjust-balance="new_balance"]');
+        maskInput = document.getElementById('kt_modal_inputmask');
+
+        // Get current balance value
+        const isNegative = currentBalance.innerHTML.includes('-');
+        let currentValue = parseFloat(currentBalance.innerHTML.replace(/[^0-9.]/g, '').replace(',', ''));
+        currentValue = isNegative ? currentValue * -1 : currentValue; 
+
+        // On change event for inputmask
+        let maskValue;
+        maskInput.addEventListener('focusout', function (e) {
+            // Get inputmask value on change
+            maskValue = parseFloat(e.target.value.replace(/[^0-9.]/g, '').replace(',', ''));
+
+            // Set mask value as 0 when NaN detected
+            if(isNaN(maskValue)){
+                maskValue = 0;
+            }
+
+            // Calculate & set new balance value
+            newBalance.innerHTML = 'US$ ' + (maskValue + currentValue).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
+        });
+    }
+
+    // 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: {
+                    'adjustment': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Adjustment type is required'
+                            }
+                        }
+                    },
+                    'amount': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Amount 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="adjustment"]')).on('change', function () {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('adjustment');
+        });
+
+        // Action buttons
+        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: "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();
+
+                                    // Enable submit button after loading
+                                    submitButton.disabled = false;
+
+                                    // Reset form for demo purposes only
+                                    form.reset();
+                                    newBalance.innerHTML = "--";
+                                }
+                            });
+
+                            //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"
+                            }
+                        });
+                    }
+                });
+            }
+        });
+
+        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",
+                        }
+                    });
+                }
+            });
+        });
+    }
+    
+    return {
+        // Public functions
+        init: function () {
+            // Elements
+            element = document.querySelector('#kt_modal_adjust_balance');
+            modal = new bootstrap.Modal(element);
+
+            form = element.querySelector('#kt_modal_adjust_balance_form');
+            submitButton = form.querySelector('#kt_modal_adjust_balance_submit');
+            cancelButton = form.querySelector('#kt_modal_adjust_balance_cancel');
+            closeButton = element.querySelector('#kt_modal_adjust_balance_close');
+
+            initForm();
+            handleBalanceCalculator();
+            handleForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTModalAdjustBalance.init();
+});

resources/_keenthemes/src/js/custom/apps/customers/view/invoices.js

@@ -0,0 +1,129 @@
+"use strict";
+
+// Class definition
+var KTCustomerViewInvoices = function () {
+
+    // Private functions
+    // Init current year datatable
+    var initInvoiceYearCurrent = function () {
+        // Define table element
+        const id = '#kt_customer_details_invoices_table_1';
+        var table = document.querySelector(id);
+
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
+            dateRow[0].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        var datatable = $(id).DataTable({
+            "info": false,
+            'order': [],
+            "pageLength": 5,
+            "lengthChange": false,
+            'columnDefs': [
+                { orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
+            ]
+        });
+    }
+
+    // Init year 2020 datatable
+    var initInvoiceYear2020 = function () {
+        // Define table element
+        const id = '#kt_customer_details_invoices_table_2';
+        var table = document.querySelector(id);
+
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
+            dateRow[0].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        var datatable = $(id).DataTable({
+            "info": false,
+            'order': [],
+            "pageLength": 5,
+            "lengthChange": false,
+            'columnDefs': [
+                { orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
+            ]
+        });
+    }
+
+    // Init year 2019 datatable
+    var initInvoiceYear2019 = function () {
+        // Define table element
+        const id = '#kt_customer_details_invoices_table_3';
+        var table = document.querySelector(id);
+
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
+            dateRow[0].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        var datatable = $(id).DataTable({
+            "info": false,
+            'order': [],
+            "pageLength": 5,
+            "lengthChange": false,
+            'columnDefs': [
+                { orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
+            ]
+        });
+    }
+
+    // Init year 2018 datatable
+    var initInvoiceYear2018 = function () {
+        // Define table element
+        const id = '#kt_customer_details_invoices_table_4';
+        var table = document.querySelector(id);
+
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
+            dateRow[0].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        var datatable = $(id).DataTable({
+            "info": false,
+            'order': [],
+            "pageLength": 5,
+            "lengthChange": false,
+            'columnDefs': [
+                { orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
+            ]
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initInvoiceYearCurrent();
+            initInvoiceYear2020();
+            initInvoiceYear2019();
+            initInvoiceYear2018();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTCustomerViewInvoices.init();
+});

resources/_keenthemes/src/js/custom/apps/customers/view/payment-method.js

@@ -0,0 +1,110 @@
+"use strict";
+
+// Class definition
+var KTCustomerViewPaymentMethod = function () {
+
+    // Private functions
+    var initPaymentMethod = function () {
+        // Define variables
+        const table = document.getElementById('kt_customer_view_payment_method');
+        const tableRows = table.querySelectorAll('[ data-kt-customer-payment-method="row"]');
+
+        tableRows.forEach(row => {
+            // Select delete button
+            const deleteButton = row.querySelector('[data-kt-customer-payment-method="delete"]');
+
+            // Delete button action
+            deleteButton.addEventListener('click', e => {
+                e.preventDefault();
+
+                // Popup confirmation
+                Swal.fire({
+                    text: "Are you sure you would like to delete this card?",
+                    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) {
+                        row.remove();
+                        modal.hide(); // Hide modal				
+                    } else if (result.dismiss === 'cancel') {
+                        Swal.fire({
+                            text: "Your card was not deleted!.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary",
+                            }
+                        });
+                    }
+                });
+            });
+        });
+    }
+
+    // Handle set as primary button
+    const handlePrimaryButton = () => {
+        // Define variable
+        const button = document.querySelector('[data-kt-payment-mehtod-action="set_as_primary"]');
+
+        button.addEventListener('click', e => {
+            e.preventDefault();
+
+            // Popup confirmation
+            Swal.fire({
+                text: "Are you sure you would like to set this card as primary?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, set it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    Swal.fire({
+                        text: "Your card was set to primary!.",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your card was not set to primary!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    };
+
+    // Public methods
+    return {
+        init: function () {
+            initPaymentMethod();
+            handlePrimaryButton();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTCustomerViewPaymentMethod.init();
+});

resources/_keenthemes/src/js/custom/apps/customers/view/payment-table.js

@@ -0,0 +1,110 @@
+"use strict";
+
+// Class definition
+var KTCustomerViewPaymentTable = function () {
+
+    // Define shared variables
+    var datatable;
+    var table = document.querySelector('#kt_table_customers_payment');
+
+    // Private functions
+    var initCustomerView = function () {
+        // 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 4th 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: 4 }, // Disable ordering on column 5 (actions)
+            ]
+        });
+    }
+
+    // Delete customer
+    var deleteRows = () => {
+        // Select all delete buttons
+        const deleteButtons = table.querySelectorAll('[data-kt-customer-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 invoiceNumber = 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 " + invoiceNumber + "?",
+                    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 " + invoiceNumber + "!.",
+                            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",
+                            }
+                        });
+                    }
+                });
+            })
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            if (!table) {
+                return;
+            }
+
+            initCustomerView();
+            deleteRows();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTCustomerViewPaymentTable.init();
+});

resources/_keenthemes/src/js/custom/apps/customers/view/statement.js

@@ -0,0 +1,129 @@
+"use strict";
+
+// Class definition
+var KTCustomerViewStatements = function () {
+
+    // Private functions
+    // Init current year datatable
+    var initStatementYearCurrent = function () {
+        // Define table element
+        const id = '#kt_customer_view_statement_table_1';
+        var table = document.querySelector(id);
+
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
+            dateRow[0].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        var datatable = $(id).DataTable({
+            "info": false,
+            'order': [],
+            "pageLength": 10,
+            "lengthChange": false,
+            'columnDefs': [
+                { orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
+            ]
+        });
+    }
+
+    // Init year 2020 datatable
+    var initStatementYear2020 = function () {
+        // Define table element
+        const id = '#kt_customer_view_statement_table_2';
+        var table = document.querySelector(id);
+
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
+            dateRow[0].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        var datatable = $(id).DataTable({
+            "info": false,
+            'order': [],
+            "pageLength": 10,
+            "lengthChange": false,
+            'columnDefs': [
+                { orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
+            ]
+        });
+    }
+
+    // Init year 2019 datatable
+    var initStatementYear2019 = function () {
+        // Define table element
+        const id = '#kt_customer_view_statement_table_3';
+        var table = document.querySelector(id);
+
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
+            dateRow[0].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        var datatable = $(id).DataTable({
+            "info": false,
+            'order': [],
+            "pageLength": 10,
+            "lengthChange": false,
+            'columnDefs': [
+                { orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
+            ]
+        });
+    }
+
+    // Init year 2018 datatable
+    var initStatementYear2018 = function () {
+        // Define table element
+        const id = '#kt_customer_view_statement_table_4';
+        var table = document.querySelector(id);
+
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
+            dateRow[0].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        var datatable = $(id).DataTable({
+            "info": false,
+            'order': [],
+            "pageLength": 10,
+            "lengthChange": false,
+            'columnDefs': [
+                { orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
+            ]
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initStatementYearCurrent();
+            initStatementYear2020();
+            initStatementYear2019();
+            initStatementYear2018();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTCustomerViewStatements.init();
+});

resources/_keenthemes/src/js/custom/apps/ecommerce/catalog/categories.js

@@ -0,0 +1,114 @@
+"use strict";
+
+// Class definition
+var KTAppEcommerceCategories = function () {
+    // Shared variables
+    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': [],
+            'pageLength': 10,
+            'columnDefs': [
+                { orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
+                { orderable: false, targets: 3 }, // Disable ordering on column 3 (actions)
+            ]
+        });
+
+        // Re-init functions on datatable re-draws
+        datatable.on('draw', function () {
+            handleDeleteRows();
+        });
+    }
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-ecommerce-category-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Delete cateogry
+    var handleDeleteRows = () => {
+        // Select all delete buttons
+        const deleteButtons = table.querySelectorAll('[data-kt-ecommerce-category-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 category name
+                const categoryName = parent.querySelector('[data-kt-ecommerce-category-filter="category_name"]').innerText;
+
+                // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+                Swal.fire({
+                    text: "Are you sure you want to delete " + categoryName + "?",
+                    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 " + categoryName + "!.",
+                            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: categoryName + " was not deleted.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        });
+                    }
+                });
+            })
+        });
+    }
+
+
+    // Public methods
+    return {
+        init: function () {
+            table = document.querySelector('#kt_ecommerce_category_table');
+
+            if (!table) {
+                return;
+            }
+
+            initDatatable();
+            handleSearchDatatable();
+            handleDeleteRows();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppEcommerceCategories.init();
+});

resources/_keenthemes/src/js/custom/apps/ecommerce/catalog/products.js

@@ -0,0 +1,128 @@
+"use strict";
+
+// Class definition
+var KTAppEcommerceProducts = function () {
+    // Shared variables
+    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': [],
+            'pageLength': 10,
+            'columnDefs': [
+                { render: DataTable.render.number(',', '.', 2), targets: 4},
+                { orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
+                { orderable: false, targets: 7 }, // Disable ordering on column 7 (actions)
+            ]
+        });
+
+        // Re-init functions on datatable re-draws
+        datatable.on('draw', function () {
+            handleDeleteRows();
+        });
+    }
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-ecommerce-product-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Handle status filter dropdown
+    var handleStatusFilter = () => {
+        const filterStatus = document.querySelector('[data-kt-ecommerce-product-filter="status"]');
+        $(filterStatus).on('change', e => {
+            let value = e.target.value;
+            if(value === 'all'){
+                value = '';
+            }
+            datatable.column(6).search(value).draw();
+        });
+    }
+
+    // Delete cateogry
+    var handleDeleteRows = () => {
+        // Select all delete buttons
+        const deleteButtons = table.querySelectorAll('[data-kt-ecommerce-product-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 category name
+                const productName = parent.querySelector('[data-kt-ecommerce-product-filter="product_name"]').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: productName + " was not deleted.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        });
+                    }
+                });
+            })
+        });
+    }
+
+
+    // Public methods
+    return {
+        init: function () {
+            table = document.querySelector('#kt_ecommerce_products_table');
+
+            if (!table) {
+                return;
+            }
+
+            initDatatable();
+            handleSearchDatatable();
+            handleStatusFilter();
+            handleDeleteRows();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppEcommerceProducts.init();
+});

resources/_keenthemes/src/js/custom/apps/ecommerce/catalog/save-category.js

@@ -0,0 +1,287 @@
+"use strict";
+
+// Class definition
+var KTAppEcommerceSaveCategory = function () {
+
+    // Private functions
+
+    // Init quill editor
+    const initQuill = () => {
+        // Define all elements for quill editor
+        const elements = [
+            '#kt_ecommerce_add_category_description',
+            '#kt_ecommerce_add_category_meta_description'
+        ];
+
+        // Loop all elements
+        elements.forEach(element => {
+            // Get quill element
+            let quill = document.querySelector(element);
+
+            // Break if element not found
+            if (!quill) {
+                return;
+            }
+
+            // Init quill --- more info: https://quilljs.com/docs/quickstart/
+            quill = new Quill(element, {
+                modules: {
+                    toolbar: [
+                        [{
+                            header: [1, 2, false]
+                        }],
+                        ['bold', 'italic', 'underline'],
+                        ['image', 'code-block']
+                    ]
+                },
+                placeholder: 'Type your text here...',
+                theme: 'snow' // or 'bubble'
+            });
+        });
+
+    }
+
+    // Init tagify
+    const initTagify = () => {
+        // Define all elements for tagify
+        const elements = [
+            '#kt_ecommerce_add_category_meta_keywords'
+        ];
+
+        // Loop all elements
+        elements.forEach(element => {
+            // Get tagify element
+            const tagify = document.querySelector(element);
+
+            // Break if element not found
+            if (!tagify) {
+                return;
+            }
+
+            // Init tagify --- more info: https://yaireo.github.io/tagify/
+            new Tagify(tagify);
+        });
+    }
+
+    // Init form repeater --- more info: https://github.com/DubFriend/jquery.repeater
+    const initFormRepeater = () => {
+        $('#kt_ecommerce_add_category_conditions').repeater({
+            initEmpty: false,
+
+            defaultValues: {
+                'text-input': 'foo'
+            },
+
+            show: function () {
+                $(this).slideDown();
+
+                // Init select2 on new repeated items
+                initConditionsSelect2();
+            },
+
+            hide: function (deleteElement) {
+                $(this).slideUp(deleteElement);
+            }
+        });
+    }
+
+    // Init condition select2
+    const initConditionsSelect2 = () => {
+        // Tnit new repeating condition types
+        const allConditionTypes = document.querySelectorAll('[data-kt-ecommerce-catalog-add-category="condition_type"]');
+        allConditionTypes.forEach(type => {
+            if ($(type).hasClass("select2-hidden-accessible")) {
+                return;
+            } else {
+                $(type).select2({
+                    minimumResultsForSearch: -1
+                });
+            }
+        });
+
+        // Tnit new repeating condition equals
+        const allConditionEquals = document.querySelectorAll('[data-kt-ecommerce-catalog-add-category="condition_equals"]');
+        allConditionEquals.forEach(equal => {
+            if ($(equal).hasClass("select2-hidden-accessible")) {
+                return;
+            } else {
+                $(equal).select2({
+                    minimumResultsForSearch: -1
+                });
+            }
+        });
+    }
+
+    // Category status handler
+    const handleStatus = () => {
+        const target = document.getElementById('kt_ecommerce_add_category_status');
+        const select = document.getElementById('kt_ecommerce_add_category_status_select');
+        const statusClasses = ['bg-success', 'bg-warning', 'bg-danger'];
+
+        $(select).on('change', function (e) {
+            const value = e.target.value;
+
+            switch (value) {
+                case "published": {
+                    target.classList.remove(...statusClasses);
+                    target.classList.add('bg-success');
+                    hideDatepicker();
+                    break;
+                }
+                case "scheduled": {
+                    target.classList.remove(...statusClasses);
+                    target.classList.add('bg-warning');
+                    showDatepicker();
+                    break;
+                }
+                case "unpublished": {
+                    target.classList.remove(...statusClasses);
+                    target.classList.add('bg-danger');
+                    hideDatepicker();
+                    break;
+                }
+                default:
+                    break;
+            }
+        });
+
+
+        // Handle datepicker
+        const datepicker = document.getElementById('kt_ecommerce_add_category_status_datepicker');
+
+        // Init flatpickr --- more info: https://flatpickr.js.org/
+        $('#kt_ecommerce_add_category_status_datepicker').flatpickr({
+            enableTime: true,
+            dateFormat: "Y-m-d H:i",
+        });
+
+        const showDatepicker = () => {
+            datepicker.parentNode.classList.remove('d-none');
+        }
+
+        const hideDatepicker = () => {
+            datepicker.parentNode.classList.add('d-none');
+        }
+    }
+
+    // Condition type handler
+    const handleConditions = () => {
+        const allConditions = document.querySelectorAll('[name="method"][type="radio"]');
+        const conditionMatch = document.querySelector('[data-kt-ecommerce-catalog-add-category="auto-options"]');
+        allConditions.forEach(radio => {
+            radio.addEventListener('change', e => {
+                if (e.target.value === '1') {
+                    conditionMatch.classList.remove('d-none');
+                } else {
+                    conditionMatch.classList.add('d-none');
+                }
+            });
+        })
+    }
+
+    // Submit form handler
+    const handleSubmit = () => {
+        // Define variables
+        let validator;
+
+        // Get elements
+        const form = document.getElementById('kt_ecommerce_add_category_form');
+        const submitButton = document.getElementById('kt_ecommerce_add_category_submit');
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'category_name': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Category name is required'
+                            }
+                        }
+                    }
+                },
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Handle submit button
+        submitButton.addEventListener('click', 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: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            }).then(function (result) {
+                                if (result.isConfirmed) {
+                                    // Enable submit button after loading
+                                    submitButton.disabled = false;
+
+                                    // Redirect to customers list page
+                                    window.location = form.getAttribute("data-kt-redirect");
+                                }
+                            });
+                        }, 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"
+                            }
+                        });
+                    }
+                });
+            }
+        })
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            // Init forms
+            initQuill();
+            initTagify();
+            initFormRepeater();
+            initConditionsSelect2();
+
+            // Handle forms
+            handleStatus();
+            handleConditions();
+            handleSubmit();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppEcommerceSaveCategory.init();
+});

resources/_keenthemes/src/js/custom/apps/ecommerce/catalog/save-product.js

@@ -0,0 +1,416 @@
+"use strict";
+
+// Class definition
+var KTAppEcommerceSaveProduct = function () {
+
+    // Private functions
+
+    // Init quill editor
+    const initQuill = () => {
+        // Define all elements for quill editor
+        const elements = [
+            '#kt_ecommerce_add_product_description',
+            '#kt_ecommerce_add_product_meta_description'
+        ];
+
+        // Loop all elements
+        elements.forEach(element => {
+            // Get quill element
+            let quill = document.querySelector(element);
+
+            // Break if element not found
+            if (!quill) {
+                return;
+            }
+
+            // Init quill --- more info: https://quilljs.com/docs/quickstart/
+            quill = new Quill(element, {
+                modules: {
+                    toolbar: [
+                        [{
+                            header: [1, 2, false]
+                        }],
+                        ['bold', 'italic', 'underline'],
+                        ['image', 'code-block']
+                    ]
+                },
+                placeholder: 'Type your text here...',
+                theme: 'snow' // or 'bubble'
+            });
+        });
+    }
+
+    // Init tagify
+    const initTagify = () => {
+        // Define all elements for tagify
+        const elements = [
+            '#kt_ecommerce_add_product_category',
+            '#kt_ecommerce_add_product_tags'
+        ];
+
+        // Loop all elements
+        elements.forEach(element => {
+            // Get tagify element
+            const tagify = document.querySelector(element);
+
+            // Break if element not found
+            if (!tagify) {
+                return;
+            }
+
+            // Init tagify --- more info: https://yaireo.github.io/tagify/
+            new Tagify(tagify, {
+                whitelist: ["new", "trending", "sale", "discounted", "selling fast", "last 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 repeater --- more info: https://github.com/DubFriend/jquery.repeater
+    const initFormRepeater = () => {
+        $('#kt_ecommerce_add_product_options').repeater({
+            initEmpty: false,
+
+            defaultValues: {
+                'text-input': 'foo'
+            },
+
+            show: function () {
+                $(this).slideDown();
+
+                // Init select2 on new repeated items
+                initConditionsSelect2();
+            },
+
+            hide: function (deleteElement) {
+                $(this).slideUp(deleteElement);
+            }
+        });
+    }
+
+    // Init condition select2
+    const initConditionsSelect2 = () => {
+        // Tnit new repeating condition types
+        const allConditionTypes = document.querySelectorAll('[data-kt-ecommerce-catalog-add-product="product_option"]');
+        allConditionTypes.forEach(type => {
+            if ($(type).hasClass("select2-hidden-accessible")) {
+                return;
+            } else {
+                $(type).select2({
+                    minimumResultsForSearch: -1
+                });
+            }
+        });
+    }
+
+
+    // Init noUIslider
+    const initSlider = () => {
+        var slider = document.querySelector("#kt_ecommerce_add_product_discount_slider");
+        var value = document.querySelector("#kt_ecommerce_add_product_discount_label");
+
+        noUiSlider.create(slider, {
+            start: [10],
+            connect: true,
+            range: {
+                "min": 1,
+                "max": 100
+            }
+        });
+
+        slider.noUiSlider.on("update", function (values, handle) {
+            value.innerHTML = Math.round(values[handle]);
+            if (handle) {
+                value.innerHTML = Math.round(values[handle]);
+            }
+        });
+    }
+
+    // Init DropzoneJS --- more info:
+    const initDropzone = () => {
+        var myDropzone = new Dropzone("#kt_ecommerce_add_product_media", {
+            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 == "wow.jpg") {
+                    done("Naha, you don't.");
+                } else {
+                    done();
+                }
+            }
+        });
+    }
+
+    // Handle discount options
+    const handleDiscount = () => {
+        const discountOptions = document.querySelectorAll('input[name="discount_option"]');
+        const percentageEl = document.getElementById('kt_ecommerce_add_product_discount_percentage');
+        const fixedEl = document.getElementById('kt_ecommerce_add_product_discount_fixed');
+
+        discountOptions.forEach(option => {
+            option.addEventListener('change', e => {
+                const value = e.target.value;
+
+                switch (value) {
+                    case '2': {
+                        percentageEl.classList.remove('d-none');
+                        fixedEl.classList.add('d-none');
+                        break;
+                    }
+                    case '3': {
+                        percentageEl.classList.add('d-none');
+                        fixedEl.classList.remove('d-none');
+                        break;
+                    }
+                    default: {
+                        percentageEl.classList.add('d-none');
+                        fixedEl.classList.add('d-none');
+                        break;
+                    }
+                }
+            });
+        });
+    }
+
+    // Shipping option handler
+    const handleShipping = () => {
+        const shippingOption = document.getElementById('kt_ecommerce_add_product_shipping_checkbox');
+        const shippingForm = document.getElementById('kt_ecommerce_add_product_shipping');
+
+        shippingOption.addEventListener('change', e => {
+            const value = e.target.checked;
+
+            if (value) {
+                shippingForm.classList.remove('d-none');
+            } else {
+                shippingForm.classList.add('d-none');
+            }
+        });
+    }
+
+    // Category status handler
+    const handleStatus = () => {
+        const target = document.getElementById('kt_ecommerce_add_product_status');
+        const select = document.getElementById('kt_ecommerce_add_product_status_select');
+        const statusClasses = ['bg-success', 'bg-warning', 'bg-danger'];
+
+        $(select).on('change', function (e) {
+            const value = e.target.value;
+
+            switch (value) {
+                case "published": {
+                    target.classList.remove(...statusClasses);
+                    target.classList.add('bg-success');
+                    hideDatepicker();
+                    break;
+                }
+                case "scheduled": {
+                    target.classList.remove(...statusClasses);
+                    target.classList.add('bg-warning');
+                    showDatepicker();
+                    break;
+                }
+                case "inactive": {
+                    target.classList.remove(...statusClasses);
+                    target.classList.add('bg-danger');
+                    hideDatepicker();
+                    break;
+                }
+                case "draft": {
+                    target.classList.remove(...statusClasses);
+                    target.classList.add('bg-primary');
+                    hideDatepicker();
+                    break;
+                }
+                default:
+                    break;
+            }
+        });
+
+
+        // Handle datepicker
+        const datepicker = document.getElementById('kt_ecommerce_add_product_status_datepicker');
+
+        // Init flatpickr --- more info: https://flatpickr.js.org/
+        $('#kt_ecommerce_add_product_status_datepicker').flatpickr({
+            enableTime: true,
+            dateFormat: "Y-m-d H:i",
+        });
+
+        const showDatepicker = () => {
+            datepicker.parentNode.classList.remove('d-none');
+        }
+
+        const hideDatepicker = () => {
+            datepicker.parentNode.classList.add('d-none');
+        }
+    }
+
+    // Condition type handler
+    const handleConditions = () => {
+        const allConditions = document.querySelectorAll('[name="method"][type="radio"]');
+        const conditionMatch = document.querySelector('[data-kt-ecommerce-catalog-add-category="auto-options"]');
+        allConditions.forEach(radio => {
+            radio.addEventListener('change', e => {
+                if (e.target.value === '1') {
+                    conditionMatch.classList.remove('d-none');
+                } else {
+                    conditionMatch.classList.add('d-none');
+                }
+            });
+        })
+    }
+
+    // Submit form handler
+    const handleSubmit = () => {
+        // Define variables
+        let validator;
+
+        // Get elements
+        const form = document.getElementById('kt_ecommerce_add_product_form');
+        const submitButton = document.getElementById('kt_ecommerce_add_product_submit');
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'product_name': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Product name is required'
+                            }
+                        }
+                    },
+                    'sku': {
+                        validators: {
+                            notEmpty: {
+                                message: 'SKU is required'
+                            }
+                        }
+                    },
+                    'sku': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Product barcode is required'
+                            }
+                        }
+                    },
+                    'shelf': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Shelf quantity is required'
+                            }
+                        }
+                    },
+                    'price': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Product base price is required'
+                            }
+                        }
+                    },
+                    'tax': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Product tax class is required'
+                            }
+                        }
+                    }
+                },
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Handle submit button
+        submitButton.addEventListener('click', 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: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            }).then(function (result) {
+                                if (result.isConfirmed) {
+                                    // Enable submit button after loading
+                                    submitButton.disabled = false;
+
+                                    // Redirect to customers list page
+                                    window.location = form.getAttribute("data-kt-redirect");
+                                }
+                            });
+                        }, 2000);
+                    } else {
+                        Swal.fire({
+                            html: "Sorry, looks like there are some errors detected, please try again. <br/><br/>Please note that there may be errors in the <strong>General</strong> or <strong>Advanced</strong> tabs",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        });
+                    }
+                });
+            }
+        })
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            // Init forms
+            initQuill();
+            initTagify();
+            initSlider();
+            initFormRepeater();
+            initDropzone();
+            initConditionsSelect2();
+
+            // Handle forms
+            handleStatus();
+            handleConditions();
+            handleDiscount();
+            handleShipping();
+            handleSubmit();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppEcommerceSaveProduct.init();
+});

resources/_keenthemes/src/js/custom/apps/ecommerce/customers/details/add-address.js

@@ -0,0 +1,214 @@
+"use strict";
+
+// Class definition
+var KTModalAddAddress = function () {
+    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: {
+                    'name': {
+						validators: {
+							notEmpty: {
+								message: 'Address name is required'
+							}
+						}
+					},
+					'country': {
+						validators: {
+							notEmpty: {
+								message: 'Country is required'
+							}
+						}
+					},
+					'address1': {
+						validators: {
+							notEmpty: {
+								message: 'Address 1 is required'
+							}
+						}
+					},
+					'city': {
+						validators: {
+							notEmpty: {
+								message: 'City is required'
+							}
+						}
+					},
+					'state': {
+						validators: {
+							notEmpty: {
+								message: 'State is required'
+							}
+						}
+					},
+					'postcode': {
+						validators: {
+							notEmpty: {
+								message: 'Postcode 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="country"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('country');
+        });
+
+		// 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: "Form has been successfully submitted!",
+								icon: "success",
+								buttonsStyling: false,
+								confirmButtonText: "Ok, got it!",
+								customClass: {
+									confirmButton: "btn btn-primary"
+								}
+							}).then(function (result) {
+								if (result.isConfirmed) {
+									// Hide modal
+									modal.hide();
+
+									// Enable submit button after loading
+									submitButton.disabled = false;
+								}
+							});							
+						}, 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",
+                        }
+                    });
+                }
+            });
+		})
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            // Elements
+            modal = new bootstrap.Modal(document.querySelector('#kt_modal_add_address'));
+
+            form = document.querySelector('#kt_modal_add_address_form');
+            submitButton = form.querySelector('#kt_modal_add_address_submit');
+            cancelButton = form.querySelector('#kt_modal_add_address_cancel');
+			closeButton = form.querySelector('#kt_modal_add_address_close');
+
+            handleForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+	KTModalAddAddress.init();
+});

resources/_keenthemes/src/js/custom/apps/ecommerce/customers/details/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/_keenthemes/src/js/custom/apps/ecommerce/customers/details/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/_keenthemes/src/js/custom/apps/ecommerce/customers/details/payment-method.js

@@ -0,0 +1,110 @@
+"use strict";
+
+// Class definition
+var KTCustomerViewPaymentMethod = function () {
+
+    // Private functions
+    var initPaymentMethod = function () {
+        // Define variables
+        const table = document.getElementById('kt_customer_view_payment_method');
+        const tableRows = table.querySelectorAll('[ data-kt-customer-payment-method="row"]');
+
+        tableRows.forEach(row => {
+            // Select delete button
+            const deleteButton = row.querySelector('[data-kt-customer-payment-method="delete"]');
+
+            // Delete button action
+            deleteButton.addEventListener('click', e => {
+                e.preventDefault();
+
+                // Popup confirmation
+                Swal.fire({
+                    text: "Are you sure you would like to delete this card?",
+                    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) {
+                        row.remove();
+                        modal.hide(); // Hide modal				
+                    } else if (result.dismiss === 'cancel') {
+                        Swal.fire({
+                            text: "Your card was not deleted!.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary",
+                            }
+                        });
+                    }
+                });
+            });
+        });
+    }
+
+    // Handle set as primary button
+    const handlePrimaryButton = () => {
+        // Define variable
+        const button = document.querySelector('[data-kt-payment-mehtod-action="set_as_primary"]');
+
+        button.addEventListener('click', e => {
+            e.preventDefault();
+
+            // Popup confirmation
+            Swal.fire({
+                text: "Are you sure you would like to set this card as primary?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, set it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    Swal.fire({
+                        text: "Your card was set to primary!.",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your card was not set to primary!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    };
+
+    // Public methods
+    return {
+        init: function () {
+            initPaymentMethod();
+            handlePrimaryButton();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTCustomerViewPaymentMethod.init();
+});

resources/_keenthemes/src/js/custom/apps/ecommerce/customers/details/transaction-history.js

@@ -0,0 +1,110 @@
+"use strict";
+
+// Class definition
+var KTCustomerViewPaymentTable = function () {
+
+    // Define shared variables
+    var datatable;
+    var table = document.querySelector('#kt_table_customers_payment');
+
+    // Private functions
+    var initCustomerView = function () {
+        // 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 4th 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: 4 }, // Disable ordering on column 5 (actions)
+            ]
+        });
+    }
+
+    // Delete customer
+    var deleteRows = () => {
+        // Select all delete buttons
+        const deleteButtons = table.querySelectorAll('[data-kt-customer-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 invoiceNumber = 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 " + invoiceNumber + "?",
+                    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 " + invoiceNumber + "!.",
+                            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",
+                            }
+                        });
+                    }
+                });
+            })
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            if (!table) {
+                return;
+            }
+
+            initCustomerView();
+            deleteRows();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTCustomerViewPaymentTable.init();
+});

resources/_keenthemes/src/js/custom/apps/ecommerce/customers/details/update-address.js

@@ -0,0 +1,217 @@
+"use strict";
+
+// Class definition
+var KTModalUpdateAddress = function () {
+    var element;
+    var submitButton;
+    var cancelButton;
+    var closeButton;
+    var form;
+    var modal;
+    var validator;
+
+    // Init form inputs
+    var initForm = function () {
+        // 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: 'Address name is required'
+                            }
+                        }
+                    },
+                    'country': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Country is required'
+                            }
+                        }
+                    },
+                    'address1': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Address 1 is required'
+                            }
+                        }
+                    },
+                    'city': {
+                        validators: {
+                            notEmpty: {
+                                message: 'City is required'
+                            }
+                        }
+                    },
+                    'state': {
+                        validators: {
+                            notEmpty: {
+                                message: 'State is required'
+                            }
+                        }
+                    },
+                    'postcode': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Postcode 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="country"]')).on('change', function () {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('country');
+        });
+
+        // Action buttons
+        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') {
+						submitButton.setAttribute('data-kt-indicator', 'on');
+
+						// Disable submit button whilst loading
+						submitButton.disabled = true;
+
+						setTimeout(function() {
+							submitButton.removeAttribute('data-kt-indicator');
+							
+							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) {
+									// Hide modal
+									modal.hide();
+
+									// Enable submit button after loading
+									submitButton.disabled = false;
+								}
+							});							
+						}, 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",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            // Elements
+            element = document.querySelector('#kt_modal_update_address');
+            modal = new bootstrap.Modal(element);
+
+            form = element.querySelector('#kt_modal_update_address_form');
+            submitButton = form.querySelector('#kt_modal_update_address_submit');
+            cancelButton = form.querySelector('#kt_modal_update_address_cancel');
+            closeButton = element.querySelector('#kt_modal_update_address_close');
+
+            initForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTModalUpdateAddress.init();
+});

resources/_keenthemes/src/js/custom/apps/ecommerce/customers/details/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/_keenthemes/src/js/custom/apps/ecommerce/customers/details/update-phone.js

@@ -0,0 +1,166 @@
+"use strict";
+
+// Class definition
+var KTUsersUpdateEmail = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_update_phone');
+    const form = element.querySelector('#kt_modal_update_phone_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_phone': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Phone number 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/_keenthemes/src/js/custom/apps/ecommerce/customers/details/update-profile.js

@@ -0,0 +1,106 @@
+"use strict";
+
+// Class definition
+var KTEcommerceUpdateProfile = function () {
+    var submitButton;
+    var validator;
+    var form;
+
+    // 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: {
+                    'name': {
+						validators: {
+							notEmpty: {
+								message: 'Name is required'
+							}
+						}
+					},
+					'gen_email': {
+						validators: {
+							notEmpty: {
+								message: 'General Email 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: "Your profile has been saved!",
+								icon: "success",
+								buttonsStyling: false,
+								confirmButtonText: "Ok, got it!",
+								customClass: {
+									confirmButton: "btn btn-primary"
+								}
+							}).then(function (result) {
+								if (result.isConfirmed) {
+									// Enable submit button after loading
+									submitButton.disabled = false;
+								}
+							});							
+						}, 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"
+							}
+						});
+					}
+				});
+			}
+		});
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            // Elements
+            form = document.querySelector('#kt_ecommerce_customer_profile');
+            submitButton = form.querySelector('#kt_ecommerce_customer_profile_submit');
+
+            handleForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+	KTEcommerceUpdateProfile.init();
+});

resources/_keenthemes/src/js/custom/apps/ecommerce/customers/listing/add.js

@@ -0,0 +1,238 @@
+"use strict";
+
+// Class definition
+var KTModalCustomersAdd = function () {
+    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: {
+                    'name': {
+						validators: {
+							notEmpty: {
+								message: 'Customer name is required'
+							}
+						}
+					},
+                    'email': {
+						validators: {
+							notEmpty: {
+								message: 'Customer email is required'
+							}
+						}
+					},
+					'first-name': {
+						validators: {
+							notEmpty: {
+								message: 'First name is required'
+							}
+						}
+					},
+					'last-name': {
+						validators: {
+							notEmpty: {
+								message: 'Last name is required'
+							}
+						}
+					},
+					'country': {
+						validators: {
+							notEmpty: {
+								message: 'Country is required'
+							}
+						}
+					},
+					'address1': {
+						validators: {
+							notEmpty: {
+								message: 'Address 1 is required'
+							}
+						}
+					},
+					'city': {
+						validators: {
+							notEmpty: {
+								message: 'City is required'
+							}
+						}
+					},
+					'state': {
+						validators: {
+							notEmpty: {
+								message: 'State is required'
+							}
+						}
+					},
+					'postcode': {
+						validators: {
+							notEmpty: {
+								message: 'Postcode 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="country"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('country');
+        });
+
+		// 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: "Form has been successfully submitted!",
+								icon: "success",
+								buttonsStyling: false,
+								confirmButtonText: "Ok, got it!",
+								customClass: {
+									confirmButton: "btn btn-primary"
+								}
+							}).then(function (result) {
+								if (result.isConfirmed) {
+									// Hide modal
+									modal.hide();
+
+									// Enable submit button after loading
+									submitButton.disabled = false;
+
+									// Redirect to customers list page
+									window.location = form.getAttribute("data-kt-redirect");
+								}
+							});							
+						}, 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",
+                        }
+                    });
+                }
+            });
+		})
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            // Elements
+            modal = new bootstrap.Modal(document.querySelector('#kt_modal_add_customer'));
+
+            form = document.querySelector('#kt_modal_add_customer_form');
+            submitButton = form.querySelector('#kt_modal_add_customer_submit');
+            cancelButton = form.querySelector('#kt_modal_add_customer_cancel');
+			closeButton = form.querySelector('#kt_modal_add_customer_close');
+
+            handleForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+	KTModalCustomersAdd.init();
+});

resources/_keenthemes/src/js/custom/apps/ecommerce/customers/listing/export.js

@@ -0,0 +1,189 @@
+"use strict";
+
+// Class definition
+var KTCustomersExport = 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_customers_export_modal');
+            modal = new bootstrap.Modal(element);
+
+            form = document.querySelector('#kt_customers_export_form');
+            submitButton = form.querySelector('#kt_customers_export_submit');
+            cancelButton = form.querySelector('#kt_customers_export_cancel');
+			closeButton = element.querySelector('#kt_customers_export_close');
+
+            handleForm();
+            initForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTCustomersExport.init();
+});

resources/_keenthemes/src/js/custom/apps/ecommerce/customers/listing/listing.js

@@ -0,0 +1,242 @@
+"use strict";
+
+// Class definition
+var KTCustomersList = function () {
+    // Define shared variables
+    var datatable;
+    var filterMonth;
+    var filterPayment;
+    var table
+
+    // Private functions
+    var initCustomerList = 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 5th 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': [],
+            '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-customer-table-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Delete customer
+    var handleDeleteRows = () => {
+        // Select all delete buttons
+        const deleteButtons = table.querySelectorAll('[data-kt-customer-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();
+                        });
+                    } 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",
+                            }
+                        });
+                    }
+                });
+            })
+        });
+    }
+
+    // Handle status filter dropdown
+    var handleStatusFilter = () => {
+        const filterStatus = document.querySelector('[data-kt-ecommerce-order-filter="status"]');
+        $(filterStatus).on('change', e => {
+            let value = e.target.value;
+            if (value === 'all') {
+                value = '';
+            }
+            datatable.column(3).search(value).draw();
+        });
+    }
+
+    // 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-customer-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;
+                    });
+                } 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-customer-table-toolbar="base"]');
+        const toolbarSelected = document.querySelector('[data-kt-customer-table-toolbar="selected"]');
+        const selectedCount = document.querySelector('[data-kt-customer-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');
+        }
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            table = document.querySelector('#kt_customers_table');
+
+            if (!table) {
+                return;
+            }
+
+            initCustomerList();
+            initToggleToolbar();
+            handleSearchDatatable();
+            handleDeleteRows();
+            handleStatusFilter();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTCustomersList.init();
+});

resources/_keenthemes/src/js/custom/apps/ecommerce/reports/customer-orders/customer-orders.js

@@ -0,0 +1,136 @@
+"use strict";
+
+// Class definition
+var KTAppEcommerceReportCustomerOrders = function () {
+    // Shared variables
+    var table;
+    var datatable;
+
+    // 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[3].innerHTML, "DD MMM YYYY, LT").format(); // select date from 4th 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': 10,
+        });
+    }
+
+    // Init daterangepicker
+    var initDaterangepicker = () => {
+        var start = moment().subtract(29, "days");
+        var end = moment();
+        var input = $("#kt_ecommerce_report_customer_orders_daterangepicker");
+
+        function cb(start, end) {
+            input.html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
+        }
+
+        input.daterangepicker({
+            startDate: start,
+            endDate: end,
+            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);
+    }
+
+    // Handle status filter dropdown
+    var handleStatusFilter = () => {
+        const filterStatus = document.querySelector('[data-kt-ecommerce-order-filter="status"]');
+        $(filterStatus).on('change', e => {
+            let value = e.target.value;
+            if (value === 'all') {
+                value = '';
+            }
+            datatable.column(2).search(value).draw();
+        });
+    }
+
+    // Hook export buttons
+    var exportButtons = () => {
+        const documentTitle = 'Customer Orders Report';
+        var buttons = new $.fn.dataTable.Buttons(table, {
+            buttons: [
+                {
+                    extend: 'copyHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'excelHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'csvHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'pdfHtml5',
+                    title: documentTitle
+                }
+            ]
+        }).container().appendTo($('#kt_ecommerce_report_customer_orders_export'));
+
+        // Hook dropdown menu click event to datatable export buttons
+        const exportButtons = document.querySelectorAll('#kt_ecommerce_report_customer_orders_export_menu [data-kt-ecommerce-export]');
+        exportButtons.forEach(exportButton => {
+            exportButton.addEventListener('click', e => {
+                e.preventDefault();
+
+                // Get clicked export value
+                const exportValue = e.target.getAttribute('data-kt-ecommerce-export');
+                const target = document.querySelector('.dt-buttons .buttons-' + exportValue);
+
+                // Trigger click event on hidden datatable export buttons
+                target.click();
+            });
+        });
+    }
+
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-ecommerce-order-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            table = document.querySelector('#kt_ecommerce_report_customer_orders_table');
+
+            if (!table) {
+                return;
+            }
+
+            initDatatable();
+            initDaterangepicker();
+            exportButtons();
+            handleSearchDatatable();
+            handleStatusFilter();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppEcommerceReportCustomerOrders.init();
+});

resources/_keenthemes/src/js/custom/apps/ecommerce/reports/returns/returns.js

@@ -0,0 +1,123 @@
+"use strict";
+
+// Class definition
+var KTAppEcommerceReportReturns = function () {
+    // Shared variables
+    var table;
+    var datatable;
+
+    // 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[0].innerHTML, "MMM DD, YYYY").format(); // select date from 4th column in table
+            dateRow[0].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            'pageLength': 10,
+        });
+    }
+
+    // Init daterangepicker
+    var initDaterangepicker = () => {
+        var start = moment().subtract(29, "days");
+        var end = moment();
+        var input = $("#kt_ecommerce_report_returns_daterangepicker");
+
+        function cb(start, end) {
+            input.html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
+        }
+
+        input.daterangepicker({
+            startDate: start,
+            endDate: end,
+            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);
+    }
+
+    // Hook export buttons
+    var exportButtons = () => {
+        const documentTitle = 'Returns Report';
+        var buttons = new $.fn.dataTable.Buttons(table, {
+            buttons: [
+                {
+                    extend: 'copyHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'excelHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'csvHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'pdfHtml5',
+                    title: documentTitle
+                }
+            ]
+        }).container().appendTo($('#kt_ecommerce_report_returns_export'));
+
+        // Hook dropdown menu click event to datatable export buttons
+        const exportButtons = document.querySelectorAll('#kt_ecommerce_report_returns_export_menu [data-kt-ecommerce-export]');
+        exportButtons.forEach(exportButton => {
+            exportButton.addEventListener('click', e => {
+                e.preventDefault();
+
+                // Get clicked export value
+                const exportValue = e.target.getAttribute('data-kt-ecommerce-export');
+                const target = document.querySelector('.dt-buttons .buttons-' + exportValue);
+
+                // Trigger click event on hidden datatable export buttons
+                target.click();
+            });
+        });
+    }
+
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-ecommerce-order-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            table = document.querySelector('#kt_ecommerce_report_returns_table');
+
+            if (!table) {
+                return;
+            }
+
+            initDatatable();
+            initDaterangepicker();
+            exportButtons();
+            handleSearchDatatable();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppEcommerceReportReturns.init();
+});

resources/_keenthemes/src/js/custom/apps/ecommerce/reports/sales/sales.js

@@ -0,0 +1,124 @@
+"use strict";
+
+// Class definition
+var KTAppEcommerceReportSales = function () {
+    // Shared variables
+    var table;
+    var datatable;
+
+    // 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[0].innerHTML, "MMM DD, YYYY").format(); // select date from 4th column in table
+            dateRow[0].setAttribute('data-order', realDate);
+        });
+
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            'pageLength': 10,
+        });
+    }
+
+    // Init daterangepicker
+    var initDaterangepicker = () => {
+        var start = moment().subtract(29, "days");
+        var end = moment();
+        var input = $("#kt_ecommerce_report_sales_daterangepicker");
+
+        function cb(start, end) {
+            input.html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
+        }
+
+        input.daterangepicker({
+            startDate: start,
+            endDate: end,
+            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);
+    }
+
+    // Hook export buttons
+    var exportButtons = () => {
+        const documentTitle = 'Sales Report';
+        var buttons = new $.fn.dataTable.Buttons(table, {
+            buttons: [
+                {
+                    extend: 'copyHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'excelHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'csvHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'pdfHtml5',
+                    title: documentTitle
+                }
+            ]
+        }).container().appendTo($('#kt_ecommerce_report_sales_export'));
+
+        // Hook dropdown menu click event to datatable export buttons
+        const exportButtons = document.querySelectorAll('#kt_ecommerce_report_sales_export_menu [data-kt-ecommerce-export]');
+        exportButtons.forEach(exportButton => {
+            exportButton.addEventListener('click', e => {
+                e.preventDefault();
+
+                // Get clicked export value
+                const exportValue = e.target.getAttribute('data-kt-ecommerce-export');
+                const target = document.querySelector('.dt-buttons .buttons-' + exportValue);
+
+                // Trigger click event on hidden datatable export buttons
+                target.click();
+            });
+        });
+    }
+
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-ecommerce-order-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            table = document.querySelector('#kt_ecommerce_report_sales_table');
+
+            if (!table) {
+                return;
+            }
+
+            initDatatable();
+            initDaterangepicker();
+            exportButtons();
+            handleSearchDatatable();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppEcommerceReportSales.init();
+});

resources/_keenthemes/src/js/custom/apps/ecommerce/reports/shipping/shipping.js

@@ -0,0 +1,137 @@
+"use strict";
+
+// Class definition
+var KTAppEcommerceReportShipping = function () {
+    // Shared variables
+    var table;
+    var datatable;
+
+    // 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[0].innerHTML, "MMM DD, YYYY").format(); // select date from 4th column in table
+            dateRow[0].setAttribute('data-order', realDate);
+        });
+
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            'pageLength': 10,
+        });
+    }
+
+    // Init daterangepicker
+    var initDaterangepicker = () => {
+        var start = moment().subtract(29, "days");
+        var end = moment();
+        var input = $("#kt_ecommerce_report_shipping_daterangepicker");
+
+        function cb(start, end) {
+            input.html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
+        }
+
+        input.daterangepicker({
+            startDate: start,
+            endDate: end,
+            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);
+    }
+
+    // Handle status filter dropdown
+    var handleStatusFilter = () => {
+        const filterStatus = document.querySelector('[data-kt-ecommerce-order-filter="status"]');
+        $(filterStatus).on('change', e => {
+            let value = e.target.value;
+            if (value === 'all') {
+                value = '';
+            }
+            datatable.column(3).search(value).draw();
+        });
+    }
+
+    // Hook export buttons
+    var exportButtons = () => {
+        const documentTitle = 'Shipping Report';
+        var buttons = new $.fn.dataTable.Buttons(table, {
+            buttons: [
+                {
+                    extend: 'copyHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'excelHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'csvHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'pdfHtml5',
+                    title: documentTitle
+                }
+            ]
+        }).container().appendTo($('#kt_ecommerce_report_shipping_export'));
+
+        // Hook dropdown menu click event to datatable export buttons
+        const exportButtons = document.querySelectorAll('#kt_ecommerce_report_shipping_export_menu [data-kt-ecommerce-export]');
+        exportButtons.forEach(exportButton => {
+            exportButton.addEventListener('click', e => {
+                e.preventDefault();
+
+                // Get clicked export value
+                const exportValue = e.target.getAttribute('data-kt-ecommerce-export');
+                const target = document.querySelector('.dt-buttons .buttons-' + exportValue);
+
+                // Trigger click event on hidden datatable export buttons
+                target.click();
+            });
+        });
+    }
+
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-ecommerce-order-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            table = document.querySelector('#kt_ecommerce_report_shipping_table');
+
+            if (!table) {
+                return;
+            }
+
+            initDatatable();
+            initDaterangepicker();
+            exportButtons();
+            handleSearchDatatable();
+            handleStatusFilter();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppEcommerceReportShipping.init();
+});

resources/_keenthemes/src/js/custom/apps/ecommerce/reports/views/views.js

@@ -0,0 +1,127 @@
+"use strict";
+
+// Class definition
+var KTAppEcommerceReportViews = function () {
+    // Shared variables
+    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': [],
+            'pageLength': 10,
+        });
+    }
+
+    // Init daterangepicker
+    var initDaterangepicker = () => {
+        var start = moment().subtract(29, "days");
+        var end = moment();
+        var input = $("#kt_ecommerce_report_views_daterangepicker");
+
+        function cb(start, end) {
+            input.html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
+        }
+
+        input.daterangepicker({
+            startDate: start,
+            endDate: end,
+            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);
+    }
+
+    // Handle rating filter dropdown
+    var handleStatusFilter = () => {
+        const filterStatus = document.querySelector('[data-kt-ecommerce-order-filter="rating"]');
+        $(filterStatus).on('change', e => {
+            let value = e.target.value;
+            if (value === 'all') {
+                value = '';
+            }
+            datatable.column(2).search(value).draw();
+        });
+    }
+
+    // Hook export buttons
+    var exportButtons = () => {
+        const documentTitle = 'Product Views Report';
+        var buttons = new $.fn.dataTable.Buttons(table, {
+            buttons: [
+                {
+                    extend: 'copyHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'excelHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'csvHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'pdfHtml5',
+                    title: documentTitle
+                }
+            ]
+        }).container().appendTo($('#kt_ecommerce_report_views_export'));
+
+        // Hook dropdown menu click event to datatable export buttons
+        const exportButtons = document.querySelectorAll('#kt_ecommerce_report_views_export_menu [data-kt-ecommerce-export]');
+        exportButtons.forEach(exportButton => {
+            exportButton.addEventListener('click', e => {
+                e.preventDefault();
+
+                // Get clicked export value
+                const exportValue = e.target.getAttribute('data-kt-ecommerce-export');
+                const target = document.querySelector('.dt-buttons .buttons-' + exportValue);
+
+                // Trigger click event on hidden datatable export buttons
+                target.click();
+            });
+        });
+    }
+
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-ecommerce-order-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            table = document.querySelector('#kt_ecommerce_report_views_table');
+
+            if (!table) {
+                return;
+            }
+
+            initDatatable();
+            initDaterangepicker();
+            exportButtons();
+            handleSearchDatatable();
+            handleStatusFilter();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppEcommerceReportViews.init();
+});

resources/_keenthemes/src/js/custom/apps/ecommerce/sales/listing.js

@@ -0,0 +1,181 @@
+"use strict";
+
+// Class definition
+var KTAppEcommerceSalesListing = function () {
+    // Shared variables
+    var table;
+    var datatable;
+    var flatpickr;
+    var minDate, maxDate;
+
+    // Private functions
+    var initDatatable = function () {
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            'pageLength': 10,
+            'columnDefs': [
+                { orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
+                { orderable: false, targets: 7 }, // Disable ordering on column 7 (actions)
+            ]
+        });
+
+        // Re-init functions on datatable re-draws
+        datatable.on('draw', function () {
+            handleDeleteRows();
+        });
+    }
+
+    // Init flatpickr --- more info :https://flatpickr.js.org/getting-started/
+    var initFlatpickr = () => {
+        const element = document.querySelector('#kt_ecommerce_sales_flatpickr');
+        flatpickr = $(element).flatpickr({
+            altInput: true,
+            altFormat: "d/m/Y",
+            dateFormat: "Y-m-d",
+            mode: "range",
+            onChange: function (selectedDates, dateStr, instance) {
+                handleFlatpickr(selectedDates, dateStr, instance);
+            },
+        });
+    }
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-ecommerce-order-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Handle status filter dropdown
+    var handleStatusFilter = () => {
+        const filterStatus = document.querySelector('[data-kt-ecommerce-order-filter="status"]');
+        $(filterStatus).on('change', e => {
+            let value = e.target.value;
+            if (value === 'all') {
+                value = '';
+            }
+            datatable.column(3).search(value).draw();
+        });
+    }
+
+    // Handle flatpickr --- more info: https://flatpickr.js.org/events/
+    var handleFlatpickr = (selectedDates, dateStr, instance) => {
+        minDate = selectedDates[0] ? new Date(selectedDates[0]) : null;
+        maxDate = selectedDates[1] ? new Date(selectedDates[1]) : null;
+
+        // Datatable date filter --- more info: https://datatables.net/extensions/datetime/examples/integration/datatables.html
+        // Custom filtering function which will search data in column four between two values
+        $.fn.dataTable.ext.search.push(
+            function (settings, data, dataIndex) {
+                var min = minDate;
+                var max = maxDate;
+                var dateAdded = new Date(moment($(data[5]).text(), 'DD/MM/YYYY'));
+                var dateModified = new Date(moment($(data[6]).text(), 'DD/MM/YYYY'));
+
+                if (
+                    (min === null && max === null) ||
+                    (min === null && max >= dateModified) ||
+                    (min <= dateAdded && max === null) ||
+                    (min <= dateAdded && max >= dateModified)
+                ) {
+                    return true;
+                }
+                return false;
+            }
+        );
+        datatable.draw();
+    }
+
+    // Handle clear flatpickr
+    var handleClearFlatpickr = () => {
+        const clearButton = document.querySelector('#kt_ecommerce_sales_flatpickr_clear');
+        clearButton.addEventListener('click', e => {
+            flatpickr.clear();
+        });
+    }
+
+    // Delete cateogry
+    var handleDeleteRows = () => {
+        // Select all delete buttons
+        const deleteButtons = table.querySelectorAll('[data-kt-ecommerce-order-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 category name
+                const orderID = parent.querySelector('[data-kt-ecommerce-order-filter="order_id"]').innerText;
+
+                // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+                Swal.fire({
+                    text: "Are you sure you want to delete order: " + orderID + "?",
+                    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 " + orderID + "!.",
+                            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: orderID + " was not deleted.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        });
+                    }
+                });
+            })
+        });
+    }
+
+
+    // Public methods
+    return {
+        init: function () {
+            table = document.querySelector('#kt_ecommerce_sales_table');
+
+            if (!table) {
+                return;
+            }
+
+            initDatatable();
+            initFlatpickr();
+            handleSearchDatatable();
+            handleStatusFilter();
+            handleDeleteRows();
+            handleClearFlatpickr();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppEcommerceSalesListing.init();
+});

resources/_keenthemes/src/js/custom/apps/ecommerce/sales/save-order.js

@@ -0,0 +1,338 @@
+"use strict";
+
+// Class definition
+var KTAppEcommerceSalesSaveOrder = function () {
+    // Shared variables
+    var table;
+    var datatable;
+
+    // Private functions
+    const initSaveOrder = () => {
+        // Init flatpickr
+        $('#kt_ecommerce_edit_order_date').flatpickr({
+            altInput: true,
+            altFormat: "d F, Y",
+            dateFormat: "Y-m-d",
+        });
+
+        // Init select2 country options
+        // Format options
+        const optionFormat = (item) => {
+            if ( !item.id ) {
+                return item.text;
+            }
+
+            var span = document.createElement('span');
+            var template = '';
+
+            template += '<img src="' + item.element.getAttribute('data-kt-select2-country') + '" class="rounded-circle h-20px me-2" alt="image"/>';
+            template += item.text;
+
+            span.innerHTML = template;
+
+            return $(span);
+        }
+
+        // Init Select2 --- more info: https://select2.org/        
+        $('#kt_ecommerce_edit_order_billing_country').select2({
+            placeholder: "Select a country",
+            minimumResultsForSearch: Infinity,
+            templateSelection: optionFormat,
+            templateResult: optionFormat
+        });
+
+        $('#kt_ecommerce_edit_order_shipping_country').select2({
+            placeholder: "Select a country",
+            minimumResultsForSearch: Infinity,
+            templateSelection: optionFormat,
+            templateResult: optionFormat
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        table = document.querySelector('#kt_ecommerce_edit_order_product_table');
+        datatable = $(table).DataTable({
+            'order': [],
+            "scrollY": "400px",
+            "scrollCollapse": true,
+            "paging": false,
+            "info": false,
+            'columnDefs': [
+                { orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
+            ]
+        });
+    }
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-ecommerce-edit-order-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Handle shipping form
+    const handleShippingForm = () => {
+        // Select elements
+        const element = document.getElementById('kt_ecommerce_edit_order_shipping_form');
+        const checkbox = document.getElementById('same_as_billing');
+
+        // Show/hide shipping form
+        checkbox.addEventListener('change', e => {
+            if (e.target.checked) {
+                element.classList.add('d-none');
+            } else {
+                element.classList.remove('d-none');
+            }
+        });
+    }
+
+    // Handle product select
+    const handleProductSelect = () => {
+        // Define variables
+        const checkboxes = table.querySelectorAll('[type="checkbox"]');
+        const target = document.getElementById('kt_ecommerce_edit_order_selected_products');
+        const totalPrice = document.getElementById('kt_ecommerce_edit_order_total_price');
+
+        // Loop through all checked products
+        checkboxes.forEach(checkbox => {
+            checkbox.addEventListener('change', e => {
+                // Select parent row element
+                const parent = checkbox.closest('tr');
+                
+                // Clone parent element as variable
+                const product = parent.querySelector('[data-kt-ecommerce-edit-order-filter="product"]').cloneNode(true);
+
+                // Create inner wrapper
+                const innerWrapper = document.createElement('div');
+                
+                // Store inner content
+                const innerContent = product.innerHTML;
+
+                // Add & remove classes on parent wrapper
+                const wrapperClassesAdd = ['col', 'my-2'];
+                const wrapperClassesRemove = ['d-flex', 'align-items-center'];
+
+                // Define additional classes
+                const additionalClasses = ['border', 'border-dashed', 'rounded', 'p-3', 'bg-body'];
+
+                // Update parent wrapper classes
+                product.classList.remove(...wrapperClassesRemove);
+                product.classList.add(...wrapperClassesAdd);
+
+                // Remove parent default content
+                product.innerHTML = '';
+
+                // Update inner wrapper classes
+                innerWrapper.classList.add(...wrapperClassesRemove);
+                innerWrapper.classList.add(...additionalClasses);                
+
+                // Apply stored inner content into new inner wrapper
+                innerWrapper.innerHTML = innerContent;
+
+                // Append new inner wrapper to parent wrapper
+                product.appendChild(innerWrapper);
+
+                // Get product id
+                const productId = product.getAttribute('data-kt-ecommerce-edit-order-id');
+
+                if (e.target.checked) {
+                    // Add product to selected product wrapper
+                    target.appendChild(product);
+                } else {
+                    // Remove product from selected product wrapper
+                    const selectedProduct = target.querySelector('[data-kt-ecommerce-edit-order-id="' + productId + '"]');
+                    if (selectedProduct) {
+                        target.removeChild(selectedProduct);
+                    }
+                }
+
+                // Trigger empty message logic
+                detectEmpty();
+            });
+        });
+
+        // Handle empty list message
+        const detectEmpty = () => {
+            // Select elements
+            const message = target.querySelector('span');
+            const products = target.querySelectorAll('[data-kt-ecommerce-edit-order-filter="product"]');
+
+            // Detect if element is empty
+            if (products.length < 1) {
+                // Show message
+                message.classList.remove('d-none');
+
+                // Reset price
+                totalPrice.innerText = '0.00';
+            } else {
+                // Hide message
+                message.classList.add('d-none');
+
+                // Calculate price
+                calculateTotal(products);
+            }
+        }
+
+        // Calculate total cost
+        const calculateTotal = (products) => {
+            let countPrice = 0;
+
+            // Loop through all selected prodcucts
+            products.forEach(product => {
+                // Get product price
+                const price = parseFloat(product.querySelector('[data-kt-ecommerce-edit-order-filter="price"]').innerText);
+
+                // Add to total
+                countPrice = parseFloat(countPrice + price);
+            });
+
+            // Update total price
+            totalPrice.innerText = countPrice.toFixed(2);
+        }
+    }
+
+    // Submit form handler
+    const handleSubmit = () => {
+        // Define variables
+        let validator;
+
+        // Get elements
+        const form = document.getElementById('kt_ecommerce_edit_order_form');
+        const submitButton = document.getElementById('kt_ecommerce_edit_order_submit');
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'payment_method': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Payment method is required'
+                            }
+                        }
+                    },
+                    'shipping_method': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Shipping method is required'
+                            }
+                        }
+                    },
+                    'order_date': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Order date is required'
+                            }
+                        }
+                    },
+                    'billing_order_address_1': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Address line 1 is required'
+                            }
+                        }
+                    },
+                    'billing_order_postcode': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Postcode is required'
+                            }
+                        }
+                    },
+                    'billing_order_state': {
+                        validators: {
+                            notEmpty: {
+                                message: 'State is required'
+                            }
+                        }
+                    },
+                    'billing_order_country': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Country is required'
+                            }
+                        }
+                    }
+                },
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Handle submit button
+        submitButton.addEventListener('click', 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: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            }).then(function (result) {
+                                if (result.isConfirmed) {
+                                    // Enable submit button after loading
+                                    submitButton.disabled = false;
+
+                                    // Redirect to customers list page
+                                    window.location = form.getAttribute("data-kt-redirect");
+                                }
+                            });
+                        }, 2000);
+                    } else {
+                        Swal.fire({
+                            html: "Sorry, looks like there are some errors detected, please try again.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        });
+                    }
+                });
+            }
+        })
+    }
+
+
+    // Public methods
+    return {
+        init: function () {
+
+            initSaveOrder();
+            handleSearchDatatable();
+            handleShippingForm();
+            handleProductSelect();
+            handleSubmit();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppEcommerceSalesSaveOrder.init();
+});

resources/_keenthemes/src/js/custom/apps/ecommerce/settings/settings.js

@@ -0,0 +1,188 @@
+"use strict";
+
+// Class definition
+var KTAppEcommerceSettings = function () {
+    // Shared variables
+
+
+    // Private functions
+    const initForms = () => {
+        const forms = [
+            'kt_ecommerce_settings_general_form',
+            'kt_ecommerce_settings_general_store',
+            'kt_ecommerce_settings_general_localization',
+            'kt_ecommerce_settings_general_products',
+            'kt_ecommerce_settings_general_customers',
+        ];
+
+        // Init all forms
+        forms.forEach(formId => {
+            // Select form
+            const form = document.getElementById(formId);
+
+            if(!form){
+                return;
+            }
+
+            // 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('.row').querySelector('input');
+                if (input) {
+                    detectedField = input;
+                }
+
+                const textarea = el.closest('.row').querySelector('textarea');
+                if (textarea) {
+                    detectedField = textarea;
+                }
+
+                const select = el.closest('.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-ecommerce-settings-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"
+                                    }
+                                });
+
+                                //form.submit(); // Submit form
+                            }, 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 Tagify
+    const initTagify = () => {
+        // Get tagify elements
+        const elements = document.querySelectorAll('[data-kt-ecommerce-settings-type="tagify"]');
+
+        // Init tagify
+        elements.forEach(element => {
+            new Tagify(element);
+        });
+    }
+
+    // Init Select2 with flags
+    const initSelect2Flags = () => {
+        // Format options
+        const optionFormat = (item) => {
+            if ( !item.id ) {
+                return item.text;
+            }
+
+            var span = document.createElement('span');
+            var template = '';
+
+            template += '<img src="' + item.element.getAttribute('data-kt-select2-country') + '" class="rounded-circle h-20px me-2" alt="image"/>';
+            template += item.text;
+
+            span.innerHTML = template;
+
+            return $(span);
+        }
+
+        // Init Select2 --- more info: https://select2.org/
+        $('[data-kt-ecommerce-settings-type="select2_flags"]').select2({
+            placeholder: "Select a country",
+            minimumResultsForSearch: Infinity,
+            templateSelection: optionFormat,
+            templateResult: optionFormat
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+
+            initForms();
+            initTagify();
+            initSelect2Flags();
+
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppEcommerceSettings.init();
+});

resources/_keenthemes/src/js/custom/apps/file-manager/list.js

@@ -0,0 +1,939 @@
+"use strict";
+
+// Class definition
+var KTFileManagerList = function () {
+    // Define shared variables
+    var datatable;
+    var table
+
+    // Define template element variables
+    var uploadTemplate;
+    var renameTemplate;
+    var actionTemplate;
+    var checkboxTemplate;
+
+
+    // Private functions
+    const initTemplates = () => {
+        uploadTemplate = document.querySelector('[data-kt-filemanager-template="upload"]');
+        renameTemplate = document.querySelector('[data-kt-filemanager-template="rename"]');
+        actionTemplate = document.querySelector('[data-kt-filemanager-template="action"]');
+        checkboxTemplate = document.querySelector('[data-kt-filemanager-template="checkbox"]');
+    }
+
+    const initDatatable = () => {
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const dateCol = dateRow[3]; // select date from 4th column in table
+            const realDate = moment(dateCol.innerHTML, "DD MMM YYYY, LT").format();
+            dateCol.setAttribute('data-order', realDate);
+        });
+
+        const foldersListOptions = {
+            "info": false,
+            'order': [],
+            "scrollY": "700px",
+            "scrollCollapse": true,
+            "paging": false,
+            'ordering': false,
+            'columns': [
+                { data: 'checkbox' },
+                { data: 'name' },
+                { data: 'size' },
+                { data: 'date' },
+                { data: 'action' },
+            ],
+            'language': {
+                emptyTable: `<div class="d-flex flex-column flex-center">
+                    <img src="${hostUrl}media/illustrations/sketchy-1/5.png" class="mw-400px" />
+                    <div class="fs-1 fw-bolder text-dark">No items found.</div>
+                    <div class="fs-6">Start creating new folders or uploading a new file!</div>
+                </div>`
+            }
+        };
+
+        const filesListOptions = {
+            "info": false,
+            'order': [],
+            'pageLength': 10,
+            "lengthChange": false,
+            'ordering': false,
+            'columns': [
+                { data: 'checkbox' },
+                { data: 'name' },
+                { data: 'size' },
+                { data: 'date' },
+                { data: 'action' },
+            ],
+            'language': {
+                emptyTable: `<div class="d-flex flex-column flex-center">
+                    <img src="${hostUrl}media/illustrations/sketchy-1/5.png" class="mw-400px" />
+                    <div class="fs-1 fw-bolder text-dark mb-4">No items found.</div>
+                    <div class="fs-6">Start creating new folders or uploading a new file!</div>
+                </div>`
+            },
+            conditionalPaging: true
+        };
+
+        // Define datatable options to load
+        var loadOptions;
+        if (table.getAttribute('data-kt-filemanager-table') === 'folders') {
+            loadOptions = foldersListOptions;
+        } else {
+            loadOptions = filesListOptions;
+        }
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable(loadOptions);
+
+        // Re-init functions on every table re-draw -- more info: https://datatables.net/reference/event/draw
+        datatable.on('draw', function () {
+            initToggleToolbar();
+            handleDeleteRows();
+            toggleToolbars();
+            resetNewFolder();
+            KTMenu.createInstances();
+            initCopyLink();
+            countTotalItems();
+            handleRename();
+        });
+    }
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    const handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-filemanager-table-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Delete customer
+    const handleDeleteRows = () => {
+        // Select all delete buttons
+        const deleteButtons = table.querySelectorAll('[data-kt-filemanager-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 fileName = 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 " + fileName + "?",
+                    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 " + fileName + "!.",
+                            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
+    const initToggleToolbar = () => {
+        // Toggle selected action toolbar
+        // Select all checkboxes
+        var checkboxes = table.querySelectorAll('[type="checkbox"]');
+        if (table.getAttribute('data-kt-filemanager-table') === 'folders') {
+            checkboxes = document.querySelectorAll('#kt_file_manager_list_wrapper [type="checkbox"]');
+        }
+
+        // Select elements
+        const deleteSelected = document.querySelector('[data-kt-filemanager-table-select="delete_selected"]');
+
+        // Toggle delete selected toolbar
+        checkboxes.forEach(c => {
+            // Checkbox on click event
+            c.addEventListener('click', function () {
+                console.log(c);
+                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 files or folders?",
+                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  files or folders!.",
+                        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;
+                    });
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Selected  files or folders 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-filemanager-table-toolbar="base"]');
+        const toolbarSelected = document.querySelector('[data-kt-filemanager-table-toolbar="selected"]');
+        const selectedCount = document.querySelector('[data-kt-filemanager-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');
+        }
+    }
+
+    // Handle new folder
+    const handleNewFolder = () => {
+        // Select button
+        const newFolder = document.getElementById('kt_file_manager_new_folder');
+
+        // Handle click action
+        newFolder.addEventListener('click', e => {
+            e.preventDefault();
+
+            // Ignore if input already exist
+            if (table.querySelector('#kt_file_manager_new_folder_row')) {
+                return;
+            }
+
+            // Add new blank row to datatable
+            const tableBody = table.querySelector('tbody');
+            const rowElement = uploadTemplate.cloneNode(true); // Clone template markup
+            tableBody.prepend(rowElement);
+
+            // Define template interactive elements
+            const rowForm = rowElement.querySelector('#kt_file_manager_add_folder_form');
+            const rowButton = rowElement.querySelector('#kt_file_manager_add_folder');
+            const cancelButton = rowElement.querySelector('#kt_file_manager_cancel_folder');
+            const folderIcon = rowElement.querySelector('#kt_file_manager_folder_icon');
+            const rowInput = rowElement.querySelector('[name="new_folder_name"]');
+
+            // Define validator
+            // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+            var validator = FormValidation.formValidation(
+                rowForm,
+                {
+                    fields: {
+                        'new_folder_name': {
+                            validators: {
+                                notEmpty: {
+                                    message: 'Folder name is required'
+                                }
+                            }
+                        },
+                    },
+                    plugins: {
+                        trigger: new FormValidation.plugins.Trigger(),
+                        bootstrap: new FormValidation.plugins.Bootstrap5({
+                            rowSelector: '.fv-row',
+                            eleInvalidClass: '',
+                            eleValidClass: ''
+                        })
+                    }
+                }
+            );
+
+            // Handle add new folder button
+            rowButton.addEventListener('click', e => {
+                e.preventDefault();
+
+                // Activate indicator
+                rowButton.setAttribute("data-kt-indicator", "on");
+
+                // Validate form before submit
+                if (validator) {
+                    validator.validate().then(function (status) {
+                        console.log('validated!');
+
+                        if (status == 'Valid') {
+                            // Simulate process for demo only
+                            setTimeout(function () {
+                                // Create folder link
+                                const folderLink = document.createElement('a');
+                                const folderLinkClasses = ['text-gray-800', 'text-hover-primary'];
+                                folderLink.setAttribute('href', '?page=apps/file-manager/blank');
+                                folderLink.classList.add(...folderLinkClasses);
+                                folderLink.innerText = rowInput.value;
+
+                                const newRow = datatable.row.add({
+                                    'checkbox': checkboxTemplate.innerHTML,
+                                    'name': folderIcon.outerHTML + folderLink.outerHTML,
+                                    "size": '-',
+                                    "date": '-',
+                                    'action': actionTemplate.innerHTML
+                                }).node();
+                                $(newRow).find('td').eq(4).attr('data-kt-filemanager-table', 'action_dropdown');
+                                $(newRow).find('td').eq(4).addClass('text-end'); // Add custom class to last 'td' element --- more info: https://datatables.net/forums/discussion/22341/row-add-cell-class
+
+                                // Re-sort datatable to allow new folder added at the top
+                                var index = datatable.row(0).index(),
+                                    rowCount = datatable.data().length - 1,
+                                    insertedRow = datatable.row(rowCount).data(),
+                                    tempRow;
+
+                                for (var i = rowCount; i > index; i--) {
+                                    tempRow = datatable.row(i - 1).data();
+                                    datatable.row(i).data(tempRow);
+                                    datatable.row(i - 1).data(insertedRow);
+                                }
+
+                                toastr.options = {
+                                    "closeButton": true,
+                                    "debug": false,
+                                    "newestOnTop": false,
+                                    "progressBar": false,
+                                    "positionClass": "toastr-top-right",
+                                    "preventDuplicates": false,
+                                    "showDuration": "300",
+                                    "hideDuration": "1000",
+                                    "timeOut": "5000",
+                                    "extendedTimeOut": "1000",
+                                    "showEasing": "swing",
+                                    "hideEasing": "linear",
+                                    "showMethod": "fadeIn",
+                                    "hideMethod": "fadeOut"
+                                };
+
+                                toastr.success(rowInput.value + ' was created!');
+
+                                // Disable indicator
+                                rowButton.removeAttribute("data-kt-indicator");
+
+                                // Reset input
+                                rowInput.value = '';
+
+                                datatable.draw(false);
+
+                            }, 2000);
+                        } else {
+                            // Disable indicator
+                            rowButton.removeAttribute("data-kt-indicator");
+                        }
+                    });
+                }
+            });
+
+            // Handle cancel new folder button
+            cancelButton.addEventListener('click', e => {
+                e.preventDefault();
+
+                // Activate indicator
+                cancelButton.setAttribute("data-kt-indicator", "on");
+
+                setTimeout(function () {
+                    // Disable indicator
+                    cancelButton.removeAttribute("data-kt-indicator");
+
+                    // Toggle toastr
+                    toastr.options = {
+                        "closeButton": true,
+                        "debug": false,
+                        "newestOnTop": false,
+                        "progressBar": false,
+                        "positionClass": "toastr-top-right",
+                        "preventDuplicates": false,
+                        "showDuration": "300",
+                        "hideDuration": "1000",
+                        "timeOut": "5000",
+                        "extendedTimeOut": "1000",
+                        "showEasing": "swing",
+                        "hideEasing": "linear",
+                        "showMethod": "fadeIn",
+                        "hideMethod": "fadeOut"
+                    };
+
+                    toastr.error('Cancelled new folder creation');
+                    resetNewFolder();
+                }, 1000);
+            });
+        });
+    }
+
+    // Reset add new folder input
+    const resetNewFolder = () => {
+        const newFolderRow = table.querySelector('#kt_file_manager_new_folder_row');
+
+        if (newFolderRow) {
+            newFolderRow.parentNode.removeChild(newFolderRow);
+        }
+    }
+
+    // Handle rename file or folder
+    const handleRename = () => {
+        const renameButton = table.querySelectorAll('[data-kt-filemanager-table="rename"]');     
+
+        renameButton.forEach(button => {
+            button.addEventListener('click', renameCallback);
+        });
+    }
+
+    // Rename callback
+    const renameCallback = (e) => {
+        e.preventDefault();
+
+        // Define shared value
+        let nameValue;
+
+        // Stop renaming if there's an input existing
+        if (table.querySelectorAll('#kt_file_manager_rename_input').length > 0) {
+            Swal.fire({
+                text: "Unsaved input detected. Please save or cancel the current item",
+                icon: "warning",
+                buttonsStyling: false,
+                confirmButtonText: "Ok, got it!",
+                customClass: {
+                    confirmButton: "btn fw-bold btn-danger"
+                }
+            });
+
+            return;
+        }
+
+        // Select parent row
+        const parent = e.target.closest('tr');
+
+        // Get name column
+        const nameCol = parent.querySelectorAll('td')[1];
+        const colIcon = nameCol.querySelector('.icon-wrapper');
+        nameValue = nameCol.innerText;
+
+        // Set rename input template
+        const renameInput = renameTemplate.cloneNode(true);
+        renameInput.querySelector('#kt_file_manager_rename_folder_icon').innerHTML = colIcon.outerHTML;
+
+        // Swap current column content with input template
+        nameCol.innerHTML = renameInput.innerHTML;
+
+        // Set input value with current file/folder name
+        parent.querySelector('#kt_file_manager_rename_input').value = nameValue;
+
+        // Rename file / folder validator
+        var renameValidator = FormValidation.formValidation(
+            nameCol,
+            {
+                fields: {
+                    'rename_folder_name': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Name is required'
+                            }
+                        }
+                    },
+                },
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Rename input button action
+        const renameInputButton = document.querySelector('#kt_file_manager_rename_folder');
+        renameInputButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            // Detect if valid
+            if (renameValidator) {
+                renameValidator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Pop up confirmation
+                        Swal.fire({
+                            text: "Are you sure you want to rename " + nameValue + "?",
+                            icon: "warning",
+                            showCancelButton: true,
+                            buttonsStyling: false,
+                            confirmButtonText: "Yes, rename it!",
+                            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 renamed " + nameValue + "!.",
+                                    icon: "success",
+                                    buttonsStyling: false,
+                                    confirmButtonText: "Ok, got it!",
+                                    customClass: {
+                                        confirmButton: "btn fw-bold btn-primary",
+                                    }
+                                }).then(function () {
+                                    // Get new file / folder name value
+                                    const newValue = document.querySelector('#kt_file_manager_rename_input').value;
+
+                                    // New column data template
+                                    const newData = `<div class="d-flex align-items-center">
+                                        ${colIcon.outerHTML}
+                                        <a href="?page=apps/file-manager/files/" class="text-gray-800 text-hover-primary">${newValue}</a>
+                                    </div>`;
+
+                                    // Draw datatable with new content -- Add more events here for any server-side events
+                                    datatable.cell($(nameCol)).data(newData).draw();
+                                });
+                            } else if (result.dismiss === 'cancel') {
+                                Swal.fire({
+                                    text: nameValue + " was not renamed.",
+                                    icon: "error",
+                                    buttonsStyling: false,
+                                    confirmButtonText: "Ok, got it!",
+                                    customClass: {
+                                        confirmButton: "btn fw-bold btn-primary",
+                                    }
+                                });
+                            }
+                        });
+                    }
+                });
+            }
+        });
+
+        // Cancel rename input
+        const cancelInputButton = document.querySelector('#kt_file_manager_rename_folder_cancel');
+        cancelInputButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            // Simulate process for demo only
+            cancelInputButton.setAttribute("data-kt-indicator", "on");
+
+            setTimeout(function () {
+                const revertTemplate = `<div class="d-flex align-items-center">
+                    ${colIcon.outerHTML}
+                    <a href="?page=apps/file-manager/files/" class="text-gray-800 text-hover-primary">${nameValue}</a>
+                </div>`;
+
+                // Remove spinner
+                cancelInputButton.removeAttribute("data-kt-indicator");
+
+                // Draw datatable with new content -- Add more events here for any server-side events
+                datatable.cell($(nameCol)).data(revertTemplate).draw();
+
+                // Toggle toastr
+                toastr.options = {
+                    "closeButton": true,
+                    "debug": false,
+                    "newestOnTop": false,
+                    "progressBar": false,
+                    "positionClass": "toastr-top-right",
+                    "preventDuplicates": false,
+                    "showDuration": "300",
+                    "hideDuration": "1000",
+                    "timeOut": "5000",
+                    "extendedTimeOut": "1000",
+                    "showEasing": "swing",
+                    "hideEasing": "linear",
+                    "showMethod": "fadeIn",
+                    "hideMethod": "fadeOut"
+                };
+
+                toastr.error('Cancelled rename function');
+            }, 1000);
+        });
+    }
+
+    // Init dropzone
+    const initDropzone = () => {
+        // set the dropzone container id
+        const id = "#kt_modal_upload_dropzone";
+        const dropzone = document.querySelector(id);
+
+        // 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: "path/to/your/server", // Set the url for your upload script location
+            parallelUploads: 10,
+            previewTemplate: previewTemplate,
+            maxFilesize: 1, // Max filesize in MB
+            autoProcessQueue: false, // Stop auto upload
+            autoQueue: false, // Make sure the files aren't queued until manually added
+            previewsContainer: id + " .dropzone-items", // Define the container to display the previews
+            clickable: id + " .dropzone-select" // Define the element that should be used as click trigger to select files.
+        });
+
+        myDropzone.on("addedfile", function (file) {
+            // Hook each start button
+            file.previewElement.querySelector(id + " .dropzone-start").onclick = function () {
+                // myDropzone.enqueueFile(file); -- default dropzone function
+
+                // Process simulation for demo only
+                const progressBar = file.previewElement.querySelector('.progress-bar');
+                progressBar.style.opacity = "1";
+                var width = 1;
+                var timer = setInterval(function () {
+                    if (width >= 100) {
+                        myDropzone.emit("success", file);
+                        myDropzone.emit("complete", file);
+                        clearInterval(timer);
+                    } else {
+                        width++;
+                        progressBar.style.width = width + '%';
+                    }
+                }, 20);
+            };
+
+            const dropzoneItems = dropzone.querySelectorAll('.dropzone-item');
+            dropzoneItems.forEach(dropzoneItem => {
+                dropzoneItem.style.display = '';
+            });
+            dropzone.querySelector('.dropzone-upload').style.display = "inline-block";
+            dropzone.querySelector('.dropzone-remove-all').style.display = "inline-block";
+        });
+
+        // Hide the total progress bar when nothing's uploading anymore
+        myDropzone.on("complete", function (file) {
+            const progressBars = dropzone.querySelectorAll('.dz-complete');
+            setTimeout(function () {
+                progressBars.forEach(progressBar => {
+                    progressBar.querySelector('.progress-bar').style.opacity = "0";
+                    progressBar.querySelector('.progress').style.opacity = "0";
+                    progressBar.querySelector('.dropzone-start').style.opacity = "0";
+                });
+            }, 300);
+        });
+
+        // Setup the buttons for all transfers
+        dropzone.querySelector(".dropzone-upload").addEventListener('click', function () {
+            // myDropzone.processQueue(); --- default dropzone process
+
+            // Process simulation for demo only
+            myDropzone.files.forEach(file => {
+                const progressBar = file.previewElement.querySelector('.progress-bar');
+                progressBar.style.opacity = "1";
+                var width = 1;
+                var timer = setInterval(function () {
+                    if (width >= 100) {
+                        myDropzone.emit("success", file);
+                        myDropzone.emit("complete", file);
+                        clearInterval(timer);
+                    } else {
+                        width++;
+                        progressBar.style.width = width + '%';
+                    }
+                }, 20);
+            });
+        });
+
+        // Setup the button for remove all files
+        dropzone.querySelector(".dropzone-remove-all").addEventListener('click', function () {
+            Swal.fire({
+                text: "Are you sure you would like to remove all files?",
+                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) {
+                    dropzone.querySelector('.dropzone-upload').style.display = "none";
+                    dropzone.querySelector('.dropzone-remove-all').style.display = "none";
+                    myDropzone.removeAllFiles(true);
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your files was not removed!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+
+        // On all files completed upload
+        myDropzone.on("queuecomplete", function (progress) {
+            const uploadIcons = dropzone.querySelectorAll('.dropzone-upload');
+            uploadIcons.forEach(uploadIcon => {
+                uploadIcon.style.display = "none";
+            });
+        });
+
+        // On all files removed
+        myDropzone.on("removedfile", function (file) {
+            if (myDropzone.files.length < 1) {
+                dropzone.querySelector('.dropzone-upload').style.display = "none";
+                dropzone.querySelector('.dropzone-remove-all').style.display = "none";
+            }
+        });
+    }
+
+    // Init copy link
+    const initCopyLink = () => {
+        // Select all copy link elements
+        const elements = table.querySelectorAll('[data-kt-filemanger-table="copy_link"]');
+
+        elements.forEach(el => {
+            // Define elements
+            const button = el.querySelector('button');
+            const generator = el.querySelector('[data-kt-filemanger-table="copy_link_generator"]');
+            const result = el.querySelector('[data-kt-filemanger-table="copy_link_result"]');
+            const input = el.querySelector('input');
+
+            // Click action
+            button.addEventListener('click', e => {
+                e.preventDefault();
+
+                // Reset toggle
+                generator.classList.remove('d-none');
+                result.classList.add('d-none');
+
+                var linkTimeout;
+                clearTimeout(linkTimeout);
+                linkTimeout = setTimeout(() => {
+                    generator.classList.add('d-none');
+                    result.classList.remove('d-none');
+                    input.select();
+                }, 2000);
+            });
+        });
+    }
+
+    // Handle move to folder
+    const handleMoveToFolder = () => {
+        const element = document.querySelector('#kt_modal_move_to_folder');
+        const form = element.querySelector('#kt_modal_move_to_folder_form');
+        const saveButton = form.querySelector('#kt_modal_move_to_folder_submit');
+        const moveModal = new bootstrap.Modal(element);
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'move_to_folder': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Please select a folder.'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        saveButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            saveButton.setAttribute("data-kt-indicator", "on");
+
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Simulate process for demo only
+                        setTimeout(function () {
+
+                            Swal.fire({
+                                text: "Are you sure you would like to move to this folder",
+                                icon: "warning",
+                                showCancelButton: true,
+                                buttonsStyling: false,
+                                confirmButtonText: "Yes, move it!",
+                                cancelButtonText: "No, return",
+                                customClass: {
+                                    confirmButton: "btn btn-primary",
+                                    cancelButton: "btn btn-active-light"
+                                }
+                            }).then(function (result) {
+                                if (result.isConfirmed) {
+                                    form.reset(); // Reset form	
+                                    moveModal.hide(); // Hide modal			
+
+                                    toastr.options = {
+                                        "closeButton": true,
+                                        "debug": false,
+                                        "newestOnTop": false,
+                                        "progressBar": false,
+                                        "positionClass": "toastr-top-right",
+                                        "preventDuplicates": false,
+                                        "showDuration": "300",
+                                        "hideDuration": "1000",
+                                        "timeOut": "5000",
+                                        "extendedTimeOut": "1000",
+                                        "showEasing": "swing",
+                                        "hideEasing": "linear",
+                                        "showMethod": "fadeIn",
+                                        "hideMethod": "fadeOut"
+                                    };
+
+                                    toastr.success('1 item has been moved.');
+
+                                    saveButton.removeAttribute("data-kt-indicator");
+                                } else {
+                                    Swal.fire({
+                                        text: "Your action has been cancelled!.",
+                                        icon: "error",
+                                        buttonsStyling: false,
+                                        confirmButtonText: "Ok, got it!",
+                                        customClass: {
+                                            confirmButton: "btn btn-primary",
+                                        }
+                                    });
+
+                                    saveButton.removeAttribute("data-kt-indicator");
+                                }
+                            });
+                        }, 500);
+                    } else {
+                        saveButton.removeAttribute("data-kt-indicator");
+                    }
+                });
+            }
+        });
+    }
+
+    // Count total number of items
+    const countTotalItems = () => {
+        const counter = document.getElementById('kt_file_manager_items_counter');
+
+        // Count total number of elements in datatable --- more info: https://datatables.net/reference/api/count()
+        counter.innerText = datatable.rows().count() + ' items';
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            table = document.querySelector('#kt_file_manager_list');
+
+            if (!table) {
+                return;
+            }
+
+            initTemplates();
+            initDatatable();
+            initToggleToolbar();
+            handleSearchDatatable();
+            handleDeleteRows();
+            handleNewFolder();
+            initDropzone();
+            initCopyLink();
+            handleRename();
+            handleMoveToFolder();
+            countTotalItems();
+            KTMenu.createInstances();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFileManagerList.init();
+});

resources/_keenthemes/src/js/custom/apps/file-manager/settings.js

@@ -0,0 +1,55 @@
+"use strict";
+
+// Class definition
+var KTAppFileManagerSettings = function () {
+    var form;
+
+	// Private functions
+	var handleForm = function() {
+		const saveButton = form.querySelector('#kt_file_manager_settings_submit');
+
+        saveButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            saveButton.setAttribute("data-kt-indicator", "on");
+
+            // Simulate process for demo only
+            setTimeout(function(){
+                toastr.options = {
+                    "closeButton": true,
+                    "debug": false,
+                    "newestOnTop": false,
+                    "progressBar": false,
+                    "positionClass": "toast-top-right",
+                    "preventDuplicates": false,
+                    "showDuration": "300",
+                    "hideDuration": "1000",
+                    "timeOut": "5000",
+                    "extendedTimeOut": "1000",
+                    "showEasing": "swing",
+                    "hideEasing": "linear",
+                    "showMethod": "fadeIn",
+                    "hideMethod": "fadeOut"
+                };
+
+                toastr.success('File manager settings have been saved');
+
+                saveButton.removeAttribute("data-kt-indicator");
+            }, 1000);
+        });
+	}
+
+	// Public methods
+	return {
+		init: function(element) {
+            form = document.querySelector('#kt_file_manager_settings');
+
+			handleForm();
+        }
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppFileManagerSettings.init();
+});

resources/_keenthemes/src/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/_keenthemes/src/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/_keenthemes/src/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/_keenthemes/src/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/_keenthemes/src/js/custom/apps/projects/list/list.js

@@ -0,0 +1,79 @@
+"use strict";
+
+// Class definition
+var KTProjectList = function () {    
+    var initChart = function () {
+        // init chart
+        var element = document.getElementById("kt_project_list_chart");
+
+        if (!element) {
+            return;
+        }
+
+        var config = {
+            type: 'doughnut',
+            data: {
+                datasets: [{
+                    data: [30, 45, 25],
+                    backgroundColor: ['#00A3FF', '#50CD89', '#E4E6EF']
+                }],
+                labels: ['Active', 'Completed', 'Yet to start']
+            },
+            options: {
+                chart: {
+                    fontFamily: 'inherit'
+                },
+                borderWidth: 0,
+                cutout: '75%',
+                cutoutPercentage: 65,
+                responsive: true,
+                maintainAspectRatio: false,
+                title: {
+                    display: false
+                },
+                animation: {
+                    animateScale: true,
+                    animateRotate: true
+                },
+                stroke: {
+                    width: 0
+                },
+                tooltips: {
+                    enabled: true,
+                    intersect: false,
+                    mode: 'nearest',
+                    bodySpacing: 5,
+                    yPadding: 10,
+                    xPadding: 10,
+                    caretPadding: 0,
+                    displayColors: false,
+                    backgroundColor: '#20D489',
+                    titleFontColor: '#ffffff',
+                    cornerRadius: 4,
+                    footerSpacing: 0,
+                    titleSpacing: 0
+                },
+                plugins: {
+                    legend: {
+                        display: false
+                    }
+                }                
+            }
+        };
+
+        var ctx = element.getContext('2d');
+        var myDoughnut = new Chart(ctx, config);
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initChart();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTProjectList.init();
+});

resources/_keenthemes/src/js/custom/apps/projects/project/project.js

@@ -0,0 +1,316 @@
+"use strict";
+
+// Class definition
+var KTProjectOverview = function () {
+    // Colors
+    var primary = KTUtil.getCssVariableValue('--bs-primary');
+    var lightPrimary = KTUtil.getCssVariableValue('--bs-primary-light');
+    var success = KTUtil.getCssVariableValue('--bs-success');
+    var lightSuccess = KTUtil.getCssVariableValue('--bs-success-light');
+    var gray200 = KTUtil.getCssVariableValue('--bs-gray-200');
+    var gray500 = KTUtil.getCssVariableValue('--bs-gray-500');
+
+    // Private functions
+    var initChart = function () {        
+        // init chart
+        var element = document.getElementById("project_overview_chart");
+
+        if (!element) {
+            return;
+        }
+
+        var config = {
+            type: 'doughnut',
+            data: {
+                datasets: [{
+                    data: [30, 45, 25],
+                    backgroundColor: ['#00A3FF', '#50CD89', '#E4E6EF']
+                }],
+                labels: ['Active', 'Completed', 'Yet to start']
+            },
+            options: {
+                chart: {
+                    fontFamily: 'inherit'
+                },
+                cutoutPercentage: 75,
+                responsive: true,
+                maintainAspectRatio: false,
+                cutout: '75%',
+                title: {
+                    display: false
+                },
+                animation: {
+                    animateScale: true,
+                    animateRotate: true
+                },
+                tooltips: {
+                    enabled: true,
+                    intersect: false,
+                    mode: 'nearest',
+                    bodySpacing: 5,
+                    yPadding: 10,
+                    xPadding: 10,
+                    caretPadding: 0,
+                    displayColors: false,
+                    backgroundColor: '#20D489',
+                    titleFontColor: '#ffffff',
+                    cornerRadius: 4,
+                    footerSpacing: 0,
+                    titleSpacing: 0
+                },
+                plugins: {
+                    legend: {
+                        display: false
+                    }
+                }
+            }
+        };
+
+        var ctx = element.getContext('2d');
+        var myDoughnut = new Chart(ctx, config);
+    }
+
+    var initGraph = function () {
+        var element = document.getElementById("kt_project_overview_graph");
+        var height = parseInt(KTUtil.css(element, 'height'));
+
+        if (!element) {
+            return;
+        }
+
+        var options = {
+            series: [{
+                name: 'Incomplete',
+                data: [70, 70, 80, 80, 75, 75, 75]
+            }, {
+                name: 'Complete',
+                data: [55, 55, 60, 60, 55, 55, 60]
+            }],
+            chart: {
+                type: 'area',
+                height: height,
+                toolbar: {
+                    show: false
+                }
+            },
+            plotOptions: {
+
+            },
+            legend: {
+                show: false
+            },
+            dataLabels: {
+                enabled: false
+            },
+            fill: {
+                type: 'solid',
+                opacity: 1
+            },
+            stroke: {
+                curve: 'smooth',
+                show: true,
+                width: 3,
+                colors: [primary, success]
+            },
+            xaxis: {
+                categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
+                axisBorder: {
+                    show: false,
+                },
+                axisTicks: {
+                    show: false
+                },
+                labels: {
+                    style: {
+                        colors: gray500,
+                        fontSize: '12px'
+                    }
+                },
+                crosshairs: {
+                    position: 'front',
+                    stroke: {
+                        color: primary,
+                        width: 1,
+                        dashArray: 3
+                    }
+                },
+                tooltip: {
+                    enabled: true,
+                    formatter: undefined,
+                    offsetY: 0,
+                    style: {
+                        fontSize: '12px'
+                    }
+                }
+            },
+            yaxis: {
+                labels: {
+                    style: {
+                        colors: gray500,
+                        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 + " tasks"
+                    }
+                }
+            },
+            colors: [lightPrimary, lightSuccess],
+            grid: {
+                borderColor: gray200,
+                strokeDashArray: 4,
+                yaxis: {
+                    lines: {
+                        show: true
+                    }
+                }
+            },
+            markers: {
+                //size: 5,
+                colors: [lightPrimary, lightSuccess],
+                strokeColor: [primary, success],
+                strokeWidth: 3
+            }
+        };
+
+        var chart = new ApexCharts(element, options);
+        chart.render();
+    }
+
+    var initTable = function () {
+        var table = document.querySelector('#kt_profile_overview_table');
+
+        if (!table) {
+            return;
+        }
+
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[1].innerHTML, "MMM D, YYYY").format();
+            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();
+                    maxDate = moment().endOf('year').format();
+                    datatable.draw();
+                    break;
+                }
+                case 'thismonth': {
+                    minDate = moment().startOf('month').format();
+                    maxDate = moment().endOf('month').format();
+                    datatable.draw();
+                    break;
+                }
+                case 'lastmonth': {
+                    minDate = moment().subtract(1, 'months').startOf('month').format();
+                    maxDate = moment().subtract(1, 'months').endOf('month').format();
+                    datatable.draw();
+                    break;
+                }
+                case 'last90days': {
+                    minDate = moment().subtract(30, 'days').format();
+                    maxDate = moment().format();
+                    datatable.draw();
+                    break;
+                }
+                default: {
+                    minDate = moment().subtract(100, 'years').startOf('month').format();
+                    maxDate = moment().add(1, 'months').endOf('month').format();
+                    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()) || 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 () {
+            initChart();
+            initGraph();
+            initTable();
+        }
+    }
+}();
+
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTProjectOverview.init();
+});

resources/_keenthemes/src/js/custom/apps/projects/settings/settings.js

@@ -0,0 +1,104 @@
+"use strict";
+
+// Class definition
+var KTProjectSettings = function () {
+
+    // Private functions
+    var handleForm = function () {
+        // Init Datepicker --- For more info, please check Flatpickr's official documentation: https://flatpickr.js.org/
+        $("#kt_datepicker_1").flatpickr();
+
+        // Form validation
+        var validation;
+        var _form = document.getElementById('kt_project_settings_form');
+        var submitButton = _form.querySelector('#kt_project_settings_submit');
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validation = FormValidation.formValidation(
+            _form,
+            {
+                fields: {
+                    name: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Project name is required'
+                            }
+                        }
+                    },
+                    type: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Project type is required'
+                            }
+                        }
+                    },
+                    description: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Project Description is required'
+                            }
+                        }
+                    },
+                    date: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Due Date is required'
+                            }
+                        }
+                    },
+                },
+                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'
+                    })
+                }
+            }
+        );
+
+        submitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            validation.validate().then(function (status) {
+                if (status == 'Valid') {
+
+                    swal.fire({
+                        text: "Thank you! You've updated your project settings",
+                        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 () {
+            handleForm();
+        }
+    }
+}();
+
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTProjectSettings.init();
+});

resources/_keenthemes/src/js/custom/apps/projects/targets/targets.js

@@ -0,0 +1,38 @@
+"use strict";
+
+// Class definition
+var KTProjectTargets = function () {
+
+    var initDatatable = function () {
+        const table = document.getElementById('kt_profile_overview_table');
+
+        // set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[1].innerHTML, "MMM D, YYYY").format();
+            dateRow[1].setAttribute('data-order', realDate);
+        });
+
+        // init datatable --- more info on datatables: https://datatables.net/manual/
+        const datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            "paging": false,
+        });
+
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initDatatable();
+        }
+    }
+}();
+
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTProjectTargets.init();
+});

resources/_keenthemes/src/js/custom/apps/projects/users/users.js

@@ -0,0 +1,52 @@
+"use strict";
+
+// Class definition
+var KTProjectUsers = function () {
+
+    var initTable = function () {
+        // Set date data order
+        const table = document.getElementById('kt_project_users_table');
+
+        if (!table) {
+            return;
+        }
+        
+        const tableRows = table.querySelectorAll('tbody tr');
+        
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[1].innerHTML, "MMM D, YYYY").format();
+            dateRow[1].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        const datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            "columnDefs": [{
+                "targets": 4,
+                "orderable": false
+            }]
+        });
+
+        // Search --- official docs reference: https://datatables.net/reference/api/search()
+        var filterSearch = document.getElementById('kt_filter_search');
+        if (filterSearch) {
+            filterSearch.addEventListener('keyup', function (e) {
+                datatable.search(e.target.value).draw();
+            });
+        }        
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initTable();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTProjectUsers.init();
+});

resources/_keenthemes/src/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/_keenthemes/src/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/_keenthemes/src/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/_keenthemes/src/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/_keenthemes/src/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/_keenthemes/src/js/custom/apps/support-center/general.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var KTSupportCenterGeneral = function() {
+    var menuWrapper;
+
+    var initInstance = function(element) {
+        var elements = element;
+
+        if ( typeof elements === 'undefined' ) {
+            elements = document.querySelectorAll('.highlight');
+        }
+
+        if ( elements && elements.length > 0 ) {
+            for ( var i = 0; i < elements.length; ++i ) {
+                var highlight = elements[i];
+                var copy = highlight.querySelector('.highlight-copy');
+
+                if ( copy ) {
+                    var clipboard = new ClipboardJS(copy, {
+                        target: function(trigger) {
+                            var highlight = trigger.closest('.highlight');
+                            var el = highlight.querySelector('.tab-pane.active');
+
+                            if ( el == null ) {
+                                el = highlight.querySelector('.highlight-code');
+                            }
+
+                            return el;
+                        }
+                    });
+
+                    clipboard.on('success', function(e) {
+                        var caption = e.trigger.innerHTML;
+
+                        e.trigger.innerHTML = 'copied';
+                        e.clearSelection();
+
+                        setTimeout(function() {
+                            e.trigger.innerHTML = caption;
+                        }, 2000);
+                    });
+                }
+            }
+        }
+    }
+
+    var handleMenuScroll = function() {
+        var menuActiveItem = menuWrapper.querySelector(".menu-link.active");
+
+        if ( !menuActiveItem ) {
+            return;
+        } 
+
+        if ( KTUtil.isVisibleInContainer(menuActiveItem, menuWrapper) === true) {
+            return;
+        }
+
+        menuWrapper.scroll({
+            top: KTUtil.getRelativeTopPosition(menuActiveItem, menuWrapper),
+            behavior: 'smooth'
+        });
+    }
+
+    return {
+        init: function() {
+            initInstance();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTSupportCenterGeneral.init();
+});

resources/_keenthemes/src/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/_keenthemes/src/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/_keenthemes/src/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/_keenthemes/src/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/_keenthemes/src/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/_keenthemes/src/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/_keenthemes/src/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/_keenthemes/src/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/_keenthemes/src/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/_keenthemes/src/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/_keenthemes/src/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/_keenthemes/src/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/_keenthemes/src/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/_keenthemes/src/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/_keenthemes/src/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/_keenthemes/src/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();
+});