INVENTARIS SEKOLAH DISINI
HASIL DISINI
DATA BASE TANAMAN DISINI
HASIL DISINI
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portal Inventaris SMK Kebon Jeruk - Denah Colorful & Import Excel</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- FontAwesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- SheetJS (XLSX) Library for Excel Import -->
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
<!-- Google Fonts Inter -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
}
}
}
</script>
<style>
body { font-family: 'Inter', sans-serif; }
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
.denah-card {
transition: all 0.2s ease-in-out;
cursor: pointer;
}
.denah-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
filter: brightness(0.96);
}
</style>
</head>
<body class="bg-slate-100 text-slate-800 antialiased min-h-screen flex flex-col">
<header class="bg-slate-900 text-white shadow-md sticky top-0 z-40">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="bg-indigo-600 p-2.5 rounded-xl shadow-inner flex items-center justify-center">
<i class="fa-solid fa-school text-xl text-white"></i>
</div>
<div>
<h1 class="font-bold text-base md:text-lg leading-tight tracking-wide">SI-INVENTARIS SMK KEBON JERUK</h1>
<p class="text-xs text-indigo-300">Sistem Informasi Manajemen Aset & Denah Interaktif Warna-Warni</p>
</div>
</div>
<div class="flex items-center space-x-2.5">
<div class="hidden md:flex items-center bg-slate-800 px-3 py-1.5 rounded-lg border border-slate-700 text-xs text-slate-300">
<i class="fa-solid fa-calendar-days mr-2 text-indigo-400"></i>
<span id="currentDate">Memuat tanggal...</span>
</div>
<!-- Tombol Import Excel -->
<button onclick="openImportModal()" class="bg-emerald-600 hover:bg-emerald-500 text-white px-3.5 py-2 rounded-xl text-xs md:text-sm font-semibold shadow-sm transition flex items-center space-x-2">
<i class="fa-solid fa-file-excel"></i>
<span>Import Excel</span>
</button>
<button onclick="openAddAssetModal()" class="bg-indigo-600 hover:bg-indigo-500 text-white px-3.5 py-2 rounded-xl text-xs md:text-sm font-semibold shadow-sm transition flex items-center space-x-2">
<i class="fa-solid fa-plus"></i>
<span>Tambah</span>
</button>
</div>
</div>
</header>
<main class="flex-1 max-w-[1600px] w-full mx-auto px-3 sm:px-6 py-6 flex flex-col gap-6">
<!-- Top Statistics Cards -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4">
<div class="bg-white p-4 md:p-5 rounded-2xl shadow-xs border border-slate-200/80 flex items-center justify-between">
<div>
<p class="text-[11px] font-bold uppercase tracking-wider text-slate-400">Total Unit Barang</p>
<h3 id="statTotal" class="text-xl md:text-2xl font-extrabold text-slate-800 mt-1">0</h3>
</div>
<div class="w-10 h-10 md:w-12 md:h-12 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center text-lg md:text-xl shadow-xs">
<i class="fa-solid fa-box"></i>
</div>
</div>
<div class="bg-white p-4 md:p-5 rounded-2xl shadow-xs border border-slate-200/80 flex items-center justify-between">
<div>
<p class="text-[11px] font-bold uppercase tracking-wider text-slate-400">Kondisi Baik</p>
<h3 id="statGood" class="text-xl md:text-2xl font-extrabold text-emerald-600 mt-1">0</h3>
</div>
<div class="w-10 h-10 md:w-12 md:h-12 bg-emerald-50 text-emerald-600 rounded-xl flex items-center justify-center text-lg md:text-xl shadow-xs">
<i class="fa-solid fa-circle-check"></i>
</div>
</div>
<div class="bg-white p-4 md:p-5 rounded-2xl shadow-xs border border-slate-200/80 flex items-center justify-between">
<div>
<p class="text-[11px] font-bold uppercase tracking-wider text-slate-400">Rusak Ringan</p>
<h3 id="statRepair" class="text-xl md:text-2xl font-extrabold text-amber-500 mt-1">0</h3>
</div>
<div class="w-10 h-10 md:w-12 md:h-12 bg-amber-50 text-amber-500 rounded-xl flex items-center justify-center text-lg md:text-xl shadow-xs">
<i class="fa-solid fa-triangle-exclamation"></i>
</div>
</div>
<div class="bg-white p-4 md:p-5 rounded-2xl shadow-xs border border-slate-200/80 flex items-center justify-between">
<div>
<p class="text-[11px] font-bold uppercase tracking-wider text-slate-400">Rusak Berat</p>
<h3 id="statHeavy" class="text-xl md:text-2xl font-extrabold text-rose-600 mt-1">0</h3>
</div>
<div class="w-10 h-10 md:w-12 md:h-12 bg-rose-50 text-rose-600 rounded-xl flex items-center justify-center text-lg md:text-xl shadow-xs">
<i class="fa-solid fa-circle-xmark"></i>
</div>
</div>
</div>
<div class="bg-white rounded-3xl shadow-sm border border-slate-200/80 p-4 md:p-8">
<div class="flex flex-col md:flex-row md:items-center justify-between pb-6 mb-6 border-b border-slate-100 gap-4">
<div>
<h2 class="text-lg md:text-xl font-black text-slate-900 tracking-tight flex items-center gap-2.5">
<span class="bg-gradient-to-r from-amber-500 to-indigo-600 text-white px-3 py-1 rounded-xl text-xs font-bold uppercase shadow-sm">Denah Warna-Warni</span>
DENAH SEKOLAH SMK KEBON JERUK
</h2>
<p class="text-xs md:text-sm text-slate-500 mt-1">Setiap kategori ruangan ditandai dengan warna berbeda. Klik kotak ruangan untuk mengelola inventaris aset.</p>
</div>
<div class="flex items-center gap-3">
<div class="relative">
<i class="fa-solid fa-search absolute left-3 top-2.5 text-slate-400 text-xs"></i>
<input type="text" id="mapGlobalSearch" placeholder="Cari ruangan di denah..." oninput="filterDenahRooms(this.value)" class="pl-8 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:outline-none focus:ring-2 focus:ring-indigo-500/20 w-48 md:w-64">
</div>
</div>
</div>
<!-- Color Legend -->
<div class="flex flex-wrap items-center gap-2 md:gap-4 mb-6 p-3 bg-slate-50 rounded-2xl border border-slate-200/60 text-xs font-medium">
<span class="text-slate-500 font-bold"><i class="fa-solid fa-palette mr-1 text-indigo-600"></i> Legenda Warna:</span>
<div class="flex items-center gap-1.5"><span class="w-3.5 h-3.5 rounded-md bg-amber-100 border border-amber-300"></i></span><span class="text-slate-700">Manajemen</span></div>
<div class="flex items-center gap-1.5"><span class="w-3.5 h-3.5 rounded-md bg-sky-100 border border-sky-300"></span><span class="text-slate-700">Ruang Kelas SMK</span></div>
<div class="flex items-center gap-1.5"><span class="w-3.5 h-3.5 rounded-md bg-emerald-100 border border-emerald-300"></span><span class="text-slate-700">Lapangan & Outdoor</span></div>
<div class="flex items-center gap-1.5"><span class="w-3.5 h-3.5 rounded-md bg-purple-100 border border-purple-300"></span><span class="text-slate-700">Bengkel & Lab</span></div>
<div class="flex items-center gap-1.5"><span class="w-3.5 h-3.5 rounded-md bg-rose-100 border border-rose-300"></span><span class="text-slate-700">Area SMP</span></div>
<div class="flex items-center gap-1.5"><span class="w-3.5 h-3.5 rounded-md bg-teal-100 border border-teal-300"></span><span class="text-slate-700">Fasilitas Umum</span></div>
<div class="flex items-center gap-1.5"><span class="w-3.5 h-3.5 rounded-md bg-orange-100 border border-orange-300"></span><span class="text-slate-700">Sanitasi / WC</span></div>
</div>
<!-- Blueprint Container Layout -->
<div class="bg-slate-100/70 p-4 md:p-6 rounded-2xl border-2 border-dashed border-slate-300 overflow-x-auto custom-scrollbar">
<div class="min-w-[1100px] grid grid-cols-12 gap-4">
<!-- KOLOM KIRI -->
<div class="col-span-3 flex flex-col gap-3">
<div onclick="openRoomDetail('gerbang')" id="room-gerbang" class="denah-card bg-teal-50 border-2 border-teal-400 p-3.5 rounded-xl text-center shadow-xs">
<span class="text-xs font-bold text-teal-900 block">Pintu gerbang</span>
<span class="text-[10px] text-teal-700 font-semibold count-badge" data-room="gerbang">0 unit</span>
</div>
<div class="grid grid-cols-2 gap-2">
<div onclick="openRoomDetail('kepsek')" id="room-kepsek" class="denah-card bg-amber-50 border-2 border-amber-400 p-3 rounded-xl text-center shadow-xs col-span-2">
<span class="text-[11px] font-bold text-amber-950 block">KEPALA SEKOLAH</span>
<span class="text-[10px] text-amber-700 font-semibold count-badge" data-room="kepsek">0 unit</span>
</div>
<div onclick="openRoomDetail('kurikulum')" id="room-kurikulum" class="denah-card bg-amber-50/70 border-2 border-amber-300 p-2.5 rounded-xl text-center shadow-xs">
<span class="text-[10px] font-bold text-amber-950 block">kurikulum</span>
<span class="text-[9px] text-amber-700 font-semibold count-badge" data-room="kurikulum">0 unit</span>
</div>
<div onclick="openRoomDetail('wakil_bendahara')" id="room-wakil_bendahara" class="denah-card bg-amber-50/70 border-2 border-amber-300 p-2.5 rounded-xl text-center shadow-xs">
<span class="text-[9px] font-bold text-amber-950 block">Wakil dan bendahara</span>
<span class="text-[9px] text-amber-700 font-semibold count-badge" data-room="wakil_bendahara">0 unit</span>
</div>
<div onclick="openRoomDetail('sarpras')" id="room-sarpras" class="denah-card bg-amber-50/70 border-2 border-amber-300 p-3 rounded-xl text-center shadow-xs">
<span class="text-[10px] font-bold text-amber-950 block">sarpras</span>
<span class="text-[9px] text-amber-700 font-semibold count-badge" data-room="sarpras">0 unit</span>
</div>
<div onclick="openRoomDetail('tu')" id="room-tu" class="denah-card bg-amber-50/70 border-2 border-amber-300 p-3 rounded-xl text-center shadow-xs">
<span class="text-[10px] font-bold text-amber-950 block">T.U</span>
<span class="text-[9px] text-amber-700 font-semibold count-badge" data-room="tu">0 unit</span>
</div>
</div>
<div onclick="openRoomDetail('ruangguru_l2')" id="room-ruangguru_l2" class="denah-card bg-purple-50 border-2 border-purple-400 p-3.5 rounded-xl text-center shadow-xs">
<span class="text-[11px] font-bold text-purple-950 block">Ruang guru dan lab komputer di lantai 2</span>
<span class="text-[10px] text-purple-700 font-semibold count-badge" data-room="ruangguru_l2">0 unit</span>
</div>
<div onclick="openRoomDetail('kelas10av')" id="room-kelas10av" class="denah-card bg-sky-50 border-2 border-sky-400 p-4 rounded-xl text-center shadow-xs">
<span class="text-xs font-bold text-sky-950 block">Kelas 10 av</span>
<span class="text-[10px] text-sky-700 font-semibold count-badge" data-room="kelas10av">0 unit</span>
</div>
<div onclick="openRoomDetail('kelas10tkro')" id="room-kelas10tkro" class="denah-card bg-sky-50 border-2 border-sky-400 p-4 rounded-xl text-center shadow-xs">
<span class="text-xs font-bold text-sky-950 block">Kelas 10 tkro</span>
<span class="text-[10px] text-sky-700 font-semibold count-badge" data-room="kelas10tkro">0 unit</span>
</div>
<div onclick="openRoomDetail('kelas11mplb')" id="room-kelas11mplb" class="denah-card bg-sky-50 border-2 border-sky-400 p-4 rounded-xl text-center shadow-xs">
<span class="text-xs font-bold text-sky-950 block">Kelas 11 mplb</span>
<span class="text-[10px] text-sky-700 font-semibold count-badge" data-room="kelas11mplb">0 unit</span>
</div>
</div>
<!-- KOLOM TENGAH -->
<div class="col-span-6 flex flex-col gap-4">
<div onclick="openRoomDetail('lapangan1')" id="room-lapangan1" class="denah-card bg-emerald-50 border-2 border-emerald-400 p-6 rounded-xl text-center shadow-xs flex flex-col items-center justify-center min-h-[100px]">
<span class="text-sm font-extrabold text-emerald-950 uppercase tracking-wider">Lapangan 1</span>
<span class="text-xs text-emerald-700 font-bold mt-1 count-badge" data-room="lapangan1">0 unit</span>
</div>
<div class="grid grid-cols-2 gap-3">
<div onclick="openRoomDetail('kelas10mplb')" id="room-kelas10mplb_mid" class="denah-card bg-sky-50 border-2 border-sky-400 p-4 rounded-xl text-center shadow-xs">
<span class="text-xs font-bold text-sky-950 block">Kelas 10 MPLB</span>
<span class="text-[10px] text-sky-800 block mt-1 leading-tight">Dan perpustakaan di lantai 2</span>
<span class="text-[10px] text-sky-700 font-semibold mt-2 inline-block count-badge" data-room="kelas10mplb">0 unit</span>
</div>
<div onclick="openRoomDetail('aula')" id="room-aula" class="denah-card bg-indigo-50 border-2 border-indigo-400 p-4 rounded-xl text-center shadow-xs">
<span class="text-xs font-bold text-indigo-950 block">Aula</span>
<span class="text-[10px] text-indigo-800 block mt-1 leading-tight">Dan kelas 10 akl lantai 2</span>
<span class="text-[10px] text-indigo-700 font-semibold mt-2 inline-block count-badge" data-room="aula">0 unit</span>
</div>
</div>
<div onclick="openRoomDetail('lapangan2')" id="room-lapangan2" class="denah-card bg-emerald-50 border-2 border-emerald-400 p-10 rounded-xl text-center shadow-xs flex flex-col items-center justify-center min-h-[160px]">
<span class="text-sm font-extrabold text-emerald-950 uppercase tracking-wider">Lapangan 2</span>
<span class="text-xs text-emerald-700 font-bold mt-1 count-badge" data-room="lapangan2">0 unit</span>
</div>
<div class="grid grid-cols-5 gap-2">
<div onclick="openRoomDetail('kelas11akl')" id="room-kelas11akl" class="denah-card bg-sky-50 border-2 border-sky-300 p-2.5 rounded-xl text-center shadow-xs">
<span class="text-[10px] font-bold text-sky-950 block">Kelas 11 akl</span>
<span class="text-[9px] text-sky-700 block">Dan lantai 2</span>
<span class="text-[9px] text-sky-800 font-semibold mt-1 block count-badge" data-room="kelas11akl">0 unit</span>
</div>
<div onclick="openRoomDetail('kelas11tkro')" id="room-kelas11tkro" class="denah-card bg-sky-50 border-2 border-sky-300 p-2.5 rounded-xl text-center shadow-xs">
<span class="text-[10px] font-bold text-sky-950 block">Kelas 11 tkro dan lantai 2</span>
<span class="text-[9px] text-sky-800 font-semibold mt-1 block count-badge" data-room="kelas11tkro">0 unit</span>
</div>
<div onclick="openRoomDetail('kepakelsmp')" id="room-kepakelsmp" class="denah-card bg-rose-50 border-2 border-rose-300 p-2.5 rounded-xl text-center shadow-xs">
<span class="text-[10px] font-bold text-rose-950 block">Kantor kepala sekolah smp</span>
<span class="text-[9px] text-rose-700 block">Dan lab aid lantai 2</span>
<span class="text-[9px] text-rose-800 font-semibold mt-1 block count-badge" data-room="kepakelsmp">0 unit</span>
</div>
<div onclick="openRoomDetail('kelas11tkro_l2')" id="room-kelas11tkro_l2" class="denah-card bg-sky-50 border-2 border-sky-300 p-2.5 rounded-xl text-center shadow-xs">
<span class="text-[10px] font-bold text-sky-950 block">Kelas 11 tkro dan lantai 2</span>
<span class="text-[9px] text-sky-800 font-semibold mt-1 block count-badge" data-room="kelas11tkro_l2">0 unit</span>
</div>
<div onclick="openRoomDetail('kelas9smp_l2')" id="room-kelas9smp_l2" class="denah-card bg-rose-50 border-2 border-rose-300 p-2.5 rounded-xl text-center shadow-xs">
<span class="text-[10px] font-bold text-rose-950 block">Kelas 9 smp dan kelas 11 av lantai 2</span>
<span class="text-[9px] text-rose-800 font-semibold mt-1 block count-badge" data-room="kelas9smp_l2">0 unit</span>
</div>
</div>
</div>
<!-- KOLOM KANAN -->
<div class="col-span-3 flex flex-col gap-3">
<div onclick="openRoomDetail('kantin')" id="room-kantin" class="denah-card bg-teal-50 border-2 border-teal-300 p-3 rounded-xl text-center shadow-xs">
<span class="text-xs font-bold text-teal-950 block">kantin</span>
<span class="text-[10px] text-teal-700 font-semibold count-badge" data-room="kantin">0 unit</span>
</div>
<div onclick="openRoomDetail('bengkel')" id="room-bengkel" class="denah-card bg-purple-50 border-2 border-purple-400 p-3 rounded-xl text-center shadow-xs">
<span class="text-xs font-bold text-purple-950 block">bengkel</span>
<span class="text-[10px] text-purple-700 font-semibold count-badge" data-room="bengkel">0 unit</span>
</div>
<div onclick="openRoomDetail('toolman')" id="room-toolman" class="denah-card bg-purple-100 border-2 border-purple-400 p-2.5 rounded-xl text-center shadow-xs">
<span class="text-xs font-bold text-purple-950 block">toolman</span>
<span class="text-[10px] text-purple-700 font-semibold count-badge" data-room="toolman">0 unit</span>
</div>
<div onclick="openRoomDetail('mushola')" id="room-mushola" class="denah-card bg-teal-50 border-2 border-teal-300 p-2.5 rounded-xl text-center shadow-xs">
<span class="text-xs font-bold text-teal-950 block">mushola</span>
<span class="text-[10px] text-teal-700 font-semibold count-badge" data-room="mushola">0 unit</span>
</div>
<div onclick="openRoomDetail('kantorsmp')" id="room-kantorsmp" class="denah-card bg-rose-50 border-2 border-rose-300 p-3 rounded-xl text-center shadow-xs">
<span class="text-xs font-bold text-rose-950 block">Kantor guru smp</span>
<span class="text-[10px] text-rose-700 font-semibold count-badge" data-room="kantorsmp">0 unit</span>
</div>
<div onclick="openRoomDetail('kelas7smp')" id="room-kelas7smp" class="denah-card bg-rose-50 border-2 border-rose-300 p-3 rounded-xl text-center shadow-xs">
<span class="text-xs font-bold text-rose-950 block">Kelas 7 smp</span>
<span class="text-[10px] text-rose-800 block leading-tight mt-0.5">Dan lab audio video lantai 2</span>
<span class="text-[10px] text-rose-700 font-semibold mt-1 inline-block count-badge" data-room="kelas7smp">0 unit</span>
</div>
<div onclick="openRoomDetail('kelas8smp')" id="room-kelas8smp" class="denah-card bg-rose-50 border-2 border-rose-300 p-3 rounded-xl text-center shadow-xs">
<span class="text-xs font-bold text-rose-950 block">Kelas 8 smp dan lantai 2</span>
<span class="text-[10px] text-rose-700 font-semibold mt-1 inline-block count-badge" data-room="kelas8smp">0 unit</span>
</div>
<div class="grid grid-cols-2 gap-2">
<div onclick="openRoomDetail('wccowo')" id="room-wccowo" class="denah-card bg-orange-50 border-2 border-orange-300 p-2.5 rounded-xl text-center shadow-xs">
<span class="text-[10px] font-bold text-orange-950 block">Wc. cowo</span>
<span class="text-[9px] text-orange-800 block">Dan lantai 2</span>
<div class="grid grid-cols-2 gap-1 mt-1 text-[9px] bg-white/60 p-1 rounded border border-orange-200">
<span>Wc 1</span>
<span>Wc 2</span>
</div>
<span class="text-[9px] text-orange-700 font-semibold mt-1 block count-badge" data-room="wccowo">0 unit</span>
</div>
<div onclick="openRoomDetail('wccewe')" id="room-wccewe" class="denah-card bg-orange-50 border-2 border-orange-300 p-2.5 rounded-xl text-center shadow-xs">
<span class="text-[10px] font-bold text-orange-950 block">Wc. cewe</span>
<span class="text-[9px] text-orange-800 block">Dan lantai 2</span>
<div class="grid grid-cols-2 gap-1 mt-1 text-[9px] bg-white/60 p-1 rounded border border-orange-200">
<span>Wc 1</span>
<span>Wc 2</span>
</div>
<span class="text-[9px] text-orange-700 font-semibold mt-1 block count-badge" data-room="wccewe">0 unit</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-3xl shadow-sm border border-slate-200/80 p-6 flex flex-col">
<div class="flex flex-col md:flex-row md:items-center justify-between pb-4 border-b border-slate-100 gap-4">
<div>
<h3 id="currentActiveRoomTitle" class="text-base font-bold text-slate-900 flex items-center gap-2">
<i class="fa-solid fa-door-open text-indigo-600"></i> Pilih Ruangan pada Denah di Atas
</h3>
<p id="currentActiveRoomSubtitle" class="text-xs text-slate-500 mt-0.5">Daftar inventaris aset dalam ruangan terpilih</p>
</div>
<div class="flex flex-wrap items-center gap-3">
<div class="relative">
<i class="fa-solid fa-filter absolute left-3 top-2.5 text-slate-400 text-xs"></i>
<select id="conditionFilter" onchange="renderInventoryTable()" class="pl-8 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-indigo-500/20 text-slate-700">
<option value="ALL">Semua Kondisi</option>
<option value="Baik">Baik</option>
<option value="Rusak Ringan">Rusak Ringan</option>
<option value="Rusak Berat">Rusak Berat</option>
</select>
</div>
<div class="relative">
<i class="fa-solid fa-search absolute left-3 top-2.5 text-slate-400 text-xs"></i>
<input type="text" id="itemSearchInput" placeholder="Cari nama barang..." oninput="renderInventoryTable()" class="pl-8 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:outline-none focus:ring-2 focus:ring-indigo-500/20 w-48">
</div>
<button onclick="openAddAssetModalForActiveRoom()" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-xl text-xs font-semibold shadow-sm transition flex items-center space-x-1.5">
<i class="fa-solid fa-plus text-xs"></i>
<span>Tambah ke Ruang Ini</span>
</button>
<button onclick="printRoomReport()" class="bg-slate-800 hover:bg-slate-900 text-white px-4 py-2 rounded-xl text-xs font-semibold shadow-sm transition flex items-center space-x-1.5">
<i class="fa-solid fa-print text-xs"></i>
<span>Cetak Laporan</span>
</button>
</div>
</div>
<!-- Inventory Table -->
<div class="overflow-x-auto mt-4 max-h-[400px] custom-scrollbar">
<table class="w-full text-left border-collapse">
<thead class="bg-slate-50 text-slate-500 uppercase text-[11px] font-bold sticky top-0 z-10 border-b border-slate-200">
<tr>
<th class="py-3 px-4">Nama Barang/Peralatan</th>
<th class="py-3 px-3">Kode Inventaris</th>
<th class="py-3 px-3">Merk/Type</th>
<th class="py-3 px-3 text-center">Baik</th>
<th class="py-3 px-3 text-center">R. Ringan</th>
<th class="py-3 px-3 text-center">R. Berat</th>
<th class="py-3 px-3">Tahun</th>
<th class="py-3 px-3">Sumber Dana</th>
<th class="py-3 px-3">Lokasi / Ket</th>
<th class="py-3 px-4 text-right">Aksi</th>
</tr>
</thead>
<tbody id="inventoryTableBody" class="divide-y divide-slate-100 text-xs md:text-sm text-slate-700">
<!-- Populated by JS -->
</tbody>
</table>
</div>
</div>
</main>
<!-- Modal Import Excel -->
<div id="importModal" class="fixed inset-0 bg-slate-900/60 backdrop-blur-xs z-50 flex items-center justify-center p-4 hidden">
<div class="bg-white rounded-3xl shadow-2xl max-w-lg w-full overflow-hidden transform transition-all">
<div class="bg-emerald-700 text-white px-6 py-4 flex items-center justify-between">
<h3 class="font-bold text-sm md:text-base flex items-center gap-2">
<i class="fa-solid fa-file-excel"></i> Import Data Inventaris dari Excel / CSV
</h3>
<button onclick="closeImportModal()" class="text-emerald-200 hover:text-white p-1 rounded-lg">
<i class="fa-solid fa-xmark text-lg"></i>
</button>
</div>
<div class="p-6 space-y-4">
<div class="bg-emerald-50 border border-emerald-200 p-4 rounded-2xl text-xs text-emerald-800 leading-relaxed">
<p class="font-bold mb-1"><i class="fa-solid fa-circle-info mr-1"></i> Format Kolom Excel yang Didukung:</p>
<p class="font-mono text-[11px] bg-white p-2 rounded border border-emerald-200 mb-2">No | Nama Barang/Peralatan | Kode Inventaris | Merk/Type | Jumlah | Baik | Rusak Ringan | Rusak Berat | Tahun Perolehan | Sumber Dana | Lokasi/Keterangan</p>
<p>Sistem akan otomatis mencocokkan kolom dan memasukkan data sesuai lokasi ruangan denah sekolah!</p>
</div>
<div class="border-2 border-dashed border-slate-300 rounded-2xl p-6 text-center hover:border-emerald-500 transition bg-slate-50 cursor-pointer" onclick="document.getElementById('excelFileInput').click()">
<i class="fa-solid fa-cloud-arrow-up text-3xl text-emerald-600 mb-2"></i>
<p class="text-xs font-bold text-slate-700" id="fileNameDisplay">Klik untuk memilih file Excel (.xlsx, .xls) atau CSV</p>
<p class="text-[10px] text-slate-400 mt-1">Atau tarik dan lepas file ke sini</p>
<input type="file" id="excelFileInput" accept=".xlsx, .xls, .csv" class="hidden" onchange="handleFileSelect(event)">
</div>
<div class="flex items-center justify-between pt-2">
<button type="button" onclick="downloadSampleExcelTemplate()" class="text-xs font-bold text-indigo-600 hover:underline flex items-center gap-1.5">
<i class="fa-solid fa-download"></i> Download Contoh Format Excel
</button>
<div class="space-x-2">
<button type="button" onclick="closeImportModal()" class="px-4 py-2.5 rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50 text-xs font-semibold transition">Batal</button>
<button type="button" onclick="processImportFile()" id="btnProcessImport" disabled class="px-5 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 disabled:bg-slate-300 text-white text-xs font-semibold shadow-sm transition">Proses Import</button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Add / Edit Asset -->
<div id="assetModal" class="fixed inset-0 bg-slate-900/60 backdrop-blur-xs z-50 flex items-center justify-center p-4 hidden">
<div class="bg-white rounded-3xl shadow-2xl max-w-md w-full overflow-hidden transform transition-all">
<div class="bg-slate-900 text-white px-6 py-4 flex items-center justify-between">
<h3 id="modalTitle" class="font-bold text-sm md:text-base flex items-center gap-2">
<i class="fa-solid fa-box-archive"></i> Tambah Barang Inventaris
</h3>
<button onclick="closeModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">
<i class="fa-solid fa-xmark text-lg"></i>
</button>
</div>
<form id="assetForm" onsubmit="handleFormSubmit(event)" class="p-6 space-y-3.5">
<input type="hidden" id="editItemId">
<div>
<label class="block text-[11px] font-bold text-slate-600 uppercase tracking-wider mb-1">Nama Barang / Peralatan</label>
<input type="text" id="inputName" required placeholder="Contoh: Komputer PC Siswa" class="w-full px-3.5 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs md:text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/20">
</div>
<div class="grid grid-cols-2 gap-3">
<div>
<label class="block text-[11px] font-bold text-slate-600 uppercase tracking-wider mb-1">Kode Inventaris</label>
<input type="text" id="inputCode" required placeholder="LABKOM-001" class="w-full px-3.5 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs md:text-sm focus:outline-none">
</div>
<div>
<label class="block text-[11px] font-bold text-slate-600 uppercase tracking-wider mb-1">Merk / Type</label>
<input type="text" id="inputMerk" placeholder="Merk / Type" class="w-full px-3.5 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs md:text-sm focus:outline-none">
</div>
</div>
<div class="grid grid-cols-3 gap-2">
<div>
<label class="block text-[10px] font-bold text-emerald-700 uppercase tracking-wider mb-1">Baik</label>
<input type="number" id="inputBaik" min="0" value="1" class="w-full px-2 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs text-center font-bold">
</div>
<div>
<label class="block text-[10px] font-bold text-amber-600 uppercase tracking-wider mb-1">R. Ringan</label>
<input type="number" id="inputRusakRingan" min="0" value="0" class="w-full px-2 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs text-center font-bold">
</div>
<div>
<label class="block text-[10px] font-bold text-rose-600 uppercase tracking-wider mb-1">R. Berat</label>
<input type="number" id="inputRusakBerat" min="0" value="0" class="w-full px-2 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs text-center font-bold">
</div>
</div>
<div class="grid grid-cols-2 gap-3">
<div>
<label class="block text-[11px] font-bold text-slate-600 uppercase tracking-wider mb-1">Tahun Perolehan</label>
<input type="text" id="inputTahun" placeholder="2020" class="w-full px-3.5 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs md:text-sm">
</div>
<div>
<label class="block text-[11px] font-bold text-slate-600 uppercase tracking-wider mb-1">Sumber Dana</label>
<input type="text" id="inputSumber" placeholder="BOS" class="w-full px-3.5 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs md:text-sm">
</div>
</div>
<div>
<label class="block text-[11px] font-bold text-slate-600 uppercase tracking-wider mb-1">Lokasi / Ruangan Denah</label>
<select id="inputRoomId" required class="w-full px-3.5 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs md:text-sm">
<!-- Populated by JS -->
</select>
</div>
<div class="flex items-center justify-end space-x-3 pt-2">
<button type="button" onclick="closeModal()" class="px-4 py-2.5 rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50 text-xs font-semibold transition">Batal</button>
<button type="submit" class="px-5 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold shadow-sm transition">Simpan Barang</button>
</div>
</form>
</div>
</div>
<div id="toast" class="fixed bottom-5 right-5 bg-slate-900 text-white px-4 py-3 rounded-2xl shadow-xl transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center space-x-3 text-xs md:text-sm">
<i id="toastIcon" class="fa-solid fa-circle-check text-emerald-400"></i>
<span id="toastMessage">Berhasil menyimpan data</span>
</div>
<script>
// Mapping all exact rooms according to DENAH SEKOLAH SMK KEBON JERUK
const schoolRooms = [
{ id: 'gerbang', name: 'Pintu Gerbang', category: 'Fasilitas Umum' },
{ id: 'kepsek', name: 'Kepala Sekolah', category: 'Manajemen' },
{ id: 'kurikulum', name: 'Kurikulum', category: 'Manajemen' },
{ id: 'wakil_bendahara', name: 'Wakil dan Bendahara', category: 'Manajemen' },
{ id: 'sarpras', name: 'Sarpras', category: 'Manajemen' },
{ id: 'tu', name: 'T.U', category: 'Manajemen' },
{ id: 'ruangguru_l2', name: 'Ruang Guru dan Lab Komputer (Lantai 2)', category: 'Bengkel & Lab' },
{ id: 'kelas10av', name: 'Kelas 10 AV', category: 'Ruang Kelas' },
{ id: 'kelas10tkro', name: 'Kelas 10 TKRO', category: 'Ruang Kelas' },
{ id: 'kelas11mplb', name: 'Kelas 11 MPLB', category: 'Ruang Kelas' },
{ id: 'lapangan1', name: 'Lapangan 1', category: 'Lapangan & Outdoor' },
{ id: 'kelas10mplb', name: 'Kelas 10 MPLB & Perpustakaan (Lantai 2)', category: 'Ruang Kelas' },
{ id: 'aula', name: 'Aula & Kelas 10 AKL (Lantai 2)', category: 'Ruang Kelas' },
{ id: 'lapangan2', name: 'Lapangan 2', category: 'Lapangan & Outdoor' },
{ id: 'kelas11akl', name: 'Kelas 11 AKL (Dan Lantai 2)', category: 'Ruang Kelas' },
{ id: 'kelas11tkro', name: 'Kelas 11 TKRO (Dan Lantai 2)', category: 'Ruang Kelas' },
{ id: 'kepakelsmp', name: 'Kantor Kepala Sekolah SMP & Lab Aid (Lantai 2)', category: 'Area SMP' },
{ id: 'kelas11tkro_l2', name: 'Kelas 11 TKRO (Lantai 2)', category: 'Ruang Kelas' },
{ id: 'kelas9smp_l2', name: 'Kelas 9 SMP & Kelas 11 AV (Lantai 2)', category: 'Area SMP' },
{ id: 'kantin', name: 'Kantin', category: 'Fasilitas Umum' },
{ id: 'bengkel', name: 'Bengkel', category: 'Bengkel & Lab' },
{ id: 'toolman', name: 'Toolman', category: 'Bengkel & Lab' },
{ id: 'mushola', name: 'Mushola', category: 'Fasilitas Umum' },
{ id: 'kantorsmp', name: 'Kantor Guru SMP', category: 'Area SMP' },
{ id: 'kelas7smp', name: 'Kelas 7 SMP & Lab Audio Video (Lantai 2)', category: 'Area SMP' },
{ id: 'kelas8smp', name: 'Kelas 8 SMP (Dan Lantai 2)', category: 'Area SMP' },
{ id: 'wccowo', name: 'WC Cowok (Wc 1 & Wc 2, Lantai 1 & 2)', category: 'Sanitasi / WC' },
{ id: 'wccewe', name: 'WC Cewek (Wc 1 & Wc 2, Lantai 1 & 2)', category: 'Sanitasi / WC' }
];
// Default Sample Data
let inventoryItems = [
{ id: '1', roomId: 'ruangguru_l2', name: 'Komputer PC Siswa', code: 'LABKOM-001', merk: '-', baik: 20, rusakRingan: 2, rusakBerat: 0, tahun: '2019', sumber: 'BOS', keterangan: 'Lab Komputer' },
{ id: '2', roomId: 'ruangguru_l2', name: 'Monitor', code: 'LABKOM-002', merk: 'LG', baik: 18, rusakRingan: 4, rusakBerat: 0, tahun: '2019', sumber: 'BOS', keterangan: 'Lab Komputer' },
{ id: '3', roomId: 'bengkel', name: 'Mesin Bubut CNC', code: 'BNG-001', merk: 'Yamaha', baik: 2, rusakRingan: 1, rusakBerat: 0, tahun: '2020', sumber: 'BOS', keterangan: 'Bengkel' },
{ id: '4', roomId: 'lapangan1', name: 'Tiang & Net Basket', code: 'LAP-001', merk: 'Standard', baik: 2, rusakRingan: 0, rusakBerat: 0, tahun: '2021', sumber: 'BOS', keterangan: 'Lapangan 1' }
];
let currentActiveRoomId = 'ruangguru_l2';
let importedWorkbookData = null;
window.onload = function() {
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
document.getElementById('currentDate').innerText = new Date().toLocaleDateString('id-ID', options);
populateRoomDropdown();
openRoomDetail('ruangguru_l2');
updateStats();
};
function updateAllMapBadges() {
schoolRooms.forEach(room => {
const roomItems = inventoryItems.filter(i => i.roomId === room.id);
const totalQty = roomItems.reduce((sum, i) => sum + (parseInt(i.baik || 0) + parseInt(i.rusakRingan || 0) + parseInt(i.rusakBerat || 0)), 0);
const badges = document.querySelectorAll(`.count-badge[data-room="${room.id}"]`);
badges.forEach(b => {
b.innerText = `${totalQty} unit`;
});
});
}
function openRoomDetail(roomId) {
currentActiveRoomId = roomId;
const room = schoolRooms.find(r => r.id === roomId);
if (!room) return;
document.getElementById('currentActiveRoomTitle').innerHTML = `<i class="fa-solid fa-door-open text-indigo-600"></i> ${room.name}`;
document.getElementById('currentActiveRoomSubtitle').innerText = `Kategori: ${room.category} • Manajemen Aset Ruangan`;
renderInventoryTable();
}
function renderInventoryTable() {
const tbody = document.getElementById('inventoryTableBody');
tbody.innerHTML = '';
const conditionFilter = document.getElementById('conditionFilter').value;
const searchText = document.getElementById('itemSearchInput').value.toLowerCase();
let items = inventoryItems.filter(i => i.roomId === currentActiveRoomId);
if (conditionFilter === 'Baik') items = items.filter(i => parseInt(i.baik || 0) > 0);
if (conditionFilter === 'Rusak Ringan') items = items.filter(i => parseInt(i.rusakRingan || 0) > 0);
if (conditionFilter === 'Rusak Berat') items = items.filter(i => parseInt(i.rusakBerat || 0) > 0);
if (searchText) {
items = items.filter(i => i.name.toLowerCase().includes(searchText) || i.code.toLowerCase().includes(searchText));
}
if (items.length === 0) {
tbody.innerHTML = `
<tr>
<td colspan="10" class="py-12 text-center text-slate-400 text-xs md:text-sm">
<i class="fa-solid fa-box-open text-3xl mb-2 text-slate-300 block"></i>
Belum ada data barang di ruangan ini atau sesuai filter. Silakan gunakan tombol <b>Import Excel</b> atau <b>Tambah</b>.
</td>
</tr>
`;
return;
}
items.forEach((item, idx) => {
const tr = document.createElement('tr');
tr.className = 'hover:bg-slate-50 transition';
tr.innerHTML = `
<td class="py-3 px-4 font-bold text-slate-800">${item.name}</td>
<td class="py-3 px-3 font-mono text-xs text-slate-600">${item.code}</td>
<td class="py-3 px-3 text-slate-600">${item.merk || '-'}</td>
<td class="py-3 px-3 text-center font-semibold text-emerald-600">${item.baik || 0}</td>
<td class="py-3 px-3 text-center font-semibold text-amber-600">${item.rusakRingan || 0}</td>
<td class="py-3 px-3 text-center font-semibold text-rose-600">${item.rusakBerat || 0}</td>
<td class="py-3 px-3 text-slate-600">${item.tahun || '-'}</td>
<td class="py-3 px-3"><span class="bg-slate-100 text-slate-700 px-2 py-0.5 rounded text-[10px] font-bold">${item.sumber || 'BOS'}</span></td>
<td class="py-3 px-3 text-slate-500">${item.keterangan || '-'}</td>
<td class="py-3 px-4 text-right space-x-1">
<button onclick="openEditAssetModal('${item.id}')" class="text-slate-400 hover:text-indigo-600 p-1.5 rounded-lg transition" title="Edit">
<i class="fa-solid fa-pen-to-square"></i>
</button>
<button onclick="deleteAsset('${item.id}')" class="text-slate-400 hover:text-rose-600 p-1.5 rounded-lg transition" title="Hapus">
<i class="fa-solid fa-trash-can"></i>
</button>
</td>
`;
tbody.appendChild(tr);
});
}
function updateStats() {
let total = 0, good = 0, repair = 0, heavy = 0;
inventoryItems.forEach(i => {
const b = parseInt(i.baik || 0);
const rr = parseInt(i.rusakRingan || 0);
const rb = parseInt(i.rusakBerat || 0);
total += (b + rr + rb);
good += b;
repair += rr;
heavy += rb;
});
document.getElementById('statTotal').innerText = total;
document.getElementById('statGood').innerText = good;
document.getElementById('statRepair').innerText = repair;
document.getElementById('statHeavy').innerText = heavy;
updateAllMapBadges();
}
function populateRoomDropdown() {
const select = document.getElementById('inputRoomId');
select.innerHTML = '';
schoolRooms.forEach(room => {
const opt = document.createElement('option');
opt.value = room.id;
opt.innerText = `${room.name} (${room.category})`;
select.appendChild(opt);
});
}
function openImportModal() {
document.getElementById('importModal').classList.remove('hidden');
}
function closeImportModal() {
document.getElementById('importModal').classList.add('hidden');
document.getElementById('excelFileInput').value = '';
document.getElementById('fileNameDisplay').innerText = 'Klik untuk memilih file Excel (.xlsx, .xls) atau CSV';
document.getElementById('btnProcessImport').disabled = true;
importedWorkbookData = null;
}
function handleFileSelect(event) {
const file = event.target.files[0];
if (!file) return;
document.getElementById('fileNameDisplay').innerText = `File dipilih: ${file.name}`;
const reader = new FileReader();
reader.onload = function(e) {
try {
const data = new Uint8Array(e.target.result);
const workbook = XLSX.read(data, { type: 'array' });
const firstSheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[firstSheetName];
importedWorkbookData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
document.getElementById('btnProcessImport').disabled = false;
showToast('File berhasil dibaca! Siap di-import.', 'success');
} catch (err) {
console.error(err);
showToast('Gagal membaca file Excel. Pastikan format benar.', 'info');
}
};
reader.readAsArrayBuffer(file);
}
function processImportFile() {
if (!importedWorkbookData || importedWorkbookData.length === 0) {
showToast('Tidak ada data untuk diimport.', 'info');
return;
}
let importedCount = 0;
for (let i = 1; i < importedWorkbookData.length; i++) {
const row = importedWorkbookData[i];
if (!row || row.length < 2) continue;
const namaBarang = row[1] || row[0] || 'Barang Tanpa Nama';
const kode = row[2] || `INV-${Date.now()}-${i}`;
const merk = row[3] || '-';
const baik = parseInt(row[5] !== undefined ? row[5] : (row[4] || 1));
const rusakRingan = parseInt(row[6] || 0);
const rusakBerat = parseInt(row[7] || 0);
const tahun = String(row[8] || '2020');
const sumber = String(row[9] || 'BOS');
const lokasiKet = String(row[10] || 'Lab Komputer');
let targetRoomId = currentActiveRoomId;
const lowerLoc = lokasiKet.toLowerCase();
if (lowerLoc.includes('server') || lowerLoc.includes('lab')) targetRoomId = 'ruangguru_l2';
else if (lowerLoc.includes('bengkel')) targetRoomId = 'bengkel';
else if (lowerLoc.includes('lapangan')) targetRoomId = 'lapangan1';
else if (lowerLoc.includes('kepala sekolah')) targetRoomId = 'kepsek';
const newItem = {
id: 'imp_' + Date.now() + '_' + i,
roomId: targetRoomId,
name: String(namaBarang),
code: String(kode),
merk: String(merk),
baik: isNaN(baik) ? 1 : baik,
rusakRingan: isNaN(rusakRingan) ? 0 : rusakRingan,
rusakBerat: isNaN(rusakBerat) ? 0 : rusakBerat,
tahun: tahun,
sumber: sumber,
keterangan: lokasiKet
};
inventoryItems.push(newItem);
importedCount++;
}
closeImportModal();
updateStats();
openRoomDetail(currentActiveRoomId);
showToast(`Berhasil mengimport ${importedCount} data barang dari Excel!`);
}
function downloadSampleExcelTemplate() {
const sampleData = [
["No", "Nama Barang/Peralatan", "Kode Inventaris", "Merk/Type", "Jumlah", "Baik", "Rusak Ringan", "Rusak Berat", "Tahun Perolehan", "Sumber Dana", "Lokasi/Keterangan"],
[1, "Komputer PC Siswa", "LABKOM-001", "-", 1, 1, 0, 0, "2019", "BOS", "Lab Komputer"],
[2, "Monitor", "LABKOM-002", "-", 2, 1, 1, 0, "2019", "BOS", "Lab Komputer"],
[3, "Mesin Bubut", "BNG-001", "Yamaha", 1, 0, 1, 0, "2020", "BOS", "Bengkel"]
];
const ws = XLSX.utils.aoa_to_sheet(sampleData);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Format_Inventaris");
XLSX.writeFile(wb, "Contoh_Format_Inventaris_SMK_Kebon_Jeruk.xlsx");
}
function openAddAssetModal() {
document.getElementById('modalTitle').innerHTML = `<i class="fa-solid fa-box-archive"></i> Tambah Barang Inventaris`;
document.getElementById('editItemId').value = '';
document.getElementById('assetForm').reset();
document.getElementById('inputRoomId').value = currentActiveRoomId;
document.getElementById('assetModal').classList.remove('hidden');
}
function openAddAssetModalForActiveRoom() {
openAddAssetModal();
}
function openEditAssetModal(id) {
const item = inventoryItems.find(i => i.id === id);
if (!item) return;
document.getElementById('modalTitle').innerHTML = `<i class="fa-solid fa-pen-to-square"></i> Edit Barang Inventaris`;
document.getElementById('editItemId').value = item.id;
document.getElementById('inputName').value = item.name;
document.getElementById('inputCode').value = item.code;
document.getElementById('inputMerk').value = item.merk || '';
document.getElementById('inputBaik').value = item.baik || 0;
document.getElementById('inputRusakRingan').value = item.rusakRingan || 0;
document.getElementById('inputRusakBerat').value = item.rusakBerat || 0;
document.getElementById('inputTahun').value = item.tahun || '';
document.getElementById('inputSumber').value = item.sumber || '';
document.getElementById('inputRoomId').value = item.roomId;
document.getElementById('assetModal').classList.remove('hidden');
}
function closeModal() {
document.getElementById('assetModal').classList.add('hidden');
}
function handleFormSubmit(event) {
event.preventDefault();
const editId = document.getElementById('editItemId').value;
const name = document.getElementById('inputName').value;
const code = document.getElementById('inputCode').value;
const merk = document.getElementById('inputMerk').value;
const baik = parseInt(document.getElementById('inputBaik').value) || 0;
const rusakRingan = parseInt(document.getElementById('inputRusakRingan').value) || 0;
const rusakBerat = parseInt(document.getElementById('inputRusakBerat').value) || 0;
const tahun = document.getElementById('inputTahun').value;
const sumber = document.getElementById('inputSumber').value;
const roomId = document.getElementById('inputRoomId').value;
if (editId) {
const index = inventoryItems.findIndex(i => i.id === editId);
if (index !== -1) {
inventoryItems[index] = { id: editId, roomId, name, code, merk, baik, rusakRingan, rusakBerat, tahun, sumber, keterangan: 'Manual Input' };
showToast('Data barang berhasil diperbarui!');
}
} else {
const newItem = {
id: 'man_' + Date.now(),
roomId,
name,
code,
merk,
baik,
rusakRingan,
rusakBerat,
tahun,
sumber,
keterangan: 'Manual Input'
};
inventoryItems.push(newItem);
showToast('Barang baru berhasil ditambahkan!');
}
closeModal();
openRoomDetail(roomId);
updateStats();
}
function deleteAsset(id) {
if (confirm('Apakah Anda yakin ingin menghapus barang ini?')) {
inventoryItems = inventoryItems.filter(i => i.id !== id);
renderInventoryTable();
updateStats();
showToast('Barang berhasil dihapus.', 'info');
}
}
function filterDenahRooms(query) {
const cards = document.querySelectorAll('.denah-card');
cards.forEach(card => {
const text = card.innerText.toLowerCase();
if (text.includes(query.toLowerCase())) {
card.style.opacity = '1';
card.style.transform = 'scale(1)';
} else {
card.style.opacity = query ? '0.3' : '1';
}
});
}
function printRoomReport() {
const room = schoolRooms.find(r => r.id === currentActiveRoomId);
const items = inventoryItems.filter(i => i.roomId === currentActiveRoomId);
let printWindow = window.open('', '_blank');
printWindow.document.write(`
<html>
<head>
<title>Laporan Inventaris - ${room.name}</title>
<style>
body { font-family: Arial, sans-serif; padding: 30px; color: #111; }
h2, h4 { margin: 0 0 5px 0; }
.header { border-bottom: 2px solid #333; padding-bottom: 12px; margin-bottom: 20px; }
table { width: 100%; border-collapse: collapse; margin-top: 15px; }
th, td { border: 1px solid #cbd5e1; padding: 8px 12px; text-align: left; font-size: 11px; }
th { background-color: #f1f5f9; }
</style>
</head>
<body>
<div class="header">
<h2>SMK KEBON JERUK - LAPORAN INVENTARIS RUANGAN</h2>
<h4>Ruangan: ${room.name} (${room.category})</h4>
<p style="font-size: 11px; color: #666; margin-top: 5px;">Dicetak pada: ${new Date().toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</p>
</div>
<table>
<thead>
<tr>
<th>No</th>
<th>Nama Barang</th>
<th>Kode</th>
<th>Merk</th>
<th>Baik</th>
<th>R. Ringan</th>
<th>R. Berat</th>
<th>Tahun</th>
<th>Sumber</th>
<th>Ket</th>
</tr>
</thead>
<tbody>
${items.map((item, idx) => `
<tr>
<td>${idx + 1}</td>
<td><b>${item.name}</b></td>
<td>${item.code}</td>
<td>${item.merk || '-'}</td>
<td>${item.baik || 0}</td>
<td>${item.rusakRingan || 0}</td>
<td>${item.rusakBerat || 0}</td>
<td>${item.tahun || '-'}</td>
<td>${item.sumber || '-'}</td>
<td>${item.keterangan || '-'}</td>
</tr>
`).join('')}
</tbody>
</table>
</body>
</html>
`);
printWindow.document.close();
printWindow.print();
}
function showToast(message, type = 'success') {
const toast = document.getElementById('toast');
const toastMessage = document.getElementById('toastMessage');
const toastIcon = document.getElementById('toastIcon');
toastMessage.innerText = message;
toastIcon.className = type === 'success' ? 'fa-solid fa-circle-check text-emerald-400' : 'fa-solid fa-circle-info text-blue-400';
toast.classList.remove('translate-y-20', 'opacity-0');
setTimeout(() => {
toast.classList.add('translate-y-20', 'opacity-0');
}, 3000);
}
</script>
</body>
</html>
0 Comments