e1a0167c78
- Tambahkan tombol download file di modal detail sinkronisasi. - Implementasikan pengecekan dan mekanisme download file di `SyncLogsController`. - Tambahkan route baru untuk mendukung proses download file. - Perbarui tampilan dan logika modal untuk mendukung fitur download. - Pastikan validasi file sebelum proses download dan berikan pesan error jika file tidak ditemukan. Signed-off-by: Daeng Deni Mardaeni <ddeni05@gmail.com>
367 lines
18 KiB
PHP
367 lines
18 KiB
PHP
@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 class="modal-footer">
|
|
<a href="#" id="btn-download-file" class="btn btn-success btn-sm me-3 hidden">
|
|
<i class="ki-outline ki-file-down me-1"></i> Download File
|
|
</a>
|
|
<button type="button" class="btn btn-light" data-modal-dismiss="true">Tutup</button>
|
|
</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');
|
|
const btnDownloadFile = document.getElementById('btn-download-file');
|
|
|
|
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>`;
|
|
|
|
if (data.is_csv && data.file_name) {
|
|
actions += `<a href="{{ url('sync-logs/download') }}/${data.id}" class="btn btn-sm btn-icon btn-success" title="Download File">
|
|
<i class="ki-outline ki-file-down fs-3"></i>
|
|
</a>`;
|
|
}
|
|
|
|
|
|
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 => {
|
|
if (data.is_csv && data.file_name) {
|
|
btnDownloadFile.classList.remove('hidden');
|
|
btnDownloadFile.href = `{{ url('sync-logs/download') }}/${data.id}`;
|
|
} else {
|
|
btnDownloadFile.classList.add('hidden');
|
|
}
|
|
|
|
// 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
|