From b4089d72b3c100d87cd59acc0b70219014ba663b Mon Sep 17 00:00:00 2001
From: ahmadafriadi <ahmadafriadi0@gmail.com>
Date: Fri, 7 Aug 2026 11:17:53 +0700
Subject: [PATCH] Update Dashboard Demografi Petani

---
 .../Dashboard/DemografiPetaniController.php   |  123 ++
 .../dashboard/demografi-petani.blade.php      | 1569 +++++++++++++++++
 routes/web.php                                |    1 +
 3 files changed, 1693 insertions(+)
 create mode 100644 app/Http/Controllers/Web/Dashboard/DemografiPetaniController.php
 create mode 100644 resources/views/dashboard/demografi-petani.blade.php

diff --git a/app/Http/Controllers/Web/Dashboard/DemografiPetaniController.php b/app/Http/Controllers/Web/Dashboard/DemografiPetaniController.php
new file mode 100644
index 0000000..062df77
--- /dev/null
+++ b/app/Http/Controllers/Web/Dashboard/DemografiPetaniController.php
@@ -0,0 +1,123 @@
+<?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  = Lahan::has('petani')
+                                ->avg('luas_lahan');
+
+        $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' => [
+                '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'));
+    }
+}
diff --git a/resources/views/dashboard/demografi-petani.blade.php b/resources/views/dashboard/demografi-petani.blade.php
new file mode 100644
index 0000000..3605593
--- /dev/null
+++ b/resources/views/dashboard/demografi-petani.blade.php
@@ -0,0 +1,1569 @@
+@extends('layout.main')
+
+@push('styles')
+<link rel="stylesheet" href="{{ asset('assets/vendor/libs/apex-charts/apex-charts.css') }}" />
+<style>
+    #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;
+    }
+@endpush
+
+@section('content')
+<div class="container-xxl flex-grow-1 container-p-y">
+    <div class="row g-6">
+    <!-- Card Border Shadow -->
+    <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-truck icon-28px"></i
+                ></span>
+            </div>
+            <h4 class="mb-0">{{ $data['total_petani'] }}</h4>
+            </div>
+            <p class="mb-1">Total Petani</p>
+            <p class="mb-0">
+            <!-- <span class="text-heading fw-medium me-2">+18.2%</span> -->
+            <small class="text-body-secondary">Terdata</small>
+            </p>
+        </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-alert-triangle 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-git-fork 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-2 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-clock icon-28px"></i
+                ></span>
+            </div>
+            <h4 class="mb-0">{{ $data['total_komoditas'] }}</h4>
+            </div>
+            <p class="mb-1">Total Komoditas</p>
+            <p class="mb-0">
+            <!-- <span class="text-heading fw-medium me-2">-2.5%</span> -->
+            <small class="text-body-secondary">Dari Seluruh Petani</small>
+            </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-clock icon-28px"></i
+                ></span>
+            </div>
+            <h4 class="mb-0">{{ $data['total_luas_lahan'] }}</h4>
+            </div>
+            <p class="mb-1">Total Luas Lahan</p>
+            <p class="mb-0">
+            <span class="text-heading fw-medium me-2">{{ $data['ratarata_luas_lahan'] ? number_format($data['ratarata_luas_lahan'], 2) : 0 }}</span>
+            <small class="text-body-secondary">Rata-rata per Lahan</small>
+            </p>
+        </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-6">
+        <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">{{ $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" class="form-control" placeholder="Cari petani...">
+                    </div>
+
+                    <button
+                        type="button"
+                        class="btn btn-outline-secondary"
+                    >
+                        <i class="icon-base ti tabler-download me-1"></i>
+                        Export
+                    </button>
+
+                </div>
+            </div>
+
+            <div class="table-responsive">
+                <table class="table table-hover">
+
+                    <thead>
+                        <tr>
+                            <th>ID Petani</th>
+                            <th>Nama Petani</th>
+                            <th>Gender</th>
+                            <th>Umur</th>
+                            <th>Komoditas</th>
+                            <th>Luas Lahan</th>
+                            <th>Pendidikan</th>
+                        </tr>
+                    </thead>
+
+                    <tbody>
+
+                        @forelse ($daftarPetani as $petani)
+
+                            @php
+                                $umur = $petani->tanggal_lahir
+                                    ? \Carbon\Carbon::parse($petani->tanggal_lahir)->age
+                                    : null;
+
+                                $totalLuas = $petani->lahan
+                                    ? $petani->lahan->sum('luas_lahan')
+                                    : 0;
+                            @endphp
+
+                            <tr>
+                                <td>
+                                    <span class="text-heading fw-medium">
+                                        {{ $petani->kode ?? $petani->id }}
+                                    </span>
+                                </td>
+
+                                <td>
+                                    <span class="text-heading fw-medium">
+                                        {{ $petani->nama ?? '-' }}
+                                    </span>
+                                </td>
+
+                                <td>
+                                    @if ($petani->jenis_kelamin == 1)
+                                        <span class="badge bg-label-primary">
+                                            Laki-laki
+                                        </span>
+                                    @else
+                                        <span class="badge bg-label-danger">
+                                            Perempuan
+                                        </span>
+                                    @endif
+                                </td>
+
+                                <td>
+                                    {{ $umur ? $umur . ' tahun' : '-' }}
+                                </td>
+
+                                <td>
+                                    {{ $petani->komoditas?->nama ?? '-' }}
+                                </td>
+
+                                <td>
+                                    {{ $petani->total_luas_lahan
+                                        ? number_format($petani->total_luas_lahan, 2, ',', '.') . ' ha'
+                                        : '-'
+                                    }}
+                                </td>
+
+                                <td>
+                                    @php
+                                        $pendidikanRaw = $petani->getRawOriginal('pendidikan_terakhir');
+
+                                        $pendidikan = match ($pendidikanRaw) {
+                                            '01_tidak_sekolah' => 'Tidak Sekolah',
+                                            '02_sd' => 'SD',
+                                            '03_smp' => 'SMP',
+                                            '04_sma' => 'SMA',
+                                            '05_diploma' => 'Diploma',
+                                            '06_sarjana' => 'Sarjana',
+                                            '07_magister' => 'Magister',
+                                            default => '-',
+                                        };
+                                    @endphp
+
+                                    {{ $pendidikan }}
+                                </td>
+
+                            </tr>
+
+                        @empty
+
+                            <tr>
+                                <td
+                                    colspan="7"
+                                    class="text-center py-5 text-body-secondary"
+                                >
+                                    Belum ada data petani.
+                                </td>
+                            </tr>
+
+                        @endforelse
+
+                    </tbody>
+                </table>
+            </div>
+
+            <div class="card-footer d-flex flex-wrap justify-content-between align-items-center gap-3">
+
+            <small class="text-body-secondary">
+                Menampilkan
+                {{ $daftarPetani->firstItem() ?? 0 }}
+                -
+                {{ $daftarPetani->lastItem() ?? 0 }}
+                dari
+                {{ $daftarPetani->total() }}
+                petani
+            </small>
+
+            <div>
+                {{ $daftarPetani->onEachSide(1)->links('pagination::bootstrap-5') }}
+            </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 genderChartEl = document.querySelector('#genderChart');
+
+    if (!genderChartEl) {
+        return;
+    }
+
+    const headingColor = config.colors.headingColor;
+    const legendColor = config.colors.bodyColor;
+    const fontFamily = config.fontFamily;
+
+    const lakiLaki = Number(
+        @json($data['petani_lakilaki'] ?? 0)
+    );
+
+    const perempuan = Number(
+        @json($data['petani_perempuan'] ?? 0)
+    );
+
+    const totalPetani = lakiLaki + perempuan;
+
+    const genderChartConfig = {
+        chart: {
+            height: 365,
+            parentHeightOffset: 0,
+            type: 'donut',
+            toolbar: {
+                show: false
+            }
+        },
+
+        labels: ['Laki-laki', 'Perempuan'],
+
+        series: [lakiLaki, perempuan],
+
+        colors: [
+            config.colors.primary,
+            config.colors.secondary
+        ],
+
+        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 ageGroupChartConfig = {
+            chart: {
+                height: 320,
+                type: 'bar',
+                parentHeightOffset: 0,
+                toolbar: {
+                    show: false
+                }
+            },
+
+            series: [
+                {
+                    name: 'Petani',
+                    data: [
+                        @json($data['kelompok_umur']['kurang_30']),
+                        @json($data['kelompok_umur']['30_39']),
+                        @json($data['kelompok_umur']['40_49']),
+                        @json($data['kelompok_umur']['50_59']),
+                        @json($data['kelompok_umur']['60_keatas'])
+                    ]
+                }
+            ],
+
+            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:&nbsp;
+                            <strong>${value} petani</strong>
+                        </div>
+                    `;
+                }
+            },
+
+            responsive: [
+                {
+                    breakpoint: 576,
+
+                    options: {
+                        chart: {
+                            height: 300
+                        },
+
+                        plotOptions: {
+                            bar: {
+                                columnWidth: '55%'
+                            }
+                        }
+                    }
+                }
+            ]
+        };
+
+        const ageGroupChart = new ApexCharts(
+            ageGroupChartEl,
+            ageGroupChartConfig
+        );
+
+        ageGroupChart.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 totalPendidikan = educationData.reduce(
+                (total, value) => total + value,
+                0
+            );
+
+            const educationChartConfig = {
+                chart: {
+                    height: 330,
+                    type: 'bar',
+                    parentHeightOffset: 0,
+                    toolbar: {
+                        show: false
+                    }
+                },
+
+                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}:&nbsp;
+                                <strong>
+                                    ${value} petani (${percentage}%)
+                                </strong>
+                            </div>
+                        `;
+                    }
+                }
+            };
+
+            const educationChart = new ApexCharts(
+                educationChartEl,
+                educationChartConfig
+            );
+
+            educationChart.render();
+        }
+
+        const commodityChartEl = document.querySelector('#commodityChart');
+
+        if (commodityChartEl) {
+
+            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
+                    }
+                },
+
+                labels: commodityLabels,
+
+                series: commoditySeries,
+
+                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}:&nbsp;
+
+                                <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'
+                            }
+                        }
+                    }
+                ]
+            };
+
+            const commodityChart = new ApexCharts(
+                commodityChartEl,
+                commodityChartConfig
+            );
+
+            commodityChart.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 totalLandFarmers = landAreaData.reduce(
+                (total, value) => total + value,
+                0
+            );
+
+            const landAreaChartConfig = {
+                chart: {
+                    height: 330,
+                    type: 'bar',
+                    parentHeightOffset: 0,
+                    toolbar: {
+                        show: false
+                    }
+                },
+
+                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}:&nbsp;
+
+                                <strong>
+                                    ${value} petani
+                                    (${percentage}%)
+                                </strong>
+                            </div>
+                        `;
+                    }
+                }
+            };
+
+            const landAreaChart = new ApexCharts(
+                landAreaChartEl,
+                landAreaChartConfig
+            );
+
+            landAreaChart.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 totalIncomeFarmers = incomeData.reduce(
+                (total, value) => total + value,
+                0
+            );
+
+            const incomeChartConfig = {
+                chart: {
+                    height: 330,
+                    type: 'bar',
+                    parentHeightOffset: 0,
+                    toolbar: {
+                        show: false
+                    }
+                },
+
+                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}:&nbsp;
+
+                                <strong>
+                                    ${value} petani
+                                    (${percentage}%)
+                                </strong>
+                            </div>
+                        `;
+                    }
+                }
+            };
+
+            const incomeChart = new ApexCharts(
+                incomeChartEl,
+                incomeChartConfig
+            );
+
+            incomeChart.render();
+        }
+    }
+});
+</script>
+@endpush
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 98bceb7..aacd6db 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -46,6 +46,7 @@ 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/indeks-petani', [App\Http\Controllers\Web\Dashboard\IndeksPetaniController::class, 'index'])->name('dashboard.indeks-petani');