diff --git a/app/Http/Controllers/Web/Dashboard/DemografiPetaniController.php b/app/Http/Controllers/Web/Dashboard/DemografiPetaniController.php
index ccf18ad..9226aff 100644
--- a/app/Http/Controllers/Web/Dashboard/DemografiPetaniController.php
+++ b/app/Http/Controllers/Web/Dashboard/DemografiPetaniController.php
@@ -39,8 +39,29 @@ class DemografiPetaniController extends Controller
         $demografiData = $this->contentData($request);
         $indeksData = app(IndeksPetaniController::class)->contentData($request);
 
+        $tableFilters = [
+            'gender' => ['Gender', ['1' => 'Laki-laki', '0' => 'Perempuan']],
+            'umur' => ['Kelompok Umur', ['kurang_30' => '< 30 tahun', '30_39' => '30–39 tahun', '40_49' => '40–49 tahun', '50_59' => '50–59 tahun', '60_keatas' => '≥ 60 tahun']],
+            'pendidikan' => ['Pendidikan', ['tidak_sekolah' => 'Tidak Sekolah', 'sd' => 'SD', 'smp' => 'SMP', 'sma' => 'SMA', 'diploma' => 'Diploma', 's1_keatas' => 'Sarjana ke atas']],
+            'jumlah_tanggungan' => ['Jumlah Tanggungan', ['0' => '0 orang', '1_2' => '1–2 orang', '3_4' => '3–4 orang', '5_keatas' => '≥ 5 orang']],
+            'kelompok_tani' => ['Keanggotaan Kelompok Tani', ['terdaftar' => 'Terdaftar', 'tidak_terdaftar' => 'Tidak Terdaftar', 'belum_terisi' => 'Belum Terisi']],
+            'komoditas' => ['Komoditas', $indeksData['komoditas']->pluck('nama', 'id')->all()],
+            'luas_lahan' => ['Luas Lahan', ['kurang_05' => '< 0,5 ha', '05_1' => '0,5–1 ha', '1_2' => '> 1–2 ha', 'lebih_2' => '> 2 ha']],
+            'status_kepemilikan_lahan' => ['Status Kepemilikan Lahan', ['sendiri' => 'Milik Pribadi', 'sewa' => 'Sewa', 'adat' => 'Tanah Adat']],
+            'penghasilan' => ['Rentang Pendapatan', ['kurang_1' => '< Rp1 juta', '1_3' => 'Rp1–3 juta', '3_5' => '> Rp3–5 juta', '5_10' => '> Rp5–10 juta', 'lebih_10' => '> Rp10 juta']],
+        ];
+
         return view('dashboard.karakteristik-petani', [
             'activeTab' => $activeTab,
+            'tableFilters' => $tableFilters,
+            'dashboardFilters' => $request->only([
+                'provinsi_id',
+                'kabupatenKota_id',
+                'kecamatan_id',
+                'desaKelurahan_id',
+                'komoditas_id',
+                'segmen',
+            ]),
             'indeksFilterAction' => route('dashboard.karakteristik-petani'),
         ] + $demografiData + $indeksData);
     }
@@ -183,14 +204,11 @@ class DemografiPetaniController extends Controller
             ->groupBy('sosial_ekonomi.petani_id')
             ->selectRaw('SUM(pendapatan_komoditas.pendapatan) as total_pendapatan');
 
-        $ratarataPenghasilan = (float) DB::query()
-            ->fromSub(clone $pendapatanPerPetaniQuery, 'agg')
-            ->avg('total_pendapatan');
-
         $penghasilanBuckets = DB::query()->fromSub(
             clone $pendapatanPerPetaniQuery,
             'agg'
         )->selectRaw("
+            AVG(total_pendapatan) as rata_rata,
             COUNT(*) FILTER (WHERE total_pendapatan < 1000000) as kurang_1,
             COUNT(*) FILTER (WHERE total_pendapatan >= 1000000 AND total_pendapatan <= 3000000) as p1_3,
             COUNT(*) FILTER (WHERE total_pendapatan > 3000000 AND total_pendapatan <= 5000000) as p3_5,
@@ -198,6 +216,8 @@ class DemografiPetaniController extends Controller
             COUNT(*) FILTER (WHERE total_pendapatan > 10000000) as lebih_10
         ")->first();
 
+        $ratarataPenghasilan = (float) ($penghasilanBuckets->rata_rata ?? 0);
+
         $penghasilan = [
             'kurang_1' => $penghasilanBuckets->kurang_1,
             '1_3'      => $penghasilanBuckets->p1_3,
@@ -247,13 +267,7 @@ class DemografiPetaniController extends Controller
             'penghasilan' => $penghasilan,
         ];
 
-        $daftarPetani = Petani::with(['komoditas'])
-            ->whereIn('petani.id', clone $filteredPetaniIds)
-            ->withSum('lahans as total_luas_lahan', 'luas_lahan')
-            ->orderBy('id')
-            ->paginate(10);
-
-        return compact('data', 'daftarPetani');
+        return compact('data');
     }
 
     private function filteredPetaniIdsQuery(Request $request)
diff --git a/app/Http/Controllers/Web/Dashboard/IndeksPetaniController.php b/app/Http/Controllers/Web/Dashboard/IndeksPetaniController.php
index 23463a1..36c5a80 100644
--- a/app/Http/Controllers/Web/Dashboard/IndeksPetaniController.php
+++ b/app/Http/Controllers/Web/Dashboard/IndeksPetaniController.php
@@ -5,21 +5,14 @@ namespace App\Http\Controllers\Web\Dashboard;
 use App\Http\Controllers\Controller;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Gate;
-use Illuminate\Support\Facades\DB;
-use Illuminate\Support\Facades\Auth;
-use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\JsonResponse;
+use Illuminate\Database\Eloquent\Builder;
 
 use App\Models\Pertanian\Petani;
 use App\Models\Pertanian\Komoditas;
 use App\Models\Pertanian\Lahan;
-use App\Models\Pertanian\Tanaman;
 use App\Models\Pertanian\SkorPetani;
 
-use App\Models\Wilayah\Provinsi;
-use App\Models\Wilayah\KabupatenKota;
-use App\Models\Wilayah\Kecamatan;
-use App\Models\Wilayah\DesaKelurahan;
 
 class IndeksPetaniController extends Controller
 {
@@ -36,13 +29,13 @@ class IndeksPetaniController extends Controller
         ];
     }
 
-    private function petaniQuery(array $filters): \Illuminate\Database\Eloquent\Builder
+    private function petaniQuery(array $filters): Builder
     {
         $petaniQuery = Petani::query()
-            ->join('master_desa_kelurahan', 'petani.desa_kelurahan_id', '=', 'master_desa_kelurahan.id')
-            ->join('master_kecamatan', 'master_desa_kelurahan.kecamatan_id', '=', 'master_kecamatan.id')
-            ->join('master_kabupaten_kota', 'master_kecamatan.kabupaten_kota_id', '=', 'master_kabupaten_kota.id')
-            ->join('master_provinsi', 'master_kabupaten_kota.provinsi_id', '=', 'master_provinsi.id')
+            ->leftJoin('master_desa_kelurahan', 'petani.desa_kelurahan_id', '=', 'master_desa_kelurahan.id')
+            ->leftJoin('master_kecamatan', 'master_desa_kelurahan.kecamatan_id', '=', 'master_kecamatan.id')
+            ->leftJoin('master_kabupaten_kota', 'master_kecamatan.kabupaten_kota_id', '=', 'master_kabupaten_kota.id')
+            ->leftJoin('master_provinsi', 'master_kabupaten_kota.provinsi_id', '=', 'master_provinsi.id')
             ->whereNull('petani.deleted_at')
             ->when($filters['provinsi_id'], fn($q, $id) => $q->where('master_kabupaten_kota.provinsi_id', $id))
             ->when($filters['kabupatenKota_id'], fn($q, $id) => $q->where('master_kecamatan.kabupaten_kota_id', $id))
@@ -50,17 +43,21 @@ class IndeksPetaniController extends Controller
             ->when($filters['desaKelurahan_id'], fn($q, $id) => $q->where('petani.desa_kelurahan_id', $id))
             ->when($filters['komoditas_id'], fn($q, $id) => $q->where('petani.komoditas_id', $id));
 
+        if ($filters['segmen']) {
+            $petaniQuery->whereHas('skor', fn (Builder $query) => $this->applySegmentFilter($query, $filters['segmen']));
+        }
+
         return $petaniQuery;
     }
 
-    private function skorPetaniQuery(array $filters, array $komoditas): \Illuminate\Database\Eloquent\Builder
+    private function skorPetaniQuery(array $filters, array $komoditas): Builder
     {
         $skor = SkorPetani::query()
             ->join('petani', 'petani_skor.petani_id', '=', 'petani.id')
-            ->join('master_desa_kelurahan', 'petani.desa_kelurahan_id', '=', 'master_desa_kelurahan.id')
-            ->join('master_kecamatan', 'master_desa_kelurahan.kecamatan_id', '=', 'master_kecamatan.id')
-            ->join('master_kabupaten_kota', 'master_kecamatan.kabupaten_kota_id', '=', 'master_kabupaten_kota.id')
-            ->join('master_provinsi', 'master_kabupaten_kota.provinsi_id', '=', 'master_provinsi.id')
+            ->leftJoin('master_desa_kelurahan', 'petani.desa_kelurahan_id', '=', 'master_desa_kelurahan.id')
+            ->leftJoin('master_kecamatan', 'master_desa_kelurahan.kecamatan_id', '=', 'master_kecamatan.id')
+            ->leftJoin('master_kabupaten_kota', 'master_kecamatan.kabupaten_kota_id', '=', 'master_kabupaten_kota.id')
+            ->leftJoin('master_provinsi', 'master_kabupaten_kota.provinsi_id', '=', 'master_provinsi.id')
             ->whereNull('petani.deleted_at')
             ->when($filters['provinsi_id'], fn($q, $id) => $q->where('master_kabupaten_kota.provinsi_id', $id))
             ->when($filters['kabupatenKota_id'], fn($q, $id) => $q->where('master_kecamatan.kabupaten_kota_id', $id))
@@ -68,33 +65,31 @@ class IndeksPetaniController extends Controller
             ->when($filters['desaKelurahan_id'], fn($q, $id) => $q->where('petani.desa_kelurahan_id', $id))
             ->whereIn('petani.komoditas_id', $komoditas);
 
-        if ($filters['segmen']) {
-            $skor->where(function ($q) use ($filters) {
-                match ($filters['segmen']) {
-                    'Penggerak' => $q->where('skor_kesiapan_adopsi', '>=', 4),
-                    'Perintis'  => $q->where(function($q) {
-                        $q->where('skor_kesiapan_adopsi', '>=', 3)
-                        ->where('skor_kesiapan_adopsi', '<', 4);
-                    }),
-                    'Pemerhati' => $q->where(function($q) {
-                        $q->where('skor_kesiapan_adopsi', '>=', 2)
-                        ->where('skor_kesiapan_adopsi', '<', 3);
-                    }),
-                    'Pemula'    => $q->where(function($q) {
-                        $q->where('skor_kesiapan_adopsi', '>=', 1)
-                        ->where('skor_kesiapan_adopsi', '<', 2);
-                    }),
-                    'Belum Lengkap' => $q->where(function ($q) {
-                        $q->whereNull('skor_kesiapan_adopsi')
-                        ->orWhere('skor_kesiapan_adopsi', '<', 1);
-                    }),
+        return $this->applySegmentFilter($skor, $filters['segmen']);
+    }
 
-                    default => null,
-                };
-            });
+    private function applySegmentFilter(Builder $query, ?string $segment): Builder
+    {
+        $ranges = [
+            'Penggerak' => [4, null],
+            'Perintis' => [3, 4],
+            'Pemerhati' => [2, 3],
+            'Pemula' => [1, 2],
+        ];
+
+        if (isset($ranges[$segment])) {
+            [$min, $max] = $ranges[$segment];
+
+            return $query->where('skor_kesiapan_adopsi', '>=', $min)
+                ->when($max !== null, fn (Builder $query) => $query->where('skor_kesiapan_adopsi', '<', $max));
         }
 
-        return $skor;
+        if ($segment === 'Belum Lengkap') {
+            $query->where(fn (Builder $query) => $query->whereNull('skor_kesiapan_adopsi')
+                ->orWhere('skor_kesiapan_adopsi', '<', 1));
+        }
+
+        return $query;
     }
 
     public function index(Request $request)
@@ -112,21 +107,19 @@ class IndeksPetaniController extends Controller
     {
         $filters = $this->filters($request);
 
-        $title = 'Dashboard Profil Petani';
         $segments = $this->segments();
         $colors = collect($segments)
             ->pluck('color')
             ->map(fn($c) => "var(--bs-{$c})")
             ->values();
 
-        $komoditas = Komoditas::where('is_utama', true)->get();
-        $petaniQuery = $this->petaniQuery($filters);
+        $komoditas = Komoditas::where('is_utama', true)->get(['id', 'nama']);
+        $petaniQuery = $this->petaniQuery(array_fill_keys(array_keys($filters), null));
 
         $desaKelurahan = $petaniQuery->clone()
             ->selectRaw("
                 master_desa_kelurahan.id as desa_kelurahan_id,
                 master_desa_kelurahan.nama as desa_kelurahan,
-                master_desa_kelurahan.path as path,
                 master_kecamatan.id as kecamatan_id,
                 master_kecamatan.nama as kecamatan,
                 master_kabupaten_kota.id as kabupaten_id,
@@ -134,6 +127,7 @@ class IndeksPetaniController extends Controller
                 master_provinsi.id as provinsi_id,
                 master_provinsi.nama as provinsi
             ")
+            ->whereNotNull('master_provinsi.id')
             ->distinct()
             ->get();
 
@@ -164,7 +158,6 @@ class IndeksPetaniController extends Controller
                                                 return [
                                                     'id' => $desa->desa_kelurahan_id,
                                                     'nama' => $desa->desa_kelurahan,
-                                                    'path' => $desa->path,
                                                 ];
                                             })->values(),
                                         ];
@@ -191,23 +184,21 @@ class IndeksPetaniController extends Controller
         $petaniQuery = $this->petaniQuery($filters);
 
         $komoditas = Komoditas::where('is_utama', true)
-            ->when($filters['komoditas_id'], fn($q, $id) => $q->where('id', $id))->get();
+            ->when($filters['komoditas_id'], fn($q, $id) => $q->where('id', $id))->get(['id', 'nama']);
 
-        $countKomoditas = $petaniQuery->clone()
-            ->whereHas('komoditas', fn ($query) => $query->where('is_utama', true))
-            ->distinct()->count('komoditas_id');
+        $counts = $petaniQuery->clone()
+            ->selectRaw('COUNT(*) as petani')
+            ->selectRaw('COUNT(DISTINCT petani.komoditas_id) FILTER (WHERE petani.komoditas_id IN (SELECT id FROM master_komoditas WHERE is_utama = true AND deleted_at IS NULL)) as komoditas')
+            ->selectRaw('COUNT(DISTINCT petani.desa_kelurahan_id) FILTER (WHERE petani.komoditas_id IN (SELECT id FROM master_komoditas WHERE is_utama = true AND deleted_at IS NULL)) as desa')
+            ->selectRaw('COUNT(DISTINCT master_kecamatan.id) FILTER (WHERE petani.komoditas_id IN (SELECT id FROM master_komoditas WHERE is_utama = true AND deleted_at IS NULL)) as kecamatan')
+            ->first();
 
-        $filteredPetaniIds = $petaniQuery
-            ->clone()
-            ->select('petani.id')
-            ->distinct()
-            ->pluck('petani.id');
-
-        $sumLahan = Lahan::has('petani')->whereIn('petani_id', $filteredPetaniIds)->whereIn('komoditas_id', $komoditas->pluck('id'))->sum('luas_lahan');
-        $avgLahan = Lahan::has('petani')->whereIn('petani_id', $filteredPetaniIds)->whereIn('komoditas_id', $komoditas->pluck('id'))->avg('luas_lahan');
-
-        $countDesa = $petaniQuery->clone()->whereIn('komoditas_id', $komoditas->pluck('id'))->distinct()->count('desa_kelurahan_id');
-        $countKecamatan = $petaniQuery->clone()->whereIn('komoditas_id', $komoditas->pluck('id'))->distinct()->count('master_kecamatan.id');
+        $filteredPetaniIds = $petaniQuery->clone()->select('petani.id');
+        $lahan = Lahan::query()
+            ->whereIn('petani_id', $filteredPetaniIds)
+            ->whereIn('komoditas_id', $komoditas->pluck('id'))
+            ->selectRaw('COALESCE(SUM(luas_lahan), 0) as total, AVG(luas_lahan) as rata_rata')
+            ->first();
 
         $skorQuery = $this->skorPetaniQuery($filters, $komoditas->pluck('id')->toArray());
         $avgSkor = $skorQuery->clone()->avg('skor_kesiapan_adopsi');
@@ -225,12 +216,12 @@ class IndeksPetaniController extends Controller
         }
 
         return response()->json([
-            'petani' => $petaniQuery->clone()->count(),
-            'komoditas' => $countKomoditas,
-            'sum_lahan' => $sumLahan,
-            'avg_lahan' => $avgLahan,
-            'desa' => $countDesa,
-            'kecamatan' => $countKecamatan,
+            'petani' => (int) $counts->petani,
+            'komoditas' => (int) $counts->komoditas,
+            'sum_lahan' => (float) $lahan->total,
+            'avg_lahan' => (float) $lahan->rata_rata,
+            'desa' => (int) $counts->desa,
+            'kecamatan' => (int) $counts->kecamatan,
             'skor' => $avgSkor,
             'segmen' => $avgSegmen
         ]);
@@ -289,7 +280,7 @@ class IndeksPetaniController extends Controller
         $case = $this->cases();
 
         $komoditas = Komoditas::where('is_utama', true)
-            ->when($filters['komoditas_id'], fn($q, $id) => $q->where('id', $id))->get();
+            ->when($filters['komoditas_id'], fn($q, $id) => $q->where('id', $id))->get(['id', 'nama']);
 
         $skorQuery = $this->skorPetaniQuery($filters, $komoditas->pluck('id')->toArray());
 
@@ -333,7 +324,7 @@ class IndeksPetaniController extends Controller
         $case = $this->cases();
 
         $komoditas = Komoditas::where('is_utama', true)
-            ->when($filters['komoditas_id'], fn($q, $id) => $q->where('id', $id))->get();
+            ->when($filters['komoditas_id'], fn($q, $id) => $q->where('id', $id))->get(['id', 'nama']);
 
         $skorQuery = $this->skorPetaniQuery($filters, $komoditas->pluck('id')->toArray());
 
@@ -375,7 +366,7 @@ class IndeksPetaniController extends Controller
         $filters = $this->filters($request);
 
         $komoditas = Komoditas::where('is_utama', true)
-            ->when($filters['komoditas_id'], fn($q, $id) => $q->where('id', $id))->get();
+            ->when($filters['komoditas_id'], fn($q, $id) => $q->where('id', $id))->get(['id', 'nama']);
 
         $skorQuery = $this->skorPetaniQuery($filters, $komoditas->pluck('id')->toArray());
 
@@ -400,7 +391,7 @@ class IndeksPetaniController extends Controller
         $filters = $this->filters($request);
 
         $komoditas = Komoditas::where('is_utama', true)
-            ->when($filters['komoditas_id'], fn($q, $id) => $q->where('id', $id))->get();
+            ->when($filters['komoditas_id'], fn($q, $id) => $q->where('id', $id))->get(['id', 'nama']);
 
         $skorQuery = $this->skorPetaniQuery($filters, $komoditas->pluck('id')->toArray());
 
@@ -425,17 +416,8 @@ class IndeksPetaniController extends Controller
         ]);
     }
 
-    public function map(Request $request): JsonResponse
+    private function villageData(array $filters, bool $includePath = true): \Illuminate\Support\Collection
     {
-        $filters = $this->filters($request);
-        $segments = $this->segments();
-
-        $colors = collect($segments)
-            ->pluck('color')
-            ->map(fn($c) => "var(--bs-{$c})")
-            ->values();
-        $segmentStyles = collect($segments)->keyBy('name');
-
         $case = $this->cases();
 
         $petaniQuery = $this->petaniQuery($filters);
@@ -444,7 +426,6 @@ class IndeksPetaniController extends Controller
             ->selectRaw("
                 master_desa_kelurahan.id as desa_kelurahan_id,
                 master_desa_kelurahan.nama as desa_kelurahan,
-                master_desa_kelurahan.path as path,
                 master_kecamatan.id as kecamatan_id,
                 master_kecamatan.nama as kecamatan,
                 master_kabupaten_kota.id as kabupaten_id,
@@ -452,11 +433,12 @@ class IndeksPetaniController extends Controller
                 master_provinsi.id as provinsi_id,
                 master_provinsi.nama as provinsi
             ")
+            ->when($includePath, fn (Builder $query) => $query->addSelect('master_desa_kelurahan.path as path'))
             ->distinct()
             ->get();
 
         $komoditas = Komoditas::where('is_utama', true)
-            ->when($filters['komoditas_id'], fn($q, $id) => $q->where('id', $id))->get();
+            ->when($filters['komoditas_id'], fn($q, $id) => $q->where('id', $id))->get(['id', 'nama']);
 
         $skorQuery = $this->skorPetaniQuery($filters, $komoditas->pluck('id')->toArray());
 
@@ -510,95 +492,18 @@ class IndeksPetaniController extends Controller
             return $desa;
         })->filter()->values();
 
-        return response()->json($mapDesaSegmentasi);
+        return $mapDesaSegmentasi;
+    }
+
+    public function map(Request $request): JsonResponse
+    {
+        return response()->json($this->villageData($this->filters($request)));
     }
 
     public function desa(Request $request): JsonResponse
     {
-        $filters = $this->filters($request);
-        $segments = $this->segments();
-
-        $colors = collect($segments)
-            ->pluck('color')
-            ->map(fn($c) => "var(--bs-{$c})")
-            ->values();
-        $segmentStyles = collect($segments)->keyBy('name');
-
-        $case = $this->cases();
-
-        $petaniQuery = $this->petaniQuery($filters);
-
-        $desaKelurahan = $petaniQuery->clone()
-            ->selectRaw("
-                master_desa_kelurahan.id as desa_kelurahan_id,
-                master_desa_kelurahan.nama as desa_kelurahan,
-                master_desa_kelurahan.path as path,
-                master_kecamatan.id as kecamatan_id,
-                master_kecamatan.nama as kecamatan,
-                master_kabupaten_kota.id as kabupaten_id,
-                master_kabupaten_kota.nama as kabupaten,
-                master_provinsi.id as provinsi_id,
-                master_provinsi.nama as provinsi
-            ")
-            ->distinct()
-            ->get();
-
-        $komoditas = Komoditas::where('is_utama', true)
-            ->when($filters['komoditas_id'], fn($q, $id) => $q->where('id', $id))->get();
-
-        $skorQuery = $this->skorPetaniQuery($filters, $komoditas->pluck('id')->toArray());
-
-        $mapSegmentasi = $skorQuery->clone()
-            ->selectRaw("petani.desa_kelurahan_id,
-                $case AS segmen,
-                COUNT(petani.id) AS total
-            ")
-            ->groupBy('petani.desa_kelurahan_id')            
-            ->groupByRaw($case)
-            ->get();
-
-        $mapAvgSkorSegmentasi = $skorQuery->clone()
-            ->selectRaw("petani.desa_kelurahan_id,
-                COUNT(petani.id) AS jumlah_petani,
-                avg(skor_kesiapan_adopsi) AS skor,
-                CASE
-                    WHEN AVG(skor_kesiapan_adopsi) >= 4 THEN 'Penggerak'
-                    WHEN AVG(skor_kesiapan_adopsi) >= 3 THEN 'Perintis'
-                    WHEN AVG(skor_kesiapan_adopsi) >= 2 THEN 'Pemerhati'
-                    WHEN AVG(skor_kesiapan_adopsi) >= 1 THEN 'Pemula'
-                    ELSE 'Belum Lengkap'
-                END AS segmen
-            ")
-            ->groupBy('petani.desa_kelurahan_id') 
-            ->get();
-
-        $segmenDominan = $mapSegmentasi
-            ->groupBy('desa_kelurahan_id')
-            ->map(function ($items) {
-                return $items->sortByDesc('total')->first();
-            });
-
-        $mapAvgSkorSegmentasi->each(function ($item) use ($segmenDominan) {
-            $dominan = $segmenDominan->get($item->desa_kelurahan_id);
-
-            $item->segmen_dominan = $dominan?->segmen;
-            $item->jumlah_dominan = $dominan?->total;
-        });
-
-        $segmentasiByDesa = $mapAvgSkorSegmentasi->keyBy('desa_kelurahan_id');
-        $desaLookup = $desaKelurahan->keyBy('desa_kelurahan_id');
-
-        $mapDesaSegmentasi = $segmentasiByDesa->map(function ($segmentasi, $desaId) use ($desaLookup) {
-            $desa = $desaLookup->get($desaId);
-
-            if (!$desa) {
-                return null;
-            }
-
-            $desa->segmentasi = $segmentasi;
-
-            return $desa;
-        })->filter()->values();
+        $segmentStyles = collect($this->segments())->keyBy('name');
+        $mapDesaSegmentasi = $this->villageData($this->filters($request), false);
 
         $rows = $mapDesaSegmentasi->map(function ($desa) use ($segmentStyles) {
 
@@ -625,30 +530,21 @@ class IndeksPetaniController extends Controller
         $filters = $this->filters($request);
         $segments = $this->segments();
 
-        $colors = collect($segments)
-            ->pluck('color')
-            ->map(fn($c) => "var(--bs-{$c})")
-            ->values();
         $segmentStyles = collect($segments)->keyBy('name');
 
         $petaniQuery = $this->petaniQuery($filters);
 
         $komoditas = Komoditas::where('is_utama', true)
-            ->when($filters['komoditas_id'], fn($q, $id) => $q->where('id', $id))->get();
+            ->when($filters['komoditas_id'], fn($q, $id) => $q->where('id', $id))->get(['id', 'nama']);
 
         $daftarPetani = $petaniQuery->clone()
             ->select('petani.*')
+            ->with(['desaKelurahan', 'komoditas', 'skor'])
+            ->withSum('lahans as total_luas_lahan', 'luas_lahan')
             ->whereIn('komoditas_id', $komoditas->pluck('id'))
             ->get();
 
         $data = $daftarPetani
-            ->filter(function ($item) use ($filters) {
-                if (!$filters['segmen']) {
-                    return true;
-                }
-                $segmen = $item->skor ? $item->segmen() : 'Belum Lengkap';
-                return $segmen === $filters['segmen'];
-            })
             ->map(function ($item) use ($segmentStyles) {
                 $segmen = $item->skor
                     ? $item->segmen()
@@ -662,7 +558,7 @@ class IndeksPetaniController extends Controller
                     'desa' => $item->desaKelurahan?->nama,
                     'desa_kelurahan_id' => $item->desa_kelurahan_id,
                     'komoditas' => $item->komoditas?->nama,
-                    'luas_lahan' => $item->lahans?->sum('luas_lahan') ?? 0,
+                    'luas_lahan' => (float) ($item->total_luas_lahan ?? 0),
                     'skor' => $item->skor
                         ? $item->skor->skor_kesiapan_adopsi
                         : null,
diff --git a/resources/views/dashboard/karakteristik-petani.blade.php b/resources/views/dashboard/karakteristik-petani.blade.php
index 6d0c3f5..dd7f6f6 100644
--- a/resources/views/dashboard/karakteristik-petani.blade.php
+++ b/resources/views/dashboard/karakteristik-petani.blade.php
@@ -3,6 +3,24 @@
 @push('style')
 <link rel="stylesheet" href="{{ asset('assets/vendor/libs/apex-charts/apex-charts.css') }}" />
 <style>
+    #farmerPagination .page-link {
+        padding: 0.4809rem;
+        font-size: 0.9375rem;
+        line-height: 1.375;
+        border-radius: 0.375rem;
+    }
+    #farmerPagination .pagination {
+        flex-wrap: wrap;
+    }
+    @media (max-width: 575.98px) {
+        #farmerPagination .page-link {
+            font-size: 0.8125rem;
+            min-block-size: calc(1.7501875rem + 2px);
+            min-inline-size: calc(1.7509515rem + 2px);
+            padding-block: 0.211rem;
+            padding-inline: 0.1635rem;
+        }
+    }
     .summary-card .card-body {
         padding: 22px 22px;
     }
@@ -70,6 +88,14 @@
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>
 <style>
+    #farmer-map-shell:fullscreen {
+        width: 100%;
+        height: 100%;
+        background: var(--bs-body-bg);
+    }
+    #farmer-map-shell:fullscreen #map-sebaran-petani {
+        height: 100% !important;
+    }
     .clickable-row {
         cursor: pointer;
     }
@@ -168,22 +194,12 @@
 
 
 <style>
-    .profile-farming-header {
-        margin-bottom: 1rem;
-    }
 
     .profile-farming-shell {
         max-width: none;
         width: 100%;
     }
 
-    .profile-farming-title {
-        color: var(--bs-heading-color);
-        font-size: 1.5rem;
-        font-weight: 700;
-        line-height: 1.25;
-        margin-bottom: .35rem;
-    }
 
     .profile-farming-tabs {
         gap: .2rem;
@@ -235,10 +251,6 @@
 @endphp
 
 <div class="container-fluid flex-grow-1 container-p-y pb-0 profile-farming-shell">
-    <div class="profile-farming-header">
-        <h4 class="profile-farming-title">Karakteristik Petani</h4>
-        <p class="text-body-secondary mb-0">Ringkasan karakteristik dan indeks petani.</p>
-    </div>
 @php($showTabFilterInput = true)
 
 <div class="row g-6 py-4">
@@ -353,7 +365,7 @@
                     aria-selected="{{ $activeTab === 'demografi-petani' ? 'true' : 'false' }}"
                 >
                     <i class="icon-base ti tabler-users icon-sm me-1_5"></i>
-                    Karakteristik Petani
+                    Demografi Petani
                 </button>
             </li>
             <li class="nav-item">
@@ -380,7 +392,7 @@
         id="profile-tab-demografi-petani"
         role="tabpanel"
     >
-        <div class="container-xxl flex-grow-1 container-p-y">
+        <div class="container-fluid flex-grow-1 container-p-y px-0">
     <div class="row g-6">
         <div class="col-xl-4 col-lg-6 col-sm-6">
             <div class="card card-border-shadow-primary h-100">
@@ -592,7 +604,14 @@
         </div>
     <!--/ Card Border Shadow -->
     <!-- Vehicles overview -->
-        <div class="col-xxl-4 col-lg-6">
+        <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>
+            <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-title mb-0">
@@ -605,7 +624,7 @@
                 </div>
             </div>
         </div>
-        <div class="col-xxl-4 col-lg-6">
+        <div class="col-12 col-md-6 col-xl-4">
             <div class="card h-100">
                 <div class="card-header">
                     <div class="card-title mb-0">
@@ -621,7 +640,7 @@
                 </div>
             </div>
         </div>
-        <div class="col-xxl-4 col-lg-6">
+        <div class="col-12 col-md-6 col-xl-4">
             <div class="card h-100">
                 <div class="card-header">
                     <div class="card-title mb-0">
@@ -638,7 +657,17 @@
                 </div>
             </div>
         </div>
-        <div class="col-xxl-4 col-lg-6">
+                </div>
+            </div>
+        </div>
+        <div class="col-12">
+            <div class="d-flex justify-content-between align-items-start gap-3">
+                <div><h5 class="mb-1">Kondisi Rumah Tangga dan Kelembagaan</h5><p class="text-body-secondary mb-0">Gambaran tanggungan keluarga, penghasilan usaha tani, dan keanggotaan 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>
+            <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-title mb-0">
@@ -655,81 +684,7 @@
                 </div>
             </div>
         </div>
-        <div class="col-xxl-4 col-lg-6">
-            <div class="card h-100">
-                <div class="card-header">
-                    <div class="card-title mb-0">
-                        <h5 class="m-0 me-2">Karakteristik Petani</h5>
-
-                        <small class="text-body-secondary">
-                            Petani yang terdaftar di kelompok tani
-                        </small>
-                    </div>
-                </div>
-
-                <div class="card-body">
-                    <div id="farmerGroupChart"></div>
-                </div>
-            </div>
-        </div>
-        <div class="col-xxl-4 col-lg-6">
-            <div class="card h-100">
-                <div class="card-header d-flex align-items-center justify-content-between">
-                    <div class="card-title mb-0">
-                        <h5 class="m-0 me-2">
-                            Komoditas Utama yang Dikelola
-                        </h5>
-
-                        <small class="text-body-secondary">
-                            Jumlah petani berdasarkan komoditas utama
-                        </small>
-                    </div>
-                </div>
-
-                <div class="card-body">
-                    <div id="commodityChart"></div>
-                </div>
-            </div>
-        </div>
-        <div class="col-xxl-4 col-lg-6">
-            <div class="card h-100">
-                <div class="card-header">
-                    <div class="card-title mb-0">
-                        <h5 class="m-0 me-2">
-                            Luas Lahan yang Dimiliki
-                        </h5>
-
-                        <small class="text-body-secondary">
-                            Distribusi petani berdasarkan luas lahan garapan
-                        </small>
-                    </div>
-                </div>
-
-                <div class="card-body">
-                    <div id="landAreaChart"></div>
-                </div>
-            </div>
-        </div>
-        <div class="col-xxl-4 col-lg-6">
-            <div class="card h-100">
-                <div class="card-header">
-                    <div class="card-title mb-0">
-                        <h5 class="m-0 me-2">
-                            Status Kepemilikan Lahan
-                        </h5>
-
-                        <small class="text-body-secondary">
-                            Distribusi petani berdasarkan status lahan
-                        </small>
-                    </div>
-                </div>
-
-                <div class="card-body">
-                    <div id="landOwnershipStatusChart"></div>
-                </div>
-            </div>
-        </div>
-        <div class="col-xxl-4 col-lg-6">
+        <div class="col-12 col-md-6 col-xl-4">
             <div class="card h-100">
                 <div class="card-header">
                     <div class="card-title mb-0">
@@ -748,6 +703,93 @@
                 </div>
             </div>
         </div>
+        <div class="col-12 col-md-6 col-xl-4">
+            <div class="card h-100">
+                <div class="card-header">
+                    <div class="card-title mb-0">
+                        <h5 class="m-0 me-2">Status Keanggotaan Kelompok Tani</h5>
+
+                        <small class="text-body-secondary">
+                            Petani yang terdaftar di kelompok tani
+                        </small>
+                    </div>
+                </div>
+
+                <div class="card-body">
+                    <div id="farmerGroupChart"></div>
+                </div>
+            </div>
+        </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-12">
+            <div class="d-flex justify-content-between align-items-start gap-3">
+                <div><h5 class="mb-1">Profil Usaha Tani</h5><p class="text-body-secondary mb-0">Gambaran komoditas yang dikelola, luas lahan, 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>
+            <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-title mb-0">
+                        <h5 class="m-0 me-2">
+                            Komoditas Utama yang Dikelola
+                        </h5>
+
+                        <small class="text-body-secondary">
+                            Jumlah petani berdasarkan komoditas utama
+                        </small>
+                    </div>
+                </div>
+
+                <div class="card-body">
+                    <div id="commodityChart"></div>
+                </div>
+            </div>
+        </div>
+        <div class="col-12 col-md-6 col-xl-4">
+            <div class="card h-100">
+                <div class="card-header">
+                    <div class="card-title mb-0">
+                        <h5 class="m-0 me-2">
+                            Luas Lahan yang Dimiliki
+                        </h5>
+
+                        <small class="text-body-secondary">
+                            Distribusi petani berdasarkan luas lahan garapan
+                        </small>
+                    </div>
+                </div>
+
+                <div class="card-body">
+                    <div id="landAreaChart"></div>
+                </div>
+            </div>
+        </div>
+        <div class="col-12 col-md-6 col-xl-4">
+            <div class="card h-100">
+                <div class="card-header">
+                    <div class="card-title mb-0">
+                        <h5 class="m-0 me-2">
+                            Status Kepemilikan Lahan
+                        </h5>
+
+                        <small class="text-body-secondary">
+                            Distribusi petani berdasarkan status lahan
+                        </small>
+                    </div>
+                </div>
+
+                <div class="card-body">
+                    <div id="landOwnershipStatusChart"></div>
+                </div>
+            </div>
+        </div>
+                </div>
+            </div>
+        </div>
         <div class="col-xxl-12 col-lg-12">
             <div class="card">
 
@@ -762,7 +804,7 @@
                                 class="badge bg-label-primary"
                                 id="farmerTotalBadge"
                             >
-                                {{ $daftarPetani->total() }} petani
+                                {{ $data['total_petani'] }} petani
                             </span>
                         </div>
 
@@ -789,17 +831,28 @@
                             >
                         </div>
 
-                        <button
-                            type="button"
-                            id="resetFarmerFilter"
-                            class="btn btn-label-secondary"
-                        >
-                            Reset
-                        </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>
                 </div>
 
+<div class="collapse" id="demografi-table-filter-panel"><div class="card-body border-top">
+    <div class="row g-3">
+        @foreach ($tableFilters as $key => [$label, $options])
+            <div class="col-12 col-sm-6 col-lg-4">
+                <label class="form-label" for="farmer-filter-{{ $key }}">{{ $label }}</label>
+                <select id="farmer-filter-{{ $key }}" class="form-select form-select-sm farmer-table-filter" data-filter="{{ $key }}">
+                    <option value="">Semua</option>
+                    @foreach ($options as $value => $text)
+                        <option value="{{ $value }}">{{ $text }}</option>
+                    @endforeach
+                </select>
+            </div>
+        @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></div>
                 <div class="table-responsive">
                     <table class="table table-hover">
 
@@ -818,33 +871,16 @@
 
                         <tbody id="farmerTableBody">
 
-                            @foreach ($daftarPetani as $petani)
-
-                                {{-- isi tabel kamu yang sekarang --}}
-
-                            @endforeach
+                            <tr><td colspan="8" class="text-center text-body-secondary py-5">Memuat data petani...</td></tr>
 
                         </tbody>
                     </table>
                 </div>
 
-                <div class="card-footer d-flex justify-content-between align-items-center">
-                    <small class="text-body-secondary" id="farmerTableInfo">
-                        Menampilkan
-                        {{ $daftarPetani->firstItem() ?? 0 }}
-                        -
-                        {{ $daftarPetani->lastItem() ?? 0 }}
-                        dari
-                        {{ $daftarPetani->total() }}
-                        petani
-                    </small>
+                <div class="card-footer d-flex flex-wrap justify-content-between align-items-center gap-3">
+                    <small class="text-body-secondary" id="farmerTableInfo">Memuat data petani...</small>
 
-                    <div id="farmerPagination">
-                        {{ $daftarPetani
-                            ->onEachSide(1)
-                            ->links('pagination::bootstrap-5')
-                        }}
-                    </div>
+                    <div id="farmerPagination"></div>
                 </div>
 
             </div>
@@ -860,7 +896,7 @@
         role="tabpanel"
     >
 @php($showIndeksFilter = false)
-<div class="container-xxl flex-grow-1 container-p-y">
+<div class="container-fluid flex-grow-1 container-p-y px-0">
     <div class="row g-6">
         <div class="col-lg-3 col-sm-6">
             <div class="card card-border-shadow-primary h-100">
@@ -915,7 +951,7 @@
                     </div>
                     <p class="mb-1">Rata-rata Indeks Kesiapan Adopsi</p>
                     <p class="mb-0">
-                        <small class="text-body-secondary">Segmentasi:</small>
+                        <small class="text-body-secondary">Kategori Indeks:</small>
                         <span class="text-heading fw-medium me-2" id="avg-segmen"></span>
                     </p>
                 </div>
@@ -942,13 +978,19 @@
         </div>
     </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">Distribusi tingkat kesiapan adopsi petani secara keseluruhan dan per 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="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-title mb-0">
-                        <h5 class="m-0 me-2">Distribusi Segmentasi Petani</h5>
-                        <p class="card-subtitle">untuk semua komoditas</p>
+                        <h5 class="m-0 me-2">Distribusi Indeks Petani</h5>
+                        <p class="card-subtitle">sesuai filter dashboard</p>
                     </div>
                 </div>
                 <div class="card-body">
@@ -976,7 +1018,7 @@
             <div class="card card-border-shadow-secondary h-100">
                 <div class="card-header d-flex justify-content-between align-items-center">
                     <div class="card-title mb-0">
-                        <h5 class="m-0 me-2">Distribusi Segmentasi Petani</h5>
+                        <h5 class="m-0 me-2">Distribusi Indeks Petani</h5>
                         <p class="card-subtitle">per komoditas</p>
                     </div>
                 </div>
@@ -987,26 +1029,34 @@
         </div>
     </div>
 
+        </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">Gambaran rata-rata kesiapan adopsi berdasarkan dimensi dan komponen penilaian.</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="collapse show chart-group-panel" id="indeks-kesiapan-charts">
     <div class="row g-6 py-4">
         <div class="col-lg-6 col-sm-12">
             <div class="card card-border-shadow-info h-100">
                 <div class="card-header d-flex justify-content-between align-items-center">
                     <div class="card-title mb-0">
                         <h5 class="m-0 me-2">Rata-rata Dimensi Kesiapan Adopsi</h5>
-                        <p class="card-subtitle">untuk semua komoditas</p>
+                        <p class="card-subtitle">sesuai filter dashboard</p>
                     </div>
                 </div>
                 <div class="card-body">
                     <div id="chart-dimensi"></div>
                     <div class="d-flex flex-wrap gap-3 mt-3 small justify-content-center">
                         <div>
-                            <span class="badge bg-label-primary">D1</span> Sistem &amp; Praktik Budidaya
+                            Sistem &amp; Praktik Budidaya
                         </div>
                         <div>
-                            <span class="badge bg-label-primary">D2</span> Sosial Ekonomi Rumah Tangga
+                            Sosial Ekonomi Rumah Tangga
                         </div>
                         <div>
-                            <span class="badge bg-label-primary">D3</span> Rantai Nilai &amp; Akses Pasar
+                            Rantai Nilai &amp; Akses Pasar
                         </div>
                     </div>
                 </div>
@@ -1017,29 +1067,29 @@
                 <div class="card-header d-flex justify-content-between align-items-center">
                     <div class="card-title mb-0">
                         <h5 class="m-0 me-2">Rata-rata Komponen Kesiapan Adopsi</h5>
-                        <p class="card-subtitle">untuk semua komoditas</p>
+                        <p class="card-subtitle">sesuai filter dashboard</p>
                     </div>
                 </div>
                 <div class="card-body">
                     <div id="chart-komponen"></div>
                     <div class="d-flex flex-wrap gap-3 mt-3 small justify-content-center">
                         <div>
-                            <span class="badge bg-label-primary">K1</span> Motivasi &amp; Kapasitas Adopsi
+                            Motivasi &amp; Kapasitas Adopsi
                         </div>
                         <div>
-                            <span class="badge bg-label-primary">K2</span> Kondisi Ekonomi Rumah Tangga
+                            Kondisi Ekonomi Rumah Tangga
                         </div>
                         <div>
-                            <span class="badge bg-label-primary">K3</span> Praktik Budidaya &amp; GAP
+                            Praktik Budidaya &amp; GAP
                         </div>
                         <div>
-                            <span class="badge bg-label-primary">K4</span> Keterlibatan Kelembagaan
+                            Keterlibatan Kelembagaan
                         </div>
                         <div>
-                            <span class="badge bg-label-primary">K5</span> Akses &amp; Kebebasan Keuangan
+                            Akses &amp; Kebebasan Keuangan
                         </div>
                         <div>
-                            <span class="badge bg-label-primary">K6</span> Rantai Nilai &amp; Akses Pasar
+                            Rantai Nilai &amp; Akses Pasar
                         </div>
                     </div>
                 </div>
@@ -1047,17 +1097,30 @@
         </div>
     </div>
 
+        </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</h5><p class="text-body-secondary mb-0">Peta sebaran petani dan ringkasan indeks pada setiap desa.</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="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-title mb-0">
-                        <h5 class="m-0 me-2">Sebaran Segmentasi Petani</h5>
-                        <p class="card-subtitle">berdasarkan sebaran wilayah untuk semua komoditas</p>
+                        <h5 class="m-0 me-2">Sebaran Indeks Petani</h5>
+                        <p class="card-subtitle">berdasarkan wilayah sesuai filter dashboard</p>
                     </div>
                 </div>
                 <div class="card-body">
-                    <div id="map-sebaran-petani" style="height: 430px;"></div>
+                                        <div id="farmer-map-shell" class="position-relative">
+                        <button type="button" id="farmer-map-fullscreen" class="btn btn-light btn-sm shadow-sm position-absolute top-0 end-0 m-3" style="z-index: 1000;" aria-label="Buka peta layar penuh" title="Buka peta layar penuh">
+                            <i class="icon-base ti tabler-maximize"></i>
+                        </button>
+                        <div id="map-sebaran-petani" style="height: 430px;"></div>
+                    </div>
                     <span class="small text-muted">*klik pada desa untuk menampilkan detail informasi dan menyaring daftar petani</span>
                 </div>
             </div>
@@ -1066,8 +1129,8 @@
             <div class="card card-border-shadow-success h-100">
                 <div class="card-header d-flex justify-content-between align-items-center">
                     <div class="card-title mb-0">
-                        <h5 class="m-0 me-2">Distribusi Segmentasi Petani</h5>
-                        <p class="card-subtitle">berdasarkan sebaran wilayah untuk semua komoditas</p>
+                        <h5 class="m-0 me-2">Distribusi Indeks Petani</h5>
+                        <p class="card-subtitle">berdasarkan wilayah sesuai filter dashboard</p>
                     </div>
                 </div>
                 <div class="card-body">
@@ -1087,21 +1150,46 @@
         </div>
     </div>
 
+        </div>
+    </div>
     <div class="row g-6 py-4">
         <div class="col-lg-12 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-title mb-0">
-                        <h5 class="m-0 me-2">Daftar Petani</h5>
-                        <p class="card-subtitle">untuk semua komoditas</p>
+                <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-3">
+                    <div>
+                        <div class="d-flex align-items-center gap-2">
+                            <h5 class="card-title mb-0">Daftar Petani</h5>
+                            <span class="badge bg-label-primary" id="indexFarmerTotalBadge">0 petani</span>
+                        </div>
+                        <small class="text-body-secondary">Menampilkan data petani sesuai filter dashboard</small>
+                    </div>
+                    <div class="d-flex align-items-center gap-2">
+                        <div class="input-group input-group-merge" style="width: 220px;">
+                            <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" 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>
-                    <button type="button" id="btn-reset-filter" class="btn btn-outline-secondary btn-sm">
-                        <i class="fas fa-sync-alt me-1"></i>
-                        Reset Filter
-                    </button>
                 </div>
+                <div class="collapse" id="index-table-filter-panel"><div class="card-body border-top">
+                    <div class="row g-3">
+                        <div class="col-12 col-md-4">
+                            <label class="form-label" for="index-table-desa">Desa/Kelurahan</label>
+                            <select id="index-table-desa" class="form-select form-select-sm index-table-filter" data-column="1"><option value="">Semua Desa/Kelurahan</option></select>
+                        </div>
+                        <div class="col-12 col-md-4">
+                            <label class="form-label" for="index-table-komoditas">Komoditas</label>
+                            <select id="index-table-komoditas" class="form-select form-select-sm index-table-filter" data-column="2"><option value="">Semua Komoditas</option></select>
+                        </div>
+                        <div class="col-12 col-md-4">
+                            <label class="form-label" for="index-table-segmen">Segmen</label>
+                            <select id="index-table-segmen" class="form-select form-select-sm index-table-filter" data-column="5"><option value="">Semua Segmen</option></select>
+                        </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="card-body">
-                    <table id="table-petani" class="table card-table table-border-top-0 table-border-bottom-0">
+                    <table id="table-petani" class="table table-hover">
                         <thead>
                             <tr>
                                 <th class="pe-0">Nama Petani</th>
@@ -1126,11 +1214,19 @@
 @endsection
 
 @push('scripts')
-<script src="{{ asset('assets/vendor/libs/apex-charts/apexcharts.js') }}"></script>
+
 
 <script>
 'use strict';
 
+const dashboardFilters = @json($dashboardFilters);
+const dashboardFilterParams = new URLSearchParams();
+Object.entries(dashboardFilters).forEach(([key, value]) => {
+    if (value !== null && value !== '') {
+        dashboardFilterParams.set(key, value);
+    }
+});
+
 document.addEventListener('DOMContentLoaded', function () {
     const headingColor = config.colors.headingColor;
     const legendColor = config.colors.bodyColor;
@@ -1152,6 +1248,7 @@ document.addEventListener('DOMContentLoaded', function () {
     };
 
     let searchTimer = null;
+    let farmerTableRequest = null;
 
     function escapeHtml(value) {
         if (value === null || value === undefined) {
@@ -1174,20 +1271,16 @@ document.addEventListener('DOMContentLoaded', function () {
     }
 
     async function loadFarmerTable(page = 1) {
+        farmerTableRequest?.abort();
+        const request = new AbortController();
+        farmerTableRequest = request;
         const searchInput = document.querySelector('#farmerSearch');
         const search = searchInput ? searchInput.value.trim() : '';
         const params = new URLSearchParams();
 
         params.set('page', page);
 
-        const generalFilterForm = document.querySelector('#form-filter');
-        if (generalFilterForm) {
-            new FormData(generalFilterForm).forEach((value, key) => {
-                if (value !== null && value !== undefined && value !== '') {
-                    params.set(key, value);
-                }
-            });
-        }
+        dashboardFilterParams.forEach((value, key) => params.set(key, value));
 
         Object.entries(activeFilters).forEach(([key, value]) => {
             if (value !== null && value !== undefined && value !== '') {
@@ -1215,6 +1308,7 @@ document.addEventListener('DOMContentLoaded', function () {
         try {
             const response = await fetch(`${farmerDataUrl}?${params.toString()}`, {
                 method: 'GET',
+                signal: request.signal,
                 headers: {
                     'Accept': 'application/json',
                     'X-Requested-With': 'XMLHttpRequest'
@@ -1226,9 +1320,13 @@ document.addEventListener('DOMContentLoaded', function () {
             }
 
             const result = await response.json();
-            renderFarmerTable(result);
+            if (!request.signal.aborted) renderFarmerTable(result);
         } catch (error) {
+            if (error.name === 'AbortError') return;
             console.error('Gagal memuat tabel petani:', error);
+            if (tableBody) {
+                tableBody.innerHTML = '<tr><td colspan="8" class="text-center text-danger py-5">Data gagal dimuat. Silakan coba kembali.</td></tr>';
+            }
         }
     }
 
@@ -1302,7 +1400,7 @@ document.addEventListener('DOMContentLoaded', function () {
             return;
         }
 
-        let html = `<nav><ul class="pagination pagination-sm mb-0">`;
+        let html = `<nav><ul class="pagination mb-0">`;
 
         html += `
             <li class="page-item ${pagination.current_page === 1 ? 'disabled' : ''}">
@@ -1312,6 +1410,9 @@ document.addEventListener('DOMContentLoaded', function () {
             </li>
         `;
 
+        html = html.replace('<ul class="pagination mb-0">', '<ul class="pagination mb-0">' +
+            '<li class="page-item ' + (pagination.current_page === 1 ? 'disabled' : '') + '">' +
+            '<button type="button" class="page-link farmer-page" data-page="1" aria-label="Halaman pertama"><i class="icon-base ti tabler-chevrons-left"></i></button></li>');
         const currentPage = pagination.current_page;
         const lastPage = pagination.last_page;
         const startPage = Math.max(1, currentPage - 2);
@@ -1357,6 +1458,9 @@ document.addEventListener('DOMContentLoaded', function () {
             </li>
         `;
 
+        html += '<li class="page-item ' + (currentPage === lastPage ? 'disabled' : '') + '">' +
+            '<button type="button" class="page-link farmer-page" data-page="' + lastPage + '" aria-label="Ke halaman terakhir" title="Ke halaman terakhir"><i class="icon-base ti tabler-chevrons-right"></i></button></li>';
+
         html += `</ul></nav>`;
 
         paginationEl.innerHTML = html;
@@ -1369,6 +1473,9 @@ document.addEventListener('DOMContentLoaded', function () {
             activeFilters[filter] = value;
         }
 
+        document.querySelectorAll('.farmer-table-filter').forEach((select) => {
+            select.value = activeFilters[select.dataset.filter] ?? '';
+        });
         loadFarmerTable(1);
     }
 
@@ -1390,9 +1497,19 @@ document.addEventListener('DOMContentLoaded', function () {
             searchInput.value = '';
         }
 
+        document.querySelectorAll('.farmer-table-filter').forEach((select) => {
+            select.value = activeFilters[select.dataset.filter] ?? '';
+        });
         loadFarmerTable(1);
     }
 
+    document.querySelector('#applyFarmerFilter').addEventListener('click', function () {
+        document.querySelectorAll('.farmer-table-filter').forEach((select) => {
+            activeFilters[select.dataset.filter] = select.value || null;
+        });
+        loadFarmerTable(1);
+    });
+
     document.addEventListener('input', function (event) {
         if (event.target.id !== 'farmerSearch') {
             return;
@@ -2365,7 +2482,7 @@ document.addEventListener('DOMContentLoaded', function () {
 </script>
 
 
-<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>
@@ -2411,6 +2528,7 @@ document.addEventListener('DOMContentLoaded', function () {
         $('#filter-kecamatan, #filter-desa').prop('disabled', true);
 
         let defaultKabupaten = $('#filter-kabkota').data('default');
+        $('#filter-kabkota').removeData('default');
         if (defaultKabupaten) {
             $('#filter-kabkota').val(defaultKabupaten).trigger('change');
         }
@@ -2451,6 +2569,7 @@ document.addEventListener('DOMContentLoaded', function () {
         $('#filter-kecamatan').prop('disabled', false);
 
         let defaultKecamatan = $('#filter-kecamatan').data('default');
+        $('#filter-kecamatan').removeData('default');
         if (defaultKecamatan) {
             console.log('defaultKecamatan', defaultKecamatan);
             $('#filter-kecamatan').val(defaultKecamatan).trigger('change');
@@ -2488,6 +2607,7 @@ document.addEventListener('DOMContentLoaded', function () {
         $('#filter-desa').prop('disabled', false);
 
         let defaultDesa = $('#filter-desa').data('default');
+        $('#filter-desa').removeData('default');
         if (defaultDesa) {
             console.log('default desa', defaultDesa);
             $('#filter-desa').val(defaultDesa).trigger('change');
@@ -2530,16 +2650,7 @@ document.addEventListener('DOMContentLoaded', function () {
     let selectedKomoditas = null;
     let selectedSegmen = null;
 
-    $('#btn-reset-filter').on('click', function () {
 
-        selectedDesa = null;
-        selectedKomoditas = null;
-        selectedSegmen = null;
-
-        // Reset chart
-        chartSegmentasiPetani.resetSeries();
-        chartSegmentasiPetaniByKomoditas.resetSeries();
-    });
 
 
     // Chart Dimensi dan Komponen Kesiapan Adopsi
@@ -2564,7 +2675,7 @@ document.addEventListener('DOMContentLoaded', function () {
         $.ajax({
             url: '{{ route('dashboard.indeks-petani.summary') }}',
             type: 'GET',
-            data: $('#form-filter').serialize(),
+            data: dashboardFilterParams.toString(),
             dataType: 'json',
             success: function (data) {
                 $('#count-petani').text(data.petani);    
@@ -2585,22 +2696,27 @@ document.addEventListener('DOMContentLoaded', function () {
 
         // Chart Segmentasi Petani
         var chartSegmentasiPetani;
+        let distributionLoading = false;
 
         function loadChartSegmentasiPetani() {
+            const container = document.querySelector('#chart-segmentasi-petani');
+            if (!container.clientWidth || distributionLoading || chartSegmentasiPetani) return;
+            distributionLoading = true;
             $.ajax({
                 url: '{{ route("dashboard.indeks-petani.segmen") }}',
                 type: 'GET',
-                data: $('#form-filter').serialize(),
+                data: dashboardFilterParams.toString(),
                 dataType: 'json',
                 success: function(response) {
                     if (chartSegmentasiPetani) {
                         chartSegmentasiPetani.destroy();
                     }
                     var optionsSegmentasiPetani = {
-                        series: response.series,
+                        series: response.series.map((value) => Number(value) || 0),
                         chart: {
                             type: 'donut',
-                            width: 240,
+                            width: '100%',
+                            height: 280,
                             events: {
                                 dataPointSelection: function(event, chartContext, config) {
 
@@ -2660,7 +2776,10 @@ document.addEventListener('DOMContentLoaded', function () {
                         optionsSegmentasiPetani
                     );
 
-                    chartSegmentasiPetani.render();
+                    chartSegmentasiPetani.render().catch(function (error) {
+                        chartSegmentasiPetani = null;
+                        console.error('Gagal merender distribusi indeks:', error);
+                    });
 
                     let html = '';
 
@@ -2701,11 +2820,14 @@ document.addEventListener('DOMContentLoaded', function () {
                 },
 
                 error: function(xhr) {
+                    distributionLoading = false;
                     console.error('Gagal mengambil data segmentasi:', xhr);
                 }
             });
         }
 
+        document.addEventListener('shown.bs.tab', loadChartSegmentasiPetani);
+        document.getElementById('indeks-segmentasi-charts').addEventListener('shown.bs.collapse', loadChartSegmentasiPetani);
         loadChartSegmentasiPetani();
     })
 </script>
@@ -2792,20 +2914,14 @@ document.addEventListener('DOMContentLoaded', function () {
             },
         };
 
-        var chartSegmentasiPetaniByKomoditas =
-            new ApexCharts(
-                document.querySelector('#chart-segmentasi-petani-komoditas'),
-                optionsSegmentasiPetaniByKomoditas
-            );
-
-        chartSegmentasiPetaniByKomoditas.render();
+        let chartSegmentasiPetaniByKomoditas;
 
         function loadChartSegmentasiKomoditas() {
 
             $.ajax({
                 url: "{{ route('dashboard.indeks-petani.segmen.komoditas') }}",
                 type: "GET",
-                data: $('#form-filter').serialize(),
+                data: dashboardFilterParams.toString(),
                 dataType: "json",
                 beforeSend: function() {
                     // optional
@@ -2814,14 +2930,12 @@ document.addEventListener('DOMContentLoaded', function () {
                 success: function(response) {
 
                     chartSegmentasiPetaniByKomoditas.updateOptions({
-                        xaxis: {
-                            categories: response.categories
-                        }
+                        xaxis: { categories: response.categories },
+                        series: response.series.map((series) => ({
+                            ...series,
+                            data: series.data.map((value) => Number(value) || 0)
+                        }))
                     });
-
-                    chartSegmentasiPetaniByKomoditas.updateSeries(
-                        response.series
-                    );
                 },
                 error: function(xhr) {
                     console.error(
@@ -2832,14 +2946,25 @@ document.addEventListener('DOMContentLoaded', function () {
             });
         }
 
-        loadChartSegmentasiKomoditas();
+        function initializeCommodityDistribution() {
+            const container = document.querySelector('#chart-segmentasi-petani-komoditas');
+            if (!container.clientWidth || chartSegmentasiPetaniByKomoditas) return;
+            chartSegmentasiPetaniByKomoditas = new ApexCharts(container, optionsSegmentasiPetaniByKomoditas);
+            chartSegmentasiPetaniByKomoditas.render().then(loadChartSegmentasiKomoditas).catch(function (error) {
+                chartSegmentasiPetaniByKomoditas = null;
+                console.error('Gagal merender distribusi indeks per komoditas:', error);
+            });
+        }
+        document.addEventListener('shown.bs.tab', initializeCommodityDistribution);
+        document.getElementById('indeks-segmentasi-charts').addEventListener('shown.bs.collapse', initializeCommodityDistribution);
+        initializeCommodityDistribution();
     })
 </script>
 <script>
     $(document).ready(function () {
         var radarDimensi = new ApexCharts($("#chart-dimensi")[0], {
             chart: {
-                height: 240,
+                height: 380,
                 type: 'radar',
                 toolbar: {
                     show: false
@@ -2900,7 +3025,7 @@ document.addEventListener('DOMContentLoaded', function () {
                 }
             },
             xaxis: {
-                categories: ['D1', 'D2', 'D3'],
+                categories: [['Sistem & Praktik', 'Budidaya'], ['Sosial Ekonomi', 'Rumah Tangga'], ['Rantai Nilai &', 'Akses Pasar']],
                 labels: {
                     show: true,
                     style: {
@@ -2926,14 +3051,14 @@ document.addEventListener('DOMContentLoaded', function () {
             }]
         });
 
-        radarDimensi.render();
+
 
         function loadChartRadarDimensi() {
 
             $.ajax({
                 url: "{{ route('dashboard.indeks-petani.dimensi') }}",
                 type: "GET",
-                data: $('#form-filter').serialize(),
+                data: dashboardFilterParams.toString(),
                 dataType: "json",
                 beforeSend: function() {
                     // optional
@@ -2954,14 +3079,14 @@ document.addEventListener('DOMContentLoaded', function () {
             });
         }
 
-        loadChartRadarDimensi();
+        radarDimensi.render().then(loadChartRadarDimensi);
     })
 </script>
 <script>
     $(document).ready(function () {
         var radarKomponen = new ApexCharts($("#chart-komponen")[0], {
             chart: {
-                height: 240,
+                height: 380,
                 type: 'radar',
                 toolbar: {
                     show: false
@@ -2971,11 +3096,7 @@ document.addEventListener('DOMContentLoaded', function () {
                 name: "Rata-rata Komponen Kesiapan Adopsi",
                 data: []
             }],
-            labels: [
-                'Sistem & Praktik Budidaya',
-                'Sosial Ekonomi Rumah Tangga',
-                'Rantai Nilai & Akses Pasar'
-            ],
+            labels: ['Motivasi & Kapasitas Adopsi', 'Kondisi Ekonomi Rumah Tangga', 'Praktik Budidaya & GAP', 'Keterlibatan Kelembagaan', 'Akses & Kebebasan Keuangan', 'Rantai Nilai & Akses Pasar'],
             plotOptions: {
                 radar: {
                     polygons: {
@@ -3022,7 +3143,7 @@ document.addEventListener('DOMContentLoaded', function () {
                 }
             },
             xaxis: {
-                categories: ['K1', 'K2', 'K3', 'K4', 'K5', 'K6'],
+                categories: [['Motivasi & Kapasitas', 'Adopsi'], ['Kondisi Ekonomi', 'Rumah Tangga'], ['Praktik Budidaya', '& GAP'], ['Keterlibatan', 'Kelembagaan'], ['Akses & Kebebasan', 'Keuangan'], ['Rantai Nilai &', 'Akses Pasar']],
                 labels: {
                     show: true,
                     style: {
@@ -3048,14 +3169,14 @@ document.addEventListener('DOMContentLoaded', function () {
             }]
         });
 
-        radarKomponen.render();
+
 
         function loadChartRadarKomponen() {
 
             $.ajax({
                 url: "{{ route('dashboard.indeks-petani.komponen') }}",
                 type: "GET",
-                data: $('#form-filter').serialize(),
+                data: dashboardFilterParams.toString(),
                 dataType: "json",
                 beforeSend: function() {
                     // optional
@@ -3076,13 +3197,49 @@ document.addEventListener('DOMContentLoaded', function () {
             });
         }
 
-        loadChartRadarKomponen();
+        radarKomponen.render().then(loadChartRadarKomponen);
     })
 </script>
 <script>
     $(document).ready(function () {
         // Map Sebaran Petani
         var map = L.map('map-sebaran-petani').setView([-0.789, 113.921], 5);
+        const mapShell = document.getElementById('farmer-map-shell');
+        const fullscreenButton = document.getElementById('farmer-map-fullscreen');
+        if (!document.fullscreenEnabled || !mapShell.requestFullscreen) {
+            fullscreenButton.hidden = true;
+        }
+        fullscreenButton.addEventListener('click', async function () {
+            try {
+                if (document.fullscreenElement === mapShell) {
+                    await document.exitFullscreen();
+                } else {
+                    await mapShell.requestFullscreen();
+                }
+            } catch (error) {
+                console.error('Tidak dapat membuka peta layar penuh:', error);
+            }
+        });
+        document.addEventListener('fullscreenchange', function () {
+            const isFullscreen = document.fullscreenElement === mapShell;
+            fullscreenButton.innerHTML = '<i class="icon-base ti ' + (isFullscreen ? 'tabler-minimize' : 'tabler-maximize') + '"></i>';
+            const label = isFullscreen ? 'Keluar dari layar penuh' : 'Buka peta layar penuh';
+            fullscreenButton.setAttribute('aria-label', label);
+            fullscreenButton.title = label;
+            requestAnimationFrame(focusMapData);
+        });
+
+        document.getElementById('indeks-wilayah-charts').addEventListener('shown.bs.collapse', function () {
+            focusMapData();
+            if (window.jQuery?.fn?.dataTable) {
+                window.jQuery.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
+            }
+        });
+        document.addEventListener('shown.bs.tab', function (event) {
+            if (event.target.getAttribute('data-bs-target') === '#profile-tab-indeks-petani') {
+                focusMapData();
+            }
+        });
 
         L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
             maxZoom: 19,
@@ -3099,12 +3256,28 @@ document.addEventListener('DOMContentLoaded', function () {
 
         const group = L.featureGroup().addTo(map);
 
+        function focusMapData() {
+            const container = map.getContainer();
+            if (!container.clientWidth || !container.clientHeight) {
+                return;
+            }
+            map.invalidateSize();
+            const bounds = group.getBounds();
+            if (bounds.isValid()) {
+                map.fitBounds(bounds, {
+                    padding: [32, 32],
+                    maxZoom: 14,
+                    animate: false
+                });
+            }
+        }
+
         function loadMapDesa() {
 
             $.ajax({
                 url: "{{ route('dashboard.indeks-petani.map') }}",
                 type: "GET",
-                data: $('#form-filter').serialize(),
+                data: dashboardFilterParams.toString(),
                 beforeSend: function () {
                     // Optional
                     // $('#map-loading').show();
@@ -3160,11 +3333,7 @@ document.addEventListener('DOMContentLoaded', function () {
                         polygon.addTo(group);
                     });
 
-                    if (group.getLayers().length > 0) {
-                        map.fitBounds(group.getBounds(), {
-                            padding: [20, 20]
-                        });
-                    }
+                    requestAnimationFrame(focusMapData);
                 },
                 error: function (xhr) {
                     console.error(
@@ -3200,7 +3369,7 @@ document.addEventListener('DOMContentLoaded', function () {
                 "url": "{{ route('dashboard.indeks-petani.desa') }}",
                 "type": "GET",
                 "data": function (data) {
-                    data = $('#form-filter').serialize();
+                    data = dashboardFilterParams.toString();
                     return data;
                 },
                 "dataSrc": function(json) {
@@ -3251,6 +3420,25 @@ document.addEventListener('DOMContentLoaded', function () {
 <script>
     $(document).ready(function () {
         var tablePetani = $('#table-petani').DataTable({
+            dom: 'rt<"card-footer d-flex flex-wrap justify-content-between align-items-center gap-3"ip>',
+            pagingType: 'full_numbers',
+            language: {
+                info: 'Menampilkan _START_ - _END_ dari _TOTAL_ petani',
+                infoEmpty: 'Menampilkan 0 - 0 dari 0 petani',
+                infoFiltered: '',
+                emptyTable: 'Tidak ada data petani sesuai filter.',
+                zeroRecords: 'Tidak ada data petani sesuai filter.',
+                paginate: {
+                    first: '<i class="icon-base ti tabler-chevrons-left"></i>',
+                    previous: '<i class="icon-base ti tabler-chevron-left"></i>',
+                    next: '<i class="icon-base ti tabler-chevron-right"></i>',
+                    last: '<i class="icon-base ti tabler-chevrons-right"></i>'
+                }
+            },
+            drawCallback: function () {
+                const info = this.api().page.info();
+                $('#indexFarmerTotalBadge').text(info.recordsDisplay + ' petani');
+            },
             "paging": true,
             "pageLength": 10,
             "lengthChange": false,
@@ -3266,7 +3454,7 @@ document.addEventListener('DOMContentLoaded', function () {
                 "url": "{{ route('dashboard.indeks-petani.data') }}",
                 "type": "GET",
                 "data": function (data) {
-                    data = $('#form-filter').serialize();
+                    data = dashboardFilterParams.toString();
                     return data;
                 },
                 "dataSrc": function(json) {
@@ -3321,7 +3509,10 @@ document.addEventListener('DOMContentLoaded', function () {
                     name: 'segmen',
                     className: 'pe-0',
                     orderable: false,
-                    render: function(data) {
+                    render: function(data, type) {
+                        if (type !== 'display') {
+                            return data.segmen ?? '';
+                        }
 
                         if (!data.skor || !data.segmen) {
                             return '';
@@ -3345,6 +3536,35 @@ document.addEventListener('DOMContentLoaded', function () {
             }
         });
 
+        $('#indexFarmerSearch').on('input', function () { tablePetani.search(this.value).draw(); });
+        tablePetani.on('xhr.dt', function (event, settings, rows) {
+            if (!Array.isArray(rows)) return;
+            const fields = { 1: 'desa', 2: 'komoditas', 5: 'segmen' };
+            document.querySelectorAll('.index-table-filter').forEach((select) => {
+                const placeholder = select.options[0].text;
+                select.replaceChildren(new Option(placeholder, ''));
+                const values = [...new Set(rows.map((row) => row[fields[select.dataset.column]]).filter(Boolean))];
+                values.sort((a, b) => a.localeCompare(b, 'id')).forEach((value) => {
+                    select.add(new Option(value, value));
+                });
+            });
+        });
+        $('#applyIndexTableFilter').on('click', function () {
+            $('.index-table-filter').each(function () {
+                const value = $.fn.dataTable.util.escapeRegex(this.value);
+                tablePetani.column(Number(this.dataset.column)).search(value ? '^' + value + '$' : '', true, false);
+            });
+            tablePetani.draw();
+        });
+        $('#btn-reset-filter').on('click', function () {
+            $('.index-table-filter').val('');
+            $('#indexFarmerSearch').val('');
+            selectedDesa = null;
+            selectedKomoditas = null;
+            selectedSegmen = null;
+            tablePetani.search('').columns().search('').draw();
+        });
+
         $('#table-petani tbody').on('click', 'tr.clickable-row', function() {
             const url = $(this).data('url');
 
@@ -3380,4 +3600,18 @@ 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';
+        });
+        panel.addEventListener('shown.bs.collapse', function (event) {
+            if (event.target !== panel) return;
+            button.textContent = 'Sembunyikan Chart';
+            window.dispatchEvent(new Event('resize'));
+        });
+    });
+</script>
 @endpush