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.
291 lines
12 KiB
PHP
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 |