Nav apraksta
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.

index.html 37KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7. <meta name="description" content="Responsive Admin &amp; Dashboard Template based on Bootstrap 5">
  8. <meta name="author" content="Admin">
  9. <meta name="keywords" content="admin, bootstrap, bootstrap 5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui , web">
  10. <link rel="preconnect" href="https://fonts.gstatic.com">
  11. <link rel="shortcut icon" href="img/icons/icon-48x48.png" />
  12. <link rel="canonical" href="https://demo-basic.admin.io/" />
  13. <title>Admin Demo</title>
  14. <link href="css/app.css" rel="stylesheet">
  15. <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
  16. <!-- Bootstrap CSS -->
  17. <link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
  18. <!-- DataTables CSS -->
  19. <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
  20. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  21. <style>
  22. .bottom-menu {
  23. position: fixed;
  24. bottom: 0;
  25. left: 0;
  26. width: 100%;
  27. background-color: #333;
  28. display: flex;
  29. justify-content: space-around;
  30. padding: 10px;
  31. box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.2);
  32. border-top-left-radius: 15px;
  33. border-top-right-radius: 15px;
  34. }
  35. .bottom-menu a {
  36. color: #fff;
  37. text-decoration: none;
  38. display: flex;
  39. flex-direction: column;
  40. align-items: center;
  41. font-size: 14px;
  42. }
  43. .bottom-menu a:hover {
  44. color: #ffd700;
  45. }
  46. .bottom-menu i {
  47. font-size: 24px;
  48. margin-bottom: 5px;
  49. }
  50. .chart_card {
  51. width: 100%;
  52. text-align: center;
  53. }
  54. .chart_card canvas {
  55. max-width: 100%;
  56. height: auto;
  57. }
  58. </style>
  59. </head>
  60. <body>
  61. <div class="wrapper">
  62. <!-- <nav id="sidebar" class="sidebar js-sidebar">
  63. <div class="sidebar-content js-simplebar">
  64. <a class="sidebar-brand" href="index.html">
  65. <span class="align-middle">Admin</span>
  66. </a>
  67. <ul class="sidebar-nav">
  68. <li class="sidebar-header">
  69. Pages
  70. </li>
  71. <li class="sidebar-item active">
  72. <a class="sidebar-link" href="index.html">
  73. <i class="align-middle" data-feather="sliders"></i> <span class="align-middle">Dashboard</span>
  74. </a>
  75. </li>
  76. <li class="sidebar-item">
  77. <a class="sidebar-link" href="pages-profile.html">
  78. <i class="align-middle" data-feather="user"></i> <span class="align-middle">Profile</span>
  79. </a>
  80. </li>
  81. <li class="sidebar-item">
  82. <a class="sidebar-link" href="pages-sign-in.html">
  83. <i class="align-middle" data-feather="log-in"></i> <span class="align-middle">Sign In</span>
  84. </a>
  85. </li>
  86. <li class="sidebar-item">
  87. <a class="sidebar-link" href="pages-sign-up.html">
  88. <i class="align-middle" data-feather="user-plus"></i> <span class="align-middle">Sign Up</span>
  89. </a>
  90. </li>
  91. <li class="sidebar-item">
  92. <a class="sidebar-link" href="pages-blank.html">
  93. <i class="align-middle" data-feather="book"></i> <span class="align-middle">Blank</span>
  94. </a>
  95. </li>
  96. <li class="sidebar-header">
  97. Tools & Components
  98. </li>
  99. <li class="sidebar-item">
  100. <a class="sidebar-link" href="ui-buttons.html">
  101. <i class="align-middle" data-feather="square"></i> <span class="align-middle">Buttons</span>
  102. </a>
  103. </li>
  104. <li class="sidebar-item">
  105. <a class="sidebar-link" href="ui-forms.html">
  106. <i class="align-middle" data-feather="check-square"></i> <span class="align-middle">Forms</span>
  107. </a>
  108. </li>
  109. <li class="sidebar-item">
  110. <a class="sidebar-link" href="ui-cards.html">
  111. <i class="align-middle" data-feather="grid"></i> <span class="align-middle">Cards</span>
  112. </a>
  113. </li>
  114. <li class="sidebar-item">
  115. <a class="sidebar-link" href="ui-typography.html">
  116. <i class="align-middle" data-feather="align-left"></i> <span class="align-middle">Typography</span>
  117. </a>
  118. </li>
  119. <li class="sidebar-item">
  120. <a class="sidebar-link" href="icons-feather.html">
  121. <i class="align-middle" data-feather="coffee"></i> <span class="align-middle">Icons</span>
  122. </a>
  123. </li>
  124. <li class="sidebar-header">
  125. Plugins & Addons
  126. </li>
  127. <li class="sidebar-item">
  128. <a class="sidebar-link" href="charts-chartjs.html">
  129. <i class="align-middle" data-feather="bar-chart-2"></i> <span class="align-middle">Charts</span>
  130. </a>
  131. </li>
  132. <li class="sidebar-item">
  133. <a class="sidebar-link" href="maps-google.html">
  134. <i class="align-middle" data-feather="map"></i> <span class="align-middle">Maps</span>
  135. </a>
  136. </li>
  137. </ul>
  138. <div class="sidebar-cta">
  139. <div class="sidebar-cta-content">
  140. <strong class="d-inline-block mb-2">Upgrade to Pro</strong>
  141. <div class="mb-3 text-sm">
  142. Are you looking for more components? Check out our premium version.
  143. </div>
  144. <div class="d-grid">
  145. <a href="upgrade-to-pro.html" class="btn btn-primary">Upgrade to Pro</a>
  146. </div>
  147. </div>
  148. </div>
  149. </div>
  150. </nav> -->
  151. <div class="main">
  152. <nav class="navbar navbar-expand navbar-light navbar-bg">
  153. <!-- <a class="sidebar-toggle js-sidebar-toggle">
  154. <i class="hamburger align-self-center"></i>
  155. </a> -->
  156. <div class="navbar-collapse collapse">
  157. <ul class="navbar-nav navbar-align">
  158. <li class="nav-item dropdown">
  159. <a class="nav-icon dropdown-toggle" href="#" id="alertsDropdown" data-bs-toggle="dropdown">
  160. <div class="position-relative">
  161. <i class="align-middle" data-feather="bell"></i>
  162. <span class="indicator">4</span>
  163. </div>
  164. </a>
  165. <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end py-0" aria-labelledby="alertsDropdown">
  166. <div class="dropdown-menu-header">
  167. 4 New Notifications
  168. </div>
  169. <div class="list-group">
  170. <a href="#" class="list-group-item">
  171. <div class="row g-0 align-items-center">
  172. <div class="col-2">
  173. <i class="text-danger" data-feather="alert-circle"></i>
  174. </div>
  175. <div class="col-10">
  176. <div class="text-dark">Update completed</div>
  177. <div class="text-muted small mt-1">Restart server 12 to complete the update.</div>
  178. <div class="text-muted small mt-1">30m ago</div>
  179. </div>
  180. </div>
  181. </a>
  182. <a href="#" class="list-group-item">
  183. <div class="row g-0 align-items-center">
  184. <div class="col-2">
  185. <i class="text-warning" data-feather="bell"></i>
  186. </div>
  187. <div class="col-10">
  188. <div class="text-dark">Lorem ipsum</div>
  189. <div class="text-muted small mt-1">Aliquam ex eros, imperdiet vulputate hendrerit et.</div>
  190. <div class="text-muted small mt-1">2h ago</div>
  191. </div>
  192. </div>
  193. </a>
  194. <a href="#" class="list-group-item">
  195. <div class="row g-0 align-items-center">
  196. <div class="col-2">
  197. <i class="text-primary" data-feather="home"></i>
  198. </div>
  199. <div class="col-10">
  200. <div class="text-dark">Login from 192.186.1.8</div>
  201. <div class="text-muted small mt-1">5h ago</div>
  202. </div>
  203. </div>
  204. </a>
  205. <a href="#" class="list-group-item">
  206. <div class="row g-0 align-items-center">
  207. <div class="col-2">
  208. <i class="text-success" data-feather="user-plus"></i>
  209. </div>
  210. <div class="col-10">
  211. <div class="text-dark">New connection</div>
  212. <div class="text-muted small mt-1">Christina accepted your request.</div>
  213. <div class="text-muted small mt-1">14h ago</div>
  214. </div>
  215. </div>
  216. </a>
  217. </div>
  218. <div class="dropdown-menu-footer">
  219. <a href="#" class="text-muted">Show all notifications</a>
  220. </div>
  221. </div>
  222. </li>
  223. <li class="nav-item dropdown">
  224. <a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" data-bs-toggle="dropdown">
  225. <div class="position-relative">
  226. <i class="align-middle" data-feather="message-square"></i>
  227. </div>
  228. </a>
  229. <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end py-0" aria-labelledby="messagesDropdown">
  230. <div class="dropdown-menu-header">
  231. <div class="position-relative">
  232. 4 New Messages
  233. </div>
  234. </div>
  235. <div class="list-group">
  236. <a href="#" class="list-group-item">
  237. <div class="row g-0 align-items-center">
  238. <div class="col-2">
  239. <img src="img/avatars/avatar-5.jpg" class="avatar img-fluid rounded-circle" alt="Vanessa Tucker">
  240. </div>
  241. <div class="col-10 ps-2">
  242. <div class="text-dark">Vanessa Tucker</div>
  243. <div class="text-muted small mt-1">Nam pretium turpis et arcu. Duis arcu tortor.</div>
  244. <div class="text-muted small mt-1">15m ago</div>
  245. </div>
  246. </div>
  247. </a>
  248. <a href="#" class="list-group-item">
  249. <div class="row g-0 align-items-center">
  250. <div class="col-2">
  251. <img src="img/avatars/avatar-2.jpg" class="avatar img-fluid rounded-circle" alt="William Harris">
  252. </div>
  253. <div class="col-10 ps-2">
  254. <div class="text-dark">William Harris</div>
  255. <div class="text-muted small mt-1">Curabitur ligula sapien euismod vitae.</div>
  256. <div class="text-muted small mt-1">2h ago</div>
  257. </div>
  258. </div>
  259. </a>
  260. <a href="#" class="list-group-item">
  261. <div class="row g-0 align-items-center">
  262. <div class="col-2">
  263. <img src="img/avatars/avatar-4.jpg" class="avatar img-fluid rounded-circle" alt="Christina Mason">
  264. </div>
  265. <div class="col-10 ps-2">
  266. <div class="text-dark">Christina Mason</div>
  267. <div class="text-muted small mt-1">Pellentesque auctor neque nec urna.</div>
  268. <div class="text-muted small mt-1">4h ago</div>
  269. </div>
  270. </div>
  271. </a>
  272. <a href="#" class="list-group-item">
  273. <div class="row g-0 align-items-center">
  274. <div class="col-2">
  275. <img src="img/avatars/avatar-3.jpg" class="avatar img-fluid rounded-circle" alt="Sharon Lessman">
  276. </div>
  277. <div class="col-10 ps-2">
  278. <div class="text-dark">Sharon Lessman</div>
  279. <div class="text-muted small mt-1">Aenean tellus metus, bibendum sed, posuere ac, mattis non.</div>
  280. <div class="text-muted small mt-1">5h ago</div>
  281. </div>
  282. </div>
  283. </a>
  284. </div>
  285. <div class="dropdown-menu-footer">
  286. <a href="#" class="text-muted">Show all messages</a>
  287. </div>
  288. </div>
  289. </li>
  290. <li class="nav-item dropdown">
  291. <a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#" data-bs-toggle="dropdown">
  292. <i class="align-middle" data-feather="settings"></i>
  293. </a>
  294. <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" data-bs-toggle="dropdown">
  295. <img src="img/avatars/avatar.jpg" class="avatar img-fluid rounded me-1" alt="Charles Hall" /> <span class="text-dark">Charles Hall</span>
  296. </a>
  297. <div class="dropdown-menu dropdown-menu-end">
  298. <a class="dropdown-item" href="pages-profile.html"><i class="align-middle me-1" data-feather="user"></i> Profile</a>
  299. <a class="dropdown-item" href="#"><i class="align-middle me-1" data-feather="pie-chart"></i> Analytics</a>
  300. <div class="dropdown-divider"></div>
  301. <a class="dropdown-item" href="index.html"><i class="align-middle me-1" data-feather="settings"></i> Settings & Privacy</a>
  302. <a class="dropdown-item" href="#"><i class="align-middle me-1" data-feather="help-circle"></i> Help Center</a>
  303. <div class="dropdown-divider"></div>
  304. <a class="dropdown-item" href="#">Log out</a>
  305. </div>
  306. </li>
  307. </ul>
  308. </div>
  309. </nav>
  310. <main class="content">
  311. <div class="col-12 col-md-12 col-xxl-6 d-flex order-3 order-xxl-2">
  312. <div class="card flex-fill w-100">
  313. <div class="card-header">
  314. <h5 class="card-title mb-0">Real-Time</h5>
  315. </div>
  316. <div class="card-body px-4">
  317. <div id="world_map" style="height:350px;"></div>
  318. </div>
  319. </div>
  320. </div>
  321. <div class="container">
  322. <div class="row mb-3">
  323. <div class="col-12 col-sm-6 col-md-3">
  324. <label for="select1" class="form-label">Filter Provider</label>
  325. <select class="form-select" id="select1" aria-label="Select 1">
  326. <option selected>All Provider</option>
  327. <option value="1">One</option>
  328. <option value="2">Two</option>
  329. <option value="3">Three</option>
  330. </select>
  331. </div>
  332. <div class="col-12 col-sm-6 col-md-3">
  333. <label for="select1" class="form-label">Filter Package</label>
  334. <select class="form-select" id="select1" aria-label="Select 1">
  335. <option selected>All Package</option>
  336. <option value="1">One</option>
  337. <option value="2">Two</option>
  338. <option value="3">Three</option>
  339. </select>
  340. </div>
  341. <div class="col-12 col-sm-6 col-md-3">
  342. <label for="select1" class="form-label">Filter Batch</label>
  343. <select class="form-select" id="select1" aria-label="Select 1">
  344. <option selected>All Batch</option>
  345. <option value="1">One</option>
  346. <option value="2">Two</option>
  347. <option value="3">Three</option>
  348. </select>
  349. </div>
  350. <div class="col-12 col-sm-6 col-md-3">
  351. <label for="select1" class="form-label">Action</label>
  352. <div class="d-flex" style="display: inline-block;">
  353. <button type="button" class="btn btn-primary">Filter</button>
  354. <button type="button" class="btn btn-secondary" style="margin-left: 5px;">Reset</button>
  355. </div>
  356. </div>
  357. </div>
  358. </div>
  359. <div class="container-fluid p-0">
  360. <!-- <h1 class="h3 mb-3"><strong>Analytics</strong> Dashboard</h1> -->
  361. <div class="row d-flex justify-content-between">
  362. <div class="col-12 col-md-2">
  363. <div class="card">
  364. <div>
  365. <h5 class="card-body" style="color: #939ba2; font-size: .925rem; font-weight: 600;">GAC</h5>
  366. <div class="chart chart-xs">
  367. <canvas id="pieChart1" width="50" height="50"></canvas>
  368. </div>
  369. </div>
  370. </div>
  371. </div>
  372. <div class="col-12 col-md-2">
  373. <div class="card">
  374. <div>
  375. <h5 class="card-body" style="color: #939ba2; font-size: .925rem; font-weight: 600;">MOA</h5>
  376. <div class="chart chart-xs">
  377. <canvas id="pieChart2" width="50" height="50"></canvas>
  378. </div>
  379. </div>
  380. </div>
  381. </div>
  382. <div class="col-12 col-md-2">
  383. <div class="card">
  384. <div>
  385. <h5 class="card-body" style="color: #939ba2; font-size: .925rem; font-weight: 600;">BAUP</h5>
  386. <div class="chart chart-xs">
  387. <canvas id="pieChart3" width="50" height="50"></canvas>
  388. </div>
  389. </div>
  390. </div>
  391. </div>
  392. <div class="col-12 col-md-2">
  393. <div class="card">
  394. <div>
  395. <h5 class="card-body" style="color: #939ba2; font-size: .925rem; font-weight: 600;">BAPHP</h5>
  396. <div class="chart chart-xs">
  397. <canvas id="pieChart4" width="50" height="50"></canvas>
  398. </div>
  399. </div>
  400. </div>
  401. </div>
  402. <div class="col-12 col-md-2">
  403. <div class="card">
  404. <div>
  405. <h5 class="card-body" style="color: #939ba2; font-size: .925rem; font-weight: 600;">BAL</h5>
  406. <div class="chart chart-xs">
  407. <canvas id="pieChart5" width="50" height="50"></canvas>
  408. </div>
  409. </div>
  410. </div>
  411. </div>
  412. </div>
  413. <!-- <div class="row">
  414. <div class="col-xl-6 col-xxl-5 d-flex">
  415. <div class="w-100">
  416. <div class="row">
  417. <div class="col-3 ">
  418. <div class="card">
  419. <div class="card-body">
  420. <div class="row">
  421. <div class="col mt-0">
  422. <h5 class="card-title">Sales</h5>
  423. </div>
  424. <div class="col-auto">
  425. <div class="chart chart-xs">
  426. <i class="align-middle" data-feather="truck"></i>
  427. </div>
  428. </div>
  429. </div>
  430. <h1 class="mt-1 mb-3">2.382</h1>
  431. <div class="mb-0">
  432. <span class="text-danger"> <i class="mdi mdi-arrow-bottom-right"></i> -3.65% </span>
  433. <span class="text-muted">Since last week</span>
  434. </div>
  435. </div>
  436. </div>
  437. </div>
  438. <div class="col-3 ">
  439. <div class="card">
  440. <div class="card-body">
  441. <div class="row">
  442. <div class="col mt-0">
  443. <h5 class="card-title">Visitors</h5>
  444. </div>
  445. <div class="col-auto">
  446. <div class="chart chart-xs">
  447. <i class="align-middle" data-feather="users"></i>
  448. </div>
  449. </div>
  450. </div>
  451. <h1 class="mt-1 mb-3">14.212</h1>
  452. <div class="mb-0">
  453. <span class="text-success"> <i class="mdi mdi-arrow-bottom-right"></i> 5.25% </span>
  454. <span class="text-muted">Since last week</span>
  455. </div>
  456. </div>
  457. </div>
  458. </div>
  459. <div class="col-3 ">
  460. <div class="card">
  461. <div class="card-body">
  462. <div class="row">
  463. <div class="col mt-0">
  464. <h5 class="card-title">Earnings</h5>
  465. </div>
  466. <div class="col-auto">
  467. <div class="chart chart-xs">
  468. <i class="align-middle" data-feather="dollar-sign"></i>
  469. </div>
  470. </div>
  471. </div>
  472. <h1 class="mt-1 mb-3">$21.300</h1>
  473. <div class="mb-0">
  474. <span class="text-success"> <i class="mdi mdi-arrow-bottom-right"></i> 6.65% </span>
  475. <span class="text-muted">Since last week</span>
  476. </div>
  477. </div>
  478. </div>
  479. </div>
  480. <div class="col-3 ">
  481. <div class="card">
  482. <div class="card-body">
  483. <div class="row">
  484. <div class="col mt-0">
  485. <h5 class="card-title">Orders</h5>
  486. </div>
  487. <div class="col-auto">
  488. <div class="chart chart-xs">
  489. <i class="align-middle" data-feather="shopping-cart"></i>
  490. </div>
  491. </div>
  492. </div>
  493. <h1 class="mt-1 mb-3">64</h1>
  494. <div class="mb-0">
  495. <span class="text-danger"> <i class="mdi mdi-arrow-bottom-right"></i> -2.25% </span>
  496. <span class="text-muted">Since last week</span>
  497. </div>
  498. </div>
  499. </div>
  500. </div>
  501. </div>
  502. </div>
  503. </div> -->
  504. <!-- <div class="col-xl-6 col-xxl-7">
  505. <div class="card flex-fill w-100">
  506. <div class="card-header">
  507. <h5 class="card-title mb-0">Recent Movement</h5>
  508. </div>
  509. <div class="card-body py-3">
  510. <div class="chart chart-sm">
  511. <canvas id="chartjs-dashboard-line"></canvas>
  512. </div>
  513. </div>
  514. </div>
  515. </div> -->
  516. <!-- </div> -->
  517. <div class="row">
  518. <div class="col-12 col-md-12 text-center mt-3">
  519. <h1 class="h3 mb-3">Material Changes</h1>
  520. </div>
  521. <div class="container">
  522. <div class="row mb-3">
  523. <div class="col-12 col-sm-6 col-md-4">
  524. <label for="select1" class="form-label">Filter Provider</label>
  525. <select class="form-select" id="select1" aria-label="Select 1">
  526. <option selected>All Provider</option>
  527. <option value="1">One</option>
  528. <option value="2">Two</option>
  529. <option value="3">Three</option>
  530. </select>
  531. </div>
  532. <div class="col-12 col-sm-6 col-md-4">
  533. <label for="select1" class="form-label">Filter Package</label>
  534. <select class="form-select" id="select1" aria-label="Select 1">
  535. <option selected>All Package</option>
  536. <option value="1">One</option>
  537. <option value="2">Two</option>
  538. <option value="3">Three</option>
  539. </select>
  540. </div>
  541. <div class="col-12 col-sm-6 col-md-4">
  542. <label for="select1" class="form-label">Action</label>
  543. <div class="d-flex" style="display: inline-block;">
  544. <button type="button" class="btn btn-primary">Filter</button>
  545. <button type="button" class="btn btn-secondary" style="margin-left: 5px;">Reset</button>
  546. </div>
  547. </div>
  548. </div>
  549. </div>
  550. <div class="col-12 col-md-4 col-xxl-3 d-flex order-2 order-xxl-3">
  551. <div class="card flex-fill w-100">
  552. <div class="card-header">
  553. <h5 class="card-title mb-0">Verification Status</h5>
  554. </div>
  555. <div class="card-body d-flex">
  556. <div class="align-self-center w-100">
  557. <div class="py-3">
  558. <div class="chart chart-xs">
  559. <canvas id="chartjs-dashboard-pie"></canvas>
  560. </div>
  561. </div>
  562. </div>
  563. </div>
  564. </div>
  565. </div>
  566. <div class="col-12 col-lg-8 col-xxl-9 d-flex">
  567. <div class="card flex-fill mx-auto">
  568. <div class="card-header">
  569. <h5 class="card-title mb-0">Latest Projects</h5>
  570. </div>
  571. <div class="card-body">
  572. <div class="table-responsive">
  573. <table id="projectTable" class="table table-hover my-0">
  574. <thead>
  575. <tr>
  576. <th>Name</th>
  577. <th class="d-none d-xl-table-cell">Start Date</th>
  578. <th class="d-none d-xl-table-cell">End Date</th>
  579. <th>Status</th>
  580. <th class="d-none d-md-table-cell">Assignee</th>
  581. </tr>
  582. </thead>
  583. <tbody>
  584. <tr>
  585. <td>Project Apollo</td>
  586. <td class="d-none d-xl-table-cell">01/01/2021</td>
  587. <td class="d-none d-xl-table-cell">31/06/2021</td>
  588. <td><span class="badge bg-success">Done</span></td>
  589. <td class="d-none d-md-table-cell">Vanessa Tucker</td>
  590. </tr>
  591. <tr>
  592. <td>Project Fireball</td>
  593. <td class="d-none d-xl-table-cell">01/01/2021</td>
  594. <td class="d-none d-xl-table-cell">31/06/2021</td>
  595. <td><span class="badge bg-danger">Cancelled</span></td>
  596. <td class="d-none d-md-table-cell">William Harris</td>
  597. </tr>
  598. <tr>
  599. <td>Project Hades</td>
  600. <td class="d-none d-xl-table-cell">01/01/2021</td>
  601. <td class="d-none d-xl-table-cell">31/06/2021</td>
  602. <td><span class="badge bg-success">Done</span></td>
  603. <td class="d-none d-md-table-cell">Sharon Lessman</td>
  604. </tr>
  605. <tr>
  606. <td>Project Nitro</td>
  607. <td class="d-none d-xl-table-cell">01/01/2021</td>
  608. <td class="d-none d-xl-table-cell">31/06/2021</td>
  609. <td><span class="badge bg-warning">In progress</span></td>
  610. <td class="d-none d-md-table-cell">Vanessa Tucker</td>
  611. </tr>
  612. <tr>
  613. <td>Project Phoenix</td>
  614. <td class="d-none d-xl-table-cell">01/01/2021</td>
  615. <td class="d-none d-xl-table-cell">31/06/2021</td>
  616. <td><span class="badge bg-success">Done</span></td>
  617. <td class="d-none d-md-table-cell">William Harris</td>
  618. </tr>
  619. <tr>
  620. <td>Project X</td>
  621. <td class="d-none d-xl-table-cell">01/01/2021</td>
  622. <td class="d-none d-xl-table-cell">31/06/2021</td>
  623. <td><span class="badge bg-success">Done</span></td>
  624. <td class="d-none d-md-table-cell">Sharon Lessman</td>
  625. </tr>
  626. <tr>
  627. <td>Project Romeo</td>
  628. <td class="d-none d-xl-table-cell">01/01/2021</td>
  629. <td class="d-none d-xl-table-cell">31/06/2021</td>
  630. <td><span class="badge bg-success">Done</span></td>
  631. <td class="d-none d-md-table-cell">Christina Mason</td>
  632. </tr>
  633. <tr>
  634. <td>Project Wombat</td>
  635. <td class="d-none d-xl-table-cell">01/01/2021</td>
  636. <td class="d-none d-xl-table-cell">31/06/2021</td>
  637. <td><span class="badge bg-warning">In progress</span></td>
  638. <td class="d-none d-md-table-cell">William Harris</td>
  639. </tr>
  640. </tbody>
  641. </table>
  642. </div>
  643. </div>
  644. </div>
  645. </div>
  646. </div>
  647. <!-- <div class="row">
  648. <div class="col-12 col-lg-8 col-xxl-9 d-flex">
  649. <div class="card flex-fill">
  650. <div class="card-header">
  651. <h5 class="card-title mb-0">Latest Projects</h5>
  652. </div>
  653. <table class="table table-hover my-0">
  654. <thead>
  655. <tr>
  656. <th>Name</th>
  657. <th class="d-none d-xl-table-cell">Start Date</th>
  658. <th class="d-none d-xl-table-cell">End Date</th>
  659. <th>Status</th>
  660. <th class="d-none d-md-table-cell">Assignee</th>
  661. </tr>
  662. </thead>
  663. <tbody>
  664. <tr>
  665. <td>Project Apollo</td>
  666. <td class="d-none d-xl-table-cell">01/01/2021</td>
  667. <td class="d-none d-xl-table-cell">31/06/2021</td>
  668. <td><span class="badge bg-success">Done</span></td>
  669. <td class="d-none d-md-table-cell">Vanessa Tucker</td>
  670. </tr>
  671. <tr>
  672. <td>Project Fireball</td>
  673. <td class="d-none d-xl-table-cell">01/01/2021</td>
  674. <td class="d-none d-xl-table-cell">31/06/2021</td>
  675. <td><span class="badge bg-danger">Cancelled</span></td>
  676. <td class="d-none d-md-table-cell">William Harris</td>
  677. </tr>
  678. <tr>
  679. <td>Project Hades</td>
  680. <td class="d-none d-xl-table-cell">01/01/2021</td>
  681. <td class="d-none d-xl-table-cell">31/06/2021</td>
  682. <td><span class="badge bg-success">Done</span></td>
  683. <td class="d-none d-md-table-cell">Sharon Lessman</td>
  684. </tr>
  685. <tr>
  686. <td>Project Nitro</td>
  687. <td class="d-none d-xl-table-cell">01/01/2021</td>
  688. <td class="d-none d-xl-table-cell">31/06/2021</td>
  689. <td><span class="badge bg-warning">In progress</span></td>
  690. <td class="d-none d-md-table-cell">Vanessa Tucker</td>
  691. </tr>
  692. <tr>
  693. <td>Project Phoenix</td>
  694. <td class="d-none d-xl-table-cell">01/01/2021</td>
  695. <td class="d-none d-xl-table-cell">31/06/2021</td>
  696. <td><span class="badge bg-success">Done</span></td>
  697. <td class="d-none d-md-table-cell">William Harris</td>
  698. </tr>
  699. <tr>
  700. <td>Project X</td>
  701. <td class="d-none d-xl-table-cell">01/01/2021</td>
  702. <td class="d-none d-xl-table-cell">31/06/2021</td>
  703. <td><span class="badge bg-success">Done</span></td>
  704. <td class="d-none d-md-table-cell">Sharon Lessman</td>
  705. </tr>
  706. <tr>
  707. <td>Project Romeo</td>
  708. <td class="d-none d-xl-table-cell">01/01/2021</td>
  709. <td class="d-none d-xl-table-cell">31/06/2021</td>
  710. <td><span class="badge bg-success">Done</span></td>
  711. <td class="d-none d-md-table-cell">Christina Mason</td>
  712. </tr>
  713. <tr>
  714. <td>Project Wombat</td>
  715. <td class="d-none d-xl-table-cell">01/01/2021</td>
  716. <td class="d-none d-xl-table-cell">31/06/2021</td>
  717. <td><span class="badge bg-warning">In progress</span></td>
  718. <td class="d-none d-md-table-cell">William Harris</td>
  719. </tr>
  720. </tbody>
  721. </table>
  722. </div>
  723. </div>
  724. <div class="col-12 col-lg-4 col-xxl-3 d-flex">
  725. <div class="card flex-fill w-100">
  726. <div class="card-header">
  727. <h5 class="card-title mb-0">Monthly Sales</h5>
  728. </div>
  729. <div class="card-body d-flex w-100">
  730. <div class="align-self-center chart chart-lg">
  731. <canvas id="chartjs-dashboard-bar"></canvas>
  732. </div>
  733. </div>
  734. </div>
  735. </div>
  736. </div> -->
  737. </div>
  738. </main>
  739. <footer class="footer">
  740. <div class="container-fluid">
  741. <div class="row text-muted">
  742. <div class="col-6 text-start">
  743. <p class="mb-0">
  744. <a class="text-muted" href="https://admin.io/" target="_blank"><strong>Admin</strong></a> &copy;
  745. </p>
  746. </div>
  747. <div class="col-6 text-end">
  748. <ul class="list-inline">
  749. <li class="list-inline-item">
  750. <a class="text-muted" href="https://admin.io/" target="_blank">Support</a>
  751. </li>
  752. <li class="list-inline-item">
  753. <a class="text-muted" href="https://admin.io/" target="_blank">Help Center</a>
  754. </li>
  755. <li class="list-inline-item">
  756. <a class="text-muted" href="https://admin.io/" target="_blank">Privacy</a>
  757. </li>
  758. <li class="list-inline-item">
  759. <a class="text-muted" href="https://admin.io/" target="_blank">Terms</a>
  760. </li>
  761. </ul>
  762. </div>
  763. </div>
  764. </div>
  765. </footer>
  766. <div class="bottom-menu">
  767. <a href="http://167.172.92.138:8069/web#menu_id=203&action_id=343">
  768. <i class="fas fa-poll"></i>
  769. Survey
  770. </a>
  771. <a href="http://167.172.92.138:8069/web#menu_id=231&action_id=367">
  772. <i class="fas fa-file-alt"></i>
  773. CR
  774. </a>
  775. <a href="http://167.172.92.138:8069/web#menu_id=234&action_id=369">
  776. <i class="fas fa-chart-pie"></i>
  777. GAC
  778. </a>
  779. <a href="http://167.172.92.138:8069/web#menu_id=236&action_id=372">
  780. <i class="fas fa-wrench"></i>
  781. SITAC
  782. </a>
  783. <a href="http://167.172.92.138:8069/web#menu_id=240&action_id=376">
  784. <i class="fas fa-cogs"></i>
  785. MOA
  786. </a>
  787. <a href="http://167.172.92.138:8069/web#menu_id=334&action_id=475">
  788. <i class="fas fa-sitemap"></i>
  789. SITE
  790. </a>
  791. <a href="http://167.172.92.138:8069/web#menu_id=112&action_id=195">
  792. <i class="fas fa-tasks"></i>
  793. Project
  794. </a>
  795. <a href="http://167.172.92.138:8069/web#menu_id=263&action_id=401">
  796. <i class="fas fa-check"></i>
  797. Approvals
  798. </a>
  799. </div>
  800. </div>
  801. </div>
  802. <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  803. <!-- jQuery -->
  804. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  805. <!-- DataTables JS -->
  806. <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
  807. <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
  808. <script src="js/app.js"></script>
  809. <script>
  810. $(document).ready(function() {
  811. $('#projectTable').DataTable();
  812. });
  813. </script>
  814. <script>
  815. document.addEventListener("DOMContentLoaded", function() {
  816. var ctx = document.getElementById("chartjs-dashboard-line").getContext("2d");
  817. var gradient = ctx.createLinearGradient(0, 0, 0, 225);
  818. gradient.addColorStop(0, "rgba(215, 227, 244, 1)");
  819. gradient.addColorStop(1, "rgba(215, 227, 244, 0)");
  820. // Line chart
  821. new Chart(document.getElementById("chartjs-dashboard-line"), {
  822. type: "line",
  823. data: {
  824. labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  825. datasets: [{
  826. label: "Sales ($)",
  827. fill: true,
  828. backgroundColor: gradient,
  829. borderColor: window.theme.primary,
  830. data: [
  831. 2115,
  832. 1562,
  833. 1584,
  834. 1892,
  835. 1587,
  836. 1923,
  837. 2566,
  838. 2448,
  839. 2805,
  840. 3438,
  841. 2917,
  842. 3327
  843. ]
  844. }]
  845. },
  846. options: {
  847. maintainAspectRatio: false,
  848. legend: {
  849. display: false
  850. },
  851. tooltips: {
  852. intersect: false
  853. },
  854. hover: {
  855. intersect: true
  856. },
  857. plugins: {
  858. filler: {
  859. propagate: false
  860. }
  861. },
  862. scales: {
  863. xAxes: [{
  864. reverse: true,
  865. gridLines: {
  866. color: "rgba(0,0,0,0.0)"
  867. }
  868. }],
  869. yAxes: [{
  870. ticks: {
  871. stepSize: 1000
  872. },
  873. display: true,
  874. borderDash: [3, 3],
  875. gridLines: {
  876. color: "rgba(0,0,0,0.0)"
  877. }
  878. }]
  879. }
  880. }
  881. });
  882. });
  883. </script>
  884. <script>
  885. document.addEventListener('DOMContentLoaded', function () {
  886. // Data untuk diagram pie
  887. var pieData1 = {
  888. labels: ['Done', 'On Progress'],
  889. datasets: [{
  890. data: [80, 20],
  891. backgroundColor: ['#28a745', '#dc3545'],
  892. hoverBackgroundColor: ['#28a745', '#dc3545']
  893. }]
  894. };
  895. var pieData2 = {
  896. labels: ['Done', 'On Progress'],
  897. datasets: [{
  898. data: [60, 40],
  899. backgroundColor: ['#28a745', '#dc3545'],
  900. hoverBackgroundColor: ['#28a745', '#dc3545']
  901. }]
  902. };
  903. var pieData3 = {
  904. labels: ['Done', 'On Progress'],
  905. datasets: [{
  906. data: [75, 25],
  907. backgroundColor: ['#28a745', '#dc3545'],
  908. hoverBackgroundColor: ['#28a745', '#dc3545']
  909. }]
  910. };
  911. var pieData4 = {
  912. labels: ['Done', 'On Progress'],
  913. datasets: [{
  914. data: [90, 10],
  915. backgroundColor: ['#28a745', '#dc3545'],
  916. hoverBackgroundColor: ['#28a745', '#dc3545']
  917. }]
  918. };
  919. var pieData5 = {
  920. labels: ['Done', 'Not Yet'],
  921. datasets: [{
  922. data: [60, 40],
  923. backgroundColor: ['#28a745', '#FFCF52'],
  924. hoverBackgroundColor: ['#28a745', '#FFCF52']
  925. }]
  926. };
  927. // Fungsi untuk membuat diagram pie
  928. function createPieChart(canvasId, pieData) {
  929. var ctx = document.getElementById(canvasId).getContext('2d');
  930. new Chart(ctx, {
  931. type: 'pie',
  932. data: pieData
  933. });
  934. }
  935. // Panggil fungsi untuk setiap card
  936. createPieChart('pieChart1', pieData1);
  937. createPieChart('pieChart2', pieData2);
  938. createPieChart('pieChart3', pieData3);
  939. createPieChart('pieChart4', pieData4);
  940. createPieChart('pieChart5', pieData5);
  941. });
  942. </script>
  943. <script>
  944. document.addEventListener("DOMContentLoaded", function() {
  945. // Pie chart
  946. new Chart(document.getElementById("chartjs-dashboard-pie"), {
  947. type: "pie",
  948. data: {
  949. labels: ["Chrome", "Firefox", "IE"],
  950. datasets: [{
  951. data: [4306, 3801, 1689],
  952. backgroundColor: [
  953. window.theme.primary,
  954. window.theme.warning,
  955. window.theme.danger
  956. ],
  957. borderWidth: 5
  958. }]
  959. },
  960. options: {
  961. responsive: !window.MSInputMethodContext,
  962. maintainAspectRatio: false,
  963. legend: {
  964. display: false
  965. },
  966. cutoutPercentage: 75
  967. }
  968. });
  969. });
  970. </script>
  971. <script>
  972. document.addEventListener("DOMContentLoaded", function() {
  973. // Bar chart
  974. new Chart(document.getElementById("chartjs-dashboard-bar"), {
  975. type: "bar",
  976. data: {
  977. labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  978. datasets: [{
  979. label: "This year",
  980. backgroundColor: window.theme.primary,
  981. borderColor: window.theme.primary,
  982. hoverBackgroundColor: window.theme.primary,
  983. hoverBorderColor: window.theme.primary,
  984. data: [54, 67, 41, 55, 62, 45, 55, 73, 60, 76, 48, 79],
  985. barPercentage: .75,
  986. categoryPercentage: .5
  987. }]
  988. },
  989. options: {
  990. maintainAspectRatio: false,
  991. legend: {
  992. display: false
  993. },
  994. scales: {
  995. yAxes: [{
  996. gridLines: {
  997. display: false
  998. },
  999. stacked: false,
  1000. ticks: {
  1001. stepSize: 20
  1002. }
  1003. }],
  1004. xAxes: [{
  1005. stacked: false,
  1006. gridLines: {
  1007. color: "transparent"
  1008. }
  1009. }]
  1010. }
  1011. }
  1012. });
  1013. });
  1014. </script>
  1015. <script>
  1016. document.addEventListener("DOMContentLoaded", function() {
  1017. var markers = [{
  1018. coords: [31.230391, 121.473701],
  1019. name: "Shanghai"
  1020. },
  1021. {
  1022. coords: [28.704060, 77.102493],
  1023. name: "Delhi"
  1024. },
  1025. {
  1026. coords: [6.524379, 3.379206],
  1027. name: "Lagos"
  1028. },
  1029. {
  1030. coords: [35.689487, 139.691711],
  1031. name: "Tokyo"
  1032. },
  1033. {
  1034. coords: [23.129110, 113.264381],
  1035. name: "Guangzhou"
  1036. },
  1037. {
  1038. coords: [40.7127837, -74.0059413],
  1039. name: "New York"
  1040. },
  1041. {
  1042. coords: [34.052235, -118.243683],
  1043. name: "Los Angeles"
  1044. },
  1045. {
  1046. coords: [41.878113, -87.629799],
  1047. name: "Chicago"
  1048. },
  1049. {
  1050. coords: [51.507351, -0.127758],
  1051. name: "London"
  1052. },
  1053. {
  1054. coords: [40.416775, -3.703790],
  1055. name: "Madrid "
  1056. }
  1057. ];
  1058. var map = new jsVectorMap({
  1059. map: "world",
  1060. selector: "#world_map",
  1061. zoomButtons: true,
  1062. markers: markers,
  1063. markerStyle: {
  1064. initial: {
  1065. r: 9,
  1066. strokeWidth: 7,
  1067. stokeOpacity: .4,
  1068. fill: window.theme.primary
  1069. },
  1070. hover: {
  1071. fill: window.theme.primary,
  1072. stroke: window.theme.primary
  1073. }
  1074. },
  1075. zoomOnScroll: false
  1076. });
  1077. window.addEventListener("resize", () => {
  1078. map.updateSize();
  1079. });
  1080. });
  1081. </script>
  1082. <script>
  1083. document.addEventListener("DOMContentLoaded", function() {
  1084. var date = new Date(Date.now() - 5 * 24 * 60 * 60 * 1000);
  1085. var defaultDate = date.getUTCFullYear() + "-" + (date.getUTCMonth() + 1) + "-" + date.getUTCDate();
  1086. document.getElementById("datetimepicker-dashboard").flatpickr({
  1087. inline: true,
  1088. prevArrow: "<span title=\"Previous month\">&laquo;</span>",
  1089. nextArrow: "<span title=\"Next month\">&raquo;</span>",
  1090. defaultDate: defaultDate
  1091. });
  1092. });
  1093. </script>
  1094. </body>
  1095. </html>