153 lines
7.9 KiB
PHP
153 lines
7.9 KiB
PHP
@extends('layouts.dashboard')
|
|
|
|
@section('title', 'Dashboard')
|
|
|
|
@section('content')
|
|
|
|
<div class="pagetitle mb-4">
|
|
<h1 style="color: #FF782D; font-weight: 700;">Dashboard Utama</h1>
|
|
<p class="text-muted">Halo <strong>{{ auth()->user()->nama }}</strong>, pantau perkembangan kesehatan posyandu hari ini di sini.</p>
|
|
</div>
|
|
|
|
<section class="section dashboard">
|
|
<div class="row g-4">
|
|
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="card info-card h-100 border-0 shadow-sm" style="border-radius: 15px;">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Stunting <span class="text-muted">| Total</span></h5>
|
|
<div class="d-flex align-items-center">
|
|
<div class="card-icon rounded-circle d-flex align-items-center justify-content-center bg-danger-light text-danger" style="width: 50px; height: 50px; background-color: #ffe5e5;">
|
|
<i class="bi bi-exclamation-triangle-fill"></i>
|
|
</div>
|
|
<div class="ps-3">
|
|
<h6 class="text-danger mb-0" style="font-size: 24px; font-weight: 700;">{{ $total_stunting }}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="card info-card h-100 border-0 shadow-sm" style="border-radius: 15px;">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Balita <span class="text-muted">| Terdaftar</span></h5>
|
|
<div class="d-flex align-items-center">
|
|
<div class="card-icon rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; background-color: #fff5f0; color: #FF782D;">
|
|
<i class="bi bi-emoji-laughing-fill"></i>
|
|
</div>
|
|
<div class="ps-3">
|
|
<h6 style="font-size: 24px; font-weight: 700; color: #2c3e50;">{{ $total_balita }}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="card info-card h-100 border-0 shadow-sm" style="border-radius: 15px;">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Ibu Hamil <span class="text-muted">| Terdaftar</span></h5>
|
|
<div class="d-flex align-items-center">
|
|
<div class="card-icon rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; background-color: #fff5f0; color: #FF782D;">
|
|
<i class="bi bi-person-heart"></i>
|
|
</div>
|
|
<div class="ps-3">
|
|
<h6 style="font-size: 24px; font-weight: 700; color: #2c3e50;">{{ $total_ibu_hamil }}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="card info-card h-100 border-0 shadow-sm" style="border-radius: 15px;">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Petugas <span class="text-muted">| Aktif</span></h5>
|
|
<div class="d-flex align-items-center">
|
|
<div class="card-icon rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; background-color: #fff5f0; color: #FF782D;">
|
|
<i class="bi bi-shield-check"></i>
|
|
</div>
|
|
<div class="ps-3">
|
|
<h6 style="font-size: 24px; font-weight: 700; color: #2c3e50;">{{ $total_petugas }}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="card shadow-sm border-0" style="border-radius: 20px;">
|
|
<div class="card-body">
|
|
<h5 class="card-title" style="color: #2c3e50; font-weight: 600;">
|
|
Laporan Aktivitas Pengukuran <span class="text-muted" style="font-size: 14px; font-weight: 400;">/ 6 Bulan Terakhir</span>
|
|
</h5>
|
|
|
|
<div id="reportsChart"></div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
new ApexCharts(document.querySelector("#reportsChart"), {
|
|
series: [{
|
|
name: 'Pengukuran Balita',
|
|
data: @json($grafik_balita)
|
|
}, {
|
|
name: 'Pengukuran Ibu Hamil',
|
|
data: @json($grafik_ibu)
|
|
}],
|
|
chart: {
|
|
height: 350,
|
|
type: 'area',
|
|
toolbar: { show: false },
|
|
fontFamily: 'Poppins, sans-serif', // Biar fontnya lebih modern
|
|
},
|
|
markers: {
|
|
size: 5,
|
|
colors: ['#FF782D', '#00B4D8'],
|
|
strokeColors: '#fff',
|
|
strokeWidth: 2,
|
|
},
|
|
// WARNA BARU: Oranye untuk Balita, Biru Teal untuk Ibu Hamil (sebagai penyeimbang)
|
|
colors: ['#FF782D', '#00B4D8'],
|
|
fill: {
|
|
type: "gradient",
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
opacityFrom: 0.3,
|
|
opacityTo: 0.05, // Gradasi menghilang ke bawah supaya bersih
|
|
stops: [0, 90, 100]
|
|
}
|
|
},
|
|
dataLabels: { enabled: false },
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 3
|
|
},
|
|
xaxis: {
|
|
categories: @json($label_bulan),
|
|
axisBorder: { show: false },
|
|
axisTicks: { show: false }
|
|
},
|
|
grid: {
|
|
borderColor: '#f1f1f1',
|
|
strokeDashArray: 4, // Garis latar belakang putus-putus biar estetik
|
|
},
|
|
legend: {
|
|
position: 'top',
|
|
horizontalAlign: 'right',
|
|
},
|
|
tooltip: {
|
|
x: { format: 'dd/MM/yy' },
|
|
}
|
|
}).render();
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
@endsection
|