Added original Vuexy files and cloned focus2 views into vuexy views for its conversion

httpdocs/themes/vuexy/js/app-access-permission.js

@@ -0,0 +1,195 @@
+/**
+ * App user list (jquery)
+ */
+
+'use strict';
+
+$(function () {
+  var dataTablePermissions = $('.datatables-permissions'),
+    dt_permission,
+    userList = 'app-user-list.html';
+
+  // Users List datatable
+  if (dataTablePermissions.length) {
+    dt_permission = dataTablePermissions.DataTable({
+      ajax: assetsPath + 'json/permissions-list.json', // JSON file to add data
+      columns: [
+        // columns according to JSON
+        { data: '' },
+        { data: 'id' },
+        { data: 'name' },
+        { data: 'assigned_to' },
+        { data: 'created_date' },
+        { data: '' }
+      ],
+      columnDefs: [
+        {
+          // For Responsive
+          className: 'control',
+          orderable: false,
+          searchable: false,
+          responsivePriority: 2,
+          targets: 0,
+          render: function (data, type, full, meta) {
+            return '';
+          }
+        },
+        {
+          targets: 1,
+          searchable: false,
+          visible: false
+        },
+        {
+          // Name
+          targets: 2,
+          render: function (data, type, full, meta) {
+            var $name = full['name'];
+            return '<span class="text-nowrap">' + $name + '</span>';
+          }
+        },
+        {
+          // User Role
+          targets: 3,
+          orderable: false,
+          render: function (data, type, full, meta) {
+            var $assignedTo = full['assigned_to'],
+              $output = '';
+            var roleBadgeObj = {
+              Admin: '<a href="' + userList + '"><span class="badge bg-label-primary m-1">Administrator</span></a>',
+              Manager: '<a href="' + userList + '"><span class="badge bg-label-warning m-1">Manager</span></a>',
+              Users: '<a href="' + userList + '"><span class="badge bg-label-success m-1">Users</span></a>',
+              Support: '<a href="' + userList + '"><span class="badge bg-label-info m-1">Support</span></a>',
+              Restricted:
+                '<a href="' + userList + '"><span class="badge bg-label-danger m-1">Restricted User</span></a>'
+            };
+            for (var i = 0; i < $assignedTo.length; i++) {
+              var val = $assignedTo[i];
+              $output += roleBadgeObj[val];
+            }
+            return '<span class="text-nowrap">' + $output + '</span>';
+          }
+        },
+        {
+          // remove ordering from Name
+          targets: 4,
+          orderable: false,
+          render: function (data, type, full, meta) {
+            var $date = full['created_date'];
+            return '<span class="text-nowrap">' + $date + '</span>';
+          }
+        },
+        {
+          // Actions
+          targets: -1,
+          searchable: false,
+          title: 'Actions',
+          orderable: false,
+          render: function (data, type, full, meta) {
+            return (
+              '<span class="text-nowrap"><button class="btn btn-sm btn-icon me-2" data-bs-target="#editPermissionModal" data-bs-toggle="modal" data-bs-dismiss="modal"><i class="ti ti-edit"></i></button>' +
+              '<button class="btn btn-sm btn-icon delete-record"><i class="ti ti-trash"></i></button></span>'
+            );
+          }
+        }
+      ],
+      order: [[1, 'asc']],
+      dom:
+        '<"row mx-1"' +
+        '<"col-sm-12 col-md-3" l>' +
+        '<"col-sm-12 col-md-9"<"dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-center justify-content-md-end justify-content-center flex-wrap me-1"<"me-3"f>B>>' +
+        '>t' +
+        '<"row mx-2"' +
+        '<"col-sm-12 col-md-6"i>' +
+        '<"col-sm-12 col-md-6"p>' +
+        '>',
+      language: {
+        sLengthMenu: 'Show _MENU_',
+        search: 'Search',
+        searchPlaceholder: 'Search..'
+      },
+      // Buttons with Dropdown
+      buttons: [
+        {
+          text: 'Add Permission',
+          className: 'add-new btn btn-primary mb-3 mb-md-0',
+          attr: {
+            'data-bs-toggle': 'modal',
+            'data-bs-target': '#addPermissionModal'
+          },
+          init: function (api, node, config) {
+            $(node).removeClass('btn-secondary');
+          }
+        }
+      ],
+      // For responsive popup
+      responsive: {
+        details: {
+          display: $.fn.dataTable.Responsive.display.modal({
+            header: function (row) {
+              var data = row.data();
+              return 'Details of ' + data['name'];
+            }
+          }),
+          type: 'column',
+          renderer: function (api, rowIdx, columns) {
+            var data = $.map(columns, function (col, i) {
+              return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
+                ? '<tr data-dt-row="' +
+                    col.rowIndex +
+                    '" data-dt-column="' +
+                    col.columnIndex +
+                    '">' +
+                    '<td>' +
+                    col.title +
+                    ':' +
+                    '</td> ' +
+                    '<td>' +
+                    col.data +
+                    '</td>' +
+                    '</tr>'
+                : '';
+            }).join('');
+
+            return data ? $('<table class="table"/><tbody />').append(data) : false;
+          }
+        }
+      },
+      initComplete: function () {
+        // Adding role filter once table initialized
+        this.api()
+          .columns(3)
+          .every(function () {
+            var column = this;
+            var select = $(
+              '<select id="UserRole" class="form-select text-capitalize"><option value=""> Select Role </option></select>'
+            )
+              .appendTo('.user_role')
+              .on('change', function () {
+                var val = $.fn.dataTable.util.escapeRegex($(this).val());
+                column.search(val ? '^' + val + '$' : '', true, false).draw();
+              });
+
+            column
+              .data()
+              .unique()
+              .sort()
+              .each(function (d, j) {
+                select.append('<option value="' + d + '" class="text-capitalize">' + d + '</option>');
+              });
+          });
+      }
+    });
+  }
+
+  // Delete Record
+  $('.datatables-permissions tbody').on('click', '.delete-record', function () {
+    dt_permission.row($(this).parents('tr')).remove().draw();
+  });
+
+  // Filter form control to default size
+  // ? setTimeout used for multilingual table initialization
+  setTimeout(() => {
+    $('.dataTables_filter .form-control').removeClass('form-control-sm');
+    $('.dataTables_length .form-select').removeClass('form-select-sm');
+  }, 300);
+});

httpdocs/themes/vuexy/js/app-access-roles.js

@@ -0,0 +1,258 @@
+/**
+ * App user list
+ */
+
+'use strict';
+
+// Datatable (jquery)
+$(function () {
+  var dtUserTable = $('.datatables-users'),
+    statusObj = {
+      1: { title: 'Pending', class: 'bg-label-warning' },
+      2: { title: 'Active', class: 'bg-label-success' },
+      3: { title: 'Inactive', class: 'bg-label-secondary' }
+    };
+
+  var userView = 'app-user-view-account.html';
+
+  // Users List datatable
+  if (dtUserTable.length) {
+    var dtUser = dtUserTable.DataTable({
+      ajax: assetsPath + 'json/user-list.json', // JSON file to add data
+      columns: [
+        // columns according to JSON
+        { data: '' },
+        { data: 'full_name' },
+        { data: 'role' },
+        { data: 'current_plan' },
+        { data: 'billing' },
+        { data: 'status' },
+        { data: '' }
+      ],
+      columnDefs: [
+        {
+          // For Responsive
+          className: 'control',
+          orderable: false,
+          searchable: false,
+          responsivePriority: 2,
+          targets: 0,
+          render: function (data, type, full, meta) {
+            return '';
+          }
+        },
+        {
+          // User full name and email
+          targets: 1,
+          responsivePriority: 4,
+          render: function (data, type, full, meta) {
+            var $name = full['full_name'],
+              $email = full['email'],
+              $image = full['avatar'];
+            if ($image) {
+              // For Avatar image
+              var $output =
+                '<img src="' + assetsPath + 'img/avatars/' + $image + '" alt="Avatar" class="rounded-circle">';
+            } else {
+              // For Avatar badge
+              var stateNum = Math.floor(Math.random() * 6);
+              var states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
+              var $state = states[stateNum],
+                $name = full['full_name'],
+                $initials = $name.match(/\b\w/g) || [];
+              $initials = (($initials.shift() || '') + ($initials.pop() || '')).toUpperCase();
+              $output = '<span class="avatar-initial rounded-circle bg-label-' + $state + '">' + $initials + '</span>';
+            }
+            // Creates full output for row
+            var $row_output =
+              '<div class="d-flex justify-content-left align-items-center">' +
+              '<div class="avatar-wrapper">' +
+              '<div class="avatar avatar-sm me-3">' +
+              $output +
+              '</div>' +
+              '</div>' +
+              '<div class="d-flex flex-column">' +
+              '<a href="' +
+              userView +
+              '" class="text-body text-truncate"><span class="fw-semibold">' +
+              $name +
+              '</span></a>' +
+              '<small class="text-muted">@' +
+              $email +
+              '</small>' +
+              '</div>' +
+              '</div>';
+            return $row_output;
+          }
+        },
+        {
+          // User Role
+          targets: 2,
+          render: function (data, type, full, meta) {
+            var $role = full['role'];
+            var roleBadgeObj = {
+              Subscriber:
+                '<span class="badge badge-center rounded-pill bg-label-warning me-3 w-px-30 h-px-30"><i class="ti ti-user ti-sm"></i></span>',
+              Author:
+                '<span class="badge badge-center rounded-pill bg-label-success me-3 w-px-30 h-px-30"><i class="ti ti-settings ti-sm"></i></span>',
+              Maintainer:
+                '<span class="badge badge-center rounded-pill bg-label-primary me-3 w-px-30 h-px-30"><i class="ti ti-chart-pie-2 ti-sm"></i></span>',
+              Editor:
+                '<span class="badge badge-center rounded-pill bg-label-info me-3 w-px-30 h-px-30"><i class="ti ti-edit ti-sm"></i></span>',
+              Admin:
+                '<span class="badge badge-center rounded-pill bg-label-secondary me-3 w-px-30 h-px-30"><i class="ti ti-device-laptop ti-sm"></i></span>'
+            };
+            return "<span class='text-truncate d-flex align-items-center'>" + roleBadgeObj[$role] + $role + '</span>';
+          }
+        },
+        {
+          // Plans
+          targets: 3,
+          render: function (data, type, full, meta) {
+            var $plan = full['current_plan'];
+
+            return '<span class="fw-semibold">' + $plan + '</span>';
+          }
+        },
+        {
+          // User Status
+          targets: 5,
+          render: function (data, type, full, meta) {
+            var $status = full['status'];
+
+            return (
+              '<span class="badge ' +
+              statusObj[$status].class +
+              '" text-capitalized>' +
+              statusObj[$status].title +
+              '</span>'
+            );
+          }
+        },
+        {
+          // Actions
+          targets: -1,
+          title: 'Actions',
+          searchable: false,
+          orderable: false,
+          render: function (data, type, full, meta) {
+            return (
+              '<div class="d-flex align-items-center">' +
+              '<a href="' +
+              userView +
+              '" class="btn btn-sm btn-icon"><i class="ti ti-eye"></i></a>' +
+              '<a href="javascript:;" class="text-body delete-record"><i class="ti ti-trash ti-sm mx-2"></i></a>' +
+              '<a href="javascript:;" class="text-body dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="ti ti-dots-vertical ti-sm mx-1"></i></a>' +
+              '<div class="dropdown-menu dropdown-menu-end m-0">' +
+              '<a href="javascript:;"" class="dropdown-item">Edit</a>' +
+              '<a href="javascript:;" class="dropdown-item">Suspend</a>' +
+              '</div>' +
+              '</div>'
+            );
+          }
+        }
+      ],
+      order: [[1, 'desc']],
+      dom:
+        '<"row mx-2"' +
+        '<"col-sm-12 col-md-4 col-lg-6" l>' +
+        '<"col-sm-12 col-md-8 col-lg-6"<"dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-center justify-content-md-end justify-content-center align-items-center flex-sm-nowrap flex-wrap me-1"<"me-3"f><"user_role w-px-200 pb-3 pb-sm-0">>>' +
+        '>t' +
+        '<"row mx-2"' +
+        '<"col-sm-12 col-md-6"i>' +
+        '<"col-sm-12 col-md-6"p>' +
+        '>',
+      language: {
+        sLengthMenu: 'Show _MENU_',
+        search: 'Search',
+        searchPlaceholder: 'Search..'
+      },
+      // For responsive popup
+      responsive: {
+        details: {
+          display: $.fn.dataTable.Responsive.display.modal({
+            header: function (row) {
+              var data = row.data();
+              return 'Details of ' + data['full_name'];
+            }
+          }),
+          type: 'column',
+          renderer: function (api, rowIdx, columns) {
+            var data = $.map(columns, function (col, i) {
+              return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
+                ? '<tr data-dt-row="' +
+                    col.rowIndex +
+                    '" data-dt-column="' +
+                    col.columnIndex +
+                    '">' +
+                    '<td>' +
+                    col.title +
+                    ':' +
+                    '</td> ' +
+                    '<td>' +
+                    col.data +
+                    '</td>' +
+                    '</tr>'
+                : '';
+            }).join('');
+
+            return data ? $('<table class="table"/><tbody />').append(data) : false;
+          }
+        }
+      },
+      initComplete: function () {
+        // Adding role filter once table initialized
+        this.api()
+          .columns(2)
+          .every(function () {
+            var column = this;
+            var select = $(
+              '<select id="UserRole" class="form-select text-capitalize"><option value=""> Select Role </option></select>'
+            )
+              .appendTo('.user_role')
+              .on('change', function () {
+                var val = $.fn.dataTable.util.escapeRegex($(this).val());
+                column.search(val ? '^' + val + '$' : '', true, false).draw();
+              });
+
+            column
+              .data()
+              .unique()
+              .sort()
+              .each(function (d, j) {
+                select.append('<option value="' + d + '" class="text-capitalize">' + d + '</option>');
+              });
+          });
+      }
+    });
+  }
+  // Delete Record
+  $('.datatables-users tbody').on('click', '.delete-record', function () {
+    dtUser.row($(this).parents('tr')).remove().draw();
+  });
+
+  // Filter form control to default size
+  // ? setTimeout used for multilingual table initialization
+  setTimeout(() => {
+    $('.dataTables_filter .form-control').removeClass('form-control-sm');
+    $('.dataTables_length .form-select').removeClass('form-select-sm');
+  }, 300);
+});
+
+(function () {
+  // On edit role click, update text
+  var roleEditList = document.querySelectorAll('.role-edit-modal'),
+    roleAdd = document.querySelector('.add-new-role'),
+    roleTitle = document.querySelector('.role-title');
+
+  roleAdd.onclick = function () {
+    roleTitle.innerHTML = 'Add New Role'; // reset text
+  };
+  if (roleEditList) {
+    roleEditList.forEach(function (roleEditEl) {
+      roleEditEl.onclick = function () {
+        roleTitle.innerHTML = 'Edit Role'; // reset text
+      };
+    });
+  }
+})();

httpdocs/themes/vuexy/js/app-calendar-events.js

@@ -0,0 +1,123 @@
+/**
+ * App Calendar Events
+ */
+
+'use strict';
+
+let date = new Date();
+let nextDay = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
+// prettier-ignore
+let nextMonth = date.getMonth() === 11 ? new Date(date.getFullYear() + 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() + 1, 1);
+// prettier-ignore
+let prevMonth = date.getMonth() === 11 ? new Date(date.getFullYear() - 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() - 1, 1);
+
+let events = [
+  {
+    id: 1,
+    url: '',
+    title: 'Design Review',
+    start: date,
+    end: nextDay,
+    allDay: false,
+    extendedProps: {
+      calendar: 'Business'
+    }
+  },
+  {
+    id: 2,
+    url: '',
+    title: 'Meeting With Client',
+    start: new Date(date.getFullYear(), date.getMonth() + 1, -11),
+    end: new Date(date.getFullYear(), date.getMonth() + 1, -10),
+    allDay: true,
+    extendedProps: {
+      calendar: 'Business'
+    }
+  },
+  {
+    id: 3,
+    url: '',
+    title: 'Family Trip',
+    allDay: true,
+    start: new Date(date.getFullYear(), date.getMonth() + 1, -9),
+    end: new Date(date.getFullYear(), date.getMonth() + 1, -7),
+    extendedProps: {
+      calendar: 'Holiday'
+    }
+  },
+  {
+    id: 4,
+    url: '',
+    title: "Doctor's Appointment",
+    start: new Date(date.getFullYear(), date.getMonth() + 1, -11),
+    end: new Date(date.getFullYear(), date.getMonth() + 1, -10),
+    extendedProps: {
+      calendar: 'Personal'
+    }
+  },
+  {
+    id: 5,
+    url: '',
+    title: 'Dart Game?',
+    start: new Date(date.getFullYear(), date.getMonth() + 1, -13),
+    end: new Date(date.getFullYear(), date.getMonth() + 1, -12),
+    allDay: true,
+    extendedProps: {
+      calendar: 'ETC'
+    }
+  },
+  {
+    id: 6,
+    url: '',
+    title: 'Meditation',
+    start: new Date(date.getFullYear(), date.getMonth() + 1, -13),
+    end: new Date(date.getFullYear(), date.getMonth() + 1, -12),
+    allDay: true,
+    extendedProps: {
+      calendar: 'Personal'
+    }
+  },
+  {
+    id: 7,
+    url: '',
+    title: 'Dinner',
+    start: new Date(date.getFullYear(), date.getMonth() + 1, -13),
+    end: new Date(date.getFullYear(), date.getMonth() + 1, -12),
+    extendedProps: {
+      calendar: 'Family'
+    }
+  },
+  {
+    id: 8,
+    url: '',
+    title: 'Product Review',
+    start: new Date(date.getFullYear(), date.getMonth() + 1, -13),
+    end: new Date(date.getFullYear(), date.getMonth() + 1, -12),
+    allDay: true,
+    extendedProps: {
+      calendar: 'Business'
+    }
+  },
+  {
+    id: 9,
+    url: '',
+    title: 'Monthly Meeting',
+    start: nextMonth,
+    end: nextMonth,
+    allDay: true,
+    extendedProps: {
+      calendar: 'Business'
+    }
+  },
+  {
+    id: 10,
+    url: '',
+    title: 'Monthly Checkup',
+    start: prevMonth,
+    end: prevMonth,
+    allDay: true,
+    extendedProps: {
+      calendar: 'Personal'
+    }
+  }
+];

httpdocs/themes/vuexy/js/app-calendar.js

@@ -0,0 +1,571 @@
+/**
+ * App Calendar
+ */
+
+/**
+ * ! If both start and end dates are same Full calendar will nullify the end date value.
+ * ! Full calendar will end the event on a day before at 12:00:00AM thus, event won't extend to the end date.
+ * ! We are getting events from a separate file named app-calendar-events.js. You can add or remove events from there.
+ *
+ **/
+
+'use strict';
+
+let direction = 'ltr';
+
+if (isRtl) {
+  direction = 'rtl';
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+  (function () {
+    const calendarEl = document.getElementById('calendar'),
+      appCalendarSidebar = document.querySelector('.app-calendar-sidebar'),
+      addEventSidebar = document.getElementById('addEventSidebar'),
+      appOverlay = document.querySelector('.app-overlay'),
+      calendarsColor = {
+        Business: 'primary',
+        Holiday: 'success',
+        Personal: 'danger',
+        Family: 'warning',
+        ETC: 'info'
+      },
+      offcanvasTitle = document.querySelector('.offcanvas-title'),
+      btnToggleSidebar = document.querySelector('.btn-toggle-sidebar'),
+      btnSubmit = document.querySelector('button[type="submit"]'),
+      btnDeleteEvent = document.querySelector('.btn-delete-event'),
+      btnCancel = document.querySelector('.btn-cancel'),
+      eventTitle = document.querySelector('#eventTitle'),
+      eventStartDate = document.querySelector('#eventStartDate'),
+      eventEndDate = document.querySelector('#eventEndDate'),
+      eventUrl = document.querySelector('#eventURL'),
+      eventLabel = $('#eventLabel'), // ! Using jquery vars due to select2 jQuery dependency
+      eventGuests = $('#eventGuests'), // ! Using jquery vars due to select2 jQuery dependency
+      eventLocation = document.querySelector('#eventLocation'),
+      eventDescription = document.querySelector('#eventDescription'),
+      allDaySwitch = document.querySelector('.allDay-switch'),
+      selectAll = document.querySelector('.select-all'),
+      filterInput = [].slice.call(document.querySelectorAll('.input-filter')),
+      inlineCalendar = document.querySelector('.inline-calendar');
+
+    let eventToUpdate,
+      currentEvents = events, // Assign app-calendar-events.js file events (assume events from API) to currentEvents (browser store/object) to manage and update calender events
+      isFormValid = false,
+      inlineCalInstance;
+
+    // Init event Offcanvas
+    const bsAddEventSidebar = new bootstrap.Offcanvas(addEventSidebar);
+
+    //! TODO: Update Event label and guest code to JS once select removes jQuery dependency
+    // Event Label (select2)
+    if (eventLabel.length) {
+      function renderBadges(option) {
+        if (!option.id) {
+          return option.text;
+        }
+        var $badge =
+          "<span class='badge badge-dot bg-" + $(option.element).data('label') + " me-2'> " + '</span>' + option.text;
+
+        return $badge;
+      }
+      eventLabel.wrap('<div class="position-relative"></div>').select2({
+        placeholder: 'Select value',
+        dropdownParent: eventLabel.parent(),
+        templateResult: renderBadges,
+        templateSelection: renderBadges,
+        minimumResultsForSearch: -1,
+        escapeMarkup: function (es) {
+          return es;
+        }
+      });
+    }
+
+    // Event Guests (select2)
+    if (eventGuests.length) {
+      function renderGuestAvatar(option) {
+        if (!option.id) {
+          return option.text;
+        }
+        var $avatar =
+          "<div class='d-flex flex-wrap align-items-center'>" +
+          "<div class='avatar avatar-xs me-2'>" +
+          "<img src='" +
+          assetsPath +
+          'img/avatars/' +
+          $(option.element).data('avatar') +
+          "' alt='avatar' class='rounded-circle' />" +
+          '</div>' +
+          option.text +
+          '</div>';
+
+        return $avatar;
+      }
+      eventGuests.wrap('<div class="position-relative"></div>').select2({
+        placeholder: 'Select value',
+        dropdownParent: eventGuests.parent(),
+        closeOnSelect: false,
+        templateResult: renderGuestAvatar,
+        templateSelection: renderGuestAvatar,
+        escapeMarkup: function (es) {
+          return es;
+        }
+      });
+    }
+
+    // Event start (flatpicker)
+    if (eventStartDate) {
+      var start = eventStartDate.flatpickr({
+        enableTime: true,
+        altFormat: 'Y-m-dTH:i:S',
+        onReady: function (selectedDates, dateStr, instance) {
+          if (instance.isMobile) {
+            instance.mobileInput.setAttribute('step', null);
+          }
+        }
+      });
+    }
+
+    // Event end (flatpicker)
+    if (eventEndDate) {
+      var end = eventEndDate.flatpickr({
+        enableTime: true,
+        altFormat: 'Y-m-dTH:i:S',
+        onReady: function (selectedDates, dateStr, instance) {
+          if (instance.isMobile) {
+            instance.mobileInput.setAttribute('step', null);
+          }
+        }
+      });
+    }
+
+    // Inline sidebar calendar (flatpicker)
+    if (inlineCalendar) {
+      inlineCalInstance = inlineCalendar.flatpickr({
+        monthSelectorType: 'static',
+        inline: true
+      });
+    }
+
+    // Event click function
+    function eventClick(info) {
+      eventToUpdate = info.event;
+      if (eventToUpdate.url) {
+        info.jsEvent.preventDefault();
+        window.open(eventToUpdate.url, '_blank');
+      }
+      bsAddEventSidebar.show();
+      // For update event set offcanvas title text: Update Event
+      if (offcanvasTitle) {
+        offcanvasTitle.innerHTML = 'Update Event';
+      }
+      btnSubmit.innerHTML = 'Update';
+      btnSubmit.classList.add('btn-update-event');
+      btnSubmit.classList.remove('btn-add-event');
+      btnDeleteEvent.classList.remove('d-none');
+
+      eventTitle.value = eventToUpdate.title;
+      start.setDate(eventToUpdate.start, true, 'Y-m-d');
+      eventToUpdate.allDay === true ? (allDaySwitch.checked = true) : (allDaySwitch.checked = false);
+      eventToUpdate.end !== null
+        ? end.setDate(eventToUpdate.end, true, 'Y-m-d')
+        : end.setDate(eventToUpdate.start, true, 'Y-m-d');
+      eventLabel.val(eventToUpdate.extendedProps.calendar).trigger('change');
+      eventToUpdate.extendedProps.location !== undefined
+        ? (eventLocation.value = eventToUpdate.extendedProps.location)
+        : null;
+      eventToUpdate.extendedProps.guests !== undefined
+        ? eventGuests.val(eventToUpdate.extendedProps.guests).trigger('change')
+        : null;
+      eventToUpdate.extendedProps.description !== undefined
+        ? (eventDescription.value = eventToUpdate.extendedProps.description)
+        : null;
+
+      // // Call removeEvent function
+      // btnDeleteEvent.addEventListener('click', e => {
+      //   removeEvent(parseInt(eventToUpdate.id));
+      //   // eventToUpdate.remove();
+      //   bsAddEventSidebar.hide();
+      // });
+    }
+
+    // Modify sidebar toggler
+    function modifyToggler() {
+      const fcSidebarToggleButton = document.querySelector('.fc-sidebarToggle-button');
+      fcSidebarToggleButton.classList.remove('fc-button-primary');
+      fcSidebarToggleButton.classList.add('d-lg-none', 'd-inline-block', 'ps-0');
+      while (fcSidebarToggleButton.firstChild) {
+        fcSidebarToggleButton.firstChild.remove();
+      }
+      fcSidebarToggleButton.setAttribute('data-bs-toggle', 'sidebar');
+      fcSidebarToggleButton.setAttribute('data-overlay', '');
+      fcSidebarToggleButton.setAttribute('data-target', '#app-calendar-sidebar');
+      fcSidebarToggleButton.insertAdjacentHTML('beforeend', '<i class="ti ti-menu-2 ti-sm"></i>');
+    }
+
+    // Filter events by calender
+    function selectedCalendars() {
+      let selected = [],
+        filterInputChecked = [].slice.call(document.querySelectorAll('.input-filter:checked'));
+
+      filterInputChecked.forEach(item => {
+        selected.push(item.getAttribute('data-value'));
+      });
+
+      return selected;
+    }
+
+    // --------------------------------------------------------------------------------------------------
+    // AXIOS: fetchEvents
+    // * This will be called by fullCalendar to fetch events. Also this can be used to refetch events.
+    // --------------------------------------------------------------------------------------------------
+    function fetchEvents(info, successCallback) {
+      // Fetch Events from API endpoint reference
+      /* $.ajax(
+        {
+          url: '../../../app-assets/data/app-calendar-events.js',
+          type: 'GET',
+          success: function (result) {
+            // Get requested calendars as Array
+            var calendars = selectedCalendars();
+
+            return [result.events.filter(event => calendars.includes(event.extendedProps.calendar))];
+          },
+          error: function (error) {
+            console.log(error);
+          }
+        }
+      ); */
+
+      let calendars = selectedCalendars();
+      // We are reading event object from app-calendar-events.js file directly by including that file above app-calendar file.
+      // You should make an API call, look into above commented API call for reference
+      let selectedEvents = currentEvents.filter(function (event) {
+        // console.log(event.extendedProps.calendar.toLowerCase());
+        return calendars.includes(event.extendedProps.calendar.toLowerCase());
+      });
+      // if (selectedEvents.length > 0) {
+      successCallback(selectedEvents);
+      // }
+    }
+
+    // Init FullCalendar
+    // ------------------------------------------------
+    let calendar = new Calendar(calendarEl, {
+      initialView: 'dayGridMonth',
+      events: fetchEvents,
+      plugins: [dayGridPlugin, interactionPlugin, listPlugin, timegridPlugin],
+      editable: true,
+      dragScroll: true,
+      dayMaxEvents: 2,
+      eventResizableFromStart: true,
+      customButtons: {
+        sidebarToggle: {
+          text: 'Sidebar'
+        }
+      },
+      headerToolbar: {
+        start: 'sidebarToggle, prev,next, title',
+        end: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
+      },
+      direction: direction,
+      initialDate: new Date(),
+      navLinks: true, // can click day/week names to navigate views
+      eventClassNames: function ({ event: calendarEvent }) {
+        const colorName = calendarsColor[calendarEvent._def.extendedProps.calendar];
+        // Background Color
+        return ['fc-event-' + colorName];
+      },
+      dateClick: function (info) {
+        let date = moment(info.date).format('YYYY-MM-DD');
+        resetValues();
+        bsAddEventSidebar.show();
+
+        // For new event set offcanvas title text: Add Event
+        if (offcanvasTitle) {
+          offcanvasTitle.innerHTML = 'Add Event';
+        }
+        btnSubmit.innerHTML = 'Add';
+        btnSubmit.classList.remove('btn-update-event');
+        btnSubmit.classList.add('btn-add-event');
+        btnDeleteEvent.classList.add('d-none');
+        eventStartDate.value = date;
+        eventEndDate.value = date;
+      },
+      eventClick: function (info) {
+        eventClick(info);
+      },
+      datesSet: function () {
+        modifyToggler();
+      },
+      viewDidMount: function () {
+        modifyToggler();
+      }
+    });
+
+    // Render calendar
+    calendar.render();
+    // Modify sidebar toggler
+    modifyToggler();
+
+    const eventForm = document.getElementById('eventForm');
+    const fv = FormValidation.formValidation(eventForm, {
+      fields: {
+        eventTitle: {
+          validators: {
+            notEmpty: {
+              message: 'Please enter event title '
+            }
+          }
+        },
+        eventStartDate: {
+          validators: {
+            notEmpty: {
+              message: 'Please enter start date '
+            }
+          }
+        },
+        eventEndDate: {
+          validators: {
+            notEmpty: {
+              message: 'Please enter end date '
+            }
+          }
+        }
+      },
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          eleValidClass: '',
+          rowSelector: function (field, ele) {
+            // field is the field name & ele is the field element
+            return '.mb-3';
+          }
+        }),
+        submitButton: new FormValidation.plugins.SubmitButton(),
+        // Submit the form when all fields are valid
+        // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+        autoFocus: new FormValidation.plugins.AutoFocus()
+      }
+    })
+      .on('core.form.valid', function () {
+        // Jump to the next step when all fields in the current step are valid
+        isFormValid = true;
+      })
+      .on('core.form.invalid', function () {
+        // if fields are invalid
+        isFormValid = false;
+      });
+
+    // Sidebar Toggle Btn
+    if (btnToggleSidebar) {
+      btnToggleSidebar.addEventListener('click', e => {
+        btnCancel.classList.remove('d-none');
+      });
+    }
+
+    // Add Event
+    // ------------------------------------------------
+    function addEvent(eventData) {
+      // ? Add new event data to current events object and refetch it to display on calender
+      // ? You can write below code to AJAX call success response
+
+      currentEvents.push(eventData);
+      calendar.refetchEvents();
+
+      // ? To add event directly to calender (won't update currentEvents object)
+      // calendar.addEvent(eventData);
+    }
+
+    // Update Event
+    // ------------------------------------------------
+    function updateEvent(eventData) {
+      // ? Update existing event data to current events object and refetch it to display on calender
+      // ? You can write below code to AJAX call success response
+      eventData.id = parseInt(eventData.id);
+      currentEvents[currentEvents.findIndex(el => el.id === eventData.id)] = eventData; // Update event by id
+      calendar.refetchEvents();
+
+      // ? To update event directly to calender (won't update currentEvents object)
+      // let propsToUpdate = ['id', 'title', 'url'];
+      // let extendedPropsToUpdate = ['calendar', 'guests', 'location', 'description'];
+
+      // updateEventInCalendar(eventData, propsToUpdate, extendedPropsToUpdate);
+    }
+
+    // Remove Event
+    // ------------------------------------------------
+
+    function removeEvent(eventId) {
+      // ? Delete existing event data to current events object and refetch it to display on calender
+      // ? You can write below code to AJAX call success response
+      currentEvents = currentEvents.filter(function (event) {
+        return event.id != eventId;
+      });
+      calendar.refetchEvents();
+
+      // ? To delete event directly to calender (won't update currentEvents object)
+      // removeEventInCalendar(eventId);
+    }
+
+    // (Update Event In Calendar (UI Only)
+    // ------------------------------------------------
+    const updateEventInCalendar = (updatedEventData, propsToUpdate, extendedPropsToUpdate) => {
+      const existingEvent = calendar.getEventById(updatedEventData.id);
+
+      // --- Set event properties except date related ----- //
+      // ? Docs: https://fullcalendar.io/docs/Event-setProp
+      // dateRelatedProps => ['start', 'end', 'allDay']
+      // eslint-disable-next-line no-plusplus
+      for (var index = 0; index < propsToUpdate.length; index++) {
+        var propName = propsToUpdate[index];
+        existingEvent.setProp(propName, updatedEventData[propName]);
+      }
+
+      // --- Set date related props ----- //
+      // ? Docs: https://fullcalendar.io/docs/Event-setDates
+      existingEvent.setDates(updatedEventData.start, updatedEventData.end, {
+        allDay: updatedEventData.allDay
+      });
+
+      // --- Set event's extendedProps ----- //
+      // ? Docs: https://fullcalendar.io/docs/Event-setExtendedProp
+      // eslint-disable-next-line no-plusplus
+      for (var index = 0; index < extendedPropsToUpdate.length; index++) {
+        var propName = extendedPropsToUpdate[index];
+        existingEvent.setExtendedProp(propName, updatedEventData.extendedProps[propName]);
+      }
+    };
+
+    // Remove Event In Calendar (UI Only)
+    // ------------------------------------------------
+    function removeEventInCalendar(eventId) {
+      calendar.getEventById(eventId).remove();
+    }
+
+    // Add new event
+    // ------------------------------------------------
+    btnSubmit.addEventListener('click', e => {
+      if (btnSubmit.classList.contains('btn-add-event')) {
+        if (isFormValid) {
+          let newEvent = {
+            id: calendar.getEvents().length + 1,
+            title: eventTitle.value,
+            start: eventStartDate.value,
+            end: eventEndDate.value,
+            startStr: eventStartDate.value,
+            endStr: eventEndDate.value,
+            display: 'block',
+            extendedProps: {
+              location: eventLocation.value,
+              guests: eventGuests.val(),
+              calendar: eventLabel.val(),
+              description: eventDescription.value
+            }
+          };
+          if (eventUrl.value) {
+            newEvent.url = eventUrl.value;
+          }
+          if (allDaySwitch.checked) {
+            newEvent.allDay = true;
+          }
+          addEvent(newEvent);
+          bsAddEventSidebar.hide();
+        }
+      } else {
+        // Update event
+        // ------------------------------------------------
+        if (isFormValid) {
+          let eventData = {
+            id: eventToUpdate.id,
+            title: eventTitle.value,
+            start: eventStartDate.value,
+            end: eventEndDate.value,
+            url: eventUrl.value,
+            extendedProps: {
+              location: eventLocation.value,
+              guests: eventGuests.val(),
+              calendar: eventLabel.val(),
+              description: eventDescription.value
+            },
+            display: 'block',
+            allDay: allDaySwitch.checked ? true : false
+          };
+
+          updateEvent(eventData);
+          bsAddEventSidebar.hide();
+        }
+      }
+    });
+
+    // Call removeEvent function
+    btnDeleteEvent.addEventListener('click', e => {
+      removeEvent(parseInt(eventToUpdate.id));
+      // eventToUpdate.remove();
+      bsAddEventSidebar.hide();
+    });
+
+    // Reset event form inputs values
+    // ------------------------------------------------
+    function resetValues() {
+      eventEndDate.value = '';
+      eventUrl.value = '';
+      eventStartDate.value = '';
+      eventTitle.value = '';
+      eventLocation.value = '';
+      allDaySwitch.checked = false;
+      eventGuests.val('').trigger('change');
+      eventDescription.value = '';
+    }
+
+    // When modal hides reset input values
+    addEventSidebar.addEventListener('hidden.bs.offcanvas', function () {
+      resetValues();
+    });
+
+    // Hide left sidebar if the right sidebar is open
+    btnToggleSidebar.addEventListener('click', e => {
+      if (offcanvasTitle) {
+        offcanvasTitle.innerHTML = 'Add Event';
+      }
+      btnSubmit.innerHTML = 'Add';
+      btnSubmit.classList.remove('btn-update-event');
+      btnSubmit.classList.add('btn-add-event');
+      btnDeleteEvent.classList.add('d-none');
+      appCalendarSidebar.classList.remove('show');
+      appOverlay.classList.remove('show');
+    });
+
+    // Calender filter functionality
+    // ------------------------------------------------
+    if (selectAll) {
+      selectAll.addEventListener('click', e => {
+        if (e.currentTarget.checked) {
+          document.querySelectorAll('.input-filter').forEach(c => (c.checked = 1));
+        } else {
+          document.querySelectorAll('.input-filter').forEach(c => (c.checked = 0));
+        }
+        calendar.refetchEvents();
+      });
+    }
+
+    if (filterInput) {
+      filterInput.forEach(item => {
+        item.addEventListener('click', () => {
+          document.querySelectorAll('.input-filter:checked').length < document.querySelectorAll('.input-filter').length
+            ? (selectAll.checked = false)
+            : (selectAll.checked = true);
+          calendar.refetchEvents();
+        });
+      });
+    }
+
+    // Jump to date on sidebar(inline) calendar change
+    inlineCalInstance.config.onChange.push(function (date) {
+      calendar.changeView(calendar.view.type, moment(date[0]).format('YYYY-MM-DD'));
+      modifyToggler();
+      appCalendarSidebar.classList.remove('show');
+      appOverlay.classList.remove('show');
+    });
+  })();
+});

httpdocs/themes/vuexy/js/app-chat.js

@@ -0,0 +1,208 @@
+/**
+ * App Chat
+ */
+
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function () {
+  (function () {
+    const chatContactsBody = document.querySelector('.app-chat-contacts .sidebar-body'),
+      chatContactListItems = [].slice.call(
+        document.querySelectorAll('.chat-contact-list-item:not(.chat-contact-list-item-title)')
+      ),
+      chatHistoryBody = document.querySelector('.chat-history-body'),
+      chatSidebarLeftBody = document.querySelector('.app-chat-sidebar-left .sidebar-body'),
+      chatSidebarRightBody = document.querySelector('.app-chat-sidebar-right .sidebar-body'),
+      chatUserStatus = [].slice.call(document.querySelectorAll(".form-check-input[name='chat-user-status']")),
+      chatSidebarLeftUserAbout = $('.chat-sidebar-left-user-about'),
+      formSendMessage = document.querySelector('.form-send-message'),
+      messageInput = document.querySelector('.message-input'),
+      searchInput = document.querySelector('.chat-search-input'),
+      speechToText = $('.speech-to-text'), // ! jQuery dependency for speech to text
+      userStatusObj = {
+        active: 'avatar-online',
+        offline: 'avatar-offline',
+        away: 'avatar-away',
+        busy: 'avatar-busy'
+      };
+
+    // Initialize PerfectScrollbar
+    // ------------------------------
+
+    // Chat contacts scrollbar
+    if (chatContactsBody) {
+      new PerfectScrollbar(chatContactsBody, {
+        wheelPropagation: false,
+        suppressScrollX: true
+      });
+    }
+
+    // Chat history scrollbar
+    if (chatHistoryBody) {
+      new PerfectScrollbar(chatHistoryBody, {
+        wheelPropagation: false,
+        suppressScrollX: true
+      });
+    }
+
+    // Sidebar left scrollbar
+    if (chatSidebarLeftBody) {
+      new PerfectScrollbar(chatSidebarLeftBody, {
+        wheelPropagation: false,
+        suppressScrollX: true
+      });
+    }
+
+    // Sidebar right scrollbar
+    if (chatSidebarRightBody) {
+      new PerfectScrollbar(chatSidebarRightBody, {
+        wheelPropagation: false,
+        suppressScrollX: true
+      });
+    }
+
+    // Scroll to bottom function
+    function scrollToBottom() {
+      chatHistoryBody.scrollTo(0, chatHistoryBody.scrollHeight);
+    }
+    scrollToBottom();
+
+    // User About Maxlength Init
+    if (chatSidebarLeftUserAbout.length) {
+      chatSidebarLeftUserAbout.maxlength({
+        alwaysShow: true,
+        warningClass: 'label label-success bg-success text-white',
+        limitReachedClass: 'label label-danger',
+        separator: '/',
+        validate: true,
+        threshold: 120
+      });
+    }
+
+    // Update user status
+    chatUserStatus.forEach(el => {
+      el.addEventListener('click', e => {
+        let chatLeftSidebarUserAvatar = document.querySelector('.chat-sidebar-left-user .avatar'),
+          value = e.currentTarget.value;
+        //Update status in left sidebar user avatar
+        chatLeftSidebarUserAvatar.removeAttribute('class');
+        Helpers._addClass('avatar avatar-xl ' + userStatusObj[value] + '', chatLeftSidebarUserAvatar);
+        //Update status in contacts sidebar user avatar
+        let chatContactsUserAvatar = document.querySelector('.app-chat-contacts .avatar');
+        chatContactsUserAvatar.removeAttribute('class');
+        Helpers._addClass('flex-shrink-0 avatar ' + userStatusObj[value] + ' me-3', chatContactsUserAvatar);
+      });
+    });
+
+    // Select chat or contact
+    chatContactListItems.forEach(chatContactListItem => {
+      // Bind click event to each chat contact list item
+      chatContactListItem.addEventListener('click', e => {
+        // Remove active class from chat contact list item
+        chatContactListItems.forEach(chatContactListItem => {
+          chatContactListItem.classList.remove('active');
+        });
+        // Add active class to current chat contact list item
+        e.currentTarget.classList.add('active');
+      });
+    });
+
+    // Filter Chats
+    if (searchInput) {
+      searchInput.addEventListener('keyup', e => {
+        let searchValue = e.currentTarget.value.toLowerCase(),
+          searchChatListItemsCount = 0,
+          searchContactListItemsCount = 0,
+          chatListItem0 = document.querySelector('.chat-list-item-0'),
+          contactListItem0 = document.querySelector('.contact-list-item-0'),
+          searchChatListItems = [].slice.call(
+            document.querySelectorAll('#chat-list li:not(.chat-contact-list-item-title)')
+          ),
+          searchContactListItems = [].slice.call(
+            document.querySelectorAll('#contact-list li:not(.chat-contact-list-item-title)')
+          );
+
+        // Search in chats
+        searchChatContacts(searchChatListItems, searchChatListItemsCount, searchValue, chatListItem0);
+        // Search in contacts
+        searchChatContacts(searchContactListItems, searchContactListItemsCount, searchValue, contactListItem0);
+      });
+    }
+
+    // Search chat and contacts function
+    function searchChatContacts(searchListItems, searchListItemsCount, searchValue, listItem0) {
+      searchListItems.forEach(searchListItem => {
+        let searchListItemText = searchListItem.textContent.toLowerCase();
+        if (searchValue) {
+          if (-1 < searchListItemText.indexOf(searchValue)) {
+            searchListItem.classList.add('d-flex');
+            searchListItem.classList.remove('d-none');
+            searchListItemsCount++;
+          } else {
+            searchListItem.classList.add('d-none');
+          }
+        } else {
+          searchListItem.classList.add('d-flex');
+          searchListItem.classList.remove('d-none');
+          searchListItemsCount++;
+        }
+      });
+      // Display no search fount if searchListItemsCount == 0
+      if (searchListItemsCount == 0) {
+        listItem0.classList.remove('d-none');
+      } else {
+        listItem0.classList.add('d-none');
+      }
+    }
+
+    // Send Message
+    formSendMessage.addEventListener('submit', e => {
+      e.preventDefault();
+      if (messageInput.value) {
+        // Create a div and add a class
+        let renderMsg = document.createElement('div');
+        renderMsg.className = 'chat-message-text mt-2';
+        renderMsg.innerHTML = '<p class="mb-0">' + messageInput.value + '</p>';
+        document.querySelector('li:last-child .chat-message-wrapper').appendChild(renderMsg);
+        messageInput.value = '';
+        scrollToBottom();
+      }
+    });
+
+    // on click of chatHistoryHeaderMenu, Remove data-overlay attribute from chatSidebarLeftClose to resolve overlay overlapping issue for two sidebar
+    let chatHistoryHeaderMenu = document.querySelector(".chat-history-header [data-target='#app-chat-contacts']"),
+      chatSidebarLeftClose = document.querySelector('.app-chat-sidebar-left .close-sidebar');
+    chatHistoryHeaderMenu.addEventListener('click', e => {
+      chatSidebarLeftClose.removeAttribute('data-overlay');
+    });
+    // }
+
+    // Speech To Text
+    if (speechToText.length) {
+      var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
+      if (SpeechRecognition !== undefined && SpeechRecognition !== null) {
+        var recognition = new SpeechRecognition(),
+          listening = false;
+        speechToText.on('click', function () {
+          const $this = $(this);
+          recognition.onspeechstart = function () {
+            listening = true;
+          };
+          if (listening === false) {
+            recognition.start();
+          }
+          recognition.onerror = function (event) {
+            listening = false;
+          };
+          recognition.onresult = function (event) {
+            $this.closest('.form-send-message').find('.message-input').val(event.results[0][0].transcript);
+          };
+          recognition.onspeechend = function (event) {
+            listening = false;
+            recognition.stop();
+          };
+        });
+      }
+    }
+  })();
+});

httpdocs/themes/vuexy/js/app-email.js

@@ -0,0 +1,380 @@
+/**
+ * App Email
+ */
+
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function () {
+  (function () {
+    const emailList = document.querySelector('.email-list'),
+      emailListItems = [].slice.call(document.querySelectorAll('.email-list-item')),
+      emailListItemInputs = [].slice.call(document.querySelectorAll('.email-list-item-input')),
+      emailView = document.querySelector('.app-email-view-content'),
+      emailFilters = document.querySelector('.email-filters'),
+      emailFilterByFolders = [].slice.call(document.querySelectorAll('.email-filter-folders li')),
+      emailEditor = document.querySelector('.email-editor'),
+      appEmailSidebar = document.querySelector('.app-email-sidebar'),
+      appOverlay = document.querySelector('.app-overlay'),
+      emailReplyEditor = document.querySelector('.email-reply-editor'),
+      bookmarkEmail = [].slice.call(document.querySelectorAll('.email-list-item-bookmark')),
+      selectAllEmails = document.getElementById('email-select-all'),
+      emailSearch = document.querySelector('.email-search-input'),
+      toggleCC = document.querySelector('.email-compose-toggle-cc'),
+      toggleBCC = document.querySelector('.email-compose-toggle-bcc'),
+      emailCompose = document.querySelector('.app-email-compose'),
+      emailListDelete = document.querySelector('.email-list-delete'),
+      emailListRead = document.querySelector('.email-list-read'),
+      refreshEmails = document.querySelector('.email-refresh'),
+      emailViewContainer = document.getElementById('app-email-view'),
+      emailFilterFolderLists = [].slice.call(document.querySelectorAll('.email-filter-folders li')),
+      emailListItemActions = [].slice.call(document.querySelectorAll('.email-list-item-actions li'));
+
+    // Initialize PerfectScrollbar
+    // ------------------------------
+    // Email list scrollbar
+    if (emailList) {
+      let emailListInstance = new PerfectScrollbar(emailList, {
+        wheelPropagation: false,
+        suppressScrollX: true
+      });
+    }
+
+    // Sidebar tags scrollbar
+    if (emailFilters) {
+      new PerfectScrollbar(emailFilters, {
+        wheelPropagation: false,
+        suppressScrollX: true
+      });
+    }
+
+    // Email view scrollbar
+    if (emailView) {
+      new PerfectScrollbar(emailView, {
+        wheelPropagation: false,
+        suppressScrollX: true
+      });
+    }
+
+    // Initialize Quill Editor
+    // ------------------------------
+    if (emailEditor) {
+      new Quill('.email-editor', {
+        modules: {
+          toolbar: '.email-editor-toolbar'
+        },
+        placeholder: 'Write your message... ',
+        theme: 'snow'
+      });
+    }
+
+    if (emailReplyEditor) {
+      new Quill('.email-reply-editor', {
+        modules: {
+          toolbar: '.email-reply-toolbar'
+        },
+        placeholder: 'Write your message... ',
+        theme: 'snow'
+      });
+    }
+
+    // Bookmark email
+    if (bookmarkEmail) {
+      bookmarkEmail.forEach(emailItem => {
+        emailItem.addEventListener('click', e => {
+          let emailItem = e.currentTarget.parentNode.parentNode;
+          let starredAttr = emailItem.getAttribute('data-starred');
+          e.stopPropagation();
+          if (!starredAttr) {
+            emailItem.setAttribute('data-starred', 'true');
+          } else {
+            emailItem.removeAttribute('data-starred');
+          }
+        });
+      });
+    }
+
+    // Select all
+    if (selectAllEmails) {
+      selectAllEmails.addEventListener('click', e => {
+        if (e.currentTarget.checked) {
+          emailListItemInputs.forEach(c => (c.checked = 1));
+        } else {
+          emailListItemInputs.forEach(c => (c.checked = 0));
+        }
+      });
+    }
+
+    // Select single email
+    if (emailListItemInputs) {
+      emailListItemInputs.forEach(emailListItemInput => {
+        emailListItemInput.addEventListener('click', e => {
+          e.stopPropagation();
+          // Check input count to reset the indeterminate state
+          let emailListItemInputCount = 0;
+          emailListItemInputs.forEach(emailListItemInput => {
+            if (emailListItemInput.checked) {
+              emailListItemInputCount++;
+            }
+          });
+
+          if (emailListItemInputCount < emailListItemInputs.length) {
+            if (emailListItemInputCount == 0) {
+              selectAllEmails.indeterminate = false;
+            } else {
+              selectAllEmails.indeterminate = true;
+            }
+          } else {
+            if (emailListItemInputCount == emailListItemInputs.length) {
+              selectAllEmails.indeterminate = false;
+              selectAllEmails.checked = true;
+            } else {
+              selectAllEmails.indeterminate = false;
+            }
+          }
+        });
+      });
+    }
+
+    // Search email based on searched text
+    if (emailSearch) {
+      emailSearch.addEventListener('keyup', e => {
+        let searchValue = e.currentTarget.value.toLowerCase(),
+          searchEmailListItems = {},
+          selectedFolderFilter = document.querySelector('.email-filter-folders .active').getAttribute('data-target');
+
+        // Filter emails based on selected folders
+        if (selectedFolderFilter != 'inbox') {
+          searchEmailListItems = [].slice.call(
+            document.querySelectorAll('.email-list-item[data-' + selectedFolderFilter + '="true"]')
+          );
+        } else {
+          searchEmailListItems = [].slice.call(document.querySelectorAll('.email-list-item'));
+        }
+
+        // console.log(searchValue);
+        searchEmailListItems.forEach(searchEmailListItem => {
+          let searchEmailListItemText = searchEmailListItem.textContent.toLowerCase();
+          if (searchValue) {
+            if (-1 < searchEmailListItemText.indexOf(searchValue)) {
+              searchEmailListItem.classList.add('d-block');
+            } else {
+              searchEmailListItem.classList.add('d-none');
+            }
+          } else {
+            searchEmailListItem.classList.remove('d-none');
+          }
+        });
+      });
+    }
+
+    // Filter based on folder type (Inbox, Sent, Draft etc...)
+    emailFilterByFolders.forEach(emailFilterByFolder => {
+      emailFilterByFolder.addEventListener('click', e => {
+        let currentTarget = e.currentTarget,
+          currentTargetData = currentTarget.getAttribute('data-target');
+
+        appEmailSidebar.classList.remove('show');
+        appOverlay.classList.remove('show');
+
+        // Remove active class from each folder filters
+        Helpers._removeClass('active', emailFilterByFolders);
+        // Add active class to selected folder filters
+        currentTarget.classList.add('active');
+        emailListItems.forEach(emailListItem => {
+          // If folder filter is Inbox
+          if (currentTargetData == 'inbox') {
+            emailListItem.classList.add('d-block');
+            emailListItem.classList.remove('d-none');
+          } else if (emailListItem.hasAttribute('data-' + currentTargetData)) {
+            emailListItem.classList.add('d-block');
+            emailListItem.classList.remove('d-none');
+          } else {
+            emailListItem.classList.add('d-none');
+            emailListItem.classList.remove('d-block');
+          }
+        });
+      });
+    });
+
+    // Toggle CC/BCC input
+    if (toggleBCC) {
+      toggleBCC.addEventListener('click', e => {
+        Helpers._toggleClass(document.querySelector('.email-compose-bcc'), 'd-block', 'd-none');
+      });
+    }
+
+    if (toggleCC) {
+      toggleCC.addEventListener('click', e => {
+        Helpers._toggleClass(document.querySelector('.email-compose-cc'), 'd-block', 'd-none');
+      });
+    }
+
+    // Empty compose email message inputs when modal is hidden
+    emailCompose.addEventListener('hidden.bs.modal', event => {
+      document.querySelector('.email-editor .ql-editor').innerHTML = '';
+      $('#emailContacts').val('');
+      initSelect2();
+    });
+
+    // Delete multiple email
+    if (emailListDelete) {
+      emailListDelete.addEventListener('click', e => {
+        emailListItemInputs.forEach(emailListItemInput => {
+          if (emailListItemInput.checked) {
+            emailListItemInput.parentNode.closest('li.email-list-item').remove();
+          }
+        });
+        selectAllEmails.indeterminate = false;
+        selectAllEmails.checked = false;
+      });
+    }
+
+    // Mark as read
+    if (emailListRead) {
+      emailListRead.addEventListener('click', e => {
+        emailListItemInputs.forEach(emailListItemInput => {
+          if (emailListItemInput.checked) {
+            emailListItemInput.checked = false;
+            emailListItemInput.parentNode.closest('li.email-list-item').classList.add('email-marked-read');
+            let emailItemEnvelop = emailListItemInput.parentNode
+              .closest('li.email-list-item')
+              .querySelector('.email-list-item-actions li');
+
+            if (Helpers._hasClass('email-read', emailItemEnvelop)) {
+              emailItemEnvelop.classList.remove('email-read');
+              emailItemEnvelop.classList.add('email-unread');
+              emailItemEnvelop.querySelector('i').classList.remove('ti-mail-opened');
+              emailItemEnvelop.querySelector('i').classList.add('ti-mail');
+            }
+          }
+        });
+        selectAllEmails.indeterminate = false;
+        selectAllEmails.checked = false;
+      });
+    }
+
+    // Refresh Mails
+
+    if (refreshEmails && emailList) {
+      let emailListJq = $('.email-list'),
+        emailListInstance = new PerfectScrollbar(emailList, {
+          wheelPropagation: false,
+          suppressScrollX: true
+        });
+      // ? Using jquery vars due to BlockUI jQuery dependency
+      refreshEmails.addEventListener('click', e => {
+        emailListJq.block({
+          message: '<div class="spinner-border text-primary" role="status"></div>',
+          timeout: 1000,
+          css: {
+            backgroundColor: 'transparent',
+            border: '0'
+          },
+          overlayCSS: {
+            backgroundColor: '#000',
+            opacity: 0.1
+          },
+          onBlock: function () {
+            emailListInstance.settings.suppressScrollY = true;
+          },
+          onUnblock: function () {
+            emailListInstance.settings.suppressScrollY = false;
+          }
+        });
+      });
+    }
+
+    // Earlier msgs
+    // ? Using jquery vars due to jQuery animation (slideToggle) dependency
+    let earlierMsg = $('.email-earlier-msgs');
+    if (earlierMsg.length) {
+      earlierMsg.on('click', function () {
+        let $this = $(this);
+        $this.parents().find('.email-card-last').addClass('hide-pseudo');
+        $this.next('.email-card-prev').slideToggle();
+        $this.remove();
+      });
+    }
+
+    // Email contacts (select2)
+    // ? Using jquery vars due to select2 jQuery dependency
+    let emailContacts = $('#emailContacts');
+    function initSelect2() {
+      if (emailContacts.length) {
+        function renderContactsAvatar(option) {
+          if (!option.id) {
+            return option.text;
+          }
+          let $avatar =
+            "<div class='d-flex flex-wrap align-items-center'>" +
+            "<div class='avatar avatar-xs me-2'>" +
+            "<img src='" +
+            assetsPath +
+            'img/avatars/' +
+            $(option.element).data('avatar') +
+            "' alt='avatar' class='rounded-circle' />" +
+            '</div>' +
+            option.text +
+            '</div>';
+
+          return $avatar;
+        }
+        emailContacts.wrap('<div class="position-relative"></div>').select2({
+          placeholder: 'Select value',
+          dropdownParent: emailContacts.parent(),
+          closeOnSelect: false,
+          templateResult: renderContactsAvatar,
+          templateSelection: renderContactsAvatar,
+          escapeMarkup: function (es) {
+            return es;
+          }
+        });
+      }
+    }
+    initSelect2();
+
+    // Scroll to bottom on reply click
+    // ? Using jquery vars due to jQuery animation dependency
+    let emailViewContent = $('.app-email-view-content');
+    emailViewContent.find('.scroll-to-reply').on('click', function () {
+      if (emailViewContent[0].scrollTop === 0) {
+        emailViewContent.animate(
+          {
+            scrollTop: emailViewContent[0].scrollHeight
+          },
+          1500
+        );
+      }
+    });
+
+    // Close view on email filter folder list click
+    if (emailFilterFolderLists) {
+      emailFilterFolderLists.forEach(emailFilterFolderList => {
+        emailFilterFolderList.addEventListener('click', e => {
+          emailViewContainer.classList.remove('show');
+        });
+      });
+    }
+
+    // Email List Items Actions
+    if (emailListItemActions) {
+      emailListItemActions.forEach(emailListItemAction => {
+        emailListItemAction.addEventListener('click', e => {
+          e.stopPropagation();
+          let currentTarget = e.currentTarget;
+          if (Helpers._hasClass('email-delete', currentTarget)) {
+            currentTarget.parentNode.closest('li.email-list-item').remove();
+          } else if (Helpers._hasClass('email-read', currentTarget)) {
+            currentTarget.parentNode.closest('li.email-list-item').classList.add('email-marked-read');
+            Helpers._toggleClass(currentTarget, 'email-read', 'email-unread');
+            Helpers._toggleClass(currentTarget.querySelector('i'), 'ti-mail-opened', 'ti-mail');
+          } else if (Helpers._hasClass('email-unread', currentTarget)) {
+            currentTarget.parentNode.closest('li.email-list-item').classList.remove('email-marked-read');
+            Helpers._toggleClass(currentTarget, 'email-read', 'email-unread');
+            Helpers._toggleClass(currentTarget.querySelector('i'), 'ti-mail-opened', 'ti-mail');
+          }
+        });
+      });
+    }
+  })();
+});

httpdocs/themes/vuexy/js/app-invoice-add.js

@@ -0,0 +1,127 @@
+/**
+ * App Invoice - Add
+ */
+
+'use strict';
+
+(function () {
+  const invoiceItemPriceList = document.querySelectorAll('.invoice-item-price'),
+    invoiceItemQtyList = document.querySelectorAll('.invoice-item-qty'),
+    invoiceDateList = document.querySelectorAll('.date-picker');
+
+  // Price
+  if (invoiceItemPriceList) {
+    invoiceItemPriceList.forEach(function (invoiceItemPrice) {
+      new Cleave(invoiceItemPrice, {
+        delimiter: '',
+        numeral: true
+      });
+    });
+  }
+
+  // Qty
+  if (invoiceItemQtyList) {
+    invoiceItemQtyList.forEach(function (invoiceItemQty) {
+      new Cleave(invoiceItemQty, {
+        delimiter: '',
+        numeral: true
+      });
+    });
+  }
+
+  // Datepicker
+  if (invoiceDateList) {
+    invoiceDateList.forEach(function (invoiceDateEl) {
+      invoiceDateEl.flatpickr({
+        monthSelectorType: 'static'
+      });
+    });
+  }
+})();
+
+// repeater (jquery)
+$(function () {
+  var applyChangesBtn = $('.btn-apply-changes'),
+    discount,
+    tax1,
+    tax2,
+    discountInput,
+    tax1Input,
+    tax2Input,
+    sourceItem = $('.source-item'),
+    adminDetails = {
+      'App Design': 'Designed UI kit & app pages.',
+      'App Customization': 'Customization & Bug Fixes.',
+      'ABC Template': 'Bootstrap 4 admin template.',
+      'App Development': 'Native App Development.'
+    };
+
+  // Prevent dropdown from closing on tax change
+  $(document).on('click', '.tax-select', function (e) {
+    e.stopPropagation();
+  });
+
+  // On tax change update it's value value
+  function updateValue(listener, el) {
+    listener.closest('.repeater-wrapper').find(el).text(listener.val());
+  }
+
+  // Apply item changes btn
+  if (applyChangesBtn.length) {
+    $(document).on('click', '.btn-apply-changes', function (e) {
+      var $this = $(this);
+      tax1Input = $this.closest('.dropdown-menu').find('#taxInput1');
+      tax2Input = $this.closest('.dropdown-menu').find('#taxInput2');
+      discountInput = $this.closest('.dropdown-menu').find('#discountInput');
+      tax1 = $this.closest('.repeater-wrapper').find('.tax-1');
+      tax2 = $this.closest('.repeater-wrapper').find('.tax-2');
+      discount = $('.discount');
+
+      if (tax1Input.val() !== null) {
+        updateValue(tax1Input, tax1);
+      }
+
+      if (tax2Input.val() !== null) {
+        updateValue(tax2Input, tax2);
+      }
+
+      if (discountInput.val().length) {
+        $this
+          .closest('.repeater-wrapper')
+          .find(discount)
+          .text(discountInput.val() + '%');
+      }
+    });
+  }
+
+  // Repeater init
+  if (sourceItem.length) {
+    sourceItem.on('submit', function (e) {
+      e.preventDefault();
+    });
+    sourceItem.repeater({
+      show: function () {
+        $(this).slideDown();
+        // Initialize tooltip on load of each item
+        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+        tooltipTriggerList.map(function (tooltipTriggerEl) {
+          return new bootstrap.Tooltip(tooltipTriggerEl);
+        });
+      },
+      hide: function (e) {
+        $(this).slideUp();
+      }
+    });
+  }
+
+  // Item details select onchange
+  $(document).on('change', '.item-details', function () {
+    var $this = $(this),
+      value = adminDetails[$this.val()];
+    if ($this.next('textarea').length) {
+      $this.next('textarea').val(value);
+    } else {
+      $this.after('<textarea class="form-control" rows="2">' + value + '</textarea>');
+    }
+  });
+});

httpdocs/themes/vuexy/js/app-invoice-edit.js

@@ -0,0 +1,134 @@
+/**
+ * App Invoice - Edit
+ */
+
+'use strict';
+
+(function () {
+  const invoiceItemPriceList = document.querySelectorAll('.invoice-item-price'),
+    invoiceItemQtyList = document.querySelectorAll('.invoice-item-qty'),
+    date = new Date(),
+    invoiceDate = document.querySelector('.invoice-date'),
+    dueDate = document.querySelector('.due-date');
+
+  // Price
+  if (invoiceItemPriceList) {
+    invoiceItemPriceList.forEach(function (invoiceItemPrice) {
+      new Cleave(invoiceItemPrice, {
+        delimiter: '',
+        numeral: true
+      });
+    });
+  }
+
+  // Qty
+  if (invoiceItemQtyList) {
+    invoiceItemQtyList.forEach(function (invoiceItemQty) {
+      new Cleave(invoiceItemQty, {
+        delimiter: '',
+        numeral: true
+      });
+    });
+  }
+
+  // Datepicker
+  if (invoiceDate) {
+    invoiceDate.flatpickr({
+      monthSelectorType: 'static',
+      defaultDate: date
+    });
+  }
+  if (dueDate) {
+    dueDate.flatpickr({
+      monthSelectorType: 'static',
+      defaultDate: new Date(date.getFullYear(), date.getMonth(), date.getDate() + 5)
+    });
+  }
+})();
+
+// repeater (jquery)
+$(function () {
+  var applyChangesBtn = $('.btn-apply-changes'),
+    discount,
+    tax1,
+    tax2,
+    discountInput,
+    taxInput1,
+    taxInput2,
+    sourceItem = $('.source-item'),
+    adminDetails = {
+      'App Design': 'Designed UI kit & app pages.',
+      'App Customization': 'Customization & Bug Fixes.',
+      'ABC Template': 'Bootstrap 4 admin template.',
+      'App Development': 'Native App Development.'
+    };
+
+  // Prevent dropdown from closing on tax change
+  $(document).on('click', '.tax-select', function (e) {
+    e.stopPropagation();
+  });
+
+  // On tax change update it's value value
+  function updateValue(listener, el) {
+    listener.closest('.repeater-wrapper').find(el).text(listener.val());
+  }
+
+  // Apply item changes btn
+  if (applyChangesBtn.length) {
+    $(document).on('click', '.btn-apply-changes', function (e) {
+      var $this = $(this);
+      taxInput1 = $this.closest('.dropdown-menu').find('#taxInput1');
+      taxInput2 = $this.closest('.dropdown-menu').find('#taxInput2');
+      discountInput = $this.closest('.dropdown-menu').find('#discountInput');
+      tax1 = $this.closest('.repeater-wrapper').find('.tax-1');
+      tax2 = $this.closest('.repeater-wrapper').find('.tax-2');
+      discount = $('.discount');
+
+      if (taxInput1.val() !== null) {
+        updateValue(taxInput1, tax1);
+      }
+
+      if (taxInput2.val() !== null) {
+        updateValue(taxInput2, tax2);
+      }
+
+      if (discountInput.val().length) {
+        $this
+          .closest('.repeater-wrapper')
+          .find(discount)
+          .text(discountInput.val() + '%');
+      }
+    });
+  }
+
+  // Repeater init
+  if (sourceItem.length) {
+    sourceItem.on('submit', function (e) {
+      e.preventDefault();
+    });
+    sourceItem.repeater({
+      show: function () {
+        $(this).slideDown();
+        // Initialize tooltip on load of each item
+        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+        tooltipTriggerList.map(function (tooltipTriggerEl) {
+          return new bootstrap.Tooltip(tooltipTriggerEl);
+        });
+      },
+      hide: function (e) {
+        $(this).slideUp();
+      }
+    });
+  }
+
+  // Item details select onchange
+  $(document).on('change', '.item-details', function () {
+    var $this = $(this),
+      value = adminDetails[$this.val()];
+    if ($this.next('textarea').length) {
+      $this.next('textarea').val(value);
+    } else {
+      $this.after('<textarea class="form-control" rows="2">' + value + '</textarea>');
+    }
+  });
+});

httpdocs/themes/vuexy/js/app-invoice-list.js

@@ -0,0 +1,297 @@
+/**
+ * App Invoice List (jquery)
+ */
+
+'use strict';
+
+$(function () {
+  // Variable declaration for table
+  var dt_invoice_table = $('.invoice-list-table');
+
+  // Invoice datatable
+  if (dt_invoice_table.length) {
+    var dt_invoice = dt_invoice_table.DataTable({
+      ajax: assetsPath + 'json/invoice-list.json', // JSON file to add data
+      columns: [
+        // columns according to JSON
+        { data: '' },
+        { data: 'invoice_id' },
+        { data: 'invoice_status' },
+        { data: 'issued_date' },
+        { data: 'client_name' },
+        { data: 'total' },
+        { data: 'balance' },
+        { data: 'invoice_status' },
+        { data: 'action' }
+      ],
+      columnDefs: [
+        {
+          // For Responsive
+          className: 'control',
+          responsivePriority: 2,
+          searchable: false,
+          targets: 0,
+          render: function (data, type, full, meta) {
+            return '';
+          }
+        },
+        {
+          // Invoice ID
+          targets: 1,
+          render: function (data, type, full, meta) {
+            var $invoice_id = full['invoice_id'];
+            // Creates full output for row
+            var $row_output = '<a href="app-invoice-preview.html">#' + $invoice_id + '</a>';
+            return $row_output;
+          }
+        },
+        {
+          // Invoice status
+          targets: 2,
+          render: function (data, type, full, meta) {
+            var $invoice_status = full['invoice_status'],
+              $due_date = full['due_date'],
+              $balance = full['balance'];
+            var roleBadgeObj = {
+              Sent: '<span class="badge badge-center rounded-pill bg-label-secondary w-px-30 h-px-30"><i class="ti ti-circle-check ti-sm"></i></span>',
+              Draft:
+                '<span class="badge badge-center rounded-pill bg-label-primary w-px-30 h-px-30"><i class="ti ti-device-floppy ti-sm"></i></span>',
+              'Past Due':
+                '<span class="badge badge-center rounded-pill bg-label-danger w-px-30 h-px-30"><i class="ti ti-info-circle ti-sm"></i></span>',
+              'Partial Payment':
+                '<span class="badge badge-center rounded-pill bg-label-success w-px-30 h-px-30"><i class="ti ti-circle-half-2 ti-sm"></i></span>',
+              Paid: '<span class="badge badge-center rounded-pill bg-label-warning w-px-30 h-px-30"><i class="ti ti-chart-pie ti-sm"></i></span>',
+              Downloaded:
+                '<span class="badge badge-center rounded-pill bg-label-info w-px-30 h-px-30"><i class="ti ti-arrow-down-circle ti-sm"></i></span>'
+            };
+            return (
+              "<span data-bs-toggle='tooltip' data-bs-html='true' title='<span>" +
+              $invoice_status +
+              '<br> <strong>Balance:</strong> ' +
+              $balance +
+              '<br> <strong>Due Date:</strong> ' +
+              $due_date +
+              "</span>'>" +
+              roleBadgeObj[$invoice_status] +
+              '</span>'
+            );
+          }
+        },
+        {
+          // Client name and Service
+          targets: 3,
+          responsivePriority: 4,
+          render: function (data, type, full, meta) {
+            var $name = full['client_name'],
+              $service = full['service'],
+              $image = full['avatar_image'],
+              $rand_num = Math.floor(Math.random() * 11) + 1,
+              $user_img = $rand_num + '.png';
+            if ($image === true) {
+              // For Avatar image
+              var $output =
+                '<img src="' + assetsPath + 'img/avatars/' + $user_img + '" alt="Avatar" class="rounded-circle">';
+            } else {
+              // For Avatar badge
+              var stateNum = Math.floor(Math.random() * 6),
+                states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'],
+                $state = states[stateNum],
+                $name = full['client_name'],
+                $initials = $name.match(/\b\w/g) || [];
+              $initials = (($initials.shift() || '') + ($initials.pop() || '')).toUpperCase();
+              $output = '<span class="avatar-initial rounded-circle bg-label-' + $state + '">' + $initials + '</span>';
+            }
+            // Creates full output for row
+            var $row_output =
+              '<div class="d-flex justify-content-start align-items-center">' +
+              '<div class="avatar-wrapper">' +
+              '<div class="avatar avatar-sm me-2">' +
+              $output +
+              '</div>' +
+              '</div>' +
+              '<div class="d-flex flex-column">' +
+              '<a href="pages-profile-user.html" class="text-body text-truncate"><span class="fw-semibold">' +
+              $name +
+              '</span></a>' +
+              '<small class="text-truncate text-muted">' +
+              $service +
+              '</small>' +
+              '</div>' +
+              '</div>';
+            return $row_output;
+          }
+        },
+        {
+          // Total Invoice Amount
+          targets: 4,
+          render: function (data, type, full, meta) {
+            var $total = full['total'];
+            return '<span class="d-none">' + $total + '</span>$' + $total;
+          }
+        },
+        {
+          // Due Date
+          targets: 5,
+          render: function (data, type, full, meta) {
+            var $due_date = new Date(full['due_date']);
+            // Creates full output for row
+            var $row_output =
+              '<span class="d-none">' +
+              moment($due_date).format('YYYYMMDD') +
+              '</span>' +
+              moment($due_date).format('DD MMM YYYY');
+            $due_date;
+            return $row_output;
+          }
+        },
+        {
+          // Client Balance/Status
+          targets: 6,
+          orderable: false,
+          render: function (data, type, full, meta) {
+            var $balance = full['balance'];
+            if ($balance === 0) {
+              var $badge_class = 'bg-label-success';
+              return '<span class="badge ' + $badge_class + '" text-capitalized> Paid </span>';
+            } else {
+              return '<span class="d-none">' + $balance + '</span>' + $balance;
+            }
+          }
+        },
+        {
+          targets: 7,
+          visible: false
+        },
+        {
+          // Actions
+          targets: -1,
+          title: 'Actions',
+          searchable: false,
+          orderable: false,
+          render: function (data, type, full, meta) {
+            return (
+              '<div class="d-flex align-items-center">' +
+              '<a href="javascript:;" data-bs-toggle="tooltip" class="text-body" data-bs-placement="top" title="Send Mail"><i class="ti ti-mail mx-2 ti-sm"></i></a>' +
+              '<a href="app-invoice-preview.html" data-bs-toggle="tooltip" class="text-body" data-bs-placement="top" title="Preview Invoice"><i class="ti ti-eye mx-2 ti-sm"></i></a>' +
+              '<div class="dropdown">' +
+              '<a href="javascript:;" class="btn dropdown-toggle hide-arrow text-body p-0" data-bs-toggle="dropdown"><i class="ti ti-dots-vertical ti-sm"></i></a>' +
+              '<div class="dropdown-menu dropdown-menu-end">' +
+              '<a href="javascript:;" class="dropdown-item">Download</a>' +
+              '<a href="app-invoice-edit.html" class="dropdown-item">Edit</a>' +
+              '<a href="javascript:;" class="dropdown-item">Duplicate</a>' +
+              '<div class="dropdown-divider"></div>' +
+              '<a href="javascript:;" class="dropdown-item delete-record text-danger">Delete</a>' +
+              '</div>' +
+              '</div>' +
+              '</div>'
+            );
+          }
+        }
+      ],
+      order: [[1, 'desc']],
+      dom:
+        '<"row ms-2 me-3"' +
+        '<"col-12 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start gap-2"l<"dt-action-buttons text-xl-end text-lg-start text-md-end text-start mt-md-0 mt-3"B>>' +
+        '<"col-12 col-md-6 d-flex align-items-center justify-content-end flex-column flex-md-row pe-3 gap-md-2"f<"invoice_status mb-3 mb-md-0">>' +
+        '>t' +
+        '<"row mx-2"' +
+        '<"col-sm-12 col-md-6"i>' +
+        '<"col-sm-12 col-md-6"p>' +
+        '>',
+      language: {
+        sLengthMenu: 'Show _MENU_',
+        search: '',
+        searchPlaceholder: 'Search Invoice'
+      },
+      // Buttons with Dropdown
+      buttons: [
+        {
+          text: '<i class="ti ti-plus me-md-1"></i><span class="d-md-inline-block d-none">Create Invoice</span>',
+          className: 'btn btn-primary',
+          action: function (e, dt, button, config) {
+            window.location = 'app-invoice-add.html';
+          }
+        }
+      ],
+      // For responsive popup
+      responsive: {
+        details: {
+          display: $.fn.dataTable.Responsive.display.modal({
+            header: function (row) {
+              var data = row.data();
+              return 'Details of ' + data['full_name'];
+            }
+          }),
+          type: 'column',
+          renderer: function (api, rowIdx, columns) {
+            var data = $.map(columns, function (col, i) {
+              return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
+                ? '<tr data-dt-row="' +
+                    col.rowIndex +
+                    '" data-dt-column="' +
+                    col.columnIndex +
+                    '">' +
+                    '<td>' +
+                    col.title +
+                    ':' +
+                    '</td> ' +
+                    '<td>' +
+                    col.data +
+                    '</td>' +
+                    '</tr>'
+                : '';
+            }).join('');
+
+            return data ? $('<table class="table"/><tbody />').append(data) : false;
+          }
+        }
+      },
+      initComplete: function () {
+        // Adding role filter once table initialized
+        this.api()
+          .columns(7)
+          .every(function () {
+            var column = this;
+            var select = $(
+              '<select id="UserRole" class="form-select"><option value=""> Select Status </option></select>'
+            )
+              .appendTo('.invoice_status')
+              .on('change', function () {
+                var val = $.fn.dataTable.util.escapeRegex($(this).val());
+                column.search(val ? '^' + val + '$' : '', true, false).draw();
+              });
+
+            column
+              .data()
+              .unique()
+              .sort()
+              .each(function (d, j) {
+                select.append('<option value="' + d + '" class="text-capitalize">' + d + '</option>');
+              });
+          });
+      }
+    });
+  }
+
+  // On each datatable draw, initialize tooltip
+  dt_invoice_table.on('draw.dt', function () {
+    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+      return new bootstrap.Tooltip(tooltipTriggerEl, {
+        boundary: document.body
+      });
+    });
+  });
+
+  // Delete Record
+  $('.invoice-list-table tbody').on('click', '.delete-record', function () {
+    dt_invoice.row($(this).parents('tr')).remove().draw();
+  });
+
+  // Filter form control to default size
+  // ? setTimeout used for multilingual table initialization
+  setTimeout(() => {
+    $('.dataTables_filter .form-control').removeClass('form-control-sm');
+    $('.dataTables_length .form-select').removeClass('form-select-sm');
+  }, 300);
+});

httpdocs/themes/vuexy/js/app-invoice-print.js

@@ -0,0 +1,9 @@
+/**
+ * Invoice Print
+ */
+
+'use strict';
+
+(function () {
+  window.print();
+})();

httpdocs/themes/vuexy/js/app-kanban.js

@@ -0,0 +1,471 @@
+/**
+ * App Kanban
+ */
+
+'use strict';
+
+(async function () {
+  let boards;
+  const kanbanSidebar = document.querySelector('.kanban-update-item-sidebar'),
+    kanbanWrapper = document.querySelector('.kanban-wrapper'),
+    commentEditor = document.querySelector('.comment-editor'),
+    kanbanAddNewBoard = document.querySelector('.kanban-add-new-board'),
+    kanbanAddNewInput = [].slice.call(document.querySelectorAll('.kanban-add-board-input')),
+    kanbanAddBoardBtn = document.querySelector('.kanban-add-board-btn'),
+    datePicker = document.querySelector('#due-date'),
+    select2 = $('.select2'), // ! Using jquery vars due to select2 jQuery dependency
+    assetsPath = document.querySelector('html').getAttribute('data-assets-path');
+
+  // Init kanban Offcanvas
+  const kanbanOffcanvas = new bootstrap.Offcanvas(kanbanSidebar);
+
+  // Get kanban data
+  const kanbanResponse = await fetch(assetsPath + 'json/kanban.json');
+  if (!kanbanResponse.ok) {
+    console.error('error', kanbanResponse);
+  }
+  boards = await kanbanResponse.json();
+
+  // datepicker init
+  if (datePicker) {
+    datePicker.flatpickr({
+      monthSelectorType: 'static',
+      altInput: true,
+      altFormat: 'j F, Y',
+      dateFormat: 'Y-m-d'
+    });
+  }
+
+  //! TODO: Update Event label and guest code to JS once select removes jQuery dependency
+  // select2
+  if (select2.length) {
+    function renderLabels(option) {
+      if (!option.id) {
+        return option.text;
+      }
+      var $badge = "<div class='badge " + $(option.element).data('color') + " rounded-pill'> " + option.text + '</div>';
+      return $badge;
+    }
+
+    select2.each(function () {
+      var $this = $(this);
+      $this.wrap("<div class='position-relative'></div>").select2({
+        placeholder: 'Select Label',
+        dropdownParent: $this.parent(),
+        templateResult: renderLabels,
+        templateSelection: renderLabels,
+        escapeMarkup: function (es) {
+          return es;
+        }
+      });
+    });
+  }
+
+  // Comment editor
+  if (commentEditor) {
+    new Quill(commentEditor, {
+      modules: {
+        toolbar: '.comment-toolbar'
+      },
+      placeholder: 'Write a Comment... ',
+      theme: 'snow'
+    });
+  }
+
+  // Render board dropdown
+  function renderBoardDropdown() {
+    return (
+      "<div class='dropdown'>" +
+      "<i class='dropdown-toggle ti ti-dots-vertical cursor-pointer' id='board-dropdown' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false'></i>" +
+      "<div class='dropdown-menu dropdown-menu-end' aria-labelledby='board-dropdown'>" +
+      "<a class='dropdown-item delete-board' href='javascript:void(0)'> <i class='ti ti-trash ti-xs' me-1></i> <span class='align-middle'>Delete</span></a>" +
+      "<a class='dropdown-item' href='javascript:void(0)'><i class='ti ti-edit ti-xs' me-1></i> <span class='align-middle'>Rename</span></a>" +
+      "<a class='dropdown-item' href='javascript:void(0)'><i class='ti ti-archive ti-xs' me-1></i> <span class='align-middle'>Archive</span></a>" +
+      '</div>' +
+      '</div>'
+    );
+  }
+  // Render item dropdown
+  function renderDropdown() {
+    return (
+      "<div class='dropdown kanban-tasks-item-dropdown'>" +
+      "<i class='dropdown-toggle ti ti-dots-vertical' id='kanban-tasks-item-dropdown' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false'></i>" +
+      "<div class='dropdown-menu dropdown-menu-end' aria-labelledby='kanban-tasks-item-dropdown'>" +
+      "<a class='dropdown-item' href='javascript:void(0)'>Copy task link</a>" +
+      "<a class='dropdown-item' href='javascript:void(0)'>Duplicate task</a>" +
+      "<a class='dropdown-item delete-task' href='javascript:void(0)'>Delete</a>" +
+      '</div>' +
+      '</div>'
+    );
+  }
+  // Render header
+  function renderHeader(color, text) {
+    return (
+      "<div class='d-flex justify-content-between flex-wrap align-items-center mb-2 pb-1'>" +
+      "<div class='item-badges'> " +
+      "<div class='badge rounded-pill bg-label-" +
+      color +
+      "'> " +
+      text +
+      '</div>' +
+      '</div>' +
+      renderDropdown() +
+      '</div>'
+    );
+  }
+
+  // Render avatar
+  function renderAvatar(images, pullUp, size, margin, members) {
+    var $transition = pullUp ? ' pull-up' : '',
+      $size = size ? 'avatar-' + size + '' : '',
+      member = members == undefined ? ' ' : members.split(',');
+
+    return images == undefined
+      ? ' '
+      : images
+          .split(',')
+          .map(function (img, index, arr) {
+            var $margin = margin && index !== arr.length - 1 ? ' me-' + margin + '' : '';
+
+            return (
+              "<div class='avatar " +
+              $size +
+              $margin +
+              "'" +
+              "data-bs-toggle='tooltip' data-bs-placement='top'" +
+              "title='" +
+              member[index] +
+              "'" +
+              '>' +
+              "<img src='" +
+              assetsPath +
+              'img/avatars/' +
+              img +
+              "' alt='Avatar' class='rounded-circle " +
+              $transition +
+              "'>" +
+              '</div>'
+            );
+          })
+          .join(' ');
+  }
+
+  // Render footer
+  function renderFooter(attachments, comments, assigned, members) {
+    return (
+      "<div class='d-flex justify-content-between align-items-center flex-wrap mt-2 pt-1'>" +
+      "<div class='d-flex'> <span class='d-flex align-items-center me-2'><i class='ti ti-paperclip ti-xs me-1'></i>" +
+      "<span class='attachments'>" +
+      attachments +
+      '</span>' +
+      "</span> <span class='d-flex align-items-center ms-1'><i class='ti ti-message-dots ti-xs me-1'></i>" +
+      '<span> ' +
+      comments +
+      ' </span>' +
+      '</span></div>' +
+      "<div class='avatar-group d-flex align-items-center assigned-avatar'>" +
+      renderAvatar(assigned, true, 'xs', null, members) +
+      '</div>' +
+      '</div>'
+    );
+  }
+  // Init kanban
+  const kanban = new jKanban({
+    element: '.kanban-wrapper',
+    gutter: '15px',
+    widthBoard: '250px',
+    dragItems: true,
+    boards: boards,
+    dragBoards: true,
+    addItemButton: true,
+    buttonContent: '+ Add Item',
+    itemAddOptions: {
+      enabled: true, // add a button to board for easy item creation
+      content: '+ Add New Item', // text or html content of the board button
+      class: 'kanban-title-button btn', // default class of the button
+      footer: false // position the button on footer
+    },
+    click: function (el) {
+      let element = el;
+      let title = element.getAttribute('data-eid')
+          ? element.querySelector('.kanban-text').textContent
+          : element.textContent,
+        date = element.getAttribute('data-due-date'),
+        dateObj = new Date(),
+        year = dateObj.getFullYear(),
+        dateToUse = date
+          ? date + ', ' + year
+          : dateObj.getDate() + ' ' + dateObj.toLocaleString('en', { month: 'long' }) + ', ' + year,
+        label = element.getAttribute('data-badge-text'),
+        avatars = element.getAttribute('data-assigned');
+
+      // Show kanban offcanvas
+      kanbanOffcanvas.show();
+
+      // To get data on sidebar
+      kanbanSidebar.querySelector('#title').value = title;
+      kanbanSidebar.querySelector('#due-date').nextSibling.value = dateToUse;
+
+      // ! Using jQuery method to get sidebar due to select2 dependency
+      $('.kanban-update-item-sidebar').find(select2).val(label).trigger('change');
+
+      // Remove & Update assigned
+      kanbanSidebar.querySelector('.assigned').innerHTML = '';
+      kanbanSidebar
+        .querySelector('.assigned')
+        .insertAdjacentHTML(
+          'afterbegin',
+          renderAvatar(avatars, false, 'xs', '1', el.getAttribute('data-members')) +
+            "<div class='avatar avatar-xs ms-1'>" +
+            "<span class='avatar-initial rounded-circle bg-label-secondary'><i class='ti ti-plus ti-xs text-heading'></i></span>" +
+            '</div>'
+        );
+    },
+
+    buttonClick: function (el, boardId) {
+      const addNew = document.createElement('form');
+      addNew.setAttribute('class', 'new-item-form');
+      addNew.innerHTML =
+        '<div class="mb-3">' +
+        '<textarea class="form-control add-new-item" rows="2" placeholder="Add Content" autofocus required></textarea>' +
+        '</div>' +
+        '<div class="mb-3">' +
+        '<button type="submit" class="btn btn-primary btn-sm me-2">Add</button>' +
+        '<button type="button" class="btn btn-label-secondary btn-sm cancel-add-item">Cancel</button>' +
+        '</div>';
+      kanban.addForm(boardId, addNew);
+
+      addNew.addEventListener('submit', function (e) {
+        e.preventDefault();
+        const currentBoard = [].slice.call(
+          document.querySelectorAll('.kanban-board[data-id=' + boardId + '] .kanban-item')
+        );
+        kanban.addElement(boardId, {
+          title: "<span class='kanban-text'>" + e.target[0].value + '</span>',
+          id: boardId + '-' + currentBoard.length + 1
+        });
+
+        // add dropdown in new boards
+        const kanbanText = [].slice.call(
+          document.querySelectorAll('.kanban-board[data-id=' + boardId + '] .kanban-text')
+        );
+        kanbanText.forEach(function (e) {
+          e.insertAdjacentHTML('beforebegin', renderDropdown());
+        });
+
+        // prevent sidebar to open onclick dropdown buttons of new tasks
+        const newTaskDropdown = [].slice.call(document.querySelectorAll('.kanban-item .kanban-tasks-item-dropdown'));
+        if (newTaskDropdown) {
+          newTaskDropdown.forEach(function (e) {
+            e.addEventListener('click', function (el) {
+              el.stopPropagation();
+            });
+          });
+        }
+
+        // delete tasks for new boards
+        const deleteTask = [].slice.call(
+          document.querySelectorAll('.kanban-board[data-id=' + boardId + '] .delete-task')
+        );
+        deleteTask.forEach(function (e) {
+          e.addEventListener('click', function () {
+            const id = this.closest('.kanban-item').getAttribute('data-eid');
+            kanban.removeElement(id);
+          });
+        });
+        addNew.remove();
+      });
+
+      // Remove form on clicking cancel button
+      addNew.querySelector('.cancel-add-item').addEventListener('click', function (e) {
+        addNew.remove();
+      });
+    }
+  });
+
+  // Kanban Wrapper scrollbar
+  if (kanbanWrapper) {
+    new PerfectScrollbar(kanbanWrapper);
+  }
+
+  const kanbanContainer = document.querySelector('.kanban-container'),
+    kanbanTitleBoard = [].slice.call(document.querySelectorAll('.kanban-title-board')),
+    kanbanItem = [].slice.call(document.querySelectorAll('.kanban-item'));
+
+  // Render custom items
+  if (kanbanItem) {
+    kanbanItem.forEach(function (el) {
+      const element = "<span class='kanban-text'>" + el.textContent + '</span>';
+      let img = '';
+      if (el.getAttribute('data-image') !== null) {
+        img =
+          "<img class='img-fluid rounded mb-2' src='" +
+          assetsPath +
+          'img/elements/' +
+          el.getAttribute('data-image') +
+          "'>";
+      }
+      el.textContent = '';
+      if (el.getAttribute('data-badge') !== undefined && el.getAttribute('data-badge-text') !== undefined) {
+        el.insertAdjacentHTML(
+          'afterbegin',
+          renderHeader(el.getAttribute('data-badge'), el.getAttribute('data-badge-text')) + img + element
+        );
+      }
+      if (
+        el.getAttribute('data-comments') !== undefined ||
+        el.getAttribute('data-due-date') !== undefined ||
+        el.getAttribute('data-assigned') !== undefined
+      ) {
+        el.insertAdjacentHTML(
+          'beforeend',
+          renderFooter(
+            el.getAttribute('data-attachments'),
+            el.getAttribute('data-comments'),
+            el.getAttribute('data-assigned'),
+            el.getAttribute('data-members')
+          )
+        );
+      }
+    });
+  }
+
+  // To initialize tooltips for rendered items
+  const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+  tooltipTriggerList.map(function (tooltipTriggerEl) {
+    return new bootstrap.Tooltip(tooltipTriggerEl);
+  });
+
+  // prevent sidebar to open onclick dropdown buttons of tasks
+  const tasksItemDropdown = [].slice.call(document.querySelectorAll('.kanban-tasks-item-dropdown'));
+  if (tasksItemDropdown) {
+    tasksItemDropdown.forEach(function (e) {
+      e.addEventListener('click', function (el) {
+        el.stopPropagation();
+      });
+    });
+  }
+
+  // Toggle add new input and actions add-new-btn
+  if (kanbanAddBoardBtn) {
+    kanbanAddBoardBtn.addEventListener('click', () => {
+      kanbanAddNewInput.forEach(el => {
+        el.value = '';
+        el.classList.toggle('d-none');
+      });
+    });
+  }
+
+  // Render add new inline with boards
+  if (kanbanContainer) {
+    kanbanContainer.appendChild(kanbanAddNewBoard);
+  }
+
+  // Makes kanban title editable for rendered boards
+  if (kanbanTitleBoard) {
+    kanbanTitleBoard.forEach(function (elem) {
+      elem.addEventListener('mouseenter', function () {
+        this.contentEditable = 'true';
+      });
+
+      // Appends delete icon with title
+      elem.insertAdjacentHTML('afterend', renderBoardDropdown());
+    });
+  }
+
+  // To delete Board for rendered boards
+  const deleteBoards = [].slice.call(document.querySelectorAll('.delete-board'));
+  if (deleteBoards) {
+    deleteBoards.forEach(function (elem) {
+      elem.addEventListener('click', function () {
+        const id = this.closest('.kanban-board').getAttribute('data-id');
+        kanban.removeBoard(id);
+      });
+    });
+  }
+
+  // Delete task for rendered boards
+  const deleteTask = [].slice.call(document.querySelectorAll('.delete-task'));
+  if (deleteTask) {
+    deleteTask.forEach(function (e) {
+      e.addEventListener('click', function () {
+        const id = this.closest('.kanban-item').getAttribute('data-eid');
+        kanban.removeElement(id);
+      });
+    });
+  }
+
+  // Cancel btn add new input
+  const cancelAddNew = document.querySelector('.kanban-add-board-cancel-btn');
+  if (cancelAddNew) {
+    cancelAddNew.addEventListener('click', function () {
+      kanbanAddNewInput.forEach(el => {
+        el.classList.toggle('d-none');
+      });
+    });
+  }
+
+  // Add new board
+  if (kanbanAddNewBoard) {
+    kanbanAddNewBoard.addEventListener('submit', function (e) {
+      e.preventDefault();
+      const thisEle = this,
+        value = thisEle.querySelector('.form-control').value,
+        id = value.replace(/\s+/g, '-').toLowerCase();
+      kanban.addBoards([
+        {
+          id: id,
+          title: value
+        }
+      ]);
+
+      // Adds delete board option to new board, delete new boards & updates data-order
+      const kanbanBoardLastChild = document.querySelectorAll('.kanban-board:last-child')[0];
+      if (kanbanBoardLastChild) {
+        const header = kanbanBoardLastChild.querySelector('.kanban-title-board');
+        header.insertAdjacentHTML('afterend', renderBoardDropdown());
+
+        // To make newly added boards title editable
+        kanbanBoardLastChild.querySelector('.kanban-title-board').addEventListener('mouseenter', function () {
+          this.contentEditable = 'true';
+        });
+      }
+
+      // Add delete event to delete newly added boards
+      const deleteNewBoards = kanbanBoardLastChild.querySelector('.delete-board');
+      if (deleteNewBoards) {
+        deleteNewBoards.addEventListener('click', function () {
+          const id = this.closest('.kanban-board').getAttribute('data-id');
+          kanban.removeBoard(id);
+        });
+      }
+
+      // Remove current append new add new form
+      if (kanbanAddNewInput) {
+        kanbanAddNewInput.forEach(el => {
+          el.classList.add('d-none');
+        });
+      }
+
+      // To place inline add new btn after clicking add btn
+      if (kanbanContainer) {
+        kanbanContainer.appendChild(kanbanAddNewBoard);
+      }
+    });
+  }
+
+  // Clear comment editor on close
+  kanbanSidebar.addEventListener('hidden.bs.offcanvas', function () {
+    kanbanSidebar.querySelector('.ql-editor').firstElementChild.innerHTML = '';
+  });
+
+  // Re-init tooltip when offcanvas opens(Bootstrap bug)
+  if (kanbanSidebar) {
+    kanbanSidebar.addEventListener('shown.bs.offcanvas', function () {
+      const tooltipTriggerList = [].slice.call(kanbanSidebar.querySelectorAll('[data-bs-toggle="tooltip"]'));
+      tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl);
+      });
+    });
+  }
+})();

httpdocs/themes/vuexy/js/app-user-list.js

@@ -0,0 +1,516 @@
+/**
+ * Page User List
+ */
+
+'use strict';
+
+// Datatable (jquery)
+$(function () {
+  let borderColor, bodyBg, headingColor;
+
+  if (isDarkStyle) {
+    borderColor = config.colors_dark.borderColor;
+    bodyBg = config.colors_dark.bodyBg;
+    headingColor = config.colors_dark.headingColor;
+  } else {
+    borderColor = config.colors.borderColor;
+    bodyBg = config.colors.bodyBg;
+    headingColor = config.colors.headingColor;
+  }
+
+  // Variable declaration for table
+  var dt_user_table = $('.datatables-users'),
+    select2 = $('.select2'),
+    userView = 'app-user-view-account.html',
+    statusObj = {
+      1: { title: 'Pending', class: 'bg-label-warning' },
+      2: { title: 'Active', class: 'bg-label-success' },
+      3: { title: 'Inactive', class: 'bg-label-secondary' }
+    };
+
+  if (select2.length) {
+    var $this = select2;
+    $this.wrap('<div class="position-relative"></div>').select2({
+      placeholder: 'Select Country',
+      dropdownParent: $this.parent()
+    });
+  }
+
+  // Users datatable
+  if (dt_user_table.length) {
+    var dt_user = dt_user_table.DataTable({
+      ajax: assetsPath + 'json/user-list.json', // JSON file to add data
+      columns: [
+        // columns according to JSON
+        { data: '' },
+        { data: 'full_name' },
+        { data: 'role' },
+        { data: 'current_plan' },
+        { data: 'billing' },
+        { data: 'status' },
+        { data: 'action' }
+      ],
+      columnDefs: [
+        {
+          // For Responsive
+          className: 'control',
+          searchable: false,
+          orderable: false,
+          responsivePriority: 2,
+          targets: 0,
+          render: function (data, type, full, meta) {
+            return '';
+          }
+        },
+        {
+          // User full name and email
+          targets: 1,
+          responsivePriority: 4,
+          render: function (data, type, full, meta) {
+            var $name = full['full_name'],
+              $email = full['email'],
+              $image = full['avatar'];
+            if ($image) {
+              // For Avatar image
+              var $output =
+                '<img src="' + assetsPath + 'img/avatars/' + $image + '" alt="Avatar" class="rounded-circle">';
+            } else {
+              // For Avatar badge
+              var stateNum = Math.floor(Math.random() * 6);
+              var states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
+              var $state = states[stateNum],
+                $name = full['full_name'],
+                $initials = $name.match(/\b\w/g) || [];
+              $initials = (($initials.shift() || '') + ($initials.pop() || '')).toUpperCase();
+              $output = '<span class="avatar-initial rounded-circle bg-label-' + $state + '">' + $initials + '</span>';
+            }
+            // Creates full output for row
+            var $row_output =
+              '<div class="d-flex justify-content-start align-items-center user-name">' +
+              '<div class="avatar-wrapper">' +
+              '<div class="avatar avatar-sm me-3">' +
+              $output +
+              '</div>' +
+              '</div>' +
+              '<div class="d-flex flex-column">' +
+              '<a href="' +
+              userView +
+              '" class="text-body text-truncate"><span class="fw-semibold">' +
+              $name +
+              '</span></a>' +
+              '<small class="text-muted">' +
+              $email +
+              '</small>' +
+              '</div>' +
+              '</div>';
+            return $row_output;
+          }
+        },
+        {
+          // User Role
+          targets: 2,
+          render: function (data, type, full, meta) {
+            var $role = full['role'];
+            var roleBadgeObj = {
+              Subscriber:
+                '<span class="badge badge-center rounded-pill bg-label-warning w-px-30 h-px-30 me-2"><i class="ti ti-user ti-sm"></i></span>',
+              Author:
+                '<span class="badge badge-center rounded-pill bg-label-success w-px-30 h-px-30 me-2"><i class="ti ti-circle-check ti-sm"></i></span>',
+              Maintainer:
+                '<span class="badge badge-center rounded-pill bg-label-primary w-px-30 h-px-30 me-2"><i class="ti ti-chart-pie-2 ti-sm"></i></span>',
+              Editor:
+                '<span class="badge badge-center rounded-pill bg-label-info w-px-30 h-px-30 me-2"><i class="ti ti-edit ti-sm"></i></span>',
+              Admin:
+                '<span class="badge badge-center rounded-pill bg-label-secondary w-px-30 h-px-30 me-2"><i class="ti ti-device-laptop ti-sm"></i></span>'
+            };
+            return "<span class='text-truncate d-flex align-items-center'>" + roleBadgeObj[$role] + $role + '</span>';
+          }
+        },
+        {
+          // Plans
+          targets: 3,
+          render: function (data, type, full, meta) {
+            var $plan = full['current_plan'];
+
+            return '<span class="fw-semibold">' + $plan + '</span>';
+          }
+        },
+        {
+          // User Status
+          targets: 5,
+          render: function (data, type, full, meta) {
+            var $status = full['status'];
+
+            return (
+              '<span class="badge ' +
+              statusObj[$status].class +
+              '" text-capitalized>' +
+              statusObj[$status].title +
+              '</span>'
+            );
+          }
+        },
+        {
+          // Actions
+          targets: -1,
+          title: 'Actions',
+          searchable: false,
+          orderable: false,
+          render: function (data, type, full, meta) {
+            return (
+              '<div class="d-flex align-items-center">' +
+              '<a href="javascript:;" class="text-body"><i class="ti ti-edit ti-sm me-2"></i></a>' +
+              '<a href="javascript:;" class="text-body delete-record"><i class="ti ti-trash ti-sm mx-2"></i></a>' +
+              '<a href="javascript:;" class="text-body dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="ti ti-dots-vertical ti-sm mx-1"></i></a>' +
+              '<div class="dropdown-menu dropdown-menu-end m-0">' +
+              '<a href="' +
+              userView +
+              '" class="dropdown-item">View</a>' +
+              '<a href="javascript:;" class="dropdown-item">Suspend</a>' +
+              '</div>' +
+              '</div>'
+            );
+          }
+        }
+      ],
+      order: [[1, 'desc']],
+      dom:
+        '<"row me-2"' +
+        '<"col-md-2"<"me-3"l>>' +
+        '<"col-md-10"<"dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-center justify-content-end flex-md-row flex-column mb-3 mb-md-0"fB>>' +
+        '>t' +
+        '<"row mx-2"' +
+        '<"col-sm-12 col-md-6"i>' +
+        '<"col-sm-12 col-md-6"p>' +
+        '>',
+      language: {
+        sLengthMenu: '_MENU_',
+        search: '',
+        searchPlaceholder: 'Search..'
+      },
+      // Buttons with Dropdown
+      buttons: [
+        {
+          extend: 'collection',
+          className: 'btn btn-label-secondary dropdown-toggle mx-3',
+          text: '<i class="ti ti-screen-share me-1 ti-xs"></i>Export',
+          buttons: [
+            {
+              extend: 'print',
+              text: '<i class="ti ti-printer me-2" ></i>Print',
+              className: 'dropdown-item',
+              exportOptions: {
+                columns: [1, 2, 3, 4, 5],
+                // prevent avatar to be print
+                format: {
+                  body: function (inner, coldex, rowdex) {
+                    if (inner.length <= 0) return inner;
+                    var el = $.parseHTML(inner);
+                    var result = '';
+                    $.each(el, function (index, item) {
+                      if (item.classList !== undefined && item.classList.contains('user-name')) {
+                        result = result + item.lastChild.firstChild.textContent;
+                      } else if (item.innerText === undefined) {
+                        result = result + item.textContent;
+                      } else result = result + item.innerText;
+                    });
+                    return result;
+                  }
+                }
+              },
+              customize: function (win) {
+                //customize print view for dark
+                $(win.document.body)
+                  .css('color', headingColor)
+                  .css('border-color', borderColor)
+                  .css('background-color', bodyBg);
+                $(win.document.body)
+                  .find('table')
+                  .addClass('compact')
+                  .css('color', 'inherit')
+                  .css('border-color', 'inherit')
+                  .css('background-color', 'inherit');
+              }
+            },
+            {
+              extend: 'csv',
+              text: '<i class="ti ti-file-text me-2" ></i>Csv',
+              className: 'dropdown-item',
+              exportOptions: {
+                columns: [1, 2, 3, 4, 5],
+                // prevent avatar to be display
+                format: {
+                  body: function (inner, coldex, rowdex) {
+                    if (inner.length <= 0) return inner;
+                    var el = $.parseHTML(inner);
+                    var result = '';
+                    $.each(el, function (index, item) {
+                      if (item.classList !== undefined && item.classList.contains('user-name')) {
+                        result = result + item.lastChild.firstChild.textContent;
+                      } else if (item.innerText === undefined) {
+                        result = result + item.textContent;
+                      } else result = result + item.innerText;
+                    });
+                    return result;
+                  }
+                }
+              }
+            },
+            {
+              extend: 'excel',
+              text: '<i class="ti ti-file-spreadsheet me-2"></i>Excel',
+              className: 'dropdown-item',
+              exportOptions: {
+                columns: [1, 2, 3, 4, 5],
+                // prevent avatar to be display
+                format: {
+                  body: function (inner, coldex, rowdex) {
+                    if (inner.length <= 0) return inner;
+                    var el = $.parseHTML(inner);
+                    var result = '';
+                    $.each(el, function (index, item) {
+                      if (item.classList !== undefined && item.classList.contains('user-name')) {
+                        result = result + item.lastChild.firstChild.textContent;
+                      } else if (item.innerText === undefined) {
+                        result = result + item.textContent;
+                      } else result = result + item.innerText;
+                    });
+                    return result;
+                  }
+                }
+              }
+            },
+            {
+              extend: 'pdf',
+              text: '<i class="ti ti-file-code-2 me-2"></i>Pdf',
+              className: 'dropdown-item',
+              exportOptions: {
+                columns: [1, 2, 3, 4, 5],
+                // prevent avatar to be display
+                format: {
+                  body: function (inner, coldex, rowdex) {
+                    if (inner.length <= 0) return inner;
+                    var el = $.parseHTML(inner);
+                    var result = '';
+                    $.each(el, function (index, item) {
+                      if (item.classList !== undefined && item.classList.contains('user-name')) {
+                        result = result + item.lastChild.firstChild.textContent;
+                      } else if (item.innerText === undefined) {
+                        result = result + item.textContent;
+                      } else result = result + item.innerText;
+                    });
+                    return result;
+                  }
+                }
+              }
+            },
+            {
+              extend: 'copy',
+              text: '<i class="ti ti-copy me-2" ></i>Copy',
+              className: 'dropdown-item',
+              exportOptions: {
+                columns: [1, 2, 3, 4, 5],
+                // prevent avatar to be display
+                format: {
+                  body: function (inner, coldex, rowdex) {
+                    if (inner.length <= 0) return inner;
+                    var el = $.parseHTML(inner);
+                    var result = '';
+                    $.each(el, function (index, item) {
+                      if (item.classList !== undefined && item.classList.contains('user-name')) {
+                        result = result + item.lastChild.firstChild.textContent;
+                      } else if (item.innerText === undefined) {
+                        result = result + item.textContent;
+                      } else result = result + item.innerText;
+                    });
+                    return result;
+                  }
+                }
+              }
+            }
+          ]
+        },
+        {
+          text: '<i class="ti ti-plus me-0 me-sm-1 ti-xs"></i><span class="d-none d-sm-inline-block">Add New User</span>',
+          className: 'add-new btn btn-primary',
+          attr: {
+            'data-bs-toggle': 'offcanvas',
+            'data-bs-target': '#offcanvasAddUser'
+          }
+        }
+      ],
+      // For responsive popup
+      responsive: {
+        details: {
+          display: $.fn.dataTable.Responsive.display.modal({
+            header: function (row) {
+              var data = row.data();
+              return 'Details of ' + data['full_name'];
+            }
+          }),
+          type: 'column',
+          renderer: function (api, rowIdx, columns) {
+            var data = $.map(columns, function (col, i) {
+              return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
+                ? '<tr data-dt-row="' +
+                    col.rowIndex +
+                    '" data-dt-column="' +
+                    col.columnIndex +
+                    '">' +
+                    '<td>' +
+                    col.title +
+                    ':' +
+                    '</td> ' +
+                    '<td>' +
+                    col.data +
+                    '</td>' +
+                    '</tr>'
+                : '';
+            }).join('');
+
+            return data ? $('<table class="table"/><tbody />').append(data) : false;
+          }
+        }
+      },
+      initComplete: function () {
+        // Adding role filter once table initialized
+        this.api()
+          .columns(2)
+          .every(function () {
+            var column = this;
+            var select = $(
+              '<select id="UserRole" class="form-select text-capitalize"><option value=""> Select Role </option></select>'
+            )
+              .appendTo('.user_role')
+              .on('change', function () {
+                var val = $.fn.dataTable.util.escapeRegex($(this).val());
+                column.search(val ? '^' + val + '$' : '', true, false).draw();
+              });
+
+            column
+              .data()
+              .unique()
+              .sort()
+              .each(function (d, j) {
+                select.append('<option value="' + d + '">' + d + '</option>');
+              });
+          });
+        // Adding plan filter once table initialized
+        this.api()
+          .columns(3)
+          .every(function () {
+            var column = this;
+            var select = $(
+              '<select id="UserPlan" class="form-select text-capitalize"><option value=""> Select Plan </option></select>'
+            )
+              .appendTo('.user_plan')
+              .on('change', function () {
+                var val = $.fn.dataTable.util.escapeRegex($(this).val());
+                column.search(val ? '^' + val + '$' : '', true, false).draw();
+              });
+
+            column
+              .data()
+              .unique()
+              .sort()
+              .each(function (d, j) {
+                select.append('<option value="' + d + '">' + d + '</option>');
+              });
+          });
+        // Adding status filter once table initialized
+        this.api()
+          .columns(5)
+          .every(function () {
+            var column = this;
+            var select = $(
+              '<select id="FilterTransaction" class="form-select text-capitalize"><option value=""> Select Status </option></select>'
+            )
+              .appendTo('.user_status')
+              .on('change', function () {
+                var val = $.fn.dataTable.util.escapeRegex($(this).val());
+                column.search(val ? '^' + val + '$' : '', true, false).draw();
+              });
+
+            column
+              .data()
+              .unique()
+              .sort()
+              .each(function (d, j) {
+                select.append(
+                  '<option value="' +
+                    statusObj[d].title +
+                    '" class="text-capitalize">' +
+                    statusObj[d].title +
+                    '</option>'
+                );
+              });
+          });
+      }
+    });
+  }
+
+  // Delete Record
+  $('.datatables-users tbody').on('click', '.delete-record', function () {
+    dt_user.row($(this).parents('tr')).remove().draw();
+  });
+
+  // Filter form control to default size
+  // ? setTimeout used for multilingual table initialization
+  setTimeout(() => {
+    $('.dataTables_filter .form-control').removeClass('form-control-sm');
+    $('.dataTables_length .form-select').removeClass('form-select-sm');
+  }, 300);
+});
+
+// Validation & Phone mask
+(function () {
+  const phoneMaskList = document.querySelectorAll('.phone-mask'),
+    addNewUserForm = document.getElementById('addNewUserForm');
+
+  // Phone Number
+  if (phoneMaskList) {
+    phoneMaskList.forEach(function (phoneMask) {
+      new Cleave(phoneMask, {
+        phone: true,
+        phoneRegionCode: 'US'
+      });
+    });
+  }
+  // Add New User Form Validation
+  const fv = FormValidation.formValidation(addNewUserForm, {
+    fields: {
+      userFullname: {
+        validators: {
+          notEmpty: {
+            message: 'Please enter fullname '
+          }
+        }
+      },
+      userEmail: {
+        validators: {
+          notEmpty: {
+            message: 'Please enter your email'
+          },
+          emailAddress: {
+            message: 'The value is not a valid email address'
+          }
+        }
+      }
+    },
+    plugins: {
+      trigger: new FormValidation.plugins.Trigger(),
+      bootstrap5: new FormValidation.plugins.Bootstrap5({
+        // Use this for enabling/changing valid/invalid class
+        eleValidClass: '',
+        rowSelector: function (field, ele) {
+          // field is the field name & ele is the field element
+          return '.mb-3';
+        }
+      }),
+      submitButton: new FormValidation.plugins.SubmitButton(),
+      // Submit the form when all fields are valid
+      // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+      autoFocus: new FormValidation.plugins.AutoFocus()
+    }
+  });
+})();

httpdocs/themes/vuexy/js/app-user-view-account.js

@@ -0,0 +1,378 @@
+/**
+ * App User View - Account (jquery)
+ */
+
+$(function () {
+  'use strict';
+
+  // Variable declaration for table
+  var dt_project_table = $('.datatable-project'),
+    dt_invoice_table = $('.datatable-invoice');
+
+  // Project datatable
+  // --------------------------------------------------------------------
+  if (dt_project_table.length) {
+    var dt_project = dt_project_table.DataTable({
+      ajax: assetsPath + 'json/projects-list.json', // JSON file to add data
+      columns: [
+        // columns according to JSON
+        { data: '' },
+        { data: 'project_name' },
+        { data: 'total_task' },
+        { data: 'progress' },
+        { data: 'hours' }
+      ],
+      columnDefs: [
+        {
+          // For Responsive
+          className: 'control',
+          searchable: false,
+          responsivePriority: 2,
+          targets: 0,
+          render: function (data, type, full, meta) {
+            return '';
+          }
+        },
+        {
+          // User full name and email
+          targets: 1,
+          responsivePriority: 1,
+          render: function (data, type, full, meta) {
+            var $name = full['project_name'],
+              $framework = full['framework'],
+              $image = full['project_image'];
+            if ($image) {
+              // For Avatar image
+              var $output =
+                '<img src="' +
+                assetsPath +
+                'img/icons/brands/' +
+                $image +
+                '" alt="Project Image" class="rounded-circle">';
+            } else {
+              // For Avatar badge
+              var stateNum = Math.floor(Math.random() * 6) + 1;
+              var states = ['success', 'danger', 'warning', 'info', 'dark', 'primary', 'secondary'];
+              var $state = states[stateNum],
+                $name = full['full_name'],
+                $initials = $name.match(/\b\w/g) || [];
+              $initials = (($initials.shift() || '') + ($initials.pop() || '')).toUpperCase();
+              $output = '<span class="avatar-initial rounded-circle bg-label-' + $state + '">' + $initials + '</span>';
+            }
+            // Creates full output for row
+            var $row_output =
+              '<div class="d-flex justify-content-left align-items-center">' +
+              '<div class="avatar-wrapper">' +
+              '<div class="avatar avatar-sm me-3">' +
+              $output +
+              '</div>' +
+              '</div>' +
+              '<div class="d-flex flex-column">' +
+              '<span class="text-truncate fw-semibold">' +
+              $name +
+              '</span>' +
+              '<small class="text-muted">' +
+              $framework +
+              '</small>' +
+              '</div>' +
+              '</div>';
+            return $row_output;
+          }
+        },
+        {
+          targets: 2,
+          orderable: false
+        },
+        {
+          // Label
+          targets: -2,
+          responsivePriority: 3,
+          render: function (data, type, full, meta) {
+            var $progress = full['progress'] + '%',
+              $color;
+            switch (true) {
+              case full['progress'] < 25:
+                $color = 'bg-danger';
+                break;
+              case full['progress'] < 50:
+                $color = 'bg-warning';
+                break;
+              case full['progress'] < 75:
+                $color = 'bg-info';
+                break;
+              case full['progress'] <= 100:
+                $color = 'bg-success';
+                break;
+            }
+            return (
+              '<div class="d-flex flex-column"><small class="mb-1">' +
+              $progress +
+              '</small>' +
+              '<div class="progress w-100 me-3" style="height: 6px;">' +
+              '<div class="progress-bar ' +
+              $color +
+              '" style="width: ' +
+              $progress +
+              '" aria-valuenow="' +
+              $progress +
+              '" aria-valuemin="0" aria-valuemax="100"></div>' +
+              '</div>' +
+              '</div>'
+            );
+          }
+        },
+        {
+          targets: -1,
+          orderable: false
+        }
+      ],
+      order: [[1, 'desc']],
+      dom:
+        '<"d-flex justify-content-between align-items-center flex-column flex-sm-row mx-4 row"' +
+        '<"col-sm-4 col-12 d-flex align-items-center justify-content-sm-start justify-content-center"l>' +
+        '<"col-sm-8 col-12 d-flex align-items-center justify-content-sm-end justify-content-center"f>' +
+        '>t' +
+        '<"d-flex justify-content-between mx-4 row"' +
+        '<"col-sm-12 col-md-6"i>' +
+        '<"col-sm-12 col-md-6"p>' +
+        '>',
+      displayLength: 7,
+      lengthMenu: [7, 10, 25, 50, 75, 100],
+      language: {
+        sLengthMenu: 'Show _MENU_',
+        // search: '',
+        searchPlaceholder: 'Search Project'
+      },
+      // For responsive popup
+      responsive: {
+        details: {
+          display: $.fn.dataTable.Responsive.display.modal({
+            header: function (row) {
+              var data = row.data();
+              return 'Details of ' + data['full_name'];
+            }
+          }),
+          type: 'column',
+          renderer: function (api, rowIdx, columns) {
+            var data = $.map(columns, function (col, i) {
+              return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
+                ? '<tr data-dt-row="' +
+                    col.rowIndex +
+                    '" data-dt-column="' +
+                    col.columnIndex +
+                    '">' +
+                    '<td>' +
+                    col.title +
+                    ':' +
+                    '</td> ' +
+                    '<td>' +
+                    col.data +
+                    '</td>' +
+                    '</tr>'
+                : '';
+            }).join('');
+
+            return data ? $('<table class="table"/><tbody />').append(data) : false;
+          }
+        }
+      }
+    });
+  }
+
+  // Invoice datatable
+  // --------------------------------------------------------------------
+  if (dt_invoice_table.length) {
+    var dt_invoice = dt_invoice_table.DataTable({
+      ajax: assetsPath + 'json/invoice-list.json', // JSON file to add data
+      columns: [
+        // columns according to JSON
+        { data: '' },
+        { data: 'invoice_id' },
+        { data: 'invoice_status' },
+        { data: 'total' },
+        { data: 'issued_date' },
+        { data: 'action' }
+      ],
+      columnDefs: [
+        {
+          // For Responsive
+          className: 'control',
+          responsivePriority: 2,
+          targets: 0,
+          render: function (data, type, full, meta) {
+            return '';
+          }
+        },
+        {
+          // Invoice ID
+          targets: 1,
+          render: function (data, type, full, meta) {
+            var $invoice_id = full['invoice_id'];
+            // Creates full output for row
+            var $row_output = '<a href="app-invoice-preview.html"><span>#' + $invoice_id + '</span></a>';
+            return $row_output;
+          }
+        },
+        {
+          // Invoice status
+          targets: 2,
+          render: function (data, type, full, meta) {
+            var $invoice_status = full['invoice_status'],
+              $due_date = full['due_date'],
+              $balance = full['balance'];
+            var roleBadgeObj = {
+              Sent: '<span class="badge badge-center rounded-pill bg-label-secondary w-px-30 h-px-30"><i class="ti ti-circle-check ti-sm"></i></span>',
+              Draft:
+                '<span class="badge badge-center rounded-pill bg-label-primary w-px-30 h-px-30"><i class="ti ti-device-floppy ti-sm"></i></span>',
+              'Past Due':
+                '<span class="badge badge-center rounded-pill bg-label-danger w-px-30 h-px-30"><i class="ti ti-info-circle ti-sm"></i></span>',
+              'Partial Payment':
+                '<span class="badge badge-center rounded-pill bg-label-success w-px-30 h-px-30"><i class="ti ti-circle-half-2 ti-sm"></i></span>',
+              Paid: '<span class="badge badge-center rounded-pill bg-label-warning w-px-30 h-px-30"><i class="ti ti-chart-pie ti-sm"></i></span>',
+              Downloaded:
+                '<span class="badge badge-center rounded-pill bg-label-info w-px-30 h-px-30"><i class="ti ti-arrow-down-circle ti-sm"></i></span>'
+            };
+            return (
+              "<span data-bs-toggle='tooltip' data-bs-html='true' title='<span>" +
+              $invoice_status +
+              '<br> <strong>Balance:</strong> ' +
+              $balance +
+              '<br> <strong>Due Date:</strong> ' +
+              $due_date +
+              "</span>'>" +
+              roleBadgeObj[$invoice_status] +
+              '</span>'
+            );
+          }
+        },
+        {
+          // Total Invoice Amount
+          targets: 3,
+          render: function (data, type, full, meta) {
+            var $total = full['total'];
+            return '$' + $total;
+          }
+        },
+        {
+          // Actions
+          targets: -1,
+          title: 'Actions',
+          orderable: false,
+          render: function (data, type, full, meta) {
+            return (
+              '<div class="d-flex align-items-center">' +
+              '<a href="javascript:;" class="text-body" data-bs-toggle="tooltip" title="Send Mail"><i class="ti ti-mail me-2 ti-sm"></i></a>' +
+              '<a href="app-invoice-preview.html" class="text-body" data-bs-toggle="tooltip" title="Preview"><i class="ti ti-eye mx-2 ti-sm"></i></a>' +
+              '<a href="javascript:;" class="text-body" data-bs-toggle="tooltip" title="Download"><i class="ti ti-dots-vertical mx-1 ti-sm"></i></a>' +
+              '</div>'
+            );
+          }
+        }
+      ],
+      order: [[1, 'desc']],
+      dom:
+        '<"row mx-4"' +
+        '<"col-sm-6 col-12 d-flex align-items-center justify-content-center justify-content-sm-start mb-3 mb-md-0"l>' +
+        '<"col-sm-6 col-12 d-flex align-items-center justify-content-center justify-content-sm-end"B>' +
+        '>t' +
+        '<"row mx-4"' +
+        '<"col-md-12 col-lg-6 text-center text-lg-start pb-md-2 pb-lg-0"i>' +
+        '<"col-md-12 col-lg-6 d-flex justify-content-center justify-content-lg-end"p>' +
+        '>',
+      language: {
+        sLengthMenu: 'Show _MENU_',
+        search: '',
+        searchPlaceholder: 'Search Invoice'
+      },
+      // Buttons with Dropdown
+      buttons: [
+        {
+          extend: 'collection',
+          className: 'btn btn-label-secondary dropdown-toggle float-sm-end mb-3 mb-sm-0',
+          text: '<i class="ti ti-screen-share ti-xs me-2"></i>Export',
+          buttons: [
+            {
+              extend: 'print',
+              text: '<i class="ti ti-printer me-2" ></i>Print',
+              className: 'dropdown-item',
+              exportOptions: { columns: [1, 2, 3, 4] }
+            },
+            {
+              extend: 'csv',
+              text: '<i class="ti ti-file-text me-2" ></i>Csv',
+              className: 'dropdown-item',
+              exportOptions: { columns: [1, 2, 3, 4] }
+            },
+            {
+              extend: 'excel',
+              text: '<i class="ti ti-file-spreadsheet me-2"></i>Excel',
+              className: 'dropdown-item',
+              exportOptions: { columns: [1, 2, 3, 4] }
+            },
+            {
+              extend: 'pdf',
+              text: '<i class="ti ti-file-description me-2"></i>Pdf',
+              className: 'dropdown-item',
+              exportOptions: { columns: [1, 2, 3, 4] }
+            },
+            {
+              extend: 'copy',
+              text: '<i class="ti ti-copy me-2" ></i>Copy',
+              className: 'dropdown-item',
+              exportOptions: { columns: [1, 2, 3, 4] }
+            }
+          ]
+        }
+      ],
+      // For responsive popup
+      responsive: {
+        details: {
+          display: $.fn.dataTable.Responsive.display.modal({
+            header: function (row) {
+              var data = row.data();
+              return 'Details of ' + data['full_name'];
+            }
+          }),
+          type: 'column',
+          renderer: function (api, rowIdx, columns) {
+            var data = $.map(columns, function (col, i) {
+              return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
+                ? '<tr data-dt-row="' +
+                    col.rowIndex +
+                    '" data-dt-column="' +
+                    col.columnIndex +
+                    '">' +
+                    '<td>' +
+                    col.title +
+                    ':' +
+                    '</td> ' +
+                    '<td>' +
+                    col.data +
+                    '</td>' +
+                    '</tr>'
+                : '';
+            }).join('');
+
+            return data ? $('<table class="table"/><tbody />').append(data) : false;
+          }
+        }
+      }
+    });
+  }
+  // On each datatable draw, initialize tooltip
+  dt_invoice_table.on('draw.dt', function () {
+    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+      return new bootstrap.Tooltip(tooltipTriggerEl, {
+        boundary: document.body
+      });
+    });
+  });
+
+  // Filter form control to default size
+  // ? setTimeout used for multilingual table initialization
+  setTimeout(() => {
+    $('.dataTables_filter .form-control').removeClass('form-control-sm');
+    $('.dataTables_length .form-select').removeClass('form-select-sm');
+  }, 300);
+});

httpdocs/themes/vuexy/js/app-user-view-billing.js

@@ -0,0 +1,57 @@
+/**
+ * App User View - Billing
+ */
+
+'use strict';
+
+(function () {
+  // Cancel Subscription alert
+  const cancelSubscription = document.querySelector('.cancel-subscription');
+
+  // Alert With Functional Confirm Button
+  if (cancelSubscription) {
+    cancelSubscription.onclick = function () {
+      Swal.fire({
+        text: 'Are you sure you would like to cancel your subscription?',
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonText: 'Yes',
+        customClass: {
+          confirmButton: 'btn btn-primary me-2',
+          cancelButton: 'btn btn-label-secondary'
+        },
+        buttonsStyling: false
+      }).then(function (result) {
+        if (result.value) {
+          Swal.fire({
+            icon: 'success',
+            title: 'Unsubscribed!',
+            text: 'Your subscription cancelled successfully.',
+            customClass: {
+              confirmButton: 'btn btn-success'
+            }
+          });
+        } else if (result.dismiss === Swal.DismissReason.cancel) {
+          Swal.fire({
+            title: 'Cancelled',
+            text: 'Unsubscription Cancelled!!',
+            icon: 'error',
+            customClass: {
+              confirmButton: 'btn btn-success'
+            }
+          });
+        }
+      });
+    };
+  }
+
+  // On edit address click, update text of add address modal
+  const addressEdit = document.querySelector('.edit-address'),
+    addressTitle = document.querySelector('.address-title'),
+    addressSubTitle = document.querySelector('.address-subtitle');
+
+  addressEdit.onclick = function () {
+    addressTitle.innerHTML = 'Edit Address'; // reset text
+    addressSubTitle.innerHTML = 'Edit your current address';
+  };
+})();

httpdocs/themes/vuexy/js/app-user-view-security.js

@@ -0,0 +1,63 @@
+/**
+ * App User View - Security
+ */
+
+'use strict';
+
+(function () {
+  const formChangePass = document.querySelector('#formChangePassword');
+
+  // Form validation for Change password
+  if (formChangePass) {
+    const fv = FormValidation.formValidation(formChangePass, {
+      fields: {
+        newPassword: {
+          validators: {
+            notEmpty: {
+              message: 'Please enter new password'
+            },
+            stringLength: {
+              min: 8,
+              message: 'Password must be more than 8 characters'
+            }
+          }
+        },
+        confirmPassword: {
+          validators: {
+            notEmpty: {
+              message: 'Please confirm new password'
+            },
+            identical: {
+              compare: function () {
+                return formChangePass.querySelector('[name="newPassword"]').value;
+              },
+              message: 'The password and its confirm are not the same'
+            },
+            stringLength: {
+              min: 8,
+              message: 'Password must be more than 8 characters'
+            }
+          }
+        }
+      },
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          eleValidClass: '',
+          rowSelector: '.form-password-toggle'
+        }),
+        submitButton: new FormValidation.plugins.SubmitButton(),
+        // Submit the form when all fields are valid
+        // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+        autoFocus: new FormValidation.plugins.AutoFocus()
+      },
+      init: instance => {
+        instance.on('plugins.message.placed', function (e) {
+          if (e.element.parentElement.classList.contains('input-group')) {
+            e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
+          }
+        });
+      }
+    });
+  }
+})();

httpdocs/themes/vuexy/js/app-user-view.js

@@ -0,0 +1,89 @@
+/**
+ * App User View - Suspend User Script
+ */
+'use strict';
+
+(function () {
+  const suspendUser = document.querySelector('.suspend-user');
+
+  // Suspend User javascript
+  if (suspendUser) {
+    suspendUser.onclick = function () {
+      Swal.fire({
+        title: 'Are you sure?',
+        text: "You won't be able to revert user!",
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonText: 'Yes, Suspend user!',
+        customClass: {
+          confirmButton: 'btn btn-primary me-2',
+          cancelButton: 'btn btn-label-secondary'
+        },
+        buttonsStyling: false
+      }).then(function (result) {
+        if (result.value) {
+          Swal.fire({
+            icon: 'success',
+            title: 'Suspended!',
+            text: 'User has been suspended.',
+            customClass: {
+              confirmButton: 'btn btn-success'
+            }
+          });
+        } else if (result.dismiss === Swal.DismissReason.cancel) {
+          Swal.fire({
+            title: 'Cancelled',
+            text: 'Cancelled Suspension :)',
+            icon: 'error',
+            customClass: {
+              confirmButton: 'btn btn-success'
+            }
+          });
+        }
+      });
+    };
+  }
+
+  //? Billing page have multiple buttons
+  // Cancel Subscription alert
+  const cancelSubscription = document.querySelectorAll('.cancel-subscription');
+
+  // Alert With Functional Confirm Button
+  if (cancelSubscription) {
+    cancelSubscription.forEach(btnCancle => {
+      btnCancle.onclick = function () {
+        Swal.fire({
+          text: 'Are you sure you would like to cancel your subscription?',
+          icon: 'warning',
+          showCancelButton: true,
+          confirmButtonText: 'Yes',
+          customClass: {
+            confirmButton: 'btn btn-primary me-2',
+            cancelButton: 'btn btn-label-secondary'
+          },
+          buttonsStyling: false
+        }).then(function (result) {
+          if (result.value) {
+            Swal.fire({
+              icon: 'success',
+              title: 'Unsubscribed!',
+              text: 'Your subscription cancelled successfully.',
+              customClass: {
+                confirmButton: 'btn btn-success'
+              }
+            });
+          } else if (result.dismiss === Swal.DismissReason.cancel) {
+            Swal.fire({
+              title: 'Cancelled',
+              text: 'Unsubscription Cancelled!!',
+              icon: 'error',
+              customClass: {
+                confirmButton: 'btn btn-success'
+              }
+            });
+          }
+        });
+      };
+    });
+  }
+})();

httpdocs/themes/vuexy/js/cards-actions.js

@@ -0,0 +1,114 @@
+/**
+ * Cards Actions
+ */
+
+'use strict';
+
+(function () {
+  const collapseElementList = [].slice.call(document.querySelectorAll('.card-collapsible'));
+  const expandElementList = [].slice.call(document.querySelectorAll('.card-expand'));
+  const closeElementList = [].slice.call(document.querySelectorAll('.card-close'));
+
+  let cardDnD = document.getElementById('sortable-4');
+
+  // Collapsible card
+  // --------------------------------------------------------------------
+  if (collapseElementList) {
+    collapseElementList.map(function (collapseElement) {
+      collapseElement.addEventListener('click', event => {
+        event.preventDefault();
+        // Collapse the element
+        new bootstrap.Collapse(collapseElement.closest('.card').querySelector('.collapse'));
+        // Toggle collapsed class in `.card-header` element
+        collapseElement.closest('.card-header').classList.toggle('collapsed');
+        // Toggle class ti-chevron-down & ti-chevron-right
+        Helpers._toggleClass(collapseElement.firstElementChild, 'ti-chevron-down', 'ti-chevron-right');
+      });
+    });
+  }
+
+  // Card Toggle fullscreen
+  // --------------------------------------------------------------------
+  if (expandElementList) {
+    expandElementList.map(function (expandElement) {
+      expandElement.addEventListener('click', event => {
+        event.preventDefault();
+        // Toggle class ti-arrows-maximize & ti-arrows-minimize
+        Helpers._toggleClass(expandElement.firstElementChild, 'ti-arrows-maximize', 'ti-arrows-minimize');
+
+        expandElement.closest('.card').classList.toggle('card-fullscreen');
+      });
+    });
+  }
+
+  // Toggle fullscreen on esc key
+  document.addEventListener('keyup', event => {
+    event.preventDefault();
+    //Esc button
+    if (event.key === 'Escape') {
+      const cardFullscreen = document.querySelector('.card-fullscreen');
+      // Toggle class ti-arrows-maximize & ti-arrows-minimize
+
+      if (cardFullscreen) {
+        Helpers._toggleClass(cardFullscreen.querySelector('.card-expand').firstChild, 'ti-arrows-maximize', 'ti-arrows-minimize');
+        cardFullscreen.classList.toggle('card-fullscreen');
+      }
+    }
+  });
+
+  // Card close
+  // --------------------------------------------------------------------
+  if (closeElementList) {
+    closeElementList.map(function (closeElement) {
+      closeElement.addEventListener('click', event => {
+        event.preventDefault();
+        closeElement.closest('.card').classList.add('d-none');
+      });
+    });
+  }
+
+  // Sortable.js (Drag & Drop cards)
+  // --------------------------------------------------------------------
+  if (typeof cardDnD !== undefined && cardDnD !== null) {
+    Sortable.create(cardDnD, {
+      animation: 500,
+      handle: '.card'
+    });
+  }
+})();
+
+// Card reload (jquery)
+// --------------------------------------------------------------------
+$(function () {
+  const cardReload = $('.card-reload');
+  if (cardReload.length) {
+    cardReload.on('click', function (e) {
+      e.preventDefault();
+      var $this = $(this);
+      $this.closest('.card').block({
+        message:
+          '<div class="sk-fold sk-primary"><div class="sk-fold-cube"></div><div class="sk-fold-cube"></div><div class="sk-fold-cube"></div><div class="sk-fold-cube"></div></div><h5>LOADING...</h5>',
+
+        css: {
+          backgroundColor: 'transparent',
+          border: '0'
+        },
+        overlayCSS: {
+          backgroundColor: $('html').hasClass('dark-style') ? '#000' : '#fff',
+          opacity: 0.55
+        }
+      });
+      setTimeout(function () {
+        $this.closest('.card').unblock();
+        if ($this.closest('.card').find('.card-alert').length) {
+          $this
+            .closest('.card')
+            .find('.card-alert')
+            .html(
+              '<div class="alert alert-danger alert-dismissible fade show" role="alert"><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button><strong>Holy grail!</strong> Your success/error message here.</div>'
+            );
+        }
+      }, 2500);
+    });
+  }
+});

httpdocs/themes/vuexy/js/cards-advance.js

@@ -0,0 +1,166 @@
+/**
+ * Advanced Cards
+ */
+
+'use strict';
+
+(function () {
+  let cardColor, headingColor, legendColor, labelColor;
+  if (isDarkStyle) {
+    cardColor = config.colors_dark.cardColor;
+    labelColor = config.colors_dark.textMuted;
+    legendColor = config.colors_dark.bodyColor;
+    headingColor = config.colors_dark.headingColor;
+  } else {
+    cardColor = config.colors.cardColor;
+    labelColor = config.colors.textMuted;
+    legendColor = config.colors.bodyColor;
+    headingColor = config.colors.headingColor;
+  }
+
+  // Radial bar chart functions
+  function radialBarChart(color, value) {
+    const radialBarChartOpt = {
+      chart: {
+        height: 53,
+        width: 43,
+        type: 'radialBar'
+      },
+      plotOptions: {
+        radialBar: {
+          hollow: {
+            size: '33%'
+          },
+          dataLabels: {
+            show: false
+          },
+          track: {
+            background: config.colors_label.secondary
+          }
+        }
+      },
+      stroke: {
+        lineCap: 'round'
+      },
+      colors: [color],
+      grid: {
+        padding: {
+          top: -15,
+          bottom: -15,
+          left: -5,
+          right: -15
+        }
+      },
+      series: [value],
+      labels: ['Progress']
+    };
+    return radialBarChartOpt;
+  }
+
+  // Progress Chart
+  // --------------------------------------------------------------------
+  // All progress chart
+  const chartProgressList = document.querySelectorAll('.chart-progress');
+  if (chartProgressList) {
+    chartProgressList.forEach(function (chartProgressEl) {
+      const color = config.colors[chartProgressEl.dataset.color],
+        series = chartProgressEl.dataset.series;
+      const optionsBundle = radialBarChart(color, series);
+      const chart = new ApexCharts(chartProgressEl, optionsBundle);
+      chart.render();
+    });
+  }
+
+  // Earning Reports Bar Chart
+  // --------------------------------------------------------------------
+  const reportBarChartEl = document.querySelector('#reportBarChart'),
+    reportBarChartConfig = {
+      chart: {
+        height: 200,
+        type: 'bar',
+        toolbar: {
+          show: false
+        }
+      },
+      plotOptions: {
+        bar: {
+          barHeight: '60%',
+          columnWidth: '60%',
+          startingShape: 'rounded',
+          endingShape: 'rounded',
+          borderRadius: 4,
+          distributed: true
+        }
+      },
+      grid: {
+        show: false,
+        padding: {
+          top: -20,
+          bottom: 0,
+          left: -10,
+          right: -10
+        }
+      },
+      colors: [
+        config.colors_label.primary,
+        config.colors_label.primary,
+        config.colors_label.primary,
+        config.colors_label.primary,
+        config.colors.primary,
+        config.colors_label.primary,
+        config.colors_label.primary
+      ],
+      dataLabels: {
+        enabled: false
+      },
+      series: [
+        {
+          data: [40, 95, 60, 45, 90, 50, 75]
+        }
+      ],
+      legend: {
+        show: false
+      },
+      xaxis: {
+        categories: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+        axisBorder: {
+          show: false
+        },
+        axisTicks: {
+          show: false
+        },
+        labels: {
+          style: {
+            colors: labelColor,
+            fontSize: '13px'
+          }
+        }
+      },
+      yaxis: {
+        labels: {
+          show: false
+        }
+      }
+    };
+  if (typeof reportBarChartEl !== undefined && reportBarChartEl !== null) {
+    const barChart = new ApexCharts(reportBarChartEl, reportBarChartConfig);
+    barChart.render();
+  }
+
+  // swiper loop and autoplay
+  // --------------------------------------------------------------------
+  const swiperWithPagination = document.querySelector('#swiper-with-pagination-cards');
+  if (swiperWithPagination) {
+    new Swiper(swiperWithPagination, {
+      loop: true,
+      autoplay: {
+        delay: 2500,
+        disableOnInteraction: false
+      },
+      pagination: {
+        clickable: true,
+        el: '.swiper-pagination'
+      }
+    });
+  }
+})();

httpdocs/themes/vuexy/js/config.js

@@ -0,0 +1,113 @@
+/**
+ * Config
+ * -------------------------------------------------------------------------------------
+ * ! IMPORTANT: Make sure you clear the browser local storage In order to see the config changes in the template.
+ * ! To clear local storage: (https://www.leadshook.com/help/how-to-clear-local-storage-in-google-chrome-browser/).
+ */
+
+'use strict';
+
+// JS global variables
+let config = {
+  colors: {
+    primary: '#7367f0',
+    secondary: '#a8aaae',
+    success: '#28c76f',
+    info: '#00cfe8',
+    warning: '#ff9f43',
+    danger: '#ea5455',
+    dark: '#4b4b4b',
+    black: '#000',
+    white: '#fff',
+    cardColor: '#fff',
+    bodyBg: '#f8f7fa',
+    bodyColor: '#6f6b7d',
+    headingColor: '#5d596c',
+    textMuted: '#a5a3ae',
+    borderColor: '#dbdade'
+  },
+  colors_label: {
+    primary: '#7367f029',
+    secondary: '#a8aaae29',
+    success: '#28c76f29',
+    info: '#00cfe829',
+    warning: '#ff9f4329',
+    danger: '#ea545529',
+    dark: '#4b4b4b29'
+  },
+  colors_dark: {
+    cardColor: '#2f3349',
+    bodyBg: '#25293c',
+    bodyColor: '#b6bee3',
+    headingColor: '#cfd3ec',
+    textMuted: '#7983bb',
+    borderColor: '#434968'
+  },
+  enableMenuLocalStorage: true // Enable menu state with local storage support
+};
+
+let assetsPath = document.documentElement.getAttribute('data-assets-path'),
+  templateName = document.documentElement.getAttribute('data-template'),
+  rtlSupport = true; // set true for rtl support (rtl + ltr), false for ltr only.
+
+/**
+ * TemplateCustomizer
+ * ! You must use(include) template-customizer.js to use TemplateCustomizer settings
+ * -----------------------------------------------------------------------------------------------
+ */
+
+// To use more themes, just push it to THEMES object.
+
+/* TemplateCustomizer.THEMES.push({
+  name: 'theme-raspberry',
+  title: 'Raspberry'
+}); */
+
+// To add more languages, just push it to LANGUAGES object.
+/*
+TemplateCustomizer.LANGUAGES.fr = { ... };
+*/
+
+/**
+ * TemplateCustomizer settings
+ * -------------------------------------------------------------------------------------
+ * cssPath: Core CSS file path
+ * themesPath: Theme CSS file path
+ * displayCustomizer: true(Show customizer), false(Hide customizer)
+ * lang: To set default language, Add more langues and set default. Fallback language is 'en'
+ * controls: [ 'rtl','style','layoutType','showDropdownOnHover','layoutNavbarFixed','layoutFooterFixed','themes'] | Show/Hide customizer controls
+ * defaultTheme: 0(Default), 1(Semi Dark), 2(Bordered)
+ * defaultStyle: 'light', 'dark' (Mode)
+ * defaultTextDir: 'ltr', 'rtl' (rtlSupport must be true for rtl mode)
+ * defaultLayoutType: 'static', 'fixed'
+ * defaultMenuCollapsed: true, false
+ * defaultNavbarFixed: true, false
+ * defaultFooterFixed: true, false
+ * defaultShowDropdownOnHover : true, false (for horizontal layout only)
+ */
+
+if (typeof TemplateCustomizer !== 'undefined') {
+  window.templateCustomizer = new TemplateCustomizer({
+    cssPath: assetsPath + 'vendor/css' + (rtlSupport ? '/rtl' : '') + '/',
+    themesPath: assetsPath + 'vendor/css' + (rtlSupport ? '/rtl' : '') + '/',
+    displayCustomizer: true,
+    // lang: 'fr',
+    // defaultTheme: 2,
+    // defaultStyle: 'light',
+    // defaultTextDir: 'ltr',
+    // defaultLayoutType: 'fixed',
+    // defaultMenuCollapsed: true,
+    // defaultNavbarFixed: true,
+    // defaultFooterFixed: false
+    defaultShowDropdownOnHover: true
+    // controls: [
+    //   'rtl',
+    //   'style',
+    //   'layoutType',
+    //   'showDropdownOnHover',
+    //   'layoutNavbarFixed',
+    //   'layoutFooterFixed',
+    //   'themes'
+    // ],
+  });
+}

httpdocs/themes/vuexy/js/dashboards-analytics.js

@@ -0,0 +1,662 @@
+/**
+ * Dashboard Analytics
+ */
+
+'use strict';
+
+(function () {
+  let cardColor, headingColor, labelColor, shadeColor, grayColor;
+  if (isDarkStyle) {
+    cardColor = config.colors_dark.cardColor;
+    labelColor = config.colors_dark.textMuted;
+    headingColor = config.colors_dark.headingColor;
+    shadeColor = 'dark';
+    grayColor = '#5E6692'; // gray color is for stacked bar chart
+  } else {
+    cardColor = config.colors.cardColor;
+    labelColor = config.colors.textMuted;
+    headingColor = config.colors.headingColor;
+    shadeColor = '';
+    grayColor = '#817D8D';
+  }
+
+  // swiper loop and autoplay
+  // --------------------------------------------------------------------
+  const swiperWithPagination = document.querySelector('#swiper-with-pagination-cards');
+  if (swiperWithPagination) {
+    new Swiper(swiperWithPagination, {
+      loop: true,
+      autoplay: {
+        delay: 2500,
+        disableOnInteraction: false
+      },
+      pagination: {
+        clickable: true,
+        el: '.swiper-pagination'
+      }
+    });
+  }
+
+  // Revenue Generated Area Chart
+  // --------------------------------------------------------------------
+  const revenueGeneratedEl = document.querySelector('#revenueGenerated'),
+    revenueGeneratedConfig = {
+      chart: {
+        height: 130,
+        type: 'area',
+        parentHeightOffset: 0,
+        toolbar: {
+          show: false
+        },
+        sparkline: {
+          enabled: true
+        }
+      },
+      markers: {
+        colors: 'transparent',
+        strokeColors: 'transparent'
+      },
+      grid: {
+        show: false
+      },
+      colors: [config.colors.success],
+      fill: {
+        type: 'gradient',
+        gradient: {
+          shade: shadeColor,
+          shadeIntensity: 0.8,
+          opacityFrom: 0.6,
+          opacityTo: 0.1
+        }
+      },
+      dataLabels: {
+        enabled: false
+      },
+      stroke: {
+        width: 2,
+        curve: 'smooth'
+      },
+      series: [
+        {
+          data: [300, 350, 330, 380, 340, 400, 380]
+        }
+      ],
+      xaxis: {
+        show: true,
+        lines: {
+          show: false
+        },
+        labels: {
+          show: false
+        },
+        stroke: {
+          width: 0
+        },
+        axisBorder: {
+          show: false
+        }
+      },
+      yaxis: {
+        stroke: {
+          width: 0
+        },
+        show: false
+      },
+      tooltip: {
+        enabled: false
+      }
+    };
+  if (typeof revenueGeneratedEl !== undefined && revenueGeneratedEl !== null) {
+    const revenueGenerated = new ApexCharts(revenueGeneratedEl, revenueGeneratedConfig);
+    revenueGenerated.render();
+  }
+
+  // Earning Reports Bar Chart
+  // --------------------------------------------------------------------
+  const weeklyEarningReportsEl = document.querySelector('#weeklyEarningReports'),
+    weeklyEarningReportsConfig = {
+      chart: {
+        height: 202,
+        parentHeightOffset: 0,
+        type: 'bar',
+        toolbar: {
+          show: false
+        }
+      },
+      plotOptions: {
+        bar: {
+          barHeight: '60%',
+          columnWidth: '38%',
+          startingShape: 'rounded',
+          endingShape: 'rounded',
+          borderRadius: 4,
+          distributed: true
+        }
+      },
+      grid: {
+        show: false,
+        padding: {
+          top: -30,
+          bottom: 0,
+          left: -10,
+          right: -10
+        }
+      },
+      colors: [
+        config.colors_label.primary,
+        config.colors_label.primary,
+        config.colors_label.primary,
+        config.colors_label.primary,
+        config.colors.primary,
+        config.colors_label.primary,
+        config.colors_label.primary
+      ],
+      dataLabels: {
+        enabled: false
+      },
+      series: [
+        {
+          data: [40, 65, 50, 45, 90, 55, 70]
+        }
+      ],
+      legend: {
+        show: false
+      },
+      xaxis: {
+        categories: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+        axisBorder: {
+          show: false
+        },
+        axisTicks: {
+          show: false
+        },
+        labels: {
+          style: {
+            colors: labelColor,
+            fontSize: '13px',
+            fontFamily: 'Public Sans'
+          }
+        }
+      },
+      yaxis: {
+        labels: {
+          show: false
+        }
+      },
+      tooltip: {
+        enabled: false
+      },
+      responsive: [
+        {
+          breakpoint: 1025,
+          options: {
+            chart: {
+              height: 199
+            }
+          }
+        }
+      ]
+    };
+  if (typeof weeklyEarningReportsEl !== undefined && weeklyEarningReportsEl !== null) {
+    const weeklyEarningReports = new ApexCharts(weeklyEarningReportsEl, weeklyEarningReportsConfig);
+    weeklyEarningReports.render();
+  }
+
+  // Support Tracker - Radial Bar Chart
+  // --------------------------------------------------------------------
+  const supportTrackerEl = document.querySelector('#supportTracker'),
+    supportTrackerOptions = {
+      series: [85],
+      labels: ['Completed Task'],
+      chart: {
+        height: 360,
+        type: 'radialBar'
+      },
+      plotOptions: {
+        radialBar: {
+          offsetY: 10,
+          startAngle: -140,
+          endAngle: 130,
+          hollow: {
+            size: '65%'
+          },
+          track: {
+            background: cardColor,
+            strokeWidth: '100%'
+          },
+          dataLabels: {
+            name: {
+              offsetY: -20,
+              color: labelColor,
+              fontSize: '13px',
+              fontWeight: '400',
+              fontFamily: 'Public Sans'
+            },
+            value: {
+              offsetY: 10,
+              color: headingColor,
+              fontSize: '38px',
+              fontWeight: '600',
+              fontFamily: 'Public Sans'
+            }
+          }
+        }
+      },
+      colors: [config.colors.primary],
+      fill: {
+        type: 'gradient',
+        gradient: {
+          shade: 'dark',
+          shadeIntensity: 0.5,
+          gradientToColors: [config.colors.primary],
+          inverseColors: true,
+          opacityFrom: 1,
+          opacityTo: 0.6,
+          stops: [30, 70, 100]
+        }
+      },
+      stroke: {
+        dashArray: 10
+      },
+      grid: {
+        padding: {
+          top: -20,
+          bottom: 5
+        }
+      },
+      states: {
+        hover: {
+          filter: {
+            type: 'none'
+          }
+        },
+        active: {
+          filter: {
+            type: 'none'
+          }
+        }
+      },
+      responsive: [
+        {
+          breakpoint: 1025,
+          options: {
+            chart: {
+              height: 330
+            }
+          }
+        },
+        {
+          breakpoint: 769,
+          options: {
+            chart: {
+              height: 280
+            }
+          }
+        }
+      ]
+    };
+  if (typeof supportTrackerEl !== undefined && supportTrackerEl !== null) {
+    const supportTracker = new ApexCharts(supportTrackerEl, supportTrackerOptions);
+    supportTracker.render();
+  }
+
+  // Total Earning Chart - Bar Chart
+  // --------------------------------------------------------------------
+  const totalEarningChartEl = document.querySelector('#totalEarningChart'),
+    totalEarningChartOptions = {
+      series: [
+        {
+          name: 'Earning',
+          data: [15, 10, 20, 8, 12, 18, 12, 5]
+        },
+        {
+          name: 'Expense',
+          data: [-7, -10, -7, -12, -6, -9, -5, -8]
+        }
+      ],
+      chart: {
+        height: 230,
+        parentHeightOffset: 0,
+        stacked: true,
+        type: 'bar',
+        toolbar: { show: false }
+      },
+      tooltip: {
+        enabled: false
+      },
+      legend: {
+        show: false
+      },
+      plotOptions: {
+        bar: {
+          horizontal: false,
+          columnWidth: '18%',
+          borderRadius: 5,
+          startingShape: 'rounded',
+          endingShape: 'rounded'
+        }
+      },
+      colors: [config.colors.primary, grayColor],
+      dataLabels: {
+        enabled: false
+      },
+      grid: {
+        show: false,
+        padding: {
+          top: -40,
+          bottom: -20,
+          left: -10,
+          right: -2
+        }
+      },
+      xaxis: {
+        labels: {
+          show: false
+        },
+        axisTicks: {
+          show: false
+        },
+        axisBorder: {
+          show: false
+        }
+      },
+      yaxis: {
+        labels: {
+          show: false
+        }
+      },
+      responsive: [
+        {
+          breakpoint: 1468,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '22%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 1197,
+          options: {
+            chart: {
+              height: 228
+            },
+            plotOptions: {
+              bar: {
+                borderRadius: 8,
+                columnWidth: '26%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 783,
+          options: {
+            chart: {
+              height: 232
+            },
+            plotOptions: {
+              bar: {
+                borderRadius: 6,
+                columnWidth: '28%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 589,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '16%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 520,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 6,
+                columnWidth: '18%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 426,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 5,
+                columnWidth: '20%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 381,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '24%'
+              }
+            }
+          }
+        }
+      ],
+      states: {
+        hover: {
+          filter: {
+            type: 'none'
+          }
+        },
+        active: {
+          filter: {
+            type: 'none'
+          }
+        }
+      }
+    };
+  if (typeof totalEarningChartEl !== undefined && totalEarningChartEl !== null) {
+    const totalEarningChart = new ApexCharts(totalEarningChartEl, totalEarningChartOptions);
+    totalEarningChart.render();
+  }
+
+  //  For Datatable
+  // --------------------------------------------------------------------
+  var dt_projects_table = $('.datatables-projects');
+
+  if (dt_projects_table.length) {
+    var dt_project = dt_projects_table.DataTable({
+      ajax: assetsPath + 'json/user-profile.json',
+      columns: [
+        { data: '' },
+        { data: 'id' },
+        { data: 'project_name' },
+        { data: 'project_leader' },
+        { data: '' },
+        { data: 'status' },
+        { data: '' }
+      ],
+      columnDefs: [
+        {
+          // For Responsive
+          className: 'control',
+          searchable: false,
+          orderable: false,
+          responsivePriority: 2,
+          targets: 0,
+          render: function (data, type, full, meta) {
+            return '';
+          }
+        },
+        {
+          // For Checkboxes
+          targets: 1,
+          orderable: false,
+          searchable: false,
+          responsivePriority: 3,
+          checkboxes: true,
+          render: function () {
+            return '<input type="checkbox" class="dt-checkboxes form-check-input">';
+          },
+          checkboxes: {
+            selectAllRender: '<input type="checkbox" class="form-check-input">'
+          }
+        },
+        {
+          // Avatar image/badge, Name and post
+          targets: 2,
+          responsivePriority: 4,
+          render: function (data, type, full, meta) {
+            var $user_img = full['project_img'],
+              $name = full['project_name'],
+              $date = full['date'];
+            if ($user_img) {
+              // For Avatar image
+              var $output =
+                '<img src="' + assetsPath + 'img/icons/brands/' + $user_img + '" alt="Avatar" class="rounded-circle">';
+            } else {
+              // For Avatar badge
+              var stateNum = Math.floor(Math.random() * 6);
+              var states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
+              var $state = states[stateNum],
+                $name = full['project_name'],
+                $initials = $name.match(/\b\w/g) || [];
+              $initials = (($initials.shift() || '') + ($initials.pop() || '')).toUpperCase();
+              $output = '<span class="avatar-initial rounded-circle bg-label-' + $state + '">' + $initials + '</span>';
+            }
+            // Creates full output for row
+            var $row_output =
+              '<div class="d-flex justify-content-left align-items-center">' +
+              '<div class="avatar-wrapper">' +
+              '<div class="avatar me-2">' +
+              $output +
+              '</div>' +
+              '</div>' +
+              '<div class="d-flex flex-column">' +
+              '<span class="text-truncate fw-semibold">' +
+              $name +
+              '</span>' +
+              '<small class="text-truncate text-muted">' +
+              $date +
+              '</small>' +
+              '</div>' +
+              '</div>';
+            return $row_output;
+          }
+        },
+        {
+          // Teams
+          targets: 4,
+          orderable: false,
+          searchable: false,
+          render: function (data, type, full, meta) {
+            var $team = full['team'],
+              $output;
+            $output = '<div class="d-flex align-items-center avatar-group">';
+            for (var i = 0; i < $team.length; i++) {
+              $output +=
+                '<div class="avatar avatar-sm">' +
+                '<img src="' +
+                assetsPath +
+                'img/avatars/' +
+                $team[i] +
+                '" alt="Avatar" class="rounded-circle pull-up">' +
+                '</div>';
+            }
+            $output += '</div>';
+            return $output;
+          }
+        },
+        {
+          // Label
+          targets: -2,
+          render: function (data, type, full, meta) {
+            var $status_number = full['status'];
+            return (
+              '<div class="d-flex align-items-center">' +
+              '<div class="progress w-100 me-3" style="height: 6px;">' +
+              '<div class="progress-bar" style="width: ' +
+              $status_number +
+              '" aria-valuenow="' +
+              $status_number +
+              '" aria-valuemin="0" aria-valuemax="100"></div>' +
+              '</div>' +
+              '<span>' +
+              $status_number +
+              '</span></div>'
+            );
+          }
+        },
+        {
+          // Actions
+          targets: -1,
+          searchable: false,
+          title: 'Actions',
+          orderable: false,
+          render: function (data, type, full, meta) {
+            return (
+              '<div class="d-inline-block">' +
+              '<a href="javascript:;" class="btn btn-sm btn-icon dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="ti ti-dots-vertical"></i></a>' +
+              '<div class="dropdown-menu dropdown-menu-end m-0">' +
+              '<a href="javascript:;" class="dropdown-item">Details</a>' +
+              '<a href="javascript:;" class="dropdown-item">Archive</a>' +
+              '<div class="dropdown-divider"></div>' +
+              '<a href="javascript:;" class="dropdown-item text-danger delete-record">Delete</a>' +
+              '</div>' +
+              '</div>'
+            );
+          }
+        }
+      ],
+      order: [[2, 'desc']],
+      dom: '<"card-header pb-0 pt-sm-0"<"head-label text-center"><"d-flex justify-content-center justify-content-md-end"f>>t<"row mx-2"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
+      displayLength: 5,
+      lengthMenu: [5, 10, 25, 50, 75, 100],
+      responsive: {
+        details: {
+          display: $.fn.dataTable.Responsive.display.modal({
+            header: function (row) {
+              var data = row.data();
+              return 'Details of "' + data['project_name'] + '" Project';
+            }
+          }),
+          type: 'column',
+          renderer: function (api, rowIdx, columns) {
+            var data = $.map(columns, function (col, i) {
+              return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
+                ? '<tr data-dt-row="' +
+                    col.rowIndex +
+                    '" data-dt-column="' +
+                    col.columnIndex +
+                    '">' +
+                    '<td>' +
+                    col.title +
+                    ':' +
+                    '</td> ' +
+                    '<td>' +
+                    col.data +
+                    '</td>' +
+                    '</tr>'
+                : '';
+            }).join('');
+
+            return data ? $('<table class="table"/><tbody />').append(data) : false;
+          }
+        }
+      }
+    });
+    $('div.head-label').html('<h5 class="card-title mb-0">Projects</h5>');
+  }
+
+  // Filter form control to default size
+  // ? setTimeout used for multilingual table initialization
+  setTimeout(() => {
+    $('.dataTables_filter .form-control').removeClass('form-control-sm');
+    $('.dataTables_length .form-select').removeClass('form-select-sm');
+  }, 300);
+})();

httpdocs/themes/vuexy/js/dashboards-crm.js

@@ -0,0 +1,859 @@
+/**
+ * Dashboard CRM
+ */
+
+'use strict';
+(function () {
+  let cardColor, labelColor, shadeColor, legendColor, borderColor;
+  if (isDarkStyle) {
+    cardColor = config.colors_dark.cardColor;
+    labelColor = config.colors_dark.textMuted;
+    legendColor = config.colors_dark.bodyColor;
+    borderColor = config.colors_dark.borderColor;
+    shadeColor = 'dark';
+  } else {
+    cardColor = config.colors.cardColor;
+    labelColor = config.colors.textMuted;
+    legendColor = config.colors.bodyColor;
+    borderColor = config.colors.borderColor;
+    shadeColor = '';
+  }
+
+  // Sales last year Area Chart
+  // --------------------------------------------------------------------
+  const salesLastYearEl = document.querySelector('#salesLastYear'),
+    salesLastYearConfig = {
+      chart: {
+        height: 78,
+        type: 'area',
+        parentHeightOffset: 0,
+        toolbar: {
+          show: false
+        },
+        sparkline: {
+          enabled: true
+        }
+      },
+      markers: {
+        colors: 'transparent',
+        strokeColors: 'transparent'
+      },
+      grid: {
+        show: false
+      },
+      colors: [config.colors.success],
+      fill: {
+        type: 'gradient',
+        gradient: {
+          shade: shadeColor,
+          shadeIntensity: 0.8,
+          opacityFrom: 0.6,
+          opacityTo: 0.25
+        }
+      },
+      dataLabels: {
+        enabled: false
+      },
+      stroke: {
+        width: 2,
+        curve: 'smooth'
+      },
+      series: [
+        {
+          data: [200, 55, 400, 250]
+        }
+      ],
+      xaxis: {
+        show: true,
+        lines: {
+          show: false
+        },
+        labels: {
+          show: false
+        },
+        stroke: {
+          width: 0
+        },
+        axisBorder: {
+          show: false
+        }
+      },
+      yaxis: {
+        stroke: {
+          width: 0
+        },
+        show: false
+      },
+      tooltip: {
+        enabled: false
+      }
+    };
+  if (typeof salesLastYearEl !== undefined && salesLastYearEl !== null) {
+    const salesLastYear = new ApexCharts(salesLastYearEl, salesLastYearConfig);
+    salesLastYear.render();
+  }
+
+  // Sessions Last Month - Staked Bar Chart
+  // --------------------------------------------------------------------
+  const sessionsLastMonthEl = document.querySelector('#sessionsLastMonth'),
+    sessionsLastMonthConfig = {
+      chart: {
+        type: 'bar',
+        height: 78,
+        parentHeightOffset: 0,
+        stacked: true,
+        toolbar: {
+          show: false
+        }
+      },
+      series: [
+        {
+          name: 'PRODUCT A',
+          data: [4, 3, 6, 4, 3]
+        },
+        {
+          name: 'PRODUCT B',
+          data: [-3, -4, -3, -2, -3]
+        }
+      ],
+      plotOptions: {
+        bar: {
+          horizontal: false,
+          columnWidth: '30%',
+          barHeight: '100%',
+          borderRadius: 5,
+          startingShape: 'rounded',
+          endingShape: 'rounded'
+        }
+      },
+      dataLabels: {
+        enabled: false
+      },
+      tooltip: {
+        enabled: false
+      },
+      stroke: {
+        curve: 'smooth',
+        width: 1,
+        lineCap: 'round',
+        colors: [cardColor]
+      },
+      legend: {
+        show: false
+      },
+      colors: [config.colors.primary, config.colors.success],
+      grid: {
+        show: false,
+        padding: {
+          top: -41,
+          right: -10,
+          left: -8,
+          bottom: -22
+        }
+      },
+      xaxis: {
+        categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        labels: {
+          show: false
+        },
+        axisBorder: {
+          show: false
+        },
+        axisTicks: {
+          show: false
+        }
+      },
+      yaxis: {
+        show: false
+      },
+      responsive: [
+        {
+          breakpoint: 1441,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '40%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 1300,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '50%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 1200,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 6,
+                columnWidth: '20%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 1025,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 6,
+                columnWidth: '20%'
+              }
+            },
+            chart: {
+              height: 80
+            }
+          }
+        },
+        {
+          breakpoint: 900,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 6
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 782,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '30%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 426,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 5,
+                columnWidth: '35%'
+              }
+            },
+            chart: {
+              height: 78
+            }
+          }
+        },
+        {
+          breakpoint: 376,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 6
+              }
+            }
+          }
+        }
+      ],
+      states: {
+        hover: {
+          filter: {
+            type: 'none'
+          }
+        },
+        active: {
+          filter: {
+            type: 'none'
+          }
+        }
+      }
+    };
+  if (typeof sessionsLastMonthEl !== undefined && sessionsLastMonthEl !== null) {
+    const sessionsLastMonth = new ApexCharts(sessionsLastMonthEl, sessionsLastMonthConfig);
+    sessionsLastMonth.render();
+  }
+
+  // Revenue Growth Chart
+  // --------------------------------------------------------------------
+  const revenueGrowthEl = document.querySelector('#revenueGrowth'),
+    revenueGrowthConfig = {
+      chart: {
+        height: 170,
+        type: 'bar',
+        parentHeightOffset: 0,
+        toolbar: {
+          show: false
+        }
+      },
+      plotOptions: {
+        bar: {
+          barHeight: '80%',
+          columnWidth: '30%',
+          startingShape: 'rounded',
+          endingShape: 'rounded',
+          borderRadius: 6,
+          distributed: true
+        }
+      },
+      tooltip: {
+        enabled: false
+      },
+      grid: {
+        show: false,
+        padding: {
+          top: -20,
+          bottom: -12,
+          left: -10,
+          right: 0
+        }
+      },
+      colors: [
+        config.colors_label.success,
+        config.colors_label.success,
+        config.colors_label.success,
+        config.colors_label.success,
+        config.colors.success,
+        config.colors_label.success,
+        config.colors_label.success
+      ],
+      dataLabels: {
+        enabled: false
+      },
+      series: [
+        {
+          data: [25, 40, 55, 70, 85, 70, 55]
+        }
+      ],
+      legend: {
+        show: false
+      },
+      xaxis: {
+        categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
+        axisBorder: {
+          show: false
+        },
+        axisTicks: {
+          show: false
+        },
+        labels: {
+          style: {
+            colors: labelColor,
+            fontSize: '13px',
+            fontFamily: 'Public Sans'
+          }
+        }
+      },
+      yaxis: {
+        labels: {
+          show: false
+        }
+      },
+      states: {
+        hover: {
+          filter: {
+            type: 'none'
+          }
+        }
+      },
+      responsive: [
+        {
+          breakpoint: 1471,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '50%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 1350,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '57%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 1032,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '60%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 992,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '40%',
+                borderRadius: 8
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 855,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '50%',
+                borderRadius: 6
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 440,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '40%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 381,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '45%'
+              }
+            }
+          }
+        }
+      ]
+    };
+  if (typeof revenueGrowthEl !== undefined && revenueGrowthEl !== null) {
+    const revenueGrowth = new ApexCharts(revenueGrowthEl, revenueGrowthConfig);
+    revenueGrowth.render();
+  }
+
+  // Earning Reports Tabs Function
+  function EarningReportsBarChart(arrayData, highlightData) {
+    const basicColor = config.colors_label.primary,
+      highlightColor = config.colors.primary;
+    var colorArr = [];
+
+    for (let i = 0; i < arrayData.length; i++) {
+      if (i === highlightData) {
+        colorArr.push(highlightColor);
+      } else {
+        colorArr.push(basicColor);
+      }
+    }
+
+    const earningReportBarChartOpt = {
+      chart: {
+        height: 258,
+        parentHeightOffset: 0,
+        type: 'bar',
+        toolbar: {
+          show: false
+        }
+      },
+      plotOptions: {
+        bar: {
+          columnWidth: '32%',
+          startingShape: 'rounded',
+          borderRadius: 7,
+          distributed: true,
+          dataLabels: {
+            position: 'top'
+          }
+        }
+      },
+      grid: {
+        show: false,
+        padding: {
+          top: 0,
+          bottom: 0,
+          left: -10,
+          right: -10
+        }
+      },
+      colors: colorArr,
+      dataLabels: {
+        enabled: true,
+        formatter: function (val) {
+          return val + 'k';
+        },
+        offsetY: -25,
+        style: {
+          fontSize: '15px',
+          colors: [legendColor],
+          fontWeight: '600',
+          fontFamily: 'Public Sans'
+        }
+      },
+      series: [
+        {
+          data: arrayData
+        }
+      ],
+      legend: {
+        show: false
+      },
+      tooltip: {
+        enabled: false
+      },
+      xaxis: {
+        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
+        axisBorder: {
+          show: true,
+          color: borderColor
+        },
+        axisTicks: {
+          show: false
+        },
+        labels: {
+          style: {
+            colors: labelColor,
+            fontSize: '13px',
+            fontFamily: 'Public Sans'
+          }
+        }
+      },
+      yaxis: {
+        labels: {
+          offsetX: -15,
+          formatter: function (val) {
+            return '$' + parseInt(val / 1) + 'k';
+          },
+          style: {
+            fontSize: '13px',
+            colors: labelColor,
+            fontFamily: 'Public Sans'
+          },
+          min: 0,
+          max: 60000,
+          tickAmount: 6
+        }
+      },
+      responsive: [
+        {
+          breakpoint: 1441,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '41%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 590,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '61%',
+                borderRadius: 5
+              }
+            },
+            yaxis: {
+              labels: {
+                show: false
+              }
+            },
+            grid: {
+              padding: {
+                right: 0,
+                left: -20
+              }
+            },
+            dataLabels: {
+              style: {
+                fontSize: '12px',
+                fontWeight: '400'
+              }
+            }
+          }
+        }
+      ]
+    };
+    return earningReportBarChartOpt;
+  }
+  var chartJson = 'earning-reports-charts.json';
+  // Earning Chart JSON data
+  var earningReportsChart = $.ajax({
+    url: assetsPath + 'json/' + chartJson, //? Use your own search api instead
+    dataType: 'json',
+    async: false
+  }).responseJSON;
+
+  // Earning Reports Tabs Orders
+  // --------------------------------------------------------------------
+  const earningReportsTabsOrdersEl = document.querySelector('#earningReportsTabsOrders'),
+    earningReportsTabsOrdersConfig = EarningReportsBarChart(
+      earningReportsChart['data'][0]['chart_data'],
+      earningReportsChart['data'][0]['active_option']
+    );
+  if (typeof earningReportsTabsOrdersEl !== undefined && earningReportsTabsOrdersEl !== null) {
+    const earningReportsTabsOrders = new ApexCharts(earningReportsTabsOrdersEl, earningReportsTabsOrdersConfig);
+    earningReportsTabsOrders.render();
+  }
+  // Earning Reports Tabs Sales
+  // --------------------------------------------------------------------
+  const earningReportsTabsSalesEl = document.querySelector('#earningReportsTabsSales'),
+    earningReportsTabsSalesConfig = EarningReportsBarChart(
+      earningReportsChart['data'][1]['chart_data'],
+      earningReportsChart['data'][1]['active_option']
+    );
+  if (typeof earningReportsTabsSalesEl !== undefined && earningReportsTabsSalesEl !== null) {
+    const earningReportsTabsSales = new ApexCharts(earningReportsTabsSalesEl, earningReportsTabsSalesConfig);
+    earningReportsTabsSales.render();
+  }
+  // Earning Reports Tabs Profit
+  // --------------------------------------------------------------------
+  const earningReportsTabsProfitEl = document.querySelector('#earningReportsTabsProfit'),
+    earningReportsTabsProfitConfig = EarningReportsBarChart(
+      earningReportsChart['data'][2]['chart_data'],
+      earningReportsChart['data'][2]['active_option']
+    );
+  if (typeof earningReportsTabsProfitEl !== undefined && earningReportsTabsProfitEl !== null) {
+    const earningReportsTabsProfit = new ApexCharts(earningReportsTabsProfitEl, earningReportsTabsProfitConfig);
+    earningReportsTabsProfit.render();
+  }
+  // Earning Reports Tabs Income
+  // --------------------------------------------------------------------
+  const earningReportsTabsIncomeEl = document.querySelector('#earningReportsTabsIncome'),
+    earningReportsTabsIncomeConfig = EarningReportsBarChart(
+      earningReportsChart['data'][3]['chart_data'],
+      earningReportsChart['data'][3]['active_option']
+    );
+  if (typeof earningReportsTabsIncomeEl !== undefined && earningReportsTabsIncomeEl !== null) {
+    const earningReportsTabsIncome = new ApexCharts(earningReportsTabsIncomeEl, earningReportsTabsIncomeConfig);
+    earningReportsTabsIncome.render();
+  }
+
+  // Sales Last 6 Months - Radar Chart
+  // --------------------------------------------------------------------
+  const salesLastMonthEl = document.querySelector('#salesLastMonth'),
+    salesLastMonthConfig = {
+      series: [
+        {
+          name: 'Sales',
+          data: [32, 27, 27, 30, 25, 25]
+        },
+        {
+          name: 'Visits',
+          data: [25, 35, 20, 20, 20, 20]
+        }
+      ],
+      chart: {
+        height: 340,
+        type: 'radar',
+        toolbar: {
+          show: false
+        }
+      },
+      plotOptions: {
+        radar: {
+          polygons: {
+            strokeColors: borderColor,
+            connectorColors: borderColor
+          }
+        }
+      },
+      stroke: {
+        show: false,
+        width: 0
+      },
+      legend: {
+        show: true,
+        fontSize: '13px',
+        position: 'bottom',
+        labels: {
+          colors: legendColor,
+          useSeriesColors: false
+        },
+        markers: {
+          height: 10,
+          width: 10,
+          offsetX: -3
+        },
+        itemMargin: {
+          horizontal: 10
+        },
+        onItemHover: {
+          highlightDataSeries: false
+        }
+      },
+      colors: [config.colors.primary, config.colors.info],
+      fill: {
+        opacity: [1, 0.85]
+      },
+      markers: {
+        size: 0
+      },
+      grid: {
+        show: false,
+        padding: {
+          top: 0,
+          bottom: -5
+        }
+      },
+      xaxis: {
+        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+        labels: {
+          show: true,
+          style: {
+            colors: [labelColor, labelColor, labelColor, labelColor, labelColor, labelColor],
+            fontSize: '13px',
+            fontFamily: 'Public Sans'
+          }
+        }
+      },
+      yaxis: {
+        show: false,
+        min: 0,
+        max: 40,
+        tickAmount: 4
+      },
+      responsive: [
+        {
+          breakpoint: 769,
+          options: {
+            chart: {
+              height: 400
+            }
+          }
+        }
+      ]
+    };
+  if (typeof salesLastMonthEl !== undefined && salesLastMonthEl !== null) {
+    const salesLastMonth = new ApexCharts(salesLastMonthEl, salesLastMonthConfig);
+    salesLastMonth.render();
+  }
+
+  // Progress Chart
+  // --------------------------------------------------------------------
+  // Radial bar chart functions
+  function radialBarChart(color, value) {
+    const radialBarChartOpt = {
+      chart: {
+        height: 53,
+        width: 43,
+        type: 'radialBar'
+      },
+      plotOptions: {
+        radialBar: {
+          hollow: {
+            size: '33%'
+          },
+          dataLabels: {
+            show: false
+          },
+          track: {
+            background: config.colors_label.secondary
+          }
+        }
+      },
+      stroke: {
+        lineCap: 'round'
+      },
+      colors: [color],
+      grid: {
+        padding: {
+          top: -15,
+          bottom: -15,
+          left: -5,
+          right: -15
+        }
+      },
+      series: [value],
+      labels: ['Progress']
+    };
+    return radialBarChartOpt;
+  }
+  // All progress chart
+  const chartProgressList = document.querySelectorAll('.chart-progress');
+  if (chartProgressList) {
+    chartProgressList.forEach(function (chartProgressEl) {
+      const color = config.colors[chartProgressEl.dataset.color],
+        series = chartProgressEl.dataset.series;
+      const optionsBundle = radialBarChart(color, series);
+      const chart = new ApexCharts(chartProgressEl, optionsBundle);
+      chart.render();
+    });
+  }
+
+  // Project Status - Line Chart
+  // --------------------------------------------------------------------
+  const projectStatusEl = document.querySelector('#projectStatusChart'),
+    projectStatusConfig = {
+      chart: {
+        height: 240,
+        type: 'area',
+        toolbar: false
+      },
+      markers: {
+        strokeColor: 'transparent'
+      },
+      series: [
+        {
+          data: [2000, 2000, 4000, 4000, 3050, 3050, 2000, 2000, 3050, 3050, 4700, 4700, 2750, 2750, 5700, 5700]
+        }
+      ],
+      dataLabels: {
+        enabled: false
+      },
+      grid: {
+        show: false,
+        padding: {
+          left: -10,
+          right: -5
+        }
+      },
+      stroke: {
+        width: 3,
+        curve: 'straight'
+      },
+      colors: [config.colors.warning],
+      fill: {
+        type: 'gradient',
+        gradient: {
+          opacityFrom: 0.6,
+          opacityTo: 0.15,
+          stops: [0, 95, 100]
+        }
+      },
+      xaxis: {
+        labels: {
+          show: false
+        },
+        axisBorder: {
+          show: false
+        },
+        axisTicks: {
+          show: false
+        },
+        lines: {
+          show: false
+        }
+      },
+      yaxis: {
+        labels: {
+          show: false
+        },
+        min: 1000,
+        max: 6000,
+        tickAmount: 5
+      },
+      tooltip: {
+        enabled: false
+      }
+    };
+  if (typeof projectStatusEl !== undefined && projectStatusEl !== null) {
+    const projectStatus = new ApexCharts(projectStatusEl, projectStatusConfig);
+    projectStatus.render();
+  }
+})();

httpdocs/themes/vuexy/js/dashboards-ecommerce.js

@@ -0,0 +1,984 @@
+/**
+ * Dashboard eCommerce
+ */
+
+'use strict';
+
+(function () {
+  let cardColor, labelColor, headingColor, borderColor, legendColor;
+
+  if (isDarkStyle) {
+    cardColor = config.colors_dark.cardColor;
+    labelColor = config.colors_dark.textMuted;
+    legendColor = config.colors_dark.bodyColor;
+    headingColor = config.colors_dark.headingColor;
+    borderColor = config.colors_dark.borderColor;
+  } else {
+    cardColor = config.colors.cardColor;
+    labelColor = config.colors.textMuted;
+    legendColor = config.colors.bodyColor;
+    headingColor = config.colors.headingColor;
+    borderColor = config.colors.borderColor;
+  }
+
+  // Donut Chart Colors
+  const chartColors = {
+    donut: {
+      series1: config.colors.success,
+      series2: '#28c76fb3',
+      series3: '#28c76f80',
+      series4: config.colors_label.success
+    }
+  };
+
+  // Expenses Radial Bar Chart
+  // --------------------------------------------------------------------
+  const expensesRadialChartEl = document.querySelector('#expensesChart'),
+    expensesRadialChartConfig = {
+      chart: {
+        height: 145,
+        sparkline: {
+          enabled: true
+        },
+        parentHeightOffset: 0,
+        type: 'radialBar'
+      },
+      colors: [config.colors.warning],
+      series: [78],
+      plotOptions: {
+        radialBar: {
+          offsetY: 0,
+          startAngle: -90,
+          endAngle: 90,
+          hollow: {
+            size: '65%'
+          },
+          track: {
+            strokeWidth: '45%',
+            background: borderColor
+          },
+          dataLabels: {
+            name: {
+              show: false
+            },
+            value: {
+              fontSize: '22px',
+              color: headingColor,
+              fontWeight: 600,
+              offsetY: -5
+            }
+          }
+        }
+      },
+      grid: {
+        show: false,
+        padding: {
+          bottom: 5
+        }
+      },
+      stroke: {
+        lineCap: 'round'
+      },
+      labels: ['Progress'],
+      responsive: [
+        {
+          breakpoint: 1442,
+          options: {
+            chart: {
+              height: 120
+            },
+            plotOptions: {
+              radialBar: {
+                dataLabels: {
+                  value: {
+                    fontSize: '18px'
+                  }
+                },
+                hollow: {
+                  size: '60%'
+                }
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 1025,
+          options: {
+            chart: {
+              height: 136
+            },
+            plotOptions: {
+              radialBar: {
+                hollow: {
+                  size: '65%'
+                },
+                dataLabels: {
+                  value: {
+                    fontSize: '18px'
+                  }
+                }
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 769,
+          options: {
+            chart: {
+              height: 120
+            },
+            plotOptions: {
+              radialBar: {
+                hollow: {
+                  size: '55%'
+                }
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 426,
+          options: {
+            chart: {
+              height: 145
+            },
+            plotOptions: {
+              radialBar: {
+                hollow: {
+                  size: '65%'
+                }
+              }
+            },
+            dataLabels: {
+              value: {
+                offsetY: 0
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 376,
+          options: {
+            chart: {
+              height: 105
+            },
+            plotOptions: {
+              radialBar: {
+                hollow: {
+                  size: '60%'
+                }
+              }
+            }
+          }
+        }
+      ]
+    };
+  if (typeof expensesRadialChartEl !== undefined && expensesRadialChartEl !== null) {
+    const expensesRadialChart = new ApexCharts(expensesRadialChartEl, expensesRadialChartConfig);
+    expensesRadialChart.render();
+  }
+
+  // Profit last month Line Chart
+  // --------------------------------------------------------------------
+  const profitLastMonthEl = document.querySelector('#profitLastMonth'),
+    profitLastMonthConfig = {
+      chart: {
+        height: 90,
+        type: 'line',
+        parentHeightOffset: 0,
+        toolbar: {
+          show: false
+        }
+      },
+      grid: {
+        borderColor: borderColor,
+        strokeDashArray: 6,
+        xaxis: {
+          lines: {
+            show: true,
+            colors: '#000'
+          }
+        },
+        yaxis: {
+          lines: {
+            show: false
+          }
+        },
+        padding: {
+          top: -18,
+          left: -4,
+          right: 7,
+          bottom: -10
+        }
+      },
+      colors: [config.colors.info],
+      stroke: {
+        width: 2
+      },
+      series: [
+        {
+          data: [0, 25, 10, 40, 25, 55]
+        }
+      ],
+      tooltip: {
+        shared: false,
+        intersect: true,
+        x: {
+          show: false
+        }
+      },
+      xaxis: {
+        labels: {
+          show: false
+        },
+        axisTicks: {
+          show: false
+        },
+        axisBorder: {
+          show: false
+        }
+      },
+      yaxis: {
+        labels: {
+          show: false
+        }
+      },
+      tooltip: {
+        enabled: false
+      },
+      markers: {
+        size: 3.5,
+        fillColor: config.colors.info,
+        strokeColors: 'transparent',
+        strokeWidth: 3.2,
+        discrete: [
+          {
+            seriesIndex: 0,
+            dataPointIndex: 5,
+            fillColor: cardColor,
+            strokeColor: config.colors.info,
+            size: 5,
+            shape: 'circle'
+          }
+        ],
+        hover: {
+          size: 5.5
+        }
+      },
+      responsive: [
+        {
+          breakpoint: 1442,
+          options: {
+            chart: {
+              height: 100
+            }
+          }
+        },
+        {
+          breakpoint: 1025,
+          options: {
+            chart: {
+              height: 86
+            }
+          }
+        },
+        {
+          breakpoint: 769,
+          options: {
+            chart: {
+              height: 93
+            }
+          }
+        }
+      ]
+    };
+  if (typeof profitLastMonthEl !== undefined && profitLastMonthEl !== null) {
+    const profitLastMonth = new ApexCharts(profitLastMonthEl, profitLastMonthConfig);
+    profitLastMonth.render();
+  }
+
+  // Generated Leads Chart
+  // --------------------------------------------------------------------
+  const generatedLeadsChartEl = document.querySelector('#generatedLeadsChart'),
+    generatedLeadsChartConfig = {
+      chart: {
+        height: 147,
+        width: 130,
+        parentHeightOffset: 0,
+        type: 'donut'
+      },
+      labels: ['Electronic', 'Sports', 'Decor', 'Fashion'],
+      series: [45, 58, 30, 50],
+      colors: [
+        chartColors.donut.series1,
+        chartColors.donut.series2,
+        chartColors.donut.series3,
+        chartColors.donut.series4
+      ],
+      stroke: {
+        width: 0
+      },
+      dataLabels: {
+        enabled: false,
+        formatter: function (val, opt) {
+          return parseInt(val) + '%';
+        }
+      },
+      legend: {
+        show: false
+      },
+      tooltip: {
+        theme: false
+      },
+      grid: {
+        padding: {
+          top: 15,
+          right: -20,
+          left: -20
+        }
+      },
+      states: {
+        hover: {
+          filter: {
+            type: 'none'
+          }
+        }
+      },
+      plotOptions: {
+        pie: {
+          donut: {
+            size: '70%',
+            labels: {
+              show: true,
+              value: {
+                fontSize: '1.375rem',
+                fontFamily: 'Public Sans',
+                color: headingColor,
+                fontWeight: 600,
+                offsetY: -15,
+                formatter: function (val) {
+                  return parseInt(val) + '%';
+                }
+              },
+              name: {
+                offsetY: 20,
+                fontFamily: 'Public Sans'
+              },
+              total: {
+                show: true,
+                showAlways: true,
+                color: config.colors.success,
+                fontSize: '.8125rem',
+                label: 'Total',
+                fontFamily: 'Public Sans',
+                formatter: function (w) {
+                  return '184';
+                }
+              }
+            }
+          }
+        }
+      },
+      responsive: [
+        {
+          breakpoint: 1025,
+          options: {
+            chart: {
+              height: 172,
+              width: 160
+            }
+          }
+        },
+        {
+          breakpoint: 769,
+          options: {
+            chart: {
+              height: 178
+            }
+          }
+        },
+        {
+          breakpoint: 426,
+          options: {
+            chart: {
+              height: 147
+            }
+          }
+        }
+      ]
+    };
+  if (typeof generatedLeadsChartEl !== undefined && generatedLeadsChartEl !== null) {
+    const generatedLeadsChart = new ApexCharts(generatedLeadsChartEl, generatedLeadsChartConfig);
+    generatedLeadsChart.render();
+  }
+
+  // Total Revenue Report Chart - Bar Chart
+  // --------------------------------------------------------------------
+  const totalRevenueChartEl = document.querySelector('#totalRevenueChart'),
+    totalRevenueChartOptions = {
+      series: [
+        {
+          name: 'Earning',
+          data: [270, 210, 180, 200, 250, 280, 250, 270, 150]
+        },
+        {
+          name: 'Expense',
+          data: [-140, -160, -180, -150, -100, -60, -80, -100, -180]
+        }
+      ],
+      chart: {
+        height: 365,
+        parentHeightOffset: 0,
+        stacked: true,
+        type: 'bar',
+        toolbar: { show: false }
+      },
+      tooltip: {
+        enabled: false
+      },
+      plotOptions: {
+        bar: {
+          horizontal: false,
+          columnWidth: '40%',
+          borderRadius: 10,
+          startingShape: 'rounded',
+          endingShape: 'rounded'
+        }
+      },
+      colors: [config.colors.primary, config.colors.warning],
+      dataLabels: {
+        enabled: false
+      },
+      stroke: {
+        curve: 'smooth',
+        width: 6,
+        lineCap: 'round',
+        colors: [cardColor]
+      },
+      legend: {
+        show: true,
+        horizontalAlign: 'left',
+        position: 'top',
+        fontFamily: 'Public Sans',
+        markers: {
+          height: 12,
+          width: 12,
+          radius: 12,
+          offsetX: -3,
+          offsetY: 2
+        },
+        labels: {
+          colors: legendColor
+        },
+        itemMargin: {
+          horizontal: 5
+        }
+      },
+      grid: {
+        show: false,
+        padding: {
+          bottom: -8,
+          top: 20
+        }
+      },
+      xaxis: {
+        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
+        labels: {
+          style: {
+            fontSize: '13px',
+            colors: labelColor,
+            fontFamily: 'Public Sans'
+          }
+        },
+        axisTicks: {
+          show: false
+        },
+        axisBorder: {
+          show: false
+        }
+      },
+      yaxis: {
+        labels: {
+          offsetX: -16,
+          style: {
+            fontSize: '13px',
+            colors: labelColor,
+            fontFamily: 'Public Sans'
+          }
+        },
+        min: -200,
+        max: 300,
+        tickAmount: 5
+      },
+      responsive: [
+        {
+          breakpoint: 1700,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '43%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 1441,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '52%'
+              }
+            },
+            chart: {
+              height: 375
+            }
+          }
+        },
+        {
+          breakpoint: 1300,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '62%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 1025,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '70%'
+              }
+            },
+            chart: {
+              height: 390
+            }
+          }
+        },
+        {
+          breakpoint: 991,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '38%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 850,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '48%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 449,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '70%'
+              }
+            },
+            chart: {
+              height: 360
+            },
+            xaxis: {
+              labels: {
+                offsetY: -5
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 394,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '88%'
+              }
+            }
+          }
+        }
+      ],
+      states: {
+        hover: {
+          filter: {
+            type: 'none'
+          }
+        },
+        active: {
+          filter: {
+            type: 'none'
+          }
+        }
+      }
+    };
+  if (typeof totalRevenueChartEl !== undefined && totalRevenueChartEl !== null) {
+    const totalRevenueChart = new ApexCharts(totalRevenueChartEl, totalRevenueChartOptions);
+    totalRevenueChart.render();
+  }
+
+  // Total Revenue Report Budget Line Chart
+  const budgetChartEl = document.querySelector('#budgetChart'),
+    budgetChartOptions = {
+      chart: {
+        height: 100,
+        toolbar: { show: false },
+        zoom: { enabled: false },
+        type: 'line'
+      },
+      series: [
+        {
+          name: 'Last Month',
+          data: [20, 10, 30, 16, 24, 5, 40, 23, 28, 5, 30]
+        },
+        {
+          name: 'This Month',
+          data: [50, 40, 60, 46, 54, 35, 70, 53, 58, 35, 60]
+        }
+      ],
+      stroke: {
+        curve: 'smooth',
+        dashArray: [5, 0],
+        width: [1, 2]
+      },
+      legend: {
+        show: false
+      },
+      colors: [borderColor, config.colors.primary],
+      grid: {
+        show: false,
+        borderColor: borderColor,
+        padding: {
+          top: -30,
+          bottom: -15,
+          left: 25
+        }
+      },
+      markers: {
+        size: 0
+      },
+      xaxis: {
+        labels: {
+          show: false
+        },
+        axisTicks: {
+          show: false
+        },
+        axisBorder: {
+          show: false
+        }
+      },
+      yaxis: {
+        show: false
+      },
+      tooltip: {
+        enabled: false
+      }
+    };
+  if (typeof budgetChartEl !== undefined && budgetChartEl !== null) {
+    const budgetChart = new ApexCharts(budgetChartEl, budgetChartOptions);
+    budgetChart.render();
+  }
+
+  // Earning Reports Bar Chart
+  // --------------------------------------------------------------------
+  const reportBarChartEl = document.querySelector('#reportBarChart'),
+    reportBarChartConfig = {
+      chart: {
+        height: 230,
+        type: 'bar',
+        toolbar: {
+          show: false
+        }
+      },
+      plotOptions: {
+        bar: {
+          barHeight: '60%',
+          columnWidth: '60%',
+          startingShape: 'rounded',
+          endingShape: 'rounded',
+          borderRadius: 4,
+          distributed: true
+        }
+      },
+      grid: {
+        show: false,
+        padding: {
+          top: -20,
+          bottom: 0,
+          left: -10,
+          right: -10
+        }
+      },
+      colors: [
+        config.colors_label.primary,
+        config.colors_label.primary,
+        config.colors_label.primary,
+        config.colors_label.primary,
+        config.colors.primary,
+        config.colors_label.primary,
+        config.colors_label.primary
+      ],
+      dataLabels: {
+        enabled: false
+      },
+      series: [
+        {
+          data: [40, 95, 60, 45, 90, 50, 75]
+        }
+      ],
+      legend: {
+        show: false
+      },
+      xaxis: {
+        categories: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+        axisBorder: {
+          show: false
+        },
+        axisTicks: {
+          show: false
+        },
+        labels: {
+          style: {
+            colors: labelColor,
+            fontSize: '13px'
+          }
+        }
+      },
+      yaxis: {
+        labels: {
+          show: false
+        }
+      },
+      responsive: [
+        {
+          breakpoint: 1025,
+          options: {
+            chart: {
+              height: 190
+            }
+          }
+        },
+        {
+          breakpoint: 769,
+          options: {
+            chart: {
+              height: 250
+            }
+          }
+        }
+      ]
+    };
+  if (typeof reportBarChartEl !== undefined && reportBarChartEl !== null) {
+    const barChart = new ApexCharts(reportBarChartEl, reportBarChartConfig);
+    barChart.render();
+  }
+
+  // Variable declaration for table
+  var dt_invoice_table = $('.datatable-invoice');
+  // Invoice datatable
+  // --------------------------------------------------------------------
+  if (dt_invoice_table.length) {
+    var dt_invoice = dt_invoice_table.DataTable({
+      ajax: assetsPath + 'json/invoice-list.json', // JSON file to add data
+      columns: [
+        // columns according to JSON
+        { data: '' },
+        { data: 'invoice_id' },
+        { data: 'invoice_status' },
+        { data: 'total' },
+        { data: 'issued_date' },
+        { data: 'invoice_status' },
+        { data: 'action' }
+      ],
+      columnDefs: [
+        {
+          // For Responsive
+          className: 'control',
+          responsivePriority: 2,
+          targets: 0,
+          render: function (data, type, full, meta) {
+            return '';
+          }
+        },
+        {
+          // Invoice ID
+          targets: 1,
+          render: function (data, type, full, meta) {
+            var $invoice_id = full['invoice_id'];
+            // Creates full output for row
+            var $row_output = '<a href="app-invoice-preview.html"><span>#' + $invoice_id + '</span></a>';
+            return $row_output;
+          }
+        },
+        {
+          // Invoice status
+          targets: 2,
+          render: function (data, type, full, meta) {
+            var $invoice_status = full['invoice_status'],
+              $due_date = full['due_date'],
+              $balance = full['balance'];
+            var roleBadgeObj = {
+              Sent: '<span class="badge badge-center rounded-pill bg-label-secondary w-px-30 h-px-30"><i class="ti ti-circle-check ti-sm"></i></span>',
+              Draft:
+                '<span class="badge badge-center rounded-pill bg-label-primary w-px-30 h-px-30"><i class="ti ti-device-floppy ti-sm"></i></span>',
+              'Past Due':
+                '<span class="badge badge-center rounded-pill bg-label-danger w-px-30 h-px-30"><i class="ti ti-info-circle ti-sm"></i></span>',
+              'Partial Payment':
+                '<span class="badge badge-center rounded-pill bg-label-success w-px-30 h-px-30"><i class="ti ti-circle-half-2 ti-sm"></i></span>',
+              Paid: '<span class="badge badge-center rounded-pill bg-label-warning w-px-30 h-px-30"><i class="ti ti-chart-pie ti-sm"></i></span>',
+              Downloaded:
+                '<span class="badge badge-center rounded-pill bg-label-info w-px-30 h-px-30"><i class="ti ti-arrow-down-circle ti-sm"></i></span>'
+            };
+            return (
+              "<span data-bs-toggle='tooltip' data-bs-html='true' title='<span>" +
+              $invoice_status +
+              '<br> <strong>Balance:</strong> ' +
+              $balance +
+              '<br> <strong>Due Date:</strong> ' +
+              $due_date +
+              "</span>'>" +
+              roleBadgeObj[$invoice_status] +
+              '</span>'
+            );
+          }
+        },
+        {
+          // Total Invoice Amount
+          targets: 3,
+          render: function (data, type, full, meta) {
+            var $total = full['total'];
+            return '$' + $total;
+          }
+        },
+        {
+          // Actions
+          targets: -1,
+          title: 'Actions',
+          orderable: false,
+          render: function (data, type, full, meta) {
+            return (
+              '<div class="d-flex align-items-center">' +
+              '<a href="javascript:;" class="text-body" data-bs-toggle="tooltip" title="Send Mail"><i class="ti ti-mail me-2 ti-sm"></i></a>' +
+              '<a href="app-invoice-preview.html" class="text-body" data-bs-toggle="tooltip" title="Preview"><i class="ti ti-eye mx-2 ti-sm"></i></a>' +
+              '<a href="javascript:;" class="text-body" data-bs-toggle="tooltip" title="Download"><i class="ti ti-dots-vertical mx-1 ti-sm"></i></a>' +
+              '</div>'
+            );
+          }
+        },
+        {
+          // Invoice Status
+          targets: -2,
+          visible: false
+        }
+      ],
+      order: [[1, 'desc']],
+      dom:
+        '<"row ms-2 me-3"' +
+        '<"col-12 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start gap-2"l<"dt-action-buttons text-xl-end text-lg-start text-md-end text-start mt-md-0 mt-3"B>>' +
+        '<"col-12 col-md-6 d-flex align-items-center justify-content-end flex-column flex-md-row pe-3 gap-md-2"f<"invoice_status mb-3 mb-md-0">>' +
+        '>t' +
+        '<"row mx-2"' +
+        '<"col-sm-12 col-md-6"i>' +
+        '<"col-sm-12 col-md-6"p>' +
+        '>',
+      displayLength: 7,
+      lengthMenu: [7, 10, 25, 50, 75, 100],
+      language: {
+        sLengthMenu: '_MENU_',
+        search: '',
+        searchPlaceholder: 'Search Invoice'
+      },
+      // Buttons
+      buttons: [
+        {
+          text: '<i class="ti ti-plus me-md-2"></i><span class="d-md-inline-block d-none">Create Invoice</span>',
+          className: 'btn btn-primary',
+          action: function (e, dt, button, config) {
+            window.location = 'app-invoice-add.html';
+          }
+        }
+      ],
+      // For responsive popup
+      responsive: {
+        details: {
+          display: $.fn.dataTable.Responsive.display.modal({
+            header: function (row) {
+              var data = row.data();
+              return 'Details of ' + data['full_name'];
+            }
+          }),
+          type: 'column',
+          renderer: function (api, rowIdx, columns) {
+            var data = $.map(columns, function (col, i) {
+              return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
+                ? '<tr data-dt-row="' +
+                    col.rowIndex +
+                    '" data-dt-column="' +
+                    col.columnIndex +
+                    '">' +
+                    '<td>' +
+                    col.title +
+                    ':' +
+                    '</td> ' +
+                    '<td>' +
+                    col.data +
+                    '</td>' +
+                    '</tr>'
+                : '';
+            }).join('');
+
+            return data ? $('<table class="table"/><tbody />').append(data) : false;
+          }
+        }
+      },
+      initComplete: function () {
+        // Adding role filter once table initialized
+        this.api()
+          .columns(5)
+          .every(function () {
+            var column = this;
+            var select = $(
+              '<select id="UserRole" class="form-select"><option value=""> Select Status </option></select>'
+            )
+              .appendTo('.invoice_status')
+              .on('change', function () {
+                var val = $.fn.dataTable.util.escapeRegex($(this).val());
+                column.search(val ? '^' + val + '$' : '', true, false).draw();
+              });
+
+            column
+              .data()
+              .unique()
+              .sort()
+              .each(function (d, j) {
+                select.append('<option value="' + d + '" class="text-capitalize">' + d + '</option>');
+              });
+          });
+      }
+    });
+  }
+  // On each datatable draw, initialize tooltip
+  dt_invoice_table.on('draw.dt', function () {
+    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+      return new bootstrap.Tooltip(tooltipTriggerEl, {
+        boundary: document.body
+      });
+    });
+  });
+
+  // Filter form control to default size
+  // ? setTimeout used for multilingual table initialization
+  setTimeout(() => {
+    $('.dataTables_filter .form-control').removeClass('form-control-sm');
+    $('.dataTables_length .form-select').removeClass('form-select-sm');
+  }, 300);
+})();

httpdocs/themes/vuexy/js/extended-ui-blockui.js

@@ -0,0 +1,504 @@
+/**
+ * Block UI (jquery)
+ */
+
+'use strict';
+
+$(function () {
+  var section = $('#section-block'),
+    sectionBlock = $('.btn-section-block'),
+    sectionBlockOverlay = $('.btn-section-block-overlay'),
+    sectionBlockSpinner = $('.btn-section-block-spinner'),
+    sectionBlockCustom = $('.btn-section-block-custom'),
+    sectionBlockMultiple = $('.btn-section-block-multiple'),
+    cardSection = $('#card-block'),
+    cardBlock = $('.btn-card-block'),
+    cardBlockOverlay = $('.btn-card-block-overlay'),
+    cardBlockSpinner = $('.btn-card-block-spinner'),
+    cardBlockCustom = $('.btn-card-block-custom'),
+    cardBlockMultiple = $('.btn-card-block-multiple'),
+    pageBlock = $('.btn-page-block'),
+    pageBlockOverlay = $('.btn-page-block-overlay'),
+    pageBlockSpinner = $('.btn-page-block-spinner'),
+    pageBlockCustom = $('.btn-page-block-custom'),
+    pageBlockMultiple = $('.btn-page-block-multiple'),
+    formSection = $('.form-block'),
+    formBlock = $('.btn-form-block'),
+    formBlockOverlay = $('.btn-form-block-overlay'),
+    formBlockSpinner = $('.btn-form-block-spinner'),
+    formBlockCustom = $('.btn-form-block-custom'),
+    formBlockMultiple = $('.btn-form-block-multiple');
+
+  // Block UI
+  // --------------------------------------------------------------------
+
+  // Default
+  if (sectionBlock.length && section.length) {
+    sectionBlock.on('click', function () {
+      $('#section-block').block({
+        message: '<div class="spinner-border text-white" role="status"></div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        }
+      });
+    });
+  }
+  // Overlay Color
+  if (sectionBlockOverlay.length && section.length) {
+    sectionBlockOverlay.on('click', function () {
+      $('#section-block').block({
+        message: '<div class="spinner-border text-primary" role="status"></div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          border: '0'
+        },
+        overlayCSS: {
+          backgroundColor: '#fff',
+          opacity: 0.8
+        }
+      });
+    });
+  }
+  // Custom Spinner
+  if (sectionBlockSpinner.length && section.length) {
+    sectionBlockSpinner.on('click', function () {
+      $('#section-block').block({
+        message:
+          '<div class="sk-wave mx-auto"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        }
+      });
+    });
+  }
+  // Custom Message
+  if (sectionBlockCustom.length && section.length) {
+    sectionBlockCustom.on('click', function () {
+      $('#section-block').block({
+        message:
+          '<div class="d-flex justify-content-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          color: '#fff',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        }
+      });
+    });
+  }
+  // Multiple Message
+  if (sectionBlockMultiple.length && section.length) {
+    sectionBlockMultiple.on('click', function () {
+      $('#section-block').block({
+        message:
+          '<div class="d-flex justify-content-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
+        css: {
+          backgroundColor: 'transparent',
+          color: '#fff',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        },
+        timeout: 1000,
+        onUnblock: function () {
+          $('#section-block').block({
+            message: '<p class="mb-0">Almost Done...</p>',
+            timeout: 1000,
+            css: {
+              backgroundColor: 'transparent',
+              color: '#fff',
+              border: '0'
+            },
+            overlayCSS: {
+              opacity: 0.25
+            },
+            onUnblock: function () {
+              $('#section-block').block({
+                message: '<div class="p-3 bg-success">Success</div>',
+                timeout: 500,
+                css: {
+                  backgroundColor: 'transparent',
+                  color: '#fff',
+                  border: '0'
+                },
+                overlayCSS: {
+                  opacity: 0.25
+                }
+              });
+            }
+          });
+        }
+      });
+    });
+  }
+
+  // Card Blocking
+  // --------------------------------------------------------------------
+
+  // Default
+  if (cardBlock.length && cardSection.length) {
+    cardBlock.on('click', function () {
+      $('#card-block').block({
+        message: '<div class="spinner-border text-white" role="status"></div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        }
+      });
+    });
+  }
+  // Overlay Color
+  if (cardBlockOverlay.length && cardSection.length) {
+    cardBlockOverlay.on('click', function () {
+      $('#card-block').block({
+        message: '<div class="spinner-border text-primary" role="status"></div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          border: '0'
+        },
+        overlayCSS: {
+          backgroundColor: '#fff',
+          opacity: 0.8
+        }
+      });
+    });
+  }
+  // Custom Spinner
+  if (cardBlockSpinner.length && cardSection.length) {
+    cardBlockSpinner.on('click', function () {
+      $('#card-block').block({
+        message:
+          '<div class="sk-wave mx-auto"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          color: '#fff',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        }
+      });
+    });
+  }
+  // Custom Message
+  if (cardBlockCustom.length && cardSection.length) {
+    cardBlockCustom.on('click', function () {
+      $('#card-block').block({
+        message:
+          '<div class="d-flex justify-content-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          color: '#fff',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        }
+      });
+    });
+  }
+  // Multiple Message
+  if (cardBlockMultiple.length && cardSection.length) {
+    cardBlockMultiple.on('click', function () {
+      $('#card-block').block({
+        message:
+          '<div class="d-flex justify-content-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
+        css: {
+          backgroundColor: 'transparent',
+          color: '#fff',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        },
+        timeout: 1000,
+        onUnblock: function () {
+          $('#card-block').block({
+            message: '<p class="mb-0">Almost Done...</p>',
+            timeout: 1000,
+            css: {
+              backgroundColor: 'transparent',
+              color: '#fff',
+              border: '0'
+            },
+            overlayCSS: {
+              opacity: 0.25
+            },
+            onUnblock: function () {
+              $('#card-block').block({
+                message: '<div class="p-3 bg-success">Success</div>',
+                timeout: 500,
+                css: {
+                  backgroundColor: 'transparent',
+                  color: '#fff',
+                  border: '0'
+                },
+                overlayCSS: {
+                  opacity: 0.25
+                }
+              });
+            }
+          });
+        }
+      });
+    });
+  }
+
+  // Page Blocking
+  // --------------------------------------------------------------------
+
+  // Default
+  if (pageBlock.length) {
+    pageBlock.on('click', function () {
+      $.blockUI({
+        message: '<div class="spinner-border text-white" role="status"></div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        }
+      });
+    });
+  }
+  // Overlay Color
+  if (pageBlockOverlay.length) {
+    pageBlockOverlay.on('click', function () {
+      $.blockUI({
+        message: '<div class="spinner-border text-primary" role="status"></div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          border: '0'
+        },
+        overlayCSS: {
+          backgroundColor: '#fff',
+          opacity: 0.8
+        }
+      });
+    });
+  }
+  // Custom Spinner
+  if (pageBlockSpinner.length) {
+    pageBlockSpinner.on('click', function () {
+      $.blockUI({
+        message:
+          '<div class="sk-wave mx-auto"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        }
+      });
+    });
+  }
+  // Custom Message
+  if (pageBlockCustom.length) {
+    pageBlockCustom.on('click', function () {
+      $.blockUI({
+        message:
+          '<div class="d-flex justify-content-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          color: '#fff',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        }
+      });
+    });
+  }
+  // Multiple Message
+  if (pageBlockMultiple.length) {
+    pageBlockMultiple.on('click', function () {
+      $.blockUI({
+        message:
+          '<div class="d-flex justify-content-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
+        css: {
+          backgroundColor: 'transparent',
+          color: '#fff',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        },
+        timeout: 1000,
+        onUnblock: function () {
+          $.blockUI({
+            message: '<p class="mb-0">Almost Done...</p>',
+            timeout: 1000,
+            css: {
+              backgroundColor: 'transparent',
+              color: '#fff',
+              border: '0'
+            },
+            overlayCSS: {
+              opacity: 0.5
+            },
+            onUnblock: function () {
+              $.blockUI({
+                message: '<div class="p-3 bg-success">Success</div>',
+                timeout: 500,
+                css: {
+                  backgroundColor: 'transparent',
+                  color: '#fff',
+                  border: '0'
+                },
+                overlayCSS: {
+                  opacity: 0.5
+                }
+              });
+            }
+          });
+        }
+      });
+    });
+  }
+
+  // Form Blocking
+  // --------------------------------------------------------------------
+
+  // Default
+  if (formBlock.length && formSection.length) {
+    formBlock.on('click', function () {
+      formSection.block({
+        message: '<div class="spinner-border text-white" role="status"></div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          color: '#fff',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        }
+      });
+    });
+  }
+  // Overlay Color
+  if (formBlockOverlay.length && formSection.length) {
+    formBlockOverlay.on('click', function () {
+      formSection.block({
+        message: '<div class="spinner-border text-primary" role="status"></div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          border: '0'
+        },
+        overlayCSS: {
+          backgroundColor: '#fff',
+          opacity: 0.8
+        }
+      });
+    });
+  }
+  // Custom Spinner
+  if (formBlockSpinner.length && formSection.length) {
+    formBlockSpinner.on('click', function () {
+      formSection.block({
+        message:
+          '<div class="sk-wave mx-auto"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          color: '#fff',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        }
+      });
+    });
+  }
+  // Custom Message
+  if (formBlockCustom.length && formSection.length) {
+    formBlockCustom.on('click', function () {
+      formSection.block({
+        message:
+          '<div class="d-flex justify-content-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          color: '#fff',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        }
+      });
+    });
+  }
+  // Multiple Message
+  if (formBlockMultiple.length && formSection.length) {
+    formBlockMultiple.on('click', function () {
+      formSection.block({
+        message:
+          '<div class="d-flex justify-content-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
+        css: {
+          backgroundColor: 'transparent',
+          color: '#fff',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        },
+        timeout: 1000,
+        onUnblock: function () {
+          formSection.block({
+            message: '<p class="mb-0">Almost Done...</p>',
+            timeout: 1000,
+            css: {
+              backgroundColor: 'transparent',
+              border: '0'
+            },
+            overlayCSS: {
+              opacity: 0.25
+            },
+            onUnblock: function () {
+              formSection.block({
+                message: '<div class="p-3 bg-success">Success</div>',
+                timeout: 500,
+                css: {
+                  backgroundColor: 'transparent',
+                  border: '0'
+                },
+                overlayCSS: {
+                  opacity: 0.25
+                }
+              });
+            }
+          });
+        }
+      });
+    });
+  }
+});

httpdocs/themes/vuexy/js/extended-ui-drag-and-drop.js

@@ -0,0 +1,92 @@
+/**
+ * Drag & Drop
+ */
+'use strict';
+
+(function () {
+  const cardEl = document.getElementById('sortable-cards'),
+    pendingTasks = document.getElementById('pending-tasks'),
+    completedTasks = document.getElementById('completed-tasks'),
+    cloneSource1 = document.getElementById('clone-source-1'),
+    cloneSource2 = document.getElementById('clone-source-2'),
+    handleList1 = document.getElementById('handle-list-1'),
+    handleList2 = document.getElementById('handle-list-2'),
+    imageList1 = document.getElementById('image-list-1'),
+    imageList2 = document.getElementById('image-list-2');
+
+  // Cards
+  // --------------------------------------------------------------------
+  if (cardEl) {
+    Sortable.create(cardEl);
+  }
+
+  // Images
+  // --------------------------------------------------------------------
+  if (imageList1) {
+    Sortable.create(imageList1, {
+      animation: 150,
+      group: 'imgList'
+    });
+  }
+  if (imageList2) {
+    Sortable.create(imageList2, {
+      animation: 150,
+      group: 'imgList'
+    });
+  }
+
+  // Cloning
+  // --------------------------------------------------------------------
+  if (cloneSource1) {
+    Sortable.create(cloneSource1, {
+      animation: 150,
+      group: {
+        name: 'cloneList',
+        pull: 'clone',
+        revertClone: true
+      }
+    });
+  }
+  if (cloneSource2) {
+    Sortable.create(cloneSource2, {
+      animation: 150,
+      group: {
+        name: 'cloneList',
+        pull: 'clone',
+        revertClone: true
+      }
+    });
+  }
+
+  // Multiple
+  // --------------------------------------------------------------------
+  if (pendingTasks) {
+    Sortable.create(pendingTasks, {
+      animation: 150,
+      group: 'taskList'
+    });
+  }
+  if (completedTasks) {
+    Sortable.create(completedTasks, {
+      animation: 150,
+      group: 'taskList'
+    });
+  }
+
+  // Handles
+  // --------------------------------------------------------------------
+  if (handleList1) {
+    Sortable.create(handleList1, {
+      animation: 150,
+      group: 'handleList',
+      handle: '.drag-handle'
+    });
+  }
+  if (handleList2) {
+    Sortable.create(handleList2, {
+      animation: 150,
+      group: 'handleList',
+      handle: '.drag-handle'
+    });
+  }
+})();

httpdocs/themes/vuexy/js/extended-ui-media-player.js

@@ -0,0 +1,10 @@
+/**
+ * Media Player
+ */
+
+'use strict';
+
+(function () {
+  const videoPlayer = new Plyr('#plyr-video-player');
+  const audioPlayer = new Plyr('#plyr-audio-player');
+})();

httpdocs/themes/vuexy/js/extended-ui-misc-clipboardjs.js

@@ -0,0 +1,23 @@
+/**
+ * Clipboard
+ */
+
+'use strict';
+
+(function () {
+  const clipboardList = [].slice.call(document.querySelectorAll('.clipboard-btn'));
+  if (ClipboardJS) {
+    clipboardList.map(function (clipboardEl) {
+      const clipboard = new ClipboardJS(clipboardEl);
+      clipboard.on('success', function (e) {
+        if (e.action == 'copy') {
+          toastr['success']('', 'Copied to Clipboard!!');
+        }
+      });
+    });
+  } else {
+    clipboardList.map(function (clipboardEl) {
+      clipboardEl.setAttribute('disabled', true);
+    });
+  }
+})();

httpdocs/themes/vuexy/js/extended-ui-misc-idle-timer.js

@@ -0,0 +1,212 @@
+/**
+ * Ideal Timer (jquery)
+ */
+
+'use strict';
+
+$(function () {
+  var timerDoc = $('#document-Status'),
+    btnPause = $('#document-Pause'),
+    btnResume = $('#document-Resume'),
+    btnElapsed = $('#document-Elapsed'),
+    btnDestroy = $('#document-Destroy'),
+    btnInit = $('#document-Init');
+
+  // Document 5 Sec Timeout
+  // --------------------------------------------------------------------
+  if (timerDoc.length) {
+    var docTimeout = 5000;
+    // idle/active events
+    $(document).on('idle.idleTimer', function (event, elem, obj) {
+      timerDoc
+        .val(function (i, value) {
+          return value + 'Idle @ ' + moment().format() + ' \n';
+        })
+        .removeClass('alert-success')
+        .addClass('alert-warning');
+    });
+    $(document).on('active.idleTimer', function (event, elem, obj, e) {
+      timerDoc
+        .val(function (i, value) {
+          return value + 'Active [' + e.type + '] [' + e.target.nodeName + '] @ ' + moment().format() + ' \n';
+        })
+        .addClass('alert-success')
+        .removeClass('alert-warning');
+    });
+
+    // button events
+    btnPause.on('click', function () {
+      // Pause
+      $(document).idleTimer('pause');
+      timerDoc.val(function (i, value) {
+        return value + 'Paused @ ' + moment().format() + ' \n';
+      });
+      $(this).blur();
+      return false;
+    });
+    btnResume.on('click', function () {
+      // Resume
+      $(document).idleTimer('resume');
+      timerDoc.val(function (i, value) {
+        return value + 'Resumed @ ' + moment().format() + ' \n';
+      });
+      $(this).blur();
+      return false;
+    });
+    btnElapsed.on('click', function () {
+      // Elapsed
+      timerDoc.val(function (i, value) {
+        return value + 'Elapsed (since becoming active): ' + $(document).idleTimer('getElapsedTime') + ' \n';
+      });
+      $(this).blur();
+      return false;
+    });
+    btnDestroy.on('click', function () {
+      // Destroy
+      $(document).idleTimer('destroy');
+      timerDoc
+        .val(function (i, value) {
+          return value + 'Destroyed: @ ' + moment().format() + ' \n';
+        })
+        .removeClass('alert-success')
+        .removeClass('alert-warning');
+      $(this).blur();
+      return false;
+    });
+    btnInit.on('click', function () {
+      // Initialize
+      // show init with object
+      $(document).idleTimer({
+        timeout: docTimeout
+      });
+      timerDoc.val(function (i, value) {
+        return value + 'Init: @ ' + moment().format() + ' \n';
+      });
+
+      // Apply classes for default state
+      if ($(document).idleTimer('isIdle')) {
+        timerDoc.removeClass('alert-success').addClass('alert-warning');
+      } else {
+        timerDoc.addClass('alert-success').removeClass('alert-warning');
+      }
+      $(this).blur();
+      return false;
+    });
+
+    // Clear old statuses
+    timerDoc.val('');
+
+    // Start timeout, passing no options
+    $(document).idleTimer(docTimeout);
+
+    // style based on state
+    if ($(document).idleTimer('isIdle')) {
+      timerDoc
+        .val(function (i, value) {
+          return value + 'Initial Idle State @ ' + moment().format() + ' \n';
+        })
+        .removeClass('alert-success')
+        .addClass('alert-warning');
+    } else {
+      timerDoc
+        .val(function (i, value) {
+          return value + 'Initial Active State @ ' + moment().format() + ' \n';
+        })
+        .addClass('alert-success')
+        .removeClass('alert-warning');
+    }
+  }
+
+  // Element 3 Sec Timeout
+  // --------------------------------------------------------------------
+  var elementTimer = $('#element-Status'),
+    btnReset = $('#element-Reset'),
+    btnRemaining = $('#element-Remaining'),
+    btnLastActive = $('#element-LastActive'),
+    btnState = $('#element-State');
+  if (elementTimer.length) {
+    var elTimeout = 3000;
+    // idle/active events
+    elementTimer.on('idle.idleTimer', function (event, elem, obj) {
+      event.stopPropagation();
+
+      elementTimer
+        .val(function (i, value) {
+          return value + 'Idle @ ' + moment().format() + ' \n';
+        })
+        .removeClass('alert-success')
+        .addClass('alert-warning');
+    });
+    elementTimer.on('active.idleTimer', function (event) {
+      event.stopPropagation();
+
+      elementTimer
+        .val(function (i, value) {
+          return value + 'Active @ ' + moment().format() + ' \n';
+        })
+        .addClass('alert-success')
+        .removeClass('alert-warning');
+    });
+
+    // button events
+    btnReset.on('click', function () {
+      // Reset
+      elementTimer.idleTimer('reset').val(function (i, value) {
+        return value + 'Reset @ ' + moment().format() + ' \n';
+      });
+
+      // classes for default state
+      if ($('#element-Status').idleTimer('isIdle')) {
+        elementTimer.removeClass('alert-success').addClass('alert-warning');
+      } else {
+        elementTimer.addClass('alert-success').removeClass('alert-warning');
+      }
+      $(this).blur();
+      return false;
+    });
+    btnRemaining.on('click', function () {
+      // Remaining
+      elementTimer.val(function (i, value) {
+        return value + 'Remaining: ' + elementTimer.idleTimer('getRemainingTime') + ' \n';
+      });
+      $(this).blur();
+      return false;
+    });
+    btnLastActive.on('click', function () {
+      // Last Active
+      elementTimer.val(function (i, value) {
+        return value + 'LastActive: ' + elementTimer.idleTimer('getLastActiveTime') + ' \n';
+      });
+      $(this).blur();
+      return false;
+    });
+    btnState.on('click', function () {
+      // State
+      elementTimer.val(function (i, value) {
+        return value + 'State: ' + ($('#element-Status').idleTimer('isIdle') ? 'idle' : 'active') + ' \n';
+      });
+      $(this).blur();
+      return false;
+    });
+
+    // Clear value if cached & start time
+    elementTimer.val('').idleTimer(elTimeout);
+
+    // show initial state
+    if (elementTimer.idleTimer('isIdle')) {
+      elementTimer
+        .val(function (i, value) {
+          return value + 'Initial Idle @ ' + moment().format() + ' \n';
+        })
+        .removeClass('alert-success')
+        .addClass('alert-warning');
+    } else {
+      elementTimer
+        .val(function (i, value) {
+          return value + 'Initial Active @ ' + moment().format() + ' \n';
+        })
+        .addClass('alert-success')
+        .removeClass('alert-warning');
+    }
+  }
+});

httpdocs/themes/vuexy/js/extended-ui-misc-numeraljs.js

@@ -0,0 +1,37 @@
+/**
+ * NumeralJS
+ */
+
+'use strict';
+
+(function () {
+  const dNum = document.querySelector('.dNum'),
+    fNum = document.querySelector('.fNum'),
+    fCurrency = document.querySelector('.fCurrency'),
+    fBytes = document.querySelector('.fBytes'),
+    fPercent = document.querySelector('.fPercent'),
+    fTime = document.querySelector('.fTime'),
+    fExponential = document.querySelector('.fExponential');
+
+  if (dNum) {
+    dNum.innerHTML = numeral(974).value();
+  }
+  if (fNum) {
+    fNum.innerHTML = numeral(1230974).format('0.0a');
+  }
+  if (fCurrency) {
+    fCurrency.innerHTML = numeral(1000.234).format('$0,0.000');
+  }
+  if (fBytes) {
+    fBytes.innerHTML = numeral(3467479682787).format('0.000ib');
+  }
+  if (fPercent) {
+    fPercent.innerHTML = numeral(0.974878234).format('0.000%');
+  }
+  if (fTime) {
+    fTime.innerHTML = numeral(63846).format('00:00:00');
+  }
+  if (fExponential) {
+    fExponential.innerHTML = numeral(1123456789).format('0,0e+0');
+  }
+})();

httpdocs/themes/vuexy/js/extended-ui-perfect-scrollbar.js

@@ -0,0 +1,37 @@
+/**
+ * Perfect Scrollbar
+ */
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function () {
+  (function () {
+    const verticalExample = document.getElementById('vertical-example'),
+      horizontalExample = document.getElementById('horizontal-example'),
+      horizVertExample = document.getElementById('both-scrollbars-example');
+
+    // Vertical Example
+    // --------------------------------------------------------------------
+    if (verticalExample) {
+      new PerfectScrollbar(verticalExample, {
+        wheelPropagation: false
+      });
+    }
+
+    // Horizontal Example
+    // --------------------------------------------------------------------
+    if (horizontalExample) {
+      new PerfectScrollbar(horizontalExample, {
+        wheelPropagation: false,
+        suppressScrollY: true
+      });
+    }
+
+    // Both vertical and Horizontal Example
+    // --------------------------------------------------------------------
+    if (horizVertExample) {
+      new PerfectScrollbar(horizVertExample, {
+        wheelPropagation: false
+      });
+    }
+  })();
+});

httpdocs/themes/vuexy/js/extended-ui-star-ratings.js

@@ -0,0 +1,170 @@
+/**
+ * Star Ratings (jquery)
+ */
+
+'use strict';
+$(function () {
+  var basicRatings = $('.basic-ratings'),
+    customSvg = $('.custom-svg-ratings'),
+    multiColor = $('.multi-color-ratings'),
+    halfStar = $('.half-star-ratings'),
+    fullStar = $('.full-star-ratings'),
+    readOnlyRatings = $('.read-only-ratings'),
+    onSetEvents = $('.onset-event-ratings'),
+    onChangeEvents = $('.onChange-event-ratings'),
+    ratingMethods = $('.methods-ratings'),
+    initializeRatings = $('.btn-initialize'),
+    destroyRatings = $('.btn-destroy'),
+    getRatings = $('.btn-get-rating'),
+    setRatings = $('.btn-set-rating');
+
+  // Basic Ratings
+  // --------------------------------------------------------------------
+  if (basicRatings) {
+    basicRatings.rateYo({
+      rating: 3.6,
+      rtl: isRtl,
+      spacing: '8px'
+    });
+  }
+
+  // Custom SVG Ratings
+  // --------------------------------------------------------------------
+  if (customSvg) {
+    customSvg.rateYo({
+      rating: 3.2,
+      starSvg:
+        "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>" +
+        "<path d='M12 6.76l1.379 4.246h4.465l-3.612 2.625 1.379" +
+        ' 4.246-3.611-2.625-3.612 2.625' +
+        ' 1.379-4.246-3.612-2.625h4.465l1.38-4.246zm0-6.472l-2.833' +
+        ' 8.718h-9.167l7.416 5.389-2.833 8.718 7.417-5.388' +
+        ' 7.416 5.388-2.833-8.718' +
+        " 7.417-5.389h-9.167l-2.833-8.718z'-></path>",
+      rtl: isRtl,
+      spacing: '8px'
+    });
+  }
+
+  // Multi Color Ratings
+  // --------------------------------------------------------------------
+  if (multiColor) {
+    multiColor.rateYo({
+      rtl: isRtl,
+      spacing: '8px',
+      multiColor: {
+        startColor: '#fffca0',
+        endColor: '#ffd950'
+      }
+    });
+  }
+
+  // Half Star Ratings
+  // --------------------------------------------------------------------
+  if (halfStar) {
+    halfStar.rateYo({
+      rtl: isRtl,
+      spacing: '8px',
+
+      rating: 2
+    });
+  }
+
+  // Full Star Ratings
+  // --------------------------------------------------------------------
+  if (fullStar) {
+    fullStar.rateYo({
+      rtl: isRtl,
+      spacing: '8px',
+
+      rating: 2
+    });
+  }
+
+  // Read Only Ratings
+  // --------------------------------------------------------------------
+  if (readOnlyRatings) {
+    readOnlyRatings.rateYo({
+      rating: 2,
+      rtl: isRtl,
+      spacing: '8px'
+    });
+  }
+
+  // Ratings Events
+  // --------------------------------------------------------------------
+
+  // onSet Event
+  if (onSetEvents) {
+    onSetEvents
+      .rateYo({
+        rtl: isRtl,
+        spacing: '8px'
+      })
+      .on('rateyo.set', function (e, data) {
+        alert('The rating is set to ' + data.rating + '!');
+      });
+  }
+
+  // onChange Event
+  if (onChangeEvents) {
+    onChangeEvents
+      .rateYo({
+        rtl: isRtl,
+        spacing: '8px'
+      })
+      .on('rateyo.change', function (e, data) {
+        var rating = data.rating;
+        $(this).parent().find('.counter').text(rating);
+      });
+  }
+
+  // Ratings Methods
+  // --------------------------------------------------------------------
+  if (ratingMethods) {
+    var $instance = ratingMethods.rateYo({
+      rtl: isRtl,
+      spacing: '8px'
+    });
+
+    if (initializeRatings) {
+      initializeRatings.on('click', function () {
+        $instance.rateYo({
+          rtl: isRtl,
+          spacing: '8px'
+        });
+      });
+    }
+
+    if (destroyRatings) {
+      destroyRatings.on('click', function () {
+        if ($instance.hasClass('jq-ry-container')) {
+          $instance.rateYo('destroy');
+        } else {
+          window.alert('Please Initialize Ratings First');
+        }
+      });
+    }
+
+    if (getRatings) {
+      getRatings.on('click', function () {
+        if ($instance.hasClass('jq-ry-container')) {
+          var rating = $instance.rateYo('rating');
+          window.alert('Current Ratings are ' + rating);
+        } else {
+          window.alert('Please Initialize Ratings First');
+        }
+      });
+    }
+
+    if (setRatings) {
+      setRatings.on('click', function () {
+        if ($instance.hasClass('jq-ry-container')) {
+          $instance.rateYo('rating', 1);
+        } else {
+          window.alert('Please Initialize Ratings First');
+        }
+      });
+    }
+  }
+});

httpdocs/themes/vuexy/js/extended-ui-sweetalert2.js

@@ -0,0 +1,558 @@
+/**
+ * Sweet Alerts
+ */
+
+'use strict';
+
+(function () {
+  const basicAlert = document.querySelector('#basic-alert'),
+    withTitle = document.querySelector('#with-title'),
+    footerAlert = document.querySelector('#footer-alert'),
+    htmlAlert = document.querySelector('#html-alert'),
+    positionTopStart = document.querySelector('#position-top-start'),
+    positionTopEnd = document.querySelector('#position-top-end'),
+    positionBottomStart = document.querySelector('#position-bottom-start'),
+    positionBottomEnd = document.querySelector('#position-bottom-end'),
+    bounceInAnimation = document.querySelector('#bounce-in-animation'),
+    fadeInAnimation = document.querySelector('#fade-in-animation'),
+    flipXAnimation = document.querySelector('#flip-x-animation'),
+    tadaAnimation = document.querySelector('#tada-animation'),
+    shakeAnimation = document.querySelector('#shake-animation'),
+    iconSuccess = document.querySelector('#type-success'),
+    iconInfo = document.querySelector('#type-info'),
+    iconWarning = document.querySelector('#type-warning'),
+    iconError = document.querySelector('#type-error'),
+    iconQuestion = document.querySelector('#type-question'),
+    customImage = document.querySelector('#custom-image'),
+    autoClose = document.querySelector('#auto-close'),
+    outsideClick = document.querySelector('#outside-click'),
+    progressSteps = document.querySelector('#progress-steps'),
+    ajaxRequest = document.querySelector('#ajax-request'),
+    confirmText = document.querySelector('#confirm-text'),
+    confirmColor = document.querySelector('#confirm-color');
+
+  // Basic Alerts
+  // --------------------------------------------------------------------
+
+  // Default Alert
+  if (basicAlert) {
+    basicAlert.onclick = function () {
+      Swal.fire({
+        title: 'Any fool can use a computer',
+        customClass: {
+          confirmButton: 'btn btn-primary'
+        },
+        buttonsStyling: false
+      });
+    };
+  }
+
+  // Alert With Title
+  if (withTitle) {
+    withTitle.onclick = function () {
+      Swal.fire({
+        title: 'The Internet?,',
+        text: 'That thing is still around?',
+        customClass: {
+          confirmButton: 'btn btn-primary'
+        },
+        buttonsStyling: false
+      });
+    };
+  }
+
+  // Alert With Footer
+  if (footerAlert) {
+    footerAlert.onclick = function () {
+      Swal.fire({
+        icon: 'error',
+        title: 'Oops...',
+        text: 'Something went wrong!',
+        footer: '<a href>Why do I have this issue?</a>',
+        customClass: {
+          confirmButton: 'btn btn-primary'
+        },
+        buttonsStyling: false
+      });
+    };
+  }
+
+  // Html Alert
+  if (htmlAlert) {
+    htmlAlert.onclick = function () {
+      Swal.fire({
+        title: '<strong>HTML <u>example</u></strong>',
+        icon: 'info',
+        html:
+          'You can use <b>bold text</b>, ' +
+          '<a href="https://pixinvent.com/" target="_blank">links</a> ' +
+          'and other HTML tags',
+        showCloseButton: true,
+        showCancelButton: true,
+        focusConfirm: false,
+        confirmButtonText: '<i class="ti ti-thumb-up"></i> Great!',
+        confirmButtonAriaLabel: 'Thumbs up, great!',
+        cancelButtonText: '<i class="ti ti-thumb-down"></i>',
+        cancelButtonAriaLabel: 'Thumbs down',
+        customClass: {
+          confirmButton: 'btn btn-primary me-3',
+          cancelButton: 'btn btn-label-secondary'
+        },
+        buttonsStyling: false
+      });
+    };
+  }
+
+  // Alerts Positions
+  // --------------------------------------------------------------------
+
+  // Top Start Alert
+  if (positionTopStart) {
+    positionTopStart.onclick = function () {
+      Swal.fire({
+        position: 'top-start',
+        icon: 'success',
+        title: 'Your work has been saved',
+        showConfirmButton: false,
+        timer: 1500,
+        customClass: {
+          confirmButton: 'btn btn-primary'
+        },
+        buttonsStyling: false
+      });
+    };
+  }
+
+  // Top End Alert
+  if (positionTopEnd) {
+    positionTopEnd.onclick = function () {
+      Swal.fire({
+        position: 'top-end',
+        icon: 'success',
+        title: 'Your work has been saved',
+        showConfirmButton: false,
+        timer: 1500,
+        customClass: {
+          confirmButton: 'btn btn-primary'
+        },
+        buttonsStyling: false
+      });
+    };
+  }
+
+  // Bottom Start Alert
+  if (positionBottomStart) {
+    positionBottomStart.onclick = function () {
+      Swal.fire({
+        position: 'bottom-start',
+        icon: 'success',
+        title: 'Your work has been saved',
+        showConfirmButton: false,
+        timer: 1500,
+        customClass: {
+          confirmButton: 'btn btn-primary'
+        },
+        buttonsStyling: false
+      });
+    };
+  }
+
+  // Bottom End Alert
+  if (positionBottomEnd) {
+    positionBottomEnd.onclick = function () {
+      Swal.fire({
+        position: 'bottom-end',
+        icon: 'success',
+        title: 'Your work has been saved',
+        showConfirmButton: false,
+        timer: 1500,
+        customClass: {
+          confirmButton: 'btn btn-primary'
+        },
+        buttonsStyling: false
+      });
+    };
+  }
+
+  // Alerts With Animations
+  // --------------------------------------------------------------------
+
+  // Bounce In Animation
+  if (bounceInAnimation) {
+    bounceInAnimation.onclick = function () {
+      Swal.fire({
+        title: 'Bounce In Animation',
+        showClass: {
+          popup: 'animate__animated animate__bounceIn'
+        },
+        customClass: {
+          confirmButton: 'btn btn-primary'
+        },
+        buttonsStyling: false
+      });
+    };
+  }
+
+  // Fade In Animation
+  if (fadeInAnimation) {
+    fadeInAnimation.onclick = function () {
+      Swal.fire({
+        title: 'Fade In Animation',
+        showClass: {
+          popup: 'animate__animated animate__fadeIn'
+        },
+        customClass: {
+          confirmButton: 'btn btn-primary'
+        },
+        buttonsStyling: false
+      });
+    };
+  }
+
+  // Flip X Animation
+  if (flipXAnimation) {
+    flipXAnimation.onclick = function () {
+      Swal.fire({
+        title: 'Flip In Animation',
+        showClass: {
+          popup: 'animate__animated animate__flipInX'
+        },
+        customClass: {
+          confirmButton: 'btn btn-primary'
+        },
+        buttonsStyling: false
+      });
+    };
+  }
+
+  // Tada Animation
+  if (tadaAnimation) {
+    tadaAnimation.onclick = function () {
+      Swal.fire({
+        title: 'Tada Animation',
+        showClass: {
+          popup: 'animate__animated animate__tada'
+        },
+        customClass: {
+          confirmButton: 'btn btn-primary'
+        },
+        buttonsStyling: false
+      });
+    };
+  }
+
+  // Shake Animation
+  if (shakeAnimation) {
+    shakeAnimation.onclick = function () {
+      Swal.fire({
+        title: 'Shake Animation',
+        showClass: {
+          popup: 'animate__animated animate__shakeX'
+        },
+        customClass: {
+          confirmButton: 'btn btn-primary'
+        },
+        buttonsStyling: false
+      });
+    };
+  }
+
+  // Alert Types
+  // --------------------------------------------------------------------
+
+  // Success Alert
+  if (iconSuccess) {
+    iconSuccess.onclick = function () {
+      Swal.fire({
+        title: 'Good job!',
+        text: 'You clicked the button!',
+        icon: 'success',
+        customClass: {
+          confirmButton: 'btn btn-primary'
+        },
+        buttonsStyling: false
+      });
+    };
+  }
+
+  // Info Alert
+  if (iconInfo) {
+    iconInfo.onclick = function () {
+      Swal.fire({
+        title: 'Info!',
+        text: 'You clicked the button!',
+        icon: 'info',
+        customClass: {
+          confirmButton: 'btn btn-primary'
+        },
+        buttonsStyling: false
+      });
+    };
+  }
+
+  // Warning Alert
+  if (iconWarning) {
+    iconWarning.onclick = function () {
+      Swal.fire({
+        title: 'Warning!',
+        text: ' You clicked the button!',
+        icon: 'warning',
+        customClass: {
+          confirmButton: 'btn btn-primary'
+        },
+        buttonsStyling: false
+      });
+    };
+  }
+
+  // Error Alert
+  if (iconError) {
+    iconError.onclick = function () {
+      Swal.fire({
+        title: 'Error!',
+        text: ' You clicked the button!',
+        icon: 'error',
+        customClass: {
+          confirmButton: 'btn btn-primary'
+        },
+        buttonsStyling: false
+      });
+    };
+  }
+
+  // Question Alert
+  if (iconQuestion) {
+    iconQuestion.onclick = function () {
+      Swal.fire({
+        title: 'Question!',
+        text: ' You clicked the button!',
+        icon: 'question',
+        customClass: {
+          confirmButton: 'btn btn-primary'
+        },
+        buttonsStyling: false
+      });
+    };
+  }
+
+  // Advanced Options
+  // --------------------------------------------------------------------
+
+  //Alert With Custom Icon
+  if (customImage) {
+    customImage.onclick = function () {
+      Swal.fire({
+        title: 'Sweet!',
+        text: 'Modal with a custom image.',
+        imageUrl: assetsPath + 'img/backgrounds/5.jpg',
+        imageWidth: 400,
+        imageAlt: 'Custom image',
+        customClass: {
+          confirmButton: 'btn btn-primary'
+        },
+        buttonsStyling: false
+      });
+    };
+  }
+
+  // Auto Closing Alert
+  if (autoClose) {
+    autoClose.onclick = function () {
+      var timerInterval;
+      Swal.fire({
+        title: 'Auto close alert!',
+        html: 'I will close in <strong></strong> seconds.',
+        timer: 2000,
+        customClass: {
+          confirmButton: 'btn btn-primary'
+        },
+        buttonsStyling: false,
+        willOpen: function () {
+          Swal.showLoading();
+          timerInterval = setInterval(function () {
+            Swal.getHtmlContainer().querySelector('strong').textContent = Swal.getTimerLeft();
+          }, 100);
+        },
+        willClose: function () {
+          clearInterval(timerInterval);
+        }
+      }).then(function (result) {
+        if (
+          // Read more about handling dismissals
+          result.dismiss === Swal.DismissReason.timer
+        ) {
+          console.log('I was closed by the timer');
+        }
+      });
+    };
+  }
+
+  // Close Alert On Backdrop Click
+  if (outsideClick) {
+    outsideClick.onclick = function () {
+      Swal.fire({
+        title: 'Click outside to close!',
+        text: 'This is a cool message!',
+        backdrop: true,
+        allowOutsideClick: true,
+        customClass: {
+          confirmButton: 'btn btn-primary'
+        },
+        buttonsStyling: false
+      });
+    };
+  }
+
+  // Alert With Steps
+  if (progressSteps) {
+    progressSteps.onclick = function () {
+      const steps = ['1', '2', '3'];
+      const swalQueueStep = Swal.mixin({
+        confirmButtonText: 'Forward',
+        cancelButtonText: 'Back',
+        progressSteps: steps,
+        input: 'text',
+        inputAttributes: {
+          required: true
+        },
+        validationMessage: 'This field is required'
+      });
+
+      async function backAndForward() {
+        const values = [];
+        let currentStep;
+
+        for (currentStep = 0; currentStep < steps.length; ) {
+          const result = await new swalQueueStep({
+            title: 'Question ' + steps[currentStep],
+            showCancelButton: currentStep > 0,
+            currentProgressStep: currentStep
+          });
+
+          if (result.value) {
+            values[currentStep] = result.value;
+            currentStep++;
+          } else if (result.dismiss === 'cancel') {
+            currentStep--;
+          }
+        }
+
+        Swal.fire(JSON.stringify(values));
+      }
+
+      backAndForward();
+    };
+  }
+
+  // Alert With Ajax Request
+  if (ajaxRequest) {
+    ajaxRequest.onclick = function () {
+      Swal.fire({
+        title: 'Submit your Github username',
+        input: 'text',
+        inputAttributes: {
+          autocapitalize: 'off'
+        },
+        showCancelButton: true,
+        confirmButtonText: 'Look up',
+        showLoaderOnConfirm: true,
+        customClass: {
+          confirmButton: 'btn btn-primary me-3',
+          cancelButton: 'btn btn-label-danger'
+        },
+        preConfirm: login => {
+          return fetch('//api.github.com/users/' + login)
+            .then(response => {
+              if (!response.ok) {
+                throw new Error(response.statusText);
+              }
+              return response.json();
+            })
+            .catch(error => {
+              Swal.showValidationMessage('Request failed:' + error);
+            });
+        },
+        backdrop: true,
+        allowOutsideClick: () => !Swal.isLoading()
+      }).then(result => {
+        if (result.isConfirmed) {
+          Swal.fire({
+            title: result.value.login + "'s avatar",
+            imageUrl: result.value.avatar_url,
+            customClass: {
+              confirmButtonText: 'Close me!',
+              confirmButton: 'btn btn-primary'
+            }
+          });
+        }
+      });
+    };
+  }
+
+  // Alert With Functional Confirm Button
+  if (confirmText) {
+    confirmText.onclick = function () {
+      Swal.fire({
+        title: 'Are you sure?',
+        text: "You won't be able to revert this!",
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonText: 'Yes, delete it!',
+        customClass: {
+          confirmButton: 'btn btn-primary me-3',
+          cancelButton: 'btn btn-label-secondary'
+        },
+        buttonsStyling: false
+      }).then(function (result) {
+        if (result.value) {
+          Swal.fire({
+            icon: 'success',
+            title: 'Deleted!',
+            text: 'Your file has been deleted.',
+            customClass: {
+              confirmButton: 'btn btn-success'
+            }
+          });
+        }
+      });
+    };
+  }
+
+  // Alert With Functional Confirm Cancel Button
+  if (confirmColor) {
+    confirmColor.onclick = function () {
+      Swal.fire({
+        title: 'Are you sure?',
+        text: "You won't be able to revert this!",
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonText: 'Yes, delete it!',
+        customClass: {
+          confirmButton: 'btn btn-primary me-3',
+          cancelButton: 'btn btn-label-secondary'
+        },
+        buttonsStyling: false
+      }).then(function (result) {
+        if (result.value) {
+          Swal.fire({
+            icon: 'success',
+            title: 'Deleted!',
+            text: 'Your file has been deleted.',
+            customClass: {
+              confirmButton: 'btn btn-success'
+            }
+          });
+        } else if (result.dismiss === Swal.DismissReason.cancel) {
+          Swal.fire({
+            title: 'Cancelled',
+            text: 'Your imaginary file is safe :)',
+            icon: 'error',
+            customClass: {
+              confirmButton: 'btn btn-success'
+            }
+          });
+        }
+      });
+    };
+  }
+})();

httpdocs/themes/vuexy/js/extended-ui-timeline.js

@@ -0,0 +1,16 @@
+/**
+ * Timeline
+ */
+
+'use strict';
+
+(function () {
+  // Init Animation on scroll
+  AOS.init({
+    disable: function () {
+      const maxWidth = 1024;
+      return window.innerWidth < maxWidth;
+    },
+    once: true
+  });
+})();

httpdocs/themes/vuexy/js/extended-ui-tour.js

@@ -0,0 +1,194 @@
+/**
+ * Tour
+ */
+
+'use strict';
+
+(function () {
+  const startBtn = document.querySelector('#shepherd-example');
+
+  function setupTour(tour) {
+    const backBtnClass = 'btn btn-sm btn-label-secondary md-btn-flat',
+      nextBtnClass = 'btn btn-sm btn-primary btn-next';
+    tour.addStep({
+      title: 'Navbar',
+      text: 'This is your navbar',
+      attachTo: { element: '.navbar', on: 'bottom' },
+      buttons: [
+        {
+          action: tour.cancel,
+          classes: backBtnClass,
+          text: 'Skip'
+        },
+        {
+          text: 'Next',
+          classes: nextBtnClass,
+          action: tour.next
+        }
+      ]
+    });
+    tour.addStep({
+      title: 'Card',
+      text: 'This is a card',
+      attachTo: { element: '.tour-card', on: 'top' },
+      buttons: [
+        {
+          text: 'Skip',
+          classes: backBtnClass,
+          action: tour.cancel
+        },
+        {
+          text: 'Back',
+          classes: backBtnClass,
+          action: tour.back
+        },
+        {
+          text: 'Next',
+          classes: nextBtnClass,
+          action: tour.next
+        }
+      ]
+    });
+    tour.addStep({
+      title: 'Footer',
+      text: 'This is the Footer',
+      attachTo: { element: '.footer', on: 'top' },
+      buttons: [
+        {
+          text: 'Skip',
+          classes: backBtnClass,
+          action: tour.cancel
+        },
+        {
+          text: 'Back',
+          classes: backBtnClass,
+          action: tour.back
+        },
+        {
+          text: 'Next',
+          classes: nextBtnClass,
+          action: tour.next
+        }
+      ]
+    });
+    tour.addStep({
+      title: 'Upgrade',
+      text: 'Click here to upgrade plan',
+      attachTo: { element: '.footer-link', on: 'top' },
+      buttons: [
+        {
+          text: 'Back',
+          classes: backBtnClass,
+          action: tour.back
+        },
+        {
+          text: 'Finish',
+          classes: nextBtnClass,
+          action: tour.cancel
+        }
+      ]
+    });
+
+    return tour;
+  }
+
+  if (startBtn) {
+    // On start tour button click
+    startBtn.onclick = function () {
+      const tourVar = new Shepherd.Tour({
+        defaultStepOptions: {
+          scrollTo: false,
+          cancelIcon: {
+            enabled: true
+          }
+        },
+        useModalOverlay: true
+      });
+
+      setupTour(tourVar).start();
+    };
+  }
+
+  // ! Documentation Tour only
+  const startBtnDocs = document.querySelector('#shepherd-docs-example');
+
+  function setupTourDocs(tour) {
+    const backBtnClass = 'btn btn-sm btn-label-secondary md-btn-flat',
+      nextBtnClass = 'btn btn-sm btn-primary btn-next';
+    tour.addStep({
+      title: 'Navbar',
+      text: 'This is your navbar',
+      attachTo: { element: '.navbar', on: 'bottom' },
+      buttons: [
+        {
+          action: tour.cancel,
+          classes: backBtnClass,
+          text: 'Skip'
+        },
+        {
+          text: 'Next',
+          classes: nextBtnClass,
+          action: tour.next
+        }
+      ]
+    });
+    tour.addStep({
+      title: 'Footer',
+      text: 'This is the Footer',
+      attachTo: { element: '.footer', on: 'top' },
+      buttons: [
+        {
+          text: 'Skip',
+          classes: backBtnClass,
+          action: tour.cancel
+        },
+        {
+          text: 'Back',
+          classes: backBtnClass,
+          action: tour.back
+        },
+        {
+          text: 'Next',
+          classes: nextBtnClass,
+          action: tour.next
+        }
+      ]
+    });
+    tour.addStep({
+      title: 'Social Link',
+      text: 'Click here share on social media',
+      attachTo: { element: '.footer-link', on: 'top' },
+      buttons: [
+        {
+          text: 'Back',
+          classes: backBtnClass,
+          action: tour.back
+        },
+        {
+          text: 'Finish',
+          classes: nextBtnClass,
+          action: tour.cancel
+        }
+      ]
+    });
+
+    return tour;
+  }
+
+  if (startBtnDocs) {
+    // On start tour button click
+    startBtnDocs.onclick = function () {
+      const tourDocsVar = new Shepherd.Tour({
+        defaultStepOptions: {
+          scrollTo: false,
+          cancelIcon: {
+            enabled: true
+          }
+        },
+        useModalOverlay: true
+      });
+
+      setupTourDocs(tourDocsVar).start();
+    };
+  }
+})();

httpdocs/themes/vuexy/js/extended-ui-treeview.js

@@ -0,0 +1,440 @@
+/**
+ * Treeview (jquery)
+ */
+
+'use strict';
+
+$(function () {
+  var theme = $('html').hasClass('light-style') ? 'default' : 'default-dark',
+    basicTree = $('#jstree-basic'),
+    customIconsTree = $('#jstree-custom-icons'),
+    contextMenu = $('#jstree-context-menu'),
+    dragDrop = $('#jstree-drag-drop'),
+    checkboxTree = $('#jstree-checkbox'),
+    ajaxTree = $('#jstree-ajax');
+
+  // Basic
+  // --------------------------------------------------------------------
+  if (basicTree.length) {
+    basicTree.jstree({
+      core: {
+        themes: {
+          name: theme
+        }
+      }
+    });
+  }
+
+  // Custom Icons
+  // --------------------------------------------------------------------
+  if (customIconsTree.length) {
+    customIconsTree.jstree({
+      core: {
+        themes: {
+          name: theme
+        },
+        data: [
+          {
+            text: 'css',
+            children: [
+              {
+                text: 'app.css',
+                type: 'css'
+              },
+              {
+                text: 'style.css',
+                type: 'css'
+              }
+            ]
+          },
+          {
+            text: 'img',
+            state: {
+              opened: true
+            },
+            children: [
+              {
+                text: 'bg.jpg',
+                type: 'img'
+              },
+              {
+                text: 'logo.png',
+                type: 'img'
+              },
+              {
+                text: 'avatar.png',
+                type: 'img'
+              }
+            ]
+          },
+          {
+            text: 'js',
+            state: {
+              opened: true
+            },
+            children: [
+              {
+                text: 'jquery.js',
+                type: 'js'
+              },
+              {
+                text: 'app.js',
+                type: 'js'
+              }
+            ]
+          },
+          {
+            text: 'index.html',
+            type: 'html'
+          },
+          {
+            text: 'page-one.html',
+            type: 'html'
+          },
+          {
+            text: 'page-two.html',
+            type: 'html'
+          }
+        ]
+      },
+      plugins: ['types'],
+      types: {
+        default: {
+          icon: 'ti ti-folder'
+        },
+        html: {
+          icon: 'ti ti-brand-html5 text-danger'
+        },
+        css: {
+          icon: 'ti ti-brand-css3 text-info'
+        },
+        img: {
+          icon: 'ti ti-photo text-success'
+        },
+        js: {
+          icon: 'ti ti-brand-javascript text-warning'
+        }
+      }
+    });
+  }
+
+  // Context Menu
+  // --------------------------------------------------------------------
+  if (contextMenu.length) {
+    contextMenu.jstree({
+      core: {
+        themes: {
+          name: theme
+        },
+        check_callback: true,
+        data: [
+          {
+            text: 'css',
+            children: [
+              {
+                text: 'app.css',
+                type: 'css'
+              },
+              {
+                text: 'style.css',
+                type: 'css'
+              }
+            ]
+          },
+          {
+            text: 'img',
+            state: {
+              opened: true
+            },
+            children: [
+              {
+                text: 'bg.jpg',
+                type: 'img'
+              },
+              {
+                text: 'logo.png',
+                type: 'img'
+              },
+              {
+                text: 'avatar.png',
+                type: 'img'
+              }
+            ]
+          },
+          {
+            text: 'js',
+            state: {
+              opened: true
+            },
+            children: [
+              {
+                text: 'jquery.js',
+                type: 'js'
+              },
+              {
+                text: 'app.js',
+                type: 'js'
+              }
+            ]
+          },
+          {
+            text: 'index.html',
+            type: 'html'
+          },
+          {
+            text: 'page-one.html',
+            type: 'html'
+          },
+          {
+            text: 'page-two.html',
+            type: 'html'
+          }
+        ]
+      },
+      plugins: ['types', 'contextmenu'],
+      types: {
+        default: {
+          icon: 'ti ti-folder'
+        },
+        html: {
+          icon: 'ti ti-brand-html5 text-danger'
+        },
+        css: {
+          icon: 'ti ti-brand-css3 text-info'
+        },
+        img: {
+          icon: 'ti ti-photo text-success'
+        },
+        js: {
+          icon: 'ti ti-brand-javascript text-warning'
+        }
+      }
+    });
+  }
+
+  // Drag Drop
+  // --------------------------------------------------------------------
+  if (dragDrop.length) {
+    dragDrop.jstree({
+      core: {
+        themes: {
+          name: theme
+        },
+        check_callback: true,
+        data: [
+          {
+            text: 'css',
+            children: [
+              {
+                text: 'app.css',
+                type: 'css'
+              },
+              {
+                text: 'style.css',
+                type: 'css'
+              }
+            ]
+          },
+          {
+            text: 'img',
+            state: {
+              opened: true
+            },
+            children: [
+              {
+                text: 'bg.jpg',
+                type: 'img'
+              },
+              {
+                text: 'logo.png',
+                type: 'img'
+              },
+              {
+                text: 'avatar.png',
+                type: 'img'
+              }
+            ]
+          },
+          {
+            text: 'js',
+            state: {
+              opened: true
+            },
+            children: [
+              {
+                text: 'jquery.js',
+                type: 'js'
+              },
+              {
+                text: 'app.js',
+                type: 'js'
+              }
+            ]
+          },
+          {
+            text: 'index.html',
+            type: 'html'
+          },
+          {
+            text: 'page-one.html',
+            type: 'html'
+          },
+          {
+            text: 'page-two.html',
+            type: 'html'
+          }
+        ]
+      },
+      plugins: ['types', 'dnd'],
+      types: {
+        default: {
+          icon: 'ti ti-folder'
+        },
+        html: {
+          icon: 'ti ti-brand-html5 text-danger'
+        },
+        css: {
+          icon: 'ti ti-brand-css3 text-info'
+        },
+        img: {
+          icon: 'ti ti-photo text-success'
+        },
+        js: {
+          icon: 'ti ti-brand-javascript text-warning'
+        }
+      }
+    });
+  }
+
+  // Checkbox
+  // --------------------------------------------------------------------
+  if (checkboxTree.length) {
+    checkboxTree.jstree({
+      core: {
+        themes: {
+          name: theme
+        },
+        data: [
+          {
+            text: 'css',
+            children: [
+              {
+                text: 'app.css',
+                type: 'css'
+              },
+              {
+                text: 'style.css',
+                type: 'css'
+              }
+            ]
+          },
+          {
+            text: 'img',
+            state: {
+              opened: true
+            },
+            children: [
+              {
+                text: 'bg.jpg',
+                type: 'img'
+              },
+              {
+                text: 'logo.png',
+                type: 'img'
+              },
+              {
+                text: 'avatar.png',
+                type: 'img'
+              }
+            ]
+          },
+          {
+            text: 'js',
+            state: {
+              opened: true
+            },
+            children: [
+              {
+                text: 'jquery.js',
+                type: 'js'
+              },
+              {
+                text: 'app.js',
+                type: 'js'
+              }
+            ]
+          },
+          {
+            text: 'index.html',
+            type: 'html'
+          },
+          {
+            text: 'page-one.html',
+            type: 'html'
+          },
+          {
+            text: 'page-two.html',
+            type: 'html'
+          }
+        ]
+      },
+      plugins: ['types', 'checkbox', 'wholerow'],
+      types: {
+        default: {
+          icon: 'ti ti-folder'
+        },
+        html: {
+          icon: 'ti ti-brand-html5 text-danger'
+        },
+        css: {
+          icon: 'ti ti-brand-css3 text-info'
+        },
+        img: {
+          icon: 'ti ti-photo text-success'
+        },
+        js: {
+          icon: 'ti ti-brand-javascript text-warning'
+        }
+      }
+    });
+  }
+
+  // Ajax Example
+  // --------------------------------------------------------------------
+  if (ajaxTree.length) {
+    ajaxTree.jstree({
+      core: {
+        themes: {
+          name: theme
+        },
+        data: {
+          url: assetsPath + 'json/jstree-data.json',
+          dataType: 'json',
+          data: function (node) {
+            return {
+              id: node.id
+            };
+          }
+        }
+      },
+      plugins: ['types', 'state'],
+      types: {
+        default: {
+          icon: 'ti ti-folder'
+        },
+        html: {
+          icon: 'ti ti-brand-html5 text-danger'
+        },
+        css: {
+          icon: 'ti ti-brand-css3 text-info'
+        },
+        img: {
+          icon: 'ti ti-photo text-success'
+        },
+        js: {
+          icon: 'ti ti-brand-javascript text-warning'
+        }
+      }
+    });
+  }
+});

httpdocs/themes/vuexy/js/form-basic-inputs.js

@@ -0,0 +1,11 @@
+/**
+ * Form Basic Inputs
+ */
+
+'use strict';
+
+(function () {
+  // Indeterminate checkbox
+  const checkbox = document.getElementById('defaultCheck2');
+  checkbox.indeterminate = true;
+})();

httpdocs/themes/vuexy/js/form-layouts.js

@@ -0,0 +1,115 @@
+/**
+ * Form Layout Vertical
+ */
+'use strict';
+
+(function () {
+  const phoneMaskList = document.querySelectorAll('.phone-mask'),
+    creditCardMask = document.querySelector('.credit-card-mask'),
+    expiryDateMask = document.querySelector('.expiry-date-mask'),
+    cvvMask = document.querySelector('.cvv-code-mask'),
+    datepickerList = document.querySelectorAll('.dob-picker'),
+    formCheckInputPayment = document.querySelectorAll('.form-check-input-payment');
+
+  // Phone Number
+  if (phoneMaskList) {
+    phoneMaskList.forEach(function (phoneMask) {
+      new Cleave(phoneMask, {
+        phone: true,
+        phoneRegionCode: 'US'
+      });
+    });
+  }
+
+  // Credit Card
+  if (creditCardMask) {
+    new Cleave(creditCardMask, {
+      creditCard: true,
+      onCreditCardTypeChanged: function (type) {
+        if (type != '' && type != 'unknown') {
+          document.querySelector('.card-type').innerHTML =
+            '<img src="' + assetsPath + 'img/icons/payments/' + type + '-cc.png" height="28"/>';
+        } else {
+          document.querySelector('.card-type').innerHTML = '';
+        }
+      }
+    });
+  }
+
+  // Expiry Date Mask
+  if (expiryDateMask) {
+    new Cleave(expiryDateMask, {
+      date: true,
+      delimiter: '/',
+      datePattern: ['m', 'y']
+    });
+  }
+
+  // CVV
+  if (cvvMask) {
+    new Cleave(cvvMask, {
+      numeral: true,
+      numeralPositiveOnly: true
+    });
+  }
+
+  // Flat Picker Birth Date
+  if (datepickerList) {
+    datepickerList.forEach(function (datepicker) {
+      datepicker.flatpickr({
+        monthSelectorType: 'static'
+      });
+    });
+  }
+
+  // Toggle CC Payment Method based on selected option
+  if (formCheckInputPayment) {
+    formCheckInputPayment.forEach(function (paymentInput) {
+      paymentInput.addEventListener('change', function (e) {
+        const paymentInputValue = e.target.value;
+        if (paymentInputValue === 'credit-card') {
+          document.querySelector('#form-credit-card').classList.remove('d-none');
+        } else {
+          document.querySelector('#form-credit-card').classList.add('d-none');
+        }
+      });
+    });
+  }
+})();
+
+// select2 (jquery)
+$(function () {
+  // Form sticky actions
+  var topSpacing;
+  const stickyEl = $('.sticky-element');
+
+  // Init custom option check
+  window.Helpers.initCustomOptionCheck();
+
+  // Set topSpacing if the navbar is fixed
+  if (Helpers.isNavbarFixed()) {
+    topSpacing = $('.layout-navbar').height() + 7;
+  } else {
+    topSpacing = 0;
+  }
+
+  // sticky element init (Sticky Layout)
+  if (stickyEl.length) {
+    stickyEl.sticky({
+      topSpacing: topSpacing,
+      zIndex: 9
+    });
+  }
+
+  // Select2 Country
+  var select2 = $('.select2');
+  if (select2.length) {
+    select2.each(function () {
+      var $this = $(this);
+      $this.wrap('<div class="position-relative"></div>').select2({
+        placeholder: 'Select value',
+        dropdownParent: $this.parent()
+      });
+    });
+  }
+});

httpdocs/themes/vuexy/js/form-validation.js

@@ -0,0 +1,343 @@
+'use strict';
+
+(function () {
+  // Init custom option check
+  window.Helpers.initCustomOptionCheck();
+
+  // Bootstrap validation example
+  //------------------------------------------------------------------------------------------
+  // const flatPickrEL = $('.flatpickr-validation');
+  const flatPickrList = [].slice.call(document.querySelectorAll('.flatpickr-validation'));
+  // Flat pickr
+  if (flatPickrList) {
+    flatPickrList.forEach(flatPickr => {
+      flatPickr.flatpickr({
+        allowInput: true,
+        monthSelectorType: 'static'
+      });
+    });
+  }
+
+  // Fetch all the forms we want to apply custom Bootstrap validation styles to
+  const bsValidationForms = document.querySelectorAll('.needs-validation');
+
+  // Loop over them and prevent submission
+  Array.prototype.slice.call(bsValidationForms).forEach(function (form) {
+    form.addEventListener(
+      'submit',
+      function (event) {
+        if (!form.checkValidity()) {
+          event.preventDefault();
+          event.stopPropagation();
+        } else {
+          // Submit your form
+          alert('Submitted!!!');
+        }
+
+        form.classList.add('was-validated');
+      },
+      false
+    );
+  });
+})();
+/**
+ * Form Validation (https://formvalidation.io/guide/examples)
+ * ? Primary form validation plugin for this template
+ * ? In this example we've try to covered as many form inputs as we can.
+ * ? Though If we've miss any 3rd party libraries, then refer: https://formvalidation.io/guide/examples/integrating-with-3rd-party-libraries
+ */
+//------------------------------------------------------------------------------------------
+document.addEventListener('DOMContentLoaded', function (e) {
+  (function () {
+    const formValidationExamples = document.getElementById('formValidationExamples'),
+      formValidationSelect2Ele = jQuery(formValidationExamples.querySelector('[name="formValidationSelect2"]')),
+      formValidationTechEle = jQuery(formValidationExamples.querySelector('[name="formValidationTech"]')),
+      formValidationLangEle = formValidationExamples.querySelector('[name="formValidationLang"]'),
+      formValidationHobbiesEle = jQuery(formValidationExamples.querySelector('.selectpicker')),
+      tech = [
+        'ReactJS',
+        'Angular',
+        'VueJS',
+        'Html',
+        'Css',
+        'Sass',
+        'Pug',
+        'Gulp',
+        'Php',
+        'Laravel',
+        'Python',
+        'Bootstrap',
+        'Material Design',
+        'NodeJS'
+      ];
+
+    const fv = FormValidation.formValidation(formValidationExamples, {
+      fields: {
+        formValidationName: {
+          validators: {
+            notEmpty: {
+              message: 'Please enter your name'
+            },
+            stringLength: {
+              min: 6,
+              max: 30,
+              message: 'The name must be more than 6 and less than 30 characters long'
+            },
+            regexp: {
+              regexp: /^[a-zA-Z0-9 ]+$/,
+              message: 'The name can only consist of alphabetical, number and space'
+            }
+          }
+        },
+        formValidationEmail: {
+          validators: {
+            notEmpty: {
+              message: 'Please enter your email'
+            },
+            emailAddress: {
+              message: 'The value is not a valid email address'
+            }
+          }
+        },
+        formValidationPass: {
+          validators: {
+            notEmpty: {
+              message: 'Please enter your password'
+            }
+          }
+        },
+        formValidationConfirmPass: {
+          validators: {
+            notEmpty: {
+              message: 'Please confirm password'
+            },
+            identical: {
+              compare: function () {
+                return formValidationExamples.querySelector('[name="formValidationPass"]').value;
+              },
+              message: 'The password and its confirm are not the same'
+            }
+          }
+        },
+        formValidationFile: {
+          validators: {
+            notEmpty: {
+              message: 'Please select the file'
+            }
+          }
+        },
+        formValidationDob: {
+          validators: {
+            notEmpty: {
+              message: 'Please select your DOB'
+            },
+            date: {
+              format: 'YYYY/MM/DD',
+              message: 'The value is not a valid date'
+            }
+          }
+        },
+        formValidationSelect2: {
+          validators: {
+            notEmpty: {
+              message: 'Please select your country'
+            }
+          }
+        },
+        formValidationLang: {
+          validators: {
+            notEmpty: {
+              message: 'Please add your language'
+            }
+          }
+        },
+        formValidationTech: {
+          validators: {
+            notEmpty: {
+              message: 'Please select technology'
+            }
+          }
+        },
+        formValidationHobbies: {
+          validators: {
+            notEmpty: {
+              message: 'Please select your hobbies'
+            }
+          }
+        },
+        formValidationBio: {
+          validators: {
+            notEmpty: {
+              message: 'Please enter your bio'
+            },
+            stringLength: {
+              min: 100,
+              max: 500,
+              message: 'The bio must be more than 100 and less than 500 characters long'
+            }
+          }
+        },
+        formValidationGender: {
+          validators: {
+            notEmpty: {
+              message: 'Please select your gender'
+            }
+          }
+        },
+        formValidationPlan: {
+          validators: {
+            notEmpty: {
+              message: 'Please select your preferred plan'
+            }
+          }
+        },
+        formValidationSwitch: {
+          validators: {
+            notEmpty: {
+              message: 'Please select your preference'
+            }
+          }
+        },
+        formValidationCheckbox: {
+          validators: {
+            notEmpty: {
+              message: 'Please confirm our T&C'
+            }
+          }
+        }
+      },
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: '',
+          rowSelector: function (field, ele) {
+            // field is the field name & ele is the field element
+            switch (field) {
+              case 'formValidationName':
+              case 'formValidationEmail':
+              case 'formValidationPass':
+              case 'formValidationConfirmPass':
+              case 'formValidationFile':
+              case 'formValidationDob':
+              case 'formValidationSelect2':
+              case 'formValidationLang':
+              case 'formValidationTech':
+              case 'formValidationHobbies':
+              case 'formValidationBio':
+              case 'formValidationGender':
+                return '.col-md-6';
+              case 'formValidationPlan':
+                return '.col-xl-3';
+              case 'formValidationSwitch':
+              case 'formValidationCheckbox':
+                return '.col-12';
+              default:
+                return '.row';
+            }
+          }
+        }),
+        submitButton: new FormValidation.plugins.SubmitButton(),
+        // Submit the form when all fields are valid
+        defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+        autoFocus: new FormValidation.plugins.AutoFocus()
+      },
+      init: instance => {
+        instance.on('plugins.message.placed', function (e) {
+          //* Move the error message out of the `input-group` element
+          if (e.element.parentElement.classList.contains('input-group')) {
+            // `e.field`: The field name
+            // `e.messageElement`: The message element
+            // `e.element`: The field element
+            e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
+          }
+          //* Move the error message out of the `row` element for custom-options
+          if (e.element.parentElement.parentElement.classList.contains('custom-option')) {
+            e.element.closest('.row').insertAdjacentElement('afterend', e.messageElement);
+          }
+        });
+      }
+    });
+
+    //? Revalidation third-party libs inputs on change trigger
+
+    // Flatpickr
+    flatpickr(formValidationExamples.querySelector('[name="formValidationDob"]'), {
+      enableTime: false,
+      // See https://flatpickr.js.org/formatting/
+      dateFormat: 'Y/m/d',
+      // After selecting a date, we need to revalidate the field
+      onChange: function () {
+        fv.revalidateField('formValidationDob');
+      }
+    });
+
+    // Select2 (Country)
+    if (formValidationSelect2Ele.length) {
+      formValidationSelect2Ele.wrap('<div class="position-relative"></div>');
+      formValidationSelect2Ele
+        .select2({
+          placeholder: 'Select country',
+          dropdownParent: formValidationSelect2Ele.parent()
+        })
+        .on('change.select2', function () {
+          // Revalidate the color field when an option is chosen
+          fv.revalidateField('formValidationSelect2');
+        });
+    }
+
+    // Typeahead
+
+    // String Matcher function for typeahead
+    const substringMatcher = function (strs) {
+      return function findMatches(q, cb) {
+        var matches, substrRegex;
+        matches = [];
+        substrRegex = new RegExp(q, 'i');
+        $.each(strs, function (i, str) {
+          if (substrRegex.test(str)) {
+            matches.push(str);
+          }
+        });
+
+        cb(matches);
+      };
+    };
+
+    // Check if rtl
+    if (isRtl) {
+      const typeaheadList = [].slice.call(document.querySelectorAll('.typeahead'));
+
+      // Flat pickr
+      if (typeaheadList) {
+        typeaheadList.forEach(typeahead => {
+          typeahead.setAttribute('dir', 'rtl');
+        });
+      }
+    }
+    formValidationTechEle.typeahead(
+      {
+        hint: !isRtl,
+        highlight: true,
+        minLength: 1
+      },
+      {
+        name: 'tech',
+        source: substringMatcher(tech)
+      }
+    );
+
+    // Tagify
+    let formValidationLangTagify = new Tagify(formValidationLangEle);
+    formValidationLangEle.addEventListener('change', onChange);
+    function onChange() {
+      fv.revalidateField('formValidationLang');
+    }
+
+    //Bootstrap select
+    formValidationHobbiesEle.on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
+      fv.revalidateField('formValidationHobbies');
+    });
+  })();
+});

httpdocs/themes/vuexy/js/form-wizard-icons.js

@@ -0,0 +1,164 @@
+/**
+ *  Form Wizard
+ */
+
+'use strict';
+
+$(function () {
+  const select2 = $('.select2'),
+    selectPicker = $('.selectpicker');
+
+  // Bootstrap select
+  if (selectPicker.length) {
+    selectPicker.selectpicker();
+  }
+
+  // select2
+  if (select2.length) {
+    select2.each(function () {
+      var $this = $(this);
+      $this.wrap('<div class="position-relative"></div>');
+      $this.select2({
+        placeholder: 'Select value',
+        dropdownParent: $this.parent()
+      });
+    });
+  }
+});
+
+(function () {
+  // Icons Wizard
+  // --------------------------------------------------------------------
+  const wizardIcons = document.querySelector('.wizard-icons-example');
+
+  if (typeof wizardIcons !== undefined && wizardIcons !== null) {
+    const wizardIconsBtnNextList = [].slice.call(wizardIcons.querySelectorAll('.btn-next')),
+      wizardIconsBtnPrevList = [].slice.call(wizardIcons.querySelectorAll('.btn-prev')),
+      wizardIconsBtnSubmit = wizardIcons.querySelector('.btn-submit');
+
+    const iconsStepper = new Stepper(wizardIcons, {
+      linear: false
+    });
+    if (wizardIconsBtnNextList) {
+      wizardIconsBtnNextList.forEach(wizardIconsBtnNext => {
+        wizardIconsBtnNext.addEventListener('click', event => {
+          iconsStepper.next();
+        });
+      });
+    }
+    if (wizardIconsBtnPrevList) {
+      wizardIconsBtnPrevList.forEach(wizardIconsBtnPrev => {
+        wizardIconsBtnPrev.addEventListener('click', event => {
+          iconsStepper.previous();
+        });
+      });
+    }
+    if (wizardIconsBtnSubmit) {
+      wizardIconsBtnSubmit.addEventListener('click', event => {
+        alert('Submitted..!!');
+      });
+    }
+  }
+
+  // Vertical Icons Wizard
+  // --------------------------------------------------------------------
+  const wizardIconsVertical = document.querySelector('.wizard-vertical-icons-example');
+
+  if (typeof wizardIconsVertical !== undefined && wizardIconsVertical !== null) {
+    const wizardIconsVerticalBtnNextList = [].slice.call(wizardIconsVertical.querySelectorAll('.btn-next')),
+      wizardIconsVerticalBtnPrevList = [].slice.call(wizardIconsVertical.querySelectorAll('.btn-prev')),
+      wizardIconsVerticalBtnSubmit = wizardIconsVertical.querySelector('.btn-submit');
+
+    const verticalIconsStepper = new Stepper(wizardIconsVertical, {
+      linear: false
+    });
+
+    if (wizardIconsVerticalBtnNextList) {
+      wizardIconsVerticalBtnNextList.forEach(wizardIconsVerticalBtnNext => {
+        wizardIconsVerticalBtnNext.addEventListener('click', event => {
+          verticalIconsStepper.next();
+        });
+      });
+    }
+    if (wizardIconsVerticalBtnPrevList) {
+      wizardIconsVerticalBtnPrevList.forEach(wizardIconsVerticalBtnPrev => {
+        wizardIconsVerticalBtnPrev.addEventListener('click', event => {
+          verticalIconsStepper.previous();
+        });
+      });
+    }
+    if (wizardIconsVerticalBtnSubmit) {
+      wizardIconsVerticalBtnSubmit.addEventListener('click', event => {
+        alert('Submitted..!!');
+      });
+    }
+  }
+
+  // Icons Modern Wizard
+  // --------------------------------------------------------------------
+  const wizardIconsModern = document.querySelector('.wizard-modern-icons-example');
+
+  if (typeof wizardIconsModern !== undefined && wizardIconsModern !== null) {
+    const wizardIconsModernBtnNextList = [].slice.call(wizardIconsModern.querySelectorAll('.btn-next')),
+      wizardIconsModernBtnPrevList = [].slice.call(wizardIconsModern.querySelectorAll('.btn-prev')),
+      wizardIconsModernBtnSubmit = wizardIconsModern.querySelector('.btn-submit');
+
+    const modernIconsStepper = new Stepper(wizardIconsModern, {
+      linear: false
+    });
+
+    if (wizardIconsModernBtnNextList) {
+      wizardIconsModernBtnNextList.forEach(wizardIconsModernBtnNext => {
+        wizardIconsModernBtnNext.addEventListener('click', event => {
+          modernIconsStepper.next();
+        });
+      });
+    }
+    if (wizardIconsModernBtnPrevList) {
+      wizardIconsModernBtnPrevList.forEach(wizardIconsModernBtnPrev => {
+        wizardIconsModernBtnPrev.addEventListener('click', event => {
+          modernIconsStepper.previous();
+        });
+      });
+    }
+    if (wizardIconsModernBtnSubmit) {
+      wizardIconsModernBtnSubmit.addEventListener('click', event => {
+        alert('Submitted..!!');
+      });
+    }
+  }
+
+  // Icons Modern Wizard
+  // --------------------------------------------------------------------
+  const wizardIconsModernVertical = document.querySelector('.wizard-modern-vertical-icons-example');
+
+  if (typeof wizardIconsModernVertical !== undefined && wizardIconsModernVertical !== null) {
+    const wizardIconsModernVerticalBtnNextList = [].slice.call(wizardIconsModernVertical.querySelectorAll('.btn-next')),
+      wizardIconsModernVerticalBtnPrevList = [].slice.call(wizardIconsModernVertical.querySelectorAll('.btn-prev')),
+      wizardIconsModernVerticalBtnSubmit = wizardIconsModernVertical.querySelector('.btn-submit');
+
+    const verticalModernIconsStepper = new Stepper(wizardIconsModernVertical, {
+      linear: false
+    });
+
+    if (wizardIconsModernVerticalBtnNextList) {
+      wizardIconsModernVerticalBtnNextList.forEach(wizardIconsModernVerticalBtnNext => {
+        wizardIconsModernVerticalBtnNext.addEventListener('click', event => {
+          verticalModernIconsStepper.next();
+        });
+      });
+    }
+    if (wizardIconsModernVerticalBtnPrevList) {
+      wizardIconsModernVerticalBtnPrevList.forEach(wizardIconsModernVerticalBtnPrev => {
+        wizardIconsModernVerticalBtnPrev.addEventListener('click', event => {
+          verticalModernIconsStepper.previous();
+        });
+      });
+    }
+    if (wizardIconsModernVerticalBtnSubmit) {
+      wizardIconsModernVerticalBtnSubmit.addEventListener('click', event => {
+        alert('Submitted..!!');
+      });
+    }
+  }
+})();

httpdocs/themes/vuexy/js/form-wizard-numbered.js

@@ -0,0 +1,155 @@
+/**
+ *  Form Wizard
+ */
+
+'use strict';
+
+$(function () {
+  const select2 = $('.select2'),
+    selectPicker = $('.selectpicker');
+
+  // Bootstrap select
+  if (selectPicker.length) {
+    selectPicker.selectpicker();
+  }
+
+  // select2
+  if (select2.length) {
+    select2.each(function () {
+      var $this = $(this);
+      $this.wrap('<div class="position-relative"></div>');
+      $this.select2({
+        placeholder: 'Select value',
+        dropdownParent: $this.parent()
+      });
+    });
+  }
+});
+(function () {
+  // Numbered Wizard
+  // --------------------------------------------------------------------
+  const wizardNumbered = document.querySelector('.wizard-numbered'),
+    wizardNumberedBtnNextList = [].slice.call(wizardNumbered.querySelectorAll('.btn-next')),
+    wizardNumberedBtnPrevList = [].slice.call(wizardNumbered.querySelectorAll('.btn-prev')),
+    wizardNumberedBtnSubmit = wizardNumbered.querySelector('.btn-submit');
+
+  if (typeof wizardNumbered !== undefined && wizardNumbered !== null) {
+    const numberedStepper = new Stepper(wizardNumbered, {
+      linear: false
+    });
+    if (wizardNumberedBtnNextList) {
+      wizardNumberedBtnNextList.forEach(wizardNumberedBtnNext => {
+        wizardNumberedBtnNext.addEventListener('click', event => {
+          numberedStepper.next();
+        });
+      });
+    }
+    if (wizardNumberedBtnPrevList) {
+      wizardNumberedBtnPrevList.forEach(wizardNumberedBtnPrev => {
+        wizardNumberedBtnPrev.addEventListener('click', event => {
+          numberedStepper.previous();
+        });
+      });
+    }
+    if (wizardNumberedBtnSubmit) {
+      wizardNumberedBtnSubmit.addEventListener('click', event => {
+        alert('Submitted..!!');
+      });
+    }
+  }
+
+  // Vertical Wizard
+  // --------------------------------------------------------------------
+  const wizardVertical = document.querySelector('.wizard-vertical'),
+    wizardVerticalBtnNextList = [].slice.call(wizardVertical.querySelectorAll('.btn-next')),
+    wizardVerticalBtnPrevList = [].slice.call(wizardVertical.querySelectorAll('.btn-prev')),
+    wizardVerticalBtnSubmit = wizardVertical.querySelector('.btn-submit');
+
+  if (typeof wizardVertical !== undefined && wizardVertical !== null) {
+    const verticalStepper = new Stepper(wizardVertical, {
+      linear: false
+    });
+    if (wizardVerticalBtnNextList) {
+      wizardVerticalBtnNextList.forEach(wizardVerticalBtnNext => {
+        wizardVerticalBtnNext.addEventListener('click', event => {
+          verticalStepper.next();
+        });
+      });
+    }
+    if (wizardVerticalBtnPrevList) {
+      wizardVerticalBtnPrevList.forEach(wizardVerticalBtnPrev => {
+        wizardVerticalBtnPrev.addEventListener('click', event => {
+          verticalStepper.previous();
+        });
+      });
+    }
+
+    if (wizardVerticalBtnSubmit) {
+      wizardVerticalBtnSubmit.addEventListener('click', event => {
+        alert('Submitted..!!');
+      });
+    }
+  }
+
+  // Modern Wizard
+  // --------------------------------------------------------------------
+  const wizardModern = document.querySelector('.wizard-modern-example'),
+    wizardModernBtnNextList = [].slice.call(wizardModern.querySelectorAll('.btn-next')),
+    wizardModernBtnPrevList = [].slice.call(wizardModern.querySelectorAll('.btn-prev')),
+    wizardModernBtnSubmit = wizardModern.querySelector('.btn-submit');
+  if (typeof wizardModern !== undefined && wizardModern !== null) {
+    const modernStepper = new Stepper(wizardModern, {
+      linear: false
+    });
+    if (wizardModernBtnNextList) {
+      wizardModernBtnNextList.forEach(wizardModernBtnNext => {
+        wizardModernBtnNext.addEventListener('click', event => {
+          modernStepper.next();
+        });
+      });
+    }
+    if (wizardModernBtnPrevList) {
+      wizardModernBtnPrevList.forEach(wizardModernBtnPrev => {
+        wizardModernBtnPrev.addEventListener('click', event => {
+          modernStepper.previous();
+        });
+      });
+    }
+    if (wizardModernBtnSubmit) {
+      wizardModernBtnSubmit.addEventListener('click', event => {
+        alert('Submitted..!!');
+      });
+    }
+  }
+
+  // Modern Vertical Wizard
+  // --------------------------------------------------------------------
+  const wizardModernVertical = document.querySelector('.wizard-modern-vertical'),
+    wizardModernVerticalBtnNextList = [].slice.call(wizardModernVertical.querySelectorAll('.btn-next')),
+    wizardModernVerticalBtnPrevList = [].slice.call(wizardModernVertical.querySelectorAll('.btn-prev')),
+    wizardModernVerticalBtnSubmit = wizardModernVertical.querySelector('.btn-submit');
+  if (typeof wizardModernVertical !== undefined && wizardModernVertical !== null) {
+    const modernVerticalStepper = new Stepper(wizardModernVertical, {
+      linear: false
+    });
+    if (wizardModernVerticalBtnNextList) {
+      wizardModernVerticalBtnNextList.forEach(wizardModernVerticalBtnNext => {
+        wizardModernVerticalBtnNext.addEventListener('click', event => {
+          modernVerticalStepper.next();
+        });
+      });
+    }
+    if (wizardModernVerticalBtnPrevList) {
+      wizardModernVerticalBtnPrevList.forEach(wizardModernVerticalBtnPrev => {
+        wizardModernVerticalBtnPrev.addEventListener('click', event => {
+          modernVerticalStepper.previous();
+        });
+      });
+    }
+    if (wizardModernVerticalBtnSubmit) {
+      wizardModernVerticalBtnSubmit.addEventListener('click', event => {
+        alert('Submitted..!!');
+      });
+    }
+  }
+})();

httpdocs/themes/vuexy/js/form-wizard-validation.js

@@ -0,0 +1,282 @@
+/**
+ *  Form Wizard
+ */
+
+'use strict';
+
+(function () {
+  const select2 = $('.select2'),
+    selectPicker = $('.selectpicker');
+
+  // Wizard Validation
+  // --------------------------------------------------------------------
+  const wizardValidation = document.querySelector('#wizard-validation');
+  if (typeof wizardValidation !== undefined && wizardValidation !== null) {
+    // Wizard form
+    const wizardValidationForm = wizardValidation.querySelector('#wizard-validation-form');
+    // Wizard steps
+    const wizardValidationFormStep1 = wizardValidationForm.querySelector('#account-details-validation');
+    const wizardValidationFormStep2 = wizardValidationForm.querySelector('#personal-info-validation');
+    const wizardValidationFormStep3 = wizardValidationForm.querySelector('#social-links-validation');
+    // Wizard next prev button
+    const wizardValidationNext = [].slice.call(wizardValidationForm.querySelectorAll('.btn-next'));
+    const wizardValidationPrev = [].slice.call(wizardValidationForm.querySelectorAll('.btn-prev'));
+
+    const validationStepper = new Stepper(wizardValidation, {
+      linear: true
+    });
+
+    // Account details
+    const FormValidation1 = FormValidation.formValidation(wizardValidationFormStep1, {
+      fields: {
+        formValidationUsername: {
+          validators: {
+            notEmpty: {
+              message: 'The name is required'
+            },
+            stringLength: {
+              min: 6,
+              max: 30,
+              message: 'The name must be more than 6 and less than 30 characters long'
+            },
+            regexp: {
+              regexp: /^[a-zA-Z0-9 ]+$/,
+              message: 'The name can only consist of alphabetical, number and space'
+            }
+          }
+        },
+        formValidationEmail: {
+          validators: {
+            notEmpty: {
+              message: 'The Email is required'
+            },
+            emailAddress: {
+              message: 'The value is not a valid email address'
+            }
+          }
+        },
+        formValidationPass: {
+          validators: {
+            notEmpty: {
+              message: 'The password is required'
+            }
+          }
+        },
+        formValidationConfirmPass: {
+          validators: {
+            notEmpty: {
+              message: 'The Confirm Password is required'
+            },
+            identical: {
+              compare: function () {
+                return wizardValidationFormStep1.querySelector('[name="formValidationPass"]').value;
+              },
+              message: 'The password and its confirm are not the same'
+            }
+          }
+        }
+      },
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: '',
+          rowSelector: '.col-sm-6'
+        }),
+        autoFocus: new FormValidation.plugins.AutoFocus(),
+        submitButton: new FormValidation.plugins.SubmitButton()
+      },
+      init: instance => {
+        instance.on('plugins.message.placed', function (e) {
+          //* Move the error message out of the `input-group` element
+          if (e.element.parentElement.classList.contains('input-group')) {
+            e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
+          }
+        });
+      }
+    }).on('core.form.valid', function () {
+      // Jump to the next step when all fields in the current step are valid
+      validationStepper.next();
+    });
+
+    // Personal info
+    const FormValidation2 = FormValidation.formValidation(wizardValidationFormStep2, {
+      fields: {
+        formValidationFirstName: {
+          validators: {
+            notEmpty: {
+              message: 'The first name is required'
+            }
+          }
+        },
+        formValidationLastName: {
+          validators: {
+            notEmpty: {
+              message: 'The last name is required'
+            }
+          }
+        },
+        formValidationCountry: {
+          validators: {
+            notEmpty: {
+              message: 'The Country is required'
+            }
+          }
+        },
+        formValidationLanguage: {
+          validators: {
+            notEmpty: {
+              message: 'The Languages is required'
+            }
+          }
+        }
+      },
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: '',
+          rowSelector: '.col-sm-6'
+        }),
+        autoFocus: new FormValidation.plugins.AutoFocus(),
+        submitButton: new FormValidation.plugins.SubmitButton()
+      }
+    }).on('core.form.valid', function () {
+      // Jump to the next step when all fields in the current step are valid
+      validationStepper.next();
+    });
+
+    // Bootstrap Select (i.e Language select)
+    if (selectPicker.length) {
+      selectPicker.each(function () {
+        var $this = $(this);
+        $this.selectpicker().on('change', function () {
+          FormValidation2.revalidateField('formValidationLanguage');
+        });
+      });
+    }
+
+    // select2
+    if (select2.length) {
+      select2.each(function () {
+        var $this = $(this);
+        $this.wrap('<div class="position-relative"></div>');
+        $this
+          .select2({
+            placeholder: 'Select an country',
+            dropdownParent: $this.parent()
+          })
+          .on('change.select2', function () {
+            // Revalidate the color field when an option is chosen
+            FormValidation2.revalidateField('formValidationCountry');
+          });
+      });
+    }
+
+    // Social links
+    const FormValidation3 = FormValidation.formValidation(wizardValidationFormStep3, {
+      fields: {
+        formValidationTwitter: {
+          validators: {
+            notEmpty: {
+              message: 'The Twitter URL is required'
+            },
+            uri: {
+              message: 'The URL is not proper'
+            }
+          }
+        },
+        formValidationFacebook: {
+          validators: {
+            notEmpty: {
+              message: 'The Facebook URL is required'
+            },
+            uri: {
+              message: 'The URL is not proper'
+            }
+          }
+        },
+        formValidationGoogle: {
+          validators: {
+            notEmpty: {
+              message: 'The Google URL is required'
+            },
+            uri: {
+              message: 'The URL is not proper'
+            }
+          }
+        },
+        formValidationLinkedIn: {
+          validators: {
+            notEmpty: {
+              message: 'The LinkedIn URL is required'
+            },
+            uri: {
+              message: 'The URL is not proper'
+            }
+          }
+        }
+      },
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: '',
+          rowSelector: '.col-sm-6'
+        }),
+        autoFocus: new FormValidation.plugins.AutoFocus(),
+        submitButton: new FormValidation.plugins.SubmitButton()
+      }
+    }).on('core.form.valid', function () {
+      // You can submit the form
+      // wizardValidationForm.submit()
+      // or send the form data to server via an Ajax request
+      // To make the demo simple, I just placed an alert
+      alert('Submitted..!!');
+    });
+
+    wizardValidationNext.forEach(item => {
+      item.addEventListener('click', event => {
+        // When click the Next button, we will validate the current step
+        switch (validationStepper._currentIndex) {
+          case 0:
+            FormValidation1.validate();
+            break;
+
+          case 1:
+            FormValidation2.validate();
+            break;
+
+          case 2:
+            FormValidation3.validate();
+            break;
+
+          default:
+            break;
+        }
+      });
+    });
+
+    wizardValidationPrev.forEach(item => {
+      item.addEventListener('click', event => {
+        switch (validationStepper._currentIndex) {
+          case 2:
+            validationStepper.previous();
+            break;
+
+          case 1:
+            validationStepper.previous();
+            break;
+
+          case 0:
+
+          default:
+            break;
+        }
+      });
+    });
+  }
+})();

httpdocs/themes/vuexy/js/forms-editors.js

@@ -0,0 +1,93 @@
+/**
+ * Form Editors
+ */
+
+'use strict';
+
+(function () {
+  // Snow Theme
+  // --------------------------------------------------------------------
+  const snowEditor = new Quill('#snow-editor', {
+    bounds: '#snow-editor',
+    modules: {
+      formula: true,
+      toolbar: '#snow-toolbar'
+    },
+    theme: 'snow'
+  });
+
+  // Bubble Theme
+  // --------------------------------------------------------------------
+  const bubbleEditor = new Quill('#bubble-editor', {
+    modules: {
+      toolbar: '#bubble-toolbar'
+    },
+    theme: 'bubble'
+  });
+
+  // Full Toolbar
+  // --------------------------------------------------------------------
+  const fullToolbar = [
+    [
+      {
+        font: []
+      },
+      {
+        size: []
+      }
+    ],
+    ['bold', 'italic', 'underline', 'strike'],
+    [
+      {
+        color: []
+      },
+      {
+        background: []
+      }
+    ],
+    [
+      {
+        script: 'super'
+      },
+      {
+        script: 'sub'
+      }
+    ],
+    [
+      {
+        header: '1'
+      },
+      {
+        header: '2'
+      },
+      'blockquote',
+      'code-block'
+    ],
+    [
+      {
+        list: 'ordered'
+      },
+      {
+        list: 'bullet'
+      },
+      {
+        indent: '-1'
+      },
+      {
+        indent: '+1'
+      }
+    ],
+    [{ direction: 'rtl' }],
+    ['link', 'image', 'video', 'formula'],
+    ['clean']
+  ];
+  const fullEditor = new Quill('#full-editor', {
+    bounds: '#full-editor',
+    placeholder: 'Type Something...',
+    modules: {
+      formula: true,
+      toolbar: fullToolbar
+    },
+    theme: 'snow'
+  });
+})();

httpdocs/themes/vuexy/js/forms-extras.js

@@ -0,0 +1,164 @@
+/**
+ * Form Extras
+ */
+
+'use strict';
+
+(function () {
+  const textarea = document.querySelector('#autosize-demo'),
+    creditCard = document.querySelector('.credit-card-mask'),
+    phoneMask = document.querySelector('.phone-number-mask'),
+    dateMask = document.querySelector('.date-mask'),
+    timeMask = document.querySelector('.time-mask'),
+    numeralMask = document.querySelector('.numeral-mask'),
+    blockMask = document.querySelector('.block-mask'),
+    delimiterMask = document.querySelector('.delimiter-mask'),
+    customDelimiter = document.querySelector('.custom-delimiter-mask'),
+    prefixMask = document.querySelector('.prefix-mask');
+
+  // Autosize
+  // --------------------------------------------------------------------
+  if (textarea) {
+    autosize(textarea);
+  }
+
+  // Cleave JS Input Mask
+  // --------------------------------------------------------------------
+
+  // Credit Card
+  if (creditCard) {
+    new Cleave(creditCard, {
+      creditCard: true,
+      onCreditCardTypeChanged: function (type) {
+        if (type != '' && type != 'unknown') {
+          document.querySelector('.card-type').innerHTML =
+            '<img src="' + assetsPath + 'img/icons/payments/' + type + '-cc.png" height="28"/>';
+        } else {
+          document.querySelector('.card-type').innerHTML = '';
+        }
+      }
+    });
+  }
+
+  // Phone Number
+  if (phoneMask) {
+    new Cleave(phoneMask, {
+      phone: true,
+      phoneRegionCode: 'US'
+    });
+  }
+
+  // Date
+  if (dateMask) {
+    new Cleave(dateMask, {
+      date: true,
+      delimiter: '-',
+      datePattern: ['Y', 'm', 'd']
+    });
+  }
+
+  // Time
+  if (timeMask) {
+    new Cleave(timeMask, {
+      time: true,
+      timePattern: ['h', 'm', 's']
+    });
+  }
+
+  //Numeral
+  if (numeralMask) {
+    new Cleave(numeralMask, {
+      numeral: true,
+      numeralThousandsGroupStyle: 'thousand'
+    });
+  }
+
+  //Block
+  if (blockMask) {
+    new Cleave(blockMask, {
+      blocks: [4, 3, 3],
+      uppercase: true
+    });
+  }
+
+  // Delimiter
+  if (delimiterMask) {
+    new Cleave(delimiterMask, {
+      delimiter: '·',
+      blocks: [3, 3, 3],
+      uppercase: true
+    });
+  }
+
+  // Custom Delimiter
+  if (customDelimiter) {
+    new Cleave(customDelimiter, {
+      delimiters: ['.', '.', '-'],
+      blocks: [3, 3, 3, 2],
+      uppercase: true
+    });
+  }
+
+  // Prefix
+  if (prefixMask) {
+    new Cleave(prefixMask, {
+      prefix: '+63',
+      blocks: [3, 3, 3, 4],
+      uppercase: true
+    });
+  }
+})();
+
+// bootstrap-maxlength & repeater (jquery)
+$(function () {
+  var maxlengthInput = $('.bootstrap-maxlength-example'),
+    formRepeater = $('.form-repeater');
+
+  // Bootstrap Max Length
+  // --------------------------------------------------------------------
+  if (maxlengthInput.length) {
+    maxlengthInput.each(function () {
+      $(this).maxlength({
+        warningClass: 'label label-success bg-success text-white',
+        limitReachedClass: 'label label-danger',
+        separator: ' out of ',
+        preText: 'You typed ',
+        postText: ' chars available.',
+        validate: true,
+        threshold: +this.getAttribute('maxlength')
+      });
+    });
+  }
+
+  // Form Repeater
+  // ! Using jQuery each loop to add dynamic id and class for inputs. You may need to improve it based on form fields.
+  // -----------------------------------------------------------------------------------------------------------------
+
+  if (formRepeater.length) {
+    var row = 2;
+    var col = 1;
+    formRepeater.on('submit', function (e) {
+      e.preventDefault();
+    });
+    formRepeater.repeater({
+      show: function () {
+        var fromControl = $(this).find('.form-control, .form-select');
+        var formLabel = $(this).find('.form-label');
+
+        fromControl.each(function (i) {
+          var id = 'form-repeater-' + row + '-' + col;
+          $(fromControl[i]).attr('id', id);
+          $(formLabel[i]).attr('for', id);
+          col++;
+        });
+
+        row++;
+
+        $(this).slideDown();
+      },
+      hide: function (e) {
+        confirm('Are you sure you want to delete this element?') && $(this).slideUp(e);
+      }
+    });
+  }
+});

httpdocs/themes/vuexy/js/forms-file-upload.js

@@ -0,0 +1,53 @@
+/**
+ * File Upload
+ */
+
+'use strict';
+
+(function () {
+  // previewTemplate: Updated Dropzone default previewTemplate
+  // ! Don't change it unless you really know what you are doing
+  const previewTemplate = `<div class="dz-preview dz-file-preview">
+<div class="dz-details">
+  <div class="dz-thumbnail">
+    <img data-dz-thumbnail>
+    <span class="dz-nopreview">No preview</span>
+    <div class="dz-success-mark"></div>
+    <div class="dz-error-mark"></div>
+    <div class="dz-error-message"><span data-dz-errormessage></span></div>
+    <div class="progress">
+      <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuemin="0" aria-valuemax="100" data-dz-uploadprogress></div>
+    </div>
+  </div>
+  <div class="dz-filename" data-dz-name></div>
+  <div class="dz-size" data-dz-size></div>
+</div>
+</div>`;
+
+  // ? Start your code from here
+
+  // Basic Dropzone
+  // --------------------------------------------------------------------
+  const dropzoneBasic = document.querySelector('#dropzone-basic');
+  if (dropzoneBasic) {
+    const myDropzone = new Dropzone(dropzoneBasic, {
+      previewTemplate: previewTemplate,
+      parallelUploads: 1,
+      maxFilesize: 5,
+      addRemoveLinks: true,
+      maxFiles: 1
+    });
+  }
+
+  // Multiple Dropzone
+  // --------------------------------------------------------------------
+  const dropzoneMulti = document.querySelector('#dropzone-multi');
+  if (dropzoneMulti) {
+    const myDropzoneMulti = new Dropzone(dropzoneMulti, {
+      previewTemplate: previewTemplate,
+      parallelUploads: 1,
+      maxFilesize: 5,
+      addRemoveLinks: true
+    });
+  }
+})();

httpdocs/themes/vuexy/js/forms-pickers.js

@@ -0,0 +1,419 @@
+/**
+ * Form Picker
+ */
+
+'use strict';
+
+(function () {
+  // Flat Picker
+  // --------------------------------------------------------------------
+  const flatpickrDate = document.querySelector('#flatpickr-date'),
+    flatpickrTime = document.querySelector('#flatpickr-time'),
+    flatpickrDateTime = document.querySelector('#flatpickr-datetime'),
+    flatpickrMulti = document.querySelector('#flatpickr-multi'),
+    flatpickrRange = document.querySelector('#flatpickr-range'),
+    flatpickrInline = document.querySelector('#flatpickr-inline'),
+    flatpickrFriendly = document.querySelector('#flatpickr-human-friendly'),
+    flatpickrDisabledRange = document.querySelector('#flatpickr-disabled-range');
+
+  // Date
+  if (flatpickrDate) {
+    flatpickrDate.flatpickr({
+      monthSelectorType: 'static'
+    });
+  }
+
+  // Time
+  if (flatpickrTime) {
+    flatpickrTime.flatpickr({
+      enableTime: true,
+      noCalendar: true
+    });
+  }
+
+  // Datetime
+  if (flatpickrDateTime) {
+    flatpickrDateTime.flatpickr({
+      enableTime: true,
+      dateFormat: 'Y-m-d H:i'
+    });
+  }
+
+  // Multi Date Select
+  if (flatpickrMulti) {
+    flatpickrMulti.flatpickr({
+      weekNumbers: true,
+      enableTime: true,
+      mode: 'multiple',
+      minDate: 'today'
+    });
+  }
+
+  // Range
+  if (typeof flatpickrRange != undefined) {
+    flatpickrRange.flatpickr({
+      mode: 'range'
+    });
+  }
+
+  // Inline
+  if (flatpickrInline) {
+    flatpickrInline.flatpickr({
+      inline: true,
+      allowInput: false,
+      monthSelectorType: 'static'
+    });
+  }
+
+  // Human Friendly
+  if (flatpickrFriendly) {
+    flatpickrFriendly.flatpickr({
+      altInput: true,
+      altFormat: 'F j, Y',
+      dateFormat: 'Y-m-d'
+    });
+  }
+
+  // Disabled Date Range
+  if (flatpickrDisabledRange) {
+    const fromDate = new Date(Date.now() - 3600 * 1000 * 48);
+    const toDate = new Date(Date.now() + 3600 * 1000 * 48);
+
+    flatpickrDisabledRange.flatpickr({
+      dateFormat: 'Y-m-d',
+      disable: [
+        {
+          from: fromDate.toISOString().split('T')[0],
+          to: toDate.toISOString().split('T')[0]
+        }
+      ]
+    });
+  }
+})();
+
+// * Pickers with jQuery dependency (jquery)
+$(function () {
+  // Bootstrap Datepicker
+  // --------------------------------------------------------------------
+  var bsDatepickerBasic = $('#bs-datepicker-basic'),
+    bsDatepickerFormat = $('#bs-datepicker-format'),
+    bsDatepickerRange = $('#bs-datepicker-daterange'),
+    bsDatepickerDisabledDays = $('#bs-datepicker-disabled-days'),
+    bsDatepickerMultidate = $('#bs-datepicker-multidate'),
+    bsDatepickerOptions = $('#bs-datepicker-options'),
+    bsDatepickerAutoclose = $('#bs-datepicker-autoclose'),
+    bsDatepickerInlinedate = $('#bs-datepicker-inline');
+
+  // Basic
+  if (bsDatepickerBasic.length) {
+    bsDatepickerBasic.datepicker({
+      todayHighlight: true,
+      orientation: isRtl ? 'auto right' : 'auto left'
+    });
+  }
+
+  // Format
+  if (bsDatepickerFormat.length) {
+    bsDatepickerFormat.datepicker({
+      todayHighlight: true,
+      format: 'dd/mm/yyyy',
+      orientation: isRtl ? 'auto right' : 'auto left'
+    });
+  }
+
+  // Range
+  if (bsDatepickerRange.length) {
+    bsDatepickerRange.datepicker({
+      todayHighlight: true,
+      orientation: isRtl ? 'auto right' : 'auto left'
+    });
+  }
+
+  // Disabled Days
+  if (bsDatepickerDisabledDays.length) {
+    bsDatepickerDisabledDays.datepicker({
+      todayHighlight: true,
+      daysOfWeekDisabled: [0, 6],
+      orientation: isRtl ? 'auto right' : 'auto left'
+    });
+  }
+
+  // Multiple
+  if (bsDatepickerMultidate.length) {
+    bsDatepickerMultidate.datepicker({
+      multidate: true,
+      todayHighlight: true,
+      orientation: isRtl ? 'auto right' : 'auto left'
+    });
+  }
+
+  // Options
+  if (bsDatepickerOptions.length) {
+    bsDatepickerOptions.datepicker({
+      calendarWeeks: true,
+      clearBtn: true,
+      todayHighlight: true,
+      orientation: isRtl ? 'auto left' : 'auto right'
+    });
+  }
+
+  // Auto close
+  if (bsDatepickerAutoclose.length) {
+    bsDatepickerAutoclose.datepicker({
+      todayHighlight: true,
+      autoclose: true,
+      orientation: isRtl ? 'auto right' : 'auto left'
+    });
+  }
+
+  // Inline picker
+  if (bsDatepickerInlinedate.length) {
+    bsDatepickerInlinedate.datepicker({
+      todayHighlight: true
+    });
+  }
+
+  // Bootstrap Daterange Picker
+  // --------------------------------------------------------------------
+  var bsRangePickerBasic = $('#bs-rangepicker-basic'),
+    bsRangePickerSingle = $('#bs-rangepicker-single'),
+    bsRangePickerTime = $('#bs-rangepicker-time'),
+    bsRangePickerRange = $('#bs-rangepicker-range'),
+    bsRangePickerWeekNum = $('#bs-rangepicker-week-num'),
+    bsRangePickerDropdown = $('#bs-rangepicker-dropdown'),
+    bsRangePickerCancelBtn = document.getElementsByClassName('cancelBtn');
+
+  // Basic
+  if (bsRangePickerBasic.length) {
+    bsRangePickerBasic.daterangepicker({
+      opens: isRtl ? 'left' : 'right'
+    });
+  }
+
+  // Single
+  if (bsRangePickerSingle.length) {
+    bsRangePickerSingle.daterangepicker({
+      singleDatePicker: true,
+      opens: isRtl ? 'left' : 'right'
+    });
+  }
+
+  // Time & Date
+  if (bsRangePickerTime.length) {
+    bsRangePickerTime.daterangepicker({
+      timePicker: true,
+      timePickerIncrement: 30,
+      locale: {
+        format: 'MM/DD/YYYY h:mm A'
+      },
+      opens: isRtl ? 'left' : 'right'
+    });
+  }
+
+  if (bsRangePickerRange.length) {
+    bsRangePickerRange.daterangepicker({
+      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')]
+      },
+      opens: isRtl ? 'left' : 'right'
+    });
+  }
+
+  // Week Numbers
+  if (bsRangePickerWeekNum.length) {
+    bsRangePickerWeekNum.daterangepicker({
+      showWeekNumbers: true,
+      opens: isRtl ? 'left' : 'right'
+    });
+  }
+  // Dropdown
+  if (bsRangePickerDropdown.length) {
+    bsRangePickerDropdown.daterangepicker({
+      showDropdowns: true,
+      opens: isRtl ? 'left' : 'right'
+    });
+  }
+
+  // Adding btn-secondary class in cancel btn
+  for (var i = 0; i < bsRangePickerCancelBtn.length; i++) {
+    bsRangePickerCancelBtn[i].classList.remove('btn-default');
+    bsRangePickerCancelBtn[i].classList.add('btn-secondary');
+  }
+
+  // jQuery Timepicker
+  // --------------------------------------------------------------------
+  var basicTimepicker = $('#timepicker-basic'),
+    minMaxTimepicker = $('#timepicker-min-max'),
+    disabledTimepicker = $('#timepicker-disabled-times'),
+    formatTimepicker = $('#timepicker-format'),
+    stepTimepicker = $('#timepicker-step'),
+    altHourTimepicker = $('#timepicker-24hours');
+
+  // Basic
+  if (basicTimepicker.length) {
+    basicTimepicker.timepicker({
+      orientation: isRtl ? 'r' : 'l'
+    });
+  }
+
+  // Min & Max
+  if (minMaxTimepicker.length) {
+    minMaxTimepicker.timepicker({
+      minTime: '2:00pm',
+      maxTime: '7:00pm',
+      showDuration: true,
+      orientation: isRtl ? 'r' : 'l'
+    });
+  }
+
+  // Disabled Picker
+  if (disabledTimepicker.length) {
+    disabledTimepicker.timepicker({
+      disableTimeRanges: [
+        ['12am', '3am'],
+        ['4am', '4:30am']
+      ],
+      orientation: isRtl ? 'r' : 'l'
+    });
+  }
+
+  // Format Picker
+  if (formatTimepicker.length) {
+    formatTimepicker.timepicker({
+      timeFormat: 'H:i:s',
+      orientation: isRtl ? 'r' : 'l'
+    });
+  }
+
+  // Steps Picker
+  if (stepTimepicker.length) {
+    stepTimepicker.timepicker({
+      step: 15,
+      orientation: isRtl ? 'r' : 'l'
+    });
+  }
+
+  // 24 Hours Format
+  if (altHourTimepicker.length) {
+    altHourTimepicker.timepicker({
+      show: '24:00',
+      timeFormat: 'H:i:s',
+      orientation: isRtl ? 'r' : 'l'
+    });
+  }
+});
+
+// color picker (pickr)
+// --------------------------------------------------------------------
+(function () {
+  const classicPicker = document.querySelector('#color-picker-classic'),
+    monolithPicker = document.querySelector('#color-picker-monolith'),
+    nanoPicker = document.querySelector('#color-picker-nano');
+
+  // classic
+  if (classicPicker) {
+    pickr.create({
+      el: classicPicker,
+      theme: 'classic',
+      default: 'rgba(102, 108, 232, 1)',
+      swatches: [
+        'rgba(102, 108, 232, 1)',
+        'rgba(40, 208, 148, 1)',
+        'rgba(255, 73, 97, 1)',
+        'rgba(255, 145, 73, 1)',
+        'rgba(30, 159, 242, 1)'
+      ],
+      components: {
+        // Main components
+        preview: true,
+        opacity: true,
+        hue: true,
+
+        // Input / output Options
+        interaction: {
+          hex: true,
+          rgba: true,
+          hsla: true,
+          hsva: true,
+          cmyk: true,
+          input: true,
+          clear: true,
+          save: true
+        }
+      }
+    });
+  }
+
+  // monolith
+  if (monolithPicker) {
+    pickr.create({
+      el: monolithPicker,
+      theme: 'monolith',
+      default: 'rgba(40, 208, 148, 1)',
+      swatches: [
+        'rgba(102, 108, 232, 1)',
+        'rgba(40, 208, 148, 1)',
+        'rgba(255, 73, 97, 1)',
+        'rgba(255, 145, 73, 1)',
+        'rgba(30, 159, 242, 1)'
+      ],
+      components: {
+        // Main components
+        preview: true,
+        opacity: true,
+        hue: true,
+
+        // Input / output Options
+        interaction: {
+          hex: true,
+          rgba: true,
+          hsla: true,
+          hsva: true,
+          cmyk: true,
+          input: true,
+          clear: true,
+          save: true
+        }
+      }
+    });
+  }
+
+  // nano
+  if (nanoPicker) {
+    pickr.create({
+      el: nanoPicker,
+      theme: 'nano',
+      default: 'rgba(255, 73, 97, 1)',
+      swatches: [
+        'rgba(102, 108, 232, 1)',
+        'rgba(40, 208, 148, 1)',
+        'rgba(255, 73, 97, 1)',
+        'rgba(255, 145, 73, 1)',
+        'rgba(30, 159, 242, 1)'
+      ],
+      components: {
+        // Main components
+        preview: true,
+        opacity: true,
+        hue: true,
+
+        // Input / output Options
+        interaction: {
+          hex: true,
+          rgba: true,
+          hsla: true,
+          hsva: true,
+          cmyk: true,
+          input: true,
+          clear: true,
+          save: true
+        }
+      }
+    });
+  }
+})();

httpdocs/themes/vuexy/js/forms-selects.js

@@ -0,0 +1,51 @@
+/**
+ * Selects & Tags
+ */
+
+'use strict';
+
+$(function () {
+  const selectPicker = $('.selectpicker'),
+    select2 = $('.select2'),
+    select2Icons = $('.select2-icons');
+
+  // Bootstrap Select
+  // --------------------------------------------------------------------
+  if (selectPicker.length) {
+    selectPicker.selectpicker();
+  }
+
+  // Select2
+  // --------------------------------------------------------------------
+
+  // Default
+  if (select2.length) {
+    select2.each(function () {
+      var $this = $(this);
+      $this.wrap('<div class="position-relative"></div>').select2({
+        placeholder: 'Select value',
+        dropdownParent: $this.parent()
+      });
+    });
+  }
+
+  // Select2 Icons
+  if (select2Icons.length) {
+    // custom template to render icons
+    function renderIcons(option) {
+      if (!option.id) {
+        return option.text;
+      }
+      var $icon = "<i class='" + $(option.element).data('icon') + " me-2'></i>" + option.text;
+
+      return $icon;
+    }
+    select2Icons.wrap('<div class="position-relative"></div>').select2({
+      templateResult: renderIcons,
+      templateSelection: renderIcons,
+      escapeMarkup: function (es) {
+        return es;
+      }
+    });
+  }
+});

httpdocs/themes/vuexy/js/forms-sliders.js

@@ -0,0 +1,328 @@
+/**
+ * Sliders
+ */
+'use strict';
+
+(function () {
+  const sliderBasic = document.getElementById('slider-basic'),
+    sliderHandles = document.getElementById('slider-handles'),
+    sliderSteps = document.getElementById('slider-steps'),
+    sliderTap = document.getElementById('slider-tap'),
+    sliderDrag = document.getElementById('slider-drag'),
+    sliderFixedDrag = document.getElementById('slider-fixed-drag'),
+    sliderCombined = document.getElementById('slider-combined-options'),
+    sliderHover = document.getElementById('slider-hover'),
+    sliderPips = document.getElementById('slider-pips');
+
+  // Basic
+  // --------------------------------------------------------------------
+
+  if (sliderBasic) {
+    noUiSlider.create(sliderBasic, {
+      start: [50],
+      connect: [true, false],
+      direction: isRtl ? 'rtl' : 'ltr',
+      range: {
+        min: 0,
+        max: 100
+      }
+    });
+  }
+
+  // Handles
+  // --------------------------------------------------------------------
+  if (sliderHandles) {
+    noUiSlider.create(sliderHandles, {
+      start: [0, 50],
+      direction: isRtl ? 'rtl' : 'ltr',
+      step: 5,
+      connect: true,
+      range: {
+        min: 0,
+        max: 100
+      },
+      pips: {
+        mode: 'range',
+        density: 5,
+        stepped: true
+      }
+    });
+  }
+
+  // Steps
+  // --------------------------------------------------------------------
+  if (sliderSteps) {
+    noUiSlider.create(sliderSteps, {
+      start: [0, 30],
+      snap: true,
+      connect: true,
+      direction: isRtl ? 'rtl' : 'ltr',
+      range: {
+        min: 0,
+        '10%': 10,
+        '20%': 20,
+        '30%': 30,
+        '40%': 40,
+        '50%': 50,
+        max: 100
+      }
+    });
+  }
+
+  // Tap
+  // --------------------------------------------------------------------
+  if (sliderTap) {
+    noUiSlider.create(sliderTap, {
+      start: [10, 30],
+      behaviour: 'tap',
+      direction: isRtl ? 'rtl' : 'ltr',
+      connect: true,
+      range: {
+        min: 10,
+        max: 100
+      }
+    });
+  }
+
+  // Drag
+  // --------------------------------------------------------------------
+  if (sliderDrag) {
+    noUiSlider.create(sliderDrag, {
+      start: [40, 60],
+      limit: 20,
+      behaviour: 'drag',
+      direction: isRtl ? 'rtl' : 'ltr',
+      connect: true,
+      range: {
+        min: 20,
+        max: 80
+      }
+    });
+  }
+
+  // Fixed Drag
+  // --------------------------------------------------------------------
+  if (sliderFixedDrag) {
+    noUiSlider.create(sliderFixedDrag, {
+      start: [40, 60],
+      behaviour: 'drag-fixed',
+      direction: isRtl ? 'rtl' : 'ltr',
+      connect: true,
+      range: {
+        min: 20,
+        max: 80
+      }
+    });
+  }
+
+  // Combined Options
+  // --------------------------------------------------------------------
+  if (sliderCombined) {
+    noUiSlider.create(sliderCombined, {
+      start: [40, 60],
+      behaviour: 'drag-tap',
+      direction: isRtl ? 'rtl' : 'ltr',
+      connect: true,
+      range: {
+        min: 20,
+        max: 80
+      }
+    });
+  }
+
+  // Hover
+  // --------------------------------------------------------------------
+  if (sliderHover) {
+    noUiSlider.create(sliderHover, {
+      start: 20,
+      behaviour: 'hover-snap-tap',
+      direction: isRtl ? 'rtl' : 'ltr',
+      range: {
+        min: 0,
+        max: 100
+      }
+    });
+
+    sliderHover.noUiSlider.on('hover', function (value) {
+      document.getElementById('slider-val').innerHTML = value;
+    });
+  }
+
+  // Scale and Pips
+  // --------------------------------------------------------------------
+  if (sliderPips) {
+    noUiSlider.create(sliderPips, {
+      start: [10],
+      behaviour: 'tap-drag',
+      step: 10,
+      tooltips: true,
+      range: {
+        min: 0,
+        max: 100
+      },
+      pips: {
+        mode: 'steps',
+        stepped: true,
+        density: 5
+      },
+      direction: isRtl ? 'rtl' : 'ltr'
+    });
+  }
+
+  // colors
+  // --------------------------------------------------------------------
+  const sliderPrimary = document.getElementById('slider-primary'),
+    sliderSuccess = document.getElementById('slider-success'),
+    sliderDanger = document.getElementById('slider-danger'),
+    sliderInfo = document.getElementById('slider-info'),
+    sliderWarning = document.getElementById('slider-warning'),
+    colorOptions = {
+      start: [30, 50],
+      connect: true,
+      behaviour: 'tap-drag',
+      step: 10,
+      tooltips: true,
+      range: {
+        min: 0,
+        max: 100
+      },
+      pips: {
+        mode: 'steps',
+        stepped: true,
+        density: 5
+      },
+      direction: isRtl ? 'rtl' : 'ltr'
+    };
+
+  if (sliderPrimary) {
+    noUiSlider.create(sliderPrimary, colorOptions);
+  }
+  if (sliderSuccess) {
+    noUiSlider.create(sliderSuccess, colorOptions);
+  }
+  if (sliderDanger) {
+    noUiSlider.create(sliderDanger, colorOptions);
+  }
+  if (sliderInfo) {
+    noUiSlider.create(sliderInfo, colorOptions);
+  }
+  if (sliderWarning) {
+    noUiSlider.create(sliderWarning, colorOptions);
+  }
+
+  // Dynamic Slider
+  // --------------------------------------------------------------------
+  const dynamicSlider = document.getElementById('slider-dynamic'),
+    sliderSelect = document.getElementById('slider-select'),
+    sliderInput = document.getElementById('slider-input');
+
+  if (dynamicSlider) {
+    noUiSlider.create(dynamicSlider, {
+      start: [10, 30],
+      connect: true,
+      direction: isRtl ? 'rtl' : 'ltr',
+      range: {
+        min: -20,
+        max: 40
+      }
+    });
+
+    dynamicSlider.noUiSlider.on('update', function (values, handle) {
+      const value = values[handle];
+
+      if (handle) {
+        sliderInput.value = value;
+      } else {
+        sliderSelect.value = Math.round(value);
+      }
+    });
+  }
+
+  if (sliderSelect) {
+    for (let i = -20; i <= 40; i++) {
+      let option = document.createElement('option');
+      option.text = i;
+      option.value = i;
+
+      sliderSelect.appendChild(option);
+    }
+    sliderSelect.addEventListener('change', function () {
+      dynamicSlider.noUiSlider.set([this.value, null]);
+    });
+  }
+
+  if (sliderInput) {
+    sliderInput.addEventListener('change', function () {
+      dynamicSlider.noUiSlider.set([null, this.value]);
+    });
+  }
+
+  // Vertical
+  // --------------------------------------------------------------------
+  const defaultVertical = document.getElementById('slider-vertical'),
+    connectVertical = document.getElementById('slider-connect-upper'),
+    tooltipVertical = document.getElementById('slider-vertical-tooltip'),
+    limitVertical = document.getElementById('slider-vertical-limit');
+
+  // Default
+  if (defaultVertical) {
+    defaultVertical.style.height = '200px';
+    noUiSlider.create(defaultVertical, {
+      start: [40, 60],
+      orientation: 'vertical',
+      behaviour: 'drag',
+      connect: true,
+      range: {
+        min: 0,
+        max: 100
+      }
+    });
+  }
+
+  // Connect Upper
+  if (connectVertical) {
+    connectVertical.style.height = '200px';
+    noUiSlider.create(connectVertical, {
+      start: 40,
+      orientation: 'vertical',
+      behaviour: 'drag',
+      connect: 'upper',
+      range: {
+        min: 0,
+        max: 100
+      }
+    });
+  }
+
+  // Vertical Tooltip
+  if (tooltipVertical) {
+    tooltipVertical.style.height = '200px';
+    noUiSlider.create(tooltipVertical, {
+      start: 10,
+      orientation: 'vertical',
+      behaviour: 'drag',
+      tooltips: true,
+      range: {
+        min: 0,
+        max: 100
+      }
+    });
+  }
+
+  // Limit
+  if (limitVertical) {
+    limitVertical.style.height = '200px';
+    noUiSlider.create(limitVertical, {
+      start: [0, 40],
+      orientation: 'vertical',
+      behaviour: 'drag',
+      limit: 60,
+      tooltips: true,
+      connect: true,
+      range: {
+        min: 0,
+        max: 100
+      }
+    });
+  }
+})();

httpdocs/themes/vuexy/js/forms-tagify.js

@@ -0,0 +1,301 @@
+/**
+ * Tagify
+ */
+
+'use strict';
+
+(function () {
+  // Basic
+  //------------------------------------------------------
+  const tagifyBasicEl = document.querySelector('#TagifyBasic');
+  const TagifyBasic = new Tagify(tagifyBasicEl);
+
+  // Read only
+  //------------------------------------------------------
+  const tagifyReadonlyEl = document.querySelector('#TagifyReadonly');
+  const TagifyReadonly = new Tagify(tagifyReadonlyEl);
+
+  // Custom list & inline suggestion
+  //------------------------------------------------------
+  const TagifyCustomInlineSuggestionEl = document.querySelector('#TagifyCustomInlineSuggestion');
+  const TagifyCustomListSuggestionEl = document.querySelector('#TagifyCustomListSuggestion');
+
+  const 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'
+  ];
+  // Inline
+  let TagifyCustomInlineSuggestion = new Tagify(TagifyCustomInlineSuggestionEl, {
+    whitelist: whitelist,
+    maxTags: 10,
+    dropdown: {
+      maxItems: 20,
+      classname: 'tags-inline',
+      enabled: 0,
+      closeOnSelect: false
+    }
+  });
+  // List
+  let TagifyCustomListSuggestion = new Tagify(TagifyCustomListSuggestionEl, {
+    whitelist: whitelist,
+    maxTags: 10,
+    dropdown: {
+      maxItems: 20,
+      classname: '',
+      enabled: 0,
+      closeOnSelect: false
+    }
+  });
+
+  // Users List suggestion
+  //------------------------------------------------------
+  const TagifyUserListEl = document.querySelector('#TagifyUserList');
+
+  const usersList = [
+    {
+      value: 1,
+      name: 'Justinian Hattersley',
+      avatar: 'https://i.pravatar.cc/80?img=1',
+      email: 'jhattersley0@ucsd.edu'
+    },
+    {
+      value: 2,
+      name: 'Antons Esson',
+      avatar: 'https://i.pravatar.cc/80?img=2',
+      email: 'aesson1@ning.com'
+    },
+    {
+      value: 3,
+      name: 'Ardeen Batisse',
+      avatar: 'https://i.pravatar.cc/80?img=3',
+      email: 'abatisse2@nih.gov'
+    },
+    {
+      value: 4,
+      name: 'Graeme Yellowley',
+      avatar: 'https://i.pravatar.cc/80?img=4',
+      email: 'gyellowley3@behance.net'
+    },
+    {
+      value: 5,
+      name: 'Dido Wilford',
+      avatar: 'https://i.pravatar.cc/80?img=5',
+      email: 'dwilford4@jugem.jp'
+    },
+    {
+      value: 6,
+      name: 'Celesta Orwin',
+      avatar: 'https://i.pravatar.cc/80?img=6',
+      email: 'corwin5@meetup.com'
+    },
+    {
+      value: 7,
+      name: 'Sally Main',
+      avatar: 'https://i.pravatar.cc/80?img=7',
+      email: 'smain6@techcrunch.com'
+    },
+    {
+      value: 8,
+      name: 'Grethel Haysman',
+      avatar: 'https://i.pravatar.cc/80?img=8',
+      email: 'ghaysman7@mashable.com'
+    },
+    {
+      value: 9,
+      name: 'Marvin Mandrake',
+      avatar: 'https://i.pravatar.cc/80?img=9',
+      email: 'mmandrake8@sourceforge.net'
+    },
+    {
+      value: 10,
+      name: 'Corrie Tidey',
+      avatar: 'https://i.pravatar.cc/80?img=10',
+      email: 'ctidey9@youtube.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>
+        <div class='tagify__tag__avatar-wrap'>
+          <img onerror="this.style.visibility='hidden'" src="${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 align-items-center ${tagData.class ? tagData.class : ''}'
+      tabindex="0"
+      role="option"
+    >
+      ${
+        tagData.avatar
+          ? `<div class='tagify__dropdown__item__avatar-wrap'>
+          <img onerror="this.style.visibility='hidden'" src="${tagData.avatar}">
+        </div>`
+          : ''
+      }
+      <strong>${tagData.name}</strong>
+      <span>${tagData.email}</span>
+    </div>
+  `;
+  }
+
+  // initialize Tagify on the above input node reference
+  let TagifyUserList = new Tagify(TagifyUserListEl, {
+    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
+  });
+
+  TagifyUserList.on('dropdown:show dropdown:updated', onDropdownShow);
+  TagifyUserList.on('dropdown:select', onSelectSuggestion);
+
+  let addAllSuggestionsEl;
+
+  function onDropdownShow(e) {
+    let dropdownContentEl = e.detail.tagify.DOM.dropdown.content;
+
+    if (TagifyUserList.suggestedListItems.length > 1) {
+      addAllSuggestionsEl = getAddAllSuggestionsEl();
+
+      // insert "addAllSuggestionsEl" as the first element in the suggestions list
+      dropdownContentEl.insertBefore(addAllSuggestionsEl, dropdownContentEl.firstChild);
+    }
+  }
+
+  function onSelectSuggestion(e) {
+    if (e.detail.elm == addAllSuggestionsEl) TagifyUserList.dropdown.selectAll.call(TagifyUserList);
+  }
+
+  // create an "add all" custom suggestion element every time the dropdown changes
+  function getAddAllSuggestionsEl() {
+    // suggestions items should be based on "dropdownItem" template
+    return TagifyUserList.parseTemplate('dropdownItem', [
+      {
+        class: 'addAll',
+        name: 'Add all',
+        email:
+          TagifyUserList.settings.whitelist.reduce(function (remainingSuggestions, item) {
+            return TagifyUserList.isTagDuplicate(item.value) ? remainingSuggestions : remainingSuggestions + 1;
+          }, 0) + ' Members'
+      }
+    ]);
+  }
+
+  // Email List suggestion
+  //------------------------------------------------------
+  // generate random whitelist items (for the demo)
+  let randomStringsArr = Array.apply(null, Array(100)).map(function () {
+    return (
+      Array.apply(null, Array(~~(Math.random() * 10 + 3)))
+        .map(function () {
+          return String.fromCharCode(Math.random() * (123 - 97) + 97);
+        })
+        .join('') + '@gmail.com'
+    );
+  });
+
+  const TagifyEmailListEl = document.querySelector('#TagifyEmailList'),
+    TagifyEmailList = new Tagify(TagifyEmailListEl, {
+      // email address validation (https://stackoverflow.com/a/46181/104380)
+      pattern:
+        /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+      whitelist: randomStringsArr,
+      callbacks: {
+        invalid: onInvalidTag
+      },
+      dropdown: {
+        position: 'text',
+        enabled: 1 // show suggestions dropdown after 1 typed character
+      }
+    }),
+    button = TagifyEmailListEl.nextElementSibling; // "add new tag" action-button
+
+  button.addEventListener('click', onAddButtonClick);
+
+  function onAddButtonClick() {
+    TagifyEmailList.addEmptyTag();
+  }
+
+  function onInvalidTag(e) {
+    console.log('invalid', e.detail);
+  }
+})();

httpdocs/themes/vuexy/js/forms-typeahead.js

@@ -0,0 +1,283 @@
+/**
+ * Typeahead (jquery)
+ */
+
+'use strict';
+
+$(function () {
+  // String Matcher function
+  var substringMatcher = function (strs) {
+    return function findMatches(q, cb) {
+      var matches, substrRegex;
+      matches = [];
+      substrRegex = new RegExp(q, 'i');
+      $.each(strs, function (i, str) {
+        if (substrRegex.test(str)) {
+          matches.push(str);
+        }
+      });
+
+      cb(matches);
+    };
+  };
+  var states = [
+    'Alabama',
+    'Alaska',
+    'Arizona',
+    'Arkansas',
+    'California',
+    'Colorado',
+    'Connecticut',
+    'Delaware',
+    'Florida',
+    'Georgia',
+    'Hawaii',
+    'Idaho',
+    'Illinois',
+    'Indiana',
+    'Iowa',
+    'Kansas',
+    'Kentucky',
+    'Louisiana',
+    'Maine',
+    'Maryland',
+    'Massachusetts',
+    'Michigan',
+    'Minnesota',
+    'Mississippi',
+    'Missouri',
+    'Montana',
+    'Nebraska',
+    'Nevada',
+    'New Hampshire',
+    'New Jersey',
+    'New Mexico',
+    'New York',
+    'North Carolina',
+    'North Dakota',
+    'Ohio',
+    'Oklahoma',
+    'Oregon',
+    'Pennsylvania',
+    'Rhode Island',
+    'South Carolina',
+    'South Dakota',
+    'Tennessee',
+    'Texas',
+    'Utah',
+    'Vermont',
+    'Virginia',
+    'Washington',
+    'West Virginia',
+    'Wisconsin',
+    'Wyoming'
+  ];
+
+  if (isRtl) {
+    $('.typeahead').attr('dir', 'rtl');
+  }
+
+  // Basic
+  // --------------------------------------------------------------------
+  $('.typeahead').typeahead(
+    {
+      hint: !isRtl,
+      highlight: true,
+      minLength: 1
+    },
+    {
+      name: 'states',
+      source: substringMatcher(states)
+    }
+  );
+
+  var bloodhoundBasicExample = new Bloodhound({
+    datumTokenizer: Bloodhound.tokenizers.whitespace,
+    queryTokenizer: Bloodhound.tokenizers.whitespace,
+    local: states
+  });
+
+  // Bloodhound Example
+  // --------------------------------------------------------------------
+  $('.typeahead-bloodhound').typeahead(
+    {
+      hint: !isRtl,
+      highlight: true,
+      minLength: 1
+    },
+    {
+      name: 'states',
+      source: bloodhoundBasicExample
+    }
+  );
+
+  var prefetchExample = new Bloodhound({
+    datumTokenizer: Bloodhound.tokenizers.whitespace,
+    queryTokenizer: Bloodhound.tokenizers.whitespace,
+    prefetch: assetsPath + 'json/typeahead.json'
+  });
+
+  // Prefetch Example
+  // --------------------------------------------------------------------
+  $('.typeahead-prefetch').typeahead(
+    {
+      hint: !isRtl,
+      highlight: true,
+      minLength: 1
+    },
+    {
+      name: 'states',
+      source: prefetchExample
+    }
+  );
+
+  // Render default Suggestions
+  function renderDefaults(q, sync) {
+    if (q === '') {
+      sync(prefetchExample.get('Alaska', 'New York', 'Washington'));
+    } else {
+      prefetchExample.search(q, sync);
+    }
+  }
+  // Default Suggestions
+  // --------------------------------------------------------------------
+  $('.typeahead-default-suggestions').typeahead(
+    {
+      hint: !isRtl,
+      highlight: true,
+      minLength: 0
+    },
+    {
+      name: 'states',
+      source: renderDefaults
+    }
+  );
+
+  var customTemplate = new Bloodhound({
+    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
+    queryTokenizer: Bloodhound.tokenizers.whitespace,
+    prefetch: assetsPath + 'json/typeahead-data-2.json'
+  });
+
+  // Custom Template
+  // --------------------------------------------------------------------
+  $('.typeahead-custom-template').typeahead(null, {
+    name: 'best-movies',
+    display: 'value',
+    source: customTemplate,
+    highlight: true,
+    hint: !isRtl,
+    templates: {
+      empty: [
+        '<div class="empty-message p-2">',
+        'unable to find any Best Picture winners that match the current query',
+        '</div>'
+      ].join('\n'),
+      suggestion: function (data) {
+        return '<div><strong>' + data.value + '</strong> – ' + data.year + '</div>';
+      }
+    }
+  });
+
+  var nbaTeams = [
+    { team: 'Boston Celtics' },
+    { team: 'Dallas Mavericks' },
+    { team: 'Brooklyn Nets' },
+    { team: 'Houston Rockets' },
+    { team: 'New York Knicks' },
+    { team: 'Memphis Grizzlies' },
+    { team: 'Philadelphia 76ers' },
+    { team: 'New Orleans Hornets' },
+    { team: 'Toronto Raptors' },
+    { team: 'San Antonio Spurs' },
+    { team: 'Chicago Bulls' },
+    { team: 'Denver Nuggets' },
+    { team: 'Cleveland Cavaliers' },
+    { team: 'Minnesota Timberwolves' },
+    { team: 'Detroit Pistons' },
+    { team: 'Portland Trail Blazers' },
+    { team: 'Indiana Pacers' },
+    { team: 'Oklahoma City Thunder' },
+    { team: 'Milwaukee Bucks' },
+    { team: 'Utah Jazz' },
+    { team: 'Atlanta Hawks' },
+    { team: 'Golden State Warriors' },
+    { team: 'Charlotte Bobcats' },
+    { team: 'Los Angeles Clippers' },
+    { team: 'Miami Heat' },
+    { team: 'Los Angeles Lakers' },
+    { team: 'Orlando Magic' },
+    { team: 'Phoenix Suns' },
+    { team: 'Washington Wizards' },
+    { team: 'Sacramento Kings' }
+  ];
+  var nhlTeams = [
+    { team: 'New Jersey Devils' },
+    { team: 'New York Islanders' },
+    { team: 'New York Rangers' },
+    { team: 'Philadelphia Flyers' },
+    { team: 'Pittsburgh Penguins' },
+    { team: 'Chicago Blackhawks' },
+    { team: 'Columbus Blue Jackets' },
+    { team: 'Detroit Red Wings' },
+    { team: 'Nashville Predators' },
+    { team: 'St. Louis Blues' },
+    { team: 'Boston Bruins' },
+    { team: 'Buffalo Sabres' },
+    { team: 'Montreal Canadiens' },
+    { team: 'Ottawa Senators' },
+    { team: 'Toronto Maple Leafs' },
+    { team: 'Calgary Flames' },
+    { team: 'Colorado Avalanche' },
+    { team: 'Edmonton Oilers' },
+    { team: 'Minnesota Wild' },
+    { team: 'Vancouver Canucks' },
+    { team: 'Carolina Hurricanes' },
+    { team: 'Florida Panthers' },
+    { team: 'Tampa Bay Lightning' },
+    { team: 'Washington Capitals' },
+    { team: 'Winnipeg Jets' },
+    { team: 'Anaheim Ducks' },
+    { team: 'Dallas Stars' },
+    { team: 'Los Angeles Kings' },
+    { team: 'Phoenix Coyotes' },
+    { team: 'San Jose Sharks' }
+  ];
+
+  var nbaExample = new Bloodhound({
+    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
+    queryTokenizer: Bloodhound.tokenizers.whitespace,
+    local: nbaTeams
+  });
+  var nhlExample = new Bloodhound({
+    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
+    queryTokenizer: Bloodhound.tokenizers.whitespace,
+    local: nhlTeams
+  });
+
+  // Multiple
+  // --------------------------------------------------------------------
+  $('.typeahead-multi-datasets').typeahead(
+    {
+      hint: !isRtl,
+      highlight: true,
+      minLength: 0
+    },
+    {
+      name: 'nba-teams',
+      source: nbaExample,
+      display: 'team',
+      templates: {
+        header: '<h4 class="league-name border-bottom mb-0 mx-3 mt-3 pb-2">NBA Teams</h4>'
+      }
+    },
+    {
+      name: 'nhl-teams',
+      source: nhlExample,
+      display: 'team',
+      templates: {
+        header: '<h4 class="league-name border-bottom mb-0 mx-3 mt-3 pb-2">NHL Teams</h4>'
+      }
+    }
+  );
+});

httpdocs/themes/vuexy/js/main.js

@@ -0,0 +1,585 @@
+/**
+ * Main
+ */
+
+'use strict';
+
+let isRtl = window.Helpers.isRtl(),
+  isDarkStyle = window.Helpers.isDarkStyle(),
+  menu,
+  animate,
+  isHorizontalLayout = false;
+
+if (document.getElementById('layout-menu')) {
+  isHorizontalLayout = document.getElementById('layout-menu').classList.contains('menu-horizontal');
+}
+
+(function () {
+  if (typeof Waves !== 'undefined') {
+    Waves.init();
+    Waves.attach(".btn[class*='btn-']:not([class*='btn-outline-']):not([class*='btn-label-'])", ['waves-light']);
+    Waves.attach("[class*='btn-outline-']");
+    Waves.attach("[class*='btn-label-']");
+    Waves.attach('.pagination .page-item .page-link');
+  }
+
+  // Initialize menu
+  //-----------------
+
+  let layoutMenuEl = document.querySelectorAll('#layout-menu');
+  layoutMenuEl.forEach(function (element) {
+    menu = new Menu(element, {
+      orientation: isHorizontalLayout ? 'horizontal' : 'vertical',
+      closeChildren: isHorizontalLayout ? true : false,
+      // ? This option only works with Horizontal menu
+      showDropdownOnHover: localStorage.getItem('templateCustomizer-' + templateName + '--ShowDropdownOnHover') // If value(showDropdownOnHover) is set in local storage
+        ? localStorage.getItem('templateCustomizer-' + templateName + '--ShowDropdownOnHover') === 'true' // Use the local storage value
+        : window.templateCustomizer !== undefined // If value is set in config.js
+        ? window.templateCustomizer.settings.defaultShowDropdownOnHover // Use the config.js value
+        : true // Use this if you are not using the config.js and want to set value directly from here
+    });
+    // Change parameter to true if you want scroll animation
+    window.Helpers.scrollToActive((animate = false));
+    window.Helpers.mainMenu = menu;
+  });
+
+  // Initialize menu togglers and bind click on each
+  let menuToggler = document.querySelectorAll('.layout-menu-toggle');
+  menuToggler.forEach(item => {
+    item.addEventListener('click', event => {
+      event.preventDefault();
+      window.Helpers.toggleCollapsed();
+      // Enable menu state with local storage support if enableMenuLocalStorage = true from config.js
+      if (config.enableMenuLocalStorage && !window.Helpers.isSmallScreen()) {
+        try {
+          localStorage.setItem(
+            'templateCustomizer-' + templateName + '--LayoutCollapsed',
+            String(window.Helpers.isCollapsed())
+          );
+        } catch (e) {}
+      }
+    });
+  });
+
+  // Menu swipe gesture
+
+  // Detect swipe gesture on the target element and call swipe In
+  window.Helpers.swipeIn('.drag-target', function (e) {
+    window.Helpers.setCollapsed(false);
+  });
+
+  // Detect swipe gesture on the target element and call swipe Out
+  window.Helpers.swipeOut('#layout-menu', function (e) {
+    if (window.Helpers.isSmallScreen()) window.Helpers.setCollapsed(true);
+  });
+
+  // Display in main menu when menu scrolls
+  let menuInnerContainer = document.getElementsByClassName('menu-inner'),
+    menuInnerShadow = document.getElementsByClassName('menu-inner-shadow')[0];
+  if (menuInnerContainer.length > 0 && menuInnerShadow) {
+    menuInnerContainer[0].addEventListener('ps-scroll-y', function () {
+      if (this.querySelector('.ps__thumb-y').offsetTop) {
+        menuInnerShadow.style.display = 'block';
+      } else {
+        menuInnerShadow.style.display = 'none';
+      }
+    });
+  }
+
+  // Style Switcher (Light/Dark Mode)
+  //---------------------------------
+
+  let styleSwitcherToggleEl = document.querySelector('.style-switcher-toggle');
+  if (window.templateCustomizer) {
+    // setStyle light/dark on click of styleSwitcherToggleEl
+    if (styleSwitcherToggleEl) {
+      styleSwitcherToggleEl.addEventListener('click', function () {
+        if (window.Helpers.isLightStyle()) {
+          window.templateCustomizer.setStyle('dark');
+        } else {
+          window.templateCustomizer.setStyle('light');
+        }
+      });
+    }
+    // Update style switcher icon and tooltip based on current style
+    if (window.Helpers.isLightStyle()) {
+      if (styleSwitcherToggleEl) {
+        styleSwitcherToggleEl.querySelector('i').classList.add('ti-moon-stars');
+        new bootstrap.Tooltip(styleSwitcherToggleEl, {
+          title: 'Dark mode',
+          fallbackPlacements: ['bottom']
+        });
+      }
+      switchImage('light');
+    } else {
+      if (styleSwitcherToggleEl) {
+        styleSwitcherToggleEl.querySelector('i').classList.add('ti-sun');
+        new bootstrap.Tooltip(styleSwitcherToggleEl, {
+          title: 'Light mode',
+          fallbackPlacements: ['bottom']
+        });
+      }
+      switchImage('dark');
+    }
+  } else {
+    // Removed style switcher element if not using template customizer
+    styleSwitcherToggleEl.parentElement.remove();
+  }
+
+  // Update light/dark image based on current style
+  function switchImage(style) {
+    const switchImagesList = [].slice.call(document.querySelectorAll('[data-app-' + style + '-img]'));
+    switchImagesList.map(function (imageEl) {
+      const setImage = imageEl.getAttribute('data-app-' + style + '-img');
+      imageEl.src = assetsPath + 'img/' + setImage; // Using window.assetsPath to get the exact relative path
+    });
+  }
+
+  // Internationalization (Language Dropdown)
+  // ---------------------------------------
+
+  if (typeof i18next !== 'undefined' && typeof i18NextHttpBackend !== 'undefined') {
+    i18next
+      .use(i18NextHttpBackend)
+      .init({
+        lng: 'en',
+        debug: false,
+        fallbackLng: 'en',
+        backend: {
+          loadPath: assetsPath + 'json/locales/{{lng}}.json'
+        },
+        returnObjects: true
+      })
+      .then(function (t) {
+        localize();
+      });
+  }
+
+  let languageDropdown = document.getElementsByClassName('dropdown-language');
+
+  if (languageDropdown.length) {
+    let dropdownItems = languageDropdown[0].querySelectorAll('.dropdown-item');
+
+    for (let i = 0; i < dropdownItems.length; i++) {
+      dropdownItems[i].addEventListener('click', function () {
+        let currentLanguage = this.getAttribute('data-language'),
+          selectedLangFlag = this.querySelector('.fi').getAttribute('class');
+
+        for (let sibling of this.parentNode.children) {
+          sibling.classList.remove('selected');
+        }
+        this.classList.add('selected');
+
+        languageDropdown[0].querySelector('.dropdown-toggle .fi').className = selectedLangFlag;
+
+        i18next.changeLanguage(currentLanguage, (err, t) => {
+          if (err) return console.log('something went wrong loading', err);
+          localize();
+        });
+      });
+    }
+  }
+
+  function localize() {
+    let i18nList = document.querySelectorAll('[data-i18n]');
+    // Set the current language in dd
+    let currentLanguageEle = document.querySelector('.dropdown-item[data-language="' + i18next.language + '"]');
+
+    if (currentLanguageEle) {
+      currentLanguageEle.click();
+    }
+
+    i18nList.forEach(function (item) {
+      item.innerHTML = i18next.t(item.dataset.i18n);
+    });
+  }
+
+  // Notification
+  // ------------
+  const notificationMarkAsReadAll = document.querySelector('.dropdown-notifications-all');
+  const notificationMarkAsReadList = document.querySelectorAll('.dropdown-notifications-read');
+
+  // Notification: Mark as all as read
+  if (notificationMarkAsReadAll) {
+    notificationMarkAsReadAll.addEventListener('click', event => {
+      notificationMarkAsReadList.forEach(item => {
+        item.closest('.dropdown-notifications-item').classList.add('marked-as-read');
+      });
+    });
+  }
+  // Notification: Mark as read/unread onclick of dot
+  if (notificationMarkAsReadList) {
+    notificationMarkAsReadList.forEach(item => {
+      item.addEventListener('click', event => {
+        item.closest('.dropdown-notifications-item').classList.toggle('marked-as-read');
+      });
+    });
+  }
+
+  // Notification: Mark as read/unread onclick of dot
+  const notificationArchiveMessageList = document.querySelectorAll('.dropdown-notifications-archive');
+  notificationArchiveMessageList.forEach(item => {
+    item.addEventListener('click', event => {
+      item.closest('.dropdown-notifications-item').remove();
+    });
+  });
+
+  // Init helpers & misc
+  // --------------------
+
+  // Init BS Tooltip
+  const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+  tooltipTriggerList.map(function (tooltipTriggerEl) {
+    return new bootstrap.Tooltip(tooltipTriggerEl);
+  });
+
+  // Accordion active class
+  const accordionActiveFunction = function (e) {
+    if (e.type == 'show.bs.collapse' || e.type == 'show.bs.collapse') {
+      e.target.closest('.accordion-item').classList.add('active');
+    } else {
+      e.target.closest('.accordion-item').classList.remove('active');
+    }
+  };
+
+  const accordionTriggerList = [].slice.call(document.querySelectorAll('.accordion'));
+  const accordionList = accordionTriggerList.map(function (accordionTriggerEl) {
+    accordionTriggerEl.addEventListener('show.bs.collapse', accordionActiveFunction);
+    accordionTriggerEl.addEventListener('hide.bs.collapse', accordionActiveFunction);
+  });
+
+  // If layout is RTL add .dropdown-menu-end class to .dropdown-menu
+  if (isRtl) {
+    Helpers._addClass('dropdown-menu-end', document.querySelectorAll('#layout-navbar .dropdown-menu'));
+  }
+
+  // Auto update layout based on screen size
+  window.Helpers.setAutoUpdate(true);
+
+  // Toggle Password Visibility
+  window.Helpers.initPasswordToggle();
+
+  // Speech To Text
+  window.Helpers.initSpeechToText();
+
+  // Init PerfectScrollbar in Navbar Dropdown (i.e notification)
+  window.Helpers.initNavbarDropdownScrollbar();
+
+  // On window resize listener
+  // -------------------------
+  window.addEventListener(
+    'resize',
+    function (event) {
+      // Hide open search input and set value blank
+      if (window.innerWidth >= window.Helpers.LAYOUT_BREAKPOINT) {
+        if (document.querySelector('.search-input-wrapper')) {
+          document.querySelector('.search-input-wrapper').classList.add('d-none');
+          document.querySelector('.search-input').value = '';
+        }
+      }
+      // Horizontal Layout : Update menu based on window size
+      let horizontalMenuTemplate = document.querySelector("[data-template^='horizontal-menu']");
+      if (horizontalMenuTemplate) {
+        setTimeout(function () {
+          if (window.innerWidth < window.Helpers.LAYOUT_BREAKPOINT) {
+            if (document.getElementById('layout-menu')) {
+              if (document.getElementById('layout-menu').classList.contains('menu-horizontal')) {
+                menu.switchMenu('vertical');
+              }
+            }
+          } else {
+            if (document.getElementById('layout-menu')) {
+              if (document.getElementById('layout-menu').classList.contains('menu-vertical')) {
+                menu.switchMenu('horizontal');
+              }
+            }
+          }
+        }, 100);
+      }
+    },
+    true
+  );
+
+  // Manage menu expanded/collapsed with templateCustomizer & local storage
+  //------------------------------------------------------------------
+
+  // If current layout is horizontal OR current window screen is small (overlay menu) than return from here
+  if (isHorizontalLayout || window.Helpers.isSmallScreen()) {
+    return;
+  }
+
+  // If current layout is vertical and current window screen is > small
+
+  // Auto update menu collapsed/expanded based on the themeConfig
+  if (typeof TemplateCustomizer !== 'undefined') {
+    if (window.templateCustomizer.settings.defaultMenuCollapsed) {
+      window.Helpers.setCollapsed(true, false);
+    }
+  }
+
+  // Manage menu expanded/collapsed state with local storage support If enableMenuLocalStorage = true in config.js
+  if (typeof config !== 'undefined') {
+    if (config.enableMenuLocalStorage) {
+      try {
+        if (
+          localStorage.getItem('templateCustomizer-' + templateName + '--LayoutCollapsed') !== null &&
+          localStorage.getItem('templateCustomizer-' + templateName + '--LayoutCollapsed') !== 'false'
+        )
+          window.Helpers.setCollapsed(
+            localStorage.getItem('templateCustomizer-' + templateName + '--LayoutCollapsed') === 'true',
+            false
+          );
+      } catch (e) {}
+    }
+  }
+})();
+
+// ! Removed following code if you do't wish to use jQuery. Remember that navbar search functionality will stop working on removal.
+if (typeof $ !== 'undefined') {
+  $(function () {
+    // ! TODO: Required to load after DOM is ready, did this now with jQuery ready.
+    window.Helpers.initSidebarToggle();
+    // Toggle Universal Sidebar
+
+    // Navbar Search with autosuggest (typeahead)
+    // ? You can remove the following JS if you don't want to use search functionality.
+    //----------------------------------------------------------------------------------
+
+    var searchToggler = $('.search-toggler'),
+      searchInputWrapper = $('.search-input-wrapper'),
+      searchInput = $('.search-input'),
+      contentBackdrop = $('.content-backdrop');
+
+    // Open search input on click of search icon
+    if (searchToggler.length) {
+      searchToggler.on('click', function () {
+        if (searchInputWrapper.length) {
+          searchInputWrapper.toggleClass('d-none');
+          searchInput.focus();
+        }
+      });
+    }
+    // Open search on 'CTRL+/'
+    $(document).on('keydown', function (event) {
+      let ctrlKey = event.ctrlKey,
+        slashKey = event.which === 191;
+
+      if (ctrlKey && slashKey) {
+        if (searchInputWrapper.length) {
+          searchInputWrapper.toggleClass('d-none');
+          searchInput.focus();
+        }
+      }
+    });
+    // Todo: Add container-xxl to twitter-typeahead
+    searchInput.on('focus', function () {
+      if (searchInputWrapper.hasClass('container-xxl')) {
+        searchInputWrapper.find('.twitter-typeahead').addClass('container-xxl');
+      }
+    });
+
+    if (searchInput.length) {
+      // Filter config
+      var filterConfig = function (data) {
+        return function findMatches(q, cb) {
+          let matches;
+          matches = [];
+          data.filter(function (i) {
+            if (i.name.toLowerCase().startsWith(q.toLowerCase())) {
+              matches.push(i);
+            } else if (
+              !i.name.toLowerCase().startsWith(q.toLowerCase()) &&
+              i.name.toLowerCase().includes(q.toLowerCase())
+            ) {
+              matches.push(i);
+              matches.sort(function (a, b) {
+                return b.name < a.name ? 1 : -1;
+              });
+            } else {
+              return [];
+            }
+          });
+          cb(matches);
+        };
+      };
+
+      // Search JSON
+      var searchJson = 'search-vertical.json'; // For vertical layout
+      if ($('#layout-menu').hasClass('menu-horizontal')) {
+        var searchJson = 'search-horizontal.json'; // For vertical layout
+      }
+      // Search API AJAX call
+      var searchData = $.ajax({
+        url: assetsPath + 'json/' + searchJson, //? Use your own search api instead
+        dataType: 'json',
+        async: false
+      }).responseJSON;
+      // Init typeahead on searchInput
+      searchInput.each(function () {
+        var $this = $(this);
+        searchInput
+          .typeahead(
+            {
+              hint: false,
+              classNames: {
+                menu: 'tt-menu navbar-search-suggestion',
+                cursor: 'active',
+                suggestion: 'suggestion d-flex justify-content-between px-3 py-2 w-100'
+              }
+            },
+            // ? Add/Update blocks as per need
+            // Pages
+            {
+              name: 'pages',
+              display: 'name',
+              limit: 5,
+              source: filterConfig(searchData.pages),
+              templates: {
+                header: '<h6 class="suggestions-header text-primary mb-0 mx-3 mt-3 pb-2">Pages</h6>',
+                suggestion: function ({ url, icon, name }) {
+                  return (
+                    '<a href="' +
+                    url +
+                    '">' +
+                    '<div>' +
+                    '<i class="ti ' +
+                    icon +
+                    ' me-2"></i>' +
+                    '<span class="align-middle">' +
+                    name +
+                    '</span>' +
+                    '</div>' +
+                    '</a>'
+                  );
+                },
+                notFound:
+                  '<div class="not-found px-3 py-2">' +
+                  '<h6 class="suggestions-header text-primary mb-2">Pages</h6>' +
+                  '<p class="py-2 mb-0"><i class="ti ti-alert-circle ti-xs me-2"></i> No Results Found</p>' +
+                  '</div>'
+              }
+            },
+            // Files
+            {
+              name: 'files',
+              display: 'name',
+              limit: 4,
+              source: filterConfig(searchData.files),
+              templates: {
+                header: '<h6 class="suggestions-header text-primary mb-0 mx-3 mt-3 pb-2">Files</h6>',
+                suggestion: function ({ src, name, subtitle, meta }) {
+                  return (
+                    '<a href="javascript:;">' +
+                    '<div class="d-flex w-50">' +
+                    '<img class="me-3" src="' +
+                    assetsPath +
+                    src +
+                    '" alt="' +
+                    name +
+                    '" height="32">' +
+                    '<div class="w-75">' +
+                    '<h6 class="mb-0">' +
+                    name +
+                    '</h6>' +
+                    '<small class="text-muted">' +
+                    subtitle +
+                    '</small>' +
+                    '</div>' +
+                    '</div>' +
+                    '<small class="text-muted">' +
+                    meta +
+                    '</small>' +
+                    '</a>'
+                  );
+                },
+                notFound:
+                  '<div class="not-found px-3 py-2">' +
+                  '<h6 class="suggestions-header text-primary mb-2">Files</h6>' +
+                  '<p class="py-2 mb-0"><i class="ti ti-alert-circle ti-xs me-2"></i> No Results Found</p>' +
+                  '</div>'
+              }
+            },
+            // Members
+            {
+              name: 'members',
+              display: 'name',
+              limit: 4,
+              source: filterConfig(searchData.members),
+              templates: {
+                header: '<h6 class="suggestions-header text-primary mb-0 mx-3 mt-3 pb-2">Members</h6>',
+                suggestion: function ({ name, src, subtitle }) {
+                  return (
+                    '<a href="app-user-view-account.html">' +
+                    '<div class="d-flex align-items-center">' +
+                    '<img class="rounded-circle me-3" src="' +
+                    assetsPath +
+                    src +
+                    '" alt="' +
+                    name +
+                    '" height="32">' +
+                    '<div class="user-info">' +
+                    '<h6 class="mb-0">' +
+                    name +
+                    '</h6>' +
+                    '<small class="text-muted">' +
+                    subtitle +
+                    '</small>' +
+                    '</div>' +
+                    '</div>' +
+                    '</a>'
+                  );
+                },
+                notFound:
+                  '<div class="not-found px-3 py-2">' +
+                  '<h6 class="suggestions-header text-primary mb-2">Members</h6>' +
+                  '<p class="py-2 mb-0"><i class="ti ti-alert-circle ti-xs me-2"></i> No Results Found</p>' +
+                  '</div>'
+              }
+            }
+          )
+          //On typeahead result render.
+          .bind('typeahead:render', function () {
+            // Show content backdrop,
+            contentBackdrop.addClass('show').removeClass('fade');
+          })
+          // On typeahead select
+          .bind('typeahead:select', function (ev, suggestion) {
+            // Open selected page
+            if (suggestion.url) {
+              window.location = suggestion.url;
+            }
+          })
+          // On typeahead close
+          .bind('typeahead:close', function () {
+            // Clear search
+            searchInput.val('');
+            $this.typeahead('val', '');
+            // Hide search input wrapper
+            searchInputWrapper.addClass('d-none');
+            // Fade content backdrop
+            contentBackdrop.addClass('fade').removeClass('show');
+          });
+
+        // On searchInput keyup, Fade content backdrop if search input is blank
+        searchInput.on('keyup', function () {
+          if (searchInput.val() == '') {
+            contentBackdrop.addClass('fade').removeClass('show');
+          }
+        });
+      });
+
+      // Init PerfectScrollbar in search result
+      var psSearch;
+      $('.navbar-search-suggestion').each(function () {
+        psSearch = new PerfectScrollbar($(this)[0], {
+          wheelPropagation: false,
+          suppressScrollX: true
+        });
+      });
+
+      searchInput.on('keyup', function () {
+        psSearch.update();
+      });
+    }
+  });
+}

httpdocs/themes/vuexy/js/modal-add-new-address.js

@@ -0,0 +1,73 @@
+/**
+ * Add New Address
+ */
+
+'use strict';
+
+// Select2 (jquery)
+$(function () {
+  const select2 = $('.select2');
+
+  // Select2 Country
+  if (select2.length) {
+    select2.each(function () {
+      var $this = $(this);
+      $this.wrap('<div class="position-relative"></div>').select2({
+        placeholder: 'Select value',
+        dropdownParent: $this.parent()
+      });
+    });
+  }
+});
+
+// Add New Address form validation
+document.addEventListener('DOMContentLoaded', function () {
+  (function () {
+    // initCustomOptionCheck on modal show to update the custom select
+    let addNewAddress = document.getElementById('addNewAddress');
+    addNewAddress.addEventListener('show.bs.modal', function (event) {
+      // Init custom option check
+      window.Helpers.initCustomOptionCheck();
+    });
+
+    FormValidation.formValidation(document.getElementById('addNewAddressForm'), {
+      fields: {
+        modalAddressFirstName: {
+          validators: {
+            notEmpty: {
+              message: 'Please enter your first name'
+            },
+            regexp: {
+              regexp: /^[a-zA-Zs]+$/,
+              message: 'The first name can only consist of alphabetical'
+            }
+          }
+        },
+        modalAddressLastName: {
+          validators: {
+            notEmpty: {
+              message: 'Please enter your last name'
+            },
+            regexp: {
+              regexp: /^[a-zA-Zs]+$/,
+              message: 'The last name can only consist of alphabetical'
+            }
+          }
+        }
+      },
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: '',
+          rowSelector: '.col-12'
+        }),
+        submitButton: new FormValidation.plugins.SubmitButton(),
+        // Submit the form when all fields are valid
+        // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+        autoFocus: new FormValidation.plugins.AutoFocus()
+      }
+    });
+  })();
+});

httpdocs/themes/vuexy/js/modal-add-new-cc.js

@@ -0,0 +1,107 @@
+/**
+ * Add new credit card
+ */
+
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function (e) {
+  (function () {
+    // Variables
+    const creditCardMask = document.querySelector('.credit-card-mask'),
+      expiryDateMask = document.querySelector('.expiry-date-mask'),
+      cvvMask = document.querySelector('.cvv-code-mask'),
+      btnReset = document.querySelector('.btn-reset');
+    let cleave;
+
+    // Credit Card
+    function initCleave() {
+      if (creditCardMask) {
+        cleave = new Cleave(creditCardMask, {
+          creditCard: true,
+          onCreditCardTypeChanged: function (type) {
+            if (type != '' && type != 'unknown') {
+              document.querySelector('.card-type').innerHTML =
+                '<img src="' +
+                assetsPath +
+                'img/icons/payments/' +
+                type +
+                '-cc.png" class="cc-icon-image" height="28"/>';
+            } else {
+              document.querySelector('.card-type').innerHTML = '';
+            }
+          }
+        });
+      }
+    }
+
+    // Init cleave on show modal (To fix the cc image issue)
+    let addNewCCModal = document.getElementById('addNewCCModal');
+    addNewCCModal.addEventListener('show.bs.modal', function (event) {
+      initCleave();
+    });
+
+    // Expiry Date Mask
+    if (expiryDateMask) {
+      new Cleave(expiryDateMask, {
+        date: true,
+        delimiter: '/',
+        datePattern: ['m', 'y']
+      });
+    }
+
+    // CVV
+    if (cvvMask) {
+      new Cleave(cvvMask, {
+        numeral: true,
+        numeralPositiveOnly: true
+      });
+    }
+
+    // Credit card form validation
+    FormValidation.formValidation(document.getElementById('addNewCCForm'), {
+      fields: {
+        modalAddCard: {
+          validators: {
+            notEmpty: {
+              message: 'Please enter your credit card number'
+            }
+          }
+        }
+      },
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: '',
+          rowSelector: '.col-12'
+        }),
+        submitButton: new FormValidation.plugins.SubmitButton(),
+        // Submit the form when all fields are valid
+        // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+        autoFocus: new FormValidation.plugins.AutoFocus()
+      },
+      init: instance => {
+        instance.on('plugins.message.placed', function (e) {
+          //* Move the error message out of the `input-group` element
+          if (e.element.parentElement.classList.contains('input-group')) {
+            e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
+          }
+        });
+      }
+    }).on('plugins.message.displayed', function (e) {
+      if (e.element.parentElement.classList.contains('input-group')) {
+        //* Move the error message out of the `input-group` element
+        e.element.parentElement.insertAdjacentElement('afterend', e.messageElement.parentElement);
+      }
+    });
+
+    // reset card image on click of cancel
+    btnReset.addEventListener('click', function (e) {
+      // blank '.card-type' innerHTML to remove image
+      document.querySelector('.card-type').innerHTML = '';
+      // destroy cleave and init again on modal open
+      cleave.destroy();
+    });
+  })();
+});

httpdocs/themes/vuexy/js/modal-add-permission.js

@@ -0,0 +1,35 @@
+/**
+ * Add Permission Modal JS
+ */
+
+'use strict';
+
+// Add permission form validation
+document.addEventListener('DOMContentLoaded', function (e) {
+  (function () {
+    FormValidation.formValidation(document.getElementById('addPermissionForm'), {
+      fields: {
+        modalPermissionName: {
+          validators: {
+            notEmpty: {
+              message: 'Please enter permission name'
+            }
+          }
+        }
+      },
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: '',
+          rowSelector: '.col-12'
+        }),
+        submitButton: new FormValidation.plugins.SubmitButton(),
+        // Submit the form when all fields are valid
+        // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+        autoFocus: new FormValidation.plugins.AutoFocus()
+      }
+    });
+  })();
+});

httpdocs/themes/vuexy/js/modal-add-role.js

@@ -0,0 +1,44 @@
+/**
+ * Add new role Modal JS
+ */
+
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function (e) {
+  (function () {
+    // add role form validation
+    FormValidation.formValidation(document.getElementById('addRoleForm'), {
+      fields: {
+        modalRoleName: {
+          validators: {
+            notEmpty: {
+              message: 'Please enter role name'
+            }
+          }
+        }
+      },
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: '',
+          rowSelector: '.col-12'
+        }),
+        submitButton: new FormValidation.plugins.SubmitButton(),
+        // Submit the form when all fields are valid
+        // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+        autoFocus: new FormValidation.plugins.AutoFocus()
+      }
+    });
+
+    // Select All checkbox click
+    const selectAll = document.querySelector('#selectAll'),
+      checkboxList = document.querySelectorAll('[type="checkbox"]');
+    selectAll.addEventListener('change', t => {
+      checkboxList.forEach(e => {
+        e.checked = t.target.checked;
+      });
+    });
+  })();
+});

httpdocs/themes/vuexy/js/modal-create-app.js

@@ -0,0 +1,86 @@
+/**
+ *  Modal Example Create App
+ */
+
+'use strict';
+
+$(function () {
+  // Modal id
+  const appModal = document.getElementById('createApp');
+
+  // Credit Card
+  const creditCardMask1 = document.querySelector('.app-credit-card-mask'),
+    expiryDateMask1 = document.querySelector('.app-expiry-date-mask'),
+    cvvMask1 = document.querySelector('.app-cvv-code-mask');
+  let cleave;
+
+  // Cleave JS card Mask
+  function initCleave() {
+    if (creditCardMask1) {
+      cleave = new Cleave(creditCardMask1, {
+        creditCard: true,
+        onCreditCardTypeChanged: function (type) {
+          if (type != '' && type != 'unknown') {
+            document.querySelector('.app-card-type').innerHTML =
+              '<img src="' + assetsPath + 'img/icons/payments/' + type + '-cc.png" class="cc-icon-image" height="28"/>';
+          } else {
+            document.querySelector('.app-card-type').innerHTML = '';
+          }
+        }
+      });
+    }
+  }
+
+  // Expiry Date Mask
+  if (expiryDateMask1) {
+    new Cleave(expiryDateMask1, {
+      date: true,
+      delimiter: '/',
+      datePattern: ['m', 'y']
+    });
+  }
+
+  // CVV
+  if (cvvMask1) {
+    new Cleave(cvvMask1, {
+      numeral: true,
+      numeralPositiveOnly: true
+    });
+  }
+  appModal.addEventListener('show.bs.modal', function (event) {
+    const wizardCreateApp = document.querySelector('#wizard-create-app');
+    if (typeof wizardCreateApp !== undefined && wizardCreateApp !== null) {
+      // Wizard next prev button
+      const wizardCreateAppNextList = [].slice.call(wizardCreateApp.querySelectorAll('.btn-next'));
+      const wizardCreateAppPrevList = [].slice.call(wizardCreateApp.querySelectorAll('.btn-prev'));
+      const wizardCreateAppBtnSubmit = wizardCreateApp.querySelector('.btn-submit');
+
+      const createAppStepper = new Stepper(wizardCreateApp, {
+        linear: false
+      });
+
+      if (wizardCreateAppNextList) {
+        wizardCreateAppNextList.forEach(wizardCreateAppNext => {
+          wizardCreateAppNext.addEventListener('click', event => {
+            createAppStepper.next();
+            initCleave();
+          });
+        });
+      }
+      if (wizardCreateAppPrevList) {
+        wizardCreateAppPrevList.forEach(wizardCreateAppPrev => {
+          wizardCreateAppPrev.addEventListener('click', event => {
+            createAppStepper.previous();
+            initCleave();
+          });
+        });
+      }
+
+      if (wizardCreateAppBtnSubmit) {
+        wizardCreateAppBtnSubmit.addEventListener('click', event => {
+          alert('Submitted..!!');
+        });
+      }
+    }
+  });
+});

httpdocs/themes/vuexy/js/modal-edit-cc.js

@@ -0,0 +1,79 @@
+/**
+ * Edit credit card
+ */
+
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function (e) {
+  (function () {
+    const editCreditCardMaskEdit = document.querySelector('.credit-card-mask-edit'),
+      editExpiryDateMaskEdit = document.querySelector('.expiry-date-mask-edit'),
+      editCVVMaskEdit = document.querySelector('.cvv-code-mask-edit');
+
+    // Credit Card
+    if (editCreditCardMaskEdit) {
+      new Cleave(editCreditCardMaskEdit, {
+        creditCard: true,
+        onCreditCardTypeChanged: function (type) {
+          if (type != '' && type != 'unknown') {
+            document.querySelector('.card-type-edit').innerHTML =
+              '<img src="' + assetsPath + 'img/icons/payments/' + type + '-cc.png" height="28"/>';
+          } else {
+            document.querySelector('.card-type-edit').innerHTML = '';
+          }
+        }
+      });
+    }
+
+    // Expiry Date MaskEdit
+    if (editExpiryDateMaskEdit) {
+      new Cleave(editExpiryDateMaskEdit, {
+        date: true,
+        delimiter: '/',
+        datePattern: ['m', 'y']
+      });
+    }
+
+    // CVV MaskEdit
+    if (editCVVMaskEdit) {
+      new Cleave(editCVVMaskEdit, {
+        numeral: true,
+        numeralPositiveOnly: true
+      });
+    }
+
+    // Credit card form validation
+    FormValidation.formValidation(document.getElementById('editCCForm'), {
+      fields: {
+        modalEditCard: {
+          validators: {
+            notEmpty: {
+              message: 'Please enter your credit card number'
+            }
+          }
+        }
+      },
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: '',
+          rowSelector: '.col-12'
+        }),
+        submitButton: new FormValidation.plugins.SubmitButton(),
+        // Submit the form when all fields are valid
+        // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+        autoFocus: new FormValidation.plugins.AutoFocus()
+      },
+      init: instance => {
+        instance.on('plugins.message.placed', function (e) {
+          //* Move the error message out of the `input-group` element
+          if (e.element.parentElement.classList.contains('input-group')) {
+            e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
+          }
+        });
+      }
+    });
+  })();
+});

httpdocs/themes/vuexy/js/modal-edit-permission.js

@@ -0,0 +1,35 @@
+/**
+ * Edit Permission Modal JS
+ */
+
+'use strict';
+
+// Edit permission form validation
+document.addEventListener('DOMContentLoaded', function (e) {
+  (function () {
+    FormValidation.formValidation(document.getElementById('editPermissionForm'), {
+      fields: {
+        editPermissionName: {
+          validators: {
+            notEmpty: {
+              message: 'Please enter permission name'
+            }
+          }
+        }
+      },
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: '',
+          rowSelector: '.col-sm-9'
+        }),
+        submitButton: new FormValidation.plugins.SubmitButton(),
+        // Submit the form when all fields are valid
+        // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+        autoFocus: new FormValidation.plugins.AutoFocus()
+      }
+    });
+  })();
+});

httpdocs/themes/vuexy/js/modal-edit-user.js

@@ -0,0 +1,103 @@
+/**
+ * Edit User
+ */
+
+'use strict';
+
+// Select2 (jquery)
+$(function () {
+  const select2 = $('.select2');
+
+  // Select2 Country
+  if (select2.length) {
+    select2.each(function () {
+      var $this = $(this);
+      $this.wrap('<div class="position-relative"></div>').select2({
+        placeholder: 'Select value',
+        dropdownParent: $this.parent()
+      });
+    });
+  }
+});
+
+document.addEventListener('DOMContentLoaded', function (e) {
+  (function () {
+    // variables
+    const modalEditUserTaxID = document.querySelector('.modal-edit-tax-id');
+    const modalEditUserPhone = document.querySelector('.phone-number-mask');
+
+    // Prefix
+    if (modalEditUserTaxID) {
+      new Cleave(modalEditUserTaxID, {
+        prefix: 'TIN',
+        blocks: [3, 3, 3, 4],
+        uppercase: true
+      });
+    }
+
+    // Phone Number Input Mask
+    if (modalEditUserPhone) {
+      new Cleave(modalEditUserPhone, {
+        phone: true,
+        phoneRegionCode: 'US'
+      });
+    }
+
+    // Edit user form validation
+    FormValidation.formValidation(document.getElementById('editUserForm'), {
+      fields: {
+        modalEditUserFirstName: {
+          validators: {
+            notEmpty: {
+              message: 'Please enter your first name'
+            },
+            regexp: {
+              regexp: /^[a-zA-Zs]+$/,
+              message: 'The first name can only consist of alphabetical'
+            }
+          }
+        },
+        modalEditUserLastName: {
+          validators: {
+            notEmpty: {
+              message: 'Please enter your last name'
+            },
+            regexp: {
+              regexp: /^[a-zA-Zs]+$/,
+              message: 'The last name can only consist of alphabetical'
+            }
+          }
+        },
+        modalEditUserName: {
+          validators: {
+            notEmpty: {
+              message: 'Please enter your username'
+            },
+            stringLength: {
+              min: 6,
+              max: 30,
+              message: 'The name must be more than 6 and less than 30 characters long'
+            },
+            regexp: {
+              regexp: /^[a-zA-Z0-9 ]+$/,
+              message: 'The name can only consist of alphabetical, number and space'
+            }
+          }
+        }
+      },
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: '',
+          rowSelector: '.col-12'
+        }),
+        submitButton: new FormValidation.plugins.SubmitButton(),
+        // Submit the form when all fields are valid
+        // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+        autoFocus: new FormValidation.plugins.AutoFocus()
+      }
+    });
+  })();
+});

httpdocs/themes/vuexy/js/modal-enable-otp.js

@@ -0,0 +1,53 @@
+/**
+ * Enable OTP
+ */
+
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function (e) {
+  (function () {
+    const phoneMask = document.querySelector('.phone-number-otp-mask');
+
+    // Phone Number Input Mask
+    if (phoneMask) {
+      new Cleave(phoneMask, {
+        phone: true,
+        phoneRegionCode: 'US'
+      });
+    }
+
+    // Enable OTP form validation
+    FormValidation.formValidation(document.getElementById('enableOTPForm'), {
+      fields: {
+        modalEnableOTPPhone: {
+          validators: {
+            notEmpty: {
+              message: 'Please enter your mobile number'
+            }
+          }
+        }
+      },
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: '',
+          rowSelector: '.col-12'
+        }),
+        submitButton: new FormValidation.plugins.SubmitButton(),
+        // Submit the form when all fields are valid
+        // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+        autoFocus: new FormValidation.plugins.AutoFocus()
+      },
+      init: instance => {
+        instance.on('plugins.message.placed', function (e) {
+          //* Move the error message out of the `input-group` element
+          if (e.element.parentElement.classList.contains('input-group')) {
+            e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
+          }
+        });
+      }
+    });
+  })();
+});

httpdocs/themes/vuexy/js/modal-share-project.js

@@ -0,0 +1,41 @@
+/**
+ * Share Project
+ */
+
+'use strict';
+$(function () {
+  const select2ShareProject = $('.share-project-select');
+
+  var shareProject = document.getElementById('shareProject');
+  shareProject.addEventListener('show.bs.modal', function (event) {
+    if (select2ShareProject.length) {
+      function renderAvatar(option) {
+        if (!option.id) {
+          return option.text;
+        }
+        var optionEle =
+          '<div class="d-flex align-items-center">' +
+          '<div class="avatar avatar-xs me-2 d-flex">' +
+          '<img src="' +
+          assetsPath +
+          $(option.element).data('image') +
+          '" class="rounded-circle">' +
+          '</div>' +
+          '<div class="name">' +
+          $(option.element).data('name') +
+          '</div>' +
+          '</div>';
+        return optionEle;
+      }
+      select2ShareProject.wrap('<div class="position-relative"></div>').select2({
+        dropdownParent: shareProject,
+        templateResult: renderAvatar,
+        templateSelection: renderAvatar,
+        placeholder: 'Add Project Members',
+        escapeMarkup: function (es) {
+          return es;
+        }
+      });
+    }
+  });
+});

httpdocs/themes/vuexy/js/modal-two-factor-auth.js

@@ -0,0 +1,21 @@
+/**
+ * Two Factor Authentication
+ */
+
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function (e) {
+  (function () {
+    const phoneMaskList = document.querySelectorAll('#twoFactorAuthInputSms');
+
+    // Phone Number
+    if (phoneMaskList) {
+      phoneMaskList.forEach(function (phoneMask) {
+        new Cleave(phoneMask, {
+          phone: true,
+          phoneRegionCode: 'US'
+        });
+      });
+    }
+  })();
+});

httpdocs/themes/vuexy/js/offcanvas-add-payment.js

@@ -0,0 +1,30 @@
+/**
+ * Add Payment Offcanvas
+ */
+
+'use strict';
+
+(function () {
+  // Invoice amount
+  const paymentAmount = document.querySelector('.invoice-amount');
+
+  // Prefix
+  if (paymentAmount) {
+    new Cleave(paymentAmount, {
+      numeral: true
+    });
+  }
+
+  // Datepicker
+  const date = new Date(),
+    invoiceDateList = document.querySelectorAll('.invoice-date');
+
+  if (invoiceDateList) {
+    invoiceDateList.forEach(function (invoiceDateEl) {
+      invoiceDateEl.flatpickr({
+        monthSelectorType: 'static',
+        defaultDate: date
+      });
+    });
+  }
+})();

httpdocs/themes/vuexy/js/offcanvas-send-invoice.js

@@ -0,0 +1,14 @@
+/**
+ * Send Invoice Offcanvas
+ */
+
+'use strict';
+
+(function () {
+  // Send invoice textarea
+  const invoiceMsg = document.querySelector('#invoice-message');
+
+  const trimMsg = invoiceMsg.textContent.replace(/^\s+|\s+$/gm, '');
+
+  invoiceMsg.value = trimMsg;
+})();

httpdocs/themes/vuexy/js/pages-account-settings-account.js

@@ -0,0 +1,189 @@
+/**
+ * Account Settings - Account
+ */
+
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function (e) {
+  (function () {
+    const formAccSettings = document.querySelector('#formAccountSettings'),
+      deactivateAcc = document.querySelector('#formAccountDeactivation'),
+      deactivateButton = deactivateAcc.querySelector('.deactivate-account');
+
+    // Form validation for Add new record
+    if (formAccSettings) {
+      const fv = FormValidation.formValidation(formAccSettings, {
+        fields: {
+          firstName: {
+            validators: {
+              notEmpty: {
+                message: 'Please enter first name'
+              }
+            }
+          },
+          lastName: {
+            validators: {
+              notEmpty: {
+                message: 'Please enter last name'
+              }
+            }
+          }
+        },
+        plugins: {
+          trigger: new FormValidation.plugins.Trigger(),
+          bootstrap5: new FormValidation.plugins.Bootstrap5({
+            eleValidClass: '',
+            rowSelector: '.col-md-6'
+          }),
+          submitButton: new FormValidation.plugins.SubmitButton(),
+          // Submit the form when all fields are valid
+          // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+          autoFocus: new FormValidation.plugins.AutoFocus()
+        },
+        init: instance => {
+          instance.on('plugins.message.placed', function (e) {
+            if (e.element.parentElement.classList.contains('input-group')) {
+              e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
+            }
+          });
+        }
+      });
+    }
+
+    if (deactivateAcc) {
+      const fv = FormValidation.formValidation(deactivateAcc, {
+        fields: {
+          accountActivation: {
+            validators: {
+              notEmpty: {
+                message: 'Please confirm you want to delete account'
+              }
+            }
+          }
+        },
+        plugins: {
+          trigger: new FormValidation.plugins.Trigger(),
+          bootstrap5: new FormValidation.plugins.Bootstrap5({
+            eleValidClass: ''
+          }),
+          submitButton: new FormValidation.plugins.SubmitButton(),
+          fieldStatus: new FormValidation.plugins.FieldStatus({
+            onStatusChanged: function (areFieldsValid) {
+              areFieldsValid
+                ? // Enable the submit button
+                  // so user has a chance to submit the form again
+                  deactivateButton.removeAttribute('disabled')
+                : // Disable the submit button
+                  deactivateButton.setAttribute('disabled', 'disabled');
+            }
+          }),
+          // Submit the form when all fields are valid
+          // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+          autoFocus: new FormValidation.plugins.AutoFocus()
+        },
+        init: instance => {
+          instance.on('plugins.message.placed', function (e) {
+            if (e.element.parentElement.classList.contains('input-group')) {
+              e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
+            }
+          });
+        }
+      });
+    }
+
+    // Deactivate account alert
+    const accountActivation = document.querySelector('#accountActivation');
+
+    // Alert With Functional Confirm Button
+    if (deactivateButton) {
+      deactivateButton.onclick = function () {
+        if (accountActivation.checked == true) {
+          Swal.fire({
+            text: 'Are you sure you would like to deactivate your account?',
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonText: 'Yes',
+            customClass: {
+              confirmButton: 'btn btn-primary me-2',
+              cancelButton: 'btn btn-label-secondary'
+            },
+            buttonsStyling: false
+          }).then(function (result) {
+            if (result.value) {
+              Swal.fire({
+                icon: 'success',
+                title: 'Deleted!',
+                text: 'Your file has been deleted.',
+                customClass: {
+                  confirmButton: 'btn btn-success'
+                }
+              });
+            } else if (result.dismiss === Swal.DismissReason.cancel) {
+              Swal.fire({
+                title: 'Cancelled',
+                text: 'Deactivation Cancelled!!',
+                icon: 'error',
+                customClass: {
+                  confirmButton: 'btn btn-success'
+                }
+              });
+            }
+          });
+        }
+      };
+    }
+
+    // CleaveJS validation
+
+    const phoneNumber = document.querySelector('#phoneNumber'),
+      zipCode = document.querySelector('#zipCode');
+    // Phone Mask
+    if (phoneNumber) {
+      new Cleave(phoneNumber, {
+        phone: true,
+        phoneRegionCode: 'US'
+      });
+    }
+
+    // Pincode
+    if (zipCode) {
+      new Cleave(zipCode, {
+        delimiter: '',
+        numeral: true
+      });
+    }
+
+    // Update/reset user image of account page
+    let accountUserImage = document.getElementById('uploadedAvatar');
+    const fileInput = document.querySelector('.account-file-input'),
+      resetFileInput = document.querySelector('.account-image-reset');
+
+    if (accountUserImage) {
+      const resetImage = accountUserImage.src;
+      fileInput.onchange = () => {
+        if (fileInput.files[0]) {
+          accountUserImage.src = window.URL.createObjectURL(fileInput.files[0]);
+        }
+      };
+      resetFileInput.onclick = () => {
+        fileInput.value = '';
+        accountUserImage.src = resetImage;
+      };
+    }
+  })();
+});
+
+// Select2 (jquery)
+$(function () {
+  var select2 = $('.select2');
+  // For all Select2
+  if (select2.length) {
+    select2.each(function () {
+      var $this = $(this);
+      $this.wrap('<div class="position-relative"></div>');
+      $this.select2({
+        dropdownParent: $this.parent()
+      });
+    });
+  }
+});

httpdocs/themes/vuexy/js/pages-account-settings-billing.js

@@ -0,0 +1,194 @@
+/**
+ * Account Settings - Billing & Plans
+ */
+
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function (e) {
+  (function () {
+    const creditCardMask = document.querySelector('.credit-card-mask'),
+      expiryDateMask = document.querySelector('.expiry-date-mask'),
+      CVVMask = document.querySelector('.cvv-code-mask');
+
+    // Credit Card
+    if (creditCardMask) {
+      new Cleave(creditCardMask, {
+        creditCard: true,
+        onCreditCardTypeChanged: function (type) {
+          if (type != '' && type != 'unknown') {
+            document.querySelector('.card-type').innerHTML =
+              '<img src="' + assetsPath + 'img/icons/payments/' + type + '-cc.png" height="28"/>';
+          } else {
+            document.querySelector('.card-type').innerHTML = '';
+          }
+        }
+      });
+    }
+
+    // Expiry Date Mask
+    if (expiryDateMask) {
+      new Cleave(expiryDateMask, {
+        date: true,
+        delimiter: '/',
+        datePattern: ['m', 'y']
+      });
+    }
+
+    // CVV Mask
+    if (CVVMask) {
+      new Cleave(CVVMask, {
+        numeral: true,
+        numeralPositiveOnly: true
+      });
+    }
+
+    const formAccSettings = document.getElementById('formAccountSettings'),
+      mobileNumber = document.querySelector('.mobile-number'),
+      zipCode = document.querySelector('.zip-code'),
+      creditCardForm = document.getElementById('creditCardForm');
+
+    // Form validation
+    if (formAccSettings) {
+      const fv = FormValidation.formValidation(formAccSettings, {
+        fields: {
+          companyName: {
+            validators: {
+              notEmpty: {
+                message: 'Please enter company name'
+              }
+            }
+          },
+          billingEmail: {
+            validators: {
+              notEmpty: {
+                message: 'Please enter billing email'
+              },
+              emailAddress: {
+                message: 'Please enter valid email address'
+              }
+            }
+          }
+        },
+        plugins: {
+          trigger: new FormValidation.plugins.Trigger(),
+          bootstrap5: new FormValidation.plugins.Bootstrap5({
+            eleValidClass: '',
+            rowSelector: '.col-sm-6'
+          }),
+          submitButton: new FormValidation.plugins.SubmitButton(),
+          // Submit the form when all fields are valid
+          // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+          autoFocus: new FormValidation.plugins.AutoFocus()
+        }
+      });
+    }
+
+    // Credit card form validation
+    if (creditCardForm) {
+      FormValidation.formValidation(creditCardForm, {
+        fields: {
+          paymentCard: {
+            validators: {
+              notEmpty: {
+                message: 'Please enter your credit card number'
+              }
+            }
+          }
+        },
+        plugins: {
+          trigger: new FormValidation.plugins.Trigger(),
+          bootstrap5: new FormValidation.plugins.Bootstrap5({
+            // Use this for enabling/changing valid/invalid class
+            // eleInvalidClass: '',
+            eleValidClass: ''
+          }),
+          submitButton: new FormValidation.plugins.SubmitButton(),
+          // Submit the form when all fields are valid
+          // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+          autoFocus: new FormValidation.plugins.AutoFocus()
+        },
+        init: instance => {
+          instance.on('plugins.message.placed', function (e) {
+            //* Move the error message out of the `input-group` element
+            if (e.element.parentElement.classList.contains('input-group')) {
+              e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
+            }
+          });
+        }
+      });
+    }
+
+    // Cancel Subscription alert
+    const cancelSubscription = document.querySelector('.cancel-subscription');
+
+    // Alert With Functional Confirm Button
+    if (cancelSubscription) {
+      cancelSubscription.onclick = function () {
+        Swal.fire({
+          text: 'Are you sure you would like to cancel your subscription?',
+          icon: 'warning',
+          showCancelButton: true,
+          confirmButtonText: 'Yes',
+          customClass: {
+            confirmButton: 'btn btn-primary me-2',
+            cancelButton: 'btn btn-label-secondary'
+          },
+          buttonsStyling: false
+        }).then(function (result) {
+          if (result.value) {
+            Swal.fire({
+              icon: 'success',
+              title: 'Unsubscribed!',
+              text: 'Your subscription cancelled successfully.',
+              customClass: {
+                confirmButton: 'btn btn-success'
+              }
+            });
+          } else if (result.dismiss === Swal.DismissReason.cancel) {
+            Swal.fire({
+              title: 'Cancelled',
+              text: 'Unsubscription Cancelled!!',
+              icon: 'error',
+              customClass: {
+                confirmButton: 'btn btn-success'
+              }
+            });
+          }
+        });
+      };
+    }
+    // CleaveJS validation
+
+    // Phone Mask
+    if (mobileNumber) {
+      new Cleave(mobileNumber, {
+        phone: true,
+        phoneRegionCode: 'US'
+      });
+    }
+
+    // Pincode
+    if (zipCode) {
+      new Cleave(zipCode, {
+        delimiter: '',
+        numeral: true
+      });
+    }
+  })();
+});
+
+// Select2 (jquery)
+$(function () {
+  var select2 = $('.select2');
+
+  // Select2
+  if (select2.length) {
+    select2.each(function () {
+      var $this = $(this);
+      $this.wrap('<div class="position-relative"></div>');
+      $this.select2({
+        dropdownParent: $this.parent()
+      });
+    });
+  }
+});

httpdocs/themes/vuexy/js/pages-account-settings-security.js

@@ -0,0 +1,125 @@
+/**
+ * Account Settings - Security
+ */
+
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function (e) {
+  (function () {
+    const formChangePass = document.querySelector('#formAccountSettings'),
+      formApiKey = document.querySelector('#formAccountSettingsApiKey');
+
+    // Form validation for Change password
+    if (formChangePass) {
+      const fv = FormValidation.formValidation(formChangePass, {
+        fields: {
+          currentPassword: {
+            validators: {
+              notEmpty: {
+                message: 'Please current password'
+              },
+              stringLength: {
+                min: 8,
+                message: 'Password must be more than 8 characters'
+              }
+            }
+          },
+          newPassword: {
+            validators: {
+              notEmpty: {
+                message: 'Please enter new password'
+              },
+              stringLength: {
+                min: 8,
+                message: 'Password must be more than 8 characters'
+              }
+            }
+          },
+          confirmPassword: {
+            validators: {
+              notEmpty: {
+                message: 'Please confirm new password'
+              },
+              identical: {
+                compare: function () {
+                  return formChangePass.querySelector('[name="newPassword"]').value;
+                },
+                message: 'The password and its confirm are not the same'
+              },
+              stringLength: {
+                min: 8,
+                message: 'Password must be more than 8 characters'
+              }
+            }
+          }
+        },
+        plugins: {
+          trigger: new FormValidation.plugins.Trigger(),
+          bootstrap5: new FormValidation.plugins.Bootstrap5({
+            eleValidClass: '',
+            rowSelector: '.col-md-6'
+          }),
+          submitButton: new FormValidation.plugins.SubmitButton(),
+          // Submit the form when all fields are valid
+          // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+          autoFocus: new FormValidation.plugins.AutoFocus()
+        },
+        init: instance => {
+          instance.on('plugins.message.placed', function (e) {
+            if (e.element.parentElement.classList.contains('input-group')) {
+              e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
+            }
+          });
+        }
+      });
+    }
+
+    // Form validation for API key
+    if (formApiKey) {
+      const fvApi = FormValidation.formValidation(formApiKey, {
+        fields: {
+          apiKey: {
+            validators: {
+              notEmpty: {
+                message: 'Please enter API key name'
+              }
+            }
+          }
+        },
+        plugins: {
+          trigger: new FormValidation.plugins.Trigger(),
+          bootstrap5: new FormValidation.plugins.Bootstrap5({
+            eleValidClass: ''
+          }),
+          submitButton: new FormValidation.plugins.SubmitButton(),
+          // Submit the form when all fields are valid
+          // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+          autoFocus: new FormValidation.plugins.AutoFocus()
+        },
+        init: instance => {
+          instance.on('plugins.message.placed', function (e) {
+            if (e.element.parentElement.classList.contains('input-group')) {
+              e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
+            }
+          });
+        }
+      });
+    }
+  })();
+});
+
+// Select2 (jquery)
+$(function () {
+  var select2 = $('.select2');
+
+  // Select2 API Key
+  if (select2.length) {
+    select2.each(function () {
+      var $this = $(this);
+      $this.wrap('<div class="position-relative"></div>');
+      $this.select2({
+        dropdownParent: $this.parent()
+      });
+    });
+  }
+});

httpdocs/themes/vuexy/js/pages-auth-multisteps.js

@@ -0,0 +1,305 @@
+/**
+ *  Page auth register multi-steps
+ */
+
+'use strict';
+
+// Select2 (jquery)
+$(function () {
+  var select2 = $('.select2');
+
+  // select2
+  if (select2.length) {
+    select2.each(function () {
+      var $this = $(this);
+      $this.wrap('<div class="position-relative"></div>');
+      $this.select2({
+        placeholder: 'Select an country',
+        dropdownParent: $this.parent()
+      });
+    });
+  }
+});
+
+// Multi Steps Validation
+// --------------------------------------------------------------------
+document.addEventListener('DOMContentLoaded', function (e) {
+  (function () {
+    const stepsValidation = document.querySelector('#multiStepsValidation');
+    if (typeof stepsValidation !== undefined && stepsValidation !== null) {
+      // Multi Steps form
+      const stepsValidationForm = stepsValidation.querySelector('#multiStepsForm');
+      // Form steps
+      const stepsValidationFormStep1 = stepsValidationForm.querySelector('#accountDetailsValidation');
+      const stepsValidationFormStep2 = stepsValidationForm.querySelector('#personalInfoValidation');
+      const stepsValidationFormStep3 = stepsValidationForm.querySelector('#billingLinksValidation');
+      // Multi steps next prev button
+      const stepsValidationNext = [].slice.call(stepsValidationForm.querySelectorAll('.btn-next'));
+      const stepsValidationPrev = [].slice.call(stepsValidationForm.querySelectorAll('.btn-prev'));
+
+      const multiStepsExDate = document.querySelector('.multi-steps-exp-date'),
+        multiStepsCvv = document.querySelector('.multi-steps-cvv'),
+        multiStepsMobile = document.querySelector('.multi-steps-mobile'),
+        multiStepsPincode = document.querySelector('.multi-steps-pincode'),
+        multiStepsCard = document.querySelector('.multi-steps-card');
+
+      // Expiry Date Mask
+      if (multiStepsExDate) {
+        new Cleave(multiStepsExDate, {
+          date: true,
+          delimiter: '/',
+          datePattern: ['m', 'y']
+        });
+      }
+
+      // CVV
+      if (multiStepsCvv) {
+        new Cleave(multiStepsCvv, {
+          numeral: true,
+          numeralPositiveOnly: true
+        });
+      }
+
+      // Mobile
+      if (multiStepsMobile) {
+        new Cleave(multiStepsMobile, {
+          phone: true,
+          phoneRegionCode: 'US'
+        });
+      }
+
+      // Pincode
+      if (multiStepsPincode) {
+        new Cleave(multiStepsPincode, {
+          delimiter: '',
+          numeral: true
+        });
+      }
+
+      // Credit Card
+      if (multiStepsCard) {
+        new Cleave(multiStepsCard, {
+          creditCard: true,
+          onCreditCardTypeChanged: function (type) {
+            if (type != '' && type != 'unknown') {
+              document.querySelector('.card-type').innerHTML =
+                '<img src="' + assetsPath + 'img/icons/payments/' + type + '-cc.png" height="28"/>';
+            } else {
+              document.querySelector('.card-type').innerHTML = '';
+            }
+          }
+        });
+      }
+
+      let validationStepper = new Stepper(stepsValidation, {
+        linear: true
+      });
+
+      // Account details
+      const multiSteps1 = FormValidation.formValidation(stepsValidationFormStep1, {
+        fields: {
+          multiStepsUsername: {
+            validators: {
+              notEmpty: {
+                message: 'Please enter username'
+              },
+              stringLength: {
+                min: 6,
+                max: 30,
+                message: 'The name must be more than 6 and less than 30 characters long'
+              },
+              regexp: {
+                regexp: /^[a-zA-Z0-9 ]+$/,
+                message: 'The name can only consist of alphabetical, number and space'
+              }
+            }
+          },
+          multiStepsEmail: {
+            validators: {
+              notEmpty: {
+                message: 'Please enter email address'
+              },
+              emailAddress: {
+                message: 'The value is not a valid email address'
+              }
+            }
+          },
+          multiStepsPass: {
+            validators: {
+              notEmpty: {
+                message: 'Please enter password'
+              }
+            }
+          },
+          multiStepsConfirmPass: {
+            validators: {
+              notEmpty: {
+                message: 'Confirm Password is required'
+              },
+              identical: {
+                compare: function () {
+                  return stepsValidationFormStep1.querySelector('[name="multiStepsPass"]').value;
+                },
+                message: 'The password and its confirm are not the same'
+              }
+            }
+          }
+        },
+        plugins: {
+          trigger: new FormValidation.plugins.Trigger(),
+          bootstrap5: new FormValidation.plugins.Bootstrap5({
+            // Use this for enabling/changing valid/invalid class
+            // eleInvalidClass: '',
+            eleValidClass: '',
+            rowSelector: '.col-sm-6'
+          }),
+          autoFocus: new FormValidation.plugins.AutoFocus(),
+          submitButton: new FormValidation.plugins.SubmitButton()
+        },
+        init: instance => {
+          instance.on('plugins.message.placed', function (e) {
+            if (e.element.parentElement.classList.contains('input-group')) {
+              e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
+            }
+          });
+        }
+      }).on('core.form.valid', function () {
+        // Jump to the next step when all fields in the current step are valid
+        validationStepper.next();
+      });
+
+      // Personal info
+      const multiSteps2 = FormValidation.formValidation(stepsValidationFormStep2, {
+        fields: {
+          multiStepsFirstName: {
+            validators: {
+              notEmpty: {
+                message: 'Please enter first name'
+              }
+            }
+          },
+          multiStepsAddress: {
+            validators: {
+              notEmpty: {
+                message: 'Please enter your address'
+              }
+            }
+          }
+        },
+        plugins: {
+          trigger: new FormValidation.plugins.Trigger(),
+          bootstrap5: new FormValidation.plugins.Bootstrap5({
+            // Use this for enabling/changing valid/invalid class
+            // eleInvalidClass: '',
+            eleValidClass: '',
+            rowSelector: function (field, ele) {
+              // field is the field name
+              // ele is the field element
+              switch (field) {
+                case 'multiStepsFirstName':
+                  return '.col-sm-6';
+                case 'multiStepsAddress':
+                  return '.col-md-12';
+                default:
+                  return '.row';
+              }
+            }
+          }),
+          autoFocus: new FormValidation.plugins.AutoFocus(),
+          submitButton: new FormValidation.plugins.SubmitButton()
+        }
+      }).on('core.form.valid', function () {
+        // Jump to the next step when all fields in the current step are valid
+        validationStepper.next();
+      });
+
+      // Social links
+      const multiSteps3 = FormValidation.formValidation(stepsValidationFormStep3, {
+        fields: {
+          multiStepsCard: {
+            validators: {
+              notEmpty: {
+                message: 'Please enter card number'
+              }
+            }
+          }
+        },
+        plugins: {
+          trigger: new FormValidation.plugins.Trigger(),
+          bootstrap5: new FormValidation.plugins.Bootstrap5({
+            // Use this for enabling/changing valid/invalid class
+            // eleInvalidClass: '',
+            eleValidClass: '',
+            rowSelector: function (field, ele) {
+              // field is the field name
+              // ele is the field element
+              switch (field) {
+                case 'multiStepsCard':
+                  return '.col-md-12';
+
+                default:
+                  return '.col-dm-6';
+              }
+            }
+          }),
+          autoFocus: new FormValidation.plugins.AutoFocus(),
+          submitButton: new FormValidation.plugins.SubmitButton()
+        },
+        init: instance => {
+          instance.on('plugins.message.placed', function (e) {
+            if (e.element.parentElement.classList.contains('input-group')) {
+              e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
+            }
+          });
+        }
+      }).on('core.form.valid', function () {
+        // You can submit the form
+        // stepsValidationForm.submit()
+        // or send the form data to server via an Ajax request
+        // To make the demo simple, I just placed an alert
+        alert('Submitted..!!');
+      });
+
+      stepsValidationNext.forEach(item => {
+        item.addEventListener('click', event => {
+          // When click the Next button, we will validate the current step
+          switch (validationStepper._currentIndex) {
+            case 0:
+              multiSteps1.validate();
+              break;
+
+            case 1:
+              multiSteps2.validate();
+              break;
+
+            case 2:
+              multiSteps3.validate();
+              break;
+
+            default:
+              break;
+          }
+        });
+      });
+
+      stepsValidationPrev.forEach(item => {
+        item.addEventListener('click', event => {
+          switch (validationStepper._currentIndex) {
+            case 2:
+              validationStepper.previous();
+              break;
+
+            case 1:
+              validationStepper.previous();
+              break;
+
+            case 0:
+
+            default:
+              break;
+          }
+        });
+      });
+    }
+  })();
+});

httpdocs/themes/vuexy/js/pages-auth-two-steps.js

@@ -0,0 +1,77 @@
+/**
+ *  Page auth two steps
+ */
+
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function (e) {
+  (function () {
+    let maskWrapper = document.querySelector('.numeral-mask-wrapper');
+
+    for (let pin of maskWrapper.children) {
+      pin.onkeyup = function (e) {
+        // While entering value, go to next
+        if (pin.nextElementSibling) {
+          if (this.value.length === parseInt(this.attributes['maxlength'].value)) {
+            pin.nextElementSibling.focus();
+          }
+        }
+
+        // While deleting entered value, go to previous
+        // Delete using backspace and delete
+        if (pin.previousElementSibling) {
+          if (e.keyCode === 8 || e.keyCode === 46) {
+            pin.previousElementSibling.focus();
+          }
+        }
+      };
+    }
+
+    const twoStepsForm = document.querySelector('#twoStepsForm');
+
+    // Form validation for Add new record
+    if (twoStepsForm) {
+      const fv = FormValidation.formValidation(twoStepsForm, {
+        fields: {
+          otp: {
+            validators: {
+              notEmpty: {
+                message: 'Please enter otp'
+              }
+            }
+          }
+        },
+        plugins: {
+          trigger: new FormValidation.plugins.Trigger(),
+          bootstrap5: new FormValidation.plugins.Bootstrap5({
+            eleValidClass: '',
+            rowSelector: '.mb-3'
+          }),
+          submitButton: new FormValidation.plugins.SubmitButton(),
+
+          defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+          autoFocus: new FormValidation.plugins.AutoFocus()
+        }
+      });
+
+      const numeralMaskList = twoStepsForm.querySelectorAll('.numeral-mask');
+      const keyupHandler = function () {
+        let otpFlag = true,
+          otpVal = '';
+        numeralMaskList.forEach(numeralMaskEl => {
+          if (numeralMaskEl.value === '') {
+            otpFlag = false;
+            twoStepsForm.querySelector('[name="otp"]').value = '';
+          }
+          otpVal = otpVal + numeralMaskEl.value;
+        });
+        if (otpFlag) {
+          twoStepsForm.querySelector('[name="otp"]').value = otpVal;
+        }
+      };
+      numeralMaskList.forEach(numeralMaskEle => {
+        numeralMaskEle.addEventListener('keyup', keyupHandler);
+      });
+    }
+  })();
+});

httpdocs/themes/vuexy/js/pages-auth.js

@@ -0,0 +1,115 @@
+/**
+ *  Pages Authentication
+ */
+
+'use strict';
+const formAuthentication = document.querySelector('#formAuthentication');
+
+document.addEventListener('DOMContentLoaded', function (e) {
+  (function () {
+    // Form validation for Add new record
+    if (formAuthentication) {
+      const fv = FormValidation.formValidation(formAuthentication, {
+        fields: {
+          username: {
+            validators: {
+              notEmpty: {
+                message: 'Please enter username'
+              },
+              stringLength: {
+                min: 6,
+                message: 'Username must be more than 6 characters'
+              }
+            }
+          },
+          email: {
+            validators: {
+              notEmpty: {
+                message: 'Please enter your email'
+              },
+              emailAddress: {
+                message: 'Please enter valid email address'
+              }
+            }
+          },
+          'email-username': {
+            validators: {
+              notEmpty: {
+                message: 'Please enter email / username'
+              },
+              stringLength: {
+                min: 6,
+                message: 'Username must be more than 6 characters'
+              }
+            }
+          },
+          password: {
+            validators: {
+              notEmpty: {
+                message: 'Please enter your password'
+              },
+              stringLength: {
+                min: 6,
+                message: 'Password must be more than 6 characters'
+              }
+            }
+          },
+          'confirm-password': {
+            validators: {
+              notEmpty: {
+                message: 'Please confirm password'
+              },
+              identical: {
+                compare: function () {
+                  return formAuthentication.querySelector('[name="password"]').value;
+                },
+                message: 'The password and its confirm are not the same'
+              },
+              stringLength: {
+                min: 6,
+                message: 'Password must be more than 6 characters'
+              }
+            }
+          },
+          terms: {
+            validators: {
+              notEmpty: {
+                message: 'Please agree terms & conditions'
+              }
+            }
+          }
+        },
+        plugins: {
+          trigger: new FormValidation.plugins.Trigger(),
+          bootstrap5: new FormValidation.plugins.Bootstrap5({
+            eleValidClass: '',
+            rowSelector: '.mb-3'
+          }),
+          submitButton: new FormValidation.plugins.SubmitButton(),
+
+          defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+          autoFocus: new FormValidation.plugins.AutoFocus()
+        },
+        init: instance => {
+          instance.on('plugins.message.placed', function (e) {
+            if (e.element.parentElement.classList.contains('input-group')) {
+              e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
+            }
+          });
+        }
+      });
+    }
+
+    //  Two Steps Verification
+    const numeralMask = document.querySelectorAll('.numeral-mask');
+
+    // Verification masking
+    if (numeralMask.length) {
+      numeralMask.forEach(e => {
+        new Cleave(e, {
+          numeral: true
+        });
+      });
+    }
+  })();
+});

httpdocs/themes/vuexy/js/pages-pricing.js

@@ -0,0 +1,39 @@
+/**
+ * Pricing
+ */
+
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function (event) {
+  (function () {
+    const priceDurationToggler = document.querySelector('.price-duration-toggler'),
+      priceMonthlyList = [].slice.call(document.querySelectorAll('.price-monthly')),
+      priceYearlyList = [].slice.call(document.querySelectorAll('.price-yearly'));
+
+    function togglePrice() {
+      if (priceDurationToggler.checked) {
+        // If checked
+        priceYearlyList.map(function (yearEl) {
+          yearEl.classList.remove('d-none');
+        });
+        priceMonthlyList.map(function (monthEl) {
+          monthEl.classList.add('d-none');
+        });
+      } else {
+        // If not checked
+        priceYearlyList.map(function (yearEl) {
+          yearEl.classList.add('d-none');
+        });
+        priceMonthlyList.map(function (monthEl) {
+          monthEl.classList.remove('d-none');
+        });
+      }
+    }
+    // togglePrice Event Listener
+    togglePrice();
+
+    priceDurationToggler.onchange = function () {
+      togglePrice();
+    };
+  })();
+});

httpdocs/themes/vuexy/js/pages-profile.js

@@ -0,0 +1,201 @@
+/**
+ *  Pages User Profile (jquery)
+ */
+
+'use strict';
+
+$(function () {
+  //  Projects table
+  var dt_projects_table = $('.datatables-projects');
+
+  if (dt_projects_table.length) {
+    var dt_project = dt_projects_table.DataTable({
+      ajax: assetsPath + 'json/user-profile.json',
+      columns: [
+        { data: '' },
+        { data: 'id' },
+        { data: 'project_name' },
+        { data: 'project_leader' },
+        { data: '' },
+        { data: 'status' },
+        { data: '' }
+      ],
+      columnDefs: [
+        {
+          // For Responsive
+          className: 'control',
+          searchable: false,
+          orderable: false,
+          responsivePriority: 2,
+          targets: 0,
+          render: function (data, type, full, meta) {
+            return '';
+          }
+        },
+        {
+          // For Checkboxes
+          targets: 1,
+          orderable: false,
+          searchable: false,
+          responsivePriority: 3,
+          checkboxes: true,
+          render: function () {
+            return '<input type="checkbox" class="dt-checkboxes form-check-input">';
+          },
+          checkboxes: {
+            selectAllRender: '<input type="checkbox" class="form-check-input">'
+          }
+        },
+        {
+          // Avatar image/badge, Name and post
+          targets: 2,
+          responsivePriority: 4,
+          render: function (data, type, full, meta) {
+            var $user_img = full['project_img'],
+              $name = full['project_name'],
+              $date = full['date'];
+            if ($user_img) {
+              // For Avatar image
+              var $output =
+                '<img src="' + assetsPath + 'img/icons/brands/' + $user_img + '" alt="Avatar" class="rounded-circle">';
+            } else {
+              // For Avatar badge
+              var stateNum = Math.floor(Math.random() * 6);
+              var states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
+              var $state = states[stateNum],
+                $name = full['project_name'],
+                $initials = $name.match(/\b\w/g) || [];
+              $initials = (($initials.shift() || '') + ($initials.pop() || '')).toUpperCase();
+              $output = '<span class="avatar-initial rounded-circle bg-label-' + $state + '">' + $initials + '</span>';
+            }
+            // Creates full output for row
+            var $row_output =
+              '<div class="d-flex justify-content-left align-items-center">' +
+              '<div class="avatar-wrapper">' +
+              '<div class="avatar me-2">' +
+              $output +
+              '</div>' +
+              '</div>' +
+              '<div class="d-flex flex-column">' +
+              '<span class="text-truncate fw-semibold">' +
+              $name +
+              '</span>' +
+              '<small class="text-truncate text-muted">' +
+              $date +
+              '</small>' +
+              '</div>' +
+              '</div>';
+            return $row_output;
+          }
+        },
+        {
+          // Teams
+          targets: 4,
+          orderable: false,
+          searchable: false,
+          render: function (data, type, full, meta) {
+            var $team = full['team'],
+              $output;
+            $output = '<div class="d-flex align-items-center avatar-group">';
+            for (var i = 0; i < $team.length; i++) {
+              $output +=
+                '<div class="avatar avatar-sm">' +
+                '<img src="' +
+                assetsPath +
+                'img/avatars/' +
+                $team[i] +
+                '" alt="Avatar" class="rounded-circle pull-up">' +
+                '</div>';
+            }
+            $output += '</div>';
+            return $output;
+          }
+        },
+        {
+          // Label
+          targets: -2,
+          render: function (data, type, full, meta) {
+            var $status_number = full['status'];
+            return (
+              '<div class="d-flex align-items-center">' +
+              '<div class="progress w-100 me-3" style="height: 6px;">' +
+              '<div class="progress-bar" style="width: ' +
+              $status_number +
+              '" aria-valuenow="' +
+              $status_number +
+              '" aria-valuemin="0" aria-valuemax="100"></div>' +
+              '</div>' +
+              '<span>' +
+              $status_number +
+              '</span></div>'
+            );
+          }
+        },
+        {
+          // Actions
+          targets: -1,
+          searchable: false,
+          title: 'Actions',
+          orderable: false,
+          render: function (data, type, full, meta) {
+            return (
+              '<div class="d-inline-block">' +
+              '<a href="javascript:;" class="btn btn-sm btn-icon dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="ti ti-dots-vertical"></i></a>' +
+              '<div class="dropdown-menu dropdown-menu-end m-0">' +
+              '<a href="javascript:;" class="dropdown-item">Details</a>' +
+              '<a href="javascript:;" class="dropdown-item">Archive</a>' +
+              '<div class="dropdown-divider"></div>' +
+              '<a href="javascript:;" class="dropdown-item text-danger delete-record">Delete</a>' +
+              '</div>' +
+              '</div>'
+            );
+          }
+        }
+      ],
+      order: [[2, 'desc']],
+      dom: '<"card-header pb-0 pt-sm-0"<"head-label text-center"><"d-flex justify-content-center justify-content-md-end"f>>t<"row mx-2"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
+      displayLength: 7,
+      lengthMenu: [7, 10, 25, 50, 75, 100],
+      responsive: {
+        details: {
+          display: $.fn.dataTable.Responsive.display.modal({
+            header: function (row) {
+              var data = row.data();
+              return 'Details of "' + data['project_name'] + '" Project';
+            }
+          }),
+          type: 'column',
+          renderer: function (api, rowIdx, columns) {
+            var data = $.map(columns, function (col, i) {
+              return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
+                ? '<tr data-dt-row="' +
+                    col.rowIndex +
+                    '" data-dt-column="' +
+                    col.columnIndex +
+                    '">' +
+                    '<td>' +
+                    col.title +
+                    ':' +
+                    '</td> ' +
+                    '<td>' +
+                    col.data +
+                    '</td>' +
+                    '</tr>'
+                : '';
+            }).join('');
+
+            return data ? $('<table class="table"/><tbody />').append(data) : false;
+          }
+        }
+      }
+    });
+    $('div.head-label').html('<h5 class="card-title mb-0">Projects</h5>');
+  }
+
+  // Filter form control to default size
+  // ? setTimeout used for multilingual table initialization
+  setTimeout(() => {
+    $('.dataTables_filter .form-control').removeClass('form-control-sm');
+    $('.dataTables_length .form-select').removeClass('form-select-sm');
+  }, 300);
+});

httpdocs/themes/vuexy/js/tables-datatables-advanced.js

@@ -0,0 +1,299 @@
+/**
+ * DataTables Advanced (jquery)
+ */
+
+'use strict';
+
+$(function () {
+  var dt_ajax_table = $('.datatables-ajax'),
+    dt_filter_table = $('.dt-column-search'),
+    dt_adv_filter_table = $('.dt-advanced-search'),
+    dt_responsive_table = $('.dt-responsive'),
+    startDateEle = $('.start_date'),
+    endDateEle = $('.end_date');
+
+  // Advanced Search Functions Starts
+  // --------------------------------------------------------------------
+
+  // Datepicker for advanced filter
+  var rangePickr = $('.flatpickr-range'),
+    dateFormat = 'MM/DD/YYYY';
+
+  if (rangePickr.length) {
+    rangePickr.flatpickr({
+      mode: 'range',
+      dateFormat: 'm/d/Y',
+      orientation: isRtl ? 'auto right' : 'auto left',
+      locale: {
+        format: dateFormat
+      },
+      onClose: function (selectedDates, dateStr, instance) {
+        var startDate = '',
+          endDate = new Date();
+        if (selectedDates[0] != undefined) {
+          startDate = moment(selectedDates[0]).format('MM/DD/YYYY');
+          startDateEle.val(startDate);
+        }
+        if (selectedDates[1] != undefined) {
+          endDate = moment(selectedDates[1]).format('MM/DD/YYYY');
+          endDateEle.val(endDate);
+        }
+        $(rangePickr).trigger('change').trigger('keyup');
+      }
+    });
+  }
+
+  // Filter column wise function
+  function filterColumn(i, val) {
+    if (i == 5) {
+      var startDate = startDateEle.val(),
+        endDate = endDateEle.val();
+      if (startDate !== '' && endDate !== '') {
+        $.fn.dataTableExt.afnFiltering.length = 0; // Reset datatable filter
+        dt_adv_filter_table.dataTable().fnDraw(); // Draw table after filter
+        filterByDate(i, startDate, endDate); // We call our filter function
+      }
+      dt_adv_filter_table.dataTable().fnDraw();
+    } else {
+      dt_adv_filter_table.DataTable().column(i).search(val, false, true).draw();
+    }
+  }
+
+  // Advance filter function
+  // We pass the column location, the start date, and the end date
+  $.fn.dataTableExt.afnFiltering.length = 0;
+  var filterByDate = function (column, startDate, endDate) {
+    // Custom filter syntax requires pushing the new filter to the global filter array
+    $.fn.dataTableExt.afnFiltering.push(function (oSettings, aData, iDataIndex) {
+      var rowDate = normalizeDate(aData[column]),
+        start = normalizeDate(startDate),
+        end = normalizeDate(endDate);
+
+      // If our date from the row is between the start and end
+      if (start <= rowDate && rowDate <= end) {
+        return true;
+      } else if (rowDate >= start && end === '' && start !== '') {
+        return true;
+      } else if (rowDate <= end && start === '' && end !== '') {
+        return true;
+      } else {
+        return false;
+      }
+    });
+  };
+
+  // converts date strings to a Date object, then normalized into a YYYYMMMDD format (ex: 20131220). Makes comparing dates easier. ex: 20131220 > 20121220
+  var normalizeDate = function (dateString) {
+    var date = new Date(dateString);
+    var normalized =
+      date.getFullYear() + '' + ('0' + (date.getMonth() + 1)).slice(-2) + '' + ('0' + date.getDate()).slice(-2);
+    return normalized;
+  };
+  // Advanced Search Functions Ends
+
+  // Ajax Sourced Server-side
+  // --------------------------------------------------------------------
+
+  if (dt_ajax_table.length) {
+    var dt_ajax = dt_ajax_table.dataTable({
+      processing: true,
+      ajax: assetsPath + 'json/ajax.php',
+      dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6 d-flex justify-content-center justify-content-md-end"f>><"table-responsive"t><"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>'
+    });
+  }
+
+  // Column Search
+  // --------------------------------------------------------------------
+
+  if (dt_filter_table.length) {
+    // Setup - add a text input to each footer cell
+    $('.dt-column-search thead tr').clone(true).appendTo('.dt-column-search thead');
+    $('.dt-column-search thead tr:eq(1) th').each(function (i) {
+      var title = $(this).text();
+      $(this).html('<input type="text" class="form-control" placeholder="Search ' + title + '" />');
+
+      $('input', this).on('keyup change', function () {
+        if (dt_filter.column(i).search() !== this.value) {
+          dt_filter.column(i).search(this.value).draw();
+        }
+      });
+    });
+
+    var dt_filter = dt_filter_table.DataTable({
+      ajax: assetsPath + 'json/table-datatable.json',
+      columns: [
+        { data: 'full_name' },
+        { data: 'email' },
+        { data: 'post' },
+        { data: 'city' },
+        { data: 'start_date' },
+        { data: 'salary' }
+      ],
+      orderCellsTop: true,
+      dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6 d-flex justify-content-center justify-content-md-end"f>><"table-responsive"t><"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>'
+    });
+  }
+
+  // Advanced Search
+  // --------------------------------------------------------------------
+
+  // Advanced Filter table
+  if (dt_adv_filter_table.length) {
+    var dt_adv_filter = dt_adv_filter_table.DataTable({
+      dom: "<'row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-6'i><'col-sm-12 col-md-6 dataTables_pager'p>>",
+      ajax: assetsPath + 'json/table-datatable.json',
+      columns: [
+        { data: '' },
+        { data: 'full_name' },
+        { data: 'email' },
+        { data: 'post' },
+        { data: 'city' },
+        { data: 'start_date' },
+        { data: 'salary' }
+      ],
+
+      columnDefs: [
+        {
+          className: 'control',
+          orderable: false,
+          targets: 0,
+          render: function (data, type, full, meta) {
+            return '';
+          }
+        }
+      ],
+      orderCellsTop: true,
+      responsive: {
+        details: {
+          display: $.fn.dataTable.Responsive.display.modal({
+            header: function (row) {
+              var data = row.data();
+              return 'Details of ' + data['full_name'];
+            }
+          }),
+          type: 'column',
+          renderer: function (api, rowIdx, columns) {
+            var data = $.map(columns, function (col, i) {
+              return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
+                ? '<tr data-dt-row="' +
+                    col.rowIndex +
+                    '" data-dt-column="' +
+                    col.columnIndex +
+                    '">' +
+                    '<td>' +
+                    col.title +
+                    ':' +
+                    '</td> ' +
+                    '<td>' +
+                    col.data +
+                    '</td>' +
+                    '</tr>'
+                : '';
+            }).join('');
+
+            return data ? $('<table class="table"/><tbody />').append(data) : false;
+          }
+        }
+      }
+    });
+  }
+
+  // on key up from input field
+  $('input.dt-input').on('keyup', function () {
+    filterColumn($(this).attr('data-column'), $(this).val());
+  });
+
+  // Responsive Table
+  // --------------------------------------------------------------------
+
+  if (dt_responsive_table.length) {
+    var dt_responsive = dt_responsive_table.DataTable({
+      ajax: assetsPath + 'json/table-datatable.json',
+      columns: [
+        { data: '' },
+        { data: 'full_name' },
+        { data: 'email' },
+        { data: 'post' },
+        { data: 'city' },
+        { data: 'start_date' },
+        { data: 'salary' },
+        { data: 'age' },
+        { data: 'experience' },
+        { data: 'status' }
+      ],
+      columnDefs: [
+        {
+          className: 'control',
+          orderable: false,
+          targets: 0,
+          searchable: false,
+          render: function (data, type, full, meta) {
+            return '';
+          }
+        },
+        {
+          // Label
+          targets: -1,
+          render: function (data, type, full, meta) {
+            var $status_number = full['status'];
+            var $status = {
+              1: { title: 'Current', class: 'bg-label-primary' },
+              2: { title: 'Professional', class: ' bg-label-success' },
+              3: { title: 'Rejected', class: ' bg-label-danger' },
+              4: { title: 'Resigned', class: ' bg-label-warning' },
+              5: { title: 'Applied', class: ' bg-label-info' }
+            };
+            if (typeof $status[$status_number] === 'undefined') {
+              return data;
+            }
+            return (
+              '<span class="badge ' + $status[$status_number].class + '">' + $status[$status_number].title + '</span>'
+            );
+          }
+        }
+      ],
+      // scrollX: true,
+      destroy: true,
+      dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6 d-flex justify-content-center justify-content-md-end"f>>t<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
+      responsive: {
+        details: {
+          display: $.fn.dataTable.Responsive.display.modal({
+            header: function (row) {
+              var data = row.data();
+              return 'Details of ' + data['full_name'];
+            }
+          }),
+          type: 'column',
+          renderer: function (api, rowIdx, columns) {
+            var data = $.map(columns, function (col, i) {
+              return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
+                ? '<tr data-dt-row="' +
+                    col.rowIndex +
+                    '" data-dt-column="' +
+                    col.columnIndex +
+                    '">' +
+                    '<td>' +
+                    col.title +
+                    ':' +
+                    '</td> ' +
+                    '<td>' +
+                    col.data +
+                    '</td>' +
+                    '</tr>'
+                : '';
+            }).join('');
+
+            return data ? $('<table class="table"/><tbody />').append(data) : false;
+          }
+        }
+      }
+    });
+  }
+
+  // Filter form control to default size
+  // ? setTimeout used for multilingual table initialization
+  setTimeout(() => {
+    $('.dataTables_filter .form-control').removeClass('form-control-sm');
+    $('.dataTables_length .form-select').removeClass('form-select-sm');
+  }, 200);
+});

httpdocs/themes/vuexy/js/tables-datatables-basic.js

@@ -0,0 +1,796 @@
+/**
+ * DataTables Basic
+ */
+
+'use strict';
+
+let fv, offCanvasEl;
+document.addEventListener('DOMContentLoaded', function (e) {
+  (function () {
+    const formAddNewRecord = document.getElementById('form-add-new-record');
+
+    setTimeout(() => {
+      const newRecord = document.querySelector('.create-new'),
+        offCanvasElement = document.querySelector('#add-new-record');
+
+      // To open offCanvas, to add new record
+      if (newRecord) {
+        newRecord.addEventListener('click', function () {
+          offCanvasEl = new bootstrap.Offcanvas(offCanvasElement);
+          // Empty fields on offCanvas open
+          (offCanvasElement.querySelector('.dt-full-name').value = ''),
+            (offCanvasElement.querySelector('.dt-post').value = ''),
+            (offCanvasElement.querySelector('.dt-email').value = ''),
+            (offCanvasElement.querySelector('.dt-date').value = ''),
+            (offCanvasElement.querySelector('.dt-salary').value = '');
+          // Open offCanvas with form
+          offCanvasEl.show();
+        });
+      }
+    }, 200);
+
+    // Form validation for Add new record
+    fv = FormValidation.formValidation(formAddNewRecord, {
+      fields: {
+        basicFullname: {
+          validators: {
+            notEmpty: {
+              message: 'The name is required'
+            }
+          }
+        },
+        basicPost: {
+          validators: {
+            notEmpty: {
+              message: 'Post field is required'
+            }
+          }
+        },
+        basicEmail: {
+          validators: {
+            notEmpty: {
+              message: 'The Email is required'
+            },
+            emailAddress: {
+              message: 'The value is not a valid email address'
+            }
+          }
+        },
+        basicDate: {
+          validators: {
+            notEmpty: {
+              message: 'Joining Date is required'
+            },
+            date: {
+              format: 'MM/DD/YYYY',
+              message: 'The value is not a valid date'
+            }
+          }
+        },
+        basicSalary: {
+          validators: {
+            notEmpty: {
+              message: 'Basic Salary is required'
+            }
+          }
+        }
+      },
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: '',
+          rowSelector: '.col-sm-12'
+        }),
+        submitButton: new FormValidation.plugins.SubmitButton(),
+        // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+        autoFocus: new FormValidation.plugins.AutoFocus()
+      },
+      init: instance => {
+        instance.on('plugins.message.placed', function (e) {
+          if (e.element.parentElement.classList.contains('input-group')) {
+            e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
+          }
+        });
+      }
+    });
+
+    // FlatPickr Initialization & Validation
+    flatpickr(formAddNewRecord.querySelector('[name="basicDate"]'), {
+      enableTime: false,
+      // See https://flatpickr.js.org/formatting/
+      dateFormat: 'm/d/Y',
+      // After selecting a date, we need to revalidate the field
+      onChange: function () {
+        fv.revalidateField('basicDate');
+      }
+    });
+  })();
+});
+
+// datatable (jquery)
+$(function () {
+  var dt_basic_table = $('.datatables-basic'),
+    dt_complex_header_table = $('.dt-complex-header'),
+    dt_row_grouping_table = $('.dt-row-grouping'),
+    dt_multilingual_table = $('.dt-multilingual'),
+    dt_basic;
+
+  // DataTable with buttons
+  // --------------------------------------------------------------------
+
+  if (dt_basic_table.length) {
+    dt_basic = dt_basic_table.DataTable({
+      ajax: assetsPath + 'json/table-datatable.json',
+      columns: [
+        { data: '' },
+        { data: 'id' },
+        { data: 'id' },
+        { data: 'full_name' },
+        { data: 'email' },
+        { data: 'start_date' },
+        { data: 'salary' },
+        { data: 'status' },
+        { data: '' }
+      ],
+      columnDefs: [
+        {
+          // For Responsive
+          className: 'control',
+          orderable: false,
+          searchable: false,
+          responsivePriority: 2,
+          targets: 0,
+          render: function (data, type, full, meta) {
+            return '';
+          }
+        },
+        {
+          // For Checkboxes
+          targets: 1,
+          orderable: false,
+          searchable: false,
+          responsivePriority: 3,
+          checkboxes: true,
+          render: function () {
+            return '<input type="checkbox" class="dt-checkboxes form-check-input">';
+          },
+          checkboxes: {
+            selectAllRender: '<input type="checkbox" class="form-check-input">'
+          }
+        },
+        {
+          targets: 2,
+          searchable: false,
+          visible: false
+        },
+        {
+          // Avatar image/badge, Name and post
+          targets: 3,
+          responsivePriority: 4,
+          render: function (data, type, full, meta) {
+            var $user_img = full['avatar'],
+              $name = full['full_name'],
+              $post = full['post'];
+            if ($user_img) {
+              // For Avatar image
+              var $output =
+                '<img src="' + assetsPath + 'img/avatars/' + $user_img + '" alt="Avatar" class="rounded-circle">';
+            } else {
+              // For Avatar badge
+              var stateNum = Math.floor(Math.random() * 6);
+              var states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
+              var $state = states[stateNum],
+                $name = full['full_name'],
+                $initials = $name.match(/\b\w/g) || [];
+              $initials = (($initials.shift() || '') + ($initials.pop() || '')).toUpperCase();
+              $output = '<span class="avatar-initial rounded-circle bg-label-' + $state + '">' + $initials + '</span>';
+            }
+            // Creates full output for row
+            var $row_output =
+              '<div class="d-flex justify-content-start align-items-center user-name">' +
+              '<div class="avatar-wrapper">' +
+              '<div class="avatar me-2">' +
+              $output +
+              '</div>' +
+              '</div>' +
+              '<div class="d-flex flex-column">' +
+              '<span class="emp_name text-truncate">' +
+              $name +
+              '</span>' +
+              '<small class="emp_post text-truncate text-muted">' +
+              $post +
+              '</small>' +
+              '</div>' +
+              '</div>';
+            return $row_output;
+          }
+        },
+        {
+          responsivePriority: 1,
+          targets: 4
+        },
+        {
+          // Label
+          targets: -2,
+          render: function (data, type, full, meta) {
+            var $status_number = full['status'];
+            var $status = {
+              1: { title: 'Current', class: 'bg-label-primary' },
+              2: { title: 'Professional', class: ' bg-label-success' },
+              3: { title: 'Rejected', class: ' bg-label-danger' },
+              4: { title: 'Resigned', class: ' bg-label-warning' },
+              5: { title: 'Applied', class: ' bg-label-info' }
+            };
+            if (typeof $status[$status_number] === 'undefined') {
+              return data;
+            }
+            return (
+              '<span class="badge ' + $status[$status_number].class + '">' + $status[$status_number].title + '</span>'
+            );
+          }
+        },
+        {
+          // Actions
+          targets: -1,
+          title: 'Actions',
+          orderable: false,
+          searchable: false,
+          render: function (data, type, full, meta) {
+            return (
+              '<div class="d-inline-block">' +
+              '<a href="javascript:;" class="btn btn-sm btn-icon dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="text-primary ti ti-dots-vertical"></i></a>' +
+              '<ul class="dropdown-menu dropdown-menu-end m-0">' +
+              '<li><a href="javascript:;" class="dropdown-item">Details</a></li>' +
+              '<li><a href="javascript:;" class="dropdown-item">Archive</a></li>' +
+              '<div class="dropdown-divider"></div>' +
+              '<li><a href="javascript:;" class="dropdown-item text-danger delete-record">Delete</a></li>' +
+              '</ul>' +
+              '</div>' +
+              '<a href="javascript:;" class="btn btn-sm btn-icon item-edit"><i class="text-primary ti ti-pencil"></i></a>'
+            );
+          }
+        }
+      ],
+      order: [[2, 'desc']],
+      dom: '<"card-header flex-column flex-md-row"<"head-label text-center"><"dt-action-buttons text-end pt-3 pt-md-0"B>><"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6 d-flex justify-content-center justify-content-md-end"f>>t<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
+      displayLength: 7,
+      lengthMenu: [7, 10, 25, 50, 75, 100],
+      buttons: [
+        {
+          extend: 'collection',
+          className: 'btn btn-label-primary dropdown-toggle me-2',
+          text: '<i class="ti ti-file-export me-sm-1"></i> <span class="d-none d-sm-inline-block">Export</span>',
+          buttons: [
+            {
+              extend: 'print',
+              text: '<i class="ti ti-printer me-1" ></i>Print',
+              className: 'dropdown-item',
+              exportOptions: {
+                columns: [3, 4, 5, 6, 7],
+                // prevent avatar to be display
+                format: {
+                  body: function (inner, coldex, rowdex) {
+                    if (inner.length <= 0) return inner;
+                    var el = $.parseHTML(inner);
+                    var result = '';
+                    $.each(el, function (index, item) {
+                      if (item.classList !== undefined && item.classList.contains('user-name')) {
+                        result = result + item.lastChild.firstChild.textContent;
+                      } else if (item.innerText === undefined) {
+                        result = result + item.textContent;
+                      } else result = result + item.innerText;
+                    });
+                    return result;
+                  }
+                }
+              },
+              customize: function (win) {
+                //customize print view for dark
+                $(win.document.body)
+                  .css('color', config.colors.headingColor)
+                  .css('border-color', config.colors.borderColor)
+                  .css('background-color', config.colors.bodyBg);
+                $(win.document.body)
+                  .find('table')
+                  .addClass('compact')
+                  .css('color', 'inherit')
+                  .css('border-color', 'inherit')
+                  .css('background-color', 'inherit');
+              }
+            },
+            {
+              extend: 'csv',
+              text: '<i class="ti ti-file-text me-1" ></i>Csv',
+              className: 'dropdown-item',
+              exportOptions: {
+                columns: [3, 4, 5, 6, 7],
+                // prevent avatar to be display
+                format: {
+                  body: function (inner, coldex, rowdex) {
+                    if (inner.length <= 0) return inner;
+                    var el = $.parseHTML(inner);
+                    var result = '';
+                    $.each(el, function (index, item) {
+                      if (item.classList !== undefined && item.classList.contains('user-name')) {
+                        result = result + item.lastChild.firstChild.textContent;
+                      } else if (item.innerText === undefined) {
+                        result = result + item.textContent;
+                      } else result = result + item.innerText;
+                    });
+                    return result;
+                  }
+                }
+              }
+            },
+            {
+              extend: 'excel',
+              text: '<i class="ti ti-file-spreadsheet me-1"></i>Excel',
+              className: 'dropdown-item',
+              exportOptions: {
+                columns: [3, 4, 5, 6, 7],
+                // prevent avatar to be display
+                format: {
+                  body: function (inner, coldex, rowdex) {
+                    if (inner.length <= 0) return inner;
+                    var el = $.parseHTML(inner);
+                    var result = '';
+                    $.each(el, function (index, item) {
+                      if (item.classList !== undefined && item.classList.contains('user-name')) {
+                        result = result + item.lastChild.firstChild.textContent;
+                      } else if (item.innerText === undefined) {
+                        result = result + item.textContent;
+                      } else result = result + item.innerText;
+                    });
+                    return result;
+                  }
+                }
+              }
+            },
+            {
+              extend: 'pdf',
+              text: '<i class="ti ti-file-description me-1"></i>Pdf',
+              className: 'dropdown-item',
+              exportOptions: {
+                columns: [3, 4, 5, 6, 7],
+                // prevent avatar to be display
+                format: {
+                  body: function (inner, coldex, rowdex) {
+                    if (inner.length <= 0) return inner;
+                    var el = $.parseHTML(inner);
+                    var result = '';
+                    $.each(el, function (index, item) {
+                      if (item.classList !== undefined && item.classList.contains('user-name')) {
+                        result = result + item.lastChild.firstChild.textContent;
+                      } else if (item.innerText === undefined) {
+                        result = result + item.textContent;
+                      } else result = result + item.innerText;
+                    });
+                    return result;
+                  }
+                }
+              }
+            },
+            {
+              extend: 'copy',
+              text: '<i class="ti ti-copy me-1" ></i>Copy',
+              className: 'dropdown-item',
+              exportOptions: {
+                columns: [3, 4, 5, 6, 7],
+                // prevent avatar to be display
+                format: {
+                  body: function (inner, coldex, rowdex) {
+                    if (inner.length <= 0) return inner;
+                    var el = $.parseHTML(inner);
+                    var result = '';
+                    $.each(el, function (index, item) {
+                      if (item.classList !== undefined && item.classList.contains('user-name')) {
+                        result = result + item.lastChild.firstChild.textContent;
+                      } else if (item.innerText === undefined) {
+                        result = result + item.textContent;
+                      } else result = result + item.innerText;
+                    });
+                    return result;
+                  }
+                }
+              }
+            }
+          ]
+        },
+        {
+          text: '<i class="ti ti-plus me-sm-1"></i> <span class="d-none d-sm-inline-block">Add New Record</span>',
+          className: 'create-new btn btn-primary'
+        }
+      ],
+      responsive: {
+        details: {
+          display: $.fn.dataTable.Responsive.display.modal({
+            header: function (row) {
+              var data = row.data();
+              return 'Details of ' + data['full_name'];
+            }
+          }),
+          type: 'column',
+          renderer: function (api, rowIdx, columns) {
+            var data = $.map(columns, function (col, i) {
+              return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
+                ? '<tr data-dt-row="' +
+                    col.rowIndex +
+                    '" data-dt-column="' +
+                    col.columnIndex +
+                    '">' +
+                    '<td>' +
+                    col.title +
+                    ':' +
+                    '</td> ' +
+                    '<td>' +
+                    col.data +
+                    '</td>' +
+                    '</tr>'
+                : '';
+            }).join('');
+
+            return data ? $('<table class="table"/><tbody />').append(data) : false;
+          }
+        }
+      }
+    });
+    $('div.head-label').html('<h5 class="card-title mb-0">DataTable with Buttons</h5>');
+  }
+
+  // Add New record
+  // ? Remove/Update this code as per your requirements
+  var count = 101;
+  // On form submit, if form is valid
+  fv.on('core.form.valid', function () {
+    var $new_name = $('.add-new-record .dt-full-name').val(),
+      $new_post = $('.add-new-record .dt-post').val(),
+      $new_email = $('.add-new-record .dt-email').val(),
+      $new_date = $('.add-new-record .dt-date').val(),
+      $new_salary = $('.add-new-record .dt-salary').val();
+
+    if ($new_name != '') {
+      dt_basic.row
+        .add({
+          id: count,
+          full_name: $new_name,
+          post: $new_post,
+          email: $new_email,
+          start_date: $new_date,
+          salary: '$' + $new_salary,
+          status: 5
+        })
+        .draw();
+      count++;
+
+      // Hide offcanvas using javascript method
+      offCanvasEl.hide();
+    }
+  });
+
+  // Delete Record
+  $('.datatables-basic tbody').on('click', '.delete-record', function () {
+    dt_basic.row($(this).parents('tr')).remove().draw();
+  });
+
+  // Complex Header DataTable
+  // --------------------------------------------------------------------
+
+  if (dt_complex_header_table.length) {
+    var dt_complex = dt_complex_header_table.DataTable({
+      ajax: assetsPath + 'json/table-datatable.json',
+      columns: [
+        { data: 'full_name' },
+        { data: 'email' },
+        { data: 'city' },
+        { data: 'post' },
+        { data: 'salary' },
+        { data: 'status' },
+        { data: '' }
+      ],
+      columnDefs: [
+        {
+          // Label
+          targets: -2,
+          render: function (data, type, full, meta) {
+            var $status_number = full['status'];
+            var $status = {
+              1: { title: 'Current', class: 'bg-label-primary' },
+              2: { title: 'Professional', class: ' bg-label-success' },
+              3: { title: 'Rejected', class: ' bg-label-danger' },
+              4: { title: 'Resigned', class: ' bg-label-warning' },
+              5: { title: 'Applied', class: ' bg-label-info' }
+            };
+            if (typeof $status[$status_number] === 'undefined') {
+              return data;
+            }
+            return (
+              '<span class="badge ' + $status[$status_number].class + '">' + $status[$status_number].title + '</span>'
+            );
+          }
+        },
+        {
+          // Actions
+          targets: -1,
+          title: 'Actions',
+          orderable: false,
+          render: function (data, type, full, meta) {
+            return (
+              '<div class="d-inline-block">' +
+              '<a href="javascript:;" class="btn btn-sm btn-icon dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="text-primary ti ti-dots-vertical"></i></a>' +
+              '<div class="dropdown-menu dropdown-menu-end m-0">' +
+              '<a href="javascript:;" class="dropdown-item">Details</a>' +
+              '<a href="javascript:;" class="dropdown-item">Archive</a>' +
+              '<div class="dropdown-divider"></div>' +
+              '<a href="javascript:;" class="dropdown-item text-danger delete-record">Delete</a>' +
+              '</div>' +
+              '</div>' +
+              '<a href="javascript:;" class="btn btn-sm btn-icon item-edit"><i class="text-primary ti ti-pencil"></i></a>'
+            );
+          }
+        }
+      ],
+      dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6 d-flex justify-content-center justify-content-md-end"f>><"table-responsive"t><"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
+      displayLength: 7,
+      lengthMenu: [7, 10, 25, 50, 75, 100]
+    });
+  }
+
+  // Row Grouping
+  // --------------------------------------------------------------------
+
+  var groupColumn = 2;
+  if (dt_row_grouping_table.length) {
+    var groupingTable = dt_row_grouping_table.DataTable({
+      ajax: assetsPath + 'json/table-datatable.json',
+      columns: [
+        { data: '' },
+        { data: 'full_name' },
+        { data: 'post' },
+        { data: 'email' },
+        { data: 'city' },
+        { data: 'start_date' },
+        { data: 'salary' },
+        { data: 'status' },
+        { data: '' }
+      ],
+      columnDefs: [
+        {
+          // For Responsive
+          className: 'control',
+          orderable: false,
+          targets: 0,
+          searchable: false,
+          render: function (data, type, full, meta) {
+            return '';
+          }
+        },
+        { visible: false, targets: groupColumn },
+        {
+          // Label
+          targets: -2,
+          render: function (data, type, full, meta) {
+            var $status_number = full['status'];
+            var $status = {
+              1: { title: 'Current', class: 'bg-label-primary' },
+              2: { title: 'Professional', class: ' bg-label-success' },
+              3: { title: 'Rejected', class: ' bg-label-danger' },
+              4: { title: 'Resigned', class: ' bg-label-warning' },
+              5: { title: 'Applied', class: ' bg-label-info' }
+            };
+            if (typeof $status[$status_number] === 'undefined') {
+              return data;
+            }
+            return (
+              '<span class="badge ' + $status[$status_number].class + '">' + $status[$status_number].title + '</span>'
+            );
+          }
+        },
+        {
+          // Actions
+          targets: -1,
+          title: 'Actions',
+          orderable: false,
+          searchable: false,
+          render: function (data, type, full, meta) {
+            return (
+              '<div class="d-inline-block">' +
+              '<a href="javascript:;" class="btn btn-sm btn-icon dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="text-primary ti ti-dots-vertical"></i></a>' +
+              '<div class="dropdown-menu dropdown-menu-end m-0">' +
+              '<a href="javascript:;" class="dropdown-item">Details</a>' +
+              '<a href="javascript:;" class="dropdown-item">Archive</a>' +
+              '<div class="dropdown-divider"></div>' +
+              '<a href="javascript:;" class="dropdown-item text-danger delete-record">Delete</a>' +
+              '</div>' +
+              '</div>' +
+              '<a href="javascript:;" class="btn btn-sm btn-icon item-edit"><i class="text-primary ti ti-pencil"></i></a>'
+            );
+          }
+        }
+      ],
+      order: [[groupColumn, 'asc']],
+      dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6 d-flex justify-content-center justify-content-md-end"f>>t<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
+      displayLength: 7,
+      lengthMenu: [7, 10, 25, 50, 75, 100],
+      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"><td colspan="8">' + group + '</td></tr>');
+
+              last = group;
+            }
+          });
+      },
+      responsive: {
+        details: {
+          display: $.fn.dataTable.Responsive.display.modal({
+            header: function (row) {
+              var data = row.data();
+              return 'Details of ' + data['full_name'];
+            }
+          }),
+          type: 'column',
+          renderer: function (api, rowIdx, columns) {
+            var data = $.map(columns, function (col, i) {
+              return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
+                ? '<tr data-dt-row="' +
+                    col.rowIndex +
+                    '" data-dt-column="' +
+                    col.columnIndex +
+                    '">' +
+                    '<td>' +
+                    col.title +
+                    ':' +
+                    '</td> ' +
+                    '<td>' +
+                    col.data +
+                    '</td>' +
+                    '</tr>'
+                : '';
+            }).join('');
+
+            return data ? $('<table class="table"/><tbody />').append(data) : false;
+          }
+        }
+      }
+    });
+
+    // Order by the grouping
+    $('.dt-row-grouping tbody').on('click', 'tr.group', function () {
+      var currentOrder = groupingTable.order()[0];
+      if (currentOrder[0] === groupColumn && currentOrder[1] === 'asc') {
+        groupingTable.order([groupColumn, 'desc']).draw();
+      } else {
+        groupingTable.order([groupColumn, 'asc']).draw();
+      }
+    });
+  }
+
+  // Multilingual DataTable
+  // --------------------------------------------------------------------
+
+  var lang = 'German';
+  if (dt_multilingual_table.length) {
+    var table_language = dt_multilingual_table.DataTable({
+      ajax: assetsPath + 'json/table-datatable.json',
+      columns: [
+        { data: '' },
+        { data: 'full_name' },
+        { data: 'post' },
+        { data: 'email' },
+        { data: 'start_date' },
+        { data: 'salary' },
+        { data: 'status' },
+        { data: '' }
+      ],
+      columnDefs: [
+        {
+          // For Responsive
+          className: 'control',
+          orderable: false,
+          targets: 0,
+          searchable: false,
+          render: function (data, type, full, meta) {
+            return '';
+          }
+        },
+        {
+          // Label
+          targets: -2,
+          render: function (data, type, full, meta) {
+            var $status_number = full['status'];
+            var $status = {
+              1: { title: 'Current', class: 'bg-label-primary' },
+              2: { title: 'Professional', class: ' bg-label-success' },
+              3: { title: 'Rejected', class: ' bg-label-danger' },
+              4: { title: 'Resigned', class: ' bg-label-warning' },
+              5: { title: 'Applied', class: ' bg-label-info' }
+            };
+            if (typeof $status[$status_number] === 'undefined') {
+              return data;
+            }
+            return (
+              '<span class="badge ' + $status[$status_number].class + '">' + $status[$status_number].title + '</span>'
+            );
+          }
+        },
+        {
+          // Actions
+          targets: -1,
+          title: 'Actions',
+          orderable: false,
+          searchable: false,
+          render: function (data, type, full, meta) {
+            return (
+              '<div class="d-inline-block">' +
+              '<a href="javascript:;" class="btn btn-sm btn-icon dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="text-primary ti ti-dots-vertical"></i></a>' +
+              '<div class="dropdown-menu dropdown-menu-end m-0">' +
+              '<a href="javascript:;" class="dropdown-item">Details</a>' +
+              '<a href="javascript:;" class="dropdown-item">Archive</a>' +
+              '<div class="dropdown-divider"></div>' +
+              '<a href="javascript:;" class="dropdown-item text-danger delete-record">Delete</a>' +
+              '</div>' +
+              '</div>' +
+              '<a href="javascript:;" class="btn btn-sm btn-icon item-edit"><i class="text-primary ti ti-pencil"></i></a>'
+            );
+          }
+        }
+      ],
+      language: {
+        url: '//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/' + lang + '.json'
+      },
+      displayLength: 7,
+      dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6 d-flex justify-content-center justify-content-md-end"f>>t<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
+      lengthMenu: [7, 10, 25, 50, 75, 100],
+      responsive: {
+        details: {
+          display: $.fn.dataTable.Responsive.display.modal({
+            header: function (row) {
+              var data = row.data();
+              return 'Details of ' + data['full_name'];
+            }
+          }),
+          type: 'column',
+          renderer: function (api, rowIdx, columns) {
+            var data = $.map(columns, function (col, i) {
+              return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
+                ? '<tr data-dt-row="' +
+                    col.rowIndex +
+                    '" data-dt-column="' +
+                    col.columnIndex +
+                    '">' +
+                    '<td>' +
+                    col.title +
+                    ':' +
+                    '</td> ' +
+                    '<td>' +
+                    col.data +
+                    '</td>' +
+                    '</tr>'
+                : '';
+            }).join('');
+
+            return data ? $('<table class="table"/><tbody />').append(data) : false;
+          }
+        }
+      }
+    });
+  }
+
+  // Filter form control to default size
+  // ? setTimeout used for multilingual table initialization
+  setTimeout(() => {
+    $('.dataTables_filter .form-control').removeClass('form-control-sm');
+    $('.dataTables_length .form-select').removeClass('form-select-sm');
+  }, 300);
+});

httpdocs/themes/vuexy/js/tables-datatables-extensions.js

@@ -0,0 +1,401 @@
+/**
+ * DataTables Extensions (jquery)
+ */
+
+'use strict';
+
+$(function () {
+  var dt_scrollable_table = $('.dt-scrollableTable'),
+    dt_fixedheader_table = $('.dt-fixedheader'),
+    dt_fixedcolumns_table = $('.dt-fixedcolumns'),
+    dt_select_table = $('.dt-select-table');
+
+  // Scrollable
+  // --------------------------------------------------------------------
+
+  if (dt_scrollable_table.length) {
+    var dt_scrollableTable = dt_scrollable_table.DataTable({
+      ajax: assetsPath + 'json/table-datatable.json',
+      columns: [
+        { data: 'full_name' },
+        { data: 'post' },
+        { data: 'email' },
+        { data: 'city' },
+        { data: 'start_date' },
+        { data: 'salary' },
+        { data: 'age' },
+        { data: 'experience' },
+        { data: '' },
+        { data: '' }
+      ],
+      columnDefs: [
+        {
+          // Label
+          targets: -2,
+          render: function (data, type, full, meta) {
+            var $status_number = full['status'];
+            var $status = {
+              1: { title: 'Current', class: 'bg-label-primary' },
+              2: { title: 'Professional', class: ' bg-label-success' },
+              3: { title: 'Rejected', class: ' bg-label-danger' },
+              4: { title: 'Resigned', class: ' bg-label-warning' },
+              5: { title: 'Applied', class: ' bg-label-info' }
+            };
+            if (typeof $status[$status_number] === 'undefined') {
+              return data;
+            }
+            return (
+              '<span class="badge ' + $status[$status_number].class + '">' + $status[$status_number].title + '</span>'
+            );
+          }
+        },
+        {
+          // Actions
+          targets: -1,
+          title: 'Actions',
+          searchable: false,
+          orderable: false,
+          render: function (data, type, full, meta) {
+            return (
+              '<div class="d-inline-block">' +
+              '<a href="javascript:;" class="btn btn-sm btn-icon dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="text-primary ti ti-dots-vertical"></i></a>' +
+              '<div class="dropdown-menu dropdown-menu-end m-0">' +
+              '<a href="javascript:;" class="dropdown-item">Details</a>' +
+              '<a href="javascript:;" class="dropdown-item">Archive</a>' +
+              '<div class="dropdown-divider"></div>' +
+              '<a href="javascript:;" class="dropdown-item text-danger delete-record">Delete</a>' +
+              '</div>' +
+              '</div>' +
+              '<a href="javascript:;" class="item-edit text-body"><i class="text-primary ti ti-pencil"></i></a>'
+            );
+          }
+        }
+      ],
+      // Scroll options
+      scrollY: '300px',
+      scrollX: true,
+      dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6 d-flex justify-content-center justify-content-md-end"f>>t<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>'
+    });
+  }
+
+  // FixedHeader
+  // --------------------------------------------------------------------
+
+  if (dt_fixedheader_table.length) {
+    var dt_fixedheader = dt_fixedheader_table.DataTable({
+      ajax: assetsPath + 'json/table-datatable.json',
+      columns: [
+        { data: '' },
+        { data: 'id' },
+        { data: 'id' },
+        { data: 'full_name' },
+        { data: 'email' },
+        { data: 'start_date' },
+        { data: 'salary' },
+        { data: 'status' },
+        { data: '' }
+      ],
+      columnDefs: [
+        {
+          className: 'control',
+          orderable: false,
+          targets: 0,
+          responsivePriority: 3,
+          render: function (data, type, full, meta) {
+            return '';
+          }
+        },
+        {
+          // For Checkboxes
+          targets: 1,
+          orderable: false,
+          render: function () {
+            return '<input type="checkbox" class="dt-checkboxes form-check-input">';
+          },
+          checkboxes: {
+            selectAllRender: '<input type="checkbox" class="form-check-input">'
+          },
+          responsivePriority: 4
+        },
+        {
+          targets: 2,
+          visible: false
+        },
+        {
+          // Avatar image/badge, Name and post
+          targets: 3,
+          render: function (data, type, full, meta) {
+            var $user_img = full['avatar'],
+              $name = full['full_name'],
+              $post = full['post'];
+            if ($user_img) {
+              // For Avatar image
+              var $output =
+                '<img src="' + assetsPath + 'img/avatars/' + $user_img + '" alt="Avatar" class="rounded-circle">';
+            } else {
+              // For Avatar badge
+              var stateNum = Math.floor(Math.random() * 6);
+              var states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
+              var $state = states[stateNum],
+                $name = full['full_name'];
+              var $initials = $name.match(/\b\w/g) || [];
+              $initials = (($initials.shift() || '') + ($initials.pop() || '')).toUpperCase();
+              $output = '<span class="avatar-initial rounded-circle bg-label-' + $state + '">' + $initials + '</span>';
+            }
+            // Creates full output for row
+            var $row_output =
+              '<div class="d-flex justify-content-start align-items-center">' +
+              '<div class="avatar-wrapper">' +
+              '<div class="avatar me-2">' +
+              $output +
+              '</div>' +
+              '</div>' +
+              '<div class="d-flex flex-column">' +
+              '<span class="emp_name text-truncate">' +
+              $name +
+              '</span>' +
+              '<small class="emp_post text-truncate text-muted">' +
+              $post +
+              '</small>' +
+              '</div>' +
+              '</div>';
+            return $row_output;
+          },
+          responsivePriority: 5
+        },
+        {
+          responsivePriority: 1,
+          targets: 4
+        },
+        {
+          responsivePriority: 2,
+          targets: 6
+        },
+
+        {
+          // Label
+          targets: -2,
+          render: function (data, type, full, meta) {
+            // var $rand_num = Math.floor(Math.random() * 5) + 1;
+            var $status_number = full['status'];
+            var $status = {
+              1: { title: 'Current', class: 'bg-label-primary' },
+              2: { title: 'Professional', class: ' bg-label-success' },
+              3: { title: 'Rejected', class: ' bg-label-danger' },
+              4: { title: 'Resigned', class: ' bg-label-warning' },
+              5: { title: 'Applied', class: ' bg-label-info' }
+            };
+            if (typeof $status[$status_number] === 'undefined') {
+              return data;
+            }
+            return (
+              '<span class="badge ' + $status[$status_number].class + '">' + $status[$status_number].title + '</span>'
+            );
+          }
+        },
+        {
+          // Actions
+          targets: -1,
+          title: 'Actions',
+          orderable: false,
+          render: function (data, type, full, meta) {
+            return (
+              '<div class="d-inline-block">' +
+              '<a href="javascript:;" class="btn btn-sm btn-icon dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="text-primary ti ti-dots-vertical"></i></a>' +
+              '<div class="dropdown-menu dropdown-menu-end m-0">' +
+              '<a href="javascript:;" class="dropdown-item">Details</a>' +
+              '<a href="javascript:;" class="dropdown-item">Archive</a>' +
+              '<div class="dropdown-divider"></div>' +
+              '<a href="javascript:;" class="dropdown-item text-danger delete-record">Delete</a>' +
+              '</div>' +
+              '</div>' +
+              '<a href="javascript:;" class="btn btn-sm btn-icon item-edit"><i class="text-primary ti ti-pencil"></i></a>'
+            );
+          }
+        }
+      ],
+      order: [[2, 'desc']],
+      dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6 d-flex justify-content-center justify-content-md-end"f>>t<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
+      displayLength: 7,
+      lengthMenu: [7, 10, 25, 50, 75, 100],
+      responsive: {
+        details: {
+          display: $.fn.dataTable.Responsive.display.modal({
+            header: function (row) {
+              var data = row.data();
+              return 'Details of ' + data['full_name'];
+            }
+          }),
+          type: 'column',
+          renderer: function (api, rowIdx, columns) {
+            var data = $.map(columns, function (col, i) {
+              return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
+                ? '<tr data-dt-row="' +
+                    col.rowIndex +
+                    '" data-dt-column="' +
+                    col.columnIndex +
+                    '">' +
+                    '<td>' +
+                    col.title +
+                    ':' +
+                    '</td> ' +
+                    '<td>' +
+                    col.data +
+                    '</td>' +
+                    '</tr>'
+                : '';
+            }).join('');
+
+            return data ? $('<table class="table"/><tbody />').append(data) : false;
+          }
+        }
+      }
+    });
+    // Fixed header
+    if (window.Helpers.isNavbarFixed()) {
+      var navHeight = $('#layout-navbar').outerHeight();
+      new $.fn.dataTable.FixedHeader(dt_fixedheader).headerOffset(navHeight);
+    } else {
+      new $.fn.dataTable.FixedHeader(dt_fixedheader);
+    }
+  }
+
+  // FixedColumns
+  // --------------------------------------------------------------------
+
+  if (dt_fixedcolumns_table.length) {
+    var dt_fixedcolumns = dt_fixedcolumns_table.DataTable({
+      ajax: assetsPath + 'json/table-datatable.json',
+      columns: [
+        { data: 'full_name' },
+        { data: 'post' },
+        { data: 'email' },
+        { data: 'city' },
+        { data: 'start_date' },
+        { data: 'salary' },
+        { data: 'age' },
+        { data: 'experience' },
+        { data: 'status' },
+        { data: 'id' }
+      ],
+      columnDefs: [
+        {
+          // Label
+          targets: -2,
+          render: function (data, type, full, meta) {
+            var $status_number = full['status'];
+            var $status = {
+              1: { title: 'Current', class: 'bg-label-primary' },
+              2: { title: 'Professional', class: ' bg-label-success' },
+              3: { title: 'Rejected', class: ' bg-label-danger' },
+              4: { title: 'Resigned', class: ' bg-label-warning' },
+              5: { title: 'Applied', class: ' bg-label-info' }
+            };
+            if (typeof $status[$status_number] === 'undefined') {
+              return data;
+            }
+            return (
+              '<span class="badge ' + $status[$status_number].class + '">' + $status[$status_number].title + '</span>'
+            );
+          }
+        },
+        {
+          // Actions
+          targets: -1,
+          title: 'Actions',
+          searchable: false,
+          orderable: false,
+          render: function (data, type, full, meta) {
+            return (
+              '<div class="d-inline-block">' +
+              '<a href="javascript:;" class="btn btn-sm btn-icon dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="text-primary ti ti-dots-vertical"></i></a>' +
+              '<div class="dropdown-menu dropdown-menu-end m-0">' +
+              '<a href="javascript:;" class="dropdown-item">Details</a>' +
+              '<a href="javascript:;" class="dropdown-item">Archive</a>' +
+              '<div class="dropdown-divider"></div>' +
+              '<a href="javascript:;" class="dropdown-item text-danger delete-record"></i>Delete</a>' +
+              '</div>' +
+              '</div>' +
+              '<a href="javascript:;" class="item-edit text-body"><i class="text-primary ti ti-pencil"></i></a>'
+            );
+          }
+        }
+      ],
+      dom: '<"d-flex justify-content-between align-items-center row"<"col-sm-12 col-md-2 d-flex"f><"col-sm-12 col-md-10 d-none"i>>t',
+      scrollY: 300,
+      scrollX: true,
+      scrollCollapse: true,
+      paging: false,
+      info: false,
+      // Fixed column option
+      fixedColumns: true
+    });
+  }
+
+  // Select
+  // --------------------------------------------------------------------
+
+  if (dt_select_table.length) {
+    var dt_select = dt_select_table.DataTable({
+      ajax: assetsPath + 'json/table-datatable.json',
+      columns: [
+        { data: 'id' },
+        { data: 'full_name' },
+        { data: 'post' },
+        { data: 'email' },
+        { data: 'city' },
+        { data: 'start_date' },
+        { data: 'salary' },
+        { data: 'status' }
+      ],
+      columnDefs: [
+        {
+          // For Checkboxes
+          targets: 0,
+          searchable: false,
+          orderable: false,
+          render: function () {
+            return '<input type="checkbox" class="dt-checkboxes form-check-input">';
+          },
+          checkboxes: {
+            selectRow: true,
+            selectAllRender: '<input type="checkbox" class="form-check-input">'
+          }
+        },
+        {
+          // Label
+          targets: -1,
+          render: function (data, type, full, meta) {
+            var $status_number = full['status'];
+            var $status = {
+              1: { title: 'Current', class: 'bg-label-primary' },
+              2: { title: 'Professional', class: ' bg-label-success' },
+              3: { title: 'Rejected', class: ' bg-label-danger' },
+              4: { title: 'Resigned', class: ' bg-label-warning' },
+              5: { title: 'Applied', class: ' bg-label-info' }
+            };
+            if (typeof $status[$status_number] === 'undefined') {
+              return data;
+            }
+            return (
+              '<span class="badge ' + $status[$status_number].class + '">' + $status[$status_number].title + '</span>'
+            );
+          }
+        }
+      ],
+      order: [[1, 'desc']],
+      dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6 d-flex justify-content-center justify-content-md-end"f>>t<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
+      select: {
+        // Select style
+        style: 'multi'
+      }
+    });
+  }
+
+  // Filter form control to default size
+  // ? setTimeout used for multilingual table initialization
+  setTimeout(() => {
+    $('.dataTables_filter .form-control').removeClass('form-control-sm');
+    $('.dataTables_length .form-select').removeClass('form-select-sm');
+  }, 200);
+});

httpdocs/themes/vuexy/js/ui-app-brand.js

@@ -0,0 +1,79 @@
+/**
+ * UI App Brand
+ */
+
+'use strict';
+
+(function () {
+  const layoutMenu1 = document.querySelector('#layout-menu1'),
+    layoutMenu2 = document.querySelector('#layout-menu2'),
+    layoutMenu3 = document.querySelector('#layout-menu3'),
+    layoutMenu4 = document.querySelector('#layout-menu4');
+
+  // Initializing four vertical demo menus
+  if (layoutMenu1) {
+    new Menu(layoutMenu1);
+  }
+  if (layoutMenu2) {
+    new Menu(layoutMenu2);
+  }
+  if (layoutMenu3) {
+    new Menu(layoutMenu3);
+  }
+  if (layoutMenu4) {
+    new Menu(layoutMenu4);
+  }
+
+  // On toggle button click
+  const appToggleBtn = document.querySelector('.app-brand-toggle');
+  if (appToggleBtn) {
+    appToggleBtn.onclick = function () {
+      if (layoutMenu1) {
+        layoutMenu1.classList.toggle('menu-collapsed');
+      }
+      if (layoutMenu2) {
+        layoutMenu2.classList.toggle('menu-collapsed');
+      }
+      if (layoutMenu3) {
+        layoutMenu3.classList.toggle('menu-collapsed');
+      }
+      if (layoutMenu4) {
+        layoutMenu4.classList.toggle('menu-collapsed');
+      }
+    };
+  }
+
+  // For Docs only
+  const brandNameBtn = document.querySelector('.brand-menu-toggle'),
+    logoNameBtn = document.querySelector('.brand-logo-toggle'),
+    logoNameTextBtn = document.querySelector('.logo-name-toggle'),
+    brandImageBtn = document.querySelector('.brand-image-toggle');
+  if (brandNameBtn) {
+    brandNameBtn.onclick = function () {
+      if (layoutMenu1) {
+        layoutMenu1.classList.toggle('menu-collapsed');
+      }
+    };
+  }
+  if (logoNameBtn) {
+    logoNameBtn.onclick = function () {
+      if (layoutMenu2) {
+        layoutMenu2.classList.toggle('menu-collapsed');
+      }
+    };
+  }
+  if (logoNameTextBtn) {
+    logoNameTextBtn.onclick = function () {
+      if (layoutMenu3) {
+        layoutMenu3.classList.toggle('menu-collapsed');
+      }
+    };
+  }
+  if (brandImageBtn) {
+    brandImageBtn.onclick = function () {
+      if (layoutMenu4) {
+        layoutMenu4.classList.toggle('menu-collapsed');
+      }
+    };
+  }
+})();

httpdocs/themes/vuexy/js/ui-carousel.js

@@ -0,0 +1,185 @@
+/**
+ * UI Carousel
+ */
+
+'use strict';
+
+(function () {
+  const swiperDefault = document.querySelector('#swiper-default'),
+    swiperWithArrows = document.querySelector('#swiper-with-arrows'),
+    swiperWithPagination = document.querySelector('#swiper-with-pagination'),
+    swiperWithProgress = document.querySelector('#swiper-with-progress'),
+    swiperWithScrollbar = document.querySelector('#swiper-with-scrollbar'),
+    verticalSwiper = document.querySelector('#swiper-vertical'),
+    swiperMultipleSlides = document.querySelector('#swiper-multiple-slides'),
+    swiper3dCoverflowEffect = document.querySelector('#swiper-3d-coverflow-effect'),
+    swiper3dCubeEffect = document.querySelector('#swiper-3d-cube-effect'),
+    swiper3dFlipEffect = document.querySelector('#swiper-3d-flip-effect'),
+    galleryThumbs = document.querySelector('.gallery-thumbs'),
+    galleryTop = document.querySelector('.gallery-top');
+  let galleryInstance;
+
+  // Default
+  // --------------------------------------------------------------------
+  if (swiperDefault) {
+    new Swiper(swiperDefault, {
+      slidesPerView: 'auto'
+    });
+  }
+
+  // With arrows
+  // --------------------------------------------------------------------
+  if (swiperWithArrows) {
+    new Swiper(swiperWithArrows, {
+      slidesPerView: 'auto',
+      navigation: {
+        prevEl: '.swiper-button-prev',
+        nextEl: '.swiper-button-next'
+      }
+    });
+  }
+
+  // With pagination
+  // --------------------------------------------------------------------
+  if (swiperWithPagination) {
+    new Swiper(swiperWithPagination, {
+      slidesPerView: 'auto',
+      pagination: {
+        clickable: true,
+        el: '.swiper-pagination'
+      }
+    });
+  }
+
+  // With progress
+  // --------------------------------------------------------------------
+  if (swiperWithProgress) {
+    new Swiper(swiperWithProgress, {
+      slidesPerView: 'auto',
+      pagination: {
+        type: 'progressbar',
+        el: '.swiper-pagination'
+      },
+      navigation: {
+        prevEl: '.swiper-button-prev',
+        nextEl: '.swiper-button-next'
+      }
+    });
+  }
+
+  // With scrollbar
+  // --------------------------------------------------------------------
+  if (swiperWithScrollbar) {
+    new Swiper(swiperWithScrollbar, {
+      scrollbar: {
+        hide: true,
+        el: '.swiper-scrollbar'
+      }
+    });
+  }
+
+  // Vertical
+  // --------------------------------------------------------------------
+  if (verticalSwiper) {
+    new Swiper(verticalSwiper, {
+      direction: 'vertical',
+      pagination: {
+        clickable: true,
+        el: '.swiper-pagination'
+      }
+    });
+  }
+
+  // Multiple slides
+  // --------------------------------------------------------------------
+  if (swiperMultipleSlides) {
+    new Swiper(swiperMultipleSlides, {
+      slidesPerView: 3,
+      spaceBetween: 30,
+      pagination: {
+        clickable: true,
+        el: '.swiper-pagination'
+      }
+    });
+  }
+
+  // 3D coverflow effect
+  // --------------------------------------------------------------------
+  if (swiper3dCoverflowEffect) {
+    new Swiper(swiper3dCoverflowEffect, {
+      effect: 'coverflow',
+      grabCursor: true,
+      centeredSlides: true,
+      slidesPerView: 'auto',
+      coverflowEffect: {
+        rotate: 50,
+        stretch: 0,
+        depth: 100,
+        modifier: 1,
+        slideShadows: true
+      },
+      pagination: {
+        el: '.swiper-pagination'
+      }
+    });
+  }
+
+  // 3D cube effect
+  // --------------------------------------------------------------------
+  if (swiper3dCubeEffect) {
+    new Swiper(swiper3dCubeEffect, {
+      effect: 'cube',
+      grabCursor: true,
+      cubeEffect: {
+        shadow: true,
+        slideShadows: true,
+        shadowScale: 0.94,
+        shadowOffset: 20
+      },
+      pagination: {
+        el: '.swiper-pagination'
+      }
+    });
+  }
+
+  // 3D flip effect
+  // --------------------------------------------------------------------
+  if (swiper3dFlipEffect) {
+    new Swiper(swiper3dFlipEffect, {
+      effect: 'flip',
+      grabCursor: true,
+      pagination: {
+        el: '.swiper-pagination'
+      },
+      navigation: {
+        prevEl: '.swiper-button-prev',
+        nextEl: '.swiper-button-next'
+      }
+    });
+  }
+
+  // Gallery effect
+  // --------------------------------------------------------------------
+  if (galleryThumbs) {
+    galleryInstance = new Swiper(galleryThumbs, {
+      spaceBetween: 10,
+      slidesPerView: 4,
+      freeMode: true,
+      watchSlidesVisibility: true,
+      watchSlidesProgress: true
+    });
+  }
+
+  if (galleryTop) {
+    new Swiper(galleryTop, {
+      spaceBetween: 10,
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev'
+      },
+      thumbs: {
+        swiper: galleryInstance
+      }
+    });
+  }
+})();

httpdocs/themes/vuexy/js/ui-menu.js

@@ -0,0 +1,142 @@
+/**
+ * Menu
+ */
+
+'use strict';
+
+(function () {
+  // ? This JS is for menu demo purpose only
+
+  // Vertical
+  const menu1 = document.querySelector('#menu-1'),
+    menu1Btn = document.querySelector('#menu-1-toggle-collapsed');
+
+  if (menu1) {
+    new Menu(menu1);
+  }
+  if (menu1Btn) {
+    menu1Btn.onclick = function () {
+      menu1.classList.toggle('menu-collapsed');
+    };
+  }
+
+  // Horizontal
+  const menu2 = document.querySelector('#menu-2');
+  if (menu2) {
+    new Menu(menu2, {
+      orientation: 'horizontal'
+    });
+  }
+
+  // Horizontal (Show dropdown on hover)
+  const menu3 = document.querySelector('#menu-3');
+  if (menu3) {
+    new Menu(menu3, {
+      orientation: 'horizontal',
+      showDropdownOnHover: true
+    });
+  }
+
+  // No animation
+  const menu5 = document.querySelector('#menu-5'),
+    menu5Btn = document.querySelector('#menu-5-toggle-collapsed');
+  if (menu5) {
+    new Menu(menu5, {
+      animate: false
+    });
+  }
+
+  if (menu5Btn) {
+    menu5Btn.onclick = function () {
+      menu5.classList.toggle('menu-collapsed');
+    };
+  }
+  const menu6 = document.querySelector('#menu-6');
+  if (menu6) {
+    new Menu(menu6, {
+      orientation: 'horizontal',
+      animate: false,
+      closeChildren: true
+    });
+  }
+
+  // No accordion
+  const menu7 = document.querySelector('#menu-7'),
+    menu7Btn = document.querySelector('#menu-7-toggle-collapsed');
+  if (menu7) {
+    new Menu(menu7, {
+      accordion: false
+    });
+  }
+  if (menu7Btn) {
+    menu7Btn.onclick = function () {
+      menu7.classList.toggle('menu-collapsed');
+    };
+  }
+
+  const menu8 = document.querySelector('#menu-8');
+  if (menu8) {
+    new Menu(menu8, {
+      orientation: 'horizontal',
+      accordion: false
+    });
+  }
+
+  // Elements
+  const menus9List = document.querySelectorAll('.menus-9'),
+    menu9Btn = document.querySelector('#menus-9-toggle-collapsed');
+  if (menus9List) {
+    menus9List.forEach(e => {
+      new Menu(e);
+    });
+  }
+  if (menu9Btn) {
+    menu9Btn.onclick = function () {
+      menus9List.forEach(e => {
+        e.classList.toggle('menu-collapsed');
+      });
+    };
+  }
+
+  // Colors (vertical)
+  const menus10List = document.querySelectorAll('.menus-10'),
+    menu10Btn = document.querySelector('#menus-10-toggle-collapsed');
+  if (menus10List) {
+    menus10List.forEach(e => {
+      new Menu(e);
+    });
+  }
+  if (menu10Btn) {
+    menu10Btn.onclick = function () {
+      menus10List.forEach(e => {
+        e.classList.toggle('menu-collapsed');
+      });
+    };
+  }
+
+  // Colors (horizontal)
+  const menus11List = document.querySelectorAll('.menus-11');
+  if (menus11List) {
+    menus11List.forEach(e => {
+      new Menu(e, {
+        orientation: 'horizontal'
+      });
+    });
+  }
+
+  // With background (For Docs)
+  const menus12List = document.querySelectorAll('.menus-12'),
+    menu12Btn = document.querySelector('#menus-12-toggle-collapsed');
+  if (menus12List) {
+    menus12List.forEach(e => {
+      new Menu(e);
+    });
+  }
+  if (menu12Btn) {
+    menu12Btn.onclick = function () {
+      menus12List.forEach(e => {
+        e.classList.toggle('menu-collapsed');
+      });
+    };
+  }
+})();

httpdocs/themes/vuexy/js/ui-modals.js

@@ -0,0 +1,57 @@
+/**
+ * UI Modals
+ */
+
+'use strict';
+
+(function () {
+  // Animation Dropdown
+  const animationDropdown = document.querySelector('#animation-dropdown'),
+    animationModal = document.querySelector('#animationModal');
+  if (animationDropdown) {
+    animationDropdown.onchange = function () {
+      animationModal.classList = '';
+      animationModal.classList.add('modal', 'animate__animated', this.value);
+    };
+  }
+
+  // On hiding modal, remove iframe video/audio to stop playing
+  const youTubeModal = document.querySelector('#youTubeModal'),
+    youTubeModalVideo = youTubeModal.querySelector('iframe');
+  youTubeModal.addEventListener('hidden.bs.modal', function () {
+    youTubeModalVideo.setAttribute('src', '');
+  });
+
+  // Function to get and auto play youTube video
+  const autoPlayYouTubeModal = function () {
+    const modalTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="modal"]'));
+    modalTriggerList.map(function (modalTriggerEl) {
+      modalTriggerEl.onclick = function () {
+        const theModal = this.getAttribute('data-bs-target'),
+          videoSRC = this.getAttribute('data-theVideo'),
+          videoSRCauto = `${videoSRC}?autoplay=1`,
+          modalVideo = document.querySelector(`${theModal} iframe`);
+        if (modalVideo) {
+          modalVideo.setAttribute('src', videoSRCauto);
+        }
+      };
+    });
+  };
+
+  // Calling function on load
+  autoPlayYouTubeModal();
+
+  // Onboarding modal carousel height animation
+  document.querySelectorAll('.carousel').forEach(carousel => {
+    carousel.addEventListener('slide.bs.carousel', event => {
+      // ! Todo: Convert to JS (animation) (jquery)
+      var nextH = $(event.relatedTarget).height();
+      $(carousel).find('.active.carousel-item').parent().animate(
+        {
+          height: nextH
+        },
+        500
+      );
+    });
+  });
+})();

httpdocs/themes/vuexy/js/ui-navbar.js

@@ -0,0 +1,19 @@
+/**
+ * UI Navbar
+ */
+'use strict';
+
+(function () {
+  // If layout is RTL add .dropdown-menu-end class to .dropdown-menu
+  if (isRtl) {
+    Helpers._addClass('dropdown-menu-end', document.querySelectorAll('.dropdown-menu'));
+  }
+
+  // Mega dropdown
+  const megaDropdown = document.querySelectorAll('.nav-link.mega-dropdown');
+  if (megaDropdown) {
+    megaDropdown.forEach(e => {
+      new MegaDropdown(e);
+    });
+  }
+})();

httpdocs/themes/vuexy/js/ui-popover.js

@@ -0,0 +1,12 @@
+// /**
+//  * UI Tooltips & Popovers
+//  */
+
+'use strict';
+
+(function () {
+  const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
+  const popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
+    return new bootstrap.Popover(popoverTriggerEl);
+  });
+})();

httpdocs/themes/vuexy/js/ui-toasts.js

@@ -0,0 +1,211 @@
+/**
+ * UI Toasts
+ */
+
+'use strict';
+
+(function () {
+  // Bootstrap toasts example
+  // --------------------------------------------------------------------
+  const toastAnimationExample = document.querySelector('.toast-ex'),
+    toastPlacementExample = document.querySelector('.toast-placement-ex'),
+    toastAnimationBtn = document.querySelector('#showToastAnimation'),
+    toastPlacementBtn = document.querySelector('#showToastPlacement');
+  let selectedType, selectedAnimation, selectedPlacement, toast, toastAnimation, toastPlacement;
+
+  // Animation Button click
+  if (toastAnimationBtn) {
+    toastAnimationBtn.onclick = function () {
+      if (toastAnimation) {
+        toastDispose(toastAnimation);
+      }
+      selectedType = document.querySelector('#selectType').value;
+      selectedAnimation = document.querySelector('#selectAnimation').value;
+      toastAnimationExample.classList.add(selectedAnimation);
+      toastAnimationExample.querySelector('.ti').classList.add(selectedType);
+      toastAnimation = new bootstrap.Toast(toastAnimationExample);
+      toastAnimation.show();
+    };
+  }
+
+  // Dispose toast when open another
+  function toastDispose(toast) {
+    if (toast && toast._element !== null) {
+      if (toastPlacementExample) {
+        toastPlacementExample.classList.remove(selectedType);
+        toastPlacementExample.querySelector('.ti').classList.remove(selectedType);
+        DOMTokenList.prototype.remove.apply(toastPlacementExample.classList, selectedPlacement);
+      }
+      if (toastAnimationExample) {
+        toastAnimationExample.classList.remove(selectedType, selectedAnimation);
+        toastAnimationExample.querySelector('.ti').classList.remove(selectedType);
+      }
+      toast.dispose();
+    }
+  }
+  // Placement Button click
+  if (toastPlacementBtn) {
+    toastPlacementBtn.onclick = function () {
+      if (toastPlacement) {
+        toastDispose(toastPlacement);
+      }
+      selectedType = document.querySelector('#selectTypeOpt').value;
+      selectedPlacement = document.querySelector('#selectPlacement').value.split(' ');
+
+      toastPlacementExample.querySelector('.ti').classList.add(selectedType);
+      DOMTokenList.prototype.add.apply(toastPlacementExample.classList, selectedPlacement);
+      toastPlacement = new bootstrap.Toast(toastPlacementExample);
+      toastPlacement.show();
+    };
+  }
+})();
+
+//Toastr (jquery)
+// --------------------------------------------------------------------
+$(function () {
+  var i = -1;
+  var toastCount = 0;
+  var $toastlast;
+  var getMessage = function () {
+    var msgs = [
+      "Don't be pushed around by the fears in your mind. Be led by the dreams in your heart.",
+      '<div class="mb-3"><input class="input-small form-control" value="Textbox"/>&nbsp;<a href="http://johnpapa.net" target="_blank">This is a hyperlink</a></div><div class="d-flex"><button type="button" id="okBtn" class="btn btn-primary btn-sm me-2">Close me</button><button type="button" id="surpriseBtn" class="btn btn-sm btn-secondary">Surprise me</button></div>',
+      'Live the Life of Your Dreams',
+      'Believe in Your Self!',
+      'Be mindful. Be grateful. Be positive.',
+      'Accept yourself, love yourself!'
+    ];
+    i++;
+    if (i === msgs.length) {
+      i = 0;
+    }
+    return msgs[i];
+  };
+  var getMessageWithClearButton = function (msg) {
+    msg = msg ? msg : 'Clear itself?';
+    msg += '<br /><br /><button type="button" class="btn btn-secondary clear">Yes</button>';
+    return msg;
+  };
+  $('#closeButton').on('click', function () {
+    if ($(this).is(':checked')) {
+      $('#addBehaviorOnToastCloseClick').prop('disabled', false);
+    } else {
+      $('#addBehaviorOnToastCloseClick').prop('disabled', true);
+      $('#addBehaviorOnToastCloseClick').prop('checked', false);
+    }
+  });
+  $('#showtoast').on('click', function () {
+    var shortCutFunction = $('#toastTypeGroup input:radio:checked').val(),
+      isRtl = $('html').attr('dir') === 'rtl',
+      msg = $('#message').val(),
+      title = $('#title').val() || '',
+      $showDuration = $('#showDuration'),
+      $hideDuration = $('#hideDuration'),
+      $timeOut = $('#timeOut'),
+      $extendedTimeOut = $('#extendedTimeOut'),
+      $showEasing = $('#showEasing'),
+      $hideEasing = $('#hideEasing'),
+      $showMethod = $('#showMethod'),
+      $hideMethod = $('#hideMethod'),
+      toastIndex = toastCount++,
+      addClear = $('#addClear').prop('checked'),
+      prePositionClass = 'toast-top-right';
+
+    prePositionClass =
+      typeof toastr.options.positionClass === 'undefined' ? 'toast-top-right' : toastr.options.positionClass;
+
+    toastr.options = {
+      maxOpened: 1,
+      autoDismiss: true,
+      closeButton: $('#closeButton').prop('checked'),
+      debug: $('#debugInfo').prop('checked'),
+      newestOnTop: $('#newestOnTop').prop('checked'),
+      progressBar: $('#progressBar').prop('checked'),
+      positionClass: $('#positionGroup input:radio:checked').val() || 'toast-top-right',
+      preventDuplicates: $('#preventDuplicates').prop('checked'),
+      onclick: null,
+      rtl: isRtl
+    };
+
+    //Add fix for multiple toast open while changing the position
+    if (prePositionClass != toastr.options.positionClass) {
+      toastr.options.hideDuration = 0;
+      toastr.clear();
+    }
+
+    if ($('#addBehaviorOnToastClick').prop('checked')) {
+      toastr.options.onclick = function () {
+        alert('You can perform some custom action after a toast goes away');
+      };
+    }
+    if ($('#addBehaviorOnToastCloseClick').prop('checked')) {
+      toastr.options.onCloseClick = function () {
+        alert('You can perform some custom action when the close button is clicked');
+      };
+    }
+    if ($showDuration.val().length) {
+      toastr.options.showDuration = parseInt($showDuration.val());
+    }
+    if ($hideDuration.val().length) {
+      toastr.options.hideDuration = parseInt($hideDuration.val());
+    }
+    if ($timeOut.val().length) {
+      toastr.options.timeOut = addClear ? 0 : parseInt($timeOut.val());
+    }
+    if ($extendedTimeOut.val().length) {
+      toastr.options.extendedTimeOut = addClear ? 0 : parseInt($extendedTimeOut.val());
+    }
+    if ($showEasing.val().length) {
+      toastr.options.showEasing = $showEasing.val();
+    }
+    if ($hideEasing.val().length) {
+      toastr.options.hideEasing = $hideEasing.val();
+    }
+    if ($showMethod.val().length) {
+      toastr.options.showMethod = $showMethod.val();
+    }
+    if ($hideMethod.val().length) {
+      toastr.options.hideMethod = $hideMethod.val();
+    }
+    if (addClear) {
+      msg = getMessageWithClearButton(msg);
+      toastr.options.tapToDismiss = false;
+    }
+    if (!msg) {
+      msg = getMessage();
+    }
+    var $toast = toastr[shortCutFunction](msg, title); // Wire up an event handler to a button in the toast, if it exists
+    $toastlast = $toast;
+    if (typeof $toast === 'undefined') {
+      return;
+    }
+    if ($toast.find('#okBtn').length) {
+      $toast.delegate('#okBtn', 'click', function () {
+        alert('you clicked me. i was toast #' + toastIndex + '. goodbye!');
+        $toast.remove();
+      });
+    }
+    if ($toast.find('#surpriseBtn').length) {
+      $toast.delegate('#surpriseBtn', 'click', function () {
+        alert('Surprise! you clicked me. i was toast #' + toastIndex + '. You could perform an action here.');
+      });
+    }
+    if ($toast.find('.clear').length) {
+      $toast.delegate('.clear', 'click', function () {
+        toastr.clear($toast, {
+          force: true
+        });
+      });
+    }
+  });
+
+  function getLastToast() {
+    return $toastlast;
+  }
+  $('#clearlasttoast').on('click', function () {
+    toastr.clear(getLastToast());
+  });
+  $('#cleartoasts').on('click', function () {
+    toastr.clear();
+  });
+});

httpdocs/themes/vuexy/js/wizard-ex-checkout.js

@@ -0,0 +1,217 @@
+/**
+ *  Form Wizard
+ */
+
+'use strict';
+
+// rateyo (jquery)
+$(function () {
+  var readOnlyRating = $('.read-only-ratings');
+
+  // Star rating
+  if (readOnlyRating) {
+    readOnlyRating.rateYo({
+      rtl: isRtl,
+      rating: 4,
+      starWidth: '20px'
+    });
+  }
+});
+
+(function () {
+  // Init custom option check
+  window.Helpers.initCustomOptionCheck();
+
+  // libs
+  const creditCardMask = document.querySelector('.credit-card-mask'),
+    expiryDateMask = document.querySelector('.expiry-date-mask'),
+    cvvMask = document.querySelector('.cvv-code-mask');
+
+  // Credit Card
+  if (creditCardMask) {
+    new Cleave(creditCardMask, {
+      creditCard: true,
+      onCreditCardTypeChanged: function (type) {
+        if (type != '' && type != 'unknown') {
+          document.querySelector('.card-type').innerHTML =
+            '<img src="' + assetsPath + 'img/icons/payments/' + type + '-cc.png" height="28"/>';
+        } else {
+          document.querySelector('.card-type').innerHTML = '';
+        }
+      }
+    });
+  }
+  // Expiry Date Mask
+  if (expiryDateMask) {
+    new Cleave(expiryDateMask, {
+      date: true,
+      delimiter: '/',
+      datePattern: ['m', 'y']
+    });
+  }
+
+  // CVV
+  if (cvvMask) {
+    new Cleave(cvvMask, {
+      numeral: true,
+      numeralPositiveOnly: true
+    });
+  }
+
+  // Wizard Checkout
+  // --------------------------------------------------------------------
+
+  const wizardCheckout = document.querySelector('#wizard-checkout');
+  if (typeof wizardCheckout !== undefined && wizardCheckout !== null) {
+    // Wizard form
+    const wizardCheckoutForm = wizardCheckout.querySelector('#wizard-checkout-form');
+    // Wizard steps
+    const wizardCheckoutFormStep1 = wizardCheckoutForm.querySelector('#checkout-cart');
+    const wizardCheckoutFormStep2 = wizardCheckoutForm.querySelector('#checkout-address');
+    const wizardCheckoutFormStep3 = wizardCheckoutForm.querySelector('#checkout-payment');
+    const wizardCheckoutFormStep4 = wizardCheckoutForm.querySelector('#checkout-confirmation');
+    // Wizard next prev button
+    const wizardCheckoutNext = [].slice.call(wizardCheckoutForm.querySelectorAll('.btn-next'));
+    const wizardCheckoutPrev = [].slice.call(wizardCheckoutForm.querySelectorAll('.btn-prev'));
+
+    let validationStepper = new Stepper(wizardCheckout, {
+      linear: false
+    });
+
+    // Cart
+    const FormValidation1 = FormValidation.formValidation(wizardCheckoutFormStep1, {
+      fields: {
+        // * Validate the fields here based on your requirements
+      },
+
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: ''
+          // rowSelector: '.col-lg-6'
+        }),
+        autoFocus: new FormValidation.plugins.AutoFocus(),
+        submitButton: new FormValidation.plugins.SubmitButton()
+      }
+    }).on('core.form.valid', function () {
+      // Jump to the next step when all fields in the current step are valid
+      validationStepper.next();
+    });
+
+    // Address
+    const FormValidation2 = FormValidation.formValidation(wizardCheckoutFormStep2, {
+      fields: {
+        // * Validate the fields here based on your requirements
+      },
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: ''
+          // rowSelector: '.col-lg-6'
+        }),
+        autoFocus: new FormValidation.plugins.AutoFocus(),
+        submitButton: new FormValidation.plugins.SubmitButton()
+      }
+    }).on('core.form.valid', function () {
+      // Jump to the next step when all fields in the current step are valid
+      validationStepper.next();
+    });
+
+    // Payment
+    const FormValidation3 = FormValidation.formValidation(wizardCheckoutFormStep3, {
+      fields: {
+        // * Validate the fields here based on your requirements
+      },
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: ''
+          // rowSelector: '.col-lg-6'
+        }),
+        autoFocus: new FormValidation.plugins.AutoFocus(),
+        submitButton: new FormValidation.plugins.SubmitButton()
+      }
+    }).on('core.form.valid', function () {
+      validationStepper.next();
+    });
+
+    // Confirmation
+    const FormValidation4 = FormValidation.formValidation(wizardCheckoutFormStep4, {
+      fields: {
+        // * Validate the fields here based on your requirements
+      },
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: '',
+          rowSelector: '.col-md-12'
+        }),
+        autoFocus: new FormValidation.plugins.AutoFocus(),
+        submitButton: new FormValidation.plugins.SubmitButton()
+      }
+    }).on('core.form.valid', function () {
+      // You can submit the form
+      // wizardCheckoutForm.submit()
+      // or send the form data to server via an Ajax request
+      // To make the demo simple, I just placed an alert
+      alert('Submitted..!!');
+    });
+
+    wizardCheckoutNext.forEach(item => {
+      item.addEventListener('click', event => {
+        // When click the Next button, we will validate the current step
+        switch (validationStepper._currentIndex) {
+          case 0:
+            FormValidation1.validate();
+            break;
+
+          case 1:
+            FormValidation2.validate();
+            break;
+
+          case 2:
+            FormValidation3.validate();
+            break;
+
+          case 3:
+            FormValidation4.validate();
+            break;
+
+          default:
+            break;
+        }
+      });
+    });
+
+    wizardCheckoutPrev.forEach(item => {
+      item.addEventListener('click', event => {
+        switch (validationStepper._currentIndex) {
+          case 3:
+            validationStepper.previous();
+            break;
+
+          case 2:
+            validationStepper.previous();
+            break;
+
+          case 1:
+            validationStepper.previous();
+            break;
+
+          case 0:
+
+          default:
+            break;
+        }
+      });
+    });
+  }
+})();

httpdocs/themes/vuexy/js/wizard-ex-create-deal.js

@@ -0,0 +1,243 @@
+/**
+ *  Form Wizard
+ */
+
+'use strict';
+
+(function () {
+  // flatpickrRange
+  const flatpickrRange = document.querySelector('#dealDuration');
+  if (flatpickrRange) {
+    flatpickrRange.flatpickr({
+      mode: 'range'
+    });
+  }
+
+  // Init custom option check
+  window.Helpers.initCustomOptionCheck();
+  // Vertical Wizard
+  // --------------------------------------------------------------------
+
+  const wizardCreateDeal = document.querySelector('#wizard-create-deal');
+  if (typeof wizardCreateDeal !== undefined && wizardCreateDeal !== null) {
+    // Wizard form
+    const wizardCreateDealForm = wizardCreateDeal.querySelector('#wizard-create-deal-form');
+    // Wizard steps
+    const wizardCreateDealFormStep1 = wizardCreateDealForm.querySelector('#deal-type');
+    const wizardCreateDealFormStep2 = wizardCreateDealForm.querySelector('#deal-details');
+    const wizardCreateDealFormStep3 = wizardCreateDealForm.querySelector('#deal-usage');
+    const wizardCreateDealFormStep4 = wizardCreateDealForm.querySelector('#review-complete');
+    // Wizard next prev button
+    const wizardCreateDealNext = [].slice.call(wizardCreateDealForm.querySelectorAll('.btn-next'));
+    const wizardCreateDealPrev = [].slice.call(wizardCreateDealForm.querySelectorAll('.btn-prev'));
+
+    let validationStepper = new Stepper(wizardCreateDeal, {
+      linear: true
+    });
+
+    // Deal Type
+    const FormValidation1 = FormValidation.formValidation(wizardCreateDealFormStep1, {
+      fields: {
+        dealAmount: {
+          validators: {
+            notEmpty: {
+              message: 'Please enter amount'
+            },
+            numeric: {
+              message: 'The amount must be a number'
+            }
+          }
+        },
+        dealRegion: {
+          validators: {
+            notEmpty: {
+              message: 'Please select region'
+            }
+          }
+        }
+      },
+
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: '',
+          rowSelector: '.col-sm-6'
+        }),
+        autoFocus: new FormValidation.plugins.AutoFocus(),
+        submitButton: new FormValidation.plugins.SubmitButton()
+      }
+    }).on('core.form.valid', function () {
+      // Jump to the next step when all fields in the current step are valid
+      validationStepper.next();
+    });
+
+    // select2 (Region)
+    const dealRegion = $('#dealRegion');
+    if (dealRegion.length) {
+      dealRegion.wrap('<div class="position-relative"></div>');
+      dealRegion
+        .select2({
+          placeholder: 'Select an region',
+          dropdownParent: dealRegion.parent()
+        })
+        .on('change.select2', function () {
+          // Revalidate the region field when an option is chosen
+          FormValidation1.revalidateField('dealRegion');
+        });
+    }
+
+    // Deal Details
+    const FormValidation2 = FormValidation.formValidation(wizardCreateDealFormStep2, {
+      fields: {
+        // * Validate the fields here based on your requirements
+        dealTitle: {
+          validators: {
+            notEmpty: {
+              message: 'Please enter deal title'
+            }
+          }
+        },
+        dealCode: {
+          validators: {
+            notEmpty: {
+              message: 'Please enter deal code'
+            },
+            stringLength: {
+              min: 4,
+              max: 10,
+              message: 'The deal code must be more than 4 and less than 10 characters long'
+            },
+            regexp: {
+              regexp: /^[A-Z0-9]+$/,
+              message: 'The deal code can only consist of capital alphabetical and number'
+            }
+          }
+        }
+      },
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: '',
+          rowSelector: '.col-sm-6'
+        }),
+        autoFocus: new FormValidation.plugins.AutoFocus(),
+        submitButton: new FormValidation.plugins.SubmitButton()
+      }
+    }).on('core.form.valid', function () {
+      // Jump to the next step when all fields in the current step are valid
+      validationStepper.next();
+    });
+
+    // select2 (Offered Item)
+    const dealOfferedItem = $('#dealOfferedItem');
+    if (dealOfferedItem.length) {
+      dealOfferedItem.wrap('<div class="position-relative"></div>');
+      dealOfferedItem
+        .select2({
+          placeholder: 'Select an offered item',
+          dropdownParent: dealOfferedItem.parent()
+        })
+        .on('change.select2', function () {
+          // Revalidate the field if needed when an option is chosen
+          // FormValidation2.revalidateField('dealOfferedItem');
+        });
+    }
+
+    // Deal Usage
+    const FormValidation3 = FormValidation.formValidation(wizardCreateDealFormStep3, {
+      fields: {
+        // * Validate the fields here based on your requirements
+      },
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: '',
+          rowSelector: '.col-sm-6'
+        }),
+        autoFocus: new FormValidation.plugins.AutoFocus(),
+        submitButton: new FormValidation.plugins.SubmitButton()
+      }
+    }).on('core.form.valid', function () {
+      validationStepper.next();
+    });
+
+    // Deal Usage
+    const FormValidation4 = FormValidation.formValidation(wizardCreateDealFormStep4, {
+      fields: {
+        // * Validate the fields here based on your requirements
+      },
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: '',
+          rowSelector: '.col-md-12'
+        }),
+        autoFocus: new FormValidation.plugins.AutoFocus(),
+        submitButton: new FormValidation.plugins.SubmitButton()
+      }
+    }).on('core.form.valid', function () {
+      // You can submit the form
+      // wizardCreateDealForm.submit()
+      // or send the form data to server via an Ajax request
+      // To make the demo simple, I just placed an alert
+      alert('Submitted..!!');
+    });
+
+    wizardCreateDealNext.forEach(item => {
+      item.addEventListener('click', event => {
+        // When click the Next button, we will validate the current step
+        switch (validationStepper._currentIndex) {
+          case 0:
+            FormValidation1.validate();
+            break;
+
+          case 1:
+            FormValidation2.validate();
+            break;
+
+          case 2:
+            FormValidation3.validate();
+            break;
+
+          case 3:
+            FormValidation4.validate();
+            break;
+
+          default:
+            break;
+        }
+      });
+    });
+
+    wizardCreateDealPrev.forEach(item => {
+      item.addEventListener('click', event => {
+        switch (validationStepper._currentIndex) {
+          case 3:
+            validationStepper.previous();
+            break;
+
+          case 2:
+            validationStepper.previous();
+            break;
+
+          case 1:
+            validationStepper.previous();
+            break;
+
+          case 0:
+
+          default:
+            break;
+        }
+      });
+    });
+  }
+})();

httpdocs/themes/vuexy/js/wizard-ex-property-listing.js

@@ -0,0 +1,316 @@
+/**
+ *  Form Wizard
+ */
+
+'use strict';
+
+(function () {
+  // Init custom option check
+  window.Helpers.initCustomOptionCheck();
+
+  const flatpickrRange = document.querySelector('.flatpickr'),
+    phoneMask = document.querySelector('.contact-number-mask'),
+    plCountry = $('#plCountry'),
+    plFurnishingDetailsSuggestionEl = document.querySelector('#plFurnishingDetails');
+
+  // Phone Number Input Mask
+  if (phoneMask) {
+    new Cleave(phoneMask, {
+      phone: true,
+      phoneRegionCode: 'US'
+    });
+  }
+
+  // select2 (Country)
+
+  if (plCountry) {
+    plCountry.wrap('<div class="position-relative"></div>');
+    plCountry.select2({
+      placeholder: 'Select country',
+      dropdownParent: plCountry.parent()
+    });
+  }
+
+  if (flatpickrRange) {
+    flatpickrRange.flatpickr();
+  }
+
+  // Tagify (Furnishing details)
+  const furnishingList = [
+    'Fridge',
+    'TV',
+    'AC',
+    'WiFi',
+    'RO',
+    'Washing Machine',
+    'Sofa',
+    'Bed',
+    'Dining Table',
+    'Microwave',
+    'Cupboard'
+  ];
+  if (plFurnishingDetailsSuggestionEl) {
+    const plFurnishingDetailsSuggestion = new Tagify(plFurnishingDetailsSuggestionEl, {
+      whitelist: furnishingList,
+      maxTags: 10,
+      dropdown: {
+        maxItems: 20,
+        classname: 'tags-inline',
+        enabled: 0,
+        closeOnSelect: false
+      }
+    });
+  }
+
+  // Vertical Wizard
+  // --------------------------------------------------------------------
+
+  const wizardPropertyListing = document.querySelector('#wizard-property-listing');
+  if (typeof wizardPropertyListing !== undefined && wizardPropertyListing !== null) {
+    // Wizard form
+    const wizardPropertyListingForm = wizardPropertyListing.querySelector('#wizard-property-listing-form');
+    // Wizard steps
+    const wizardPropertyListingFormStep1 = wizardPropertyListingForm.querySelector('#personal-details');
+    const wizardPropertyListingFormStep2 = wizardPropertyListingForm.querySelector('#property-details');
+    const wizardPropertyListingFormStep3 = wizardPropertyListingForm.querySelector('#property-features');
+    const wizardPropertyListingFormStep4 = wizardPropertyListingForm.querySelector('#property-area');
+    const wizardPropertyListingFormStep5 = wizardPropertyListingForm.querySelector('#price-details');
+    // Wizard next prev button
+    const wizardPropertyListingNext = [].slice.call(wizardPropertyListingForm.querySelectorAll('.btn-next'));
+    const wizardPropertyListingPrev = [].slice.call(wizardPropertyListingForm.querySelectorAll('.btn-prev'));
+
+    const validationStepper = new Stepper(wizardPropertyListing, {
+      linear: true
+    });
+
+    // Personal Details
+    const FormValidation1 = FormValidation.formValidation(wizardPropertyListingFormStep1, {
+      fields: {
+        // * Validate the fields here based on your requirements
+        plFirstName: {
+          validators: {
+            notEmpty: {
+              message: 'Please enter your first name'
+            }
+          }
+        },
+        plLastName: {
+          validators: {
+            notEmpty: {
+              message: 'Please enter your first name'
+            }
+          }
+        }
+      },
+
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: '',
+          rowSelector: '.col-sm-6'
+        }),
+        autoFocus: new FormValidation.plugins.AutoFocus(),
+        submitButton: new FormValidation.plugins.SubmitButton()
+      },
+      init: instance => {
+        instance.on('plugins.message.placed', function (e) {
+          //* Move the error message out of the `input-group` element
+          if (e.element.parentElement.classList.contains('input-group')) {
+            e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
+          }
+        });
+      }
+    }).on('core.form.valid', function () {
+      // Jump to the next step when all fields in the current step are valid
+      validationStepper.next();
+    });
+
+    // Property Details
+    const FormValidation2 = FormValidation.formValidation(wizardPropertyListingFormStep2, {
+      fields: {
+        // * Validate the fields here based on your requirements
+
+        plPropertyType: {
+          validators: {
+            notEmpty: {
+              message: 'Please select property type'
+            }
+          }
+        },
+        plZipCode: {
+          validators: {
+            notEmpty: {
+              message: 'Please enter zip code'
+            },
+            stringLength: {
+              min: 4,
+              max: 10,
+              message: 'The zip code must be more than 4 and less than 10 characters long'
+            }
+          }
+        }
+      },
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: '',
+          rowSelector: function (field, ele) {
+            // field is the field name & ele is the field element
+            switch (field) {
+              case 'plAddress':
+                return '.col-lg-12';
+              default:
+                return '.col-sm-6';
+            }
+          }
+        }),
+        autoFocus: new FormValidation.plugins.AutoFocus(),
+        submitButton: new FormValidation.plugins.SubmitButton()
+      }
+    }).on('core.form.valid', function () {
+      // Jump to the next step when all fields in the current step are valid
+      validationStepper.next();
+    });
+
+    // select2 (Property type)
+    const plPropertyType = $('#plPropertyType');
+    if (plPropertyType.length) {
+      plPropertyType.wrap('<div class="position-relative"></div>');
+      plPropertyType
+        .select2({
+          placeholder: 'Select property type',
+          dropdownParent: plPropertyType.parent()
+        })
+        .on('change.select2', function () {
+          // Revalidate the color field when an option is chosen
+          FormValidation2.revalidateField('plPropertyType');
+        });
+    }
+
+    // Property Features
+    const FormValidation3 = FormValidation.formValidation(wizardPropertyListingFormStep3, {
+      fields: {
+        // * Validate the fields here based on your requirements
+      },
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: '',
+          rowSelector: '.col-sm-6'
+        }),
+        autoFocus: new FormValidation.plugins.AutoFocus(),
+        submitButton: new FormValidation.plugins.SubmitButton()
+      }
+    }).on('core.form.valid', function () {
+      validationStepper.next();
+    });
+
+    // Property Area
+    const FormValidation4 = FormValidation.formValidation(wizardPropertyListingFormStep4, {
+      fields: {
+        // * Validate the fields here based on your requirements
+      },
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: '',
+          rowSelector: '.col-md-12'
+        }),
+        autoFocus: new FormValidation.plugins.AutoFocus(),
+        submitButton: new FormValidation.plugins.SubmitButton()
+      }
+    }).on('core.form.valid', function () {
+      // Jump to the next step when all fields in the current step are valid
+      validationStepper.next();
+    });
+
+    // Price Details
+    const FormValidation5 = FormValidation.formValidation(wizardPropertyListingFormStep5, {
+      fields: {
+        // * Validate the fields here based on your requirements
+      },
+      plugins: {
+        trigger: new FormValidation.plugins.Trigger(),
+        bootstrap5: new FormValidation.plugins.Bootstrap5({
+          // Use this for enabling/changing valid/invalid class
+          // eleInvalidClass: '',
+          eleValidClass: '',
+          rowSelector: '.col-md-12'
+        }),
+        autoFocus: new FormValidation.plugins.AutoFocus(),
+        submitButton: new FormValidation.plugins.SubmitButton()
+      }
+    }).on('core.form.valid', function () {
+      // You can submit the form
+      // wizardPropertyListingForm.submit()
+      // or send the form data to server via an Ajax request
+      // To make the demo simple, I just placed an alert
+      alert('Submitted..!!');
+    });
+
+    wizardPropertyListingNext.forEach(item => {
+      item.addEventListener('click', event => {
+        // When click the Next button, we will validate the current step
+        switch (validationStepper._currentIndex) {
+          case 0:
+            FormValidation1.validate();
+            break;
+
+          case 1:
+            FormValidation2.validate();
+            break;
+
+          case 2:
+            FormValidation3.validate();
+            break;
+
+          case 3:
+            FormValidation4.validate();
+            break;
+
+          case 4:
+            FormValidation5.validate();
+            break;
+
+          default:
+            break;
+        }
+      });
+    });
+
+    wizardPropertyListingPrev.forEach(item => {
+      item.addEventListener('click', event => {
+        switch (validationStepper._currentIndex) {
+          case 4:
+            validationStepper.previous();
+            break;
+
+          case 3:
+            validationStepper.previous();
+            break;
+
+          case 2:
+            validationStepper.previous();
+            break;
+
+          case 1:
+            validationStepper.previous();
+            break;
+
+          case 0:
+
+          default:
+            break;
+        }
+      });
+    });
+  }
+})();