35bb173056
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.
322 lines
14 KiB
PHP
322 lines
14 KiB
PHP
@extends('layouts.main')
|
|
|
|
@section('breadcrumbs')
|
|
{{ Breadcrumbs::render('laporan-closing-balance.index') }}
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div class="grid">
|
|
<div class="card card-grid min-w-full" data-datatable="false" data-datatable-page-size="10" data-datatable-state-save="false" id="laporan-closing-balance-table" data-api-url="{{ route('laporan-closing-balance.datatables') }}">
|
|
<div class="card-header py-5 flex-wrap">
|
|
<h3 class="card-title">
|
|
Laporan Closing Balance
|
|
</h3>
|
|
<div class="flex flex-wrap gap-2 lg:gap-5">
|
|
<!-- Filter Form -->
|
|
<div class="flex flex-wrap gap-2.5 items-end">
|
|
<!-- Nomor Rekening Filter -->
|
|
<div class="flex flex-col">
|
|
<label class="text-sm font-medium text-gray-700 mb-1">Nomor Rekening</label>
|
|
<input type="text" id="account-number-filter" class="input w-[200px]" placeholder="Masukkan nomor rekening">
|
|
</div>
|
|
|
|
<!-- Tanggal Mulai Filter -->
|
|
<div class="flex flex-col">
|
|
<label class="text-sm font-medium text-gray-700 mb-1">Tanggal Mulai</label>
|
|
<input type="date" id="start-date-filter" class="input w-[150px]">
|
|
</div>
|
|
|
|
<!-- Tanggal Akhir Filter -->
|
|
<div class="flex flex-col">
|
|
<label class="text-sm font-medium text-gray-700 mb-1">Tanggal Akhir</label>
|
|
<input type="date" id="end-date-filter" class="input w-[150px]">
|
|
</div>
|
|
|
|
<!-- Tombol Filter -->
|
|
<button type="button" id="apply-filter" class="btn btn-primary">
|
|
<i class="ki-filled ki-magnifier"></i>
|
|
Filter
|
|
</button>
|
|
|
|
<!-- Tombol Reset -->
|
|
<button type="button" id="reset-filter" class="btn btn-light">
|
|
<i class="ki-filled ki-arrows-circle"></i>
|
|
Reset
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-2.5">
|
|
<div class="h-[24px] border border-r-gray-200"></div>
|
|
<a class="btn btn-light" href="{{ route('laporan-closing-balance.export') }}" id="export-btn">
|
|
<i class="ki-filled ki-file-down"></i>
|
|
Export to CSV
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="scrollable-x-auto">
|
|
<table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true">
|
|
<thead>
|
|
<tr>
|
|
<th class="w-14">
|
|
<input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
|
|
</th>
|
|
<th class="min-w-[200px]" data-datatable-column="account_number">
|
|
<span class="sort">
|
|
<span class="sort-label">Nomor Rekening</span>
|
|
<span class="sort-icon"></span>
|
|
</span>
|
|
</th>
|
|
<th class="min-w-[150px]" data-datatable-column="period">
|
|
<span class="sort">
|
|
<span class="sort-label">Periode</span>
|
|
<span class="sort-icon"></span>
|
|
</span>
|
|
</th>
|
|
<th class="min-w-[150px]" data-datatable-column="cleared_balance">
|
|
<span class="sort">
|
|
<span class="sort-label">Saldo Cleared</span>
|
|
<span class="sort-icon"></span>
|
|
</span>
|
|
</th>
|
|
<th class="min-w-[150px]" data-datatable-column="actual_balance">
|
|
<span class="sort">
|
|
<span class="sort-label">Saldo Akhir</span>
|
|
<span class="sort-icon"></span>
|
|
</span>
|
|
</th>
|
|
<th class="min-w-[150px]" data-datatable-column="updated_at">
|
|
<span class="sort">
|
|
<span class="sort-label">Tanggal Update</span>
|
|
<span class="sort-icon"></span>
|
|
</span>
|
|
</th>
|
|
<th class="min-w-[100px] text-center" data-datatable-column="actions">Action</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
</div>
|
|
<div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
|
|
<div class="flex items-center gap-2">
|
|
Show
|
|
<select class="select select-sm w-16" data-datatable-size="true" name="perpage"></select> per page
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<span data-datatable-info="true"></span>
|
|
<div class="pagination" data-datatable-pagination="true">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script type="text/javascript">
|
|
/**
|
|
* Fungsi untuk memformat angka menjadi format mata uang
|
|
* @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 memformat periode dari format YYYYMMDD ke format yang lebih readable
|
|
* @param {string} period - Periode dalam format YYYYMMDD
|
|
* @returns {string} - Periode yang sudah diformat
|
|
*/
|
|
function formatPeriod(period) {
|
|
if (!period || period.length !== 8) return period;
|
|
|
|
const year = period.substring(0, 4);
|
|
const month = period.substring(4, 6);
|
|
const day = period.substring(6, 8);
|
|
|
|
return `${day}/${month}/${year}`;
|
|
}
|
|
|
|
/**
|
|
* Fungsi untuk memformat tanggal
|
|
* @param {string} dateString - String tanggal
|
|
* @returns {string} - Tanggal yang sudah diformat
|
|
*/
|
|
function formatDate(dateString) {
|
|
if (!dateString) return '-';
|
|
|
|
const date = new Date(dateString);
|
|
return date.toLocaleDateString('id-ID', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
});
|
|
}
|
|
</script>
|
|
<script type="module">
|
|
const element = document.querySelector('#laporan-closing-balance-table');
|
|
const accountNumberFilter = document.getElementById('account-number-filter');
|
|
const startDateFilter = document.getElementById('start-date-filter');
|
|
const endDateFilter = document.getElementById('end-date-filter');
|
|
const applyFilterBtn = document.getElementById('apply-filter');
|
|
const resetFilterBtn = document.getElementById('reset-filter');
|
|
const exportBtn = document.getElementById('export-btn');
|
|
|
|
const apiUrl = element.getAttribute('data-api-url');
|
|
|
|
// Konfigurasi DataTable
|
|
const dataTableOptions = {
|
|
apiEndpoint: apiUrl,
|
|
pageSize: 10,
|
|
columns: {
|
|
select: {
|
|
render: (item, data, context) => {
|
|
const checkbox = document.createElement('input');
|
|
checkbox.className = 'checkbox checkbox-sm';
|
|
checkbox.type = 'checkbox';
|
|
checkbox.value = data.id ? data.id.toString() : '';
|
|
checkbox.setAttribute('data-datatable-row-check', 'true');
|
|
return checkbox.outerHTML.trim();
|
|
},
|
|
},
|
|
account_number: {
|
|
title: 'Nomor Rekening',
|
|
render: (item, data) => {
|
|
return `<span class="font-medium">${data.account_number || '-'}</span>`;
|
|
}
|
|
},
|
|
period: {
|
|
title: 'Periode',
|
|
render: (item, data) => {
|
|
return `<span class="text-gray-700">${formatPeriod(data.period)}</span>`;
|
|
}
|
|
},
|
|
cleared_balance: {
|
|
title: 'Saldo Cleared',
|
|
render: (item, data) => {
|
|
const amount = parseFloat(data.cleared_balance) || 0;
|
|
return `<span class="text-blue-600 font-medium">${formatCurrency(amount)}</span>`;
|
|
}
|
|
},
|
|
actual_balance: {
|
|
title: 'Saldo Akhir',
|
|
render: (item, data) => {
|
|
const amount = parseFloat(data.actual_balance) || 0;
|
|
return `<span class="text-green-600 font-medium">${formatCurrency(amount)}</span>`;
|
|
}
|
|
},
|
|
updated_at: {
|
|
title: 'Tanggal Update',
|
|
render: (item, data) => {
|
|
return `<span class="text-gray-600 text-sm">${formatDate(data.updated_at)}</span>`;
|
|
}
|
|
},
|
|
actions: {
|
|
title: 'Action',
|
|
render: (item, data) => {
|
|
return `<div class="flex flex-nowrap justify-center">
|
|
<a class="btn btn-sm btn-icon btn-clear btn-info"
|
|
href="{{ route('laporan-closing-balance.show', ['accountNumber' => '__ACCOUNT__', 'period' => '__PERIOD__']) }}"
|
|
.replace('__ACCOUNT__', data.account_number)
|
|
.replace('__PERIOD__', data.period)
|
|
title="Lihat Detail">
|
|
<i class="ki-outline ki-eye"></i>
|
|
</a>
|
|
</div>`;
|
|
},
|
|
}
|
|
},
|
|
};
|
|
|
|
// Inisialisasi DataTable
|
|
let dataTable = new KTDataTable(element, dataTableOptions);
|
|
dataTable.showSpinner();
|
|
|
|
/**
|
|
* Fungsi untuk menerapkan filter
|
|
*/
|
|
function applyFilters() {
|
|
let filters = {};
|
|
|
|
if (accountNumberFilter.value.trim()) {
|
|
filters.account_number = accountNumberFilter.value.trim();
|
|
}
|
|
|
|
if (startDateFilter.value) {
|
|
filters.start_date = startDateFilter.value;
|
|
}
|
|
|
|
if (endDateFilter.value) {
|
|
filters.end_date = endDateFilter.value;
|
|
}
|
|
|
|
console.log('Applying filters:', filters);
|
|
dataTable.search(filters);
|
|
|
|
// Update export URL dengan filter
|
|
updateExportUrl(filters);
|
|
}
|
|
|
|
/**
|
|
* Fungsi untuk mereset filter
|
|
*/
|
|
function resetFilters() {
|
|
accountNumberFilter.value = '';
|
|
startDateFilter.value = '';
|
|
endDateFilter.value = '';
|
|
|
|
dataTable.search({});
|
|
updateExportUrl({});
|
|
}
|
|
|
|
/**
|
|
* Fungsi untuk update URL export dengan parameter filter
|
|
*/
|
|
function updateExportUrl(filters) {
|
|
const baseUrl = '{{ route("laporan-closing-balance.export") }}';
|
|
const params = new URLSearchParams();
|
|
|
|
Object.keys(filters).forEach(key => {
|
|
if (filters[key]) {
|
|
params.append(key, filters[key]);
|
|
}
|
|
});
|
|
|
|
const newUrl = params.toString() ? `${baseUrl}?${params.toString()}` : baseUrl;
|
|
exportBtn.href = newUrl;
|
|
}
|
|
|
|
// Event listeners
|
|
applyFilterBtn.addEventListener('click', applyFilters);
|
|
resetFilterBtn.addEventListener('click', resetFilters);
|
|
|
|
// Auto apply filter saat enter di input
|
|
[accountNumberFilter, startDateFilter, endDateFilter].forEach(input => {
|
|
input.addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
applyFilters();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Set default date range (last 30 days)
|
|
const today = new Date();
|
|
const thirtyDaysAgo = new Date(today.getTime() - (30 * 24 * 60 * 60 * 1000));
|
|
|
|
endDateFilter.value = today.toISOString().split('T')[0];
|
|
startDateFilter.value = thirtyDaysAgo.toISOString().split('T')[0];
|
|
|
|
// Apply default filter
|
|
setTimeout(() => {
|
|
applyFilters();
|
|
}, 100);
|
|
</script>
|
|
@endpush |