ilham
/
dikplhd
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

main
Ilham Wara Nugroho 2026-02-17 12:32:19 +07:00
parent c192022701
commit 2558f6cbb6
6 changed files with 703 additions and 465 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
app/Helpers/custom.php
View File

@ -244,70 +244,96 @@ if (!function_exists('renderMenu')) {
$ch1 = count($child2) > 0 ? '' : '';
$link1 = count($child2) > 0 ? '' : 'menu-link';
$collapse1 = count($child2) > 0 ? 'data-fc-type="collapse"' : '';
$active = activeMenuClass($p1->module) ? 'active' : '';
// dd($p1->route);
$show = activeMenuClass($p1->module) ? 'style="display:block!important;"' : '';
$active = activeMenuClass($p1->module) ? 'sidebar-item-active' : '';
if ($access1) {
$active1 = activeMenuClass($p1->module) ? 'active' : '';
$html .= '<li class=" menu-item ' . $ch1 . '">
<a '.$collapse1.' class=" menu-link '.$active1.'" href="' . url($p1->url) . '">
<span class="menu-icon"><i class="' . $p1->menu_icons . '"></i>
</span> <span class="menu-text ">' . @$p1->title.'</span>';
if($access1){
if (count($child2) > 0) {
$html .= '<span class="menu-arrow"></span>';
$html .= '</a>';
$html .= '<ul class="sub-menu hidden">';
foreach ($child2 as $p2) {
$child3 = Menu::where('status',true)->where('menu_type','sidebar')->where('parent_id',$p2->MsMenuId)->get();
$access2 = permission('is_read', $p2->MsMenuId, 'menu', true);
$ch2 = count($child3) > 0 ? '' : '';
$collapse2 = count($child3) > 0 ? 'data-fc-type="collapse"' : '';
$link2 = count($child3) > 0 ? '' : 'menu-link';
if ($access2) {
$active2 = activeMenuClass($p2->module) ? 'active' : '';
$html .= '<li class=" menu-item ' . $ch2 . '"><a '.$collapse2.' class="menu-link '.$active2.'" href="' . url($p2->url) . '"><span class="menu-icon"><i class="' . $p2->menu_icons . '"></i></span> <span class="menu-text ">' . @$p2->title.'<span>';
if (count($child3) > 0) {
$html .= '<span class="menu-arrow"></span>';
$html .= '</a>';
$html .= '<ul class="sub-menu hidden">';
foreach ($child3 as $p3) {
$child4 = Menu::where('status',true)->where('menu_type','sidebar')->where('parent_id',$p3->MsMenuId)->get();
$access3 = permission('is_read', $p3->MsMenuId, 'menu', true);
$collapse3 = count($child4) > 0 ? 'data-fc-type="collapse"' : '';
$ch3 = count($child4) > 0 ? '' : '';
$link3 = count($child4) > 0 ? '' : 'menu-link';
if ($access3) {
$active3 = activeMenuClass($p3->module) ? 'active' : '';
// $active3 = $active ? ' ' . null : null;
$html .= '<li class=" menu-item ' . $ch3 .'"><a '.$collapse3.' class="menu-link '.$active3.'" href="' . url($p3->url) . '"> <span class="menu-text ">' . @$p3->title.'</span>';
if (count($child4) > 0) {
$html .= '<span class="menu-arrow"></span>';
$html .= '</a>';
$html .= '<ul class="sub-menu hidden">';
foreach ($child4 as $p4) {
$html .= '<li class=" ' . null . '"><a class="menu-link" href="' . url($p4->url) . '"> <span class="menu-text ">' . @$p4->title.'<span>';
}
$html .= '</ul>';
} else {
$html .= '</a>';
}
$html .= '</li>';
}
$html .= '<div class="menu-dropdown">
<button class="'.$active.' w-full flex items-center justify-between px-6 py-3 text-slate-500 hover:text-blue-600 hover:bg-slate-50 transition-all dropdown-trigger group">
<div class="flex items-center">
<i data-lucide="'.$p1->menu_icons.'" class="w-5 h-5 shrink-0"></i>
<span class="sidebar-text font-semibold text-sm ml-3">'.$p1->title.'</span>
</div>
<i data-lucide="chevron-down" class="sidebar-dropdown-icon w-4 h-4 transition-transform duration-200"></i>
</button>
<div class="submenu" '.$show.' >';
foreach ($child2 as $p2) {
$active2 = activeMenuClass($p2->module) ? 'sidebar-item-active' : '';
$html .= '<a href="'.url($p2->url).'" class="'.$active2.' flex items-center pl-14 pr-6 py-2.5 text-xs font-medium text-slate-500 hover:text-blue-600 transition-colors">'.$p2->title.'</a>';
}
$html .= '</ul>';
} else {
$html .= '</a>';
}
$html .= '</li>';
}
}
$html .= '</ul>';
} else {
$html .= '</a>';
$html .= '</div>
</div>';
}else{
$html .= '<a href="'.url($p1->url).'" class="'.$active.' flex items-center px-6 py-3 transition-all group">
<i data-lucide="'.$p1->menu_icons.'" class="w-5 h-5 shrink-0"></i>
<span class="sidebar-text font-semibold text-sm ml-3">'.$p1->title.'</span>
</a>';
}
$html .= '</li>';
}
// if ($access1) {
// $active1 = activeMenuClass($p1->module) ? 'sidebar-item-active' : '';
// $html .= '<li class=" menu-item ' . $ch1 . '">
// <a '.$collapse1.' class=" menu-link '.$active1.'" href="' . url($p1->url) . '">
// <span class="menu-icon"><i class="' . $p1->menu_icons . '"></i>
// </span> <span class="menu-text ">' . @$p1->title.'</span>';
// if (count($child2) > 0) {
// $html .= '<span class="menu-arrow"></span>';
// $html .= '</a>';
// $html .= '<ul class="sub-menu hidden">';
// foreach ($child2 as $p2) {
// $child3 = Menu::where('status',true)->where('menu_type','sidebar')->where('parent_id',$p2->MsMenuId)->get();
// $access2 = permission('is_read', $p2->MsMenuId, 'menu', true);
// $ch2 = count($child3) > 0 ? '' : '';
// $collapse2 = count($child3) > 0 ? 'data-fc-type="collapse"' : '';
// $link2 = count($child3) > 0 ? '' : 'menu-link';
// if ($access2) {
// $active2 = activeMenuClass($p2->module) ? 'active' : '';
// $html .= '<li class=" menu-item ' . $ch2 . '"><a '.$collapse2.' class="menu-link '.$active2.'" href="' . url($p2->url) . '"><span class="menu-icon"><i class="' . $p2->menu_icons . '"></i></span> <span class="menu-text ">' . @$p2->title.'<span>';
// if (count($child3) > 0) {
// $html .= '<span class="menu-arrow"></span>';
// $html .= '</a>';
// $html .= '<ul class="sub-menu hidden">';
// foreach ($child3 as $p3) {
// $child4 = Menu::where('status',true)->where('menu_type','sidebar')->where('parent_id',$p3->MsMenuId)->get();
// $access3 = permission('is_read', $p3->MsMenuId, 'menu', true);
// $collapse3 = count($child4) > 0 ? 'data-fc-type="collapse"' : '';
// $ch3 = count($child4) > 0 ? '' : '';
// $link3 = count($child4) > 0 ? '' : 'menu-link';
// if ($access3) {
// $active3 = activeMenuClass($p3->module) ? 'active' : '';
// // $active3 = $active ? ' ' . null : null;
// $html .= '<li class=" menu-item ' . $ch3 .'"><a '.$collapse3.' class="menu-link '.$active3.'" href="' . url($p3->url) . '"> <span class="menu-text ">' . @$p3->title.'</span>';
// if (count($child4) > 0) {
// $html .= '<span class="menu-arrow"></span>';
// $html .= '</a>';
// $html .= '<ul class="sub-menu hidden">';
// foreach ($child4 as $p4) {
// $html .= '<li class=" ' . null . '"><a class="menu-link" href="' . url($p4->url) . '"> <span class="menu-text ">' . @$p4->title.'<span>';
// }
// $html .= '</ul>';
// } else {
// $html .= '</a>';
// }
// $html .= '</li>';
// }
// }
// $html .= '</ul>';
// } else {
// $html .= '</a>';
// }
// $html .= '</li>';
// }
// }
// $html .= '</ul>';
// } else {
// $html .= '</a>';
// }
// $html .= '</li>';
// }
}
return $html;
}

12
app/Http/Controllers/Opendata/DatasetController.php
View File

@ -106,17 +106,17 @@ class DatasetController extends Controller
$action = '';
if((permission('is_create', $this->route.'.*','module',false)) || (permission('is_update', $this->route.'.*','module',false))){
$action .= '<div class="flex gap-3 justify-center items-center flex-row">';
$action .= '<div class="flex flex-col gap-1 justify-center text-center items-center">';
if($row->created_by == auth()->user()->id){
$action .= '<a href="'.url('opendata/dataset/update/'.encode_id($row->DatasetId)).'" data-toggle="tooltip" title="Ubah Data" class="btn btn-sm btn-block bg-primary"><i class="ri-pencil-line text-white"></i></a>';
$action .= '<a href="'.url('opendata/dataset/update/'.encode_id($row->DatasetId)).'" title="Ubah Data" class="p-2 w-full rounded text-white bg-blue-600">Edit</a>';
}
$action .= '<a href="'.url('opendata/dataset/view/'.encode_id($row->DatasetId)).'" data-toggle="tooltip" title="Lihat Data" class="btn btn-sm btn-block bg-info"><i class="ri-eye-line text-white"></i></a>';
$action .= '<a href="'.url('opendata/dataset/view/'.encode_id($row->DatasetId)).'" title="Lihat Data" class="p-2 w-full rounded text-white bg-slate-600">Detail</a>';
if((session('group_id') == 1) || (session('group_alias') == 'admin')){
// $action .= '<a href="#" data-href="'.url('management/user/forcelogin/'.encode_id($row->id)).'" data-toggle="tooltip" title="Force Login" class="forcelogin btn btn-sm btn-block bg-success"><i class="ri-user-2-line text-white"></i></a>';
// $action .= '<a href="#" data-href="'.url('management/user/forcelogin/'.encode_id($row->id)).'" title="Force Login" class="forcelogin btn btn-sm btn-block bg-success"><i class="ri-user-2-line text-white"></i></a>';
if($row->status == 1){
$action .= '<a href="#" data-href="'.url('opendata/dataset/delete/'.encode_id($row->DatasetId)).'" data-toggle="tooltip" title="Hapus Data" class="remove_data btn btn-sm btn-block bg-danger"><i class="ri-delete-bin-line text-white"></i></a>';
$action .= '<a href="#" data-href="'.url('opendata/dataset/delete/'.encode_id($row->DatasetId)).'" title="Hapus Data" class="remove_data p-2 w-full rounded bg-red-600 text-white">Hapus</a>';
}else{
$action .= '<a href="#" data-href="'.url('opendata/dataset/aktif/'.encode_id($row->DatasetId)).'" data-toggle="tooltip" title="Aktifkan Data" class="aktif_data btn btn-sm btn-block bg-success"><i class="ri-check-line text-white"></i></a>';
$action .= '<a href="#" data-href="'.url('opendata/dataset/aktif/'.encode_id($row->DatasetId)).'" title="Aktifkan Data" class="aktif_data p-2 w-full rounded bg-emerald-600"><i data-lucide="check" class="text-white w-4 h-4 mr-2"></i></a>';
}
}
$action .= '</div>';

56
resources/views/layouts/master.blade.php
View File

@ -10,6 +10,10 @@
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>
<link rel="stylesheet" href="{{asset('assets/css/bootstrap-table.min.css')}}">
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/datatables/datatables.bundle.css')}}">
<link rel="stylesheet" href="{{asset('assets/css/sweetalert.min.css')}}">
<link rel="stylesheet" href="{{asset('assets/css/toast.min.css')}}">
<style>
body { font-family: 'Plus Jakarta Sans', sans-serif; }
@ -87,12 +91,14 @@
<nav class="flex-1 overflow-y-auto py-4 custom-scrollbar">
<div class="sidebar-section-label px-4 mb-2 text-[10px] font-bold text-slate-400 uppercase tracking-widest transition-all">Menu Utama</div>
<a href="{{ url('dashboard') }}" class="flex items-center px-6 py-3 transition-all group text-slate-500">
<i data-lucide="layout-dashboard" class="w-5 h-5 shrink-0"></i>
<span class="sidebar-text font-medium text-slate-500 text-sm ml-3">Dashboard</span>
</a>
{!! renderMenu() !!}
<a href="#" class="sidebar-item-active flex items-center px-6 py-3 transition-all group">
<i data-lucide="layout-dashboard" class="w-5 h-5 shrink-0"></i>
<span class="sidebar-text font-semibold text-sm ml-3">Dashboard</span>
</a>
{{--
<!-- Nested Menu: Manajemen Data -->
<div class="menu-dropdown">
@ -138,7 +144,7 @@
<a href="#" class="flex items-center px-6 py-3 text-slate-500 hover:text-blue-600 hover:bg-slate-50 transition-all group">
<i data-lucide="settings" class="w-5 h-5 shrink-0"></i>
<span class="sidebar-text font-semibold text-sm ml-3">Pengaturan</span>
</a>
</a> --}}
</nav>
<!-- Bottom Profile -->
@ -148,10 +154,10 @@
AD
</div>
<div class="sidebar-text ml-3 overflow-hidden">
<p class="text-sm font-bold text-slate-900 truncate">Admin DLH</p>
<p class="text-[10px] text-slate-500 truncate">admin@jakarta.go.id</p>
<p class="text-sm font-bold text-slate-900 truncate">{{ auth()->user()->name }}</p>
<p class="text-[10px] text-slate-500 truncate">{{ session('group_name') }}</p>
</div>
<a href="login.html" class="sidebar-text ml-auto text-slate-400 hover:text-red-500 transition-colors">
<a href="{{ url('logout') }}" class="sidebar-text ml-auto text-slate-400 hover:text-red-500 transition-colors">
<i data-lucide="log-out" class="w-4 h-4"></i>
</a>
</div>
@ -159,11 +165,43 @@
</aside>
<!-- Main Content Area -->
@yield('content')
<main class="flex-1 flex flex-col overflow-hidden">
<header class="h-20 bg-white border-b border-slate-200 flex items-center justify-between px-8 shrink-0">
<div class="flex items-center">
<button id="mobile-toggle" class="p-2 text-slate-600 md:hidden">
<i data-lucide="menu" class="w-6 h-6"></i>
</button>
<div class="hidden md:block">
<h2 class="text-xl font-bold text-slate-900">{{ @$title }}</h2>
{{-- <p class="text-xs text-slate-500">Ringkasan Sistem SLHD Provinsi DKI Jakarta</p> --}}
</div>
</div>
<div class="flex items-center space-x-4 hidden">
<div class="relative hidden sm:block">
<i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"></i>
<input type="text" placeholder="Cari fitur..." class="pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-blue-500 w-48 lg:w-64">
</div>
<button class="relative p-2 text-slate-400 hover:text-blue-600 transition-colors">
<i data-lucide="bell" class="w-5 h-5"></i>
<span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-white"></span>
</button>
<div class="h-8 w-px bg-slate-200 mx-2"></div>
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-bold hover:bg-blue-700 transition-all flex items-center shadow-lg shadow-blue-100">
<i data-lucide="plus" class="w-4 h-4 mr-2"></i> Tambah Data
</button>
</div>
</header>
@yield('content')
</main>
</div>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="{{asset('assets/js/bootstrap-table.min.js')}}"></script>
<script src="{{ asset('assets/js/sweetalert.min.js') }}"></script>
<script src="{{asset('assets/js/toast.min.js')}}"></script>
<script>
$(document).ready(function() {
lucide.createIcons();

508
resources/views/modules/dashboard/dashboard.blade.php
View File

@ -1,362 +1,166 @@
@extends('layouts.master')
@section('css')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
@endsection
@section('content')
<!-- Page Title Start -->
{{-- <div class="flex justify-between items-center mb-6"> --}}
{{-- <h4 class="text-slate-900 dark:text-slate-200 text-lg font-medium">Dashboard</h4> --}}
{{-- </div> --}}
<div class="flex-1 overflow-y-auto p-8 custom-scrollbar">
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<!-- Card 1 -->
<div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div class="flex justify-between items-start mb-4">
<div class="p-2 bg-blue-50 rounded-lg text-blue-600">
<i data-lucide="database" class="w-5 h-5"></i>
</div>
<span class="text-xs font-bold text-green-500 bg-green-50 px-2 py-1 rounded">+12%</span>
</div>
<p class="text-slate-500 text-[10px] font-bold uppercase tracking-wider">Total Dataset</p>
<h4 class="text-2xl font-black text-slate-900 mt-1">1,284</h4>
</div>
<!-- Card 2 -->
<div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div class="flex justify-between items-start mb-4">
<div class="p-2 bg-green-50 rounded-lg text-green-600">
<i data-lucide="download" class="w-5 h-5"></i>
</div>
<span class="text-xs font-bold text-green-500 bg-green-50 px-2 py-1 rounded">+5%</span>
</div>
<p class="text-slate-500 text-[10px] font-bold uppercase tracking-wider">Unduhan Data</p>
<h4 class="text-2xl font-black text-slate-900 mt-1">45.2K</h4>
</div>
<!-- Card 3 -->
<div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div class="flex justify-between items-start mb-4">
<div class="p-2 bg-orange-50 rounded-lg text-orange-600">
<i data-lucide="file-check" class="w-5 h-5"></i>
</div>
<span class="text-xs font-bold text-slate-400 bg-slate-50 px-2 py-1 rounded">Stabil</span>
</div>
<p class="text-slate-500 text-[10px] font-bold uppercase tracking-wider">Publikasi Aktif</p>
<h4 class="text-2xl font-black text-slate-900 mt-1">312</h4>
</div>
<!-- Card 4 -->
<div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div class="flex justify-between items-start mb-4">
<div class="p-2 bg-purple-50 rounded-lg text-purple-600">
<i data-lucide="eye" class="w-5 h-5"></i>
</div>
<span class="text-xs font-bold text-red-500 bg-red-50 px-2 py-1 rounded">-2%</span>
</div>
<p class="text-slate-500 text-[10px] font-bold uppercase tracking-wider">Kunjungan</p>
<h4 class="text-2xl font-black text-slate-900 mt-1">2,840</h4>
</div>
</div>
<div class="mb-3 hidden">
<div class="card">
<div class="card-header flex justify-between items-center">
<h4 class="bold">Profile Wilayah</h4>
<div>
<select name="" id="" class="form-input">
<option value="">Data Penduduk</option>
<option value="">Data Timbulan Sampah</option>
</select>
</div>
</div>
<div class="">
<div class="grid lg:grid-cols-2 grid-cols-1">
<div class="flex p-6">
<div class="rounded" id="map" style="width: 600px; height: 400px;"></div>
</div>
<div class="flex justify-center items-center p-6">
Data
</div>
</div>
</div>
</div>
</div>
<div class="flex hidden gap-3">
<div class="w-full">
<div class="card">
<div class="card-header flex justify-between items-center">
<h4 class="bold">
Persebaran Data -
@if(@request()->key)
{{ str_replace('_',' ',ucwords(@request()->key)) }}
@else
Tata Guna Lahan
@endif
</h4>
<!-- Datatable Section -->
<div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
<div class="p-6 border-b border-slate-100 flex flex-col md:flex-row md:items-center justify-between gap-4">
<div>
<select name="" id="" class="form-input kategori">
<option {{ @request()->key == '' ? 'selected' : '' }} {{ @request()->key == 'tata_guna_lahan' ? 'selected' : '' }} value="tata_guna_lahan">Tata Guna Lahan </option>
<option {{ @request()->key == 'kualitas_air' ? 'selected' : '' }} value="kualitas_air">Kualitas Air</option>
<option {{ @request()->key == 'kualitas_udara' ? 'selected' : '' }} value="kualitas_udara">Kualitas Udara</option>
<option {{ @request()->key == 'perkotaan' ? 'selected' : '' }} value="perkotaan">Perkotaan</option>
<option {{ @request()->key == 'kebencanaan' ? 'selected' : '' }} value="kebencanaan">Kebencanaan</option>
<option {{ @request()->key == 'tata_kelola' ? 'selected' : '' }} value="tata_kelola">Tata Kelola</option>
</select>
<h3 class="text-lg font-bold text-slate-900">Dataset Lingkungan Terbaru</h3>
<p class="text-xs text-slate-500 font-medium">Pengelolaan data masuk dari berbagai stasiun pemantauan.</p>
</div>
<div class="flex items-center space-x-2">
<button class="p-2 border border-slate-200 rounded-xl hover:bg-slate-50 transition-colors flex items-center text-sm font-semibold text-slate-600">
<i data-lucide="download-cloud" class="w-4 h-4 mr-2"></i> Ekspor
</button>
<button class="p-2 bg-slate-900 text-white rounded-xl hover:bg-slate-800 transition-colors flex items-center text-sm font-semibold">
<i data-lucide="filter" class="w-4 h-4 mr-2"></i> Filter
</button>
</div>
</div>
<div class="p-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
<div class="card">
<div class="card-header bg-primary-light text-primary bold">Driving Force</div>
<div class="p-6"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident tenetur repudiandae labore reprehenderit, ipsam consequatur odio molestiae quidem ratione atque dignissimos omnis nam voluptate iste at, cumque ipsum voluptas aperiam!</p></div>
</div>
<div class="card">
<div class="card-header bg-primary-light text-primary bold">Pressures</div>
<div class="p-6"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident tenetur repudiandae labore reprehenderit, ipsam consequatur odio molestiae quidem ratione atque dignissimos omnis nam voluptate iste at, cumque ipsum voluptas aperiam!</p></div>
</div>
<div class="card">
<div class="card-header bg-primary-light text-primary bold">State</div>
<div class="p-6"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident tenetur repudiandae labore reprehenderit, ipsam consequatur odio molestiae quidem ratione atque dignissimos omnis nam voluptate iste at, cumque ipsum voluptas aperiam!</p></div>
</div>
<div class="card">
<div class="card-header bg-primary-light text-primary bold">Impact</div>
<div class="p-6"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident tenetur repudiandae labore reprehenderit, ipsam consequatur odio molestiae quidem ratione atque dignissimos omnis nam voluptate iste at, cumque ipsum voluptas aperiam!</p></div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-1 gap-3 mt-3">
<div class="card">
<div class="card-header bg-primary-light text-primary bold">Response</div>
<div class="p-6"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident tenetur repudiandae labore reprehenderit, ipsam consequatur odio molestiae quidem ratione atque dignissimos omnis nam voluptate iste at, cumque ipsum voluptas aperiam!</p></div>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead class="bg-slate-50/50 border-b border-slate-100">
<tr>
<th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Judul Dataset</th>
<th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Kategori</th>
<th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Terakhir Update</th>
<th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Status</th>
<th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest text-right">Aksi</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
<tr class="hover:bg-slate-50 transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center">
<div class="w-8 h-8 rounded bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
<i data-lucide="file-spreadsheet" class="w-4 h-4"></i>
</div>
<div>
<p class="text-sm font-bold text-slate-900">Kualitas Air Sungai Jakarta 2024</p>
<p class="text-[10px] text-slate-400 font-medium">CSV, XLS • 12.5 MB</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="text-xs text-slate-600 font-semibold bg-slate-100 px-2 py-1 rounded">Air Limbah</span>
</td>
<td class="px-6 py-4 text-xs text-slate-500 font-medium">12 Feb 2026</td>
<td class="px-6 py-4">
<div class="flex items-center">
<span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
<span class="text-[10px] font-bold text-green-700 uppercase">Terverifikasi</span>
</div>
</td>
<td class="px-6 py-4 text-right">
<button class="text-slate-400 hover:text-blue-600 p-1 transition-colors"><i data-lucide="more-vertical" class="w-5 h-5"></i></button>
</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center">
<div class="w-8 h-8 rounded bg-orange-100 flex items-center justify-center text-orange-600 mr-3">
<i data-lucide="trash-2" class="w-4 h-4"></i>
</div>
<div>
<p class="text-sm font-bold text-slate-900">Volume Sampah Per Kecamatan</p>
<p class="text-[10px] text-slate-400 font-medium">PDF, XLS • 8.2 MB</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="text-xs text-slate-600 font-semibold bg-slate-100 px-2 py-1 rounded">Persampahan</span>
</td>
<td class="px-6 py-4 text-xs text-slate-500 font-medium">08 Feb 2026</td>
<td class="px-6 py-4">
<div class="flex items-center">
<span class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></span>
<span class="text-[10px] font-bold text-yellow-700 uppercase">Draft</span>
</div>
</td>
<td class="px-6 py-4 text-right">
<button class="text-slate-400 hover:text-blue-600 p-1 transition-colors"><i data-lucide="more-vertical" class="w-5 h-5"></i></button>
</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center">
<div class="w-8 h-8 rounded bg-purple-100 flex items-center justify-center text-purple-600 mr-3">
<i data-lucide="wind" class="w-4 h-4"></i>
</div>
<div>
<p class="text-sm font-bold text-slate-900">ISPU Real-time Station</p>
<p class="text-[10px] text-slate-400 font-medium">JSON API • Live Stream</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="text-xs text-slate-600 font-semibold bg-slate-100 px-2 py-1 rounded">Udara</span>
</td>
<td class="px-6 py-4 text-xs text-slate-500 font-medium">Hari ini</td>
<td class="px-6 py-4">
<div class="flex items-center">
<span class="w-2 h-2 bg-blue-500 rounded-full mr-2 animate-pulse"></span>
<span class="text-[10px] font-bold text-blue-700 uppercase">Otomatis</span>
</div>
</td>
<td class="px-6 py-4 text-right">
<button class="text-slate-400 hover:text-blue-600 p-1 transition-colors"><i data-lucide="more-vertical" class="w-5 h-5"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="grid xl:grid-cols-2 lg:grid-cols-2 grid-cols-1 gap-6 mb-6 hidden">
<div class="card">
<div class="p-6">
<div class="flex items-center justify-center">
<div class="w-full">
<h5 class="text-lg bold mb-10">Data Penduduk Berdasarkan Wilayah Tahun {{(date('Y')-1)}}</h5>
<p class="mb-10">Ini adalah data Data Penduduk Berdasarkan Wilayah Tahun {{(date('Y')-1)}}, berdasarkan data yang sudah di upload sebelumnya</p>
<div id="penduduk1"></div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="p-6">
<div class="flex items-center justify-center">
<div class="w-full">
<h5 class="text-lg bold mb-10">Data Penduduk Berdasarkan Wilayah Tahun {{date('Y')}}</h5>
<p class="mb-10">Ini adalah data Data Penduduk Berdasarkan Wilayah Tahun {{date('Y')}}, berdasarkan data yang sudah di upload sebelumnya</p>
<div id="penduduk2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="grid xl:grid-cols-2 lg:grid-cols-2 grid-cols-1 gap-6 mb-6 hidden">
<div class="card">
<div class="p-6">
<div class="flex items-center justify-center">
<div class="w-full">
<h5 class="text-lg bold mb-10">Data Jumlah Timbulan Sampah Tahun {{(date('Y')-1)}}</h5>
<p class="mb-10">Ini adalah data Data Jumlah Timbulan Sampah Tahun {{(date('Y')-1)}}, berdasarkan data yang sudah di upload sebelumnya</p>
<div id="timbulan1"></div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="p-6">
<div class="flex items-center justify-center">
<div class="w-full">
<h5 class="text-lg bold mb-10">Data Jumlah Timbulan Sampah Tahun {{date('Y')}}</h5>
<p class="mb-10">Ini adalah data Data Jumlah Timbulan Sampah Tahun {{date('Y')}}, berdasarkan data yang sudah di upload sebelumnya</p>
<div id="timbulan2"></div>
</div>
</div>
</div>
</div>
</div>
<!-- end row -->
@endsection
@section('js')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS popup.<br> Easily customizable.')
.openPopup();
</script>
<script src="{{asset('assets/libs/apexcharts/apexcharts.min.js')}}"></script>
<script>
$('.kategori').on('change',function(){
var val = $(this).val();
window.location = "{{ url('dashboard?key=') }}"+val;
});
var base_url = '{{ url("/") }}';
var tahun = '{{ date("Y")-1 }}';
fetch(base_url+'/getPenduduk/'+tahun)
.then(res => res.json())
.then(data => {
const series = data.series.map(Number);
var options = {
chart: {
type: 'pie',
height: 400
},
series: series,
labels: data.labels,
tooltip: {
custom: function({ series, seriesIndex, w }) {
// ambil nama kabupaten/kota langsung dari chart context
const kota = w.globals.labels[seriesIndex];
const value = series[seriesIndex].toLocaleString('id-ID');
// hitung persentase dari total
const total = series.reduce((a, b) => a + b, 0);
const persen = ((series[seriesIndex] / total) * 100).toFixed(1);
return `
<div style="padding:6px 10px; font-size:13px;">
Jumlah Penduduk <b>${kota}</b>: ${value} (${persen}%)
</div>
`;
}
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 400
},
legend: {
position: 'bottom'
}
}
}]
};
var chart = new ApexCharts(document.querySelector("#penduduk1"), options);
chart.render();
}).catch(error => console.error('Error:', error));
</script>
<script>
var base_url = '{{ url("/") }}';
var tahun = '{{ date("Y") }}';
fetch(base_url+'/getPenduduk/'+tahun)
.then(res => res.json())
.then(data => {
const series = data.series.map(Number);
var options = {
chart: {
type: 'pie',
height: 400
},
series: series,
labels: data.labels,
tooltip: {
custom: function({ series, seriesIndex, w }) {
// ambil nama kabupaten/kota langsung dari chart context
const kota = w.globals.labels[seriesIndex];
const value = series[seriesIndex].toLocaleString('id-ID');
// hitung persentase dari total
const total = series.reduce((a, b) => a + b, 0);
const persen = ((series[seriesIndex] / total) * 100).toFixed(1);
return `
<div style="padding:6px 10px; font-size:13px;">
Jumlah Penduduk <b>${kota}</b>: ${value} (${persen}%)
</div>
`;
}
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 400
},
legend: {
position: 'bottom'
}
}
}]
};
var chart = new ApexCharts(document.querySelector("#penduduk2"), options);
chart.render();
}).catch(error => console.error('Error:', error));
</script>
<script>
var base_url = '{{ url("/") }}';
var tahun = '{{ date("Y")-1 }}';
fetch(base_url+'/getTimbulan/'+tahun)
.then(res => res.json())
.then(data => {
const series = data.series.map(Number);
var options = {
chart: {
type: 'pie',
height: 400
},
series: series,
labels: data.labels,
tooltip: {
custom: function({ series, seriesIndex, w }) {
// ambil nama kabupaten/kota langsung dari chart context
const kota = w.globals.labels[seriesIndex];
const value = series[seriesIndex].toLocaleString('id-ID');
// hitung persentase dari total
const total = series.reduce((a, b) => a + b, 0);
const persen = ((series[seriesIndex] / total) * 100).toFixed(1);
return `
<div style="padding:6px 10px; font-size:13px;">
Jumlah Timbulan Kg Per Hari <b>${kota}</b>: ${value} (${persen}%)
</div>
`;
}
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 400
},
legend: {
position: 'bottom'
}
}
}]
};
var chart = new ApexCharts(document.querySelector("#timbulan1"), options);
chart.render();
}).catch(error => console.error('Error:', error));
</script>
<script>
var base_url = '{{ url("/") }}';
var tahun = '{{ date("Y") }}';
fetch(base_url+'/getTimbulan/'+tahun)
.then(res => res.json())
.then(data => {
const series = data.series.map(Number);
var options = {
chart: {
type: 'pie',
height: 400
},
series: series,
labels: data.labels,
tooltip: {
custom: function({ series, seriesIndex, w }) {
// ambil nama kabupaten/kota langsung dari chart context
const kota = w.globals.labels[seriesIndex];
const value = series[seriesIndex].toLocaleString('id-ID');
// hitung persentase dari total
const total = series.reduce((a, b) => a + b, 0);
const persen = ((series[seriesIndex] / total) * 100).toFixed(1);
return `
<div style="padding:6px 10px; font-size:13px;">
Jumlah Timbulan Kg Per Hari <b>${kota}</b>: ${value} (${persen}%)
</div>
`;
}
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: "100%"
},
legend: {
position: 'bottom'
}
}
}]
};
var chart = new ApexCharts(document.querySelector("#timbulan2"), options);
chart.render();
}).catch(error => console.error('Error:', error));
</script>
@endsection

362
resources/views/modules/dashboard/dashboardOld.blade.php 100644
View File

@ -0,0 +1,362 @@
@extends('layouts.master')
@section('css')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
@endsection
@section('content')
<!-- Page Title Start -->
{{-- <div class="flex justify-between items-center mb-6"> --}}
{{-- <h4 class="text-slate-900 dark:text-slate-200 text-lg font-medium">Dashboard</h4> --}}
{{-- </div> --}}
<div class="mb-3 hidden">
<div class="card">
<div class="card-header flex justify-between items-center">
<h4 class="bold">Profile Wilayah</h4>
<div>
<select name="" id="" class="form-input">
<option value="">Data Penduduk</option>
<option value="">Data Timbulan Sampah</option>
</select>
</div>
</div>
<div class="">
<div class="grid lg:grid-cols-2 grid-cols-1">
<div class="flex p-6">
<div class="rounded" id="map" style="width: 600px; height: 400px;"></div>
</div>
<div class="flex justify-center items-center p-6">
Data
</div>
</div>
</div>
</div>
</div>
<div class="flex hidden gap-3">
<div class="w-full">
<div class="card">
<div class="card-header flex justify-between items-center">
<h4 class="bold">
Persebaran Data -
@if(@request()->key)
{{ str_replace('_',' ',ucwords(@request()->key)) }}
@else
Tata Guna Lahan
@endif
</h4>
<div>
<select name="" id="" class="form-input kategori">
<option {{ @request()->key == '' ? 'selected' : '' }} {{ @request()->key == 'tata_guna_lahan' ? 'selected' : '' }} value="tata_guna_lahan">Tata Guna Lahan </option>
<option {{ @request()->key == 'kualitas_air' ? 'selected' : '' }} value="kualitas_air">Kualitas Air</option>
<option {{ @request()->key == 'kualitas_udara' ? 'selected' : '' }} value="kualitas_udara">Kualitas Udara</option>
<option {{ @request()->key == 'perkotaan' ? 'selected' : '' }} value="perkotaan">Perkotaan</option>
<option {{ @request()->key == 'kebencanaan' ? 'selected' : '' }} value="kebencanaan">Kebencanaan</option>
<option {{ @request()->key == 'tata_kelola' ? 'selected' : '' }} value="tata_kelola">Tata Kelola</option>
</select>
</div>
</div>
<div class="p-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
<div class="card">
<div class="card-header bg-primary-light text-primary bold">Driving Force</div>
<div class="p-6"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident tenetur repudiandae labore reprehenderit, ipsam consequatur odio molestiae quidem ratione atque dignissimos omnis nam voluptate iste at, cumque ipsum voluptas aperiam!</p></div>
</div>
<div class="card">
<div class="card-header bg-primary-light text-primary bold">Pressures</div>
<div class="p-6"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident tenetur repudiandae labore reprehenderit, ipsam consequatur odio molestiae quidem ratione atque dignissimos omnis nam voluptate iste at, cumque ipsum voluptas aperiam!</p></div>
</div>
<div class="card">
<div class="card-header bg-primary-light text-primary bold">State</div>
<div class="p-6"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident tenetur repudiandae labore reprehenderit, ipsam consequatur odio molestiae quidem ratione atque dignissimos omnis nam voluptate iste at, cumque ipsum voluptas aperiam!</p></div>
</div>
<div class="card">
<div class="card-header bg-primary-light text-primary bold">Impact</div>
<div class="p-6"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident tenetur repudiandae labore reprehenderit, ipsam consequatur odio molestiae quidem ratione atque dignissimos omnis nam voluptate iste at, cumque ipsum voluptas aperiam!</p></div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-1 gap-3 mt-3">
<div class="card">
<div class="card-header bg-primary-light text-primary bold">Response</div>
<div class="p-6"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident tenetur repudiandae labore reprehenderit, ipsam consequatur odio molestiae quidem ratione atque dignissimos omnis nam voluptate iste at, cumque ipsum voluptas aperiam!</p></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid xl:grid-cols-2 lg:grid-cols-2 grid-cols-1 gap-6 mb-6 hidden">
<div class="card">
<div class="p-6">
<div class="flex items-center justify-center">
<div class="w-full">
<h5 class="text-lg bold mb-10">Data Penduduk Berdasarkan Wilayah Tahun {{(date('Y')-1)}}</h5>
<p class="mb-10">Ini adalah data Data Penduduk Berdasarkan Wilayah Tahun {{(date('Y')-1)}}, berdasarkan data yang sudah di upload sebelumnya</p>
<div id="penduduk1"></div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="p-6">
<div class="flex items-center justify-center">
<div class="w-full">
<h5 class="text-lg bold mb-10">Data Penduduk Berdasarkan Wilayah Tahun {{date('Y')}}</h5>
<p class="mb-10">Ini adalah data Data Penduduk Berdasarkan Wilayah Tahun {{date('Y')}}, berdasarkan data yang sudah di upload sebelumnya</p>
<div id="penduduk2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="grid xl:grid-cols-2 lg:grid-cols-2 grid-cols-1 gap-6 mb-6 hidden">
<div class="card">
<div class="p-6">
<div class="flex items-center justify-center">
<div class="w-full">
<h5 class="text-lg bold mb-10">Data Jumlah Timbulan Sampah Tahun {{(date('Y')-1)}}</h5>
<p class="mb-10">Ini adalah data Data Jumlah Timbulan Sampah Tahun {{(date('Y')-1)}}, berdasarkan data yang sudah di upload sebelumnya</p>
<div id="timbulan1"></div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="p-6">
<div class="flex items-center justify-center">
<div class="w-full">
<h5 class="text-lg bold mb-10">Data Jumlah Timbulan Sampah Tahun {{date('Y')}}</h5>
<p class="mb-10">Ini adalah data Data Jumlah Timbulan Sampah Tahun {{date('Y')}}, berdasarkan data yang sudah di upload sebelumnya</p>
<div id="timbulan2"></div>
</div>
</div>
</div>
</div>
</div>
<!-- end row -->
@endsection
@section('js')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS popup.<br> Easily customizable.')
.openPopup();
</script>
<script src="{{asset('assets/libs/apexcharts/apexcharts.min.js')}}"></script>
<script>
$('.kategori').on('change',function(){
var val = $(this).val();
window.location = "{{ url('dashboard?key=') }}"+val;
});
var base_url = '{{ url("/") }}';
var tahun = '{{ date("Y")-1 }}';
fetch(base_url+'/getPenduduk/'+tahun)
.then(res => res.json())
.then(data => {
const series = data.series.map(Number);
var options = {
chart: {
type: 'pie',
height: 400
},
series: series,
labels: data.labels,
tooltip: {
custom: function({ series, seriesIndex, w }) {
// ambil nama kabupaten/kota langsung dari chart context
const kota = w.globals.labels[seriesIndex];
const value = series[seriesIndex].toLocaleString('id-ID');
// hitung persentase dari total
const total = series.reduce((a, b) => a + b, 0);
const persen = ((series[seriesIndex] / total) * 100).toFixed(1);
return `
<div style="padding:6px 10px; font-size:13px;">
Jumlah Penduduk <b>${kota}</b>: ${value} (${persen}%)
</div>
`;
}
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 400
},
legend: {
position: 'bottom'
}
}
}]
};
var chart = new ApexCharts(document.querySelector("#penduduk1"), options);
chart.render();
}).catch(error => console.error('Error:', error));
</script>
<script>
var base_url = '{{ url("/") }}';
var tahun = '{{ date("Y") }}';
fetch(base_url+'/getPenduduk/'+tahun)
.then(res => res.json())
.then(data => {
const series = data.series.map(Number);
var options = {
chart: {
type: 'pie',
height: 400
},
series: series,
labels: data.labels,
tooltip: {
custom: function({ series, seriesIndex, w }) {
// ambil nama kabupaten/kota langsung dari chart context
const kota = w.globals.labels[seriesIndex];
const value = series[seriesIndex].toLocaleString('id-ID');
// hitung persentase dari total
const total = series.reduce((a, b) => a + b, 0);
const persen = ((series[seriesIndex] / total) * 100).toFixed(1);
return `
<div style="padding:6px 10px; font-size:13px;">
Jumlah Penduduk <b>${kota}</b>: ${value} (${persen}%)
</div>
`;
}
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 400
},
legend: {
position: 'bottom'
}
}
}]
};
var chart = new ApexCharts(document.querySelector("#penduduk2"), options);
chart.render();
}).catch(error => console.error('Error:', error));
</script>
<script>
var base_url = '{{ url("/") }}';
var tahun = '{{ date("Y")-1 }}';
fetch(base_url+'/getTimbulan/'+tahun)
.then(res => res.json())
.then(data => {
const series = data.series.map(Number);
var options = {
chart: {
type: 'pie',
height: 400
},
series: series,
labels: data.labels,
tooltip: {
custom: function({ series, seriesIndex, w }) {
// ambil nama kabupaten/kota langsung dari chart context
const kota = w.globals.labels[seriesIndex];
const value = series[seriesIndex].toLocaleString('id-ID');
// hitung persentase dari total
const total = series.reduce((a, b) => a + b, 0);
const persen = ((series[seriesIndex] / total) * 100).toFixed(1);
return `
<div style="padding:6px 10px; font-size:13px;">
Jumlah Timbulan Kg Per Hari <b>${kota}</b>: ${value} (${persen}%)
</div>
`;
}
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 400
},
legend: {
position: 'bottom'
}
}
}]
};
var chart = new ApexCharts(document.querySelector("#timbulan1"), options);
chart.render();
}).catch(error => console.error('Error:', error));
</script>
<script>
var base_url = '{{ url("/") }}';
var tahun = '{{ date("Y") }}';
fetch(base_url+'/getTimbulan/'+tahun)
.then(res => res.json())
.then(data => {
const series = data.series.map(Number);
var options = {
chart: {
type: 'pie',
height: 400
},
series: series,
labels: data.labels,
tooltip: {
custom: function({ series, seriesIndex, w }) {
// ambil nama kabupaten/kota langsung dari chart context
const kota = w.globals.labels[seriesIndex];
const value = series[seriesIndex].toLocaleString('id-ID');
// hitung persentase dari total
const total = series.reduce((a, b) => a + b, 0);
const persen = ((series[seriesIndex] / total) * 100).toFixed(1);
return `
<div style="padding:6px 10px; font-size:13px;">
Jumlah Timbulan Kg Per Hari <b>${kota}</b>: ${value} (${persen}%)
</div>
`;
}
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: "100%"
},
legend: {
position: 'bottom'
}
}
}]
};
var chart = new ApexCharts(document.querySelector("#timbulan2"), options);
chart.render();
}).catch(error => console.error('Error:', error));
</script>
@endsection

86
resources/views/modules/opendata/dataset/index.blade.php
View File

@ -3,47 +3,55 @@
@section('css')
@endsection
@section('content')
<div class="flex flex-col gap-6">
<div class="card">
<div class="card-header">
<div class="flex justify-between items-center">
<h4 class="card-title">Data {{$title}}</h4>
<div class="flex-1 overflow-y-auto p-8 custom-scrollbar">
<div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
<div class="p-6 border-b border-slate-100 flex flex-col md:flex-row md:items-center justify-between gap-4">
<div>
<h3 class="text-lg font-bold text-slate-900">{{$title}}</h3>
{{-- <p class="text-xs text-slate-500 font-medium">Pengelolaan data masuk dari berbagai stasiun pemantauan.</p> --}}
</div>
<div class="flex items-center space-x-2">
@if(permission('is_create', $route.'.*','module',false) || permission('is_update', $route.'.*','module',false))
<a href="{{route($route.'.update')}}" class="p-2 border border-slate-200 rounded-xl hover:bg-slate-50 transition-colors flex items-center text-sm font-semibold text-slate-600">
<i data-lucide="plus" class="w-4 h-4 mr-2"></i> Tambah Data
</a>
@endif
<button class="hidden p-2 bg-slate-900 text-white rounded-xl hover:bg-slate-800 transition-colors flex items-center text-sm font-semibold">
<i data-lucide="filter" class="w-4 h-4 mr-2"></i> Filter
</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse"
data-search="false"
data-toggle="table"
data-pagination="false"
data-toolbar="#toolbar"
data-show-refresh="false"
data-url="{{route($route.'.grid')}}"
data-sort-name="ids"
data-sort-order="desc"
data-page-size="10"
data-id-field="id"
id="grid-data">
<thead class="bg-slate-50/50 border-b border-slate-100">
<tr class="">
<th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest" data-width="10" data-field="action">#</th>
<th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest" data-width="10" data-field="no">No</th>
<th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest" data-field="instansi">Nama Instansi</th>
<th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest" data-field="name">Nama Dataset</th>
<th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest" data-field="template">Resource Data</th>
<th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest" data-field="tahun">Tahun</th>
<th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest" data-field="status">Status</th>
<th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest" data-field="created_at">Tanggal Dibuat</th>
</tr>
</thead>
<tbody class=""></tbody>
</table>
</div>
</div>
<div class="p-6">
<div id="toolbar">
@if(permission('is_create', $route.'.*','module',false) || permission('is_update', $route.'.*','module',false))
<a href="{{route($route.'.update')}}" class="btn bg-success text-white"><i class="ri-add-line"></i>&nbsp;Tambah Data</a>
@endif
</div>
<table class="gridjs-table"
data-search="true"
data-toggle="table"
data-pagination="true"
data-toolbar="#toolbar"
data-show-refresh="false"
data-url="{{route($route.'.grid')}}"
data-sort-name="ids"
data-sort-order="desc"
data-page-size="10"
data-id-field="id"
id="grid-data">
<thead class="gridjs-thead">
<tr class="gridjs-tr bg-primary-light">
<th class="gridjs-td gridjs-th text-sm text-gray-500" data-width="10" data-field="action">#</th>
<th class="gridjs-td gridjs-th text-sm text-gray-500" data-width="10" data-field="no">No</th>
<th class="gridjs-td gridjs-th text-sm text-gray-500" data-field="instansi">Nama Instansi</th>
<th class="gridjs-td gridjs-th text-sm text-gray-500" data-field="name">Nama Dataset</th>
<th class="gridjs-td gridjs-th text-sm text-gray-500" data-field="template">Resource Data</th>
<th class="gridjs-td gridjs-th text-sm text-gray-500" data-field="tahun">Tahun</th>
<th class="gridjs-td gridjs-th text-sm text-center text-gray-500" data-field="status">Status</th>
<th class="gridjs-td gridjs-th text-sm text-gray-500" data-field="created_at">Tanggal Dibuat</th>
</tr>
</thead>
<tbody class="gridjs-tbody"></tbody>
</table>
</div>
</div>
</div>
@endsection