feat(noc): Implementasi total nominal diterima pada halaman penyelesaian

- Hitung total nominal diterima dari semua data yang difilter (bukan hanya halaman aktif)
- Tambahkan field `totalNominalDiterima` pada response JSON DataTable
- Parsing string currency ke numeric value untuk perhitungan akurat
- Tampilkan total di footer tabel dengan format Rupiah (IDR)
- Integrasi real-time backend (NocController) dan frontend (Blade + JS)
- Update otomatis via event listener DataTable saat data berubah atau difilter
- Styling footer dengan TailwindCSS untuk highlight nominal
- Validasi dan fallback aman (0) bila data tidak tersedia
- Transparansi & efisiensi monitoring keuangan secara real-time
This commit is contained in:
Daeng Deni Mardaeni
2025-09-15 15:39:00 +07:00
parent 312861a933
commit 041ca943c9
2 changed files with 42 additions and 0 deletions

View File

@@ -402,6 +402,14 @@
];
})->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'));
@@ -416,6 +424,7 @@
'pageCount' => $pageCount,
'page' => $currentPage,
'totalCount' => $totalRecords,
'totalNominalDiterima' => $totalNominalDiterima,
'data' => $data,
]);
}

View File

@@ -108,6 +108,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">
@@ -278,5 +287,29 @@
dataTable.search(filterValue, true);
}
});
/**
* Update total nominal diterima dari response 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);
}
});
</script>
@endpush