Update Dashboard & Sidebar

app/Http/Controllers/Web/Dashboard/IndeksPetaniController.php

@@ -466,17 +466,21 @@ class IndeksPetaniController extends Controller
             ->groupBy('petani.desa_kelurahan_id') 
             ->get();
 
-        $segmenDominan = $mapSegmentasi
+        $segmentasiGroups = $mapSegmentasi->groupBy('desa_kelurahan_id');
-            ->groupBy('desa_kelurahan_id')
+        $jumlahSegmenByDesa = $segmentasiGroups
+            ->map(fn ($items) => $items->pluck('total', 'segmen'));
+
+        $segmenDominan = $segmentasiGroups
             ->map(function ($items) {
-                return $items->sortByDesc('total')->first();
+                return $items->reduce(fn ($largest, $item) => $largest === null || $item->total > $largest->total ? $item : $largest);
             });
 
-        $mapAvgSkorSegmentasi->each(function ($item) use ($segmenDominan) {
+        $mapAvgSkorSegmentasi->each(function ($item) use ($segmenDominan, $jumlahSegmenByDesa) {
             $dominan = $segmenDominan->get($item->desa_kelurahan_id);
 
             $item->segmen_dominan = $dominan?->segmen;
             $item->jumlah_dominan = $dominan?->total;
+            $item->jumlah_segmen = $jumlahSegmenByDesa->get($item->desa_kelurahan_id, collect());
         });
 
         $segmentasiByDesa = $mapAvgSkorSegmentasi->keyBy('desa_kelurahan_id');
@@ -505,7 +509,9 @@ class IndeksPetaniController extends Controller
         $segmentStyles = collect($this->segments())->keyBy('name');
         $mapDesaSegmentasi = $this->villageData($this->filters($request), false);
 
-        $rows = $mapDesaSegmentasi->map(function ($desa) use ($segmentStyles) {
+        $segmentNames = ['Pemula', 'Perintis', 'Pemerhati', 'Penggerak', 'Belum Lengkap'];
+        $rows = $mapDesaSegmentasi->map(function ($desa) use ($segmentStyles, $segmentNames) {
+            $total = (int) $desa->segmentasi->jumlah_petani;
 
             $style = $segmentStyles[$desa->segmentasi->segmen] ?? ['color' => 'secondary'];
             $styleDominan = $segmentStyles[$desa->segmentasi->segmen_dominan] ?? ['color' => 'secondary'];
@@ -519,6 +525,16 @@ class IndeksPetaniController extends Controller
                 'jumlah_dominan' => $desa->segmentasi->jumlah_dominan,
                 'color' => $style['color'],
                 'color_dominan' => $styleDominan['color'],
+                'segments' => collect($segmentNames)
+                    ->mapWithKeys(function ($name) use ($desa, $segmentStyles, $total) {
+                        $count = (int) $desa->segmentasi->jumlah_segmen->get($name, 0);
+
+                        return [strtolower(str_replace(' ', '_', $name)) => [
+                            'count' => $count,
+                            'percentage' => $total > 0 ? round($count / $total * 100, 2) : 0,
+                            'color' => $segmentStyles[$name]['color'] ?? 'secondary',
+                        ]];
+                    })->all(),
             ];
         });
 

public/assets/css/demo.css

@@ -103,3 +103,85 @@
   text-align: center;
   margin-top: 1rem;
 }
+
+/* Sidebar icon tiles: keep the icon mask on the inner element. */
+#layout-menu .menu-inner > .menu-item > .menu-link > .sidebar-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 30px;
+  width: 30px;
+  height: 30px;
+  border-radius: 9px;
+  color: var(--sidebar-icon-color, var(--bs-secondary));
+  background: var(--sidebar-icon-bg, rgba(var(--bs-secondary-rgb), 0.1));
+  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
+}
+
+#layout-menu .sidebar-icon > .ti {
+  width: 21px;
+  height: 21px;
+  font-size: 21px;
+}
+
+#layout-menu .sidebar-icon:has(.tabler-dashboard),
+#layout-menu .sidebar-icon:has(.tabler-database) {
+  --sidebar-icon-color: var(--bs-primary);
+  --sidebar-icon-bg: rgba(var(--bs-primary-rgb), 0.12);
+}
+
+#layout-menu .sidebar-icon:has(.tabler-user-circle),
+#layout-menu .sidebar-icon:has(.tabler-id-badge-2),
+#layout-menu .sidebar-icon:has(.tabler-plant) {
+  --sidebar-icon-color: var(--bs-success);
+  --sidebar-icon-bg: rgba(var(--bs-success-rgb), 0.12);
+}
+
+#layout-menu .sidebar-icon:has(.tabler-users-group),
+#layout-menu .sidebar-icon:has(.tabler-sitemap) {
+  --sidebar-icon-color: var(--bs-info);
+  --sidebar-icon-bg: rgba(var(--bs-info-rgb), 0.12);
+}
+
+#layout-menu .sidebar-icon:has(.tabler-building-community),
+#layout-menu .sidebar-icon:has(.tabler-heart-handshake) {
+  --sidebar-icon-color: var(--bs-warning);
+  --sidebar-icon-bg: rgba(var(--bs-warning-rgb), 0.12);
+}
+
+#layout-menu .sidebar-icon:has(.tabler-map-2),
+#layout-menu .sidebar-icon:has(.tabler-user-shield),
+#layout-menu .sidebar-icon:has(.tabler-route) {
+  --sidebar-icon-color: var(--bs-primary);
+  --sidebar-icon-bg: rgba(var(--bs-primary-rgb), 0.12);
+}
+
+#layout-menu .menu-item > .menu-link:hover > .sidebar-icon,
+#layout-menu .menu-item > .menu-link:focus-visible > .sidebar-icon {
+  transform: translateY(-1px);
+}
+
+#layout-menu .menu-inner > .menu-item.active > .menu-link > .sidebar-icon {
+  color: inherit;
+  background: rgba(255, 255, 255, 0.18);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #layout-menu .menu-inner > .menu-item > .menu-link > .sidebar-icon {
+    transition: none;
+    transform: none;
+  }
+}
+
+/* Submenu icons replace the template's decorative bullets. */
+#layout-menu .menu-sub > .menu-item > .menu-link::before { display: none; }
+#layout-menu .menu-sub .sidebar-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 22px;
+  width: 22px;
+  height: 22px;
+  color: inherit;
+}
+#layout-menu .menu-sub .sidebar-icon > .ti { width: 19px; height: 19px; font-size: 19px; }

resources/views/dashboard/karakteristik-petani.blade.php

@@ -3,6 +3,12 @@
 @push('style')
 <link rel="stylesheet" href="{{ asset('assets/vendor/libs/apex-charts/apex-charts.css') }}" />
 <style>
+    .readiness-score-list { display: grid; gap: 12px; }
+    .readiness-score-row { display: flex; align-items: baseline; gap: 10px; font-size: 0.8125rem; line-height: 1.5; }
+    .readiness-score-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
+    .readiness-score-name { flex: 1; min-width: 0; }
+    .readiness-score-value { flex: 0 0 4ch; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--bs-heading-color); font-size: 0.875rem; font-weight: 600; }
+
     #farmerPagination .page-link {
         padding: 0.4809rem;
         font-size: 0.9375rem;
@@ -662,7 +668,7 @@
         </div>
         <div class="col-12">
             <div class="d-flex justify-content-between align-items-start gap-3">
-                <div><h5 class="mb-1">Kondisi Rumah Tangga dan Kelembagaan</h5><p class="text-body-secondary mb-0">Gambaran tanggungan keluarga, penghasilan usaha tani, dan keanggotaan kelompok tani.</p></div>
+                <div><h5 class="mb-1">Sosial Ekonomi</h5><p class="text-body-secondary mb-0">Kondisi sosial ekonomi petani dilihat dari jumlah tanggungan keluarga, penghasilan usaha tani, dan keterlibatan dalam kelompok tani.</p></div>
                 <button type="button" class="btn btn-label-secondary btn-sm chart-group-toggle" data-bs-toggle="collapse" data-bs-target="#rumah-tangga-charts" aria-expanded="true" aria-controls="rumah-tangga-charts">Sembunyikan Chart</button>
             </div>
             <div class="collapse show chart-group-panel" id="rumah-tangga-charts">
@@ -725,7 +731,7 @@
         </div>
         <div class="col-12">
             <div class="d-flex justify-content-between align-items-start gap-3">
-                <div><h5 class="mb-1">Profil Usaha Tani</h5><p class="text-body-secondary mb-0">Gambaran komoditas yang dikelola, luas lahan, dan status kepemilikan lahan.</p></div>
+                <div><h5 class="mb-1">Profil Lahan</h5><p class="text-body-secondary mb-0">Karakteristik lahan usaha tani berdasarkan komoditas utama, luas lahan garapan, dan status kepemilikan lahan.</p></div>
                 <button type="button" class="btn btn-label-secondary btn-sm chart-group-toggle" data-bs-toggle="collapse" data-bs-target="#usaha-tani-charts" aria-expanded="true" aria-controls="usaha-tani-charts">Sembunyikan Chart</button>
             </div>
             <div class="collapse show chart-group-panel" id="usaha-tani-charts">
@@ -980,7 +986,7 @@
 
     <div class="py-4">
         <div class="d-flex justify-content-between align-items-start gap-3">
-            <div><h5 class="mb-1">Indeks Petani</h5><p class="text-body-secondary mb-0">Distribusi tingkat kesiapan adopsi petani secara keseluruhan dan per komoditas.</p></div>
+            <div><h5 class="mb-1">Indeks Petani</h5><p class="text-body-secondary mb-0">Komposisi petani menurut tingkat kesiapan adopsi, secara keseluruhan dan pada setiap komoditas.</p></div>
             <button type="button" class="btn btn-label-secondary btn-sm chart-group-toggle" data-bs-toggle="collapse" data-bs-target="#indeks-segmentasi-charts" aria-expanded="true" aria-controls="indeks-segmentasi-charts">Sembunyikan Chart</button>
         </div>
         <div class="collapse show chart-group-panel" id="indeks-segmentasi-charts">
@@ -990,7 +996,7 @@
                 <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 Indeks Petani</h5>
-                        <p class="card-subtitle">sesuai filter dashboard</p>
+                        <p class="card-subtitle">Jumlah dan proporsi petani pada setiap segmen kesiapan adopsi.</p>
                     </div>
                 </div>
                 <div class="card-body">
@@ -1019,7 +1025,8 @@
                 <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 Indeks Petani</h5>
-                        <p class="card-subtitle">per komoditas</p>
+                        <p class="card-subtitle">Perbandingan komposisi segmen kesiapan adopsi petani antar-komoditas.</p>
+
                     </div>
                 </div>
                 <div class="card-body">
@@ -1033,7 +1040,7 @@
     </div>
     <div class="py-4">
         <div class="d-flex justify-content-between align-items-start gap-3">
-            <div><h5 class="mb-1">Dimensi dan Komponen Kesiapan Adopsi</h5><p class="text-body-secondary mb-0">Gambaran rata-rata kesiapan adopsi berdasarkan dimensi dan komponen penilaian.</p></div>
+            <div><h5 class="mb-1">Dimensi dan Komponen Kesiapan Adopsi</h5><p class="text-body-secondary mb-0">Perbandingan skor tiap dimensi dan komponen untuk mengenali aspek kesiapan adopsi yang kuat dan yang perlu ditingkatkan.</p></div>
             <button type="button" class="btn btn-label-secondary btn-sm chart-group-toggle" data-bs-toggle="collapse" data-bs-target="#indeks-kesiapan-charts" aria-expanded="true" aria-controls="indeks-kesiapan-charts">Sembunyikan Chart</button>
         </div>
         <div class="collapse show chart-group-panel" id="indeks-kesiapan-charts">
@@ -1042,23 +1049,14 @@
             <div class="card card-border-shadow-info h-100">
                 <div class="card-header d-flex justify-content-between align-items-center">
                     <div class="card-title mb-0">
-                        <h5 class="m-0 me-2">Rata-rata Dimensi Kesiapan Adopsi</h5>
+                        <h5 class="m-0 me-2">Dimensi Kesiapan Adopsi</h5>
-                        <p class="card-subtitle">sesuai filter dashboard</p>
+                        <p class="card-subtitle">Rata-rata skor budidaya, sosial ekonomi rumah tangga, serta rantai nilai dan akses pasar.</p>
                     </div>
                 </div>
                 <div class="card-body">
                     <div id="chart-dimensi"></div>
-                    <div class="d-flex flex-wrap gap-3 mt-3 small justify-content-center">
+                    <p class="small text-body-secondary text-center mb-0">Skala skor 0–5</p>
-                        <div>
+                    <div id="chart-dimensi-scores" class="readiness-score-list mt-3" aria-live="polite"><p class="text-body-secondary small mb-0">Memuat informasi skor…</p></div>
-                            Sistem &amp; Praktik Budidaya
-                        </div>
-                        <div>
-                            Sosial Ekonomi Rumah Tangga
-                        </div>
-                        <div>
-                            Rantai Nilai &amp; Akses Pasar
-                        </div>
-                    </div>
                 </div>
             </div>
         </div>
@@ -1066,32 +1064,14 @@
             <div class="card card-border-shadow-warning h-100">
                 <div class="card-header d-flex justify-content-between align-items-center">
                     <div class="card-title mb-0">
-                        <h5 class="m-0 me-2">Rata-rata Komponen Kesiapan Adopsi</h5>
+                        <h5 class="m-0 me-2">Komponen Kesiapan Adopsi</h5>
-                        <p class="card-subtitle">sesuai filter dashboard</p>
+                        <p class="card-subtitle">Rata-rata skor enam komponen yang membentuk kesiapan adopsi petani.</p>
                     </div>
                 </div>
                 <div class="card-body">
                     <div id="chart-komponen"></div>
-                    <div class="d-flex flex-wrap gap-3 mt-3 small justify-content-center">
+                    <p class="small text-body-secondary text-center mb-0">Skala skor 0–5</p>
-                        <div>
+                    <div id="chart-komponen-scores" class="readiness-score-list mt-3" aria-live="polite"><p class="text-body-secondary small mb-0">Memuat informasi skor…</p></div>
-                            Motivasi &amp; Kapasitas Adopsi
-                        </div>
-                        <div>
-                            Kondisi Ekonomi Rumah Tangga
-                        </div>
-                        <div>
-                            Praktik Budidaya &amp; GAP
-                        </div>
-                        <div>
-                            Keterlibatan Kelembagaan
-                        </div>
-                        <div>
-                            Akses &amp; Kebebasan Keuangan
-                        </div>
-                        <div>
-                            Rantai Nilai &amp; Akses Pasar
-                        </div>
-                    </div>
                 </div>
             </div>
         </div>
@@ -1101,7 +1081,7 @@
     </div>
     <div class="py-4">
         <div class="d-flex justify-content-between align-items-start gap-3">
-            <div><h5 class="mb-1">Sebaran Wilayah</h5><p class="text-body-secondary mb-0">Peta sebaran petani dan ringkasan indeks pada setiap desa.</p></div>
+            <div><h5 class="mb-1">Sebaran wilayah petani</h5><p class="text-body-secondary mb-0">Perbandingan tingkat kesiapan adopsi antarwilayah melalui peta dan komposisi segmen petani di setiap desa/kelurahan.</p></div>
             <button type="button" class="btn btn-label-secondary btn-sm chart-group-toggle" data-bs-toggle="collapse" data-bs-target="#indeks-wilayah-charts" aria-expanded="true" aria-controls="indeks-wilayah-charts">Sembunyikan Chart</button>
         </div>
         <div class="collapse show chart-group-panel" id="indeks-wilayah-charts">
@@ -1110,8 +1090,8 @@
             <div class="card card-border-shadow-danger h-100">
                 <div class="card-header d-flex justify-content-between align-items-center">
                     <div class="card-title mb-0">
-                        <h5 class="m-0 me-2">Sebaran Indeks Petani</h5>
+                        <h5 class="m-0 me-2">Peta Sebaran</h5>
-                        <p class="card-subtitle">berdasarkan wilayah sesuai filter dashboard</p>
+                        <p class="card-subtitle">Warna wilayah menunjukkan kategori rata-rata indeks kesiapan adopsi petani di setiap desa/kelurahan.</p>
                     </div>
                 </div>
                 <div class="card-body">
@@ -1121,7 +1101,7 @@
                         </button>
                         <div id="map-sebaran-petani" style="height: 430px;"></div>
                     </div>
-                    <span class="small text-muted">*klik pada desa untuk menampilkan detail informasi dan menyaring daftar petani</span>
+                    <span class="small text-muted">Klik wilayah desa/kelurahan untuk melihat rincian dan menyaring daftar petani.</span>
                 </div>
             </div>
         </div>
@@ -1129,18 +1109,21 @@
             <div class="card card-border-shadow-success h-100">
                 <div class="card-header d-flex justify-content-between align-items-center">
                     <div class="card-title mb-0">
-                        <h5 class="m-0 me-2">Distribusi Indeks Petani</h5>
+                        <h5 class="m-0 me-2">Tabel Sebaran</h5>
-                        <p class="card-subtitle">berdasarkan wilayah sesuai filter dashboard</p>
+                        <p class="card-subtitle">Jumlah dan persentase petani pada setiap segmen kesiapan adopsi serta kategori belum lengkap, dikelompokkan menurut desa/kelurahan.</p>
                     </div>
                 </div>
                 <div class="card-body">
                     <table id="table-desa" class="table card-table table-border-top-0 table-border-bottom-0">
                         <thead>
                             <tr>
-                                <th class="pe-0">Desa/Kelurahan</th>
+                                <th class="pe-0">Desa/kelurahan</th>
-                                <th class="text-end pe-0">Petani</th>
+                                <th class="text-end pe-0">Total Petani</th>
-                                <th class="pe-0">Segmen Rata-rata</th>
+                                <th class="text-end text-danger pe-0">Pemula</th>
-                                <th class="pe-0">Segmen Dominan</th>
+                                <th class="text-end text-info pe-0">Perintis</th>
+                                <th class="text-end text-warning pe-0">Pemerhati</th>
+                                <th class="text-end text-success pe-0">Penggerak</th>
+                                <th class="text-end text-secondary pe-0">Belum lengkap</th>
                             </tr>
                         </thead>
                         <tbody></tbody>
@@ -1161,7 +1144,7 @@
                             <h5 class="card-title mb-0">Daftar Petani</h5>
                             <span class="badge bg-label-primary" id="indexFarmerTotalBadge">0 petani</span>
                         </div>
-                        <small class="text-body-secondary">Menampilkan data petani sesuai filter dashboard</small>
+                        <small class="text-body-secondary">Rincian wilayah, komoditas, luas lahan, skor kesiapan adopsi, dan segmen setiap petani.</small>
                     </div>
                     <div class="d-flex align-items-center gap-2">
                         <div class="input-group input-group-merge" style="width: 220px;">
@@ -2961,244 +2944,140 @@ document.addEventListener('DOMContentLoaded', function () {
     })
 </script>
 <script>
-    $(document).ready(function () {
+    function formatReadinessScore(value) {
-        var radarDimensi = new ApexCharts($("#chart-dimensi")[0], {
+        if (value === null || value === undefined || value === '' || !Number.isFinite(Number(value))) return '—';
-            chart: {
+        return Number(value).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-                height: 380,
+    }
-                type: 'radar',
+
-                toolbar: {
+    function spaceReadinessRadarLabels(chart) {
-                    show: false
+        chart.el.querySelectorAll('.apexcharts-radar-series .apexcharts-xaxis-label').forEach(function (label) {
-                }
+            var x = Number(label.getAttribute('x')) || 0;
-            },
+            var y = Number(label.getAttribute('y')) || 0;
-            series: [{
+            var dx = Math.abs(x) > 10 ? (x > 0 ? 16 : -16) : 0;
-                name: "Rata-rata Dimensi Kesiapan Adopsi",
+            var dy = Math.abs(x) <= 10 ? (y > 0 ? 20 : -20) : 0;
-                data: []
+            label.setAttribute('transform', 'translate(' + dx + ',' + dy + ')');
-            }],
-            labels: [
-                'Sistem & Praktik Budidaya',
-                'Sosial Ekonomi Rumah Tangga',
-                'Rantai Nilai & Akses Pasar'
-            ],
-            plotOptions: {
-                radar: {
-                    polygons: {
-                        strokeColors: borderColor,
-                        connectorColors: borderColor
-                    }
-                }
-            },
-            stroke: {
-                width: 2
-            },
-            legend: {
-                show: true,
-                fontSize: '13px',
-                position: 'bottom',
-                labels: {
-                    colors: legendColor,
-                    useSeriesColors: false
-                },
-                markers: {
-                    height: 12,
-                    width: 12
-                },
-                itemMargin: {
-                    horizontal: 10
-                },
-                onItemHover: {
-                    highlightDataSeries: false
-                }
-            },
-            colors: [config.colors.primary],
-            fill: {
-                opacity: 0.85
-            },
-            markers: {
-                show: true,
-                width: 1
-            },
-            grid: {
-                show: false,
-                padding: {
-                    top: -25,
-                    bottom: -5
-                }
-            },
-            xaxis: {
-                categories: [['Sistem & Praktik', 'Budidaya'], ['Sosial Ekonomi', 'Rumah Tangga'], ['Rantai Nilai &', 'Akses Pasar']],
-                labels: {
-                    show: true,
-                    style: {
-                        colors: [labelColor, labelColor, labelColor],
-                        fontSize: '13px',
-                        fontFamily: fontFamily
-                    }
-                }
-            },
-            yaxis: {
-                show: true,
-                min: 0,
-                max: 5,
-                tickAmount: 5
-            },
-            responsive: [{
-                breakpoint: 769,
-                options: {
-                    chart: {
-                        height: 400
-                    }
-                }
-            }]
         });
+        var categoryBoxes = Array.from(chart.el.querySelectorAll('.apexcharts-radar-series .apexcharts-xaxis-label'), function (label) { return label.getBoundingClientRect(); });
+        var scoreLabels = chart.el.querySelectorAll('.apexcharts-datalabels .apexcharts-datalabel');
+        scoreLabels.forEach(function (label, index) {
+            var angle = (2 * Math.PI * index / chart.w.config.labels.length) - Math.PI / 2;
+            var x = Number(label.getAttribute('x')) || 0;
+            var y = Number(label.getAttribute('y')) || 0;
+            var radius = Math.sqrt(x * x + y * y);
+            var distance = Math.max(18, 30 - radius);
+            var dx = Math.cos(angle) * distance;
+            var dy = Math.sin(angle) * distance;
+            label.setAttribute('transform', 'translate(' + dx + ',' + dy + ')');
+            label.setAttribute('text-anchor', Math.abs(dx) < 5 ? 'middle' : (dx > 0 ? 'start' : 'end'));
+            label.style.paintOrder = 'stroke';
+            label.style.stroke = config.colors.cardColor;
+            label.style.strokeWidth = '3px';
+            label.style.strokeLinejoin = 'round';
+            label.style.pointerEvents = 'none';
+            // ApexCharts moves the score group outside the series after rendering.
+            // Keep a clear gap from category labels even when a score reaches 5.
+            for (var attempt = 0; attempt < 7; attempt++) {
+                var scoreBox = label.getBoundingClientRect();
+                var overlapsCategory = categoryBoxes.some(function (box) {
+                    return scoreBox.left < box.right + 10 && scoreBox.right > box.left - 10 &&
+                        scoreBox.top < box.bottom + 10 && scoreBox.bottom > box.top - 10;
+                });
+                if (!overlapsCategory || distance <= 12) break;
+                distance = Math.max(12, distance - 4);
+                dx = Math.cos(angle) * distance;
+                dy = Math.sin(angle) * distance;
+                label.setAttribute('transform', 'translate(' + dx + ',' + dy + ')');
+            }
+        });
+    }
 
+    function readinessRadarOptions(title, labels, categories, pointColors) {
+        return {
+            chart: {
+                height: 420, type: 'radar', toolbar: { show: false }, animations: { enabled: false },
+                events: { mounted: spaceReadinessRadarLabels, updated: spaceReadinessRadarLabels }
+            },
+            series: [{ name: title, data: [] }],
+            labels: labels,
+            plotOptions: { radar: { polygons: { strokeColors: borderColor, connectorColors: borderColor } } },
+            stroke: { width: 2 },
+            legend: { show: false },
+            colors: [config.colors.primary],
+            fill: { opacity: 0.12 },
+            markers: {
+                size: 5, strokeWidth: 2, strokeColors: config.colors.cardColor, hover: { sizeOffset: 2 },
+                discrete: pointColors.map(function (color, index) {
+                    return { seriesIndex: 0, dataPointIndex: index, fillColor: color, strokeColor: config.colors.cardColor, size: 6 };
+                })
+            },
+            dataLabels: {
+                enabled: true,
+                formatter: formatReadinessScore,
+                offsetX: 0, offsetY: 0,
+                style: { fontSize: '12px', fontFamily: fontFamily, fontWeight: 600, colors: [config.colors.headingColor] },
+                background: { enabled: false },
+                dropShadow: { enabled: false }
+            },
+            tooltip: { enabled: false },
+            grid: { show: false, padding: { top: 28, bottom: 24 } },
+            xaxis: { categories: categories, labels: { show: true, style: { colors: labels.map(function () { return legendColor; }), fontSize: '13px', fontFamily: fontFamily, fontWeight: 500 } } },
+            yaxis: {
+                show: false, min: 0, max: 5, tickAmount: 5,
+                labels: { show: false }
+            },
+            responsive: [{ breakpoint: 769, options: { chart: { height: 420 }, xaxis: { labels: { style: { fontSize: '11px' } } } } }]
+        };
+    }
 
-
+    function updateReadinessScoreLegend(chart, containerId, values, colors) {
-        function loadChartRadarDimensi() {
+        var container = document.getElementById(containerId);
-
+        var fragment = document.createDocumentFragment();
-            $.ajax({
+        chart.w.config.labels.forEach(function (label, index) {
-                url: "{{ route('dashboard.indeks-petani.dimensi') }}",
+            var row = document.createElement('div');
-                type: "GET",
+            row.className = 'readiness-score-row';
-                data: dashboardFilterParams.toString(),
+            var dot = document.createElement('span');
-                dataType: "json",
+            dot.className = 'readiness-score-dot';
-                beforeSend: function() {
+            dot.style.backgroundColor = colors[index];
-                    // optional
+            dot.setAttribute('aria-hidden', 'true');
-                    // tampilkan loading
+            var name = document.createElement('span');
-                },
+            name.className = 'readiness-score-name';
-                success: function(response) {
+            name.textContent = label;
-                    radarDimensi.updateSeries([{
+            var score = document.createElement('strong');
-                        name: "Rata-rata Dimensi Kesiapan Adopsi",
+            score.className = 'readiness-score-value';
-                        data: response.radarDimensi
+            score.textContent = formatReadinessScore(values[index]);
-                    }]);
+            row.append(dot, name, score);
-                },
+            fragment.appendChild(row);
-                error: function(xhr) {
+        });
-                    console.error(
+        container.replaceChildren(fragment);
-                        'Gagal mengambil data chart:',
+    }
-                        xhr.responseText
-                    );
-                }
-            });
-        }
-
-        radarDimensi.render().then(loadChartRadarDimensi);
-    })
 </script>
 <script>
     $(document).ready(function () {
-        var radarKomponen = new ApexCharts($("#chart-komponen")[0], {
+        var palette = [config.colors.success, config.colors.primary, config.colors.warning, config.colors.info, config.colors.danger, config.colors.secondary];
-            chart: {
+        [
-                height: 380,
+            { id: 'dimensi', key: 'radarDimensi', url: "{{ route('dashboard.indeks-petani.dimensi') }}", title: "Dimensi Kesiapan Adopsi", labels: ["Sistem & Praktik Budidaya","Sosial Ekonomi Rumah Tangga","Rantai Nilai & Akses Pasar"], categories: [["Sistem & Praktik","Budidaya"],["Sosial Ekonomi","Rumah Tangga"],["Rantai Nilai &","Akses Pasar"]] },
-                type: 'radar',
+            { id: 'komponen', key: 'radarKomponen', url: "{{ route('dashboard.indeks-petani.komponen') }}", title: "Komponen Kesiapan Adopsi", labels: ["Motivasi & Kapasitas Adopsi","Kondisi Ekonomi Rumah Tangga","Praktik Budidaya & GAP","Keterlibatan Kelembagaan","Akses & Kebebasan Keuangan","Rantai Nilai & Akses Pasar"], categories: [["Motivasi & Kapasitas","Adopsi"],["Kondisi Ekonomi","Rumah Tangga"],["Praktik Budidaya","& GAP"],["Keterlibatan","Kelembagaan"],["Akses & Kebebasan","Keuangan"],["Rantai Nilai &","Akses Pasar"]] }
-                toolbar: {
+        ].forEach(function (definition) {
-                    show: false
+            var pointColors = palette.slice(0, definition.labels.length);
-                }
+            var chart = new ApexCharts(document.getElementById('chart-' + definition.id), readinessRadarOptions(definition.title, definition.labels, definition.categories, pointColors));
-            },
+            chart.render().then(function () {
-            series: [{
+                return $.ajax({
-                name: "Rata-rata Komponen Kesiapan Adopsi",
+                    url: definition.url,
-                data: []
+                    type: 'GET',
-            }],
+                    data: dashboardFilterParams.toString(),
-            labels: ['Motivasi & Kapasitas Adopsi', 'Kondisi Ekonomi Rumah Tangga', 'Praktik Budidaya & GAP', 'Keterlibatan Kelembagaan', 'Akses & Kebebasan Keuangan', 'Rantai Nilai & Akses Pasar'],
+                    dataType: 'json'
-            plotOptions: {
+                }).then(function (response) {
-                radar: {
+                    var values = response[definition.key];
-                    polygons: {
+                    if (!Array.isArray(values)) throw new Error('Data radar tidak valid');
-                        strokeColors: borderColor,
+                    updateReadinessScoreLegend(chart, 'chart-' + definition.id + '-scores', values, pointColors);
-                        connectorColors: borderColor
+                    return chart.updateSeries([{ name: definition.title, data: values }]);
-                    }
+                });
-                }
+            }).catch(function (error) {
-            },
+                document.getElementById('chart-' + definition.id + '-scores').textContent = 'Informasi skor belum dapat dimuat.';
-            stroke: {
+                console.error('Gagal memuat radar ' + definition.id + ':', error);
-                width: 2
-            },
-            legend: {
-                show: true,
-                fontSize: '13px',
-                position: 'bottom',
-                labels: {
-                    colors: legendColor,
-                    useSeriesColors: false
-                },
-                markers: {
-                    height: 12,
-                    width: 12
-                },
-                itemMargin: {
-                    horizontal: 10
-                },
-                onItemHover: {
-                    highlightDataSeries: false
-                }
-            },
-            colors: [config.colors.primary],
-            fill: {
-                opacity: 0.85
-            },
-            markers: {
-                show: true,
-                width: 1
-            },
-            grid: {
-                show: false,
-                padding: {
-                    top: -25,
-                    bottom: -5
-                }
-            },
-            xaxis: {
-                categories: [['Motivasi & Kapasitas', 'Adopsi'], ['Kondisi Ekonomi', 'Rumah Tangga'], ['Praktik Budidaya', '& GAP'], ['Keterlibatan', 'Kelembagaan'], ['Akses & Kebebasan', 'Keuangan'], ['Rantai Nilai &', 'Akses Pasar']],
-                labels: {
-                    show: true,
-                    style: {
-                        colors: [labelColor, labelColor, labelColor, labelColor, labelColor, labelColor],
-                        fontSize: '13px',
-                        fontFamily: fontFamily
-                    }
-                }
-            },
-            yaxis: {
-                show: true,
-                min: 0,
-                max: 5,
-                tickAmount: 5
-            },
-            responsive: [{
-                breakpoint: 769,
-                options: {
-                    chart: {
-                        height: 400
-                    }
-                }
-            }]
-        });
-
-
-
-        function loadChartRadarKomponen() {
-
-            $.ajax({
-                url: "{{ route('dashboard.indeks-petani.komponen') }}",
-                type: "GET",
-                data: dashboardFilterParams.toString(),
-                dataType: "json",
-                beforeSend: function() {
-                    // optional
-                    // tampilkan loading
-                },
-                success: function(response) {
-                    radarKomponen.updateSeries([{
-                        name: "Rata-rata Komponen Kesiapan Adopsi",
-                        data: response.radarKomponen
-                    }]);
-                },
-                error: function(xhr) {
-                    console.error(
-                        'Gagal mengambil data chart:',
-                        xhr.responseText
-                    );
-                }
             });
-        }
+        });
-
+    });
-        radarKomponen.render().then(loadChartRadarKomponen);
-    })
 </script>
 <script>
     $(document).ready(function () {
@@ -3378,42 +3257,26 @@ document.addEventListener('DOMContentLoaded', function () {
                 "dataType": "json"
             },
             columns: [
+                { data: 'desa', render: $.fn.dataTable.render.text() },
                 {
-                    data: 'desa'
+                    data: 'jumlah_petani', className: 'text-end',
-                },
+                    render: function (data, type) {
-                {
+                        return type === 'display' ? Number(data).toLocaleString('id-ID') : Number(data);
-                    data: 'jumlah_petani',
-                    className: 'text-end',
-                    render: function(data) {
-                        return Number(data).toLocaleString('id-ID');
-                    }
-                },
-                {
-                    data: null,
-                    render: function(data) {
-                        return `
-                            <span class="badge bg-${data.color ?? 'secondary'}">
-                                ${data.segmen ?? '-'}
-                            </span>
-                            (${Number(data.skor).toLocaleString('id-ID', {
-                                minimumFractionDigits: 2,
-                                maximumFractionDigits: 2
-                            })})
-                        `;
-                    }
-                },
-                {
-                    data: null,
-                    render: function(data) {
-                        return `
-                            <span class="badge bg-${data.color_dominan ?? 'secondary'}">
-                                ${data.segmen_dominan ?? '-'}
-                            </span>
-                            (${Number(data.jumlah_dominan ?? 0).toLocaleString('id-ID')} petani)
-                        `;
                     }
                 }
-            ]
+            ].concat(['pemula', 'perintis', 'pemerhati', 'penggerak', 'belum_lengkap'].map(function (segment) {
+                return {
+                    data: 'segments.' + segment,
+                    className: 'text-end text-nowrap',
+                    render: function (data, type) {
+                        var count = Number(data && data.count) || 0;
+                        if (type !== 'display') return count;
+                        var percentage = Number(data && data.percentage || 0).toLocaleString('id-ID', { maximumFractionDigits: 2 });
+                        return '<span class="fw-semibold text-' + (data && data.color || 'secondary') + '">' + count.toLocaleString('id-ID') +
+                            '</span> <span class="text-body-secondary small">(' + percentage + '%)</span>';
+                    }
+                };
+            }))
         });
     })
 </script>

resources/views/layout/sidebar.blade.php

@@ -19,63 +19,62 @@
     <div class="menu-inner-shadow"></div>
 
     <ul class="menu-inner py-1">
-        <!-- Dashboards -->
+
         @php
-            $userRole = auth()->check() ? (auth()->user()->role instanceof \App\Enums\Role ? auth()->user()->role->value : auth()->user()->role) : null;
+            $user = auth()->user();
+            $userRole = $user?->role instanceof \App\Enums\Role ? $user->role->value : $user?->role;
+            $appName = env('APP_NAME');
+            $isAdmin = in_array($userRole, ['super_admin', 'admin'], true);
+            $isSuperAdmin = $userRole === 'super_admin';
+            $canViewDashboard = $isAdmin || $userRole === 'fasilitator';
         @endphp
 
-        @if(in_array($userRole, ['super_admin', 'admin', 'fasilitator']) )
+        @if($canViewDashboard)
-        <li class="menu-item active open">
+        <li class="menu-item {{ request()->routeIs('dashboard.*') ? 'active open' : '' }}">
             <a href="javascript:void(0);" class="menu-link menu-toggle">
-                <i class="menu-icon icon-base ti tabler-smart-home"></i>
+                <span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-dashboard"></i></span>
                 <div data-i18n="Dashboard">Dashboard</div>
             </a>
 
-            @if(in_array($userRole, ['super_admin', 'admin']) && env('APP_NAME') == 'AgroMonev')
+            @if($isAdmin && $appName === 'AgroMonev')
             <ul class="menu-sub">
                 <li class="menu-item {{ request()->routeIs(['dashboard.karakteristik-petani', 'dashboard.demografi-petani', 'dashboard.indeks-petani']) ? 'active' : '' }}">
                     <a href="{{ route('dashboard.karakteristik-petani') }}" class="menu-link">
-                        <div data-i18n="Karakteristik Petani">Karakteristik Petani</div>
+                        <span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-user-circle"></i></span><div data-i18n="Karakteristik Petani">Karakteristik Petani</div>
                     </a>
                 </li>
             </ul>
             <ul class="menu-sub">
                 <li class="menu-item {{ request()->routeIs('dashboard.produktivitas') ? 'active' : '' }}">
                     <a href="{{ route('dashboard.produktivitas') }}" class="menu-link">
-                        <div data-i18n="Produktivitas">Produktivitas</div>
+                        <span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-chart-bar"></i></span><div data-i18n="Produktivitas">Produktivitas</div>
                     </a>
                 </li>
             </ul>
             <ul class="menu-sub">
                 <li class="menu-item {{ request()->routeIs('dashboard.indikator-pertanian') ? 'active' : '' }}">
                     <a href="{{ route('dashboard.indikator-pertanian') }}" class="menu-link">
-                        <div data-i18n="Indikator Petani">Indikator Petani</div>
+                        <span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-chart-line"></i></span><div data-i18n="Indikator Petani">Indikator Petani</div>
                     </a>
                 </li>
             </ul>
             @endif
 
-            @if(in_array($userRole, ['super_admin', 'admin', 'fasilitator']) && env('APP_NAME') == 'AgroMonev')
+            @if($canViewDashboard && $appName === 'AgroMonev')
             <ul class="menu-sub">
                 <li class="menu-item {{ request()->routeIs('dashboard.survey-petani') ? 'active' : '' }}">
                     <a href="{{ route('dashboard.survey-petani') }}" class="menu-link">
-                        <div data-i18n="Survei Petani">Survei Petani</div>
+                        <span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-clipboard-list"></i></span><div data-i18n="Survei Petani">Survei Petani</div>
                     </a>
                 </li>
             </ul>
-            <!-- <ul class="menu-sub">
+
-                <li class="menu-item {{ request()->routeIs('dashboard.petani') ? 'active' : '' }}">
-                    <a href="{{ route('dashboard.petani') }}" class="menu-link">
-                        <div data-i18n="Petani">Petani</div>
-                    </a>
-                </li>
-            </ul> -->
             @endif
-            @if(in_array($userRole, ['super_admin', 'admin']) && env('APP_NAME') == 'AgroMonev-xx')
+            @if($isAdmin && $appName === 'AgroMonev-xx')
             <ul class="menu-sub">
                 <li class="menu-item {{ request()->routeIs('dashboard.bumdes') ? 'active' : '' }}">
                     <a href="{{ route('dashboard.bumdes') }}" class="menu-link">
-                        <div data-i18n="Profil Pengurus BUMDes">Profil Pengurus BUMDes</div>
+                        <span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-building-community"></i></span><div data-i18n="Profil Pengurus BUMDes">Profil Pengurus BUMDes</div>
                     </a>
                 </li>
             </ul>
@@ -83,210 +82,201 @@
         </li>
         @endif
 
-        @if(in_array($userRole, ['fasilitator', 'super_admin', 'admin']) && env('APP_NAME') == 'AgroMonev')
+        @if($canViewDashboard && $appName === 'AgroMonev')
-            <li class="menu-header small">
+            <li class="menu-item {{ request()->routeIs(['petani.*', 'kelompok-tani.*', 'bumdes.*', 'koperasi.*']) ? 'active open' : '' }}">
-                <span class="menu-header-text" data-i18n="Profil">Profil</span>
+            <a href="javascript:void(0);" class="menu-link menu-toggle">
-            </li>
+                <span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-id-badge-2"></i></span>
+                <div data-i18n="Profil">Profil</div>
+            </a>
+            <ul class="menu-sub">
             <li class="menu-item {{ request()->routeIs('petani.*') ? 'active' : '' }}">
                 <a href="{{ route('petani.index') }}" class="menu-link">
-                    <i class="menu-icon icon-base ti tabler-file-description"></i>
+                    <span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-user-circle"></i></span>
                     <div data-i18n="Petani">Petani</div>
                 </a>
             </li>
-            @if(in_array($userRole, ['super_admin', 'admin']) && env('APP_NAME') == 'AgroMonev')
+            @if($isAdmin && $appName === 'AgroMonev')
                 <li class="menu-item {{ request()->routeIs('kelompok-tani.*') ? 'active' : '' }}">
                     <a href="{{ route('kelompok-tani.index') }}" class="menu-link">
-                        <i class="menu-icon icon-base ti tabler-file-description"></i>
+                        <span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-users-group"></i></span>
                         <div data-i18n="Kelompok Tani">Kelompok Tani</div>
                     </a>
                 </li>
                 <li class="menu-item {{ request()->routeIs('bumdes.*') ? 'active' : '' }}">
                     <a href="{{ route('bumdes.index') }}" class="menu-link">
-                        <i class="menu-icon icon-base ti tabler-file-description"></i>
+                        <span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-building-community"></i></span>
                         <div data-i18n="BUMDes">BUMDes</div>
                     </a>
                 </li>
                 <li class="menu-item {{ request()->routeIs('koperasi.*') ? 'active' : '' }}">
                     <a href="{{ route('koperasi.pengurus.index') }}" class="menu-link">
-                        <i class="menu-icon icon-base ti tabler-file-description"></i>
+                        <span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-heart-handshake"></i></span>
                         <div data-i18n="Pengurus Koperasi">Pengurus Koperasi</div>
                     </a>
                 </li>
             @endif
+        </ul>
+        </li>
         @endif
 
-        @if(in_array($userRole, ['super_admin', 'admin']) && env('APP_NAME') == 'AgroPro')
+        @if($isAdmin && $appName === 'AgroPro')
-        <!-- Ekosistem -->
+
-        <li class="menu-header small">
+        <li class="menu-item {{ request()->routeIs(['petani.*', 'profile.*', 'produksi.*', 'lahan.*', 'tanaman.*', 'petani-cpm.*', 'lahan-cpcl.*', 'tabel.data.*', 'realisasi.*', 'kelompok-belajar-tani.*', 'workshop.*']) ? 'active open' : '' }}">
-            <span class="menu-header-text" data-i18n="Ekosistem">Ekosistem</span>
-        </li>
-        <li class="menu-item {{ request()->routeIs(['profile.*', 'produksi.*', 'lahan.*', 'tanaman.*']) ? 'active open' : '' }}">
             <a href="javascript:void(0);" class="menu-link menu-toggle">
-                <i class="menu-icon icon-base ti tabler-file-description"></i>
+                <span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-layers-linked"></i></span>
+                <div data-i18n="Ekosistem">Ekosistem</div>
+            </a>
+            <ul class="menu-sub">
+        <li class="menu-item {{ request()->routeIs(['petani.*', 'profile.*', 'produksi.*', 'lahan.*', 'tanaman.*']) ? 'active open' : '' }}">
+            <a href="javascript:void(0);" class="menu-link menu-toggle">
+                <span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-id-badge-2"></i></span>
                 <div data-i18n="Profil">Profil</div>
             </a>
             <ul class="menu-sub">
                 <li class="menu-item {{ request()->routeIs('petani.*') ? 'active' : '' }}">
-                    <a href="{{ route('petani.index') }}" class="menu-link"><div data-i18n="Petani">Petani</div></a>
+                    <a href="{{ route('petani.index') }}" class="menu-link"><span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-user-circle"></i></span><div data-i18n="Petani">Petani</div></a>
                 </li>
                 <li class="menu-item {{ request()->routeIs('produksi.*') ? 'active' : '' }}">
-                    <a href="{{ route('produksi.index') }}" class="menu-link"><div data-i18n="Hasil Panen">Hasil Panen</div></a>
+                    <a href="{{ route('produksi.index') }}" class="menu-link"><span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-wheat"></i></span><div data-i18n="Hasil Panen">Hasil Panen</div></a>
                 </li>
                 <li class="menu-item {{ request()->routeIs('lahan.*') ? 'active' : '' }}">
-                    <a href="{{ route('lahan.index') }}" class="menu-link"><div data-i18n="Pemantauan Lahan">Pemantauan Lahan</div></a>
+                    <a href="{{ route('lahan.index') }}" class="menu-link"><span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-map"></i></span><div data-i18n="Pemantauan Lahan">Pemantauan Lahan</div></a>
                 </li>
                 <li class="menu-item {{ request()->routeIs('tanaman.*') ? 'active' : '' }}">
-                    <a href="{{ route('tanaman.index') }}" class="menu-link"><div data-i18n="Pemantauan Tanaman">Pemantauan Tanaman</div></a>
+                    <a href="{{ route('tanaman.index') }}" class="menu-link"><span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-plant"></i></span><div data-i18n="Pemantauan Tanaman">Pemantauan Tanaman</div></a>
                 </li>
             </ul>
         </li>
 
         <li class="menu-item {{ request()->routeIs(['petani-cpm.*', 'lahan-cpcl.*', 'tabel.data.*']) ? 'active open' : '' }}">
             <a href="javascript:void(0);" class="menu-link menu-toggle">
-                <i class="menu-icon icon-base ti tabler-folder-root"></i>
+                <span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-database"></i></span>
                 <div data-i18n="Basis Data Ekosistem">Basis Data Ekosistem</div>
             </a>
             <ul class="menu-sub">
                 <li class="menu-item {{ request()->routeIs('petani-cpm.*') ? 'active' : '' }}">
-                    <a href="{{ route('petani-cpm.index') }}" class="menu-link"><div data-i18n="Petani CPM">Petani CPM</div></a>
+                    <a href="{{ route('petani-cpm.index') }}" class="menu-link"><span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-users-group"></i></span><div data-i18n="Petani CPM">Petani CPM</div></a>
                 </li>
                 <li class="menu-item {{ request()->routeIs('lahan-cpcl.*') ? 'active' : '' }}">
-                    <a href="{{ route('lahan-cpcl.index') }}" class="menu-link"><div data-i18n="Lahan CPCL">Lahan CPCL</div></a>
+                    <a href="{{ route('lahan-cpcl.index') }}" class="menu-link"><span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-map-2"></i></span><div data-i18n="Lahan CPCL">Lahan CPCL</div></a>
                 </li>
             </ul>
             @foreach ($tabel_menu ?? [] as $tbl)
             <ul class="menu-sub">
                 <li class="menu-item {{ request()->routeIs('tabel.data.*') && request()->route('tabel') == $tbl->id  ? 'active' : '' }}">
                     <a href="{{ route('tabel.data.index', $tbl->id) }}" class="menu-link">
-                        <div data-i18n="{{ $tbl->menu }}">{{ $tbl->menu }}</div>
+                        <span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-table"></i></span><div data-i18n="{{ $tbl->menu }}">{{ $tbl->menu }}</div>
                     </a>
                 </li>
             </ul>
             @endforeach
         </li>
-        <!-- <li class="menu-item">
+
-        <a href="javascript:void(0);" class="menu-link menu-toggle">
-            <i class="menu-icon icon-base ti tabler-line-scan"></i>
-            <div data-i18n="Tracebility">Tracebility</div>
-        </a>
-        <ul class="menu-sub">
-            <li class="menu-item">
-                <a href="#" class="menu-link">
-                <div data-i18n="Manajemen Batch & Kode">Manajemen Batch & Kode</div>
-                </a>
-            </li>
-        </ul>
-        <ul class="menu-sub">
-            <li class="menu-item">
-                <a href="#" class="menu-link">
-                <div data-i18n="Penelusuran Product">Penelusuran Product</div>
-                </a>
-            </li>
-        </ul>
-    </li> -->
         <li class="menu-item {{ request()->routeIs(['realisasi.*', 'kelompok-belajar-tani.*', 'workshop.*']) ? 'active open' : '' }}">
             <a href="javascript:void(0);" class="menu-link menu-toggle">
-                <i class="menu-icon icon-base ti tabler-webhook"></i>
+                <span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-users-group"></i></span>
                 <div data-i18n="Program & Komunitas">Program & Komunitas</div>
             </a>
             <ul class="menu-sub">
                 <li class="menu-item {{ request()->routeIs('realisasi.*') ? 'active' : '' }}">
-                    <a href="{{ route('realisasi.index') }}" class="menu-link"><div data-i18n="Capaian Program">Capaian Program</div></a>
+                    <a href="{{ route('realisasi.index') }}" class="menu-link"><span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-target"></i></span><div data-i18n="Capaian Program">Capaian Program</div></a>
                 </li>
                 <li class="menu-item {{ request()->routeIs('kelompok-belajar-tani.*') ? 'active' : '' }}">
-                    <a href="{{ route('kelompok-belajar-tani.index') }}" class="menu-link"><div data-i18n="Kelompok Belajar Petani">Kelompok Belajar Petani</div></a>
+                    <a href="{{ route('kelompok-belajar-tani.index') }}" class="menu-link"><span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-school"></i></span><div data-i18n="Kelompok Belajar Petani">Kelompok Belajar Petani</div></a>
                 </li>
                 <li class="menu-item {{ request()->routeIs('workshop.*') ? 'active' : '' }}">
-                    <a href="{{ route('workshop.index') }}" class="menu-link"><div data-i18n="Workshop & Lokakarya">Workshop & Lokakarya</div></a>
+                    <a href="{{ route('workshop.index') }}" class="menu-link"><span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-presentation"></i></span><div data-i18n="Workshop & Lokakarya">Workshop & Lokakarya</div></a>
                 </li>
             </ul>
         </li>
+        </ul>
+        </li>
         @endif
 
-        @if(in_array($userRole, ['super_admin']))
+        @if($isSuperAdmin)
-        <!-- Master Data -->
+
-        <li class="menu-header small">
+        <li class="menu-item {{ request()->routeIs(['provinsi.*', 'kabupatenkota.*', 'kecamatan.*', 'desakelurahan.*', 'adat.*', 'keluarga.*', 'komoditas.*', 'jenis-komoditas.*', 'varietas.*']) ? 'active open' : '' }}">
-            <span class="menu-header-text" data-i18n="Master Data">Master Data</span>
-        </li>
-        <li class="menu-item">
             <a href="javascript:void(0);" class="menu-link menu-toggle">
-                <i class="menu-icon icon-base ti tabler-world"></i>
+                <span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-database"></i></span>
+                <div data-i18n="Master Data">Master Data</div>
+            </a>
+            <ul class="menu-sub">
+        <li class="menu-item {{ request()->routeIs(['provinsi.*', 'kabupatenkota.*', 'kecamatan.*', 'desakelurahan.*']) ? 'active open' : '' }}">
+            <a href="javascript:void(0);" class="menu-link menu-toggle">
+                <span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-map-2"></i></span>
                 <div data-i18n="Wilayah">Wilayah</div>
             </a>
             <ul class="menu-sub">
-                <li class="menu-item"><a href="{{ route('provinsi.index') }}" class="menu-link"><div data-i18n="Provinsi">Provinsi</div></a></li>
+                <li class="menu-item"><a href="{{ route('provinsi.index') }}" class="menu-link"><span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-map"></i></span><div data-i18n="Provinsi">Provinsi</div></a></li>
-                <li class="menu-item"><a href="{{ route('kabupatenkota.index') }}" class="menu-link"><div data-i18n="Kabupaten Kota">Kabupaten Kota</div></a></li>
+                <li class="menu-item"><a href="{{ route('kabupatenkota.index') }}" class="menu-link"><span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-building"></i></span><div data-i18n="Kabupaten Kota">Kabupaten Kota</div></a></li>
-                <li class="menu-item"><a href="{{ route('kecamatan.index') }}" class="menu-link"><div data-i18n="Kecamatan">Kecamatan</div></a></li>
+                <li class="menu-item"><a href="{{ route('kecamatan.index') }}" class="menu-link"><span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-map-pin"></i></span><div data-i18n="Kecamatan">Kecamatan</div></a></li>
-                <li class="menu-item"><a href="{{ route('desakelurahan.index') }}" class="menu-link"><div data-i18n="Desa Kelurahan">Desa Kelurahan</div></a></li>
+                <li class="menu-item"><a href="{{ route('desakelurahan.index') }}" class="menu-link"><span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-home"></i></span><div data-i18n="Desa Kelurahan">Desa Kelurahan</div></a></li>
             </ul>
         </li>
-        <li class="menu-item">
+        <li class="menu-item {{ request()->routeIs('adat.*') ? 'active' : '' }}">
-            <a href="{{ route('adat.index') }}" class="menu-link"><i class="menu-icon icon-base ti tabler-matrix"></i><div data-i18n="Adat">Adat</div></a>
+            <a href="{{ route('adat.index') }}" class="menu-link"><span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-heart-handshake"></i></span><div data-i18n="Adat">Adat</div></a>
         </li>
-        <li class="menu-item">
+        <li class="menu-item {{ request()->routeIs('keluarga.*') ? 'active' : '' }}">
-            <a href="{{ route('keluarga.index') }}" class="menu-link"><i class="menu-icon icon-base ti tabler-sitemap"></i><div data-i18n="Keluarga">Keluarga</div></a>
+            <a href="{{ route('keluarga.index') }}" class="menu-link"><span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-sitemap"></i></span><div data-i18n="Keluarga">Keluarga</div></a>
         </li>
-        <li class="menu-item">
+        <li class="menu-item {{ request()->routeIs(['komoditas.*', 'jenis-komoditas.*', 'varietas.*']) ? 'active open' : '' }}">
             <a href="javascript:void(0);" class="menu-link menu-toggle">
-                <i class="menu-icon icon-base ti tabler-plant"></i><div data-i18n="Tanaman">Tanaman</div>
+                <span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-plant"></i></span><div data-i18n="Tanaman">Tanaman</div>
             </a>
             <ul class="menu-sub">
-                <li class="menu-item"><a href="{{ route('komoditas.index') }}" class="menu-link"><div data-i18n="Komoditas">Komoditas</div></a></li>
+                <li class="menu-item"><a href="{{ route('komoditas.index') }}" class="menu-link"><span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-plant"></i></span><div data-i18n="Komoditas">Komoditas</div></a></li>
-                <li class="menu-item"><a href="{{ route('jenis-komoditas.index') }}" class="menu-link"><div data-i18n="Jenis Komoditas">Jenis Komoditas</div></a></li>
+                <li class="menu-item"><a href="{{ route('jenis-komoditas.index') }}" class="menu-link"><span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-layout-grid"></i></span><div data-i18n="Jenis Komoditas">Jenis Komoditas</div></a></li>
-                <li class="menu-item"><a href="{{ route('varietas.index') }}" class="menu-link"><div data-i18n="Varietas">Varietas</div></a></li>
+                <li class="menu-item"><a href="{{ route('varietas.index') }}" class="menu-link"><span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-leaf"></i></span><div data-i18n="Varietas">Varietas</div></a></li>
             </ul>
         </li>
+        </ul>
+        </li>
         @endif
 
-        @if(in_array($userRole, ['super_admin', 'admin']))
+        @if($isAdmin)
-        <li class="menu-header small">
+        <li class="menu-item {{ request()->routeIs(['users.*', 'program.*', 'framework.*', 'group.*']) || (request()->routeIs('tabel.*') && !request()->routeIs('tabel.data.*')) ? 'active open' : '' }}">
-            <span class="menu-header-text" data-i18n="Konfigurasi">Konfigurasi</span>
+            <a href="javascript:void(0);" class="menu-link menu-toggle">
-        </li>
+                <span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-settings"></i></span>
+                <div data-i18n="Konfigurasi">Konfigurasi</div>
+            </a>
+            <ul class="menu-sub">
         <li class="menu-item {{ request()->routeIs('users.*') ? 'active' : '' }}">
             <a href="{{ route('users.index') }}" class="menu-link">
-                <i class="menu-icon icon-base ti tabler-users"></i><div data-i18n="Daftar Pengguna">Daftar Pengguna</div>
+                <span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-user-shield"></i></span><div data-i18n="Daftar Pengguna">Daftar Pengguna</div>
             </a>
         </li>
-        @endif
 
-        @if(in_array($userRole, ['super_admin', 'admin']) && env('APP_NAME') == 'AgroPro')
+        @if($isAdmin && $appName === 'AgroPro')
         <li class="menu-item {{ request()->routeIs(['program.*', 'framework.*']) ? 'active open' : '' }}">
             <a href="javascript:void(0);" class="menu-link menu-toggle">
-                <i class="menu-icon icon-base ti tabler-transform"></i><div data-i18n="Program Transformasi">Program Transformasi</div>
+                <span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-route"></i></span><div data-i18n="Program Transformasi">Program Transformasi</div>
             </a>
             <ul class="menu-sub">
                 <li class="menu-item {{ request()->routeIs('program.*') ? 'active' : '' }}">
-                    <a href="{{ route('program.index') }}" class="menu-link"><div data-i18n="Program Transformasi">Program Transformasi</div></a>
+                    <a href="{{ route('program.index') }}" class="menu-link"><span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-route"></i></span><div data-i18n="Program Transformasi">Program Transformasi</div></a>
                 </li>
                 <li class="menu-item {{ request()->routeIs('framework.*') ? 'active' : '' }}">
-                    <a href="{{ route('framework.index') }}" class="menu-link"><div data-i18n="Framework">Framework</div></a>
+                    <a href="{{ route('framework.index') }}" class="menu-link"><span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-sitemap"></i></span><div data-i18n="Framework">Framework</div></a>
                 </li>
             </ul>
         </li>
         <li class="menu-item {{ request()->routeIs(['group.*', 'tabel.*']) && !request()->routeIs('tabel.data.*') ? 'active open' : '' }}">
             <a href="javascript:void(0);" class="menu-link menu-toggle">
-                <i class="menu-icon icon-base ti tabler-database"></i><div data-i18n="Basis Data Ekosistem">Basis Data Ekosistem</div>
+                <span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-database"></i></span><div data-i18n="Basis Data Ekosistem">Basis Data Ekosistem</div>
             </a>
             <ul class="menu-sub">
                 <li class="menu-item {{ request()->routeIs('group.*') ? 'active' : '' }}">
-                    <a href="{{ route('group.index') }}" class="menu-link"><div data-i18n="Kelompok">Kelompok</div></a>
+                    <a href="{{ route('group.index') }}" class="menu-link"><span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-users-group"></i></span><div data-i18n="Kelompok">Kelompok</div></a>
                 </li>
                 <li class="menu-item {{ request()->routeIs('tabel.*') && !request()->routeIs('tabel.data.*') ? 'active' : '' }}">
-                    <a href="{{ route('tabel.index') }}" class="menu-link"><div data-i18n="Tabel">Tabel</div></a>
+                    <a href="{{ route('tabel.index') }}" class="menu-link"><span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-table"></i></span><div data-i18n="Tabel">Tabel</div></a>
                 </li>
             </ul>
         </li>
         @endif
-
+            </ul>
-        <!-- Misc -->
-        <!-- <li class="menu-header small">
-            <span class="menu-header-text" data-i18n="Misc">Misc</span>
         </li>
-        <li class="menu-item">
+        @endif
-            <a href="https://docs.google.com/spreadsheets/d/1nbh4xW-K_GwRW34-cD81p9B-LnLvkvro/edit?usp=sharing&ouid=103442063105125817060&rtpof=true&sd=true" target="_blank" class="menu-link">
-                <i class="menu-icon icon-base ti tabler-file-description"></i><div data-i18n="Documentation">Documentation</div>
-            </a>
-        </li> -->
 
     </ul>
 </aside>