<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Dashboard | UBold - Responsive Bootstrap 5 Admin Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="UBold is a modern, responsive admin dashboard available on ThemeForest. Ideal for building CRM, CMS, project management tools, and custom web applications with a clean UI, flexible layouts, and rich features.">
    <meta name="keywords" content="UBold, admin dashboard, ThemeForest, Bootstrap 5 admin, responsive admin, CRM dashboard, CMS admin, web app UI, admin theme, premium admin template">
    <meta name="author" content="Coderthemes">

    <!-- App favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <!-- Theme Config Js -->
    <script src="assets/js/config.js"></script>

    <!-- Vendor css -->
    <link href="assets/css/vendors.min.css" rel="stylesheet" type="text/css">

    <!-- App css -->
    <link href="assets/css/app.min.css" rel="stylesheet" type="text/css">
</head>

<body>
    <!-- Begin page -->
    <div class="wrapper">

        
        <!-- Sidenav Menu Start -->
        <div class="sidenav-menu">

            <!-- Brand Logo -->
            <a href="index.html" class="logo">
                <span class="logo logo-light">
                    <span class="logo-lg"><img src="assets/images/logo.png" alt="logo"></span>
                    <span class="logo-sm"><img src="assets/images/logo-sm.png" alt="small logo"></span>
                </span>

                <span class="logo logo-dark">
                    <span class="logo-lg"><img src="assets/images/logo-black.png" alt="dark logo"></span>
                    <span class="logo-sm"><img src="assets/images/logo-sm.png" alt="small logo"></span>
                </span>
            </a>

            <!-- Sidebar Hover Menu Toggle Button -->
            <button class="button-on-hover">
                <i class="ti ti-menu-4 fs-22 align-middle"></i>
            </button>

            <!-- Full Sidebar Menu Close Button -->
            <button class="button-close-offcanvas">
                <i class="ti ti-x align-middle"></i>
            </button>

            <div class="scrollbar" data-simplebar>

                <!-- User -->
                <div class="sidenav-user">

                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <a href="users-profile.html" class="link-reset">
                                <img src="assets/images/users/user-3.jpg" alt="user-image" class="rounded-circle mb-2 avatar-md">
                                <span class="sidenav-user-name fw-bold">Geneva K.</span>
                                <span class="fs-12 fw-semibold" data-lang="user-role">Art Director</span>
                            </a>
                        </div>
                        <div>
                            <a class="dropdown-toggle drop-arrow-none link-reset sidenav-user-set-icon" data-bs-toggle="dropdown" data-bs-offset="0,12" href="#!" aria-haspopup="false" aria-expanded="false">
                                <i class="ti ti-settings fs-24 align-middle ms-1"></i>
                            </a>

                            <div class="dropdown-menu">
                                <!-- Header -->
                                <div class="dropdown-header noti-title">
                                    <h6 class="text-overflow m-0">Welcome back!</h6>
                                </div>

                                <!-- My Profile -->
                                <a href="profile.html" class="dropdown-item">
                                    <i class="ti ti-user-circle me-2 fs-17 align-middle"></i>
                                    <span class="align-middle">Profile</span>
                                </a>

                                <!-- Notifications -->
                                <a href="javascript:void(0);" class="dropdown-item">
                                    <i class="ti ti-bell-ringing me-2 fs-17 align-middle"></i>
                                    <span class="align-middle">Notifications</span>
                                </a>

                                <!-- Settings -->
                                <a href="javascript:void(0);" class="dropdown-item">
                                    <i class="ti ti-settings-2 me-2 fs-17 align-middle"></i>
                                    <span class="align-middle">Account Settings</span>
                                </a>

                                <!-- Support -->
                                <a href="javascript:void(0);" class="dropdown-item">
                                    <i class="ti ti-headset me-2 fs-17 align-middle"></i>
                                    <span class="align-middle">Support Center</span>
                                </a>

                                <!-- Divider -->
                                <div class="dropdown-divider"></div>

                                <!-- Lock -->
                                <a href="auth-lock-screen.html" class="dropdown-item">
                                    <i class="ti ti-lock me-2 fs-17 align-middle"></i>
                                    <span class="align-middle">Lock Screen</span>
                                </a>

                                <!-- Logout -->
                                <a href="/logout" class="dropdown-item fw-semibold">
                                    <i class="ti ti-logout-2 me-2 fs-17 align-middle"></i>
                                    <span class="align-middle">Log Out</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!--- Sidenav Menu -->
                <ul class="side-nav">
                    <li class="side-nav-title mt-2" data-lang="menu-title">Navigation</li>

                    <li class="side-nav-item">
                        <a data-bs-toggle="collapse" href="#sidebarDashboards" aria-expanded="false" aria-controls="sidebarDashboards" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="circle-gauge"></i></span>
                            <span class="menu-text" data-lang="dashboards">Dashboards</span>
                            <span class="badge bg-success">02</span>
                        </a>
                        <div class="collapse" id="sidebarDashboards">
                            <ul class="sub-menu">
                                <li class="side-nav-item">
                                    <a href="index.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="dashboard-one">Dashboard 1</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="dashboard-2.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="dashboard-two">Dashboard 2</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>

                    <li class="side-nav-item">
                        <a href="landing.html" target="_blank" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="earth"></i></span>
                            <span class="menu-text" data-lang="landing-page">Landing Page</span>
                        </a>
                    </li>

                    <li class="side-nav-title" data-lang="apps-title">Apps</li>

                    <li class="side-nav-item">
                        <a href="chat.html" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="message-square-dot"></i></span>
                            <span class="menu-text" data-lang="chat"> Chat </span>
                        </a>
                    </li>

                    <li class="side-nav-item">
                        <a href="calendar.html" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="calendar"></i></span>
                            <span class="menu-text" data-lang="calendar"> Calendar </span>
                        </a>
                    </li>

                    <li class="side-nav-item">
                        <a href="file-manager.html" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="folder-open-dot"></i></span>
                            <span class="menu-text" data-lang="file-manager"> File Manager </span>
                        </a>
                    </li>

                    <li class="side-nav-item">
                        <a data-bs-toggle="collapse" href="#sidebarEcommerce" aria-expanded="false" aria-controls="sidebarEcommerce" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="shopping-bag"></i></span>
                            <span class="menu-text" data-lang="ecommerce">Ecommerce</span>
                            <span class="menu-arrow"></span>
                        </a>
                        <div class="collapse" id="sidebarEcommerce">
                            <ul class="sub-menu">
                                <li class="side-nav-item">
                                    <a data-bs-toggle="collapse" href="#sidebarProducts" aria-expanded="false" aria-controls="sidebarProducts" class="side-nav-link">
                                        <span class="menu-text" data-lang="eco-products">Products</span>
                                        <span class="menu-arrow"></span>
                                    </a>
                                    <div class="collapse" id="sidebarProducts">
                                        <ul class="sub-menu">
                                            <li class="side-nav-item">
                                                <a href="ecommerce-products.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="eco-pro-listing">Listing</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="ecommerce-products-grid.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="eco-pro-grid">Products Grid</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="ecommerce-product-details.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="eco-pro-details">Product Details</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="ecommerce-add-product.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="eco-pro-add">Add Product</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ecommerce-categories.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="eco-categories">Categories</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a data-bs-toggle="collapse" href="#sidebarOrders" aria-expanded="false" aria-controls="sidebarOrders" class="side-nav-link">
                                        <span class="menu-text" data-lang="eco-orders">Orders</span>
                                        <span class="menu-arrow"></span>
                                    </a>
                                    <div class="collapse" id="sidebarOrders">
                                        <ul class="sub-menu">
                                            <li class="side-nav-item">
                                                <a href="ecommerce-orders.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="eco-orders-list">Orders</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="ecommerce-order-details.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="eco-order-details">Order Details</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ecommerce-customers.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="eco-customers">Customers</span>
                                    </a>
                                </li>

                                <li class="side-nav-item">
                                    <a data-bs-toggle="collapse" href="#sidebarSellers" aria-expanded="false" aria-controls="sidebarSellers" class="side-nav-link">
                                        <span class="menu-text" data-lang="eco-sellers"> Sellers </span>
                                        <span class="menu-arrow"></span>
                                    </a>
                                    <div class="collapse" id="sidebarSellers">
                                        <ul class="sub-menu">
                                            <li class="side-nav-item">
                                                <a href="ecommerce-sellers.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="eco-sellers-list">Sellers</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="ecommerce-seller-details.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="eco-sellers-details">Sellers Details</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </li>

                                <li class="side-nav-item">
                                    <a href="ecommerce-reviews.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="eco-reviews">Reviews</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>

                    <li class="side-nav-item">
                        <a data-bs-toggle="collapse" href="#sidebarEmail" aria-expanded="false" aria-controls="sidebarEmail" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="inbox"></i></span>
                            <span class="menu-text" data-lang="email">Email</span>
                            <span class="badge text-bg-danger">New</span>
                        </a>
                        <div class="collapse" id="sidebarEmail">
                            <ul class="sub-menu">
                                <li class="side-nav-item">
                                    <a href="email.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="email-inbox">Inbox</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="email-details.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="email-details">Details</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="email-compose.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="email-compose">Compose</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="email-templates.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="email-templates">Email Templates</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>

                    <li class="side-nav-item">
                        <a data-bs-toggle="collapse" href="#sidebarCRM" aria-expanded="false" aria-controls="sidebarCRM" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="handshake"></i></span>
                            <span class="menu-text" data-lang="crm"> CRM </span>
                            <span class="menu-arrow"></span>
                        </a>
                        <div class="collapse" id="sidebarCRM">
                            <ul class="sub-menu">
                                <li class="side-nav-item">
                                    <a href="crm-contacts.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="crm-contacts">Contacts</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="crm-opportunities.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="crm-opportunities">Opportunities</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="crm-deals.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="crm-deals">Deals</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="crm-leads.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="crm-leads">Leads</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="crm-pipeline.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="crm-pipeline">Pipeline</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="crm-campaign.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="crm-campaign">Campaign</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="crm-proposals.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="crm-proposals">Proposals</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="crm-estimations.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="crm-estimations">Estimations</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="crm-customers.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="crm-customers">Customers</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="crm-activities.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="crm-activities">Activities</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>

                    <li class="side-nav-item">
                        <a data-bs-toggle="collapse" href="#sidebarUsers" aria-expanded="false" aria-controls="sidebarUsers" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="users"></i></span>
                            <span class="menu-text" data-lang="users"> Users </span>
                            <span class="menu-arrow"></span>
                        </a>
                        <div class="collapse" id="sidebarUsers">
                            <ul class="sub-menu">
                                <li class="side-nav-item">
                                    <a href="users-contacts.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="contacts">Contacts</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="users-profile.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="profile">Profile</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="users-roles.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="roles">Roles</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="users-role-details.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="role-details">Role Details</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="users-permissions.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="permissions">Permissions</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>

                    <li class="side-nav-item">
                        <a data-bs-toggle="collapse" href="#sidebarInvoice" aria-expanded="false" aria-controls="sidebarInvoice" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="receipt-text"></i></span>
                            <span class="menu-text" data-lang="invoice"> Invoice</span>
                            <span class="menu-arrow"></span>
                        </a>
                        <div class="collapse" id="sidebarInvoice">
                            <ul class="sub-menu">
                                <li class="side-nav-item">
                                    <a href="invoices.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="invoices">Invoices</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="invoice-details.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="invoice-details">Single Invoice</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="invoice-create.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="invoice-create">New Invoice</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>

                    <li class="side-nav-item">
                        <a href="social-feed.html" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="rss"></i></span>
                            <span class="menu-text" data-lang="social"> Social Feed </span>
                        </a>
                    </li>

                    <li class="side-nav-item">
                        <a data-bs-toggle="collapse" href="#sidebarTickets" aria-expanded="false" aria-controls="sidebarTickets" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="life-buoy"></i></span>
                            <span class="menu-text" data-lang="support"> Support Center</span>
                            <span class="menu-arrow"></span>
                        </a>
                        <div class="collapse" id="sidebarTickets">
                            <ul class="sub-menu">
                                <li class="side-nav-item">
                                    <a href="tickets-list.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="tickets">Tickets List</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ticket-details.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ticket-details">Ticket Details</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ticket-create.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ticket-create">New Ticket</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>

                    <li class="side-nav-item">
                        <a href="api-keys.html" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="key"></i></span>
                            <span class="menu-text" data-lang="api-keys"> API Keys </span>
                        </a>
                    </li>

                    <li class="side-nav-title mt-2" data-lang="pages-title">Custom Pages</li>

                    <li class="side-nav-item">
                        <a data-bs-toggle="collapse" href="#sidebarPages" aria-expanded="false" aria-controls="sidebarPages" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="notebook-text"></i></span>
                            <span class="menu-text" data-lang="pages"> Pages </span>
                            <span class="menu-arrow"></span>
                        </a>
                        <div class="collapse" id="sidebarPages">
                            <ul class="sub-menu">
                                <li class="side-nav-item">
                                    <a href="pages-faq.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="pages-faq">FAQ</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="pages-pricing.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="pages-pricing">Pricing</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="pages-empty.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="pages-empty">Empty Page</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="pages-timeline.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="pages-timeline">Timeline</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="pages-sitemap.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="pages-sitemap">Sitemap</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="pages-search-results.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="pages-search-results">Search Results</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="pages-coming-soon.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="pages-coming-soon">Coming Soon</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="pages-terms-conditions.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="pages-terms-conditions">Terms & Conditions</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>

                    <li class="side-nav-item">
                        <a data-bs-toggle="collapse" href="#sidebarPagesAuth" aria-expanded="false" aria-controls="sidebarPagesAuth" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="fingerprint"></i></span>
                            <span class="menu-text" data-lang="authentication"> Authentication </span>
                            <span class="menu-arrow"></span>
                        </a>
                        <div class="collapse" id="sidebarPagesAuth">
                            <ul class="sub-menu">
                                <li class="side-nav-item">
                                    <a data-bs-toggle="collapse" href="#sidebarOneAuth" aria-expanded="false" aria-controls="sidebarOneAuth" class="side-nav-link">
                                        <span class="menu-text" data-lang="basic-auth"> Basic </span>
                                        <span class="menu-arrow"></span>
                                    </a>
                                    <div class="collapse" id="sidebarOneAuth">
                                        <ul class="sub-menu">
                                            <li class="side-nav-item">
                                                <a href="auth-sign-in.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="auth-sign-in">Sign In</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="auth-sign-up.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="auth-sign-up">Sign Up</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="auth-reset-pass.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="auth-reset-pass">Reset Password</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="auth-new-pass.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="auth-new-pass">New Password</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="auth-two-factor.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="auth-two-factor">Two Factor</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="auth-lock-screen.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="auth-lock-screen">Lock Screen</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="auth-success-mail.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="auth-success-mail">Success Mail</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="auth-login-pin.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="auth-login-pin">Login with PIN</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="auth-delete-account.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="auth-delete-account">Delete Account</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="side-nav-item">
                                    <a data-bs-toggle="collapse" href="#sidebarTwoAuth" aria-expanded="false" aria-controls="sidebarTwoAuth" class="side-nav-link">
                                        <span class="menu-text" data-lang="cover-auth"> Cover </span>
                                        <span class="menu-arrow"></span>
                                    </a>
                                    <div class="collapse" id="sidebarTwoAuth">
                                        <ul class="sub-menu">
                                            <li class="side-nav-item">
                                                <a href="auth-2-sign-in.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="auth-2-sign-in">Sign In</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="auth-2-sign-up.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="auth-2-sign-up">Sign Up</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="auth-2-reset-pass.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="auth-2-reset-pass">Reset Password</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="auth-2-new-pass.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="auth-2-new-pass">New Password</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="auth-2-two-factor.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="auth-2-two-factor">Two Factor</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="auth-2-lock-screen.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="auth-2-lock-screen">Lock Screen</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="auth-2-success-mail.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="auth-2-success-mail">Success Mail</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="auth-2-login-pin.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="auth-2-login-pin">Login with PIN</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="auth-2-delete-account.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="auth-2-delete-account">Delete Account</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>

                    <li class="side-nav-item">
                        <a data-bs-toggle="collapse" href="#sidebarPagesError" aria-expanded="false" aria-controls="sidebarPagesError" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="shield-alert"></i></span>
                            <span class="menu-text" data-lang="error-pages"> Error Pages </span>
                            <span class="menu-arrow"></span>
                        </a>
                        <div class="collapse" id="sidebarPagesError">
                            <ul class="sub-menu">
                                <li class="side-nav-item">
                                    <a href="error-400.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="error-400">400 Bad Request</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="error-401.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="error-401">401 Unauthorized</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="error-403.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="error-403">403 Forbidden</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="error-404.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="error-404">404 Not Found</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="error-408.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="error-408">408 Request Timeout</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="error-500.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="error-500">500 Internal Server</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="maintenance.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="maintenance">Maintenance</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>

                    <li class="side-nav-title mt-2" data-lang="layouts-title">Layouts</li>

                    <li class="side-nav-item">
                        <a data-bs-toggle="collapse" href="#sidebarLayouts" aria-expanded="false" aria-controls="sidebarLayouts" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="proportions"></i></span>
                            <span class="menu-text" data-lang="layout-options"> Layout Options </span>
                            <span class="menu-arrow"></span>
                        </a>
                        <div class="collapse" id="sidebarLayouts">
                            <ul class="sub-menu">
                                <li class="side-nav-item">
                                    <a href="layouts-scrollable.html" target="_blank" class="side-nav-link">
                                        <span class="menu-text" data-lang="layouts-scrollable">Scrollable</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="layouts-compact.html" target="_blank" class="side-nav-link">
                                        <span class="menu-text" data-lang="layouts-compact">Compact</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="layouts-boxed.html" target="_blank" class="side-nav-link">
                                        <span class="menu-text" data-lang="layouts-boxed">Boxed</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="layouts-horizontal.html" target="_blank" class="side-nav-link">
                                        <span class="menu-text" data-lang="layouts-horizontal">Horizontal</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="layouts-preloader.html" target="_blank" class="side-nav-link">
                                        <span class="menu-text" data-lang="layouts-preloader">Preloader</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>

                    <li class="side-nav-item">
                        <a data-bs-toggle="collapse" href="#sidebarSidebars" aria-expanded="false" aria-controls="sidebarSidebars" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="panel-right-close"></i></span>
                            <span class="menu-text" data-lang="sidebars"> Sidebars </span>
                            <span class="menu-arrow"></span>
                        </a>
                        <div class="collapse" id="sidebarSidebars">
                            <ul class="sub-menu">
                                <li class="side-nav-item">
                                    <a href="sidebar-dark.html" target="_blank" class="side-nav-link">
                                        <span class="menu-text" data-lang="sidebar-dark">Dark Menu</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="sidebar-gradient.html" target="_blank" class="side-nav-link">
                                        <span class="menu-text" data-lang="sidebar-gradient">Gradient Menu</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="sidebar-gray.html" target="_blank" class="side-nav-link">
                                        <span class="menu-text" data-lang="sidebar-gray">Gray Menu</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="sidebar-image.html" target="_blank" class="side-nav-link">
                                        <span class="menu-text" data-lang="sidebar-image">Image Menu</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="sidebar-compact.html" target="_blank" class="side-nav-link">
                                        <span class="menu-text" data-lang="sidebar-compact">Compact Menu</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="sidebar-icon-view.html" target="_blank" class="side-nav-link">
                                        <span class="menu-text" data-lang="sidebar-icon-view">Icon View Menu</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="sidebar-on-hover.html" target="_blank" class="side-nav-link">
                                        <span class="menu-text" data-lang="sidebar-on-hover">On Hover Menu</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="sidebar-on-hover-active.html" target="_blank" class="side-nav-link">
                                        <span class="menu-text" data-lang="sidebar-on-hover-active">On Hover Active</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="sidebar-offcanvas.html" target="_blank" class="side-nav-link">
                                        <span class="menu-text" data-lang="sidebar-offcanvas">Offcanvas Menu</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="sidebar-no-icons.html" target="_blank" class="side-nav-link">
                                        <span class="menu-text" data-lang="sidebar-no-icons">No Icons with Lines</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="sidebar-with-lines.html" target="_blank" class="side-nav-link">
                                        <span class="menu-text" data-lang="sidebar-with-lines">Sidebar with Lines</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>

                    <li class="side-nav-item">
                        <a data-bs-toggle="collapse" href="#sidebarTopbars" aria-expanded="false" aria-controls="sidebarTopbars" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="panel-top"></i></span>
                            <span class="menu-text" data-lang="topbar"> Topbar </span>
                            <span class="menu-arrow"></span>
                        </a>
                        <div class="collapse" id="sidebarTopbars">
                            <ul class="sub-menu">
                                <li class="side-nav-item">
                                    <a href="topbar-light.html" target="_blank" class="side-nav-link">
                                        <span class="menu-text" data-lang="topbar-light">Light Topbar</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="topbar-gray.html" target="_blank" class="side-nav-link">
                                        <span class="menu-text" data-lang="topbar-gray">Gray Topbar</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="topbar-gradient.html" target="_blank" class="side-nav-link">
                                        <span class="menu-text" data-lang="topbar-gradient">Gradient Topbar</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>

                    <li class="side-nav-title mt-2" data-lang="components-title">Components</li>

                    <li class="side-nav-item">
                        <a data-bs-toggle="collapse" href="#sidebarBaseUI" aria-expanded="false" aria-controls="sidebarBaseUI" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="pencil-ruler"></i></span>
                            <span class="menu-text" data-lang="base-ui"> Base UI </span>
                            <span class="menu-arrow"></span>
                        </a>
                        <div class="collapse" id="sidebarBaseUI">
                            <ul class="sub-menu">
                                <li class="side-nav-item">
                                    <a href="ui-buttons.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-buttons">Buttons</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ui-images.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-images">Images</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ui-accordions.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-accordions">Accordions</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ui-alerts.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-alerts">Alerts</span>
                                    </a>
                                </li>

                                <li class="side-nav-item">
                                    <a href="ui-badges.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-badges">Badges</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ui-breadcrumb.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-breadcrumb">Breadcrumb</span>
                                    </a>
                                </li>

                                <li class="side-nav-item">
                                    <a href="ui-cards.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-cards">Cards</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ui-carousel.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-carousel">Carousel</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ui-collapse.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-collapse">Collapse</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ui-colors.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-colors">Colors</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ui-dropdowns.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-dropdowns">Dropdowns</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ui-videos.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-videos">Videos</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ui-grid.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-grid">Grid Options</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ui-links.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-links">Links</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ui-list-group.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-list-group">List Group</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ui-modals.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-modals">Modals</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ui-notifications.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-notifications">Notifications</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ui-offcanvas.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-offcanvas">Offcanvas</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ui-placeholders.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-placeholders">Placeholders</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ui-pagination.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-pagination">Pagination</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ui-popovers.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-popovers">Popovers</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ui-progress.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-progress">Progress</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ui-scrollspy.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-scrollspy">Scrollspy</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ui-spinners.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-spinners">Spinners</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ui-tabs.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-tabs">Tabs</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ui-tooltips.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-tooltips">Tooltips</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ui-typography.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-typography">Typography</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="ui-utilities.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="ui-utilities">Utilities</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>

                    <li class="side-nav-item">
                        <a data-bs-toggle="collapse" href="#sidebarMiscellaneous" aria-expanded="false" aria-controls="sidebarMiscellaneous" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="house-plug"></i></span>
                            <span class="menu-text" data-lang="miscellaneous"> Miscellaneous </span>
                            <span class="menu-arrow"></span>
                        </a>
                        <div class="collapse" id="sidebarMiscellaneous">
                            <ul class="sub-menu">
                                <li class="side-nav-item">
                                    <a href="misc-sortable.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="misc-sortable">Sortable List</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="misc-pdf-viewer.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="misc-pdf-viewer">PDF Viewer</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="misc-i18.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="misc-i18">i18 Support</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="misc-sweet-alerts.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="misc-sweet-alerts">Sweet Alerts</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="misc-pass-meter.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="misc-pass-meter">Password Meter</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="misc-clipboard.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="misc-clipboard">Clipboard</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="misc-tree-view.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="misc-tree-view">Tree View</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="misc-tour.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="misc-tour">Tour</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>

                    <li class="side-nav-item">
                        <a href="widgets.html" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="dessert"></i></span>
                            <span class="menu-text" data-lang="widgets"> Widgets </span>
                        </a>
                    </li>

                    <li class="side-nav-item">
                        <a data-bs-toggle="collapse" href="#sidebarCharts" aria-expanded="false" aria-controls="sidebarCharts" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="chart-no-axes-combined"></i></span>
                            <span class="menu-text" data-lang="charts"> Charts </span>
                            <span class="menu-arrow"></span>
                        </a>
                        <div class="collapse" id="sidebarCharts">
                            <ul class="sub-menu">
                                <li class="side-nav-item">
                                    <a data-bs-toggle="collapse" href="#sidebarApexCharts" aria-expanded="false" aria-controls="sidebarApexCharts" class="side-nav-link">
                                        <span class="menu-text" data-lang="apex-charts"> Apex Charts </span>
                                        <span class="menu-arrow"></span>
                                    </a>
                                    <div class="collapse" id="sidebarApexCharts">
                                        <ul class="sub-menu">
                                            <li class="side-nav-item">
                                                <a href="charts-apex-area.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="charts-apex-area">Area</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="charts-apex-bar.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="charts-apex-bar">Bar</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="charts-apex-bubble.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="charts-apex-bubble">Bubble</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="charts-apex-candlestick.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="charts-apex-candlestick">Candlestick</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="charts-apex-column.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="charts-apex-column">Column</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="charts-apex-heatmap.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="charts-apex-heatmap">Heatmap</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="charts-apex-line.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="charts-apex-line">Line</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="charts-apex-mixed.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="charts-apex-mixed">Mixed</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="charts-apex-timeline.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="charts-apex-timeline">Timeline</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="charts-apex-boxplot.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="charts-apex-boxplot">Boxplot</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="charts-apex-treemap.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="charts-apex-treemap">Treemap</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="charts-apex-pie.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="charts-apex-pie">Pie</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="charts-apex-radar.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="charts-apex-radar">Radar</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="charts-apex-radialbar.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="charts-apex-radialbar">RadialBar</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="charts-apex-scatter.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="charts-apex-scatter">Scatter</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="charts-apex-polar-area.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="charts-apex-polar-area">Polar Area</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="charts-apex-sparklines.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="charts-apex-sparklines">Sparklines</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="charts-apex-range.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="charts-apex-range">Range</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="charts-apex-funnel.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="charts-apex-funnel">Funnel</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="charts-apex-slope.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="charts-apex-slope">Slope</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="side-nav-item">
                                    <a data-bs-toggle="collapse" href="#sidebarChartJs" aria-expanded="false" aria-controls="sidebarChartJs" class="side-nav-link">
                                        <span class="menu-text" data-lang="chartjs"> Chart Js </span>
                                        <span class="menu-arrow"></span>
                                    </a>
                                    <div class="collapse" id="sidebarChartJs">
                                        <ul class="sub-menu">
                                            <li class="side-nav-item">
                                                <a href="chartjs-area.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="chartjs-area">Area</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="chartjs-bar.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="chartjs-bar">Bar</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="chartjs-line.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="chartjs-line">Line</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="chartjs-other.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="chartjs-other">Other</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="side-nav-item">
                                    <a href="charts-apextree.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="charts-apextree">Apex Tree</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="charts-apexsankey.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="charts-apexsankey">Apex Sankey</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>

                    <li class="side-nav-item">
                        <a data-bs-toggle="collapse" href="#sidebarForms" aria-expanded="false" aria-controls="sidebarForms" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="file-input"></i></span>
                            <span class="menu-text" data-lang="forms">Forms</span>
                            <span class="menu-arrow"></span>
                        </a>
                        <div class="collapse" id="sidebarForms">
                            <ul class="sub-menu">
                                <li class="side-nav-item">
                                    <a href="form-elements.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="form-elements">Basic Elements</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="form-pickers.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="form-pickers">Pickers</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="form-select.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="form-select">Select</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="form-validation.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="form-validation">Validation</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="form-wizard.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="form-wizard">Wizard</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="form-fileuploads.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="form-fileuploads">File Uploads</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="form-text-editors.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="form-text-editors">Text Editors</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="form-range-slider.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="form-range-slider">Range Slider</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="form-layouts.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="form-layouts">Layouts</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="form-other-plugins.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="form-other-plugins">Other Plugins</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>

                    <li class="side-nav-item">
                        <a data-bs-toggle="collapse" href="#sidebarTables" aria-expanded="false" aria-controls="sidebarTables" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="table"></i></span>
                            <span class="menu-text" data-lang="tables">Tables</span>
                            <span class="menu-arrow"></span>
                        </a>
                        <div class="collapse" id="sidebarTables">
                            <ul class="sub-menu">
                                <li class="side-nav-item">
                                    <a href="tables-static.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="tables-static">Static Tables</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="tables-custom.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="tables-custom">Custom Tables</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a data-bs-toggle="collapse" href="#sidebarDataTables" aria-expanded="false" aria-controls="sidebarDataTables" class="side-nav-link">
                                        <span class="menu-text" data-lang="datatables">DataTables</span>
                                        <span class="badge bg-success">13</span>
                                    </a>
                                    <div class="collapse" id="sidebarDataTables">
                                        <ul class="sub-menu">
                                            <li class="side-nav-item">
                                                <a href="tables-datatables-basic.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="tables-datatables-basic">Basic</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="tables-datatables-export-data.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="tables-datatables-export-data">Export Data</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="tables-datatables-select.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="tables-datatables-select">Select</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="tables-datatables-ajax.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="tables-datatables-ajax">Ajax</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="tables-datatables-javascript.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="tables-datatables-javascript">Javascript Source</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="tables-datatables-rendering.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="tables-datatables-rendering">Data Rendering</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="tables-datatables-scroll.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="tables-datatables-scroll">Scroll</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="tables-datatables-fixed-columns.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="tables-datatables-fixed-columns">Fixed Columns</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="tables-datatables-columns.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="tables-datatables-columns">Show & Hide Column</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="tables-datatables-child-rows.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="tables-datatables-child-rows">Child Rows</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="tables-datatables-column-searching.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="tables-datatables-column-searching">Column Searching</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="tables-datatables-range-search.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="tables-datatables-range-search">Range Search</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="tables-datatables-fixed-header.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="tables-datatables-fixed-header">Fixed Header</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="tables-datatables-add-rows.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="tables-datatables-add-rows">Add Rows</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="tables-datatables-checkbox-select.html" class="side-nav-link">
                                                    <span class="menu-text" data-lang="tables-datatables-checkbox-select">Checkbox Select</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>

                    <li class="side-nav-item">
                        <a data-bs-toggle="collapse" href="#sidebarIcons" aria-expanded="false" aria-controls="sidebarIcons" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="sparkles"></i></span>
                            <span class="menu-text" data-lang="icons">Icons</span>
                            <span class="menu-arrow"></span>
                        </a>
                        <div class="collapse" id="sidebarIcons">
                            <ul class="sub-menu">
                                <li class="side-nav-item">
                                    <a href="icons-tabler.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="icons-tabler">Tabler</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="icons-lucide.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="icons-lucide">Lucide</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="icons-flags.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="icons-flags">Flags</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>

                    <li class="side-nav-item">
                        <a data-bs-toggle="collapse" href="#sidebarMaps" aria-expanded="false" aria-controls="sidebarMaps" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="map-pinned"></i></span>
                            <span class="menu-text" data-lang="maps">Maps</span>
                            <span class="menu-arrow"></span>
                        </a>
                        <div class="collapse" id="sidebarMaps">
                            <ul class="sub-menu">
                                <li class="side-nav-item">
                                    <a href="maps-vector.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="maps-vector">Vector Maps</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a href="maps-leaflet.html" class="side-nav-link">
                                        <span class="menu-text" data-lang="maps-leaflet">Leaflet Maps</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>

                    <li class="side-nav-title mt-2" data-lang="items-title">Menu Items</li>

                    <li class="side-nav-item">
                        <a data-bs-toggle="collapse" href="#sidebarMenuLevels" aria-expanded="false" aria-controls="sidebarMenuLevels" class="side-nav-link">
                            <span class="menu-icon"><i data-lucide="list-tree"></i></span>
                            <span class="menu-text" data-lang="menu-levels"> Menu Levels </span>
                            <span class="menu-arrow"></span>
                        </a>
                        <div class="collapse" id="sidebarMenuLevels">
                            <ul class="sub-menu">
                                <li class="side-nav-item">
                                    <a data-bs-toggle="collapse" href="#sidebarSecondLevel" aria-expanded="false" aria-controls="sidebarSecondLevel" class="side-nav-link">
                                        <span class="menu-text" data-lang="second-level"> Second Level </span>
                                        <span class="menu-arrow"></span>
                                    </a>
                                    <div class="collapse" id="sidebarSecondLevel">
                                        <ul class="sub-menu">
                                            <li class="side-nav-item">
                                                <a href="javascript: void(0);" class="side-nav-link">
                                                    <span class="menu-text">Item 2.1</span>
                                                </a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a href="javascript: void(0);" class="side-nav-link">
                                                    <span class="menu-text">Item 2.2</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="side-nav-item">
                                    <a data-bs-toggle="collapse" href="#sidebarThirdLevel" aria-expanded="false" aria-controls="sidebarThirdLevel" class="side-nav-link">
                                        <span class="menu-text" data-lang="third-level"> Third Level </span>
                                        <span class="menu-arrow"></span>
                                    </a>
                                    <div class="collapse" id="sidebarThirdLevel">
                                        <ul class="sub-menu">
                                            <li class="side-nav-item">
                                                <a href="javascript: void(0);" class="side-nav-link">Item 1</a>
                                            </li>
                                            <li class="side-nav-item">
                                                <a data-bs-toggle="collapse" href="#sidebarFourthLevel" aria-expanded="false" aria-controls="sidebarFourthLevel" class="side-nav-link">
                                                    <span class="menu-text"> Item 2 </span>
                                                    <span class="menu-arrow"></span>
                                                </a>
                                                <div class="collapse" id="sidebarFourthLevel">
                                                    <ul class="sub-menu">
                                                        <li class="side-nav-item">
                                                            <a href="javascript: void(0);" class="side-nav-link">
                                                                <span class="menu-text">Item 3.1</span>
                                                            </a>
                                                        </li>
                                                        <li class="side-nav-item">
                                                            <a href="javascript: void(0);" class="side-nav-link">
                                                                <span class="menu-text">Item 3.2</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>

                    <li class="side-nav-item">
                        <a href="#!" class="side-nav-link disabled">
                            <span class="menu-icon"><i data-lucide="eye-off"></i></span>
                            <span class="menu-text" data-lang="disabled-menu"> Disabled Menu </span>
                        </a>
                    </li>

                </ul>
            </div>
        </div>
        <!-- Sidenav Menu End -->

        <!-- Topbar Start -->
        <header class="app-topbar">
            <div class="container-fluid topbar-menu">
                <div class="d-flex align-items-center gap-2">
                    <!-- Topbar Brand Logo -->
                    <div class="logo-topbar">
                        <!-- Logo light -->
                        <a href="index.html" class="logo-light">
                            <span class="logo-lg">
                                <img src="assets/images/logo.png" alt="logo">
                            </span>
                            <span class="logo-sm">
                                <img src="assets/images/logo-sm.png" alt="small logo">
                            </span>
                        </a>

                        <!-- Logo Dark -->
                        <a href="index.html" class="logo-dark">
                            <span class="logo-lg">
                                <img src="assets/images/logo-black.png" alt="dark logo">
                            </span>
                            <span class="logo-sm">
                                <img src="assets/images/logo-sm.png" alt="small logo">
                            </span>
                        </a>
                    </div>

                    <!-- Sidebar Menu Toggle Button -->
                    <button class="sidenav-toggle-button btn btn-default btn-icon">
                        <i class="ti ti-menu-4 fs-22"></i>
                    </button>

                    <!-- Horizontal Menu Toggle Button -->
                    <button class="topnav-toggle-button px-2" data-bs-toggle="collapse" data-bs-target="#topnav-menu-content">
                        <i class="ti ti-menu-4 fs-22"></i>
                    </button>

                    <!-- Mega Menu Dropdown -->
                    <div class="topbar-item d-none d-md-flex">
                        <div class="dropdown">
                            <button class="topbar-link btn fw-medium btn-link dropdown-toggle drop-arrow-none" data-lang="mega-menu" data-bs-toggle="dropdown" data-bs-offset="0,17" type="button" aria-haspopup="false" aria-expanded="false">
                                Mega Menu <i class="ti ti-chevron-down ms-1 fs-16"></i>
                            </button>
                            <div class="dropdown-menu dropdown-menu-xxl p-0">
                                <div class="h-100" style="max-height: 380px;" data-simplebar>
                                    <div class="row g-0">

                                        <!-- Dashboard & Analytics -->
                                        <div class="col-md-4">
                                            <div class="p-2">
                                                <h5 class="mb-1 fw-semibold fs-sm dropdown-header">Dashboard & Analytics</h5>
                                                <ul class="list-unstyled megamenu-list">
                                                    <li><a href="javascript:void(0);" class="dropdown-item"><i class="ti ti-chart-line align-middle me-2 fs-16"></i> Sales Dashboard</a></li>
                                                    <li><a href="javascript:void(0);" class="dropdown-item"><i class="ti ti-bulb align-middle me-2 fs-16"></i> Marketing Dashboard</a></li>
                                                    <li><a href="javascript:void(0);" class="dropdown-item"><i class="ti ti-currency-dollar align-middle me-2 fs-16"></i> Finance Overview</a></li>
                                                    <li><a href="javascript:void(0);" class="dropdown-item"><i class="ti ti-users align-middle me-2 fs-16"></i> User Analytics</a></li>
                                                    <li><a href="javascript:void(0);" class="dropdown-item"><i class="ti ti-activity align-middle me-2 fs-16"></i> Traffic Insights</a></li>
                                                    <li><a href="javascript:void(0);" class="dropdown-item"><i class="ti ti-gauge align-middle me-2 fs-16"></i> Performance Metrics</a></li>
                                                    <li><a href="javascript:void(0);" class="dropdown-item"><i class="ti ti-zoom-check align-middle me-2 fs-16"></i> Conversion Tracking</a></li>
                                                </ul>
                                            </div>
                                        </div>

                                        <!-- Project Management -->
                                        <div class="col-md-4">
                                            <div class="p-2">
                                                <h5 class="mb-1 fw-semibold fs-sm dropdown-header">Project Management</h5>
                                                <ul class="list-unstyled megamenu-list">
                                                    <li><a href="javascript:void(0);" class="dropdown-item"><i class="ti ti-layout-kanban align-middle me-2 fs-16"></i> Kanban Workflow</a></li>
                                                    <li><a href="javascript:void(0);" class="dropdown-item"><i class="ti ti-calendar-stats align-middle me-2 fs-16"></i> Project Timeline</a></li>
                                                    <li><a href="javascript:void(0);" class="dropdown-item"><i class="ti ti-list-check align-middle me-2 fs-16"></i> Task Management</a></li>
                                                    <li><a href="javascript:void(0);" class="dropdown-item"><i class="ti ti-users-group align-middle me-2 fs-16"></i> Team Members</a></li>
                                                    <li><a href="javascript:void(0);" class="dropdown-item"><i class="ti ti-clipboard-list align-middle me-2 fs-16"></i> Assignments</a></li>
                                                    <li><a href="javascript:void(0);" class="dropdown-item"><i class="ti ti-chart-pie align-middle me-2 fs-16"></i> Resource Allocation</a></li>
                                                    <li><a href="javascript:void(0);" class="dropdown-item"><i class="ti ti-file-invoice align-middle me-2 fs-16"></i> Project Reports</a></li>
                                                </ul>
                                            </div>
                                        </div>

                                        <!-- User Management -->
                                        <div class="col-md-4">
                                            <div class="p-2">
                                                <h5 class="mb-1 fw-semibold fs-sm dropdown-header">User Management</h5>
                                                <ul class="list-unstyled megamenu-list">
                                                    <li><a href="javascript:void(0);" class="dropdown-item"><i class="ti ti-user-circle align-middle me-2 fs-16"></i> User Profiles</a></li>
                                                    <li><a href="javascript:void(0);" class="dropdown-item"><i class="ti ti-lock me-2 align-middle fs-16"></i> Access Control</a></li>
                                                    <li><a href="javascript:void(0);" class="dropdown-item"><i class="ti ti-shield-lock align-middle me-2 fs-16"></i> Role Permissions</a></li>
                                                    <li><a href="javascript:void(0);" class="dropdown-item"><i class="ti ti-notes align-middle me-2 fs-16"></i> Activity Logs</a></li>
                                                    <li><a href="javascript:void(0);" class="dropdown-item"><i class="ti ti-settings align-middle me-2 fs-16"></i> Security Settings</a></li>
                                                    <li><a href="javascript:void(0);" class="dropdown-item"><i class="ti ti-users align-middle me-2 fs-16"></i> User Groups</a></li>
                                                    <li><a href="javascript:void(0);" class="dropdown-item"><i class="ti ti-key align-middle me-2 fs-16"></i> Authentication </a></li>
                                                </ul>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div> <!-- .d-flex-->

                <div class="d-flex align-items-center gap-2">

                    <!-- Search -->
                    <div class="app-search d-none d-xl-flex me-2">
                        <input type="search" class="form-control topbar-search rounded-pill" name="search" placeholder="Quick Search...">
                        <i data-lucide="search" class="app-search-icon text-muted"></i>
                    </div>

                    <!-- Language Dropdown -->
                    <div class="topbar-item">
                        <div class="dropdown">
                            <button class="topbar-link fw-bold" data-bs-toggle="dropdown" data-bs-offset="0,24" type="button" aria-haspopup="false" aria-expanded="false">
                                <img src="assets/images/flags/us.svg" alt="user-image" class="rounded" height="20" id="selected-language-image">
                            </button>
                            <div class="dropdown-menu dropdown-menu-end">
                                <a href="javascript:void(0);" class="dropdown-item" data-translator-lang="en" title="English">
                                    <img src="assets/images/flags/us.svg" alt="English" class="me-1 rounded" height="18" data-translator-image>
                                    <span class="align-middle">English</span>
                                </a>
                                <a href="javascript:void(0);" class="dropdown-item" data-translator-lang="de" title="German">
                                    <img src="assets/images/flags/de.svg" alt="German" class="me-1 rounded" height="18" data-translator-image>
                                    <span class="align-middle">Deutsch</span>
                                </a>
                                <a href="javascript:void(0);" class="dropdown-item" data-translator-lang="it" title="Italian">
                                    <img src="assets/images/flags/it.svg" alt="Italian" class="me-1 rounded" height="18" data-translator-image>
                                    <span class="align-middle">Italiano</span>
                                </a>
                                <a href="javascript:void(0);" class="dropdown-item" data-translator-lang="es" title="Spanish">
                                    <img src="assets/images/flags/es.svg" alt="Spanish" class="me-1 rounded" height="18" data-translator-image>
                                    <span class="align-middle">Español</span>
                                </a>
                                <a href="javascript:void(0);" class="dropdown-item" data-translator-lang="ru" title="Russian">
                                    <img src="assets/images/flags/ru.svg" alt="Russian" class="me-1 rounded" height="18" data-translator-image>
                                    <span class="align-middle">Русский</span>
                                </a>
                                <a href="javascript:void(0);" class="dropdown-item" data-translator-lang="hi" title="Hindi">
                                    <img src="assets/images/flags/in.svg" alt="Hindi" class="me-1 rounded" height="18" data-translator-image>
                                    <span class="align-middle">हिन्दी</span>
                                </a>
                            </div> <!-- end dropdown-menu-->
                        </div> <!-- end dropdown-->
                    </div> <!-- end topbar item-->

                    <!-- Notification Dropdown -->
                    <div class="topbar-item">
                        <div class="dropdown">
                            <button class="topbar-link dropdown-toggle drop-arrow-none" data-bs-toggle="dropdown" data-bs-offset="0,24" type="button" data-bs-auto-close="outside" aria-haspopup="false" aria-expanded="false">
                                <i data-lucide="bell" class="fs-xxl"></i>
                                <span class="badge text-bg-danger badge-circle topbar-badge">5</span>
                            </button>

                            <div class="dropdown-menu p-0 dropdown-menu-end dropdown-menu-lg">
                                <div class="px-3 py-2 border-bottom">
                                    <div class="row align-items-center">
                                        <div class="col">
                                            <h6 class="m-0 fs-md fw-semibold">Notifications</h6>
                                        </div>
                                        <div class="col text-end">
                                            <a href="#!" class="badge badge-soft-success badge-label py-1">07 Notifications</a>
                                        </div>
                                    </div>
                                </div>

                                <div style="max-height: 300px;" data-simplebar>
                                    <!-- Notification 1 -->
                                    <div class="dropdown-item notification-item py-2 text-wrap" id="message-1">
                                        <span class="d-flex align-items-center gap-3">
                                            <span class="flex-shrink-0 position-relative">
                                                <img src="assets/images/users/user-4.jpg" class="avatar-md rounded-circle" alt="User Avatar">
                                                <span class="position-absolute rounded-pill bg-success notification-badge">
                                                    <i class="ti ti-bell align-middle"></i>
                                                    <span class="visually-hidden">unread notification</span>
                                                </span>
                                            </span>
                                            <span class="flex-grow-1 text-muted">
                                                <span class="fw-medium text-body">Emily Johnson</span> commented on a task in <span class="fw-medium text-body">Design Sprint</span><br>
                                                <span class="fs-xs">12 minutes ago</span>
                                            </span>
                                            <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0 position-absolute end-0 me-2 d-none noti-close-btn" data-dismissible="#message-1">
                                                <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                            </button>
                                        </span>
                                    </div>

                                    <!-- Notification 2 -->
                                    <div class="dropdown-item notification-item py-2 text-wrap" id="message-2">
                                        <span class="d-flex align-items-center gap-3">
                                            <span class="flex-shrink-0 position-relative">
                                                <img src="assets/images/users/user-5.jpg" class="avatar-md rounded-circle" alt="User Avatar">
                                                <span class="position-absolute rounded-pill bg-info notification-badge">
                                                    <i class="ti ti-cloud-upload align-middle"></i>
                                                    <span class="visually-hidden">upload notification</span>
                                                </span>
                                            </span>
                                            <span class="flex-grow-1 text-muted">
                                                <span class="fw-medium text-body">Michael Lee</span> uploaded files to <span class="fw-medium text-body">Marketing Assets</span><br>
                                                <span class="fs-xs">25 minutes ago</span>
                                            </span>
                                            <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0 position-absolute end-0 me-2 d-none noti-close-btn" data-dismissible="#message-2">
                                                <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                            </button>
                                        </span>
                                    </div>

                                    <!-- Notification 3 -->
                                    <div class="dropdown-item notification-item py-2 text-wrap" id="message-3">
                                        <span class="d-flex align-items-center gap-3">
                                            <span class="flex-shrink-0 position-relative">
                                                <img src="assets/images/users/user-6.jpg" class="avatar-md rounded-circle" alt="User Avatar">
                                                <span class="position-absolute rounded-pill bg-warning notification-badge">
                                                    <i class="ti ti-alert-triangle align-middle"></i>
                                                    <span class="visually-hidden">alert</span>
                                                </span>
                                            </span>
                                            <span class="flex-grow-1 text-muted">
                                                <span class="fw-medium text-body">Sophia Ray</span> flagged an issue in <span class="fw-medium text-body">Bug Tracker</span><br>
                                                <span class="fs-xs">40 minutes ago</span>
                                            </span>
                                            <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0 position-absolute end-0 me-2 d-none noti-close-btn" data-dismissible="#message-3">
                                                <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                            </button>
                                        </span>
                                    </div>

                                    <!-- Notification 4 -->
                                    <div class="dropdown-item notification-item py-2 text-wrap" id="message-4">
                                        <span class="d-flex align-items-center gap-3">
                                            <span class="flex-shrink-0 position-relative">
                                                <img src="assets/images/users/user-7.jpg" class="avatar-md rounded-circle" alt="User Avatar">
                                                <span class="position-absolute rounded-pill bg-primary notification-badge">
                                                    <i class="ti ti-calendar-event align-middle"></i>
                                                    <span class="visually-hidden">event notification</span>
                                                </span>
                                            </span>
                                            <span class="flex-grow-1 text-muted">
                                                <span class="fw-medium text-body">David Kim</span> scheduled a meeting for <span class="fw-medium text-body">UX Review</span><br>
                                                <span class="fs-xs">1 hour ago</span>
                                            </span>
                                            <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0 position-absolute end-0 me-2 d-none noti-close-btn" data-dismissible="#message-4">
                                                <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                            </button>
                                        </span>
                                    </div>

                                    <!-- Notification 5 -->
                                    <div class="dropdown-item notification-item py-2 text-wrap" id="message-5">
                                        <span class="d-flex align-items-center gap-3">
                                            <span class="flex-shrink-0 position-relative">
                                                <img src="assets/images/users/user-8.jpg" class="avatar-md rounded-circle" alt="User Avatar">
                                                <span class="position-absolute rounded-pill bg-secondary notification-badge">
                                                    <i class="ti ti-edit-circle align-middle"></i>
                                                    <span class="visually-hidden">edit</span>
                                                </span>
                                            </span>
                                            <span class="flex-grow-1 text-muted">
                                                <span class="fw-medium text-body">Isabella White</span> updated the document in <span class="fw-medium text-body">Product Specs</span><br>
                                                <span class="fs-xs">2 hours ago</span>
                                            </span>
                                            <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0 position-absolute end-0 me-2 d-none noti-close-btn" data-dismissible="#message-5">
                                                <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                            </button>
                                        </span>
                                    </div>

                                    <!-- Notification 6 - Server CPU Alert -->
                                    <div class="dropdown-item notification-item py-2 text-wrap" id="message-6">
                                        <span class="d-flex align-items-center gap-3">
                                            <span class="flex-shrink-0 position-relative">
                                                <span class="avatar-md rounded-circle bg-light d-flex align-items-center justify-content-center">
                                                    <i class="ti ti-server-bolt fs-4 text-danger"></i>
                                                </span>
                                                <span class="position-absolute rounded-pill bg-danger notification-badge">
                                                    <i class="ti ti-alert-circle align-middle"></i>
                                                    <span class="visually-hidden">server alert</span>
                                                </span>
                                            </span>
                                            <span class="flex-grow-1 text-muted">
                                                <span class="fw-medium text-body">Server #3</span> CPU usage exceeded 90%<br>
                                                <span class="fs-xs">Just now</span>
                                            </span>
                                            <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0 position-absolute end-0 me-2 d-none noti-close-btn" data-dismissible="#message-6">
                                                <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                            </button>
                                        </span>
                                    </div>

                                    <!-- Notification 7 - Deployment Success -->
                                    <div class="dropdown-item notification-item py-2 text-wrap" id="message-7">
                                        <span class="d-flex align-items-center gap-3">
                                            <span class="flex-shrink-0 position-relative">
                                                <span class="avatar-md rounded-circle bg-light d-flex align-items-center justify-content-center">
                                                    <i class="ti ti-rocket fs-4 text-success"></i>
                                                </span>
                                                <span class="position-absolute rounded-pill bg-success notification-badge">
                                                    <i class="ti ti-check align-middle"></i>
                                                    <span class="visually-hidden">deployment</span>
                                                </span>
                                            </span>
                                            <span class="flex-grow-1 text-muted">
                                                <span class="fw-medium text-body">Production Server</span> deployment completed successfully<br>
                                                <span class="fs-xs">30 minutes ago</span>
                                            </span>
                                            <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0 position-absolute end-0 me-2 d-none noti-close-btn" data-dismissible="#message-7">
                                                <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                            </button>
                                        </span>
                                    </div>
                                </div>


                                <!-- All-->
                                <a href="javascript:void(0);" class="dropdown-item text-center text-reset text-decoration-underline link-offset-2 fw-bold notify-item border-top border-light py-2">
                                    Read All Messages
                                </a>

                            </div> <!-- End dropdown-menu -->
                        </div> <!-- end dropdown-->
                    </div> <!-- end topbar item-->

                    <!-- Theme Mode Dropdown -->
                    <div class="topbar-item">
                        <div class="dropdown">
                            <button class="topbar-link" data-bs-toggle="dropdown" data-bs-offset="0,24" type="button" aria-haspopup="false" aria-expanded="false">
                                <i data-lucide="layout-grid" class="fs-xxl"></i>
                            </button>

                            <div class="dropdown-menu dropdown-menu-lg p-2 dropdown-menu-end">
                                <div class="row align-items-center g-1">
                                    <div class="col-4">
                                        <a href="javascript:void(0);" class="dropdown-item border border-dashed rounded text-center py-2">
                                            <span class="avatar-sm d-block mx-auto mb-1">
                                                <span class="avatar-title text-bg-light rounded-circle">
                                                    <img src="assets/images/logos/google.svg" alt="Google Logo" height="18">
                                                </span>
                                            </span>
                                            <span class="align-middle fw-medium">Google</span>
                                        </a>
                                    </div>

                                    <div class="col-4">
                                        <a href="javascript:void(0);" class="dropdown-item border border-dashed rounded text-center py-2">
                                            <span class="avatar-sm d-block mx-auto mb-1">
                                                <span class="avatar-title text-bg-light rounded-circle">
                                                    <img src="assets/images/logos/figma.svg" alt="Figma Logo" height="18">
                                                </span>
                                            </span>
                                            <span class="align-middle fw-medium">Figma</span>
                                        </a>
                                    </div>

                                    <div class="col-4">
                                        <a href="javascript:void(0);" class="dropdown-item border border-dashed rounded text-center py-2">
                                            <span class="avatar-sm d-block mx-auto mb-1">
                                                <span class="avatar-title text-bg-light rounded-circle">
                                                    <img src="assets/images/logos/slack.svg" alt="Slack Logo" height="18">
                                                </span>
                                            </span>
                                            <span class="align-middle fw-medium">Slack</span>
                                        </a>
                                    </div>

                                    <div class="col-4">
                                        <a href="javascript:void(0);" class="dropdown-item border border-dashed rounded text-center py-2">
                                            <span class="avatar-sm d-block mx-auto mb-1">
                                                <span class="avatar-title text-bg-light rounded-circle">
                                                    <img src="assets/images/logos/dropbox.svg" alt="Dropbox Logo" height="18">
                                                </span>
                                            </span>
                                            <span class="align-middle fw-medium">Dropbox</span>
                                        </a>
                                    </div>

                                    <div class="col-4 text-center">
                                        <a href="javascript:void(0);" class="btn btn-sm rounded-circle btn-icon btn-danger">
                                            <i data-lucide="circle-plus" class="fs-18"></i>
                                        </a>
                                    </div>

                                    <div class="col-4">
                                        <a href="javascript:void(0);" class="dropdown-item border border-dashed rounded text-center py-2">
                                            <span class="avatar-sm d-block mx-auto mb-1">
                                                <span class="avatar-title bg-primary-subtle text-primary rounded-circle">
                                                    <i class="ti ti-calendar fs-18"></i>
                                                </span>
                                            </span>
                                            <span class="align-middle fw-medium">Calendar</span>
                                        </a>
                                    </div>

                                    <div class="col-4">
                                        <a href="javascript:void(0);" class="dropdown-item border border-dashed rounded text-center py-2">
                                            <span class="avatar-sm d-block mx-auto mb-1">
                                                <span class="avatar-title bg-primary-subtle text-primary rounded-circle">
                                                    <i class="ti ti-message-circle fs-18"></i>
                                                </span>
                                            </span>
                                            <span class="align-middle fw-medium">Chat</span>
                                        </a>
                                    </div>

                                    <div class="col-4">
                                        <a href="javascript:void(0);" class="dropdown-item border border-dashed rounded text-center py-2">
                                            <span class="avatar-sm d-block mx-auto mb-1">
                                                <span class="avatar-title bg-primary-subtle text-primary rounded-circle">
                                                    <i class="ti ti-folder fs-18"></i>
                                                </span>
                                            </span>
                                            <span class="align-middle fw-medium">Files</span>
                                        </a>
                                    </div>

                                    <div class="col-4">
                                        <a href="javascript:void(0);" class="dropdown-item border border-dashed rounded text-center py-2">
                                            <span class="avatar-sm d-block mx-auto mb-1">
                                                <span class="avatar-title bg-primary-subtle text-primary rounded-circle">
                                                    <i class="ti ti-users fs-18"></i>
                                                </span>
                                            </span>
                                            <span class="align-middle fw-medium">Team</span>
                                        </a>
                                    </div>

                                </div>
                            </div>

                        </div> <!-- end dropdown-->
                    </div> <!-- end topbar item-->

                    <!-- Theme Mode Dropdown -->
                    <div class="topbar-item">
                        <div class="dropdown">
                            <button class="topbar-link" data-bs-toggle="dropdown" data-bs-offset="0,24" type="button" aria-haspopup="false" aria-expanded="false">
                                <i data-lucide="sun" class="fs-xxl"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end thememode-dropdown">

                                <li>
                                    <label class="dropdown-item">
                                        <i data-lucide="sun" class="align-middle me-1 fs-16"></i>
                                        <span class="align-middle">Light</span>
                                        <input class="form-check-input" type="radio" name="data-bs-theme" value="light">
                                    </label>
                                </li>

                                <li>
                                    <label class="dropdown-item">
                                        <i data-lucide="moon" class="align-middle me-1 fs-16"></i>
                                        <span class="align-middle">Dark</span>
                                        <input class="form-check-input" type="radio" name="data-bs-theme" value="dark">
                                    </label>
                                </li>

                                <li>
                                    <label class="dropdown-item">
                                        <i data-lucide="monitor-cog" class="align-middle me-1 fs-16"></i>
                                        <span class="align-middle">System</span>
                                        <input class="form-check-input" type="radio" name="data-bs-theme" value="system">
                                    </label>
                                </li>

                            </ul> <!-- end dropdown-menu-->
                        </div> <!-- end dropdown-->
                    </div> <!-- end topbar item-->

                    <!-- FullScreen -->
                    <div class="topbar-item d-none d-sm-flex">
                        <button class="topbar-link" type="button" data-toggle="fullscreen">
                            <i data-lucide="maximize" class="fs-xxl fullscreen-off"></i>
                            <i data-lucide="minimize" class="fs-xxl fullscreen-on"></i>
                        </button>
                    </div>

                    <!-- Light/Dark Mode Button -->
                    <div class="topbar-item d-none">
                        <button class="topbar-link" id="light-dark-mode" type="button">
                            <i data-lucide="moon" class="fs-xxl mode-light-moon"></i>
                        </button>
                    </div>

                    <!-- Monocrome Mode Button -->
                    <div class="topbar-item d-none d-sm-flex">
                        <button class="topbar-link" type="button" id="monochrome-mode">
                            <i data-lucide="palette" class="fs-xxl"></i>
                        </button>
                    </div>

                    <!-- User Dropdown -->
                    <div class="topbar-item nav-user">
                        <div class="dropdown">
                            <a class="topbar-link dropdown-toggle drop-arrow-none px-2" data-bs-toggle="dropdown" data-bs-offset="0,19" href="#!" aria-haspopup="false" aria-expanded="false">
                                <img src="assets/images/users/user-3.jpg" width="32" class="rounded-circle me-lg-2 d-flex" alt="user-image">
                                <div class="d-lg-flex align-items-center gap-1 d-none">
                                    <h5 class="my-0">Geneva</h5>
                                    <i class="ti ti-chevron-down align-middle"></i>
                                </div>
                            </a>
                            <div class="dropdown-menu dropdown-menu-end">
                                <!-- Header -->
                                <div class="dropdown-header noti-title">
                                    <h6 class="text-overflow m-0">Welcome back 👋!</h6>
                                </div>

                                <!-- My Profile -->
                                <a href="users-profile.html" class="dropdown-item">
                                    <i class="ti ti-user-circle me-1 fs-17 align-middle"></i>
                                    <span class="align-middle">Profile</span>
                                </a>

                                <!-- Notifications -->
                                <a href="javascript:void(0);" class="dropdown-item">
                                    <i class="ti ti-bell-ringing me-1 fs-17 align-middle"></i>
                                    <span class="align-middle">Notifications</span>
                                </a>

                                <!-- Settings -->
                                <a href="javascript:void(0);" class="dropdown-item">
                                    <i class="ti ti-settings-2 me-1 fs-17 align-middle"></i>
                                    <span class="align-middle">Account Settings</span>
                                </a>

                                <!-- Support -->
                                <a href="javascript:void(0);" class="dropdown-item">
                                    <i class="ti ti-headset me-1 fs-17 align-middle"></i>
                                    <span class="align-middle">Support Center</span>
                                </a>

                                <!-- Divider -->
                                <div class="dropdown-divider"></div>

                                <!-- Lock -->
                                <a href="auth-lock-screen.html" class="dropdown-item">
                                    <i class="ti ti-lock me-1 fs-17 align-middle"></i>
                                    <span class="align-middle">Lock Screen</span>
                                </a>

                                <!-- Logout -->
                                <form method="POST" action="/logout">
                                    @csrf
                                    <button type="submit" class="dropdown-item fw-semibold border-0 bg-transparent">
                                        <i class="ti ti-logout-2 me-1 fs-17 align-middle"></i>
                                        <span class="align-middle">Log Out</span>
                                    </button>
                                </form>
                            </div>

                        </div>
                    </div>

                    <!-- Button Trigger Customizer Offcanvas -->
                    <div class="topbar-item d-none d-sm-flex">
                        <button class="topbar-link" data-bs-toggle="offcanvas" data-bs-target="#theme-settings-offcanvas" type="button">
                            <i class="ti ti-settings icon-spin fs-24"></i>
                        </button>
                    </div>
                </div>
            </div>
        </header>
        <!-- Topbar End -->

        

        <!-- ============================================================== -->
        <!-- Start Main Content -->
        <!-- ============================================================== -->

        <div class="content-page">

            <div class="container-fluid">

                
                <div class="page-title-head d-flex align-items-center">
                    <div class="flex-grow-1">
                        <h4 class="fs-xl fw-bold m-0">Dashboard</h4>
                    </div>

                    <div class="text-end">
                        <ol class="breadcrumb m-0 py-0">
                            <li class="breadcrumb-item"><a href="javascript: void(0);">UBold</a></li>
                            
                            <li class="breadcrumb-item active">Dashboard</li>
                        </ol>
                    </div>
                </div>
                

                <div class="row row-cols-xxl-4 row-cols-md-2 row-cols-1">
                    <!-- Total Sales Widget -->
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="avatar fs-60 avatar-img-size flex-shrink-0">
                                        <span class="avatar-title bg-primary-subtle text-primary rounded-circle fs-24">
                                            <i class="ti ti-credit-card"></i>
                                        </span>
                                    </div>
                                    <div class="text-end">
                                        <h3 class="mb-2 fw-normal">$<span data-target="124.7">0</span>K</h3>
                                        <p class="mb-0 text-muted"><span>Total Sales</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- end col -->

                    <!-- Orders Placed Widget -->
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="avatar fs-60 avatar-img-size flex-shrink-0">
                                        <span class="avatar-title bg-success-subtle text-success rounded-circle fs-24">
                                            <i class="ti ti-shopping-cart"></i>
                                        </span>
                                    </div>
                                    <div class="text-end">
                                        <h3 class="mb-2 fw-normal"><span data-target="2358">0</span></h3>
                                        <p class="mb-0 text-muted"><span>Orders Placed</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- end col -->

                    <!-- Active Customers Widget -->
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="avatar fs-60 avatar-img-size flex-shrink-0">
                                        <span class="avatar-title bg-info-subtle text-info rounded-circle fs-24">
                                            <i class="ti ti-users"></i>
                                        </span>
                                    </div>
                                    <div class="text-end">
                                        <h3 class="mb-2 fw-normal"><span data-target="839">0</span></h3>
                                        <p class="mb-0 text-muted"><span>Active Customers</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- end col -->

                    <!-- Refund Requests Widget -->
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="avatar fs-60 avatar-img-size flex-shrink-0">
                                        <span class="avatar-title bg-warning-subtle text-warning rounded-circle fs-24">
                                            <i class="ti ti-rotate-clockwise-2"></i>
                                        </span>
                                    </div>
                                    <div class="text-end">
                                        <h3 class="mb-2 fw-normal"><span data-target="41">0</span></h3>
                                        <p class="mb-0 text-muted"><span>Refund Requests</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- end col -->
                </div><!-- end row -->

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body p-0">
                                <div class="row g-0">
                                    <div class="col-xxl-3 col-xl-6 order-xl-1 order-xxl-0">
                                        <div class="p-3 border-end border-dashed">
                                            <h4 class="card-title mb-0">Total Sales</h4>
                                            <p class="text-muted fs-xs">
                                                You have 21 pending orders awaiting fulfillment.
                                            </p>

                                            <div class="row mt-4">
                                                <div class="col-lg-12">
                                                    <div style="height: 300px;">
                                                        <canvas id="multi-pie-chart"></canvas>
                                                    </div>
                                                </div>
                                            </div>
                                        </div> <!-- end .p-4-->
                                        <hr class="d-xxl-none border-light m-0">
                                    </div> <!-- end col-->
                                    <div class="col-xxl-9 order-xl-3 order-xxl-1">
                                        <div class="px-4 py-3">
                                            <div class="d-flex justify-content-between mb-3">
                                                <h4 class="card-title">Sales Analytics</h4>
                                                <a href="#!" class="link-reset text-decoration-underline fw-semibold link-offset-3">View Reports <i class="ti ti-arrow-right"></i></a>
                                            </div>

                                            <div dir="ltr">
                                                <div class="mt-3" style="height: 330px;">
                                                    <canvas id="sales-analytics-chart"></canvas>
                                                </div>
                                            </div>
                                        </div> <!-- end .px-4-->
                                    </div> <!-- end col-->
                                    
                                </div> <!-- end row-->
                            </div> <!-- end card-body-->
                        </div> <!-- end card-->
                    </div> <!-- end col-->
                </div> <!-- end row-->

                <div class="row">
                    <div class="col-xxl-6">
                        <div data-table data-table-rows-per-page="7" class="card">
                            <div class="card-header justify-content-between align-items-center border-dashed">
                                <h4 class="card-title mb-0">Product Inventory</h4>
                                <div class="d-flex gap-2">
                                    <a href="ecommerce-add-product.html" class="btn btn-sm btn-soft-secondary">
                                        <i class="ti ti-plus me-1"></i> Add Product
                                    </a>
                                    <a href="javascript:void(0);" class="btn btn-sm btn-primary">
                                        <i class="ti ti-file-export me-1"></i> Export CSV
                                    </a>
                                </div>
                            </div>

                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table table-centered table-custom table-sm table-nowrap table-hover mb-0">
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="assets/images/products/1.png" alt="" class="avatar-sm rounded-circle me-2">
                                                        <div>
                                                            <span class="text-muted fs-xs">Audio</span>
                                                            <h5 class="fs-base mb-0"><a href="ecommerce-product-details.html" class="text-body">Wireless Earbuds</a></h5>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Stock</span>
                                                    <h5 class="fs-base fw-normal mb-0">180 units</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Price</span>
                                                    <h5 class="fs-base fw-normal mb-0">$59.90</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Ratings</span>
                                                    <h5 class="fs-base fw-normal mb-0">
                                                        <span class="text-warning">
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star"></span>
                                                        </span>
                                                        <span class="ms-1"><a href="ecommerce-reviews.html" class="link-reset fw-semibold">(52)</a></span>
                                                    </h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Status</span>
                                                    <h5 class="fs-base fw-normal mb-0"><i class="ti ti-circle-filled fs-xs text-success"></i> Active</h5>
                                                </td>
                                                <td style="width: 30px;">
                                                    <div class="dropdown">
                                                        <a href="#" class="dropdown-toggle text-muted drop-arrow-none card-drop p-0" data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-lg"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end">
                                                            <a href="#" class="dropdown-item">Edit Product</a>
                                                            <a href="#" class="dropdown-item">Remove</a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="assets/images/products/2.png" alt="" class="avatar-sm rounded-circle me-2">
                                                        <div>
                                                            <span class="text-muted fs-xs">Accessories</span>
                                                            <h5 class="fs-base mb-0"><a href="ecommerce-product-details.html" class="text-body">Laptop Stand</a></h5>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Stock</span>
                                                    <h5 class="fs-base fw-normal mb-0">45 units</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Price</span>
                                                    <h5 class="fs-base fw-normal mb-0">$29.00</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Ratings</span>
                                                    <h5 class="fs-base fw-normal mb-0">
                                                        <span class="text-warning">
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star"></span>
                                                            <span class="ti ti-star"></span>
                                                        </span>
                                                        <span class="ms-1"><a href="ecommerce-reviews.html" class="link-reset fw-semibold">(11)</a></span>
                                                    </h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Status</span>
                                                    <h5 class="fs-base fw-normal mb-0"><i class="ti ti-circle-filled fs-xs text-warning"></i> Low Stock</h5>
                                                </td>
                                                <td style="width: 30px;">
                                                    <div class="dropdown">
                                                        <a href="#" class="dropdown-toggle text-muted drop-arrow-none card-drop p-0" data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-lg"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end">
                                                            <a href="#" class="dropdown-item">Edit Product</a>
                                                            <a href="#" class="dropdown-item">Remove</a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="assets/images/products/3.png" alt="" class="avatar-sm rounded-circle me-2">
                                                        <div>
                                                            <span class="text-muted fs-xs">Gadgets</span>
                                                            <h5 class="fs-base mb-0"><a href="ecommerce-product-details.html" class="text-body">Drone Camera</a></h5>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Stock</span>
                                                    <h5 class="fs-base fw-normal mb-0">0 units</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Price</span>
                                                    <h5 class="fs-base fw-normal mb-0">$199.99</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Ratings</span>
                                                    <h5 class="fs-base fw-normal mb-0">
                                                        <span class="text-warning">
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-half-filled"></span>
                                                        </span>
                                                        <span class="ms-1"><a href="ecommerce-reviews.html" class="link-reset fw-semibold">(8)</a></span>
                                                    </h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Status</span>
                                                    <h5 class="fs-base fw-normal mb-0"><i class="ti ti-circle-filled fs-xs text-danger"></i> Out of Stock</h5>
                                                </td>
                                                <td style="width: 30px;">
                                                    <div class="dropdown">
                                                        <a href="#" class="dropdown-toggle text-muted drop-arrow-none card-drop p-0" data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-lg"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end">
                                                            <a href="#" class="dropdown-item">Edit Product</a>
                                                            <a href="#" class="dropdown-item">Remove</a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="assets/images/products/4.png" alt="" class="avatar-sm rounded-circle me-2">
                                                        <div>
                                                            <span class="text-muted fs-xs">Electronics</span>
                                                            <h5 class="fs-base mb-0"><a href="ecommerce-product-details.html" class="text-body">Portable Projector</a></h5>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Stock</span>
                                                    <h5 class="fs-base fw-normal mb-0">32 units</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Price</span>
                                                    <h5 class="fs-base fw-normal mb-0">$120.00</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Ratings</span>
                                                    <h5 class="fs-base fw-normal mb-0">
                                                        <span class="text-warning">
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star"></span>
                                                            <span class="ti ti-star"></span>
                                                        </span>
                                                        <span class="ms-1"><a href="ecommerce-reviews.html" class="link-reset fw-semibold">(16)</a></span>
                                                    </h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Status</span>
                                                    <h5 class="fs-base fw-normal mb-0"><i class="ti ti-circle-filled fs-xs text-warning"></i> Limited</h5>
                                                </td>
                                                <td style="width: 30px;">
                                                    <div class="dropdown">
                                                        <a href="#" class="dropdown-toggle text-muted drop-arrow-none card-drop p-0" data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-lg"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end">
                                                            <a href="#" class="dropdown-item">Edit Product</a>
                                                            <a href="#" class="dropdown-item">Remove</a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="assets/images/products/5.png" alt="" class="avatar-sm rounded-circle me-2">
                                                        <div>
                                                            <span class="text-muted fs-xs">Mobiles</span>
                                                            <h5 class="fs-base mb-0"><a href="ecommerce-product-details.html" class="text-body">Smartphone G12</a></h5>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Stock</span>
                                                    <h5 class="fs-base fw-normal mb-0">85 units</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Price</span>
                                                    <h5 class="fs-base fw-normal mb-0">$499.00</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Ratings</span>
                                                    <h5 class="fs-base fw-normal mb-0">
                                                        <span class="text-warning">
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star"></span>
                                                        </span>
                                                        <span class="ms-1"><a href="ecommerce-reviews.html" class="link-reset fw-semibold">(112)</a></span>
                                                    </h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Status</span>
                                                    <h5 class="fs-base fw-normal mb-0"><i class="ti ti-circle-filled fs-xs text-success"></i> Active</h5>
                                                </td>
                                                <td style="width: 30px;">
                                                    <div class="dropdown">
                                                        <a href="#" class="dropdown-toggle text-muted drop-arrow-none card-drop p-0" data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-lg"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end">
                                                            <a href="#" class="dropdown-item">Edit Product</a>
                                                            <a href="#" class="dropdown-item">Remove</a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="assets/images/products/6.png" alt="" class="avatar-sm rounded-circle me-2">
                                                        <div>
                                                            <span class="text-muted fs-xs">Audio</span>
                                                            <h5 class="fs-base mb-0"><a href="ecommerce-product-details.html" class="text-body">Noise Cancelling Headphones</a></h5>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Stock</span>
                                                    <h5 class="fs-base fw-normal mb-0">25 units</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Price</span>
                                                    <h5 class="fs-base fw-normal mb-0">$129.99</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Ratings</span>
                                                    <h5 class="fs-base fw-normal mb-0">
                                                        <span class="text-warning">
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-half-filled"></span>
                                                        </span>
                                                        <span class="ms-1"><a href="ecommerce-reviews.html" class="link-reset fw-semibold">(78)</a></span>
                                                    </h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Status</span>
                                                    <h5 class="fs-base fw-normal mb-0"><i class="ti ti-circle-filled fs-xs text-warning"></i> Low Stock</h5>
                                                </td>
                                                <td style="width: 30px;">
                                                    <div class="dropdown">
                                                        <a href="#" class="dropdown-toggle text-muted drop-arrow-none card-drop p-0" data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-lg"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end">
                                                            <a href="#" class="dropdown-item">Edit Product</a>
                                                            <a href="#" class="dropdown-item">Remove</a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="assets/images/products/7.png" alt="" class="avatar-sm rounded-circle me-2">
                                                        <div>
                                                            <span class="text-muted fs-xs">Home Tech</span>
                                                            <h5 class="fs-base mb-0"><a href="ecommerce-product-details.html" class="text-body">Mini Air Purifier</a></h5>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Stock</span>
                                                    <h5 class="fs-base fw-normal mb-0">0 units</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Price</span>
                                                    <h5 class="fs-base fw-normal mb-0">$49.99</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Ratings</span>
                                                    <h5 class="fs-base fw-normal mb-0">
                                                        <span class="text-warning">
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-half-filled"></span>
                                                            <span class="ti ti-star"></span>
                                                        </span>
                                                        <span class="ms-1"><a href="ecommerce-reviews.html" class="link-reset fw-semibold">(34)</a></span>
                                                    </h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Status</span>
                                                    <h5 class="fs-base fw-normal mb-0"><i class="ti ti-circle-filled fs-xs text-danger"></i> Out of Stock</h5>
                                                </td>
                                                <td style="width: 30px;">
                                                    <div class="dropdown">
                                                        <a href="#" class="dropdown-toggle text-muted drop-arrow-none card-drop p-0" data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-lg"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end">
                                                            <a href="#" class="dropdown-item">Edit Product</a>
                                                            <a href="#" class="dropdown-item">Remove</a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="assets/images/products/8.png" alt="" class="avatar-sm rounded-circle me-2">
                                                        <div>
                                                            <span class="text-muted fs-xs">Accessories</span>
                                                            <h5 class="fs-base mb-0"><a href="ecommerce-product-details.html" class="text-body">USB-C Docking Station</a></h5>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Stock</span>
                                                    <h5 class="fs-base fw-normal mb-0">142 units</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Price</span>
                                                    <h5 class="fs-base fw-normal mb-0">$89.00</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Ratings</span>
                                                    <h5 class="fs-base fw-normal mb-0">
                                                        <span class="text-warning">
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-filled"></span>
                                                        </span>
                                                        <span class="ms-1"><a href="ecommerce-reviews.html" class="link-reset fw-semibold">(64)</a></span>
                                                    </h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Status</span>
                                                    <h5 class="fs-base fw-normal mb-0"><i class="ti ti-circle-filled fs-xs text-success"></i> Active</h5>
                                                </td>
                                                <td style="width: 30px;">
                                                    <div class="dropdown">
                                                        <a href="#" class="dropdown-toggle text-muted drop-arrow-none card-drop p-0" data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-lg"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end">
                                                            <a href="#" class="dropdown-item">Edit Product</a>
                                                            <a href="#" class="dropdown-item">Remove</a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="assets/images/products/9.png" alt="" class="avatar-sm rounded-circle me-2">
                                                        <div>
                                                            <span class="text-muted fs-xs">Gadgets</span>
                                                            <h5 class="fs-base mb-0"><a href="ecommerce-product-details.html" class="text-body">Digital Photo Frame</a></h5>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Stock</span>
                                                    <h5 class="fs-base fw-normal mb-0">58 units</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Price</span>
                                                    <h5 class="fs-base fw-normal mb-0">$74.95</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Ratings</span>
                                                    <h5 class="fs-base fw-normal mb-0">
                                                        <span class="text-warning">
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star-filled"></span>
                                                            <span class="ti ti-star"></span>
                                                        </span>
                                                        <span class="ms-1"><a href="ecommerce-reviews.html" class="link-reset fw-semibold">(40)</a></span>
                                                    </h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Status</span>
                                                    <h5 class="fs-base fw-normal mb-0"><i class="ti ti-circle-filled fs-xs text-success"></i> Active</h5>
                                                </td>
                                                <td style="width: 30px;">
                                                    <div class="dropdown">
                                                        <a href="#" class="dropdown-toggle text-muted drop-arrow-none card-drop p-0" data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-lg"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end">
                                                            <a href="#" class="dropdown-item">Edit Product</a>
                                                            <a href="#" class="dropdown-item">Remove</a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>

                                        </tbody>
                                    </table>

                                </div> <!-- end table-responsive-->
                            </div> <!-- end card-body-->

                            <div class="card-footer border-0">
                                <div class="align-items-center justify-content-between row text-center text-sm-start">
                                    <div class="col-sm">
                                        <div data-table-pagination-info="products"></div>
                                    </div>
                                    <div class="col-sm-auto mt-3 mt-sm-0">
                                        <div data-table-pagination></div>
                                    </div> <!-- end col-->
                                </div> <!-- end row-->
                            </div> <!-- end card-footer-->
                        </div> <!-- end card-->
                    </div> <!-- end col-->

                    <div class="col-xxl-6">
                        <div data-table data-table-rows-per-page="7" class="card">
                            <div class="card-header justify-content-between align-items-center border-dashed">
                                <h4 class="card-title mb-0">Recent Orders</h4>
                                <div class="d-flex gap-2">
                                    <a href="javascript:void(0);" class="btn btn-sm btn-soft-secondary">
                                        <i class="ti ti-plus me-1"></i> Add Order
                                    </a>
                                    <a href="javascript:void(0);" class="btn btn-sm btn-primary">
                                        <i class="ti ti-file-export me-1"></i> Export CSV
                                    </a>
                                </div>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table table-centered table-custom table-sm table-nowrap table-hover mb-0">
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="assets/images/users/user-1.jpg" alt="" class="avatar-sm rounded-circle me-2">
                                                        <div>
                                                            <span class="text-muted fs-xs">Alice Cooper</span>
                                                            <h5 class="fs-base mb-0"><a href="ecommerce-order-details.html" class="text-body">#ORD-2001</a></h5>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Product</span>
                                                    <h5 class="fs-base mb-0 fw-normal">Noise Cancelling Headphones</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Date</span>
                                                    <h5 class="fs-base mb-0 fw-normal">2025-05-01</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Amount</span>
                                                    <h5 class="fs-base mb-0 fw-normal">$199.99</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Status</span>
                                                    <h5 class="fs-base mb-0 fw-normal"><i class="ti ti-circle-filled fs-xs text-success"></i> Delivered</h5>
                                                </td>
                                                <td style="width: 30px;">
                                                    <div class="dropdown">
                                                        <a href="#" class="dropdown-toggle text-muted drop-arrow-none card-drop p-0" data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-lg"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end">
                                                            <a href="#" class="dropdown-item">View Details</a>
                                                            <a href="#" class="dropdown-item">Cancel Order</a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="assets/images/users/user-2.jpg" alt="" class="avatar-sm rounded-circle me-2">
                                                        <div>
                                                            <span class="text-muted fs-xs">David Lee</span>
                                                            <h5 class="fs-base mb-0"><a href="ecommerce-order-details.html" class="text-body">#ORD-2002</a></h5>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Product</span>
                                                    <h5 class="fs-base mb-0 fw-normal">4K Monitor</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Date</span>
                                                    <h5 class="fs-base mb-0 fw-normal">2025-04-30</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Amount</span>
                                                    <h5 class="fs-base mb-0 fw-normal">$349.00</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Status</span>
                                                    <h5 class="fs-base mb-0 fw-normal"><i class="ti ti-circle-filled fs-xs text-warning"></i> Pending</h5>
                                                </td>
                                                <td style="width: 30px;">
                                                    <div class="dropdown">
                                                        <a href="#" class="dropdown-toggle text-muted drop-arrow-none card-drop p-0" data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-lg"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end">
                                                            <a href="#" class="dropdown-item">View Details</a>
                                                            <a href="#" class="dropdown-item">Cancel Order</a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="assets/images/users/user-3.jpg" alt="" class="avatar-sm rounded-circle me-2">
                                                        <div>
                                                            <span class="text-muted fs-xs">Sophia Turner</span>
                                                            <h5 class="fs-base mb-0"><a href="ecommerce-order-details.html" class="text-body">#ORD-2003</a></h5>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Product</span>
                                                    <h5 class="fs-base mb-0 fw-normal">Mechanical Keyboard</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Date</span>
                                                    <h5 class="fs-base mb-0 fw-normal">2025-04-29</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Amount</span>
                                                    <h5 class="fs-base mb-0 fw-normal">$89.49</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Status</span>
                                                    <h5 class="fs-base mb-0 fw-normal"><i class="ti ti-circle-filled fs-xs text-success"></i> Completed</h5>
                                                </td>
                                                <td style="width: 30px;">
                                                    <div class="dropdown">
                                                        <a href="#" class="dropdown-toggle text-muted drop-arrow-none card-drop p-0" data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-lg"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end">
                                                            <a href="#" class="dropdown-item">View Details</a>
                                                            <a href="#" class="dropdown-item">Cancel Order</a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="assets/images/users/user-4.jpg" alt="" class="avatar-sm rounded-circle me-2">
                                                        <div>
                                                            <span class="text-muted fs-xs">James Wilson</span>
                                                            <h5 class="fs-base mb-0"><a href="ecommerce-order-details.html" class="text-body">#ORD-2004</a></h5>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Product</span>
                                                    <h5 class="fs-base mb-0 fw-normal">Drone Camera</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Date</span>
                                                    <h5 class="fs-base mb-0 fw-normal">2025-04-28</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Amount</span>
                                                    <h5 class="fs-base mb-0 fw-normal">$450.00</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Status</span>
                                                    <h5 class="fs-base mb-0 fw-normal"><i class="ti ti-circle-filled fs-xs text-danger"></i> Cancelled</h5>
                                                </td>
                                                <td style="width: 30px;">
                                                    <div class="dropdown">
                                                        <a href="#" class="dropdown-toggle text-muted drop-arrow-none card-drop p-0" data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-lg"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end">
                                                            <a href="#" class="dropdown-item">View Details</a>
                                                            <a href="#" class="dropdown-item">Cancel Order</a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="assets/images/users/user-5.jpg" alt="" class="avatar-sm rounded-circle me-2">
                                                        <div>
                                                            <span class="text-muted fs-xs">Ava Carter</span>
                                                            <h5 class="fs-base mb-0"><a href="ecommerce-order-details.html" class="text-body">#ORD-2005</a></h5>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Product</span>
                                                    <h5 class="fs-base mb-0 fw-normal">Wireless Earbuds</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Date</span>
                                                    <h5 class="fs-base mb-0 fw-normal">2025-04-27</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Amount</span>
                                                    <h5 class="fs-base mb-0 fw-normal">$129.99</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Status</span>
                                                    <h5 class="fs-base mb-0 fw-normal"><i class="ti ti-circle-filled fs-xs text-success"></i> Completed</h5>
                                                </td>
                                                <td style="width: 30px;">
                                                    <div class="dropdown">
                                                        <a href="#" class="dropdown-toggle text-muted drop-arrow-none card-drop p-0" data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-lg"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end">
                                                            <a href="#" class="dropdown-item">View Details</a>
                                                            <a href="#" class="dropdown-item">Cancel Order</a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="assets/images/users/user-6.jpg" alt="" class="avatar-sm rounded-circle me-2">
                                                        <div>
                                                            <span class="text-muted fs-xs">Ethan Brooks</span>
                                                            <h5 class="fs-base mb-0"><a href="ecommerce-order-details.html" class="text-body">#ORD-2011</a></h5>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Product</span>
                                                    <h5 class="fs-base mb-0 fw-normal">VR Headset</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Date</span>
                                                    <h5 class="fs-base mb-0 fw-normal">2025-05-02</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Amount</span>
                                                    <h5 class="fs-base mb-0 fw-normal">$299.00</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Status</span>
                                                    <h5 class="fs-base mb-0 fw-normal"><i class="ti ti-circle-filled fs-xs text-success"></i> Completed</h5>
                                                </td>
                                                <td style="width: 30px;">
                                                    <div class="dropdown">
                                                        <a href="#" class="dropdown-toggle text-muted drop-arrow-none card-drop p-0" data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-lg"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end">
                                                            <a href="#" class="dropdown-item">View Details</a>
                                                            <a href="#" class="dropdown-item">Cancel Order</a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="assets/images/users/user-7.jpg" alt="" class="avatar-sm rounded-circle me-2">
                                                        <div>
                                                            <span class="text-muted fs-xs">Mia Clarke</span>
                                                            <h5 class="fs-base mb-0"><a href="ecommerce-order-details.html" class="text-body">#ORD-2012</a></h5>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Product</span>
                                                    <h5 class="fs-base mb-0 fw-normal">Portable Charger</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Date</span>
                                                    <h5 class="fs-base mb-0 fw-normal">2025-05-01</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Amount</span>
                                                    <h5 class="fs-base mb-0 fw-normal">$59.99</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Status</span>
                                                    <h5 class="fs-base mb-0 fw-normal"><i class="ti ti-circle-filled fs-xs text-success"></i> Completed</h5>
                                                </td>
                                                <td style="width: 30px;">
                                                    <div class="dropdown">
                                                        <a href="#" class="dropdown-toggle text-muted drop-arrow-none card-drop p-0" data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-lg"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end">
                                                            <a href="#" class="dropdown-item">View Details</a>
                                                            <a href="#" class="dropdown-item">Cancel Order</a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="assets/images/users/user-8.jpg" alt="" class="avatar-sm rounded-circle me-2">
                                                        <div>
                                                            <span class="text-muted fs-xs">Lucas Perry</span>
                                                            <h5 class="fs-base mb-0"><a href="ecommerce-order-details.html" class="text-body">#ORD-2013</a></h5>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Product</span>
                                                    <h5 class="fs-base mb-0 fw-normal">Smartphone Gimbal</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Date</span>
                                                    <h5 class="fs-base mb-0 fw-normal">2025-04-30</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Amount</span>
                                                    <h5 class="fs-base mb-0 fw-normal">$149.99</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Status</span>
                                                    <h5 class="fs-base mb-0 fw-normal"><i class="ti ti-circle-filled fs-xs text-warning"></i> Pending</h5>
                                                </td>
                                                <td style="width: 30px;">
                                                    <div class="dropdown">
                                                        <a href="#" class="dropdown-toggle text-muted drop-arrow-none card-drop p-0" data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-lg"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end">
                                                            <a href="#" class="dropdown-item">View Details</a>
                                                            <a href="#" class="dropdown-item">Cancel Order</a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="assets/images/users/user-9.jpg" alt="" class="avatar-sm rounded-circle me-2">
                                                        <div>
                                                            <span class="text-muted fs-xs">Chloe Adams</span>
                                                            <h5 class="fs-base mb-0"><a href="ecommerce-order-details.html" class="text-body">#ORD-2014</a></h5>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Product</span>
                                                    <h5 class="fs-base mb-0 fw-normal">LED Desk Lamp</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Date</span>
                                                    <h5 class="fs-base mb-0 fw-normal">2025-04-29</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Amount</span>
                                                    <h5 class="fs-base mb-0 fw-normal">$45.00</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Status</span>
                                                    <h5 class="fs-base mb-0 fw-normal"><i class="ti ti-circle-filled fs-xs text-success"></i> Delivered</h5>
                                                </td>
                                                <td style="width: 30px;">
                                                    <div class="dropdown">
                                                        <a href="#" class="dropdown-toggle text-muted drop-arrow-none card-drop p-0" data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-lg"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end">
                                                            <a href="#" class="dropdown-item">View Details</a>
                                                            <a href="#" class="dropdown-item">Cancel Order</a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="assets/images/users/user-10.jpg" alt="" class="avatar-sm rounded-circle me-2">
                                                        <div>
                                                            <span class="text-muted fs-xs">Benjamin Gray</span>
                                                            <h5 class="fs-base mb-0"><a href="ecommerce-order-details.html" class="text-body">#ORD-2015</a></h5>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Product</span>
                                                    <h5 class="fs-base mb-0 fw-normal">Noise Meter</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Date</span>
                                                    <h5 class="fs-base mb-0 fw-normal">2025-04-28</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Amount</span>
                                                    <h5 class="fs-base mb-0 fw-normal">$75.49</h5>
                                                </td>
                                                <td>
                                                    <span class="text-muted fs-xs">Status</span>
                                                    <h5 class="fs-base mb-0 fw-normal"><i class="ti ti-circle-filled fs-xs text-success"></i> Delivered</h5>
                                                </td>
                                                <td style="width: 30px;">
                                                    <div class="dropdown">
                                                        <a href="#" class="dropdown-toggle text-muted drop-arrow-none card-drop p-0" data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-lg"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end">
                                                            <a href="#" class="dropdown-item">View Details</a>
                                                            <a href="#" class="dropdown-item">Cancel Order</a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>

                                        </tbody>
                                    </table>

                                </div> <!-- end table-responsive-->
                            </div> <!-- end card-body-->

                            <div class="card-footer border-0">
                                <div class="align-items-center justify-content-between row text-center text-sm-start">
                                    <div class="col-sm">
                                        <div data-table-pagination-info="orders"></div>
                                    </div>
                                    <div class="col-sm-auto mt-3 mt-sm-0">
                                        <div data-table-pagination></div>
                                    </div> <!-- end col-->
                                </div> <!-- end row-->
                            </div> <!-- end card-footer-->
                        </div> <!-- end card-->
                    </div> <!-- end col-->
                </div> <!-- end row-->

            </div>
            <!-- container -->

            <!-- Footer Start -->
            <footer class="footer">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12 text-center">
                            © <script>document.write(new Date().getFullYear())</script> UBold By <span class="fw-semibold">Coderthemes</span> 
                        </div>
                    </div>
                </div>
            </footer>
            <!-- end Footer -->

        </div>

        <!-- ============================================================== -->
        <!-- End of Main Content -->
        <!-- ============================================================== -->

    </div>
    <!-- END wrapper -->

    <!-- Theme Settings -->
    <div class="offcanvas offcanvas-end overflow-hidden" tabindex="-1" id="theme-settings-offcanvas">
        <div class="d-flex justify-content-between text-bg-primary gap-2 p-3" style="background-image: url(assets/images/user-bg-pattern.png);">
            <div>
                <h5 class="mb-1 fw-bold text-white text-uppercase">Admin Customizer</h5>
                <p class="text-white text-opacity-75 fst-italic fw-medium mb-0">Easily configure layout, styles, and preferences for your admin interface.</p>
            </div>

            <div class="flex-grow-0">
                <button type="button" class="d-block btn btn-sm bg-white bg-opacity-25 text-white rounded-circle btn-icon" data-bs-dismiss="offcanvas"><i class="ti ti-x fs-lg"></i></button>
            </div>
        </div>

        <div class="offcanvas-body p-0 h-100" data-simplebar>
            <div class="p-3 border-bottom border-dashed">
                <h5 class="mb-3 fw-bold">Select Theme</h5>
                <div class="row g-3">
                    <div class="col-6">
                        <div class="form-check card-radio shadow">
                            <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-default" value="default">
                            <label class="form-check-label p-0 w-100" for="demo-skin-default">
                                <img src="assets/images/layouts/themes/theme-default.png" alt="layout-img" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="text-center text-muted mt-2 mb-0">Default</h5>
                    </div>

                    <div class="col-6">
                        <div class="form-check card-radio shadow">
                            <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-material" value="material">
                            <label class="form-check-label p-0 w-100" for="demo-skin-material">
                                <img src="assets/images/layouts/themes/theme-material.png" alt="layout-img" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="text-center text-muted mt-2 mb-0">Material</h5>
                    </div>

                    <div class="col-6">
                        <div class="form-check card-radio shadow">
                            <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-modern" value="modern">
                            <label class="form-check-label p-0 w-100" for="demo-skin-modern">
                                <img src="assets/images/layouts/themes/theme-modern.png" alt="layout-img" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="text-center text-muted mt-2 mb-0">Modern</h5>
                    </div>

                    <div class="col-6">
                        <div class="form-check card-radio shadow">
                            <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-saas" value="saas">
                            <label class="form-check-label p-0 w-100" for="demo-skin-saas">
                                <img src="assets/images/layouts/themes/theme-saas.png" alt="layout-img" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="text-center text-muted mt-2 mb-0">SaaS</h5>
                    </div>

                    <div class="col-6">
                        <div class="form-check card-radio shadow">
                            <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-flat" value="flat">
                            <label class="form-check-label p-0 w-100" for="demo-skin-flat">
                                <img src="assets/images/layouts/themes/theme-flat.png" alt="layout-img" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="text-center text-muted mt-2 mb-0">Flat</h5>
                    </div>

                    <div class="col-6">
                        <div class="form-check card-radio shadow">
                            <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-minimal" value="minimal">
                            <label class="form-check-label p-0 w-100" for="demo-skin-minimal">
                                <img src="assets/images/layouts/themes/theme-minimal.png" alt="layout-img" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="text-center text-muted mt-2 mb-0">Minimal</h5>
                    </div>
                </div>
            </div>

            <div class="p-3 border-bottom border-dashed">
                <h5 class="mb-3 fw-bold">Color Scheme</h5>
                <div class="row">
                    <div class="col-4">
                        <div class="form-check card-radio">
                            <input class="form-check-input" type="radio" name="data-bs-theme" id="layout-color-light" value="light">
                            <label class="form-check-label p-0 w-100" for="layout-color-light">
                                <img src="assets/images/layouts/light.svg" alt="layout-img" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="text-center text-muted mt-2 mb-0">Light</h5>
                    </div>

                    <div class="col-4">
                        <div class="form-check card-radio">
                            <input class="form-check-input" type="radio" name="data-bs-theme" id="layout-color-dark" value="dark">
                            <label class="form-check-label p-0 w-100" for="layout-color-dark">
                                <img src="assets/images/layouts/dark.svg" alt="layout-img" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="text-center text-muted mt-2 mb-0">Dark</h5>
                    </div>

                    <div class="col-4">
                        <div class="form-check card-radio">
                            <input class="form-check-input" type="radio" name="data-bs-theme" id="layout-color-system" value="system">
                            <label class="form-check-label p-0 w-100" for="layout-color-system">
                                <img src="assets/images/layouts/system.svg" alt="layout-img" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="text-center text-muted mt-2 mb-0">System</h5>
                    </div>
                </div>
            </div>

            <div class="p-3 border-bottom border-dashed">
                <h5 class="mb-3 fw-bold">Topbar Color</h5>

                <div class="row g-3">
                    <div class="col-4">
                        <div class="form-check card-radio">
                            <input class="form-check-input" type="radio" name="data-topbar-color" id="topbar-color-light" value="light">
                            <label class="form-check-label p-0 w-100" for="topbar-color-light">
                                <img src="assets/images/layouts/topbar-light.svg" alt="layout-img" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="text-center text-muted mt-2 mb-0">Light</h5>
                    </div>

                    <div class="col-4">
                        <div class="form-check card-radio">
                            <input class="form-check-input" type="radio" name="data-topbar-color" id="topbar-color-dark" value="dark">
                            <label class="form-check-label p-0 w-100" for="topbar-color-dark">
                                <img src="assets/images/layouts/topbar-dark.svg" alt="layout-img" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="fs-sm text-center text-muted mt-2 mb-0">Dark</h5>
                    </div>

                    <div class="col-4">
                        <div class="form-check card-radio">
                            <input class="form-check-input" type="radio" name="data-topbar-color" id="topbar-color-gray" value="gray">
                            <label class="form-check-label p-0 w-100" for="topbar-color-gray">
                                <img src="assets/images/layouts/topbar-gray.svg" alt="layout-img" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="fs-sm text-center text-muted mt-2 mb-0">Gray</h5>
                    </div>

                    <div class="col-4">
                        <div class="form-check card-radio">
                            <input class="form-check-input" type="radio" name="data-topbar-color" id="topbar-color-gradient" value="gradient">
                            <label class="form-check-label p-0 w-100" for="topbar-color-gradient">
                                <img src="assets/images/layouts/topbar-gradient.svg" alt="layout-img" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="fs-sm text-center text-muted mt-2 mb-0">Gradient</h5>
                    </div>
                </div>
            </div>

            <div class="p-3 border-bottom border-dashed">
                <h5 class="mb-3 fw-bold">Sidenav Color</h5>

                <div class="row g-3">
                    <div class="col-4">
                        <div class="form-check sidebar-setting card-radio">
                            <input class="form-check-input" type="radio" name="data-menu-color" id="sidenav-color-light" value="light">
                            <label class="form-check-label p-0 w-100" for="sidenav-color-light">
                                <img src="assets/images/layouts/light.svg" alt="layout-img" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="fs-sm text-center text-muted mt-2 mb-0">Light</h5>
                    </div>

                    <div class="col-4">
                        <div class="form-check sidebar-setting card-radio">
                            <input class="form-check-input" type="radio" name="data-menu-color" id="sidenav-color-dark" value="dark">
                            <label class="form-check-label p-0 w-100" for="sidenav-color-dark">
                                <img src="assets/images/layouts/side-dark.svg" alt="layout-img" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="fs-sm text-center text-muted mt-2 mb-0">Dark</h5>
                    </div>

                    <div class="col-4">
                        <div class="form-check sidebar-setting card-radio">
                            <input class="form-check-input" type="radio" name="data-menu-color" id="sidenav-color-gray" value="gray">
                            <label class="form-check-label p-0 w-100" for="sidenav-color-gray">
                                <img src="assets/images/layouts/side-gray.svg" alt="layout-img" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="fs-sm text-center text-muted mt-2 mb-0">Gray</h5>
                    </div>

                    <div class="col-4">
                        <div class="form-check sidebar-setting card-radio">
                            <input class="form-check-input" type="radio" name="data-menu-color" id="sidenav-color-gradient" value="gradient">
                            <label class="form-check-label p-0 w-100" for="sidenav-color-gradient">
                                <img src="assets/images/layouts/side-gradient.svg" alt="layout-img" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="fs-sm text-center text-muted mt-2 mb-0">Gradient</h5>
                    </div>
                    <div class="col-4">
                        <div class="form-check sidebar-setting card-radio">
                            <input class="form-check-input" type="radio" name="data-menu-color" id="sidenav-color-image" value="image">
                            <label class="form-check-label p-0 w-100" for="sidenav-color-image">
                                <img src="assets/images/layouts/side-image.svg" alt="layout-img" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="fs-sm text-center text-muted mt-2 mb-0">Image</h5>
                    </div>
                </div>
            </div>

            <div class="p-3 border-bottom border-dashed">
                <h5 class="mb-3 fw-bold">Sidebar Size</h5>

                <div class="row g-3">
                    <div class="col-4">
                        <div class="form-check sidebar-setting card-radio">
                            <input class="form-check-input" type="radio" name="data-sidenav-size" id="sidenav-size-default" value="default">
                            <label class="form-check-label p-0 w-100" for="sidenav-size-default">
                                <img src="assets/images/layouts/light.svg" alt="layout-img" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="mb-0 text-center text-muted mt-2">Default</h5>
                    </div>

                    <div class="col-4">
                        <div class="form-check sidebar-setting card-radio">
                            <input class="form-check-input" type="radio" name="data-sidenav-size" id="sidenav-size-compact" value="compact">
                            <label class="form-check-label p-0 w-100" for="sidenav-size-compact">
                                <img src="assets/images/layouts/sidebar-compact.svg" alt="layout-img" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="mb-0 text-center text-muted mt-2">Compact</h5>
                    </div>

                    <div class="col-4">
                        <div class="form-check sidebar-setting card-radio">
                            <input class="form-check-input" type="radio" name="data-sidenav-size" id="sidenav-size-small" value="condensed">
                            <label class="form-check-label p-0 w-100" for="sidenav-size-small">
                                <img src="assets/images/layouts/sidebar-sm.svg" alt="layout-img" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="mb-0 text-center text-muted mt-2">Condensed</h5>
                    </div>

                    <div class="col-4">
                        <div class="form-check sidebar-setting card-radio">
                            <input class="form-check-input" type="radio" name="data-sidenav-size" id="sidenav-size-small-hover" value="on-hover">
                            <label class="form-check-label p-0 w-100" for="sidenav-size-small-hover">
                                <img src="assets/images/layouts/sidebar-sm.svg" alt="layout-img" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="mb-0 text-center text-muted mt-2">On Hover</h5>
                    </div>

                    <div class="col-4">
                        <div class="form-check sidebar-setting card-radio">
                            <input class="form-check-input" type="radio" name="data-sidenav-size" id="sidenav-size-small-hover-active" value="on-hover-active">
                            <label class="form-check-label p-0 w-100" for="sidenav-size-small-hover-active">
                                <img src="assets/images/layouts/light.svg" alt="layout-img" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="mb-0 fs-base text-center text-muted mt-2">On Hover - Show</h5>
                    </div>

                    <div class="col-4">
                        <div class="form-check sidebar-setting card-radio">
                            <input class="form-check-input" type="radio" name="data-sidenav-size" id="sidenav-size-offcanvas" value="offcanvas">
                            <label class="form-check-label p-0 w-100" for="sidenav-size-offcanvas">
                                <img src="assets/images/layouts/sidebar-full.svg" alt="layout-img" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="mb-0 text-center text-muted mt-2">Offcanvas</h5>
                    </div>
                </div>
            </div>

            <div class="p-3 border-bottom border-dashed">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="fw-bold mb-0">Layout Position</h5>

                    <div class="btn-group radio" role="group">
                        <input type="radio" class="btn-check" name="data-layout-position" id="layout-position-fixed" value="fixed">
                        <label class="btn btn-sm btn-soft-warning w-sm" for="layout-position-fixed">Fixed</label>

                        <input type="radio" class="btn-check" name="data-layout-position" id="layout-position-scrollable" value="scrollable">
                        <label class="btn btn-sm btn-soft-warning w-sm ms-0" for="layout-position-scrollable">Scrollable</label>
                    </div>
                </div>
            </div>

            <div class="p-3">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><label class="fw-bold m-0" for="sidebaruser-check">Sidebar User Info</label></h5>
                
                    <div class="form-check form-switch fs-lg">
                        <input type="checkbox" class="form-check-input" name="sidebar-user" id="sidebaruser-check">
                    </div>
                </div>
            </div>
        </div>

        <div class="offcanvas-footer border-top p-3 text-center">
            <div class="row">
                <div class="col-6">
                    <button type="button" class="btn btn-light fw-semibold py-2 w-100" id="reset-layout">Reset</button>
                </div>
                <div class="col-6">
                    <a href="#!" target="_blank" class="btn btn-danger bg-gradient py-2 fw-semibold w-100">Buy Now</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Vendor js -->
    <script src="assets/js/vendors.min.js"></script>

    <!-- App js -->
    <script src="assets/js/app.js"></script>

    <!-- E Charts js -->
    <script src="assets/plugins/chartjs/chart.umd.js"></script>

    <!-- Custom table -->
    <script src="assets/js/pages/custom-table.js"></script>

    <!-- Dashboard Page js -->
    <script src="assets/js/pages/dashboard.js"></script>

</body>

</html>