From 6e75169b804ed28abb3eac5ad325e6c2f1de76d3 Mon Sep 17 00:00:00 2001
From: Sveemaaa <117051936+Savema@users.noreply.github.com>
Date: Thu, 18 Jun 2026 12:02:19 +0700
Subject: [PATCH] baru

---
 .../PengukuranBalitaController.php            |  23 +--
 .../PengukuranIbuHamilController.php          |  21 +--
 .../views/pengukuran_balita/create.blade.php  | 132 +++++++++---------
 .../pengukuran_ibuhamil/create.blade.php      | 113 +++++++--------
 4 files changed, 147 insertions(+), 142 deletions(-)

diff --git a/project/app/Http/Controllers/PengukuranBalitaController.php b/project/app/Http/Controllers/PengukuranBalitaController.php
index c6b92cd..611850d 100644
--- a/project/app/Http/Controllers/PengukuranBalitaController.php
+++ b/project/app/Http/Controllers/PengukuranBalitaController.php
@@ -160,21 +160,24 @@ public function cetakPdf(Request $request, $id)
     }
 
     // PengukuranBalitaController.php
-    public function getLastPengukuran($id)
+   public function getLastPengukuran($id)
     {
         $last = PengukuranBalita::where('balita_id', $id)
                     ->orderBy('tanggal', 'desc')
-                    ->first();
+                    ->take(5)
+                    ->get();
 
-        if ($last) {
+        if ($last->isNotEmpty()) {
             return response()->json([
-                'found'          => true,
-                'tanggal'        => $last->tanggal,
-                'usia_saat_ukur' => $last->usia_saat_ukur,
-                'berat_badan'    => $last->berat_badan,
-                'tinggi_badan'   => $last->tinggi_badan,
-                'lingkar_kepala' => $last->lingkar_kepala,
-                'hasil'          => $last->hasil ?? null, // jika ada kolom ini
+                'found' => true,
+                'data'  => $last->map(fn($item) => [
+                    'tanggal'        => $item->tanggal,
+                    'usia'           => $item->usia_saat_ukur,
+                    'berat_badan'    => $item->berat_badan,
+                    'tinggi_badan'   => $item->tinggi_badan,
+                    'lingkar_kepala' => $item->lingkar_kepala,
+                    'hasil'          => $item->hasil ?? '-',
+                ])
             ]);
         }
 
diff --git a/project/app/Http/Controllers/PengukuranIbuHamilController.php b/project/app/Http/Controllers/PengukuranIbuHamilController.php
index de49e24..1bcb670 100644
--- a/project/app/Http/Controllers/PengukuranIbuHamilController.php
+++ b/project/app/Http/Controllers/PengukuranIbuHamilController.php
@@ -160,17 +160,20 @@ public function getLastPengukuran($id)
     {
         $last = PengukuranIbuHamil::where('ibu_hamil_id', $id)
                     ->orderBy('tanggal', 'desc')
-                    ->first();
+                    ->take(5)
+                    ->get();
 
-        if ($last) {
+        if ($last->isNotEmpty()) {
             return response()->json([
-                'found'          => true,
-                'tanggal'        => $last->tanggal,
-                'usia_kehamilan' => $last->usia_kehamilan,
-                'berat_badan'    => $last->berat_badan,
-                'tinggi_badan'   => $last->tinggi_badan,
-                'lila'           => $last->lila,
-                'status_gizi'    => $last->status_gizi ?? null, // tambah ini
+                'found' => true,
+                'data'  => $last->map(fn($item) => [
+                    'tanggal'        => $item->tanggal,
+                    'usia_kehamilan' => $item->usia_kehamilan,
+                    'berat_badan'    => $item->berat_badan,
+                    'tinggi_badan'   => $item->tinggi_badan,
+                    'lila'           => $item->lila,
+                    'status_gizi'    => $item->status_gizi ?? '-',
+                ])
             ]);
         }
 
diff --git a/project/resources/views/pengukuran_balita/create.blade.php b/project/resources/views/pengukuran_balita/create.blade.php
index 60596e0..1c5b4b9 100644
--- a/project/resources/views/pengukuran_balita/create.blade.php
+++ b/project/resources/views/pengukuran_balita/create.blade.php
@@ -99,49 +99,30 @@
                         </div>
                     </div>
                 </div>
+
                 {{-- History Pengukuran Terakhir --}}
                 <div class="col-12" id="last-history" style="display: none;">
-                    <div class="alert border-0 shadow-sm mb-2" style="border-radius: 14px; background: #fff5f0; border-left: 4px solid #FF782D !important;">
-                        <div class="d-flex align-items-center mb-2">
+                    <div class="border-0 shadow-sm p-3" style="border-radius: 14px; background: #fff5f0; border-left: 4px solid #FF782D !important;">
+                        <div class="d-flex align-items-center mb-3">
                             <i class="bi bi-clock-history me-2" style="color: #FF782D; font-size: 1.1rem;"></i>
-                            <strong style="color: #FF782D;">Pengukuran Terakhir</strong>
-                            <span id="last-tanggal" class="ms-auto badge bg-light text-muted" style="font-size: 0.8rem;"></span>
+                            <strong style="color: #FF782D;">Riwayat 5 Pengukuran Terakhir</strong>
                         </div>
-                        <div class="row text-center g-2">
-                            <div class="col-3">
-                                <div class="p-2 bg-white rounded-3 shadow-sm">
-                                    <div class="text-muted small">Usia</div>
-                                    <div class="fw-bold fs-6" id="last-usia" style="color: #2c3e50;">-</div>
-                                    <div class="text-muted" style="font-size:0.75rem;">bulan</div>
-                                </div>
-                            </div>
-                            <div class="col-3">
-                                <div class="p-2 bg-white rounded-3 shadow-sm">
-                                    <div class="text-muted small">Berat Badan</div>
-                                    <div class="fw-bold fs-6" id="last-bb" style="color: #2c3e50;">-</div>
-                                    <div class="text-muted" style="font-size:0.75rem;">kg</div>
-                                </div>
-                            </div>
-                            <div class="col-3">
-                                <div class="p-2 bg-white rounded-3 shadow-sm">
-                                    <div class="text-muted small">Tinggi Badan</div>
-                                    <div class="fw-bold fs-6" id="last-tb" style="color: #2c3e50;">-</div>
-                                    <div class="text-muted" style="font-size:0.75rem;">cm</div>
-                                </div>
-                            </div>
-                            <div class="col-3">
-                                <div class="p-2 bg-white rounded-3 shadow-sm">
-                                    <div class="text-muted small">Lingkar Kepala</div>
-                                    <div class="fw-bold fs-6" id="last-lk" style="color: #2c3e50;">-</div>
-                                    <div class="text-muted" style="font-size:0.75rem;">cm</div>
-                                </div>
-                            </div>
-                        </div>
-                        {{-- Tampilkan status gizi jika ada --}}
-                        <div id="last-status-wrap" class="mt-2 text-center" style="display:none;">
-                            <span class="badge px-3 py-2" id="last-status"
-                                style="border-radius: 20px; font-size: 0.85rem; background: #FF782D; color: white;">
-                            </span>
+                        <div class="table-responsive">
+                            <table class="table table-bordered table-hover text-center align-middle mb-0" style="font-size: 0.875rem; border-radius: 10px; overflow: hidden;">
+                                <thead style="background-color: #FF782D; color: white;">
+                                    <tr>
+                                        <th>Tanggal</th>
+                                        <th>Usia</th>
+                                        <th>Berat Badan</th>
+                                        <th>Tinggi Badan</th>
+                                        <th>Lingkar Kepala</th>
+                                        <th>Status Gizi</th>
+                                    </tr>
+                                </thead>
+                                <tbody id="last-history-tbody">
+                                    {{-- diisi via JavaScript --}}
+                                </tbody>
+                            </table>
                         </div>
                     </div>
                 </div>
@@ -176,7 +157,8 @@
     $('#balita_id').select2({
         placeholder: 'Cari nama balita...',
         allowClear: true,
-        width: '100%'
+        width: '100%',
+        dropdownParent: $('body')
     });
 
     $('#balita_id').on('change', function() {
@@ -188,15 +170,14 @@
 });
 
 function updateData() {
-    let sel = document.getElementById("balita_id");
-    let opt = sel.options[sel.selectedIndex];
+    let opt = $('#balita_id option:selected');
 
-    if (opt && opt.value) {
-        let jk = opt.getAttribute("data-jk");
+    if (opt && opt.val()) {
+        let jk = opt.attr("data-jk");
         document.getElementById("jk_display").value = (jk == 1) ? "Laki-laki" : "Perempuan";
         document.getElementById("jk_input").value = jk;
 
-        let tglLahir = new Date(opt.getAttribute("data-tgl"));
+        let tglLahir = new Date(opt.attr("data-tgl"));
         let tglUkur  = new Date(document.getElementById("tanggal_ukur").value);
         let totalBulan = (tglUkur.getFullYear() - tglLahir.getFullYear()) * 12
                        + (tglUkur.getMonth() - tglLahir.getMonth());
@@ -205,10 +186,10 @@ function updateData() {
         document.getElementById("usia_display").value = (totalBulan < 0 ? 0 : totalBulan) + " Bulan";
         document.getElementById("usia_input").value   = (totalBulan < 0 ? 0 : totalBulan);
     } else {
-        document.getElementById("jk_display").value  = '';
-        document.getElementById("jk_input").value    = '';
+        document.getElementById("jk_display").value   = '';
+        document.getElementById("jk_input").value     = '';
         document.getElementById("usia_display").value = '';
-        document.getElementById("usia_input").value  = '';
+        document.getElementById("usia_input").value   = '';
     }
 }
 
@@ -218,25 +199,48 @@ function fetchLastHistory(balitaId) {
         return;
     }
 
-    $.get(`/pengukuran-balita/last/${balitaId}`, function(data) {
-        if (data.found) {
-            $('#last-tanggal').text(data.tanggal);
-            $('#last-usia').text(data.usia_saat_ukur);
-            $('#last-bb').text(data.berat_badan);
-            $('#last-tb').text(data.tinggi_badan);
-            $('#last-lk').text(data.lingkar_kepala);
+    $.ajax({
+        url: `{{ url('/pengukuran-balita/last') }}/${balitaId}`,
+        type: 'GET',
+        headers: {
+            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+        },
+        success: function(data) {
+            if (data.found) {
+                let rows = '';
+                data.data.forEach(function(item, index) {
+                    let badgeColor = '#6c757d';
+                    let hasil = item.hasil || '-';
 
-            // Tampilkan status gizi jika ada
-            if (data.hasil) {
-                $('#last-status').text(data.hasil);
-                $('#last-status-wrap').show();
+                    if (hasil.toLowerCase().includes('sangat pendek'))      badgeColor = '#dc3545'; // merah
+                    else if (hasil.toLowerCase().includes('pendek'))        badgeColor = '#fd7e14'; // oranye
+                    else if (hasil.toLowerCase().includes('normal'))        badgeColor = '#28a745'; // hijau
+                    else if (hasil.toLowerCase().includes('tinggi'))        badgeColor = '#0d6efd'; // biru
+
+                    rows += `
+                        <tr ${index === 0 ? 'style="background:#fff5f0; font-weight:600;"' : ''}>
+                            <td>${item.tanggal}</td>
+                            <td>${item.usia} bulan</td>
+                            <td>${item.berat_badan} kg</td>
+                            <td>${item.tinggi_badan} cm</td>
+                            <td>${item.lingkar_kepala} cm</td>
+                            <td>
+                                <span class="badge px-2 py-1" style="background:${badgeColor}; border-radius:20px;">
+                                    ${hasil}
+                                </span>
+                            </td>
+                        </tr>
+                    `;
+                });
+
+                $('#last-history-tbody').html(rows);
+                $('#last-history').slideDown(300);
             } else {
-                $('#last-status-wrap').hide();
+                $('#last-history').slideUp(300);
             }
-
-            $('#last-history').slideDown(300);
-        } else {
-            $('#last-history').slideUp(300);
+        },
+        error: function(xhr) {
+            console.log('Error:', xhr.status, xhr.responseText);
         }
     });
 }
diff --git a/project/resources/views/pengukuran_ibuhamil/create.blade.php b/project/resources/views/pengukuran_ibuhamil/create.blade.php
index f4d525c..148cbd8 100644
--- a/project/resources/views/pengukuran_ibuhamil/create.blade.php
+++ b/project/resources/views/pengukuran_ibuhamil/create.blade.php
@@ -128,46 +128,27 @@ class="form-control custom-input fs-5 fw-bold text-center"
 
                         {{-- History Pengukuran Terakhir --}}
                         <div class="col-12" id="last-history" style="display: none;">
-                            <div class="alert border-0 shadow-sm mb-2" style="border-radius: 14px; background: #fff5f0; border-left: 4px solid #FF782D !important;">
-                                <div class="d-flex align-items-center mb-2">
+                            <div class="border-0 shadow-sm p-3" style="border-radius: 14px; background: #fff5f0; border-left: 4px solid #FF782D !important;">
+                                <div class="d-flex align-items-center mb-3">
                                     <i class="bi bi-clock-history me-2" style="color: #FF782D; font-size: 1.1rem;"></i>
-                                    <strong style="color: #FF782D;">Pengukuran Terakhir</strong>
-                                    <span id="last-tanggal" class="ms-auto badge bg-light text-muted" style="font-size: 0.8rem;"></span>
+                                    <strong style="color: #FF782D;">Riwayat 5 Pengukuran Terakhir</strong>
                                 </div>
-                                <div class="row text-center g-2">
-                                    <div class="col-3">
-                                        <div class="p-2 bg-white rounded-3 shadow-sm">
-                                            <div class="text-muted small">Usia Kehamilan</div>
-                                            <div class="fw-bold fs-6" id="last-usia-kehamilan" style="color: #2c3e50;">-</div>
-                                            <div class="text-muted" style="font-size:0.75rem;">minggu</div>
-                                        </div>
-                                    </div>
-                                    <div class="col-3">
-                                        <div class="p-2 bg-white rounded-3 shadow-sm">
-                                            <div class="text-muted small">Berat Badan</div>
-                                            <div class="fw-bold fs-6" id="last-bb" style="color: #2c3e50;">-</div>
-                                            <div class="text-muted" style="font-size:0.75rem;">kg</div>
-                                        </div>
-                                    </div>
-                                    <div class="col-3">
-                                        <div class="p-2 bg-white rounded-3 shadow-sm">
-                                            <div class="text-muted small">Tinggi Badan</div>
-                                            <div class="fw-bold fs-6" id="last-tb" style="color: #2c3e50;">-</div>
-                                            <div class="text-muted" style="font-size:0.75rem;">cm</div>
-                                        </div>
-                                    </div>
-                                    <div class="col-3">
-                                        <div class="p-2 bg-white rounded-3 shadow-sm">
-                                            <div class="text-muted small">LILA</div>
-                                            <div class="fw-bold fs-6" id="last-lila" style="color: #2c3e50;">-</div>
-                                            <div class="text-muted" style="font-size:0.75rem;">cm</div>
-                                        </div>
-                                    </div>
-                                    <div id="last-status-wrap" class="mt-2 text-center" style="display:none;">
-                                        <span class="badge px-3 py-2" id="last-status"
-                                            style="border-radius: 20px; font-size: 0.85rem; background: #FF782D; color: white;">
-                                        </span>
-                                    </div>
+                                <div class="table-responsive">
+                                    <table class="table table-bordered table-hover text-center align-middle mb-0" style="font-size: 0.875rem; border-radius: 10px; overflow: hidden;">
+                                        <thead style="background-color: #FF782D; color: white;">
+                                            <tr>
+                                                <th>Tanggal</th>
+                                                <th>Usia Kehamilan</th>
+                                                <th>Berat Badan</th>
+                                                <th>Tinggi Badan</th>
+                                                <th>LILA</th>
+                                                <th>Status Gizi</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody id="last-history-tbody">
+                                            {{-- diisi via JavaScript --}}
+                                        </tbody>
+                                    </table>
                                 </div>
                             </div>
                         </div>
@@ -227,29 +208,43 @@ class="form-control custom-input fs-5 fw-bold text-center"
 
         // Fetch history pengukuran terakhir
         if (ibuId) {
-            $.get(`/pengukuran-ibu-hamil/last/${ibuId}`, function(data) {
-                if (data.found) {
-                    $('#last-tanggal').text(data.tanggal);
-                    $('#last-usia-kehamilan').text(data.usia_kehamilan);
-                    $('#last-bb').text(data.berat_badan);
-                    $('#last-tb').text(data.tinggi_badan);
-                    $('#last-lila').text(data.lila);
+        $.get(`/pengukuran-ibu-hamil/last/${ibuId}`, function(data) {
+            if (data.found) {
+                let rows = '';
+                data.data.forEach(function(item, index) {
+                    let badgeColor = '#6c757d'; // default abu
+                    let status = item.status_gizi ?? '-';
 
-                    if (data.status_gizi) {
-                        $('#last-status').text(data.status_gizi);
-                        $('#last-status-wrap').show();
-                    } else {
-                        $('#last-status-wrap').hide();
-                    }
+                    if (status.toLowerCase().includes('kurang'))      badgeColor = '#dc3545'; // merah
+                    else if (status.toLowerCase().includes('normal')) badgeColor = '#28a745'; // hijau
+                    else if (status.toLowerCase().includes('lebih'))  badgeColor = '#ffc107'; // kuning
+                    else if (status.toLowerCase().includes('obesitas')) badgeColor = '#fd7e14'; // oranye
 
-                    $('#last-history').slideDown(300);
-                } else {
-                    $('#last-history').slideUp(300);
-                }
-            });
-        } else {
-            $('#last-history').slideUp(300);
-        }
+                    rows += `
+                        <tr ${index === 0 ? 'style="background:#fff5f0; font-weight:600;"' : ''}>
+                            <td>${item.tanggal}</td>
+                            <td>${item.usia_kehamilan} minggu</td>
+                            <td>${item.berat_badan} kg</td>
+                            <td>${item.tinggi_badan} cm</td>
+                            <td>${item.lila} cm</td>
+                            <td>
+                                <span class="badge px-2 py-1" style="background:${badgeColor}; border-radius:20px;">
+                                    ${status}
+                                </span>
+                            </td>
+                        </tr>
+                    `;
+                });
+
+                $('#last-history-tbody').html(rows);
+                $('#last-history').slideDown(300);
+            } else {
+                $('#last-history').slideUp(300);
+            }
+        });
+    } else {
+        $('#last-history').slideUp(300);
+    }
     });
 });
 </script>