feat: add CSV import for ibadah and miskin (admin-only, round-trip format)

This commit is contained in:
GuavaPopper
2026-06-03 21:00:28 +07:00
parent 6d157a17c9
commit 2d4533683d
3 changed files with 174 additions and 0 deletions
+69
View File
@@ -103,6 +103,11 @@
<i class="fa-solid fa-file-pdf text-error"></i> Ekspor PDF
</a>
@endif
@if(auth()->user()->hasRole('administrator'))
<button onclick="document.getElementById('modal_import').showModal()" class="btn btn-md btn-outline border-base-300 gap-2">
<i class="fa-solid fa-file-import text-info"></i> Import CSV
</button>
@endif
<a href="{{ url('/map') }}" class="btn btn-md btn-primary shadow-lg gap-2">
<i class="fa-solid fa-plus"></i> Tambah Data
</a>
@@ -317,6 +322,33 @@
</div>
</dialog>
<!-- Modal: Import CSV -->
<dialog id="modal_import" class="modal">
<div class="modal-box w-11/12 max-w-md">
<h3 class="font-bold text-lg mb-4"><i class="fa-solid fa-file-import mr-2 text-info"></i>Import Data dari CSV</h3>
<div class="form-control mb-3">
<label class="label"><span class="label-text font-bold">Jenis Data</span></label>
<select id="import_type" class="select select-bordered w-full">
<option value="miskin">Keluarga Miskin</option>
<option value="ibadah">Rumah Ibadah</option>
</select>
</div>
<div class="form-control mb-3">
<label class="label"><span class="label-text font-bold">File CSV</span></label>
<input id="import_file" type="file" accept=".csv,text/csv" class="file-input file-input-bordered w-full">
</div>
<div class="text-xs text-base-content/60 bg-base-200 p-3 rounded">
<strong>Format kolom (sama dengan hasil Ekspor CSV):</strong><br>
<span id="import_format_hint"></span>
</div>
<div class="modal-action">
<button onclick="document.getElementById('modal_import').close()" class="btn btn-ghost">Batal</button>
<button onclick="submitImport()" class="btn btn-info text-white"><i class="fa-solid fa-upload mr-1"></i>Import</button>
</div>
</div>
<form method="dialog" class="modal-backdrop"><button>close</button></form>
</dialog>
<!-- Toast Container -->
<div class="toast toast-end toast-bottom z-[9999]" id="toastBox"></div>
@@ -555,6 +587,43 @@
}
}
// ── CSV IMPORT ──────────────────────────────────────────────
const importHints = {
miskin: 'ID Rumah, Nama KK, Alamat, KK, Jiwa, Pekerjaan, Pendapatan, Kondisi, Lat, Lon',
ibadah: 'ID (diabaikan), Nama, Jenis, Alamat, Radius, Jemaah, Pengurus, Telepon, Lat, Lon',
};
document.getElementById('import_type')?.addEventListener('change', e => {
document.getElementById('import_format_hint').textContent = importHints[e.target.value];
});
document.addEventListener('DOMContentLoaded', () => {
const h = document.getElementById('import_format_hint');
if (h) h.textContent = importHints.miskin;
});
async function submitImport() {
const type = document.getElementById('import_type').value;
const fileInput = document.getElementById('import_file');
if (!fileInput.files.length) { showToast('Pilih file CSV dulu', 'error'); return; }
const fd = new FormData();
fd.append('file', fileInput.files[0]);
const res = await fetch(`{{ url('/api/admin/import') }}/${type}`, {
method: 'POST',
headers: { 'X-CSRF-TOKEN': csrfToken },
body: fd,
});
const json = await res.json();
if (json.success) {
document.getElementById('modal_import').close();
fileInput.value = '';
showToast(`Import selesai: ${json.imported} berhasil, ${json.failed} gagal`, 'success');
loadAllData();
} else {
showToast(json.message || 'Import gagal', 'error');
}
}
// ── BULK DELETE ─────────────────────────────────────────────
function toggleSelect(type, id, checked) {
const set = type === 'ibadah' ? selectedIbadah : selectedMiskin;