634 lines
31 KiB
PHP
634 lines
31 KiB
PHP
@extends('layouts.main')
|
|
|
|
@section('breadcrumbs')
|
|
{{ Breadcrumbs::render(request()->route()->getName()) }}
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div class="w-full grid gap-5 lg:gap-7.5">
|
|
<div class="grid gap-5">
|
|
<div class="card-grid min-w-full" data-datatable="false" data-datatable-page-size="5"
|
|
data-datatable-state-save="false" id="data-table" data-api-url="">
|
|
|
|
<form id="dataPembandingForm" method="POST" enctype="multipart/form-data">
|
|
@csrf
|
|
<input type="hidden" name="permohonan_id" value="{{ $permohonan->id }}">
|
|
<input type="hidden" name="type" value="tanah">
|
|
<input type="hidden" name="jenis_jaminan_id" value="{{ request('jenis_jaminan') }}">
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Data Pembanding</h3>
|
|
<div class="flex items-center gap-2">
|
|
<a href="{{ route('surveyor.show', ['id' => request('pembanding')]) }}"
|
|
class="btn btn-xs btn-info">
|
|
<i class="ki-filled ki-exit-left"></i> Kembali
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-header py-5 flex-wrap flex justify-end">
|
|
<button type="button" id="addColumnBtn" class="btn btn-primary btn-sm">
|
|
<i class="ki-filled ki-plus"></i> Tambah Pembanding
|
|
</button>
|
|
<button type="button" id="removeColumnBtn" class="btn btn-danger btn-sm ml-2"
|
|
style="display: none;">
|
|
<i class="ki-filled ki-minus"></i> Hapus Pembanding
|
|
</button>
|
|
</div>
|
|
|
|
{{-- @php
|
|
print_r($inspectionData);
|
|
@endphp --}}
|
|
|
|
<div class="card-body">
|
|
<div class="scrollable-x-auto">
|
|
<table id="dataTable"
|
|
class="table table-auto table-border align-middle text-gray-700 font-medium text-sm">
|
|
<thead class="bg-gray-50 sticky top-0">
|
|
<tr>
|
|
<th class="px-4 py-3 min-w-[200px]">Parameter</th>
|
|
<th class="px-4 py-3 min-w-[250px]">Objek Penilaian</th>
|
|
<th class="px-4 py-3 min-w-[250px]">Data Pembanding 1</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Informasi Dasar -->
|
|
<tr class="bg-gray-100">
|
|
<td colspan="3" class="px-4 py-2 font-semibold">Informasi Dasar</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-2">Foto</td>
|
|
<td class="px-4 py-2">
|
|
<div class="flex flex-col gap-2">
|
|
<img id="uploadedImage1"
|
|
src="{{ isset($fotoForm['object_jaminan'][0]['foto_objek']) ? asset('storage/' . $fotoForm['object_jaminan'][0]['foto_objek']) : '' }}"
|
|
class="max-w-[200px] {{ isset($fotoForm['object_jaminan'][0]['foto_objek']) ? '' : 'hidden' }}"
|
|
alt="Uploaded Image">
|
|
<input type="file"
|
|
name="foto_objek"
|
|
class="file-input"
|
|
accept="image/*"
|
|
onchange="previewImage(this, 'uploadedImage1')">
|
|
</div>
|
|
</td>
|
|
|
|
<td class="px-4 py-2">
|
|
<div class="flex flex-col gap-2">
|
|
<img id="uploadedImage2" class="max-w-[200px] hidden"
|
|
alt="Pembanding Image">
|
|
<input type="file" name="foto_objek_pembanding[]" class="file-input"
|
|
accept="image/*" onchange="previewImage(this, 'uploadedImage2')">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
|
|
<!-- Data Properti -->
|
|
<tr class="bg-gray-100">
|
|
<td colspan="3" class="px-4 py-2 font-semibold">Data Properti</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-2">Jenis Aset</td>
|
|
<td class="px-4 py-2">
|
|
<select name="jenis_aset" class="select">
|
|
<option value="">Pilih Jenis Aset</option>
|
|
@foreach ($data['jenisJaminan'] as $item)
|
|
<option value="{{ $item->name }}" {{ ($inspectionData['asset']['jenis_asset']['sesuai'] ?? '') == $item->name ? 'selected' : '' }}>{{ $item->name }}</option>
|
|
@endforeach
|
|
|
|
</select>
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<select name="jenis_aset_pembanding[]" class="select">
|
|
<option value="">Pilih Jenis Aset</option>
|
|
@foreach ($data['jenisJaminan'] as $item)
|
|
<option value="{{ $item->name }}" {{ ($inspectionData['jenis_aset'] ?? '') == $item->name ? 'selected' : '' }}>{{ $item->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-2">Luas Tanah (m²)</td>
|
|
<td class="px-4 py-2">
|
|
<input type="text" name="luas_tanah" class="input number-format"
|
|
value="{{ $inspectionData['tanah']['luas_tanah']['tidak sesuai'] ?? ($inspectionData['tanah']['luas_tanah']['sesuai'] ?? '') }}">
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<input type="text" name="luas_tanah_pembanding[]"
|
|
class="input number-format">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-2">Luas Bangunan (m²)</td>
|
|
<td class="px-4 py-2">
|
|
<input type="text" name="luas_tanah_bagunan" class="input number-format"
|
|
value="{{ $inspectionData['bangunan']['luas_tanah_bagunan']['tidak sesuai'] ?? ($inspectionData['bangunan']['luas_tanah_bagunan']['sesuai'] ?? '') }}">
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<input type="text" name="luas_bangunan_pembanding[]"
|
|
class="input number-format">
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Informasi Harga -->
|
|
<tr class="bg-gray-100">
|
|
<td colspan="3" class="px-4 py-2 font-semibold">Informasi</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="px-4 py-2">Status Narasumber</td>
|
|
<td class="px-4 py-2">
|
|
<input type="text" name="nama_nara_sumber" class="input"
|
|
value="{{ $inspectionData['nama_nara_sumber'] ?? '' }}">
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<input type="text" name="status_nara_sumber_pembanding[]"
|
|
class="input">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-2">Nama Narasumber</td>
|
|
<td class="px-4 py-2">
|
|
<input type="text" name="nama_nara_sumber" class="input"
|
|
value="{{ $inspectionData['nama_nara_sumber'] ?? '' }}">
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<input type="text" name="nama_nara_sumber_pembanding[]"
|
|
class="input">
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
<!-- Lokasi -->
|
|
<tr class="bg-gray-100">
|
|
<td colspan="3" class="px-4 py-2 font-semibold">Lokasi</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-2">Koordinat</td>
|
|
<td class="px-4 py-2">
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<input type="text" name="kordinat_lat" class="input"
|
|
placeholder="Latitude"
|
|
value="{{ $inspectionData['asset']['kordinat_lat'] ?? '' }}">
|
|
<input type="text" name="kordinat_lng" class="input"
|
|
placeholder="Longitude"
|
|
value="{{ $inspectionData['asset']['kordinat_lng'] ?? '' }}">
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<input type="text" name="kordinat_lat_pembanding[]" class="input"
|
|
placeholder="Latitude">
|
|
<input type="text" name="kordinat_lng_pembanding[]" class="input"
|
|
placeholder="Longitude">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-2">Alamat</td>
|
|
<td class="px-4 py-2">
|
|
<textarea name="alamat" class="input" rows="2">{{ $inspectionData['alamat'] ?? '' }}</textarea>
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<textarea name="alamat_pembanding[]" class="input" rows="2"></textarea>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-2">Desa/Kelurahan</td>
|
|
<td class="px-4 py-2">
|
|
<input type="text" name="desa" class="input"
|
|
value="{{ $inspectionData['desa'] ?? '' }}">
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<input type="text" name="desa_pembanding[]" class="input">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-2">Kecamatan</td>
|
|
<td class="px-4 py-2">
|
|
<input type="text" name="kecamatan" class="input"
|
|
value="{{ $inspectionData['kecamatan'] ?? '' }}">
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<input type="text" name="kecamatan_pembanding[]" class="input">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-2">Kabupaten/Kota</td>
|
|
<td class="px-4 py-2">
|
|
<input type="text" name="kabupaten" class="input"
|
|
value="{{ $inspectionData['kabupaten'] ?? '' }}">
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<input type="text" name="kabupaten_pembanding[]" class="input">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-2">Provinsi</td>
|
|
<td class="px-4 py-2">
|
|
<input type="text" name="provinsi" class="input"
|
|
value="{{ $inspectionData['provinsi'] ?? '' }}">
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<input type="text" name="provinsi_pembanding[]" class="input">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-2">Harga (Rp)</td>
|
|
<td class="px-4 py-2">
|
|
<input type="text" name="harga" class="input currency-format"
|
|
value="{{ $inspectionData['harga'] ?? '' }}">
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<input type="text" name="harga_pembanding[]"
|
|
class="input currency-format">
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<div class="flex justify-end gap-2">
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="ki-duotone ki-save-2 fs-2"></i>
|
|
Simpan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div </div>
|
|
</div>
|
|
|
|
<!-- Loading Overlay -->
|
|
<div id="loadingOverlay" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
|
|
<div class="bg-white p-4 rounded-lg">
|
|
<div class="loader"></div>
|
|
<p class="mt-2 text-center">Sedang memproses...</p>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
let columnCount = 1;
|
|
|
|
function fillObjekPenilaian(data) {
|
|
if (!data) return;
|
|
|
|
// Helper function untuk mengisi nilai input dengan aman
|
|
function setInputValue(selector, value) {
|
|
const element = document.querySelector(selector);
|
|
if (element) {
|
|
element.value = value || '';
|
|
}
|
|
}
|
|
|
|
// Isi data koordinat
|
|
if (data.asset) {
|
|
setInputValue('input[name="kordinat_lat"]', data.asset.kordinat_lat);
|
|
setInputValue('input[name="kordinat_lng"]', data.asset.kordinat_lng);
|
|
}
|
|
|
|
// Isi data tanah
|
|
if (data.tanah) {
|
|
const luasTanah = data.tanah.luas_tanah?.sesuai ||
|
|
data.tanah.luas_tanah?.['tidak sesuai'] || '';
|
|
setInputValue('input[name="luas_tanah"]', luasTanah);
|
|
}
|
|
|
|
// Isi data bangunan
|
|
if (data.bangunan) {
|
|
const luasBangunan = data.bangunan.luas_tanah_bagunan?.sesuai ||
|
|
data.bangunan.luas_tanah_bagunan?.['tidak sesuai'] || '';
|
|
setInputValue('input[name="luas_tanah_bagunan"]', luasBangunan);
|
|
}
|
|
|
|
console.log("tee", data.asset.alamat.sesuai.nama_jalan);
|
|
|
|
// Isi data umum
|
|
setInputValue('input[name="alamat"]', data.asset.alamat.sesuai.nama_jalan);
|
|
setInputValue('input[name="desa"]', data.desa);
|
|
setInputValue('input[name="kecamatan"]', data.kecamatan);
|
|
setInputValue('input[name="kabupaten"]', data.kabupaten);
|
|
setInputValue('input[name="provinsi"]', data.provinsi);
|
|
setInputValue('input[name="nama_nara_sumber"]', data.nama_nara_sumber);
|
|
setInputValue('input[name="harga"]', data.harga);
|
|
|
|
// Set jenis aset dengan pengecekan
|
|
const jenisAsetSelect = document.querySelector('select[name="jenis_aset"]');
|
|
if (jenisAsetSelect && data.jenis_aset) {
|
|
jenisAsetSelect.value = data.jenis_aset;
|
|
}
|
|
}
|
|
|
|
function fillPembandingData(data, index) {
|
|
if (!data) return;
|
|
|
|
// Helper function untuk mengisi nilai input array dengan aman
|
|
function setArrayInputValue(name, value, index) {
|
|
const element = document.getElementsByName(name)[index];
|
|
if (element) {
|
|
element.value = value || '';
|
|
}
|
|
}
|
|
|
|
// Isi data pembanding
|
|
const inputs = {
|
|
'jenis_aset_pembanding[]': data.jenis_aset,
|
|
'luas_tanah_pembanding[]': data.luas_tanah,
|
|
'luas_bangunan_pembanding[]': data.luas_bangunan,
|
|
'status_nara_sumber_pembanding[]': data.status_nara_sumber,
|
|
'nama_nara_sumber_pembanding[]': data.nama_nara_sumber,
|
|
'kordinat_lat_pembanding[]': data.kordinat_lat,
|
|
'kordinat_lng_pembanding[]': data.kordinat_lng,
|
|
'alamat_pembanding[]': data.alamat,
|
|
'desa_pembanding[]': data.desa,
|
|
'kecamatan_pembanding[]': data.kecamatan,
|
|
'kabupaten_pembanding[]': data.kabupaten,
|
|
'provinsi_pembanding[]': data.provinsi,
|
|
'harga_pembanding[]': data.harga
|
|
};
|
|
|
|
// Isi semua input fields
|
|
Object.entries(inputs).forEach(([name, value]) => {
|
|
setArrayInputValue(name, value, index);
|
|
});
|
|
|
|
// Handle foto pembanding jika ada
|
|
if (data.foto_objek) {
|
|
const imageId = `uploadedImage${index + 2}`;
|
|
const preview = document.getElementById(imageId);
|
|
if (preview) {
|
|
preview.src = `/storage/pembanding/${data.foto_objek}`;
|
|
preview.classList.remove('hidden');
|
|
}
|
|
}
|
|
}
|
|
|
|
// Event listener dengan pengecekan data
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
try {
|
|
const inspectionData = {!! isset($inspectionData) ? json_encode($inspectionData) : 'null' !!};
|
|
const comparisons = {!! isset($comparisons) ? json_encode($comparisons) : '' !!};
|
|
|
|
console.log('Inspection Data:', inspectionData); // Debug
|
|
console.log('Comparisons:', comparisons); // Debug
|
|
|
|
if (inspectionData) {
|
|
fillObjekPenilaian(inspectionData);
|
|
}
|
|
|
|
if (comparisons) {
|
|
console.log("comparisons", comparisons);
|
|
|
|
comparisons.data_pembanding.forEach((comparison, index) => {
|
|
if (index > 0) { // Skip kolom pertama karena sudah ada di template
|
|
addColumn();
|
|
}
|
|
fillPembandingData(comparison, index);
|
|
});
|
|
}
|
|
|
|
updateRemoveButtonVisibility();
|
|
initializeEventListeners();
|
|
} catch (error) {
|
|
console.error('Error initializing form:', error);
|
|
}
|
|
});
|
|
|
|
|
|
function addColumn() {
|
|
columnCount++;
|
|
const table = document.getElementById('dataTable');
|
|
const headerRow = table.querySelector('thead tr');
|
|
const bodyRows = table.querySelectorAll('tbody tr');
|
|
|
|
// Add header
|
|
const newHeader = document.createElement('th');
|
|
newHeader.className = 'px-4 py-3 min-w-[250px]';
|
|
newHeader.textContent = `Data Pembanding ${columnCount}`;
|
|
headerRow.appendChild(newHeader);
|
|
|
|
// Add cells to each row
|
|
bodyRows.forEach(row => {
|
|
const newCell = document.createElement('td');
|
|
newCell.className = 'px-4 py-2';
|
|
|
|
// Clone the last input cell
|
|
const lastInputCell = row.querySelector('td:last-child');
|
|
if (lastInputCell) {
|
|
const clonedContent = lastInputCell.innerHTML;
|
|
newCell.innerHTML = clonedContent;
|
|
|
|
// Update IDs and names for the new cell
|
|
const inputs = newCell.querySelectorAll('input, select, textarea');
|
|
inputs.forEach(input => {
|
|
if (input.type === 'file') {
|
|
const newImageId = `uploadedImage${columnCount + 1}`;
|
|
const preview = newCell.querySelector('img');
|
|
if (preview) {
|
|
preview.id = newImageId;
|
|
preview.src = '';
|
|
preview.classList.add('hidden');
|
|
input.onchange = function() {
|
|
previewImage(this, newImageId);
|
|
};
|
|
}
|
|
}
|
|
// Clear values
|
|
if (input.type !== 'file') {
|
|
input.value = '';
|
|
}
|
|
});
|
|
}
|
|
row.appendChild(newCell);
|
|
});
|
|
|
|
updateRemoveButtonVisibility();
|
|
reinitializeEventListeners();
|
|
}
|
|
|
|
function removeColumn() {
|
|
if (columnCount > 1) {
|
|
const table = document.getElementById('dataTable');
|
|
const rows = table.querySelectorAll('tr');
|
|
|
|
rows.forEach(row => {
|
|
row.deleteCell(-1);
|
|
});
|
|
|
|
columnCount--;
|
|
updateRemoveButtonVisibility();
|
|
}
|
|
}
|
|
|
|
function updateRemoveButtonVisibility() {
|
|
const removeBtn = document.getElementById('removeColumnBtn');
|
|
if (removeBtn) {
|
|
removeBtn.style.display = columnCount > 1 ? 'inline-flex' : 'none';
|
|
}
|
|
}
|
|
|
|
function fillComparisonData(comparison, index) {
|
|
Object.entries(comparison).forEach(([key, value]) => {
|
|
if (key === 'foto_objek') {
|
|
const imageId = `uploadedImage${index + 1}`;
|
|
const preview = document.getElementById(imageId);
|
|
if (preview && value) {
|
|
preview.src = `{{ asset('storage/pembanding/') }}/${value}`;
|
|
preview.classList.remove('hidden');
|
|
}
|
|
} else {
|
|
const input = document.querySelector(`[name="${key}_pembanding[]"]:nth-of-type(${index})`);
|
|
if (input) {
|
|
input.value = value;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function previewImage(input, imageId) {
|
|
const preview = document.getElementById(imageId);
|
|
if (input.files && input.files[0]) {
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
preview.src = e.target.result;
|
|
preview.classList.remove('hidden');
|
|
}
|
|
reader.readAsDataURL(input.files[0]);
|
|
}
|
|
}
|
|
|
|
function formatCurrency(input) {
|
|
let value = input.value.replace(/[^\d]/g, '');
|
|
value = new Intl.NumberFormat('id-ID').format(value);
|
|
input.value = value;
|
|
}
|
|
|
|
function formatNumber(input) {
|
|
let value = input.value.replace(/[^\d.]/g, '');
|
|
input.value = value;
|
|
}
|
|
|
|
function initializeEventListeners() {
|
|
// Button event listeners
|
|
document.getElementById('addColumnBtn').addEventListener('click', addColumn);
|
|
document.getElementById('removeColumnBtn').addEventListener('click', removeColumn);
|
|
|
|
// Form submission
|
|
document.getElementById('dataPembandingForm').addEventListener('submit', handleSubmit);
|
|
|
|
reinitializeEventListeners();
|
|
}
|
|
|
|
function reinitializeEventListeners() {
|
|
// Currency format
|
|
document.querySelectorAll('.currency-format').forEach(input => {
|
|
input.addEventListener('input', function() {
|
|
formatCurrency(this);
|
|
});
|
|
});
|
|
|
|
// Number format
|
|
document.querySelectorAll('.number-format').forEach(input => {
|
|
input.addEventListener('input', function() {
|
|
formatNumber(this);
|
|
});
|
|
});
|
|
}
|
|
|
|
function handleSubmit(e) {
|
|
e.preventDefault();
|
|
|
|
const loadingOverlay = document.getElementById('loadingOverlay');
|
|
loadingOverlay.classList.remove('hidden');
|
|
loadingOverlay.classList.add('flex');
|
|
|
|
const formData = new FormData(e.target);
|
|
|
|
$.ajax({
|
|
url: '{{ route('surveyor.storeDataPembanding') }}',
|
|
type: 'POST',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
success: function(result) {
|
|
if (result.success) {
|
|
Swal.fire({
|
|
title: 'Berhasil!',
|
|
text: result.message,
|
|
icon: 'success',
|
|
confirmButtonText: 'OK'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
window.location.href =
|
|
'{{ route('surveyor.show', ['id' => $permohonan->id]) }}';
|
|
}
|
|
});
|
|
} else {
|
|
Swal.fire({
|
|
title: 'Error!',
|
|
text: result.message || 'Terjadi kesalahan',
|
|
icon: 'error',
|
|
confirmButtonText: 'OK'
|
|
});
|
|
}
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error('Error:', error);
|
|
Swal.fire({
|
|
title: 'Error!',
|
|
text: 'Terjadi kesalahan pada server',
|
|
icon: 'error',
|
|
confirmButtonText: 'OK'
|
|
});
|
|
},
|
|
complete: function() {
|
|
loadingOverlay.classList.add('hidden');
|
|
loadingOverlay.classList.remove('flex');
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.loader {
|
|
border: 4px solid #f3f3f3;
|
|
border-radius: 50%;
|
|
border-top: 4px solid #3498db;
|
|
width: 40px;
|
|
height: 40px;
|
|
animation: spin 1s linear infinite;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.scrollable-x-auto {
|
|
overflow-x: auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.table {
|
|
min-width: 100%;
|
|
}
|
|
</style>
|
|
@endpush
|