✨ 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

resources/views/slik/index.blade.php

@@ -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
@@ -57,17 +35,13 @@
             </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>
                                 </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>
@@ -122,7 +102,8 @@
                         </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
+         * Fungsi untuk menampilkan detail data SLIK
-         * @param {number} data - ID data yang akan dihapus
+         * @param {number} id - ID data SLIK yang akan ditampilkan
          */
-        function deleteData(data) {
+        function showDetail(id) {
-            Swal.fire({
+            // Redirect ke halaman detail
-                title: 'Apakah Anda yakin?',
+            window.location.href = `{{ route('slik.show', ':id') }}`.replace(':id', id);
-                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');
-                    });
-                }
-            })
         }
     </script>
 
@@ -247,17 +243,14 @@
                             return checkbox.outerHTML.trim();
                         },
                     },
-                    no: {
-                        title: 'No',
-                    },
                     sandi_bank: {
                         title: 'Sandi Bank',
                     },
                     tahun: {
                         title: 'Tahun',
-                    },
+                        render: (item, data) => {
-                    bulan: {
+                            return data.bulan + '-' + data.tahun;
-                        title: 'Bulan',
+                        }
                     },
                     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>
+                            `;
                         },
                     }
                 },
@@ -335,7 +346,7 @@
                 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');
             });
         });

resources/views/slik/show.blade.php

@@ -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