✨ 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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user