From 2558f6cbb6df1680edfcaaaef36e51184c39c8bc Mon Sep 17 00:00:00 2001
From: Ilham Wara Nugroho <ilhamwara@gmail.com>
Date: Tue, 17 Feb 2026 12:32:19 +0700
Subject: [PATCH] update

---
 app/Helpers/custom.php                        | 144 +++--
 .../Opendata/DatasetController.php            |  12 +-
 resources/views/layouts/master.blade.php      |  56 +-
 .../modules/dashboard/dashboard.blade.php     | 508 ++++++------------
 .../modules/dashboard/dashboardOld.blade.php  | 362 +++++++++++++
 .../modules/opendata/dataset/index.blade.php  |  86 +--
 6 files changed, 703 insertions(+), 465 deletions(-)
 create mode 100644 resources/views/modules/dashboard/dashboardOld.blade.php

diff --git a/app/Helpers/custom.php b/app/Helpers/custom.php
index ce124e7..bf94088 100644
--- a/app/Helpers/custom.php
+++ b/app/Helpers/custom.php
@@ -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;
     }
diff --git a/app/Http/Controllers/Opendata/DatasetController.php b/app/Http/Controllers/Opendata/DatasetController.php
index 8fd3720..2560dd8 100644
--- a/app/Http/Controllers/Opendata/DatasetController.php
+++ b/app/Http/Controllers/Opendata/DatasetController.php
@@ -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>';
diff --git a/resources/views/layouts/master.blade.php b/resources/views/layouts/master.blade.php
index 65ae1f1..5ed7258 100644
--- a/resources/views/layouts/master.blade.php
+++ b/resources/views/layouts/master.blade.php
@@ -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();
diff --git a/resources/views/modules/dashboard/dashboard.blade.php b/resources/views/modules/dashboard/dashboard.blade.php
index 2a10b31..1822255 100644
--- a/resources/views/modules/dashboard/dashboard.blade.php
+++ b/resources/views/modules/dashboard/dashboard.blade.php
@@ -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
\ No newline at end of file
diff --git a/resources/views/modules/dashboard/dashboardOld.blade.php b/resources/views/modules/dashboard/dashboardOld.blade.php
new file mode 100644
index 0000000..2a10b31
--- /dev/null
+++ b/resources/views/modules/dashboard/dashboardOld.blade.php
@@ -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
\ No newline at end of file
diff --git a/resources/views/modules/opendata/dataset/index.blade.php b/resources/views/modules/opendata/dataset/index.blade.php
index 9885410..59fd8ce 100644
--- a/resources/views/modules/opendata/dataset/index.blade.php
+++ b/resources/views/modules/opendata/dataset/index.blade.php
@@ -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