diff --git a/app/Http/Controllers/Web/Dashboard/DemografiPetaniController.php b/app/Http/Controllers/Web/Dashboard/DemografiPetaniController.php
new file mode 100644
index 0000000..93c98b3
--- /dev/null
+++ b/app/Http/Controllers/Web/Dashboard/DemografiPetaniController.php
@@ -0,0 +1,260 @@
+<?php
+
+namespace App\Http\Controllers\Web\Dashboard;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Str;
+
+use App\Models\Pertanian\Petani;
+use App\Models\Pertanian\Komoditas;
+use App\Models\Pertanian\Lahan;
+use App\Models\Pertanian\PendapatanKomoditas;
+
+class DemografiPetaniController extends Controller
+{
+    public function index(Request $request)
+    {
+        $totalPetani        = Petani::count();
+        $petaniLakilaki     = Petani::where('jenis_kelamin', 1)->count();
+        $petaniPerempuan    = Petani::where('jenis_kelamin', 0)->count();
+        $totalKomoditas     = Petani::whereNotNull('komoditas_id')
+                                ->distinct()
+                                ->count('komoditas_id');
+        $totalLuasLahan     = Lahan::has('petani')
+                                ->sum('luas_lahan');
+        $ratarataLuasLahan  = $totalLuasLahan && $totalPetani ? $totalLuasLahan / $totalPetani : 0;
+
+        $umurKurang30 = Petani::whereNotNull('tanggal_lahir')->whereRaw("EXTRACT(YEAR FROM AGE(CURRENT_DATE, tanggal_lahir)) < 30")->count();
+        $umur30sampai39 = Petani::whereNotNull('tanggal_lahir')->whereRaw("EXTRACT(YEAR FROM AGE(CURRENT_DATE, tanggal_lahir)) BETWEEN 30 AND 39")->count();
+        $umur40sampai49 = Petani::whereNotNull('tanggal_lahir')->whereRaw("EXTRACT(YEAR FROM AGE(CURRENT_DATE, tanggal_lahir)) BETWEEN 40 AND 49")->count();
+        $umur50sampai59 = Petani::whereNotNull('tanggal_lahir')->whereRaw("EXTRACT(YEAR FROM AGE(CURRENT_DATE, tanggal_lahir)) BETWEEN 50 AND 59")->count();
+        $umur60keatas = Petani::whereNotNull('tanggal_lahir')->whereRaw("EXTRACT(YEAR FROM AGE(CURRENT_DATE, tanggal_lahir)) >= 60")->count();
+
+        $pendidikanCounts = Petani::whereNotNull('pendidikan_terakhir')
+            ->select('pendidikan_terakhir', DB::raw('COUNT(*) as total'))
+            ->groupBy('pendidikan_terakhir')
+            ->pluck('total', 'pendidikan_terakhir');
+
+        $pendidikan = [
+            'tidak_sekolah' => (int) ($pendidikanCounts['01_tidak_sekolah'] ?? 0),
+            'sd'            => (int) ($pendidikanCounts['02_sd'] ?? 0),
+            'smp'           => (int) ($pendidikanCounts['03_smp'] ?? 0),
+            'sma'           => (int) ($pendidikanCounts['04_sma'] ?? 0),
+            'diploma'       => (int) ($pendidikanCounts['05_diploma'] ?? 0),
+
+            's1_keatas' =>
+                (int) ($pendidikanCounts['06_sarjana'] ?? 0) +
+                (int) ($pendidikanCounts['07_magister'] ?? 0),
+        ];
+
+        $komoditasUtama = Komoditas::query()
+            ->whereHas('petani')
+            ->withCount('petani')
+            ->orderByDesc('petani_count')
+            ->get(['id', 'nama']);
+
+        $luasLahanPerPetani = Lahan::has('petani')
+            ->select('petani_id')
+            ->selectRaw('SUM(luas_lahan) as total_luas')
+            ->groupBy('petani_id')
+            ->get();
+
+        $luasLahan = [
+            'kurang_05' => $luasLahanPerPetani->filter(fn ($item) => $item->total_luas < 5000)->count(),
+            '05_1' => $luasLahanPerPetani->filter(fn ($item) => $item->total_luas >= 5000 && $item->total_luas <= 10000)->count(),
+            '1_2' => $luasLahanPerPetani->filter(fn ($item) => $item->total_luas > 10000 && $item->total_luas <= 20000)->count(),
+            'lebih_2' => $luasLahanPerPetani->filter(fn ($item) => $item->total_luas > 20000)->count(),
+        ];
+
+        $pendapatanPerPetani = PendapatanKomoditas::with('sosialEkonomi.petani')->get()
+                ->filter(fn ($item) => $item->sosialEkonomi?->petani)
+                ->groupBy(fn ($item) => $item->sosialEkonomi->petani_id)
+                ->map(fn ($items) => $items->sum('pendapatan'));
+
+        $penghasilan = [
+            'kurang_1' => $pendapatanPerPetani->filter(fn ($value) => $value < 1000000)->count(),
+            '1_3' => $pendapatanPerPetani->filter(fn ($value) => $value >= 1000000 && $value <= 3000000)->count(),
+            '3_5' => $pendapatanPerPetani->filter(fn ($value) => $value > 3000000 && $value <= 5000000)->count(),
+            '5_10' => $pendapatanPerPetani->filter(fn ($value) => $value > 5000000 && $value <= 10000000)->count(),
+            'lebih_10' => $pendapatanPerPetani->filter(fn ($value) => $value > 10000000)->count(),
+        ];
+
+        $data = [
+            'total_petani' => $totalPetani,
+            'petani_lakilaki' => $petaniLakilaki,
+            'petani_perempuan' => $petaniPerempuan,
+            'total_komoditas' => $totalKomoditas,
+            'total_luas_lahan' => $totalLuasLahan,
+            'ratarata_luas_lahan' => $ratarataLuasLahan,
+            'kelompok_umur' => [
+                'kurang_30' => $umurKurang30,
+                '30_39' => $umur30sampai39,
+                '40_49' => $umur40sampai49,
+                '50_59' => $umur50sampai59,
+                '60_keatas' => $umur60keatas,
+            ],
+            'pendidikan' => $pendidikan,
+            'komoditas_utama' => [
+                'ids' => $komoditasUtama
+                    ->pluck('id')
+                    ->values(),
+
+                'labels' => $komoditasUtama
+                    ->pluck('nama')
+                    ->values(),
+
+                'series' => $komoditasUtama
+                    ->pluck('petani_count')
+                    ->map(fn ($value) => (int) $value)
+                    ->values(),
+            ],
+            'luas_lahan' => $luasLahan,
+            'penghasilan' => $penghasilan,
+        ];
+
+        $daftarPetani = Petani::with([
+                'komoditas'
+            ])
+            ->withSum('lahans as total_luas_lahan', 'luas_lahan')
+            ->orderBy('id')
+            ->paginate(10);
+        // dd($daftarPetani);
+        return view('dashboard.demografi-petani', compact('data', 'daftarPetani'));
+    }
+
+    public function data(Request $request)
+    {
+        $query = Petani::with('komoditas')->withSum( 'lahans as total_luas_lahan', 'luas_lahan');
+
+        if ($request->filled('search')) {
+            $search = $request->search;
+            $query->where('nama', 'ILIKE', "%{$search}%" );
+        }
+
+        $pendapatanPerPetani = PendapatanKomoditas::with('sosialEkonomi.petani')->get()
+                                ->filter(fn ($item) => $item->sosialEkonomi?->petani)
+                                ->groupBy(fn ($item) => $item->sosialEkonomi->petani_id)
+                                ->map(fn ($items) => $items->sum('pendapatan'));
+
+        if ($request->has('gender') && $request->gender !== '') {
+            $query->where('jenis_kelamin', $request->gender );
+        }
+
+        if ($request->filled('umur')) {
+            match ($request->umur) {
+                'kurang_30' => $query->whereNotNull('tanggal_lahir')
+                                ->whereRaw("EXTRACT( YEAR FROM AGE( CURRENT_DATE, tanggal_lahir)) < 30"),
+                '30_39'     => $query->whereNotNull('tanggal_lahir')
+                                ->whereRaw("EXTRACT(YEAR FROM AGE(CURRENT_DATE, tanggal_lahir)) BETWEEN 30 AND 39"),
+                '40_49'     => $query->whereNotNull('tanggal_lahir')
+                                ->whereRaw("EXTRACT(YEAR FROM AGE(CURRENT_DATE, tanggal_lahir)) BETWEEN 40 AND 49"),
+                '50_59'     => $query->whereNotNull('tanggal_lahir')
+                                ->whereRaw("EXTRACT(YEAR FROM AGE(CURRENT_DATE, tanggal_lahir)) BETWEEN 50 AND 59"),
+                '60_keatas' => $query ->whereNotNull('tanggal_lahir')
+                                ->whereRaw("EXTRACT(YEAR FROM AGE(CURRENT_DATE, tanggal_lahir)) >= 60"),
+                default     => null
+            };
+        }
+
+        if ($request->filled('pendidikan')) {
+            $pendidikanMap = [
+                'tidak_sekolah' => ['01_tidak_sekolah'],
+                'sd'            => ['02_sd'],
+                'smp'           => ['03_smp'],
+                'sma'           => ['04_sma'],
+                'diploma'       => ['05_diploma'],
+                's1_keatas'     => ['06_sarjana', '07_magister'],
+            ];
+
+            if (isset($pendidikanMap[$request->pendidikan])) {
+                $query->whereIn('pendidikan_terakhir', $pendidikanMap[$request->pendidikan]);
+            }
+        }
+  
+        if ($request->filled('komoditas')) {
+            $query->where('komoditas_id', $request->komoditas);
+        }
+
+        if ($request->filled('penghasilan')) {
+            $filteredPendapatan =
+                match ($request->penghasilan) {
+                    'kurang_1'  => $pendapatanPerPetani  ->filter(fn ($value) => $value < 1000000 ),
+                    '1_3'       => $pendapatanPerPetani->filter( fn ($value) => $value >= 1000000 && $value <= 3000000 ),
+                    '3_5'       => $pendapatanPerPetani->filter(fn ($value) => $value > 3000000 && $value <= 5000000 ),
+                    '5_10'      => $pendapatanPerPetani->filter(fn ($value) => $value > 5000000 && $value <= 10000000 ),
+                    'lebih_10'  => $pendapatanPerPetani->filter(fn ($value) => $value > 10000000 ),
+                    default     => collect()
+                };
+
+            $query->whereIn('id', $filteredPendapatan->keys()->values()->all());
+        }
+
+        if ($request->filled('luas_lahan')) {
+            $lahanQuery = Lahan::query()->select('petani_id')->groupBy('petani_id');
+            match ($request->luas_lahan) {
+                'kurang_05' => $lahanQuery->havingRaw('SUM(luas_lahan) < 5000' ),
+                '05_1'      => $lahanQuery->havingRaw('SUM(luas_lahan) >= 5000 AND SUM(luas_lahan) <= 10000' ),
+                '1_2'       => $lahanQuery->havingRaw('SUM(luas_lahan) > 10000 AND SUM(luas_lahan) <= 20000'),
+                'lebih_2'   => $lahanQuery->havingRaw('SUM(luas_lahan) > 20000'),
+                default     => null
+            };
+            $query->whereIn('id', $lahanQuery->pluck('petani_id'));
+        }
+
+        $daftarPetani = $query->orderBy('id')->paginate(10);
+
+        $pendidikanLabels = [
+            '01_tidak_sekolah' => 'Tidak Sekolah',
+            '02_sd' => 'SD',
+            '03_smp' => 'SMP',
+            '04_sma' => 'SMA',
+            '05_diploma' => 'Diploma',
+            '06_sarjana' => 'Sarjana',
+            '07_magister' => 'Magister',
+        ];
+
+        $rows = collect($daftarPetani->items())->map(function ($petani) use (
+            $pendidikanLabels,
+            $pendapatanPerPetani
+        ) {
+            $umur = $petani->tanggal_lahir ? \Carbon\Carbon::parse($petani->tanggal_lahir)->age : null;
+            $pendidikanRaw = $petani->getRawOriginal('pendidikan_terakhir');
+            $pendapatan = $pendapatanPerPetani->get($petani->id);
+
+            $rentangPenghasilan = match (true) {
+                $pendapatan === null    => '-',
+                $pendapatan < 1000000   => '< Rp1 juta',
+                $pendapatan <= 3000000  => 'Rp1 - 3 juta',
+                $pendapatan <= 5000000  => 'Rp3 - 5 juta',
+                $pendapatan <= 10000000 => 'Rp5 - 10 juta',
+                default                 => '> Rp10 juta',
+            };
+
+            return [
+                'id'                    => $petani->kode ?? $petani->id,
+                'nama'                  => $petani->nama ?? '-',
+                'jenis_kelamin'         => $petani->jenis_kelamin,
+                'gender'                => $petani->jenis_kelamin == 1 ? 'Laki-laki' : 'Perempuan',
+                'umur'                  => $umur,
+                'komoditas'             => $petani->komoditas?->nama ?? '-',
+                'luas_lahan'            => (float) ($petani->total_luas_lahan ?? 0 ),
+                'pendidikan'            => $pendidikanLabels[$pendidikanRaw ] ?? '-',
+                'rentang_penghasilan'   => $rentangPenghasilan,
+            ];
+        });
+
+        return response()->json([
+            'data' => $rows,
+            'pagination' => [
+                'current_page'  => $daftarPetani->currentPage(),
+                'last_page'     => $daftarPetani->lastPage(),
+                'per_page'      => $daftarPetani->perPage(),
+                'total'         => $daftarPetani->total(),
+                'from'          => $daftarPetani->firstItem(),
+                'to'            => $daftarPetani->lastItem(),
+            ],
+        ]);
+    }
+}
diff --git a/app/Http/Controllers/Web/Dashboard/IndeksPetaniController.php b/app/Http/Controllers/Web/Dashboard/IndeksPetaniController.php
new file mode 100644
index 0000000..4fbe6e3
--- /dev/null
+++ b/app/Http/Controllers/Web/Dashboard/IndeksPetaniController.php
@@ -0,0 +1,180 @@
+<?php
+
+namespace App\Http\Controllers\Web\Dashboard;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Gate;
+use Illuminate\Support\Facades\DB;
+
+use App\Models\Pertanian\Petani;
+use App\Models\Pertanian\Komoditas;
+use App\Models\Pertanian\Lahan;
+use App\Models\Pertanian\Tanaman;
+use App\Models\Pertanian\SkorPetani;
+
+class IndeksPetaniController extends Controller
+{
+    public function index()
+    {
+        if (!Gate::any(['super_admin', 'admin', 'fasilitator'])) {
+            abort(403);
+        }
+
+        $title = 'Dashboard Profil Petani';
+
+        $komoditas = Komoditas::where('is_utama', true)->get();
+
+        $petani = Petani::pluck('id');
+        $lahan = Lahan::has('petani')->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
+        ";
+
+        $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');
+
+        $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');
+
+        if ($avgSkor >= 4.0) {
+            $avgSegmen = 'Penggerak';
+        } elseif ($avgSkor >= 3.0) {
+            $avgSegmen = 'Perintis';
+        } elseif ($avgSkor >= 2.0) {
+            $avgSegmen = 'Pemerhati';
+        } elseif ($avgSkor >= 1.0) {
+            $avgSegmen = 'Pemula';
+        } else {
+            $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');
+
+        $countSegmentasi = SkorPetani::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')
+            ->selectRaw("
+                petani.komoditas_id,
+                $case AS segmen,
+                COUNT(petani.id) AS total
+            ")
+            ->groupBy('petani.komoditas_id')
+            ->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'))
+                    ->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'))
+                    ->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,
+                        avg(skor_komp_4_d4_k4_keterlibatan_kelembagaan) as skor_komp_4_d4_k4_keterlibatan_kelembagaan,
+                        avg(skor_komp_5_d4_k5_k6_akses_kebebasan_keuangan) as skor_komp_5_d4_k5_k6_akses_kebebasan_keuangan,
+                        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')
+            ->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
+            ")
+            ->whereIn('petani.id', $petani)
+            ->distinct()
+            ->get();
+
+        $mapSegmentasi = SkorPetani::query()
+            ->join('petani', 'petani_skor.petani_id', '=', 'petani.id')
+            ->whereNull('petani.deleted_at')
+            ->selectRaw("petani.desa_kelurahan_id,
+                $case AS segmen,
+                COUNT(petani.id) AS total
+            ")
+            ->groupBy('petani.desa_kelurahan_id')            
+            ->groupByRaw($case)
+            ->get();
+
+        $mapAvgSkorSegmentasi = SkorPetani::query()
+            ->join('petani', 'petani_skor.petani_id', '=', 'petani.id')
+            ->whereNull('petani.deleted_at')
+            ->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();
+
+        $daftarPetani = Petani::query()
+            ->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',
+        ));
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Web/Dashboard/IndikatorPertanianController.php b/app/Http/Controllers/Web/Dashboard/IndikatorPertanianController.php
new file mode 100644
index 0000000..9f4a55c
--- /dev/null
+++ b/app/Http/Controllers/Web/Dashboard/IndikatorPertanianController.php
@@ -0,0 +1,760 @@
+<?php
+
+namespace App\Http\Controllers\Web\Dashboard;
+
+use App\Enums\KeparahanSerangan;
+use App\Enums\PenyakitTanaman;
+use App\Enums\PraktikBudidaya\PemberianPupuk;
+use App\Enums\SeranganHama;
+use App\Enums\SosialEkonomi\StatusKepemilikanLahanSosialEkonomi;
+use App\Http\Controllers\Controller;
+use App\Models\Pertanian\Komoditas;
+use App\Models\Pertanian\Lahan;
+use App\Models\Pertanian\Petani;
+use App\Models\Pertanian\PraktikBudidaya;
+use App\Models\Pertanian\Produksi;
+use App\Models\Pertanian\SkorPetani;
+use App\Models\Pertanian\SosialEkonomi;
+use App\Models\Pertanian\SurveyProduktivitas;
+use App\Models\Wilayah\DesaKelurahan;
+use App\Models\Wilayah\KabupatenKota;
+use App\Models\Wilayah\Kecamatan;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+
+class IndikatorPertanianController extends Controller
+{
+    public function index(Request $request)
+    {
+        $kabupatenOptions = $this->kabupatenOptions();
+        $ngadaOption = collect($kabupatenOptions)->first(
+            fn ($option) => str_contains(strtolower($option['label']), 'ngada')
+        );
+        $initialFilters = $this->selectedFilters($request, $ngadaOption['value'] ?? 'all');
+
+        $totalPetani = $this->applyPetaniFilters(Petani::query(), $initialFilters)->count();
+        $totalLuasLahan = ((float) $this->applyLahanFilters(Lahan::query(), $initialFilters)->sum('luas_lahan')) / 10000;
+        $rataRataLuasLahan = $totalPetani > 0
+            ? $totalLuasLahan / $totalPetani
+            : 0;
+        $totalProduksiKg = $this->totalProduksiKg($initialFilters);
+        $rataRataProduksiKg = $totalPetani > 0
+            ? $totalProduksiKg / $totalPetani
+            : 0;
+        $rataRataProduktivitas = $totalLuasLahan > 0
+            ? $totalProduksiKg / $totalLuasLahan
+            : 0;
+
+        $filterOptions = [
+            [
+                'key' => 'kabupaten',
+                'label' => 'Kabupaten',
+                'options' => $kabupatenOptions,
+                'icon' => 'tabler-map-pin',
+                'readonly' => true,
+            ],
+            [
+                'key' => 'kecamatan',
+                'label' => 'Kecamatan',
+                'options' => $this->kecamatanOptions(),
+            ],
+            [
+                'key' => 'desa',
+                'label' => 'Desa',
+                'options' => $this->desaOptions(),
+            ],
+            [
+                'key' => 'komoditas',
+                'label' => 'Komoditas',
+                'options' => $this->komoditasOptions(),
+            ],
+            [
+                'key' => 'segmentasi',
+                'label' => 'Segmentasi',
+                'options' => $this->segmentasiOptions(),
+            ],
+        ];
+
+        $summaryData = [
+            [
+                'value' => number_format($totalPetani, 0, ',', '.'),
+                'label' => 'Petani Terdata',
+                'description' => 'Total petani yang masuk sistem',
+                'icon' => 'tabler-users',
+                'variant' => 'primary',
+            ],
+            [
+                'value' => number_format($totalLuasLahan, 2, ',', '.').' ha',
+                'label' => 'Total Luas Lahan',
+                'description' => 'Rata-rata '.number_format($rataRataLuasLahan, 2, ',', '.').' ha/petani',
+                'icon' => 'tabler-mountain',
+                'variant' => 'success',
+            ],
+            [
+                'value' => number_format($totalProduksiKg, 0, ',', '.').' kg',
+                'label' => 'Total Produksi (Semua Komoditas)',
+                'description' => 'Rata-rata '.number_format($rataRataProduksiKg, 0, ',', '.').' kg/petani',
+                'icon' => 'tabler-wheat',
+                'variant' => 'warning',
+            ],
+            [
+                'value' => number_format($rataRataProduktivitas, 0, ',', '.').' kg/ha',
+                'label' => 'Rata-rata Produktivitas',
+                'description' => 'Semua komoditas berdasarkan total produksi dan luas lahan',
+                'icon' => 'tabler-chart-bar',
+                'variant' => 'info',
+            ],
+        ];
+
+        return view('dashboard.indikator-pertanian', [
+            'title' => 'Indikator Pertanian',
+            'initialFilters' => $initialFilters,
+            'filterOptions' => $filterOptions,
+            'summaryData' => $summaryData,
+            'chartData' => [
+                'petaniPerKomoditas' => $this->petaniPerKomoditasChart($initialFilters),
+                'luasLahanPerKecamatan' => $this->luasLahanPerKecamatanChart($initialFilters),
+                'kondisiTanaman' => $this->kondisiTanamanChart($initialFilters),
+                'statusKepemilikanLahan' => $this->statusKepemilikanLahanChart($initialFilters),
+                'seranganHama' => $this->seranganHamaChart($initialFilters),
+                'penyakitTanaman' => $this->penyakitTanamanChart($initialFilters),
+                'keparahanSerangan' => $this->keparahanSeranganChart($initialFilters),
+                'statusHakKelolaLahan' => $this->statusHakKelolaLahanChart($initialFilters),
+                'praktikPemupukan' => $this->praktikPemupukanChart($initialFilters),
+                'produksiPerKomoditas' => $this->produksiPerKomoditasChart($initialFilters),
+                'produktivitasPerKomoditas' => $this->produktivitasPerKomoditasChart($initialFilters),
+                'luasPanenPerKomoditas' => $this->luasPanenPerKomoditasChart($initialFilters),
+                'statusPanen' => $this->statusPanenChart($initialFilters),
+                'surveyProduktivitasHa' => $this->surveyProduktivitasByUnitChart($initialFilters, 'ha_tahun'),
+                'surveyProduktivitasPohon' => $this->surveyProduktivitasByUnitChart($initialFilters, 'pohon_tahun'),
+            ],
+        ]);
+    }
+
+    private function selectedFilters(Request $request, string $defaultKabupaten): array
+    {
+        $filters = [
+            'kabupaten' => $defaultKabupaten,
+            'kecamatan' => $this->validFilterValue($request->query('kecamatan'), Kecamatan::class),
+            'desa' => $this->validFilterValue($request->query('desa'), DesaKelurahan::class),
+            'komoditas' => $this->validFilterValue($request->query('komoditas'), Komoditas::class),
+            'segmentasi' => $this->validSegmentasi((string) $request->query('segmentasi', 'all')),
+        ];
+
+        if ($filters['desa'] !== 'all') {
+            $desa = DesaKelurahan::query()->find($filters['desa']);
+
+            if (! $desa || ($filters['kecamatan'] !== 'all' && (string) $desa->kecamatan_id !== $filters['kecamatan'])) {
+                $filters['desa'] = 'all';
+            }
+        }
+
+        if ($filters['kecamatan'] === 'all') {
+            $filters['desa'] = 'all';
+        }
+
+        return $filters;
+    }
+
+    private function validFilterValue(mixed $value, string $modelClass): string
+    {
+        if (! $value || $value === 'all') {
+            return 'all';
+        }
+
+        return $modelClass::query()->whereKey($value)->exists()
+            ? (string) $value
+            : 'all';
+    }
+
+    private function validSegmentasi(string $value): string
+    {
+        return in_array($value, [
+            'Penggerak',
+            'Perintis',
+            'Pemerhati',
+            'Pemula',
+            'Belum tersegmentasi',
+            'all',
+        ], true) ? $value : 'all';
+    }
+
+    private function kabupatenOptions(): array
+    {
+        return $this->withAllOption(
+            'Semua Kabupaten',
+            KabupatenKota::query()
+                ->orderBy('nama')
+                ->get(['id', 'kode', 'nama'])
+                ->map(fn (KabupatenKota $kabupaten) => [
+                    'value' => (string) $kabupaten->id,
+                    'label' => $this->kabupatenLabel($kabupaten),
+                ])
+                ->values()
+                ->all()
+        );
+    }
+
+    private function kecamatanOptions(): array
+    {
+        return $this->withAllOption(
+            'Semua Kecamatan',
+            Kecamatan::query()
+                ->orderBy('nama')
+                ->get(['id', 'nama'])
+                ->map(fn (Kecamatan $kecamatan) => [
+                    'value' => (string) $kecamatan->id,
+                    'label' => $kecamatan->nama,
+                ])
+                ->values()
+                ->all()
+        );
+    }
+
+    private function desaOptions(): array
+    {
+        return $this->withAllOption(
+            'Semua Desa',
+            DesaKelurahan::query()
+                ->orderBy('nama')
+                ->get(['id', 'nama', 'kecamatan_id'])
+                ->map(fn (DesaKelurahan $desa) => [
+                    'value' => (string) $desa->id,
+                    'label' => $desa->nama,
+                    'parent' => (string) $desa->kecamatan_id,
+                ])
+                ->values()
+                ->all()
+        );
+    }
+
+    private function komoditasOptions(): array
+    {
+        return $this->withAllOption(
+            'Semua Komoditas',
+            Komoditas::query()
+                ->orderBy('nama')
+                ->get(['id', 'nama'])
+                ->map(fn (Komoditas $komoditas) => [
+                    'value' => (string) $komoditas->id,
+                    'label' => $komoditas->nama,
+                ])
+                ->values()
+                ->all()
+        );
+    }
+
+    private function segmentasiOptions(): array
+    {
+        $segments = SkorPetani::query()
+            ->whereNotNull('skor_kesiapan_adopsi')
+            ->pluck('skor_kesiapan_adopsi')
+            ->map(fn ($score) => $this->segmentLabel((float) $score))
+            ->filter()
+            ->unique()
+            ->sortBy(fn ($segment) => array_search($segment, [
+                'Penggerak',
+                'Perintis',
+                'Pemerhati',
+                'Pemula',
+                'Belum tersegmentasi',
+            ], true))
+            ->map(fn ($segment) => [
+                'value' => $segment,
+                'label' => $segment,
+            ])
+            ->values()
+            ->all();
+
+        return $this->withAllOption('Semua Segmentasi', $segments);
+    }
+
+    private function totalProduksiKg(array $filters): float
+    {
+        return $this->applyProduksiFilters(Produksi::query(), $filters)
+            ->whereNotNull('jumlah_panen')
+            ->get(['jumlah_panen', 'satuan'])
+            ->sum(fn (Produksi $produksi) => $this->toKilograms(
+                (float) $produksi->jumlah_panen,
+                (string) $produksi->satuan
+            ));
+    }
+
+    private function petaniPerKomoditasChart(array $filters): array
+    {
+        $rows = $this->applyPetaniFilters(Petani::query(), $filters)
+            ->leftJoin('master_komoditas as k', 'k.id', '=', 'petani.komoditas_id')
+            ->selectRaw("COALESCE(k.nama, 'Belum ditentukan') as label")
+            ->selectRaw('COUNT(petani.id) as total')
+            ->groupBy('k.id', 'k.nama')
+            ->orderByDesc('total')
+            ->get();
+
+        return [
+            'labels' => $rows->pluck('label')->values()->all(),
+            'series' => $rows->pluck('total')->map(fn ($value) => (int) $value)->values()->all(),
+        ];
+    }
+
+    private function luasLahanPerKecamatanChart(array $filters): array
+    {
+        $rows = $this->applyLahanFilters(Lahan::query(), $filters)
+            ->leftJoin('master_desa_kelurahan as d', 'd.id', '=', 'map_lahan.desa_kelurahan_id')
+            ->leftJoin('master_kecamatan as k', 'k.id', '=', 'd.kecamatan_id')
+            ->selectRaw("COALESCE(k.nama, 'Belum ditentukan') as label")
+            ->selectRaw('SUM(map_lahan.luas_lahan) / 10000 as total')
+            ->groupBy('k.id', 'k.nama')
+            ->havingRaw('SUM(map_lahan.luas_lahan) > 0')
+            ->orderByDesc('total')
+            ->limit(8)
+            ->get()
+            ->filter(fn ($row) => round((float) $row->total, 2) > 0)
+            ->values();
+
+        return [
+            'labels' => $rows->pluck('label')->values()->all(),
+            'series' => $rows->pluck('total')->map(fn ($value) => round((float) $value, 2))->values()->all(),
+        ];
+    }
+
+    private function kondisiTanamanChart(array $filters): array
+    {
+        $rows = $this->applyTanamanTableFilters(DB::table('map_tanaman'), $filters)
+            ->whereNull('map_tanaman.deleted_at')
+            ->whereNotNull('map_tanaman.kondisi_tanaman')
+            ->selectRaw('map_tanaman.kondisi_tanaman as label')
+            ->selectRaw('COUNT(map_tanaman.id) as total')
+            ->groupBy('map_tanaman.kondisi_tanaman')
+            ->orderByDesc('total')
+            ->get();
+
+        if ($rows->isEmpty()) {
+            $rows = $this->applyLahanFilters(Lahan::query(), $filters)
+                ->whereNull('deleted_at')
+                ->whereNotNull('kondisi_tanaman')
+                ->selectRaw('kondisi_tanaman as label')
+                ->selectRaw('COUNT(map_lahan.id) as total')
+                ->groupBy('kondisi_tanaman')
+                ->orderByDesc('total')
+                ->get();
+        }
+
+        return [
+            'labels' => $rows->pluck('label')->map(fn ($label) => $this->shortEnumLabel((string) $label))->values()->all(),
+            'series' => $rows->pluck('total')->map(fn ($value) => (int) $value)->values()->all(),
+        ];
+    }
+
+    private function seranganHamaChart(array $filters): array
+    {
+        return $this->tanamanAttributeChart(
+            $filters,
+            'serangan_hama',
+            fn ($label) => $this->enumLabel(SeranganHama::class, (string) $label)
+        );
+    }
+
+    private function penyakitTanamanChart(array $filters): array
+    {
+        return $this->tanamanAttributeChart(
+            $filters,
+            'penyakit_tanaman',
+            fn ($label) => $this->enumLabel(PenyakitTanaman::class, (string) $label)
+        );
+    }
+
+    private function keparahanSeranganChart(array $filters): array
+    {
+        return $this->tanamanAttributeChart(
+            $filters,
+            'keparahan_serangan',
+            fn ($label) => $this->keparahanSeranganLabel((string) $label)
+        );
+    }
+
+    private function statusKepemilikanLahanChart(array $filters): array
+    {
+        $rows = $this->applyLahanFilters(Lahan::query(), $filters)
+            ->whereNotNull('status_kepemilikan')
+            ->selectRaw('status_kepemilikan as label')
+            ->selectRaw('COUNT(map_lahan.id) as total')
+            ->groupBy('status_kepemilikan')
+            ->orderByDesc('total')
+            ->get();
+
+        return $this->chartFromRows($rows, fn ($label) => $this->shortEnumLabel((string) $label));
+    }
+
+    private function statusHakKelolaLahanChart(array $filters): array
+    {
+        $rows = $this->applySosialEkonomiFilters(SosialEkonomi::query(), $filters)
+            ->whereNotNull('status_kepemilikan_lahan')
+            ->selectRaw('status_kepemilikan_lahan as label')
+            ->selectRaw('COUNT(sosial_ekonomi.id) as total')
+            ->groupBy('status_kepemilikan_lahan')
+            ->orderByDesc('total')
+            ->get();
+
+        return $this->chartFromRows(
+            $rows,
+            fn ($label) => $this->enumLabel(StatusKepemilikanLahanSosialEkonomi::class, (string) $label)
+        );
+    }
+
+    private function praktikPemupukanChart(array $filters): array
+    {
+        $rows = $this->applyPraktikBudidayaFilters(PraktikBudidaya::query(), $filters)
+            ->whereNotNull('pemberian_pupuk')
+            ->selectRaw('pemberian_pupuk as label')
+            ->selectRaw('COUNT(praktik_budidaya.id) as total')
+            ->groupBy('pemberian_pupuk')
+            ->orderBy('pemberian_pupuk')
+            ->get();
+
+        return $this->chartFromRows(
+            $rows,
+            fn ($label) => $this->pemberianPupukLabel((int) $label)
+        );
+    }
+
+    private function produksiPerKomoditasChart(array $filters): array
+    {
+        $rows = $this->applyProduksiFilters(Produksi::query(), $filters)
+            ->leftJoin('master_komoditas as k', 'k.id', '=', 'produksi.komoditas_id')
+            ->whereNotNull('jumlah_panen')
+            ->selectRaw("COALESCE(k.nama, 'Belum ditentukan') as label")
+            ->selectRaw('produksi.jumlah_panen')
+            ->selectRaw('produksi.satuan')
+            ->get()
+            ->groupBy('label')
+            ->map(fn ($items) => round($items->sum(
+                fn (Produksi $produksi) => $this->toKilograms(
+                    (float) $produksi->jumlah_panen,
+                    (string) $produksi->satuan
+                )
+            ), 2))
+            ->filter(fn ($total) => $total > 0)
+            ->sortDesc();
+
+        return [
+            'labels' => $rows->keys()->values()->all(),
+            'series' => $rows->values()->map(fn ($value) => round((float) $value, 2))->values()->all(),
+        ];
+    }
+
+    private function produktivitasPerKomoditasChart(array $filters): array
+    {
+        $rows = $this->applyProduksiFilters(Produksi::query(), $filters)
+            ->leftJoin('master_komoditas as k', 'k.id', '=', 'produksi.komoditas_id')
+            ->selectRaw("COALESCE(k.nama, 'Belum ditentukan') as label")
+            ->selectRaw('produksi.jumlah_panen')
+            ->selectRaw('produksi.satuan')
+            ->selectRaw('produksi.luas_panen')
+            ->selectRaw('produksi.produktivitas')
+            ->get()
+            ->groupBy('label')
+            ->map(function ($items) {
+                $storedAverage = $items
+                    ->pluck('produktivitas')
+                    ->filter(fn ($value) => (float) $value > 0)
+                    ->avg();
+
+                if ($storedAverage > 0) {
+                    return round((float) $storedAverage, 2);
+                }
+
+                $totalProduksiKg = $items->sum(
+                    fn (Produksi $produksi) => $this->toKilograms(
+                        (float) $produksi->jumlah_panen,
+                        (string) $produksi->satuan
+                    )
+                );
+                $totalLuasPanen = $items->sum(fn (Produksi $produksi) => (float) $produksi->luas_panen);
+
+                return $totalLuasPanen > 0
+                    ? round($totalProduksiKg / $totalLuasPanen, 2)
+                    : 0;
+            })
+            ->filter(fn ($total) => $total > 0)
+            ->sortDesc();
+
+        return [
+            'labels' => $rows->keys()->values()->all(),
+            'series' => $rows->values()->map(fn ($value) => round((float) $value, 2))->values()->all(),
+        ];
+    }
+
+    private function luasPanenPerKomoditasChart(array $filters): array
+    {
+        $rows = $this->applyProduksiFilters(Produksi::query(), $filters)
+            ->leftJoin('master_komoditas as k', 'k.id', '=', 'produksi.komoditas_id')
+            ->whereNotNull('luas_panen')
+            ->selectRaw("COALESCE(k.nama, 'Belum ditentukan') as label")
+            ->selectRaw('SUM(produksi.luas_panen) as total')
+            ->groupBy('k.id', 'k.nama')
+            ->havingRaw('SUM(produksi.luas_panen) > 0')
+            ->orderByDesc('total')
+            ->get();
+
+        return [
+            'labels' => $rows->pluck('label')->values()->all(),
+            'series' => $rows->pluck('total')->map(fn ($value) => round((float) $value, 2))->values()->all(),
+        ];
+    }
+
+    private function statusPanenChart(array $filters): array
+    {
+        $rows = $this->applyProduksiFilters(Produksi::query(), $filters)
+            ->whereNotNull('status_panen')
+            ->selectRaw("COALESCE(status_panen, 'Belum ditentukan') as label")
+            ->selectRaw('COUNT(produksi.id) as total')
+            ->groupBy('status_panen')
+            ->orderByDesc('total')
+            ->get();
+
+        return $this->chartFromRows($rows, fn ($label) => $this->shortEnumLabel((string) $label));
+    }
+
+    private function surveyProduktivitasByUnitChart(array $filters, string $unit): array
+    {
+        $rows = $this->applySurveyProduktivitasFilters(SurveyProduktivitas::query(), $filters)
+            ->leftJoin('master_komoditas as k', 'k.id', '=', 'survey_produktivitas.komoditas_id')
+            ->where('satuan', $unit)
+            ->whereNotNull('kuantitas')
+            ->selectRaw("COALESCE(k.nama, 'Belum ditentukan') as label")
+            ->selectRaw('AVG(survey_produktivitas.kuantitas) as total')
+            ->groupBy('k.id', 'k.nama')
+            ->havingRaw('AVG(survey_produktivitas.kuantitas) > 0')
+            ->orderByDesc('total')
+            ->get();
+
+        return [
+            'labels' => $rows->pluck('label')->values()->all(),
+            'series' => $rows->pluck('total')->map(fn ($value) => round((float) $value, 2))->values()->all(),
+        ];
+    }
+
+    private function chartFromRows($rows, callable $labelResolver): array
+    {
+        return [
+            'labels' => $rows
+                ->pluck('label')
+                ->map(fn ($label) => $labelResolver($label))
+                ->values()
+                ->all(),
+            'series' => $rows
+                ->pluck('total')
+                ->map(fn ($value) => (int) $value)
+                ->values()
+                ->all(),
+        ];
+    }
+
+    private function tanamanAttributeChart(array $filters, string $field, callable $labelResolver): array
+    {
+        $qualifiedField = 'map_tanaman.'.$field;
+
+        $rows = $this->applyTanamanTableFilters(DB::table('map_tanaman'), $filters)
+            ->whereNull('map_tanaman.deleted_at')
+            ->whereNotNull($qualifiedField)
+            ->selectRaw($qualifiedField.' as label')
+            ->selectRaw('COUNT(map_tanaman.id) as total')
+            ->groupBy($qualifiedField)
+            ->orderByDesc('total')
+            ->get();
+
+        if ($rows->isEmpty()) {
+            $rows = $this->applyLahanFilters(Lahan::query(), $filters)
+                ->whereNotNull($field)
+                ->selectRaw($field.' as label')
+                ->selectRaw('COUNT(map_lahan.id) as total')
+                ->groupBy($field)
+                ->orderByDesc('total')
+                ->get();
+        }
+
+        return $this->chartFromRows($rows, $labelResolver);
+    }
+
+    private function applyPetaniFilters($query, array $filters)
+    {
+        return $query
+            ->when($filters['kecamatan'] !== 'all', function ($query) use ($filters) {
+                $query->whereHas('desaKelurahan', fn ($desa) => $desa->where('kecamatan_id', $filters['kecamatan']));
+            })
+            ->when($filters['desa'] !== 'all', fn ($query) => $query->where('desa_kelurahan_id', $filters['desa']))
+            ->when($filters['komoditas'] !== 'all', fn ($query) => $query->where('komoditas_id', $filters['komoditas']))
+            ->when($filters['segmentasi'] !== 'all', function ($query) use ($filters) {
+                $query->whereHas('skor', function ($skor) use ($filters) {
+                    $this->applySegmentasiRange($skor, $filters['segmentasi']);
+                });
+            });
+    }
+
+    private function applyLahanFilters($query, array $filters)
+    {
+        return $query
+            ->when($filters['kecamatan'] !== 'all', function ($query) use ($filters) {
+                $query->whereHas('desaKelurahan', fn ($desa) => $desa->where('kecamatan_id', $filters['kecamatan']));
+            })
+            ->when($filters['desa'] !== 'all', fn ($query) => $query->where('desa_kelurahan_id', $filters['desa']))
+            ->when($filters['komoditas'] !== 'all', fn ($query) => $query->where('komoditas_id', $filters['komoditas']))
+            ->when($filters['segmentasi'] !== 'all', function ($query) use ($filters) {
+                $query->whereIn('petani_id', $this->segmentasiPetaniIdsQuery($filters['segmentasi']));
+            });
+    }
+
+    private function applyProduksiFilters($query, array $filters)
+    {
+        return $query
+            ->when($filters['kecamatan'] !== 'all' || $filters['desa'] !== 'all' || $filters['segmentasi'] !== 'all', function ($query) use ($filters) {
+                $query->whereHas('lahan', function ($lahan) use ($filters) {
+                    $this->applyLahanFilters($lahan, $filters);
+                });
+            })
+            ->when($filters['komoditas'] !== 'all', fn ($query) => $query->where('komoditas_id', $filters['komoditas']));
+    }
+
+    private function applySosialEkonomiFilters($query, array $filters)
+    {
+        return $query->whereHas('petani', function ($petani) use ($filters) {
+            $this->applyPetaniFilters($petani, $filters);
+        });
+    }
+
+    private function applyPraktikBudidayaFilters($query, array $filters)
+    {
+        return $query->whereHas('petani', function ($petani) use ($filters) {
+            $this->applyPetaniFilters($petani, $filters);
+        });
+    }
+
+    private function applySurveyProduktivitasFilters($query, array $filters)
+    {
+        return $query
+            ->whereHas('petani', function ($petani) use ($filters) {
+                $this->applyPetaniFilters($petani, $filters);
+            })
+            ->when($filters['komoditas'] !== 'all', fn ($query) => $query->where('komoditas_id', $filters['komoditas']));
+    }
+
+    private function applyTanamanTableFilters($query, array $filters)
+    {
+        return $query
+            ->leftJoin('map_lahan as l', 'l.id', '=', 'map_tanaman.lahan_id')
+            ->when($filters['kecamatan'] !== 'all', function ($query) use ($filters) {
+                $query
+                    ->leftJoin('master_desa_kelurahan as d', 'd.id', '=', 'l.desa_kelurahan_id')
+                    ->where('d.kecamatan_id', $filters['kecamatan']);
+            })
+            ->when($filters['desa'] !== 'all', fn ($query) => $query->where('l.desa_kelurahan_id', $filters['desa']))
+            ->when($filters['komoditas'] !== 'all', fn ($query) => $query->where('map_tanaman.komoditas_id', $filters['komoditas']))
+            ->when($filters['segmentasi'] !== 'all', function ($query) use ($filters) {
+                $query->where(function ($query) use ($filters) {
+                    $query
+                        ->whereIn('map_tanaman.petani_id', $this->segmentasiPetaniIdsQuery($filters['segmentasi']))
+                        ->orWhereIn('l.petani_id', $this->segmentasiPetaniIdsQuery($filters['segmentasi']));
+                });
+            });
+    }
+
+    private function segmentasiPetaniIdsQuery(string $segmentasi)
+    {
+        return Petani::query()
+            ->select('id')
+            ->whereHas('skor', function ($skor) use ($segmentasi) {
+                $this->applySegmentasiRange($skor, $segmentasi);
+            });
+    }
+
+    private function applySegmentasiRange($query, string $segmentasi)
+    {
+        return match ($segmentasi) {
+            'Penggerak' => $query->where('skor_kesiapan_adopsi', '>=', 4),
+            'Perintis' => $query->where('skor_kesiapan_adopsi', '>=', 3)->where('skor_kesiapan_adopsi', '<', 4),
+            'Pemerhati' => $query->where('skor_kesiapan_adopsi', '>=', 2)->where('skor_kesiapan_adopsi', '<', 3),
+            'Pemula' => $query->where('skor_kesiapan_adopsi', '>=', 1)->where('skor_kesiapan_adopsi', '<', 2),
+            default => $query->where(function ($query) {
+                $query->whereNull('skor_kesiapan_adopsi')->orWhere('skor_kesiapan_adopsi', '<', 1);
+            }),
+        };
+    }
+
+    private function shortEnumLabel(string $value): string
+    {
+        return str($value)
+            ->replace('_', ' ')
+            ->headline()
+            ->toString();
+    }
+
+    private function enumLabel(string $enumClass, int|string $value): string
+    {
+        $case = $enumClass::tryFrom($value);
+
+        if (! $case) {
+            return $this->shortEnumLabel((string) $value);
+        }
+
+        return method_exists($case, 'label')
+            ? $case->label()
+            : $this->shortEnumLabel((string) $case->value);
+    }
+
+    private function keparahanSeranganLabel(string $value): string
+    {
+        return match (KeparahanSerangan::tryFrom($value)) {
+            KeparahanSerangan::RINGAN => 'Ringan',
+            KeparahanSerangan::SEDANG => 'Sedang',
+            KeparahanSerangan::BERAT => 'Parah',
+            default => $this->shortEnumLabel($value),
+        };
+    }
+
+    private function pemberianPupukLabel(int $value): string
+    {
+        return match (PemberianPupuk::tryFrom($value)) {
+            PemberianPupuk::TIDAK_PERNAH => 'Tidak pernah',
+            PemberianPupuk::JENIS_DOSIS_WAKTU_TIDAK_MENENTU => 'Tidak menentu',
+            PemberianPupuk::JENIS_SESUAI_DOSIS_TIDAK_MENENTU => 'Jenis sesuai',
+            PemberianPupuk::JENIS_DOSIS_SESUAI_WAKTU_CUKUP_TEPAT => 'Cukup tepat',
+            PemberianPupuk::JENIS_DOSIS_SESUAI_WAKTU_TEPAT => 'Tepat & rutin',
+            default => $this->shortEnumLabel((string) $value),
+        };
+    }
+
+    private function toKilograms(float $value, string $unit): float
+    {
+        return match (strtolower($unit)) {
+            'ton' => $value * 1000,
+            'kuintal', 'kwintal' => $value * 100,
+            default => $value,
+        };
+    }
+
+    private function withAllOption(string $label, array $options): array
+    {
+        return array_merge([
+            [
+                'value' => 'all',
+                'label' => $label,
+            ],
+        ], $options);
+    }
+
+    private function kabupatenLabel(KabupatenKota $kabupaten): string
+    {
+        return preg_replace('/^(kabupaten|kota)\s+/i', '', $kabupaten->nama);
+    }
+
+    private function segmentLabel(float $score): string
+    {
+        return match (true) {
+            $score >= 4.0 => 'Penggerak',
+            $score >= 3.0 => 'Perintis',
+            $score >= 2.0 => 'Pemerhati',
+            $score >= 1.0 => 'Pemula',
+            default => 'Belum tersegmentasi',
+        };
+    }
+}
diff --git a/app/Http/Controllers/Web/Dashboard/ProfilPetaniController.php b/app/Http/Controllers/Web/Dashboard/ProfilPetaniController.php
index 68a6b17..e74952d 100644
--- a/app/Http/Controllers/Web/Dashboard/ProfilPetaniController.php
+++ b/app/Http/Controllers/Web/Dashboard/ProfilPetaniController.php
@@ -110,7 +110,7 @@ class ProfilPetaniController extends Controller
                         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,
                         avg(skor_komp_4_d4_k4_keterlibatan_kelembagaan) as skor_komp_4_d4_k4_keterlibatan_kelembagaan,
-                        avg(skor_komp_5_d4_k5_k6_akses_kebebasan_keuangan) as skor_komp_5_d4_k5_k6_akses_kebebasan_keuanga,
+                        avg(skor_komp_5_d4_k5_k6_akses_kebebasan_keuangan) as skor_komp_5_d4_k5_k6_akses_kebebasan_keuangan,
                         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();
 
diff --git a/app/Models/Pertanian/Lahan.php b/app/Models/Pertanian/Lahan.php
index 8021c23..fc18aca 100644
--- a/app/Models/Pertanian/Lahan.php
+++ b/app/Models/Pertanian/Lahan.php
@@ -18,6 +18,7 @@ use App\Enums\KondisiTanaman;
 use App\Enums\SeranganHama;
 use App\Enums\PenyakitTanaman;
 use App\Enums\KeparahanSerangan;
+use App\Models\Pertanian\Petani;
 
 class Lahan extends Model
 {
@@ -98,7 +99,7 @@ class Lahan extends Model
 
     public function petani(): BelongsTo
     {
-        return $this->belongsTo(Profile::class, 'petani_id');
+        return $this->belongsTo(Petani::class, 'petani_id');
     }
 
     public function komoditas(): BelongsTo
diff --git a/app/Models/Pertanian/Petani.php b/app/Models/Pertanian/Petani.php
index a44bb2e..e7053e0 100644
--- a/app/Models/Pertanian/Petani.php
+++ b/app/Models/Pertanian/Petani.php
@@ -339,7 +339,7 @@ class Petani extends Model
             $skor >= 3.0 => 'Perintis',
             $skor >= 2.0 => 'Pemerhati',
             $skor >= 1.0 => 'Pemula',
-            default => 'Belum tersegmentasi',
+            default => 'Belum lengkap',
         };
     }
 
@@ -365,10 +365,10 @@ class Petani extends Model
         } elseif ($skor->skor_kesiapan_adopsi >= 1.0) {
             return 'Pemula';
         } else {
-            return 'Belum tersegmentasi';
+            return 'Belum lengkap';
         }
 
-        return 'Belum tersegmentasi';
+        return 'Belum lengkap';
     }
 
     public function keteranganSegmen(): ?string
diff --git a/app/Models/Pertanian/SkorPetani.php b/app/Models/Pertanian/SkorPetani.php
index b1482bc..3d2fb0a 100644
--- a/app/Models/Pertanian/SkorPetani.php
+++ b/app/Models/Pertanian/SkorPetani.php
@@ -4,6 +4,9 @@ namespace App\Models\Pertanian;
 
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+use App\Models\Pertanian\Petani;
 
 class SkorPetani extends Model
 {
@@ -139,4 +142,9 @@ class SkorPetani extends Model
                 );
         });
     }
+
+    public function petani(): BelongsTo
+    {
+        return $this->belongsTo(Petani::class, 'petani_id');
+    }
 }
diff --git a/resources/views/dashboard/demografi-petani.blade.php b/resources/views/dashboard/demografi-petani.blade.php
new file mode 100644
index 0000000..68ed927
--- /dev/null
+++ b/resources/views/dashboard/demografi-petani.blade.php
@@ -0,0 +1,1325 @@
+@extends('layout.main')
+
+@push('styles')
+<link rel="stylesheet" href="{{ asset('assets/vendor/libs/apex-charts/apex-charts.css') }}" />
+<style>
+    .summary-card .card-body {
+        padding: 22px 22px;
+    }
+
+    .summary-card .avatar-lg {
+        width: 48px;
+        height: 48px;
+        flex-shrink: 0;
+    }
+
+    .summary-card .avatar-lg .avatar-initial {
+        width: 48px;
+        height: 48px;
+    }
+
+    .summary-card h4 {
+        font-size: 1.6rem;
+        line-height: 1.2;
+    }
+
+    .summary-card h5 {
+        font-size: 1.05rem;
+    }
+
+    #ageGroupChart .apexcharts-tooltip,
+    #educationChart .apexcharts-tooltip,
+    #landAreaChart .apexcharts-tooltip,
+    #incomeChart .apexcharts-tooltip {
+        background: transparent !important;
+        border: none !important;
+        box-shadow: none !important;
+        overflow: visible !important;
+    }
+</style>
+@endpush
+
+@section('content')
+<div class="container-xxl flex-grow-1 container-p-y">
+    <div class="row g-6">
+        <div class="col-lg-4 col-sm-6">
+            <div class="card card-border-shadow-primary h-100">
+                <div class="card-body">
+                    <div class="d-flex align-items-center gap-4">
+
+                        <div class="avatar avatar-lg">
+                            <span class="avatar-initial rounded bg-label-primary">
+                                <i class="icon-base ti tabler-shovel-pitchforks icon-28px"></i>
+                            </span>
+                        </div>
+
+                        <div>
+                            <div class="d-flex align-items-baseline gap-2">
+                                <h4 class="mb-0">
+                                    {{ $data['total_petani'] }}
+                                </h4>
+
+                                <small class="text-body-secondary">
+                                    petani
+                                </small>
+                            </div>
+
+                            <p class="mb-0 mt-1">
+                                Total Petani
+                            </p>
+
+                            <small class="text-body-secondary">
+                                Petani yang telah terdata
+                            </small>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!--
+            <div class="col-lg-2 col-sm-6">
+                <div class="card card-border-shadow-secondary h-100">
+                <div class="card-body">
+                    <div class="d-flex align-items-center mb-2">
+                    <div class="avatar me-4">
+                        <span class="avatar-initial rounded bg-label-secondary"
+                        ><i class="icon-base ti tabler-gender-male icon-28px"></i
+                        ></span>
+                    </div>
+                    <h4 class="mb-0">{{ $data['petani_lakilaki'] }}</h4>
+                    </div>
+                    <p class="mb-1">Petani Laki-laki</p>
+                    <p class="mb-0">
+                    <span class="text-heading fw-medium me-2">{{ $data['total_petani'] > 0 ? round(($data['petani_lakilaki'] / $data['total_petani']) * 100) : 0 }}%</span>
+                    <small class="text-body-secondary">Dari Total Petani</small>
+                    </p>
+                </div>
+                </div>
+            </div>
+            <div class="col-lg-2 col-sm-6">
+                <div class="card card-border-shadow-danger h-100">
+                <div class="card-body">
+                    <div class="d-flex align-items-center mb-2">
+                    <div class="avatar me-4">
+                        <span class="avatar-initial rounded bg-label-danger"
+                        ><i class="icon-base ti tabler-gender-female icon-28px"></i
+                        ></span>
+                    </div>
+                    <h4 class="mb-0">{{ $data['petani_perempuan'] }}</h4>
+                    </div>
+                    <p class="mb-1">Petani Perempuan</p>
+                    <p class="mb-0">
+                    <span class="text-heading fw-medium me-2">{{ $data['total_petani'] > 0 ? round(($data['petani_perempuan'] / $data['total_petani']) * 100) : 0 }}%</span>
+                    <small class="text-body-secondary">Dari Total Petani</small>
+                    </p>
+                </div>
+                </div>
+            </div>
+        -->
+        <div class="col-lg-4 col-sm-6">
+            <div class="card card-border-shadow-info h-100">
+                <div class="card-body">
+                    <div class="d-flex align-items-center gap-4">
+
+                        <div class="avatar avatar-lg">
+                            <span class="avatar-initial rounded bg-label-info">
+                                <i class="icon-base ti tabler-plant icon-28px"></i>
+                            </span>
+                        </div>
+
+                        <div>
+                            <div class="d-flex align-items-baseline gap-2">
+                                <h4 class="mb-0">
+                                    {{ $data['total_komoditas'] }}
+                                </h4>
+
+                                <small class="text-body-secondary">
+                                    komoditas
+                                </small>
+                            </div>
+
+                            <p class="mb-0 mt-1">
+                                Total Komoditas
+                            </p>
+
+                            <small class="text-body-secondary">
+                                Komoditas utama yang dikelola petani
+                            </small>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-4 col-sm-12">
+            <div class="card card-border-shadow-success h-100">
+                <div class="card-body">
+
+                    <div class="d-flex align-items-center justify-content-between gap-4">
+
+                        <div class="d-flex align-items-center gap-4">
+
+                            <div class="avatar avatar-lg">
+                                <span class="avatar-initial rounded bg-label-success">
+                                    <i class="icon-base ti tabler-chart-area-line icon-28px"></i>
+                                </span>
+                            </div>
+
+                            <div>
+                                <div class="d-flex align-items-baseline gap-2">
+                                    <h4 class="mb-0">
+                                        {{ number_format($data['total_luas_lahan'], 2) }}
+                                    </h4>
+
+                                    <small class="text-body-secondary">
+                                        ha
+                                    </small>
+                                </div>
+
+                                <p class="mb-0 mt-1">
+                                    Total Luas Lahan
+                                </p>
+
+                                <small class="text-body-secondary">
+                                    Seluruh lahan petani
+                                </small>
+                            </div>
+
+                        </div>
+
+                        <div class="border-start ps-4 text-end">
+                            <h5 class="mb-1">
+                                {{ number_format($data['ratarata_luas_lahan'], 2) }} 
+                                <small class="text-body-secondary">
+                                    ha
+                                </small>
+                            </h5>
+
+                            <small class="text-body-secondary">
+                                Rata-rata
+                                <br>
+                                per Petani
+                            </small>
+                        </div>
+
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    <!--/ Card Border Shadow -->
+    <!-- Vehicles overview -->
+        <div class="col-xxl-4 col-lg-6">
+            <div class="card h-100">
+                <div class="card-header d-flex align-items-center justify-content-between">
+                    <div class="card-title mb-0">
+                        <h5 class="m-0 me-2">Gender</h5>
+                        <small class="text-body-secondary">Distribusi petani berdasarkan gender</small>
+                    </div>
+                </div>
+                <div class="card-body">
+                    <div id="genderChart"></div>
+                </div>
+            </div>
+        </div>
+        <div class="col-xxl-4 col-lg-6">
+            <div class="card h-100">
+                <div class="card-header">
+                    <div class="card-title mb-0">
+                        <h5 class="m-0 me-2">Kelompok Umur</h5>
+                        <small class="text-body-secondary">
+                            Distribusi petani berdasarkan kelompok umur
+                        </small>
+                    </div>
+                </div>
+
+                <div class="card-body">
+                    <div id="ageGroupChart"></div>
+                </div>
+            </div>
+        </div>
+        <div class="col-xxl-4 col-lg-6">
+            <div class="card h-100">
+                <div class="card-header">
+                    <div class="card-title mb-0">
+                        <h5 class="m-0 me-2">Tingkat Pendidikan</h5>
+
+                        <small class="text-body-secondary">
+                            Distribusi petani berdasarkan pendidikan terakhir
+                        </small>
+                    </div>
+                </div>
+
+                <div class="card-body">
+                    <div id="educationChart"></div>
+                </div>
+            </div>
+        </div>
+        <div class="col-xxl-4 col-lg-6">
+            <div class="card h-100">
+                <div class="card-header d-flex align-items-center justify-content-between">
+                    <div class="card-title mb-0">
+                        <h5 class="m-0 me-2">
+                            Komoditas Utama yang Dikelola
+                        </h5>
+
+                        <small class="text-body-secondary">
+                            Jumlah petani berdasarkan komoditas utama
+                        </small>
+                    </div>
+                </div>
+
+                <div class="card-body">
+                    <div id="commodityChart"></div>
+                </div>
+            </div>
+        </div>
+        <div class="col-xxl-4 col-lg-6">
+            <div class="card h-100">
+                <div class="card-header">
+                    <div class="card-title mb-0">
+                        <h5 class="m-0 me-2">
+                            Luas Lahan yang Dimiliki
+                        </h5>
+
+                        <small class="text-body-secondary">
+                            Distribusi petani berdasarkan luas lahan garapan
+                        </small>
+                    </div>
+                </div>
+
+                <div class="card-body">
+                    <div id="landAreaChart"></div>
+                </div>
+            </div>
+        </div>
+        <div class="col-xxl-4 col-lg-6">
+            <div class="card h-100">
+                <div class="card-header">
+                    <div class="card-title mb-0">
+                        <h5 class="m-0 me-2">
+                            Rentang Penghasilan per Bulan
+                        </h5>
+
+                        <small class="text-body-secondary">
+                            Distribusi petani berdasarkan penghasilan dari usaha tani per musim
+                        </small>
+                    </div>
+                </div>
+
+                <div class="card-body">
+                    <div id="incomeChart"></div>
+                </div>
+            </div>
+        </div>
+        <div class="col-xxl-12 col-lg-12">
+            <div class="card">
+
+                <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-3">
+                    <div>
+                        <div class="d-flex align-items-center gap-2">
+                            <h5 class="card-title mb-0">
+                                Daftar Petani
+                            </h5>
+
+                            <span
+                                class="badge bg-label-primary"
+                                id="farmerTotalBadge"
+                            >
+                                {{ $daftarPetani->total() }} petani
+                            </span>
+                        </div>
+
+                        <small class="text-body-secondary">
+                            Menampilkan data petani sesuai data yang tersedia
+                        </small>
+                    </div>
+
+                    <div class="d-flex align-items-center gap-2">
+
+                        <div
+                            class="input-group input-group-merge"
+                            style="width: 220px;"
+                        >
+                            <span class="input-group-text">
+                                <i class="icon-base ti tabler-search"></i>
+                            </span>
+
+                            <input
+                                type="text"
+                                id="farmerSearch"
+                                class="form-control"
+                                placeholder="Cari petani..."
+                            >
+                        </div>
+
+                        <button
+                            type="button"
+                            id="resetFarmerFilter"
+                            class="btn btn-label-secondary"
+                        >
+                            Reset
+                        </button>
+
+                    </div>
+                </div>
+
+                <div class="table-responsive">
+                    <table class="table table-hover">
+
+                        <thead>
+                            <tr>
+                                <th>No.</th>
+                                <th>Nama Petani</th>
+                                <th>Gender</th>
+                                <th>Umur</th>
+                                <th>Komoditas</th>
+                                <th>Luas Lahan</th>
+                                <th>Pendidikan</th>
+                                <th>Rentang Pendapatan</th>
+                            </tr>
+                        </thead>
+
+                        <tbody id="farmerTableBody">
+
+                            @foreach ($daftarPetani as $petani)
+
+                                {{-- isi tabel kamu yang sekarang --}}
+
+                            @endforeach
+
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="card-footer d-flex justify-content-between align-items-center">
+                    <small class="text-body-secondary" id="farmerTableInfo">
+                        Menampilkan
+                        {{ $daftarPetani->firstItem() ?? 0 }}
+                        -
+                        {{ $daftarPetani->lastItem() ?? 0 }}
+                        dari
+                        {{ $daftarPetani->total() }}
+                        petani
+                    </small>
+
+                    <div id="farmerPagination">
+                        {{ $daftarPetani
+                            ->onEachSide(1)
+                            ->links('pagination::bootstrap-5')
+                        }}
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
+
+@push('scripts')
+
+<script src="{{ asset('assets/vendor/libs/apex-charts/apexcharts.js') }}"></script>
+
+<script>
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function () {
+    const headingColor = config.colors.headingColor;
+    const legendColor = config.colors.bodyColor;
+    const fontFamily = config.fontFamily;
+
+    const farmerDataUrl = @json(route('dashboard.demografi-petani.data'));
+
+    let activeFilters = {
+        gender: null,
+        umur: null,
+        pendidikan: null,
+        komoditas: null,
+        luas_lahan: null,
+        penghasilan: null
+    };
+
+    let searchTimer = null;
+
+    function escapeHtml(value) {
+        if (value === null || value === undefined) {
+            return '';
+        }
+        return String(value)
+            .replaceAll('&', '&amp;')
+            .replaceAll('<', '&lt;')
+            .replaceAll('>', '&gt;')
+            .replaceAll('"', '&quot;')
+            .replaceAll("'", '&#039;');
+    }
+
+    function formatLuas(value) {
+        const number = Number(value || 0);
+        if (number <= 0) {
+            return '-';
+        }
+        return number.toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' ha';
+    }
+
+    async function loadFarmerTable(page = 1) {
+        const searchInput = document.querySelector('#farmerSearch');
+        const search = searchInput ? searchInput.value.trim() : '';
+        const params = new URLSearchParams();
+
+        params.set('page', page);
+
+        Object.entries(activeFilters).forEach(([key, value]) => {
+            if (value !== null && value !== undefined && value !== '') {
+                params.set(key, value);
+            }
+        });
+
+        if (search) {
+            params.set('search', search);
+        }
+
+        const tableBody = document.querySelector('#farmerTableBody');
+
+        if (tableBody) {
+            tableBody.innerHTML = `
+                <tr>
+                    <td colspan="8" class="text-center py-5">
+                        <div class="spinner-border spinner-border-sm text-primary me-2" role="status"></div>
+                        <span class="text-body-secondary">Memuat data petani...</span>
+                    </td>
+                </tr>
+            `;
+        }
+
+        try {
+            const response = await fetch(`${farmerDataUrl}?${params.toString()}`, {
+                method: 'GET',
+                headers: {
+                    'Accept': 'application/json',
+                    'X-Requested-With': 'XMLHttpRequest'
+                }
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP Error ${response.status}`);
+            }
+
+            const result = await response.json();
+            renderFarmerTable(result);
+        } catch (error) {
+            console.error('Gagal memuat tabel petani:', error);
+        }
+    }
+
+    function renderFarmerTable(result) {
+        const tbody = document.querySelector('#farmerTableBody');
+
+        if (!tbody) {
+            return;
+        }
+
+        const rows = result.data || [];
+
+        if (rows.length === 0) {
+            tbody.innerHTML = `
+                <tr>
+                    <td colspan="8" class="text-center py-5 text-body-secondary">
+                        Tidak ada data petani yang sesuai dengan filter.
+                    </td>
+                </tr>
+            `;
+            updateFarmerPagination(result.pagination);
+            return;
+        }
+
+        tbody.innerHTML = rows.map((petani, index) => {
+            const rowNumber = ((result.pagination.current_page - 1) * result.pagination.per_page) + index + 1;
+            const genderBadge = Number(petani.jenis_kelamin) === 1
+                ? `<span class="badge bg-label-info">Laki-laki</span>`
+                : `<span class="badge" style="background-color:#ffe8f1 !important; color:#ff5598 !important;">Perempuan</span>`;
+            const umur = (petani.umur !== null && petani.umur !== undefined) ? `${petani.umur} tahun` : '-';
+
+            return `
+                <tr>
+                    <td><span class="text-heading fw-medium">${rowNumber}</span></td>
+                    <td><span class="text-heading fw-medium">${escapeHtml(petani.nama)}</span></td>
+                    <td>${genderBadge}</td>
+                    <td>${escapeHtml(umur)}</td>
+                    <td>${escapeHtml(petani.komoditas || '-')}</td>
+                    <td>${formatLuas(petani.luas_lahan)}</td>
+                    <td>${escapeHtml(petani.pendidikan || '-')}</td>
+                    <td>${escapeHtml(petani.rentang_penghasilan || '-')}</td>
+                </tr>
+            `;
+        }).join('');
+
+        updateFarmerPagination(result.pagination);
+    }
+
+    function updateFarmerPagination(pagination) {
+        if (!pagination) {
+            return;
+        }
+
+        const totalBadge = document.querySelector('#farmerTotalBadge');
+        if (totalBadge) {
+            totalBadge.textContent = `${pagination.total} petani`;
+        }
+
+        const tableInfo = document.querySelector('#farmerTableInfo');
+        if (tableInfo) {
+            tableInfo.textContent = `Menampilkan ${pagination.from ?? 0} - ${pagination.to ?? 0} dari ${pagination.total ?? 0} petani`;
+        }
+
+        const paginationEl = document.querySelector('#farmerPagination');
+        if (!paginationEl) {
+            return;
+        }
+
+        if (pagination.last_page <= 1) {
+            paginationEl.innerHTML = '';
+            return;
+        }
+
+        let html = `<nav><ul class="pagination pagination-sm mb-0">`;
+
+        html += `
+            <li class="page-item ${pagination.current_page === 1 ? 'disabled' : ''}">
+                <button type="button" class="page-link farmer-page" data-page="${pagination.current_page - 1}">
+                    <i class="icon-base ti tabler-chevron-left"></i>
+                </button>
+            </li>
+        `;
+
+        const currentPage = pagination.current_page;
+        const lastPage = pagination.last_page;
+        const startPage = Math.max(1, currentPage - 2);
+        const endPage = Math.min(lastPage, currentPage + 2);
+
+        if (startPage > 1) {
+            html += `
+                <li class="page-item">
+                    <button type="button" class="page-link farmer-page" data-page="1">1</button>
+                </li>
+            `;
+
+            if (startPage > 2) {
+                html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
+            }
+        }
+
+        for (let page = startPage; page <= endPage; page++) {
+            html += `
+                <li class="page-item ${page === currentPage ? 'active' : ''}">
+                    <button type="button" class="page-link farmer-page" data-page="${page}">${page}</button>
+                </li>
+            `;
+        }
+
+        if (endPage < lastPage) {
+            if (endPage < lastPage - 1) {
+                html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
+            }
+
+            html += `
+                <li class="page-item">
+                    <button type="button" class="page-link farmer-page" data-page="${lastPage}">${lastPage}</button>
+                </li>
+            `;
+        }
+
+        html += `
+            <li class="page-item ${currentPage === lastPage ? 'disabled' : ''}">
+                <button type="button" class="page-link farmer-page" data-page="${currentPage + 1}">
+                    <i class="icon-base ti tabler-chevron-right"></i>
+                </button>
+            </li>
+        `;
+
+        html += `</ul></nav>`;
+
+        paginationEl.innerHTML = html;
+    }
+
+    function applyFarmerFilter(filter, value) {
+        if (activeFilters[filter] !== null && String(activeFilters[filter]) === String(value)) {
+            activeFilters[filter] = null;
+        } else {
+            activeFilters[filter] = value;
+        }
+
+        loadFarmerTable(1);
+    }
+
+    function resetFarmerFilter() {
+        activeFilters = {
+            gender: null,
+            umur: null,
+            pendidikan: null,
+            komoditas: null,
+            luas_lahan: null,
+            penghasilan: null
+        };
+
+        const searchInput = document.querySelector('#farmerSearch');
+        if (searchInput) {
+            searchInput.value = '';
+        }
+
+        loadFarmerTable(1);
+    }
+
+    document.addEventListener('input', function (event) {
+        if (event.target.id !== 'farmerSearch') {
+            return;
+        }
+        clearTimeout(searchTimer);
+        searchTimer = setTimeout(function () {
+            loadFarmerTable(1);
+        }, 350);
+    });
+
+    document.addEventListener('click', function (event) {
+        const button = event.target.closest('.farmer-page');
+        if (!button) {
+            return;
+        }
+        if (button.closest('.page-item.disabled')) {
+            return;
+        }
+        const page = Number(button.dataset.page);
+        if (!page || page < 1) {
+            return;
+        }
+        loadFarmerTable(page);
+    });
+
+    document.addEventListener('click', function (event) {
+        const button = event.target.closest('#resetFarmerFilter');
+        if (!button) {
+            return;
+        }
+        resetFarmerFilter();
+    });
+
+    const genderChartEl = document.querySelector('#genderChart');
+    const lakiLaki = Number(@json($data['petani_lakilaki'] ?? 0));
+    const perempuan = Number(@json($data['petani_perempuan'] ?? 0));
+    const totalPetani = lakiLaki + perempuan;
+
+    if (genderChartEl) {
+        const genderChartConfig = {
+            chart: {
+                height: 365,
+                parentHeightOffset: 0,
+                type: 'donut',
+                toolbar: { show: false },
+                events: {
+                    dataPointSelection: function (event, chartContext, options) {
+                        const index = options.dataPointIndex;
+                        if (index < 0) {
+                            return;
+                        }
+                        const values = [1, 0];
+                        applyFarmerFilter('gender', values[index]);
+                    }
+                }
+            },
+            labels: ['Laki-laki', 'Perempuan'],
+            series: [lakiLaki, perempuan],
+            colors: [config.colors.info, '#ff5598'],
+            stroke: { width: 0 },
+            dataLabels: { enabled: false },
+            legend: {
+                show: true,
+                position: 'bottom',
+                offsetY: 10,
+                markers: { size: 4, strokeWidth: 0 },
+                itemMargin: { horizontal: 15, vertical: 5 },
+                fontSize: '13px',
+                fontFamily: fontFamily,
+                fontWeight: 400,
+                labels: { colors: legendColor, useSeriesColors: false },
+                formatter: function (seriesName, options) {
+                    const value = options.w.globals.series[options.seriesIndex];
+                    const percentage = totalPetani > 0 ? ((value / totalPetani) * 100).toFixed(1) : '0.0';
+                    return `${seriesName}: ${value} (${percentage}%)`;
+                }
+            },
+            tooltip: {
+                theme: 'dark',
+                y: {
+                    formatter: function (value) {
+                        const percentage = totalPetani > 0 ? ((value / totalPetani) * 100).toFixed(1) : '0.0';
+                        return `${value} petani (${percentage}%)`;
+                    }
+                }
+            },
+            grid: { padding: { top: 15 } },
+            plotOptions: {
+                pie: {
+                    donut: {
+                        size: '75%',
+                        labels: {
+                            show: true,
+                            value: {
+                                fontSize: '38px',
+                                fontFamily: fontFamily,
+                                color: headingColor,
+                                fontWeight: 500,
+                                offsetY: -20,
+                                formatter: function (value) {
+                                    return parseInt(value);
+                                }
+                            },
+                            name: { offsetY: 30, fontFamily: fontFamily },
+                            total: {
+                                show: true,
+                                showAlways: true,
+                                fontSize: '15px',
+                                fontFamily: fontFamily,
+                                color: legendColor,
+                                label: 'Total Petani',
+                                formatter: function () {
+                                    return totalPetani;
+                                }
+                            }
+                        }
+                    }
+                }
+            },
+            responsive: [
+                {
+                    breakpoint: 1025,
+                    options: {
+                        chart: { height: 380 }
+                    }
+                }
+            ]
+        };
+
+        const genderChart = new ApexCharts(genderChartEl, genderChartConfig);
+        genderChart.render();
+    }
+
+    const ageGroupChartEl = document.querySelector('#ageGroupChart');
+
+    if (ageGroupChartEl) {
+        const ageFilterValues = ['kurang_30', '30_39', '40_49', '50_59', '60_keatas'];
+
+        const ageGroupChartConfig = {
+            chart: {
+                height: 320,
+                type: 'bar',
+                parentHeightOffset: 0,
+                toolbar: { show: false },
+                events: {
+                    dataPointSelection: function (event, chartContext, options) {
+                        const index = options.dataPointIndex;
+                        if (index < 0) {
+                            return;
+                        }
+                        applyFarmerFilter('umur', ageFilterValues[index]);
+                    }
+                }
+            },
+            series: [
+                {
+                    name: 'Petani',
+                    data: [
+                        Number(@json($data['kelompok_umur']['kurang_30'] ?? 0)),
+                        Number(@json($data['kelompok_umur']['30_39'] ?? 0)),
+                        Number(@json($data['kelompok_umur']['40_49'] ?? 0)),
+                        Number(@json($data['kelompok_umur']['50_59'] ?? 0)),
+                        Number(@json($data['kelompok_umur']['60_keatas'] ?? 0))
+                    ]
+                }
+            ],
+            colors: [config.colors.primary],
+            plotOptions: {
+                bar: {
+                    borderRadius: 4,
+                    columnWidth: '45%',
+                    distributed: false,
+                    dataLabels: { position: 'top' }
+                }
+            },
+            dataLabels: {
+                enabled: true,
+                offsetY: -20,
+                style: {
+                    fontSize: '13px',
+                    fontFamily: fontFamily,
+                    fontWeight: 500,
+                    colors: [headingColor]
+                },
+                formatter: function (value) {
+                    return value;
+                }
+            },
+            xaxis: {
+                categories: ['< 30', '30 - 39', '40 - 49', '50 - 59', '≥ 60'],
+                labels: {
+                    style: { colors: legendColor, fontSize: '12px', fontFamily: fontFamily },
+                    formatter: function (value) {
+                        return value + ' tahun';
+                    }
+                },
+                axisBorder: { show: false },
+                axisTicks: { show: false }
+            },
+            yaxis: {
+                min: 0,
+                labels: {
+                    style: { colors: legendColor, fontSize: '12px', fontFamily: fontFamily },
+                    formatter: function (value) {
+                        return Math.floor(value);
+                    }
+                },
+                title: {
+                    text: 'Petani',
+                    style: { color: legendColor, fontSize: '12px', fontFamily: fontFamily, fontWeight: 400 }
+                }
+            },
+            grid: {
+                borderColor: config.colors.borderColor,
+                strokeDashArray: 5,
+                xaxis: { lines: { show: false } },
+                padding: { top: 20 }
+            },
+            legend: { show: false },
+            tooltip: {
+                custom: function ({ series, seriesIndex, dataPointIndex, w }) {
+                    const value = series[seriesIndex][dataPointIndex];
+                    const label = w.globals.labels[dataPointIndex];
+                    return `
+                        <div style="background:${config.colors.primary}; color:#fff; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);">
+                            ${label} tahun: <strong>${value} petani</strong>
+                        </div>
+                    `;
+                }
+            }
+        };
+
+        new ApexCharts(ageGroupChartEl, ageGroupChartConfig).render();
+    }
+
+    const educationChartEl = document.querySelector('#educationChart');
+
+    if (educationChartEl) {
+        const educationData = [
+            Number(@json($data['pendidikan']['tidak_sekolah'] ?? 0)),
+            Number(@json($data['pendidikan']['sd'] ?? 0)),
+            Number(@json($data['pendidikan']['smp'] ?? 0)),
+            Number(@json($data['pendidikan']['sma'] ?? 0)),
+            Number(@json($data['pendidikan']['diploma'] ?? 0)),
+            Number(@json($data['pendidikan']['s1_keatas'] ?? 0))
+        ];
+
+        const educationFilters = ['tidak_sekolah', 'sd', 'smp', 'sma', 'diploma', 's1_keatas'];
+        const totalPendidikan = educationData.reduce((total, value) => total + value, 0);
+
+        const educationChartConfig = {
+            chart: {
+                height: 330,
+                type: 'bar',
+                parentHeightOffset: 0,
+                toolbar: { show: false },
+                events: {
+                    dataPointSelection: function (event, chartContext, options) {
+                        const index = options.dataPointIndex;
+                        if (index < 0) {
+                            return;
+                        }
+                        applyFarmerFilter('pendidikan', educationFilters[index]);
+                    }
+                }
+            },
+            series: [{ name: 'Petani', data: educationData }],
+            colors: [config.colors.success],
+            plotOptions: {
+                bar: {
+                    horizontal: true,
+                    borderRadius: 4,
+                    barHeight: '55%',
+                    dataLabels: { position: 'top' }
+                }
+            },
+            dataLabels: {
+                enabled: true,
+                textAnchor: 'start',
+                offsetX: 6,
+                style: {
+                    fontSize: '12px',
+                    fontFamily: fontFamily,
+                    fontWeight: 500,
+                    colors: [headingColor]
+                },
+                formatter: function (value) {
+                    const percentage = totalPendidikan > 0 ? ((value / totalPendidikan) * 100).toFixed(1) : '0.0';
+                    return `${value} (${percentage}%)`;
+                }
+            },
+            xaxis: {
+                categories: ['Tidak Sekolah', 'SD / Sederajat', 'SMP / Sederajat', 'SMA / Sederajat', 'Diploma', 'S1 ke atas'],
+                labels: {
+                    style: { colors: legendColor, fontSize: '12px', fontFamily: fontFamily },
+                    formatter: function (value) {
+                        return Math.floor(value);
+                    }
+                },
+                axisBorder: { show: false },
+                axisTicks: { show: false },
+                title: {
+                    text: 'Petani',
+                    style: { color: legendColor, fontSize: '12px', fontFamily: fontFamily, fontWeight: 400 }
+                }
+            },
+            yaxis: {
+                labels: { style: { colors: legendColor, fontSize: '12px', fontFamily: fontFamily } }
+            },
+            grid: {
+                borderColor: config.colors.borderColor,
+                strokeDashArray: 5,
+                xaxis: { lines: { show: true } },
+                yaxis: { lines: { show: false } },
+                padding: { right: 55 }
+            },
+            legend: { show: false },
+            tooltip: {
+                custom: function ({ series, seriesIndex, dataPointIndex, w }) {
+                    const value = series[seriesIndex][dataPointIndex];
+                    const label = w.globals.labels[dataPointIndex];
+                    const percentage = totalPendidikan > 0 ? ((value / totalPendidikan) * 100).toFixed(1) : '0.0';
+                    return `
+                        <div style="background:${config.colors.success}; color:#fff; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);">
+                            ${label}: <strong>${value} petani (${percentage}%)</strong>
+                        </div>
+                    `;
+                }
+            }
+        };
+
+        new ApexCharts(educationChartEl, educationChartConfig).render();
+    }
+
+    const commodityChartEl = document.querySelector('#commodityChart');
+
+    if (commodityChartEl) {
+        const commodityIds = @json($data['komoditas_utama']['ids'] ?? []);
+        const commodityLabels = @json($data['komoditas_utama']['labels'] ?? []);
+        const commoditySeries = @json($data['komoditas_utama']['series'] ?? []);
+        const totalCommodityFarmers = commoditySeries.reduce((total, value) => total + Number(value), 0);
+
+        const commodityChartConfig = {
+            chart: {
+                height: 330,
+                type: 'donut',
+                parentHeightOffset: 0,
+                toolbar: { show: false },
+                events: {
+                    dataPointSelection: function (event, chartContext, options) {
+                        const index = options.dataPointIndex;
+                        if (index < 0) {
+                            return;
+                        }
+                        applyFarmerFilter('komoditas', commodityIds[index]);
+                    }
+                }
+            },
+            labels: commodityLabels,
+            series: commoditySeries.map(Number),
+            colors: [
+                config.colors.primary,
+                config.colors.warning,
+                config.colors.success,
+                config.colors.info,
+                config.colors.danger,
+                config.colors.secondary
+            ],
+            stroke: { width: 0 },
+            dataLabels: { enabled: false },
+            legend: {
+                show: true,
+                position: 'right',
+                horizontalAlign: 'center',
+                markers: { size: 5, strokeWidth: 0 },
+                itemMargin: { horizontal: 8, vertical: 7 },
+                fontSize: '12px',
+                fontFamily: fontFamily,
+                fontWeight: 400,
+                labels: { colors: legendColor, useSeriesColors: false },
+                formatter: function (seriesName, options) {
+                    const value = options.w.globals.series[options.seriesIndex];
+                    const percentage = totalCommodityFarmers > 0 ? ((value / totalCommodityFarmers) * 100).toFixed(1) : '0.0';
+                    return `${seriesName}: ${value} (${percentage}%)`;
+                }
+            },
+            tooltip: {
+                custom: function ({ series, seriesIndex, w }) {
+                    const value = series[seriesIndex];
+                    const label = w.globals.labels[seriesIndex];
+                    const percentage = totalCommodityFarmers > 0 ? ((value / totalCommodityFarmers) * 100).toFixed(1) : '0.0';
+                    const color = w.globals.colors[seriesIndex];
+                    return `
+                        <div style="background:${color}; color:#fff; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);">
+                            ${label}: <strong>${value} petani (${percentage}%)</strong>
+                        </div>
+                    `;
+                }
+            },
+            plotOptions: {
+                pie: {
+                    donut: {
+                        size: '68%',
+                        labels: {
+                            show: true,
+                            value: {
+                                fontSize: '30px',
+                                fontFamily: fontFamily,
+                                color: headingColor,
+                                fontWeight: 500,
+                                offsetY: -15,
+                                formatter: function (value) {
+                                    return parseInt(value);
+                                }
+                            },
+                            name: { offsetY: 25, fontFamily: fontFamily },
+                            total: {
+                                show: true,
+                                showAlways: true,
+                                fontSize: '13px',
+                                fontFamily: fontFamily,
+                                color: legendColor,
+                                label: 'Petani',
+                                formatter: function () {
+                                    return totalCommodityFarmers;
+                                }
+                            }
+                        }
+                    }
+                }
+            },
+            responsive: [
+                {
+                    breakpoint: 1400,
+                    options: {
+                        chart: { height: 350 },
+                        legend: { position: 'bottom' }
+                    }
+                },
+                {
+                    breakpoint: 576,
+                    options: {
+                        chart: { height: 330 },
+                        legend: { position: 'bottom' }
+                    }
+                }
+            ]
+        };
+
+        new ApexCharts(commodityChartEl, commodityChartConfig).render();
+    }
+
+    const landAreaChartEl = document.querySelector('#landAreaChart');
+
+    if (landAreaChartEl) {
+        const landAreaData = [
+            Number(@json($data['luas_lahan']['kurang_05'] ?? 0)),
+            Number(@json($data['luas_lahan']['05_1'] ?? 0)),
+            Number(@json($data['luas_lahan']['1_2'] ?? 0)),
+            Number(@json($data['luas_lahan']['lebih_2'] ?? 0))
+        ];
+
+        const landAreaFilters = ['kurang_05', '05_1', '1_2', 'lebih_2'];
+        const totalLandFarmers = landAreaData.reduce((total, value) => total + value, 0);
+
+        const landAreaChartConfig = {
+            chart: {
+                height: 330,
+                type: 'bar',
+                parentHeightOffset: 0,
+                toolbar: { show: false },
+                events: {
+                    dataPointSelection: function (event, chartContext, options) {
+                        const index = options.dataPointIndex;
+                        if (index < 0) {
+                            return;
+                        }
+                        applyFarmerFilter('luas_lahan', landAreaFilters[index]);
+                    }
+                }
+            },
+            series: [{ name: 'Petani', data: landAreaData }],
+            colors: [config.colors.warning],
+            plotOptions: {
+                bar: {
+                    horizontal: true,
+                    borderRadius: 4,
+                    barHeight: '50%',
+                    dataLabels: { position: 'top' }
+                }
+            },
+            dataLabels: {
+                enabled: true,
+                textAnchor: 'start',
+                offsetX: 6,
+                style: {
+                    fontSize: '12px',
+                    fontFamily: fontFamily,
+                    fontWeight: 500,
+                    colors: [headingColor]
+                },
+                formatter: function (value) {
+                    const percentage = totalLandFarmers > 0 ? ((value / totalLandFarmers) * 100).toFixed(1) : '0.0';
+                    return `${value} (${percentage}%)`;
+                }
+            },
+            xaxis: {
+                categories: ['< 0,5 ha', '0,5 - 1 ha', '1 - 2 ha', '> 2 ha'],
+                labels: {
+                    style: { colors: legendColor, fontSize: '12px', fontFamily: fontFamily },
+                    formatter: function (value) {
+                        return Math.floor(value);
+                    }
+                },
+                axisBorder: { show: false },
+                axisTicks: { show: false },
+                title: {
+                    text: 'Petani',
+                    style: { color: legendColor, fontSize: '12px', fontFamily: fontFamily, fontWeight: 400 }
+                }
+            },
+            yaxis: {
+                labels: { style: { colors: legendColor, fontSize: '12px', fontFamily: fontFamily } }
+            },
+            grid: {
+                borderColor: config.colors.borderColor,
+                strokeDashArray: 5,
+                xaxis: { lines: { show: true } },
+                yaxis: { lines: { show: false } },
+                padding: { right: 55 }
+            },
+            legend: { show: false },
+            tooltip: {
+                custom: function ({ series, seriesIndex, dataPointIndex, w }) {
+                    const value = series[seriesIndex][dataPointIndex];
+                    const label = w.globals.labels[dataPointIndex];
+                    const percentage = totalLandFarmers > 0 ? ((value / totalLandFarmers) * 100).toFixed(1) : '0.0';
+                    return `
+                        <div style="background:${config.colors.warning}; color:#fff; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);">
+                            ${label}: <strong>${value} petani (${percentage}%)</strong>
+                        </div>
+                    `;
+                }
+            }
+        };
+
+        new ApexCharts(landAreaChartEl, landAreaChartConfig).render();
+    }
+
+    const incomeChartEl = document.querySelector('#incomeChart');
+
+    if (incomeChartEl) {
+        const incomeData = [
+            Number(@json($data['penghasilan']['kurang_1'] ?? 0)),
+            Number(@json($data['penghasilan']['1_3'] ?? 0)),
+            Number(@json($data['penghasilan']['3_5'] ?? 0)),
+            Number(@json($data['penghasilan']['5_10'] ?? 0)),
+            Number(@json($data['penghasilan']['lebih_10'] ?? 0))
+        ];
+
+        const incomeFilters = ['kurang_1', '1_3', '3_5', '5_10', 'lebih_10'];
+        const totalIncomeFarmers = incomeData.reduce((total, value) => total + value, 0);
+
+        const incomeChartConfig = {
+            chart: {
+                height: 330,
+                type: 'bar',
+                parentHeightOffset: 0,
+                toolbar: { show: false },
+                events: {
+                    dataPointSelection: function (event, chartContext, options) {
+                        const index = options.dataPointIndex;
+                        if (index < 0) {
+                            return;
+                        }
+                        applyFarmerFilter('penghasilan', incomeFilters[index]);
+                    }
+                }
+            },
+            series: [{ name: 'Petani', data: incomeData }],
+            colors: [config.colors.info],
+            plotOptions: {
+                bar: {
+                    horizontal: true,
+                    borderRadius: 4,
+                    barHeight: '50%',
+                    dataLabels: { position: 'top' }
+                }
+            },
+            dataLabels: {
+                enabled: true,
+                textAnchor: 'start',
+                offsetX: 6,
+                style: {
+                    fontSize: '12px',
+                    fontFamily: fontFamily,
+                    fontWeight: 500,
+                    colors: [headingColor]
+                },
+                formatter: function (value) {
+                    const percentage = totalIncomeFarmers > 0 ? ((value / totalIncomeFarmers) * 100).toFixed(1) : '0.0';
+                    return `${value} (${percentage}%)`;
+                }
+            },
+            xaxis: {
+                categories: ['< Rp1 juta', 'Rp1 - 3 juta', 'Rp3 - 5 juta', 'Rp5 - 10 juta', '> Rp10 juta'],
+                labels: {
+                    style: { colors: legendColor, fontSize: '12px', fontFamily: fontFamily },
+                    formatter: function (value) {
+                        return Math.floor(value);
+                    }
+                },
+                axisBorder: { show: false },
+                axisTicks: { show: false },
+                title: {
+                    text: 'Petani',
+                    style: { color: legendColor, fontSize: '12px', fontFamily: fontFamily, fontWeight: 400 }
+                }
+            },
+            yaxis: {
+                labels: { style: { colors: legendColor, fontSize: '12px', fontFamily: fontFamily } }
+            },
+            grid: {
+                borderColor: config.colors.borderColor,
+                strokeDashArray: 5,
+                xaxis: { lines: { show: true } },
+                yaxis: { lines: { show: false } },
+                padding: { right: 55 }
+            },
+            legend: { show: false },
+            tooltip: {
+                custom: function ({ series, seriesIndex, dataPointIndex, w }) {
+                    const value = series[seriesIndex][dataPointIndex];
+                    const label = w.globals.labels[dataPointIndex];
+                    const percentage = totalIncomeFarmers > 0 ? ((value / totalIncomeFarmers) * 100).toFixed(1) : '0.0';
+                    return `
+                        <div style="background:${config.colors.info}; color:#fff; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);">
+                            ${label}: <strong>${value} petani (${percentage}%)</strong>
+                        </div>
+                    `;
+                }
+            }
+        };
+
+        new ApexCharts(incomeChartEl, incomeChartConfig).render();
+    }
+
+    loadFarmerTable(1);
+});
+</script>
+
+@endpush
\ No newline at end of file
diff --git a/resources/views/dashboard/indeks-petani.blade.php b/resources/views/dashboard/indeks-petani.blade.php
new file mode 100644
index 0000000..36e4688
--- /dev/null
+++ b/resources/views/dashboard/indeks-petani.blade.php
@@ -0,0 +1,816 @@
+@extends('layout.main')
+
+@push('style')
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+    crossorigin=""/>
+@endpush
+
+@section('content')
+@php
+$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',
+        ],
+    ];
+
+$colors = collect($segments)
+    ->pluck('color')
+    ->map(fn($c) => "var(--bs-{$c})")
+    ->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();
+@endphp
+<div class="container-xxl flex-grow-1 container-p-y">
+    <div class="row g-6">
+        <div class="col-lg-3 col-sm-6">
+            <div class="card card-border-shadow-primary h-100">
+                <div class="card-body">
+                    <div class="d-flex align-items-center mb-2">
+                        <div class="avatar me-4">
+                            <span class="avatar-initial rounded bg-label-primary">
+                                <i class="icon-base ti tabler-user-check icon-28px"></i>
+                            </span>
+                        </div>
+                        <h4 class="mb-0">{{ $countPetani }}</h4>
+                    </div>
+                    <p class="mb-1">Total Petani</p>
+                    <p class="mb-0">
+                        <span class="text-heading fw-medium me-2">{{ $countKomoditas }}</span>
+                        <small class="text-body-secondary">komoditas utama</small>
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-3 col-sm-6">
+            <div class="card card-border-shadow-warning h-100">
+                <div class="card-body">
+                    <div class="d-flex align-items-center mb-2">
+                        <div class="avatar me-4">
+                            <span class="avatar-initial rounded bg-label-warning">
+                                <i class="icon-base ti tabler-trees icon-28px"></i>
+                            </span>
+                        </div>
+                        <h4 class="mb-0">{{ number_format($sumLahan, 2, ',', '.') }} ha</h4>
+                    </div>
+                    <p class="mb-1">Total Luas Lahan</p>
+                    <p class="mb-0">
+                        <small class="text-body-warning">rata-rata</small>
+                        <span class="text-heading fw-medium">{{ number_format($avgLahan, 2, ',', '.') }}</span>
+                        <small class="text-body-warning">ha/petani</small>
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-3 col-sm-6">
+            <div class="card card-border-shadow-info h-100">
+                <div class="card-body">
+                    <div class="d-flex align-items-center mb-2">
+                        <div class="avatar me-4">
+                            <span class="avatar-initial rounded bg-label-info">
+                                <i class="icon-base ti tabler-star icon-28px"></i>
+                            </span>
+                        </div>
+                        <h4 class="mb-0">{{ number_format($avgSkor, 2, ',', '.') }}</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>
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-3 col-sm-6">
+            <div class="card card-border-shadow-success h-100">
+                <div class="card-body">
+                    <div class="d-flex align-items-center mb-2">
+                        <div class="avatar me-4">
+                            <span class="avatar-initial rounded bg-label-success">
+                                <i class="icon-base ti tabler-map-2 icon-28px"></i>
+                            </span>
+                        </div>
+                        <h4 class="mb-0">{{ $countDesa }}</h4>
+                    </div>
+                    <p class="mb-1">Jumlah Desa Sasaran</p>
+                    <p class="mb-0">
+                        <span class="text-heading fw-medium me-2">{{ $countKecamatan }}</span>
+                        <small class="text-body-secondary">kecamatan sasaran</small>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row g-6 py-4">
+        <div class="col-lg-6 col-sm-12">
+            <div class="card card-border-shadow-primary h-100">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <div class="card-title mb-0">
+                        <h5 class="m-0 me-2">Distribusi Segmentasi Petani</h5>
+                        <p class="card-subtitle">untuk semua komoditas</p>
+                    </div>
+                </div>
+                <div class="card-body">
+                    <div class="d-flex justify-content-start align-items-start mb-3">
+                        <div id="chart-segmentasi-petani"></div>
+                        <table class="table card-table table-border-top-0 table-border-bottom-0 data-table">
+                            <thead>
+                                <tr>
+                                    <th></th>
+                                    <th class="text-end pe-0">Petani</th>
+                                    <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>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-sm-12">
+            <div class="card card-border-shadow-secondary h-100">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <div class="card-title mb-0">
+                        <h5 class="m-0 me-2">Distribusi Segmentasi Petani</h5>
+                        <p class="card-subtitle">per komoditas</p>
+                    </div>
+                </div>
+                <div class="card-body">
+                    <div id="chart-segmentasi-petani-komoditas"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row g-6 py-4">
+        <div class="col-lg-6 col-sm-12">
+            <div class="card card-border-shadow-info h-100">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <div class="card-title mb-0">
+                        <h5 class="m-0 me-2">Rata-rata Dimensi Kesiapan Adopsi</h5>
+                        <p class="card-subtitle">untuk semua komoditas</p>
+                    </div>
+                </div>
+                <div class="card-body">
+                    <div id="chart-dimensi"></div>
+                    <div class="d-flex flex-wrap gap-3 mt-3 small justify-content-center">
+                        <div>
+                            <span class="badge bg-label-primary">D1</span> Sistem &amp; Praktik Budidaya
+                        </div>
+                        <div>
+                            <span class="badge bg-label-primary">D2</span> Sosial Ekonomi Rumah Tangga
+                        </div>
+                        <div>
+                            <span class="badge bg-label-primary">D3</span> Rantai Nilai &amp; Akses Pasar
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-sm-12">
+            <div class="card card-border-shadow-warning h-100">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <div class="card-title mb-0">
+                        <h5 class="m-0 me-2">Rata-rata Komponen Kesiapan Adopsi</h5>
+                        <p class="card-subtitle">untuk semua komoditas</p>
+                    </div>
+                </div>
+                <div class="card-body">
+                    <div id="chart-komponen"></div>
+                    <div class="d-flex flex-wrap gap-3 mt-3 small justify-content-center">
+                        <div>
+                            <span class="badge bg-label-primary">K1</span> Motivasi &amp; Kapasitas Adopsi
+                        </div>
+                        <div>
+                            <span class="badge bg-label-primary">K2</span> Kondisi Ekonomi Rumah Tangga
+                        </div>
+                        <div>
+                            <span class="badge bg-label-primary">K3</span> Praktik Budidaya &amp; GAP
+                        </div>
+                        <div>
+                            <span class="badge bg-label-primary">K4</span> Keterlibatan Kelembagaan
+                        </div>
+                        <div>
+                            <span class="badge bg-label-primary">K5</span> Akses &amp; Kebebasan Keuangan
+                        </div>
+                        <div>
+                            <span class="badge bg-label-primary">K6</span> Rantai Nilai &amp; Akses Pasar
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row g-6 py-4">
+        <div class="col-lg-6 col-sm-12">
+            <div class="card card-border-shadow-danger h-100">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <div class="card-title mb-0">
+                        <h5 class="m-0 me-2">Sebaran Segmentasi Petani</h5>
+                        <p class="card-subtitle">berdasarkan sebaran wilayah untuk semua komoditas</p>
+                    </div>
+                </div>
+                <div class="card-body">
+                    <div id="map-sebaran-petani" style="height: 380px;"></div>
+                    <span class="small text-muted">*klik pada desa untuk menampilkan detail informasi dan menyaring daftar petani</span>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-sm-12">
+            <div class="card card-border-shadow-success h-100">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <div class="card-title mb-0">
+                        <h5 class="m-0 me-2">Distribusi Segmentasi Petani</h5>
+                        <p class="card-subtitle">berdasarkan sebaran wilayah untuk semua komoditas</p>
+                    </div>
+                </div>
+                <div class="card-body">
+                    <table id="table-desa" class="table card-table table-border-top-0 table-border-bottom-0">
+                        <thead>
+                            <tr>
+                                <th class="pe-0">Desa/Kelurahan</th>
+                                <th class="text-end pe-0">Petani</th>
+                                <th class="pe-0">Segmen Rata-rata</th>
+                                <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>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row g-6 py-4">
+        <div class="col-lg-12 col-sm-12">
+            <div class="card card-border-shadow-primary h-100">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <div class="card-title mb-0">
+                        <h5 class="m-0 me-2">Daftar Petani</h5>
+                        <p class="card-subtitle">untuk semua komoditas</p>
+                    </div>
+                </div>
+                <div class="card-body">
+                    <table id="table-petani" class="table card-table table-border-top-0 table-border-bottom-0">
+                        <thead>
+                            <tr>
+                                <th class="pe-0">Nama Petani</th>
+                                <th class="pe-0">Desa/Kelurahan</th>
+                                <th class="pe-0">Komoditas</th>
+                                <th class="text-end pe-0">Luas Lahan (ha)</th>
+                                <th class="text-end pe-0">Indeks Kesiapan Adopsi</th>
+                                <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 }}">
+                                <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>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
+
+
+@push('scripts')
+<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+    crossorigin=""></script>
+
+<script>
+    $('.data-table').DataTable({
+            "paging": false,
+            "lengthChange": true,
+            "searching": false,
+            "ordering": false,
+            "info": false,
+            "autoWidth": false,
+            "responsive": false,
+            "scrollX": true
+        });
+
+    var tableDesa = $('#table-desa').DataTable({
+            "paging": true,
+            "lengthChange": false,
+            "searching": false,
+            "ordering": true,
+            "info": false,
+            "autoWidth": false,
+            "responsive": false,
+            "scrollX": true,
+            "pageLength": 5,
+        });
+
+    var tablePetani = $('#table-petani').DataTable({
+            "paging": true,
+            "lengthChange": true,
+            "searching": true,
+            "ordering": true,
+            "info": true,
+            "autoWidth": false,
+            "responsive": false,
+            "scrollX": true
+        });
+    
+    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',
+                        },
+                    },
+                },
+            },
+        },
+        stroke: {
+            width: 0,
+        },
+        dataLabels: {
+            enabled: false,
+        },
+        legend: {
+            show: false,
+        },
+        responsive: [
+            {
+                breakpoint: 360,
+                options: {
+                    chart: {
+                        width: 240,
+                    },
+                },
+            },
+        ],
+    }
+    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'
+                },
+            },
+        },
+        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
+                    }
+                },
+                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
+                        }
+                    }
+                },
+                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
+                    }
+                },
+                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
+                        }
+                    }
+                },
+                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
+        });
+
+        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();
+        });
+
+        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/resources/views/dashboard/indikator-pertanian.blade.php b/resources/views/dashboard/indikator-pertanian.blade.php
new file mode 100644
index 0000000..6046602
--- /dev/null
+++ b/resources/views/dashboard/indikator-pertanian.blade.php
@@ -0,0 +1,1331 @@
+@extends('layout.main')
+
+@push('style')
+<style>
+    .indicator-page-header {
+        margin-bottom: 1.25rem;
+    }
+
+    .indicator-page-title {
+        color: var(--bs-heading-color);
+        font-size: 1.5rem;
+        font-weight: 700;
+        line-height: 1.25;
+        margin-bottom: .35rem;
+    }
+
+    .indicator-filter-bar {
+        align-items: end;
+        display: flex;
+        flex-wrap: wrap;
+        gap: .75rem;
+        margin-bottom: 1.25rem;
+    }
+
+    .indicator-filter-group {
+        flex: 1 1 150px;
+        min-width: 150px;
+    }
+
+    .indicator-filter-actions {
+        display: flex;
+        flex: 999 1 240px;
+        gap: .75rem;
+        justify-content: space-between;
+    }
+
+    .indicator-filter-primary-actions {
+        display: flex;
+        gap: .75rem;
+    }
+
+    .indicator-filter-label {
+        color: var(--bs-body-color);
+        font-size: .75rem;
+        font-weight: 600;
+        margin-bottom: .3rem;
+    }
+
+    .indicator-filter-bar .form-select,
+    .indicator-filter-bar .btn {
+        min-height: 38px;
+    }
+
+    .indicator-filter-bar .form-select {
+        background-color: var(--bs-white);
+        border-color: var(--bs-border-color);
+        border-radius: var(--bs-border-radius);
+        color: var(--bs-body-color);
+        font-size: .8125rem;
+        padding-bottom: .375rem;
+        padding-top: .375rem;
+    }
+
+    .indicator-filter-bar .btn {
+        font-size: .8125rem;
+        padding-bottom: .375rem;
+        padding-top: .375rem;
+    }
+
+    .indicator-filter-bar .form-select:focus {
+        border-color: rgba(40, 167, 69, .55);
+        box-shadow: 0 0 0 .2rem rgba(40, 167, 69, .12);
+    }
+
+    .indicator-filter-static {
+        align-items: center;
+        background-color: var(--bs-white);
+        border: 1px solid var(--bs-border-color);
+        border-radius: var(--bs-border-radius);
+        color: var(--bs-body-color);
+        display: flex;
+        font-size: .8125rem;
+        min-height: 38px;
+        padding: .375rem .75rem;
+    }
+
+    .indicator-filter-bar .input-group-text {
+        background: var(--bs-white);
+        border-color: var(--bs-border-color);
+        color: var(--bs-secondary-color);
+        padding-left: .625rem;
+        padding-right: .625rem;
+    }
+
+    .indicator-export-btn {
+        border-color: #28a745;
+        color: #28a745;
+        white-space: nowrap;
+    }
+
+    .indicator-export-btn:hover,
+    .indicator-export-btn:focus {
+        background: rgba(40, 167, 69, .08);
+        border-color: #28a745;
+        color: #28a745;
+    }
+
+    .indicator-summary-value {
+        overflow-wrap: anywhere;
+    }
+
+    .indicator-tabs {
+        gap: .5rem;
+        overflow-x: auto;
+        scrollbar-width: none;
+    }
+
+    .indicator-tabs::-webkit-scrollbar {
+        display: none;
+    }
+
+    .indicator-tabs .nav-item {
+        flex: 1 0 auto;
+    }
+
+    .indicator-tabs .nav-link {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        min-height: 38px;
+        white-space: nowrap;
+        width: 100%;
+    }
+
+    .indicator-tab-content {
+        background: transparent;
+        box-shadow: none;
+        padding: 0;
+    }
+
+    #chart-petani-komoditas .apexcharts-tooltip,
+    #chart-luas-kecamatan .apexcharts-tooltip,
+    #chart-kondisi-tanaman .apexcharts-tooltip,
+    #chart-status-kepemilikan-lahan .apexcharts-tooltip,
+    #chart-serangan-hama .apexcharts-tooltip,
+    #chart-penyakit-tanaman .apexcharts-tooltip,
+    #chart-keparahan-serangan .apexcharts-tooltip,
+    #chart-status-hak-kelola-lahan .apexcharts-tooltip,
+    #chart-praktik-pemupukan .apexcharts-tooltip,
+    #chart-produksi-komoditas .apexcharts-tooltip,
+    #chart-produktivitas-komoditas .apexcharts-tooltip,
+    #chart-luas-panen-komoditas .apexcharts-tooltip,
+    #chart-status-panen .apexcharts-tooltip,
+    #chart-survey-produktivitas-ha .apexcharts-tooltip,
+    #chart-survey-produktivitas-pohon .apexcharts-tooltip {
+        background: transparent !important;
+        border: none !important;
+        box-shadow: none !important;
+        overflow: visible !important;
+    }
+
+    .indicator-chart {
+        min-height: 330px;
+    }
+
+    .indicator-chart-sm {
+        min-height: 330px;
+    }
+
+    @media (max-width: 767.98px) {
+        .indicator-filter-bar,
+        .indicator-filter-actions,
+        .indicator-filter-primary-actions {
+            display: grid;
+            grid-template-columns: 1fr;
+            width: 100%;
+        }
+
+        .indicator-filter-group {
+            min-width: 100%;
+        }
+
+        .indicator-filter-bar .btn {
+            justify-content: center;
+            width: 100%;
+        }
+
+        .indicator-tabs .nav-item {
+            flex-basis: 100%;
+        }
+    }
+</style>
+@endpush
+
+@section('content')
+<div class="container-xxl flex-grow-1 container-p-y">
+    <div class="indicator-page-header">
+        <h4 class="indicator-page-title">
+            Indikator Pertanian
+        </h4>
+        <p class="text-muted mb-0">
+            Kondisi dan performa usaha tani petani berdasarkan hasil survei
+        </p>
+    </div>
+
+    <div class="indicator-filter-bar" aria-label="Filter dashboard indikator pertanian">
+        @foreach ($filterOptions as $filter)
+            <div class="indicator-filter-group">
+                <label for="filter-{{ $filter['key'] }}" class="indicator-filter-label">
+                    {{ $filter['label'] }}
+                </label>
+
+                @if (!empty($filter['icon']))
+                    <div class="input-group">
+                        <span class="input-group-text" aria-hidden="true">
+                            <i class="ti {{ $filter['icon'] }}"></i>
+                        </span>
+                        @if (!empty($filter['readonly']))
+                            @php
+                                $selectedOption = collect($filter['options'])
+                                    ->firstWhere('value', $initialFilters[$filter['key']]);
+                            @endphp
+
+                            <div
+                                id="filter-{{ $filter['key'] }}"
+                                class="form-control indicator-filter-static"
+                                data-filter-key="{{ $filter['key'] }}"
+                                data-filter-value="{{ $initialFilters[$filter['key']] }}"
+                                aria-label="Filter {{ $filter['label'] }}"
+                                role="text"
+                            >
+                                {{ $selectedOption['label'] ?? 'Ngada' }}
+                            </div>
+                        @else
+                            <select
+                                id="filter-{{ $filter['key'] }}"
+                                class="form-select indicator-filter-select"
+                                data-filter-key="{{ $filter['key'] }}"
+                                aria-label="Filter {{ $filter['label'] }}"
+                            >
+                                @foreach ($filter['options'] as $option)
+                                    <option
+                                        value="{{ $option['value'] }}"
+                                        @selected($initialFilters[$filter['key']] === $option['value'])
+                                    >
+                                        {{ $option['label'] }}
+                                    </option>
+                                @endforeach
+                            </select>
+                        @endif
+                    </div>
+                @else
+                    <select
+                        id="filter-{{ $filter['key'] }}"
+                        class="form-select indicator-filter-select"
+                        data-filter-key="{{ $filter['key'] }}"
+                        aria-label="Filter {{ $filter['label'] }}"
+                        @disabled($filter['key'] === 'desa' && $initialFilters['kecamatan'] === 'all')
+                    >
+                        @foreach ($filter['options'] as $option)
+                            <option
+                                value="{{ $option['value'] }}"
+                                @if (isset($option['parent'])) data-parent="{{ $option['parent'] }}" @endif
+                                @selected($initialFilters[$filter['key']] === $option['value'])
+                            >
+                                {{ $option['label'] }}
+                            </option>
+                        @endforeach
+                    </select>
+                @endif
+            </div>
+        @endforeach
+
+        <div class="indicator-filter-actions">
+            <div class="indicator-filter-primary-actions">
+                <button
+                    type="button"
+                    class="btn btn-outline-secondary"
+                    id="indicator-reset-filter"
+                    aria-label="Reset filter indikator pertanian"
+                >
+                    <i class="ti tabler-rotate-clockwise-2 me-1"></i>
+                    Reset Filter
+                </button>
+            </div>
+
+            <button
+                type="button"
+                class="btn btn-outline-success indicator-export-btn"
+                id="indicator-export-data"
+                aria-label="Export data indikator pertanian"
+            >
+                <i class="ti tabler-download me-1"></i>
+                Export Data
+            </button>
+        </div>
+    </div>
+
+    <div class="row g-6">
+        @foreach ($summaryData as $summary)
+            <div class="col-lg-3 col-sm-6">
+                <div class="card card-border-shadow-{{ $summary['variant'] }} h-100">
+                    <div class="card-body">
+                        <div class="d-flex align-items-center mb-2">
+                            <div class="avatar me-4">
+                                <span class="avatar-initial rounded bg-label-{{ $summary['variant'] }}">
+                                    <i class="icon-base ti {{ $summary['icon'] }} icon-28px"></i>
+                                </span>
+                            </div>
+
+                            <h4 class="mb-0 indicator-summary-value">
+                                {{ $summary['value'] }}
+                            </h4>
+                        </div>
+
+                        <p class="mb-1">
+                            {{ $summary['label'] }}
+                        </p>
+
+                        <p class="mb-0">
+                            <small class="text-body-secondary">
+                                {{ $summary['description'] }}
+                            </small>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        @endforeach
+    </div>
+
+    <div class="nav-align-top mt-4">
+        <ul class="nav nav-pills flex-column flex-md-row mb-6 row-gap-2 indicator-tabs" role="tablist">
+            <li class="nav-item">
+                <button
+                    type="button"
+                    class="nav-link active"
+                    role="tab"
+                    data-bs-toggle="tab"
+                    data-bs-target="#indicator-tab-lahan-tanaman"
+                    aria-controls="indicator-tab-lahan-tanaman"
+                    aria-selected="true"
+                >
+                    <i class="icon-base ti tabler-trees icon-sm me-1_5"></i>
+                    Lahan dan Tanaman
+                </button>
+            </li>
+            <li class="nav-item">
+                <button
+                    type="button"
+                    class="nav-link"
+                    role="tab"
+                    data-bs-toggle="tab"
+                    data-bs-target="#indicator-tab-produksi"
+                    aria-controls="indicator-tab-produksi"
+                    aria-selected="false"
+                >
+                    <i class="icon-base ti tabler-chart-histogram icon-sm me-1_5"></i>
+                    Produksi dan Produktivitas
+                </button>
+            </li>
+            <li class="nav-item">
+                <button
+                    type="button"
+                    class="nav-link"
+                    role="tab"
+                    data-bs-toggle="tab"
+                    data-bs-target="#indicator-tab-input-produksi"
+                    aria-controls="indicator-tab-input-produksi"
+                    aria-selected="false"
+                >
+                    <i class="icon-base ti tabler-package icon-sm me-1_5"></i>
+                    Input Produksi
+                </button>
+            </li>
+            <li class="nav-item">
+                <button
+                    type="button"
+                    class="nav-link"
+                    role="tab"
+                    data-bs-toggle="tab"
+                    data-bs-target="#indicator-tab-panen"
+                    aria-controls="indicator-tab-panen"
+                    aria-selected="false"
+                >
+                    <i class="icon-base ti tabler-basket icon-sm me-1_5"></i>
+                    Panen dan Pascapanen
+                </button>
+            </li>
+            <li class="nav-item">
+                <button
+                    type="button"
+                    class="nav-link"
+                    role="tab"
+                    data-bs-toggle="tab"
+                    data-bs-target="#indicator-tab-akses-pasar"
+                    aria-controls="indicator-tab-akses-pasar"
+                    aria-selected="false"
+                >
+                    <i class="icon-base ti tabler-building-store icon-sm me-1_5"></i>
+                    Akses Pasar
+                </button>
+            </li>
+        </ul>
+
+        <div class="tab-content indicator-tab-content">
+            <div
+                class="tab-pane fade show active"
+                id="indicator-tab-lahan-tanaman"
+                role="tabpanel"
+            >
+                <div class="row g-6 mt-1">
+                    <div class="col-xxl-4 col-lg-6">
+                        <div class="card h-100">
+                            <div class="card-header d-flex justify-content-between align-items-center">
+                                <div class="card-title mb-0">
+                                    <h5 class="m-0 me-2">Distribusi Komoditas</h5>
+                                    <small class="text-body-secondary">Jumlah petani per komoditas</small>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <div id="chart-petani-komoditas" class="indicator-chart-sm"></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-xxl-4 col-lg-6">
+                        <div class="card h-100">
+                            <div class="card-header d-flex justify-content-between align-items-center">
+                                <div class="card-title mb-0">
+                                    <h5 class="m-0 me-2">Luas Lahan per Kecamatan</h5>
+                                    <small class="text-body-secondary">Kecamatan dengan luas lahan terdata terbesar</small>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <div id="chart-luas-kecamatan" class="indicator-chart"></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-xxl-4 col-lg-6">
+                        <div class="card h-100">
+                            <div class="card-header d-flex justify-content-between align-items-center">
+                                <div class="card-title mb-0">
+                                    <h5 class="m-0 me-2">Hak Kelola Lahan</h5>
+                                    <small class="text-body-secondary">Berdasarkan survei sosial ekonomi</small>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <div id="chart-status-hak-kelola-lahan" class="indicator-chart"></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-xxl-4 col-lg-6">
+                        <div class="card h-100">
+                            <div class="card-header d-flex justify-content-between align-items-center">
+                                <div class="card-title mb-0">
+                                    <h5 class="m-0 me-2">Status Kepemilikan Lahan</h5>
+                                    <small class="text-body-secondary">Berdasarkan data lahan terdata</small>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <div id="chart-status-kepemilikan-lahan" class="indicator-chart-sm"></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-xxl-4 col-lg-6">
+                        <div class="card h-100">
+                            <div class="card-header d-flex justify-content-between align-items-center">
+                                <div class="card-title mb-0">
+                                    <h5 class="m-0 me-2">Serangan Hama</h5>
+                                    <small class="text-body-secondary">Jenis hama pada tanaman/lahan</small>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <div id="chart-serangan-hama" class="indicator-chart"></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-xxl-4 col-lg-6">
+                        <div class="card h-100">
+                            <div class="card-header d-flex justify-content-between align-items-center">
+                                <div class="card-title mb-0">
+                                    <h5 class="m-0 me-2">Keparahan Serangan</h5>
+                                    <small class="text-body-secondary">Tingkat dampak hama/penyakit</small>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <div id="chart-keparahan-serangan" class="indicator-chart"></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-xxl-4 col-lg-6">
+                        <div class="card h-100">
+                            <div class="card-header d-flex justify-content-between align-items-center">
+                                <div class="card-title mb-0">
+                                    <h5 class="m-0 me-2">Kondisi Tanaman</h5>
+                                    <small class="text-body-secondary">Berdasarkan tanaman/lahan terdata</small>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <div id="chart-kondisi-tanaman" class="indicator-chart-sm"></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-xxl-4 col-lg-6">
+                        <div class="card h-100">
+                            <div class="card-header d-flex justify-content-between align-items-center">
+                                <div class="card-title mb-0">
+                                    <h5 class="m-0 me-2">Penyakit Tanaman</h5>
+                                    <small class="text-body-secondary">Jenis penyakit pada tanaman/lahan</small>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <div id="chart-penyakit-tanaman" class="indicator-chart"></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-xxl-4 col-lg-6">
+                        <div class="card h-100">
+                            <div class="card-header d-flex justify-content-between align-items-center">
+                                <div class="card-title mb-0">
+                                    <h5 class="m-0 me-2">Praktik Pemupukan</h5>
+                                    <small class="text-body-secondary">Berdasarkan survei praktik budidaya</small>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <div id="chart-praktik-pemupukan" class="indicator-chart"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="tab-pane fade" id="indicator-tab-produksi" role="tabpanel">
+                <div class="row g-6 mt-1">
+                    <div class="col-xxl-4 col-lg-6">
+                        <div class="card h-100">
+                            <div class="card-header d-flex justify-content-between align-items-center">
+                                <div class="card-title mb-0">
+                                    <h5 class="m-0 me-2">Total Produksi per Komoditas</h5>
+                                    <small class="text-body-secondary">Akumulasi hasil panen aktual</small>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <div id="chart-produksi-komoditas" class="indicator-chart"></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-xxl-4 col-lg-6">
+                        <div class="card h-100">
+                            <div class="card-header d-flex justify-content-between align-items-center">
+                                <div class="card-title mb-0">
+                                    <h5 class="m-0 me-2">Produktivitas Aktual</h5>
+                                    <small class="text-body-secondary">Rata-rata kg/ha per komoditas</small>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <div id="chart-produktivitas-komoditas" class="indicator-chart"></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-xxl-4 col-lg-6">
+                        <div class="card h-100">
+                            <div class="card-header d-flex justify-content-between align-items-center">
+                                <div class="card-title mb-0">
+                                    <h5 class="m-0 me-2">Luas Panen per Komoditas</h5>
+                                    <small class="text-body-secondary">Akumulasi luas panen terdata</small>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <div id="chart-luas-panen-komoditas" class="indicator-chart"></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-xxl-4 col-lg-6">
+                        <div class="card h-100">
+                            <div class="card-header d-flex justify-content-between align-items-center">
+                                <div class="card-title mb-0">
+                                    <h5 class="m-0 me-2">Status Panen</h5>
+                                    <small class="text-body-secondary">Jumlah catatan produksi per status</small>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <div id="chart-status-panen" class="indicator-chart-sm"></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-xxl-4 col-lg-6">
+                        <div class="card h-100">
+                            <div class="card-header d-flex justify-content-between align-items-center">
+                                <div class="card-title mb-0">
+                                    <h5 class="m-0 me-2">Produktivitas Survey (ha/tahun)</h5>
+                                    <small class="text-body-secondary">Rata-rata produktivitas per komoditas</small>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <div id="chart-survey-produktivitas-ha" class="indicator-chart"></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-xxl-4 col-lg-6">
+                        <div class="card h-100">
+                            <div class="card-header d-flex justify-content-between align-items-center">
+                                <div class="card-title mb-0">
+                                    <h5 class="m-0 me-2">Produktivitas Survey (pohon/tahun)</h5>
+                                    <small class="text-body-secondary">Rata-rata produktivitas per komoditas</small>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <div id="chart-survey-produktivitas-pohon" class="indicator-chart"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            @foreach ([
+                'indicator-tab-input-produksi' => 'Input Produksi',
+                'indicator-tab-panen' => 'Panen dan Pascapanen',
+                'indicator-tab-akses-pasar' => 'Akses Pasar',
+            ] as $tabId => $tabLabel)
+
+                <div class="tab-pane fade" id="{{ $tabId }}" role="tabpanel">
+                    <div class="card">
+                        <div class="card-body text-center text-body-secondary py-5">
+                            Belum ada grafik untuk {{ $tabLabel }}.
+                        </div>
+                    </div>
+                </div>
+            @endforeach
+        </div>
+    </div>
+</div>
+@endsection
+
+@push('scripts')
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        const chartData = @json($chartData);
+        const dashboardUrl = @json(route('dashboard.indikator-pertanian'));
+        const initialFilters = @json($initialFilters);
+        const filters = { ...initialFilters };
+        const filterSelects = document.querySelectorAll('.indicator-filter-select');
+        const kecamatanSelect = document.querySelector('[data-filter-key="kecamatan"]');
+        const desaSelect = document.querySelector('[data-filter-key="desa"]');
+        const desaOptions = desaSelect
+            ? Array.from(desaSelect.options).map(function (option) {
+                return {
+                    value: option.value,
+                    label: option.textContent,
+                    parent: option.dataset.parent || null,
+                };
+            })
+            : [];
+        const resetButton = document.getElementById('indicator-reset-filter');
+        const exportButton = document.getElementById('indicator-export-data');
+
+        function applyFilters() {
+            const params = new URLSearchParams();
+
+            ['kecamatan', 'desa', 'komoditas', 'segmentasi'].forEach(function (key) {
+                if (filters[key] && filters[key] !== 'all') {
+                    params.set(key, filters[key]);
+                }
+            });
+
+            window.location.href = params.toString()
+                ? dashboardUrl + '?' + params.toString()
+                : dashboardUrl;
+        }
+
+        function renderDesaOptions(selectedValue = initialFilters.desa) {
+            if (!desaSelect || !kecamatanSelect) {
+                return;
+            }
+
+            const selectedKecamatan = kecamatanSelect.value;
+            const canSelectDesa = selectedKecamatan !== 'all';
+            const availableOptions = desaOptions.filter(function (option) {
+                return option.value === 'all' || option.parent === selectedKecamatan;
+            });
+
+            desaSelect.innerHTML = '';
+
+            availableOptions.forEach(function (option) {
+                const element = new Option(option.label, option.value);
+
+                if (option.parent) {
+                    element.dataset.parent = option.parent;
+                }
+
+                desaSelect.add(element);
+            });
+
+            desaSelect.disabled = !canSelectDesa;
+            desaSelect.value = availableOptions.some(function (option) {
+                return option.value === selectedValue;
+            }) ? selectedValue : 'all';
+            filters.desa = desaSelect.value;
+        }
+
+        renderDesaOptions();
+
+        filterSelects.forEach(function (select) {
+            select.addEventListener('change', function (event) {
+                filters[event.target.dataset.filterKey] = event.target.value;
+
+                if (event.target.dataset.filterKey === 'kecamatan') {
+                    renderDesaOptions('all');
+                }
+
+                applyFilters();
+            });
+        });
+
+        resetButton?.addEventListener('click', function () {
+            window.location.href = dashboardUrl;
+        });
+
+        exportButton?.addEventListener('click', function () {});
+
+        if (typeof ApexCharts === 'undefined') {
+            return;
+        }
+
+        const appConfig = typeof config !== 'undefined' ? config : {};
+        const headingColor = appConfig.colors?.headingColor || '#5d596c';
+        const legendColor = appConfig.colors?.bodyColor || '#6f6b7d';
+        const fontFamily = appConfig.fontFamily || 'Public Sans';
+        const chartColors = {
+            primary: appConfig.colors?.primary || '#7367f0',
+            success: appConfig.colors?.success || '#28c76f',
+            warning: appConfig.colors?.warning || '#ff9f43',
+            info: appConfig.colors?.info || '#00cfe8',
+            secondary: appConfig.colors?.secondary || '#a8aaae',
+            labelPrimary: appConfig.colors_label?.primary || 'rgba(115, 103, 240, 0.16)',
+            labelSuccess: appConfig.colors_label?.success || 'rgba(40, 199, 111, 0.16)',
+            labelWarning: appConfig.colors_label?.warning || 'rgba(255, 159, 67, 0.16)',
+            labelInfo: appConfig.colors_label?.info || 'rgba(0, 207, 232, 0.16)',
+            labelSecondary: appConfig.colors_label?.secondary || 'rgba(168, 170, 174, 0.16)',
+            body: appConfig.colors?.bodyColor || '#6f6b7d',
+            muted: appConfig.colors?.textMuted || '#a5a3ae',
+            heading: appConfig.colors?.headingColor || '#5d596c',
+            border: appConfig.colors?.borderColor || '#dbdade',
+            card: appConfig.colors?.cardColor || '#fff',
+        };
+        const surveyPalette = [
+            '#28a745',
+            '#007bff',
+            '#fd7e14',
+            '#dc3545',
+            '#6f42c1',
+            '#20c997',
+            chartColors.primary,
+            chartColors.info,
+            chartColors.warning,
+        ];
+        const shuffleColors = function (colors) {
+            const shuffled = [...colors];
+
+            for (let index = shuffled.length - 1; index > 0; index -= 1) {
+                const randomIndex = Math.floor(Math.random() * (index + 1));
+                [shuffled[index], shuffled[randomIndex]] = [shuffled[randomIndex], shuffled[index]];
+            }
+
+            return shuffled;
+        };
+        const colorSet = shuffleColors(surveyPalette);
+        const colorsFor = function (offset = 0) {
+            return [
+                ...colorSet.slice(offset),
+                ...colorSet.slice(0, offset),
+            ];
+        };
+
+        function hasSeries(data) {
+            return Array.isArray(data?.series)
+                && data.series.length > 0
+                && data.series.some(function (value) {
+                    return Number(value) > 0;
+                });
+        }
+
+        function formatNumber(value, digits = 0) {
+            return Number(value || 0).toLocaleString('id-ID', {
+                maximumFractionDigits: digits,
+                minimumFractionDigits: digits,
+            });
+        }
+
+        function wrapAxisLabel(value, maxCharacters = 13) {
+            const words = String(value || '').split(/\s+/).filter(Boolean);
+            const lines = [];
+            let currentLine = '';
+
+            words.forEach(function (word) {
+                const nextLine = currentLine ? currentLine + ' ' + word : word;
+
+                if (currentLine && nextLine.length > maxCharacters) {
+                    lines.push(currentLine);
+                    currentLine = word;
+                    return;
+                }
+
+                currentLine = nextLine;
+            });
+
+            if (currentLine) {
+                lines.push(currentLine);
+            }
+
+            return lines.length > 1 ? lines : (lines[0] || '');
+        }
+
+        function renderDonut(selector, data, colors, options = {}) {
+            const element = document.querySelector(selector);
+
+            if (!element) {
+                return;
+            }
+
+            if (!hasSeries(data)) {
+                element.innerHTML = '<div class="text-center text-body-secondary py-5">Belum ada data.</div>';
+                return;
+            }
+
+            const total = data.series.reduce(function (sum, value) {
+                return sum + Number(value || 0);
+            }, 0);
+            const unit = options.unit || '';
+            const valueDigits = options.valueDigits || 0;
+
+            new ApexCharts(element, {
+                chart: {
+                    type: 'donut',
+                    height: options.height || 330,
+                    parentHeightOffset: 0,
+                    toolbar: { show: false },
+                },
+                labels: data.labels,
+                series: data.series,
+                colors: colors,
+                stroke: { width: 0 },
+                dataLabels: { enabled: false },
+                legend: {
+                    show: true,
+                    position: 'bottom',
+                    offsetY: 10,
+                    fontSize: '13px',
+                    fontFamily: fontFamily,
+                    fontWeight: 400,
+                    labels: {
+                        colors: legendColor,
+                        useSeriesColors: false,
+                    },
+                    markers: {
+                        size: 4,
+                        strokeWidth: 0,
+                    },
+                    itemMargin: {
+                        horizontal: 12,
+                        vertical: 5,
+                    },
+                    formatter: function (seriesName, chartOptions) {
+                        const value = Number(chartOptions.w.globals.series[chartOptions.seriesIndex] || 0);
+                        const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : '0.0';
+
+                        return `${seriesName}: ${formatNumber(value, valueDigits)}${unit ? ' ' + unit : ''} (${percentage}%)`;
+                    },
+                },
+                tooltip: {
+                    enabled: true,
+                    followCursor: true,
+                    custom: function ({ series, seriesIndex, w }) {
+                        const value = Number(series[seriesIndex] || 0);
+                        const label = w.globals.labels[seriesIndex];
+                        const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : '0.0';
+                        const color = w.globals.colors[seriesIndex];
+
+                        return `
+                            <div
+                                style="
+                                    background: ${color};
+                                    color: #fff;
+                                    padding: 8px 12px;
+                                    border-radius: 5px;
+                                    font-size: 13px;
+                                    font-weight: 500;
+                                    font-family: ${fontFamily};
+                                    box-shadow: 0 4px 12px rgba(0,0,0,.15);
+                                "
+                            >
+                                ${label}:&nbsp;
+                                <strong>
+                                    ${formatNumber(value, valueDigits)}${unit ? ' ' + unit : ''}
+                                    (${percentage}%)
+                                </strong>
+                            </div>
+                        `;
+                    },
+                },
+                plotOptions: {
+                    pie: {
+                        donut: {
+                            size: options.donutSize || '68%',
+                            labels: {
+                                show: true,
+                                value: {
+                                    fontSize: options.valueFontSize || '30px',
+                                    fontFamily: fontFamily,
+                                    color: headingColor,
+                                    fontWeight: 500,
+                                    offsetY: -15,
+                                    formatter: function (value) {
+                                        return formatNumber(value, valueDigits);
+                                    },
+                                },
+                                name: {
+                                    offsetY: 25,
+                                    fontFamily: fontFamily,
+                                },
+                                total: {
+                                    show: true,
+                                    showAlways: true,
+                                    fontSize: '13px',
+                                    fontFamily: fontFamily,
+                                    color: legendColor,
+                                    label: options.totalLabel || 'Total',
+                                    formatter: function () {
+                                        return formatNumber(total, valueDigits);
+                                    },
+                                },
+                            },
+                        },
+                    },
+                },
+                responsive: [
+                    {
+                        breakpoint: 1400,
+                        options: {
+                            chart: { height: 350 },
+                            legend: { position: 'bottom' },
+                        },
+                    },
+                    {
+                        breakpoint: 576,
+                        options: {
+                            chart: { height: 330 },
+                            legend: { position: 'bottom' },
+                        },
+                    },
+                ],
+                states: {
+                    hover: {
+                        filter: {
+                            type: 'lighten',
+                            value: 0.08,
+                        },
+                    },
+                    active: {
+                        filter: {
+                            type: 'darken',
+                            value: 0.08,
+                        },
+                    },
+                },
+            }).render();
+        }
+
+        function renderBar(selector, data, options = {}) {
+            const element = document.querySelector(selector);
+
+            if (!element) {
+                return;
+            }
+
+            if (!hasSeries(data)) {
+                element.innerHTML = '<div class="text-center text-body-secondary py-5">Belum ada data.</div>';
+                return;
+            }
+
+            const total = data.series.reduce(function (sum, value) {
+                return sum + Number(value || 0);
+            }, 0);
+            const valueDigits = options.valueDigits ?? 0;
+            const suffix = options.suffix || '';
+            const isHorizontal = options.horizontal || false;
+            const wrappedLabels = data.labels.map(function (label) {
+                return wrapAxisLabel(label, options.labelLineLength || 13);
+            });
+            const maxLabelLines = wrappedLabels.reduce(function (maximum, label) {
+                return Math.max(maximum, Array.isArray(label) ? label.length : 1);
+            }, 1);
+            const labelMaxHeight = Math.max(82, Math.min(maxLabelLines * 18, 160));
+            const chartHeight = isHorizontal
+                ? options.height || 330
+                : (options.height || 330) + Math.max(maxLabelLines - 3, 0) * 16;
+
+            new ApexCharts(element, {
+                chart: {
+                    type: 'bar',
+                    height: chartHeight,
+                    parentHeightOffset: 0,
+                    toolbar: { show: false },
+                },
+                series: [{
+                    name: options.name || 'Total',
+                    data: data.series,
+                }],
+                colors: options.colors || colorsFor(options.colorOffset || 0),
+                plotOptions: {
+                    bar: {
+                        borderRadius: 4,
+                        borderRadiusApplication: 'around',
+                        horizontal: isHorizontal,
+                        columnWidth: options.columnWidth || '44%',
+                        barHeight: options.barHeight || '50%',
+                        distributed: true,
+                        dataLabels: {
+                            position: 'top',
+                        },
+                    },
+                },
+                dataLabels: {
+                    enabled: true,
+                    textAnchor: isHorizontal ? 'start' : 'middle',
+                    offsetX: isHorizontal ? 6 : 0,
+                    offsetY: isHorizontal ? 0 : -18,
+                    style: {
+                        fontSize: '12px',
+                        fontFamily: fontFamily,
+                        fontWeight: 500,
+                        colors: [headingColor],
+                    },
+                    formatter: function (value) {
+                        const percentage = total > 0 ? ((Number(value || 0) / total) * 100).toFixed(1) : '0.0';
+
+                        return `${formatNumber(value, valueDigits)}${suffix ? ' ' + suffix : ''} (${percentage}%)`;
+                    },
+                },
+                grid: {
+                    borderColor: chartColors.border,
+                    strokeDashArray: 5,
+                    xaxis: { lines: { show: isHorizontal } },
+                    yaxis: { lines: { show: !isHorizontal } },
+                    padding: {
+                        top: 18,
+                        right: isHorizontal ? 55 : 16,
+                        left: 8,
+                        bottom: isHorizontal ? 0 : Math.max(maxLabelLines - 2, 0) * 8,
+                    },
+                },
+                xaxis: {
+                    categories: isHorizontal ? data.labels : wrappedLabels,
+                    axisBorder: { show: false },
+                    axisTicks: { show: false },
+                    labels: {
+                        rotate: 0,
+                        rotateAlways: false,
+                        trim: false,
+                        hideOverlappingLabels: false,
+                        maxHeight: labelMaxHeight,
+                        style: {
+                            colors: legendColor,
+                            fontSize: '12px',
+                            fontFamily: fontFamily,
+                        },
+                        formatter: function (value) {
+                            if (isHorizontal && valueDigits === 0 && !Number.isInteger(Number(value))) {
+                                return '';
+                            }
+
+                            return isHorizontal ? formatNumber(value, valueDigits) : value;
+                        },
+                    },
+                    tooltip: { enabled: false },
+                    title: {
+                        text: isHorizontal ? suffix || options.name || '' : '',
+                        style: {
+                            color: legendColor,
+                            fontSize: '12px',
+                            fontFamily: fontFamily,
+                            fontWeight: 400,
+                        },
+                    },
+                },
+                yaxis: {
+                    labels: {
+                        maxWidth: isHorizontal ? options.labelWidth || 180 : undefined,
+                        style: {
+                            colors: legendColor,
+                            fontSize: '12px',
+                            fontFamily: fontFamily,
+                        },
+                        formatter: function (value) {
+                            return isHorizontal ? value : formatNumber(value, valueDigits);
+                        },
+                    },
+                    title: {
+                        text: isHorizontal ? '' : suffix || options.name || '',
+                        style: {
+                            color: legendColor,
+                            fontSize: '12px',
+                            fontFamily: fontFamily,
+                            fontWeight: 400,
+                        },
+                    },
+                },
+                legend: { show: false },
+                tooltip: {
+                    enabled: true,
+                    followCursor: true,
+                    intersect: false,
+                    shared: false,
+                    custom: function ({ series, seriesIndex, dataPointIndex, w }) {
+                        const value = Number(series[seriesIndex][dataPointIndex] || 0);
+                        const label = data.labels[dataPointIndex] || w.globals.labels[dataPointIndex];
+                        const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : '0.0';
+                        const color = w.globals.colors[dataPointIndex] || options.color || chartColors.primary;
+
+                        return `
+                            <div
+                                style="
+                                    background: ${color};
+                                    color: #fff;
+                                    padding: 8px 12px;
+                                    border-radius: 5px;
+                                    font-size: 13px;
+                                    font-weight: 500;
+                                    font-family: ${fontFamily};
+                                    box-shadow: 0 4px 12px rgba(0,0,0,.15);
+                                "
+                            >
+                                ${label}:&nbsp;
+                                <strong>
+                                    ${formatNumber(value, valueDigits)}${suffix ? ' ' + suffix : ''}
+                                    (${percentage}%)
+                                </strong>
+                            </div>
+                        `;
+                    },
+                },
+                states: {
+                    hover: {
+                        filter: {
+                            type: 'lighten',
+                            value: 0.08,
+                        },
+                    },
+                    active: {
+                        filter: {
+                            type: 'darken',
+                            value: 0.08,
+                        },
+                    },
+                },
+            }).render();
+        }
+
+        renderDonut(
+            '#chart-petani-komoditas',
+            chartData.petaniPerKomoditas,
+            colorsFor(0),
+            {
+                totalLabel: 'Petani',
+                unit: 'petani',
+                valueDigits: 0,
+            }
+        );
+
+        renderBar('#chart-luas-kecamatan', chartData.luasLahanPerKecamatan, {
+            name: 'Luas lahan',
+            suffix: 'ha',
+            colors: colorsFor(1),
+            height: 330,
+            horizontal: true,
+            labelWidth: 150,
+            valueDigits: 2,
+        });
+
+        renderDonut(
+            '#chart-kondisi-tanaman',
+            chartData.kondisiTanaman,
+            colorsFor(2),
+            {
+                totalLabel: 'Data',
+                valueDigits: 0,
+            }
+        );
+
+        renderDonut(
+            '#chart-status-kepemilikan-lahan',
+            chartData.statusKepemilikanLahan,
+            colorsFor(3),
+            {
+                totalLabel: 'Lahan',
+                unit: 'lahan',
+                valueDigits: 0,
+            }
+        );
+
+        renderBar('#chart-serangan-hama', chartData.seranganHama, {
+            name: 'Data',
+            colors: colorsFor(4),
+            height: 330,
+            valueDigits: 0,
+        });
+
+        renderBar('#chart-penyakit-tanaman', chartData.penyakitTanaman, {
+            name: 'Data',
+            colors: colorsFor(5),
+            height: 330,
+            valueDigits: 0,
+        });
+
+        renderBar('#chart-keparahan-serangan', chartData.keparahanSerangan, {
+            name: 'Data',
+            colors: colorsFor(6),
+            height: 330,
+            valueDigits: 0,
+        });
+
+        renderBar('#chart-status-hak-kelola-lahan', chartData.statusHakKelolaLahan, {
+            name: 'Petani',
+            colors: colorsFor(7),
+            height: 330,
+            horizontal: true,
+            labelWidth: 180,
+            valueDigits: 0,
+        });
+
+        renderBar('#chart-praktik-pemupukan', chartData.praktikPemupukan, {
+            name: 'Petani',
+            colors: colorsFor(8),
+            height: 330,
+            horizontal: true,
+            labelWidth: 180,
+            valueDigits: 0,
+        });
+
+        let productionChartsRendered = false;
+
+        function renderProductionCharts() {
+            if (productionChartsRendered) {
+                return;
+            }
+
+            productionChartsRendered = true;
+
+            renderBar('#chart-produksi-komoditas', chartData.produksiPerKomoditas, {
+                name: 'Produksi',
+                suffix: 'kg',
+                colors: colorsFor(0),
+                height: 330,
+                horizontal: true,
+                labelWidth: 150,
+                valueDigits: 0,
+            });
+
+            renderBar('#chart-produktivitas-komoditas', chartData.produktivitasPerKomoditas, {
+                name: 'Produktivitas',
+                suffix: 'kg/ha',
+                colors: colorsFor(2),
+                height: 330,
+                horizontal: true,
+                labelWidth: 150,
+                valueDigits: 2,
+            });
+
+            renderBar('#chart-luas-panen-komoditas', chartData.luasPanenPerKomoditas, {
+                name: 'Luas panen',
+                suffix: 'ha',
+                colors: colorsFor(4),
+                height: 330,
+                horizontal: true,
+                labelWidth: 150,
+                valueDigits: 2,
+            });
+
+            renderDonut(
+                '#chart-status-panen',
+                chartData.statusPanen,
+                colorsFor(6),
+                {
+                    totalLabel: 'Catatan',
+                    valueDigits: 0,
+                }
+            );
+
+            renderBar('#chart-survey-produktivitas-ha', chartData.surveyProduktivitasHa, {
+                name: 'Produktivitas',
+                suffix: 'ha/tahun',
+                colors: colorsFor(1),
+                height: 330,
+                horizontal: true,
+                labelWidth: 150,
+                valueDigits: 2,
+            });
+
+            renderBar('#chart-survey-produktivitas-pohon', chartData.surveyProduktivitasPohon, {
+                name: 'Produktivitas',
+                suffix: 'pohon/tahun',
+                colors: colorsFor(3),
+                height: 330,
+                horizontal: true,
+                labelWidth: 150,
+                valueDigits: 2,
+            });
+        }
+
+        document
+            .querySelector('[data-bs-target="#indicator-tab-produksi"]')
+            ?.addEventListener('shown.bs.tab', renderProductionCharts);
+
+        if (document.querySelector('#indicator-tab-produksi')?.classList.contains('active')) {
+            renderProductionCharts();
+        }
+    });
+</script>
+@endpush
diff --git a/resources/views/dashboard/petani.blade.php b/resources/views/dashboard/petani.blade.php
index 520d1a4..c6c6e0a 100644
--- a/resources/views/dashboard/petani.blade.php
+++ b/resources/views/dashboard/petani.blade.php
@@ -43,7 +43,7 @@ $segments = [
                         </div>
                         <h4 class="mb-0">{{ $totalPetani }}</h4>
                     </div>
-                    <p class="mb-1">Petani</p>
+                    <p class="mb-1">Total Petani</p>
                     <p class="mb-0">
                         <span class="text-heading fw-medium me-2">{{ $petaniSummary->count('total') }}</span>
                         <small class="text-body-secondary">komoditas utama</small>
diff --git a/resources/views/layout/sidebar.blade.php b/resources/views/layout/sidebar.blade.php
index 202c5c0..bcbc985 100644
--- a/resources/views/layout/sidebar.blade.php
+++ b/resources/views/layout/sidebar.blade.php
@@ -68,6 +68,23 @@
             </ul>
             @endif
 
+            @if(in_array($userRole, ['super_admin', 'admin']) && env('APP_NAME') == 'AgroMonev')
+            <ul class="menu-sub">
+                <li class="menu-item {{ request()->routeIs('dashboard.demografi-petani') ? 'active' : '' }}">
+                    <a href="{{ route('dashboard.demografi-petani') }}" class="menu-link">
+                        <div data-i18n="Demografi Petani">Demografi Petani</div>
+                    </a>
+                </li>
+            </ul>
+            <ul class="menu-sub">
+                <li class="menu-item {{ request()->routeIs('dashboard.indikator-pertanian') ? 'active' : '' }}">
+                    <a href="{{ route('dashboard.indikator-pertanian') }}" class="menu-link">
+                        <div data-i18n="Indikator Pertanian">Indikator Pertanian</div>
+                    </a>
+                </li>
+            </ul>
+            @endif
+
             @if(in_array($userRole, ['super_admin', 'admin', 'fasilitator']) && env('APP_NAME') == 'AgroMonev')
             <ul class="menu-sub">
                 <li class="menu-item {{ request()->routeIs('dashboard.survey-petani') ? 'active' : '' }}">
diff --git a/routes/web.php b/routes/web.php
index 806e4cd..d799ef9 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -46,7 +46,11 @@ Route::middleware('auth')
     // Dashboard
     Route::get('/dashboard/petani', [App\Http\Controllers\Web\Dashboard\ProfilPetaniController::class, 'index'])->name('dashboard.petani');
     Route::get('/dashboard/bumdes', [App\Http\Controllers\Web\Bumdes\PengurusBumdesController::class, 'index'])->name('dashboard.bumdes');
+    Route::get('/dashboard/petani/demografi', [App\Http\Controllers\Web\Dashboard\DemografiPetaniController::class, 'index'])->name('dashboard.demografi-petani');
+    Route::get('/dashboard/petani/demografi/table',[App\Http\Controllers\Web\Dashboard\DemografiPetaniController::class, 'data'])->name('dashboard.demografi-petani.data');
+    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('/user-profile', [App\Http\Controllers\Web\Konfigurasi\ProfileController::class, 'index'])->name('userProfile.index');
     Route::get('/user-profile/security', [App\Http\Controllers\Web\Konfigurasi\ProfileController::class, 'security'])->name('userProfile.security');