diff --git a/app/Http/Controllers/Web/Dashboard/IndeksPetaniController.php b/app/Http/Controllers/Web/Dashboard/IndeksPetaniController.php
index 4fbe6e3..2a90a62 100644
--- a/app/Http/Controllers/Web/Dashboard/IndeksPetaniController.php
+++ b/app/Http/Controllers/Web/Dashboard/IndeksPetaniController.php
@@ -6,6 +6,9 @@ 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 App\Models\Pertanian\Petani;
 use App\Models\Pertanian\Komoditas;
@@ -13,41 +16,156 @@ 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
 {
-    public function index()
+
+    private function filters(Request $request): array
+    {
+        return [
+            'desaKelurahan_id' => $request->desaKelurahan_id,
+            'kecamatan_id' => $request->kecamatan_id,
+            'kabupatenKota_id' => $request->kabupatenKota_id,
+            'provinsi_id' => $request->provinsi_id,
+            'komoditas_id' => $request->komoditas_id,
+            'segmen' => $request->segmen,
+        ];
+    }
+
+    private function petaniQuery(array $filters): \Illuminate\Database\Eloquent\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')
+            ->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))
+            ->when($filters['kecamatan_id'], fn($q, $id) => $q->where('master_desa_kelurahan.kecamatan_id', $id))
+            ->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));
+
+        return $petaniQuery;
+    }
+
+    private function skorPetaniQuery(array $filters, array $komoditas): \Illuminate\Database\Eloquent\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')
+            ->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))
+            ->when($filters['kecamatan_id'], fn($q, $id) => $q->where('master_desa_kelurahan.kecamatan_id', $id))
+            ->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))
+            ->whereIn('petani.komoditas_id', $komoditas);
+
+        return $skor;
+    }
+
+    public function index(Request $request)
     {
         if (!Gate::any(['super_admin', 'admin', 'fasilitator'])) {
             abort(403);
         }
 
+        $filters = $this->filters($request);
+
         $title = 'Dashboard Profil Petani';
 
         $komoditas = Komoditas::where('is_utama', true)->get();
+        $petaniQuery = $this->petaniQuery($filters);
 
-        $petani = Petani::pluck('id');
-        $lahan = Lahan::has('petani')->get();
+        $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();
 
-        $case = "
-            CASE
-                WHEN skor_kesiapan_adopsi >= 4.0 THEN 'Penggerak'
-                WHEN skor_kesiapan_adopsi >= 3.0 THEN 'Perintis'
-                WHEN skor_kesiapan_adopsi >= 2.0 THEN 'Pemerhati'
-                WHEN skor_kesiapan_adopsi >= 1.0 THEN 'Pemula'
-                ELSE 'Belum Lengkap'
-            END
-        ";
+        $wilayah = $desaKelurahan
+            ->groupBy('provinsi_id')
+            ->map(function ($provinsi) {
+                return [
+                    'id' => $provinsi->first()->provinsi_id,
+                    'nama' => $provinsi->first()->provinsi,
+                    'kabupaten' => $provinsi
+                        ->groupBy('kabupaten_id')
+                        ->map(function ($kabupaten) {
+                            return [
+                                'id' => $kabupaten->first()->kabupaten_id,
+                                'nama' => $kabupaten->first()->kabupaten,
+                                'kecamatan' => $kabupaten
+                                    ->groupBy('kecamatan_id')
+                                    ->map(function ($kecamatan) {
+                                        return [
+                                            'id' => $kecamatan->first()->kecamatan_id,
+                                            'nama' => $kecamatan->first()->kecamatan,
+                                            'desa' => $kecamatan->map(function ($desa) {
+                                                return [
+                                                    'id' => $desa->desa_kelurahan_id,
+                                                    'nama' => $desa->desa_kelurahan,
+                                                    'path' => $desa->path,
+                                                ];
+                                            })->values(),
+                                        ];
+                                    })->values(),
+                            ];
+                        })->values(),
+                ];
+            })->values();
 
-        $countPetani = Petani::count();
-        $countKomoditas = Petani::whereIn('komoditas_id', $komoditas->pluck('id'))->distinct()->count('komoditas_id');
-        $sumLahan = Lahan::has('petani')->whereIn('komoditas_id', $komoditas->pluck('id'))->sum('luas_lahan');
-        $avgLahan = Lahan::has('petani')->whereIn('komoditas_id', $komoditas->pluck('id'))->avg('luas_lahan');
+        return view('dashboard.indeks-petani', array_merge($filters, 
+        compact(
+            'komoditas',
+            'desaKelurahan',
+            'wilayah',
+        )));
+    }
 
-        $avgSkor = SkorPetani::query()
-            ->join('petani', 'petani_skor.petani_id', '=', 'petani.id')
-            ->whereNull('petani.deleted_at')
-            ->whereIn('petani.komoditas_id', $komoditas->pluck('id'))
-            ->avg('skor_kesiapan_adopsi');
+    public function summary(Request $request): JsonResponse
+    {
+        $filters = $this->filters($request);
+        $petaniQuery = $this->petaniQuery($filters);
+
+        $komoditas = Komoditas::where('is_utama', true)
+            ->when($filters['komoditas_id'], fn($q, $id) => $q->where('id', $id))->get();
+
+        $countKomoditas = $petaniQuery->clone()
+            ->whereHas('komoditas', fn ($query) => $query->where('is_utama', true))
+            ->distinct()->count('komoditas_id');
+
+        $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');
+
+        $skorQuery = $this->skorPetaniQuery($filters, $komoditas->pluck('id')->toArray());
+        $avgSkor = $skorQuery->clone()->avg('skor_kesiapan_adopsi');
 
         if ($avgSkor >= 4.0) {
             $avgSegmen = 'Penggerak';
@@ -61,19 +179,120 @@ class IndeksPetaniController extends Controller
             $avgSegmen = 'Belum Lengkap';
         }
 
-        $countDesa = Petani::whereIn('komoditas_id', $komoditas->pluck('id'))->distinct()->count('desa_kelurahan_id');
-        $countKecamatan = 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')
-            ->whereIn('komoditas_id', $komoditas->pluck('id'))->distinct()->count('master_kecamatan.id');
+        return response()->json([
+            'petani' => $petaniQuery->clone()->count(),
+            'komoditas' => $countKomoditas,
+            'sum_lahan' => $sumLahan,
+            'avg_lahan' => $avgLahan,
+            'desa' => $countDesa,
+            'kecamatan' => $countKecamatan,
+            'skor' => $avgSkor,
+            'segmen' => $avgSegmen
+        ]);
+    }
 
-        $countSegmentasi = SkorPetani::selectRaw("$case AS segmen, COUNT(*) AS total")
+    private function segments(): array
+    {
+        $segments = [
+            [
+                'name' => 'Penggerak',
+                'range' => '4.0 - 5.0',
+                'icon' => 'tabler-crown',
+                'color' => 'success',
+            ],
+            [
+                'name' => 'Perintis',
+                'range' => '3.0 - 3.9',
+                'icon' => 'tabler-flag',
+                'color' => 'info',
+            ],
+            [
+                'name' => 'Pemerhati',
+                'range' => '2.0 - 2.9',
+                'icon' => 'tabler-eye',
+                'color' => 'warning',
+            ],
+            [
+                'name' => 'Pemula',
+                'range' => '1.0 - 1.9',
+                'icon' => 'tabler-seedling',
+                'color' => 'danger',
+            ],
+        ];
+
+        return $segments;
+    }
+
+    private function cases(): string
+    {
+        $case = "
+            CASE
+                WHEN skor_kesiapan_adopsi >= 4.0 THEN 'Penggerak'
+                WHEN skor_kesiapan_adopsi >= 3.0 THEN 'Perintis'
+                WHEN skor_kesiapan_adopsi >= 2.0 THEN 'Pemerhati'
+                WHEN skor_kesiapan_adopsi >= 1.0 THEN 'Pemula'
+                ELSE 'Belum Lengkap'
+            END
+        ";
+
+        return $case;
+    }
+    public function segmen(Request $request): JsonResponse
+    {
+        $filters = $this->filters($request);
+        $segments = $this->segments();
+        $case = $this->cases();
+
+        $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());
+
+        $countSegmentasi = $skorQuery->clone()
+            ->selectRaw("$case AS segmen, COUNT(*) AS total")
             ->groupByRaw($case)
             ->get();
 
-        $countSegmentasiByKomoditas = SkorPetani::query()
-            ->join('petani', 'petani_skor.petani_id', '=', 'petani.id')
-            ->whereNull('petani.deleted_at')
+        $series = collect($segments)
+            ->map(function ($segment) use ($countSegmentasi) {
+                return $countSegmentasi
+                    ->where('segmen', $segment['name'])
+                    ->sum('total');
+            })
+            ->values();
+
+        $countPetani = $series->sum();
+
+        $persentase = collect($segments)
+            ->map(function ($segment) use ($countSegmentasi, $countPetani) {
+                $total = $countSegmentasi
+                    ->where('segmen', $segment['name'])
+                    ->sum('total');
+
+                return $countPetani > 0
+                    ? ($total / $countPetani) * 100
+                    : 0;
+            })
+            ->values();
+
+        return response()->json([
+            'series' => $series,
+            'persentase' => $persentase,
+        ]);
+    }
+
+    public function segmenByKomoditas(Request $request): JsonResponse
+    {
+        $filters = $this->filters($request);
+        $segments = $this->segments();
+        $case = $this->cases();
+
+        $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());
+
+        $countSegmentasiByKomoditas = $skorQuery->clone()
             ->selectRaw("
                 petani.komoditas_id,
                 $case AS segmen,
@@ -83,20 +302,64 @@ class IndeksPetaniController extends Controller
             ->groupByRaw($case)
             ->get();
 
-        $avgDimensi = SkorPetani::query()
-                    ->join('petani', 'petani_skor.petani_id', '=', 'petani.id')
-                    ->whereNull('petani.deleted_at')
-                    ->whereIn('petani.komoditas_id', $komoditas->pluck('id'))
+        $seriesSegmentasiKomoditas = collect($segments)->map(function ($segment) use ($countSegmentasiByKomoditas, $komoditas) {
+            return [
+                'name' => $segment['name'],
+                'data' => $komoditas->map(function ($item) use ($countSegmentasiByKomoditas, $segment) {
+
+                    return optional(
+                        $countSegmentasiByKomoditas->first(function ($row) use ($item, $segment) {
+                            return $row->komoditas_id == $item->id
+                                && $row->segmen == $segment['name'];
+                        })
+                    )->total ?? 0;
+
+                })->values(),
+            ];
+        })->values();
+
+        return response()->json([
+            'categories' => $komoditas->pluck('nama')->values(),
+            'series' => $seriesSegmentasiKomoditas,
+        ]);
+        
+    }
+
+    public function dimensi(Request $request): JsonResponse
+    {
+        $filters = $this->filters($request);
+
+        $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());
+
+        $avgDimensi = $skorQuery->clone()
                     ->selectRaw("
                         avg(skor_d2_sistem_praktik_budidaya) as skor_d2_sistem_praktik_budidaya,
                         avg(skor_d4_sosial_ekonomi) as skor_d4_sosial_ekonomi,
                         avg(skor_d6_rantai_nilai_akses_pasar) as skor_d6_rantai_nilai_akses_pasar")
                     ->first();
 
-        $avgKomponen = SkorPetani::query()
-                    ->join('petani', 'petani_skor.petani_id', '=', 'petani.id')
-                    ->whereNull('petani.deleted_at')
-                    ->whereIn('petani.komoditas_id', $komoditas->pluck('id'))
+        return response()->json([
+            'radarDimensi' => [
+                round($avgDimensi->skor_d2_sistem_praktik_budidaya, 2),
+                round($avgDimensi->skor_d4_sosial_ekonomi, 2),
+                round($avgDimensi->skor_d6_rantai_nilai_akses_pasar, 2),
+            ]
+        ]);
+    }
+
+    public function komponen(Request $request): JsonResponse
+    {
+        $filters = $this->filters($request);
+
+        $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());
+
+        $avgKomponen = $skorQuery->clone()
                     ->selectRaw("avg(skor_komp_1_d4_k3_motivasi_kapasitas_adopsi) as skor_komp_1_d4_k3_motivasi_kapasitas_adopsi,
                         avg(skor_komp_2_d4_k2_ekonomi_rumah_tangga) as skor_komp_2_d4_k2_ekonomi_rumah_tangga,
                         avg(skor_komp_3_d2_praktik_budidaya_gap) as skor_komp_3_d2_praktik_budidaya_gap,
@@ -105,11 +368,34 @@ class IndeksPetaniController extends Controller
                         avg(skor_komp_6_d6_k1_k4_k5_rantai_nilai_akses_pasar) as skor_komp_6_d6_k1_k4_k5_rantai_nilai_akses_pasar")
                     ->first();
 
-        $desaKelurahan = 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')
+        return response()->json([
+            'radarKomponen' => [
+                round($avgKomponen->skor_komp_1_d4_k3_motivasi_kapasitas_adopsi, 2),
+                round($avgKomponen->skor_komp_2_d4_k2_ekonomi_rumah_tangga, 2),
+                round($avgKomponen->skor_komp_3_d2_praktik_budidaya_gap, 2),
+                round($avgKomponen->skor_komp_4_d4_k4_keterlibatan_kelembagaan, 2),
+                round($avgKomponen->skor_komp_5_d4_k5_k6_akses_kebebasan_keuangan, 2),
+                round($avgKomponen->skor_komp_6_d6_k1_k4_k5_rantai_nilai_akses_pasar, 2)
+            ]
+        ]);
+    }
+
+    public function map(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,
@@ -121,13 +407,15 @@ class IndeksPetaniController extends Controller
                 master_provinsi.id as provinsi_id,
                 master_provinsi.nama as provinsi
             ")
-            ->whereIn('petani.id', $petani)
             ->distinct()
             ->get();
 
-        $mapSegmentasi = SkorPetani::query()
-            ->join('petani', 'petani_skor.petani_id', '=', 'petani.id')
-            ->whereNull('petani.deleted_at')
+        $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
@@ -136,9 +424,7 @@ class IndeksPetaniController extends Controller
             ->groupByRaw($case)
             ->get();
 
-        $mapAvgSkorSegmentasi = SkorPetani::query()
-            ->join('petani', 'petani_skor.petani_id', '=', 'petani.id')
-            ->whereNull('petani.deleted_at')
+        $mapAvgSkorSegmentasi = $skorQuery->clone()
             ->selectRaw("petani.desa_kelurahan_id,
                 COUNT(petani.id) AS jumlah_petani,
                 avg(skor_kesiapan_adopsi) AS skor,
@@ -153,28 +439,186 @@ class IndeksPetaniController extends Controller
             ->groupBy('petani.desa_kelurahan_id') 
             ->get();
 
-        $daftarPetani = Petani::query()
+        $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();
+
+        return response()->json($mapDesaSegmentasi);
+    }
+
+    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();
+
+        $rows = $mapDesaSegmentasi->map(function ($desa) use ($segmentStyles) {
+
+            $style = $segmentStyles[$desa->segmentasi->segmen] ?? ['color' => 'secondary'];
+            $styleDominan = $segmentStyles[$desa->segmentasi->segmen_dominan] ?? ['color' => 'secondary'];
+
+            return [
+                'desa' => $desa->desa_kelurahan,
+                'jumlah_petani' => $desa->segmentasi->jumlah_petani,
+                'segmen' => $desa->segmentasi->segmen,
+                'skor' => $desa->segmentasi->skor,
+                'segmen_dominan' => $desa->segmentasi->segmen_dominan,
+                'jumlah_dominan' => $desa->segmentasi->jumlah_dominan,
+                'color' => $style['color'],
+                'color_dominan' => $styleDominan['color'],
+            ];
+        });
+
+        return response()->json($rows);
+    }
+
+    public function data(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');
+
+        $petaniQuery = $this->petaniQuery($filters);
+
+        $komoditas = Komoditas::where('is_utama', true)
+            ->when($filters['komoditas_id'], fn($q, $id) => $q->where('id', $id))->get();
+
+        $daftarPetani = $petaniQuery->clone()
+            ->select('petani.*')
             ->whereIn('komoditas_id', $komoditas->pluck('id'))
             ->get();
 
-        return view('dashboard.indeks-petani', compact(
-            'komoditas',
-            'countPetani',
-            'countKomoditas',
-            'sumLahan',
-            'avgLahan',
-            'avgSkor',
-            'avgSegmen',
-            'countDesa',
-            'countKecamatan',
-            'countSegmentasi',
-            'countSegmentasiByKomoditas',
-            'avgDimensi',
-            'avgKomponen',
-            'desaKelurahan',
-            'mapSegmentasi',
-            'mapAvgSkorSegmentasi',
-            'daftarPetani',
-        ));
+        $data = $daftarPetani->map(function ($item) use ($segmentStyles) {
+            $segmen = $item->skor
+                ? $item->segmen()
+                : null;
+            $style = $segmentStyles[$segmen]
+                ?? ['color' => 'secondary'];
+            
+            return [
+                'id' => $item->id,
+                'nama' => $item->nama,
+                'desa' => $item->desaKelurahan?->nama,
+                'desa_kelurahan_id' => $item->desa_kelurahan_id,
+                'komoditas' => $item->komoditas?->nama,
+                'luas_lahan' => $item->lahans?->sum('luas_lahan') ?? 0,
+                'skor' => $item->skor
+                    ? $item->skor->skor_kesiapan_adopsi
+                    : null,
+                'segmen' => $segmen,
+                'color' => $style['color'],
+                'url' => route('dashboard.profil-petani', $item->id),
+            ];
+        });
+
+        return response()->json($data);
     }
 }
\ No newline at end of file
diff --git a/resources/views/dashboard/indeks-petani.blade.php b/resources/views/dashboard/indeks-petani.blade.php
index 37d9286..dac6d49 100644
--- a/resources/views/dashboard/indeks-petani.blade.php
+++ b/resources/views/dashboard/indeks-petani.blade.php
@@ -6,12 +6,12 @@
     crossorigin=""/>
 <style>
     .clickable-row {
-    cursor: pointer;
-}
+        cursor: pointer;
+    }
 
-.clickable-row:hover {
-    background-color: rgba(0, 0, 0, 0.03);
-}
+    .clickable-row:hover {
+        background-color: rgba(0, 0, 0, 0.03);
+    }
 </style>
 @endpush
 
@@ -50,57 +50,103 @@ $colors = collect($segments)
     ->values();
 $segmentStyles = collect($segments)->keyBy('name');
 
-$countSegmentasi = $countSegmentasi->keyBy('segmen');
-$seriesSegmentasi = collect($segments)->map(function ($segment) use ($countSegmentasi) {
-    return $countSegmentasi[$segment['name']]->total ?? 0;
-});
-$seriesSegmentasiKomoditas = collect($segments)->map(function ($segment) use ($countSegmentasiByKomoditas, $komoditas) {
-
-    return [
-        'name' => $segment['name'],
-        'data' => $komoditas->map(function ($item) use ($countSegmentasiByKomoditas, $segment) {
-
-            return optional(
-                $countSegmentasiByKomoditas->first(function ($row) use ($item, $segment) {
-                    return $row->komoditas_id == $item->id
-                        && $row->segmen == $segment['name'];
-                })
-            )->total ?? 0;
-
-        })->values(),
-    ];
-
-})->values();
-
-$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();
+$provinsi = $desaKelurahan
+    ->unique('provinsi_id')
+    ->sortBy('provinsi')
+    ->values();
 @endphp
 <div class="container-xxl flex-grow-1 container-p-y">
+    <div class="row g-6 py-4">
+        <form id="form-filter" method="GET" action="{{ route('dashboard.indeks-petani') }}">
+            @csrf
+        <div class="col-12">
+            <div class="card card-border-shadow-primary">
+                <div class="card-body py-3">
+
+                    {{-- FILTER WILAYAH --}}
+                    <div class="d-flex align-items-center gap-2 flex-wrap">
+
+                        <div class="d-flex align-items-center me-2">
+                            <i class="icon-base ti tabler-map-2 me-2"></i>
+                            <span class="fw-medium">Wilayah</span>
+                        </div>
+
+                        <div class="filter-item">
+                            <select id="filter-provinsi" class="form-select form-select-sm" name="provinsi_id" data-default="{{ $provinsi_id }}">
+                                <option value="">Semua Provinsi</option>
+                                @foreach($provinsi as $p)
+                                    <option value="{{ $p->provinsi_id }}" {{ old('provinsi_id', $provinsi_id) == $p->provinsi_id ? 'selected' : '' }}>
+                                        {{ $p->provinsi }}
+                                    </option>
+                                @endforeach
+                            </select>
+                        </div>
+
+                        <div class="filter-item">
+                            <select id="filter-kabkota" class="form-select form-select-sm" name="kabupatenKota_id" data-default="{{ $kabupatenKota_id }}" disabled>
+                                <option value="">Semua Kabupaten/Kota</option>
+                            </select>
+                        </div>
+
+                        <div class="filter-item">
+                            <select id="filter-kecamatan" class="form-select form-select-sm" name="kecamatan_id" data-default="{{ $kecamatan_id }}" disabled>
+                                <option value="">Semua Kecamatan</option>
+                            </select>
+                        </div>
+
+                        <div class="filter-item">
+                            <select id="filter-desa" class="form-select form-select-sm" name="desaKelurahan_id" data-default="{{ $desaKelurahan_id }}" disabled>
+                                <option value="">Semua Desa/Kelurahan</option>
+                            </select>
+                        </div>
+
+                    </div>
+
+                    <hr class="my-3">
+
+                    {{-- FILTER DATA --}}
+                    <div class="d-flex align-items-center gap-2 flex-wrap">
+
+                        <div class="d-flex align-items-center me-2">
+                            <i class="icon-base ti tabler-adjustments-horizontal me-2"></i>
+                            <span class="fw-medium">Data</span>
+                        </div>
+
+                        <div class="filter-item">
+                            <select id="filter-komoditas" class="form-select form-select-sm" name="komoditas_id">
+                                <option value="">Semua Komoditas</option>
+                                @foreach ($komoditas as $item)
+                                    <option value="{{ $item->id }}" {{ old('komoditas_id', $komoditas_id) == $item->id ? 'selected' : '' }}>
+                                        {{ $item->nama }}
+                                    </option>
+                                @endforeach
+                            </select>
+                        </div>
+
+                        
+
+                        <button
+                            type="submit"
+                            id="btn-reset-dashboard-filter"
+                            class="btn btn-outline-secondary btn-sm">
+                            <i class="icon-base ti tabler-filter me-1"></i>
+                            Filter
+                        </button>
+                        <button
+                            type="button"
+                            id="btn-reset-dashboard-filter"
+                            class="btn btn-outline-secondary btn-sm">
+                            <i class="icon-base ti tabler-refresh me-1"></i>
+                            Reset
+                        </button>
+
+                    </div>
+
+                </div>
+            </div>
+        </div>
+        </form>
+    </div>
     <div class="row g-6">
         <div class="col-lg-3 col-sm-6">
             <div class="card card-border-shadow-primary h-100">
@@ -111,11 +157,11 @@ $mapDesaSegmentasi = $segmentasiByDesa->map(function ($segmentasi, $desaId) use
                                 <i class="icon-base ti tabler-user-check icon-28px"></i>
                             </span>
                         </div>
-                        <h4 class="mb-0">{{ $countPetani }}</h4>
+                        <h4 class="mb-0" id="count-petani">0</h4>
                     </div>
                     <p class="mb-1">Total Petani</p>
                     <p class="mb-0">
-                        <span class="text-heading fw-medium me-2">{{ $countKomoditas }}</span>
+                        <span class="text-heading fw-medium me-2" id="count-komoditas">0</span>
                         <small class="text-body-secondary">komoditas utama</small>
                     </p>
                 </div>
@@ -130,15 +176,13 @@ $mapDesaSegmentasi = $segmentasiByDesa->map(function ($segmentasi, $desaId) use
                                 <i class="icon-base ti tabler-trees icon-28px"></i>
                             </span>
                         </div>
-                        <h4 class="mb-0">{{ number_format($sumLahan, 2, ',', '.') }} ha</h4>
+                        <h4 class="mb-0" id="sum-lahan">0</h4>
+                        <small class="text-body-warning">ha</small>
                     </div>
                     <p class="mb-1">Total Luas Lahan</p>
-                    @php
-                        $avgLahan = $sumLahan / $countPetani;
-                    @endphp
                     <p class="mb-0">
                         <small class="text-body-warning">rata-rata</small>
-                        <span class="text-heading fw-medium">{{ number_format($avgLahan, 2, ',', '.') }}</span>
+                        <span class="text-heading fw-medium" id="avg-lahan"></span>
                         <small class="text-body-warning">ha/petani</small>
                     </p>
                 </div>
@@ -153,12 +197,12 @@ $mapDesaSegmentasi = $segmentasiByDesa->map(function ($segmentasi, $desaId) use
                                 <i class="icon-base ti tabler-star icon-28px"></i>
                             </span>
                         </div>
-                        <h4 class="mb-0">{{ number_format($avgSkor, 2, ',', '.') }}</h4>
+                        <h4 class="mb-0" id="avg-skor"></h4>
                     </div>
                     <p class="mb-1">Rata-rata Indeks Kesiapan Adopsi</p>
                     <p class="mb-0">
                         <small class="text-body-secondary">Segmentasi:</small>
-                        <span class="text-heading fw-medium me-2">{{ $avgSegmen }}</span>
+                        <span class="text-heading fw-medium me-2" id="avg-segmen"></span>
                     </p>
                 </div>
             </div>
@@ -172,11 +216,11 @@ $mapDesaSegmentasi = $segmentasiByDesa->map(function ($segmentasi, $desaId) use
                                 <i class="icon-base ti tabler-map-2 icon-28px"></i>
                             </span>
                         </div>
-                        <h4 class="mb-0">{{ $countDesa }}</h4>
+                        <h4 class="mb-0" id="count-desa">0</h4>
                     </div>
                     <p class="mb-1">Jumlah Desa Sasaran</p>
                     <p class="mb-0">
-                        <span class="text-heading fw-medium me-2">{{ $countKecamatan }}</span>
+                        <span class="text-heading fw-medium me-2" id="count-kecamatan">0</span>
                         <small class="text-body-secondary">kecamatan sasaran</small>
                     </p>
                 </div>
@@ -204,30 +248,7 @@ $mapDesaSegmentasi = $segmentasiByDesa->map(function ($segmentasi, $desaId) use
                                     <th class="text-end pe-0">%</th>
                                 </tr>
                             </thead>
-                            <tbody>
-                                
-                                @foreach ($segments as $segment)
-                                @php
-                                    $total = $countSegmentasi->where('segmen', $segment['name'])->sum('total');
-                                    $persen = $countPetani ? ($total / $countPetani) * 100 : 0;
-                                @endphp
-
-                                <tr>
-                                    <td>
-                                        <div class="d-flex justify-content-start align-items-center">
-                                            <div class="me-2">
-                                                <i class="icon-base ti {{ $segment['icon'] }} icon-lg text-{{ $segment['color'] }}"></i>
-                                            </div>
-                                            <span class="text-{{ $segment['color'] }}">
-                                                {{ $segment['name'] }}
-                                            </span>
-                                        </div>
-                                    </td>
-                                    <td class="text-end pe-0">{{ number_format($total) }}</td>
-                                    <td class="text-end pe-0">{{ number_format($persen, 2) }}%</td>
-                                </tr>
-                                @endforeach
-                            </tbody>
+                            <tbody id="table-segmentasi-petani"></tbody>
                         </table>
                     </div>
                 </div>
@@ -341,30 +362,7 @@ $mapDesaSegmentasi = $segmentasiByDesa->map(function ($segmentasi, $desaId) use
                                 <th class="pe-0">Segmen Dominan</th>
                             </tr>
                         </thead>
-                        <tbody>
-                            @foreach ($mapDesaSegmentasi as $desa)
-                            @php
-                                $style = $segmentStyles[$desa->segmentasi->segmen] ?? null;
-                                $styleDominan = $segmentStyles[$desa->segmentasi->segmen_dominan] ?? null;
-                            @endphp
-                            <tr>
-                                <td class="pe-0">{{ $desa->desa_kelurahan }}</td>
-                                <td class="text-end pe-0">{{ number_format($desa->segmentasi->jumlah_petani) }}</td>
-                                <td class="pe-0">
-                                    <span class="badge bg-{{ $style['color'] ?? 'secondary' }}">
-                                        {{ $desa->segmentasi->segmen }}
-                                    </span>
-                                    ({{ number_format($desa->segmentasi->skor, 2, ',', '.') }})
-                                </td>
-                                <td class="pe-0">
-                                    <span class="badge bg-{{ $styleDominan['color'] ?? 'secondary' }}">
-                                        {{ $desa->segmentasi->segmen_dominan }}
-                                    </span>
-                                    ({{ number_format($desa->segmentasi->jumlah_dominan) }} petani)
-                                </td>
-                            </tr>
-                            @endforeach
-                        </tbody>
+                        <tbody></tbody>
                     </table>
                 </div>
             </div>
@@ -379,6 +377,10 @@ $mapDesaSegmentasi = $segmentasiByDesa->map(function ($segmentasi, $desaId) use
                         <h5 class="m-0 me-2">Daftar Petani</h5>
                         <p class="card-subtitle">untuk semua komoditas</p>
                     </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="card-body">
                     <table id="table-petani" class="table card-table table-border-top-0 table-border-bottom-0">
@@ -392,27 +394,7 @@ $mapDesaSegmentasi = $segmentasiByDesa->map(function ($segmentasi, $desaId) use
                                 <th class="pe-0">Segmen</th>
                             </tr>
                         </thead>
-                        <tbody>
-                            @foreach ($daftarPetani as $item)
-                            @php
-                                $style = $segmentStyles[$item->segmen()] ?? null;
-                            @endphp
-                            <tr data-desa="{{ $item->desa_kelurahan_id }}" data-url="{{ route('dashboard.profil-petani', $item->id) }}" class="clickable-row">
-                                <td class="pe-0">{{ $item->nama }}</td>
-                                <td class="pe-0">{{ $item->desaKelurahan?->nama }}</td>
-                                <td class="pe-0">{{ $item->komoditas?->nama }}</td>
-                                <td class="text-end pe-0">{{ number_format($item->lahans?->sum('luas_lahan'), 2, ',', '.') }}</td>
-                                <td class="text-end pe-0">{{ $item->skor ? number_format($item->skor?->skor_kesiapan_adopsi, 2, ',', '.') : '' }}</td>
-                                <td class="pe-0">
-                                    @if ($item->skor)
-                                    <span class="badge bg-{{ $style['color'] ?? 'secondary' }}">
-                                        {{ $item->segmen() }}
-                                    </span>
-                                    @endif
-                                </td>
-                            </tr>
-                            @endforeach
-                        </tbody>
+                        <tbody></tbody>
                     </table>
                 </div>
             </div>
@@ -429,6 +411,138 @@ $mapDesaSegmentasi = $segmentasiByDesa->map(function ($segmentasi, $desaId) use
     crossorigin=""></script>
 
 <script>
+    const wilayah = @json($wilayah);
+
+    function fillSelect($select, data, valueField, textField, placeholder) {
+        $select.empty().append(
+            `<option value="">${placeholder}</option>`
+        );
+        data.forEach(function (item) {
+            $select.append(
+                `<option value="${item[valueField]}">${item[textField]}</option>`
+            );
+        });
+        $select.trigger('change.select2');
+    }
+    $('#filter-provinsi').select2().on('change', function () {
+        console.log('change provinsi');
+        let provinsiId = $(this).val();
+
+        fillSelect($('#filter-kabkota'), [], 'id', 'nama', 'Semua Kabupaten/Kota');
+        fillSelect($('#filter-kecamatan'), [], 'id', 'nama', 'Semua Kecamatan');
+        fillSelect($('#filter-desa'), [], 'id', 'nama', 'Semua Desa/Kelurahan');
+
+        if (!provinsiId) {
+            $('#filter-kabkota, #filter-kecamatan, #filter-desa')
+                .prop('disabled', true);
+
+            return;
+        }
+
+        let provinsi = wilayah.find(x => x.id == provinsiId);
+        if (!provinsi) {
+            return;
+        }
+
+        let kabupaten = provinsi.kabupaten || [];
+        fillSelect($('#filter-kabkota'), kabupaten, 'id', 'nama', 'Semua Kabupaten/Kota');
+
+        $('#filter-kabkota').prop('disabled', false);
+        $('#filter-kecamatan, #filter-desa').prop('disabled', true);
+
+        let defaultKabupaten = $('#filter-kabkota').data('default');
+        if (defaultKabupaten) {
+            $('#filter-kabkota').val(defaultKabupaten).trigger('change');
+        }
+    });
+    $('#filter-kabkota').select2().on('change', function () {
+        let kabupatenId = $(this).val();
+
+        fillSelect($('#filter-kecamatan'), [], 'id', 'nama', 'Semua Kecamatan');
+        fillSelect($('#filter-desa'), [], 'id', 'nama', 'Semua Desa/Kelurahan');
+
+        $('#filter-desa').prop('disabled', true);
+
+        if (!kabupatenId) {
+            $('#filter-kecamatan').prop('disabled', true);
+            return;
+        }
+
+        // Cari kabupaten di semua provinsi
+        let kabupaten = null;
+
+        wilayah.forEach(function (provinsi) {
+            let found = (provinsi.kabupaten || []).find(
+                x => x.id == kabupatenId
+            );
+
+            if (found) {
+                kabupaten = found;
+            }
+        });
+
+        if (!kabupaten) {
+            return;
+        }
+
+        let kecamatan = kabupaten.kecamatan || [];
+        fillSelect($('#filter-kecamatan'), kecamatan, 'id', 'nama', 'Semua Kecamatan');
+
+        $('#filter-kecamatan').prop('disabled', false);
+
+        let defaultKecamatan = $('#filter-kecamatan').data('default');
+        if (defaultKecamatan) {
+            console.log('defaultKecamatan', defaultKecamatan);
+            $('#filter-kecamatan').val(defaultKecamatan).trigger('change');
+        }
+    });
+    $('#filter-kecamatan').select2().on('change', function () {
+        let kecamatanId = $(this).val();
+
+        fillSelect($('#filter-desa'), [], 'id', 'nama', 'Semua Desa/Kelurahan');
+
+        if (!kecamatanId) {
+            $('#filter-desa').prop('disabled', true);
+            return;
+        }
+
+        let kecamatan = null;
+        wilayah.forEach(function (provinsi) {
+            (provinsi.kabupaten || []).forEach(function (kabupaten) {
+                let found = (kabupaten.kecamatan || []).find(
+                    x => x.id == kecamatanId
+                );
+                if (found) {
+                    kecamatan = found;
+                }
+            });
+        });
+
+        if (!kecamatan) {
+            return;
+        }
+
+        let desa = kecamatan.desa || [];
+        fillSelect($('#filter-desa'), desa, 'id', 'nama', 'Semua Desa/Kelurahan');
+
+        $('#filter-desa').prop('disabled', false);
+
+        let defaultDesa = $('#filter-desa').data('default');
+        console.log('defaultDesa', defaultDesa);
+        if (defaultDesa) {
+            console.log('default desa', defaultDesa);
+            $('#filter-desa').val(defaultDesa).trigger('change');
+        }
+    });
+    $('#filter-desa, #filter-segmen, #filter-komoditas').select2();
+
+    let defaultProvinsi = $('#filter-provinsi').data('default');
+    if (defaultProvinsi) {
+        $('#filter-provinsi')
+            .val(defaultProvinsi)
+            .trigger('change');
+    }
+
     $('.data-table').DataTable({
             "paging": false,
             "lengthChange": true,
@@ -439,9 +553,675 @@ $mapDesaSegmentasi = $segmentasiByDesa->map(function ($segmentasi, $desaId) use
             "responsive": false,
             "scrollX": true
         });
+    
+    let selectedDesa = null;
+    let selectedKomoditas = null;
+    let selectedSegmen = null;
 
-    var tableDesa = $('#table-desa').DataTable({
+    $('#btn-reset-filter').on('click', function () {
+
+        selectedDesa = null;
+        selectedKomoditas = null;
+        selectedSegmen = null;
+
+        // Reset chart
+        chartSegmentasiPetani.resetSeries();
+        chartSegmentasiPetaniByKomoditas.resetSeries();
+
+        // Refresh DataTable
+        updatePetaniSubtitle();
+        tablePetani.draw();
+    });
+
+    function updatePetaniSubtitle() {
+        let subtitle = 'untuk semua komoditas, semua segmen, dan semua desa/kelurahan';
+
+        if (selectedKomoditas) {
+            subtitle = `untuk komoditas ${selectedKomoditas}`;
+        }
+
+        if (selectedSegmen) {
+            subtitle += ` dengan segmen ${selectedSegmen}`;
+        }
+
+        if (selectedDesa) {
+            subtitle += ` pada desa/kel. ${selectedDesa}`;
+        }
+
+        $('.card-subtitle').text(subtitle);
+    }
+
+
+    // Chart Dimensi dan Komponen Kesiapan Adopsi
+    let cardColor, labelColor, fontFamily, headingColor, shadeColor, legendColor, borderColor, barBgColor;
+    if (isDarkStyle) {
+        barBgColor = '#3d4157';
+        shadeColor = 'dark';
+    } else {
+        barBgColor = '#efeef0';
+        shadeColor = '';
+    }
+    cardColor = config.colors.cardColor;
+    labelColor = config.colors.textMuted;
+    legendColor = config.colors.bodyColor;
+    borderColor = config.colors.borderColor;
+    headingColor = config.colors.headingColor;
+</script>
+
+<script>
+
+    $(document).ready(function () {
+        $.ajax({
+            url: '{{ route('dashboard.indeks-petani.summary') }}',
+            type: 'GET',
+            data: $('#form-filter').serialize(),
+            dataType: 'json',
+            success: function (data) {
+                $('#count-petani').text(data.petani);    
+                $('#count-komoditas').text(data.komoditas);
+                $('#sum-lahan').text(new Intl.NumberFormat('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(data.sum_lahan));
+                $('#avg-lahan').text(new Intl.NumberFormat('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(data.avg_lahan));
+                $('#count-desa').text(data.desa);
+                $('#count-kecamatan').text(data.kecamatan);
+                $('#avg-skor').text(new Intl.NumberFormat('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(data.skor));
+                $('#avg-segmen').text(data.segmen);
+            }
+        });
+    })
+</script>
+<script>
+    $(document).ready(function () {
+        const segments = @json($segments);
+
+        // Chart Segmentasi Petani
+        var chartSegmentasiPetani;
+
+        function loadChartSegmentasiPetani() {
+            $.ajax({
+                url: '{{ route("dashboard.indeks-petani.segmen") }}',
+                type: 'GET',
+                data: $('#form-filter').serialize(),
+                dataType: 'json',
+                success: function(response) {
+                    if (chartSegmentasiPetani) {
+                        chartSegmentasiPetani.destroy();
+                    }
+                    var optionsSegmentasiPetani = {
+                        series: response.series,
+                        chart: {
+                            type: 'donut',
+                            width: 320,
+                            events: {
+                                dataPointSelection: function(event, chartContext, config) {
+
+                                    const segmen =
+                                        chartContext.w.config.labels[
+                                            config.dataPointIndex
+                                        ];
+
+                                    console.log('Segmen dipilih:', segmen);
+
+                                    // Set filter segmen
+                                    selectedSegmen = segmen;
+
+                                    // Refresh DataTable
+                                    updatePetaniSubtitle();
+                                    tablePetani.draw();
+                                }
+                            }
+                        },
+                        labels: @json(collect($segments)->pluck('name')->values()),
+                        colors: @json($colors),
+                        plotOptions: {
+                            pie: {
+                                borderRadius: 12,
+                                spacing: 5,
+                                donut: {
+                                    size: '68%',
+                                    labels: {
+                                        show: true,
+                                        total: {
+                                            show: true,
+                                            label: 'Petani Tersegmentasi',
+                                        },
+                                    },
+                                },
+                            },
+                        },
+                        stroke: {
+                            width: 0,
+                        },
+                        dataLabels: {
+                            enabled: false,
+                        },
+                        legend: {
+                            show: false,
+                        },
+                        responsive: [
+                            {
+                                breakpoint: 360,
+                                options: {
+                                    chart: {
+                                        width: 240,
+                                    },
+                                },
+                            },
+                        ],
+                    };
+
+                    chartSegmentasiPetani = new ApexCharts(
+                        document.querySelector('#chart-segmentasi-petani'),
+                        optionsSegmentasiPetani
+                    );
+
+                    chartSegmentasiPetani.render();
+
+                    let html = '';
+
+                    segments.forEach(function(segment, index) {
+
+                        const total = response.series[index] ?? 0;
+                        const persen = response.persentase[index] ?? 0;
+
+                        html += `
+                            <tr>
+                                <td>
+                                    <div class="d-flex justify-content-start align-items-center">
+                                        <div class="me-2">
+                                            <i class="icon-base ti ${segment.icon} icon-lg text-${segment.color}"></i>
+                                        </div>
+
+                                        <span class="text-${segment.color}">
+                                            ${segment.name}
+                                        </span>
+                                    </div>
+                                </td>
+
+                                <td class="text-end pe-0">
+                                    ${Number(total).toLocaleString('id-ID')}
+                                </td>
+
+                                <td class="text-end pe-0">
+                                    ${Number(persen).toLocaleString('id-ID', {
+                                        minimumFractionDigits: 2,
+                                        maximumFractionDigits: 2
+                                    })}%
+                                </td>
+                            </tr>
+                        `;
+                    });
+
+                    $('#table-segmentasi-petani').html(html);
+                },
+
+                error: function(xhr) {
+                    console.error('Gagal mengambil data segmentasi:', xhr);
+                }
+            });
+        }
+
+        loadChartSegmentasiPetani();
+    })
+</script>
+<script>
+    $(document).ready(function () {
+        var optionsSegmentasiPetaniByKomoditas = {
+            series: [],
+            colors: @json($colors),
+
+            chart: {
+                type: 'bar',
+                height: 240,
+                stacked: true,
+
+                events: {
+                    dataPointSelection: function(event, chartContext, config) {
+                        const komoditas =
+                            config.w.config.xaxis.categories[config.dataPointIndex];
+
+                        console.log('Komoditas dipilih:', komoditas);
+
+                        selectedKomoditas = komoditas;
+
+                        updatePetaniSubtitle();
+                        tablePetani.draw();
+                    }
+                }
+            },
+
+            plotOptions: {
+                bar: {
+                    horizontal: true,
+                },
+            },
+
+            stroke: {
+                width: 1,
+                colors: ['#fff'],
+            },
+
+            title: {
+                show: false,
+            },
+
+            xaxis: {
+                categories: [],
+            },
+
+            tooltip: {
+                y: {
+                    formatter: function(val) {
+                        return val + ' petani';
+                    },
+                },
+            },
+
+            fill: {
+                opacity: 1,
+            },
+
+            legend: {
+                position: 'top',
+                horizontalAlign: 'left',
+                offsetX: 40,
+            },
+        };
+
+        var chartSegmentasiPetaniByKomoditas =
+            new ApexCharts(
+                document.querySelector('#chart-segmentasi-petani-komoditas'),
+                optionsSegmentasiPetaniByKomoditas
+            );
+
+        chartSegmentasiPetaniByKomoditas.render();
+
+        function loadChartSegmentasiKomoditas() {
+
+            $.ajax({
+                url: "{{ route('dashboard.indeks-petani.segmen.komoditas') }}",
+                type: "GET",
+                data: $('#form-filter').serialize(),
+                dataType: "json",
+                beforeSend: function() {
+                    // optional
+                    // tampilkan loading
+                },
+                success: function(response) {
+
+                    chartSegmentasiPetaniByKomoditas.updateOptions({
+                        xaxis: {
+                            categories: response.categories
+                        }
+                    });
+
+                    chartSegmentasiPetaniByKomoditas.updateSeries(
+                        response.series
+                    );
+                },
+                error: function(xhr) {
+                    console.error(
+                        'Gagal mengambil data chart:',
+                        xhr.responseText
+                    );
+                }
+            });
+        }
+
+        loadChartSegmentasiKomoditas();
+    })
+</script>
+<script>
+    $(document).ready(function () {
+        var radarDimensi = new ApexCharts($("#chart-dimensi")[0], {
+            chart: {
+                height: 240,
+                type: 'radar',
+                toolbar: {
+                    show: false
+                }
+            },
+            series: [{
+                name: "Rata-rata Dimensi Kesiapan Adopsi",
+                data: []
+            }],
+            labels: [
+                'Sistem & Praktik Budidaya',
+                'Sosial Ekonomi Rumah Tangga',
+                'Rantai Nilai & Akses Pasar'
+            ],
+            plotOptions: {
+                radar: {
+                    polygons: {
+                        strokeColors: borderColor,
+                        connectorColors: borderColor
+                    }
+                }
+            },
+            stroke: {
+                width: 2
+            },
+            legend: {
+                show: true,
+                fontSize: '13px',
+                position: 'bottom',
+                labels: {
+                    colors: legendColor,
+                    useSeriesColors: false
+                },
+                markers: {
+                    height: 12,
+                    width: 12
+                },
+                itemMargin: {
+                    horizontal: 10
+                },
+                onItemHover: {
+                    highlightDataSeries: false
+                }
+            },
+            colors: [config.colors.primary],
+            fill: {
+                opacity: 0.85
+            },
+            markers: {
+                show: true,
+                width: 1
+            },
+            grid: {
+                show: false,
+                padding: {
+                    top: -25,
+                    bottom: -5
+                }
+            },
+            xaxis: {
+                categories: ['D1', 'D2', 'D3'],
+                labels: {
+                    show: true,
+                    style: {
+                        colors: [labelColor, labelColor, labelColor],
+                        fontSize: '13px',
+                        fontFamily: fontFamily
+                    }
+                }
+            },
+            yaxis: {
+                show: true,
+                min: 0,
+                max: 5,
+                tickAmount: 5
+            },
+            responsive: [{
+                breakpoint: 769,
+                options: {
+                    chart: {
+                        height: 400
+                    }
+                }
+            }]
+        });
+
+        radarDimensi.render();
+
+        function loadChartRadarDimensi() {
+
+            $.ajax({
+                url: "{{ route('dashboard.indeks-petani.dimensi') }}",
+                type: "GET",
+                data: $('#form-filter').serialize(),
+                dataType: "json",
+                beforeSend: function() {
+                    // optional
+                    // tampilkan loading
+                },
+                success: function(response) {
+                    radarDimensi.updateSeries([{
+                        name: "Rata-rata Dimensi Kesiapan Adopsi",
+                        data: response.radarDimensi
+                    }]);
+                },
+                error: function(xhr) {
+                    console.error(
+                        'Gagal mengambil data chart:',
+                        xhr.responseText
+                    );
+                }
+            });
+        }
+
+        loadChartRadarDimensi();
+    })
+</script>
+<script>
+    $(document).ready(function () {
+        var radarKomponen = new ApexCharts($("#chart-komponen")[0], {
+            chart: {
+                height: 240,
+                type: 'radar',
+                toolbar: {
+                    show: false
+                }
+            },
+            series: [{
+                name: "Rata-rata Komponen Kesiapan Adopsi",
+                data: []
+            }],
+            labels: [
+                'Sistem & Praktik Budidaya',
+                'Sosial Ekonomi Rumah Tangga',
+                'Rantai Nilai & Akses Pasar'
+            ],
+            plotOptions: {
+                radar: {
+                    polygons: {
+                        strokeColors: borderColor,
+                        connectorColors: borderColor
+                    }
+                }
+            },
+            stroke: {
+                width: 2
+            },
+            legend: {
+                show: true,
+                fontSize: '13px',
+                position: 'bottom',
+                labels: {
+                    colors: legendColor,
+                    useSeriesColors: false
+                },
+                markers: {
+                    height: 12,
+                    width: 12
+                },
+                itemMargin: {
+                    horizontal: 10
+                },
+                onItemHover: {
+                    highlightDataSeries: false
+                }
+            },
+            colors: [config.colors.primary],
+            fill: {
+                opacity: 0.85
+            },
+            markers: {
+                show: true,
+                width: 1
+            },
+            grid: {
+                show: false,
+                padding: {
+                    top: -25,
+                    bottom: -5
+                }
+            },
+            xaxis: {
+                categories: ['K1', 'K2', 'K3', 'K4', 'K5', 'K6'],
+                labels: {
+                    show: true,
+                    style: {
+                        colors: [labelColor, labelColor, labelColor, labelColor, labelColor, labelColor],
+                        fontSize: '13px',
+                        fontFamily: fontFamily
+                    }
+                }
+            },
+            yaxis: {
+                show: true,
+                min: 0,
+                max: 5,
+                tickAmount: 5
+            },
+            responsive: [{
+                breakpoint: 769,
+                options: {
+                    chart: {
+                        height: 400
+                    }
+                }
+            }]
+        });
+
+        radarKomponen.render();
+
+        function loadChartRadarKomponen() {
+
+            $.ajax({
+                url: "{{ route('dashboard.indeks-petani.komponen') }}",
+                type: "GET",
+                data: $('#form-filter').serialize(),
+                dataType: "json",
+                beforeSend: function() {
+                    // optional
+                    // tampilkan loading
+                },
+                success: function(response) {
+                    radarKomponen.updateSeries([{
+                        name: "Rata-rata Komponen Kesiapan Adopsi",
+                        data: response.radarKomponen
+                    }]);
+                },
+                error: function(xhr) {
+                    console.error(
+                        'Gagal mengambil data chart:',
+                        xhr.responseText
+                    );
+                }
+            });
+        }
+
+        loadChartRadarKomponen();
+    })
+</script>
+<script>
+    $(document).ready(function () {
+        // Map Sebaran Petani
+        var map = L.map('map-sebaran-petani').setView([-0.789, 113.921], 5);
+
+        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 19,
+            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+        }).addTo(map);
+
+        const warnaSegmen = {
+            @foreach($segments as $segment)
+                "{{ $segment['name'] }}": "var(--bs-{{ $segment['color'] }})",
+            @endforeach
+        };
+
+        let selectedDesa = null;
+
+        const group = L.featureGroup().addTo(map);
+
+        function loadMapDesa() {
+
+            $.ajax({
+                url: "{{ route('dashboard.indeks-petani.map') }}",
+                type: "GET",
+                data: $('#form-filter').serialize(),
+                beforeSend: function () {
+                    // Optional
+                    // $('#map-loading').show();
+                },
+                success: function (desaData) {
+                    group.clearLayers();
+
+                    if (!desaData || desaData.length === 0) {
+                        return;
+                    }
+                    desaData.forEach(function (desa) {
+                        if (!desa.path) {
+                            return;
+                        }
+                        let coordinates;
+
+                        try {
+                            coordinates = typeof desa.path === 'string'
+                                ? JSON.parse(desa.path)
+                                : desa.path;
+                        } catch (error) {
+                            console.error('Path polygon tidak valid:', desa);
+                            return;
+                        }
+
+                        const polygon = L.polygon(coordinates, {
+                            color: '#666',
+                            weight: 1,
+                            fillColor:
+                                warnaSegmen[desa.segmentasi?.segmen] || '#ccc',
+                            fillOpacity: 0.7
+                        });
+
+                        polygon.desaId = desa.desa_kelurahan_id;
+
+                        polygon.bindPopup(`
+                            <b>Desa/Kel.: ${desa.desa_kelurahan ?? '-'}</b><br>
+                            Kec.: ${desa.kecamatan ?? '-'}<br>
+                            Kab.: ${desa.kabupaten ?? '-'}<br>
+                            <hr>
+                            Petani: ${desa.segmentasi?.jumlah_petani ?? 0}<br>
+                            Indeks:
+                            ${Number(desa.segmentasi?.skor ?? 0).toFixed(2)}
+                            <br>
+                            Segmen:
+                            <b>${desa.segmentasi?.segmen ?? '-'}</b>
+                            <br>
+                            Segmen Dominan:
+                            <b>${desa.segmentasi?.segmen_dominan ?? '-'}</b>
+                            (${desa.segmentasi?.jumlah_dominan ?? 0} petani)
+                        `);
+
+                        polygon.addTo(group);
+                    });
+
+                    if (group.getLayers().length > 0) {
+                        map.fitBounds(group.getBounds(), {
+                            padding: [20, 20]
+                        });
+                    }
+                },
+                error: function (xhr) {
+                    console.error(
+                        'Gagal mengambil data map:',
+                        xhr.responseText
+                    );
+                },
+                complete: function () {
+                    // Optional
+                    // $('#map-loading').hide();
+                }
+            });
+        }
+
+        loadMapDesa();
+    })
+</script>
+<script>
+    $(document).ready(function () {
+        var tableDesa = $('#table-desa').DataTable({
             "paging": true,
+            "pageLength": 5,
             "lengthChange": false,
             "searching": false,
             "ordering": true,
@@ -449,382 +1229,167 @@ $mapDesaSegmentasi = $segmentasiByDesa->map(function ($segmentasi, $desaId) use
             "autoWidth": false,
             "responsive": false,
             "scrollX": true,
-            "pageLength": 5,
+            "serverSide": false,
+            "processing": true,
+            "ajax": {
+                "url": "{{ route('dashboard.indeks-petani.desa') }}",
+                "type": "GET",
+                "data": function (data) {
+                    data = $('#form-filter').serialize();
+                    return data;
+                },
+                dataSrc: function(json) {
+                    return json;
+                },
+                "dataType": "json"
+            },
+            columns: [
+                {
+                    data: 'desa'
+                },
+                {
+                    data: 'jumlah_petani',
+                    className: 'text-end',
+                    render: function(data) {
+                        return Number(data).toLocaleString('id-ID');
+                    }
+                },
+                {
+                    data: null,
+                    render: function(data) {
+                        return `
+                            <span class="badge bg-${data.color ?? 'secondary'}">
+                                ${data.segmen ?? '-'}
+                            </span>
+                            (${Number(data.skor).toLocaleString('id-ID', {
+                                minimumFractionDigits: 2,
+                                maximumFractionDigits: 2
+                            })})
+                        `;
+                    }
+                },
+                {
+                    data: null,
+                    render: function(data) {
+                        return `
+                            <span class="badge bg-${data.color_dominan ?? 'secondary'}">
+                                ${data.segmen_dominan ?? '-'}
+                            </span>
+                            (${Number(data.jumlah_dominan ?? 0).toLocaleString('id-ID')} petani)
+                        `;
+                    }
+                }
+            ]
         });
-
-    var tablePetani = $('#table-petani').DataTable({
+    })
+</script>
+<script>
+    $(document).ready(function () {
+        var tablePetani = $('#table-petani').DataTable({
             "paging": true,
-            "lengthChange": true,
+            "pageLength": 10,
+            "lengthChange": false,
             "searching": true,
             "ordering": true,
             "info": true,
             "autoWidth": false,
             "responsive": false,
-            "scrollX": true
-        }).on('click', 'tbody tr', function () {
-            window.location.href = $(this).data('url');
-        });
-    
-    let selectedDesa = null;
-
-    $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
-        if (!selectedDesa) return true;
-
-        if (settings.nTable.id === 'table-petani') {
-            const row = tablePetani.row(dataIndex).node();
-            return $(row).data('desa') == selectedDesa;
-        }
-        return true;
-    });
-
-    // Chart Segmentasi Petani
-    var optionsSegmentasiPetani = {
-        series: @json($seriesSegmentasi),
-        chart: {
-            type: 'donut',
-            width: 320,
-        },
-        labels: @json(array_column($segments, 'name')),
-        colors: @json($colors),
-        plotOptions: {
-            pie: {
-                borderRadius: 12,
-                spacing: 5,
-                donut: {
-                    size: '68%',
-                    labels: {
-                        show: true,
-                        total: {
-                            show: true,
-                            label: 'Petani Tersegmentasi',
-                        },
-                    },
+            "scrollX": true,
+            "serverSide": false,
+            "processing": true,
+            "ajax": {
+                "url": "{{ route('dashboard.indeks-petani.data') }}",
+                "type": "GET",
+                "data": function (data) {
+                    data = $('#form-filter').serialize();
+                    return data;
                 },
+                dataSrc: function(json) {
+                    return json;
+                },
+                "dataType": "json"
             },
-        },
-        stroke: {
-            width: 0,
-        },
-        dataLabels: {
-            enabled: false,
-        },
-        legend: {
-            show: false,
-        },
-        responsive: [
-            {
-                breakpoint: 360,
-                options: {
-                    chart: {
-                        width: 240,
-                    },
+            columns: [
+                {
+                    data: 'nama',
+                    name: 'nama',
+                    className: 'pe-0'
                 },
-            },
-        ],
-    }
-    var chartSegmentasiPetani = new ApexCharts(document.querySelector('#chart-segmentasi-petani'), optionsSegmentasiPetani)
-    chartSegmentasiPetani.render()
-
-    // Chart Segmentasi Petani By Komoditas
-    var optionsSegmentasiPetaniByKomoditas = {
-        series: @json($seriesSegmentasiKomoditas),
-        colors: @json($colors),
-        chart: {
-            type: 'bar',
-            height: 240,
-            stacked: true,
-        },
-        plotOptions: {
-            bar: {
-                horizontal: true,
-            },
-        },
-        stroke: {
-            width: 1,
-            colors: ['#fff'],
-        },
-        title: {
-            show: false,
-        },
-        xaxis: {
-            categories: @json($komoditas->pluck('nama')),
-        },
-        tooltip: {
-            y: {
-                formatter: function (val) {
-                    return val + ' petani'
+                {
+                    data: 'desa',
+                    name: 'desa',
+                    className: 'pe-0'
                 },
-            },
-        },
-        fill: {
-            opacity: 1,
-        },
-        legend: {
-            position: 'top',
-            horizontalAlign: 'left',
-            offsetX: 40,
-        },
-    }
-
-    // Chart Segmentasi Petani By Komoditas
-    var chartSegmentasiPetaniByKomoditas = new ApexCharts(document.querySelector('#chart-segmentasi-petani-komoditas'), optionsSegmentasiPetaniByKomoditas)
-    chartSegmentasiPetaniByKomoditas.render()
-
-    // Chart Dimensi dan Komponen Kesiapan Adopsi
-    let cardColor, labelColor, fontFamily, headingColor, shadeColor, legendColor, borderColor, barBgColor;
-        if (isDarkStyle) {
-            barBgColor = '#3d4157';
-            shadeColor = 'dark';
-        } else {
-            barBgColor = '#efeef0';
-            shadeColor = '';
-        }
-        cardColor = config.colors.cardColor;
-        labelColor = config.colors.textMuted;
-        legendColor = config.colors.bodyColor;
-        borderColor = config.colors.borderColor;
-        headingColor = config.colors.headingColor;
-
-        var radarDimensi = new ApexCharts($("#chart-dimensi")[0], 
-            options = {
-                chart: {
-                    height: 240,
-                    type: 'radar',
-                    toolbar: {
-                        show: false
+                {
+                    data: 'komoditas',
+                    name: 'komoditas',
+                    className: 'pe-0'
+                },
+                {
+                    data: 'luas_lahan',
+                    name: 'luas_lahan',
+                    className: 'text-end pe-0',
+                    render: function(data) {
+                        return Number(data ?? 0).toLocaleString('id-ID', {
+                            minimumFractionDigits: 2,
+                            maximumFractionDigits: 2
+                        });
                     }
                 },
-                series: [
-                    {
-                        name: "Rata-rata Dimensi Kesiapan Adopsi",
-                        data: [{{ round($avgDimensi->skor_d2_sistem_praktik_budidaya, 2) }},
-                                {{ round($avgDimensi->skor_d4_sosial_ekonomi, 2) }},
-                                {{ round($avgDimensi->skor_d6_rantai_nilai_akses_pasar, 2) }}]
-                    }
-                ],
-                labels: ['Sistem & Praktik Budidaya', 'Sosial Ekonomi Rumah Tangga', 'Rantai Nilai & Akses Pasar'],
-                plotOptions: {
-                    radar: {
-                        polygons: {
-                            strokeColors: borderColor,
-                            connectorColors: borderColor
+                {
+                    data: 'skor',
+                    name: 'skor',
+                    className: 'text-end pe-0',
+                    render: function(data) {
+                        if (data === null || data === '') {
+                            return '';
                         }
-                    }
-                },
-                stroke: {
-                    width: 2
-                },
-                legend: {
-                    show: true,
-                    fontSize: '13px',
-                    position: 'bottom',
-                    labels: {
-                        colors: legendColor,
-                        useSeriesColors: false
-                    },
-                    markers: {
-                        height: 12,
-                        width: 12
-                    },
-                    itemMargin: {
-                        horizontal: 10
-                    },
-                    onItemHover: {
-                        highlightDataSeries: false
-                    }
-                },
-                colors: [config.colors.primary, config.colors.info],
-                fill: {
-                    opacity: 0.85
-                },
-                markers: {
-                    show: true,
-                    width: 1,
-                },
-                grid: {
-                    show: false,
-                    padding: {
-                        top: -25,
-                        bottom: -5
-                    }
-                },
-                xaxis: {
-                    categories: ['D1', 'D2', 'D3'],
-                    labels: {
-                        show: true,
-                        style: {
-                            colors: [labelColor, labelColor, labelColor, labelColor, labelColor, labelColor],
-                            fontSize: '13px',
-                            fontFamily: fontFamily
-                        }
-                    }
-                },
-                yaxis: {
-                    show: true,
-                    min: 0,
-                    max: 5,
-                    tickAmount: 5
-                },
-                responsive: [
-                    {
-                        breakpoint: 769,
-                        options: {
-                                chart: {
-                                height: 400
-                            }
-                        }
-                    }
-                ]
-            });
-        radarDimensi.render();
 
-        var radarKomponen = new ApexCharts($("#chart-komponen")[0], 
-            options = {
-                chart: {
-                    height: 240,
-                    type: 'radar',
-                    toolbar: {
-                        show: false
+                        return Number(data).toLocaleString('id-ID', {
+                            minimumFractionDigits: 2,
+                            maximumFractionDigits: 2
+                        });
                     }
                 },
-                series: [
-                    {
-                        name: "Rata-rata Komponen Kesiapan Adopsi",
-                        data: [
-                                {{ round($avgKomponen->skor_komp_1_d4_k3_motivasi_kapasitas_adopsi, 2) }},
-                                {{ round($avgKomponen->skor_komp_2_d4_k2_ekonomi_rumah_tangga, 2) }},
-                                {{ round($avgKomponen->skor_komp_3_d2_praktik_budidaya_gap, 2) }},
-                                {{ round($avgKomponen->skor_komp_4_d4_k4_keterlibatan_kelembagaan, 2) }},
-                                {{ round($avgKomponen->skor_komp_5_d4_k5_k6_akses_kebebasan_keuangan, 2) }},
-                                {{ round($avgKomponen->skor_komp_6_d6_k1_k4_k5_rantai_nilai_akses_pasar, 2) }}
-                            ]
-                    }
-                ],
-                lotOptions: {
-                    radar: {
-                        polygons: {
-                            strokeColors: borderColor,
-                            connectorColors: borderColor
+                {
+                    data: null,
+                    name: 'segmen',
+                    className: 'pe-0',
+                    orderable: false,
+                    render: function(data) {
+
+                        if (!data.skor || !data.segmen) {
+                            return '';
                         }
-                    }
-                },
-                stroke: {
-                    width: 2
-                },
-                legend: {
-                    show: true,
-                    fontSize: '13px',
-                    position: 'bottom',
-                    labels: {
-                        colors: legendColor,
-                        useSeriesColors: false
-                    },
-                    markers: {
-                        height: 12,
-                        width: 12
-                    },
-                    itemMargin: {
-                        horizontal: 10
-                    },
-                    onItemHover: {
-                        highlightDataSeries: false
-                    }
-                },
-                colors: [config.colors.primary, config.colors.info],
-                fill: {
-                    opacity: 0.85
-                },
-                markers: {
-                    show: true,
-                    width: 1,
-                },
-                grid: {
-                    show: false,
-                    padding: {
-                        top: -25,
-                        bottom: -5
-                    }
-                },
-                xaxis: {
-                    categories: ['K1', 'K2', 'K3', 'K4', 'K5', 'K6'],
-                    labels: {
-                        show: true,
-                        style: {
-                            colors: [labelColor, labelColor, labelColor, labelColor, labelColor, labelColor],
-                            fontSize: '13px',
-                            fontFamily: fontFamily
-                        }
-                    }
-                },
-                yaxis: {
-                    show: true,
-                    min: 0,
-                    max: 5,
-                    tickAmount: 5
-                },
-                responsive: [
-                    {
-                        breakpoint: 769,
-                        options: {
-                                chart: {
-                                height: 400
-                            }
-                        }
-                    }
-                ]
-            });
-        radarKomponen.render();
 
-    // Map Sebaran Petani
-    var map = L.map('map-sebaran-petani').setView([-0.789, 113.921], 5);
-    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            maxZoom: 19,
-            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-        }).addTo(map);
-
-    const desaData = @json($mapDesaSegmentasi);
-    const warnaSegmen = {
-        @foreach($segments as $segment)
-        "{{ $segment['name'] }}": "var(--bs-{{ $segment['color'] }})",
-        @endforeach
-    };
-    const group = L.featureGroup().addTo(map);
-    desaData.forEach(desa => {
-        if (!desa.path) return;
-
-        const coordinates = JSON.parse(desa.path);
-
-        const polygon = L.polygon(coordinates, {
-            color: '#666',
-            weight: 1,
-            fillColor: warnaSegmen[desa.segmentasi.segmen] || '#ccc',
-            fillOpacity: 0.7
+                        return `
+                            <span class="badge bg-${data.color ?? 'secondary'}">
+                                ${data.segmen}
+                            </span>
+                        `;
+                    }
+                }
+            ],
+            order: [
+                [0, 'asc']
+            ],
+            createdRow: function(row, data) {
+                $(row)
+                    .addClass('clickable-row')
+                    .attr('data-desa', data.desa_kelurahan_id)
+                    .attr('data-komoditas', data.komoditas)
+                    .attr('data-segmen', data.segmen ?? '')
+                    .attr('data-url', data.url);
+            }
         });
 
-        polygon.desaId = desa.desa_kelurahan_id;
-        polygon.bindPopup(`
-            <b>Desa/Kel.: ${desa.desa_kelurahan}</b><br>
-            Kec.: ${desa.kecamatan}<br>
-            Kab.: ${desa.kabupaten}<br>
-            <hr>
-            Petani: ${desa.segmentasi.jumlah_petani}<br>
-            Indeks: ${Number(desa.segmentasi.skor).toFixed(2)}<br>
-            Segmen: <b>${desa.segmentasi.segmen}</b><br>
-            Segmen Dominan: <b>${desa.segmentasi.segmen_dominan}</b> (${desa.segmentasi.jumlah_dominan} petani)
-        `);
-        polygon.on('click', function () {
-            selectedDesa = desa.desa_kelurahan_id;
-            tablePetani.draw();
+        $('#table-petani tbody').on('click', 'tr.clickable-row', function() {
+            const url = $(this).data('url');
+
+            if (url) {
+                window.location.href = url;
+            }
         });
-
-        polygon.addTo(group);
-    });
-
-    if (group.getLayers().length > 0) {
-        map.fitBounds(group.getBounds(), {
-            padding: [20, 20]
-        });
-    }
-
+    })
 </script>
 @endpush
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 78a924c..d6ddee7 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -52,6 +52,14 @@ Route::middleware('auth')
     Route::get('/dashboard/petani/indikator-pertanian', [App\Http\Controllers\Web\Dashboard\IndikatorPertanianController::class, 'index'])->name('dashboard.indikator-pertanian');
 
     Route::get('/dashboard/petani/indeks', [App\Http\Controllers\Web\Dashboard\IndeksPetaniController::class, 'index'])->name('dashboard.indeks-petani');
+    Route::get('/dashboard/petani/indeks/summary', [App\Http\Controllers\Web\Dashboard\IndeksPetaniController::class, 'summary'])->name('dashboard.indeks-petani.summary');
+    Route::get('/dashboard/petani/indeks/segmen', [App\Http\Controllers\Web\Dashboard\IndeksPetaniController::class, 'segmen'])->name('dashboard.indeks-petani.segmen');
+    Route::get('/dashboard/petani/indeks/segmen/komoditas', [App\Http\Controllers\Web\Dashboard\IndeksPetaniController::class, 'segmenByKomoditas'])->name('dashboard.indeks-petani.segmen.komoditas');
+    Route::get('/dashboard/petani/indeks/dimensi', [App\Http\Controllers\Web\Dashboard\IndeksPetaniController::class, 'dimensi'])->name('dashboard.indeks-petani.dimensi');
+    Route::get('/dashboard/petani/indeks/komponen', [App\Http\Controllers\Web\Dashboard\IndeksPetaniController::class, 'komponen'])->name('dashboard.indeks-petani.komponen');
+    Route::get('/dashboard/petani/indeks/map', [App\Http\Controllers\Web\Dashboard\IndeksPetaniController::class, 'map'])->name('dashboard.indeks-petani.map');
+    Route::get('/dashboard/petani/indeks/desa', [App\Http\Controllers\Web\Dashboard\IndeksPetaniController::class, 'desa'])->name('dashboard.indeks-petani.desa');
+    Route::get('/dashboard/petani/indeks/data', [App\Http\Controllers\Web\Dashboard\IndeksPetaniController::class, 'data'])->name('dashboard.indeks-petani.data');
 
     Route::get('/dashboard/profil/petani/{id}',[App\Http\Controllers\Web\Produktivitas\ProfilPetaniController::class, 'index'])->name('dashboard.profil-petani');