✨ feat(slik): tambahkan fitur detail SLIK dengan tampilan responsive
Menambahkan fitur detail SLIK yang menampilkan informasi lengkap debitur dengan desain yang responsive dan user-friendly. - Menambahkan kolom "Kolektibilitas" dan "Fasilitas" pada tabel DataTable - Menghapus filter tahun, bulan, dan status yang tidak digunakan - Menambahkan tombol "Detail" untuk setiap baris data - Memperbaiki responsive design dengan CSS khusus untuk mobile - Menambahkan class `min-w-[1200px]` untuk memastikan tabel dapat discroll horizontal - Memperbarui konfigurasi DataTable untuk menampilkan kolom baru - Menambahkan fungsi JavaScript `showDetail()` untuk redirect ke halaman detail - Menghapus modal detail yang tidak digunakan lagi - Memperbaiki styling dengan Tailwind CSS untuk konsistensi - Membuat halaman detail baru dengan layout yang responsive - Menampilkan informasi lengkap debitur dalam format card yang terorganisir - Menggunakan grid layout 2 kolom untuk desktop dan 1 kolom untuk mobile - Menampilkan data dalam kategori: Data Debitur, Data Fasilitas, dan Informasi Tambahan - Menambahkan tombol kembali untuk navigasi mudah - Menggunakan Tailwind CSS untuk styling yang konsisten dengan halaman index - Responsive design yang optimal untuk semua ukuran layar
This commit is contained in:
Daeng Deni Mardaeni
@@ -6,7 +6,8 @@
|
||||
|
||||
@section('content')
|
||||
<div class="grid">
|
||||
<div class="min-w-full border card border-agi-100 card-grid" data-datatable="false" data-datatable-page-size="10" data-datatable-state-save="false" id="slik-table" data-api-url="{{ route('slik.datatables') }}">
|
||||
<div class="min-w-full border card border-agi-100 card-grid" data-datatable="false" data-datatable-page-size="10"
|
||||
data-datatable-state-save="false" id="slik-table" data-api-url="{{ route('slik.datatables') }}">
|
||||
<div class="flex-wrap py-5 card-header bg-agi-50">
|
||||
<h3 class="card-title">
|
||||
Data SLIK
|
||||
@@ -21,29 +22,6 @@
|
||||
<div class="flex flex-wrap gap-2.5">
|
||||
<div class="h-[24px] border border-r-gray-200"></div>
|
||||
|
||||
<!-- Filter Tahun -->
|
||||
<select class="select select-sm" id="year-filter">
|
||||
<option value="">Semua Tahun</option>
|
||||
@for($year = date('Y'); $year >= 2020; $year--)
|
||||
<option value="{{ $year }}">{{ $year }}</option>
|
||||
@endfor
|
||||
</select>
|
||||
|
||||
<!-- Filter Bulan -->
|
||||
<select class="select select-sm" id="month-filter">
|
||||
<option value="">Semua Bulan</option>
|
||||
@for($month = 1; $month <= 12; $month++)
|
||||
<option value="{{ $month }}">{{ DateTime::createFromFormat('!m', $month)->format('F') }}</option>
|
||||
@endfor
|
||||
</select>
|
||||
|
||||
<!-- Filter Status -->
|
||||
<select class="select select-sm" id="status-filter">
|
||||
<option value="">Semua Status</option>
|
||||
<option value="aktif">Aktif</option>
|
||||
<option value="tidak_aktif">Tidak Aktif</option>
|
||||
</select>
|
||||
|
||||
<!-- Import Excel -->
|
||||
<button class="btn btn-sm btn-success" data-modal-toggle="#import-modal">
|
||||
<i class="ki-filled ki-file-up"></i> Import Excel
|
||||
@@ -54,20 +32,16 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="scrollable-x-auto">
|
||||
<table class="table text-sm font-medium text-gray-700 align-middle table-auto table-border" data-datatable-table="true">
|
||||
<table
|
||||
class="table text-sm font-medium text-gray-700 align-middle table-auto table-border min-w-[1200px]"
|
||||
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-[50px]" data-datatable-column="no">
|
||||
<span class="sort">
|
||||
<span class="sort-label">No</span>
|
||||
<span class="sort-icon"></span>
|
||||
</span>
|
||||
<tr>
|
||||
<th class="w-14">
|
||||
<input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox" />
|
||||
</th>
|
||||
<th class="min-w-[100px]" data-datatable-column="sandi_bank">
|
||||
<span class="sort">
|
||||
@@ -81,12 +55,6 @@
|
||||
<span class="sort-icon"></span>
|
||||
</span>
|
||||
</th>
|
||||
<th class="min-w-[80px]" data-datatable-column="bulan">
|
||||
<span class="sort">
|
||||
<span class="sort-label">Bulan</span>
|
||||
<span class="sort-icon"></span>
|
||||
</span>
|
||||
</th>
|
||||
<th class="min-w-[120px]" data-datatable-column="no_rekening">
|
||||
<span class="sort">
|
||||
<span class="sort-label">No Rekening</span>
|
||||
@@ -105,6 +73,18 @@
|
||||
<span class="sort-icon"></span>
|
||||
</span>
|
||||
</th>
|
||||
<th class="min-w-[100px]" data-datatable-column="kolektibilitas">
|
||||
<span class="sort">
|
||||
<span class="sort-label">Kolektibilitas</span>
|
||||
<span class="sort-icon"></span>
|
||||
</span>
|
||||
</th>
|
||||
<th class="min-w-[100px]" data-datatable-column="fasilitas">
|
||||
<span class="sort">
|
||||
<span class="sort-label">Fasilitas</span>
|
||||
<span class="sort-icon"></span>
|
||||
</span>
|
||||
</th>
|
||||
<th class="min-w-[120px]" data-datatable-column="nilai_agunan">
|
||||
<span class="sort">
|
||||
<span class="sort-label">Nilai Agunan</span>
|
||||
@@ -118,11 +98,12 @@
|
||||
</span>
|
||||
</th>
|
||||
<th class="min-w-[50px] text-center" data-datatable-column="actions">Aksi</th>
|
||||
</tr>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<div class="flex-col gap-3 justify-center font-medium text-gray-600 card-footer md:justify-between md:flex-row text-2sm">
|
||||
<div
|
||||
class="flex-col gap-3 justify-center font-medium text-gray-600 card-footer md:justify-between md:flex-row text-2sm">
|
||||
<div class="flex gap-2 items-center">
|
||||
Show
|
||||
<select class="w-16 select select-sm" data-datatable-size="true" name="perpage"> </select> per page
|
||||
@@ -137,6 +118,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Modal Import Excel -->
|
||||
<div class="modal" data-modal="true" id="import-modal">
|
||||
<div class="modal-content max-w-[500px] top-[15%]">
|
||||
@@ -163,7 +146,8 @@
|
||||
<ul class="mt-1 list-disc list-inside">
|
||||
<li>Data akan dimulai dari baris ke-2 (setelah header)</li>
|
||||
<li>Pastikan urutan kolom sesuai dengan template</li>
|
||||
<li>Data akan di-update jika sudah ada berdasarkan kombinasi sandi bank, tahun, bulan, dan no rekening</li>
|
||||
<li>Data akan di-update jika sudah ada berdasarkan kombinasi sandi bank, tahun, bulan,
|
||||
dan no rekening</li>
|
||||
<li>Kolom yang wajib diisi: Sandi Bank, Tahun, Bulan, No Rekening, CIF</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -181,41 +165,53 @@
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
/* Responsive adjustments for table */
|
||||
@media (max-width: 768px) {
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
max-width: 95% !important;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.grid-cols-1.md\:grid-cols-2 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensure table is scrollable on small screens */
|
||||
.scrollable-x-auto {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Prevent text wrapping in table cells */
|
||||
.table th,
|
||||
.table td {
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Allow wrapping for long text in detail modal */
|
||||
.modal-body .text-gray-900 {
|
||||
word-break: break-word;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
/**
|
||||
* Fungsi untuk menghapus data SLIK
|
||||
* @param {number} data - ID data yang akan dihapus
|
||||
* Fungsi untuk menampilkan detail data SLIK
|
||||
* @param {number} id - ID data SLIK yang akan ditampilkan
|
||||
*/
|
||||
function deleteData(data) {
|
||||
Swal.fire({
|
||||
title: 'Apakah Anda yakin?',
|
||||
text: "Data yang dihapus tidak dapat dikembalikan!",
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Ya, hapus!',
|
||||
cancelButtonText: 'Batal'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
||||
}
|
||||
});
|
||||
|
||||
$.ajax(`slik/${data}`, {
|
||||
type: 'DELETE'
|
||||
}).then((response) => {
|
||||
Swal.fire('Terhapus!', 'Data SLIK berhasil dihapus.', 'success').then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
}).catch((error) => {
|
||||
Swal.fire('Error!', error.responseJSON.message, 'error');
|
||||
});
|
||||
}
|
||||
})
|
||||
function showDetail(id) {
|
||||
// Redirect ke halaman detail
|
||||
window.location.href = `{{ route('slik.show', ':id') }}`.replace(':id', id);
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -247,17 +243,14 @@
|
||||
return checkbox.outerHTML.trim();
|
||||
},
|
||||
},
|
||||
no: {
|
||||
title: 'No',
|
||||
},
|
||||
sandi_bank: {
|
||||
title: 'Sandi Bank',
|
||||
},
|
||||
tahun: {
|
||||
title: 'Tahun',
|
||||
},
|
||||
bulan: {
|
||||
title: 'Bulan',
|
||||
render: (item, data) => {
|
||||
return data.bulan + '-' + data.tahun;
|
||||
}
|
||||
},
|
||||
no_rekening: {
|
||||
title: 'No Rekening',
|
||||
@@ -272,6 +265,18 @@
|
||||
return nama.length > 30 ? nama.substring(0, 30) + '...' : nama;
|
||||
},
|
||||
},
|
||||
kolektibilitas: {
|
||||
title: 'Kolektibilitas',
|
||||
render: (item, data) => {
|
||||
return data.kolektibilitas || '-';
|
||||
},
|
||||
},
|
||||
fasilitas: {
|
||||
title: 'Fasilitas',
|
||||
render: (item, data) => {
|
||||
return data.fasilitas || '-';
|
||||
},
|
||||
},
|
||||
nilai_agunan_formatted: {
|
||||
title: 'Nilai Agunan',
|
||||
render: (item, data) => {
|
||||
@@ -287,7 +292,13 @@
|
||||
actions: {
|
||||
title: 'Aksi',
|
||||
render: (item, data) => {
|
||||
return data.actions || '';
|
||||
return `
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-sm btn-light btn-icon" onclick="showDetail(${data.id})" title="Detail">
|
||||
<i class="ki-filled ki-eye"></i>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
},
|
||||
}
|
||||
},
|
||||
@@ -298,7 +309,7 @@
|
||||
dataTable.showSpinner();
|
||||
|
||||
// Fungsi pencarian
|
||||
searchInput.addEventListener('input', function () {
|
||||
searchInput.addEventListener('input', function() {
|
||||
const searchValue = this.value.trim();
|
||||
dataTable.search(searchValue, true);
|
||||
});
|
||||
@@ -335,9 +346,9 @@
|
||||
if (monthFilter.value) params.append('month', monthFilter.value);
|
||||
if (statusFilter.value) params.append('status', statusFilter.value);
|
||||
|
||||
const exportUrl = '{{ route("slik.export") }}?' + params.toString();
|
||||
const exportUrl = '{{ route('slik.export') }}?' + params.toString();
|
||||
window.open(exportUrl, '_blank');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@endpush
|
||||
|
||||
174
resources/views/slik/show.blade.php
Normal file
174
resources/views/slik/show.blade.php
Normal file
@@ -0,0 +1,174 @@
|
||||
@extends('layouts.main')
|
||||
|
||||
@section('breadcrumbs')
|
||||
{{ Breadcrumbs::render('slik') }}
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<div class="grid">
|
||||
<div class="w-full">
|
||||
<!-- Header -->
|
||||
<div class="flex flex-wrap gap-4 justify-between items-center mb-6">
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold text-gray-900">Detail SLIK</h3>
|
||||
<p class="mt-1 text-sm text-gray-600">Informasi lengkap debitur {{ $slik->nama_debitur }}</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a href="{{ route('slik.index') }}" class="btn btn-sm btn-light">
|
||||
<i class="ki-filled ki-arrow-left"></i>
|
||||
Kembali
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Detail -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Informasi Debitur</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<!-- Informasi Debitur -->
|
||||
<div class="space-y-4">
|
||||
<h4 class="mb-3 text-base font-semibold text-gray-800">Data Debitur</h4>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm font-medium text-gray-600">Nama Debitur:</span>
|
||||
<span class="text-sm text-gray-900">{{ $slik->nama_debitur ?? '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm font-medium text-gray-600">No. Rekening:</span>
|
||||
<span class="text-sm text-gray-900">{{ $slik->no_rekening ?? '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm font-medium text-gray-600">CIF:</span>
|
||||
<span class="text-sm text-gray-900">{{ $slik->cif ?? '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm font-medium text-gray-600">NPWP:</span>
|
||||
<span class="text-sm text-gray-900">{{ $slik->npwp ?? '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm font-medium text-gray-600">No. KTP:</span>
|
||||
<span class="text-sm text-gray-900">{{ $slik->no_ktp ?? '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Informasi Fasilitas -->
|
||||
<div class="space-y-4">
|
||||
<h4 class="mb-3 text-base font-semibold text-gray-800">Data Fasilitas</h4>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm font-medium text-gray-600">Fasilitas:</span>
|
||||
<span class="text-sm text-gray-900">{{ $slik->fasilitas ?? '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm font-medium text-gray-600">Kolektibilitas:</span>
|
||||
<span class="text-sm text-gray-900">{{ $slik->kolektibilitas ?? '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm font-medium text-gray-600">Jenis Agunan:</span>
|
||||
<span class="text-sm text-gray-900">{{ $slik->jenis_agunan ?? '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm font-medium text-gray-600">Nilai Agunan:</span>
|
||||
<span class="text-sm text-gray-900">Rp
|
||||
{{ number_format($slik->nilai_agunan ?? 0, 0, ',', '.') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Informasi Tambahan -->
|
||||
<div class="pt-6 mt-8 border-t border-gray-200">
|
||||
<h4 class="mb-4 text-base font-semibold text-gray-800">Informasi Tambahan</h4>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm font-medium text-gray-600">Tanggal Mulai:</span>
|
||||
<span
|
||||
class="text-sm text-gray-900">{{ $slik->tanggal_mulai ? \Carbon\Carbon::parse($slik->tanggal_mulai)->format('d/m/Y') : '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm font-medium text-gray-600">Tanggal Jatuh Tempo:</span>
|
||||
<span
|
||||
class="text-sm text-gray-900">{{ $slik->tanggal_jatuh_tempo ? \Carbon\Carbon::parse($slik->tanggal_jatuh_tempo)->format('d/m/Y') : '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm font-medium text-gray-600">Tanggal Restrukturisasi:</span>
|
||||
<span
|
||||
class="text-sm text-gray-900">{{ $slik->tanggal_restrukturisasi ? \Carbon\Carbon::parse($slik->tanggal_restrukturisasi)->format('d/m/Y') : '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm font-medium text-gray-600">Tanggal Kondisi:</span>
|
||||
<span
|
||||
class="text-sm text-gray-900">{{ $slik->tanggal_kondisi ? \Carbon\Carbon::parse($slik->tanggal_kondisi)->format('d/m/Y') : '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm font-medium text-gray-600">Tanggal Lapor:</span>
|
||||
<span
|
||||
class="text-sm text-gray-900">{{ $slik->tanggal_lapor ? \Carbon\Carbon::parse($slik->tanggal_lapor)->format('d/m/Y') : '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm font-medium text-gray-600">Tanggal Selesai:</span>
|
||||
<span
|
||||
class="text-sm text-gray-900">{{ $slik->tanggal_selesai ? \Carbon\Carbon::parse($slik->tanggal_selesai)->format('d/m/Y') : '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm font-medium text-gray-600">Kode Kantor:</span>
|
||||
<span class="text-sm text-gray-900">{{ $slik->kode_kantor ?? '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm font-medium text-gray-600">Kode Cabang:</span>
|
||||
<span class="text-sm text-gray-900">{{ $slik->kode_cabang ?? '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm font-medium text-gray-600">Status:</span>
|
||||
<span class="text-sm text-gray-900">
|
||||
<span
|
||||
class="badge badge-light-{{ $slik->status == 'aktif' ? 'success' : 'danger' }}">
|
||||
{{ $slik->status ?? 'aktif' }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
// Add any additional JavaScript for detail page
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Initialize any required components
|
||||
KTApp.init();
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user