safirawln
/
admin
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
No Description
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.
1 Commit
1 Branch
Tree: 854166ba68
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '854166ba68'
${ noResults }
admin/static/index.html

index.html 37KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173 
  1. <!DOCTYPE html>

  2. <html lang="en">

  3. 

  4. <head>

  5. 	<meta charset="utf-8">

  6. 	<meta http-equiv="X-UA-Compatible" content="IE=edge">

  7. 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  8. 	<meta name="description" content="Responsive Admin &amp; Dashboard Template based on Bootstrap 5">

  9. 	<meta name="author" content="Admin">

  10. 	<meta name="keywords" content="admin, bootstrap, bootstrap 5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui , web">

  11. 

  12. 	<link rel="preconnect" href="https://fonts.gstatic.com">

  13. 	<link rel="shortcut icon" href="img/icons/icon-48x48.png" />

  14. 

  15. 	<link rel="canonical" href="https://demo-basic.admin.io/" />

  16. 

  17. 	<title>Admin Demo</title>

  18. 

  19. 	<link href="css/app.css" rel="stylesheet">

  20. 	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet">

  21. 	<!-- Bootstrap CSS -->

  22. 	<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">

  23. 

  24. 	<!-- DataTables CSS -->

  25. 	<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">

  26.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

  27. 

  28. 	<style>

  29. 		.bottom-menu {

  30.             position: fixed;

  31.             bottom: 0;

  32.             left: 0;

  33.             width: 100%;

  34.             background-color: #333;

  35.             display: flex;

  36.             justify-content: space-around;

  37.             padding: 10px;

  38.             box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.2);

  39. 			border-top-left-radius: 15px;

  40. 			border-top-right-radius: 15px;

  41.         }

  42. 

  43.         .bottom-menu a {

  44.             color: #fff;

  45.             text-decoration: none;

  46.             display: flex;

  47.             flex-direction: column;

  48.             align-items: center;

  49.             font-size: 14px;

  50.         }

  51. 

  52. 		.bottom-menu a:hover {

  53. 			color: #ffd700;

  54. 		}

  55. 

  56.         .bottom-menu i {

  57.             font-size: 24px;

  58.             margin-bottom: 5px;

  59.         }

  60. 

  61. 		.chart_card {

  62.             width: 100%;

  63.             text-align: center;

  64.         }

  65. 

  66.         .chart_card canvas {

  67.             max-width: 100%;

  68.             height: auto;

  69.         }

  70. 	</style>

  71. </head>

  72. 

  73. <body>

  74. 	<div class="wrapper">

  75. 		<!-- <nav id="sidebar" class="sidebar js-sidebar">

  76. 			<div class="sidebar-content js-simplebar">

  77. 				<a class="sidebar-brand" href="index.html">

  78.           <span class="align-middle">Admin</span>

  79.         </a>

  80. 

  81. 				<ul class="sidebar-nav">

  82. 					<li class="sidebar-header">

  83. 						Pages

  84. 					</li>

  85. 

  86. 					<li class="sidebar-item active">

  87. 						<a class="sidebar-link" href="index.html">

  88.               <i class="align-middle" data-feather="sliders"></i> <span class="align-middle">Dashboard</span>

  89.             </a>

  90. 					</li>

  91. 

  92. 					<li class="sidebar-item">

  93. 						<a class="sidebar-link" href="pages-profile.html">

  94.               <i class="align-middle" data-feather="user"></i> <span class="align-middle">Profile</span>

  95.             </a>

  96. 					</li>

  97. 

  98. 					<li class="sidebar-item">

  99. 						<a class="sidebar-link" href="pages-sign-in.html">

  100.               <i class="align-middle" data-feather="log-in"></i> <span class="align-middle">Sign In</span>

  101.             </a>

  102. 					</li>

  103. 

  104. 					<li class="sidebar-item">

  105. 						<a class="sidebar-link" href="pages-sign-up.html">

  106.               <i class="align-middle" data-feather="user-plus"></i> <span class="align-middle">Sign Up</span>

  107.             </a>

  108. 					</li>

  109. 

  110. 					<li class="sidebar-item">

  111. 						<a class="sidebar-link" href="pages-blank.html">

  112.               <i class="align-middle" data-feather="book"></i> <span class="align-middle">Blank</span>

  113.             </a>

  114. 					</li>

  115. 

  116. 					<li class="sidebar-header">

  117. 						Tools & Components

  118. 					</li>

  119. 

  120. 					<li class="sidebar-item">

  121. 						<a class="sidebar-link" href="ui-buttons.html">

  122.               <i class="align-middle" data-feather="square"></i> <span class="align-middle">Buttons</span>

  123.             </a>

  124. 					</li>

  125. 

  126. 					<li class="sidebar-item">

  127. 						<a class="sidebar-link" href="ui-forms.html">

  128.               <i class="align-middle" data-feather="check-square"></i> <span class="align-middle">Forms</span>

  129.             </a>

  130. 					</li>

  131. 

  132. 					<li class="sidebar-item">

  133. 						<a class="sidebar-link" href="ui-cards.html">

  134.               <i class="align-middle" data-feather="grid"></i> <span class="align-middle">Cards</span>

  135.             </a>

  136. 					</li>

  137. 

  138. 					<li class="sidebar-item">

  139. 						<a class="sidebar-link" href="ui-typography.html">

  140.               <i class="align-middle" data-feather="align-left"></i> <span class="align-middle">Typography</span>

  141.             </a>

  142. 					</li>

  143. 

  144. 					<li class="sidebar-item">

  145. 						<a class="sidebar-link" href="icons-feather.html">

  146.               <i class="align-middle" data-feather="coffee"></i> <span class="align-middle">Icons</span>

  147.             </a>

  148. 					</li>

  149. 

  150. 					<li class="sidebar-header">

  151. 						Plugins & Addons

  152. 					</li>

  153. 

  154. 					<li class="sidebar-item">

  155. 						<a class="sidebar-link" href="charts-chartjs.html">

  156.               <i class="align-middle" data-feather="bar-chart-2"></i> <span class="align-middle">Charts</span>

  157.             </a>

  158. 					</li>

  159. 

  160. 					<li class="sidebar-item">

  161. 						<a class="sidebar-link" href="maps-google.html">

  162.               <i class="align-middle" data-feather="map"></i> <span class="align-middle">Maps</span>

  163.             </a>

  164. 					</li>

  165. 				</ul>

  166. 

  167. 				<div class="sidebar-cta">

  168. 					<div class="sidebar-cta-content">

  169. 						<strong class="d-inline-block mb-2">Upgrade to Pro</strong>

  170. 						<div class="mb-3 text-sm">

  171. 							Are you looking for more components? Check out our premium version.

  172. 						</div>

  173. 						<div class="d-grid">

  174. 							<a href="upgrade-to-pro.html" class="btn btn-primary">Upgrade to Pro</a>

  175. 						</div>

  176. 					</div>

  177. 				</div>

  178. 			</div>

  179. 		</nav> -->

  180. 

  181. 		<div class="main">

  182. 			<nav class="navbar navbar-expand navbar-light navbar-bg">

  183. 				<!-- <a class="sidebar-toggle js-sidebar-toggle">

  184.           <i class="hamburger align-self-center"></i>

  185.         </a> -->

  186. 

  187. 				<div class="navbar-collapse collapse">

  188. 					<ul class="navbar-nav navbar-align">

  189. 						<li class="nav-item dropdown">

  190. 							<a class="nav-icon dropdown-toggle" href="#" id="alertsDropdown" data-bs-toggle="dropdown">

  191. 								<div class="position-relative">

  192. 									<i class="align-middle" data-feather="bell"></i>

  193. 									<span class="indicator">4</span>

  194. 								</div>

  195. 							</a>

  196. 							<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end py-0" aria-labelledby="alertsDropdown">

  197. 								<div class="dropdown-menu-header">

  198. 									4 New Notifications

  199. 								</div>

  200. 								<div class="list-group">

  201. 									<a href="#" class="list-group-item">

  202. 										<div class="row g-0 align-items-center">

  203. 											<div class="col-2">

  204. 												<i class="text-danger" data-feather="alert-circle"></i>

  205. 											</div>

  206. 											<div class="col-10">

  207. 												<div class="text-dark">Update completed</div>

  208. 												<div class="text-muted small mt-1">Restart server 12 to complete the update.</div>

  209. 												<div class="text-muted small mt-1">30m ago</div>

  210. 											</div>

  211. 										</div>

  212. 									</a>

  213. 									<a href="#" class="list-group-item">

  214. 										<div class="row g-0 align-items-center">

  215. 											<div class="col-2">

  216. 												<i class="text-warning" data-feather="bell"></i>

  217. 											</div>

  218. 											<div class="col-10">

  219. 												<div class="text-dark">Lorem ipsum</div>

  220. 												<div class="text-muted small mt-1">Aliquam ex eros, imperdiet vulputate hendrerit et.</div>

  221. 												<div class="text-muted small mt-1">2h ago</div>

  222. 											</div>

  223. 										</div>

  224. 									</a>

  225. 									<a href="#" class="list-group-item">

  226. 										<div class="row g-0 align-items-center">

  227. 											<div class="col-2">

  228. 												<i class="text-primary" data-feather="home"></i>

  229. 											</div>

  230. 											<div class="col-10">

  231. 												<div class="text-dark">Login from 192.186.1.8</div>

  232. 												<div class="text-muted small mt-1">5h ago</div>

  233. 											</div>

  234. 										</div>

  235. 									</a>

  236. 									<a href="#" class="list-group-item">

  237. 										<div class="row g-0 align-items-center">

  238. 											<div class="col-2">

  239. 												<i class="text-success" data-feather="user-plus"></i>

  240. 											</div>

  241. 											<div class="col-10">

  242. 												<div class="text-dark">New connection</div>

  243. 												<div class="text-muted small mt-1">Christina accepted your request.</div>

  244. 												<div class="text-muted small mt-1">14h ago</div>

  245. 											</div>

  246. 										</div>

  247. 									</a>

  248. 								</div>

  249. 								<div class="dropdown-menu-footer">

  250. 									<a href="#" class="text-muted">Show all notifications</a>

  251. 								</div>

  252. 							</div>

  253. 						</li>

  254. 						<li class="nav-item dropdown">

  255. 							<a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" data-bs-toggle="dropdown">

  256. 								<div class="position-relative">

  257. 									<i class="align-middle" data-feather="message-square"></i>

  258. 								</div>

  259. 							</a>

  260. 							<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end py-0" aria-labelledby="messagesDropdown">

  261. 								<div class="dropdown-menu-header">

  262. 									<div class="position-relative">

  263. 										4 New Messages

  264. 									</div>

  265. 								</div>

  266. 								<div class="list-group">

  267. 									<a href="#" class="list-group-item">

  268. 										<div class="row g-0 align-items-center">

  269. 											<div class="col-2">

  270. 												<img src="img/avatars/avatar-5.jpg" class="avatar img-fluid rounded-circle" alt="Vanessa Tucker">

  271. 											</div>

  272. 											<div class="col-10 ps-2">

  273. 												<div class="text-dark">Vanessa Tucker</div>

  274. 												<div class="text-muted small mt-1">Nam pretium turpis et arcu. Duis arcu tortor.</div>

  275. 												<div class="text-muted small mt-1">15m ago</div>

  276. 											</div>

  277. 										</div>

  278. 									</a>

  279. 									<a href="#" class="list-group-item">

  280. 										<div class="row g-0 align-items-center">

  281. 											<div class="col-2">

  282. 												<img src="img/avatars/avatar-2.jpg" class="avatar img-fluid rounded-circle" alt="William Harris">

  283. 											</div>

  284. 											<div class="col-10 ps-2">

  285. 												<div class="text-dark">William Harris</div>

  286. 												<div class="text-muted small mt-1">Curabitur ligula sapien euismod vitae.</div>

  287. 												<div class="text-muted small mt-1">2h ago</div>

  288. 											</div>

  289. 										</div>

  290. 									</a>

  291. 									<a href="#" class="list-group-item">

  292. 										<div class="row g-0 align-items-center">

  293. 											<div class="col-2">

  294. 												<img src="img/avatars/avatar-4.jpg" class="avatar img-fluid rounded-circle" alt="Christina Mason">

  295. 											</div>

  296. 											<div class="col-10 ps-2">

  297. 												<div class="text-dark">Christina Mason</div>

  298. 												<div class="text-muted small mt-1">Pellentesque auctor neque nec urna.</div>

  299. 												<div class="text-muted small mt-1">4h ago</div>

  300. 											</div>

  301. 										</div>

  302. 									</a>

  303. 									<a href="#" class="list-group-item">

  304. 										<div class="row g-0 align-items-center">

  305. 											<div class="col-2">

  306. 												<img src="img/avatars/avatar-3.jpg" class="avatar img-fluid rounded-circle" alt="Sharon Lessman">

  307. 											</div>

  308. 											<div class="col-10 ps-2">

  309. 												<div class="text-dark">Sharon Lessman</div>

  310. 												<div class="text-muted small mt-1">Aenean tellus metus, bibendum sed, posuere ac, mattis non.</div>

  311. 												<div class="text-muted small mt-1">5h ago</div>

  312. 											</div>

  313. 										</div>

  314. 									</a>

  315. 								</div>

  316. 								<div class="dropdown-menu-footer">

  317. 									<a href="#" class="text-muted">Show all messages</a>

  318. 								</div>

  319. 							</div>

  320. 						</li>

  321. 						<li class="nav-item dropdown">

  322. 							<a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#" data-bs-toggle="dropdown">

  323.                 <i class="align-middle" data-feather="settings"></i>

  324.               </a>

  325. 

  326. 							<a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" data-bs-toggle="dropdown">

  327.                 <img src="img/avatars/avatar.jpg" class="avatar img-fluid rounded me-1" alt="Charles Hall" /> <span class="text-dark">Charles Hall</span>

  328.               </a>

  329. 							<div class="dropdown-menu dropdown-menu-end">

  330. 								<a class="dropdown-item" href="pages-profile.html"><i class="align-middle me-1" data-feather="user"></i> Profile</a>

  331. 								<a class="dropdown-item" href="#"><i class="align-middle me-1" data-feather="pie-chart"></i> Analytics</a>

  332. 								<div class="dropdown-divider"></div>

  333. 								<a class="dropdown-item" href="index.html"><i class="align-middle me-1" data-feather="settings"></i> Settings & Privacy</a>

  334. 								<a class="dropdown-item" href="#"><i class="align-middle me-1" data-feather="help-circle"></i> Help Center</a>

  335. 								<div class="dropdown-divider"></div>

  336. 								<a class="dropdown-item" href="#">Log out</a>

  337. 							</div>

  338. 						</li>

  339. 					</ul>

  340. 				</div>

  341. 			</nav>

  342. 

  343. 			<main class="content">

  344. 				<div class="container">

  345. 					<div class="row mb-3">

  346. 						<div class="col-12 col-sm-6 col-md-3">

  347. 							<label for="select1" class="form-label">Filter Provider</label>

  348. 							<select class="form-select" id="select1" aria-label="Select 1">

  349. 								<option selected>All Provider</option>

  350. 								<option value="1">One</option>

  351. 								<option value="2">Two</option>

  352. 								<option value="3">Three</option>

  353. 							</select>

  354. 						</div>

  355. 						<div class="col-12 col-sm-6 col-md-3">

  356. 							<label for="select1" class="form-label">Filter Package</label>

  357. 							<select class="form-select" id="select1" aria-label="Select 1">

  358. 								<option selected>All Package</option>

  359. 								<option value="1">One</option>

  360. 								<option value="2">Two</option>

  361. 								<option value="3">Three</option>

  362. 							</select>

  363. 						</div>

  364. 						<div class="col-12 col-sm-6 col-md-3">

  365. 							<label for="select1" class="form-label">Filter Batch</label>

  366. 							<select class="form-select" id="select1" aria-label="Select 1">

  367. 								<option selected>All Batch</option>

  368. 								<option value="1">One</option>

  369. 								<option value="2">Two</option>

  370. 								<option value="3">Three</option>

  371. 							</select>

  372. 						</div>

  373. 

  374. 						<div class="col-12 col-sm-6 col-md-3">

  375. 							<label for="select1" class="form-label">Action</label>

  376. 							<div class="d-flex" style="display: inline-block;">

  377. 								<button type="button" class="btn btn-primary">Filter</button>

  378. 								<button type="button" class="btn btn-secondary" style="margin-left: 5px;">Reset</button>

  379. 							</div>

  380. 						</div>						

  381. 					</div>

  382. 				</div>

  383. 				

  384. 				<div class="col-12 col-md-12 col-xxl-6 d-flex order-3 order-xxl-2">

  385. 					<div class="card flex-fill w-100">

  386. 						<div class="card-header">

  387. 

  388. 							<h5 class="card-title mb-0">Real-Time</h5>

  389. 						</div>

  390. 						<div class="card-body px-4">

  391. 							<div id="world_map" style="height:350px;"></div>

  392. 						</div>

  393. 					</div>

  394. 				</div>

  395. 

  396. 				<div class="container-fluid p-0">

  397. 

  398. 					<!-- <h1 class="h3 mb-3"><strong>Analytics</strong> Dashboard</h1> -->

  399. 

  400. 					<div class="row d-flex justify-content-between">

  401. 						<div class="col-12 col-md-2">

  402. 							<div class="card">

  403. 								<div>

  404. 									<h5 class="card-body" style="color: #939ba2; font-size: .925rem; font-weight: 600;">GAC</h5>

  405. 									<div class="chart chart-xs">

  406. 										<canvas id="pieChart1" width="50" height="50"></canvas>

  407. 									</div>

  408. 								</div>

  409. 							</div>

  410. 						</div>

  411. 					

  412. 						<div class="col-12 col-md-2">

  413. 							<div class="card">

  414. 								<div>

  415. 									<h5 class="card-body" style="color: #939ba2; font-size: .925rem; font-weight: 600;">MOA</h5>

  416. 									<div class="chart chart-xs">

  417. 										<canvas id="pieChart2" width="50" height="50"></canvas>

  418. 									</div>

  419. 								</div>

  420. 							</div>

  421. 						</div>

  422. 					

  423. 						<div class="col-12 col-md-2">

  424. 							<div class="card">

  425. 								<div>

  426. 									<h5 class="card-body" style="color: #939ba2; font-size: .925rem; font-weight: 600;">BAUP</h5>

  427. 									<div class="chart chart-xs">

  428. 										<canvas id="pieChart3" width="50" height="50"></canvas>

  429. 									</div>

  430. 								</div>

  431. 							</div>

  432. 						</div>

  433. 					

  434. 						<div class="col-12 col-md-2">

  435. 							<div class="card">

  436. 								<div>

  437. 									<h5 class="card-body" style="color: #939ba2; font-size: .925rem; font-weight: 600;">BAPHP</h5>

  438. 									<div class="chart chart-xs">

  439. 										<canvas id="pieChart4" width="50" height="50"></canvas>

  440. 									</div>

  441. 								</div>

  442. 							</div>

  443. 						</div>

  444. 					

  445. 						<div class="col-12 col-md-2">

  446. 							<div class="card">

  447. 								<div>

  448. 									<h5 class="card-body" style="color: #939ba2; font-size: .925rem; font-weight: 600;">BAL</h5>

  449. 									<div class="chart chart-xs">

  450. 										<canvas id="pieChart5" width="50" height="50"></canvas>

  451. 									</div>

  452. 								</div>

  453. 							</div>

  454. 						</div>

  455. 					</div>							

  456. 

  457. 					<!-- <div class="row">

  458. 						<div class="col-xl-6 col-xxl-5 d-flex">

  459. 							<div class="w-100">

  460. 								<div class="row">

  461. 									<div class="col-3 ">

  462. 										<div class="card">

  463. 											<div class="card-body">

  464. 												<div class="row">

  465. 													<div class="col mt-0">

  466. 														<h5 class="card-title">Sales</h5>

  467. 													</div>

  468. 

  469. 													<div class="col-auto">

  470. 														<div class="chart chart-xs">

  471. 															<i class="align-middle" data-feather="truck"></i>

  472. 														</div>

  473. 													</div>

  474. 												</div>

  475. 												<h1 class="mt-1 mb-3">2.382</h1>

  476. 												<div class="mb-0">

  477. 													<span class="text-danger"> <i class="mdi mdi-arrow-bottom-right"></i> -3.65% </span>

  478. 													<span class="text-muted">Since last week</span>

  479. 												</div>

  480. 											</div>

  481. 										</div>

  482. 									</div>

  483. 									<div class="col-3 ">

  484. 										<div class="card">

  485. 											<div class="card-body">

  486. 												<div class="row">

  487. 													<div class="col mt-0">

  488. 														<h5 class="card-title">Visitors</h5>

  489. 													</div>

  490. 

  491. 													<div class="col-auto">

  492. 														<div class="chart chart-xs">

  493. 															<i class="align-middle" data-feather="users"></i>

  494. 														</div>

  495. 													</div>

  496. 												</div>

  497. 												<h1 class="mt-1 mb-3">14.212</h1>

  498. 												<div class="mb-0">

  499. 													<span class="text-success"> <i class="mdi mdi-arrow-bottom-right"></i> 5.25% </span>

  500. 													<span class="text-muted">Since last week</span>

  501. 												</div>

  502. 											</div>

  503. 										</div>

  504. 									</div>

  505. 									<div class="col-3 ">

  506. 										<div class="card">

  507. 											<div class="card-body">

  508. 												<div class="row">

  509. 													<div class="col mt-0">

  510. 														<h5 class="card-title">Earnings</h5>

  511. 													</div>

  512. 

  513. 													<div class="col-auto">

  514. 														<div class="chart chart-xs">

  515. 															<i class="align-middle" data-feather="dollar-sign"></i>

  516. 														</div>

  517. 													</div>

  518. 												</div>

  519. 												<h1 class="mt-1 mb-3">$21.300</h1>

  520. 												<div class="mb-0">

  521. 													<span class="text-success"> <i class="mdi mdi-arrow-bottom-right"></i> 6.65% </span>

  522. 													<span class="text-muted">Since last week</span>

  523. 												</div>

  524. 											</div>

  525. 										</div>

  526. 									</div>

  527. 									<div class="col-3 ">

  528. 										<div class="card">

  529. 											<div class="card-body">

  530. 												<div class="row">

  531. 													<div class="col mt-0">

  532. 														<h5 class="card-title">Orders</h5>

  533. 													</div>

  534. 

  535. 													<div class="col-auto">

  536. 														<div class="chart chart-xs">

  537. 															<i class="align-middle" data-feather="shopping-cart"></i>

  538. 														</div>

  539. 													</div>

  540. 												</div>

  541. 												<h1 class="mt-1 mb-3">64</h1>

  542. 												<div class="mb-0">

  543. 													<span class="text-danger"> <i class="mdi mdi-arrow-bottom-right"></i> -2.25% </span>

  544. 													<span class="text-muted">Since last week</span>

  545. 												</div>

  546. 											</div>

  547. 										</div>

  548. 									</div>

  549. 								</div>

  550. 							</div>

  551. 						</div> -->

  552. 

  553. 						<!-- <div class="col-xl-6 col-xxl-7">

  554. 							<div class="card flex-fill w-100">

  555. 								<div class="card-header">

  556. 

  557. 									<h5 class="card-title mb-0">Recent Movement</h5>

  558. 								</div>

  559. 								<div class="card-body py-3">

  560. 									<div class="chart chart-sm">

  561. 										<canvas id="chartjs-dashboard-line"></canvas>

  562. 									</div>

  563. 								</div>

  564. 							</div>

  565. 						</div> -->

  566. 					<!-- </div> -->

  567. 

  568. 					<div class="row">

  569. 						<div class="col-12 col-md-12 text-center mt-3">

  570. 							<h1 class="h3 mb-3">Material Changes</h1>

  571. 						</div>

  572. 					

  573. 						<div class="container">

  574. 							<div class="row mb-3">

  575. 								<div class="col-12 col-sm-6 col-md-4">

  576. 									<label for="select1" class="form-label">Filter Provider</label>

  577. 									<select class="form-select" id="select1" aria-label="Select 1">

  578. 										<option selected>All Provider</option>

  579. 										<option value="1">One</option>

  580. 										<option value="2">Two</option>

  581. 										<option value="3">Three</option>

  582. 									</select>

  583. 								</div>

  584. 								<div class="col-12 col-sm-6 col-md-4">

  585. 									<label for="select1" class="form-label">Filter Package</label>

  586. 									<select class="form-select" id="select1" aria-label="Select 1">

  587. 										<option selected>All Package</option>

  588. 										<option value="1">One</option>

  589. 										<option value="2">Two</option>

  590. 										<option value="3">Three</option>

  591. 									</select>

  592. 								</div>

  593. 		

  594. 								<div class="col-12 col-sm-6 col-md-4">

  595. 									<label for="select1" class="form-label">Action</label>

  596. 									<div class="d-flex" style="display: inline-block;">

  597. 										<button type="button" class="btn btn-primary">Filter</button>

  598. 										<button type="button" class="btn btn-secondary" style="margin-left: 5px;">Reset</button>

  599. 									</div>

  600. 								</div>						

  601. 							</div>

  602. 						</div>

  603. 

  604. 						<div class="col-12 col-md-4 col-xxl-3 d-flex order-2 order-xxl-3">

  605. 							<div class="card flex-fill w-100">

  606. 								<div class="card-header">

  607. 									<h5 class="card-title mb-0">Verification Status</h5>

  608. 								</div>

  609. 								<div class="card-body d-flex">

  610. 									<div class="align-self-center w-100">

  611. 										<div class="py-3">

  612. 											<div class="chart chart-xs">

  613. 												<canvas id="chartjs-dashboard-pie"></canvas>

  614. 											</div>

  615. 										</div>

  616. 									</div>

  617. 								</div>

  618. 							</div>

  619. 						</div>

  620. 					

  621. 						<div class="col-12 col-lg-8 col-xxl-9 d-flex">

  622. 							<div class="card flex-fill mx-auto">

  623. 								<div class="card-header">

  624. 									<h5 class="card-title mb-0">Latest Projects</h5>

  625. 								</div>

  626. 								<div class="card-body">

  627. 									<div class="table-responsive">

  628. 										<table id="projectTable" class="table table-hover my-0">

  629. 											<thead>

  630. 												<tr>

  631. 													<th>Name</th>

  632. 													<th class="d-none d-xl-table-cell">Start Date</th>

  633. 													<th class="d-none d-xl-table-cell">End Date</th>

  634. 													<th>Status</th>

  635. 													<th class="d-none d-md-table-cell">Assignee</th>

  636. 												</tr>

  637. 											</thead>

  638. 											<tbody>

  639. 												<tr>

  640. 													<td>Project Apollo</td>

  641. 													<td class="d-none d-xl-table-cell">01/01/2021</td>

  642. 													<td class="d-none d-xl-table-cell">31/06/2021</td>

  643. 													<td><span class="badge bg-success">Done</span></td>

  644. 													<td class="d-none d-md-table-cell">Vanessa Tucker</td>

  645. 												</tr>

  646. 												<tr>

  647. 													<td>Project Fireball</td>

  648. 													<td class="d-none d-xl-table-cell">01/01/2021</td>

  649. 													<td class="d-none d-xl-table-cell">31/06/2021</td>

  650. 													<td><span class="badge bg-danger">Cancelled</span></td>

  651. 													<td class="d-none d-md-table-cell">William Harris</td>

  652. 												</tr>

  653. 												<tr>

  654. 													<td>Project Hades</td>

  655. 													<td class="d-none d-xl-table-cell">01/01/2021</td>

  656. 													<td class="d-none d-xl-table-cell">31/06/2021</td>

  657. 													<td><span class="badge bg-success">Done</span></td>

  658. 													<td class="d-none d-md-table-cell">Sharon Lessman</td>

  659. 												</tr>

  660. 												<tr>

  661. 													<td>Project Nitro</td>

  662. 													<td class="d-none d-xl-table-cell">01/01/2021</td>

  663. 													<td class="d-none d-xl-table-cell">31/06/2021</td>

  664. 													<td><span class="badge bg-warning">In progress</span></td>

  665. 													<td class="d-none d-md-table-cell">Vanessa Tucker</td>

  666. 												</tr>

  667. 												<tr>

  668. 													<td>Project Phoenix</td>

  669. 													<td class="d-none d-xl-table-cell">01/01/2021</td>

  670. 													<td class="d-none d-xl-table-cell">31/06/2021</td>

  671. 													<td><span class="badge bg-success">Done</span></td>

  672. 													<td class="d-none d-md-table-cell">William Harris</td>

  673. 												</tr>

  674. 												<tr>

  675. 													<td>Project X</td>

  676. 													<td class="d-none d-xl-table-cell">01/01/2021</td>

  677. 													<td class="d-none d-xl-table-cell">31/06/2021</td>

  678. 													<td><span class="badge bg-success">Done</span></td>

  679. 													<td class="d-none d-md-table-cell">Sharon Lessman</td>

  680. 												</tr>

  681. 												<tr>

  682. 													<td>Project Romeo</td>

  683. 													<td class="d-none d-xl-table-cell">01/01/2021</td>

  684. 													<td class="d-none d-xl-table-cell">31/06/2021</td>

  685. 													<td><span class="badge bg-success">Done</span></td>

  686. 													<td class="d-none d-md-table-cell">Christina Mason</td>

  687. 												</tr>

  688. 												<tr>

  689. 													<td>Project Wombat</td>

  690. 													<td class="d-none d-xl-table-cell">01/01/2021</td>

  691. 													<td class="d-none d-xl-table-cell">31/06/2021</td>

  692. 													<td><span class="badge bg-warning">In progress</span></td>

  693. 													<td class="d-none d-md-table-cell">William Harris</td>

  694. 												</tr>

  695. 											</tbody>

  696. 										</table>

  697. 									</div>

  698. 								</div>

  699. 							</div>

  700. 						</div>

  701. 					</div>					

  702. 

  703. 					<!-- <div class="row">

  704. 						<div class="col-12 col-lg-8 col-xxl-9 d-flex">

  705. 							<div class="card flex-fill">

  706. 								<div class="card-header">

  707. 

  708. 									<h5 class="card-title mb-0">Latest Projects</h5>

  709. 								</div>

  710. 								<table class="table table-hover my-0">

  711. 									<thead>

  712. 										<tr>

  713. 											<th>Name</th>

  714. 											<th class="d-none d-xl-table-cell">Start Date</th>

  715. 											<th class="d-none d-xl-table-cell">End Date</th>

  716. 											<th>Status</th>

  717. 											<th class="d-none d-md-table-cell">Assignee</th>

  718. 										</tr>

  719. 									</thead>

  720. 									<tbody>

  721. 										<tr>

  722. 											<td>Project Apollo</td>

  723. 											<td class="d-none d-xl-table-cell">01/01/2021</td>

  724. 											<td class="d-none d-xl-table-cell">31/06/2021</td>

  725. 											<td><span class="badge bg-success">Done</span></td>

  726. 											<td class="d-none d-md-table-cell">Vanessa Tucker</td>

  727. 										</tr>

  728. 										<tr>

  729. 											<td>Project Fireball</td>

  730. 											<td class="d-none d-xl-table-cell">01/01/2021</td>

  731. 											<td class="d-none d-xl-table-cell">31/06/2021</td>

  732. 											<td><span class="badge bg-danger">Cancelled</span></td>

  733. 											<td class="d-none d-md-table-cell">William Harris</td>

  734. 										</tr>

  735. 										<tr>

  736. 											<td>Project Hades</td>

  737. 											<td class="d-none d-xl-table-cell">01/01/2021</td>

  738. 											<td class="d-none d-xl-table-cell">31/06/2021</td>

  739. 											<td><span class="badge bg-success">Done</span></td>

  740. 											<td class="d-none d-md-table-cell">Sharon Lessman</td>

  741. 										</tr>

  742. 										<tr>

  743. 											<td>Project Nitro</td>

  744. 											<td class="d-none d-xl-table-cell">01/01/2021</td>

  745. 											<td class="d-none d-xl-table-cell">31/06/2021</td>

  746. 											<td><span class="badge bg-warning">In progress</span></td>

  747. 											<td class="d-none d-md-table-cell">Vanessa Tucker</td>

  748. 										</tr>

  749. 										<tr>

  750. 											<td>Project Phoenix</td>

  751. 											<td class="d-none d-xl-table-cell">01/01/2021</td>

  752. 											<td class="d-none d-xl-table-cell">31/06/2021</td>

  753. 											<td><span class="badge bg-success">Done</span></td>

  754. 											<td class="d-none d-md-table-cell">William Harris</td>

  755. 										</tr>

  756. 										<tr>

  757. 											<td>Project X</td>

  758. 											<td class="d-none d-xl-table-cell">01/01/2021</td>

  759. 											<td class="d-none d-xl-table-cell">31/06/2021</td>

  760. 											<td><span class="badge bg-success">Done</span></td>

  761. 											<td class="d-none d-md-table-cell">Sharon Lessman</td>

  762. 										</tr>

  763. 										<tr>

  764. 											<td>Project Romeo</td>

  765. 											<td class="d-none d-xl-table-cell">01/01/2021</td>

  766. 											<td class="d-none d-xl-table-cell">31/06/2021</td>

  767. 											<td><span class="badge bg-success">Done</span></td>

  768. 											<td class="d-none d-md-table-cell">Christina Mason</td>

  769. 										</tr>

  770. 										<tr>

  771. 											<td>Project Wombat</td>

  772. 											<td class="d-none d-xl-table-cell">01/01/2021</td>

  773. 											<td class="d-none d-xl-table-cell">31/06/2021</td>

  774. 											<td><span class="badge bg-warning">In progress</span></td>

  775. 											<td class="d-none d-md-table-cell">William Harris</td>

  776. 										</tr>

  777. 									</tbody>

  778. 								</table>

  779. 							</div>

  780. 						</div>

  781. 						<div class="col-12 col-lg-4 col-xxl-3 d-flex">

  782. 							<div class="card flex-fill w-100">

  783. 								<div class="card-header">

  784. 

  785. 									<h5 class="card-title mb-0">Monthly Sales</h5>

  786. 								</div>

  787. 								<div class="card-body d-flex w-100">

  788. 									<div class="align-self-center chart chart-lg">

  789. 										<canvas id="chartjs-dashboard-bar"></canvas>

  790. 									</div>

  791. 								</div>

  792. 							</div>

  793. 						</div>

  794. 					</div> -->

  795. 

  796. 				</div>

  797. 			</main>

  798. 

  799. 			<footer class="footer">

  800. 				<div class="container-fluid">

  801. 					<div class="row text-muted">

  802. 						<div class="col-6 text-start">

  803. 							<p class="mb-0">

  804. 								<a class="text-muted" href="https://admin.io/" target="_blank"><strong>Admin</strong></a> &copy;

  805. 							</p>

  806. 						</div>

  807. 						<div class="col-6 text-end">

  808. 							<ul class="list-inline">

  809. 								<li class="list-inline-item">

  810. 									<a class="text-muted" href="https://admin.io/" target="_blank">Support</a>

  811. 								</li>

  812. 								<li class="list-inline-item">

  813. 									<a class="text-muted" href="https://admin.io/" target="_blank">Help Center</a>

  814. 								</li>

  815. 								<li class="list-inline-item">

  816. 									<a class="text-muted" href="https://admin.io/" target="_blank">Privacy</a>

  817. 								</li>

  818. 								<li class="list-inline-item">

  819. 									<a class="text-muted" href="https://admin.io/" target="_blank">Terms</a>

  820. 								</li>

  821. 							</ul>

  822. 						</div>

  823. 					</div>

  824. 				</div>

  825. 			</footer>

  826. 			<div class="bottom-menu">

  827. 				<a href="#">

  828. 					<i class="fas fa-poll"></i>

  829. 					Survey

  830. 				</a>

  831. 				<a href="#">

  832. 					<i class="fas fa-file-alt"></i>

  833. 					CR

  834. 				</a>

  835. 				<a href="#">

  836. 					<i class="fas fa-chart-pie"></i>

  837. 					GAC

  838. 				</a>

  839. 				<a href="#">

  840. 					<i class="fas fa-wrench"></i>

  841. 					SITAC

  842. 				</a>

  843. 				<a href="#">

  844. 					<i class="fas fa-cogs"></i>

  845. 					MOA

  846. 				</a>

  847. 				<a href="#">

  848. 					<i class="fas fa-sitemap"></i>

  849. 					SITE

  850. 				</a>

  851. 				<a href="#">

  852. 					<i class="fas fa-tasks"></i>

  853. 					Project

  854. 				</a>

  855. 				<a href="#">

  856. 					<i class="fas fa-check"></i>

  857. 					Approvals

  858. 				</a>

  859. 			</div>

  860. 		

  861. 		</div>

  862. 	</div>

  863. 

  864. 	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

  865. 

  866. 	<!-- jQuery -->

  867. 	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  868. 

  869. 	<!-- DataTables JS -->

  870. 	<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

  871. 	<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>

  872. 

  873. 	<script src="js/app.js"></script>

  874. 

  875. 	<script>

  876. 		$(document).ready(function() {

  877. 			$('#projectTable').DataTable();

  878. 		});

  879. 	</script>

  880. 	

  881. 	<script>

  882. 		document.addEventListener("DOMContentLoaded", function() {

  883. 			var ctx = document.getElementById("chartjs-dashboard-line").getContext("2d");

  884. 			var gradient = ctx.createLinearGradient(0, 0, 0, 225);

  885. 			gradient.addColorStop(0, "rgba(215, 227, 244, 1)");

  886. 			gradient.addColorStop(1, "rgba(215, 227, 244, 0)");

  887. 			// Line chart

  888. 			new Chart(document.getElementById("chartjs-dashboard-line"), {

  889. 				type: "line",

  890. 				data: {

  891. 					labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],

  892. 					datasets: [{

  893. 						label: "Sales ($)",

  894. 						fill: true,

  895. 						backgroundColor: gradient,

  896. 						borderColor: window.theme.primary,

  897. 						data: [

  898. 							2115,

  899. 							1562,

  900. 							1584,

  901. 							1892,

  902. 							1587,

  903. 							1923,

  904. 							2566,

  905. 							2448,

  906. 							2805,

  907. 							3438,

  908. 							2917,

  909. 							3327

  910. 						]

  911. 					}]

  912. 				},

  913. 				options: {

  914. 					maintainAspectRatio: false,

  915. 					legend: {

  916. 						display: false

  917. 					},

  918. 					tooltips: {

  919. 						intersect: false

  920. 					},

  921. 					hover: {

  922. 						intersect: true

  923. 					},

  924. 					plugins: {

  925. 						filler: {

  926. 							propagate: false

  927. 						}

  928. 					},

  929. 					scales: {

  930. 						xAxes: [{

  931. 							reverse: true,

  932. 							gridLines: {

  933. 								color: "rgba(0,0,0,0.0)"

  934. 							}

  935. 						}],

  936. 						yAxes: [{

  937. 							ticks: {

  938. 								stepSize: 1000

  939. 							},

  940. 							display: true,

  941. 							borderDash: [3, 3],

  942. 							gridLines: {

  943. 								color: "rgba(0,0,0,0.0)"

  944. 							}

  945. 						}]

  946. 					}

  947. 				}

  948. 			});

  949. 		});

  950. 	</script>

  951. 

  952. <script>

  953. 	document.addEventListener('DOMContentLoaded', function () {

  954. 		// Data untuk diagram pie

  955. 		var pieData1 = {

  956. 			labels: ['Done', 'On Progress'],

  957. 			datasets: [{

  958. 				data: [80, 20],

  959. 				backgroundColor: ['#28a745', '#dc3545'],

  960. 				hoverBackgroundColor: ['#28a745', '#dc3545']

  961. 			}]

  962. 		};

  963. 	

  964. 		var pieData2 = {

  965. 			labels: ['Done', 'On Progress'],

  966. 			datasets: [{

  967. 				data: [60, 40],

  968. 				backgroundColor: ['#28a745', '#dc3545'],

  969. 				hoverBackgroundColor: ['#28a745', '#dc3545']

  970. 			}]

  971. 		};

  972. 	

  973. 		var pieData3 = {

  974. 			labels: ['Done', 'On Progress'],

  975. 			datasets: [{

  976. 				data: [75, 25],

  977. 				backgroundColor: ['#28a745', '#dc3545'],

  978. 				hoverBackgroundColor: ['#28a745', '#dc3545']

  979. 			}]

  980. 		};

  981. 	

  982. 		var pieData4 = {

  983. 			labels: ['Done', 'On Progress'],

  984. 			datasets: [{

  985. 				data: [90, 10],

  986. 				backgroundColor: ['#28a745', '#dc3545'],

  987. 				hoverBackgroundColor: ['#28a745', '#dc3545']

  988. 			}]

  989. 		};

  990. 	

  991. 		var pieData5 = {

  992. 			labels: ['Done', 'Not Yet'],

  993. 			datasets: [{

  994. 				data: [60, 40],

  995. 				backgroundColor: ['#28a745', '#FFCF52'],

  996. 				hoverBackgroundColor: ['#28a745', '#FFCF52']

  997. 			}]

  998. 		};

  999. 	

  1000. 		// Fungsi untuk membuat diagram pie

  1001. 		function createPieChart(canvasId, pieData) {

  1002. 			var ctx = document.getElementById(canvasId).getContext('2d');

  1003. 			new Chart(ctx, {

  1004. 				type: 'pie',

  1005. 				data: pieData

  1006. 			});

  1007. 		}

  1008. 	

  1009. 		// Panggil fungsi untuk setiap card

  1010. 		createPieChart('pieChart1', pieData1);

  1011. 		createPieChart('pieChart2', pieData2);

  1012. 		createPieChart('pieChart3', pieData3);

  1013. 		createPieChart('pieChart4', pieData4);

  1014. 		createPieChart('pieChart5', pieData5);

  1015. 	});

  1016. 	</script>

  1017. 

  1018. 

  1019. 	<script>

  1020. 		document.addEventListener("DOMContentLoaded", function() {

  1021. 			// Pie chart

  1022. 			new Chart(document.getElementById("chartjs-dashboard-pie"), {

  1023. 				type: "pie",

  1024. 				data: {

  1025. 					labels: ["Chrome", "Firefox", "IE"],

  1026. 					datasets: [{

  1027. 						data: [4306, 3801, 1689],

  1028. 						backgroundColor: [

  1029. 							window.theme.primary,

  1030. 							window.theme.warning,

  1031. 							window.theme.danger

  1032. 						],

  1033. 						borderWidth: 5

  1034. 					}]

  1035. 				},

  1036. 				options: {

  1037. 					responsive: !window.MSInputMethodContext,

  1038. 					maintainAspectRatio: false,

  1039. 					legend: {

  1040. 						display: false

  1041. 					},

  1042. 					cutoutPercentage: 75

  1043. 				}

  1044. 			});

  1045. 		});

  1046. 	</script>

  1047. 	<script>

  1048. 		document.addEventListener("DOMContentLoaded", function() {

  1049. 			// Bar chart

  1050. 			new Chart(document.getElementById("chartjs-dashboard-bar"), {

  1051. 				type: "bar",

  1052. 				data: {

  1053. 					labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],

  1054. 					datasets: [{

  1055. 						label: "This year",

  1056. 						backgroundColor: window.theme.primary,

  1057. 						borderColor: window.theme.primary,

  1058. 						hoverBackgroundColor: window.theme.primary,

  1059. 						hoverBorderColor: window.theme.primary,

  1060. 						data: [54, 67, 41, 55, 62, 45, 55, 73, 60, 76, 48, 79],

  1061. 						barPercentage: .75,

  1062. 						categoryPercentage: .5

  1063. 					}]

  1064. 				},

  1065. 				options: {

  1066. 					maintainAspectRatio: false,

  1067. 					legend: {

  1068. 						display: false

  1069. 					},

  1070. 					scales: {

  1071. 						yAxes: [{

  1072. 							gridLines: {

  1073. 								display: false

  1074. 							},

  1075. 							stacked: false,

  1076. 							ticks: {

  1077. 								stepSize: 20

  1078. 							}

  1079. 						}],

  1080. 						xAxes: [{

  1081. 							stacked: false,

  1082. 							gridLines: {

  1083. 								color: "transparent"

  1084. 							}

  1085. 						}]

  1086. 					}

  1087. 				}

  1088. 			});

  1089. 		});

  1090. 	</script>

  1091. 	<script>

  1092. 		document.addEventListener("DOMContentLoaded", function() {

  1093. 			var markers = [{

  1094. 					coords: [31.230391, 121.473701],

  1095. 					name: "Shanghai"

  1096. 				},

  1097. 				{

  1098. 					coords: [28.704060, 77.102493],

  1099. 					name: "Delhi"

  1100. 				},

  1101. 				{

  1102. 					coords: [6.524379, 3.379206],

  1103. 					name: "Lagos"

  1104. 				},

  1105. 				{

  1106. 					coords: [35.689487, 139.691711],

  1107. 					name: "Tokyo"

  1108. 				},

  1109. 				{

  1110. 					coords: [23.129110, 113.264381],

  1111. 					name: "Guangzhou"

  1112. 				},

  1113. 				{

  1114. 					coords: [40.7127837, -74.0059413],

  1115. 					name: "New York"

  1116. 				},

  1117. 				{

  1118. 					coords: [34.052235, -118.243683],

  1119. 					name: "Los Angeles"

  1120. 				},

  1121. 				{

  1122. 					coords: [41.878113, -87.629799],

  1123. 					name: "Chicago"

  1124. 				},

  1125. 				{

  1126. 					coords: [51.507351, -0.127758],

  1127. 					name: "London"

  1128. 				},

  1129. 				{

  1130. 					coords: [40.416775, -3.703790],

  1131. 					name: "Madrid "

  1132. 				}

  1133. 			];

  1134. 			var map = new jsVectorMap({

  1135. 				map: "world",

  1136. 				selector: "#world_map",

  1137. 				zoomButtons: true,

  1138. 				markers: markers,

  1139. 				markerStyle: {

  1140. 					initial: {

  1141. 						r: 9,

  1142. 						strokeWidth: 7,

  1143. 						stokeOpacity: .4,

  1144. 						fill: window.theme.primary

  1145. 					},

  1146. 					hover: {

  1147. 						fill: window.theme.primary,

  1148. 						stroke: window.theme.primary

  1149. 					}

  1150. 				},

  1151. 				zoomOnScroll: false

  1152. 			});

  1153. 			window.addEventListener("resize", () => {

  1154. 				map.updateSize();

  1155. 			});

  1156. 		});

  1157. 	</script>

  1158. 	<script>

  1159. 		document.addEventListener("DOMContentLoaded", function() {

  1160. 			var date = new Date(Date.now() - 5 * 24 * 60 * 60 * 1000);

  1161. 			var defaultDate = date.getUTCFullYear() + "-" + (date.getUTCMonth() + 1) + "-" + date.getUTCDate();

  1162. 			document.getElementById("datetimepicker-dashboard").flatpickr({

  1163. 				inline: true,

  1164. 				prevArrow: "<span title=\"Previous month\">&laquo;</span>",

  1165. 				nextArrow: "<span title=\"Next month\">&raquo;</span>",

  1166. 				defaultDate: defaultDate

  1167. 			});

  1168. 		});

  1169. 	</script>

  1170. 

  1171. </body>

  1172. 

  1173. </html>