adding files of assets

assets/js/custom/account/settings/close-account.js

@@ -0,0 +1,111 @@
+"use strict";
+
+// Class definition
+var KTAccountClose = 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: {
+                    close: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Please check the box to close 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 close 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 closed.', 
+                                icon: 'success',
+                                confirmButtonText: "Ok",
+                                buttonsStyling: false,
+                                customClass: {
+                                    confirmButton: "btn btn-light-primary"
+                                }
+                            })
+                        } else if (result.isDenied) {
+                            Swal.fire({
+                                text: 'Account not closed.', 
+                                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_close_form');
+            submitButton = document.querySelector('#kt_account_close_submit');
+
+            initValidation();
+            handleForm();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTAccountClose.init();
+});

assets/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();
+});

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

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

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

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

assets/js/custom/apps/calendar/calendar.js

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

assets/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'));
+});

assets/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="assets/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="assets/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('.svg-icon-2x');
+            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": "toast-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": "toast-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('.svg-icon');
+        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": "toast-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": "toast-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();
+});

assets/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();
+});

assets/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();
+});

assets/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();
+});

assets/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();
+});

assets/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();
+});

assets/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();
+});

assets/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();
+});

assets/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();
+});

assets/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();
+});

assets/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();
+});

assets/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();
+});

assets/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();
+});

assets/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();
+});

assets/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();
+});

assets/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();
+});

assets/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();
+});

assets/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();
+});

assets/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();
+});

assets/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();
+});

assets/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();
+});

assets/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();
+});

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

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

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

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

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

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

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

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

assets/js/custom/authentication/password-reset/new-password.js

@@ -0,0 +1,151 @@
+"use strict";
+
+// Class Definition
+var KTPasswordResetNewPassword = function() {
+    // Elements
+    var form;
+    var submitButton;
+    var validator;
+    var passwordMeter;
+
+    var handleForm = function(e) {
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {					 
+                    '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="password"]').value;
+                                },
+                                message: 'The password and its confirm are not the same'
+                            }
+                        }
+                    },
+                    'toc': {
+                        validators: {
+                            notEmpty: {
+                                message: 'You must accept the terms and conditions'
+                            }
+                        }
+                    }
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger({
+                        event: {
+                            password: false
+                        }  
+                    }),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+				}
+			}
+		);
+
+        submitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            validator.revalidateField('password');
+
+            validator.validate().then(function(status) {
+		        if (status == 'Valid') {
+                    // Show loading indication
+                    submitButton.setAttribute('data-kt-indicator', 'on');
+
+                    // Disable button to avoid multiple click 
+                    submitButton.disabled = true;
+
+                    // Simulate ajax request
+                    setTimeout(function() {
+                        // Hide loading indication
+                        submitButton.removeAttribute('data-kt-indicator');
+
+                        // Enable button
+                        submitButton.disabled = false;
+
+                        // Show message popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        Swal.fire({
+                            text: "You have successfully reset your password!",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        }).then(function (result) {
+                            if (result.isConfirmed) { 
+                                form.querySelector('[name="password"]').value= "";   
+                                form.querySelector('[name="confirm-password"]').value= "";      
+                                passwordMeter.reset();  // reset password meter
+                                //form.submit();
+                            }
+                        });
+                    }, 1500);   						
+                } else {
+                    // Show error popup. 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"
+                        }
+                    });
+                }
+		    });
+        });
+
+        form.querySelector('input[name="password"]').addEventListener('input', function() {
+            if (this.value.length > 0) {
+                validator.updateFieldStatus('password', 'NotValidated');
+            }
+        });
+    }
+
+    var validatePassword = function() {
+        
+
+        return  (passwordMeter.getScore() === 100);
+    }
+
+    // Public Functions
+    return {
+        // public functions
+        init: function() {
+            form = document.querySelector('#kt_new_password_form');
+            submitButton = document.querySelector('#kt_new_password_submit');
+            passwordMeter = KTPasswordMeter.getInstance(form.querySelector('[data-kt-password-meter="true"]'));
+
+            handleForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTPasswordResetNewPassword.init();
+});

assets/js/custom/authentication/password-reset/password-reset.js

@@ -0,0 +1,105 @@
+"use strict";
+
+// Class Definition
+var KTPasswordResetGeneral = function() {
+    // Elements
+    var form;
+    var submitButton;
+	var validator;
+
+    var handleForm = function(e) {
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {					
+					'email': {
+                        validators: {
+							notEmpty: {
+								message: 'Email address is required'
+							},
+                            emailAddress: {
+								message: 'The value is not a valid email address'
+							}
+						}
+					} 
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+						eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+				}
+			}
+		);		
+
+        submitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            // Validate form
+            validator.validate().then(function (status) {
+                if (status == 'Valid') {
+                    // Show loading indication
+                    submitButton.setAttribute('data-kt-indicator', 'on');
+
+                    // Disable button to avoid multiple click 
+                    submitButton.disabled = true;
+
+                    // Simulate ajax request
+                    setTimeout(function() {
+                        // Hide loading indication
+                        submitButton.removeAttribute('data-kt-indicator');
+
+                        // Enable button
+                        submitButton.disabled = false;
+
+                        // Show message popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        Swal.fire({
+                            text: "You have successfully logged in!",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        }).then(function (result) {
+                            if (result.isConfirmed) { 
+                                form.querySelector('[name="email"]').value= "";                          
+                                //form.submit();
+                            }
+                        });
+                    }, 1500);   						
+                } else {
+                    // Show error popup. 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"
+                        }
+                    });
+                }
+            });  
+		});
+    }
+
+    // Public Functions
+    return {
+        // public functions
+        init: function() {
+            form = document.querySelector('#kt_password_reset_form');
+            submitButton = document.querySelector('#kt_password_reset_submit');
+
+            handleForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTPasswordResetGeneral.init();
+});

assets/js/custom/authentication/sign-in/general.js

@@ -0,0 +1,116 @@
+"use strict";
+
+// Class definition
+var KTSigninGeneral = function() {
+    // Elements
+    var form;
+    var submitButton;
+    var validator;
+
+    // Handle form
+    var handleForm = function(e) {
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {					
+					'email': {
+                        validators: {
+							notEmpty: {
+								message: 'Email address is required'
+							},
+                            emailAddress: {
+								message: 'The value is not a valid email address'
+							}
+						}
+					},
+                    'password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'The password is required'
+                            }
+                        }
+                    } 
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        //eleInvalidClass: '',  uncomment to disable icons in input
+                        //eleValidClass: '' uncomment to disable icons in input
+                    })
+				}
+			}
+		);		
+
+        // Handle form submit
+        submitButton.addEventListener('click', function (e) {
+            // Prevent button default action
+            e.preventDefault();
+
+            // Validate form
+            validator.validate().then(function (status) {
+                if (status == 'Valid') {
+                    // Show loading indication
+                    submitButton.setAttribute('data-kt-indicator', 'on');
+
+                    // Disable button to avoid multiple click 
+                    submitButton.disabled = true;
+
+                    // Simulate ajax request
+                    setTimeout(function() {
+                        // Hide loading indication
+                        submitButton.removeAttribute('data-kt-indicator');
+
+                        // Enable button
+                        submitButton.disabled = false;
+
+                        // Show message popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        Swal.fire({
+                            text: "You have successfully logged in!",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        }).then(function (result) {
+                            if (result.isConfirmed) { 
+                                form.querySelector('[name="email"]').value= "";
+                                form.querySelector('[name="password"]').value= "";                                
+                                //form.submit();
+                            }
+                        });
+                    }, 2000);   						
+                } else {
+                    // Show error popup. 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"
+                        }
+                    });
+                }
+            });
+		});
+    }
+
+    // Public functions
+    return {
+        // Initialization
+        init: function() {
+            form = document.querySelector('#kt_sign_in_form');
+            submitButton = document.querySelector('#kt_sign_in_submit');
+            
+            handleForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTSigninGeneral.init();
+});

assets/js/custom/authentication/sign-in/two-steps.js

@@ -0,0 +1,87 @@
+"use strict";
+
+// Class Definition
+var KTSigninTwoSteps = function() {
+    // Elements
+    var form;
+    var submitButton;
+
+    // Handle form
+    var handleForm = function(e) {        
+        // Handle form submit
+        submitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            var validated = true;
+
+            var inputs = [].slice.call(form.querySelectorAll('input[maxlength="1"]'));
+            inputs.map(function (input) {
+                if (input.value === '' || input.value.length === 0) {
+                    validated = false;
+                }
+            });
+
+            if (validated === true) {
+                // Show loading indication
+                submitButton.setAttribute('data-kt-indicator', 'on');
+
+                // Disable button to avoid multiple click 
+                submitButton.disabled = true;
+
+                // Simulate ajax request
+                setTimeout(function() {
+                    // Hide loading indication
+                    submitButton.removeAttribute('data-kt-indicator');
+
+                    // Enable button
+                    submitButton.disabled = false;
+
+                    // Show message popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                    Swal.fire({
+                        text: "You have been successfully verified!",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary"
+                        }
+                    }).then(function (result) {
+                        if (result.isConfirmed) { 
+                            inputs.map(function (input) {
+                                input.value = '';
+                            });
+                        }
+                    });
+                }, 1000); 
+            } else {
+                swal.fire({
+                    text: "Please enter valid securtiy code and try again.",
+                    icon: "error",
+                    buttonsStyling: false,
+                    confirmButtonText: "Ok, got it!",
+                    customClass: {
+                        confirmButton: "btn fw-bold btn-light-primary"
+                    }
+                }).then(function() {
+                    KTUtil.scrollTop();
+                });
+            }
+        });
+    }
+
+    // Public functions
+    return {
+        // Initialization
+        init: function() {
+            form = document.querySelector('#kt_sing_in_two_steps_form');
+            submitButton = document.querySelector('#kt_sing_in_two_steps_submit');
+
+            handleForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTSigninTwoSteps.init();
+});

assets/js/custom/authentication/sign-up/coming-soon.js

@@ -0,0 +1,149 @@
+"use strict";
+
+// Class Definition
+var KTSignupComingSoon = function() {
+    // Elements
+    var form;
+    var submitButton;
+	var validator; 
+
+    var counterDays;
+    var counterHours;
+    var counterMinutes;
+    var counterSeconds;
+
+    var handleForm = function(e) {
+        var validation;		 
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {					
+					'email': {
+                        validators: {
+							notEmpty: {
+								message: 'Email address is required'
+							},
+                            emailAddress: {
+								message: 'The value is not a valid email address'
+							}
+						}
+					} 
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+				}
+			}
+		);		
+
+        submitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            // Validate form
+            validator.validate().then(function (status) {
+                if (status == 'Valid') {
+                    // Show loading indication
+                    submitButton.setAttribute('data-kt-indicator', 'on');
+
+                    // Disable button to avoid multiple click 
+                    submitButton.disabled = true;
+
+                    // Simulate ajax request
+                    setTimeout(function() {
+                        // Hide loading indication
+                        submitButton.removeAttribute('data-kt-indicator');
+
+                        // Enable button
+                        submitButton.disabled = false;
+
+                        // Show message popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        Swal.fire({
+                            text: "You have successfully subscribed !",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        }).then(function (result) {
+                            if (result.isConfirmed) { 
+                                form.querySelector('[name="email"]').value= "";                            
+                                //form.submit();
+                            }
+                        });
+                    }, 2000);   						
+                } else {
+                    // Show error popup. 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"
+                        }
+                    });
+                }
+            });
+		});
+    }
+
+    var initCounter = function() {
+        // Set the date we're counting down to
+        var currentTime = new Date(); 
+        var countDownDate = new Date(currentTime.getTime() + 1000 * 60 * 60 * 24 * 15 + 1000 * 60 * 60 * 10 + 1000 * 60 * 15).getTime();
+
+        var count = function() {
+            // Get todays date and time
+            var now = new Date().getTime();
+
+            // Find the distance between now an the count down date
+            var distance = countDownDate - now;
+
+            // Time calculations for days, hours, minutes and seconds
+            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
+            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+            var seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+            // Display the result
+            counterDays.innerHTML = days;
+            counterHours.innerHTML = hours;
+            counterMinutes.innerHTML = minutes;
+            counterSeconds.innerHTML = seconds;
+        };
+
+        // Update the count down every 1 second
+        var x = setInterval(count, 1000);
+
+        // Initial count
+        count();
+    }
+
+    // Public Functions
+    return {
+        // public functions
+        init: function() {
+            form = document.querySelector('#kt_coming_soon_form');
+            submitButton = document.querySelector('#kt_coming_soon_submit');
+            counterDays = document.querySelector('#kt_coming_soon_counter_days');
+            counterHours = document.querySelector('#kt_coming_soon_counter_hours');
+            counterMinutes = document.querySelector('#kt_coming_soon_counter_minutes');
+            counterSeconds = document.querySelector('#kt_coming_soon_counter_seconds');
+
+            handleForm();
+            initCounter();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTSignupComingSoon.init();
+});

assets/js/custom/authentication/sign-up/free-trial.js

@@ -0,0 +1,163 @@
+"use strict";
+
+// Class Definition
+var KTSignupFreeTrial = function() {
+    // Elements
+    var form;
+    var submitButton;
+    var validator;
+    var passwordMeter;
+
+    // Handle form
+    var handleForm = function(e) {
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {					 
+					'email': {
+                        validators: {
+							notEmpty: {
+								message: 'Email address is required'
+							},
+                            emailAddress: {
+								message: 'The value is not a valid email address'
+							}
+						}
+					},
+                    '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="password"]').value;
+                                },
+                                message: 'The password and its confirm are not the same'
+                            }
+                        }
+                    },
+                    'toc': {
+                        validators: {
+                            notEmpty: {
+                                message: 'You must accept the terms and conditions'
+                            }
+                        }
+                    }
+                },
+                plugins: {
+					trigger: new FormValidation.plugins.Trigger({
+                        event: {
+                            password: false
+                        }  
+                    }),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }			 
+			}
+		);
+
+        submitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            validator.revalidateField('password');
+
+            validator.validate().then(function(status) {
+		        if (status == 'Valid') {
+                    // Show loading indication
+                    submitButton.setAttribute('data-kt-indicator', 'on');
+
+                    // Disable button to avoid multiple click 
+                    submitButton.disabled = true;
+
+                    // Simulate ajax request
+                    setTimeout(function() {
+                        // Hide loading indication
+                        submitButton.removeAttribute('data-kt-indicator');
+
+                        // Enable button
+                        submitButton.disabled = false;
+
+                        // Show message popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        Swal.fire({
+                            text: "You have successfully registered!",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        }).then(function (result) {
+                            if (result.isConfirmed) { 
+                                form.reset();  // reset form                    
+                                passwordMeter.reset();  // reset password meter
+                                //form.submit();
+                            }
+                        });
+                    }, 1500);   						
+                } else {
+                    // Show error popup. 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"
+                        }
+                    });
+                }
+		    });
+        });
+
+        form.querySelector('input[name="password"]').addEventListener('input', function() {
+            if (this.value.length > 0) {
+                validator.updateFieldStatus('password', 'NotValidated');
+            }
+        });
+    }
+
+    // Password input validation
+    var validatePassword = function() {
+        return  (passwordMeter.getScore() === 100);
+    }
+
+    // Public functions
+    return {
+        // Initialization
+        init: function() {
+            form = document.querySelector('#kt_free_trial_form');
+            submitButton = document.querySelector('#kt_free_trial_submit');
+            passwordMeter = KTPasswordMeter.getInstance(form.querySelector('[data-kt-password-meter="true"]'));
+
+            handleForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTSignupFreeTrial.init();
+});
+
+
+ 

assets/js/custom/authentication/sign-up/general.js

@@ -0,0 +1,177 @@
+"use strict";
+
+// Class definition
+var KTSignupGeneral = function() {
+    // Elements
+    var form;
+    var submitButton;
+    var validator;
+    var passwordMeter;
+
+    // Handle form
+    var handleForm  = function(e) {
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					'first-name': {
+						validators: {
+							notEmpty: {
+								message: 'First Name is required'
+							}
+						}
+                    },
+                    'last-name': {
+						validators: {
+							notEmpty: {
+								message: 'Last Name is required'
+							}
+						}
+					},
+					'email': {
+                        validators: {
+							notEmpty: {
+								message: 'Email address is required'
+							},
+                            emailAddress: {
+								message: 'The value is not a valid email address'
+							}
+						}
+					},
+                    '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="password"]').value;
+                                },
+                                message: 'The password and its confirm are not the same'
+                            }
+                        }
+                    },
+                    'toc': {
+                        validators: {
+                            notEmpty: {
+                                message: 'You must accept the terms and conditions'
+                            }
+                        }
+                    }
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger({
+                        event: {
+                            password: false
+                        }  
+                    }),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+				}
+			}
+		);
+
+        // Handle form submit
+        submitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            validator.revalidateField('password');
+
+            validator.validate().then(function(status) {
+		        if (status == 'Valid') {
+                    // Show loading indication
+                    submitButton.setAttribute('data-kt-indicator', 'on');
+
+                    // Disable button to avoid multiple click 
+                    submitButton.disabled = true;
+
+                    // Simulate ajax request
+                    setTimeout(function() {
+                        // Hide loading indication
+                        submitButton.removeAttribute('data-kt-indicator');
+
+                        // Enable button
+                        submitButton.disabled = false;
+
+                        // Show message popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        Swal.fire({
+                            text: "You have successfully reset your password!",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        }).then(function (result) {
+                            if (result.isConfirmed) { 
+                                form.reset();  // reset form                    
+                                passwordMeter.reset();  // reset password meter
+                                //form.submit();
+                            }
+                        });
+                    }, 1500);   						
+                } else {
+                    // Show error popup. 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"
+                        }
+                    });
+                }
+		    });
+        });
+
+        // Handle password input
+        form.querySelector('input[name="password"]').addEventListener('input', function() {
+            if (this.value.length > 0) {
+                validator.updateFieldStatus('password', 'NotValidated');
+            }
+        });
+    }
+
+    // Password input validation
+    var validatePassword = function() {
+        return  (passwordMeter.getScore() === 100);
+    }
+
+    // Public functions
+    return {
+        // Initialization
+        init: function() {
+            // Elements
+            form = document.querySelector('#kt_sign_up_form');
+            submitButton = document.querySelector('#kt_sign_up_submit');
+            passwordMeter = KTPasswordMeter.getInstance(form.querySelector('[data-kt-password-meter="true"]'));
+
+            handleForm ();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTSignupGeneral.init();
+});

assets/js/custom/documentation/base/indicator.js

@@ -0,0 +1,68 @@
+"use strict";
+
+// Class definition
+var KTBaseIndicatorDemos = function() {
+    // Private functions
+    var _example1 = function(element) {
+        // Element to indecate
+        var button = document.querySelector("#kt_button_1");
+
+        // Handle button click event
+        button.addEventListener("click", function() {
+            // Activate indicator 
+            button.setAttribute("data-kt-indicator", "on");
+
+            // Disable indicator after 3 seconds
+            setTimeout(function() {
+                button.removeAttribute("data-kt-indicator");
+            }, 3000);
+        });
+    }
+
+    var _example2 = function(element) {
+        // Element to indecate
+        var button = document.querySelector("#kt_button_2");
+
+        // Handle button click event
+        button.addEventListener("click", function() {
+            // Activate indicator 
+            button.setAttribute("data-kt-indicator", "on");
+
+            // Disable indicator after 3 seconds
+            setTimeout(function() {
+                button.removeAttribute("data-kt-indicator");
+            }, 3000);
+        });
+    }
+
+    var _example3 = function(element) {
+        // Element to indecate
+        var button = document.querySelector("#kt_button_3");
+
+        // Handle button click event
+        button.addEventListener("click", function() {
+            // Activate indicator 
+            button.setAttribute("data-kt-indicator", "on");
+
+            // Disable indicator after 3 seconds
+            setTimeout(function() {
+                button.removeAttribute("data-kt-indicator");
+            }, 3000);
+        });
+    }
+    
+
+    return {
+        // Public Functions
+        init: function(element) {
+            _example1();
+            _example2();
+            _example3();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTBaseIndicatorDemos.init();
+});

assets/js/custom/documentation/base/rotate.js

@@ -0,0 +1,50 @@
+"use strict";
+
+// Class definition
+var KTBaseRotateDemos = function() {
+    // Private functions
+    var _example1 = function(element) {
+        // Element to indecate
+        var button = document.querySelector("#kt_button_1");
+
+        // Handle button click event
+        button.addEventListener("click", function() {
+            button.classList.toggle("active");              
+        });
+    }
+
+    var _example2 = function(element) {
+        // Element to indecate
+        var button = document.querySelector("#kt_button_2");
+
+        // Handle button click event
+        button.addEventListener("click", function() {
+            button.classList.toggle("active");               
+        });
+    }
+
+    var _example3 = function(element) {
+        // Element to indecate
+        var button = document.querySelector("#kt_button_3");
+
+        // Handle button click event
+        button.addEventListener("click", function() {
+            button.classList.toggle("active");              
+        });
+    }
+    
+
+    return {
+        // Public Functions
+        init: function(element) {
+            _example1();
+            _example2();
+            _example3();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTBaseRotateDemos.init();
+});

assets/js/custom/documentation/base/toast.js

@@ -0,0 +1,60 @@
+"use strict";
+
+// Class definition
+const KTBaseToastDemos = function () {
+    // Private functions
+    const exampleToggle = () => {
+        // Select elements
+        const button = document.getElementById('kt_docs_toast_toggle_button');
+        const toastElement = document.getElementById('kt_docs_toast_toggle');
+
+        // Get toast instance --- more info: https://getbootstrap.com/docs/5.1/components/toasts/#getinstance
+        const toast = bootstrap.Toast.getOrCreateInstance(toastElement);
+
+        // Handle button click
+        button.addEventListener('click', e => {
+            e.preventDefault();
+
+            // Toggle toast to show --- more info: https://getbootstrap.com/docs/5.1/components/toasts/#show
+            toast.show();
+        });
+    }
+
+    const exampleStack = () => {
+        // Select elements
+        const button = document.getElementById('kt_docs_toast_stack_button');
+        const container = document.getElementById('kt_docs_toast_stack_container');
+        const targetElement = document.querySelector('[data-kt-docs-toast="stack"]'); // Use CSS class or HTML attr to avoid duplicating ids
+
+        // Remove base element markup
+        targetElement.parentNode.removeChild(targetElement);
+
+        // Handle button click
+        button.addEventListener('click', e => {
+            e.preventDefault();
+
+            // Create new toast element
+            const newToast = targetElement.cloneNode(true);
+            container.append(newToast);
+
+            // Create new toast instance --- more info: https://getbootstrap.com/docs/5.1/components/toasts/#getorcreateinstance
+            const toast = bootstrap.Toast.getOrCreateInstance(newToast);
+
+            // Toggle toast to show --- more info: https://getbootstrap.com/docs/5.1/components/toasts/#show
+            toast.show();
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleToggle();
+            exampleStack();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTBaseToastDemos.init();
+});

assets/js/custom/documentation/charts/apexcharts.js

@@ -0,0 +1,843 @@
+"use strict";
+
+// Class definition
+var KTGeneralApexCharts = function () {
+    // Shared variables
+
+    // Private functions
+    var example1 = function () {
+        var element = document.getElementById("kt_apexcharts_1");
+
+        var height = parseInt(KTUtil.css(element, 'height'));
+        var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
+        var borderColor = KTUtil.getCssVariableValue('--bs-gray-200');
+        var baseColor = KTUtil.getCssVariableValue('--bs-primary');
+        var secondaryColor = KTUtil.getCssVariableValue('--bs-gray-300');
+        var dangerColor = KTUtil.getCssVariableValue('--bs-danger');
+
+        if (!element) {
+            return;
+        }
+
+        var options = {
+            series: [{
+                name: 'Net Profit',
+                data: [44, 55, 57, 56, 61, 58, 43, 56, 65, 41, 55, 66]
+            }, {
+                name: 'Cost',
+                data: [32, 34, 52, 46, 27, 60, 41, 49, 13, 11, 44, 33]
+            }, {
+                name: 'Revenue',
+                data: [76, 85, 101, 98, 87, 105, 87, 99, 75, 82, 91, 89]
+            }],
+            chart: {
+                fontFamily: 'inherit',
+                type: 'bar',
+                height: height,
+                toolbar: {
+                    show: false
+                }
+            },
+            plotOptions: {
+                bar: {
+                    horizontal: false,
+                    columnWidth: ['40%'],
+                    endingShape: 'rounded'
+                },
+            },
+            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: labelColor,
+                        fontSize: '12px'
+                    }
+                }
+            },
+            yaxis: {
+                labels: {
+                    style: {
+                        colors: labelColor,
+                        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: [baseColor, dangerColor, secondaryColor],
+            grid: {
+                borderColor: borderColor,
+                strokeDashArray: 4,
+                yaxis: {
+                    lines: {
+                        show: true
+                    }
+                }
+            }
+        };
+
+        var chart = new ApexCharts(element, options);
+        chart.render();
+    }
+
+    var example2 = function () {
+        var element = document.getElementById("kt_apexcharts_2");
+
+        var height = parseInt(KTUtil.css(element, 'height'));
+        var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
+        var borderColor = KTUtil.getCssVariableValue('--bs-gray-200');
+        var baseColor = KTUtil.getCssVariableValue('--bs-warning');
+        var secondaryColor = KTUtil.getCssVariableValue('--bs-gray-300');
+
+        if (!element) {
+            return;
+        }
+
+        var options = {
+            series: [{
+                name: 'Net Profit',
+                data: [44, 55, 57, 56, 61, 58]
+            }, {
+                name: 'Revenue',
+                data: [76, 85, 101, 98, 87, 105]
+            }],
+            chart: {
+                fontFamily: 'inherit',
+                type: 'bar',
+                height: height,
+                toolbar: {
+                    show: false
+                }
+            },
+            plotOptions: {
+                bar: {
+                    horizontal: true,
+                    columnWidth: ['30%'],
+                    endingShape: 'rounded'
+                },
+            },
+            legend: {
+                show: false
+            },
+            dataLabels: {
+                enabled: false
+            },
+            stroke: {
+                show: true,
+                width: 2,
+                colors: ['transparent']
+            },
+            xaxis: {
+                categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+                axisBorder: {
+                    show: false,
+                },
+                axisTicks: {
+                    show: false
+                },
+                labels: {
+                    style: {
+                        colors: labelColor,
+                        fontSize: '12px'
+                    }
+                }
+            },
+            yaxis: {
+                labels: {
+                    style: {
+                        colors: labelColor,
+                        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: [baseColor, secondaryColor],
+            grid: {
+                borderColor: borderColor,
+                strokeDashArray: 4,
+                yaxis: {
+                    lines: {
+                        show: true
+                    }
+                }
+            }
+        };
+
+        var chart = new ApexCharts(element, options);
+        chart.render();
+    }
+
+    var example3 = function () {
+        var element = document.getElementById("kt_apexcharts_3");
+
+        var height = parseInt(KTUtil.css(element, 'height'));
+        var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
+        var borderColor = KTUtil.getCssVariableValue('--bs-gray-200');
+        var baseColor = KTUtil.getCssVariableValue('--bs-info');
+        var lightColor = KTUtil.getCssVariableValue('--bs-light-info');
+
+        if (!element) {
+            return;
+        }
+
+        var options = {
+            series: [{
+                name: 'Net Profit',
+                data: [30, 40, 40, 90, 90, 70, 70]
+            }],
+            chart: {
+                fontFamily: 'inherit',
+                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: [baseColor]
+            },
+            xaxis: {
+                categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
+                axisBorder: {
+                    show: false,
+                },
+                axisTicks: {
+                    show: false
+                },
+                labels: {
+                    style: {
+                        colors: labelColor,
+                        fontSize: '12px'
+                    }
+                },
+                crosshairs: {
+                    position: 'front',
+                    stroke: {
+                        color: baseColor,
+                        width: 1,
+                        dashArray: 3
+                    }
+                },
+                tooltip: {
+                    enabled: true,
+                    formatter: undefined,
+                    offsetY: 0,
+                    style: {
+                        fontSize: '12px'
+                    }
+                }
+            },
+            yaxis: {
+                labels: {
+                    style: {
+                        colors: labelColor,
+                        fontSize: '12px'
+                    }
+                }
+            },
+            states: {
+                normal: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                hover: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                active: {
+                    allowMultipleDataPointsSelection: false,
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                }
+            },
+            tooltip: {
+                style: {
+                    fontSize: '12px'
+                },
+                y: {
+                    formatter: function (val) {
+                        return "$" + val + " thousands"
+                    }
+                }
+            },
+            colors: [lightColor],
+            grid: {
+                borderColor: borderColor,
+                strokeDashArray: 4,
+                yaxis: {
+                    lines: {
+                        show: true
+                    }
+                }
+            },
+            markers: {
+                strokeColor: baseColor,
+                strokeWidth: 3
+            }
+        };
+
+        var chart = new ApexCharts(element, options);
+        chart.render();
+    }
+
+    var example4 = function () {
+        var element = document.getElementById("kt_apexcharts_4");
+
+        var height = parseInt(KTUtil.css(element, 'height'));
+        var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
+        var borderColor = KTUtil.getCssVariableValue('--bs-gray-200');
+
+        var baseColor = KTUtil.getCssVariableValue('--bs-success');
+        var baseLightColor = KTUtil.getCssVariableValue('--bs-light-success');
+        var secondaryColor = KTUtil.getCssVariableValue('--bs-warning');
+        var secondaryLightColor = KTUtil.getCssVariableValue('--bs-light-warning');
+
+        if (!element) {
+            return;
+        }
+
+        var options = {
+            series: [{
+                name: 'Net Profit',
+                data: [60, 50, 80, 40, 100, 60]
+            }, {
+                name: 'Revenue',
+                data: [70, 60, 110, 40, 50, 70]
+            }],
+            chart: {
+                fontFamily: 'inherit',
+                type: 'area',
+                height: height,
+                toolbar: {
+                    show: false
+                }
+            },
+            plotOptions: {},
+            legend: {
+                show: false
+            },
+            dataLabels: {
+                enabled: false
+            },
+            fill: {
+                type: 'solid',
+                opacity: 1
+            },
+            stroke: {
+                curve: 'smooth'
+            },
+            xaxis: {
+                categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+                axisBorder: {
+                    show: false,
+                },
+                axisTicks: {
+                    show: false
+                },
+                labels: {
+                    style: {
+                        colors: labelColor,
+                        fontSize: '12px'
+                    }
+                },
+                crosshairs: {
+                    position: 'front',
+                    stroke: {
+                        color: labelColor,
+                        width: 1,
+                        dashArray: 3
+                    }
+                },
+                tooltip: {
+                    enabled: true,
+                    formatter: undefined,
+                    offsetY: 0,
+                    style: {
+                        fontSize: '12px'
+                    }
+                }
+            },
+            yaxis: {
+                labels: {
+                    style: {
+                        colors: labelColor,
+                        fontSize: '12px'
+                    }
+                }
+            },
+            states: {
+                normal: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                hover: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                active: {
+                    allowMultipleDataPointsSelection: false,
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                }
+            },
+            tooltip: {
+                style: {
+                    fontSize: '12px'
+                },
+                y: {
+                    formatter: function (val) {
+                        return "$" + val + " thousands"
+                    }
+                }
+            },
+            colors: [baseColor, secondaryColor],
+            grid: {
+                borderColor: borderColor,
+                strokeDashArray: 4,
+                yaxis: {
+                    lines: {
+                        show: true
+                    }
+                }
+            },
+            markers: {
+                colors: [baseLightColor, secondaryLightColor],
+                strokeColor: [baseLightColor, secondaryLightColor],
+                strokeWidth: 3
+            }
+        };
+
+        var chart = new ApexCharts(element, options);
+        chart.render();
+    }
+
+    var example5 = function () {
+        var element = document.getElementById("kt_apexcharts_5");
+
+        var height = parseInt(KTUtil.css(element, 'height'));
+        var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
+        var borderColor = KTUtil.getCssVariableValue('--bs-gray-200');
+
+        var baseColor = KTUtil.getCssVariableValue('--bs-primary');
+        var baseLightColor = KTUtil.getCssVariableValue('--bs-light-primary');
+        var secondaryColor = KTUtil.getCssVariableValue('--bs-info');
+
+        if (!element) {
+            return;
+        }
+
+        var options = {
+            series: [{
+                name: 'Net Profit',
+                type: 'bar',
+                stacked: true,
+                data: [40, 50, 65, 70, 50, 30]
+            }, {
+                name: 'Revenue',
+                type: 'bar',
+                stacked: true,
+                data: [20, 20, 25, 30, 30, 20]
+            }, {
+                name: 'Expenses',
+                type: 'area',
+                data: [50, 80, 60, 90, 50, 70]
+            }],
+            chart: {
+                fontFamily: 'inherit',
+                stacked: true,
+                height: height,
+                toolbar: {
+                    show: false
+                }
+            },
+            plotOptions: {
+                bar: {
+                    stacked: true,
+                    horizontal: false,
+                    endingShape: 'rounded',
+                    columnWidth: ['12%']
+                },
+            },
+            legend: {
+                show: false
+            },
+            dataLabels: {
+                enabled: false
+            },
+            stroke: {
+                curve: 'smooth',
+                show: true,
+                width: 2,
+                colors: ['transparent']
+            },
+            xaxis: {
+                categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+                axisBorder: {
+                    show: false,
+                },
+                axisTicks: {
+                    show: false
+                },
+                labels: {
+                    style: {
+                        colors: labelColor,
+                        fontSize: '12px'
+                    }
+                }
+            },
+            yaxis: {
+                max: 120,
+                labels: {
+                    style: {
+                        colors: labelColor,
+                        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: [baseColor, secondaryColor, baseLightColor],
+            grid: {
+                borderColor: borderColor,
+                strokeDashArray: 4,
+                yaxis: {
+                    lines: {
+                        show: true
+                    }
+                },
+                padding: {
+                    top: 0,
+                    right: 0,
+                    bottom: 0,
+                    left: 0
+                }
+            }
+        };
+
+        var chart = new ApexCharts(element, options);
+        chart.render();
+    }
+
+    var example6 = function () {
+        var element = document.getElementById("kt_apexcharts_6");
+
+        var height = parseInt(KTUtil.css(element, 'height'));
+
+        var baseColor = KTUtil.getCssVariableValue('--bs-primary');
+        var baseLightColor = KTUtil.getCssVariableValue('--bs-success');
+        var secondaryColor = KTUtil.getCssVariableValue('--bs-info');
+
+        if (!element) {
+            return;
+        }
+
+        var options = {
+            series: [
+                {
+                    name: 'Bob',
+                    data: [
+                        {
+                            x: 'Design',
+                            y: [
+                                new Date('2019-03-05').getTime(),
+                                new Date('2019-03-08').getTime()
+                            ]
+                        },
+                        {
+                            x: 'Code',
+                            y: [
+                                new Date('2019-03-02').getTime(),
+                                new Date('2019-03-05').getTime()
+                            ]
+                        },
+                        {
+                            x: 'Code',
+                            y: [
+                                new Date('2019-03-05').getTime(),
+                                new Date('2019-03-07').getTime()
+                            ]
+                        },
+                        {
+                            x: 'Test',
+                            y: [
+                                new Date('2019-03-03').getTime(),
+                                new Date('2019-03-09').getTime()
+                            ]
+                        },
+                        {
+                            x: 'Test',
+                            y: [
+                                new Date('2019-03-08').getTime(),
+                                new Date('2019-03-11').getTime()
+                            ]
+                        },
+                        {
+                            x: 'Validation',
+                            y: [
+                                new Date('2019-03-11').getTime(),
+                                new Date('2019-03-16').getTime()
+                            ]
+                        },
+                        {
+                            x: 'Design',
+                            y: [
+                                new Date('2019-03-01').getTime(),
+                                new Date('2019-03-03').getTime()
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Joe',
+                    data: [
+                        {
+                            x: 'Design',
+                            y: [
+                                new Date('2019-03-02').getTime(),
+                                new Date('2019-03-05').getTime()
+                            ]
+                        },
+                        {
+                            x: 'Test',
+                            y: [
+                                new Date('2019-03-06').getTime(),
+                                new Date('2019-03-16').getTime()
+                            ]
+                        },
+                        {
+                            x: 'Code',
+                            y: [
+                                new Date('2019-03-03').getTime(),
+                                new Date('2019-03-07').getTime()
+                            ]
+                        },
+                        {
+                            x: 'Deployment',
+                            y: [
+                                new Date('2019-03-20').getTime(),
+                                new Date('2019-03-22').getTime()
+                            ]
+                        },
+                        {
+                            x: 'Design',
+                            y: [
+                                new Date('2019-03-10').getTime(),
+                                new Date('2019-03-16').getTime()
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Dan',
+                    data: [
+                        {
+                            x: 'Code',
+                            y: [
+                                new Date('2019-03-10').getTime(),
+                                new Date('2019-03-17').getTime()
+                            ]
+                        },
+                        {
+                            x: 'Validation',
+                            y: [
+                                new Date('2019-03-05').getTime(),
+                                new Date('2019-03-09').getTime()
+                            ]
+                        },
+                    ]
+                }
+            ],
+            chart: {
+                type: 'rangeBar',
+                fontFamily: 'inherit',
+                height: height,
+                toolbar: {
+                    show: false
+                }
+            },
+            colors: [baseColor, secondaryColor, baseLightColor],
+            plotOptions: {
+                bar: {
+                    horizontal: true,
+                    barHeight: '80%'
+                }
+            },
+            xaxis: {
+                type: 'datetime'
+            },
+            stroke: {
+                width: 1
+            },
+            fill: {
+                type: 'solid',
+                opacity: 1
+            },
+            legend: {
+                position: 'top',
+                horizontalAlign: 'left'
+            }
+        };
+
+        var chart = new ApexCharts(element, options);
+        chart.render();
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            example1();
+            example2();
+            example3();
+            example4();
+            example5();
+            example6();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTGeneralApexCharts.init();
+});

assets/js/custom/documentation/charts/chartjs.js

@@ -0,0 +1,333 @@
+"use strict";
+
+// Class definition
+var KTGeneralChartJS = function () {
+    // Randomizer function
+    function getRandom(min = 1, max = 100) {
+        return Math.floor(Math.random() * (max - min) + min);
+    }
+
+    function generateRandomData(min = 1, max = 100, count = 10) {
+        var arr = [];
+        for (var i = 0; i < count; i++) {
+            arr.push(getRandom(min, max));
+        }
+        return arr;
+    }
+
+    // Private functions
+    var example1 = function () {
+        // Define chart element
+        var ctx = document.getElementById('kt_chartjs_1');
+
+        // Define colors
+        var primaryColor = KTUtil.getCssVariableValue('--bs-primary');
+        var dangerColor = KTUtil.getCssVariableValue('--bs-danger');
+        var successColor = KTUtil.getCssVariableValue('--bs-success');
+
+        // Define fonts
+        var fontFamily = KTUtil.getCssVariableValue('--bs-font-sans-serif');
+
+        // Chart labels
+        const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
+        // Chart data
+        const data = {
+            labels: labels,
+            datasets: [
+                {
+                    label: 'Dataset 1',
+                    data: generateRandomData(1, 100, 12),
+                    backgroundColor: primaryColor,
+                    stack: 'Stack 0',
+                },
+                {
+                    label: 'Dataset 2',
+                    data: generateRandomData(1, 100, 12),
+                    backgroundColor: dangerColor,
+                    stack: 'Stack 1',
+                },
+                {
+                    label: 'Dataset 3',
+                    data: generateRandomData(1, 100, 12),
+                    backgroundColor: successColor,
+                    stack: 'Stack 2',
+                },
+            ]
+        };
+
+        // Chart config
+        const config = {
+            type: 'bar',
+            data: data,
+            options: {
+                plugins: {
+                    title: {
+                        display: false,
+                    }
+                },
+                responsive: true,
+                interaction: {
+                    intersect: false,
+                },
+                scales: {
+                    x: {
+                        stacked: true,
+                    },
+                    y: {
+                        stacked: true
+                    }
+                }
+            }
+        };
+
+        // Init ChartJS -- for more info, please visit: https://www.chartjs.org/docs/latest/
+        var myChart = new Chart(ctx, config);
+    }
+
+    var example2 = function () {
+        // Define chart element
+        var ctx = document.getElementById('kt_chartjs_2');
+
+        // Define colors
+        var primaryColor = KTUtil.getCssVariableValue('--bs-primary');
+        var dangerColor = KTUtil.getCssVariableValue('--bs-danger');
+        var successColor = KTUtil.getCssVariableValue('--bs-success');
+
+        // Define fonts
+        var fontFamily = KTUtil.getCssVariableValue('--bs-font-sans-serif');
+
+        // Chart labels
+        const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+
+        // Chart data
+        const data = {
+            labels: labels,
+            datasets: [
+                {
+                    label: 'Dataset 1',
+                    data: generateRandomData(1, 50, 7),
+                    borderColor: primaryColor,
+                    backgroundColor: 'transparent'
+                },
+                {
+                    label: 'Dataset 2',
+                    data: generateRandomData(1, 50, 7),
+                    borderColor: dangerColor,
+                    backgroundColor: 'transparent'
+                },
+            ]
+        };
+
+        // Chart config
+        const config = {
+            type: 'line',
+            data: data,
+            options: {
+                plugins: {
+                    title: {
+                        display: false,
+                    }
+                },
+                responsive: true,
+            }
+        };
+
+        // Init ChartJS -- for more info, please visit: https://www.chartjs.org/docs/latest/
+        var myChart = new Chart(ctx, config);
+    }
+
+    var example3 = function () {
+        // Define chart element
+        var ctx = document.getElementById('kt_chartjs_3');
+
+        // Define colors
+        var primaryColor = KTUtil.getCssVariableValue('--bs-primary');
+        var dangerColor = KTUtil.getCssVariableValue('--bs-danger');
+        var successColor = KTUtil.getCssVariableValue('--bs-success');
+        var warningColor = KTUtil.getCssVariableValue('--bs-warning');
+        var infoColor = KTUtil.getCssVariableValue('--bs-info');
+
+        // Chart labels
+        const labels = ['January', 'February', 'March', 'April', 'May'];
+
+        // Chart data
+        const data = {
+            labels: labels,
+            datasets: [
+                {
+                    label: 'Dataset 1',
+                    data: generateRandomData(1, 100, 5),
+                    backgroundColor: [primaryColor, dangerColor, successColor, warningColor, infoColor]
+                },
+            ]
+        };
+
+        // Chart config
+        const config = {
+            type: 'pie',
+            data: data,
+            options: {
+                plugins: {
+                    title: {
+                        display: false,
+                    }
+                },
+                responsive: true,
+            }
+        };
+
+        // Init ChartJS -- for more info, please visit: https://www.chartjs.org/docs/latest/
+        var myChart = new Chart(ctx, config);
+    }
+
+    var example4 = function () {
+        // Define chart element
+        var ctx = document.getElementById('kt_chartjs_4');
+
+        // Define colors
+        var primaryColor = KTUtil.getCssVariableValue('--bs-primary');
+        var dangerColor = KTUtil.getCssVariableValue('--bs-danger');
+        var dangerLightColor = KTUtil.getCssVariableValue('--bs-light-danger');
+
+        // Define fonts
+        var fontFamily = KTUtil.getCssVariableValue('--bs-font-sans-serif');
+
+        // Chart labels
+        const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
+        // Chart data
+        const data = {
+            labels: labels,
+            datasets: [
+                {
+                    label: 'Dataset 1',
+                    data: generateRandomData(50, 100, 12),
+                    borderColor: primaryColor,
+                    backgroundColor: 'transparent',
+                    stack: 'combined'
+                },
+                {
+                    label: 'Dataset 2',
+                    data: generateRandomData(1, 60, 12),
+                    backgroundColor: dangerColor,
+                    borderColor: dangerColor,
+                    stack: 'combined',
+                    type: 'bar'
+                },
+                
+            ]
+        };
+
+        // Chart config
+        const config = {
+            type: 'line',
+            data: data,
+            options: {
+                plugins: {
+                    title: {
+                        display: false,
+                    }
+                },
+                responsive: true,
+                interaction: {
+                    intersect: false,
+                },
+                scales: {
+                    y: {
+                        stacked: true
+                    }
+                }
+            },
+            defaults: {
+                font: {
+                    family: 'inherit',
+                }
+            }
+        };
+
+        // Init ChartJS -- for more info, please visit: https://www.chartjs.org/docs/latest/
+        var myChart = new Chart(ctx, config);
+    }
+
+    var example5 = function () {
+        // Define chart element
+        var ctx = document.getElementById('kt_chartjs_5');
+
+        // Define colors
+        var infoColor = KTUtil.getCssVariableValue('--bs-info');
+        var infoLightColor = KTUtil.getCssVariableValue('--bs-light-info');
+        var warningColor = KTUtil.getCssVariableValue('--bs-warning');
+        var warningLightColor = KTUtil.getCssVariableValue('--bs-light-warning');
+        var primaryColor = KTUtil.getCssVariableValue('--bs-primary');
+        var primaryLightColor = KTUtil.getCssVariableValue('--bs-light-primary');
+
+        // Define fonts
+        var fontFamily = KTUtil.getCssVariableValue('--bs-font-sans-serif');
+
+        // Chart labels
+        const labels = ['January', 'February', 'March', 'April', 'May', 'June'];
+
+        // Chart data
+        const data = {
+            labels: labels,
+            datasets: [
+                {
+                    label: 'Dataset 1',
+                    data: generateRandomData(20, 80, 6),
+                    borderColor: infoColor,
+                    backgroundColor: infoLightColor,
+                },
+                {
+                    label: 'Dataset 2',
+                    data: generateRandomData(10, 60, 6),
+                    backgroundColor: warningLightColor,
+                    borderColor: warningColor,
+                },
+                {
+                    label: 'Dataset 3',
+                    data: generateRandomData(0, 80, 6),
+                    backgroundColor: primaryLightColor,
+                    borderColor: primaryColor,
+                },                
+            ]
+        };
+
+        // Chart config
+        const config = {
+            type: 'radar',
+            data: data,
+            options: {
+                plugins: {
+                    title: {
+                        display: false,
+                    }
+                },
+                responsive: true,
+            }
+        };
+
+        // Init ChartJS -- for more info, please visit: https://www.chartjs.org/docs/latest/
+        var myChart = new Chart(ctx, config);
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            // Global font settings: https://www.chartjs.org/docs/latest/general/fonts.html
+            Chart.defaults.font.size = 13;
+            Chart.defaults.font.family = KTUtil.getCssVariableValue('--bs-font-sans-serif');
+
+            example1();
+            example2();
+            example3();
+            example4();
+            example5();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTGeneralChartJS.init();
+});

assets/js/custom/documentation/charts/flotcharts/axis.js

@@ -0,0 +1,179 @@
+"use strict";
+
+// Class definition
+var KTFlotDemoAxis = function () {
+    // Private functions
+    var exampleAxis = function () {
+        function randValue() {
+			return (Math.floor(Math.random() * (1 + 40 - 20))) + 20;
+		}
+		var pageviews = [
+			[1, randValue()],
+			[2, randValue()],
+			[3, 2 + randValue()],
+			[4, 3 + randValue()],
+			[5, 5 + randValue()],
+			[6, 10 + randValue()],
+			[7, 15 + randValue()],
+			[8, 20 + randValue()],
+			[9, 25 + randValue()],
+			[10, 30 + randValue()],
+			[11, 35 + randValue()],
+			[12, 25 + randValue()],
+			[13, 15 + randValue()],
+			[14, 20 + randValue()],
+			[15, 45 + randValue()],
+			[16, 50 + randValue()],
+			[17, 65 + randValue()],
+			[18, 70 + randValue()],
+			[19, 85 + randValue()],
+			[20, 80 + randValue()],
+			[21, 75 + randValue()],
+			[22, 80 + randValue()],
+			[23, 75 + randValue()],
+			[24, 70 + randValue()],
+			[25, 65 + randValue()],
+			[26, 75 + randValue()],
+			[27, 80 + randValue()],
+			[28, 85 + randValue()],
+			[29, 90 + randValue()],
+			[30, 95 + randValue()]
+		];
+		var visitors = [
+			[1, randValue() - 5],
+			[2, randValue() - 5],
+			[3, randValue() - 5],
+			[4, 6 + randValue()],
+			[5, 5 + randValue()],
+			[6, 20 + randValue()],
+			[7, 25 + randValue()],
+			[8, 36 + randValue()],
+			[9, 26 + randValue()],
+			[10, 38 + randValue()],
+			[11, 39 + randValue()],
+			[12, 50 + randValue()],
+			[13, 51 + randValue()],
+			[14, 12 + randValue()],
+			[15, 13 + randValue()],
+			[16, 14 + randValue()],
+			[17, 15 + randValue()],
+			[18, 15 + randValue()],
+			[19, 16 + randValue()],
+			[20, 17 + randValue()],
+			[21, 18 + randValue()],
+			[22, 19 + randValue()],
+			[23, 20 + randValue()],
+			[24, 21 + randValue()],
+			[25, 14 + randValue()],
+			[26, 24 + randValue()],
+			[27, 25 + randValue()],
+			[28, 26 + randValue()],
+			[29, 27 + randValue()],
+			[30, 31 + randValue()]
+		];
+
+		var plot = $.plot($("#kt_docs_flot_axis"), [{
+			data: pageviews,
+			label: "Unique Visits",
+			lines: {
+				lineWidth: 1,
+			},
+			shadowSize: 0
+
+		}, {
+			data: visitors,
+			label: "Page Views",
+			lines: {
+				lineWidth: 1,
+			},
+			shadowSize: 0
+		}], {
+			series: {
+				lines: {
+					show: true,
+					lineWidth: 2,
+					fill: true,
+					fillColor: {
+						colors: [{
+							opacity: 0.05
+						}, {
+							opacity: 0.01
+						}]
+					}
+				},
+				points: {
+					show: true,
+					radius: 3,
+					lineWidth: 1
+				},
+				shadowSize: 2
+			},
+			grid: {
+				hoverable: true,
+				clickable: true,
+				tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
+				borderColor: KTUtil.getCssVariableValue('--bs-light-dark'),
+				borderWidth: 1
+			},
+			colors: [KTUtil.getCssVariableValue('--bs-active-primary'), KTUtil.getCssVariableValue('--bs-active-danger')],
+			xaxis: {
+				ticks: 11,
+				tickDecimals: 0,
+				tickColor: KTUtil.getCssVariableValue('--bs-active-dark'),
+			},
+			yaxis: {
+				ticks: 11,
+				tickDecimals: 0,
+				tickColor: KTUtil.getCssVariableValue('--bs-active-dark'),
+			}
+		});
+
+		function showTooltip(x, y, contents) {
+			$('<div id="tooltip">' + contents + '</div>').css({
+				position: 'absolute',
+				display: 'none',
+				top: y + 5,
+				left: x + 15,
+				border: '1px solid ' + KTUtil.getCssVariableValue('--bs-light-dark'),
+				padding: '4px',
+				color:  + KTUtil.getCssVariableValue('--bs-active-dark'),
+				'border-radius': '3px',
+				'background-color':  + KTUtil.getCssVariableValue('--bs-light-dark'),
+				opacity: 0.80
+			}).appendTo("body").fadeIn(200);
+		}
+
+		var previousPoint = null;
+		$("#chart_2").bind("plothover", function(event, pos, item) {
+			$("#x").text(pos.x.toFixed(2));
+			$("#y").text(pos.y.toFixed(2));
+
+			if (item) {
+				if (previousPoint != item.dataIndex) {
+					previousPoint = item.dataIndex;
+
+					$("#tooltip").remove();
+					var x = item.datapoint[0].toFixed(2),
+						y = item.datapoint[1].toFixed(2);
+
+					showTooltip(item.pageX, item.pageY, item.series.label + " of " + x + " = " + y);
+				}
+			} else {
+				$("#tooltip").remove();
+				previousPoint = null;
+			}
+		});
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleAxis();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFlotDemoAxis.init();
+});

assets/js/custom/documentation/charts/flotcharts/bar.js

@@ -0,0 +1,56 @@
+"use strict";
+
+// Class definition
+var KTFlotDemoBar = function () {
+    // Private functions
+    var exampleBar = function () {
+        // horizontal bar chart:
+		var data1 = [
+			[10, 10],
+			[20, 20],
+			[30, 30],
+			[40, 40],
+			[50, 50],
+            [60, 60],
+            [70, 70],
+            [80, 80],
+            [90, 90],
+            [100, 100],
+		];
+
+		var options = {
+			colors: [KTUtil.getCssVariableValue('--bs-active-primary')],
+			series: {
+				bars: {
+					show: true
+				}
+			},
+			bars: {
+				horizontal: true,
+				barWidth: 6,
+				lineWidth: 0, // in pixels
+				shadowSize: 0,
+				align: 'left'
+			},
+			grid: {
+				tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
+				borderColor: KTUtil.getCssVariableValue('--bs-light-dark'),
+				borderWidth: 1
+			}
+		};
+
+		$.plot($("#kt_docs_flot_bar"), [data1], options);
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleBar();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFlotDemoBar.init();
+});

assets/js/custom/documentation/charts/flotcharts/basic.js

@@ -0,0 +1,109 @@
+"use strict";
+
+// Class definition
+var KTFlotDemoBasic = function () {
+    // Private functions
+    var exampleBasic = function () {
+        var data = [];
+        var totalPoints = 250;
+
+        // random data generator for plot charts
+
+        function getRandomData() {
+            if (data.length > 0) data = data.slice(1);
+            // do a random walk
+            while (data.length < totalPoints) {
+                var prev = data.length > 0 ? data[data.length - 1] : 50;
+                var y = prev + Math.random() * 10 - 5;
+                if (y < 0) y = 0;
+                if (y > 100) y = 100;
+                data.push(y);
+            }
+            // zip the generated y values with the x values
+            var res = [];
+            for (var i = 0; i < data.length; ++i) {
+                res.push([i, data[i]]);
+            }
+
+            return res;
+        }
+
+        var d1 = [];
+        for (var i = 0; i < Math.PI * 2; i += 0.25)
+            d1.push([i, Math.sin(i)]);
+
+        var d2 = [];
+        for (var i = 0; i < Math.PI * 2; i += 0.25)
+            d2.push([i, Math.cos(i)]);
+
+        var d3 = [];
+        for (var i = 0; i < Math.PI * 2; i += 0.1)
+            d3.push([i, Math.tan(i)]);
+
+        $.plot($("#kt_docs_flot_basic"), [{
+            label: "sin(x)",
+            data: d1,
+            lines: {
+                lineWidth: 1,
+            },
+            shadowSize: 0
+        }, {
+            label: "cos(x)",
+            data: d2,
+            lines: {
+                lineWidth: 1,
+            },
+            shadowSize: 0
+        }, {
+            label: "tan(x)",
+            data: d3,
+            lines: {
+                lineWidth: 1,
+            },
+            shadowSize: 0
+        }], {
+            colors: [KTUtil.getCssVariableValue('--bs-active-success'), KTUtil.getCssVariableValue('--bs-active-primary'), KTUtil.getCssVariableValue('--bs-active-danger')],
+            series: {
+                lines: {
+                    show: true,
+                },
+                points: {
+                    show: true,
+                    fill: true,
+                    radius: 3,
+                    lineWidth: 1
+                }
+            },
+            xaxis: {
+                tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
+                ticks: [0, [Math.PI / 2, "\u03c0/2"],
+                    [Math.PI, "\u03c0"],
+                    [Math.PI * 3 / 2, "3\u03c0/2"],
+                    [Math.PI * 2, "2\u03c0"]
+                ]
+            },
+            yaxis: {
+                tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
+                ticks: 10,
+                min: -2,
+                max: 2
+            },
+            grid: {
+                borderColor: KTUtil.getCssVariableValue('--bs-light-dark'),
+                borderWidth: 1
+            }
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleBasic();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFlotDemoBasic.init();
+});

assets/js/custom/documentation/charts/flotcharts/dynamic.js

@@ -0,0 +1,90 @@
+"use strict";
+
+// Class definition
+var KTFlotDemoDynamic = function () {
+    // Private functions
+    var exampleDynamic = function () {
+        var data = [];
+		var totalPoints = 250;
+
+		// random data generator for plot charts
+
+		function getRandomData() {
+			if (data.length > 0) data = data.slice(1);
+			// do a random walk
+			while (data.length < totalPoints) {
+				var prev = data.length > 0 ? data[data.length - 1] : 50;
+				var y = prev + Math.random() * 10 - 5;
+				if (y < 0) y = 0;
+				if (y > 100) y = 100;
+				data.push(y);
+			}
+			// zip the generated y values with the x values
+			var res = [];
+			for (var i = 0; i < data.length; ++i) {
+				res.push([i, data[i]]);
+			}
+
+			return res;
+		}
+
+		//server load
+		var options = {
+			colors: [KTUtil.getCssVariableValue('--bs-active-danger'), KTUtil.getCssVariableValue('--bs-active-primary')],
+			series: {
+				shadowSize: 1
+			},
+			lines: {
+				show: true,
+				lineWidth: 0.5,
+				fill: true,
+				fillColor: {
+					colors: [{
+						opacity: 0.1
+					}, {
+						opacity: 1
+					}]
+				}
+			},
+			yaxis: {
+				min: 0,
+				max: 100,
+				tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
+				tickFormatter: function(v) {
+					return v + "%";
+				}
+			},
+			xaxis: {
+				show: false,
+			},
+			colors: [KTUtil.getCssVariableValue('--bs-active-primary')],
+			grid: {
+				tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
+				borderWidth: 0,
+			}
+		};
+
+		var updateInterval = 30;
+		var plot = $.plot($("#kt_docs_flot_dynamic"), [getRandomData()], options);
+
+		function update() {
+			plot.setData([getRandomData()]);
+			plot.draw();
+			setTimeout(update, updateInterval);
+		}
+
+		update();
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleDynamic();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFlotDemoDynamic.init();
+});

assets/js/custom/documentation/charts/flotcharts/pie.js

@@ -0,0 +1,34 @@
+"use strict";
+
+// Class definition
+var KTFlotDemoPie = function () {
+    // Private functions
+    var examplePie = function () {
+        var data = [
+            { label: "CSS", data: 10, color: KTUtil.getCssVariableValue('--bs-active-primary') },
+            { label: "HTML5", data: 40, color: KTUtil.getCssVariableValue('--bs-active-success') },
+            { label: "PHP", data: 30, color: KTUtil.getCssVariableValue('--bs-active-danger') },
+            { label: "Angular", data: 20, color: KTUtil.getCssVariableValue('--bs-active-warning') }
+        ];
+
+        $.plot($("#kt_docs_flot_pie"), data, {
+            series: {
+                pie: {
+                    show: true
+                }
+            }
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            examplePie();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFlotDemoPie.init();
+});

assets/js/custom/documentation/charts/flotcharts/stack.js

@@ -0,0 +1,103 @@
+"use strict";
+
+// Class definition
+var KTFlotDemoStack = function () {
+    // Private functions
+    var exampleStack = function () {
+        var d1 = [];
+		for (var i = 0; i <= 10; i += 1)
+			d1.push([i, parseInt(Math.random() * 30)]);
+
+		var d2 = [];
+		for (var i = 0; i <= 10; i += 1)
+			d2.push([i, parseInt(Math.random() * 30)]);
+
+		var d3 = [];
+		for (var i = 0; i <= 10; i += 1)
+			d3.push([i, parseInt(Math.random() * 30)]);
+
+		var stack = 0,
+			bars = true,
+			lines = false,
+			steps = false;
+
+		function plotWithOptions() {
+			$.plot($("#kt_docs_flot_stack"),
+
+				[{
+					label: "sales",
+					data: d1,
+					lines: {
+						lineWidth: 1,
+					},
+					shadowSize: 0
+				}, {
+					label: "tax",
+					data: d2,
+					lines: {
+						lineWidth: 1,
+					},
+					shadowSize: 0
+				}, {
+					label: "profit",
+					data: d3,
+					lines: {
+						lineWidth: 1,
+					},
+					shadowSize: 0
+				}], {
+					colors: [KTUtil.getCssVariableValue('--bs-active-danger'), KTUtil.getCssVariableValue('--bs-active-primary')],
+					series: {
+						stack: stack,
+						lines: {
+							show: lines,
+							fill: true,
+							steps: steps,
+							lineWidth: 0, // in pixels
+						},
+						bars: {
+							show: bars,
+							barWidth: 0.5,
+							lineWidth: 0, // in pixels
+							shadowSize: 0,
+							align: 'center'
+						}
+					},
+					grid: {
+						tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
+						borderColor: KTUtil.getCssVariableValue('--bs-light-dark'),
+						borderWidth: 1
+					}
+				}
+			);
+		}
+
+		$(".stackControls input").click(function(e) {
+			e.preventDefault();
+			stack = $(this).val() == "With stacking" ? true : null;
+			plotWithOptions();
+		});
+
+		$(".graphControls input").click(function(e) {
+			e.preventDefault();
+			bars = $(this).val().indexOf("Bars") != -1;
+			lines = $(this).val().indexOf("Lines") != -1;
+			steps = $(this).val().indexOf("steps") != -1;
+			plotWithOptions();
+		});
+
+		plotWithOptions();
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleStack();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFlotDemoStack.init();
+});

assets/js/custom/documentation/charts/flotcharts/tracking.js

@@ -0,0 +1,105 @@
+"use strict";
+
+// Class definition
+var KTFlotDemoTracking = function () {
+    // Private functions
+    var exampleTracking = function () {
+        var sin = [],
+			cos = [];
+		for (var i = 0; i < 14; i += 0.1) {
+			sin.push([i, Math.sin(i)]);
+			cos.push([i, Math.cos(i)]);
+		}
+
+		var plot = $.plot($("#kt_docs_flot_tracking"), [{
+			data: sin,
+			label: "sin(x) = -0.00",
+			lines: {
+				lineWidth: 1,
+			},
+			shadowSize: 0
+		}, {
+			data: cos,
+			label: "cos(x) = -0.00",
+			lines: {
+				lineWidth: 1,
+			},
+			shadowSize: 0
+		}], {
+			colors: [KTUtil.getCssVariableValue('--bs-active-primary'), KTUtil.getCssVariableValue('--bs-active-warning')],
+			series: {
+				lines: {
+					show: true
+				}
+			},
+			crosshair: {
+				mode: "x"
+			},
+			grid: {
+				hoverable: true,
+				autoHighlight: false,
+				tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
+				borderColor: KTUtil.getCssVariableValue('--bs-light-dark'),
+				borderWidth: 1
+			},
+			yaxis: {
+				min: -1.2,
+				max: 1.2
+			}
+		});
+
+		var legends = $("#kt_docs_flot_tracking .legendLabel");
+		legends.each(function() {
+			// fix the widths so they don't jump around
+			$(this).css('width', $(this).width());
+		});
+
+		var updateLegendTimeout = null;
+		var latestPosition = null;
+
+		function updateLegend() {
+			updateLegendTimeout = null;
+
+			var pos = latestPosition;
+
+			var axes = plot.getAxes();
+			if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max || pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) return;
+
+			var i, j, dataset = plot.getData();
+			for (i = 0; i < dataset.length; ++i) {
+				var series = dataset[i];
+
+				// find the nearest points, x-wise
+				for (j = 0; j < series.data.length; ++j)
+					if (series.data[j][0] > pos.x) break;
+
+				// now interpolate
+				var y, p1 = series.data[j - 1],
+					p2 = series.data[j];
+
+				if (p1 == null) y = p2[1];
+				else if (p2 == null) y = p1[1];
+				else y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
+
+				legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
+			}
+		}
+
+		$("#kt_docs_flot_tracking").bind("plothover", function(event, pos, item) {
+			latestPosition = pos;
+			if (!updateLegendTimeout) updateLegendTimeout = setTimeout(updateLegend, 50);
+		});
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleTracking();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFlotDemoTracking.init();
+});

assets/js/custom/documentation/charts/google-charts/column.js

@@ -0,0 +1,95 @@
+"use strict";
+
+// Class definition
+var KTGoogleChartColumnDemo = function () {
+    // Private functions
+    var exampleColumn = function () {
+        // GOOGLE CHARTS INIT
+        google.load('visualization', '1', {
+            packages: ['corechart', 'bar', 'line']
+        });
+
+        google.setOnLoadCallback(function () {
+            // COLUMN CHART
+            var data = new google.visualization.DataTable();
+            data.addColumn('timeofday', 'Time of Day');
+            data.addColumn('number', 'Motivation Level');
+            data.addColumn('number', 'Energy Level');
+
+            data.addRows([
+                [{
+                    v: [8, 0, 0],
+                    f: '8 am'
+                }, 1, .25],
+                [{
+                    v: [9, 0, 0],
+                    f: '9 am'
+                }, 2, .5],
+                [{
+                    v: [10, 0, 0],
+                    f: '10 am'
+                }, 3, 1],
+                [{
+                    v: [11, 0, 0],
+                    f: '11 am'
+                }, 4, 2.25],
+                [{
+                    v: [12, 0, 0],
+                    f: '12 pm'
+                }, 5, 2.25],
+                [{
+                    v: [13, 0, 0],
+                    f: '1 pm'
+                }, 6, 3],
+                [{
+                    v: [14, 0, 0],
+                    f: '2 pm'
+                }, 7, 4],
+                [{
+                    v: [15, 0, 0],
+                    f: '3 pm'
+                }, 8, 5.25],
+                [{
+                    v: [16, 0, 0],
+                    f: '4 pm'
+                }, 9, 7.5],
+                [{
+                    v: [17, 0, 0],
+                    f: '5 pm'
+                }, 10, 10],
+            ]);
+
+            var options = {
+                title: 'Motivation and Energy Level Throughout the Day',
+                focusTarget: 'category',
+                hAxis: {
+                    title: 'Time of Day',
+                    format: 'h:mm a',
+                    viewWindow: {
+                        min: [7, 30, 0],
+                        max: [17, 30, 0]
+                    },
+                },
+                vAxis: {
+                    title: 'Rating (scale of 1-10)'
+                },
+                colors: ['#6e4ff5', '#fe3995']
+            };
+
+            var chart = new google.visualization.ColumnChart(document.getElementById('kt_docs_google_chart_column'));
+            chart.draw(data, options);
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleColumn();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTGoogleChartColumnDemo.init();
+});

assets/js/custom/documentation/charts/google-charts/line.js

@@ -0,0 +1,61 @@
+"use strict";
+
+// Class definition
+var KTGoogleChartLineDemo = function () {
+    // Private functions
+    var exampleLine = function () {
+        // GOOGLE CHARTS INIT
+        google.load('visualization', '1', {
+            packages: ['corechart', 'bar', 'line']
+        });
+
+        google.setOnLoadCallback(function () {
+            // LINE CHART
+            var data = new google.visualization.DataTable();
+            data.addColumn('number', 'Day');
+            data.addColumn('number', 'Guardians of the Galaxy');
+            data.addColumn('number', 'The Avengers');
+            data.addColumn('number', 'Transformers: Age of Extinction');
+
+            data.addRows([
+                [1, 37.8, 80.8, 41.8],
+                [2, 30.9, 69.5, 32.4],
+                [3, 25.4, 57, 25.7],
+                [4, 11.7, 18.8, 10.5],
+                [5, 11.9, 17.6, 10.4],
+                [6, 8.8, 13.6, 7.7],
+                [7, 7.6, 12.3, 9.6],
+                [8, 12.3, 29.2, 10.6],
+                [9, 16.9, 42.9, 14.8],
+                [10, 12.8, 30.9, 11.6],
+                [11, 5.3, 7.9, 4.7],
+                [12, 6.6, 8.4, 5.2],
+                [13, 4.8, 6.3, 3.6],
+                [14, 4.2, 6.2, 3.4]
+            ]);
+
+            var options = {
+                chart: {
+                    title: 'Box Office Earnings in First Two Weeks of Opening',
+                    subtitle: 'in millions of dollars (USD)'
+                },
+                colors: ['#6e4ff5', '#f6aa33', '#fe3995']
+            };
+
+            var chart = new google.charts.Line(document.getElementById('kt_docs_google_chart_line'));
+            chart.draw(data, options);
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleLine();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTGoogleChartLineDemo.init();
+});

assets/js/custom/documentation/charts/google-charts/pie.js

@@ -0,0 +1,52 @@
+"use strict";
+
+// Class definition
+var KTGoogleChartPieDemo = function () {
+    // Private functions
+    var examplePie = function () {
+        // GOOGLE CHARTS INIT
+        google.load('visualization', '1', {
+            packages: ['corechart', 'bar', 'line']
+        });
+
+        google.setOnLoadCallback(function () {
+            var data = google.visualization.arrayToDataTable([
+                ['Task', 'Hours per Day'],
+                ['Work', 11],
+                ['Eat', 2],
+                ['Commute', 2],
+                ['Watch TV', 2],
+                ['Sleep', 7]
+            ]);
+
+            var options = {
+                title: 'My Daily Activities',
+                colors: ['#fe3995', '#f6aa33', '#6e4ff5', '#2abe81', '#c7d2e7', '#593ae1']
+            };
+
+            var chart = new google.visualization.PieChart(document.getElementById('kt_docs_google_chart_pie'));
+            chart.draw(data, options);
+
+            // Example of a doughnut chart
+            // var options = {
+            //     pieHole: 0.4,
+            //     colors: ['#fe3995', '#f6aa33', '#6e4ff5', '#2abe81', '#c7d2e7', '#593ae1']
+            // };
+
+            // var chart = new google.visualization.PieChart(document.getElementById('kt_docs_google_chart_pie'));
+            // chart.draw(data, options);
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            examplePie();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTGoogleChartPieDemo.init();
+});

assets/js/custom/documentation/documentation.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var KTLayoutDocumentation = function() {
+    var _init = 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);
+                    });
+                }
+            }
+        }
+    }
+
+    return {
+        init: function(element) {
+            _init(element);
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTLayoutDocumentation.init();
+});

assets/js/custom/documentation/editors/ckeditor/balloon-block.js

@@ -0,0 +1,28 @@
+"use strict";
+
+// Class definition
+var KTFormsCKEditorBalloonBlock = function () {
+    // Private functions
+    var exampleBalloonBlock = function () {
+        BalloonEditor
+            .create(document.querySelector('#kt_docs_ckeditor_balloon_block'))
+            .then(editor => {
+                console.log(editor);
+            })
+            .catch(error => {
+                console.error(error);
+            });
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleBalloonBlock();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormsCKEditorBalloonBlock.init();
+});

assets/js/custom/documentation/editors/ckeditor/balloon.js

@@ -0,0 +1,28 @@
+"use strict";
+
+// Class definition
+var KTFormsCKEditorBalloon = function () {
+    // Private functions
+    var exampleBalloon = function () {
+        BalloonEditor
+            .create(document.querySelector('#kt_docs_ckeditor_balloon'))
+            .then(editor => {
+                console.log(editor);
+            })
+            .catch(error => {
+                console.error(error);
+            });
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleBalloon();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormsCKEditorBalloon.init();
+});

assets/js/custom/documentation/editors/ckeditor/classic.js

@@ -0,0 +1,28 @@
+"use strict";
+
+// Class definition
+var KTFormsCKEditorClassic = function () {
+    // Private functions
+    var exampleClassic = function () {
+        ClassicEditor
+            .create(document.querySelector('#kt_docs_ckeditor_classic'))
+            .then(editor => {
+                console.log(editor);
+            })
+            .catch(error => {
+                console.error(error);
+            });
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleClassic();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormsCKEditorClassic.init();
+});

assets/js/custom/documentation/editors/ckeditor/document.js

@@ -0,0 +1,30 @@
+"use strict";
+
+// Class definition
+var KTFormsCKEditorDocument = function () {
+    // Private functions
+    var exampleDocument = function () {
+        DecoupledEditor
+            .create(document.querySelector('#kt_docs_ckeditor_document'))
+            .then(editor => {
+                const toolbarContainer = document.querySelector('#kt_docs_ckeditor_document_toolbar');
+
+                toolbarContainer.appendChild(editor.ui.view.toolbar.element);
+            })
+            .catch(error => {
+                console.error(error);
+            });
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleDocument();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormsCKEditorDocument.init();
+});

assets/js/custom/documentation/editors/ckeditor/inline.js

@@ -0,0 +1,28 @@
+"use strict";
+
+// Class definition
+var KTFormsCKEditorInline = function () {
+    // Private functions
+    var exampleInline = function () {
+        InlineEditor
+            .create(document.querySelector('#kt_docs_ckeditor_inline'))
+            .then(editor => {
+                console.log(editor);
+            })
+            .catch(error => {
+                console.error(error);
+            });
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleInline();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormsCKEditorInline.init();
+});

assets/js/custom/documentation/editors/quill/autosave.js

@@ -0,0 +1,60 @@
+"use strict";
+
+// Class definition
+var KTFormsQuillAutosave = function () {
+    // Private functions
+    var exampleAutosave = function () {
+        var Delta = Quill.import('delta');
+        var quill = new Quill('#kt_docs_quill_autosave', {
+            modules: {
+                toolbar: true
+            },
+            placeholder: 'Type your text here...',
+            theme: 'snow'
+        });
+
+        // Store accumulated changes
+        var change = new Delta();
+        quill.on('text-change', function (delta) {
+            change = change.compose(delta);
+        });
+
+        // Save periodically
+        setInterval(function () {
+            if (change.length() > 0) {
+                console.log('Saving changes', change);
+                /*
+                Send partial changes
+                $.post('/your-endpoint', {
+                partial: JSON.stringify(change)
+                });
+
+                Send entire document
+                $.post('/your-endpoint', {
+                doc: JSON.stringify(quill.getContents())
+                });
+                */
+                change = new Delta();
+            }
+        }, 5 * 1000);
+
+        // Check for unsaved data
+        window.onbeforeunload = function () {
+            if (change.length() > 0) {
+                return 'There are unsaved changes. Are you sure you want to leave?';
+            }
+        }
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleAutosave();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormsQuillAutosave.init();
+});

assets/js/custom/documentation/editors/quill/basic.js

@@ -0,0 +1,33 @@
+"use strict";
+
+// Class definition
+var KTFormsQuillBasic = function() {
+    // Private functions
+    var exampleBasic = function() {
+        var quill = new Quill('#kt_docs_quill_basic', {
+            modules: {
+                toolbar: [
+                    [{
+                        header: [1, 2, false]
+                    }],
+                    ['bold', 'italic', 'underline'],
+                    ['image', 'code-block']
+                ]
+            },
+            placeholder: 'Type your text here...',
+            theme: 'snow' // or 'bubble'
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function() {
+            exampleBasic();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTFormsQuillBasic.init();
+});

assets/js/custom/documentation/editors/tinymce/basic.js

@@ -0,0 +1,28 @@
+"use strict";
+
+// Class definition
+var KTFormsTinyMCEBasic = function() {
+    // Private functions
+    var exampleBasic = function() {
+        var options = {selector: '#kt_docs_tinymce_basic'};
+        
+        if (KTApp.isDarkMode()) {
+            options['skin'] = 'oxide-dark';
+            options['content_css'] = 'dark';
+        }
+        
+        tinymce.init(options);
+    }
+
+    return {
+        // Public Functions
+        init: function() {
+            exampleBasic();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTFormsTinyMCEBasic.init();
+});

assets/js/custom/documentation/editors/tinymce/hidden.js

@@ -0,0 +1,28 @@
+"use strict";
+
+// Class definition
+var KTFormsTinyMCEHidden = function() {
+    // Private functions
+    var exampleHidden = function() {
+        tinymce.init({
+            selector: '#kt_docs_tinymce_hidden',
+            menubar: false,
+            toolbar: ['styleselect fontselect fontsizeselect',
+                'undo redo | cut copy paste | bold italic | link image | alignleft aligncenter alignright alignjustify',
+                'bullist numlist | outdent indent | blockquote subscript superscript | advlist | autolink | lists charmap | print preview |  code'],
+            plugins : 'advlist autolink link image lists charmap print preview code'
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function() {
+            exampleHidden();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTFormsTinyMCEHidden.init();
+});

assets/js/custom/documentation/editors/tinymce/plugins.js

@@ -0,0 +1,25 @@
+"use strict";
+
+// Class definition
+var KTFormsTinyMCEPlugins = function() {
+    // Private functions
+    var examplePlugins = function() {
+        tinymce.init({
+            selector: '#kt_docs_tinymce_plugins',
+            toolbar: 'advlist | autolink | link image | lists charmap | print preview',
+            plugins : 'advlist autolink link image lists charmap print preview'
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function() {
+            examplePlugins();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTFormsTinyMCEPlugins.init();
+});

assets/js/custom/documentation/forms/bootstrap-maxlength.js

@@ -0,0 +1,97 @@
+"use strict";
+
+// Class definition
+var KTFormsMaxlengthDemos = function () {
+    // Private functions
+    var exampleBasic = function () {
+        // minimum setup
+        $('#kt_docs_maxlength_basic').maxlength({
+            warningClass: "badge badge-primary",
+            limitReachedClass: "badge badge-success"
+        });
+    }
+
+    var exampleThreshold = function () {
+        // Threshold setup
+        $('#kt_docs_maxlength_threshold').maxlength({
+            threshold: 20,
+            warningClass: "badge badge-primary",
+            limitReachedClass: "badge badge-success"
+        });
+    }
+
+    var exampleAlwaysShow = function () {
+        // Always show setup
+        $('#kt_docs_maxlength_always_show').maxlength({
+            alwaysShow: true,
+            threshold: 20,
+            warningClass: "badge badge-danger",
+            limitReachedClass: "badge badge-info"
+        });
+    }
+
+    var exampleCustomText = function () {
+        // Always show setup
+        $('#kt_docs_maxlength_custom_text').maxlength({
+            threshold: 20,
+            warningClass: "badge badge-danger",
+            limitReachedClass: "badge badge-success",
+            separator: ' of ',
+            preText: 'You have ',
+            postText: ' chars remaining.',
+            validate: true
+        });
+    }
+
+    var exampleTextarea = function () {
+        // Textarea setup
+        $('#kt_docs_maxlength_textarea').maxlength({
+            warningClass: "badge badge-primary",
+            limitReachedClass: "badge badge-success"
+        });
+    }
+
+    var examplePosition = function () {
+        // Position setup
+        $('#kt_docs_maxlength_position_top_left').maxlength({
+            placement: 'top-left',
+            warningClass: "badge badge-danger",
+            limitReachedClass: "badge badge-primary"
+        });
+
+        $('#kt_docs_maxlength_position_top_right').maxlength({
+            placement: 'top-right',
+            warningClass: "badge badge-success",
+            limitReachedClass: "badge badge-danger"
+        });
+
+        $('#kt_docs_maxlength_position_bottom_left').maxlength({
+            placement: 'bottom-left',
+            warningClass: "badge badge-info",
+            limitReachedClass: "badge badge-warning"
+        });
+
+        $('#kt_docs_maxlength_position_bottom_right').maxlength({
+            placement: 'bottom-right',
+            warningClass: "badge badge-primary",
+            limitReachedClass: "badge badge-success"
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleBasic();
+            exampleThreshold();
+            exampleAlwaysShow();
+            exampleCustomText();
+            exampleTextarea();
+            examplePosition();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormsMaxlengthDemos.init();
+});

assets/js/custom/documentation/forms/clipboard.js

@@ -0,0 +1,172 @@
+"use strict";
+
+// Class definition
+var KTFormsClipboard = function () {
+    // Shared variables
+    var clipboard;
+
+    // Private functions
+    var example1 = function () {
+        // Select elements
+        const target = document.getElementById('kt_clipboard_1');
+        const button = target.nextElementSibling;
+
+        // Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
+        clipboard = new ClipboardJS(button, {
+            target: target,
+            text: function () {
+                return target.value;
+            }
+        });
+
+        // Success action handler
+        clipboard.on('success', function (e) {
+            const currentLabel = button.innerHTML;
+
+            // Exit label update when already in progress
+            if (button.innerHTML === 'Copied!') {
+                return;
+            }
+
+            // Update button label
+            button.innerHTML = "Copied!";
+
+            // Revert button label after 3 seconds
+            setTimeout(function () {
+                button.innerHTML = currentLabel;
+            }, 3000)
+        });
+    }
+
+    var example2 = function () {
+        // Select elements
+        const target = document.getElementById('kt_clipboard_2');
+        const button = target.nextElementSibling;
+
+        // Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
+        clipboard = new ClipboardJS(button, {
+            target: target,
+            text: function () {
+                return target.innerText;
+            }
+        });
+
+        // Success action handler
+        clipboard.on('success', function (e) {
+            const currentLabel = button.innerHTML;
+
+            // Exit label update when already in progress
+            if (button.innerHTML === 'Copied!') {
+                return;
+            }
+
+            // Update button label
+            button.innerHTML = "Copied!";
+
+            // Revert button label after 3 seconds
+            setTimeout(function () {
+                button.innerHTML = currentLabel;
+            }, 3000)
+        });
+    }
+
+    var example3 = function () {
+        // Select element
+        const target = document.getElementById('kt_clipboard_3');
+
+        // Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
+        clipboard = new ClipboardJS(target);
+
+        // Success action handler
+        clipboard.on('success', function (e) {
+            const currentLabel = target.innerHTML;
+
+            // Exit label update when already in progress
+            if (target.innerHTML === 'Copied!') {
+                return;
+            }
+
+            // Update button label
+            target.innerHTML = "Copied!";
+
+            // Revert button label after 3 seconds
+            setTimeout(function () {
+                target.innerHTML = currentLabel;
+            }, 3000)
+        });
+    }
+
+    var example4 = function () {
+        // Select elements
+        const target = document.getElementById('kt_clipboard_4');
+        const button = target.nextElementSibling;
+
+        // Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
+        clipboard = new ClipboardJS(button, {
+            target: target,
+            text: function () {
+                return target.innerHTML;
+            }
+        });
+
+        // Success action handler
+        clipboard.on('success', function (e) {
+            var checkIcon = button.querySelector('.bi.bi-check');
+            var svgIcon = button.querySelector('.svg-icon');
+
+            // Exit check icon when already showing
+            if (checkIcon) {
+                return;
+            }
+
+            // Create check icon
+            checkIcon = document.createElement('i');
+            checkIcon.classList.add('bi');
+            checkIcon.classList.add('bi-check');
+            checkIcon.classList.add('fs-2x');
+
+            // Append check icon
+            button.appendChild(checkIcon);
+
+            // Highlight target
+            const classes = ['text-success', 'fw-boldest'];
+            target.classList.add(...classes);
+
+            // Highlight button
+            button.classList.add('btn-success');
+
+            // Hide copy icon
+            svgIcon.classList.add('d-none');
+
+            // Revert button label after 3 seconds
+            setTimeout(function () {
+                // Remove check icon
+                svgIcon.classList.remove('d-none');
+
+                // Revert icon
+                button.removeChild(checkIcon);
+
+                // Remove target highlight
+                target.classList.remove(...classes);
+
+                // Remove button highlight
+                button.classList.remove('btn-success');
+            }, 3000)
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            example1();
+            example2();
+            example3();
+            example4();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormsClipboard.init();
+});

assets/js/custom/documentation/forms/daterangepicker.js

@@ -0,0 +1,77 @@
+"use strict";
+
+// Class definition
+var KTFormsDaterangepickerDemos = function() {
+    // Private functions
+    var example1 = function(element) {
+        $("#kt_daterangepicker_1").daterangepicker();
+    }
+
+    var example2 = function(element) {
+        $("#kt_daterangepicker_2").daterangepicker({
+            timePicker: true,
+            startDate: moment().startOf("hour"),
+            endDate: moment().startOf("hour").add(32, "hour"),
+            locale: {
+                format: "M/DD hh:mm A"
+            }
+        });
+    }
+
+    var example3 = function(element) {
+        $("#kt_daterangepicker_3").daterangepicker({
+                singleDatePicker: true,
+                showDropdowns: true,
+                minYear: 1901,
+                maxYear: parseInt(moment().format("YYYY"),10)
+            }, function(start, end, label) {
+                var years = moment().diff(start, "years");
+                alert("You are " + years + " years old!");
+            }
+        );
+    }
+
+    var example4 = function(element) {
+        var start = moment().subtract(29, "days");
+        var end = moment();
+
+        function cb(start, end) {
+            $("#kt_daterangepicker_4").html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
+        }
+
+        $("#kt_daterangepicker_4").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);
+    }
+
+    var example5 = function(element) {
+        $("#kt_daterangepicker_5").daterangepicker();
+    }    
+
+    return {
+        // Public Functions
+        init: function(element) {
+            example1();
+            example2();
+            example3();
+            example4();
+            example5();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTFormsDaterangepickerDemos.init();
+});

assets/js/custom/documentation/forms/dialer.js

@@ -0,0 +1,31 @@
+"use strict";
+
+// Class definition
+var KTFormsDialerDemos = function() {
+    // Private functions
+    var example1 = function(element) {
+        // Dialer container element
+        var dialerElement = document.querySelector("#kt_dialer_example_1");
+
+        // Create dialer object and initialize a new instance
+        var dialerObject = new KTDialer(dialerElement, {
+            min: 1000,
+            max: 50000,
+            step: 1000,
+            prefix: "$",
+            decimals: 2
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function(element) {
+            example1();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTFormsDialerDemos.init();
+});

assets/js/custom/documentation/forms/dropzonejs.js

@@ -0,0 +1,187 @@
+"use strict";
+
+// Class definition
+var KTFormsDropzoneJSDemos = function () {
+    // Private functions
+    var exampleBasic = function () {
+        // For more info about Dropzone plugin visit:  https://www.dropzonejs.com/#usage
+        var myDropzone = new Dropzone("#kt_dropzonejs_example_1", {
+            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();
+                }
+            }
+        });
+    }
+
+    var exampleQueue = function () {
+        // set the dropzone container id
+        const id = "#kt_dropzonejs_example_2";
+        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: "https://preview.keenthemes.com/api/dropzone/void.php", // Set the url for your upload script location
+            parallelUploads: 20,
+            previewTemplate: previewTemplate,
+            maxFilesize: 1, // Max filesize in MB
+            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) {
+            // Hookup the start button
+            file.previewElement.querySelector(id + " .dropzone-start").onclick = function () { myDropzone.enqueueFile(file); };
+            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";
+        });
+
+        // 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";
+            });
+            // And disable the start button
+            file.previewElement.querySelector(id + " .dropzone-start").setAttribute("disabled", "disabled");
+        });
+
+        // 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";
+                    progressBar.querySelector('.dropzone-start').style.opacity = "0";
+                });
+            }, 300);
+        });
+
+        // Setup the buttons for all transfers
+        dropzone.querySelector(".dropzone-upload").addEventListener('click', function () {
+            myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
+        });
+
+        // Setup the button for remove all files
+        dropzone.querySelector(".dropzone-remove-all").addEventListener('click', function () {
+            dropzone.querySelector('.dropzone-upload').style.display = "none";
+            dropzone.querySelector('.dropzone-remove-all').style.display = "none";
+            myDropzone.removeAllFiles(true);
+        });
+
+        // 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";
+            }
+        });
+    }
+
+    var exampleQueueAutoUpload = function () {
+        // set the dropzone container id
+        const id = "#kt_dropzonejs_example_3";
+        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: "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: id + " .dropzone-select" // 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);
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function (element) {
+            exampleBasic();
+            exampleQueue();
+            exampleQueueAutoUpload();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormsDropzoneJSDemos.init();
+});

assets/js/custom/documentation/forms/flatpickr.js

@@ -0,0 +1,103 @@
+"use strict";
+
+// Class definition
+var KTFormsFlatpickrDemos = function() {
+    // Private functions
+    var example1 = function(element) {
+        $("#kt_datepicker_1").flatpickr();
+
+        $("#kt_datepicker_2").flatpickr();
+    }
+
+    var example2 = function(element) {
+        $("#kt_datepicker_3").flatpickr({
+            enableTime: true,
+            dateFormat: "Y-m-d H:i",
+        });
+    }
+
+    var example3 = function(element) {
+        $("#kt_datepicker_4").flatpickr({
+            onReady: function () {
+                this.jumpToDate("2025-01")
+            },
+            disable: ["2025-01-10", "22025-01-11", "2025-01-12", "2025-01-13", "2025-01-14", "2025-01-15", "2025-01-16", "2025-01-17"],
+            dateFormat: "Y-m-d",
+        });
+
+        $("#kt_datepicker_5").flatpickr({
+            onReady: function () {
+                this.jumpToDate("2025-01")
+            },
+            dateFormat: "Y-m-d",
+            disable: [
+                {
+                    from: "2025-01-05",
+                    to: "2025-01-25"
+                },
+                {
+                    from: "2025-02-03",
+                    to: "2025-02-15"
+                }
+            ]
+        });
+    }
+
+    var example4 = function(element) {
+        $("#kt_datepicker_6").flatpickr({
+            onReady: function () {
+                this.jumpToDate("2025-01")
+            },
+            mode: "multiple",
+            dateFormat: "Y-m-d",
+            defaultDate: ["2025-01-05", "2025-01-10"]
+        });
+    }
+
+    var example5 = function(element) {
+        $("#kt_datepicker_7").flatpickr({
+            altInput: true,
+            altFormat: "F j, Y",
+            dateFormat: "Y-m-d",
+            mode: "range"
+        });
+    }
+
+    var example6 = function(element) {
+        $("#kt_datepicker_8").flatpickr({
+            enableTime: true,
+            noCalendar: true,
+            dateFormat: "H:i",
+        });
+    }
+
+    var example7 = function(element) {
+        $("#kt_datepicker_9").flatpickr({
+            weekNumbers: true
+        });
+    }
+
+    var example8 = function(element) {
+        $("#kt_datepicker_10").flatpickr();
+    }
+    
+
+    return {
+        // Public Functions
+        init: function(element) {
+            example1();
+            example2();
+            example3();
+            example4();
+            example5();
+            example6();
+            example7();
+            example8();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTFormsFlatpickrDemos.init();
+});

assets/js/custom/documentation/forms/formrepeater/advanced.js

@@ -0,0 +1,55 @@
+"use strict";
+
+// Class definition
+var KTFormRepeaterAdvanced = function () {
+    // Private functions
+    var example1 = function () {
+        $('#kt_docs_repeater_advanced').repeater({
+            initEmpty: false,
+
+            defaultValues: {
+                'text-input': 'foo'
+            },
+
+            show: function () {
+                $(this).slideDown();
+
+                // Re-init select2
+                $(this).find('[data-kt-repeater="select2"]').select2();
+
+                // Re-init flatpickr
+                $(this).find('[data-kt-repeater="datepicker"]').flatpickr();
+
+                // Re-init tagify
+                new Tagify(this.querySelector('[data-kt-repeater="tagify"]'));
+            },
+
+            hide: function (deleteElement) {
+                $(this).slideUp(deleteElement);
+            },
+
+            ready: function(){
+                // Init select
+                $('[data-kt-repeater="select2"]').select2();
+
+                // Init flatpickr
+                $('[data-kt-repeater="datepicker"]').flatpickr();
+
+                // Init Tagify
+                new Tagify(document.querySelector('[data-kt-repeater="tagify"]'));
+            }
+        });        
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            example1();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormRepeaterAdvanced.init();
+});

assets/js/custom/documentation/forms/formrepeater/basic.js

@@ -0,0 +1,35 @@
+"use strict";
+
+// Class definition
+var KTFormRepeaterBasic = function () {
+    // Private functions
+    var example1 = function () {
+        $('#kt_docs_repeater_basic').repeater({
+            initEmpty: false,
+
+            defaultValues: {
+                'text-input': 'foo'
+            },
+
+            show: function () {
+                $(this).slideDown();
+            },
+
+            hide: function (deleteElement) {
+                $(this).slideUp(deleteElement);
+            }
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            example1();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormRepeaterBasic.init();
+});

assets/js/custom/documentation/forms/formrepeater/nested.js

@@ -0,0 +1,47 @@
+"use strict";
+
+// Class definition
+var KTFormRepeaterNested = function() {
+    // Private functions
+    var example1 = function() {
+        $('#kt_docs_repeater_nested').repeater({
+            // (Required if there is a nested repeater)
+            // Specify the configuration of the nested repeaters.
+            // Nested configuration follows the same format as the base configuration,
+            // supporting options "defaultValues", "show", "hide", etc.
+            // Nested repeaters additionally require a "selector" field.
+            repeaters: [{
+                // (Required)
+                // Specify the jQuery selector for this nested repeater
+                selector: '.inner-repeater',
+                show: function () {
+                    $(this).slideDown();
+                },
+    
+                hide: function (deleteElement) {
+                    $(this).slideUp(deleteElement);
+                }
+            }],
+
+            show: function () {
+                $(this).slideDown();
+            },
+
+            hide: function (deleteElement) {
+                $(this).slideUp(deleteElement);
+            }
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function() {
+            example1();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTFormRepeaterNested.init();
+});

assets/js/custom/documentation/forms/formvalidation/advanced.js

@@ -0,0 +1,664 @@
+"use strict";
+
+// Class definition
+var KTFormValidationDemoAdvanced = function () {
+
+    // Private functions
+    var exampleAdvanced = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_advanced');
+
+        // Init daterangepicker --- for more info, please visit: https://www.daterangepicker.com/
+        $("#kt_daterangepicker").daterangepicker();
+
+        // Init flatpickr --- for more info, please visit: https://flatpickr.js.org/
+        $("#kt_flatpickr").flatpickr();
+
+        // Init tagify --- for more info, please visit: https://yaireo.github.io/tagify/
+        new Tagify(document.querySelector("#kt_tagify"), {
+            whitelist: ["Tag 1", "Tag 2", "Tag 3", "Tag 4", "Tag 5", "Tag 6", "Tag 7", "Tag 8", "Tag 9", "Tag 10", "Tag 11", "Tag 12"],
+            maxTags: 6,
+            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: {
+                    'daterangepicker_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Date range input is required'
+                            }
+                        }
+                    },
+                    'flatpickr_input': {
+                        validators: {
+                            date: {
+                                format: 'YYYY-MM-DD',
+                                message: 'The value is not a valid date',
+                            },
+                            notEmpty: {
+                                message: 'Flatpickr input is required'
+                            }
+                        }
+                    },
+                    'avatar': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Please select an image'
+                            },
+                            file: {
+                                extension: 'jpg,jpeg,png',
+                                type: 'image/jpeg,image/png',
+                                message: 'The selected file is not valid'
+                            },
+                        }
+                    },
+                    'select2_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Select2 input is required'
+                            }
+                        }
+                    },
+                    'tagify_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Tagify input is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Revalidate Select2 input. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="select2_input"]')).on('change', function () {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('select2_input');
+        });
+
+        // Submit button handler
+        const submitButton = document.getElementById('kt_docs_formvalidation_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);
+                    }
+                });
+            }
+        });
+    }
+
+    var exampleDateRangePicker = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_daterangepicker');
+
+        // Init daterangepicker --- for more info, please visit: https://www.daterangepicker.com/
+        $("#kt_daterangepicker").daterangepicker();
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'daterangepicker_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Date range input is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Submit button handler
+        const submitButton = document.getElementById('kt_docs_formvalidation_daterangepicker_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);
+                    }
+                });
+            }
+        });
+    }
+
+    var exampleFlatpickr = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_flatpickr');
+
+        // Init flatpickr --- for more info, please visit: https://flatpickr.js.org/
+        $("#kt_flatpickr").flatpickr();
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'flatpickr_input': {
+                        validators: {
+                            date: {
+                                format: 'YYYY-MM-DD',
+                                message: 'The value is not a valid date',
+                            },
+                            notEmpty: {
+                                message: 'Flatpickr input is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Submit button handler
+        const submitButton = document.getElementById('kt_docs_formvalidation_flatpickr_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);
+                    }
+                });
+            }
+        });
+    }
+
+    var exampleImageInput = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_image_input');
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'avatar': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Please select an image'
+                            },
+                            file: {
+                                extension: 'jpg,jpeg,png',
+                                type: 'image/jpeg,image/png',
+                                message: 'The selected file is not valid'
+                            },
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Submit button handler
+        const submitButton = document.getElementById('kt_docs_formvalidation_image_input_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);
+                    }
+                });
+            }
+        });
+    }
+
+    var examplePassword = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_password');
+
+        // 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: ''
+                    })
+                }
+            }
+        );
+
+        // Submit button handler
+        const submitButton = document.getElementById('kt_docs_formvalidation_password_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);
+                    }
+                });
+            }
+        });
+    }
+
+    var exampleSelect2 = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_select2');
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'select2_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Select2 input is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Revalidate Select2 input. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="select2_input"]')).on('change', function () {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('select2_input');
+        });
+
+        // Submit button handler
+        const submitButton = document.getElementById('kt_docs_formvalidation_select2_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);
+                    }
+                });
+            }
+        });
+    }
+
+    var exampleTagify = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_tagify');
+
+        // Init tagify --- for more info, please visit: https://yaireo.github.io/tagify/
+        new Tagify(document.querySelector("#kt_tagify"), {
+            whitelist: ["Tag 1", "Tag 2", "Tag 3", "Tag 4", "Tag 5", "Tag 6", "Tag 7", "Tag 8", "Tag 9", "Tag 10", "Tag 11", "Tag 12"],
+            maxTags: 6,
+            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: {
+                    'tagify_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Tagify input is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Submit button handler
+        const submitButton = document.getElementById('kt_docs_formvalidation_tagify_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);
+                    }
+                });
+            }
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleDateRangePicker();
+            exampleFlatpickr();
+            exampleImageInput();
+            examplePassword();
+            exampleSelect2();
+            exampleTagify();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormValidationDemoAdvanced.init();
+});

assets/js/custom/documentation/forms/formvalidation/basic.js

@@ -0,0 +1,536 @@
+"use strict";
+
+// Class definition
+var KTFormValidationDemoBasic = function () {
+
+    // Private functions
+    var exampleBasic = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_basic');
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'text_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Text input is required'
+                            }
+                        }
+                    },
+                    'email_input': {
+                        validators: {
+                            emailAddress: {
+                                message: 'The value is not a valid email address'
+                            },
+                            notEmpty: {
+                                message: 'Email address is required'
+                            }
+                        }
+                    },
+                    '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'
+                            }
+                        }
+                    },
+                    'textarea_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Textarea input is required'
+                            }
+                        }
+                    },
+                    'radio_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Radio input is required'
+                            }
+                        }
+                    },
+                    'checkbox_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Radio input is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Submit button handler
+        const submitButton = document.getElementById('kt_docs_formvalidation_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);
+                    }
+                });
+            }
+        });
+
+    }
+
+    var exampleText = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_text');
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'text_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Text input is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Submit button handler
+        const submitButton = document.getElementById('kt_docs_formvalidation_text_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);
+                    }
+                });
+            }
+        });
+    }
+
+    var exampleEmail = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_email');
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'email_input': {
+                        validators: {
+                            emailAddress: {
+                                message: 'The value is not a valid email address'
+                            },
+                            notEmpty: {
+                                message: '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 = document.getElementById('kt_docs_formvalidation_email_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);
+                    }
+                });
+            }
+        });
+    }
+
+    var exampleTextarea = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_textarea');
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'textarea_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Textarea input is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Submit button handler
+        const submitButton = document.getElementById('kt_docs_formvalidation_textarea_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);
+                    }
+                });
+            }
+        });
+    }
+
+    var exampleRadio = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_radio');
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'radio_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Radio input is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Submit button handler
+        const submitButton = document.getElementById('kt_docs_formvalidation_radio_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);
+                    }
+                });
+            }
+        });
+    }
+
+    var exampleCheckbox = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_checkbox');
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'checkbox_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Checkbox input is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Submit button handler
+        const submitButton = document.getElementById('kt_docs_formvalidation_checkbox_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);
+                    }
+                });
+            }
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleText();
+            exampleEmail();
+            exampleTextarea();
+            exampleRadio();
+            exampleCheckbox();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormValidationDemoBasic.init();
+});

assets/js/custom/documentation/forms/image-input.js

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

assets/js/custom/documentation/forms/inputmask.js

@@ -0,0 +1,74 @@
+"use strict";
+
+// Class definition
+var KTFormsInputmaskDemos = function() {
+    // Private functions
+    var _examples = function() {
+        // Date
+        Inputmask({
+            "mask" : "99/99/9999"
+        }).mask("#kt_inputmask_1");
+
+        // Phone 
+        Inputmask({
+            "mask" : "(999) 999-9999"
+        }).mask("#kt_inputmask_2");
+
+        // Placeholder 
+        Inputmask({
+            "mask" : "(999) 999-9999",
+            "placeholder": "(999) 999-9999",
+        }).mask("#kt_inputmask_3");
+
+        // Repeating 
+        Inputmask({
+            "mask": "9",
+            "repeat": 10,
+            "greedy": false
+        }).mask("#kt_inputmask_4");
+
+        // Right aligned 
+        Inputmask("decimal", {
+            "rightAlignNumerics": false
+        }).mask("#kt_inputmask_5");
+
+        // Currency
+        Inputmask("€ 999.999.999,99", {
+            "numericInput": true
+        }).mask("#kt_inputmask_6");
+
+        // Ip address
+        Inputmask({
+            "mask": "999.999.999.999"
+        }).mask("#kt_inputmask_7");
+
+        // Email address
+        Inputmask({
+            mask: "*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[.*{2,6}][.*{1,2}]",
+            greedy: false,
+            onBeforePaste: function (pastedValue, opts) {
+                pastedValue = pastedValue.toLowerCase();
+                return pastedValue.replace("mailto:", "");
+            },
+            definitions: {
+                "*": {
+                    validator: '[0-9A-Za-z!#$%&"*+/=?^_`{|}~\-]',
+                    cardinality: 1,
+                    casing: "lower"
+                }
+            }
+        }).mask("#kt_inputmask_8");
+    }
+
+    return {
+        // Public Functions
+        init: function(element) {
+            _examples();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTFormsInputmaskDemos.init();
+});

assets/js/custom/documentation/forms/multiselectsplitter.js

@@ -0,0 +1,65 @@
+"use strict";
+
+// Class definition
+var KTFormsMultiselectsplitterDemos = function() {
+    // Private functions
+    var example1 = function() {
+        $("#kt_multiselectsplitter_example_1").multiselectsplitter();
+    }
+
+    var example2 = function() {
+        $('#kt_multiselectsplitter_example_2').multiselectsplitter({
+    		selectSize: 7,
+            clearOnFirstChange: true,
+    		groupCounter: true
+        });
+    }
+
+    var example3 = function() {
+        $('#kt_multiselectsplitter_example_3').multiselectsplitter({
+    		groupCounter: true,
+            maximumSelected: 2
+        });
+    }
+
+    var example4 = function() {
+        $('#kt_multiselectsplitter_example_4').multiselectsplitter({
+    		groupCounter: true,
+            maximumSelected: 3,
+            onlySameGroup: true
+        });
+    }
+
+    var example5 = function() {
+        $('#kt_multiselectsplitter_example_5').multiselectsplitter({
+    		size: 6,
+    		groupCounter: true,
+            maximumSelected: 2,
+            maximumAlert: function(maximumSelected) {
+                alert("You choose " + ( maximumSelected + 1 ) + " options. Are you crazy ?");
+            },
+            createFirstSelect: function (label, $originalSelect) { 
+                return "<option class=\"text-success\">prefix - " + label + "</option>";
+            },
+            createSecondSelect: function (label, $firstSelect) { 
+                return "<option class=\"text-danger\"> ??? </option>";
+            }
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function() {
+            example1();
+            example2();
+            example3();
+            example4();
+            example5();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTFormsMultiselectsplitterDemos.init();
+});

assets/js/custom/documentation/forms/nouislider.js

@@ -0,0 +1,121 @@
+"use strict";
+
+// Class definition
+var KTFormsNouisliderDemos = function() {
+    // Private functions
+    var _exampleBasic = function() {
+        var slider = document.querySelector("#kt_slider_basic");
+        var valueMin = document.querySelector("#kt_slider_basic_min");
+        var valueMax = document.querySelector("#kt_slider_basic_max");
+
+        noUiSlider.create(slider, {
+            start: [20, 80],
+            connect: true,
+            range: {
+                "min": 0,
+                "max": 100
+            }
+        });
+
+        slider.noUiSlider.on("update", function (values, handle) {
+            if (handle) {
+                valueMax.innerHTML = values[handle];
+            } else {
+                valueMin.innerHTML = values[handle];
+            }
+        });
+    }
+
+    var _exampleSizes = function() {
+        var slider1 = document.querySelector("#kt_slider_sizes_sm");
+        var slider2 = document.querySelector("#kt_slider_sizes_default");
+        var slider3 = document.querySelector("#kt_slider_sizes_lg");
+
+        noUiSlider.create(slider1, {
+            start: [20, 80],
+            connect: true,
+            range: {
+                "min": 0,
+                "max": 100
+            }
+        });
+
+        noUiSlider.create(slider2, {
+            start: [20, 80],
+            connect: true,
+            range: {
+                "min": 0,
+                "max": 100
+            }
+        });
+
+        noUiSlider.create(slider3, {
+            start: [20, 80],
+            connect: true,
+            range: {
+                "min": 0,
+                "max": 100
+            }
+        });
+    }   
+
+    var _exampleVertical = function() {
+        var slider = document.querySelector("#kt_slider_vertical");
+
+        noUiSlider.create(slider, {
+            start: [60, 160],
+            connect: true,
+            orientation: "vertical",
+            range: {
+                "min": 0,
+                "max": 200
+            }
+        });
+    }
+
+    var _exampleTooltip = function() {
+        var slider = document.querySelector("#kt_slider_tooltip");
+
+        noUiSlider.create(slider, {
+            start: [20, 80, 120],
+            tooltips: [false, wNumb({decimals: 1}), true],
+            range: {
+                "min": 0,
+                "max": 200
+            }
+        });        
+    }
+
+    var _exampleSoftLimits = function() {
+        var slider = document.querySelector("#kt_slider_soft_limits");
+
+        noUiSlider.create(slider, {
+            start: 50,
+            range: {
+                min: 0,
+                max: 100
+            },
+            pips: {
+                mode: "values",
+                values: [20, 80],
+                density: 4
+            }
+        });
+    } 
+
+    return {
+        // Public Functions
+        init: function(element) {
+            _exampleBasic();
+            _exampleSizes();
+            _exampleVertical();
+            _exampleTooltip();
+            _exampleSoftLimits();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTFormsNouisliderDemos.init();
+});

assets/js/custom/documentation/forms/password-meter.js

@@ -0,0 +1,43 @@
+"use strict";
+
+// Class definition
+var KTGeneralPasswordMeterDemos = function() {
+    // Private functions
+    var _showScore = function() {
+        // Select show score button
+        const showScoreButton = document.getElementById('kt_password_meter_example_show_score');  
+
+        // Get password meter instance
+        const passwordMeterElement = document.querySelector("#kt_password_meter_example");
+        const passwordMeter = KTPasswordMeter.getInstance(passwordMeterElement);
+
+        // Handle show score button click
+        showScoreButton.addEventListener('click', e => {
+            // Get password score
+            const score = passwordMeter.getScore();
+
+            // Show popup confirmation 
+            Swal.fire({
+                text: "Current Password Score: " + score,
+                icon: "success",
+                buttonsStyling: false,
+                confirmButtonText: "Ok, got it!",
+                customClass: {
+                    confirmButton: "btn btn-primary"
+                }
+            });
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function() {
+            _showScore();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTGeneralPasswordMeterDemos.init();
+});

assets/js/custom/documentation/forms/recaptcha.js

@@ -0,0 +1,31 @@
+"use strict";
+
+// Class definition
+var KTFormsGoogleRecaptchaDemos = function () {
+    // Private functions
+    var example = function (element) {
+        document.querySelector("#kt_form_submit_button").addEventListener("click", function (e) {
+            e.preventDefault();
+
+            grecaptcha.ready(function () {
+                if (grecaptcha.getResponse() === "") {
+                    alert("Please validate the Google reCaptcha.");
+                } else {
+                    alert("Successful validation! Now you can submit this form to your server side processing.");
+                }
+            });
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function (element) {
+            example();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormsGoogleRecaptchaDemos.init();
+});

assets/js/custom/documentation/forms/select2.js

@@ -0,0 +1,74 @@
+"use strict";
+
+// Class definition
+var KTFormsSelect2Demo = function () {
+    // Private functions
+    var exampleCountry = function () {
+        // Format options
+        const format = (item) => {
+            if (!item.id) {
+                return item.text;
+            }
+
+            var url = hostUrl + 'media/' + item.element.getAttribute('data-kt-select2-country');
+            var img = $("<img>", {
+                class: "rounded-circle me-2",
+                width: 26,
+                src: url
+            });
+            var span = $("<span>", {
+                text: " " + item.text
+            });
+            span.prepend(img);
+            return span;
+        }
+
+        // Init Select2 --- more info: https://select2.org/
+        $('#kt_docs_select2_country').select2({
+            templateResult: function (item) {
+                return format(item);
+            }
+        });
+    }
+
+    const exampleUsers = function () {
+        // Format options
+        const format = (item) => {
+            if (!item.id) {
+                return item.text;
+            }
+
+            var url = hostUrl + 'media/' + item.element.getAttribute('data-kt-select2-user');
+            var img = $("<img>", {
+                class: "rounded-circle me-2",
+                width: 26,
+                src: url
+            });
+            var span = $("<span>", {
+                text: " " + item.text
+            });
+            span.prepend(img);
+            return span;
+        }
+
+        // Init Select2 --- more info: https://select2.org/
+        $('#kt_docs_select2_users').select2({
+            templateResult: function (item) {
+                return format(item);
+            }
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleCountry();
+            exampleUsers();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormsSelect2Demo.init();
+});

assets/js/custom/documentation/forms/tagify.js

@@ -0,0 +1,275 @@
+"use strict";
+
+// Class definition
+var KTFormsTagifyDemos = function () {
+    // Private functions
+    var example1 = function (element) {
+        // The DOM elements you wish to replace with Tagify
+        var input1 = document.querySelector("#kt_tagify_1");
+        var input2 = document.querySelector("#kt_tagify_2");
+
+        // Initialize Tagify components on the above inputs
+        new Tagify(input1, {
+            placeholder: "Type something"
+        });
+        new Tagify(input2, {
+            placeholder: "Type something"
+        });
+    }
+
+    var example2 = function (element) {
+        // The DOM elements you wish to replace with Tagify
+        var input1 = document.querySelector("#kt_tagify_3");
+        var input2 = document.querySelector("#kt_tagify_4");
+        var input3 = document.querySelector("#kt_tagify_5");
+
+        // Initialize Tagify components on the above inputs
+        new Tagify(input1);
+        new Tagify(input2);
+        new Tagify(input3);
+    }
+
+    var example3 = function (element) {
+        // The DOM elements you wish to replace with Tagify
+        var input1 = document.querySelector("#kt_tagify_6");
+        var input2 = document.querySelector("#kt_tagify_7");
+
+        // Initialize Tagify components on the above inputs
+        new Tagify(input1, {
+            whitelist: ["A# .NET", "A# (Axiom)", "A-0 System", "A+", "A++", "ABAP", "ABC", "ABC ALGOL", "ABSET", "ABSYS", "ACC", "Accent", "Ace DASL", "ACL2", "Avicsoft", "ACT-III", "Action!", "ActionScript", "Ada", "Adenine", "Agda", "Agilent VEE", "Agora", "AIMMS", "Alef", "ALF", "ALGOL 58", "ALGOL 60", "ALGOL 68", "ALGOL W", "Alice", "Alma-0", "AmbientTalk", "Amiga E", "AMOS", "AMPL", "Apex (Salesforce.com)", "APL", "AppleScript", "Arc", "ARexx", "Argus", "AspectJ", "Assembly language", "ATS", "Ateji PX", "AutoHotkey", "Autocoder", "AutoIt", "AutoLISP / Visual LISP", "Averest", "AWK", "Axum", "Active Server Pages", "ASP.NET", "B", "Babbage", "Bash", "BASIC", "bc", "BCPL", "BeanShell", "Batch (Windows/Dos)", "Bertrand", "BETA", "Bigwig", "Bistro", "BitC", "BLISS", "Blockly", "BlooP", "Blue", "Boo", "Boomerang", "Bourne shell (including bash and ksh)", "BREW", "BPEL", "B", "C--", "C++ – ISO/IEC 14882", "C# – ISO/IEC 23270", "C/AL", "Caché ObjectScript", "C Shell", "Caml", "Cayenne", "CDuce", "Cecil", "Cesil", "Céu", "Ceylon", "CFEngine", "CFML", "Cg", "Ch", "Chapel", "Charity", "Charm", "Chef", "CHILL", "CHIP-8", "chomski", "ChucK", "CICS", "Cilk", "Citrine (programming language)", "CL (IBM)", "Claire", "Clarion", "Clean", "Clipper", "CLIPS", "CLIST", "Clojure", "CLU", "CMS-2", "COBOL – ISO/IEC 1989", "CobolScript – COBOL Scripting language", "Cobra", "CODE", "CoffeeScript", "ColdFusion", "COMAL", "Combined Programming Language (CPL)", "COMIT", "Common Intermediate Language (CIL)", "Common Lisp (also known as CL)", "COMPASS", "Component Pascal", "Constraint Handling Rules (CHR)", "COMTRAN", "Converge", "Cool", "Coq", "Coral 66", "Corn", "CorVision", "COWSEL", "CPL", "CPL", "Cryptol", "csh", "Csound", "CSP", "CUDA", "Curl", "Curry", "Cybil", "Cyclone", "Cython", "Java", "Javascript", "M2001", "M4", "M#", "Machine code", "MAD (Michigan Algorithm Decoder)", "MAD/I", "Magik", "Magma", "make", "Maple", "MAPPER now part of BIS", "MARK-IV now VISION:BUILDER", "Mary", "MASM Microsoft Assembly x86", "MATH-MATIC", "Mathematica", "MATLAB", "Maxima (see also Macsyma)", "Max (Max Msp – Graphical Programming Environment)", "Maya (MEL)", "MDL", "Mercury", "Mesa", "Metafont", "Microcode", "MicroScript", "MIIS", "Milk (programming language)", "MIMIC", "Mirah", "Miranda", "MIVA Script", "ML", "Model 204", "Modelica", "Modula", "Modula-2", "Modula-3", "Mohol", "MOO", "Mortran", "Mouse", "MPD", "Mathcad", "MSIL – deprecated name for CIL", "MSL", "MUMPS", "Mystic Programming L"],
+            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
+            }
+        });
+
+        new Tagify(input2, {
+            whitelist: ["A# .NET", "A# (Axiom)", "A-0 System", "A+", "A++", "ABAP", "ABC", "ABC ALGOL", "ABSET", "ABSYS", "ACC", "Accent", "Ace DASL", "ACL2", "Avicsoft", "ACT-III", "Action!", "ActionScript", "Ada", "Adenine", "Agda", "Agilent VEE", "Agora", "AIMMS", "Alef", "ALF", "ALGOL 58", "ALGOL 60", "ALGOL 68", "ALGOL W", "Alice", "Alma-0", "AmbientTalk", "Amiga E", "AMOS", "AMPL", "Apex (Salesforce.com)", "APL", "AppleScript", "Arc", "ARexx", "Argus", "AspectJ", "Assembly language", "ATS", "Ateji PX", "AutoHotkey", "Autocoder", "AutoIt", "AutoLISP / Visual LISP", "Averest", "AWK", "Axum", "Active Server Pages", "ASP.NET", "B", "Babbage", "Bash", "BASIC", "bc", "BCPL", "BeanShell", "Batch (Windows/Dos)", "Bertrand", "BETA", "Bigwig", "Bistro", "BitC", "BLISS", "Blockly", "BlooP", "Blue", "Boo", "Boomerang", "Bourne shell (including bash and ksh)", "BREW", "BPEL", "B", "C--", "C++ – ISO/IEC 14882", "C# – ISO/IEC 23270", "C/AL", "Caché ObjectScript", "C Shell", "Caml", "Cayenne", "CDuce", "Cecil", "Cesil", "Céu", "Ceylon", "CFEngine", "CFML", "Cg", "Ch", "Chapel", "Charity", "Charm", "Chef", "CHILL", "CHIP-8", "chomski", "ChucK", "CICS", "Cilk", "Citrine (programming language)", "CL (IBM)", "Claire", "Clarion", "Clean", "Clipper", "CLIPS", "CLIST", "Clojure", "CLU", "CMS-2", "COBOL – ISO/IEC 1989", "CobolScript – COBOL Scripting language", "Cobra", "CODE", "CoffeeScript", "ColdFusion", "COMAL", "Combined Programming Language (CPL)", "COMIT", "Common Intermediate Language (CIL)", "Common Lisp (also known as CL)", "COMPASS", "Component Pascal", "Constraint Handling Rules (CHR)", "COMTRAN", "Converge", "Cool", "Coq", "Coral 66", "Corn", "CorVision", "COWSEL", "CPL", "CPL", "Cryptol", "csh", "Csound", "CSP", "CUDA", "Curl", "Curry", "Cybil", "Cyclone", "Cython", "Java", "Javascript", "M2001", "M4", "M#", "Machine code", "MAD (Michigan Algorithm Decoder)", "MAD/I", "Magik", "Magma", "make", "Maple", "MAPPER now part of BIS", "MARK-IV now VISION:BUILDER", "Mary", "MASM Microsoft Assembly x86", "MATH-MATIC", "Mathematica", "MATLAB", "Maxima (see also Macsyma)", "Max (Max Msp – Graphical Programming Environment)", "Maya (MEL)", "MDL", "Mercury", "Mesa", "Metafont", "Microcode", "MicroScript", "MIIS", "Milk (programming language)", "MIMIC", "Mirah", "Miranda", "MIVA Script", "ML", "Model 204", "Modelica", "Modula", "Modula-2", "Modula-3", "Mohol", "MOO", "Mortran", "Mouse", "MPD", "Mathcad", "MSIL – deprecated name for CIL", "MSL", "MUMPS", "Mystic Programming L"],
+            maxTags: 10,
+            dropdown: {
+                maxItems: 20,           // <- mixumum allowed rendered suggestions
+                classname: "", // <- 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
+            }
+        });
+    }
+
+    var example4 = function (element) {
+        // The DOM elements you wish to replace with Tagify
+        var input1 = document.querySelector("#kt_tagify_8");
+
+        // Initialize Tagify components on the above inputs
+        new Tagify(input1);
+    }
+
+    const exampleCountry = () => {
+        var tagify = new Tagify(document.querySelector('#kt_tagify_country'), {
+            delimiters: null,
+            templates: {
+                tag: function (tagData) {
+                    const countryPath = hostUrl + 'media/flags/' + tagData.value.toLowerCase().replace(/\s+/g, '-') + '.svg';
+                    try {
+                        // _ESCAPE_START_
+                        return `<tag title='${tagData.value}' contenteditable='false' spellcheck="false" class='tagify__tag ${tagData.class ? tagData.class : ""}' ${this.getAttributes(tagData)}>
+                                <x title='remove tag' class='tagify__tag__removeBtn'></x>
+                                <div class="d-flex align-items-center">
+                                    ${tagData.code ?
+                                `<img onerror="this.style.visibility = 'hidden'" class="w-25px rounded-circle me-2" src='${countryPath}' />` : ''
+                            }
+                                    <span class='tagify__tag-text'>${tagData.value}</span>
+                                </div>
+                            </tag>`
+                        // _ESCAPE_END_
+                    }
+                    catch (err) { }
+                },
+
+                dropdownItem: function (tagData) {
+                    const countryPath = hostUrl + 'media/flags/' + tagData.value.toLowerCase().replace(/\s+/g, '-') + '.svg';
+                    try {
+                        // _ESCAPE_START_
+                        return `<div class='tagify__dropdown__item ${tagData.class ? tagData.class : ""}'>
+                                    <img onerror="this.style.visibility = 'hidden'" class="w-25px rounded-circle me-2"
+                                         src='${countryPath}' />
+                                    <span>${tagData.value}</span>
+                                </div>`
+                        // _ESCAPE_END_
+                    }
+                    catch (err) { }
+                }
+            },
+            enforceWhitelist: true,
+            whitelist: [
+                { value: 'Argentina', code: 'AR' },
+                { value: 'Australia', code: 'AU', searchBy: 'beach, sub-tropical' },
+                { value: 'Austria', code: 'AT' },
+                { value: 'Brazil', code: 'BR' },
+                { value: 'China', code: 'CN' },
+                { value: 'Egypt', code: 'EG' },
+                { value: 'Finland', code: 'FI' },
+                { value: 'France', code: 'FR' },
+                { value: 'Germany', code: 'DE' },
+                { value: 'Hong Kong', code: 'HK' },
+                { value: 'Hungary', code: 'HU' },
+                { value: 'Iceland', code: 'IS' },
+                { value: 'India', code: 'IN' },
+                { value: 'Indonesia', code: 'ID' },
+                { value: 'Italy', code: 'IT' },
+                { value: 'Jamaica', code: 'JM' },
+                { value: 'Japan', code: 'JP' },
+                { value: 'Jersey', code: 'JE' },
+                { value: 'Luxembourg', code: 'LU' },
+                { value: 'Mexico', code: 'MX' },
+                { value: 'Netherlands', code: 'NL' },
+                { value: 'New Zealand', code: 'NZ' },
+                { value: 'Norway', code: 'NO' },
+                { value: 'Philippines', code: 'PH' },
+                { value: 'Singapore', code: 'SG' },
+                { value: 'South Korea', code: 'KR' },
+                { value: 'Sweden', code: 'SE' },
+                { value: 'Switzerland', code: 'CH' },
+                { value: 'Thailand', code: 'TH' },
+                { value: 'Ukraine', code: 'UA' },
+                { value: 'United Kingdom', code: 'GB' },
+                { value: 'United States', code: 'US' },
+                { value: 'Vietnam', code: 'VN' }
+            ],
+            dropdown: {
+                enabled: 1, // suggest tags after a single character input
+                classname: 'extra-properties' // custom class for the suggestions dropdown
+            } // map tags' values to this property name, so this property will be the actual value and not the printed value on the screen
+        })
+
+        // add the first 2 tags and makes them readonly
+        var tagsToAdd = tagify.settings.whitelist.slice(0, 2);
+        tagify.addTags(tagsToAdd);
+    }
+
+    const exampleUsers = () => {
+        var inputElm = document.querySelector('#kt_tagify_users');
+
+        const usersList = [
+            { value: 1, name: 'Emma Smith', avatar: 'avatars/150-1.jpg', email: 'e.smith@kpmg.com.au' },
+            { value: 2, name: 'Max Smith', avatar: 'avatars/150-26.jpg', email: 'max@kt.com' },
+            { value: 3, name: 'Sean Bean', avatar: 'avatars/150-4.jpg', email: 'sean@dellito.com' },
+            { value: 4, name: 'Brian Cox', avatar: 'avatars/150-15.jpg', email: 'brian@exchange.com' },
+            { value: 5, name: 'Francis Mitcham', avatar: 'avatars/150-8.jpg', email: 'f.mitcham@kpmg.com.au' },
+            { value: 6, name: 'Dan Wilson', avatar: 'avatars/150-6.jpg', email: 'dam@consilting.com' },
+            { value: 7, name: 'Ana Crown', avatar: 'avatars/150-7.jpg', email: 'ana.cf@limtel.com' },
+            { value: 8, name: 'John Miller', avatar: 'avatars/150-17.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"
+            }]
+            )
+        }
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            example1();
+            example2();
+            example3();
+            example4();
+            exampleCountry();
+            exampleUsers();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormsTagifyDemos.init();
+});

assets/js/custom/documentation/general/blockui.js

@@ -0,0 +1,109 @@
+"use strict";
+
+// Class definition
+var KTGeneralBlockUI = function() {
+    // Private functions
+    var example1 = function() {
+        var button = document.querySelector("#kt_block_ui_1_button");
+        var target = document.querySelector("#kt_block_ui_1_target");
+
+        var blockUI = new KTBlockUI(target);
+
+        button.addEventListener("click", function() {
+            if (blockUI.isBlocked()) {
+                blockUI.release();
+                button.innerText = "Block";
+            } else {
+                blockUI.block();
+                button.innerText = "Release";
+            }
+        });
+    }
+
+    var example2 = function() {
+        var button = document.querySelector("#kt_block_ui_2_button");
+        var target = document.querySelector("#kt_block_ui_2_target");
+
+        var blockUI = new KTBlockUI(target, {
+            message: '<div class="blockui-message"><span class="spinner-border text-primary"></span> Loading...</div>',
+        });
+
+        button.addEventListener("click", function() {
+            if (blockUI.isBlocked()) {
+                blockUI.release();
+                button.innerText = "Block";
+            } else {
+                blockUI.block();
+                button.innerText = "Release";
+            }
+        });
+    }
+
+    var example3 = function() {
+        var button = document.querySelector("#kt_block_ui_3_button");
+        var target = document.querySelector("#kt_block_ui_3_target");
+
+        var blockUI = new KTBlockUI(target, {
+            overlayClass: 'bg-danger bg-opacity-25',
+        });
+
+        button.addEventListener("click", function() {
+            if (blockUI.isBlocked()) {
+                blockUI.release();
+                button.innerText = "Block";
+            } else {
+                blockUI.block();
+                button.innerText = "Release";
+            }
+        });
+    }
+
+    var example4 = function() {
+        var button = document.querySelector("#kt_block_ui_4_button");
+        var target = document.querySelector("#kt_block_ui_4_target");
+
+        var blockUI = new KTBlockUI(target);
+
+        button.addEventListener("click", function(e) {
+            e.preventDefault();
+
+            blockUI.block();
+
+            setTimeout(function() {
+                blockUI.release();
+            }, 3000);
+        });
+    }
+
+    var example5 = function() {
+        var button = document.querySelector("#kt_block_ui_5_button");
+
+        var blockUI = new KTBlockUI(document.body);
+
+        button.addEventListener("click", function(e) {
+            e.preventDefault();
+
+            blockUI.block();
+
+            setTimeout(function() {
+                //blockUI.release();
+            }, 3000);
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function() {
+            example1();
+            example2();
+            example3();
+            example4();
+            example5();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTGeneralBlockUI.init();
+});

assets/js/custom/documentation/general/cropper.js

@@ -0,0 +1,124 @@
+'use strict';
+
+// Class definition
+var KTCropperDemo = function () {
+
+	// Private functions
+	var initCropperDemo = function () {
+		var image = document.getElementById('image');
+
+		var options = {
+			crop: function (event) {
+				document.getElementById('dataX').value = Math.round(event.detail.x);
+				document.getElementById('dataY').value = Math.round(event.detail.y);
+				document.getElementById('dataWidth').value = Math.round(event.detail.width);
+				document.getElementById('dataHeight').value = Math.round(event.detail.height);
+				document.getElementById('dataRotate').value = event.detail.rotate;
+				document.getElementById('dataScaleX').value = event.detail.scaleX;
+				document.getElementById('dataScaleY').value = event.detail.scaleY;
+
+				var lg = document.getElementById('cropper-preview-lg');
+				lg.innerHTML = '';
+				lg.appendChild(cropper.getCroppedCanvas({ width: 256, height: 160 }));
+
+				var md = document.getElementById('cropper-preview-md');
+				md.innerHTML = '';
+				md.appendChild(cropper.getCroppedCanvas({ width: 128, height: 80 }));
+
+				var sm = document.getElementById('cropper-preview-sm');
+				sm.innerHTML = '';
+				sm.appendChild(cropper.getCroppedCanvas({ width: 64, height: 40 }));
+
+				var xs = document.getElementById('cropper-preview-xs');
+				xs.innerHTML = '';
+				xs.appendChild(cropper.getCroppedCanvas({ width: 32, height: 20 }));
+			},
+		};
+
+		var cropper = new Cropper(image, options);
+
+		var buttons = document.getElementById('cropper-buttons');
+		var methods = buttons.querySelectorAll('[data-method]');
+		methods.forEach(function (button) {
+			button.addEventListener('click', function (e) {
+				var method = button.getAttribute('data-method');
+				var option = button.getAttribute('data-option');
+				var option2 = button.getAttribute('data-second-option');
+
+				try {
+					option = JSON.parse(option);
+				}
+				catch (e) {
+				}
+
+				var result;
+				if (!option2) {
+					result = cropper[method](option, option2);
+				}
+				else if (option) {
+					result = cropper[method](option);
+				}
+				else {
+					result = cropper[method]();
+				}
+
+				if (method === 'getCroppedCanvas') {
+					var modal = document.getElementById('getCroppedCanvasModal');
+					var modalBody = modal.querySelector('.modal-body');
+					modalBody.innerHTML = '';
+					modalBody.appendChild(result);
+				}
+
+				var input = document.querySelector('#putData');
+				try {
+					input.value = JSON.stringify(result);
+				}
+				catch (e) {
+					if (!result) {
+						input.value = result;
+					}
+				}
+			});
+		});
+
+		// set aspect ratio option buttons
+		var radioOptions = document.getElementById('setAspectRatio').querySelectorAll('[name="aspectRatio"]');
+		radioOptions.forEach(function (button) {
+			button.addEventListener('click', function (e) {
+				cropper.setAspectRatio(e.target.value);
+			});
+		});
+
+		// set view mode
+		var viewModeOptions = document.getElementById('viewMode').querySelectorAll('[name="viewMode"]');
+		viewModeOptions.forEach(function (button) {
+			button.addEventListener('click', function (e) {
+				cropper.destroy();
+				cropper = new Cropper(image, Object.assign({}, options, { viewMode: e.target.value }));
+			});
+		});
+
+		var toggleoptions = document.getElementById('toggleOptionButtons').querySelectorAll('[type="checkbox"]');
+		toggleoptions.forEach(function (checkbox) {
+			checkbox.addEventListener('click', function (e) {
+				var appendOption = {};
+				appendOption[e.target.getAttribute('name')] = e.target.checked;
+				options = Object.assign({}, options, appendOption);
+				cropper.destroy();
+				cropper = new Cropper(image, options);
+			})
+		});
+	};
+
+	return {
+		// public functions
+		init: function () {
+			initCropperDemo();
+		},
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+	KTCropperDemo.init();
+});

assets/js/custom/documentation/general/datatables/advanced.js

@@ -0,0 +1,160 @@
+"use strict";
+
+// Class definition
+var KTDatatablesAdvanced = function () {
+    // Private functions
+
+    var _initExample1 = function() {
+        var status = {
+            1: {"title": "Pending", "state": "primary"},
+            2: {"title": "Delivered", "state": "danger"},
+            3: {"title": "Canceled", "state": "primary"},
+            4: {"title": "Success", "state": "success"},
+            5: {"title": "Info", "state": "info"},
+            6: {"title": "Danger", "state": "danger"},
+            7: {"title": "Warning", "state": "warning"},
+        };
+
+        $("#kt_datatable_example_1").DataTable({
+            "columnDefs": [
+                {
+                    // The `data` parameter refers to the data for the cell (defined by the
+                    // `data` option, which defaults to the column being worked with, in
+                    // this case `data: 0`.
+                    "render": function ( data, type, row ) {
+                        var index = KTUtil.getRandomInt(1, 7);
+
+                        return data + '<span class="ms-2 badge badge-light-' + status[index]['state'] + ' fw-bold">' + status[index]['title'] + '</span>';
+                    },
+                    "targets": 1
+                }
+            ]
+        });
+    }
+
+    var _initExample2 = function() {
+        $("#kt_datatable_example_2").DataTable({
+            "columnDefs": [ {
+                "visible": false,
+                "targets": -1
+            }]
+        });
+    }
+
+    var _initExample3 = function() {
+        var groupColumn = 2;
+
+        var table = $('#kt_datatable_example_3').DataTable({
+            "columnDefs": [{
+                "visible": false,
+                "targets": groupColumn
+            }],
+            "order": [
+                [groupColumn, 'asc']
+            ],
+            "displayLength": 25,
+            "drawCallback": function(settings) {
+                var api = this.api();
+                var rows = api.rows({
+                    page: 'current'
+                }).nodes();
+                var last = null;
+
+                api.column(groupColumn, {
+                    page: 'current'
+                }).data().each(function(group, i) {
+                    if (last !== group) {
+                        $(rows).eq(i).before(
+                            '<tr class="group fs-5 fw-bolder"><td colspan="5">' + group + '</td></tr>'
+                        );
+
+                        last = group;
+                    }
+                });
+            }
+        });
+
+        // Order by the grouping
+        $('#kt_datatable_example_3 tbody').on('click', 'tr.group', function() {
+            var currentOrder = table.order()[0];
+            if (currentOrder[0] === groupColumn && currentOrder[1] === 'asc') {
+                table.order([groupColumn, 'desc']).draw();
+            } else {
+                table.order([groupColumn, 'asc']).draw();
+            }
+        });
+    }
+
+    var _initExample4 = function() {
+        $("#kt_datatable_example_4").DataTable({
+            "footerCallback": function ( row, data, start, end, display ) {
+                var api = this.api(), data;
+     
+                // Remove the formatting to get integer data for summation
+                var intVal = function ( i ) {
+                    return typeof i === "string" ?
+                        i.replace(/[\$,]/g, "")*1 :
+                        typeof i === "number" ?
+                            i : 0;
+                };
+     
+                // Total over all pages
+                var total = api
+                    .column( 4 )
+                    .data()
+                    .reduce( function (a, b) {
+                        return intVal(a) + intVal(b);
+                    }, 0 );
+     
+                // Total over this page
+                var pageTotal = api
+                    .column( 4, { page: "current"} )
+                    .data()
+                    .reduce( function (a, b) {
+                        return intVal(a) + intVal(b);
+                    }, 0 );
+     
+                // Update footer
+                $( api.column( 4 ).footer() ).html(
+                    "$"+pageTotal +" ( $"+ total +" total)"
+                );
+            }
+        });
+    }
+
+    var _initExample5 = function() {
+        $("#kt_datatable_example_5").DataTable({
+            "language": {		
+                "lengthMenu": "Show _MENU_",
+            },
+            "dom": 
+                "<'row'" +
+                "<'col-sm-6 d-flex align-items-center justify-conten-start'l>" +
+                "<'col-sm-6 d-flex align-items-center justify-content-end'f>" +
+                ">" +
+                
+                "<'table-responsive'tr>" +
+                
+                "<'row'" + 
+                "<'col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'i>" + 
+                "<'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>" +
+                ">"
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            _initExample1();
+            _initExample2();
+            _initExample3();
+            _initExample4();
+            _initExample5();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTDatatablesAdvanced.init();
+});

assets/js/custom/documentation/general/datatables/api.js

@@ -0,0 +1,57 @@
+"use strict";
+
+// Class definition
+var KTDatatablesApi = function () {
+    // Private functions
+
+    var _initExample1 = function() {
+        var t = $("#kt_datatable_example_1").DataTable();
+        var counter = 1;
+    
+        $("#kt_datatable_example_1_addrow").on( "click", function () {
+            t.row.add( [
+                counter +".1",
+                counter +".2",
+                counter +".3",
+                counter +".4",
+                counter +".5",
+            ] ).draw( false );
+    
+            counter++;
+        } );
+    
+        // Automatically add a first row of data
+        $("#kt_datatable_example_1_addrow").click();
+    }
+
+    var _initExample2 = function() {
+        var table = $("#kt_datatable_example_2").DataTable({
+            columnDefs: [{
+                orderable: false,
+                targets: [1,2,3]
+            }]
+        });
+     
+        $("#kt_datatable_example_2_submit").click( function() {
+            var data = table.$("input, select").serialize();
+            alert(
+                "The following data would have been submitted to the server: \n\n"+
+                data.substr( 0, 120 )+"..."
+            );
+            return false;
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            _initExample1();
+            _initExample2();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTDatatablesApi.init();
+});

assets/js/custom/documentation/general/datatables/basic.js

@@ -0,0 +1,47 @@
+"use strict";
+
+// Class definition
+var KTDatatablesBasic = function () {
+    // Private functions
+
+    var _initExample1 = function() {
+        $("#kt_datatable_example_1").DataTable();
+    }
+
+    var _initExample2 = function() {
+        $("#kt_datatable_example_2").DataTable({
+            "scrollY":        "500px",
+            "scrollCollapse": true,
+            "paging":         false,
+            "dom":   "<'table-responsive'tr>" 
+        });
+    }
+
+    var _initExample3 = function() {
+        $("#kt_datatable_example_3").DataTable({
+            "scrollX": true
+        });
+    }
+
+    var _initExample4 = function() {
+        $("#kt_datatable_example_4").DataTable({
+            "scrollY": 300,
+            "scrollX": true
+        });
+    }  
+
+    // Public methods
+    return {
+        init: function () {
+            _initExample1();
+            _initExample2();
+            _initExample3();
+            _initExample4();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTDatatablesBasic.init();
+});

assets/js/custom/documentation/general/datatables/server-side.js

@@ -0,0 +1,355 @@
+"use strict";
+
+// Class definition
+var KTDatatablesServerSide = function () {
+    // Shared variables
+    var table;
+    var dt;
+    var filterPayment;
+
+    // Private functions
+    var initDatatable = function () {
+        dt = $("#kt_datatable_example_1").DataTable({
+            searchDelay: 500,
+            processing: true,
+            serverSide: true,
+            order: [[5, 'desc']],
+            stateSave: true,
+            select: {
+                style: 'os',
+                selector: 'td:first-child',
+                className: 'row-selected'
+            },
+            ajax: {
+                url: "https://preview.keenthemes.com/api/datatables.php",
+            },
+            columns: [
+                { data: 'RecordID' },
+                { data: 'Name' },
+                { data: 'Email' },
+                { data: 'Company' },
+                { data: 'CreditCardNumber' },
+                { data: 'Datetime' },
+                { data: null },
+            ],
+            columnDefs: [
+                {
+                    targets: 0,
+                    orderable: false,
+                    render: function (data) {
+                        return `
+                            <div class="form-check form-check-sm form-check-custom form-check-solid">
+                                <input class="form-check-input" type="checkbox" value="${data}" />
+                            </div>`;
+                    }
+                },
+                {
+                    targets: 4,
+                    render: function (data, type, row) {
+                        return `<img src="${hostUrl}media/svg/card-logos/${row.CreditCardType}.svg" class="w-35px me-3" alt="${row.CreditCardType}">` + data;
+                    }
+                },
+                {
+                    targets: -1,
+                    data: null,
+                    orderable: false,
+                    className: 'text-end',
+                    render: function (data, type, row) {
+                        return `
+                            <a href="#" class="btn btn-light btn-active-light-primary btn-sm" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-flip="top-end">
+                                Actions
+                                <span class="svg-icon svg-icon-5 m-0">
+                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
+                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                                            <polygon points="0 0 24 0 24 24 0 24"></polygon>
+                                            <path d="M6.70710678,15.7071068 C6.31658249,16.0976311 5.68341751,16.0976311 5.29289322,15.7071068 C4.90236893,15.3165825 4.90236893,14.6834175 5.29289322,14.2928932 L11.2928932,8.29289322 C11.6714722,7.91431428 12.2810586,7.90106866 12.6757246,8.26284586 L18.6757246,13.7628459 C19.0828436,14.1360383 19.1103465,14.7686056 18.7371541,15.1757246 C18.3639617,15.5828436 17.7313944,15.6103465 17.3242754,15.2371541 L12.0300757,10.3841378 L6.70710678,15.7071068 Z" fill="#000000" fill-rule="nonzero" transform="translate(12.000003, 11.999999) rotate(-180.000000) translate(-12.000003, -11.999999)"></path>
+                                        </g>
+                                    </svg>
+                                </span>
+                            </a>
+                            <!--begin::Menu-->
+                            <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4" data-kt-menu="true">
+                                <!--begin::Menu item-->
+                                <div class="menu-item px-3">
+                                    <a href="#" class="menu-link px-3" data-kt-docs-table-filter="edit_row">
+                                        Edit
+                                    </a>
+                                </div>
+                                <!--end::Menu item-->
+                                
+                                <!--begin::Menu item-->
+                                <div class="menu-item px-3">
+                                    <a href="#" class="menu-link px-3" data-kt-docs-table-filter="delete_row">
+                                        Delete
+                                    </a>
+                                </div>
+                                <!--end::Menu item-->
+                            </div>
+                            <!--end::Menu-->
+                        `;
+                    },
+                },
+            ],
+            // Add data-filter attribute
+            createdRow: function (row, data, dataIndex) {
+                $(row).find('td:eq(4)').attr('data-filter', data.CreditCardType);
+            }
+        });
+
+        table = dt.$;
+
+        // Re-init functions on every table re-draw -- more info: https://datatables.net/reference/event/draw
+        dt.on('draw', function () {
+            initToggleToolbar();
+            toggleToolbars();
+            handleDeleteRows();
+            KTMenu.createInstances();
+        });
+    }
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = function () {
+        const filterSearch = document.querySelector('[data-kt-docs-table-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            dt.search(e.target.value).draw();
+        });
+    }
+
+    // Filter Datatable
+    var handleFilterDatatable = () => {
+        // Select filter options
+        filterPayment = document.querySelectorAll('[data-kt-docs-table-filter="payment_type"] [name="payment_type"]');
+        const filterButton = document.querySelector('[data-kt-docs-table-filter="filter"]');
+
+        // Filter datatable on submit
+        filterButton.addEventListener('click', function () {
+            // Get filter values
+            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 = '';
+                }
+            });
+
+            // Filter datatable --- official docs reference: https://datatables.net/reference/api/search()
+            dt.search(paymentValue).draw();
+        });
+    }
+
+    // Delete customer
+    var handleDeleteRows = () => {
+        // Select all delete buttons
+        const deleteButtons = document.querySelectorAll('[data-kt-docs-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) {
+                        // Simulate delete request -- for demo purpose only
+                        Swal.fire({
+                            text: "Deleting " + customerName,
+                            icon: "info",
+                            buttonsStyling: false,
+                            showConfirmButton: false,
+                            timer: 2000
+                        }).then(function () {
+                            Swal.fire({
+                                text: "You have deleted " + customerName + "!.",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn fw-bold btn-primary",
+                                }
+                            }).then(function () {
+                                // delete row data from server and re-draw datatable
+                                dt.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-docs-table-filter="reset"]');
+
+        // Reset datatable
+        resetButton.addEventListener('click', function () {
+            // Reset payment type
+            filterPayment[0].checked = true;
+
+            // Reset datatable --- official docs reference: https://datatables.net/reference/api/search()
+            dt.search('').draw();
+        });
+    }
+
+    // Init toggle toolbar
+    var initToggleToolbar = function () {
+        // Toggle selected action toolbar
+        // Select all checkboxes
+        const container = document.querySelector('#kt_datatable_example_1');
+        const checkboxes = container.querySelectorAll('[type="checkbox"]');
+
+        // Select elements
+        const deleteSelected = document.querySelector('[data-kt-docs-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,
+                showLoaderOnConfirm: true,
+                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) {
+                    // Simulate delete request -- for demo purpose only
+                    Swal.fire({
+                        text: "Deleting selected customers",
+                        icon: "info",
+                        buttonsStyling: false,
+                        showConfirmButton: false,
+                        timer: 2000
+                    }).then(function () {
+                        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 () {
+                            // delete row data from server and re-draw datatable
+                            dt.draw();
+                        });
+
+                        // Remove header checked box
+                        const headerCheckbox = container.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
+    var toggleToolbars = function () {
+        // Define variables
+        const container = document.querySelector('#kt_datatable_example_1');
+        const toolbarBase = document.querySelector('[data-kt-docs-table-toolbar="base"]');
+        const toolbarSelected = document.querySelector('[data-kt-docs-table-toolbar="selected"]');
+        const selectedCount = document.querySelector('[data-kt-docs-table-select="selected_count"]');
+
+        // Select refreshed checkbox DOM elements 
+        const allCheckboxes = container.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 () {
+            initDatatable();
+            handleSearchDatatable();
+            initToggleToolbar();
+            handleFilterDatatable();
+            handleDeleteRows();
+            handleResetForm();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTDatatablesServerSide.init();
+});

assets/js/custom/documentation/general/draggable/cards.js

@@ -0,0 +1,35 @@
+"use strict";
+
+// Class definition
+var KTDraggableCards = function() {
+    // Private functions
+    var exampleCards = function() {
+        var containers = document.querySelectorAll('.draggable-zone');
+
+        if (containers.length === 0) {
+            return false;
+        }
+
+        var swappable = new Sortable.default(containers, {
+            draggable: '.draggable',
+            handle: '.draggable .draggable-handle',
+            mirror: {
+                //appendTo: selector,
+                appendTo: 'body',
+                constrainDimensions: true
+            }
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function() {
+            exampleCards();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTDraggableCards.init();
+});

assets/js/custom/documentation/general/draggable/multiple-containers.js

@@ -0,0 +1,35 @@
+"use strict";
+
+// Class definition
+var KTDraggableMultiple = function() {
+    // Private functions
+    var exampleMultiple = function() {
+        var containers = document.querySelectorAll('.draggable-zone');
+
+        if (containers.length === 0) {
+            return false;
+        }
+
+        var swappable = new Sortable.default(containers, {
+            draggable: '.draggable',
+            handle: '.draggable .draggable-handle',
+            mirror: {
+                //appendTo: selector,
+                appendTo: 'body',
+                constrainDimensions: true
+            }
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function() {
+            exampleMultiple();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTDraggableMultiple.init();
+});

assets/js/custom/documentation/general/draggable/restricted.js

@@ -0,0 +1,83 @@
+"use strict";
+
+// Class definition
+var KTDraggableRestricted = function () {
+    // Private functions
+    var exampleRestricted = function () {
+        var containers = document.querySelectorAll('.draggable-zone');
+        const restrcitedWrapper = document.querySelector('[data-kt-draggable-level="restricted"]');
+
+        if (containers.length === 0) {
+            return false;
+        }
+
+        var droppable = new Droppable.default(containers, {
+            draggable: '.draggable',
+            dropzone: '.draggable-zone',
+            handle: '.draggable .draggable-handle',
+            mirror: {
+                //appendTo: selector,
+                appendTo: 'body',
+                constrainDimensions: true
+            }
+        });
+
+        // Define draggable element variable for permissions level
+        let droppableOrigin;
+
+        // Handle drag start event -- more info: https://shopify.github.io/draggable/docs/class/src/Draggable/DragEvent/DragEvent.js~DragEvent.html
+        droppable.on('drag:start', (e) => {
+            droppableOrigin = e.originalSource.getAttribute('data-kt-draggable-level');
+        });
+
+        // Handle drag over event -- more info: https://shopify.github.io/draggable/docs/class/src/Draggable/DragEvent/DragEvent.js~DragOverEvent.html
+        droppable.on('drag:over', (e) => {
+            const isRestricted = e.overContainer.closest('[data-kt-draggable-level="restricted"]');
+            if (isRestricted) {
+                if (droppableOrigin !== 'admin') {
+                    restrcitedWrapper.classList.add('bg-light-danger');
+                } else {
+                    restrcitedWrapper.classList.remove('bg-light-danger');
+                }
+            } else {
+                restrcitedWrapper.classList.remove('bg-light-danger');
+            }
+        });
+
+        // Handle drag stop event -- more info: https://shopify.github.io/draggable/docs/class/src/Draggable/DragEvent/DragEvent.js~DragStopEvent.html
+        droppable.on('drag:stop', (e) => {
+            // remove all draggable occupied limit
+            containers.forEach(c => {
+                c.classList.remove('draggable-dropzone--occupied');
+            });
+
+            // Remove restricted alert
+            restrcitedWrapper.classList.remove('bg-light-danger');
+        });
+
+        // Handle drop event -- https://shopify.github.io/draggable/docs/class/src/Droppable/DroppableEvent/DroppableEvent.js~DroppableDroppedEvent.html
+        droppable.on('droppable:dropped', (e) => {
+            const isRestricted = e.dropzone.closest('[data-kt-draggable-level="restricted"]');
+            // Detect if drop container is restricted
+            if (isRestricted) {
+                // Check if dragged element has permission level
+                if (droppableOrigin !== 'admin') {
+                    restrcitedWrapper.classList.add('bg-light-danger');
+                    e.cancel();
+                }
+            }
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleRestricted();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTDraggableRestricted.init();
+});

assets/js/custom/documentation/general/draggable/swappable.js

@@ -0,0 +1,35 @@
+"use strict";
+
+// Class definition
+var KTDraggableSwappable = function() {
+    // Private functions
+    var exampleSwappable = function() {
+        var containers = document.querySelectorAll('.draggable-zone');
+
+        if (containers.length === 0) {
+            return false;
+        }
+
+        var swappable = new Swappable.default(containers, {
+            draggable: '.draggable',
+            handle: '.draggable .draggable-handle',
+            mirror: {
+                //appendTo: selector,
+                appendTo: 'body',
+                constrainDimensions: true
+            }
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function() {
+            exampleSwappable();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTDraggableSwappable.init();
+});

assets/js/custom/documentation/general/drawer.js

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

assets/js/custom/documentation/general/fullcalendar/background-events.js

@@ -0,0 +1,93 @@
+"use strict";
+
+// Class definition
+var KTGeneralFullCalendarEventsDemos = function() {
+	// Private functions
+
+	var exampleBackgroundEvents = function() {
+		// Define colors
+		var green = KTUtil.getCssVariableValue('--bs-active-success');
+		var red = KTUtil.getCssVariableValue('--bs-active-danger');
+
+		// Initialize Fullcalendar -- for more info please visit the official site: https://fullcalendar.io/demos
+		var calendarEl = document.getElementById('kt_docs_fullcalendar_background_events');
+
+		var calendar = new FullCalendar.Calendar(calendarEl, {
+			headerToolbar: {
+				left: 'prev,next today',
+				center: 'title',
+				right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
+			},
+			initialDate: '2020-09-12',
+			navLinks: true, // can click day/week names to navigate views
+			businessHours: true, // display business hours
+			editable: true,
+			selectable: true,
+			events: [{
+					title: 'Business Lunch',
+					start: '2020-09-03T13:00:00',
+					constraint: 'businessHours'
+				},
+				{
+					title: 'Meeting',
+					start: '2020-09-13T11:00:00',
+					constraint: 'availableForMeeting', // defined below
+					color: green
+				},
+				{
+					title: 'Conference',
+					start: '2020-09-18',
+					end: '2020-09-20'
+				},
+				{
+					title: 'Party',
+					start: '2020-09-29T20:00:00'
+				},
+
+				// areas where "Meeting" must be dropped
+				{
+					groupId: 'availableForMeeting',
+					start: '2020-09-11',
+					end: '2020-09-11',
+					display: 'background',
+				},
+				{
+					groupId: 'availableForMeeting',
+					start: '2020-09-13',
+					end: '2020-09-13',
+					display: 'background',
+				},
+
+				// red areas where no events can be dropped
+				{
+					start: '2020-09-24',
+					end: '2020-09-28',
+					overlap: false,
+					display: 'background',
+					color: red
+				},
+				{
+					start: '2020-09-06',
+					end: '2020-09-08',
+					overlap: false,
+					display: 'background',
+					color: red
+				}
+			]
+		});
+
+		calendar.render();
+	}
+
+	return {
+		// Public Functions
+		init: function() {
+			exampleBackgroundEvents();
+		}
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+	KTGeneralFullCalendarEventsDemos.init();
+});

assets/js/custom/documentation/general/fullcalendar/basic.js

@@ -0,0 +1,171 @@
+"use strict";
+
+// Class definition
+var KTGeneralFullCalendarBasicDemos = function () {
+    // Private functions
+
+    var exampleBasic = function () {
+        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');
+
+        var calendarEl = document.getElementById('kt_docs_fullcalendar_basic');
+        var calendar = new FullCalendar.Calendar(calendarEl, {
+            headerToolbar: {
+                left: 'prev,next today',
+                center: 'title',
+                right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
+            },
+
+            height: 800,
+            contentHeight: 780,
+            aspectRatio: 3,  // see: https://fullcalendar.io/docs/aspectRatio
+
+            nowIndicator: true,
+            now: TODAY + 'T09:25:00', // just for demo
+
+            views: {
+                dayGridMonth: { buttonText: 'month' },
+                timeGridWeek: { buttonText: 'week' },
+                timeGridDay: { buttonText: 'day' }
+            },
+
+            initialView: 'dayGridMonth',
+            initialDate: TODAY,
+
+            editable: true,
+            dayMaxEvents: true, // allow "more" link when too many events
+            navLinks: true,
+            events: [
+                {
+                    title: 'All Day Event',
+                    start: YM + '-01',
+                    description: 'Toto lorem ipsum dolor sit incid idunt ut',
+                    className: "fc-event-danger fc-event-solid-warning"
+                },
+                {
+                    title: 'Reporting',
+                    start: YM + '-14T13:30:00',
+                    description: 'Lorem ipsum dolor incid idunt ut labore',
+                    end: YM + '-14',
+                    className: "fc-event-success"
+                },
+                {
+                    title: 'Company Trip',
+                    start: YM + '-02',
+                    description: 'Lorem ipsum dolor sit tempor incid',
+                    end: YM + '-03',
+                    className: "fc-event-primary"
+                },
+                {
+                    title: 'ICT Expo 2017 - Product Release',
+                    start: YM + '-03',
+                    description: 'Lorem ipsum dolor sit tempor inci',
+                    end: YM + '-05',
+                    className: "fc-event-light fc-event-solid-primary"
+                },
+                {
+                    title: 'Dinner',
+                    start: YM + '-12',
+                    description: 'Lorem ipsum dolor sit amet, conse ctetur',
+                    end: YM + '-10'
+                },
+                {
+                    id: 999,
+                    title: 'Repeating Event',
+                    start: YM + '-09T16:00:00',
+                    description: 'Lorem ipsum dolor sit ncididunt ut labore',
+                    className: "fc-event-danger"
+                },
+                {
+                    id: 1000,
+                    title: 'Repeating Event',
+                    description: 'Lorem ipsum dolor sit amet, labore',
+                    start: YM + '-16T16:00:00'
+                },
+                {
+                    title: 'Conference',
+                    start: YESTERDAY,
+                    end: TOMORROW,
+                    description: 'Lorem ipsum dolor eius mod tempor labore',
+                    className: "fc-event-primary"
+                },
+                {
+                    title: 'Meeting',
+                    start: TODAY + 'T10:30:00',
+                    end: TODAY + 'T12:30:00',
+                    description: 'Lorem ipsum dolor eiu idunt ut labore'
+                },
+                {
+                    title: 'Lunch',
+                    start: TODAY + 'T12:00:00',
+                    className: "fc-event-info",
+                    description: 'Lorem ipsum dolor sit amet, ut labore'
+                },
+                {
+                    title: 'Meeting',
+                    start: TODAY + 'T14:30:00',
+                    className: "fc-event-warning",
+                    description: 'Lorem ipsum conse ctetur adipi scing'
+                },
+                {
+                    title: 'Happy Hour',
+                    start: TODAY + 'T17:30:00',
+                    className: "fc-event-info",
+                    description: 'Lorem ipsum dolor sit amet, conse ctetur'
+                },
+                {
+                    title: 'Dinner',
+                    start: TOMORROW + 'T05:00:00',
+                    className: "fc-event-solid-danger fc-event-light",
+                    description: 'Lorem ipsum dolor sit ctetur adipi scing'
+                },
+                {
+                    title: 'Birthday Party',
+                    start: TOMORROW + 'T07:00:00',
+                    className: "fc-event-primary",
+                    description: 'Lorem ipsum dolor sit amet, scing'
+                },
+                {
+                    title: 'Click for Google',
+                    url: 'http://google.com/',
+                    start: YM + '-28',
+                    className: "fc-event-solid-info fc-event-light",
+                    description: 'Lorem ipsum dolor sit amet, labore'
+                }
+            ],
+
+            eventContent: function (info) {
+                var element = $(info.el);
+
+                if (info.event.extendedProps && info.event.extendedProps.description) {
+                    if (element.hasClass('fc-day-grid-event')) {
+                        element.data('content', info.event.extendedProps.description);
+                        element.data('placement', 'top');
+                        KTApp.initPopover(element);
+                    } else if (element.hasClass('fc-time-grid-event')) {
+                        element.find('.fc-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
+                    } else if (element.find('.fc-list-item-title').lenght !== 0) {
+                        element.find('.fc-list-item-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
+                    }
+                }
+            }
+        });
+
+        calendar.render();
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleBasic();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTGeneralFullCalendarBasicDemos.init();
+});

assets/js/custom/documentation/general/fullcalendar/drag-n-drop.js

@@ -0,0 +1,52 @@
+"use strict";
+
+// Class definition
+var KTGeneralFullCalendarDragDemos = function () {
+    // Private functions
+
+    var exampleDrag = function () {
+        // Initialize the external events -- for more info please visit the official site: https://fullcalendar.io/demos
+        var containerEl = document.getElementById('kt_docs_fullcalendar_events_list');
+        new FullCalendar.Draggable(containerEl, {
+          itemSelector: '.fc-event',
+          eventData: function(eventEl) {
+            return {
+              title: eventEl.innerText.trim()
+            }
+          }
+        });
+    
+        // initialize the calendar -- for more info please visit the official site: https://fullcalendar.io/demos
+        var calendarEl = document.getElementById('kt_docs_fullcalendar_drag');
+        var calendar = new FullCalendar.Calendar(calendarEl, {
+          headerToolbar: {
+            left: 'prev,next today',
+            center: 'title',
+            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
+          },
+          editable: true,
+          droppable: true, // this allows things to be dropped onto the calendar
+          drop: function(arg) {
+            // is the "remove after drop" checkbox checked?
+            if (document.getElementById('drop-remove').checked) {
+              // if so, remove the element from the "Draggable Events" list
+              arg.draggedEl.parentNode.removeChild(arg.draggedEl);
+            }
+          }
+        });
+
+        calendar.render();
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleDrag();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTGeneralFullCalendarDragDemos.init();
+});

assets/js/custom/documentation/general/fullcalendar/locales.js

@@ -0,0 +1,117 @@
+"use strict";
+
+// Class definition
+var KTGeneralFullCalendarLocalesDemos = function () {
+    // Private functions
+
+    var examplelocales = function () {
+        // Define variables        
+        var initialLocaleCode = 'en';
+        var localeSelectorEl = document.getElementById('kt_docs_fullcalendar_locale_selector');
+        var calendarEl = document.getElementById('kt_docs_fullcalendar_locales');
+
+        // initialize the calendar -- for more info please visit the official site: https://fullcalendar.io/demos
+        var calendar = new FullCalendar.Calendar(calendarEl, {
+            headerToolbar: {
+                left: 'prev,next today',
+                center: 'title',
+                right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
+            },
+            initialDate: '2020-09-12',
+            locale: initialLocaleCode,
+            buttonIcons: false, // show the prev/next text
+            weekNumbers: true,
+            navLinks: true, // can click day/week names to navigate views
+            editable: true,
+            dayMaxEvents: true, // allow "more" link when too many events
+            events: [
+                {
+                    title: 'All Day Event',
+                    start: '2020-09-01'
+                },
+                {
+                    title: 'Long Event',
+                    start: '2020-09-07',
+                    end: '2020-09-10'
+                },
+                {
+                    groupId: 999,
+                    title: 'Repeating Event',
+                    start: '2020-09-09T16:00:00'
+                },
+                {
+                    groupId: 999,
+                    title: 'Repeating Event',
+                    start: '2020-09-16T16:00:00'
+                },
+                {
+                    title: 'Conference',
+                    start: '2020-09-11',
+                    end: '2020-09-13'
+                },
+                {
+                    title: 'Meeting',
+                    start: '2020-09-12T10:30:00',
+                    end: '2020-09-12T12:30:00'
+                },
+                {
+                    title: 'Lunch',
+                    start: '2020-09-12T12:00:00'
+                },
+                {
+                    title: 'Meeting',
+                    start: '2020-09-12T14:30:00'
+                },
+                {
+                    title: 'Happy Hour',
+                    start: '2020-09-12T17:30:00'
+                },
+                {
+                    title: 'Dinner',
+                    start: '2020-09-12T20:00:00'
+                },
+                {
+                    title: 'Birthday Party',
+                    start: '2020-09-13T07:00:00'
+                },
+                {
+                    title: 'Click for Google',
+                    url: 'http://google.com/',
+                    start: '2020-09-28'
+                }
+            ]
+        });
+
+        calendar.render();
+
+        // build the locale selector's options
+        calendar.getAvailableLocaleCodes().forEach(function (localeCode) {
+            var optionEl = document.createElement('option');
+            optionEl.value = localeCode;
+            optionEl.selected = localeCode == initialLocaleCode;
+            optionEl.innerText = localeCode;
+            localeSelectorEl.appendChild(optionEl);
+        });
+
+        // when the selected option changes, dynamically change the calendar option -- more info on Select2 on Change event: https://select2.org/programmatic-control/events
+        $(localeSelectorEl).on('change', function () {
+            if (this.value) {
+                calendar.setOption('locale', this.value);
+            }
+        });
+
+        calendar.render();
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            examplelocales();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTGeneralFullCalendarLocalesDemos.init();
+});