<!doctype html>
<html lang="en">
  <!-- [Head] start -->

  <head>
    <title>Analytics Dashboard | Admindek Dashboard Template</title>
<!-- [Meta] -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui" />
<meta
  name="description"
  content="Admindek - Modern responsive dashboard template built with Bootstrap 5. Features dark/light themes, RTL support, and extensive UI components for admin panels and web applications."
/>
<meta
  name="keywords"
  content="Admindek - Bootstrap 5 admin template, responsive dashboard, dark mode, RTL support, admin panel, UI components, web application template, modern dashboard"
/>
<meta name="author" content="DashboardPack.com" />
<meta name="theme-color" content="#1e293b" />
<meta name="color-scheme" content="light dark" />

<!-- [Open Graph] -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Analytics Dashboard | Admindek Dashboard Template" />
<meta property="og:description" content="Modern responsive dashboard template built with Bootstrap 5. Features dark/light themes, RTL support, and extensive UI components." />
<meta property="og:site_name" content="Admindek" />

<!-- [Twitter/X Card] -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Analytics Dashboard | Admindek Dashboard Template" />
<meta name="twitter:description" content="Modern responsive dashboard template built with Bootstrap 5. Features dark/light themes, RTL support, and extensive UI components." />

<!-- [Favicon] icons -->
<link rel="icon" href="assets\images\favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="assets\images\apple-touch-icon.png" />
<link rel="manifest" href="assets\images\site.webmanifest" />
    <!-- map-vector css -->
    <link rel="stylesheet" href="assets\css\plugins\jsvectormap.min.css" />
    <!-- [Font] Family -->
<link href="..\..\..\..\_external\fonts.googleapis.com\css2__29c414502da1.css" rel="stylesheet" />
<!-- [phosphor Icons] https://phosphoricons.com/ -->
<link rel="stylesheet" href="assets\css\plugins\phosphor-icons.css" />
<!-- [Tabler Icons] https://tablericons.com -->
<link rel="stylesheet" href="assets\css\plugins\tabler-icons.min.css" />
<!-- [Template CSS Files] -->
<link rel="stylesheet" href="assets\css\style.css" id="main-style-link" />
<link rel="stylesheet" href="assets\css\style-preset.css" />
<!-- [Vite Development Scripts] -->
<!-- Development script removed for production -->
  </head>
  <!-- [Head] end -->
  <!-- [Body] Start -->

  <body data-pc-preset="preset-1" data-pc-sidebar-caption="true" data-pc-direction="ltr" data-pc-theme="light">
    <!-- [ Pre-loader ] start -->
<div class="loader-bg">
  <div class="loader-track">
    <div class="loader-fill"></div>
  </div>
</div>
<!-- [ Pre-loader ] End -->
 <!-- [ Sidebar Menu ] start -->
<nav class="pc-sidebar">
  <div class="navbar-wrapper">
    <div class="m-header">
      <a href="dashboard\index.html" class="b-brand text-primary">
        <!-- ========   Change your logo from here   ============ -->
        <img src="assets\images\logo-white.svg" class="img-fluid logo-lg" alt="logo" />
      </a>
    </div>
    <div class="navbar-content">
      <ul class="pc-navbar">
        <li class="pc-item pc-caption">
  <label data-i18n="Navigation">Navigation</label>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-house-line"></i>
    </span>
    <span class="pc-mtext" data-i18n="Dashboard">Dashboard</span>
    <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
    <span class="pc-badge">7</span>
  </a>
  <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="dashboard\index.html" data-i18n="Default">Default</a></li>
    <li class="pc-item"><a class="pc-link" href="dashboard\ecommerce.html" data-i18n="Ecommerce">Ecommerce</a></li>
    <li class="pc-item"><a class="pc-link" href="dashboard\crm.html" data-i18n="CRM">CRM</a></li>
    <li class="pc-item"><a class="pc-link" href="dashboard\analytics.html" data-i18n="Analytics">Analytics</a></li>
    <li class="pc-item"><a class="pc-link" href="dashboard\crypto.html" data-i18n="Crypto">Crypto</a></li>
    <li class="pc-item"><a class="pc-link" href="dashboard\finance.html" data-i18n="Finance">Finance</a></li>
    <li class="pc-item"><a class="pc-link" href="dashboard\project.html" data-i18n="Project">Project</a></li>
  </ul>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-layout"></i>
    </span>
    <span class="pc-mtext" data-i18n="Layouts">Layouts</span>
    <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
  </a>
  <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="demo\layout-vertical.html" data-i18n="Vertical">Vertical</a></li>
    <li class="pc-item"><a class="pc-link" href="demo\layout-horizontal.html" data-i18n="Horizontal">Horizontal</a></li>
    <li class="pc-item"><a class="pc-link" href="demo\layout-tab.html" data-i18n="Tab">Tab</a></li>
    <li class="pc-item"><a class="pc-link" href="demo\layout-2.html" data-i18n="Layouts 2">Layouts 2</a></li>
    <li class="pc-item"><a class="pc-link" href="demo\layout-3.html" data-i18n="Layouts 3">Layouts 3</a></li>
  </ul>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-flower-lotus"></i>
    </span>
    <span class="pc-mtext" data-i18n="Widget">Widget</span>
    <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
  </a>
  <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="widget\w_statistics.html" data-i18n="Statistics">Statistic</a></li>
    <li class="pc-item"><a class="pc-link" href="widget\w_data.html" data-i18n="Data">Data</a></li>
    <li class="pc-item"><a class="pc-link" href="widget\w_table.html" data-i18n="Tables">Table</a></li>
    <li class="pc-item"><a class="pc-link" href="widget\w_user.html" data-i18n="User">User</a></li>
    <li class="pc-item"><a class="pc-link" href="widget\w_chart.html" data-i18n="Chart">Chart</a></li>
  </ul>
</li>
<li class="pc-item pc-caption">
  <label data-i18n="Admin Panel">Admin Panel</label>
  <i class="ph ph-book-open-text"></i>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-book-open-text"></i>
    </span>
    <span class="pc-mtext" data-i18n="Online Courses">Online Courses</span>
    <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
  </a>
  <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="admins\course-dashboard.html" data-i18n="Dashboard">Dashboard</a></li>
    <li class="pc-item pc-hasmenu">
      <a class="pc-link" href="#!">
        <span data-i18n="Teacher">Teacher</span>
        <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span
      ></a>
      <ul class="pc-submenu">
        <li class="pc-item"><a class="pc-link" href="admins\course-teacher-list.html" data-i18n="List">List</a></li>
        <li class="pc-item"><a class="pc-link" href="admins\course-teacher-apply.html" data-i18n="Apply">Apply</a></li>
        <li class="pc-item"><a class="pc-link" href="admins\course-teacher-add.html" data-i18n="Add">Add</a></li>
      </ul>
    </li>
    <li class="pc-item pc-hasmenu">
      <a class="pc-link" href="#!">
        <span data-i18n="Student">Student</span>
        <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
      </a>
      <ul class="pc-submenu">
        <li class="pc-item"><a class="pc-link" href="admins\course-student-list.html" data-i18n="List">list</a></li>
        <li class="pc-item"><a class="pc-link" href="admins\course-student-apply.html" data-i18n="Apply">Apply</a></li>
        <li class="pc-item"><a class="pc-link" href="admins\course-student-add.html" data-i18n="Add">Add</a></li>
      </ul>
    </li>
    <li class="pc-item pc-hasmenu">
      <a class="pc-link" href="#!">
        <span data-i18n="Courses">Courses</span>
        <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span
      ></a>
      <ul class="pc-submenu">
        <li class="pc-item"><a class="pc-link" href="admins\course-course-view.html" data-i18n="View">View</a></li>
        <li class="pc-item"><a class="pc-link" href="admins\course-course-add.html" data-i18n="Add">Add</a></li>
      </ul>
    </li>
    <li class="pc-item"><a class="pc-link" href="admins\course-pricing.html" data-i18n="Pricing">Pricing</a></li>
    <li class="pc-item"><a class="pc-link" href="admins\course-site.html" data-i18n="Site">Site</a></li>
    <li class="pc-item pc-hasmenu">
      <a class="pc-link" href="#!">
        <span data-i18n="Setting">Setting</span>
        <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
      </a>
      <ul class="pc-submenu">
        <li class="pc-item"><a class="pc-link" href="admins\course-setting-payment.html" data-i18n="Payment">Payment</a></li>
        <li class="pc-item"><a class="pc-link" href="admins\course-setting-pricing.html" data-i18n="Pricing">Pricing</a></li>
        <li class="pc-item"
          ><a class="pc-link" href="admins\course-setting-notifications.html" data-i18n="Notification">Notifications</a></li
        >
      </ul>
    </li>
  </ul>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-users-four"></i>
    </span>
    <span class="pc-mtext" data-i18n="Membership">Membership</span>
    <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
    <span class="pc-badge" style="background: #ffc107; color: #212529; width: auto; min-width: 20px; padding: 2px 6px; border-radius: 10px; font-size: 9px; font-weight: 600;">Pro</span>
  </a>
  <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="admins\membership-dashboard.html" data-i18n="Dashboard">Dashboard</a></li>
    <li class="pc-item"><a class="pc-link" href="admins\membership-list.html" data-i18n="List">List</a></li>
    <li class="pc-item"><a class="pc-link" href="admins\membership-pricing.html" data-i18n="Pricing">Pricing</a></li>
    <li class="pc-item"><a class="pc-link" href="admins\membership-setting.html" data-i18n="Setting">Setting</a></li>
  </ul>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon"><i class="ph ph-lifebuoy"></i></span>
    <span class="pc-mtext" data-i18n="Helpdesk">Helpdesk</span>
    <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
  </a>
  <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="admins\helpdesk-dashboard.html" data-i18n="Dashboard">Dashboard</a></li>
    <li class="pc-item pc-hasmenu">
      <a class="pc-link" href="#!">
        <span data-i18n="Ticket">Ticket</span>
        <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
      </a>
      <ul class="pc-submenu">
        <li class="pc-item"><a class="pc-link" href="admins\helpdesk-create-ticket.html" data-i18n="Create">Create</a></li>
        <li class="pc-item"><a class="pc-link" href="admins\helpdesk-ticket.html" data-i18n="List">List</a></li>
        <li class="pc-item"><a class="pc-link" href="admins\helpdesk-ticket-details.html" data-i18n="Details">Details</a></li>
      </ul>
    </li>
    <li class="pc-item"><a class="pc-link" href="admins\helpdesk-customer.html" data-i18n="Customer">Customer</a></li>
  </ul>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon"><i class="ph ph-printer"></i></span><span class="pc-mtext" data-i18n="Invoice">invoice</span>
    <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
  </a>
  <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="admins\invoice-dashboard.html" data-i18n="Dashboard">Dashboard</a></li>
    <li class="pc-item"><a class="pc-link" href="admins\invoice-create.html" data-i18n="Create">Create</a></li>
    <li class="pc-item"><a class="pc-link" href="admins\invoice-view.html" data-i18n="Details">Details</a></li>
    <li class="pc-item"><a class="pc-link" href="admins\invoice-list.html" data-i18n="List">List</a></li>
    <li class="pc-item"><a class="pc-link" href="admins\invoice-edit.html" data-i18n="Edit">Edit</a></li>
  </ul>
</li>
<li class="pc-item pc-caption">
  <label data-i18n="UI Components">UI Components</label>
  <i class="ph ph-pencil-ruler"></i>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon"><i class="ph ph-pencil-ruler"></i></span><span class="pc-mtext" data-i18n="Basic">Basic</span>
    <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
  </a>
  <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="elements\bc_alert.html" data-i18n="Alert">Alert</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\bc_button.html" data-i18n="Button">Button</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\bc_badges.html" data-i18n="Badges">Badges</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\bc_breadcrumb.html" data-i18n="Breadcrumb">Breadcrumb</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\bc_card.html" data-i18n="Cards">Cards</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\bc_color.html" data-i18n="Color">Color</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\bc_collapse.html" data-i18n="Collapse">Collapse</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\bc_carousel.html" data-i18n="Carousel">Carousel</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\bc_dropdowns.html" data-i18n="Dropdowns">Dropdowns</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\bc_offcanvas.html" data-i18n="Offcanvas">Offcanvas</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\bc_pagination.html" data-i18n="Pagination">Pagination</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\bc_progress.html" data-i18n="Progress">Progress</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\bc_list-group.html" data-i18n="List Group">List group</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\bc_modal.html" data-i18n="Modal">Modal</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\bc_spinner.html" data-i18n="Spinner">Spinner</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\bc_tabs.html" data-i18n="Tabs & pills">Tabs & pills</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\bc_typography.html" data-i18n="Typography">Typography</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\bc_tooltip-popover.html" data-i18n="Tooltip">Tooltip</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\bc_toasts.html" data-i18n="Toasts">Toasts</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\bc_extra.html" data-i18n="Other">Other</a></li>
  </ul>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link"
    ><span class="pc-micon"><i class="ph ph-briefcase"></i></span><span class="pc-mtext" data-i18n="Advanced">Advance</span>
    <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
    <span class="pc-badge" style="background: #198754; width: auto; min-width: 20px; padding: 2px 6px; border-radius: 10px; font-size: 9px; font-weight: 600;">New</span>
  </a>
  <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="elements\ac_alert.html" data-i18n="Sweet Alert">Sweet alert</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\ac_datepicker-component.html" data-i18n="Date Picker">Datepicker</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\ac_lightbox.html" data-i18n="Lightbox">Lightbox</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\ac_modal.html" data-i18n="Modal">Modal</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\ac_notification.html" data-i18n="Notification">Notification</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\ac_rangeslider.html" data-i18n="RangeSlider">Range slider</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\ac_slider.html" data-i18n="Slider">Slider</a></li>
    <li class="pc-item"
      ><a class="pc-link" href="elements\ac_syntax_highlighter.html" data-i18n="Syntax Highlighter">Syntax Highlighter</a></li
    >
    <li class="pc-item"><a class="pc-link" href="elements\ac_tour.html" data-i18n="Tour">Tour</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\ac_treeview.html" data-i18n="Tree view">Tree view</a></li>
  </ul>
</li>
<li class="pc-item">
  <a href="elements\animation.html" class="pc-link">
    <span class="pc-micon"> <i class="ph ph-vinyl-record"></i> </span><span class="pc-mtext" data-i18n="Animation">Animation</span>
  </a>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon"> <i class="ph ph-feather"></i> </span><span class="pc-mtext" data-i18n="Icons">Icons</span>
    <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
  </a>
  <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="elements\icon-tabler.html" data-i18n="Tabler">Tabler</a></li>
    <li class="pc-item"><a class="pc-link" href="elements\icon-phosphor.html" data-i18n="Phospher">Phosphor</a></li>
  </ul>
</li>
<li class="pc-item pc-caption">
  <label data-i18n="Forms">Forms</label>
  <i class="ph ph-textbox"></i>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-textbox"></i>
    </span>
    <span class="pc-mtext" data-i18n="Form Elements">Forms Elements</span><span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
  </a>
  <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="forms\form_elements.html" data-i18n="Form Basic">Form Basic</a></li>
    <li class="pc-item"><a class="pc-link" href="forms\form_floating.html" data-i18n="Form Floating">Form Floating</a></li>
    <li class="pc-item"><a class="pc-link" href="forms\form2_basic.html" data-i18n="Form Options">Form Options</a></li>
    <li class="pc-item"><a class="pc-link" href="forms\form2_input_group.html" data-i18n="Input Group">Input Groups</a></li>
    <li class="pc-item"><a class="pc-link" href="forms\form2_checkbox.html" data-i18n="Checkbox">Checkbox</a></li>
    <li class="pc-item"><a class="pc-link" href="forms\form2_radio.html" data-i18n="Radio">Radio</a></li>
    <li class="pc-item"><a class="pc-link" href="forms\form2_switch.html" data-i18n="Switch">Switch</a></li>
    <li class="pc-item"><a class="pc-link" href="forms\form2_megaoption.html" data-i18n="Mega Option">Mega option</a></li>
  </ul>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-plug-charging"></i>
    </span>
    <span class="pc-mtext" data-i18n="Form Plugins">Forms Plugins</span><span class="pc-arrow"><i class="ti ti-chevron-right"></i></span
  ></a>
  <ul class="pc-submenu">
    <li class="pc-item pc-hasmenu">
      <a class="pc-link" href="#">
        <span data-i18n="Date">Date</span>
        <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span
      ></a>
      <ul class="pc-submenu">
        <li class="pc-item"><a class="pc-link" href="forms\form2_datepicker.html" data-i18n="Date Picker">Datepicker</a></li>
        <li class="pc-item"
          ><a class="pc-link" href="forms\form2_daterangepicker.html" data-i18n="Date Range Picker">Date Range Picker</a>
        </li>
        <li class="pc-item"><a class="pc-link" href="forms\form2_timepicker.html" data-i18n="Timepicker">Timepicker</a></li>
      </ul>
    </li>
    <li class="pc-item pc-hasmenu">
      <a class="pc-link" href="#">
        <span data-i18n="Select">Select</span>
        <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
      </a>
      <ul class="pc-submenu">
        <li class="pc-item"><a class="pc-link" href="forms\form2_choices.html" data-i18n="Choices js">Choices js</a></li>
      </ul>
    </li>
    <li class="pc-item"><a class="pc-link" href="forms\form2_rating.html" data-i18n="Rating">Rating</a></li>
    <li class="pc-item"><a class="pc-link" href="forms\form2_recaptcha.html" data-i18n="Google-Re-Captcha">Google reCaptcha</a></li>
    <li class="pc-item"><a class="pc-link" href="forms\form2_inputmask.html" data-i18n="Input Mask">Input Masks</a></li>
    <li class="pc-item"><a class="pc-link" href="forms\form2_clipboard.html" data-i18n="ClipBoard">Clipboard</a></li>
    <li class="pc-item"><a class="pc-link" href="forms\form2_nouislider.html" data-i18n="Nouislider">Nouislider</a></li>
    <li class="pc-item"><a class="pc-link" href="forms\form2_switchjs.html" data-i18n="Bootstrap Switch">Bootstrap Switch</a></li>
    <li class="pc-item"><a class="pc-link" href="forms\form2_typeahead.html" data-i18n="TypeaHead">Typeahead</a></li>
  </ul>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-pen-nib"></i>
    </span>
    <span class="pc-mtext" data-i18n="Text Editor">Text Editors</span><span class="pc-arrow"><i class="ti ti-chevron-right"></i></span
  ></a>
  <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="forms\form2_tinymce.html" data-i18n="Tinymce">Tinymce</a></li>
    <li class="pc-item"><a class="pc-link" href="forms\form2_quill.html" data-i18n="Quill">Quill</a></li>
    <li class="pc-item pc-hasmenu">
      <a class="pc-link" href="#">
        <span data-i18n="CK editor">CK editor</span>
        <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
      </a>
      <ul class="pc-submenu">
        <li class="pc-item"><a class="pc-link" href="forms\editor-classic.html" data-i18n="classic">classic</a></li>
        <li class="pc-item"><a class="pc-link" href="forms\editor-document.html" data-i18n="Document">Document</a></li>
        <li class="pc-item"><a class="pc-link" href="forms\editor-inline.html" data-i18n="Inline">Inline</a></li>
        <li class="pc-item"><a class="pc-link" href="forms\editor-balloon.html" data-i18n="Balloon">Balloon</a></li>
      </ul>
    </li>
    <li class="pc-item"><a class="pc-link" href="forms\form2_markdown.html" data-i18n="Markdown">Markdown</a></li>
  </ul>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-windows-logo"></i>
    </span>
    <span class="pc-mtext" data-i18n="Form Layouts">Form Layouts</span><span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
  </a>
  <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="forms\form2_lay-default.html" data-i18n="Layouts">Layouts</a></li>
    <li class="pc-item"><a class="pc-link" href="forms\form2_lay-multicolumn.html" data-i18n="MultiColumn">Multicolumn</a></li>
    <li class="pc-item"><a class="pc-link" href="forms\form2_lay-actionbars.html" data-i18n="ActionBars">Actionbars</a></li>
    <li class="pc-item"
      ><a class="pc-link" href="forms\form2_lay-stickyactionbars.html" data-i18n="Sticky-ActionBar">Sticky Action bars</a>
    </li>
  </ul>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-cloud-arrow-up"></i>
    </span>
    <span class="pc-mtext" data-i18n="File Upload">File upload</span><span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
  </a>
  <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="forms\file-upload.html" data-i18n="Dropzone">Dropzone</a></li>
    <li class="pc-item"><a class="pc-link" href="forms\form2_flu-uppy.html" data-i18n="Uppy">Uppy</a></li>
  </ul>
</li>
<li class="pc-item">
  <a href="forms\form2_wizard.html" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-tabs"></i>
    </span>
    <span class="pc-mtext" data-i18n="wizard">wizard</span></a
  >
</li>
<li class="pc-item">
  <a href="forms\form-validation.html" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-password"></i>
    </span>
    <span class="pc-mtext" data-i18n="Form Validation">Form Validation</span></a
  >
</li>
<li class="pc-item">
  <a href="forms\image_crop.html" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-crop"></i>
    </span>
    <span class="pc-mtext" data-i18n="Images Cropper">Image cropper</span>
  </a>
</li>
<li class="pc-item pc-caption">
  <label data-i18n="Tables">table</label>
  <i class="ph ph-table"></i>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-table"></i>
    </span>
    <span class="pc-mtext" data-i18n="Bootstrap Table">Bootstrap Table</span
    ><span class="pc-arrow"><i class="ti ti-chevron-right"></i></span
  ></a>
  <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="table\tbl_bootstrap.html" data-i18n="Basic Table">Basic table</a></li>
    <li class="pc-item"><a class="pc-link" href="table\tbl_sizing.html" data-i18n="Sizing table">Sizing table</a></li>
    <li class="pc-item"><a class="pc-link" href="table\tbl_border.html" data-i18n="Border table">Border table</a></li>
    <li class="pc-item"><a class="pc-link" href="table\tbl_styling.html" data-i18n="Styling table">Styling table</a></li>
  </ul>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-grid-nine"></i>
    </span>
    <span class="pc-mtext" data-i18n="Vanilla table">Vanilla Table</span><span class="pc-arrow"><i class="ti ti-chevron-right"></i></span
  ></a>
  <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="table\tbl_dt-simple.html" data-i18n="Basic initialization">Basic initialization</a></li>
    <li class="pc-item"><a class="pc-link" href="table\tbl_dt-dynamic-import.html" data-i18n="Dynamic Import">Dynamic Import</a></li>
    <li class="pc-item"
      ><a class="pc-link" href="table\tbl_dt-render-column-cells.html" data-i18n="Render Column Cells">Render Column Cells</a></li
    >
    <li class="pc-item"
      ><a class="pc-link" href="table\tbl_dt-column-manipulation.html" data-i18n="Column Manipulation">Column Manipulation</a></li
    >
    <li class="pc-item"
      ><a class="pc-link" href="table\tbl_dt-datetime-sorting.html" data-i18n="Datetime Sorting">Datetime Sorting</a></li
    >
    <li class="pc-item"><a class="pc-link" href="table\tbl_dt-methods.html" data-i18n="Methods">Methods</a></li>
    <li class="pc-item"><a class="pc-link" href="table\tbl_dt-add-rows.html" data-i18n="Add Rows">Add Rows</a></li>
    <li class="pc-item"><a class="pc-link" href="table\tbl_dt-fetch-api.html" data-i18n="Fetch API">Fetch API</a></li>
    <li class="pc-item"><a class="pc-link" href="table\tbl_dt-filters.html" data-i18n="Filters">Filters</a></li>
    <li class="pc-item"><a class="pc-link" href="table\tbl_dt-export.html" data-i18n="Export">Export</a></li>
  </ul>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-columns"></i>
    </span>
    <span class="pc-mtext" data-i18n="Data Table">Data table</span><span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
  </a>
  <ul class="pc-submenu">
    <li class="pc-item"
      ><a class="pc-link" href="table\dt_advance.html" data-i18n="Advance initialization">Advance initialization</a></li
    >
    <li class="pc-item"><a class="pc-link" href="table\dt_styling.html" data-i18n="Styling">Styling</a></li>
    <li class="pc-item"><a class="pc-link" href="table\dt_api.html" data-i18n="API">API</a></li>
    <li class="pc-item"><a class="pc-link" href="table\dt_plugin.html" data-i18n="Plug-in">Plug-in</a></li>
    <li class="pc-item"><a class="pc-link" href="table\dt_sources.html" data-i18n="Data sources">Data sources</a></li>
  </ul>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-wall"></i>
    </span>
    <span class="pc-mtext" data-i18n="DT extensions">DT extensions</span><span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
  </a>
  <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="table\dt_ext_autofill.html" data-i18n="Autofill">Autofill</a></li>
    <li class="pc-item pc-hasmenu">
      <a href="#!" class="pc-link">
        <span data-i18n="Button">Button</span>
        <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span
      ></a>
      <ul class="pc-submenu">
        <li class="pc-item"><a class="pc-link" href="table\dt_ext_basic_buttons.html" data-i18n="Basic button">Basic button</a></li>
        <li class="pc-item"><a class="pc-link" href="table\dt_ext_export_buttons.html" data-i18n="Data export">Data export</a></li>
      </ul>
    </li>
    <li class="pc-item"><a class="pc-link" href="table\dt_ext_col_reorder.html" data-i18n="Col reorder">Col reorder</a></li>
    <li class="pc-item"><a class="pc-link" href="table\dt_ext_fixed_columns.html" data-i18n="Fixed columns">Fixed columns</a></li>
    <li class="pc-item"><a class="pc-link" href="table\dt_ext_fixed_header.html" data-i18n="Fixed header">Fixed header</a></li>
    <li class="pc-item"><a class="pc-link" href="table\dt_ext_key_table.html" data-i18n="Key table">Key table</a></li>
    <li class="pc-item"><a class="pc-link" href="table\dt_ext_responsive.html" data-i18n="Responsive">Responsive</a></li>
    <li class="pc-item"><a class="pc-link" href="table\dt_ext_row_reorder.html" data-i18n="Row reorder">Row reorder</a></li>
    <li class="pc-item"><a class="pc-link" href="table\dt_ext_scroller.html" data-i18n="Scroller">Scroller</a></li>
    <li class="pc-item"><a class="pc-link" href="table\dt_ext_select.html" data-i18n="Select table">Select table</a></li>
  </ul>
</li>
<li class="pc-item pc-caption">
  <label data-i18n="Chart & Maps">Charts &and; Maps</label>
  <i class="ph ph-chart-donut"></i>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-chart-donut"></i>
    </span>
    <span class="pc-mtext" data-i18n="Charts">Charts</span><span class="pc-arrow"><i class="ti ti-chevron-right"></i></span
  ></a>
  <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="chart\chart-apex.html" data-i18n="Apex Chart">Apex Chart</a></li>
    <li class="pc-item"><a class="pc-link" href="chart\chart-peity.html" data-i18n="Peity Chart">Peity Chart</a></li>
  </ul>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-map-trifold"></i>
    </span>
    <span class="pc-mtext" data-i18n="Map">Maps</span><span class="pc-arrow"><i class="ti ti-chevron-right"></i></span
  ></a>
  <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="chart\map-vector.html" data-i18n="Vector Map">Vector Maps</a></li>
    <li class="pc-item"><a class="pc-link" href="chart\map-gmap.html" data-i18n="Google Map">Gmaps</a></li>
  </ul>
</li>
<li class="pc-item pc-caption">
  <label data-i18n="Application">Application</label>
  <i class="ph ph-calendar-blank"></i>
  <span style="background: #dc3545; color: white; padding: 2px 6px; border-radius: 8px; font-size: 8px; font-weight: 600; margin-left: 6px; display: inline-block;">Hot</span>
</li>
<li class="pc-item">
  <a href="application\calendar.html" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-calendar-blank"></i>
    </span>
    <span class="pc-mtext" data-i18n="Calender">Calendar</span></a
  >
</li>
<li class="pc-item">
  <a href="application\chat.html" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-chats-circle"></i>
    </span>
    <span class="pc-mtext" data-i18n="Chat">Message</span></a
  >
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-list-bullets"></i>
    </span>
    <span class="pc-mtext" data-i18n="Task">Task</span><span class="pc-arrow"><i class="ti ti-chevron-right"></i></span
  ></a>
  <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="application\task-list.html" data-i18n="List">List</a></li>
    <li class="pc-item"><a class="pc-link" href="application\task-board.html" data-i18n="Board">Board</a></li>
    <li class="pc-item"><a class="pc-link" href="application\task-detail.html" data-i18n="Detail">Detail</a></li>
  </ul>
</li>
<li class="pc-item">
  <a href="application\todo.html" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-list-checks"></i>
    </span>
    <span class="pc-mtext" data-i18n="To Do">To Do</span>
  </a>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-images"></i>
    </span>
    <span class="pc-mtext" data-i18n="Gallery">Gallery</span><span class="pc-arrow"><i class="ti ti-chevron-right"></i></span
  ></a>
  <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="application\gallery-grid.html" data-i18n="Grid">Grid</a></li>
    <li class="pc-item"><a class="pc-link" href="application\gallery-masonry.html" data-i18n="Masonry">Masonry</a></li>
    <li class="pc-item"><a class="pc-link" href="application\gallery-advance.html" data-i18n="Advance">Advance</a></li>
  </ul>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-printer"></i>
    </span>
    <span class="pc-mtext" data-i18n="Invoice">Invoice</span><span class="pc-arrow"><i class="ti ti-chevron-right"></i></span
  ></a>
  <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="application\invoice.html" data-i18n="Invoice">Invoice</a></li>
    <li class="pc-item"><a class="pc-link" href="application\invoice-summary.html" data-i18n="Invoice summary">Invoice summary</a></li>
    <li class="pc-item"><a class="pc-link" href="application\invoice-list.html" data-i18n="Invoice list">Invoice list</a></li>
  </ul>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-user-circle"></i>
    </span>
    <span class="pc-mtext" data-i18n="Users">Users</span><span class="pc-arrow"><i class="ti ti-chevron-right"></i></span
  ></a>
  <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="application\user-profile.html" data-i18n="Profile">Profile</a></li>
    <li class="pc-item"><a class="pc-link" href="application\user-profile-social.html" data-i18n="Social Profile">Social Profile</a></li>
    <li class="pc-item"><a class="pc-link" href="application\user-card.html" data-i18n="User Card">User Card</a></li>
    <li class="pc-item"><a class="pc-link" href="application\user-list.html" data-i18n="User List">User List</a></li>
  </ul>
</li>
<li class="pc-item pc-caption">
  <label data-i18n="pages">Pages</label>
  <i class="ph ph-shield-checkered"></i>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-lock-key"></i>
    </span>
    <span class="pc-mtext" data-i18n="Authentication">Authentication</span><span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
  </a>
  <ul class="pc-submenu">
    <li class="pc-item pc-hasmenu">
      <a href="#!" class="pc-link">
        <span data-i18n="Login">Login</span>
        <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
      </a>
      <ul class="pc-submenu">
        <li class="pc-item"><a class="pc-link" target="_blank" href="pages\login-v1.html" data-i18n="Login v1">Login v1</a></li>
        <li class="pc-item"><a class="pc-link" target="_blank" href="pages\login-v2.html" data-i18n="Login v2">Login v2</a></li>
        <li class="pc-item"><a class="pc-link" target="_blank" href="pages\login-v3.html" data-i18n="Login v3">Login v3</a></li>
        <li class="pc-item"><a class="pc-link" target="_blank" href="pages\login-v4.html" data-i18n="Login v4">Login v4</a></li>
        <li class="pc-item"><a class="pc-link" target="_blank" href="pages\login-v5.html" data-i18n="Login v5">Login v5</a></li>
      </ul>
    </li>
    <li class="pc-item pc-hasmenu">
      <a href="#!" class="pc-link">
        <span data-i18n="Register">Register</span>
        <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
      </a>
      <ul class="pc-submenu">
        <li class="pc-item"><a class="pc-link" target="_blank" href="pages\register-v1.html" data-i18n="Register v1">Register v1</a></li>
        <li class="pc-item"><a class="pc-link" target="_blank" href="pages\register-v2.html" data-i18n="Register v2">Register v2</a></li>
        <li class="pc-item"><a class="pc-link" target="_blank" href="pages\register-v3.html" data-i18n="Register v3">Register v3</a></li>
        <li class="pc-item"><a class="pc-link" target="_blank" href="pages\register-v4.html" data-i18n="Register v4">Register v4</a></li>
        <li class="pc-item"><a class="pc-link" target="_blank" href="pages\register-v5.html" data-i18n="Register v5">Register v5</a></li>
      </ul>
    </li>
    <li class="pc-item pc-hasmenu">
      <a href="#!" class="pc-link">
        <span data-i18n="Reset Password">Reset password</span>
        <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
      </a>
      <ul class="pc-submenu">
        <li class="pc-item"
          ><a class="pc-link" target="_blank" href="pages\reset-password-v1.html" data-i18n="Reset Password v1">Reset password v1</a></li
        >
        <li class="pc-item"
          ><a class="pc-link" target="_blank" href="pages\reset-password-v2.html" data-i18n="Reset Password v2">Reset password v2</a></li
        >
        <li class="pc-item"
          ><a class="pc-link" target="_blank" href="pages\reset-password-v3.html" data-i18n="Reset Password v3">Reset password v3</a></li
        >
        <li class="pc-item"
          ><a class="pc-link" target="_blank" href="pages\reset-password-v4.html" data-i18n="Reset Password v4">Reset password v4</a></li
        >
        <li class="pc-item"
          ><a class="pc-link" target="_blank" href="pages\reset-password-v5.html" data-i18n="Reset Password v5">Reset password v5</a></li
        >
      </ul>
    </li>
    <li class="pc-item pc-hasmenu">
      <a href="#!" class="pc-link">
        <span data-i18n="Change password">Change password</span>
        <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span
      ></a>
      <ul class="pc-submenu">
        <li class="pc-item"
          ><a class="pc-link" target="_blank" href="pages\change-password-v1.html" data-i18n="Change password v1"
            >Change password v1</a
          ></li
        >
        <li class="pc-item"
          ><a class="pc-link" target="_blank" href="pages\change-password-v2.html" data-i18n="Change password v2"
            >Change password v2</a
          ></li
        >
        <li class="pc-item"
          ><a class="pc-link" target="_blank" href="pages\change-password-v3.html" data-i18n="Change password v3"
            >Change password v3</a
          ></li
        >
        <li class="pc-item"
          ><a class="pc-link" target="_blank" href="pages\change-password-v4.html" data-i18n="Change password v4"
            >Change password v4</a
          ></li
        >
        <li class="pc-item"
          ><a class="pc-link" target="_blank" href="pages\change-password-v5.html" data-i18n="Change password v5"
            >Change password v5</a
          ></li
        >
      </ul>
    </li>
  </ul>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-wrench"></i>
    </span>
    <span class="pc-mtext" data-i18n="Maintenance">Maintenance</span><span class="pc-arrow"><i class="ti ti-chevron-right"></i></span
  ></a>
  <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" target="_blank" href="pages\error.html" data-i18n="Error">Error</a></li>
    <li class="pc-item"><a class="pc-link" target="_blank" href="pages\coming-soon.html" data-i18n="Coming-Soon">Coming Soon</a></li>
    <li class="pc-item"><a class="pc-link" target="_blank" href="pages\offline-ui.html" data-i18n="Offline Ui">Offline Ui</a></li>
  </ul>
</li>
<li class="pc-item">
  <a href="index.html" class="pc-link" target="_blank">
    <span class="pc-micon"> <i class="ph ph-target"></i> </span><span class="pc-mtext" data-i18n="Landing">Landing</span>
  </a>
</li>
<li class="pc-item pc-caption">
  <label data-i18n="Other">Other</label>
  <i class="ph ph-tree-structure"></i>
</li>
<li class="pc-item pc-hasmenu">
  <a href="#!" class="pc-link"
    ><span class="pc-micon"> <i class="ph ph-tree-structure"></i> </span><span class="pc-mtext" data-i18n="Menu levels">Menu levels</span
    ><span class="pc-arrow"><i class="ti ti-chevron-right"></i></span
  ></a>
  <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="#!" data-i18n="Level 2.1">Level 2.1</a></li>
    <li class="pc-item pc-hasmenu">
      <a href="#!" class="pc-link">
        <span data-i18n="Level 2.2">Level 2.2</span>
        <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span
      ></a>
      <ul class="pc-submenu">
        <li class="pc-item"><a class="pc-link" href="#!" data-i18n="Level 3.1">Level 3.1</a></li>
        <li class="pc-item"><a class="pc-link" href="#!" data-i18n="Level 3.2">Level 3.2</a></li>
        <li class="pc-item pc-hasmenu">
          <a href="#!" class="pc-link">
            <span data-i18n="Level 3.3">Level 3.3</span>
            <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
          </a>
          <ul class="pc-submenu">
            <li class="pc-item"><a class="pc-link" href="#!" data-i18n="Level 4.1">Level 4.1</a></li>
            <li class="pc-item"><a class="pc-link" href="#!" data-i18n="Level 4.2">Level 4.2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="pc-item pc-hasmenu">
      <a href="#!" class="pc-link">
        <span data-i18n="Level 2.3">Level 2.3</span>
        <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span
      ></a>
      <ul class="pc-submenu">
        <li class="pc-item"><a class="pc-link" href="#!" data-i18n="Level 3.1">Level 3.1</a></li>
        <li class="pc-item"><a class="pc-link" href="#!" data-i18n="Level 3.2">Level 3.2</a></li>
        <li class="pc-item pc-hasmenu">
          <a href="#!" class="pc-link">
            <span data-i18n="Level 3.3">Level 3.3</span>
            <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
          </a>
          <ul class="pc-submenu">
            <li class="pc-item"><a class="pc-link" href="#!" data-i18n="Level 4.1">Level 4.1</a></li>
            <li class="pc-item"><a class="pc-link" href="#!" data-i18n="Level 4.2">Level 4.2</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</li>
<li class="pc-item"
  ><a href="other\sample-page.html" class="pc-link">
    <span class="pc-micon">
      <i class="ph ph-desktop"></i>
    </span>
    <span class="pc-mtext" data-i18n="Sample Page">Sample page</span></a
  ></li
>

      </ul>
    </div>
  </div>
</nav>
<!-- [ Sidebar Menu ] end -->
 <!-- [ Header Topbar ] start -->
<header class="pc-header">
  <div class="header-wrapper"> <!-- [Mobile Media Block] start -->
<div class="me-auto pc-mob-drp">
  <ul class="list-unstyled">
    <li class="pc-h-item pc-sidebar-collapse">
      <a href="#" class="pc-head-link ms-0" id="sidebar-hide">
        <i class="ph ph-list"></i>
      </a>
    </li>
    <li class="pc-h-item pc-sidebar-popup">
      <a href="#" class="pc-head-link ms-0" id="mobile-collapse">
        <i class="ph ph-list"></i>
      </a>
    </li>
    <li class="dropdown pc-h-item">
      <a
        class="pc-head-link dropdown-toggle arrow-none m-0 trig-drp-search"
        data-bs-toggle="dropdown"
        href="#"
        role="button"
        aria-haspopup="false"
        aria-expanded="false"
      >
        <i class="ph ph-magnifying-glass"></i>
      </a>
      <div class="dropdown-menu pc-h-dropdown drp-search">
        <form class="px-3 py-2">
          <input type="search" class="form-control border-0 shadow-none" placeholder="Search here. . ." />
        </form>
      </div>
    </li>
  </ul>
</div>
<!-- [Mobile Media Block end] -->
<div class="ms-auto">
  <ul class="list-unstyled">
    <li class="dropdown pc-h-item">
      <a
        class="pc-head-link dropdown-toggle arrow-none me-0"
        data-bs-toggle="dropdown"
        href="#"
        role="button"
        aria-haspopup="false"
        aria-expanded="false"
      >
        <i class="ph ph-sun-dim"></i>
      </a>
      <div class="dropdown-menu dropdown-menu-end pc-h-dropdown">
        <a href="#!" class="dropdown-item" onclick="layout_change('dark')">
          <i class="ph ph-moon"></i>
          <span>Dark</span>
        </a>
        <a href="#!" class="dropdown-item" onclick="layout_change('light')">
          <i class="ph ph-sun"></i>
          <span>Light</span>
        </a>
        <a href="#!" class="dropdown-item" onclick="layout_change_default()">
          <i class="ph ph-cpu"></i>
          <span>Default</span>
        </a>
      </div>
    </li>
    <li class="dropdown pc-h-item d-none d-md-inline-flex">
      <a
        class="pc-head-link head-link-primary dropdown-toggle arrow-none me-0"
        data-bs-toggle="dropdown"
        href="#"
        role="button"
        aria-haspopup="false"
        aria-expanded="false"
      >
        <i class="ph ph-translate"></i>
      </a>
      <div class="dropdown-menu dropdown-menu-end pc-h-dropdown lng-dropdown">
        <a href="#!" class="dropdown-item" data-lng="en">
          <span>
            English
            <small>(UK)</small>
          </span>
        </a>
        <a href="#!" class="dropdown-item" data-lng="fr">
          <span>
            français
            <small>(French)</small>
          </span>
        </a>
        <a href="#!" class="dropdown-item" data-lng="ro">
          <span>
            Română
            <small>(Romanian)</small>
          </span>
        </a>
        <a href="#!" class="dropdown-item" data-lng="cn">
          <span>
            中国人
            <small>(Chinese)</small>
          </span>
        </a>
      </div>
    </li>
    <li class="dropdown pc-h-item">
      <a
        class="pc-head-link dropdown-toggle arrow-none me-0"
        data-bs-toggle="dropdown"
        href="#"
        role="button"
        aria-haspopup="false"
        aria-expanded="false"
      >
        <i class="ph ph-diamonds-four"></i>
      </a>
      <div class="dropdown-menu dropdown-menu-end pc-h-dropdown">
        <a href="#!" class="dropdown-item">
          <i class="ph ph-user"></i>
          <span>My Account</span>
        </a>
        <a href="#!" class="dropdown-item">
          <i class="ph ph-gear"></i>
          <span>Settings</span>
        </a>
        <a href="#!" class="dropdown-item">
          <i class="ph ph-lifebuoy"></i>
          <span>Support</span>
        </a>
        <a href="#!" class="dropdown-item">
          <i class="ph ph-lock-key"></i>
          <span>Lock Screen</span>
        </a>
        <a href="#!" class="dropdown-item">
          <i class="ph ph-power"></i>
          <span>Logout</span>
        </a>
      </div>
    </li>
    <li class="dropdown pc-h-item">
      <a
        class="pc-head-link dropdown-toggle arrow-none me-0"
        data-bs-toggle="dropdown"
        href="#"
        role="button"
        aria-haspopup="false"
        aria-expanded="false"
      >
        <i class="ph ph-bell"></i>
        <span class="badge bg-success pc-h-badge">5</span>
      </a>
      <div class="dropdown-menu dropdown-notification dropdown-menu-end pc-h-dropdown">
        <div class="dropdown-header d-flex align-items-center justify-content-between">
          <h5 class="m-0">Notifications</h5>
          <a href="#!" class="btn btn-link btn-sm">Mark all read</a>
        </div>
        <div class="dropdown-body text-wrap header-notification-scroll position-relative" style="max-height: calc(100vh - 215px)">
          <p class="text-span">Today</p>
          <div class="card bg-transparent mb-2 border-0">
            <div class="card-body p-3 rounded" style="background: rgba(var(--bs-light-rgb), 0.3); transition: all 0.2s ease;" onmouseover="this.style.background='rgba(var(--bs-primary-rgb), 0.05)'" onmouseout="this.style.background='rgba(var(--bs-light-rgb), 0.3)'">
              <div class="d-flex">
                <div class="flex-shrink-0">
                  <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                    <i class="ph ph-credit-card text-success" style="font-size: 16px;"></i>
                  </div>
                </div>
                <div class="flex-grow-1 ms-3">
                  <span class="float-end text-sm text-muted">2 min ago</span>
                  <h5 class="text-body mb-2">Payment Received</h5>
                  <p class="mb-0">$2,499.00 payment received for Pro Plan subscription from Acme Corp</p>
                </div>
              </div>
            </div>
          </div>
          <div class="card bg-transparent mb-2 border-0">
            <div class="card-body p-3 rounded" style="background: rgba(var(--bs-light-rgb), 0.3); transition: all 0.2s ease;" onmouseover="this.style.background='rgba(var(--bs-primary-rgb), 0.05)'" onmouseout="this.style.background='rgba(var(--bs-light-rgb), 0.3)'">
              <div class="d-flex">
                <div class="flex-shrink-0">
                  <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                    <i class="ph ph-users text-primary" style="font-size: 16px;"></i>
                  </div>
                </div>
                <div class="flex-grow-1 ms-3">
                  <span class="float-end text-sm text-muted">1 hour ago</span>
                  <h5 class="text-body mb-2">New Team Member</h5>
                  <p class="mb-0">Sarah Johnson joined your workspace and was assigned to the Marketing team</p>
                </div>
              </div>
            </div>
          </div>
          <div class="card bg-transparent mb-2 border-0">
            <div class="card-body p-3 rounded" style="background: rgba(var(--bs-light-rgb), 0.3); transition: all 0.2s ease;" onmouseover="this.style.background='rgba(var(--bs-primary-rgb), 0.05)'" onmouseout="this.style.background='rgba(var(--bs-light-rgb), 0.3)'">
              <div class="d-flex">
                <div class="flex-shrink-0">
                  <div class="bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                    <i class="ph ph-chart-line text-warning" style="font-size: 16px;"></i>
                  </div>
                </div>
                <div class="flex-grow-1 ms-3">
                  <span class="float-end text-sm text-muted">3 hours ago</span>
                  <h5 class="text-body mb-2">Monthly Report Ready</h5>
                  <p class="mb-0">Your January 2025 analytics report is ready. Revenue up 24% vs last month</p>
                </div>
              </div>
            </div>
          </div>
          <p class="text-span">Yesterday</p>
          <div class="card bg-transparent mb-2 border-0">
            <div class="card-body p-3 rounded" style="background: rgba(var(--bs-light-rgb), 0.3); transition: all 0.2s ease;" onmouseover="this.style.background='rgba(var(--bs-primary-rgb), 0.05)'" onmouseout="this.style.background='rgba(var(--bs-light-rgb), 0.3)'">
              <div class="d-flex">
                <div class="flex-shrink-0">
                  <div class="bg-danger bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                    <i class="ph ph-shield-check text-danger" style="font-size: 16px;"></i>
                  </div>
                </div>
                <div class="flex-grow-1 ms-3">
                  <span class="float-end text-sm text-muted">18 hours ago</span>
                  <h5 class="text-body mb-2">Security Alert</h5>
                  <p class="mb-2">New login detected from San Francisco, CA. If this wasn't you, please secure your account</p>
                  <button class="btn btn-sm btn-outline-secondary me-2">Ignore</button>
                  <button class="btn btn-sm btn-danger">Secure Account</button>
                </div>
              </div>
            </div>
          </div>
          <div class="card bg-transparent mb-2 border-0">
            <div class="card-body p-3 rounded" style="background: rgba(var(--bs-light-rgb), 0.3); transition: all 0.2s ease;" onmouseover="this.style.background='rgba(var(--bs-primary-rgb), 0.05)'" onmouseout="this.style.background='rgba(var(--bs-light-rgb), 0.3)'">
              <div class="d-flex">
                <div class="flex-shrink-0">
                  <div class="bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                    <i class="ph ph-rocket text-info" style="font-size: 16px;"></i>
                  </div>
                </div>
                <div class="flex-grow-1 ms-3">
                  <span class="float-end text-sm text-muted">1 day ago</span>
                  <h5 class="text-body mb-2">Feature Update</h5>
                  <p class="mb-0">New AI-powered insights are now available in your dashboard. Check out the enhanced analytics</p>
                </div>
              </div>
            </div>
          </div>
          <div class="card bg-transparent mb-2 border-0">
            <div class="card-body p-3 rounded" style="background: rgba(var(--bs-light-rgb), 0.3); transition: all 0.2s ease;" onmouseover="this.style.background='rgba(var(--bs-primary-rgb), 0.05)'" onmouseout="this.style.background='rgba(var(--bs-light-rgb), 0.3)'">
              <div class="d-flex">
                <div class="flex-shrink-0">
                  <img class="img-radius avatar rounded-0" src="..\assets\images\user\avatar-5.svg" alt="Generic placeholder image" />
                </div>
                <div class="flex-grow-1 ms-3">
                  <span class="float-end text-sm text-muted">5 hour ago</span>
                  <h5 class="text-body mb-2">Security</h5>
                  <p class="mb-0"
                    >Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
                    type and scrambled it to make a type</p
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="text-center py-2">
          <a href="#!" class="link-danger">Clear all Notifications</a>
        </div>
      </div>
    </li>
    <li class="dropdown pc-h-item header-user-profile">
      <a
        class="pc-head-link dropdown-toggle arrow-none me-0"
        data-bs-toggle="dropdown"
        href="#"
        role="button"
        aria-haspopup="false"
        data-bs-auto-close="outside"
        aria-expanded="false"
      >
        <i class="ph ph-user-circle"></i>
      </a>
      <div class="dropdown-menu dropdown-menu-end pc-h-dropdown">
        <div class="dropdown-header">
          <h6 class="mb-0">John Doe</h6>
          <small class="text-muted">john.doe@acmecorp.com</small>
          <span class="badge bg-success-subtle text-success mt-1">Pro Plan</span>
        </div>
        <a href="#!" class="dropdown-item">
          <i class="ph ph-user-circle"></i>
          <span>Profile & Settings</span>
        </a>
        <a href="#!" class="dropdown-item">
          <i class="ph ph-buildings"></i>
          <span>Workspace Settings</span>
        </a>
        <a href="#!" class="dropdown-item">
          <i class="ph ph-credit-card"></i>
          <span>Billing & Usage</span>
        </a>
        <a href="#!" class="dropdown-item">
          <i class="ph ph-users-three"></i>
          <span>Team Management</span>
        </a>
        <div class="dropdown-divider"></div>
        <a href="#!" class="dropdown-item">
          <i class="ph ph-headset"></i>
          <span>Support Center</span>
        </a>
        <a href="#!" class="dropdown-item">
          <i class="ph ph-keyboard"></i>
          <span>Keyboard Shortcuts</span>
        </a>
        <a href="#!" class="dropdown-item">
          <i class="ph ph-download"></i>
          <span>Download Mobile App</span>
        </a>
        <div class="dropdown-divider"></div>
        <a href="#!" class="dropdown-item text-danger">
          <i class="ph ph-sign-out"></i>
          <span>Sign Out</span>
        </a>
      </div>
    </li>
  </ul>
</div>
 </div>
</header>
<!-- [ Header ] end -->



    <!-- [ Main Content ] start -->
    <div class="pc-container">
      <div class="pc-content">
        <!-- [ breadcrumb ] start -->
<div class="page-header">
  <div class="page-block">
    <div class="row align-items-center">
      <div class="col-md-12">
        <div class="page-header-title">
          <h5 class="mb-0">Dashboard-active</h5>
        </div>
      </div>
      <div class="col-md-12">
        <ul class="breadcrumb mb-0">
          <li class="breadcrumb-item"><a href="..\..\..\dashboard\index.html">Home</a></li>
          <li class="breadcrumb-item"><a href="javascript: void(0)">Dashboard</a></li>
          <li class="breadcrumb-item" aria-current="page">Dashboard-active</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!-- [ breadcrumb ] end -->

        <!-- [ Main Content ] start -->
        <div class="row">
          <!-- [ Enhanced KPI Cards ] start -->
          <div class="col-md-6 col-xl-3">
            <div class="card bg-primary">
              <div class="card-body">
                <div class="d-flex align-items-center">
                  <div class="flex-grow-1">
                    <h6 class="mb-2 text-white">Total Revenue</h6>
                    <h3 class="text-white mb-0 f-w-300">$847,290</h3>
                    <p class="text-white-50 mb-0">
                      <i class="ph ph-arrow-up me-1"></i>
                      +12.5% from last month
                    </p>
                  </div>
                  <div class="flex-shrink-0">
                    <div id="total-revenue-chart" style="height: 50px; width: 80px;"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-xl-3">
            <div class="card bg-success">
              <div class="card-body">
                <div class="d-flex align-items-center">
                  <div class="flex-grow-1">
                    <h6 class="mb-2 text-white">Active Users</h6>
                    <h3 class="text-white mb-0 f-w-300">24,689</h3>
                    <p class="text-white-50 mb-0">
                      <i class="ph ph-arrow-up me-1"></i>
                      +8.2% from last week
                    </p>
                  </div>
                  <div class="flex-shrink-0">
                    <div id="active-users-chart" style="height: 50px; width: 80px;"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-xl-3">
            <div class="card bg-warning">
              <div class="card-body">
                <div class="d-flex align-items-center">
                  <div class="flex-grow-1">
                    <h6 class="mb-2 text-white">Orders</h6>
                    <h3 class="text-white mb-0 f-w-300">1,847</h3>
                    <p class="text-white-50 mb-0">
                      <i class="ph ph-arrow-down me-1"></i>
                      -2.1% from yesterday
                    </p>
                  </div>
                  <div class="flex-shrink-0">
                    <div id="orders-chart" style="height: 50px; width: 80px;"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-xl-3">
            <div class="card bg-info">
              <div class="card-body">
                <div class="d-flex align-items-center">
                  <div class="flex-grow-1">
                    <h6 class="mb-2 text-white">Conversion Rate</h6>
                    <h3 class="text-white mb-0 f-w-300">3.47%</h3>
                    <p class="text-white-50 mb-0">
                      <i class="ph ph-arrow-up me-1"></i>
                      +0.3% from last month
                    </p>
                  </div>
                  <div class="flex-shrink-0">
                    <div id="conversion-chart" style="height: 50px; width: 80px;"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- [ Enhanced KPI Cards ] end -->

          <!-- [ Real-time Analytics ] start -->
          <div class="col-xl-8">
            <div class="card">
              <div class="card-header d-flex align-items-center justify-content-between">
                <h5>Real-time Analytics</h5>
                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-outline-primary btn-sm">7D</button>
                  <button type="button" class="btn btn-primary btn-sm">30D</button>
                  <button type="button" class="btn btn-outline-primary btn-sm">90D</button>
                </div>
              </div>
              <div class="card-body">
                <div class="row mb-3">
                  <div class="col-6">
                    <div class="d-flex align-items-center">
                      <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                        <i class="ph ph-users text-white f-18"></i>
                      </div>
                      <div>
                        <h6 class="mb-0">Sessions</h6>
                        <h4 class="mb-0 f-w-300">47,829</h4>
                      </div>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="d-flex align-items-center">
                      <div class="bg-success rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                        <i class="ph ph-chart-line-up text-white f-18"></i>
                      </div>
                      <div>
                        <h6 class="mb-0">Page Views</h6>
                        <h4 class="mb-0 f-w-300">186,247</h4>
                      </div>
                    </div>
                  </div>
                </div>
                <div id="real-time-chart" style="height: 350px;"></div>
              </div>
            </div>
          </div>
          <!-- [ Real-time Analytics ] end -->

          <!-- [ Device Analytics ] start -->
          <div class="col-xl-4">
            <div class="card">
              <div class="card-header">
                <h5>Device Analytics</h5>
              </div>
              <div class="card-body">
                <div id="device-chart" style="height: 200px;"></div>
                <div class="row mt-3">
                  <div class="col-12 pt-3 pb-3 border-top">
                    <div class="d-flex align-items-center justify-content-between">
                      <span class="d-flex align-items-center">
                        <i class="ph ph-desktop text-primary me-2 f-18"></i>
                        Desktop
                      </span>
                      <span class="fw-bold">45.8%</span>
                    </div>
                    <div class="progress mt-2" style="height: 4px;">
                      <div class="progress-bar bg-primary" style="width: 45.8%"></div>
                    </div>
                  </div>
                  <div class="col-12 pt-3 pb-3 border-top">
                    <div class="d-flex align-items-center justify-content-between">
                      <span class="d-flex align-items-center">
                        <i class="ph ph-device-mobile text-success me-2 f-18"></i>
                        Mobile
                      </span>
                      <span class="fw-bold">38.7%</span>
                    </div>
                    <div class="progress mt-2" style="height: 4px;">
                      <div class="progress-bar bg-success" style="width: 38.7%"></div>
                    </div>
                  </div>
                  <div class="col-12 pt-3 border-top">
                    <div class="d-flex align-items-center justify-content-between">
                      <span class="d-flex align-items-center">
                        <i class="ph ph-device-tablet text-warning me-2 f-18"></i>
                        Tablet
                      </span>
                      <span class="fw-bold">15.5%</span>
                    </div>
                    <div class="progress mt-2" style="height: 4px;">
                      <div class="progress-bar bg-warning" style="width: 15.5%"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- [ Device Analytics ] end -->

          <!-- [ Interactive World Map ] start -->
          <div class="col-xl-8">
            <div class="card">
              <div class="card-header d-flex align-items-center justify-content-between">
                <h5>Global User Distribution</h5>
                <div class="dropdown">
                  <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                    Last 30 Days
                  </button>
                  <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Last 7 Days</a></li>
                    <li><a class="dropdown-item" href="#">Last 30 Days</a></li>
                    <li><a class="dropdown-item" href="#">Last 90 Days</a></li>
                  </ul>
                </div>
              </div>
              <div class="card-body">
                <div class="row mb-3">
                  <div class="col-3 text-center">
                    <h4 class="mb-0 text-primary">24.5K</h4>
                    <span class="text-muted">USA</span>
                  </div>
                  <div class="col-3 text-center">
                    <h4 class="mb-0 text-success">18.2K</h4>
                    <span class="text-muted">Europe</span>
                  </div>
                  <div class="col-3 text-center">
                    <h4 class="mb-0 text-warning">12.8K</h4>
                    <span class="text-muted">Asia</span>
                  </div>
                  <div class="col-3 text-center">
                    <h4 class="mb-0 text-info">8.1K</h4>
                    <span class="text-muted">Others</span>
                  </div>
                </div>
                <div id="world-low" style="height: 350px"></div>
              </div>
            </div>
          </div>
          <!-- [ Interactive World Map ] end -->

          <!-- [ Sentiment Analysis & Quick Stats ] start -->
          <div class="col-xl-4">
            <div class="card mb-3">
              <div class="card-header">
                <h5>Customer Sentiment</h5>
              </div>
              <div class="card-body">
                <div class="row text-center">
                  <div class="col-6">
                    <h6 class="text-danger mb-3">NEGATIVE</h6>
                    <div id="sadball" style="height: 80px;"></div>
                    <h4 class="mt-2 text-danger">24%</h4>
                    <span class="text-muted">287 Reviews</span>
                  </div>
                  <div class="col-6">
                    <h6 class="text-success mb-3">POSITIVE</h6>
                    <div id="happyball" style="height: 80px;"></div>
                    <h4 class="mt-2 text-success">76%</h4>
                    <span class="text-muted">892 Reviews</span>
                  </div>
                </div>
                <button class="btn btn-primary btn-sm w-100 mt-3">View All Reviews</button>
              </div>
            </div>
            
            <div class="card">
              <div class="card-body">
                <div class="d-flex align-items-center justify-content-between mb-3">
                  <h6 class="mb-0">Server Performance</h6>
                  <span class="badge bg-success">Optimal</span>
                </div>
                <div class="row">
                  <div class="col-6">
                    <div class="text-center">
                      <div id="cpu-usage" style="height: 60px; width: 60px; margin: 0 auto;"></div>
                      <h6 class="mt-2 mb-0">CPU Usage</h6>
                      <span class="text-muted">67%</span>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="text-center">
                      <div id="memory-usage" style="height: 60px; width: 60px; margin: 0 auto;"></div>
                      <h6 class="mt-2 mb-0">Memory</h6>
                      <span class="text-muted">82%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- [ Sentiment Analysis & Quick Stats ] end -->

          <!-- [ Advanced Data Table ] start -->
          <div class="col-xl-8">
            <div class="card">
              <div class="card-header d-flex align-items-center justify-content-between">
                <h5>Recent Transactions</h5>
                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-outline-primary btn-sm">
                    <i class="ph ph-download-simple me-1"></i>Export
                  </button>
                  <button type="button" class="btn btn-primary btn-sm">
                    <i class="ph ph-plus me-1"></i>Add New
                  </button>
                </div>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table table-hover mb-0" id="advanced-table">
                    <thead>
                      <tr>
                        <th>
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="select-all">
                          </div>
                        </th>
                        <th>Customer</th>
                        <th>Product</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Date</th>
                        <th>Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox">
                          </div>
                        </td>
                        <td>
                          <div class="d-flex align-items-center">
                            <img class="rounded-circle me-3" style="width: 35px" src="assets\images\user\avatar-1.svg" alt="user">
                            <div>
                              <h6 class="mb-0">Sarah Johnson</h6>
                              <span class="text-muted f-12">sarah@example.com</span>
                            </div>
                          </div>
                        </td>
                        <td>
                          <div>
                            <h6 class="mb-0">Premium Plan</h6>
                            <span class="text-muted f-12">Monthly Subscription</span>
                          </div>
                        </td>
                        <td>
                          <h6 class="mb-0 text-success">$299.00</h6>
                        </td>
                        <td>
                          <span class="badge bg-success">Completed</span>
                        </td>
                        <td>
                          <span class="text-muted">Jan 07, 2025</span>
                        </td>
                        <td>
                          <div class="btn-group">
                            <button class="btn btn-sm btn-outline-secondary">
                              <i class="ph ph-eye"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-primary">
                              <i class="ph ph-pencil"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger">
                              <i class="ph ph-trash"></i>
                            </button>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox">
                          </div>
                        </td>
                        <td>
                          <div class="d-flex align-items-center">
                            <img class="rounded-circle me-3" style="width: 35px" src="assets\images\user\avatar-2.svg" alt="user">
                            <div>
                              <h6 class="mb-0">Michael Chen</h6>
                              <span class="text-muted f-12">michael@example.com</span>
                            </div>
                          </div>
                        </td>
                        <td>
                          <div>
                            <h6 class="mb-0">Enterprise Plan</h6>
                            <span class="text-muted f-12">Annual Subscription</span>
                          </div>
                        </td>
                        <td>
                          <h6 class="mb-0 text-success">$2,999.00</h6>
                        </td>
                        <td>
                          <span class="badge bg-warning">Pending</span>
                        </td>
                        <td>
                          <span class="text-muted">Jan 06, 2025</span>
                        </td>
                        <td>
                          <div class="btn-group">
                            <button class="btn btn-sm btn-outline-secondary">
                              <i class="ph ph-eye"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-primary">
                              <i class="ph ph-pencil"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger">
                              <i class="ph ph-trash"></i>
                            </button>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox">
                          </div>
                        </td>
                        <td>
                          <div class="d-flex align-items-center">
                            <img class="rounded-circle me-3" style="width: 35px" src="assets\images\user\avatar-3.svg" alt="user">
                            <div>
                              <h6 class="mb-0">Emma Wilson</h6>
                              <span class="text-muted f-12">emma@example.com</span>
                            </div>
                          </div>
                        </td>
                        <td>
                          <div>
                            <h6 class="mb-0">Basic Plan</h6>
                            <span class="text-muted f-12">Monthly Subscription</span>
                          </div>
                        </td>
                        <td>
                          <h6 class="mb-0 text-success">$99.00</h6>
                        </td>
                        <td>
                          <span class="badge bg-danger">Failed</span>
                        </td>
                        <td>
                          <span class="text-muted">Jan 05, 2025</span>
                        </td>
                        <td>
                          <div class="btn-group">
                            <button class="btn btn-sm btn-outline-secondary">
                              <i class="ph ph-eye"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-primary">
                              <i class="ph ph-pencil"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger">
                              <i class="ph ph-trash"></i>
                            </button>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox">
                          </div>
                        </td>
                        <td>
                          <div class="d-flex align-items-center">
                            <img class="rounded-circle me-3" style="width: 35px" src="assets\images\user\avatar-4.svg" alt="user">
                            <div>
                              <h6 class="mb-0">Alex Rodriguez</h6>
                              <span class="text-muted f-12">alex@example.com</span>
                            </div>
                          </div>
                        </td>
                        <td>
                          <div>
                            <h6 class="mb-0">Professional Plan</h6>
                            <span class="text-muted f-12">Annual Subscription</span>
                          </div>
                        </td>
                        <td>
                          <h6 class="mb-0 text-success">$1,799.00</h6>
                        </td>
                        <td>
                          <span class="badge bg-success">Completed</span>
                        </td>
                        <td>
                          <span class="text-muted">Jan 04, 2025</span>
                        </td>
                        <td>
                          <div class="btn-group">
                            <button class="btn btn-sm btn-outline-secondary">
                              <i class="ph ph-eye"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-primary">
                              <i class="ph ph-pencil"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger">
                              <i class="ph ph-trash"></i>
                            </button>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox">
                          </div>
                        </td>
                        <td>
                          <div class="d-flex align-items-center">
                            <img class="rounded-circle me-3" style="width: 35px" src="assets\images\user\avatar-5.svg" alt="user">
                            <div>
                              <h6 class="mb-0">Maria Garcia</h6>
                              <span class="text-muted f-12">maria@example.com</span>
                            </div>
                          </div>
                        </td>
                        <td>
                          <div>
                            <h6 class="mb-0">Premium Plan</h6>
                            <span class="text-muted f-12">Monthly Subscription</span>
                          </div>
                        </td>
                        <td>
                          <h6 class="mb-0 text-success">$299.00</h6>
                        </td>
                        <td>
                          <span class="badge bg-warning">Processing</span>
                        </td>
                        <td>
                          <span class="text-muted">Jan 03, 2025</span>
                        </td>
                        <td>
                          <div class="btn-group">
                            <button class="btn btn-sm btn-outline-secondary">
                              <i class="ph ph-eye"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-primary">
                              <i class="ph ph-pencil"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger">
                              <i class="ph ph-trash"></i>
                            </button>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox">
                          </div>
                        </td>
                        <td>
                          <div class="d-flex align-items-center">
                            <img class="rounded-circle me-3" style="width: 35px" src="assets\images\user\avatar-6.svg" alt="user">
                            <div>
                              <h6 class="mb-0">David Kim</h6>
                              <span class="text-muted f-12">david@example.com</span>
                            </div>
                          </div>
                        </td>
                        <td>
                          <div>
                            <h6 class="mb-0">Basic Plan</h6>
                            <span class="text-muted f-12">Monthly Subscription</span>
                          </div>
                        </td>
                        <td>
                          <h6 class="mb-0 text-success">$99.00</h6>
                        </td>
                        <td>
                          <span class="badge bg-success">Completed</span>
                        </td>
                        <td>
                          <span class="text-muted">Jan 02, 2025</span>
                        </td>
                        <td>
                          <div class="btn-group">
                            <button class="btn btn-sm btn-outline-secondary">
                              <i class="ph ph-eye"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-primary">
                              <i class="ph ph-pencil"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger">
                              <i class="ph ph-trash"></i>
                            </button>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox">
                          </div>
                        </td>
                        <td>
                          <div class="d-flex align-items-center">
                            <img class="rounded-circle me-3" style="width: 35px" src="assets\images\user\avatar-7.svg" alt="user">
                            <div>
                              <h6 class="mb-0">Lisa Thompson</h6>
                              <span class="text-muted f-12">lisa@example.com</span>
                            </div>
                          </div>
                        </td>
                        <td>
                          <div>
                            <h6 class="mb-0">Enterprise Plan</h6>
                            <span class="text-muted f-12">Annual Subscription</span>
                          </div>
                        </td>
                        <td>
                          <h6 class="mb-0 text-success">$2,999.00</h6>
                        </td>
                        <td>
                          <span class="badge bg-success">Completed</span>
                        </td>
                        <td>
                          <span class="text-muted">Jan 01, 2025</span>
                        </td>
                        <td>
                          <div class="btn-group">
                            <button class="btn btn-sm btn-outline-secondary">
                              <i class="ph ph-eye"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-primary">
                              <i class="ph ph-pencil"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger">
                              <i class="ph ph-trash"></i>
                            </button>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="d-flex align-items-center justify-content-between mt-3">
                  <span class="text-muted">Showing 1 to 3 of 247 entries</span>
                  <nav>
                    <ul class="pagination mb-0">
                      <li class="page-item disabled">
                        <span class="page-link">Previous</span>
                      </li>
                      <li class="page-item active">
                        <span class="page-link">1</span>
                      </li>
                      <li class="page-item">
                        <a class="page-link" href="#">2</a>
                      </li>
                      <li class="page-item">
                        <a class="page-link" href="#">3</a>
                      </li>
                      <li class="page-item">
                        <a class="page-link" href="#">Next</a>
                      </li>
                    </ul>
                  </nav>
                </div>
              </div>
            </div>
          </div>
          <!-- [ Advanced Data Table ] end -->
          
          <!-- [ Activity Feed ] start -->
          <div class="col-xl-4">
            <div class="card">
              <div class="card-header d-flex align-items-center justify-content-between">
                <h5>Live Activity Feed</h5>
                <div class="d-flex align-items-center">
                  <div class="bg-success rounded-circle me-2" style="width: 8px; height: 8px;"></div>
                  <span class="text-muted f-12">Live</span>
                </div>
              </div>
              <div class="card-body">
                <div class="timeline">
                  <div class="timeline-item">
                    <div class="timeline-marker bg-primary"></div>
                    <div class="timeline-content">
                      <h6 class="mb-1">New user registration</h6>
                      <p class="mb-1 text-muted f-12">John Doe signed up for Premium plan</p>
                      <span class="text-muted f-10">2 minutes ago</span>
                    </div>
                  </div>
                  <div class="timeline-item">
                    <div class="timeline-marker bg-success"></div>
                    <div class="timeline-content">
                      <h6 class="mb-1">Payment received</h6>
                      <p class="mb-1 text-muted f-12">$299.00 from Sarah Johnson</p>
                      <span class="text-muted f-10">5 minutes ago</span>
                    </div>
                  </div>
                  <div class="timeline-item">
                    <div class="timeline-marker bg-warning"></div>
                    <div class="timeline-content">
                      <h6 class="mb-1">System alert</h6>
                      <p class="mb-1 text-muted f-12">High memory usage detected</p>
                      <span class="text-muted f-10">12 minutes ago</span>
                    </div>
                  </div>
                  <div class="timeline-item">
                    <div class="timeline-marker bg-info"></div>
                    <div class="timeline-content">
                      <h6 class="mb-1">Feature update</h6>
                      <p class="mb-1 text-muted f-12">New dashboard widgets deployed</p>
                      <span class="text-muted f-10">1 hour ago</span>
                    </div>
                  </div>
                  <div class="timeline-item">
                    <div class="timeline-marker bg-danger"></div>
                    <div class="timeline-content">
                      <h6 class="mb-1">Failed payment</h6>
                      <p class="mb-1 text-muted f-12">Payment failed for Emma Wilson</p>
                      <span class="text-muted f-10">2 hours ago</span>
                    </div>
                  </div>
                </div>
                <button class="btn btn-outline-primary btn-sm w-100 mt-3">View All Activities</button>
              </div>
            </div>
          </div>
          <!-- [ Activity Feed ] end -->

          <!-- [ Advanced Performance Metrics ] start -->
          <div class="col-xl-12">
            <div class="card">
              <div class="card-header d-flex align-items-center justify-content-between">
                <h5>Performance Metrics Dashboard</h5>
                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-outline-primary btn-sm">Real-time</button>
                  <button type="button" class="btn btn-outline-primary btn-sm">Historical</button>
                  <button type="button" class="btn btn-primary btn-sm">
                    <i class="ph ph-gear me-1"></i>Settings
                  </button>
                </div>
              </div>
              <div class="card-body">
                <div class="row">
                  <!-- Sales Performance -->
                  <div class="col-md-3">
                    <div class="card border">
                      <div class="card-body text-center">
                        <div id="sales-performance" style="height: 120px;"></div>
                        <h6 class="mt-3 mb-1">Sales Performance</h6>
                        <h4 class="mb-0 text-primary">87%</h4>
                        <span class="text-success f-12">
                          <i class="ph ph-arrow-up me-1"></i>+15% vs last month
                        </span>
                      </div>
                    </div>
                  </div>
                  
                  <!-- Customer Satisfaction -->
                  <div class="col-md-3">
                    <div class="card border">
                      <div class="card-body text-center">
                        <div id="customer-satisfaction" style="height: 120px;"></div>
                        <h6 class="mt-3 mb-1">Customer Satisfaction</h6>
                        <h4 class="mb-0 text-success">4.8/5</h4>
                        <span class="text-success f-12">
                          <i class="ph ph-arrow-up me-1"></i>+0.3 vs last month
                        </span>
                      </div>
                    </div>
                  </div>
                  
                  <!-- System Uptime -->
                  <div class="col-md-3">
                    <div class="card border">
                      <div class="card-body text-center">
                        <div id="system-uptime" style="height: 120px;"></div>
                        <h6 class="mt-3 mb-1">System Uptime</h6>
                        <h4 class="mb-0 text-warning">99.9%</h4>
                        <span class="text-muted f-12">
                          <i class="ph ph-clock me-1"></i>Last 30 days
                        </span>
                      </div>
                    </div>
                  </div>
                  
                  <!-- API Response Time -->
                  <div class="col-md-3">
                    <div class="card border">
                      <div class="card-body text-center">
                        <div id="api-response" style="height: 120px;"></div>
                        <h6 class="mt-3 mb-1">API Response Time</h6>
                        <h4 class="mb-0 text-info">247ms</h4>
                        <span class="text-danger f-12">
                          <i class="ph ph-arrow-down me-1"></i>-12ms vs last hour
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
                
                <!-- Advanced Chart Section -->
                <div class="row mt-4">
                  <div class="col-md-8">
                    <div class="d-flex align-items-center justify-content-between mb-3">
                      <h6 class="mb-0">Revenue Trends & Forecasting</h6>
                      <div class="d-flex align-items-center">
                        <span class="me-3">
                          <i class="ph ph-circle text-primary me-1"></i>Actual
                        </span>
                        <span class="me-3">
                          <i class="ph ph-circle text-success me-1"></i>Forecast
                        </span>
                        <span>
                          <i class="ph ph-circle text-warning me-1"></i>Target
                        </span>
                      </div>
                    </div>
                    <div id="revenue-trends" style="height: 300px;"></div>
                  </div>
                  <div class="col-md-4">
                    <h6 class="mb-3">Top Performing Regions</h6>
                    <div class="list-group list-group-flush">
                      <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                        <div class="d-flex align-items-center">
                          <div class="bg-primary rounded-circle me-3" style="width: 8px; height: 8px;"></div>
                          <span>North America</span>
                        </div>
                        <div class="text-end">
                          <div class="fw-bold">$247,890</div>
                          <small class="text-success">+24.5%</small>
                        </div>
                      </div>
                      <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                        <div class="d-flex align-items-center">
                          <div class="bg-success rounded-circle me-3" style="width: 8px; height: 8px;"></div>
                          <span>Europe</span>
                        </div>
                        <div class="text-end">
                          <div class="fw-bold">$198,456</div>
                          <small class="text-success">+18.2%</small>
                        </div>
                      </div>
                      <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                        <div class="d-flex align-items-center">
                          <div class="bg-warning rounded-circle me-3" style="width: 8px; height: 8px;"></div>
                          <span>Asia Pacific</span>
                        </div>
                        <div class="text-end">
                          <div class="fw-bold">$156,789</div>
                          <small class="text-success">+31.7%</small>
                        </div>
                      </div>
                      <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                        <div class="d-flex align-items-center">
                          <div class="bg-info rounded-circle me-3" style="width: 8px; height: 8px;"></div>
                          <span>Latin America</span>
                        </div>
                        <div class="text-end">
                          <div class="fw-bold">$89,234</div>
                          <small class="text-danger">-5.3%</small>
                        </div>
                      </div>
                    </div>
                    
                    <div class="mt-4">
                      <h6 class="mb-3">Goal Progress</h6>
                      <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                          <span class="f-14">Monthly Target</span>
                          <span class="f-14 fw-bold">78%</span>
                        </div>
                        <div class="progress" style="height: 8px;">
                          <div class="progress-bar bg-primary" style="width: 78%"></div>
                        </div>
                      </div>
                      <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                          <span class="f-14">Quarterly Target</span>
                          <span class="f-14 fw-bold">92%</span>
                        </div>
                        <div class="progress" style="height: 8px;">
                          <div class="progress-bar bg-success" style="width: 92%"></div>
                        </div>
                      </div>
                      <div>
                        <div class="d-flex justify-content-between mb-1">
                          <span class="f-14">Annual Target</span>
                          <span class="f-14 fw-bold">65%</span>
                        </div>
                        <div class="progress" style="height: 8px;">
                          <div class="progress-bar bg-warning" style="width: 65%"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- [ Advanced Performance Metrics ] end -->
        </div>
        <!-- [ Main Content ] end -->
      </div>
    </div>
    <!-- [ Main Content ] end -->
    <footer class="pc-footer">
  <div class="footer-wrapper container-fluid">
    <div class="row">
      <div class="col my-1">
        <p class="m-0">Admindek by <a href="https://dashboardpack.com/" target="_blank">DashboardPack</a></p>
      </div>
      <div class="col-md-auto my-1">
        <ul class="list-inline footer-link mb-0">
          <li class="list-inline-item"><a href="..\index.html">Home</a></li>
          <li class="list-inline-item"
            ><a href="https://dashboardpack.com/docs/" target="_blank">Documentation</a></li
          >
          <li class="list-inline-item"><a href="https://dashboardpack.com/support/" target="_blank">Support</a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>
 <div class="pct-c-btn-modern">
  <button type="button" class="customizer-trigger" data-bs-toggle="offcanvas" data-bs-target="#offcanvas_pc_layout" data-bs-toggle="tooltip" data-bs-placement="left" title="Theme Customizer">
    <div class="trigger-icon">
      <i class="ph ph-palette"></i>
    </div>
    <div class="trigger-text">Customize</div>
  </button>
</div>
<div class="offcanvas border-0 pct-offcanvas-modern offcanvas-end" tabindex="-1" id="offcanvas_pc_layout">
  <div class="customizer-header">
    <div class="header-content">
      <div class="header-icon">
        <i class="ph ph-paint-brush"></i>
      </div>
      <div class="header-info">
        <h5 class="customizer-title">Theme Customizer</h5>
        <p class="customizer-subtitle">Personalize your experience</p>
      </div>
    </div>
    <div class="header-actions">
      <button type="button" class="btn-reset" id="layoutreset" data-bs-toggle="tooltip" title="Reset to defaults">
        <i class="ph ph-arrow-clockwise"></i>
      </button>
      <button type="button" class="btn-close-modern" data-bs-dismiss="offcanvas" aria-label="Close">
        <i class="ph ph-x"></i>
      </button>
    </div>
  </div>
  <div class="customizer-search">
    <div class="search-container">
      <i class="ph ph-magnifying-glass search-icon"></i>
      <input type="text" class="search-input" placeholder="Search settings..." id="customizer-search">
    </div>
  </div>
  
  <div class="quick-theme-toggle">
    <div class="quick-toggle-header">
      <h6 class="toggle-title">Theme Mode</h6>
      <p class="toggle-subtitle">Quick switch between themes</p>
    </div>
    <div class="theme-mode-switcher">
      <button class="theme-mode-btn active" data-mode="light" onclick="layout_change('light');" data-bs-toggle="tooltip" title="Light Mode">
        <i class="ph ph-sun"></i>
        <span>Light</span>
      </button>
      <button class="theme-mode-btn" data-mode="dark" onclick="layout_change('dark');" data-bs-toggle="tooltip" title="Dark Mode">
        <i class="ph ph-moon"></i>
        <span>Dark</span>
      </button>
    </div>
  </div>
  <div class="customizer-navigation">
    <div class="nav-pills-modern" id="customizer-nav" role="tablist">
      <button class="nav-pill active" id="layout-tab" data-bs-toggle="pill" data-bs-target="#layout-panel" type="button" role="tab" aria-controls="layout-panel" aria-selected="true">
        <i class="ph ph-layout"></i>
        <span>Layout</span>
      </button>
      <button class="nav-pill" id="colors-tab" data-bs-toggle="pill" data-bs-target="#colors-panel" type="button" role="tab" aria-controls="colors-panel" aria-selected="false">
        <i class="ph ph-palette"></i>
        <span>Colors</span>
      </button>
      <button class="nav-pill" id="advanced-tab" data-bs-toggle="pill" data-bs-target="#advanced-panel" type="button" role="tab" aria-controls="advanced-panel" aria-selected="false">
        <i class="ph ph-gear-six"></i>
        <span>Advanced</span>
      </button>
    </div>
  </div>
  <div class="customizer-content">
    <div class="tab-content-modern" id="customizer-content">
      <div class="tab-pane-modern fade show active" id="layout-panel" role="tabpanel" aria-labelledby="layout-tab" tabindex="0">
        <div class="settings-group">
          <div class="group-header">
            <h6 class="group-title">Sidebar Configuration</h6>
            <p class="group-description">Customize your sidebar appearance</p>
          </div>
          <div class="setting-item">
            <div class="setting-info">
              <label class="setting-label">Sidebar Theme</label>
              <span class="setting-help">Choose between light and dark sidebar</span>
            </div>
            <div class="setting-control">
              <div class="toggle-group">
                <button class="toggle-option" data-value="true" onclick="layout_theme_sidebar_change('true');" data-bs-toggle="tooltip" title="Light Sidebar">
                  <i class="ph ph-sun"></i>
                  <span>Light</span>
                </button>
                <button class="toggle-option active" data-value="false" onclick="layout_theme_sidebar_change('false');" data-bs-toggle="tooltip" title="Dark Sidebar">
                  <i class="ph ph-moon"></i>
                  <span>Dark</span>
                </button>
              </div>
            </div>
          </div>
          <div class="setting-item">
            <div class="setting-info">
              <label class="setting-label">Sidebar Icons</label>
              <span class="setting-help">Show or hide navigation icons</span>
            </div>
            <div class="setting-control">
              <div class="toggle-group sidebar-icons">
                <button class="toggle-option active" data-value="true" onclick="layout_sidebar_icons_change('true');" data-bs-toggle="tooltip" title="Show Icons">
                  <i class="ph ph-squares-four"></i>
                  <span>Show</span>
                </button>
                <button class="toggle-option" data-value="false" onclick="layout_sidebar_icons_change('false');" data-bs-toggle="tooltip" title="Hide Icons">
                  <i class="ph ph-minus-square"></i>
                  <span>Hide</span>
                </button>
              </div>
            </div>
          </div>
          <div class="setting-item">
            <div class="setting-info">
              <label class="setting-label">Sidebar Caption</label>
              <span class="setting-help">Show or hide navigation captions</span>
            </div>
            <div class="setting-control">
              <div class="image-toggle-group">
                <button class="image-toggle active" data-value="true" onclick="layout_caption_change('true');" data-bs-toggle="tooltip" title="Show Captions">
                  <img src="..\assets\images\customizer\caption-on.svg" alt="Caption On" class="toggle-preview">
                  <span class="toggle-label">Show</span>
                </button>
                <button class="image-toggle" data-value="false" onclick="layout_caption_change('false');" data-bs-toggle="tooltip" title="Hide Captions">
                  <img src="..\assets\images\customizer\caption-off.svg" alt="Caption Off" class="toggle-preview">
                  <span class="toggle-label">Hide</span>
                </button>
              </div>
            </div>
          </div>
          <div class="setting-item pc-rtl">
            <div class="setting-info">
              <label class="setting-label">Text Direction</label>
              <span class="setting-help">Left-to-right or right-to-left layout</span>
            </div>
            <div class="setting-control">
              <div class="image-toggle-group">
                <button class="image-toggle active" data-value="false" onclick="layout_rtl_change('false');" data-bs-toggle="tooltip" title="Left to Right">
                  <img src="..\assets\images\customizer\ltr.svg" alt="LTR" class="toggle-preview">
                  <span class="toggle-label">LTR</span>
                </button>
                <button class="image-toggle" data-value="true" onclick="layout_rtl_change('true');" data-bs-toggle="tooltip" title="Right to Left">
                  <img src="..\assets\images\customizer\rtl.svg" alt="RTL" class="toggle-preview">
                  <span class="toggle-label">RTL</span>
                </button>
              </div>
            </div>
          </div>
          <div class="setting-item pc-box-width">
            <div class="setting-info">
              <label class="setting-label">Layout Width</label>
              <span class="setting-help">Container width configuration</span>
            </div>
            <div class="setting-control">
              <div class="image-toggle-group">
                <button class="image-toggle active" data-value="false" onclick="change_box_container('false')" data-bs-toggle="tooltip" title="Full Width Layout">
                  <img src="..\assets\images\customizer\full.svg" alt="Full Width" class="toggle-preview">
                  <span class="toggle-label">Full</span>
                </button>
                <button class="image-toggle" data-value="true" onclick="change_box_container('true')" data-bs-toggle="tooltip" title="Fixed Width Layout">
                  <img src="..\assets\images\customizer\fixed.svg" alt="Fixed Width" class="toggle-preview">
                  <span class="toggle-label">Fixed</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-pane-modern fade" id="colors-panel" role="tabpanel" aria-labelledby="colors-tab" tabindex="0">
        <div class="settings-group">
          <div class="group-header">
            <h6 class="group-title">Theme Colors</h6>
            <p class="group-description">Customize your color scheme</p>
          </div>
          <div class="setting-item">
            <div class="setting-info">
              <label class="setting-label">Primary Color</label>
              <span class="setting-help">Choose your main brand color</span>
            </div>
            <div class="setting-control">
              <div class="color-palette preset-color">
                <button class="color-swatch-small active" data-bs-toggle="tooltip" title="Ocean Blue" data-value="preset-1">
                  <span class="color-preview-small" style="background: #4680ff;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Royal Purple" data-value="preset-2">
                  <span class="color-preview-small" style="background: #7c4dff;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Rose Pink" data-value="preset-3">
                  <span class="color-preview-small" style="background: #e91e63;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Crimson Red" data-value="preset-4">
                  <span class="color-preview-small" style="background: #dc2626;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Vibrant Orange" data-value="preset-5">
                  <span class="color-preview-small" style="background: #ff9800;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Golden Yellow" data-value="preset-6">
                  <span class="color-preview-small" style="background: #ffd54f;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Forest Green" data-value="preset-7">
                  <span class="color-preview-small" style="background: #4caf50;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Aqua Cyan" data-value="preset-8">
                  <span class="color-preview-small" style="background: #00bcd4;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
              </div>
              <button class="reset-color-btn" data-target="preset-color" data-bs-toggle="tooltip" title="Reset to default">
                <i class="ph ph-arrow-clockwise"></i>
                <span>Reset to Default</span>
              </button>
            </div>
          </div>
          <div class="setting-item">
            <div class="setting-info">
              <label class="setting-label">Header Theme</label>
              <span class="setting-help">Customize header background color</span>
            </div>
            <div class="setting-control">
              <div class="color-palette header-color">
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Ocean Blue" data-value="preset-1">
                  <span class="color-preview-small" style="background: #4680ff;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Royal Purple" data-value="preset-2">
                  <span class="color-preview-small" style="background: #7c4dff;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Rose Pink" data-value="preset-3">
                  <span class="color-preview-small" style="background: #e91e63;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Crimson Red" data-value="preset-4">
                  <span class="color-preview-small" style="background: #dc2626;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Vibrant Orange" data-value="preset-5">
                  <span class="color-preview-small" style="background: #ff9800;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Golden Yellow" data-value="preset-6">
                  <span class="color-preview-small" style="background: #ffd54f;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Forest Green" data-value="preset-7">
                  <span class="color-preview-small" style="background: #4caf50;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Aqua Cyan" data-value="preset-8">
                  <span class="color-preview-small" style="background: #00bcd4;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
              </div>
              <button class="reset-color-btn" data-target="header-color" data-bs-toggle="tooltip" title="Reset to default">
                <i class="ph ph-arrow-clockwise"></i>
                <span>Reset to Default</span>
              </button>
            </div>
          </div>
          <div class="setting-item">
            <div class="setting-info">
              <label class="setting-label">Navbar Theme</label>
              <span class="setting-help">Customize navigation bar colors</span>
            </div>
            <div class="setting-control">
              <div class="color-palette navbar-color">
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Ocean Blue" data-value="preset-1">
                  <span class="color-preview-small" style="background: #4680ff;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Royal Purple" data-value="preset-2">
                  <span class="color-preview-small" style="background: #7c4dff;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Rose Pink" data-value="preset-3">
                  <span class="color-preview-small" style="background: #e91e63;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Crimson Red" data-value="preset-4">
                  <span class="color-preview-small" style="background: #dc2626;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Vibrant Orange" data-value="preset-5">
                  <span class="color-preview-small" style="background: #ff9800;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Golden Yellow" data-value="preset-6">
                  <span class="color-preview-small" style="background: #ffd54f;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Forest Green" data-value="preset-7">
                  <span class="color-preview-small" style="background: #4caf50;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Aqua Cyan" data-value="preset-8">
                  <span class="color-preview-small" style="background: #00bcd4;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
              </div>
              <button class="reset-color-btn" data-target="navbar-color" data-bs-toggle="tooltip" title="Reset to default">
                <i class="ph ph-arrow-clockwise"></i>
                <span>Reset to Default</span>
              </button>
            </div>
          </div>
          <div class="setting-item">
            <div class="setting-info">
              <label class="setting-label">Logo Theme</label>
              <span class="setting-help">Brand logo area customization</span>
            </div>
            <div class="setting-control">
              <div class="color-palette logo-color">
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Ocean Blue" data-value="preset-1">
                  <span class="color-preview-small" style="background: #4680ff;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Royal Purple" data-value="preset-2">
                  <span class="color-preview-small" style="background: #7c4dff;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Rose Pink" data-value="preset-3">
                  <span class="color-preview-small" style="background: #e91e63;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Crimson Red" data-value="preset-4">
                  <span class="color-preview-small" style="background: #dc2626;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Vibrant Orange" data-value="preset-5">
                  <span class="color-preview-small" style="background: #ff9800;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Golden Yellow" data-value="preset-6">
                  <span class="color-preview-small" style="background: #ffd54f;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Forest Green" data-value="preset-7">
                  <span class="color-preview-small" style="background: #4caf50;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Aqua Cyan" data-value="preset-8">
                  <span class="color-preview-small" style="background: #00bcd4;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
              </div>
              <button class="reset-color-btn" data-target="logo-color" data-bs-toggle="tooltip" title="Reset to default">
                <i class="ph ph-arrow-clockwise"></i>
                <span>Reset to Default</span>
              </button>
            </div>
          </div>
          <div class="setting-item">
            <div class="setting-info">
              <label class="setting-label">Caption Colors</label>
              <span class="setting-help">Navigation caption text colors</span>
            </div>
            <div class="setting-control">
              <div class="color-palette caption-color">
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Ocean Blue" data-value="preset-1">
                  <span class="color-preview-small" style="background: #4680ff;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Royal Purple" data-value="preset-2">
                  <span class="color-preview-small" style="background: #7c4dff;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Rose Pink" data-value="preset-3">
                  <span class="color-preview-small" style="background: #e91e63;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Crimson Red" data-value="preset-4">
                  <span class="color-preview-small" style="background: #dc2626;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Vibrant Orange" data-value="preset-5">
                  <span class="color-preview-small" style="background: #ff9800;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Golden Yellow" data-value="preset-6">
                  <span class="color-preview-small" style="background: #ffd54f;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Forest Green" data-value="preset-7">
                  <span class="color-preview-small" style="background: #4caf50;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
                <button class="color-swatch-small" data-bs-toggle="tooltip" title="Aqua Cyan" data-value="preset-8">
                  <span class="color-preview-small" style="background: #00bcd4;"></span>
                  <i class="ph ph-check color-check"></i>
                </button>
              </div>
              <button class="reset-color-btn" data-target="caption-color" data-bs-toggle="tooltip" title="Reset to default">
                <i class="ph ph-arrow-clockwise"></i>
                <span>Reset to Default</span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-pane-modern fade" id="advanced-panel" role="tabpanel" aria-labelledby="advanced-tab" tabindex="0">
        <div class="settings-group">
          <div class="group-header">
            <h6 class="group-title">Advanced Settings</h6>
            <p class="group-description">Fine-tune interface details</p>
          </div>
          <div class="setting-item">
            <div class="setting-info">
              <label class="setting-label">Dropdown Menu Icons</label>
              <span class="setting-help">Choose icons for expandable menus</span>
            </div>
            <div class="setting-control">
              <div class="icon-selector drp-menu-icon">
                <button class="icon-option active" data-value="preset-1" data-bs-toggle="tooltip" title="Chevron Right">
                  <i class="ti ti-chevron-right"></i>
                </button>
                <button class="icon-option" data-value="preset-2" data-bs-toggle="tooltip" title="Double Chevron">
                  <i class="ti ti-chevrons-right"></i>
                </button>
                <button class="icon-option" data-value="preset-3" data-bs-toggle="tooltip" title="Caret Right">
                  <i class="ti ti-caret-right"></i>
                </button>
                <button class="icon-option" data-value="preset-4" data-bs-toggle="tooltip" title="Plus Circle">
                  <i class="ti ti-circle-plus"></i>
                </button>
                <button class="icon-option" data-value="preset-5" data-bs-toggle="tooltip" title="Plus">
                  <i class="ti ti-plus"></i>
                </button>
              </div>
            </div>
          </div>
          <div class="setting-item">
            <div class="setting-info">
              <label class="setting-label">Link Indicators</label>
              <span class="setting-help">Icons for menu link items</span>
            </div>
            <div class="setting-control">
              <div class="icon-selector drp-menu-link-icon">
                <button class="icon-option active" data-value="preset-1" data-bs-toggle="tooltip" title="No Icon">
                  <span class="no-icon">None</span>
                </button>
                <button class="icon-option" data-value="preset-2" data-bs-toggle="tooltip" title="Arrow Right">
                  <i class="ti ti-arrow-narrow-right"></i>
                </button>
                <button class="icon-option" data-value="preset-3" data-bs-toggle="tooltip" title="Chevron Right">
                  <i class="ti ti-chevron-right"></i>
                </button>
                <button class="icon-option" data-value="preset-4" data-bs-toggle="tooltip" title="Double Chevron">
                  <i class="ti ti-chevrons-right"></i>
                </button>
                <button class="icon-option" data-value="preset-5" data-bs-toggle="tooltip" title="Corner Down">
                  <i class="ti ti-corner-down-right"></i>
                </button>
                <button class="icon-option" data-value="preset-6" data-bs-toggle="tooltip" title="Dash">
                  <i class="ti ti-minus"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>
    </div>
  </div>
</div>

    <!-- [Page Specific JS] start -->
    <!-- apexcharts js -->
    <script src="assets\js\plugins\apexcharts.min.js"></script>
    
    <!-- Vector maps -->
    <script src="assets\js\plugins\jsvectormap.min.js"></script>
    <script src="assets\js\plugins\world.js"></script>
    
    <!-- Enhanced Dashboard Widgets -->
    <script src="assets\js\widgets\world-low.js"></script>
    <script src="assets\js\widgets\device-chart.js"></script>
    <script src="assets\js\widgets\happy-sad-ball.js"></script>
    
    <!-- Custom Enhanced Dashboard JS -->
    <script>
      // Enhanced KPI Cards with mini charts
      const kpiCharts = {
        totalRevenue: {
          chart: {
            type: 'line',
            width: 80,
            height: 50,
            sparkline: { enabled: true }
          },
          series: [{
            data: [31, 40, 28, 51, 42, 85, 77]
          }],
          stroke: { width: 2, colors: ['#ffffff'] },
          tooltip: { enabled: false }
        },
        activeUsers: {
          chart: {
            type: 'area',
            width: 80,
            height: 50,
            sparkline: { enabled: true }
          },
          series: [{
            data: [11, 32, 45, 32, 34, 52, 41]
          }],
          fill: { colors: ['#ffffff'], opacity: 0.3 },
          stroke: { colors: ['#ffffff'] },
          tooltip: { enabled: false }
        },
        orders: {
          chart: {
            type: 'bar',
            width: 80,
            height: 50,
            sparkline: { enabled: true }
          },
          series: [{
            data: [47, 45, 54, 38, 56, 24, 65]
          }],
          colors: ['#ffffff'],
          tooltip: { enabled: false }
        },
        conversion: {
          chart: {
            type: 'line',
            width: 80,
            height: 50,
            sparkline: { enabled: true }
          },
          series: [{
            data: [15, 75, 47, 65, 55, 70, 85]
          }],
          stroke: { width: 2, colors: ['#ffffff'], curve: 'smooth' },
          tooltip: { enabled: false }
        }
      };

      // Render KPI charts
      Object.keys(kpiCharts).forEach(chartId => {
        const element = document.querySelector(`#${chartId.replace(/([A-Z])/g, '-$1').toLowerCase()}-chart`);
        if (element) {
          new ApexCharts(element, kpiCharts[chartId]).render();
        }
      });

      // Real-time Analytics Chart
      const realTimeOptions = {
        chart: {
          type: 'area',
          height: 350,
          animations: { enabled: true, easing: 'linear', dynamicAnimation: { speed: 1000 } },
          toolbar: { show: false }
        },
        series: [{
          name: 'Sessions',
          data: [31, 40, 28, 51, 42, 85, 77, 95, 87, 73, 69, 85]
        }, {
          name: 'Page Views',
          data: [87, 76, 65, 89, 95, 76, 89, 67, 78, 95, 87, 92]
        }],
        xaxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        colors: ['#4680ff', '#04a9f5'],
        fill: { opacity: 0.3 },
        stroke: { curve: 'smooth' }
      };

      if (document.querySelector('#real-time-chart')) {
        new ApexCharts(document.querySelector('#real-time-chart'), realTimeOptions).render();
      }

      // Performance Metrics Charts
      const performanceCharts = {
        salesPerformance: {
          chart: { type: 'radialBar', height: 120 },
          series: [87],
          colors: ['#4680ff'],
          plotOptions: {
            radialBar: {
              hollow: { size: '70%' },
              dataLabels: { show: false }
            }
          }
        },
        customerSatisfaction: {
          chart: { type: 'donut', height: 120 },
          series: [4.8, 1.2],
          colors: ['#2ed8b6', '#e9ecef'],
          plotOptions: {
            pie: {
              donut: { size: '70%' }
            }
          },
          legend: { show: false },
          dataLabels: { enabled: false }
        },
        systemUptime: {
          chart: { type: 'radialBar', height: 120 },
          series: [99.9],
          colors: ['#ffb64d'],
          plotOptions: {
            radialBar: {
              hollow: { size: '70%' },
              dataLabels: { show: false }
            }
          }
        },
        apiResponse: {
          chart: { type: 'line', height: 120, sparkline: { enabled: true } },
          series: [{
            data: [247, 251, 245, 249, 243, 247, 250, 248, 247]
          }],
          stroke: { curve: 'smooth', colors: ['#04a9f5'] }
        }
      };

      Object.keys(performanceCharts).forEach(chartId => {
        const element = document.querySelector(`#${chartId.replace(/([A-Z])/g, '-$1').toLowerCase()}`);
        if (element) {
          new ApexCharts(element, performanceCharts[chartId]).render();
        }
      });

      // Revenue Trends Chart
      const revenueTrendsOptions = {
        chart: {
          type: 'line',
          height: 300,
          toolbar: { show: false }
        },
        series: [{
          name: 'Actual Revenue',
          data: [44, 55, 57, 56, 61, 58, 63, 60, 66, 75, 85, 89]
        }, {
          name: 'Forecast',
          data: [null, null, null, null, null, null, null, null, 66, 78, 88, 95]
        }, {
          name: 'Target',
          data: [50, 60, 65, 70, 75, 80, 85, 90, 95, 100, 105, 110]
        }],
        xaxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        colors: ['#4680ff', '#2ed8b6', '#ffb64d'],
        stroke: {
          curve: 'smooth',
          dashArray: [0, 5, 0]
        },
        fill: {
          type: 'solid',
          opacity: 0.1
        },
        markers: {
          size: 4,
          strokeWidth: 2,
          strokeColors: '#fff',
          hover: {
            size: 6
          }
        },
        legend: {
          show: true,
          position: 'top',
          horizontalAlign: 'right'
        },
        grid: {
          borderColor: '#e9ecef',
          strokeDashArray: 3
        }
      };

      if (document.querySelector('#revenue-trends')) {
        new ApexCharts(document.querySelector('#revenue-trends'), revenueTrendsOptions).render();
      }

      // CPU and Memory Usage Charts
      const systemCharts = {
        cpuUsage: {
          chart: { type: 'radialBar', height: 60, width: 60 },
          series: [67],
          colors: ['#f44336'],
          plotOptions: {
            radialBar: {
              hollow: { size: '50%' },
              dataLabels: { show: false }
            }
          }
        },
        memoryUsage: {
          chart: { type: 'radialBar', height: 60, width: 60 },
          series: [82],
          colors: ['#ff9800'],
          plotOptions: {
            radialBar: {
              hollow: { size: '50%' },
              dataLabels: { show: false }
            }
          }
        }
      };

      Object.keys(systemCharts).forEach(chartId => {
        const element = document.querySelector(`#${chartId.replace(/([A-Z])/g, '-$1').toLowerCase()}`);
        if (element) {
          new ApexCharts(element, systemCharts[chartId]).render();
        }
      });

      // Timeline styles for activity feed
      const style = document.createElement('style');
      style.textContent = `
        .timeline {
          position: relative;
          padding-left: 20px;
        }
        .timeline::before {
          content: '';
          position: absolute;
          left: 10px;
          top: 0;
          bottom: 0;
          width: 2px;
          background: #e9ecef;
        }
        .timeline-item {
          position: relative;
          margin-bottom: 20px;
        }
        .timeline-marker {
          position: absolute;
          left: -26px;
          top: 5px;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          border: 2px solid #fff;
          box-shadow: 0 0 0 2px #e9ecef;
        }
        .timeline-content {
          background: #f8f9fa;
          padding: 15px;
          border-radius: 8px;
          border-left: 3px solid #4680ff;
        }
      `;
      document.head.appendChild(style);
    </script>
    <!-- [Page Specific JS] end -->
    <!-- Required JS -->
<script src="assets\js\plugins\popper.min.js"></script>
<script src="assets\js\plugins\simplebar.min.js"></script>
<script src="assets\js\plugins\bootstrap.min.js"></script>
<script src="assets\js\plugins\i18next.min.js"></script>
<script src="assets\js\plugins\i18nextHttpBackend.min.js"></script>
<script src="assets\js\script.js"></script>
<script src="assets\js\theme.js"></script>
<script src="assets\js\multi-lang.js"></script>

<!-- Theme Configuration Scripts (hardcoded based on vite.config.js values) -->
<script>
  layout_change('light');
</script>
<script>
  change_box_container('false');
</script>
<script>
  layout_caption_change('true');
</script>
<script>
  layout_rtl_change('false');
</script>
<script>
  preset_change('preset-1');
</script>
<script>
  layout_theme_sidebar_change('false');
</script>
  </body>
  <!-- [Body] end -->
</html>