khusnul kartika wijaya

DASHBOARD ADMIN<div style="text-align: left;"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dashboard Admin - Presensi Ngajum 2</title> <style> *{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',sans-serif} body{background:#f0f2f5;min-height:100vh} .timer-bar{background:#ff6b6b;color:white;padding:10px;text-align:center;font-weight:bold;display:none;position:sticky;top:0;z-index:999} .timer-bar.active{display:block;animation:pulse 1s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.6}} .header{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);color:white;padding:15px 20px} .header-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px} .header h1{font-size:20px} .header-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .timer-info{font-size:12px;background:rgba(255,255,255,0.2);padding:4px 12px;border-radius:20px} .logout-btn{background:rgba(255,255,255,0.2);border:1px solid white;color:white;padding:6px 16px;border-radius:20px;cursor:pointer;font-weight:bold;font-size:13px} .logout-btn:hover{background:white;color:#1a1a2e} .container{max-width:1200px;margin:15px auto;padding:0 15px} .card{background:white;border-radius:12px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,0.08);margin-bottom:15px} .card h2{font-size:18px;color:#333;margin-bottom:12px;border-bottom:2px solid #f0f2f5;padding-bottom:8px} .tabs{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap} .tab-btn{padding:10px 18px;border:none;border-radius:8px;background:white;color:#333;font-weight:bold;cursor:pointer;box-shadow:0 2px 5px rgba(0,0,0,0.08);font-size:13px} .tab-btn.active{background:#0f3460;color:white} .tab-content{display:none} .tab-content.active{display:block} .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:15px;margin-bottom:20px} .stat-item{background:white;border-radius:12px;padding:20px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,0.08)} .stat-item .number{font-size:32px;font-weight:700;color:#0f3460} .stat-item .label{font-size:14px;color:#666;margin-top:5px} .stat-item .icon{font-size:36px;display:block;margin-bottom:5px} .table-container{overflow-x:auto} table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px} table th{background:#f8f9fa;padding:10px;text-align:left;border-bottom:2px solid #dee2e6;font-weight:600} table td{padding:10px;border-bottom:1px solid #dee2e6} table tr:hover{background:#f8f9fa} table tr.selected{background:#dbeafe} .btn{padding:8px 16px;border:none;border-radius:6px;font-weight:bold;cursor:pointer;font-size:13px} .btn-primary{background:#0f3460;color:white} .btn-primary:hover{background:#1a1a2e} .btn-success{background:#2ecc71;color:white} .btn-success:hover{background:#27ae60} .btn-danger{background:#e74c3c;color:white} .btn-danger:hover{background:#c0392b} .btn-warning{background:#f39c12;color:white} .btn-warning:hover{background:#d68910} .btn-sm{padding:4px 10px;font-size:12px} .btn-info{background:#17a2b8;color:white} .btn-info:hover{background:#138496} .form-group{margin-bottom:15px} .form-group label{display:block;margin-bottom:5px;color:#333;font-weight:500;font-size:13px} .form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:8px;font-size:14px} .form-group input:focus,.form-group select:focus{outline:none;border-color:#0f3460} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px} .upload-area{border:2px dashed #ddd;padding:30px;text-align:center;border-radius:12px;cursor:pointer;transition:all 0.3s} .upload-area:hover{border-color:#0f3460;background:#f8fafc} .upload-area.dragover{border-color:#2ecc71;background:#f0fdf4} .badge{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:bold;display:inline-block} .badge-success{background:#d4edda;color:#155724} .badge-danger{background:#f8d7da;color:#721c24} .badge-warning{background:#fff3cd;color:#856404} .badge-info{background:#cce5ff;color:#004085} @media(max-width:768px){ .header-content{flex-direction:column;text-align:center} .header-right{justify-content:center} .tabs{flex-direction:column} .tab-btn{width:100%} .stats-grid{grid-template-columns:1fr 1fr} .form-row{grid-template-columns:1fr} } </style> </head> <body> <div id="timerBar" class="timer-bar"> ⚠️ Session akan berakhir dalam 60 detik. Lakukan aktivitas! </div> <div class="header"> <div class="header-content"> <h1>🛡️ Panel Admin</h1> <div class="header-right"> ⏱️ 10:00 Loading... <button class="logout-btn" onclick="logout()">🚪 Logout</button> </div> </div> </div> <div class="container"> <div class="tabs"> <button class="tab-btn active" onclick="switchTab('dashboard')">📊 Dashboard</button> <button class="tab-btn" onclick="switchTab('siswa')">👨‍🎓 Kelola Siswa</button> <button class="tab-btn" onclick="switchTab('walas')">👨‍🏫 Kelola Wali Kelas</button> <button class="tab-btn" onclick="switchTab('kelas')">📚 Kelola Kelas</button> <button class="tab-btn" onclick="switchTab('agenda')">📋 Agenda</button> <button class="tab-btn" onclick="switchTab('libur')">📅 Kelola Libur</button> <button class="tab-btn" onclick="switchTab('jam')">⏰ Jam Masuk</button> </div>  <div id="tab-dashboard" class="tab-content active"> <div class="stats-grid" id="statsContainer"> <div class="stat-item">👨‍🎓0Total Siswa</div> <div class="stat-item">👨‍🏫0Total Wali Kelas</div> <div class="stat-item">📚0Total Kelas</div> <div class="stat-item">✅0Presensi Hari Ini</div> </div> <div class="card"><h2>📊 Aktivitas Terbaru</h2><div id="aktivitasContainer">Memuat data...</div></div> </div>  <div id="tab-siswa" class="tab-content"> <div class="card"> <h2>👨‍🎓 Data Siswa</h2> <div style="display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;"> <button class="btn btn-success" onclick="showTambahSiswa()">➕ Tambah Siswa</button> <button class="btn btn-info" onclick="startUploadCSV()">📤 Upload CSV</button> <button class="btn btn-danger" onclick="hapusSiswaTerpilih()">🗑️ Hapus Terpilih</button> <button class="btn btn-warning" onclick="hapusSiswaByKelas()">📚 Hapus Per Kelas</button> <button class="btn btn-danger" onclick="hapusSiswaByAngkatan()">🎓 Hapus Per Angkatan</button> </div>  <div id="uploadCSVSiswa" style="display:none;background:#f8f9fa;padding:15px;border-radius:8px;margin-bottom:15px;"> <h4>📤 Upload CSV Siswa</h4> Format: NIPD,NISN,Nama,Kelas,JK,Agama <button class="btn btn-info btn-sm" onclick="downloadTemplateSiswa()" style="margin-bottom:10px;">📥 Download Template CSV</button> <div class="upload-area" onclick="document.getElementById('fileInputSiswa').click()"> 📁 Klik atau drag file CSV di sini <input type="file" id="fileInputSiswa" accept=".csv" style="display:none" onchange="uploadCSVSiswa(event)"> </div> <div id="uploadStatusSiswa" style="margin-top:10px;"></div> <button class="btn btn-danger" onclick="closeUploadCSV()">✖ Tutup</button> </div> <div id="formTambahSiswa" style="display:none;background:#f8f9fa;padding:15px;border-radius:8px;margin-bottom:15px;"> <h4>Tambah Siswa Baru</h4> <div class="form-row"> <div class="form-group"><label>NIPD</label><input type="text" id="tNipd" placeholder="NIPD"></div> <div class="form-group"><label>NISN</label><input type="text" id="tNisn" placeholder="NISN"></div> </div> <div class="form-row"> <div class="form-group"><label>Nama</label><input type="text" id="tNama" placeholder="Nama Lengkap"></div> <div class="form-group"><label>Kelas</label><input type="text" id="tKelas" placeholder="Contoh: 8A"></div> </div> <div class="form-row"> <div class="form-group"><label>JK</label><select id="tJk"><option value="L">Laki-laki</option><option value="P">Perempuan</option></select></div> <div class="form-group"><label>Agama</label><input type="text" id="tAgama" placeholder="Agama"></div> </div> <button class="btn btn-success" onclick="tambahSiswa()">💾 Simpan</button> <button class="btn btn-danger" onclick="document.getElementById('formTambahSiswa').style.display='none'">✖ Batal</button> <div id="msgSiswa" style="margin-top:10px;"></div> </div> <div class="table-container"> <table> <thead><tr><th><input type="checkbox" id="selectAllSiswa" onchange="toggleAllSiswa()"></th><th>NIPD</th><th>NISN</th><th>Nama</th><th>Kelas</th><th>JK</th><th>Agama</th><th>Aksi</th></tr></thead> <tbody id="siswaBody"><tr><td colspan="8" style="text-align:center;color:#888;padding:20px;">Loading...</td></tr></tbody> </table> </div> </div> </div>  <div id="tab-walas" class="tab-content"> <div class="card"> <h2>👨‍🏫 Data Wali Kelas</h2> <div style="display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;"> <button class="btn btn-success" onclick="showTambahWalas()">➕ Tambah Wali Kelas</button> <button class="btn btn-info" onclick="startUploadWalas()">📤 Upload CSV</button> </div>  <div id="uploadCSVWalas" style="display:none;background:#f8f9fa;padding:15px;border-radius:8px;margin-bottom:15px;"> <h4>📤 Upload CSV Wali Kelas</h4> Format: Username,Password,Nama,Kelas <button class="btn btn-info btn-sm" onclick="downloadTemplateWalas()" style="margin-bottom:10px;">📥 Download Template CSV</button> <div class="upload-area" onclick="document.getElementById('fileInputWalas').click()"> 📁 Klik atau drag file CSV di sini <input type="file" id="fileInputWalas" accept=".csv" style="display:none" onchange="uploadCSVWalas(event)"> </div> <div id="uploadStatusWalas" style="margin-top:10px;"></div> <button class="btn btn-danger" onclick="closeUploadWalas()">✖ Tutup</button> </div> <div id="formTambahWalas" style="display:none;background:#f8f9fa;padding:15px;border-radius:8px;margin-bottom:15px;"> <h4>Tambah Wali Kelas Baru</h4> <div class="form-row"> <div class="form-group"><label>Username (NIP)</label><input type="text" id="wUsername" placeholder="NIP"></div> <div class="form-group"><label>Password</label><input type="text" id="wPassword" placeholder="Password"></div> </div> <div class="form-row"> <div class="form-group"><label>Nama Wali Kelas</label><input type="text" id="wNama" placeholder="Nama Lengkap"></div> <div class="form-group"><label>Kelas</label><input type="text" id="wKelas" placeholder="Contoh: 8A"></div> </div> <button class="btn btn-success" onclick="tambahWalas()">💾 Simpan</button> <button class="btn btn-danger" onclick="document.getElementById('formTambahWalas').style.display='none'">✖ Batal</button> <div id="msgWalas" style="margin-top:10px;"></div> </div> <div class="table-container"> <table> <thead><tr><th>Username</th><th>Nama</th><th>Kelas</th><th>Aksi</th></tr></thead> <tbody id="walasBody"><tr><td colspan="4" style="text-align:center;color:#888;padding:20px;">Loading...</td></tr></tbody> </table> </div> </div> </div>  <div id="tab-kelas" class="tab-content"> <div class="card"> <h2>📚 Data Kelas</h2> <div style="display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;"> <button class="btn btn-success" onclick="showTambahKelas()">➕ Tambah Kelas</button> <button class="btn btn-danger" onclick="document.getElementById('formHapusKelas').style.display='block'">🗑️ Hapus Kelas</button> </div> <div id="formTambahKelas" style="display:none;background:#f8f9fa;padding:15px;border-radius:8px;margin-bottom:15px;"> <h4>Tambah Kelas Baru</h4> <div class="form-group"><label>Nama Kelas</label><input type="text" id="tKelasBaru" placeholder="Contoh: 9A"></div> <button class="btn btn-success" onclick="tambahKelas()">💾 Simpan</button> <button class="btn btn-danger" onclick="document.getElementById('formTambahKelas').style.display='none'">✖ Batal</button> <div id="msgKelas" style="margin-top:10px;"></div> </div> <div id="formHapusKelas" style="display:none;background:#f8f9fa;padding:15px;border-radius:8px;margin-bottom:15px;"> <h4>🗑️ Hapus Kelas</h4> <div class="form-group"><label>Pilih Kelas</label><select id="hapusKelasSelect"><option value="">-- Pilih Kelas --</option></select></div> <button class="btn btn-danger" onclick="hapusKelasSubmit()">🗑️ Hapus Kelas</button> <button class="btn btn-secondary" onclick="document.getElementById('formHapusKelas').style.display='none'">✖ Batal</button> <div id="msgHapusKelas" style="margin-top:10px;"></div> </div> <div class="table-container"> <table> <thead><tr><th>No</th><th>Kelas</th><th>Jumlah Siswa</th><th>Wali Kelas</th></tr></thead> <tbody id="kelasBody"><tr><td colspan="4" style="text-align:center;color:#888;padding:20px;">Loading...</td></tr></tbody> </table> </div> </div> </div>  <div id="tab-agenda" class="tab-content"> <div class="card"> <h2>📋 Agenda Sekolah</h2> <button class="btn btn-success" onclick="showTambahAgenda()" style="margin-bottom:10px;">➕ Tambah Agenda</button> <div id="formTambahAgenda" style="display:none;background:#f8f9fa;padding:15px;border-radius:8px;margin-bottom:15px;"> <h4>Tambah Agenda Baru</h4> <div class="form-group"><label>Hari</label><input type="text" id="aHari" placeholder="Contoh: Senin"></div> <div class="form-group"><label>Tanggal</label><input type="date" id="aTanggal"></div> <div class="form-group"><label>Agenda</label><textarea id="aAgenda" rows="3" placeholder="Isi agenda..." style="width:100%;padding:10px;border:2px solid #ddd;border-radius:8px;"></textarea></div> <button class="btn btn-success" onclick="tambahAgenda()">💾 Simpan</button> <button class="btn btn-danger" onclick="document.getElementById('formTambahAgenda').style.display='none'">✖ Batal</button> <div id="msgAgenda" style="margin-top:10px;"></div> </div> <div class="table-container"> <table> <thead><tr><th>Hari</th><th>Tanggal</th><th>Agenda</th><th>Aksi</th></tr></thead> <tbody id="agendaBody"><tr><td colspan="4" style="text-align:center;color:#888;padding:20px;">Loading...</td></tr></tbody> </table> </div> </div> </div>  <div id="tab-libur" class="tab-content"> <div class="card"> <h2>📅 Kelola Hari Libur</h2> Tanggal libur yang diinput akan otomatis mengubah status siswa menjadi "Libur" pada rekap kehadiran. <div style="background:#f8f9fa;padding:15px;border-radius:8px;margin-bottom:15px;"> <h4>➕ Tambah Hari Libur</h4> <form id="formLibur" onsubmit="tambahLibur(event)" style="display:flex;flex-wrap:wrap;gap:10px;align-items:end;"> <div class="form-group" style="margin-bottom:0;flex:1;min-width:150px;"> <label>Tanggal Awal</label> <input type="date" id="liburTglAwal" required> </div> <div class="form-group" style="margin-bottom:0;flex:1;min-width:150px;"> <label>Tanggal Akhir</label> <input type="date" id="liburTglAkhir" required> </div> <div class="form-group" style="margin-bottom:0;flex:1.5;min-width:180px;"> <label>Keterangan</label> <input type="text" id="liburKeterangan" placeholder="Misal: Hari Kemerdekaan"> </div> <button type="submit" class="btn btn-success" style="margin-bottom:2px;">➕ Tambah</button> </form> <div id="msgLibur" style="margin-top:10px;"></div> </div> <div class="table-container"> <table> <thead> <tr><th>No</th><th>Tanggal</th><th>Keterangan</th><th>Aksi</th></tr> </thead> <tbody id="liburBody"> <tr><td colspan="4" style="text-align:center;color:#888;padding:20px;">Loading...</td></tr> </tbody> </table> </div> <div id="liburTotal" style="text-align:right;margin-top:10px;font-size:13px;color:#888;"></div> </div> </div>  <div id="tab-jam" class="tab-content"> <div class="card"> <h2>⏰ Pengaturan Jam Masuk Sekolah</h2> Atur jam masuk untuk setiap hari (Senin - Jumat). Jadwal ini akan berlaku terus sampai diubah. <div style="background:#e8f4fd;padding:12px 15px;border-radius:8px;border-left:4px solid #3498db;margin-bottom:15px;"> ℹ️ Info: Jika tidak diatur, jam default 07:00 akan digunakan. </div> <form id="formJamSekolah" onsubmit="simpanJamSekolah(event)"> <div class="table-container"> <table> <thead> <tr> <th>Hari</th> <th>Jam Masuk</th> <th>Keterangan</th> </tr> </thead> <tbody id="jamSekolahBody"> <tr><td colspan="3" style="text-align:center;color:#888;padding:20px;">Loading...</td></tr> </tbody> </table> </div> <div style="margin-top:15px;display:flex;gap:10px;flex-wrap:wrap;"> <button type="submit" class="btn btn-success">💾 Simpan Jadwal</button> <button type="button" class="btn btn-warning" onclick="resetJamSekolah()">🔄 Reset ke Default</button> </div> <div id="msgJamSekolah" style="margin-top:10px;"></div> </form> </div> </div> </div> <script> // ==================== KONFIGURASI ==================== const API_URL = 'https://script.google.com/macros/s/AKfycbzBALhodFWIvMH1KGpBO-r34g4sTKa4tz5zWtN_8S_OyJ3U_eh3QYZmenXSuiSxXE_czA/exec'; const INACTIVITY_LIMIT = 600; let adminData = null; let inactivityTimer = null, countdownTimer = null, warningTimer = null, isWarningShown = false; let selectedSiswa = new Set(); // ==================== POLLING SISWA ==================== let pollingInterval = null; let isPollingActive = false; function startPolling() {     if (isPollingActive) return;     isPollingActive = true;     pollingInterval = setInterval(function() {         var tabSiswa = document.getElementById('tab-siswa');         var uploadSection = document.getElementById('uploadCSVSiswa');         if (tabSiswa && tabSiswa.classList.contains('active') &&              uploadSection && uploadSection.style.display === 'block') {             loadSiswa();             loadDashboard();         }     }, 1000); } function stopPolling() {     if (pollingInterval) {         clearInterval(pollingInterval);         pollingInterval = null;         isPollingActive = false;     } } function startUploadCSV() {     document.getElementById('uploadCSVSiswa').style.display = 'block';     startPolling(); } function closeUploadCSV() {     document.getElementById('uploadCSVSiswa').style.display = 'none';     stopPolling(); } // ==================== POLLING WALAS ==================== let pollingWalasInterval = null; let isPollingWalasActive = false; function startPollingWalas() {     if (isPollingWalasActive) return;     isPollingWalasActive = true;     pollingWalasInterval = setInterval(function() {         var tabWalas = document.getElementById('tab-walas');         var uploadSection = document.getElementById('uploadCSVWalas');         if (tabWalas && tabWalas.classList.contains('active') &&              uploadSection && uploadSection.style.display === 'block') {             loadWalas();             loadDashboard();         }     }, 1000); } function stopPollingWalas() {     if (pollingWalasInterval) {         clearInterval(pollingWalasInterval);         pollingWalasInterval = null;         isPollingWalasActive = false;     } } function startUploadWalas() {     document.getElementById('uploadCSVWalas').style.display = 'block';     startPollingWalas(); } function closeUploadWalas() {     document.getElementById('uploadCSVWalas').style.display = 'none';     stopPollingWalas(); } // ==================== TIMER ==================== function resetTimer() { clearTimeout(inactivityTimer); clearInterval(countdownTimer); clearInterval(warningTimer); document.getElementById('timerBar').classList.remove('active'); isWarningShown = false; updateTimerDisplay(INACTIVITY_LIMIT); inactivityTimer = setTimeout(showWarning, INACTIVITY_LIMIT * 1000); } function updateTimerDisplay(s){var m=Math.floor(s/60),d=s%60;document.getElementById('timerInfo').textContent='⏱️ '+m+':'+String(d).padStart(2,'0');} function showWarning(){if(isWarningShown)return;isWarningShown=true;var c=60;document.getElementById('timerBar').classList.add('active');document.getElementById('timerCount').textContent=c;countdownTimer=setInterval(function(){c--;document.getElementById('timerCount').textContent=c;updateTimerDisplay(c);if(c<=0){clearInterval(countdownTimer);clearInterval(warningTimer);logout();}},1000);} function handleActivity(){if(isWarningShown){clearInterval(countdownTimer);clearInterval(warningTimer);document.getElementById('timerBar').classList.remove('active');isWarningShown=false;}resetTimer();} document.addEventListener('click',handleActivity);document.addEventListener('keypress',handleActivity);document.addEventListener('touchstart',handleActivity);document.addEventListener('scroll',handleActivity);document.addEventListener('mousemove',handleActivity); function logout(){clearTimeout(inactivityTimer);clearInterval(countdownTimer);clearInterval(warningTimer);localStorage.removeItem('adminData');localStorage.removeItem('userRole');window.location.href='/p/login-admin.html';} // ==================== TAB ==================== function switchTab(tab){ document.querySelectorAll('.tab-content').forEach(e=>e.classList.remove('active')); document.querySelectorAll('.tab-btn').forEach(e=>e.classList.remove('active')); document.getElementById('tab-'+tab).classList.add('active'); var btns=document.querySelectorAll('.tab-btn'); var map={dashboard:0,siswa:1,walas:2,kelas:3,agenda:4,libur:5,jam:6}; if(map[tab]!==undefined&&btns[map[tab]])btns[map[tab]].classList.add('active'); if(tab==='dashboard')loadDashboard(); if(tab==='siswa')loadSiswa(); if(tab==='walas')loadWalas(); if(tab==='kelas')loadKelas(); if(tab==='agenda')loadAgenda(); if(tab==='libur')loadLibur(); if(tab==='jam')loadJamSekolah(); } // ==================== INIT ==================== document.addEventListener('DOMContentLoaded',function(){ adminData=JSON.parse(localStorage.getItem('adminData')); if(!adminData){window.location.href='/p/login-admin.html';return;} document.getElementById('adminName').textContent='🛡️ '+adminData.nama_admin; loadDashboard();resetTimer(); }); // ==================== DASHBOARD ==================== async function loadDashboard(){ try{ var r1=await fetch(API_URL+'?action=getTotalSiswa');var j1=await r1.json();if(j1.status==='success')document.getElementById('totalSiswa').textContent=j1.data; var r2=await fetch(API_URL+'?action=getTotalWalas');var j2=await r2.json();if(j2.status==='success')document.getElementById('totalWalas').textContent=j2.data; var r3=await fetch(API_URL+'?action=getPresensiHariIni');var j3=await r3.json();if(j3.status==='success')document.getElementById('presensiHariIni').textContent=j3.data; var r4=await fetch(API_URL+'?action=getDaftarKelas');var j4=await r4.json();if(j4.status==='success')document.getElementById('totalKelas').textContent=j4.data.length; document.getElementById('aktivitasContainer').innerHTML='✅ Dashboard siap digunakan'; }catch(e){console.error(e);} } // ==================== LOAD SISWA ==================== async function loadSiswa(){ try{ var r=await fetch(API_URL+'?action=getAllSiswa');var j=await r.json(); var tbody=document.getElementById('siswaBody'); if(j.status==='success'&&j.data.length>0){ var html='';j.data.forEach(function(s){ var checked=selectedSiswa.has(s.nipd)?'checked':''; html+='<tr><td><input type="checkbox" class="siswaCheck" value="'+s.nipd+'" '+checked+' onchange="toggleSiswa(this)"></td><td>'+s.nipd+'</td><td>'+s.nisn+'</td><td>'+s.nama+'</td><td>'+s.kelas+'</td><td>'+s.jk+'</td><td>'+s.agama+'</td><td><button class="btn btn-warning btn-sm" onclick="editSiswa(\''+s.nipd+'\')">✏️</button> <button class="btn btn-danger btn-sm" onclick="hapusSiswa(\''+s.nipd+'\')">🗑️</button></td></tr>'; }); tbody.innerHTML=html; }else{tbody.innerHTML='<tr><td colspan="8" style="text-align:center;color:#888;padding:20px;">Tidak ada data siswa</td></tr>';} }catch(e){console.error(e);} } // ==================== SELECT ALL SISWA ==================== function toggleAllSiswa(){var c=document.getElementById('selectAllSiswa').checked;document.querySelectorAll('.siswaCheck').forEach(function(e){e.checked=c;toggleSiswa(e);});} function toggleSiswa(el){if(el.checked){selectedSiswa.add(el.value);}else{selectedSiswa.delete(el.value);}} // ==================== TAMBAH SISWA ==================== function showTambahSiswa(){document.getElementById('formTambahSiswa').style.display='block';} async function tambahSiswa(){ var nipd=document.getElementById('tNipd').value.trim(),nisn=document.getElementById('tNisn').value.trim(),nama=document.getElementById('tNama').value.trim(),kelas=document.getElementById('tKelas').value.trim(),jk=document.getElementById('tJk').value,agama=document.getElementById('tAgama').value.trim(),msg=document.getElementById('msgSiswa'); if(!nipd||!nisn||!nama||!kelas||!agama){msg.innerHTML='⚠️ Semua field wajib diisi!';msg.style.color='#e74c3c';return;} try{ var r=await fetch(API_URL+'?action=tambahSiswa&nipd='+nipd+'&nisn='+nisn+'&nama='+encodeURIComponent(nama)+'&kelas='+kelas+'&jk='+jk+'&agama='+encodeURIComponent(agama)); var j=await r.json(); if(j.status==='success'){msg.innerHTML='✅ '+j.message;msg.style.color='#27ae60';document.getElementById('tNipd').value='';document.getElementById('tNisn').value='';document.getElementById('tNama').value='';document.getElementById('tKelas').value='';document.getElementById('tAgama').value='';loadSiswa();loadDashboard();setTimeout(function(){msg.innerHTML='';},3000);} else{msg.innerHTML='❌ '+j.message;msg.style.color='#e74c3c';} }catch(e){msg.innerHTML='❌ '+e.message;msg.style.color='#e74c3c';} } // ==================== UPLOAD CSV SISWA ==================== async function uploadCSVSiswa(e) {     var file = e.target.files[0];     if (!file) return;     var msg = document.getElementById('uploadStatusSiswa');     msg.innerHTML = '⏳ Membaca file...';     var reader = new FileReader();     reader.onload = async function(ev) {         var text = ev.target.result;         var lines = text.split('\n');         var data = [];         msg.innerHTML = '⏳ Memproses ' + lines.length + ' baris...';         for (var i = 0; i < lines.length; i++) {             var cols = lines[i].split(',');             if (cols.length < 6) continue;             var nipd = cols[0].trim();             var nisn = cols[1].trim();             var nama = cols[2].trim();             var kelas = cols[3].trim();             var jk = cols[4].trim();             var agama = cols[5].trim();             if (!nipd || !nisn || !nama || !kelas || !agama) continue;             data.push({ nipd: nipd, nisn: nisn, nama: nama, kelas: kelas, jk: jk || 'L', agama: agama });         }         if (data.length === 0) { msg.innerHTML = '⚠️ Tidak ada data valid!'; return; }         msg.innerHTML = '⏳ Mengupload ' + data.length + ' siswa...';         try {             var r = await fetch(API_URL + '?action=uploadCSVSiswaBatch&data=' + encodeURIComponent(JSON.stringify(data)));             var j = await r.json();             if (j.status === 'success') {                 msg.innerHTML = '✅ ' + j.message;                 loadSiswa(); loadDashboard();                 setTimeout(function() { document.getElementById('uploadCSVSiswa').style.display = 'none'; stopPolling(); }, 3000);             } else {                 msg.innerHTML = '❌ ' + j.message;             }         } catch(err) { msg.innerHTML = '❌ ' + err.message; }     };     reader.readAsText(file); } // ==================== DOWNLOAD TEMPLATE CSV SISWA ==================== function downloadTemplateSiswa() {     var content = 'NIPD,NISN,Nama,Kelas,JK,Agama\n';     content += '1001,12345,Ahmad,8A,L,Islam\n';     content += '1002,12346,Siti,8A,P,Islam\n';     content += '1003,12347,Budi,8B,L,Kristen\n';     content += '1004,12348,Ani,8B,P,Buddha\n';     var blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });     var link = document.createElement('a');     link.href = URL.createObjectURL(blob);     link.download = 'template_upload_siswa.csv';     document.body.appendChild(link); link.click(); document.body.removeChild(link);     URL.revokeObjectURL(link.href); } // ==================== DOWNLOAD TEMPLATE CSV WALAS ==================== function downloadTemplateWalas() {     var content = 'Username,Password,Nama,Kelas\n';     content += '1984001,123456,Budi Santoso,8A\n';     content += '1984002,123456,Ani Rahayu,8B\n';     content += '1984003,123456,Cahyo,8C\n';     var blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });     var link = document.createElement('a');     link.href = URL.createObjectURL(blob);     link.download = 'template_upload_wali_kelas.csv';     document.body.appendChild(link); link.click(); document.body.removeChild(link);     URL.revokeObjectURL(link.href); } // ==================== UPLOAD CSV WALAS ==================== async function uploadCSVWalas(e) {     var file = e.target.files[0];     if (!file) return;          var msg = document.getElementById('uploadStatusWalas');     msg.innerHTML = '⏳ Membaca file...';          var reader = new FileReader();     reader.onload = async function(ev) {         var text = ev.target.result;         var lines = text.split('\n');         var data = [];                  msg.innerHTML = '⏳ Memproses ' + lines.length + ' baris...';                  for (var i = 0; i < lines.length; i++) {             var cols = lines[i].split(',');             if (cols.length < 4) continue;             var username = cols[0].trim();             var password = cols[1].trim();             var nama = cols[2].trim();             var kelas = cols[3].trim();             if (!username || !password || !nama || !kelas) continue;                          data.push({                 username: username,                 password: password,                 nama: nama,                 kelas: kelas             });         }                  if (data.length === 0) {             msg.innerHTML = '⚠️ Tidak ada data valid!';             return;         }                  msg.innerHTML = '⏳ Mengupload ' + data.length + ' wali kelas...';                  try {             var r = await fetch(API_URL + '?action=uploadCSVWalasBatch&data=' + encodeURIComponent(JSON.stringify(data)));             var j = await r.json();                          if (j.status === 'success') {                 msg.innerHTML = '✅ ' + j.message;                 loadWalas();                 loadDashboard();                                  setTimeout(function() {                     document.getElementById('uploadCSVWalas').style.display = 'none';                     stopPollingWalas();                 }, 3000);             } else {                 msg.innerHTML = '❌ ' + j.message;             }         } catch(err) {             msg.innerHTML = '❌ ' + err.message;         }     };     reader.readAsText(file); } // ==================== HAPUS SISWA ==================== async function hapusSiswa(nipd){if(!confirm('Yakin hapus siswa '+nipd+'?'))return;try{var r=await fetch(API_URL+'?action=hapusSiswa&nipd='+nipd);var j=await r.json();alert(j.message);loadSiswa();loadDashboard();}catch(e){alert(e.message);}} async function hapusSiswaTerpilih(){ if(selectedSiswa.size===0){alert('⚠️ Pilih siswa terlebih dahulu!');return;} if(!confirm('Yakin hapus '+selectedSiswa.size+' siswa?'))return; var arr=Array.from(selectedSiswa);var success=0,failed=0; for(var i=0;i<arr.length;i++){try{var r=await fetch(API_URL+'?action=hapusSiswa&nipd='+arr[i]);var j=await r.json();if(j.status==='success')success++;else failed++;}catch(e){failed++;}} alert('✅ Berhasil hapus '+success+' siswa, gagal '+failed);selectedSiswa.clear();document.getElementById('selectAllSiswa').checked=false;loadSiswa();loadDashboard(); } async function hapusSiswaByKelas(){ var kelas=prompt('Masukkan kelas yang akan dihapus (contoh: 8A):');if(!kelas)return;if(!confirm('Yakin hapus semua siswa kelas '+kelas+'?'))return; try{var r=await fetch(API_URL+'?action=hapusSiswaByKelas&kelas='+kelas);var j=await r.json();alert(j.message);loadSiswa();loadDashboard();}catch(e){alert(e.message);} } async function hapusSiswaByAngkatan(){ var angkatan=prompt('Masukkan angkatan yang akan dihapus (contoh: 8):');if(!angkatan)return;if(!confirm('Yakin hapus semua siswa angkatan '+angkatan+'?'))return; try{var r=await fetch(API_URL+'?action=hapusSiswaByAngkatan&angkatan='+angkatan);var j=await r.json();alert(j.message);loadSiswa();loadDashboard();}catch(e){alert(e.message);} } function editSiswa(nipd){alert('✏️ Edit siswa '+nipd+' (fitur menyusul)');} // ==================== LOAD WALAS ==================== async function loadWalas(){ try{ var r=await fetch(API_URL+'?action=getAllWalas');var j=await r.json(); var tbody=document.getElementById('walasBody'); if(j.status==='success'&&j.data.length>0){ var html='';j.data.forEach(function(w){ html+='<tr><td>'+w.username+'</td><td>'+w.nama_walas+'</td><td>'+w.kelas+'</td><td><button class="btn btn-warning btn-sm" onclick="editWalas(\''+w.username+'\')">✏️</button> <button class="btn btn-danger btn-sm" onclick="hapusWalas(\''+w.username+'\')">🗑️</button></td></tr>'; }); tbody.innerHTML=html; }else{tbody.innerHTML='<tr><td colspan="4" style="text-align:center;color:#888;padding:20px;">Tidak ada data wali kelas</td></tr>';} }catch(e){console.error(e);} } // ==================== TAMBAH WALAS ==================== function showTambahWalas(){document.getElementById('formTambahWalas').style.display='block';} async function tambahWalas(){ var username=document.getElementById('wUsername').value.trim(),password=document.getElementById('wPassword').value.trim(),nama=document.getElementById('wNama').value.trim(),kelas=document.getElementById('wKelas').value.trim(),msg=document.getElementById('msgWalas'); if(!username||!password||!nama||!kelas){msg.innerHTML='⚠️ Semua field wajib diisi!';msg.style.color='#e74c3c';return;} try{ var r=await fetch(API_URL+'?action=tambahWalas&username='+username+'&password='+password+'&nama='+encodeURIComponent(nama)+'&kelas='+kelas); var j=await r.json(); if(j.status==='success'){msg.innerHTML='✅ '+j.message;msg.style.color='#27ae60';document.getElementById('wUsername').value='';document.getElementById('wPassword').value='';document.getElementById('wNama').value='';document.getElementById('wKelas').value='';loadWalas();loadDashboard();setTimeout(function(){msg.innerHTML='';},3000);} else{msg.innerHTML='❌ '+j.message;msg.style.color='#e74c3c';} }catch(e){msg.innerHTML='❌ '+e.message;msg.style.color='#e74c3c';} } // ==================== HAPUS WALAS ==================== async function hapusWalas(username){if(!confirm('Yakin hapus wali kelas '+username+'?'))return;try{var r=await fetch(API_URL+'?action=hapusWalas&username='+username);var j=await r.json();alert(j.message);loadWalas();loadDashboard();}catch(e){alert(e.message);}} function editWalas(username){alert('✏️ Edit wali kelas '+username+' (fitur menyusul)');} // ==================== LOAD KELAS ==================== async function loadKelas(){ try{ var r=await fetch(API_URL+'?action=getDaftarKelas');var j=await r.json();var tbody=document.getElementById('kelasBody');var select=document.getElementById('hapusKelasSelect'); if(j.status==='success'&&j.data.length>0){var html='';select.innerHTML='<option value="">-- Pilih Kelas --</option>';j.data.forEach(function(k,idx){html+='<tr><td>'+(idx+1)+'</td><td>'+k.nama+'</td><td>'+k.jumlah+'</td><td>'+(k.walas||'-')+'</td></tr>';select.innerHTML+='<option value="'+k.nama+'">'+k.nama+'</option>';});tbody.innerHTML=html;}else{tbody.innerHTML='<tr><td colspan="4" style="text-align:center;color:#888;padding:20px;">Tidak ada kelas</td></tr>';}}catch(e){console.error(e);} } // ==================== TAMBAH KELAS ==================== function showTambahKelas(){document.getElementById('formTambahKelas').style.display='block';} async function tambahKelas(){ var nama=document.getElementById('tKelasBaru').value.trim(),msg=document.getElementById('msgKelas');if(!nama){msg.innerHTML='⚠️ Nama kelas wajib diisi!';msg.style.color='#e74c3c';return;} try{var r=await fetch(API_URL+'?action=tambahKelas&nama='+nama);var j=await r.json();if(j.status==='success'){msg.innerHTML='✅ '+j.message;msg.style.color='#27ae60';document.getElementById('tKelasBaru').value='';loadKelas();setTimeout(function(){msg.innerHTML='';},3000);}else{msg.innerHTML='❌ '+j.message;msg.style.color='#e74c3c';}}catch(e){msg.innerHTML='❌ '+e.message;msg.style.color='#e74c3c';} } // ==================== HAPUS KELAS ==================== async function hapusKelasSubmit(){ var kelas=document.getElementById('hapusKelasSelect').value;if(!kelas){alert('⚠️ Pilih kelas!');return;}if(!confirm('Yakin hapus kelas '+kelas+'? Semua siswa di kelas ini juga akan dihapus!'))return; try{var r=await fetch(API_URL+'?action=hapusKelas&kelas='+kelas);var j=await r.json();alert(j.message);document.getElementById('formHapusKelas').style.display='none';loadKelas();loadSiswa();loadDashboard();}catch(e){alert(e.message);} } // ==================== LOAD AGENDA ==================== async function loadAgenda(){ try{var r=await fetch(API_URL+'?action=getAllAgenda');var j=await r.json();var tbody=document.getElementById('agendaBody'); if(j.status==='success'&&j.data.length>0){var html='';j.data.forEach(function(a){html+='<tr><td>'+a.hari+'</td><td>'+a.tanggal+'</td><td>'+a.agenda+'</td><td><button class="btn btn-warning btn-sm" onclick="editAgenda(\''+a.tanggal+'\')">✏️</button> <button class="btn btn-danger btn-sm" onclick="hapusAgenda(\''+a.tanggal+'\')">🗑️</button></td></tr>';});tbody.innerHTML=html;}else{tbody.innerHTML='<tr><td colspan="4" style="text-align:center;color:#888;padding:20px;">Tidak ada agenda</td></tr>';}}catch(e){console.error(e);} } // ==================== TAMBAH AGENDA ==================== function showTambahAgenda(){document.getElementById('formTambahAgenda').style.display='block';} async function tambahAgenda(){     var hari = document.getElementById('aHari').value.trim();     var tanggal = document.getElementById('aTanggal').value;     var agenda = document.getElementById('aAgenda').value.trim();     var msg = document.getElementById('msgAgenda');          if(!hari||!tanggal||!agenda){         msg.innerHTML='⚠️ Semua field wajib diisi!';         msg.style.color='#e74c3c';         return;     }          try{         var r = await fetch(API_URL + '?action=tambahAgenda&hari=' + encodeURIComponent(hari) + '&tanggal=' + encodeURIComponent(tanggal) + '&agenda=' + encodeURIComponent(agenda));         var j = await r.json();         if(j.status==='success'){             msg.innerHTML='✅ '+j.message;             msg.style.color='#27ae60';             document.getElementById('aHari').value='';             document.getElementById('aTanggal').value='';             document.getElementById('aAgenda').value='';             loadAgenda();             setTimeout(function(){msg.innerHTML='';},3000);         } else {             msg.innerHTML='❌ '+j.message;             msg.style.color='#e74c3c';         }     } catch(e){         msg.innerHTML='❌ '+e.message;         msg.style.color='#e74c3c';     } }    // ==================== HAPUS AGENDA ==================== async function hapusAgenda(tanggal){if(!confirm('Yakin hapus agenda tanggal '+tanggal+'?'))return;try{var r=await fetch(API_URL+'?action=hapusAgenda&tanggal='+tanggal);var j=await r.json();alert(j.message);loadAgenda();}catch(e){alert(e.message);}} function editAgenda(tanggal){alert('✏️ Edit agenda tanggal '+tanggal+' (fitur menyusul)');} // ==================== KELOLA HARI LIBUR ==================== // Format tanggal display (DD/MM/YYYY) function formatDateDisplay(dateStr) {     if (!dateStr) return '-';     var parts = dateStr.split('-');     if (parts.length !== 3) return dateStr;     return parts[2] + '/' + parts[1] + '/' + parts[0]; } // Load data libur async function loadLibur() {     try {         var r = await fetch(API_URL + '?action=getLibur');         var j = await r.json();         var tbody = document.getElementById('liburBody');         var totalEl = document.getElementById('liburTotal');                  if (j.status === 'success' && j.data.length > 0) {             var html = '';             j.data.forEach(function(item, idx) {                 html += '<tr>' +                     '<td>' + (idx + 1) + '</td>' +                     '<td>' + formatDateDisplay(item.tanggal) + '</td>' +                     '<td>' + (item.keterangan || '-') + '</td>' +                     '<td><button class="btn btn-danger btn-sm" onclick="hapusLibur(\'' + item.tanggal + '\')">🗑️ Hapus</button></td>' +                 '</tr>';             });             tbody.innerHTML = html;             totalEl.textContent = 'Total: ' + j.data.length + ' data';         } else {             tbody.innerHTML = '<tr><td colspan="4" style="text-align:center;color:#888;padding:20px;">Belum ada data libur</td></tr>';             totalEl.textContent = '';         }     } catch(e) {         console.error('Error load libur:', e);         document.getElementById('liburBody').innerHTML = '<tr><td colspan="4" style="text-align:center;color:#e74c3c;padding:20px;">❌ Gagal memuat data</td></tr>';     } } // Tambah libur async function tambahLibur(e) {     e.preventDefault();     var tglAwal = document.getElementById('liburTglAwal').value;     var tglAkhir = document.getElementById('liburTglAkhir').value;     var keterangan = document.getElementById('liburKeterangan').value.trim() || 'Libur';     var msg = document.getElementById('msgLibur');          if (!tglAwal || !tglAkhir) {         msg.innerHTML = '⚠️ Tanggal awal dan akhir harus diisi!';         msg.style.color = '#e74c3c';         return;     }          var btn = document.querySelector('#formLibur button[type="submit"]');     btn.disabled = true;     btn.textContent = '⏳ Memproses...';     msg.innerHTML = '⏳ Menambahkan data...';     msg.style.color = '#3498db';          try {         var r = await fetch(API_URL + '?action=tambahLibur&tglAwal=' + tglAwal + '&tglAkhir=' + tglAkhir + '&keterangan=' + encodeURIComponent(keterangan));         var j = await r.json();                  if (j.status === 'success') {             msg.innerHTML = '✅ ' + j.message;             msg.style.color = '#27ae60';             document.getElementById('liburKeterangan').value = '';             loadLibur();             setTimeout(function() { msg.innerHTML = ''; }, 5000);         } else {             msg.innerHTML = '❌ ' + j.message;             msg.style.color = '#e74c3c';         }     } catch(e) {         msg.innerHTML = '❌ Terjadi kesalahan: ' + e.message;         msg.style.color = '#e74c3c';     } finally {         btn.disabled = false;         btn.textContent = '➕ Tambah';     } } // Hapus libur async function hapusLibur(tanggal) {     if (!confirm('Yakin hapus tanggal libur ' + formatDateDisplay(tanggal) + '?')) return;          try {         var r = await fetch(API_URL + '?action=hapusLibur&tanggal=' + tanggal);         var j = await r.json();                  if (j.status === 'success') {             alert('✅ ' + j.message);             loadLibur();         } else {             alert('❌ ' + j.message);         }     } catch(e) {         alert('❌ Terjadi kesalahan: ' + e.message);     } } // ==================== KELOLA JAM MASUK ==================== var HARI_LIST = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat']; async function loadJamSekolah() {   try {     var r = await fetch(API_URL + '?action=getJamSekolah');     var j = await r.json();     var tbody = document.getElementById('jamSekolahBody');          if (j.status === 'success' && j.data.length > 0) {       var html = '';       j.data.forEach(function(item) {         html += '<tr>' +           '<td>' + item.hari + '</td>' +           '<td><input type="time" class="jam-input" data-hari="' + item.hari + '" value="' + item.jamMasuk + '" style="padding:8px;border:2px solid #ddd;border-radius:6px;"></td>' +           '<td><input type="text" class="ket-input" data-hari="' + item.hari + '" value="' + (item.keterangan || '') + '" placeholder="Opsional" style="padding:8px;border:2px solid #ddd;border-radius:6px;width:100%;"></td>' +         '</tr>';       });       tbody.innerHTML = html;     } else {       var html = '';       HARI_LIST.forEach(function(hari) {         html += '<tr>' +           '<td>' + hari + '</td>' +           '<td><input type="time" class="jam-input" data-hari="' + hari + '" value="07:00" style="padding:8px;border:2px solid #ddd;border-radius:6px;"></td>' +           '<td><input type="text" class="ket-input" data-hari="' + hari + '" placeholder="Opsional" style="padding:8px;border:2px solid #ddd;border-radius:6px;width:100%;"></td>' +         '</tr>';       });       tbody.innerHTML = html;     }   } catch(e) {     console.error('Error load jam sekolah:', e);   } } async function simpanJamSekolah(e) {   e.preventDefault();   var msg = document.getElementById('msgJamSekolah');      var jamInputs = document.querySelectorAll('.jam-input');   var ketInputs = document.querySelectorAll('.ket-input');   var jadwal = [];      jamInputs.forEach(function(input, idx) {     var hari = input.getAttribute('data-hari');     var jamMasuk = input.value || '07:00';     var keterangan = ketInputs[idx] ? ketInputs[idx].value.trim() : '';          jadwal.push({       hari: hari,       jamMasuk: jamMasuk,       keterangan: keterangan     });   });      if (jadwal.length === 0) {     msg.innerHTML = '⚠️ Tidak ada data!';     msg.style.color = '#e74c3c';     return;   }      var btn = document.querySelector('#formJamSekolah button[type="submit"]');   btn.disabled = true;   btn.textContent = '⏳ Menyimpan...';   msg.innerHTML = '⏳ Menyimpan jadwal...';   msg.style.color = '#3498db';      try {     var r = await fetch(API_URL + '?action=simpanJamSekolah&data=' + encodeURIComponent(JSON.stringify(jadwal)));     var j = await r.json();          if (j.status === 'success') {       msg.innerHTML = '✅ ' + j.message;       msg.style.color = '#27ae60';       loadJamSekolah();       setTimeout(function() { msg.innerHTML = ''; }, 5000);     } else {       msg.innerHTML = '❌ ' + j.message;       msg.style.color = '#e74c3c';     }   } catch(e) {     msg.innerHTML = '❌ ' + e.message;     msg.style.color = '#e74c3c';   } finally {     btn.disabled = false;     btn.textContent = '💾 Simpan Jadwal';   } } async function resetJamSekolah() {   if (!confirm('Reset jadwal ke default (07:00)?')) return;      try {     var r = await fetch(API_URL + '?action=resetJamSekolah');     var j = await r.json();          if (j.status === 'success') {       alert('✅ ' + j.message);       loadJamSekolah();     } else {       alert('❌ ' + j.message);     }   } catch(e) {     alert('❌ ' + e.message);   } } </script> </body> </html></div>

DASHBOARD ADMIN <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" c...

Penulisan Kode Frontend