Update demografi dashboard

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

@@ -24,8 +24,7 @@ class DemografiPetaniController extends Controller
                                 ->count('komoditas_id');
         $totalLuasLahan     = Lahan::has('petani')
                                 ->sum('luas_lahan');
-        $ratarataLuasLahan  = Lahan::has('petani')
+        $ratarataLuasLahan  = $totalLuasLahan && $totalPetani ? $totalLuasLahan / $totalPetani : 0;
-                                ->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();

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

@@ -3,6 +3,30 @@
 @push('styles')
 <link rel="stylesheet" href="{{ asset('assets/vendor/libs/apex-charts/apex-charts.css') }}" />
 <style>
+    .summary-card .card-body {
+        padding: 22px 22px;
+    }
+
+    .summary-card .avatar-lg {
+        width: 48px;
+        height: 48px;
+        flex-shrink: 0;
+    }
+
+    .summary-card .avatar-lg .avatar-initial {
+        width: 48px;
+        height: 48px;
+    }
+
+    .summary-card h4 {
+        font-size: 1.6rem;
+        line-height: 1.2;
+    }
+
+    .summary-card h5 {
+        font-size: 1.05rem;
+    }
+
     #ageGroupChart .apexcharts-tooltip,
     #educationChart .apexcharts-tooltip,
     #landAreaChart .apexcharts-tooltip,
@@ -12,28 +36,48 @@
         box-shadow: none !important;
         overflow: visible !important;
     }
+</style>
 @endpush
 
 @section('content')
 <div class="container-xxl flex-grow-1 container-p-y">
     <div class="row g-6">
-        <div class="col-lg-3 col-sm-6">
+        <div class="col-lg-4 col-sm-6">
             <div class="card card-border-shadow-primary h-100">
                 <div class="card-body">
-                    <div class="d-flex align-items-center mb-2">
+                    <div class="d-flex align-items-center gap-4">
-                        <div class="avatar me-4">
+
-                            <span class="avatar-initial rounded bg-label-primary"><i class="icon-base ti tabler-shovel-pitchforks icon-28px"></i></span>
+                        <div class="avatar avatar-lg">
+                            <span class="avatar-initial rounded bg-label-primary">
+                                <i class="icon-base ti tabler-shovel-pitchforks icon-28px"></i>
+                            </span>
                         </div>
-                        <h4 class="mb-0">{{ $data['total_petani'] }}</h4>
+
+                        <div>
+                            <div class="d-flex align-items-baseline gap-2">
+                                <h4 class="mb-0">
+                                    {{ $data['total_petani'] }}
+                                </h4>
+
+                                <small class="text-body-secondary">
+                                    petani
+                                </small>
                             </div>
-                    <p class="mb-1">Total Petani</p>
+
-                    <p class="mb-0">
+                            <p class="mb-0 mt-1">
-                    <!-- <span class="text-heading fw-medium me-2">+18.2%</span> -->
+                                Total Petani
-                    <small class="text-body-secondary">Terdata</small>
                             </p>
+
+                            <small class="text-body-secondary">
+                                Petani yang telah terdata
+                            </small>
+                        </div>
+
                     </div>
                 </div>
             </div>
+        </div>
+        <!--
             <div class="col-lg-2 col-sm-6">
                 <div class="card card-border-shadow-secondary h-100">
                 <div class="card-body">
@@ -72,41 +116,95 @@
                 </div>
                 </div>
             </div>
-        <div class="col-lg-2 col-sm-6">
+        -->
+        <div class="col-lg-4 col-sm-6">
             <div class="card card-border-shadow-info h-100">
                 <div class="card-body">
-                <div class="d-flex align-items-center mb-2">
+                    <div class="d-flex align-items-center gap-4">
-                <div class="avatar me-4">
+
-                    <span class="avatar-initial rounded bg-label-info"
+                        <div class="avatar avatar-lg">
-                    ><i class="icon-base ti tabler-plant icon-28px"></i
+                            <span class="avatar-initial rounded bg-label-info">
-                    ></span>
+                                <i class="icon-base ti tabler-plant icon-28px"></i>
+                            </span>
                         </div>
-                <h4 class="mb-0">{{ $data['total_komoditas'] }}</h4>
+
+                        <div>
+                            <div class="d-flex align-items-baseline gap-2">
+                                <h4 class="mb-0">
+                                    {{ $data['total_komoditas'] }}
+                                </h4>
+
+                                <small class="text-body-secondary">
+                                    komoditas
+                                </small>
                             </div>
-                <p class="mb-1">Total Komoditas</p>
+
-                <p class="mb-0">
+                            <p class="mb-0 mt-1">
-                <!-- <span class="text-heading fw-medium me-2">-2.5%</span> -->
+                                Total Komoditas
-                <small class="text-body-secondary">Dari Seluruh Petani</small>
                             </p>
+
+                            <small class="text-body-secondary">
+                                Komoditas utama yang dikelola petani
+                            </small>
+                        </div>
+
                     </div>
                 </div>
             </div>
-        <div class="col-lg-3 col-sm-6">
+        </div>
+        <div class="col-lg-4 col-sm-12">
             <div class="card card-border-shadow-success h-100">
                 <div class="card-body">
-                <div class="d-flex align-items-center mb-2">
+
-                <div class="avatar me-4">
+                    <div class="d-flex align-items-center justify-content-between gap-4">
-                    <span class="avatar-initial rounded bg-label-success"
+
-                    ><i class="icon-base ti tabler-chart-area-line icon-28px"></i
+                        <div class="d-flex align-items-center gap-4">
-                    ></span>
+
+                            <div class="avatar avatar-lg">
+                                <span class="avatar-initial rounded bg-label-success">
+                                    <i class="icon-base ti tabler-chart-area-line icon-28px"></i>
+                                </span>
                             </div>
-                <h4 class="mb-0">{{ $data['total_luas_lahan'] }}</h4>
+
+                            <div>
+                                <div class="d-flex align-items-baseline gap-2">
+                                    <h4 class="mb-0">
+                                        {{ number_format($data['total_luas_lahan'], 2) }}
+                                    </h4>
+
+                                    <small class="text-body-secondary">
+                                        ha
+                                    </small>
                                 </div>
-                <p class="mb-1">Total Luas Lahan</p>
+
-                <p class="mb-0">
+                                <p class="mb-0 mt-1">
-                <span class="text-heading fw-medium me-2">{{ $data['ratarata_luas_lahan'] ? number_format($data['ratarata_luas_lahan'], 2) : 0 }}</span>
+                                    Total Luas Lahan
-                <small class="text-body-secondary">Rata-rata per Lahan</small>
                                 </p>
+
+                                <small class="text-body-secondary">
+                                    Seluruh lahan petani
+                                </small>
+                            </div>
+
+                        </div>
+
+                        <div class="border-start ps-4 text-end">
+                            <h5 class="mb-1">
+                                {{ number_format($data['ratarata_luas_lahan'], 2) }} 
+                                <small class="text-body-secondary">
+                                    ha
+                                </small>
+                            </h5>
+
+                            <small class="text-body-secondary">
+                                Rata-rata
+                                <br>
+                                per Petani
+                            </small>
+                        </div>
+
+                    </div>
+
                 </div>
             </div>
         </div>
@@ -287,11 +385,11 @@
 
                                     <td>
                                         @if ($petani->jenis_kelamin == 1)
-                                            <span class="badge bg-label-primary">
+                                            <span class="badge bg-label-info">
                                                 Laki-laki
                                             </span>
                                         @else
-                                            <span class="badge bg-label-danger">
+                                            <span class="badge" style="background-color: #ffe8f1 !important; color: #ff5598 !important;">
                                                 Perempuan
                                             </span>
                                         @endif
@@ -413,8 +511,8 @@ document.addEventListener('DOMContentLoaded', function () {
         series: [lakiLaki, perempuan],
 
         colors: [
-            config.colors.primary,
+            config.colors.info,
-            config.colors.secondary
+            '#ff5598'
         ],
 
         stroke: { width: 0},