```
feat(sync-logs): tambah fitur sinkronisasi log biaya kartu - Menambahkan route, controller, model, dan migration untuk fitur baru `sync-logs`. - Mengganti referensi `BiayaKartuController` menjadi `SyncLogsController`. - Menyediakan halaman untuk menampilkan data log sinkronisasi dengan filter, pencarian, dan pagination. - Menambahkan kemampuan melihat detail proses sinkronisasi langsung dari modal. - Memperbarui `module.json` dengan item menu baru untuk fitur log sinkronisasi. - Menghapus `BiayaKartuController` yang sudah tidak digunakan lagi. ``` Signed-off-by: Daeng Deni Mardaeni <ddeni05@gmail.com>
This commit is contained in:
Daeng Deni Mardaeni
347
resources/views/sync-logs/index.blade.php
Normal file
347
resources/views/sync-logs/index.blade.php
Normal file
@@ -0,0 +1,347 @@
|
||||
|
||||
@extends('layouts.main')
|
||||
|
||||
@section('breadcrumbs')
|
||||
{{ Breadcrumbs::render(request()->route()->getName()) }}
|
||||
@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="sync-logs-table" data-api-url="{{ route('sync-logs.datatables') }}">
|
||||
<div class="card-header py-5 flex-wrap">
|
||||
<h3 class="card-title">
|
||||
Log Sinkronisasi Data Kartu
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-2 lg:gap-5">
|
||||
<div class="flex">
|
||||
<label class="input input-sm"> <i class="ki-filled ki-magnifier"> </i>
|
||||
<input placeholder="Cari Log Sinkronisasi" id="search" type="text" value="">
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<select class="select select-sm" id="filter-sync">
|
||||
<option value="">Status Sinkronisasi (Semua)</option>
|
||||
<option value="1">Sudah Sinkronisasi</option>
|
||||
<option value="0">Belum Sinkronisasi</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<select class="select select-sm" id="filter-csv">
|
||||
<option value="">Status CSV (Semua)</option>
|
||||
<option value="1">CSV Sudah Dibuat</option>
|
||||
<option value="0">CSV Belum Dibuat</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<select class="select select-sm" id="filter-ftp">
|
||||
<option value="">Status FTP (Semua)</option>
|
||||
<option value="1">Sudah Upload ke FTP</option>
|
||||
<option value="0">Belum Upload ke FTP</option>
|
||||
</select>
|
||||
</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="min-w-[100px]" data-datatable-column="periode">
|
||||
<span class="sort"> <span class="sort-label">Periode</span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[100px]" data-datatable-column="is_sync">
|
||||
<span class="sort"> <span class="sort-label">Status Sinkronisasi</span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="sync_at">
|
||||
<span class="sort"> <span class="sort-label">Waktu Sinkronisasi</span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[100px]" data-datatable-column="is_csv">
|
||||
<span class="sort"> <span class="sort-label">Status CSV</span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="csv_at">
|
||||
<span class="sort"> <span class="sort-label">Waktu Pembuatan CSV</span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[100px]" data-datatable-column="is_ftp">
|
||||
<span class="sort"> <span class="sort-label">Status FTP</span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="ftp_at">
|
||||
<span class="sort"> <span class="sort-label">Waktu Upload FTP</span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[100px]" data-datatable-column="total_records">
|
||||
<span class="sort"> <span class="sort-label">Total Rekaman</span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="file_name">
|
||||
<span class="sort"> <span class="sort-label">Nama File</span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[100px]" data-datatable-column="actions">
|
||||
<span>Aksi</span>
|
||||
</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>
|
||||
|
||||
<!-- Modal for detail view -->
|
||||
<div class="modal modal-open:!flex" data-modal="true" id="detail-modal">
|
||||
<div class="modal-content pt-7.5 w-full container-fixed px-5 overflow-hidden">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">Detail Log Sinkronisasi</h2>
|
||||
<button class="btn btn-sm btn-icon btn-active-color-danger" data-modal-dismiss="true">
|
||||
<i class="ki-outline ki-cross fs-1"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-5">
|
||||
<h3 class="font-bold mb-2">Informasi Umum</h3>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div>Periode:</div>
|
||||
<div id="detail-periode"></div>
|
||||
<div>Total Records:</div>
|
||||
<div id="detail-total-records"></div>
|
||||
<div>Sukses Records:</div>
|
||||
<div id="detail-success-records"></div>
|
||||
<div>Gagal Records:</div>
|
||||
<div id="detail-failed-records"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-5">
|
||||
<h3 class="font-bold mb-2">Status Sinkronisasi</h3>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div>Status:</div>
|
||||
<div id="detail-sync-status"></div>
|
||||
<div>Waktu:</div>
|
||||
<div id="detail-sync-at"></div>
|
||||
<div>Catatan:</div>
|
||||
<div id="detail-sync-notes"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-5">
|
||||
<h3 class="font-bold mb-2">Status CSV</h3>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div>Status:</div>
|
||||
<div id="detail-csv-status"></div>
|
||||
<div>Waktu:</div>
|
||||
<div id="detail-csv-at"></div>
|
||||
<div>Nama File:</div>
|
||||
<div id="detail-file-name"></div>
|
||||
<div>Catatan:</div>
|
||||
<div id="detail-csv-notes"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-5">
|
||||
<h3 class="font-bold mb-2">Status FTP</h3>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div>Status:</div>
|
||||
<div id="detail-ftp-status"></div>
|
||||
<div>Waktu:</div>
|
||||
<div id="detail-ftp-at"></div>
|
||||
<div>Tujuan:</div>
|
||||
<div id="detail-ftp-destination"></div>
|
||||
<div>Catatan:</div>
|
||||
<div id="detail-ftp-notes"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script type="module">
|
||||
const element = document.querySelector('#sync-logs-table');
|
||||
const searchInput = document.getElementById('search');
|
||||
const filterSync = document.getElementById('filter-sync');
|
||||
const filterCsv = document.getElementById('filter-csv');
|
||||
const filterFtp = document.getElementById('filter-ftp');
|
||||
const detailModal = document.getElementById('detail-modal');
|
||||
console.log(detailModal);
|
||||
|
||||
const apiUrl = element.getAttribute('data-api-url');
|
||||
const dataTableOptions = {
|
||||
apiEndpoint: apiUrl,
|
||||
pageSize: 10,
|
||||
columns: {
|
||||
periode: {
|
||||
title: 'Periode',
|
||||
},
|
||||
is_sync: {
|
||||
title: 'Status Sinkronisasi',
|
||||
render: (item, data) => {
|
||||
return data.is_sync
|
||||
? '<span class="badge badge-success">Sudah Sinkronisasi</span>'
|
||||
: '<span class="badge badge-warning">Belum Sinkronisasi</span>';
|
||||
},
|
||||
},
|
||||
sync_at: {
|
||||
title: 'Waktu Sinkronisasi',
|
||||
render: (item, data) => {
|
||||
return data.sync_at ? new Date(data.sync_at).toLocaleString('id-ID') : '-';
|
||||
},
|
||||
},
|
||||
is_csv: {
|
||||
title: 'Status CSV',
|
||||
render: (item, data) => {
|
||||
return data.is_csv
|
||||
? '<span class="badge badge-success">CSV Dibuat</span>'
|
||||
: '<span class="badge badge-warning">Belum Dibuat</span>';
|
||||
},
|
||||
},
|
||||
csv_at: {
|
||||
title: 'Waktu Pembuatan CSV',
|
||||
render: (item, data) => {
|
||||
return data.csv_at ? new Date(data.csv_at).toLocaleString('id-ID') : '-';
|
||||
},
|
||||
},
|
||||
is_ftp: {
|
||||
title: 'Status FTP',
|
||||
render: (item, data) => {
|
||||
return data.is_ftp
|
||||
? '<span class="badge badge-success">Uploaded ke FTP</span>'
|
||||
: '<span class="badge badge-warning">Belum Upload</span>';
|
||||
},
|
||||
},
|
||||
ftp_at: {
|
||||
title: 'Waktu Upload FTP',
|
||||
render: (item, data) => {
|
||||
return data.ftp_at ? new Date(data.ftp_at).toLocaleString('id-ID') : '-';
|
||||
},
|
||||
},
|
||||
total_records: {
|
||||
title: 'Total Rekaman',
|
||||
},
|
||||
file_name: {
|
||||
title: 'Nama File',
|
||||
render: (item, data) => {
|
||||
return data.file_name || '-';
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
title: 'Aksi',
|
||||
render: (item, data) => {
|
||||
let actions = `<div class="flex gap-2">`;
|
||||
|
||||
// Detail button
|
||||
actions += `<button class="btn btn-sm btn-icon btn-light btn-detail" data-id="${data.id}">
|
||||
<i class="ki-outline ki-eye fs-3"></i>
|
||||
</button>`;
|
||||
actions += `</div>`;
|
||||
return actions;
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
let dataTable = new KTDataTable(element, dataTableOptions);
|
||||
|
||||
// Custom search functionality
|
||||
searchInput.addEventListener('change', function () {
|
||||
const searchValue = this.value.trim();
|
||||
dataTable.goPage(1);
|
||||
dataTable.search(searchValue, true);
|
||||
});
|
||||
|
||||
// Filter functionality
|
||||
const applyFilters = () => {
|
||||
const syncValue = filterSync.value;
|
||||
const csvValue = filterCsv.value;
|
||||
const ftpValue = filterFtp.value;
|
||||
|
||||
const params = {};
|
||||
if (syncValue !== '') params.is_sync = syncValue;
|
||||
if (csvValue !== '') params.is_csv = csvValue;
|
||||
if (ftpValue !== '') params.is_ftp = ftpValue;
|
||||
|
||||
dataTable.goPage(1);
|
||||
dataTable.setRequestParams(params);
|
||||
dataTable.reload();
|
||||
};
|
||||
|
||||
filterSync.addEventListener('change', applyFilters);
|
||||
filterCsv.addEventListener('change', applyFilters);
|
||||
filterFtp.addEventListener('change', applyFilters);
|
||||
|
||||
// Detail modal functionality
|
||||
document.addEventListener('click', function(e) {
|
||||
if (e.target.closest('.btn-detail')) {
|
||||
const id = e.target.closest('.btn-detail').getAttribute('data-id');
|
||||
|
||||
// Fetch log details by ID
|
||||
fetch(`{{ url('sync-logs') }}/${id}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
// Populate modal with data
|
||||
document.getElementById('detail-periode').textContent = data.periode;
|
||||
document.getElementById('detail-total-records').textContent = data.total_records;
|
||||
document.getElementById('detail-success-records').textContent = data.success_records;
|
||||
document.getElementById('detail-failed-records').textContent = data.failed_records;
|
||||
|
||||
document.getElementById('detail-sync-status').innerHTML = data.is_sync
|
||||
? '<span class="badge badge-success">Sudah Sinkronisasi</span>'
|
||||
: '<span class="badge badge-warning">Belum Sinkronisasi</span>';
|
||||
document.getElementById('detail-sync-at').textContent = data.sync_at
|
||||
? new Date(data.sync_at).toLocaleString('id-ID')
|
||||
: '-';
|
||||
document.getElementById('detail-sync-notes').textContent = data.sync_notes || '-';
|
||||
|
||||
document.getElementById('detail-csv-status').innerHTML = data.is_csv
|
||||
? '<span class="badge badge-success">CSV Dibuat</span>'
|
||||
: '<span class="badge badge-warning">Belum Dibuat</span>';
|
||||
document.getElementById('detail-csv-at').textContent = data.csv_at
|
||||
? new Date(data.csv_at).toLocaleString('id-ID')
|
||||
: '-';
|
||||
document.getElementById('detail-file-name').textContent = data.file_name || '-';
|
||||
document.getElementById('detail-csv-notes').textContent = data.csv_notes || '-';
|
||||
|
||||
document.getElementById('detail-ftp-status').innerHTML = data.is_ftp
|
||||
? '<span class="badge badge-success">Uploaded ke FTP</span>'
|
||||
: '<span class="badge badge-warning">Belum Upload</span>';
|
||||
document.getElementById('detail-ftp-at').textContent = data.ftp_at
|
||||
? new Date(data.ftp_at).toLocaleString('id-ID')
|
||||
: '-';
|
||||
document.getElementById('detail-ftp-destination').textContent = data.ftp_destination || '-';
|
||||
document.getElementById('detail-ftp-notes').textContent = data.ftp_notes || '-';
|
||||
|
||||
// Show modal
|
||||
|
||||
const modalEl = KTDom.getElement('#detail-modal');
|
||||
const modal = KTModal.getInstance(modalEl);
|
||||
modal.show();
|
||||
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching log details:', error);
|
||||
alert('Gagal mengambil detail log');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
window.dataTable = dataTable;
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user