diff --git a/.gitignore b/.gitignore
index 5615236f..0e7b63b7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,4 @@ package-lock.json
 /playwright-report/
 .env.e2e
 /template_ai/
+AGENTS.md
diff --git a/app/Http/Controllers/DataPresisiPapanController.php b/app/Http/Controllers/DataPresisiPapanController.php
new file mode 100644
index 00000000..3f4450e4
--- /dev/null
+++ b/app/Http/Controllers/DataPresisiPapanController.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\View\View;
+
+class DataPresisiPapanController extends Controller
+{
+    /**
+     * Display detail data presisi papan dengan filter opsional.
+     *
+     * @param Request $request HTTP request instance     
+     * @return View View detail data dengan DataTables
+     */
+    public function detailData(Request $request): View
+    {
+        $colomn = '';
+        $title = 'Data Presisi Papan - ' . $request->input('judul');
+        $title = htmlspecialchars(strip_tags($title), ENT_QUOTES, 'UTF-8');
+        $filter = $request->input('filter');
+
+        if (isset($filter['tipe'], $filter['nilai']) && $filter['tipe'] && $filter['nilai']) {
+            $colomn = $filter['tipe'] . ':' . $filter['nilai'];
+        }
+
+        return view('data_pokok.data_presisi.papan.detail_data', compact('title', 'colomn'));
+    }
+}
diff --git a/app/Http/Controllers/StatistikPapanController.php b/app/Http/Controllers/StatistikPapanController.php
index cab69a9f..2dc5bf78 100644
--- a/app/Http/Controllers/StatistikPapanController.php
+++ b/app/Http/Controllers/StatistikPapanController.php
@@ -7,7 +7,7 @@ class StatistikPapanController extends Controller
     public function index()
     {
         return view('presisi.statistik.papan', [
-            'detailLink' => url(''),
+            'detailLink' => url('data-presisi/papan/detail_data'),
             'judul' => 'Papan'            
         ]);
     }    
diff --git a/resources/views/data_pokok/data_presisi/papan/detail_data.blade.php b/resources/views/data_pokok/data_presisi/papan/detail_data.blade.php
new file mode 100644
index 00000000..08efef40
--- /dev/null
+++ b/resources/views/data_pokok/data_presisi/papan/detail_data.blade.php
@@ -0,0 +1,184 @@
+@extends('layouts.index')
+
+@section('title', $title)
+
+@section('content_header')
+<h1>{{ html_entity_decode($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-papan">
+                        <thead>
+                            <tr>
+                                <th>NO</th>
+                                <th>NIK</th>
+                                <th>NOMOR KK</th>
+                                <th>NAMA</th>
+                                <th>STATUS KEPEMILIKAN</th>
+                                <th>LUAS LANTAI (M²)</th>
+                                <th>JENIS LANTAI</th>
+                                <th>JENIS DINDING</th>
+                                <th>SUMBER AIR MINUM</th>
+                                <th>SUMBER PENERANGAN</th>
+                                <th>DAYA TERPASANG</th>
+                                <th>DAYA TERPASANG 2</th>
+                                <th>DAYA TERPASANG 3</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/papan' }}");
+        var papan = $('#detail-papan').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.kd_stat_bangunan_tinggal",
+                    defaultContent:  'N/A',
+                    orderable: false,
+                },
+                {
+                    data: "attributes.luas_lantai",
+                    defaultContent:  'N/A',
+                    orderable: false,
+                },
+                {
+                    data: "attributes.kd_jenis_lantai_terluas",
+                    defaultContent:  'N/A',
+                    orderable: false,
+                },
+                {
+                    data: "attributes.kd_jenis_dinding",                    
+                    defaultContent:  'N/A',
+                    orderable: false,
+                },
+                {
+                    data: "attributes.kd_sumber_air_minum",                    
+                    defaultContent:  'N/A',
+                    orderable: false,
+                },
+                {
+                    data: "attributes.kd_sumber_penerangan_utama",
+                    defaultContent:  'N/A',
+                    orderable: false,
+                },
+                {
+                    data: "attributes.kd_daya_terpasang",
+                    defaultContent:  'N/A',
+                    orderable: false,
+                },
+                {
+                    data: "attributes.kd_daya_terpasang2",
+                    defaultContent:  'N/A',
+                    orderable: false,
+                },
+                {
+                    data: "attributes.kd_daya_terpasang3",
+                    defaultContent:  'N/A',
+                    orderable: false,
+                },                
+                {
+                    data: 'attributes.tanggal_pengisian',
+                    orderable: false
+                },
+                {
+                    data: 'attributes.status_pengisian',
+                    orderable: false
+                },
+            ],            
+        });
+        papan.on('draw.dt', function() {
+            var PageInfo = $('#detail-papan').DataTable().page.info();
+            papan.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() {
+            papan.ajax.reload();
+        });
+    });
+</script>
+@endsection
\ No newline at end of file
diff --git a/resources/views/presisi/statistik/papan.blade.php b/resources/views/presisi/statistik/papan.blade.php
index f51af8e3..50c1d0df 100644
--- a/resources/views/presisi/statistik/papan.blade.php
+++ b/resources/views/presisi/statistik/papan.blade.php
@@ -9,365 +9,364 @@
 @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">
-                        <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="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/papan/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');        
+        let tipeValue, judulUtama;
+        var baseUrl = {!!json_encode(config('app.databaseGabunganUrl')) !!} + "/api/v1";
+
+        var urlKategoriStatistik = new URL(`${baseUrl}/data-presisi/papan/kategori-statistik`);
+        const filterTahun = $('#filter-tahun');
+        $.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').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').on('mouseenter', '.pilih-kategori > a', function() {
+            $(this).css('cursor', 'pointer')
+        });
 
-            // Helper function to create Excel export caption
-            function createExportCaption(categoryName, options = {}) {
-                const {
-                    includeDate = true,
+        // Helper function to create Excel export caption
+        function createExportCaption(categoryName, options = {}) {
+            const {
+                includeDate = true,
                     includeLocation = true,
                     customTitle = null,
-                } = options;
+            } = options;
 
-                var caption = {
-                    title: customTitle || `Data Statistik ${categoryName}`,
-                    period: '',
-                    date: '',
-                    location: ''
-                };
+            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')}`;
-                }
-
-                // Add location info
-                if (includeLocation) {
-                    caption.location =
-                        `Kabupaten: {{ session('kabupaten.nama_kabupaten') ?? 'N/A' }} | Kecamatan: {{ session('kecamatan.nama_kecamatan') ?? 'N/A' }}`;
-                }
+            // 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 = $("#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 a clone of the table for export
-                var $originalTable = $('#tabel-data');
-                var $exportTable = $originalTable.clone();
-                $exportTable.attr('id', 'export-table');
+            // 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');
+
+            // 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>`;
 
-                // Add title rows before the header
-                var titleRows = '';
+            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');
+        });
+
+        $('#btn-pie').on('click', function() {
+            $("#grafik-statistik").collapse('hide')
+        });
 
-            $('#daftar-statistik').on('click', '.pilih-kategori > a', function () {
-                var id = $(this).data('id')
+        $('#daftar-statistik').on('click', '.pilih-kategori > a', function() {
+            var id = $(this).data('id')
+            tipeValue = id
+            judulUtama = $(this).text().trim()
+            $('.pilih-kategori > a').removeClass('active')
+            $(this).addClass('active')
+            $('#title-block').html($(this).text())            
+            urlStatistik.searchParams.set('kategori', id);
 
-                $('.pilih-kategori > a').removeClass('active')
-                $(this).addClass('active')
-                $('#title-block').html($(this).text())
-                urlStatistik.searchParams.set('kategori', id);
+            statistik.ajax.url(urlStatistik.href, {
 
-                statistik.ajax.url(urlStatistik.href, {
-                    
-                }).load();
-            });
-            const urlDetailLink = `{{ $detailLink }}?kategori=${kategori}`;
-            var urlStatistik = new URL(`${baseUrl}/data-presisi/papan/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: true,
-                order: [
-                    [2, 'desc']
-                ],
-                searching: false,
-                deferLoading: 0,
-                paging: false,
-                info: false,
-                ajax: {
-                    url: urlStatistik.href,
-                    headers: header,
-                    method: 'get',
-                    data: function (row) {
-                        return {
-                            "tahun": $('#filter-tahun').val(),
-                            "sort": (row.order[0]?.dir === "asc" ? "" : "-") + row.columns[row
+            }).load();
+        });
+        const urlDetailLink = `{{ $detailLink }}?kategori=${kategori}`;        
+        var urlStatistik = new URL(`${baseUrl}/data-presisi/papan/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: true,
+            order: [
+                [2, 'desc']
+            ],
+            searching: false,
+            deferLoading: 0,
+            paging: false,
+            info: false,
+            ajax: {
+                url: urlStatistik.href,
+                headers: header,
+                method: 'get',
+                data: function(row) {
+                    return {
+                        "tahun": filterTahun.val(),
+                        "sort": (row.order[0]?.dir === "asc" ? "" : "-") + row.columns[row
                                 .order[0]
                                 ?.column]
-                                ?.name
-                        };
-                    },
-                    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
-                                })
+                            ?.name
+                    };
+                },
+                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
                             })
+                        })
 
-                            if (data_grafik.length > 2) {
-                                grafikPie()
-                            }                            
-
-                            return json.data;
+                        if (data_grafik.length > 2) {
+                            grafikPie()
                         }
 
-                        return [];
-                    },
+                        return json.data;
+                    }
+
+                    return [];
                 },
-                columnDefs: [{
+            },
+            columnDefs: [{
                     targets: '_all',
                     className: 'text-nowrap',
                 },
@@ -375,104 +374,103 @@ className: 'text-nowrap',
                     targets: [2],
                     className: 'dt-body-right',
                 },
-                ],
-                columns: [{
-                    data: null,
-                    orderable: false,
-                    render: function (data, type, row, meta) {
-                        return meta.row + 1;
+            ],
+            columns: [{
+                data: null,
+                orderable: false,
+                render: function(data, type, row, meta) {
+                    return meta.row + 1;
+                }
+            }, {
+                data: function(data) {
+                    const nilai = data.attributes?.nilai || data.id || '';
+                    const nilaiDb = data.attributes?.nilai_db || '';
+                    if (nilai !== 'JUMLAH' && nilai !== 'BELUM MENGISI' && nilai !== 'TOTAL') {
+                        let judul = judulUtama + ' : ' + nilai;
+                        let urlDetail = new URL(urlDetailLink);
+                        urlDetail.searchParams.set('judul', judul);
+                        urlDetail.searchParams.set('filter[nilai]', nilaiDb);
+                        urlDetail.searchParams.set('filter[tipe]', tipeValue);
+                        urlDetail.searchParams.set('tahun', filterTahun.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('tahun', $('#filter-tahun').val());
-                            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;
-                    },
-                    orderable: false,
-                }, {
-                    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 nilai;
+                },
+                orderable: false,
+            }, {
+                data: function(data) {
+                    const nilai = data.attributes?.nilai || data.id || '';
+                    const nilaiDb = data.attributes?.nilai_db || '';
+                    const jumlah = data.attributes?.jumlah || 0;
+
+                    let judul = judulUtama + ' : ' + nilai;
+                    let urlDetail = new URL(urlDetailLink);                    
+                    urlDetail.searchParams.set('judul', judul);
+                    urlDetail.searchParams.set('filter[nilai]', nilaiDb);                            
+                    urlDetail.searchParams.set('filter[tipe]', tipeValue);
+                    urlDetail.searchParams.set('tahun', filterTahun.val());
+                    return `<a target="_blank" href="${urlDetail.href}">${jumlah}</a>`
 
-                        return jumlah;
-                    },
-                    orderable: true,
-                    name: 'jumlah',
-                }]
-            });
+                },
+                orderable: true,
+                name: 'jumlah',
+            }]
+        });
 
-            statistik.on('draw.dt', function () {
-                var dataTable = $('#tabel-data').DataTable();
-                var pageInfo = dataTable.page.info();
-                var recordsTotal = dataTable.data().count();
+        statistik.on('draw.dt', function() {
+            var dataTable = $('#tabel-data').DataTable();
+            var pageInfo = dataTable.page.info();
+            var recordsTotal = dataTable.data().count();
 
-                statistik.column(0, {
-                    page: 'current'
-                }).nodes().each(function (cell, i) {
-                    cell.innerHTML = i + 1 + pageInfo.start;
-                });
+            statistik.column(0, {
+                page: 'current'
+            }).nodes().each(function(cell, i) {
+                cell.innerHTML = i + 1 + pageInfo.start;
             });
+        });
 
-            $('#filter').on('click', function (e) {
-                statistik.draw();
-            });
+        $('#filter').on('click', function(e) {
+            statistik.draw();
+        });
 
-            // Event listener for year filter change
-            $('#filter-tahun').on('change', function () {
-                statistik.ajax.reload();
-            });
+        // Event listener for year filter change
+        filterTahun.on('change', function() {
+            statistik.ajax.reload();
+        });
 
-            $(document).on('click', '#reset', function (e) {
-                e.preventDefault();
-                statistik.ajax.reload();
-            });
+        $(document).on('click', '#reset', function(e) {
+            e.preventDefault();
+            statistik.ajax.reload();
         });
-    </script>
+    });
+</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>
+<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/routes/web.php b/routes/web.php
index 3572c6aa..d3e882cf 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -331,6 +331,11 @@
             Route::get('cetak', [App\Http\Controllers\DataPresisiPanganController::class, 'cetak'])->name('data-pokok.data-presisi-pangan.cetak');
         })
             ->middleware(['permission:datapresisi-pangan-read']);
+        
+        Route::prefix('papan')->group(function () {            
+            Route::get('detail_data', [App\Http\Controllers\DataPresisiPapanController::class, 'detailData'])->name('data-pokok.data-presisi-papan.detail_data');            
+        })
+            ->middleware(['permission:datapresisi-papan-read']);
 
         Route::prefix('sandang')->group(function () {                        
             Route::get('detail_data', [App\Http\Controllers\DataPresisiSandangController::class, 'detailData'])->name('data-pokok.data-presisi-sandang.detail_data');            
diff --git a/tests/Feature/DataPresisiPapanControllerTest.php b/tests/Feature/DataPresisiPapanControllerTest.php
new file mode 100644
index 00000000..4a7ff597
--- /dev/null
+++ b/tests/Feature/DataPresisiPapanControllerTest.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace Tests\Feature;
+
+use App\Models\User;
+use Illuminate\Foundation\Testing\DatabaseTransactions;
+use Tests\BaseTestCase;
+
+class DataPresisiPapanControllerTest extends BaseTestCase
+{
+    use DatabaseTransactions;
+
+    public function test_detail_data_returns_success()
+    {
+        $user = User::first();
+        $response = $this->actingAsAdmin($user)
+            ->get(route('data-pokok.data-presisi-papan.detail_data', [
+                'judul' => 'Test Judul',
+                'filter' => [
+                    'tipe' => 'test_tipe',
+                    'nilai' => 'test_nilai'
+                ]
+            ]));
+
+        $response->assertStatus(200);
+        $response->assertViewIs('data_pokok.data_presisi.papan.detail_data');
+    }
+
+    public function test_detail_data_returns_success_without_filter()
+    {
+        $user = User::first();
+        $response = $this->actingAsAdmin($user)
+            ->get(route('data-pokok.data-presisi-papan.detail_data', [
+                'judul' => 'Test Judul Tanpa Filter'
+            ]));
+
+        $response->assertStatus(200);
+        $response->assertViewIs('data_pokok.data_presisi.papan.detail_data');
+    }
+}
\ No newline at end of file