Files
front.admin/src/ecommerce-referrals.html
2022-04-12 07:26:41 +02:00

1596 lines
72 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>Referrals | Front - Admin &amp; 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">
@@if(layoutBuilder.header.layoutMode !== 'default') {
<link rel="stylesheet" href="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
}
<link rel="stylesheet" href="@@autopath/node_modules/tom-select/dist/css/tom-select.bootstrap5.css">
<link rel="stylesheet" href="@@autopath/node_modules/chart.js/dist/Chart.min.css">
<link rel="stylesheet" href="@@autopath/node_modules/daterangepicker/daterangepicker.css">
<!-- CSS Front Template -->
<!-- bundlecss:theme [@@autopath] @@vars.version -->
@@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="@@if(layoutBuilder.header.layoutMode === 'default'){has-navbar-vertical-aside navbar-vertical-aside-show-xl} @@if(layoutBuilder.sidebarLayout === 'compact'){navbar-vertical-aside-compact-mode navbar-vertical-aside-compact-mini-mode} @@if(layoutBuilder.sidebarLayout === 'mini'){navbar-vertical-aside-mini-mode} footer-offset">
@@if(layoutBuilder.extend.switcherSupport === true) {
<script src="@@autopath/assets/js/hs.theme-appearance.js"></script>
}
@@if(layoutBuilder.sidebarLayout !== 'compact' && layoutBuilder.sidebarLayout !== 'mini') {
<script src="@@autopath/assets/vendor/hs-navbar-vertical-aside/dist/hs-navbar-vertical-aside-mini-cache.js"></script>
}
<!-- ========== HEADER ========== -->
@@if(layoutBuilder.header.layoutMode === 'default') {
@@include("@@autopath/partials/navbar/main.html")
}
@@if(layoutBuilder.header.layoutMode === 'single') {
@@if(layoutBuilder.header.containerMode === 'container') {
@@include("@@autopath/partials/navbar/main-container.html")
}
}
@@if(layoutBuilder.header.layoutMode === 'double') {
@@if(layoutBuilder.header.containerMode === 'container') {
@@include("@@autopath/partials/navbar/double-line-container.html")
}
}
<!-- ========== END HEADER ========== -->
<!-- ========== MAIN CONTENT ========== -->
<!-- Navbar Vertical -->
@@if(layoutBuilder.sidebarLayout !== 'compact' && layoutBuilder.header.layoutMode === 'default') {
@@include("@@autopath/partials/sidebar/main.html", {
"category": "ecommerce",
"subcategory": "",
"link": "ecommerce-referrals.html"
})
}
@@if(layoutBuilder.sidebarLayout === 'compact' && layoutBuilder.header.layoutMode === 'default') {
@@include("@@autopath/partials/sidebar/compact.html", {
"category": "ecommerce",
"subcategory": "",
"link": "ecommerce-referrals.html"
})
}
<main id="content" role="main" class="main">
<!-- Content -->
<div class="content @@layoutBuilder.header.containerMode">
<!-- Page Header -->
<div class="page-header">
<div class="row align-items-center">
<div class="col-sm mb-2 mb-sm-0">
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-no-gutter">
<li class="breadcrumb-item"><a class="breadcrumb-link" href="javascript:;">Pages</a></li>
<li class="breadcrumb-item active" aria-current="page">Referrals</li>
</ol>
</nav>
<h1 class="page-header-title">Referrals</h1>
</div>
<!-- End Col -->
<div class="col-sm-6 col-md-5 col-lg-4">
<small class="text-cap">Your referral code:</small>
<!-- Input Group -->
<div class="input-group">
<input id="referralCode" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<div class="input-group-append">
<a class="js-clipboard btn btn-white" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="right" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralCode",
"classChangeTarget": "#referralCodeIcon",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralCodeIcon" class="bi-clipboard"></i>
</a>
</div>
</div>
<!-- End Input Group -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Page Header -->
<!-- Stats -->
<div class="row col-lg-divider">
<div class="col-lg-4">
<!-- Card -->
<div class="text-center">
<img class="avatar avatar-xl avatar-4x3 mb-4" src="@@autopath/assets/svg/illustrations/oc-megaphone.svg" alt="Image Description" data-hs-theme-appearance="default" style="min-height: 6rem;">
<img class="avatar avatar-xl avatar-4x3 mb-4" src="@@autopath/assets/svg/illustrations-light/oc-megaphone.svg" alt="Image Description" data-hs-theme-appearance="dark" style="min-height: 6rem;">
<span class="text-cap text-body">Number of referrals</span>
<span class="d-block display-4 text-dark mb-2">150</span>
<div class="row col-divider">
<div class="col text-end">
<span class="d-block fw-semi-bold text-success">
<i class="bi-graph-up"></i> 12%
</span>
<span class="d-block">change</span>
</div>
<!-- End Col -->
<div class="col text-start">
<span class="d-block fw-semi-bold text-dark">25</span>
<span class="d-block">last week</span>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Card -->
</div>
<div class="col-lg-4">
<!-- Card -->
<div class="text-center">
<img class="avatar avatar-xl avatar-4x3 mb-4" src="@@autopath/assets/svg/illustrations/oc-money-profits.svg" alt="Image Description" data-hs-theme-appearance="default" style="min-height: 6rem;">
<img class="avatar avatar-xl avatar-4x3 mb-4" src="@@autopath/assets/svg/illustrations-light/oc-money-profits.svg" alt="Image Description" data-hs-theme-appearance="dark" style="min-height: 6rem;">
<span class="text-cap text-body">Amount earned</span>
<span class="d-block display-4 text-dark mb-2">$7,253.00</span>
<div class="row col-divider">
<div class="col text-end">
<span class="d-block fw-semi-bold text-success">
<i class="bi-graph-up"></i> 5.6%
</span>
<span class="d-block">change</span>
</div>
<!-- End Col -->
<div class="col text-start">
<span class="d-block fw-semi-bold text-dark">$582.00</span>
<span class="d-block">last week</span>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Card -->
</div>
<div class="col-lg-4">
<!-- Card -->
<div class="text-center">
<img class="avatar avatar-xl avatar-4x3 mb-4" src="@@autopath/assets/svg/illustrations/oc-growing.svg" alt="Image Description" data-hs-theme-appearance="default" style="min-height: 6rem;">
<img class="avatar avatar-xl avatar-4x3 mb-4" src="@@autopath/assets/svg/illustrations-light/oc-growing.svg" alt="Image Description" data-hs-theme-appearance="dark" style="min-height: 6rem;">
<span class="text-cap text-body">Referral completed</span>
<span class="d-block display-4 text-dark mb-2">25</span>
<div class="row col-divider">
<div class="col text-end">
<span class="d-block fw-semi-bold text-danger">
<i class="bi-graph-down"></i> 2.3%
</span>
<span class="d-block">change</span>
</div>
<!-- End Col -->
<div class="col text-start">
<span class="d-block fw-semi-bold text-dark">7</span>
<span class="d-block">last week</span>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Card -->
</div>
</div>
<!-- End Stats -->
<div class="my-5">
<p class="text-muted"><i class="bi-exclamation-octagon"></i> Last referral: August 25, 2020.</p>
</div>
<div class="row">
<div class="col-lg-8 mb-3 mb-lg-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">Total sales earnings</h4>
<!-- Daterangepicker -->
<button id="js-daterangepicker-predefined" class="btn btn-ghost-secondary btn-sm dropdown-toggle">
<i class="tio-date-range"></i>
<span class="js-daterangepicker-predefined-preview ms-1"></span>
</button>
<!-- End Daterangepicker -->
</div>
<!-- End Header -->
<!-- Body -->
<div class="card-body">
<!-- Bar Chart -->
<div class="chartjs-custom">
<canvas id="referrals" class="js-chart" style="height: 15rem;"
data-hs-chartjs-options='{
"type": "bar",
"data": {
"labels": ["Jan", "Feb", "March", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec"],
"datasets": [{
"data": [200, 300, 290, 350, 150, 350, 300, 100, 125, 220, 390, 220],
"backgroundColor": "@@themeAppearance.styles.colors.primary",
"hoverBackgroundColor": "@@themeAppearance.styles.colors.primary",
"borderColor": "@@themeAppearance.styles.colors.primary"
}]
},
"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>
<div class="col-lg-4 mb-3 mb-lg-5">
<!-- Card -->
<div class="card h-100">
<!-- Header -->
<div class="card-header card-header-content-between">
<h4 class="card-header-title">Your top countries <i class="bi-patch-check-fill text-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="This report is based on 100% of sessions."></i></h4>
<a class="btn btn-ghost-secondary btn-sm" href="#">View all</a>
</div>
<!-- End Header -->
<!-- Body -->
<div class="card-body">
<div class="list-group list-group-flush list-group-no-gutters">
<!-- Item -->
<div class="list-group-item">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-xss avatar-circle" src="@@autopath/node_modules/flag-icon-css/flags/1x1/us.svg" alt="Flag">
</div>
<div class="flex-grow-1 ms-2">
<div class="row align-items-center">
<div class="col">
<span class="d-block">United States</span>
</div>
<!-- End Col -->
<div class="col-auto">
<h5>$4,302.00</h5>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="list-group-item">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-xss avatar-circle" src="@@autopath/node_modules/flag-icon-css/flags/1x1/de.svg" alt="Flag">
</div>
<div class="flex-grow-1 ms-2">
<div class="row align-items-center">
<div class="col">
<span class="d-block">Germany</span>
</div>
<!-- End Col -->
<div class="col-auto">
<h5>$1,951.00</h5>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="list-group-item">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-xss avatar-circle" src="@@autopath/node_modules/flag-icon-css/flags/1x1/fr.svg" alt="Flag">
</div>
<div class="flex-grow-1 ms-2">
<div class="row align-items-center">
<div class="col">
<span class="d-block">France</span>
</div>
<!-- End Col -->
<div class="col-auto">
<h5>$592.00</h5>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="list-group-item">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-xss avatar-circle" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ca.svg" alt="Flag">
</div>
<div class="flex-grow-1 ms-2">
<div class="row align-items-center">
<div class="col">
<span class="d-block">Canada</span>
</div>
<!-- End Col -->
<div class="col-auto">
<h5>$219.00</h5>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="list-group-item">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-xss avatar-circle" src="@@autopath/node_modules/flag-icon-css/flags/1x1/it.svg" alt="Flag">
</div>
<div class="flex-grow-1 ms-2">
<div class="row align-items-center">
<div class="col">
<span class="d-block">Italy</span>
</div>
<!-- End Col -->
<div class="col-auto">
<h5>$191.00</h5>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</div>
<!-- End Item -->
</div>
</div>
<!-- End Body -->
</div>
<!-- End Card -->
</div>
</div>
<!-- End Row -->
<!-- Card -->
<div class="card">
<!-- Header -->
<div class="card-header">
<h4 class="card-header-title">Referral users</h4>
</div>
<!-- End Header -->
<!-- Table -->
<div class="table-responsive datatable-custom">
<table id="datatable" class="table table-lg table-borderless table-thead-bordered table-nowrap table-align-middle card-table"
data-hs-datatables-options='{
"order": [],
"info": {
"totalQty": "#datatableWithPaginationInfoTotalQty"
},
"entries": "#datatableEntries",
"pageLength": 15,
"isResponsive": false,
"isShowPaging": false,
"pagination": "datatablePagination"
}'>
<thead class="thead-light">
<tr>
<th>Referrers</th>
<th>Referred ID</th>
<th>URL</th>
<th>Visits</th>
<th>Total earned</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
<div class="flex-shrink-0">
<div class="avatar 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">
<span class="d-block h5 text-inherit mb-0">Amanda Harvey <i class="bi-question-circle text-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Top endorsed"></i></span>
<span class="d-block fs-6 text-body">amanda@site.com</span>
</div>
</a>
</td>
<td>24125</td>
<td>
<div class="input-group input-group-sm input-group-merge table-input-group">
<input id="referralsKeyCode1" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralsKeyCode1",
"classChangeTarget": "#referralsKeyCodeIcon1",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralsKeyCodeIcon1" class="bi-clipboard"></i>
</a>
</div>
</td>
<td>556</td>
<td>$160.00</td>
</tr>
<tr>
<td>
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-soft-primary avatar-circle">
<span class="avatar-initials">A</span>
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit mb-0">Anne Richard</span>
<span class="d-block fs-6 text-body">anne@site.com</span>
</div>
</a>
</td>
<td>84521</td>
<td>
<div class="input-group input-group-sm input-group-merge table-input-group">
<input id="referralsKeyCode2" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralsKeyCode2",
"classChangeTarget": "#referralsKeyCodeIcon2",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralsKeyCodeIcon2" class="bi-clipboard"></i>
</a>
</div>
</td>
<td>324</td>
<td>$110.00</td>
</tr>
<tr>
<td>
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
<div class="flex-shrink-0">
<div class="avatar 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">
<span class="d-block h5 text-inherit mb-0">David Harrison</span>
<span class="d-block fs-6 text-body">david@site.com</span>
</div>
</a>
</td>
<td>09341</td>
<td>
<div class="input-group input-group-sm input-group-merge table-input-group">
<input id="referralsKeyCode3" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralsKeyCode3",
"classChangeTarget": "#referralsKeyCodeIcon3",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralsKeyCodeIcon3" class="bi-clipboard"></i>
</a>
</div>
</td>
<td>301</td>
<td>$100.00</td>
</tr>
<tr>
<td>
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
<div class="flex-shrink-0">
<div class="avatar 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">
<span class="d-block h5 text-inherit mb-0">Finch Hoot</span>
<span class="d-block fs-6 text-body">finch@site.com</span>
</div>
</a>
</td>
<td>09637</td>
<td>
<div class="input-group input-group-sm input-group-merge table-input-group">
<input id="referralsKeyCode4" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralsKeyCode4",
"classChangeTarget": "#referralsKeyCodeIcon4",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralsKeyCodeIcon4" class="bi-clipboard"></i>
</a>
</div>
</td>
<td>292</td>
<td>$90.00</td>
</tr>
<tr>
<td>
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-soft-dark avatar-circle">
<span class="avatar-initials">B</span>
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit mb-0">Bob Dean</span>
<span class="d-block fs-6 text-body">bob@site.com</span>
</div>
</a>
</td>
<td>93231</td>
<td>
<div class="input-group input-group-sm input-group-merge table-input-group">
<input id="referralsKeyCode5" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralsKeyCode5",
"classChangeTarget": "#referralsKeyCodeIcon5",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralsKeyCodeIcon5" class="bi-clipboard"></i>
</a>
</div>
</td>
<td>258</td>
<td>$70.00</td>
</tr>
<tr>
<td>
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
<div class="flex-shrink-0">
<div class="avatar 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">
<span class="d-block h5 text-inherit mb-0">Ella Lauda <i class="bi-question-circle text-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Top endorsed"></i></span>
<span class="d-block fs-6 text-body">ella@site.com</span>
</div>
</a>
</td>
<td>41512</td>
<td>
<div class="input-group input-group-sm input-group-merge table-input-group">
<input id="referralsKeyCode6" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralsKeyCode6",
"classChangeTarget": "#referralsKeyCodeIcon6",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralsKeyCodeIcon6" class="bi-clipboard"></i>
</a>
</div>
</td>
<td>129</td>
<td>$50.00</td>
</tr>
<tr>
<td>
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-soft-info avatar-circle">
<span class="avatar-initials">L</span>
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit mb-0">Lori Hunter</span>
<span class="d-block fs-6 text-body">hunter@site.com</span>
</div>
</a>
</td>
<td>62312</td>
<td>
<div class="input-group input-group-sm input-group-merge table-input-group">
<input id="referralsKeyCode7" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralsKeyCode7",
"classChangeTarget": "#referralsKeyCodeIcon7",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralsKeyCodeIcon7" class="bi-clipboard"></i>
</a>
</div>
</td>
<td>103</td>
<td>$50.00</td>
</tr>
<tr>
<td>
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-soft-primary avatar-circle">
<span class="avatar-initials">M</span>
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit mb-0">Mark Colbert</span>
<span class="d-block fs-6 text-body">mark@site.com</span>
</div>
</a>
</td>
<td>46735</td>
<td>
<div class="input-group input-group-sm input-group-merge table-input-group">
<input id="referralsKeyCode8" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralsKeyCode8",
"classChangeTarget": "#referralsKeyCodeIcon8",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralsKeyCodeIcon8" class="bi-clipboard"></i>
</a>
</div>
</td>
<td>100</td>
<td>$50.00</td>
</tr>
<tr>
<td>
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
<div class="flex-shrink-0">
<div class="avatar 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">
<span class="d-block h5 text-inherit mb-0">Costa Quinn</span>
<span class="d-block fs-6 text-body">costa@site.com</span>
</div>
</a>
</td>
<td>51726</td>
<td>
<div class="input-group input-group-sm input-group-merge table-input-group">
<input id="referralsKeyCode9" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralsKeyCode9",
"classChangeTarget": "#referralsKeyCodeIcon9",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralsKeyCodeIcon9" class="bi-clipboard"></i>
</a>
</div>
</td>
<td>99</td>
<td>$40.00</td>
</tr>
<tr>
<td>
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-soft-danger avatar-circle">
<span class="avatar-initials">R</span>
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit mb-0">Rachel Doe <i class="bi-question-circle text-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Top endorsed"></i></span>
<span class="d-block fs-6 text-body">rachel@site.com</span>
</div>
</a>
</td>
<td>89232</td>
<td>
<div class="input-group input-group-sm input-group-merge table-input-group">
<input id="referralsKeyCode10" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralsKeyCode10",
"classChangeTarget": "#referralsKeyCodeIcon10",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralsKeyCodeIcon10" class="bi-clipboard"></i>
</a>
</div>
</td>
<td>75</td>
<td>$30.00</td>
</tr>
<tr>
<td>
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
<div class="flex-shrink-0">
<div class="avatar 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">
<span class="d-block h5 text-inherit mb-0">Linda Bates</span>
<span class="d-block fs-6 text-body">linda@site.com</span>
</div>
</a>
</td>
<td>98434</td>
<td>
<div class="input-group input-group-sm input-group-merge table-input-group">
<input id="referralsKeyCode11" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralsKeyCode11",
"classChangeTarget": "#referralsKeyCodeIcon11",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralsKeyCodeIcon11" class="bi-clipboard"></i>
</a>
</div>
</td>
<td>52</td>
<td>$20.00</td>
</tr>
<tr>
<td>
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-soft-info avatar-circle">
<span class="avatar-initials">B</span>
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit mb-0">Brian Halligan</span>
<span class="d-block fs-6 text-body">brian@site.com</span>
</div>
</a>
</td>
<td>89340</td>
<td>
<div class="input-group input-group-sm input-group-merge table-input-group">
<input id="referralsKeyCode12" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralsKeyCode12",
"classChangeTarget": "#referralsKeyCodeIcon12",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralsKeyCodeIcon12" class="bi-clipboard"></i>
</a>
</div>
</td>
<td>39</td>
<td>$20.00</td>
</tr>
<tr>
<td>
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-soft-dark avatar-circle">
<span class="avatar-initials">C</span>
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit mb-0">Chris Mathew</span>
<span class="d-block fs-6 text-body">chris@site.com</span>
</div>
</a>
</td>
<td>59234</td>
<td>
<div class="input-group input-group-sm input-group-merge table-input-group">
<input id="referralsKeyCode13" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralsKeyCode13",
"classChangeTarget": "#referralsKeyCodeIcon13",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralsKeyCodeIcon13" class="bi-clipboard"></i>
</a>
</div>
</td>
<td>39</td>
<td>$20.00</td>
</tr>
<tr>
<td>
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
<div class="flex-shrink-0">
<div class="avatar 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">
<span class="d-block h5 text-inherit mb-0">Clarice Boone <i class="bi-question-circle text-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Top endorsed"></i></span>
<span class="d-block fs-6 text-body">clarice@site.com</span>
</div>
</a>
</td>
<td>96545</td>
<td>
<div class="input-group input-group-sm input-group-merge table-input-group">
<input id="referralsKeyCode14" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralsKeyCode14",
"classChangeTarget": "#referralsKeyCodeIcon14",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralsKeyCodeIcon14" class="bi-clipboard"></i>
</a>
</div>
</td>
<td>38</td>
<td>$10.00</td>
</tr>
<tr>
<td>
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-soft-dark avatar-circle">
<span class="avatar-initials">L</span>
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit mb-0">Lewis Clarke</span>
<span class="d-block fs-6 text-body">lewis@site.com</span>
</div>
</a>
</td>
<td>76322</td>
<td>
<div class="input-group input-group-sm input-group-merge table-input-group">
<input id="referralsKeyCode15" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralsKeyCode15",
"classChangeTarget": "#referralsKeyCodeIcon15",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralsKeyCodeIcon15" class="bi-clipboard"></i>
</a>
</div>
</td>
<td>27</td>
<td>$10.00</td>
</tr>
<tr>
<td>
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
<div class="flex-shrink-0">
<div class="avatar 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">
<span class="d-block h5 text-inherit mb-0">Sam Kart</span>
<span class="d-block fs-6 text-body">sam@site.com</span>
</div>
</a>
</td>
<td>45444</td>
<td>
<div class="input-group input-group-sm input-group-merge table-input-group">
<input id="referralsKeyCode16" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralsKeyCode16",
"classChangeTarget": "#referralsKeyCodeIcon16",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralsKeyCodeIcon16" class="bi-clipboard"></i>
</a>
</div>
</td>
<td>21</td>
<td>$10.00</td>
</tr>
<tr>
<td>
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-soft-danger avatar-circle">
<span class="avatar-initials">J</span>
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit mb-0">Johnny Appleseed</span>
<span class="d-block fs-6 text-body">johnny@site.com</span>
</div>
</a>
</td>
<td>15512</td>
<td>
<div class="input-group input-group-sm input-group-merge table-input-group">
<input id="referralsKeyCode17" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralsKeyCode17",
"classChangeTarget": "#referralsKeyCodeIcon17",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralsKeyCodeIcon17" class="bi-clipboard"></i>
</a>
</div>
</td>
<td>15</td>
<td>$10.00</td>
</tr>
<tr>
<td>
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-soft-danger avatar-circle">
<span class="avatar-initials">P</span>
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit mb-0">Phileas Fogg</span>
<span class="d-block fs-6 text-body">phileas@site.com</span>
</div>
</a>
</td>
<td>12093</td>
<td>
<div class="input-group input-group-sm input-group-merge table-input-group">
<input id="referralsKeyCode18" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralsKeyCode18",
"classChangeTarget": "#referralsKeyCodeIcon18",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralsKeyCodeIcon18" class="bi-clipboard"></i>
</a>
</div>
</td>
<td>12</td>
<td>$10.00</td>
</tr>
<tr>
<td>
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
<div class="flex-shrink-0">
<div class="avatar 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">
<span class="d-block h5 text-inherit mb-0">Mark Williams <i class="bi-question-circle text-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Top endorsed"></i></span>
<span class="d-block fs-6 text-body">mark@site.com</span>
</div>
</a>
</td>
<td>25639</td>
<td>
<div class="input-group input-group-sm input-group-merge table-input-group">
<input id="referralsKeyCode19" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralsKeyCode19",
"classChangeTarget": "#referralsKeyCodeIcon19",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralsKeyCodeIcon19" class="bi-clipboard"></i>
</a>
</div>
</td>
<td>9</td>
<td>$10.00</td>
</tr>
<tr>
<td>
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-soft-dark avatar-circle">
<span class="avatar-initials">T</span>
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit mb-0">Timothy Silva</span>
<span class="d-block fs-6 text-body">timothy@site.com</span>
</div>
</a>
</td>
<td>89314</td>
<td>
<div class="input-group input-group-sm input-group-merge table-input-group">
<input id="referralsKeyCode20" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralsKeyCode20",
"classChangeTarget": "#referralsKeyCodeIcon20",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralsKeyCodeIcon20" class="bi-clipboard"></i>
</a>
</div>
</td>
<td>3</td>
<td>$10.00</td>
</tr>
<tr>
<td>
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-soft-dark avatar-circle">
<span class="avatar-initials">G</span>
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit mb-0">Gary Bishop <i class="bi-question-circle text-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Top endorsed"></i></span>
<span class="d-block fs-6 text-body">gary@site.com</span>
</div>
</a>
</td>
<td>81724</td>
<td>
<div class="input-group input-group-sm input-group-merge table-input-group">
<input id="referralsKeyCode21" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralsKeyCode21",
"classChangeTarget": "#referralsKeyCodeIcon21",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralsKeyCodeIcon21" class="bi-clipboard"></i>
</a>
</div>
</td>
<td>3</td>
<td>$10.00</td>
</tr>
<tr>
<td>
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-soft-dark avatar-circle">
<span class="avatar-initials">Y</span>
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit mb-0">Yorker Scogings</span>
<span class="d-block fs-6 text-body">yorker@site.com</span>
</div>
</a>
</td>
<td>15033</td>
<td>
<div class="input-group input-group-sm input-group-merge table-input-group">
<input id="referralsKeyCode22" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralsKeyCode22",
"classChangeTarget": "#referralsKeyCodeIcon22",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralsKeyCodeIcon22" class="bi-clipboard"></i>
</a>
</div>
</td>
<td>2</td>
<td>$10.00</td>
</tr>
<tr>
<td>
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-soft-info avatar-circle">
<span class="avatar-initials">F</span>
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit mb-0">Frank Phillips</span>
<span class="d-block fs-6 text-body">frank@site.com</span>
</div>
</a>
</td>
<td>32503</td>
<td>
<div class="input-group input-group-sm input-group-merge table-input-group">
<input id="referralsKeyCode23" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralsKeyCode23",
"classChangeTarget": "#referralsKeyCodeIcon23",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralsKeyCodeIcon23" class="bi-clipboard"></i>
</a>
</div>
</td>
<td>2</td>
<td>$0.00</td>
</tr>
<tr>
<td>
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-soft-primary avatar-circle">
<span class="avatar-initials">E</span>
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit mb-0">Elizabeth Carter</span>
<span class="d-block fs-6 text-body">eliz@site.com</span>
</div>
</a>
</td>
<td>856734</td>
<td>
<div class="input-group input-group-sm input-group-merge table-input-group">
<input id="referralsKeyCode24" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralsKeyCode24",
"classChangeTarget": "#referralsKeyCodeIcon24",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralsKeyCodeIcon24" class="bi-clipboard"></i>
</a>
</div>
</td>
<td>1</td>
<td>$0.00</td>
</tr>
<tr>
<td>
<a class="d-flex align-items-center" href="@@autopath/user-profile.html">
<div class="flex-shrink-0">
<div class="avatar avatar-soft-dark avatar-circle">
<span class="avatar-initials">O</span>
</div>
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block h5 text-inherit mb-0">Olive Clarks</span>
<span class="d-block fs-6 text-body">olive@site.com</span>
</div>
</a>
</td>
<td>856734</td>
<td>
<div class="input-group input-group-sm input-group-merge table-input-group">
<input id="referralsKeyCode25" type="text" class="form-control" readonly value="https://htmlstream.com/wer9n8x">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#referralsKeyCode25",
"classChangeTarget": "#referralsKeyCodeIcon25",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="referralsKeyCodeIcon25" class="bi-clipboard"></i>
</a>
</div>
</td>
<td>1</td>
<td>$0.00</td>
</tr>
</tbody>
</table>
</div>
<!-- End Table -->
<!-- Footer -->
<div class="card-footer">
<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="10">10</option>
<option value="15" selected>15</option>
<option value="20">20</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 Row -->
</div>
<!-- End Footer -->
</div>
<!-- End Card -->
</div>
<!-- End Content -->
<!-- Footer -->
@@if(layoutBuilder.header.containerMode === 'container-fluid') {
@@include("@@autopath/partials/footer/main.html")
}
@@if(layoutBuilder.header.containerMode === 'container') {
@@include("@@autopath/partials/footer/container.html")
}
<!-- End Footer -->
</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 -->
<!-- ========== 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>
@@if(layoutBuilder.header.layoutMode !== 'default') {
<script src="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
}
<script src="@@autopath/node_modules/tom-select/dist/js/tom-select.complete.min.js"></script>
<script src="@@autopath/node_modules/chart.js/dist/Chart.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/node_modules/daterangepicker/moment.min.js"></script>
<script src="@@autopath/node_modules/daterangepicker/daterangepicker.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.tom-select.js"></script>
<script src="@@autopath/assets/js/hs.chartjs.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 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)
// 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);
});
</script>
<!-- JS Plugins Init. -->
<script>
(function() {
window.onload = function () {
@@if(layoutBuilder.header.layoutMode !== 'default') {
// INITIALIZATION OF MEGA MENU
// =======================================================
new HSMegaMenu('.js-mega-menu', {
desktop: {
position: 'left'
}
})
}
// INITIALIZATION OF NAVBAR VERTICAL ASIDE
// =======================================================
new HSSideNav('.js-navbar-vertical-aside').init()
// INITIALIZATION OF FORM SEARCH
// =======================================================
new HSFormSearch('.js-form-search')
// INITIALIZATION OF BOOTSTRAP DROPDOWN
// =======================================================
HSBsDropdown.init()
// INITIALIZATION OF SELECT
// =======================================================
HSCore.components.HSTomSelect.init('.js-select')
// INITIALIZATION OF CLIPBOARD
// =======================================================
HSCore.components.HSClipboard.init('.js-clipboard')
// INITIALIZATION OF CHARTJS
// =======================================================
HSCore.components.HSChartJS.init('.js-chart')
}
})()
</script>
<!-- Style Switcher JS -->
@@if(layoutBuilder.extend.switcherSupport === true) {
@@include("@@autopath/partials/layouts-components/darkmode-switcher-js.html")
}
<!-- End Style Switcher JS -->
</body>
</html>