No Description
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

layout-user.blade.php 23KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440
  1. <!doctype html>
  2. <html
  3. lang="en"
  4. class="light-style layout-navbar-fixed layout-menu-fixed layout-compact"
  5. dir="ltr"
  6. data-theme="theme-default"
  7. data-assets-path="../../assets/"
  8. data-template="vertical-menu-template">
  9. <head>
  10. <meta charset="utf-8" />
  11. <meta
  12. name="viewport"
  13. content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
  14. <title>SAFIRA</title>
  15. <meta name="description" content="" />
  16. <!-- Favicon -->
  17. <link rel="icon" type="image/x-icon" href="../../assets/img/favicon/favicon.ico" />
  18. <!-- Fonts -->
  19. <link rel="preconnect" href="https://fonts.googleapis.com" />
  20. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  21. <link
  22. href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&ampdisplay=swap"
  23. rel="stylesheet" />
  24. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous">
  25. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">
  26. <!-- Icons -->
  27. <link rel="stylesheet" href="../../assets/vendor/fonts/fontawesome.css" />
  28. <link rel="stylesheet" href="../../assets/vendor/fonts/tabler-icons.css" />
  29. <link href='https://unpkg.com/css.gg@2.0.0/icons/css/menu-grid-o.css' rel='stylesheet'>
  30. <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
  31. <!-- Core CSS -->
  32. <link rel="stylesheet" href="../../assets/vendor/css/rtl/core.css" class="template-customizer-core-css" />
  33. <link rel="stylesheet" href="../../assets/vendor/css/rtl/theme-default.css" class="template-customizer-theme-css" />
  34. <link rel="stylesheet" href="../../assets/css/demo.css" />
  35. >
  36. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  37. <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  38. <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>
  39. <!-- Helpers -->
  40. <script src="../../assets/vendor/js/helpers.js"></script>
  41. <script src="../../assets/vendor/js/template-customizer.js"></script>
  42. <!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
  43. <script src="../../assets/js/config.js"></script>
  44. <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  45. </head>
  46. <body>
  47. <!-- Layout wrapper -->
  48. <div class="layout-wrapper layout-content-navbar">
  49. <div class="layout-container">
  50. <!-- Menu -->
  51. <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
  52. <div class="app-brand demo">
  53. <a href="#" class="app-brand-link">
  54. <span class="app-brand-logo demo" style="display: block; width: 60px; height: 60px;">
  55. <img src="{{ asset('assets/img/icons/logo.png') }}" alt="icon" style="width: 100%; height: 100%;" />
  56. </span>
  57. <span class="app-brand-text demo menu-text fw-bold" style="font-size: 180%; margin-right:0%;">SAFIRA</span>
  58. </a>
  59. <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
  60. <i class="ti menu-toggle-icon d-none d-xl-block ti-sm align-middle"></i>
  61. <i class="ti ti-x d-block d-xl-none ti-sm align-middle"></i>
  62. </a>
  63. </div>
  64. <div class="menu-inner-shadow"></div>
  65. <hr style="border-top: 1px solid black; width: 100%;"> <!-- Garis panjang hitam akan ditampilkan di sini -->
  66. <ul class="menu-inner py-1">
  67. <!-- Dashboards -->
  68. @if(Auth::user()->role === 'admin')
  69. <li class="menu-item {{ Request::is('dashboards*') ? ' active' : '' }}">
  70. <a href="{{ route('admin.dashboards') }}" class="menu-link">
  71. <i class="menu-icon tf-icons fa fa-home" style="font-size: 18px;"></i>
  72. <div data-i18n="Dashboard">Dashboard</div>
  73. <div class="badge bg-primary rounded-pill ms-auto"></div>
  74. </a>
  75. </li>
  76. <li class="menu-item {{ Request::is('tindakan*') ? 'active' : '' }}">
  77. <a href="{{ route('tindakan.index') }}" class="menu-link">
  78. <i class="menu-icon tf-icons fas fa-tools" style="font-size: 18px;"></i>
  79. <div data-i18n="Tindak Lanjut">Tindak Lanjut</div>
  80. <div class="badge bg-primary rounded-pill ms-auto"></div>
  81. </a>
  82. </li>
  83. <li class="menu-item {{ Request::is('apresiasi*') ? 'active' : '' }}">
  84. <a href="{{ route('apresiasi.adminIndex') }}" class="menu-link">
  85. <i class="menu-icon tf-icons fa fa-thumbs-up" style="font-size: 18px;"></i>
  86. <div data-i18n="Apresiasi">Pelaporan Apresiasi</div>
  87. <div class="badge bg-primary rounded-pill ms-auto"></div>
  88. </a>
  89. </li>
  90. <li class="menu-item {{ Request::is('informasi*') ? 'active' : '' }}">
  91. <a href="{{ route('informasi.adminIndex') }}" class="menu-link">
  92. <i class="menu-icon tf-icons fa fa-info-circle" style="font-size: 18px;"></i>
  93. <div data-i18n="Informasi">Informasi</div>
  94. <div class="badge bg-primary rounded-pill ms-auto"></div>
  95. </a>
  96. </li>
  97. <li class="menu-item {{ Request::is('user*') ? 'active' : '' }}">
  98. <a href="{{ route('user.index') }}" class="menu-link">
  99. <i class="menu-icon tf-icons fa fa-user" style="font-size: 18px;"></i>
  100. <div data-i18n="Kelola User">Kelola User</div>
  101. <div class="badge bg-primary rounded-pill ms-auto"></div>
  102. </a>
  103. </li>
  104. @else
  105. <li class="menu-item {{ Request::is('dashboard*') ? ' active' : '' }}">
  106. <a href="{{ route('users.dashboard') }}" class="menu-link">
  107. <i class="menu-icon tf-icons fa fa-home" style="font-size: 18px;"></i>
  108. <div data-i18n="Dashboard">Dashboard</div>
  109. <div class="badge bg-primary rounded-pill ms-auto"></div>
  110. </a>
  111. </li>
  112. <li class="menu-item {{ Request::is('pelaporan*') ? 'active' : '' }}">
  113. <a href="{{ route('pelaporan.index') }}" class="menu-link">
  114. <i class="menu-icon tf-icons fa fa-exclamation-triangle" style="font-size: 18px;"></i>
  115. <div data-i18n="Pelaporan">Pelaporan Bahaya</div>
  116. <div class="badge bg-primary rounded-pill ms-auto"></div>
  117. </a>
  118. </li>
  119. <li class="menu-item {{ Request::is('apresiasi*') ? 'active' : '' }}">
  120. <a href="{{ route('apresiasi.userIndex') }}" class="menu-link">
  121. <i class="menu-icon tf-icons fa fa-thumbs-up" style="font-size: 18px;"></i>
  122. <div data-i18n="Apresiasi">Pelaporan Apresiasi</div>
  123. <div class="badge bg-primary rounded-pill ms-auto"></div>
  124. </a>
  125. </li>
  126. <li class="menu-item {{ Request::is('informasi*') ? 'active' : '' }}">
  127. <a href="{{ route('informasi.userIndex') }}" class="menu-link">
  128. <i class="menu-icon tf-icons fa fa-info-circle" style="font-size: 18px;"></i>
  129. <div data-i18n="Informasi">Informasi</div>
  130. <div class="badge bg-primary rounded-pill ms-auto"></div>
  131. </a>
  132. </li>
  133. @endif
  134. <li class="menu-item {{ Request::is('riwayat*') ? 'active' : '' }}">
  135. <a href="{{ route('riwayat.index') }}" class="menu-link">
  136. <i class="menu-icon tf-icons fa fa-receipt" style="font-size: 18px;"></i>
  137. <div data-i18n="Riwayat Pelaporan">Riwayat Pelaporan</div>
  138. <div class="badge bg-primary rounded-pill ms-auto"></div>
  139. </a>
  140. </li>
  141. <li class="menu-item {{ Request::is('panduan*') ? 'active' : '' }}">
  142. <a href="{{ route('panduan.index') }}" class="menu-link">
  143. <i class="menu-icon tf-icons fa fa-question-circle" style="font-size: 18px;"></i>
  144. <div data-i18n="Panduan">Panduan</div>
  145. <div class="badge bg-primary rounded-pill ms-auto"></div>
  146. </a>
  147. </li>
  148. </ul>
  149. </aside>
  150. <!-- / Menu -->
  151. <!-- Layout container -->
  152. <div class="layout-page">
  153. <!-- Navbar -->
  154. <nav
  155. class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
  156. id="layout-navbar">
  157. <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
  158. <a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
  159. <i class="ti ti-menu-2 ti-sm"></i>
  160. </a>
  161. </div>
  162. <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
  163. <!-- Search -->
  164. <div class="navbar-nav align-items-center">
  165. <div class="nav-item navbar-search-wrapper mb-0">
  166. <a class="nav-item nav-link search-toggler d-flex align-items-center px-0" href="javascript:void(0);">
  167. <i class="ti ti-search ti-md me-2"></i>
  168. <span class="d-none d-md-inline-block text-muted">Search (Ctrl+/)</span>
  169. </a>
  170. </div>
  171. </div>
  172. <!-- /Search -->
  173. <ul class="navbar-nav flex-row align-items-center ms-auto">
  174. <!-- Style Switcher -->
  175. <li class="nav-item dropdown-style-switcher dropdown me-2 me-xl-0">
  176. <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
  177. <i class="ti ti-md"></i>
  178. </a>
  179. <ul class="dropdown-menu dropdown-menu-end dropdown-styles">
  180. <li>
  181. <a class="dropdown-item" href="javascript:void(0);" data-theme="light">
  182. <span class="align-middle"><i class="ti ti-sun me-2"></i>Light</span>
  183. </a>
  184. </li>
  185. <li>
  186. <a class="dropdown-item" href="javascript:void(0);" data-theme="dark">
  187. <span class="align-middle"><i class="ti ti-moon me-2"></i>Dark</span>
  188. </a>
  189. </li>
  190. <li>
  191. <a class="dropdown-item" href="javascript:void(0);" data-theme="system">
  192. <span class="align-middle"><i class="ti ti-device-desktop me-2"></i>System</span>
  193. </a>
  194. </li>
  195. </ul>
  196. </li>
  197. <!-- / Style Switcher-->
  198. <!-- Notification -->
  199. <li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-1">
  200. @php
  201. $count = $laporan->count();
  202. @endphp
  203. <a
  204. class="nav-link dropdown-toggle hide-arrow"
  205. href="javascript:void(0);"
  206. data-bs-toggle="dropdown"
  207. data-bs-auto-close="outside"
  208. aria-expanded="false">
  209. <i class="ti ti-bell ti-md"></i>
  210. <span class="badge bg-danger rounded-pill badge-notifications">{{$count}}</span>
  211. </a>
  212. <ul class="dropdown-menu dropdown-menu-end py-0">
  213. <li class="dropdown-menu-header border-bottom">
  214. <div class="dropdown-header d-flex align-items-center py-3">
  215. <h5 class="text-body mb-0 me-auto">Notification</h5>
  216. <a
  217. href="javascript:void(0)"
  218. class="dropdown-notifications-all text-body"
  219. data-bs-toggle="tooltip"
  220. data-bs-placement="top"
  221. title="Mark all as read"
  222. ><i class="ti ti-mail-opened fs-4"></i
  223. ></a>
  224. </div>
  225. </li>
  226. @if(Auth::user()->role === 'admin')
  227. <li class="dropdown-notifications-list scrollable-container">
  228. <div style="max-height: 300px; overflow-y: scroll;">
  229. @foreach ($laporan as $laporan)
  230. <ul class="list-group list-group-flush">
  231. <li class="list-group-item list-group-item-action dropdown-notifications-item">
  232. <div class="d-flex">
  233. <div class="flex-shrink-0 me-3">
  234. <div class="avatar">
  235. <img src="{{Auth::user()->foto}}" alt class="h-auto rounded-circle" />
  236. </div>
  237. </div>
  238. <div class="flex-grow-1">
  239. <h6 class="mb-1"><b>Laporan Baru</b></h6>
  240. <p class="mb-0">Laporan baru masuk mengenai {{$laporan->judul}} dari {{$laporan->user_id}} di lokasi {{$laporan->lokasi}} dengan rentan bahaya {{$laporan->status}}</p>
  241. <small class="text-muted">{{$laporan->tanggal}}</small>
  242. </div>
  243. <div class="flex-shrink-0 dropdown-notifications-actions">
  244. <a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
  245. <a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="ti ti-x"></span></a>
  246. </div>
  247. </div>
  248. </li>
  249. </ul>
  250. @endforeach
  251. </div>
  252. </li>
  253. <li class="dropdown-menu-footer border-top">
  254. <a
  255. href="{{route('tindakan.index')}}"
  256. class="dropdown-item d-flex justify-content-center text-primary p-2 h-px-40 mb-1 align-items-center">
  257. View all notifications
  258. </a>
  259. </li>
  260. @elseif (Auth::user()->role === 'user')
  261. <li class="dropdown-notifications-list scrollable-container">
  262. <div style="max-height: 300px; overflow-y: scroll;">
  263. @foreach ($laporan as $laporan)
  264. <ul class="list-group list-group-flush">
  265. <li class="list-group-item list-group-item-action dropdown-notifications-item">
  266. <div class="d-flex">
  267. <div class="flex-shrink-0 me-3">
  268. <div class="avatar">
  269. <img src="{{Auth::user()->foto}}" alt class="h-auto rounded-circle" />
  270. </div>
  271. </div>
  272. <div class="flex-grow-1">
  273. <h6 class="mb-1"><b>Tanggarapn Laporan</b></h6>
  274. <p class="mb-0">Laporan kamu mengenai {{$laporan->judul}} di lokasi {{$laporan->lokasi}} dengan rentan bahaya {{$laporan->status}} masuk fase {{$laporan->tindakan->statusTindakan}}</p>
  275. <small class="text-muted">{{$laporan->tanggal}}</small>
  276. </div>
  277. <div class="flex-shrink-0 dropdown-notifications-actions">
  278. <a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
  279. <a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="ti ti-x"></span></a>
  280. </div>
  281. </div>
  282. </li>
  283. </ul>
  284. @endforeach
  285. </div>
  286. </li>
  287. <li class="dropdown-menu-footer border-top">
  288. <a
  289. href="{{route('pelaporan.index')}}"
  290. class="dropdown-item d-flex justify-content-center text-primary p-2 h-px-40 mb-1 align-items-center">
  291. View all notifications
  292. </a>
  293. </li>
  294. @endif
  295. </ul>
  296. </li>
  297. <!--/ Notification -->
  298. <!-- User -->
  299. <li class="nav-item navbar-dropdown dropdown-user dropdown">
  300. <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
  301. <div class="avatar avatar-online">
  302. <img src="{{Auth::user()->foto}}" alt class="h-auto rounded-circle" />
  303. </div>
  304. </a>
  305. <ul class="dropdown-menu dropdown-menu-end">
  306. <li>
  307. <a class="dropdown-item" href="pages-account-settings-account.html">
  308. <div class="d-flex">
  309. <div class="flex-shrink-0 me-3">
  310. <div class="avatar avatar-online">
  311. <img src="{{Auth::user()->foto}}" alt class="h-auto rounded-circle" />
  312. </div>
  313. </div>
  314. <div class="flex-grow-1">
  315. <span class="fw-medium d-block">{{Auth::user()->name}}</span>
  316. <small class="text-muted">{{Auth::user()->role}}</small>
  317. </div>
  318. </div>
  319. </a>
  320. </li>
  321. <li>
  322. <div class="dropdown-divider"></div>
  323. </li>
  324. <li>
  325. <a class="dropdown-item" href="{{ route('profile.index') }}">
  326. <i class="ti ti-user me-2 ti-sm"></i>
  327. <span class="align-middle">Profile</span>
  328. </a>
  329. </li>
  330. <li>
  331. <a class="dropdown-item" href="{{ route('logout') }}">
  332. <i class="ti ti-logout me-2 ti-sm"></i>
  333. <span class="align-middle">Log Out</span>
  334. </a>
  335. </li>
  336. </ul>
  337. </li>
  338. <!--/ User -->
  339. </ul>
  340. </div>
  341. <!-- Search Small Screens -->
  342. <div class="navbar-search-wrapper search-input-wrapper d-none">
  343. <input
  344. type="text"
  345. class="form-control search-input container-xxl border-0"
  346. placeholder="Search..."
  347. aria-label="Search..." />
  348. <i class="ti ti-x ti-sm search-toggler cursor-pointer"></i>
  349. </div>
  350. </nav>
  351. <!-- / Navbar -->
  352. <!-- Content wrapper -->
  353. <div class="content-wrapper">
  354. <!-- Content -->
  355. <div class="container-xxl flex-grow-1 container-p-y">
  356. @yield("content")
  357. </div>
  358. <!-- / Content -->
  359. <!-- Footer -->
  360. <footer class="content-footer footer bg-footer-theme">
  361. <div class="container-xxl">
  362. <div
  363. class="footer-container d-flex align-items-center justify-content-between py-2 flex-md-row flex-column">
  364. <div>
  365. ©
  366. <script>
  367. document.write(new Date().getFullYear());
  368. </script>
  369. </div>
  370. </div>
  371. </div>
  372. </footer>
  373. <!-- / Footer -->
  374. <div class="content-backdrop fade"></div>
  375. </div>
  376. <!-- Content wrapper -->
  377. </div>
  378. <!-- / Layout page -->
  379. </div>
  380. <!-- Overlay -->
  381. <div class="layout-overlay layout-menu-toggle"></div>
  382. <!-- Drag Target Area To SlideIn Menu On Small Screens -->
  383. <div class="drag-target"></div>
  384. </div>
  385. <!-- / Layout wrapper -->
  386. <!-- Core JS -->
  387. <!-- build:js assets/vendor/js/core.js -->
  388. <script src="../../assets/vendor/libs/jquery/jquery.js"></script>
  389. <script src="../../assets/vendor/js/bootstrap.js"></script>
  390. <script src="../../assets/vendor/js/menu.js"></script>
  391. <!-- endbuild -->
  392. <!-- Main JS -->
  393. <script src="../../assets/js/main.js"></script>
  394. <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet">
  395. <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
  396. @include('sweetalert::alert')
  397. <!-- Page JS -->
  398. <script src="../../assets/js/dashboards-analytics.js"></script>
  399. </body>
  400. </html>