262 lines
14 KiB
PHP
262 lines
14 KiB
PHP
@extends('layouts.dashboard')
|
|
|
|
@section('title', 'Laporan Rekapitulasi')
|
|
|
|
@section('content')
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
<div class="pagetitle mb-4">
|
|
<h1 style="color: #FF782D; font-weight: 700;">Laporan PosSehat</h1>
|
|
<p class="text-muted">Rekapitulasi data bulanan dan tahunan PosSehat.</p>
|
|
</div>
|
|
|
|
<div class="card shadow-sm border-0 mb-4" style="border-radius: 20px;">
|
|
<div class="card-body p-4">
|
|
<form action="{{ route('laporan.index') }}" method="GET" class="row g-3 align-items-end">
|
|
<div class="col-md-3">
|
|
<label class="form-label fw-semibold small">Bulan</label>
|
|
<select name="bulan" class="form-select custom-input">
|
|
@foreach(range(1, 12) as $m)
|
|
<option value="{{ $m }}" {{ request('bulan', date('n')) == $m ? 'selected' : '' }}>
|
|
{{ date('F', mktime(0, 0, 0, $m, 1)) }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label class="form-label fw-semibold small">Tahun</label>
|
|
<select name="tahun" class="form-select custom-input">
|
|
@foreach(range(date('Y')-2, date('Y')) as $y)
|
|
<option value="{{ $y }}" {{ request('tahun', date('Y')) == $y ? 'selected' : '' }}>{{ $y }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6 text-md-end">
|
|
<div class="btn-group shadow-sm rounded-pill overflow-hidden">
|
|
<button type="submit" class="btn btn-orange px-4"><i class="bi bi-filter me-1"></i> Filter</button>
|
|
<a id="exportExcelBtn" class="btn btn-success px-3" style="cursor: pointer;"><i class="bi bi-file-earmark-excel"></i> Excel</a>
|
|
<a id="exportPdfBtn" class="btn btn-danger px-3" style="cursor: pointer;"><i class="bi bi-file-earmark-pdf"></i> PDF</a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- <div class="row mb-4">
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card border-0 shadow-sm p-3 card-stat">
|
|
<div class="d-flex align-items-center">
|
|
<div class="icon-stat bg-orange-light text-orange me-3"><i class="bi bi-people fs-4"></i></div>
|
|
<div><small class="text-muted d-block">Total Balita</small><h4 class="fw-bold mb-0">124</h4></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card border-0 shadow-sm p-3 card-stat">
|
|
<div class="d-flex align-items-center">
|
|
<div class="icon-stat bg-pink-light text-danger me-3"><i class="bi bi-heart-pulse fs-4"></i></div>
|
|
<div><small class="text-muted d-block">Ibu Hamil</small><h4 class="fw-bold mb-0">45</h4></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card border-0 shadow-sm p-3 card-stat" style="border-bottom: 3px solid #dc3545;">
|
|
<div class="d-flex align-items-center">
|
|
<div class="icon-stat bg-danger-soft text-danger me-3"><i class="bi bi-exclamation-circle fs-4"></i></div>
|
|
<div><small class="text-muted d-block">Indikasi Stunting</small><h4 class="fw-bold mb-0 text-danger">8</h4></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card border-0 shadow-sm p-3 card-stat" style="border-bottom: 3px solid #28a745;">
|
|
<div class="d-flex align-items-center">
|
|
<div class="icon-stat bg-success-soft text-success me-3"><i class="bi bi-shield-check fs-4"></i></div>
|
|
<div><small class="text-muted d-block">Gizi Normal</small><h4 class="fw-bold mb-0 text-success">116</h4></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> --}}
|
|
|
|
<div class="card shadow-sm border-0" style="border-radius: 20px;">
|
|
<div class="card-body p-4">
|
|
<ul class="nav nav-pills mb-4 gap-2 bg-light p-2 rounded-pill" id="pills-tab" role="tablist" style="width: fit-content;">
|
|
<li class="nav-item">
|
|
<button class="nav-link active rounded-pill px-4" id="pills-balita-tab" data-bs-toggle="pill" data-bs-target="#pills-balita">Data Balita</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button class="nav-link rounded-pill px-4" id="pills-ibu-tab" data-bs-toggle="pill" data-bs-target="#pills-ibu">Data Ibu Hamil</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content" id="pills-tabContent">
|
|
<div class="tab-pane fade show active" id="pills-balita" role="tabpanel">
|
|
<h6 class="fw-bold mb-3">Rekapitulasi Pengukuran Balita</h6>
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle custom-table">
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>NIK</th>
|
|
<th>Nama & Usia Balita</th>
|
|
<th>BB/TB</th>
|
|
<th>Z-Score TB/U</th>
|
|
<th>Status Gizi</th>
|
|
<th>Tanggal</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="balita-table">
|
|
@forelse ($laporanBalita as $index => $item)
|
|
<tr>
|
|
<td class="fw-bold text-muted">{{ $index + 1 }}</td>
|
|
<td>{{ $item->balita->nik ?? '-' }}</td>
|
|
<td>
|
|
<div class="fw-bold text-dark">{{ $item->balita->nama ?? '-' }}</div>
|
|
<small class="text-muted">{{ $item->usia_saat_ukur }} Bulan</small>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-blue-soft text-primary">BB: {{ $item->berat_badan }}kg</span><br>
|
|
<span class="badge bg-green-soft text-success">TB: {{ $item->tinggi_badan }}cm</span>
|
|
</td>
|
|
<td><span class="badge bg-light text-dark">{{ $item->zs_tbu }}</span></td>
|
|
<td>
|
|
@php
|
|
$statusClass = match(strtolower($item->hasil)) {
|
|
'normal' => 'bg-success',
|
|
'pendek', 'sangat pendek' => 'bg-danger',
|
|
default => 'bg-warning'
|
|
};
|
|
@endphp
|
|
<span class="badge {{ $statusClass }} px-3 py-2" style="border-radius: 8px;">
|
|
{{ strtoupper($item->hasil) }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div class="small fw-semibold">{{ \Carbon\Carbon::parse($item->tanggal)->translatedFormat('d M Y') }}</div>
|
|
<small class="text-muted">{{ $item->petugas->nama ?? '-' }}</small>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="7" class="text-center py-5 text-muted">Data pengukuran balita bulan ini kosong.</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div> <div class="tab-pane fade" id="pills-ibu" role="tabpanel">
|
|
<h6 class="fw-bold mb-3">Rekapitulasi Pengukuran Ibu Hamil</h6>
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle custom-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 5%">No</th>
|
|
<th>Identitas Ibu</th>
|
|
<th>Usia Hamil</th>
|
|
<th>Fisik (BB/TB/LILA)</th>
|
|
<th class="text-center">IMT & Status</th>
|
|
<th>Tanggal & Petugas</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="ibuhamil-table">
|
|
@forelse ($laporanIbuHamil as $index => $item)
|
|
<tr>
|
|
<td class="fw-bold text-muted">{{ $index + 1 }}</td>
|
|
<td>
|
|
<div class="fw-bold text-dark">{{ $item->ibuHamil->nama ?? '-' }}</div>
|
|
<small class="text-muted">{{ \Carbon\Carbon::parse($item->ibuHamil->tgl_lahir)->age }} Tahun</small>
|
|
</td>
|
|
<td><div class="text-dark-bold">{{ $item->usia_kehamilan ?? '0' }} Minggu</div></td>
|
|
<td>
|
|
<div class="small">
|
|
<span class="badge bg-blue-soft text-primary mb-1">BB: {{ $item->berat_badan }}kg</span>
|
|
<span class="badge bg-green-soft text-success mb-1">TB: {{ $item->tinggi_badan }}cm</span><br>
|
|
<span class="badge bg-purple-soft text-purple">LILA: {{ $item->lila ?? '-' }} cm</span>
|
|
</div>
|
|
</td>
|
|
<td class="text-center">
|
|
<div class="fw-bold text-dark mb-1">IMT: {{ $item->imt ?? '0' }}</div>
|
|
@php
|
|
$statusIbu = match(strtolower($item->status_gizi ?? '')) {
|
|
'gizi kurang' => 'bg-danger',
|
|
'gizi normal', 'normal' => 'bg-success',
|
|
'gizi lebih', 'obesitas' => 'bg-warning text-dark',
|
|
default => 'bg-secondary'
|
|
};
|
|
@endphp
|
|
<span class="badge {{ $statusIbu }} px-2 py-1" style="font-size: 10px;">
|
|
{{ strtoupper($item->status_gizi ?? 'TIDAK ADA DATA') }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div class="small fw-semibold">{{ \Carbon\Carbon::parse($item->tanggal)->translatedFormat('d M Y') }}</div>
|
|
<small class="text-muted">{{ $item->petugas->nama ?? '-' }}</small>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="6" class="text-center py-5 text-muted">Data pengukuran ibu hamil bulan ini kosong.</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div> </div> </div>
|
|
</div>
|
|
|
|
<style>
|
|
.card-stat { border-radius: 15px; transition: transform 0.3s; }
|
|
.card-stat:hover { transform: translateY(-5px); }
|
|
.icon-stat { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 12px; }
|
|
.bg-danger-soft { background-color: #fff5f5; }
|
|
.bg-success-soft { background-color: #f0fff4; }
|
|
.btn-orange { background-color: #FF782D; color: white; border: none; }
|
|
.nav-pills .nav-link.active { background-color: #FF782D !important; }
|
|
.custom-input { border-radius: 10px !important; }
|
|
.custom-table thead th { font-size: 11px; text-transform: uppercase; color: #888; letter-spacing: 0.5px; border-top: none; }
|
|
.bg-purple-soft { background-color: #f3e8ff !important; border: 1px solid #d8b4fe; }
|
|
.text-purple { color: #6b21a8 !important; font-weight: 600; }
|
|
.text-dark-bold { color: #2c3e50 !important; font-weight: 700; }
|
|
.bg-blue-soft { background-color: #e7f3ff; }
|
|
.bg-green-soft { background-color: #f0fff4; }
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
let kategoriAktif = 'balita';
|
|
|
|
// Update kategori saat tab diklik
|
|
const tabButtons = document.querySelectorAll('button[data-bs-toggle="pill"]');
|
|
tabButtons.forEach(button => {
|
|
button.addEventListener('shown.bs.tab', function (e) {
|
|
kategoriAktif = e.target.id === 'pills-balita-tab' ? 'balita' : 'ibu_hamil';
|
|
});
|
|
});
|
|
|
|
// Interceptor Download
|
|
const handleDownload = (e, type) => {
|
|
e.preventDefault();
|
|
const bulan = document.querySelector('select[name="bulan"]').value;
|
|
const tahun = document.querySelector('select[name="tahun"]').value;
|
|
|
|
const tableId = kategoriAktif === 'balita' ? 'balita-table' : 'ibuhamil-table';
|
|
const tableContent = document.getElementById(tableId).innerText;
|
|
|
|
if (tableContent.includes('kosong') || tableContent.includes('Data tidak ditemukan')) {
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Data Kosong!',
|
|
text: `Maaf, tidak ada data ${kategoriAktif.replace('_', ' ')} untuk diunduh.`,
|
|
confirmButtonColor: '#FF782D',
|
|
});
|
|
} else {
|
|
const route = type === 'excel' ? '/laporan/excel' : '/laporan/pdf';
|
|
window.location.href = `${route}?kategori=${kategoriAktif}&bulan=${bulan}&tahun=${tahun}`;
|
|
}
|
|
};
|
|
|
|
document.getElementById('exportExcelBtn').addEventListener('click', (e) => handleDownload(e, 'excel'));
|
|
document.getElementById('exportPdfBtn').addEventListener('click', (e) => handleDownload(e, 'pdf'));
|
|
});
|
|
</script>
|
|
@endsection
|