classify admin

public/assets/js/pages/ckeditor.js

@@ -0,0 +1,3 @@
+ClassicEditor.create(document.querySelector("#editor")).catch((error) => {
+  console.error(error)
+})

public/assets/js/pages/component-toasts.js

@@ -0,0 +1,9 @@
+const toastTrigger = document.getElementById("liveToastBtn")
+const toastLiveExample = document.getElementById("liveToast")
+if (toastTrigger) {
+  toastTrigger.addEventListener("click", () => {
+    const toast = new bootstrap.Toast(toastLiveExample)
+
+    toast.show()
+  })
+}

public/assets/js/pages/dashboard.js

@@ -0,0 +1,158 @@
+var optionsProfileVisit = {
+  annotations: {
+    position: "back",
+  },
+  dataLabels: {
+    enabled: false,
+  },
+  chart: {
+    type: "bar",
+    height: 300,
+  },
+  fill: {
+    opacity: 1,
+  },
+  plotOptions: {},
+  series: [
+    {
+      name: "sales",
+      data: [9, 20, 30, 20, 10, 20, 30, 20, 10, 20, 30, 20],
+    },
+  ],
+  colors: " #087C7C",
+  xaxis: {
+    categories: [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec",
+    ],
+  },
+}
+let optionsVisitorsProfile = {
+  series: [70, 30],
+  labels: ["Male", "Female"],
+  colors: [" #087C7C", "#55c6e8"],
+  chart: {
+    type: "donut",
+    width: "100%",
+    height: "350px",
+  },
+  legend: {
+    position: "bottom",
+  },
+  plotOptions: {
+    pie: {
+      donut: {
+        size: "30%",
+      },
+    },
+  },
+}
+
+var optionsEurope = {
+  series: [
+    {
+      name: "series1",
+      data: [310, 800, 600, 430, 540, 340, 605, 805, 430, 540, 340, 605],
+    },
+  ],
+  chart: {
+    height: 80,
+    type: "area",
+    toolbar: {
+      show: false,
+    },
+  },
+  colors: ["#5350e9"],
+  stroke: {
+    width: 2,
+  },
+  grid: {
+    show: false,
+  },
+  dataLabels: {
+    enabled: false,
+  },
+  xaxis: {
+    type: "datetime",
+    categories: [
+      "2018-09-19T00:00:00.000Z",
+      "2018-09-19T01:30:00.000Z",
+      "2018-09-19T02:30:00.000Z",
+      "2018-09-19T03:30:00.000Z",
+      "2018-09-19T04:30:00.000Z",
+      "2018-09-19T05:30:00.000Z",
+      "2018-09-19T06:30:00.000Z",
+      "2018-09-19T07:30:00.000Z",
+      "2018-09-19T08:30:00.000Z",
+      "2018-09-19T09:30:00.000Z",
+      "2018-09-19T10:30:00.000Z",
+      "2018-09-19T11:30:00.000Z",
+    ],
+    axisBorder: {
+      show: false,
+    },
+    axisTicks: {
+      show: false,
+    },
+    labels: {
+      show: false,
+    },
+  },
+  show: false,
+  yaxis: {
+    labels: {
+      show: false,
+    },
+  },
+  tooltip: {
+    x: {
+      format: "dd/MM/yy HH:mm",
+    },
+  },
+}
+
+let optionsAmerica = {
+  ...optionsEurope,
+  colors: ["#008b75"],
+}
+let optionsIndonesia = {
+  ...optionsEurope,
+  colors: ["#dc3545"],
+}
+
+var chartProfileVisit = new ApexCharts(
+  document.querySelector("#chart-profile-visit"),
+  optionsProfileVisit
+)
+var chartVisitorsProfile = new ApexCharts(
+  document.getElementById("chart-visitors-profile"),
+  optionsVisitorsProfile
+)
+var chartEurope = new ApexCharts(
+  document.querySelector("#chart-europe"),
+  optionsEurope
+)
+var chartAmerica = new ApexCharts(
+  document.querySelector("#chart-america"),
+  optionsAmerica
+)
+var chartIndonesia = new ApexCharts(
+  document.querySelector("#chart-indonesia"),
+  optionsIndonesia
+)
+
+chartIndonesia.render()
+chartAmerica.render()
+chartEurope.render()
+chartProfileVisit.render()
+chartVisitorsProfile.render()

public/assets/js/pages/datatables.js

@@ -0,0 +1 @@
+let jquery_datatable = $("#table1").DataTable()

public/assets/js/pages/filepond.js

@@ -0,0 +1,181 @@
+// Filepond: Basic
+FilePond.create(document.querySelector(".basic-filepond"), {
+  credits: null,
+  allowImagePreview: false,
+  allowMultiple: false,
+  allowFileEncode: false,
+  required: false,
+})
+
+// Filepond: Multiple Files
+FilePond.create(document.querySelector(".multiple-files-filepond"), {
+  credits: null,
+  allowImagePreview: false,
+  allowMultiple: true,
+  allowFileEncode: false,
+  required: false,
+})
+
+// Filepond: With Validation
+FilePond.create(document.querySelector(".with-validation-filepond"), {
+  credits: null,
+  allowImagePreview: false,
+  allowMultiple: true,
+  allowFileEncode: false,
+  required: true,
+  acceptedFileTypes: ["image/png"],
+  fileValidateTypeDetectType: (source, type) =>
+    new Promise((resolve, reject) => {
+      // Do custom type detection here and return with promise
+      resolve(type)
+    }),
+})
+
+// Filepond: ImgBB with server property
+FilePond.create(document.querySelector(".imgbb-filepond"), {
+  credits: null,
+  allowImagePreview: false,
+  server: {
+    process: (fieldName, file, metadata, load, error, progress, abort) => {
+      // We ignore the metadata property and only send the file
+
+      const formData = new FormData()
+      formData.append(fieldName, file, file.name)
+
+      const request = new XMLHttpRequest()
+      // you can change it by your client api key
+      request.open(
+        "POST",
+        "https://api.imgbb.com/1/upload?key=762894e2014f83c023b233b2f10395e2"
+      )
+
+      request.upload.onprogress = (e) => {
+        progress(e.lengthComputable, e.loaded, e.total)
+      }
+
+      request.onload = function () {
+        if (request.status >= 200 && request.status < 300) {
+          load(request.responseText)
+        } else {
+          error("oh no")
+        }
+      }
+
+      request.onreadystatechange = function () {
+        if (this.readyState == 4) {
+          if (this.status == 200) {
+            let response = JSON.parse(this.responseText)
+
+            Toastify({
+              text: "Success uploading to imgbb! see console f12",
+              duration: 3000,
+              close: true,
+              gravity: "bottom",
+              position: "right",
+              backgroundColor: "#4fbe87",
+            }).showToast()
+
+            console.log(response)
+          } else {
+            Toastify({
+              text: "Failed uploading to imgbb! see console f12",
+              duration: 3000,
+              close: true,
+              gravity: "bottom",
+              position: "right",
+              backgroundColor: "#ff0000",
+            }).showToast()
+
+            console.log("Error", this.statusText)
+          }
+        }
+      }
+
+      request.send(formData)
+    },
+  },
+})
+
+// Filepond: Image Preview
+FilePond.create(document.querySelector(".image-preview-filepond"), {
+  credits: null,
+  allowImagePreview: true,
+  allowImageFilter: false,
+  allowImageExifOrientation: false,
+  allowImageCrop: false,
+  acceptedFileTypes: ["image/png", "image/jpg", "image/jpeg"],
+  fileValidateTypeDetectType: (source, type) =>
+    new Promise((resolve, reject) => {
+      // Do custom type detection here and return with promise
+      resolve(type)
+    }),
+})
+
+// Filepond: Image Crop
+FilePond.create(document.querySelector(".image-crop-filepond"), {
+  credits: null,
+  allowImagePreview: true,
+  allowImageFilter: false,
+  allowImageExifOrientation: false,
+  allowImageCrop: true,
+  acceptedFileTypes: ["image/png", "image/jpg", "image/jpeg"],
+  fileValidateTypeDetectType: (source, type) =>
+    new Promise((resolve, reject) => {
+      // Do custom type detection here and return with promise
+      resolve(type)
+    }),
+})
+
+// Filepond: Image Exif Orientation
+FilePond.create(document.querySelector(".image-exif-filepond"), {
+  credits: null,
+  allowImagePreview: true,
+  allowImageFilter: false,
+  allowImageExifOrientation: true,
+  allowImageCrop: false,
+  acceptedFileTypes: ["image/png", "image/jpg", "image/jpeg"],
+  fileValidateTypeDetectType: (source, type) =>
+    new Promise((resolve, reject) => {
+      // Do custom type detection here and return with promise
+      resolve(type)
+    }),
+})
+
+// Filepond: Image Filter
+FilePond.create(document.querySelector(".image-filter-filepond"), {
+  credits: null,
+  allowImagePreview: true,
+  allowImageFilter: true,
+  allowImageExifOrientation: false,
+  allowImageCrop: false,
+  imageFilterColorMatrix: [
+    0.299, 0.587, 0.114, 0, 0, 0.299, 0.587, 0.114, 0, 0, 0.299, 0.587, 0.114,
+    0, 0, 0.0, 0.0, 0.0, 1, 0,
+  ],
+  acceptedFileTypes: ["image/png", "image/jpg", "image/jpeg"],
+  fileValidateTypeDetectType: (source, type) =>
+    new Promise((resolve, reject) => {
+      // Do custom type detection here and return with promise
+      resolve(type)
+    }),
+})
+
+// Filepond: Image Resize
+FilePond.create(document.querySelector(".image-resize-filepond"), {
+  credits: null,
+  allowImagePreview: true,
+  allowImageFilter: false,
+  allowImageExifOrientation: false,
+  allowImageCrop: false,
+  allowImageResize: true,
+  imageResizeTargetWidth: 200,
+  imageResizeTargetHeight: 200,
+  imageResizeMode: "cover",
+  imageResizeUpscale: true,
+  acceptedFileTypes: ["image/png", "image/jpg", "image/jpeg"],
+  fileValidateTypeDetectType: (source, type) =>
+    new Promise((resolve, reject) => {
+      // Do custom type detection here and return with promise
+      resolve(type)
+    }),
+})

public/assets/js/pages/form-editor.js

@@ -0,0 +1,27 @@
+var snow = new Quill("#snow", {
+  theme: "snow",
+})
+var bubble = new Quill("#bubble", {
+  theme: "bubble",
+})
+new Quill("#full", {
+  bounds: "#full-container .editor",
+  modules: {
+    toolbar: [
+      [{ font: [] }, { size: [] }],
+      ["bold", "italic", "underline", "strike"],
+      [{ color: [] }, { background: [] }],
+      [{ script: "super" }, { script: "sub" }],
+      [
+        { list: "ordered" },
+        { list: "bullet" },
+        { indent: "-1" },
+        { indent: "+1" },
+      ],
+      ["direction", { align: [] }],
+      ["link", "image", "video"],
+      ["clean"],
+    ],
+  },
+  theme: "snow",
+})

public/assets/js/pages/form-element-select.js

@@ -0,0 +1,14 @@
+let choices = document.querySelectorAll(".choices")
+let initChoice
+for (let i = 0; i < choices.length; i++) {
+  if (choices[i].classList.contains("multiple-remove")) {
+    initChoice = new Choices(choices[i], {
+      delimiter: ",",
+      editItems: true,
+      maxItemCount: -1,
+      removeItemButton: true,
+    })
+  } else {
+    initChoice = new Choices(choices[i])
+  }
+}

public/assets/js/pages/horizontal-layout.js

@@ -0,0 +1,43 @@
+function slideToggle(a, b, c) { 0 === a.clientHeight ? j(a, b, c, !0) : j(a, b, c) } function slideUp(a, b, c) { j(a, b, c) } function slideDown(a, b, c) { j(a, b, c, !0) } function j(c, a, k, d) { void 0 === a && (a = 400), void 0 === d && (d = !1), c.style.overflow = "hidden", d && (c.style.display = "block"); var l, b = window.getComputedStyle(c), e = parseFloat(b.getPropertyValue("height")), f = parseFloat(b.getPropertyValue("padding-top")), g = parseFloat(b.getPropertyValue("padding-bottom")), h = parseFloat(b.getPropertyValue("margin-top")), i = parseFloat(b.getPropertyValue("margin-bottom")), m = e / a, n = f / a, o = g / a, p = h / a, q = i / a; window.requestAnimationFrame(function s(r) { void 0 === l && (l = r); var b = r - l; d ? (c.style.height = m * b + "px", c.style.paddingTop = n * b + "px", c.style.paddingBottom = o * b + "px", c.style.marginTop = p * b + "px", c.style.marginBottom = q * b + "px") : (c.style.height = e - m * b + "px", c.style.paddingTop = f - n * b + "px", c.style.paddingBottom = g - o * b + "px", c.style.marginTop = h - p * b + "px", c.style.marginBottom = i - q * b + "px"), b >= a ? (c.style.height = "", c.style.paddingTop = "", c.style.paddingBottom = "", c.style.marginTop = "", c.style.marginBottom = "", c.style.overflow = "", d || (c.style.display = "none"), "function" == typeof k && k()) : window.requestAnimationFrame(s) }) }
+
+// Responsive burger btn onclick
+document.querySelector(".burger-btn").addEventListener("click", (e) => {
+  e.preventDefault()
+  let navbar = document.querySelector(".main-navbar")
+
+  slideToggle(navbar, 300)
+})
+
+window.onload = () => checkWindowSize()
+window.addEventListener("resize", (event) => {
+  checkWindowSize()
+})
+
+function checkWindowSize() {
+  if (window.innerWidth < 1200) listener()
+  if (window.innerWidth > 1200)
+    document.querySelector(".main-navbar").style.display = ""
+}
+
+function listener() {
+  let menuItems = document.querySelectorAll(".menu-item.has-sub")
+  menuItems.forEach((menuItem) => {
+    menuItem.querySelector(".menu-link").addEventListener("click", (e) => {
+      e.preventDefault()
+      let submenu = menuItem.querySelector(".submenu")
+      submenu.classList.toggle("active")
+    })
+  })
+
+  // Three level menu event listener
+  let submenuItems = document.querySelectorAll(".submenu-item.has-sub")
+
+  submenuItems.forEach((submenuItem) => {
+    submenuItem
+      .querySelector(".submenu-link")
+      .addEventListener("click", (e) => {
+        e.preventDefault()
+        submenuItem.querySelector(".subsubmenu").classList.toggle("active")
+      })
+  })
+}

public/assets/js/pages/jquery.js

@@ -0,0 +1 @@
+let $ = require("jquery")

public/assets/js/pages/parsley.js

@@ -0,0 +1,147 @@
+$.extend(window.Parsley.options, {
+    focus: "first",
+    excluded:
+        "input[type=button], input[type=submit], input[type=reset], .search, .ignore",
+    triggerAfterFailure: "change blur",
+    errorsContainer: function (element) {
+    },
+    trigger: "change",
+    successClass: "is-valid",
+    errorClass: "is-invalid",
+    classHandler: function (el) {
+        return el.$element.closest(".form-group")
+    },
+    errorsContainer: function (el) {
+        return el.$element.closest(".form-group")
+    },
+    errorsWrapper: '<div class="parsley-error"></div>',
+    errorTemplate: "<span></span>",
+})
+
+Parsley.on("field:validated", function (el) {
+    var elNode = $(el)[0]
+    if (elNode && !elNode.isValid()) {
+        var rqeuiredValResult = elNode.validationResult.filter(function (vr) {
+            return vr.assert.name === "required"
+        })
+        if (rqeuiredValResult.length > 0) {
+            var fieldNode = $(elNode.element)
+            var formGroupNode = fieldNode.closest(".form-group")
+            var lblNode = formGroupNode.find(".form-label:first")
+            if (lblNode.length > 0) {
+                // change default error message to include field label
+                var errorNode = formGroupNode.find(
+                    "div.parsley-error span[class*=parsley-]"
+                )
+                if (errorNode.length > 0) {
+                    var lblText = lblNode.text()
+                    if (lblText) {
+                        errorNode.html(lblText + " is required.")
+                    }
+                }
+            }
+        }
+    }
+})
+
+Parsley.addValidator("restrictedCity", {
+    requirementType: "string",
+    validateString: function (value, requirement) {
+        value = (value || "").trim()
+        return value === "" || value.toLowerCase() === requirement.toLowerCase()
+    },
+    messages: {
+        en: 'You have to live in <a href="https://www.google.com/maps/place/Jakarta">Jakarta</a>.',
+    },
+})
+
+
+//has uppercase
+Parsley.addValidator('uppercase', {
+    requirementType: 'number',
+    validateString: function (value, requirement) {
+        var uppercases = value.match(/[A-Z]/g) || [];
+        return uppercases.length >= requirement;
+    },
+    messages: {
+        en: 'Your password must contain at least (%s) uppercase letter.' + '<br>'
+    }
+});
+
+//has lowercase
+Parsley.addValidator('lowercase', {
+    requirementType: 'number',
+    validateString: function (value, requirement) {
+        var lowecases = value.match(/[a-z]/g) || [];
+        return lowecases.length >= requirement;
+    },
+    messages: {
+        en: 'Your password must contain at least (%s) lowercase letter.' + '<br>'
+    }
+});
+
+//has number
+Parsley.addValidator('number', {
+    requirementType: 'number',
+    validateString: function (value, requirement) {
+        var numbers = value.match(/[0-9]/g) || [];
+        return numbers.length >= requirement;
+    },
+    messages: {
+        en: 'Your password must contain at least (%s) number.' + '<br>'
+    }
+});
+
+//has special char
+Parsley.addValidator('special', {
+    requirementType: 'number',
+    validateString: function (value, requirement) {
+        var specials = value.match(/[^a-zA-Z0-9]/g) || [];
+        return specials.length >= requirement;
+    },
+    messages: {
+        en: 'Your password must contain at least (%s) special characters.' + '<br>'
+    }
+});
+
+
+Parsley.addValidator('minSelect', function (value, requirement) {
+    return value.split(',').length >= parseInt(requirement, 10);
+}, 32)
+    .addMessage('en', 'minSelect', 'You must select at least %s.');
+
+
+Parsley.addValidator('notequalto',
+    function (value, requirement) {
+        return value !== $(requirement).val();
+    }, 32)
+    .addMessage('en', 'notequalto', 'This value should not be the same.');
+
+// Greater than validator
+Parsley.addValidator('gt',
+    function (value, requirement) {
+        console.log('asdfsdfd');
+        return parseFloat(value) > parseFloat($(requirement).val());
+    }, 32)
+    .addMessage('en', 'gt', 'This value should be greater %s');
+
+// Greater than or equal to validator
+Parsley.addValidator('ge',
+    function (value, requirement) {
+        return parseFloat(value) >= parseFloat($(requirement).val());
+    }, 32)
+    .addMessage('en', 'ge', 'This value should be greater or equal ');
+
+// Less than validator
+Parsley.addValidator('lt',
+    function (value, requirement) {
+        return parseFloat(value) < parseFloat($(requirement).val());
+    }, 32)
+    .addMessage('en', 'lt', 'This value should be less %s');
+
+// Less than or equal to validator
+Parsley.addValidator('le',
+    function (value, requirement) {
+        return parseFloat(value) <= parseFloat($(requirement).val());
+    }, 32)
+    .addMessage('en', 'le', 'This value should be less or equal');

public/assets/js/pages/quill.js

@@ -0,0 +1,27 @@
+var snow = new Quill("#snow", {
+  theme: "snow",
+})
+var bubble = new Quill("#bubble", {
+  theme: "bubble",
+})
+new Quill("#full", {
+  bounds: "#full-container .editor",
+  modules: {
+    toolbar: [
+      [{ font: [] }, { size: [] }],
+      ["bold", "italic", "underline", "strike"],
+      [{ color: [] }, { background: [] }],
+      [{ script: "super" }, { script: "sub" }],
+      [
+        { list: "ordered" },
+        { list: "bullet" },
+        { indent: "-1" },
+        { indent: "+1" },
+      ],
+      ["direction", { align: [] }],
+      ["link", "image", "video"],
+      ["clean"],
+    ],
+  },
+  theme: "snow",
+})

public/assets/js/pages/rater-js.js

@@ -0,0 +1,38 @@
+raterJs({
+  element: document.querySelector("#basic"),
+  starSize: 32,
+  rateCallback: function rateCallback(rating, done) {
+    this.setRating(rating)
+    done()
+  },
+})
+
+raterJs({
+  element: document.querySelector("#step"),
+  rateCallback: function rateCallback(rating, done) {
+    this.setRating(rating)
+    done()
+  },
+  starSize: 32,
+  step: 0.5,
+})
+raterJs({
+  element: document.querySelector("#unli1"),
+  rateCallback: function rateCallback(rating, done) {
+    this.setRating(rating)
+    done()
+  },
+  starSize: 32,
+  max: 10,
+  step: 0.5,
+})
+raterJs({
+  element: document.querySelector("#unli2"),
+  rateCallback: function rateCallback(rating, done) {
+    this.setRating(rating)
+    done()
+  },
+  starSize: 32,
+  max: 16,
+  step: 0.5,
+})

public/assets/js/pages/simple-datatables.js

@@ -0,0 +1,46 @@
+let dataTable = new simpleDatatables.DataTable(
+  document.getElementById("table1")
+)
+// Move "per page dropdown" selector element out of label
+// to make it work with bootstrap 5. Add bs5 classes.
+function adaptPageDropdown() {
+  const selector = dataTable.wrapper.querySelector(".dataTable-selector")
+  selector.parentNode.parentNode.insertBefore(selector, selector.parentNode)
+  selector.classList.add("form-select")
+}
+
+// Add bs5 classes to pagination elements
+function adaptPagination() {
+  const paginations = dataTable.wrapper.querySelectorAll(
+    "ul.dataTable-pagination-list"
+  )
+
+  for (const pagination of paginations) {
+    pagination.classList.add(...["pagination", "pagination-primary"])
+  }
+
+  const paginationLis = dataTable.wrapper.querySelectorAll(
+    "ul.dataTable-pagination-list li"
+  )
+
+  for (const paginationLi of paginationLis) {
+    paginationLi.classList.add("page-item")
+  }
+
+  const paginationLinks = dataTable.wrapper.querySelectorAll(
+    "ul.dataTable-pagination-list li a"
+  )
+
+  for (const paginationLink of paginationLinks) {
+    paginationLink.classList.add("page-link")
+  }
+}
+
+// Patch "per page dropdown" and pagination after table rendered
+dataTable.on("datatable.init", function () {
+  adaptPageDropdown()
+  adaptPagination()
+})
+
+// Re-patch pagination after the page was changed
+dataTable.on("datatable.page", adaptPagination)

public/assets/js/pages/summernote.js

@@ -0,0 +1,20 @@
+$("#summernote").summernote({
+  tabsize: 2,
+  height: 120,
+})
+$("#hint").summernote({
+  height: 100,
+  toolbar: false,
+  placeholder: "type with apple, orange, watermelon and lemon",
+  hint: {
+    words: ["apple", "orange", "watermelon", "lemon"],
+    match: /\b(\w{1,})$/,
+    search: function (keyword, callback) {
+      callback(
+        $.grep(this.words, function (item) {
+          return item.indexOf(keyword) === 0
+        })
+      )
+    },
+  },
+})

public/assets/js/pages/sweetalert2.js

@@ -0,0 +1,142 @@
+document.getElementById("basic").addEventListener("click", (e) => {
+  Swal.fire("Any fool can use a computer")
+})
+document.getElementById("footer").addEventListener("click", (e) => {
+  Swal.fire({
+    icon: "error",
+    title: "Oops...",
+    text: "Something went wrong!",
+    footer: "<a href>Why do I have this issue?</a>",
+  })
+})
+document.getElementById("title").addEventListener("click", (e) => {
+  Swal.fire("The Internet?", "That thing is still around?", "question")
+})
+document.getElementById("success").addEventListener("click", (e) => {
+  Swal.fire({
+    icon: "success",
+    title: "Success",
+  })
+})
+document.getElementById("error").addEventListener("click", (e) => {
+  Swal.fire({
+    icon: "error",
+    title: "Error",
+  })
+})
+document.getElementById("warning").addEventListener("click", (e) => {
+  Swal.fire({
+    icon: "warning",
+    title: "Warning",
+  })
+})
+document.getElementById("info").addEventListener("click", (e) => {
+  Swal.fire({
+    icon: "info",
+    title: "Info",
+  })
+})
+document.getElementById("question").addEventListener("click", (e) => {
+  Swal.fire({
+    icon: "question",
+    title: "Question",
+  })
+})
+document.getElementById("text").addEventListener("click", (e) => {
+  Swal.fire({
+    title: "Enter your IP address",
+    input: "text",
+    inputLabel: "Your IP address",
+    showCancelButton: true,
+  })
+})
+document.getElementById("email").addEventListener("click", async (e) => {
+  const { value: email } = await Swal.fire({
+    title: "Input email address",
+    input: "email",
+    inputLabel: "Your email address",
+    inputPlaceholder: "Enter your email address",
+  })
+
+  if (email) {
+    Swal.fire(`Entered email: ${email}`)
+  }
+})
+document.getElementById("url").addEventListener("click", async (e) => {
+  const { value: url } = await Swal.fire({
+    input: "url",
+    inputLabel: "URL address",
+    inputPlaceholder: "Enter the URL",
+  })
+
+  if (url) {
+    Swal.fire(`Entered URL: ${url}`)
+  }
+})
+document.getElementById("password").addEventListener("click", async (e) => {
+  const { value: password } = await Swal.fire({
+    title: "Enter your password",
+    input: "password",
+    inputLabel: "Password",
+    inputPlaceholder: "Enter your password",
+    inputAttributes: {
+      maxlength: 10,
+      autocapitalize: "off",
+      autocorrect: "off",
+    },
+  })
+
+  if (password) {
+    Swal.fire(`Entered password: ${password}`)
+  }
+})
+document.getElementById("textarea").addEventListener("click", async (e) => {
+  const { value: text } = await Swal.fire({
+    input: "textarea",
+    inputLabel: "Message",
+    inputPlaceholder: "Type your message here...",
+    inputAttributes: {
+      "aria-label": "Type your message here",
+    },
+    showCancelButton: true,
+  })
+
+  if (text) {
+    Swal.fire(text)
+  }
+})
+document.getElementById("select").addEventListener("click", async (e) => {
+  const { value: fruit } = await Swal.fire({
+    title: "Select field validation",
+    input: "select",
+    inputOptions: {
+      Fruits: {
+        apples: "Apples",
+        bananas: "Bananas",
+        grapes: "Grapes",
+        oranges: "Oranges",
+      },
+      Vegetables: {
+        potato: "Potato",
+        broccoli: "Broccoli",
+        carrot: "Carrot",
+      },
+      icecream: "Ice cream",
+    },
+    inputPlaceholder: "Select a fruit",
+    showCancelButton: true,
+    inputValidator: (value) => {
+      return new Promise((resolve) => {
+        if (value === "oranges") {
+          resolve()
+        } else {
+          resolve("You need to select oranges :)")
+        }
+      })
+    },
+  })
+
+  if (fruit) {
+    Swal.fire(`You selected: ${fruit}`)
+  }
+})

public/assets/js/pages/tinymce.js

@@ -0,0 +1,22 @@
+document.addEventListener("DOMContentLoaded", () => {
+  console.log("initing", document.body.classList.contains("theme-dark"))
+
+  const themeOptions = document.body.classList.contains("theme-dark")
+    ? {
+        skin: "oxide-dark",
+        content_css: "dark",
+      }
+    : {
+        skin: "oxide",
+        content_css: "default",
+      }
+
+  tinymce.init({ selector: "#default", ...themeOptions })
+  tinymce.init({
+    selector: "#dark",
+    toolbar:
+      "undo redo styleselect bold italic alignleft aligncenter alignright bullist numlist outdent indent code",
+    plugins: "code",
+    ...themeOptions,
+  })
+})

public/assets/js/pages/toastify.js

@@ -0,0 +1,81 @@
+document.getElementById("basic").addEventListener("click", () => {
+  Toastify({
+    text: "This is a toast",
+    duration: 3000,
+  }).showToast()
+})
+document.getElementById("background").addEventListener("click", () => {
+  Toastify({
+    text: "This is a toast",
+    duration: 3000,
+    backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+  }).showToast()
+})
+document.getElementById("close").addEventListener("click", () => {
+  Toastify({
+    text: "Click close button",
+    duration: 3000,
+    close: true,
+    backgroundColor: "#4fbe87",
+  }).showToast()
+})
+document.getElementById("top-left").addEventListener("click", () => {
+  Toastify({
+    text: "This is toast in top left",
+    duration: 3000,
+    close: true,
+    gravity: "top",
+    position: "left",
+    backgroundColor: "#4fbe87",
+  }).showToast()
+})
+document.getElementById("top-center").addEventListener("click", () => {
+  Toastify({
+    text: "This is toast in top center",
+    duration: 3000,
+    close: true,
+    gravity: "top",
+    position: "center",
+    backgroundColor: "#4fbe87",
+  }).showToast()
+})
+document.getElementById("top-right").addEventListener("click", () => {
+  Toastify({
+    text: "This is toast in top right",
+    duration: 3000,
+    close: true,
+    gravity: "top",
+    position: "right",
+    backgroundColor: "#4fbe87",
+  }).showToast()
+})
+document.getElementById("bottom-right").addEventListener("click", () => {
+  Toastify({
+    text: "This is toast in bottom right",
+    duration: 3000,
+    close: true,
+    gravity: "bottom",
+    position: "right",
+    backgroundColor: "#4fbe87",
+  }).showToast()
+})
+document.getElementById("bottom-center").addEventListener("click", () => {
+  Toastify({
+    text: "This is toast in bottom center",
+    duration: 3000,
+    close: true,
+    gravity: "bottom",
+    position: "center",
+    backgroundColor: "#4fbe87",
+  }).showToast()
+})
+document.getElementById("bottom-left").addEventListener("click", () => {
+  Toastify({
+    text: "This is toast in bottom left",
+    duration: 3000,
+    close: true,
+    gravity: "bottom",
+    position: "left",
+    backgroundColor: "#4fbe87",
+  }).showToast()
+})

public/assets/js/pages/ui-apexchart.js

@@ -0,0 +1,521 @@
+var lineOptions = {
+  chart: {
+    type: "line",
+  },
+  series: [
+    {
+      name: "sales",
+      data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
+    },
+  ],
+  xaxis: {
+    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
+  },
+}
+var candleOptions = {
+  series: [
+    {
+      name: "candle",
+      data: [
+        {
+          x: new Date(1538778600000),
+          y: [6629.81, 6650.5, 6623.04, 6633.33],
+        },
+        {
+          x: new Date(1538780400000),
+          y: [6632.01, 6643.59, 6620, 6630.11],
+        },
+        {
+          x: new Date(1538782200000),
+          y: [6630.71, 6648.95, 6623.34, 6635.65],
+        },
+        {
+          x: new Date(1538784000000),
+          y: [6635.65, 6651, 6629.67, 6638.24],
+        },
+        {
+          x: new Date(1538785800000),
+          y: [6638.24, 6640, 6620, 6624.47],
+        },
+        {
+          x: new Date(1538787600000),
+          y: [6624.53, 6636.03, 6621.68, 6624.31],
+        },
+        {
+          x: new Date(1538789400000),
+          y: [6624.61, 6632.2, 6617, 6626.02],
+        },
+        {
+          x: new Date(1538791200000),
+          y: [6627, 6627.62, 6584.22, 6603.02],
+        },
+        {
+          x: new Date(1538793000000),
+          y: [6605, 6608.03, 6598.95, 6604.01],
+        },
+        {
+          x: new Date(1538794800000),
+          y: [6604.5, 6614.4, 6602.26, 6608.02],
+        },
+        {
+          x: new Date(1538796600000),
+          y: [6608.02, 6610.68, 6601.99, 6608.91],
+        },
+        {
+          x: new Date(1538798400000),
+          y: [6608.91, 6618.99, 6608.01, 6612],
+        },
+        {
+          x: new Date(1538800200000),
+          y: [6612, 6615.13, 6605.09, 6612],
+        },
+        {
+          x: new Date(1538802000000),
+          y: [6612, 6624.12, 6608.43, 6622.95],
+        },
+        {
+          x: new Date(1538803800000),
+          y: [6623.91, 6623.91, 6615, 6615.67],
+        },
+        {
+          x: new Date(1538805600000),
+          y: [6618.69, 6618.74, 6610, 6610.4],
+        },
+        {
+          x: new Date(1538807400000),
+          y: [6611, 6622.78, 6610.4, 6614.9],
+        },
+        {
+          x: new Date(1538809200000),
+          y: [6614.9, 6626.2, 6613.33, 6623.45],
+        },
+        {
+          x: new Date(1538811000000),
+          y: [6623.48, 6627, 6618.38, 6620.35],
+        },
+        {
+          x: new Date(1538812800000),
+          y: [6619.43, 6620.35, 6610.05, 6615.53],
+        },
+        {
+          x: new Date(1538814600000),
+          y: [6615.53, 6617.93, 6610, 6615.19],
+        },
+        {
+          x: new Date(1538816400000),
+          y: [6615.19, 6621.6, 6608.2, 6620],
+        },
+        {
+          x: new Date(1538818200000),
+          y: [6619.54, 6625.17, 6614.15, 6620],
+        },
+        {
+          x: new Date(1538820000000),
+          y: [6620.33, 6634.15, 6617.24, 6624.61],
+        },
+        {
+          x: new Date(1538821800000),
+          y: [6625.95, 6626, 6611.66, 6617.58],
+        },
+        {
+          x: new Date(1538823600000),
+          y: [6619, 6625.97, 6595.27, 6598.86],
+        },
+        {
+          x: new Date(1538825400000),
+          y: [6598.86, 6598.88, 6570, 6587.16],
+        },
+        {
+          x: new Date(1538827200000),
+          y: [6588.86, 6600, 6580, 6593.4],
+        },
+        {
+          x: new Date(1538829000000),
+          y: [6593.99, 6598.89, 6585, 6587.81],
+        },
+        {
+          x: new Date(1538830800000),
+          y: [6587.81, 6592.73, 6567.14, 6578],
+        },
+        {
+          x: new Date(1538832600000),
+          y: [6578.35, 6581.72, 6567.39, 6579],
+        },
+        {
+          x: new Date(1538834400000),
+          y: [6579.38, 6580.92, 6566.77, 6575.96],
+        },
+        {
+          x: new Date(1538836200000),
+          y: [6575.96, 6589, 6571.77, 6588.92],
+        },
+        {
+          x: new Date(1538838000000),
+          y: [6588.92, 6594, 6577.55, 6589.22],
+        },
+        {
+          x: new Date(1538839800000),
+          y: [6589.3, 6598.89, 6589.1, 6596.08],
+        },
+        {
+          x: new Date(1538841600000),
+          y: [6597.5, 6600, 6588.39, 6596.25],
+        },
+        {
+          x: new Date(1538843400000),
+          y: [6598.03, 6600, 6588.73, 6595.97],
+        },
+        {
+          x: new Date(1538845200000),
+          y: [6595.97, 6602.01, 6588.17, 6602],
+        },
+        {
+          x: new Date(1538847000000),
+          y: [6602, 6607, 6596.51, 6599.95],
+        },
+        {
+          x: new Date(1538848800000),
+          y: [6600.63, 6601.21, 6590.39, 6591.02],
+        },
+        {
+          x: new Date(1538850600000),
+          y: [6591.02, 6603.08, 6591, 6591],
+        },
+        {
+          x: new Date(1538852400000),
+          y: [6591, 6601.32, 6585, 6592],
+        },
+        {
+          x: new Date(1538854200000),
+          y: [6593.13, 6596.01, 6590, 6593.34],
+        },
+        {
+          x: new Date(1538856000000),
+          y: [6593.34, 6604.76, 6582.63, 6593.86],
+        },
+        {
+          x: new Date(1538857800000),
+          y: [6593.86, 6604.28, 6586.57, 6600.01],
+        },
+        {
+          x: new Date(1538859600000),
+          y: [6601.81, 6603.21, 6592.78, 6596.25],
+        },
+        {
+          x: new Date(1538861400000),
+          y: [6596.25, 6604.2, 6590, 6602.99],
+        },
+        {
+          x: new Date(1538863200000),
+          y: [6602.99, 6606, 6584.99, 6587.81],
+        },
+        {
+          x: new Date(1538865000000),
+          y: [6587.81, 6595, 6583.27, 6591.96],
+        },
+        {
+          x: new Date(1538866800000),
+          y: [6591.97, 6596.07, 6585, 6588.39],
+        },
+        {
+          x: new Date(1538868600000),
+          y: [6587.6, 6598.21, 6587.6, 6594.27],
+        },
+        {
+          x: new Date(1538870400000),
+          y: [6596.44, 6601, 6590, 6596.55],
+        },
+        {
+          x: new Date(1538872200000),
+          y: [6598.91, 6605, 6596.61, 6600.02],
+        },
+        {
+          x: new Date(1538874000000),
+          y: [6600.55, 6605, 6589.14, 6593.01],
+        },
+        {
+          x: new Date(1538875800000),
+          y: [6593.15, 6605, 6592, 6603.06],
+        },
+        {
+          x: new Date(1538877600000),
+          y: [6603.07, 6604.5, 6599.09, 6603.89],
+        },
+        {
+          x: new Date(1538879400000),
+          y: [6604.44, 6604.44, 6600, 6603.5],
+        },
+        {
+          x: new Date(1538881200000),
+          y: [6603.5, 6603.99, 6597.5, 6603.86],
+        },
+        {
+          x: new Date(1538883000000),
+          y: [6603.85, 6605, 6600, 6604.07],
+        },
+        {
+          x: new Date(1538884800000),
+          y: [6604.98, 6606, 6604.07, 6606],
+        },
+      ],
+    },
+  ],
+  chart: {
+    height: 350,
+    type: "candlestick",
+  },
+  title: {
+    text: "CandleStick Chart - Category X-axis",
+    align: "left",
+  },
+  annotations: {
+    xaxis: [
+      {
+        x: "Oct 06 14:00",
+        borderColor: "#00E396",
+        label: {
+          borderColor: "#00E396",
+          style: {
+            fontSize: "12px",
+            color: "#fff",
+            background: "#00E396",
+          },
+          orientation: "horizontal",
+          offsetY: 7,
+          text: "Annotation Test",
+        },
+      },
+    ],
+  },
+  tooltip: {
+    enabled: true,
+  },
+  xaxis: {
+    type: "category",
+    labels: {
+      formatter: function (val) {
+        return dayjs(val).format("MMM DD HH:mm")
+      },
+    },
+  },
+  yaxis: {
+    tooltip: {
+      enabled: true,
+    },
+  },
+}
+
+var barOptions = {
+  series: [
+    {
+      name: "Net Profit",
+      data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
+    },
+    {
+      name: "Revenue",
+      data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
+    },
+    {
+      name: "Free Cash Flow",
+      data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
+    },
+  ],
+  chart: {
+    type: "bar",
+    height: 350,
+  },
+  plotOptions: {
+    bar: {
+      horizontal: false,
+      columnWidth: "55%",
+      endingShape: "rounded",
+    },
+  },
+  dataLabels: {
+    enabled: false,
+  },
+  stroke: {
+    show: true,
+    width: 2,
+    colors: ["transparent"],
+  },
+  xaxis: {
+    categories: ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"],
+  },
+  yaxis: {
+    title: {
+      text: "$ (thousands)",
+    },
+  },
+  fill: {
+    opacity: 1,
+  },
+  tooltip: {
+    y: {
+      formatter: function (val) {
+        return "$ " + val + " thousands"
+      },
+    },
+  },
+}
+
+var radialGradientOptions = {
+  series: [75],
+  chart: {
+    height: 350,
+    type: "radialBar",
+    toolbar: {
+      show: true,
+    },
+  },
+  plotOptions: {
+    radialBar: {
+      startAngle: -135,
+      endAngle: 225,
+      hollow: {
+        margin: 0,
+        size: "70%",
+        background: "#fff",
+        image: undefined,
+        imageOffsetX: 0,
+        imageOffsetY: 0,
+        position: "front",
+        dropShadow: {
+          enabled: true,
+          top: 3,
+          left: 0,
+          blur: 4,
+          opacity: 0.24,
+        },
+      },
+      track: {
+        background: "#fff",
+        strokeWidth: "67%",
+        margin: 0, // margin is in pixels
+        dropShadow: {
+          enabled: true,
+          top: -3,
+          left: 0,
+          blur: 4,
+          opacity: 0.35,
+        },
+      },
+
+      dataLabels: {
+        show: true,
+        name: {
+          offsetY: -10,
+          show: true,
+          color: "#888",
+          fontSize: "17px",
+        },
+        value: {
+          formatter: function (val) {
+            return parseInt(val)
+          },
+          color: "#111",
+          fontSize: "36px",
+          show: true,
+        },
+      },
+    },
+  },
+  fill: {
+    type: "gradient",
+    gradient: {
+      shade: "dark",
+      type: "horizontal",
+      shadeIntensity: 0.5,
+      gradientToColors: ["#ABE5A1"],
+      inverseColors: true,
+      opacityFrom: 1,
+      opacityTo: 1,
+      stops: [0, 100],
+    },
+  },
+  stroke: {
+    lineCap: "round",
+  },
+  labels: ["Percent"],
+}
+var areaOptions = {
+  series: [
+    {
+      name: "series1",
+      data: [31, 40, 28, 51, 42, 109, 100],
+    },
+    {
+      name: "series2",
+      data: [11, 32, 45, 32, 34, 52, 41],
+    },
+  ],
+  chart: {
+    height: 350,
+    type: "area",
+  },
+  dataLabels: {
+    enabled: false,
+  },
+  stroke: {
+    curve: "smooth",
+  },
+  xaxis: {
+    type: "datetime",
+    categories: [
+      "2018-09-19T00:00:00.000Z",
+      "2018-09-19T01:30:00.000Z",
+      "2018-09-19T02:30:00.000Z",
+      "2018-09-19T03:30:00.000Z",
+      "2018-09-19T04:30:00.000Z",
+      "2018-09-19T05:30:00.000Z",
+      "2018-09-19T06:30:00.000Z",
+    ],
+  },
+  tooltip: {
+    x: {
+      format: "dd/MM/yy HH:mm",
+    },
+  },
+}
+var radialBarOptions = {
+  series: [44, 55, 67, 83],
+  chart: {
+    height: 350,
+    type: "radialBar",
+  },
+  plotOptions: {
+    radialBar: {
+      dataLabels: {
+        name: {
+          fontSize: "22px",
+        },
+        value: {
+          fontSize: "16px",
+        },
+        total: {
+          show: true,
+          label: "Total",
+          formatter: function (w) {
+            // By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
+            return 249
+          },
+        },
+      },
+    },
+  },
+  labels: ["Apples", "Oranges", "Bananas", "Berries"],
+}
+var bar = new ApexCharts(document.querySelector("#bar"), barOptions)
+var line = new ApexCharts(document.querySelector("#line"), lineOptions)
+var candle = new ApexCharts(document.querySelector("#candle"), candleOptions)
+var radialGradient = new ApexCharts(
+  document.querySelector("#radialGradient"),
+  radialGradientOptions
+)
+var area = new ApexCharts(document.querySelector("#area"), areaOptions)
+
+area.render()
+radialGradient.render()
+candle.render()
+bar.render()
+line.render()

public/assets/js/pages/ui-chartjs.js

@@ -0,0 +1,445 @@
+var chartColors = {
+  red: "rgb(255, 99, 132)",
+  orange: "rgb(255, 159, 64)",
+  yellow: "rgb(255, 205, 86)",
+  green: "rgb(75, 192, 192)",
+  info: "#41B1F9",
+  blue: "#3245D1",
+  purple: "rgb(153, 102, 255)",
+  grey: "#EBEFF6",
+}
+
+var config1 = {
+  type: "line",
+  data: {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+      {
+        label: "Balance",
+        backgroundColor: "#fff",
+        borderColor: "#fff",
+        data: [20, 40, 20, 70, 10, 50, 20],
+        fill: false,
+        pointBorderWidth: 100,
+        pointBorderColor: "transparent",
+        pointRadius: 3,
+        pointBackgroundColor: "transparent",
+        pointHoverBackgroundColor: "rgba(63,82,227,1)",
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        left: -10,
+        top: 10,
+      },
+    },
+    legend: {
+      display: false,
+    },
+    title: {
+      display: false,
+    },
+    tooltips: {
+      mode: "index",
+      intersect: false,
+    },
+    hover: {
+      mode: "nearest",
+      intersect: true,
+    },
+    scales: {
+      xAxes: [
+        {
+          gridLines: {
+            drawBorder: false,
+            display: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+      yAxes: [
+        {
+          gridLines: {
+            display: false,
+            drawBorder: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+    },
+  },
+}
+var config2 = {
+  type: "line",
+  data: {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+      {
+        label: "Revenue",
+        backgroundColor: "#fff",
+        borderColor: "#fff",
+        data: [20, 800, 300, 400, 10, 50, 20],
+        fill: false,
+        pointBorderWidth: 100,
+        pointBorderColor: "transparent",
+        pointRadius: 3,
+        pointBackgroundColor: "transparent",
+        pointHoverBackgroundColor: "rgba(63,82,227,1)",
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        left: -10,
+        top: 10,
+      },
+    },
+    legend: {
+      display: false,
+    },
+    title: {
+      display: false,
+    },
+    tooltips: {
+      mode: "index",
+      intersect: false,
+    },
+    hover: {
+      mode: "nearest",
+      intersect: true,
+    },
+    scales: {
+      xAxes: [
+        {
+          gridLines: {
+            drawBorder: false,
+            display: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+      yAxes: [
+        {
+          gridLines: {
+            display: false,
+            drawBorder: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+    },
+  },
+}
+var config3 = {
+  type: "line",
+  data: {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+      {
+        label: "Orders",
+        backgroundColor: "#fff",
+        borderColor: "#fff",
+        data: [20, 40, 20, 200, 10, 540, 723],
+        fill: false,
+        pointBorderWidth: 100,
+        pointBorderColor: "transparent",
+        pointRadius: 3,
+        pointBackgroundColor: "transparent",
+        pointHoverBackgroundColor: "rgba(63,82,227,1)",
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        left: -10,
+        top: 10,
+      },
+    },
+    legend: {
+      display: false,
+    },
+    title: {
+      display: false,
+      text: "Chart.js Line Chart",
+    },
+    tooltips: {
+      mode: "index",
+      intersect: false,
+    },
+    hover: {
+      mode: "nearest",
+      intersect: true,
+    },
+    scales: {
+      xAxes: [
+        {
+          gridLines: {
+            drawBorder: false,
+            display: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+      yAxes: [
+        {
+          gridLines: {
+            display: false,
+            drawBorder: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+    },
+  },
+}
+var config4 = {
+  type: "line",
+  data: {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+      {
+        label: "My First dataset",
+        backgroundColor: "#fff",
+        borderColor: "#fff",
+        data: [20, 40, 20, 70, 10, 5, 23],
+        fill: false,
+        pointBorderWidth: 100,
+        pointBorderColor: "transparent",
+        pointRadius: 3,
+        pointBackgroundColor: "transparent",
+        pointHoverBackgroundColor: "rgba(63,82,227,1)",
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        left: -10,
+        top: 10,
+      },
+    },
+    legend: {
+      display: false,
+    },
+    title: {
+      display: false,
+      text: "Chart.js Line Chart",
+    },
+    tooltips: {
+      mode: "index",
+      intersect: false,
+    },
+    hover: {
+      mode: "nearest",
+      intersect: true,
+    },
+    scales: {
+      xAxes: [
+        {
+          gridLines: {
+            drawBorder: false,
+            display: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+      yAxes: [
+        {
+          gridLines: {
+            display: false,
+            drawBorder: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+    },
+  },
+}
+
+var ctxBar = document.getElementById("bar").getContext("2d")
+var myBar = new Chart(ctxBar, {
+  type: "bar",
+  data: {
+    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
+    datasets: [
+      {
+        label: "Students",
+        backgroundColor: [
+          chartColors.grey,
+          chartColors.grey,
+          chartColors.grey,
+          chartColors.grey,
+          chartColors.info,
+          chartColors.blue,
+          chartColors.grey,
+        ],
+        data: [5, 10, 30, 40, 35, 55, 15],
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    barRoundness: 1,
+    title: {
+      display: true,
+      text: "Students in 2020",
+    },
+    legend: {
+      display: false,
+    },
+    scales: {
+      yAxes: [
+        {
+          ticks: {
+            beginAtZero: true,
+            suggestedMax: 40 + 20,
+            padding: 10,
+          },
+          gridLines: {
+            drawBorder: false,
+          },
+        },
+      ],
+      xAxes: [
+        {
+          gridLines: {
+            display: false,
+            drawBorder: false,
+          },
+        },
+      ],
+    },
+  },
+})
+var line = document.getElementById("line").getContext("2d")
+var gradient = line.createLinearGradient(0, 0, 0, 400)
+gradient.addColorStop(0, "rgba(50, 69, 209,1)")
+gradient.addColorStop(1, "rgba(265, 177, 249,0)")
+
+var gradient2 = line.createLinearGradient(0, 0, 0, 400)
+gradient2.addColorStop(0, "rgba(255, 91, 92,1)")
+gradient2.addColorStop(1, "rgba(265, 177, 249,0)")
+
+var myline = new Chart(line, {
+  type: "line",
+  data: {
+    labels: [
+      "16-07-2018",
+      "17-07-2018",
+      "18-07-2018",
+      "19-07-2018",
+      "20-07-2018",
+      "21-07-2018",
+      "22-07-2018",
+      "23-07-2018",
+      "24-07-2018",
+      "25-07-2018",
+    ],
+    datasets: [
+      {
+        label: "Balance",
+        data: [50, 25, 61, 50, 72, 52, 60, 41, 30, 45],
+        backgroundColor: "rgba(50, 69, 209,.6)",
+        borderWidth: 3,
+        borderColor: "rgba(63,82,227,1)",
+        pointBorderWidth: 0,
+        pointBorderColor: "transparent",
+        pointRadius: 3,
+        pointBackgroundColor: "transparent",
+        pointHoverBackgroundColor: "rgba(63,82,227,1)",
+      },
+      {
+        label: "Balance",
+        data: [20, 35, 45, 75, 37, 86, 45, 65, 25, 53],
+        backgroundColor: "rgba(253, 183, 90,.6)",
+        borderWidth: 3,
+        borderColor: "rgba(253, 183, 90,.6)",
+        pointBorderWidth: 0,
+        pointBorderColor: "transparent",
+        pointRadius: 3,
+        pointBackgroundColor: "transparent",
+        pointHoverBackgroundColor: "rgba(63,82,227,1)",
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    layout: {
+      padding: {
+        top: 10,
+      },
+    },
+    tooltips: {
+      intersect: false,
+      titleFontFamily: "Helvetica",
+      titleMarginBottom: 10,
+      xPadding: 10,
+      yPadding: 10,
+      cornerRadius: 3,
+    },
+    legend: {
+      display: true,
+    },
+    scales: {
+      yAxes: [
+        {
+          gridLines: {
+            display: true,
+            drawBorder: true,
+          },
+          ticks: {
+            display: true,
+          },
+        },
+      ],
+      xAxes: [
+        {
+          gridLines: {
+            drawBorder: false,
+            display: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+    },
+  },
+})
+
+// let ctx1 = document.getElementById("canvas1").getContext("2d");
+// let ctx2 = document.getElementById("canvas2").getContext("2d");
+// let ctx3 = document.getElementById("canvas3").getContext("2d");
+// let ctx4 = document.getElementById("canvas4").getContext("2d");
+// var lineChart1 = new Chart(ctx1, config1);
+// var lineChart2 = new Chart(ctx2, config2);
+// var lineChart3 = new Chart(ctx3, config3);
+// var lineChart4 = new Chart(ctx4, config4);

public/assets/js/pages/ui-todolist.js

@@ -0,0 +1,5 @@
+dragula([document.getElementById("widget-todo-list")], {
+  moves: function (e, a, t) {
+    return t.classList.contains("cursor-move")
+  },
+})