✨ 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:
@@ -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,
|
||||
]);
|
||||
}
|
||||
|
||||
@@ -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