From aef27704f20e439578d799229d734840c361429a Mon Sep 17 00:00:00 2001
From: ahmadafriadi <ahmadafriadi0@gmail.com>
Date: Mon, 12 Oct 2026 10:22:01 +0700
Subject: [PATCH] Update Karakteristik Petani

---
 .../dashboard/karakteristik-petani.blade.php  | 361 +++++++++++++-----
 routes/web.php                                |   2 +-
 2 files changed, 277 insertions(+), 86 deletions(-)

diff --git a/resources/views/dashboard/karakteristik-petani.blade.php b/resources/views/dashboard/karakteristik-petani.blade.php
index 2216fa1..27d636c 100644
--- a/resources/views/dashboard/karakteristik-petani.blade.php
+++ b/resources/views/dashboard/karakteristik-petani.blade.php
@@ -3,6 +3,42 @@
 @push('style')
 <link rel="stylesheet" href="{{ asset('assets/vendor/libs/apex-charts/apex-charts.css') }}" />
 <style>
+    .chart-group-header-toggle {
+        cursor: pointer;
+        background-color: rgba(var(--bs-primary-rgb, 115, 103, 240), 0.08);
+        border-inline-start: 4px solid var(--bs-primary, #7367f0);
+        box-shadow: none;
+        transition: background-color 0.2s ease;
+    }
+    .chart-group-header-toggle:hover {
+        background-color: rgba(var(--bs-primary-rgb, 115, 103, 240), 0.13);
+    }
+    .chart-group-header-toggle .card-body {
+        padding: 12px 16px;
+    }
+    .chart-group-header-toggle h5 {
+        font-size: 1rem;
+        font-weight: 600;
+        margin-bottom: 2px;
+    }
+    .chart-group-header-toggle p {
+        font-size: 0.8125rem;
+        line-height: 1.4;
+    }
+    .chart-group-header-toggle:focus-visible {
+        outline: 2px solid var(--bs-primary);
+        outline-offset: 3px;
+    }
+    .chart-group-icon-toggle {
+        width: 34px;
+        height: 34px;
+        flex-shrink: 0;
+    }
+    .chart-group-icon-toggle .icon-base {
+        font-size: 24px;
+        width: 24px;
+        height: 24px;
+    }
     .readiness-score-list { display: grid; gap: 12px; }
     .readiness-score-row { display: flex; align-items: baseline; gap: 10px; font-size: 0.8125rem; line-height: 1.5; }
     .readiness-score-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
@@ -611,19 +647,33 @@
     <!--/ Card Border Shadow -->
     <!-- Vehicles overview -->
         <div class="col-12">
-            <div class="d-flex justify-content-between align-items-start gap-3">
-                <div><h5 class="mb-1">Profil Demografi</h5><p class="text-body-secondary mb-0">Komposisi petani berdasarkan gender, kelompok umur, dan pendidikan.</p></div>
-                <button type="button" class="btn btn-label-secondary btn-sm chart-group-toggle" data-bs-toggle="collapse" data-bs-target="#demografi-charts" aria-expanded="true" aria-controls="demografi-charts">Sembunyikan Chart</button>
+            <div class="card chart-group-header-toggle" role="button" tabindex="0"
+                data-bs-toggle="collapse" data-bs-target="#demografi-charts"
+                aria-expanded="true" aria-controls="demografi-charts" aria-label="Sembunyikan chart">
+                <div class="card-body d-flex justify-content-between align-items-center gap-3">
+                    <div>
+                        <h5>Profil Demografi</h5>
+                        <p class="text-body-secondary mb-0">Komposisi petani berdasarkan gender, kelompok umur, dan pendidikan.</p>
+                    </div>
+                    <span class="btn btn-icon btn-label-secondary btn-sm chart-group-icon-toggle" aria-hidden="true">
+                        <i class="icon-base ti tabler-chevron-up"></i>
+                    </span>
+                </div>
             </div>
             <div class="collapse show chart-group-panel" id="demografi-charts">
                 <div class="row g-6 pt-4">
 <div class="col-12 col-md-6 col-xl-4">
             <div class="card h-100">
-                <div class="card-header d-flex align-items-center justify-content-between">
+                <div class="card-header d-flex align-items-start justify-content-between gap-2">
                     <div class="card-title mb-0">
                         <h5 class="m-0 me-2">Gender</h5>
                         <small class="text-body-secondary">Distribusi petani berdasarkan gender</small>
                     </div>
+                <button type="button" class="btn btn-icon btn-sm btn-label-secondary chart-filter-help flex-shrink-0"
+                    data-bs-toggle="tooltip" data-bs-trigger="hover focus click" data-bs-placement="top"
+                    title="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih." aria-label="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih.">
+                    <i class="icon-base ti tabler-help-circle" aria-hidden="true"></i>
+                </button>
                 </div>
                 <div class="card-body">
                     <div id="genderChart"></div>
@@ -632,13 +682,18 @@
         </div>
         <div class="col-12 col-md-6 col-xl-4">
             <div class="card h-100">
-                <div class="card-header">
+                <div class="card-header d-flex align-items-start justify-content-between gap-2">
                     <div class="card-title mb-0">
                         <h5 class="m-0 me-2">Kelompok Umur</h5>
                         <small class="text-body-secondary">
                             Distribusi petani berdasarkan kelompok umur
                         </small>
                     </div>
+                <button type="button" class="btn btn-icon btn-sm btn-label-secondary chart-filter-help flex-shrink-0"
+                    data-bs-toggle="tooltip" data-bs-trigger="hover focus click" data-bs-placement="top"
+                    title="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih." aria-label="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih.">
+                    <i class="icon-base ti tabler-help-circle" aria-hidden="true"></i>
+                </button>
                 </div>
 
                 <div class="card-body">
@@ -648,7 +703,7 @@
         </div>
         <div class="col-12 col-md-6 col-xl-4">
             <div class="card h-100">
-                <div class="card-header">
+                <div class="card-header d-flex align-items-start justify-content-between gap-2">
                     <div class="card-title mb-0">
                         <h5 class="m-0 me-2">Tingkat Pendidikan</h5>
 
@@ -656,6 +711,11 @@
                             Distribusi petani berdasarkan pendidikan terakhir
                         </small>
                     </div>
+                <button type="button" class="btn btn-icon btn-sm btn-label-secondary chart-filter-help flex-shrink-0"
+                    data-bs-toggle="tooltip" data-bs-trigger="hover focus click" data-bs-placement="top"
+                    title="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih." aria-label="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih.">
+                    <i class="icon-base ti tabler-help-circle" aria-hidden="true"></i>
+                </button>
                 </div>
 
                 <div class="card-body">
@@ -667,15 +727,24 @@
             </div>
         </div>
         <div class="col-12">
-            <div class="d-flex justify-content-between align-items-start gap-3">
-                <div><h5 class="mb-1">Sosial Ekonomi</h5><p class="text-body-secondary mb-0">Kondisi sosial ekonomi petani dilihat dari jumlah tanggungan keluarga, penghasilan usaha tani, dan keterlibatan dalam kelompok tani.</p></div>
-                <button type="button" class="btn btn-label-secondary btn-sm chart-group-toggle" data-bs-toggle="collapse" data-bs-target="#rumah-tangga-charts" aria-expanded="true" aria-controls="rumah-tangga-charts">Sembunyikan Chart</button>
+            <div class="card chart-group-header-toggle" role="button" tabindex="0"
+                data-bs-toggle="collapse" data-bs-target="#rumah-tangga-charts"
+                aria-expanded="true" aria-controls="rumah-tangga-charts" aria-label="Sembunyikan chart">
+                <div class="card-body d-flex justify-content-between align-items-center gap-3">
+                    <div>
+                        <h5>Sosial Ekonomi</h5>
+                        <p class="text-body-secondary mb-0">Tanggungan keluarga, penghasilan usaha tani, dan keanggotaan kelompok tani.</p>
+                    </div>
+                    <span class="btn btn-icon btn-label-secondary btn-sm chart-group-icon-toggle" aria-hidden="true">
+                        <i class="icon-base ti tabler-chevron-up"></i>
+                    </span>
+                </div>
             </div>
             <div class="collapse show chart-group-panel" id="rumah-tangga-charts">
                 <div class="row g-6 pt-4">
 <div class="col-12 col-md-6 col-xl-4">
             <div class="card h-100">
-                <div class="card-header">
+                <div class="card-header d-flex align-items-start justify-content-between gap-2">
                     <div class="card-title mb-0">
                         <h5 class="m-0 me-2">Jumlah Tanggungan</h5>
 
@@ -683,6 +752,11 @@
                             Distribusi petani berdasarkan jumlah tanggungan
                         </small>
                     </div>
+                <button type="button" class="btn btn-icon btn-sm btn-label-secondary chart-filter-help flex-shrink-0"
+                    data-bs-toggle="tooltip" data-bs-trigger="hover focus click" data-bs-placement="top"
+                    title="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih." aria-label="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih.">
+                    <i class="icon-base ti tabler-help-circle" aria-hidden="true"></i>
+                </button>
                 </div>
 
                 <div class="card-body">
@@ -692,7 +766,7 @@
         </div>
         <div class="col-12 col-md-6 col-xl-4">
             <div class="card h-100">
-                <div class="card-header">
+                <div class="card-header d-flex align-items-start justify-content-between gap-2">
                     <div class="card-title mb-0">
                         <h5 class="m-0 me-2">
                             Rentang Penghasilan per Bulan
@@ -702,6 +776,11 @@
                             Distribusi petani berdasarkan penghasilan dari usaha tani per musim
                         </small>
                     </div>
+                <button type="button" class="btn btn-icon btn-sm btn-label-secondary chart-filter-help flex-shrink-0"
+                    data-bs-toggle="tooltip" data-bs-trigger="hover focus click" data-bs-placement="top"
+                    title="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih." aria-label="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih.">
+                    <i class="icon-base ti tabler-help-circle" aria-hidden="true"></i>
+                </button>
                 </div>
 
                 <div class="card-body">
@@ -711,7 +790,7 @@
         </div>
         <div class="col-12 col-md-6 col-xl-4">
             <div class="card h-100">
-                <div class="card-header">
+                <div class="card-header d-flex align-items-start justify-content-between gap-2">
                     <div class="card-title mb-0">
                         <h5 class="m-0 me-2">Status Keanggotaan Kelompok Tani</h5>
 
@@ -719,6 +798,11 @@
                             Petani yang terdaftar di kelompok tani
                         </small>
                     </div>
+                <button type="button" class="btn btn-icon btn-sm btn-label-secondary chart-filter-help flex-shrink-0"
+                    data-bs-toggle="tooltip" data-bs-trigger="hover focus click" data-bs-placement="top"
+                    title="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih." aria-label="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih.">
+                    <i class="icon-base ti tabler-help-circle" aria-hidden="true"></i>
+                </button>
                 </div>
 
                 <div class="card-body">
@@ -730,15 +814,24 @@
             </div>
         </div>
         <div class="col-12">
-            <div class="d-flex justify-content-between align-items-start gap-3">
-                <div><h5 class="mb-1">Profil Lahan</h5><p class="text-body-secondary mb-0">Karakteristik lahan usaha tani berdasarkan komoditas utama, luas lahan garapan, dan status kepemilikan lahan.</p></div>
-                <button type="button" class="btn btn-label-secondary btn-sm chart-group-toggle" data-bs-toggle="collapse" data-bs-target="#usaha-tani-charts" aria-expanded="true" aria-controls="usaha-tani-charts">Sembunyikan Chart</button>
+            <div class="card chart-group-header-toggle" role="button" tabindex="0"
+                data-bs-toggle="collapse" data-bs-target="#usaha-tani-charts"
+                aria-expanded="true" aria-controls="usaha-tani-charts" aria-label="Sembunyikan chart">
+                <div class="card-body d-flex justify-content-between align-items-center gap-3">
+                    <div>
+                        <h5>Profil Lahan</h5>
+                        <p class="text-body-secondary mb-0">Karakteristik lahan usaha tani berdasarkan komoditas utama, luas lahan garapan, dan status kepemilikan lahan.</p>
+                    </div>
+                    <span class="btn btn-icon btn-label-secondary btn-sm chart-group-icon-toggle" aria-hidden="true">
+                        <i class="icon-base ti tabler-chevron-up"></i>
+                    </span>
+                </div>
             </div>
             <div class="collapse show chart-group-panel" id="usaha-tani-charts">
                 <div class="row g-6 pt-4">
 <div class="col-12 col-md-6 col-xl-4">
             <div class="card h-100">
-                <div class="card-header d-flex align-items-center justify-content-between">
+                <div class="card-header d-flex align-items-start justify-content-between gap-2">
                     <div class="card-title mb-0">
                         <h5 class="m-0 me-2">
                             Komoditas Utama yang Dikelola
@@ -748,6 +841,11 @@
                             Jumlah petani berdasarkan komoditas utama
                         </small>
                     </div>
+                <button type="button" class="btn btn-icon btn-sm btn-label-secondary chart-filter-help flex-shrink-0"
+                    data-bs-toggle="tooltip" data-bs-trigger="hover focus click" data-bs-placement="top"
+                    title="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih." aria-label="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih.">
+                    <i class="icon-base ti tabler-help-circle" aria-hidden="true"></i>
+                </button>
                 </div>
 
                 <div class="card-body">
@@ -757,7 +855,7 @@
         </div>
         <div class="col-12 col-md-6 col-xl-4">
             <div class="card h-100">
-                <div class="card-header">
+                <div class="card-header d-flex align-items-start justify-content-between gap-2">
                     <div class="card-title mb-0">
                         <h5 class="m-0 me-2">
                             Luas Lahan yang Dimiliki
@@ -767,6 +865,11 @@
                             Distribusi petani berdasarkan luas lahan garapan
                         </small>
                     </div>
+                <button type="button" class="btn btn-icon btn-sm btn-label-secondary chart-filter-help flex-shrink-0"
+                    data-bs-toggle="tooltip" data-bs-trigger="hover focus click" data-bs-placement="top"
+                    title="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih." aria-label="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih.">
+                    <i class="icon-base ti tabler-help-circle" aria-hidden="true"></i>
+                </button>
                 </div>
 
                 <div class="card-body">
@@ -776,7 +879,7 @@
         </div>
         <div class="col-12 col-md-6 col-xl-4">
             <div class="card h-100">
-                <div class="card-header">
+                <div class="card-header d-flex align-items-start justify-content-between gap-2">
                     <div class="card-title mb-0">
                         <h5 class="m-0 me-2">
                             Status Kepemilikan Lahan
@@ -786,6 +889,11 @@
                             Distribusi petani berdasarkan status lahan
                         </small>
                     </div>
+                <button type="button" class="btn btn-icon btn-sm btn-label-secondary chart-filter-help flex-shrink-0"
+                    data-bs-toggle="tooltip" data-bs-trigger="hover focus click" data-bs-placement="top"
+                    title="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih." aria-label="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih.">
+                    <i class="icon-base ti tabler-help-circle" aria-hidden="true"></i>
+                </button>
                 </div>
 
                 <div class="card-body">
@@ -837,6 +945,7 @@
                             >
                         </div>
 
+<button type="button" id="clearFarmerTableFilter" class="btn btn-label-secondary d-none text-nowrap"><i class="icon-base ti tabler-filter-off me-1" aria-hidden="true"></i>Bersihkan Filter</button>
 <button type="button" class="btn btn-label-secondary btn-icon" data-bs-toggle="collapse" data-bs-target="#demografi-table-filter-panel" aria-expanded="false" aria-controls="demografi-table-filter-panel" aria-label="Filter tabel" title="Filter tabel"><i class="icon-base ti tabler-filter"></i></button>
 
                     </div>
@@ -857,7 +966,7 @@
         @endforeach
     </div>
     <small class="text-body-secondary d-block mt-3">Filter tabel mengikuti filter dashboard yang telah diterapkan.</small>
-    <div class="d-flex gap-2 mt-3"><button type="button" id="applyFarmerFilter" class="btn btn-primary btn-sm">Terapkan Filter</button><button type="button" id="resetFarmerFilter" class="btn btn-label-secondary btn-sm">Clear Filter</button></div>
+    <div class="d-flex justify-content-end mt-3"><button type="button" id="applyFarmerFilter" class="btn btn-primary btn-sm">Terapkan Filter</button></div>
 </div></div>
                 <div class="table-responsive">
                     <table class="table table-hover">
@@ -985,19 +1094,33 @@
     </div>
 
     <div class="py-4">
-        <div class="d-flex justify-content-between align-items-start gap-3">
-            <div><h5 class="mb-1">Indeks Petani</h5><p class="text-body-secondary mb-0">Komposisi petani menurut tingkat kesiapan adopsi, secara keseluruhan dan pada setiap komoditas.</p></div>
-            <button type="button" class="btn btn-label-secondary btn-sm chart-group-toggle" data-bs-toggle="collapse" data-bs-target="#indeks-segmentasi-charts" aria-expanded="true" aria-controls="indeks-segmentasi-charts">Sembunyikan Chart</button>
-        </div>
+        <div class="card chart-group-header-toggle" role="button" tabindex="0"
+                data-bs-toggle="collapse" data-bs-target="#indeks-segmentasi-charts"
+                aria-expanded="true" aria-controls="indeks-segmentasi-charts" aria-label="Sembunyikan chart">
+                <div class="card-body d-flex justify-content-between align-items-center gap-3">
+                    <div>
+                        <h5>Indeks Petani</h5>
+                        <p class="text-body-secondary mb-0">Komposisi petani menurut tingkat kesiapan adopsi, secara keseluruhan dan pada setiap komoditas.</p>
+                    </div>
+                    <span class="btn btn-icon btn-label-secondary btn-sm chart-group-icon-toggle" aria-hidden="true">
+                        <i class="icon-base ti tabler-chevron-up"></i>
+                    </span>
+                </div>
+            </div>
         <div class="collapse show chart-group-panel" id="indeks-segmentasi-charts">
     <div class="row g-6 py-4">
         <div class="col-lg-6 col-sm-12">
             <div class="card card-border-shadow-primary h-100">
-                <div class="card-header d-flex justify-content-between align-items-center">
+                <div class="card-header d-flex justify-content-between align-items-start gap-2">
                     <div class="card-title mb-0">
                         <h5 class="m-0 me-2">Distribusi Indeks Petani</h5>
                         <p class="card-subtitle">Jumlah dan proporsi petani pada setiap segmen kesiapan adopsi.</p>
                     </div>
+                <button type="button" class="btn btn-icon btn-sm btn-label-secondary chart-filter-help flex-shrink-0"
+                    data-bs-toggle="tooltip" data-bs-trigger="hover focus click" data-bs-placement="top"
+                    title="Klik segmen pada grafik untuk memfilter Daftar Petani di bawah." aria-label="Klik segmen pada grafik untuk memfilter Daftar Petani di bawah.">
+                    <i class="icon-base ti tabler-help-circle" aria-hidden="true"></i>
+                </button>
                 </div>
                 <div class="card-body">
                     <div class="segment-distribution">
@@ -1022,12 +1145,17 @@
         </div>
         <div class="col-lg-6 col-sm-12">
             <div class="card card-border-shadow-secondary h-100">
-                <div class="card-header d-flex justify-content-between align-items-center">
+                <div class="card-header d-flex justify-content-between align-items-start gap-2">
                     <div class="card-title mb-0">
                         <h5 class="m-0 me-2">Distribusi Indeks Petani</h5>
                         <p class="card-subtitle">Perbandingan komposisi segmen kesiapan adopsi petani antar-komoditas.</p>
 
                     </div>
+                <button type="button" class="btn btn-icon btn-sm btn-label-secondary chart-filter-help flex-shrink-0"
+                    data-bs-toggle="tooltip" data-bs-trigger="hover focus click" data-bs-placement="top"
+                    title="Klik bagian batang untuk memfilter Daftar Petani di bawah berdasarkan komoditas dan segmen." aria-label="Klik bagian batang untuk memfilter Daftar Petani di bawah berdasarkan komoditas dan segmen.">
+                    <i class="icon-base ti tabler-help-circle" aria-hidden="true"></i>
+                </button>
                 </div>
                 <div class="card-body">
                     <div class="segment-commodity-chart" id="chart-segmentasi-petani-komoditas"></div>
@@ -1039,10 +1167,19 @@
         </div>
     </div>
     <div class="py-4">
-        <div class="d-flex justify-content-between align-items-start gap-3">
-            <div><h5 class="mb-1">Dimensi dan Komponen Kesiapan Adopsi</h5><p class="text-body-secondary mb-0">Perbandingan skor tiap dimensi dan komponen untuk mengenali aspek kesiapan adopsi yang kuat dan yang perlu ditingkatkan.</p></div>
-            <button type="button" class="btn btn-label-secondary btn-sm chart-group-toggle" data-bs-toggle="collapse" data-bs-target="#indeks-kesiapan-charts" aria-expanded="true" aria-controls="indeks-kesiapan-charts">Sembunyikan Chart</button>
-        </div>
+        <div class="card chart-group-header-toggle" role="button" tabindex="0"
+                data-bs-toggle="collapse" data-bs-target="#indeks-kesiapan-charts"
+                aria-expanded="true" aria-controls="indeks-kesiapan-charts" aria-label="Sembunyikan chart">
+                <div class="card-body d-flex justify-content-between align-items-center gap-3">
+                    <div>
+                        <h5>Dimensi dan Komponen Kesiapan Adopsi</h5>
+                        <p class="text-body-secondary mb-0">Perbandingan skor dimensi dan komponen kesiapan adopsi petani.</p>
+                    </div>
+                    <span class="btn btn-icon btn-label-secondary btn-sm chart-group-icon-toggle" aria-hidden="true">
+                        <i class="icon-base ti tabler-chevron-up"></i>
+                    </span>
+                </div>
+            </div>
         <div class="collapse show chart-group-panel" id="indeks-kesiapan-charts">
     <div class="row g-6 py-4">
         <div class="col-lg-6 col-sm-12">
@@ -1080,19 +1217,33 @@
         </div>
     </div>
     <div class="py-4">
-        <div class="d-flex justify-content-between align-items-start gap-3">
-            <div><h5 class="mb-1">Sebaran wilayah petani</h5><p class="text-body-secondary mb-0">Perbandingan tingkat kesiapan adopsi antarwilayah melalui peta dan komposisi segmen petani di setiap desa/kelurahan.</p></div>
-            <button type="button" class="btn btn-label-secondary btn-sm chart-group-toggle" data-bs-toggle="collapse" data-bs-target="#indeks-wilayah-charts" aria-expanded="true" aria-controls="indeks-wilayah-charts">Sembunyikan Chart</button>
-        </div>
+        <div class="card chart-group-header-toggle" role="button" tabindex="0"
+                data-bs-toggle="collapse" data-bs-target="#indeks-wilayah-charts"
+                aria-expanded="true" aria-controls="indeks-wilayah-charts" aria-label="Sembunyikan chart">
+                <div class="card-body d-flex justify-content-between align-items-center gap-3">
+                    <div>
+                        <h5>Sebaran wilayah petani</h5>
+                        <p class="text-body-secondary mb-0">Peta dan komposisi segmen kesiapan adopsi petani per desa/kelurahan.</p>
+                    </div>
+                    <span class="btn btn-icon btn-label-secondary btn-sm chart-group-icon-toggle" aria-hidden="true">
+                        <i class="icon-base ti tabler-chevron-up"></i>
+                    </span>
+                </div>
+            </div>
         <div class="collapse show chart-group-panel" id="indeks-wilayah-charts">
     <div class="row g-6 py-4">
         <div class="col-lg-12 col-sm-12">
             <div class="card card-border-shadow-danger h-100">
-                <div class="card-header d-flex justify-content-between align-items-center">
+                <div class="card-header d-flex justify-content-between align-items-start gap-2">
                     <div class="card-title mb-0">
                         <h5 class="m-0 me-2">Peta Sebaran</h5>
                         <p class="card-subtitle">Warna wilayah menunjukkan kategori rata-rata indeks kesiapan adopsi petani di setiap desa/kelurahan.</p>
                     </div>
+                <button type="button" class="btn btn-icon btn-sm btn-label-secondary chart-filter-help flex-shrink-0"
+                    data-bs-toggle="tooltip" data-bs-trigger="hover focus click" data-bs-placement="top"
+                    title="Klik wilayah desa/kelurahan untuk melihat rincian dan memfilter Daftar Petani di bawah." aria-label="Klik wilayah desa/kelurahan untuk melihat rincian dan memfilter Daftar Petani di bawah.">
+                    <i class="icon-base ti tabler-help-circle" aria-hidden="true"></i>
+                </button>
                 </div>
                 <div class="card-body">
                                         <div id="farmer-map-shell" class="position-relative">
@@ -1151,6 +1302,7 @@
                             <span class="input-group-text"><i class="icon-base ti tabler-search"></i></span>
                             <input type="search" id="indexFarmerSearch" class="form-control" placeholder="Cari petani..." aria-label="Cari petani pada tabel indeks">
                         </div>
+                        <button type="button" id="btn-reset-filter" class="btn btn-label-secondary d-none text-nowrap"><i class="icon-base ti tabler-filter-off me-1" aria-hidden="true"></i>Bersihkan Filter</button>
                         <button type="button" class="btn btn-label-secondary btn-icon" data-bs-toggle="collapse" data-bs-target="#index-table-filter-panel" aria-expanded="false" aria-controls="index-table-filter-panel" aria-label="Filter tabel" title="Filter tabel"><i class="icon-base ti tabler-filter"></i></button>
                     </div>
                 </div>
@@ -1170,7 +1322,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="d-flex gap-2 px-6 pb-4"><button type="button" id="applyIndexTableFilter" class="btn btn-primary btn-sm">Terapkan Filter</button><button type="button" id="btn-reset-filter" class="btn btn-label-secondary btn-sm">Clear Filter</button></div></div>
+                <div class="d-flex justify-content-end mt-3"><button type="button" id="applyIndexTableFilter" class="btn btn-primary btn-sm">Terapkan Filter</button></div></div>
                 <div class="card-body">
                     <table id="table-petani" class="table table-hover">
                         <thead>
@@ -1230,6 +1382,10 @@ document.addEventListener('DOMContentLoaded', function () {
         penghasilan: null
     };
 
+    const farmerSearchInput = document.querySelector('#farmerSearch');
+    const farmerFilterSelects = document.querySelectorAll('.farmer-table-filter');
+    const farmerClearButton = document.querySelector('#clearFarmerTableFilter');
+
     let searchTimer = null;
     let farmerTableRequest = null;
 
@@ -1253,11 +1409,18 @@ document.addEventListener('DOMContentLoaded', function () {
         return number.toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' ha';
     }
 
+    function updateFarmerClearFilter() {
+        const hasFilters = Object.values(activeFilters).some((value) => value !== null && value !== undefined && value !== '');
+        const hasSearch = Boolean(farmerSearchInput?.value.trim());
+        farmerClearButton.classList.toggle('d-none', !hasFilters && !hasSearch);
+    }
+
     async function loadFarmerTable(page = 1) {
+        updateFarmerClearFilter();
         farmerTableRequest?.abort();
         const request = new AbortController();
         farmerTableRequest = request;
-        const searchInput = document.querySelector('#farmerSearch');
+        const searchInput = farmerSearchInput;
         const search = searchInput ? searchInput.value.trim() : '';
         const params = new URLSearchParams();
 
@@ -1456,38 +1619,29 @@ document.addEventListener('DOMContentLoaded', function () {
             activeFilters[filter] = value;
         }
 
-        document.querySelectorAll('.farmer-table-filter').forEach((select) => {
+        farmerFilterSelects.forEach((select) => {
             select.value = activeFilters[select.dataset.filter] ?? '';
         });
         loadFarmerTable(1);
     }
 
     function resetFarmerFilter() {
-        activeFilters = {
-            gender: null,
-            umur: null,
-            pendidikan: null,
-            jumlah_tanggungan: null,
-            kelompok_tani: null,
-            komoditas: null,
-            luas_lahan: null,
-            status_kepemilikan_lahan: null,
-            penghasilan: null
-        };
+        clearTimeout(searchTimer);
+        Object.keys(activeFilters).forEach((key) => { activeFilters[key] = null; });
 
-        const searchInput = document.querySelector('#farmerSearch');
+        const searchInput = farmerSearchInput;
         if (searchInput) {
             searchInput.value = '';
         }
 
-        document.querySelectorAll('.farmer-table-filter').forEach((select) => {
+        farmerFilterSelects.forEach((select) => {
             select.value = activeFilters[select.dataset.filter] ?? '';
         });
         loadFarmerTable(1);
     }
 
     document.querySelector('#applyFarmerFilter').addEventListener('click', function () {
-        document.querySelectorAll('.farmer-table-filter').forEach((select) => {
+        farmerFilterSelects.forEach((select) => {
             activeFilters[select.dataset.filter] = select.value || null;
         });
         loadFarmerTable(1);
@@ -1497,6 +1651,7 @@ document.addEventListener('DOMContentLoaded', function () {
         if (event.target.id !== 'farmerSearch') {
             return;
         }
+        updateFarmerClearFilter();
         clearTimeout(searchTimer);
         searchTimer = setTimeout(function () {
             loadFarmerTable(1);
@@ -1519,7 +1674,7 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 
     document.addEventListener('click', function (event) {
-        const button = event.target.closest('#resetFarmerFilter');
+        const button = event.target.closest('#clearFarmerTableFilter');
         if (!button) {
             return;
         }
@@ -1660,12 +1815,12 @@ document.addEventListener('DOMContentLoaded', function () {
                     data: ageGroupData
                 }
             ],
-            colors: [config.colors.primary],
+            colors: ['#c7c2f9', '#9d94f4', '#7367f0', '#5048a8', '#2e2960'],
             plotOptions: {
                 bar: {
                     borderRadius: 4,
                     columnWidth: '45%',
-                    distributed: false,
+                    distributed: true,
                     dataLabels: { position: 'top' }
                 }
             },
@@ -1720,7 +1875,7 @@ document.addEventListener('DOMContentLoaded', function () {
                     const label = w.globals.labels[dataPointIndex];
                     const percentage = totalAgeGroup > 0 ? (Number(value) / totalAgeGroup) * 100 : 0;
                     return `
-                        <div style="background:${config.colors.primary}; color:#fff; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);">
+                        <div style="background:${w.config.colors[dataPointIndex % w.config.colors.length]}; color:#fff; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);">
                             ${label} tahun: <strong>${value} petani (${percentage.toFixed(1)}%)</strong>
                         </div>
                     `;
@@ -1763,9 +1918,10 @@ document.addEventListener('DOMContentLoaded', function () {
                 }
             },
             series: [{ name: 'Petani', data: educationData }],
-            colors: [config.colors.success],
+            colors: ['#e9f9f0', '#a9e8c5', '#68d79a', '#28c76f', '#1c8b4d', '#104f2c'],
             plotOptions: {
                 bar: {
+                    distributed: true,
                     horizontal: true,
                     borderRadius: 4,
                     barHeight: '55%',
@@ -1819,7 +1975,7 @@ document.addEventListener('DOMContentLoaded', function () {
                     const label = w.globals.labels[dataPointIndex];
                     const percentage = totalPendidikan > 0 ? ((value / totalPendidikan) * 100).toFixed(1) : '0.0';
                     return `
-                        <div style="background:${config.colors.success}; color:#fff; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);">
+                        <div style="background:${w.config.colors[dataPointIndex % w.config.colors.length]}; color:#fff; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);">
                             ${label}: <strong>${value} petani (${percentage}%)</strong>
                         </div>
                     `;
@@ -1861,9 +2017,10 @@ document.addEventListener('DOMContentLoaded', function () {
                 }
             },
             series: [{ name: 'Petani', data: dependentData }],
-            colors: [config.colors.danger],
+            colors: ['#ffb7b9', '#ff4c51', '#b23538', '#661e20'],
             plotOptions: {
                 bar: {
+                    distributed: true,
                     horizontal: true,
                     borderRadius: 4,
                     barHeight: '50%',
@@ -1917,7 +2074,7 @@ document.addEventListener('DOMContentLoaded', function () {
                     const label = w.globals.labels[dataPointIndex];
                     const percentage = totalDependentsFarmers > 0 ? ((value / totalDependentsFarmers) * 100).toFixed(1) : '0.0';
                     return `
-                        <div style="background:${config.colors.danger}; color:#fff; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);">
+                        <div style="background:${w.config.colors[dataPointIndex % w.config.colors.length]}; color:#fff; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);">
                             ${label}: <strong>${value} petani (${percentage}%)</strong>
                         </div>
                     `;
@@ -2178,9 +2335,10 @@ document.addEventListener('DOMContentLoaded', function () {
                 }
             },
             series: [{ name: 'Petani', data: landAreaData }],
-            colors: [config.colors.warning],
+            colors: ['#ffbb7b', '#ff9f43', '#b26f2e', '#663f1a'],
             plotOptions: {
                 bar: {
+                    distributed: true,
                     horizontal: true,
                     borderRadius: 4,
                     barHeight: '50%',
@@ -2234,7 +2392,7 @@ document.addEventListener('DOMContentLoaded', function () {
                     const label = w.globals.labels[dataPointIndex];
                     const percentage = totalLandFarmers > 0 ? ((value / totalLandFarmers) * 100).toFixed(1) : '0.0';
                     return `
-                        <div style="background:${config.colors.warning}; color:#fff; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);">
+                        <div style="background:${w.config.colors[dataPointIndex % w.config.colors.length]}; color:#fff; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);">
                             ${label}: <strong>${value} petani (${percentage}%)</strong>
                         </div>
                     `;
@@ -2380,9 +2538,10 @@ document.addEventListener('DOMContentLoaded', function () {
                 }
             },
             series: [{ name: 'Petani', data: incomeData }],
-            colors: [config.colors.info],
+            colors: ['#99e3ec', '#4ccede', '#00bad1', '#008292', '#004a53'],
             plotOptions: {
                 bar: {
+                    distributed: true,
                     horizontal: true,
                     borderRadius: 4,
                     barHeight: '50%',
@@ -2436,7 +2595,7 @@ document.addEventListener('DOMContentLoaded', function () {
                     const label = w.globals.labels[dataPointIndex];
                     const percentage = totalIncomeFarmers > 0 ? ((value / totalIncomeFarmers) * 100).toFixed(1) : '0.0';
                     return `
-                        <div style="background:${config.colors.info}; color:#fff; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);">
+                        <div style="background:${w.config.colors[dataPointIndex % w.config.colors.length]}; color:#fff; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);">
                             ${label}: <strong>${value} petani (${percentage}%)</strong>
                         </div>
                     `;
@@ -2629,9 +2788,6 @@ document.addEventListener('DOMContentLoaded', function () {
             "scrollX": true
         });
 
-    let selectedDesa = null;
-    let selectedKomoditas = null;
-    let selectedSegmen = null;
 
 
 
@@ -2708,10 +2864,9 @@ document.addEventListener('DOMContentLoaded', function () {
                                             config.dataPointIndex
                                         ];
 
-                                    console.log('Segmen dipilih:', segmen);
 
-                                    // Set filter segmen
-                                    selectedSegmen = segmen;
+
+                                    window.applyIndexFarmerFilter?.(5, segmen);
                                 }
                             }
                         },
@@ -2834,9 +2989,9 @@ document.addEventListener('DOMContentLoaded', function () {
                         const komoditas =
                             config.w.config.xaxis.categories[config.dataPointIndex];
 
-                        console.log('Komoditas dipilih:', komoditas);
 
-                        selectedKomoditas = komoditas;
+                        const segmen = chartContext.w.config.series[config.seriesIndex]?.name;
+                        window.applyIndexFarmerFilter?.(2, komoditas, segmen);
                     }
                 }
             },
@@ -3131,7 +3286,6 @@ document.addEventListener('DOMContentLoaded', function () {
             @endforeach
         };
 
-        let selectedDesa = null;
 
         const group = L.featureGroup().addTo(map);
 
@@ -3209,6 +3363,9 @@ document.addEventListener('DOMContentLoaded', function () {
                             (${desa.segmentasi?.jumlah_dominan ?? 0} petani)
                         `);
 
+                        polygon.on('click', function () {
+                            window.applyIndexFarmerFilter?.(1, desa.desa_kelurahan);
+                        });
                         polygon.addTo(group);
                     });
 
@@ -3299,7 +3456,10 @@ document.addEventListener('DOMContentLoaded', function () {
                 }
             },
             drawCallback: function () {
-                const info = this.api().page.info();
+                const api = this.api();
+                const hasFilter = Boolean(api.search()) || api.columns().search().toArray().some(Boolean);
+                $('#btn-reset-filter').toggleClass('d-none', !hasFilter);
+                const info = api.page.info();
                 $('#indexFarmerTotalBadge').text(info.recordsDisplay + ' petani');
             },
             "paging": true,
@@ -3399,6 +3559,20 @@ document.addEventListener('DOMContentLoaded', function () {
             }
         });
 
+        window.applyIndexFarmerFilter = function (column, value, segmen) {
+            if (value === null || value === undefined) return;
+            const escaped = $.fn.dataTable.util.escapeRegex(String(value));
+            const search = '^' + escaped + '$';
+            const nextValue = tablePetani.column(column).search() === search ? '' : String(value);
+            tablePetani.column(column).search(nextValue ? search : '', true, false);
+            $('.index-table-filter[data-column="' + column + '"]').val(nextValue);
+            if (segmen !== undefined) {
+                tablePetani.column(5).search('^' + $.fn.dataTable.util.escapeRegex(segmen) + '$', true, false);
+                $('#index-table-segmen').val(segmen);
+            }
+            tablePetani.draw();
+        };
+
         $('#indexFarmerSearch').on('input', function () { tablePetani.search(this.value).draw(); });
         tablePetani.on('xhr.dt', function (event, settings, rows) {
             if (!Array.isArray(rows)) return;
@@ -3422,9 +3596,9 @@ document.addEventListener('DOMContentLoaded', function () {
         $('#btn-reset-filter').on('click', function () {
             $('.index-table-filter').val('');
             $('#indexFarmerSearch').val('');
-            selectedDesa = null;
-            selectedKomoditas = null;
-            selectedSegmen = null;
+
+
+
             tablePetani.search('').columns().search('').draw();
         });
 
@@ -3464,16 +3638,33 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 </script>
 <script>
-    document.querySelectorAll('.chart-group-panel').forEach((panel) => {
-        const button = document.querySelector('[aria-controls="' + panel.id + '"]');
-        panel.addEventListener('hidden.bs.collapse', function (event) {
-            if (event.target !== panel) return;
-            button.textContent = 'Tampilkan Chart';
+    document.querySelectorAll('.chart-group-header-toggle').forEach((header) => {
+        header.addEventListener('keydown', function (event) {
+            if (event.target !== header || !['Enter', ' '].includes(event.key)) return;
+            event.preventDefault();
+            header.click();
         });
-        panel.addEventListener('shown.bs.collapse', function (event) {
-            if (event.target !== panel) return;
-            button.textContent = 'Sembunyikan Chart';
-            window.dispatchEvent(new Event('resize'));
+    });
+    document.querySelectorAll('.chart-group-panel').forEach((panel) => {
+        const control = document.querySelector('.chart-group-header-toggle[aria-controls="' + panel.id + '"]');
+        if (!control) return;
+        const icon = control.querySelector('.chart-group-icon-toggle i');
+        const syncState = () => {
+            const expanded = panel.classList.contains('show');
+            const label = expanded ? 'Sembunyikan chart' : 'Tampilkan chart';
+            control.setAttribute('aria-expanded', String(expanded));
+            control.setAttribute('aria-label', label);
+            control.title = label;
+            icon.classList.toggle('tabler-chevron-up', expanded);
+            icon.classList.toggle('tabler-chevron-down', !expanded);
+        };
+        syncState();
+        ['hidden.bs.collapse', 'shown.bs.collapse'].forEach((eventName) => {
+            panel.addEventListener(eventName, (event) => {
+                if (event.target !== panel) return;
+                syncState();
+                if (eventName === 'shown.bs.collapse') window.dispatchEvent(new Event('resize'));
+            });
         });
     });
 </script>
diff --git a/routes/web.php b/routes/web.php
index c504296..2810c43 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -21,7 +21,7 @@ Route::get('/', function() {
             return redirect()->route('dashboard.survey-petani');
         }
 
-        return redirect()->route('dashboard.produktivitas');
+        return redirect()->route('dashboard.karakteristik-petani');
     })->name('home');
 
 Route::middleware('auth')