diff --git a/app/Http/Controllers/Web/Dashboard/IndikatorPertanianController.php b/app/Http/Controllers/Web/Dashboard/IndikatorPertanianController.php
new file mode 100644
index 0000000..2aa64d7
--- /dev/null
+++ b/app/Http/Controllers/Web/Dashboard/IndikatorPertanianController.php
@@ -0,0 +1,627 @@
+<?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\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),
+            ],
+        ]);
+    }
+
+    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 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 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/resources/views/dashboard/indikator-pertanian.blade.php b/resources/views/dashboard/indikator-pertanian.blade.php
new file mode 100644
index 0000000..9d0af4b
--- /dev/null
+++ b/resources/views/dashboard/indikator-pertanian.blade.php
@@ -0,0 +1,1159 @@
+@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 {
+        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>
+
+            @foreach ([
+                'indicator-tab-produksi' => 'Produksi dan Produktivitas',
+                '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,
+        });
+    });
+</script>
+@endpush
diff --git a/resources/views/layout/sidebar.blade.php b/resources/views/layout/sidebar.blade.php
index 14d5d5f..bcbc985 100644
--- a/resources/views/layout/sidebar.blade.php
+++ b/resources/views/layout/sidebar.blade.php
@@ -76,6 +76,13 @@
                     </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')
diff --git a/routes/web.php b/routes/web.php
index 3558b0d..5f9a368 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -47,6 +47,7 @@ Route::middleware('auth')
     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/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');