há 3 meses atrás · de8208b321
--- a/template/1280x800.webp
+++ b/template/1280x800.webp
--- a/template/45.jpg
+++ b/template/45.jpg
--- a/template/5631533.jpg
+++ b/template/5631533.jpg
--- a/template/get-data.html
+++ b/template/get-data.html
@@ -0,0 +1,822 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en"> <!--begin::Head-->
			
 
				+
			
 
				+<head>
			
 
				+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
			
 
				+    <title>Dashboard</title><!--begin::Primary Meta Tags-->
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <meta name="title" content="AdminLTE | Dashboard v2">
			
 
				+    <meta name="author" content="ColorlibHQ">
			
 
				+    <meta name="description"
			
 
				+        content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS.">
			
 
				+    <meta name="keywords"
			
 
				+        content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard">
			
 
				+    <!--end::Primary Meta Tags--><!--begin::Fonts-->
			
 
				+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
			
 
				+        integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q=" crossorigin="anonymous">
			
 
				+    <!--end::Fonts--><!--begin::Third Party Plugin(OverlayScrollbars)-->
			
 
				+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/styles/overlayscrollbars.min.css"
			
 
				+        integrity="sha256-dSokZseQNT08wYEWiz5iLI8QPlKxG+TswNRD8k35cpg=" crossorigin="anonymous">
			
 
				+    <!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Third Party Plugin(Bootstrap Icons)-->
			
 
				+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.min.css"
			
 
				+        integrity="sha256-Qsx5lrStHZyR9REqhUF8iQt73X06c8LGIUPzpOhwRrI=" crossorigin="anonymous">
			
 
				+    <!--end::Third Party Plugin(Bootstrap Icons)--><!--begin::Required Plugin(AdminLTE)-->
			
 
				+    <link rel="stylesheet" href="./dist/css/adminlte.css"><!--end::Required Plugin(AdminLTE)--><!-- apexcharts -->
			
 
				+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css"
			
 
				+        integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0=" crossorigin="anonymous">
			
 
				+    <link rel="stylesheet" href="dist/WOW-master/css/libs/animate.css">
			
 
				+    <link rel="stylesheet" href="dist/css/custom.css">
			
 
				+</head>
			
 
				+
			
 
				+<body class="layout-fixed sidebar-expand-lg sidebar-mini app-loaded sidebar-collapse"> <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper"> <!--begin::Header-->
			
 
				+        <nav class="app-header navbar navbar-expand bg-body"> <!--begin::Container-->
			
 
				+            <div class="container-fluid"> <!--begin::Start Navbar Links-->
			
 
				+                <ul class="navbar-nav">
			
 
				+                    <li class="nav-item"> <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"> <i
			
 
				+                                class="bi bi-list"></i> </a> </li>
			
 
				+                    <li class="nav-item d-none d-md-block"> <a href="#" class="nav-link">Home</a> </li>
			
 
				+                    <!-- <li class="nav-item d-none d-md-block"> <a href="#" class="nav-link">Contact</a> </li> -->
			
 
				+                </ul> <!--end::Start Navbar Links--> <!--begin::End Navbar Links-->
			
 
				+                <ul class="navbar-nav ms-auto"> <!--begin::Navbar Search-->
			
 
				+                    <!-- <li class="nav-item"> <a class="nav-link" data-widget="navbar-search" href="search.html"
			
 
				+                            role="button"> <i class="bi bi-search"></i> </a> </li> 
			
 
				+
			
 
				+                    <li class="nav-item dropdown"> <a class="nav-link" data-bs-toggle="dropdown" href="#"> <i
			
 
				+                                class="bi bi-bell-fill"></i> <span class="navbar-badge badge text-bg-warning">15</span>
			
 
				+                        </a>
			
 
				+                        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end"> <span
			
 
				+                                class="dropdown-item dropdown-header">3 Notifications</span>
			
 
				+                            <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <i
			
 
				+                                    class="bi bi-people-fill me-2"></i> filename_22_09_2024.xml is ready for review.
			
 
				+                                <span class="float-end text-secondary fs-7">1 hours</span> </a>
			
 
				+                            <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <i
			
 
				+                                    class="bi bi-people-fill me-2"></i> filename_22_09_2024.xml is uploaded
			
 
				+                                successfully.
			
 
				+                                <span class="float-end text-secondary fs-7">12 hours</span> </a>
			
 
				+                            <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <i
			
 
				+                                    class="bi bi-file-earmark-fill me-2"></i> filename_12_09_2024.xml is uploaded
			
 
				+                                successfully.
			
 
				+                                <span class="float-end text-secondary fs-7">2 days</span> </a>
			
 
				+                            <div class="dropdown-divider"></div> <a href="#" class="dropdown-item dropdown-footer">
			
 
				+                                See All Notifications
			
 
				+                            </a>
			
 
				+                        </div>
			
 
				+                    </li>  -->
			
 
				+                    <li class="nav-item"> <a class="nav-link" href="#" data-lte-toggle="fullscreen"> <i
			
 
				+                                data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i> <i
			
 
				+                                data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none;"></i> </a>
			
 
				+                    </li> <!--end::Fullscreen Toggle--> <!--begin::User Menu Dropdown-->
			
 
				+                    <li class="nav-item dropdown user-menu"> <a href="#" class="nav-link dropdown-toggle"
			
 
				+                            data-bs-toggle="dropdown"> <img src="./dist/img/user2-160x160.jpg"
			
 
				+                                class="user-image rounded-circle shadow" alt="User Image"> <span
			
 
				+                                class="d-none d-md-inline">Arun Devar</span> </a>
			
 
				+                        <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end"> <!--begin::User Image-->
			
 
				+                            <li class="user-header text-bg-secondary"> <img src="./dist/img/user2-160x160.jpg"
			
 
				+                                    class="rounded-circle shadow" alt="User Image">
			
 
				+                                <p>
			
 
				+                                    Arun Devar - Senior Manager
			
 
				+                                    <small>Since Nov. 2023</small>
			
 
				+                                </p>
			
 
				+                            </li> <!--end::User Image--> <!--begin::Menu Body-->
			
 
				+
			
 
				+                            <li class="user-footer"> <a href="#" class="btn btn-default btn-flat">Profile</a> <a
			
 
				+                                    href="./login.html" class="btn btn-default btn-flat float-end">Sign out</a> </li>
			
 
				+                            <!--end::Menu Footer-->
			
 
				+                        </ul>
			
 
				+                    </li> <!--end::User Menu Dropdown-->
			
 
				+                </ul> <!--end::End Navbar Links-->
			
 
				+            </div> <!--end::Container-->
			
 
				+        </nav> <!--end::Header--> <!--begin::Sidebar-->
			
 
				+        <aside class="app-sidebar shadow"> <!--begin::Sidebar Brand-->
			
 
				+            <div class="sidebar-brand"> <!--begin::Brand Link--> <a href="./index.html" class="brand-link">
			
 
				+                    <!--begin::Brand Image--> <img src="./dist/img/logo-mini.png" alt="Lumina Datamatics"
			
 
				+                        class="brand-image logo-mini"> <!--end::Brand Image--> <!--begin::Brand Text--> <span
			
 
				+                        class="brand-text fw-light"><img style="position:relative; left: -40px;"
			
 
				+                            src="./dist/img/logo.png" alt="Lumina Datamatics" class="brand-image"></span>
			
 
				+                    <!--end::Brand Text--> </a>
			
 
				+            </div> <!--end::Sidebar Brand--> <!--begin::Sidebar Wrapper-->
			
 
				+            <div class="sidebar-wrapper">
			
 
				+                <nav class="mt-2"> <!--begin::Sidebar Menu-->
			
 
				+                    <ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu"
			
 
				+                        data-accordion="false">
			
 
				+
			
 
				+                        <li class="nav-item"> <a href="./upload.html" class="nav-link"> <i
			
 
				+                                    class="nav-icon bi bi-clock"></i>
			
 
				+                                <p>Upload</p>
			
 
				+                            </a> </li>
			
 
				+
			
 
				+
			
 
				+                    </ul> <!--end::Sidebar Menu-->
			
 
				+                </nav>
			
 
				+            </div> <!--end::Sidebar Wrapper-->
			
 
				+        </aside> <!--end::Sidebar--> <!--begin::App Main-->
			
 
				+        <main class="app-main"> <!--begin::App Content Header-->
			
 
				+            <div class="app-content-header"> <!--begin::Container-->
			
 
				+                <div class="container-fluid"> <!--begin::Row-->
			
 
				+                    <div class="row">
			
 
				+                        <div class="col-sm-6">
			
 
				+                            <h3 class="mb-0">Dashboard</h3>
			
 
				+                        </div>
			
 
				+                        <div class="col-sm-6">
			
 
				+                            <ol class="breadcrumb float-sm-end">
			
 
				+                                <li class="breadcrumb-item"><a href="./upload.html">Upload</a></li>
			
 
				+                                <li class="breadcrumb-item active" aria-current="page">
			
 
				+                                    Dashboard
			
 
				+                                </li>
			
 
				+                            </ol>
			
 
				+                        </div>
			
 
				+                    </div> <!--end::Row-->
			
 
				+                </div> <!--end::Container-->
			
 
				+            </div>
			
 
				+            <div class="app-content"> <!--begin::Container-->
			
 
				+                <div class="container-fluid"> <!-- Info boxes -->
			
 
				+                    <div id="html"></div>
			
 
				+                    <div class="row mt-5">
			
 
				+                        <div class="col-sm-12 text-center">
			
 
				+                            <button class="btn btn-primary wow lightSpeedIn" data-wow-delay="1s"
			
 
				+                                onclick="$(this).hide();$('.after_score').removeClass('d-none');">AI
			
 
				+                                Fix Issues</button>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div> <!--end::Row--> <!--begin::Row-->
			
 
				+
			
 
				+            </div> <!--end::Container-->
			
 
				+        </main> <!--end::App Main--> <!--begin::Footer-->
			
 
				+        <footer class="app-footer"> <!--begin::To the end-->
			
 
				+            <!-- <div class="float-end d-none d-sm-inline">Anything you want</div>--> <!--end::To the end-->
			
 
				+            <!--begin::Copyright--> <strong>
			
 
				+                Copyright &copy; 2014-2024&nbsp;
			
 
				+                <a href="https://www.luminadatamatics.com/" target="_blank" class="text-decoration-none">Lumina
			
 
				+                    Datamatics
			
 
				+                    LTD</a>.
			
 
				+            </strong>
			
 
				+            All rights reserved.
			
 
				+            <!--end::Copyright-->
			
 
				+        </footer> <!--end::Footer-->
			
 
				+    </div> <!--end::App Wrapper--> <!--begin::Script--> <!--begin::Third Party Plugin(OverlayScrollbars)-->
			
 
				+    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
			
 
				+        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
			
 
				+    <script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/browser/overlayscrollbars.browser.es6.min.js"
			
 
				+        integrity="sha256-H2VM7BKda+v2Z4+DRy69uknwxjyDRhszjXFhsL4gD3w=" crossorigin="anonymous"></script>
			
 
				+    <!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
			
 
				+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
			
 
				+        integrity="sha256-whL0tQWoY1Ku1iskqPFvmZ+CHsvmRWx/PIoEvIeWh4I=" crossorigin="anonymous"></script>
			
 
				+    <!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
			
 
				+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
			
 
				+        integrity="sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8=" crossorigin="anonymous"></script>
			
 
				+    <!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
			
 
				+    <script src="./dist/js/adminlte.js"></script>
			
 
				+    <!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
			
 
				+    <script>
			
 
				+        const SELECTOR_SIDEBAR_WRAPPER = ".sidebar-wrapper";
			
 
				+        const Default = {
			
 
				+            scrollbarTheme: "os-theme-light",
			
 
				+            scrollbarAutoHide: "leave",
			
 
				+            scrollbarClickScroll: true,
			
 
				+        };
			
 
				+        document.addEventListener("DOMContentLoaded", function () {
			
 
				+            const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
			
 
				+            if (
			
 
				+                sidebarWrapper &&
			
 
				+                typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== "undefined"
			
 
				+            ) {
			
 
				+                OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
			
 
				+                    scrollbars: {
			
 
				+                        theme: Default.scrollbarTheme,
			
 
				+                        autoHide: Default.scrollbarAutoHide,
			
 
				+                        clickScroll: Default.scrollbarClickScroll,
			
 
				+                    },
			
 
				+                });
			
 
				+            }
			
 
				+        });
			
 
				+    </script> <!--end::OverlayScrollbars Configure--> <!-- OPTIONAL SCRIPTS --> <!-- apexcharts -->
			
 
				+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.13/jquery.knob.min.js"
			
 
				+        integrity="sha512-NhRZzPdzMOMf005Xmd4JonwPftz4Pe99mRVcFeRDcdCtfjv46zPIi/7ZKScbpHD/V0HB1Eb+ZWigMqw94VUVaw=="
			
 
				+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
			
 
				+    <script src="dist/WOW-master/dist/wow.js"></script>
			
 
				+    <script>
			
 
				+        $(function () {
			
 
				+            var data = {
			
 
				+    "success": true,
			
 
				+    "processed": 2,
			
 
				+    "results": [
			
 
				+        {
			
 
				+            "sku": "ELEC-001",
			
 
				+            "title": "Apple MacBook Pro 14-inch",
			
 
				+            "description": "Latest Apple MacBook Pro with M3 chip.",
			
 
				+            "image_path": "images/CLTH-001.jpg",
			
 
				+            "created_at": "2025-10-10T13:06:22.086Z",
			
 
				+            "final_score": 85.66,
			
 
				+            "max_score": 100.0,
			
 
				+            "breakdown": {
			
 
				+                "mandatory_fields": 100.0,
			
 
				+                "standardization": 100.0,
			
 
				+                "missing_values": 100.0,
			
 
				+                "consistency": 50.0,
			
 
				+                "seo_discoverability": 61.38,
			
 
				+                "content_rules_compliance": 100.0,
			
 
				+                "title_quality": 74.38,
			
 
				+                "description_quality": 63.92,
			
 
				+                "image_quality": null,
			
 
				+                "image_score": 87.5,
			
 
				+                "attributes": 100.0
			
 
				+            },
			
 
				+            "image_score": 87.5,
			
 
				+            "image_breakdown": {
			
 
				+                "resolution": 70.0,
			
 
				+                "clarity": 100.0,
			
 
				+                "background": 90.0,
			
 
				+                "size": 80.0,
			
 
				+                "format": 100.0
			
 
				+            },
			
 
				+            "image_metadata": {
			
 
				+                "width": 960,
			
 
				+                "height": 640,
			
 
				+                "dpi": [
			
 
				+                    null,
			
 
				+                    null
			
 
				+                ],
			
 
				+                "format": "JPG",
			
 
				+                "mode": "RGB",
			
 
				+                "file_size_mb": 0.11,
			
 
				+                "dominant_color_rgb": [
			
 
				+                    252,
			
 
				+                    252,
			
 
				+                    251
			
 
				+                ],
			
 
				+                "dominant_color_hex": "#fcfcfb",
			
 
				+                "dominant_color_name": "snow",
			
 
				+                "background_coverage": 47.63
			
 
				+            },
			
 
				+            "ai_suggestions": {
			
 
				+                "content": {
			
 
				+                    "corrected_attributes": {},
			
 
				+                    "missing_attributes": {
			
 
				+                        "processor": "Apple M3",
			
 
				+                        "storage": "512GB SSD",
			
 
				+                        "ram": "8GB Unified Memory",
			
 
				+                        "display_type": "Liquid Retina XDR",
			
 
				+                        "operating_system": "macOS"
			
 
				+                    },
			
 
				+                    "improved_title": "Apple MacBook Pro 14-inch (M3 Chip) - Space Gray - High-Performance Laptop for Creative Professionals",
			
 
				+                    "improved_description": "Experience unparalleled performance with the latest Apple MacBook Pro 14-inch, featuring the groundbreaking M3 chip. Designed for creative professionals and power users, this Space Gray laptop delivers exceptional speed and efficiency for demanding tasks like video editing, graphic design, and software development. Its stunning Liquid Retina XDR display brings your content to life with vibrant colors and incredible detail. Enjoy all-day battery life and a robust build, making it the perfect portable workstation. With advanced connectivity and a powerful operating system, the Apple MacBook Pro 14-inch M3 is engineered to elevate your productivity and creativity.",
			
 
				+                    "seo_keywords": [
			
 
				+                        "Apple MacBook Pro",
			
 
				+                        "MacBook Pro 14-inch",
			
 
				+                        "M3 chip laptop",
			
 
				+                        "Space Gray MacBook",
			
 
				+                        "professional laptop",
			
 
				+                        "creative workstation",
			
 
				+                        "Apple M3",
			
 
				+                        "high-performance laptop",
			
 
				+                        "video editing laptop",
			
 
				+                        "graphic design laptop",
			
 
				+                        "macOS laptop"
			
 
				+                    ],
			
 
				+                    "improvements": [
			
 
				+                        {
			
 
				+                            "component": "description",
			
 
				+                            "issue": "Description is incomplete, too short, lacks structure, adjectives, and complete sentences.",
			
 
				+                            "suggestion": "Rewrite the description to be comprehensive (50-150 words), including detailed features, benefits, specifications, and use cases, using proper prose and descriptive adjectives.",
			
 
				+                            "priority": "high",
			
 
				+                            "confidence": "high"
			
 
				+                        },
			
 
				+                        {
			
 
				+                            "component": "title",
			
 
				+                            "issue": "Title quality is suboptimal, potentially containing spam-like patterns (interpreted as being too generic/short for a premium product) and lacking key details.",
			
 
				+                            "suggestion": "Optimize the title to be 50-100 characters, professional, and include brand, model, key features (e.g., M3 chip), and color for better clarity and SEO.",
			
 
				+                            "priority": "high",
			
 
				+                            "confidence": "high"
			
 
				+                        },
			
 
				+                        {
			
 
				+                            "component": "attributes",
			
 
				+                            "issue": "Critical product specifications (e.g., processor, storage, RAM) are missing from attributes.",
			
 
				+                            "suggestion": "Add essential technical attributes like 'processor', 'storage', 'ram', 'display_type', and 'operating_system' to provide complete product information and improve searchability.",
			
 
				+                            "priority": "high",
			
 
				+                            "confidence": "high"
			
 
				+                        },
			
 
				+                        {
			
 
				+                            "component": "attributes/title/description",
			
 
				+                            "issue": "Inconsistency: The 'color' attribute ('Gray') is not mentioned in the title or description.",
			
 
				+                            "suggestion": "Ensure the product color ('Space Gray' for Apple's Gray) is explicitly mentioned in both the improved title and description for consistency and better product representation.",
			
 
				+                            "priority": "medium",
			
 
				+                            "confidence": "high"
			
 
				+                        },
			
 
				+                        {
			
 
				+                            "component": "seo",
			
 
				+                            "issue": "Description lacks common search terms and is too short, negatively impacting SEO visibility for 'brand' and 'model'.",
			
 
				+                            "suggestion": "Integrate relevant keywords naturally throughout the enhanced description and title, focusing on brand (\"Apple\"), model (\"MacBook Pro 14-inch M3\"), and key features, to improve search engine ranking.",
			
 
				+                            "priority": "high",
			
 
				+                            "confidence": "high"
			
 
				+                        }
			
 
				+                    ],
			
 
				+                    "quality_score_prediction": 85,
			
 
				+                    "summary": "The product requires significant improvements in its description for completeness, structure, and SEO. The title also needs optimization to be more descriptive and consistent with attributes. Adding detailed technical specifications as attributes will greatly enhance product information and searchability."
			
 
				+                },
			
 
				+                "image": {
			
 
				+                    "note": "No improvements needed"
			
 
				+                }
			
 
				+            },
			
 
				+            "categorized_feedback": {
			
 
				+                "attributes": {
			
 
				+                    "issues": [],
			
 
				+                    "suggestions": [
			
 
				+                        "Include at least 2-3 key attributes in title",
			
 
				+                        "Consider adding more attributes: color: Gray",
			
 
				+                        "Include more product attributes in description"
			
 
				+                    ]
			
 
				+                },
			
 
				+                "title": {
			
 
				+                    "issues": [
			
 
				+                        "Contains spam-like patterns (excessive caps, multiple punctuation)"
			
 
				+                    ],
			
 
				+                    "suggestions": [
			
 
				+                        "Expand title to include key attributes (brand, model, key features)"
			
 
				+                    ]
			
 
				+                },
			
 
				+                "description": {
			
 
				+                    "issues": [
			
 
				+                        "Incomplete (missing: features, benefits, specifications, use_case)",
			
 
				+                        "Lacks proper sentence structure"
			
 
				+                    ],
			
 
				+                    "suggestions": [
			
 
				+                        "Expand description to 50-150 words for better SEO",
			
 
				+                        "Add features, benefits, specifications, and use cases"
			
 
				+                    ]
			
 
				+                },
			
 
				+                "seo": {
			
 
				+                    "issues": [
			
 
				+                        "Description too short (7 words, recommended 50+)",
			
 
				+                        "No descriptive/quality adjectives found",
			
 
				+                        "Description lacks complete sentences (use prose, not just bullet points)",
			
 
				+                        "Missing common search term 'brand' for Electronics",
			
 
				+                        "Missing common search term 'model' for Electronics",
			
 
				+                        "Missing common search term 'warranty' for Electronics",
			
 
				+                        "Missing common search term 'condition' for Electronics",
			
 
				+                        "Missing common search term 'specs' for Electronics",
			
 
				+                        "Missing common search term 'features' for Electronics",
			
 
				+                        "Missing common search term 'technology' for Electronics",
			
 
				+                        "No high-value search terms found (e.g., 'premium', 'durable', 'best')",
			
 
				+                        "Title too short (25 chars, recommended 50-100)",
			
 
				+                        "Title missing key attributes (brand, model, color, size)"
			
 
				+                    ],
			
 
				+                    "suggestions": [
			
 
				+                        "Consider mentioning 'brand' if applicable to improve searchability",
			
 
				+                        "Consider mentioning 'model' if applicable to improve searchability",
			
 
				+                        "Consider mentioning 'warranty' if applicable to improve searchability",
			
 
				+                        "Consider mentioning 'condition' if applicable to improve searchability",
			
 
				+                        "Consider mentioning 'specs' if applicable to improve searchability",
			
 
				+                        "Consider mentioning 'features' if applicable to improve searchability",
			
 
				+                        "Consider mentioning 'technology' if applicable to improve searchability",
			
 
				+                        "Add 1-2 quality/value indicators to attract more searches"
			
 
				+                    ]
			
 
				+                },
			
 
				+                "images": {
			
 
				+                    "issues": [],
			
 
				+                    "suggestions": [
			
 
				+                        "DPI information not available in image, ensure high-quality source",
			
 
				+                        "Image width acceptable but could be larger (current: 960px)",
			
 
				+                        "Image aspect ratio unusual (1.50), consider standard format"
			
 
				+                    ]
			
 
				+                },
			
 
				+                "general": {
			
 
				+                    "issues": [
			
 
				+                        "'Color': 'Gray' not mentioned in title/description"
			
 
				+                    ],
			
 
				+                    "suggestions": [
			
 
				+                        "Add descriptive words like 'premium', 'durable', 'comfortable' to enhance appeal",
			
 
				+                        "Write 2-3 complete sentences describing the product",
			
 
				+                        "Consider expanding title to 50-100 characters for better SEO",
			
 
				+                        "Remove spam indicators, use professional language",
			
 
				+                        "Title too few words, expand with descriptive terms",
			
 
				+                        "Description has significant overlap with title, add unique information",
			
 
				+                        "Write in complete sentences, not just bullet points"
			
 
				+                    ]
			
 
				+                }
			
 
				+            },
			
 
				+            "processing_time": 16.608,
			
 
				+            "issues": [
			
 
				+                "'Color': 'Gray' not mentioned in title/description",
			
 
				+                "SEO: Description too short (7 words, recommended 50+)",
			
 
				+                "SEO: No descriptive/quality adjectives found",
			
 
				+                "SEO: Description lacks complete sentences (use prose, not just bullet points)",
			
 
				+                "SEO: Missing common search term 'brand' for Electronics",
			
 
				+                "SEO: Missing common search term 'model' for Electronics",
			
 
				+                "SEO: Missing common search term 'warranty' for Electronics",
			
 
				+                "SEO: Missing common search term 'condition' for Electronics",
			
 
				+                "SEO: Missing common search term 'specs' for Electronics",
			
 
				+                "SEO: Missing common search term 'features' for Electronics",
			
 
				+                "SEO: Missing common search term 'technology' for Electronics",
			
 
				+                "SEO: No high-value search terms found (e.g., 'premium', 'durable', 'best')",
			
 
				+                "SEO: Title too short (25 chars, recommended 50-100)",
			
 
				+                "SEO: Title missing key attributes (brand, model, color, size)",
			
 
				+                "Title: Contains spam-like patterns (excessive caps, multiple punctuation)",
			
 
				+                "Description: Incomplete (missing: features, benefits, specifications, use_case)",
			
 
				+                "Description: Lacks proper sentence structure"
			
 
				+            ],
			
 
				+            "suggestions": [
			
 
				+                "Expand description to 50-150 words for better SEO",
			
 
				+                "Add descriptive words like 'premium', 'durable', 'comfortable' to enhance appeal",
			
 
				+                "Write 2-3 complete sentences describing the product",
			
 
				+                "Consider mentioning 'brand' if applicable to improve searchability",
			
 
				+                "Consider mentioning 'model' if applicable to improve searchability",
			
 
				+                "Consider mentioning 'warranty' if applicable to improve searchability",
			
 
				+                "Consider mentioning 'condition' if applicable to improve searchability",
			
 
				+                "Consider mentioning 'specs' if applicable to improve searchability",
			
 
				+                "Consider mentioning 'features' if applicable to improve searchability",
			
 
				+                "Consider mentioning 'technology' if applicable to improve searchability",
			
 
				+                "Add 1-2 quality/value indicators to attract more searches",
			
 
				+                "Expand title to include key attributes (brand, model, key features)",
			
 
				+                "Include at least 2-3 key attributes in title",
			
 
				+                "Consider expanding title to 50-100 characters for better SEO",
			
 
				+                "Consider adding more attributes: color: Gray",
			
 
				+                "Remove spam indicators, use professional language",
			
 
				+                "Title too few words, expand with descriptive terms",
			
 
				+                "Description has significant overlap with title, add unique information",
			
 
				+                "Add features, benefits, specifications, and use cases",
			
 
				+                "Include more product attributes in description",
			
 
				+                "Write in complete sentences, not just bullet points",
			
 
				+                "DPI information not available in image, ensure high-quality source",
			
 
				+                "Image width acceptable but could be larger (current: 960px)",
			
 
				+                "Image aspect ratio unusual (1.50), consider standard format"
			
 
				+            ]
			
 
				+        },
			
 
				+        {
			
 
				+            "sku": "CLTH-001",
			
 
				+            "title": "Nike Running T-Shirt Blue Medium",
			
 
				+            "description": "Lightweight Nike running shirt.",
			
 
				+            "image_path": "images/CLTH-001.jpg",
			
 
				+            "created_at": "2025-10-10T13:06:22.091Z",
			
 
				+            "final_score": 79.57,
			
 
				+            "max_score": 100.0,
			
 
				+            "breakdown": {
			
 
				+                "mandatory_fields": 100.0,
			
 
				+                "standardization": 100.0,
			
 
				+                "missing_values": 0.0,
			
 
				+                "consistency": 75.0,
			
 
				+                "seo_discoverability": 65.5,
			
 
				+                "content_rules_compliance": 100.0,
			
 
				+                "title_quality": 91.12,
			
 
				+                "description_quality": 67.75,
			
 
				+                "image_quality": null,
			
 
				+                "image_score": 87.5,
			
 
				+                "attributes": 100.0
			
 
				+            },
			
 
				+            "image_score": 87.5,
			
 
				+            "image_breakdown": {
			
 
				+                "resolution": 70.0,
			
 
				+                "clarity": 100.0,
			
 
				+                "background": 90.0,
			
 
				+                "size": 80.0,
			
 
				+                "format": 100.0
			
 
				+            },
			
 
				+            "image_metadata": {
			
 
				+                "width": 960,
			
 
				+                "height": 640,
			
 
				+                "dpi": [
			
 
				+                    null,
			
 
				+                    null
			
 
				+                ],
			
 
				+                "format": "JPG",
			
 
				+                "mode": "RGB",
			
 
				+                "file_size_mb": 0.11,
			
 
				+                "dominant_color_rgb": [
			
 
				+                    252,
			
 
				+                    252,
			
 
				+                    251
			
 
				+                ],
			
 
				+                "dominant_color_hex": "#fcfcfb",
			
 
				+                "dominant_color_name": "snow",
			
 
				+                "background_coverage": 47.63
			
 
				+            },
			
 
				+            "ai_suggestions": {
			
 
				+                "content": {
			
 
				+                    "corrected_attributes": {},
			
 
				+                    "missing_attributes": {},
			
 
				+                    "improved_title": "Nike Men's Lightweight Blue Polyester Running T-Shirt - Medium",
			
 
				+                    "improved_description": "Experience ultimate comfort and performance with the Nike Men's Lightweight Blue Polyester Running T-Shirt. Crafted from high-quality, breathable polyester fabric, this medium-sized tee is designed to keep you cool and dry during your most intense workouts. Its lightweight construction ensures unrestricted movement, making it perfect for daily runs, gym sessions, or any active pursuit. The vibrant blue color adds a stylish touch to your athletic wardrobe, while Nike's renowned quality guarantees durability and long-lasting wear. Stay focused on your goals with this essential piece of running apparel.",
			
 
				+                    "seo_keywords": [
			
 
				+                        "Nike running t-shirt",
			
 
				+                        "men's blue running shirt",
			
 
				+                        "lightweight polyester t-shirt",
			
 
				+                        "Nike athletic wear",
			
 
				+                        "medium size running top",
			
 
				+                        "workout shirt",
			
 
				+                        "performance tee"
			
 
				+                    ],
			
 
				+                    "improvements": [
			
 
				+                        {
			
 
				+                            "component": "description",
			
 
				+                            "issue": "Description is too short, incomplete, lacks structure, and has a weak opening.",
			
 
				+                            "suggestion": "Expand the description to 50-150 words, incorporating features (lightweight, polyester), benefits (comfort, performance, breathability), and use cases (running, workouts, active lifestyle) with proper sentence structure and a strong opening.",
			
 
				+                            "priority": "high",
			
 
				+                            "confidence": "high"
			
 
				+                        },
			
 
				+                        {
			
 
				+                            "component": "seo",
			
 
				+                            "issue": "Description too short and lacks complete sentences, missing common search terms (brand, size, color).",
			
 
				+                            "suggestion": "Enhance the description to meet length recommendations (50+ words) and include complete prose. Integrate key SEO terms like 'Nike,' 'running t-shirt,' 'blue,' 'medium,' 'lightweight,' and 'polyester' naturally within the title and description.",
			
 
				+                            "priority": "high",
			
 
				+                            "confidence": "high"
			
 
				+                        },
			
 
				+                        {
			
 
				+                            "component": "title",
			
 
				+                            "issue": "Title is too brief and potentially flagged for spam-like patterns (though not evident in current example, improvement will mitigate).",
			
 
				+                            "suggestion": "Optimize the title to be 50-100 characters, clearly stating brand, key features, color, and size (e.g., 'Nike Men's Lightweight Blue Polyester Running T-Shirt - Medium').",
			
 
				+                            "priority": "high",
			
 
				+                            "confidence": "high"
			
 
				+                        },
			
 
				+                        {
			
 
				+                            "component": "attributes",
			
 
				+                            "issue": "Material 'Polyester' is not mentioned in the title or description, impacting consistency and SEO.",
			
 
				+                            "suggestion": "Ensure the material 'Polyester' is explicitly mentioned in both the product title and description to improve consistency and provide more product detail.",
			
 
				+                            "priority": "high",
			
 
				+                            "confidence": "high"
			
 
				+                        },
			
 
				+                        {
			
 
				+                            "component": "attributes",
			
 
				+                            "issue": "Size 'M' is flagged as suspiciously short, and not explicitly detailed in description.",
			
 
				+                            "suggestion": "While 'M' is a valid attribute value, clarify the size as 'Medium' in the title and description to enhance clarity for customers and address potential system flags.",
			
 
				+                            "priority": "medium",
			
 
				+                            "confidence": "high"
			
 
				+                        }
			
 
				+                    ],
			
 
				+                    "quality_score_prediction": 88,
			
 
				+                    "summary": "The product requires significant improvements in its description and SEO to enhance discoverability and informativeness. Expanding the description with features, benefits, and use cases, along with optimizing the title to include key product details, will address most identified issues. Ensuring consistent mention of material and size across all text fields will further boost quality."
			
 
				+                },
			
 
				+                "image": {
			
 
				+                    "note": "No improvements needed"
			
 
				+                }
			
 
				+            },
			
 
				+            "categorized_feedback": {
			
 
				+                "attributes": {
			
 
				+                    "issues": [],
			
 
				+                    "suggestions": [
			
 
				+                        "Include more product attributes in description"
			
 
				+                    ]
			
 
				+                },
			
 
				+                "title": {
			
 
				+                    "issues": [
			
 
				+                        "Contains spam-like patterns (excessive caps, multiple punctuation)"
			
 
				+                    ],
			
 
				+                    "suggestions": []
			
 
				+                },
			
 
				+                "description": {
			
 
				+                    "issues": [
			
 
				+                        "Incomplete (missing: features, benefits, use_case)",
			
 
				+                        "Lacks proper sentence structure",
			
 
				+                        "Weak opening sentence"
			
 
				+                    ],
			
 
				+                    "suggestions": [
			
 
				+                        "Expand description to 50-150 words for better SEO",
			
 
				+                        "Add features, benefits, specifications, and use cases"
			
 
				+                    ]
			
 
				+                },
			
 
				+                "seo": {
			
 
				+                    "issues": [
			
 
				+                        "Description too short (4 words, recommended 50+)",
			
 
				+                        "Description lacks complete sentences (use prose, not just bullet points)",
			
 
				+                        "Missing common search term 'brand' for Clothing",
			
 
				+                        "Missing common search term 'size' for Clothing",
			
 
				+                        "Missing common search term 'color' for Clothing",
			
 
				+                        "Missing common search term 'material' for Clothing",
			
 
				+                        "Missing common search term 'fit' for Clothing",
			
 
				+                        "Missing common search term 'style' for Clothing",
			
 
				+                        "Missing common search term 'occasion' for Clothing",
			
 
				+                        "Missing common search term 'care' for Clothing"
			
 
				+                    ],
			
 
				+                    "suggestions": [
			
 
				+                        "Consider mentioning 'brand' if applicable to improve searchability",
			
 
				+                        "Consider mentioning 'size' if applicable to improve searchability",
			
 
				+                        "Consider mentioning 'color' if applicable to improve searchability",
			
 
				+                        "Consider mentioning 'material' if applicable to improve searchability",
			
 
				+                        "Consider mentioning 'fit' if applicable to improve searchability",
			
 
				+                        "Consider mentioning 'style' if applicable to improve searchability",
			
 
				+                        "Consider mentioning 'occasion' if applicable to improve searchability",
			
 
				+                        "Consider mentioning 'care' if applicable to improve searchability"
			
 
				+                    ]
			
 
				+                },
			
 
				+                "images": {
			
 
				+                    "issues": [],
			
 
				+                    "suggestions": [
			
 
				+                        "DPI information not available in image, ensure high-quality source",
			
 
				+                        "Image width acceptable but could be larger (current: 960px)",
			
 
				+                        "Image aspect ratio unusual (1.50), consider standard format"
			
 
				+                    ]
			
 
				+                },
			
 
				+                "general": {
			
 
				+                    "issues": [
			
 
				+                        "'size' suspiciously short: 'M'",
			
 
				+                        "'Material': 'Polyester' not mentioned in title/description"
			
 
				+                    ],
			
 
				+                    "suggestions": [
			
 
				+                        "Provide more detailed size",
			
 
				+                        "Consider adding more descriptive adjectives for better engagement",
			
 
				+                        "Write 2-3 complete sentences describing the product",
			
 
				+                        "Consider adding more value-indicating terms for better positioning",
			
 
				+                        "Consider expanding title to 50-100 characters for better SEO",
			
 
				+                        "Remove spam indicators, use professional language",
			
 
				+                        "Write in complete sentences, not just bullet points",
			
 
				+                        "Start with a strong, descriptive opening sentence"
			
 
				+                    ]
			
 
				+                }
			
 
				+            },
			
 
				+            "processing_time": 14.924,
			
 
				+            "issues": [
			
 
				+                "'size' suspiciously short: 'M'",
			
 
				+                "'Material': 'Polyester' not mentioned in title/description",
			
 
				+                "SEO: Description too short (4 words, recommended 50+)",
			
 
				+                "SEO: Description lacks complete sentences (use prose, not just bullet points)",
			
 
				+                "SEO: Missing common search term 'brand' for Clothing",
			
 
				+                "SEO: Missing common search term 'size' for Clothing",
			
 
				+                "SEO: Missing common search term 'color' for Clothing",
			
 
				+                "SEO: Missing common search term 'material' for Clothing",
			
 
				+                "SEO: Missing common search term 'fit' for Clothing",
			
 
				+                "SEO: Missing common search term 'style' for Clothing",
			
 
				+                "SEO: Missing common search term 'occasion' for Clothing",
			
 
				+                "SEO: Missing common search term 'care' for Clothing",
			
 
				+                "Title: Contains spam-like patterns (excessive caps, multiple punctuation)",
			
 
				+                "Description: Incomplete (missing: features, benefits, use_case)",
			
 
				+                "Description: Lacks proper sentence structure",
			
 
				+                "Description: Weak opening sentence"
			
 
				+            ],
			
 
				+            "suggestions": [
			
 
				+                "Provide more detailed size",
			
 
				+                "Expand description to 50-150 words for better SEO",
			
 
				+                "Consider adding more descriptive adjectives for better engagement",
			
 
				+                "Write 2-3 complete sentences describing the product",
			
 
				+                "Consider mentioning 'brand' if applicable to improve searchability",
			
 
				+                "Consider mentioning 'size' if applicable to improve searchability",
			
 
				+                "Consider mentioning 'color' if applicable to improve searchability",
			
 
				+                "Consider mentioning 'material' if applicable to improve searchability",
			
 
				+                "Consider mentioning 'fit' if applicable to improve searchability",
			
 
				+                "Consider mentioning 'style' if applicable to improve searchability",
			
 
				+                "Consider mentioning 'occasion' if applicable to improve searchability",
			
 
				+                "Consider mentioning 'care' if applicable to improve searchability",
			
 
				+                "Consider adding more value-indicating terms for better positioning",
			
 
				+                "Consider expanding title to 50-100 characters for better SEO",
			
 
				+                "Remove spam indicators, use professional language",
			
 
				+                "Add features, benefits, specifications, and use cases",
			
 
				+                "Include more product attributes in description",
			
 
				+                "Write in complete sentences, not just bullet points",
			
 
				+                "Start with a strong, descriptive opening sentence",
			
 
				+                "DPI information not available in image, ensure high-quality source",
			
 
				+                "Image width acceptable but could be larger (current: 960px)",
			
 
				+                "Image aspect ratio unusual (1.50), consider standard format"
			
 
				+            ]
			
 
				+        }
			
 
				+    ],
			
 
				+    "errors": []
			
 
				+}
			
 
				+            
			
 
				+            // console.log(data.results);
			
 
				+            var html = '';
			
 
				+            data.results.forEach(element => {
			
 
				+                // console.log(element.final_score);
			
 
				+                var initial_score = '';
			
 
				+                var after_score = ''
			
 
				+                var base_keys = { 'Title': 'title_quality', 'Description': 'description_quality', 'Image': 'image_score', 'SEO': 'seo_discoverability', 'Attributes': 'attributes' }
			
 
				+
			
 
				+
			
 
				+
			
 
				+                Object.entries(base_keys).forEach(([key, value]) => {
			
 
				+                    let name = key;
			
 
				+                    key = key.toLowerCase();
			
 
				+                    console.log(element.breakdown[value], value);
			
 
				+                    var per = 0
			
 
				+                    if (element.breakdown[value]) {
			
 
				+                        per = element.breakdown[value];
			
 
				+                    }
			
 
				+                    var intial_desc = '';
			
 
				+                    if (element.categorized_feedback[key]) {
			
 
				+                        // console.log(element.categorized_feedback[key].issues);
			
 
				+                        intial_desc = element.categorized_feedback[key].issues.join(', ');
			
 
				+                    }
			
 
				+
			
 
				+                    initial_score += `<tr>
			
 
				+                                            <td class="wow bounceInLeft">
			
 
				+                                                <a>
			
 
				+                                                    `+ name + `
			
 
				+                                                </a>
			
 
				+                                            </td>
			
 
				+
			
 
				+                                            <td class="project_progress wow bounceInRight">
			
 
				+                                                <div class="progress progress-sm">
			
 
				+                                                    <div class="progress-bar bg-green" role="progressbar"
			
 
				+                                                        aria-valuenow="`+ per + `" aria-valuemin="0" aria-valuemax="100"
			
 
				+                                                        style="width: `+ per + `%">
			
 
				+                                                    </div>
			
 
				+                                                </div>
			
 
				+                                                <small>
			
 
				+                                                    `+ per + `%
			
 
				+                                                </small>
			
 
				+                                            </td>
			
 
				+
			
 
				+                                        </tr>
			
 
				+                                        <tr>
			
 
				+                                          <td class="wow bounceInLeft" colspan='2' data-wow-delay="0.2s">
			
 
				+                                            <div style='max-height:50px;overflow-y:auto;'>  
			
 
				+                                            <small>
			
 
				+                                                `+ intial_desc + `
			
 
				+                                            </small>
			
 
				+                                            </div>
			
 
				+                                            </td>
			
 
				+                                        </tr>`;
			
 
				+                })
			
 
				+
			
 
				+                Object.keys(base_keys).forEach(k => {
			
 
				+                    let name = k;
			
 
				+                    k = k.toLowerCase();
			
 
				+                    var ik = 'improved_' + k
			
 
				+                    var after_desc = '';
			
 
				+                    if (element.ai_suggestions.content[ik]) {
			
 
				+                        console.log(element.ai_suggestions.content);
			
 
				+                        after_desc = element.ai_suggestions.content[ik];
			
 
				+                    }
			
 
				+
			
 
				+                    after_score += `<tr>
			
 
				+                                            <td class="wow bounceInLeft">
			
 
				+                                                <a>
			
 
				+                                                    `+ name + `
			
 
				+                                                </a>
			
 
				+                                            </td>
			
 
				+                                        </tr>
			
 
				+                                        <tr>
			
 
				+                                          <td class="wow bounceInLeft" colspan='2'  data-wow-delay="0.2s">
			
 
				+                                            <div style='max-height:50px;overflow-y:auto;'>  
			
 
				+                                            <small>
			
 
				+                                                `+ after_desc + `
			
 
				+                                            </small>
			
 
				+                                            </div>
			
 
				+                                            </td>
			
 
				+                                        </tr>`;
			
 
				+                })
			
 
				+
			
 
				+
			
 
				+                html += `<div class="row mb-4" >
			
 
				+                        <div class="col-md-4">
			
 
				+                            <div class="card">
			
 
				+                                <img class="card-img-top wow pulse" data-wow-iteration="2"
			
 
				+                                    src="`+element.image_path+`">
			
 
				+                                <div class="card-block">
			
 
				+                                    <h4 class="card-title wow bounceInLeft" data-wow-delay="0.1s">`+element.title+`</h4>
			
 
				+                                    <div class="card-text wow bounceInLeft" data-wow-delay="0.2s">`+element.description+`</div>
			
 
				+                                </div>
			
 
				+                                <div class="card-footer wow bounceInLeft" data-wow-delay="0.3s">
			
 
				+                                    <small>`+element.created_at+`</small>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+
			
 
				+                        <div class="col-md-4">
			
 
				+                            <div class="card">
			
 
				+                                <div class="card-header py-2">
			
 
				+                                    <div class="text-sm mb-0">Initial Score</div>
			
 
				+                                </div>
			
 
				+                                <div class="card-body text-center wow bounceInDown" data-wow-iteration="0.5">
			
 
				+                                    <input type="text" class="dial" value="`+ element.final_score + `" data-width="120" data-height="120"
			
 
				+                                        data-readOnly='true' data-fgColor="#3c8dbc" data-bgColor="#e8e8e8"
			
 
				+                                        data-thickness=".2">
			
 
				+                                    <div class="mt-2">Overall Score</div>
			
 
				+                                </div>
			
 
				+                                <table class="table table-striped projects mb-0 table-sm">
			
 
				+                                    <tbody>
			
 
				+                                        `+ initial_score + `
			
 
				+                                    </tbody>
			
 
				+                                </table>
			
 
				+                            </div>
			
 
				+
			
 
				+                        </div>
			
 
				+                        <div class="col-md-4 after_score d-none">
			
 
				+                            <div class="card">
			
 
				+                                <div class="card-header py-2">
			
 
				+                                    <div class="text-sm mb-0">After Score</div>
			
 
				+                                </div>
			
 
				+                                <div class="card-body text-center wow bounceInDown" data-wow-iteration="0.5">
			
 
				+                                    <input type="text" class="dial" value="`+ element.ai_suggestions.content.quality_score_prediction + `" data-width="120" data-height="120"
			
 
				+                                        data-readOnly='true' data-fgColor="#198754" data-bgColor="#e8e8e8"
			
 
				+                                        data-thickness=".2">
			
 
				+                                    <div class="mt-2">Overall Score</div>
			
 
				+                                </div>
			
 
				+                                <table class="table table-striped projects mb-0 table-sm">
			
 
				+                                    <tbody>
			
 
				+                                        `+ after_score + `
			
 
				+                                    </tbody>
			
 
				+                                </table>
			
 
				+                            </div>
			
 
				+                            
			
 
				+                        </div>
			
 
				+                    </div > `;
			
 
				+                // console.log('werrrrrrrrrrrrrrrrrrr', html);
			
 
				+
			
 
				+            });
			
 
				+
			
 
				+            $('#html').html(html);
			
 
				+            $('.dial').knob();
			
 
				+        });
			
 
				+        new WOW().init();
			
 
				+    </script>
			
 
				+</body><!--end::Body-->
			
 
				+
			
 
				+</html>
			
--- a/template/index.html
+++ b/template/index.html
@@ -0,0 +1,247 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en"> <!--begin::Head-->
			
 
				+
			
 
				+<head>
			
 
				+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
			
 
				+    <title>Upload</title><!--begin::Primary Meta Tags-->
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <meta name="title" content="AdminLTE | Dashboard v2">
			
 
				+    <meta name="author" content="ColorlibHQ">
			
 
				+    <meta name="description"
			
 
				+        content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS.">
			
 
				+    <meta name="keywords"
			
 
				+        content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard">
			
 
				+    <!--end::Primary Meta Tags--><!--begin::Fonts-->
			
 
				+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
			
 
				+        integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q=" crossorigin="anonymous">
			
 
				+    <!--end::Fonts--><!--begin::Third Party Plugin(OverlayScrollbars)-->
			
 
				+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/styles/overlayscrollbars.min.css"
			
 
				+        integrity="sha256-dSokZseQNT08wYEWiz5iLI8QPlKxG+TswNRD8k35cpg=" crossorigin="anonymous">
			
 
				+    <!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Third Party Plugin(Bootstrap Icons)-->
			
 
				+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.min.css"
			
 
				+        integrity="sha256-Qsx5lrStHZyR9REqhUF8iQt73X06c8LGIUPzpOhwRrI=" crossorigin="anonymous">
			
 
				+    <!--end::Third Party Plugin(Bootstrap Icons)--><!--begin::Required Plugin(AdminLTE)-->
			
 
				+    <link rel="stylesheet" href="./dist/css/adminlte.css"><!--end::Required Plugin(AdminLTE)--><!-- apexcharts -->
			
 
				+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css"
			
 
				+        integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0=" crossorigin="anonymous">
			
 
				+    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
			
 
				+    <link rel="stylesheet" href="./dist/css/select2-bootstrap4.min.css">
			
 
				+    <link rel="stylesheet" href="dist/css/custom.css">
			
 
				+    <style>
			
 
				+        .select2-container .select2-search--inline .select2-search__field {
			
 
				+            position: absolute;
			
 
				+            top: 3px;
			
 
				+            font-size: 14px;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+
			
 
				+<body class="layout-fixed sidebar-expand-lg sidebar-mini app-loaded sidebar-collapse">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper"> <!--begin::Header-->
			
 
				+        <nav class="app-header navbar navbar-expand bg-body"> <!--begin::Container-->
			
 
				+            <div class="container-fluid"> <!--begin::Start Navbar Links-->
			
 
				+                <ul class="navbar-nav">
			
 
				+                    <li class="nav-item"> <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"> <i
			
 
				+                                class="bi bi-list"></i> </a> </li>
			
 
				+                    <li class="nav-item d-none d-md-block"> <a href="#" class="nav-link">Home</a> </li>
			
 
				+                    <!-- <li class="nav-item d-none d-md-block"> <a href="#" class="nav-link">Contact</a> </li> -->
			
 
				+                </ul> <!--end::Start Navbar Links--> <!--begin::End Navbar Links-->
			
 
				+                <ul class="navbar-nav ms-auto"> <!--begin::Navbar Search-->
			
 
				+                    <!-- <li class="nav-item"> <a class="nav-link" data-widget="navbar-search" href="search.html"
			
 
				+                            role="button"> <i class="bi bi-search"></i> </a> </li> 
			
 
				+
			
 
				+                    <li class="nav-item dropdown"> <a class="nav-link" data-bs-toggle="dropdown" href="#"> <i
			
 
				+                                class="bi bi-bell-fill"></i> <span class="navbar-badge badge text-bg-warning">15</span>
			
 
				+                        </a>
			
 
				+                        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end"> <span
			
 
				+                                class="dropdown-item dropdown-header">3 Notifications</span>
			
 
				+                            <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <i
			
 
				+                                    class="bi bi-people-fill me-2"></i> filename_22_09_2024.xml is ready for review.
			
 
				+                                <span class="float-end text-secondary fs-7">1 hours</span> </a>
			
 
				+                            <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <i
			
 
				+                                    class="bi bi-people-fill me-2"></i> filename_22_09_2024.xml is uploaded
			
 
				+                                successfully.
			
 
				+                                <span class="float-end text-secondary fs-7">12 hours</span> </a>
			
 
				+                            <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <i
			
 
				+                                    class="bi bi-file-earmark-fill me-2"></i> filename_12_09_2024.xml is uploaded
			
 
				+                                successfully.
			
 
				+                                <span class="float-end text-secondary fs-7">2 days</span> </a>
			
 
				+                            <div class="dropdown-divider"></div> <a href="#" class="dropdown-item dropdown-footer">
			
 
				+                                See All Notifications
			
 
				+                            </a>
			
 
				+                        </div>
			
 
				+                    </li>  -->
			
 
				+                    <li class="nav-item"> <a class="nav-link" href="#" data-lte-toggle="fullscreen"> <i
			
 
				+                                data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i> <i
			
 
				+                                data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none;"></i> </a>
			
 
				+                    </li> <!--end::Fullscreen Toggle--> <!--begin::User Menu Dropdown-->
			
 
				+                    <li class="nav-item dropdown user-menu"> <a href="#" class="nav-link dropdown-toggle"
			
 
				+                            data-bs-toggle="dropdown"> <img src="./dist/img/user2-160x160.jpg"
			
 
				+                                class="user-image rounded-circle shadow" alt="User Image"> <span
			
 
				+                                class="d-none d-md-inline">Arun Devar</span> </a>
			
 
				+                        <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end"> <!--begin::User Image-->
			
 
				+                            <li class="user-header text-bg-secondary"> <img src="./dist/img/user2-160x160.jpg"
			
 
				+                                    class="rounded-circle shadow" alt="User Image">
			
 
				+                                <p>
			
 
				+                                    Arun Devar - Senior Manager
			
 
				+                                    <small>Since Nov. 2023</small>
			
 
				+                                </p>
			
 
				+                            </li> <!--end::User Image--> <!--begin::Menu Body-->
			
 
				+
			
 
				+                            <li class="user-footer"> <a href="#" class="btn btn-default btn-flat">Profile</a> <a
			
 
				+                                    href="./login.html" class="btn btn-default btn-flat float-end">Sign out</a> </li>
			
 
				+                            <!--end::Menu Footer-->
			
 
				+                        </ul>
			
 
				+                    </li> <!--end::User Menu Dropdown-->
			
 
				+                </ul> <!--end::End Navbar Links-->
			
 
				+            </div> <!--end::Container-->
			
 
				+        </nav> <!--end::Header--> <!--begin::Sidebar-->
			
 
				+        <aside class="app-sidebar shadow"> <!--begin::Sidebar Brand-->
			
 
				+            <div class="sidebar-brand"> <!--begin::Brand Link--> <a href="./index.html" class="brand-link">
			
 
				+                    <!--begin::Brand Image--> <img src="./dist/img/logo-mini.png" alt="Lumina Datamatics"
			
 
				+                        class="brand-image logo-mini"> <!--end::Brand Image--> <!--begin::Brand Text--> <span
			
 
				+                        class="brand-text fw-light" style="position:relative; left: -40px;"><img
			
 
				+                            src="./dist/img/logo.png" alt="Lumina Datamatics" class="brand-image"></span>
			
 
				+                    <!--end::Brand Text--> </a>
			
 
				+                <!--end::Brand Link-->
			
 
				+            </div> <!--end::Sidebar Brand--> <!--begin::Sidebar Wrapper-->
			
 
				+            <div class="sidebar-wrapper">
			
 
				+                <nav class="mt-2"> <!--begin::Sidebar Menu-->
			
 
				+                    <ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu"
			
 
				+                        data-accordion="false">
			
 
				+                        <li class="nav-item"> <a href="./upload.html" class="nav-link active"> <i
			
 
				+                                    class="nav-icon bi bi-upload"></i>
			
 
				+                                <p>Upload</p>
			
 
				+                            </a> </li>
			
 
				+                        
			
 
				+                    </ul> <!--end::Sidebar Menu-->
			
 
				+                </nav>
			
 
				+            </div> <!--end::Sidebar Wrapper-->
			
 
				+        </aside> <!--end::Sidebar--> <!--begin::App Main-->
			
 
				+        <main class="app-main"> <!--begin::App Content Header-->
			
 
				+            <div class="app-content-header"> <!--begin::Container-->
			
 
				+                <div class="container-fluid"> <!--begin::Row-->
			
 
				+                    <div class="row">
			
 
				+                        <div class="col-sm-6">
			
 
				+                            <h3 class="mb-0">Upload</h3>
			
 
				+                        </div>
			
 
				+                        <div class="col-sm-6">
			
 
				+                            <ol class="breadcrumb float-sm-end">
			
 
				+                                <li class="breadcrumb-item"><a href="./index.html">Home</a></li>
			
 
				+                                <li class="breadcrumb-item active" aria-current="page">
			
 
				+                                    Upload
			
 
				+                                </li>
			
 
				+                            </ol>
			
 
				+                        </div>
			
 
				+                    </div> <!--end::Row-->
			
 
				+                </div> <!--end::Container-->
			
 
				+            </div>
			
 
				+            <div class="app-content"> <!--begin::Container-->
			
 
				+                <div class="container-fluid"> <!-- Info boxes -->
			
 
				+                    <div class="row">
			
 
				+                        <div class="col-md-12">
			
 
				+                            <div class="card mb-4">
			
 
				+                                <div class="card-header">
			
 
				+                                    <h5 class="card-title">Upload</h5>
			
 
				+                                    <!-- <a href="#" class="btn btn-sm btn-primary float-sm-end me-2">Download Template</a> -->
			
 
				+                                </div> <!-- /.card-header -->
			
 
				+                                <div class="card-body p-0">
			
 
				+                                    <form id="myForm" action="get-data.html"> <!--begin::Body-->
			
 
				+                                        <div class="card-body">
			
 
				+                                            
			
 
				+                                            <div class="form-group row mb-3">
			
 
				+                                                <label for="file" class="col-sm-2 col-form-label">Select Input
			
 
				+                                                    File <span class="text-danger">*</span></label>
			
 
				+                                                <div class="col-sm-6">
			
 
				+                                                    <div class="input-group mb-3"> <input type="file"
			
 
				+                                                            onchange="$(this).parents('.form-group').next().removeClass('d-none')"
			
 
				+                                                            class="form-control" id="file" required> </div>
			
 
				+                                                </div>
			
 
				+                                            </div>
			
 
				+
			
 
				+                                            <div class="form-group row mb-3 d-none">
			
 
				+                                                <label for="file" class="col-sm-2 col-form-label"></label>
			
 
				+                                                <div class="col-sm-6">
			
 
				+                                                    <button type="submit" class="btn btn-primary">Submit</button>
			
 
				+                                                </div>
			
 
				+                                            </div>
			
 
				+                                        </div>
			
 
				+                                    </form>
			
 
				+                                </div>
			
 
				+                            </div> <!-- /.card -->
			
 
				+                        </div> <!-- /.col -->
			
 
				+                    </div> <!--end::Row--> <!--begin::Row-->
			
 
				+                    
			
 
				+                </div> <!--end::Container-->
			
 
				+            </div> <!--end::App Content-->
			
 
				+        </main> <!--end::App Main--> <!--begin::Footer-->
			
 
				+        <footer class="app-footer"> <!--begin::To the end-->
			
 
				+            <!-- <div class="float-end d-none d-sm-inline">Anything you want</div>--> <!--end::To the end-->
			
 
				+            <!--begin::Copyright--> <strong>
			
 
				+                Copyright &copy; 2014-2024&nbsp;
			
 
				+                <a href="https://www.luminadatamatics.com/" target="_blank" class="text-decoration-none">Lumina
			
 
				+                    Datamatics LTD</a>.
			
 
				+            </strong>
			
 
				+            All rights reserved.
			
 
				+            <!--end::Copyright-->
			
 
				+        </footer> <!--end::Footer-->
			
 
				+    </div> <!--end::App Wrapper--> <!--begin::Script--> <!--begin::Third Party Plugin(OverlayScrollbars)-->
			
 
				+    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
			
 
				+        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
			
 
				+    <script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/browser/overlayscrollbars.browser.es6.min.js"
			
 
				+        integrity="sha256-H2VM7BKda+v2Z4+DRy69uknwxjyDRhszjXFhsL4gD3w=" crossorigin="anonymous"></script>
			
 
				+    <!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
			
 
				+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
			
 
				+        integrity="sha256-whL0tQWoY1Ku1iskqPFvmZ+CHsvmRWx/PIoEvIeWh4I=" crossorigin="anonymous"></script>
			
 
				+    <!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
			
 
				+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
			
 
				+        integrity="sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8=" crossorigin="anonymous"></script>
			
 
				+    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
			
 
				+    <!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
			
 
				+    <script src="./dist/js/adminlte.js"></script>
			
 
				+    <!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
			
 
				+    <script>
			
 
				+        const SELECTOR_SIDEBAR_WRAPPER = ".sidebar-wrapper";
			
 
				+        const Default = {
			
 
				+            scrollbarTheme: "os-theme-light",
			
 
				+            scrollbarAutoHide: "leave",
			
 
				+            scrollbarClickScroll: true,
			
 
				+        };
			
 
				+        document.addEventListener("DOMContentLoaded", function () {
			
 
				+            const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
			
 
				+            if (
			
 
				+                sidebarWrapper &&
			
 
				+                typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== "undefined"
			
 
				+            ) {
			
 
				+                OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
			
 
				+                    scrollbars: {
			
 
				+                        theme: Default.scrollbarTheme,
			
 
				+                        autoHide: Default.scrollbarAutoHide,
			
 
				+                        clickScroll: Default.scrollbarClickScroll,
			
 
				+                    },
			
 
				+                });
			
 
				+            }
			
 
				+        });
			
 
				+        $(document).ready(function () {
			
 
				+            $('.select2').select2({
			
 
				+                theme: 'bootstrap4',
			
 
				+                placeholder: 'Select Competitors'
			
 
				+            });
			
 
				+        });
			
 
				+
			
 
				+        //$('#myForm').on('submit', function (e) {
			
 
				+        //    e.preventDefault(); //stop submit
			
 
				+
			
 
				+        //    if ($('#file').val() != "") {
			
 
				+        //        //Check if checkbox is checked then show modal
			
 
				+        //        $('#myModal').modal('show');
			
 
				+        //    }
			
 
				+        //});
			
 
				+    </script> <!--end::OverlayScrollbars Configure--> <!-- OPTIONAL SCRIPTS --> <!-- apexcharts -->
			
 
				+    <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
			
 
				+        integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8=" crossorigin="anonymous"></script>
			
 
				+
			
 
				+</body><!--end::Body-->
			
 
				+
			
 
				+</html>
			
--- a/template/left
+++ b/template/left
--- a/template/left.png
+++ b/template/left.png
--- a/template/login
+++ b/template/login
@@ -0,0 +1,309 @@
 
				+/*
			
 
				+Project Name: WFM
			
 
				+Date : 05-11-2020
			
 
				+Author: Amar Kholambe (amar.kholambe@luminad.com)
			
 
				+*/
			
 
				+body {
			
 
				+    background: rgb(239, 138, 227);
			
 
				+    background: url('./45.jpg') no-repeat center center fixed;
			
 
				+    -webkit-background-size: cover;
			
 
				+    -moz-background-size: cover;
			
 
				+    -o-background-size: cover;
			
 
				+    background-size: cover;
			
 
				+}
			
 
				+
			
 
				+.login {
			
 
				+    position: absolute;
			
 
				+    left: 50%;
			
 
				+    top: 50%;
			
 
				+    transform: translate(-50%, -50%);
			
 
				+    background: #fff;
			
 
				+}
			
 
				+
			
 
				+.login-container {
			
 
				+    width: 800px;
			
 
				+    margin: 0 auto;
			
 
				+    height: 430px;
			
 
				+    box-shadow: 0 0 178px #9b9b9b;
			
 
				+    border: 1px solid #d1d1d1;
			
 
				+    background: #f2f2f2;
			
 
				+}
			
 
				+
			
 
				+.login-left {
			
 
				+    /* background: #0070CD; */
			
 
				+    background: url(left.png);
			
 
				+    float: left;
			
 
				+    width: 60%;
			
 
				+    padding: 2 5px 30px 0;
			
 
				+    height: 100%;
			
 
				+    position: relative;
			
 
				+    /* border-right: 1px solid #ddd; */
			
 
				+    overflow: hidden;
			
 
				+    background-size: cover;
			
 
				+}
			
 
				+
			
 
				+.login-right {
			
 
				+    float: left;
			
 
				+    width: 48%;
			
 
				+    padding: 45px 30px 0;
			
 
				+    height: 100%;
			
 
				+    position: absolute;
			
 
				+    top:0;
			
 
				+    right: 0;
			
 
				+    bottom: 0;
			
 
				+}
			
 
				+
			
 
				+.form-signin,
			
 
				+.form-reset-password {
			
 
				+    padding: 0 30px 0 0;
			
 
				+    overflow: auto;
			
 
				+    height: 410px;
			
 
				+}
			
 
				+
			
 
				+.lbox {
			
 
				+    width: 100%;
			
 
				+    display: block;
			
 
				+}
			
 
				+
			
 
				+.clogo {
			
 
				+    /* width: 200px; */
			
 
				+    margin: 50px 120px;
			
 
				+        display: block;
			
 
				+    /* text-align: center; */
			
 
				+    font-size: 40px;
			
 
				+    color: #424242;
			
 
				+    z-index: 1;
			
 
				+    position: relative;
			
 
				+}
			
 
				+
			
 
				+.llogo {
			
 
				+    width: 115px;
			
 
				+    position: absolute;
			
 
				+    bottom: 10px;
			
 
				+    right: 90px;
			
 
				+}
			
 
				+
			
 
				+.lbox p {
			
 
				+    margin: 320px auto auto;
			
 
				+    color: #424242;
			
 
				+    font-size: 12px;
			
 
				+    text-align: right;
			
 
				+}
			
 
				+
			
 
				+.form-signin-heading {
			
 
				+    padding-bottom: 30px;
			
 
				+    text-align: center;
			
 
				+    color: #0070CD;
			
 
				+    margin: 0;
			
 
				+}
			
 
				+
			
 
				+.lang_label {
			
 
				+    position: initial !important;
			
 
				+    display: inline-block;
			
 
				+    margin-right: 5px;
			
 
				+}
			
 
				+
			
 
				+select {
			
 
				+    width: 70px !important;
			
 
				+    display: inline-block !important;
			
 
				+}
			
 
				+
			
 
				+/* form starting stylings ------------------------------- */
			
 
				+
			
 
				+.login .group {
			
 
				+    position: relative;
			
 
				+    margin-bottom: 55px;
			
 
				+}
			
 
				+
			
 
				+.login input {
			
 
				+    padding: 5px;
			
 
				+    display: block;
			
 
				+    width: 100%;
			
 
				+    border: none;
			
 
				+    border-bottom: 1px solid #0070CD;
			
 
				+    background-color: transparent;
			
 
				+}
			
 
				+
			
 
				+.login input:focus {
			
 
				+    outline: none;
			
 
				+}
			
 
				+
			
 
				+/* LABEL ======================================= */
			
 
				+
			
 
				+.login label {
			
 
				+    color: #999;
			
 
				+    /* font-size: 18px; */
			
 
				+    font-weight: normal;
			
 
				+    position: absolute;
			
 
				+    pointer-events: none;
			
 
				+    left: 5px;
			
 
				+    top: 15px;
			
 
				+    transition: 0.2s ease all;
			
 
				+    -moz-transition: 0.2s ease all;
			
 
				+    -webkit-transition: 0.2s ease all;
			
 
				+}
			
 
				+
			
 
				+/* active state */
			
 
				+
			
 
				+.login input:focus~label,
			
 
				+.login input:valid~label {
			
 
				+    top: -20px;
			
 
				+    font-size: 14px;
			
 
				+    color: #5264AE;
			
 
				+}
			
 
				+
			
 
				+/* active state */
			
 
				+
			
 
				+.login input:focus~.highlight {
			
 
				+    -webkit-animation: inputHighlighter 0.3s ease;
			
 
				+    -moz-animation: inputHighlighter 0.3s ease;
			
 
				+    animation: inputHighlighter 0.3s ease;
			
 
				+}
			
 
				+
			
 
				+/* ANIMATIONS ================ */
			
 
				+
			
 
				+@-webkit-keyframes inputHighlighter {
			
 
				+    from {
			
 
				+        background: #5264AE;
			
 
				+    }
			
 
				+
			
 
				+    to {
			
 
				+        width: 0;
			
 
				+        background: transparent;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+@-moz-keyframes inputHighlighter {
			
 
				+    from {
			
 
				+        background: #5264AE;
			
 
				+    }
			
 
				+
			
 
				+    to {
			
 
				+        width: 0;
			
 
				+        background: transparent;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+@keyframes inputHighlighter {
			
 
				+    from {
			
 
				+        background: #5264AE;
			
 
				+    }
			
 
				+
			
 
				+    to {
			
 
				+        width: 0;
			
 
				+        background: transparent;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.login button {
			
 
				+    border-color: #0070CD;
			
 
				+    color: #0070CD;
			
 
				+    font-size: 18px;
			
 
				+}
			
 
				+
			
 
				+.login button:hover,
			
 
				+.login button:active,
			
 
				+.login button:focus {
			
 
				+    background-color: #0070CD !important;
			
 
				+    color: #ffffff !important;
			
 
				+}
			
 
				+
			
 
				+.forgotPass {
			
 
				+    color: #55729c;
			
 
				+    margin-top: 25px;
			
 
				+    display: block;
			
 
				+}
			
 
				+
			
 
				+.form-reset-password input {
			
 
				+    padding: 8px 8px 8px 5px;
			
 
				+}
			
 
				+
			
 
				+.form-reset-password label {
			
 
				+    top: 10px;
			
 
				+}
			
 
				+
			
 
				+.form-reset-password .group {
			
 
				+    margin-bottom: 40px;
			
 
				+}
			
 
				+
			
 
				+.header {
			
 
				+    height: 200px;
			
 
				+    background: #425464;
			
 
				+}
			
 
				+
			
 
				+.footer {
			
 
				+    height: 50px;
			
 
				+    background: #425464;
			
 
				+}
			
 
				+
			
 
				+@media only screen and (max-width: 900px) {
			
 
				+
			
 
				+    .login,
			
 
				+    .login-container {
			
 
				+        width: 100%;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+@media only screen and (max-width: 768px) {
			
 
				+    .login {
			
 
				+        top: 150px;
			
 
				+    }
			
 
				+
			
 
				+    .login-left,
			
 
				+    .login-right {
			
 
				+        width: 100%;
			
 
				+        float: none;
			
 
				+    }
			
 
				+
			
 
				+    .form-signin,
			
 
				+    .form-reset-password {
			
 
				+        height: 100%;
			
 
				+        display: initial;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+/* width */
			
 
				+
			
 
				+::-webkit-scrollbar {
			
 
				+    width: 5px;
			
 
				+}
			
 
				+
			
 
				+/* Track */
			
 
				+
			
 
				+::-webkit-scrollbar-track {
			
 
				+    box-shadow: inset 0 0 5px grey;
			
 
				+    border-radius: 2px;
			
 
				+}
			
 
				+
			
 
				+/* Handle */
			
 
				+
			
 
				+::-webkit-scrollbar-thumb {
			
 
				+    background: #444;
			
 
				+    border-radius: 2px;
			
 
				+}
			
 
				+
			
 
				+/* Handle on hover */
			
 
				+
			
 
				+::-webkit-scrollbar-thumb:hover {
			
 
				+    background: #333333;
			
 
				+}
			
 
				+
			
 
				+.alert {
			
 
				+    display: none;
			
 
				+}
			
 
				+
			
 
				+.alert {
			
 
				+    z-index: 9999;
			
 
				+    position: fixed;
			
 
				+    top: 10px;
			
 
				+    width: auto;
			
 
				+    left: 50%;
			
 
				+    transform: translateX(-50%);
			
 
				+}
			
 
				+
			
 
				+#triangle-topleft {
			
 
				+    clip-path: polygon(0 0, 0% 100%, 100% 0);
			
 
				+    background: #C4161C;
			
 
				+    width: 100%;
			
 
				+    height: 430px;
			
 
				+}
			
--- a/template/login.html
+++ b/template/login.html
@@ -0,0 +1,85 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
			
 
				+    <title>WFM - Login</title>
			
 
				+
			
 
				+    <!-- Latest compiled and minified CSS -->
			
 
				+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
			
 
				+    <link rel="stylesheet" href="login - 1.css">
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+    <div class="container">
			
 
				+        <div class="login">
			
 
				+            <div class="login-container">
			
 
				+                <div class="login-left">
			
 
				+                    <div class="lbox">
			
 
				+                        <!-- <svg viewBox="0 0 150 200" xmlns="http://www.w3.org/2000/svg" style="position: absolute;top: -235px;left: -91px;">
			
 
				+                            <path fill="#C52F33" d="M45.6,-46C55.7,-45.7,58.4,-28.3,58.6,-12.5C58.7,3.2,56.4,17.2,48.3,24.7C40.2,32.2,26.3,33.3,12.3,42C-1.8,50.7,-16.1,67.1,-26.7,66.3C-37.2,65.5,-44,47.4,-53.6,30.9C-63.2,14.4,-75.6,-0.6,-75.3,-15.2C-75,-29.8,-62,-44.1,-47.3,-43.5C-32.7,-43,-16.3,-27.6,0.7,-28.4C17.7,-29.3,35.4,-46.2,45.6,-46Z" transform="translate(100 100)"></path>
			
 
				+                        </svg>
			
 
				+
			
 
				+                          <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" style=" position: absolute; right: -191px; top: 223px; ">
			
 
				+                            <path fill="#C52F33" d="M39.8,-73.6C47.6,-64.5,47.2,-45.8,46.9,-31.9C46.6,-18,46.5,-9,50,2C53.4,13.1,60.6,26.1,59.3,37.1C57.9,48.1,48,57,36.7,58.9C25.4,60.9,12.7,55.8,2.6,51.3C-7.5,46.8,-15,42.9,-25.4,40.5C-35.9,38.1,-49.2,37.1,-60.9,30.6C-72.6,24,-82.8,12,-78.5,2.5C-74.2,-7.1,-55.6,-14.2,-45.3,-23.2C-35,-32.1,-33,-42.9,-26.8,-53C-20.7,-63.1,-10.3,-72.5,2.8,-77.5C16,-82.4,32,-82.8,39.8,-73.6Z" transform="translate(100 100)" />
			
 
				+                          </svg> -->
			
 
				+                       
			
 
				+                        <h2 class="clogo">Forecast</h2>
			
 
				+                        <img src="./dist/img/logo.png" alt="Lumina Datamatics" class="llogo">
			
 
				+                        <!-- <p>© 2022 Lumina Datamatics Ltd. All Rights Reserved.</p> -->
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                <div class="login-right">
			
 
				+                    <form action="#" method="get" class="form-signin" onsubmit="return validateLogin()">
			
 
				+                        <h2 class="form-signin-heading">Login</h2>
			
 
				+                        <div class="group">
			
 
				+                            <input type="text" name="username" id="username">
			
 
				+                            <label>Email address</label>
			
 
				+                        </div>
			
 
				+
			
 
				+                        <div class="group">
			
 
				+                            <input type="password" id="password">
			
 
				+                            <label>Password</label>
			
 
				+                        </div>
			
 
				+                        <div class="group" style="margin-bottom: 30px;">
			
 
				+                            <button class="btn btn-lg btn-outline-dark btn-block" type="submit" onclick="window.location = 'index.html'">Sign in</button>
			
 
				+                            <!-- <a href="#" class="forgotPass">Forgot your password?</a> -->
			
 
				+                        </div>
			
 
				+                       
			
 
				+                    </form>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+
			
 
				+
			
 
				+    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
			
 
				+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
			
 
				+    <!-- Latest compiled and minified JavaScript -->
			
 
				+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
			
 
				+    <script>
			
 
				+        function validateLogin() {
			
 
				+            if ($("#username").val() == "" || $("#password").val() == "") {
			
 
				+                $("#missing").fadeTo(2000, 500).slideUp(500, function () {
			
 
				+                    $("#missing").slideUp(500);
			
 
				+                });
			
 
				+                return false;
			
 
				+            } else if ($("#username").val() != "admin" && $("#password").val() != "admin") {
			
 
				+                $("#wrong").fadeTo(2000, 500).slideUp(500, function () {
			
 
				+                    $("#wrong").slideUp(500);
			
 
				+                });
			
 
				+                return false;
			
 
				+            } else if ($("#username").val() == "admin" && $("#password").val() == "admin") {
			
 
				+                $("#success").fadeTo(2000, 500).slideUp(500, function () {
			
 
				+                    $("#success").slideUp(500);
			
 
				+                });
			
 
				+                return true;
			
 
				+            }
			
 
				+        }
			
 
				+    </script>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/template/src/assets/img/AdminLTEFullLogo.png
+++ b/template/src/assets/img/AdminLTEFullLogo.png
--- a/template/src/assets/img/AdminLTELogo.png
+++ b/template/src/assets/img/AdminLTELogo.png
--- a/template/src/assets/img/avatar.png
+++ b/template/src/assets/img/avatar.png
--- a/template/src/assets/img/avatar2.png
+++ b/template/src/assets/img/avatar2.png
--- a/template/src/assets/img/avatar3.png
+++ b/template/src/assets/img/avatar3.png
--- a/template/src/assets/img/avatar4.png
+++ b/template/src/assets/img/avatar4.png
--- a/template/src/assets/img/avatar5.png
+++ b/template/src/assets/img/avatar5.png
--- a/template/src/assets/img/boxed-bg.jpg
+++ b/template/src/assets/img/boxed-bg.jpg
--- a/template/src/assets/img/boxed-bg.png
+++ b/template/src/assets/img/boxed-bg.png
--- a/template/src/assets/img/credit/american-express.png
+++ b/template/src/assets/img/credit/american-express.png
--- a/template/src/assets/img/credit/cirrus.png
+++ b/template/src/assets/img/credit/cirrus.png
--- a/template/src/assets/img/credit/mastercard.png
+++ b/template/src/assets/img/credit/mastercard.png
--- a/template/src/assets/img/credit/paypal.png
+++ b/template/src/assets/img/credit/paypal.png
--- a/template/src/assets/img/credit/paypal2.png
+++ b/template/src/assets/img/credit/paypal2.png
--- a/template/src/assets/img/credit/visa.png
+++ b/template/src/assets/img/credit/visa.png
--- a/template/src/assets/img/default-150x150.png
+++ b/template/src/assets/img/default-150x150.png
--- a/template/src/assets/img/icons.png
+++ b/template/src/assets/img/icons.png
--- a/template/src/assets/img/photo1.png
+++ b/template/src/assets/img/photo1.png
--- a/template/src/assets/img/photo2.png
+++ b/template/src/assets/img/photo2.png
--- a/template/src/assets/img/photo3.jpg
+++ b/template/src/assets/img/photo3.jpg
--- a/template/src/assets/img/photo4.jpg
+++ b/template/src/assets/img/photo4.jpg
--- a/template/src/assets/img/prod-1.jpg
+++ b/template/src/assets/img/prod-1.jpg
--- a/template/src/assets/img/prod-2.jpg
+++ b/template/src/assets/img/prod-2.jpg
--- a/template/src/assets/img/prod-3.jpg
+++ b/template/src/assets/img/prod-3.jpg
--- a/template/src/assets/img/prod-4.jpg
+++ b/template/src/assets/img/prod-4.jpg
--- a/template/src/assets/img/prod-5.jpg
+++ b/template/src/assets/img/prod-5.jpg
--- a/template/src/assets/img/user1-128x128.jpg
+++ b/template/src/assets/img/user1-128x128.jpg
--- a/template/src/assets/img/user2-160x160.jpg
+++ b/template/src/assets/img/user2-160x160.jpg
--- a/template/src/assets/img/user3-128x128.jpg
+++ b/template/src/assets/img/user3-128x128.jpg
--- a/template/src/assets/img/user4-128x128.jpg
+++ b/template/src/assets/img/user4-128x128.jpg
--- a/template/src/assets/img/user5-128x128.jpg
+++ b/template/src/assets/img/user5-128x128.jpg
--- a/template/src/assets/img/user6-128x128.jpg
+++ b/template/src/assets/img/user6-128x128.jpg
--- a/template/src/assets/img/user7-128x128.jpg
+++ b/template/src/assets/img/user7-128x128.jpg
--- a/template/src/assets/img/user8-128x128.jpg
+++ b/template/src/assets/img/user8-128x128.jpg
--- a/template/src/config/assets.config.mjs
+++ b/template/src/config/assets.config.mjs
@@ -0,0 +1,8 @@
 
				+import fs from 'fs-extra'
			
 
				+
			
 
				+try {
			
 
				+  fs.copySync('./src/assets', './dist/assets')
			
 
				+  console.log('Assets copy success!')
			
 
				+} catch (error) {
			
 
				+  console.error(error)
			
 
				+}
			
--- a/template/src/config/astro.config.mjs
+++ b/template/src/config/astro.config.mjs
@@ -0,0 +1,31 @@
 
				+import { defineConfig } from 'astro/config'
			
 
				+import mdx from '@astrojs/mdx'
			
 
				+
			
 
				+// https://astro.build/config
			
 
				+export default defineConfig({
			
 
				+  build: {
			
 
				+    // Example: Generate `page.html` instead of `page/index.html` during build.
			
 
				+    format: 'file'
			
 
				+  },
			
 
				+  markdown: {
			
 
				+    shikiConfig: {
			
 
				+      theme: 'dark-plus'
			
 
				+    }
			
 
				+  },
			
 
				+  integrations: [mdx()],
			
 
				+  srcDir: './src/html',
			
 
				+  cacheDir: './dist/pages',
			
 
				+  outDir: './dist/pages',
			
 
				+  vite: {
			
 
				+    resolve: {
			
 
				+      alias: {
			
 
				+        '@components': '/src/html/components'
			
 
				+      }
			
 
				+    },
			
 
				+    server: {
			
 
				+      watch: {
			
 
				+        ignored: ['!**/dist/**']
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+})
			
--- a/template/src/config/postcss.config.mjs
+++ b/template/src/config/postcss.config.mjs
@@ -0,0 +1,15 @@
 
				+export default ctx => {
			
 
				+  return {
			
 
				+    map: {
			
 
				+      inline: false,
			
 
				+      annotation: true,
			
 
				+      sourcesContent: true
			
 
				+    },
			
 
				+    plugins: {
			
 
				+      autoprefixer: {
			
 
				+        cascade: false
			
 
				+      },
			
 
				+      rtlcss: ctx.env === 'RTL' ? {} : false
			
 
				+    }
			
 
				+  }
			
 
				+}
			
--- a/template/src/config/rollup.config.js
+++ b/template/src/config/rollup.config.js
@@ -0,0 +1,20 @@
 
				+const typescript = require('@rollup/plugin-typescript')
			
 
				+const pkg = require('../../package.json')
			
 
				+
			
 
				+const year = new Date().getFullYear()
			
 
				+const banner = `/*!
			
 
				+ * AdminLTE v${pkg.version} (${pkg.homepage})
			
 
				+ * Copyright 2014-${year} ${pkg.author}
			
 
				+ * Licensed under MIT (https://github.com/ColorlibHQ/AdminLTE/blob/master/LICENSE)
			
 
				+ */`
			
 
				+
			
 
				+module.exports = {
			
 
				+  input: 'src/ts/adminlte.ts',
			
 
				+  output: {
			
 
				+    file: 'dist/js/adminlte.js',
			
 
				+    format: 'umd',
			
 
				+    banner,
			
 
				+    name: 'adminlte'
			
 
				+  },
			
 
				+  plugins: [typescript()]
			
 
				+}
			
--- a/template/src/html/.eslintrc.json
+++ b/template/src/html/.eslintrc.json
@@ -0,0 +1,24 @@
 
				+{
			
 
				+  "root": true,
			
 
				+  "extends": [
			
 
				+    "plugin:astro/recommended"
			
 
				+  ],
			
 
				+  "overrides": [
			
 
				+    {
			
 
				+      // Define the configuration for `.astro` file.
			
 
				+      "files": ["*.astro"],
			
 
				+      // Allows Astro components to be parsed.
			
 
				+      "parser": "astro-eslint-parser",
			
 
				+      // Parse the script in `.astro` as TypeScript by adding the following configuration.
			
 
				+      // It's the setting you need when using TypeScript.
			
 
				+      "parserOptions": {
			
 
				+        "parser": "@typescript-eslint/parser",
			
 
				+        "extraFileExtensions": [".astro"]
			
 
				+      },
			
 
				+      "rules": {
			
 
				+        // override/add rules settings here, such as:
			
 
				+        // "astro/no-set-html-directive": "error"
			
 
				+      }
			
 
				+    }
			
 
				+  ]
			
 
				+}
			
--- a/template/src/html/.prettierrc.js
+++ b/template/src/html/.prettierrc.js
@@ -0,0 +1,11 @@
 
				+module.exports = {
			
 
				+  plugins: [require.resolve('prettier-plugin-astro')],
			
 
				+  overrides: [
			
 
				+    {
			
 
				+      files: '*.astro',
			
 
				+      options: {
			
 
				+        parser: 'astro',
			
 
				+      },
			
 
				+    },
			
 
				+  ],
			
 
				+};
			
--- a/template/src/html/.tsconfig.json
+++ b/template/src/html/.tsconfig.json
@@ -0,0 +1,4 @@
 
				+{
			
 
				+  "root": true,
			
 
				+  "extends": "astro/tsconfigs/strict"
			
 
				+}
			
--- a/template/src/html/components/_head.astro
+++ b/template/src/html/components/_head.astro
@@ -0,0 +1,37 @@
 
				+---
			
 
				+const { title, path, isRtl } = Astro.props;
			
 
				+const cssPath = isRtl ? ".rtl" : "";
			
 
				+---
			
 
				+
			
 
				+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			
 
				+<title>{title}</title>
			
 
				+<!--begin::Primary Meta Tags-->
			
 
				+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				+<meta name="title" content={title} />
			
 
				+<meta name="author" content="ColorlibHQ" />
			
 
				+<meta
			
 
				+  name="description"
			
 
				+  content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
			
 
				+/>
			
 
				+<meta
			
 
				+  name="keywords"
			
 
				+  content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
			
 
				+/>
			
 
				+<!--end::Primary Meta Tags-->
			
 
				+<!--begin::Fonts-->
			
 
				+<link
			
 
				+  rel="stylesheet"
			
 
				+  href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
			
 
				+  integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
			
 
				+  crossorigin="anonymous"
			
 
				+/>
			
 
				+<!--end::Fonts-->
			
 
				+<!--begin::Third Party Plugin(OverlayScrollbars)-->
			
 
				+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/styles/overlayscrollbars.min.css" integrity="sha256-dSokZseQNT08wYEWiz5iLI8QPlKxG+TswNRD8k35cpg=" crossorigin="anonymous">
			
 
				+<!--end::Third Party Plugin(OverlayScrollbars)-->
			
 
				+<!--begin::Third Party Plugin(Bootstrap Icons)-->
			
 
				+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.min.css" integrity="sha256-Qsx5lrStHZyR9REqhUF8iQt73X06c8LGIUPzpOhwRrI=" crossorigin="anonymous">
			
 
				+<!--end::Third Party Plugin(Bootstrap Icons)-->
			
 
				+<!--begin::Required Plugin(AdminLTE)-->
			
 
				+<link rel="stylesheet" href={path + "/css/adminlte" + cssPath + ".css"} />
			
 
				+<!--end::Required Plugin(AdminLTE)-->
			
--- a/template/src/html/components/_scripts.astro
+++ b/template/src/html/components/_scripts.astro
@@ -0,0 +1,39 @@
 
				+---
			
 
				+const { path } = Astro.props;
			
 
				+const adminlteJsUrl = path + "/js/adminlte.js";
			
 
				+---
			
 
				+
			
 
				+<!--begin::Third Party Plugin(OverlayScrollbars)-->
			
 
				+<script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-H2VM7BKda+v2Z4+DRy69uknwxjyDRhszjXFhsL4gD3w=" crossorigin="anonymous"></script>
			
 
				+<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
			
 
				+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha256-whL0tQWoY1Ku1iskqPFvmZ+CHsvmRWx/PIoEvIeWh4I=" crossorigin="anonymous"></script>
			
 
				+<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
			
 
				+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8=" crossorigin="anonymous"></script>
			
 
				+<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
			
 
				+<script src={adminlteJsUrl} is:inline></script>
			
 
				+<!--end::Required Plugin(AdminLTE)-->
			
 
				+<!--begin::OverlayScrollbars Configure-->
			
 
				+<script is:inline>
			
 
				+  const SELECTOR_SIDEBAR_WRAPPER = ".sidebar-wrapper";
			
 
				+  const Default = {
			
 
				+    scrollbarTheme: "os-theme-light",
			
 
				+    scrollbarAutoHide: "leave",
			
 
				+    scrollbarClickScroll: true,
			
 
				+  };
			
 
				+  document.addEventListener("DOMContentLoaded", function () {
			
 
				+    const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
			
 
				+    if (
			
 
				+      sidebarWrapper &&
			
 
				+      typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== "undefined"
			
 
				+    ) {
			
 
				+      OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
			
 
				+        scrollbars: {
			
 
				+          theme: Default.scrollbarTheme,
			
 
				+          autoHide: Default.scrollbarAutoHide,
			
 
				+          clickScroll: Default.scrollbarClickScroll,
			
 
				+        },
			
 
				+      });
			
 
				+    }
			
 
				+  });
			
 
				+</script>
			
 
				+<!--end::OverlayScrollbars Configure-->
			
--- a/template/src/html/components/dashboard/_footer.astro
+++ b/template/src/html/components/dashboard/_footer.astro
@@ -0,0 +1,18 @@
 
				+---
			
 
				+const year = new Date().getFullYear();
			
 
				+---
			
 
				+
			
 
				+<!--begin::Footer-->
			
 
				+<footer class="app-footer">
			
 
				+  <!--begin::To the end-->
			
 
				+  <div class="float-end d-none d-sm-inline">Anything you want</div>
			
 
				+  <!--end::To the end-->
			
 
				+  <!--begin::Copyright-->
			
 
				+  <strong>
			
 
				+    Copyright &copy; 2014-{year}&nbsp;
			
 
				+    <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
			
 
				+  </strong>
			
 
				+  All rights reserved.
			
 
				+  <!--end::Copyright-->
			
 
				+</footer>
			
 
				+<!--end::Footer-->
			
--- a/template/src/html/components/dashboard/_sidenav.astro
+++ b/template/src/html/components/dashboard/_sidenav.astro
@@ -0,0 +1,580 @@
 
				+---
			
 
				+import {convertPathToHtml} from "../../../utils/index.js";
			
 
				+const {path, mainPage, page} = Astro.props;
			
 
				+const htmlPath = convertPathToHtml(path);
			
 
				+---
			
 
				+
			
 
				+<!--begin::Sidebar-->
			
 
				+<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
			
 
				+  <!--begin::Sidebar Brand-->
			
 
				+  <div class="sidebar-brand">
			
 
				+    <!--begin::Brand Link-->
			
 
				+    <a href={htmlPath + "/index.html"} class="brand-link">
			
 
				+      <!--begin::Brand Image-->
			
 
				+      <img
			
 
				+        src={path + "/assets/img/AdminLTELogo.png"}
			
 
				+        alt="AdminLTE Logo"
			
 
				+        class="brand-image opacity-75 shadow"
			
 
				+      />
			
 
				+      <!--end::Brand Image-->
			
 
				+      <!--begin::Brand Text-->
			
 
				+      <span class="brand-text fw-light">AdminLTE 4</span>
			
 
				+      <!--end::Brand Text-->
			
 
				+    </a>
			
 
				+    <!--end::Brand Link-->
			
 
				+  </div>
			
 
				+  <!--end::Sidebar Brand-->
			
 
				+  <!--begin::Sidebar Wrapper-->
			
 
				+  <div class="sidebar-wrapper">
			
 
				+    <nav class="mt-2">
			
 
				+      <!--begin::Sidebar Menu-->
			
 
				+      <ul
			
 
				+        class="nav sidebar-menu flex-column"
			
 
				+        data-lte-toggle="treeview"
			
 
				+        role="menu"
			
 
				+        data-accordion="false"
			
 
				+      >
			
 
				+        <li class:list={["nav-item", mainPage === "dashboard" && "menu-open"]}>
			
 
				+          <a
			
 
				+            href="#"
			
 
				+            class:list={["nav-link", mainPage === "dashboard" && "active"]}
			
 
				+          >
			
 
				+            <i class="nav-icon bi bi-speedometer"></i>
			
 
				+            <p>
			
 
				+              Dashboard
			
 
				+              <i class="nav-arrow bi bi-chevron-right"></i>
			
 
				+            </p>
			
 
				+          </a>
			
 
				+          <ul class="nav nav-treeview">
			
 
				+            <li class="nav-item">
			
 
				+              <a
			
 
				+                href={htmlPath + "/index.html"}
			
 
				+                class:list={["nav-link", page === "index" && "active"]}
			
 
				+              >
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>Dashboard v1</p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+            <li class="nav-item">
			
 
				+              <a
			
 
				+                href={htmlPath + "/index2.html"}
			
 
				+                class:list={["nav-link", page === "index2" && "active"]}
			
 
				+              >
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>Dashboard v2</p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+            <li class="nav-item">
			
 
				+              <a
			
 
				+                href={htmlPath + "/index3.html"}
			
 
				+                class:list={["nav-link", page === "index3" && "active"]}
			
 
				+              >
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>Dashboard v3</p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+          </ul>
			
 
				+        </li>
			
 
				+        <li class="nav-item">
			
 
				+          <a
			
 
				+            href={htmlPath + "/generate/theme.html"}
			
 
				+            class:list={["nav-link", page === "theme-generate" && "active"]}
			
 
				+          >
			
 
				+            <i class="nav-icon bi bi-palette"></i>
			
 
				+            <p>Theme Generate</p>
			
 
				+          </a>
			
 
				+        </li>
			
 
				+        <li class:list={["nav-item", mainPage === "widgets" && "menu-open"]}>
			
 
				+          <a
			
 
				+            href="#"
			
 
				+            class:list={["nav-link", mainPage === "widgets" && "active"]}
			
 
				+          >
			
 
				+            <i class="nav-icon bi bi-box-seam-fill"></i>
			
 
				+            <p>
			
 
				+              Widgets
			
 
				+              <i class="nav-arrow bi bi-chevron-right"></i>
			
 
				+            </p>
			
 
				+          </a>
			
 
				+          <ul class="nav nav-treeview">
			
 
				+            <li class="nav-item">
			
 
				+              <a
			
 
				+                href={htmlPath + "/widgets/small-box.html"}
			
 
				+                class:list={["nav-link", page === "small-box" && "active"]}
			
 
				+              >
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>Small Box</p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+            <li class="nav-item">
			
 
				+              <a
			
 
				+                href={htmlPath + "/widgets/info-box.html"}
			
 
				+                class:list={["nav-link", page === "info-box" && "active"]}
			
 
				+              >
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>info Box</p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+            <li class="nav-item">
			
 
				+              <a
			
 
				+                href={htmlPath + "/widgets/cards.html"}
			
 
				+                class:list={["nav-link", page === "cards" && "active"]}
			
 
				+              >
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>Cards</p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+          </ul>
			
 
				+        </li>
			
 
				+        <li class:list={["nav-item", mainPage === "layout" && "menu-open"]}>
			
 
				+          <a
			
 
				+            href="#"
			
 
				+            class:list={["nav-link", mainPage === "layout" && "active"]}
			
 
				+          >
			
 
				+            <i class="nav-icon bi bi-clipboard-fill"></i>
			
 
				+            <p>
			
 
				+              Layout Options
			
 
				+              <span class="nav-badge badge text-bg-secondary me-3"
			
 
				+              >6</span
			
 
				+              >
			
 
				+              <i class="nav-arrow bi bi-chevron-right"></i>
			
 
				+            </p>
			
 
				+          </a>
			
 
				+          <ul class="nav nav-treeview">
			
 
				+            <li class="nav-item">
			
 
				+              <a
			
 
				+                href={htmlPath + "/layout/unfixed-sidebar.html"}
			
 
				+                class:list={[
			
 
				+                  "nav-link",
			
 
				+                  page === "unfixed-sidebar" && "active",
			
 
				+                ]}
			
 
				+              >
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>Default Sidebar</p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+            <li class="nav-item">
			
 
				+              <a
			
 
				+                href={htmlPath + "/layout/fixed-sidebar.html"}
			
 
				+                class:list={["nav-link", page === "fixed-sidebar" && "active"]}
			
 
				+              >
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>Fixed Sidebar</p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+            <li class="nav-item">
			
 
				+              <a
			
 
				+                href={htmlPath + "/layout/layout-custom-area.html"}
			
 
				+                class:list={["nav-link", page === "layout-custom-area" && "active"]}
			
 
				+              >
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>Layout <small>+ Custom Area </small></p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+            <li class="nav-item">
			
 
				+              <a
			
 
				+                href={htmlPath + "/layout/sidebar-mini.html"}
			
 
				+                class:list={["nav-link", page === "sidebar-mini" && "active"]}
			
 
				+              >
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>Sidebar Mini</p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+            <li class="nav-item">
			
 
				+              <a
			
 
				+                href={htmlPath + "/layout/collapsed-sidebar.html"}
			
 
				+                class:list={[
			
 
				+                  "nav-link",
			
 
				+                  page === "collapsed-sidebar" && "active",
			
 
				+                ]}
			
 
				+              >
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>Sidebar Mini <small>+ Collapsed</small></p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+            <li class="nav-item">
			
 
				+              <a
			
 
				+                href={htmlPath + "/layout/logo-switch.html"}
			
 
				+                class:list={["nav-link", page === "logo-switch" && "active"]}
			
 
				+              >
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>Sidebar Mini <small>+ Logo Switch</small></p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+            <li class="nav-item">
			
 
				+              <a
			
 
				+                href={htmlPath + "/layout/layout-rtl.html"}
			
 
				+                class:list={["nav-link", page === "layout-rtl" && "active"]}
			
 
				+              >
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>Layout RTL</p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+          </ul>
			
 
				+        </li>
			
 
				+        <li
			
 
				+          class:list={["nav-item", mainPage === "ui-elements" && "menu-open"]}
			
 
				+        >
			
 
				+          <a
			
 
				+            href="#"
			
 
				+            class:list={["nav-link", mainPage === "ui-elements" && "active"]}
			
 
				+          >
			
 
				+            <i class="nav-icon bi bi-tree-fill"></i>
			
 
				+            <p>
			
 
				+              UI Elements
			
 
				+              <i class="nav-arrow bi bi-chevron-right"></i>
			
 
				+            </p>
			
 
				+          </a>
			
 
				+          <ul class="nav nav-treeview">
			
 
				+            <li class="nav-item">
			
 
				+              <a
			
 
				+                href={htmlPath + "/UI/general.html"}
			
 
				+                class:list={["nav-link", page === "general" && "active"]}
			
 
				+              >
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>General</p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+            <li class="nav-item">
			
 
				+              <a
			
 
				+                href={htmlPath + "/UI/icons.html"}
			
 
				+                class:list={["nav-link", page === "icons" && "active"]}
			
 
				+              >
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>Icons</p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+            <li class="nav-item">
			
 
				+              <a
			
 
				+                href={htmlPath + "/UI/timeline.html"}
			
 
				+                class:list={["nav-link", page === "timeline" && "active"]}
			
 
				+              >
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>Timeline</p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+          </ul>
			
 
				+        </li>
			
 
				+        <li class:list={["nav-item", mainPage === "forms" && "menu-open"]}>
			
 
				+          <a
			
 
				+            href="#"
			
 
				+            class:list={["nav-link", mainPage === "forms" && "active"]}
			
 
				+          >
			
 
				+            <i class="nav-icon bi bi-pencil-square"></i>
			
 
				+            <p>
			
 
				+              Forms
			
 
				+              <i class="nav-arrow bi bi-chevron-right"></i>
			
 
				+            </p>
			
 
				+          </a>
			
 
				+          <ul class="nav nav-treeview">
			
 
				+            <li class="nav-item">
			
 
				+              <a
			
 
				+                href={htmlPath + "/forms/general.html"}
			
 
				+                class:list={["nav-link", page === "general" && "active"]}
			
 
				+              >
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>General Elements</p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+          </ul>
			
 
				+        </li>
			
 
				+        <li class:list={["nav-item", mainPage === "tables" && "menu-open"]}>
			
 
				+          <a
			
 
				+            href="#"
			
 
				+            class:list={["nav-link", mainPage === "tables" && "active"]}
			
 
				+          >
			
 
				+            <i class="nav-icon bi bi-table"></i>
			
 
				+            <p>
			
 
				+              Tables
			
 
				+              <i class="nav-arrow bi bi-chevron-right"></i>
			
 
				+            </p>
			
 
				+          </a>
			
 
				+          <ul class="nav nav-treeview">
			
 
				+            <li class="nav-item">
			
 
				+              <a
			
 
				+                href={htmlPath + "/tables/simple.html"}
			
 
				+                class:list={["nav-link", page === "simple" && "active"]}
			
 
				+              >
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>Simple Tables</p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+          </ul>
			
 
				+        </li>
			
 
				+
			
 
				+        <li class="nav-header">EXAMPLES</li>
			
 
				+        <li class="nav-item">
			
 
				+          <a href="#" class="nav-link">
			
 
				+            <i class="nav-icon bi bi-box-arrow-in-right"></i>
			
 
				+            <p>
			
 
				+              Auth
			
 
				+              <i class="nav-arrow bi bi-chevron-right"></i>
			
 
				+            </p>
			
 
				+          </a>
			
 
				+          <ul class="nav nav-treeview">
			
 
				+            <li class="nav-item">
			
 
				+              <a href="#" class="nav-link">
			
 
				+                <i class="nav-icon bi bi-box-arrow-in-right"></i>
			
 
				+                <p>
			
 
				+                  Version 1
			
 
				+                  <i class="nav-arrow bi bi-chevron-right"></i>
			
 
				+                </p>
			
 
				+              </a>
			
 
				+              <ul class="nav nav-treeview">
			
 
				+                <li class="nav-item">
			
 
				+                  <a href={htmlPath + "/examples/login.html"} class="nav-link">
			
 
				+                    <i class="nav-icon bi bi-circle"></i>
			
 
				+                    <p>Login</p>
			
 
				+                  </a>
			
 
				+                </li>
			
 
				+                <li class="nav-item">
			
 
				+                  <a href={htmlPath + "/examples/register.html"} class="nav-link">
			
 
				+                    <i class="nav-icon bi bi-circle"></i>
			
 
				+                    <p>Register</p>
			
 
				+                  </a>
			
 
				+                </li>
			
 
				+              </ul>
			
 
				+            </li>
			
 
				+            <li class="nav-item">
			
 
				+              <a href="#" class="nav-link">
			
 
				+                <i class="nav-icon bi bi-box-arrow-in-right"></i>
			
 
				+                <p>
			
 
				+                  Version 2
			
 
				+                  <i class="nav-arrow bi bi-chevron-right"></i>
			
 
				+                </p>
			
 
				+              </a>
			
 
				+              <ul class="nav nav-treeview">
			
 
				+                <li class="nav-item">
			
 
				+                  <a href={htmlPath + "/examples/login-v2.html"} class="nav-link">
			
 
				+                    <i class="nav-icon bi bi-circle"></i>
			
 
				+                    <p>Login</p>
			
 
				+                  </a>
			
 
				+                </li>
			
 
				+                <li class="nav-item">
			
 
				+                  <a href={htmlPath + "/examples/register-v2.html"} class="nav-link">
			
 
				+                    <i class="nav-icon bi bi-circle"></i>
			
 
				+                    <p>Register</p>
			
 
				+                  </a>
			
 
				+                </li>
			
 
				+              </ul>
			
 
				+            </li>
			
 
				+            <li class="nav-item">
			
 
				+              <a href={htmlPath + "/examples/lockscreen.html"} class="nav-link">
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>Lockscreen</p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+          </ul>
			
 
				+        </li>
			
 
				+
			
 
				+        <li class="nav-header">DOCUMENTATIONS</li>
			
 
				+        <li class="nav-item">
			
 
				+          <a
			
 
				+            href={htmlPath + "/docs/introduction.html"}
			
 
				+            class:list={["nav-link", page === "introduction" && "active"]}
			
 
				+          >
			
 
				+            <i class="nav-icon bi bi-download"></i>
			
 
				+            <p>Installation</p>
			
 
				+          </a>
			
 
				+        </li>
			
 
				+        <li class="nav-item">
			
 
				+          <a
			
 
				+            href={htmlPath + "/docs/layout.html"}
			
 
				+            class:list={["nav-link", page === "layout" && "active"]}
			
 
				+          >
			
 
				+            <i class="nav-icon bi bi-grip-horizontal"></i>
			
 
				+            <p>Layout</p>
			
 
				+          </a>
			
 
				+        </li>
			
 
				+        <li class="nav-item">
			
 
				+          <a
			
 
				+            href={htmlPath + "/docs/color-mode.html"}
			
 
				+            class:list={["nav-link", page === "color-mode" && "active"]}
			
 
				+          >
			
 
				+            <i class="nav-icon bi bi-star-half"></i>
			
 
				+            <p>Color Mode</p>
			
 
				+          </a>
			
 
				+        </li>
			
 
				+        <li class:list={["nav-item", mainPage === "components" && "menu-open"]}>
			
 
				+          <a
			
 
				+            href="#"
			
 
				+            class:list={["nav-link", mainPage === "components" && "active"]}
			
 
				+          >
			
 
				+            <i class="nav-icon bi bi-ui-checks-grid"></i>
			
 
				+            <p>
			
 
				+              Components
			
 
				+              <i class="nav-arrow bi bi-chevron-right"></i>
			
 
				+            </p>
			
 
				+          </a>
			
 
				+          <ul class="nav nav-treeview">
			
 
				+            <li class="nav-item">
			
 
				+              <a
			
 
				+                href={htmlPath + "/docs/components/main-header.html"}
			
 
				+                class:list={["nav-link", page === "main-header" && "active"]}
			
 
				+              >
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>Main Header</p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+            <li class="nav-item">
			
 
				+              <a
			
 
				+                href={htmlPath + "/docs/components/main-sidebar.html"}
			
 
				+                class:list={["nav-link", page === "main-sidebar" && "active"]}
			
 
				+              >
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>Main Sidebar</p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+          </ul>
			
 
				+        </li>
			
 
				+        <li class:list={["nav-item", mainPage === "javascript" && "menu-open"]}>
			
 
				+          <a
			
 
				+            href="#"
			
 
				+            class:list={["nav-link", mainPage === "javascript" && "active"]}
			
 
				+          >
			
 
				+            <i class="nav-icon bi bi-filetype-js"></i>
			
 
				+            <p>
			
 
				+              Javascript
			
 
				+              <i class="nav-arrow bi bi-chevron-right"></i>
			
 
				+            </p>
			
 
				+          </a>
			
 
				+          <ul class="nav nav-treeview">
			
 
				+            <li class="nav-item">
			
 
				+              <a
			
 
				+                href={htmlPath + "/docs/javascript/treeview.html"}
			
 
				+                class:list={["nav-link", page === "treeview" && "active"]}
			
 
				+              >
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>Treeview</p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+          </ul>
			
 
				+        </li>
			
 
				+        <li class="nav-item">
			
 
				+          <a
			
 
				+            href={htmlPath + "/docs/browser-support.html"}
			
 
				+            class:list={["nav-link", page === "browser-support" && "active"]}
			
 
				+          >
			
 
				+            <i class="nav-icon bi bi-browser-edge"></i>
			
 
				+            <p>Browser Support</p>
			
 
				+          </a>
			
 
				+        </li>
			
 
				+        <li class="nav-item">
			
 
				+          <a
			
 
				+            href={htmlPath + "/docs/how-to-contribute.html"}
			
 
				+            class:list={["nav-link", page === "how-to-contribute" && "active"]}
			
 
				+          >
			
 
				+            <i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
			
 
				+            <p>How To Contribute</p>
			
 
				+          </a>
			
 
				+        </li>
			
 
				+        <li class="nav-item">
			
 
				+          <a
			
 
				+            href={htmlPath + "/docs/faq.html"}
			
 
				+            class:list={["nav-link", page === "faq" && "active"]}
			
 
				+          >
			
 
				+            <i class="nav-icon bi bi-question-circle-fill"></i>
			
 
				+            <p>FAQ</p>
			
 
				+          </a>
			
 
				+        </li>
			
 
				+        <li class="nav-item">
			
 
				+          <a
			
 
				+            href={htmlPath + "/docs/license.html"}
			
 
				+            class:list={["nav-link", page === "license" && "active"]}
			
 
				+          >
			
 
				+            <i class="nav-icon bi bi-patch-check-fill"></i>
			
 
				+            <p>License</p>
			
 
				+          </a>
			
 
				+        </li>
			
 
				+
			
 
				+        <li class="nav-header">MULTI LEVEL EXAMPLE</li>
			
 
				+        <li class="nav-item">
			
 
				+          <a href="#" class="nav-link">
			
 
				+            <i class="nav-icon bi bi-circle-fill"></i>
			
 
				+            <p>Level 1</p>
			
 
				+          </a>
			
 
				+        </li>
			
 
				+        <li class="nav-item">
			
 
				+          <a href="#" class="nav-link">
			
 
				+            <i class="nav-icon bi bi-circle-fill"></i>
			
 
				+            <p>
			
 
				+              Level 1
			
 
				+              <i class="nav-arrow bi bi-chevron-right"></i>
			
 
				+            </p>
			
 
				+          </a>
			
 
				+          <ul class="nav nav-treeview">
			
 
				+            <li class="nav-item">
			
 
				+              <a href="#" class="nav-link">
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>Level 2</p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+            <li class="nav-item">
			
 
				+              <a href="#" class="nav-link">
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>
			
 
				+                  Level 2
			
 
				+                  <i class="nav-arrow bi bi-chevron-right"></i>
			
 
				+                </p>
			
 
				+              </a>
			
 
				+              <ul class="nav nav-treeview">
			
 
				+                <li class="nav-item">
			
 
				+                  <a href="#" class="nav-link">
			
 
				+                    <i class="nav-icon bi bi-record-circle-fill"></i>
			
 
				+                    <p>Level 3</p>
			
 
				+                  </a>
			
 
				+                </li>
			
 
				+                <li class="nav-item">
			
 
				+                  <a href="#" class="nav-link">
			
 
				+                    <i class="nav-icon bi bi-record-circle-fill"></i>
			
 
				+                    <p>Level 3</p>
			
 
				+                  </a>
			
 
				+                </li>
			
 
				+                <li class="nav-item">
			
 
				+                  <a href="#" class="nav-link">
			
 
				+                    <i class="nav-icon bi bi-record-circle-fill"></i>
			
 
				+                    <p>Level 3</p>
			
 
				+                  </a>
			
 
				+                </li>
			
 
				+              </ul>
			
 
				+            </li>
			
 
				+            <li class="nav-item">
			
 
				+              <a href="#" class="nav-link">
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>Level 2</p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+          </ul>
			
 
				+        </li>
			
 
				+        <li class="nav-item">
			
 
				+          <a href="#" class="nav-link">
			
 
				+            <i class="nav-icon bi bi-circle-fill"></i>
			
 
				+            <p>Level 1</p>
			
 
				+          </a>
			
 
				+        </li>
			
 
				+
			
 
				+        <li class="nav-header">LABELS</li>
			
 
				+        <li class="nav-item">
			
 
				+          <a href="#" class="nav-link">
			
 
				+            <i class="nav-icon bi bi-circle text-danger"></i>
			
 
				+            <p class="text">Important</p>
			
 
				+          </a>
			
 
				+        </li>
			
 
				+        <li class="nav-item">
			
 
				+          <a href="#" class="nav-link">
			
 
				+            <i class="nav-icon bi bi-circle text-warning"></i>
			
 
				+            <p>Warning</p>
			
 
				+          </a>
			
 
				+        </li>
			
 
				+        <li class="nav-item">
			
 
				+          <a href="#" class="nav-link">
			
 
				+            <i class="nav-icon bi bi-circle text-info"></i>
			
 
				+            <p>Informational</p>
			
 
				+          </a>
			
 
				+        </li>
			
 
				+      </ul>
			
 
				+      <!--end::Sidebar Menu-->
			
 
				+    </nav>
			
 
				+  </div>
			
 
				+  <!--end::Sidebar Wrapper-->
			
 
				+</aside>
			
 
				+<!--end::Sidebar-->
			
--- a/template/src/html/components/dashboard/_topbar.astro
+++ b/template/src/html/components/dashboard/_topbar.astro
@@ -0,0 +1,221 @@
 
				+---
			
 
				+const { path } = Astro.props;
			
 
				+const distPath = path;
			
 
				+---
			
 
				+
			
 
				+<!--begin::Header-->
			
 
				+<nav class="app-header navbar navbar-expand bg-body">
			
 
				+  <!--begin::Container-->
			
 
				+  <div class="container-fluid">
			
 
				+    <!--begin::Start Navbar Links-->
			
 
				+    <ul class="navbar-nav">
			
 
				+      <li class="nav-item">
			
 
				+        <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
			
 
				+          <i class="bi bi-list"></i>
			
 
				+        </a>
			
 
				+      </li>
			
 
				+      <li class="nav-item d-none d-md-block">
			
 
				+        <a href="#" class="nav-link">Home</a>
			
 
				+      </li>
			
 
				+      <li class="nav-item d-none d-md-block">
			
 
				+        <a href="#" class="nav-link">Contact</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+    <!--end::Start Navbar Links-->
			
 
				+
			
 
				+    <!--begin::End Navbar Links-->
			
 
				+    <ul class="navbar-nav ms-auto">
			
 
				+      <!--begin::Navbar Search-->
			
 
				+      <li class="nav-item">
			
 
				+        <a class="nav-link" data-widget="navbar-search" href="#" role="button">
			
 
				+          <i class="bi bi-search"></i>
			
 
				+        </a>
			
 
				+      </li>
			
 
				+      <!--end::Navbar Search-->
			
 
				+
			
 
				+      <!--begin::Messages Dropdown Menu-->
			
 
				+      <li class="nav-item dropdown">
			
 
				+        <a class="nav-link" data-bs-toggle="dropdown" href="#">
			
 
				+          <i class="bi bi-chat-text"></i>
			
 
				+          <span class="navbar-badge badge text-bg-danger">3</span>
			
 
				+        </a>
			
 
				+        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
			
 
				+          <a href="#" class="dropdown-item">
			
 
				+            <!--begin::Message-->
			
 
				+            <div class="d-flex">
			
 
				+              <div class="flex-shrink-0">
			
 
				+                <img
			
 
				+                  src={distPath + "/assets/img/user1-128x128.jpg"}
			
 
				+                  alt="User Avatar"
			
 
				+                  class="img-size-50 rounded-circle me-3"
			
 
				+                />
			
 
				+              </div>
			
 
				+              <div class="flex-grow-1">
			
 
				+                <h3 class="dropdown-item-title">
			
 
				+                  Brad Diesel
			
 
				+                  <span class="float-end fs-7 text-danger"
			
 
				+                    ><i class="bi bi-star-fill"></i></span
			
 
				+                  >
			
 
				+                </h3>
			
 
				+                <p class="fs-7">Call me whenever you can...</p>
			
 
				+                <p class="fs-7 text-secondary">
			
 
				+                  <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
			
 
				+                </p>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Message-->
			
 
				+          </a>
			
 
				+          <div class="dropdown-divider"></div>
			
 
				+          <a href="#" class="dropdown-item">
			
 
				+            <!--begin::Message-->
			
 
				+            <div class="d-flex">
			
 
				+              <div class="flex-shrink-0">
			
 
				+                <img
			
 
				+                  src={distPath + "/assets/img/user8-128x128.jpg"}
			
 
				+                  alt="User Avatar"
			
 
				+                  class="img-size-50 rounded-circle me-3"
			
 
				+                />
			
 
				+              </div>
			
 
				+              <div class="flex-grow-1">
			
 
				+                <h3 class="dropdown-item-title">
			
 
				+                  John Pierce
			
 
				+                  <span class="float-end fs-7 text-secondary">
			
 
				+                    <i class="bi bi-star-fill"></i>
			
 
				+                  </span>
			
 
				+                </h3>
			
 
				+                <p class="fs-7">I got your message bro</p>
			
 
				+                <p class="fs-7 text-secondary">
			
 
				+                  <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
			
 
				+                </p>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Message-->
			
 
				+          </a>
			
 
				+          <div class="dropdown-divider"></div>
			
 
				+          <a href="#" class="dropdown-item">
			
 
				+            <!--begin::Message-->
			
 
				+            <div class="d-flex">
			
 
				+              <div class="flex-shrink-0">
			
 
				+                <img
			
 
				+                  src={distPath + "/assets/img/user3-128x128.jpg"}
			
 
				+                  alt="User Avatar"
			
 
				+                  class="img-size-50 rounded-circle me-3"
			
 
				+                />
			
 
				+              </div>
			
 
				+              <div class="flex-grow-1">
			
 
				+                <h3 class="dropdown-item-title">
			
 
				+                  Nora Silvester
			
 
				+                  <span class="float-end fs-7 text-warning">
			
 
				+                    <i class="bi bi-star-fill"></i>
			
 
				+                  </span>
			
 
				+                </h3>
			
 
				+                <p class="fs-7">The subject goes here</p>
			
 
				+                <p class="fs-7 text-secondary">
			
 
				+                  <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
			
 
				+                </p>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Message-->
			
 
				+          </a>
			
 
				+          <div class="dropdown-divider"></div>
			
 
				+          <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
			
 
				+        </div>
			
 
				+      </li>
			
 
				+      <!--end::Messages Dropdown Menu-->
			
 
				+
			
 
				+      <!--begin::Notifications Dropdown Menu-->
			
 
				+      <li class="nav-item dropdown">
			
 
				+        <a class="nav-link" data-bs-toggle="dropdown" href="#">
			
 
				+          <i class="bi bi-bell-fill"></i>
			
 
				+          <span class="navbar-badge badge text-bg-warning">15</span>
			
 
				+        </a>
			
 
				+        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
			
 
				+          <span class="dropdown-item dropdown-header">15 Notifications</span>
			
 
				+          <div class="dropdown-divider"></div>
			
 
				+          <a href="#" class="dropdown-item">
			
 
				+            <i class="bi bi-envelope me-2"></i> 4 new messages
			
 
				+            <span class="float-end text-secondary fs-7">3 mins</span>
			
 
				+          </a>
			
 
				+          <div class="dropdown-divider"></div>
			
 
				+          <a href="#" class="dropdown-item">
			
 
				+            <i class="bi bi-people-fill me-2"></i> 8 friend requests
			
 
				+            <span class="float-end text-secondary fs-7">12 hours</span>
			
 
				+          </a>
			
 
				+          <div class="dropdown-divider"></div>
			
 
				+          <a href="#" class="dropdown-item">
			
 
				+            <i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
			
 
				+            <span class="float-end text-secondary fs-7">2 days</span>
			
 
				+          </a>
			
 
				+          <div class="dropdown-divider"></div>
			
 
				+          <a href="#" class="dropdown-item dropdown-footer">
			
 
				+            See All Notifications
			
 
				+          </a>
			
 
				+        </div>
			
 
				+      </li>
			
 
				+      <!--end::Notifications Dropdown Menu-->
			
 
				+
			
 
				+      <!--begin::Fullscreen Toggle-->
			
 
				+      <li class="nav-item">
			
 
				+        <a class="nav-link" href="#" data-lte-toggle="fullscreen">
			
 
				+          <i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
			
 
				+          <i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none;"></i>
			
 
				+        </a>
			
 
				+      </li>
			
 
				+      <!--end::Fullscreen Toggle-->
			
 
				+
			
 
				+      <!--begin::User Menu Dropdown-->
			
 
				+      <li class="nav-item dropdown user-menu">
			
 
				+        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
			
 
				+          <img
			
 
				+            src={distPath + "/assets/img/user2-160x160.jpg"}
			
 
				+            class="user-image rounded-circle shadow"
			
 
				+            alt="User Image"
			
 
				+          />
			
 
				+          <span class="d-none d-md-inline">Hadi Shaikh</span>
			
 
				+        </a>
			
 
				+        <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
			
 
				+          <!--begin::User Image-->
			
 
				+          <li class="user-header text-bg-primary">
			
 
				+            <img
			
 
				+              src={distPath + "/assets/img/user2-160x160.jpg"}
			
 
				+              class="rounded-circle shadow"
			
 
				+              alt="User Image"
			
 
				+            />
			
 
				+            <p>
			
 
				+              Hadi Shaikh - Senior Manager
			
 
				+              <small>Since Nov. 2023</small>
			
 
				+            </p>
			
 
				+          </li>
			
 
				+          <!--end::User Image-->
			
 
				+          <!--begin::Menu Body-->
			
 
				+          <li class="user-body">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-4 text-center">
			
 
				+                <a href="#">Followers</a>
			
 
				+              </div>
			
 
				+              <div class="col-4 text-center">
			
 
				+                <a href="#">Sales</a>
			
 
				+              </div>
			
 
				+              <div class="col-4 text-center">
			
 
				+                <a href="#">Friends</a>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </li>
			
 
				+          <!--end::Menu Body-->
			
 
				+          <!--begin::Menu Footer-->
			
 
				+          <li class="user-footer">
			
 
				+            <a href="#" class="btn btn-default btn-flat">Profile</a>
			
 
				+            <a href="./login.html" class="btn btn-default btn-flat float-end">Sign out</a>
			
 
				+          </li>
			
 
				+          <!--end::Menu Footer-->
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      <!--end::User Menu Dropdown-->
			
 
				+    </ul>
			
 
				+    <!--end::End Navbar Links-->
			
 
				+  </div>
			
 
				+  <!--end::Container-->
			
 
				+</nav>
			
 
				+<!--end::Header-->
			
--- a/template/src/html/components/docs/browser-support.mdx
+++ b/template/src/html/components/docs/browser-support.mdx
@@ -0,0 +1,23 @@
 
				+AdminLTE comes with the same browser support as Bootstrap 5.
			
 
				+
			
 
				+> ##### Excerpt from Bootstrap's official Documentation!
			
 
				+>
			
 
				+> Bootstrap supports the **latest, stable releases** of all major browsers and platforms.
			
 
				+>
			
 
				+> For more details [look here](https://getbootstrap.com/docs/5.0/getting-started/browsers-devices/#supported-browsers).
			
 
				+
			
 
				+You can find our supported range of browsers and their versions in [our .browserslistrc file](https://github.com/ColorlibHQ/AdminLTE/blob/master/.browserslistrc):
			
 
				+
			
 
				+```
			
 
				+# https://github.com/browserslist/browserslist#readme
			
 
				+
			
 
				+>= 0.5%
			
 
				+last 2 major versions
			
 
				+not dead
			
 
				+Chrome >= 60
			
 
				+Firefox >= 60
			
 
				+Firefox ESR
			
 
				+iOS >= 12
			
 
				+Safari >= 12
			
 
				+not Explorer <= 11
			
 
				+```
			
--- a/template/src/html/components/docs/color-mode.mdx
+++ b/template/src/html/components/docs/color-mode.mdx
@@ -0,0 +1,169 @@
 
				+```html
			
 
				+<!--begin::Header-->
			
 
				+<nav class="navbar navbar-expand bg-body">
			
 
				+  <!--begin::Container-->
			
 
				+  <div class="container-fluid">
			
 
				+    <!--begin::Start Navbar links-->
			
 
				+    <ul class="navbar-nav">
			
 
				+      <li class="nav-item">
			
 
				+        <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"
			
 
				+          ><i class="bi bi-list"></i
			
 
				+        ></a>
			
 
				+      </li>
			
 
				+      <li class="nav-item d-none d-md-block">
			
 
				+        <a href="#" class="nav-link">Home</a>
			
 
				+      </li>
			
 
				+      <li class="nav-item d-none d-md-block">
			
 
				+        <a href="#" class="nav-link">Contact</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+    <!--end::Start Navbar links-->
			
 
				+    <!--begin::End Navbar links-->
			
 
				+    <ul class="navbar-nav ms-auto">
			
 
				+      <li class="nav-item dropdown">
			
 
				+        <button
			
 
				+          class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
			
 
				+          id="bd-theme"
			
 
				+          type="button"
			
 
				+          aria-expanded="false"
			
 
				+          data-bs-toggle="dropdown"
			
 
				+          data-bs-display="static"
			
 
				+        >
			
 
				+          <span class="theme-icon-active">
			
 
				+            <i class="my-1"></i>
			
 
				+          </span>
			
 
				+          <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
			
 
				+        </button>
			
 
				+        <ul
			
 
				+          class="dropdown-menu dropdown-menu-end"
			
 
				+          aria-labelledby="bd-theme-text"
			
 
				+          style="--bs-dropdown-min-width: 8rem;"
			
 
				+        >
			
 
				+          <li>
			
 
				+            <button
			
 
				+              type="button"
			
 
				+              class="dropdown-item d-flex align-items-center active"
			
 
				+              data-bs-theme-value="light"
			
 
				+              aria-pressed="false"
			
 
				+            >
			
 
				+              <i class="bi bi-sun-fill me-2"></i>
			
 
				+              Light
			
 
				+              <i class="bi bi-check-lg ms-auto d-none"></i>
			
 
				+            </button>
			
 
				+          </li>
			
 
				+          <li>
			
 
				+            <button
			
 
				+              type="button"
			
 
				+              class="dropdown-item d-flex align-items-center"
			
 
				+              data-bs-theme-value="dark"
			
 
				+              aria-pressed="false"
			
 
				+            >
			
 
				+              <i class="bi bi-moon-fill me-2"></i>
			
 
				+              Dark
			
 
				+              <i class="bi bi-check-lg ms-auto d-none"></i>
			
 
				+            </button>
			
 
				+          </li>
			
 
				+          <li>
			
 
				+            <button
			
 
				+              type="button"
			
 
				+              class="dropdown-item d-flex align-items-center"
			
 
				+              data-bs-theme-value="auto"
			
 
				+              aria-pressed="true"
			
 
				+            >
			
 
				+              <i class="bi bi-circle-fill-half-stroke me-2"></i>
			
 
				+              Auto
			
 
				+              <i class="bi bi-check-lg ms-auto d-none"></i>
			
 
				+            </button>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+    <!--end::End Navbar links-->
			
 
				+  </div>
			
 
				+  <!--end::Container-->
			
 
				+</nav>
			
 
				+<!--end::Header-->
			
 
				+```
			
 
				+
			
 
				+```js
			
 
				+// Color Mode Toggler
			
 
				+(() => {
			
 
				+  "use strict";
			
 
				+
			
 
				+  const storedTheme = localStorage.getItem("theme");
			
 
				+
			
 
				+  const getPreferredTheme = () => {
			
 
				+    if (storedTheme) {
			
 
				+      return storedTheme;
			
 
				+    }
			
 
				+
			
 
				+    return window.matchMedia("(prefers-color-scheme: dark)").matches
			
 
				+      ? "dark"
			
 
				+      : "light";
			
 
				+  };
			
 
				+
			
 
				+  const setTheme = function (theme) {
			
 
				+    if (
			
 
				+      theme === "auto" &&
			
 
				+      window.matchMedia("(prefers-color-scheme: dark)").matches
			
 
				+    ) {
			
 
				+      document.documentElement.setAttribute("data-bs-theme", "dark");
			
 
				+    } else {
			
 
				+      document.documentElement.setAttribute("data-bs-theme", theme);
			
 
				+    }
			
 
				+  };
			
 
				+
			
 
				+  setTheme(getPreferredTheme());
			
 
				+
			
 
				+  const showActiveTheme = (theme, focus = false) => {
			
 
				+    const themeSwitcher = document.querySelector("#bd-theme");
			
 
				+
			
 
				+    if (!themeSwitcher) {
			
 
				+      return;
			
 
				+    }
			
 
				+
			
 
				+    const themeSwitcherText = document.querySelector("#bd-theme-text");
			
 
				+    const activeThemeIcon = document.querySelector(".theme-icon-active i");
			
 
				+    const btnToActive = document.querySelector(
			
 
				+      `[data-bs-theme-value="${theme}"]`
			
 
				+    );
			
 
				+    const svgOfActiveBtn = btnToActive.querySelector("i").getAttribute("class");
			
 
				+
			
 
				+    for (const element of document.querySelectorAll("[data-bs-theme-value]")) {
			
 
				+      element.classList.remove("active");
			
 
				+      element.setAttribute("aria-pressed", "false");
			
 
				+    }
			
 
				+
			
 
				+    btnToActive.classList.add("active");
			
 
				+    btnToActive.setAttribute("aria-pressed", "true");
			
 
				+    activeThemeIcon.setAttribute("class", svgOfActiveBtn);
			
 
				+    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
			
 
				+    themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
			
 
				+
			
 
				+    if (focus) {
			
 
				+      themeSwitcher.focus();
			
 
				+    }
			
 
				+  };
			
 
				+
			
 
				+  window
			
 
				+    .matchMedia("(prefers-color-scheme: dark)")
			
 
				+    .addEventListener("change", () => {
			
 
				+      if (storedTheme !== "light" || storedTheme !== "dark") {
			
 
				+        setTheme(getPreferredTheme());
			
 
				+      }
			
 
				+    });
			
 
				+
			
 
				+  window.addEventListener("DOMContentLoaded", () => {
			
 
				+    showActiveTheme(getPreferredTheme());
			
 
				+
			
 
				+    for (const toggle of document.querySelectorAll("[data-bs-theme-value]")) {
			
 
				+      toggle.addEventListener("click", () => {
			
 
				+        const theme = toggle.getAttribute("data-bs-theme-value");
			
 
				+        localStorage.setItem("theme", theme);
			
 
				+        setTheme(theme);
			
 
				+        showActiveTheme(theme, true);
			
 
				+      });
			
 
				+    }
			
 
				+  });
			
 
				+})();
			
 
				+```
			
--- a/template/src/html/components/docs/components/main-header.mdx
+++ b/template/src/html/components/docs/components/main-header.mdx
@@ -0,0 +1,198 @@
 
				+```html
			
 
				+<!-- Navbar -->
			
 
				+<nav class="app-header navbar navbar-expand bg-body">
			
 
				+  <!--begin::Container-->
			
 
				+  <div class="container-fluid">
			
 
				+    <!-- Start navbar links -->
			
 
				+    <ul class="navbar-nav">
			
 
				+      <li class="nav-item">
			
 
				+        <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
			
 
				+          <i class="bi bi-list"></i>
			
 
				+        </a>
			
 
				+      </li>
			
 
				+      <li class="nav-item d-none d-md-block">
			
 
				+        <a href="#" class="nav-link">Home</a>
			
 
				+      </li>
			
 
				+      <li class="nav-item d-none d-md-block">
			
 
				+        <a href="#" class="nav-link">Contact</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+    <!-- End navbar links -->
			
 
				+
			
 
				+    <ul class="navbar-nav ms-auto">
			
 
				+      <!-- Navbar Search -->
			
 
				+      <li class="nav-item">
			
 
				+        <a class="nav-link" data-widget="navbar-search" href="#" role="button">
			
 
				+          <i class="bi bi-search"></i>
			
 
				+        </a>
			
 
				+      </li>
			
 
				+
			
 
				+      <!-- Messages Dropdown Menu -->
			
 
				+      <li class="nav-item dropdown">
			
 
				+        <a class="nav-link" data-bs-toggle="dropdown" href="#">
			
 
				+          <i class="bi bi-chat-text"></i>
			
 
				+          <span class="navbar-badge badge text-bg-danger">3</span>
			
 
				+        </a>
			
 
				+        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
			
 
				+          <a href="#" class="dropdown-item">
			
 
				+            <!-- Message Start -->
			
 
				+            <div class="d-flex">
			
 
				+              <div class="flex-shrink-0">
			
 
				+                <img
			
 
				+                  src="../../../dist/img/user1-128x128.jpg"
			
 
				+                  alt="User Avatar"
			
 
				+                  class="img-size-50 rounded-circle me-3"
			
 
				+                />
			
 
				+              </div>
			
 
				+              <div class="flex-grow-1">
			
 
				+                <h3 class="dropdown-item-title">
			
 
				+                  Brad Diesel
			
 
				+                  <span class="float-end fs-7 text-danger">
			
 
				+                    <i class="bi bi-star-fill"></i>
			
 
				+                  </span>
			
 
				+                </h3>
			
 
				+                <p class="fs-7">Call me whenever you can...</p>
			
 
				+                <p class="fs-7 text-secondary">
			
 
				+                  <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
			
 
				+                </p>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!-- Message End -->
			
 
				+          </a>
			
 
				+          <div class="dropdown-divider"></div>
			
 
				+          <a href="#" class="dropdown-item">
			
 
				+            <!-- Message Start -->
			
 
				+            <div class="d-flex">
			
 
				+              <div class="flex-shrink-0">
			
 
				+                <img
			
 
				+                  src="../../../dist/img/user8-128x128.jpg"
			
 
				+                  alt="User Avatar"
			
 
				+                  class="img-size-50 rounded-circle me-3"
			
 
				+                />
			
 
				+              </div>
			
 
				+              <div class="flex-grow-1">
			
 
				+                <h3 class="dropdown-item-title">
			
 
				+                  John Pierce
			
 
				+                  <span class="float-end fs-7 text-secondary">
			
 
				+                    <i class="bi bi-star-fill"></i>
			
 
				+                  </span>
			
 
				+                </h3>
			
 
				+                <p class="fs-7">I got your message bro</p>
			
 
				+                <p class="fs-7 text-secondary">
			
 
				+                  <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
			
 
				+                </p>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!-- Message End -->
			
 
				+          </a>
			
 
				+          <div class="dropdown-divider"></div>
			
 
				+          <a href="#" class="dropdown-item">
			
 
				+            <!-- Message Start -->
			
 
				+            <div class="d-flex">
			
 
				+              <div class="flex-shrink-0">
			
 
				+                <img
			
 
				+                  src="../../../dist/img/user3-128x128.jpg"
			
 
				+                  alt="User Avatar"
			
 
				+                  class="img-size-50 rounded-circle me-3"
			
 
				+                />
			
 
				+              </div>
			
 
				+              <div class="flex-grow-1">
			
 
				+                <h3 class="dropdown-item-title">
			
 
				+                  Nora Silvester
			
 
				+                  <span class="float-end fs-7 text-warning">
			
 
				+                    <i class="bi bi-star-fill"></i>
			
 
				+                  </span>
			
 
				+                </h3>
			
 
				+                <p class="fs-7">The subject goes here</p>
			
 
				+                <p class="fs-7 text-secondary">
			
 
				+                  <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
			
 
				+                </p>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!-- Message End -->
			
 
				+          </a>
			
 
				+          <div class="dropdown-divider"></div>
			
 
				+          <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
			
 
				+        </div>
			
 
				+      </li>
			
 
				+      <!-- Notifications Dropdown Menu -->
			
 
				+      <li class="nav-item dropdown">
			
 
				+        <a class="nav-link" data-bs-toggle="dropdown" href="#">
			
 
				+          <i class="bi bi-bell-fill"></i>
			
 
				+          <span class="navbar-badge badge text-bg-warning">15</span>
			
 
				+        </a>
			
 
				+        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
			
 
				+          <span class="dropdown-item dropdown-header">15 Notifications</span>
			
 
				+          <div class="dropdown-divider"></div>
			
 
				+          <a href="#" class="dropdown-item">
			
 
				+            <i class="bi bi-envelope me-2"></i> 4 new messages
			
 
				+            <span class="float-end text-secondary fs-7">3 mins</span>
			
 
				+          </a>
			
 
				+          <div class="dropdown-divider"></div>
			
 
				+          <a href="#" class="dropdown-item">
			
 
				+            <i class="bi bi-people-fill me-2"></i> 8 friend requests
			
 
				+            <span class="float-end text-secondary fs-7">12 hours</span>
			
 
				+          </a>
			
 
				+          <div class="dropdown-divider"></div>
			
 
				+          <a href="#" class="dropdown-item">
			
 
				+            <i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
			
 
				+            <span class="float-end text-secondary fs-7">2 days</span>
			
 
				+          </a>
			
 
				+          <div class="dropdown-divider"></div>
			
 
				+          <a href="#" class="dropdown-item dropdown-footer">
			
 
				+            See All Notifications
			
 
				+          </a>
			
 
				+        </div>
			
 
				+      </li>
			
 
				+      <li class="nav-item dropdown user-menu">
			
 
				+        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
			
 
				+          <img
			
 
				+            src="../../../dist/img/user2-160x160.jpg"
			
 
				+            class="user-image rounded-circle shadow"
			
 
				+            alt="User Image"
			
 
				+          />
			
 
				+          <span class="d-none d-md-inline">Hadi Shaikh</span>
			
 
				+        </a>
			
 
				+        <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
			
 
				+          <!-- User image -->
			
 
				+          <li class="user-header text-bg-primary">
			
 
				+            <img
			
 
				+              src="../../../dist/img/user2-160x160.jpg"
			
 
				+              class="rounded-circle shadow"
			
 
				+              alt="User Image"
			
 
				+            />
			
 
				+
			
 
				+            <p>
			
 
				+              Hadi Shaikh - Senior Manager
			
 
				+              <small>Since Nov. 2023</small>
			
 
				+            </p>
			
 
				+          </li>
			
 
				+          <!-- Menu Body -->
			
 
				+          <li class="user-body">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-4 text-center">
			
 
				+                <a href="#">Followers</a>
			
 
				+              </div>
			
 
				+              <div class="col-4 text-center">
			
 
				+                <a href="#">Sales</a>
			
 
				+              </div>
			
 
				+              <div class="col-4 text-center">
			
 
				+                <a href="#">Friends</a>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </li>
			
 
				+          <!-- Menu Footer-->
			
 
				+          <li class="user-footer">
			
 
				+            <a href="#" class="btn btn-default btn-flat">Profile</a>
			
 
				+            <a href="./login.html" class="btn btn-default btn-flat float-end">Sign out</a>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+  <!--end::Container-->
			
 
				+</nav>
			
 
				+<!-- /.navbar -->
			
 
				+```
			
--- a/template/src/html/components/docs/components/main-sidebar.mdx
+++ b/template/src/html/components/docs/components/main-sidebar.mdx
@@ -0,0 +1,129 @@
 
				+The sidebar used in this page to the left provides an example of what your sidebar would look like. Construction of a sidebar:
			
 
				+
			
 
				+```html
			
 
				+<!--begin::Sidebar-->
			
 
				+<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
			
 
				+  <!--begin::Sidebar Brand-->
			
 
				+  <div class="sidebar-brand">
			
 
				+    <!--begin::Brand Link-->
			
 
				+    <a href="./index.html" class="brand-link">
			
 
				+      <!--begin::Brand Image-->
			
 
				+      <img
			
 
				+        src="./assets/img/AdminLTELogo.png"
			
 
				+        alt="AdminLTE Logo"
			
 
				+        class="brand-image opacity-75 shadow"
			
 
				+      />
			
 
				+      <!--end::Brand Image-->
			
 
				+      <!--begin::Brand Text-->
			
 
				+      <span class="brand-text fw-light">AdminLTE 4</span>
			
 
				+      <!--end::Brand Text-->
			
 
				+    </a>
			
 
				+    <!--end::Brand Link-->
			
 
				+  </div>
			
 
				+  <!--end::Sidebar Brand-->
			
 
				+  <!--begin::Sidebar Wrapper-->
			
 
				+  <div class="sidebar-wrapper">
			
 
				+    <nav class="mt-2">
			
 
				+      <!--begin::Sidebar Menu-->
			
 
				+      <ul
			
 
				+        class="nav sidebar-menu flex-column"
			
 
				+        data-lte-toggle="treeview"
			
 
				+        role="menu"
			
 
				+        data-accordion="false"
			
 
				+      >
			
 
				+        <li class="nav-header">Nav Header</li>
			
 
				+        <li class="nav-item">
			
 
				+          <a href="./index.html" class="nav-link">
			
 
				+            <i class="nav-icon bi bi-circle-fill"></i>
			
 
				+            <p>Level 1</p>
			
 
				+          </a>
			
 
				+        </li>
			
 
				+        <li class="nav-item">
			
 
				+          <a href="#" class="nav-link">
			
 
				+            <i class="nav-icon bi bi-circle-fill"></i>
			
 
				+            <p>
			
 
				+              Treeview
			
 
				+              <i class="nav-arrow bi bi-chevron-right"></i>
			
 
				+            </p>
			
 
				+          </a>
			
 
				+          <ul class="nav nav-treeview">
			
 
				+            <li class="nav-item">
			
 
				+              <a href="./index.html" class="nav-link">
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>
			
 
				+                  Level 2 (Badge)
			
 
				+                  <span
			
 
				+                    class="nav-badge badge text-bg-secondary me-3"
			
 
				+                  >
			
 
				+                    6
			
 
				+                  </span>
			
 
				+                </p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+            <li class="nav-item">
			
 
				+              <a href="./index.html" class="nav-link">
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>Level 2</p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+          </ul>
			
 
				+        </li>
			
 
				+        <li class="nav-item">
			
 
				+          <a href="./index.html" class="nav-link active">
			
 
				+            <i class="nav-icon bi bi-circle-fill"></i>
			
 
				+            <p>Level 1 Active</p>
			
 
				+          </a>
			
 
				+        </li>
			
 
				+
			
 
				+        <li class="nav-item menu-open">
			
 
				+          <a href="#" class="nav-link active">
			
 
				+            <i class="nav-icon bi bi-circle-fill"></i>
			
 
				+            <p>
			
 
				+              Treeview Menu Open
			
 
				+              <i class="nav-arrow bi bi-chevron-right"></i>
			
 
				+            </p>
			
 
				+          </a>
			
 
				+          <ul class="nav nav-treeview">
			
 
				+            <li class="nav-item">
			
 
				+              <a href="./index.html" class="nav-link active">
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>Level 2 Active</p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+            <li class="nav-item">
			
 
				+              <a href="./index.html" class="nav-link">
			
 
				+                <i class="nav-icon bi bi-circle"></i>
			
 
				+                <p>Level 2</p>
			
 
				+              </a>
			
 
				+            </li>
			
 
				+          </ul>
			
 
				+        </li>
			
 
				+      </ul>
			
 
				+      <!--end::Sidebar Menu-->
			
 
				+    </nav>
			
 
				+  </div>
			
 
				+  <!--end::Sidebar Wrapper-->
			
 
				+</aside>
			
 
				+<!--end::Sidebar-->
			
 
				+```
			
 
				+
			
 
				+## Alternate Logo
			
 
				+
			
 
				+You can use two logo images instead of logo with text, you only need to change the markup to this:
			
 
				+
			
 
				+```html
			
 
				+<div class="sidebar-brand">
			
 
				+  <a href="./index.html" class="brand-link logo-switch">
			
 
				+    <img
			
 
				+      src="./assets/img/AdminLTELogo.png"
			
 
				+      alt="AdminLTE Logo Small"
			
 
				+      class="brand-image-xl logo-xs opacity-75 shadow"
			
 
				+    />
			
 
				+    <img
			
 
				+      src="./assets/img/AdminLTEFullLogo.png"
			
 
				+      alt="AdminLTE Logo Large"
			
 
				+      class="brand-image-xs logo-xl opacity-75"
			
 
				+    />
			
 
				+  </a>
			
 
				+</div>
			
 
				+```
			
--- a/template/src/html/components/docs/faq.mdx
+++ b/template/src/html/components/docs/faq.mdx
@@ -0,0 +1,11 @@
 
				+#### Can AdminLTE be used with WordPress?
			
 
				+
			
 
				+AdminLTE is an HTML template that can be used for any purpose. However, it is not made to be easily installed on WordPress. It will require some effort and enough knowledge of the WordPress script to do so.
			
 
				+
			
 
				+#### Is there an integration guide for PHP frameworks such as Yii or Symfony?
			
 
				+
			
 
				+Short answer, no. However, there are forks and tutorials around the web that provide info on how to integrate with many different frameworks. There are even versions of AdminLTE that are integrated with jQuery ajax, AngularJS and/or MVC5 ASP .NET.
			
 
				+
			
 
				+#### How do I get notified of new AdminLTE versions?
			
 
				+
			
 
				+You may watch the [releases on GitHub](https://github.com/ColorlibHQ/AdminLTE).
			
--- a/template/src/html/components/docs/how-to-contribute.mdx
+++ b/template/src/html/components/docs/how-to-contribute.mdx
@@ -0,0 +1,34 @@
 
				+# Contributing to AdminLTE
			
 
				+
			
 
				+Contributions are always **welcome and recommended**! Here is how for beginner's: [Get started with open source click here](https://youtu.be/GbqSvJs-6W4)
			
 
				+
			
 
				+1. Contribution Requirements :
			
 
				+    * When you contribute, you agree to give a non-exclusive license to AdminLTE.io to use that contribution in any context as we (AdminLTE.io) see appropriate.
			
 
				+    * If you use content provided by another party, it must be appropriately licensed using an [open source](https://opensource.org/licenses) license.
			
 
				+    * Contributions are only accepted through GitHub pull requests.
			
 
				+    * Finally, contributed code must work in all supported browsers (see above for browser support).
			
 
				+2. Installation :
			
 
				+    * Fork the repository ([here is the guide](https://help.github.com/articles/fork-a-repo/)).
			
 
				+    * Clone to your machine
			
 
				+
			
 
				+    ```bash
			
 
				+    git clone https://github.com/YOUR_USERNAME/AdminLTE.git
			
 
				+    ```
			
 
				+    * Create a new branch from `master`
			
 
				+3. Compile dist files (Development) :
			
 
				+    * To compile the dist files you need Node.js 18 or higher/npm (node package manager)
			
 
				+    * `npm install` (install npm deps)
			
 
				+    * `npm run dev` (developer mode, autocompile with browsersync support for live demo)
			
 
				+    * Make your changes only in `./src` Folder OR `package.json` in any files which are necessary for contribution
			
 
				+    * Do not make changes in `./dist/**` Because it contains compiled files and do not include in PR (Pull Request)
			
 
				+    * `npm run production` (compile css/js files and test all pages are perfectly working fine, before creating a pull request)
			
 
				+4. Create a pull request to `master` branch
			
 
				+
			
 
				+## Online one-click setup for contributing
			
 
				+
			
 
				+You can use [Codespace](https://docs.github.com/en/codespaces) an online IDE which is free for Open Source for working on issues or making PRs (Pull Requests). With a single click it will launch a workspace and automatically:
			
 
				+
			
 
				+- clone the `AdminLTE` repo.
			
 
				+- Open with [Codespace](https://docs.github.com/en/codespaces) or [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/from-referrer/)
			
 
				+- install the dependencies.
			
 
				+- run `npm run dev` to start the server.
			
--- a/template/src/html/components/docs/introduction.mdx
+++ b/template/src/html/components/docs/introduction.mdx
@@ -0,0 +1,60 @@
 
				+## Quick start
			
 
				+
			
 
				+There are multiple ways to install AdminLTE.
			
 
				+
			
 
				+### Download & Changelog:
			
 
				+
			
 
				+Always Recommended to download from GitHub latest release [AdminLTE 4](https://github.com/ColorlibHQ/AdminLTE/releases/latest) for bug free and latest features.\
			
 
				+Visit the [releases](https://github.com/ColorlibHQ/AdminLTE/releases) page to view the changelog.\
			
 
				+Legacy Releases are [AdminLTE 3](https://github.com/ColorlibHQ/AdminLTE/releases/tag/v3.2.0) / [AdminLTE 2](https://github.com/ColorlibHQ/AdminLTE/releases/tag/v2.4.18) / [AdminLTE 1](https://github.com/ColorlibHQ/AdminLTE/releases/tag/1.3.1).
			
 
				+
			
 
				+## Stable release
			
 
				+
			
 
				+### Grab from [jsdelivr](https://www.jsdelivr.com/package/npm/admin-lte) CDN:
			
 
				+
			
 
				+_**Important Note**: You needed to add separately cdn links for plugins in your project._
			
 
				+
			
 
				+```html
			
 
				+<script
			
 
				+  src="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-beta2/dist/js/adminlte.min.js"
			
 
				+  integrity="sha256-5SPy1/00NR75iVOk7p0Ci0nwAAM8Ab7j31wyie+DKYw="
			
 
				+  crossorigin="anonymous"
			
 
				+></script>
			
 
				+```
			
 
				+
			
 
				+```html
			
 
				+<link
			
 
				+  rel="stylesheet"
			
 
				+  href="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-beta2/dist/css/adminlte.min.css"
			
 
				+  integrity="sha256-c66Dhf3TzKZoXxk8aNaf2lu580xGnKke4mjUtbpMqYg="
			
 
				+  crossorigin="anonymous"
			
 
				+/>
			
 
				+```
			
 
				+
			
 
				+### Using The Command Line:
			
 
				+
			
 
				+_**Important Note**: To install it via npm/Yarn, you need at least Node.js 14 or higher._
			
 
				+
			
 
				+#### Via npm
			
 
				+
			
 
				+```bash
			
 
				+npm install admin-lte@4.0.0-beta2 --save
			
 
				+```
			
 
				+
			
 
				+#### Via Yarn
			
 
				+
			
 
				+```bash
			
 
				+yarn add admin-lte@4.0.0-beta2
			
 
				+```
			
 
				+
			
 
				+#### Via Composer
			
 
				+
			
 
				+```bash
			
 
				+composer require "almasaeed2010/adminlte=4.0.0-beta2"
			
 
				+```
			
 
				+
			
 
				+#### Via Git
			
 
				+
			
 
				+```bash
			
 
				+git clone https://github.com/ColorlibHQ/AdminLTE.git
			
 
				+```
			
--- a/template/src/html/components/docs/license.mdx
+++ b/template/src/html/components/docs/license.mdx
@@ -0,0 +1,9 @@
 
				+AdminLTE is an open source project that is licensed under the [MIT license](https://opensource.org/licenses/MIT). This allows you to do pretty much anything you want as long as you include the copyright in "all copies or substantial portions of the Software." Attribution is not required (though very much appreciated).
			
 
				+
			
 
				+<h5 class="text-bold text-dark mt-3">What You Are <span class="text-success">Allowed</span> To Do With AdminLTE</h5>
			
 
				+
			
 
				+- Use in commercial projects.
			
 
				+- Use in personal/private projects.
			
 
				+- Modify and change the work.
			
 
				+- Distribute the code.
			
 
				+- Sublicense: incorporate the work into something that has a more restrictive license.
			
--- a/template/src/html/components/javascript/treeview.mdx
+++ b/template/src/html/components/javascript/treeview.mdx
@@ -0,0 +1,39 @@
 
				+The Treeview plugin converts a nested list into a tree view where sub menus can be expanded.
			
 
				+
			
 
				+##### Usage
			
 
				+
			
 
				+This plugin can be used as the data api.
			
 
				+
			
 
				+**Data API**
			
 
				+
			
 
				+Add `data-lte-toggle="treeview"` to any ul or ol element to activate the plugin.
			
 
				+
			
 
				+```html
			
 
				+<ul data-lte-toggle="treeview">
			
 
				+  <li><a href="#">One Level</a></li>
			
 
				+  <li class="nav-item menu-open">
			
 
				+    <a class="nav-link" href="#">Multilevel</a>
			
 
				+    <ul class="nav-treeview">
			
 
				+      <li><a href="#">Level 2</a></li>
			
 
				+    </ul>
			
 
				+  </li>
			
 
				+</ul>
			
 
				+```
			
 
				+
			
 
				+##### Example
			
 
				+
			
 
				+<ul data-lte-toggle="treeview">
			
 
				+  <li>
			
 
				+    <a href="#">One Level</a>
			
 
				+  </li>
			
 
				+  <li class="nav-item menu-open">
			
 
				+    <a class="nav-link" href="#">
			
 
				+      Multilevel
			
 
				+    </a>
			
 
				+    <ul class="nav-treeview">
			
 
				+      <li>
			
 
				+        <a href="#">Level 2</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </li>
			
 
				+</ul>
			
--- a/template/src/html/env.d.ts
+++ b/template/src/html/env.d.ts
@@ -0,0 +1,2 @@
 
				+/// <reference path="../../.astro/types.d.ts" />
			
 
				+/// <reference types="astro/client" />
			
--- a/template/src/html/pages/UI/general.astro
+++ b/template/src/html/pages/UI/general.astro
@@ -0,0 +1,1451 @@
 
				+---
			
 
				+import Head from "../../components/_head.astro";
			
 
				+import Footer from "../../components/dashboard/_footer.astro";
			
 
				+import Topbar from "../../components/dashboard/_topbar.astro";
			
 
				+import Sidenav from "../../components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "../../components/_scripts.astro";
			
 
				+
			
 
				+const title = "AdminLTE 4 | General UI Elements";
			
 
				+const path = "../../../dist";
			
 
				+const mainPage = "ui-elements";
			
 
				+const page = "general";
			
 
				+const pageTitle = "General UI Elements";
			
 
				+---
			
 
				+
			
 
				+<!doctype html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">{pageTitle}</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    {pageTitle}
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row g-4">
			
 
				+              <!--begin::Col-->
			
 
				+              <div class="col-12">
			
 
				+                <div class="callout callout-info">
			
 
				+                  For detailed documentation of Components visit <a
			
 
				+                    href="https://getbootstrap.com/docs/5.3/components/"
			
 
				+                    target="_blank"
			
 
				+                    rel="noopener noreferrer"
			
 
				+                    class="callout-link"
			
 
				+                  >
			
 
				+                    Bootstrap Components
			
 
				+                  </a>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <!--end::Col-->
			
 
				+              <!--begin::Col-->
			
 
				+              <div class="col-md-6">
			
 
				+                <!--begin::Accordion-->
			
 
				+                <div class="card card-primary card-outline mb-4">
			
 
				+                  <!--begin::Header-->
			
 
				+                  <div class="card-header">
			
 
				+                    <div class="card-title">Accordion</div>
			
 
				+                  </div>
			
 
				+                  <!--end::Header-->
			
 
				+                  <!--begin::Body-->
			
 
				+                  <div class="card-body">
			
 
				+                    <div class="accordion" id="accordionExample">
			
 
				+                      <div class="accordion-item">
			
 
				+                        <h2 class="accordion-header">
			
 
				+                          <button
			
 
				+                            class="accordion-button"
			
 
				+                            type="button"
			
 
				+                            data-bs-toggle="collapse"
			
 
				+                            data-bs-target="#collapseOne"
			
 
				+                            aria-expanded="true"
			
 
				+                            aria-controls="collapseOne"
			
 
				+                          >
			
 
				+                            Accordion Item #1
			
 
				+                          </button>
			
 
				+                        </h2>
			
 
				+                        <div
			
 
				+                          id="collapseOne"
			
 
				+                          class="accordion-collapse collapse show"
			
 
				+                          data-bs-parent="#accordionExample"
			
 
				+                        >
			
 
				+                          <div class="accordion-body">
			
 
				+                            <strong
			
 
				+                              >This is the first item's accordion body.</strong
			
 
				+                            > It is shown by default, until the collapse plugin
			
 
				+                            adds the appropriate classes that we use to style
			
 
				+                            each element. These classes control the overall
			
 
				+                            appearance, as well as the showing and hiding via
			
 
				+                            CSS transitions. You can modify any of this with
			
 
				+                            custom CSS or overriding our default variables. It's
			
 
				+                            also worth noting that just about any HTML can go
			
 
				+                            within the <code>.accordion-body</code>, though the
			
 
				+                            transition does limit overflow.
			
 
				+                          </div>
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <div class="accordion-item">
			
 
				+                        <h2 class="accordion-header">
			
 
				+                          <button
			
 
				+                            class="accordion-button collapsed"
			
 
				+                            type="button"
			
 
				+                            data-bs-toggle="collapse"
			
 
				+                            data-bs-target="#collapseTwo"
			
 
				+                            aria-expanded="false"
			
 
				+                            aria-controls="collapseTwo"
			
 
				+                          >
			
 
				+                            Accordion Item #2
			
 
				+                          </button>
			
 
				+                        </h2>
			
 
				+                        <div
			
 
				+                          id="collapseTwo"
			
 
				+                          class="accordion-collapse collapse"
			
 
				+                          data-bs-parent="#accordionExample"
			
 
				+                        >
			
 
				+                          <div class="accordion-body">
			
 
				+                            <strong
			
 
				+                              >This is the second item's accordion body.</strong
			
 
				+                            > It is hidden by default, until the collapse plugin
			
 
				+                            adds the appropriate classes that we use to style
			
 
				+                            each element. These classes control the overall
			
 
				+                            appearance, as well as the showing and hiding via
			
 
				+                            CSS transitions. You can modify any of this with
			
 
				+                            custom CSS or overriding our default variables. It's
			
 
				+                            also worth noting that just about any HTML can go
			
 
				+                            within the <code>.accordion-body</code>, though the
			
 
				+                            transition does limit overflow.
			
 
				+                          </div>
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <div class="accordion-item">
			
 
				+                        <h2 class="accordion-header">
			
 
				+                          <button
			
 
				+                            class="accordion-button collapsed"
			
 
				+                            type="button"
			
 
				+                            data-bs-toggle="collapse"
			
 
				+                            data-bs-target="#collapseThree"
			
 
				+                            aria-expanded="false"
			
 
				+                            aria-controls="collapseThree"
			
 
				+                          >
			
 
				+                            Accordion Item #3
			
 
				+                          </button>
			
 
				+                        </h2>
			
 
				+                        <div
			
 
				+                          id="collapseThree"
			
 
				+                          class="accordion-collapse collapse"
			
 
				+                          data-bs-parent="#accordionExample"
			
 
				+                        >
			
 
				+                          <div class="accordion-body">
			
 
				+                            <strong
			
 
				+                              >This is the third item's accordion body.</strong
			
 
				+                            > It is hidden by default, until the collapse plugin
			
 
				+                            adds the appropriate classes that we use to style
			
 
				+                            each element. These classes control the overall
			
 
				+                            appearance, as well as the showing and hiding via
			
 
				+                            CSS transitions. You can modify any of this with
			
 
				+                            custom CSS or overriding our default variables. It's
			
 
				+                            also worth noting that just about any HTML can go
			
 
				+                            within the <code>.accordion-body</code>, though the
			
 
				+                            transition does limit overflow.
			
 
				+                          </div>
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <!--end::Body-->
			
 
				+                </div>
			
 
				+                <!--end::Accordion-->
			
 
				+                <!--begin::Alert-->
			
 
				+                <div class="card card-success card-outline mb-4">
			
 
				+                  <!--begin::Header-->
			
 
				+                  <div class="card-header">
			
 
				+                    <div class="card-title">Alert</div>
			
 
				+                  </div>
			
 
				+                  <!--end::Header-->
			
 
				+                  <!--begin::Body-->
			
 
				+                  <div class="card-body">
			
 
				+                    <div class="alert alert-primary" role="alert">
			
 
				+                      A simple primary alert with <a href="#" class="alert-link"
			
 
				+                        >an example link</a
			
 
				+                      >. Give it a click if you like.
			
 
				+                    </div>
			
 
				+                    <div class="alert alert-secondary" role="alert">
			
 
				+                      A simple secondary alert with <a
			
 
				+                        href="#"
			
 
				+                        class="alert-link">an example link</a
			
 
				+                      >. Give it a click if you like.
			
 
				+                    </div>
			
 
				+                    <div class="alert alert-success" role="alert">
			
 
				+                      A simple success alert with <a href="#" class="alert-link"
			
 
				+                        >an example link</a
			
 
				+                      >. Give it a click if you like.
			
 
				+                    </div>
			
 
				+                    <div class="alert alert-danger" role="alert">
			
 
				+                      A simple danger alert with <a href="#" class="alert-link"
			
 
				+                        >an example link</a
			
 
				+                      >. Give it a click if you like.
			
 
				+                    </div>
			
 
				+                    <div class="alert alert-warning" role="alert">
			
 
				+                      A simple warning alert with <a href="#" class="alert-link"
			
 
				+                        >an example link</a
			
 
				+                      >. Give it a click if you like.
			
 
				+                    </div>
			
 
				+                    <div class="alert alert-info" role="alert">
			
 
				+                      A simple info alert with <a href="#" class="alert-link"
			
 
				+                        >an example link</a
			
 
				+                      >. Give it a click if you like.
			
 
				+                    </div>
			
 
				+                    <div class="alert alert-light" role="alert">
			
 
				+                      A simple light alert with <a href="#" class="alert-link"
			
 
				+                        >an example link</a
			
 
				+                      >. Give it a click if you like.
			
 
				+                    </div>
			
 
				+                    <div class="alert alert-dark" role="alert">
			
 
				+                      A simple dark alert with <a href="#" class="alert-link"
			
 
				+                        >an example link</a
			
 
				+                      >. Give it a click if you like.
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <!--end::Body-->
			
 
				+                </div>
			
 
				+                <!--end::Alert-->
			
 
				+                <!--begin::Badge-->
			
 
				+                <div class="card card-warning card-outline mb-4">
			
 
				+                  <!--begin::Header-->
			
 
				+                  <div class="card-header">
			
 
				+                    <div class="card-title">Badge</div>
			
 
				+                  </div>
			
 
				+                  <!--end::Header-->
			
 
				+                  <!--begin::Body-->
			
 
				+                  <div class="card-body">
			
 
				+                    <h1>
			
 
				+                      Example heading <span class="badge bg-secondary"
			
 
				+                        >New</span>
			
 
				+                    </h1>
			
 
				+                    <h2>
			
 
				+                      Example heading <span class="badge bg-secondary"
			
 
				+                        >New</span>
			
 
				+                    </h2>
			
 
				+                    <h3>
			
 
				+                      Example heading <span class="badge bg-secondary"
			
 
				+                        >New</span>
			
 
				+                    </h3>
			
 
				+                    <h4>
			
 
				+                      Example heading <span class="badge bg-secondary"
			
 
				+                        >New</span>
			
 
				+                    </h4>
			
 
				+                    <h5>
			
 
				+                      Example heading <span class="badge bg-secondary"
			
 
				+                        >New</span>
			
 
				+                    </h5>
			
 
				+                    <h6>
			
 
				+                      Example heading <span class="badge bg-secondary"
			
 
				+                        >New</span>
			
 
				+                    </h6>
			
 
				+                    <hr />
			
 
				+                    <button type="button" class="btn btn-primary">
			
 
				+                      Notifications <span class="badge text-bg-secondary"
			
 
				+                        >4</span
			
 
				+                      >
			
 
				+                    </button>
			
 
				+                    <hr />
			
 
				+                    <button
			
 
				+                      type="button"
			
 
				+                      class="btn btn-primary position-relative"
			
 
				+                    >
			
 
				+                      Inbox
			
 
				+                      <span
			
 
				+                        class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"
			
 
				+                      >
			
 
				+                        99+
			
 
				+                        <span class="visually-hidden">unread messages</span>
			
 
				+                      </span>
			
 
				+                    </button>
			
 
				+                    <hr />
			
 
				+                    <button
			
 
				+                      type="button"
			
 
				+                      class="btn btn-primary position-relative"
			
 
				+                    >
			
 
				+                      Profile
			
 
				+                      <span
			
 
				+                        class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle"
			
 
				+                      >
			
 
				+                        <span class="visually-hidden">New alerts</span>
			
 
				+                      </span>
			
 
				+                    </button>
			
 
				+                    <hr />
			
 
				+                    <span class="badge text-bg-primary">Primary</span>
			
 
				+                    <span class="badge text-bg-secondary">Secondary</span>
			
 
				+                    <span class="badge text-bg-success">Success</span>
			
 
				+                    <span class="badge text-bg-danger">Danger</span>
			
 
				+                    <span class="badge text-bg-warning">Warning</span>
			
 
				+                    <span class="badge text-bg-info">Info</span>
			
 
				+                    <span class="badge text-bg-light">Light</span>
			
 
				+                    <span class="badge text-bg-dark">Dark</span>
			
 
				+                    <hr />
			
 
				+                    <span class="badge rounded-pill text-bg-primary"
			
 
				+                      >Primary</span
			
 
				+                    >
			
 
				+                    <span class="badge rounded-pill text-bg-secondary"
			
 
				+                      >Secondary</span
			
 
				+                    >
			
 
				+                    <span class="badge rounded-pill text-bg-success"
			
 
				+                      >Success</span
			
 
				+                    >
			
 
				+                    <span class="badge rounded-pill text-bg-danger">Danger</span
			
 
				+                    >
			
 
				+                    <span class="badge rounded-pill text-bg-warning"
			
 
				+                      >Warning</span
			
 
				+                    >
			
 
				+                    <span class="badge rounded-pill text-bg-info">Info</span>
			
 
				+                    <span class="badge rounded-pill text-bg-light">Light</span>
			
 
				+                    <span class="badge rounded-pill text-bg-dark">Dark</span>
			
 
				+                  </div>
			
 
				+                  <!--end::Body-->
			
 
				+                </div>
			
 
				+                <!--end::Badge-->
			
 
				+                <!--begin::Button-->
			
 
				+                <div class="card card-danger card-outline mb-4">
			
 
				+                  <!--begin::Header-->
			
 
				+                  <div class="card-header">
			
 
				+                    <div class="card-title">Button</div>
			
 
				+                  </div>
			
 
				+                  <!--end::Header-->
			
 
				+                  <!--begin::Body-->
			
 
				+                  <div class="card-body">
			
 
				+                    <button type="button" class="btn btn-primary mb-2"
			
 
				+                      >Primary</button
			
 
				+                    >
			
 
				+                    <button type="button" class="btn btn-secondary mb-2"
			
 
				+                      >Secondary</button
			
 
				+                    >
			
 
				+                    <button type="button" class="btn btn-success mb-2"
			
 
				+                      >Success</button
			
 
				+                    >
			
 
				+                    <button type="button" class="btn btn-danger mb-2"
			
 
				+                      >Danger</button
			
 
				+                    >
			
 
				+                    <button type="button" class="btn btn-warning mb-2"
			
 
				+                      >Warning</button
			
 
				+                    >
			
 
				+                    <button type="button" class="btn btn-info mb-2">Info</button
			
 
				+                    >
			
 
				+                    <button type="button" class="btn btn-light mb-2"
			
 
				+                      >Light</button
			
 
				+                    >
			
 
				+                    <button type="button" class="btn btn-dark mb-2">Dark</button
			
 
				+                    >
			
 
				+                    <button type="button" class="btn btn-link mb-2">Link</button
			
 
				+                    >
			
 
				+                    <hr />
			
 
				+                    <button type="button" class="btn btn-primary mb-2" disabled
			
 
				+                      >Primary (disabled)</button
			
 
				+                    >
			
 
				+                    <button
			
 
				+                      type="button"
			
 
				+                      class="btn btn-secondary mb-2"
			
 
				+                      disabled>Secondary (disabled)</button
			
 
				+                    >
			
 
				+                    <button type="button" class="btn btn-success mb-2" disabled
			
 
				+                      >Success (disabled)</button
			
 
				+                    >
			
 
				+                    <button type="button" class="btn btn-danger mb-2" disabled
			
 
				+                      >Danger (disabled)</button
			
 
				+                    >
			
 
				+                    <button type="button" class="btn btn-warning mb-2" disabled
			
 
				+                      >Warning (disabled)</button
			
 
				+                    >
			
 
				+                    <button type="button" class="btn btn-info mb-2" disabled
			
 
				+                      >Info (disabled)</button
			
 
				+                    >
			
 
				+                    <hr />
			
 
				+                    <button type="button" class="btn btn-outline-primary mb-2"
			
 
				+                      >Primary</button
			
 
				+                    >
			
 
				+                    <button type="button" class="btn btn-outline-secondary mb-2"
			
 
				+                      >Secondary</button
			
 
				+                    >
			
 
				+                    <button type="button" class="btn btn-outline-success mb-2"
			
 
				+                      >Success</button
			
 
				+                    >
			
 
				+                    <button type="button" class="btn btn-outline-danger mb-2"
			
 
				+                      >Danger</button
			
 
				+                    >
			
 
				+                    <button type="button" class="btn btn-outline-warning mb-2"
			
 
				+                      >Warning</button
			
 
				+                    >
			
 
				+                    <button type="button" class="btn btn-outline-info mb-2"
			
 
				+                      >Info</button
			
 
				+                    >
			
 
				+                    <button type="button" class="btn btn-outline-light mb-2"
			
 
				+                      >Light</button
			
 
				+                    >
			
 
				+                    <button type="button" class="btn btn-outline-dark mb-2"
			
 
				+                      >Dark</button
			
 
				+                    >
			
 
				+                    <hr />
			
 
				+                    <button type="button" class="btn btn-primary btn-lg"
			
 
				+                      >Large button</button
			
 
				+                    >
			
 
				+                    <button type="button" class="btn btn-warning btn-sm"
			
 
				+                      >Small button</button
			
 
				+                    >
			
 
				+                    <button
			
 
				+                      type="button"
			
 
				+                      class="btn btn-danger"
			
 
				+                      style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;"
			
 
				+                      >Custom button</button
			
 
				+                    >
			
 
				+                  </div>
			
 
				+                  <!--end::Body-->
			
 
				+                </div>
			
 
				+                <!--end::Button-->
			
 
				+              </div>
			
 
				+              <!--end::Col-->
			
 
				+              <!--begin::Col-->
			
 
				+              <div class="col-md-6">
			
 
				+                <!--begin::Button Group-->
			
 
				+                <div class="card card-info card-outline mb-4">
			
 
				+                  <!--begin::Header-->
			
 
				+                  <div class="card-header">
			
 
				+                    <div class="card-title">Button Group</div>
			
 
				+                  </div>
			
 
				+                  <!--end::Header-->
			
 
				+                  <!--begin::Body-->
			
 
				+                  <div class="card-body">
			
 
				+                    <div
			
 
				+                      class="btn-group mb-2"
			
 
				+                      role="group"
			
 
				+                      aria-label="Basic example"
			
 
				+                    >
			
 
				+                      <button type="button" class="btn btn-primary">Left</button
			
 
				+                      >
			
 
				+                      <button type="button" class="btn btn-primary"
			
 
				+                        >Middle</button
			
 
				+                      >
			
 
				+                      <button type="button" class="btn btn-primary"
			
 
				+                        >Right</button
			
 
				+                      >
			
 
				+                    </div>
			
 
				+                    <div
			
 
				+                      class="btn-group mb-2"
			
 
				+                      role="group"
			
 
				+                      aria-label="Basic mixed styles example"
			
 
				+                    >
			
 
				+                      <button type="button" class="btn btn-danger">Left</button>
			
 
				+                      <button type="button" class="btn btn-warning"
			
 
				+                        >Middle</button
			
 
				+                      >
			
 
				+                      <button type="button" class="btn btn-success"
			
 
				+                        >Right</button
			
 
				+                      >
			
 
				+                    </div>
			
 
				+                    <div
			
 
				+                      class="btn-group mb-2"
			
 
				+                      role="group"
			
 
				+                      aria-label="Basic outlined example"
			
 
				+                    >
			
 
				+                      <button type="button" class="btn btn-outline-primary"
			
 
				+                        >Left</button
			
 
				+                      >
			
 
				+                      <button type="button" class="btn btn-outline-primary"
			
 
				+                        >Middle</button
			
 
				+                      >
			
 
				+                      <button type="button" class="btn btn-outline-primary"
			
 
				+                        >Right</button
			
 
				+                      >
			
 
				+                    </div>
			
 
				+                    <hr />
			
 
				+                    <div
			
 
				+                      class="btn-group mb-2"
			
 
				+                      role="group"
			
 
				+                      aria-label="Basic checkbox toggle button group"
			
 
				+                    >
			
 
				+                      <input
			
 
				+                        type="checkbox"
			
 
				+                        class="btn-check"
			
 
				+                        id="btncheck1"
			
 
				+                        autocomplete="off"
			
 
				+                      />
			
 
				+                      <label class="btn btn-outline-primary" for="btncheck1"
			
 
				+                        >Checkbox 1</label
			
 
				+                      >
			
 
				+
			
 
				+                      <input
			
 
				+                        type="checkbox"
			
 
				+                        class="btn-check"
			
 
				+                        id="btncheck2"
			
 
				+                        autocomplete="off"
			
 
				+                      />
			
 
				+                      <label class="btn btn-outline-primary" for="btncheck2"
			
 
				+                        >Checkbox 2</label
			
 
				+                      >
			
 
				+
			
 
				+                      <input
			
 
				+                        type="checkbox"
			
 
				+                        class="btn-check"
			
 
				+                        id="btncheck3"
			
 
				+                        autocomplete="off"
			
 
				+                      />
			
 
				+                      <label class="btn btn-outline-primary" for="btncheck3"
			
 
				+                        >Checkbox 3</label
			
 
				+                      >
			
 
				+                    </div>
			
 
				+                    <div
			
 
				+                      class="btn-group mb-2"
			
 
				+                      role="group"
			
 
				+                      aria-label="Basic radio toggle button group"
			
 
				+                    >
			
 
				+                      <input
			
 
				+                        type="radio"
			
 
				+                        class="btn-check"
			
 
				+                        name="btnradio"
			
 
				+                        id="btnradio1"
			
 
				+                        autocomplete="off"
			
 
				+                        checked
			
 
				+                      />
			
 
				+                      <label class="btn btn-outline-primary" for="btnradio1"
			
 
				+                        >Radio 1</label
			
 
				+                      >
			
 
				+
			
 
				+                      <input
			
 
				+                        type="radio"
			
 
				+                        class="btn-check"
			
 
				+                        name="btnradio"
			
 
				+                        id="btnradio2"
			
 
				+                        autocomplete="off"
			
 
				+                      />
			
 
				+                      <label class="btn btn-outline-primary" for="btnradio2"
			
 
				+                        >Radio 2</label
			
 
				+                      >
			
 
				+
			
 
				+                      <input
			
 
				+                        type="radio"
			
 
				+                        class="btn-check"
			
 
				+                        name="btnradio"
			
 
				+                        id="btnradio3"
			
 
				+                        autocomplete="off"
			
 
				+                      />
			
 
				+                      <label class="btn btn-outline-primary" for="btnradio3"
			
 
				+                        >Radio 3</label
			
 
				+                      >
			
 
				+                    </div>
			
 
				+                    <hr />
			
 
				+                    <div
			
 
				+                      class="btn-group mb-2"
			
 
				+                      role="group"
			
 
				+                      aria-label="Button group with nested dropdown"
			
 
				+                    >
			
 
				+                      <button type="button" class="btn btn-primary">1</button>
			
 
				+                      <button type="button" class="btn btn-primary">2</button>
			
 
				+                      <div class="btn-group" role="group">
			
 
				+                        <button
			
 
				+                          type="button"
			
 
				+                          class="btn btn-primary dropdown-toggle"
			
 
				+                          data-bs-toggle="dropdown"
			
 
				+                          aria-expanded="false"
			
 
				+                        >
			
 
				+                          Dropdown
			
 
				+                        </button>
			
 
				+                        <ul class="dropdown-menu">
			
 
				+                          <li>
			
 
				+                            <a class="dropdown-item" href="#">Dropdown link</a>
			
 
				+                          </li>
			
 
				+                          <li>
			
 
				+                            <a class="dropdown-item" href="#">Dropdown link</a>
			
 
				+                          </li>
			
 
				+                        </ul>
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <!--end::Body-->
			
 
				+                </div>
			
 
				+                <!--end::Button Group-->
			
 
				+                <!--begin::Collapse-->
			
 
				+                <div class="card card-primary card-outline mb-4">
			
 
				+                  <!--begin::Header-->
			
 
				+                  <div class="card-header">
			
 
				+                    <div class="card-title">Collapse</div>
			
 
				+                  </div>
			
 
				+                  <!--end::Header-->
			
 
				+                  <!--begin::Body-->
			
 
				+                  <div class="card-body">
			
 
				+                    <p class="d-inline-flex gap-1">
			
 
				+                      <a
			
 
				+                        class="btn btn-primary"
			
 
				+                        data-bs-toggle="collapse"
			
 
				+                        href="#collapseExample"
			
 
				+                        role="button"
			
 
				+                        aria-expanded="false"
			
 
				+                        aria-controls="collapseExample"
			
 
				+                      >
			
 
				+                        Link with href
			
 
				+                      </a>
			
 
				+                      <button
			
 
				+                        class="btn btn-success"
			
 
				+                        type="button"
			
 
				+                        data-bs-toggle="collapse"
			
 
				+                        data-bs-target="#collapseExample"
			
 
				+                        aria-expanded="false"
			
 
				+                        aria-controls="collapseExample"
			
 
				+                      >
			
 
				+                        Button with data-bs-target
			
 
				+                      </button>
			
 
				+                    </p>
			
 
				+                    <div class="collapse" id="collapseExample">
			
 
				+                      <div class="card card-body">
			
 
				+                        Some placeholder content for the collapse component.
			
 
				+                        This panel is hidden by default but revealed when the
			
 
				+                        user activates the relevant trigger.
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <!--end::Body-->
			
 
				+                </div>
			
 
				+                <!--end::Collapse-->
			
 
				+                <!--begin::Dropdowns-->
			
 
				+                <div class="card card-success card-outline mb-4">
			
 
				+                  <!--begin::Header-->
			
 
				+                  <div class="card-header">
			
 
				+                    <div class="card-title">Dropdowns</div>
			
 
				+                  </div>
			
 
				+                  <!--end::Header-->
			
 
				+                  <!--begin::Body-->
			
 
				+                  <div class="card-body">
			
 
				+                    <div class="btn-group">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-primary dropdown-toggle"
			
 
				+                        data-bs-toggle="dropdown"
			
 
				+                        aria-expanded="false"
			
 
				+                      >
			
 
				+                        Primary
			
 
				+                      </button>
			
 
				+                      <ul class="dropdown-menu">
			
 
				+                        <li><a class="dropdown-item" href="#">Action</a></li>
			
 
				+                        <li>
			
 
				+                          <a class="dropdown-item" href="#">Another action</a>
			
 
				+                        </li>
			
 
				+                        <li>
			
 
				+                          <a class="dropdown-item" href="#"
			
 
				+                            >Something else here</a>
			
 
				+                        </li>
			
 
				+                        <li>
			
 
				+                          <hr class="dropdown-divider" />
			
 
				+                        </li>
			
 
				+                        <li>
			
 
				+                          <a class="dropdown-item" href="#">Separated link</a>
			
 
				+                        </li>
			
 
				+                      </ul>
			
 
				+                    </div>
			
 
				+                    <div class="btn-group">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-secondary dropdown-toggle"
			
 
				+                        data-bs-toggle="dropdown"
			
 
				+                        aria-expanded="false"
			
 
				+                      >
			
 
				+                        Secondary
			
 
				+                      </button>
			
 
				+                      <ul class="dropdown-menu">
			
 
				+                        <li><a class="dropdown-item" href="#">Action</a></li>
			
 
				+                        <li>
			
 
				+                          <a class="dropdown-item" href="#">Another action</a>
			
 
				+                        </li>
			
 
				+                        <li>
			
 
				+                          <a class="dropdown-item" href="#"
			
 
				+                            >Something else here</a>
			
 
				+                        </li>
			
 
				+                        <li>
			
 
				+                          <hr class="dropdown-divider" />
			
 
				+                        </li>
			
 
				+                        <li>
			
 
				+                          <a class="dropdown-item" href="#">Separated link</a>
			
 
				+                        </li>
			
 
				+                      </ul>
			
 
				+                    </div>
			
 
				+                    <hr />
			
 
				+                    <div class="btn-group">
			
 
				+                      <button type="button" class="btn btn-danger"
			
 
				+                        >Danger Split</button
			
 
				+                      >
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-danger dropdown-toggle dropdown-toggle-split"
			
 
				+                        data-bs-toggle="dropdown"
			
 
				+                        aria-expanded="false"
			
 
				+                      >
			
 
				+                        <span class="visually-hidden">Toggle Dropdown</span>
			
 
				+                      </button>
			
 
				+                      <ul class="dropdown-menu">
			
 
				+                        <li><a class="dropdown-item" href="#">Action</a></li>
			
 
				+                        <li>
			
 
				+                          <a class="dropdown-item" href="#">Another action</a>
			
 
				+                        </li>
			
 
				+                        <li>
			
 
				+                          <a class="dropdown-item" href="#"
			
 
				+                            >Something else here</a>
			
 
				+                        </li>
			
 
				+                        <li>
			
 
				+                          <hr class="dropdown-divider" />
			
 
				+                        </li>
			
 
				+                        <li>
			
 
				+                          <a class="dropdown-item" href="#">Separated link</a>
			
 
				+                        </li>
			
 
				+                      </ul>
			
 
				+                    </div>
			
 
				+                    <div class="btn-group">
			
 
				+                      <button type="button" class="btn btn-warning"
			
 
				+                        >Warning Split</button
			
 
				+                      >
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-warning dropdown-toggle dropdown-toggle-split"
			
 
				+                        data-bs-toggle="dropdown"
			
 
				+                        aria-expanded="false"
			
 
				+                      >
			
 
				+                        <span class="visually-hidden">Toggle Dropdown</span>
			
 
				+                      </button>
			
 
				+                      <ul class="dropdown-menu">
			
 
				+                        <li><a class="dropdown-item" href="#">Action</a></li>
			
 
				+                        <li>
			
 
				+                          <a class="dropdown-item" href="#">Another action</a>
			
 
				+                        </li>
			
 
				+                        <li>
			
 
				+                          <a class="dropdown-item" href="#"
			
 
				+                            >Something else here</a>
			
 
				+                        </li>
			
 
				+                        <li>
			
 
				+                          <hr class="dropdown-divider" />
			
 
				+                        </li>
			
 
				+                        <li>
			
 
				+                          <a class="dropdown-item" href="#">Separated link</a>
			
 
				+                        </li>
			
 
				+                      </ul>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <!--end::Body-->
			
 
				+                </div>
			
 
				+                <!--end::Dropdowns-->
			
 
				+                <!--begin::List Group-->
			
 
				+                <div class="card card-warning card-outline mb-4">
			
 
				+                  <!--begin::Header-->
			
 
				+                  <div class="card-header">
			
 
				+                    <div class="card-title">List Group</div>
			
 
				+                  </div>
			
 
				+                  <!--end::Header-->
			
 
				+                  <!--begin::Body-->
			
 
				+                  <div class="card-body">
			
 
				+                    <div class="list-group">
			
 
				+                      <a
			
 
				+                        href="#"
			
 
				+                        class="list-group-item list-group-item-action active"
			
 
				+                        aria-current="true"
			
 
				+                      >
			
 
				+                        The current link item
			
 
				+                      </a>
			
 
				+                      <a href="#" class="list-group-item list-group-item-action"
			
 
				+                        >A second link item</a
			
 
				+                      >
			
 
				+                      <a href="#" class="list-group-item list-group-item-action"
			
 
				+                        >A third link item</a
			
 
				+                      >
			
 
				+                      <a href="#" class="list-group-item list-group-item-action"
			
 
				+                        >A fourth link item</a
			
 
				+                      >
			
 
				+                      <a
			
 
				+                        class="list-group-item list-group-item-action disabled"
			
 
				+                        aria-disabled="true">A disabled link item</a
			
 
				+                      >
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <!--end::Body-->
			
 
				+                </div>
			
 
				+                <!--end::List Group-->
			
 
				+                <!--begin::Navbar-->
			
 
				+                <div class="card card-danger card-outline mb-4">
			
 
				+                  <!--begin::Header-->
			
 
				+                  <div class="card-header">
			
 
				+                    <div class="card-title">Navbar</div>
			
 
				+                  </div>
			
 
				+                  <!--end::Header-->
			
 
				+                  <!--begin::Body-->
			
 
				+                  <div class="card-body">
			
 
				+                    <nav class="navbar navbar-expand-lg bg-body-tertiary">
			
 
				+                      <div class="container-fluid">
			
 
				+                        <a class="navbar-brand" href="#">Navbar</a>
			
 
				+                        <button
			
 
				+                          class="navbar-toggler"
			
 
				+                          type="button"
			
 
				+                          data-bs-toggle="collapse"
			
 
				+                          data-bs-target="#navbarSupportedContent"
			
 
				+                          aria-controls="navbarSupportedContent"
			
 
				+                          aria-expanded="false"
			
 
				+                          aria-label="Toggle navigation"
			
 
				+                        >
			
 
				+                          <span class="navbar-toggler-icon"></span>
			
 
				+                        </button>
			
 
				+                        <div
			
 
				+                          class="collapse navbar-collapse"
			
 
				+                          id="navbarSupportedContent"
			
 
				+                        >
			
 
				+                          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
			
 
				+                            <li class="nav-item">
			
 
				+                              <a
			
 
				+                                class="nav-link active"
			
 
				+                                aria-current="page"
			
 
				+                                href="#">Home</a
			
 
				+                              >
			
 
				+                            </li>
			
 
				+                            <li class="nav-item">
			
 
				+                              <a class="nav-link" href="#">Link</a>
			
 
				+                            </li>
			
 
				+                            <li class="nav-item dropdown">
			
 
				+                              <a
			
 
				+                                class="nav-link dropdown-toggle"
			
 
				+                                href="#"
			
 
				+                                role="button"
			
 
				+                                data-bs-toggle="dropdown"
			
 
				+                                aria-expanded="false"
			
 
				+                              >
			
 
				+                                Dropdown
			
 
				+                              </a>
			
 
				+                              <ul class="dropdown-menu">
			
 
				+                                <li>
			
 
				+                                  <a class="dropdown-item" href="#">Action</a>
			
 
				+                                </li>
			
 
				+                                <li>
			
 
				+                                  <a class="dropdown-item" href="#"
			
 
				+                                    >Another action</a>
			
 
				+                                </li>
			
 
				+                                <li>
			
 
				+                                  <hr class="dropdown-divider" />
			
 
				+                                </li>
			
 
				+                                <li>
			
 
				+                                  <a class="dropdown-item" href="#"
			
 
				+                                    >Something else here</a>
			
 
				+                                </li>
			
 
				+                              </ul>
			
 
				+                            </li>
			
 
				+                            <li class="nav-item">
			
 
				+                              <a class="nav-link disabled" aria-disabled="true"
			
 
				+                                >Disabled</a
			
 
				+                              >
			
 
				+                            </li>
			
 
				+                          </ul>
			
 
				+                          <form class="d-flex" role="search">
			
 
				+                            <input
			
 
				+                              class="form-control me-2"
			
 
				+                              type="search"
			
 
				+                              placeholder="Search"
			
 
				+                              aria-label="Search"
			
 
				+                            />
			
 
				+                            <button
			
 
				+                              class="btn btn-outline-success"
			
 
				+                              type="submit">Search</button
			
 
				+                            >
			
 
				+                          </form>
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                    </nav>
			
 
				+                  </div>
			
 
				+                  <!--end::Body-->
			
 
				+                </div>
			
 
				+                <!--end::Navbar-->
			
 
				+                <!--begin::Pagination-->
			
 
				+                <div class="card card-info card-outline mb-4">
			
 
				+                  <!--begin::Header-->
			
 
				+                  <div class="card-header">
			
 
				+                    <div class="card-title">Pagination</div>
			
 
				+                  </div>
			
 
				+                  <!--end::Header-->
			
 
				+                  <!--begin::Body-->
			
 
				+                  <div class="card-body">
			
 
				+                    <nav aria-label="Page navigation example">
			
 
				+                      <ul class="pagination">
			
 
				+                        <li class="page-item">
			
 
				+                          <a class="page-link" href="#">Previous</a>
			
 
				+                        </li>
			
 
				+                        <li class="page-item">
			
 
				+                          <a class="page-link" href="#">1</a>
			
 
				+                        </li>
			
 
				+                        <li class="page-item">
			
 
				+                          <a class="page-link" href="#">2</a>
			
 
				+                        </li>
			
 
				+                        <li class="page-item">
			
 
				+                          <a class="page-link" href="#">3</a>
			
 
				+                        </li>
			
 
				+                        <li class="page-item">
			
 
				+                          <a class="page-link" href="#">Next</a>
			
 
				+                        </li>
			
 
				+                      </ul>
			
 
				+                    </nav>
			
 
				+                    <hr />
			
 
				+                    <nav aria-label="Page navigation example">
			
 
				+                      <ul class="pagination">
			
 
				+                        <li class="page-item">
			
 
				+                          <a class="page-link" href="#" aria-label="Previous">
			
 
				+                            <span aria-hidden="true">&laquo;</span>
			
 
				+                          </a>
			
 
				+                        </li>
			
 
				+                        <li class="page-item">
			
 
				+                          <a class="page-link" href="#">1</a>
			
 
				+                        </li>
			
 
				+                        <li class="page-item">
			
 
				+                          <a class="page-link" href="#">2</a>
			
 
				+                        </li>
			
 
				+                        <li class="page-item">
			
 
				+                          <a class="page-link" href="#">3</a>
			
 
				+                        </li>
			
 
				+                        <li class="page-item">
			
 
				+                          <a class="page-link" href="#" aria-label="Next">
			
 
				+                            <span aria-hidden="true">&raquo;</span>
			
 
				+                          </a>
			
 
				+                        </li>
			
 
				+                      </ul>
			
 
				+                    </nav>
			
 
				+                    <hr />
			
 
				+                    <nav aria-label="...">
			
 
				+                      <ul class="pagination">
			
 
				+                        <li class="page-item disabled">
			
 
				+                          <a class="page-link">Previous</a>
			
 
				+                        </li>
			
 
				+                        <li class="page-item active" aria-current="page">
			
 
				+                          <a class="page-link" href="#">1</a>
			
 
				+                        </li>
			
 
				+                        <li class="page-item">
			
 
				+                          <a class="page-link" href="#">2</a>
			
 
				+                        </li>
			
 
				+                        <li class="page-item">
			
 
				+                          <a class="page-link" href="#">3</a>
			
 
				+                        </li>
			
 
				+                        <li class="page-item">
			
 
				+                          <a class="page-link" href="#">Next</a>
			
 
				+                        </li>
			
 
				+                      </ul>
			
 
				+                    </nav>
			
 
				+                  </div>
			
 
				+                  <!--end::Body-->
			
 
				+                </div>
			
 
				+                <!--end::Pagination-->
			
 
				+                <!--begin::Placeholder-->
			
 
				+                <div class="card card-secondary card-outline mb-4">
			
 
				+                  <!--begin::Header-->
			
 
				+                  <div class="card-header">
			
 
				+                    <div class="card-title">Placeholder</div>
			
 
				+                  </div>
			
 
				+                  <!--end::Header-->
			
 
				+                  <!--begin::Body-->
			
 
				+                  <div class="card-body">
			
 
				+                    <div class="card" aria-hidden="true">
			
 
				+                      <div class="card-body">
			
 
				+                        <h5 class="card-title placeholder-glow">
			
 
				+                          <span class="placeholder col-6"></span>
			
 
				+                        </h5>
			
 
				+                        <p class="card-text placeholder-glow">
			
 
				+                          <span class="placeholder col-7"></span>
			
 
				+                          <span class="placeholder col-4"></span>
			
 
				+                          <span class="placeholder col-4"></span>
			
 
				+                          <span class="placeholder col-6"></span>
			
 
				+                          <span class="placeholder col-8"></span>
			
 
				+                        </p>
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <!--end::Body-->
			
 
				+                </div>
			
 
				+                <!--end::Placeholder-->
			
 
				+                <!--begin::Progress-->
			
 
				+                <div class="card card-primary card-outline mb-4">
			
 
				+                  <!--begin::Header-->
			
 
				+                  <div class="card-header">
			
 
				+                    <div class="card-title">Progress</div>
			
 
				+                  </div>
			
 
				+                  <!--end::Header-->
			
 
				+                  <!--begin::Body-->
			
 
				+                  <div class="card-body">
			
 
				+                    <div
			
 
				+                      class="progress mb-2"
			
 
				+                      role="progressbar"
			
 
				+                      aria-label="Success example"
			
 
				+                      aria-valuenow="25"
			
 
				+                      aria-valuemin="0"
			
 
				+                      aria-valuemax="100"
			
 
				+                    >
			
 
				+                      <div
			
 
				+                        class="progress-bar bg-success"
			
 
				+                        style="width: 25%; border-radius: 0.375rem;"
			
 
				+                      >
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                    <div
			
 
				+                      class="progress mb-2"
			
 
				+                      role="progressbar"
			
 
				+                      aria-label="Default striped example"
			
 
				+                      aria-valuenow="10"
			
 
				+                      aria-valuemin="0"
			
 
				+                      aria-valuemax="100"
			
 
				+                    >
			
 
				+                      <div
			
 
				+                        class="progress-bar"
			
 
				+                        style="width: 10%; border-radius: 0.375rem;"
			
 
				+                      >
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                    <div
			
 
				+                      class="progress mb-2"
			
 
				+                      role="progressbar"
			
 
				+                      aria-label="Info striped example"
			
 
				+                      aria-valuenow="50"
			
 
				+                      aria-valuemin="0"
			
 
				+                      aria-valuemax="100"
			
 
				+                    >
			
 
				+                      <div
			
 
				+                        class="progress-bar progress-bar-striped bg-info"
			
 
				+                        style="width: 50%; border-radius: 0.375rem;"
			
 
				+                      >
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                    <div
			
 
				+                      class="progress mb-2"
			
 
				+                      role="progressbar"
			
 
				+                      aria-label="Warning striped example"
			
 
				+                      aria-valuenow="75"
			
 
				+                      aria-valuemin="0"
			
 
				+                      aria-valuemax="100"
			
 
				+                    >
			
 
				+                      <div
			
 
				+                        class="progress-bar progress-bar-striped progress-bar-animated bg-warning"
			
 
				+                        style="width: 75%; border-radius: 0.375rem;"
			
 
				+                      >
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                    <div
			
 
				+                      class="progress mb-2"
			
 
				+                      role="progressbar"
			
 
				+                      aria-label="Danger striped example"
			
 
				+                      aria-valuenow="100"
			
 
				+                      aria-valuemin="0"
			
 
				+                      aria-valuemax="100"
			
 
				+                    >
			
 
				+                      <div
			
 
				+                        class="progress-bar progress-bar-striped progress-bar-animated bg-danger"
			
 
				+                        style="width: 100%; border-radius: 0.375rem;"
			
 
				+                      >
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <!--end::Body-->
			
 
				+                </div>
			
 
				+                <!--end::Progress-->
			
 
				+                <!--begin::Toast-->
			
 
				+                <div class="card card-primary card-outline mb-4">
			
 
				+                  <!--begin::Header-->
			
 
				+                  <div class="card-header">
			
 
				+                    <div class="card-title">Toast</div>
			
 
				+                  </div>
			
 
				+                  <!--end::Header-->
			
 
				+                  <!--begin::Body-->
			
 
				+                  <div class="card-body">
			
 
				+                    <button
			
 
				+                      type="button"
			
 
				+                      class="btn btn-primary mb-2"
			
 
				+                      data-bs-toggle="toast"
			
 
				+                      data-bs-target="toastDefault">Show default toast</button
			
 
				+                    >
			
 
				+                    <hr />
			
 
				+                    <button
			
 
				+                      type="button"
			
 
				+                      class="btn btn-primary mb-2"
			
 
				+                      data-bs-toggle="toast"
			
 
				+                      data-bs-target="toastPrimary">Show primary toast</button
			
 
				+                    >
			
 
				+                    <button
			
 
				+                      type="button"
			
 
				+                      class="btn btn-secondary mb-2"
			
 
				+                      data-bs-toggle="toast"
			
 
				+                      data-bs-target="toastSecondary"
			
 
				+                      >Show secondary toast</button
			
 
				+                    >
			
 
				+                    <button
			
 
				+                      type="button"
			
 
				+                      class="btn btn-success mb-2"
			
 
				+                      data-bs-toggle="toast"
			
 
				+                      data-bs-target="toastSuccess">Show success toast</button
			
 
				+                    >
			
 
				+                    <button
			
 
				+                      type="button"
			
 
				+                      class="btn btn-danger mb-2"
			
 
				+                      data-bs-toggle="toast"
			
 
				+                      data-bs-target="toastDanger">Show danger toast</button
			
 
				+                    >
			
 
				+                    <button
			
 
				+                      type="button"
			
 
				+                      class="btn btn-warning mb-2"
			
 
				+                      data-bs-toggle="toast"
			
 
				+                      data-bs-target="toastWarning">Show warning toast</button
			
 
				+                    >
			
 
				+                    <button
			
 
				+                      type="button"
			
 
				+                      class="btn btn-info mb-2"
			
 
				+                      data-bs-toggle="toast"
			
 
				+                      data-bs-target="toastInfo">Show info toast</button
			
 
				+                    >
			
 
				+                    <button
			
 
				+                      type="button"
			
 
				+                      class="btn btn-light mb-2"
			
 
				+                      data-bs-toggle="toast"
			
 
				+                      data-bs-target="toastLight">Show light toast</button
			
 
				+                    >
			
 
				+                    <button
			
 
				+                      type="button"
			
 
				+                      class="btn btn-dark mb-2"
			
 
				+                      data-bs-toggle="toast"
			
 
				+                      data-bs-target="toastDark">Show dark toast</button
			
 
				+                    >
			
 
				+                    <div
			
 
				+                      class="toast-container position-fixed bottom-0 end-0 p-3"
			
 
				+                    >
			
 
				+                      <div
			
 
				+                        id="toastDefault"
			
 
				+                        class="toast"
			
 
				+                        role="alert"
			
 
				+                        aria-live="assertive"
			
 
				+                        aria-atomic="true"
			
 
				+                      >
			
 
				+                        <div class="toast-header">
			
 
				+                          <i class="bi bi-circle me-2"></i>
			
 
				+                          <strong class="me-auto">Bootstrap</strong>
			
 
				+                          <small>11 mins ago</small>
			
 
				+                          <button
			
 
				+                            type="button"
			
 
				+                            class="btn-close"
			
 
				+                            data-bs-dismiss="toast"
			
 
				+                            aria-label="Close"></button>
			
 
				+                        </div>
			
 
				+                        <div class="toast-body">
			
 
				+                          Hello, world! This is a toast message.
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <div
			
 
				+                        id="toastPrimary"
			
 
				+                        class="toast toast-primary"
			
 
				+                        role="alert"
			
 
				+                        aria-live="assertive"
			
 
				+                        aria-atomic="true"
			
 
				+                      >
			
 
				+                        <div class="toast-header">
			
 
				+                          <i class="bi bi-circle me-2"></i>
			
 
				+                          <strong class="me-auto">Bootstrap</strong>
			
 
				+                          <small>11 mins ago</small>
			
 
				+                          <button
			
 
				+                            type="button"
			
 
				+                            class="btn-close"
			
 
				+                            data-bs-dismiss="toast"
			
 
				+                            aria-label="Close"></button>
			
 
				+                        </div>
			
 
				+                        <div class="toast-body">
			
 
				+                          Hello, world! This is a toast message.
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <div
			
 
				+                        id="toastSecondary"
			
 
				+                        class="toast toast-secondary"
			
 
				+                        role="alert"
			
 
				+                        aria-live="assertive"
			
 
				+                        aria-atomic="true"
			
 
				+                      >
			
 
				+                        <div class="toast-header">
			
 
				+                          <i class="bi bi-circle me-2"></i>
			
 
				+                          <strong class="me-auto">Bootstrap</strong>
			
 
				+                          <small>11 mins ago</small>
			
 
				+                          <button
			
 
				+                            type="button"
			
 
				+                            class="btn-close"
			
 
				+                            data-bs-dismiss="toast"
			
 
				+                            aria-label="Close"></button>
			
 
				+                        </div>
			
 
				+                        <div class="toast-body">
			
 
				+                          Hello, world! This is a toast message.
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <div
			
 
				+                        id="toastSuccess"
			
 
				+                        class="toast toast-success"
			
 
				+                        role="alert"
			
 
				+                        aria-live="assertive"
			
 
				+                        aria-atomic="true"
			
 
				+                      >
			
 
				+                        <div class="toast-header">
			
 
				+                          <i class="bi bi-circle me-2"></i>
			
 
				+                          <strong class="me-auto">Bootstrap</strong>
			
 
				+                          <small>11 mins ago</small>
			
 
				+                          <button
			
 
				+                            type="button"
			
 
				+                            class="btn-close"
			
 
				+                            data-bs-dismiss="toast"
			
 
				+                            aria-label="Close"></button>
			
 
				+                        </div>
			
 
				+                        <div class="toast-body">
			
 
				+                          Hello, world! This is a toast message.
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <div
			
 
				+                        id="toastDanger"
			
 
				+                        class="toast toast-danger"
			
 
				+                        role="alert"
			
 
				+                        aria-live="assertive"
			
 
				+                        aria-atomic="true"
			
 
				+                      >
			
 
				+                        <div class="toast-header">
			
 
				+                          <i class="bi bi-circle me-2"></i>
			
 
				+                          <strong class="me-auto">Bootstrap</strong>
			
 
				+                          <small>11 mins ago</small>
			
 
				+                          <button
			
 
				+                            type="button"
			
 
				+                            class="btn-close"
			
 
				+                            data-bs-dismiss="toast"
			
 
				+                            aria-label="Close"></button>
			
 
				+                        </div>
			
 
				+                        <div class="toast-body">
			
 
				+                          Hello, world! This is a toast message.
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <div
			
 
				+                        id="toastWarning"
			
 
				+                        class="toast toast-warning"
			
 
				+                        role="alert"
			
 
				+                        aria-live="assertive"
			
 
				+                        aria-atomic="true"
			
 
				+                      >
			
 
				+                        <div class="toast-header">
			
 
				+                          <i class="bi bi-circle me-2"></i>
			
 
				+                          <strong class="me-auto">Bootstrap</strong>
			
 
				+                          <small>11 mins ago</small>
			
 
				+                          <button
			
 
				+                            type="button"
			
 
				+                            class="btn-close"
			
 
				+                            data-bs-dismiss="toast"
			
 
				+                            aria-label="Close"></button>
			
 
				+                        </div>
			
 
				+                        <div class="toast-body">
			
 
				+                          Hello, world! This is a toast message.
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <div
			
 
				+                        id="toastInfo"
			
 
				+                        class="toast toast-info"
			
 
				+                        role="alert"
			
 
				+                        aria-live="assertive"
			
 
				+                        aria-atomic="true"
			
 
				+                      >
			
 
				+                        <div class="toast-header">
			
 
				+                          <i class="bi bi-circle me-2"></i>
			
 
				+                          <strong class="me-auto">Bootstrap</strong>
			
 
				+                          <small>11 mins ago</small>
			
 
				+                          <button
			
 
				+                            type="button"
			
 
				+                            class="btn-close"
			
 
				+                            data-bs-dismiss="toast"
			
 
				+                            aria-label="Close"></button>
			
 
				+                        </div>
			
 
				+                        <div class="toast-body">
			
 
				+                          Hello, world! This is a toast message.
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <div
			
 
				+                        id="toastLight"
			
 
				+                        class="toast toast-light"
			
 
				+                        role="alert"
			
 
				+                        aria-live="assertive"
			
 
				+                        aria-atomic="true"
			
 
				+                      >
			
 
				+                        <div class="toast-header">
			
 
				+                          <i class="bi bi-circle me-2"></i>
			
 
				+                          <strong class="me-auto">Bootstrap</strong>
			
 
				+                          <small>11 mins ago</small>
			
 
				+                          <button
			
 
				+                            type="button"
			
 
				+                            class="btn-close"
			
 
				+                            data-bs-dismiss="toast"
			
 
				+                            aria-label="Close"></button>
			
 
				+                        </div>
			
 
				+                        <div class="toast-body">
			
 
				+                          Hello, world! This is a toast message.
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <div
			
 
				+                        id="toastDark"
			
 
				+                        class="toast toast-dark"
			
 
				+                        role="alert"
			
 
				+                        aria-live="assertive"
			
 
				+                        aria-atomic="true"
			
 
				+                      >
			
 
				+                        <div class="toast-header">
			
 
				+                          <i class="bi bi-circle me-2"></i>
			
 
				+                          <strong class="me-auto">Bootstrap</strong>
			
 
				+                          <small>11 mins ago</small>
			
 
				+                          <button
			
 
				+                            type="button"
			
 
				+                            class="btn-close"
			
 
				+                            data-bs-dismiss="toast"
			
 
				+                            aria-label="Close"></button>
			
 
				+                        </div>
			
 
				+                        <div class="toast-body">
			
 
				+                          Hello, world! This is a toast message.
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <!--end::Body-->
			
 
				+                </div>
			
 
				+                <!--end::Toast-->
			
 
				+                <!--begin::Tooltip-->
			
 
				+                <div class="card card-primary card-outline mb-4">
			
 
				+                  <!--begin::Header-->
			
 
				+                  <div class="card-header">
			
 
				+                    <div class="card-title">Tooltip</div>
			
 
				+                  </div>
			
 
				+                  <!--end::Header-->
			
 
				+                  <!--begin::Body-->
			
 
				+                  <div class="card-body">
			
 
				+                    <p class="muted">
			
 
				+                      Placeholder text to demonstrate some <a
			
 
				+                        href="#"
			
 
				+                        data-bs-toggle="tooltip"
			
 
				+                        data-bs-title="Default tooltip">inline links</a
			
 
				+                      > with tooltips. This is now just filler, no killer.
			
 
				+                      Content placed here just to mimic the presence of <a
			
 
				+                        href="#"
			
 
				+                        data-bs-toggle="tooltip"
			
 
				+                        data-bs-title="Another tooltip">real text</a
			
 
				+                      >. And all that just to give you an idea of how tooltips
			
 
				+                      would look when used in real-world situations. So
			
 
				+                      hopefully you've now seen how <a
			
 
				+                        href="#"
			
 
				+                        data-bs-toggle="tooltip"
			
 
				+                        data-bs-title="Another one here too"
			
 
				+                        >these tooltips on links</a
			
 
				+                      > can work in practice, once you use them on <a
			
 
				+                        href="#"
			
 
				+                        data-bs-toggle="tooltip"
			
 
				+                        data-bs-title="The last tip!">your own</a
			
 
				+                      > site or project.
			
 
				+                    </p>
			
 
				+                  </div>
			
 
				+                  <!--end::Body-->
			
 
				+                </div>
			
 
				+                <!--end::Toast-->
			
 
				+                <!--begin::Spinner-->
			
 
				+                <div class="card card-success card-outline mb-4">
			
 
				+                  <!--begin::Header-->
			
 
				+                  <div class="card-header">
			
 
				+                    <div class="card-title">Spinner</div>
			
 
				+                  </div>
			
 
				+                  <!--end::Header-->
			
 
				+                  <!--begin::Body-->
			
 
				+                  <div class="card-body">
			
 
				+                    <div class="spinner-border text-primary" role="status">
			
 
				+                      <span class="visually-hidden">Loading...</span>
			
 
				+                    </div>
			
 
				+                    <div class="spinner-border text-secondary" role="status">
			
 
				+                      <span class="visually-hidden">Loading...</span>
			
 
				+                    </div>
			
 
				+                    <div class="spinner-border text-success" role="status">
			
 
				+                      <span class="visually-hidden">Loading...</span>
			
 
				+                    </div>
			
 
				+                    <div class="spinner-border text-danger" role="status">
			
 
				+                      <span class="visually-hidden">Loading...</span>
			
 
				+                    </div>
			
 
				+                    <div class="spinner-border text-warning" role="status">
			
 
				+                      <span class="visually-hidden">Loading...</span>
			
 
				+                    </div>
			
 
				+                    <div class="spinner-border text-info" role="status">
			
 
				+                      <span class="visually-hidden">Loading...</span>
			
 
				+                    </div>
			
 
				+                    <div class="spinner-border text-light" role="status">
			
 
				+                      <span class="visually-hidden">Loading...</span>
			
 
				+                    </div>
			
 
				+                    <div class="spinner-border text-dark" role="status">
			
 
				+                      <span class="visually-hidden">Loading...</span>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <!--end::Body-->
			
 
				+                </div>
			
 
				+                <!--end::Spinner-->
			
 
				+              </div>
			
 
				+              <!--end::Col-->
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+    <!--begin::Bootstrap Tooltips-->
			
 
				+    <script is:inline>
			
 
				+      const tooltipTriggerList = document.querySelectorAll(
			
 
				+        '[data-bs-toggle="tooltip"]',
			
 
				+      );
			
 
				+      const tooltipList = [...tooltipTriggerList].map(
			
 
				+        (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl),
			
 
				+      );
			
 
				+    </script>
			
 
				+    <!--end::Bootstrap Tooltips-->
			
 
				+    <!--begin::Bootstrap Toasts-->
			
 
				+    <script is:inline>
			
 
				+      const toastTriggerList = document.querySelectorAll(
			
 
				+        '[data-bs-toggle="toast"]',
			
 
				+      );
			
 
				+      toastTriggerList.forEach((btn) => {
			
 
				+        btn.addEventListener("click", (event) => {
			
 
				+          event.preventDefault();
			
 
				+          const toastEle = document.getElementById(
			
 
				+            btn.getAttribute("data-bs-target"),
			
 
				+          );
			
 
				+          const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastEle);
			
 
				+          toastBootstrap.show();
			
 
				+        });
			
 
				+      });
			
 
				+    </script>
			
 
				+    <!--end::Bootstrap Toasts-->
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/UI/icons.astro
+++ b/template/src/html/pages/UI/icons.astro
@@ -0,0 +1,93 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "AdminLTE 4 | Icons";
			
 
				+const path = "../../../dist";
			
 
				+const mainPage = "ui-elements";
			
 
				+const page = "icons";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">Icons</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    Icons
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!-- Timelime example  -->
			
 
				+            <div class="row">
			
 
				+              <div class="col-12">
			
 
				+                <!-- The icons -->
			
 
				+                <div class="col-12">
			
 
				+                    <div class="card card-primary card-outline">
			
 
				+                      <div class="card-header">
			
 
				+                        <h3 class="card-title">Icons</h3>
			
 
				+                      </div>
			
 
				+                      <div class="card-body">
			
 
				+                        <p>You can use any font library you like with AdminLTE 4.</p>
			
 
				+                        <strong>Recommendations</strong>
			
 
				+                        <ul class="mt-1">
			
 
				+                          <li><a href="https://fontawesome.com/" target="_blank">Font Awesome</a></li>
			
 
				+                          <li><a href="https://useiconic.com/open/" target="_blank">Iconic Icons</a></li>
			
 
				+                          <li><a href="https://ionicons.com/" target="_blank">Ion Icons</a></li>
			
 
				+                        </ul>
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+            </div>
			
 
				+            <!-- /.row -->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/UI/timeline.astro
+++ b/template/src/html/pages/UI/timeline.astro
@@ -0,0 +1,221 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "AdminLTE 4 | Timeline Elements";
			
 
				+const path = "../../../dist";
			
 
				+const mainPage = "ui-elements";
			
 
				+const page = "timeline";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">Timeline</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    Timeline
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!-- Timelime example  -->
			
 
				+            <div class="row">
			
 
				+              <div class="col-md-12">
			
 
				+                <!-- The time line -->
			
 
				+                <div class="timeline">
			
 
				+                  <!-- timeline time label -->
			
 
				+                  <div class="time-label">
			
 
				+                    <span class="text-bg-danger">10 Feb. 2023</span>
			
 
				+                  </div>
			
 
				+                  <!-- /.timeline-label -->
			
 
				+                  <!-- timeline item -->
			
 
				+                  <div>
			
 
				+                    <i
			
 
				+                      class="timeline-icon bi bi-envelope text-bg-primary"
			
 
				+                    >
			
 
				+                    </i>
			
 
				+                    <div class="timeline-item">
			
 
				+                      <span class="time">
			
 
				+                        <i class="bi bi-clock-fill"></i> 12:05
			
 
				+                      </span>
			
 
				+                      <h3 class="timeline-header">
			
 
				+                        <a href="#">Support Team</a> sent you an email
			
 
				+                      </h3>
			
 
				+
			
 
				+                      <div class="timeline-body">
			
 
				+                        Etsy doostang zoodles disqus groupon greplin oooj voxy
			
 
				+                        zoodles, weebly ning heekya handango imeem plugg dopplr
			
 
				+                        jibjab, movity jajah plickers sifteo edmodo ifttt
			
 
				+                        zimbra. Babblely odeo kaboodle quora plaxo ideeli hulu
			
 
				+                        weebly balihoo...
			
 
				+                      </div>
			
 
				+                      <div class="timeline-footer">
			
 
				+                        <a class="btn btn-primary btn-sm">Read more</a>
			
 
				+                        <a class="btn btn-danger btn-sm">Delete</a>
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <!-- END timeline item -->
			
 
				+                  <!-- timeline item -->
			
 
				+                  <div>
			
 
				+                    <i class="timeline-icon bi bi-person text-bg-success">
			
 
				+                    </i>
			
 
				+                    <div class="timeline-item">
			
 
				+                      <span class="time">
			
 
				+                        <i class="bi bi-clock-fill"></i> 5 mins ago
			
 
				+                      </span>
			
 
				+                      <h3 class="timeline-header no-border">
			
 
				+                        <a href="#">Sarah Young</a> accepted your friend request
			
 
				+                      </h3>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <!-- END timeline item -->
			
 
				+                  <!-- timeline item -->
			
 
				+                  <div>
			
 
				+                    <i
			
 
				+                      class="timeline-icon bi bi-chat-text-fill text-bg-warning"
			
 
				+                    >
			
 
				+                    </i>
			
 
				+                    <div class="timeline-item">
			
 
				+                      <span class="time">
			
 
				+                        <i class="bi bi-clock-fill"></i> 27 mins ago
			
 
				+                      </span>
			
 
				+                      <h3 class="timeline-header">
			
 
				+                        <a href="#">Jay White</a> commented on your post
			
 
				+                      </h3>
			
 
				+                      <div class="timeline-body">
			
 
				+                        Take me to your leader! Switzerland is small and
			
 
				+                        neutral! We are more like Germany, ambitious and
			
 
				+                        misunderstood!
			
 
				+                      </div>
			
 
				+                      <div class="timeline-footer">
			
 
				+                        <a class="btn btn-warning btn-sm">View comment</a>
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <!-- END timeline item -->
			
 
				+                  <!-- timeline time label -->
			
 
				+                  <div class="time-label">
			
 
				+                    <span class="text-bg-success">3 Jan. 2023</span>
			
 
				+                  </div>
			
 
				+                  <!-- /.timeline-label -->
			
 
				+                  <!-- timeline item -->
			
 
				+                  <div>
			
 
				+                    <i class="timeline-icon bi bi-camera text-bg-primary">
			
 
				+                    </i>
			
 
				+                    <div class="timeline-item">
			
 
				+                      <span class="time">
			
 
				+                        <i class="bi bi-clock-fill"></i> 2 days ago
			
 
				+                      </span>
			
 
				+                      <h3 class="timeline-header">
			
 
				+                        <a href="#">Mina Lee</a> uploaded new photos
			
 
				+                      </h3>
			
 
				+                      <div class="timeline-body">
			
 
				+                        <img
			
 
				+                          src={path + "/assets/img/user1-128x128.jpg"}
			
 
				+                          alt="..."
			
 
				+                        />
			
 
				+                        <img
			
 
				+                          src={path + "/assets/img/user1-128x128.jpg"}
			
 
				+                          alt="..."
			
 
				+                        />
			
 
				+                        <img
			
 
				+                          src={path + "/assets/img/user1-128x128.jpg"}
			
 
				+                          alt="..."
			
 
				+                        />
			
 
				+                        <img
			
 
				+                          src={path + "/assets/img/user1-128x128.jpg"}
			
 
				+                          alt="..."
			
 
				+                        />
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <!-- END timeline item -->
			
 
				+                  <!-- timeline item -->
			
 
				+                  <div>
			
 
				+                    <i class="timeline-icon bi bi-camera-film text-bg-info"></i>
			
 
				+
			
 
				+                    <div class="timeline-item">
			
 
				+                      <span class="time">
			
 
				+                        <i class="bi bi-clock-fill"></i> 5 days ago
			
 
				+                      </span>
			
 
				+
			
 
				+                      <h3 class="timeline-header">
			
 
				+                        <a href="#">Mr. Doe</a> shared a video
			
 
				+                      </h3>
			
 
				+
			
 
				+                      <div class="timeline-body">
			
 
				+                        <div class="ratio ratio-16x9">
			
 
				+                          <iframe
			
 
				+                            src="https://www.youtube.com/embed/tMWkeBIohBs"
			
 
				+                            allowfullscreen></iframe>
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <div class="timeline-footer">
			
 
				+                        <a href="#" class="btn btn-sm text-bg-warning">
			
 
				+                          See comments
			
 
				+                        </a>
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <!-- END timeline item -->
			
 
				+                  <div>
			
 
				+                    <i
			
 
				+                      class="timeline-icon bi bi-clock-fill text-bg-secondary"
			
 
				+                    >
			
 
				+                    </i>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+            </div>
			
 
				+            <!-- /.row -->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/docs/browser-support.astro
+++ b/template/src/html/pages/docs/browser-support.astro
@@ -0,0 +1,71 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import BrowserSupport from "@components/docs/browser-support.mdx";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "Browser Support | AdminLTE 4";
			
 
				+const path = "../../../dist";
			
 
				+const mainPage = "docs";
			
 
				+const page = "browser-support";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">Browser Support</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    Browser Support
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <BrowserSupport />
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/docs/color-mode.astro
+++ b/template/src/html/pages/docs/color-mode.astro
@@ -0,0 +1,273 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+import ColorMode from "@components/docs/color-mode.mdx";
			
 
				+
			
 
				+const title = "Color Mode | AdminLTE 4";
			
 
				+const path = "../../../dist";
			
 
				+const mainPage = "docs";
			
 
				+const page = "color-mode";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">Color Mode Toggle</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    Color Mode
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row g-4">
			
 
				+              <div class="col-12">
			
 
				+                <div class="callout callout-info">
			
 
				+                  <h5 class="fw-bold">Tips</h5>
			
 
				+                  <p>
			
 
				+                    <a href="https://getbootstrap.com/docs/5.3/customize/color-modes/" target="_blank" rel="noopener noreferrer" class="callout-link">
			
 
				+                      Color modes in Bootstrap
			
 
				+                    </a> allow you to switch between light and dark modes. You can do this using the data-bs-theme attribute. You can also create your own custom color modes.
			
 
				+
			
 
				+                  </p>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <!-- Start column -->
			
 
				+              <div class="col-12">
			
 
				+                <!--begin::Header-->
			
 
				+                <nav class="navbar navbar-expand bg-body">
			
 
				+                  <!--begin::Container-->
			
 
				+                  <div class="container-fluid">
			
 
				+                    <!--begin::Start Navbar links-->
			
 
				+                    <ul class="navbar-nav">
			
 
				+                      <li class="nav-item">
			
 
				+                        <a
			
 
				+                          class="nav-link"
			
 
				+                          data-lte-toggle="sidebar"
			
 
				+                          href="#"
			
 
				+                          role="button"><i class="bi bi-list"></i></a
			
 
				+                        >
			
 
				+                      </li>
			
 
				+                      <li class="nav-item d-none d-md-block">
			
 
				+                        <a href="#" class="nav-link">Home</a>
			
 
				+                      </li>
			
 
				+                      <li class="nav-item d-none d-md-block">
			
 
				+                        <a href="#" class="nav-link">Contact</a>
			
 
				+                      </li>
			
 
				+                    </ul>
			
 
				+                    <!--end::Start Navbar links-->
			
 
				+                    <!--begin::End Navbar links-->
			
 
				+                    <ul class="navbar-nav ms-auto">
			
 
				+                      <li class="nav-item dropdown">
			
 
				+                        <button
			
 
				+                          class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
			
 
				+                          id="bd-theme"
			
 
				+                          type="button"
			
 
				+                          aria-expanded="false"
			
 
				+                          data-bs-toggle="dropdown"
			
 
				+                          data-bs-display="static"
			
 
				+                        >
			
 
				+                          <span class="theme-icon-active">
			
 
				+                            <i class="my-1"></i>
			
 
				+                          </span>
			
 
				+                          <span class="d-lg-none ms-2" id="bd-theme-text"
			
 
				+                            >Toggle theme</span
			
 
				+                          >
			
 
				+                        </button>
			
 
				+                        <ul
			
 
				+                          class="dropdown-menu dropdown-menu-end"
			
 
				+                          aria-labelledby="bd-theme-text"
			
 
				+                          style="--bs-dropdown-min-width: 8rem;"
			
 
				+                        >
			
 
				+                          <li>
			
 
				+                            <button
			
 
				+                              type="button"
			
 
				+                              class="dropdown-item d-flex align-items-center active"
			
 
				+                              data-bs-theme-value="light"
			
 
				+                              aria-pressed="false"
			
 
				+                            >
			
 
				+                              <i class="bi bi-sun-fill me-2"></i>
			
 
				+                              Light
			
 
				+                              <i class="bi bi-check-lg ms-auto d-none"></i>
			
 
				+                            </button>
			
 
				+                          </li>
			
 
				+                          <li>
			
 
				+                            <button
			
 
				+                              type="button"
			
 
				+                              class="dropdown-item d-flex align-items-center"
			
 
				+                              data-bs-theme-value="dark"
			
 
				+                              aria-pressed="false"
			
 
				+                            >
			
 
				+                              <i class="bi bi-moon-fill me-2"></i>
			
 
				+                              Dark
			
 
				+                              <i class="bi bi-check-lg ms-auto d-none"></i>
			
 
				+                            </button>
			
 
				+                          </li>
			
 
				+                          <li>
			
 
				+                            <button
			
 
				+                              type="button"
			
 
				+                              class="dropdown-item d-flex align-items-center"
			
 
				+                              data-bs-theme-value="auto"
			
 
				+                              aria-pressed="true"
			
 
				+                            >
			
 
				+                              <i class="bi bi-circle-fill-half-stroke me-2"
			
 
				+                              ></i>
			
 
				+                              Auto
			
 
				+                              <i class="bi bi-check-lg ms-auto d-none"></i>
			
 
				+                            </button>
			
 
				+                          </li>
			
 
				+                        </ul>
			
 
				+                      </li>
			
 
				+                    </ul>
			
 
				+                    <!--end::End Navbar links-->
			
 
				+                  </div>
			
 
				+                  <!--end::Container-->
			
 
				+                </nav>
			
 
				+                <!--end::Header-->
			
 
				+              </div>
			
 
				+              <!-- Start column -->
			
 
				+              <div class="col-12">
			
 
				+                <ColorMode />
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+
			
 
				+    <Scripts path={path} />
			
 
				+
			
 
				+    <script is:inline>
			
 
				+      // Color Mode Toggler
			
 
				+      (() => {
			
 
				+        "use strict";
			
 
				+
			
 
				+        const storedTheme = localStorage.getItem("theme");
			
 
				+
			
 
				+        const getPreferredTheme = () => {
			
 
				+          if (storedTheme) {
			
 
				+            return storedTheme;
			
 
				+          }
			
 
				+
			
 
				+          return window.matchMedia("(prefers-color-scheme: dark)").matches
			
 
				+            ? "dark"
			
 
				+            : "light";
			
 
				+        };
			
 
				+
			
 
				+        const setTheme = function (theme) {
			
 
				+          if (
			
 
				+            theme === "auto" &&
			
 
				+            window.matchMedia("(prefers-color-scheme: dark)").matches
			
 
				+          ) {
			
 
				+            document.documentElement.setAttribute("data-bs-theme", "dark");
			
 
				+          } else {
			
 
				+            document.documentElement.setAttribute("data-bs-theme", theme);
			
 
				+          }
			
 
				+        };
			
 
				+
			
 
				+        setTheme(getPreferredTheme());
			
 
				+
			
 
				+        const showActiveTheme = (theme, focus = false) => {
			
 
				+          const themeSwitcher = document.querySelector("#bd-theme");
			
 
				+
			
 
				+          if (!themeSwitcher) {
			
 
				+            return;
			
 
				+          }
			
 
				+
			
 
				+          const themeSwitcherText = document.querySelector("#bd-theme-text");
			
 
				+          const activeThemeIcon = document.querySelector(
			
 
				+            ".theme-icon-active i"
			
 
				+          );
			
 
				+          const btnToActive = document.querySelector(
			
 
				+            `[data-bs-theme-value="${theme}"]`
			
 
				+          );
			
 
				+          const svgOfActiveBtn = btnToActive
			
 
				+            .querySelector("i")
			
 
				+            .getAttribute("class");
			
 
				+
			
 
				+          for (const element of document.querySelectorAll(
			
 
				+            "[data-bs-theme-value]"
			
 
				+          )) {
			
 
				+            element.classList.remove("active");
			
 
				+            element.setAttribute("aria-pressed", "false");
			
 
				+          }
			
 
				+
			
 
				+          btnToActive.classList.add("active");
			
 
				+          btnToActive.setAttribute("aria-pressed", "true");
			
 
				+          activeThemeIcon.setAttribute("class", svgOfActiveBtn);
			
 
				+          const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
			
 
				+          themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
			
 
				+
			
 
				+          if (focus) {
			
 
				+            themeSwitcher.focus();
			
 
				+          }
			
 
				+        };
			
 
				+
			
 
				+        window
			
 
				+          .matchMedia("(prefers-color-scheme: dark)")
			
 
				+          .addEventListener("change", () => {
			
 
				+            if (storedTheme !== "light" || storedTheme !== "dark") {
			
 
				+              setTheme(getPreferredTheme());
			
 
				+            }
			
 
				+          });
			
 
				+
			
 
				+        window.addEventListener("DOMContentLoaded", () => {
			
 
				+          showActiveTheme(getPreferredTheme());
			
 
				+
			
 
				+          for (const toggle of document.querySelectorAll(
			
 
				+            "[data-bs-theme-value]"
			
 
				+          )) {
			
 
				+            toggle.addEventListener("click", () => {
			
 
				+              const theme = toggle.getAttribute("data-bs-theme-value");
			
 
				+              localStorage.setItem("theme", theme);
			
 
				+              setTheme(theme);
			
 
				+              showActiveTheme(theme, true);
			
 
				+            });
			
 
				+          }
			
 
				+        });
			
 
				+      })();
			
 
				+    </script>
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/docs/components/main-header.astro
+++ b/template/src/html/pages/docs/components/main-header.astro
@@ -0,0 +1,320 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import MainHeader from "@components/docs/components/main-header.mdx";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "Main Header Component | AdminLTE 4";
			
 
				+const path = "../../../../dist";
			
 
				+const mainPage = "components";
			
 
				+const page = "main-header";
			
 
				+const distPath = path;
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">Main Header Component</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    Main Header Component
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <div class="callout callout-warning mb-4">
			
 
				+              <h5 class="fw-bold">Reminder!</h5>
			
 
				+              <p>
			
 
				+                AdminLTE uses all of Bootstrap 5 components. It's a good start
			
 
				+                to review the <a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer" class="callout-link">
			
 
				+                  Bootstrap documentation
			
 
				+                </a> to get an idea of the
			
 
				+                various components that this documentation <b>does not</b> cover.
			
 
				+              </p>
			
 
				+            </div>
			
 
				+
			
 
				+            <div class="callout callout-info mb-4">
			
 
				+              <h5 class="fw-bold">Tips!</h5>
			
 
				+              <p>
			
 
				+                If you go through the example pages and would like to copy a
			
 
				+                component, right-click on the component and choose “inspect
			
 
				+                element” to get to the HTML quicker than scanning the HTML page.
			
 
				+              </p>
			
 
				+            </div>
			
 
				+
			
 
				+            <!-- Navbar -->
			
 
				+            <nav class="navbar navbar-expand bg-body">
			
 
				+              <!--begin::Container-->
			
 
				+              <div class="container-fluid">
			
 
				+                <!-- Start navbar links -->
			
 
				+                <ul class="navbar-nav">
			
 
				+                  <li class="nav-item">
			
 
				+                    <a
			
 
				+                      class="nav-link"
			
 
				+                      data-lte-toggle="sidebar"
			
 
				+                      href="#"
			
 
				+                      role="button"
			
 
				+                    >
			
 
				+                      <i class="bi bi-list"></i>
			
 
				+                    </a>
			
 
				+                  </li>
			
 
				+                  <li class="nav-item d-none d-md-block">
			
 
				+                    <a href="#" class="nav-link">Home</a>
			
 
				+                  </li>
			
 
				+                  <li class="nav-item d-none d-md-block">
			
 
				+                    <a href="#" class="nav-link">Contact</a>
			
 
				+                  </li>
			
 
				+                </ul>
			
 
				+                <!-- End navbar links -->
			
 
				+
			
 
				+                <ul class="navbar-nav ms-auto">
			
 
				+                  <!-- Navbar Search -->
			
 
				+                  <li class="nav-item">
			
 
				+                    <a
			
 
				+                      class="nav-link"
			
 
				+                      data-widget="navbar-search"
			
 
				+                      href="#"
			
 
				+                      role="button"
			
 
				+                    >
			
 
				+                      <i class="bi bi-search"></i>
			
 
				+                    </a>
			
 
				+                  </li>
			
 
				+
			
 
				+                  <!-- Messages Dropdown Menu -->
			
 
				+                  <li class="nav-item dropdown">
			
 
				+                    <a class="nav-link" data-bs-toggle="dropdown" href="#">
			
 
				+                      <i class="bi bi-chat-text"></i>
			
 
				+                      <span class="navbar-badge badge text-bg-danger">3</span>
			
 
				+                    </a>
			
 
				+                    <div
			
 
				+                      class="dropdown-menu dropdown-menu-lg dropdown-menu-end"
			
 
				+                    >
			
 
				+                      <a href="#" class="dropdown-item">
			
 
				+                        <!-- Message Start -->
			
 
				+                        <div class="d-flex">
			
 
				+                          <div class="flex-shrink-0">
			
 
				+                            <img
			
 
				+                              src={distPath + "/assets/img/user1-128x128.jpg"}
			
 
				+                              alt="User Avatar"
			
 
				+                              class="img-size-50 rounded-circle me-3"
			
 
				+                            />
			
 
				+                          </div>
			
 
				+                          <div class="flex-grow-1">
			
 
				+                            <h3 class="dropdown-item-title">
			
 
				+                              Brad Diesel
			
 
				+                              <span class="float-end fs-7 text-danger">
			
 
				+                                <i class="bi bi-star-fill"></i>
			
 
				+                              </span>
			
 
				+                            </h3>
			
 
				+                            <p class="fs-7">Call me whenever you can...</p>
			
 
				+                            <p class="fs-7 text-secondary">
			
 
				+                              <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
			
 
				+                            </p>
			
 
				+                          </div>
			
 
				+                        </div>
			
 
				+                        <!-- Message End -->
			
 
				+                      </a>
			
 
				+                      <div class="dropdown-divider"></div>
			
 
				+                      <a href="#" class="dropdown-item">
			
 
				+                        <!-- Message Start -->
			
 
				+                        <div class="d-flex">
			
 
				+                          <div class="flex-shrink-0">
			
 
				+                            <img
			
 
				+                              src={distPath + "/assets/img/user8-128x128.jpg"}
			
 
				+                              alt="User Avatar"
			
 
				+                              class="img-size-50 rounded-circle me-3"
			
 
				+                            />
			
 
				+                          </div>
			
 
				+                          <div class="flex-grow-1">
			
 
				+                            <h3 class="dropdown-item-title">
			
 
				+                              John Pierce
			
 
				+                              <span class="float-end fs-7 text-secondary">
			
 
				+                                <i class="bi bi-star-fill"></i>
			
 
				+                              </span>
			
 
				+                            </h3>
			
 
				+                            <p class="fs-7">I got your message bro</p>
			
 
				+                            <p class="fs-7 text-secondary">
			
 
				+                              <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
			
 
				+                            </p>
			
 
				+                          </div>
			
 
				+                        </div>
			
 
				+                        <!-- Message End -->
			
 
				+                      </a>
			
 
				+                      <div class="dropdown-divider"></div>
			
 
				+                      <a href="#" class="dropdown-item">
			
 
				+                        <!-- Message Start -->
			
 
				+                        <div class="d-flex">
			
 
				+                          <div class="flex-shrink-0">
			
 
				+                            <img
			
 
				+                              src={distPath + "/assets/img/user3-128x128.jpg"}
			
 
				+                              alt="User Avatar"
			
 
				+                              class="img-size-50 rounded-circle me-3"
			
 
				+                            />
			
 
				+                          </div>
			
 
				+                          <div class="flex-grow-1">
			
 
				+                            <h3 class="dropdown-item-title">
			
 
				+                              Nora Silvester
			
 
				+                              <span class="float-end fs-7 text-warning">
			
 
				+                                <i class="bi bi-star-fill"></i>
			
 
				+                              </span>
			
 
				+                            </h3>
			
 
				+                            <p class="fs-7">The subject goes here</p>
			
 
				+                            <p class="fs-7 text-secondary">
			
 
				+                              <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
			
 
				+                            </p>
			
 
				+                          </div>
			
 
				+                        </div>
			
 
				+                        <!-- Message End -->
			
 
				+                      </a>
			
 
				+                      <div class="dropdown-divider"></div>
			
 
				+                      <a href="#" class="dropdown-item dropdown-footer">
			
 
				+                        See All Messages
			
 
				+                      </a>
			
 
				+                    </div>
			
 
				+                  </li>
			
 
				+                  <!-- Notifications Dropdown Menu -->
			
 
				+                  <li class="nav-item dropdown">
			
 
				+                    <a class="nav-link" data-bs-toggle="dropdown" href="#">
			
 
				+                      <i class="bi bi-bell-fill"></i>
			
 
				+                      <span class="navbar-badge badge text-bg-warning">15</span>
			
 
				+                    </a>
			
 
				+                    <div
			
 
				+                      class="dropdown-menu dropdown-menu-lg dropdown-menu-end"
			
 
				+                    >
			
 
				+                      <span class="dropdown-item dropdown-header"
			
 
				+                        >15 Notifications</span
			
 
				+                      >
			
 
				+                      <div class="dropdown-divider"></div>
			
 
				+                      <a href="#" class="dropdown-item">
			
 
				+                        <i class="bi bi-envelope me-2"></i> 4 new messages
			
 
				+                        <span class="float-end text-secondary fs-7">3 mins</span
			
 
				+                        >
			
 
				+                      </a>
			
 
				+                      <div class="dropdown-divider"></div>
			
 
				+                      <a href="#" class="dropdown-item">
			
 
				+                        <i class="bi bi-people-fill me-2"></i> 8 friend requests
			
 
				+                        <span class="float-end text-secondary fs-7">
			
 
				+                          12 hours
			
 
				+                        </span>
			
 
				+                      </a>
			
 
				+                      <div class="dropdown-divider"></div>
			
 
				+                      <a href="#" class="dropdown-item">
			
 
				+                        <i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
			
 
				+                        <span class="float-end text-secondary fs-7">
			
 
				+                          2 days
			
 
				+                        </span>
			
 
				+                      </a>
			
 
				+                      <div class="dropdown-divider"></div>
			
 
				+                      <a href="#" class="dropdown-item dropdown-footer">
			
 
				+                        See All Notifications
			
 
				+                      </a>
			
 
				+                    </div>
			
 
				+                  </li>
			
 
				+                  <li class="nav-item dropdown user-menu">
			
 
				+                    <a
			
 
				+                      href="#"
			
 
				+                      class="nav-link dropdown-toggle"
			
 
				+                      data-bs-toggle="dropdown"
			
 
				+                    >
			
 
				+                      <img
			
 
				+                        src={distPath + "/assets/img/user2-160x160.jpg"}
			
 
				+                        class="user-image rounded-circle shadow"
			
 
				+                        alt="User Image"
			
 
				+                      />
			
 
				+                      <span class="d-none d-md-inline">Hadi Shaikh</span>
			
 
				+                    </a>
			
 
				+                    <ul
			
 
				+                      class="dropdown-menu dropdown-menu-lg dropdown-menu-end"
			
 
				+                    >
			
 
				+                      <!-- User image -->
			
 
				+                      <li class="user-header text-bg-primary">
			
 
				+                        <img
			
 
				+                          src={distPath + "/assets/img/user2-160x160.jpg"}
			
 
				+                          class="rounded-circle shadow"
			
 
				+                          alt="User Image"
			
 
				+                        />
			
 
				+
			
 
				+                        <p>
			
 
				+                          Hadi Shaikh - Senior Manager
			
 
				+                          <small>Since Nov. 2023</small>
			
 
				+                        </p>
			
 
				+                      </li>
			
 
				+                      <!-- Menu Body -->
			
 
				+                      <li class="user-body">
			
 
				+                        <!--begin::Row-->
			
 
				+                        <div class="row">
			
 
				+                          <div class="col-4 text-center">
			
 
				+                            <a href="#">Followers</a>
			
 
				+                          </div>
			
 
				+                          <div class="col-4 text-center">
			
 
				+                            <a href="#">Sales</a>
			
 
				+                          </div>
			
 
				+                          <div class="col-4 text-center">
			
 
				+                            <a href="#">Friends</a>
			
 
				+                          </div>
			
 
				+                        </div>
			
 
				+                        <!--end::Row-->
			
 
				+                      </li>
			
 
				+                      <!-- Menu Footer-->
			
 
				+                      <li class="user-footer">
			
 
				+                        <a href="#" class="btn btn-default btn-flat">Profile</a>
			
 
				+                        <a href="#" class="btn btn-default btn-flat float-end">
			
 
				+                          Sign out
			
 
				+                        </a>
			
 
				+                      </li>
			
 
				+                    </ul>
			
 
				+                  </li>
			
 
				+                </ul>
			
 
				+              </div>
			
 
				+              <!--end::Container-->
			
 
				+            </nav>
			
 
				+            <!-- /.navbar -->
			
 
				+
			
 
				+            <MainHeader />
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/docs/components/main-sidebar.astro
+++ b/template/src/html/pages/docs/components/main-sidebar.astro
@@ -0,0 +1,71 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import MainSidebar from "@components/docs/components/main-sidebar.mdx";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "Main Sidebar Component | AdminLTE 4";
			
 
				+const path = "../../../../dist";
			
 
				+const mainPage = "components";
			
 
				+const page = "main-sidebar";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">Main Sidebar Component</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    Main Sidebar Component
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <MainSidebar />
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/docs/faq.astro
+++ b/template/src/html/pages/docs/faq.astro
@@ -0,0 +1,71 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import Faq from "@components/docs/faq.mdx";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "FAQ | AdminLTE 4";
			
 
				+const path = "../../../dist";
			
 
				+const mainPage = "docs";
			
 
				+const page = "faq";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">FAQ</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    FAQ
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <Faq />
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/docs/how-to-contribute.astro
+++ b/template/src/html/pages/docs/how-to-contribute.astro
@@ -0,0 +1,71 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import HowToContribute from "@components/docs/how-to-contribute.mdx";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "How To Contribute | AdminLTE 4";
			
 
				+const path = "../../../dist";
			
 
				+const mainPage = "docs";
			
 
				+const page = "how-to-contribute";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">How To Contribute</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    How To Contribute
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <HowToContribute />
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/docs/introduction.astro
+++ b/template/src/html/pages/docs/introduction.astro
@@ -0,0 +1,71 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+import Introduction from "@components/docs/introduction.mdx";
			
 
				+
			
 
				+const title = "Introduction | AdminLTE 4";
			
 
				+const path = "../../../dist";
			
 
				+const mainPage = "docs";
			
 
				+const page = "introduction";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">Introduction</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    Introduction
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <Introduction />
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/docs/javascript/treeview.astro
+++ b/template/src/html/pages/docs/javascript/treeview.astro
@@ -0,0 +1,71 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import Treeview from "@components/javascript/treeview.mdx";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "Treeview Plugin | AdminLTE 4";
			
 
				+const path = "../../../../dist";
			
 
				+const mainPage = "javascript";
			
 
				+const page = "treeview";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">Treeview Plugin</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    Treeview Plugin
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <Treeview />
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/docs/layout.astro
+++ b/template/src/html/pages/docs/layout.astro
@@ -0,0 +1,120 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "Layout | AdminLTE 4";
			
 
				+const path = "../../../dist";
			
 
				+const mainPage = "docs";
			
 
				+const page = "layout";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">Layout</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    Layout
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <div class="container-fluid">
			
 
				+            <div class="callout callout-info mb-4">
			
 
				+              <h5 class="fw-bold">Tips</h5>
			
 
				+              <p>
			
 
				+                The <a href="/starter.html" target="_blank" rel="noopener noreferrer"  class="callout-link">
			
 
				+                  starter page
			
 
				+                </a> is a good place to start building your app if you’d like to
			
 
				+                start from scratch.
			
 
				+              </p>
			
 
				+            </div>
			
 
				+
			
 
				+            <p>The layout consists of five major parts:</p>
			
 
				+            <ul>
			
 
				+              <li>
			
 
				+                Wrapper <code>.app-wrapper</code> . A div that wraps the whole site.
			
 
				+              </li>
			
 
				+              <li>
			
 
				+                Main Header <code>.app-header</code> . Contains the logo and navbar.
			
 
				+              </li>
			
 
				+              <li>
			
 
				+                Main Sidebar <code>.app-sidebar</code> . Contains the sidebar user
			
 
				+                panel and menu.
			
 
				+              </li>
			
 
				+              <li>
			
 
				+                Content <code>.app-main</code> . Contains the page header and content.
			
 
				+              </li>
			
 
				+              <li>
			
 
				+                Main Footer <code>.app-footer</code> . Contains the footer.
			
 
				+              </li>
			
 
				+            </ul>
			
 
				+
			
 
				+            <h4>Layout Options</h4>
			
 
				+            <p>
			
 
				+              AdminLTE v4 provides a set of options to apply to your main
			
 
				+              layout. Each one of these classes can be added to the
			
 
				+              <code>body</code> tag to get the desired goal.
			
 
				+            </p>
			
 
				+            <ul>
			
 
				+              <li>
			
 
				+                Fixed Sidebar: use the class <code>.layout-fixed</code> to get a
			
 
				+                fixed sidebar.
			
 
				+              </li>
			
 
				+              <li>
			
 
				+                Mini Sidebar on Toggle: use the class
			
 
				+                <code>.sidebar-expand-* .sidebar-mini</code>
			
 
				+                to have a collapsed sidebar upon loading.
			
 
				+              </li>
			
 
				+              <li>
			
 
				+                Collapsed Sidebar: use the class
			
 
				+                <code>.sidebar-expand-* .sidebar-mini .sidebar-collapse</code> to
			
 
				+                have a collapsed sidebar upon loading.
			
 
				+              </li>
			
 
				+            </ul>
			
 
				+          </div>
			
 
				+          <!-- /.container-fluid -->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/docs/license.astro
+++ b/template/src/html/pages/docs/license.astro
@@ -0,0 +1,71 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import License from "@components/docs/license.mdx";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "License | AdminLTE 4";
			
 
				+const path = "../../../dist";
			
 
				+const mainPage = "docs";
			
 
				+const page = "license";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">License</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    License
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <License />
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/examples/lockscreen.astro
+++ b/template/src/html/pages/examples/lockscreen.astro
@@ -0,0 +1,63 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "AdminLTE 4 | Lockscreen";
			
 
				+const path = "../../../dist";
			
 
				+const htmlPath = "..";
			
 
				+const year = new Date().getFullYear();
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="lockscreen bg-body-secondary">
			
 
				+    <div class="lockscreen-wrapper">
			
 
				+      <div class="lockscreen-logo">
			
 
				+        <a href={htmlPath + "/index2.html"}><b>Admin</b>LTE</a>
			
 
				+      </div>
			
 
				+
			
 
				+      <div class="lockscreen-name">John Doe</div>
			
 
				+
			
 
				+      <div class="lockscreen-item">
			
 
				+        <div class="lockscreen-image">
			
 
				+          <img src={path + "/assets/img/user1-128x128.jpg"} alt="User Image" />
			
 
				+        </div>
			
 
				+
			
 
				+        <form class="lockscreen-credentials">
			
 
				+          <div class="input-group">
			
 
				+            <input
			
 
				+              type="password"
			
 
				+              class="form-control shadow-none"
			
 
				+              placeholder="password"
			
 
				+            />
			
 
				+            <div class="input-group-text border-0 bg-transparent px-1">
			
 
				+              <button type="button" class="btn shadow-none">
			
 
				+                <i class="bi bi-box-arrow-right text-body-secondary"></i>
			
 
				+              </button>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </form>
			
 
				+      </div>
			
 
				+
			
 
				+      <div class="help-block text-center">
			
 
				+        Enter your password to retrieve your session
			
 
				+      </div>
			
 
				+      <div class="text-center">
			
 
				+        <a href="login.html" class="text-decoration-none">Or sign in as a different user</a>
			
 
				+      </div>
			
 
				+      <div class="lockscreen-footer text-center">
			
 
				+        Copyright © 2014-{year} &nbsp;
			
 
				+        <b><a href="https://adminlte.io" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">AdminLTE.io</a></b> <br />
			
 
				+        All rights reserved
			
 
				+      </div>
			
 
				+    </div>
			
 
				+
			
 
				+    <Scripts />
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/examples/login-v2.astro
+++ b/template/src/html/pages/examples/login-v2.astro
@@ -0,0 +1,109 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "AdminLTE 4 | Login Page v2";
			
 
				+const path = "../../../dist";
			
 
				+const htmlPath = "..";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="login-page bg-body-secondary">
			
 
				+    <div class="login-box">
			
 
				+      <div class="card card-outline card-primary">
			
 
				+        <div class="card-header">
			
 
				+          <a href={htmlPath + "/index2.html"} class="link-dark text-center link-offset-2 link-opacity-100 link-opacity-50-hover">
			
 
				+            <h1 class="mb-0">
			
 
				+              <b>Admin</b>LTE
			
 
				+            </h1>
			
 
				+          </a>
			
 
				+        </div>
			
 
				+        <div class="card-body login-card-body">
			
 
				+          <p class="login-box-msg">Sign in to start your session</p>
			
 
				+
			
 
				+          <form action={htmlPath + "/index3.html"} method="post">
			
 
				+            <div class="input-group mb-1">
			
 
				+              <div class="form-floating">
			
 
				+                <input id="loginEmail" type="email" class="form-control" value="" placeholder="" />
			
 
				+                <label for="loginEmail">Email</label>
			
 
				+              </div>
			
 
				+              <div class="input-group-text">
			
 
				+                <span class="bi bi-envelope"></span>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <div class="input-group mb-1">
			
 
				+              <div class="form-floating">
			
 
				+                <input
			
 
				+                  id="loginPassword"
			
 
				+                  type="password"
			
 
				+                  class="form-control"
			
 
				+                  placeholder=""
			
 
				+                />
			
 
				+                <label for="loginPassword">Password</label>
			
 
				+              </div>
			
 
				+              <div class="input-group-text">
			
 
				+                <span class="bi bi-lock-fill"></span>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-8 d-inline-flex align-items-center">
			
 
				+                <div class="form-check">
			
 
				+                  <input
			
 
				+                    class="form-check-input"
			
 
				+                    type="checkbox"
			
 
				+                    value=""
			
 
				+                    id="flexCheckDefault"
			
 
				+                  />
			
 
				+                  <label class="form-check-label" for="flexCheckDefault">
			
 
				+                    Remember Me
			
 
				+                  </label>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+              <div class="col-4">
			
 
				+                <div class="d-grid gap-2">
			
 
				+                  <button type="submit" class="btn btn-primary">Sign In</button>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </form>
			
 
				+
			
 
				+          <div class="social-auth-links text-center mb-3 d-grid gap-2">
			
 
				+            <p>- OR -</p>
			
 
				+            <a href="#" class="btn btn-primary">
			
 
				+              <i class="bi bi-facebook me-2"></i> Sign in using Facebook
			
 
				+            </a>
			
 
				+            <a href="#" class="btn btn-danger">
			
 
				+              <i class="bi bi-google me-2"></i> Sign in using Google+
			
 
				+            </a>
			
 
				+          </div>
			
 
				+          <!-- /.social-auth-links -->
			
 
				+
			
 
				+          <p class="mb-1">
			
 
				+            <a href="forgot-password.html">I forgot my password</a>
			
 
				+          </p>
			
 
				+          <p class="mb-0">
			
 
				+            <a href="register.html" class="text-center">
			
 
				+              Register a new membership
			
 
				+            </a>
			
 
				+          </p>
			
 
				+        </div>
			
 
				+        <!-- /.login-card-body -->
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <!-- /.login-box -->
			
 
				+
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/examples/login.astro
+++ b/template/src/html/pages/examples/login.astro
@@ -0,0 +1,99 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "AdminLTE 4 | Login Page";
			
 
				+const path = "../../../dist";
			
 
				+const htmlPath = "..";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="login-page bg-body-secondary">
			
 
				+    <div class="login-box">
			
 
				+      <div class="login-logo">
			
 
				+        <a href={htmlPath + "/index2.html"}><b>Admin</b>LTE</a>
			
 
				+      </div>
			
 
				+      <!-- /.login-logo -->
			
 
				+      <div class="card">
			
 
				+        <div class="card-body login-card-body">
			
 
				+          <p class="login-box-msg">Sign in to start your session</p>
			
 
				+
			
 
				+          <form action={htmlPath + "/index3.html"} method="post">
			
 
				+            <div class="input-group mb-3">
			
 
				+              <input type="email" class="form-control" placeholder="Email" />
			
 
				+              <div class="input-group-text">
			
 
				+                <span class="bi bi-envelope"></span>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <div class="input-group mb-3">
			
 
				+              <input
			
 
				+                type="password"
			
 
				+                class="form-control"
			
 
				+                placeholder="Password"
			
 
				+              />
			
 
				+              <div class="input-group-text">
			
 
				+                <span class="bi bi-lock-fill"></span>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-8">
			
 
				+                <div class="form-check">
			
 
				+                  <input
			
 
				+                    class="form-check-input"
			
 
				+                    type="checkbox"
			
 
				+                    value=""
			
 
				+                    id="flexCheckDefault"
			
 
				+                  />
			
 
				+                  <label class="form-check-label" for="flexCheckDefault">
			
 
				+                    Remember Me
			
 
				+                  </label>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+              <div class="col-4">
			
 
				+                <div class="d-grid gap-2">
			
 
				+                  <button type="submit" class="btn btn-primary">Sign In</button>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </form>
			
 
				+
			
 
				+          <div class="social-auth-links text-center mb-3 d-grid gap-2">
			
 
				+            <p>- OR -</p>
			
 
				+            <a href="#" class="btn btn-primary">
			
 
				+              <i class="bi bi-facebook me-2"></i> Sign in using Facebook
			
 
				+            </a>
			
 
				+            <a href="#" class="btn btn-danger">
			
 
				+              <i class="bi bi-google me-2"></i> Sign in using Google+
			
 
				+            </a>
			
 
				+          </div>
			
 
				+          <!-- /.social-auth-links -->
			
 
				+
			
 
				+          <p class="mb-1">
			
 
				+            <a href="forgot-password.html">I forgot my password</a>
			
 
				+          </p>
			
 
				+          <p class="mb-0">
			
 
				+            <a href="register.html" class="text-center">
			
 
				+              Register a new membership
			
 
				+            </a>
			
 
				+          </p>
			
 
				+        </div>
			
 
				+        <!-- /.login-card-body -->
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <!-- /.login-box -->
			
 
				+
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/examples/register-v2.astro
+++ b/template/src/html/pages/examples/register-v2.astro
@@ -0,0 +1,116 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "AdminLTE 4 | Register Page v2";
			
 
				+const path = "../../../dist";
			
 
				+const htmlPath = "..";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="register-page bg-body-secondary">
			
 
				+    <div class="register-box">
			
 
				+      <!-- /.register-logo -->
			
 
				+      <div class="card card-outline card-primary">
			
 
				+        <div class="card-header">
			
 
				+          <a href={htmlPath + "/index2.html"} class="link-dark text-center link-offset-2 link-opacity-100 link-opacity-50-hover">
			
 
				+            <h1 class="mb-0">
			
 
				+              <b>Admin</b>LTE
			
 
				+            </h1>
			
 
				+          </a>
			
 
				+        </div>
			
 
				+        <div class="card-body register-card-body">
			
 
				+          <p class="register-box-msg">Register a new membership</p>
			
 
				+
			
 
				+          <form action={htmlPath + "/index3.html"} method="post">
			
 
				+            <div class="input-group mb-1">
			
 
				+              <div class="form-floating">
			
 
				+                <input id="registerFullName" type="text" class="form-control" placeholder="" />
			
 
				+                <label for="registerFullName">Full Name</label>
			
 
				+              </div>
			
 
				+              <div class="input-group-text">
			
 
				+                <span class="bi bi-person"></span>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <div class="input-group mb-1">
			
 
				+              <div class="form-floating">
			
 
				+                <input id="registerEmail" type="email" class="form-control" placeholder="" />
			
 
				+                <label for="registerEmail">Email</label>
			
 
				+              </div>
			
 
				+              <div class="input-group-text">
			
 
				+                <span class="bi bi-envelope"></span>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <div class="input-group mb-1">
			
 
				+              <div class="form-floating">
			
 
				+                <input
			
 
				+                  id="registerPassword"
			
 
				+                  type="password"
			
 
				+                  class="form-control"
			
 
				+                  placeholder=""
			
 
				+                />
			
 
				+                <label for="registerPassword">Password</label>
			
 
				+              </div>
			
 
				+              <div class="input-group-text">
			
 
				+                <span class="bi bi-lock-fill"></span>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-8 d-inline-flex align-items-center">
			
 
				+                <div class="form-check">
			
 
				+                  <input
			
 
				+                    class="form-check-input"
			
 
				+                    type="checkbox"
			
 
				+                    value=""
			
 
				+                    id="flexCheckDefault"
			
 
				+                  />
			
 
				+                  <label class="form-check-label" for="flexCheckDefault">
			
 
				+                    I agree to the <a href="#">terms</a>
			
 
				+                  </label>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+              <div class="col-4">
			
 
				+                <div class="d-grid gap-2">
			
 
				+                  <button type="submit" class="btn btn-primary">Sign In</button>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </form>
			
 
				+
			
 
				+          <div class="social-auth-links text-center mb-3 d-grid gap-2">
			
 
				+            <p>- OR -</p>
			
 
				+            <a href="#" class="btn btn-primary">
			
 
				+              <i class="bi bi-facebook me-2"></i> Sign in using Facebook
			
 
				+            </a>
			
 
				+            <a href="#" class="btn btn-danger">
			
 
				+              <i class="bi bi-google me-2"></i> Sign in using Google+
			
 
				+            </a>
			
 
				+          </div>
			
 
				+          <!-- /.social-auth-links -->
			
 
				+
			
 
				+          <p class="mb-0">
			
 
				+            <a href="login.html" class="link-primary text-center">
			
 
				+              I already have a membership
			
 
				+            </a>
			
 
				+          </p>
			
 
				+        </div>
			
 
				+        <!-- /.register-card-body -->
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <!-- /.register-box -->
			
 
				+
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/examples/register.astro
+++ b/template/src/html/pages/examples/register.astro
@@ -0,0 +1,102 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "AdminLTE 4 | Register Page";
			
 
				+const path = "../../../dist";
			
 
				+const htmlPath = "..";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="register-page bg-body-secondary">
			
 
				+    <div class="register-box">
			
 
				+      <div class="register-logo">
			
 
				+        <a href={htmlPath + "/index2.html"}><b>Admin</b>LTE</a>
			
 
				+      </div>
			
 
				+      <!-- /.register-logo -->
			
 
				+      <div class="card">
			
 
				+        <div class="card-body register-card-body">
			
 
				+          <p class="register-box-msg">Register a new membership</p>
			
 
				+
			
 
				+          <form action={htmlPath + "/index3.html"} method="post">
			
 
				+            <div class="input-group mb-3">
			
 
				+              <input type="text" class="form-control" placeholder="Full Name" />
			
 
				+              <div class="input-group-text">
			
 
				+                <span class="bi bi-person"></span>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <div class="input-group mb-3">
			
 
				+              <input type="email" class="form-control" placeholder="Email" />
			
 
				+              <div class="input-group-text">
			
 
				+                <span class="bi bi-envelope"></span>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <div class="input-group mb-3">
			
 
				+              <input
			
 
				+                type="password"
			
 
				+                class="form-control"
			
 
				+                placeholder="Password"
			
 
				+              />
			
 
				+              <div class="input-group-text">
			
 
				+                <span class="bi bi-lock-fill"></span>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-8">
			
 
				+                <div class="form-check">
			
 
				+                  <input
			
 
				+                    class="form-check-input"
			
 
				+                    type="checkbox"
			
 
				+                    value=""
			
 
				+                    id="flexCheckDefault"
			
 
				+                  />
			
 
				+                  <label class="form-check-label" for="flexCheckDefault">
			
 
				+                    I agree to the <a href="#">terms</a>
			
 
				+                  </label>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+              <div class="col-4">
			
 
				+                <div class="d-grid gap-2">
			
 
				+                  <button type="submit" class="btn btn-primary">Sign In</button>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </form>
			
 
				+
			
 
				+          <div class="social-auth-links text-center mb-3 d-grid gap-2">
			
 
				+            <p>- OR -</p>
			
 
				+            <a href="#" class="btn btn-primary">
			
 
				+              <i class="bi bi-facebook me-2"></i> Sign in using Facebook
			
 
				+            </a>
			
 
				+            <a href="#" class="btn btn-danger">
			
 
				+              <i class="bi bi-google me-2"></i> Sign in using Google+
			
 
				+            </a>
			
 
				+          </div>
			
 
				+          <!-- /.social-auth-links -->
			
 
				+
			
 
				+          <p class="mb-0">
			
 
				+            <a href="login.html" class="text-center">
			
 
				+              I already have a membership
			
 
				+            </a>
			
 
				+          </p>
			
 
				+        </div>
			
 
				+        <!-- /.register-card-body -->
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <!-- /.register-box -->
			
 
				+
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/forms/general.astro
+++ b/template/src/html/pages/forms/general.astro
@@ -0,0 +1,624 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "AdminLTE 4 | General Form Elements";
			
 
				+const path = "../../../dist";
			
 
				+const mainPage = "forms";
			
 
				+const page = "general";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">General Form</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    General Form
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row g-4">
			
 
				+              <!--begin::Col-->
			
 
				+              <div class="col-12">
			
 
				+                <div class="callout callout-info">
			
 
				+                  For detailed documentation of Form visit <a
			
 
				+                    href="https://getbootstrap.com/docs/5.3/forms/overview/"
			
 
				+                    target="_blank"
			
 
				+                    rel="noopener noreferrer"
			
 
				+                    class="callout-link"
			
 
				+                  >
			
 
				+                    Bootstrap Form
			
 
				+                  </a>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <!--end::Col-->
			
 
				+              <!--begin::Col-->
			
 
				+              <div class="col-md-6">
			
 
				+                <!--begin::Quick Example-->
			
 
				+                <div class="card card-primary card-outline mb-4">
			
 
				+                  <!--begin::Header-->
			
 
				+                  <div class="card-header">
			
 
				+                    <div class="card-title">Quick Example</div>
			
 
				+                  </div>
			
 
				+                  <!--end::Header-->
			
 
				+                  <!--begin::Form-->
			
 
				+                  <form>
			
 
				+                    <!--begin::Body-->
			
 
				+                    <div class="card-body">
			
 
				+                      <div class="mb-3">
			
 
				+                        <label for="exampleInputEmail1" class="form-label"
			
 
				+                          >Email address</label
			
 
				+                        >
			
 
				+                        <input
			
 
				+                          type="email"
			
 
				+                          class="form-control"
			
 
				+                          id="exampleInputEmail1"
			
 
				+                          aria-describedby="emailHelp"
			
 
				+                        />
			
 
				+                        <div id="emailHelp" class="form-text">
			
 
				+                          We'll never share your email with anyone else.
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <div class="mb-3">
			
 
				+                        <label for="exampleInputPassword1" class="form-label"
			
 
				+                          >Password</label
			
 
				+                        >
			
 
				+                        <input
			
 
				+                          type="password"
			
 
				+                          class="form-control"
			
 
				+                          id="exampleInputPassword1"
			
 
				+                        />
			
 
				+                      </div>
			
 
				+                      <div class="input-group mb-3">
			
 
				+                        <input
			
 
				+                          type="file"
			
 
				+                          class="form-control"
			
 
				+                          id="inputGroupFile02"
			
 
				+                        />
			
 
				+                        <label class="input-group-text" for="inputGroupFile02"
			
 
				+                          >Upload</label
			
 
				+                        >
			
 
				+                      </div>
			
 
				+                      <div class="mb-3 form-check">
			
 
				+                        <input
			
 
				+                          type="checkbox"
			
 
				+                          class="form-check-input"
			
 
				+                          id="exampleCheck1"
			
 
				+                        />
			
 
				+                        <label class="form-check-label" for="exampleCheck1"
			
 
				+                          >Check me out</label
			
 
				+                        >
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                    <!--end::Body-->
			
 
				+                    <!--begin::Footer-->
			
 
				+                    <div class="card-footer">
			
 
				+                      <button type="submit" class="btn btn-primary"
			
 
				+                        >Submit</button
			
 
				+                      >
			
 
				+                    </div>
			
 
				+                    <!--end::Footer-->
			
 
				+                  </form>
			
 
				+                  <!--end::Form-->
			
 
				+                </div>
			
 
				+                <!--end::Quick Example-->
			
 
				+                <!--begin::Input Group-->
			
 
				+                <div class="card card-success card-outline mb-4">
			
 
				+                  <!--begin::Header-->
			
 
				+                  <div class="card-header">
			
 
				+                    <div class="card-title">Input Group</div>
			
 
				+                  </div>
			
 
				+                  <!--end::Header-->
			
 
				+                  <!--begin::Body-->
			
 
				+                  <div class="card-body">
			
 
				+                    <div class="input-group mb-3">
			
 
				+                      <span class="input-group-text" id="basic-addon1">@</span>
			
 
				+                      <input
			
 
				+                        type="text"
			
 
				+                        class="form-control"
			
 
				+                        placeholder="Username"
			
 
				+                        aria-label="Username"
			
 
				+                        aria-describedby="basic-addon1"
			
 
				+                      />
			
 
				+                    </div>
			
 
				+
			
 
				+                    <div class="input-group mb-3">
			
 
				+                      <input
			
 
				+                        type="text"
			
 
				+                        class="form-control"
			
 
				+                        placeholder="Recipient's username"
			
 
				+                        aria-label="Recipient's username"
			
 
				+                        aria-describedby="basic-addon2"
			
 
				+                      />
			
 
				+                      <span class="input-group-text" id="basic-addon2"
			
 
				+                        >@example.com</span
			
 
				+                      >
			
 
				+                    </div>
			
 
				+
			
 
				+                    <div class="mb-3">
			
 
				+                      <label for="basic-url" class="form-label"
			
 
				+                        >Your vanity URL</label
			
 
				+                      >
			
 
				+                      <div class="input-group">
			
 
				+                        <span class="input-group-text" id="basic-addon3"
			
 
				+                          >https://example.com/users/</span
			
 
				+                        >
			
 
				+                        <input
			
 
				+                          type="text"
			
 
				+                          class="form-control"
			
 
				+                          id="basic-url"
			
 
				+                          aria-describedby="basic-addon3 basic-addon4"
			
 
				+                        />
			
 
				+                      </div>
			
 
				+                      <div class="form-text" id="basic-addon4">
			
 
				+                        Example help text goes outside the input group.
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+
			
 
				+                    <div class="input-group mb-3">
			
 
				+                      <span class="input-group-text">$</span>
			
 
				+                      <input
			
 
				+                        type="text"
			
 
				+                        class="form-control"
			
 
				+                        aria-label="Amount (to the nearest dollar)"
			
 
				+                      />
			
 
				+                      <span class="input-group-text">.00</span>
			
 
				+                    </div>
			
 
				+
			
 
				+                    <div class="input-group mb-3">
			
 
				+                      <input
			
 
				+                        type="text"
			
 
				+                        class="form-control"
			
 
				+                        placeholder="Username"
			
 
				+                        aria-label="Username"
			
 
				+                      />
			
 
				+                      <span class="input-group-text">@</span>
			
 
				+                      <input
			
 
				+                        type="text"
			
 
				+                        class="form-control"
			
 
				+                        placeholder="Server"
			
 
				+                        aria-label="Server"
			
 
				+                      />
			
 
				+                    </div>
			
 
				+
			
 
				+                    <div class="input-group">
			
 
				+                      <span class="input-group-text">With textarea</span>
			
 
				+                      <textarea class="form-control" aria-label="With textarea"
			
 
				+                      ></textarea>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <!--end::Body-->
			
 
				+                  <!--begin::Footer-->
			
 
				+                  <div class="card-footer">
			
 
				+                    <button type="submit" class="btn btn-success">Submit</button
			
 
				+                    >
			
 
				+                  </div>
			
 
				+                  <!--end::Footer-->
			
 
				+                </div>
			
 
				+                <!--end::Input Group-->
			
 
				+                <!--begin::Horizontal Form-->
			
 
				+                <div class="card card-warning card-outline mb-4">
			
 
				+                  <!--begin::Header-->
			
 
				+                  <div class="card-header">
			
 
				+                    <div class="card-title">Horizontal Form</div>
			
 
				+                  </div>
			
 
				+                  <!--end::Header-->
			
 
				+                  <!--begin::Form-->
			
 
				+                  <form>
			
 
				+                    <!--begin::Body-->
			
 
				+                    <div class="card-body">
			
 
				+                      <div class="row mb-3">
			
 
				+                        <label for="inputEmail3" class="col-sm-2 col-form-label"
			
 
				+                          >Email</label
			
 
				+                        >
			
 
				+                        <div class="col-sm-10">
			
 
				+                          <input
			
 
				+                            type="email"
			
 
				+                            class="form-control"
			
 
				+                            id="inputEmail3"
			
 
				+                          />
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <div class="row mb-3">
			
 
				+                        <label
			
 
				+                          for="inputPassword3"
			
 
				+                          class="col-sm-2 col-form-label">Password</label
			
 
				+                        >
			
 
				+                        <div class="col-sm-10">
			
 
				+                          <input
			
 
				+                            type="password"
			
 
				+                            class="form-control"
			
 
				+                            id="inputPassword3"
			
 
				+                          />
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <fieldset class="row mb-3">
			
 
				+                        <legend class="col-form-label col-sm-2 pt-0"
			
 
				+                          >Radios</legend
			
 
				+                        >
			
 
				+                        <div class="col-sm-10">
			
 
				+                          <div class="form-check">
			
 
				+                            <input
			
 
				+                              class="form-check-input"
			
 
				+                              type="radio"
			
 
				+                              name="gridRadios"
			
 
				+                              id="gridRadios1"
			
 
				+                              value="option1"
			
 
				+                              checked
			
 
				+                            />
			
 
				+                            <label class="form-check-label" for="gridRadios1">
			
 
				+                              First radio
			
 
				+                            </label>
			
 
				+                          </div>
			
 
				+                          <div class="form-check">
			
 
				+                            <input
			
 
				+                              class="form-check-input"
			
 
				+                              type="radio"
			
 
				+                              name="gridRadios"
			
 
				+                              id="gridRadios2"
			
 
				+                              value="option2"
			
 
				+                            />
			
 
				+                            <label class="form-check-label" for="gridRadios2">
			
 
				+                              Second radio
			
 
				+                            </label>
			
 
				+                          </div>
			
 
				+                          <div class="form-check disabled">
			
 
				+                            <input
			
 
				+                              class="form-check-input"
			
 
				+                              type="radio"
			
 
				+                              name="gridRadios"
			
 
				+                              id="gridRadios3"
			
 
				+                              value="option3"
			
 
				+                              disabled
			
 
				+                            />
			
 
				+                            <label class="form-check-label" for="gridRadios3">
			
 
				+                              Third disabled radio
			
 
				+                            </label>
			
 
				+                          </div>
			
 
				+                        </div>
			
 
				+                      </fieldset>
			
 
				+                      <div class="row mb-3">
			
 
				+                        <div class="col-sm-10 offset-sm-2">
			
 
				+                          <div class="form-check">
			
 
				+                            <input
			
 
				+                              class="form-check-input"
			
 
				+                              type="checkbox"
			
 
				+                              id="gridCheck1"
			
 
				+                            />
			
 
				+                            <label class="form-check-label" for="gridCheck1">
			
 
				+                              Example checkbox
			
 
				+                            </label>
			
 
				+                          </div>
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                    <!--end::Body-->
			
 
				+                    <!--begin::Footer-->
			
 
				+                    <div class="card-footer">
			
 
				+                      <button type="submit" class="btn btn-warning"
			
 
				+                        >Sign in</button
			
 
				+                      >
			
 
				+                      <button type="submit" class="btn float-end">Cancel</button
			
 
				+                      >
			
 
				+                    </div>
			
 
				+                    <!--end::Footer-->
			
 
				+                  </form>
			
 
				+                  <!--end::Form-->
			
 
				+                </div>
			
 
				+                <!--end::Horizontal Form-->
			
 
				+              </div>
			
 
				+              <!--end::Col-->
			
 
				+              <!--begin::Col-->
			
 
				+              <div class="col-md-6">
			
 
				+                <!--begin::Different Height-->
			
 
				+                <div class="card card-secondary card-outline mb-4">
			
 
				+                  <!--begin::Header-->
			
 
				+                  <div class="card-header">
			
 
				+                    <div class="card-title">Different Height</div>
			
 
				+                  </div>
			
 
				+                  <!--end::Header-->
			
 
				+                  <!--begin::Body-->
			
 
				+                  <div class="card-body">
			
 
				+                    <input
			
 
				+                      class="form-control form-control-lg"
			
 
				+                      type="text"
			
 
				+                      placeholder=".form-control-lg"
			
 
				+                      aria-label=".form-control-lg example"
			
 
				+                    />
			
 
				+                    <br />
			
 
				+                    <input
			
 
				+                      class="form-control"
			
 
				+                      type="text"
			
 
				+                      placeholder="Default input"
			
 
				+                      aria-label="default input example"
			
 
				+                    />
			
 
				+                    <br />
			
 
				+                    <input
			
 
				+                      class="form-control form-control-sm"
			
 
				+                      type="text"
			
 
				+                      placeholder=".form-control-sm"
			
 
				+                      aria-label=".form-control-sm example"
			
 
				+                    />
			
 
				+                  </div>
			
 
				+                  <!--end::Body-->
			
 
				+                </div>
			
 
				+                <!--end::Different Height-->
			
 
				+                <!--begin::Different Width-->
			
 
				+                <div class="card card-danger card-outline mb-4">
			
 
				+                  <!--begin::Header-->
			
 
				+                  <div class="card-header">
			
 
				+                    <div class="card-title">Different Width</div>
			
 
				+                  </div>
			
 
				+                  <!--end::Header-->
			
 
				+                  <!--begin::Body-->
			
 
				+                  <div class="card-body">
			
 
				+                    <!--begin::Row-->
			
 
				+                    <div class="row">
			
 
				+                      <!--begin::Col-->
			
 
				+                      <div class="col-3">
			
 
				+                        <input
			
 
				+                          type="text"
			
 
				+                          class="form-control"
			
 
				+                          placeholder=".col-3"
			
 
				+                        />
			
 
				+                      </div>
			
 
				+                      <!--end::Col-->
			
 
				+                      <!--begin::Col-->
			
 
				+                      <div class="col-4">
			
 
				+                        <input
			
 
				+                          type="text"
			
 
				+                          class="form-control"
			
 
				+                          placeholder=".col-4"
			
 
				+                        />
			
 
				+                      </div>
			
 
				+                      <!--end::Col-->
			
 
				+                      <!--begin::Col-->
			
 
				+                      <div class="col-5">
			
 
				+                        <input
			
 
				+                          type="text"
			
 
				+                          class="form-control"
			
 
				+                          placeholder=".col-5"
			
 
				+                        />
			
 
				+                      </div>
			
 
				+                      <!--end::Col-->
			
 
				+                    </div>
			
 
				+                    <!--end::Row-->
			
 
				+                  </div>
			
 
				+                  <!--end::Body-->
			
 
				+                </div>
			
 
				+                <!--end::Different Width-->
			
 
				+                <!--begin::Form Validation-->
			
 
				+                <div class="card card-info card-outline mb-4">
			
 
				+                  <!--begin::Header-->
			
 
				+                  <div class="card-header">
			
 
				+                    <div class="card-title">Form Validation</div>
			
 
				+                  </div>
			
 
				+                  <!--end::Header-->
			
 
				+                  <!--begin::Form-->
			
 
				+                  <form class="needs-validation" novalidate>
			
 
				+                    <!--begin::Body-->
			
 
				+                    <div class="card-body">
			
 
				+                      <!--begin::Row-->
			
 
				+                      <div class="row g-3">
			
 
				+                        <!--begin::Col-->
			
 
				+                        <div class="col-md-6">
			
 
				+                          <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>
			
 
				+                        <!--end::Col-->
			
 
				+                        <!--begin::Col-->
			
 
				+                        <div class="col-md-6">
			
 
				+                          <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>
			
 
				+                        <!--end::Col-->
			
 
				+                        <!--begin::Col-->
			
 
				+                        <div class="col-md-6">
			
 
				+                          <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>
			
 
				+                        <!--end::Col-->
			
 
				+                        <!--begin::Col-->
			
 
				+                        <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>
			
 
				+                        <!--end::Col-->
			
 
				+                        <!--begin::Col-->
			
 
				+                        <div class="col-md-6">
			
 
				+                          <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>
			
 
				+                        <!--end::Col-->
			
 
				+                        <!--begin::Col-->
			
 
				+                        <div class="col-md-6">
			
 
				+                          <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>
			
 
				+                        <!--end::Col-->
			
 
				+                        <!--begin::Col-->
			
 
				+                        <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>
			
 
				+                        <!--end::Col-->
			
 
				+                      </div>
			
 
				+                      <!--end::Row-->
			
 
				+                    </div>
			
 
				+                    <!--end::Body-->
			
 
				+                    <!--begin::Footer-->
			
 
				+                    <div class="card-footer">
			
 
				+                      <button class="btn btn-info" type="submit"
			
 
				+                        >Submit form</button
			
 
				+                      >
			
 
				+                    </div>
			
 
				+                    <!--end::Footer-->
			
 
				+                  </form>
			
 
				+                  <!--end::Form-->
			
 
				+                  <!--begin::JavaScript-->
			
 
				+                  <script is:inline>
			
 
				+                    // Example starter JavaScript for disabling form submissions if there are invalid fields
			
 
				+                    (() => {
			
 
				+                      "use strict";
			
 
				+
			
 
				+                      // Fetch all the forms we want to apply custom Bootstrap validation styles to
			
 
				+                      const forms =
			
 
				+                        document.querySelectorAll(".needs-validation");
			
 
				+
			
 
				+                      // Loop over them and prevent submission
			
 
				+                      Array.from(forms).forEach((form) => {
			
 
				+                        form.addEventListener(
			
 
				+                          "submit",
			
 
				+                          (event) => {
			
 
				+                            if (!form.checkValidity()) {
			
 
				+                              event.preventDefault();
			
 
				+                              event.stopPropagation();
			
 
				+                            }
			
 
				+
			
 
				+                            form.classList.add("was-validated");
			
 
				+                          },
			
 
				+                          false
			
 
				+                        );
			
 
				+                      });
			
 
				+                    })();
			
 
				+                  </script>
			
 
				+                  <!--end::JavaScript-->
			
 
				+                </div>
			
 
				+                <!--end::Form Validation-->
			
 
				+              </div>
			
 
				+              <!--end::Col-->
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/generate/theme.astro
+++ b/template/src/html/pages/generate/theme.astro
@@ -0,0 +1,479 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+import { convertPathToHtml } from "../../../utils/index.js";
			
 
				+
			
 
				+const title = "AdminLTE 4 | Theme Customize";
			
 
				+const path = "../../../dist";
			
 
				+const htmlPath = convertPathToHtml(path);
			
 
				+---
			
 
				+
			
 
				+<!doctype html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="sidebar-expand-lg bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <!--begin::Sidebar-->
			
 
				+      <aside class="app-sidebar bg-primary shadow" data-bs-theme="dark">
			
 
				+        <!--begin::Sidebar Brand-->
			
 
				+        <div class="sidebar-brand">
			
 
				+          <!--begin::Brand Link-->
			
 
				+          <a href={htmlPath + "/index.html"} class="brand-link">
			
 
				+            <!--begin::Brand Image-->
			
 
				+            <img
			
 
				+              src={path + "/assets/img/AdminLTELogo.png"}
			
 
				+              alt="AdminLTE Logo"
			
 
				+              class="brand-image opacity-75 shadow"
			
 
				+            />
			
 
				+            <!--end::Brand Image-->
			
 
				+            <!--begin::Brand Text-->
			
 
				+            <span class="brand-text fw-light">AdminLTE 4</span>
			
 
				+            <!--end::Brand Text-->
			
 
				+          </a>
			
 
				+          <!--end::Brand Link-->
			
 
				+        </div>
			
 
				+        <!--end::Sidebar Brand-->
			
 
				+
			
 
				+        <!--begin::Sidebar Wrapper-->
			
 
				+        <div class="sidebar-wrapper">
			
 
				+          <nav class="mt-2">
			
 
				+            <!--begin::Sidebar Menu-->
			
 
				+            <ul
			
 
				+              class="nav sidebar-menu flex-column"
			
 
				+              data-lte-toggle="treeview"
			
 
				+              role="menu"
			
 
				+              data-accordion="false"
			
 
				+            >
			
 
				+              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
			
 
				+              <li class="nav-item">
			
 
				+                <a href="#" class="nav-link">
			
 
				+                  <i class="nav-icon bi bi-circle-fill"></i>
			
 
				+                  <p>Level 1</p>
			
 
				+                </a>
			
 
				+              </li>
			
 
				+              <li class="nav-item">
			
 
				+                <a href="#" class="nav-link">
			
 
				+                  <i class="nav-icon bi bi-circle-fill"></i>
			
 
				+                  <p>
			
 
				+                    Level 1
			
 
				+                    <i class="nav-arrow bi bi-chevron-right"></i>
			
 
				+                  </p>
			
 
				+                </a>
			
 
				+                <ul class="nav nav-treeview">
			
 
				+                  <li class="nav-item">
			
 
				+                    <a href="#" class="nav-link">
			
 
				+                      <i class="nav-icon bi bi-circle"></i>
			
 
				+                      <p>Level 2</p>
			
 
				+                    </a>
			
 
				+                  </li>
			
 
				+                  <li class="nav-item">
			
 
				+                    <a href="#" class="nav-link">
			
 
				+                      <i class="nav-icon bi bi-circle"></i>
			
 
				+                      <p>
			
 
				+                        Level 2
			
 
				+                        <i class="nav-arrow bi bi-chevron-right"></i>
			
 
				+                      </p>
			
 
				+                    </a>
			
 
				+                    <ul class="nav nav-treeview">
			
 
				+                      <li class="nav-item">
			
 
				+                        <a href="#" class="nav-link">
			
 
				+                          <i class="nav-icon bi bi-record-circle-fill"></i>
			
 
				+                          <p>Level 3</p>
			
 
				+                        </a>
			
 
				+                      </li>
			
 
				+                      <li class="nav-item">
			
 
				+                        <a href="#" class="nav-link">
			
 
				+                          <i class="nav-icon bi bi-record-circle-fill"></i>
			
 
				+                          <p>Level 3</p>
			
 
				+                        </a>
			
 
				+                      </li>
			
 
				+                      <li class="nav-item">
			
 
				+                        <a href="#" class="nav-link">
			
 
				+                          <i class="nav-icon bi bi-record-circle-fill"></i>
			
 
				+                          <p>Level 3</p>
			
 
				+                        </a>
			
 
				+                      </li>
			
 
				+                    </ul>
			
 
				+                  </li>
			
 
				+                  <li class="nav-item">
			
 
				+                    <a href="#" class="nav-link">
			
 
				+                      <i class="nav-icon bi bi-circle"></i>
			
 
				+                      <p>Level 2</p>
			
 
				+                    </a>
			
 
				+                  </li>
			
 
				+                </ul>
			
 
				+              </li>
			
 
				+              <li class="nav-item">
			
 
				+                <a href="#" class="nav-link">
			
 
				+                  <i class="nav-icon bi bi-circle-fill"></i>
			
 
				+                  <p>Level 1</p>
			
 
				+                </a>
			
 
				+              </li>
			
 
				+            </ul>
			
 
				+            <!--end::Sidebar Menu-->
			
 
				+          </nav>
			
 
				+        </div>
			
 
				+        <!--end::Sidebar Wrapper-->
			
 
				+      </aside>
			
 
				+      <!--end::Sidebar-->
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <!--begin::Col-->
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">Theme Customize</h3>
			
 
				+              </div>
			
 
				+              <!--end::Col-->
			
 
				+              <!--begin::Col-->
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    Theme Customize
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+              <!--end::Col-->
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <!--begin::Col-->
			
 
				+              <div class="col-12">
			
 
				+                <!--begin::Card-->
			
 
				+                <div class="card">
			
 
				+                  <!--begin::Card Header-->
			
 
				+                  <div class="card-header">
			
 
				+                    <!--begin::Card Title-->
			
 
				+                    <h3 class="card-title">Sidebar Theme</h3>
			
 
				+                    <!--end::Card Title-->
			
 
				+
			
 
				+                    <!--begin::Card Toolbar-->
			
 
				+                    <div class="card-tools">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-collapse"
			
 
				+                      >
			
 
				+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
			
 
				+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
			
 
				+                      </button>
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-remove"
			
 
				+                        title="Remove"
			
 
				+                      >
			
 
				+                        <i class="bi bi-x-lg"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                    <!--end::Card Toolbar-->
			
 
				+                  </div>
			
 
				+                  <!--end::Card Header-->
			
 
				+                  <!--begin::Card Body-->
			
 
				+                  <div class="card-body">
			
 
				+                    <!--begin::Row-->
			
 
				+                    <div class="row">
			
 
				+                      <!--begin::Col-->
			
 
				+                      <div class="col-md-3">
			
 
				+                        <select
			
 
				+                          id="sidebar-color-modes"
			
 
				+                          class="form-select form-select-lg"
			
 
				+                          aria-label="Sidebar Color Mode Select"
			
 
				+                        >
			
 
				+                          <option value="">---Select---</option>
			
 
				+                          <option value="dark">Dark</option>
			
 
				+                          <option value="light">Light</option>
			
 
				+                        </select>
			
 
				+                      </div>
			
 
				+                      <!--end::Col-->
			
 
				+                      <!--begin::Col-->
			
 
				+                      <div class="col-md-3">
			
 
				+                        <select
			
 
				+                          id="sidebar-color"
			
 
				+                          class="form-select form-select-lg"
			
 
				+                          aria-label="Sidebar Color Select"
			
 
				+                        >
			
 
				+                          <option value="">---Select---</option>
			
 
				+                        </select>
			
 
				+                      </div>
			
 
				+                      <!--end::Col-->
			
 
				+                      <!--begin::Col-->
			
 
				+                      <div class="col-md-6">
			
 
				+                        <div id="sidebar-color-code" class="w-100"></div>
			
 
				+                      </div>
			
 
				+                      <!--end::Col-->
			
 
				+                    </div>
			
 
				+                    <!--end::Row-->
			
 
				+                  </div>
			
 
				+                  <!--end::Card Body-->
			
 
				+                  <!--begin::Card Footer-->
			
 
				+                  <div class="card-footer">
			
 
				+                    Check more color in
			
 
				+                    <a
			
 
				+                      href="https://getbootstrap.com/docs/5.3/utilities/background/"
			
 
				+                      target="_blank"
			
 
				+                      class="link-primary">Bootstrap Background Colors</a
			
 
				+                    >
			
 
				+                  </div>
			
 
				+                  <!--end::Card Footer-->
			
 
				+                </div>
			
 
				+                <!--end::Card-->
			
 
				+
			
 
				+                <!--begin::Card-->
			
 
				+                <div class="card mt-4">
			
 
				+                  <!--begin::Card Header-->
			
 
				+                  <div class="card-header">
			
 
				+                    <!--begin::Card Title-->
			
 
				+                    <h3 class="card-title">Navbar Theme</h3>
			
 
				+                    <!--end::Card Title-->
			
 
				+
			
 
				+                    <!--begin::Card Toolbar-->
			
 
				+                    <div class="card-tools">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-collapse"
			
 
				+                      >
			
 
				+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
			
 
				+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
			
 
				+                      </button>
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-remove"
			
 
				+                        title="Remove"
			
 
				+                      >
			
 
				+                        <i class="bi bi-x-lg"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                    <!--end::Card Toolbar-->
			
 
				+                  </div>
			
 
				+                  <!--end::Card Header-->
			
 
				+                  <!--begin::Card Body-->
			
 
				+                  <div class="card-body">
			
 
				+                    <!--begin::Row-->
			
 
				+                    <div class="row">
			
 
				+                      <!--begin::Col-->
			
 
				+                      <div class="col-md-3">
			
 
				+                        <select
			
 
				+                          id="navbar-color-modes"
			
 
				+                          class="form-select form-select-lg"
			
 
				+                          aria-label="Navbar Color Mode Select"
			
 
				+                        >
			
 
				+                          <option value="">---Select---</option>
			
 
				+                          <option value="dark">Dark</option>
			
 
				+                          <option value="light">Light</option>
			
 
				+                        </select>
			
 
				+                      </div>
			
 
				+                      <!--end::Col-->
			
 
				+                      <!--begin::Col-->
			
 
				+                      <div class="col-md-3">
			
 
				+                        <select
			
 
				+                          id="navbar-color"
			
 
				+                          class="form-select form-select-lg"
			
 
				+                          aria-label="Navbar Color Select"
			
 
				+                        >
			
 
				+                          <option value="">---Select---</option>
			
 
				+                        </select>
			
 
				+                      </div>
			
 
				+                      <!--end::Col-->
			
 
				+                      <!--begin::Col-->
			
 
				+                      <div class="col-md-6">
			
 
				+                        <div id="navbar-color-code" class="w-100"></div>
			
 
				+                      </div>
			
 
				+                      <!--end::Col-->
			
 
				+                    </div>
			
 
				+                    <!--end::Row-->
			
 
				+                  </div>
			
 
				+                  <!--end::Card Body-->
			
 
				+                  <!--begin::Card Footer-->
			
 
				+                  <div class="card-footer">
			
 
				+                    Check more color in
			
 
				+                    <a
			
 
				+                      href="https://getbootstrap.com/docs/5.3/utilities/background/"
			
 
				+                      target="_blank"
			
 
				+                      class="link-primary">Bootstrap Background Colors</a
			
 
				+                    >
			
 
				+                  </div>
			
 
				+                  <!--end::Card Footer-->
			
 
				+                </div>
			
 
				+                <!--end::Card-->
			
 
				+              </div>
			
 
				+              <!--end::Col-->
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+    <script is:inline>
			
 
				+      document.addEventListener("DOMContentLoaded", () => {
			
 
				+        const appSidebar = document.querySelector(".app-sidebar");
			
 
				+        const sidebarColorModes = document.querySelector(
			
 
				+          "#sidebar-color-modes",
			
 
				+        );
			
 
				+        const sidebarColor = document.querySelector("#sidebar-color");
			
 
				+        const sidebarColorCode = document.querySelector("#sidebar-color-code");
			
 
				+
			
 
				+        const themeBg = [
			
 
				+          "bg-primary",
			
 
				+          "bg-primary-subtle",
			
 
				+          "bg-secondary",
			
 
				+          "bg-secondary-subtle",
			
 
				+          "bg-success",
			
 
				+          "bg-success-subtle",
			
 
				+          "bg-danger",
			
 
				+          "bg-danger-subtle",
			
 
				+          "bg-warning",
			
 
				+          "bg-warning-subtle",
			
 
				+          "bg-info",
			
 
				+          "bg-info-subtle",
			
 
				+          "bg-light",
			
 
				+          "bg-light-subtle",
			
 
				+          "bg-dark",
			
 
				+          "bg-dark-subtle",
			
 
				+          "bg-body-secondary",
			
 
				+          "bg-body-tertiary",
			
 
				+          "bg-body",
			
 
				+          "bg-black",
			
 
				+          "bg-white",
			
 
				+          "bg-transparent",
			
 
				+        ];
			
 
				+
			
 
				+        // loop through each option themeBg array
			
 
				+        document.querySelector("#sidebar-color").innerHTML = themeBg.map(
			
 
				+          (bg) => {
			
 
				+            // return option element with value and text
			
 
				+            return `<option value="${bg}" class="text-${bg}">${bg}</option>`;
			
 
				+          },
			
 
				+        );
			
 
				+
			
 
				+        let sidebarColorMode = "";
			
 
				+        let sidebarBg = "";
			
 
				+
			
 
				+        function updateSidebar() {
			
 
				+          appSidebar.setAttribute("data-bs-theme", sidebarColorMode);
			
 
				+
			
 
				+          sidebarColorCode.innerHTML = `<pre><code class="language-html">&lt;aside class="app-sidebar ${sidebarBg}" data-bs-theme="${sidebarColorMode}"&gt;...&lt;/aside&gt;</code></pre>`;
			
 
				+        }
			
 
				+
			
 
				+        sidebarColorModes.addEventListener("input", (event) => {
			
 
				+          sidebarColorMode = event.target.value;
			
 
				+          updateSidebar();
			
 
				+        });
			
 
				+
			
 
				+        sidebarColor.addEventListener("input", (event) => {
			
 
				+          sidebarBg = event.target.value;
			
 
				+
			
 
				+          themeBg.forEach((className) => {
			
 
				+            appSidebar.classList.remove(className);
			
 
				+          });
			
 
				+
			
 
				+          if (themeBg.includes(sidebarBg)) {
			
 
				+            appSidebar.classList.add(sidebarBg);
			
 
				+          }
			
 
				+
			
 
				+          updateSidebar();
			
 
				+        });
			
 
				+      });
			
 
				+
			
 
				+      document.addEventListener("DOMContentLoaded", () => {
			
 
				+        const appNavbar = document.querySelector(".app-header");
			
 
				+        const navbarColorModes = document.querySelector("#navbar-color-modes");
			
 
				+        const navbarColor = document.querySelector("#navbar-color");
			
 
				+        const navbarColorCode = document.querySelector("#navbar-color-code");
			
 
				+
			
 
				+        const themeBg = [
			
 
				+          "bg-primary",
			
 
				+          "bg-primary-subtle",
			
 
				+          "bg-secondary",
			
 
				+          "bg-secondary-subtle",
			
 
				+          "bg-success",
			
 
				+          "bg-success-subtle",
			
 
				+          "bg-danger",
			
 
				+          "bg-danger-subtle",
			
 
				+          "bg-warning",
			
 
				+          "bg-warning-subtle",
			
 
				+          "bg-info",
			
 
				+          "bg-info-subtle",
			
 
				+          "bg-light",
			
 
				+          "bg-light-subtle",
			
 
				+          "bg-dark",
			
 
				+          "bg-dark-subtle",
			
 
				+          "bg-body-secondary",
			
 
				+          "bg-body-tertiary",
			
 
				+          "bg-body",
			
 
				+          "bg-black",
			
 
				+          "bg-white",
			
 
				+          "bg-transparent",
			
 
				+        ];
			
 
				+
			
 
				+        // loop through each option themeBg array
			
 
				+        document.querySelector("#navbar-color").innerHTML = themeBg.map(
			
 
				+          (bg) => {
			
 
				+            // return option element with value and text
			
 
				+            return `<option value="${bg}" class="text-${bg}">${bg}</option>`;
			
 
				+          },
			
 
				+        );
			
 
				+
			
 
				+        let navbarColorMode = "";
			
 
				+        let navbarBg = "";
			
 
				+
			
 
				+        function updateNavbar() {
			
 
				+          appNavbar.setAttribute("data-bs-theme", navbarColorMode);
			
 
				+          navbarColorCode.innerHTML = `<pre><code class="language-html">&lt;nav class="app-header navbar navbar-expand ${navbarBg}" data-bs-theme="${navbarColorMode}"&gt;...&lt;/nav&gt;</code></pre>`;
			
 
				+        }
			
 
				+
			
 
				+        navbarColorModes.addEventListener("input", (event) => {
			
 
				+          navbarColorMode = event.target.value;
			
 
				+          updateNavbar();
			
 
				+        });
			
 
				+
			
 
				+        navbarColor.addEventListener("input", (event) => {
			
 
				+          navbarBg = event.target.value;
			
 
				+
			
 
				+          themeBg.forEach((className) => {
			
 
				+            appNavbar.classList.remove(className);
			
 
				+          });
			
 
				+
			
 
				+          if (themeBg.includes(navbarBg)) {
			
 
				+            appNavbar.classList.add(navbarBg);
			
 
				+          }
			
 
				+
			
 
				+          updateNavbar();
			
 
				+        });
			
 
				+      });
			
 
				+    </script>
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/index.astro
+++ b/template/src/html/pages/index.astro
@@ -0,0 +1,799 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "AdminLTE v4 | Dashboard";
			
 
				+const path = "../../dist";
			
 
				+const mainPage = "dashboard";
			
 
				+const page = "index";
			
 
				+---
			
 
				+
			
 
				+<!doctype html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+
			
 
				+    <!-- apexcharts -->
			
 
				+    <link
			
 
				+      rel="stylesheet"
			
 
				+      href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css"
			
 
				+      integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0="
			
 
				+      crossorigin="anonymous"
			
 
				+    />
			
 
				+
			
 
				+    <!-- jsvectormap -->
			
 
				+    <link
			
 
				+      rel="stylesheet"
			
 
				+      href="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/css/jsvectormap.min.css"
			
 
				+      integrity="sha256-+uGLJmmTKOqBr+2E6KDYs/NRsHxSkONXFHUL0fy2O/4="
			
 
				+      crossorigin="anonymous"
			
 
				+    />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">Dashboard</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    Dashboard
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <!--begin::Col-->
			
 
				+              <div class="col-lg-3 col-6">
			
 
				+                <!--begin::Small Box Widget 1-->
			
 
				+                <div class="small-box text-bg-primary">
			
 
				+                  <div class="inner">
			
 
				+                    <h3>150</h3>
			
 
				+
			
 
				+                    <p>New Orders</p>
			
 
				+                  </div>
			
 
				+                  <svg
			
 
				+                    class="small-box-icon"
			
 
				+                    fill="currentColor"
			
 
				+                    viewBox="0 0 24 24"
			
 
				+                    xmlns="http://www.w3.org/2000/svg"
			
 
				+                    aria-hidden="true"
			
 
				+                  >
			
 
				+                    <path
			
 
				+                      d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
			
 
				+                    ></path>
			
 
				+                  </svg>
			
 
				+                  <a
			
 
				+                    href="#"
			
 
				+                    class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"
			
 
				+                  >
			
 
				+                    More info <i class="bi bi-link-45deg"></i>
			
 
				+                  </a>
			
 
				+                </div>
			
 
				+                <!--end::Small Box Widget 1-->
			
 
				+              </div>
			
 
				+              <!--end::Col-->
			
 
				+              <div class="col-lg-3 col-6">
			
 
				+                <!--begin::Small Box Widget 2-->
			
 
				+                <div class="small-box text-bg-success">
			
 
				+                  <div class="inner">
			
 
				+                    <h3>53<sup class="fs-5">%</sup></h3>
			
 
				+
			
 
				+                    <p>Bounce Rate</p>
			
 
				+                  </div>
			
 
				+                  <svg
			
 
				+                    class="small-box-icon"
			
 
				+                    fill="currentColor"
			
 
				+                    viewBox="0 0 24 24"
			
 
				+                    xmlns="http://www.w3.org/2000/svg"
			
 
				+                    aria-hidden="true"
			
 
				+                  >
			
 
				+                    <path
			
 
				+                      d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"
			
 
				+                    ></path>
			
 
				+                  </svg>
			
 
				+                  <a
			
 
				+                    href="#"
			
 
				+                    class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"
			
 
				+                  >
			
 
				+                    More info <i class="bi bi-link-45deg"></i>
			
 
				+                  </a>
			
 
				+                </div>
			
 
				+                <!--end::Small Box Widget 2-->
			
 
				+              </div>
			
 
				+              <!--end::Col-->
			
 
				+              <div class="col-lg-3 col-6">
			
 
				+                <!--begin::Small Box Widget 3-->
			
 
				+                <div class="small-box text-bg-warning">
			
 
				+                  <div class="inner">
			
 
				+                    <h3>44</h3>
			
 
				+
			
 
				+                    <p>User Registrations</p>
			
 
				+                  </div>
			
 
				+                  <svg
			
 
				+                    class="small-box-icon"
			
 
				+                    fill="currentColor"
			
 
				+                    viewBox="0 0 24 24"
			
 
				+                    xmlns="http://www.w3.org/2000/svg"
			
 
				+                    aria-hidden="true"
			
 
				+                  >
			
 
				+                    <path
			
 
				+                      d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"
			
 
				+                    ></path>
			
 
				+                  </svg>
			
 
				+                  <a
			
 
				+                    href="#"
			
 
				+                    class="small-box-footer link-dark link-underline-opacity-0 link-underline-opacity-50-hover"
			
 
				+                  >
			
 
				+                    More info <i class="bi bi-link-45deg"></i>
			
 
				+                  </a>
			
 
				+                </div>
			
 
				+                <!--end::Small Box Widget 3-->
			
 
				+              </div>
			
 
				+              <!--end::Col-->
			
 
				+              <div class="col-lg-3 col-6">
			
 
				+                <!--begin::Small Box Widget 4-->
			
 
				+                <div class="small-box text-bg-danger">
			
 
				+                  <div class="inner">
			
 
				+                    <h3>65</h3>
			
 
				+
			
 
				+                    <p>Unique Visitors</p>
			
 
				+                  </div>
			
 
				+                  <svg
			
 
				+                    class="small-box-icon"
			
 
				+                    fill="currentColor"
			
 
				+                    viewBox="0 0 24 24"
			
 
				+                    xmlns="http://www.w3.org/2000/svg"
			
 
				+                    aria-hidden="true"
			
 
				+                  >
			
 
				+                    <path
			
 
				+                      clip-rule="evenodd"
			
 
				+                      fill-rule="evenodd"
			
 
				+                      d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"
			
 
				+                    ></path>
			
 
				+                    <path
			
 
				+                      clip-rule="evenodd"
			
 
				+                      fill-rule="evenodd"
			
 
				+                      d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
			
 
				+                    ></path>
			
 
				+                  </svg>
			
 
				+                  <a
			
 
				+                    href="#"
			
 
				+                    class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"
			
 
				+                  >
			
 
				+                    More info <i class="bi bi-link-45deg"></i>
			
 
				+                  </a>
			
 
				+                </div>
			
 
				+                <!--end::Small Box Widget 4-->
			
 
				+              </div>
			
 
				+              <!--end::Col-->
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <!-- Start col -->
			
 
				+              <div class="col-lg-7 connectedSortable">
			
 
				+                <div class="card mb-4">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Sales Value</h3>
			
 
				+                  </div>
			
 
				+
			
 
				+                  <div class="card-body">
			
 
				+                    <div id="revenue-chart"></div>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+
			
 
				+                <!-- DIRECT CHAT -->
			
 
				+                <div class="card direct-chat direct-chat-primary mb-4">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Direct Chat</h3>
			
 
				+
			
 
				+                    <div class="card-tools">
			
 
				+                      <span
			
 
				+                        title="3 New Messages"
			
 
				+                        class="badge text-bg-primary"
			
 
				+                      >
			
 
				+                        3
			
 
				+                      </span>
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-collapse"
			
 
				+                      >
			
 
				+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
			
 
				+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
			
 
				+                      </button>
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        title="Contacts"
			
 
				+                        data-lte-toggle="chat-pane"
			
 
				+                      >
			
 
				+                        <i class="bi bi-chat-text-fill"></i>
			
 
				+                      </button>
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-remove"
			
 
				+                      >
			
 
				+                        <i class="bi bi-x-lg"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <!-- /.card-header -->
			
 
				+                  <div class="card-body">
			
 
				+                    <!-- Conversations are loaded here -->
			
 
				+                    <div class="direct-chat-messages">
			
 
				+                      <!-- Message. Default to the start -->
			
 
				+                      <div class="direct-chat-msg">
			
 
				+                        <div class="direct-chat-infos clearfix">
			
 
				+                          <span class="direct-chat-name float-start">
			
 
				+                            Hadi Shaikh
			
 
				+                          </span>
			
 
				+                          <span class="direct-chat-timestamp float-end">
			
 
				+                            23 Jan 2:00 pm
			
 
				+                          </span>
			
 
				+                        </div>
			
 
				+                        <!-- /.direct-chat-infos -->
			
 
				+                        <img
			
 
				+                          class="direct-chat-img"
			
 
				+                          src={path + "/assets/img/user1-128x128.jpg"}
			
 
				+                          alt="message user image"
			
 
				+                        />
			
 
				+                        <!-- /.direct-chat-img -->
			
 
				+                        <div class="direct-chat-text">
			
 
				+                          Is this template really for free? That's unbelievable!
			
 
				+                        </div>
			
 
				+                        <!-- /.direct-chat-text -->
			
 
				+                      </div>
			
 
				+                      <!-- /.direct-chat-msg -->
			
 
				+
			
 
				+                      <!-- Message to the end -->
			
 
				+                      <div class="direct-chat-msg end">
			
 
				+                        <div class="direct-chat-infos clearfix">
			
 
				+                          <span class="direct-chat-name float-end">
			
 
				+                            Sarah Bullock
			
 
				+                          </span>
			
 
				+                          <span class="direct-chat-timestamp float-start">
			
 
				+                            23 Jan 2:05 pm
			
 
				+                          </span>
			
 
				+                        </div>
			
 
				+                        <!-- /.direct-chat-infos -->
			
 
				+                        <img
			
 
				+                          class="direct-chat-img"
			
 
				+                          src={path + "/assets/img/user3-128x128.jpg"}
			
 
				+                          alt="message user image"
			
 
				+                        />
			
 
				+                        <!-- /.direct-chat-img -->
			
 
				+                        <div class="direct-chat-text">
			
 
				+                          You better believe it!
			
 
				+                        </div>
			
 
				+                        <!-- /.direct-chat-text -->
			
 
				+                      </div>
			
 
				+                      <!-- /.direct-chat-msg -->
			
 
				+
			
 
				+                      <!-- Message. Default to the start -->
			
 
				+                      <div class="direct-chat-msg">
			
 
				+                        <div class="direct-chat-infos clearfix">
			
 
				+                          <span class="direct-chat-name float-start">
			
 
				+                            Hadi Shaikh
			
 
				+                          </span>
			
 
				+                          <span class="direct-chat-timestamp float-end">
			
 
				+                            23 Jan 5:37 pm
			
 
				+                          </span>
			
 
				+                        </div>
			
 
				+                        <!-- /.direct-chat-infos -->
			
 
				+                        <img
			
 
				+                          class="direct-chat-img"
			
 
				+                          src={path + "/assets/img/user1-128x128.jpg"}
			
 
				+                          alt="message user image"
			
 
				+                        />
			
 
				+                        <!-- /.direct-chat-img -->
			
 
				+                        <div class="direct-chat-text">
			
 
				+                          Working with AdminLTE on a great new app! Wanna join?
			
 
				+                        </div>
			
 
				+                        <!-- /.direct-chat-text -->
			
 
				+                      </div>
			
 
				+                      <!-- /.direct-chat-msg -->
			
 
				+
			
 
				+                      <!-- Message to the end -->
			
 
				+                      <div class="direct-chat-msg end">
			
 
				+                        <div class="direct-chat-infos clearfix">
			
 
				+                          <span class="direct-chat-name float-end">
			
 
				+                            Sarah Bullock
			
 
				+                          </span>
			
 
				+                          <span class="direct-chat-timestamp float-start">
			
 
				+                            23 Jan 6:10 pm
			
 
				+                          </span>
			
 
				+                        </div>
			
 
				+                        <!-- /.direct-chat-infos -->
			
 
				+                        <img
			
 
				+                          class="direct-chat-img"
			
 
				+                          src={path + "/assets/img/user3-128x128.jpg"}
			
 
				+                          alt="message user image"
			
 
				+                        />
			
 
				+                        <!-- /.direct-chat-img -->
			
 
				+                        <div class="direct-chat-text">I would love to.</div>
			
 
				+                        <!-- /.direct-chat-text -->
			
 
				+                      </div>
			
 
				+                      <!-- /.direct-chat-msg -->
			
 
				+                    </div>
			
 
				+                    <!-- /.direct-chat-messages-->
			
 
				+
			
 
				+                    <!-- Contacts are loaded here -->
			
 
				+                    <div class="direct-chat-contacts">
			
 
				+                      <ul class="contacts-list">
			
 
				+                        <li>
			
 
				+                          <a href="#">
			
 
				+                            <img
			
 
				+                              class="contacts-list-img"
			
 
				+                              src={path + "/assets/img/user1-128x128.jpg"}
			
 
				+                              alt="User Avatar"
			
 
				+                            />
			
 
				+
			
 
				+                            <div class="contacts-list-info">
			
 
				+                              <span class="contacts-list-name">
			
 
				+                                Count Dracula
			
 
				+                                <small class="contacts-list-date float-end">
			
 
				+                                  2/28/2023
			
 
				+                                </small>
			
 
				+                              </span>
			
 
				+                              <span class="contacts-list-msg">
			
 
				+                                How have you been? I was...
			
 
				+                              </span>
			
 
				+                            </div>
			
 
				+                            <!-- /.contacts-list-info -->
			
 
				+                          </a>
			
 
				+                        </li>
			
 
				+                        <!-- End Contact Item -->
			
 
				+                        <li>
			
 
				+                          <a href="#">
			
 
				+                            <img
			
 
				+                              class="contacts-list-img"
			
 
				+                              src={path + "/assets/img/user7-128x128.jpg"}
			
 
				+                              alt="User Avatar"
			
 
				+                            />
			
 
				+
			
 
				+                            <div class="contacts-list-info">
			
 
				+                              <span class="contacts-list-name">
			
 
				+                                Sarah Doe
			
 
				+                                <small class="contacts-list-date float-end">
			
 
				+                                  2/23/2023
			
 
				+                                </small>
			
 
				+                              </span>
			
 
				+                              <span class="contacts-list-msg">
			
 
				+                                I will be waiting for...
			
 
				+                              </span>
			
 
				+                            </div>
			
 
				+                            <!-- /.contacts-list-info -->
			
 
				+                          </a>
			
 
				+                        </li>
			
 
				+                        <!-- End Contact Item -->
			
 
				+                        <li>
			
 
				+                          <a href="#">
			
 
				+                            <img
			
 
				+                              class="contacts-list-img"
			
 
				+                              src={path + "/assets/img/user3-128x128.jpg"}
			
 
				+                              alt="User Avatar"
			
 
				+                            />
			
 
				+
			
 
				+                            <div class="contacts-list-info">
			
 
				+                              <span class="contacts-list-name">
			
 
				+                                Nadia Jolie
			
 
				+                                <small class="contacts-list-date float-end">
			
 
				+                                  2/20/2023
			
 
				+                                </small>
			
 
				+                              </span>
			
 
				+                              <span class="contacts-list-msg">
			
 
				+                                I'll call you back at...
			
 
				+                              </span>
			
 
				+                            </div>
			
 
				+                            <!-- /.contacts-list-info -->
			
 
				+                          </a>
			
 
				+                        </li>
			
 
				+                        <!-- End Contact Item -->
			
 
				+                        <li>
			
 
				+                          <a href="#">
			
 
				+                            <img
			
 
				+                              class="contacts-list-img"
			
 
				+                              src={path + "/assets/img/user5-128x128.jpg"}
			
 
				+                              alt="User Avatar"
			
 
				+                            />
			
 
				+
			
 
				+                            <div class="contacts-list-info">
			
 
				+                              <span class="contacts-list-name">
			
 
				+                                Nora S. Vans
			
 
				+                                <small class="contacts-list-date float-end">
			
 
				+                                  2/10/2023
			
 
				+                                </small>
			
 
				+                              </span>
			
 
				+                              <span class="contacts-list-msg">
			
 
				+                                Where is your new...
			
 
				+                              </span>
			
 
				+                            </div>
			
 
				+                            <!-- /.contacts-list-info -->
			
 
				+                          </a>
			
 
				+                        </li>
			
 
				+                        <!-- End Contact Item -->
			
 
				+                        <li>
			
 
				+                          <a href="#">
			
 
				+                            <img
			
 
				+                              class="contacts-list-img"
			
 
				+                              src={path + "/assets/img/user6-128x128.jpg"}
			
 
				+                              alt="User Avatar"
			
 
				+                            />
			
 
				+
			
 
				+                            <div class="contacts-list-info">
			
 
				+                              <span class="contacts-list-name">
			
 
				+                                John K.
			
 
				+                                <small class="contacts-list-date float-end">
			
 
				+                                  1/27/2023
			
 
				+                                </small>
			
 
				+                              </span>
			
 
				+                              <span class="contacts-list-msg">
			
 
				+                                Can I take a look at...
			
 
				+                              </span>
			
 
				+                            </div>
			
 
				+                            <!-- /.contacts-list-info -->
			
 
				+                          </a>
			
 
				+                        </li>
			
 
				+                        <!-- End Contact Item -->
			
 
				+                        <li>
			
 
				+                          <a href="#">
			
 
				+                            <img
			
 
				+                              class="contacts-list-img"
			
 
				+                              src={path + "/assets/img/user8-128x128.jpg"}
			
 
				+                              alt="User Avatar"
			
 
				+                            />
			
 
				+
			
 
				+                            <div class="contacts-list-info">
			
 
				+                              <span class="contacts-list-name">
			
 
				+                                Kenneth M.
			
 
				+                                <small class="contacts-list-date float-end">
			
 
				+                                  1/4/2023
			
 
				+                                </small>
			
 
				+                              </span>
			
 
				+                              <span class="contacts-list-msg">
			
 
				+                                Never mind I found...
			
 
				+                              </span>
			
 
				+                            </div>
			
 
				+                            <!-- /.contacts-list-info -->
			
 
				+                          </a>
			
 
				+                        </li>
			
 
				+                        <!-- End Contact Item -->
			
 
				+                      </ul>
			
 
				+                      <!-- /.contacts-list -->
			
 
				+                    </div>
			
 
				+                    <!-- /.direct-chat-pane -->
			
 
				+                  </div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                  <div class="card-footer">
			
 
				+                    <form action="#" method="post">
			
 
				+                      <div class="input-group">
			
 
				+                        <input
			
 
				+                          type="text"
			
 
				+                          name="message"
			
 
				+                          placeholder="Type Message ..."
			
 
				+                          class="form-control"
			
 
				+                        />
			
 
				+                        <span class="input-group-append">
			
 
				+                          <button type="button" class="btn btn-primary">
			
 
				+                            Send
			
 
				+                          </button>
			
 
				+                        </span>
			
 
				+                      </div>
			
 
				+                    </form>
			
 
				+                  </div>
			
 
				+                  <!-- /.card-footer-->
			
 
				+                </div>
			
 
				+                <!-- /.direct-chat -->
			
 
				+              </div>
			
 
				+              <!-- /.Start col -->
			
 
				+
			
 
				+              <!-- Start col -->
			
 
				+              <div class="col-lg-5 connectedSortable">
			
 
				+                <div
			
 
				+                  class="card text-white bg-primary bg-gradient border-primary mb-4"
			
 
				+                >
			
 
				+                  <div class="card-header border-0">
			
 
				+                    <h3 class="card-title">Sales Value</h3>
			
 
				+                    <div class="card-tools">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-primary btn-sm"
			
 
				+                        data-lte-toggle="card-collapse"
			
 
				+                      >
			
 
				+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
			
 
				+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <div class="card-body">
			
 
				+                    <div id="world-map" style="height: 220px"></div>
			
 
				+                  </div>
			
 
				+                  <div class="card-footer border-0">
			
 
				+                    <!--begin::Row-->
			
 
				+                    <div class="row">
			
 
				+                      <div class="col-4 text-center">
			
 
				+                        <div id="sparkline-1" class="text-dark"></div>
			
 
				+                        <div class="text-white">Visitors</div>
			
 
				+                      </div>
			
 
				+                      <div class="col-4 text-center">
			
 
				+                        <div id="sparkline-2" class="text-dark"></div>
			
 
				+                        <div class="text-white">Online</div>
			
 
				+                      </div>
			
 
				+                      <div class="col-4 text-center">
			
 
				+                        <div id="sparkline-3" class="text-dark"></div>
			
 
				+                        <div class="text-white">Sales</div>
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                    <!--end::Row-->
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <!-- /.Start col -->
			
 
				+            </div>
			
 
				+            <!-- /.row (main row) -->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+
			
 
				+    <!-- OPTIONAL SCRIPTS -->
			
 
				+
			
 
				+    <!-- sortablejs -->
			
 
				+    <script
			
 
				+      src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"
			
 
				+      integrity="sha256-ipiJrswvAR4VAx/th+6zWsdeYmVae0iJuiR+6OqHJHQ="
			
 
				+      crossorigin="anonymous"></script>
			
 
				+
			
 
				+    <!-- sortablejs -->
			
 
				+    <script is:inline>
			
 
				+      const connectedSortables =
			
 
				+        document.querySelectorAll(".connectedSortable");
			
 
				+      connectedSortables.forEach((connectedSortable) => {
			
 
				+        let sortable = new Sortable(connectedSortable, {
			
 
				+          group: "shared",
			
 
				+          handle: ".card-header",
			
 
				+        });
			
 
				+      });
			
 
				+
			
 
				+      const cardHeaders = document.querySelectorAll(
			
 
				+        ".connectedSortable .card-header",
			
 
				+      );
			
 
				+      cardHeaders.forEach((cardHeader) => {
			
 
				+        cardHeader.style.cursor = "move";
			
 
				+      });
			
 
				+    </script>
			
 
				+
			
 
				+    <!-- apexcharts -->
			
 
				+    <script
			
 
				+      src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
			
 
				+      integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
			
 
				+      crossorigin="anonymous"></script>
			
 
				+
			
 
				+    <!-- ChartJS -->
			
 
				+    <script is:inline>
			
 
				+      // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
			
 
				+      // IT'S ALL JUST JUNK FOR DEMO
			
 
				+      // ++++++++++++++++++++++++++++++++++++++++++
			
 
				+
			
 
				+      const sales_chart_options = {
			
 
				+        series: [
			
 
				+          {
			
 
				+            name: "Digital Goods",
			
 
				+            data: [28, 48, 40, 19, 86, 27, 90],
			
 
				+          },
			
 
				+          {
			
 
				+            name: "Electronics",
			
 
				+            data: [65, 59, 80, 81, 56, 55, 40],
			
 
				+          },
			
 
				+        ],
			
 
				+        chart: {
			
 
				+          height: 300,
			
 
				+          type: "area",
			
 
				+          toolbar: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+        },
			
 
				+        legend: {
			
 
				+          show: false,
			
 
				+        },
			
 
				+        colors: ["#0d6efd", "#20c997"],
			
 
				+        dataLabels: {
			
 
				+          enabled: false,
			
 
				+        },
			
 
				+        stroke: {
			
 
				+          curve: "smooth",
			
 
				+        },
			
 
				+        xaxis: {
			
 
				+          type: "datetime",
			
 
				+          categories: [
			
 
				+            "2023-01-01",
			
 
				+            "2023-02-01",
			
 
				+            "2023-03-01",
			
 
				+            "2023-04-01",
			
 
				+            "2023-05-01",
			
 
				+            "2023-06-01",
			
 
				+            "2023-07-01",
			
 
				+          ],
			
 
				+        },
			
 
				+        tooltip: {
			
 
				+          x: {
			
 
				+            format: "MMMM yyyy",
			
 
				+          },
			
 
				+        },
			
 
				+      };
			
 
				+
			
 
				+      const sales_chart = new ApexCharts(
			
 
				+        document.querySelector("#revenue-chart"),
			
 
				+        sales_chart_options,
			
 
				+      );
			
 
				+      sales_chart.render();
			
 
				+    </script>
			
 
				+
			
 
				+    <!-- jsvectormap -->
			
 
				+    <script
			
 
				+      src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/js/jsvectormap.min.js"
			
 
				+      integrity="sha256-/t1nN2956BT869E6H4V1dnt0X5pAQHPytli+1nTZm2Y="
			
 
				+      crossorigin="anonymous"></script>
			
 
				+    <script
			
 
				+      src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/maps/world.js"
			
 
				+      integrity="sha256-XPpPaZlU8S/HWf7FZLAncLg2SAkP8ScUTII89x9D3lY="
			
 
				+      crossorigin="anonymous"></script>
			
 
				+
			
 
				+    <!-- jsvectormap -->
			
 
				+    <script is:inline>
			
 
				+      const visitorsData = {
			
 
				+        US: 398, // USA
			
 
				+        SA: 400, // Saudi Arabia
			
 
				+        CA: 1000, // Canada
			
 
				+        DE: 500, // Germany
			
 
				+        FR: 760, // France
			
 
				+        CN: 300, // China
			
 
				+        AU: 700, // Australia
			
 
				+        BR: 600, // Brazil
			
 
				+        IN: 800, // India
			
 
				+        GB: 320, // Great Britain
			
 
				+        RU: 3000, // Russia
			
 
				+      };
			
 
				+
			
 
				+      // World map by jsVectorMap
			
 
				+      const map = new jsVectorMap({
			
 
				+        selector: "#world-map",
			
 
				+        map: "world",
			
 
				+      });
			
 
				+
			
 
				+      // Sparkline charts
			
 
				+      const option_sparkline1 = {
			
 
				+        series: [
			
 
				+          {
			
 
				+            data: [1000, 1200, 920, 927, 931, 1027, 819, 930, 1021],
			
 
				+          },
			
 
				+        ],
			
 
				+        chart: {
			
 
				+          type: "area",
			
 
				+          height: 50,
			
 
				+          sparkline: {
			
 
				+            enabled: true,
			
 
				+          },
			
 
				+        },
			
 
				+        stroke: {
			
 
				+          curve: "straight",
			
 
				+        },
			
 
				+        fill: {
			
 
				+          opacity: 0.3,
			
 
				+        },
			
 
				+        yaxis: {
			
 
				+          min: 0,
			
 
				+        },
			
 
				+        colors: ["#DCE6EC"],
			
 
				+      };
			
 
				+
			
 
				+      const sparkline1 = new ApexCharts(
			
 
				+        document.querySelector("#sparkline-1"),
			
 
				+        option_sparkline1,
			
 
				+      );
			
 
				+      sparkline1.render();
			
 
				+
			
 
				+      const option_sparkline2 = {
			
 
				+        series: [
			
 
				+          {
			
 
				+            data: [515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921],
			
 
				+          },
			
 
				+        ],
			
 
				+        chart: {
			
 
				+          type: "area",
			
 
				+          height: 50,
			
 
				+          sparkline: {
			
 
				+            enabled: true,
			
 
				+          },
			
 
				+        },
			
 
				+        stroke: {
			
 
				+          curve: "straight",
			
 
				+        },
			
 
				+        fill: {
			
 
				+          opacity: 0.3,
			
 
				+        },
			
 
				+        yaxis: {
			
 
				+          min: 0,
			
 
				+        },
			
 
				+        colors: ["#DCE6EC"],
			
 
				+      };
			
 
				+
			
 
				+      const sparkline2 = new ApexCharts(
			
 
				+        document.querySelector("#sparkline-2"),
			
 
				+        option_sparkline2,
			
 
				+      );
			
 
				+      sparkline2.render();
			
 
				+
			
 
				+      const option_sparkline3 = {
			
 
				+        series: [
			
 
				+          {
			
 
				+            data: [15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21],
			
 
				+          },
			
 
				+        ],
			
 
				+        chart: {
			
 
				+          type: "area",
			
 
				+          height: 50,
			
 
				+          sparkline: {
			
 
				+            enabled: true,
			
 
				+          },
			
 
				+        },
			
 
				+        stroke: {
			
 
				+          curve: "straight",
			
 
				+        },
			
 
				+        fill: {
			
 
				+          opacity: 0.3,
			
 
				+        },
			
 
				+        yaxis: {
			
 
				+          min: 0,
			
 
				+        },
			
 
				+        colors: ["#DCE6EC"],
			
 
				+      };
			
 
				+
			
 
				+      const sparkline3 = new ApexCharts(
			
 
				+        document.querySelector("#sparkline-3"),
			
 
				+        option_sparkline3,
			
 
				+      );
			
 
				+      sparkline3.render();
			
 
				+    </script>
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/index2.astro
+++ b/template/src/html/pages/index2.astro
@@ -0,0 +1,1373 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "AdminLTE | Dashboard v2";
			
 
				+const path = "../../dist";
			
 
				+const mainPage = "dashboard";
			
 
				+const page = "index2";
			
 
				+---
			
 
				+
			
 
				+<!doctype html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+
			
 
				+    <!-- apexcharts -->
			
 
				+    <link
			
 
				+      rel="stylesheet"
			
 
				+      href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css"
			
 
				+      integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0="
			
 
				+      crossorigin="anonymous"
			
 
				+    />
			
 
				+  </head>
			
 
				+
			
 
				+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">Dashboard v2</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    Dashboard v2
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!-- Info boxes -->
			
 
				+            <div class="row">
			
 
				+              <div class="col-12 col-sm-6 col-md-3">
			
 
				+                <div class="info-box">
			
 
				+                  <span class="info-box-icon text-bg-primary shadow-sm">
			
 
				+                    <i class="bi bi-gear-fill"></i>
			
 
				+                  </span>
			
 
				+
			
 
				+                  <div class="info-box-content">
			
 
				+                    <span class="info-box-text">CPU Traffic</span>
			
 
				+                    <span class="info-box-number">
			
 
				+                      10
			
 
				+                      <small>%</small>
			
 
				+                    </span>
			
 
				+                  </div>
			
 
				+                  <!-- /.info-box-content -->
			
 
				+                </div>
			
 
				+                <!-- /.info-box -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+              <div class="col-12 col-sm-6 col-md-3">
			
 
				+                <div class="info-box">
			
 
				+                  <span class="info-box-icon text-bg-danger shadow-sm">
			
 
				+                    <i class="bi bi-hand-thumbs-up-fill"></i>
			
 
				+                  </span>
			
 
				+
			
 
				+                  <div class="info-box-content">
			
 
				+                    <span class="info-box-text">Likes</span>
			
 
				+                    <span class="info-box-number">41,410</span>
			
 
				+                  </div>
			
 
				+                  <!-- /.info-box-content -->
			
 
				+                </div>
			
 
				+                <!-- /.info-box -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+
			
 
				+              <!-- fix for small devices only -->
			
 
				+              <!-- <div class="clearfix hidden-md-up"></div> -->
			
 
				+
			
 
				+              <div class="col-12 col-sm-6 col-md-3">
			
 
				+                <div class="info-box">
			
 
				+                  <span class="info-box-icon text-bg-success shadow-sm">
			
 
				+                    <i class="bi bi-cart-fill"></i>
			
 
				+                  </span>
			
 
				+
			
 
				+                  <div class="info-box-content">
			
 
				+                    <span class="info-box-text">Sales</span>
			
 
				+                    <span class="info-box-number">760</span>
			
 
				+                  </div>
			
 
				+                  <!-- /.info-box-content -->
			
 
				+                </div>
			
 
				+                <!-- /.info-box -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+              <div class="col-12 col-sm-6 col-md-3">
			
 
				+                <div class="info-box">
			
 
				+                  <span class="info-box-icon text-bg-warning shadow-sm">
			
 
				+                    <i class="bi bi-people-fill"></i>
			
 
				+                  </span>
			
 
				+
			
 
				+                  <div class="info-box-content">
			
 
				+                    <span class="info-box-text">New Members</span>
			
 
				+                    <span class="info-box-number">2,000</span>
			
 
				+                  </div>
			
 
				+                  <!-- /.info-box-content -->
			
 
				+                </div>
			
 
				+                <!-- /.info-box -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+            </div>
			
 
				+            <!-- /.row -->
			
 
				+
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-md-12">
			
 
				+                <div class="card mb-4">
			
 
				+                  <div class="card-header">
			
 
				+                    <h5 class="card-title">Monthly Recap Report</h5>
			
 
				+
			
 
				+                    <div class="card-tools">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-collapse"
			
 
				+                      >
			
 
				+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
			
 
				+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
			
 
				+                      </button>
			
 
				+                      <div class="btn-group">
			
 
				+                        <button
			
 
				+                          type="button"
			
 
				+                          class="btn btn-tool dropdown-toggle"
			
 
				+                          data-bs-toggle="dropdown"
			
 
				+                        >
			
 
				+                          <i class="bi bi-wrench"></i>
			
 
				+                        </button>
			
 
				+                        <div
			
 
				+                          class="dropdown-menu dropdown-menu-end"
			
 
				+                          role="menu"
			
 
				+                        >
			
 
				+                          <a href="#" class="dropdown-item">Action</a>
			
 
				+                          <a href="#" class="dropdown-item">Another action</a>
			
 
				+                          <a href="#" class="dropdown-item">
			
 
				+                            Something else here
			
 
				+                          </a>
			
 
				+                          <a class="dropdown-divider"></a>
			
 
				+                          <a href="#" class="dropdown-item">Separated link</a>
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-remove"
			
 
				+                      >
			
 
				+                        <i class="bi bi-x-lg"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <!-- /.card-header -->
			
 
				+                  <div class="card-body">
			
 
				+                    <!--begin::Row-->
			
 
				+                    <div class="row">
			
 
				+                      <div class="col-md-8">
			
 
				+                        <p class="text-center">
			
 
				+                          <strong>Sales: 1 Jan, 2023 - 30 Jul, 2023</strong>
			
 
				+                        </p>
			
 
				+
			
 
				+                        <div id="sales-chart"></div>
			
 
				+                      </div>
			
 
				+                      <!-- /.col -->
			
 
				+                      <div class="col-md-4">
			
 
				+                        <p class="text-center">
			
 
				+                          <strong>Goal Completion</strong>
			
 
				+                        </p>
			
 
				+
			
 
				+                        <div class="progress-group">
			
 
				+                          Add Products to Cart
			
 
				+                          <span class="float-end"><b>160</b>/200</span>
			
 
				+                          <div class="progress progress-sm">
			
 
				+                            <div
			
 
				+                              class="progress-bar text-bg-primary"
			
 
				+                              style="width: 80%"
			
 
				+                            >
			
 
				+                            </div>
			
 
				+                          </div>
			
 
				+                        </div>
			
 
				+                        <!-- /.progress-group -->
			
 
				+
			
 
				+                        <div class="progress-group">
			
 
				+                          Complete Purchase
			
 
				+                          <span class="float-end"><b>310</b>/400</span>
			
 
				+                          <div class="progress progress-sm">
			
 
				+                            <div
			
 
				+                              class="progress-bar text-bg-danger"
			
 
				+                              style="width: 75%"
			
 
				+                            >
			
 
				+                            </div>
			
 
				+                          </div>
			
 
				+                        </div>
			
 
				+
			
 
				+                        <!-- /.progress-group -->
			
 
				+                        <div class="progress-group">
			
 
				+                          <span class="progress-text">Visit Premium Page</span>
			
 
				+                          <span class="float-end"><b>480</b>/800</span>
			
 
				+                          <div class="progress progress-sm">
			
 
				+                            <div
			
 
				+                              class="progress-bar text-bg-success"
			
 
				+                              style="width: 60%"
			
 
				+                            >
			
 
				+                            </div>
			
 
				+                          </div>
			
 
				+                        </div>
			
 
				+
			
 
				+                        <!-- /.progress-group -->
			
 
				+                        <div class="progress-group">
			
 
				+                          Send Inquiries
			
 
				+                          <span class="float-end"><b>250</b>/500</span>
			
 
				+                          <div class="progress progress-sm">
			
 
				+                            <div
			
 
				+                              class="progress-bar text-bg-warning"
			
 
				+                              style="width: 50%"
			
 
				+                            >
			
 
				+                            </div>
			
 
				+                          </div>
			
 
				+                        </div>
			
 
				+                        <!-- /.progress-group -->
			
 
				+                      </div>
			
 
				+                      <!-- /.col -->
			
 
				+                    </div>
			
 
				+                    <!--end::Row-->
			
 
				+                  </div>
			
 
				+                  <!-- ./card-body -->
			
 
				+                  <div class="card-footer">
			
 
				+                    <!--begin::Row-->
			
 
				+                    <div class="row">
			
 
				+                      <div class="col-md-3 col-6">
			
 
				+                        <div class="text-center border-end">
			
 
				+                          <span class="text-success">
			
 
				+                            <i class="bi bi-caret-up-fill"></i> 17%
			
 
				+                          </span>
			
 
				+                          <h5 class="fw-bold mb-0">$35,210.43</h5>
			
 
				+                          <span class="text-uppercase">TOTAL REVENUE</span>
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+
			
 
				+                      <!-- /.col -->
			
 
				+                      <div class="col-md-3 col-6">
			
 
				+                        <div class="text-center border-end">
			
 
				+                          <span class="text-info">
			
 
				+                            <i class="bi bi-caret-left-fill"></i> 0%
			
 
				+                          </span>
			
 
				+                          <h5 class="fw-bold mb-0">$10,390.90</h5>
			
 
				+                          <span class="text-uppercase">TOTAL COST</span>
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <!-- /.col -->
			
 
				+                      <div class="col-md-3 col-6">
			
 
				+                        <div class="text-center border-end">
			
 
				+                          <span class="text-success">
			
 
				+                            <i class="bi bi-caret-up-fill"></i> 20%
			
 
				+                          </span>
			
 
				+                          <h5 class="fw-bold mb-0">$24,813.53</h5>
			
 
				+                          <span class="text-uppercase">TOTAL PROFIT</span>
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <!-- /.col -->
			
 
				+                      <div class="col-md-3 col-6">
			
 
				+                        <div class="text-center">
			
 
				+                          <span class="text-danger">
			
 
				+                            <i class="bi bi-caret-down-fill"></i> 18%
			
 
				+                          </span>
			
 
				+                          <h5 class="fw-bold mb-0">1200</h5>
			
 
				+                          <span class="text-uppercase">GOAL COMPLETIONS</span>
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                    <!--end::Row-->
			
 
				+                  </div>
			
 
				+                  <!-- /.card-footer -->
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <!-- Start col -->
			
 
				+              <div class="col-md-8">
			
 
				+                <!--begin::Row-->
			
 
				+                <div class="row g-4 mb-4">
			
 
				+                  <div class="col-md-6">
			
 
				+                    <!-- DIRECT CHAT -->
			
 
				+                    <div class="card direct-chat direct-chat-warning">
			
 
				+                      <div class="card-header">
			
 
				+                        <h3 class="card-title">Direct Chat</h3>
			
 
				+
			
 
				+                        <div class="card-tools">
			
 
				+                          <span
			
 
				+                            title="3 New Messages"
			
 
				+                            class="badge text-bg-warning"
			
 
				+                          >
			
 
				+                            3
			
 
				+                          </span>
			
 
				+                          <button
			
 
				+                            type="button"
			
 
				+                            class="btn btn-tool"
			
 
				+                            data-lte-toggle="card-collapse"
			
 
				+                          >
			
 
				+                            <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
			
 
				+                            <i data-lte-icon="collapse" class="bi bi-dash-lg"
			
 
				+                            ></i>
			
 
				+                          </button>
			
 
				+                          <button
			
 
				+                            type="button"
			
 
				+                            class="btn btn-tool"
			
 
				+                            title="Contacts"
			
 
				+                            data-lte-toggle="chat-pane"
			
 
				+                          >
			
 
				+                            <i class="bi bi-chat-text-fill"></i>
			
 
				+                          </button>
			
 
				+                          <button
			
 
				+                            type="button"
			
 
				+                            class="btn btn-tool"
			
 
				+                            data-lte-toggle="card-remove"
			
 
				+                          >
			
 
				+                            <i class="bi bi-x-lg"></i>
			
 
				+                          </button>
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <!-- /.card-header -->
			
 
				+                      <div class="card-body">
			
 
				+                        <!-- Conversations are loaded here -->
			
 
				+                        <div class="direct-chat-messages">
			
 
				+                          <!-- Message. Default to the start -->
			
 
				+                          <div class="direct-chat-msg">
			
 
				+                            <div class="direct-chat-infos clearfix">
			
 
				+                              <span class="direct-chat-name float-start">
			
 
				+                                Hadi Shaikh
			
 
				+                              </span>
			
 
				+                              <span class="direct-chat-timestamp float-end">
			
 
				+                                23 Jan 2:00 pm
			
 
				+                              </span>
			
 
				+                            </div>
			
 
				+                            <!-- /.direct-chat-infos -->
			
 
				+                            <img
			
 
				+                              class="direct-chat-img"
			
 
				+                              src={path + "/assets/img/user1-128x128.jpg"}
			
 
				+                              alt="message user image"
			
 
				+                            />
			
 
				+                            <!-- /.direct-chat-img -->
			
 
				+                            <div class="direct-chat-text">
			
 
				+                              Is this template really for free? That's
			
 
				+                              unbelievable!
			
 
				+                            </div>
			
 
				+                            <!-- /.direct-chat-text -->
			
 
				+                          </div>
			
 
				+                          <!-- /.direct-chat-msg -->
			
 
				+
			
 
				+                          <!-- Message to the end -->
			
 
				+                          <div class="direct-chat-msg end">
			
 
				+                            <div class="direct-chat-infos clearfix">
			
 
				+                              <span class="direct-chat-name float-end">
			
 
				+                                Sarah Bullock
			
 
				+                              </span>
			
 
				+                              <span class="direct-chat-timestamp float-start">
			
 
				+                                23 Jan 2:05 pm
			
 
				+                              </span>
			
 
				+                            </div>
			
 
				+                            <!-- /.direct-chat-infos -->
			
 
				+                            <img
			
 
				+                              class="direct-chat-img"
			
 
				+                              src={path + "/assets/img/user3-128x128.jpg"}
			
 
				+                              alt="message user image"
			
 
				+                            />
			
 
				+                            <!-- /.direct-chat-img -->
			
 
				+                            <div class="direct-chat-text">
			
 
				+                              You better believe it!
			
 
				+                            </div>
			
 
				+                            <!-- /.direct-chat-text -->
			
 
				+                          </div>
			
 
				+                          <!-- /.direct-chat-msg -->
			
 
				+
			
 
				+                          <!-- Message. Default to the start -->
			
 
				+                          <div class="direct-chat-msg">
			
 
				+                            <div class="direct-chat-infos clearfix">
			
 
				+                              <span class="direct-chat-name float-start">
			
 
				+                                Hadi Shaikh
			
 
				+                              </span>
			
 
				+                              <span class="direct-chat-timestamp float-end">
			
 
				+                                23 Jan 5:37 pm
			
 
				+                              </span>
			
 
				+                            </div>
			
 
				+                            <!-- /.direct-chat-infos -->
			
 
				+                            <img
			
 
				+                              class="direct-chat-img"
			
 
				+                              src={path + "/assets/img/user1-128x128.jpg"}
			
 
				+                              alt="message user image"
			
 
				+                            />
			
 
				+                            <!-- /.direct-chat-img -->
			
 
				+                            <div class="direct-chat-text">
			
 
				+                              Working with AdminLTE on a great new app! Wanna
			
 
				+                              join?
			
 
				+                            </div>
			
 
				+                            <!-- /.direct-chat-text -->
			
 
				+                          </div>
			
 
				+                          <!-- /.direct-chat-msg -->
			
 
				+
			
 
				+                          <!-- Message to the end -->
			
 
				+                          <div class="direct-chat-msg end">
			
 
				+                            <div class="direct-chat-infos clearfix">
			
 
				+                              <span class="direct-chat-name float-end">
			
 
				+                                Sarah Bullock
			
 
				+                              </span>
			
 
				+                              <span class="direct-chat-timestamp float-start">
			
 
				+                                23 Jan 6:10 pm
			
 
				+                              </span>
			
 
				+                            </div>
			
 
				+                            <!-- /.direct-chat-infos -->
			
 
				+                            <img
			
 
				+                              class="direct-chat-img"
			
 
				+                              src={path + "/assets/img/user3-128x128.jpg"}
			
 
				+                              alt="message user image"
			
 
				+                            />
			
 
				+                            <!-- /.direct-chat-img -->
			
 
				+                            <div class="direct-chat-text">I would love to.</div>
			
 
				+                            <!-- /.direct-chat-text -->
			
 
				+                          </div>
			
 
				+                          <!-- /.direct-chat-msg -->
			
 
				+                        </div>
			
 
				+                        <!-- /.direct-chat-messages-->
			
 
				+
			
 
				+                        <!-- Contacts are loaded here -->
			
 
				+                        <div class="direct-chat-contacts">
			
 
				+                          <ul class="contacts-list">
			
 
				+                            <li>
			
 
				+                              <a href="#">
			
 
				+                                <img
			
 
				+                                  class="contacts-list-img"
			
 
				+                                  src={path + "/assets/img/user1-128x128.jpg"}
			
 
				+                                  alt="User Avatar"
			
 
				+                                />
			
 
				+
			
 
				+                                <div class="contacts-list-info">
			
 
				+                                  <span class="contacts-list-name">
			
 
				+                                    Count Dracula
			
 
				+                                    <small class="contacts-list-date float-end">
			
 
				+                                      2/28/2023
			
 
				+                                    </small>
			
 
				+                                  </span>
			
 
				+                                  <span class="contacts-list-msg">
			
 
				+                                    How have you been? I was...
			
 
				+                                  </span>
			
 
				+                                </div>
			
 
				+                                <!-- /.contacts-list-info -->
			
 
				+                              </a>
			
 
				+                            </li>
			
 
				+                            <!-- End Contact Item -->
			
 
				+                            <li>
			
 
				+                              <a href="#">
			
 
				+                                <img
			
 
				+                                  class="contacts-list-img"
			
 
				+                                  src={path + "/assets/img/user7-128x128.jpg"}
			
 
				+                                  alt="User Avatar"
			
 
				+                                />
			
 
				+
			
 
				+                                <div class="contacts-list-info">
			
 
				+                                  <span class="contacts-list-name">
			
 
				+                                    Sarah Doe
			
 
				+                                    <small class="contacts-list-date float-end">
			
 
				+                                      2/23/2023
			
 
				+                                    </small>
			
 
				+                                  </span>
			
 
				+                                  <span class="contacts-list-msg">
			
 
				+                                    I will be waiting for...
			
 
				+                                  </span>
			
 
				+                                </div>
			
 
				+                                <!-- /.contacts-list-info -->
			
 
				+                              </a>
			
 
				+                            </li>
			
 
				+                            <!-- End Contact Item -->
			
 
				+                            <li>
			
 
				+                              <a href="#">
			
 
				+                                <img
			
 
				+                                  class="contacts-list-img"
			
 
				+                                  src={path + "/assets/img/user3-128x128.jpg"}
			
 
				+                                  alt="User Avatar"
			
 
				+                                />
			
 
				+
			
 
				+                                <div class="contacts-list-info">
			
 
				+                                  <span class="contacts-list-name">
			
 
				+                                    Nadia Jolie
			
 
				+                                    <small class="contacts-list-date float-end">
			
 
				+                                      2/20/2023
			
 
				+                                    </small>
			
 
				+                                  </span>
			
 
				+                                  <span class="contacts-list-msg">
			
 
				+                                    I'll call you back at...
			
 
				+                                  </span>
			
 
				+                                </div>
			
 
				+                                <!-- /.contacts-list-info -->
			
 
				+                              </a>
			
 
				+                            </li>
			
 
				+                            <!-- End Contact Item -->
			
 
				+                            <li>
			
 
				+                              <a href="#">
			
 
				+                                <img
			
 
				+                                  class="contacts-list-img"
			
 
				+                                  src={path + "/assets/img/user5-128x128.jpg"}
			
 
				+                                  alt="User Avatar"
			
 
				+                                />
			
 
				+
			
 
				+                                <div class="contacts-list-info">
			
 
				+                                  <span class="contacts-list-name">
			
 
				+                                    Nora S. Vans
			
 
				+                                    <small class="contacts-list-date float-end">
			
 
				+                                      2/10/2023
			
 
				+                                    </small>
			
 
				+                                  </span>
			
 
				+                                  <span class="contacts-list-msg">
			
 
				+                                    Where is your new...
			
 
				+                                  </span>
			
 
				+                                </div>
			
 
				+                                <!-- /.contacts-list-info -->
			
 
				+                              </a>
			
 
				+                            </li>
			
 
				+                            <!-- End Contact Item -->
			
 
				+                            <li>
			
 
				+                              <a href="#">
			
 
				+                                <img
			
 
				+                                  class="contacts-list-img"
			
 
				+                                  src={path + "/assets/img/user6-128x128.jpg"}
			
 
				+                                  alt="User Avatar"
			
 
				+                                />
			
 
				+
			
 
				+                                <div class="contacts-list-info">
			
 
				+                                  <span class="contacts-list-name">
			
 
				+                                    John K.
			
 
				+                                    <small class="contacts-list-date float-end">
			
 
				+                                      1/27/2023
			
 
				+                                    </small>
			
 
				+                                  </span>
			
 
				+                                  <span class="contacts-list-msg">
			
 
				+                                    Can I take a look at...
			
 
				+                                  </span>
			
 
				+                                </div>
			
 
				+                                <!-- /.contacts-list-info -->
			
 
				+                              </a>
			
 
				+                            </li>
			
 
				+                            <!-- End Contact Item -->
			
 
				+                            <li>
			
 
				+                              <a href="#">
			
 
				+                                <img
			
 
				+                                  class="contacts-list-img"
			
 
				+                                  src={path + "/assets/img/user8-128x128.jpg"}
			
 
				+                                  alt="User Avatar"
			
 
				+                                />
			
 
				+
			
 
				+                                <div class="contacts-list-info">
			
 
				+                                  <span class="contacts-list-name">
			
 
				+                                    Kenneth M.
			
 
				+                                    <small class="contacts-list-date float-end">
			
 
				+                                      1/4/2023
			
 
				+                                    </small>
			
 
				+                                  </span>
			
 
				+                                  <span class="contacts-list-msg">
			
 
				+                                    Never mind I found...
			
 
				+                                  </span>
			
 
				+                                </div>
			
 
				+                                <!-- /.contacts-list-info -->
			
 
				+                              </a>
			
 
				+                            </li>
			
 
				+                            <!-- End Contact Item -->
			
 
				+                          </ul>
			
 
				+                          <!-- /.contacts-list -->
			
 
				+                        </div>
			
 
				+                        <!-- /.direct-chat-pane -->
			
 
				+                      </div>
			
 
				+                      <!-- /.card-body -->
			
 
				+                      <div class="card-footer">
			
 
				+                        <form action="#" method="post">
			
 
				+                          <div class="input-group">
			
 
				+                            <input
			
 
				+                              type="text"
			
 
				+                              name="message"
			
 
				+                              placeholder="Type Message ..."
			
 
				+                              class="form-control"
			
 
				+                            />
			
 
				+                            <span class="input-group-append">
			
 
				+                              <button type="button" class="btn btn-warning">
			
 
				+                                Send
			
 
				+                              </button>
			
 
				+                            </span>
			
 
				+                          </div>
			
 
				+                        </form>
			
 
				+                      </div>
			
 
				+                      <!-- /.card-footer-->
			
 
				+                    </div>
			
 
				+                    <!-- /.direct-chat -->
			
 
				+                  </div>
			
 
				+                  <!-- /.col -->
			
 
				+
			
 
				+                  <div class="col-md-6">
			
 
				+                    <!-- USERS LIST -->
			
 
				+                    <div class="card">
			
 
				+                      <div class="card-header">
			
 
				+                        <h3 class="card-title">Latest Members</h3>
			
 
				+
			
 
				+                        <div class="card-tools">
			
 
				+                          <span class="badge text-bg-danger">
			
 
				+                            8 New Members
			
 
				+                          </span>
			
 
				+                          <button
			
 
				+                            type="button"
			
 
				+                            class="btn btn-tool"
			
 
				+                            data-lte-toggle="card-collapse"
			
 
				+                          >
			
 
				+                            <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
			
 
				+                            <i data-lte-icon="collapse" class="bi bi-dash-lg"
			
 
				+                            ></i>
			
 
				+                          </button>
			
 
				+                          <button
			
 
				+                            type="button"
			
 
				+                            class="btn btn-tool"
			
 
				+                            data-lte-toggle="card-remove"
			
 
				+                          >
			
 
				+                            <i class="bi bi-x-lg"></i>
			
 
				+                          </button>
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <!-- /.card-header -->
			
 
				+                      <div class="card-body p-0">
			
 
				+                        <div class="row text-center m-1">
			
 
				+                          <div class="col-3 p-2">
			
 
				+                            <img
			
 
				+                              class="img-fluid rounded-circle"
			
 
				+                              src={path + "/assets/img/user1-128x128.jpg"}
			
 
				+                              alt="User Image"
			
 
				+                            />
			
 
				+                            <a
			
 
				+                              class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0"
			
 
				+                              href="#"
			
 
				+                            >
			
 
				+                              Hadi Shaikh
			
 
				+                            </a>
			
 
				+                            <div class="fs-8">Today</div>
			
 
				+                          </div>
			
 
				+                          <div class="col-3 p-2">
			
 
				+                            <img
			
 
				+                              class="img-fluid rounded-circle"
			
 
				+                              src={path + "/assets/img/user1-128x128.jpg"}
			
 
				+                              alt="User Image"
			
 
				+                            />
			
 
				+                            <a
			
 
				+                              class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0"
			
 
				+                              href="#"
			
 
				+                            >
			
 
				+                              Norman
			
 
				+                            </a>
			
 
				+                            <div class="fs-8">Yesterday</div>
			
 
				+                          </div>
			
 
				+                          <div class="col-3 p-2">
			
 
				+                            <img
			
 
				+                              class="img-fluid rounded-circle"
			
 
				+                              src={path + "/assets/img/user7-128x128.jpg"}
			
 
				+                              alt="User Image"
			
 
				+                            />
			
 
				+                            <a
			
 
				+                              class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0"
			
 
				+                              href="#"
			
 
				+                            >
			
 
				+                              Jane
			
 
				+                            </a>
			
 
				+                            <div class="fs-8">12 Jan</div>
			
 
				+                          </div>
			
 
				+                          <div class="col-3 p-2">
			
 
				+                            <img
			
 
				+                              class="img-fluid rounded-circle"
			
 
				+                              src={path + "/assets/img/user6-128x128.jpg"}
			
 
				+                              alt="User Image"
			
 
				+                            />
			
 
				+                            <a
			
 
				+                              class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0"
			
 
				+                              href="#"
			
 
				+                            >
			
 
				+                              John
			
 
				+                            </a>
			
 
				+                            <div class="fs-8">12 Jan</div>
			
 
				+                          </div>
			
 
				+                          <div class="col-3 p-2">
			
 
				+                            <img
			
 
				+                              class="img-fluid rounded-circle"
			
 
				+                              src={path + "/assets/img/user2-160x160.jpg"}
			
 
				+                              alt="User Image"
			
 
				+                            />
			
 
				+                            <a
			
 
				+                              class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0"
			
 
				+                              href="#"
			
 
				+                            >
			
 
				+                              Alexander
			
 
				+                            </a>
			
 
				+                            <div class="fs-8">13 Jan</div>
			
 
				+                          </div>
			
 
				+                          <div class="col-3 p-2">
			
 
				+                            <img
			
 
				+                              class="img-fluid rounded-circle"
			
 
				+                              src={path + "/assets/img/user5-128x128.jpg"}
			
 
				+                              alt="User Image"
			
 
				+                            />
			
 
				+                            <a
			
 
				+                              class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0"
			
 
				+                              href="#"
			
 
				+                            >
			
 
				+                              Sarah
			
 
				+                            </a>
			
 
				+                            <div class="fs-8">14 Jan</div>
			
 
				+                          </div>
			
 
				+                          <div class="col-3 p-2">
			
 
				+                            <img
			
 
				+                              class="img-fluid rounded-circle"
			
 
				+                              src={path + "/assets/img/user4-128x128.jpg"}
			
 
				+                              alt="User Image"
			
 
				+                            />
			
 
				+                            <a
			
 
				+                              class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0"
			
 
				+                              href="#"
			
 
				+                            >
			
 
				+                              Nora
			
 
				+                            </a>
			
 
				+                            <div class="fs-8">15 Jan</div>
			
 
				+                          </div>
			
 
				+                          <div class="col-3 p-2">
			
 
				+                            <img
			
 
				+                              class="img-fluid rounded-circle"
			
 
				+                              src={path + "/assets/img/user3-128x128.jpg"}
			
 
				+                              alt="User Image"
			
 
				+                            />
			
 
				+                            <a
			
 
				+                              class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0"
			
 
				+                              href="#"
			
 
				+                            >
			
 
				+                              Nadia
			
 
				+                            </a>
			
 
				+                            <div class="fs-8">15 Jan</div>
			
 
				+                          </div>
			
 
				+                        </div>
			
 
				+                        <!-- /.users-list -->
			
 
				+                      </div>
			
 
				+                      <!-- /.card-body -->
			
 
				+                      <div class="card-footer text-center">
			
 
				+                        <a href="javascript:" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View All Users</a>
			
 
				+                      </div>
			
 
				+                      <!-- /.card-footer -->
			
 
				+                    </div>
			
 
				+                    <!-- /.card -->
			
 
				+                  </div>
			
 
				+                  <!-- /.col -->
			
 
				+                </div>
			
 
				+                <!--end::Row-->
			
 
				+
			
 
				+                <!--begin::Latest Order Widget-->
			
 
				+                <div class="card">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Latest Orders</h3>
			
 
				+
			
 
				+                    <div class="card-tools">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-collapse"
			
 
				+                      >
			
 
				+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
			
 
				+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
			
 
				+                      </button>
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-remove"
			
 
				+                      >
			
 
				+                        <i class="bi bi-x-lg"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <!-- /.card-header -->
			
 
				+                  <div class="card-body p-0">
			
 
				+                    <div class="table-responsive">
			
 
				+                      <table class="table m-0">
			
 
				+                        <thead>
			
 
				+                          <tr>
			
 
				+                            <th>Order ID</th>
			
 
				+                            <th>Item</th>
			
 
				+                            <th>Status</th>
			
 
				+                            <th>Popularity</th>
			
 
				+                          </tr>
			
 
				+                        </thead>
			
 
				+                        <tbody>
			
 
				+                          <tr>
			
 
				+                            <td>
			
 
				+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR9842</a>
			
 
				+                            </td>
			
 
				+                            <td>Call of Duty IV</td>
			
 
				+                            <td>
			
 
				+                              <span class="badge text-bg-success">
			
 
				+                                Shipped
			
 
				+                              </span>
			
 
				+                            </td>
			
 
				+                            <td>
			
 
				+                              <div id="table-sparkline-1"></div>
			
 
				+                            </td>
			
 
				+                          </tr>
			
 
				+                          <tr>
			
 
				+                            <td>
			
 
				+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR1848</a>
			
 
				+                            </td>
			
 
				+                            <td>Samsung Smart TV</td>
			
 
				+                            <td>
			
 
				+                              <span class="badge text-bg-warning">Pending</span>
			
 
				+                            </td>
			
 
				+                            <td>
			
 
				+                              <div id="table-sparkline-2"></div>
			
 
				+                            </td>
			
 
				+                          </tr>
			
 
				+                          <tr>
			
 
				+                            <td>
			
 
				+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR7429</a>
			
 
				+                            </td>
			
 
				+                            <td>iPhone 6 Plus</td>
			
 
				+                            <td>
			
 
				+                              <span class="badge text-bg-danger">
			
 
				+                                Delivered
			
 
				+                              </span>
			
 
				+                            </td>
			
 
				+                            <td>
			
 
				+                              <div id="table-sparkline-3"></div>
			
 
				+                            </td>
			
 
				+                          </tr>
			
 
				+                          <tr>
			
 
				+                            <td>
			
 
				+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR7429</a>
			
 
				+                            </td>
			
 
				+                            <td>Samsung Smart TV</td>
			
 
				+                            <td>
			
 
				+                              <span class="badge text-bg-info">Processing</span>
			
 
				+                            </td>
			
 
				+                            <td>
			
 
				+                              <div id="table-sparkline-4"></div>
			
 
				+                            </td>
			
 
				+                          </tr>
			
 
				+                          <tr>
			
 
				+                            <td>
			
 
				+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR1848</a>
			
 
				+                            </td>
			
 
				+                            <td>Samsung Smart TV</td>
			
 
				+                            <td>
			
 
				+                              <span class="badge text-bg-warning">Pending</span>
			
 
				+                            </td>
			
 
				+                            <td>
			
 
				+                              <div id="table-sparkline-5"></div>
			
 
				+                            </td>
			
 
				+                          </tr>
			
 
				+                          <tr>
			
 
				+                            <td>
			
 
				+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR7429</a>
			
 
				+                            </td>
			
 
				+                            <td>iPhone 6 Plus</td>
			
 
				+                            <td>
			
 
				+                              <span class="badge text-bg-danger">
			
 
				+                                Delivered
			
 
				+                              </span>
			
 
				+                            </td>
			
 
				+                            <td>
			
 
				+                              <div id="table-sparkline-6"></div>
			
 
				+                            </td>
			
 
				+                          </tr>
			
 
				+                          <tr>
			
 
				+                            <td>
			
 
				+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR9842</a>
			
 
				+                            </td>
			
 
				+                            <td>Call of Duty IV</td>
			
 
				+                            <td>
			
 
				+                              <span class="badge text-bg-success">Shipped</span>
			
 
				+                            </td>
			
 
				+                            <td>
			
 
				+                              <div id="table-sparkline-7"></div>
			
 
				+                            </td>
			
 
				+                          </tr>
			
 
				+                        </tbody>
			
 
				+                      </table>
			
 
				+                    </div>
			
 
				+                    <!-- /.table-responsive -->
			
 
				+                  </div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                  <div class="card-footer clearfix">
			
 
				+                    <a
			
 
				+                      href="javascript:void(0)"
			
 
				+                      class="btn btn-sm btn-primary float-start"
			
 
				+                    >
			
 
				+                      Place New Order
			
 
				+                    </a>
			
 
				+                    <a
			
 
				+                      href="javascript:void(0)"
			
 
				+                      class="btn btn-sm btn-secondary float-end"
			
 
				+                    >
			
 
				+                      View All Orders
			
 
				+                    </a>
			
 
				+                  </div>
			
 
				+                  <!-- /.card-footer -->
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+
			
 
				+              <div class="col-md-4">
			
 
				+                <!-- Info Boxes Style 2 -->
			
 
				+                <div class="info-box mb-3 text-bg-warning">
			
 
				+                  <span class="info-box-icon">
			
 
				+                    <i class="bi bi-tag-fill"></i>
			
 
				+                  </span>
			
 
				+
			
 
				+                  <div class="info-box-content">
			
 
				+                    <span class="info-box-text">Inventory</span>
			
 
				+                    <span class="info-box-number">5,200</span>
			
 
				+                  </div>
			
 
				+                  <!-- /.info-box-content -->
			
 
				+                </div>
			
 
				+                <!-- /.info-box -->
			
 
				+                <div class="info-box mb-3 text-bg-success">
			
 
				+                  <span class="info-box-icon">
			
 
				+                    <i class="bi bi-heart-fill"></i>
			
 
				+                  </span>
			
 
				+
			
 
				+                  <div class="info-box-content">
			
 
				+                    <span class="info-box-text">Mentions</span>
			
 
				+                    <span class="info-box-number">92,050</span>
			
 
				+                  </div>
			
 
				+                  <!-- /.info-box-content -->
			
 
				+                </div>
			
 
				+                <!-- /.info-box -->
			
 
				+                <div class="info-box mb-3 text-bg-danger">
			
 
				+                  <span class="info-box-icon">
			
 
				+                    <i class="bi bi-cloud-download"></i>
			
 
				+                  </span>
			
 
				+
			
 
				+                  <div class="info-box-content">
			
 
				+                    <span class="info-box-text">Downloads</span>
			
 
				+                    <span class="info-box-number">114,381</span>
			
 
				+                  </div>
			
 
				+                  <!-- /.info-box-content -->
			
 
				+                </div>
			
 
				+                <!-- /.info-box -->
			
 
				+                <div class="info-box mb-3 text-bg-info">
			
 
				+                  <span class="info-box-icon">
			
 
				+                    <i class="bi bi-chat-fill"></i>
			
 
				+                  </span>
			
 
				+
			
 
				+                  <div class="info-box-content">
			
 
				+                    <span class="info-box-text">Direct Messages</span>
			
 
				+                    <span class="info-box-number">163,921</span>
			
 
				+                  </div>
			
 
				+                  <!-- /.info-box-content -->
			
 
				+                </div>
			
 
				+                <!-- /.info-box -->
			
 
				+
			
 
				+                <div class="card mb-4">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Browser Usage</h3>
			
 
				+
			
 
				+                    <div class="card-tools">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-collapse"
			
 
				+                      >
			
 
				+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
			
 
				+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
			
 
				+                      </button>
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-remove"
			
 
				+                      >
			
 
				+                        <i class="bi bi-x-lg"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <!-- /.card-header -->
			
 
				+                  <div class="card-body">
			
 
				+                    <!--begin::Row-->
			
 
				+                    <div class="row">
			
 
				+                      <div class="col-12">
			
 
				+                        <div id="pie-chart"></div>
			
 
				+                      </div>
			
 
				+                      <!-- /.col -->
			
 
				+                    </div>
			
 
				+                    <!--end::Row-->
			
 
				+                  </div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                  <div class="card-footer p-0">
			
 
				+                    <ul class="nav nav-pills flex-column">
			
 
				+                      <li class="nav-item">
			
 
				+                        <a href="#" class="nav-link">
			
 
				+                          United States of America
			
 
				+                          <span class="float-end text-danger">
			
 
				+                            <i class="bi bi-arrow-down fs-7"></i>
			
 
				+                             12%
			
 
				+                          </span>
			
 
				+                        </a>
			
 
				+                      </li>
			
 
				+                      <li class="nav-item">
			
 
				+                        <a href="#" class="nav-link">
			
 
				+                          India
			
 
				+                          <span class="float-end text-success">
			
 
				+                            <i class="bi bi-arrow-up fs-7"></i> 4%
			
 
				+                          </span>
			
 
				+                        </a>
			
 
				+                      </li>
			
 
				+                      <li class="nav-item">
			
 
				+                        <a href="#" class="nav-link">
			
 
				+                          China
			
 
				+                          <span class="float-end text-info">
			
 
				+                            <i class="bi bi-arrow-left fs-7"></i> 0%
			
 
				+                          </span>
			
 
				+                        </a>
			
 
				+                      </li>
			
 
				+                    </ul>
			
 
				+                  </div>
			
 
				+                  <!-- /.footer -->
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+
			
 
				+                <!-- PRODUCT LIST -->
			
 
				+                <div class="card">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Recently Added Products</h3>
			
 
				+
			
 
				+                    <div class="card-tools">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-collapse"
			
 
				+                      >
			
 
				+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
			
 
				+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
			
 
				+                      </button>
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-remove"
			
 
				+                      >
			
 
				+                        <i class="bi bi-x-lg"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <!-- /.card-header -->
			
 
				+                  <div class="card-body p-0">
			
 
				+                    <div class="px-2">
			
 
				+                      <div class="d-flex border-top py-2 px-1">
			
 
				+                        <div class="col-2">
			
 
				+                          <img
			
 
				+                            src={path + "/assets/img/default-150x150.png"}
			
 
				+                            alt="Product Image"
			
 
				+                            class="img-size-50"
			
 
				+                          />
			
 
				+                        </div>
			
 
				+                        <div class="col-10">
			
 
				+                          <a href="javascript:void(0)" class="fw-bold">
			
 
				+                            Samsung TV
			
 
				+                            <span class="badge text-bg-warning float-end">
			
 
				+                              $1800
			
 
				+                            </span>
			
 
				+                          </a>
			
 
				+                          <div class="text-truncate">
			
 
				+                            Samsung 32" 1080p 60Hz LED Smart HDTV.
			
 
				+                          </div>
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <!-- /.item -->
			
 
				+                      <div class="d-flex border-top py-2 px-1">
			
 
				+                        <div class="col-2">
			
 
				+                          <img
			
 
				+                            src={path + "/assets/img/default-150x150.png"}
			
 
				+                            alt="Product Image"
			
 
				+                            class="img-size-50"
			
 
				+                          />
			
 
				+                        </div>
			
 
				+                        <div class="col-10">
			
 
				+                          <a href="javascript:void(0)" class="fw-bold">
			
 
				+                            Bicycle
			
 
				+                            <span class="badge text-bg-info float-end">
			
 
				+                              $700
			
 
				+                            </span>
			
 
				+                          </a>
			
 
				+                          <div class="text-truncate">
			
 
				+                            26" Mongoose Dolomite Men's 7-speed, Navy Blue.
			
 
				+                          </div>
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <!-- /.item -->
			
 
				+                      <div class="d-flex border-top py-2 px-1">
			
 
				+                        <div class="col-2">
			
 
				+                          <img
			
 
				+                            src={path + "/assets/img/default-150x150.png"}
			
 
				+                            alt="Product Image"
			
 
				+                            class="img-size-50"
			
 
				+                          />
			
 
				+                        </div>
			
 
				+                        <div class="col-10">
			
 
				+                          <a href="javascript:void(0)" class="fw-bold">
			
 
				+                            Xbox One
			
 
				+                            <span class="badge text-bg-danger float-end">
			
 
				+                              $350
			
 
				+                            </span>
			
 
				+                          </a>
			
 
				+                          <div class="text-truncate">
			
 
				+                            Xbox One Console Bundle with Halo Master Chief
			
 
				+                            Collection.
			
 
				+                          </div>
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <!-- /.item -->
			
 
				+                      <div class="d-flex border-top py-2 px-1">
			
 
				+                        <div class="col-2">
			
 
				+                          <img
			
 
				+                            src={path + "/assets/img/default-150x150.png"}
			
 
				+                            alt="Product Image"
			
 
				+                            class="img-size-50"
			
 
				+                          />
			
 
				+                        </div>
			
 
				+                        <div class="col-10">
			
 
				+                          <a href="javascript:void(0)" class="fw-bold">
			
 
				+                            PlayStation 4
			
 
				+                            <span class="badge text-bg-success float-end">
			
 
				+                              $399
			
 
				+                            </span>
			
 
				+                          </a>
			
 
				+                          <div class="text-truncate">
			
 
				+                            PlayStation 4 500GB Console (PS4)
			
 
				+                          </div>
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <!-- /.item -->
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                  <div class="card-footer text-center">
			
 
				+                    <a href="javascript:void(0)" class="uppercase">
			
 
				+                      View All Products
			
 
				+                    </a>
			
 
				+                  </div>
			
 
				+                  <!-- /.card-footer -->
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+
			
 
				+    <!-- OPTIONAL SCRIPTS -->
			
 
				+
			
 
				+    <!-- apexcharts -->
			
 
				+    <script
			
 
				+      src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
			
 
				+      integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
			
 
				+      crossorigin="anonymous"></script>
			
 
				+
			
 
				+    <script is:inline>
			
 
				+      // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
			
 
				+      // IT'S ALL JUST JUNK FOR DEMO
			
 
				+      // ++++++++++++++++++++++++++++++++++++++++++
			
 
				+
			
 
				+      /* apexcharts
			
 
				+       * -------
			
 
				+       * Here we will create a few charts using apexcharts
			
 
				+       */
			
 
				+
			
 
				+      //-----------------------
			
 
				+      // - MONTHLY SALES CHART -
			
 
				+      //-----------------------
			
 
				+
			
 
				+      const sales_chart_options = {
			
 
				+        series: [
			
 
				+          {
			
 
				+            name: "Digital Goods",
			
 
				+            data: [28, 48, 40, 19, 86, 27, 90],
			
 
				+          },
			
 
				+          {
			
 
				+            name: "Electronics",
			
 
				+            data: [65, 59, 80, 81, 56, 55, 40],
			
 
				+          },
			
 
				+        ],
			
 
				+        chart: {
			
 
				+          height: 180,
			
 
				+          type: "area",
			
 
				+          toolbar: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+        },
			
 
				+        legend: {
			
 
				+          show: false,
			
 
				+        },
			
 
				+        colors: ["#0d6efd", "#20c997"],
			
 
				+        dataLabels: {
			
 
				+          enabled: false,
			
 
				+        },
			
 
				+        stroke: {
			
 
				+          curve: "smooth",
			
 
				+        },
			
 
				+        xaxis: {
			
 
				+          type: "datetime",
			
 
				+          categories: [
			
 
				+            "2023-01-01",
			
 
				+            "2023-02-01",
			
 
				+            "2023-03-01",
			
 
				+            "2023-04-01",
			
 
				+            "2023-05-01",
			
 
				+            "2023-06-01",
			
 
				+            "2023-07-01",
			
 
				+          ],
			
 
				+        },
			
 
				+        tooltip: {
			
 
				+          x: {
			
 
				+            format: "MMMM yyyy",
			
 
				+          },
			
 
				+        },
			
 
				+      };
			
 
				+
			
 
				+      const sales_chart = new ApexCharts(
			
 
				+        document.querySelector("#sales-chart"),
			
 
				+        sales_chart_options,
			
 
				+      );
			
 
				+      sales_chart.render();
			
 
				+
			
 
				+      //---------------------------
			
 
				+      // - END MONTHLY SALES CHART -
			
 
				+      //---------------------------
			
 
				+
			
 
				+      function createSparklineChart(selector, data) {
			
 
				+        const options = {
			
 
				+          series: [{ data }],
			
 
				+          chart: {
			
 
				+            type: "line",
			
 
				+            width: 150,
			
 
				+            height: 30,
			
 
				+            sparkline: {
			
 
				+              enabled: true,
			
 
				+            },
			
 
				+          },
			
 
				+          colors: ["var(--bs-primary)"],
			
 
				+          stroke: {
			
 
				+            width: 2,
			
 
				+          },
			
 
				+          tooltip: {
			
 
				+            fixed: {
			
 
				+              enabled: false,
			
 
				+            },
			
 
				+            x: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            y: {
			
 
				+              title: {
			
 
				+                formatter: function (seriesName) {
			
 
				+                  return "";
			
 
				+                },
			
 
				+              },
			
 
				+            },
			
 
				+            marker: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+          },
			
 
				+        };
			
 
				+
			
 
				+        const chart = new ApexCharts(document.querySelector(selector), options);
			
 
				+        chart.render();
			
 
				+      }
			
 
				+
			
 
				+      const table_sparkline_1_data = [
			
 
				+        25, 66, 41, 89, 63, 25, 44, 12, 36, 9, 54,
			
 
				+      ];
			
 
				+      const table_sparkline_2_data = [
			
 
				+        12, 56, 21, 39, 73, 45, 64, 52, 36, 59, 44,
			
 
				+      ];
			
 
				+      const table_sparkline_3_data = [
			
 
				+        15, 46, 21, 59, 33, 15, 34, 42, 56, 19, 64,
			
 
				+      ];
			
 
				+      const table_sparkline_4_data = [
			
 
				+        30, 56, 31, 69, 43, 35, 24, 32, 46, 29, 64,
			
 
				+      ];
			
 
				+      const table_sparkline_5_data = [
			
 
				+        20, 76, 51, 79, 53, 35, 54, 22, 36, 49, 64,
			
 
				+      ];
			
 
				+      const table_sparkline_6_data = [
			
 
				+        5, 36, 11, 69, 23, 15, 14, 42, 26, 19, 44,
			
 
				+      ];
			
 
				+      const table_sparkline_7_data = [
			
 
				+        12, 56, 21, 39, 73, 45, 64, 52, 36, 59, 74,
			
 
				+      ];
			
 
				+
			
 
				+      createSparklineChart("#table-sparkline-1", table_sparkline_1_data);
			
 
				+      createSparklineChart("#table-sparkline-2", table_sparkline_2_data);
			
 
				+      createSparklineChart("#table-sparkline-3", table_sparkline_3_data);
			
 
				+      createSparklineChart("#table-sparkline-4", table_sparkline_4_data);
			
 
				+      createSparklineChart("#table-sparkline-5", table_sparkline_5_data);
			
 
				+      createSparklineChart("#table-sparkline-6", table_sparkline_6_data);
			
 
				+      createSparklineChart("#table-sparkline-7", table_sparkline_7_data);
			
 
				+
			
 
				+      //-------------
			
 
				+      // - PIE CHART -
			
 
				+      //-------------
			
 
				+
			
 
				+      const pie_chart_options = {
			
 
				+        series: [700, 500, 400, 600, 300, 100],
			
 
				+        chart: {
			
 
				+          type: "donut",
			
 
				+        },
			
 
				+        labels: ["Chrome", "Edge", "FireFox", "Safari", "Opera", "IE"],
			
 
				+        dataLabels: {
			
 
				+          enabled: false,
			
 
				+        },
			
 
				+        colors: [
			
 
				+          "#0d6efd",
			
 
				+          "#20c997",
			
 
				+          "#ffc107",
			
 
				+          "#d63384",
			
 
				+          "#6f42c1",
			
 
				+          "#adb5bd",
			
 
				+        ],
			
 
				+      };
			
 
				+
			
 
				+      const pie_chart = new ApexCharts(
			
 
				+        document.querySelector("#pie-chart"),
			
 
				+        pie_chart_options,
			
 
				+      );
			
 
				+      pie_chart.render();
			
 
				+
			
 
				+      //-----------------
			
 
				+      // - END PIE CHART -
			
 
				+      //-----------------
			
 
				+    </script>
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/index3.astro
+++ b/template/src/html/pages/index3.astro
@@ -0,0 +1,513 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "AdminLTE | Dashboard v3";
			
 
				+const path = "../../dist";
			
 
				+const mainPage = "dashboard";
			
 
				+const page = "index3";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+
			
 
				+    <!-- apexcharts -->
			
 
				+    <link
			
 
				+      rel="stylesheet"
			
 
				+      href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css"
			
 
				+      integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0="
			
 
				+      crossorigin="anonymous"
			
 
				+    />
			
 
				+  </head>
			
 
				+
			
 
				+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">Dashboard v3</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    Dashboard v3
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-lg-6">
			
 
				+                <div class="card mb-4">
			
 
				+                  <div class="card-header border-0">
			
 
				+                    <div class="d-flex justify-content-between">
			
 
				+                      <h3 class="card-title">Online Store Visitors</h3>
			
 
				+                      <a href="javascript:void(0);" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View Report</a>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <div class="card-body">
			
 
				+                    <div class="d-flex">
			
 
				+                      <p class="d-flex flex-column">
			
 
				+                        <span class="fw-bold fs-5">820</span>
			
 
				+                        <span>Visitors Over Time</span>
			
 
				+                      </p>
			
 
				+                      <p class="ms-auto d-flex flex-column text-end">
			
 
				+                        <span class="text-success">
			
 
				+                          <i class="bi bi-arrow-up"></i> 12.5%
			
 
				+                        </span>
			
 
				+                        <span class="text-secondary">Since last week</span>
			
 
				+                      </p>
			
 
				+                    </div>
			
 
				+                    <!-- /.d-flex -->
			
 
				+
			
 
				+                    <div class="position-relative mb-4">
			
 
				+                      <div id="visitors-chart"></div>
			
 
				+                    </div>
			
 
				+
			
 
				+                    <div class="d-flex flex-row justify-content-end">
			
 
				+                      <span class="me-2">
			
 
				+                        <i class="bi bi-square-fill text-primary"></i> This Week
			
 
				+                      </span>
			
 
				+
			
 
				+                      <span>
			
 
				+                        <i class="bi bi-square-fill text-secondary"></i> Last Week
			
 
				+                      </span>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+
			
 
				+                <div class="card mb-4">
			
 
				+                  <div class="card-header border-0">
			
 
				+                    <h3 class="card-title">Products</h3>
			
 
				+                    <div class="card-tools">
			
 
				+                      <a href="#" class="btn btn-tool btn-sm">
			
 
				+                        <i class="bi bi-download"></i>
			
 
				+                      </a>
			
 
				+                      <a href="#" class="btn btn-tool btn-sm">
			
 
				+                        <i class="bi bi-list"></i>
			
 
				+                      </a>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <div class="card-body table-responsive p-0">
			
 
				+                    <table class="table table-striped align-middle">
			
 
				+                      <thead>
			
 
				+                        <tr>
			
 
				+                          <th>Product</th>
			
 
				+                          <th>Price</th>
			
 
				+                          <th>Sales</th>
			
 
				+                          <th>More</th>
			
 
				+                        </tr>
			
 
				+                      </thead>
			
 
				+                      <tbody>
			
 
				+                        <tr>
			
 
				+                          <td>
			
 
				+                            <img
			
 
				+                              src={path + "/assets/img/default-150x150.png"}
			
 
				+                              alt="Product 1"
			
 
				+                              class="rounded-circle img-size-32 me-2"
			
 
				+                            />
			
 
				+                            Some Product
			
 
				+                          </td>
			
 
				+                          <td>$13 USD</td>
			
 
				+                          <td>
			
 
				+                            <small class="text-success me-1">
			
 
				+                              <i class="bi bi-arrow-up"></i>
			
 
				+                              12%
			
 
				+                            </small>
			
 
				+                            12,000 Sold
			
 
				+                          </td>
			
 
				+                          <td>
			
 
				+                            <a href="#" class="text-secondary">
			
 
				+                              <i class="bi bi-search"></i>
			
 
				+                            </a>
			
 
				+                          </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                          <td>
			
 
				+                            <img
			
 
				+                              src={path + "/assets/img/default-150x150.png"}
			
 
				+                              alt="Product 1"
			
 
				+                              class="rounded-circle img-size-32 me-2"
			
 
				+                            />
			
 
				+                            Another Product
			
 
				+                          </td>
			
 
				+                          <td>$29 USD</td>
			
 
				+                          <td>
			
 
				+                            <small class="text-info me-1">
			
 
				+                              <i class="bi bi-arrow-down"></i>
			
 
				+                              0.5%
			
 
				+                            </small>
			
 
				+                            123,234 Sold
			
 
				+                          </td>
			
 
				+                          <td>
			
 
				+                            <a href="#" class="text-secondary">
			
 
				+                              <i class="bi bi-search"></i>
			
 
				+                            </a>
			
 
				+                          </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                          <td>
			
 
				+                            <img
			
 
				+                              src={path + "/assets/img/default-150x150.png"}
			
 
				+                              alt="Product 1"
			
 
				+                              class="rounded-circle img-size-32 me-2"
			
 
				+                            />
			
 
				+                            Amazing Product
			
 
				+                          </td>
			
 
				+                          <td>$1,230 USD</td>
			
 
				+                          <td>
			
 
				+                            <small class="text-danger me-1">
			
 
				+                              <i class="bi bi-arrow-down"></i>
			
 
				+                              3%
			
 
				+                            </small>
			
 
				+                            198 Sold
			
 
				+                          </td>
			
 
				+                          <td>
			
 
				+                            <a href="#" class="text-secondary">
			
 
				+                              <i class="bi bi-search"></i>
			
 
				+                            </a>
			
 
				+                          </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                          <td>
			
 
				+                            <img
			
 
				+                              src={path + "/assets/img/default-150x150.png"}
			
 
				+                              alt="Product 1"
			
 
				+                              class="rounded-circle img-size-32 me-2"
			
 
				+                            />
			
 
				+                            Perfect Item
			
 
				+                            <span class="badge text-bg-danger">NEW</span>
			
 
				+                          </td>
			
 
				+                          <td>$199 USD</td>
			
 
				+                          <td>
			
 
				+                            <small class="text-success me-1">
			
 
				+                              <i class="bi bi-arrow-up"></i>
			
 
				+                              63%
			
 
				+                            </small>
			
 
				+                            87 Sold
			
 
				+                          </td>
			
 
				+                          <td>
			
 
				+                            <a href="#" class="text-secondary">
			
 
				+                              <i class="bi bi-search"></i>
			
 
				+                            </a>
			
 
				+                          </td>
			
 
				+                        </tr>
			
 
				+                      </tbody>
			
 
				+                    </table>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+              </div>
			
 
				+              <!-- /.col-md-6 -->
			
 
				+              <div class="col-lg-6">
			
 
				+                <div class="card mb-4">
			
 
				+                  <div class="card-header border-0">
			
 
				+                    <div class="d-flex justify-content-between">
			
 
				+                      <h3 class="card-title">Sales</h3>
			
 
				+                      <a href="javascript:void(0);" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View Report</a>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <div class="card-body">
			
 
				+                    <div class="d-flex">
			
 
				+                      <p class="d-flex flex-column">
			
 
				+                        <span class="fw-bold fs-5">$18,230.00</span>
			
 
				+                        <span>Sales Over Time</span>
			
 
				+                      </p>
			
 
				+                      <p class="ms-auto d-flex flex-column text-end">
			
 
				+                        <span class="text-success">
			
 
				+                          <i class="bi bi-arrow-up"></i> 33.1%
			
 
				+                        </span>
			
 
				+                        <span class="text-secondary">Since Past Year</span>
			
 
				+                      </p>
			
 
				+                    </div>
			
 
				+                    <!-- /.d-flex -->
			
 
				+
			
 
				+                    <div class="position-relative mb-4">
			
 
				+                      <div id="sales-chart"></div>
			
 
				+                    </div>
			
 
				+
			
 
				+                    <div class="d-flex flex-row justify-content-end">
			
 
				+                      <span class="me-2">
			
 
				+                        <i class="bi bi-square-fill text-primary"></i> This year
			
 
				+                      </span>
			
 
				+
			
 
				+                      <span>
			
 
				+                        <i class="bi bi-square-fill text-secondary"></i> Last year
			
 
				+                      </span>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+
			
 
				+                <div class="card">
			
 
				+                  <div class="card-header border-0">
			
 
				+                    <h3 class="card-title">Online Store Overview</h3>
			
 
				+                    <div class="card-tools">
			
 
				+                      <a href="#" class="btn btn-sm btn-tool">
			
 
				+                        <i class="bi bi-download"></i>
			
 
				+                      </a>
			
 
				+                      <a href="#" class="btn btn-sm btn-tool">
			
 
				+                        <i class="bi bi-list"></i>
			
 
				+                      </a>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <div class="card-body">
			
 
				+                    <div
			
 
				+                      class="d-flex justify-content-between align-items-center border-bottom mb-3"
			
 
				+                    >
			
 
				+                      <p class="text-success fs-2">
			
 
				+                        <svg
			
 
				+                          height="32"
			
 
				+                          fill="none"
			
 
				+                          stroke="currentColor"
			
 
				+                          stroke-width="1.5"
			
 
				+                          viewBox="0 0 24 24"
			
 
				+                          xmlns="http://www.w3.org/2000/svg"
			
 
				+                          aria-hidden="true"
			
 
				+                        >
			
 
				+                          <path
			
 
				+                            stroke-linecap="round"
			
 
				+                            stroke-linejoin="round"
			
 
				+                            d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3"
			
 
				+                          ></path>
			
 
				+                        </svg>
			
 
				+                      </p>
			
 
				+                      <p class="d-flex flex-column text-end">
			
 
				+                        <span class="fw-bold">
			
 
				+                          <i class="bi bi-graph-up-arrow text-success"></i> 12%
			
 
				+                        </span>
			
 
				+                        <span class="text-secondary">CONVERSION RATE</span>
			
 
				+                      </p>
			
 
				+                    </div>
			
 
				+                    <!-- /.d-flex -->
			
 
				+                    <div
			
 
				+                      class="d-flex justify-content-between align-items-center border-bottom mb-3"
			
 
				+                    >
			
 
				+                      <p class="text-info fs-2">
			
 
				+                        <svg
			
 
				+                          height="32"
			
 
				+                          fill="none"
			
 
				+                          stroke="currentColor"
			
 
				+                          stroke-width="1.5"
			
 
				+                          viewBox="0 0 24 24"
			
 
				+                          xmlns="http://www.w3.org/2000/svg"
			
 
				+                          aria-hidden="true"
			
 
				+                        >
			
 
				+                          <path
			
 
				+                            stroke-linecap="round"
			
 
				+                            stroke-linejoin="round"
			
 
				+                            d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
			
 
				+                          ></path>
			
 
				+                        </svg>
			
 
				+                      </p>
			
 
				+                      <p class="d-flex flex-column text-end">
			
 
				+                        <span class="fw-bold">
			
 
				+                          <i class="bi bi-graph-up-arrow text-info"></i> 0.8%
			
 
				+                        </span>
			
 
				+                        <span class="text-secondary">SALES RATE</span>
			
 
				+                      </p>
			
 
				+                    </div>
			
 
				+                    <!-- /.d-flex -->
			
 
				+                    <div
			
 
				+                      class="d-flex justify-content-between align-items-center mb-0"
			
 
				+                    >
			
 
				+                      <p class="text-danger fs-2">
			
 
				+                        <svg
			
 
				+                          height="32"
			
 
				+                          fill="none"
			
 
				+                          stroke="currentColor"
			
 
				+                          stroke-width="1.5"
			
 
				+                          viewBox="0 0 24 24"
			
 
				+                          xmlns="http://www.w3.org/2000/svg"
			
 
				+                          aria-hidden="true"
			
 
				+                        >
			
 
				+                          <path
			
 
				+                            stroke-linecap="round"
			
 
				+                            stroke-linejoin="round"
			
 
				+                            d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"
			
 
				+                          ></path>
			
 
				+                        </svg>
			
 
				+                      </p>
			
 
				+                      <p class="d-flex flex-column text-end">
			
 
				+                        <span class="fw-bold">
			
 
				+                          <i class="bi bi-graph-down-arrow text-danger"></i>
			
 
				+                          1%
			
 
				+                        </span>
			
 
				+                        <span class="text-secondary">REGISTRATION RATE</span>
			
 
				+                      </p>
			
 
				+                    </div>
			
 
				+                    <!-- /.d-flex -->
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <!-- /.col-md-6 -->
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+
			
 
				+    <!-- OPTIONAL SCRIPTS -->
			
 
				+
			
 
				+    <!-- apexcharts -->
			
 
				+    <script
			
 
				+      src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
			
 
				+      integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
			
 
				+      crossorigin="anonymous"
			
 
				+    ></script>
			
 
				+
			
 
				+    <script is:inline>
			
 
				+      // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
			
 
				+      // IT'S ALL JUST JUNK FOR DEMO
			
 
				+      // ++++++++++++++++++++++++++++++++++++++++++
			
 
				+
			
 
				+      const visitors_chart_options = {
			
 
				+        series: [
			
 
				+          {
			
 
				+            name: "High - 2023",
			
 
				+            data: [100, 120, 170, 167, 180, 177, 160],
			
 
				+          },
			
 
				+          {
			
 
				+            name: "Low - 2023",
			
 
				+            data: [60, 80, 70, 67, 80, 77, 100],
			
 
				+          },
			
 
				+        ],
			
 
				+        chart: {
			
 
				+          height: 200,
			
 
				+          type: "line",
			
 
				+          toolbar: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+        },
			
 
				+        colors: ["#0d6efd", "#adb5bd"],
			
 
				+        stroke: {
			
 
				+          curve: "smooth",
			
 
				+        },
			
 
				+        grid: {
			
 
				+          borderColor: "#e7e7e7",
			
 
				+          row: {
			
 
				+            colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
			
 
				+            opacity: 0.5,
			
 
				+          },
			
 
				+        },
			
 
				+        legend: {
			
 
				+          show: false,
			
 
				+        },
			
 
				+        markers: {
			
 
				+          size: 1,
			
 
				+        },
			
 
				+        xaxis: {
			
 
				+          categories: ["22th", "23th", "24th", "25th", "26th", "27th", "28th"],
			
 
				+        },
			
 
				+      };
			
 
				+
			
 
				+      const visitors_chart = new ApexCharts(
			
 
				+        document.querySelector("#visitors-chart"),
			
 
				+        visitors_chart_options
			
 
				+      );
			
 
				+      visitors_chart.render();
			
 
				+
			
 
				+      const sales_chart_options = {
			
 
				+        series: [
			
 
				+          {
			
 
				+            name: "Net Profit",
			
 
				+            data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
			
 
				+          },
			
 
				+          {
			
 
				+            name: "Revenue",
			
 
				+            data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
			
 
				+          },
			
 
				+          {
			
 
				+            name: "Free Cash Flow",
			
 
				+            data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
			
 
				+          },
			
 
				+        ],
			
 
				+        chart: {
			
 
				+          type: "bar",
			
 
				+          height: 200,
			
 
				+        },
			
 
				+        plotOptions: {
			
 
				+          bar: {
			
 
				+            horizontal: false,
			
 
				+            columnWidth: "55%",
			
 
				+            endingShape: "rounded",
			
 
				+          },
			
 
				+        },
			
 
				+        legend: {
			
 
				+          show: false,
			
 
				+        },
			
 
				+        colors: ["#0d6efd", "#20c997", "#ffc107"],
			
 
				+        dataLabels: {
			
 
				+          enabled: false,
			
 
				+        },
			
 
				+        stroke: {
			
 
				+          show: true,
			
 
				+          width: 2,
			
 
				+          colors: ["transparent"],
			
 
				+        },
			
 
				+        xaxis: {
			
 
				+          categories: [
			
 
				+            "Feb",
			
 
				+            "Mar",
			
 
				+            "Apr",
			
 
				+            "May",
			
 
				+            "Jun",
			
 
				+            "Jul",
			
 
				+            "Aug",
			
 
				+            "Sep",
			
 
				+            "Oct",
			
 
				+          ],
			
 
				+        },
			
 
				+        fill: {
			
 
				+          opacity: 1,
			
 
				+        },
			
 
				+        tooltip: {
			
 
				+          y: {
			
 
				+            formatter: function (val) {
			
 
				+              return "$ " + val + " thousands";
			
 
				+            },
			
 
				+          },
			
 
				+        },
			
 
				+      };
			
 
				+
			
 
				+      const sales_chart = new ApexCharts(
			
 
				+        document.querySelector("#sales-chart"),
			
 
				+        sales_chart_options
			
 
				+      );
			
 
				+      sales_chart.render();
			
 
				+    </script>
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/layout/collapsed-sidebar.astro
+++ b/template/src/html/pages/layout/collapsed-sidebar.astro
@@ -0,0 +1,110 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "AdminLTE 4 | Sidebar Mini";
			
 
				+const path = "../../../dist";
			
 
				+const mainPage = "layout";
			
 
				+const page = "collapsed-sidebar";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body
			
 
				+    class="layout-fixed sidebar-expand-lg sidebar-mini sidebar-collapse bg-body-tertiary"
			
 
				+  >
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">Collapsed Sidebar</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    Collapsed Sidebar
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-12">
			
 
				+                <!-- Default box -->
			
 
				+                <div class="card">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Title</h3>
			
 
				+
			
 
				+                    <div class="card-tools">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-collapse"
			
 
				+                        title="Collapse"
			
 
				+                      >
			
 
				+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
			
 
				+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
			
 
				+                      </button>
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-remove"
			
 
				+                        title="Remove"
			
 
				+                      >
			
 
				+                        <i class="bi bi-x-lg"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <div class="card-body">
			
 
				+                    Start creating your amazing application!
			
 
				+                  </div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                  <div class="card-footer">Footer</div>
			
 
				+                  <!-- /.card-footer-->
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/layout/fixed-sidebar.astro
+++ b/template/src/html/pages/layout/fixed-sidebar.astro
@@ -0,0 +1,109 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "AdminLTE 4 | Fixed Sidebar";
			
 
				+const path = "../../../dist";
			
 
				+const mainPage = "layout";
			
 
				+const page = "fixed-sidebar";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">Fixed Layout</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    Fixed Layout
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-12">
			
 
				+                <!-- Default box -->
			
 
				+                <div class="card">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Title</h3>
			
 
				+
			
 
				+                    <div class="card-tools">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-collapse"
			
 
				+                        title="Collapse"
			
 
				+                      >
			
 
				+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
			
 
				+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
			
 
				+                      </button>
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-remove"
			
 
				+                        title="Remove"
			
 
				+                      >
			
 
				+                        <i class="bi bi-x-lg"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <div class="card-body">
			
 
				+                    Start creating your amazing application!
			
 
				+                  </div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                  <div class="card-footer">Footer</div>
			
 
				+                  <!-- /.card-footer-->
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/layout/layout-custom-area.astro
+++ b/template/src/html/pages/layout/layout-custom-area.astro
@@ -0,0 +1,144 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "AdminLTE 4 | Layout Custom Area";
			
 
				+const path = "../../../dist";
			
 
				+const mainPage = "layout";
			
 
				+const page = "layout-custom-area";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<!--begin::Head-->
			
 
				+<head>
			
 
				+  <Head title={title} path={path}/>
			
 
				+</head>
			
 
				+<!--end::Head-->
			
 
				+<!--begin::Body-->
			
 
				+<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
			
 
				+<!--begin::App Wrapper-->
			
 
				+<div class="app-wrapper">
			
 
				+  <Topbar path={path}/>
			
 
				+  <Sidenav path={path} mainPage={mainPage} page={page}/>
			
 
				+
			
 
				+    <!--begin::App Main-->
			
 
				+    <main class="app-main">
			
 
				+      <!--begin::App Content Top Area-->
			
 
				+      <div class="app-content-top-area">
			
 
				+        <!--begin::Container-->
			
 
				+        <div class="container-fluid">
			
 
				+          <div class="row">
			
 
				+            <div class="col-md-6">
			
 
				+              <div>App Content Top Area</div>
			
 
				+            </div>
			
 
				+
			
 
				+            <div class="col-md-6 text-end">
			
 
				+              <button type="submit" class="btn btn-primary" name="save" value="create">Create Admin</button>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <!--end::Container-->
			
 
				+      </div>
			
 
				+      <!--end::App Content Bottom Area-->
			
 
				+      <!--begin::App Content Header-->
			
 
				+      <div class="app-content-header">
			
 
				+        <!--begin::Container-->
			
 
				+        <div class="container-fluid">
			
 
				+          <!--begin::Row-->
			
 
				+          <div class="row">
			
 
				+            <div class="col-sm-8">
			
 
				+              <h3 class="mb-0"> Layout Custom Area </h3>
			
 
				+            </div>
			
 
				+            <div class="col-sm-4">
			
 
				+              <ol class="breadcrumb float-sm-end">
			
 
				+                <li class="breadcrumb-item"><a href="#">Home</a></li>
			
 
				+                <li class="breadcrumb-item active" aria-current="page">
			
 
				+                  Fixed Layout
			
 
				+                </li>
			
 
				+              </ol>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+          <!--end::Row-->
			
 
				+        </div>
			
 
				+        <!--end::Container-->
			
 
				+      </div>
			
 
				+      <!--end::App Content Header-->
			
 
				+      <!--begin::App Content-->
			
 
				+      <div class="app-content">
			
 
				+        <!--begin::Container-->
			
 
				+        <div class="container-fluid">
			
 
				+          <!--begin::Row-->
			
 
				+          <div class="row">
			
 
				+            <div class="col-12">
			
 
				+              <!-- Default box -->
			
 
				+              <div class="card">
			
 
				+                <div class="card-header">
			
 
				+                  <h3 class="card-title">Title</h3>
			
 
				+
			
 
				+                  <div class="card-tools">
			
 
				+                    <button
			
 
				+                      type="button"
			
 
				+                      class="btn btn-tool"
			
 
				+                      data-lte-toggle="card-collapse"
			
 
				+                      title="Collapse"
			
 
				+                    >
			
 
				+                      <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
			
 
				+                      <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
			
 
				+                    </button>
			
 
				+                    <button
			
 
				+                      type="button"
			
 
				+                      class="btn btn-tool"
			
 
				+                      data-lte-toggle="card-remove"
			
 
				+                      title="Remove"
			
 
				+                    >
			
 
				+                      <i class="bi bi-x-lg"></i>
			
 
				+                    </button>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <div class="card-body">
			
 
				+                  Start creating your amazing application!
			
 
				+                </div>
			
 
				+                <!-- /.card-body -->
			
 
				+                <div class="card-footer">Footer</div>
			
 
				+                <!-- /.card-footer-->
			
 
				+              </div>
			
 
				+              <!-- /.card -->
			
 
				+            </div>
			
 
				+          </div>
			
 
				+          <!--end::Row-->
			
 
				+        </div>
			
 
				+        <!--end::Container-->
			
 
				+      </div>
			
 
				+      <!--end::App Content-->
			
 
				+
			
 
				+      <!--begin::App Content Bottom Area-->
			
 
				+      <div class="app-content-bottom-area">
			
 
				+         <!--begin::Container-->
			
 
				+        <div class="container-fluid">
			
 
				+          <div class="row">
			
 
				+            <div class="col-md-6">
			
 
				+              <div>App Content Bottom Area</div>
			
 
				+            </div>
			
 
				+
			
 
				+            <div class="col-md-6 text-end">
			
 
				+              <button type="submit" class="btn btn-secondary" name="save" value="create">Refresh</button>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <!--end::Container-->
			
 
				+      </div>
			
 
				+      <!--end::App Content Bottom Area-->
			
 
				+    </main>
			
 
				+    <!--end::App Main-->
			
 
				+    <Footer/>
			
 
				+</div>
			
 
				+<!--end::App Wrapper-->
			
 
				+<!--begin::Script-->
			
 
				+<Scripts path={path}/>
			
 
				+<!--end::Script-->
			
 
				+</body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/layout/layout-rtl.astro
+++ b/template/src/html/pages/layout/layout-rtl.astro
@@ -0,0 +1,109 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "AdminLTE 4 | Layout RTL";
			
 
				+const path = "../../../dist";
			
 
				+const mainPage = "layout";
			
 
				+const page = "layout-rtl";
			
 
				+const isRtl = true;
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en" dir="rtl">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} isRtl={isRtl} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">Layout RTL</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    Layout RTL
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-12">
			
 
				+                <!-- Default box -->
			
 
				+                <div class="card">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Title</h3>
			
 
				+
			
 
				+                    <div class="card-tools">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-collapse"
			
 
				+                        title="Collapse"
			
 
				+                      >
			
 
				+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
			
 
				+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
			
 
				+                      </button>
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-remove"
			
 
				+                        title="Remove"
			
 
				+                      >
			
 
				+                        <i class="bi bi-x-lg"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <div class="card-body">
			
 
				+                    Start creating your amazing application!
			
 
				+                  </div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                  <div class="card-footer">Footer</div>
			
 
				+                  <!-- /.card-footer-->
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/layout/logo-switch.astro
+++ b/template/src/html/pages/layout/logo-switch.astro
@@ -0,0 +1,212 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+import { convertPathToHtml } from "../../../utils/index.js";
			
 
				+
			
 
				+const title = "AdminLTE 4 | Sidebar Mini";
			
 
				+const path = "../../../dist";
			
 
				+const htmlPath = convertPathToHtml(path);
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="layout-fixed sidebar-expand-lg sidebar-mini bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <!--begin::Sidebar-->
			
 
				+      <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
			
 
				+        <!--begin::Sidebar Brand-->
			
 
				+        <div class="sidebar-brand">
			
 
				+          <!--begin::Brand Link-->
			
 
				+          <a href={htmlPath + "/index.html"} class="brand-link logo-switch">
			
 
				+            <!--begin::Brand Image Small-->
			
 
				+            <img
			
 
				+            src={path + "/assets/img/AdminLTELogo.png"}
			
 
				+            alt="AdminLTE Logo Small"
			
 
				+            class="brand-image-xl logo-xs opacity-75 shadow"
			
 
				+            />
			
 
				+            <!--end::Brand Image Small-->
			
 
				+            <!--begin::Brand Image Large-->
			
 
				+            <img
			
 
				+            src={path + "/assets/img/AdminLTEFullLogo.png"}
			
 
				+            alt="AdminLTE Logo Large"
			
 
				+            class="brand-image-xs logo-xl opacity-75"
			
 
				+            />
			
 
				+            <!--end::Brand Image Large-->
			
 
				+          </a>
			
 
				+          <!--end::Brand Link-->
			
 
				+        </div>
			
 
				+        <!-- Sidebar -->
			
 
				+        <!--begin::Sidebar Wrapper-->
			
 
				+        <div class="sidebar-wrapper">
			
 
				+          <nav class="mt-2">
			
 
				+            <!--begin::Sidebar Menu-->
			
 
				+            <ul
			
 
				+              class="nav sidebar-menu flex-column"
			
 
				+              data-lte-toggle="treeview"
			
 
				+              role="menu"
			
 
				+              data-accordion="false"
			
 
				+            >
			
 
				+              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
			
 
				+              <li class="nav-item">
			
 
				+                <a href="#" class="nav-link">
			
 
				+                  <i class="nav-icon bi bi-circle-fill"></i>
			
 
				+                  <p>Level 1</p>
			
 
				+                </a>
			
 
				+              </li>
			
 
				+              <li class="nav-item">
			
 
				+                <a href="#" class="nav-link">
			
 
				+                  <i class="nav-icon bi bi-circle-fill"></i>
			
 
				+                  <p>
			
 
				+                    Level 1
			
 
				+                    <i class="nav-arrow bi bi-chevron-right"></i>
			
 
				+                  </p>
			
 
				+                </a>
			
 
				+                <ul class="nav nav-treeview">
			
 
				+                  <li class="nav-item">
			
 
				+                    <a href="#" class="nav-link">
			
 
				+                      <i class="nav-icon bi bi-circle"></i>
			
 
				+                      <p>Level 2</p>
			
 
				+                    </a>
			
 
				+                  </li>
			
 
				+                  <li class="nav-item">
			
 
				+                    <a href="#" class="nav-link">
			
 
				+                      <i class="nav-icon bi bi-circle"></i>
			
 
				+                      <p>
			
 
				+                        Level 2
			
 
				+                        <i class="nav-arrow bi bi-chevron-right"></i>
			
 
				+                      </p>
			
 
				+                    </a>
			
 
				+                    <ul class="nav nav-treeview">
			
 
				+                      <li class="nav-item">
			
 
				+                        <a href="#" class="nav-link">
			
 
				+                          <i class="nav-icon bi bi-record-circle-fill"></i>
			
 
				+                          <p>Level 3</p>
			
 
				+                        </a>
			
 
				+                      </li>
			
 
				+                      <li class="nav-item">
			
 
				+                        <a href="#" class="nav-link">
			
 
				+                          <i class="nav-icon bi bi-record-circle-fill"></i>
			
 
				+                          <p>Level 3</p>
			
 
				+                        </a>
			
 
				+                      </li>
			
 
				+                      <li class="nav-item">
			
 
				+                        <a href="#" class="nav-link">
			
 
				+                          <i class="nav-icon bi bi-record-circle-fill"></i>
			
 
				+                          <p>Level 3</p>
			
 
				+                        </a>
			
 
				+                      </li>
			
 
				+                    </ul>
			
 
				+                  </li>
			
 
				+                  <li class="nav-item">
			
 
				+                    <a href="#" class="nav-link">
			
 
				+                      <i class="nav-icon bi bi-circle"></i>
			
 
				+                      <p>Level 2</p>
			
 
				+                    </a>
			
 
				+                  </li>
			
 
				+                </ul>
			
 
				+              </li>
			
 
				+              <li class="nav-item">
			
 
				+                <a href="#" class="nav-link">
			
 
				+                  <i class="nav-icon bi bi-circle-fill"></i>
			
 
				+                  <p>Level 1</p>
			
 
				+                </a>
			
 
				+              </li>
			
 
				+            </ul>
			
 
				+            <!--end::Sidebar Menu-->
			
 
				+          </nav>
			
 
				+        </div>
			
 
				+        <!--end::Sidebar Wrapper-->
			
 
				+      </aside>
			
 
				+      <!--end::Sidebar-->
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">Logo Switch</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    Logo Switch
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-12">
			
 
				+                <!-- Default box -->
			
 
				+                <div class="card">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Title</h3>
			
 
				+
			
 
				+                    <div class="card-tools">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-collapse"
			
 
				+                        title="Collapse"
			
 
				+                      >
			
 
				+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
			
 
				+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
			
 
				+                      </button>
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-remove"
			
 
				+                        title="Remove"
			
 
				+                      >
			
 
				+                        <i class="bi bi-x-lg"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <div class="card-body">
			
 
				+                    Start creating your amazing application!
			
 
				+                  </div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                  <div class="card-footer">Footer</div>
			
 
				+                  <!-- /.card-footer-->
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--begin::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/layout/sidebar-mini.astro
+++ b/template/src/html/pages/layout/sidebar-mini.astro
@@ -0,0 +1,108 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "AdminLTE 4 | Sidebar Mini";
			
 
				+const path = "../../../dist";
			
 
				+const mainPage = "layout";
			
 
				+const page = "sidebar-mini";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="layout-fixed sidebar-expand-lg sidebar-mini bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">Sidebar Mini</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    Sidebar Mini
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-12">
			
 
				+                <!-- Default box -->
			
 
				+                <div class="card">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Title</h3>
			
 
				+
			
 
				+                    <div class="card-tools">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-collapse"
			
 
				+                        title="Collapse"
			
 
				+                      >
			
 
				+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
			
 
				+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
			
 
				+                      </button>
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-remove"
			
 
				+                        title="Remove"
			
 
				+                      >
			
 
				+                        <i class="bi bi-x-lg"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <div class="card-body">
			
 
				+                    Start creating your amazing application!
			
 
				+                  </div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                  <div class="card-footer">Footer</div>
			
 
				+                  <!-- /.card-footer-->
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/layout/unfixed-sidebar.astro
+++ b/template/src/html/pages/layout/unfixed-sidebar.astro
@@ -0,0 +1,107 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "AdminLTE 4 | Unfixed Sidebar";
			
 
				+const path = "../../../dist";
			
 
				+const mainPage = "layout";
			
 
				+const page = "unfixed-sidebar";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="sidebar-expand-lg bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">Unfixed Layout</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    Unfixed Layout
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-12">
			
 
				+                <!-- Default box -->
			
 
				+                <div class="card">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Title</h3>
			
 
				+
			
 
				+                    <div class="card-tools">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-collapse"
			
 
				+                        title="Collapse"
			
 
				+                      >
			
 
				+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
			
 
				+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
			
 
				+                      </button>
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-remove"
			
 
				+                        title="Remove"
			
 
				+                      >
			
 
				+                        <i class="bi bi-x-lg"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <div class="card-body">
			
 
				+                    Start creating your amazing application!
			
 
				+                  </div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                  <div class="card-footer">Footer</div>
			
 
				+                  <!-- /.card-footer-->
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/tables/simple.astro
+++ b/template/src/html/pages/tables/simple.astro
@@ -0,0 +1,472 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "AdminLTE 4 | Simple Tables";
			
 
				+const path = "../../../dist";
			
 
				+const mainPage = "tables";
			
 
				+const page = "simple";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">Simple Tables</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    Simple Tables
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-md-6">
			
 
				+                <div class="card mb-4">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Bordered Table</h3>
			
 
				+                  </div>
			
 
				+                  <!-- /.card-header -->
			
 
				+                  <div class="card-body">
			
 
				+                    <table class="table table-bordered">
			
 
				+                      <thead>
			
 
				+                        <tr>
			
 
				+                          <th style="width: 10px">#</th>
			
 
				+                          <th>Task</th>
			
 
				+                          <th>Progress</th>
			
 
				+                          <th style="width: 40px">Label</th>
			
 
				+                        </tr>
			
 
				+                      </thead>
			
 
				+                      <tbody>
			
 
				+                        <tr class="align-middle">
			
 
				+                          <td>1.</td>
			
 
				+                          <td>Update software</td>
			
 
				+                          <td>
			
 
				+                            <div class="progress progress-xs">
			
 
				+                              <div
			
 
				+                                class="progress-bar progress-bar-danger"
			
 
				+                                style="width: 55%"
			
 
				+                              >
			
 
				+                              </div>
			
 
				+                            </div>
			
 
				+                          </td>
			
 
				+                          <td><span class="badge text-bg-danger">55%</span></td>
			
 
				+                        </tr>
			
 
				+                        <tr class="align-middle">
			
 
				+                          <td>2.</td>
			
 
				+                          <td>Clean database</td>
			
 
				+                          <td>
			
 
				+                            <div class="progress progress-xs">
			
 
				+                              <div
			
 
				+                                class="progress-bar text-bg-warning"
			
 
				+                                style="width: 70%"
			
 
				+                              >
			
 
				+                              </div>
			
 
				+                            </div>
			
 
				+                          </td>
			
 
				+                          <td>
			
 
				+                            <span class="badge text-bg-warning">70%</span>
			
 
				+                          </td>
			
 
				+                        </tr>
			
 
				+                        <tr class="align-middle">
			
 
				+                          <td>3.</td>
			
 
				+                          <td>Cron job running</td>
			
 
				+                          <td>
			
 
				+                            <div
			
 
				+                              class="progress progress-xs progress-striped active"
			
 
				+                            >
			
 
				+                              <div
			
 
				+                                class="progress-bar text-bg-primary"
			
 
				+                                style="width: 30%"
			
 
				+                              >
			
 
				+                              </div>
			
 
				+                            </div>
			
 
				+                          </td>
			
 
				+                          <td>
			
 
				+                            <span class="badge text-bg-primary">30%</span>
			
 
				+                          </td>
			
 
				+                        </tr>
			
 
				+                        <tr class="align-middle">
			
 
				+                          <td>4.</td>
			
 
				+                          <td>Fix and squish bugs</td>
			
 
				+                          <td>
			
 
				+                            <div
			
 
				+                              class="progress progress-xs progress-striped active"
			
 
				+                            >
			
 
				+                              <div
			
 
				+                                class="progress-bar text-bg-success"
			
 
				+                                style="width: 90%"
			
 
				+                              >
			
 
				+                              </div>
			
 
				+                            </div>
			
 
				+                          </td>
			
 
				+                          <td>
			
 
				+                            <span class="badge text-bg-success">90%</span>
			
 
				+                          </td>
			
 
				+                        </tr>
			
 
				+                      </tbody>
			
 
				+                    </table>
			
 
				+                  </div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                  <div class="card-footer clearfix">
			
 
				+                    <ul class="pagination pagination-sm m-0 float-end">
			
 
				+                      <li class="page-item">
			
 
				+                        <a class="page-link" href="#">&laquo;</a>
			
 
				+                      </li>
			
 
				+                      <li class="page-item">
			
 
				+                        <a class="page-link" href="#">1</a>
			
 
				+                      </li>
			
 
				+                      <li class="page-item">
			
 
				+                        <a class="page-link" href="#">2</a>
			
 
				+                      </li>
			
 
				+                      <li class="page-item">
			
 
				+                        <a class="page-link" href="#">3</a>
			
 
				+                      </li>
			
 
				+                      <li class="page-item">
			
 
				+                        <a class="page-link" href="#">&raquo;</a>
			
 
				+                      </li>
			
 
				+                    </ul>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+
			
 
				+                <div class="card mb-4">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Condensed Full Width Table</h3>
			
 
				+                  </div>
			
 
				+                  <!-- /.card-header -->
			
 
				+                  <div class="card-body p-0">
			
 
				+                    <table class="table table-sm">
			
 
				+                      <thead>
			
 
				+                        <tr>
			
 
				+                          <th style="width: 10px">#</th>
			
 
				+                          <th>Task</th>
			
 
				+                          <th>Progress</th>
			
 
				+                          <th style="width: 40px">Label</th>
			
 
				+                        </tr>
			
 
				+                      </thead>
			
 
				+                      <tbody>
			
 
				+                        <tr class="align-middle">
			
 
				+                          <td>1.</td>
			
 
				+                          <td>Update software</td>
			
 
				+                          <td>
			
 
				+                            <div class="progress progress-xs">
			
 
				+                              <div
			
 
				+                                class="progress-bar progress-bar-danger"
			
 
				+                                style="width: 55%"
			
 
				+                              >
			
 
				+                              </div>
			
 
				+                            </div>
			
 
				+                          </td>
			
 
				+                          <td><span class="badge text-bg-danger">55%</span></td>
			
 
				+                        </tr>
			
 
				+                        <tr class="align-middle">
			
 
				+                          <td>2.</td>
			
 
				+                          <td>Clean database</td>
			
 
				+                          <td>
			
 
				+                            <div class="progress progress-xs">
			
 
				+                              <div
			
 
				+                                class="progress-bar text-bg-warning"
			
 
				+                                style="width: 70%"
			
 
				+                              >
			
 
				+                              </div>
			
 
				+                            </div>
			
 
				+                          </td>
			
 
				+                          <td>
			
 
				+                            <span class="badge text-bg-warning">70%</span>
			
 
				+                          </td>
			
 
				+                        </tr>
			
 
				+                        <tr class="align-middle">
			
 
				+                          <td>3.</td>
			
 
				+                          <td>Cron job running</td>
			
 
				+                          <td>
			
 
				+                            <div
			
 
				+                              class="progress progress-xs progress-striped active"
			
 
				+                            >
			
 
				+                              <div
			
 
				+                                class="progress-bar text-bg-primary"
			
 
				+                                style="width: 30%"
			
 
				+                              >
			
 
				+                              </div>
			
 
				+                            </div>
			
 
				+                          </td>
			
 
				+                          <td>
			
 
				+                            <span class="badge text-bg-primary">30%</span>
			
 
				+                          </td>
			
 
				+                        </tr>
			
 
				+                        <tr class="align-middle">
			
 
				+                          <td>4.</td>
			
 
				+                          <td>Fix and squish bugs</td>
			
 
				+                          <td>
			
 
				+                            <div
			
 
				+                              class="progress progress-xs progress-striped active"
			
 
				+                            >
			
 
				+                              <div
			
 
				+                                class="progress-bar text-bg-success"
			
 
				+                                style="width: 90%"
			
 
				+                              >
			
 
				+                              </div>
			
 
				+                            </div>
			
 
				+                          </td>
			
 
				+                          <td>
			
 
				+                            <span class="badge text-bg-success">90%</span>
			
 
				+                          </td>
			
 
				+                        </tr>
			
 
				+                      </tbody>
			
 
				+                    </table>
			
 
				+                  </div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+              <div class="col-md-6">
			
 
				+                <div class="card mb-4">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Simple Full Width Table</h3>
			
 
				+
			
 
				+                    <div class="card-tools">
			
 
				+                      <ul class="pagination pagination-sm float-end">
			
 
				+                        <li class="page-item">
			
 
				+                          <a class="page-link" href="#">&laquo;</a>
			
 
				+                        </li>
			
 
				+                        <li class="page-item">
			
 
				+                          <a class="page-link" href="#">1</a>
			
 
				+                        </li>
			
 
				+                        <li class="page-item">
			
 
				+                          <a class="page-link" href="#">2</a>
			
 
				+                        </li>
			
 
				+                        <li class="page-item">
			
 
				+                          <a class="page-link" href="#">3</a>
			
 
				+                        </li>
			
 
				+                        <li class="page-item">
			
 
				+                          <a class="page-link" href="#">&raquo;</a>
			
 
				+                        </li>
			
 
				+                      </ul>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <!-- /.card-header -->
			
 
				+                  <div class="card-body p-0">
			
 
				+                    <table class="table">
			
 
				+                      <thead>
			
 
				+                        <tr>
			
 
				+                          <th style="width: 10px">#</th>
			
 
				+                          <th>Task</th>
			
 
				+                          <th>Progress</th>
			
 
				+                          <th style="width: 40px">Label</th>
			
 
				+                        </tr>
			
 
				+                      </thead>
			
 
				+                      <tbody>
			
 
				+                        <tr class="align-middle">
			
 
				+                          <td>1.</td>
			
 
				+                          <td>Update software</td>
			
 
				+                          <td>
			
 
				+                            <div class="progress progress-xs">
			
 
				+                              <div
			
 
				+                                class="progress-bar progress-bar-danger"
			
 
				+                                style="width: 55%"
			
 
				+                              >
			
 
				+                              </div>
			
 
				+                            </div>
			
 
				+                          </td>
			
 
				+                          <td><span class="badge text-bg-danger">55%</span></td>
			
 
				+                        </tr>
			
 
				+                        <tr class="align-middle">
			
 
				+                          <td>2.</td>
			
 
				+                          <td>Clean database</td>
			
 
				+                          <td>
			
 
				+                            <div class="progress progress-xs">
			
 
				+                              <div
			
 
				+                                class="progress-bar text-bg-warning"
			
 
				+                                style="width: 70%"
			
 
				+                              >
			
 
				+                              </div>
			
 
				+                            </div>
			
 
				+                          </td>
			
 
				+                          <td>
			
 
				+                            <span class="badge text-bg-warning">70%</span>
			
 
				+                          </td>
			
 
				+                        </tr>
			
 
				+                        <tr class="align-middle">
			
 
				+                          <td>3.</td>
			
 
				+                          <td>Cron job running</td>
			
 
				+                          <td>
			
 
				+                            <div
			
 
				+                              class="progress progress-xs progress-striped active"
			
 
				+                            >
			
 
				+                              <div
			
 
				+                                class="progress-bar text-bg-primary"
			
 
				+                                style="width: 30%"
			
 
				+                              >
			
 
				+                              </div>
			
 
				+                            </div>
			
 
				+                          </td>
			
 
				+                          <td>
			
 
				+                            <span class="badge text-bg-primary">30%</span>
			
 
				+                          </td>
			
 
				+                        </tr>
			
 
				+                        <tr class="align-middle">
			
 
				+                          <td>4.</td>
			
 
				+                          <td>Fix and squish bugs</td>
			
 
				+                          <td>
			
 
				+                            <div
			
 
				+                              class="progress progress-xs progress-striped active"
			
 
				+                            >
			
 
				+                              <div
			
 
				+                                class="progress-bar text-bg-success"
			
 
				+                                style="width: 90%"
			
 
				+                              >
			
 
				+                              </div>
			
 
				+                            </div>
			
 
				+                          </td>
			
 
				+                          <td>
			
 
				+                            <span class="badge text-bg-success">90%</span>
			
 
				+                          </td>
			
 
				+                        </tr>
			
 
				+                      </tbody>
			
 
				+                    </table>
			
 
				+                  </div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+
			
 
				+                <div class="card mb-4">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Striped Full Width Table</h3>
			
 
				+                  </div>
			
 
				+                  <!-- /.card-header -->
			
 
				+                  <div class="card-body p-0">
			
 
				+                    <table class="table table-striped">
			
 
				+                      <thead>
			
 
				+                        <tr>
			
 
				+                          <th style="width: 10px">#</th>
			
 
				+                          <th>Task</th>
			
 
				+                          <th>Progress</th>
			
 
				+                          <th style="width: 40px">Label</th>
			
 
				+                        </tr>
			
 
				+                      </thead>
			
 
				+                      <tbody>
			
 
				+                        <tr class="align-middle">
			
 
				+                          <td>1.</td>
			
 
				+                          <td>Update software</td>
			
 
				+                          <td>
			
 
				+                            <div class="progress progress-xs">
			
 
				+                              <div
			
 
				+                                class="progress-bar progress-bar-danger"
			
 
				+                                style="width: 55%"
			
 
				+                              >
			
 
				+                              </div>
			
 
				+                            </div>
			
 
				+                          </td>
			
 
				+                          <td><span class="badge text-bg-danger">55%</span></td>
			
 
				+                        </tr>
			
 
				+                        <tr class="align-middle">
			
 
				+                          <td>2.</td>
			
 
				+                          <td>Clean database</td>
			
 
				+                          <td>
			
 
				+                            <div class="progress progress-xs">
			
 
				+                              <div
			
 
				+                                class="progress-bar text-bg-warning"
			
 
				+                                style="width: 70%"
			
 
				+                              >
			
 
				+                              </div>
			
 
				+                            </div>
			
 
				+                          </td>
			
 
				+                          <td>
			
 
				+                            <span class="badge text-bg-warning">70%</span>
			
 
				+                          </td>
			
 
				+                        </tr>
			
 
				+                        <tr class="align-middle">
			
 
				+                          <td>3.</td>
			
 
				+                          <td>Cron job running</td>
			
 
				+                          <td>
			
 
				+                            <div
			
 
				+                              class="progress progress-xs progress-striped active"
			
 
				+                            >
			
 
				+                              <div
			
 
				+                                class="progress-bar text-bg-primary"
			
 
				+                                style="width: 30%"
			
 
				+                              >
			
 
				+                              </div>
			
 
				+                            </div>
			
 
				+                          </td>
			
 
				+                          <td>
			
 
				+                            <span class="badge text-bg-primary">30%</span>
			
 
				+                          </td>
			
 
				+                        </tr>
			
 
				+                        <tr class="align-middle">
			
 
				+                          <td>4.</td>
			
 
				+                          <td>Fix and squish bugs</td>
			
 
				+                          <td>
			
 
				+                            <div
			
 
				+                              class="progress progress-xs progress-striped active"
			
 
				+                            >
			
 
				+                              <div
			
 
				+                                class="progress-bar text-bg-success"
			
 
				+                                style="width: 90%"
			
 
				+                              >
			
 
				+                              </div>
			
 
				+                            </div>
			
 
				+                          </td>
			
 
				+                          <td>
			
 
				+                            <span class="badge text-bg-success">90%</span>
			
 
				+                          </td>
			
 
				+                        </tr>
			
 
				+                      </tbody>
			
 
				+                    </table>
			
 
				+                  </div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/widgets/cards.astro
+++ b/template/src/html/pages/widgets/cards.astro
@@ -0,0 +1,373 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "AdminLTE 4 | Widgets - Cards";
			
 
				+const path = "../../../dist";
			
 
				+const mainPage = "widgets";
			
 
				+const page = "cards";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">Cards</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    Cards
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <h4 class="mb-2">Cards</h4>
			
 
				+
			
 
				+            <h5 class="mb-2">Abilities</h5>
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row g-4 mb-4">
			
 
				+              <div class="col-md-3">
			
 
				+                <div class="card card-primary collapsed-card">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Expandable</h3>
			
 
				+
			
 
				+                    <div class="card-tools">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-collapse"
			
 
				+                      >
			
 
				+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
			
 
				+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                    <!-- /.card-tools -->
			
 
				+                  </div>
			
 
				+                  <!-- /.card-header -->
			
 
				+                  <div class="card-body">The body of the card</div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+              <div class="col-md-3">
			
 
				+                <div class="card card-success">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Collapsable</h3>
			
 
				+
			
 
				+                    <div class="card-tools">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-collapse"
			
 
				+                      >
			
 
				+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
			
 
				+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                    <!-- /.card-tools -->
			
 
				+                  </div>
			
 
				+                  <!-- /.card-header -->
			
 
				+                  <div class="card-body">The body of the card</div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+              <div class="col-md-3">
			
 
				+                <div class="card card-warning">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Removable</h3>
			
 
				+
			
 
				+                    <div class="card-tools">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-remove"
			
 
				+                      >
			
 
				+                        <i class="bi bi-x-lg"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                    <!-- /.card-tools -->
			
 
				+                  </div>
			
 
				+                  <!-- /.card-header -->
			
 
				+                  <div class="card-body">The body of the card</div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+              <div class="col-md-3">
			
 
				+                <div class="card card-danger">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Maximizable</h3>
			
 
				+
			
 
				+                    <div class="card-tools">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-maximize"
			
 
				+                      >
			
 
				+                        <i data-lte-icon="maximize" class="bi bi-fullscreen"></i>
			
 
				+                        <i data-lte-icon="minimize" class="bi bi-fullscreen-exit"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                    <!-- /.card-tools -->
			
 
				+                  </div>
			
 
				+                  <!-- /.card-header -->
			
 
				+                  <div class="card-body">The body of the card</div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+
			
 
				+            <h5 class="mb-2">Card Outlined</h5>
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row g-4 mb-4">
			
 
				+              <div class="col-md-3">
			
 
				+                <div class="card card-outline card-primary collapsed-card">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Expandable</h3>
			
 
				+
			
 
				+                    <div class="card-tools">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-collapse"
			
 
				+                      >
			
 
				+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
			
 
				+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                    <!-- /.card-tools -->
			
 
				+                  </div>
			
 
				+                  <!-- /.card-header -->
			
 
				+                  <div class="card-body">The body of the card</div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+              <div class="col-md-3">
			
 
				+                <div class="card card-outline card-success">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Collapsable</h3>
			
 
				+
			
 
				+                    <div class="card-tools">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-collapse"
			
 
				+                      >
			
 
				+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
			
 
				+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                    <!-- /.card-tools -->
			
 
				+                  </div>
			
 
				+                  <!-- /.card-header -->
			
 
				+                  <div class="card-body">The body of the card</div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+              <div class="col-md-3">
			
 
				+                <div class="card card-outline card-warning">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Removable</h3>
			
 
				+
			
 
				+                    <div class="card-tools">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-remove"
			
 
				+                      >
			
 
				+                        <i class="bi bi-x-lg"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                    <!-- /.card-tools -->
			
 
				+                  </div>
			
 
				+                  <!-- /.card-header -->
			
 
				+                  <div class="card-body">The body of the card</div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+              <div class="col-md-3">
			
 
				+                <div class="card card-outline card-danger">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Maximizable</h3>
			
 
				+
			
 
				+                    <div class="card-tools">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-maximize"
			
 
				+                      >
			
 
				+                        <i data-lte-icon="maximize" class="bi bi-fullscreen"></i>
			
 
				+                        <i data-lte-icon="minimize" class="bi bi-fullscreen-exit"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                    <!-- /.card-tools -->
			
 
				+                  </div>
			
 
				+                  <!-- /.card-header -->
			
 
				+                  <div class="card-body">The body of the card</div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+
			
 
				+            <h5 class="mb-2">Card with <code>.text-bg-*</code></h5>
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row g-4 mb-4">
			
 
				+              <div class="col-md-3">
			
 
				+                <div class="card text-bg-primary collapsed-card">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Expandable</h3>
			
 
				+
			
 
				+                    <div class="card-tools">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-collapse"
			
 
				+                      >
			
 
				+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
			
 
				+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                    <!-- /.card-tools -->
			
 
				+                  </div>
			
 
				+                  <!-- /.card-header -->
			
 
				+                  <div class="card-body">The body of the card</div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+              <div class="col-md-3">
			
 
				+                <div class="card text-bg-success">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Collapsable</h3>
			
 
				+
			
 
				+                    <div class="card-tools">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-collapse"
			
 
				+                      >
			
 
				+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
			
 
				+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                    <!-- /.card-tools -->
			
 
				+                  </div>
			
 
				+                  <!-- /.card-header -->
			
 
				+                  <div class="card-body">The body of the card</div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+              <div class="col-md-3">
			
 
				+                <div class="card text-bg-warning">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Removable</h3>
			
 
				+
			
 
				+                    <div class="card-tools">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-remove"
			
 
				+                      >
			
 
				+                        <i class="bi bi-x-lg"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                    <!-- /.card-tools -->
			
 
				+                  </div>
			
 
				+                  <!-- /.card-header -->
			
 
				+                  <div class="card-body">The body of the card</div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+              <div class="col-md-3">
			
 
				+                <div class="card text-bg-danger">
			
 
				+                  <div class="card-header">
			
 
				+                    <h3 class="card-title">Maximizable</h3>
			
 
				+
			
 
				+                    <div class="card-tools">
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        class="btn btn-tool"
			
 
				+                        data-lte-toggle="card-maximize"
			
 
				+                      >
			
 
				+                        <i data-lte-icon="maximize" class="bi bi-fullscreen"></i>
			
 
				+                        <i data-lte-icon="minimize" class="bi bi-fullscreen-exit"></i>
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                    <!-- /.card-tools -->
			
 
				+                  </div>
			
 
				+                  <!-- /.card-header -->
			
 
				+                  <div class="card-body">The body of the card</div>
			
 
				+                  <!-- /.card-body -->
			
 
				+                </div>
			
 
				+                <!-- /.card -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/widgets/info-box.astro
+++ b/template/src/html/pages/widgets/info-box.astro
@@ -0,0 +1,413 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "AdminLTE 4 | Widgets - Info Box";
			
 
				+const path = "../../../dist";
			
 
				+const mainPage = "widgets";
			
 
				+const page = "info-box";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">Info Box</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    Info Box
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <h5 class="mb-2">Info Box</h5>
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-12 col-sm-6 col-md-3">
			
 
				+                <div class="info-box">
			
 
				+                  <span class="info-box-icon text-bg-primary shadow-sm">
			
 
				+                    <i class="bi bi-gear-fill"></i>
			
 
				+                  </span>
			
 
				+
			
 
				+                  <div class="info-box-content">
			
 
				+                    <span class="info-box-text">CPU Traffic</span>
			
 
				+                    <span class="info-box-number">
			
 
				+                      10
			
 
				+                      <small>%</small>
			
 
				+                    </span>
			
 
				+                  </div>
			
 
				+                  <!-- /.info-box-content -->
			
 
				+                </div>
			
 
				+                <!-- /.info-box -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+
			
 
				+              <div class="col-12 col-sm-6 col-md-3">
			
 
				+                <div class="info-box">
			
 
				+                  <span class="info-box-icon text-bg-success shadow-sm">
			
 
				+                    <i class="bi bi-cart-fill"></i>
			
 
				+                  </span>
			
 
				+
			
 
				+                  <div class="info-box-content">
			
 
				+                    <span class="info-box-text">Sales</span>
			
 
				+                    <span class="info-box-number">760</span>
			
 
				+                  </div>
			
 
				+                  <!-- /.info-box-content -->
			
 
				+                </div>
			
 
				+                <!-- /.info-box -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+
			
 
				+              <!-- fix for small devices only -->
			
 
				+              <!-- <div class="clearfix hidden-md-up"></div> -->
			
 
				+
			
 
				+              <div class="col-12 col-sm-6 col-md-3">
			
 
				+                <div class="info-box">
			
 
				+                  <span class="info-box-icon text-bg-warning shadow-sm">
			
 
				+                    <i class="bi bi-people-fill"></i>
			
 
				+                  </span>
			
 
				+
			
 
				+                  <div class="info-box-content">
			
 
				+                    <span class="info-box-text">New Members</span>
			
 
				+                    <span class="info-box-number">2,000</span>
			
 
				+                  </div>
			
 
				+                  <!-- /.info-box-content -->
			
 
				+                </div>
			
 
				+                <!-- /.info-box -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+
			
 
				+              <div class="col-12 col-sm-6 col-md-3">
			
 
				+                <div class="info-box">
			
 
				+                  <span class="info-box-icon text-bg-danger shadow-sm">
			
 
				+                    <i class="bi bi-hand-thumbs-up-fill"></i>
			
 
				+                  </span>
			
 
				+
			
 
				+                  <div class="info-box-content">
			
 
				+                    <span class="info-box-text">Likes</span>
			
 
				+                    <span class="info-box-number">41,410</span>
			
 
				+                  </div>
			
 
				+                  <!-- /.info-box-content -->
			
 
				+                </div>
			
 
				+                <!-- /.info-box -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+
			
 
				+            <!-- =========================================================== -->
			
 
				+            <h5 class="mb-2">
			
 
				+              Info Box With Custom Shadows <small>
			
 
				+                <i>Using Bootstrap's Shadow Utility</i>
			
 
				+              </small>
			
 
				+            </h5>
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-12 col-sm-6 col-md-3">
			
 
				+                <div class="info-box shadow-none">
			
 
				+                  <span class="info-box-icon text-bg-primary shadow-sm">
			
 
				+                    <i class="bi bi-gear-fill"></i>
			
 
				+                  </span>
			
 
				+
			
 
				+                  <div class="info-box-content">
			
 
				+                    <span class="info-box-text">CPU Traffic</span>
			
 
				+                    <span class="info-box-number">
			
 
				+                      10
			
 
				+                      <small>%</small>
			
 
				+                    </span>
			
 
				+                  </div>
			
 
				+                  <!-- /.info-box-content -->
			
 
				+                </div>
			
 
				+                <!-- /.info-box -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+
			
 
				+              <div class="col-12 col-sm-6 col-md-3">
			
 
				+                <div class="info-box shadow-sm">
			
 
				+                  <span class="info-box-icon text-bg-success shadow-sm">
			
 
				+                    <i class="bi bi-cart-fill"></i>
			
 
				+                  </span>
			
 
				+
			
 
				+                  <div class="info-box-content">
			
 
				+                    <span class="info-box-text">Sales</span>
			
 
				+                    <span class="info-box-number">760</span>
			
 
				+                  </div>
			
 
				+                  <!-- /.info-box-content -->
			
 
				+                </div>
			
 
				+                <!-- /.info-box -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+
			
 
				+              <!-- fix for small devices only -->
			
 
				+              <!-- <div class="clearfix hidden-md-up"></div> -->
			
 
				+
			
 
				+              <div class="col-12 col-sm-6 col-md-3">
			
 
				+                <div class="info-box shadow">
			
 
				+                  <span class="info-box-icon text-bg-warning shadow-sm">
			
 
				+                    <i class="bi bi-people-fill"></i>
			
 
				+                  </span>
			
 
				+
			
 
				+                  <div class="info-box-content">
			
 
				+                    <span class="info-box-text">New Members</span>
			
 
				+                    <span class="info-box-number">2,000</span>
			
 
				+                  </div>
			
 
				+                  <!-- /.info-box-content -->
			
 
				+                </div>
			
 
				+                <!-- /.info-box -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+
			
 
				+              <div class="col-12 col-sm-6 col-md-3">
			
 
				+                <div class="info-box shadow-lg">
			
 
				+                  <span class="info-box-icon text-bg-danger shadow-sm">
			
 
				+                    <i class="bi bi-hand-thumbs-up-fill"></i>
			
 
				+                  </span>
			
 
				+
			
 
				+                  <div class="info-box-content">
			
 
				+                    <span class="info-box-text">Likes</span>
			
 
				+                    <span class="info-box-number">41,410</span>
			
 
				+                  </div>
			
 
				+                  <!-- /.info-box-content -->
			
 
				+                </div>
			
 
				+                <!-- /.info-box -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+
			
 
				+            <!-- =========================================================== -->
			
 
				+            <h5 class="mt-4 mb-2">Info Box With <code>bg-*</code></h5>
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-md-3 col-sm-6 col-12">
			
 
				+                <div class="info-box text-bg-primary">
			
 
				+                  <span class="info-box-icon">
			
 
				+                    <i class="bi bi-bookmark-fill"></i>
			
 
				+                  </span>
			
 
				+
			
 
				+                  <div class="info-box-content">
			
 
				+                    <span class="info-box-text">Bookmarks</span>
			
 
				+                    <span class="info-box-number">41,410</span>
			
 
				+
			
 
				+                    <div class="progress">
			
 
				+                      <div class="progress-bar" style="width: 70%"></div>
			
 
				+                    </div>
			
 
				+                    <span class="progress-description">
			
 
				+                      70% Increase in 30 Days
			
 
				+                    </span>
			
 
				+                  </div>
			
 
				+                  <!-- /.info-box-content -->
			
 
				+                </div>
			
 
				+                <!-- /.info-box -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+              <div class="col-md-3 col-sm-6 col-12">
			
 
				+                <div class="info-box text-bg-success">
			
 
				+                  <span class="info-box-icon">
			
 
				+                    <i class="bi bi-hand-thumbs-up"></i>
			
 
				+                  </span>
			
 
				+
			
 
				+                  <div class="info-box-content">
			
 
				+                    <span class="info-box-text">Likes</span>
			
 
				+                    <span class="info-box-number">41,410</span>
			
 
				+
			
 
				+                    <div class="progress">
			
 
				+                      <div class="progress-bar" style="width: 70%"></div>
			
 
				+                    </div>
			
 
				+                    <span class="progress-description">
			
 
				+                      70% Increase in 30 Days
			
 
				+                    </span>
			
 
				+                  </div>
			
 
				+                  <!-- /.info-box-content -->
			
 
				+                </div>
			
 
				+                <!-- /.info-box -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+              <div class="col-md-3 col-sm-6 col-12">
			
 
				+                <div class="info-box text-bg-warning">
			
 
				+                  <span class="info-box-icon">
			
 
				+                    <i class="bi bi-calendar3"></i>
			
 
				+                  </span>
			
 
				+
			
 
				+                  <div class="info-box-content">
			
 
				+                    <span class="info-box-text">Events</span>
			
 
				+                    <span class="info-box-number">41,410</span>
			
 
				+
			
 
				+                    <div class="progress">
			
 
				+                      <div class="progress-bar" style="width: 70%"></div>
			
 
				+                    </div>
			
 
				+                    <span class="progress-description">
			
 
				+                      70% Increase in 30 Days
			
 
				+                    </span>
			
 
				+                  </div>
			
 
				+                  <!-- /.info-box-content -->
			
 
				+                </div>
			
 
				+                <!-- /.info-box -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+              <div class="col-md-3 col-sm-6 col-12">
			
 
				+                <div class="info-box text-bg-danger">
			
 
				+                  <span class="info-box-icon">
			
 
				+                    <i class="bi bi-chat-text-fill"></i>
			
 
				+                  </span>
			
 
				+
			
 
				+                  <div class="info-box-content">
			
 
				+                    <span class="info-box-text">Comments</span>
			
 
				+                    <span class="info-box-number">41,410</span>
			
 
				+
			
 
				+                    <div class="progress">
			
 
				+                      <div class="progress-bar" style="width: 70%"></div>
			
 
				+                    </div>
			
 
				+                    <span class="progress-description">
			
 
				+                      70% Increase in 30 Days
			
 
				+                    </span>
			
 
				+                  </div>
			
 
				+                  <!-- /.info-box-content -->
			
 
				+                </div>
			
 
				+                <!-- /.info-box -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+
			
 
				+            <!-- =========================================================== -->
			
 
				+            <h5 class="mt-4 mb-2">Info Box With <code>bg-gradient</code></h5>
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-md-3 col-sm-6 col-12">
			
 
				+                <div class="info-box text-bg-primary bg-gradient">
			
 
				+                  <span class="info-box-icon">
			
 
				+                    <i class="bi bi-bookmark-fill"></i>
			
 
				+                  </span>
			
 
				+
			
 
				+                  <div class="info-box-content">
			
 
				+                    <span class="info-box-text">Bookmarks</span>
			
 
				+                    <span class="info-box-number">41,410</span>
			
 
				+
			
 
				+                    <div class="progress">
			
 
				+                      <div class="progress-bar" style="width: 70%"></div>
			
 
				+                    </div>
			
 
				+                    <span class="progress-description">
			
 
				+                      70% Increase in 30 Days
			
 
				+                    </span>
			
 
				+                  </div>
			
 
				+                  <!-- /.info-box-content -->
			
 
				+                </div>
			
 
				+                <!-- /.info-box -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+              <div class="col-md-3 col-sm-6 col-12">
			
 
				+                <div class="info-box text-bg-success bg-gradient">
			
 
				+                  <span class="info-box-icon">
			
 
				+                    <i class="bi bi-hand-thumbs-up"></i>
			
 
				+                  </span>
			
 
				+
			
 
				+                  <div class="info-box-content">
			
 
				+                    <span class="info-box-text">Likes</span>
			
 
				+                    <span class="info-box-number">41,410</span>
			
 
				+
			
 
				+                    <div class="progress">
			
 
				+                      <div class="progress-bar" style="width: 70%"></div>
			
 
				+                    </div>
			
 
				+                    <span class="progress-description">
			
 
				+                      70% Increase in 30 Days
			
 
				+                    </span>
			
 
				+                  </div>
			
 
				+                  <!-- /.info-box-content -->
			
 
				+                </div>
			
 
				+                <!-- /.info-box -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+              <div class="col-md-3 col-sm-6 col-12">
			
 
				+                <div class="info-box text-bg-warning bg-gradient">
			
 
				+                  <span class="info-box-icon">
			
 
				+                    <i class="bi bi-calendar3"></i>
			
 
				+                  </span>
			
 
				+
			
 
				+                  <div class="info-box-content">
			
 
				+                    <span class="info-box-text">Events</span>
			
 
				+                    <span class="info-box-number">41,410</span>
			
 
				+
			
 
				+                    <div class="progress">
			
 
				+                      <div class="progress-bar" style="width: 70%"></div>
			
 
				+                    </div>
			
 
				+                    <span class="progress-description">
			
 
				+                      70% Increase in 30 Days
			
 
				+                    </span>
			
 
				+                  </div>
			
 
				+                  <!-- /.info-box-content -->
			
 
				+                </div>
			
 
				+                <!-- /.info-box -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+              <div class="col-md-3 col-sm-6 col-12">
			
 
				+                <div class="info-box text-bg-danger bg-gradient">
			
 
				+                  <span class="info-box-icon">
			
 
				+                    <i class="bi bi-chat-text-fill"></i>
			
 
				+                  </span>
			
 
				+
			
 
				+                  <div class="info-box-content">
			
 
				+                    <span class="info-box-text">Comments</span>
			
 
				+                    <span class="info-box-number">41,410</span>
			
 
				+
			
 
				+                    <div class="progress">
			
 
				+                      <div class="progress-bar" style="width: 70%"></div>
			
 
				+                    </div>
			
 
				+                    <span class="progress-description">
			
 
				+                      70% Increase in 30 Days
			
 
				+                    </span>
			
 
				+                  </div>
			
 
				+                  <!-- /.info-box-content -->
			
 
				+                </div>
			
 
				+                <!-- /.info-box -->
			
 
				+              </div>
			
 
				+              <!-- /.col -->
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/html/pages/widgets/small-box.astro
+++ b/template/src/html/pages/widgets/small-box.astro
@@ -0,0 +1,182 @@
 
				+---
			
 
				+import Head from "@components/_head.astro";
			
 
				+import Footer from "@components/dashboard/_footer.astro";
			
 
				+import Topbar from "@components/dashboard/_topbar.astro";
			
 
				+import Sidenav from "@components/dashboard/_sidenav.astro";
			
 
				+import Scripts from "@components/_scripts.astro";
			
 
				+
			
 
				+const title = "AdminLTE 4 | Widgets - Small Box";
			
 
				+const path = "../../../dist";
			
 
				+const mainPage = "widgets";
			
 
				+const page = "small-box";
			
 
				+---
			
 
				+
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--begin::Head-->
			
 
				+  <head>
			
 
				+    <Head title={title} path={path} />
			
 
				+  </head>
			
 
				+  <!--end::Head-->
			
 
				+  <!--begin::Body-->
			
 
				+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
			
 
				+    <!--begin::App Wrapper-->
			
 
				+    <div class="app-wrapper">
			
 
				+      <Topbar path={path} />
			
 
				+      <Sidenav path={path} mainPage={mainPage} page={page} />
			
 
				+      <!--begin::App Main-->
			
 
				+      <main class="app-main">
			
 
				+        <!--begin::App Content Header-->
			
 
				+        <div class="app-content-header">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!--begin::Row-->
			
 
				+            <div class="row">
			
 
				+              <div class="col-sm-6">
			
 
				+                <h3 class="mb-0">Small Box</h3>
			
 
				+              </div>
			
 
				+              <div class="col-sm-6">
			
 
				+                <ol class="breadcrumb float-sm-end">
			
 
				+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
			
 
				+                  <li class="breadcrumb-item active" aria-current="page">
			
 
				+                    Small Box
			
 
				+                  </li>
			
 
				+                </ol>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!--end::Row-->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content Header-->
			
 
				+        <!--begin::App Content-->
			
 
				+        <div class="app-content">
			
 
				+          <!--begin::Container-->
			
 
				+          <div class="container-fluid">
			
 
				+            <!-- Small Box (Stat card) -->
			
 
				+            <h5 class="mb-2">Small Box</h5>
			
 
				+            <!-- Small boxes (Stat box) -->
			
 
				+            <div class="row">
			
 
				+              <div class="col-lg-3 col-6">
			
 
				+                <!-- small box -->
			
 
				+                <div class="small-box text-bg-primary">
			
 
				+                  <div class="inner">
			
 
				+                    <h3>150</h3>
			
 
				+
			
 
				+                    <p>New Orders</p>
			
 
				+                  </div>
			
 
				+                  <svg
			
 
				+                    class="small-box-icon"
			
 
				+                    fill="currentColor"
			
 
				+                    viewBox="0 0 24 24"
			
 
				+                    xmlns="http://www.w3.org/2000/svg"
			
 
				+                    aria-hidden="true"
			
 
				+                  >
			
 
				+                    <path
			
 
				+                      d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
			
 
				+                    ></path>
			
 
				+                  </svg>
			
 
				+                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
			
 
				+                    More info <i class="bi bi-link-45deg"></i>
			
 
				+                  </a>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <!-- ./col -->
			
 
				+              <div class="col-lg-3 col-6">
			
 
				+                <!-- small box -->
			
 
				+                <div class="small-box text-bg-success">
			
 
				+                  <div class="inner">
			
 
				+                    <h3>53<sup class="fs-5">%</sup></h3>
			
 
				+
			
 
				+                    <p>Bounce Rate</p>
			
 
				+                  </div>
			
 
				+                  <svg
			
 
				+                    class="small-box-icon"
			
 
				+                    fill="currentColor"
			
 
				+                    viewBox="0 0 24 24"
			
 
				+                    xmlns="http://www.w3.org/2000/svg"
			
 
				+                    aria-hidden="true"
			
 
				+                  >
			
 
				+                    <path
			
 
				+                      d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"
			
 
				+                    ></path>
			
 
				+                  </svg>
			
 
				+                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
			
 
				+                    More info <i class="bi bi-link-45deg"></i>
			
 
				+                  </a>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <!-- ./col -->
			
 
				+              <div class="col-lg-3 col-6">
			
 
				+                <!-- small box -->
			
 
				+                <div class="small-box text-bg-warning">
			
 
				+                  <div class="inner">
			
 
				+                    <h3>44</h3>
			
 
				+
			
 
				+                    <p>User Registrations</p>
			
 
				+                  </div>
			
 
				+                  <svg
			
 
				+                    class="small-box-icon"
			
 
				+                    fill="currentColor"
			
 
				+                    viewBox="0 0 24 24"
			
 
				+                    xmlns="http://www.w3.org/2000/svg"
			
 
				+                    aria-hidden="true"
			
 
				+                  >
			
 
				+                    <path
			
 
				+                      d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"
			
 
				+                    ></path>
			
 
				+                  </svg>
			
 
				+                  <a href="#" class="small-box-footer link-dark link-underline-opacity-0 link-underline-opacity-50-hover">
			
 
				+                    More info <i class="bi bi-link-45deg"></i>
			
 
				+                  </a>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <!-- ./col -->
			
 
				+              <div class="col-lg-3 col-6">
			
 
				+                <!-- small box -->
			
 
				+                <div class="small-box text-bg-danger">
			
 
				+                  <div class="inner">
			
 
				+                    <h3>65</h3>
			
 
				+
			
 
				+                    <p>Unique Visitors</p>
			
 
				+                  </div>
			
 
				+                  <svg
			
 
				+                    class="small-box-icon"
			
 
				+                    fill="currentColor"
			
 
				+                    viewBox="0 0 24 24"
			
 
				+                    xmlns="http://www.w3.org/2000/svg"
			
 
				+                    aria-hidden="true"
			
 
				+                  >
			
 
				+                    <path
			
 
				+                      clip-rule="evenodd"
			
 
				+                      fill-rule="evenodd"
			
 
				+                      d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"
			
 
				+                    ></path>
			
 
				+                    <path
			
 
				+                      clip-rule="evenodd"
			
 
				+                      fill-rule="evenodd"
			
 
				+                      d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
			
 
				+                    ></path>
			
 
				+                  </svg>
			
 
				+                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
			
 
				+                    More info <i class="bi bi-link-45deg"></i>
			
 
				+                  </a>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <!-- ./col -->
			
 
				+            </div>
			
 
				+            <!-- /.row -->
			
 
				+          </div>
			
 
				+          <!--end::Container-->
			
 
				+        </div>
			
 
				+        <!--end::App Content-->
			
 
				+      </main>
			
 
				+      <!--end::App Main-->
			
 
				+      <Footer />
			
 
				+    </div>
			
 
				+    <!--end::App Wrapper-->
			
 
				+    <!--begin::Script-->
			
 
				+    <Scripts path={path} />
			
 
				+    <!--end::Script-->
			
 
				+  </body><!--end::Body-->
			
 
				+</html>
			
--- a/template/src/scss/_app-content.scss
+++ b/template/src/scss/_app-content.scss
@@ -0,0 +1,3 @@
 
				+.app-content {
			
 
				+  padding: $lte-content-padding-y $lte-content-padding-x;
			
 
				+}