From 6c4e46b54241539ede6eda6ce4c8b01a0c8b4062 Mon Sep 17 00:00:00 2001
From: Sveemaaa <savemavema@gmail.com>
Date: Thu, 7 May 2026 20:29:06 +0700
Subject: [PATCH] fix pagination

---
 project/app/Providers/AppServiceProvider.php  |  3 +-
 .../views/balita/data-balita.blade.php        | 40 ++++++++++--
 .../resources/views/edukasi/edukasi.blade.php | 62 +++++++++++--------
 .../views/ibu_hamil/data-ibuhamil.blade.php   | 41 ++++++++++--
 .../views/pengukuran_balita/data.blade.php    | 40 ++++++++++--
 .../views/pengukuran_ibuhamil/data.blade.php  | 41 +++++++++++-
 project/resources/views/users/users.blade.php | 42 +++++++++++--
 7 files changed, 224 insertions(+), 45 deletions(-)

diff --git a/project/app/Providers/AppServiceProvider.php b/project/app/Providers/AppServiceProvider.php
index 452e6b6..f18c1e3 100644
--- a/project/app/Providers/AppServiceProvider.php
+++ b/project/app/Providers/AppServiceProvider.php
@@ -1,6 +1,7 @@
 <?php
 
 namespace App\Providers;
+use Illuminate\Pagination\Paginator;
 
 use Illuminate\Support\ServiceProvider;
 
@@ -19,6 +20,6 @@ public function register(): void
      */
     public function boot(): void
     {
-        //
+        Paginator::useBootstrapFive();
     }
 }
diff --git a/project/resources/views/balita/data-balita.blade.php b/project/resources/views/balita/data-balita.blade.php
index e035061..4756c23 100644
--- a/project/resources/views/balita/data-balita.blade.php
+++ b/project/resources/views/balita/data-balita.blade.php
@@ -107,10 +107,16 @@ class="btn btn-sm btn-edit-custom" title="Edit">
                 </table>
             </div>
 
-            <div class="d-flex justify-content-between align-items-center mt-4">
-                <small class="text-muted">Menampilkan {{ $balita->firstItem() ?? 0 }} sampai {{ $balita->lastItem() ?? 0 }} dari {{ $balita->total() }} data</small>
-                <div>
-                    {{ $balita->withQueryString()->links() }}
+            <div class="d-flex flex-column flex-md-row justify-content-between align-items-center mt-4 px-2">
+                <div class="mb-3 mb-md-0">
+                    <p class="text-muted small mb-0">
+                        Menampilkan <span class="fw-bold text-dark">{{ $balita->firstItem() ?? 0 }}</span>
+                        sampai <span class="fw-bold text-dark">{{ $balita->lastItem() ?? 0 }}</span>
+                        dari <span class="fw-bold text-dark">{{ $balita->total() }}</span> data
+                    </p>
+                </div>
+                <div class="pagination-orange">
+                    {{ $balita->links() }}
                 </div>
             </div>
 
@@ -198,6 +204,32 @@ class="btn btn-sm btn-edit-custom" title="Edit">
         opacity: 0.8;
         cursor: default;
     }
+    .pagination-orange .pagination {
+        gap: 5px;
+    }
+    .pagination-orange .page-link {
+        border-radius: 8px !important;
+        color: #FF782D !important;
+        border: 1px solid #eee !important;
+    }
+    .pagination-orange .page-item.active .page-link {
+        background-color: #FF782D !important;
+        border-color: #FF782D !important;
+        color: white !important;
+    }
+    .pagination-orange nav .flex.items-center.justify-between .hidden.sm-flex-1 {
+        display: none !important;
+    }
+
+    /* Jika masih ada teks 'Showing' di versi mobile */
+    .pagination-orange nav div:first-child p {
+        display: none !important;
+    }
+
+    /* Memastikan tombol angka tetap rapi */
+    .pagination-orange .pagination {
+        margin-bottom: 0;
+    }
 </style>
 
 <script>
diff --git a/project/resources/views/edukasi/edukasi.blade.php b/project/resources/views/edukasi/edukasi.blade.php
index 71dfc54..b324d37 100644
--- a/project/resources/views/edukasi/edukasi.blade.php
+++ b/project/resources/views/edukasi/edukasi.blade.php
@@ -88,13 +88,18 @@ class="btn btn-sm btn-edit-custom" title="Edit">
                 </table>
             </div>
 
-            <div class="d-flex justify-content-between align-items-center mt-4">
-                <small class="text-muted">Menampilkan {{ $t_edukasi->firstItem() ?? 0 }} sampai {{ $t_edukasi->lastItem() ?? 0 }} dari {{ $t_edukasi->total() }} data</small>
-                <div>
-                    {{ $t_edukasi->withQueryString()->links() }}
+            <div class="d-flex flex-column flex-md-row justify-content-between align-items-center mt-4 px-2">
+                <div class="mb-3 mb-md-0">
+                    <p class="text-muted small mb-0">
+                        Menampilkan <span class="fw-bold text-dark">{{ $t_edukasi->firstItem() ?? 0 }}</span>
+                        sampai <span class="fw-bold text-dark">{{ $t_edukasi->lastItem() ?? 0 }}</span>
+                        dari <span class="fw-bold text-dark">{{ $t_edukasi->total() }}</span> data
+                    </p>
+                </div>
+                <div class="pagination-orange">
+                    {{ $t_edukasi->links() }}
                 </div>
             </div>
-            
         </div>
     </div>
 
@@ -112,48 +117,55 @@ class="btn btn-sm btn-edit-custom" title="Edit">
     .btn-edit-custom:hover { background-color: #f59f00; color: white; }
     .btn-delete-custom { background-color: #fff5f5; color: #fa5252; border: none; border-radius: 8px; }
     .btn-delete-custom:hover { background-color: #fa5252; color: white; }
+    .pagination-orange .pagination {
+        gap: 5px;
+    }
+    .pagination-orange .page-link {
+        border-radius: 8px !important;
+        color: #FF782D !important;
+        border: 1px solid #eee !important;
+    }
+    .pagination-orange .page-item.active .page-link {
+        background-color: #FF782D !important;
+        border-color: #FF782D !important;
+        color: white !important;
+    }
+    .pagination-orange nav .flex.items-center.justify-between .hidden.sm-flex-1 {
+        display: none !important;
+    }
+
+    /* Jika masih ada teks 'Showing' di versi mobile */
+    .pagination-orange nav div:first-child p {
+        display: none !important;
+    }
+
+    /* Memastikan tombol angka tetap rapi */
+    .pagination-orange .pagination {
+        margin-bottom: 0;
+    }
 </style>
 
-<script>
 
+<script>
 let delayTimer;
 
-
-
 document.getElementById('search').addEventListener('keyup', function () {
-
     clearTimeout(delayTimer);
 
-
-
     let query = this.value;
 
-
-
     delayTimer = setTimeout(() => {
-
         fetch(`{{ route('edukasi.index') }}?search=` + query)
-
         .then(response => response.text())
-
         .then(html => {
-
             let parser = new DOMParser();
-
             let doc = parser.parseFromString(html, 'text/html');
 
-
-
             let newTable = doc.querySelector('#edukasi-table').innerHTML;
-
             document.getElementById('edukasi-table').innerHTML = newTable;
-
         });
-
     }, 300);
-
 });
-
 </script>
 
 @endsection
diff --git a/project/resources/views/ibu_hamil/data-ibuhamil.blade.php b/project/resources/views/ibu_hamil/data-ibuhamil.blade.php
index 5dee068..7c711c1 100644
--- a/project/resources/views/ibu_hamil/data-ibuhamil.blade.php
+++ b/project/resources/views/ibu_hamil/data-ibuhamil.blade.php
@@ -40,6 +40,7 @@
                     <thead>
                         <tr>
                             <th style="width: 5%">No</th>
+                            <th>NIK</th>
                             <th>Nama</th>
                             <th>Tanggal Lahir</th>
                             <th>Alamat</th>
@@ -94,10 +95,16 @@ class="btn btn-sm btn-edit-custom" title="Edit">
                 </table>
             </div>
 
-            <div class="d-flex justify-content-between align-items-center mt-4">
-                <small class="text-muted">Menampilkan {{ $ibu_hamil->firstItem() ?? 0 }} sampai {{ $ibu_hamil->lastItem() ?? 0 }} dari {{ $ibu_hamil->total() }} data</small>
-                <div>
-                    {{ $ibu_hamil->withQueryString()->links() }}
+            <div class="d-flex flex-column flex-md-row justify-content-between align-items-center mt-4 px-2">
+                <div class="mb-3 mb-md-0">
+                    <p class="text-muted small mb-0">
+                        Menampilkan <span class="fw-bold text-dark">{{ $ibu_hamil->firstItem() ?? 0 }}</span>
+                        sampai <span class="fw-bold text-dark">{{ $ibu_hamil->lastItem() ?? 0 }}</span>
+                        dari <span class="fw-bold text-dark">{{ $ibu_hamil->total() }}</span> data
+                    </p>
+                </div>
+                <div class="pagination-orange">
+                    {{ $ibu_hamil->links() }}
                 </div>
             </div>
 
@@ -185,6 +192,32 @@ class="btn btn-sm btn-edit-custom" title="Edit">
         opacity: 0.8;
         cursor: default;
     }
+    .pagination-orange .pagination {
+        gap: 5px;
+    }
+    .pagination-orange .page-link {
+        border-radius: 8px !important;
+        color: #FF782D !important;
+        border: 1px solid #eee !important;
+    }
+    .pagination-orange .page-item.active .page-link {
+        background-color: #FF782D !important;
+        border-color: #FF782D !important;
+        color: white !important;
+    }
+    .pagination-orange nav .flex.items-center.justify-between .hidden.sm-flex-1 {
+        display: none !important;
+    }
+
+    /* Jika masih ada teks 'Showing' di versi mobile */
+    .pagination-orange nav div:first-child p {
+        display: none !important;
+    }
+
+    /* Memastikan tombol angka tetap rapi */
+    .pagination-orange .pagination {
+        margin-bottom: 0;
+    }
 </style>
 
 <script>
diff --git a/project/resources/views/pengukuran_balita/data.blade.php b/project/resources/views/pengukuran_balita/data.blade.php
index f7e584c..19d7790 100644
--- a/project/resources/views/pengukuran_balita/data.blade.php
+++ b/project/resources/views/pengukuran_balita/data.blade.php
@@ -108,10 +108,16 @@
                 </table>
             </div>
 
-            <div class="d-flex justify-content-between align-items-center mt-4">
-                <small class="text-muted">Menampilkan {{ $p_balita->firstItem() ?? 0 }} sampai {{ $p_balita->lastItem() ?? 0 }} dari {{ $p_balita->total() }} data</small>
-                <div>
-                    {{ $p_balita->withQueryString()->links() }}
+             <div class="d-flex flex-column flex-md-row justify-content-between align-items-center mt-4 px-2">
+                <div class="mb-3 mb-md-0">
+                    <p class="text-muted small mb-0">
+                        Menampilkan <span class="fw-bold text-dark">{{ $p_balita->firstItem() ?? 0 }}</span>
+                        sampai <span class="fw-bold text-dark">{{ $p_balita->lastItem() ?? 0 }}</span>
+                        dari <span class="fw-bold text-dark">{{ $p_balita->total() }}</span> data
+                    </p>
+                </div>
+                <div class="pagination-orange">
+                    {{ $p_balita->links() }}
                 </div>
             </div>
 
@@ -133,6 +139,32 @@
     .btn-detail-custom:hover { background-color: #007bff; color: white; }
     .btn-delete-custom { background-color: #fff5f5; color: #fa5252; border: none; border-radius: 8px; }
     .btn-delete-custom:hover { background-color: #fa5252; color: white; }
+    .pagination-orange .pagination {
+        gap: 5px;
+    }
+    .pagination-orange .page-link {
+        border-radius: 8px !important;
+        color: #FF782D !important;
+        border: 1px solid #eee !important;
+    }
+    .pagination-orange .page-item.active .page-link {
+        background-color: #FF782D !important;
+        border-color: #FF782D !important;
+        color: white !important;
+    }
+    .pagination-orange nav .flex.items-center.justify-between .hidden.sm-flex-1 {
+        display: none !important;
+    }
+
+    /* Jika masih ada teks 'Showing' di versi mobile */
+    .pagination-orange nav div:first-child p {
+        display: none !important;
+    }
+
+    /* Memastikan tombol angka tetap rapi */
+    .pagination-orange .pagination {
+        margin-bottom: 0;
+    }
 </style>
 
 <script>
diff --git a/project/resources/views/pengukuran_ibuhamil/data.blade.php b/project/resources/views/pengukuran_ibuhamil/data.blade.php
index aeacf48..17678d5 100644
--- a/project/resources/views/pengukuran_ibuhamil/data.blade.php
+++ b/project/resources/views/pengukuran_ibuhamil/data.blade.php
@@ -111,8 +111,21 @@
                 </table>
             </div>
 
-            <div class="d-flex justify-content-center mt-4">
+            {{-- <div class="d-flex justify-content-center mt-4">
                 {{ $p_ibuhamil->withQueryString()->links() }}
+            </div> --}}
+
+            <div class="d-flex flex-column flex-md-row justify-content-between align-items-center mt-4 px-2">
+                <div class="mb-3 mb-md-0">
+                    <p class="text-muted small mb-0">
+                        Menampilkan <span class="fw-bold text-dark">{{ $p_ibuhamil->firstItem() ?? 0 }}</span>
+                        sampai <span class="fw-bold text-dark">{{ $p_ibuhamil->lastItem() ?? 0 }}</span>
+                        dari <span class="fw-bold text-dark">{{ $p_ibuhamil->total() }}</span> data
+                    </p>
+                </div>
+                <div class="pagination-orange">
+                    {{ $p_ibuhamil->links() }}
+                </div>
             </div>
         </div>
     </div>
@@ -132,6 +145,32 @@
     .btn-detail-custom:hover { background-color: #007bff; color: white; }
     .btn-delete-custom { background-color: #fff5f5; color: #fa5252; border: none; border-radius: 8px; }
     .btn-delete-custom:hover { background-color: #fa5252; color: white; }
+    .pagination-orange .pagination {
+        gap: 5px;
+    }
+    .pagination-orange .page-link {
+        border-radius: 8px !important;
+        color: #FF782D !important;
+        border: 1px solid #eee !important;
+    }
+    .pagination-orange .page-item.active .page-link {
+        background-color: #FF782D !important;
+        border-color: #FF782D !important;
+        color: white !important;
+    }
+    .pagination-orange nav .flex.items-center.justify-between .hidden.sm-flex-1 {
+        display: none !important;
+    }
+
+    /* Jika masih ada teks 'Showing' di versi mobile */
+    .pagination-orange nav div:first-child p {
+        display: none !important;
+    }
+
+    /* Memastikan tombol angka tetap rapi */
+    .pagination-orange .pagination {
+        margin-bottom: 0;
+    }
 </style>
 
 <script>
diff --git a/project/resources/views/users/users.blade.php b/project/resources/views/users/users.blade.php
index 8bb8b69..875a1eb 100644
--- a/project/resources/views/users/users.blade.php
+++ b/project/resources/views/users/users.blade.php
@@ -96,14 +96,18 @@ class="btn btn-sm btn-edit-custom" title="Edit">
                     </tbody>
                 </table>
             </div>
-
-            <div class="d-flex justify-content-between align-items-center mt-4">
-                <small class="text-muted">Menampilkan {{ $user->firstItem() ?? 0 }} sampai {{ $user->lastItem() ?? 0 }} dari {{ $user->total() }} data</small>
-                <div>
-                    {{ $user->withQueryString()->links() }}
+            <div class="d-flex flex-column flex-md-row justify-content-between align-items-center mt-4 px-2">
+                <div class="mb-3 mb-md-0">
+                    <p class="text-muted small mb-0">
+                        Menampilkan <span class="fw-bold text-dark">{{ $user->firstItem() ?? 0 }}</span>
+                        sampai <span class="fw-bold text-dark">{{ $user->lastItem() ?? 0 }}</span>
+                        dari <span class="fw-bold text-dark">{{ $user->total() }}</span> data
+                    </p>
+                </div>
+                <div class="pagination-orange">
+                    {{ $user->links() }}
                 </div>
             </div>
-
         </div>
     </div>
 
@@ -163,6 +167,32 @@ class="btn btn-sm btn-edit-custom" title="Edit">
         border-color: #FF782D;
         box-shadow: 0 0 0 0.2rem rgba(255, 120, 45, 0.25);
     }
+    .pagination-orange .pagination {
+        gap: 5px;
+    }
+    .pagination-orange .page-link {
+        border-radius: 8px !important;
+        color: #FF782D !important;
+        border: 1px solid #eee !important;
+    }
+    .pagination-orange .page-item.active .page-link {
+        background-color: #FF782D !important;
+        border-color: #FF782D !important;
+        color: white !important;
+    }
+    .pagination-orange nav .flex.items-center.justify-between .hidden.sm-flex-1 {
+        display: none !important;
+    }
+
+    /* Jika masih ada teks 'Showing' di versi mobile */
+    .pagination-orange nav div:first-child p {
+        display: none !important;
+    }
+
+    /* Memastikan tombol angka tetap rapi */
+    .pagination-orange .pagination {
+        margin-bottom: 0;
+    }
 </style>
 
 <script>