From cdb744d322caee8e447e1422a2326373bd68f043 Mon Sep 17 00:00:00 2001
From: Ahmad Afandi <ahmad.afandi85@gmail.com>
Date: Wed, 11 Feb 2026 11:00:19 +0700
Subject: [PATCH] Menambahkan detail untuk statistik pangan

---
 .../DataPresisiPanganController.php           |  11 +
 .../Controllers/StatistikPanganController.php |   2 +-
 .../views/components/filter-tahun.blade.php   |   3 +-
 .../data_presisi/pangan/detail_data.blade.php | 218 +++++
 .../data_presisi/pangan/index.blade.php       |   2 +-
 .../views/presisi/statistik/pangan.blade.php  | 772 +++++++++---------
 .../presisi/statistik/senibudaya.blade.php    |   2 +-
 routes/web.php                                |   1 +
 8 files changed, 620 insertions(+), 391 deletions(-)
 create mode 100644 resources/views/data_pokok/data_presisi/pangan/detail_data.blade.php

diff --git a/app/Http/Controllers/DataPresisiPanganController.php b/app/Http/Controllers/DataPresisiPanganController.php
index e614e8a50..0f4f10b7f 100644
--- a/app/Http/Controllers/DataPresisiPanganController.php
+++ b/app/Http/Controllers/DataPresisiPanganController.php
@@ -13,6 +13,17 @@ public function index()
         return view('data_pokok.data_presisi.pangan.index', compact('title'));
     }
 
+    public function detailData()
+    {
+        $colomn = '';
+        $title = 'Data Presisi Pangan '.request('judul');
+        $filter = request('filter');
+        if($filter['tipe'] && $filter['nilai']){
+            $colomn = $filter['tipe'].':'.$filter['nilai'];
+        }
+        return view('data_pokok.data_presisi.pangan.detail_data', compact('title', 'colomn'));
+    }
+
     public function detail(Request $request)
     {
         $data = json_decode($request->data);
diff --git a/app/Http/Controllers/StatistikPanganController.php b/app/Http/Controllers/StatistikPanganController.php
index 46228e038..51d40ec33 100644
--- a/app/Http/Controllers/StatistikPanganController.php
+++ b/app/Http/Controllers/StatistikPanganController.php
@@ -7,7 +7,7 @@ class StatistikPanganController extends Controller
     public function index()
     {
         return view('presisi.statistik.pangan', [
-            'detailLink' => url(''),
+            'detailLink' => url('data-presisi/pangan/detail_data'),
             'judul' => 'Pangan'            
         ]);
     }    
diff --git a/resources/views/components/filter-tahun.blade.php b/resources/views/components/filter-tahun.blade.php
index f23a189ce..37fe32661 100644
--- a/resources/views/components/filter-tahun.blade.php
+++ b/resources/views/components/filter-tahun.blade.php
@@ -3,10 +3,11 @@
         @php
         $currentYear = date('Y');
         $startYear = $currentYear - 5;
+        $selectedYear = $selectedYear ?? $currentYear;
         @endphp
         <option value="">Pilih tahun</option>
         @for($year = $currentYear; $year >= $startYear; $year--)
-        <option value="{{ $year }}" {{ $year == $currentYear ? 'selected' : '' }}>{{ $year }}</option>
+        <option value="{{ $year }}" {{ $year == $selectedYear ? 'selected' : '' }}>{{ $year }}</option>
         @endfor
     </select>
 </div>
\ No newline at end of file
diff --git a/resources/views/data_pokok/data_presisi/pangan/detail_data.blade.php b/resources/views/data_pokok/data_presisi/pangan/detail_data.blade.php
new file mode 100644
index 000000000..e4c071193
--- /dev/null
+++ b/resources/views/data_pokok/data_presisi/pangan/detail_data.blade.php
@@ -0,0 +1,218 @@
+@extends('layouts.index')
+
+@section('title', $title)
+
+@section('content_header')
+<h1>{{ $title }}</h1>
+@stop
+
+@section('content')
+@include('partials.breadcrumbs')
+
+<div class="row">
+    <div class="col-lg-12">
+        <div class="card card-outline card-primary">
+            <div class="card-header">
+                <div class="row">
+                    <x-filter-tahun :selectedYear="request('tahun')" />                    
+                </div>
+            </div>
+            <div class="card-body">
+                <div class="table-responsive">
+                    <table class="table table-striped" id="detail-pangan">
+                        <thead>
+                            <tr>
+                                <th>NO</th>
+                                <th>NIK</th>
+                                <th>NOMOR KK</th>
+                                <th>NAMA</th>
+                                <th>JENIS LAHAN</th>
+                                <th>LUAS LAHAN</th>
+                                <th>LUAS TANAM</th>
+                                <th>STATUS LAHAN</th>
+                                <th>KOMODITI UTAMA TANAMAN PANGAN</th>
+                                <th>KOMODITI TANAMAN PANGAN LAINNYA</th>
+                                <th>JUMLAH BERDASARKAN JENIS KOMODITI</th>
+                                <th>USIA KOMODITI</th>
+                                <th>JENIS PETERNAKAN</th>
+                                <th>JUMLAH POPULASI</th>
+                                <th>JENIS PERIKANAN</th>
+                                <th>FREKWENSI MAKANAN PERHARI</th>
+                                <th>FREKWENSI KONSUMSI SAYUR PERHARI</th>
+                                <th>FREKWENSI KONSUMSI BUAH PERHARI</th>
+                                <th>FREKWENSI KONSUMSI DAGING PERHARI</th>
+                                <th>LONGITUDE</th>
+                                <th>LATITUDE</th>
+                                <th>TANGGAL PENGISIAN</th>
+                                <th>STATUS PENGISIAN</th>
+                            </tr>
+                        </thead>
+                        <tbody></tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
+
+@section('js')
+<script nonce="{{ csp_nonce() }}">
+    document.addEventListener("DOMContentLoaded", function(event) {
+        const headers = @include('layouts.components.header_bearer_api_gabungan');
+        var url = new URL("{{ config('app.databaseGabunganUrl').'/api/v1/data-presisi/pangan' }}");
+        var pangan = $('#detail-pangan').DataTable({
+            processing: true,
+            serverSide: true,
+            autoWidth: false,
+            ordering: true,
+            searchPanes: {
+                viewTotal: false,
+                columns: [0]
+            },
+            ajax: {
+                url: url.href,
+                headers: headers,
+                method: 'get',
+                data: function(row) {
+                    const data = {
+                        "page[size]": row.length,
+                        "page[number]": (row.start / row.length) + 1,
+                        "filter[search]": row.search.value,
+                        "filter[tahun]": $('#filter-tahun').val(),                        
+                        "filter[colomn]": '{{ $colomn }}',
+                        "sort": (row.order[0]?.dir === "asc" ? "" : "-") + row.columns[row.order[0]?.column]?.name,
+                    };
+                    
+                    return data;
+                },
+                dataSrc: function(json) {
+                    json.recordsTotal = json.meta.pagination.total;
+                    json.recordsFiltered = json.meta.pagination.total;
+                    return json.data;
+                },
+            },
+            columnDefs: [{
+                targets: '_all',
+                className: 'text-nowrap',
+            }, {
+                targets: [0, 1, 2, 3, 4, 5],
+                orderable: false,
+                searchable: false,
+            }],
+            columns: [{
+                    data: null,
+                    orderable: false,
+                    render: function(data, type, row, meta) {
+                        return meta.row + meta.settings._iDisplayStart + 1;
+                    }
+                },
+                {
+                    data: 'attributes.nik',
+                    orderable: false,
+                },
+                {
+                    data: 'attributes.no_kk',
+                    orderable: false,
+                },
+                {
+                    data: 'attributes.nama',
+                    orderable: false,
+                },
+                {
+                    data: 'attributes.jenis_lahan',
+                    orderable: false
+                },
+                {
+                    data: 'attributes.luas_lahan',
+                    orderable: false
+                },
+                {
+                    data: 'attributes.luas_tanam',
+                    orderable: false
+                },
+                {
+                    data: 'attributes.status_lahan',
+                    orderable: false
+                },
+                {
+                    data: 'attributes.komoditi_utama_tanaman_pangan',
+                    orderable: false
+                },
+                {
+                    data: 'attributes.komoditi_tanaman_pangan_lainnya',
+                    orderable: false
+                },
+                {
+                    data: 'attributes.jumlah_berdasarkan_jenis_komoditi',
+                    orderable: false
+                },
+                {
+                    data: 'attributes.usia_komoditi',
+                    orderable: false
+                },
+                {
+                    data: 'attributes.jenis_peternakan',
+                    orderable: false
+                },
+                {
+                    data: 'attributes.jumlah_populasi',
+                    orderable: false
+                },
+                {
+                    data: 'attributes.jenis_perikanan',
+                    orderable: false
+                },
+                {
+                    data: 'attributes.frekwensi_makanan_perhari',
+                    orderable: false
+                },
+                {
+                    data: 'attributes.frekwensi_konsumsi_sayur_perhari',
+                    orderable: false
+                },
+                {
+                    data: 'attributes.frekwensi_konsumsi_buah_perhari',
+                    orderable: false
+                },
+                {
+                    data: 'attributes.frekwensi_konsumsi_daging_perhari',
+                    orderable: false
+                },
+                {
+                    data: 'attributes.longitude',
+                    orderable: false
+                },
+                {
+                    data: 'attributes.latitude',
+                    orderable: false
+                },
+                {
+                    data: 'attributes.tanggal_pengisian',
+                    orderable: false
+                },
+                {
+                    data: 'attributes.status_pengisian',
+                    orderable: false
+                },
+            ],
+            order: [
+                [10, 'asc']
+            ]
+        });
+        pangan.on('draw.dt', function() {
+            var PageInfo = $('#detail-pangan').DataTable().page.info();
+            pangan.column(0, {
+                page: 'current'
+            }).nodes().each(function(cell, i) {
+                cell.innerHTML = i + 1 + PageInfo.start;
+            });
+        });
+
+        // Event listener for year filter change
+        $('#filter-tahun').on('change', function() {
+            pangan.ajax.reload();            
+        });
+    });
+</script>
+@endsection
\ No newline at end of file
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 4b799bfea..fcf1b08ba 100644
--- a/resources/views/data_pokok/data_presisi/pangan/index.blade.php
+++ b/resources/views/data_pokok/data_presisi/pangan/index.blade.php
@@ -28,7 +28,7 @@
         <div class="card card-outline card-primary">
             <div class="card-header">
                 <div class="row">
-                    <x-filter-tahun />
+                    <x-filter-tahun :selectedYear="request('tahun')"/>
                     <div class="col-auto">
                         <x-print-button :print-url="url('data-presisi/pangan/cetak')" table-id="table-pangan" :filter="[]" />
                     </div>
diff --git a/resources/views/presisi/statistik/pangan.blade.php b/resources/views/presisi/statistik/pangan.blade.php
index db8c577e8..0f604936a 100644
--- a/resources/views/presisi/statistik/pangan.blade.php
+++ b/resources/views/presisi/statistik/pangan.blade.php
@@ -5,463 +5,461 @@
 @section('title', 'Data Statistik')
 
 @section('content_header')
-    <h1>Data Statistik {{ $judul }}</h1>
+<h1>Data Statistik {{ $judul }}</h1>
 @stop
 
 @section('content')
-    @include('partials.breadcrumbs')
-    <div class="row" id="tampilkan-statistik">
-        <div class="col-lg-3">
-            <div class="card">
-                <div class="card-header">
-                    <h3 class="card-title">Statistik {{ $judul }}</h3>
-                    <div class="card-tools">
-                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
-                            <i class="fas fa-minus"></i>
-                        </button>
-                    </div>
-                </div>
-                <div class="card-body p-0">
-                    <ul class="nav nav-pills flex-column" id="daftar-statistik">
-                    </ul>
+@include('partials.breadcrumbs')
+<div class="row" id="tampilkan-statistik">
+    <div class="col-lg-3">
+        <div class="card">
+            <div class="card-header">
+                <h3 class="card-title">Statistik {{ $judul }}</h3>
+                <div class="card-tools">
+                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                        <i class="fas fa-minus"></i>
+                    </button>
                 </div>
             </div>
+            <div class="card-body p-0">
+                <ul class="nav nav-pills flex-column" id="daftar-statistik">
+                </ul>
+            </div>
         </div>
-        <div class="col-lg-9">
-            <div class="card card-outline card-primary">
-                <div class="card-header">
-                    <div class="row">
-                        <h3 id="title-block"></h3>
+    </div>
+    <div class="col-lg-9">
+        <div class="card card-outline card-primary">
+            <div class="card-header">
+                <div class="row">
+                    <h3 id="title-block"></h3>
+                </div>
+                <div class="row">
+                    <x-filter-tahun />
+                    <div class="col-md-2">
+                        <button type="button" id="export-excel" class="btn btn-info btn-block btn-sm">
+                            <i class="fa fa-file-excel"></i>
+                            Excel
+                        </button>
                     </div>
-                    <div class="row">
-                        <div class="col-auto">
-                            <a class="btn btn-sm btn-secondary" data-toggle="collapse" href="#collapse-filter"
-                                role="button" aria-expanded="true" aria-controls="collapse-filter">
-                                <i class="fas fa-filter"></i>
-                            </a>
-                        </div>
-
-                        <div class="col-md-2">
-                            <button type="button" id="export-excel" class="btn btn-info btn-block btn-sm">
-                                <i class="fa fa-file-excel"></i>
-                                Excel
-                            </button>
-                        </div>
-                        <div class="col-md-2">
-                            <button id="btn-grafik" class="btn btn-sm btn-success btn-block btn-sm" data-toggle="collapse"
-                                href="#grafik-statistik" role="button" aria-expanded="false"
-                                aria-controls="grafik-statistik">
-                                <i class="fas fa-chart-bar"></i> Grafik
-                            </button>
-                        </div>
-                        <div class="col-md-2">
-                            <button id="btn-pie" class="btn btn-sm btn-warning btn-block btn-sm" data-toggle="collapse"
-                                href="#pie-statistik" role="button" aria-expanded="false" aria-controls="pie-statistik">
-                                <i class="fas fa-chart-pie"></i> Chart
-                            </button>
-                        </div>
+                    <div class="col-md-2">
+                        <button id="btn-grafik" class="btn btn-sm btn-success btn-block btn-sm" data-toggle="collapse"
+                            href="#grafik-statistik" role="button" aria-expanded="false"
+                            aria-controls="grafik-statistik">
+                            <i class="fas fa-chart-bar"></i> Grafik
+                        </button>
+                    </div>
+                    <div class="col-md-2">
+                        <button id="btn-pie" class="btn btn-sm btn-warning btn-block btn-sm" data-toggle="collapse"
+                            href="#pie-statistik" role="button" aria-expanded="false" aria-controls="pie-statistik">
+                            <i class="fas fa-chart-pie"></i> Chart
+                        </button>
                     </div>
                 </div>
-                <div class="card-body">
-                    <div class="row">
-                        <div class="col-md-12">
-                            <div id="grafik-statistik" class="collapse">
-                                <div class="chart" id="grafik">
-                                    <canvas id="barChart"></canvas>
-                                </div>
-                                <hr class="hr-chart">
+            </div>
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-md-12">
+                        <div id="grafik-statistik" class="collapse">
+                            <div class="chart" id="grafik">
+                                <canvas id="barChart"></canvas>
                             </div>
+                            <hr class="hr-chart">
+                        </div>
 
-                            <div id="pie-statistik" class="collapse">
-                                <div class="chart" id="pie">
-                                    <canvas id="donutChart"></canvas>
-                                </div>
-                                <hr class="hr-chart">
+                        <div id="pie-statistik" class="collapse">
+                            <div class="chart" id="pie">
+                                <canvas id="donutChart"></canvas>
                             </div>
+                            <hr class="hr-chart">
                         </div>
                     </div>
+                </div>
 
-                    <div class="table-responsive">
-                        <table class="table table-striped cell-border" id="tabel-data">
-                            <thead>
-                                <tr>
-                                    <th>No</th>
-                                    <th>Nilai</th>
-                                    <th>Jumlah</th>
-                                </tr>
-                            </thead>
-                            <tbody></tbody>
-                        </table>
-                    </div>
+                <div class="table-responsive">
+                    <table class="table table-striped cell-border" id="tabel-data">
+                        <thead>
+                            <tr>
+                                <th>No</th>
+                                <th>Nilai</th>
+                                <th>Jumlah</th>
+                            </tr>
+                        </thead>
+                        <tbody></tbody>
+                    </table>
                 </div>
             </div>
         </div>
     </div>
+</div>
 @endsection
 
 @section('js')
-    <script nonce="{{ csp_nonce() }}" src="{{ asset('assets/js/excellentexport.js') }}"></script>
-    @include('statistik.chart')
-    <script nonce="{{ csp_nonce() }}">
-        let data_grafik = [];
-        let nama_desa = `{{ session('desa.nama_desa') }}`;
-        let kategori = `{{ strtolower($judul) }}`;
-        let default_id = null;
-        document.addEventListener("DOMContentLoaded", function(event) {
-
-            const header = @include('layouts.components.header_bearer_api_gabungan');
-
-            var baseUrl = {!! json_encode(config('app.databaseGabunganUrl')) !!} + "/api/v1";
-
-            var urlKategoriStatistik = new URL(`${baseUrl}/data-presisi/pangan/kategori-statistik`);
-
-            $.ajax({
-                url: urlKategoriStatistik.href,
-                headers: header,
-                method: 'get',
-                success: function(response) {
-                    var daftarKategoriStatistik = response.data[0]['attributes']
-                    var html = ''
-
-                    Object.keys(daftarKategoriStatistik).forEach(function(index) {
-                        var id = index;
-                        var nama = daftarKategoriStatistik[index];
-
-                        html += `
+<script nonce="{{ csp_nonce() }}" src="{{ asset('assets/js/excellentexport.js') }}"></script>
+@include('statistik.chart')
+<script nonce="{{ csp_nonce() }}">
+    let data_grafik = [];
+    let nama_desa = `{{ session('desa.nama_desa') }}`;
+    let kategori = `{{ strtolower($judul) }}`;
+    let default_id = null;
+    document.addEventListener("DOMContentLoaded", function(event) {
+
+        const header = @include('layouts.components.header_bearer_api_gabungan');
+
+        var baseUrl = {!! json_encode(config('app.databaseGabunganUrl')) !!} + "/api/v1";
+
+        var urlKategoriStatistik = new URL(`${baseUrl}/data-presisi/pangan/kategori-statistik`);
+
+        $.ajax({
+            url: urlKategoriStatistik.href,
+            headers: header,
+            method: 'get',
+            success: function(response) {
+                var daftarKategoriStatistik = response.data[0]['attributes']
+                var html = ''
+
+                Object.keys(daftarKategoriStatistik).forEach(function(index) {
+                    var id = index;
+                    var nama = daftarKategoriStatistik[index];
+
+                    html += `
                         <li class="nav-item pilih-kategori">
                             <a data-id="${id}" data-nama="${nama}" class="nav-link ${id == default_id ? 'active' : ''}" href="#">
                                 <i class="fas fa-angle-right"></i> ${nama}
                             </a>
                         </li>
                     `
-                    });
-
-                    $('#daftar-statistik').html(html)
-                    $('#daftar-statistik').find('.pilih-kategori > a').eq(0).click();
-                }
-            });
+                });
 
-            $('#daftar-statistik').on('mouseenter', '.pilih-kategori > a', function() {
-                $(this).css('cursor', 'pointer')
-            });
+                $('#daftar-statistik').html(html)
+                $('#daftar-statistik').find('.pilih-kategori > a').eq(0).click();
+            }
+        });
 
-            // Helper function to create Excel export caption
-            function createExportCaption(categoryName, options = {}) {
-                const {
-                    includeDate = true,
-                        includeLocation = true,
-                        customTitle = null,
-                } = options;
-
-                var caption = {
-                    title: customTitle || `Data Statistik ${categoryName}`,
-                    period: '',
-                    date: '',
-                    location: ''
-                };
-
-
-                // Add export date
-                if (includeDate) {
-                    var now = new Date();
-                    caption.date =
-                        `Diekspor pada: ${now.toLocaleDateString('id-ID')} ${now.toLocaleTimeString('id-ID')}`;
-                }
+        $('#daftar-statistik').on('mouseenter', '.pilih-kategori > a', function() {
+            $(this).css('cursor', 'pointer')
+        });
 
-                // Add location info
-                if (includeLocation) {
-                    caption.location =
-                        `Kabupaten: {{ session('kabupaten.nama_kabupaten') ?? 'N/A' }} | Kecamatan: {{ session('kecamatan.nama_kecamatan') ?? 'N/A' }}`;
-                }
+        // Helper function to create Excel export caption
+        function createExportCaption(categoryName, options = {}) {
+            const {
+                includeDate = true,
+                    includeLocation = true,
+                    customTitle = null,
+            } = options;
+
+            var caption = {
+                title: customTitle || `Data Statistik ${categoryName}`,
+                period: '',
+                date: '',
+                location: ''
+            };
+
+
+            // Add export date
+            if (includeDate) {
+                var now = new Date();
+                caption.date =
+                    `Diekspor pada: ${now.toLocaleDateString('id-ID')} ${now.toLocaleTimeString('id-ID')}`;
+            }
 
-                return caption;
+            // Add location info
+            if (includeLocation) {
+                caption.location =
+                    `Kabupaten: {{ session('kabupaten.nama_kabupaten') ?? 'N/A' }} | Kecamatan: {{ session('kecamatan.nama_kecamatan') ?? 'N/A' }}`;
             }
 
-            // Function to generate dynamic Excel export
-            function exportToExcel() {
-                console.log('Starting Excel export...');
+            return caption;
+        }
 
-                // Check if table has data
-                var tableRows = $('#tabel-data tbody tr').length;
-                console.log('Table rows count:', tableRows);
+        // Function to generate dynamic Excel export
+        function exportToExcel() {
+            console.log('Starting Excel export...');
 
-                if (tableRows === 0) {
-                    alert('Tidak ada data untuk diekspor. Silakan pilih kategori terlebih dahulu.');
-                    return false;
-                }
+            // Check if table has data
+            var tableRows = $('#tabel-data tbody tr').length;
+            console.log('Table rows count:', tableRows);
 
-                // Get current active category
-                var activeCategory = $('#daftar-statistik .active');
-                var categoryName = activeCategory.data('nama') || 'Statistik';
-                var tahun = $("#tahun").val();
-                var bulan = $("#bulan").val();
+            if (tableRows === 0) {
+                alert('Tidak ada data untuk diekspor. Silakan pilih kategori terlebih dahulu.');
+                return false;
+            }
 
-                // Generate dynamic filename
-                var filename = `Statistik_${categoryName}_${nama_desa}`;
+            // Get current active category
+            var activeCategory = $('#daftar-statistik .active');
+            var categoryName = activeCategory.data('nama') || 'Statistik';
+            var tahun = $("#filter-tahun").val();
+            var bulan = $("#bulan").val();
 
-                // Clean filename - remove special characters
-                filename = filename.replace(/[^a-zA-Z0-9_-]/g, '_');
+            // Generate dynamic filename
+            var filename = `Statistik_${categoryName}_${nama_desa}`;
 
-                // Generate sheet name (max 31 chars for Excel)
-                var sheetName = categoryName.replace(/[^a-zA-Z0-9]/g, '_').substring(0, 31) || 'Statistik';
+            // Clean filename - remove special characters
+            filename = filename.replace(/[^a-zA-Z0-9_-]/g, '_');
 
-                // Create export caption using helper function
-                // Anda bisa mengkustomisasi caption dengan mengubah opsi di bawah ini:
-                var caption = createExportCaption(categoryName, {
-                    includeDate: true, // Tampilkan tanggal export
-                    includeLocation: false, // Tampilkan info kabupaten/kecamatan
-                    includePeriod: true, // Tampilkan info tahun/bulan
-                    customTitle: `Laporan Statistik {{ $judul }} Kategori ${categoryName}`, // Custom judul utama
-                });
+            // Generate sheet name (max 31 chars for Excel)
+            var sheetName = categoryName.replace(/[^a-zA-Z0-9]/g, '_').substring(0, 31) || 'Statistik';
+
+            // Create export caption using helper function
+            // Anda bisa mengkustomisasi caption dengan mengubah opsi di bawah ini:
+            var caption = createExportCaption(categoryName, {
+                includeDate: true, // Tampilkan tanggal export
+                includeLocation: false, // Tampilkan info kabupaten/kecamatan
+                includePeriod: true, // Tampilkan info tahun/bulan
+                customTitle: `Laporan Statistik {{ $judul }} Kategori ${categoryName}`, // Custom judul utama
+            });
 
-                // Create a clone of the table for export
-                var $originalTable = $('#tabel-data');
-                var $exportTable = $originalTable.clone();
-                $exportTable.attr('id', 'export-table');
+            // Create a clone of the table for export
+            var $originalTable = $('#tabel-data');
+            var $exportTable = $originalTable.clone();
+            $exportTable.attr('id', 'export-table');
 
-                // Add title rows before the header
-                var titleRows = '';
+            // Add title rows before the header
+            var titleRows = '';
+            titleRows +=
+                `<tr><td colspan="3" style="text-align: center; font-weight: bold; font-size: 18px; background-color: #2c3e50; color: white; padding: 10px;">${caption.title}</td></tr>`;
+
+            if (caption.period) {
                 titleRows +=
-                    `<tr><td colspan="3" style="text-align: center; font-weight: bold; font-size: 18px; background-color: #2c3e50; color: white; padding: 10px;">${caption.title}</td></tr>`;
+                    `<tr><td colspan="3" style="text-align: center; font-size: 12px; background-color: #ecf0f1; padding: 5px;">${caption.period}</td></tr>`;
+            }
 
-                if (caption.period) {
-                    titleRows +=
-                        `<tr><td colspan="3" style="text-align: center; font-size: 12px; background-color: #ecf0f1; padding: 5px;">${caption.period}</td></tr>`;
-                }
+            if (caption.date) {
+                titleRows +=
+                    `<tr><td colspan="3" style="text-align: center; font-size: 10px; background-color: #bdc3c7; padding: 3px;">${caption.date}</td></tr>`;
+            }
 
-                if (caption.date) {
-                    titleRows +=
-                        `<tr><td colspan="3" style="text-align: center; font-size: 10px; background-color: #bdc3c7; padding: 3px;">${caption.date}</td></tr>`;
-                }
+            // Add empty row for spacing
+            titleRows += '<tr><td colspan="3" style="height: 15px; background-color: white;"></td></tr>';
 
-                // Add empty row for spacing
-                titleRows += '<tr><td colspan="3" style="height: 15px; background-color: white;"></td></tr>';
+            // Insert title rows into the table
+            $exportTable.find('thead').prepend(titleRows);
 
-                // Insert title rows into the table
-                $exportTable.find('thead').prepend(titleRows);
+            // Add footer information
+            var footerRows = '';
+            footerRows += '<tr><td colspan="3" style="height: 15px; background-color: white;"></td></tr>';
+            footerRows +=
+                `<tr><td colspan="3" style="text-align: left; font-size: 10px; background-color: #ecf0f1; padding: 5px;">Catatan: Data statistik ini dihasilkan dari sistem informasi desa</td></tr>`;
 
-                // Add footer information
-                var footerRows = '';
-                footerRows += '<tr><td colspan="3" style="height: 15px; background-color: white;"></td></tr>';
+            if (caption.location) {
                 footerRows +=
-                    `<tr><td colspan="3" style="text-align: left; font-size: 10px; background-color: #ecf0f1; padding: 5px;">Catatan: Data statistik ini dihasilkan dari sistem informasi desa</td></tr>`;
-
-                if (caption.location) {
-                    footerRows +=
-                        `<tr><td colspan="3" style="text-align: left; font-size: 10px; background-color: #ecf0f1; padding: 5px;">${caption.location}</td></tr>`;
-                }
+                    `<tr><td colspan="3" style="text-align: left; font-size: 10px; background-color: #ecf0f1; padding: 5px;">${caption.location}</td></tr>`;
+            }
 
-                // Add footer to table
-                $exportTable.find('tbody').append(footerRows);
-
-                // Temporarily add the export table to DOM (hidden)
-                $exportTable.css('display', 'none');
-                $('body').append($exportTable);
-
-                // Create temporary anchor with proper attributes
-                var tempAnchor = document.createElement('a');
-                tempAnchor.download = filename + '.xls';
-                tempAnchor.href = '#';
-                tempAnchor.setAttribute('download', filename + '.xls');
-
-                // Add to DOM temporarily
-                document.body.appendChild(tempAnchor);
-
-                try {
-                    // Call ExcellentExport directly using the export table
-                    console.log('Calling ExcellentExport.excel...');
-                    var result = ExcellentExport.excel(tempAnchor, 'export-table', sheetName);
-                    console.log('Export result:', result);
-
-                    if (result) {
-                        tempAnchor.click(); // Trigger download
-                        // Optional: Show success message
-                        console.log('File Excel berhasil diunduh: ' + filename + '.xls');
-                    } else {
-                        console.error('Excel export failed - no result returned');
-                        alert('Gagal mengunduh file Excel. Silakan coba lagi.');
-                    }
-                } catch (error) {
-                    console.error('Excel export error:', error);
-                    alert('Terjadi kesalahan saat mengunduh Excel: ' + error.message);
-                } finally {
-                    // Clean up
-                    document.body.removeChild(tempAnchor);
-                    $('#export-table').remove(); // Remove the temporary table
+            // Add footer to table
+            $exportTable.find('tbody').append(footerRows);
+
+            // Temporarily add the export table to DOM (hidden)
+            $exportTable.css('display', 'none');
+            $('body').append($exportTable);
+
+            // Create temporary anchor with proper attributes
+            var tempAnchor = document.createElement('a');
+            tempAnchor.download = filename + '.xls';
+            tempAnchor.href = '#';
+            tempAnchor.setAttribute('download', filename + '.xls');
+
+            // Add to DOM temporarily
+            document.body.appendChild(tempAnchor);
+
+            try {
+                // Call ExcellentExport directly using the export table
+                console.log('Calling ExcellentExport.excel...');
+                var result = ExcellentExport.excel(tempAnchor, 'export-table', sheetName);
+                console.log('Export result:', result);
+
+                if (result) {
+                    tempAnchor.click(); // Trigger download
+                    // Optional: Show success message
+                    console.log('File Excel berhasil diunduh: ' + filename + '.xls');
+                } else {
+                    console.error('Excel export failed - no result returned');
+                    alert('Gagal mengunduh file Excel. Silakan coba lagi.');
                 }
-
-                return result;
+            } catch (error) {
+                console.error('Excel export error:', error);
+                alert('Terjadi kesalahan saat mengunduh Excel: ' + error.message);
+            } finally {
+                // Clean up
+                document.body.removeChild(tempAnchor);
+                $('#export-table').remove(); // Remove the temporary table
             }
 
-            $('#export-excel').on('click', function() {
-                console.log('Export button clicked');
-                exportToExcel();
-            });
+            return result;
+        }
 
-            $('#btn-grafik').on('click', function() {
-                $("#pie-statistik").collapse('hide');
-            });
+        $('#export-excel').on('click', function() {
+            console.log('Export button clicked');
+            exportToExcel();
+        });
 
-            $('#btn-pie').on('click', function() {
-                $("#grafik-statistik").collapse('hide')
-            });
+        $('#btn-grafik').on('click', function() {
+            $("#pie-statistik").collapse('hide');
+        });
 
-            $('#daftar-statistik').on('click', '.pilih-kategori > a', function() {
-                var id = $(this).data('id')
+        $('#btn-pie').on('click', function() {
+            $("#grafik-statistik").collapse('hide')
+        });
 
-                $('.pilih-kategori > a').removeClass('active')
-                $(this).addClass('active')
-                $('#title-block').html($(this).text())
-                urlStatistik.searchParams.set('kategori', id);
+        $('#daftar-statistik').on('click', '.pilih-kategori > a', function() {
+            var id = $(this).data('id')
 
-                statistik.ajax.url(urlStatistik.href, {
-                    headers: header,
-                }).load();
-            });
-            const urlDetailLink = `{{ $detailLink }}?kategori=${kategori}`;
-            var urlStatistik = new URL(`${baseUrl}/data-presisi/pangan/statistik`);
-            urlStatistik.searchParams.set('kategori', default_id);
-            urlStatistik.searchParams.set("kode_kabupaten", "{{ session('kabupaten.kode_kabupaten') ?? '' }}");
-            urlStatistik.searchParams.set("kode_kecamatan", "{{ session('kecamatan.kode_kecamatan') ?? '' }}");
-
-            const desaId = parseInt("{{ session('desa.id') ?? '0' }}", 10);
-            urlStatistik.searchParams.set("config_desa", isNaN(desaId) ? 0 : desaId);
-
-            var statistik = $('#tabel-data').DataTable({
-                processing: true,
-                serverSide: true,
-                autoWidth: false,
-                ordering: false,
-                searching: false,
-                deferLoading: 0,
-                paging: false,
-                info: false,
-                ajax: {
-                    url: urlStatistik.href,
-                    headers: header,
-                    method: 'get',
-                    data: function(row) {
-                        return {
-
-                        };
-                    },
-                    dataSrc: function(json) {
-                        if (json.data && json.data.length > 0) {
-                            data_grafik = [];
-                            json.data.forEach(function(item, index) {
-                                data_grafik.push({
-                                    nama: item.attributes.nilai,
-                                    jumlah: item.attributes.jumlah
-                                })
+            $('.pilih-kategori > a').removeClass('active')
+            $(this).addClass('active')
+            $('#title-block').html($(this).text())
+            urlStatistik.searchParams.set('kategori', id);
+
+            statistik.ajax.url(urlStatistik.href, {
+                headers: header,
+            }).load();
+        });
+        const urlDetailLink = `{{ $detailLink }}?kategori=${kategori}`;
+        var urlStatistik = new URL(`${baseUrl}/data-presisi/pangan/statistik`);
+        urlStatistik.searchParams.set('kategori', default_id);
+        urlStatistik.searchParams.set("kode_kabupaten", "{{ session('kabupaten.kode_kabupaten') ?? '' }}");
+        urlStatistik.searchParams.set("kode_kecamatan", "{{ session('kecamatan.kode_kecamatan') ?? '' }}");
+
+        const desaId = parseInt("{{ session('desa.id') ?? '0' }}", 10);
+        urlStatistik.searchParams.set("config_desa", isNaN(desaId) ? 0 : desaId);
+
+        var statistik = $('#tabel-data').DataTable({
+            processing: true,
+            serverSide: true,
+            autoWidth: false,
+            ordering: false,
+            searching: false,
+            deferLoading: 0,
+            paging: false,
+            info: false,
+            ajax: {
+                url: urlStatistik.href,
+                headers: header,
+                method: 'get',
+                data: function(row) {
+                    return {
+                        "tahun": $('#filter-tahun').val(),
+                    };
+                },
+                dataSrc: function(json) {
+                    if (json.data && json.data.length > 0) {
+                        data_grafik = [];
+                        json.data.forEach(function(item, index) {
+                            data_grafik.push({
+                                nama: item.attributes.nilai,
+                                jumlah: item.attributes.jumlah
                             })
+                        })
 
-                            grafikPie()
+                        grafikPie()
 
-                            return json.data;
-                        }
+                        return json.data;
+                    }
 
-                        return [];
-                    },
+                    return [];
                 },
-                columnDefs: [{
-                        targets: '_all',
-                        className: 'text-nowrap',
-                    },
-                    {
-                        targets: [2],
-                        className: 'dt-body-right',
-                    },
-                ],
-                columns: [{
-                    data: null,
-                    render: function(data, type, row, meta) {
-                        return meta.row + 1;
+            },
+            columnDefs: [{
+                    targets: '_all',
+                    className: 'text-nowrap',
+                },
+                {
+                    targets: [2],
+                    className: 'dt-body-right',
+                },
+            ],
+            columns: [{
+                data: null,
+                render: function(data, type, row, meta) {
+                    return meta.row + 1;
+                }
+            }, {
+                data: function(data) {
+                    const nilai = data.attributes?.nilai || data.id || '';
+
+                    if (nilai !== 'JUMLAH' && nilai !== 'BELUM MENGISI' && nilai !==
+                        'TOTAL') {
+                        let judul = $('.pilih-kategori > a.active').text().trim() + ' : ' + nilai;
+                        let urlDetail = new URL(urlDetailLink);
+                        urlDetail.searchParams.set('filter[nilai]', data.id);
+                        urlDetail.searchParams.set('filter[tipe]', $('.pilih-kategori > a.active')
+                            .data('id'));
+                        urlDetail.searchParams.set('judul', judul);
+                        urlDetail.searchParams.set('tahun',$('#filter-tahun').val());
+                        urlDetail.searchParams.set('chart-view', true);
+
+                        return `<a target="_blank" href="${urlDetail.href}">${nilai}</a>`
                     }
-                }, {
-                    data: function(data) {
-                        const nilai = data.attributes?.nilai || data.id || '';
-
-                        if (nilai !== 'JUMLAH' && nilai !== 'BELUM MENGISI' && nilai !==
-                            'TOTAL') {
-                            let judul = $('.pilih-kategori > a.active').text() + ' : ' + nilai;
-                            let urlDetail = new URL(urlDetailLink);
-                            urlDetail.searchParams.set('filter[nilai]', nilai);
-                            urlDetail.searchParams.set('judul', judul);
-                            urlDetail.searchParams.set('nama', nilai);
-                            urlDetail.searchParams.set('tipe', $('.pilih-kategori > a.active')
-                                .text().trim());
-                            urlDetail.searchParams.set('chart-view', true);
-
-                            return `<a target="_blank" href="${urlDetail.href}">${nilai}</a>`
-                        }
-
-                        return nilai;
-                    },
-                }, {
-                    data: function(data) {
-                        const nilai = data.attributes?.nilai || data.id || '';
-                        const jumlah = data.attributes?.jumlah || 0;
-
-                        if (nilai !== 'JUMLAH' && nilai !== 'BELUM MENGISI' && nilai !==
-                            'TOTAL') {
-                            let judul = $('.pilih-kategori > a.active').text() + ' : ' + nilai;
-                            let urlDetail = new URL(urlDetailLink);
-                            urlDetail.searchParams.set('filter[nilai]', nilai);
-                            urlDetail.searchParams.set('judul', judul);
-                            return `<a target="_blank" href="${urlDetail.href}">${jumlah}</a>`
-                        }
-
-                        return jumlah;
-                    },
-                }]
-            });
 
-            statistik.on('draw.dt', function() {
-                var dataTable = $('#tabel-data').DataTable();
-                var pageInfo = dataTable.page.info();
-                var recordsTotal = dataTable.data().count();
+                    return nilai;
+                },
+            }, {
+                data: function(data) {
+                    const nilai = data.attributes?.nilai || data.id || '';
+                    const jumlah = data.attributes?.jumlah || 0;
+
+                    if (nilai !== 'JUMLAH' && nilai !== 'BELUM MENGISI' && nilai !==
+                        'TOTAL') {
+                        let judul = $('.pilih-kategori > a.active').text() + ' : ' + nilai;
+                        let urlDetail = new URL(urlDetailLink);
+                        urlDetail.searchParams.set('filter[nilai]', nilai);
+                        urlDetail.searchParams.set('judul', judul);
+                        return `<a target="_blank" href="${urlDetail.href}">${jumlah}</a>`
+                    }
 
-                statistik.column(0, {
-                    page: 'current'
-                }).nodes().each(function(cell, i) {
-                    cell.innerHTML = i + 1 + pageInfo.start;
-                });
-            });
+                    return jumlah;
+                },
+            }]
+        });
 
-            $('#filter').on('click', function(e) {
-                statistik.draw();
-            });
+        statistik.on('draw.dt', function() {
+            var dataTable = $('#tabel-data').DataTable();
+            var pageInfo = dataTable.page.info();
+            var recordsTotal = dataTable.data().count();
 
-            $(document).on('click', '#reset', function(e) {
-                e.preventDefault();
-                statistik.ajax.reload();
+            statistik.column(0, {
+                page: 'current'
+            }).nodes().each(function(cell, i) {
+                cell.innerHTML = i + 1 + pageInfo.start;
             });
         });
-    </script>
-@endsection
-@push('css')
-    <style nonce="{{ csp_nonce() }}">
-        #barChart {
-            min-height: 250px;
-            height: 250px;
-            max-height: 250px;
-            max-width: 100%;
-        }
-
-        #donutChart {
-            min-height: 250px;
-            height: 250px;
-            max-height: 250px;
-            max-width: 100%;
-        }
 
-        hr.hr-chart {
-            margin-right: -20px;
-            margin-left: -20px;
-        }
+        $('#filter').on('click', function(e) {
+            statistik.draw();
+        });
 
-        a[target="_blank"] {
-            color: blue;
-        }
-    </style>
-@endpush
+        // Event listener for year filter change
+        $('#filter-tahun').on('change', function() {
+            statistik.ajax.reload();
+        });
+        $(document).on('click', '#reset', function(e) {
+            e.preventDefault();
+            statistik.ajax.reload();
+        });
+    });
+</script>
+@endsection
+@push('css')
+<style nonce="{{ csp_nonce() }}">
+    #barChart {
+        min-height: 250px;
+        height: 250px;
+        max-height: 250px;
+        max-width: 100%;
+    }
+
+    #donutChart {
+        min-height: 250px;
+        height: 250px;
+        max-height: 250px;
+        max-width: 100%;
+    }
+
+    hr.hr-chart {
+        margin-right: -20px;
+        margin-left: -20px;
+    }
+
+    a[target="_blank"] {
+        color: blue;
+    }
+</style>
+@endpush
\ No newline at end of file
diff --git a/resources/views/presisi/statistik/senibudaya.blade.php b/resources/views/presisi/statistik/senibudaya.blade.php
index 50e0e0f57..44506d8ae 100644
--- a/resources/views/presisi/statistik/senibudaya.blade.php
+++ b/resources/views/presisi/statistik/senibudaya.blade.php
@@ -389,7 +389,7 @@ className: 'dt-body-right',
                             urlDetail.searchParams.set('nama', nilai);
                             urlDetail.searchParams.set('tipe', $('.pilih-kategori > a.active').text().trim());
                             urlDetail.searchParams.set('chart-view', true);
-
+                            
                             return `<a target="_blank" href="${urlDetail.href}">${nilai}</a>`
                         }
 
diff --git a/routes/web.php b/routes/web.php
index 788511842..013484a95 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -316,6 +316,7 @@
         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('detail_data', [App\Http\Controllers\DataPresisiPanganController::class, 'detailData'])->name('data-pokok.data-presisi-pangan.detail_data');
             Route::get('cetak', [App\Http\Controllers\DataPresisiPanganController::class, 'cetak'])->name('data-pokok.data-presisi-pangan.cetak');
         })
             ->middleware(['permission:datapresisi-pangan-read']);