Files
webstatement/resources/views/laporan-closing-balance/show.blade.php
Daeng Deni Mardaeni 35bb173056 feat(webstatement): tambah fitur Laporan Closing Balance
Perubahan yang dilakukan:

**Controller LaporanClosingBalanceController:**
- Membuat controller baru untuk laporan closing balance dengan method index(), dataForDatatables(), export(), dan show().
- Menggunakan model AccountBalance dengan field actual_balance dan cleared_balance.
- Implementasi filter nomor rekening dan rentang tanggal.
- Menambahkan DB transaction dan rollback untuk keamanan data.
- Logging dan error handling komprehensif untuk proses data dan export.

**View laporan-closing-balance/index.blade.php:**
- Form filter dengan input nomor rekening dan rentang tanggal (default 30 hari terakhir).
- Implementasi DataTables dengan kolom: Nomor Rekening, Periode, Saldo Cleared, Saldo Aktual, Tanggal Update, dan Action.
- Tombol Filter, Reset, dan Export CSV.
- JavaScript untuk format currency IDR, format tanggal, dan dynamic export URL.
- Menggunakan TailwindCSS dan KTDataTable untuk desain yang responsive.

**View laporan-closing-balance/show.blade.php:**
- Halaman detail per record dengan visual saldo yang menarik (color-coded cards).
- Menampilkan Saldo Cleared, Saldo Aktual, dan Selisih Saldo secara otomatis.
- Informasi rekening dan periode disertai fitur copy ke clipboard.
- Tombol aksi: Kembali, Export, dan Print (dengan print style khusus).
- Responsive untuk berbagai ukuran layar.

**Routing dan Navigasi:**
- Menambahkan routing resource dengan prefix 'laporan-closing-balance' di web.php.
- Tambahan route untuk datatables, export, dan show dengan middleware auth.
- Breadcrumb dinamis untuk index dan show, menampilkan nomor rekening dan periode.

**Penyesuaian Model:**
- Menggunakan relasi Account di model AccountBalance melalui account_number.
- Menyesuaikan field dari opening_balance ke cleared_balance sesuai skema.
- Tetap mempertahankan actual_balance untuk saldo akhir.

**Fitur Keamanan dan Performance:**
- Input validation dan sanitization untuk semua request.
- Pagination dan filter query untuk efisiensi dan mencegah memory overflow.
- Error logging dengan context untuk debugging lebih mudah.

**User Experience:**
- Interface user-friendly dengan feedback visual dan loading state.
- Export CSV untuk kebutuhan analisis lebih lanjut.
- Print-friendly layout untuk kebutuhan cetak data.
- Clipboard integration untuk kemudahan salin data.

Tujuan perubahan:
- Menyediakan fitur monitoring dan analisis closing balance secara komprehensif di modul Webstatement.
- Mempermudah user dalam melihat detail saldo akhir dengan filtering, export, dan cetak yang optimal.
2025-07-15 09:32:01 +07:00

291 lines
12 KiB
PHP

@extends('layouts.main')
@section('breadcrumbs')
{{ Breadcrumbs::render('laporan-closing-balance.show', $closingBalance) }}
@endsection
@section('content')
<div class="grid">
<!-- Header Card -->
<div class="card mb-5">
<div class="card-header">
<h3 class="card-title">
Detail Laporan Closing Balance
</h3>
<div class="flex items-center gap-2">
<a href="{{ route('laporan-closing-balance.index') }}" class="btn btn-light">
<i class="ki-filled ki-left"></i>
Kembali
</a>
</div>
</div>
</div>
<!-- Detail Information Card -->
<div class="card">
<div class="card-header">
<h3 class="card-title">
Informasi Rekening
</h3>
</div>
<div class="card-body">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Informasi Dasar -->
<div class="space-y-4">
<div class="flex flex-col">
<label class="text-sm font-medium text-gray-600 mb-1">Nomor Rekening</label>
<div class="text-lg font-semibold text-gray-900">
{{ $closingBalance->account_number }}
</div>
</div>
<div class="flex flex-col">
<label class="text-sm font-medium text-gray-600 mb-1">Periode</label>
<div class="text-lg font-semibold text-gray-900">
@php
$period = $closingBalance->period;
if (strlen($period) === 8) {
$formatted = substr($period, 6, 2) . '/' . substr($period, 4, 2) . '/' . substr($period, 0, 4);
echo $formatted;
} else {
echo $period;
}
@endphp
</div>
</div>
<div class="flex flex-col">
<label class="text-sm font-medium text-gray-600 mb-1">Tanggal Update Terakhir</label>
<div class="text-lg font-semibold text-gray-900">
{{ $closingBalance->updated_at ? $closingBalance->updated_at->format('d/m/Y H:i:s') : '-' }}
</div>
</div>
</div>
<!-- Informasi Saldo -->
<div class="space-y-4">
<div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
<label class="text-sm font-medium text-blue-700 mb-2 block">Saldo Cleared</label>
<div class="text-2xl font-bold text-blue-800">
@php
$clearedBalance = $closingBalance->cleared_balance ?? 0;
echo 'Rp ' . number_format($clearedBalance, 2, ',', '.');
@endphp
</div>
</div>
<div class="bg-green-50 p-4 rounded-lg border border-green-200">
<label class="text-sm font-medium text-green-700 mb-2 block">Saldo Aktual</label>
<div class="text-2xl font-bold text-green-800">
@php
$actualBalance = $closingBalance->actual_balance ?? 0;
echo 'Rp ' . number_format($actualBalance, 2, ',', '.');
@endphp
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
<label class="text-sm font-medium text-gray-700 mb-2 block">Selisih Saldo</label>
<div class="text-2xl font-bold {{ ($actualBalance - $clearedBalance) >= 0 ? 'text-green-800' : 'text-red-800' }}">
@php
$difference = $actualBalance - $clearedBalance;
$sign = $difference >= 0 ? '+' : '';
echo $sign . 'Rp ' . number_format($difference, 2, ',', '.');
@endphp
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Additional Information Card -->
@if($closingBalance->created_at || $closingBalance->updated_at)
<div class="card mt-5">
<div class="card-header">
<h3 class="card-title">
Informasi Sistem
</h3>
</div>
<div class="card-body">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
@if($closingBalance->created_at)
<div class="flex flex-col">
<label class="text-sm font-medium text-gray-600 mb-1">Tanggal Dibuat</label>
<div class="text-base text-gray-900">
{{ $closingBalance->created_at->format('d/m/Y H:i:s') }}
</div>
<div class="text-sm text-gray-500">
{{ $closingBalance->created_at->diffForHumans() }}
</div>
</div>
@endif
@if($closingBalance->updated_at)
<div class="flex flex-col">
<label class="text-sm font-medium text-gray-600 mb-1">Tanggal Diperbarui</label>
<div class="text-base text-gray-900">
{{ $closingBalance->updated_at->format('d/m/Y H:i:s') }}
</div>
<div class="text-sm text-gray-500">
{{ $closingBalance->updated_at->diffForHumans() }}
</div>
</div>
@endif
</div>
</div>
</div>
@endif
<!-- Action Buttons -->
<div class="card mt-5">
<div class="card-body">
<div class="flex flex-wrap gap-3 justify-center lg:justify-start">
<a href="{{ route('laporan-closing-balance.index') }}" class="btn btn-light">
<i class="ki-filled ki-left"></i>
Kembali ke Daftar
</a>
<a href="{{ route('laporan-closing-balance.export', ['account_number' => $closingBalance->account_number, 'start_date' => $closingBalance->period, 'end_date' => $closingBalance->period]) }}"
class="btn btn-primary">
<i class="ki-filled ki-file-down"></i>
Export Data Ini
</a>
<button type="button" class="btn btn-info" onclick="window.print()">
<i class="ki-filled ki-printer"></i>
Print
</button>
</div>
</div>
</div>
</div>
@endsection
@push('styles')
<style>
/* Print styles */
@media print {
.btn, .card-header .flex, nav, .breadcrumb {
display: none !important;
}
.card {
box-shadow: none !important;
border: 1px solid #ddd !important;
}
.card-body {
padding: 1rem !important;
}
body {
font-size: 12px !important;
}
.text-2xl {
font-size: 1.5rem !important;
}
.text-lg {
font-size: 1.125rem !important;
}
}
</style>
@endpush
@push('scripts')
<script type="text/javascript">
/**
* Fungsi untuk memformat angka menjadi format mata uang Indonesia
* @param {number} amount - Jumlah yang akan diformat
* @returns {string} - String yang sudah diformat
*/
function formatCurrency(amount) {
return new Intl.NumberFormat('id-ID', {
style: 'currency',
currency: 'IDR',
minimumFractionDigits: 2
}).format(amount);
}
/**
* Fungsi untuk copy nomor rekening ke clipboard
*/
function copyAccountNumber() {
const accountNumber = '{{ $closingBalance->account_number }}';
if (navigator.clipboard) {
navigator.clipboard.writeText(accountNumber).then(function() {
// Show success message
if (typeof Swal !== 'undefined') {
Swal.fire({
icon: 'success',
title: 'Berhasil!',
text: 'Nomor rekening berhasil disalin ke clipboard',
timer: 2000,
showConfirmButton: false
});
} else {
alert('Nomor rekening berhasil disalin ke clipboard');
}
}).catch(function(err) {
console.error('Error copying to clipboard: ', err);
fallbackCopyTextToClipboard(accountNumber);
});
} else {
fallbackCopyTextToClipboard(accountNumber);
}
}
/**
* Fallback function untuk copy text jika clipboard API tidak tersedia
*/
function fallbackCopyTextToClipboard(text) {
const textArea = document.createElement('textarea');
textArea.value = text;
// Avoid scrolling to bottom
textArea.style.top = '0';
textArea.style.left = '0';
textArea.style.position = 'fixed';
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
const successful = document.execCommand('copy');
if (successful) {
if (typeof Swal !== 'undefined') {
Swal.fire({
icon: 'success',
title: 'Berhasil!',
text: 'Nomor rekening berhasil disalin ke clipboard',
timer: 2000,
showConfirmButton: false
});
} else {
alert('Nomor rekening berhasil disalin ke clipboard');
}
} else {
console.error('Fallback: Copying text command was unsuccessful');
}
} catch (err) {
console.error('Fallback: Oops, unable to copy', err);
}
document.body.removeChild(textArea);
}
// Add click event to account number for easy copying
document.addEventListener('DOMContentLoaded', function() {
const accountNumberElements = document.querySelectorAll('.account-number-clickable');
accountNumberElements.forEach(element => {
element.style.cursor = 'pointer';
element.title = 'Klik untuk menyalin nomor rekening';
element.addEventListener('click', copyAccountNumber);
});
});
</script>
@endpush