You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1169 lines
51 KiB
1169 lines
51 KiB
<!doctype html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"/> |
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/> |
|
<meta http-equiv="X-UA-Compatible" content="ie=edge"/> |
|
<link rel="icon" href="./static/logoHSE.png"> |
|
<title>HSE Dashboard - Settings</title> |
|
<!-- CSS files --> |
|
<link rel="stylesheet" href="./dist/css/style.css"> |
|
<link href="./dist/css/tabler.min.css?1684106062" rel="stylesheet"/> |
|
<link href="./dist/css/tabler-flags.min.css?1684106062" rel="stylesheet"/> |
|
<link href="./dist/css/tabler-payments.min.css?1684106062" rel="stylesheet"/> |
|
<link href="./dist/css/tabler-vendors.min.css?1684106062" rel="stylesheet"/> |
|
<link href="./dist/css/demo.min.css?1684106062" rel="stylesheet"/> |
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css"> |
|
<style> |
|
@import url('https://rsms.me/inter/inter.css'); |
|
:root { |
|
--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; |
|
} |
|
body { |
|
font-feature-settings: "cv03", "cv04", "cv11"; |
|
} |
|
</style> |
|
</head> |
|
<body > |
|
<script src="./dist/js/demo-theme.min.js?1684106062"></script> |
|
<div class="page"> |
|
<!-- Sidebar --> |
|
<aside class="navbar navbar-vertical navbar-expand-lg navbar-transparent"> |
|
<div class="container-fluid"> |
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar-menu" aria-controls="sidebar-menu" aria-expanded="false" aria-label="Toggle navigation"> |
|
<span class="navbar-toggler-icon"></span> |
|
</button> |
|
<h1 class="navbar-brand navbar-brand-autodark"> |
|
<a> |
|
<img src="./static/logoHSE.png" width="300" height="300" class="navbar-brand-image"> |
|
</a> |
|
</h1> |
|
<div class="navbar-nav flex-row d-lg-none"> |
|
<div class="nav-item dropdown"> |
|
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu"> |
|
<span><i class="ti ti-users"></i></span> |
|
<div class="d-none d-xl-block ps-2"> |
|
<h1><i class="ti ti-users"></i></h1> |
|
</div> |
|
</a> |
|
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow"> |
|
<a href="my-account.html" class="dropdown-item">My Account</a> |
|
<a href="settings.html" class="dropdown-item">Setting</a> |
|
<div class="dropdown-divider"></div> |
|
<a href="./sign-in.html" class="dropdown-item">Logout</a> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="collapse navbar-collapse" id="sidebar-menu"> |
|
<ul class="navbar-nav pt-lg-3"> |
|
<li class="nav-item"> |
|
<a class="nav-link" href="index.html" > |
|
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home --> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="60" height="60" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg> |
|
</span> |
|
<span class="nav-link-title"> |
|
Home |
|
</span> |
|
</a> |
|
</li> |
|
<li class="nav-item"> |
|
<a class="nav-link" href="cermat.html" > |
|
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home --> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-description" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> |
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> |
|
<path d="M14 3v4a1 1 0 0 0 1 1h4"></path> |
|
<path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path> |
|
<path d="M9 17h6"></path> |
|
<path d="M9 13h6"></path> |
|
</svg> |
|
</span> |
|
<span class="nav-link-title"> |
|
CerMAT |
|
</span> |
|
</a> |
|
</li> |
|
<li class="nav-item dropdown"> |
|
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="false" role="button" aria-expanded="false" > |
|
<span class="nav-link-icon d-md-none d-lg-inline-block"> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-users-group" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> |
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> |
|
<path d="M10 13a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path> |
|
<path d="M8 21v-1a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v1"></path> |
|
<path d="M15 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path> |
|
<path d="M17 10h2a2 2 0 0 1 2 2v1"></path> |
|
<path d="M5 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path> |
|
<path d="M3 13v-1a2 2 0 0 1 2 -2h2"></path> |
|
</svg> |
|
</span> |
|
<span class="nav-link-title"> |
|
Safety Talk |
|
</span> |
|
</a> |
|
<div class="dropdown-menu"> |
|
<div class="dropdown-menu-columns"> |
|
<div class="dropdown-menu-column"> |
|
<a class="dropdown-item" href="safety-talk.html"> |
|
<span class="nav-link-icon d-md-none d-lg-inline-block"> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock-hour-4" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> |
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> |
|
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path> |
|
<path d="M12 12l3 2"></path> |
|
<path d="M12 7v5"></path> |
|
</svg> |
|
</span> |
|
<span> |
|
Safety Talk Schedule |
|
</span> |
|
</a> |
|
<a class="dropdown-item" href="safety-gallery.html"> |
|
<span class="nav-link-icon d-md-none d-lg-inline-block"> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-layout-dashboard" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> |
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> |
|
<path d="M4 4h6v8h-6z"></path> |
|
<path d="M4 16h6v4h-6z"></path> |
|
<path d="M14 12h6v8h-6z"></path> |
|
<path d="M14 4h6v4h-6z"></path> |
|
</svg> |
|
</span> |
|
<span> |
|
Safety Talk Gallery |
|
</span> |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
</li> |
|
<li class="nav-item active"> |
|
<a class="nav-link" href="settings.html" > |
|
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home --> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-settings" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> |
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> |
|
<path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"></path> |
|
<path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path> |
|
</svg> |
|
</span> |
|
<span class="nav-link-title"> |
|
Settings |
|
</span> |
|
</a> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</aside> |
|
<div class="page-wrapper"> |
|
<!-- Page header --> |
|
<div class="page-header d-print-none"> |
|
<div class="container-xl"> |
|
<div class="row g-2 align-items-center"> |
|
<div class="col"> |
|
<!-- Page pre-title --> |
|
<div class="page-pretitle"> |
|
Welcome, |
|
</div> |
|
<h2 class="page-title"> |
|
Admin Anindya |
|
</h2> |
|
</div> |
|
<!-- Page title actions --> |
|
<div class="col-auto ms-auto d-print-none"> |
|
<div class="nav-item dropdown"> |
|
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu"> |
|
<div class="d-none d-xl-block ps-2"> |
|
<h1> |
|
<i class="ti ti-users"></i> |
|
</h1> |
|
</div> |
|
</a> |
|
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow"> |
|
<a href="my-account.html" class="dropdown-item">My Account</a> |
|
<a href="settings.html" class="dropdown-item">Settings</a> |
|
<div class="dropdown-divider"></div> |
|
<a href="#" class="dropdown-item"><!-- Download SVG icon from http://tabler-icons.io/i/logout --> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" /><path d="M9 12h12l-3 -3" /><path d="M18 15l3 -3" /></svg> |
|
Logout</a> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- Page header --> |
|
<div class="page-header d-print-none"> |
|
<div class="container-xl"> |
|
<div class="row g-2 align-items-center"> |
|
<div class="d-flex mb-3 flex-row-reverse"> |
|
<ol class="breadcrumb" aria-label="breadcrumbs"> |
|
<li class="breadcrumb-item"><a href="index.html">Home</a></li> |
|
<li class="breadcrumb-item active" aria-current="page"><a href="#">Settings</a></li> |
|
</ol> |
|
</div> |
|
<div class="card"> |
|
<div class="card-header"> |
|
<h3 class="page-title">Settings</h3> |
|
</div> |
|
<div class="card-body">Employee's Accounts Settings</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- Page body --> |
|
<div class="page-body"> |
|
<div class="container-xl"> |
|
<div class="card"> |
|
<div class="card-header"> |
|
<div class="card-title">Users Table</div> |
|
<div class="icon-add"> |
|
<div class="float-right"> |
|
<a href="" class="btn btn-icon" data-bs-toggle="modal" data-bs-target="#modal-add-employee" title="Add Employee"> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-users-plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> |
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> |
|
<path d="M5 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path> |
|
<path d="M3 21v-2a4 4 0 0 1 4 -4h4c.96 0 1.84 .338 2.53 .901"></path> |
|
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path> |
|
<path d="M16 19h6"></path> |
|
<path d="M19 16v6"></path> |
|
</svg> |
|
</a> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
<div class="card-body border-bottom"> |
|
<div class="d-flex"> |
|
<div class="text-muted"> |
|
Show |
|
<div class="mx-2 d-inline-block"> |
|
<input type="text" class="form-control form-control-sm" value="8" size="3" aria-label="Invoices count"> |
|
</div> |
|
entries |
|
</div> |
|
<div class="ms-auto text-muted"> |
|
Search: |
|
<div class="ms-2 d-inline-block"> |
|
<input type="text" class="form-control form-control-sm" aria-label="Search invoice"> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="card-body"> |
|
<div class="row row-cards"> |
|
<div class="col-lg-12"> |
|
<div class="card"> |
|
<div class="table-responsive"> |
|
<table class="table table-vcenter card-table"> |
|
<thead> |
|
<tr> |
|
<th>Name</th> |
|
<th>Username</th> |
|
<th>Email</th> |
|
<th>Role</th> |
|
<th>Action</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
<tr> |
|
<td >Anindya Akhdan</td> |
|
<td class="text-muted" >akhdan</td> |
|
<td class="text-muted" ><a href="#" class="text-reset">akhdan@gmail.com</a></td> |
|
<td class="text-muted" >Admin</td> |
|
<td> |
|
<a href="" class="btn btn-icon" data-bs-toggle="modal" data-bs-target="#modal-reset-employee" title="Reset Password"> <!--ti ti-key--> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-key" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> |
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> |
|
<path d="M16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1 -4.069 0l-.301 -.301l-6.558 6.558a2 2 0 0 1 -1.239 .578l-.175 .008h-1.172a1 1 0 0 1 -.993 -.883l-.007 -.117v-1.172a2 2 0 0 1 .467 -1.284l.119 -.13l.414 -.414h2v-2h2v-2l2.144 -2.144l-.301 -.301a2.877 2.877 0 0 1 0 -4.069l2.643 -2.643a2.877 2.877 0 0 1 4.069 0z"></path> |
|
<path d="M15 9h.01"></path> |
|
</svg> |
|
</a> |
|
<a href="" class="btn btn-icon" data-bs-toggle="modal" data-bs-target="#modal-edit-employee" title="Edit Data"> <!--ti ti-edit--> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> |
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> |
|
<path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path> |
|
<path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path> |
|
<path d="M16 5l3 3"></path> |
|
</svg> |
|
</a> |
|
<a href="" class="btn btn-icon" data-bs-toggle="modal" data-bs-target="#delete-employee" title="Delete Data"><!--ti ti-trash-filled--> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> |
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> |
|
<path d="M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z" stroke-width="0" fill="currentColor"></path> |
|
<path d="M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z" stroke-width="0" fill="currentColor"></path> |
|
</svg> |
|
</a> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td >Muhammad Nazar</td> |
|
<td class="text-muted" >nazaar</td> |
|
<td class="text-muted" ><a href="#" class="text-reset">m.nazar@gmail.com</a></td> |
|
<td class="text-muted" >User</td> |
|
<td> |
|
<a href="" class="btn btn-icon"> <!--ti ti-key--> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-key" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> |
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> |
|
<path d="M16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1 -4.069 0l-.301 -.301l-6.558 6.558a2 2 0 0 1 -1.239 .578l-.175 .008h-1.172a1 1 0 0 1 -.993 -.883l-.007 -.117v-1.172a2 2 0 0 1 .467 -1.284l.119 -.13l.414 -.414h2v-2h2v-2l2.144 -2.144l-.301 -.301a2.877 2.877 0 0 1 0 -4.069l2.643 -2.643a2.877 2.877 0 0 1 4.069 0z"></path> |
|
<path d="M15 9h.01"></path> |
|
</svg> |
|
</a> |
|
<a href="" class="btn btn-icon" data-bs-toggle="modal" data-bs-target="#modal-edit-employee"><!--ti ti-edit--> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> |
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> |
|
<path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path> |
|
<path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path> |
|
<path d="M16 5l3 3"></path> |
|
</svg> |
|
</a> |
|
<a href="" class="btn btn-icon" data-bs-toggle="modal" data-bs-target="#modal-danger"><!--ti ti-trash-filled--> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> |
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> |
|
<path d="M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z" stroke-width="0" fill="currentColor"></path> |
|
<path d="M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z" stroke-width="0" fill="currentColor"></path> |
|
</svg> |
|
</a> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td >Helmi Rafi</td> |
|
<td class="text-muted" >helmirafi</td> |
|
<td class="text-muted" ><a href="#" class="text-reset">rafii.h@gmail.com</a></td> |
|
<td class="text-muted" >User</td> |
|
<td> |
|
<a href="" class="btn btn-icon"> <!--ti ti-key--> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-key" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> |
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> |
|
<path d="M16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1 -4.069 0l-.301 -.301l-6.558 6.558a2 2 0 0 1 -1.239 .578l-.175 .008h-1.172a1 1 0 0 1 -.993 -.883l-.007 -.117v-1.172a2 2 0 0 1 .467 -1.284l.119 -.13l.414 -.414h2v-2h2v-2l2.144 -2.144l-.301 -.301a2.877 2.877 0 0 1 0 -4.069l2.643 -2.643a2.877 2.877 0 0 1 4.069 0z"></path> |
|
<path d="M15 9h.01"></path> |
|
</svg> |
|
</a> |
|
<a href="" class="btn btn-icon"><!--ti ti-edit--> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> |
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> |
|
<path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path> |
|
<path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path> |
|
<path d="M16 5l3 3"></path> |
|
</svg> |
|
</a> |
|
<a href="" class="btn btn-icon" data-bs-toggle="modal" data-bs-target="#modal-danger"><!--ti ti-trash-filled--> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> |
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> |
|
<path d="M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z" stroke-width="0" fill="currentColor"></path> |
|
<path d="M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z" stroke-width="0" fill="currentColor"></path> |
|
</svg> |
|
</a> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td >Naufal Rabani</td> |
|
<td class="text-muted" >naufaLL</td> |
|
<td class="text-muted" ><a href="#" class="text-reset">naufalUfal@gmail.com</a></td> |
|
<td class="text-muted" >User</td> |
|
<td> |
|
<a href="" class="btn btn-icon"> <!--ti ti-key--> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-key" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> |
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> |
|
<path d="M16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1 -4.069 0l-.301 -.301l-6.558 6.558a2 2 0 0 1 -1.239 .578l-.175 .008h-1.172a1 1 0 0 1 -.993 -.883l-.007 -.117v-1.172a2 2 0 0 1 .467 -1.284l.119 -.13l.414 -.414h2v-2h2v-2l2.144 -2.144l-.301 -.301a2.877 2.877 0 0 1 0 -4.069l2.643 -2.643a2.877 2.877 0 0 1 4.069 0z"></path> |
|
<path d="M15 9h.01"></path> |
|
</svg> |
|
</a> |
|
<a href="" class="btn btn-icon"><!--ti ti-edit--> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> |
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> |
|
<path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path> |
|
<path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path> |
|
<path d="M16 5l3 3"></path> |
|
</svg> |
|
</a> |
|
<a href="" class="btn btn-icon" data-bs-toggle="modal" data-bs-target="#modal-danger"><!--ti ti-trash-filled--> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> |
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> |
|
<path d="M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z" stroke-width="0" fill="currentColor"></path> |
|
<path d="M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z" stroke-width="0" fill="currentColor"></path> |
|
</svg> |
|
</a> |
|
</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="card-footer d-flex align-items-center"> |
|
<p class="m-0 text-muted">Showing <span>1</span> to <span>8</span> of <span>16</span> entries</p> |
|
<ul class="pagination m-0 ms-auto"> |
|
<li class="page-item disabled"> |
|
<a class="page-link" href="#" tabindex="-1" aria-disabled="true"> |
|
<!-- Download SVG icon from http://tabler-icons.io/i/chevron-left --> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 6l-6 6l6 6" /></svg> |
|
prev |
|
</a> |
|
</li> |
|
<li class="page-item"><a class="page-link" href="#">1</a></li> |
|
<li class="page-item active"><a class="page-link" href="#">2</a></li> |
|
<li class="page-item"><a class="page-link" href="#">3</a></li> |
|
<li class="page-item"><a class="page-link" href="#">4</a></li> |
|
<li class="page-item"><a class="page-link" href="#">5</a></li> |
|
<li class="page-item"> |
|
<a class="page-link" href="#"> |
|
next <!-- Download SVG icon from http://tabler-icons.io/i/chevron-right --> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg> |
|
</a> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- Modal Add Employee --> |
|
<div class="modal modal-blur fade" id="modal-add-employee" tabindex="-1" role="dialog" aria-hidden="true"> |
|
<div class="modal-dialog modal-dialog-centered" role="document"> |
|
<div class="modal-content"> |
|
<div class="modal-header"> |
|
<h5 class="modal-title">Add New Employee </h5> |
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> |
|
</div> |
|
<div class="modal-body"> |
|
<form action="" method="post"> |
|
<div class="mb-3"> |
|
<label class="form-label">Username:</label> |
|
<input type="text" class="form-control" name="example-text-input" placeholder="Input Username" autocomplete="off"> |
|
</div> |
|
<div class="mb-3"> |
|
<label class="form-label">Password:</label> |
|
<input type="password" class="form-control" name="example-password-input" placeholder="Input Password" autocomplete="off"> |
|
</div> |
|
<div class="mb-3"> |
|
<label class="form-label">Confirm Password:</label> |
|
<input type="password" class="form-control" name="example-password-input" placeholder="Confirm Password" autocomplete="off"> |
|
</div> |
|
<div class="mb-3"> |
|
<label class="form-label">Nama:</label> |
|
<input type="text" class="form-control" name="example-text-input" placeholder="Input Fullname" autocomplete="off"> |
|
</div> |
|
<div class="mb-3"> |
|
<label class="form-label">Email:</label> |
|
<input type="password" class="form-control" name="example-password-input" placeholder="Input Email" autocomplete="off"> |
|
</div> |
|
<div class="mb-3"> |
|
<label class="form-label">Division:</label> |
|
<input type="password" class="form-control" name="example-password-input" placeholder="Input Division" autocomplete="off"> |
|
</div> |
|
<div class="mb-3"> |
|
<label class="form-label">Supervisor:</label> |
|
<input type="password" class="form-control" name="example-password-input" placeholder="Input Supervisor Name" autocomplete="off"> |
|
</div> |
|
|
|
</div> |
|
<div class="modal-footer"> |
|
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button> |
|
<button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Add</button> |
|
</div> |
|
</form> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- Modal Reset Employee Password --> |
|
<div class="modal modal-blur fade" id="modal-reset-employee" tabindex="-1" role="dialog" aria-hidden="true"> |
|
<div class="modal-dialog modal-sm modal-dialog-centered" role="document"> |
|
<div class="modal-content"> |
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> |
|
<div class="modal-status bg-danger"></div> |
|
<div class="modal-body text-center py-4"> |
|
<!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle --> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-danger icon-lg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.24 3.957l-8.422 14.06a1.989 1.989 0 0 0 1.7 2.983h16.845a1.989 1.989 0 0 0 1.7 -2.983l-8.423 -14.06a1.989 1.989 0 0 0 -3.4 0z" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg> |
|
<h3>Are you sure want to reset this password?</h3> |
|
<div class="text-muted">The password will be changed with a new password!</div> |
|
</div> |
|
<div class="modal-footer"> |
|
<div class="w-100"> |
|
<div class="row"> |
|
<div class="col"><a href="#" class="btn w-100" data-bs-dismiss="modal"> |
|
Cancel |
|
</a></div> |
|
<div class="col"><a type="submit" class="btn btn-danger w-100" data-bs-dismiss="modal"> |
|
Reset Password |
|
</a></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- Modal Edit Employee Data--> |
|
<div class="modal modal-blur fade" id="modal-edit-employee" tabindex="-1" role="dialog" aria-hidden="true"> |
|
<div class="modal-dialog modal-dialog-centered" role="document"> |
|
<div class="modal-content"> |
|
<div class="modal-header"> |
|
<h5 class="modal-title">Edit Employee Data</h5> |
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> |
|
</div> |
|
<div class="modal-body"> |
|
<form action="" method="post"> |
|
<div class="mb-3"> |
|
<label class="form-label">Nama:</label> |
|
<input type="text" class="form-control" name="example-text-input" placeholder="Input name"> |
|
</div> |
|
<div class="mb-3"> |
|
<label class="form-label">Email:</label> |
|
<input type="text" class="form-control" name="example-text-input" placeholder="Input email"> |
|
</div> |
|
<div class="mb-3"> |
|
<label class="form-label">Password:</label> |
|
<input type="password" class="form-control" name="example-password-input" placeholder="Input password"> |
|
</div> |
|
<div class="mb-3"> |
|
<label class="form-label">Konfirmasi Password:</label> |
|
<input type="password" class="form-control" name="example-password-input" placeholder="Confirm password"> |
|
</div> |
|
|
|
</div> |
|
<div class="modal-footer"> |
|
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button> |
|
<button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Save</button> |
|
</div> |
|
</form> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- Modal Delete Employee Data --> |
|
<div class="modal modal-blur fade" id="delete-employee" tabindex="-1" role="dialog" aria-hidden="true"> |
|
<div class="modal-dialog modal-sm modal-dialog-centered" role="document"> |
|
<div class="modal-content"> |
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> |
|
<div class="modal-status bg-danger"></div> |
|
<div class="modal-body text-center py-4"> |
|
<!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle --> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-danger icon-lg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.24 3.957l-8.422 14.06a1.989 1.989 0 0 0 1.7 2.983h16.845a1.989 1.989 0 0 0 1.7 -2.983l-8.423 -14.06a1.989 1.989 0 0 0 -3.4 0z" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg> |
|
<h3>Are you sure want to reset this employee data?</h3> |
|
<div class="text-muted">You cannot restore employee data that has been deleted!</div> |
|
</div> |
|
<div class="modal-footer"> |
|
<div class="w-100"> |
|
<div class="row"> |
|
<div class="col"><a href="#" class="btn w-100" data-bs-dismiss="modal"> |
|
Cancel |
|
</a></div> |
|
<div class="col"><a type="submit" class="btn btn-danger w-100" data-bs-dismiss="modal"> |
|
Delete Data |
|
</a></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
|
|
<!-- Footer --> |
|
<footer class="footer footer-transparent d-print-none"> |
|
<div class="container-xl"> |
|
|
|
</div> |
|
</footer> |
|
</div> |
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- Libs JS --> |
|
<script src="./dist/libs/apexcharts/dist/apexcharts.min.js?1684106062" defer></script> |
|
<script src="./dist/libs/jsvectormap/dist/js/jsvectormap.min.js?1684106062" defer></script> |
|
<script src="./dist/libs/jsvectormap/dist/maps/world.js?1684106062" defer></script> |
|
<script src="./dist/libs/jsvectormap/dist/maps/world-merc.js?1684106062" defer></script> |
|
<!-- Tabler Core --> |
|
<script src="./dist/js/tabler.min.js?1684106062" defer></script> |
|
<script src="./dist/js/demo.min.js?1684106062" defer></script> |
|
<script> |
|
// @formatter:off |
|
document.addEventListener("DOMContentLoaded", function () { |
|
window.ApexCharts && (new ApexCharts(document.getElementById('chart-revenue-bg'), { |
|
chart: { |
|
type: "area", |
|
fontFamily: 'inherit', |
|
height: 40.0, |
|
sparkline: { |
|
enabled: true |
|
}, |
|
animations: { |
|
enabled: false |
|
}, |
|
}, |
|
dataLabels: { |
|
enabled: false, |
|
}, |
|
fill: { |
|
opacity: .16, |
|
type: 'solid' |
|
}, |
|
stroke: { |
|
width: 2, |
|
lineCap: "round", |
|
curve: "smooth", |
|
}, |
|
series: [{ |
|
name: "Profits", |
|
data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67] |
|
}], |
|
tooltip: { |
|
theme: 'dark' |
|
}, |
|
grid: { |
|
strokeDashArray: 4, |
|
}, |
|
xaxis: { |
|
labels: { |
|
padding: 0, |
|
}, |
|
tooltip: { |
|
enabled: false |
|
}, |
|
axisBorder: { |
|
show: false, |
|
}, |
|
type: 'datetime', |
|
}, |
|
yaxis: { |
|
labels: { |
|
padding: 4 |
|
}, |
|
}, |
|
labels: [ |
|
'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19' |
|
], |
|
colors: [tabler.getColor("primary")], |
|
legend: { |
|
show: false, |
|
}, |
|
})).render(); |
|
}); |
|
// @formatter:on |
|
</script> |
|
<script> |
|
// @formatter:off |
|
document.addEventListener("DOMContentLoaded", function () { |
|
window.ApexCharts && (new ApexCharts(document.getElementById('chart-new-clients'), { |
|
chart: { |
|
type: "line", |
|
fontFamily: 'inherit', |
|
height: 40.0, |
|
sparkline: { |
|
enabled: true |
|
}, |
|
animations: { |
|
enabled: false |
|
}, |
|
}, |
|
fill: { |
|
opacity: 1, |
|
}, |
|
stroke: { |
|
width: [2, 1], |
|
dashArray: [0, 3], |
|
lineCap: "round", |
|
curve: "smooth", |
|
}, |
|
series: [{ |
|
name: "May", |
|
data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 4, 46, 39, 62, 51, 35, 41, 67] |
|
},{ |
|
name: "April", |
|
data: [93, 54, 51, 24, 35, 35, 31, 67, 19, 43, 28, 36, 62, 61, 27, 39, 35, 41, 27, 35, 51, 46, 62, 37, 44, 53, 41, 65, 39, 37] |
|
}], |
|
tooltip: { |
|
theme: 'dark' |
|
}, |
|
grid: { |
|
strokeDashArray: 4, |
|
}, |
|
xaxis: { |
|
labels: { |
|
padding: 0, |
|
}, |
|
tooltip: { |
|
enabled: false |
|
}, |
|
type: 'datetime', |
|
}, |
|
yaxis: { |
|
labels: { |
|
padding: 4 |
|
}, |
|
}, |
|
labels: [ |
|
'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19' |
|
], |
|
colors: [tabler.getColor("primary"), tabler.getColor("gray-600")], |
|
legend: { |
|
show: false, |
|
}, |
|
})).render(); |
|
}); |
|
// @formatter:on |
|
</script> |
|
<script> |
|
// @formatter:off |
|
document.addEventListener("DOMContentLoaded", function () { |
|
window.ApexCharts && (new ApexCharts(document.getElementById('chart-active-users'), { |
|
chart: { |
|
type: "bar", |
|
fontFamily: 'inherit', |
|
height: 40.0, |
|
sparkline: { |
|
enabled: true |
|
}, |
|
animations: { |
|
enabled: false |
|
}, |
|
}, |
|
plotOptions: { |
|
bar: { |
|
columnWidth: '50%', |
|
} |
|
}, |
|
dataLabels: { |
|
enabled: false, |
|
}, |
|
fill: { |
|
opacity: 1, |
|
}, |
|
series: [{ |
|
name: "Profits", |
|
data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67] |
|
}], |
|
tooltip: { |
|
theme: 'dark' |
|
}, |
|
grid: { |
|
strokeDashArray: 4, |
|
}, |
|
xaxis: { |
|
labels: { |
|
padding: 0, |
|
}, |
|
tooltip: { |
|
enabled: false |
|
}, |
|
axisBorder: { |
|
show: false, |
|
}, |
|
type: 'datetime', |
|
}, |
|
yaxis: { |
|
labels: { |
|
padding: 4 |
|
}, |
|
}, |
|
labels: [ |
|
'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19' |
|
], |
|
colors: [tabler.getColor("primary")], |
|
legend: { |
|
show: false, |
|
}, |
|
})).render(); |
|
}); |
|
// @formatter:on |
|
</script> |
|
<script> |
|
// @formatter:off |
|
document.addEventListener("DOMContentLoaded", function () { |
|
window.ApexCharts && (new ApexCharts(document.getElementById('chart-mentions'), { |
|
chart: { |
|
type: "bar", |
|
fontFamily: 'inherit', |
|
height: 240, |
|
parentHeightOffset: 0, |
|
toolbar: { |
|
show: false, |
|
}, |
|
animations: { |
|
enabled: false |
|
}, |
|
stacked: true, |
|
}, |
|
plotOptions: { |
|
bar: { |
|
columnWidth: '50%', |
|
} |
|
}, |
|
dataLabels: { |
|
enabled: false, |
|
}, |
|
fill: { |
|
opacity: 1, |
|
}, |
|
series: [{ |
|
name: "Web", |
|
data: [1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 2, 12, 5, 8, 22, 6, 8, 6, 4, 1, 8, 24, 29, 51, 40, 47, 23, 26, 50, 26, 41, 22, 46, 47, 81, 46, 6] |
|
},{ |
|
name: "Social", |
|
data: [2, 5, 4, 3, 3, 1, 4, 7, 5, 1, 2, 5, 3, 2, 6, 7, 7, 1, 5, 5, 2, 12, 4, 6, 18, 3, 5, 2, 13, 15, 20, 47, 18, 15, 11, 10, 0] |
|
},{ |
|
name: "Other", |
|
data: [2, 9, 1, 7, 8, 3, 6, 5, 5, 4, 6, 4, 1, 9, 3, 6, 7, 5, 2, 8, 4, 9, 1, 2, 6, 7, 5, 1, 8, 3, 2, 3, 4, 9, 7, 1, 6] |
|
}], |
|
tooltip: { |
|
theme: 'dark' |
|
}, |
|
grid: { |
|
padding: { |
|
top: -20, |
|
right: 0, |
|
left: -4, |
|
bottom: -4 |
|
}, |
|
strokeDashArray: 4, |
|
xaxis: { |
|
lines: { |
|
show: true |
|
} |
|
}, |
|
}, |
|
xaxis: { |
|
labels: { |
|
padding: 0, |
|
}, |
|
tooltip: { |
|
enabled: false |
|
}, |
|
axisBorder: { |
|
show: false, |
|
}, |
|
type: 'datetime', |
|
}, |
|
yaxis: { |
|
labels: { |
|
padding: 4 |
|
}, |
|
}, |
|
labels: [ |
|
'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19', '2020-07-20', '2020-07-21', '2020-07-22', '2020-07-23', '2020-07-24', '2020-07-25', '2020-07-26' |
|
], |
|
colors: [tabler.getColor("primary"), tabler.getColor("primary", 0.8), tabler.getColor("green", 0.8)], |
|
legend: { |
|
show: false, |
|
}, |
|
})).render(); |
|
}); |
|
// @formatter:on |
|
</script> |
|
<script> |
|
// @formatter:on |
|
document.addEventListener("DOMContentLoaded", function() { |
|
const map = new jsVectorMap({ |
|
selector: '#map-world', |
|
map: 'world', |
|
backgroundColor: 'transparent', |
|
regionStyle: { |
|
initial: { |
|
fill: tabler.getColor('body-bg'), |
|
stroke: tabler.getColor('border-color'), |
|
strokeWidth: 2, |
|
} |
|
}, |
|
zoomOnScroll: false, |
|
zoomButtons: false, |
|
// -------- Series -------- |
|
visualizeData: { |
|
scale: [tabler.getColor('bg-surface'), tabler.getColor('primary')], |
|
values: { "AF": 16, "AL": 11, "DZ": 158, "AO": 85, "AG": 1, "AR": 351, "AM": 8, "AU": 1219, "AT": 366, "AZ": 52, "BS": 7, "BH": 21, "BD": 105, "BB": 3, "BY": 52, "BE": 461, "BZ": 1, "BJ": 6, "BT": 1, "BO": 19, "BA": 16, "BW": 12, "BR": 2023, "BN": 11, "BG": 44, "BF": 8, "BI": 1, "KH": 11, "CM": 21, "CA": 1563, "CV": 1, "CF": 2, "TD": 7, "CL": 199, "CN": 5745, "CO": 283, "KM": 0, "CD": 12, "CG": 11, "CR": 35, "CI": 22, "HR": 59, "CY": 22, "CZ": 195, "DK": 304, "DJ": 1, "DM": 0, "DO": 50, "EC": 61, "EG": 216, "SV": 21, "GQ": 14, "ER": 2, "EE": 19, "ET": 30, "FJ": 3, "FI": 231, "FR": 2555, "GA": 12, "GM": 1, "GE": 11, "DE": 3305, "GH": 18, "GR": 305, "GD": 0, "GT": 40, "GN": 4, "GW": 0, "GY": 2, "HT": 6, "HN": 15, "HK": 226, "HU": 132, "IS": 12, "IN": 1430, "ID": 695, "IR": 337, "IQ": 84, "IE": 204, "IL": 201, "IT": 2036, "JM": 13, "JP": 5390, "JO": 27, "KZ": 129, "KE": 32, "KI": 0, "KR": 986, "KW": 117, "KG": 4, "LA": 6, "LV": 23, "LB": 39, "LS": 1, "LR": 0, "LY": 77, "LT": 35, "LU": 52, "MK": 9, "MG": 8, "MW": 5, "MY": 218, "MV": 1, "ML": 9, "MT": 7, "MR": 3, "MU": 9, "MX": 1004, "MD": 5, "MN": 5, "ME": 3, "MA": 91, "MZ": 10, "MM": 35, "NA": 11, "NP": 15, "NL": 770, "NZ": 138, "NI": 6, "NE": 5, "NG": 206, "NO": 413, "OM": 53, "PK": 174, "PA": 27, "PG": 8, "PY": 17, "PE": 153, "PH": 189, "PL": 438, "PT": 223, "QA": 126, "RO": 158, "RU": 1476, "RW": 5, "WS": 0, "ST": 0, "SA": 434, "SN": 12, "RS": 38, "SC": 0, "SL": 1, "SG": 217, "SK": 86, "SI": 46, "SB": 0, "ZA": 354, "ES": 1374, "LK": 48, "KN": 0, "LC": 1, "VC": 0, "SD": 65, "SR": 3, "SZ": 3, "SE": 444, "CH": 522, "SY": 59, "TW": 426, "TJ": 5, "TZ": 22, "TH": 312, "TL": 0, "TG": 3, "TO": 0, "TT": 21, "TN": 43, "TR": 729, "TM": 0, "UG": 17, "UA": 136, "AE": 239, "GB": 2258, "US": 4624, "UY": 40, "UZ": 37, "VU": 0, "VE": 285, "VN": 101, "YE": 30, "ZM": 15, "ZW": 5 }, |
|
}, |
|
}); |
|
window.addEventListener("resize", () => { |
|
map.updateSize(); |
|
}); |
|
}); |
|
// @formatter:off |
|
</script> |
|
<script> |
|
// @formatter:off |
|
document.addEventListener("DOMContentLoaded", function () { |
|
window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-activity'), { |
|
chart: { |
|
type: "radialBar", |
|
fontFamily: 'inherit', |
|
height: 40, |
|
width: 40, |
|
animations: { |
|
enabled: false |
|
}, |
|
sparkline: { |
|
enabled: true |
|
}, |
|
}, |
|
tooltip: { |
|
enabled: false, |
|
}, |
|
plotOptions: { |
|
radialBar: { |
|
hollow: { |
|
margin: 0, |
|
size: '75%' |
|
}, |
|
track: { |
|
margin: 0 |
|
}, |
|
dataLabels: { |
|
show: false |
|
} |
|
} |
|
}, |
|
colors: [tabler.getColor("blue")], |
|
series: [35], |
|
})).render(); |
|
}); |
|
// @formatter:on |
|
</script> |
|
<script> |
|
// @formatter:off |
|
document.addEventListener("DOMContentLoaded", function () { |
|
window.ApexCharts && (new ApexCharts(document.getElementById('chart-development-activity'), { |
|
chart: { |
|
type: "area", |
|
fontFamily: 'inherit', |
|
height: 192, |
|
sparkline: { |
|
enabled: true |
|
}, |
|
animations: { |
|
enabled: false |
|
}, |
|
}, |
|
dataLabels: { |
|
enabled: false, |
|
}, |
|
fill: { |
|
opacity: .16, |
|
type: 'solid' |
|
}, |
|
stroke: { |
|
width: 2, |
|
lineCap: "round", |
|
curve: "smooth", |
|
}, |
|
series: [{ |
|
name: "Purchases", |
|
data: [3, 5, 4, 6, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 8, 4, 14, 30, 17, 19, 15, 14, 25, 32, 40, 55, 60, 48, 52, 70] |
|
}], |
|
tooltip: { |
|
theme: 'dark' |
|
}, |
|
grid: { |
|
strokeDashArray: 4, |
|
}, |
|
xaxis: { |
|
labels: { |
|
padding: 0, |
|
}, |
|
tooltip: { |
|
enabled: false |
|
}, |
|
axisBorder: { |
|
show: false, |
|
}, |
|
type: 'datetime', |
|
}, |
|
yaxis: { |
|
labels: { |
|
padding: 4 |
|
}, |
|
}, |
|
labels: [ |
|
'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19' |
|
], |
|
colors: [tabler.getColor("primary")], |
|
legend: { |
|
show: false, |
|
}, |
|
point: { |
|
show: false |
|
}, |
|
})).render(); |
|
}); |
|
// @formatter:on |
|
</script> |
|
<script> |
|
// @formatter:off |
|
document.addEventListener("DOMContentLoaded", function () { |
|
window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-1'), { |
|
chart: { |
|
type: "line", |
|
fontFamily: 'inherit', |
|
height: 24, |
|
animations: { |
|
enabled: false |
|
}, |
|
sparkline: { |
|
enabled: true |
|
}, |
|
}, |
|
tooltip: { |
|
enabled: false, |
|
}, |
|
stroke: { |
|
width: 2, |
|
lineCap: "round", |
|
}, |
|
series: [{ |
|
color: tabler.getColor("primary"), |
|
data: [17, 24, 20, 10, 5, 1, 4, 18, 13] |
|
}], |
|
})).render(); |
|
}); |
|
// @formatter:on |
|
</script> |
|
<script> |
|
// @formatter:off |
|
document.addEventListener("DOMContentLoaded", function () { |
|
window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-2'), { |
|
chart: { |
|
type: "line", |
|
fontFamily: 'inherit', |
|
height: 24, |
|
animations: { |
|
enabled: false |
|
}, |
|
sparkline: { |
|
enabled: true |
|
}, |
|
}, |
|
tooltip: { |
|
enabled: false, |
|
}, |
|
stroke: { |
|
width: 2, |
|
lineCap: "round", |
|
}, |
|
series: [{ |
|
color: tabler.getColor("primary"), |
|
data: [13, 11, 19, 22, 12, 7, 14, 3, 21] |
|
}], |
|
})).render(); |
|
}); |
|
// @formatter:on |
|
</script> |
|
<script> |
|
// @formatter:off |
|
document.addEventListener("DOMContentLoaded", function () { |
|
window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-3'), { |
|
chart: { |
|
type: "line", |
|
fontFamily: 'inherit', |
|
height: 24, |
|
animations: { |
|
enabled: false |
|
}, |
|
sparkline: { |
|
enabled: true |
|
}, |
|
}, |
|
tooltip: { |
|
enabled: false, |
|
}, |
|
stroke: { |
|
width: 2, |
|
lineCap: "round", |
|
}, |
|
series: [{ |
|
color: tabler.getColor("primary"), |
|
data: [10, 13, 10, 4, 17, 3, 23, 22, 19] |
|
}], |
|
})).render(); |
|
}); |
|
// @formatter:on |
|
</script> |
|
<script> |
|
// @formatter:off |
|
document.addEventListener("DOMContentLoaded", function () { |
|
window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-4'), { |
|
chart: { |
|
type: "line", |
|
fontFamily: 'inherit', |
|
height: 24, |
|
animations: { |
|
enabled: false |
|
}, |
|
sparkline: { |
|
enabled: true |
|
}, |
|
}, |
|
tooltip: { |
|
enabled: false, |
|
}, |
|
stroke: { |
|
width: 2, |
|
lineCap: "round", |
|
}, |
|
series: [{ |
|
color: tabler.getColor("primary"), |
|
data: [6, 15, 13, 13, 5, 7, 17, 20, 19] |
|
}], |
|
})).render(); |
|
}); |
|
// @formatter:on |
|
</script> |
|
<script> |
|
// @formatter:off |
|
document.addEventListener("DOMContentLoaded", function () { |
|
window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-5'), { |
|
chart: { |
|
type: "line", |
|
fontFamily: 'inherit', |
|
height: 24, |
|
animations: { |
|
enabled: false |
|
}, |
|
sparkline: { |
|
enabled: true |
|
}, |
|
}, |
|
tooltip: { |
|
enabled: false, |
|
}, |
|
stroke: { |
|
width: 2, |
|
lineCap: "round", |
|
}, |
|
series: [{ |
|
color: tabler.getColor("primary"), |
|
data: [2, 11, 15, 14, 21, 20, 8, 23, 18, 14] |
|
}], |
|
})).render(); |
|
}); |
|
// @formatter:on |
|
</script> |
|
<script> |
|
// @formatter:off |
|
document.addEventListener("DOMContentLoaded", function () { |
|
window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-6'), { |
|
chart: { |
|
type: "line", |
|
fontFamily: 'inherit', |
|
height: 24, |
|
animations: { |
|
enabled: false |
|
}, |
|
sparkline: { |
|
enabled: true |
|
}, |
|
}, |
|
tooltip: { |
|
enabled: false, |
|
}, |
|
stroke: { |
|
width: 2, |
|
lineCap: "round", |
|
}, |
|
series: [{ |
|
color: tabler.getColor("primary"), |
|
data: [22, 12, 7, 14, 3, 21, 8, 23, 18, 14] |
|
}], |
|
})).render(); |
|
}); |
|
// @formatter:on |
|
</script> |
|
</body> |
|
</html> |