1588 lines
68 KiB
HTML
1588 lines
68 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>Project | 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">
|
|
@@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/flatpickr/dist/flatpickr.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">
|
|
|
|
<!-- 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": "project",
|
|
"subcategory": "",
|
|
"link": "project.html"
|
|
})
|
|
}
|
|
|
|
@@if(layoutBuilder.sidebarLayout === 'compact' && layoutBuilder.header.layoutMode === 'default') {
|
|
@@include("@@autopath/partials/sidebar/compact.html", {
|
|
"category": "project",
|
|
"subcategory": "",
|
|
"link": "project.html"
|
|
})
|
|
}
|
|
<!-- End Navbar Vertical -->
|
|
|
|
<main id="content" role="main" class="main">
|
|
<!-- Content -->
|
|
<div class="content @@layoutBuilder.header.containerMode">
|
|
<!-- Page Header -->
|
|
<div class="page-header">
|
|
<div class="d-flex mb-3">
|
|
<!-- Avatar -->
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-lg avatar-4x3">
|
|
<img class="avatar-img" src="@@autopath/assets/svg/brands/guideline-icon.svg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Avatar -->
|
|
|
|
<div class="flex-grow-1 ms-4">
|
|
<div class="row">
|
|
<div class="col-lg mb-3 mb-lg-0">
|
|
<h1 class="page-header-title">Cloud computing web service</h1>
|
|
|
|
<div class="row align-items-center">
|
|
<div class="col-auto">
|
|
<span>Client:</span>
|
|
<a href="#">Htmlstream</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<div class="row align-items-center g-0">
|
|
<div class="col-auto">Due date:</div>
|
|
|
|
<!-- Flatpickr -->
|
|
<div class="col flatpickr-custom-position-fix-sm-down">
|
|
<div id="projectDeadlineFlatpickr" class="js-flatpickr flatpickr-custom flatpickr-custom-borderless input-group input-group-sm"
|
|
data-hs-flatpickr-options='{
|
|
"appendTo": "#projectDeadlineFlatpickr",
|
|
"dateFormat": "d/m/Y",
|
|
"wrap": true
|
|
}'>
|
|
<input type="text" class="flatpickr-custom-form-control form-control" placeholder="Select dates" data-input value="29/06/2020">
|
|
<div class="input-group-append input-group-text ps-0" data-bs-toggle>
|
|
<i class="bi-chevron-down"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Flatpickr -->
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- Select -->
|
|
<div class="tom-select-custom">
|
|
<select class="js-select form-select form-select-sm form-select-borderless tom-select-form-select-ps-0" id="ownerLabel" autocomplete="off"
|
|
data-hs-tom-select-options='{
|
|
"searchInDropdown": false,
|
|
"hideSearch": true,
|
|
"dropdownWidth": "12rem"
|
|
}'>
|
|
<option value="owner1" selected data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle" src="@@autopath/assets/img/160x160/img6.jpg" alt="Avatar" /><span class="flex-grow-1 ms-2">Mark Williams</span></span>'>Mark Williams</option>
|
|
<option value="owner2" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle" src="@@autopath/assets/img/160x160/img10.jpg" alt="Avatar" /><span class="flex-grow-1 ms-2">Amanda Harvey</span></span>'>Amanda Harvey</option>
|
|
<option value="owner3" data-option-template='<span class="d-flex align-items-center"><i class="bi-person text-body"></i><span class="flex-grow-1 ms-2">Assign to owner</span></span>'>Assign to owner</option>
|
|
</select>
|
|
</div>
|
|
<!-- End Select -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-auto">
|
|
<span class="text-cap small">Team members:</span>
|
|
|
|
<div class="d-flex">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-circle me-3">
|
|
<a class="avatar" href="@@autopath/user-profile.html" data-bs-toggle="tooltip" data-bs-placement="top" title="Amanda Harvey">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img10.jpg" alt="Image Description">
|
|
</a>
|
|
<a class="avatar" href="@@autopath/user-profile.html" data-bs-toggle="tooltip" data-bs-placement="top" title="Linda Bates">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img9.jpg" alt="Image Description">
|
|
</a>
|
|
<a class="avatar avatar-soft-info" href="@@autopath/user-profile.html" data-bs-toggle="tooltip" data-bs-placement="top" title="#digitalmarketing">
|
|
<span class="avatar-initials">
|
|
<i class="bi-people-fill"></i>
|
|
</span>
|
|
</a>
|
|
<a class="avatar" href="@@autopath/user-profile.html" data-bs-toggle="tooltip" data-bs-placement="top" title="David Harrison">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img3.jpg" alt="Image Description">
|
|
</a>
|
|
<a class="avatar avatar-soft-dark" href="@@autopath/user-profile.html" data-bs-toggle="tooltip" data-bs-placement="top" title="Antony Taylor">
|
|
<span class="avatar-initials">A</span>
|
|
</a>
|
|
|
|
<a class="avatar avatar-light avatar-circle" href="javascript:;" data-bs-toggle="modal" data-bs-target="#shareWithPeopleModal">
|
|
<span class="avatar-initials">+2</span>
|
|
</a>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
|
|
<a class="btn btn-primary btn-icon rounded-circle" href="javascript:;" data-bs-toggle="modal" data-bs-target="#shareWithPeopleModal">
|
|
<i class="bi-share-fill"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
|
|
<!-- Nav -->
|
|
@@include("@@autopath/partials/layouts-components/nav-menu-project.html", {
|
|
"link": "project.html"
|
|
})
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Page Header -->
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6 col-xl-3 mb-3 mb-xl-6">
|
|
<!-- Card -->
|
|
<div class="card card-sm h-100">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col">
|
|
<!-- Media -->
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="bi-receipt nav-icon"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h4 class="mb-1">Spent</h4>
|
|
<span class="d-block">-$71,431.00 USD</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- Circle -->
|
|
<div class="circles-chart">
|
|
<div class="js-circle"
|
|
data-hs-circles-options='{
|
|
"value": 54,
|
|
"maxValue": 100,
|
|
"duration": 2000,
|
|
"isViewportInit": true,
|
|
"radius": 25,
|
|
"width": 3,
|
|
"fgStrokeLinecap": "round",
|
|
"textFontSize": 14,
|
|
"additionalText": "%",
|
|
"textClass": "circles-chart-content",
|
|
"textColor": "@@themeAppearance.styles.colors.primary"
|
|
}'></div>
|
|
</div>
|
|
<!-- End Circle -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<div class="col-sm-6 col-xl-3 mb-3 mb-xl-6">
|
|
<!-- Card -->
|
|
<div class="card card-sm h-100">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col">
|
|
<!-- Media -->
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="bi-bar-chart nav-icon"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h4 class="mb-1">Progress</h4>
|
|
<span class="fs-5 text-success">
|
|
<i class="tio-trending-up"></i> 1.7%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- Circle -->
|
|
<div class="circles-chart">
|
|
<div class="js-circle"
|
|
data-hs-circles-options='{
|
|
"value": 80,
|
|
"maxValue": 100,
|
|
"duration": 2000,
|
|
"isViewportInit": true,
|
|
"radius": 25,
|
|
"width": 3,
|
|
"fgStrokeLinecap": "round",
|
|
"textFontSize": 14,
|
|
"additionalText": "%",
|
|
"textClass": "circles-chart-content",
|
|
"textColor": "@@themeAppearance.styles.colors.primary"
|
|
}'></div>
|
|
</div>
|
|
<!-- End Circle -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<div class="col-sm-6 col-xl-3 mb-3 mb-xl-6">
|
|
<!-- Card -->
|
|
<div class="card card-sm h-100">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col">
|
|
<!-- Media -->
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="bi-check2-circle nav-icon"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h4 class="mb-1">Tasks closed</h4>
|
|
<span class="d-block">79 <span class="badge bg-soft-dark text-dark rounded-pill ms-1">+4 today</span></span>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- Circle -->
|
|
<div class="circles-chart">
|
|
<div class="js-circle"
|
|
data-hs-circles-options='{
|
|
"value": 67,
|
|
"maxValue": 100,
|
|
"duration": 2000,
|
|
"isViewportInit": true,
|
|
"radius": 25,
|
|
"width": 3,
|
|
"fgStrokeLinecap": "round",
|
|
"textFontSize": 14,
|
|
"additionalText": "%",
|
|
"textClass": "circles-chart-content",
|
|
"textColor": "@@themeAppearance.styles.colors.primary"
|
|
}'></div>
|
|
</div>
|
|
<!-- End Circle -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<div class="col-sm-6 col-xl-3 mb-3 mb-xl-6">
|
|
<!-- Card -->
|
|
<div class="card card-sm h-100">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col">
|
|
<!-- Media -->
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="bi-award nav-icon"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h4 class="mb-1">Goals</h4>
|
|
<span class="d-block">41/100</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- Circle -->
|
|
<div class="circles-chart">
|
|
<div class="js-circle"
|
|
data-hs-circles-options='{
|
|
"value": 41,
|
|
"maxValue": 100,
|
|
"duration": 2000,
|
|
"isViewportInit": true,
|
|
"radius": 25,
|
|
"width": 3,
|
|
"fgStrokeLinecap": "round",
|
|
"textFontSize": 14,
|
|
"additionalText": "%",
|
|
"textClass": "circles-chart-content",
|
|
"textColor": "@@themeAppearance.styles.colors.primary"
|
|
}'></div>
|
|
</div>
|
|
<!-- End Circle -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<!-- Card -->
|
|
<div class="card mb-3 mb-lg-5">
|
|
<!-- Header -->
|
|
<div class="card-header card-header-content-between">
|
|
<h6 class="card-subtitle mb-0">Project budget: <span class="h3 ms-sm-2">$150,000.00 USD</span></h6>
|
|
|
|
<!-- Dropdown -->
|
|
<div class="dropdown">
|
|
<button type="button" class="btn btn-white btn-sm dropdown-toggle" id="usersExportDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="bi-download me-2"></i> Export
|
|
</button>
|
|
|
|
<div class="dropdown-menu dropdown-menu-sm-end" aria-labelledby="usersExportDropdown">
|
|
<span class="dropdown-header">Options</span>
|
|
<a id="export-copy" class="dropdown-item" href="javascript:;">
|
|
<img class="avatar avatar-xss avatar-4x3 me-2" src="@@autopath/assets/svg/illustrations/copy-icon.svg" alt="Image Description">
|
|
Copy
|
|
</a>
|
|
<a id="export-print" class="dropdown-item" href="javascript:;">
|
|
<img class="avatar avatar-xss avatar-4x3 me-2" src="@@autopath/assets/svg/illustrations/print-icon.svg" alt="Image Description">
|
|
Print
|
|
</a>
|
|
<div class="dropdown-divider"></div>
|
|
<span class="dropdown-header">Download options</span>
|
|
<a id="export-excel" class="dropdown-item" href="javascript:;">
|
|
<img class="avatar avatar-xss avatar-4x3 me-2" src="@@autopath/assets/svg/brands/excel-icon.svg" alt="Image Description">
|
|
Excel
|
|
</a>
|
|
<a id="export-csv" class="dropdown-item" href="javascript:;">
|
|
<img class="avatar avatar-xss avatar-4x3 me-2" src="@@autopath/assets/svg/components/placeholder-csv-format.svg" alt="Image Description">
|
|
.CSV
|
|
</a>
|
|
<a id="export-pdf" class="dropdown-item" href="javascript:;">
|
|
<img class="avatar avatar-xss avatar-4x3 me-2" src="@@autopath/assets/svg/brands/pdf-icon.svg" alt="Image Description">
|
|
PDF
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Dropdown -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<!-- Bar Chart -->
|
|
<div class="chartjs-custom" style="height: 18rem;">
|
|
<canvas id="project" class="js-chart"
|
|
data-hs-chartjs-options='{
|
|
"type": "line",
|
|
"data": {
|
|
"labels": ["Feb","Jan","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
|
|
"datasets": [{
|
|
"data": [18,51,60,38,88,50,40,52,88,80,60,70],
|
|
"backgroundColor": ["rgba(55, 125, 255, 0)", "rgba(255, 255, 255, 0)"],
|
|
"borderColor": "@@themeAppearance.styles.colors.primary",
|
|
"borderWidth": 2,
|
|
"pointRadius": 0,
|
|
"pointBorderColor": "#fff",
|
|
"pointBackgroundColor": "@@themeAppearance.styles.colors.primary",
|
|
"pointHoverRadius": 0,
|
|
"hoverBorderColor": "#fff",
|
|
"hoverBackgroundColor": "@@themeAppearance.styles.colors.primary"
|
|
},
|
|
{
|
|
"data": [27,38,60,77,40,50,49,29,42,27,42,50],
|
|
"backgroundColor": ["rgba(0, 201, 219, 0)", "rgba(255, 255, 255, 0)"],
|
|
"borderColor": "#00c9db",
|
|
"borderWidth": 2,
|
|
"pointRadius": 0,
|
|
"pointBorderColor": "#fff",
|
|
"pointBackgroundColor": "#00c9db",
|
|
"pointHoverRadius": 0,
|
|
"hoverBorderColor": "#fff",
|
|
"hoverBackgroundColor": "#00c9db"
|
|
}]
|
|
},
|
|
"options": {
|
|
"gradientPosition": {"y1": 200},
|
|
"scales": {
|
|
"yAxes": [{
|
|
"gridLines": {
|
|
"color": "#e7eaf3",
|
|
"drawBorder": false,
|
|
"zeroLineColor": "#e7eaf3"
|
|
},
|
|
"ticks": {
|
|
"min": 0,
|
|
"max": 100,
|
|
"stepSize": 20,
|
|
"fontColor": "#97a4af",
|
|
"fontFamily": "Open Sans, sans-serif",
|
|
"padding": 10,
|
|
"postfix": "k"
|
|
}
|
|
}],
|
|
"xAxes": [{
|
|
"gridLines": {
|
|
"display": false,
|
|
"drawBorder": false
|
|
},
|
|
"ticks": {
|
|
"fontSize": 12,
|
|
"fontColor": "#97a4af",
|
|
"fontFamily": "Open Sans, sans-serif",
|
|
"padding": 5
|
|
}
|
|
}]
|
|
},
|
|
"tooltips": {
|
|
"prefix": "$",
|
|
"postfix": "k",
|
|
"hasIndicator": true,
|
|
"mode": "index",
|
|
"intersect": false,
|
|
"lineMode": true,
|
|
"lineWithLineColor": "rgba(19, 33, 68, 0.075)"
|
|
},
|
|
"hover": {
|
|
"mode": "nearest",
|
|
"intersect": true
|
|
}
|
|
}
|
|
}'>
|
|
</canvas>
|
|
</div>
|
|
<!-- End Bar Chart -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<div class="row">
|
|
<div class="col-lg-5 mb-3 mb-lg-5">
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header card-header-content-between">
|
|
<h4 class="card-header-title">Expenses</h4>
|
|
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="expensesTab" role="tablist">
|
|
<li class="nav-item" data-bs-toggle="chart-doughnut" data-datasets="0" 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-doughnut" data-datasets="1" 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">
|
|
<!-- Pie Chart -->
|
|
<div class="chartjs-custom mb-3 mb-sm-5" style="height: 14rem;">
|
|
<canvas id="updatingDoughnutChart"
|
|
data-hs-chartjs-options='{
|
|
"type": "doughnut",
|
|
"data": {
|
|
"labels": ["USD", "USD", "USD"],
|
|
"datasets": [{
|
|
"backgroundColor": ["@@themeAppearance.styles.colors.primary", "#00c9db", "#e7eaf3"],
|
|
"borderWidth": 5,
|
|
"hoverBorderColor": "#fff"
|
|
}]
|
|
},
|
|
"options": {
|
|
"cutoutPercentage": 80,
|
|
"tooltips": {
|
|
"postfix": "k",
|
|
"hasIndicator": true,
|
|
"mode": "index",
|
|
"intersect": false
|
|
},
|
|
"hover": {
|
|
"mode": "nearest",
|
|
"intersect": true
|
|
}
|
|
}
|
|
}'></canvas>
|
|
</div>
|
|
<!-- End Pie Chart -->
|
|
|
|
<div class="row justify-content-center">
|
|
<div class="col-auto mb-3 mb-sm-0">
|
|
<h4 class="card-title">$2,332.00</h4>
|
|
<span class="legend-indicator bg-primary"></span> Marketing
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto mb-3 mb-sm-0">
|
|
<h4 class="card-title">$10,452.00</h4>
|
|
<span class="legend-indicator bg-info"></span> Bills
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<h4 class="card-title">$56,856.00</h4>
|
|
<span class="legend-indicator"></span> Others
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-7 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">Events</h4>
|
|
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="eventsTab" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="this-week-tab" data-bs-toggle="tab" href="#this-week" role="tab">
|
|
This week
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="next-week-tab" data-bs-toggle="tab" href="#next-week" role="tab">
|
|
Next week
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Body -->
|
|
<div class="card-body card-body-height">
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="eventsTabContent">
|
|
<div class="tab-pane fade show active" id="this-week" role="tabpanel" aria-labelledby="this-week-tab">
|
|
<!-- List Group -->
|
|
<ul class="list-group list-group-flush list-group-start-bordered">
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<a class="list-group-item-action border-primary" href="#">
|
|
<div class="row">
|
|
<div class="col-sm mb-2 mb-sm-0">
|
|
<h2 class="fw-normal mb-1">12:00 - 03:00 <span class="fs-5 text-body text-uppercase">pm</span></h2>
|
|
<h5 class="text-inherit mb-0">Weekly overview</h5>
|
|
<span class="text-body small">24 May, 2020</span>
|
|
</div>
|
|
|
|
<div class="col-sm-auto align-self-sm-end">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-sm avatar-circle">
|
|
<span class="avatar">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img9.jpg" alt="Image Description">
|
|
</span>
|
|
<span class="avatar">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img3.jpg" alt="Image Description">
|
|
</span>
|
|
<span class="avatar avatar-soft-dark">
|
|
<span class="avatar-initials">A</span>
|
|
</span>
|
|
<span class="avatar avatar-soft-info">
|
|
<span class="avatar-initials">S</span>
|
|
</span>
|
|
<span class="avatar">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img5.jpg" alt="Image Description">
|
|
</span>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
</li>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<a class="list-group-item-action border-info" href="#">
|
|
<div class="row">
|
|
<div class="col-sm mb-2 mb-sm-0">
|
|
<h2 class="fw-normal mb-1">04:30 - 04:50 <span class="fs-5 text-body text-uppercase">pm</span></h2>
|
|
<h5 class="text-inherit mb-0">Project tasks</h5>
|
|
<span class="text-body small">25 May, 2020</span>
|
|
</div>
|
|
|
|
<div class="col-sm-auto align-self-sm-end">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-sm avatar-circle">
|
|
<span class="avatar">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img6.jpg" alt="Image Description">
|
|
</span>
|
|
<span class="avatar">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img7.jpg" alt="Image Description">
|
|
</span>
|
|
<span class="avatar avatar-soft-danger">
|
|
<span class="avatar-initials">A</span>
|
|
</span>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Row -->
|
|
</li>
|
|
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<a class="list-group-item-action border-danger" href="#">
|
|
<div class="row">
|
|
<div class="col-sm mb-2 mb-sm-0">
|
|
<h2 class="fw-normal mb-1">12:00 - 03:00 <span class="fs-5 text-body text-uppercase">pm</span></h2>
|
|
<h5 class="text-inherit mb-0">Monthly reports</h5>
|
|
<span class="text-body small">27 May, 2020</span>
|
|
</div>
|
|
|
|
<div class="col-sm-auto align-self-sm-end">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-sm avatar-circle">
|
|
<span class="avatar">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img5.jpg" alt="Image Description">
|
|
</span>
|
|
<span class="avatar avatar-soft-dark">
|
|
<span class="avatar-initials">B</span>
|
|
</span>
|
|
<span class="avatar">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img8.jpg" alt="Image Description">
|
|
</span>
|
|
<span class="avatar">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img9.jpg" alt="Image Description">
|
|
</span>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
</li>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<a class="list-group-item-action border-warning" href="#">
|
|
<div class="row">
|
|
<div class="col-sm mb-2 mb-sm-0">
|
|
<h2 class="fw-normal mb-1">02:00 - 03:00 <span class="fs-5 text-body text-uppercase">pm</span></h2>
|
|
<h5 class="text-inherit mb-0">Monthly reports to the client</h5>
|
|
<span class="text-body small">29 May, 2020</span>
|
|
</div>
|
|
|
|
<div class="col-sm-auto align-self-sm-end">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-sm avatar-circle">
|
|
<span class="avatar">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img5.jpg" alt="Image Description">
|
|
</span>
|
|
<span class="avatar avatar-soft-dark">
|
|
<span class="avatar-initials">B</span>
|
|
</span>
|
|
<span class="avatar">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img8.jpg" alt="Image Description">
|
|
</span>
|
|
<span class="avatar">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img9.jpg" alt="Image Description">
|
|
</span>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
</li>
|
|
<!-- End Item -->
|
|
</ul>
|
|
<!-- End List Group -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="next-week" role="tabpanel" aria-labelledby="next-week-tab">
|
|
<!-- List Group -->
|
|
<ul class="list-group list-group-flush list-group-start-bordered">
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<a class="list-group-item-action border-info" href="#">
|
|
<div class="row">
|
|
<div class="col-sm mb-2 mb-sm-0">
|
|
<h2 class="fw-normal mb-1">04:30 - 04:50 <span class="fs-5 text-body text-uppercase">pm</span></h2>
|
|
<h5 class="text-inherit mb-0">Project tasks</h5>
|
|
<span class="text-body small">30 May, 2020</span>
|
|
</div>
|
|
|
|
<div class="col-sm-auto align-self-sm-end">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-sm avatar-circle">
|
|
<span class="avatar">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img6.jpg" alt="Image Description">
|
|
</span>
|
|
<span class="avatar">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img7.jpg" alt="Image Description">
|
|
</span>
|
|
<span class="avatar avatar-soft-danger">
|
|
<span class="avatar-initials">A</span>
|
|
</span>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Row -->
|
|
</li>
|
|
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<a class="list-group-item-action border-primary" href="#">
|
|
<div class="row">
|
|
<div class="col-sm mb-2 mb-sm-0">
|
|
<h2 class="fw-normal mb-1">12:00 - 03:00 <span class="fs-5 text-body text-uppercase">pm</span></h2>
|
|
<h5 class="text-inherit mb-0">Weekly overview</h5>
|
|
<span class="text-body small">1 June, 2020</span>
|
|
</div>
|
|
|
|
<div class="col-sm-auto align-self-sm-end">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-sm avatar-circle">
|
|
<span class="avatar">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img9.jpg" alt="Image Description">
|
|
</span>
|
|
<span class="avatar">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img3.jpg" alt="Image Description">
|
|
</span>
|
|
<span class="avatar avatar-soft-dark">
|
|
<span class="avatar-initials">A</span>
|
|
</span>
|
|
<span class="avatar avatar-soft-info">
|
|
<span class="avatar-initials">S</span>
|
|
</span>
|
|
<span class="avatar">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img5.jpg" alt="Image Description">
|
|
</span>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
</li>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<a class="list-group-item-action border-warning" href="#">
|
|
<div class="row">
|
|
<div class="col-sm mb-2 mb-sm-0">
|
|
<h2 class="fw-normal mb-1">02:00 - 03:00 <span class="fs-5 text-body text-uppercase">pm</span></h2>
|
|
<h5 class="text-inherit mb-0">Monthly reports to the client</h5>
|
|
<span class="text-body small">2 June, 2020</span>
|
|
</div>
|
|
|
|
<div class="col-sm-auto align-self-sm-end">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-sm avatar-circle">
|
|
<span class="avatar">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img5.jpg" alt="Image Description">
|
|
</span>
|
|
<span class="avatar avatar-soft-dark">
|
|
<span class="avatar-initials">B</span>
|
|
</span>
|
|
<span class="avatar">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img8.jpg" alt="Image Description">
|
|
</span>
|
|
<span class="avatar">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img9.jpg" alt="Image Description">
|
|
</span>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
</li>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<a class="list-group-item-action border-danger" href="#">
|
|
<div class="row">
|
|
<div class="col-sm mb-2 mb-sm-0">
|
|
<h2 class="fw-normal mb-1">12:00 - 03:00 <span class="fs-5 text-body text-uppercase">pm</span></h2>
|
|
<h5 class="text-inherit mb-0">Monthly reports</h5>
|
|
<span class="text-body small">4 June, 2020</span>
|
|
</div>
|
|
|
|
<div class="col-sm-auto align-self-sm-end">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-sm avatar-circle">
|
|
<span class="avatar">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img5.jpg" alt="Image Description">
|
|
</span>
|
|
<span class="avatar avatar-soft-dark">
|
|
<span class="avatar-initials">B</span>
|
|
</span>
|
|
<span class="avatar">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img8.jpg" alt="Image Description">
|
|
</span>
|
|
<span class="avatar">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img9.jpg" alt="Image Description">
|
|
</span>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
</li>
|
|
<!-- End Item -->
|
|
</ul>
|
|
<!-- End List Group -->
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<!-- Card -->
|
|
<div class="card overflow-hidden">
|
|
<!-- Header -->
|
|
<div class="card-header card-header-content-between">
|
|
<h4 class="card-header-title">Hours spent <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>
|
|
|
|
<!-- 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">
|
|
<!-- Matrix Chart -->
|
|
<div class="table-responsive">
|
|
<div class="chartjs-matrix-custom mb-3" style="min-width: 100%; width: 700px;">
|
|
<canvas id="chartjs-matrix" class="js-chart-matrix"
|
|
data-hs-chartjs-options='{
|
|
"options": {
|
|
"matrixBackgroundColor": {
|
|
"color": "@@themeAppearance.styles.colors.primary",
|
|
"accent": 50,
|
|
"additionToValue": 2
|
|
},
|
|
"matrixLegend": {
|
|
"container": "#matrixLegend"
|
|
}
|
|
}
|
|
}'></canvas>
|
|
</div>
|
|
</div>
|
|
<!-- End Matrix Chart -->
|
|
|
|
<!-- Matrix Legend -->
|
|
<ul id="matrixLegend" class="mb-0"></ul>
|
|
</div>
|
|
<!-- End Body -->
|
|
|
|
<hr class="my-0">
|
|
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<!-- Body -->
|
|
<div class="card card-centered bg-light h-100 rounded-0 shadow-none">
|
|
<div class="card-body text-center">
|
|
<div class="mb-3">
|
|
<img class="avatar avatar-xxl avatar-4x3" src="@@autopath/assets/svg/illustrations/oc-chatting.svg" alt="Image Description" data-hs-theme-appearance="default">
|
|
<img class="avatar avatar-xxl avatar-4x3" src="@@autopath/assets/svg/illustrations-light/oc-chatting.svg" alt="Image Description" data-hs-theme-appearance="dark">
|
|
</div>
|
|
|
|
<span class="display-3 d-block text-dark">256.4</span>
|
|
|
|
<span class="d-block">
|
|
— Total hours
|
|
<span class="badge bg-soft-dark text-dark rounded-pill ms-1">+7 today</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-8">
|
|
<!-- Body -->
|
|
<div class="card-body card-body-height">
|
|
<ul class="list-group list-group-flush list-group-no-gutters">
|
|
<!-- List Item -->
|
|
<li class="list-group-item">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm mb-3 mb-sm-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-2">
|
|
<h5 class="text-inherit">Amanda Harvey</h5>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<span class="text-cap text-body small mb-0">Days</span>
|
|
<span class="fw-semi-bold text-dark">38</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<span class="text-cap text-body small mb-0">Hours</span>
|
|
<span class="fw-semi-bold text-dark">45:12</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<span class="text-cap text-body small mb-0">Tasks</span>
|
|
<span class="fw-semi-bold text-dark">35</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
</li>
|
|
<!-- End List Item -->
|
|
|
|
<!-- List Item -->
|
|
<li class="list-group-item">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm mb-3 mb-sm-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">S</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-2">
|
|
<h5 class="text-inherit">Sara Iwens</h5>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<span class="text-cap text-body small mb-0">Days</span>
|
|
<span class="fw-semi-bold text-dark">15</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<span class="text-cap text-body small mb-0">Hours</span>
|
|
<span class="fw-semi-bold text-dark">24:06</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<span class="text-cap text-body small mb-0">Tasks</span>
|
|
<span class="fw-semi-bold text-dark">31</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
</li>
|
|
<!-- End List Item -->
|
|
|
|
<!-- List Item -->
|
|
<li class="list-group-item">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm mb-3 mb-sm-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-2">
|
|
<h5 class="text-inherit">David Harrison</h5>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<span class="text-cap text-body small mb-0">Days</span>
|
|
<span class="fw-semi-bold text-dark">22</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<span class="text-cap text-body small mb-0">Hours</span>
|
|
<span class="fw-semi-bold text-dark">67:38</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<span class="text-cap text-body small mb-0">Tasks</span>
|
|
<span class="fw-semi-bold text-dark">76</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
</li>
|
|
<!-- End List Item -->
|
|
|
|
<!-- List Item -->
|
|
<li class="list-group-item">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm mb-3 mb-sm-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-2">
|
|
<h5 class="text-inherit">Ella Lauda</h5>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<span class="text-cap text-body small mb-0">Days</span>
|
|
<span class="fw-semi-bold text-dark">35</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<span class="text-cap text-body small mb-0">Hours</span>
|
|
<span class="fw-semi-bold text-dark">53:31</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<span class="text-cap text-body small mb-0">Tasks</span>
|
|
<span class="fw-semi-bold text-dark">42</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
</li>
|
|
<!-- End List Item -->
|
|
|
|
<!-- List Item -->
|
|
<li class="list-group-item">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm mb-3 mb-sm-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-2">
|
|
<h5 class="text-inherit">Bob Dean</h5>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<span class="text-cap text-body small mb-0">Days</span>
|
|
<span class="fw-semi-bold text-dark">5</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<span class="text-cap text-body small mb-0">Hours</span>
|
|
<span class="fw-semi-bold text-dark">15:38</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<span class="text-cap text-body small mb-0">Tasks</span>
|
|
<span class="fw-semi-bold text-dark">21</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
</li>
|
|
<!-- End List Item -->
|
|
|
|
<!-- List Item -->
|
|
<li class="list-group-item">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm mb-3 mb-sm-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-2">
|
|
<h5 class="text-inherit">Linda Bates</h5>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<span class="text-cap text-body small mb-0">Days</span>
|
|
<span class="fw-semi-bold text-dark">14</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<span class="text-cap text-body small mb-0">Hours</span>
|
|
<span class="fw-semi-bold text-dark">16:29</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<span class="text-cap text-body small mb-0">Tasks</span>
|
|
<span class="fw-semi-bold text-dark">9</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
</li>
|
|
<!-- End List Item -->
|
|
</ul>
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</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 -->
|
|
|
|
<!-- Share with people Modal -->
|
|
@@include("@@autopath/partials/modals/share-with-people.html")
|
|
<!-- End Share with people 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/assets/vendor/hs-nav-scroller/dist/hs-nav-scroller.min.js"></script>
|
|
<script src="@@autopath/node_modules/tom-select/dist/js/tom-select.complete.min.js"></script>
|
|
<script src="@@autopath/node_modules/flatpickr/dist/flatpickr.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/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/clipboard/dist/clipboard.min.js"></script>
|
|
<script src="@@autopath/node_modules/appear/dist/appear.min.js"></script>
|
|
<script src="@@autopath/node_modules/circles.js/circles.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.tom-select.js"></script>
|
|
<script src="@@autopath/assets/js/hs.flatpickr.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.circles.js"></script>
|
|
<script src="@@autopath/assets/js/hs.chartjs-matrix.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);
|
|
});
|
|
</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 NAV SCROLLER
|
|
// =======================================================
|
|
new HsNavScroller('.js-nav-scroller')
|
|
|
|
|
|
// INITIALIZATION OF SELECT
|
|
// =======================================================
|
|
HSCore.components.HSTomSelect.init('.js-select')
|
|
|
|
|
|
// INITIALIZATION OF CIRCLES
|
|
// =======================================================
|
|
const colors = () => {
|
|
return [HSThemeAppearance.getAppearance() === 'dark' ? '#34383b' : '#e7eaf3', '@@themeAppearance.styles.colors.primary']
|
|
}
|
|
|
|
setTimeout(() => {
|
|
document.querySelectorAll('.js-circle').forEach(item => {
|
|
HSCore.components.HSCircles.init(item, {
|
|
colors: colors()
|
|
})
|
|
})
|
|
|
|
window.addEventListener('on-hs-appearance-change', () => {
|
|
HSCore.components.HSCircles.getItems().forEach(circle => {
|
|
circle.updateColors(colors())
|
|
})
|
|
})
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF CLIPBOARD
|
|
// =======================================================
|
|
HSCore.components.HSClipboard.init('.js-clipboard')
|
|
|
|
|
|
// INITIALIZATION OF CHARTJS
|
|
// =======================================================
|
|
HSCore.components.HSChartJS.init('.js-chart')
|
|
|
|
|
|
// INITIALIZATION OF MATRIX CHARTJS WITH CHARTJS MATRIX PLUGIN
|
|
// =======================================================
|
|
function generateHoursData() {
|
|
var data = [];
|
|
var dt = moment().subtract(365, 'days').startOf('day');
|
|
var end = moment().startOf('day');
|
|
while (dt <= end) {
|
|
data.push({
|
|
x: dt.format('YYYY-MM-DD'),
|
|
y: dt.format('e'),
|
|
d: dt.format('YYYY-MM-DD'),
|
|
v: Math.random() * 24
|
|
});
|
|
dt = dt.add(1, 'day');
|
|
}
|
|
return data;
|
|
}
|
|
|
|
HSCore.components.HSChartMatrixJS.init('.js-chart-matrix', {
|
|
data: {
|
|
datasets: [{
|
|
label: 'Commits',
|
|
data: generateHoursData(),
|
|
width: function (ctx) {
|
|
var a = ctx.chart.chartArea;
|
|
return (a.right - a.left) / 70;
|
|
},
|
|
height: function (ctx) {
|
|
var a = ctx.chart.chartArea;
|
|
return (a.bottom - a.top) / 10;
|
|
}
|
|
}]
|
|
},
|
|
options: {
|
|
tooltips: {
|
|
callbacks: {
|
|
title: function () {
|
|
return '';
|
|
},
|
|
label: function (item, data) {
|
|
var v = data.datasets[item.datasetIndex].data[item.index];
|
|
|
|
if (v.v.toFixed() > 0) {
|
|
return '<span class="font-weight-bold">' + v.v.toFixed() + 'hours</span> on ' + v.d;
|
|
} else {
|
|
return '<span class="font-weight-bold">No time</span> on ' + v.d;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
position: 'bottom',
|
|
type: 'time',
|
|
offset: true,
|
|
time: {
|
|
unit: 'week',
|
|
round: 'week',
|
|
displayFormats: {
|
|
week: 'MMM'
|
|
}
|
|
},
|
|
ticks: {
|
|
"labelOffset": 20,
|
|
"maxRotation": 0,
|
|
"minRotation": 0,
|
|
"fontSize": 12,
|
|
"fontColor": "rgba(22, 52, 90, 0.5)",
|
|
"maxTicksLimit": 12,
|
|
},
|
|
gridLines: {
|
|
display: false
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
type: 'time',
|
|
offset: true,
|
|
time: {
|
|
unit: 'day',
|
|
parser: 'e',
|
|
displayFormats: {
|
|
day: 'ddd'
|
|
}
|
|
},
|
|
ticks: {
|
|
"fontSize": 12,
|
|
"fontColor": "rgba(22, 52, 90, 0.5)",
|
|
"maxTicksLimit": 2,
|
|
},
|
|
gridLines: {
|
|
display: false
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
|
|
HSCore.components.HSChartJS.init('#updatingDoughnutChart')
|
|
const updatingDoughnutChart = HSCore.components.HSChartJS.getItem('updatingDoughnutChart')
|
|
|
|
// Datasets for chart, can be loaded from AJAX request
|
|
const updatingDoughnutChartDatasets = [
|
|
[
|
|
[45, 25, 30]
|
|
],
|
|
[
|
|
[35, 50, 15]
|
|
]
|
|
]
|
|
|
|
// Set datasets for chart when page is loaded
|
|
const setDataChart = function () {
|
|
updatingDoughnutChart.data.datasets.forEach(function (dataset, key) {
|
|
dataset.data = updatingDoughnutChartDatasets[0][key];
|
|
})
|
|
|
|
updatingDoughnutChart.update()
|
|
}
|
|
|
|
setDataChart()
|
|
|
|
window.addEventListener('on-hs-appearance-change', e => {
|
|
setDataChart()
|
|
})
|
|
|
|
// Call when tab is clicked
|
|
document.querySelectorAll('[data-bs-toggle="chart-doughnut"]').forEach(item => {
|
|
item.addEventListener('click', e => {
|
|
let keyDataset = e.currentTarget.getAttribute('data-datasets')
|
|
|
|
// Update datasets for chart
|
|
updatingDoughnutChart.data.datasets.forEach(function (dataset, key) {
|
|
dataset.data = updatingDoughnutChartDatasets[keyDataset][key]
|
|
})
|
|
updatingDoughnutChart.update()
|
|
})
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF FLATPICKR
|
|
// =======================================================
|
|
HSCore.components.HSFlatpickr.init('.js-flatpickr')
|
|
}
|
|
})()
|
|
</script>
|
|
|
|
<!-- Style Switcher JS -->
|
|
@@if(layoutBuilder.extend.switcherSupport === true) {
|
|
@@include("@@autopath/partials/layouts-components/darkmode-switcher-js.html")
|
|
}
|
|
<!-- End Style Switcher JS -->
|
|
</body>
|
|
</html>
|