diff --git a/app/Helpers/general.php b/app/Helpers/general.php
index 61ddeaaf6..db446d882 100644
--- a/app/Helpers/general.php
+++ b/app/Helpers/general.php
@@ -32,7 +32,7 @@
      */
     function openkab_versi()
     {
-        return 'v2601.0.0';
+        return 'v2602.0.0';
     }
 }
 
diff --git a/app/Http/Controllers/BantuanController.php b/app/Http/Controllers/BantuanController.php
index 2f6410e76..40a10d750 100644
--- a/app/Http/Controllers/BantuanController.php
+++ b/app/Http/Controllers/BantuanController.php
@@ -22,4 +22,11 @@ public function cetak(Request $request)
 
         return view('bantuan.cetak', compact('filter'));
     }
+
+    public function cetakPeserta(Request $request, $id)
+    {
+        $filter = array_filter($request->all());
+
+        return view('bantuan.cetak-peserta', compact('id', 'filter'));
+    }
 }
diff --git a/app/Http/Controllers/DataPokokController.php b/app/Http/Controllers/DataPokokController.php
index 0aed82b43..3c814c3fa 100644
--- a/app/Http/Controllers/DataPokokController.php
+++ b/app/Http/Controllers/DataPokokController.php
@@ -63,6 +63,11 @@ public function pariwisata()
         return view('data_pokok.pariwisata.index', ['title' => $title]);
     }
 
+    public function cetakPariwisata(Request $request)
+    {
+        return view('data_pokok.pariwisata.cetak', ['filter' => $request->getQueryString()]);
+    }
+
     public function pendidikan()
     {
         return view('data_pokok.pendidikan.index');
@@ -92,6 +97,11 @@ public function infrastruktur()
         return view('data_pokok.infrastruktur.index', ['title' => $title]);
     }
 
+    public function cetakInfrastruktur(Request $request)
+    {
+        return view('data_pokok.infrastruktur.cetak', ['filter' => $request->getQueryString()]);
+    }
+
     public function sandang()
     {
         $title = 'Data Sandang';
diff --git a/catatan_rilis.md b/catatan_rilis.md
index 8a65678ab..abc240162 100644
--- a/catatan_rilis.md
+++ b/catatan_rilis.md
@@ -1,16 +1,30 @@
-Di rilis ini, versi 2601.0.0 berisi penambahan dan perbaikan yang diminta pengguna.
+Di rilis ini, versi 2602.0.0 berisi penambahan dan perbaikan yang diminta pengguna.
 
 #### Penambahan Fitur
 
-1. [#872](https://github.com/OpenSID/OpenKab/issues/872) Penambahan modul artikel OpenSID.
+1. [#883](https://github.com/OpenSID/OpenKab/issues/883) Penambahan fitur download untuk data desa.
+2. [#884](https://github.com/OpenSID/OpenKab/issues/884) Penambahan fitur download data kecamatan.
+3. [#885](https://github.com/OpenSID/OpenKab/issues/885) Penambahan fungsi ekspor excel pada data daftar data keluarga.
+4. [#896](https://github.com/OpenSID/OpenKab/issues/896) Penambahan fungsi cetak pada data presisi infrastruktur.
+5. [#897](https://github.com/OpenSID/OpenKab/issues/897) Penambahan fungsi cetak pada data presisi pariwisata.
+6. [#905](https://github.com/OpenSID/OpenKab/issues/905) Penambahan fungsi expor data presisi pangan.
+7. [#902](https://github.com/OpenSID/OpenKab/issues/902) Penambahan fitur expor & cetak pada halaman data peserta bantuan.
+8. [#907](https://github.com/OpenSID/OpenKab/issues/907) Penambahan fitur expor excel pada data presisi pendidikan.
+9. [#906](https://github.com/OpenSID/OpenKab/issues/906) Penambahan fitur expor excel pada data presisi pangan.
+10. [#916](https://github.com/OpenSID/OpenKab/issues/916) Penambahan fitur expor excel pada data presisi ketenagakerjaan.
+11. [#908](https://github.com/OpenSID/OpenKab/issues/908) Penambahan fitur expor excel pada data presisi seni budaya.
+12. [#919](https://github.com/OpenSID/OpenKab/issues/919) Penambahan fitur expor excel pada data presisi infrastruktur.
+13. [#921](https://github.com/OpenSID/OpenKab/issues/921) Penambahan fitur expor excel pada data presisi jaminan sosial.
+14. [#920](https://github.com/OpenSID/OpenKab/issues/920) Penambahan fitur expor excel pada data presisi parawisata.
+15. [#923](https://github.com/OpenSID/OpenKab/issues/923) Penambahan fitur expor excel pada data presisi adat.
+16. [#922](https://github.com/OpenSID/OpenKab/issues/922) Penambahan expor excel pada data presisi agama.
 
 #### Perbaikan BUG
 
-1. [#873](https://github.com/OpenSID/OpenKab/issues/873) Perbaikan menu laporan data presisi yang hilang.
-2. [#879](https://github.com/OpenSID/OpenKab/issues/879) Perbaikan filter tahun pada statistik kependudukan.
+1. [#893](https://github.com/OpenSID/OpenKab/issues/893) Perbaiki UI Layout dashboard dan sidebar.
 
 #### Perubahan Teknis
 
-1. [#869](https://github.com/OpenSID/OpenKab/issues/869) Upgrade versi moment pada chart.js serta perbaikan halaman website presisi untuk kependudukan dan RTM.
-2. [#876](https://github.com/OpenSID/OpenKab/issues/876) Ganti highchart dengan chartjs agar menggunakan satu library saja.
-3. [#868](https://github.com/OpenSID/OpenKab/issues/868) Penerapan rate limiting pada OpenKab untuk membantu mencegah serangan DDOS.
\ No newline at end of file
+1. [#892](https://github.com/OpenSID/OpenKab/issues/892) Perbaikan tag style agar tidak dianggap error ketika csp aktif.
+2. [#886](https://github.com/OpenSID/OpenKab/issues/886) Ubah label cetak menjadi excel pada laporan bulanan.
+3. [#903](https://github.com/OpenSID/OpenKab/issues/903) Ubah fungsi cetak ke expor excel pada halaman rincian kependudukan bulanan.
\ No newline at end of file
diff --git a/config/adminlte.php b/config/adminlte.php
index 9e4c94c3e..116450280 100644
--- a/config/adminlte.php
+++ b/config/adminlte.php
@@ -313,7 +313,7 @@
         ],
         [
             'icon' => 'fas fa-info-circle fa-lg nav-link',
-            'id'  => 'catatan-rilis',
+            'id' => 'catatan-rilis',
             'text' => '',
             'url' => '#',
             'topnav_right' => true,
@@ -347,12 +347,12 @@
         ],
         [
             'text' => 'Dasbor',
-            'icon' => 'fas fa-home',
+            'icon' => 'nav-icon fas fa-home',
             'url' => '/dasbor',
         ],
         [
             'text' => 'Dasbor Demografi',
-            'icon' => 'fas fa-home',
+            'icon' => 'nav-icon fas fa-home',
             'url' => '/dasbor-demografi',
         ],
 
diff --git a/public/assets/costume/css/admin.css b/public/assets/costume/css/admin.css
index 6d33c1332..5cb6ce3b9 100644
--- a/public/assets/costume/css/admin.css
+++ b/public/assets/costume/css/admin.css
@@ -4,8 +4,8 @@ a:hover {
     color: inherit;
 }
 
-.unlink  a,
-.unlink  a:hover {
+.unlink a,
+.unlink a:hover {
     text-decoration: none;
     color: inherit;
 }
@@ -36,33 +36,33 @@ tr.shown td.details-control {
     transition: .5s;
 }
 
-.img-cover{
+.img-cover {
     height: 100px;
     object-fit: cover;
 }
 
 .w-40 {
-    width: 40%!important;
+    width: 40% !important;
 }
 
 .w-42 {
-    width: 42%!important;
+    width: 42% !important;
 }
 
 .w-80 {
-    width: 80%!important;
+    width: 80% !important;
 }
 
 .w-56px {
-    width: 56px!important;
+    width: 56px !important;
 }
 
 .w-70px {
-    width: 70px!important;
+    width: 70px !important;
 }
 
 .w-100px {
-    width: 100px!important;
+    width: 100px !important;
 }
 
 .select2-container .select2-selection--single {
@@ -557,10 +557,51 @@ tr.shown td.details-control {
 .nav-treeview .nav-treeview {
     padding-left: 5px !important;
 }
+
 .nav-treeview .nav-item {
     padding-left: 5px !important;
 }
 
 .has-treeview .has-treeview {
     padding-left: 5px !important;
+}
+
+/* When sidebar is collapsed - only apply margin on larger screens */
+@media (min-width: 992px) {
+
+    .sidebar-collapse .content-wrapper,
+    .sidebar-collapse .main-footer,
+    .sidebar-collapse .main-header {
+        margin-left: 4.6rem !important;
+    }
+}
+
+/* Reset margin for mobile when sidebar is collapsed */
+@media (max-width: 991.98px) {
+
+    .sidebar-collapse .content-wrapper,
+    .sidebar-collapse .main-footer,
+    .sidebar-collapse .main-header {
+        margin-left: 0 !important;
+    }
+}
+
+/* Adjust arrow icon position */
+.nav-sidebar .nav-link>.right,
+.nav-sidebar .nav-link>p>.right {
+    position: absolute;
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    transition: transform 0.3s ease;
+}
+
+/* When menu is open, rotate the arrow */
+.nav-sidebar .menu-open>.nav-link>.right,
+.nav-sidebar .menu-open>.nav-link>p>.right {
+    transform: translateY(-50%) rotate(-90deg);
+}
+
+a .nav-link {
+    margin-left: -5px;
 }
\ No newline at end of file
diff --git a/resources/views/auth/2fa-challenge.blade.php b/resources/views/auth/2fa-challenge.blade.php
index d7fbcfe60..bb051ef6b 100644
--- a/resources/views/auth/2fa-challenge.blade.php
+++ b/resources/views/auth/2fa-challenge.blade.php
@@ -111,7 +111,7 @@
 @stop
 
 @section('adminlte_css')
-    <style>
+   <style nonce="{{ csp_nonce() }}" >
         .auth-body {
             padding: 20px;
         }
diff --git a/resources/views/auth/otp-login.blade.php b/resources/views/auth/otp-login.blade.php
index 6896bec84..77dcd73b0 100644
--- a/resources/views/auth/otp-login.blade.php
+++ b/resources/views/auth/otp-login.blade.php
@@ -147,7 +147,7 @@
 @stop
 
 @section('adminlte_css')
-    <style>
+   <style nonce="{{ csp_nonce() }}" >
         .auth-body {
             padding: 20px;
         }
diff --git a/resources/views/bantuan/cetak-peserta.blade.php b/resources/views/bantuan/cetak-peserta.blade.php
new file mode 100644
index 000000000..b76619b02
--- /dev/null
+++ b/resources/views/bantuan/cetak-peserta.blade.php
@@ -0,0 +1,71 @@
+@extends('layouts.cetak.index')
+
+@section('title', 'Data Peserta Bantuan')
+
+@push('css')
+    <style nonce="{{ csp_nonce() }}" type="text/css" media="print">
+        @page {
+            size: landscape;
+        }
+    </style>
+@endpush
+
+@section('content')
+@include('partials.breadcrumbs')
+<table class="border thick" id="tabel-peserta">
+    <thead>
+        <tr class="border thick">
+            <th>No</th>
+            <th>NIK</th>
+            <th>No. KK</th>
+            <th>Nama Penduduk</th>
+            <th>No. Kartu Peserta</th>
+            <th>Tempat Lahir</th>
+            <th>Tanggal Lahir</th>
+            <th>Jenis Kelamin</th>
+            <th>Alamat</th>
+            <th>Keterangan</th>
+        </tr>
+    </thead>
+    <tbody></tbody>
+</table>
+@stop
+
+@push('scripts')
+    <script nonce="{{ csp_nonce() }}">
+        document.addEventListener("DOMContentLoaded", function (event) {
+            const headers = @include('layouts.components.header_bearer_api_gabungan');
+            var str = `{{ request()->getQueryString() ?? '' }}`;
+            var filter = str.replace(/&amp;/g, '&');
+
+            $.ajax({
+                url: `{{ config('app.databaseGabunganUrl') . '/api/v1/bantuan/peserta' }}?filter[program_id]={{ $id }}&${filter}`,
+                headers: headers,
+                method: 'get',
+                success: function (json) {
+                    var no = 1;
+
+                    json.data.forEach(function (item) {
+                        var row = `
+                                <tr>
+                                    <td class="padat">${no}</td>
+                                    <td>${item.attributes.nik ?? '-'}</td>
+                                    <td>${item.attributes.no_kk ?? '-'}</td>
+                                    <td>${item.attributes.kartu_nama ?? '-'}</td>
+                                    <td>${item.attributes.no_id_kartu ?? '-'}</td>
+                                    <td>${item.attributes.kartu_tempat_lahir ?? '-'}</td>
+                                    <td>${item.attributes.kartu_tanggal_lahir ?? '-'}</td>
+                                    <td>${item.attributes.jenis_kelamin?.nama ?? '-'}</td>
+                                    <td>${item.attributes.kartu_alamat ?? '-'}</td>
+                                    <td>${item.attributes.keterangan?.nama ?? '-'}</td>
+                                </tr>
+                            `;
+
+                        $('#tabel-peserta tbody').append(row);
+                        no++;
+                    });
+                }
+            });
+        });
+    </script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/bantuan/show.blade.php b/resources/views/bantuan/show.blade.php
index 02b3b774c..7d49dd5f2 100644
--- a/resources/views/bantuan/show.blade.php
+++ b/resources/views/bantuan/show.blade.php
@@ -5,7 +5,7 @@
 @section('title', 'Data Peserta Bantuan')
 
 @section('content_header')
-    <h1>Data Peserta Bantuan</h1>
+<h1>Data Peserta Bantuan</h1>
 @stop
 
 @section('content')
@@ -16,6 +16,10 @@
                 <div class="card-header">
                     <a href="{{ url('bantuan') }}" class="btn btn-primary btn-sm"><i class="fas fa-arrow-circle-left"></i>
                         Kembali ke Daftar Bantuan</a>
+                    <x-print-button :print-url="url('bantuan/detail/' . $id . '/cetak')" table-id="peserta" :filter="[]" />
+                    <x-excel-download-button
+                        :download-url="config('app.databaseGabunganUrl') . '/api/v1/bantuan/peserta/download'"
+                        table-id="peserta" filename="data_peserta_bantuan" />
                 </div>
                 <div class="card-body">
                     <h5><b>Rincian Program</b></h5>
@@ -49,90 +53,91 @@
 @endsection
 
 @section('js')
-    <script nonce="{{ csp_nonce() }}"  >
-    document.addEventListener("DOMContentLoaded", function(event) {
-        var nama_desa = `{{ session('desa.nama_desa') }}`;
+    <script nonce="{{ csp_nonce() }}">
+        document.addEventListener("DOMContentLoaded", function (event) {
+            var nama_desa = `{{ session('desa.nama_desa') }}`;
 
-        const headers = @include('layouts.components.header_bearer_api_gabungan');
-        var urlBantuan = new URL("{{ config('app.databaseGabunganUrl').'/api/v1/bantuan' }}?filter[id]={{ $id }}");
-        var urlPeserta = new URL("{{ config('app.databaseGabunganUrl').'/api/v1/bantuan/peserta' }}?filter[program_id]={{ $id }}");
+            const headers = @include('layouts.components.header_bearer_api_gabungan');
+            var urlBantuan = new URL("{{ config('app.databaseGabunganUrl') . '/api/v1/bantuan' }}?filter[id]={{ $id }}");
+            var urlPeserta = new URL("{{ config('app.databaseGabunganUrl') . '/api/v1/bantuan/peserta' }}?filter[program_id]={{ $id }}");
 
-        $.ajax({
-            url:urlBantuan,
-            headers: headers,
-            method: 'get',
-            success: function(response) {
-                if (response.data[0].length == 0) {
-                    $('#tampilkan-bantuan').html(`
-                        <div class="col-lg-12">
-                            <div class="alert alert-warning">
-                                <h5><i class="icon fas fa-exclamation-triangle"></i> Perhatian!</h5>
-                                Tidak ada data bantuan yang tersedia untuk Desa ${nama_desa}.
+            $.ajax({
+                url: urlBantuan,
+                headers: headers,
+                method: 'get',
+                success: function (response) {
+                    if (response.data[0].length == 0) {
+                        $('#tampilkan-bantuan').html(`
+                            <div class="col-lg-12">
+                                <div class="alert alert-warning">
+                                    <h5><i class="icon fas fa-exclamation-triangle"></i> Perhatian!</h5>
+                                    Tidak ada data bantuan yang tersedia untuk Desa ${nama_desa}.
+                                </div>
                             </div>
-                        </div>
-                    `)
-                }
+                        `)
+                    }
 
-                var bantuan = response.data[0]
-                var html = ''
+                    var bantuan = response.data[0]
+                    var html = ''
 
-                html += `
-                    <table class="table table-bordered table-striped table-hover">
-                        <tbody>
-                            <tr>
-                                <td width="20%">Nama Program</td>
-                                <td width="1">:</td>
-                                <td>${bantuan.attributes.nama}</td>
-                            </tr>
-                            <tr>
-                                <td>Sasaran Peserta</td>
-                                <td> : </td>
-                                <td>${bantuan.attributes.nama_sasaran}</td>
-                            </tr>
-                            <tr>
-                                <td>Masa Berlaku</td>
-                                <td> : </td>
-                                <td>${bantuan.attributes.sdate} - ${bantuan.attributes.edate}</td>
-                            </tr>
-                            <tr>
-                                <td>Keterangan</td>
-                                <td> : </td>
-                                <td>${bantuan.attributes.ndesc}</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                `
+                    html += `
+                        <table class="table table-bordered table-striped table-hover">
+                            <tbody>
+                                <tr>
+                                    <td width="20%">Nama Program</td>
+                                    <td width="1">:</td>
+                                    <td>${bantuan.attributes.nama}</td>
+                                </tr>
+                                <tr>
+                                    <td>Sasaran Peserta</td>
+                                    <td> : </td>
+                                    <td>${bantuan.attributes.nama_sasaran}</td>
+                                </tr>
+                                <tr>
+                                    <td>Masa Berlaku</td>
+                                    <td> : </td>
+                                    <td>${bantuan.attributes.sdate} - ${bantuan.attributes.edate}</td>
+                                </tr>
+                                <tr>
+                                    <td>Keterangan</td>
+                                    <td> : </td>
+                                    <td>${bantuan.attributes.ndesc}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    `
 
-                $('#bantuan-detail').html(html)
-            }
-        });
+                    $('#bantuan-detail').html(html)
+                }
+            });
 
-        var peserta = $('#peserta').DataTable({
-            processing: true,
-            serverSide: true,
-            autoWidth: false,
-            ordering: true,
-            ajax: {
-                url: urlPeserta,
-                headers: headers,
-                method: 'get',
-                data: function(row) {
-                    return {
-                        "page[size]": row.length,
-                        "page[number]": (row.start / row.length) + 1,
-                        "filter[search]": row.search.value,
-                        "sort": (row.order[0]?.dir === "asc" ? "" : "-") + row.columns[row.order[0]?.column]
-                            ?.name
-                    };
-                },
-                dataSrc: function(json) {
-                    json.recordsTotal = json.meta.pagination.total
-                    json.recordsFiltered = json.meta.pagination.total
+            var peserta = $('#peserta').DataTable({
+                processing: true,
+                serverSide: true,
+                autoWidth: false,
+                ordering: true,
+                ajax: {
+                    url: urlPeserta,
+                    headers: headers,
+                    method: 'get',
+                    data: function (row) {
+                        return {
+                            "page[size]": row.length,
+                            "page[number]": (row.start / row.length) + 1,
+                            "filter[program_id]": "{{ $id }}",
+                            "filter[search]": row.search.value,
+                            "sort": (row.order[0]?.dir === "asc" ? "" : "-") + row.columns[row.order[0]?.column]
+                                ?.name
+                        };
+                    },
+                    dataSrc: function (json) {
+                        json.recordsTotal = json.meta.pagination.total
+                        json.recordsFiltered = json.meta.pagination.total
 
-                    return json.data
+                        return json.data
+                    },
                 },
-            },
-            columnDefs: [{
+                columnDefs: [{
                     targets: '_all',
                     className: 'text-nowrap',
                 },
@@ -141,8 +146,8 @@ className: 'text-nowrap',
                     orderable: false,
                     searchable: false,
                 },
-            ],
-            columns: [{
+                ],
+                columns: [{
                     data: null,
                 },
                 {
@@ -181,20 +186,20 @@ className: 'text-nowrap',
                     data: "attributes.keterangan.nama",
                     name: "keterangan",
                 },
-            ],
-            order: [
-                [3, 'asc']
-            ]
-        });
+                ],
+                order: [
+                    [3, 'asc']
+                ]
+            });
 
-        peserta.on('draw.dt', function() {
-            var PageInfo = $('#peserta').DataTable().page.info();
-            peserta.column(0, {
-                page: 'current'
-            }).nodes().each(function(cell, i) {
-                cell.innerHTML = i + 1 + PageInfo.start;
+            peserta.on('draw.dt', function () {
+                var PageInfo = $('#peserta').DataTable().page.info();
+                peserta.column(0, {
+                    page: 'current'
+                }).nodes().each(function (cell, i) {
+                    cell.innerHTML = i + 1 + PageInfo.start;
+                });
             });
-        });
-    })
+        })
     </script>
-@endsection
+@endsection
\ No newline at end of file
diff --git a/resources/views/components/excel-download-button.blade.php b/resources/views/components/excel-download-button.blade.php
index 85ec96e5b..b687a1ab8 100644
--- a/resources/views/components/excel-download-button.blade.php
+++ b/resources/views/components/excel-download-button.blade.php
@@ -69,9 +69,17 @@
 
                         // Prepare download URL
                         const url = new URL(downloadUrl);
-
+                        url.searchParams.set("kode_kabupaten", "{{ session('kabupaten.kode_kabupaten') ?? '' }}");
+                        url.searchParams.set("kode_kecamatan", "{{ session('kecamatan.kode_kecamatan') ?? '' }}");
+                        url.searchParams.set("kode_desa", "{{ session('desa.id') ?? '' }}");                
                         let urlParams = new URLSearchParams();
 
+                        // Add additional params
+                        @if ($additionalParams)
+                            @foreach ($additionalParams as $param)
+                                urlParams.append('{{ $param['key'] }}', '{{ $param['value'] }}');
+                            @endforeach
+                        @endif
                         if (tableId) {
                             // Get filter parameters from DataTable
                             const table = $('#' + tableId).DataTable();
@@ -110,7 +118,7 @@
                             const info = table.page.info();
                             urlParams.append('totalData', info.recordsTotal);
                         }
-
+        
                         // Make fetch request
                         const response = await fetch(url, {
                             method: 'POST',
diff --git a/resources/views/components/filter-kategori-wisata.blade.php b/resources/views/components/filter-kategori-wisata.blade.php
new file mode 100644
index 000000000..9e65a0226
--- /dev/null
+++ b/resources/views/components/filter-kategori-wisata.blade.php
@@ -0,0 +1,7 @@
+<div class="col-sm-2">
+    <select id="filter-kategori-wisata" class="form-control form-control-sm">
+        <option value="">Pilih Kategori</option>
+        <option value="sarana-wisata">Sarana Wisata</option>
+        <option value="potensi-wisata">Potensi Wisata</option>
+    </select>
+</div>
\ No newline at end of file
diff --git a/resources/views/components/filter-komoditas-wisata.blade.php b/resources/views/components/filter-komoditas-wisata.blade.php
new file mode 100644
index 000000000..b45e88ca8
--- /dev/null
+++ b/resources/views/components/filter-komoditas-wisata.blade.php
@@ -0,0 +1,8 @@
+<div class="col-auto">
+    <select id="filter-komoditas-wisata" class="form-control form-control-sm">
+        <option value="">Pilih Lokasi/Tempat/Area Wisata</option>
+        @foreach(App\Enums\KomoditasPotensiWisataEnum::getInstances() as $komoditas)
+        <option value="{{ $komoditas->value }}">{{ $komoditas->description }}</option>
+        @endforeach
+    </select>
+</div>
\ No newline at end of file
diff --git a/resources/views/components/filter-sarana-wisata.blade.php b/resources/views/components/filter-sarana-wisata.blade.php
new file mode 100644
index 000000000..a7148318b
--- /dev/null
+++ b/resources/views/components/filter-sarana-wisata.blade.php
@@ -0,0 +1,8 @@
+<div class="col-auto">
+    <select id="filter-sarana-wisata" class="form-control form-control-sm">
+        <option value="">Pilih Jenis Hiburan</option>
+        @foreach(App\Enums\SaranaWisataEnum::getInstances() as $sarana)
+        <option value="{{ $sarana->value }}">{{ $sarana->description }}</option>
+        @endforeach
+    </select>
+</div>
\ No newline at end of file
diff --git a/resources/views/components/filter-tahun.blade.php b/resources/views/components/filter-tahun.blade.php
new file mode 100644
index 000000000..f23a189ce
--- /dev/null
+++ b/resources/views/components/filter-tahun.blade.php
@@ -0,0 +1,12 @@
+<div class="col-sm-2">
+    <select id="filter-tahun" class="form-control form-control-sm">
+        @php
+        $currentYear = date('Y');
+        $startYear = $currentYear - 5;
+        @endphp
+        <option value="">Pilih tahun</option>
+        @for($year = $currentYear; $year >= $startYear; $year--)
+        <option value="{{ $year }}" {{ $year == $currentYear ? 'selected' : '' }}>{{ $year }}</option>
+        @endfor
+    </select>
+</div>
\ No newline at end of file
diff --git a/resources/views/components/print-button.blade.php b/resources/views/components/print-button.blade.php
index 8508118c9..fb3c72fd0 100644
--- a/resources/views/components/print-button.blade.php
+++ b/resources/views/components/print-button.blade.php
@@ -30,6 +30,9 @@
                 e.preventDefault();
 
                 const printUrl = new URL(this.dataset.printUrl);
+                printUrl.searchParams.set("kode_kabupaten", "{{ session('kabupaten.kode_kabupaten') ?? '' }}");
+                printUrl.searchParams.set("kode_kecamatan", "{{ session('kecamatan.kode_kecamatan') ?? '' }}");
+                printUrl.searchParams.set("kode_desa", "{{ session('desa.id') ?? '' }}");                
                 const tableId = this.dataset.tableId;
                 const filters = JSON.parse(this.dataset.filters || '{}');
                 const additionalParams = JSON.parse(this.dataset.additionalParams || '{}');
@@ -48,6 +51,7 @@
                     // Get filters/search from DataTable's ajax.params
                     if (typeof dataTable.ajax.params === 'function') {
                         const params = dataTable.ajax.params();
+                        
                         Object.entries(params).forEach(([key, value]) => {
                             if (value && value !== '' && value !== 'null') {
                                 printUrl.searchParams.append(key, value);
@@ -59,8 +63,7 @@
                 // Add additional static parameters
                 Object.entries(additionalParams).forEach(([key, value]) => {
                     printUrl.searchParams.append(key, value);
-                });
-
+                });                
                 // Open print URL in new window
                 window.open(printUrl.href, '_blank');
             });
diff --git a/resources/views/dasbor/index.blade.php b/resources/views/dasbor/index.blade.php
index 626d263d8..022818663 100644
--- a/resources/views/dasbor/index.blade.php
+++ b/resources/views/dasbor/index.blade.php
@@ -13,10 +13,18 @@
                 @include('dasbor.filter')
                 @include('dasbor.summary')
             </div>
-        </div>        
+        </div>
         {{-- @include('dasbor.statistik_penduduk') --}}
-        @include('dasbor.peta')
-        @include('dasbor.tabel_penduduk')
+        <div class="card rounded-0 border-0 shadow-none col-12">
+            <div class="card-body">
+                @include('dasbor.peta')
+            </div>
+        </div>
+        <div class="card rounded-0 border-0 shadow-none col-12">
+            <div class="card-body">
+                @include('dasbor.tabel_penduduk')
+            </div>
+        </div>
     </div>
 
 @endsection
diff --git a/resources/views/data_pokok/agama/index.blade.php b/resources/views/data_pokok/agama/index.blade.php
index 539c0b395..7099f2a4a 100644
--- a/resources/views/data_pokok/agama/index.blade.php
+++ b/resources/views/data_pokok/agama/index.blade.php
@@ -30,22 +30,16 @@
             <div class="card card-outline card-primary">
                 <div class="card-header">
                     <div class="row">
-                        <div class="col-sm-2">
-                            <select id="filter-tahun" class="form-control form-control-sm">
-                                @php
-                                    $currentYear = date('Y');
-                                    $startYear = 2020;
-                                @endphp
-                                @for($year = $currentYear; $year >= $startYear; $year--)
-                                    <option value="{{ $year }}" {{ $year == $currentYear ? 'selected' : '' }}>{{ $year }}</option>
-                                @endfor
-                            </select>
-                        </div>
-                        <div class="col-sm-3">
-                            <button id="cetak" type="button" class="btn btn-primary btn-sm" data-url="">
-                                <i class="fa fa-print"></i> Cetak
-                            </button>
+                        <x-filter-tahun />
+                        <div class="col-auto">
+                            <x-print-button :print-url="route('cetak_agama')" table-id="agama" :filter="[]" />
                         </div>
+                        <x-excel-download-button :download-url="config('app.databaseGabunganUrl') . '/api/v1/data-presisi/agama/rtm/download'" table-id="agama" filename="data_presisi_agama"
+                            :additional-params="[
+                                ['key' => 'kode_kabupaten', 'value' => session('kabupaten.kode_kabupaten') ?? ''],
+                                ['key' => 'kode_kecamatan', 'value' => session('kecamatan.kode_kecamatan') ?? ''],
+                                ['key' => 'config_desa', 'value' => session('desa.id') ?? ''],
+                            ]" />
                     </div>
                 </div>
                 <div class="card-body">
@@ -101,10 +95,6 @@
                             "page[number]": (row.start / row.length) + 1,
                             'include': 'anggota,penduduk,rtm,keluarga',
                             "filter[search]": row.search.value,
-                            "filter[kepala_rtm]": true,
-                            // "sort": (row.order[0]?.dir === "asc" ? "" : "-") + row.columns[row.order[0]
-                            //         ?.column]
-                            //     ?.name,
                             "filter[kode_desa]": $("#kode_desa").val(),
                             "filter[tahun]": $("#filter-tahun").val(),
                         };
@@ -178,8 +168,8 @@ className: 'text-nowrap',
                                 "{{ route('detail_agama', ['data' => '__DATA__']) }}"
                                 .replace('__DATA__', jsonData)
                             return `<a href="${_url}" title="Detail" data-button="Detail">
-                                <button type="button" class="btn btn-info btn-sm">Detail</button>
-                            </a>`;
+                                    <button type="button" class="btn btn-info btn-sm">Detail</button>
+                                </a>`;
                         },
                         searchable: false,
                         orderable: false
@@ -237,37 +227,37 @@ className: 'text-nowrap',
 
             function format(data) {
                 return `
-                    <table class="table table-striped">
-                        <tr>
-                            <td><strong>DTKS:</strong></td>
-                            <td>${data.attributes.dtks || 'N/A'}</td>
-                        </tr>
-                        <tr>
-                            <td><strong>Jumlah KK:</strong></td>
-                            <td>${data.attributes.jumlah_kk || 'N/A'}</td>
-                        </tr>
-                        <tr>
-                            <td><strong>Alamat:</strong></td>
-                            <td>${data.attributes.alamat || 'N/A'}</td>
-                        </tr>
-                        <tr>
-                            <td><strong>Dusun:</strong></td>
-                            <td>${data.attributes.dusun || 'N/A'}</td>
-                        </tr>
-                        <tr>
-                            <td><strong>RT:</strong></td>
-                            <td>${data.attributes.rt || 'N/A'}</td>
-                        </tr>
-                        <tr>
-                            <td><strong>RW:</strong></td>
-                            <td>${data.attributes.rw || 'N/A'}</td>
-                        </tr>
-                        <tr>
-                            <td><strong>Tanggal Terdaftar:</strong></td>
-                            <td>${data.attributes.tgl_daftar || 'N/A'}</td>
-                        </tr>
-                    </table>
-                `;
+                        <table class="table table-striped">
+                            <tr>
+                                <td><strong>DTKS:</strong></td>
+                                <td>${data.attributes.dtks || 'N/A'}</td>
+                            </tr>
+                            <tr>
+                                <td><strong>Jumlah KK:</strong></td>
+                                <td>${data.attributes.jumlah_kk || 'N/A'}</td>
+                            </tr>
+                            <tr>
+                                <td><strong>Alamat:</strong></td>
+                                <td>${data.attributes.alamat || 'N/A'}</td>
+                            </tr>
+                            <tr>
+                                <td><strong>Dusun:</strong></td>
+                                <td>${data.attributes.dusun || 'N/A'}</td>
+                            </tr>
+                            <tr>
+                                <td><strong>RT:</strong></td>
+                                <td>${data.attributes.rt || 'N/A'}</td>
+                            </tr>
+                            <tr>
+                                <td><strong>RW:</strong></td>
+                                <td>${data.attributes.rw || 'N/A'}</td>
+                            </tr>
+                            <tr>
+                                <td><strong>Tanggal Terdaftar:</strong></td>
+                                <td>${data.attributes.tgl_daftar || 'N/A'}</td>
+                            </tr>
+                        </table>
+                    `;
             }
 
             $('#filter-tahun').on('change', function() {
@@ -275,13 +265,6 @@ function format(data) {
                 data_grafik = [];
                 grafikPie();
             });
-
-            $('#cetak').on('click', function() {
-                let baseUrl = "{{ route('cetak_agama') }}";
-                let params = agama.ajax.params(); // Get DataTables params
-                let queryString = new URLSearchParams(params).toString(); // Convert params to query string
-                window.open(`${baseUrl}?${queryString}`, '_blank'); // Open the URL with appended query
-            });
         })
     </script>
 @endsection
diff --git a/resources/views/data_pokok/data_presisi/adat/cetak.blade.php b/resources/views/data_pokok/data_presisi/adat/cetak.blade.php
index 5b6931070..f9d56d7bc 100644
--- a/resources/views/data_pokok/data_presisi/adat/cetak.blade.php
+++ b/resources/views/data_pokok/data_presisi/adat/cetak.blade.php
@@ -35,31 +35,20 @@
 
             const header = @include('layouts.components.header_bearer_api_gabungan');
             $.ajax({
-                url: `{{ config('app.databaseGabunganUrl') . '/api/v1/data-presisi/adat' }}?${filter}`,
+                url: `{{ config('app.databaseGabunganUrl') . '/api/v1/data-presisi/adat/rtm' }}?${filter}`,
                 headers: header,
                 method: 'get',
                 success: function(json) {
-                    var no = 1;
-                    // Transform the included array into an object
-                    const transformedIncluded = json.included.reduce((acc, item) => {
-                        if (!acc[item.type]) {
-                            acc[item.type] = {};
-                        }
-                        acc[item.type][item.id] = item.attributes;
-                        return acc;
-                    }, {});
+                    var no = 1;                    
                     json.data.forEach(function(item) {
                         var row = `
                             <tr>
                                 <td class="padat">${no}</td>
-                                <td>${transformedIncluded.penduduk[item
-                                    .relationships.penduduk.data.id].nik || 'N/A'}</td>
-                                <td>${transformedIncluded.penduduk[item
-                                    .relationships.penduduk.data.id].keluarga?.no_kk || 'N/A'}</td>
-                                <td>${transformedIncluded.penduduk[item
-                                    .relationships.penduduk.data.id].nama || 'N/A'}</td>
-                                <td>${item.attributes.agama || 'N/A'}</td>
-                                <td>${item.attributes.frekwensi || 'N/A'}</td>
+                                <td>${item.attributes.nik || 'N/A'}</td>
+                                <td>${item.attributes.kepala_keluarga || 'N/A'}</td>    
+                                <td>${item.attributes.jumlah_anggota || 'N/A'}</td>
+                                <td>${item.attributes.status_keanggotaan || 'N/A'}</td>
+                                <td>${item.attributes.frekwensi_mengikuti_kegiatan_setahun || 'N/A'}</td>
                             </tr>
                             `
                         $('#tabel-adat tbody').append(row)
diff --git a/resources/views/data_pokok/data_presisi/adat/index.blade.php b/resources/views/data_pokok/data_presisi/adat/index.blade.php
index a6314b44e..857f8a383 100644
--- a/resources/views/data_pokok/data_presisi/adat/index.blade.php
+++ b/resources/views/data_pokok/data_presisi/adat/index.blade.php
@@ -5,241 +5,184 @@
 @section('title', 'Data adat')
 
 @section('content_header')
-    <h1>{{ $title }}</h1>
+<h1>{{ $title }}</h1>
 @stop
 
 @section('content')
-    @include('partials.breadcrumbs')
-    <div class="row">
-        <div class="col-lg-12">
-            <div class="card">
-                <div class="card-header">Statistik Adat</div>
-                <div class="card-body">
-                    <div>
-                        <div class="chart" id="pie1">
+@include('partials.breadcrumbs')
+<div class="row">
+    <div class="col-lg-12">
+        <div class="card">
+            <div class="card-header">Statistik Adat</div>
+            <div class="card-body">
+                <div>
+                    <div class="chart" id="pie1">
 
-                        </div>
-                        <hr class="hr-chart">
                     </div>
+                    <hr class="hr-chart">
                 </div>
             </div>
         </div>
     </div>
-    <div class="row">
-        <div class="col-lg-12">
-            <div class="card card-outline card-primary">
-                <div class="card-header">
-                    <div class="row">
-                        <div class="col-sm-2">
-                            <select id="filter-tahun" class="form-control form-control-sm">
-                                @php
-                                    $currentYear = date('Y');
-                                    $startYear = 2020;
-                                @endphp
-                                @for($year = $currentYear; $year >= $startYear; $year--)
-                                    <option value="{{ $year }}" {{ $year == $currentYear ? 'selected' : '' }}>{{ $year }}</option>
-                                @endfor
-                            </select>
-                        </div>
-                        <div class="col-sm-3">
-                            <button id="cetak" type="button" class="btn btn-primary btn-sm" data-url="">
-                                <i class="fa fa-print"></i> Cetak
-                            </button>
-                        </div>
+</div>
+<div class="row">
+    <div class="col-lg-12">
+        <div class="card card-outline card-primary">
+            <div class="card-header">
+                <div class="row mb-2">
+                    <x-filter-tahun />
+                    <div class="col-auto">
+                        <x-print-button :print-url="url('data-pokok/data-presisi-adat/cetak')" table-id="adat" :filter="[]" />
                     </div>
+                    <x-excel-download-button :download-url="config('app.databaseGabunganUrl') . '/api/v1/data-presisi/adat/rtm/download'" table-id="adat" filename="data_adat" />
                 </div>
-                <div class="card-body">
-                    <div class="table-responsive">
-                        <table class="table table-striped" id="adat">
-                            <thead>
-                                <tr>
-                                    <th>Aksi</th>
-                                    <th>#</th>
-                                    <th>NIK</th>
-                                    <th>Nama Kepala Keluarga</th>
-                                    <th>Jumlah Anggota RTM</th>
-                                    <th>Status Keanggotaan</th>
-                                    <th>Frekwensi Mengikuti Kegiatan Adat Dalam Setahun</th>
-                                </tr>
-                            </thead>
-                            <tbody></tbody>
-                        </table>
-                    </div>
+            </div>
+            <div class="card-body">
+                <div class="table-responsive">
+                    <table class="table table-striped" id="adat">
+                        <thead>
+                            <tr>
+                                <th>Aksi</th>
+                                <th>#</th>
+                                <th>NIK</th>
+                                <th>Nama Kepala Keluarga</th>
+                                <th>Jumlah Anggota RTM</th>
+                                <th>Status Keanggotaan</th>
+                                <th>Frekwensi Mengikuti Kegiatan Adat Dalam Setahun</th>
+                            </tr>
+                        </thead>
+                        <tbody></tbody>
+                    </table>
                 </div>
             </div>
         </div>
     </div>
+</div>
 @endsection
 
 @section('js')
 @include('data_pokok.data_presisi.adat.chart')
-    <script nonce="{{ csp_nonce() }}">
-        let data_grafik = [];
-        let transformedIncluded = {};
-        document.addEventListener("DOMContentLoaded", function(event) {
-            const header = @include('layouts.components.header_bearer_api_gabungan');
-            var url = new URL("{{ config('app.databaseGabunganUrl') . '/api/v1/data-presisi/adat' }}");
-            url.searchParams.set("kode_kabupaten", "{{ session('kabupaten.kode_kabupaten') ?? '' }}");
-            url.searchParams.set("kode_kecamatan", "{{ session('kecamatan.kode_kecamatan') ?? '' }}");
-            url.searchParams.set("config_desa", "{{ session('desa.id') ?? '' }}");
-            var adat = $('#adat').DataTable({
-                processing: true,
-                serverSide: true,
-                autoWidth: false,
-                ordering: false,
-                searchPanes: {
-                    viewTotal: false,
-                    columns: [0]
+<script nonce="{{ csp_nonce() }}">
+    let data_grafik = [];
+    let transformedIncluded = {};
+    document.addEventListener("DOMContentLoaded", function(event) {
+        const header = @include('layouts.components.header_bearer_api_gabungan');
+        var url = new URL("{{ config('app.databaseGabunganUrl') . '/api/v1/data-presisi/adat/rtm' }}");
+        url.searchParams.set("kode_kabupaten", "{{ session('kabupaten.kode_kabupaten') ?? '' }}");
+        url.searchParams.set("kode_kecamatan", "{{ session('kecamatan.kode_kecamatan') ?? '' }}");
+        url.searchParams.set("config_desa", "{{ session('desa.id') ?? '' }}");
+        var adat = $('#adat').DataTable({
+            processing: true,
+            serverSide: true,
+            autoWidth: false,
+            ordering: false,
+            searchPanes: {
+                viewTotal: false,
+                columns: [0]
+            },
+            ajax: {
+                url: url.href,
+                headers: header,
+                method: 'get',
+                data: function(row) {
+                    return {
+                        "page[size]": row.length,
+                        "page[number]": (row.start / row.length) + 1,                        
+                        "filter[search]": row.search.value,                        
+                        "sort": "id",                        
+                        "filter[tahun]": $('#filter-tahun').val(),
+                    };
                 },
-                ajax: {
-                    url: url.href,
-                    headers: header,
-                    method: 'get',
-                    data: function(row) {
-                        return {
-                            "page[size]": row.length,
-                            "page[number]": (row.start / row.length) + 1,
-                            'include': 'anggota,penduduk,rtm,keluarga',
-                            "filter[search]": row.search.value,
-                            "filter[kepala_rtm]": true,
-                            // "sort": (row.order[0]?.dir === "asc" ? "" : "-") + row.columns[row.order[0]
-                            //         ?.column]
-                            //     ?.name,
-                            "filter[kode_desa]": $("#kode_desa").val(),
-                            "filter[tahun]": $('#filter-tahun').val(),
-                        };
-                    },
-                    dataSrc: function(json) {
-
-                        if (json.data.length > 0) {
-                            json.recordsTotal = json.meta.pagination.total
-                            json.recordsFiltered = json.meta.pagination.total
-                            data_grafik = [];
-                            // Transform the included array into an object
-                            transformedIncluded = json.included.reduce((acc, item) => {
-                                if (!acc[item.type]) {
-                                    acc[item.type] = {};
-                                }
-                                acc[item.type][item.id] = item.attributes;
-                                return acc;
-                            }, {});
-
-                            json.data.forEach(function(item, index) {
-                                data_grafik.push(item.attributes)
-                                item.attributes.nik = transformedIncluded.penduduk[item
-                                    .relationships.penduduk.data.id].nik;
-                                item.attributes.nama = transformedIncluded.penduduk[item
-                                    .relationships.penduduk.data.id].nama;
-                                if (!item.attributes.frekwensi) {
-                                    item.attributes.frekwensi = 'TIDAK TAHU'
-                                }
-                                if (!item.attributes.status_keanggotaan) {
-                                    item.attributes.status_keanggotaan = 'TIDAK TAHU'
-                                }
-                                item.attributes.dtks = transformedIncluded.rtm[item
-                                        .relationships.rtm.data.id].dtks ? 'Terdaftar' :
-                                    'Tidak Terdaftar';
-                                item.attributes.tgl_daftar = transformedIncluded.rtm[item
-                                    .relationships.rtm.data.id].tgl_daftar;
-                                item.attributes.jumlah_kk = transformedIncluded.rtm[item
-                                    .relationships.rtm.data.id].jumlah_kk;
-                                item.attributes.alamat = transformedIncluded.keluarga[item
-                                    .relationships.keluarga.data.id].alamat;
-                                item.attributes.dusun = transformedIncluded.keluarga[item
-                                    .relationships.keluarga.data.id].wilayah?.dusun;
-                                item.attributes.rt = transformedIncluded.keluarga[item
-                                    .relationships.keluarga.data.id].wilayah?.rt;
-                                item.attributes.rw = transformedIncluded.keluarga[item
-                                    .relationships.keluarga.data.id].wilayah?.rw;
-                            })
-                            grafikPie()
-                            return json.data;
-                        }
-                        return false;
-                    },
+                dataSrc: function(json) {
+                    json.recordsTotal = json.meta?.pagination?.total || 0
+                    json.recordsFiltered = json.meta?.pagination?.total || 0
+                    if (json.data.length > 0) {                        
+                        data_grafik = [];
+                        json.data.forEach(function(item, index) {
+                            data_grafik.push(item.attributes)
+                        })                        
+                        grafikPie()
+                        return json.data;
+                    }
+                    return false;
                 },
-                columnDefs: [{
-                    targets: '_all',
-                    className: 'text-nowrap',
-                }, ],
-                columns: [{
-                        data: function(data) {
-                            let d = data.attributes
-                            let obj = {
-                                'rtm_id': data.relationships.rtm.data.id,
-                                'no_kartu_rumah': transformedIncluded.rtm[data.relationships.rtm
-                                    .data.id].no_kk,
-                                'nama_kepala_keluarga': d.nama,
-                                'alamat': transformedIncluded.keluarga[data.relationships
-                                    .keluarga.data.id].alamat,
-                                'jumlah_anggota': d.anggota_count,
-                                'jumlah_kk': transformedIncluded.rtm[data.relationships.rtm
-                                    .data.id].jumlah_kk,
-                            }
-                            let jsonData = encodeURIComponent(JSON.stringify(obj));
-                            const _url =
-                                "{{ route('data-pokok.data-presisi-adat.detail', ['data' => '__DATA__']) }}"
-                                .replace('__DATA__', jsonData)
-                            return `<a href="${_url}" title="Detail" data-button="Detail">
+            },
+            columnDefs: [{
+                targets: '_all',
+                className: 'text-nowrap',
+            }, ],
+            columns: [{
+                    data: function(data) {
+                        let d = data.attributes
+                         let obj = {
+                            'rtm_id': data.id,
+                            'no_kartu_rumah': d.no_kk,
+                            'nama_kepala_keluarga': d.kepala_keluarga,
+                            'alamat': d.alamat,
+                            'jumlah_anggota': d.jumlah_anggota,
+                            'jumlah_kk': d.jumlah_kk,
+                        }
+                        let jsonData = encodeURIComponent(JSON.stringify(obj));
+                        const _url =
+                            "{{ route('data-pokok.data-presisi-adat.detail', ['data' => '__DATA__']) }}"
+                            .replace('__DATA__', jsonData)
+                        return `<a href="${_url}" title="Detail" data-button="Detail">
                                 <button type="button" class="btn btn-info btn-sm">Detail</button>
                             </a>`;
-                        },
-                        searchable: false,
-                        orderable: false
-                    },
-                    {
-                        "className": 'details-control',
-                        "orderable": false,
-                        "data": null,
-                        "defaultContent": ''
-                    },
-                    {
-                        data: "attributes.nik",
-                        name: "penduduk.nik",
-                    },
-                    {
-                        data: "attributes.nama",
-                        name: "rtm.nama_kepala_keluarga",
-                        orderable: false
-                    },
-                    {
-                        data: "attributes.anggota_count",
-                        name: null,
-                        orderable: false,
-                        searchable: false
-                    },
-                    {
-                        data: "attributes.status_keanggotaan",
-                        name: "status_keanggotaan",
-                        orderable: false,
-                        searchable: false
                     },
-                    {
-                        data: "attributes.frekwensi",
-                        name: "frekwensi_mengikuti_kegiatan_setahun",
-                        orderable: false,
-                        searchable: false
-                    },
-                ],
-            })
+                    searchable: false,
+                    orderable: false
+                },
+                {
+                    "className": 'details-control',
+                    "orderable": false,
+                    "data": null,
+                    "defaultContent": ''
+                },
+                {
+                    data: "attributes.nik",
+                    orderable: false,
+                },
+                {
+                    data: "attributes.kepala_keluarga",
+                    orderable: false,
+                },
+                {
+                    data: "attributes.jumlah_anggota",
+                    orderable: false,
+                },
+                {
+                    data: "attributes.status_keanggotaan",
+                    name: "status_keanggotaan",
+                    orderable: false,
+                    searchable: false
+                },
+                {
+                    data: "attributes.frekwensi_mengikuti_kegiatan_setahun",
+                    name: "frekwensi_mengikuti_kegiatan_setahun",
+                    orderable: false,
+                    searchable: false
+                },
+            ],
+        })
 
-            // Add event listener for opening and closing details
-            adat.on('click', 'td.details-control', function() {
-                let tr = $(this).closest('tr');
-                let row = adat.row(tr);
-                if (row.child.isShown()) {
-                    // This row is already open - close it
-                    row.child.hide();
-                    tr.removeClass('shown');
-                } else {
-                    // Open this row
-                    row.child(format(row.data())).show();
-                    tr.addClass('shown');
-                }
-            });
+        // Add event listener for opening and closing details
+        adat.on('click', 'td.details-control', function() {
+            let tr = $(this).closest('tr');
+            let row = adat.row(tr);
+            if (row.child.isShown()) {
+                // This row is already open - close it
+                row.child.hide();
+                tr.removeClass('shown');
+            } else {
+                // Open this row
+                row.child(format(row.data())).show();
+                tr.addClass('shown');
+            }
+        });
 
-            function format(data) {
-                return `
+        function format(data) {
+            return `
                     <table class="table table-striped">
                         <tr>
                             <td><strong>DTKS:</strong></td>
@@ -271,20 +214,13 @@ function format(data) {
                         </tr>
                     </table>
                 `;
-            }
-            // Event listener for year filter change
-            $('#filter-tahun').on('change', function() {
-                adat.ajax.reload();
-                data_grafik = [];
-                grafikPie();
-            });
-            
-            $('#cetak').on('click', function() {
-                let baseUrl = "{{ route('data-pokok.data-presisi-adat.cetak') }}";
-                let params = adat.ajax.params(); // Get DataTables params
-                let queryString = new URLSearchParams(params).toString(); // Convert params to query string
-                window.open(`${baseUrl}?${queryString}`, '_blank'); // Open the URL with appended query
-            });
-        })
-    </script>
-@endsection
+        }
+        // Event listener for year filter change
+        $('#filter-tahun').on('change', function() {
+            adat.ajax.reload();
+            data_grafik = [];
+            grafikPie();
+        });
+    })
+</script>
+@endsection
\ No newline at end of file
diff --git a/resources/views/data_pokok/data_presisi/kesehatan/cetak.blade.php b/resources/views/data_pokok/data_presisi/kesehatan/cetak.blade.php
index 6551fc101..5dfb2d204 100644
--- a/resources/views/data_pokok/data_presisi/kesehatan/cetak.blade.php
+++ b/resources/views/data_pokok/data_presisi/kesehatan/cetak.blade.php
@@ -16,9 +16,9 @@
         <thead>
             <tr class="border thick">
                 <th>NO</th>
-                <th>NIK</th>
-                <th>NOMOR KK</th>
-                <th>NAMA</th>
+                <th>NIK</th>                
+                <th>NAMA KEPALA KELUARGA</th>
+                <th>JUMLAH ANGGOTA RTM</th>
                 <th>JNS ASURANSI</th>
                 <th>JNS PENGGUNAAN ALAT KONTRASEPSI</th>
                 <th>JNS PENYAKIT YANG DIDERITA</th>
@@ -27,8 +27,7 @@
                 <th>KUNJUNGAN KE DOKTER DALAM 1 TAHUN</th>
                 <th>KONDISI FISIK SEJAK LAHIR</th>
                 <th>STATUS GIZI BALITA</th>
-                <th>TANGGAL PENGISIAN</th>
-                <th>STATUS PENGISIAN</th>
+                <th>TANGGAL PENGISIAN</th>                
             </tr>
         </thead>
         <tbody></tbody>
@@ -39,10 +38,10 @@
     <script nonce="{{ csp_nonce() }}"  >
         document.addEventListener("DOMContentLoaded", function(event) {
             var str = `{{ $filter }}`
-            var filter = str.replace(/&amp;/g, '&')
+             var filter = str.replace(/&amp;/g, '&').replace(/undefined/g, '')
             const header = @include('layouts.components.header_bearer_api_gabungan');
             $.ajax({
-                url: `{{ config('app.databaseGabunganUrl').'/api/v1/data-presisi/kesehatan' }}?${filter}`,
+                url: `{{ config('app.databaseGabunganUrl').'/api/v1/data-presisi/kesehatan/rtm' }}?${filter}`,
                 headers: header,
                 method: 'get',
                 success: function(json) {
@@ -52,8 +51,8 @@
                             <tr>
                                 <td class="padat">${no}</td>
                                 <td>${item.attributes.nik || 'N/A'}</td>
-                                <td>${item.attributes.no_kk || 'N/A'}</td>
-                                <td>${item.attributes.nama || 'N/A'}</td>
+                                <td>${item.attributes.kepala_keluarga || 'N/A'}</td>    
+                                <td>${item.attributes.jumlah_anggota || 'N/A'}</td>                                
                                 <td>${item.attributes.jns_ansuransi || 'N/A'}</td>
                                 <td>${item.attributes.jns_penggunaan_alat_kontrasepsi || 'N/A'}</td>
                                 <td>${item.attributes.jns_penyakit_diderita || 'N/A'}</td>
@@ -62,8 +61,7 @@
                                 <td>${item.attributes.frekwensi_kunjungan_dokter_pertahun || 'N/A'}</td>
                                 <td>${item.attributes.kondisi_fisik_sejak_lahir || 'N/A'}</td>
                                 <td>${item.attributes.status_gizi_balita || 'N/A'}</td>
-                                <td>${item.attributes.tanggal_pengisian || 'N/A'}</td>
-                                <td>${item.attributes.status_pengisian || 'N/A'}</td>
+                                <td>${item.attributes.tanggal_pengisian || 'N/A'}</td>                                
                             </tr>
                             `
                         $('#tabel-sandang tbody').append(row)
diff --git a/resources/views/data_pokok/data_presisi/kesehatan/index.blade.php b/resources/views/data_pokok/data_presisi/kesehatan/index.blade.php
index 4d4aea7ac..5f3ba5daf 100644
--- a/resources/views/data_pokok/data_presisi/kesehatan/index.blade.php
+++ b/resources/views/data_pokok/data_presisi/kesehatan/index.blade.php
@@ -3,189 +3,180 @@
 @section('title', $title)
 
 @section('content_header')
-    <h1>{{ $title }}</h1>
+<h1>{{ $title }}</h1>
 @stop
 
 @push('css')
-    <style nonce="{{ csp_nonce() }}">
-        .details {
-            margin-left: 20px;
-        }
-    </style>
+<style nonce="{{ csp_nonce() }}">
+    .details {
+        margin-left: 20px;
+    }
+</style>
 @endpush
 
 @section('content')
-    @include('partials.breadcrumbs')
-    <div class="row">
-        <div class="col-lg-12">
-            <div class="card card-outline card-primary">
-                <div class="card-body">
-                    <div class="chart" id="grafik">
-                        <canvas id="barChart"></canvas>
-                    </div>
+@include('partials.breadcrumbs')
+<div class="row">
+    <div class="col-lg-12">
+        <div class="card card-outline card-primary">
+            <div class="card-body">
+                <div class="chart" id="grafik">
+                    <canvas id="barChart"></canvas>
                 </div>
             </div>
-            <div class="card card-outline card-primary">
-                <div class="card-header">
-                    <div class="row">
-                        <div class="col-sm-2">
-                            <select id="filter-tahun" class="form-control form-control-sm">
-                                @php
-                                    $currentYear = date('Y');
-                                    $startYear = 2020;
-                                @endphp
-                                @for($year = $currentYear; $year >= $startYear; $year--)
-                                    <option value="{{ $year }}" {{ $year == $currentYear ? 'selected' : '' }}>{{ $year }}</option>
-                                @endfor
-                            </select>
-                        </div>
-                        <div class="col-sm-3">
-                            <button id="cetak" type="button" class="btn btn-primary btn-sm" data-url="">
-                                <i class="fa fa-print"></i> Cetak
-                            </button>
-                        </div>
+        </div>
+        <div class="card card-outline card-primary">
+            <div class="card-header">
+                <div class="row">
+                    <x-filter-tahun />
+                    <div class="col-auto">
+                        <x-print-button :print-url="url('data-presisi/kesehatan/cetak')" table-id="table-kesehatan" :filter="[]" />
                     </div>
+                    <x-excel-download-button :download-url="config('app.databaseGabunganUrl') . '/api/v1/data-presisi/kesehatan/rtm/download'" table-id="table-kesehatan" filename="data_presisi_kesehatan" />
                 </div>
-                <div class="card-body">
-                    <div class="table-responsive">
-                        <table class="table table-striped" id="table-kesehatan">
-                            <thead>
-                                <tr>
-                                    <th>Aksi</th>
-                                    <th>#</th>
-                                    <th>NIK</th>
-                                    <th>Nama Kepala Keluarga</th>
-                                    <th>Jumlah Anggota RTM</th>
-                                    <th>Jenis Ansuransi</th>
-                                    <th>Jenis Penggunaan Alat Kontrasepsi</th>
-                                </tr>
-                            </thead>
-                            <tbody></tbody>
-                        </table>
-                    </div>
+            </div>
+            <div class="card-body">
+                <div class="table-responsive">
+                    <table class="table table-striped" id="table-kesehatan">
+                        <thead>
+                            <tr>
+                                <th>Aksi</th>
+                                <th>#</th>
+                                <th>NIK</th>
+                                <th>Nama Kepala Keluarga</th>
+                                <th>Jumlah Anggota RTM</th>
+                                <th>Jenis Ansuransi</th>
+                                <th>Jenis Penggunaan Alat Kontrasepsi</th>
+                            </tr>
+                        </thead>
+                        <tbody></tbody>
+                    </table>
                 </div>
             </div>
         </div>
     </div>
+</div>
 @endsection
 
 @section('js')
-    @include('data_pokok.data_presisi.kesehatan.chart')
-    <script nonce="{{ csp_nonce() }}">
-        let data_grafik = [];
-        document.addEventListener("DOMContentLoaded", function(event) {
-            const header = @include('layouts.components.header_bearer_api_gabungan');
-            var url = new URL("{{ config('app.databaseGabunganUrl') . '/api/v1/data-presisi/kesehatan/rtm' }}");
-            url.searchParams.set("kode_kabupaten", "{{ session('kabupaten.kode_kabupaten') ?? '' }}");
-            url.searchParams.set("kode_kecamatan", "{{ session('kecamatan.kode_kecamatan') ?? '' }}");
-            url.searchParams.set("kode_desa", "{{ session('desa.id') ?? '' }}");
-            var dtks = $('#table-kesehatan').DataTable({
-                processing: true,
-                serverSide: true,
-                autoWidth: false,
-                ordering: false,
-                searchPanes: {
-                    viewTotal: false,
-                    columns: [0]
+@include('data_pokok.data_presisi.kesehatan.chart')
+<script nonce="{{ csp_nonce() }}">
+    let data_grafik = [];
+    document.addEventListener("DOMContentLoaded", function(event) {
+        const header = @include('layouts.components.header_bearer_api_gabungan');
+        var url = new URL("{{ config('app.databaseGabunganUrl') . '/api/v1/data-presisi/kesehatan/rtm' }}");
+        url.searchParams.set("kode_kabupaten", "{{ session('kabupaten.kode_kabupaten') ?? '' }}");
+        url.searchParams.set("kode_kecamatan", "{{ session('kecamatan.kode_kecamatan') ?? '' }}");
+        url.searchParams.set("kode_desa", "{{ session('desa.id') ?? '' }}");
+        var dtks = $('#table-kesehatan').DataTable({
+            processing: true,
+            serverSide: true,
+            autoWidth: false,
+            searchPanes: {
+                viewTotal: false,
+                columns: [0]
+            },
+            ajax: {
+                url: url.href,
+                headers: header,
+                method: 'get',
+                data: function(row) {
+                    return {
+                        "page[size]": row.length,
+                        "page[number]": (row.start / row.length) + 1,
+                        "filter[search]": row.search.value,
+                        "filter[tahun]": $('#filter-tahun').val(),
+                        "sort": "id"
+                    };
                 },
-                ajax: {
-                    url: url.href,
-                    headers: header,
-                    method: 'get',
-                    data: function(row) {
-                        return {
-                            "page[size]": row.length,
-                            "page[number]": (row.start / row.length) + 1,
-                            "filter[search]": row.search.value,
-                            "kode_kecamatan": "{{ session('kecamatan.kode_kecamatan') ?? '' }}",
-                            "config_desa": "{{ session('desa.id') ?? '' }}",
-                            "filter[tahun]": $('#filter-tahun').val(),
-                        };
-                    },
-                    dataSrc: function(json) {
-                        if (json.data.length > 0) {
-                            json.recordsTotal = json.meta.pagination.total
-                            json.recordsFiltered = json.meta.pagination.total
-                            data_grafik = [];
-                            json.data.forEach(function(item, index) {
-                                data_grafik.push(item.attributes)
-                            })
-                            grafikPie()
-                            return json.data;
-                        }
-                        return false;
-                    },
+                dataSrc: function(json) {
+                    json.recordsTotal = json.meta?.pagination?.total || 0;
+                    json.recordsFiltered = json.meta?.pagination?.total || 0;
+                    if (json.data.length > 0) {
+                        data_grafik = [];
+                        json.data.forEach(function(item, index) {
+                            data_grafik.push(item.attributes)
+                        })
+                        grafikPie()
+                        return json.data;
+                    }
+                    return false;
                 },
-                columnDefs: [{
-                    targets: '_all',
-                    className: 'text-nowrap',
-                }, ],
-                columns: [{
-                        data: function(data) {
-                            let d = data.attributes
-                            let obj = {
-                                'rtm_id': data.id,
-                                'no_kartu_rumah': d.no_kk,
-                                'nama_kepala_keluarga': d.kepala_keluarga,
-                                'alamat': d.alamat,
-                                'jumlah_anggota': d.jumlah_anggota,
-                                'jumlah_kk': d.jumlah_kk,
-                            }
-                            let jsonData = encodeURIComponent(JSON.stringify(obj));
-                            const _url =
-                                "{{ route('data-pokok.data-presisi.detail', ['data' => '__DATA__']) }}"
-                                .replace('__DATA__', jsonData)
-                            return `<a href="${_url}" title="Detail" data-button="Detail">
+            },
+            columnDefs: [{
+                targets: '_all',
+                className: 'text-nowrap',
+            }, ],
+            columns: [{
+                    data: function(data) {
+                        let d = data.attributes
+                        let obj = {
+                            'rtm_id': data.id,
+                            'no_kartu_rumah': d.no_kk,
+                            'nama_kepala_keluarga': d.kepala_keluarga,
+                            'alamat': d.alamat,
+                            'jumlah_anggota': d.jumlah_anggota,
+                            'jumlah_kk': d.jumlah_kk,
+                        }
+                        let jsonData = encodeURIComponent(JSON.stringify(obj));
+                        const _url =
+                            "{{ route('data-pokok.data-presisi.detail', ['data' => '__DATA__']) }}"
+                            .replace('__DATA__', jsonData)
+                        return `<a href="${_url}" title="Detail" data-button="Detail">
                                 <button type="button" class="btn btn-info btn-sm">Detail</button>
                             </a>`;
-                        },
-                        searchable: false,
-                        orderable: false
-                    },
-                    {
-                        "className": 'details-control',
-                        "orderable": false,
-                        "data": null,
-                        "defaultContent": ''
-                    },
-                    {
-                        data: "attributes.nik",
-                        orderable: false,
-                    },
-                    {
-                        data: "attributes.kepala_keluarga",
-                    },
-                    {
-                        data: "attributes.jumlah_anggota",
-                    },
-                    {
-                        data: "attributes.jns_ansuransi",
-                        render: (data) => data || 'N/A',
-                    },
-                    {
-                        data: "attributes.jns_penggunaan_alat_kontrasepsi",
-                        render: (data) => data || 'N/A',
                     },
+                    searchable: false,
+                    orderable: false
+                },
+                {
+                    "className": 'details-control',
+                    orderable: false,
+                    "data": null,
+                    "defaultContent": ''
+                },
+                {
+                    data: "attributes.nik",
+                    orderable: false,
+                },
+                {
+                    data: "attributes.kepala_keluarga",
+                    orderable: false,
+                },
+                {
+                    data: "attributes.jumlah_anggota",
+                    orderable: false,
+                },
+                {
+                    data: "attributes.jns_ansuransi",
+                    render: (data) => data || 'N/A',
+                    orderable: false,
+                },
+                {
+                    data: "attributes.jns_penggunaan_alat_kontrasepsi",
+                    render: (data) => data || 'N/A',
+                    orderable: false,
+                },
 
-                ],
-            })
-            // Add event listener for opening and closing details
-            dtks.on('click', 'td.details-control', function() {
-                let tr = $(this).closest('tr');
-                let row = dtks.row(tr);
-                if (row.child.isShown()) {
-                    // This row is already open - close it
-                    row.child.hide();
-                    tr.removeClass('shown');
-                } else {
-                    // Open this row
-                    row.child(format(row.data())).show();
-                    tr.addClass('shown');
-                }
-            });
+            ],
+        })
+        // Add event listener for opening and closing details
+        dtks.on('click', 'td.details-control', function() {
+            let tr = $(this).closest('tr');
+            let row = dtks.row(tr);
+            if (row.child.isShown()) {
+                // This row is already open - close it
+                row.child.hide();
+                tr.removeClass('shown');
+            } else {
+                // Open this row
+                row.child(format(row.data())).show();
+                tr.addClass('shown');
+            }
+        });
 
-            function format(data) {
-                return `
+        function format(data) {
+            return `
                     <table class="table table-striped">
                         <tr>
                             <td><strong>DTKS:</strong></td>
@@ -217,20 +208,13 @@ function format(data) {
                         </tr>
                     </table>
                 `;
-            }
-            // Event listener for year filter change
-            $('#filter-tahun').on('change', function() {
-                dtks.ajax.reload();
-                data_grafik = [];
-                grafikPie();
-            });
-            
-            $('#cetak').on('click', function() {
-                let baseUrl = "{{ route('data-pokok.data-presisi.cetak') }}";
-                let params = dtks.ajax.params(); // Get DataTables params
-                let queryString = new URLSearchParams(params).toString(); // Convert params to query string
-                window.open(`${baseUrl}?${queryString}`, '_blank'); // Open the URL with appended query
-            });
-        })
-    </script>
-@endsection
+        }
+        // Event listener for year filter change
+        $('#filter-tahun').on('change', function() {
+            dtks.ajax.reload();
+            data_grafik = [];
+            grafikPie();
+        });
+    })
+</script>
+@endsection
\ No newline at end of file
diff --git a/resources/views/data_pokok/data_presisi/ketenagakerjaan/cetak.blade.php b/resources/views/data_pokok/data_presisi/ketenagakerjaan/cetak.blade.php
index 726c6dbf5..956f96e49 100644
--- a/resources/views/data_pokok/data_presisi/ketenagakerjaan/cetak.blade.php
+++ b/resources/views/data_pokok/data_presisi/ketenagakerjaan/cetak.blade.php
@@ -17,8 +17,8 @@
             <tr class="border thick">
                 <th>NO</th>
                 <th>NIK</th>
-                <th>NOMOR KK</th>
-                <th>NAMA</th>
+                <th>NAMA KEPALA KELUARGA</th>
+                <th>JUMLAH ANGGOTA</th>
                 <th>JENIS PEKERJAAN</th>
                 <th>TEMPAT KERJA</th>
                 <th>FREKWENSI MENGIKUTI PELATIHAN SETAHUN</th>
@@ -38,7 +38,7 @@
             var filter = str.replace(/&amp;/g, '&')
             const header = @include('layouts.components.header_bearer_api_gabungan');
             $.ajax({
-                url: `{{ config('app.databaseGabunganUrl').'/api/v1/data-presisi/ketenagakerjaan' }}?${filter}`,
+                url: `{{ config('app.databaseGabunganUrl').'/api/v1/data-presisi/ketenagakerjaan/rtm' }}?${filter}`,
                 headers: header,
                 method: 'get',
                 success: function(json) {
@@ -48,8 +48,8 @@
                             <tr>
                                 <td class="padat">${no}</td>
                                 <td>${item.attributes.nik || 'N/A'}</td>
-                                <td>${item.attributes.no_kk || 'N/A'}</td>
-                                <td>${item.attributes.nama || 'N/A'}</td>
+                                <td>${item.attributes.kepala_keluarga || 'N/A'}</td>
+                                <td>${item.attributes.jumlah_anggota || 'N/A'}</td>
                                 <td>${item.attributes.jenis_pekerjaan || 'N/A'}</td>
                                 <td>${item.attributes.tempat_kerja || 'N/A'}</td>
                                 <td>${item.attributes.frekwensi_mengikuti_pelatihan_setahun || 'N/A'}</td>
diff --git a/resources/views/data_pokok/data_presisi/ketenagakerjaan/index.blade.php b/resources/views/data_pokok/data_presisi/ketenagakerjaan/index.blade.php
index 4e898ec65..6c7e40fde 100644
--- a/resources/views/data_pokok/data_presisi/ketenagakerjaan/index.blade.php
+++ b/resources/views/data_pokok/data_presisi/ketenagakerjaan/index.blade.php
@@ -3,107 +3,96 @@
 @section('title', $title)
 
 @section('content_header')
-    <h1>{{ $title }}</h1>
+<h1>{{ $title }}</h1>
 @stop
 
 @push('css')
-    <style>
-        .details {
-            margin-left: 20px;
-        }
-    </style>
+<style nonce="{{ csp_nonce() }}">
+    .details {
+        margin-left: 20px;
+    }
+</style>
 @endpush
 
 @section('content')
-    @include('partials.breadcrumbs')
-    <div class="row">
-        <div class="col-lg-12">
-            <div class="card card-outline card-primary">
-                <div class="card-body">
-                    <div class="chart" id="grafik">
-                        <canvas id="barChart"></canvas>
-                    </div>
+@include('partials.breadcrumbs')
+<div class="row">
+    <div class="col-lg-12">
+        <div class="card card-outline card-primary">
+            <div class="card-body">
+                <div class="chart" id="grafik">
+                    <canvas id="barChart"></canvas>
                 </div>
             </div>
-            <div class="card card-outline card-primary">
-                <div class="card-header">
-                    <div class="row">
-                        <div class="col-sm-2">
-                            <select id="filter-tahun" class="form-control form-control-sm">
-                                @php
-                                    $currentYear = date('Y');
-                                    $startYear = 2020;
-                                @endphp
-                                @for($year = $currentYear; $year >= $startYear; $year--)
-                                    <option value="{{ $year }}" {{ $year == $currentYear ? 'selected' : '' }}>{{ $year }}</option>
-                                @endfor
-                            </select>
-                        </div>
-                        <div class="col-sm-3">
-                            <button id="cetak" type="button" class="btn btn-primary btn-sm" data-url="">
-                                <i class="fa fa-print"></i> Cetak
-                            </button>
-                        </div>
+        </div>
+        <div class="card card-outline card-primary">
+            <div class="card-header">
+                <div class="row">
+                    <x-filter-tahun />
+                    <div class="col-auto">
+                        <x-print-button :print-url="url('data-presisi/ketenagakerjaan/cetak')" table-id="table-ketenagakerjaan" :filter="[]" />
                     </div>
+                    <x-excel-download-button :download-url="config('app.databaseGabunganUrl') . '/api/v1/data-presisi/ketenagakerjaan/rtm/download'" table-id="table-ketenagakerjaan" filename="data_presisi_ketenagakerjaan" />
                 </div>
-                <div class="card-body">
-                    <div class="table-responsive">
-                        <table class="table table-striped" id="table-ketenagakerjaan">
-                            <thead>
-                                <tr>
-                                    <th>Aksi</th>
-                                    <th>#</th>
-                                    <th>NIK</th>
-                                    <th>Nama Kepala Keluarga</th>
-                                    <th>Jumlah Anggota RTM</th>
-                                    <th>Jenis Pekerjaan</th>
-                                    <th>Tempat Kerja</th>
-                                </tr>
-                            </thead>
-                            <tbody></tbody>
-                        </table>
-                    </div>
+            </div>
+            <div class="card-body">
+                <div class="table-responsive">
+                    <table class="table table-striped" id="table-ketenagakerjaan">
+                        <thead>
+                            <tr>
+                                <th>Aksi</th>
+                                <th>#</th>
+                                <th>NIK</th>
+                                <th>Nama Kepala Keluarga</th>
+                                <th>Jumlah Anggota RTM</th>
+                                <th>Jenis Pekerjaan</th>
+                                <th>Tempat Kerja</th>
+                            </tr>
+                        </thead>
+                        <tbody></tbody>
+                    </table>
                 </div>
             </div>
         </div>
     </div>
+</div>
 @endsection
 
 @section('js')
-    @include('data_pokok.data_presisi.ketenagakerjaan.chart')
-    <script nonce="{{ csp_nonce() }}">
-        let data_grafik = [];
-        document.addEventListener("DOMContentLoaded", function(event) {
-            const header = @include('layouts.components.header_bearer_api_gabungan');
-            var url = new URL("{{ config('app.databaseGabunganUrl').'/api/v1/data-presisi/ketenagakerjaan/rtm' }}");
-            url.searchParams.set("kode_kabupaten", "{{ session('kabupaten.kode_kabupaten') ?? '' }}");
-            url.searchParams.set("kode_kecamatan", "{{ session('kecamatan.kode_kecamatan') ?? '' }}");
-            url.searchParams.set("kode_desa", "{{ session('desa.id') ?? '' }}");
-            var dtks = $('#table-ketenagakerjaan').DataTable({
-                processing: true,
-                serverSide: true,
-                autoWidth: false,
-                ordering: false,
-                searchPanes: {
-                    viewTotal: false,
-                    columns: [0]
+@include('data_pokok.data_presisi.ketenagakerjaan.chart')
+<script nonce="{{ csp_nonce() }}">
+    let data_grafik = [];
+    document.addEventListener("DOMContentLoaded", function(event) {
+        const header = @include('layouts.components.header_bearer_api_gabungan');
+        var url = new URL("{{ config('app.databaseGabunganUrl').'/api/v1/data-presisi/ketenagakerjaan/rtm' }}");
+        url.searchParams.set("kode_kabupaten", "{{ session('kabupaten.kode_kabupaten') ?? '' }}");
+        url.searchParams.set("kode_kecamatan", "{{ session('kecamatan.kode_kecamatan') ?? '' }}");
+        url.searchParams.set("kode_desa", "{{ session('desa.id') ?? '' }}");
+        var dtks = $('#table-ketenagakerjaan').DataTable({
+            processing: true,
+            serverSide: true,
+            autoWidth: false,
+            ordering: false,
+            searchPanes: {
+                viewTotal: false,
+                columns: [0]
+            },
+            ajax: {
+                url: url.href,
+                headers: header,
+                method: 'get',
+                data: function(row) {
+                    return {
+                        "page[size]": row.length,
+                        "page[number]": (row.start / row.length) + 1,
+                        "filter[search]": row.search.value,
+                        "kode_kecamatan": "{{ session('kecamatan.kode_kecamatan') ?? '' }}",
+                        "config_desa": "{{ session('desa.id') ?? '' }}",
+                        "filter[tahun]": $('#filter-tahun').val(),
+                    };
                 },
-                ajax: {
-                    url: url.href,
-                    headers: header,  
-                    method: 'get',
-                    data: function(row) {
-                        return {
-                            "page[size]": row.length,
-                            "page[number]": (row.start / row.length) + 1,
-                            "filter[search]": row.search.value,
-                            "kode_kecamatan": "{{ session('kecamatan.kode_kecamatan') ?? '' }}",
-                            "config_desa": "{{ session('desa.id') ?? '' }}",
-                            "filter[tahun]": $('#filter-tahun').val(),
-                        };
-                    },
-                    dataSrc: function(json) {
-                        if (json.data.length > 0) {
+                dataSrc: function(json) {
+                    if (json.data.length > 0) {
                         json.recordsTotal = json.meta.pagination.total
                         json.recordsFiltered = json.meta.pagination.total
                         data_grafik = [];
@@ -114,77 +103,76 @@
                         return json.data;
                     }
                     return false;
-                    },
                 },
-                columnDefs: [{
-                        targets: '_all',
-                        className: 'text-nowrap',
-                    },
-                ],
-                columns: [
-                    {
-                        data: function(data) {
-                            let d = data.attributes
-                            let obj = {
-                                'rtm_id' : data.id,
-                                'no_kartu_rumah': d.no_kk,
-                                'nama_kepala_keluarga': d.kepala_keluarga,
-                                'alamat': d.alamat,
-                                'jumlah_anggota': d.jumlah_anggota,
-                                'jumlah_kk': d.jumlah_kk,
-                            }
-                            let jsonData = encodeURIComponent(JSON.stringify(obj));
-                            const _url =  "{{ route('data-pokok.data-presisi-ketenagakerjaan.detail', ['data' => '__DATA__']) }}".replace('__DATA__', jsonData)
-                            return `<a href="${_url}" title="Detail" data-button="Detail">
+            },
+            columnDefs: [{
+                targets: '_all',
+                className: 'text-nowrap',
+            }, ],
+            columns: [{
+                    data: function(data) {
+                        let d = data.attributes
+                        let obj = {
+                            'rtm_id': data.id,
+                            'no_kartu_rumah': d.no_kk,
+                            'nama_kepala_keluarga': d.kepala_keluarga,
+                            'alamat': d.alamat,
+                            'jumlah_anggota': d.jumlah_anggota,
+                            'jumlah_kk': d.jumlah_kk,
+                        }
+                        let jsonData = encodeURIComponent(JSON.stringify(obj));
+                        const _url = "{{ route('data-pokok.data-presisi-ketenagakerjaan.detail', ['data' => '__DATA__']) }}".replace('__DATA__', jsonData)
+                        return `<a href="${_url}" title="Detail" data-button="Detail">
                                 <button type="button" class="btn btn-info btn-sm">Detail</button>
                             </a>`;
-                        },
-                        searchable: false,
-                        orderable: false
-                    },
-                    {
-                        "className": 'details-control',
-                        "orderable": false,
-                        "data": null,
-                        "defaultContent": ''
-                    },
-                    {
-                        data: "attributes.nik",
-                        orderable: false,
-                    },
-                    {
-                        data: "attributes.kepala_keluarga",
-                    },
-                    {
-                        data: "attributes.jumlah_anggota",
-                    },
-                    {
-                        data: "attributes.jenis_pekerjaan",
-                        render: (data) => data || 'N/A',
-                    },
-                    {
-                        data: "attributes.tempat_kerja",
-                        render: (data) => data || 'N/A',
                     },
-                    
-                ],
-            })
-            // Add event listener for opening and closing details
-            dtks.on('click', 'td.details-control', function () {
-                let tr = $(this).closest('tr');
-                let row = dtks.row(tr);
-                if (row.child.isShown()) {
-                    // This row is already open - close it
-                    row.child.hide();
-                    tr.removeClass('shown');
-                } else {
-                    // Open this row
-                    row.child(format(row.data())).show();
-                    tr.addClass('shown');
-                }
-            });
-            function format(data) {
-                return `
+                    searchable: false,
+                    orderable: false
+                },
+                {
+                    "className": 'details-control',
+                    "orderable": false,
+                    "data": null,
+                    "defaultContent": ''
+                },
+                {
+                    data: "attributes.nik",
+                    orderable: false,
+                },
+                {
+                    data: "attributes.kepala_keluarga",
+                },
+                {
+                    data: "attributes.jumlah_anggota",
+                },
+                {
+                    data: "attributes.jenis_pekerjaan",
+                    render: (data) => data || 'N/A',
+                },
+                {
+                    data: "attributes.tempat_kerja",
+                    render: (data) => data || 'N/A',
+                },
+
+            ],
+        })
+        // Add event listener for opening and closing details
+        dtks.on('click', 'td.details-control', function() {
+            let tr = $(this).closest('tr');
+            let row = dtks.row(tr);
+            if (row.child.isShown()) {
+                // This row is already open - close it
+                row.child.hide();
+                tr.removeClass('shown');
+            } else {
+                // Open this row
+                row.child(format(row.data())).show();
+                tr.addClass('shown');
+            }
+        });
+
+        function format(data) {
+            return `
                     <table class="table table-striped">
                         <tr>
                             <td><strong>Frekwensi Mengikuti Pelatihan Setahun:</strong></td>
@@ -220,20 +208,20 @@ function format(data) {
                         </tr>
                     </table>
                 `;
-            }
-            // Event listener for year filter change
-            $('#filter-tahun').on('change', function() {
-                dtks.ajax.reload();
-                data_grafik = [];
-                grafikPie();
-            });
-            
-            $('#cetak').on('click', function() {
-                let baseUrl = "{{ route('data-pokok.data-presisi-ketenagakerjaan.cetak') }}";
-                let params = dtks.ajax.params(); // Get DataTables params
-                let queryString = new URLSearchParams(params).toString(); // Convert params to query string 
-                window.open(`${baseUrl}?${queryString}`, '_blank'); // Open the URL with appended query
-            });
-        })
-    </script>
+        }
+        // Event listener for year filter change
+        $('#filter-tahun').on('change', function() {
+            dtks.ajax.reload();
+            data_grafik = [];
+            grafikPie();
+        });
+
+        $('#cetak').on('click', function() {
+            let baseUrl = "{{ route('data-pokok.data-presisi-ketenagakerjaan.cetak') }}";
+            let params = dtks.ajax.params(); // Get DataTables params
+            let queryString = new URLSearchParams(params).toString(); // Convert params to query string 
+            window.open(`${baseUrl}?${queryString}`, '_blank'); // Open the URL with appended query
+        });
+    })
+</script>
 @endsection
\ No newline at end of file
diff --git a/resources/views/data_pokok/data_presisi/laporan/index.blade.php b/resources/views/data_pokok/data_presisi/laporan/index.blade.php
index ff806ca59..712b1f5e6 100644
--- a/resources/views/data_pokok/data_presisi/laporan/index.blade.php
+++ b/resources/views/data_pokok/data_presisi/laporan/index.blade.php
@@ -7,7 +7,7 @@
 @stop
 
 @push('css')
-    <style>
+   <style nonce="{{ csp_nonce() }}" >
         .details {
             margin-left: 20px;
         }
diff --git a/resources/views/data_pokok/data_presisi/laporan/perdesa.blade.php b/resources/views/data_pokok/data_presisi/laporan/perdesa.blade.php
index fe80b6695..29027caf7 100644
--- a/resources/views/data_pokok/data_presisi/laporan/perdesa.blade.php
+++ b/resources/views/data_pokok/data_presisi/laporan/perdesa.blade.php
@@ -7,7 +7,7 @@
 @stop
 
 @push('css')
-    <style>
+   <style nonce="{{ csp_nonce() }}" >
         .details {
             margin-left: 20px;
         }
diff --git a/resources/views/data_pokok/data_presisi/pangan/cetak.blade.php b/resources/views/data_pokok/data_presisi/pangan/cetak.blade.php
index 0ab97e23a..d50bb895c 100644
--- a/resources/views/data_pokok/data_presisi/pangan/cetak.blade.php
+++ b/resources/views/data_pokok/data_presisi/pangan/cetak.blade.php
@@ -12,13 +12,13 @@
 
 @section('content')
     @include('partials.breadcrumbs')
-    <table class="border thick" id="tabel-sandang">
+    <table class="border thick" id="tabel-pangan">
         <thead>
             <tr class="border thick">
                 <th>NO</th>
                 <th>NIK</th>
-                <th>NOMOR KK</th>
-                <th>NAMA</th>
+                <th>NAMA KEPALA KELUARGA</th>
+                <th>JUMLAH ANGGOTA RTM</th>
                 <th>JENIS LAHAN</th>
                 <th>LUAS LAHAN</th>
                 <th>LUAS TANAM</th>
@@ -35,7 +35,7 @@
                 <th>FREKWENSI KONSUMSI BUAH PERHARI</th>
                 <th>FREKWENSI KONSUMSI DAGING PERHARI</th>
                 <th>TANGGAL PENGISIAN</th>
-                <th>STATUS PENGISIAN</th>
+                <th>STATUS PENGISIAN</th>                
             </tr>
         </thead>
         <tbody></tbody>
@@ -46,10 +46,11 @@
     <script nonce="{{ csp_nonce() }}"  >
         document.addEventListener("DOMContentLoaded", function(event) {
             var str = `{{ $filter }}`
-            var filter = str.replace(/&amp;/g, '&')
+            var filter = str.replace(/&amp;/g, '&').replace(/undefined/g, '')
+            
             const header = @include('layouts.components.header_bearer_api_gabungan');
             $.ajax({
-                url: `{{ config('app.databaseGabunganUrl').'/api/v1/data-presisi/pangan' }}?${filter}`,
+                url: `{{ config('app.databaseGabunganUrl').'/api/v1/data-presisi/pangan/rtm' }}?${filter}`,
                 headers: header,
                 method: 'get',
                 success: function(json) {
@@ -59,10 +60,10 @@
                             <tr>
                                 <td class="padat">${no}</td>
                                 <td>${item.attributes.nik || 'N/A'}</td>
-                                <td>${item.attributes.no_kk || 'N/A'}</td>
-                                <td>${item.attributes.nama || 'N/A'}</td>
+                                <td>${item.attributes.kepala_keluarga || 'N/A'}</td>
+                                <td>${item.attributes.jumlah_anggota || 'N/A'}</td>
                                 <td>${item.attributes.jenis_lahan || 'N/A'}</td>
-                                <td>${item.attributes.luas_lahan || 'N/A'}</td>
+                                <td>${item.attributes.luas_lahan || 'N/A'}</td> 
                                 <td>${item.attributes.luas_tanam || 'N/A'}</td>
                                 <td>${item.attributes.status_lahan || 'N/A'}</td>
                                 <td>${item.attributes.komoditi_utama_tanaman_pangan || 'N/A'}</td>
@@ -77,11 +78,10 @@
                                 <td>${item.attributes.frekwensi_konsumsi_buah_perhari || 'N/A'}</td>
                                 <td>${item.attributes.frekwensi_konsumsi_daging_perhari || 'N/A'}</td>
                                 <td>${item.attributes.tanggal_pengisian || 'N/A'}</td>
-                                <td>${item.attributes.status_pengisian || 'N/A'}</td>
-
+                                <td>${item.attributes.status_pengisian || 'N/A'}</td>                               
                             </tr>
                             `
-                        $('#tabel-sandang tbody').append(row)
+                        $('#tabel-pangan tbody').append(row)
                         no++;
                     })
                 }
diff --git a/resources/views/data_pokok/data_presisi/pangan/index.blade.php b/resources/views/data_pokok/data_presisi/pangan/index.blade.php
index 5de4cb3ac..4b799bfea 100644
--- a/resources/views/data_pokok/data_presisi/pangan/index.blade.php
+++ b/resources/views/data_pokok/data_presisi/pangan/index.blade.php
@@ -3,190 +3,177 @@
 @section('title', $title)
 
 @section('content_header')
-    <h1>{{ $title }}</h1>
+<h1>{{ $title }}</h1>
 @stop
 
 @push('css')
-    <style>
-        .details {
-            margin-left: 20px;
-        }
-    </style>
+<style nonce="{{ csp_nonce() }}">
+    .details {
+        margin-left: 20px;
+    }
+</style>
 @endpush
 
 @section('content')
-    @include('partials.breadcrumbs')
-    <div class="row">
-        <div class="col-lg-12">
-            <div class="card card-outline card-primary">
-                <div class="card-body">
-                    <div class="chart" id="grafik">
-                        <canvas id="barChart"></canvas>
-                    </div>
+@include('partials.breadcrumbs')
+<div class="row">
+    <div class="col-lg-12">
+        <div class="card card-outline card-primary">
+            <div class="card-body">
+                <div class="chart" id="grafik">
+                    <canvas id="barChart"></canvas>
                 </div>
             </div>
-            <div class="card card-outline card-primary">
-                <div class="card-header">
-                    <div class="row">
-                        <div class="col-sm-2">
-                            <select id="filter-tahun" class="form-control form-control-sm">
-                                @php
-                                    $currentYear = date('Y');
-                                    $startYear = 2020;
-                                @endphp
-                                @for ($year = $currentYear; $year >= $startYear; $year--)
-                                    <option value="{{ $year }}" {{ $year == $currentYear ? 'selected' : '' }}>
-                                        {{ $year }}</option>
-                                @endfor
-                            </select>
-                        </div>
-                        <div class="col-sm-3">
-                            <button id="cetak" type="button" class="btn btn-primary btn-sm" data-url="">
-                                <i class="fa fa-print"></i> Cetak
-                            </button>
-                        </div>
+        </div>
+        <div class="card card-outline card-primary">
+            <div class="card-header">
+                <div class="row">
+                    <x-filter-tahun />
+                    <div class="col-auto">
+                        <x-print-button :print-url="url('data-presisi/pangan/cetak')" table-id="table-pangan" :filter="[]" />
                     </div>
+                    <x-excel-download-button :download-url="config('app.databaseGabunganUrl') . '/api/v1/data-presisi/pangan/rtm/download'" table-id="table-pangan" filename="data_presisi_pangan" />
                 </div>
-                <div class="card-body">
-                    <div class="table-responsive">
-                        <table class="table table-striped" id="table-pangan">
-                            <thead>
-                                <tr>
-                                    <th>Aksi</th>
-                                    <th>#</th>
-                                    <th>NIK</th>
-                                    <th>Nama Kepala Keluarga</th>
-                                    <th>Jumlah Anggota RTM</th>
-                                    <th>Jenis Lahan</th>
-                                    <th>Luas Lahan</th>
-                                </tr>
-                            </thead>
-                            <tbody></tbody>
-                        </table>
-                    </div>
+            </div>
+            <div class="card-body">
+                <div class="table-responsive">
+                    <table class="table table-striped" id="table-pangan">
+                        <thead>
+                            <tr>
+                                <th>Aksi</th>
+                                <th>#</th>
+                                <th>NIK</th>
+                                <th>Nama Kepala Keluarga</th>
+                                <th>Jumlah Anggota RTM</th>
+                                <th>Jenis Lahan</th>
+                                <th>Luas Lahan</th>
+                            </tr>
+                        </thead>
+                        <tbody></tbody>
+                    </table>
                 </div>
             </div>
         </div>
     </div>
+</div>
 @endsection
 
 @section('js')
-    @include('data_pokok.data_presisi.pangan.chart')
-    <script nonce="{{ csp_nonce() }}">
-        let data_grafik = [];
-        document.addEventListener("DOMContentLoaded", function(event) {
-            const header = @include('layouts.components.header_bearer_api_gabungan');
-            var url = new URL("{{ config('app.databaseGabunganUrl') . '/api/v1/data-presisi/pangan/rtm' }}");
-            url.searchParams.set("kode_kabupaten", "{{ session('kabupaten.kode_kabupaten') ?? '' }}");
-            url.searchParams.set("kode_kecamatan", "{{ session('kecamatan.kode_kecamatan') ?? '' }}");
-            url.searchParams.set("kode_desa", "{{ session('desa.id') ?? '' }}");
-            var dtks = $('#table-pangan').DataTable({
-                processing: true,
-                serverSide: true,
-                autoWidth: false,
-                ordering: false,
-                searchPanes: {
-                    viewTotal: false,
-                    columns: [0]
+@include('data_pokok.data_presisi.pangan.chart')
+<script nonce="{{ csp_nonce() }}">
+    let data_grafik = [];
+    document.addEventListener("DOMContentLoaded", function(event) {
+        const header = @include('layouts.components.header_bearer_api_gabungan');
+        var url = new URL("{{ config('app.databaseGabunganUrl') . '/api/v1/data-presisi/pangan/rtm' }}");
+        url.searchParams.set("kode_kabupaten", "{{ session('kabupaten.kode_kabupaten') ?? '' }}");
+        url.searchParams.set("kode_kecamatan", "{{ session('kecamatan.kode_kecamatan') ?? '' }}");
+        url.searchParams.set("kode_desa", "{{ session('desa.id') ?? '' }}");
+        var dtks = $('#table-pangan').DataTable({
+            processing: true,
+            serverSide: true,
+            autoWidth: false,
+            ordering: false,
+            searchPanes: {
+                viewTotal: false,
+                columns: [0]
+            },
+            ajax: {
+                url: url.href,
+                headers: header,
+                method: 'get',
+                data: function(row) {
+                    return {
+                        "page[size]": row.length,
+                        "page[number]": (row.start / row.length) + 1,
+                        "filter[search]": row.search.value,
+                        "filter[tahun]": $('#filter-tahun').val(),
+                    };
                 },
-                ajax: {
-                    url: url.href,
-                    headers: header,
-                    method: 'get',
-                    data: function(row) {
-                        return {
-                            "page[size]": row.length,
-                            "page[number]": (row.start / row.length) + 1,
-                            "filter[search]": row.search.value,
-                            "kode_kecamatan": "{{ session('kecamatan.kode_kecamatan') ?? '' }}",
-                            "config_desa": "{{ session('desa.id') ?? '' }}",
-                            "filter[tahun]": $('#filter-tahun').val(),
-                        };
-                    },
-                    dataSrc: function(json) {
-                        if (json.data.length > 0) {
-                            json.recordsTotal = json.meta.pagination.total
-                            json.recordsFiltered = json.meta.pagination.total
-                            data_grafik = [];
-                            json.data.forEach(function(item, index) {
-                                data_grafik.push(item.attributes)
-                            })
-                            grafikPie()
-                            return json.data;
-                        }
-                        return false;
-                    },
+                dataSrc: function(json) {
+                    // Set default values untuk recordsTotal dan recordsFiltered
+                    json.recordsTotal = json.meta?.pagination?.total || 0;
+                    json.recordsFiltered = json.meta?.pagination?.total || 0;
+                    if (json.data.length > 0) {
+                        data_grafik = [];
+                        json.data.forEach(function(item, index) {
+                            data_grafik.push(item.attributes)
+                        })
+                        grafikPie()
+                        return json.data;
+                    }
+                    return false;
                 },
-                columnDefs: [{
-                    targets: '_all',
-                    className: 'text-nowrap',
-                }, ],
-                columns: [{
-                        data: function(data) {
-                            let d = data.attributes
-                            let obj = {
-                                'rtm_id': data.id,
-                                'no_kartu_rumah': d.no_kk,
-                                'nama_kepala_keluarga': d.kepala_keluarga,
-                                'alamat': d.alamat,
-                                'jumlah_anggota': d.jumlah_anggota,
-                                'jumlah_kk': d.jumlah_kk,
-                            }
-                            let jsonData = encodeURIComponent(JSON.stringify(obj));
-                            const _url =
-                                "{{ route('data-pokok.data-presisi-pangan.detail', ['data' => '__DATA__']) }}"
-                                .replace('__DATA__', jsonData)
-                            return `<a href="${_url}" title="Detail" data-button="Detail">
+            },
+            columnDefs: [{
+                targets: '_all',
+                className: 'text-nowrap',
+            }, ],
+            columns: [{
+                    data: function(data) {
+                        let d = data.attributes
+                        let obj = {
+                            'rtm_id': data.id,
+                            'no_kartu_rumah': d.no_kk,
+                            'nama_kepala_keluarga': d.kepala_keluarga,
+                            'alamat': d.alamat,
+                            'jumlah_anggota': d.jumlah_anggota,
+                            'jumlah_kk': d.jumlah_kk,
+                        }
+                        let jsonData = encodeURIComponent(JSON.stringify(obj));
+                        const _url =
+                            "{{ route('data-pokok.data-presisi-pangan.detail', ['data' => '__DATA__']) }}"
+                            .replace('__DATA__', jsonData)
+                        return `<a href="${_url}" title="Detail" data-button="Detail">
                                 <button type="button" class="btn btn-info btn-sm">Detail</button>
                             </a>`;
-                        },
-                        searchable: false,
-                        orderable: false
-                    },
-                    {
-                        "className": 'details-control',
-                        "orderable": false,
-                        "data": null,
-                        "defaultContent": ''
-                    },
-                    {
-                        data: "attributes.nik",
-                        orderable: false,
-                    },
-                    {
-                        data: "attributes.kepala_keluarga",
-                    },
-                    {
-                        data: "attributes.jumlah_anggota",
-                    },
-                    {
-                        data: "attributes.jenis_lahan",
-                        render: (data) => data || 'N/A',
-                    },
-                    {
-                        data: "attributes.luas_lahan",
-                        render: (data) => data || 'N/A',
                     },
+                    searchable: false,
+                    orderable: false
+                },
+                {
+                    "className": 'details-control',
+                    "orderable": false,
+                    "data": null,
+                    "defaultContent": ''
+                },
+                {
+                    data: "attributes.nik",
+                    orderable: false,
+                },
+                {
+                    data: "attributes.kepala_keluarga",
+                },
+                {
+                    data: "attributes.jumlah_anggota",
+                },
+                {
+                    data: "attributes.jenis_lahan",
+                    render: (data) => data || 'N/A',
+                },
+                {
+                    data: "attributes.luas_lahan",
+                    render: (data) => data || 'N/A',
+                },
 
-                ],
-            })
-            // Add event listener for opening and closing details
-            dtks.on('click', 'td.details-control', function() {
-                let tr = $(this).closest('tr');
-                let row = dtks.row(tr);
-                if (row.child.isShown()) {
-                    // This row is already open - close it
-                    row.child.hide();
-                    tr.removeClass('shown');
-                } else {
-                    // Open this row
-                    row.child(format(row.data())).show();
-                    tr.addClass('shown');
-                }
-            });
+            ],
+        })
+        // Add event listener for opening and closing details
+        dtks.on('click', 'td.details-control', function() {
+            let tr = $(this).closest('tr');
+            let row = dtks.row(tr);
+            if (row.child.isShown()) {
+                // This row is already open - close it
+                row.child.hide();
+                tr.removeClass('shown');
+            } else {
+                // Open this row
+                row.child(format(row.data())).show();
+                tr.addClass('shown');
+            }
+        });
 
-            function format(data) {
-                return `
+        function format(data) {
+            return `
                     <table class="table table-striped">
                         <tr>
                             <td><strong>Luas tanam:</strong></td>
@@ -262,20 +249,13 @@ function format(data) {
                         </tr>
                     </table>
                 `;
-            }
-            // Event listener for year filter change
-            $('#filter-tahun').on('change', function() {
-                dtks.ajax.reload();
-                data_grafik = [];
-                grafikPie();
-            });
-
-            $('#cetak').on('click', function() {
-                let baseUrl = "{{ route('data-pokok.data-presisi-pangan.cetak') }}";
-                let params = dtks.ajax.params(); // Get DataTables params
-                let queryString = new URLSearchParams(params).toString(); // Convert params to query string
-                window.open(`${baseUrl}?${queryString}`, '_blank'); // Open the URL with appended query
-            });
-        })
-    </script>
-@endsection
+        }
+        // Event listener for year filter change
+        $('#filter-tahun').on('change', function() {
+            dtks.ajax.reload();
+            data_grafik = [];
+            grafikPie();
+        });
+    })
+</script>
+@endsection
\ No newline at end of file
diff --git a/resources/views/data_pokok/data_presisi/pendidikan/index.blade.php b/resources/views/data_pokok/data_presisi/pendidikan/index.blade.php
index 21d22ba12..b623bc6ff 100644
--- a/resources/views/data_pokok/data_presisi/pendidikan/index.blade.php
+++ b/resources/views/data_pokok/data_presisi/pendidikan/index.blade.php
@@ -7,7 +7,7 @@
 @stop
 
 @push('css')
-    <style>
+   <style nonce="{{ csp_nonce() }}" >
         .details {
             margin-left: 20px;
         }
@@ -28,22 +28,11 @@
             <div class="card card-outline card-primary">
                 <div class="card-header">
                     <div class="row">
-                        <div class="col-sm-2">
-                            <select id="filter-tahun" class="form-control form-control-sm">
-                                @php
-                                    $currentYear = date('Y');
-                                    $startYear = 2020;
-                                @endphp
-                                @for($year = $currentYear; $year >= $startYear; $year--)
-                                    <option value="{{ $year }}" {{ $year == $currentYear ? 'selected' : '' }}>{{ $year }}</option>
-                                @endfor
-                            </select>
-                        </div>
-                        <div class="col-sm-3">
-                            <button id="cetak" type="button" class="btn btn-primary btn-sm" data-url="">
-                                <i class="fa fa-print"></i> Cetak
-                            </button>
+                        <x-filter-tahun />
+                        <div class="col-auto">
+                            <x-print-button :print-url="url('data-presisi/pendidikan/cetak')" table-id="table-pendidikan" :filter="[]" />
                         </div>
+                        <x-excel-download-button :download-url="config('app.databaseGabunganUrl') . '/api/v1/data-presisi/pendidikan/rtm/download'" table-id="table-pendidikan" filename="data_presisi_pendidikan" />
                     </div>
                 </div>
                 <div class="card-body">
@@ -228,12 +217,6 @@ function format(data) {
                 grafikPie();
             });
             
-            $('#cetak').on('click', function() {
-                let baseUrl = "{{ route('data-pokok.data-presisi-pendidikan.cetak') }}";
-                let params = dtks.ajax.params(); // Get DataTables params
-                let queryString = new URLSearchParams(params).toString(); // Convert params to query string
-                window.open(`${baseUrl}?${queryString}`, '_blank'); // Open the URL with appended query
-            });
-        })
+        });
     </script>
 @endsection
\ No newline at end of file
diff --git a/resources/views/data_pokok/data_presisi/seni_budaya/index.blade.php b/resources/views/data_pokok/data_presisi/seni_budaya/index.blade.php
index 34153be01..be4037a5c 100644
--- a/resources/views/data_pokok/data_presisi/seni_budaya/index.blade.php
+++ b/resources/views/data_pokok/data_presisi/seni_budaya/index.blade.php
@@ -7,7 +7,7 @@
 @stop
 
 @push('css')
-    <style>
+   <style nonce="{{ csp_nonce() }}" >
         .details {
             margin-left: 20px;
         }
@@ -28,27 +28,17 @@
             <div class="card card-outline card-primary">
                 <div class="card-header">
                     <div class="row">
-                        <div class="col-sm-2">
-                            <select id="filter-tahun" class="form-control form-control-sm">
-                                @php
-                                    $currentYear = date('Y');
-                                    $startYear = 2020;
-                                @endphp
-                                @for($year = $currentYear; $year >= $startYear; $year--)
-                                    <option value="{{ $year }}" {{ $year == $currentYear ? 'selected' : '' }}>{{ $year }}</option>
-                                @endfor
-                            </select>
-                        </div>
-                        <div class="col-sm-3">
-                            <button id="cetak" type="button" class="btn btn-primary btn-sm" data-url="">
-                                <i class="fa fa-print"></i> Cetak
-                            </button>
+                        <x-filter-tahun />
+                        <div class="col-auto">
+                            <x-print-button :print-url="url('data-presisi/seni-budaya/cetak')" table-id="table-seni-budaya" :filter="[]" />
                         </div>
+                        <x-excel-download-button :download-url="config('app.databaseGabunganUrl') . '/api/v1/data-presisi/seni-budaya/rtm/download'" table-id="table-seni-budaya" filename="data_presisi_seni-budaya" />
+
                     </div>
                 </div>
                 <div class="card-body">
                     <div class="table-responsive">
-                        <table class="table table-striped" id="table-kesehatan">
+                        <table class="table table-striped" id="table-seni-budaya">
                             <thead>
                                 <tr>
                                     <th>Aksi</th>
@@ -80,7 +70,7 @@
             url.searchParams.set("kode_kecamatan", "{{ session('kecamatan.kode_kecamatan') ?? '' }}");
             url.searchParams.set("kode_desa", "{{ session('desa.id') ?? '' }}");
 
-            var dtks = $('#table-kesehatan').DataTable({
+            var dtks = $('#table-seni-budaya').DataTable({
                 processing: true,
                 serverSide: true,
                 autoWidth: false,
@@ -225,13 +215,6 @@ function format(data) {
                 data_grafik = [];
                 grafikPie();
             });
-
-            $('#cetak').on('click', function() {
-                let baseUrl = "{{ route('data-pokok.data-presisi-seni-budaya.cetak') }}";
-                let params = dtks.ajax.params(); // Get DataTables params
-                let queryString = new URLSearchParams(params).toString(); // Convert params to query string
-                window.open(`${baseUrl}?${queryString}`, '_blank'); // Open the URL with appended query
-            });
         });
     </script>
 @endsection
diff --git a/resources/views/data_pokok/infrastruktur/cetak.blade.php b/resources/views/data_pokok/infrastruktur/cetak.blade.php
new file mode 100644
index 000000000..4512af3be
--- /dev/null
+++ b/resources/views/data_pokok/infrastruktur/cetak.blade.php
@@ -0,0 +1,59 @@
+@extends('layouts.cetak.index')
+
+@section('title', 'Data Infrastruktur')
+
+@push('css')
+<style nonce="{{ csp_nonce() }}" type="text/css" media="print">
+    @page {
+        size: landscape;
+    }
+</style>
+@endpush
+
+@section('content')
+@include('partials.breadcrumbs')
+<table class="border thick" id="infrastruktur">
+    <thead>
+        <tr class="border thick">
+            <th>KATEGORI</th>
+            <th>JENIS SARANA/PRASARANA</th>
+            <th>KONDISI BAIK</th>
+            <th>KONDISI RUSAK</th>
+            <th>JUMLAH</th>
+            <th>SATUAN</th>
+        </tr>
+    </thead>
+    <tbody></tbody>
+</table>
+@stop
+
+@push('scripts')
+<script nonce="{{ csp_nonce() }}">
+    document.addEventListener("DOMContentLoaded", function(event) {
+        var str = `{{ $filter }}`
+        var filter = str.replace(/&amp;/g, '&').replace(/undefined/g, '')
+
+        const header = @include('layouts.components.header_bearer_api_gabungan');
+        $.ajax({
+            url: `{{ config('app.databaseGabunganUrl') . '/api/v1/infrastruktur' }}?${filter}`,
+            headers: header,
+            method: 'get',
+            success: function(json) {                
+                json.forEach(function(item) {
+                    var row = `
+                            <tr>
+                                <td>${item.kategori}</td>
+                                <td>${item.jenis_sarana}</td>
+                                <td>${item.kondisi_baik ?? '-'}</td>
+                                <td>${item.kondisi_buruk ?? '-'}</td>
+                                <td>${item.jumlah ?? '-'}</td>
+                                <td>${item.satuan}</td>
+                            </tr>
+                            `
+                    $('#infrastruktur tbody').append(row)                    
+                })
+            }
+        })
+    });
+</script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/data_pokok/infrastruktur/data.blade.php b/resources/views/data_pokok/infrastruktur/data.blade.php
deleted file mode 100644
index d9c2fbd4f..000000000
--- a/resources/views/data_pokok/infrastruktur/data.blade.php
+++ /dev/null
@@ -1,44 +0,0 @@
-<script nonce="{{ csp_nonce() }}">
-document.addEventListener("DOMContentLoaded", function(event) {
-
-    const header = @include('layouts.components.header_bearer_api_gabungan');
-    var url = new URL("{{ config('app.databaseGabunganUrl').'/api/v1/infrastruktur' }}");
-   // Fungsi untuk mengambil data Komoditas dari API
-   fetch(url, {
-    method: 'GET',
-    headers: header
-   })
-    .then(response => response.json())
-    .then(data => {
-        // Menampilkan data Komoditas di dalam div #komoditas-container
-        const komoditasTable = document.createElement('table');
-        komoditasTable.classList.add('table', 'table-bordered');
-        komoditasTable.innerHTML = `
-            <thead>
-                <tr>
-                    <th>Kategori</th>
-                    <th>Jenis Sarana/Prasarana</th>
-                    <th>Kondisi Baik</th>
-                    <th>Kondisi Rusak</th>
-                    <th>Jumlah</th>
-                    <th>Satuan</th>
-                </tr>
-            </thead>
-            <tbody>
-                ${data.map(item => `
-                    <tr>
-                        <td>${item.kategori}</td>
-                        <td>${item.jenis_sarana}</td>
-                        <td>${item.kondisi_baik}</td>
-                        <td>${item.kondisi_rusak}</td>
-                        <td>${item.jumlah}</td>
-                        <td>${item.satuan}</td>
-                    </tr>
-                `).join('')}
-            </tbody>
-        `;
-        document.getElementById('infrastruktur').appendChild(komoditasTable);
-    });
-});
-
-</script>
\ No newline at end of file
diff --git a/resources/views/data_pokok/infrastruktur/grafik.blade.php b/resources/views/data_pokok/infrastruktur/grafik.blade.php
index bf879c84b..9d686f2c3 100644
--- a/resources/views/data_pokok/infrastruktur/grafik.blade.php
+++ b/resources/views/data_pokok/infrastruktur/grafik.blade.php
@@ -1,65 +1,87 @@
-<script>
-    const headers = @include('layouts.components.header_bearer_api_gabungan');
-    var url = new URL("{{ config('app.databaseGabunganUrl').'/api/v1/infrastruktur' }}");
-    // Ambil data dari API
-    fetch(url, {
-        method: 'GET',
-        headers: headers
-    }) // Ganti dengan rute API Anda
-        .then(response => response.json())
-        .then(data => {
-            // Ambil data kondisi baik dan buruk
-            const jalanBaik = data.find(item => item.jenis_sarana === 'Jalan Raya Aspal')?.kondisi_baik || 0;
-            const jalanBuruk = data.find(item => item.jenis_sarana === 'Jalan Raya Aspal')?.kondisi_rusak || 0;
+<script nonce="{{ csp_nonce() }}">
+    function grafik(chartData) {
 
-            const jembatanBaik = data.find(item => item.jenis_sarana === 'Jembatan Besi Beton')?.kondisi_baik || 0;
-            const jembatanBuruk = data.find(item => item.jenis_sarana === 'Jembatan Besi Beton')?.kondisi_rusak || 0;
+        // Data untuk bar chart
+        tampilKondisiChart(chartData);
+        tampilkanSanitasiChart(chartData);
+        console.log(chartData)
+    }
 
-
-            // Konfigurasi Chart.js
-            const ctx = document.getElementById('kondisiChart').getContext('2d');
-            new Chart(ctx, {
-                type: 'bar',
-                data: {
-                    labels: ['Jalan Raya Aspal', 'Jembatan Besi Beton'],
-                    datasets: [
-                        {
-                            label: 'Kondisi Baik',
-                            data: [jalanBaik, jembatanBaik],
-                            backgroundColor: '#4CAF50', // Hijau untuk kondisi baik
-                            borderColor: '#388E3C',
-                        },
-                        {
-                            label: 'Kondisi Buruk',
-                            data: [jalanBuruk, jembatanBuruk],
-                            backgroundColor: '#F44336', // Merah untuk kondisi buruk
-                            borderColor: '#D32F2F',
+    function tampilKondisiChart(chartData, chartOptions = {}) {
+        // Konfigurasi Chart.js
+        const ctx = document.getElementById('kondisiChart').getContext('2d');
+        new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: ['Jalan Raya Aspal', 'Jembatan Besi Beton'],
+                datasets: [{
+                        label: 'Kondisi Baik',
+                        data: [chartData.jalanBaik, chartData.jembatanBaik],
+                        backgroundColor: '#4CAF50', // Hijau untuk kondisi baik
+                        borderColor: '#388E3C',
+                    },
+                    {
+                        label: 'Kondisi Buruk',
+                        data: [chartData.jalanBuruk, chartData.jembatanBuruk],
+                        backgroundColor: '#F44336', // Merah untuk kondisi buruk
+                        borderColor: '#D32F2F',
+                    }
+                ]
+            },
+            options: {
+                responsive: true,
+                scales: {
+                    x: {
+                        grid: {
+                            display: false,
+                            drawBorder: true
                         }
-                    ]
-                },
-                options: {
-                    responsive: true,
-                    scales: {
-                        x: {
-                            grid: {
-                                display: false,
-                                drawBorder: true
-                            }
-                        },
-                        y: {
-                            beginAtZero: true,
-                            grid: {
-                                drawOnChartArea: true
-                            }
+                    },
+                    y: {
+                        beginAtZero: true,
+                        grid: {
+                            drawOnChartArea: true
                         }
+                    }
+                },
+                plugins: {
+                    legend: {
+                        position: 'top'
+                    }
+                }
+            }
+        });
+    }
+
+    function tampilkanSanitasiChart(chartData, chartOptions = {}) {
+        const ctx = document.getElementById('sanitasiChart').getContext('2d');
+        new Chart(ctx, {
+            type: 'pie',
+            data: {
+                labels: ['Sumur Resapan', 'MCK Umum'],
+                datasets: [{
+                    data: [chartData.sumurResapan, chartData.mckUmum],
+                    backgroundColor: ['#4caf50', '#ffc107'], // Warna untuk pie chart
+                    borderWidth: 1
+                }]
+            },
+            options: {
+                responsive: true,
+                plugins: {
+                    legend: {
+                        position: 'bottom',
                     },
-                    plugins: {
-                        legend: {
-                            position: 'top'
+                    tooltip: {
+                        callbacks: {
+                            label: function(context) {
+                                let label = context.label || '';
+                                let value = context.raw || 0;
+                                return `${label}: ${value} Unit`;
+                            }
                         }
                     }
                 }
-            });
-        })
-        .catch(error => console.error('Error fetching data:', error));
+            }
+        });
+    }
 </script>
\ No newline at end of file
diff --git a/resources/views/data_pokok/infrastruktur/index.blade.php b/resources/views/data_pokok/infrastruktur/index.blade.php
index a58648c4c..d1256cfe9 100644
--- a/resources/views/data_pokok/infrastruktur/index.blade.php
+++ b/resources/views/data_pokok/infrastruktur/index.blade.php
@@ -5,52 +5,162 @@
 @section('title', 'Data Infrastruktur')
 
 @section('content_header')
-    <h1>{{ $title }}</h1>
+<h1>{{ $title }}</h1>
 @stop
 
 @section('content')
-    @include('partials.breadcrumbs')
-    <div class="row">
-        <div class="col-lg-7">
-            <div class="card">
-                <div class="card-header">Statistik Kondisi Transportasi</div>
-                <div class="card-body">
-                    <div class="chart" id="grafik">
-                        <canvas id="kondisiChart"></canvas>
-                    </div>
+@include('partials.breadcrumbs')
+<div class="row">
+    <div class="col-lg-7">
+        <div class="card">
+            <div class="card-header">Statistik Kondisi Transportasi</div>
+            <div class="card-body">
+                <div class="chart" id="grafik">
+                    <canvas id="kondisiChart"></canvas>
                 </div>
             </div>
         </div>
-        <div class="col-lg-5">
-            <div class="card">
-                <div class="card-header">Statistik Sanitasi</div>
-                <div class="card-body">
-                    <div class="chart">
-                        <canvas id="sanitasiChart"></canvas>
-                    </div><hr>
+    </div>
+    <div class="col-lg-5">
+        <div class="card">
+            <div class="card-header">Statistik Sanitasi</div>
+            <div class="card-body">
+                <div class="chart">
+                    <canvas id="sanitasiChart"></canvas>
                 </div>
+                <hr>
             </div>
         </div>
     </div>
-    <div class="row">
-        <div class="col-lg-12">
-            <div class="card card-outline card-primary">
-                <div class="card-header">
-                    <div class="float-left">Data Sarana dan Prasarana</div>
+</div>
+<div class="row">
+    <div class="col-lg-12">
+        <div class="card card-outline card-primary">
+            <div class="card-header">
+                <div class="float-left">Data Sarana dan Prasarana</div>
+            </div>
+            <div class="card-body">
+                <div class="row mb-2">
+                    <x-filter-tahun />
+                    <div class="col-auto">
+                        <x-print-button :print-url="url('data-pokok/infrastruktur/cetak')" table-id="infrastruktur" :filter="[]" />
+                    </div>
+                    <x-excel-download-button :download-url="config('app.databaseGabunganUrl') . '/api/v1/infrastruktur/download'" table-id="infrastruktur" filename="data_infrastruktur" />
                 </div>
-                <div class="card-body">
-                    <div id="infrastruktur"></div>
+                <div class="table-responsive">
+                    <table class="table table-striped" id="infrastruktur">
+                        <thead>
+                            <tr>
+                                <th>Kategori</th>
+                                <th>Jenis Sarana/Prasarana</th>
+                                <th>Kondisi Baik</th>
+                                <th>Kondisi Rusak</th>
+                                <th>Jumlah</th>
+                                <th>Satuan</th>
+                            </tr>
+                        </thead>
+                        <tbody></tbody>
+                    </table>
                 </div>
             </div>
         </div>
     </div>
+</div>
 @endsection
 
-@section('js')
 
-@include('data_pokok.infrastruktur.data')
-@include('data_pokok.infrastruktur.pie')
+@section('js')
 @include('data_pokok.infrastruktur.grafik')
+<script nonce="{{ csp_nonce() }}">
+    let dataGrafik = [];
+    document.addEventListener("DOMContentLoaded", function(event) {
+        const header = @include('layouts.components.header_bearer_api_gabungan');
+        var url = new URL("{{ config('app.databaseGabunganUrl') . '/api/v1/infrastruktur' }}");
+        url.searchParams.set("kode_kabupaten", "{{ session('kabupaten.kode_kabupaten') ?? '' }}");
+        url.searchParams.set("kode_kecamatan", "{{ session('kecamatan.kode_kecamatan') ?? '' }}");
+        url.searchParams.set("config_desa", "{{ session('desa.id') ?? '' }}");
+        var infrastruktur = $('#infrastruktur').DataTable({
+            processing: true,
+            serverSide: true,
+            autoWidth: false,
+            ordering: false,
+            searching: false,
+            paging: false,
+            info: false,
+            searchPanes: {
+                viewTotal: false,
+                columns: [0]
+            },
+            ajax: {
+                url: url.href,
+                headers: header,
+                method: 'get',
+                data: function(row) {
+                    return {
+                        "page[size]": row.length,
+                        "page[number]": (row.start / row.length) + 1,
+                        "filter[kode_desa]": $("#kode_desa").val(),
+                        "tahun": $('#filter-tahun').val()
+                    };
+                },
+                dataSrc: function(json) {
+                    if (json.length > 0) {
+                        const data = json || [];
+                        const findVal = (name, field = 'jumlah') => (data.find(i => i.jenis_sarana === name)?.[field]) ?? 0;
+
+                        const jalanBaik = findVal('Jalan Raya Aspal', 'kondisi_baik');
+                        const jalanBuruk = findVal('Jalan Raya Aspal', 'kondisi_rusak');
+                        const jembatanBaik = findVal('Jembatan Besi Beton', 'kondisi_baik');
+                        const jembatanBuruk = findVal('Jembatan Besi Beton', 'kondisi_rusak');
+                        const sumurResapan = findVal('Sumur Resapan', 'jumlah');
+                        const mckUmum = findVal('MCK Umum', 'jumlah');
 
+                        dataGrafik = {jalanBaik, jalanBuruk, jembatanBaik, jembatanBuruk, sumurResapan, mckUmum};
+                        grafik(dataGrafik);                        
+                    }
+                    return json;
+                },
+            },
+            columnDefs: [{
+                targets: '_all',
+                className: 'text-nowrap',
+            }, ],
+            columns: [{
+                    data: "kategori",
+                    name: "kategori",
+                    orderable: false,
+                    defaultContent: '-'
+                },
+                {
+                    data: "jenis_sarana",
+                    name: "jenis_sarana",
+                },
+                {
+                    data: "kondisi_baik",
+                    name: "kondisi_baik",
+                    orderable: false
+                },
+                {
+                    data: "kondisi_rusak",
+                    name: "kondisi_rusak",
+                    orderable: false
+                },
+                {
+                    data: "jumlah",
+                    name: "jumlah",
+                    orderable: false
+                },
+                {
+                    data: "satuan",
+                    name: "satuan",
+                    orderable: false
+                },
+            ],
+        })
+        $('#filter-tahun').change(function() {
+            infrastruktur.draw()
+        })
+    })
+</script>
 @endsection
-@include('data_pokok.infrastruktur.style')
+@include('data_pokok.infrastruktur.style')
\ No newline at end of file
diff --git a/resources/views/data_pokok/infrastruktur/pie.blade.php b/resources/views/data_pokok/infrastruktur/pie.blade.php
deleted file mode 100644
index 00c89bd46..000000000
--- a/resources/views/data_pokok/infrastruktur/pie.blade.php
+++ /dev/null
@@ -1,47 +0,0 @@
-<script>
-    const header = @include('layouts.components.header_bearer_api_gabungan');
-    var url = new URL("{{ config('app.databaseGabunganUrl').'/api/v1/infrastruktur' }}");
-    // Ambil data dari API
-    fetch(url, {
-        method: 'GET',
-        headers: header
-    }) // Ganti route dengan rute API Anda
-        .then(response => response.json())
-        .then(data => {
-            // Cari data Sanitasi (MCK Umum dan Sumur Resapan)
-            const sumurResapan = data.find(item => item.jenis_sarana === 'Sumur Resapan')?.jumlah || 0;
-            const mckUmum = data.find(item => item.jenis_sarana === 'MCK Umum')?.jumlah || 0;
-
-            // Buat pie chart menggunakan Chart.js
-            const ctx = document.getElementById('sanitasiChart').getContext('2d');
-            new Chart(ctx, {
-                type: 'pie',
-                data: {
-                    labels: ['Sumur Resapan', 'MCK Umum'],
-                    datasets: [{
-                        data: [sumurResapan, mckUmum],
-                        backgroundColor: ['#4caf50', '#ffc107'], // Warna untuk pie chart
-                        borderWidth: 1
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    plugins: {
-                        legend: {
-                            position: 'bottom',
-                        },
-                        tooltip: {
-                            callbacks: {
-                                label: function(context) {
-                                    let label = context.label || '';
-                                    let value = context.raw || 0;
-                                    return `${label}: ${value} Unit`;
-                                }
-                            }
-                        }
-                    }
-                }
-            });
-        })
-        .catch(error => console.error('Error fetching data:', error));
-</script>
\ No newline at end of file
diff --git a/resources/views/data_pokok/jaminan_sosial/index.blade.php b/resources/views/data_pokok/jaminan_sosial/index.blade.php
index 1c9ec21fc..01f871279 100644
--- a/resources/views/data_pokok/jaminan_sosial/index.blade.php
+++ b/resources/views/data_pokok/jaminan_sosial/index.blade.php
@@ -56,22 +56,15 @@
             <div class="card card-outline card-primary">
                 <div class="card-header">
                     <div class="row">
-                        <div class="col-sm-2">
-                            <select id="filter-tahun" class="form-control form-control-sm">
-                                @php
-                                    $currentYear = date('Y');
-                                    $startYear = 2020;
-                                @endphp
-                                @for($year = $currentYear; $year >= $startYear; $year--)
-                                    <option value="{{ $year }}" {{ $year == $currentYear ? 'selected' : '' }}>{{ $year }}</option>
-                                @endfor
-                            </select>
-                        </div>
-                        <div class="col-sm-3">
-                            <button id="cetak" type="button" class="btn btn-primary btn-sm" data-url="">
-                                <i class="fa fa-print"></i> Cetak
-                            </button>
+                        <x-filter-tahun />
+                        <div class="col-auto">
+                            <x-print-button :print-url="route('jaminan-sosial-cetak')" table-id="jaminanSosial" :filter="[]" />
                         </div>
+                        <x-excel-download-button :download-url="config('app.databaseGabunganUrl') . '/api/v1/data-presisi/jaminan-sosial/rtm/download'" table-id="jaminanSosial" filename="data_presisi_jaminan-sosial" :additional-params="[
+                                ['key' => 'kode_kabupaten', 'value' => session('kabupaten.kode_kabupaten') ?? ''],
+                                ['key' => 'kode_kecamatan', 'value' => session('kecamatan.kode_kecamatan') ?? ''],
+                                ['key' => 'config_desa', 'value' => session('desa.id') ?? ''],
+                            ]"/>
                     </div>
                 </div>
                 <div class="card-body">
@@ -128,12 +121,6 @@
                             "page[number]": (row.start / row.length) + 1,
                             'include': 'anggota,penduduk,rtm,keluarga',
                             "filter[search]": row.search.value,
-                            "filter[kepala_rtm]": true,
-                            // "sort": (row.order[0]?.dir === "asc" ? "" : "-") + row.columns[row.order[0]
-                            //         ?.column]
-                            //     ?.name,
-                            "filter[kode_desa]": $("#kode_desa").val(),
-                            "filter[tahun]": $("#filter-tahun").val(),
                         };
                     },
                     dataSrc: function(json) {
@@ -314,12 +301,6 @@ function format(data) {
                     </table>
                 `;
             }
-            $('#cetak').on('click', function() {
-                let baseUrl = "{{ route('jaminan-sosial-cetak') }}";
-                let params = jaminanSosial.ajax.params(); // Get DataTables params
-                let queryString = new URLSearchParams(params).toString(); // Convert params to query string
-                window.open(`${baseUrl}?${queryString}`, '_blank'); // Open the URL with appended query
-            });
         })
     </script>
 @endsection
diff --git a/resources/views/data_pokok/pariwisata/cetak.blade.php b/resources/views/data_pokok/pariwisata/cetak.blade.php
new file mode 100644
index 000000000..88d4c0b8a
--- /dev/null
+++ b/resources/views/data_pokok/pariwisata/cetak.blade.php
@@ -0,0 +1,61 @@
+@extends('layouts.cetak.index')
+
+@section('title', 'Data pariwisata')
+
+@push('css')
+<style nonce="{{ csp_nonce() }}" type="text/css" media="print">
+    @page {
+        size: landscape;
+    }
+</style>
+@endpush
+
+@section('content')
+@include('partials.breadcrumbs')
+<table class="border thick" id="pariwisata">
+    <thead>
+        <tr class="border thick">            
+            <th>{{ config('app.sebutanDesa') }}</th>
+            <th>Jenis Hiburan</th>
+            <th>Jumlah Penginapan</th>
+            <th>Lokasi/Tempat/Area Wisata</th>
+            <th>Keberadaan</th>
+            <th>Luas (Ha)</th>
+            <th>Tingkat Pemanfaatan</th>
+        </tr>
+    </thead>
+    <tbody></tbody>
+</table>
+@stop
+
+@push('scripts')
+<script nonce="{{ csp_nonce() }}">
+    document.addEventListener("DOMContentLoaded", function(event) {
+        var str = `{{ $filter }}`
+        var filter = str.replace(/&amp;/g, '&').replace(/undefined/g, '')
+
+        const header = @include('layouts.components.header_bearer_api_gabungan');
+        $.ajax({
+            url: `{{ config('app.databaseGabunganUrl') . '/api/v1/pariwisata' }}?${filter}`,
+            headers: header,
+            method: 'get',
+            success: function(json) {
+                json.data.forEach(function(item) {
+                    var row = `
+                            <tr>                            
+                                <td>${item.attributes.nama_desa}</td>
+                                <td>${item.attributes.jenis_hiburan}</td>
+                                <td>${item.attributes.jumlah_penginapan}</td>
+                                <td>${item.attributes.lokasi_tempat_area_wisata}</td>
+                                <td>${item.attributes.keberadaan}</td>
+                                <td>${item.attributes.luas}</td>
+                                <td>${item.attributes.tingkat_pemanfaatan}</td>                                
+                            </tr>
+                            `
+                    $('#pariwisata tbody').append(row)
+                })
+            }
+        })
+    });
+</script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/data_pokok/pariwisata/chart.blade.php b/resources/views/data_pokok/pariwisata/chart.blade.php
index d819f0524..58df6826a 100644
--- a/resources/views/data_pokok/pariwisata/chart.blade.php
+++ b/resources/views/data_pokok/pariwisata/chart.blade.php
@@ -1,4 +1,18 @@
 <script nonce="{{ csp_nonce() }}"  >
+    function randColorRGB() {
+        const r = Math.floor(Math.random() * 200) + 55;
+        const g = Math.floor(Math.random() * 200) + 55;
+        const b = Math.floor(Math.random() * 200) + 55;
+        return `rgba(${r}, ${g}, ${b}, 0.7)`;
+    }
+
+    function randColorHex() {
+        const r = Math.floor(Math.random() * 200) + 55;
+        const g = Math.floor(Math.random() * 200) + 55;
+        const b = Math.floor(Math.random() * 200) + 55;
+        return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+    }
+
     function grafikPie() {
         data = [];
         $('#barChart').remove();
@@ -18,21 +32,20 @@ function grafikPie() {
 
     function tampilGrafik(areaChartData) {
         var barChartCanvas = $('#barChart').get(0).getContext('2d')
-        var barChartData = $.extend(true, {}, areaChartData)
-        var temp0 = areaChartData.datasets[0]
-        var temp1 = areaChartData.datasets[1]
-        barChartData.datasets[0] = temp1
-        barChartData.datasets[1] = temp0
-
+        
         var barChartOptions = {
             responsive: true,
             maintainAspectRatio: false,
-            datasetFill: false
+            scales: {
+                y: {
+                    beginAtZero: true
+                }
+            }
         }
 
         new Chart(barChartCanvas, {
             type: 'bar',
-            data: barChartData,
+            data: areaChartData,
             options: barChartOptions
         })
     }
@@ -55,23 +68,21 @@ function modifikasiDataGrafik(data) {
         var labelsPie = [];
         var dataPie = [];
         var backgroundColorPie = [];
+        var labels = [];
 
         data.forEach(function(item, index) {
             let color = randColorRGB();
             let colorPoint = randColorHex();
 
-            let jumlah = typeof item.jumlah_penginapan == 'string' ? item.jumlah_penginapan : 0
+            let jumlah = typeof item.jumlah_penginapan == 'string' ? parseInt(item.jumlah_penginapan) : 0
 
+            labels.push(item.jenis_hiburan)
             dataBaruGrafik.push({
                 label: item.jenis_hiburan,
                 backgroundColor: color,
                 borderColor: color,
-                pointRadius: false,
-                pointColor: color,
-                pointStrokeColor: colorPoint,
-                pointHighlightFill: colorPoint,
-                pointHighlightStroke: color,
-                data: [jumlah, 1]
+                borderWidth: 1,
+                data: [jumlah]
             })
 
             labelsPie.push(item.jenis_hiburan)
@@ -80,7 +91,7 @@ function modifikasiDataGrafik(data) {
         })
 
         return [{
-                labels: ['Jumlah Penginapan'],
+                labels: labels,
                 datasets: dataBaruGrafik
             },
             {
diff --git a/resources/views/data_pokok/pariwisata/index.blade.php b/resources/views/data_pokok/pariwisata/index.blade.php
index b3c8d066d..f06d568c5 100644
--- a/resources/views/data_pokok/pariwisata/index.blade.php
+++ b/resources/views/data_pokok/pariwisata/index.blade.php
@@ -5,187 +5,231 @@
 @section('title', 'Data Bantuan')
 
 @section('content_header')
-    <h1>{{ $title }}</h1>
+<h1>{{ $title }}</h1>
 @stop
 
 @section('content')
-    @include('partials.breadcrumbs')
-    <div class="row">
-        <div class="col-lg-8">
-            <div class="card">
-                <div class="card-header">Statistik Jumlah Penginapan</div>
-                <div class="card-body">
-                    <div>
-                        <div class="chart" id="grafik">
-                            <canvas id="barChart"></canvas>
-                        </div>
-                        <hr class="hr-chart">
+@include('partials.breadcrumbs')
+<div class="row">
+    <div class="col-lg-8">
+        <div class="card">
+            <div class="card-header">Statistik Jumlah Penginapan</div>
+            <div class="card-body">
+                <div>
+                    <div class="chart" id="grafik">
+                        <canvas id="barChart"></canvas>
                     </div>
+                    <hr class="hr-chart">
                 </div>
             </div>
         </div>
-        <div class="col-lg-4">
-            <div class="card">
-                <div class="card-header">Statistik Tingkat Pemanfaatan</div>
-                <div class="card-body">
-                    <div>
-                        <div class="chart" id="pie">
-                            <canvas id="donutChart"></canvas>
-                        </div>
-                        <hr class="hr-chart">
+    </div>
+    <div class="col-lg-4">
+        <div class="card">
+            <div class="card-header">Statistik Tingkat Pemanfaatan</div>
+            <div class="card-body">                
+                <div>
+                    <div class="chart" id="pie">
+                        <canvas id="donutChart"></canvas>
                     </div>
+                    <hr class="hr-chart">
                 </div>
             </div>
         </div>
     </div>
-    <div class="row">
-        <div class="col-lg-12">
-            <div class="card card-outline card-primary">
-                <div class="card-header">
-                    <div class="float-left">{{ $title }}</div>
-                </div>
-                <div class="card-body">
-                    <div class="table-responsive">
-                        <table class="table table-striped" id="pariwisata">
-                            <thead>
-                                <tr>
-                                    <th>ID</th>
-                                    <th>{{ config('app.sebutanDesa') }}</th>
-                                    <th>Jenis Hiburan</th>
-                                    <th>Jumlah Penginapan</th>
-                                    <th>Lokasi/Tempat/Area Wisata</th>
-                                    <th>Keberadaan</th>
-                                    <th>Luas (Ha)</th>
-                                    <th>Tingkat Pemanfaatan</th>
-                                </tr>
-                            </thead>
-                            <tbody></tbody>
-                        </table>
+</div>
+<div class="row">
+    <div class="col-lg-12">
+        <div class="card card-outline card-primary">
+            <div class="card-header">
+                <div class="float-left">{{ $title }}</div>
+            </div>
+            <div class="card-body">
+                <div class="row mb-2">
+                    <x-filter-tahun />
+                    <x-filter-kategori-wisata />
+                    <div id="filter-sarana-wisata-container">
+                        <x-filter-sarana-wisata />
+                    </div>
+                    <div id="filter-komoditas-wisata-container">
+                        <x-filter-komoditas-wisata />
+                    </div>
+                    <div class="col-auto">
+                        <x-print-button :print-url="url('data-pokok/pariwisata/cetak')" table-id="pariwisata" :filter="[]" />
                     </div>
+                    <x-excel-download-button :download-url="config('app.databaseGabunganUrl') . '/api/v1/pariwisata/download'" table-id="pariwisata" filename="data_pariwisata" />
+                </div>
+                <div class="table-responsive">
+                    <table class="table table-striped" id="pariwisata">
+                        <thead>
+                            <tr>
+                                <th>ID</th>
+                                <th>{{ config('app.sebutanDesa') }}</th>
+                                <th>Jenis Hiburan</th>
+                                <th>Jumlah Penginapan</th>
+                                <th>Lokasi/Tempat/Area Wisata</th>
+                                <th>Keberadaan</th>
+                                <th>Luas (Ha)</th>
+                                <th>Tingkat Pemanfaatan</th>
+                            </tr>
+                        </thead>
+                        <tbody></tbody>
+                    </table>
                 </div>
             </div>
         </div>
     </div>
+</div>
 @endsection
 
 @section('js')
-    @include('data_pokok.pariwisata.chart')
-    <script nonce="{{ csp_nonce() }}">
-        let data_grafik = [];
-
-
-        document.addEventListener("DOMContentLoaded", function(event) {
-
-            const header = @include('layouts.components.header_bearer_api_gabungan');
-            var url = new URL("{{ config('app.databaseGabunganUrl') . '/api/v1/pariwisata' }}");
-            url.searchParams.set("kode_kabupaten", "{{ session('kabupaten.kode_kabupaten') ?? '' }}");
-            url.searchParams.set("kode_kecamatan", "{{ session('kecamatan.kode_kecamatan') ?? '' }}");
-            url.searchParams.set("config_desa", "{{ session('desa.id') ?? '' }}");
-
-            var pariwisata = $('#pariwisata').DataTable({
-                processing: true,
-                serverSide: true,
-                autoWidth: false,
-                ordering: true,
-                searchPanes: {
-                    viewTotal: false,
-                    columns: [0]
+@include('data_pokok.pariwisata.chart')
+<script nonce="{{ csp_nonce() }}">
+    let data_grafik = [];
+
+
+    document.addEventListener("DOMContentLoaded", function(event) {
+
+        const header = @include('layouts.components.header_bearer_api_gabungan');
+        var url = new URL("{{ config('app.databaseGabunganUrl') . '/api/v1/pariwisata' }}");
+        url.searchParams.set("kode_kabupaten", "{{ session('kabupaten.kode_kabupaten') ?? '' }}");
+        url.searchParams.set("kode_kecamatan", "{{ session('kecamatan.kode_kecamatan') ?? '' }}");
+        url.searchParams.set("config_desa", "{{ session('desa.id') ?? '' }}");
+
+        var pariwisata = $('#pariwisata').DataTable({
+            processing: true,
+            serverSide: true,
+            autoWidth: false,
+            ordering: true,
+            searchPanes: {
+                viewTotal: false,
+                columns: [0]
+            },
+            dom: 'lrtpi',
+            ajax: {
+                url: url.href,
+                method: 'get',
+                headers: header,
+                data: function(row) {
+                    return {
+                        "page[size]": row.length,
+                        "page[number]": (row.start / row.length) + 1,
+                        "filter[search]": row.search.value,
+                        "filter[tahun]": $('#filter-tahun').val(),
+                        "filter[kategori]": $('#filter-kategori-wisata').val(),
+                        "filter[sarana-wisata]": $('#filter-sarana-wisata').val(),
+                        "filter[potensi-wisata]": $('#filter-komoditas-wisata').val(),
+                        "sort": "id",
+                    };
+                },
+                dataSrc: function(json) {
+                    // Set default values untuk recordsTotal dan recordsFiltered
+                    json.recordsTotal = json.meta?.pagination?.total || 0;
+                    json.recordsFiltered = json.meta?.pagination?.total || 0;
+
+                    if (json.data && json.data.length > 0) {
+                        data_grafik = [];
+                        json.data.forEach(function(item, index) {
+                            data_grafik.push(item.attributes)
+                        })
+
+                        grafikPie()
+                    } else {
+                        // Kosongkan data grafik jika tidak ada data
+                        data_grafik = [];
+                    }
+
+                    return json.data || [];
+                },
+            },
+            columnDefs: [{
+                targets: '_all',
+                className: 'text-nowrap',
+            }, ],
+            columns: [{
+                    data: null,
+                },
+                {
+                    data: "attributes.nama_desa",
+                    name: "desa",
+                    orderable: false
+                },
+                {
+                    data: "attributes.jenis_hiburan",
+                    name: "jenis_hiburan",
+                    orderable: false
                 },
-                ajax: {
-                    url: url.href,
-                    method: 'get',
-                    headers: header,
-                    data: function(row) {
-                        return {
-                            "page[size]": row.length,
-                            "page[number]": (row.start / row.length) + 1,
-                            "filter[search]": row.search.value,
-                            "sort": (row.order[0]?.dir === "asc" ? "" : "-") + row.columns[row.order[0]
-                                    ?.column]
-                                ?.name,
-                            "filter[kode_desa]": $("#kode_desa").val(),
-                        };
-                    },
-                    dataSrc: function(json) {
-
-                        if (json.data.length > 0) {
-
-                            json.recordsTotal = json.meta.pagination.total
-                            json.recordsFiltered = json.meta.pagination.total
-
-                            data_grafik = [];
-                            json.data.forEach(function(item, index) {
-                                data_grafik.push(item.attributes)
-                            })
-
-                            grafikPie()
-
-                            return json.data;
-                        }
-
-                        return false;
-
-                    },
+                {
+                    data: "attributes.jumlah_penginapan",
+                    name: "jumlah_penginapan",
+                    orderable: false
                 },
-                columnDefs: [{
-                    targets: '_all',
-                    className: 'text-nowrap',
-                }, ],
-                columns: [{
-                        data: null,
-                    },
-                    {
-                        data: "attributes.nama_desa",
-                        name: "desa",
-                        orderable: false
-                    },
-                    {
-                        data: "attributes.jenis_hiburan",
-                        name: "jenis_hiburan",
-                        orderable: false
-                    },
-                    {
-                        data: "attributes.jumlah_penginapan",
-                        name: "jumlah_penginapan",
-                        orderable: false
-                    },
-                    {
-                        data: "attributes.lokasi_tempat_area_wisata",
-                        name: "lokasi_tempat_area_wisata",
-                        className: 'text-center',
-                        orderable: false
-                    },
-                    {
-                        data: "attributes.keberadaan",
-                        name: "keberadaan",
-                        orderable: false
-                    },
-                    {
-                        data: "attributes.luas",
-                        name: "luas",
-                        orderable: false
-                    },
-                    {
-                        data: "attributes.tingkat_pemanfaatan",
-                        name: "tingkat_pemanfaatan",
-                        orderable: false
-                    },
-                ],
-                order: [
-                    [0, 'asc']
-                ]
-            })
-
-            pariwisata.on('draw.dt', function() {
-                var PageInfo = $('#pariwisata').DataTable().page.info();
-                pariwisata.column(0, {
-                    page: 'current'
-                }).nodes().each(function(cell, i) {
-                    cell.innerHTML = i + 1 + PageInfo.start;
-                });
+                {
+                    data: "attributes.lokasi_tempat_area_wisata",
+                    name: "lokasi_tempat_area_wisata",
+                    className: 'text-center',
+                    orderable: false
+                },
+                {
+                    data: "attributes.keberadaan",
+                    name: "keberadaan",
+                    orderable: false
+                },
+                {
+                    data: "attributes.luas",
+                    name: "luas",
+                    orderable: false
+                },
+                {
+                    data: "attributes.tingkat_pemanfaatan",
+                    name: "tingkat_pemanfaatan",
+                    orderable: false
+                },
+            ],
+            order: [
+                [0, 'asc']
+            ]
+        })
+
+        pariwisata.on('draw.dt', function() {
+            var PageInfo = $('#pariwisata').DataTable().page.info();
+            pariwisata.column(0, {
+                page: 'current'
+            }).nodes().each(function(cell, i) {
+                cell.innerHTML = i + 1 + PageInfo.start;
             });
+        });
 
+        $('#filter-tahun, #filter-sarana-wisata, #filter-komoditas-wisata').change(function() {
+            pariwisata.draw()
+        })
 
+        // Logika untuk menampilkan/menyembunyikan filter berdasarkan kategori
+        $('#filter-kategori-wisata').change(function() {
+            var kategori = $(this).val();
+            
+            // Sembunyikan semua filter terlebih dahulu
+            $('#filter-sarana-wisata-container').hide();
+            $('#filter-komoditas-wisata-container').hide();
+            
+            // Reset nilai filter
+            $('#filter-sarana-wisata').val('');
+            $('#filter-komoditas-wisata').val('');
+            
+            // Tampilkan filter yang sesuai dengan kategori
+            if (kategori === 'sarana-wisata') {
+                $('#filter-sarana-wisata-container').show();
+            } else if (kategori === 'potensi-wisata') {
+                $('#filter-komoditas-wisata-container').show();
+            }
+            
+            // Refresh tabel
+            pariwisata.draw();
         })
-    </script>
+
+        $('#filter-sarana-wisata-container').hide();
+        $('#filter-komoditas-wisata-container').hide();
+
+    })
+</script>
 @endsection
diff --git a/resources/views/desa/index.blade.php b/resources/views/desa/index.blade.php
index 84a3865ff..85118e13c 100644
--- a/resources/views/desa/index.blade.php
+++ b/resources/views/desa/index.blade.php
@@ -26,6 +26,7 @@
                                 <i class="fa fa-print"></i>
                                 Cetak
                             </button>
+                            <x-excel-download-button :download-url="config('app.databaseGabunganUrl') . '/api/v1/wilayah/penduduk/download'" table-id="summary-penduduk" filename="data_desa" />
                         </div>
                     </div>
                 </div>
diff --git a/resources/views/dtks/papan/index.blade.php b/resources/views/dtks/papan/index.blade.php
index 60c898f0b..49b243dde 100644
--- a/resources/views/dtks/papan/index.blade.php
+++ b/resources/views/dtks/papan/index.blade.php
@@ -7,7 +7,7 @@
 @stop
 
 @push('css')
-    <style>
+   <style nonce="{{ csp_nonce() }}" >
         .details {
             margin-left: 20px;
         }
diff --git a/resources/views/dtks/sandang/cetak.blade.php b/resources/views/dtks/sandang/cetak.blade.php
index 472cab18f..9381a1e55 100644
--- a/resources/views/dtks/sandang/cetak.blade.php
+++ b/resources/views/dtks/sandang/cetak.blade.php
@@ -41,7 +41,7 @@
 
             const header = @include('layouts.components.header_bearer_api_gabungan');
             $.ajax({
-                url: `{{ config('app.databaseGabunganUrl').'/api/v1/data-presisi/sandang' }}?${filter}`,
+                url: `{{ config('app.databaseGabunganUrl').'/api/v1/data-presisi/sandang/rtm' }}?${filter}`,
                 headers: header,
                 method: 'get',
                 success: function(json) {
@@ -52,8 +52,8 @@
                             <tr>
                                 <td class="padat">${no}</td>
                                 <td>${item.attributes.nik || 'N/A'}</td>
-                                <td>${item.attributes.no_kk || 'N/A'}</td>
-                                <td>${item.attributes.nama || 'N/A'}</td>
+                                <td>${item.attributes.kepala_keluarga || 'N/A'}</td>
+                                <td>${item.attributes.jumlah_anggota || 'N/A'}</td>
                                 <td>${item.attributes.jml_pakaian_yg_dimiliki || 'N/A'}</td>
                                 <td>${item.attributes.frekwensi_beli_pakaian_pertahun || 'N/A'}</td>
                                 <td>${item.attributes.jenis_pakaian || 'N/A'}</td>
@@ -61,9 +61,7 @@
                                 <td>${item.attributes.tmpt_cuci_pakaian || 'N/A'}</td>
                                 <td>${item.attributes.jml_pakaian_seragam || 'N/A'}</td>
                                 <td>${item.attributes.jml_pakaian_sembahyang || 'N/A'}</td>
-                                <td>${item.attributes.jml_pakaian_kerja || 'N/A'}</td>
-                                <td>${item.attributes.tanggal_pengisian || 'N/A'}</td>
-                                <td>${item.attributes.status_pengisian || 'N/A'}</td>
+                                <td>${item.attributes.jml_pakaian_kerja || 'N/A'}</td>                                
                             </tr>
                             `
 
diff --git a/resources/views/dtks/sandang/index.blade.php b/resources/views/dtks/sandang/index.blade.php
index 907f33af9..6ad7372f8 100644
--- a/resources/views/dtks/sandang/index.blade.php
+++ b/resources/views/dtks/sandang/index.blade.php
@@ -3,211 +3,182 @@
 @section('title', $title)
 
 @section('content_header')
-    <h1>{{ $title }}</h1>
+<h1>{{ $title }}</h1>
 @stop
 
 @push('css')
-    <style>
-        .details {
-            margin-left: 20px;
-        }
-    </style>
+<style nonce="{{ csp_nonce() }}">
+    .details {
+        margin-left: 20px;
+    }
+</style>
 @endpush
 
 @section('content')
-    @include('partials.breadcrumbs')
-    <div class="row">
-        <div class="col-lg-12">
-            <div class="card card-outline card-primary">
-                <div class="card-body">
-                    <div class="chart" id="grafik">
-                        <canvas id="barChart"></canvas>
-                    </div>
+@include('partials.breadcrumbs')
+<div class="row">
+    <div class="col-lg-12">
+        <div class="card card-outline card-primary">
+            <div class="card-body">
+                <div class="chart" id="grafik">
+                    <canvas id="barChart"></canvas>
                 </div>
             </div>
-            <div class="card card-outline card-primary">
-                <div class="card-header">
-                    <div class="row">
-                        <div class="col-sm-2">
-                            <select id="filter-tahun" class="form-control form-control-sm">
-                                @php
-                                    $currentYear = date('Y');
-                                    $startYear = 2020;
-                                @endphp
-                                @for($year = $currentYear; $year >= $startYear; $year--)
-                                    <option value="{{ $year }}" {{ $year == $currentYear ? 'selected' : '' }}>{{ $year }}</option>
-                                @endfor
-                            </select>
-                        </div>
-                        <div class="col-sm-3">
-                            <button id="cetak" type="button" class="btn btn-primary btn-sm" data-url="">
-                                <i class="fa fa-print"></i> Cetak
-                            </button>
-                        </div>
+        </div>
+        <div class="card card-outline card-primary">
+            <div class="card-header">
+                <div class="row">
+                    <x-filter-tahun />
+                    <div class="col-auto">
+                        <x-print-button :print-url="url('data-pokok/sandang/cetak')" table-id="table-dtks" :filter="[]" />
                     </div>
+                    <x-excel-download-button :download-url="config('app.databaseGabunganUrl') . '/api/v1/data-presisi/sandang/rtm/download'" table-id="table-dtks" filename="data_presisi_sandang" />
                 </div>
-                <div class="card-body">
-                    <div class="table-responsive">
-                        <table class="table table-striped" id="table-dtks">
-                            <thead>
-                                <tr>
-                                    <th>Aksi</th>
-                                    <th>#</th>
-                                    <th>NIK</th>
-                                    <th>Nama Kepala Keluarga</th>
-                                    <th>Jumlah Anggota RTM</th>
-                                    <th>Jumlah Pakaian dimiliki</th>
-                                    <th>Frekwensi Beli Pakaian</th>
-                                </tr>
-                            </thead>
-                            <tbody></tbody>
-                        </table>
-                    </div>
+            </div>
+            <div class="card-body">
+                <div class="table-responsive">
+                    <table class="table table-striped" id="table-dtks">
+                        <thead>
+                            <tr>
+                                <th>Aksi</th>
+                                <th>#</th>
+                                <th>NIK</th>
+                                <th>Nama Kepala Keluarga</th>
+                                <th>Jumlah Anggota RTM</th>
+                                <th>Jumlah Pakaian dimiliki</th>
+                                <th>Frekwensi Beli Pakaian</th>
+                            </tr>
+                        </thead>
+                        <tbody></tbody>
+                    </table>
                 </div>
             </div>
         </div>
     </div>
+</div>
 @endsection
 
 @section('js')
-    @include('dtks.sandang.chart')
-    <script nonce="{{ csp_nonce() }}">
-        let data_grafik = [];
-        document.addEventListener("DOMContentLoaded", function(event) {
-            const header = @include('layouts.components.header_bearer_api_gabungan');
-
-
-            var url = new URL("{{ config('app.databaseGabunganUrl').'/api/v1/data-presisi/sandang/rtm' }}");
-            url.searchParams.set("kode_kabupaten", "{{ session('kabupaten.kode_kabupaten') ?? '' }}");
-            url.searchParams.set("kode_kecamatan", "{{ session('kecamatan.kode_kecamatan') ?? '' }}");
-
-            const desaKategoriId = parseInt("{{ session('desa.id') ?? '0' }}", 10);
-            url.searchParams.set("config_desa", isNaN(desaKategoriId) ? 0 : desaKategoriId);
-            // url.searchParams.set("kode_desa", "{{ session('desa.id') ?? '' }}");
-
-            var dtks = $('#table-dtks').DataTable({
-                processing: true,
-                serverSide: true,
-                autoWidth: false,
-                ordering: false,
-                searchPanes: {
-                    viewTotal: false,
-                    columns: [0]
+@include('dtks.sandang.chart')
+<script nonce="{{ csp_nonce() }}">
+    let data_grafik = [];
+    document.addEventListener("DOMContentLoaded", function(event) {
+        const header = @include('layouts.components.header_bearer_api_gabungan');
+
+
+        var url = new URL("{{ config('app.databaseGabunganUrl').'/api/v1/data-presisi/sandang/rtm' }}");
+        url.searchParams.set("kode_kabupaten", "{{ session('kabupaten.kode_kabupaten') ?? '' }}");
+        url.searchParams.set("kode_kecamatan", "{{ session('kecamatan.kode_kecamatan') ?? '' }}");
+        url.searchParams.set("kode_desa", "{{ session('desa.id') ?? '' }}");        
+
+        var dtks = $('#table-dtks').DataTable({
+            processing: true,
+            serverSide: true,
+            autoWidth: false,
+            ordering: false,
+            searchPanes: {
+                viewTotal: false,
+                columns: [0]
+            },
+            ajax: {
+                url: url.href,
+                headers: header,
+                method: 'get',
+                data: function(row) {
+                    return {
+                        "page[size]": row.length,
+                        "page[number]": (row.start / row.length) + 1,
+                        "filter[search]": row.search.value,
+                        "filter[tahun]": $('#filter-tahun').val(),                      
+                    };
                 },
-                ajax: {
-                    url: url.href,
-                    headers: header,  
-                    method: 'get',
-                    data: function(row) {
-                        return {
-                            "page[size]": row.length,
-                            "page[number]": (row.start / row.length) + 1,
-                            "filter[search]": row.search.value,
-                            "filter[tahun]": $('#filter-tahun').val(),
-                            // "kode_kecamatan": "{{ session('kecamatan.kode_kecamatan') ?? '' }}",
-                            // "config_desa": "{{ session('desa.id') ?? '' }}",
-                        };
-                    },
-                    dataSrc: function(json) {
-                        // if (json.data.length > 0) {
-                        //     json.recordsTotal = json.meta.pagination.total
-                        //     json.recordsFiltered = json.meta.pagination.total
-                        //     data_grafik = [];
-                        //     json.data.forEach(function(item, index) {
-                        //         data_grafik.push(item.attributes)
-                        //     })
-                        //     grafikPie()
-                        //     return json.data;
-                        // }
-                        // return false;
+                dataSrc: function(json) {                   
 
-                        json.recordsTotal = json.meta?.pagination?.total || 0;
-                        json.recordsFiltered = json.meta?.pagination?.total || 0;
+                    json.recordsTotal = json.meta?.pagination?.total || 0;
+                    json.recordsFiltered = json.meta?.pagination?.total || 0;
 
-                        if (json.data && json.data.length > 0) {
-                            data_grafik = json.data.map(item => item.attributes);
-                            grafikPie();
-                        }
+                    if (json.data && json.data.length > 0) {
+                        data_grafik = json.data.map(item => item.attributes);
+                        grafikPie();
+                    }
 
-                        return json.data || [];
-                    },
+                    return json.data || [];
                 },
-                columnDefs: [{
-                        targets: '_all',
-                        className: 'text-nowrap',
-                    },
-                ],
-                columns: [
-                    {
-                        data: function(data) {
-
-                            let d = data.attributes
-                            let obj = {
-                                'rtm_id' : data.id,
-                                'no_kartu_rumah': d.no_kk,
-                                'nama_kepala_keluarga': d.kepala_keluarga,
-                                'alamat': d.alamat,
-                                'jumlah_anggota': d.jumlah_anggota,
-                                'jumlah_kk': d.jumlah_kk,
-                            }
+            },
+            columnDefs: [{
+                targets: '_all',
+                className: 'text-nowrap',
+            }, ],
+            columns: [{
+                    data: function(data) {
+
+                        let d = data.attributes
+                        let obj = {
+                            'rtm_id': data.id,
+                            'no_kartu_rumah': d.no_kk,
+                            'nama_kepala_keluarga': d.kepala_keluarga,
+                            'alamat': d.alamat,
+                            'jumlah_anggota': d.jumlah_anggota,
+                            'jumlah_kk': d.jumlah_kk,
+                        }
 
-                            let jsonData = encodeURIComponent(JSON.stringify(obj));
+                        let jsonData = encodeURIComponent(JSON.stringify(obj));
 
-                            const _url =  "{{ route('detail_datasandang', ['data' => '__DATA__']) }}".replace('__DATA__', jsonData)
+                        const _url = "{{ route('detail_datasandang', ['data' => '__DATA__']) }}".replace('__DATA__', jsonData)
 
-                            return `<a href="${_url}" title="Detail" data-button="Detail">
+                        return `<a href="${_url}" title="Detail" data-button="Detail">
                                 <button type="button" class="btn btn-info btn-sm">Detail</button>
                             </a>`;
-                        },
-                        searchable: false,
-                        orderable: false
-                    },
-                    {
-                        "className": 'details-control',
-                        "orderable": false,
-                        "data": null,
-                        "defaultContent": ''
-                    },
-                    {
-                        data: "attributes.nik",
-                        orderable: false,
-                    },
-                    {
-                        data: "attributes.kepala_keluarga",
                     },
-                    {
-                        data: "attributes.jumlah_anggota",
-                    },
-                    {
-                        data: "attributes.jumlah_pakaian_yang_dimiliki",
-                        render: (data) => data || 'N/A',
-                    },
-                    {
-                        data: "attributes.frekwensi_beli_pakaian",
-                        render: (data) => data || 'N/A',
-                    },
-                    
-                ],
-            })
+                    searchable: false,
+                    orderable: false
+                },
+                {
+                    "className": 'details-control',
+                    "orderable": false,
+                    "data": null,
+                    "defaultContent": ''
+                },
+                {
+                    data: "attributes.nik",
+                    orderable: false,
+                },
+                {
+                    data: "attributes.kepala_keluarga",
+                },
+                {
+                    data: "attributes.jumlah_anggota",
+                },
+                {
+                    data: "attributes.jml_pakaian_yg_dimiliki",
+                    render: (data) => data || 'N/A',
+                },
+                {
+                    data: "attributes.frekwensi_beli_pakaian_pertahun",
+                    render: (data) => data || 'N/A',
+                },
 
-            // Add event listener for opening and closing details
-            dtks.on('click', 'td.details-control', function () {
-                let tr = $(this).closest('tr');
-                let row = dtks.row(tr);
+            ],
+        })
 
-                if (row.child.isShown()) {
-                    // This row is already open - close it
-                    row.child.hide();
-                    tr.removeClass('shown');
-                } else {
-                    // Open this row
-                    row.child(format(row.data())).show();
-                    tr.addClass('shown');
-                }
-            });
+        // Add event listener for opening and closing details
+        dtks.on('click', 'td.details-control', function() {
+            let tr = $(this).closest('tr');
+            let row = dtks.row(tr);
+
+            if (row.child.isShown()) {
+                // This row is already open - close it
+                row.child.hide();
+                tr.removeClass('shown');
+            } else {
+                // Open this row
+                row.child(format(row.data())).show();
+                tr.addClass('shown');
+            }
+        });
 
-            function format(data) {
-                return `
+        function format(data) {
+            return `
                     <table class="table table-striped">
                         <tr>
                             <td><strong>DTKS:</strong></td>
@@ -239,21 +210,21 @@ function format(data) {
                         </tr>
                     </table>
                 `;
-            }
-
-            $('#filter-tahun').on('change', function() {
-                dtks.ajax.reload();
-                data_grafik = [];
-                grafikPie();
-            });
-
-            $('#cetak').on('click', function() {
-                let baseUrl = "{{ route('cetak_datasandang') }}";
-                let params = dtks.ajax.params(); // Get DataTables params
-                let queryString = new URLSearchParams(params).toString(); // Convert params to query string
-                window.open(`${baseUrl}?${queryString}`, '_blank'); // Open the URL with appended query
-            });
+        }
 
-        })
-    </script>
-@endsection
+        $('#filter-tahun').on('change', function() {
+            dtks.ajax.reload();
+            data_grafik = [];
+            grafikPie();
+        });
+
+        $('#cetak').on('click', function() {
+            let baseUrl = "{{ route('cetak_datasandang') }}";
+            let params = dtks.ajax.params(); // Get DataTables params
+            let queryString = new URLSearchParams(params).toString(); // Convert params to query string
+            window.open(`${baseUrl}?${queryString}`, '_blank'); // Open the URL with appended query
+        });
+
+    })
+</script>
+@endsection
\ No newline at end of file
diff --git a/resources/views/emails/otp-mail.blade.php b/resources/views/emails/otp-mail.blade.php
index 6cf43b682..6d721e0d0 100644
--- a/resources/views/emails/otp-mail.blade.php
+++ b/resources/views/emails/otp-mail.blade.php
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Kode Token OpenKab</title>
-    <style>
+   <style nonce="{{ csp_nonce() }}" >
         body {
             font-family: Arial, sans-serif;
             line-height: 1.6;
diff --git a/resources/views/kecamatan/index.blade.php b/resources/views/kecamatan/index.blade.php
index 2cf01114e..49787e08f 100644
--- a/resources/views/kecamatan/index.blade.php
+++ b/resources/views/kecamatan/index.blade.php
@@ -26,6 +26,7 @@
                                 <i class="fa fa-print"></i>
                                 Cetak
                             </button>
+                            <x-excel-download-button :download-url="config('app.databaseGabunganUrl') . '/api/v1/wilayah/penduduk-kecamatan/download'" table-id="summary-penduduk" filename="data_kecamatan" />
                         </div>
                     </div>
                 </div>
diff --git a/resources/views/keluarga/index.blade.php b/resources/views/keluarga/index.blade.php
index 6717409f4..6dbf26fad 100644
--- a/resources/views/keluarga/index.blade.php
+++ b/resources/views/keluarga/index.blade.php
@@ -44,6 +44,7 @@
                                 <i class="fa fa-print"></i>
                                 Cetak
                             </button>
+                            <x-excel-download-button :download-url="config('app.databaseGabunganUrl') . '/api/v1/keluarga/download'" table-id="keluarga" filename="data_keluarga" />
                         </div>
                     </div>
                 </div>
diff --git a/resources/views/laporan-bulanan/detail/index.blade.php b/resources/views/laporan-bulanan/detail/index.blade.php
index e68aadf12..0497ab275 100644
--- a/resources/views/laporan-bulanan/detail/index.blade.php
+++ b/resources/views/laporan-bulanan/detail/index.blade.php
@@ -3,7 +3,7 @@
 @section('title', $page_title ?? 'Page Title')
 
 @section('content_header')
-    <h1>{{ $page_description ?? '' }}</h1>
+<h1>{{ $page_description ?? '' }}</h1>
 @stop
 
 @section('content')
@@ -15,9 +15,9 @@
                         <div class="row">
                             <div class="col-sm-12">
                                 <a href="{{ route('laporan-bulanan.export-excel-detail', ['rincian' => $rincian, 'tipe' => $tipe]) }}"
-                                    class="btn btn-primary btn-sm">
-                                    <i class="fa fa-print"></i>
-                                    Cetak
+                                    class="btn btn-success btn-sm">
+                                    <i class="fa fa-file-excel"></i>
+                                    Export Excel
                                 </a>
                                 <a href="{{ route('laporan-bulanan.index') }}" class="btn btn-sm btn-secondary">
                                     <i class="fas fa-arrow-left"></i>
@@ -58,7 +58,7 @@ class="btn btn-primary btn-sm">
         const header = @include('layouts.components.header_bearer_api_gabungan');
         var url = new URL("{{ config('app.databaseGabunganUrl') . '/api/v1/statistik/laporan-bulanan/sumber-data' }}");
 
-        document.addEventListener("DOMContentLoaded", function(event) {
+        document.addEventListener("DOMContentLoaded", function (event) {
             let nama_desa = `{{ session('desa.nama_desa') }}`;
             var penduduk = $('#detail_penduduk').DataTable({
                 processing: true,
@@ -74,13 +74,13 @@ class="btn btn-primary btn-sm">
                     url: url.href,
                     method: 'get',
                     headers: header,
-                    data: function(row) {
+                    data: function (row) {
                         return {
                             "page[size]": row.length,
                             "page[number]": (row.start / row.length) + 1,
                             "filter[search]": row.search.value,
                             "sort": (row.order[0]?.dir === "asc" ? "" : "-") + row.columns[row.order[0]
-                                    ?.column]
+                                ?.column]
                                 ?.name,
                             'filter[rincian]': '{{ $rincian }}',
                             'filter[tipe]': '{{ $tipe }}',
@@ -94,7 +94,7 @@ class="btn btn-primary btn-sm">
                             'kode_desa': '{{ $kode_desa }}',
                         };
                     },
-                    dataSrc: function(json) {
+                    dataSrc: function (json) {
                         json.recordsTotal = json.meta.pagination.total
                         json.recordsFiltered = json.meta.pagination.total
 
@@ -102,63 +102,63 @@ class="btn btn-primary btn-sm">
                     },
                 },
                 columnDefs: [{
-                        targets: '_all',
-                        className: 'text-nowrap',
-                    },
-                    {
-                        targets: [0, 1, 4, 5, 6],
-                        orderable: false,
-                        searchable: false,
-                    },
+                    targets: '_all',
+                    className: 'text-nowrap',
+                },
+                {
+                    targets: [0, 1, 4, 5, 6],
+                    orderable: false,
+                    searchable: false,
+                },
                 ],
                 columns: [{
-                        data: null,
-                    },
-                    {
-                        data: "attributes.nama",
-                        name: "nama",
-                        defaultContent: '-',
-                    },
-                    {
-                        data: "attributes.nik",
-                        name: "nik",
-                        defaultContent: '-',
-                    },
-                    {
-                        data: "attributes.tempatlahir",
-                        searcable: false,
-                        className: 'text-center',
-                        defaultContent: '-',
-                    },
-                    {
-                        data: function(data) {
-                            return data.attributes.tanggallahir ?? '';
-                        },
-                    },
-                    {
-                        data: "attributes.nama_ayah",
-                        name: "nama_ayah",
-                        defaultContent: '-',
-                    },
-                    {
-                        data: "attributes.nama_ibu",
-                        name: "nama_ibu",
-                        defaultContent: '-',
+                    data: null,
+                },
+                {
+                    data: "attributes.nama",
+                    name: "nama",
+                    defaultContent: '-',
+                },
+                {
+                    data: "attributes.nik",
+                    name: "nik",
+                    defaultContent: '-',
+                },
+                {
+                    data: "attributes.tempatlahir",
+                    searcable: false,
+                    className: 'text-center',
+                    defaultContent: '-',
+                },
+                {
+                    data: function (data) {
+                        return data.attributes.tanggallahir ?? '';
                     },
+                },
+                {
+                    data: "attributes.nama_ayah",
+                    name: "nama_ayah",
+                    defaultContent: '-',
+                },
+                {
+                    data: "attributes.nama_ibu",
+                    name: "nama_ibu",
+                    defaultContent: '-',
+                },
                 ],
                 order: [
                     [2, 'asc']
                 ]
             })
 
-            penduduk.on('draw.dt', function() {
+            penduduk.on('draw.dt', function () {
                 var PageInfo = $('#detail_penduduk').DataTable().page.info();
                 penduduk.column(0, {
                     page: 'current'
-                }).nodes().each(function(cell, i) {
+                }).nodes().each(function (cell, i) {
                     cell.innerHTML = i + 1 + PageInfo.start;
                 });
             });
         });
     </script>
-@endsection
+@endsection
\ No newline at end of file
diff --git a/resources/views/laporan-bulanan/index.blade.php b/resources/views/laporan-bulanan/index.blade.php
index 25352853b..bacee0612 100644
--- a/resources/views/laporan-bulanan/index.blade.php
+++ b/resources/views/laporan-bulanan/index.blade.php
@@ -16,10 +16,10 @@
                         <div class="card-header">
                             <div class="float-left">{{ $page_description }}</div>
                             <div class="float-right">
-                                <a href="{{ route('laporan-bulanan.export-excel') }}" class="btn btn-primary btn-sm"
+                                <a href="{{ route('laporan-bulanan.export-excel') }}" class="btn btn-success btn-sm"
                                     target="_blank">
-                                    <i class="fa fa-print"></i>
-                                    Cetak
+                                    <i class="fa fa-file-excel"></i>
+                                    Excel
                                 </a>
                             </div>
                         </div>
diff --git a/resources/views/lembaga/index.blade.php b/resources/views/lembaga/index.blade.php
index 35e8cd8ba..fe082e42d 100644
--- a/resources/views/lembaga/index.blade.php
+++ b/resources/views/lembaga/index.blade.php
@@ -7,7 +7,7 @@
 @stop
 
 @push('css')
-    <style>
+   <style nonce="{{ csp_nonce() }}" >
         .details {
             margin-left: 20px;
         }
diff --git a/resources/views/master/artikel/create.blade.php b/resources/views/master/artikel/create.blade.php
index 48736ff3c..33072b387 100644
--- a/resources/views/master/artikel/create.blade.php
+++ b/resources/views/master/artikel/create.blade.php
@@ -95,7 +95,7 @@ class="btn col-12 btn-primary m-0 rounded-pill">
 @endsection
 
 @section('css')
-    <style>
+   <style nonce="{{ csp_nonce() }}" >
         .widget-user-header {
             padding: 20px;
             background: #f4f6f9;
diff --git a/resources/views/master/artikel/edit.blade.php b/resources/views/master/artikel/edit.blade.php
index 63fd6dbd9..2fa7503ab 100644
--- a/resources/views/master/artikel/edit.blade.php
+++ b/resources/views/master/artikel/edit.blade.php
@@ -105,7 +105,7 @@ class="btn col-12 btn-primary m-0 rounded-pill">
 @endsection
 
 @section('css')
-    <style>
+   <style nonce="{{ csp_nonce() }}" >
         .widget-user-header {
             padding: 20px;
             background: #f4f6f9;
diff --git a/resources/views/peta/lokasi/index.blade.php b/resources/views/peta/lokasi/index.blade.php
index 644be6d21..eb7d04ded 100644
--- a/resources/views/peta/lokasi/index.blade.php
+++ b/resources/views/peta/lokasi/index.blade.php
@@ -32,7 +32,7 @@
 
 @endsection
 @push('css')
-    <style>
+   <style nonce="{{ csp_nonce() }}" >
         .select2-results__option[aria-disabled=true] {
             display: none;
         }
diff --git a/resources/views/peta/point/form.blade.php b/resources/views/peta/point/form.blade.php
index 0192f0707..e2ca86f25 100644
--- a/resources/views/peta/point/form.blade.php
+++ b/resources/views/peta/point/form.blade.php
@@ -8,7 +8,7 @@
     <h1>{{ $action }} Data Tipe Lokasi</h1>
 @stop
 @push('css')
-    <style>
+   <style nonce="{{ csp_nonce() }}" >
         .hidden {
             /* display: none; */
         }
diff --git a/routes/web.php b/routes/web.php
index e3b3e83dc..788511842 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -82,7 +82,7 @@
         });
         Route::resource('activities', RiwayatPenggunaController::class)->only(['index', 'show'])->middleware('easyauthorize:pengaturan-activities');
         Route::resource('settings', App\Http\Controllers\SettingController::class)->except(['show', 'create', 'delete'])->middleware('easyauthorize:pengaturan-settings');
-        
+
         // OTP & 2FA Routes - combined into one page
         Route::prefix('otp')->group(function () {
             Route::get('/', [App\Http\Controllers\OtpController::class, 'index'])->name('otp.index');
@@ -90,21 +90,21 @@
             Route::post('/setup', [App\Http\Controllers\OtpController::class, 'setup'])->name('otp.setup');
             Route::post('/verify-activation', [App\Http\Controllers\OtpController::class, 'verifyActivation'])->name('otp.verify-activation');
             Route::post('/resend', [App\Http\Controllers\OtpController::class, 'resend'])->name('otp.resend');
-            Route::post('/disable', [App\Http\Controllers\OtpController::class, 'disable'])->name('otp.disable');            
+            Route::post('/disable', [App\Http\Controllers\OtpController::class, 'disable'])->name('otp.disable');
         });
-        
+
         // 2FA Routes - for API calls from the combined page
         Route::prefix('2fa')->group(function () {
-            Route::get('/', function() {
+            Route::get('/', function () {
                 return redirect()->route('otp.index');
             })->name('2fa.index');
             Route::get('/activate', [App\Http\Controllers\TwoFactorController::class, 'activate'])->name('2fa.activate');
-            Route::post('/enable', [App\Http\Controllers\TwoFactorController::class, 'enable'])->name('2fa.enable');            
+            Route::post('/enable', [App\Http\Controllers\TwoFactorController::class, 'enable'])->name('2fa.enable');
             Route::post('/verify', [App\Http\Controllers\TwoFactorController::class, 'verifyEnable'])->name('2fa.verify');
             Route::post('/disable', [App\Http\Controllers\TwoFactorController::class, 'disable'])->name('2fa.disable');
             Route::post('/resend', [App\Http\Controllers\TwoFactorController::class, 'resend'])->name('2fa.resend');
         });
-    });    
+    });
 
     Route::prefix('cms')->group(function () {
         Route::resource('categories', App\Http\Controllers\CMS\CategoryController::class)->except(['show'])->middleware('easyauthorize:website-categories');
@@ -184,6 +184,7 @@
         ->group(function () {
             Route::get('/', 'index')->name('bantuan');
             Route::get('/cetak', 'cetak');
+            Route::get('/detail/{id}/cetak', 'cetakPeserta')->name('bantuan.detail.cetak');
             Route::get('/detail/{id}', 'show')->name('bantuan.detail');
         });
 
@@ -203,6 +204,7 @@
             Route::middleware(['permission:datapokok-pendidikan-read'])->get('/pendidikan', 'pendidikan')->name('pendidikan');
             Route::middleware(['permission:datapokok-pendidikan-read'])->get('/pendidikan/cetak', 'cetakPendidikan')->name('pendidikan.cetak');
             Route::middleware(['permission:datapokok-pariwisata-read'])->get('/pariwisata', 'pariwisata')->name('pariwisata');
+            Route::middleware(['permission:datapokok-pariwisata-read'])->get('/pariwisata/cetak', 'cetakPariwisata')->name('pariwisata.cetak');
             Route::middleware(['permission:datapokok-jaminan-sosial-read'])->get('/jaminan-sosial', 'jaminanSosial')->name('jaminan-sosial');
             Route::middleware(['permission:datapokok-jaminan-sosial-read'])->get('/jaminan-sosial/detail', 'detailJaminanSosial')->name('jaminan-sosial-detail');
             Route::middleware(['permission:datapokok-jaminan-sosial-read'])->get('/jaminan-sosial/cetak', 'cetakJaminanSosial')->name('jaminan-sosial-cetak');
@@ -212,6 +214,7 @@
             Route::middleware(['permission:datapokok-agama-adat-read'])->get('/agama/detail', 'detail_agama')->name('detail_agama');
             Route::middleware(['permission:datapokok-agama-adat-read'])->get('/agama/cetak', 'cetak_agama')->name('cetak_agama');
             Route::middleware(['permission:datapokok-infrastruktur-read'])->get('/infrastruktur', 'infrastruktur')->name('infrastruktur');
+            Route::middleware(['permission:datapokok-infrastruktur-read'])->get('/infrastruktur/cetak', 'cetakInfrastruktur')->name('infrastruktur.cetak');
 
             Route::middleware(['permission:datapokok-sandang-read'])->get('/sandang', 'sandang')->name('datasandang');
             Route::middleware(['permission:datapokok-sandang-read'])->get('/sandang/detail', 'detail_sandang')->name('detail_datasandang');
@@ -235,9 +238,9 @@
 
             // Data > Kependudukan > Laporan Bulanan
             Route::controller(LaporanBulananController::class)
-            ->middleware(['permission:statistik-laporan-bulanan-read'])
-            ->prefix('laporan-bulanan')
-            ->group(function () {
+                ->middleware(['permission:statistik-laporan-bulanan-read'])
+                ->prefix('laporan-bulanan')
+                ->group(function () {
                 Route::get('/', 'index')->name('laporan-bulanan.index');
                 Route::post('/filter', 'filter')->name('laporan-bulanan.filter');
                 Route::get('/detail-penduduk/{rincian}/{tipe}', 'detailPenduduk')->name('laporan-bulanan.detail-penduduk');
@@ -277,64 +280,64 @@
         Route::prefix('laporan')->group(function () {
             Route::get('/', [App\Http\Controllers\DataPresisiLaporanController::class, 'index'])->name('laporan.data-presisi.index');
             Route::get('cetak', [App\Http\Controllers\DataPresisiLaporanController::class, 'cetak'])->name('laporan.data-presisi.cetak');
-                Route::get('/perdesa', [App\Http\Controllers\DataPresisiLaporanController::class, 'perdesa'])->name('laporan.data-presisi.perdesa');
-                Route::get('/cetak-perdesa', [App\Http\Controllers\DataPresisiLaporanController::class, 'cetakPerdesa'])->name('laporan.data-presisi.cetak-perdesa');
+            Route::get('/perdesa', [App\Http\Controllers\DataPresisiLaporanController::class, 'perdesa'])->name('laporan.data-presisi.perdesa');
+            Route::get('/cetak-perdesa', [App\Http\Controllers\DataPresisiLaporanController::class, 'cetakPerdesa'])->name('laporan.data-presisi.cetak-perdesa');
         })
-        ->middleware(['permission:datapresisi-laporan-read']);
+            ->middleware(['permission:datapresisi-laporan-read']);
 
         Route::prefix('kesehatan')->group(function () {
             Route::get('/', [App\Http\Controllers\DataPresisiKesehatanController::class, 'index'])->name('data-pokok.data-presisi.index');
             Route::get('/detail', [App\Http\Controllers\DataPresisiKesehatanController::class, 'detail'])->name('data-pokok.data-presisi.detail');
             Route::get('cetak', [App\Http\Controllers\DataPresisiKesehatanController::class, 'cetak'])->name('data-pokok.data-presisi.cetak');
         })
-        ->middleware(['permission:datapresisi-kesehatan-read']);
+            ->middleware(['permission:datapresisi-kesehatan-read']);
 
         Route::prefix('seni-budaya')->group(function () {
             Route::get('/', [App\Http\Controllers\DataPresisiSeniBudayaController::class, 'index'])->name('data-pokok.data-presisi-seni-budaya.index');
             Route::get('/detail', [App\Http\Controllers\DataPresisiSeniBudayaController::class, 'detail'])->name('data-pokok.data-presisi-seni-budaya.detail');
             Route::get('cetak', [App\Http\Controllers\DataPresisiSeniBudayaController::class, 'cetak'])->name('data-pokok.data-presisi-seni-budaya.cetak');
         })
-        ->middleware(['permission:datapresisi-seni-budaya-read']);
+            ->middleware(['permission:datapresisi-seni-budaya-read']);
 
         Route::prefix('ketenagakerjaan')->group(function () {
             Route::get('/', [App\Http\Controllers\DataPresisiKetenagakerjaanController::class, 'index'])->name('data-pokok.data-presisi-ketenagakerjaan.index');
             Route::get('/detail', [App\Http\Controllers\DataPresisiKetenagakerjaanController::class, 'detail'])->name('data-pokok.data-presisi-ketenagakerjaan.detail');
             Route::get('cetak', [App\Http\Controllers\DataPresisiKetenagakerjaanController::class, 'cetak'])->name('data-pokok.data-presisi-ketenagakerjaan.cetak');
         })
-        ->middleware(['permission:datapresisi-ketenagakerjaan-read']);
+            ->middleware(['permission:datapresisi-ketenagakerjaan-read']);
 
         Route::prefix('pendidikan')->group(function () {
             Route::get('/', [App\Http\Controllers\DataPresisiPendidikanController::class, 'index'])->name('data-pokok.data-presisi-pendidikan.index');
             Route::get('/detail', [App\Http\Controllers\DataPresisiPendidikanController::class, 'detail'])->name('data-pokok.data-presisi-pendidikan.detail');
             Route::get('cetak', [App\Http\Controllers\DataPresisiPendidikanController::class, 'cetak'])->name('data-pokok.data-presisi-pendidikan.cetak');
         })
-        ->middleware(['permission:datapresisi-pendidikan-read']);
+            ->middleware(['permission:datapresisi-pendidikan-read']);
 
         Route::prefix('pangan')->group(function () {
             Route::get('/', [App\Http\Controllers\DataPresisiPanganController::class, 'index'])->name('data-pokok.data-presisi-pangan.index');
             Route::get('/detail', [App\Http\Controllers\DataPresisiPanganController::class, 'detail'])->name('data-pokok.data-presisi-pangan.detail');
             Route::get('cetak', [App\Http\Controllers\DataPresisiPanganController::class, 'cetak'])->name('data-pokok.data-presisi-pangan.cetak');
         })
-        ->middleware(['permission:datapresisi-pangan-read']);
+            ->middleware(['permission:datapresisi-pangan-read']);
 
         Route::prefix('adat')->group(function () {
             Route::get('/', [App\Http\Controllers\DataPresisiAdatController::class, 'index'])->name('data-pokok.data-presisi-adat.index');
             Route::get('/detail', [App\Http\Controllers\DataPresisiAdatController::class, 'detail'])->name('data-pokok.data-presisi-adat.detail');
             Route::get('cetak', [App\Http\Controllers\DataPresisiAdatController::class, 'cetak'])->name('data-pokok.data-presisi-adat.cetak');
         })
-        ->middleware(['permission:datapresisi-adat-read']);
+            ->middleware(['permission:datapresisi-adat-read']);
 
-        Route::prefix('statistik')->group(function () {            
+        Route::prefix('statistik')->group(function () {
             Route::get('adat', [App\Http\Controllers\StatistikAdatController::class, 'index']);
             Route::get('kesehatan', [App\Http\Controllers\StatistikKesehatanController::class, 'index']);
             Route::get('jaminan-sosial', [App\Http\Controllers\StatistikJaminanSosialController::class, 'index']);
             Route::get('aktivitas-keagamaan', [App\Http\Controllers\StatistikAktivitasKeagamaanController::class, 'index']);
             Route::get('ketenagakerjaan', [App\Http\Controllers\StatistikKetenagakerjaanController::class, 'index']);
-            Route::get('pendidikan', [App\Http\Controllers\StatistikPendidikanController::class, 'index']); 
-            Route::get('sandang', [App\Http\Controllers\StatistikSandangController::class, 'index']); 
-            Route::get('papan', [App\Http\Controllers\StatistikPapanController::class, 'index']); 
-            Route::get('senibudaya', [App\Http\Controllers\StatistikSenibudayaController::class, 'index']); 
-            Route::get('pangan', [App\Http\Controllers\StatistikPanganController::class, 'index']); 
+            Route::get('pendidikan', [App\Http\Controllers\StatistikPendidikanController::class, 'index']);
+            Route::get('sandang', [App\Http\Controllers\StatistikSandangController::class, 'index']);
+            Route::get('papan', [App\Http\Controllers\StatistikPapanController::class, 'index']);
+            Route::get('senibudaya', [App\Http\Controllers\StatistikSenibudayaController::class, 'index']);
+            Route::get('pangan', [App\Http\Controllers\StatistikPanganController::class, 'index']);
         });
     });
 
diff --git a/tests/Feature/BantuanControllerTest.php b/tests/Feature/BantuanControllerTest.php
new file mode 100644
index 000000000..b685c8061
--- /dev/null
+++ b/tests/Feature/BantuanControllerTest.php
@@ -0,0 +1,63 @@
+<?php
+
+namespace Tests\Feature;
+
+use Illuminate\Foundation\Testing\DatabaseTransactions;
+use Tests\BaseTestCase;
+
+class BantuanControllerTest extends BaseTestCase
+{
+    use DatabaseTransactions;
+
+    /** @test */
+    public function it_can_access_bantuan_index()
+    {
+        $response = $this->get(route('bantuan'));
+
+        $response->assertStatus(200);
+        $response->assertViewIs('bantuan.index');
+    }
+
+    /** @test */
+    public function it_can_access_bantuan_detail()
+    {
+        $response = $this->get(route('bantuan.detail', ['id' => 1]));
+
+        $response->assertStatus(200);
+        $response->assertViewIs('bantuan.show');
+        $response->assertViewHas('id', '1');
+    }
+
+    /** @test */
+    public function it_can_access_bantuan_cetak()
+    {
+        $response = $this->get('/bantuan/cetak');
+
+        $response->assertStatus(200);
+        $response->assertViewIs('bantuan.cetak');
+        $response->assertViewHas('filter');
+    }
+
+    /** @test */
+    public function it_can_access_bantuan_detail_cetak_peserta()
+    {
+        $response = $this->get(route('bantuan.detail.cetak', ['id' => 1]));
+
+        $response->assertStatus(200);
+        $response->assertViewIs('bantuan.cetak-peserta');
+        $response->assertViewHas('id', '1');
+        $response->assertViewHas('filter');
+    }
+
+    /** @test */
+    public function it_passes_filter_params_to_cetak_peserta()
+    {
+        $response = $this->get(route('bantuan.detail.cetak', ['id' => 1]) . '?search=test');
+
+        $response->assertStatus(200);
+        $response->assertViewIs('bantuan.cetak-peserta');
+        $response->assertViewHas('filter', function ($filter) {
+            return isset($filter['search']) && $filter['search'] === 'test';
+        });
+    }
+}
diff --git a/tests/Feature/DataPresisiExcelDownloadTest.php b/tests/Feature/DataPresisiExcelDownloadTest.php
new file mode 100644
index 000000000..faf402127
--- /dev/null
+++ b/tests/Feature/DataPresisiExcelDownloadTest.php
@@ -0,0 +1,125 @@
+<?php
+
+namespace Tests\Feature;
+
+use Tests\BaseTestCase;
+
+class DataPresisiExcelDownloadTest extends BaseTestCase
+{
+    /**
+     * Modules that should have excel download button
+     */
+    protected $modulesWithExcelDownload = [
+        '/data-presisi/pangan' => [
+            'table_id' => 'table-pangan',
+            'download_url' => '/api/v1/data-presisi/pangan/rtm/download',
+            'filename' => 'data_presisi_pangan',
+        ],
+        '/data-presisi/pendidikan' => [
+            'table_id' => 'table-pendidikan',
+            'download_url' => '/api/v1/data-presisi/pendidikan/rtm/download',
+            'filename' => 'data_presisi_pendidikan',
+        ],
+    ];
+
+    /** @test */
+    public function test_excel_download_button_exists_in_pangan_page()
+    {
+        $response = $this->get('/data-presisi/pangan');
+
+        if ($response->status() === 200) {
+            $content = $response->getContent();
+
+            // Test komponen x-download-excel ada di halaman
+            $this->assertStringContainsString('download-excel', $content);
+            $this->assertStringContainsString('table-pangan', $content);
+            $this->assertStringContainsString('/api/v1/data-presisi/pangan/rtm/download', $content);
+            $this->assertStringContainsString('data_presisi_pangan', $content);
+        } else {
+            $this->markTestSkipped('Page /data-presisi/pangan not accessible (status: ' . $response->status() . ')');
+        }
+    }
+
+    /** @test */
+    public function test_excel_download_button_exists_in_pendidikan_page()
+    {
+        $response = $this->get('/data-presisi/pendidikan');
+
+        if ($response->status() === 200) {
+            $content = $response->getContent();
+
+            // Test komponen x-download-excel ada di halaman
+            $this->assertStringContainsString('download-excel', $content);
+            $this->assertStringContainsString('table-pendidikan', $content);
+            $this->assertStringContainsString('/api/v1/data-presisi/pendidikan/rtm/download', $content);
+            $this->assertStringContainsString('data_presisi_pendidikan', $content);
+        } else {
+            $this->markTestSkipped('Page /data-presisi/pendidikan not accessible (status: ' . $response->status() . ')');
+        }
+    }
+
+    /** @test */
+    public function test_excel_download_button_component_renders_correctly()
+    {
+        $successCount = 0;
+
+        foreach ($this->modulesWithExcelDownload as $module => $config) {
+            $response = $this->get($module);
+
+            if ($response->status() === 200) {
+                $content = $response->getContent();
+
+                // Check that excel download button contains necessary elements
+                $hasDownloadUrl = strpos($content, $config['download_url']) !== false;
+                $hasTableId = strpos($content, $config['table_id']) !== false;
+                $hasFilename = strpos($content, $config['filename']) !== false;
+
+                if ($hasDownloadUrl && $hasTableId && $hasFilename) {
+                    $successCount++;
+                }
+            }
+        }
+
+        $this->assertGreaterThan(
+            0,
+            $successCount,
+            'Minimal 1 modul memiliki Excel download button yang lengkap'
+        );
+    }
+
+    /** @test */
+    public function test_pangan_and_pendidikan_have_matching_excel_button_structure()
+    {
+        $panganResponse = $this->get('/data-presisi/pangan');
+        $pendidikanResponse = $this->get('/data-presisi/pendidikan');
+
+        if ($panganResponse->status() !== 200 || $pendidikanResponse->status() !== 200) {
+            $this->markTestSkipped('Pages not accessible');
+            return;
+        }
+
+        $panganContent = $panganResponse->getContent();
+        $pendidikanContent = $pendidikanResponse->getContent();
+
+        // Both should have x-download-excel component
+        $panganHasButton = strpos($panganContent, 'download-excel') !== false;
+        $pendidikanHasButton = strpos($pendidikanContent, 'download-excel') !== false;
+
+        $this->assertTrue($panganHasButton, 'Pangan page should have excel download button');
+        $this->assertTrue($pendidikanHasButton, 'Pendidikan page should have excel download button');
+
+        // Both should have filter-tahun component
+        $panganHasFilter = strpos($panganContent, 'filter-tahun') !== false;
+        $pendidikanHasFilter = strpos($pendidikanContent, 'filter-tahun') !== false;
+
+        $this->assertTrue($panganHasFilter, 'Pangan page should have filter tahun');
+        $this->assertTrue($pendidikanHasFilter, 'Pendidikan page should have filter tahun');
+
+        // Both should have print-btn component
+        $panganHasPrint = strpos($panganContent, 'print-btn') !== false;
+        $pendidikanHasPrint = strpos($pendidikanContent, 'print-btn') !== false;
+
+        $this->assertTrue($panganHasPrint, 'Pangan page should have print button');
+        $this->assertTrue($pendidikanHasPrint, 'Pendidikan page should have print button');
+    }
+}
diff --git a/tests/Feature/DataPresisiSeniBudayaExcelDownloadTest.php b/tests/Feature/DataPresisiSeniBudayaExcelDownloadTest.php
new file mode 100644
index 000000000..818b81179
--- /dev/null
+++ b/tests/Feature/DataPresisiSeniBudayaExcelDownloadTest.php
@@ -0,0 +1,58 @@
+<?php
+
+namespace Tests\Feature;
+
+use Tests\BaseTestCase;
+
+class DataPresisiSeniBudayaExcelDownloadTest extends BaseTestCase
+{
+    /** @test */
+    public function test_excel_download_button_exists_in_seni_budaya_page()
+    {
+        $response = $this->get('/data-presisi/seni-budaya');
+
+        if ($response->status() !== 200) {
+            $this->markTestSkipped('Page /data-presisi/seni-budaya not accessible (status: ' . $response->status() . ')');
+            return;
+        }
+
+        $content = $response->getContent();
+
+        // Test komponen excel-download-button ada di halaman (setelah render menjadi button dengan data attributes)
+        $this->assertStringContainsString('data-download-url', $content);
+        $this->assertStringContainsString('table-seni-budaya', $content);
+        $this->assertStringContainsString('/api/v1/data-presisi/seni-budaya/rtm/download', $content);
+    }
+
+    /** @test */
+    public function test_seni_budaya_page_has_filter_tahun()
+    {
+        $response = $this->get('/data-presisi/seni-budaya');
+
+        if ($response->status() !== 200) {
+            $this->markTestSkipped('Page not accessible');
+            return;
+        }
+
+        $content = $response->getContent();
+
+        // Test filter-tahun ada di halaman
+        $this->assertStringContainsString('filter-tahun', $content);
+    }
+
+    /** @test */
+    public function test_seni_budaya_page_has_print_button()
+    {
+        $response = $this->get('/data-presisi/seni-budaya');
+
+        if ($response->status() !== 200) {
+            $this->markTestSkipped('Page not accessible');
+            return;
+        }
+
+        $content = $response->getContent();
+
+        // Test print button ada di halaman
+        $this->assertStringContainsString('data-presisi/seni-budaya/cetak', $content);
+    }
+}
\ No newline at end of file
diff --git a/tests/Feature/FilterTahunTest.php b/tests/Feature/FilterTahunTest.php
index ad389945b..2e11545f7 100644
--- a/tests/Feature/FilterTahunTest.php
+++ b/tests/Feature/FilterTahunTest.php
@@ -20,8 +20,9 @@ public function test_filter_tahun_basic_functionality()
         // Test ada elemen filter tahun
         $response->assertSee('filter-tahun');
 
-        // Test ada tahun minimal 2020
-        $response->assertSee('2020');
+        // Test ada tahun minimal (tahun sekarang - 5)
+        $minYear = date('Y') - 5;
+        $response->assertSee((string)$minYear);
 
         // Test ada tahun sekarang
         $response->assertSee(date('Y'));
@@ -52,20 +53,21 @@ public function test_filter_tahun_html_structure()
     }
 
     /**
-     * Test year range is correct (2020 to current year)
+     * Test year range is correct (current year to 5 years back)
      */
     public function test_year_range_functionality()
     {
         $currentYear = date('Y');
+        $startYear = $currentYear - 5;
         $response = $this->get('/data-presisi/adat');
 
         $response->assertStatus(200);
 
-        // Test range tahun dari 2020 sampai tahun sekarang
-        $response->assertSee('2020');
+        // Test range tahun dari tahun sekarang - 5 sampai tahun sekarang
+        $response->assertSee((string)$startYear);
         $response->assertSee($currentYear);
 
-        $this->assertTrue(true, 'Range tahun filter sesuai (2020-' . $currentYear . ')');
+        $this->assertTrue(true, 'Range tahun filter sesuai (' . $startYear . '-' . $currentYear . ')');
     }
 
     /**
diff --git a/tests/Feature/JaminanSosialTest.php b/tests/Feature/JaminanSosialTest.php
new file mode 100644
index 000000000..61a39be2b
--- /dev/null
+++ b/tests/Feature/JaminanSosialTest.php
@@ -0,0 +1,151 @@
+<?php
+
+namespace Tests\Feature;
+
+use Tests\BaseTestCase;
+
+class JaminanSosialTest extends BaseTestCase
+{
+    /** @test */
+    public function test_can_access_jaminan_sosial_page()
+    {
+        $response = $this->get(route('jaminan-sosial'));
+
+        $response->assertStatus(200);
+        $response->assertViewIs('data_pokok.jaminan_sosial.index');
+        $response->assertSee('Data Kepesertaan Program dan Statistik');
+    }
+
+    /** @test */
+    public function test_jaminan_sosial_page_has_required_elements()
+    {
+        $response = $this->get(route('jaminan-sosial'));
+        $content = $response->getContent();
+
+        // Test DataTable exists
+        $this->assertStringContainsString('id="jaminanSosial"', $content, 'DataTable jaminanSosial tidak ditemukan');
+
+        // Test filter tahun exists
+        $this->assertStringContainsString('filter-tahun', $content, 'Filter tahun tidak ditemukan');
+
+        // Test charts exist
+        $this->assertStringContainsString('id="pie1"', $content, 'Chart pie1 tidak ditemukan');
+        $this->assertStringContainsString('id="pie2"', $content, 'Chart pie2 tidak ditemukan');
+        $this->assertStringContainsString('id="pie4"', $content, 'Chart pie4 tidak ditemukan');
+        
+        // Test print button exists
+        $this->assertStringContainsString('btn btn-primary btn-sm', $content, 'Print button tidak ditemukan');
+        $this->assertStringContainsString('id="print-btn-jaminanSosial"', $content, 'Print button ID tidak ditemukan');
+        
+        // Test excel download button exists
+        $this->assertStringContainsString('btn btn-success btn-sm', $content, 'Excel download button tidak ditemukan');
+        $this->assertStringContainsString('id="download-excel"', $content, 'Excel download button ID tidak ditemukan');
+    }
+
+    /** @test */
+    public function test_jaminan_sosial_has_correct_table_columns()
+    {
+        $response = $this->get(route('jaminan-sosial'));
+        $content = $response->getContent();
+
+        // Test table headers exist
+        $expectedColumns = [
+            'Aksi',
+            'NIK',
+            'Nama Kepala Keluarga',
+            'Jumlah Anggota RTM',
+            'Jenis Bantuan Sosial<br> Yang Pernah Diterima',
+            'Jenis Gangguan Mental<br> Yang Diderita',
+            'Jenis Penanganan <br>Penderita Gangguan Mental',
+        ];
+
+        foreach ($expectedColumns as $column) {
+            $this->assertStringContainsString($column, $content, "Kolom '{$column}' tidak ditemukan");
+        }
+    }
+
+    /** @test */
+    public function test_jaminan_sosial_has_print_button()
+    {
+        $response = $this->get(route('jaminan-sosial'));        
+        $content = $response->getContent();
+
+        // Test print button rendered HTML exists (component is rendered to actual button)
+        $this->assertStringContainsString('fa fa-print', $content, 'Icon print tidak ditemukan');
+        $this->assertStringContainsString('data-print-url=', $content, 'Route print tidak ditemukan');
+    }
+
+    /** @test */
+    public function test_jaminan_sosial_has_excel_download_button()
+    {
+        $response = $this->get(route('jaminan-sosial'));
+        $content = $response->getContent();
+
+        // Test excel download button rendered HTML exists (component is rendered to actual button)
+        $this->assertStringContainsString('fa fa-file-excel', $content, 'Icon excel tidak ditemukan');
+        $this->assertStringContainsString('data-download-url=', $content, 'Download URL tidak ditemukan');
+    }
+
+    /** @test */
+    public function test_jaminan_sosial_has_datatable_configuration()
+    {
+        $response = $this->get(route('jaminan-sosial'));
+        $content = $response->getContent();
+
+        // Test DataTable configuration
+        $this->assertStringContainsString('processing: true', $content, 'DataTable processing config tidak ditemukan');
+        $this->assertStringContainsString('serverSide: true', $content, 'DataTable serverSide config tidak ditemukan');
+        $this->assertStringContainsString('ordering: false', $content, 'DataTable ordering config tidak ditemukan');
+
+        // Test API endpoint
+        $this->assertStringContainsString('/api/v1/data-presisi/jaminan-sosial', $content, 'API endpoint tidak ditemukan');
+    }
+
+    /** @test */
+    public function test_jaminan_sosial_has_filter_tahun_functionality()
+    {
+        $response = $this->get(route('jaminan-sosial'));
+        $content = $response->getContent();
+
+        // Test filter tahun change event listener exists
+        $this->assertStringContainsString("$('#filter-tahun').on('change'", $content, 'Event listener filter tahun tidak ditemukan');
+        $this->assertStringContainsString('jaminanSosial.ajax.reload()', $content, 'DataTable reload pada filter tahun tidak ditemukan');
+        $this->assertStringContainsString('grafikPie()', $content, 'Grafik reload pada filter tahun tidak ditemukan');
+    }
+
+    /** @test */
+    public function test_jaminan_sosial_has_detail_control_functionality()
+    {
+        $response = $this->get(route('jaminan-sosial'));
+        $content = $response->getContent();
+
+        // Test detail control for expandable rows
+        $this->assertStringContainsString('details-control', $content, 'Detail control class tidak ditemukan');
+        $this->assertStringContainsString("jaminanSosial.on('click', 'td.details-control'", $content, 'Event listener detail control tidak ditemukan');
+        $this->assertStringContainsString('row.child.isShown()', $content, 'Logika expand/collapse detail control tidak ditemukan');
+    }
+
+    /** @test */
+    public function test_jaminan_sosial_detail_button_has_correct_route()
+    {
+        $response = $this->get(route('jaminan-sosial'));
+        $content = $response->getContent();
+
+        // Test detail button route exists (rendered as actual URL)
+        $this->assertStringContainsString('jaminan-sosial/detail', $content, 'Route detail tidak ditemukan');
+        $this->assertStringContainsString('?data=__DATA__', $content, 'Parameter data pada route detail tidak ditemukan');
+    }
+
+    /** @test */
+    public function test_jaminan_sosial_uses_correct_api_filters()
+    {
+        $response = $this->get(route('jaminan-sosial'));
+        $content = $response->getContent();
+
+        // Test filter parameters in DataTable
+        $this->assertStringContainsString('"page[size]"', $content, 'Filter page[size] tidak ditemukan');
+        $this->assertStringContainsString('"page[number]"', $content, 'Filter page[number] tidak ditemukan');
+        $this->assertStringContainsString("'include': 'anggota,penduduk,rtm,keluarga'", $content, 'Include relationships tidak ditemukan');
+        $this->assertStringContainsString('"filter[search]"', $content, 'Filter search tidak ditemukan');
+    }
+}
diff --git a/tests/Feature/LaporanBulananDetailExportTest.php b/tests/Feature/LaporanBulananDetailExportTest.php
new file mode 100644
index 000000000..d8eafa6c4
--- /dev/null
+++ b/tests/Feature/LaporanBulananDetailExportTest.php
@@ -0,0 +1,58 @@
+<?php
+
+namespace Tests\Feature;
+
+use Tests\BaseTestCase;
+
+class LaporanBulananDetailExportTest extends BaseTestCase
+{
+    /** @test */
+    public function test_detail_page_has_export_excel_button()
+    {
+        // Set up session data yang diperlukan
+        session([
+            'bulanku' => 1,
+            'tahunku' => 2026,
+            'kode_kabupaten' => '35',
+        ]);
+
+        $response = $this->get(route('laporan-bulanan.detail-penduduk', [
+            'rincian' => 'awal',
+            'tipe' => 'wni_l',
+        ]));
+
+        $response->assertStatus(200);
+        $content = $response->getContent();
+
+        // Verifikasi tombol Export Excel ada dengan icon dan class yang benar
+        $this->assertStringContainsString('fa-file-excel', $content, 'Icon Excel tidak ditemukan');
+        $this->assertStringContainsString('Export Excel', $content, 'Label Export Excel tidak ditemukan');
+        $this->assertStringContainsString('btn-success', $content, 'Class btn-success tidak ditemukan');
+
+        // Verifikasi tombol lama (Cetak) sudah tidak ada
+        $this->assertStringNotContainsString('fa-print', $content, 'Icon print seharusnya sudah dihapus');
+        $this->assertStringNotContainsString('>Cetak<', $content, 'Label Cetak seharusnya sudah dihapus');
+    }
+
+    /** @test */
+    public function test_detail_page_export_excel_button_has_correct_route()
+    {
+        session([
+            'bulanku' => 1,
+            'tahunku' => 2026,
+            'kode_kabupaten' => '35',
+        ]);
+
+        $response = $this->get(route('laporan-bulanan.detail-penduduk', [
+            'rincian' => 'lahir',
+            'tipe' => 'wni_p',
+        ]));
+
+        $response->assertStatus(200);
+        $content = $response->getContent();
+
+        // Verifikasi URL export ada dengan parameter yang benar
+        $expectedRoutePattern = 'laporan-bulanan/export-excel-detail/lahir/wni_p';
+        $this->assertStringContainsString($expectedRoutePattern, $content, 'Route export excel detail tidak ditemukan');
+    }
+}