E-PERPUS

E-PERPUS disini

<!DOCTYPE html>

<head>

<title>Perpustakaan Digital SMK Kebon Jeruk</title>

tailwind.config = {

darkMode: 'class',

theme: {

extend: {

colors: {

brand: {

50: '#eff6ff',

100: '#dbeafe',

500: '#3b82f6',

600: '#2563eb',

700: '#1d4ed8',

800: '#1e40af',

900: '#1e3a8a',

}

</script>

<style>

body { font-family: 'Inter', sans-serif; }

.tab-content { display: none; }

.tab-content.active { display: block; }

/* Custom scrollbar */

::-webkit-scrollbar { width: 6px; height: 6px; }

::-webkit-scrollbar-track { background: #f1f1f1; }

::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

@media print {

body * {

visibility: hidden;

}

#printArea, #printArea * {

visibility: visible;

}

#printArea {

position: absolute;

left: 0;

top: 0;

width: 100%;

background: white !important;

}

.no-print {

display: none !important;

}

</style>

</head>

</div>

<div>

<h1 class="font-bold text-white text-base tracking-wide">SMK KEBON JERUK</h1>

<p class="text-xs text-brand-400 font-medium">Perpustakaan Digital</p>

</div>

</button>

</div>

<span>Dashboard</span>

</a>

<span>Data Koleksi</span>

</a>

<span>Pencarian Buku</span>

</a>

<span>Data Anggota</span>

</a>

<span>Peminjaman & Kembali</span>

</a>

<span>Perpus Digital & Modul</span>

</a>

<span>Laporan & Rekap</span>

</a>

<span>Profil Perpustakaan</span>

</a>

<span>Pengaturan Sistem</span>

</a>

</nav>

</div>

<p class="text-xs font-semibold text-white truncate">Administrator</p>

<p class="text-[11px] text-slate-400 truncate">pustaka@smkkebonjeruk.sch.id</p>

</div>

</aside>

</button>

<h2 id="pageTitle" class="text-lg font-bold text-slate-800 tracking-tight">Dashboard Perpustakaan</h2>

</div>

Local Storage Aktif

</span>

</button>

</div>

</header>

</div>

<span class="bg-brand-500/40 text-brand-100 text-xs font-semibold px-3 py-1 rounded-full uppercase tracking-wider">E-Library SMK Kebon Jeruk</span>

<h3 class="text-2xl sm:text-3xl font-bold mt-2">Selamat Datang di Portal Pustaka Cerdas</h3>

<p class="text-blue-100 text-sm sm:text-base mt-2 leading-relaxed">Kelola data peminjaman, referensi buku kejuruan lengkap, modul digital, serta rekapitulasi literasi warga sekolah dengan mudah dan terintegrasi.</p>

<span>Cari Buku Cepat</span>

</button>

<span>Kelola Peminjaman</span>

</button>

</div>

</div>

<div>

<p class="text-sm font-medium text-slate-500">Jumlah Buku & E-Book</p>

<p class="text-xs text-emerald-600 font-medium mt-1"><i class="fa-solid fa-arrow-up mr-1"></i>Referensi Lengkap</p>

</div>

</div>

<div>

<p class="text-sm font-medium text-slate-500">Total Anggota</p>

<p class="text-xs text-emerald-600 font-medium mt-1"><i class="fa-solid fa-check mr-1"></i>Siswa & Guru</p>

</div>

</div>

<div>

<p class="text-sm font-medium text-slate-500">Sedang Dipinjam</p>

<p class="text-xs text-amber-600 font-medium mt-1"><i class="fa-solid fa-info-circle mr-1"></i>Aktif s.d hari ini</p>

</div>

</div>

<div>

<p class="text-sm font-medium text-slate-500">Modul & LKPD Digital</p>

<p class="text-xs text-purple-600 font-medium mt-1"><i class="fa-solid fa-download mr-1"></i>Siap Unduh</p>

</div>

<h4 class="font-bold text-slate-800 text-base">Aktivitas Peminjaman Terbaru</h4>

<button onclick="switchTab('peminjaman')" class="text-xs text-brand-600 hover:text-brand-700 font-semibold">Lihat Semua</button>

</div>

<thead>

<th class="py-3 px-3">Peminjam</th>

<th class="py-3 px-3">Tgl Pinjam</th>

<th class="py-3 px-3">Status</th>

</tr>

</thead>

</tbody>

</table>

</div>

<div>

<i class="fa-solid fa-bullhorn text-brand-600 mr-2"></i> Pengumuman Pustaka

</h4>

<p class="text-xs font-bold text-blue-900">Referensi Buku Kejuruan</p>

<p class="text-xs text-blue-700 mt-1">Koleksi referensi buku cetak Kurikulum Merdeka untuk PPLG, TJKT, DKV, Akuntansi & Perhotelan kini telah diperbarui.</p>

</div>

<p class="text-xs font-bold text-emerald-900">Modul Ajar Terbaru</p>

<p class="text-xs text-emerald-700 mt-1">Silakan unduh modul praktik kejuruan terbaru di menu Perpus Digital untuk menunjang kegiatan KBM.</p>

</div>

<p class="font-semibold text-slate-700 mb-1">Jam Operasional Perpustakaan:</p>

<p>Senin - Kamis: 07.00 - 16.00 WIB</p>

<p>Jumat: 07.00 - 15.00 WIB</p>

</div>

<div>

<h3 class="text-lg font-bold text-slate-900">Manajemen Data Koleksi Buku</h3>

<p class="text-xs text-slate-500 mt-0.5">Kelola referensi buku cetak dan e-book perpustakaan SMK Kebon Jeruk.</p>

</div>

<span>Tambah Koleksi</span>

</button>

</div>

</span>

</div>

<option value="">Semua Jenis Koleksi</option>

<option value="Buku Cetak">Buku Cetak</option>

<option value="Modul Ajar">Modul Ajar</option>

</select>

</div>

<thead>

<th class="py-3.5 px-4">Judul & ISBN</th>

<th class="py-3.5 px-4">Penulis / Penerbit</th>

<th class="py-3.5 px-4">Kategori / Jurusan</th>

<th class="py-3.5 px-4">Jenis</th>

</tr>

</thead>

</tbody>

</table>

</div>

<h3 class="text-2xl sm:text-3xl font-bold">Pencarian Koleksi Perpustakaan</h3>

<p class="text-slate-300 text-sm max-w-xl mx-auto">Temukan buku pelajaran, referensi kejuruan, maupun e-book dengan cepat menggunakan kata kunci judul atau nama penulis.</p>

</span>

</div>

<div>

<h4 class="font-bold text-slate-800 text-base" id="searchResultTitle">Hasil Koleksi Tersedia</h4>

</div>

</div>

<div>

<h3 class="text-lg font-bold text-slate-900">Data Anggota Perpustakaan</h3>

<p class="text-xs text-slate-500 mt-0.5">Kelola siswa, guru, dan tenaga kependidikan SMK Kebon Jeruk.</p>

</div>

<span>Tambah Anggota</span>

</button>

</div>

</span>

</div>

<option value="">Semua Peran</option>

<option value="Siswa">Siswa</option>

<option value="Tenaga Kependidikan">Tenaga Kependidikan</option>

</select>

</div>

<thead>

<th class="py-3.5 px-4">Nama Lengkap</th>

<th class="py-3.5 px-4">Peran</th>

<th class="py-3.5 px-4">Kelas / Jabatan</th>

<th class="py-3.5 px-4">No. Telepon / WA</th>

</tr>

</thead>

</tbody>

</table>

</div>

<div>

<h3 class="text-lg font-bold text-slate-900">Transaksi Peminjaman & Pengembalian</h3>

<p class="text-xs text-slate-500 mt-0.5">Catat peminjaman buku fisik dan pantau status pengembalian.</p>

</div>

<span>Catat Peminjaman Baru</span>

</button>

</div>

<h4 class="font-bold text-slate-800 text-sm">Daftar Sirkulasi Buku</h4>

<option value="">Semua Status</option>

<option value="Dipinjam">Dipinjam</option>

<option value="Dikembalikan">Dikembalikan</option>

</select>

</div>

<thead>

<th class="py-3.5 px-4">Peminjam</th>

<th class="py-3.5 px-4">Judul Buku</th>

<th class="py-3.5 px-4">Tgl Pinjam</th>

<th class="py-3.5 px-4">Batas Kembali</th>

<th class="py-3.5 px-4">Status</th>

</tr>

</thead>

</tbody>

</table>

</div>

<div>

<span class="bg-purple-500/40 text-purple-100 text-xs font-semibold px-3 py-1 rounded-full uppercase tracking-wider">Digital Learning Repository</span>

<h3 class="text-2xl font-bold mt-2">Modul Ajar, LKPD & E-Book Legal SMK</h3>

<p class="text-purple-100 text-sm mt-1 max-w-xl">Unduh modul kejuruan Kurikulum Merdeka, Lembar Kerja Peserta Didik, serta e-book pembelajaran resmi secara gratis.</p>

</div>

<span>Upload File Digital</span>

</button>

</div>

<div>

<h4 class="font-bold text-slate-800 text-base">Koleksi Digital Tersedia</h4>

<option value="">Semua Kategori</option>

<option value="Modul Ajar">Modul Ajar</option>

<option value="E-Book Legal">E-Book Legal</option>

<option value="Materi Pembelajaran">Materi Pembelajaran</option>

</select>

</div>

</div>

<div>

<h3 class="text-lg font-bold text-slate-900">Laporan & Rekapitulasi Perpustakaan</h3>

<p class="text-xs text-slate-500 mt-0.5">Statistik rekapitulasi koleksi, peminjaman, dan aktivitas literasi warga sekolah.</p>

</div>

<span>Cetak Laporan</span>

</button>

</div>

<h1 class="text-xl font-bold uppercase">PEMERINTAH PROVINSI DKI JAKARTA</h1>

<h2 class="text-lg font-bold uppercase">SMK KEBON JERUK JAKARTA</h2>

<h3 class="text-md font-semibold">LAPORAN REKAPITULASI PERPUSTAKAAN DIGITAL</h3>

<p class="text-xs text-slate-600 mt-1">Jl. Salak Barat No. 34, Kebon Jeruk, Jakarta Barat</p>

</div>

<p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Total Buku Fisik</p>

<p class="text-xs text-slate-500">Tersedia di rak perpustakaan sekolah</p>

</div>

<p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Total Peminjaman Keseluruhan</p>

<p class="text-xs text-slate-500">Akumulasi transaksi tercatat</p>

</div>

<p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Total File Digital / E-Book</p>

<p class="text-xs text-slate-500">Modul, LKPD, dan materi siap unduh</p>

</div>

<h4 class="font-bold text-slate-800 text-base mb-4">Rekapitulasi Riwayat Sirkulasi</h4>

<thead>

<th class="py-3 px-3">ID Transaksi</th>

<th class="py-3 px-3">Nama Peminjam</th>

<th class="py-3 px-3">Buku Dipinjam</th>

<th class="py-3 px-3">Tanggal Pinjam</th>

<th class="py-3 px-3">Status Terakhir</th>

</tr>

</thead>

</tbody>

</table>

</div>

</div>

<div>

<span class="bg-brand-500 text-white text-xs font-bold px-2.5 py-1 rounded-md uppercase">Profil Resmi</span>

<h3 class="text-2xl font-bold mt-2">Perpustakaan SMK Kebon Jeruk</h3>

<p class="text-slate-300 text-xs sm:text-sm mt-1">Pusat Literasi dan Sumber Belajar Unggul Berbasis Digital</p>

</div>

<h4 class="font-bold text-slate-900 text-base border-b pb-2"><i class="fa-solid fa-circle-info text-brand-600 mr-2"></i> Informasi Sekolah</h4>

<p><strong>NPSN:</strong> 20101234 (Contoh)</p>

<p><strong>Alamat:</strong> Jl. Salak Barat No. 34, Kebon Jeruk, Jakarta Barat, DKI Jakarta</p>

<p><strong>Email:</strong> perpustakaan@smkkebonjeruk.sch.id</p>

<p><strong>Akreditasi:</strong> A (Unggul)</p>

</div>

<h4 class="font-bold text-slate-900 text-base border-b pb-2"><i class="fa-solid fa-bullseye text-brand-600 mr-2"></i> Visi & Misi Pustaka</h4>

<p class="italic text-slate-600">"Menjadi pusat layanan informasi dan literasi digital yang unggul dalam mendukung kompetensi keahlian siswa SMK Kebon Jeruk yang siap kerja, mandiri, dan berkarakter."</p>

<li>Menyediakan koleksi buku cetak & digital yang relevan dengan kurikulum.</li>

<li>Memberikan pelayanan prima berbasis teknologi informasi.</li>

<li>Meningkatkan minat baca warga sekolah melalui program literasi kreatif.</li>

</ul>

</div>

<div>

<h3 class="text-lg font-bold text-slate-900">Pengaturan & Penyimpanan Lokal</h3>

<p class="text-xs text-slate-500 mt-0.5">Kelola penyimpanan data lokal (LocalStorage) browser Anda.</p>

</div>

<div>

<p class="font-semibold text-sm text-slate-800">Status Database Lokal</p>

<p class="text-xs text-slate-500 mt-0.5">Semua perubahan data disimpan otomatis di memori browser.</p>

</div>

<span class="bg-emerald-100 text-emerald-800 text-xs font-bold px-3 py-1 rounded-full">Aktif</span>

</div>

<div>

<p class="font-semibold text-sm text-rose-900">Reset Seluruh Data</p>

<p class="text-xs text-rose-600 mt-0.5">Kembalikan data koleksi, anggota, dan peminjaman ke data referensi awal.</p>

</div>

Reset Data

</button>

</div>

</main>

</div>

<h4 id="bukuModalTitle" class="font-bold text-slate-900 text-base">Tambah Koleksi Baru</h4>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Judul Buku / E-Book *</label>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Penulis *</label>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Penerbit</label>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Jenis Koleksi *</label>

<option value="Buku Cetak">Buku Cetak</option>

<option value="Modul Ajar">Modul Ajar</option>

</select>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Kategori / Jurusan *</label>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Tahun Terbit</label>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Stok / Jumlah Eksemplar *</label>

</div>

<button type="button" onclick="closeBukuModal()" class="px-4 py-2 text-sm font-semibold text-slate-600 hover:bg-slate-100 rounded-xl">Batal</button>

<button type="submit" class="px-5 py-2 text-sm font-semibold bg-brand-600 hover:bg-brand-700 text-white rounded-xl shadow">Simpan Koleksi</button>

</div>

</form>

</div>

<h4 id="anggotaModalTitle" class="font-bold text-slate-900 text-base">Tambah Anggota Baru</h4>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Nama Lengkap *</label>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Nomor Induk (NIS / NIP) *</label>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Peran *</label>

<option value="Siswa">Siswa</option>

<option value="Tenaga Kependidikan">Tenaga Kependidikan</option>

</select>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Kelas / Jabatan *</label>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">No. Telepon / WhatsApp *</label>

</div>

<button type="button" onclick="closeAnggotaModal()" class="px-4 py-2 text-sm font-semibold text-slate-600 hover:bg-slate-100 rounded-xl">Batal</button>

<button type="submit" class="px-5 py-2 text-sm font-semibold bg-brand-600 hover:bg-brand-700 text-white rounded-xl shadow">Simpan Anggota</button>

</div>

</form>

</div>

<h4 class="font-bold text-slate-900 text-base">Catat Transaksi Peminjaman Buku</h4>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Pilih Anggota *</label>

</select>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Pilih Buku (Buku Cetak) *</label>

</select>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Tanggal Pinjam *</label>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Batas Pengembalian *</label>

</div>

<button type="button" onclick="closePinjamModal()" class="px-4 py-2 text-sm font-semibold text-slate-600 hover:bg-slate-100 rounded-xl">Batal</button>

<button type="submit" class="px-5 py-2 text-sm font-semibold bg-brand-600 hover:bg-brand-700 text-white rounded-xl shadow">Proses Peminjaman</button>

</div>

</form>

</div>

<h4 class="font-bold text-slate-900 text-base">Tambah Dokumen Digital & Modul</h4>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Judul Dokumen / Modul *</label>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Kategori *</label>

<option value="Modul Ajar">Modul Ajar</option>

<option value="E-Book Legal">E-Book Legal</option>

<option value="Materi Pembelajaran">Materi Pembelajaran</option>

</select>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Penyusun / Guru *</label>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Deskripsi Singkat *</label>

</div>

<button type="button" onclick="closeDigitalModal()" class="px-4 py-2 text-sm font-semibold text-slate-600 hover:bg-slate-100 rounded-xl">Batal</button>

<button type="submit" class="px-5 py-2 text-sm font-semibold bg-brand-600 hover:bg-brand-700 text-white rounded-xl shadow">Upload Dokumen</button>

</div>

</form>

</div>

// Referensi Lengkap Data Buku SMK (Kurikulum Merdeka & Kejuruan)

const defaultBuku = [

{ id: 1, judul: "Pemrograman Berorientasi Objek (PBO) Kelas XI", penulis: "Tim Produktif PPLG", penerbit: "Erlangga", jenis: "Buku Cetak", kategori: "PPLG", tahun: 2023, stok: 12 },

{ id: 2, judul: "Administrasi Sistem Jaringan (ASJ) TJKT", penulis: "Ahmad Fauzi, M.Kom", penerbit: "Mediatama", jenis: "Buku Cetak", kategori: "TJKT", tahun: 2022, stok: 8 },

{ id: 3, judul: "Desain Grafis & UI/UX Dasar DKV", penulis: "Siti Rahma, S.Ds", penerbit: "Andi Publisher", jenis: "Buku Cetak", kategori: "DKV", tahun: 2023, stok: 15 },

{ id: 4, judul: "Matematika SMK Bisnis & Teknologi Kelas XII", penulis: "Drs. Sujono", penerbit: "Grafindo", jenis: "Buku Cetak", kategori: "Normatif", tahun: 2021, stok: 20 },

{ id: 5, judul: "Dasar-Dasar Pengembangan Perangkat Lunak dan Gim", penulis: "Budi Raharjo, S.T", penerbit: "Informatika", jenis: "Buku Cetak", kategori: "PPLG", tahun: 2023, stok: 14 },

{ id: 6, judul: "Teknologi Jaringan Berbasis Luas (WAN) Kelas XII", penulis: "Ir. Eko Prasetyo", penerbit: "Yrama Widya", jenis: "Buku Cetak", kategori: "TJKT", tahun: 2022, stok: 10 },

{ id: 7, judul: "Praktikum Akuntansi Perusahaan Jasa & Dagang", penulis: "Dr. Hj. Nur Indah, M.Ak", penerbit: "Salemba Empat", jenis: "Buku Cetak", kategori: "Akuntansi", tahun: 2023, stok: 18 },

{ id: 8, judul: "Food and Beverage Service Operations", penulis: "Chef Hendra Wijaya", penerbit: "Andi Publisher", jenis: "Buku Cetak", kategori: "Perhotelan", tahun: 2022, stok: 12 },

{ id: 9, judul: "Modul Ajar Kurikulum Merdeka - Dasar TJKT", penulis: "Tim Guru TJKT", penerbit: "SMK Kebon Jeruk", jenis: "Modul Ajar", kategori: "TJKT", tahun: 2024, stok: 50 },

{ id: 10, judul: "E-Book Undang-Undang ITE & Etika Siber", penulis: "Kemenkominfo", penerbit: "Digital Legal", jenis: "E-Book", kategori: "Umum", tahun: 2023, stok: 100 }

];

const defaultAnggota = [

{ id: 1, nama: "Budi Santoso", nomorId: "10021", peran: "Siswa", kelas: "XI PPLG 1", telepon: "081234567890" },

{ id: 2, nama: "Dewi Lestari", nomorId: "10022", peran: "Siswa", kelas: "XI TJKT 2", telepon: "085678901234" },

{ id: 3, nama: "Rizky Pratama", nomorId: "10023", peran: "Siswa", kelas: "XII DKV 1", telepon: "087812345678" },

{ id: 4, nama: "Drs. H. Mulyadi, M.Pd", nomorId: "19750112", peran: "Guru", kelas: "Guru Produktif TJKT", telepon: "081198765432" },

{ id: 5, nama: "Sri Wahyuni, S.Pd", nomorId: "19820520", peran: "Guru", kelas: "Guru Normatif", telepon: "081345678901" }

];

const defaultPeminjaman = [

{ id: 1, anggotaId: 1, bukuId: 1, tglPinjam: "2026-03-01", batasKembali: "2026-03-08", status: "Dipinjam" },

{ id: 2, anggotaId: 2, bukuId: 2, tglPinjam: "2026-02-20", batasKembali: "2026-02-27", status: "Dikembalikan" }

];

const defaultDigital = [

{ id: 1, judul: "Modul Ajar Pemrograman Web dan Perangkat Bergerak", kategori: "Modul Ajar", penyusun: "Tim PPLG", deskripsi: "Modul lengkap HTML, CSS, JavaScript untuk kelas XI SMK.", link: "#" },

{ id: 2, judul: "LKPD Administrasi Server Jaringan Linux Debian", kategori: "LKPD", penyusun: "Ahmad Fauzi, M.Kom", deskripsi: "Lembar kerja praktikum konfigurasi DNS dan DHCP Server.", link: "#" },

{ id: 3, judul: "E-Book Panduan Adobe Illustrator & Photoshop", kategori: "E-Book Legal", penyusun: "Siti Rahma, S.Ds", deskripsi: "Buku panduan resmi desain vektor dan raster tingkat SMK.", link: "#" }

];

// LocalStorage Initialization

let bukuList = JSON.parse(localStorage.getItem('smk_buku')) || defaultBuku;

let anggotaList = JSON.parse(localStorage.getItem('smk_anggota')) || defaultAnggota;

let peminjamanList = JSON.parse(localStorage.getItem('smk_peminjaman')) || defaultPeminjaman;

let digitalList = JSON.parse(localStorage.getItem('smk_digital')) || defaultDigital;

function saveData() {

localStorage.setItem('smk_buku', JSON.stringify(bukuList));

localStorage.setItem('smk_anggota', JSON.stringify(anggotaList));

localStorage.setItem('smk_peminjaman', JSON.stringify(peminjamanList));

localStorage.setItem('smk_digital', JSON.stringify(digitalList));

refreshAllUI();

}

// Sidebar & Tab Switcher

const sidebar = document.getElementById('sidebar');

document.getElementById('openSidebar').addEventListener('click', () => { sidebar.classList.remove('-translate-x-full'); });

document.getElementById('closeSidebar').addEventListener('click', () => { sidebar.classList.add('-translate-x-full'); });

function switchTab(tabId) {

document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));

document.getElementById('tab-' + tabId).classList.add('active');

document.querySelectorAll('.nav-link').forEach(el => el.classList.remove('bg-slate-800', 'text-white'));

event && event.currentTarget && event.currentTarget.classList.add('bg-slate-800', 'text-white');

// Close mobile sidebar if open

sidebar.classList.add('-translate-x-full');

// Update title

const titles = {

dashboard: 'Dashboard Perpustakaan',

koleksi: 'Data Koleksi Buku',

pencarian: 'Pencarian Buku',

anggota: 'Data Anggota Perpustakaan',

peminjaman: 'Peminjaman & Pengembalian',

digital: 'Perpustakaan Digital & Modul',

laporan: 'Laporan & Rekapitulasi',

profil: 'Profil Perpustakaan',

pengaturan: 'Pengaturan Sistem'

};

document.getElementById('pageTitle').innerText = titles[tabId] || 'Portal Pustaka';

}

// Refresh All UI components

function refreshAllUI() {

renderDashboard();

renderKoleksi();

renderAnggota();

renderPeminjaman();

renderDigitalRepo();

renderLaporan();

}

// 1. Dashboard Render

function renderDashboard() {

document.getElementById('statTotalBuku').innerText = bukuList.length;

document.getElementById('statTotalAnggota').innerText = anggotaList.length;

const activePinjam = peminjamanList.filter(p => p.status === 'Dipinjam').length;

document.getElementById('statDipinjam').innerText = activePinjam;

document.getElementById('statDigital').innerText = digitalList.length;

// Recent activity table

const tbody = document.getElementById('dashboardRecentActivity');

tbody.innerHTML = '';

const recent = [...peminjamanList].reverse().slice(0, 5);

if (recent.length === 0) {

tbody.innerHTML = `<tr><td colspan="4" class="py-4 text-center text-slate-400 text-xs">Belum ada aktivitas peminjaman.</td></tr>`;

return;

}

recent.forEach(p => {

const ang = anggotaList.find(a => a.id == p.anggotaId) || { nama: 'Unknown' };

const buk = bukuList.find(b => b.id == p.bukuId) || { judul: 'Buku Dihapus' };

const badge = p.status === 'Dipinjam' ? 'bg-amber-100 text-amber-800' : 'bg-emerald-100 text-emerald-800';

tbody.innerHTML += `

<td class="py-3 px-3 text-slate-600 truncate max-w-xs">${buk.judul}</td>

<td class="py-3 px-3 text-slate-500 text-xs">${p.tglPinjam}</td>

<td class="py-3 px-3"><span class="px-2.5 py-1 rounded-full text-xs font-semibold ${badge}">${p.status}</span></td>

</tr>

});

}

// 2. Koleksi Render & Filter

function renderKoleksi() {

const query = document.getElementById('searchKoleksiInput').value.toLowerCase();

const kat = document.getElementById('filterKategoriKoleksi').value;

const tbody = document.getElementById('tabelKoleksiBody');

tbody.innerHTML = '';

const filtered = bukuList.filter(b => {

const matchQ = b.judul.toLowerCase().includes(query) || b.penulis.toLowerCase().includes(query) || b.kategori.toLowerCase().includes(query);

const matchK = kat === "" || b.jenis === kat;

return matchQ && matchK;

});

if (filtered.length === 0) {

tbody.innerHTML = `<tr><td colspan="6" class="py-6 text-center text-slate-400 text-sm">Tidak ada data koleksi ditemukan.</td></tr>`;

return;

}

filtered.forEach(b => {

tbody.innerHTML += `

<td class="py-3.5 px-4 font-semibold text-slate-900">${b.judul}</td>

<td class="py-3.5 px-4 text-slate-600">${b.penulis} <span class="text-xs text-slate-400 block">${b.penerbit || '-'} (${b.tahun || '-'})</span></td>

<td class="py-3.5 px-4"><span class="bg-blue-50 text-blue-700 px-2.5 py-1 rounded-md text-xs font-semibold">${b.kategori}</span></td>

<td class="py-3.5 px-4 text-slate-600 text-xs font-medium">${b.jenis}</td>

</td>

</tr>

});

}

function filterKoleksi() { renderKoleksi(); }

// 3. Pencarian Cepat Live Search

function executeLiveSearch() {

const query = document.getElementById('liveSearchInput').value.toLowerCase();

const grid = document.getElementById('liveSearchResultGrid');

const countEl = document.getElementById('searchResultCount');

grid.innerHTML = '';

const filtered = bukuList.filter(b => b.judul.toLowerCase().includes(query) || b.penulis.toLowerCase().includes(query) || b.kategori.toLowerCase().includes(query));

countEl.innerText = filtered.length + ' Buku';

if (filtered.length === 0) {

grid.innerHTML = `<div class="col-span-full py-10 text-center text-slate-400 bg-white rounded-2xl border border-slate-200">Buku tidak ditemukan dalam pencarian.</div>`;

return;

}

filtered.forEach(b => {

grid.innerHTML += `

<div>

<span class="bg-brand-50 text-brand-700 px-2.5 py-1 rounded-md text-xs font-bold">${b.jenis}</span>

<span class="text-xs text-slate-400 font-medium">${b.tahun || ''}</span>

</div>

<h4 class="font-bold text-slate-900 text-base leading-snug">${b.judul}</h4>

<p class="text-xs text-slate-500 mt-1"><i class="fa-solid fa-pen-nib mr-1"></i> ${b.penulis} • ${b.penerbit || 'Mandiri'}</p>

</div>

<span class="text-xs font-semibold text-slate-700">Kategori: ${b.kategori}</span>

<span class="text-xs font-bold ${b.stok > 0 ? 'text-emerald-600' : 'text-rose-600'}">Stok: ${b.stok}</span>

</div>

});

}

// 4. Anggota Render & Filter

function renderAnggota() {

const query = document.getElementById('searchAnggotaInput').value.toLowerCase();

const role = document.getElementById('filterRoleAnggota').value;

const tbody = document.getElementById('tabelAnggotaBody');

tbody.innerHTML = '';

const filtered = anggotaList.filter(a => {

const matchQ = a.nama.toLowerCase().includes(query) || a.nomorId.toLowerCase().includes(query) || a.telepon.includes(query);

const matchR = role === "" || a.peran === role;

return matchQ && matchR;

});

if (filtered.length === 0) {

tbody.innerHTML = `<tr><td colspan="6" class="py-6 text-center text-slate-400 text-sm">Tidak ada data anggota ditemukan.</td></tr>`;

return;

}

filtered.forEach(a => {

const badgeColor = a.peran === 'Siswa' ? 'bg-blue-50 text-blue-700' : (a.peran === 'Guru' ? 'bg-purple-50 text-purple-700' : 'bg-emerald-50 text-emerald-700');

tbody.innerHTML += `

<td class="py-3.5 px-4 text-slate-600 font-mono text-xs">${a.nomorId}</td>

<td class="py-3.5 px-4"><span class="${badgeColor} px-2.5 py-1 rounded-md text-xs font-semibold">${a.peran}</span></td>

<td class="py-3.5 px-4 text-slate-600 text-xs">${a.kelas}</td>

<td class="py-3.5 px-4 text-slate-600 text-xs"><i class="fa-brands fa-whatsapp text-emerald-600 mr-1"></i>${a.telepon || '-'}</td>

</td>

</tr>

});

}

function filterAnggota() { renderAnggota(); }

// 5. Peminjaman Render

function renderPeminjaman() {

const statusFilter = document.getElementById('filterStatusPinjam').value;

const tbody = document.getElementById('tabelPeminjamanBody');

tbody.innerHTML = '';

const filtered = peminjamanList.filter(p => statusFilter === "" || p.status === statusFilter);

if (filtered.length === 0) {

tbody.innerHTML = `<tr><td colspan="6" class="py-6 text-center text-slate-400 text-sm">Belum ada data transaksi peminjaman.</td></tr>`;

return;

}

filtered.forEach(p => {

const ang = anggotaList.find(a => a.id == p.anggotaId) || { nama: 'Unknown' };

const buk = bukuList.find(b => b.id == p.bukuId) || { judul: 'Buku Dihapus' };

const badge = p.status === 'Dipinjam' ? 'bg-amber-100 text-amber-800' : 'bg-emerald-100 text-emerald-800';

let actionBtn = p.status === 'Dipinjam' ?

`<button onclick="returnBook(${p.id})" class="bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-semibold px-3 py-1.5 rounded-lg shadow-sm">Kembalikan</button>` :

`<span class="text-xs text-slate-400 italic">Selesai</span>`;

tbody.innerHTML += `

<td class="py-3.5 px-4 text-slate-600">${buk.judul}</td>

<td class="py-3.5 px-4 text-slate-500 text-xs">${p.tglPinjam}</td>

<td class="py-3.5 px-4 text-slate-500 text-xs">${p.batasKembali}</td>

<td class="py-3.5 px-4"><span class="px-2.5 py-1 rounded-full text-xs font-semibold ${badge}">${p.status}</span></td>

<td class="py-3.5 px-4 text-center">${actionBtn}</td>

</tr>

});

}

// 6. Digital Repository Render

function renderDigitalRepo() {

const kat = document.getElementById('filterKategoriDigital').value;

const grid = document.getElementById('digitalRepoGrid');

grid.innerHTML = '';

const filtered = digitalList.filter(d => kat === "" || d.kategori === kat);

if (filtered.length === 0) {

grid.innerHTML = `<div class="col-span-full py-10 text-center text-slate-400 bg-white rounded-2xl border border-slate-200">Tidak ada file digital dalam kategori ini.</div>`;

return;

}

filtered.forEach(d => {

grid.innerHTML += `

<div>

<span class="bg-purple-50 text-purple-700 px-2.5 py-1 rounded-md text-xs font-bold">${d.kategori}</span>

</div>

<h4 class="font-bold text-slate-900 text-base leading-snug">${d.judul}</h4>

<p class="text-xs text-slate-500 mt-1">Penyusun: <strong>${d.penyusun}</strong></p>

<p class="text-xs text-slate-600 mt-2 leading-relaxed">${d.deskripsi}</p>

</div>

<span>Unduh Modul / E-Book</span>

</button>

</div>

});

}

function downloadDigital(title) {

alert('Mengunduh file digital: "' + title + '". Dokumen berhasil diunduh.');

}

// 7. Laporan Render

function renderLaporan() {

const fisikCount = bukuList.filter(b => b.jenis === 'Buku Cetak').reduce((acc, cur) => acc + parseInt(cur.stok || 0), 0);

document.getElementById('rekapBukuFisik').innerText = fisikCount;

document.getElementById('rekapTotalPinjam').innerText = peminjamanList.length;

document.getElementById('rekapTotalDigital').innerText = digitalList.length;

const tbody = document.getElementById('tabelRekapBody');

tbody.innerHTML = '';

peminjamanList.forEach((p, idx) => {

const ang = anggotaList.find(a => a.id == p.anggotaId) || { nama: 'Unknown' };

const buk = bukuList.find(b => b.id == p.bukuId) || { judul: 'Buku Dihapus' };

tbody.innerHTML += `

<td class="py-3 px-3 text-slate-600">${buk.judul}</td>

<td class="py-3 px-3 text-slate-500 text-xs">${p.tglPinjam}</td>

<td class="py-3 px-3"><span class="px-2 py-0.5 rounded text-xs font-semibold ${p.status === 'Dipinjam' ? 'bg-amber-100 text-amber-800' : 'bg-emerald-100 text-emerald-800'}">${p.status}</span></td>

</tr>

});

}

// Modal Controllers: Buku

function openBukuModal() {

document.getElementById('bukuForm').reset();

document.getElementById('bukuId').value = '';

document.getElementById('bukuModalTitle').innerText = 'Tambah Koleksi Baru';

document.getElementById('bukuModal').classList.remove('hidden');

}

function closeBukuModal() { document.getElementById('bukuModal').classList.add('hidden'); }

function editBuku(id) {

const b = bukuList.find(item => item.id == id);

if (!b) return;

document.getElementById('bukuId').value = b.id;

document.getElementById('bukuJudul').value = b.judul;

document.getElementById('bukuPenulis').value = b.penulis;

document.getElementById('bukuPenerbit').value = b.penerbit || '';

document.getElementById('bukuJenis').value = b.jenis;

document.getElementById('bukuKategori').value = b.kategori;

document.getElementById('bukuTahun').value = b.tahun || '';

document.getElementById('bukuStok').value = b.stok;

document.getElementById('bukuModalTitle').innerText = 'Edit Koleksi Buku';

document.getElementById('bukuModal').classList.remove('hidden');

}

function saveBuku(e) {

e.preventDefault();

const id = document.getElementById('bukuId').value;

const data = {

id: id ? parseInt(id) : Date.now(),

judul: document.getElementById('bukuJudul').value,

penulis: document.getElementById('bukuPenulis').value,

penerbit: document.getElementById('bukuPenerbit').value,

jenis: document.getElementById('bukuJenis').value,

kategori: document.getElementById('bukuKategori').value,

tahun: parseInt(document.getElementById('bukuTahun').value) || 2024,

stok: parseInt(document.getElementById('bukuStok').value) || 1

};

if (id) {

const idx = bukuList.findIndex(item => item.id == id);

if (idx !== -1) bukuList[idx] = data;

} else {

bukuList.push(data);

}

saveData();

closeBukuModal();

}

function deleteBuku(id) {

if (confirm('Yakin ingin menghapus koleksi ini?')) {

bukuList = bukuList.filter(item => item.id != id);

saveData();

}

// Modal Controllers: Anggota

function openAnggotaModal() {

document.getElementById('anggotaForm').reset();

document.getElementById('anggotaId').value = '';

document.getElementById('anggotaModalTitle').innerText = 'Tambah Anggota Baru';

document.getElementById('anggotaModal').classList.remove('hidden');

}

function closeAnggotaModal() { document.getElementById('anggotaModal').classList.add('hidden'); }

function editAnggota(id) {

const a = anggotaList.find(item => item.id == id);

if (!a) return;

document.getElementById('anggotaId').value = a.id;

document.getElementById('anggotaNama').value = a.nama;

document.getElementById('anggotaNomorId').value = a.nomorId;

document.getElementById('anggotaPeran').value = a.peran;

document.getElementById('anggotaKelas').value = a.kelas;

document.getElementById('anggotaTelepon').value = a.telepon || '';

document.getElementById('anggotaModalTitle').innerText = 'Edit Data Anggota';

document.getElementById('anggotaModal').classList.remove('hidden');

}

function saveAnggota(e) {

e.preventDefault();

const id = document.getElementById('anggotaId').value;

const data = {

id: id ? parseInt(id) : Date.now(),

nama: document.getElementById('anggotaNama').value,

nomorId: document.getElementById('anggotaNomorId').value,

peran: document.getElementById('anggotaPeran').value,

kelas: document.getElementById('anggotaKelas').value,

telepon: document.getElementById('anggotaTelepon').value

};

if (id) {

const idx = anggotaList.findIndex(item => item.id == id);

if (idx !== -1) anggotaList[idx] = data;

} else {

anggotaList.push(data);

}

saveData();

closeAnggotaModal();

}

function deleteAnggota(id) {

if (confirm('Yakin ingin menghapus anggota ini?')) {

anggotaList = anggotaList.filter(item => item.id != id);

saveData();

}

// Modal Controllers: Peminjaman

function openPinjamModal() {

// Populate dropdown anggota

const selAnggota = document.getElementById('pinjamAnggotaId');

selAnggota.innerHTML = '';

anggotaList.forEach(a => {

selAnggota.innerHTML += `<option value="${a.id}">${a.nama} (${a.peran} - ${a.kelas})</option>`;

});

// Populate dropdown buku fisik

const selBuku = document.getElementById('pinjamBukuId');

selBuku.innerHTML = '';

bukuList.filter(b => b.jenis === 'Buku Cetak').forEach(b => {

selBuku.innerHTML += `<option value="${b.id}">${b.judul} (Stok: ${b.stok})</option>`;

});

// Set default dates

const today = new Date().toISOString().split('T')[0];

const nextWeek = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];

document.getElementById('pinjamTanggal').value = today;

document.getElementById('pinjamBatas').value = nextWeek;

document.getElementById('pinjamModal').classList.remove('hidden');

}

function closePinjamModal() { document.getElementById('pinjamModal').classList.add('hidden'); }

function savePinjaman(e) {

e.preventDefault();

const data = {

id: Date.now(),

anggotaId: parseInt(document.getElementById('pinjamAnggotaId').value),

bukuId: parseInt(document.getElementById('pinjamBukuId').value),

tglPinjam: document.getElementById('pinjamTanggal').value,

batasKembali: document.getElementById('pinjamBatas').value,

status: 'Dipinjam'

};

peminjamanList.push(data);

saveData();

closePinjamModal();

}

function returnBook(id) {

const p = peminjamanList.find(item => item.id == id);

if (p) {

p.status = 'Dikembalikan';

saveData();

}

// Modal Controllers: Digital

function openDigitalModal() {

document.getElementById('digitalForm').reset();

document.getElementById('digitalModal').classList.remove('hidden');

}

function closeDigitalModal() { document.getElementById('digitalModal').classList.add('hidden'); }

function saveDigital(e) {

e.preventDefault();

const data = {

id: Date.now(),

judul: document.getElementById('digJudul').value,

kategori: document.getElementById('digKategori').value,

penyusun: document.getElementById('digPenyusun').value,

deskripsi: document.getElementById('digDeskripsi').value,

link: '#'

};

digitalList.push(data);

saveData();

closeDigitalModal();

}

// Reset Data

function resetAllData() {

if (confirm('Reset seluruh data perpustakaan ke setelan referensi awal?')) {

localStorage.clear();

bukuList = defaultBuku;

anggotaList = defaultAnggota;

peminjamanList = defaultPeminjaman;

digitalList = defaultDigital;

saveData();

alert('Data referensi berhasil dimuat ulang.');

}

// Initial Load on Window Startup

window.onload = function() {

refreshAllUI();

executeLiveSearch();

};

</script>

</body>

</html>

E-PERPUS

Post a Comment

1 Comments

Popular Posts

PJJ BAB: ALGORITMA DAN PEMROGRAMAN

MATERI KELISTRIKAN SMKN1 JAKARTA

“BELAJAR ROBOTIK DARI NOL: Transformasi Pembelajaran SMK Berbasis Teknologi, Kreativitas, dan Produk Siswa”

Facebook

Recent Posts

Recent in Recipes

Menu Footer Widget

E-PERPUS

Post a Comment

1 Comments

Social Plugin

Popular Posts

PJJ BAB: ALGORITMA DAN PEMROGRAMAN

MATERI KELISTRIKAN SMKN1 JAKARTA

“BELAJAR ROBOTIK DARI NOL: Transformasi Pembelajaran SMK Berbasis Teknologi, Kreativitas, dan Produk Siswa”

Facebook

Recent Posts

Recent in Recipes

Menu Footer Widget