1829 lines
80 KiB
HTML
1829 lines
80 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="@@languageDirection.lang">
|
|
<head>
|
|
<!-- Required Meta Tags Always Come First -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<!-- Title -->
|
|
<title>Dashboard | Front - Admin & Dashboard Template</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="@@autopath/favicon.ico">
|
|
|
|
<!-- Font -->
|
|
<link href="@@vars.themeFont" rel="stylesheet">
|
|
|
|
<!-- CSS Implementing Plugins -->
|
|
<!-- bundlecss:vendor [@@autopath] -->
|
|
<link rel="stylesheet" href="@@autopath/node_modules/bootstrap-icons/font/bootstrap-icons.css">
|
|
<link rel="stylesheet" href="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
|
|
<link rel="stylesheet" href="@@autopath/node_modules/chart.js/dist/Chart.min.css">
|
|
<link rel="stylesheet" href="@@autopath/node_modules/daterangepicker/daterangepicker.css">
|
|
<link rel="stylesheet" href="@@autopath/node_modules/tom-select/dist/css/tom-select.bootstrap5.css">
|
|
|
|
<!-- CSS Front Template -->
|
|
@@if(layoutBuilder.extend.switcherSupport === false) {
|
|
<link rel="stylesheet" href="@@autopath/assets/css/theme@@if(themeAppearance.layoutSkin === 'dark'){-dark}.css">
|
|
}
|
|
|
|
@@if(layoutBuilder.extend.switcherSupport === true) {
|
|
<link rel="preload" href="@@autopath/assets/css/theme.css" data-hs-appearance="default" as="style">
|
|
<link rel="preload" href="@@autopath/assets/css/theme-dark.css" data-hs-appearance="dark" as="style">
|
|
|
|
<style data-hs-appearance-onload-styles>
|
|
* {
|
|
transition: unset !important;
|
|
}
|
|
|
|
body {
|
|
opacity: 0;
|
|
}
|
|
</style>
|
|
}
|
|
</head>
|
|
|
|
<body class="bg-light">
|
|
@@if(layoutBuilder.extend.switcherSupport === true) {
|
|
<script src="@@autopath/assets/js/hs.theme-appearance.js"></script>
|
|
}
|
|
|
|
<!-- ========== HEADER ========== -->
|
|
@@include("@@autopath/partials/navbar/sidebar-detached-fixed-search-width.html")
|
|
<!-- ========== END HEADER ========== -->
|
|
|
|
<!-- ========== MAIN CONTENT ========== -->
|
|
<main id="content" role="main" class="main">
|
|
<!-- Content -->
|
|
<div class="content container pt-2 pt-lg-0">
|
|
<!-- Navbar Vertical -->
|
|
<div class="navbar-expand-lg navbar-light">
|
|
<!-- Navbar Toggle -->
|
|
<button class="navbar-toggler w-100 mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenu" aria-controls="navbarVerticalNavMenu" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="d-flex justify-content-between align-items-center">
|
|
<span class="navbar-toggler-text">Nav menu</span>
|
|
<span class="navbar-toggler-default">
|
|
<i class="bi-list"></i>
|
|
</span>
|
|
<span class="navbar-toggler-toggled">
|
|
<i class="bi-x"></i>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
<!-- End Navbar Toggle -->
|
|
|
|
@@include("@@autopath/partials/sidebar/detached-navbar-light.html", {
|
|
"category": "dashboards",
|
|
"subcategory": "",
|
|
"link": "index.html"
|
|
})
|
|
</div>
|
|
<!-- End Navbar Vertical -->
|
|
|
|
<!-- Sidebar Detached Content -->
|
|
<div class="sidebar-detached-content">
|
|
<!-- Stats -->
|
|
<div class="row">
|
|
<div class="col-sm-6 col-xl-3 mb-3 mb-xl-5">
|
|
<!-- Card -->
|
|
<a class="card card-hover-shadow h-100" href="#">
|
|
<div class="card-body">
|
|
<h6 class="card-subtitle">Total Users</h6>
|
|
|
|
<div class="row align-items-center gx-2 mb-1">
|
|
<div class="col-6">
|
|
<h2 class="card-title text-inherit">72,540</h2>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6">
|
|
<!-- Chart -->
|
|
<div class="chartjs-custom" style="height: 3rem;">
|
|
<canvas class="js-chart"
|
|
data-hs-chartjs-options='{
|
|
"type": "line",
|
|
"data": {
|
|
"labels": ["1 May","2 May","3 May","4 May","5 May","6 May","7 May","8 May","9 May","10 May","11 May","12 May","13 May","14 May","15 May","16 May","17 May","18 May","19 May","20 May","21 May","22 May","23 May","24 May","25 May","26 May","27 May","28 May","29 May","30 May","31 May"],
|
|
"datasets": [{
|
|
"data": [21,20,24,20,18,17,15,17,18,30,31,30,30,35,25,35,35,40,60,90,90,90,85,70,75,70,30,30,30,50,72],
|
|
"backgroundColor": ["rgba(55, 125, 255, 0)", "rgba(255, 255, 255, 0)"],
|
|
"borderColor": "@@themeAppearance.styles.colors.primary",
|
|
"borderWidth": 2,
|
|
"pointRadius": 0,
|
|
"pointHoverRadius": 0
|
|
}]
|
|
},
|
|
"options": {
|
|
"scales": {
|
|
"yAxes": [{
|
|
"display": false
|
|
}],
|
|
"xAxes": [{
|
|
"display": false
|
|
}]
|
|
},
|
|
"hover": {
|
|
"mode": "nearest",
|
|
"intersect": false
|
|
},
|
|
"tooltips": {
|
|
"postfix": "k",
|
|
"hasIndicator": true,
|
|
"intersect": false
|
|
}
|
|
}
|
|
}'>
|
|
</canvas>
|
|
</div>
|
|
<!-- End Chart -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<span class="badge bg-soft-success text-success">
|
|
<i class="bi-graph-up"></i> 12.5%
|
|
</span>
|
|
<span class="text-body fs-6 ms-1">from 70,104</span>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<div class="col-sm-6 col-xl-3 mb-3 mb-xl-5">
|
|
<!-- Card -->
|
|
<a class="card card-hover-shadow h-100" href="#">
|
|
<div class="card-body">
|
|
<h6 class="card-subtitle">Sessions</h6>
|
|
|
|
<div class="row align-items-center gx-2 mb-1">
|
|
<div class="col-6">
|
|
<h2 class="card-title text-inherit">29.4%</h2>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6">
|
|
<!-- Chart -->
|
|
<div class="chartjs-custom" style="height: 3rem;">
|
|
<canvas class="js-chart"
|
|
data-hs-chartjs-options='{
|
|
"type": "line",
|
|
"data": {
|
|
"labels": ["1 May","2 May","3 May","4 May","5 May","6 May","7 May","8 May","9 May","10 May","11 May","12 May","13 May","14 May","15 May","16 May","17 May","18 May","19 May","20 May","21 May","22 May","23 May","24 May","25 May","26 May","27 May","28 May","29 May","30 May","31 May"],
|
|
"datasets": [{
|
|
"data": [21,20,24,20,18,17,15,17,30,30,35,25,18,30,31,35,35,90,90,90,85,100,120,120,120,100,90,75,75,75,90],
|
|
"backgroundColor": ["rgba(55, 125, 255, 0)", "rgba(255, 255, 255, 0)"],
|
|
"borderColor": "@@themeAppearance.styles.colors.primary",
|
|
"borderWidth": 2,
|
|
"pointRadius": 0,
|
|
"pointHoverRadius": 0
|
|
}]
|
|
},
|
|
"options": {
|
|
"scales": {
|
|
"yAxes": [{
|
|
"display": false
|
|
}],
|
|
"xAxes": [{
|
|
"display": false
|
|
}]
|
|
},
|
|
"hover": {
|
|
"mode": "nearest",
|
|
"intersect": false
|
|
},
|
|
"tooltips": {
|
|
"postfix": "%",
|
|
"hasIndicator": true,
|
|
"intersect": false
|
|
}
|
|
}
|
|
}'>
|
|
</canvas>
|
|
</div>
|
|
<!-- End Chart -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<span class="badge bg-soft-success text-success">
|
|
<i class="bi-graph-up"></i> 1.7%
|
|
</span>
|
|
<span class="text-body fs-6 ms-1">from 29.1%</span>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<div class="col-sm-6 col-xl-3 mb-3 mb-xl-5">
|
|
<!-- Card -->
|
|
<a class="card card-hover-shadow h-100" href="#">
|
|
<div class="card-body">
|
|
<h6 class="card-subtitle">Avg. Click Rate</h6>
|
|
|
|
<div class="row align-items-center gx-2 mb-1">
|
|
<div class="col-6">
|
|
<h2 class="card-title text-inherit">56.8%</h2>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6">
|
|
<!-- Chart -->
|
|
<div class="chartjs-custom" style="height: 3rem;">
|
|
<canvas class="js-chart"
|
|
data-hs-chartjs-options='{
|
|
"type": "line",
|
|
"data": {
|
|
"labels": ["1 May","2 May","3 May","4 May","5 May","6 May","7 May","8 May","9 May","10 May","11 May","12 May","13 May","14 May","15 May","16 May","17 May","18 May","19 May","20 May","21 May","22 May","23 May","24 May","25 May","26 May","27 May","28 May","29 May","30 May","31 May"],
|
|
"datasets": [{
|
|
"data": [25,18,30,31,35,35,60,60,60,75,21,20,24,20,18,17,15,17,30,120,120,120,100,90,75,90,90,90,75,70,60],
|
|
"backgroundColor": ["rgba(55, 125, 255, 0)", "rgba(255, 255, 255, 0)"],
|
|
"borderColor": "@@themeAppearance.styles.colors.primary",
|
|
"borderWidth": 2,
|
|
"pointRadius": 0,
|
|
"pointHoverRadius": 0
|
|
}]
|
|
},
|
|
"options": {
|
|
"scales": {
|
|
"yAxes": [{
|
|
"display": false
|
|
}],
|
|
"xAxes": [{
|
|
"display": false
|
|
}]
|
|
},
|
|
"hover": {
|
|
"mode": "nearest",
|
|
"intersect": false
|
|
},
|
|
"tooltips": {
|
|
"postfix": "%",
|
|
"hasIndicator": true,
|
|
"intersect": false
|
|
}
|
|
}
|
|
}'>
|
|
</canvas>
|
|
</div>
|
|
<!-- End Chart -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<span class="badge bg-soft-danger text-danger">
|
|
<i class="bi-graph-down"></i> 4.4%
|
|
</span>
|
|
<span class="text-body fs-6 ms-1">from 61.2%</span>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<div class="col-sm-6 col-xl-3 mb-3 mb-xl-5">
|
|
<!-- Card -->
|
|
<a class="card card-hover-shadow h-100" href="#">
|
|
<div class="card-body">
|
|
<h6 class="card-subtitle">Pageviews</h6>
|
|
|
|
<div class="row align-items-center gx-2 mb-1">
|
|
<div class="col-6">
|
|
<h2 class="card-title text-inherit">92,913</h2>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6">
|
|
<!-- Chart -->
|
|
<div class="chartjs-custom" style="height: 3rem;">
|
|
<canvas class="js-chart"
|
|
data-hs-chartjs-options='{
|
|
"type": "line",
|
|
"data": {
|
|
"labels": ["1 May","2 May","3 May","4 May","5 May","6 May","7 May","8 May","9 May","10 May","11 May","12 May","13 May","14 May","15 May","16 May","17 May","18 May","19 May","20 May","21 May","22 May","23 May","24 May","25 May","26 May","27 May","28 May","29 May","30 May","31 May"],
|
|
"datasets": [{
|
|
"data": [21,20,24,15,17,30,30,35,35,35,40,60,12,90,90,85,70,75,43,75,90,22,120,120,90,85,100,92,92,92,92],
|
|
"backgroundColor": ["rgba(55, 125, 255, 0)", "rgba(255, 255, 255, 0)"],
|
|
"borderColor": "@@themeAppearance.styles.colors.primary",
|
|
"borderWidth": 2,
|
|
"pointRadius": 0,
|
|
"pointHoverRadius": 0
|
|
}]
|
|
},
|
|
"options": {
|
|
"scales": {
|
|
"yAxes": [{
|
|
"display": false
|
|
}],
|
|
"xAxes": [{
|
|
"display": false
|
|
}]
|
|
},
|
|
"hover": {
|
|
"mode": "nearest",
|
|
"intersect": false
|
|
},
|
|
"tooltips": {
|
|
"postfix": "k",
|
|
"hasIndicator": true,
|
|
"intersect": false
|
|
}
|
|
}
|
|
}'>
|
|
</canvas>
|
|
</div>
|
|
<!-- End Chart -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<span class="badge bg-soft-secondary text-body">0.0%</span>
|
|
<span class="text-body fs-6 ms-1">from 2,913</span>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
</div>
|
|
<!-- End Stats -->
|
|
|
|
<div class="row">
|
|
<div class="col-xl-5 mb-3 mb-xl-5">
|
|
<!-- Card -->
|
|
<div class="card h-100">
|
|
<!-- Header -->
|
|
<div class="card-header card-header-content-between">
|
|
<h4 class="card-header-title">Import data into Front Dashboard</h4>
|
|
|
|
<!-- Dropdown -->
|
|
<div class="dropdown">
|
|
<button type="button" class="btn btn-ghost-secondary btn-icon btn-sm rounded-circle" id="reportsOverviewDropdown2" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="bi-three-dots-vertical"></i>
|
|
</button>
|
|
|
|
<div class="dropdown-menu dropdown-menu-end mt-1" aria-labelledby="reportsOverviewDropdown2">
|
|
<span class="dropdown-header">Settings</span>
|
|
|
|
<a class="dropdown-item" href="#">
|
|
<i class="bi-share-fill dropdown-item-icon"></i> Share chart
|
|
</a>
|
|
<a class="dropdown-item" href="#">
|
|
<i class="bi-download dropdown-item-icon"></i> Download
|
|
</a>
|
|
<a class="dropdown-item" href="#">
|
|
<i class="bi-alt dropdown-item-icon"></i> Connect other apps
|
|
</a>
|
|
|
|
<div class="dropdown-divider"></div>
|
|
|
|
<span class="dropdown-header">Feedback</span>
|
|
|
|
<a class="dropdown-item" href="#">
|
|
<i class="bi-chat-left-dots dropdown-item-icon"></i> Report
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Dropdown -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<p>See and talk to your users and leads immediately by importing your data into the Front Dashboard platform.</p>
|
|
|
|
<ul class="list-group list-group-flush list-group-no-gutters">
|
|
<li class="list-group-item">
|
|
<h5 class="card-title">Import users from:</h5>
|
|
</li>
|
|
|
|
<!-- List Group Item -->
|
|
<li class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xs avatar-4x3" src="@@autopath/assets/svg/brands/capsule-icon.svg" alt="Image Description">
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h5 class="mb-0">Capsule</h5>
|
|
<span class="d-block fs-6 text-body">Users</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<a class="btn btn-primary btn-sm" href="#" title="Launch importer" target="_blank">
|
|
Launch <span class="d-none d-sm-inline-block">importer</span>
|
|
<i class="bi-box-arrow-up-right ms-1"></i>
|
|
</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<!-- End List Group Item -->
|
|
|
|
<!-- List Group Item -->
|
|
<li class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xs avatar-4x3" src="@@autopath/assets/svg/brands/mailchimp-icon.svg" alt="Image Description">
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h5 class="mb-0">Mailchimp</h5>
|
|
<span class="d-block fs-6 text-body">Users</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<a class="btn btn-primary btn-sm" href="#" title="Launch importer" target="_blank">
|
|
Launch <span class="d-none d-sm-inline-block">importer</span>
|
|
<i class="bi-box-arrow-up-right ms-1"></i>
|
|
</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<!-- End List Group Item -->
|
|
|
|
<!-- List Group Item -->
|
|
<li class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xs avatar-4x3" src="@@autopath/assets/svg/brands/google-webdev-icon.svg" alt="Image Description">
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h5 class="mb-0">Webdev</h5>
|
|
<span class="d-block fs-6 text-body">Users</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<a class="btn btn-primary btn-sm" href="#" title="Launch importer" target="_blank">
|
|
Launch <span class="d-none d-sm-inline-block">importer</span>
|
|
<i class="bi-box-arrow-up-right ms-1"></i>
|
|
</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<!-- End List Group Item -->
|
|
|
|
<li class="list-group-item"><span class="small text-muted">Or you can <a class="link" href="#">sync data to Front Dashboard</a> to ensure your data is always up-to-date.</span></li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-xl-7 mb-3 mb-xl-5">
|
|
<!-- Card -->
|
|
<div class="card h-100">
|
|
<!-- Header -->
|
|
<div class="card-header card-header-content-sm-between">
|
|
<h4 class="card-header-title mb-2 mb-sm-0">Monthly expenses</h4>
|
|
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment nav-fill" id="expensesTab" role="tablist">
|
|
<li class="nav-item" data-bs-toggle="chart-bar" data-datasets="thisWeek" data-trigger="click" data-action="toggle">
|
|
<a class="nav-link active" href="javascript:;" data-bs-toggle="tab">This week</a>
|
|
</li>
|
|
<li class="nav-item" data-bs-toggle="chart-bar" data-datasets="lastWeek" data-trigger="click" data-action="toggle">
|
|
<a class="nav-link" href="javascript:;" data-bs-toggle="tab">Last week</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<div class="row mb-4">
|
|
<div class="col-sm mb-2 mb-sm-0">
|
|
<div class="d-flex align-items-center">
|
|
<span class="h1 mb-0">35%</span>
|
|
<span class="text-success ms-2">
|
|
<i class="bi-graph-up"></i> 25.3%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto align-self-sm-end">
|
|
<div class="row fs-6 text-body">
|
|
<div class="col-auto">
|
|
<span class="legend-indicator bg-primary"></span> New
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="legend-indicator"></span> Overdue
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<!-- Bar Chart -->
|
|
<div class="chartjs-custom">
|
|
<canvas id="updatingBarChart" style="height: 20rem;"
|
|
data-hs-chartjs-options='{
|
|
"type": "bar",
|
|
"data": {
|
|
"labels": ["May 1", "May 2", "May 3", "May 4", "May 5", "May 6", "May 7", "May 8", "May 9", "May 10"],
|
|
"datasets": [{
|
|
"data": [200, 300, 290, 350, 150, 350, 300, 100, 125, 220],
|
|
"backgroundColor": "@@themeAppearance.styles.colors.primary",
|
|
"hoverBackgroundColor": "@@themeAppearance.styles.colors.primary",
|
|
"borderColor": "@@themeAppearance.styles.colors.primary"
|
|
},
|
|
{
|
|
"data": [150, 230, 382, 204, 169, 290, 300, 100, 300, 225, 120],
|
|
"backgroundColor": "#e7eaf3",
|
|
"borderColor": "#e7eaf3"
|
|
}]
|
|
},
|
|
"options": {
|
|
"scales": {
|
|
"yAxes": [{
|
|
"gridLines": {
|
|
"color": "#e7eaf3",
|
|
"drawBorder": false,
|
|
"zeroLineColor": "#e7eaf3"
|
|
},
|
|
"ticks": {
|
|
"beginAtZero": true,
|
|
"stepSize": 100,
|
|
"fontSize": 12,
|
|
"fontColor": "#97a4af",
|
|
"fontFamily": "Open Sans, sans-serif",
|
|
"padding": 10,
|
|
"postfix": "$"
|
|
}
|
|
}],
|
|
"xAxes": [{
|
|
"gridLines": {
|
|
"display": false,
|
|
"drawBorder": false
|
|
},
|
|
"ticks": {
|
|
"fontSize": 12,
|
|
"fontColor": "#97a4af",
|
|
"fontFamily": "Open Sans, sans-serif",
|
|
"padding": 5
|
|
},
|
|
"categoryPercentage": 0.5,
|
|
"maxBarThickness": "10"
|
|
}]
|
|
},
|
|
"cornerRadius": 2,
|
|
"tooltips": {
|
|
"prefix": "$",
|
|
"hasIndicator": true,
|
|
"mode": "index",
|
|
"intersect": false
|
|
},
|
|
"hover": {
|
|
"mode": "nearest",
|
|
"intersect": true
|
|
}
|
|
}
|
|
}'></canvas>
|
|
</div>
|
|
<!-- End Bar Chart -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<!-- Card -->
|
|
<div class="card mb-3 mb-lg-5">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<div class="row justify-content-between align-items-center flex-grow-1">
|
|
<div class="col-md">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h4 class="card-header-title">Users</h4>
|
|
|
|
<!-- Datatable Info -->
|
|
<div id="datatableCounterInfo" style="display: none;">
|
|
<div class="d-flex align-items-center">
|
|
<span class="fs-6 me-3">
|
|
<span id="datatableCounter">0</span>
|
|
Selected
|
|
</span>
|
|
<a class="btn btn-outline-danger btn-sm" href="javascript:;">
|
|
<i class="tio-delete-outlined"></i> Delete
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Datatable Info -->
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- Filter -->
|
|
<div class="row align-items-sm-center">
|
|
<div class="col-sm-auto">
|
|
<div class="row align-items-center gx-0">
|
|
<div class="col">
|
|
<span class="text-secondary me-2">Status:</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- Select -->
|
|
<div class="tom-select-custom">
|
|
<select class="js-select js-datatable-filter form-select form-select-sm form-select-borderless" data-target-column-index="2" autocomplete="off"
|
|
data-hs-tom-select-options='{
|
|
"searchInDropdown": false,
|
|
"hideSearch": true,
|
|
"dropdownWidth": "10rem"
|
|
}'>
|
|
<option value="null" selected>All</option>
|
|
<option value="successful">Successful</option>
|
|
<option value="overdue">Overdue</option>
|
|
<option value="pending">Pending</option>
|
|
</select>
|
|
</div>
|
|
<!-- End Select -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<div class="row align-items-center gx-0">
|
|
<div class="col">
|
|
<span class="text-secondary me-2">Signed up:</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- Select -->
|
|
<div class="tom-select-custom">
|
|
<select class="js-select js-datatable-filter form-select form-select-sm form-select-borderless" data-target-column-index="5" autocomplete="off"
|
|
data-hs-tom-select-options='{
|
|
"searchInDropdown": false,
|
|
"hideSearch": true,
|
|
"dropdownWidth": "10rem"
|
|
}'>
|
|
<option value="null" selected>All</option>
|
|
<option value="1 year ago">1 year ago</option>
|
|
<option value="6 months ago">6 months ago</option>
|
|
</select>
|
|
</div>
|
|
<!-- End Select -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md">
|
|
<form>
|
|
<!-- Search -->
|
|
<div class="input-group input-group-merge input-group-flush">
|
|
<div class="input-group-prepend input-group-text">
|
|
<i class="bi-search"></i>
|
|
</div>
|
|
<input id="datatableSearch" type="search" class="form-control" placeholder="Search users" aria-label="Search users">
|
|
</div>
|
|
<!-- End Search -->
|
|
</form>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Filter -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Table -->
|
|
<div class="table-responsive datatable-custom">
|
|
<table id="datatable" class="table table-borderless table-thead-bordered table-nowrap table-align-middle card-table"
|
|
data-hs-datatables-options='{
|
|
"columnDefs": [{
|
|
"targets": [0, 1, 4],
|
|
"orderable": false
|
|
}],
|
|
"order": [],
|
|
"info": {
|
|
"totalQty": "#datatableWithPaginationInfoTotalQty"
|
|
},
|
|
"search": "#datatableSearch",
|
|
"entries": "#datatableEntries",
|
|
"pageLength": 8,
|
|
"isResponsive": false,
|
|
"isShowPaging": false,
|
|
"pagination": "datatablePagination"
|
|
}'>
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th scope="col" class="table-column-pe-0">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="datatableCheckAll">
|
|
<label class="form-check-label" for="datatableCheckAll"></label>
|
|
</div>
|
|
</th>
|
|
<th class="table-column-ps-0">Full name</th>
|
|
<th>Status</th>
|
|
<th>Type</th>
|
|
<th>Email</th>
|
|
<th>Signed up</th>
|
|
<th>User ID</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td class="table-column-pe-0">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="usersDataCheck2">
|
|
<label class="form-check-label" for="usersDataCheck2"></label>
|
|
</div>
|
|
</td>
|
|
<td class="table-column-ps-0">
|
|
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-sm avatar-circle">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img10.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="text-inherit mb-0">Amanda Harvey <i class="bi-patch-check-fill text-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Top endorsed"></i></h5>
|
|
</div>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<span class="legend-indicator bg-success"></span>Successful
|
|
</td>
|
|
<td>Unassigned</td>
|
|
<td>amanda@site.com</td>
|
|
<td>1 year ago</td>
|
|
<td>67989</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="table-column-pe-0">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="usersDataCheck3">
|
|
<label class="form-check-label" for="usersDataCheck3"></label>
|
|
</div>
|
|
</td>
|
|
<td class="table-column-ps-0">
|
|
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-sm avatar-soft-primary avatar-circle">
|
|
<span class="avatar-initials">A</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="text-inherit mb-0">Anne Richard</h5>
|
|
</div>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<span class="legend-indicator bg-success"></span>Successful
|
|
</td>
|
|
<td>Subscription</td>
|
|
<td>anne@site.com</td>
|
|
<td>6 months ago</td>
|
|
<td>67326</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="table-column-pe-0">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="usersDataCheck4">
|
|
<label class="form-check-label" for="usersDataCheck4"></label>
|
|
</div>
|
|
</td>
|
|
<td class="table-column-ps-0">
|
|
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-sm avatar-circle">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img3.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="text-inherit mb-0">David Harrison</h5>
|
|
</div>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<span class="legend-indicator bg-danger"></span>Overdue
|
|
</td>
|
|
<td>Non-subscription</td>
|
|
<td>david@site.com</td>
|
|
<td>6 months ago</td>
|
|
<td>55821</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="table-column-pe-0">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="usersDataCheck5">
|
|
<label class="form-check-label" for="usersDataCheck5"></label>
|
|
</div>
|
|
</td>
|
|
<td class="table-column-ps-0">
|
|
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-sm avatar-circle">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img5.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="text-inherit mb-0">Finch Hoot</h5>
|
|
</div>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<span class="legend-indicator bg-warning"></span>Pending
|
|
</td>
|
|
<td>Subscription</td>
|
|
<td>finch@site.com</td>
|
|
<td>1 year ago</td>
|
|
<td>85214</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="table-column-pe-0">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="usersDataCheck6">
|
|
<label class="form-check-label" for="usersDataCheck6"></label>
|
|
</div>
|
|
</td>
|
|
<td class="table-column-ps-0">
|
|
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-sm avatar-soft-dark avatar-circle">
|
|
<span class="avatar-initials">B</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="text-inherit mb-0">Bob Dean</h5>
|
|
</div>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<span class="legend-indicator bg-success"></span>Successful
|
|
</td>
|
|
<td>Subscription</td>
|
|
<td>bob@site.com</td>
|
|
<td>6 months ago</td>
|
|
<td>75470</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="table-column-pe-0">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="usersDataCheck7">
|
|
<label class="form-check-label" for="usersDataCheck7"></label>
|
|
</div>
|
|
</td>
|
|
<td class="table-column-ps-0">
|
|
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-sm avatar-circle">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img9.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="text-inherit mb-0">Ella Lauda <i class="bi-patch-check-fill text-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Top endorsed"></i></h5>
|
|
</div>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<span class="legend-indicator bg-warning"></span>Pending
|
|
</td>
|
|
<td>Subscription</td>
|
|
<td>Ella@site.com</td>
|
|
<td>1 year ago</td>
|
|
<td>37534</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="table-column-pe-0">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="usersDataCheck8">
|
|
<label class="form-check-label" for="usersDataCheck8"></label>
|
|
</div>
|
|
</td>
|
|
<td class="table-column-ps-0">
|
|
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-sm avatar-circle">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img4.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="text-inherit mb-0">Sam Kart</h5>
|
|
</div>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<span class="legend-indicator bg-success"></span>Successful
|
|
</td>
|
|
<td>Non-subscription</td>
|
|
<td>sam@site.com</td>
|
|
<td>1 year ago</td>
|
|
<td>57300</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="table-column-pe-0">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="usersDataCheck9">
|
|
<label class="form-check-label" for="usersDataCheck9"></label>
|
|
</div>
|
|
</td>
|
|
<td class="table-column-ps-0">
|
|
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-sm avatar-circle">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img6.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="text-inherit mb-0">Costa Quinn</h5>
|
|
</div>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<span class="legend-indicator bg-danger"></span>Overdue
|
|
</td>
|
|
<td>Unassigned</td>
|
|
<td>costa@site.com</td>
|
|
<td>1 year ago</td>
|
|
<td>71288</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="table-column-pe-0">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="usersDataCheck10">
|
|
<label class="form-check-label" for="usersDataCheck10"></label>
|
|
</div>
|
|
</td>
|
|
<td class="table-column-ps-0">
|
|
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-sm avatar-soft-primary avatar-circle">
|
|
<span class="avatar-initials">R</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="text-inherit mb-0">Rachel Doe</h5>
|
|
</div>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<span class="legend-indicator bg-warning"></span>Pending
|
|
</td>
|
|
<td>Unassigned</td>
|
|
<td>rachel@site.com</td>
|
|
<td>6 months ago</td>
|
|
<td>95211</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="table-column-pe-0">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="usersDataCheck11">
|
|
<label class="form-check-label" for="usersDataCheck11"></label>
|
|
</div>
|
|
</td>
|
|
<td class="table-column-ps-0">
|
|
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-sm avatar-soft-dark avatar-circle">
|
|
<span class="avatar-initials">B</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="text-inherit mb-0">Brian Halligan</h5>
|
|
</div>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<span class="legend-indicator bg-warning"></span>Pending
|
|
</td>
|
|
<td>Subscription</td>
|
|
<td>brian@site.com</td>
|
|
<td>1 year ago</td>
|
|
<td>58643</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="table-column-pe-0">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="usersDataCheck12">
|
|
<label class="form-check-label" for="usersDataCheck12"></label>
|
|
</div>
|
|
</td>
|
|
<td class="table-column-ps-0">
|
|
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-sm avatar-circle">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img8.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="text-inherit mb-0">Linda Bates</h5>
|
|
</div>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<span class="legend-indicator bg-warning"></span>Pending
|
|
</td>
|
|
<td>Subscription</td>
|
|
<td>linda@site.com</td>
|
|
<td>1 year ago</td>
|
|
<td>44414</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="table-column-pe-0">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="usersDataCheck13">
|
|
<label class="form-check-label" for="usersDataCheck13"></label>
|
|
</div>
|
|
</td>
|
|
<td class="table-column-ps-0">
|
|
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-sm avatar-soft-info avatar-circle">
|
|
<span class="avatar-initials">C</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="text-inherit mb-0">Chris Mathew <i class="bi-patch-check-fill text-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Top endorsed"></i></h5>
|
|
</div>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<span class="legend-indicator bg-success"></span>Successful
|
|
</td>
|
|
<td>Non-subscription</td>
|
|
<td>chris@site.com</td>
|
|
<td>1 year ago</td>
|
|
<td>12569</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="table-column-pe-0">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="usersDataCheck14">
|
|
<label class="form-check-label" for="usersDataCheck14"></label>
|
|
</div>
|
|
</td>
|
|
<td class="table-column-ps-0">
|
|
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-sm avatar-soft-dark avatar-circle">
|
|
<span class="avatar-initials">L</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="text-inherit mb-0">Lewis Clarke</h5>
|
|
</div>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<span class="legend-indicator bg-danger"></span>Overdue
|
|
</td>
|
|
<td>Non-subscription</td>
|
|
<td>lewis@site.com</td>
|
|
<td>1 year ago</td>
|
|
<td>54621</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="table-column-pe-0">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="usersDataCheck15">
|
|
<label class="form-check-label" for="usersDataCheck15"></label>
|
|
</div>
|
|
</td>
|
|
<td class="table-column-ps-0">
|
|
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-sm avatar-circle">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img7.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="text-inherit mb-0">Clarice Boone <i class="bi-patch-check-fill text-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Top endorsed"></i></h5>
|
|
</div>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<span class="legend-indicator bg-success"></span>Successful
|
|
</td>
|
|
<td>Non-subscription</td>
|
|
<td>clarice@site.com</td>
|
|
<td>6 months ago</td>
|
|
<td>23485</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="table-column-pe-0">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="usersDataCheck16">
|
|
<label class="form-check-label" for="usersDataCheck16"></label>
|
|
</div>
|
|
</td>
|
|
<td class="table-column-ps-0">
|
|
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-sm avatar-soft-danger avatar-circle">
|
|
<span class="avatar-initials">M</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="text-inherit mb-0">Mark Colbert</h5>
|
|
</div>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<span class="legend-indicator bg-success"></span>Successful
|
|
</td>
|
|
<td>Subscription</td>
|
|
<td>mark@site.com</td>
|
|
<td>6 months ago</td>
|
|
<td>78463</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="table-column-pe-0">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="usersDataCheck17">
|
|
<label class="form-check-label" for="usersDataCheck17"></label>
|
|
</div>
|
|
</td>
|
|
<td class="table-column-ps-0">
|
|
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-sm avatar-soft-info avatar-circle">
|
|
<span class="avatar-initials">J</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="text-inherit mb-0">Johnny Appleseed</h5>
|
|
</div>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<span class="legend-indicator bg-warning"></span>Pending
|
|
</td>
|
|
<td>Subscription</td>
|
|
<td>johnny@site.com</td>
|
|
<td>1 year ago</td>
|
|
<td>23564</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="table-column-pe-0">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="usersDataCheck18">
|
|
<label class="form-check-label" for="usersDataCheck18"></label>
|
|
</div>
|
|
</td>
|
|
<td class="table-column-ps-0">
|
|
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-sm avatar-soft-primary avatar-circle">
|
|
<span class="avatar-initials">P</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="text-inherit mb-0">Phileas Fogg</h5>
|
|
</div>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<span class="legend-indicator bg-warning"></span>Pending
|
|
</td>
|
|
<td>Subscription</td>
|
|
<td>phileas@site.com</td>
|
|
<td>6 months ago</td>
|
|
<td>39199</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- End Table -->
|
|
|
|
<!-- Footer -->
|
|
<div class="card-footer">
|
|
<!-- Pagination -->
|
|
<div class="row justify-content-center justify-content-sm-between align-items-sm-center">
|
|
<div class="col-sm mb-2 mb-sm-0">
|
|
<div class="d-flex justify-content-center justify-content-sm-start align-items-center">
|
|
<span class="me-2">Showing:</span>
|
|
|
|
<!-- Select -->
|
|
<div class="tom-select-custom">
|
|
<select id="datatableEntries" class="js-select form-select form-select-borderless w-auto" autocomplete="off"
|
|
data-hs-tom-select-options='{
|
|
"searchInDropdown": false,
|
|
"hideSearch": true
|
|
}'>
|
|
<option value="4">4</option>
|
|
<option value="6">6</option>
|
|
<option value="8" selected>8</option>
|
|
<option value="12">12</option>
|
|
</select>
|
|
</div>
|
|
<!-- End Select -->
|
|
|
|
<span class="text-secondary me-2">of</span>
|
|
|
|
<!-- Pagination Quantity -->
|
|
<span id="datatableWithPaginationInfoTotalQty"></span>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<div class="d-flex justify-content-center justify-content-sm-end">
|
|
<!-- Pagination -->
|
|
<nav id="datatablePagination" aria-label="Activity pagination"></nav>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Pagination -->
|
|
</div>
|
|
<!-- End Footer -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<div class="row">
|
|
<div class="col-xl-6 mb-3 mb-xl-0">
|
|
<!-- Card -->
|
|
<div class="card h-100">
|
|
<!-- Header -->
|
|
<div class="card-header card-header-content-between">
|
|
<h4 class="card-header-title">Transactions</h4>
|
|
|
|
<!-- Daterangepicker -->
|
|
<button id="js-daterangepicker-predefined" class="btn btn-ghost-secondary btn-sm dropdown-toggle">
|
|
<i class="bi-calendar-week"></i>
|
|
<span class="js-daterangepicker-predefined-preview ms-1"></span>
|
|
</button>
|
|
<!-- End Daterangepicker -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<!-- Chart -->
|
|
<div class="chartjs-custom mx-auto" style="height: 20rem;">
|
|
<canvas class="js-chart-datalabels"
|
|
data-hs-chartjs-options='{
|
|
"type": "bubble",
|
|
"data": {
|
|
"datasets": [
|
|
{
|
|
"label": "Label 1",
|
|
"data": [
|
|
{"x": 55, "y": 65, "r": 99}
|
|
],
|
|
"color": "#fff",
|
|
"backgroundColor": "rgba(55, 125, 255, 0.9)",
|
|
"borderColor": "transparent"
|
|
},
|
|
{
|
|
"label": "Label 2",
|
|
"data": [
|
|
{"x": 33, "y": 42, "r": 65}
|
|
],
|
|
"color": "#fff",
|
|
"backgroundColor": "rgba(100, 0, 214, 0.8)",
|
|
"borderColor": "transparent"
|
|
},
|
|
{
|
|
"label": "Label 3",
|
|
"data": [
|
|
{"x": 46, "y": 26, "r": 38}
|
|
],
|
|
"color": "#fff",
|
|
"backgroundColor": "#00c9db",
|
|
"borderColor": "transparent"
|
|
}
|
|
]
|
|
},
|
|
"options": {
|
|
"scales": {
|
|
"yAxes": [{
|
|
"gridLines": {
|
|
"display": false
|
|
},
|
|
"ticks": {
|
|
"display": false,
|
|
"max": 100,
|
|
"beginAtZero": true
|
|
}
|
|
}],
|
|
"xAxes": [{
|
|
"gridLines": {
|
|
"display": false
|
|
},
|
|
"ticks": {
|
|
"display": false,
|
|
"max": 100,
|
|
"beginAtZero": true
|
|
}
|
|
}]
|
|
},
|
|
"tooltips": false
|
|
}
|
|
}'></canvas>
|
|
</div>
|
|
<!-- End Chart -->
|
|
|
|
<div class="row justify-content-center">
|
|
<div class="col-auto">
|
|
<span class="legend-indicator bg-primary"></span> New
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="legend-indicator" style="background-color: #7000f2;"></span> Pending
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="legend-indicator bg-info"></span> Failed
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<div class="col-xl-6">
|
|
<!-- Card -->
|
|
<div class="card h-100">
|
|
<!-- Header -->
|
|
<div class="card-header card-header-content-between">
|
|
<h4 class="card-header-title">Reports overview</h4>
|
|
|
|
<!-- Dropdown -->
|
|
<div class="dropdown">
|
|
<button type="button" class="btn btn-ghost-secondary btn-icon btn-sm rounded-circle" id="reportsOverviewDropdown1" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="bi-three-dots-vertical"></i>
|
|
</button>
|
|
|
|
<div class="dropdown-menu dropdown-menu-end mt-1" aria-labelledby="reportsOverviewDropdown1">
|
|
<span class="dropdown-header">Settings</span>
|
|
|
|
<a class="dropdown-item" href="#">
|
|
<i class="bi-share-fill dropdown-item-icon"></i> Share reports
|
|
</a>
|
|
<a class="dropdown-item" href="#">
|
|
<i class="bi-download dropdown-item-icon"></i> Download
|
|
</a>
|
|
<a class="dropdown-item" href="#">
|
|
<i class="bi-alt dropdown-item-icon"></i> Connect other apps
|
|
</a>
|
|
|
|
<div class="dropdown-divider"></div>
|
|
|
|
<span class="dropdown-header">Feedback</span>
|
|
|
|
<a class="dropdown-item" href="#">
|
|
<i class="bi-chat-left-dots dropdown-item-icon"></i> Report
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Dropdown -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<span class="h1 d-block mb-4">$7,431.14 USD</span>
|
|
|
|
<!-- Progress -->
|
|
<div class="progress rounded-pill mb-2">
|
|
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-placement="top" title="Gross value"></div>
|
|
<div class="progress-bar opacity-50" role="progressbar" style="width: 33%" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-placement="top" title="Net volume from sales"></div>
|
|
<div class="progress-bar opacity-25" role="progressbar" style="width: 9%" aria-valuenow="9" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-placement="top" title="New volume from sales"></div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between mb-4">
|
|
<span>0%</span>
|
|
<span>100%</span>
|
|
</div>
|
|
<!-- End Progress -->
|
|
|
|
<!-- Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-lg table-nowrap card-table mb-0">
|
|
<tr>
|
|
<th scope="row">
|
|
<span class="legend-indicator bg-primary"></span>Gross value
|
|
</th>
|
|
<td>$3,500.71</td>
|
|
<td>
|
|
<span class="badge bg-soft-success text-success">+12.1%</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">
|
|
<span class="legend-indicator bg-primary opacity-50"></span>Net volume from sales
|
|
</th>
|
|
<td>$2,980.45</td>
|
|
<td>
|
|
<span class="badge bg-soft-warning text-warning">+6.9%</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">
|
|
<span class="legend-indicator bg-primary opacity-25"></span>New volume from sales
|
|
</th>
|
|
<td>$950.00</td>
|
|
<td>
|
|
<span class="badge bg-soft-danger text-danger">-1.5%</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">
|
|
<span class="legend-indicator"></span>Other
|
|
</th>
|
|
<td>32</td>
|
|
<td>
|
|
<span class="badge bg-soft-success text-success">1.9%</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<!-- End Table -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="row justify-content-between align-items-center mt-3">
|
|
<div class="col">
|
|
<p class="fs-6 mb-0">© Front. <span class="d-none d-sm-inline-block">2021 Htmlstream.</span></p>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="d-flex justify-content-end">
|
|
<!-- List Separator -->
|
|
<ul class="list-inline list-separator">
|
|
<li class="list-inline-item">
|
|
<a class="list-separator-link" href="#">FAQ</a>
|
|
</li>
|
|
|
|
<li class="list-inline-item">
|
|
<a class="list-separator-link" href="#">License</a>
|
|
</li>
|
|
|
|
<li class="list-inline-item">
|
|
<!-- Keyboard Shortcuts Toggle -->
|
|
<button class="btn btn-ghost-secondary btn btn-icon btn-ghost-secondary rounded-circle" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasKeyboardShortcuts" aria-controls="offcanvasKeyboardShortcuts">
|
|
<i class="bi-command"></i>
|
|
</button>
|
|
<!-- End Keyboard Shortcuts Toggle -->
|
|
</li>
|
|
</ul>
|
|
<!-- End List Separator -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Footer -->
|
|
</div>
|
|
<!-- End Sidebar Detached Content -->
|
|
</div>
|
|
<!-- End Content -->
|
|
</main>
|
|
<!-- ========== END MAIN CONTENT ========== -->
|
|
|
|
<!-- ========== SECONDARY CONTENTS ========== -->
|
|
<!-- Keyboard Shortcuts -->
|
|
@@include("@@autopath/partials/layouts-components/offcanvas-shortcuts.html")
|
|
<!-- End Keyboard Shortcuts -->
|
|
|
|
<!-- Activity -->
|
|
@@include("@@autopath/partials/layouts-components/offcanvas-activity.html")
|
|
<!-- End Activity -->
|
|
|
|
<!-- Welcome Message Modal -->
|
|
@@include("@@autopath/partials/modals/welcome-message.html")
|
|
<!-- End Welcome Message Modal -->
|
|
|
|
<!-- Create a new user Modal -->
|
|
@@include("@@autopath/partials/modals/invite-users.html")
|
|
<!-- End Create a new user Modal -->
|
|
<!-- ========== END SECONDARY CONTENTS ========== -->
|
|
|
|
<!-- JS Global Compulsory @@deleteLine:build -->
|
|
<script src="@@autopath/node_modules/jquery/dist/jquery.min.js"></script>
|
|
<script src="@@autopath/node_modules/jquery-migrate/dist/jquery-migrate.min.js"></script>
|
|
<script src="@@autopath/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- JS Implementing Plugins -->
|
|
<!-- bundlejs:vendor [@@autopath] -->
|
|
<script src="@@autopath/assets/vendor/hs-navbar-vertical-aside/dist/hs-navbar-vertical-aside.min.js"></script>
|
|
<script src="@@autopath/assets/vendor/hs-form-search/dist/hs-form-search.min.js"></script>
|
|
<script src="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
|
|
<script src="@@autopath/node_modules/chart.js/dist/Chart.min.js"></script>
|
|
<script src="@@autopath/node_modules/chartjs-chart-matrix/dist/chartjs-chart-matrix.min.js"></script>
|
|
<script src="@@autopath/node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.min.js"></script>
|
|
<script src="@@autopath/node_modules/daterangepicker/moment.min.js"></script>
|
|
<script src="@@autopath/node_modules/daterangepicker/daterangepicker.js"></script>
|
|
<script src="@@autopath/node_modules/tom-select/dist/js/tom-select.complete.min.js"></script>
|
|
<script src="@@autopath/node_modules/clipboard/dist/clipboard.min.js"></script>
|
|
<script src="@@autopath/node_modules/datatables/media/js/jquery.dataTables.min.js"></script>
|
|
<script src="@@autopath/assets/vendor/datatables.net.extensions/select/select.min.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
<!-- bundlejs:theme [@@autopath] -->
|
|
<script src="@@autopath/assets/js/hs.core.js"></script>
|
|
<script src="@@autopath/assets/js/hs.bs-dropdown.js"></script>
|
|
<script src="@@autopath/assets/js/hs.chartjs.js"></script>
|
|
<script src="@@autopath/assets/js/hs.chartjs-matrix.js"></script>
|
|
<script src="@@autopath/assets/js/hs.tom-select.js"></script>
|
|
<script src="@@autopath/assets/js/hs.clipboard.js"></script>
|
|
<script src="@@autopath/assets/js/hs.datatables.js"></script>
|
|
<script src="@@autopath/assets/js/hs.theme-appearance-charts.js"></script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
$(document).on('ready', function () {
|
|
// INITIALIZATION OF DATERANGEPICKER
|
|
// =======================================================
|
|
$('.js-daterangepicker').daterangepicker();
|
|
|
|
$('.js-daterangepicker-times').daterangepicker({
|
|
timePicker: true,
|
|
startDate: moment().startOf('hour'),
|
|
endDate: moment().startOf('hour').add(32, 'hour'),
|
|
locale: {
|
|
format: 'M/DD hh:mm A'
|
|
}
|
|
});
|
|
|
|
var start = moment();
|
|
var end = moment();
|
|
|
|
function cb(start, end) {
|
|
$('#js-daterangepicker-predefined .js-daterangepicker-predefined-preview').html(start.format('MMM D') + ' - ' + end.format('MMM D, YYYY'));
|
|
}
|
|
|
|
$('#js-daterangepicker-predefined').daterangepicker({
|
|
startDate: start,
|
|
endDate: end,
|
|
ranges: {
|
|
'Today': [moment(), moment()],
|
|
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
|
|
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
|
|
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
|
|
'This Month': [moment().startOf('month'), moment().endOf('month')],
|
|
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
|
|
}
|
|
}, cb);
|
|
|
|
cb(start, end);
|
|
});
|
|
|
|
|
|
// INITIALIZATION OF NAVBAR VERTICAL ASIDE
|
|
// =======================================================
|
|
new HSSideNav('.js-navbar-vertical-aside').init()
|
|
|
|
|
|
// INITIALIZATION OF DATATABLES
|
|
// =======================================================
|
|
HSCore.components.HSDatatables.init($('#datatable'), {
|
|
select: {
|
|
style: 'multi',
|
|
selector: 'td:first-child input[type="checkbox"]',
|
|
classMap: {
|
|
checkAll: '#datatableCheckAll',
|
|
counter: '#datatableCounter',
|
|
counterInfo: '#datatableCounterInfo'
|
|
}
|
|
},
|
|
language: {
|
|
zeroRecords: `<div class="text-center p-4">
|
|
<img class="mb-3" src="@@autopath/assets/svg/illustrations/oc-error.svg" alt="Image Description" style="width: 10rem;" data-hs-theme-appearance="default">
|
|
<img class="mb-3" src="@@autopath/assets/svg/illustrations-light/oc-error.svg" alt="Image Description" style="width: 10rem;" data-hs-theme-appearance="dark">
|
|
<p class="mb-0">No data to show</p>
|
|
</div>`
|
|
}
|
|
});
|
|
|
|
const datatable = HSCore.components.HSDatatables.getItem(0)
|
|
|
|
$('.js-datatable-filter').on('change', function() {
|
|
var $this = $(this),
|
|
elVal = $this.val(),
|
|
targetColumnIndex = $this.data('target-column-index');
|
|
|
|
datatable.column(targetColumnIndex).search(elVal).draw();
|
|
});
|
|
|
|
$('#datatableSearch').on('mouseup', function (e) {
|
|
var $input = $(this),
|
|
oldValue = $input.val();
|
|
|
|
if (oldValue == "") return;
|
|
|
|
setTimeout(function(){
|
|
var newValue = $input.val();
|
|
|
|
if (newValue == ""){
|
|
// Gotcha
|
|
datatable.search('').draw();
|
|
}
|
|
}, 1);
|
|
});
|
|
</script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
window.onload = function () {
|
|
// INITIALIZATION OF MEGA MENU
|
|
// =======================================================
|
|
new HSMegaMenu('.js-mega-menu', {
|
|
desktop: {
|
|
position: 'left'
|
|
}
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF FORM SEARCH
|
|
// =======================================================
|
|
const HSFormSearchInstance = new HSFormSearch('.js-form-search')
|
|
HSFormSearchInstance.getItem(1).on('close', function (el) {
|
|
el.classList.remove('top-0')
|
|
})
|
|
|
|
document.querySelector('.js-form-search-mobile-toggle').addEventListener('click', e => {
|
|
let dataOptions = JSON.parse(e.currentTarget.getAttribute('data-hs-form-search-options')),
|
|
$menu = document.querySelector(dataOptions.dropMenuElement)
|
|
|
|
$menu.classList.add('top-0')
|
|
$menu.style.left = 0
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF BOOTSTRAP DROPDOWN
|
|
// =======================================================
|
|
HSBsDropdown.init()
|
|
|
|
|
|
// INITIALIZATION OF CHARTJS
|
|
// =======================================================
|
|
Chart.plugins.unregister(ChartDataLabels);
|
|
|
|
HSCore.components.HSChartJS.init('.js-chart')
|
|
|
|
HSCore.components.HSChartJS.init('#updatingBarChart')
|
|
const updatingBarChart = HSCore.components.HSChartJS.getItem('updatingBarChart')
|
|
|
|
// Call when tab is clicked
|
|
document.querySelectorAll('[data-bs-toggle="chart-bar"]').forEach(item => {
|
|
item.addEventListener('click', e => {
|
|
let keyDataset = e.currentTarget.getAttribute('data-datasets')
|
|
const styles = HSCore.components.HSChartJS.getTheme('updatingBarChart', HSThemeAppearance.getAppearance())
|
|
|
|
if (keyDataset === 'lastWeek') {
|
|
updatingBarChart.data.labels = ["Apr 22", "Apr 23", "Apr 24", "Apr 25", "Apr 26", "Apr 27", "Apr 28", "Apr 29", "Apr 30", "Apr 31"];
|
|
updatingBarChart.data.datasets = [
|
|
{
|
|
"data": [120, 250, 300, 200, 300, 290, 350, 100, 125, 320],
|
|
"backgroundColor": styles.data.datasets[0].backgroundColor,
|
|
"hoverBackgroundColor": styles.data.datasets[0].hoverBackgroundColor,
|
|
"borderColor": styles.data.datasets[0].borderColor
|
|
},
|
|
{
|
|
"data": [250, 130, 322, 144, 129, 300, 260, 120, 260, 245, 110],
|
|
"backgroundColor": styles.data.datasets[1].backgroundColor,
|
|
"borderColor": styles.data.datasets[1].borderColor
|
|
}
|
|
];
|
|
updatingBarChart.update();
|
|
} else {
|
|
updatingBarChart.data.labels = ["May 1", "May 2", "May 3", "May 4", "May 5", "May 6", "May 7", "May 8", "May 9", "May 10"];
|
|
updatingBarChart.data.datasets = [
|
|
{
|
|
"data": [200, 300, 290, 350, 150, 350, 300, 100, 125, 220],
|
|
"backgroundColor": styles.data.datasets[0].backgroundColor,
|
|
"hoverBackgroundColor": styles.data.datasets[0].hoverBackgroundColor,
|
|
"borderColor": styles.data.datasets[0].borderColor
|
|
},
|
|
{
|
|
"data": [150, 230, 382, 204, 169, 290, 300, 100, 300, 225, 120],
|
|
"backgroundColor": styles.data.datasets[1].backgroundColor,
|
|
"borderColor": styles.data.datasets[1].borderColor
|
|
}
|
|
]
|
|
updatingBarChart.update();
|
|
}
|
|
})
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF CHARTJS
|
|
// =======================================================
|
|
HSCore.components.HSChartJS.init('.js-chart-datalabels', {
|
|
plugins: [ChartDataLabels],
|
|
options: {
|
|
plugins: {
|
|
datalabels: {
|
|
anchor: function (context) {
|
|
var value = context.dataset.data[context.dataIndex];
|
|
return value.r < 20 ? 'end' : 'center';
|
|
},
|
|
align: function (context) {
|
|
var value = context.dataset.data[context.dataIndex];
|
|
return value.r < 20 ? 'end' : 'center';
|
|
},
|
|
color: function (context) {
|
|
var value = context.dataset.data[context.dataIndex];
|
|
return value.r < 20 ? context.dataset.backgroundColor : context.dataset.color;
|
|
},
|
|
font: function (context) {
|
|
var value = context.dataset.data[context.dataIndex],
|
|
fontSize = 25;
|
|
|
|
if (value.r > 50) {
|
|
fontSize = 35;
|
|
}
|
|
|
|
if (value.r > 70) {
|
|
fontSize = 55;
|
|
}
|
|
|
|
return {
|
|
weight: 'lighter',
|
|
size: fontSize
|
|
};
|
|
},
|
|
offset: 2,
|
|
padding: 0
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
// INITIALIZATION OF SELECT
|
|
// =======================================================
|
|
HSCore.components.HSTomSelect.init('.js-select')
|
|
}
|
|
})()
|
|
</script>
|
|
|
|
<!-- Style Switcher JS -->
|
|
@@if(layoutBuilder.extend.switcherSupport === true) {
|
|
@@include("@@autopath/partials/layouts-components/darkmode-switcher-js.html")
|
|
}
|
|
<!-- End Style Switcher JS -->
|
|
</body>
|
|
</html>
|