diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 5a305c3..6d53896 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -3,7 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login Portal - SLHD Provinsi DKI Jakarta</title>
+    <title>SLHD | Dinas Lingkungan Hidup</title>
+    <link rel="apple-touch-icon" sizes="180x180" href="{{asset('assets/logo-dinas.ico')}}">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{asset('assets/logo-dinas.ico')}}">
+    <!-- Tailwind CSS CDN -->
     <!-- Tailwind CSS CDN -->
     <script src="https://cdn.tailwindcss.com"></script>
     <!-- Google Fonts -->
@@ -76,7 +79,7 @@
                     <label for="username" class="text-sm font-bold text-slate-700 ml-1">Nama Pengguna / Email</label>
                     <div class="relative">
                         <i data-lucide="user" class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400"></i>
-                        <input type="text" id="username" name="username" placeholder="contoh: admin_dlh" 
+                        <input type="text" id="username" name="email" placeholder="contoh: admin_dlh" 
                                class="w-full pl-12 pr-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all font-medium">
                     </div>
                 </div>
@@ -98,7 +101,7 @@
                 </div>
 
                 <!-- Submit Button -->
-                <button type="submit" class="w-full bg-blue-600 text-white py-4 rounded-2xl font-bold text-lg hover:bg-blue-700 transform hover:-translate-y-0.5 transition-all shadow-xl shadow-blue-200 flex items-center justify-center group">
+                <button class="btnlogin w-full bg-blue-600 text-white py-4 rounded-2xl font-bold text-lg hover:bg-blue-700 transform hover:-translate-y-0.5 transition-all shadow-xl shadow-blue-200 flex items-center justify-center group">
                     Masuk Sekarang
                     <i data-lucide="arrow-right" class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform"></i>
                 </button>
@@ -120,20 +123,14 @@
             lucide.createIcons();
 
             // Simple Form Handling
-            $('#login-form').on('submit', function(e) {
-                e.preventDefault();
-                const btn = $(this).find('button[type="submit"]');
+            $('.btnlogin').on('click', function(e) {
+                // e.preventDefault();
+                const btn = $(this);
                 const originalText = btn.html();
                 
                 // Show loading state
-                btn.prop('disabled', true).addClass('opacity-70').html('<i data-lucide="refresh-cw" class="w-5 h-5 animate-spin"></i>');
+                btn.addClass('opacity-70').html('<i data-lucide="refresh-cw" class="w-5 h-5 animate-spin"></i>');
                 lucide.createIcons();
-
-                // Mock API delay
-                setTimeout(() => {
-                    alert('Sistem simulasi: Login berhasil! Mengarahkan ke dasbor...');
-                    window.location.href = '{{ url("/") }}';
-                }, 1500);
             });
         });
     </script>
diff --git a/resources/views/layouts/appNew.blade.php b/resources/views/layouts/appNew.blade.php
index 282c6d2..fcc5653 100644
--- a/resources/views/layouts/appNew.blade.php
+++ b/resources/views/layouts/appNew.blade.php
@@ -52,14 +52,14 @@
 
             <!-- Desktop Menu -->
             <div class="hidden md:flex items-center space-x-8">
-                <a href="#" class="font-medium text-slate-700 hover:text-blue-600 transition-colors">Beranda</a>
+                <a href="{{ url('/') }}" class="font-medium text-slate-700 hover:text-blue-600 transition-colors">Beranda</a>
                 <a href="{{ url('dataset') }}" class="font-medium text-slate-700 hover:text-blue-600 transition-colors">Dataset</a>
                 <a href="{{ url('dataset-tambahan') }}" class="font-medium text-slate-700 hover:text-blue-600 transition-colors">Dataset Tambahan</a>
                 {{-- <a href="#" class="font-medium text-slate-700 hover:text-blue-600 transition-colors">Informasi</a> --}}
-                <button class="flex items-center space-x-2 bg-blue-600 text-white px-5 py-2 rounded-xl font-semibold hover:bg-blue-700 transition-all shadow-lg shadow-blue-200">
+                <a href="{{ url('login') }}" class="flex items-center space-x-2 bg-blue-600 text-white px-5 py-2 rounded-xl font-semibold hover:bg-blue-700 transition-all shadow-lg shadow-blue-200">
                     <span>Login</span>
                     <i data-lucide="log_in" class="w-5 h-5"></i>
-                </button>
+                </a>
             </div>
 
             <!-- Mobile Toggle -->
@@ -72,10 +72,10 @@
 
         <!-- Mobile Menu -->
         <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-slate-100 p-4 space-y-4 shadow-xl">
-            <a href="#" class="block font-medium py-2">Beranda</a>
-            <a href="#data-panel" class="block font-medium py-2">Data Panel</a>
-            <a href="#publikasi" class="block font-medium py-2">Publikasi</a>
-            <button class="w-full bg-blue-600 text-white px-5 py-3 rounded-xl font-bold">Login Portal</button>
+            <a href="{{ url('/') }} class="block font-medium py-2">Beranda</a>
+            <a href="{{ url('dataset') }}" class="block font-medium py-2">Dataset</a>
+            <a href="{{ url('dataset-tambahan') }}" class="block font-medium py-2">Dataset Tambahan</a>
+            <a href="{{ url('/login') }}" class="w-full bg-blue-600 text-white px-5 py-3 rounded-xl font-bold">Login</a>
         </div>
     </nav>
 
diff --git a/resources/views/layouts/master.blade.php b/resources/views/layouts/master.blade.php
index bc3c6c5..65ae1f1 100644
--- a/resources/views/layouts/master.blade.php
+++ b/resources/views/layouts/master.blade.php
@@ -1,133 +1,219 @@
 <!DOCTYPE html>
-<html lang="en" >
-
+<html lang="id">
 <head>
-    <meta charset="utf-8">
-    <title>{{@$title}} | SLHD</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <link rel="apple-touch-icon" sizes="180x180" href="{{asset('assets/logo-dinas.ico')}}">
-    <link rel="icon" type="image/png" sizes="32x32" href="{{asset('assets/logo-dinas.ico')}}">
-    <link rel="mask-icon" href="{{asset('assets/logo-dinas.ico')}}" color="#5bbad5">
-    
-    <link href="{{asset('assets/libs/jsvectormap/css/jsvectormap.min.css')}}" rel="stylesheet" type="text/css">
-    <link href="{{asset('assets/css/app.min.css')}}" rel="stylesheet" type="text/css">
-    <link href="{{asset('assets/css/icons.min.css')}}" rel="stylesheet" type="text/css">
-    <link rel="stylesheet" href="{{asset('assets/css/bootstrap-table.min.css')}}">
-    <link rel="stylesheet" href="{{asset('assets/css/sweetalert.min.css')}}">
-    <link rel="stylesheet" href="{{asset('assets/css/toast.min.css')}}">
-    <link rel="stylesheet" href="{{asset('assets/css/select2/select2.bundle.css')}}">
-    <link rel="stylesheet" href="{{asset('assets/css/custom.css')}}">
-    <link rel="stylesheet" media="screen, print" href="{{asset('assets/css/datatables/datatables.bundle.css')}}">
-    <script src="{{asset('assets/js/config.js')}}"></script>
+    <title>Admin Panel - SLHD Provinsi DKI Jakarta</title>
+    <!-- Tailwind CSS CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Google Fonts -->
+    <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>
     <style>
-        .menu-text{
-            font-size:13px!important;
+        body { font-family: 'Plus Jakarta Sans', sans-serif; }
+        
+        /* Sidebar Transitions */
+        #sidebar {
+            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        
+        #sidebar.collapsed {
+            width: 80px;
+        }
+
+        #sidebar.collapsed .sidebar-text, 
+        #sidebar.collapsed .sidebar-header-text,
+        #sidebar.collapsed .sidebar-dropdown-icon {
+            display: none;
+        }
+
+        #sidebar.collapsed .sidebar-section-label {
+            text-align: center;
+            font-size: 8px;
+            padding-left: 0;
+            padding-right: 0;
+        }
+
+        .sidebar-item-active {
+            background: rgba(59, 130, 246, 0.1);
+            color: #2563eb;
+            border-right: 4px solid #2563eb;
+        }
+
+        /* Nested Menu Style */
+        .submenu {
+            display: none;
+            background: #f8fafc;
+        }
+        
+        #sidebar.collapsed .submenu {
+            display: none !important;
+        }
+
+        .custom-scrollbar::-webkit-scrollbar {
+            width: 4px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+            background: #e2e8f0;
+            border-radius: 10px;
         }
     </style>
-    @yield('css')
 </head>
+<body class="bg-slate-50 text-slate-900 overflow-hidden">
 
-<body>
+    <div class="flex h-screen overflow-hidden">
+        
+        <!-- Sidebar -->
+        <aside id="sidebar" class="w-64 bg-white border-r border-slate-200 flex flex-col hidden md:flex z-30">
+            <!-- Logo & Toggle Container -->
+            <div class="p-6 border-b border-slate-50 flex items-center justify-between">
+                <div class="flex items-center space-x-3 overflow-hidden">
+                    <div class="bg-blue-600 p-2 rounded-lg text-white shrink-0">
+                        <i data-lucide="layers" class="w-5 h-5"></i>
+                    </div>
+                    <div class="sidebar-header-text">
+                        <h1 class="font-bold text-lg tracking-tight text-blue-900 leading-none">SLHD</h1>
+                        <p class="text-[9px] uppercase tracking-widest text-blue-600 font-bold">Admin Panel</p>
+                    </div>
+                </div>
+                <!-- Desktop Toggle Button -->
+                <button id="toggle-sidebar" class="text-slate-400 hover:text-blue-600 transition-colors">
+                    <i data-lucide="chevron-left" id="toggle-icon" class="w-5 h-5"></i>
+                </button>
+            </div>
 
-    <div class="flex wrapper">
+            <!-- Navigation -->
+            <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>
 
-        @include('include.sidebar')
+                {!! 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>
 
-        <!-- ============================================================== -->
-        <!-- Start Page Content here -->
-        <!-- ============================================================== -->
-
-        <div class="page-content">
-
-            <!-- Topbar Start -->
-            @include('include.header')
-            <!-- Topbar End -->
-
-            <main class="p-6">
-                @if(@$breadcrumbs)
-                <div class="flex justify-between items-center mb-6">
-                    <h4 class="text-slate-900 dark:text-slate-200 text-lg font-medium">{{$title}}</h4>
-
-                    <div class="md:flex hidden items-center gap-2.5 font-semibold">
-                        @foreach($breadcrumbs as $k => $dataBread)
-                        <div class="flex items-center gap-2">
-                            @if($k != 0)
-                            <i class="ri-arrow-right-s-line text-base text-slate-400 rtl:rotate-180"></i>
-                            @endif
-                            <a href="#" class="text-sm font-medium text-slate-700 dark:text-slate-400">{{$dataBread['name']}}</a>
+                <!-- Nested Menu: Manajemen Data -->
+                <div class="menu-dropdown">
+                    <button class="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="database" class="w-5 h-5 shrink-0"></i>
+                            <span class="sidebar-text font-semibold text-sm ml-3">Manajemen Data</span>
                         </div>
-                        @endforeach
+                        <i data-lucide="chevron-down" class="sidebar-dropdown-icon w-4 h-4 transition-transform duration-200"></i>
+                    </button>
+                    <div class="submenu">
+                        <a href="#" class="flex items-center pl-14 pr-6 py-2.5 text-xs font-medium text-slate-500 hover:text-blue-600 transition-colors">Data Air</a>
+                        <a href="#" class="flex items-center pl-14 pr-6 py-2.5 text-xs font-medium text-slate-500 hover:text-blue-600 transition-colors">Data Udara</a>
+                        <a href="#" class="flex items-center pl-14 pr-6 py-2.5 text-xs font-medium text-slate-500 hover:text-blue-600 transition-colors">Data Sampah</a>
                     </div>
                 </div>
-                @endif
 
-                @yield('content')
-
-            </main>
-
-            <!-- Footer Start -->
-            <footer class="footer h-16 flex items-center px-6 bg-white shadow dark:bg-gray-800 mt-auto">
-                <div class="flex md:justify-between justify-center w-full gap-4">
-                    <div>
-                        <script>document.write(new Date().getFullYear())</script> © Dinas Lingkungan Hidup Provinsi DKI Jakarta</a>
+                <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="file-text" class="w-5 h-5 shrink-0"></i>
+                    <span class="sidebar-text font-semibold text-sm ml-3">Laporan Publikasi</span>
+                </a>
+                
+                <div class="menu-dropdown">
+                    <button class="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="bar-chart-3" class="w-5 h-5 shrink-0"></i>
+                            <span class="sidebar-text font-semibold text-sm ml-3">Visualisasi</span>
+                        </div>
+                        <i data-lucide="chevron-down" class="sidebar-dropdown-icon w-4 h-4"></i>
+                    </button>
+                    <div class="submenu">
+                        <a href="#" class="flex items-center pl-14 pr-6 py-2.5 text-xs font-medium text-slate-500 hover:text-blue-600 transition-colors">Peta Interaktif</a>
+                        <a href="#" class="flex items-center pl-14 pr-6 py-2.5 text-xs font-medium text-slate-500 hover:text-blue-600 transition-colors">Grafik Tahunan</a>
                     </div>
                 </div>
-            </footer>
-            <!-- Footer End -->
 
-        </div>
+                <div class="sidebar-section-label px-4 mt-8 mb-2 text-[10px] font-bold text-slate-400 uppercase tracking-widest transition-all">Sistem</div>
+                
+                <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="users" class="w-5 h-5 shrink-0"></i>
+                    <span class="sidebar-text font-semibold text-sm ml-3">Manajemen User</span>
+                </a>
+                <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>
+            </nav>
 
-        <!-- ============================================================== -->
-        <!-- End Page content -->
-        <!-- ============================================================== -->
+            <!-- Bottom Profile -->
+            <div class="p-4 border-t border-slate-100">
+                <div class="flex items-center p-3 bg-slate-50 rounded-xl overflow-hidden">
+                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold border border-blue-200 shrink-0">
+                        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>
+                    </div>
+                    <a href="login.html" 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>
+            </div>
+        </aside>
 
+        <!-- Main Content Area -->
+        @yield('content')
     </div>
 
-    <!-- Plugin Js -->
-    <script src="{{asset('assets/libs/simplebar/simplebar.min.js')}}"></script>
-    <script src="{{asset('assets/libs/lucide/umd/lucide.min.js')}}"></script>
-    <script src="{{asset('assets/libs/@frostui/tailwindcss/frostui.js')}}"></script>
-
-    <!-- App Js -->
-    <script src="{{asset('assets/js/jquery.min.js')}}"></script>
-    <script src="{{asset('assets/js/app.js')}}"></script>
-
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.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 src="{{asset('assets/js/select2/select2.bundle.js')}}"></script>
-    <script type="text/javascript" src="{{asset('assets/js/datatables/datatables.bundle.js')}}"></script>
+    <!-- jQuery CDN -->
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
     <script>
-            $(document).ready(function() {
-                $('.select2').select2();
-                $('.numberInput').on('input', function() {
-                    this.value = this.value.replace(/[^0-9]/g, ''); // Hanya angka 0-9
-                });
+        $(document).ready(function() {
+            lucide.createIcons();
+
+            // 1. Sidebar Collapse Logic
+            $('#toggle-sidebar').click(function() {
+                const sidebar = $('#sidebar');
+                const icon = $('#toggle-icon');
+                
+                sidebar.toggleClass('collapsed');
+                
+                // Change icon direction
+                if (sidebar.hasClass('collapsed')) {
+                    icon.attr('data-lucide', 'chevron-right');
+                } else {
+                    icon.attr('data-lucide', 'chevron-left');
+                }
+                
+                // Re-init icons to apply changes
+                lucide.createIcons();
             });
 
-            @if (Session::get('type')=='error')
-                  toastr.error("{{ Session::get('message') }}", 'Error!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
-              @endif
-              @if (Session::get('type')=='success')
-                  toastr.success("{{ Session::get('message') }}", 'Berhasil!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
-              @endif
-              @if (Session::get('type')=='warning')
-                  toastr.warning("{{ Session::get('message') }}", 'Whoopss!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
-              @endif
-              @if (Session::get('type')=='info')
-                  toastr.info("{{ Session::get('message') }}", 'Info!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
-              @endif
+            // 2. Nested Menu / Dropdown Logic
+            $('.dropdown-trigger').click(function() {
+                // If sidebar is collapsed, don't allow open dropdown (or expand it first)
+                if($('#sidebar').hasClass('collapsed')) {
+                    $('#sidebar').removeClass('collapsed');
+                    $('#toggle-icon').attr('data-lucide', 'chevron-left');
+                    lucide.createIcons();
+                }
+
+                const submenu = $(this).next('.submenu');
+                const icon = $(this).find('.sidebar-dropdown-icon');
+                
+                // Toggle Submenu
+                submenu.slideToggle(300);
+                
+                // Rotate Icon
+                icon.toggleClass('rotate-180');
+                
+                // Optional: Close other open dropdowns
+                $('.submenu').not(submenu).slideUp(300);
+                $('.sidebar-dropdown-icon').not(icon).removeClass('rotate-180');
+            });
+
+            // Mobile Menu Toggle
+            $('#mobile-toggle').click(function() {
+                $('#sidebar').toggleClass('hidden').toggleClass('fixed inset-0 w-full');
+            });
+        });
     </script>
-
-    <!-- Dashboard App js -->
-    @yield('js')
-    <script>
-    $('#button-toggle-menu').on('click',function(){
-        $('.text-menu').toggle();
-    });
- </script>
 </body>
-
 </html>
\ No newline at end of file
diff --git a/resources/views/layouts/masterOld.blade.php b/resources/views/layouts/masterOld.blade.php
new file mode 100644
index 0000000..bc3c6c5
--- /dev/null
+++ b/resources/views/layouts/masterOld.blade.php
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="en" >
+
+<head>
+    <meta charset="utf-8">
+    <title>{{@$title}} | SLHD</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="apple-touch-icon" sizes="180x180" href="{{asset('assets/logo-dinas.ico')}}">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{asset('assets/logo-dinas.ico')}}">
+    <link rel="mask-icon" href="{{asset('assets/logo-dinas.ico')}}" color="#5bbad5">
+    
+    <link href="{{asset('assets/libs/jsvectormap/css/jsvectormap.min.css')}}" rel="stylesheet" type="text/css">
+    <link href="{{asset('assets/css/app.min.css')}}" rel="stylesheet" type="text/css">
+    <link href="{{asset('assets/css/icons.min.css')}}" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="{{asset('assets/css/bootstrap-table.min.css')}}">
+    <link rel="stylesheet" href="{{asset('assets/css/sweetalert.min.css')}}">
+    <link rel="stylesheet" href="{{asset('assets/css/toast.min.css')}}">
+    <link rel="stylesheet" href="{{asset('assets/css/select2/select2.bundle.css')}}">
+    <link rel="stylesheet" href="{{asset('assets/css/custom.css')}}">
+    <link rel="stylesheet" media="screen, print" href="{{asset('assets/css/datatables/datatables.bundle.css')}}">
+    <script src="{{asset('assets/js/config.js')}}"></script>
+    <style>
+        .menu-text{
+            font-size:13px!important;
+        }
+    </style>
+    @yield('css')
+</head>
+
+<body>
+
+    <div class="flex wrapper">
+
+        @include('include.sidebar')
+
+        <!-- ============================================================== -->
+        <!-- Start Page Content here -->
+        <!-- ============================================================== -->
+
+        <div class="page-content">
+
+            <!-- Topbar Start -->
+            @include('include.header')
+            <!-- Topbar End -->
+
+            <main class="p-6">
+                @if(@$breadcrumbs)
+                <div class="flex justify-between items-center mb-6">
+                    <h4 class="text-slate-900 dark:text-slate-200 text-lg font-medium">{{$title}}</h4>
+
+                    <div class="md:flex hidden items-center gap-2.5 font-semibold">
+                        @foreach($breadcrumbs as $k => $dataBread)
+                        <div class="flex items-center gap-2">
+                            @if($k != 0)
+                            <i class="ri-arrow-right-s-line text-base text-slate-400 rtl:rotate-180"></i>
+                            @endif
+                            <a href="#" class="text-sm font-medium text-slate-700 dark:text-slate-400">{{$dataBread['name']}}</a>
+                        </div>
+                        @endforeach
+                    </div>
+                </div>
+                @endif
+
+                @yield('content')
+
+            </main>
+
+            <!-- Footer Start -->
+            <footer class="footer h-16 flex items-center px-6 bg-white shadow dark:bg-gray-800 mt-auto">
+                <div class="flex md:justify-between justify-center w-full gap-4">
+                    <div>
+                        <script>document.write(new Date().getFullYear())</script> © Dinas Lingkungan Hidup Provinsi DKI Jakarta</a>
+                    </div>
+                </div>
+            </footer>
+            <!-- Footer End -->
+
+        </div>
+
+        <!-- ============================================================== -->
+        <!-- End Page content -->
+        <!-- ============================================================== -->
+
+    </div>
+
+    <!-- Plugin Js -->
+    <script src="{{asset('assets/libs/simplebar/simplebar.min.js')}}"></script>
+    <script src="{{asset('assets/libs/lucide/umd/lucide.min.js')}}"></script>
+    <script src="{{asset('assets/libs/@frostui/tailwindcss/frostui.js')}}"></script>
+
+    <!-- App Js -->
+    <script src="{{asset('assets/js/jquery.min.js')}}"></script>
+    <script src="{{asset('assets/js/app.js')}}"></script>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.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 src="{{asset('assets/js/select2/select2.bundle.js')}}"></script>
+    <script type="text/javascript" src="{{asset('assets/js/datatables/datatables.bundle.js')}}"></script>
+    <script>
+            $(document).ready(function() {
+                $('.select2').select2();
+                $('.numberInput').on('input', function() {
+                    this.value = this.value.replace(/[^0-9]/g, ''); // Hanya angka 0-9
+                });
+            });
+
+            @if (Session::get('type')=='error')
+                  toastr.error("{{ Session::get('message') }}", 'Error!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
+              @endif
+              @if (Session::get('type')=='success')
+                  toastr.success("{{ Session::get('message') }}", 'Berhasil!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
+              @endif
+              @if (Session::get('type')=='warning')
+                  toastr.warning("{{ Session::get('message') }}", 'Whoopss!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
+              @endif
+              @if (Session::get('type')=='info')
+                  toastr.info("{{ Session::get('message') }}", 'Info!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
+              @endif
+    </script>
+
+    <!-- Dashboard App js -->
+    @yield('js')
+    <script>
+    $('#button-toggle-menu').on('click',function(){
+        $('.text-menu').toggle();
+    });
+ </script>
+</body>
+
+</html>
\ No newline at end of file
