daengdeni/lpj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update tampilan penilai jaminan

Browse Source
This commit is contained in:
majid
2025-05-23 14:58:13 +07:00
parent ec22e5f632
commit 39424b5df5
1 changed files with 229 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

296
resources/views/laporan-penilai-jaminan/index.blade.php
View File

@@ -45,56 +45,51 @@
</style>
@endpush
<div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
<div class="card border border-agi-100 card-grid min-w-full" data-datatable="false" data-datatable-page-size="10"
data-datatable-state-save="false" id="laporan-penilai-jaminan-table"
data-api-url="{{ route('laporan-penilai-jaminan.datatables') }}">
<div class="card-header bg-agi-50 py-5 flex-wrap">
<h3 class="card-title">
Daftar Laporan Penilai Jaminan
</h3>
<div class="flex flex-wrap gap-2 lg:gap-5">
<div class="flex">
<!-- Filter Card -->
<div class="card border border-agi-100">
<div class="card-header bg-agi-50 py-5">
<h3 class="card-title">Filter Laporan</h3>
</div>
<div class="card-body grid gap-4">
<!-- Search field at the top, full width -->
<div class="flex flex-col w-full">
<label class="text-sm font-medium mb-1">Pencarian</label>
<label class="input input-sm">
<i class="ki-filled ki-magnifier"></i>
<input placeholder="Search Laporan Penilaian Jaminan" id="search" type="text" value="">
</label>
</div>
<!-- Other filter fields in grid layout -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="flex flex-col">
<label class="text-base font-medium mb-1">Tanggal Awal</label>
<label class="input">
Start Date
<input placeholder="Tanggal Awal" id="tanggal_awal" type="date">
<input placeholder="Tanggal Awal" id="start_date" type="date">
</label>
</div>
<div class="flex">
<div class="flex flex-col">
<label class="text-base font-medium mb-1">Tanggal Akhir</label>
<label class="input">
End Date
<input placeholder="Tanggal Akhir" id="tanggal_akhir" type="date">
<input placeholder="Tanggal Akhir" id="end_date" type="date">
</label>
</div>
<div class="flex">
<button class="btn btn-primary" id="filter_tanggal">Filter</button>
<div class="flex flex-col">
<label class="text-base font-medium mb-1">Cabang</label>
<select class="select tomselect" id="branch_filter">
<option value="">Semua Cabang</option>
@foreach (\Modules\Basicdata\Models\Branch::where('status', 1)->get() as $branch)
<option value="{{ $branch->id }}">{{ $branch->name }}</option>
@endforeach
</select>
</div>
<div class="flex">
<label class="input "> <i class="ki-filled ki-magnifier"> </i>
<input placeholder="Search Laporan" id="search" type="text" value="">
</label>
</div>
<div class="flex">
<!-- Custom dropdown for status filter -->
<div class="dropdown" data-dropdown="true" data-dropdown-trigger="click">
<button class="dropdowns-toggle btn btn-light inline-flex justify-between w-full items-center">
Pilih Type Laporan
<i class="ki-outline ki-down dropdown-open:hidden">
</i>
<i class="ki-outline ki-up hidden dropdown-open:block">
</i>
</button>
<div
class="dropdowns-content w-full max-w-56 py-2 absolute mt-2 origin-top-right z-50 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5">
<div class="menu menu-default flex flex-col w-full">
<!-- Checkbox untuk All Status -->
<div class="menu-item">
<label class="menu-link flex items-center px-4 py-2 text-sm text-gray-700">
<input id="select-all" type="checkbox"
class="form-checkbox h-4 w-4 text-blue-600">
<span class="ml-2">All Status</span>
</label>
</div>
<!-- Dinamis Status dari Backend -->
<div class="flex flex-col">
<label class="text-base font-medium mb-1">Laporan</label>
<select class="select tomselect" name="laporan[]" id="laporan" multiple>
<option value="">Semua Laporan</option>
@php
$status_laporan = [
'Standar',
@@ -106,28 +101,40 @@
];
@endphp
@foreach ($status_laporan as $item)
<div class="menu-item">
<label class="menu-link flex items-center px-4 py-2 text-sm text-gray-700">
<input type="checkbox"
class="form-checkbox status-checkbox h-4 w-4 text-blue-600"
value="{{ strtolower($item) }}">
<span class="ml-2">{{ $item }}</span>
</label>
</div>
<option value="{{ strtolower($item) }}">{{ $item }}</option>
@endforeach
</select>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap gap-2.5">
<div class="h-[24px] border border-r-gray-200"></div>
<button class="btn btn-light" id="export-button">
Export Excel
<!-- Buttons row at the bottom -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-2">
<button class="btn btn-sm btn-primary" id="filter_tanggal">
<i class="ki-outline ki-filter fs-2 me-1"></i>
Terapkan Filter
</button>
<button class="btn btn-sm btn-light"
id="export-btn">
<i class="ki-outline ki-file-down fs-2 me-1"></i>
Export to Excel
</button>
</div>
</div>
</div>
<div class="card border border-agi-100 card-grid min-w-full" data-datatable="false" data-datatable-page-size="10"
data-datatable-state-save="false" id="laporan-penilai-jaminan-table"
data-api-url="{{ route('laporan-penilai-jaminan.datatables') }}">
<div class="card-header bg-agi-50 py-5 flex-wrap">
<h3 class="card-title">
Daftar Laporan Penilai Jaminan
</h3>
</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"
@@ -135,13 +142,21 @@
<thead>
<tr>
<th class="w-14">
<input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox" />
<input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox" id="check-all"/>
</th>
<th class="min-w-[150px]" data-datatable-column="nomor_registrasi">
<span class="sort"><span class="sort-label">Nomor Registrasi</span>
<span class="sort-icon"></span>
</span>
</th>
<th class="min-w-[150px]" data-datatable-column="tanggal_permohonan">
<span class="sort"> <span class="sort-label"> Tanggal Permohonan </span>
<span class="sort-icon"> </span> </span>
</th>
<th class="min-w-[150px]" data-datatable-column="branch">
<span class="sort"> <span class="sort-label"> Cabang </span>
<span class="sort-icon"> </span> </span>
</th>
<th class="min-w-[150px]" data-datatable-column="user_id">
<span class="sort"><span class="sort-label">User Pemohon</span>
<span class="sort-icon"></span>
@@ -157,6 +172,10 @@
<span class="sort-icon"></span>
</span>
</th>
<th class="min-w-[150px]" data-datatable-column="jenis_agunan">
<span class="sort"> <span class="sort-label"> Jenis Jaminan </span>
<span class="sort-icon"> </span> </span>
</th>
<th class="min-w-[150px]" data-datatable-column="laporan">
<span class="sort"><span class="sort-label">Laporan</span>
@@ -164,6 +183,11 @@
</span>
</th>
<th class="" data-datatable-column="actions">
<span class="sort"><span class="sort-label">Actions</span>
<span class="sort-icon"></span>
</span>
</th>
</tr>
</thead>
</table>
@@ -186,30 +210,41 @@
</div>
<!-- Form tersembunyi untuk export -->
<form id="export-form" action="{{ route('laporan-penilai-jaminan.export') }}" method="GET" class="hidden">
<input type="hidden" name="tanggal_awal" id="export_tanggal_awal">
<input type="hidden" name="tanggal_akhir" id="export_tanggal_akhir">
<form id="export-form"
action="{{ route('laporan-penilai-jaminan.export') }}"
method="GET" class="hidden">
<input type="hidden" name="start_date" id="export_tanggal_awal">
<input type="hidden" name="end_date" id="export_tanggal_akhir">
<input type="hidden" name="status" id="export_status">
<input type="hidden" name="branch_id" id="export_branch_id">
<input type="hidden" name="laporan" id="export_laporan">
<input type="hidden" name="selected_ids" id="export_selected_ids">
<input type="hidden" name="export_type" id="export_type" value="all">
</form>
@endsection
@push('scripts')
<script type="module">
const element = document.querySelector('#laporan-penilai-jaminan-table');
const searchInput = document.getElementById('search');
const tanggalAwalInput = document.getElementById('tanggal_awal');
const tanggalAkhirInput = document.getElementById('tanggal_akhir');
const searchInput = document.getElementById('search');;
const startDateInput = document.getElementById('start_date');
const endDateInput = document.getElementById('end_date');
const branchFilter = document.getElementById('branch_filter');
const laporanFilter = document.getElementById('laporan');
const filterTanggalButton = document.getElementById('filter_tanggal');
const selectAllCheckbox = document.getElementById('select-all');
const exportButton = document.getElementById('export-btn');
const selectAllCheckbox = document.getElementById('check-all');
const statusCheckboxes = document.querySelectorAll('.status-checkbox');
// Export elements
const exportForm = document.getElementById('export-form');
const exportButton = document.getElementById('export-button');
const exportTanggalAwal = document.getElementById('export_tanggal_awal');
const exportTanggalAkhir = document.getElementById('export_tanggal_akhir');
const exportStartDate = document.getElementById('export_tanggal_awal');
const exportEndDate = document.getElementById('export_tanggal_akhir');
const exportBranchId = document.getElementById('export_branch_id');
const exportLaporan = document.getElementById('export_laporan');
const exportStatus = document.getElementById('export_status');
const exportSelectedIds = document.getElementById('export_selected_ids');
const exportType = document.getElementById('export_type');
@@ -241,7 +276,19 @@
nomor_registrasi: {
title: 'Nomor Registrasi',
},
tanggal_permohonan: {
title: 'Tanggal Permohonan',
render: (item, data) => {
return data.tanggal_permohonan ? window.formatTanggalIndonesia(data.tanggal_permohonan) :
'-';
},
},
branch: {
title: 'Cabang',
render: (item, data) => {
return data.branch && data.branch.name ? `${data.branch.name}` : '-';
},
},
user_id: {
title: 'User Pemohon',
render: (item, data) => {
@@ -254,6 +301,7 @@
return data.debiture && data.debiture.name ? `${data.debiture.name}` : '-';
},
},
tujuan_penilaian_id: {
title: 'Tujuan Penilaian',
render: (item, data) => {
@@ -261,6 +309,14 @@
`${data.tujuan_penilaian.name}` : '-';
},
},
jenis_agunan: {
title: 'Jenis Jaminan',
render: (item, data) => {
return data.dokumenjaminan.map((item) => {
return item.jenis_jaminan ? item.jenis_jaminan.name : '-';
}).join(', ');
},
},
laporan: {
title: 'Status',
@@ -292,6 +348,31 @@
return `<span class="badge ${badgeClass}">${statusLaporan}</span>`;
},
},
actions: {
title: 'Action',
render: (item, data) => {
const status = data.status; // Anggap status berada di dalam objek data
const dokumenjaminan = data.dokumenjaminan || [];
return `
<div class="flex flex-nowrap justify-center gap-1">
${
['done'].includes(status) ?
dokumenjaminan.map(dokumen => {
return `
<a class="btn btn-sm btn-primary" href="surveyor/print-out-inspeksi/${data.id}/${dokumen.id}/${dokumen.jenis_jaminan_id}">
<i class="ki-outline ki-printer"></i>Inspeksi
</a>
<a class="btn btn-sm btn-success" onclick="checkLaporan('${data.id}', '${dokumen.id}', '${dokumen.jenis_jaminan_id}', 0)">
<i class="ki-filled ki-printer"></i>Laporan
</a>
`;
}).join('') : ''
}
</div>
`;
}
}
},
@@ -301,8 +382,7 @@
// Search functionality
searchInput.addEventListener('input', function() {
const searchValue = this.value.trim();
dataTable.search(searchValue, true);
applyDateFilter();
});
// Filter by date range
@@ -311,20 +391,31 @@
});
function applyDateFilter() {
const tanggalAwal = tanggalAwalInput.value;
const tanggalAkhir = tanggalAkhirInput.value;
const startDate = startDateInput.value;
const endDate = endDateInput.value;
const branch = branchFilter.value;
const laporan = Array.from(laporanFilter.selectedOptions).map(option => option.value);
let filters = {};
if (searchInput.value) {
filters.search = searchInput.value;
}
if (tanggalAwal) {
filters.tanggal_awal = tanggalAwal
if (startDate) {
filters.start_date = startDate;
}
if (tanggalAkhir) {
filters.tanggal_akhir = tanggalAkhir
if (endDate) {
filters.end_date = endDate;
}
if (branch) {
filters.branch_id = branch;
}
if (laporan.length > 0) {
filters.laporan = laporan;
}
dataTable.search(filters);
@@ -378,11 +469,12 @@
selected_ids: selectedIds,
export_type: 'selected'
});
} else if (tanggalAwalInput.value && tanggalAkhirInput.value || getSelectedStatuses().length > 0) {
// If filters are applied but no rows selected, export filtered data
} else if (startDateInput.value && endDateInput.value || getSelectedStatuses().length > 0) {
exportData({
tanggal_awal: tanggalAwalInput.value,
tanggal_akhir: tanggalAkhirInput.value,
start_date: startDateInput.value,
end_date: endDateInput.value,
branch_id: branchFilter.value,
laporan: Array.from(laporanFilter.selectedOptions).map(option => option.value),
status: getSelectedStatuses(),
export_type: 'filtered'
});
@@ -396,12 +488,13 @@
function exportData(filters = {}) {
// Set filter values in the hidden form
exportTanggalAwal.value = filters.tanggal_awal || '';
exportTanggalAkhir.value = filters.tanggal_akhir || '';
exportStartDate.value = filters.start_date || '';
exportEndDate.value = filters.end_date || '';
exportStatus.value = filters.status ? filters.status.join(',') : '';
exportBranchId.value = filters.branch_id || '';
exportLaporan.value = filters.laporan ? filters.laporan.join(',') : '';
exportSelectedIds.value = filters.selected_ids ? filters.selected_ids.join(',') : '';
exportType.value = filters.export_type || 'all';
// Submit the form
exportForm.submit();
}
@@ -417,4 +510,39 @@
return Array.from(checkboxes).map(checkbox => checkbox.value);
}
</script>
<script>
function checkLaporan(permohonanId, documentId, statusLpj) {
// showLoadingSwal('Tunggu...');
fetch(
`{{ url('/penilai/check-laporan') }}?permohonanId=${permohonanId}&documentId=${documentId}`
)
.then(response => response.json())
.then(data => {
if (data.status) {
window.location.href =
`{{ route('penilai.print-out') }}?permohonanId=${permohonanId}&documentId=${documentId}&statusLpj=${0}&type=${data.status}`;
} else {
// Jika laporan belum ada, tampilkan pesan peringatan
Swal.fire({
title: 'Laporan Belum Ada',
text: data.message,
icon: 'warning',
confirmButtonText: 'OK',
confirmButtonColor: '#3085d6',
});
}
})
.catch(error => {
console.error('Error:', error);
Swal.fire({
title: 'Terjadi Kesalahan',
text: 'Tidak dapat memproses permintaan. Silakan coba lagi nanti.',
icon: 'error',
confirmButtonText: 'OK',
confirmButtonColor: '#d33',
});
});
}
</script>
@endpush