first init

resources/js/app.js

@@ -0,0 +1,351 @@
+
+import bootstrap from 'bootstrap/dist/js/bootstrap'
+window.bootstrap = bootstrap;
+import 'iconify-icon';
+import 'simplebar/dist/simplebar'
+        
+class Components {
+    initBootstrapComponents() {
+        [...document.querySelectorAll('[data-bs-toggle="popover"]')].map(
+            (e) => new bootstrap.Popover(e)
+        ),
+            [...document.querySelectorAll('[data-bs-toggle="tooltip"]')].map(
+                (e) => new bootstrap.Tooltip(e)
+            ),
+            [...document.querySelectorAll(".offcanvas")].map(
+                (e) => new bootstrap.Offcanvas(e)
+            );
+        var e = document.getElementById("toastPlacement"),
+            t =
+                (e &&
+                    document
+                        .getElementById("selectToastPlacement")
+                        .addEventListener("change", function () {
+                            e.dataset.originalClass ||
+                                (e.dataset.originalClass = e.className),
+                                (e.className =
+                                    e.dataset.originalClass + " " + this.value);
+                        }),
+                [].slice
+                    .call(document.querySelectorAll(".toast"))
+                    .map(function (e) {
+                        return new bootstrap.Toast(e);
+                    }),
+                document.getElementById("liveAlertBtn"));
+        t &&
+            t.addEventListener("click", () => {
+                alert("Nice, you triggered this alert message!", "success");
+            });
+    }
+    initfullScreenListener() {
+        var e = document.querySelector('[data-toggle="fullscreen"]');
+        e &&
+            e.addEventListener("click", function (e) {
+                e.preventDefault(),
+                    document.body.classList.toggle("fullscreen-enable"),
+                    document.fullscreenElement ||
+                    document.mozFullScreenElement ||
+                    document.webkitFullscreenElement
+                        ? document.cancelFullScreen
+                            ? document.cancelFullScreen()
+                            : document.mozCancelFullScreen
+                            ? document.mozCancelFullScreen()
+                            : document.webkitCancelFullScreen &&
+                              document.webkitCancelFullScreen()
+                        : document.documentElement.requestFullscreen
+                        ? document.documentElement.requestFullscreen()
+                        : document.documentElement.mozRequestFullScreen
+                        ? document.documentElement.mozRequestFullScreen()
+                        : document.documentElement.webkitRequestFullscreen &&
+                          document.documentElement.webkitRequestFullscreen(
+                              Element.ALLOW_KEYBOARD_INPUT
+                          );
+            });
+    }
+    initCounter() {
+        var e = document.querySelectorAll(".counter-value");
+        function a(e) {
+            return e.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        }
+        e &&
+            e.forEach(function (i) {
+                !(function e() {
+                    var t = +i.getAttribute("data-target"),
+                        n = +i.innerText,
+                        o = t / 250;
+                    o < 1 && (o = 1),
+                        n < t
+                            ? ((i.innerText = (n + o).toFixed(0)),
+                              setTimeout(e, 1))
+                            : (i.innerText = a(t)),
+                        a(i.innerText);
+                })();
+            });
+    }
+    init() {
+        this.initBootstrapComponents(),
+            this.initfullScreenListener(),
+            this.initCounter();
+    }
+}
+class FormValidation {
+    initFormValidation() {
+        document.querySelectorAll(".needs-validation").forEach((t) => {
+            t.addEventListener(
+                "submit",
+                (e) => {
+                    t.checkValidity() ||
+                        (e.preventDefault(), e.stopPropagation()),
+                        t.classList.add("was-validated");
+                },
+                !1
+            );
+        });
+    }
+    init() {
+        this.initFormValidation();
+    }
+}
+document.addEventListener("DOMContentLoaded", function (e) {
+    new Components().init(), new FormValidation().init();
+});
+class ThemeLayout {
+    constructor() {
+        (this.html = document.getElementsByTagName("html")[0]),
+            (this.config = {}),
+            (this.defaultConfig = window.config);
+    }
+    initVerticalMenu() {
+        var e = document.querySelectorAll(".navbar-nav li .collapse");
+        document
+            .querySelectorAll(".navbar-nav li [data-bs-toggle='collapse']")
+            .forEach((e) => {
+                e.addEventListener("click", function (e) {
+                    e.preventDefault();
+                });
+            }),
+            e.forEach((e) => {
+                e.addEventListener("show.bs.collapse", function (t) {
+                    let n = t.target.closest(".collapse.show");
+                    document
+                        .querySelectorAll(".navbar-nav .collapse.show")
+                        .forEach((e) => {
+                            e !== t.target &&
+                                e !== n &&
+                                new bootstrap.Collapse(e).hide();
+                        });
+                });
+            }),
+            document.querySelector(".navbar-nav") &&
+                (document
+                    .querySelectorAll(".navbar-nav a")
+                    .forEach(function (t) {
+                        var e = window.location.href.split(/[?#]/)[0];
+                        if (t.href === e) {
+                            t.classList.add("active"),
+                                t.parentNode.classList.add("active");
+                            let e = t.closest(".collapse");
+                            for (; e; )
+                                e.classList.add("show"),
+                                    e.parentElement.children[0].classList.add(
+                                        "active"
+                                    ),
+                                    e.parentElement.children[0].setAttribute(
+                                        "aria-expanded",
+                                        "true"
+                                    ),
+                                    (e = e.parentElement.closest(".collapse"));
+                        }
+                    }),
+                setTimeout(function () {
+                    var e,
+                        n,
+                        o,
+                        i,
+                        a,
+                        t = document.querySelector(".nav-item li a.active");
+                    null != t &&
+                        ((e = document.querySelector(
+                            ".app-sidebar .simplebar-content-wrapper"
+                        )),
+                        (t = t.offsetTop - 300),
+                        e) &&
+                        100 < t &&
+                        ((o = (n = e).scrollTop),
+                        (i = t - o),
+                        (a = 0),
+                        (function e() {
+                            var t = (a += 20),
+                                t =
+                                    (t /= 300) < 1
+                                        ? (i / 2) * t * t + o
+                                        : (-i / 2) * (--t * (t - 2) - 1) + o;
+                            (n.scrollTop = t), a < 600 && setTimeout(e, 20);
+                        })());
+                }, 200));
+    }
+    initConfig() {
+        (this.defaultConfig = JSON.parse(JSON.stringify(window.defaultConfig))),
+            (this.config = JSON.parse(JSON.stringify(window.config))),
+            this.setSwitchFromConfig();
+    }
+    changeMenuColor(e) {
+        (this.config.menu.color = e),
+            this.html.setAttribute("data-sidebar-color", e),
+            this.setSwitchFromConfig();
+    }
+    changeMenuSize(e, t = !0) {
+        this.html.setAttribute("data-sidebar-size", e),
+            t && ((this.config.menu.size = e), this.setSwitchFromConfig());
+    }
+    changeThemeMode(e) {
+        (this.config.theme = e),
+            this.html.setAttribute("data-bs-theme", e),
+            this.setSwitchFromConfig();
+    }
+    changeTopbarColor(e) {
+        (this.config.topbar.color = e),
+            this.html.setAttribute("data-topbar-color", e),
+            this.setSwitchFromConfig();
+    }
+    resetTheme() {
+        (this.config = JSON.parse(JSON.stringify(window.defaultConfig))),
+            this.changeMenuColor(this.config.menu.color),
+            this.changeMenuSize(this.config.menu.size),
+            this.changeThemeMode(this.config.theme),
+            this.changeTopbarColor(this.config.topbar.color),
+            this._adjustLayout();
+    }
+    initSwitchListener() {
+        var n = this,
+            e =
+                (document
+                    .querySelectorAll("input[name=data-sidebar-color]")
+                    .forEach(function (t) {
+                        t.addEventListener("change", function (e) {
+                            n.changeMenuColor(t.value);
+                        });
+                    }),
+                document
+                    .querySelectorAll("input[name=data-sidebar-size]")
+                    .forEach(function (t) {
+                        t.addEventListener("change", function (e) {
+                            n.changeMenuSize(t.value);
+                        });
+                    }),
+                document
+                    .querySelectorAll("input[name=data-bs-theme]")
+                    .forEach(function (t) {
+                        t.addEventListener("change", function (e) {
+                            n.changeThemeMode(t.value);
+                        });
+                    }),
+                document
+                    .querySelectorAll("input[name=data-topbar-color]")
+                    .forEach(function (t) {
+                        t.addEventListener("change", function (e) {
+                            n.changeTopbarColor(t.value);
+                        });
+                    }),
+                document.getElementById("light-dark-mode"));
+        e &&
+            e.addEventListener("click", function (e) {
+                "light" === n.config.theme
+                    ? n.changeThemeMode("dark")
+                    : n.changeThemeMode("light");
+            }),
+            (e = document.querySelector("#reset-layout")) &&
+                e.addEventListener("click", function (e) {
+                    n.resetTheme();
+                }),
+            (e = document.querySelector(".button-toggle-menu")) &&
+                e.addEventListener("click", function () {
+                    var e = n.config.menu.size,
+                        t = n.html.getAttribute("data-sidebar-size", e);
+                    "hidden" !== t
+                        ? "condensed" === t
+                            ? n.changeMenuSize(
+                                  "condensed" == e ? "default" : e,
+                                  !1
+                              )
+                            : n.changeMenuSize("condensed", !1)
+                        : n.showBackdrop(),
+                        n.html.classList.toggle("sidebar-enable");
+                });
+    }
+    showBackdrop() {
+        let t = document.createElement("div"),
+            n =
+                ((t.classList = "offcanvas-backdrop fade show"),
+                document.body.appendChild(t),
+                (document.body.style.overflow = "hidden"),
+                1040 < window.innerWidth &&
+                    (document.body.style.paddingRight = "15px"),
+                this);
+        t.addEventListener("click", function (e) {
+            n.html.classList.remove("sidebar-enable"),
+                document.body.removeChild(t),
+                (document.body.style.overflow = null),
+                (document.body.style.paddingRight = null);
+        });
+    }
+    initWindowSize() {
+        var t = this;
+        window.addEventListener("resize", function (e) {
+            t._adjustLayout();
+        });
+    }
+    _adjustLayout() {
+        window.innerWidth <= 1140
+            ? this.changeMenuSize("hidden", !1)
+            : this.changeMenuSize(this.config.menu.size);
+    }
+    setSwitchFromConfig() {
+        sessionStorage.setItem(
+            "__DARKONE_CONFIG__",
+            JSON.stringify(this.config)
+        ),
+            document
+                .querySelectorAll(".settings-bar input[type=radio]")
+                .forEach(function (e) {
+                    e.checked = !1;
+                });
+        var e,
+            t,
+            n,
+            o = this.config;
+        o &&
+            ((e = document.querySelector(
+                "input[type=radio][name=data-bs-theme][value=" + o.theme + "]"
+            )),
+            (t = document.querySelector(
+                "input[type=radio][name=data-topbar-color][value=" +
+                    o.topbar.color +
+                    "]"
+            )),
+            (n = document.querySelector(
+                "input[type=radio][name=data-sidebar-size][value=" +
+                    o.menu.size +
+                    "]"
+            )),
+            (o = document.querySelector(
+                "input[type=radio][name=data-sidebar-color][value=" +
+                    o.menu.color +
+                    "]"
+            )),
+            e && (e.checked = !0),
+            t && (t.checked = !0),
+            n && (n.checked = !0),
+            o) &&
+            (o.checked = !0);
+    }
+    init() {
+        this.initVerticalMenu(),
+            this.initConfig(),
+            this.initSwitchListener(),
+            this.initWindowSize(),
+            this._adjustLayout(),
+            this.setSwitchFromConfig();
+    }
+}
+new ThemeLayout().init();

resources/js/config.js

@@ -0,0 +1,29 @@
+!(function () {
+    var t = sessionStorage.getItem("__DARKONE_CONFIG__"),
+        e = document.getElementsByTagName("html")[0],
+        o = {
+            theme: "dark",
+            topbar: { color: "light" },
+            menu: { size: "default", color: "light" },
+        };
+        var html = document.getElementsByTagName("html")[0];
+        var config = Object.assign(JSON.parse(JSON.stringify(o)), {});
+
+    (html),
+        ((config = Object.assign(JSON.parse(JSON.stringify(o)), {})).theme =
+            e.getAttribute("data-bs-theme") || o.theme),
+        (config.topbar.color =
+            e.getAttribute("data-topbar-color") || o.topbar.color),
+        (config.menu.color =
+            e.getAttribute("data-sidebar-color") || o.menu.color),
+        (config.menu.size = e.getAttribute("data-sidebar-size") || o.menu.size),
+        (window.defaultConfig = JSON.parse(JSON.stringify(config))),
+        null !== t && (config = JSON.parse(t)),
+        (window.config = config) &&
+            (e.setAttribute("data-bs-theme", config.theme),
+            e.setAttribute("data-topbar-color", config.topbar.color),
+            e.setAttribute("data-sidebar-color", config.menu.color),
+            window.innerWidth <= 1140
+                ? e.setAttribute("data-sidebar-size", "hidden")
+                : e.setAttribute("data-sidebar-size", config.menu.size));
+})();

resources/js/pages/dashboard.js

@@ -0,0 +1,464 @@
+import ApexCharts from "apexcharts";
+
+import jsVectorMap from "jsvectormap/dist/jsvectormap.js";
+import 'jsvectormap/dist/maps/world-merc.js'
+import 'jsvectormap/dist/maps/world.js'
+
+var options1 = {
+    chart: {
+        type: 'area',
+        height: 50,
+        sparkline: {
+            enabled: true
+        }
+    },
+    series: [{
+        data: [25, 28, 32, 38, 43, 55, 60, 48, 42, 51, 35]
+    }],
+    stroke: {
+        width: 2,
+        curve: 'smooth'
+    },
+    markers: {
+        size: 0
+    },
+    colors: ["#7e67fe"],
+    tooltip: {
+        fixed: {
+            enabled: false
+        },
+        x: {
+            show: false
+        },
+        y: {
+            title: {
+                formatter: function (seriesName) {
+                    return ''
+                }
+            }
+        },
+        marker: {
+            show: false
+        }
+    },
+    fill: {
+        opacity: [1],
+        type: ['gradient'],
+        gradient: {
+            type: "vertical",
+            //   shadeIntensity: 1,
+            inverseColors: false,
+            opacityFrom: 0.5,
+            opacityTo: 0,
+            stops: [0, 100]
+        },
+    },
+}
+
+new ApexCharts(document.querySelector("#chart01"), options1).render();
+
+
+var options1 = {
+    chart: {
+        type: 'area',
+        height: 50,
+        sparkline: {
+            enabled: true
+        }
+    },
+    series: [{
+        data: [87, 54, 4, 76, 31, 95, 70, 92, 53, 9, 6]
+    }],
+    stroke: {
+        width: 2,
+        curve: 'smooth'
+    },
+    markers: {
+        size: 0
+    },
+    colors: ["#7e67fe"],
+    tooltip: {
+        fixed: {
+            enabled: false
+        },
+        x: {
+            show: false
+        },
+        y: {
+            title: {
+                formatter: function (seriesName) {
+                    return ''
+                }
+            }
+        },
+        marker: {
+            show: false
+        }
+    },
+    fill: {
+        opacity: [1],
+        type: ['gradient'],
+        gradient: {
+            type: "vertical",
+            //   shadeIntensity: 1,
+            inverseColors: false,
+            opacityFrom: 0.5,
+            opacityTo: 0,
+            stops: [0, 100]
+        },
+    },
+}
+
+new ApexCharts(document.querySelector("#chart02"), options1).render();
+
+
+
+var options1 = {
+    chart: {
+        type: 'area',
+        height: 50,
+        sparkline: {
+            enabled: true
+        }
+    },
+    series: [{
+        data: [41, 42, 35, 42, 6, 12, 13, 22, 42, 94, 95]
+    }],
+    stroke: {
+        width: 2,
+        curve: 'smooth'
+    },
+    markers: {
+        size: 0
+    },
+    colors: ["#7e67fe"],
+    tooltip: {
+        fixed: {
+            enabled: false
+        },
+        x: {
+            show: false
+        },
+        y: {
+            title: {
+                formatter: function (seriesName) {
+                    return ''
+                }
+            }
+        },
+        marker: {
+            show: false
+        }
+    },
+    fill: {
+        opacity: [1],
+        type: ['gradient'],
+        gradient: {
+            type: "vertical",
+            //   shadeIntensity: 1,
+            inverseColors: false,
+            opacityFrom: 0.5,
+            opacityTo: 0,
+            stops: [0, 100]
+        },
+    },
+}
+
+new ApexCharts(document.querySelector("#chart03"), options1).render();
+
+
+var options1 = {
+    chart: {
+        type: 'area',
+        height: 50,
+        sparkline: {
+            enabled: true
+        }
+    },
+    series: [{
+        data: [8, 41, 40, 48, 77, 35, 0, 77, 63, 100, 71]
+    }],
+    stroke: {
+        width: 2,
+        curve: 'smooth'
+    },
+    markers: {
+        size: 0
+    },
+    colors: ["#7e67fe"],
+    tooltip: {
+        fixed: {
+            enabled: false
+        },
+        x: {
+            show: false
+        },
+        y: {
+            title: {
+                formatter: function (seriesName) {
+                    return ''
+                }
+            }
+        },
+        marker: {
+            show: false
+        }
+    },
+    fill: {
+        opacity: [1],
+        type: ['gradient'],
+        gradient: {
+            type: "vertical",
+            //   shadeIntensity: 1,
+            inverseColors: false,
+            opacityFrom: 0.5,
+            opacityTo: 0,
+            stops: [0, 100]
+        },
+    },
+}
+
+new ApexCharts(document.querySelector("#chart04"), options1).render();
+
+// Conversions
+var options = {
+    chart: {
+        height: 180,
+        type: 'donut',
+    },
+    series: [44.25, 52.68, 45.98],
+    legend: {
+        show: false
+    },
+    stroke: {
+        width: 0
+    },
+    plotOptions: {
+        pie: {
+            donut: {
+                size: '70%',
+                labels: {
+                    show: false,
+                    total: {
+                        showAlways: true,
+                        show: true
+                    }
+                }
+            }
+        }
+    },
+    labels: ["Direct", "Affilliate", "Sponsored"],
+    colors: ["#7e67fe", "#17c553", "#7942ed"],
+    dataLabels: {
+        enabled: false
+    },
+    responsive: [{
+        breakpoint: 480,
+        options: {
+            chart: {
+                width: 200
+            }
+        }
+    }],
+    fill: {
+        type: 'gradient'
+    }
+}
+var chart = new ApexCharts(
+    document.querySelector("#conversions"),
+    options
+);
+chart.render();
+
+//Sales Report -chart
+var options = {
+    series: [{
+        name: "Page Views",
+        type: "bar",
+        data: [34, 65, 46, 68, 49, 61, 42, 44, 78, 52, 63, 67],
+    },
+    {
+        name: "Clicks",
+        type: "area",
+        data: [8, 12, 7, 17, 21, 11, 5, 9, 7, 29, 12, 35],
+    },
+    {
+        name: "Revenue",
+        type: "area",
+        data: [12, 16, 11, 22, 28, 25, 15, 29, 35, 45, 42, 48],
+    }
+    ],
+    chart: {
+        height: 330,
+        type: "line",
+        toolbar: {
+            show: false,
+        },
+    },
+    stroke: {
+        dashArray: [0, 0, 2],
+        width: [0, 2, 2],
+        curve: 'smooth'
+    },
+    fill: {
+        opacity: [1, 1, 1],
+        type: ['solid', 'gradient', 'gradient'],
+        gradient: {
+            type: "vertical",
+            inverseColors: false,
+            opacityFrom: 0.5,
+            opacityTo: 0,
+            stops: [0, 90]
+        },
+    },
+    markers: {
+        size: [0, 0],
+        strokeWidth: 2,
+        hover: {
+            size: 4,
+        },
+    },
+    xaxis: {
+        categories: [
+            "Jan",
+            "Feb",
+            "Mar",
+            "Apr",
+            "May",
+            "Jun",
+            "Jul",
+            "Aug",
+            "Sep",
+            "Oct",
+            "Nov",
+            "Dec",
+        ],
+        axisTicks: {
+            show: false,
+        },
+        axisBorder: {
+            show: false,
+        },
+    },
+    yaxis: {
+        min: 0,
+        axisBorder: {
+            show: false,
+        }
+    },
+    grid: {
+        show: true,
+        strokeDashArray: 3,
+        xaxis: {
+            lines: {
+                show: false,
+            },
+        },
+        yaxis: {
+            lines: {
+                show: true,
+            },
+        },
+        padding: {
+            top: 0,
+            right: -2,
+            bottom: 10,
+            left: 10,
+        },
+    },
+    legend: {
+        show: true,
+        horizontalAlign: "center",
+        offsetX: 0,
+        offsetY: 5,
+        markers: {
+            width: 9,
+            height: 9,
+            radius: 6,
+        },
+        itemMargin: {
+            horizontal: 10,
+            vertical: 0,
+        },
+    },
+    plotOptions: {
+        bar: {
+            columnWidth: "30%",
+            barHeight: "70%",
+            borderRadius: 3,
+        },
+    },
+    colors: ["#7e67fe", "#17c553", "#7942ed"],
+    tooltip: {
+        shared: true,
+        y: [{
+            formatter: function (y) {
+                if (typeof y !== "undefined") {
+                    return y.toFixed(1) + "k";
+                }
+                return y;
+            },
+        },
+        {
+            formatter: function (y) {
+                if (typeof y !== "undefined") {
+                    return y.toFixed(1) + "k";
+                }
+                return y;
+            },
+        },
+        ],
+    },
+}
+
+var chart = new ApexCharts(
+    document.querySelector("#dash-performance-chart"),
+    options
+);
+
+chart.render();
+
+
+class VectorMap {
+
+    initWorldMapMarker() {
+        const map = new jsVectorMap({
+            map: 'world',
+            selector: '#world-map-markers',
+            zoomOnScroll: true,
+            zoomButtons: false,
+            markersSelectable: true,
+            markers: [
+                { name: "Canada", coords: [56.1304, -106.3468] },
+                { name: "Brazil", coords: [-14.2350, -51.9253] },
+                { name: "Russia", coords: [61, 105] },
+                { name: "China", coords: [35.8617, 104.1954] },
+                { name: "United States", coords: [37.0902, -95.7129] }
+            ],
+            markerStyle: {
+                initial: { fill: "#7f56da" },
+                selected: { fill: "#1bb394" }
+            },
+            labels: {
+                markers: {
+                    render: marker => marker.name
+                }
+            },
+            regionStyle: {
+                initial: {
+                    fill: 'rgba(169,183,197, 0.3)',
+                    fillOpacity: 1,
+                },
+            },
+        });
+    }
+
+    init() {
+        this.initWorldMapMarker();
+    }
+
+}
+
+document.addEventListener('DOMContentLoaded', function (e) {
+    new VectorMap().init();
+});

resources/js/pages/form-fileupload.js

@@ -0,0 +1,17 @@
+import { Dropzone } from "dropzone";
+
+Dropzone.autoDiscover = false;
+
+var previewTemplate,
+    dropzone,
+    dropzonePreviewNode = document.querySelector("#dropzone-preview-list");
+(dropzonePreviewNode.id = ""),
+    dropzonePreviewNode &&
+        ((previewTemplate = dropzonePreviewNode.parentNode.innerHTML),
+        dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode),
+        (dropzone = new Dropzone(".dropzone", {
+            url: "https://httpbin.org/post",
+            method: "post",
+            previewTemplate: previewTemplate,
+            previewsContainer: "#dropzone-preview",
+        })));

resources/js/pages/form-flatepicker.js

@@ -0,0 +1,83 @@
+import 'flatpickr/dist/flatpickr'
+
+class FlatpickrDemo {
+    init() {
+        document.getElementById("basic-datepicker").flatpickr(),
+            document
+                .getElementById("datetime-datepicker")
+                .flatpickr({ enableTime: !0, dateFormat: "Y-m-d H:i" }),
+            document
+                .getElementById("humanfd-datepicker")
+                .flatpickr({
+                    altInput: !0,
+                    altFormat: "F j, Y",
+                    dateFormat: "Y-m-d",
+                }),
+            document
+                .getElementById("minmax-datepicker")
+                .flatpickr({ minDate: "2020-01", maxDate: "2020-03" }),
+            document.getElementById("disable-datepicker").flatpickr({
+                onReady: function () {
+                    this.jumpToDate("2025-01");
+                },
+                disable: [
+                    "2025-01-10",
+                    "2025-01-21",
+                    "2025-01-30",
+                    new Date(2025, 4, 9),
+                ],
+                dateFormat: "Y-m-d",
+            }),
+            document
+                .getElementById("multiple-datepicker")
+                .flatpickr({ mode: "multiple", dateFormat: "Y-m-d" }),
+            document
+                .getElementById("conjunction-datepicker")
+                .flatpickr({
+                    mode: "multiple",
+                    dateFormat: "Y-m-d",
+                    conjunction: " :: ",
+                }),
+            document
+                .getElementById("range-datepicker")
+                .flatpickr({ mode: "range" }),
+            document
+                .getElementById("inline-datepicker")
+                .flatpickr({ inline: !0 }),
+            document
+                .getElementById("basic-timepicker")
+                .flatpickr({
+                    enableTime: !0,
+                    noCalendar: !0,
+                    dateFormat: "H:i",
+                }),
+            document
+                .getElementById("24hours-timepicker")
+                .flatpickr({
+                    enableTime: !0,
+                    noCalendar: !0,
+                    dateFormat: "H:i",
+                    time_24hr: !0,
+                }),
+            document
+                .getElementById("minmax-timepicker")
+                .flatpickr({
+                    enableTime: !0,
+                    noCalendar: !0,
+                    dateFormat: "H:i",
+                    minDate: "16:00",
+                    maxDate: "22:30",
+                }),
+            document
+                .getElementById("preloading-timepicker")
+                .flatpickr({
+                    enableTime: !0,
+                    noCalendar: !0,
+                    dateFormat: "H:i",
+                    defaultDate: "01:45",
+                });
+    }
+}
+document.addEventListener("DOMContentLoaded", function (e) {
+    new FlatpickrDemo().init();
+});

resources/js/pages/form-quilljs.js

@@ -0,0 +1,27 @@
+import Quill from 'quill';
+var quill = new Quill("#snow-editor", {
+        theme: "snow",
+        modules: {
+            toolbar: [
+                [{ font: [] }, { size: [] }],
+                ["bold", "italic", "underline", "strike"],
+                [{ color: [] }, { background: [] }],
+                [{ script: "super" }, { script: "sub" }],
+                [
+                    { header: [!1, 1, 2, 3, 4, 5, 6] },
+                    "blockquote",
+                    "code-block",
+                ],
+                [
+                    { list: "ordered" },
+                    { list: "bullet" },
+                    { indent: "-1" },
+                    { indent: "+1" },
+                ],
+                ["direction", { align: [] }],
+                ["link", "image", "video"],
+                ["clean"],
+            ],
+        },
+    }),
+    quill = new Quill("#bubble-editor", { theme: "bubble" });

resources/js/pages/maps-google.js

@@ -0,0 +1,314 @@
+import GMaps from 'gmaps';
+
+class GoogleMap {
+    initBasicGoogleMap() {
+        new GMaps({ div: "#gmaps-basic", lat: -12.043333, lng: -77.028333 });
+    }
+    initMarkerGoogleMap() {
+        new GMaps({ div: "#gmaps-markers", lat: -12.043333, lng: -77.028333 });
+    }
+    initStreetViewGoogleMap() {
+        GMaps.createPanorama({ el: "#panorama", lat: 42.3455, lng: -71.0983 });
+    }
+    initMapTypes() {
+        var e = new GMaps({
+            el: "#gmaps-types",
+            lat: 42.3455,
+            lng: -71.0983,
+            mapTypeControlOptions: {
+                mapTypeIds: [
+                    "hybrid",
+                    "roadmap",
+                    "satellite",
+                    "terrain",
+                    "osm",
+                    "cloudmade",
+                ],
+            },
+        });
+        return (
+            e.addMapType("osm", {
+                getTileUrl: function (e, t) {
+                    return (
+                        "http://tile.openstreetmap.org/" +
+                        t +
+                        "/" +
+                        e.x +
+                        "/" +
+                        e.y +
+                        ".png"
+                    );
+                },
+                tileSize: new google.maps.Size(256, 256),
+                name: "OpenStreetMap",
+                maxZoom: 18,
+            }),
+            e.addMapType("cloudmade", {
+                getTileUrl: function (e, t) {
+                    return (
+                        "http://b.tile.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/1/256/" +
+                        t +
+                        "/" +
+                        e.x +
+                        "/" +
+                        e.y +
+                        ".png"
+                    );
+                },
+                tileSize: new google.maps.Size(256, 256),
+                name: "CloudMade",
+                maxZoom: 18,
+            }),
+            e.setMapTypeId("osm"),
+            e
+        );
+    }
+    initUltraLightMap() {
+        new GMaps({
+            div: "#ultra-light",
+            lat: 42.3455,
+            lng: -71.0983,
+            styles: [
+                {
+                    featureType: "water",
+                    elementType: "geometry",
+                    stylers: [{ color: "#e9e9e9" }, { lightness: 17 }],
+                },
+                {
+                    featureType: "landscape",
+                    elementType: "geometry",
+                    stylers: [{ color: "#f5f5f5" }, { lightness: 20 }],
+                },
+                {
+                    featureType: "road.highway",
+                    elementType: "geometry.fill",
+                    stylers: [{ color: "#ffffff" }, { lightness: 17 }],
+                },
+                {
+                    featureType: "road.highway",
+                    elementType: "geometry.stroke",
+                    stylers: [
+                        { color: "#ffffff" },
+                        { lightness: 29 },
+                        { weight: 0.2 },
+                    ],
+                },
+                {
+                    featureType: "road.arterial",
+                    elementType: "geometry",
+                    stylers: [{ color: "#ffffff" }, { lightness: 18 }],
+                },
+                {
+                    featureType: "road.local",
+                    elementType: "geometry",
+                    stylers: [{ color: "#ffffff" }, { lightness: 16 }],
+                },
+                {
+                    featureType: "poi",
+                    elementType: "geometry",
+                    stylers: [{ color: "#f5f5f5" }, { lightness: 21 }],
+                },
+                {
+                    featureType: "poi.park",
+                    elementType: "geometry",
+                    stylers: [{ color: "#dedede" }, { lightness: 21 }],
+                },
+                {
+                    elementType: "labels.text.stroke",
+                    stylers: [
+                        { visibility: "on" },
+                        { color: "#ffffff" },
+                        { lightness: 16 },
+                    ],
+                },
+                {
+                    elementType: "labels.text.fill",
+                    stylers: [
+                        { saturation: 36 },
+                        { color: "#333333" },
+                        { lightness: 40 },
+                    ],
+                },
+                {
+                    elementType: "labels.icon",
+                    stylers: [{ visibility: "off" }],
+                },
+                {
+                    featureType: "transit",
+                    elementType: "geometry",
+                    stylers: [{ color: "#f2f2f2" }, { lightness: 19 }],
+                },
+                {
+                    featureType: "administrative",
+                    elementType: "geometry.fill",
+                    stylers: [{ color: "#fefefe" }, { lightness: 20 }],
+                },
+                {
+                    featureType: "administrative",
+                    elementType: "geometry.stroke",
+                    stylers: [
+                        { color: "#fefefe" },
+                        { lightness: 17 },
+                        { weight: 1.2 },
+                    ],
+                },
+            ],
+        });
+    }
+    initDarkMap() {
+        new GMaps({
+            div: "#dark",
+            lat: 42.3455,
+            lng: -71.0983,
+            styles: [
+                {
+                    featureType: "all",
+                    elementType: "labels",
+                    stylers: [{ visibility: "on" }],
+                },
+                {
+                    featureType: "all",
+                    elementType: "labels.text.fill",
+                    stylers: [
+                        { saturation: 36 },
+                        { color: "#000000" },
+                        { lightness: 40 },
+                    ],
+                },
+                {
+                    featureType: "all",
+                    elementType: "labels.text.stroke",
+                    stylers: [
+                        { visibility: "on" },
+                        { color: "#000000" },
+                        { lightness: 16 },
+                    ],
+                },
+                {
+                    featureType: "all",
+                    elementType: "labels.icon",
+                    stylers: [{ visibility: "off" }],
+                },
+                {
+                    featureType: "administrative",
+                    elementType: "geometry.fill",
+                    stylers: [{ color: "#000000" }, { lightness: 20 }],
+                },
+                {
+                    featureType: "administrative",
+                    elementType: "geometry.stroke",
+                    stylers: [
+                        { color: "#000000" },
+                        { lightness: 17 },
+                        { weight: 1.2 },
+                    ],
+                },
+                {
+                    featureType: "administrative.country",
+                    elementType: "labels.text.fill",
+                    stylers: [{ color: "#e5c163" }],
+                },
+                {
+                    featureType: "administrative.locality",
+                    elementType: "labels.text.fill",
+                    stylers: [{ color: "#c4c4c4" }],
+                },
+                {
+                    featureType: "administrative.neighborhood",
+                    elementType: "labels.text.fill",
+                    stylers: [{ color: "#e5c163" }],
+                },
+                {
+                    featureType: "landscape",
+                    elementType: "geometry",
+                    stylers: [{ color: "#000000" }, { lightness: 20 }],
+                },
+                {
+                    featureType: "poi",
+                    elementType: "geometry",
+                    stylers: [
+                        { color: "#000000" },
+                        { lightness: 21 },
+                        { visibility: "on" },
+                    ],
+                },
+                {
+                    featureType: "poi.business",
+                    elementType: "geometry",
+                    stylers: [{ visibility: "on" }],
+                },
+                {
+                    featureType: "road.highway",
+                    elementType: "geometry.fill",
+                    stylers: [{ color: "#e5c163" }, { lightness: "0" }],
+                },
+                {
+                    featureType: "road.highway",
+                    elementType: "geometry.stroke",
+                    stylers: [{ visibility: "off" }],
+                },
+                {
+                    featureType: "road.highway",
+                    elementType: "labels.text.fill",
+                    stylers: [{ color: "#ffffff" }],
+                },
+                {
+                    featureType: "road.highway",
+                    elementType: "labels.text.stroke",
+                    stylers: [{ color: "#e5c163" }],
+                },
+                {
+                    featureType: "road.arterial",
+                    elementType: "geometry",
+                    stylers: [{ color: "#000000" }, { lightness: 18 }],
+                },
+                {
+                    featureType: "road.arterial",
+                    elementType: "geometry.fill",
+                    stylers: [{ color: "#575757" }],
+                },
+                {
+                    featureType: "road.arterial",
+                    elementType: "labels.text.fill",
+                    stylers: [{ color: "#ffffff" }],
+                },
+                {
+                    featureType: "road.arterial",
+                    elementType: "labels.text.stroke",
+                    stylers: [{ color: "#2c2c2c" }],
+                },
+                {
+                    featureType: "road.local",
+                    elementType: "geometry",
+                    stylers: [{ color: "#000000" }, { lightness: 16 }],
+                },
+                {
+                    featureType: "road.local",
+                    elementType: "labels.text.fill",
+                    stylers: [{ color: "#999999" }],
+                },
+                {
+                    featureType: "transit",
+                    elementType: "geometry",
+                    stylers: [{ color: "#000000" }, { lightness: 19 }],
+                },
+                {
+                    featureType: "water",
+                    elementType: "geometry",
+                    stylers: [{ color: "#000000" }, { lightness: 17 }],
+                },
+            ],
+        });
+    }
+    init() {
+        this.initBasicGoogleMap(),
+            this.initMarkerGoogleMap(),
+            this.initStreetViewGoogleMap(),
+            this.initMapTypes(),
+            this.initUltraLightMap(),
+            this.initDarkMap();
+    }
+}
+document.addEventListener("DOMContentLoaded", function (e) {
+    new GoogleMap().init();
+});

resources/js/pages/maps-vector.js

@@ -0,0 +1,85 @@
+import jsVectorMap from 'jsvectormap/dist/jsvectormap.js'
+
+// Import the desired map(s)
+import 'jsvectormap/dist/maps/world.js';
+import 'jsvectormap/dist/maps/world-merc.js';
+
+class VectorMap {
+    initWorldMapMarker() {
+        new jsVectorMap({
+            map: "world",
+            selector: "#world-map-markers",
+            zoomOnScroll: !1,
+            zoomButtons: !0,
+            markersSelectable: !0,
+            markers: [
+                { name: "Greenland", coords: [72, -42] },
+                { name: "Canada", coords: [56.1304, -106.3468] },
+                { name: "Brazil", coords: [-14.235, -51.9253] },
+                { name: "Egypt", coords: [26.8206, 30.8025] },
+                { name: "Russia", coords: [61, 105] },
+                { name: "China", coords: [35.8617, 104.1954] },
+                { name: "United States", coords: [37.0902, -95.7129] },
+                { name: "Norway", coords: [60.472024, 8.468946] },
+                { name: "Ukraine", coords: [48.379433, 31.16558] },
+            ],
+            markerStyle: {
+                initial: { fill: "#5B8DEC" },
+                selected: { fill: "#ed5565" },
+            },
+            labels: { markers: { render: (a) => a.name } },
+            regionStyle: {
+                initial: { fill: "rgba(169,183,197, 0.2)", fillOpacity: 1 },
+            },
+        });
+    }
+    initCanadaVectorMap() {
+        new jsVectorMap({
+            map: "canada",
+            selector: "#canada-vector-map",
+            zoomOnScroll: !1,
+            regionStyle: { initial: { fill: "#1e84c4" } },
+        });
+    }
+    initRussiaVectorMap() {
+        new jsVectorMap({
+            map: "russia",
+            selector: "#russia-vector-map",
+            zoomOnScroll: !1,
+            regionStyle: { initial: { fill: "#1bb394" } },
+        });
+    }
+    initIraqVectorMap() {
+        new jsVectorMap({
+            map: "iraq",
+            selector: "#iraq-vector-map",
+            zoomOnScroll: !1,
+            regionStyle: { initial: { fill: "#f8ac59" } },
+        });
+    }
+    initSpainVectorMap() {
+        new jsVectorMap({
+            map: "spain",
+            selector: "#spain-vector-map",
+            zoomOnScroll: !1,
+            regionStyle: { initial: { fill: "#23c6c8" } },
+        });
+    }
+    initUsaVectorMap() {
+        new jsVectorMap({
+            map: "us_merc_en",
+            selector: "#usa-vector-map",
+            regionStyle: { initial: { fill: "#ffe381" } },
+        });
+    }
+    init() {
+        this.initWorldMapMarker(),
+            this.initCanadaVectorMap(),
+            this.initRussiaVectorMap(),
+            this.initIraqVectorMap(),
+            this.initSpainVectorMap();
+    }
+}
+document.addEventListener("DOMContentLoaded", function (a) {
+    new VectorMap().init();
+});

resources/js/pages/table-gridjs.js

@@ -0,0 +1,228 @@
+import { Grid } from "gridjs/dist/gridjs.umd.js";
+import gridjs from 'gridjs/dist/gridjs.umd.js'
+import 'gridjs/dist/gridjs.umd.js'
+
+class GridDatatable {
+
+    init() {
+         this.GridjsTableInit();
+    }
+
+    GridjsTableInit() {
+
+         // Basic Table
+         if (document.getElementById("table-gridjs"))
+              new Grid({
+                   columns: [{
+                        name: 'ID',
+                        formatter: (function (cell) {
+                             return gridjs.html('<span class="fw-semibold">' + cell + '</span>');
+                        })
+                   },
+                        "Name",
+                   {
+                        name: 'Email',
+                        formatter: (function (cell) {
+                             return gridjs.html('<a href="">' + cell + '</a>');
+                        })
+                   },
+                        "Position", "Company", "Country",
+                   {
+                        name: 'Actions',
+                        width: '120px',
+                        formatter: (function (cell) {
+                             return gridjs.html("<a href='#' class='text-reset text-decoration-underline'>" + "Details" + "</a>");
+                        })
+                   },
+                   ],
+                   pagination: {
+                        limit: 5
+                   },
+                   sort: true,
+                   search: true,
+                   data: [
+                        ["11", "Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
+                        ["12", "Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
+                        ["13", "Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
+                        ["14", "David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
+                        ["15", "Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
+                        ["16", "Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
+                        ["17", "Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
+                        ["18", "Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
+                        ["19", "Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
+                        ["20", "Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
+                   ]
+              }).render(document.getElementById("table-gridjs"));
+
+
+
+         // pagination Table
+         if (document.getElementById("table-pagination"))
+              new Grid({
+                   columns: [{
+                        name: 'ID',
+                        width: '120px',
+                        formatter: (function (cell) {
+                             return gridjs.html('<a href="" class="fw-medium">' + cell + '</a>');
+                        })
+                   }, "Name", "Date", "Total",
+                   {
+                        name: 'Actions',
+                        width: '100px',
+                        formatter: (function (cell) {
+                             return gridjs.html("<button type='button' class='btn btn-sm btn-light'>" +
+                                  "Details" +
+                                  "</button>");
+                        })
+                   },
+                   ],
+                   pagination: {
+                        limit: 5
+                   },
+
+                   data: [
+                        ["#RB2320", "Alice", "07 Oct, 2024", "$24.05"],
+                        ["#RB8652", "Bob", "07 Oct, 2024", "$26.15"],
+                        ["#RB8520", "Charlie", "06 Oct, 2024", "$21.25"],
+                        ["#RB9512", "David", "05 Oct, 2024", "$25.03"],
+                        ["#RB7532", "Eve", "05 Oct, 2024", "$22.61"],
+                        ["#RB9632", "Frank", "04 Oct, 2024", "$24.05"],
+                        ["#RB7456", "Grace", "04 Oct, 2024", "$26.15"],
+                        ["#RB3002", "Hannah", "04 Oct, 2024", "$21.25"],
+                        ["#RB9857", "Ian", "03 Oct, 2024", "$22.61"],
+                        ["#RB2589", "Jane", "03 Oct, 2024", "$25.03"],
+                   ]
+              }).render(document.getElementById("table-pagination"));
+
+         // search Table
+         if (document.getElementById("table-search"))
+              new Grid({
+                   columns: ["Name", "Email", "Position", "Company", "Country"],
+                   pagination: {
+                        limit: 5
+                   },
+                   search: true,
+                   data: [
+                        ["Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
+                        ["Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
+                        ["Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
+                        ["David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
+                        ["Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
+                        ["Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
+                        ["Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
+                        ["Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
+                        ["Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
+                        ["Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
+                   ]
+              }).render(document.getElementById("table-search"));
+
+         // Sorting Table
+         if (document.getElementById("table-sorting"))
+              new Grid({
+                   columns: ["Name", "Email", "Position", "Company", "Country"],
+                   pagination: {
+                        limit: 5
+                   },
+                   sort: true,
+                   data: [
+                        ["Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
+                        ["Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
+                        ["Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
+                        ["David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
+                        ["Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
+                        ["Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
+                        ["Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
+                        ["Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
+                        ["Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
+                        ["Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
+                   ]
+              }).render(document.getElementById("table-sorting"));
+
+
+         // Loading State Table
+         if (document.getElementById("table-loading-state"))
+              new Grid({
+                   columns: ["Name", "Email", "Position", "Company", "Country"],
+                   pagination: {
+                        limit: 5
+                   },
+                   sort: true,
+                   data: function () {
+                        return new Promise(function (resolve) {
+                             setTimeout(function () {
+                                  resolve([
+                                       ["Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
+                                       ["Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
+                                       ["Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
+                                       ["David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
+                                       ["Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
+                                       ["Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
+                                       ["Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
+                                       ["Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
+                                       ["Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
+                                       ["Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
+                                  ])
+                             }, 2000);
+                        });
+                   }
+              }).render(document.getElementById("table-loading-state"));
+
+
+         // Fixed Header
+         if (document.getElementById("table-fixed-header"))
+              new Grid({
+                   columns: ["Name", "Email", "Position", "Company", "Country"],
+                   sort: true,
+                   pagination: true,
+                   fixedHeader: true,
+                   height: '400px',
+                   data: [
+                        ["Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
+                        ["Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
+                        ["Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
+                        ["David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
+                        ["Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
+                        ["Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
+                        ["Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
+                        ["Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
+                        ["Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
+                        ["Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
+                   ]
+              }).render(document.getElementById("table-fixed-header"));
+
+
+         // Hidden Columns
+         if (document.getElementById("table-hidden-column"))
+              new Grid({
+                   columns: ["Name", "Email", "Position", "Company",
+                        {
+                             name: 'Country',
+                             hidden: true
+                        },
+                   ],
+                   pagination: {
+                        limit: 5
+                   },
+                   sort: true,
+                   data: [
+                        ["Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
+                        ["Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
+                        ["Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
+                        ["David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
+                        ["Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
+                        ["Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
+                        ["Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
+                        ["Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
+                        ["Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
+                        ["Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
+                   ]
+              }).render(document.getElementById("table-hidden-column"));
+
+
+    }
+
+}
+
+document.addEventListener('DOMContentLoaded', function (e) {
+    new GridDatatable().init();
+});

resources/scss/components/_accordion.scss

@@ -0,0 +1,3 @@
+//
+// accordions.scss
+//

resources/scss/components/_alerts.scss

@@ -0,0 +1,5 @@
+// alert.scss
+
+.alert-icon {
+    padding: $alert-padding-y * 0.5 $alert-padding-y * 0.5;
+}

resources/scss/components/_avatar.scss

@@ -0,0 +1,59 @@
+//
+// _avatar.scss
+//
+
+// avatar height
+.avatar-xs {
+    height: 1.5rem;
+    width: 1.5rem;
+}
+
+.avatar-sm {
+    height: 2.25rem;
+    width: 2.25rem;
+}
+
+.avatar {
+    height: 3rem;
+    width: 3rem;
+}
+
+.avatar-md {
+    height: 3.5rem;
+    width: 3.5rem;
+}
+
+.avatar-lg {
+    height: 4.5rem;
+    width: 4.5rem;
+}
+
+.avatar-xl {
+    height: 6rem;
+    width: 6rem;
+}
+
+.avatar-xxl {
+    height: 7.5rem;
+    width: 7.5rem;
+}
+
+.avatar-title {
+    align-items: center;
+    color: $white;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    justify-content: center;
+}
+
+.avatar-group {
+    padding-left: 12px;
+
+    .avatar-group-item {
+        margin: 0 0 0 -12px;
+        display: inline-block;
+        border: $border-width * 2 solid $border-color;
+        border-radius: 50%;
+    }
+}

resources/scss/components/_backgrounds.scss

@@ -0,0 +1,25 @@
+//
+// backgrounds.scss
+//
+
+@each $color, $value in $theme-colors-rgb {
+    .bg-soft-#{$color} {
+        --#{$prefix}bg-opacity: 0.25;
+        background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
+    }
+}
+
+.bg-ghost {
+    opacity: 0.4;
+}
+
+.bg-overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    opacity: 0.7;
+}

resources/scss/components/_badge.scss

@@ -0,0 +1,25 @@
+//
+// _badges.scss
+//
+
+
+
+// Soft badge
+@each $color, $value in $theme-colors-rgb {
+    .badge-soft-#{$color} {
+        --#{$prefix}badge-color: var(--#{$prefix}#{$color});
+        --#{$prefix}bg-opacity: 0.18;
+        background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
+        box-shadow: none;
+    }
+}
+
+// Outline Badge
+@each $color, $value in $theme-colors-rgb {
+    .badge-outline-#{$color} {
+        --#{$prefix}badge-color: var(--#{$prefix}#{$color});
+        border: 1px solid var(--#{$prefix}#{$color});
+        background-color: transparent;
+        box-shadow: none;
+    }
+}

resources/scss/components/_breadcrumb.scss

@@ -0,0 +1,25 @@
+//
+// breadcrumb.scss
+//
+
+// Breadcrumb item arrow
+.breadcrumb-item {
+    >a {
+        color: var(--#{$prefix}body-color);
+
+        &:hover {
+            color: $primary;
+        }
+    }
+
+    +.breadcrumb-item {
+        &::before {
+            font-family: "boxicons";
+            font-size: 1rem;
+        }
+    }
+
+    &.active {
+        color: $breadcrumb-active-color;
+    }
+}

resources/scss/components/_buttons.scss

@@ -0,0 +1,182 @@
+//
+// buttons.scss
+//
+
+.button-list {
+    margin-left: -8px;
+    margin-bottom: -8px;
+
+    .btn {
+        margin-bottom: 8px;
+        margin-left: 8px;
+    }
+}
+
+button:focus {
+    outline: none;
+}
+
+// Icon Button
+.btn {
+
+    i,
+    span {
+        vertical-align: middle;
+    }
+
+    &:focus {
+        box-shadow: none;
+    }
+
+    .icon {
+        svg {
+            width: 1rem;
+            height: 1rem;
+            margin-left: 0.1rem;
+            margin-top: -2px;
+        }
+    }
+}
+
+
+// Link buttons (Make a button look and behave like a link)
+.btn-link {
+    font-weight: $font-weight-normal;
+    color: $link-color;
+    background-color: transparent;
+
+    &:hover {
+        color: $link-hover-color;
+        text-decoration: $link-hover-decoration;
+        background-color: transparent;
+        border-color: transparent;
+    }
+
+    &:focus {
+        text-decoration: $link-hover-decoration;
+        border-color: transparent;
+        box-shadow: none;
+    }
+
+    &:disabled {
+        color: $btn-link-disabled-color;
+        pointer-events: none;
+    }
+
+}
+
+// Button Extra Small Size
+.btn-xs {
+    padding: 0.2rem 0.6rem;
+    font-size: 0.75rem;
+    border-radius: $border-radius-sm;
+}
+
+// Soft Variants
+@mixin button-variant-soft($bg) {
+    --#{$prefix}btn-color: #{$bg};
+    --#{$prefix}btn-bg: #{rgba($bg, 0.1)};
+    --#{$prefix}btn-border-color: #{transparent};
+    --#{$prefix}btn-hover-color: #{$white};
+    --#{$prefix}btn-hover-bg: #{$bg};
+    --#{$prefix}btn-hover-border-color: #{$bg};
+    --#{$prefix}btn-active-color: #{$white};
+    --#{$prefix}btn-active-bg: #{$bg};
+    --#{$prefix}btn-active-border-color: #{$bg};
+    --#{$prefix}btn-disabled-color: #{$white};
+    --#{$prefix}btn-disabled-bg: #{$bg};
+    --#{$prefix}btn-disabled-border-color: #{$bg};
+    --#{$prefix}btn-focus-shadow-rgb: 0 0 0 $btn-focus-width rgba($bg, 0.5);
+}
+
+
+// Button Soft
+@each $color,
+$value in $theme-colors {
+    .btn-soft-#{$color} {
+        @include button-variant-soft($value);
+    }
+}
+
+
+// Button Light and Dark
+.btn-light {
+    --#{$prefix}btn-color: var(--#{$prefix}dark);
+    --#{$prefix}btn-bg: var(--#{$prefix}light);
+    --#{$prefix}btn-border-color: var(--#{$prefix}light);
+    --#{$prefix}btn-hover-color: var(--#{$prefix}dark);
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}light);
+    --#{$prefix}btn-hover-border-color: var(--#{$prefix}light);
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}dark);
+    --#{$prefix}btn-disabled-bg: var(--#{$prefix}light);
+    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}light);
+}
+
+.btn-dark {
+    --#{$prefix}btn-color: var(--#{$prefix}light);
+    --#{$prefix}btn-bg: var(--#{$prefix}dark);
+    --#{$prefix}btn-border-color: var(--#{$prefix}dark);
+    --#{$prefix}btn-hover-color: var(--#{$prefix}light);
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}dark);
+    --#{$prefix}btn-hover-border-color: var(--#{$prefix}dark);
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}light);
+    --#{$prefix}btn-disabled-bg: var(--#{$prefix}dark);
+    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}dark);
+}
+
+.btn-outline-dark {
+    --#{$prefix}btn-color: var(--#{$prefix}dark);
+    --#{$prefix}btn-bg: transparent;
+    --#{$prefix}btn-border-color: var(--#{$prefix}dark);
+    --#{$prefix}btn-hover-color: var(--#{$prefix}light);
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}dark);
+    --#{$prefix}btn-hover-border-color: var(--#{$prefix}dark);
+    --#{$prefix}btn-active-color: var(--#{$prefix}light);
+    --#{$prefix}btn-active-bg: var(--#{$prefix}dark);
+    --#{$prefix}btn-active-border-color: var(--#{$prefix}dark);
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}light);
+    --#{$prefix}btn-disabled-bg: var(--#{$prefix}dark);
+    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}dark);
+}
+
+.btn-outline-light {
+    --#{$prefix}btn-color: var(--#{$prefix}dark);
+    --#{$prefix}btn-bg: transparent;
+    --#{$prefix}btn-border-color: var(--#{$prefix}light);
+    --#{$prefix}btn-hover-color: var(--#{$prefix}dark);
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}light);
+    --#{$prefix}btn-hover-border-color: var(--#{$prefix}light);
+    --#{$prefix}btn-active-color: var(--#{$prefix}dark);
+    --#{$prefix}btn-active-bg: var(--#{$prefix}light);
+    --#{$prefix}btn-active-border-color: var(--#{$prefix}light);
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}dark);
+    --#{$prefix}btn-disabled-bg: var(--#{$prefix}light);
+    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}light);
+}
+
+.btn-soft-dark {
+    --#{$prefix}btn-color: var(--#{$prefix}dark);
+    --#{$prefix}btn-bg: var(--#{$prefix}light);
+    --#{$prefix}btn-border-color: var(--#{$prefix}light);
+    --#{$prefix}btn-hover-color: var(--#{$prefix}light);
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}dark);
+    --#{$prefix}btn-hover-border-color: var(--#{$prefix}dark);
+    --#{$prefix}btn-active-color: var(--#{$prefix}light);
+    --#{$prefix}btn-active-bg: var(--#{$prefix}dark);
+    --#{$prefix}btn-active-border-color: var(--#{$prefix}dark);
+}
+
+// Dark Mode
+html[data-bs-theme="dark"] {
+    .btn-light {
+        --#{$prefix}btn-active-color: var(--#{$prefix}dark);
+        --#{$prefix}btn-active-bg: var(--#{$prefix}border-color);
+        --#{$prefix}btn-active-border-color: var(--#{$prefix}border-color);
+    }
+
+    .btn-dark {
+        --#{$prefix}btn-active-color: var(--#{$prefix}light);
+        --#{$prefix}btn-active-bg: var(--#{$prefix}tertiary-color);
+        --#{$prefix}btn-active-border-color: var(--#{$prefix}tertiary-color);
+    }
+}

resources/scss/components/_card.scss

@@ -0,0 +1,48 @@
+//
+// card.scss
+//
+
+.card {
+    margin-bottom: $spacer;
+    transition: all .35s;
+    box-shadow: $box-shadow;
+    // background-image: var(--bs-gradient);
+    border-style: double;
+    border-width: 3px;
+}
+
+.card-link+.card-link {
+    margin-left: $card-spacer-x;
+    margin-right: 0;
+}
+
+.card-drop {
+    font-size: $h4-font-size;
+    line-height: 0;
+    color: inherit;
+}
+
+.card-height-100 {
+    height: calc(100% - #{$spacer});
+}
+
+
+// Card title / Card Header
+.card-title,
+.card-header {
+    margin-top: 0;
+}
+
+.card-title {
+    font-size: 1rem;
+}
+
+.card-subtitle {
+    margin: 0;
+}
+
+.sub-header {
+    font-size: $font-size-base;
+    margin-bottom: $spacer;
+    color: $text-muted;
+}

resources/scss/components/_dropdown.scss

@@ -0,0 +1,131 @@
+//
+// dropdown.scss
+//
+
+.dropdown-toggle::after {
+    font-family: boxicons;
+    content: "\ea4a";
+    position: relative;
+    display: inline-flex;
+    top: 3px;
+    margin-left: 0.255em;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1;
+    text-rendering: auto;
+    text-transform: none;
+}
+
+.btn-sm {
+    &.dropdown-toggle::after {
+        top: 1px;
+    }
+}
+
+
+.arrow-none::after {
+    display: none;
+}
+
+.dropup {
+    .dropdown-toggle::after {
+        content: "\ea57";
+    }
+}
+
+.dropend {
+    .dropdown-toggle::after {
+        content: "\ea50";
+    }
+}
+
+.dropstart {
+    .dropdown-toggle::before {
+        content: "\ea4d";
+        font-family: boxicons;
+        position: relative;
+        top: 2px;
+        margin-right: 0.255em;
+    }
+
+    .dropdown-toggle::after {
+        display: none;
+    }
+}
+
+
+
+.dropdown-toggle-split {
+
+    &::after,
+    .dropup &::after,
+    .dropend &::after {
+        margin-left: 0;
+    }
+
+    .dropstart &::before {
+        margin-right: 0;
+    }
+}
+
+
+.dropdown-menu {
+    box-shadow: $box-shadow-lg;
+    animation-name: DropDownSlide;
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+    font-size: $font-size-base;
+    top: 100%;
+
+    &.show {
+        top: 100% !important;
+        margin-top: 2px !important;
+    }
+
+    i {
+        display: inline-block;
+    }
+}
+
+.dropdown-menu-end {
+    right: 0 !important;
+    left: auto !important;
+}
+
+.dropdown-menu[data-popper-placement^="right"],
+.dropdown-menu[data-popper-placement^="top"],
+.dropdown-menu[data-popper-placement^="left"] {
+    top: auto !important;
+    animation: none !important;
+}
+
+@keyframes DropDownSlide {
+    100% {
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+    }
+
+    0% {
+        -webkit-transform: translateY(-3px);
+        transform: translateY(-3px);
+    }
+}
+
+// Dropdown Large (Custom)
+
+@media (min-width: 600px) {
+    .dropdown-lg {
+        width: 320px;
+    }
+}
+
+// Dropdown size
+@include media-breakpoint-up(lg) {
+    .dropdown-mega-menu-xl {
+        width: 40rem;
+    }
+
+    .dropdown-mega-menu-lg {
+        width: 26rem;
+    }
+}

resources/scss/components/_forms.scss

@@ -0,0 +1,74 @@
+//
+// forms.scss
+//
+
+
+// Forms
+label {
+    font-weight: $font-weight-medium;
+}
+
+.form-check {
+
+    .form-check-input,
+    label {
+        cursor: pointer;
+
+    }
+}
+
+// Form elements (Color and Range)
+input.form-control[type="color"],
+input.form-control[type="range"] {
+    min-height: 39px;
+}
+
+
+// Search box
+.search-bar {
+    position: relative;
+
+    .form-control {
+        padding-left: 40px;
+        padding-right: 20px;
+    }
+
+    span {
+        position: absolute;
+        z-index: 10;
+        font-size: 16px;
+        top: 8px;
+        left: 13px;
+        color: $text-muted;
+    }
+}
+
+// checkbox
+.form-check-input {
+    margin-top: 0.125rem;
+
+    &:focus {
+        box-shadow: none;
+    }
+}
+
+// Color Checkbox and Radio
+@each $color,
+$value in $theme-colors {
+
+    .form-checkbox-#{$color},
+    .form-radio-#{$color} {
+        .form-check-input {
+            &:checked {
+                background-color: $value;
+                border-color: $value;
+            }
+        }
+    }
+}
+
+.form-todo {
+    input[type="checkbox"]:checked + label {
+        text-decoration: line-through;
+   }
+}

resources/scss/components/_helper.scss

@@ -0,0 +1,59 @@
+//
+// helper.scss
+//
+
+// Minimum width
+
+.width-xs {
+    min-width: 80px;
+}
+
+.width-sm {
+    min-width: 100px;
+}
+
+.width-md {
+    min-width: 120px;
+}
+
+.width-lg {
+    min-width: 140px;
+}
+
+.width-xl {
+    min-width: 160px;
+}
+
+
+// dashed line
+@each $color,
+$value in $theme-colors {
+    .border-dashed-#{$color} {
+        border-bottom: 1px dashed ($value);
+    }
+}
+
+// sticky bar
+.sticky-bar {
+    position: sticky;
+    z-index: 998;
+    top: calc(#{$topbar-height} + #{$spacer});
+}
+
+//
+.flex-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: auto;
+    width: auto;
+}
+
+// cursor
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.border-transparent {
+    --#{$prefix}border-color: transparent !important;
+}

resources/scss/components/_list-group.scss

@@ -0,0 +1,15 @@
+//
+// _list-group.scss
+//
+
+@each $color,
+$value in $theme-colors {
+    .list-group-item-#{$color} {
+        color: shade-color($value, 5%);
+        background-color: rgba($value, .15);
+
+        .alert-link {
+            color: shade-color($value, 20%);
+        }
+    }
+}

resources/scss/components/_modal.scss

@@ -0,0 +1,54 @@
+//
+// modal.scss
+//
+
+// Title text within header
+.modal-title {
+    margin-top: 0;
+}
+
+// Modal full width
+.modal-full-width {
+    width: 95%;
+    max-width: none;
+}
+
+// Modal Positions
+.modal-top {
+    margin: 0 auto;
+}
+
+
+// Bottom modal
+.modal-bottom {
+    display: flex;
+    flex-flow: column nowrap;
+    -ms-flex-pack: end;
+    justify-content: flex-end;
+    height: 100%;
+    margin: 0 auto;
+    align-content: center;
+}
+
+// Colored modal header
+.modal-colored-header {
+    color: $white;
+    border-radius: 0;
+
+    .close {
+        color: $white !important;
+    }
+}
+
+// Full filled modals
+.modal-filled {
+    color: $white;
+
+    .modal-header {
+        background-color: rgba($white, 0.07);
+    }
+
+    .btn-close {
+        color: $white !important;
+    }
+}

resources/scss/components/_nav.scss

@@ -0,0 +1,75 @@
+//
+// nav.scss
+//
+
+.nav-link {
+    &.active {
+        color: $primary;
+    }
+}
+
+.nav-tabs {
+
+    .nav-item {
+        margin-bottom: -2px;
+    }
+
+    li {
+        a {
+            border-color: transparent !important;
+            // padding: 0.375rem 1rem;
+        }
+
+        a.active {
+            border-bottom: $border-width solid $primary !important;
+            margin-bottom: 1px;
+        }
+    }
+}
+
+// pills
+.nav-tabs,
+.nav-pills {
+    >li {
+        >a {
+            font-weight: $font-weight-semibold;
+        }
+    }
+}
+
+.nav-pills {
+    background: var(--#{$prefix}tertiary-bg);
+    border-radius: $border-radius-sm;
+
+    .nav-link {
+        background-color: transparent;
+        color: var(--#{$prefix}link-color);
+    }
+
+    .nav-link.active,
+    .show>.nav-link {
+        color: $white;
+        background-color: $primary;
+        box-shadow: $box-shadow-sm;
+    }
+}
+
+.tab-content {
+    padding: 20px 0 0 0;
+}
+
+
+.icon-wizard {
+    .nav-item {
+        .nav-link {
+            padding: 11px 14px !important;
+            box-shadow: none;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 3px;
+            border-radius: var(--#{$prefix}border-radius) !important;
+        }
+    }
+}

resources/scss/components/_pagination.scss

@@ -0,0 +1,18 @@
+//
+// pagination.scss
+//
+.page-link {
+    i {
+        vertical-align: middle;
+    }
+}
+
+// Pagination rounded (Custom)
+.pagination-rounded {
+    .page-link {
+        border-radius: 3px !important;
+        margin: 0 3px;
+        border: none;
+        display: inline;
+    }
+}

resources/scss/components/_popover.scss

@@ -0,0 +1,22 @@
+//
+// popover.scss
+//
+.popover {
+    box-shadow: $box-shadow-lg;
+}
+
+.popover-header {
+    margin-top: 0;
+}
+
+@each $color,
+$value in $theme-colors {
+    .#{$color}-popover {
+        --#{$prefix}popover-max-width: 200px !important;
+        --#{$prefix}popover-border-color: var(--#{$prefix}#{$color}) !important;
+        --#{$prefix}popover-header-bg: var(--#{$prefix}#{$color}) !important;
+        --#{$prefix}popover-header-color: var(--#{$prefix}white) !important;
+        --#{$prefix}popover-body-padding-x: 1rem !important;
+        --#{$prefix}popover-body-padding-y: .5rem !important;
+    }
+}

resources/scss/components/_print.scss

@@ -0,0 +1,24 @@
+//
+// print.scss
+//
+
+// Used invoice page
+@media print {
+
+    .topbar,
+    .app-sidebar,
+    .footer,
+    .page-title-box {
+        display: none;
+    }
+
+    .card,
+    .card-body,
+    .page-content,
+    body {
+        padding: 0;
+        border: none;
+        box-shadow: none;
+        margin: 0 !important;
+    }
+}

resources/scss/components/_progress.scss

@@ -0,0 +1,29 @@
+//
+// progress.scss
+//
+
+// Custom height
+
+.progress-xs {
+    height: 1px;
+}
+
+// Progress height small
+.progress-sm {
+    height: 5px;
+}
+
+// Progress height medium
+.progress-md {
+    height: 8px;
+}
+
+// Progress height large
+.progress-lg {
+    height: 12px;
+}
+
+// Progress height extra large
+.progress-xl {
+    height: 15px;
+}

resources/scss/components/_reboot.scss

@@ -0,0 +1,30 @@
+//
+// _reboot.scss
+//
+ 
+body {
+    overflow-x: hidden;
+}
+
+.row>* {
+    position: relative;
+}
+
+.scroll-hidden {
+    &::-webkit-scrollbar {
+        -webkit-appearance: none;
+        appearance: none;
+    }
+
+    &::-webkit-scrollbar:vertical {
+        width: 0px;
+    }
+}
+
+
+// Iconify
+iconify-icon {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+}

resources/scss/components/_switch.scss

@@ -0,0 +1,98 @@
+//
+// switch.scss
+//
+
+input[data-switch] {
+    display: none;
+
+    +label {
+        width: 56px;
+        height: 24px;
+        background-color: var(--#{$prefix}border-color);
+        background-image: none;
+        border-radius: 2rem;
+        cursor: pointer;
+        display: inline-block;
+        text-align: center;
+        position: relative;
+        transition: all 0.1s ease-in-out;
+
+        &::before {
+            color: var(--#{$prefix}dark);
+            content: attr(data-off-label);
+            display: block;
+            font-family: inherit;
+            font-weight: $font-weight-semibold;
+            font-size: 0.75rem;
+            line-height: 24px;
+            position: absolute;
+            right: 3px;
+            margin: 0 0.21667rem;
+            top: 0;
+            text-align: center;
+            min-width: 1.66667rem;
+            overflow: hidden;
+            transition: all 0.1s ease-in-out;
+        }
+
+        &::after {
+            content: "";
+            position: absolute;
+            left: 4px;
+            background-color: var(--#{$prefix}link-color);
+            box-shadow: none;
+            border-radius: 2rem;
+            height: 18px;
+            width: 18px;
+            top: 3px;
+            transition: all 0.1s ease-in-out;
+        }
+    }
+
+    &:checked {
+        +label {
+            background-color: $primary;
+
+            &::before {
+                color: $white;
+                content: attr(data-on-label);
+                right: auto;
+                left: 4px;
+            }
+
+            &::after {
+                left: 34px;
+                background-color: var(--#{$prefix}tertiary-bg);
+            }
+        }
+    }
+}
+
+input[data-switch="bool"] {
+    +label {
+        background-color: $danger;
+    }
+}
+
+input:disabled {
+    +label {
+        opacity: 0.5;
+        cursor: default;
+    }
+}
+
+input[data-switch="bool"]+label:before,
+input[data-switch="bool"]:checked+label:before {
+    color: $white  !important;
+}
+
+input[data-switch="bool"]+label:after {
+    background-color: var(--#{$prefix}tertiary-bg);
+}
+
+@each $color,
+$value in $theme-colors {
+    input[data-switch="#{$color}"]:checked+label {
+        background-color: #{$value};
+    }
+}

resources/scss/components/_tables.scss

@@ -0,0 +1,64 @@
+//
+// tables.scss
+//
+
+
+th {
+    font-weight: $font-weight-medium;
+}
+
+// Table centered
+.table-centered {
+
+    td,
+    th {
+        vertical-align: middle !important;
+    }
+}
+
+// Table
+.table-nowrap {
+
+    th,
+    td {
+        white-space: nowrap;
+    }
+}
+
+// Custom table components 
+.table {
+    tbody tr:last-child td {
+        border-bottom: 0px;
+    }
+
+    &.table-dashed>:not(caption)>*>* {
+        border-style: dashed;
+    }
+
+    .table-user {
+        img {
+            height: 30px;
+            width: 30px;
+        }
+    }
+
+    .action-icon {
+        color: var(--#{$prefix}body-color);
+        font-size: 1.2rem;
+        display: inline-block;
+        padding: 0 3px;
+
+        &:hover {
+            color: var(--#{$prefix}tertiary-color);
+        }
+    }
+}
+
+
+html[data-bs-theme="dark"] {
+    .table-light {
+        --#{$prefix}table-color: var(--#{$prefix}body-color);
+        --#{$prefix}table-bg: var(--#{$prefix}light);
+        --#{$prefix}table-border-color: #{$table-group-separator-color};
+    }
+}

resources/scss/components/_tooltip.scss

@@ -0,0 +1,10 @@
+//
+// tooltip.scss
+//
+
+@each $color,
+$value in $theme-colors {
+    .#{$color}-tooltip {
+        --#{$prefix}tooltip-bg: var(--#{$prefix}#{$color}) !important;
+    }
+}

resources/scss/components/_type.scss

@@ -0,0 +1,22 @@
+//
+// type.scss
+//
+
+// Font sizes (Custom)
+
+$font-size-mixing: 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 48,60;
+
+@each $font-size-mixing in $font-size-mixing {
+    .fs-#{$font-size-mixing} {
+        font-size: #{$font-size-mixing}px !important;
+    }
+}
+
+// text utilities
+.text-unline-dashed {
+    border-bottom: $border-width dashed $border-color !important;
+}
+
+.text-dark {
+    color: var(--#{$prefix}headings-color) !important;
+}

resources/scss/components/_widgets.scss

@@ -0,0 +1,201 @@
+//
+// widgets.scss
+//
+
+.widget-icon {
+    font-size: 5rem;
+    position: absolute;
+    right: -25px;
+    bottom: -15px;
+    opacity: 0.2;
+    animation: bounce 7s ease infinite;
+}
+
+@keyframes bounce {
+	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
+	40% {transform: translateY(-10px);}
+	60% {transform: translateY(-5px);}
+}
+
+// milestones
+
+.milestones {
+    position: relative;
+    padding-left: 25px;
+
+    &::after {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: $primary;
+        position: absolute;
+        top: 2px;
+        left: 0;
+        content: "";
+    }
+
+    &::before {
+        height: 75px;
+        width: 2px;
+        position: absolute;
+        top: 15px;
+        bottom: 5px;
+        left: 4px;
+        right: 0;
+        background: var(--#{$prefix}border-color);
+        content: "";
+    }
+
+    &:last-child {
+        &::before {
+            height: 28px;
+        }
+    }
+}
+
+//  chat
+
+.conversation-list {
+    list-style: none;
+    height: 332px;
+    padding: 0 7px;
+
+    li {
+        margin-bottom: 24px;
+    }
+
+    .chat-avatar {
+        float: left;
+        text-align: center;
+        width: 38px;
+
+        img {
+            border-radius: 100%;
+            width: 100%;
+        }
+
+        i {
+            font-size: 12px;
+            font-style: normal;
+        }
+    }
+
+    .ctext-wrap {
+        background: var(--#{$prefix}light);
+        color: $primary;
+        border-radius: $border-radius-sm;
+        display: inline-block;
+        padding: 4px 12px;
+        position: relative;
+        // min-width: 160px;
+
+        i {
+            display: block;
+            font-size: 12px;
+            font-style: normal;
+            font-weight: $font-weight-bold;
+            position: relative;
+        }
+
+        p {
+            margin: 0;
+            padding-top: 3px;
+        }
+    }
+
+    .conversation-text {
+        float: left;
+        font-size: 12px;
+        margin-left: 12px;
+        width: 70%;
+    }
+
+    .odd {
+        .chat-avatar {
+            float: right !important;
+        }
+
+        .conversation-text {
+            float: right !important;
+            margin-right: 12px;
+            text-align: right;
+            width: 70% !important;
+        }
+
+        .ctext-wrap {
+            background-color: $primary;
+            color: $white;
+        }
+    }
+}
+
+// project activity
+.activity {
+    .activity-list {
+        display: flex;
+        position: relative;
+
+        &::before {
+            position: absolute;
+            text-align: center;
+            content: "\F4FE";
+            font-family: "bootstrap-icons";
+            font-size: 22px;
+            color: $white;
+            left: 56px;
+            top: -6px;
+            z-index: 1;
+        }
+
+        &::after {
+            content: "";
+            position: absolute;
+            left: 57px;
+            top: 0;
+            height: 20px;
+            width: 20px;
+            background: $primary;
+            border-radius: 50%;
+        }
+    }
+}
+
+// project activity
+.activity-widget {
+    .activity-list {
+        border-bottom: $border-width solid $border-color;
+        padding: 10px 0px;
+
+        &:last-child {
+            border: none;
+        }
+    }
+}
+
+// chart card
+.chart-card {
+    .left-chart-card {
+        padding-right: $spacer;
+        border-right: $border-width solid $border-color;
+    }
+
+    .right-chart-card {
+        padding-left: $spacer;
+    }
+}
+
+@include media-breakpoint-down(lg) {
+    .chart-card {
+        .left-chart-card {
+            padding-right: $spacer * 0.5;
+            padding-bottom: $spacer;
+            border-right: 0;
+            border-bottom: $border-width solid $border-color;
+        }
+
+        .right-chart-card {
+            padding-left: $spacer * 0.5;
+            padding-top: $spacer;
+        }
+    }
+}

resources/scss/config/_theme-mode.scss

@@ -0,0 +1,121 @@
+// 
+// _theme-mode.scss
+// 
+
+
+
+/* Root Prefix Variable */
+:root {
+    --#{$prefix}logo-lg-height:                26px;
+    --#{$prefix}logo-sm-height:                24px;
+
+    --#{$prefix}sidebar-width:               250px;
+    --#{$prefix}sidebar-width-sm:             75px; 
+    --#{$prefix}sidebar-item-icon-size:       18px;
+    --#{$prefix}sidebar-item-font-size:       15px;
+    --#{$prefix}sidebar-item-padding-x:       15px;
+    --#{$prefix}sidebar-item-padding-y:       10px;
+    --#{$prefix}sidebar-item-margin-y:       2px;
+
+    --#{$prefix}topbar-height:                 70px;
+    --#{$prefix}footer-height:                 60px;
+    
+    --#{$prefix}input-border-color:             #d8dfe7;
+    --#{$prefix}input-focus-border-color:       #b0b0bb;
+}
+
+
+/* Dark Mode only */
+html[data-bs-theme="dark"],
+[data-bs-theme="dark"] {
+
+    --#{$prefix}border-color: #2f3944;
+
+    --#{$prefix}light: #{$body-tertiary-bg-dark};
+    --#{$prefix}dark: #{$body-tertiary-color-dark};
+
+    --#{$prefix}light-rgb: #{to-rgb($body-tertiary-bg-dark)};
+    --#{$prefix}dark-rgb: #{to-rgb($body-tertiary-color-dark)};
+
+    // Heading Variable
+    --#{$prefix}headings-color: #{$body-color-dark};
+
+    --#{$prefix}input-border-color: #3a4551;
+    --#{$prefix}input-focus-border-color: #4a5663;
+}
+
+
+/* Color system - Dark Mode only */
+html[data-bs-theme="dark"],
+[data-bs-theme="dark"] {
+
+    --#{$prefix}border-color:                   #272f37;
+
+    --#{$prefix}light:                           #{$body-tertiary-bg-dark};
+    --#{$prefix}dark:                            #{$body-tertiary-color-dark};
+    
+    --#{$prefix}light-rgb:                       #{to-rgb($body-tertiary-bg-dark)};
+    --#{$prefix}dark-rgb:                        #{to-rgb($body-tertiary-color-dark)};
+
+    // Heading Variable
+    --#{$prefix}headings-color:                  #{$body-color-dark};
+
+    --#{$prefix}input-border-color:             #3a4551;
+    --#{$prefix}input-focus-border-color:       #4a5663;
+}
+
+
+/* Main sidebar Light */
+html[data-sidebar-color="light"]{
+    --#{$prefix}sidebar-bg:                               #ffffff;
+    --#{$prefix}sidebar-item-color:                       #6e708c;
+    --#{$prefix}sidebar-item-hover-bg:                    #f4f3f6;
+    --#{$prefix}sidebar-item-hover-color:                 #3d4756;
+    --#{$prefix}sidebar-border-color:                     #eaedf1;
+}
+
+
+/* Main sidebar Dark */
+html[data-sidebar-color="dark"] {
+    --#{$prefix}sidebar-bg:                               #393f4a;
+    --#{$prefix}sidebar-item-color:                       #afb9cf;
+    --#{$prefix}sidebar-item-hover-bg:                    #4697ce;
+    --#{$prefix}sidebar-item-hover-color:                 #{$white};
+    --#{$prefix}sidebar-border-color:                     #272f37;
+}
+
+
+/* Main sidebar Dark (Dark Mode Only) */
+html[data-bs-theme="dark"][data-sidebar-color="dark"],
+html[data-bs-theme="dark"][data-sidebar-color="light"] {
+    --#{$prefix}sidebar-bg:                               #1d2329;
+    --#{$prefix}sidebar-item-color:                       #afb9cf;
+    --#{$prefix}sidebar-item-hover-bg:                    #2a3139;
+    --#{$prefix}sidebar-item-hover-color:                 #{$white};
+    --#{$prefix}sidebar-border-color:                     #272f37;
+}
+
+
+/* Topbar Light */
+html[data-topbar-color="light"] {
+    --#{$prefix}topbar-bg:                                 #ffffff;
+    --#{$prefix}topbar-item-color:                         #707793;
+    --#{$prefix}topbar-search-bg:                          #f8f7fa;
+}
+
+
+/* Topbar Dark */
+html[data-topbar-color="dark"] {
+    --#{$prefix}topbar-bg:                                 #393f4a;
+    --#{$prefix}topbar-item-color:                         #afb9cf;
+    --#{$prefix}topbar-search-bg:                          #424957;
+}
+
+
+/* Topbar Dark (Dark Mode Only) */
+html[data-bs-theme="dark"][data-topbar-color="dark"], 
+html[data-bs-theme="dark"][data-topbar-color="light"] {
+    --#{$prefix}topbar-bg:                                 #1d2329;
+    --#{$prefix}topbar-item-color:                         #afb9cf;
+    --#{$prefix}topbar-search-bg:                          #232a31;
+}

resources/scss/config/_variables-dark.scss

@@ -0,0 +1,91 @@
+// Dark color mode variables
+//
+// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
+
+//
+// Global Colors
+//
+
+// scss-docs-start sass-dark-mode-vars
+$primary-text-emphasis-dark:                 tint-color($primary, 40%);
+$secondary-text-emphasis-dark:               tint-color($secondary, 40%);
+$success-text-emphasis-dark:                 tint-color($success, 40%);
+$info-text-emphasis-dark:                    tint-color($info, 40%);
+$warning-text-emphasis-dark:                 tint-color($warning, 40%);
+$danger-text-emphasis-dark:                  tint-color($danger, 40%);
+$light-text-emphasis-dark:                   $gray-100;
+$dark-text-emphasis-dark:                    $gray-300;
+// scss-docs-end theme-text-dark-variables
+
+// scss-docs-start theme-bg-subtle-dark-variables
+$primary-bg-subtle-dark:            rgba($primary, 15%);
+$secondary-bg-subtle-dark:          rgba($gray-700, 15%);
+$success-bg-subtle-dark:            rgba($success, 15%);
+$info-bg-subtle-dark:               rgba($info, 15%);
+$warning-bg-subtle-dark:            rgba($warning, 15%);
+$danger-bg-subtle-dark:             rgba($danger, 15%);
+$light-bg-subtle-dark:              rgba(var(--#{$prefix}light-rgb), .15);
+$dark-bg-subtle-dark:               rgba(var(--#{$prefix}dark-rgb), .15);
+// scss-docs-end theme-bg-subtle-dark-variables
+
+// scss-docs-start theme-border-subtle-dark-variables
+$primary-border-subtle-dark:        shade-color($primary, 40%);
+$secondary-border-subtle-dark:      $gray-700;
+$success-border-subtle-dark:        shade-color($success, 40%);
+$info-border-subtle-dark:           shade-color($info, 40%);
+$warning-border-subtle-dark:        shade-color($warning, 40%);
+$danger-border-subtle-dark:         shade-color($danger, 40%);
+$light-border-subtle-dark:          $gray-700;
+$dark-border-subtle-dark:           $gray-500;
+// scss-docs-end theme-border-subtle-dark-variables
+
+$body-color-dark:                   #aab8c5;
+$body-bg-dark:                      #191e23;
+
+$body-secondary-color-dark:         #8391a2;
+$body-secondary-bg-dark:            #1d2329;
+
+$body-tertiary-color-dark:          #f1f1f1;
+$body-tertiary-bg-dark:             #242b33;
+
+$body-emphasis-color-dark:          #dee2e6;
+
+$border-color-dark:                 #272f37;
+$border-color-translucent-dark:     #8391a2;
+
+$headings-color-dark:               $body-color-dark;
+$link-color-dark:                   #afb9cf;
+$link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage);
+$code-color-dark:                   tint-color($code-color, 40%);
+$mark-color-dark:                   $body-color-dark;
+$mark-bg-dark:                      $yellow-800;
+
+
+//
+// Forms
+//
+
+$form-select-indicator-color-dark:  $body-color-dark;
+$form-select-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
+
+$form-switch-color-dark:            rgba($white, .25);
+$form-switch-bg-image-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>");
+
+// scss-docs-start form-validation-colors-dark
+$form-valid-color-dark:             $green-300;
+$form-valid-border-color-dark:      $green-300;
+$form-invalid-color-dark:           $red-300;
+$form-invalid-border-color-dark:    $red-300;
+// scss-docs-end form-validation-colors-dark
+
+
+//
+// Accordion
+//
+
+$accordion-icon-color-dark:         $primary-text-emphasis-dark;
+$accordion-icon-active-color-dark:  $primary-text-emphasis-dark;
+
+$accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
+$accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
+// scss-docs-end sass-dark-mode-vars

resources/scss/icons.scss

@@ -0,0 +1,6 @@
+//
+// icons.scss
+//
+
+// Icon files
+@import "icons/boxicons";

resources/scss/pages/_authentication.scss

@@ -0,0 +1,55 @@
+//
+// authentication.scss
+//
+
+body {
+     &.authentication-bg {
+          background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+          background-size: 400% 400%;
+          animation: gradient 15s ease infinite;
+
+          .account-pages {
+               align-items: center;
+               display: flex;
+               min-height: 100vh;
+          }
+     }
+}
+
+@keyframes gradient {
+     0% {
+          background-position: 0% 50%;
+     }
+
+     50% {
+          background-position: 100% 50%;
+     }
+
+     100% {
+          background-position: 0% 50%;
+     }
+}
+
+
+
+.auth-logo {
+     .logo-dark {
+          display: block;
+     }
+
+     .logo-light {
+          display: none;
+     }
+}
+
+html[data-bs-theme="dark"] {
+     .auth-logo {
+          .logo-dark {
+               display: none;
+          }
+
+          .logo-light {
+               display: block;
+          }
+     }
+}

resources/scss/pages/_icon-demo.scss

@@ -0,0 +1,7 @@
+
+
+.icon-box {
+    // height: 100px;
+    width: 142px;
+    margin-bottom: 0 !important;
+}

resources/scss/plugins/_apexcharts.scss

@@ -0,0 +1,204 @@
+//
+// apexcharts.scss
+//
+
+.apex-charts {
+    min-height: 10px !important;
+
+    text {
+        font-family: $font-family-base !important;
+        font-weight: $font-weight-medium;
+        fill: $headings-color;
+    }
+
+    .apexcharts-canvas {
+        margin: 0 auto;
+    }
+
+    .apexcharts-title-text {
+        fill: $headings-color;
+    }
+}
+
+
+.apexcharts-bar-series {
+    path {
+        stroke: $border-color;
+    }
+}
+
+.apexcharts-xaxis-tick {
+    fill: $border-color;
+}
+
+.apexcharts-gridline {
+    pointer-events: none;
+    stroke: var(--#{$prefix}light);
+}
+
+.apexcharts-legend-text {
+    color: $text-muted !important;
+}
+
+
+
+.apexcharts-grid-row {
+    fill: $input-bg;
+}
+
+
+.apexcharts-pie-area {
+    stroke: $border-color;
+}
+
+.apexcharts-tracks {
+    .apexcharts-radialbar-track {
+        path {
+            stroke: var(--#{$prefix}light);
+        }
+    }
+}
+
+.apexcharts-tooltip-title,
+.apexcharts-tooltip-text {
+    font-family: $font-family-base !important;
+}
+
+.apexcharts-tooltip {
+    border: 1px solid var(--#{$prefix}border-color) !important;
+    background-color: $card-bg !important;
+    box-shadow: $box-shadow !important;
+
+    * {
+        font-family: $font-family-base !important;
+        color: var(--#{$prefix}body-color) !important;
+    }
+
+    .apexcharts-tooltip-title {
+        background-color: rgba(var(--#{$prefix}light-rgb), .75) !important;
+        border-bottom: 1px solid var(--#{$prefix}border-color) !important;
+    }
+}
+
+.apexcharts-tooltip.apexcharts-theme-dark {
+    * {
+        color: $white !important;
+    }
+}
+
+.apexcharts-legend-series {
+    font-weight: $font-weight-medium;
+}
+
+.apexcharts-gridline {
+    pointer-events: none;
+    stroke: rgba(var(--#{$prefix}light-rgb), .75);
+}
+
+.apexcharts-legend-text {
+    color: var(--#{$prefix}body-color) !important;
+    font-family: $font-family-base !important;
+    font-size: 13px !important;
+}
+
+.apexcharts-pie-label {
+    fill: $white !important;
+}
+
+.apexcharts-title-text,
+.apexcharts-subtitle-text {
+    fill: var(--#{$prefix}link-color);
+    font-family: $font-family-base !important;
+}
+
+.apexcharts-yaxis,
+.apexcharts-xaxis {
+    text {
+        font-family: $font-family-base !important;
+        fill: var(--#{$prefix}link-color);
+    }
+}
+
+.apexcharts-yaxis-title {
+    font-weight: 500;
+}
+
+// column dynamic loaded chart
+
+#dynamicloadedchart-wrap {
+    margin: 0px auto;
+    max-width: 800px;
+    position: relative;
+}
+
+.chart-box {
+    padding-left: 0;
+}
+
+#chart-year,
+#chart-quarter {
+    width: 96%;
+    max-width: 48%;
+    box-shadow: none;
+    padding-left: 0;
+    padding-top: 20px;
+    background: $card-bg;
+    border: 1px solid $border-color;
+}
+
+#chart-year {
+    float: left;
+    position: relative;
+    transition: 1s ease transform;
+    z-index: 3;
+
+    &.chart-quarter-activated {
+        transform: translateX(0);
+        transition: 1s ease transform;
+    }
+}
+
+#chart-quarter {
+    float: left;
+    position: relative;
+    z-index: -2;
+    transition: 1s ease transform;
+
+    &.active {
+        transition: 1.1s ease-in-out transform;
+        transform: translateX(0);
+        z-index: 1;
+    }
+}
+
+@media screen and (min-width: 480px) {
+    #chart-year {
+        transform: translateX(50%);
+    }
+
+    #chart-quarter {
+        transform: translateX(-50%);
+    }
+}
+
+// radar chart
+
+.apexcharts-radar-series {
+
+    polygon,
+    line {
+        stroke: $border-color;
+    }
+}
+
+.apexcharts-pie {
+
+    circle,
+    line {
+        stroke: $border-color;
+    }
+
+    text {
+        fill: var(--#{$prefix}body-color);
+    }
+}

resources/scss/plugins/_dropzone.scss

@@ -0,0 +1,23 @@
+// 
+// dropzone.scss
+// 
+
+.dropzone {
+     border: 2px dashed $input-border-color;
+     background: $input-bg;
+     border-radius: 6px;
+     cursor: pointer;
+     min-height: 150px;
+     padding: 20px;
+
+     .dz-message {
+          text-align: center;
+          margin: 2rem 0;
+     }
+
+     &.dz-started {
+          .dz-message {
+               display: none;
+          }
+     }
+}

resources/scss/plugins/_editors.scss

@@ -0,0 +1,95 @@
+// 
+// editors.scss
+// 
+
+.ql-editor {
+     text-align: left;
+
+     ol,
+     ul {
+          padding-left: 1.5em;
+          padding-right: 0;
+     }
+
+     li:not(.ql-direction-rtl)::before {
+          margin-left: -1.5em;
+          margin-right: 0.3em;
+          text-align: right;
+     }
+}
+
+.ql-container {
+     font-family: $font-family-base;
+
+     &.ql-snow {
+          border-color: $input-border-color;
+          border-radius: 0 0 $input-border-radius $input-border-radius;
+     }
+}
+
+.ql-bubble {
+     border: $input-border-width solid $input-border-color;
+     border-radius: $input-border-radius;
+}
+
+.ql-toolbar {
+     font-family: $font-family-base  !important;
+
+     span {
+          outline: none !important;
+          color: $dropdown-link-color;
+
+          &:hover {
+               color: $primary !important;
+          }
+     }
+
+     &.ql-snow {
+          border-radius: $input-border-radius $input-border-radius 0 0;
+          border-color: $input-border-color;
+
+          .ql-picker.ql-expanded {
+               .ql-picker-label {
+                    border-color: transparent;
+               }
+          }
+
+          .ql-picker-options {
+               box-shadow: $dropdown-box-shadow;
+               border-radius: $dropdown-border-radius;
+          }
+     }
+}
+
+.ql-snow {
+
+     .ql-stroke,
+     .ql-script,
+     .ql-strike svg {
+          stroke: $dropdown-link-color;
+     }
+
+     .ql-fill {
+          fill: $dropdown-link-color;
+     }
+
+     .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) {
+          svg {
+               right: 0;
+               left: auto;
+          }
+     }
+
+     .ql-picker {
+          &.ql-expanded .ql-picker-label {
+               color: $dropdown-link-color;
+          }
+     }
+}
+
+.ql-snow {
+     .ql-picker-options {
+          background-color: $card-bg;
+          border-color: $dropdown-border-color  !important;
+     }
+}

resources/scss/plugins/_flatpicker.scss

@@ -0,0 +1,149 @@
+//
+// flatpickr.scss
+//
+
+.flatpickr-calendar {
+    background: $card-bg;
+    box-shadow: $box-shadow;
+    border: 1px solid $dropdown-border-color;
+
+    &.arrowTop {
+        &:before {
+            border-bottom-color: $card-bg;
+        }
+
+        &:after {
+            border-bottom-color: $card-bg;
+        }
+    }
+
+    &.arrowBottom {
+
+        &:before,
+        &:after {
+            border-top-color: $card-bg;
+        }
+    }
+}
+
+.flatpickr-current-month {
+    font-size: 110%;
+}
+
+.flatpickr-day {
+
+    &.selected,
+    &.startRange,
+    &.endRange,
+    &.selected.inRange,
+    &.startRange.inRange,
+    &.endRange.inRange,
+    &.selected:focus,
+    &.startRange:focus,
+    &.endRange:focus,
+    &.selected:hover,
+    &.startRange:hover,
+    &.endRange:hover,
+    &.selected.prevMonthDay,
+    &.startRange.prevMonthDay,
+    &.endRange.prevMonthDay,
+    &.selected.nextMonthDay,
+    &.startRange.nextMonthDay,
+    &.endRange.nextMonthDay {
+        background: $primary;
+        border-color: $primary;
+    }
+
+    &.selected.startRange+.endRange:not(:nth-child(7n+1)),
+    &.startRange.startRange+.endRange:not(:nth-child(7n+1)),
+    &.endRange.startRange+.endRange:not(:nth-child(7n+1)) {
+        box-shadow: -10px 0 0 $primary;
+    }
+}
+
+.flatpickr-time {
+
+    input:hover,
+    .flatpickr-am-pm:hover,
+    input:focus,
+    .flatpickr-am-pm:focus {
+        background: $input-bg;
+        color: $dropdown-link-active-color;
+    }
+}
+
+.flatpickr-months {
+    .flatpickr-month {
+        height: 36px;
+    }
+
+    .flatpickr-prev-month,
+    .flatpickr-next-month,
+    .flatpickr-month {
+        color: var(--#{$prefix}link-color);
+        fill: var(--#{$prefix}link-color);
+    }
+}
+
+.flatpickr-weekdays {
+    background-color: $dropdown-link-active-bg;
+}
+
+span.flatpickr-weekday,
+.flatpickr-day,
+.flatpickr-current-month input.cur-year[disabled],
+.flatpickr-current-month input.cur-year[disabled]:hover,
+.flatpickr-time input,
+.flatpickr-time .flatpickr-time-separator,
+.flatpickr-time .flatpickr-am-pm {
+    color: $dropdown-link-color;
+    fill: $dropdown-link-color;
+}
+
+.flatpickr-day {
+
+    &.disabled,
+    &.disabled:hover,
+    &.prevMonthDay,
+    &.nextMonthDay,
+    &.notAllowed,
+    &.notAllowed.prevMonthDay,
+    &.notAllowed.nextMonthDay {
+        color: $dropdown-link-disabled-color;
+    }
+
+    &.inRange,
+    &.prevMonthDay.inRange,
+    &.nextMonthDay.inRange,
+    &.today.inRange,
+    &.prevMonthDay.today.inRange,
+    &.nextMonthDay.today.inRange,
+    &:hover,
+    &.prevMonthDay:hover,
+    &.nextMonthDay:hover,
+    &:focus,
+    &.prevMonthDay:focus,
+    &.nextMonthDay:focus {
+        background: $dropdown-link-hover-bg;
+        border-color: $dropdown-link-hover-bg;
+    }
+}
+
+.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time, .flatpickr-calendar.hasTime .flatpickr-time {
+    border-top: 1px solid $card-bg;
+}
+
+.numInputWrapper:hover,
+.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
+    background-color: transparent;
+    color: $dropdown-link-active-color;
+}
+
+.flatpickr-day.inRange {
+    box-shadow: -5px 0 0 $dropdown-link-hover-bg, 5px 0 0 $dropdown-link-hover-bg;
+}
+
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover {
+    color: $dropdown-link-disabled-color;
+}

resources/scss/plugins/_google-map.scss

@@ -0,0 +1,11 @@
+// 
+// google-map.scss
+// 
+
+
+.gmaps,
+.gmaps-panaroma {
+  height: 300px;
+  background: $gray-100;
+  border-radius: 3px;
+}

resources/scss/plugins/_gridjs.scss

@@ -0,0 +1,277 @@
+// 
+// _gridjs.scss
+// 
+
+.gridjs-container {
+    color: var(--#{$prefix}body-color);
+    padding: 0;
+    display: block;
+}
+
+.gridjs-wrapper {
+    box-shadow: none;
+    border: 1px solid var(--#{$prefix}border-color);
+    border-radius: 0px;
+
+
+    &::-webkit-scrollbar {
+        -webkit-appearance: none;
+    }
+
+    &::-webkit-scrollbar:vertical {
+        width: 5px;
+        padding: 5px;
+    }
+
+    &::-webkit-scrollbar:horizontal {
+        height: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: rgba(var(--#{$prefix}dark-rgb), .075);
+        border-radius: 10px;
+        padding: 5px;
+        border: none;
+    }
+
+    &::-webkit-scrollbar-track {
+        border-radius: 10px;
+        background-color: transparent;
+    }
+}
+
+.gridjs-footer {
+    border: none !important;
+    padding: 12px 0 0;
+}
+
+.gridjs-table {
+    width: 100%;
+    table-layout: auto !important;
+}
+
+.gridjs-tbody,
+td.gridjs-td {
+    background-color: $table-bg;
+}
+
+th.gridjs-th {
+    border: 1px solid var(--#{$prefix}border-color);
+    padding: $table-cell-padding-y * 0.5 $table-cell-padding-x;
+}
+
+td.gridjs-td {
+    border: 1px solid var(--#{$prefix}border-color);
+    padding: $table-cell-padding-y $table-cell-padding-x;
+}
+
+th {
+    &.gridjs-th {
+        border-top: 0;
+        color: var(--#{$prefix}body-color);
+        background-color: rgba(var(--#{$prefix}light-rgb), .75);
+
+    }
+
+    &.gridjs-th-sort {
+
+        &:focus,
+        &:hover {
+            background-color: rgba(var(--#{$prefix}light-rgb), .85);
+        }
+    }
+}
+
+.gridjs-head {
+    padding-top: 0;
+}
+
+.gridjs-footer {
+    box-shadow: none;
+    border: 1px solid var(--#{$prefix}border-color);
+    border-top: 0;
+    background-color: $table-bg;
+}
+
+.gridjs-summary {
+    color: $text-muted;
+    margin-top: 8px !important;
+}
+
+.gridjs-pagination {
+
+    .gridjs-pages button {
+        background-color: transparent;
+        color: var(--#{$prefix}link-color);
+        border: $border-width solid var(--#{$prefix}border-color);
+        border-right: none;
+        outline: none;
+        padding: $pagination-padding-y $pagination-padding-x;
+        user-select: none;
+
+        &:last-child {
+            border-right: 1px solid var(--#{$prefix}border-color);
+        }
+
+        &:disabled,
+        &:hover:disabled,
+        &[disabled] {
+            color: var(--#{$prefix}body-color);
+            background-color: $card-bg;
+        }
+
+        &:hover {
+            background-color: $card-bg;
+            color: var(--#{$prefix}link-hover-color);
+        }
+
+        &:focus {
+            box-shadow: none;
+        }
+
+        &:last-child,
+        &:first-child {
+            &:hover {
+                background-color: transparent;
+            }
+        }
+
+        &.gridjs-currentPage {
+            background-color: $component-active-bg;
+            color: $component-active-color;
+            border-color: $component-active-bg;
+            font-weight: $font-weight-medium;
+        }
+    }
+}
+
+.gridjs-search {
+    position: relative;
+    float: left;
+
+    &::before {
+        content: "\ebf7";
+        font-family: "boxicons";
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 10px;
+        font-size: 18px;
+        color: $text-muted;
+    }
+}
+
+input.gridjs-input {
+    border-color: $input-border-color;
+    background-color: $input-bg;
+    color: $input-color;
+    line-height: $input-line-height;
+    padding: $input-padding-y $input-padding-x $input-padding-y $input-padding-x * 2.5;
+    border-radius: $input-border-radius;
+    @include font-size($input-font-size);
+
+    &:focus {
+        box-shadow: none;
+        border-color: $input-focus-border-color;
+        background-color: $input-focus-bg;
+    }
+
+    &::placeholder {
+        color: $input-placeholder-color;
+    }
+}
+
+th.gridjs-th {
+    .gridjs-th-content {
+        float: none;
+        display: inline-block;
+        vertical-align: middle;
+        font-weight: $font-weight-semibold;
+    }
+}
+
+button.gridjs-sort {
+    float: none;
+    display: inline-block;
+    vertical-align: middle;
+    width: 10px;
+    height: 20px;
+}
+
+th.gridjs-th-sort .gridjs-th-content {
+    width: calc(100% - 10px);
+}
+
+button {
+
+    &.gridjs-sort-asc,
+    &.gridjs-sort-desc {
+        background-size: 7px;
+    }
+}
+
+
+// gridjs selection
+.gridjs-tr-selected {
+    td {
+        background-color: $table-active-bg;
+    }
+
+    .gridjs-td .gridjs-checkbox[type=checkbox] {
+        background-color: $form-check-input-checked-bg-color;
+        border-color: $form-check-input-checked-border-color;
+
+        @if $enable-gradients {
+            background-image: escape-svg($form-check-input-checked-bg-image),
+            var(--#{$prefix}gradient);
+        }
+
+        @else {
+            background-image: escape-svg($form-check-input-checked-bg-image);
+        }
+    }
+}
+
+.gridjs-td {
+    .gridjs-checkbox {
+        width: $form-check-input-width;
+        height: $form-check-input-width;
+        vertical-align: top;
+        background-color: $form-check-input-bg;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: contain;
+        border: $form-check-input-border;
+        appearance: none;
+        // color-adjust: exact; // Keep themed appearance for print
+        @include transition($form-check-transition);
+
+        &[type="checkbox"] {
+            @include border-radius($form-check-input-border-radius);
+        }
+    }
+}
+
+.gridjs-border-none {
+
+    td.gridjs-td,
+    th.gridjs-th {
+        border-right-width: 0;
+        border-left-width: 0;
+    }
+}
+
+.gridjs-loading-bar {
+    background-color: $card-bg;
+}
+
+[data-bs-theme="dark"] {
+    button {
+
+        &.gridjs-sort-neutral,
+        &.gridjs-sort-asc,
+        &.gridjs-sort-desc {
+            filter: $btn-close-white-filter;
+        }
+    }
+}

resources/scss/plugins/_simplebar.scss

@@ -0,0 +1,247 @@
+// 
+// simplebar.scss
+// 
+
+[data-simplebar] {
+    position: relative;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    align-items: flex-start;
+}
+
+.simplebar-wrapper {
+    overflow: hidden;
+    width: inherit;
+    height: inherit;
+    max-width: inherit;
+    max-height: inherit;
+}
+
+.simplebar-mask {
+    direction: inherit;
+    position: absolute;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: auto !important;
+    height: auto !important;
+    z-index: 0;
+}
+
+.simplebar-offset {
+    direction: inherit !important;
+    box-sizing: inherit !important;
+    resize: none !important;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    padding: 0;
+    margin: 0;
+    -webkit-overflow-scrolling: touch;
+}
+
+.simplebar-content-wrapper {
+    direction: inherit;
+    box-sizing: border-box !important;
+    position: relative;
+    display: block;
+    height: 100%;
+    /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
+    width: auto;
+    visibility: visible;
+    overflow: auto;
+    /* Scroll on this element otherwise element can't have a padding applied properly */
+    max-width: 100%;
+    /* Not required for horizontal scroll to trigger */
+    max-height: 100%;
+    /* Needed for vertical scroll to trigger */
+    scrollbar-width: none;
+}
+
+.simplebar-content-wrapper::-webkit-scrollbar,
+.simplebar-hide-scrollbar::-webkit-scrollbar {
+    display: none;
+}
+
+.simplebar-content:before,
+.simplebar-content:after {
+    content: ' ';
+    display: table;
+}
+
+.simplebar-placeholder {
+    max-height: 100%;
+    max-width: 100%;
+    width: 100%;
+    pointer-events: none;
+}
+
+.simplebar-height-auto-observer-wrapper {
+    box-sizing: inherit !important;
+    height: 100%;
+    width: 100%;
+    max-width: 1px;
+    position: relative;
+    float: left;
+    max-height: 1px;
+    overflow: hidden;
+    z-index: -1;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+    flex-grow: inherit;
+    flex-shrink: 0;
+    flex-basis: 0;
+}
+
+.simplebar-height-auto-observer {
+    box-sizing: inherit;
+    display: block;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 1000%;
+    width: 1000%;
+    min-height: 1px;
+    min-width: 1px;
+    overflow: hidden;
+    pointer-events: none;
+    z-index: -1;
+}
+
+.simplebar-track {
+    z-index: 1;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    overflow: hidden;
+}
+
+[data-simplebar].simplebar-dragging .simplebar-content {
+    pointer-events: none;
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+[data-simplebar].simplebar-dragging .simplebar-track {
+    pointer-events: all;
+}
+
+.simplebar-scrollbar {
+    position: absolute;
+    right: 2px;
+    width: 5px;
+    min-height: 10px;
+}
+
+.simplebar-scrollbar:before {
+    position: absolute;
+    content: '';
+    background: #a2adb7;
+    border-radius: 7px;
+    left: 0;
+    right: 0;
+    opacity: 0;
+    transition: opacity 0.2s linear;
+}
+
+[data-bs-theme="dark"] {
+    .simplebar-scrollbar:before {
+        background: #4c5b69;
+    }
+}
+
+.simplebar-scrollbar.simplebar-visible:before {
+    /* When hovered, remove all transitions from drag handle */
+    opacity: 0.5;
+    transition: opacity 0s linear;
+}
+
+.simplebar-track.simplebar-vertical {
+    top: 0;
+    width: 11px;
+}
+
+.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
+    top: 2px;
+    bottom: 2px;
+}
+
+.simplebar-track.simplebar-horizontal {
+    left: 0;
+    height: 11px;
+}
+
+.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
+    height: 100%;
+    left: 2px;
+    right: 2px;
+}
+
+.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
+    right: auto;
+    left: 0;
+    top: 2px;
+    height: 7px;
+    min-height: 0;
+    min-width: 10px;
+    width: auto;
+}
+
+/* Rtl support */
+[data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {
+    right: auto;
+    left: 0;
+}
+
+.hs-dummy-scrollbar-size {
+    direction: rtl;
+    position: fixed;
+    opacity: 0;
+    visibility: hidden;
+    height: 500px;
+    width: 500px;
+    overflow-y: hidden;
+    overflow-x: scroll;
+}
+
+.simplebar-hide-scrollbar {
+    position: fixed;
+    left: 0;
+    visibility: hidden;
+    overflow-y: scroll;
+    scrollbar-width: none;
+}
+
+.custom-scroll {
+    height: 100%;
+}
+
+// Scroll Size
+[data-simplebar-lg] {
+    .simplebar-scrollbar {
+        right: 1px;
+        width: 10px;
+    }
+}
+
+@each $color,
+$value in $theme-colors {
+    [data-simplebar-#{$color}] {
+        .simplebar-scrollbar {
+            &:before {
+                background: $value;
+            }
+        }
+    }
+}

resources/scss/plugins/_vector-map.scss

@@ -0,0 +1,144 @@
+// 
+// vector-map.scss
+// 
+
+svg {
+     touch-action: none;
+}
+
+.jvm-marker {
+     font-family: $font-family-base;
+     font-size: $font-size-sm;
+     font-weight: 400;
+     fill: var(--#{$prefix}body-color);
+}
+
+image,
+text,
+.jvm-zoomin,
+.jvm-zoomout {
+     user-select: none;
+}
+
+.jvm-container {
+     touch-action: none;
+     position: relative;
+     overflow: hidden;
+     height: 100%;
+     width: 100%;
+}
+
+.jvm-tooltip {
+     border-radius: $tooltip-border-radius;
+     background-color: $tooltip-bg;
+     font-family: $font-family-sans-serif;
+     font-size: $tooltip-font-size;
+     box-shadow: none;
+     padding: $tooltip-padding-y $tooltip-padding-x;
+     white-space: nowrap;
+     position: absolute;
+     display: none;
+     color: $tooltip-color;
+}
+
+.jvm-zoom-btn {
+     border-radius: $btn-border-radius;
+     background-color: $secondary;
+     border-color: $black;
+     color: $white;
+     font-size: $font-size-base;
+     font-weight: $btn-font-weight;
+     padding: $btn-padding-y-sm $btn-padding-x-sm;
+     box-sizing: border-box;
+     position: absolute;
+     line-height: $btn-line-height;
+     cursor: pointer;
+     left: 0;
+
+     &.jvm-zoomout {
+          top: 55px;
+     }
+
+     &.jvm-zoomin {
+          top: 10px;
+     }
+}
+
+.jvm-series-container {
+     right: 15px;
+     position: absolute;
+
+     &.jvm-series-h {
+          bottom: 15px;
+     }
+
+     &.jvm-series-v {
+          top: 15px;
+     }
+
+     .jvm-legend {
+          background-color: #fff;
+          border: $border-width solid $border-color;
+          margin-left: .75rem;
+          border-radius: $border-radius;
+          border-color: $border-color;
+          padding: .6rem;
+          box-shadow: none;
+          float: left;
+
+          .jvm-legend-title {
+               line-height: 1;
+               border-bottom: $border-width solid $border-color;
+               padding-bottom: .5rem;
+               margin-bottom: .575rem;
+               text-align: left;
+          }
+
+          .jvm-legend-inner {
+               overflow: hidden;
+
+               .jvm-legend-tick {
+                    overflow: hidden;
+                    min-width: 40px;
+
+                    &:not(:first-child) {
+                         margin-top: .575rem;
+                    }
+
+                    .jvm-legend-tick-sample {
+                         border-radius: 4px;
+                         margin-right: .65rem;
+                         height: 16px;
+                         width: 16px;
+                         float: left;
+                    }
+
+                    .jvm-legend-tick-text {
+                         font-size: 12px;
+                         text-align: center;
+                         float: left;
+                    }
+               }
+          }
+     }
+}
+
+.jvectormap-label {
+     border: none;
+     background: var(--#{$prefix}dark);
+     color: var(--#{$prefix}dark);
+     font-family: $font-family-sans-serif;
+     font-size: $font-size-base;
+     padding: 5px 8px;
+}
+
+.jvm-line[animation="true"] {
+     animation: jvm-line-animation 10s linear forwards infinite;
+}
+
+
+@keyframes jvm-line-animation {
+     from {
+          stroke-dashoffset: 250;
+     }
+}

resources/scss/structure/_footer.scss

@@ -0,0 +1,35 @@
+//
+// _footer.scss
+//
+
+.footer {
+    bottom: 0;
+    right: 0;
+    left: 0;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    padding: 0 calc(#{$spacer} * 0.5);
+    color: $footer-color;
+    height: $footer-height;
+    border-top: $card-border-width solid $card-border-color;
+}
+
+.footer-text {
+    background: linear-gradient(to right, $primary 10%, $warning 50%, $success 60%);
+    background-size: auto auto;
+    background-clip: border-box;
+    background-size: 200% auto;
+    background-clip: text;
+    text-fill-color: transparent;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: textclip 2.5s linear infinite;
+    display: inline-block;
+}
+
+@keyframes textclip {
+    to {
+        background-position: 200% center;
+    }
+}

resources/scss/structure/_general.scss

@@ -0,0 +1,130 @@
+//
+// _general.scss
+//
+
+.app-wrapper {
+     height: 100%;
+     margin: 0 auto;
+     position: relative;
+}
+
+// Main Content
+.page-content {
+     position: relative;
+     transition: all 0.3s ease-in-out;
+     min-height: calc(100vh - $topbar-height);
+     padding: calc($spacer * 1) calc($spacer * 0.5) $footer-height calc($spacer * 0.5);
+     margin-left: $sidebar-width;
+}
+
+
+// Animated Star
+$shooting-time: 3000ms;
+
+.animated-stars {
+     position: relative;
+     width: 100%;
+     height: 100%;
+     transform: rotateZ(45deg);
+}
+
+.shooting-star {
+     position: absolute;
+     left: 50%;
+     top: 50%;
+     height: 2px;
+     background: linear-gradient(-45deg, rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
+     border-radius: 999px;
+     filter: drop-shadow(0 0 6px rgba(105, 155, 255, 1));
+     animation:
+          tail $shooting-time ease-in-out infinite,
+          shooting $shooting-time ease-in-out infinite;
+
+     &::before {
+          content: '';
+          position: absolute;
+          top: calc(50% - 1px);
+          right: 0;
+          height: 2px;
+          background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
+          transform: translateX(50%) rotateZ(45deg);
+          border-radius: 100%;
+          animation: shining $shooting-time ease-in-out infinite;
+     }
+
+     &::after {
+          content: '';
+          position: absolute;
+          top: calc(50% - 1px);
+          right: 0;
+          height: 2px;
+          background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
+          transform: translateX(50%) rotateZ(45deg);
+          border-radius: 100%;
+          animation: shining $shooting-time ease-in-out infinite;
+          transform: translateX(50%) rotateZ(-45deg);
+     }
+
+     @for $i from 1 through 20 {
+          &:nth-child(#{$i}) {
+               $delay: random(9999) + 0ms;
+               top: calc(50% - #{random(400) - 200px});
+               left: calc(50% - #{random(300) + 0px});
+               animation-delay: $delay;
+               // opacity: random(50) / 100 + 0.5;
+
+               &::before,
+               &::after {
+                    animation-delay: $delay;
+               }
+          }
+     }
+}
+
+@keyframes tail {
+     0% {
+          width: 0;
+     }
+
+     30% {
+          width: 100px;
+     }
+
+     100% {
+          width: 0;
+     }
+}
+
+@keyframes shining {
+     0% {
+          width: 0;
+     }
+
+     50% {
+          width: 30px;
+     }
+
+     100% {
+          width: 0;
+     }
+}
+
+@keyframes shooting {
+     0% {
+          transform: translateX(0);
+     }
+
+     100% {
+          transform: translateX(300px);
+     }
+}
+
+@keyframes sky {
+     0% {
+          transform: rotate(45deg);
+     }
+
+     100% {
+          transform: rotate(45 + 360deg);
+     }
+}

resources/scss/structure/_page-title.scss

@@ -0,0 +1,13 @@
+//
+// Page-title
+//
+
+.page-title-box {
+    padding-bottom: $spacer;
+    background-color: transparent;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    gap: $spacer * 0.5;
+}

resources/scss/structure/_sidebar.scss

@@ -0,0 +1,582 @@
+//
+// _vertical.scss
+//
+
+// Logo
+.logo-box {
+     position: sticky;
+     overflow: hidden;
+     text-align: center;
+     white-space: nowrap;
+     transition: all 0.3s ease-in-out;
+     line-height: $topbar-height;
+     padding: 0 calc($sidebar-width-sm * 0.5 - $logo-sm-height * 0.5);
+
+     .logo-sm {
+          display: none;
+          height: $logo-sm-height;
+     }
+
+     .logo-lg {
+          height: $logo-lg-height;
+     }
+
+     .logo-light {
+          display: none;
+     }
+
+     .logo-dark {
+          display: block;
+     }
+}
+
+
+// Main Nav
+.app-sidebar {
+     top: 0;
+     bottom: 0;
+     z-index: 1010;
+     margin-left: 0;
+     position: fixed;
+     transition: all 0.3s ease-in-out;
+     width: $sidebar-width;
+     font-family: $font-family-secondary;
+     background: $sidebar-bg;
+     // background-image: url("../images/bg-pattern.svg") no-repeat;
+     min-width: $sidebar-width;
+     padding-bottom: $spacer;
+     border-right: $card-border-width solid $sidebar-border-color;
+     border-left: $card-border-width solid $sidebar-border-color;
+
+     .scrollbar {
+          height: calc(100% - $topbar-height);
+     }
+
+     .menu-arrow {
+          &::after {
+               right: calc($sidebar-item-padding-x * 1.5);
+               display: flex;
+               content: "\ea4a";
+               font-family: boxicons;
+               margin-left: auto;
+               position: absolute;
+               transition: transform 0.2s;
+               color: inherit;
+               font-size: calc($sidebar-item-font-size * 1.25);
+               opacity: 0.6;
+          }
+
+          &[aria-expanded="true"] {
+               &::after {
+                    transform: rotate(-180deg);
+               }
+
+               &::before {
+                    opacity: 1;
+               }
+          }
+     }
+
+     .menu-title {
+          cursor: default;
+          font-size: 11px;
+          letter-spacing: 0.05em;
+          text-transform: uppercase;
+          color: $sidebar-item-color;
+          opacity: .6;
+          font-weight: $font-weight-semibold;
+          padding: $sidebar-item-padding-y calc($sidebar-item-padding-x * 1.25);
+          transition: all 0.3s ease-in-out;
+          height: 36px;
+     }
+
+     .navbar-nav {
+          margin: 0 15px;
+
+          .nav-item {
+               padding: calc($sidebar-item-padding-y * 0.1) 0;
+
+               .nav-link {
+                    display: flex;
+                    gap: 12px;
+                    line-height: 1;
+                    font-weight: 400;
+                    align-items: center;
+                    white-space: nowrap;
+                    transition: all 0.3s ease-in-out;
+                    border-radius: 8px;
+                    color: $sidebar-item-color;
+                    font-size: $sidebar-item-font-size;
+                    padding: $sidebar-item-padding-y $sidebar-item-padding-x;
+                    margin: $sidebar-item-margin-y 0;
+
+                    &.show,
+                    &:active,
+                    &.active,
+                    &:hover,
+                    &:focus {
+                         color: $sidebar-item-hover-color;
+                    }
+
+                    &.active {
+                         background-color: $sidebar-item-hover-bg;
+                         font-weight: $font-weight-medium;
+                    }
+
+                    .nav-icon {
+                         display: flex;
+                         align-items: center;
+                         justify-content: center;
+                         font-size: $sidebar-item-icon-size;
+                    }
+
+                    .badge {
+                         margin-left: auto;
+                    }
+               }
+          }
+
+          .sub-navbar-nav {
+               flex-direction: column;
+               padding-left: $sidebar-item-padding-x;
+
+               .menu-arrow {
+                    &::after {
+                         right: 0;
+                    }
+               }
+
+               .sub-nav-item {
+                    padding: calc($sidebar-item-padding-y * 0.5) $sidebar-item-padding-x;
+
+                    .sub-nav-link {
+                         display: flex;
+                         align-items: center;
+                         position: relative;
+                         white-space: nowrap;
+                         transition: all 0.3s ease-in-out;
+                         color: $sidebar-item-color;
+                         font-size: calc($sidebar-item-font-size * 0.95);
+                         padding: calc($sidebar-item-padding-y * 0.25) $sidebar-item-padding-x;
+
+                         &.active {
+                              font-weight: $font-weight-medium;
+                         }
+
+                         .badge {
+                              margin-left: auto;
+                         }
+
+                         &.active,
+                         &:active,
+                         &:hover,
+                         &:focus {
+                              color: $sidebar-item-hover-color;
+
+                              &::before {
+                                   background-color: $sidebar-item-hover-color;
+                                   opacity: 1;
+                              }
+                         }
+
+                    }
+               }
+
+               .sub-navbar-nav {
+                    padding-left: calc($sidebar-width-sm - $sidebar-item-padding-x * 5.25);
+               }
+          }
+
+          .disabled {
+               opacity: 0.5;
+               pointer-events: none;
+               cursor: default;
+          }
+     }
+}
+
+// Sidenav Condensed
+html[data-sidebar-size="condensed"] {
+
+     .app-sidebar {
+          position: absolute;
+          width: $sidebar-width-sm;
+          min-width: $sidebar-width-sm;
+
+          .logo-box {
+               top: 0;
+               z-index: 1020 !important;
+               background: $sidebar-bg;
+
+               .logo-lg {
+                    display: none;
+               }
+
+               .logo-sm {
+                    display: inline-block;
+               }
+
+          }
+
+          .menu-title {
+               height: 0;
+               opacity: 0;
+               padding: 0;
+          }
+
+          .badge {
+               display: none;
+          }
+
+          .simplebar-mask,
+          .simplebar-content-wrapper {
+               overflow: visible !important;
+          }
+
+          .simplebar-scrollbar {
+               display: none !important;
+          }
+
+          .simplebar-offset {
+               bottom: 0 !important;
+          }
+
+          // Sidenav Menu
+          .navbar-nav {
+               padding: 10px;
+               margin: 0;
+
+               .nav-link {
+                    justify-content: center;
+
+                    .nav-text,
+                    &.menu-arrow::after {
+                         display: none;
+                    }
+
+                    .nav-icon {
+                         font-size: 22px !important;
+                    }
+               }
+
+               .collapse,
+               .collapsing {
+                    display: none;
+                    height: auto !important;
+               }
+
+               .sub-nav-item,
+               .nav-item {
+                    position: relative;
+                    white-space: nowrap;
+
+                    &:hover {
+
+                         >.collapse,
+                         >.collapsing {
+                              display: block;
+                              left: 100%;
+                              margin-top: -4px;
+                              position: absolute;
+                              height: inherit !important;
+                              transition: none !important;
+
+                              >.sub-navbar-nav {
+                                   padding-left: 0;
+                                   background: $dropdown-bg;
+                                   box-shadow: var(--#{$prefix}box-shadow);
+                                   width: calc($sidebar-width - $sidebar-width-sm);
+                                   border: $card-border-width solid $card-border-color;
+
+                                   >.sub-nav-item {
+                                        padding: 0;
+
+                                        >.sub-nav-link {
+                                             padding: calc($sidebar-item-padding-y * 0.75) $sidebar-item-padding-x;
+                                             z-index: 5;
+
+                                             >.nav-text {
+                                                  display: block;
+                                             }
+                                        }
+
+                                        >.collapse,
+                                        >.collapsing {
+                                             top: 0;
+                                        }
+                                   }
+
+                                   .sub-nav-item {
+                                        .sub-nav-link {
+                                             color: $dropdown-color;
+
+                                             &[aria-expanded="true"],
+                                             &.active,
+                                             &.show,
+                                             &:focus,
+                                             &:hover {
+                                                  color: var(--#{$prefix}primary);
+                                             }
+                                        }
+
+                                        .collapse,
+                                        .collapsing {
+                                             top: 0;
+                                        }
+                                   }
+                              }
+                         }
+                    }
+               }
+
+               >.nav-item {
+
+                    &:hover {
+
+                         >.nav-link {
+
+                              &::before {
+                                   content: "";
+                                   inset: 0px;
+                                   position: absolute;
+                                   width: $sidebar-width;
+                              }
+
+                              >.nav-text {
+                                   display: flex;
+                                   align-items: center;
+                                   position: absolute;
+                                   left: calc($sidebar-width-sm - 2px - 20px);
+                                   background: $dropdown-bg;
+                                   color: $dropdown-color;
+                                   line-height: $sidebar-item-icon-size;
+                                   width: calc($sidebar-width - $sidebar-width-sm);
+                                   padding: $sidebar-item-padding-y $sidebar-item-padding-x;
+                                   border: $card-border-width solid $card-border-color;
+                                   box-shadow: var(--#{$prefix}box-shadow);
+                                   font-weight: $font-weight-medium;
+                              }
+                         }
+                    }
+
+                    .nav-text,
+                    .sub-navbar-nav {
+                         margin-left: 10px;
+
+                         .sub-navbar-nav {
+                              margin-left: 0;
+                         }
+                    }
+               }
+
+               .sub-nav-item {
+                    .menu-arrow {
+                         &::after {
+                              right: 10px;
+                              transform: rotate(-90deg);
+                         }
+                    }
+
+                    .nav-text {
+                         margin-left: 0;
+                    }
+
+                    .badge {
+                         display: block;
+                    }
+               }
+          }
+     }
+
+     .app-topbar {
+          padding-left: $sidebar-width-sm;
+     }
+
+     .page-content {
+          margin-left: $sidebar-width-sm;
+          min-height: 1300px;
+     }
+}
+
+// Sidebar sm hover Toggle Menu Button
+.button-sm-hover {
+     border: 0;
+     top: 17px;
+     z-index: 1;
+     right: 10px;
+     display: none;
+     text-align: end;
+     position: absolute;
+     border-radius: 50%;
+     background: transparent;
+     transition: all 0.2s ease-in-out;
+     color: $sidebar-item-color;
+     padding: 0;
+
+     .button-sm-hover-icon {
+          width: 35px;
+          height: 35px;
+          display: flex;
+          font-size: 22px;
+          border-radius: 50%;
+          align-items: center;
+          justify-content: center;
+     }
+
+     &.show,
+     &.active,
+     &:active,
+     &:hover,
+     &:focus {
+          color: $sidebar-item-hover-color;
+          background-color: $sidebar-item-hover-bg;
+     }
+}
+
+// Small Hover
+html[data-sidebar-size="sm-hover"] {
+
+     .app-topbar {
+          padding-left: $sidebar-width-sm;
+     }
+
+     .page-content {
+          margin-left: $sidebar-width-sm;
+          position: relative;
+     }
+
+     .button-toggle-menu {
+          display: none;
+     }
+
+     .app-sidebar:not(:hover) {
+          width: $sidebar-width-sm;
+          min-width: $sidebar-width-sm;
+
+          .logo-box {
+               .logo-lg {
+                    display: none;
+               }
+
+               .logo-sm {
+                    display: inline-block;
+               }
+          }
+
+          .nav-item {
+
+               .nav-link {
+                    justify-content: center;
+
+                    .nav-text,
+                    .badge {
+                         display: none;
+                    }
+
+                    &.menu-arrow {
+                         &::after {
+                              display: none;
+                         }
+                    }
+               }
+
+               .collapse,
+               .collapsing {
+                    display: none;
+               }
+          }
+
+          .menu-title {
+               transition: all 0.3s ease-in-out;
+               height: 0;
+               opacity: 0;
+               padding: 0;
+          }
+
+          .simplebar-track.simplebar-vertical {
+               visibility: hidden !important;
+          }
+     }
+
+     .app-sidebar {
+          width: $sidebar-width;
+          min-width: $sidebar-width;
+
+          .logo-box {
+               text-align: left;
+          }
+
+          &:hover {
+               .button-sm-hover {
+                    display: block;
+
+                    .button-sm-hover-icon {
+                         transform: rotateY(180deg);
+                         transition: all 0.3s ease-in-out;
+                    }
+               }
+
+          }
+
+          .simplebar-track.simplebar-horizontal {
+               visibility: hidden !important;
+          }
+     }
+}
+
+// Small Hover Active
+html[data-sidebar-size="sm-hover-active"] {
+     .button-toggle-menu {
+          display: none;
+     }
+
+     .app-sidebar {
+          .logo-box {
+               text-align: left;
+          }
+
+          .button-sm-hover {
+               display: block;
+
+               .button-sm-hover-icon {
+                    transform-style: preserve-3d;
+                    transition: all 0.3s ease-in-out;
+               }
+          }
+     }
+}
+
+// SideNav Hidden (Mobile View)
+html[data-sidebar-size="hidden"] {
+     .app-sidebar {
+          margin-left: calc($sidebar-width * -1);
+     }
+
+     .page-content {
+          margin-left: 0;
+     }
+
+     &.sidebar-enable {
+          .app-sidebar {
+               margin-left: 0;
+               z-index: 1055;
+          }
+     }
+}
+
+// Sidenav Dark and Brand
+html[data-bs-theme="dark"],
+html[data-sidebar-color="dark"],
+html[data-sidebar-color="brand"] {
+     .app-sidebar {
+          .logo-box {
+               .logo-light {
+                    display: block;
+               }
+
+               .logo-dark {
+                    display: none;
+               }
+          }
+     }
+}

resources/scss/structure/_topbar.scss

@@ -0,0 +1,159 @@
+// 
+// topbar.scss
+// 
+
+.app-topbar {
+     top: 0;
+     z-index: 1005;
+     position: sticky;
+     transition: all 0.3s ease-in-out;
+     height: $topbar-height;
+     background-color: $topbar-bg;
+     padding-left: $sidebar-width;
+     border-bottom: $card-border-width solid $card-border-color;
+
+     .navbar-header {
+          display: flex;
+          margin: 0 auto;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0 10px;
+     }
+
+     // Search
+     .app-search {
+
+          .form-control {
+               border: none;
+               padding-left: 40px;
+               padding-right: 15px;
+               background-color: $topbar-search-bg;
+               box-shadow: none;
+               height: 38px;
+               border-radius: 20px;
+          }
+
+          .search-widget-icon {
+               position: absolute;
+               z-index: 10;
+               font-size: 18px;
+               left: 11px;
+               top: 50%;
+               color: $gray-500;
+               transform: translateY(-50%);
+               cursor: pointer;
+          }
+
+          .search-widget-icon-close {
+               right: 7px;
+               left: auto !important;
+          }
+     }
+
+
+     .topbar-item {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: $topbar-height;
+
+          .topbar-button {
+               border: none;
+               border-radius: 50%;
+               background-color: $topbar-search-bg;
+               transition: all 0.3s ease-in-out;
+               color: $topbar-item-color;
+               padding: $btn-padding-y $btn-padding-y;
+               position: relative;
+
+               &.show,
+               &.active,
+               &:active,
+               &:hover {
+                    color: $primary;
+               }
+          }
+     }
+
+     .topbar-badge {
+          right: -7px;
+          top: 7px !important;
+     }
+}
+
+
+// fullscreen exit icon
+[data-toggle="fullscreen"] {
+     .fullscreen {
+          display: block;
+     }
+     
+     .quit-fullscreen {
+          display: none;
+     }
+}
+
+.fullscreen-enable {
+     .fullscreen {
+          display: none;
+     }
+     
+     .quit-fullscreen {
+          display: block;
+     }
+}
+
+
+// Dark Mode Icon
+.app-topbar {
+     #light-dark-mode {
+          .light-mode {
+               display: block;
+          }
+
+          .dark-mode {
+               display: none;
+          }
+     }
+}
+
+[data-bs-theme="dark"] {
+     .app-topbar {
+          #light-dark-mode {
+               .light-mode {
+                    display: none;
+               }
+     
+               .dark-mode {
+                    display: block;
+               }
+          }
+     }
+}
+
+
+html[data-sidebar-size="hidden"] {
+     .app-topbar {
+          padding: 0 $spacer * 0.5;
+     }
+}
+
+
+// @include media-breakpoint-down(md) {
+@media (max-width: 375px) {
+     .app-topbar {
+          padding: 0 0.5 * $spacer !important;
+     }
+}
+
+@media (max-width: 600px) {
+     .app-topbar {
+          .dropdown {
+               position: static;
+
+               .dropdown-menu {
+                    width: 100%;
+               }
+          }
+     }
+}

resources/scss/style.scss

@@ -0,0 +1,61 @@
+//
+// app.scss
+//
+
+// Core files
+@import "./node_modules/bootstrap/scss/functions";
+@import "./node_modules/bootstrap/scss/variables";
+
+@import "config/variables";
+@import "config/variables-dark";
+@import "config/theme-mode";
+
+@import "./node_modules/bootstrap/scss/bootstrap";
+
+// Structure
+@import "structure/general";
+@import "structure/topbar";
+@import "structure/sidebar";
+@import "structure/footer";
+@import "structure/page-title";
+
+// Bootstrap
+@import "components/accordion";
+@import "components/alerts";
+@import "components/avatar";
+@import "components/backgrounds";
+@import "components/badge";
+@import "components/breadcrumb";
+@import "components/buttons";
+@import "components/card";
+@import "components/dropdown";
+@import "components/forms";
+@import "components/helper";
+@import "components/list-group";
+@import "components/modal";
+@import "components/nav";
+@import "components/pagination";
+@import "components/popover";
+@import "components/print";
+@import "components/progress";
+@import "components/reboot";
+@import "components/switch";
+@import "components/tables";
+@import "components/type";
+@import "components/tooltip";
+@import "components/widgets";
+
+
+// Plugin
+@import "plugins/simplebar";
+@import "plugins/dropzone";
+@import "plugins/editors";
+@import "plugins/gridjs";
+@import "plugins/apexcharts";
+@import "plugins/google-map";
+@import "plugins/vector-map";
+@import "plugins/flatpicker";
+
+// Pages
+@import "pages/icon-demo";
+@import "pages/authentication";

resources/views/auth/lock-screen.blade.php

@@ -0,0 +1,56 @@
+@extends('layouts.base', ['subtitle' => 'Lock Screen'])
+
+@section('body-attribuet')
+class="authentication-bg"
+@endsection
+
+@section('content')
+
+<div class="account-pages py-5">
+     <div class="container">
+          <div class="row justify-content-center">
+               <div class="col-md-6 col-lg-5">
+                    <div class="card border-0 shadow-lg">
+                         <div class="card-body p-5">
+                              <div class="text-center">
+                                   <div class="mx-auto mb-4 text-center auth-logo">
+                                        <a href="{{ route('any', 'index') }}" class="logo-dark">
+                                             <img src="/images/logo-dark.png" height="32" alt="logo dark">
+                                        </a>
+
+                                        <a href="{{ route('any', 'index') }}" class="logo-light">
+                                             <img src="/images/logo-light.png" height="28" alt="logo light">
+                                        </a>
+                                   </div>
+                                   <h4 class="fw-bold text-dark mb-2">Hi ! Gaston</h3>
+                                        <p class="text-muted">Enter your password to access the admin.</p>
+                              </div>
+
+                              <form action="{{ route('any', 'index') }}" class="mt-4">
+                                   <div class="mb-3">
+                                        <label class="form-label" for="example-password">Password</label>
+                                        <input type="text" id="example-password" class="form-control"
+                                             placeholder="Enter your password">
+                                   </div>
+                                   <div class="mb-3">
+                                        <div class="form-check">
+                                             <input type="checkbox" class="form-check-input" id="checkbox-signin">
+                                             <label class="form-check-label" for="checkbox-signin">I accept Terms and Condition</label>
+                                        </div>
+                                   </div>
+
+                                   <div class="mb-1 text-center d-grid">
+                                        <button class="btn btn-dark btn-lg fw-medium" type="submit">Sign In</button>
+                                   </div>
+                              </form>
+                         </div>
+                    </div>
+                    <p class="text-center mt-4 text-white text-opacity-50">Not you? return
+                         <a href="{{ route ('second' , ['auth','signup']) }}" class="text-decoration-none text-white fw-bold">Sign Up</a>
+                    </p>
+               </div>
+          </div>
+     </div>
+</div>
+
+@endsection

resources/views/auth/password.blade.php

@@ -0,0 +1,49 @@
+@extends('layouts.base', ['subtitle' => 'Reset Password'])
+
+@section('body-attribuet')
+class="authentication-bg"
+@endsection
+
+@section('content')
+
+<div class="account-pages py-5">
+    <div class="container">
+        <div class="row justify-content-center">
+            <div class="col-md-6 col-lg-5">
+                <div class="card border-0 shadow-lg">
+                    <div class="card-body p-5">
+                        <div class="text-center">
+                            <div class="mx-auto mb-4 text-center auth-logo">
+                                <a href="{{ route('any', 'index') }}" class="logo-dark">
+                                    <img src="/images/logo-dark.png" height="32" alt="logo dark">
+                                </a>
+
+                                <a href="{{ route('any', 'index') }}" class="logo-light">
+                                    <img src="/images/logo-light.png" height="28" alt="logo light">
+                                </a>
+                            </div>
+                            <h4 class="fw-bold text-dark mb-2">Reset Password</h3>
+                                <p class="text-muted">Enter your email address and we'll send you an email
+                                    with instructions to reset your password.</p>
+                        </div>
+                        <form action="{{ route('any', 'index') }}" class="mt-4">
+                            <div class="mb-3">
+                                <label for="email" class="form-label">Email Address</label>
+                                <input type="email" class="form-control" id="email"
+                                    placeholder="Enter your email">
+                            </div>
+                            <div class="d-grid">
+                                <button class="btn btn-dark btn-lg fw-medium" type="submit">Reset
+                                    Password</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+                <p class="text-center mt-4 text-white text-opacity-50">Back to
+                    <a href="{{ route ('second' , ['auth','signin']) }}" class="text-decoration-none text-white fw-bold">Sign In</a>
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection

resources/views/auth/signin.blade.php

@@ -0,0 +1,66 @@
+@extends('layouts.base', ['subtitle' => 'Sign In'])
+
+@section('body-attribuet')
+class="authentication-bg"
+@endsection
+
+@section('content')
+<div class="account-pages py-5">
+    <div class="container">
+        <div class="row justify-content-center">
+            <div class="col-md-6 col-lg-5">
+                <div class="card border-0 shadow-lg">
+                    <div class="card-body p-5">
+                        <div class="text-center">
+                            <div class="mx-auto mb-4 text-center auth-logo">
+                                <a href="{{ route('any', 'index') }}" class="logo-dark">
+                                    <img src="/images/logo-dark.png" height="32" alt="logo dark">
+                                </a>
+
+                                <a href="{{ route('any', 'index') }}" class="logo-light">
+                                    <img src="/images/logo-light.png" height="28" alt="logo light">
+                                </a>
+                            </div>
+                            <h4 class="fw-bold text-dark mb-2">Welcome Back!</h3>
+                                <p class="text-muted">Sign in to your account to continue</p>
+                        </div>
+                        <form method="POST" action="{{ route('login') }}" class="mt-4">
+
+                            @csrf
+
+                            @if (sizeof($errors) > 0)
+                            @foreach ($errors->all() as $error)
+                            <p class="text-red-600 mb-3">{{ $error }}</p>
+                            @endforeach
+                            @endif
+
+                            <div class="mb-3">
+                                <label for="email" class="form-label">Email Address</label>
+                                <input type="email" class="form-control" id="email" name="email" value="user@demo.com" placeholder="Enter your email">
+                            </div>
+                            <div class="mb-3">
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <label for="password" class="form-label">Password</label>
+                                    <a href="{{ route ('second' , ['auth','password']) }}" class="text-decoration-none small text-muted">Forgot password?</a>
+                                </div>
+                                <input type="password" class="form-control" id="password" name="password" value="password" placeholder="Enter your password">
+                            </div>
+                            <div class="form-check mb-3">
+                                <input type="checkbox" class="form-check-input" id="remember-me">
+                                <label class="form-check-label" for="remember-me">Remember me</label>
+                            </div>
+                            <div class="d-grid">
+                                <button class="btn btn-dark btn-lg fw-medium" type="submit">Sign In</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+                <p class="text-center mt-4 text-white text-opacity-50">Don't have an account?
+                    <a href="{{ route ('second' , ['auth','signup']) }}" class="text-decoration-none text-white fw-bold">Sign Up</a>
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+
+@endsection

resources/views/auth/signup.blade.php

@@ -0,0 +1,68 @@
+@extends('layouts.base', ['subtitle' => 'Sign Up'])
+
+@section('body-attribuet')
+class="authentication-bg"
+@endsection
+
+@section('content')
+<div class="account-pages py-5">
+     <div class="container">
+          <div class="row justify-content-center">
+               <div class="col-md-6 col-lg-5">
+                    <div class="card border-0 shadow-lg">
+                         <div class="card-body p-5">
+                              <div class="text-center">
+                                   <div class="mx-auto mb-4 text-center auth-logo">
+                                        <a href="{{ route('any', 'index') }}" class="logo-dark">
+                                             <img src="/images/logo-dark.png" height="32" alt="logo dark">
+                                        </a>
+
+                                        <a href="{{ route('any', 'index') }}" class="logo-light">
+                                             <img src="/images/logo-light.png" height="28" alt="logo light">
+                                        </a>
+                                   </div>
+                                   <h4 class="fw-bold text-dark mb-2">Sign Up</h3>
+                                        <p class="text-muted">New to our platform? Sign up now! It only takes a
+                                             minute.
+                                        </p>
+                              </div>
+
+                              <form action="{{ route('any', 'index') }}" class="mt-4">
+                                   <div class="mb-3">
+                                        <label class="form-label" for="example-name">Name</label>
+                                        <input type="name" id="example-name" name="example-name"
+                                             class="form-control" placeholder="Enter your name">
+                                   </div>
+                                   <div class="mb-3">
+                                        <label class="form-label" for="example-email">Email</label>
+                                        <input type="email" id="example-email" name="example-email"
+                                             class="form-control" placeholder="Enter your email">
+                                   </div>
+                                   <div class="mb-3">
+                                        <label class="form-label" for="example-password">Password</label>
+                                        <input type="text" id="example-password" class="form-control"
+                                             placeholder="Enter your password">
+                                   </div>
+                                   <div class="mb-3">
+                                        <div class="form-check">
+                                             <input type="checkbox" class="form-check-input" id="checkbox-signin">
+                                             <label class="form-check-label" for="checkbox-signin">I accept Terms
+                                                  and Condition</label>
+                                        </div>
+                                   </div>
+
+                                   <div class="mb-1 text-center d-grid">
+                                        <button class="btn btn-dark btn-lg fw-medium" type="submit">Sign
+                                             Up</button>
+                                   </div>
+                              </form>
+                         </div>
+                    </div>
+                    <p class="text-center mt-4 text-white text-opacity-50">I already have an account
+                         <a href="{{ route ('second' , ['auth','signin']) }}" class="text-decoration-none text-white fw-bold">Sign In</a>
+                    </p>
+               </div>
+          </div>
+     </div>
+</div>
+@endsection

resources/views/forms/basic.blade.php

@@ -0,0 +1,377 @@
+@extends('layouts.vertical', ['subtitle' => 'Form Basics'])
+
+@section('content')
+
+@include('layouts.partials/page-title', ['title' => 'Form', 'subtitle' => 'Form Basics'])
+
+<div class="row row-cols-lg-2 gx-3">
+    <div class="col">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">Basic Example</h5>
+            </div>
+
+            <div class="card-body">
+                <div>
+                    <div>
+                        <div class="mb-3">
+                            <label for="simpleinput" class="form-label">Text</label>
+                            <input type="text" id="simpleinput" class="form-control">
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="example-email" class="form-label">Email</label>
+                            <input type="email" id="example-email" name="example-email" class="form-control"
+                                placeholder="Email">
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="example-password" class="form-label">Password</label>
+                            <input type="password" id="example-password" class="form-control" value="password">
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="example-palaceholder" class="form-label">Placeholder</label>
+                            <input type="text" id="example-palaceholder" class="form-control"
+                                placeholder="placeholder">
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="example-textarea" class="form-label">Text
+                                area</label>
+                            <textarea class="form-control" id="example-textarea" rows="5"></textarea>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">Input Sizing</h5>
+            </div>
+
+            <div class="card-body">
+                <div>
+                    <div class="d-flex flex-column gap-2 mb-3">
+                        <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg"
+                            aria-label=".form-control-lg example">
+                        <input class="form-control" type="text" placeholder="Default input"
+                            aria-label="default input example">
+                        <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm"
+                            aria-label=".form-control-sm example">
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">Disabled Input</h5>
+            </div>
+
+            <div class="card-body">
+                <div>
+                    <div class="d-flex flex-column gap-2 mb-3">
+                        <input class="form-control" type="text" placeholder="Disabled input"
+                            aria-label="Disabled input example" disabled>
+                        <input class="form-control" type="text" value="Disabled readonly input"
+                            aria-label="Disabled input example" disabled readonly>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">Checkbox</h5>
+            </div>
+
+            <div class="card-body">
+                <h5>Default</h5>
+                <div class="mb-3">
+                    <div class="form-check">
+                        <input type="checkbox" class="form-check-input" id="customCheck1">
+                        <label class="form-check-label" for="customCheck1">Check this custom
+                            checkbox</label>
+                    </div>
+                    <div class="form-check">
+                        <input type="checkbox" class="form-check-input" id="customCheck2">
+                        <label class="form-check-label" for="customCheck2">Check this custom
+                            checkbox</label>
+                    </div>
+                </div>
+
+                <h5>Inline</h5>
+                <div class="mb-3">
+                    <div class="form-check form-check-inline">
+                        <input type="checkbox" class="form-check-input" id="customCheck3">
+                        <label class="form-check-label" for="customCheck3">Check this custom
+                            checkbox</label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input type="checkbox" class="form-check-input" id="customCheck4">
+                        <label class="form-check-label" for="customCheck4">Check this custom
+                            checkbox</label>
+                    </div>
+                </div>
+
+                <!-- Colors-->
+                <h5>Colors</h5>
+                <div class="form-check mb-2">
+                    <input type="checkbox" class="form-check-input" id="customCheckcolor1" checked="">
+                    <label class="form-check-label" for="customCheckcolor1">Default
+                        Checkbox</label>
+                </div>
+                <div class="form-check form-checkbox-success mb-2">
+                    <input type="checkbox" class="form-check-input" id="customCheckcolor2" checked="">
+                    <label class="form-check-label" for="customCheckcolor2">Success
+                        Checkbox</label>
+                </div>
+                <div class="form-check form-checkbox-info mb-2">
+                    <input type="checkbox" class="form-check-input" id="customCheckcolor3" checked="">
+                    <label class="form-check-label" for="customCheckcolor3">Info
+                        Checkbox</label>
+                </div>
+                <div class="form-check form-checkbox-secondary mb-2">
+                    <input type="checkbox" class="form-check-input" id="customCheckcolor6" checked="">
+                    <label class="form-check-label" for="customCheckcolor6">Secondary
+                        Checkbox</label>
+                </div>
+                <div class="form-check form-checkbox-warning mb-2">
+                    <input type="checkbox" class="form-check-input" id="customCheckcolor4" checked="">
+                    <label class="form-check-label" for="customCheckcolor4">Warning
+                        Checkbox</label>
+                </div>
+                <div class="form-check form-checkbox-danger mb-2">
+                    <input type="checkbox" class="form-check-input" id="customCheckcolor5" checked="">
+                    <label class="form-check-label" for="customCheckcolor5">Danger
+                        Checkbox</label>
+                </div>
+                <div class="form-check form-checkbox-dark">
+                    <input type="checkbox" class="form-check-input" id="customCheckcolor7" checked="">
+                    <label class="form-check-label" for="customCheckcolor7">Dark
+                        Checkbox</label>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">Readonly Input</h5>
+            </div>
+
+            <div class="card-body">
+                <div>
+                    <div class="d-flex flex-column gap-2 mb-3">
+                        <input class="form-control" type="text" value="Readonly input here..."
+                            aria-label="readonly input example" readonly>
+                        <input type="text" readonly class="form-control-plaintext" id="staticEmail"
+                            value="email@example.com">
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">Datalists input</h5>
+            </div>
+            <div class="card-body">
+                <div>
+                    <div class="mb-3">
+                        <label for="exampleDataList" class="form-label">Datalist
+                            example</label>
+                        <input class="form-control" list="datalistOptions" id="exampleDataList"
+                            placeholder="Type to search...">
+                        <datalist id="datalistOptions">
+                            <option value="San Francisco">
+                            <option value="New York">
+                            <option value="Seattle">
+                            <option value="Los Angeles">
+                            <option value="Chicago">
+                        </datalist>
+                    </div>
+                </div>
+            </div> <!-- end card body -->
+        </div> <!-- end card -->
+
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">Select</h5>
+            </div>
+
+            <div class="card-body">
+                <div class="mb-3">
+                    <div class="mb-3">
+                        <label for="example-select" class="form-label">Default Input
+                            Select</label>
+                        <select class="form-select" id="example-select">
+                            <option>1</option>
+                            <option>2</option>
+                            <option>3</option>
+                            <option>4</option>
+                            <option>5</option>
+                        </select>
+                    </div>
+
+                    <p class="text-muted">The <code>multiple</code> attribute is also
+                        supported:</p>
+
+                    <div class="mb-3">
+                        <label for="example-multiselect" class="form-label">Multiple
+                            Select</label>
+                        <select id="example-multiselect" multiple="" class="form-control">
+                            <option>1</option>
+                            <option>2</option>
+                            <option>3</option>
+                            <option>4</option>
+                            <option>5</option>
+                        </select>
+                    </div>
+
+                    <p class="text-muted">As is the <code>size</code> attribute:</p>
+
+                    <label for="example-multiselectsize" class="form-label">Multiple Select
+                        Size</label>
+                    <select id="example-multiselectsize" class="form-select" size="3"
+                        aria-label="size 3 select example">
+                        <option selected>Open this select menu</option>
+                        <option value="1">One</option>
+                        <option value="2">Two</option>
+                        <option value="3">Three</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">Radio</h5>
+            </div>
+
+            <div class="card-body">
+                <h5>Default</h5>
+                <div class="mb-3">
+                    <div class="form-check">
+                        <input class="form-check-input" type="radio" name="flexRadioDefault"
+                            id="flexRadioDefault1">
+                        <label class="form-check-label" for="flexRadioDefault1">
+                            Default radio
+                        </label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="radio" name="flexRadioDefault"
+                            id="flexRadioDefault2" checked="">
+                        <label class="form-check-label" for="flexRadioDefault2">
+                            Default checked radio
+                        </label>
+                    </div>
+                </div>
+
+                <h5>Inline</h5>
+                <div class="mb-3">
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1"
+                            value="option1">
+                        <label class="form-check-label" for="inlineRadio1">Check this custom
+                            checkbox</label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2"
+                            value="option2">
+                        <label class="form-check-label" for="inlineRadio2">Check this custom
+                            checkbox</label>
+                    </div>
+                </div>
+
+                <div>
+                    <h5>Colors</h5>
+                    <div class="form-check mb-2">
+                        <input type="radio" id="customRadiocolor1" name="customRadiocolor1"
+                            class="form-check-input" checked="">
+                        <label class="form-check-label" for="customRadiocolor1">Default
+                            Radio</label>
+                    </div>
+                    <div class="form-check form-radio-success mb-2">
+                        <input type="radio" id="customRadiocolor2" name="customRadiocolor2"
+                            class="form-check-input" checked="">
+                        <label class="form-check-label" for="customRadiocolor2">Success
+                            Radio</label>
+                    </div>
+                    <div class="form-check form-radio-info mb-2">
+                        <input type="radio" id="customRadiocolor3" name="customRadiocolor3"
+                            class="form-check-input" checked="">
+                        <label class="form-check-label" for="customRadiocolor3">Info
+                            Radio</label>
+                    </div>
+                    <div class="form-check form-radio-secondary mb-2">
+                        <input type="radio" id="customRadiocolor6" name="customRadiocolor6"
+                            class="form-check-input" checked="">
+                        <label class="form-check-label" for="customRadiocolor6">Secondary
+                            Radio</label>
+                    </div>
+                    <div class="form-check form-radio-warning mb-2">
+                        <input type="radio" id="customRadiocolor4" name="customRadiocolor4"
+                            class="form-check-input" checked="">
+                        <label class="form-check-label" for="customRadiocolor4">Warning
+                            Radio</label>
+                    </div>
+                    <div class="form-check form-radio-danger mb-2">
+                        <input type="radio" id="customRadiocolor5" name="customRadiocolor5"
+                            class="form-check-input" checked="">
+                        <label class="form-check-label" for="customRadiocolor5">Danger
+                            Radio</label>
+                    </div>
+                    <div class="form-check form-radio-dark">
+                        <input type="radio" id="customRadiocolor7" name="customRadiocolor7"
+                            class="form-check-input" checked="">
+                        <label class="form-check-label" for="customRadiocolor7">Dark
+                            Radio</label>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">Switch</h5>
+            </div>
+
+            <div class="card-body">
+                <div class="mb-3">
+                    <div class="form-check form-switch">
+                        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
+                        <label class="form-check-label" for="flexSwitchCheckDefault">Default
+                            switch checkbox
+                            input</label>
+                    </div>
+                    <div class="form-check form-switch">
+                        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked"
+                            checked="">
+                        <label class="form-check-label" for="flexSwitchCheckChecked">Checked
+                            switch checkbox
+                            input</label>
+                    </div>
+                    <div class="form-check form-switch">
+                        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled"
+                            disabled="">
+                        <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled
+                            switch checkbox
+                            input</label>
+                    </div>
+                    <div class="form-check form-switch">
+                        <input class="form-check-input" type="checkbox" role="switch"
+                            id="flexSwitchCheckCheckedDisabled" checked="" disabled="">
+                        <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch
+                            checkbox input</label>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+@endsection

resources/views/forms/editors.blade.php

@@ -0,0 +1,67 @@
+@extends('layouts.vertical', ['subtitle' => 'Editors'])
+
+@section('css')
+@vite(['node_modules/quill/dist/quill.snow.css','node_modules/quill/dist/quill.bubble.css'])
+@endsection
+
+@section('content')
+
+@include('layouts.partials/page-title', ['title' => 'Form', 'subtitle' => 'Editors'])
+
+<div class="card">
+    <div class="card-header">
+        <h5 class="card-title">Snow Editor</h5>
+
+        <p class="card-subtitle">Use <code>snow-editor</code> id to set snow editor.</p>
+    </div>
+
+    <div class="card-body">
+        <div class="mb-3">
+            <div id="snow-editor" style="height: 300px;">
+                <h3><span class="ql-size-large">Hello World!</span></h3>
+                <p><br></p>
+                <h3>This is a simple editable area.</h3>
+                <p><br></p>
+                <ul>
+                    <li>Select a text to reveal the toolbar.</li>
+                    <li>Edit rich document on-the-fly, so elastic!</li>
+                </ul>
+                <p><br></p>
+                <p>End of simple area</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-header">
+        <h5 class="card-title">Bubble Editor</h5>
+
+        <p class="card-subtitle">Use <code>bubble-editor</code> id to set bubble editor.</p>
+    </div>
+
+    <div class="card-body">
+        <div class="mb-3">
+            <!-- Bubble Editors -->
+            <div id="bubble-editor" style="height: 300px;">
+                <h3><span class="ql-size-large">Hello World!</span></h3>
+                <p><br></p>
+                <h3>This is a simple editable area.</h3>
+                <p><br></p>
+                <ul>
+                    <li>Select a text to reveal the toolbar.</li>
+                    <li>Edit rich document on-the-fly, so elastic!</li>
+                </ul>
+                <p><br></p>
+                <p>End of simple area</p>
+            </div>
+        </div>
+    </div> <!-- end card body -->
+</div> <!-- end card -->
+</div>
+<!-- End Container Fluid -->
+@endsection
+
+@section('scripts')
+@vite(['resources/js/pages/form-quilljs.js'])
+@endsection

resources/views/forms/fileuploads.blade.php

@@ -0,0 +1,73 @@
+@extends('layouts.vertical', ['subtitle' => 'File Uploads'])
+
+@section('content')
+
+@include('layouts.partials/page-title', ['title' => 'Form', 'subtitle' => 'File Uploads'])
+
+<div class="row">
+    <div class="col-xl-12">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title">Dropzone File Upload</h5>
+                <p class="card-subtitle">DropzoneJS is an open source library that provides
+                    drag’n’drop file uploads
+                    with image previews.
+                </p>
+
+            </div>
+
+            <div class="card-body">
+
+                <div class="mb-3">
+
+                    <div class="dropzone">
+                        <div class="fallback">
+                            <input name="file" type="file" multiple="multiple">
+                        </div>
+                        <div class="dz-message needsclick">
+                            <i class="h1 bx bx-cloud-upload"></i>
+                            <h3>Drop files here or click to upload.</h3>
+                            <span class="text-muted fs-13">
+                                (This is just a demo dropzone. Selected files are
+                                <strong>not</strong> actually uploaded.)
+                            </span>
+                        </div>
+                    </div>
+
+                    <ul class="list-unstyled mb-0" id="dropzone-preview">
+                        <li class="mt-2" id="dropzone-preview-list">
+                            <!-- This is used as the file preview template -->
+                            <div class="border rounded">
+                                <div class="d-flex align-items-center p-2">
+                                    <div class="flex-shrink-0 me-3">
+                                        <div class="avatar-sm bg-light rounded">
+                                            <img data-dz-thumbnail class="img-fluid rounded d-block" src="#"
+                                                alt="" />
+                                        </div>
+                                    </div>
+                                    <div class="flex-grow-1">
+                                        <div class="pt-1">
+                                            <h5 class="fs-14 mb-1" data-dz-name>&nbsp;
+                                            </h5>
+                                            <p class="fs-13 text-muted mb-0" data-dz-size></p>
+                                            <strong class="error text-danger" data-dz-errormessage></strong>
+                                        </div>
+                                    </div>
+                                    <div class="flex-shrink-0 ms-3">
+                                        <button data-dz-remove class="btn btn-sm btn-danger">Delete</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <!-- end dropzon-preview -->
+                </div>
+            </div> <!-- end card body -->
+        </div> <!-- end card -->
+    </div> <!-- end col -->
+</div> <!-- end row -->
+@endsection
+
+@section('scripts')
+@vite(['resources/js/pages/form-fileupload.js'])
+@endsection

resources/views/forms/flatpicker.blade.php

@@ -0,0 +1,184 @@
+@extends('layouts.vertical', ['subtitle' => 'Flatpicker'])
+
+@section('css')
+@vite(['node_modules/flatpickr/dist/flatpickr.min.css', 'node_modules/flatpickr/dist/themes/dark.css'])
+@endsection
+
+@section('content')
+@include('layouts.partials/page-title', ['title' => 'Form', 'subtitle' => 'Flatpicker'])
+
+<div class="row row-cols-lg-2 gx-3">
+    <div class="col">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">Basic</h5>
+            </div>
+
+            <div class="card-body">
+                <div>
+                    <input type="text" id="basic-datepicker" class="form-control" placeholder="Basic datepicker">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">DateTime</h5>
+            </div>
+            <div class="card-body">
+                <input type="text" id="datetime-datepicker" class="form-control" placeholder="Date and Time">
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">Human-friendly Dates</h5>
+            </div>
+            <div class="card-body">
+                <div>
+                    <input type="text" id="humanfd-datepicker" class="form-control" placeholder="October 9, 2018">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">MinDate and MaxDate</h5>
+            </div>
+            <div class="card-body">
+                <div>
+                    <input type="text" id="minmax-datepicker" class="form-control" placeholder="mindate - maxdate">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">Disabling dates</h5>
+            </div>
+            <div class="card-body">
+                <div>
+                    <input type="text" id="disable-datepicker" class="form-control" placeholder="Disabling dates">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">Selecting multiple dates</h5>
+            </div>
+            <div class="card-body">
+                <div>
+                    <input type="text" id="multiple-datepicker" class="form-control" placeholder="Multiple dates">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">Selecting multiple dates - Conjunction</h5>
+            </div>
+            <div class="card-body">
+                <div>
+                    <input type="text" id="conjunction-datepicker" class="form-control"
+                        placeholder="2018-10-10 :: 2018-10-11">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">Range Calendar</h5>
+            </div>
+            <div class="card-body">
+                <div>
+                    <input type="text" id="range-datepicker" class="form-control"
+                        placeholder="2018-10-03 to 2018-10-10">
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+
+    <div class="col">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">Basic Timepicker</h5>
+            </div>
+            <div class="card-body">
+                <input type="text" id="basic-timepicker" class="form-control" placeholder="Basic timepicker">
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">24-hour Time Picker</h5>
+            </div>
+            <div class="card-body">
+                <input type="text" id="24hours-timepicker" class="form-control" placeholder="16:21">
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">Time Picker w/ Limits</h5>
+            </div>
+            <div class="card-body">
+                <div>
+                    <input type="text" id="minmax-timepicker" class="form-control" placeholder="Limits">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">Preloading Time</h5>
+            </div>
+            <div class="card-body">
+                <div>
+                    <input type="text" id="preloading-timepicker" class="form-control" placeholder="Pick a time">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">Inline Calendar</h5>
+            </div>
+            <div class="card-body">
+                <div>
+                    <input type="text" id="inline-datepicker" class="form-control" placeholder="Inline calendar">
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>
+@endsection
+
+@section('scripts')
+@vite(['resources/js/pages/form-flatepicker.js'])
+@endsection

resources/views/forms/validation.blade.php

@@ -0,0 +1,383 @@
+@extends('layouts.vertical', ['subtitle' => 'Form Validation'])
+
+@section('content')
+@include('layouts.partials/page-title', ['title' => 'Form', 'subtitle' => 'Form Validation'])
+
+<div class="card">
+    <div class="card-header">
+        <h5 class="card-title">
+            Browser Default
+        </h5>
+        <p class="card-subtitle">Depending on your browser and OS, you’ll see a slightly different style
+            of
+            feedback.</p>
+    </div>
+
+    <div class="card-body">
+
+        <div class="mb-3">
+            <form class="row g-3">
+                <div class="col-md-4">
+                    <label for="validationDefault01" class="form-label">First name</label>
+                    <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
+                </div>
+                <div class="col-md-4">
+                    <label for="validationDefault02" class="form-label">Last name</label>
+                    <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
+                </div>
+                <div class="col-md-4">
+                    <label for="validationDefaultUsername" class="form-label">Username</label>
+                    <div class="input-group">
+                        <span class="input-group-text" id="inputGroupPrepend2">@</span>
+                        <input type="text" class="form-control" id="validationDefaultUsername"
+                            aria-describedby="inputGroupPrepend2" required>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <label for="validationDefault03" class="form-label">City</label>
+                    <input type="text" class="form-control" id="validationDefault03" required>
+                </div>
+                <div class="col-md-3">
+                    <label for="validationDefault04" class="form-label">State</label>
+                    <select class="form-select" id="validationDefault04" required>
+                        <option selected disabled value="">Choose...</option>
+                        <option>...</option>
+                    </select>
+                </div>
+                <div class="col-md-3">
+                    <label for="validationDefault05" class="form-label">Zip</label>
+                    <input type="text" class="form-control" id="validationDefault05" required>
+                </div>
+                <div class="col-12">
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
+                        <label class="form-check-label" for="invalidCheck2">
+                            Agree to terms and conditions
+                        </label>
+                    </div>
+                </div>
+                <div class="col-12">
+                    <button class="btn btn-primary" type="submit">Submit form</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-header">
+        <h5 class="card-title">
+            Custom styles
+        </h5>
+        <p class="card-subtitle">For custom Bootstrap form validation messages, you’ll need to add the
+            <code>novalidate</code> boolean attribute to your <code>&lt;form&gt;</code>. This disables
+            the browser default feedback tooltips, but still provides access to the form validation APIs
+            in JavaScript. When attempting to submit, you’ll see the <code>:invalid</code> and
+            <code>:valid</code> styles applied to your form controls.
+        </p>
+    </div>
+
+    <div class="card-body">
+        <div class="mb-3">
+            <form class="row g-3 needs-validation" novalidate>
+                <div class="col-md-4">
+                    <label for="validationCustom01" class="form-label">First name</label>
+                    <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
+                    <div class="valid-feedback">
+                        Looks good!
+                    </div>
+                </div>
+                <div class="col-md-4">
+                    <label for="validationCustom02" class="form-label">Last name</label>
+                    <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
+                    <div class="valid-feedback">
+                        Looks good!
+                    </div>
+                </div>
+                <div class="col-md-4">
+                    <label for="validationCustomUsername" class="form-label">Username</label>
+                    <div class="input-group has-validation">
+                        <span class="input-group-text" id="inputGroupPrepend">@</span>
+                        <input type="text" class="form-control" id="validationCustomUsername"
+                            aria-describedby="inputGroupPrepend" required>
+                        <div class="invalid-feedback">
+                            Please choose a username.
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <label for="validationCustom03" class="form-label">City</label>
+                    <input type="text" class="form-control" id="validationCustom03" required>
+                    <div class="invalid-feedback">
+                        Please provide a valid city.
+                    </div>
+                </div>
+                <div class="col-md-3">
+                    <label for="validationCustom04" class="form-label">State</label>
+                    <select class="form-select" id="validationCustom04" required>
+                        <option selected disabled value="">Choose...</option>
+                        <option>...</option>
+                    </select>
+                    <div class="invalid-feedback">
+                        Please select a valid state.
+                    </div>
+                </div>
+                <div class="col-md-3">
+                    <label for="validationCustom05" class="form-label">Zip</label>
+                    <input type="text" class="form-control" id="validationCustom05" required>
+                    <div class="invalid-feedback">
+                        Please provide a valid zip.
+                    </div>
+                </div>
+                <div class="col-12">
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
+                        <label class="form-check-label" for="invalidCheck">
+                            Agree to terms and conditions
+                        </label>
+                        <div class="invalid-feedback">
+                            You must agree before submitting.
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12">
+                    <button class="btn btn-primary" type="submit">Submit form</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-header">
+        <h5 class="card-title">
+            Server side
+        </h5>
+        <p class="card-subtitle">We recommend using client-side validation, but in case you require
+            server-side validation, you can indicate invalid and valid form fields with
+            <code>.is-invalid</code> and <code>.is-valid</code>. Note that
+            <code>.invalid-feedback</code> is also supported with these classes.
+        </p>
+    </div>
+
+    <div class="card-body">
+        <div class="mb-3">
+            <form class="row g-3">
+                <div class="col-md-4">
+                    <label for="validationServer01" class="form-label">First name</label>
+                    <input type="text" class="form-control is-valid" id="validationServer01" value="Mark"
+                        required>
+                    <div class="valid-feedback">
+                        Looks good!
+                    </div>
+                </div>
+                <div class="col-md-4">
+                    <label for="validationServer02" class="form-label">Last name</label>
+                    <input type="text" class="form-control is-valid" id="validationServer02" value="Otto"
+                        required>
+                    <div class="valid-feedback">
+                        Looks good!
+                    </div>
+                </div>
+                <div class="col-md-4">
+                    <label for="validationServerUsername" class="form-label">Username</label>
+                    <div class="input-group has-validation">
+                        <span class="input-group-text" id="inputGroupPrepend3">@</span>
+                        <input type="text" class="form-control is-invalid" id="validationServerUsername"
+                            aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required>
+                        <div id="validationServerUsernameFeedback" class="invalid-feedback">
+                            Please choose a username.
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <label for="validationServer03" class="form-label">City</label>
+                    <input type="text" class="form-control is-invalid" id="validationServer03"
+                        aria-describedby="validationServer03Feedback" required>
+                    <div id="validationServer03Feedback" class="invalid-feedback">
+                        Please provide a valid city.
+                    </div>
+                </div>
+                <div class="col-md-3">
+                    <label for="validationServer04" class="form-label">State</label>
+                    <select class="form-select is-invalid" id="validationServer04"
+                        aria-describedby="validationServer04Feedback" required>
+                        <option selected disabled value="">Choose...</option>
+                        <option>...</option>
+                    </select>
+                    <div id="validationServer04Feedback" class="invalid-feedback">
+                        Please select a valid state.
+                    </div>
+                </div>
+                <div class="col-md-3">
+                    <label for="validationServer05" class="form-label">Zip</label>
+                    <input type="text" class="form-control is-invalid" id="validationServer05"
+                        aria-describedby="validationServer05Feedback" required>
+                    <div id="validationServer05Feedback" class="invalid-feedback">
+                        Please provide a valid zip.
+                    </div>
+                </div>
+                <div class="col-12">
+                    <div class="form-check">
+                        <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3"
+                            aria-describedby="invalidCheck3Feedback" required>
+                        <label class="form-check-label" for="invalidCheck3">
+                            Agree to terms and conditions
+                        </label>
+                        <div id="invalidCheck3Feedback" class="invalid-feedback">
+                            You must agree before submitting.
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12">
+                    <button class="btn btn-primary" type="submit">Submit form</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-header">
+        <h5 class="card-title">
+            Supported elements
+        </h5>
+        <p class="card-subtitle">Validation styles are available for the following form controls and
+            components:</p>
+    </div>
+
+    <div class="card-body">
+        <ul>
+            <li><code>&lt;input&gt;</code>s and <code>&lt;textarea&gt;</code>s with
+                <code>.form-control</code> (including up to one <code>.form-control</code> in input
+                groups)
+            </li>
+            <li><code>&lt;select&gt;</code>s with <code>.form-select</code></li>
+            <li><code>.form-check</code>s</li>
+        </ul>
+        <div class="mb-3">
+            <form class="was-validated">
+                <div class="mb-3">
+                    <label for="validationTextarea" class="form-label">Textarea</label>
+                    <textarea class="form-control" id="validationTextarea" placeholder="Required example textarea" required></textarea>
+                    <div class="invalid-feedback">
+                        Please enter a message in the textarea.
+                    </div>
+                </div>
+
+                <div class="form-check mb-3">
+                    <input type="checkbox" class="form-check-input" id="validationFormCheck1" required>
+                    <label class="form-check-label" for="validationFormCheck1">Check this
+                        checkbox</label>
+                    <div class="invalid-feedback">Example invalid feedback text</div>
+                </div>
+
+                <div class="form-check">
+                    <input type="radio" class="form-check-input" id="validationFormCheck2" name="radio-stacked"
+                        required>
+                    <label class="form-check-label" for="validationFormCheck2">Toggle this radio</label>
+                </div>
+                <div class="form-check mb-3">
+                    <input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked"
+                        required>
+                    <label class="form-check-label" for="validationFormCheck3">Or toggle this other
+                        radio</label>
+                    <div class="invalid-feedback">More example invalid feedback text</div>
+                </div>
+
+                <div class="mb-3">
+                    <select class="form-select" required aria-label="select example">
+                        <option value="">Open this select menu</option>
+                        <option value="1">One</option>
+                        <option value="2">Two</option>
+                        <option value="3">Three</option>
+                    </select>
+                    <div class="invalid-feedback">Example invalid select feedback</div>
+                </div>
+
+                <div class="mb-3">
+                    <input type="file" class="form-control" aria-label="file example" required>
+                    <div class="invalid-feedback">Example invalid form file feedback</div>
+                </div>
+
+                <div class="mb-3">
+                    <button class="btn btn-primary" type="submit">Submit form</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-header">
+        <h5 class="card-title">
+            Tooltips
+        </h5>
+        <p class="card-subtitle">If your form layout allows it, you can swap the
+            <code>.{valid|invalid}-feedback</code> classes for <code>.{valid|invalid}-tooltip</code>
+            classes to display validation feedback in a styled tooltip. Be sure to have a parent with
+            <code>position: relative</code> on it for tooltip positioning. In the example below, our
+            column classes have this already, but your project may require an alternative setup.
+        </p>
+    </div>
+
+    <div class="card-body">
+        <div class="mb-3">
+            <form class="row g-3 needs-validation" novalidate>
+                <div class="col-md-4 position-relative">
+                    <label for="validationTooltip01" class="form-label">First name</label>
+                    <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
+                    <div class="valid-tooltip">
+                        Looks good!
+                    </div>
+                </div>
+                <div class="col-md-4 position-relative">
+                    <label for="validationTooltip02" class="form-label">Last name</label>
+                    <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
+                    <div class="valid-tooltip">
+                        Looks good!
+                    </div>
+                </div>
+                <div class="col-md-4 position-relative">
+                    <label for="validationTooltipUsername" class="form-label">Username</label>
+                    <div class="input-group has-validation">
+                        <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
+                        <input type="text" class="form-control" id="validationTooltipUsername"
+                            aria-describedby="validationTooltipUsernamePrepend" required>
+                        <div class="invalid-tooltip">
+                            Please choose a unique and valid username.
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-6 position-relative">
+                    <label for="validationTooltip03" class="form-label">City</label>
+                    <input type="text" class="form-control" id="validationTooltip03" required>
+                    <div class="invalid-tooltip">
+                        Please provide a valid city.
+                    </div>
+                </div>
+                <div class="col-md-3 position-relative">
+                    <label for="validationTooltip04" class="form-label">State</label>
+                    <select class="form-select" id="validationTooltip04" required>
+                        <option selected disabled value="">Choose...</option>
+                        <option>...</option>
+                    </select>
+                    <div class="invalid-tooltip">
+                        Please select a valid state.
+                    </div>
+                </div>
+                <div class="col-md-3 position-relative">
+                    <label for="validationTooltip05" class="form-label">Zip</label>
+                    <input type="text" class="form-control" id="validationTooltip05" required>
+                    <div class="invalid-tooltip">
+                        Please provide a valid zip.
+                    </div>
+                </div>
+                <div class="col-12">
+                    <button class="btn btn-primary" type="submit">Submit form</button>
+                </div>
+            </form>
+        </div>
+    </div> <!-- end card body -->
+</div> <!-- end card -->
+@endsection

resources/views/icons/boxicons.blade.php

@@ -0,0 +1,373 @@
+@extends('layouts.vertical', ['subtitle' => 'Boxicons'])
+
+@section('content')
+@include('layouts.partials/page-title', ['title' => 'Icons', 'subtitle' => 'Boxicons'])
+
+<div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-child fs-2"></i>
+            <h5 class="mt-2 mb-0">Child</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bxs-balloon fs-2"></i>
+            <h5 class="mt-2 mb-0">Balloon</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bxs-coffee-bean fs-2"></i>
+            <h5 class="mt-2 mb-0">Coffee Bean</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-sushi fs-2"></i>
+            <h5 class="mt-2 mb-0">Sushi</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-shower fs-2"></i>
+            <h5 class="mt-2 mb-0">Shower</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bxl-typescript fs-2"></i>
+            <h5 class="mt-2 mb-0">Typescript</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bxl-graphql fs-2"></i>
+            <h5 class="mt-2 mb-0">Graphql</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-rfid fs-2"></i>
+            <h5 class="mt-2 mb-0">Rfid</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-universal-access fs-2"></i>
+            <h5 class="mt-2 mb-0">Universal</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bxs-castle fs-2"></i>
+            <h5 class="mt-2 mb-0">Castle</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-shield-minus fs-2"></i>
+            <h5 class="mt-2 mb-0">Shield Minus</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-shield-plus fs-2"></i>
+            <h5 class="mt-2 mb-0">Shield Plus</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-objects-vertical-bottom fs-2"></i>
+            <h5 class="mt-2 mb-0">ObjectsVertical</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-vertical-top fs-2"></i>
+            <h5 class="mt-2 mb-0">Vertical Top</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-color fs-2"></i>
+            <h5 class="mt-2 mb-0">Color</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-horizontal-left fs-2"></i>
+            <h5 class="mt-2 mb-0">HorizontalLeft</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-reflect-vertical fs-2"></i>
+            <h5 class="mt-2 mb-0">ReflectVertical</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bxl-postgresql fs-2"></i>
+            <h5 class="mt-2 mb-0">Postgresql</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bxl-mongodb fs-2"></i>
+            <h5 class="mt-2 mb-0">Mongodb</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bxl-deezer fs-2"></i>
+            <h5 class="mt-2 mb-0">Deezer</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bxl-xing fs-2"></i>
+            <h5 class="mt-2 mb-0">Xing</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-cart-add fs-2"></i>
+            <h5 class="mt-2 mb-0">Cart Add</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-cart-download fs-2"></i>
+            <h5 class="mt-2 mb-0">CartDownload</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-no-signal fs-2"></i>
+            <h5 class="mt-2 mb-0">No Signal</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-signal-5 fs-2"></i>
+            <h5 class="mt-2 mb-0">Signal 5</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-cheese fs-2"></i>
+            <h5 class="mt-2 mb-0">Cheese</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-hard-hat fs-2"></i>
+            <h5 class="mt-2 mb-0">Hard Hat</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-home-alt-2 fs-2"></i>
+            <h5 class="mt-2 mb-0">Home Alt 2</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bxl-meta fs-2"></i>
+            <h5 class="mt-2 mb-0">Meta</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bxs-lemon fs-2"></i>
+            <h5 class="mt-2 mb-0">Lemon</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bxs-cable-car fs-2"></i>
+            <h5 class="mt-2 mb-0">Cable Car </h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-cricket-ball fs-2"></i>
+            <h5 class="mt-2 mb-0">Cricket Ball</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bxs-tree-alt fs-2"></i>
+            <h5 class="mt-2 mb-0">Tree Alt</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-male-female fs-2"></i>
+            <h5 class="mt-2 mb-0">Male Female</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bxs-invader fs-2"></i>
+            <h5 class="mt-2 mb-0">Invader</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-baguette fs-2"></i>
+            <h5 class="mt-2 mb-0">Baguette</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-fork fs-2"></i>
+            <h5 class="mt-2 mb-0">Fork</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-knife fs-2"></i>
+            <h5 class="mt-2 mb-0">Knife</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-circle-half fs-2"></i>
+            <h5 class="mt-2 mb-0">Circle Half</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-circle-three-quarter fs-2"></i>
+            <h5 class="mt-2 mb-0">Circle Quarter</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bxs-bowl-rice fs-2"></i>
+            <h5 class="mt-2 mb-0">Bowl Rice</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bxs-bowl-hot fs-2"></i>
+            <h5 class="mt-2 mb-0">Bowl Hot</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-popsicle fs-2"></i>
+            <h5 class="mt-2 mb-0">Popsicle</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-cross fs-2"></i>
+            <h5 class="mt-2 mb-0">Cross</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-scatter-chart fs-2"></i>
+            <h5 class="mt-2 mb-0">Scatter Chart</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-money-withdraw fs-2"></i>
+            <h5 class="mt-2 mb-0">MoneyWithdraw</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-candles fs-2"></i>
+            <h5 class="mt-2 mb-0">Candles</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-math fs-2"></i>
+            <h5 class="mt-2 mb-0">Math</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-party fs-2"></i>
+            <h5 class="mt-2 mb-0">Party</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-leaf fs-2"></i>
+            <h5 class="mt-2 mb-0">Leaf</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-injection fs-2"></i>
+            <h5 class="mt-2 mb-0">Injection</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bx-expand-vertical fs-2"></i>
+            <h5 class="mt-2 mb-0">ExpandVertical</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bxs-dog fs-2"></i>
+            <h5 class="mt-2 mb-0">Dog</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bxs-cat fs-2"></i>
+            <h5 class="mt-2 mb-0">Cat</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bxl-upwork fs-2"></i>
+            <h5 class="mt-2 mb-0">Upwork</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bxl-netlify fs-2"></i>
+            <h5 class="mt-2 mb-0">Netlify</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bxl-java fs-2"></i>
+            <h5 class="mt-2 mb-0">Java</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bxl-heroku fs-2"></i>
+            <h5 class="mt-2 mb-0">Heroku</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bxl-go-lang fs-2"></i>
+            <h5 class="mt-2 mb-0">Go Lang</h5>
+        </div>
+    </div>
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <i class="bx bxl-gmail fs-2"></i>
+            <h5 class="mt-2 mb-0">Gmail</h5>
+        </div>
+    </div>
+</div><!-- end row -->
+
+<div class="my-4 text-center">
+    <a href="https://boxicons.com/" target="_blank" class="btn btn-primary">View All Icons</a>
+</div>
+@endsection

resources/views/icons/solar.blade.php

@@ -0,0 +1,221 @@
+@extends('layouts.vertical', ['subtitle' => 'iconify Icons'])
+
+@section('content')
+@include('layouts.partials/page-title', ['title' => 'Icons', 'subtitle' => 'iconify Icons'])
+
+<div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:leaf-bold-duotone" class="fs-2 text-primary"></iconify-icon>
+            <h5 class="mt-2 mb-0">Leaf</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:airbuds-bold-duotone" class="fs-2"></iconify-icon>
+            <h5 class="mt-2 mb-0">Airbuds</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:adhesive-plaster-bold-duotone" class="fs-2"></iconify-icon>
+            <h5 class="mt-2 mb-0">Plaster</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:bicycling-round-bold-duotone" class="fs-2"></iconify-icon>
+            <h5 class="mt-2 mb-0">Bicycling</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:bookmark-circle-bold-duotone" class="fs-2 text-success"></iconify-icon>
+            <h5 class="mt-2 mb-0">Bookmark</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:crown-bold-duotone" class="fs-2"></iconify-icon>
+            <h5 class="mt-2 mb-0">Crown</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:asteroid-broken" class="fs-2"></iconify-icon>
+            <h5 class="mt-2 mb-0">Asteroid</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:bar-chair-broken" class="fs-2"></iconify-icon>
+            <h5 class="mt-2 mb-0">Bar Chair</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:black-hole-line-duotone" class="fs-2 text-info"></iconify-icon>
+            <h5 class="mt-2 mb-0">Hole</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:bookmark-circle-broken" class="fs-2"></iconify-icon>
+            <h5 class="mt-2 mb-0">Bookmark</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:cart-4-broken" class="fs-2"></iconify-icon>
+            <h5 class="mt-2 mb-0">Cart</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:cart-large-4-bold-duotone" class="fs-2"></iconify-icon>
+            <h5 class="mt-2 mb-0">Cart Large</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:chat-round-unread-bold-duotone" class="fs-2 text-dark"></iconify-icon>
+            <h5 class="mt-2 mb-0">Chat</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:closet-2-bold-duotone" class="fs-2"></iconify-icon>
+            <h5 class="mt-2 mb-0">Closet</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:cloud-snowfall-minimalistic-line-duotone" class="fs-2"></iconify-icon>
+            <h5 class="mt-2 mb-0">Cloud</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:command-bold-duotone" class="fs-2"></iconify-icon>
+            <h5 class="mt-2 mb-0">Command</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:compass-big-bold-duotone" class="fs-2 text-warning"></iconify-icon>
+            <h5 class="mt-2 mb-0">Compass</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:confetti-minimalistic-line-duotone" class="fs-2"></iconify-icon>
+            <h5 class="mt-2 mb-0">Confetti</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:corkscrew-bold-duotone" class="fs-2"></iconify-icon>
+            <h5 class="mt-2 mb-0">Corkscrew</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:cup-hot-line-duotone" class="fs-2"></iconify-icon>
+            <h5 class="mt-2 mb-0">Cup</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:dollar-bold-duotone" class="fs-2 text-danger"></iconify-icon>
+            <h5 class="mt-2 mb-0">Dollar</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:dumbbell-large-bold-duotone" class="fs-2"></iconify-icon>
+            <h5 class="mt-2 mb-0">Dumbbell</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:electric-refueling-bold-duotone" class="fs-2"></iconify-icon>
+            <h5 class="mt-2 mb-0">Refueling</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:earth-line-duotone" class="fs-2"></iconify-icon>
+            <h5 class="mt-2 mb-0">Earth</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:figma-bold-duotone" class="fs-2"></iconify-icon>
+            <h5 class="mt-2 mb-0">Figma</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:flame-bold-duotone" class="fs-2"></iconify-icon>
+            <h5 class="mt-2 mb-0">Flame</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:floor-lamp-line-duotone" class="fs-2"></iconify-icon>
+            <h5 class="mt-2 mb-0">Lamp</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:gallery-round-bold-duotone" class="fs-2"></iconify-icon>
+            <h5 class="mt-2 mb-0">Gallery</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:ghost-line-duotone" class="fs-2"></iconify-icon>
+            <h5 class="mt-2 mb-0">Ghost</h5>
+        </div>
+    </div>
+
+    <div class="card icon-box">
+        <div class="card-body d-flex flex-column align-items-center justify-content-center">
+            <iconify-icon icon="solar:kick-scooter-bold-duotone" class="fs-2"></iconify-icon>
+            <h5 class="mt-2 mb-0">Scooter</h5>
+        </div>
+    </div>
+</div><!-- end row -->
+
+<div class="my-4 text-center">
+    <a href="https://icon-sets.iconify.design/" target="_blank" class="btn btn-primary">View All Icons</a>
+</div>
+@endsection

resources/views/index.blade.php

@@ -0,0 +1,398 @@
+@extends('layouts.vertical', ['subtitle' => 'Dashboard'])
+
+@section('content')
+
+@include('layouts.partials/page-title', ['title' => 'Darkone', 'subtitle' => 'Dashboard'])
+
+<div class="row">
+    <!-- Card 1 -->
+    <div class="col-md-6 col-xl-3">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <p class="text-muted mb-0 text-truncate">Total Income</p>
+                        <h3 class="text-dark mt-2 mb-0">$78.8k</h3>
+                    </div>
+
+                    <div class="col-6">
+                        <div class="ms-auto avatar-md bg-soft-primary rounded">
+                            <iconify-icon icon="solar:globus-outline"
+                                class="fs-32 avatar-title text-primary"></iconify-icon>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div id="chart01"></div>
+        </div>
+    </div>
+
+    <!-- Card 2 -->
+    <div class="col-md-6 col-xl-3">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <p class="text-muted mb-0 text-truncate">New Users</p>
+                        <h3 class="text-dark mt-2 mb-0">2,150</h3>
+                    </div>
+
+                    <div class="col-6">
+                        <div class="ms-auto avatar-md bg-soft-primary rounded">
+                            <iconify-icon icon="solar:users-group-two-rounded-broken"
+                                class="fs-32 avatar-title text-primary"></iconify-icon>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div id="chart02"></div>
+        </div>
+    </div>
+
+    <!-- Card 3 -->
+    <div class="col-md-6 col-xl-3">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <p class="text-muted mb-0 text-truncate">Orders</p>
+                        <h3 class="text-dark mt-2 mb-0">1,784</h3>
+                    </div>
+
+                    <div class="col-6">
+                        <div class="ms-auto avatar-md bg-soft-primary rounded">
+                            <iconify-icon icon="solar:cart-5-broken"
+                                class="fs-32 avatar-title text-primary"></iconify-icon>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div id="chart03"></div>
+        </div>
+    </div>
+
+    <!-- Card 4 -->
+    <div class="col-md-6 col-xl-3">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <p class="text-muted mb-0 text-truncate">Conversion Rate</p>
+                        <h3 class="text-dark mt-2 mb-0">12.3%</h3>
+                    </div>
+
+                    <div class="col-6">
+                        <div class="ms-auto avatar-md bg-soft-primary rounded">
+                            <iconify-icon icon="solar:pie-chart-2-broken"
+                                class="fs-32 avatar-title text-primary"></iconify-icon>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div id="chart04"></div>
+        </div>
+    </div>
+</div>
+
+
+
+<div class="row">
+    <div class="col-lg-4">
+        <div class="card card-height-100">
+            <div class="card-header d-flex align-items-center justify-content-between gap-2">
+                <h4 class=" mb-0 flex-grow-1 mb-0">Revenue</h4>
+                <div>
+                    <button type="button" class="btn btn-sm btn-outline-light">ALL</button>
+                    <button type="button" class="btn btn-sm btn-outline-light">1M</button>
+                    <button type="button" class="btn btn-sm btn-outline-light">6M</button>
+                    <button type="button" class="btn btn-sm btn-outline-light active">1Y</button>
+                </div>
+            </div>
+
+            <div class="card-body pt-0">
+                <div dir="ltr">
+                    <div id="dash-performance-chart" class="apex-charts"></div>
+                </div>
+            </div>
+
+        </div> <!-- end card-->
+    </div> <!-- end col -->
+
+    <div class="col-lg-4">
+        <div class="card card-height-100">
+            <div class="card-header d-flex align-items-center justify-content-between gap-2">
+                <h4 class="card-title flex-grow-1 mb-0">Sales By Category</h4>
+                <div>
+                    <button type="button" class="btn btn-sm btn-outline-light">ALL</button>
+                    <button type="button" class="btn btn-sm btn-outline-light">1M</button>
+                    <button type="button" class="btn btn-sm btn-outline-light">6M</button>
+                    <button type="button" class="btn btn-sm btn-outline-light active">1Y</button>
+                </div>
+            </div>
+
+            <div class="card-body">
+                <div dir="ltr">
+                    <div id="conversions" class="apex-charts"></div>
+                </div>
+                <div class="table-responsive mb-n1 mt-2">
+                    <table class="table table-nowrap table-borderless table-sm table-centered mb-0">
+                        <thead class="bg-light bg-opacity-50 thead-sm">
+                            <tr>
+                                <th class="py-1">
+                                    Category
+                                </th>
+                                <th class="py-1">Orders</th>
+                                <th class="py-1">Perc.</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>Grocery</td>
+                                <td>187,232</td>
+                                <td>
+                                    48.63%
+                                    <span class="badge badge-soft-success float-end">2.5% Up</span>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Electonics</td>
+                                <td>126,874</td>
+                                <td>
+                                    36.08%
+                                    <span class="badge badge-soft-success float-end">8.5% Up</span>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Other</td>
+                                <td>90,127</td>
+                                <td>
+                                    23.41%
+                                    <span class="badge badge-soft-danger float-end">10.98% Down</span>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <!-- end table-responsive-->
+            </div>
+
+        </div> <!-- end card-->
+    </div> <!-- end col -->
+
+    <div class="col-lg-4">
+        <div class="card">
+            <div
+                class="d-flex card-header justify-content-between align-items-center border-bottom border-dashed">
+                <h4 class="card-title mb-0">Sessions by Country</h4>
+                <div class="dropdown">
+                    <a href="#" class="dropdown-toggle btn btn-sm btn-outline-light"
+                        data-bs-toggle="dropdown" aria-expanded="false">
+                        View Data
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-end">
+                        <!-- item-->
+                        <a href="javascript:void(0);" class="dropdown-item">Download</a>
+                        <!-- item-->
+                        <a href="javascript:void(0);" class="dropdown-item">Export</a>
+                        <!-- item-->
+                        <a href="javascript:void(0);" class="dropdown-item">Import</a>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card-body pt-0">
+                <div id="world-map-markers" class="mt-3" style="height: 309px">
+                </div>
+            </div> <!-- end card-body-->
+
+
+        </div> <!-- end card-->
+    </div> <!-- end col-->
+
+</div> <!-- End row -->
+
+<div class="row">
+    <div class="col-xl-6">
+        <div class="card">
+            <div class="card-header d-flex justify-content-between align-items-center">
+                <h4 class="card-title mb-0">New Accounts</h4>
+                <a href="#!" class="btn btn-sm btn-light">
+                    View All
+                </a>
+            </div>
+            <!-- end card-header-->
+
+            <div class="card-body pb-1">
+                <div class="table-responsive">
+                    <table class="table table-hover mb-0 table-centered">
+                        <thead>
+                            <th class="py-1">ID</th>
+                            <th class="py-1">Date</th>
+                            <th class="py-1">User</th>
+                            <th class="py-1">Account</th>
+                            <th class="py-1">Username</th>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>#US523</td>
+                                <td>24 April, 2024</td>
+                                <td>
+                                    <img src="/images/users/avatar-2.jpg" alt="avatar-2"
+                                        class="img-fluid avatar-xs rounded-circle" />
+                                    <span class="align-middle ms-1">Dan Adrick</span>
+                                </td>
+                                <td>
+                                    <span class="badge badge-soft-success">Verified</span>
+                                </td>
+                                <td>@omions</td>
+                            </tr>
+                            <tr>
+                                <td>#US652</td>
+                                <td>24 April, 2024</td>
+                                <td>
+                                    <img src="/images/users/avatar-3.jpg" alt="avatar-2"
+                                        class="img-fluid avatar-xs rounded-circle" />
+                                    <span class="align-middle ms-1">Daniel Olsen</span>
+                                </td>
+                                <td>
+                                    <span class="badge badge-soft-success">Verified</span>
+                                </td>
+                                <td>@alliates</td>
+                            </tr>
+                            <tr>
+                                <td>#US862</td>
+                                <td>20 April, 2024</td>
+                                <td>
+                                    <img src="/images/users/avatar-4.jpg" alt="avatar-2"
+                                        class="img-fluid avatar-xs rounded-circle" />
+                                    <span class="align-middle ms-1">Jack Roldan</span>
+                                </td>
+                                <td>
+                                    <span class="badge badge-soft-warning">Pending</span>
+                                </td>
+                                <td>@griys</td>
+                            </tr>
+                            <tr>
+                                <td>#US756</td>
+                                <td>18 April, 2024</td>
+                                <td>
+                                    <img src="/images/users/avatar-5.jpg" alt="avatar-2"
+                                        class="img-fluid avatar-xs rounded-circle" />
+                                    <span class="align-middle ms-1">Betty Cox</span>
+                                </td>
+                                <td>
+                                    <span class="badge badge-soft-success">Verified</span>
+                                </td>
+                                <td>@reffon</td>
+                            </tr>
+                            <tr>
+                                <td>#US420</td>
+                                <td>18 April, 2024</td>
+                                <td>
+                                    <img src="/images/users/avatar-6.jpg" alt="avatar-2"
+                                        class="img-fluid avatar-xs rounded-circle" />
+                                    <span class="align-middle ms-1">Carlos
+                                        Johnson</span>
+                                </td>
+                                <td>
+                                    <span class="badge badge-soft-danger">Blocked</span>
+                                </td>
+                                <td>@bebo</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <!-- end card body -->
+        </div>
+        <!-- end card-->
+    </div>
+    <!-- end col -->
+
+    <div class="col-xl-6">
+        <div class="card">
+            <div class="card-header d-flex justify-content-between align-items-center">
+                <h4 class="card-title mb-0">
+                    Recent Transactions
+                </h4>
+
+                <a href="#!" class="btn btn-sm btn-light">
+                    View All
+                </a>
+            </div>
+            <!-- end card-header-->
+
+            <div class="card-body">
+                <div class="table-responsive">
+                    <table class="table table-hover mb-0 table-centered">
+                        <thead>
+                            <th class="py-1">ID</th>
+                            <th class="py-1">Date</th>
+                            <th class="py-1">Amount</th>
+                            <th class="py-1">Status</th>
+                            <th class="py-1">
+                                Description
+                            </th>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>#98521</td>
+                                <td>24 April, 2024</td>
+                                <td>$120.55</td>
+                                <td>
+                                    <span class="badge bg-success">Cr</span>
+                                </td>
+                                <td>Commisions</td>
+                            </tr>
+                            <tr>
+                                <td>#20158</td>
+                                <td>24 April, 2024</td>
+                                <td>$9.68</td>
+                                <td>
+                                    <span class="badge bg-success">Cr</span>
+                                </td>
+                                <td>Affiliates</td>
+                            </tr>
+                            <tr>
+                                <td>#36589</td>
+                                <td>20 April, 2024</td>
+                                <td>$105.22</td>
+                                <td>
+                                    <span class="badge bg-danger">Dr</span>
+                                </td>
+                                <td>Grocery</td>
+                            </tr>
+                            <tr>
+                                <td>#95362</td>
+                                <td>18 April, 2024</td>
+                                <td>$80.59</td>
+                                <td>
+                                    <span class="badge bg-success">Cr</span>
+                                </td>
+                                <td>Refunds</td>
+                            </tr>
+                            <tr>
+                                <td>#75214</td>
+                                <td>18 April, 2024</td>
+                                <td>$750.95</td>
+                                <td>
+                                    <span class="badge bg-danger">Dr</span>
+                                </td>
+                                <td>Bill Payments</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <!-- end card body -->
+        </div>
+        <!-- end card-->
+    </div>
+    <!-- end col -->
+</div>
+<!-- end row -->
+@endsection
+
+@section('scripts')
+@vite(['resources/js/pages/dashboard.js'])
+@endsection

resources/views/layouts-demo/dark-sidenav.blade.php

@@ -0,0 +1,467 @@
+@extends('layouts.vertical', ['subtitle' => 'Dark Sidenav Menu'])
+
+@section('html-attribute')
+data-sidebar-color="dark" data-bs-theme="light"
+@endsection
+
+@section('content')
+@include('layouts.partials/page-title', ['title' => 'Layouts', 'subtitle' => 'Dashboard'])
+
+<div class="row">
+    <!-- Card 1 -->
+    <div class="col-md-6 col-xl-3">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
+                            <iconify-icon icon="solar:globus-outline"
+                                class="fs-32 text-primary avatar-title"></iconify-icon>
+                        </div>
+                    </div>
+                    <div class="col-6 text-end">
+                        <p class="text-muted mb-0 text-truncate">Clicks</p>
+                        <h3 class="text-dark mt-2 mb-0">15,352</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
+                <div class="d-flex align-items-center justify-content-between">
+                    <div>
+                        <span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 3.02%</span>
+                        <span class="text-muted ms-1 fs-12">From last month</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Card 2 -->
+    <div class="col-md-6 col-xl-3">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
+                            <iconify-icon icon="solar:bag-check-outline"
+                                class="fs-32 text-primary avatar-title"></iconify-icon>
+                        </div>
+                    </div>
+                    <div class="col-6 text-end">
+                        <p class="text-muted mb-0 text-truncate">Sales</p>
+                        <h3 class="text-dark mt-2 mb-0">8,764</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
+                <div class="d-flex align-items-center justify-content-between">
+                    <div>
+                        <span class="text-danger"> <i class="bx bxs-down-arrow fs-12"></i> 1.15%</span>
+                        <span class="text-muted ms-1 fs-12">From last month</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Card 3 -->
+    <div class="col-md-6 col-xl-3">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
+                            <iconify-icon icon="solar:calendar-date-outline"
+                                class="fs-32 text-primary avatar-title"></iconify-icon>
+                        </div>
+                    </div>
+                    <div class="col-6 text-end">
+                        <p class="text-muted mb-0 text-truncate">Events</p>
+                        <h3 class="text-dark mt-2 mb-0">5,123</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
+                <div class="d-flex align-items-center justify-content-between">
+                    <div>
+                        <span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 4.78%</span>
+                        <span class="text-muted ms-1 fs-12">From last month</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Card 4 -->
+    <div class="col-md-6 col-xl-3">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
+                            <iconify-icon icon="solar:users-group-two-rounded-outline"
+                                class="fs-32 text-primary avatar-title"></iconify-icon>
+                        </div>
+                    </div>
+                    <div class="col-6 text-end">
+                        <p class="text-muted mb-0 text-truncate">Users</p>
+                        <h3 class="text-dark mt-2 mb-0">12,945</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
+                <div class="d-flex align-items-center justify-content-between">
+                    <div>
+                        <span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 2.35%</span>
+                        <span class="text-muted ms-1 fs-12">From last month</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<div class="row">
+    <div class="col-lg-6">
+        <div class="card card-height-100">
+            <div class="card-header d-flex align-items-center justify-content-between gap-2">
+                <h4 class="card-title flex-grow-1">Top Pages</h4>
+                <div>
+                    <button type="button" class="btn btn-sm btn-outline-light">ALL</button>
+                    <button type="button" class="btn btn-sm btn-outline-light">1M</button>
+                    <button type="button" class="btn btn-sm btn-outline-light">6M</button>
+                    <button type="button" class="btn btn-sm btn-outline-light active">1Y</button>
+                </div>
+            </div>
+
+            <div class="card-body pt-0">
+                <div dir="ltr">
+                    <div id="dash-performance-chart" class="apex-charts"></div>
+                </div>
+            </div>
+
+        </div> <!-- end card-->
+    </div> <!-- end col -->
+
+    <div class="col-lg-6">
+        <div class="card">
+            <div class="d-flex card-header justify-content-between align-items-center border-bottom border-dashed">
+                <h4 class="card-title">Sessions by Country</h4>
+                <div class="dropdown">
+                    <a href="#" class="dropdown-toggle btn btn-sm btn-outline-light" data-bs-toggle="dropdown"
+                        aria-expanded="false">
+                        View Data
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-end">
+                        <!-- item-->
+                        <a href="javascript:void(0);" class="dropdown-item">Download</a>
+                        <!-- item-->
+                        <a href="javascript:void(0);" class="dropdown-item">Export</a>
+                        <!-- item-->
+                        <a href="javascript:void(0);" class="dropdown-item">Import</a>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card-body pt-0">
+                <div class="row align-items-center">
+                    <div class="col-lg-7">
+                        <div id="world-map-markers" class="mt-3" style="height: 300px">
+                        </div>
+                    </div>
+                    <div class="col-lg-5" dir="ltr">
+                        <div class="p-3 pb-0">
+                            <!-- Country Data -->
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p class="mb-1">
+                                    <iconify-icon icon="circle-flags:us"
+                                        class="fs-16 align-middle me-1"></iconify-icon> <span
+                                        class="align-middle">United States</span>
+                                </p>
+                            </div>
+                            <div class="row align-items-center mb-3">
+                                <div class="col">
+                                    <div class="progress progress-soft progress-sm">
+                                        <div class="progress-bar bg-secondary" role="progressbar"
+                                            style="width: 82.05%" aria-valuenow="" aria-valuemin="0"
+                                            aria-valuemax="100"></div>
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    <p class="mb-0 fs-13 fw-semibold">659k</p>
+                                </div>
+                            </div>
+
+                            <!-- Country Data -->
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p class="mb-1">
+                                    <iconify-icon icon="circle-flags:ru"
+                                        class="fs-16 align-middle me-1"></iconify-icon> <span
+                                        class="align-middle">Russia</span>
+                                </p>
+                            </div>
+                            <div class="row align-items-center mb-3">
+                                <div class="col">
+                                    <div class="progress progress-soft progress-sm">
+                                        <div class="progress-bar bg-info" role="progressbar" style="width: 70.5%"
+                                            aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    <p class="mb-0 fs-13 fw-semibold">485k</p>
+                                </div>
+                            </div>
+
+                            <!-- Country Data -->
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p class="mb-1">
+                                    <iconify-icon icon="circle-flags:cn"
+                                        class="fs-16 align-middle me-1"></iconify-icon> <span
+                                        class="align-middle">China</span>
+                                </p>
+                            </div>
+                            <div class="row align-items-center mb-3">
+                                <div class="col">
+                                    <div class="progress progress-soft progress-sm">
+                                        <div class="progress-bar bg-warning" role="progressbar" style="width: 65.8%"
+                                            aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    <p class="mb-0 fs-13 fw-semibold">355k</p>
+                                </div>
+                            </div>
+
+                            <!-- Country Data -->
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p class="mb-1">
+                                    <iconify-icon icon="circle-flags:ca"
+                                        class="fs-16 align-middle me-1"></iconify-icon> <span
+                                        class="align-middle">Canada</span>
+                                </p>
+                            </div>
+                            <div class="row align-items-center">
+                                <div class="col">
+                                    <div class="progress progress-soft progress-sm">
+                                        <div class="progress-bar bg-success" role="progressbar" style="width: 55.8%"
+                                            aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    <p class="mb-0 fs-13 fw-semibold">204k</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div> <!-- end card-body-->
+
+
+        </div> <!-- end card-->
+    </div> <!-- end col-->
+
+</div> <!-- End row -->
+
+<div class="row">
+    <div class="col-xl-4">
+        <div class="card">
+            <div class="card-body">
+                <div class="d-flex align-items-center justify-content-between">
+                    <h4 class="card-title">New Users</h4>
+
+                    <a href="#!" class="btn btn-sm btn-primary">
+                        <i class="bx bx-plus me-1"></i>Add New User
+                    </a>
+                </div>
+            </div> <!-- end card body -->
+
+            <div class="table-responsive table-centered">
+                <table class="table mb-0">
+                    <thead class="bg-light bg-opacity-50">
+                        <th class="border-0 py-2">Date</th>
+                        <th class="border-0 py-2">User</th>
+                        <th class="border-0 py-2">Account</th>
+                        <th class="border-0 py-2">Username</th>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>24 April, 2024</td>
+                            <td><img src="/images/users/avatar-2.jpg" alt="avatar-2"
+                                    class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Dan
+                                    Adrick</span></td>
+                            <td><span class="badge badge-soft-success">Verified</span></td>
+                            <td>@omions </td>
+                        </tr>
+                        <tr>
+                            <td>24 April, 2024</td>
+                            <td><img src="/images/users/avatar-3.jpg" alt="avatar-2"
+                                    class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Daniel
+                                    Olsen</span></td>
+                            <td><span class="badge badge-soft-success">Verified</span></td>
+                            <td>@alliates </td>
+                        </tr>
+                        <tr>
+                            <td>20 April, 2024</td>
+                            <td><img src="/images/users/avatar-4.jpg" alt="avatar-2"
+                                    class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Jack
+                                    Roldan</span></td>
+                            <td><span class="badge badge-soft-warning">Pending</span></td>
+                            <td>@griys </td>
+                        </tr>
+                        <tr>
+                            <td>18 April, 2024</td>
+                            <td><img src="/images/users/avatar-5.jpg" alt="avatar-2"
+                                    class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Betty
+                                    Cox</span></td>
+                            <td><span class="badge badge-soft-success">Verified</span></td>
+                            <td>@reffon </td>
+                        </tr>
+                        <tr>
+                            <td>18 April, 2024</td>
+                            <td><img src="/images/users/avatar-6.jpg" alt="avatar-2"
+                                    class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Carlos
+                                    Johnson</span></td>
+                            <td><span class="badge badge-soft-danger">Blocked</span></td>
+                            <td>@bebo </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div> <!-- table responsive -->
+
+            <div class="align-items-center justify-content-between row g-0 text-center text-sm-start p-3 border-top">
+                <div class="col-sm">
+                    <div class="text-muted">
+                        Showing <span class="fw-semibold">5</span> of <span class="fw-semibold">587</span> users
+                    </div>
+                </div>
+                <div class="col-sm-auto mt-3 mt-sm-0">
+                    <ul class="pagination pagination-rounded m-0">
+                        <li class="page-item">
+                            <a href="#" class="page-link"><i class='bx bx-left-arrow-alt'></i></a>
+                        </li>
+                        <li class="page-item active">
+                            <a href="#" class="page-link">1</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link">2</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link">3</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link"><i class='bx bx-right-arrow-alt'></i></a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div> <!-- end card-->
+    </div> <!-- end col -->
+
+    <div class="col-xl-8">
+        <div class="card">
+            <div class="card-body">
+                <div class="d-flex align-items-center justify-content-between">
+                    <h4 class="card-title">Recent Orders</h4>
+
+                    <a href="#!" class="btn btn-sm btn-primary">
+                        <i class="bx bx-plus me-1"></i>Create Order
+                    </a>
+                </div>
+            </div> <!-- end card body -->
+            <div class="table-responsive table-centered">
+                <table class="table mb-0">
+                    <thead class="bg-light bg-opacity-50">
+                        <tr>
+                            <th class="border-0 py-2">Order ID.</th>
+                            <th class="border-0 py-2">Date</th>
+                            <th class="border-0 py-2">Customer Name</th>
+                            <th class="border-0 py-2">Phone No.</th>
+                            <th class="border-0 py-2">Address</th>
+                            <th class="border-0 py-2">Payment Type</th>
+                            <th class="border-0 py-2">Status</th>
+                        </tr>
+                    </thead> <!-- end thead-->
+                    <tbody>
+                        <tr>
+                            <td><a href="#!">#TZ5625</a></td>
+                            <td>29 April 2024</td>
+                            <td><a href="#!">Anna M. Hines</a></td>
+                            <td>(+1)-555-1564-261</td>
+                            <td>Burr Ridge/Illinois</td>
+                            <td>Credit Card</td>
+                            <td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
+                        </tr>
+                        <tr>
+                            <td><a href="#!">#TZ9652</a></td>
+                            <td>25 April 2024</td>
+                            <td><a href="#!">Judith H. Fritsche</a></td>
+                            <td>(+57)-305-5579-759</td>
+                            <td>SULLIVAN/Kentucky</td>
+                            <td>Credit Card</td>
+                            <td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
+                        </tr>
+                        <tr>
+                            <td><a href="#!">#TZ5984</a></td>
+                            <td>25 April 2024</td>
+                            <td><a href="#!">Peter T. Smith</a></td>
+                            <td>(+33)-655-5187-93</td>
+                            <td>Yreka/California</td>
+                            <td>Pay Pal</td>
+                            <td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
+                        </tr>
+                        <tr>
+                            <td><a href="#!">#TZ3625</a></td>
+                            <td>21 April 2024</td>
+                            <td><a href="#!">Emmanuel J. Delcid</a></td>
+                            <td>(+30)-693-5553-637</td>
+                            <td>Atlanta/Georgia</td>
+                            <td>Pay Pal</td>
+                            <td><i class="bx bxs-circle text-primary me-1"></i>Processing</td>
+                        </tr>
+                        <tr>
+                            <td><a href="#!">#TZ8652</a></td>
+                            <td>18 April 2024</td>
+                            <td><a href="#!">William J. Cook</a></td>
+                            <td>(+91)-855-5446-150</td>
+                            <td>Rosenberg/Texas</td>
+                            <td>Credit Card</td>
+                            <td><i class="bx bxs-circle text-primary me-1"></i>Processing</td>
+                        </tr>
+                    </tbody> <!-- end tbody -->
+                </table> <!-- end table -->
+            </div> <!-- table responsive -->
+            <div class="align-items-center justify-content-between row g-0 text-center text-sm-start p-3 border-top">
+                <div class="col-sm">
+                    <div class="text-muted">
+                        Showing <span class="fw-semibold">5</span> of <span class="fw-semibold">90,521</span> orders
+                    </div>
+                </div>
+                <div class="col-sm-auto mt-3 mt-sm-0">
+                    <ul class="pagination pagination-rounded m-0">
+                        <li class="page-item">
+                            <a href="#" class="page-link"><i class='bx bx-left-arrow-alt'></i></a>
+                        </li>
+                        <li class="page-item active">
+                            <a href="#" class="page-link">1</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link">2</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link">3</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link"><i class='bx bx-right-arrow-alt'></i></a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div> <!-- end card -->
+    </div> <!-- end col -->
+</div> <!-- end row -->
+@endsection
+
+@section('scripts')
+@vite(['resources/js/pages/dashboard.js'])
+@endsection

resources/views/layouts-demo/dark-topnav.blade.php

@@ -0,0 +1,468 @@
+@extends('layouts.vertical', ['subtitle' => 'Dark Topnav'])
+
+@section('html-attribute')
+data-topbar-color="dark" data-sidebar-color="light" data-bs-theme="light"
+@endsection
+
+@section('content')
+@include('layouts.partials/page-title', ['title' => 'Layouts', 'subtitle' => 'Dark Topnav'])
+
+<div class="row">
+    <!-- Card 1 -->
+    <div class="col-md-6 col-xl-3">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
+                            <iconify-icon icon="solar:globus-outline"
+                                class="fs-32 text-primary avatar-title"></iconify-icon>
+                        </div>
+                    </div>
+                    <div class="col-6 text-end">
+                        <p class="text-muted mb-0 text-truncate">Clicks</p>
+                        <h3 class="text-dark mt-2 mb-0">15,352</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
+                <div class="d-flex align-items-center justify-content-between">
+                    <div>
+                        <span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 3.02%</span>
+                        <span class="text-muted ms-1 fs-12">From last month</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Card 2 -->
+    <div class="col-md-6 col-xl-3">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
+                            <iconify-icon icon="solar:bag-check-outline"
+                                class="fs-32 text-primary avatar-title"></iconify-icon>
+                        </div>
+                    </div>
+                    <div class="col-6 text-end">
+                        <p class="text-muted mb-0 text-truncate">Sales</p>
+                        <h3 class="text-dark mt-2 mb-0">8,764</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
+                <div class="d-flex align-items-center justify-content-between">
+                    <div>
+                        <span class="text-danger"> <i class="bx bxs-down-arrow fs-12"></i> 1.15%</span>
+                        <span class="text-muted ms-1 fs-12">From last month</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Card 3 -->
+    <div class="col-md-6 col-xl-3">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
+                            <iconify-icon icon="solar:calendar-date-outline"
+                                class="fs-32 text-primary avatar-title"></iconify-icon>
+                        </div>
+                    </div>
+                    <div class="col-6 text-end">
+                        <p class="text-muted mb-0 text-truncate">Events</p>
+                        <h3 class="text-dark mt-2 mb-0">5,123</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
+                <div class="d-flex align-items-center justify-content-between">
+                    <div>
+                        <span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 4.78%</span>
+                        <span class="text-muted ms-1 fs-12">From last month</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Card 4 -->
+    <div class="col-md-6 col-xl-3">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
+                            <iconify-icon icon="solar:users-group-two-rounded-outline"
+                                class="fs-32 text-primary avatar-title"></iconify-icon>
+                        </div>
+                    </div>
+                    <div class="col-6 text-end">
+                        <p class="text-muted mb-0 text-truncate">Users</p>
+                        <h3 class="text-dark mt-2 mb-0">12,945</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
+                <div class="d-flex align-items-center justify-content-between">
+                    <div>
+                        <span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 2.35%</span>
+                        <span class="text-muted ms-1 fs-12">From last month</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<div class="row">
+    <div class="col-lg-6">
+        <div class="card card-height-100">
+            <div class="card-header d-flex align-items-center justify-content-between gap-2">
+                <h4 class="card-title flex-grow-1">Top Pages</h4>
+                <div>
+                    <button type="button" class="btn btn-sm btn-outline-light">ALL</button>
+                    <button type="button" class="btn btn-sm btn-outline-light">1M</button>
+                    <button type="button" class="btn btn-sm btn-outline-light">6M</button>
+                    <button type="button" class="btn btn-sm btn-outline-light active">1Y</button>
+                </div>
+            </div>
+
+            <div class="card-body pt-0">
+                <div dir="ltr">
+                    <div id="dash-performance-chart" class="apex-charts"></div>
+                </div>
+            </div>
+
+        </div> <!-- end card-->
+    </div> <!-- end col -->
+
+    <div class="col-lg-6">
+        <div class="card">
+            <div class="d-flex card-header justify-content-between align-items-center border-bottom border-dashed">
+                <h4 class="card-title">Sessions by Country</h4>
+                <div class="dropdown">
+                    <a href="#" class="dropdown-toggle btn btn-sm btn-outline-light" data-bs-toggle="dropdown"
+                        aria-expanded="false">
+                        View Data
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-end">
+                        <!-- item-->
+                        <a href="javascript:void(0);" class="dropdown-item">Download</a>
+                        <!-- item-->
+                        <a href="javascript:void(0);" class="dropdown-item">Export</a>
+                        <!-- item-->
+                        <a href="javascript:void(0);" class="dropdown-item">Import</a>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card-body pt-0">
+                <div class="row align-items-center">
+                    <div class="col-lg-7">
+                        <div id="world-map-markers" class="mt-3" style="height: 300px">
+                        </div>
+                    </div>
+                    <div class="col-lg-5" dir="ltr">
+                        <div class="p-3 pb-0">
+                            <!-- Country Data -->
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p class="mb-1">
+                                    <iconify-icon icon="circle-flags:us"
+                                        class="fs-16 align-middle me-1"></iconify-icon> <span
+                                        class="align-middle">United States</span>
+                                </p>
+                            </div>
+                            <div class="row align-items-center mb-3">
+                                <div class="col">
+                                    <div class="progress progress-soft progress-sm">
+                                        <div class="progress-bar bg-secondary" role="progressbar"
+                                            style="width: 82.05%" aria-valuenow="" aria-valuemin="0"
+                                            aria-valuemax="100"></div>
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    <p class="mb-0 fs-13 fw-semibold">659k</p>
+                                </div>
+                            </div>
+
+                            <!-- Country Data -->
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p class="mb-1">
+                                    <iconify-icon icon="circle-flags:ru"
+                                        class="fs-16 align-middle me-1"></iconify-icon> <span
+                                        class="align-middle">Russia</span>
+                                </p>
+                            </div>
+                            <div class="row align-items-center mb-3">
+                                <div class="col">
+                                    <div class="progress progress-soft progress-sm">
+                                        <div class="progress-bar bg-info" role="progressbar" style="width: 70.5%"
+                                            aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    <p class="mb-0 fs-13 fw-semibold">485k</p>
+                                </div>
+                            </div>
+
+                            <!-- Country Data -->
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p class="mb-1">
+                                    <iconify-icon icon="circle-flags:cn"
+                                        class="fs-16 align-middle me-1"></iconify-icon> <span
+                                        class="align-middle">China</span>
+                                </p>
+                            </div>
+                            <div class="row align-items-center mb-3">
+                                <div class="col">
+                                    <div class="progress progress-soft progress-sm">
+                                        <div class="progress-bar bg-warning" role="progressbar" style="width: 65.8%"
+                                            aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    <p class="mb-0 fs-13 fw-semibold">355k</p>
+                                </div>
+                            </div>
+
+                            <!-- Country Data -->
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p class="mb-1">
+                                    <iconify-icon icon="circle-flags:ca"
+                                        class="fs-16 align-middle me-1"></iconify-icon> <span
+                                        class="align-middle">Canada</span>
+                                </p>
+                            </div>
+                            <div class="row align-items-center">
+                                <div class="col">
+                                    <div class="progress progress-soft progress-sm">
+                                        <div class="progress-bar bg-success" role="progressbar" style="width: 55.8%"
+                                            aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    <p class="mb-0 fs-13 fw-semibold">204k</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div> <!-- end card-body-->
+
+
+        </div> <!-- end card-->
+    </div> <!-- end col-->
+
+</div> <!-- End row -->
+
+<div class="row">
+    <div class="col-xl-4">
+        <div class="card">
+            <div class="card-body">
+                <div class="d-flex align-items-center justify-content-between">
+                    <h4 class="card-title">New Users</h4>
+
+                    <a href="#!" class="btn btn-sm btn-primary">
+                        <i class="bx bx-plus me-1"></i>Add New User
+                    </a>
+                </div>
+            </div> <!-- end card body -->
+
+            <div class="table-responsive table-centered">
+                <table class="table mb-0">
+                    <thead class="bg-light bg-opacity-50">
+                        <th class="border-0 py-2">Date</th>
+                        <th class="border-0 py-2">User</th>
+                        <th class="border-0 py-2">Account</th>
+                        <th class="border-0 py-2">Username</th>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>24 April, 2024</td>
+                            <td><img src="/images/users/avatar-2.jpg" alt="avatar-2"
+                                    class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Dan
+                                    Adrick</span></td>
+                            <td><span class="badge badge-soft-success">Verified</span></td>
+                            <td>@omions </td>
+                        </tr>
+                        <tr>
+                            <td>24 April, 2024</td>
+                            <td><img src="/images/users/avatar-3.jpg" alt="avatar-2"
+                                    class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Daniel
+                                    Olsen</span></td>
+                            <td><span class="badge badge-soft-success">Verified</span></td>
+                            <td>@alliates </td>
+                        </tr>
+                        <tr>
+                            <td>20 April, 2024</td>
+                            <td><img src="/images/users/avatar-4.jpg" alt="avatar-2"
+                                    class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Jack
+                                    Roldan</span></td>
+                            <td><span class="badge badge-soft-warning">Pending</span></td>
+                            <td>@griys </td>
+                        </tr>
+                        <tr>
+                            <td>18 April, 2024</td>
+                            <td><img src="/images/users/avatar-5.jpg" alt="avatar-2"
+                                    class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Betty
+                                    Cox</span></td>
+                            <td><span class="badge badge-soft-success">Verified</span></td>
+                            <td>@reffon </td>
+                        </tr>
+                        <tr>
+                            <td>18 April, 2024</td>
+                            <td><img src="/images/users/avatar-6.jpg" alt="avatar-2"
+                                    class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Carlos
+                                    Johnson</span></td>
+                            <td><span class="badge badge-soft-danger">Blocked</span></td>
+                            <td>@bebo </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div> <!-- table responsive -->
+
+            <div class="align-items-center justify-content-between row g-0 text-center text-sm-start p-3 border-top">
+                <div class="col-sm">
+                    <div class="text-muted">
+                        Showing <span class="fw-semibold">5</span> of <span class="fw-semibold">587</span> users
+                    </div>
+                </div>
+                <div class="col-sm-auto mt-3 mt-sm-0">
+                    <ul class="pagination pagination-rounded m-0">
+                        <li class="page-item">
+                            <a href="#" class="page-link"><i class='bx bx-left-arrow-alt'></i></a>
+                        </li>
+                        <li class="page-item active">
+                            <a href="#" class="page-link">1</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link">2</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link">3</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link"><i class='bx bx-right-arrow-alt'></i></a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div> <!-- end card-->
+    </div> <!-- end col -->
+
+    <div class="col-xl-8">
+        <div class="card">
+            <div class="card-body">
+                <div class="d-flex align-items-center justify-content-between">
+                    <h4 class="card-title">Recent Orders</h4>
+
+                    <a href="#!" class="btn btn-sm btn-primary">
+                        <i class="bx bx-plus me-1"></i>Create Order
+                    </a>
+                </div>
+            </div> <!-- end card body -->
+            <div class="table-responsive table-centered">
+                <table class="table mb-0">
+                    <thead class="bg-light bg-opacity-50">
+                        <tr>
+                            <th class="border-0 py-2">Order ID.</th>
+                            <th class="border-0 py-2">Date</th>
+                            <th class="border-0 py-2">Customer Name</th>
+                            <th class="border-0 py-2">Phone No.</th>
+                            <th class="border-0 py-2">Address</th>
+                            <th class="border-0 py-2">Payment Type</th>
+                            <th class="border-0 py-2">Status</th>
+                        </tr>
+                    </thead> <!-- end thead-->
+                    <tbody>
+                        <tr>
+                            <td><a href="#!">#TZ5625</a></td>
+                            <td>29 April 2024</td>
+                            <td><a href="#!">Anna M. Hines</a></td>
+                            <td>(+1)-555-1564-261</td>
+                            <td>Burr Ridge/Illinois</td>
+                            <td>Credit Card</td>
+                            <td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
+                        </tr>
+                        <tr>
+                            <td><a href="#!">#TZ9652</a></td>
+                            <td>25 April 2024</td>
+                            <td><a href="#!">Judith H. Fritsche</a></td>
+                            <td>(+57)-305-5579-759</td>
+                            <td>SULLIVAN/Kentucky</td>
+                            <td>Credit Card</td>
+                            <td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
+                        </tr>
+                        <tr>
+                            <td><a href="#!">#TZ5984</a></td>
+                            <td>25 April 2024</td>
+                            <td><a href="#!">Peter T. Smith</a></td>
+                            <td>(+33)-655-5187-93</td>
+                            <td>Yreka/California</td>
+                            <td>Pay Pal</td>
+                            <td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
+                        </tr>
+                        <tr>
+                            <td><a href="#!">#TZ3625</a></td>
+                            <td>21 April 2024</td>
+                            <td><a href="#!">Emmanuel J. Delcid</a></td>
+                            <td>(+30)-693-5553-637</td>
+                            <td>Atlanta/Georgia</td>
+                            <td>Pay Pal</td>
+                            <td><i class="bx bxs-circle text-primary me-1"></i>Processing</td>
+                        </tr>
+                        <tr>
+                            <td><a href="#!">#TZ8652</a></td>
+                            <td>18 April 2024</td>
+                            <td><a href="#!">William J. Cook</a></td>
+                            <td>(+91)-855-5446-150</td>
+                            <td>Rosenberg/Texas</td>
+                            <td>Credit Card</td>
+                            <td><i class="bx bxs-circle text-primary me-1"></i>Processing</td>
+                        </tr>
+                    </tbody> <!-- end tbody -->
+                </table> <!-- end table -->
+            </div> <!-- table responsive -->
+            <div class="align-items-center justify-content-between row g-0 text-center text-sm-start p-3 border-top">
+                <div class="col-sm">
+                    <div class="text-muted">
+                        Showing <span class="fw-semibold">5</span> of <span class="fw-semibold">90,521</span> orders
+                    </div>
+                </div>
+                <div class="col-sm-auto mt-3 mt-sm-0">
+                    <ul class="pagination pagination-rounded m-0">
+                        <li class="page-item">
+                            <a href="#" class="page-link"><i class='bx bx-left-arrow-alt'></i></a>
+                        </li>
+                        <li class="page-item active">
+                            <a href="#" class="page-link">1</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link">2</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link">3</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link"><i class='bx bx-right-arrow-alt'></i></a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div> <!-- end card -->
+    </div> <!-- end col -->
+</div> <!-- end row -->
+@endsection
+
+
+@section('scripts')
+@vite(['resources/js/pages/dashboard.js'])
+@endsection

resources/views/layouts-demo/hidden-sidenav.blade.php

@@ -0,0 +1,467 @@
+@extends('layouts.vertical', ['subtitle' => 'Hidden Sidenav Menu'])
+
+@section('html-attribute')
+data-sidebar-size="hidden"
+@endsection
+
+@section('content')
+@include('layouts.partials/page-title', ['title' => 'Layouts', 'subtitle' => 'Hidden Sidenav Menu'])
+
+<div class="row">
+    <!-- Card 1 -->
+    <div class="col-md-6 col-xl-3">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
+                            <iconify-icon icon="solar:globus-outline"
+                                class="fs-32 text-primary avatar-title"></iconify-icon>
+                        </div>
+                    </div>
+                    <div class="col-6 text-end">
+                        <p class="text-muted mb-0 text-truncate">Clicks</p>
+                        <h3 class="text-dark mt-2 mb-0">15,352</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
+                <div class="d-flex align-items-center justify-content-between">
+                    <div>
+                        <span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 3.02%</span>
+                        <span class="text-muted ms-1 fs-12">From last month</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Card 2 -->
+    <div class="col-md-6 col-xl-3">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
+                            <iconify-icon icon="solar:bag-check-outline"
+                                class="fs-32 text-primary avatar-title"></iconify-icon>
+                        </div>
+                    </div>
+                    <div class="col-6 text-end">
+                        <p class="text-muted mb-0 text-truncate">Sales</p>
+                        <h3 class="text-dark mt-2 mb-0">8,764</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
+                <div class="d-flex align-items-center justify-content-between">
+                    <div>
+                        <span class="text-danger"> <i class="bx bxs-down-arrow fs-12"></i> 1.15%</span>
+                        <span class="text-muted ms-1 fs-12">From last month</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Card 3 -->
+    <div class="col-md-6 col-xl-3">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
+                            <iconify-icon icon="solar:calendar-date-outline"
+                                class="fs-32 text-primary avatar-title"></iconify-icon>
+                        </div>
+                    </div>
+                    <div class="col-6 text-end">
+                        <p class="text-muted mb-0 text-truncate">Events</p>
+                        <h3 class="text-dark mt-2 mb-0">5,123</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
+                <div class="d-flex align-items-center justify-content-between">
+                    <div>
+                        <span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 4.78%</span>
+                        <span class="text-muted ms-1 fs-12">From last month</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Card 4 -->
+    <div class="col-md-6 col-xl-3">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
+                            <iconify-icon icon="solar:users-group-two-rounded-outline"
+                                class="fs-32 text-primary avatar-title"></iconify-icon>
+                        </div>
+                    </div>
+                    <div class="col-6 text-end">
+                        <p class="text-muted mb-0 text-truncate">Users</p>
+                        <h3 class="text-dark mt-2 mb-0">12,945</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
+                <div class="d-flex align-items-center justify-content-between">
+                    <div>
+                        <span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 2.35%</span>
+                        <span class="text-muted ms-1 fs-12">From last month</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<div class="row">
+    <div class="col-lg-6">
+        <div class="card card-height-100">
+            <div class="card-header d-flex align-items-center justify-content-between gap-2">
+                <h4 class="card-title flex-grow-1">Top Pages</h4>
+                <div>
+                    <button type="button" class="btn btn-sm btn-outline-light">ALL</button>
+                    <button type="button" class="btn btn-sm btn-outline-light">1M</button>
+                    <button type="button" class="btn btn-sm btn-outline-light">6M</button>
+                    <button type="button" class="btn btn-sm btn-outline-light active">1Y</button>
+                </div>
+            </div>
+
+            <div class="card-body pt-0">
+                <div dir="ltr">
+                    <div id="dash-performance-chart" class="apex-charts"></div>
+                </div>
+            </div>
+
+        </div> <!-- end card-->
+    </div> <!-- end col -->
+
+    <div class="col-lg-6">
+        <div class="card">
+            <div class="d-flex card-header justify-content-between align-items-center border-bottom border-dashed">
+                <h4 class="card-title">Sessions by Country</h4>
+                <div class="dropdown">
+                    <a href="#" class="dropdown-toggle btn btn-sm btn-outline-light" data-bs-toggle="dropdown"
+                        aria-expanded="false">
+                        View Data
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-end">
+                        <!-- item-->
+                        <a href="javascript:void(0);" class="dropdown-item">Download</a>
+                        <!-- item-->
+                        <a href="javascript:void(0);" class="dropdown-item">Export</a>
+                        <!-- item-->
+                        <a href="javascript:void(0);" class="dropdown-item">Import</a>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card-body pt-0">
+                <div class="row align-items-center">
+                    <div class="col-lg-7">
+                        <div id="world-map-markers" class="mt-3" style="height: 300px">
+                        </div>
+                    </div>
+                    <div class="col-lg-5" dir="ltr">
+                        <div class="p-3 pb-0">
+                            <!-- Country Data -->
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p class="mb-1">
+                                    <iconify-icon icon="circle-flags:us"
+                                        class="fs-16 align-middle me-1"></iconify-icon> <span
+                                        class="align-middle">United States</span>
+                                </p>
+                            </div>
+                            <div class="row align-items-center mb-3">
+                                <div class="col">
+                                    <div class="progress progress-soft progress-sm">
+                                        <div class="progress-bar bg-secondary" role="progressbar"
+                                            style="width: 82.05%" aria-valuenow="" aria-valuemin="0"
+                                            aria-valuemax="100"></div>
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    <p class="mb-0 fs-13 fw-semibold">659k</p>
+                                </div>
+                            </div>
+
+                            <!-- Country Data -->
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p class="mb-1">
+                                    <iconify-icon icon="circle-flags:ru"
+                                        class="fs-16 align-middle me-1"></iconify-icon> <span
+                                        class="align-middle">Russia</span>
+                                </p>
+                            </div>
+                            <div class="row align-items-center mb-3">
+                                <div class="col">
+                                    <div class="progress progress-soft progress-sm">
+                                        <div class="progress-bar bg-info" role="progressbar" style="width: 70.5%"
+                                            aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    <p class="mb-0 fs-13 fw-semibold">485k</p>
+                                </div>
+                            </div>
+
+                            <!-- Country Data -->
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p class="mb-1">
+                                    <iconify-icon icon="circle-flags:cn"
+                                        class="fs-16 align-middle me-1"></iconify-icon> <span
+                                        class="align-middle">China</span>
+                                </p>
+                            </div>
+                            <div class="row align-items-center mb-3">
+                                <div class="col">
+                                    <div class="progress progress-soft progress-sm">
+                                        <div class="progress-bar bg-warning" role="progressbar" style="width: 65.8%"
+                                            aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    <p class="mb-0 fs-13 fw-semibold">355k</p>
+                                </div>
+                            </div>
+
+                            <!-- Country Data -->
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p class="mb-1">
+                                    <iconify-icon icon="circle-flags:ca"
+                                        class="fs-16 align-middle me-1"></iconify-icon> <span
+                                        class="align-middle">Canada</span>
+                                </p>
+                            </div>
+                            <div class="row align-items-center">
+                                <div class="col">
+                                    <div class="progress progress-soft progress-sm">
+                                        <div class="progress-bar bg-success" role="progressbar" style="width: 55.8%"
+                                            aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    <p class="mb-0 fs-13 fw-semibold">204k</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div> <!-- end card-body-->
+
+
+        </div> <!-- end card-->
+    </div> <!-- end col-->
+
+</div> <!-- End row -->
+
+<div class="row">
+    <div class="col-xl-4">
+        <div class="card">
+            <div class="card-body">
+                <div class="d-flex align-items-center justify-content-between">
+                    <h4 class="card-title">New Users</h4>
+
+                    <a href="#!" class="btn btn-sm btn-primary">
+                        <i class="bx bx-plus me-1"></i>Add New User
+                    </a>
+                </div>
+            </div> <!-- end card body -->
+
+            <div class="table-responsive table-centered">
+                <table class="table mb-0">
+                    <thead class="bg-light bg-opacity-50">
+                        <th class="border-0 py-2">Date</th>
+                        <th class="border-0 py-2">User</th>
+                        <th class="border-0 py-2">Account</th>
+                        <th class="border-0 py-2">Username</th>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>24 April, 2024</td>
+                            <td><img src="/images/users/avatar-2.jpg" alt="avatar-2"
+                                    class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Dan
+                                    Adrick</span></td>
+                            <td><span class="badge badge-soft-success">Verified</span></td>
+                            <td>@omions </td>
+                        </tr>
+                        <tr>
+                            <td>24 April, 2024</td>
+                            <td><img src="/images/users/avatar-3.jpg" alt="avatar-2"
+                                    class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Daniel
+                                    Olsen</span></td>
+                            <td><span class="badge badge-soft-success">Verified</span></td>
+                            <td>@alliates </td>
+                        </tr>
+                        <tr>
+                            <td>20 April, 2024</td>
+                            <td><img src="/images/users/avatar-4.jpg" alt="avatar-2"
+                                    class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Jack
+                                    Roldan</span></td>
+                            <td><span class="badge badge-soft-warning">Pending</span></td>
+                            <td>@griys </td>
+                        </tr>
+                        <tr>
+                            <td>18 April, 2024</td>
+                            <td><img src="/images/users/avatar-5.jpg" alt="avatar-2"
+                                    class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Betty
+                                    Cox</span></td>
+                            <td><span class="badge badge-soft-success">Verified</span></td>
+                            <td>@reffon </td>
+                        </tr>
+                        <tr>
+                            <td>18 April, 2024</td>
+                            <td><img src="/images/users/avatar-6.jpg" alt="avatar-2"
+                                    class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Carlos
+                                    Johnson</span></td>
+                            <td><span class="badge badge-soft-danger">Blocked</span></td>
+                            <td>@bebo </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div> <!-- table responsive -->
+
+            <div class="align-items-center justify-content-between row g-0 text-center text-sm-start p-3 border-top">
+                <div class="col-sm">
+                    <div class="text-muted">
+                        Showing <span class="fw-semibold">5</span> of <span class="fw-semibold">587</span> users
+                    </div>
+                </div>
+                <div class="col-sm-auto mt-3 mt-sm-0">
+                    <ul class="pagination pagination-rounded m-0">
+                        <li class="page-item">
+                            <a href="#" class="page-link"><i class='bx bx-left-arrow-alt'></i></a>
+                        </li>
+                        <li class="page-item active">
+                            <a href="#" class="page-link">1</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link">2</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link">3</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link"><i class='bx bx-right-arrow-alt'></i></a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div> <!-- end card-->
+    </div> <!-- end col -->
+
+    <div class="col-xl-8">
+        <div class="card">
+            <div class="card-body">
+                <div class="d-flex align-items-center justify-content-between">
+                    <h4 class="card-title">Recent Orders</h4>
+
+                    <a href="#!" class="btn btn-sm btn-primary">
+                        <i class="bx bx-plus me-1"></i>Create Order
+                    </a>
+                </div>
+            </div> <!-- end card body -->
+            <div class="table-responsive table-centered">
+                <table class="table mb-0">
+                    <thead class="bg-light bg-opacity-50">
+                        <tr>
+                            <th class="border-0 py-2">Order ID.</th>
+                            <th class="border-0 py-2">Date</th>
+                            <th class="border-0 py-2">Customer Name</th>
+                            <th class="border-0 py-2">Phone No.</th>
+                            <th class="border-0 py-2">Address</th>
+                            <th class="border-0 py-2">Payment Type</th>
+                            <th class="border-0 py-2">Status</th>
+                        </tr>
+                    </thead> <!-- end thead-->
+                    <tbody>
+                        <tr>
+                            <td><a href="#!">#TZ5625</a></td>
+                            <td>29 April 2024</td>
+                            <td><a href="#!">Anna M. Hines</a></td>
+                            <td>(+1)-555-1564-261</td>
+                            <td>Burr Ridge/Illinois</td>
+                            <td>Credit Card</td>
+                            <td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
+                        </tr>
+                        <tr>
+                            <td><a href="#!">#TZ9652</a></td>
+                            <td>25 April 2024</td>
+                            <td><a href="#!">Judith H. Fritsche</a></td>
+                            <td>(+57)-305-5579-759</td>
+                            <td>SULLIVAN/Kentucky</td>
+                            <td>Credit Card</td>
+                            <td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
+                        </tr>
+                        <tr>
+                            <td><a href="#!">#TZ5984</a></td>
+                            <td>25 April 2024</td>
+                            <td><a href="#!">Peter T. Smith</a></td>
+                            <td>(+33)-655-5187-93</td>
+                            <td>Yreka/California</td>
+                            <td>Pay Pal</td>
+                            <td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
+                        </tr>
+                        <tr>
+                            <td><a href="#!">#TZ3625</a></td>
+                            <td>21 April 2024</td>
+                            <td><a href="#!">Emmanuel J. Delcid</a></td>
+                            <td>(+30)-693-5553-637</td>
+                            <td>Atlanta/Georgia</td>
+                            <td>Pay Pal</td>
+                            <td><i class="bx bxs-circle text-primary me-1"></i>Processing</td>
+                        </tr>
+                        <tr>
+                            <td><a href="#!">#TZ8652</a></td>
+                            <td>18 April 2024</td>
+                            <td><a href="#!">William J. Cook</a></td>
+                            <td>(+91)-855-5446-150</td>
+                            <td>Rosenberg/Texas</td>
+                            <td>Credit Card</td>
+                            <td><i class="bx bxs-circle text-primary me-1"></i>Processing</td>
+                        </tr>
+                    </tbody> <!-- end tbody -->
+                </table> <!-- end table -->
+            </div> <!-- table responsive -->
+            <div class="align-items-center justify-content-between row g-0 text-center text-sm-start p-3 border-top">
+                <div class="col-sm">
+                    <div class="text-muted">
+                        Showing <span class="fw-semibold">5</span> of <span class="fw-semibold">90,521</span> orders
+                    </div>
+                </div>
+                <div class="col-sm-auto mt-3 mt-sm-0">
+                    <ul class="pagination pagination-rounded m-0">
+                        <li class="page-item">
+                            <a href="#" class="page-link"><i class='bx bx-left-arrow-alt'></i></a>
+                        </li>
+                        <li class="page-item active">
+                            <a href="#" class="page-link">1</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link">2</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link">3</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link"><i class='bx bx-right-arrow-alt'></i></a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div> <!-- end card -->
+    </div> <!-- end col -->
+</div> <!-- end row -->
+@endsection
+
+@section('scripts')
+@vite(['resources/js/pages/dashboard.js'])
+@endsection

resources/views/layouts-demo/light.blade.php

@@ -0,0 +1,467 @@
+@extends('layouts.vertical', ['subtitle' => 'Light Mode Layout'])
+
+@section('html-attribute')
+data-bs-theme="light"
+@endsection
+
+@section('content')
+@include('layouts.partials/page-title', ['title' => 'Layouts', 'subtitle' => 'Light Mode Layout'])
+
+<div class="row">
+    <!-- Card 1 -->
+    <div class="col-md-6 col-xl-3">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
+                            <iconify-icon icon="solar:globus-outline"
+                                class="fs-32 text-primary avatar-title"></iconify-icon>
+                        </div>
+                    </div>
+                    <div class="col-6 text-end">
+                        <p class="text-muted mb-0 text-truncate">Clicks</p>
+                        <h3 class="text-dark mt-2 mb-0">15,352</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
+                <div class="d-flex align-items-center justify-content-between">
+                    <div>
+                        <span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 3.02%</span>
+                        <span class="text-muted ms-1 fs-12">From last month</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Card 2 -->
+    <div class="col-md-6 col-xl-3">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
+                            <iconify-icon icon="solar:bag-check-outline"
+                                class="fs-32 text-primary avatar-title"></iconify-icon>
+                        </div>
+                    </div>
+                    <div class="col-6 text-end">
+                        <p class="text-muted mb-0 text-truncate">Sales</p>
+                        <h3 class="text-dark mt-2 mb-0">8,764</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
+                <div class="d-flex align-items-center justify-content-between">
+                    <div>
+                        <span class="text-danger"> <i class="bx bxs-down-arrow fs-12"></i> 1.15%</span>
+                        <span class="text-muted ms-1 fs-12">From last month</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Card 3 -->
+    <div class="col-md-6 col-xl-3">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
+                            <iconify-icon icon="solar:calendar-date-outline"
+                                class="fs-32 text-primary avatar-title"></iconify-icon>
+                        </div>
+                    </div>
+                    <div class="col-6 text-end">
+                        <p class="text-muted mb-0 text-truncate">Events</p>
+                        <h3 class="text-dark mt-2 mb-0">5,123</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
+                <div class="d-flex align-items-center justify-content-between">
+                    <div>
+                        <span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 4.78%</span>
+                        <span class="text-muted ms-1 fs-12">From last month</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Card 4 -->
+    <div class="col-md-6 col-xl-3">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
+                            <iconify-icon icon="solar:users-group-two-rounded-outline"
+                                class="fs-32 text-primary avatar-title"></iconify-icon>
+                        </div>
+                    </div>
+                    <div class="col-6 text-end">
+                        <p class="text-muted mb-0 text-truncate">Users</p>
+                        <h3 class="text-dark mt-2 mb-0">12,945</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
+                <div class="d-flex align-items-center justify-content-between">
+                    <div>
+                        <span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 2.35%</span>
+                        <span class="text-muted ms-1 fs-12">From last month</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<div class="row">
+    <div class="col-lg-6">
+        <div class="card card-height-100">
+            <div class="card-header d-flex align-items-center justify-content-between gap-2">
+                <h4 class="card-title flex-grow-1">Top Pages</h4>
+                <div>
+                    <button type="button" class="btn btn-sm btn-outline-light">ALL</button>
+                    <button type="button" class="btn btn-sm btn-outline-light">1M</button>
+                    <button type="button" class="btn btn-sm btn-outline-light">6M</button>
+                    <button type="button" class="btn btn-sm btn-outline-light active">1Y</button>
+                </div>
+            </div>
+
+            <div class="card-body pt-0">
+                <div dir="ltr">
+                    <div id="dash-performance-chart" class="apex-charts"></div>
+                </div>
+            </div>
+
+        </div> <!-- end card-->
+    </div> <!-- end col -->
+
+    <div class="col-lg-6">
+        <div class="card">
+            <div class="d-flex card-header justify-content-between align-items-center border-bottom border-dashed">
+                <h4 class="card-title">Sessions by Country</h4>
+                <div class="dropdown">
+                    <a href="#" class="dropdown-toggle btn btn-sm btn-outline-light" data-bs-toggle="dropdown"
+                        aria-expanded="false">
+                        View Data
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-end">
+                        <!-- item-->
+                        <a href="javascript:void(0);" class="dropdown-item">Download</a>
+                        <!-- item-->
+                        <a href="javascript:void(0);" class="dropdown-item">Export</a>
+                        <!-- item-->
+                        <a href="javascript:void(0);" class="dropdown-item">Import</a>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card-body pt-0">
+                <div class="row align-items-center">
+                    <div class="col-lg-7">
+                        <div id="world-map-markers" class="mt-3" style="height: 300px">
+                        </div>
+                    </div>
+                    <div class="col-lg-5" dir="ltr">
+                        <div class="p-3 pb-0">
+                            <!-- Country Data -->
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p class="mb-1">
+                                    <iconify-icon icon="circle-flags:us"
+                                        class="fs-16 align-middle me-1"></iconify-icon> <span
+                                        class="align-middle">United States</span>
+                                </p>
+                            </div>
+                            <div class="row align-items-center mb-3">
+                                <div class="col">
+                                    <div class="progress progress-soft progress-sm">
+                                        <div class="progress-bar bg-secondary" role="progressbar"
+                                            style="width: 82.05%" aria-valuenow="" aria-valuemin="0"
+                                            aria-valuemax="100"></div>
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    <p class="mb-0 fs-13 fw-semibold">659k</p>
+                                </div>
+                            </div>
+
+                            <!-- Country Data -->
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p class="mb-1">
+                                    <iconify-icon icon="circle-flags:ru"
+                                        class="fs-16 align-middle me-1"></iconify-icon> <span
+                                        class="align-middle">Russia</span>
+                                </p>
+                            </div>
+                            <div class="row align-items-center mb-3">
+                                <div class="col">
+                                    <div class="progress progress-soft progress-sm">
+                                        <div class="progress-bar bg-info" role="progressbar" style="width: 70.5%"
+                                            aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    <p class="mb-0 fs-13 fw-semibold">485k</p>
+                                </div>
+                            </div>
+
+                            <!-- Country Data -->
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p class="mb-1">
+                                    <iconify-icon icon="circle-flags:cn"
+                                        class="fs-16 align-middle me-1"></iconify-icon> <span
+                                        class="align-middle">China</span>
+                                </p>
+                            </div>
+                            <div class="row align-items-center mb-3">
+                                <div class="col">
+                                    <div class="progress progress-soft progress-sm">
+                                        <div class="progress-bar bg-warning" role="progressbar" style="width: 65.8%"
+                                            aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    <p class="mb-0 fs-13 fw-semibold">355k</p>
+                                </div>
+                            </div>
+
+                            <!-- Country Data -->
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p class="mb-1">
+                                    <iconify-icon icon="circle-flags:ca"
+                                        class="fs-16 align-middle me-1"></iconify-icon> <span
+                                        class="align-middle">Canada</span>
+                                </p>
+                            </div>
+                            <div class="row align-items-center">
+                                <div class="col">
+                                    <div class="progress progress-soft progress-sm">
+                                        <div class="progress-bar bg-success" role="progressbar" style="width: 55.8%"
+                                            aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    <p class="mb-0 fs-13 fw-semibold">204k</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div> <!-- end card-body-->
+
+
+        </div> <!-- end card-->
+    </div> <!-- end col-->
+
+</div> <!-- End row -->
+
+<div class="row">
+    <div class="col-xl-4">
+        <div class="card">
+            <div class="card-body">
+                <div class="d-flex align-items-center justify-content-between">
+                    <h4 class="card-title">New Users</h4>
+
+                    <a href="#!" class="btn btn-sm btn-primary">
+                        <i class="bx bx-plus me-1"></i>Add New User
+                    </a>
+                </div>
+            </div> <!-- end card body -->
+
+            <div class="table-responsive table-centered">
+                <table class="table mb-0">
+                    <thead class="bg-light bg-opacity-50">
+                        <th class="border-0 py-2">Date</th>
+                        <th class="border-0 py-2">User</th>
+                        <th class="border-0 py-2">Account</th>
+                        <th class="border-0 py-2">Username</th>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>24 April, 2024</td>
+                            <td><img src="/images/users/avatar-2.jpg" alt="avatar-2"
+                                    class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Dan
+                                    Adrick</span></td>
+                            <td><span class="badge badge-soft-success">Verified</span></td>
+                            <td>@omions </td>
+                        </tr>
+                        <tr>
+                            <td>24 April, 2024</td>
+                            <td><img src="/images/users/avatar-3.jpg" alt="avatar-2"
+                                    class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Daniel
+                                    Olsen</span></td>
+                            <td><span class="badge badge-soft-success">Verified</span></td>
+                            <td>@alliates </td>
+                        </tr>
+                        <tr>
+                            <td>20 April, 2024</td>
+                            <td><img src="/images/users/avatar-4.jpg" alt="avatar-2"
+                                    class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Jack
+                                    Roldan</span></td>
+                            <td><span class="badge badge-soft-warning">Pending</span></td>
+                            <td>@griys </td>
+                        </tr>
+                        <tr>
+                            <td>18 April, 2024</td>
+                            <td><img src="/images/users/avatar-5.jpg" alt="avatar-2"
+                                    class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Betty
+                                    Cox</span></td>
+                            <td><span class="badge badge-soft-success">Verified</span></td>
+                            <td>@reffon </td>
+                        </tr>
+                        <tr>
+                            <td>18 April, 2024</td>
+                            <td><img src="/images/users/avatar-6.jpg" alt="avatar-2"
+                                    class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Carlos
+                                    Johnson</span></td>
+                            <td><span class="badge badge-soft-danger">Blocked</span></td>
+                            <td>@bebo </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div> <!-- table responsive -->
+
+            <div class="align-items-center justify-content-between row g-0 text-center text-sm-start p-3 border-top">
+                <div class="col-sm">
+                    <div class="text-muted">
+                        Showing <span class="fw-semibold">5</span> of <span class="fw-semibold">587</span> users
+                    </div>
+                </div>
+                <div class="col-sm-auto mt-3 mt-sm-0">
+                    <ul class="pagination pagination-rounded m-0">
+                        <li class="page-item">
+                            <a href="#" class="page-link"><i class='bx bx-left-arrow-alt'></i></a>
+                        </li>
+                        <li class="page-item active">
+                            <a href="#" class="page-link">1</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link">2</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link">3</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link"><i class='bx bx-right-arrow-alt'></i></a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div> <!-- end card-->
+    </div> <!-- end col -->
+
+    <div class="col-xl-8">
+        <div class="card">
+            <div class="card-body">
+                <div class="d-flex align-items-center justify-content-between">
+                    <h4 class="card-title">Recent Orders</h4>
+
+                    <a href="#!" class="btn btn-sm btn-primary">
+                        <i class="bx bx-plus me-1"></i>Create Order
+                    </a>
+                </div>
+            </div> <!-- end card body -->
+            <div class="table-responsive table-centered">
+                <table class="table mb-0">
+                    <thead class="bg-light bg-opacity-50">
+                        <tr>
+                            <th class="border-0 py-2">Order ID.</th>
+                            <th class="border-0 py-2">Date</th>
+                            <th class="border-0 py-2">Customer Name</th>
+                            <th class="border-0 py-2">Phone No.</th>
+                            <th class="border-0 py-2">Address</th>
+                            <th class="border-0 py-2">Payment Type</th>
+                            <th class="border-0 py-2">Status</th>
+                        </tr>
+                    </thead> <!-- end thead-->
+                    <tbody>
+                        <tr>
+                            <td><a href="#!">#TZ5625</a></td>
+                            <td>29 April 2024</td>
+                            <td><a href="#!">Anna M. Hines</a></td>
+                            <td>(+1)-555-1564-261</td>
+                            <td>Burr Ridge/Illinois</td>
+                            <td>Credit Card</td>
+                            <td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
+                        </tr>
+                        <tr>
+                            <td><a href="#!">#TZ9652</a></td>
+                            <td>25 April 2024</td>
+                            <td><a href="#!">Judith H. Fritsche</a></td>
+                            <td>(+57)-305-5579-759</td>
+                            <td>SULLIVAN/Kentucky</td>
+                            <td>Credit Card</td>
+                            <td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
+                        </tr>
+                        <tr>
+                            <td><a href="#!">#TZ5984</a></td>
+                            <td>25 April 2024</td>
+                            <td><a href="#!">Peter T. Smith</a></td>
+                            <td>(+33)-655-5187-93</td>
+                            <td>Yreka/California</td>
+                            <td>Pay Pal</td>
+                            <td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
+                        </tr>
+                        <tr>
+                            <td><a href="#!">#TZ3625</a></td>
+                            <td>21 April 2024</td>
+                            <td><a href="#!">Emmanuel J. Delcid</a></td>
+                            <td>(+30)-693-5553-637</td>
+                            <td>Atlanta/Georgia</td>
+                            <td>Pay Pal</td>
+                            <td><i class="bx bxs-circle text-primary me-1"></i>Processing</td>
+                        </tr>
+                        <tr>
+                            <td><a href="#!">#TZ8652</a></td>
+                            <td>18 April 2024</td>
+                            <td><a href="#!">William J. Cook</a></td>
+                            <td>(+91)-855-5446-150</td>
+                            <td>Rosenberg/Texas</td>
+                            <td>Credit Card</td>
+                            <td><i class="bx bxs-circle text-primary me-1"></i>Processing</td>
+                        </tr>
+                    </tbody> <!-- end tbody -->
+                </table> <!-- end table -->
+            </div> <!-- table responsive -->
+            <div class="align-items-center justify-content-between row g-0 text-center text-sm-start p-3 border-top">
+                <div class="col-sm">
+                    <div class="text-muted">
+                        Showing <span class="fw-semibold">5</span> of <span class="fw-semibold">90,521</span> orders
+                    </div>
+                </div>
+                <div class="col-sm-auto mt-3 mt-sm-0">
+                    <ul class="pagination pagination-rounded m-0">
+                        <li class="page-item">
+                            <a href="#" class="page-link"><i class='bx bx-left-arrow-alt'></i></a>
+                        </li>
+                        <li class="page-item active">
+                            <a href="#" class="page-link">1</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link">2</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link">3</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link"><i class='bx bx-right-arrow-alt'></i></a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div> <!-- end card -->
+    </div> <!-- end col -->
+</div> <!-- end row -->
+@endsection
+
+@section('scripts')
+@vite(['resources/js/pages/dashboard.js'])
+@endsection

resources/views/layouts-demo/small-sidenav.blade.php

@@ -0,0 +1,467 @@
+@extends('layouts.vertical', ['subtitle' => 'Small Sidenav Menu'])
+
+@section('html-attribute')
+data-sidebar-size="condensed"
+@endsection
+
+@section('content')
+
+@include('layouts.partials/page-title', ['title' => 'Layouts', 'subtitle' => 'Small Sidenav Menu'])
+
+<div class="row">
+    <!-- Card 1 -->
+    <div class="col-md-6 col-xl-3">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
+                            <iconify-icon icon="solar:globus-outline"
+                                class="fs-32 text-primary avatar-title"></iconify-icon>
+                        </div>
+                    </div>
+                    <div class="col-6 text-end">
+                        <p class="text-muted mb-0 text-truncate">Clicks</p>
+                        <h3 class="text-dark mt-2 mb-0">15,352</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
+                <div class="d-flex align-items-center justify-content-between">
+                    <div>
+                        <span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 3.02%</span>
+                        <span class="text-muted ms-1 fs-12">From last month</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Card 2 -->
+    <div class="col-md-6 col-xl-3">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
+                            <iconify-icon icon="solar:bag-check-outline"
+                                class="fs-32 text-primary avatar-title"></iconify-icon>
+                        </div>
+                    </div>
+                    <div class="col-6 text-end">
+                        <p class="text-muted mb-0 text-truncate">Sales</p>
+                        <h3 class="text-dark mt-2 mb-0">8,764</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
+                <div class="d-flex align-items-center justify-content-between">
+                    <div>
+                        <span class="text-danger"> <i class="bx bxs-down-arrow fs-12"></i> 1.15%</span>
+                        <span class="text-muted ms-1 fs-12">From last month</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Card 3 -->
+    <div class="col-md-6 col-xl-3">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
+                            <iconify-icon icon="solar:calendar-date-outline"
+                                class="fs-32 text-primary avatar-title"></iconify-icon>
+                        </div>
+                    </div>
+                    <div class="col-6 text-end">
+                        <p class="text-muted mb-0 text-truncate">Events</p>
+                        <h3 class="text-dark mt-2 mb-0">5,123</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
+                <div class="d-flex align-items-center justify-content-between">
+                    <div>
+                        <span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 4.78%</span>
+                        <span class="text-muted ms-1 fs-12">From last month</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Card 4 -->
+    <div class="col-md-6 col-xl-3">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
+                            <iconify-icon icon="solar:users-group-two-rounded-outline"
+                                class="fs-32 text-primary avatar-title"></iconify-icon>
+                        </div>
+                    </div>
+                    <div class="col-6 text-end">
+                        <p class="text-muted mb-0 text-truncate">Users</p>
+                        <h3 class="text-dark mt-2 mb-0">12,945</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
+                <div class="d-flex align-items-center justify-content-between">
+                    <div>
+                        <span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 2.35%</span>
+                        <span class="text-muted ms-1 fs-12">From last month</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<div class="row">
+    <div class="col-lg-6">
+        <div class="card card-height-100">
+            <div class="card-header d-flex align-items-center justify-content-between gap-2">
+                <h4 class="card-title flex-grow-1">Top Pages</h4>
+                <div>
+                    <button type="button" class="btn btn-sm btn-outline-light">ALL</button>
+                    <button type="button" class="btn btn-sm btn-outline-light">1M</button>
+                    <button type="button" class="btn btn-sm btn-outline-light">6M</button>
+                    <button type="button" class="btn btn-sm btn-outline-light active">1Y</button>
+                </div>
+            </div>
+
+            <div class="card-body pt-0">
+                <div dir="ltr">
+                    <div id="dash-performance-chart" class="apex-charts"></div>
+                </div>
+            </div>
+
+        </div> <!-- end card-->
+    </div> <!-- end col -->
+
+    <div class="col-lg-6">
+        <div class="card">
+            <div class="d-flex card-header justify-content-between align-items-center border-bottom border-dashed">
+                <h4 class="card-title">Sessions by Country</h4>
+                <div class="dropdown">
+                    <a href="#" class="dropdown-toggle btn btn-sm btn-outline-light" data-bs-toggle="dropdown"
+                        aria-expanded="false">
+                        View Data
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-end">
+                        <!-- item-->
+                        <a href="javascript:void(0);" class="dropdown-item">Download</a>
+                        <!-- item-->
+                        <a href="javascript:void(0);" class="dropdown-item">Export</a>
+                        <!-- item-->
+                        <a href="javascript:void(0);" class="dropdown-item">Import</a>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card-body pt-0">
+                <div class="row align-items-center">
+                    <div class="col-lg-7">
+                        <div id="world-map-markers" class="mt-3" style="height: 300px">
+                        </div>
+                    </div>
+                    <div class="col-lg-5" dir="ltr">
+                        <div class="p-3 pb-0">
+                            <!-- Country Data -->
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p class="mb-1">
+                                    <iconify-icon icon="circle-flags:us"
+                                        class="fs-16 align-middle me-1"></iconify-icon> <span
+                                        class="align-middle">United States</span>
+                                </p>
+                            </div>
+                            <div class="row align-items-center mb-3">
+                                <div class="col">
+                                    <div class="progress progress-soft progress-sm">
+                                        <div class="progress-bar bg-secondary" role="progressbar"
+                                            style="width: 82.05%" aria-valuenow="" aria-valuemin="0"
+                                            aria-valuemax="100"></div>
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    <p class="mb-0 fs-13 fw-semibold">659k</p>
+                                </div>
+                            </div>
+
+                            <!-- Country Data -->
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p class="mb-1">
+                                    <iconify-icon icon="circle-flags:ru"
+                                        class="fs-16 align-middle me-1"></iconify-icon> <span
+                                        class="align-middle">Russia</span>
+                                </p>
+                            </div>
+                            <div class="row align-items-center mb-3">
+                                <div class="col">
+                                    <div class="progress progress-soft progress-sm">
+                                        <div class="progress-bar bg-info" role="progressbar" style="width: 70.5%"
+                                            aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    <p class="mb-0 fs-13 fw-semibold">485k</p>
+                                </div>
+                            </div>
+
+                            <!-- Country Data -->
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p class="mb-1">
+                                    <iconify-icon icon="circle-flags:cn"
+                                        class="fs-16 align-middle me-1"></iconify-icon> <span
+                                        class="align-middle">China</span>
+                                </p>
+                            </div>
+                            <div class="row align-items-center mb-3">
+                                <div class="col">
+                                    <div class="progress progress-soft progress-sm">
+                                        <div class="progress-bar bg-warning" role="progressbar" style="width: 65.8%"
+                                            aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    <p class="mb-0 fs-13 fw-semibold">355k</p>
+                                </div>
+                            </div>
+
+                            <!-- Country Data -->
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p class="mb-1">
+                                    <iconify-icon icon="circle-flags:ca"
+                                        class="fs-16 align-middle me-1"></iconify-icon> <span
+                                        class="align-middle">Canada</span>
+                                </p>
+                            </div>
+                            <div class="row align-items-center">
+                                <div class="col">
+                                    <div class="progress progress-soft progress-sm">
+                                        <div class="progress-bar bg-success" role="progressbar" style="width: 55.8%"
+                                            aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    <p class="mb-0 fs-13 fw-semibold">204k</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div> <!-- end card-body-->
+
+
+        </div> <!-- end card-->
+    </div> <!-- end col-->
+
+</div> <!-- End row -->
+
+<div class="row">
+    <div class="col-xl-4">
+        <div class="card">
+            <div class="card-body">
+                <div class="d-flex align-items-center justify-content-between">
+                    <h4 class="card-title">New Users</h4>
+
+                    <a href="#!" class="btn btn-sm btn-primary">
+                        <i class="bx bx-plus me-1"></i>Add New User
+                    </a>
+                </div>
+            </div> <!-- end card body -->
+
+            <div class="table-responsive table-centered">
+                <table class="table mb-0">
+                    <thead class="bg-light bg-opacity-50">
+                        <th class="border-0 py-2">Date</th>
+                        <th class="border-0 py-2">User</th>
+                        <th class="border-0 py-2">Account</th>
+                        <th class="border-0 py-2">Username</th>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>24 April, 2024</td>
+                            <td><img src="/images/users/avatar-2.jpg" alt="avatar-2"
+                                    class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Dan
+                                    Adrick</span></td>
+                            <td><span class="badge badge-soft-success">Verified</span></td>
+                            <td>@omions </td>
+                        </tr>
+                        <tr>
+                            <td>24 April, 2024</td>
+                            <td><img src="/images/users/avatar-3.jpg" alt="avatar-2"
+                                    class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Daniel
+                                    Olsen</span></td>
+                            <td><span class="badge badge-soft-success">Verified</span></td>
+                            <td>@alliates </td>
+                        </tr>
+                        <tr>
+                            <td>20 April, 2024</td>
+                            <td><img src="/images/users/avatar-4.jpg" alt="avatar-2"
+                                    class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Jack
+                                    Roldan</span></td>
+                            <td><span class="badge badge-soft-warning">Pending</span></td>
+                            <td>@griys </td>
+                        </tr>
+                        <tr>
+                            <td>18 April, 2024</td>
+                            <td><img src="/images/users/avatar-5.jpg" alt="avatar-2"
+                                    class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Betty
+                                    Cox</span></td>
+                            <td><span class="badge badge-soft-success">Verified</span></td>
+                            <td>@reffon </td>
+                        </tr>
+                        <tr>
+                            <td>18 April, 2024</td>
+                            <td><img src="/images/users/avatar-6.jpg" alt="avatar-2"
+                                    class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Carlos
+                                    Johnson</span></td>
+                            <td><span class="badge badge-soft-danger">Blocked</span></td>
+                            <td>@bebo </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div> <!-- table responsive -->
+
+            <div class="align-items-center justify-content-between row g-0 text-center text-sm-start p-3 border-top">
+                <div class="col-sm">
+                    <div class="text-muted">
+                        Showing <span class="fw-semibold">5</span> of <span class="fw-semibold">587</span> users
+                    </div>
+                </div>
+                <div class="col-sm-auto mt-3 mt-sm-0">
+                    <ul class="pagination pagination-rounded m-0">
+                        <li class="page-item">
+                            <a href="#" class="page-link"><i class='bx bx-left-arrow-alt'></i></a>
+                        </li>
+                        <li class="page-item active">
+                            <a href="#" class="page-link">1</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link">2</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link">3</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link"><i class='bx bx-right-arrow-alt'></i></a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div> <!-- end card-->
+    </div> <!-- end col -->
+
+    <div class="col-xl-8">
+        <div class="card">
+            <div class="card-body">
+                <div class="d-flex align-items-center justify-content-between">
+                    <h4 class="card-title">Recent Orders</h4>
+
+                    <a href="#!" class="btn btn-sm btn-primary">
+                        <i class="bx bx-plus me-1"></i>Create Order
+                    </a>
+                </div>
+            </div> <!-- end card body -->
+            <div class="table-responsive table-centered">
+                <table class="table mb-0">
+                    <thead class="bg-light bg-opacity-50">
+                        <tr>
+                            <th class="border-0 py-2">Order ID.</th>
+                            <th class="border-0 py-2">Date</th>
+                            <th class="border-0 py-2">Customer Name</th>
+                            <th class="border-0 py-2">Phone No.</th>
+                            <th class="border-0 py-2">Address</th>
+                            <th class="border-0 py-2">Payment Type</th>
+                            <th class="border-0 py-2">Status</th>
+                        </tr>
+                    </thead> <!-- end thead-->
+                    <tbody>
+                        <tr>
+                            <td><a href="#!">#TZ5625</a></td>
+                            <td>29 April 2024</td>
+                            <td><a href="#!">Anna M. Hines</a></td>
+                            <td>(+1)-555-1564-261</td>
+                            <td>Burr Ridge/Illinois</td>
+                            <td>Credit Card</td>
+                            <td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
+                        </tr>
+                        <tr>
+                            <td><a href="#!">#TZ9652</a></td>
+                            <td>25 April 2024</td>
+                            <td><a href="#!">Judith H. Fritsche</a></td>
+                            <td>(+57)-305-5579-759</td>
+                            <td>SULLIVAN/Kentucky</td>
+                            <td>Credit Card</td>
+                            <td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
+                        </tr>
+                        <tr>
+                            <td><a href="#!">#TZ5984</a></td>
+                            <td>25 April 2024</td>
+                            <td><a href="#!">Peter T. Smith</a></td>
+                            <td>(+33)-655-5187-93</td>
+                            <td>Yreka/California</td>
+                            <td>Pay Pal</td>
+                            <td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
+                        </tr>
+                        <tr>
+                            <td><a href="#!">#TZ3625</a></td>
+                            <td>21 April 2024</td>
+                            <td><a href="#!">Emmanuel J. Delcid</a></td>
+                            <td>(+30)-693-5553-637</td>
+                            <td>Atlanta/Georgia</td>
+                            <td>Pay Pal</td>
+                            <td><i class="bx bxs-circle text-primary me-1"></i>Processing</td>
+                        </tr>
+                        <tr>
+                            <td><a href="#!">#TZ8652</a></td>
+                            <td>18 April 2024</td>
+                            <td><a href="#!">William J. Cook</a></td>
+                            <td>(+91)-855-5446-150</td>
+                            <td>Rosenberg/Texas</td>
+                            <td>Credit Card</td>
+                            <td><i class="bx bxs-circle text-primary me-1"></i>Processing</td>
+                        </tr>
+                    </tbody> <!-- end tbody -->
+                </table> <!-- end table -->
+            </div> <!-- table responsive -->
+            <div class="align-items-center justify-content-between row g-0 text-center text-sm-start p-3 border-top">
+                <div class="col-sm">
+                    <div class="text-muted">
+                        Showing <span class="fw-semibold">5</span> of <span class="fw-semibold">90,521</span> orders
+                    </div>
+                </div>
+                <div class="col-sm-auto mt-3 mt-sm-0">
+                    <ul class="pagination pagination-rounded m-0">
+                        <li class="page-item">
+                            <a href="#" class="page-link"><i class='bx bx-left-arrow-alt'></i></a>
+                        </li>
+                        <li class="page-item active">
+                            <a href="#" class="page-link">1</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link">2</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link">3</a>
+                        </li>
+                        <li class="page-item">
+                            <a href="#" class="page-link"><i class='bx bx-right-arrow-alt'></i></a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div> <!-- end card -->
+    </div> <!-- end col -->
+</div> <!-- end row -->
+@endsection
+@section('scripts')
+@vite(['resources/js/pages/dashboard.js'])
+@endsection

resources/views/layouts/base.blade.php

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html @yield('html-attribute')>
+
+<head>
+    @include('layouts.partials/title-meta')
+
+    @include('layouts.partials/head-css')
+</head>
+
+<body @yield('body-attribuet')>
+
+    @yield('content')
+
+    @include('layouts.partials/vendor-scripts')
+
+</body>
+
+</html>

resources/views/layouts/partials/footer.blade.php

@@ -0,0 +1,11 @@
+<footer class="footer">
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-12 text-center">
+                <script>
+                    document.write(new Date().getFullYear())
+                </script> &copy; Darkone by StackBros.
+            </div>
+        </div>
+    </div>
+</footer>

resources/views/layouts/partials/head-css.blade.php

@@ -0,0 +1,10 @@
+<!-- Google Font Family link -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap" rel="stylesheet">
+
+@yield('css')
+
+@vite([ 'resources/scss/icons.scss', 'resources/scss/style.scss'])
+
+@vite([ 'resources/js/config.js'])

resources/views/layouts/partials/page-title.blade.php

@@ -0,0 +1,11 @@
+<div class="row">
+    <div class="col-12">
+        <div class="page-title-box">
+            <h4 class="mb-0">{{ $subtitle}} </h4>
+            <ol class="breadcrumb mb-0">
+                <li class="breadcrumb-item"><a href="javascript: void(0);">{{ $title}}</a></li>
+                <li class="breadcrumb-item active">{{ $subtitle}} </li>
+            </ol>
+        </div>
+    </div>
+</div>

resources/views/layouts/partials/sidebar.blade.php

@@ -0,0 +1,359 @@
+<div class="app-sidebar">
+     <!-- Sidebar Logo -->
+     <div class="logo-box">
+          <a href="{{ route('any', 'index') }}" class="logo-dark">
+               <img src="/images/logo-sm.png" class="logo-sm" alt="logo sm">
+               <img src="/images/logo-dark.png" class="logo-lg" alt="logo dark">
+          </a>
+
+          <a href="{{ route('any', 'index') }}" class="logo-light">
+               <img src="/images/logo-sm.png" class="logo-sm" alt="logo sm">
+               <img src="/images/logo-light.png" class="logo-lg" alt="logo light">
+          </a>
+     </div>
+
+     <div class="scrollbar" data-simplebar>
+
+          <ul class="navbar-nav" id="navbar-nav">
+
+               <li class="menu-title">Menu...</li>
+
+               <li class="nav-item">
+                    <a class="nav-link" href="{{ route('any', 'index') }}
+">
+                         <span class="nav-icon">
+                              <iconify-icon icon="mingcute:home-3-line"></iconify-icon>
+                         </span>
+                         <span class="nav-text"> Dashboard </span>
+                         <span class="badge bg-primary badge-pill text-end">03</span>
+                    </a>
+               </li>
+
+               <li class="nav-item">
+                    <a class="nav-link menu-arrow" href="#sidebarAuthentication" data-bs-toggle="collapse" role="button"
+                         aria-expanded="false" aria-controls="sidebarAuthentication">
+                         <span class="nav-icon">
+                              <iconify-icon icon="mingcute:user-3-line"></iconify-icon>
+                         </span>
+                         <span class="nav-text"> Authentication </span>
+                    </a>
+                    <div class="collapse" id="sidebarAuthentication">
+                         <ul class="nav sub-navbar-nav">
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['auth','signin']) }}">Sign In</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['auth','signup']) }}">Sign Up</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['auth','password']) }}">Reset Password</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['auth','lock-screen']) }}">Lock Screen</a>
+                              </li>
+                         </ul>
+                    </div>
+               </li>
+
+               <li class="nav-item">
+                    <a class="nav-link menu-arrow" href="#sidebarError" data-bs-toggle="collapse" role="button"
+                         aria-expanded="false" aria-controls="sidebarError">
+                         <span class="nav-icon">
+                              <iconify-icon icon="mingcute:bug-line"></iconify-icon>
+                         </span>
+                         <span class="nav-text"> Error Pages</span>
+                    </a>
+                    <div class="collapse" id="sidebarError">
+                         <ul class="nav sub-navbar-nav">
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['pages','404']) }}">Pages 404</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['pages','404-alt']) }}">Pages 404 Alt</a>
+                              </li>
+                         </ul>
+                    </div>
+               </li>
+
+               <li class="menu-title">UI Kit...</li>
+
+               <li class="nav-item">
+                    <a class="nav-link menu-arrow" href="#sidebarBaseUI" data-bs-toggle="collapse" role="button"
+                         aria-expanded="false" aria-controls="sidebarBaseUI">
+                         <span class="nav-icon"><iconify-icon icon="mingcute:leaf-line"></iconify-icon></span>
+                         <span class="nav-text"> Base UI </span>
+                    </a>
+                    <div class="collapse" id="sidebarBaseUI">
+                         <ul class="nav sub-navbar-nav">
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['ui','accordion']) }}">Accordion</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['ui','alerts']) }}">Alerts</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['ui','avatar']) }}">Avatar</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['ui','badge']) }}">Badge</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['ui','breadcrumb']) }}">Breadcrumb</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['ui','buttons']) }}">Buttons</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['ui','card']) }}">Card</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['ui','carousel']) }}">Carousel</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['ui','collapse']) }}">Collapse</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['ui','dropdown']) }}">Dropdown</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['ui','list-group']) }}">List Group</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['ui','modal']) }}">Modal</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['ui','tabs']) }}">Tabs</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['ui','offcanvas']) }}">Offcanvas</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['ui','pagination']) }}">Pagination</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['ui','placeholders']) }}">Placeholders</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['ui','popovers']) }}">Popovers</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['ui','progress']) }}">Progress</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['ui','scrollspy']) }}">Scrollspy</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['ui','spinners']) }}">Spinners</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['ui','toasts']) }}">Toasts</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['ui','tooltips']) }}">Tooltips</a>
+                              </li>
+                         </ul>
+                    </div>
+               </li>
+
+               <li class="nav-item">
+                    <a class="nav-link" href="{{ route ('second' , ['pages','charts']) }}">
+                         <span class="nav-icon">
+                              <iconify-icon icon="mingcute:chart-bar-line"></iconify-icon>
+                         </span>
+                         <span class="nav-text"> Apex Charts </span>
+                    </a>
+               </li>
+
+               <li class="nav-item">
+                    <a class="nav-link menu-arrow" href="#sidebarForms" data-bs-toggle="collapse" role="button"
+                         aria-expanded="false" aria-controls="sidebarForms">
+                         <span class="nav-icon">
+                              <iconify-icon icon="mingcute:box-line"></iconify-icon>
+                         </span>
+                         <span class="nav-text"> Forms </span>
+                    </a>
+                    <div class="collapse" id="sidebarForms">
+                         <ul class="nav sub-navbar-nav">
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['forms','basic']) }}">Basic Elements</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['forms','flatpicker']) }}">Flatpicker</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['forms','validation']) }}">Validation</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['forms','fileuploads']) }}">File Upload</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['forms','editors']) }}">Editors</a>
+                              </li>
+                         </ul>
+                    </div>
+               </li>
+
+               <li class="nav-item">
+                    <a class="nav-link menu-arrow" href="#sidebarTables" data-bs-toggle="collapse" role="button"
+                         aria-expanded="false" aria-controls="sidebarTables">
+                         <span class="nav-icon">
+                              <iconify-icon icon="mingcute:table-line"></iconify-icon>
+                         </span>
+                         <span class="nav-text"> Tables </span>
+                    </a>
+                    <div class="collapse" id="sidebarTables">
+                         <ul class="nav sub-navbar-nav">
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['tables','basic']) }}">Basic Tables</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['tables','gridjs']) }}">Grid Js</a>
+                              </li>
+                         </ul>
+                    </div>
+               </li>
+
+               <li class="nav-item">
+                    <a class="nav-link menu-arrow" href="#sidebarIcons" data-bs-toggle="collapse" role="button"
+                         aria-expanded="false" aria-controls="sidebarIcons">
+                         <span class="nav-icon">
+                              <iconify-icon icon="mingcute:dribbble-line"></iconify-icon>
+                         </span>
+                         <span class="nav-text"> Icons </span>
+                    </a>
+                    <div class="collapse" id="sidebarIcons">
+                         <ul class="nav sub-navbar-nav">
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['icons','boxicons']) }}">Boxicons</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['icons','solar']) }}">Solar Icons</a>
+                              </li>
+                         </ul>
+                    </div>
+               </li>
+
+               <li class="nav-item">
+                    <a class="nav-link menu-arrow" href="#sidebarMaps" data-bs-toggle="collapse" role="button"
+                         aria-expanded="false" aria-controls="sidebarMaps">
+                         <span class="nav-icon">
+                              <iconify-icon icon="mingcute:map-line"></iconify-icon>
+                         </span>
+                         <span class="nav-text"> Maps </span>
+                    </a>
+                    <div class="collapse" id="sidebarMaps">
+                         <ul class="nav sub-navbar-nav">
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['maps','google']) }}">Google Maps</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['maps','vector']) }}">Vector Maps</a>
+                              </li>
+                         </ul>
+                    </div>
+               </li>
+
+               <li class="menu-title">Other</li>
+
+               <li class="nav-item">
+                    <a class="nav-link menu-arrow" href="#sidebarLayouts" data-bs-toggle="collapse" role="button"
+                         aria-expanded="false" aria-controls="sidebarLayouts">
+                         <span class="nav-icon">
+                              <iconify-icon icon="mingcute:layout-line"></iconify-icon>
+                         </span>
+                         <span class="nav-text"> Layouts </span>
+                    </a>
+                    <div class="collapse" id="sidebarLayouts">
+                         <ul class="nav sub-navbar-nav">
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['layouts-demo','dark-sidenav']) }}" target="_blank">Dark
+                                        Sidenav</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['layouts-demo','dark-topnav']) }}" target="_blank">Dark
+                                        Topnav</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['layouts-demo','small-sidenav']) }}" target="_blank">Small
+                                        Sidenav</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('second' , ['layouts-demo','hidden-sidenav']) }}" target="_blank">Hidden
+                                        Sidenav</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" target="_blank" href="{{ route ('second' , ['layouts-demo','light']) }}">
+                                        <span class="nav-text">Light Mode</span>
+                                        <span class="badge badge-soft-danger badge-pill text-end">Hot</span>
+                                   </a>
+                              </li>
+                         </ul>
+                    </div>
+               </li>
+
+               <li class="nav-item">
+                    <a class="nav-link menu-arrow" href="#sidebarMultiLevelDemo" data-bs-toggle="collapse" role="button"
+                         aria-expanded="false" aria-controls="sidebarMultiLevelDemo">
+                         <span class="nav-icon">
+                              <iconify-icon icon="mingcute:menu-line"></iconify-icon>
+                         </span>
+                         <span class="nav-text"> Menu Item </span>
+                    </a>
+                    <div class="collapse" id="sidebarMultiLevelDemo">
+                         <ul class="nav sub-navbar-nav">
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="javascript:void(0);">Menu Item 1</a>
+                              </li>
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link  menu-arrow" href="#sidebarItemDemoSubItem"
+                                        data-bs-toggle="collapse" role="button" aria-expanded="false"
+                                        aria-controls="sidebarItemDemoSubItem">
+                                        <span> Menu Item 2 </span>
+                                   </a>
+                                   <div class="collapse" id="sidebarItemDemoSubItem">
+                                        <ul class="nav sub-navbar-nav">
+                                             <li class="sub-nav-item">
+                                                  <a class="sub-nav-link" href="javascript:void(0);">Menu Sub item</a>
+                                             </li>
+                                        </ul>
+                                   </div>
+                              </li>
+                         </ul>
+                    </div>
+               </li>
+
+               <li class="nav-item">
+                    <a class="nav-link disabled" href="javascript:void(0);">
+                         <span class="nav-icon">
+                              <iconify-icon icon="mingcute:close-circle-line"></iconify-icon>
+                         </span>
+                         <span class="nav-text"> Disable Item </span>
+                    </a>
+               </li>
+          </ul>
+     </div>
+</div>
+
+
+<div class="animated-stars">
+     <div class="shooting-star"></div>
+     <div class="shooting-star"></div>
+     <div class="shooting-star"></div>
+     <div class="shooting-star"></div>
+     <div class="shooting-star"></div>
+     <div class="shooting-star"></div>
+     <div class="shooting-star"></div>
+     <div class="shooting-star"></div>
+     <div class="shooting-star"></div>
+     <div class="shooting-star"></div>
+     <div class="shooting-star"></div>
+     <div class="shooting-star"></div>
+     <div class="shooting-star"></div>
+     <div class="shooting-star"></div>
+     <div class="shooting-star"></div>
+     <div class="shooting-star"></div>
+     <div class="shooting-star"></div>
+     <div class="shooting-star"></div>
+     <div class="shooting-star"></div>
+     <div class="shooting-star"></div>
+</div>

resources/views/layouts/partials/title-meta.blade.php

@@ -0,0 +1,13 @@
+<!-- Title Meta -->
+<meta charset="utf-8" />
+<title>{{ $subtitle}} | Darkone - Dark Admin & UI Kit Template</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="description" content="Darkone: An advanced, fully responsive admin dashboard template packed with features to streamline your analytics and management needs." />
+<meta name="author" content="StackBros" />
+<meta name="keywords" content="Darkone, admin dashboard, responsive template, analytics, modern UI, management tools" />
+<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<meta name="robots" content="index, follow" />
+<meta name="theme-color" content="#ffffff">
+
+<!-- App favicon -->
+<link rel="shortcut icon" href="/images/favicon.ico">

resources/views/layouts/partials/topbar.blade.php

@@ -0,0 +1,193 @@
+<header class="app-topbar">
+     <div class="container-fluid">
+          <div class="navbar-header">
+               <div class="d-flex align-items-center gap-2">
+                    <!-- Menu Toggle Button -->
+                    <div class="topbar-item">
+                         <button type="button" class="button-toggle-menu topbar-button">
+                              <iconify-icon icon="solar:hamburger-menu-outline"
+                                   class="fs-24 align-middle"></iconify-icon>
+                         </button>
+                    </div>
+
+                    <!-- App Search-->
+                    <form class="app-search d-none d-md-block me-auto">
+                         <div class="position-relative">
+                              <input type="search" class="form-control" placeholder="admin,widgets..."
+                                   autocomplete="off" value="">
+                              <iconify-icon icon="solar:magnifer-outline" class="search-widget-icon"></iconify-icon>
+                         </div>
+                    </form>
+               </div>
+
+               <div class="d-flex align-items-center gap-2">
+                    <!-- Theme Color (Light/Dark) -->
+                    <div class="topbar-item">
+                         <button type="button" class="topbar-button" id="light-dark-mode">
+                              <iconify-icon icon="solar:moon-outline"
+                                   class="fs-22 align-middle light-mode"></iconify-icon>
+                              <iconify-icon icon="solar:sun-2-outline"
+                                   class="fs-22 align-middle dark-mode"></iconify-icon>
+                         </button>
+                    </div>
+
+                    <!-- Notification -->
+                    <div class="dropdown topbar-item">
+                         <button type="button" class="topbar-button position-relative"
+                              id="page-header-notifications-dropdown" data-bs-toggle="dropdown" aria-haspopup="true"
+                              aria-expanded="false">
+                              <iconify-icon icon="solar:bell-bing-outline" class="fs-22 align-middle"></iconify-icon>
+                              <span
+                                   class="position-absolute topbar-badge fs-10 translate-middle badge bg-danger rounded-pill">5<span
+                                        class="visually-hidden">unread messages</span></span>
+                         </button>
+                         <div class="dropdown-menu py-0 dropdown-lg dropdown-menu-end"
+                              aria-labelledby="page-header-notifications-dropdown">
+                              <div class="p-2 border-bottom bg-light bg-opacity-50">
+                                   <div class="row align-items-center">
+                                        <div class="col">
+                                             <h6 class="m-0 fs-16 fw-semibold"> Notifications (5)</h6>
+                                        </div>
+                                        <div class="col-auto">
+                                             <a href="javascript: void(0);" class="text-dark text-decoration-underline">
+                                                  <small>Clear All</small>
+                                             </a>
+                                        </div>
+                                   </div>
+                              </div>
+                              <div data-simplebar style="max-height: 250px;">
+                                   <!-- Item -->
+                                   <a href="javascript:void(0);" class="dropdown-item p-2 border-bottom text-wrap">
+                                        <div class="d-flex">
+                                             <div class="flex-shrink-0">
+                                                  <img src="/images/users/avatar-1.jpg"
+                                                       class="img-fluid me-2 avatar-sm rounded-circle" alt="avatar-1" />
+                                             </div>
+                                             <div class="flex-grow-1">
+                                                  <p class="mb-0"><span class="fw-medium">Sally Bieber </span>started
+                                                       following you. Check out their profile!"</span></p>
+                                             </div>
+                                        </div>
+                                   </a>
+                                   <!-- Item -->
+                                   <a href="javascript:void(0);" class="dropdown-item p-2 border-bottom">
+                                        <div class="d-flex">
+                                             <div class="flex-shrink-0">
+                                                  <div class="avatar-sm me-2">
+                                                       <span
+                                                            class="avatar-title text-bg-info fw-semibold fs-20 rounded-circle">
+                                                            G
+                                                       </span>
+                                                  </div>
+                                             </div>
+                                             <div class="flex-grow-1">
+                                                  <p class="mb-0 fw-medium">Gloria Chambers</p>
+                                                  <p class="mb-0 text-wrap">
+                                                       mentioned you in a comment: '@admin, check this out!
+                                                  </p>
+                                             </div>
+                                        </div>
+                                   </a>
+                                   <!-- Item -->
+                                   <a href="javascript:void(0);" class="dropdown-item p-2 border-bottom">
+                                        <div class="d-flex">
+                                             <div class="flex-shrink-0">
+                                                  <img src="/images/users/avatar-3.jpg"
+                                                       class="img-fluid me-2 avatar-sm rounded-circle" alt="avatar-3" />
+                                             </div>
+                                             <div class="flex-grow-1">
+                                                  <p class="mb-0 fw-medium">Jacob Gines</p>
+                                                  <p class="mb-0 text-wrap">
+                                                       Answered to your comment on the cash flow forecast's graph 🔔.
+                                                  </p>
+                                             </div>
+                                        </div>
+                                   </a>
+                                   <!-- Item -->
+                                   <a href="javascript:void(0);" class="dropdown-item p-2 border-bottom">
+                                        <div class="d-flex">
+                                             <div class="flex-shrink-0">
+                                                  <div class="avatar-sm me-2">
+                                                       <span
+                                                            class="avatar-title bg-soft-warning text-warning fs-20 rounded-circle">
+                                                            <iconify-icon icon="solar:leaf-outline"></iconify-icon>
+                                                       </span>
+                                                  </div>
+                                             </div>
+                                             <div class="flex-grow-1">
+                                                  <p class="mb-0 fw-medium text-wrap">A new system update is available.
+                                                       Update now for the latest features.</p>
+                                             </div>
+                                        </div>
+                                   </a>
+                                   <!-- Item -->
+                                   <a href="javascript:void(0);" class="dropdown-item p-2 border-bottom">
+                                        <div class="d-flex">
+                                             <div class="flex-shrink-0">
+                                                  <img src="/images/users/avatar-5.jpg"
+                                                       class="img-fluid me-2 avatar-sm rounded-circle" alt="avatar-5" />
+                                             </div>
+                                             <div class="flex-grow-1">
+                                                  <p class="mb-0 fw-medium">Shawn Bunch</p>
+                                                  <p class="mb-0 text-wrap">
+                                                       commented on your post: 'Great photo!
+                                                  </p>
+                                             </div>
+                                        </div>
+                                   </a>
+                              </div>
+                              <div class="text-center p-2">
+                                   <a href="javascript:void(0);" class="btn btn-primary btn-sm">View All Notification <i
+                                             class="bx bx-right-arrow-alt ms-1"></i></a>
+                              </div>
+                         </div>
+                    </div>
+
+                    <!-- User -->
+                    <div class="dropdown topbar-item">
+                         <a type="button" class="topbar-button" id="page-header-user-dropdown" data-bs-toggle="dropdown"
+                              aria-haspopup="true" aria-expanded="false">
+                              <span class="d-flex align-items-center">
+                                   <img class="rounded-circle" width="32" src="/images/users/avatar-1.jpg"
+                                        alt="avatar-3">
+                              </span>
+                         </a>
+                         <div class="dropdown-menu dropdown-menu-end">
+                              <!-- item-->
+                              <h6 class="dropdown-header">Welcome!</h6>
+
+                              <a class="dropdown-item" href="#">
+                                   <iconify-icon icon="solar:user-outline"
+                                        class="align-middle me-2 fs-18"></iconify-icon><span class="align-middle">My
+                                        Account</span>
+                              </a>
+
+                              <a class="dropdown-item" href="#">
+                                   <iconify-icon icon="solar:wallet-outline"
+                                        class="align-middle me-2 fs-18"></iconify-icon><span
+                                        class="align-middle">Pricing</span>
+                              </a>
+                              <a class="dropdown-item" href="#">
+                                   <iconify-icon icon="solar:help-outline"
+                                        class="align-middle me-2 fs-18"></iconify-icon><span
+                                        class="align-middle">Help</span>
+                              </a>
+                              <a class="dropdown-item" href="auth-{{ route ('second' , ['auth','lock-screen']) }}">
+                                   <iconify-icon icon="solar:lock-keyhole-outline"
+                                        class="align-middle me-2 fs-18"></iconify-icon><span class="align-middle">Lock
+                                        screen</span>
+                              </a>
+
+                              <div class="dropdown-divider my-1"></div>
+
+                              <a class="dropdown-item text-danger" href="{{ route ('second' , ['auth','signin']) }}">
+                                   <iconify-icon icon="solar:logout-3-outline"
+                                        class="align-middle me-2 fs-18"></iconify-icon><span
+                                        class="align-middle">Logout</span>
+                              </a>
+                         </div>
+                    </div>
+               </div>
+          </div>
+     </div>
+</header>

resources/views/layouts/partials/vendor-scripts.blade.php

@@ -0,0 +1,5 @@
+@yield('script-bottom')
+
+@vite('resources/js/app.js')
+
+@yield('scripts')

resources/views/layouts/vertical.blade.php

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en" @yield('html-attribute')>
+
+<head>
+    @include('layouts.partials/title-meta')
+
+    @include('layouts.partials/head-css')
+</head>
+
+<body>
+
+    <div class="app-wrapper">
+
+        @include('layouts.partials/sidebar')
+
+        @include('layouts.partials/topbar')
+
+        <div class="page-content">
+
+            <div class="container-fluid">
+
+                @yield('content')
+
+            </div>
+
+            @include('layouts.partials/footer')
+        </div>
+
+    </div>
+
+    @include('layouts.partials/vendor-scripts')
+
+</body>
+
+</html>

resources/views/maps/google.blade.php

@@ -0,0 +1,137 @@
+@extends('layouts.vertical', ['subtitle' => 'Google Maps'])
+
+@section('content')
+@include('layouts.partials/page-title', ['title' => 'Maps', 'subtitle' => 'Google Maps'])
+
+<div class="row row-cols-lg-2 gx-3">
+    <div class="col">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title">Basic Example</h5>
+                <p class="card-subtitle">Give textual form controls like
+                    <code>&lt;input&gt;</code>s and
+                    <code>&lt;textarea&gt;</code>s an upgrade with custom styles, sizing, focus
+                    states,
+                    and more.
+                </p>
+            </div>
+
+            <div class="card-body">
+                <div>
+                    <div class="mb-3">
+                        <div id="gmaps-basic" class="gmaps"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title">Markers Google Map</h5>
+                <p class="card-subtitle">Give textual form controls like
+                    <code>&lt;input&gt;</code>s and
+                    <code>&lt;textarea&gt;</code>s an upgrade with custom styles, sizing, focus
+                    states,
+                    and more.
+                </p>
+            </div>
+
+            <div class="card-body">
+                <div>
+                    <div class="mb-3">
+                        <div id="gmaps-markers" class="gmaps"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title">Street View Panoramas Google Map</h5>
+                <p class="card-subtitle">Give textual form controls like
+                    <code>&lt;input&gt;</code>s and
+                    <code>&lt;textarea&gt;</code>s an upgrade with custom styles, sizing, focus
+                    states,
+                    and more.
+                </p>
+            </div>
+
+            <div class="card-body">
+                <div>
+                    <div id="panorama" class="gmaps"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title">Google Map Types</h5>
+                <p class="card-subtitle">Give textual form controls like
+                    <code>&lt;input&gt;</code>s and
+                    <code>&lt;textarea&gt;</code>s an upgrade with custom styles, sizing, focus
+                    states,
+                    and more.
+                </p>
+            </div>
+
+            <div class="card-body">
+                <div>
+                    <div id="gmaps-types" class="gmaps"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title">Ultra Light With Labels</h5>
+                <p class="card-subtitle">Give textual form controls like
+                    <code>&lt;input&gt;</code>s and
+                    <code>&lt;textarea&gt;</code>s an upgrade with custom styles, sizing, focus
+                    states,
+                    and more.
+                </p>
+            </div>
+
+            <div class="card-body">
+                <div>
+                    <div id="ultra-light" class="gmaps"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title">Dark</h5>
+                <p class="card-subtitle">Give textual form controls like
+                    <code>&lt;input&gt;</code>s and
+                    <code>&lt;textarea&gt;</code>s an upgrade with custom styles, sizing, focus
+                    states,
+                    and more.
+                </p>
+            </div>
+
+            <div class="card-body">
+                <div>
+                    <div id="dark" class="gmaps"></div>
+                </div>
+            </div> <!-- end card body -->
+        </div>
+    </div>
+</div>
+@endsection
+
+@section('scripts')
+<!-- Google Maps API -->
+<script src="http://maps.google.com/maps/api/js"></script>
+@vite(['resources/js/pages/maps-google.js'])
+@endsection

resources/views/maps/vector.blade.php

@@ -0,0 +1,108 @@
+@extends('layouts.vertical', ['subtitle' => 'Vector Maps'])
+
+@section('content')
+
+@include('layouts.partials/page-title', ['title' => 'Maps', 'subtitle' => 'Vector Maps'])
+
+<div class="row row-cols-lg-2 gx-3">
+     <div class="col">
+          <div class="card">
+               <div class="card-header">
+                    <h5 class="card-title">World Vector Map</h5>
+                    <p class="card-subtitle">Give textual form controls like
+                         <code>&lt;input&gt;</code>s and <code>&lt;textarea&gt;</code>s an upgrade
+                         with custom styles, sizing, focus states, and more.
+                    </p>
+               </div>
+
+               <div class="card-body">
+                    <div>
+                         <div id="world-map-markers" style="height: 360px"></div>
+                    </div>
+               </div>
+          </div>
+     </div>
+
+     <div class="col">
+          <div class="card">
+               <div class="card-header">
+                    <h5 class="card-title">Canada Vector Map</h5>
+                    <p class="card-subtitle">Give textual form controls like
+                         <code>&lt;input&gt;</code>s and <code>&lt;textarea&gt;</code>s an upgrade
+                         with custom styles, sizing, focus states, and more.
+                    </p>
+               </div>
+
+               <div class="card-body">
+                    <div>
+                         <div id="canada-vector-map" style="height: 360px"></div>
+                    </div>
+               </div>
+          </div>
+     </div>
+
+     <div class="col">
+          <div class="card">
+               <div class="card-header">
+                    <h5 class="card-title">Russia Vector Map</h5>
+                    <p class="card-subtitle">Give textual form controls like
+                         <code>&lt;input&gt;</code>s and <code>&lt;textarea&gt;</code>s an upgrade
+                         with custom styles, sizing, focus states, and more.
+                    </p>
+               </div>
+
+               <div class="card-body">
+                    <div>
+                         <div id="russia-vector-map" style="height: 360px"></div>
+                    </div>
+               </div>
+          </div>
+     </div>
+
+     <div class="col">
+          <div class="card">
+               <div class="card-header">
+                    <h5 class="card-title">Iraq Vector Map</h5>
+                    <p class="card-subtitle">Give textual form controls like
+                         <code>&lt;input&gt;</code>s and <code>&lt;textarea&gt;</code>s an upgrade
+                         with custom styles, sizing, focus states, and more.
+                    </p>
+               </div>
+
+               <div class="card-body">
+                    <div>
+                         <div id="iraq-vector-map" style="height: 360px"></div>
+                    </div>
+               </div>
+          </div>
+     </div>
+
+     <div class="col">
+          <div class="card">
+               <div class="card-header">
+                    <h5 class="card-title">Spain Vector Map</h5>
+                    <p class="card-subtitle">Give textual form controls like
+                         <code>&lt;input&gt;</code>s and <code>&lt;textarea&gt;</code>s an upgrade
+                         with custom styles, sizing, focus states, and more.
+                    </p>
+               </div>
+
+               <div class="card-body">
+                    <div>
+                         <div id="spain-vector-map" style="height: 360px"></div>
+                    </div>
+               </div>
+          </div> <!-- end card body -->
+     </div>
+</div>
+
+@endsection
+
+@section('scripts')
+@vite([ 'resources/js/pages/maps-vector.js',
+'resources/js/pages/maps-canada.js',
+'resources/js/pages/maps-iraq.js',
+'resources/js/pages/maps-russia.js',
+'resources/js/pages/maps-spain.js',
+])
+@endsection

resources/views/pages/404-alt.blade.php

@@ -0,0 +1,34 @@
+@extends('layouts.vertical', ['subtitle' => '404'])
+
+@section('content')
+
+<!-- Start Container Fluid -->
+<div class="container-xxl">
+
+    <!-- Start here.... -->
+
+    <div class="row justify-content-center">
+        <div class="col-xl-5">
+            <div class="card">
+                <div class="card-body px-3 py-5">
+                    <div class="p-4">
+                        <div class="mx-auto mb-4 text-center">
+
+                            <h1 class="mb-3 fw-bold fs-60">404</h1>
+                            <h2 class="fs-22 lh-base">Page Not Found !</h2>
+                            <p class="text-muted mt-1 mb-4">The page you're trying to reach seems to have gone <br />
+                                missing in the digital wilderness.</p>
+
+                            <div class="text-center">
+                                <a href="{{ route('any', 'index') }}" class="btn btn-success">Back to Home</a>
+                            </div>
+                        </div>
+                    </div>
+                </div> <!-- end card-body -->
+            </div> <!-- end card -->
+
+        </div> <!-- end col -->
+    </div> <!-- end row -->
+
+</div>
+@endsection