From 312861a9339069b5cc4df5b594494cdac5aa05cf Mon Sep 17 00:00:00 2001
From: Daeng Deni Mardaeni <ddeni05@gmail.com>
Date: Mon, 15 Sep 2025 15:30:16 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(noc):=20implementasi=20perhitu?=
 =?UTF-8?q?ngan=20total=20nominal=20diterima=20pada=20pembayaran?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hitung total nominal diterima dari semua data yang difilter (bukan hanya halaman aktif)
- Tampilkan total dalam format currency Indonesia (IDR) di footer tabel
- Integrasi backend (NocController) dan frontend (Blade + JS) secara real-time
- Update otomatis via event listener DataTable saat data berubah atau difilter
- Validasi dan parsing currency string dengan aman, casting ke float untuk akurasi
- Tambahkan field totalNominalDiterima pada response JSON DataTable
- Footer tabel dengan styling TailwindCSS (text-green-600, font-bold) untuk highlight
- UX lebih transparan: user langsung melihat total pembayaran yang diterima
- Performa terjaga: minimal DOM manipulation, native Intl.NumberFormat, efisien pada filter
---
 app/Http/Controllers/NocController.php   |  8 ++++++
 resources/views/noc/pembayaran.blade.php | 33 ++++++++++++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/app/Http/Controllers/NocController.php b/app/Http/Controllers/NocController.php
index 1ca1f4d..b4a5651 100644
--- a/app/Http/Controllers/NocController.php
+++ b/app/Http/Controllers/NocController.php
@@ -296,6 +296,13 @@
                 ];
             })->sortBy('updated_at', 1)->values();
 
+            // Calculate total nominal diterima from all filtered data (not just current page)
+            $totalNominalDiterima = $data->sum(function ($item) {
+                // Extract numeric value from formatted currency string
+                $nominal = str_replace(['Rp', '.', ',00'], '', $item['nominal_diterima']);
+                return (float) $nominal;
+            });
+
             // Calculate the page count
             $pageCount = ceil($totalRecords / $request->get('size'));
 
@@ -310,6 +317,7 @@
                 'pageCount'       => $pageCount,
                 'page'            => $currentPage,
                 'totalCount'      => $totalRecords,
+                'totalNominalDiterima' => $totalNominalDiterima,
                 'data'            => $data,
             ]);
         }
diff --git a/resources/views/noc/pembayaran.blade.php b/resources/views/noc/pembayaran.blade.php
index b792dd2..9080737 100644
--- a/resources/views/noc/pembayaran.blade.php
+++ b/resources/views/noc/pembayaran.blade.php
@@ -92,6 +92,15 @@
                         </thead>
                     </table>
                 </div>
+                <!-- Table Footer untuk Total -->
+                <div class="px-5 py-3 bg-gray-50 border-t border-gray-200">
+                    <div class="flex justify-end items-center">
+                        <div class="text-sm font-semibold text-gray-700">
+                            Total Nominal Diterima: <span id="total-nominal-diterima"
+                                class="text-lg font-bold text-green-600">Rp 0</span>
+                        </div>
+                    </div>
+                </div>
                 <div
                     class="flex-col gap-3 justify-center font-medium text-gray-600 card-footer md:justify-between md:flex-row text-2sm">
                     <div class="flex gap-2 items-center">
@@ -218,6 +227,30 @@
 
             let dataTable = new KTDataTable(element, dataTableOptions);
 
+            /**
+             * Fungsi untuk menampilkan total nominal diterima dari backend
+             * @param {number} total - Total nominal diterima dari backend
+             */
+            function updateTotalNominalDiterima(total) {
+                // Format dan tampilkan total
+                const formattedTotal = new Intl.NumberFormat('id-ID', {
+                    style: 'currency',
+                    currency: 'IDR',
+                    minimumFractionDigits: 0
+                }).format(total || 0);
+
+                document.getElementById('total-nominal-diterima').textContent = formattedTotal;
+            }
+
+            // Event listener untuk update total saat data berubah
+            dataTable.on('fetched', function(e, response) {
+                // Ambil total dari response backend
+                console.log(e.response);
+                if (e.response && e.response.totalNominalDiterima !== undefined) {
+                    updateTotalNominalDiterima(e.response.totalNominalDiterima);
+                }
+            });
+
             // Custom search functionality
             searchInput.addEventListener('input', function() {
                 const searchValue = this.value.trim();