safirawln
/
admin
Observar 1
Favorito 0
Fork 0
Código Issues 0 Pull requests 0 Versões 0 Wiki Atividade
Nenhuma descrição
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
2 Commits
1 Branch
Branch: master
Branches Tags
${ item.name }
Criar branch ${ searchTerm }
de master
${ noResults }
admin/static/index.html

index.html 37KB
Link permanente Histórico Original

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175 
  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="col-12 col-md-12 col-xxl-6 d-flex order-3 order-xxl-2">

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

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

  347. 

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

  349. 						</div>

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

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

  352. 						</div>

  353. 					</div>

  354. 				</div>

  355. 				

  356. 				<div class="container">

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

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

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

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

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

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

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

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

  365. 							</select>

  366. 						</div>

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

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

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

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

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

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

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

  374. 							</select>

  375. 						</div>

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

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

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

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

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

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

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

  383. 							</select>

  384. 						</div>

  385. 

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

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

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

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

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

  391. 							</div>

  392. 						</div>						

  393. 					</div>

  394. 				</div>

  395. 				

  396. 				

  397. 

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

  399. 

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

  401. 

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

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

  404. 							<div class="card">

  405. 								<div>

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

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

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

  409. 									</div>

  410. 								</div>

  411. 							</div>

  412. 						</div>

  413. 					

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

  415. 							<div class="card">

  416. 								<div>

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

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

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

  420. 									</div>

  421. 								</div>

  422. 							</div>

  423. 						</div>

  424. 					

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

  426. 							<div class="card">

  427. 								<div>

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

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

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

  431. 									</div>

  432. 								</div>

  433. 							</div>

  434. 						</div>

  435. 					

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

  437. 							<div class="card">

  438. 								<div>

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

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

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

  442. 									</div>

  443. 								</div>

  444. 							</div>

  445. 						</div>

  446. 					

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

  448. 							<div class="card">

  449. 								<div>

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

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

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

  453. 									</div>

  454. 								</div>

  455. 							</div>

  456. 						</div>

  457. 					</div>							

  458. 

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

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

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

  462. 								<div class="row">

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

  464. 										<div class="card">

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

  466. 												<div class="row">

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

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

  469. 													</div>

  470. 

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

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

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

  474. 														</div>

  475. 													</div>

  476. 												</div>

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

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

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

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

  481. 												</div>

  482. 											</div>

  483. 										</div>

  484. 									</div>

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

  486. 										<div class="card">

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

  488. 												<div class="row">

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

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

  491. 													</div>

  492. 

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

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

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

  496. 														</div>

  497. 													</div>

  498. 												</div>

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

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

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

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

  503. 												</div>

  504. 											</div>

  505. 										</div>

  506. 									</div>

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

  508. 										<div class="card">

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

  510. 												<div class="row">

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

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

  513. 													</div>

  514. 

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

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

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

  518. 														</div>

  519. 													</div>

  520. 												</div>

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

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

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

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

  525. 												</div>

  526. 											</div>

  527. 										</div>

  528. 									</div>

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

  530. 										<div class="card">

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

  532. 												<div class="row">

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

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

  535. 													</div>

  536. 

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

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

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

  540. 														</div>

  541. 													</div>

  542. 												</div>

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

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

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

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

  547. 												</div>

  548. 											</div>

  549. 										</div>

  550. 									</div>

  551. 								</div>

  552. 							</div>

  553. 						</div> -->

  554. 

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

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

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

  558. 

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

  560. 								</div>

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

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

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

  564. 									</div>

  565. 								</div>

  566. 							</div>

  567. 						</div> -->

  568. 					<!-- </div> -->

  569. 

  570. 					<div class="row">

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

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

  573. 						</div>

  574. 					

  575. 						<div class="container">

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

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

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

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

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

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

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

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

  584. 									</select>

  585. 								</div>

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

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

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

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

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

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

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

  593. 									</select>

  594. 								</div>

  595. 		

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

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

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

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

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

  601. 									</div>

  602. 								</div>						

  603. 							</div>

  604. 						</div>

  605. 

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

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

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

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

  610. 								</div>

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

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

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

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

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

  616. 											</div>

  617. 										</div>

  618. 									</div>

  619. 								</div>

  620. 							</div>

  621. 						</div>

  622. 					

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

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

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

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

  627. 								</div>

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

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

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

  631. 											<thead>

  632. 												<tr>

  633. 													<th>Name</th>

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

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

  636. 													<th>Status</th>

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

  638. 												</tr>

  639. 											</thead>

  640. 											<tbody>

  641. 												<tr>

  642. 													<td>Project Apollo</td>

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

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

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

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

  647. 												</tr>

  648. 												<tr>

  649. 													<td>Project Fireball</td>

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

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

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

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

  654. 												</tr>

  655. 												<tr>

  656. 													<td>Project Hades</td>

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

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

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

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

  661. 												</tr>

  662. 												<tr>

  663. 													<td>Project Nitro</td>

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

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

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

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

  668. 												</tr>

  669. 												<tr>

  670. 													<td>Project Phoenix</td>

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

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

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

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

  675. 												</tr>

  676. 												<tr>

  677. 													<td>Project X</td>

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

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

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

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

  682. 												</tr>

  683. 												<tr>

  684. 													<td>Project Romeo</td>

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

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

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

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

  689. 												</tr>

  690. 												<tr>

  691. 													<td>Project Wombat</td>

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

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

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

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

  696. 												</tr>

  697. 											</tbody>

  698. 										</table>

  699. 									</div>

  700. 								</div>

  701. 							</div>

  702. 						</div>

  703. 					</div>					

  704. 

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

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

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

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

  709. 

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

  711. 								</div>

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

  713. 									<thead>

  714. 										<tr>

  715. 											<th>Name</th>

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

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

  718. 											<th>Status</th>

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

  720. 										</tr>

  721. 									</thead>

  722. 									<tbody>

  723. 										<tr>

  724. 											<td>Project Apollo</td>

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

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

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

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

  729. 										</tr>

  730. 										<tr>

  731. 											<td>Project Fireball</td>

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

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

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

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

  736. 										</tr>

  737. 										<tr>

  738. 											<td>Project Hades</td>

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

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

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

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

  743. 										</tr>

  744. 										<tr>

  745. 											<td>Project Nitro</td>

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

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

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

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

  750. 										</tr>

  751. 										<tr>

  752. 											<td>Project Phoenix</td>

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

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

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

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

  757. 										</tr>

  758. 										<tr>

  759. 											<td>Project X</td>

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

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

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

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

  764. 										</tr>

  765. 										<tr>

  766. 											<td>Project Romeo</td>

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

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

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

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

  771. 										</tr>

  772. 										<tr>

  773. 											<td>Project Wombat</td>

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

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

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

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

  778. 										</tr>

  779. 									</tbody>

  780. 								</table>

  781. 							</div>

  782. 						</div>

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

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

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

  786. 

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

  788. 								</div>

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

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

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

  792. 									</div>

  793. 								</div>

  794. 							</div>

  795. 						</div>

  796. 					</div> -->

  797. 

  798. 				</div>

  799. 			</main>

  800. 

  801. 			<footer class="footer">

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

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

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

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

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

  807. 							</p>

  808. 						</div>

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

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

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

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

  813. 								</li>

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

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

  816. 								</li>

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

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

  819. 								</li>

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

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

  822. 								</li>

  823. 							</ul>

  824. 						</div>

  825. 					</div>

  826. 				</div>

  827. 			</footer>

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

  829. 				<a href="http://167.172.92.138:8069/web#menu_id=203&action_id=343">

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

  831. 					Survey

  832. 				</a>

  833. 				<a href="http://167.172.92.138:8069/web#menu_id=231&action_id=367">

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

  835. 					CR

  836. 				</a>

  837. 				<a href="http://167.172.92.138:8069/web#menu_id=234&action_id=369">

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

  839. 					GAC

  840. 				</a>

  841. 				<a href="http://167.172.92.138:8069/web#menu_id=236&action_id=372">

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

  843. 					SITAC

  844. 				</a>

  845. 				<a href="http://167.172.92.138:8069/web#menu_id=240&action_id=376">

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

  847. 					MOA

  848. 				</a>

  849. 				<a href="http://167.172.92.138:8069/web#menu_id=334&action_id=475">

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

  851. 					SITE

  852. 				</a>

  853. 				<a href="http://167.172.92.138:8069/web#menu_id=112&action_id=195">

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

  855. 					Project

  856. 				</a>

  857. 				<a href="http://167.172.92.138:8069/web#menu_id=263&action_id=401">

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

  859. 					Approvals

  860. 				</a>

  861. 			</div>

  862. 		

  863. 		</div>

  864. 	</div>

  865. 

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

  867. 

  868. 	<!-- jQuery -->

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

  870. 

  871. 	<!-- DataTables JS -->

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

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

  874. 

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

  876. 

  877. 	<script>

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

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

  880. 		});

  881. 	</script>

  882. 	

  883. 	<script>

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

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

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

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

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

  889. 			// Line chart

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

  891. 				type: "line",

  892. 				data: {

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

  894. 					datasets: [{

  895. 						label: "Sales ($)",

  896. 						fill: true,

  897. 						backgroundColor: gradient,

  898. 						borderColor: window.theme.primary,

  899. 						data: [

  900. 							2115,

  901. 							1562,

  902. 							1584,

  903. 							1892,

  904. 							1587,

  905. 							1923,

  906. 							2566,

  907. 							2448,

  908. 							2805,

  909. 							3438,

  910. 							2917,

  911. 							3327

  912. 						]

  913. 					}]

  914. 				},

  915. 				options: {

  916. 					maintainAspectRatio: false,

  917. 					legend: {

  918. 						display: false

  919. 					},

  920. 					tooltips: {

  921. 						intersect: false

  922. 					},

  923. 					hover: {

  924. 						intersect: true

  925. 					},

  926. 					plugins: {

  927. 						filler: {

  928. 							propagate: false

  929. 						}

  930. 					},

  931. 					scales: {

  932. 						xAxes: [{

  933. 							reverse: true,

  934. 							gridLines: {

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

  936. 							}

  937. 						}],

  938. 						yAxes: [{

  939. 							ticks: {

  940. 								stepSize: 1000

  941. 							},

  942. 							display: true,

  943. 							borderDash: [3, 3],

  944. 							gridLines: {

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

  946. 							}

  947. 						}]

  948. 					}

  949. 				}

  950. 			});

  951. 		});

  952. 	</script>

  953. 

  954. <script>

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

  956. 		// Data untuk diagram pie

  957. 		var pieData1 = {

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

  959. 			datasets: [{

  960. 				data: [80, 20],

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

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

  963. 			}]

  964. 		};

  965. 	

  966. 		var pieData2 = {

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

  968. 			datasets: [{

  969. 				data: [60, 40],

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

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

  972. 			}]

  973. 		};

  974. 	

  975. 		var pieData3 = {

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

  977. 			datasets: [{

  978. 				data: [75, 25],

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

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

  981. 			}]

  982. 		};

  983. 	

  984. 		var pieData4 = {

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

  986. 			datasets: [{

  987. 				data: [90, 10],

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

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

  990. 			}]

  991. 		};

  992. 	

  993. 		var pieData5 = {

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

  995. 			datasets: [{

  996. 				data: [60, 40],

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

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

  999. 			}]

  1000. 		};

  1001. 	

  1002. 		// Fungsi untuk membuat diagram pie

  1003. 		function createPieChart(canvasId, pieData) {

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

  1005. 			new Chart(ctx, {

  1006. 				type: 'pie',

  1007. 				data: pieData

  1008. 			});

  1009. 		}

  1010. 	

  1011. 		// Panggil fungsi untuk setiap card

  1012. 		createPieChart('pieChart1', pieData1);

  1013. 		createPieChart('pieChart2', pieData2);

  1014. 		createPieChart('pieChart3', pieData3);

  1015. 		createPieChart('pieChart4', pieData4);

  1016. 		createPieChart('pieChart5', pieData5);

  1017. 	});

  1018. 	</script>

  1019. 

  1020. 

  1021. 	<script>

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

  1023. 			// Pie chart

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

  1025. 				type: "pie",

  1026. 				data: {

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

  1028. 					datasets: [{

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

  1030. 						backgroundColor: [

  1031. 							window.theme.primary,

  1032. 							window.theme.warning,

  1033. 							window.theme.danger

  1034. 						],

  1035. 						borderWidth: 5

  1036. 					}]

  1037. 				},

  1038. 				options: {

  1039. 					responsive: !window.MSInputMethodContext,

  1040. 					maintainAspectRatio: false,

  1041. 					legend: {

  1042. 						display: false

  1043. 					},

  1044. 					cutoutPercentage: 75

  1045. 				}

  1046. 			});

  1047. 		});

  1048. 	</script>

  1049. 	<script>

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

  1051. 			// Bar chart

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

  1053. 				type: "bar",

  1054. 				data: {

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

  1056. 					datasets: [{

  1057. 						label: "This year",

  1058. 						backgroundColor: window.theme.primary,

  1059. 						borderColor: window.theme.primary,

  1060. 						hoverBackgroundColor: window.theme.primary,

  1061. 						hoverBorderColor: window.theme.primary,

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

  1063. 						barPercentage: .75,

  1064. 						categoryPercentage: .5

  1065. 					}]

  1066. 				},

  1067. 				options: {

  1068. 					maintainAspectRatio: false,

  1069. 					legend: {

  1070. 						display: false

  1071. 					},

  1072. 					scales: {

  1073. 						yAxes: [{

  1074. 							gridLines: {

  1075. 								display: false

  1076. 							},

  1077. 							stacked: false,

  1078. 							ticks: {

  1079. 								stepSize: 20

  1080. 							}

  1081. 						}],

  1082. 						xAxes: [{

  1083. 							stacked: false,

  1084. 							gridLines: {

  1085. 								color: "transparent"

  1086. 							}

  1087. 						}]

  1088. 					}

  1089. 				}

  1090. 			});

  1091. 		});

  1092. 	</script>

  1093. 	<script>

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

  1095. 			var markers = [{

  1096. 					coords: [31.230391, 121.473701],

  1097. 					name: "Shanghai"

  1098. 				},

  1099. 				{

  1100. 					coords: [28.704060, 77.102493],

  1101. 					name: "Delhi"

  1102. 				},

  1103. 				{

  1104. 					coords: [6.524379, 3.379206],

  1105. 					name: "Lagos"

  1106. 				},

  1107. 				{

  1108. 					coords: [35.689487, 139.691711],

  1109. 					name: "Tokyo"

  1110. 				},

  1111. 				{

  1112. 					coords: [23.129110, 113.264381],

  1113. 					name: "Guangzhou"

  1114. 				},

  1115. 				{

  1116. 					coords: [40.7127837, -74.0059413],

  1117. 					name: "New York"

  1118. 				},

  1119. 				{

  1120. 					coords: [34.052235, -118.243683],

  1121. 					name: "Los Angeles"

  1122. 				},

  1123. 				{

  1124. 					coords: [41.878113, -87.629799],

  1125. 					name: "Chicago"

  1126. 				},

  1127. 				{

  1128. 					coords: [51.507351, -0.127758],

  1129. 					name: "London"

  1130. 				},

  1131. 				{

  1132. 					coords: [40.416775, -3.703790],

  1133. 					name: "Madrid "

  1134. 				}

  1135. 			];

  1136. 			var map = new jsVectorMap({

  1137. 				map: "world",

  1138. 				selector: "#world_map",

  1139. 				zoomButtons: true,

  1140. 				markers: markers,

  1141. 				markerStyle: {

  1142. 					initial: {

  1143. 						r: 9,

  1144. 						strokeWidth: 7,

  1145. 						stokeOpacity: .4,

  1146. 						fill: window.theme.primary

  1147. 					},

  1148. 					hover: {

  1149. 						fill: window.theme.primary,

  1150. 						stroke: window.theme.primary

  1151. 					}

  1152. 				},

  1153. 				zoomOnScroll: false

  1154. 			});

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

  1156. 				map.updateSize();

  1157. 			});

  1158. 		});

  1159. 	</script>

  1160. 	<script>

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

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

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

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

  1165. 				inline: true,

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

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

  1168. 				defaultDate: defaultDate

  1169. 			});

  1170. 		});

  1171. 	</script>

  1172. 

  1173. </body>

  1174. 

  1175. </html>