main_10 April 2026
aeaaac78-126a-40b8-b4f7-245886fdbbe3
XPATH
//main
CSS
main
XPATH
false
true
false
equals
tag
Main
main
bf1fee23-26ab-4ede-b853-1bb836b1ad6e
false
equals
class
Main
flex-grow overflow-y-auto
2bc14c0f-4c46-40e6-b4a8-f22f2268f8bf
true
equals
text
Main
10 April 2026
Pelanggaran 9A
Monitoring Kedisiplinan
Siswa Tercatat
09
Siswa
Input Data
KELAS 7A
KELAS 9A
CARI
No
Nama Peserta Didik
Jumlah Kasus
Total Poin
Aksi
1
test dua
ID: DwQPUt7Lb7al0Of1t5BXL0Yc6Up1
4 Kasus
60 Poin
2
Arjuna Pradipta
ID: h5M91XVZIKQqRtk6aevRApagyos1
2 Kasus
50 Poin
3
test tiga
ID: 5phVZQXKn6VFLXrP3YgZQd70uvB3
2 Kasus
30 Poin
4
test satu
ID: U7AdAaRYDNYFhcGkXwb7U1ac4au2
2 Kasus
30 Poin
5
test keempat
ID: yGv1dkK8PbM1SiP0CWQPHm1831K2
2 Kasus
20 Poin
6
michael septa wahyu angraini
ID: 6MxTl0E3WsM4miTa5i1ISwUmp0t1
1 Kasus
20 Poin
7
Ranaima Andara
ID: 8NFCQIX9B1hxoF0yaFfzAwjKe8J2
1 Kasus
20 Poin
8
tomi tomblok
ID: Ev5bOlIsRbOiL3JDiktt2B3App13
1 Kasus
20 Poin
9
renaldi
ID: gH0qvdmgv6dTaPgvskV7sYdlZux1
1 Kasus
20 Poin
Riwayat Pelanggaran
Tutup Laporan
Edit Data
Perbarui Catatan / Poin
Kategori
Ringan
Sedang
Berat
Sangat Berat
Tanggal
Poin Pelanggaran
Keterangan
Simpan Perubahan
document.addEventListener('DOMContentLoaded', function() {
const summaryData = {"DwQPUt7Lb7al0Of1t5BXL0Yc6Up1":{"student_id":"DwQPUt7Lb7al0Of1t5BXL0Yc6Up1","student_name":"test dua","total_poin":60,"kasus_count":4,"details":[{"created_at":"2026-04-02 00:51:01","detail":"Alpha Mapel MTK (Harian)","poin":10,"is_auto":true,"student_id":"DwQPUt7Lb7al0Of1t5BXL0Yc6Up1","kategori":"Ringan","tgl":"2026-04-01","student_name":"test dua","kelas":"9A","db_key":"AUTO_Alpha_DwQPUt7Lb7al0Of1t5BXL0Yc6Up1_20260401"},{"created_at":"2026-04-05 07:43:38","detail":"Alpha Mapel BIN (Harian)","is_auto":true,"poin":10,"student_name":"test dua","kategori":"Ringan","tgl":"2026-04-05","student_id":"DwQPUt7Lb7al0Of1t5BXL0Yc6Up1","kelas":"9A","db_key":"AUTO_Alpha_DwQPUt7Lb7al0Of1t5BXL0Yc6Up1_20260405"},{"created_at":"2026-04-02 14:47:30","detail":"Mendapat nilai 0 karena tidak mengerjakan \u0027uas mtk\u0027.","poin":20,"student_name":"test dua","kategori":"Ringan","tgl":"2026-04-02","uid_guru":"tj6gMczau2T1AotiZCd7rs4Geoa2","kelas":"9A","student_id":"DwQPUt7Lb7al0Of1t5BXL0Yc6Up1","db_key":"MANUAL_NOL_DwQPUt7Lb7al0Of1t5BXL0Yc6Up1_6PatX"},{"created_at":"2026-04-02 00:42:04","detail":"Mendapat nilai 0 karena tidak mengerjakan \u0027lari lari pagi memutari lapangan\u0027.","poin":20,"student_id":"DwQPUt7Lb7al0Of1t5BXL0Yc6Up1","kategori":null,"tgl":null,"uid_guru":"tj6gMczau2T1AotiZCd7rs4Geoa2","kelas":"9A","student_name":"test dua","db_key":"MANUAL_NOL_DwQPUt7Lb7al0Of1t5BXL0Yc6Up1_juD3H"}]},"h5M91XVZIKQqRtk6aevRApagyos1":{"student_id":"h5M91XVZIKQqRtk6aevRApagyos1","student_name":"Arjuna Pradipta","total_poin":50,"kasus_count":2,"details":[{"created_at":"2026-04-10 19:20:41","detail":"bermain hp saat kelas berlangsung","poin":25,"student_name":"Arjuna Pradipta","kategori":"Sedang","tgl":"2026-04-10","student_id":"h5M91XVZIKQqRtk6aevRApagyos1","kelas":"9A","db_key":"5p8rpnsQKtf1jhEc7Imw"},{"created_at":"2026-04-10 19:19:04","detail":"bermain hp saat kelas berlangsung","poin":25,"student_name":"Arjuna Pradipta","kategori":"Sedang","tgl":"2026-04-10","student_id":"h5M91XVZIKQqRtk6aevRApagyos1","kelas":"9A","db_key":"RdI2lNr8g6ka5ighkFZR"}]},"5phVZQXKn6VFLXrP3YgZQd70uvB3":{"student_id":"5phVZQXKn6VFLXrP3YgZQd70uvB3","student_name":"test tiga","total_poin":30,"kasus_count":2,"details":[{"created_at":"2026-04-02 00:51:02","detail":"Alpha Mapel MTK (Harian)","poin":10,"is_auto":true,"student_id":"5phVZQXKn6VFLXrP3YgZQd70uvB3","kategori":"Ringan","tgl":"2026-04-01","student_name":"test tiga","kelas":"9A","db_key":"AUTO_Alpha_5phVZQXKn6VFLXrP3YgZQd70uvB3_20260401"},{"created_at":"2026-04-02 00:42:10","detail":"Mendapat nilai 0 karena tidak mengerjakan \u0027lari lari pagi memutari lapangan\u0027.","poin":20,"student_id":"5phVZQXKn6VFLXrP3YgZQd70uvB3","kategori":"Akademik","tgl":"2026-04-02","uid_guru":"tj6gMczau2T1AotiZCd7rs4Geoa2","kelas":"9A","student_name":"test tiga","db_key":"MANUAL_NOL_5phVZQXKn6VFLXrP3YgZQd70uvB3_S1CPC"}]},"U7AdAaRYDNYFhcGkXwb7U1ac4au2":{"student_id":"U7AdAaRYDNYFhcGkXwb7U1ac4au2","student_name":"test satu","total_poin":30,"kasus_count":2,"details":[{"created_at":"2026-04-09 16:37:23","detail":"Alpha Mapel BIN","is_auto":true,"poin":10,"student_name":"test satu","kategori":"Ringan","tgl":"2026-04-09","student_id":"U7AdAaRYDNYFhcGkXwb7U1ac4au2","kelas":"9A","db_key":"AUTO_Alpha_U7AdAaRYDNYFhcGkXwb7U1ac4au2_20260409"},{"created_at":"2026-04-09 14:44:24","detail":"gancokkkk","poin":20,"student_id":"U7AdAaRYDNYFhcGkXwb7U1ac4au2","kategori":"Ringan","tgl":"2026-04-09","student_name":"test satu","kelas":"9A","db_key":"EIDK07XQVgUF9URLeEqf"}]},"yGv1dkK8PbM1SiP0CWQPHm1831K2":{"student_id":"yGv1dkK8PbM1SiP0CWQPHm1831K2","student_name":"test keempat","total_poin":20,"kasus_count":2,"details":[{"created_at":"2026-04-02 00:51:01","detail":null,"poin":10,"is_auto":true,"student_id":"yGv1dkK8PbM1SiP0CWQPHm1831K2","kategori":"Ringan","tgl":"2026-04-01","student_name":"test keempat","kelas":"9A","db_key":"AUTO_Alpha_yGv1dkK8PbM1SiP0CWQPHm1831K2_20260401"},{"created_at":"2026-04-09 16:35:46","detail":"Alpha Mapel BIN","is_auto":true,"poin":10,"student_name":"test keempat","kategori":"Ringan","tgl":"2026-04-09","student_id":"yGv1dkK8PbM1SiP0CWQPHm1831K2","kelas":"9A","db_key":"AUTO_Alpha_yGv1dkK8PbM1SiP0CWQPHm1831K2_20260409"}]},"6MxTl0E3WsM4miTa5i1ISwUmp0t1":{"student_id":"6MxTl0E3WsM4miTa5i1ISwUmp0t1","student_name":"michael septa wahyu angraini","total_poin":20,"kasus_count":1,"details":[{"created_at":"2026-04-03 18:46:09","detail":"Mendapat nilai 0 karena tidak mengerjakan \u0027Input Manual: null (Tugas)\u0027.","poin":20,"student_name":"michael septa wahyu angraini","kategori":"Ringan","tgl":"2026-04-03","uid_guru":"J76i0U5HUBYlrSTGsUtfSmLksgq1","kelas":"9A","student_id":"6MxTl0E3WsM4miTa5i1ISwUmp0t1","db_key":"MANUAL_NOL_6MxTl0E3WsM4miTa5i1ISwUmp0t1_eBY94"}]},"8NFCQIX9B1hxoF0yaFfzAwjKe8J2":{"student_id":"8NFCQIX9B1hxoF0yaFfzAwjKe8J2","student_name":"Ranaima Andara","total_poin":20,"kasus_count":1,"details":[{"created_at":"2026-04-03 18:46:03","detail":"Mendapat nilai 0 karena tidak mengerjakan \u0027Input Manual: null (Tugas)\u0027.","poin":20,"student_name":"Ranaima Andara","kategori":"Ringan","tgl":"2026-04-03","uid_guru":"J76i0U5HUBYlrSTGsUtfSmLksgq1","kelas":"9A","student_id":"8NFCQIX9B1hxoF0yaFfzAwjKe8J2","db_key":"MANUAL_NOL_8NFCQIX9B1hxoF0yaFfzAwjKe8J2_i1TAn"}]},"Ev5bOlIsRbOiL3JDiktt2B3App13":{"student_id":"Ev5bOlIsRbOiL3JDiktt2B3App13","student_name":"tomi tomblok","total_poin":20,"kasus_count":1,"details":[{"created_at":"2026-04-03 18:46:10","detail":"Mendapat nilai 0 karena tidak mengerjakan \u0027Input Manual: null (Tugas)\u0027.","poin":20,"student_name":"tomi tomblok","kategori":"Ringan","tgl":"2026-04-03","uid_guru":"J76i0U5HUBYlrSTGsUtfSmLksgq1","kelas":"9A","student_id":"Ev5bOlIsRbOiL3JDiktt2B3App13","db_key":"MANUAL_NOL_Ev5bOlIsRbOiL3JDiktt2B3App13_FOlNu"}]},"gH0qvdmgv6dTaPgvskV7sYdlZux1":{"student_id":"gH0qvdmgv6dTaPgvskV7sYdlZux1","student_name":"renaldi","total_poin":20,"kasus_count":1,"details":[{"created_at":"2026-04-03 18:46:10","detail":"Mendapat nilai 0 karena tidak mengerjakan \u0027Input Manual: null (Tugas)\u0027.","poin":20,"student_name":"renaldi","kategori":"Ringan","tgl":"2026-04-03","uid_guru":"J76i0U5HUBYlrSTGsUtfSmLksgq1","kelas":"9A","student_id":"gH0qvdmgv6dTaPgvskV7sYdlZux1","db_key":"MANUAL_NOL_gH0qvdmgv6dTaPgvskV7sYdlZux1_gPdJE"}]}};
let donutChartInstance = null;
let barChartInstance = null;
// --- SWEETALERT NOTIFICATIONS ---
// --- EVENT DELEGATION (Table, Modals & Forms) ---
document.body.addEventListener('click', function(e) {
// Buka Detail Modal
const btnDetail = e.target.closest('.btn-show-detail');
if (btnDetail) {
showDetail(btnDetail.dataset.id);
}
// Buka Edit Modal (Dihasilkan dinamis di dalam Modal Detail)
const btnEdit = e.target.closest('.btn-edit-riwayat');
if (btnEdit) {
const data = JSON.parse(btnEdit.dataset.data);
openEditModal(data);
}
// Tutup Modal Detail
if (e.target.closest('#btnCloseDetailModal') || e.target.closest('#btnTutupLaporan')) {
document.getElementById('detailModal').classList.add('hidden');
document.body.style.overflow = 'auto';
}
// Tutup Modal Edit
if (e.target.closest('#btnCloseEditModal')) {
document.getElementById('editModal').classList.add('hidden');
document.body.style.overflow = 'auto';
}
});
// Menangani form hapus, reset & ubah menggunakan SweetAlert
document.body.addEventListener('submit', function(e) {
// Reset 1 Siswa (Tabel Utama)
if (e.target.classList.contains('form-reset-siswa')) {
e.preventDefault();
Swal.fire({
title: 'Hapus Semua Data?',
text: "Seluruh riwayat dan poin siswa ini akan di-reset menjadi 0!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#ef4444',
cancelButtonColor: '#9ca3af',
confirmButtonText: 'Ya, Reset Data!',
cancelButtonText: 'Batal',
customClass: { popup: 'rounded-3xl' }
}).then((result) => {
if (result.isConfirmed) e.target.submit();
});
}
// Hapus Riwayat Spesifik (Dalam Modal Detail)
if (e.target.classList.contains('form-delete-riwayat')) {
e.preventDefault();
Swal.fire({
title: 'Hapus Catatan Ini?',
text: "Riwayat pelanggaran akan dihapus permanen.",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#ef4444',
cancelButtonColor: '#9ca3af',
confirmButtonText: 'Ya, Hapus!',
cancelButtonText: 'Batal',
customClass: { popup: 'rounded-3xl' }
}).then((result) => {
if (result.isConfirmed) e.target.submit();
});
}
// Konfirmasi Form Edit (Dalam Modal Edit)
if (e.target.classList.contains('form-edit-riwayat')) {
e.preventDefault();
Swal.fire({
title: 'Simpan Perubahan?',
text: "Data poin dan catatan pelanggaran akan diperbarui.",
icon: 'info',
showCancelButton: true,
confirmButtonColor: '#ef4444',
cancelButtonColor: '#9ca3af',
confirmButtonText: 'Ya, Simpan!',
cancelButtonText: 'Batal',
customClass: { popup: 'rounded-3xl' }
}).then((result) => {
if (result.isConfirmed) e.target.submit();
});
}
});
// --- FITUR FILTER KELAS ---
const filterKelas = document.getElementById('filterKelas');
if (filterKelas) {
filterKelas.addEventListener('change', function() {
document.getElementById('filterFormPelanggaran').submit();
});
}
// --- FITUR LIVE SEARCH (Debounce Optimization) ---
const searchInput = document.getElementById('violationSearch');
if (searchInput) {
let debounceTimer;
const rows = document.querySelectorAll(".violation-row");
searchInput.addEventListener('input', function(e) {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
const filter = e.target.value.toUpperCase();
rows.forEach(tr => {
const name = tr.dataset.name || '';
tr.style.display = name.includes(filter) ? "" : "none";
});
}, 250);
});
}
// --- FUNGSI TAMPILKAN DETAIL MODAL ---
function showDetail(sId) {
const student = summaryData[sId];
document.getElementById('modalTitle').innerText = student.student_name;
document.getElementById('modalSubTitle').innerText = student.kasus_count + " Total Catatan";
let html = '';
student.details.forEach(v => {
const isAuto = (v.detail || '').toLowerCase().includes('otomatis');
const dataString = JSON.stringify(v).replace(/"/g, '"');
const isMinus = parseInt(v.poin) < 0;
let badgeClass = isMinus ? 'bg-emerald-500 text-white' : (isAuto ? 'bg-amber-500 text-white' : 'bg-red-600 text-white');
let borderClass = isMinus ? 'border-emerald-100 bg-emerald-50/30' : (isAuto ? 'bg-amber-50/50 border-amber-100' : 'bg-gray-50 border-gray-100');
html += `
<div class="p-5 ${borderClass} border-2 rounded-[1.5rem] transition-all relative overflow-hidden mb-4">
${isMinus ? '<i class="fa-solid fa-medal absolute -right-4 -bottom-4 text-6xl text-emerald-100 opacity-50 rotate-12 pointer-events-none"></i>' : ''}
<div class="flex justify-between items-center mb-3 relative z-10">
<span class="text-[9px] font-black px-3 py-1 rounded-full ${badgeClass} uppercase tracking-widest">${v.kategori}</span>
<span class="text-[10px] font-black text-gray-400 italic">${v.tgl}</span>
</div>
<p class="text-[11px] font-bold text-slate-700 leading-relaxed mb-3 relative z-10">${v.detail}</p>
<div class="flex justify-between items-center border-t ${isMinus ? 'border-emerald-200' : 'border-dashed border-gray-200'} pt-3 relative z-10">
<span class="text-[12px] font-black ${isMinus ? 'text-emerald-600' : 'text-slate-900'} uppercase">
${parseInt(v.poin) > 0 ? '+' : ''}${v.poin} Poin
</span>
<div class="flex items-center gap-2">
<button type="button" data-data="${dataString}" class="btn-edit-riwayat text-blue-500 hover:text-blue-700 text-xs p-2">
<i class="fa-solid fa-pen-to-square pointer-events-none"></i>
</button>
<form action="https://sipemkas.my.id/guru/pelanggaran/hapus/${v.kelas}/${v.db_key}" method="POST" class="inline form-delete-riwayat">
<input type="hidden" name="_token" value="2nmvaOdti3XiJ0SP9O5tFY8Jvyn8L1eo7cGuJvfZ" autocomplete="off"> <input type="hidden" name="_method" value="DELETE"> <button type="submit" class="text-red-500 hover:text-red-700 text-xs p-2">
<i class="fa-solid fa-trash-can pointer-events-none"></i>
</button>
</form>
</div>
</div>
</div>`;
});
document.getElementById('modalBody').innerHTML = html;
document.getElementById('detailModal').classList.remove('hidden');
document.body.style.overflow = 'hidden';
}
// --- FUNGSI BUKA MODAL EDIT ---
function openEditModal(data) {
document.getElementById('detailModal').classList.add('hidden');
document.getElementById('edit_kategori').value = data.kategori;
document.getElementById('edit_tanggal').value = data.tgl;
document.getElementById('edit_poin').value = data.poin;
document.getElementById('edit_detail').value = data.detail;
document.getElementById('editForm').action = "https://sipemkas.my.id/guru/pelanggaran/update/" + data.db_key;
document.getElementById('editModal').classList.remove('hidden');
}
// --- FUNGSI CHART ---
function initCharts() {
if (typeof Chart === 'undefined') {
setTimeout(initCharts, 50);
return;
}
const ringan = Object.values(summaryData).reduce((acc, s) => acc + s.details.filter(d => d.kategori == 'Ringan').length, 0);
const sedang = Object.values(summaryData).reduce((acc, s) => acc + s.details.filter(d => d.kategori == 'Sedang').length, 0);
const berat = Object.values(summaryData).reduce((acc, s) => acc + s.details.filter(d => d.kategori == 'Berat').length, 0);
const ctxDonut = document.getElementById('violationDonutChart');
if (ctxDonut) {
if (donutChartInstance) donutChartInstance.destroy();
donutChartInstance = new Chart(ctxDonut.getContext('2d'), {
type: 'doughnut',
data: {
labels: ['Ringan', 'Sedang', 'Berat'],
datasets: [{
data: [ringan, sedang, berat],
backgroundColor: ['#f59e0b', '#ef4444', '#b91c1c'],
borderWidth: 0,
cutout: '80%'
}]
},
options: { maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { usePointStyle: true, font: { size: 9, weight: 'bold' } } } } }
});
}
const ctxBar = document.getElementById('violationBarChart');
if (ctxBar) {
if (barChartInstance) barChartInstance.destroy();
barChartInstance = new Chart(ctxBar.getContext('2d'), {
type: 'bar',
data: {
labels: Object.values(summaryData).slice(0, 5).map(s => s.student_name.split(' ')[0]),
datasets: [{
label: 'Total Poin',
data: Object.values(summaryData).slice(0, 5).map(s => s.total_poin),
backgroundColor: '#1D4ED8',
borderRadius: 10
}]
},
options: { maintainAspectRatio: false, scales: { y: { beginAtZero: true, grid: { display: false } }, x: { grid: { display: false } } }, plugins: { legend: { display: false } } }
});
}
}
initCharts();
});
e29897a4-2289-46e3-84f5-687c8b002df5
false
equals
parent
Main
md5.v1-218fb090245417cb4fd6b24ede7bb3c9
6f5341e3-018a-4897-b79a-7326da39c89c
false
equals
xpath
Main
//main
435f5e14-746a-422a-9b5e-c25ab2c2d3bf
false
equals
xpath:attributes
Main
//main
731a1029-5bca-4fbe-9848-bb3b42bdfbbd
false
equals
xpath:customAttributes
Main
//main[(text() = concat("
10 April 2026
Pelanggaran 9A
Monitoring Kedisiplinan
Siswa Tercatat
09
Siswa
Input Data
KELAS 7A
KELAS 9A
CARI
No
Nama Peserta Didik
Jumlah Kasus
Total Poin
Aksi
1
test dua
ID: DwQPUt7Lb7al0Of1t5BXL0Yc6Up1
4 Kasus
60 Poin
2
Arjuna Pradipta
ID: h5M91XVZIKQqRtk6aevRApagyos1
2 Kasus
50 Poin
3
test tiga
ID: 5phVZQXKn6VFLXrP3YgZQd70uvB3
2 Kasus
30 Poin
4
test satu
ID: U7AdAaRYDNYFhcGkXwb7U1ac4au2
2 Kasus
30 Poin
5
test keempat
ID: yGv1dkK8PbM1SiP0CWQPHm1831K2
2 Kasus
20 Poin
6
michael septa wahyu angraini
ID: 6MxTl0E3WsM4miTa5i1ISwUmp0t1
1 Kasus
20 Poin
7
Ranaima Andara
ID: 8NFCQIX9B1hxoF0yaFfzAwjKe8J2
1 Kasus
20 Poin
8
tomi tomblok
ID: Ev5bOlIsRbOiL3JDiktt2B3App13
1 Kasus
20 Poin
9
renaldi
ID: gH0qvdmgv6dTaPgvskV7sYdlZux1
1 Kasus
20 Poin
Riwayat Pelanggaran
Tutup Laporan
Edit Data
Perbarui Catatan / Poin
Kategori
Ringan
Sedang
Berat
Sangat Berat
Tanggal
Poin Pelanggaran
Keterangan
Simpan Perubahan
document.addEventListener(" , "'" , "DOMContentLoaded" , "'" , ", function() {
const summaryData = {"DwQPUt7Lb7al0Of1t5BXL0Yc6Up1":{"student_id":"DwQPUt7Lb7al0Of1t5BXL0Yc6Up1","student_name":"test dua","total_poin":60,"kasus_count":4,"details":[{"created_at":"2026-04-02 00:51:01","detail":"Alpha Mapel MTK (Harian)","poin":10,"is_auto":true,"student_id":"DwQPUt7Lb7al0Of1t5BXL0Yc6Up1","kategori":"Ringan","tgl":"2026-04-01","student_name":"test dua","kelas":"9A","db_key":"AUTO_Alpha_DwQPUt7Lb7al0Of1t5BXL0Yc6Up1_20260401"},{"created_at":"2026-04-05 07:43:38","detail":"Alpha Mapel BIN (Harian)","is_auto":true,"poin":10,"student_name":"test dua","kategori":"Ringan","tgl":"2026-04-05","student_id":"DwQPUt7Lb7al0Of1t5BXL0Yc6Up1","kelas":"9A","db_key":"AUTO_Alpha_DwQPUt7Lb7al0Of1t5BXL0Yc6Up1_20260405"},{"created_at":"2026-04-02 14:47:30","detail":"Mendapat nilai 0 karena tidak mengerjakan \u0027uas mtk\u0027.","poin":20,"student_name":"test dua","kategori":"Ringan","tgl":"2026-04-02","uid_guru":"tj6gMczau2T1AotiZCd7rs4Geoa2","kelas":"9A","student_id":"DwQPUt7Lb7al0Of1t5BXL0Yc6Up1","db_key":"MANUAL_NOL_DwQPUt7Lb7al0Of1t5BXL0Yc6Up1_6PatX"},{"created_at":"2026-04-02 00:42:04","detail":"Mendapat nilai 0 karena tidak mengerjakan \u0027lari lari pagi memutari lapangan\u0027.","poin":20,"student_id":"DwQPUt7Lb7al0Of1t5BXL0Yc6Up1","kategori":null,"tgl":null,"uid_guru":"tj6gMczau2T1AotiZCd7rs4Geoa2","kelas":"9A","student_name":"test dua","db_key":"MANUAL_NOL_DwQPUt7Lb7al0Of1t5BXL0Yc6Up1_juD3H"}]},"h5M91XVZIKQqRtk6aevRApagyos1":{"student_id":"h5M91XVZIKQqRtk6aevRApagyos1","student_name":"Arjuna Pradipta","total_poin":50,"kasus_count":2,"details":[{"created_at":"2026-04-10 19:20:41","detail":"bermain hp saat kelas berlangsung","poin":25,"student_name":"Arjuna Pradipta","kategori":"Sedang","tgl":"2026-04-10","student_id":"h5M91XVZIKQqRtk6aevRApagyos1","kelas":"9A","db_key":"5p8rpnsQKtf1jhEc7Imw"},{"created_at":"2026-04-10 19:19:04","detail":"bermain hp saat kelas berlangsung","poin":25,"student_name":"Arjuna Pradipta","kategori":"Sedang","tgl":"2026-04-10","student_id":"h5M91XVZIKQqRtk6aevRApagyos1","kelas":"9A","db_key":"RdI2lNr8g6ka5ighkFZR"}]},"5phVZQXKn6VFLXrP3YgZQd70uvB3":{"student_id":"5phVZQXKn6VFLXrP3YgZQd70uvB3","student_name":"test tiga","total_poin":30,"kasus_count":2,"details":[{"created_at":"2026-04-02 00:51:02","detail":"Alpha Mapel MTK (Harian)","poin":10,"is_auto":true,"student_id":"5phVZQXKn6VFLXrP3YgZQd70uvB3","kategori":"Ringan","tgl":"2026-04-01","student_name":"test tiga","kelas":"9A","db_key":"AUTO_Alpha_5phVZQXKn6VFLXrP3YgZQd70uvB3_20260401"},{"created_at":"2026-04-02 00:42:10","detail":"Mendapat nilai 0 karena tidak mengerjakan \u0027lari lari pagi memutari lapangan\u0027.","poin":20,"student_id":"5phVZQXKn6VFLXrP3YgZQd70uvB3","kategori":"Akademik","tgl":"2026-04-02","uid_guru":"tj6gMczau2T1AotiZCd7rs4Geoa2","kelas":"9A","student_name":"test tiga","db_key":"MANUAL_NOL_5phVZQXKn6VFLXrP3YgZQd70uvB3_S1CPC"}]},"U7AdAaRYDNYFhcGkXwb7U1ac4au2":{"student_id":"U7AdAaRYDNYFhcGkXwb7U1ac4au2","student_name":"test satu","total_poin":30,"kasus_count":2,"details":[{"created_at":"2026-04-09 16:37:23","detail":"Alpha Mapel BIN","is_auto":true,"poin":10,"student_name":"test satu","kategori":"Ringan","tgl":"2026-04-09","student_id":"U7AdAaRYDNYFhcGkXwb7U1ac4au2","kelas":"9A","db_key":"AUTO_Alpha_U7AdAaRYDNYFhcGkXwb7U1ac4au2_20260409"},{"created_at":"2026-04-09 14:44:24","detail":"gancokkkk","poin":20,"student_id":"U7AdAaRYDNYFhcGkXwb7U1ac4au2","kategori":"Ringan","tgl":"2026-04-09","student_name":"test satu","kelas":"9A","db_key":"EIDK07XQVgUF9URLeEqf"}]},"yGv1dkK8PbM1SiP0CWQPHm1831K2":{"student_id":"yGv1dkK8PbM1SiP0CWQPHm1831K2","student_name":"test keempat","total_poin":20,"kasus_count":2,"details":[{"created_at":"2026-04-02 00:51:01","detail":null,"poin":10,"is_auto":true,"student_id":"yGv1dkK8PbM1SiP0CWQPHm1831K2","kategori":"Ringan","tgl":"2026-04-01","student_name":"test keempat","kelas":"9A","db_key":"AUTO_Alpha_yGv1dkK8PbM1SiP0CWQPHm1831K2_20260401"},{"created_at":"2026-04-09 16:35:46","detail":"Alpha Mapel BIN","is_auto":true,"poin":10,"student_name":"test keempat","kategori":"Ringan","tgl":"2026-04-09","student_id":"yGv1dkK8PbM1SiP0CWQPHm1831K2","kelas":"9A","db_key":"AUTO_Alpha_yGv1dkK8PbM1SiP0CWQPHm1831K2_20260409"}]},"6MxTl0E3WsM4miTa5i1ISwUmp0t1":{"student_id":"6MxTl0E3WsM4miTa5i1ISwUmp0t1","student_name":"michael septa wahyu angraini","total_poin":20,"kasus_count":1,"details":[{"created_at":"2026-04-03 18:46:09","detail":"Mendapat nilai 0 karena tidak mengerjakan \u0027Input Manual: null (Tugas)\u0027.","poin":20,"student_name":"michael septa wahyu angraini","kategori":"Ringan","tgl":"2026-04-03","uid_guru":"J76i0U5HUBYlrSTGsUtfSmLksgq1","kelas":"9A","student_id":"6MxTl0E3WsM4miTa5i1ISwUmp0t1","db_key":"MANUAL_NOL_6MxTl0E3WsM4miTa5i1ISwUmp0t1_eBY94"}]},"8NFCQIX9B1hxoF0yaFfzAwjKe8J2":{"student_id":"8NFCQIX9B1hxoF0yaFfzAwjKe8J2","student_name":"Ranaima Andara","total_poin":20,"kasus_count":1,"details":[{"created_at":"2026-04-03 18:46:03","detail":"Mendapat nilai 0 karena tidak mengerjakan \u0027Input Manual: null (Tugas)\u0027.","poin":20,"student_name":"Ranaima Andara","kategori":"Ringan","tgl":"2026-04-03","uid_guru":"J76i0U5HUBYlrSTGsUtfSmLksgq1","kelas":"9A","student_id":"8NFCQIX9B1hxoF0yaFfzAwjKe8J2","db_key":"MANUAL_NOL_8NFCQIX9B1hxoF0yaFfzAwjKe8J2_i1TAn"}]},"Ev5bOlIsRbOiL3JDiktt2B3App13":{"student_id":"Ev5bOlIsRbOiL3JDiktt2B3App13","student_name":"tomi tomblok","total_poin":20,"kasus_count":1,"details":[{"created_at":"2026-04-03 18:46:10","detail":"Mendapat nilai 0 karena tidak mengerjakan \u0027Input Manual: null (Tugas)\u0027.","poin":20,"student_name":"tomi tomblok","kategori":"Ringan","tgl":"2026-04-03","uid_guru":"J76i0U5HUBYlrSTGsUtfSmLksgq1","kelas":"9A","student_id":"Ev5bOlIsRbOiL3JDiktt2B3App13","db_key":"MANUAL_NOL_Ev5bOlIsRbOiL3JDiktt2B3App13_FOlNu"}]},"gH0qvdmgv6dTaPgvskV7sYdlZux1":{"student_id":"gH0qvdmgv6dTaPgvskV7sYdlZux1","student_name":"renaldi","total_poin":20,"kasus_count":1,"details":[{"created_at":"2026-04-03 18:46:10","detail":"Mendapat nilai 0 karena tidak mengerjakan \u0027Input Manual: null (Tugas)\u0027.","poin":20,"student_name":"renaldi","kategori":"Ringan","tgl":"2026-04-03","uid_guru":"J76i0U5HUBYlrSTGsUtfSmLksgq1","kelas":"9A","student_id":"gH0qvdmgv6dTaPgvskV7sYdlZux1","db_key":"MANUAL_NOL_gH0qvdmgv6dTaPgvskV7sYdlZux1_gPdJE"}]}};
let donutChartInstance = null;
let barChartInstance = null;
// --- SWEETALERT NOTIFICATIONS ---
// --- EVENT DELEGATION (Table, Modals & Forms) ---
document.body.addEventListener(" , "'" , "click" , "'" , ", function(e) {
// Buka Detail Modal
const btnDetail = e.target.closest(" , "'" , ".btn-show-detail" , "'" , ");
if (btnDetail) {
showDetail(btnDetail.dataset.id);
}
// Buka Edit Modal (Dihasilkan dinamis di dalam Modal Detail)
const btnEdit = e.target.closest(" , "'" , ".btn-edit-riwayat" , "'" , ");
if (btnEdit) {
const data = JSON.parse(btnEdit.dataset.data);
openEditModal(data);
}
// Tutup Modal Detail
if (e.target.closest(" , "'" , "#btnCloseDetailModal" , "'" , ") || e.target.closest(" , "'" , "#btnTutupLaporan" , "'" , ")) {
document.getElementById(" , "'" , "detailModal" , "'" , ").classList.add(" , "'" , "hidden" , "'" , ");
document.body.style.overflow = " , "'" , "auto" , "'" , ";
}
// Tutup Modal Edit
if (e.target.closest(" , "'" , "#btnCloseEditModal" , "'" , ")) {
document.getElementById(" , "'" , "editModal" , "'" , ").classList.add(" , "'" , "hidden" , "'" , ");
document.body.style.overflow = " , "'" , "auto" , "'" , ";
}
});
// Menangani form hapus, reset & ubah menggunakan SweetAlert
document.body.addEventListener(" , "'" , "submit" , "'" , ", function(e) {
// Reset 1 Siswa (Tabel Utama)
if (e.target.classList.contains(" , "'" , "form-reset-siswa" , "'" , ")) {
e.preventDefault();
Swal.fire({
title: " , "'" , "Hapus Semua Data?" , "'" , ",
text: "Seluruh riwayat dan poin siswa ini akan di-reset menjadi 0!",
icon: " , "'" , "warning" , "'" , ",
showCancelButton: true,
confirmButtonColor: " , "'" , "#ef4444" , "'" , ",
cancelButtonColor: " , "'" , "#9ca3af" , "'" , ",
confirmButtonText: " , "'" , "Ya, Reset Data!" , "'" , ",
cancelButtonText: " , "'" , "Batal" , "'" , ",
customClass: { popup: " , "'" , "rounded-3xl" , "'" , " }
}).then((result) => {
if (result.isConfirmed) e.target.submit();
});
}
// Hapus Riwayat Spesifik (Dalam Modal Detail)
if (e.target.classList.contains(" , "'" , "form-delete-riwayat" , "'" , ")) {
e.preventDefault();
Swal.fire({
title: " , "'" , "Hapus Catatan Ini?" , "'" , ",
text: "Riwayat pelanggaran akan dihapus permanen.",
icon: " , "'" , "warning" , "'" , ",
showCancelButton: true,
confirmButtonColor: " , "'" , "#ef4444" , "'" , ",
cancelButtonColor: " , "'" , "#9ca3af" , "'" , ",
confirmButtonText: " , "'" , "Ya, Hapus!" , "'" , ",
cancelButtonText: " , "'" , "Batal" , "'" , ",
customClass: { popup: " , "'" , "rounded-3xl" , "'" , " }
}).then((result) => {
if (result.isConfirmed) e.target.submit();
});
}
// Konfirmasi Form Edit (Dalam Modal Edit)
if (e.target.classList.contains(" , "'" , "form-edit-riwayat" , "'" , ")) {
e.preventDefault();
Swal.fire({
title: " , "'" , "Simpan Perubahan?" , "'" , ",
text: "Data poin dan catatan pelanggaran akan diperbarui.",
icon: " , "'" , "info" , "'" , ",
showCancelButton: true,
confirmButtonColor: " , "'" , "#ef4444" , "'" , ",
cancelButtonColor: " , "'" , "#9ca3af" , "'" , ",
confirmButtonText: " , "'" , "Ya, Simpan!" , "'" , ",
cancelButtonText: " , "'" , "Batal" , "'" , ",
customClass: { popup: " , "'" , "rounded-3xl" , "'" , " }
}).then((result) => {
if (result.isConfirmed) e.target.submit();
});
}
});
// --- FITUR FILTER KELAS ---
const filterKelas = document.getElementById(" , "'" , "filterKelas" , "'" , ");
if (filterKelas) {
filterKelas.addEventListener(" , "'" , "change" , "'" , ", function() {
document.getElementById(" , "'" , "filterFormPelanggaran" , "'" , ").submit();
});
}
// --- FITUR LIVE SEARCH (Debounce Optimization) ---
const searchInput = document.getElementById(" , "'" , "violationSearch" , "'" , ");
if (searchInput) {
let debounceTimer;
const rows = document.querySelectorAll(".violation-row");
searchInput.addEventListener(" , "'" , "input" , "'" , ", function(e) {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
const filter = e.target.value.toUpperCase();
rows.forEach(tr => {
const name = tr.dataset.name || " , "'" , "" , "'" , ";
tr.style.display = name.includes(filter) ? "" : "none";
});
}, 250);
});
}
// --- FUNGSI TAMPILKAN DETAIL MODAL ---
function showDetail(sId) {
const student = summaryData[sId];
document.getElementById(" , "'" , "modalTitle" , "'" , ").innerText = student.student_name;
document.getElementById(" , "'" , "modalSubTitle" , "'" , ").innerText = student.kasus_count + " Total Catatan";
let html = " , "'" , "" , "'" , ";
student.details.forEach(v => {
const isAuto = (v.detail || " , "'" , "" , "'" , ").toLowerCase().includes(" , "'" , "otomatis" , "'" , ");
const dataString = JSON.stringify(v).replace(/"/g, " , "'" , """ , "'" , ");
const isMinus = parseInt(v.poin) < 0;
let badgeClass = isMinus ? " , "'" , "bg-emerald-500 text-white" , "'" , " : (isAuto ? " , "'" , "bg-amber-500 text-white" , "'" , " : " , "'" , "bg-red-600 text-white" , "'" , ");
let borderClass = isMinus ? " , "'" , "border-emerald-100 bg-emerald-50/30" , "'" , " : (isAuto ? " , "'" , "bg-amber-50/50 border-amber-100" , "'" , " : " , "'" , "bg-gray-50 border-gray-100" , "'" , ");
html += `
<div class="p-5 ${borderClass} border-2 rounded-[1.5rem] transition-all relative overflow-hidden mb-4">
${isMinus ? " , "'" , "<i class="fa-solid fa-medal absolute -right-4 -bottom-4 text-6xl text-emerald-100 opacity-50 rotate-12 pointer-events-none"></i>" , "'" , " : " , "'" , "" , "'" , "}
<div class="flex justify-between items-center mb-3 relative z-10">
<span class="text-[9px] font-black px-3 py-1 rounded-full ${badgeClass} uppercase tracking-widest">${v.kategori}</span>
<span class="text-[10px] font-black text-gray-400 italic">${v.tgl}</span>
</div>
<p class="text-[11px] font-bold text-slate-700 leading-relaxed mb-3 relative z-10">${v.detail}</p>
<div class="flex justify-between items-center border-t ${isMinus ? " , "'" , "border-emerald-200" , "'" , " : " , "'" , "border-dashed border-gray-200" , "'" , "} pt-3 relative z-10">
<span class="text-[12px] font-black ${isMinus ? " , "'" , "text-emerald-600" , "'" , " : " , "'" , "text-slate-900" , "'" , "} uppercase">
${parseInt(v.poin) > 0 ? " , "'" , "+" , "'" , " : " , "'" , "" , "'" , "}${v.poin} Poin
</span>
<div class="flex items-center gap-2">
<button type="button" data-data="${dataString}" class="btn-edit-riwayat text-blue-500 hover:text-blue-700 text-xs p-2">
<i class="fa-solid fa-pen-to-square pointer-events-none"></i>
</button>
<form action="https://sipemkas.my.id/guru/pelanggaran/hapus/${v.kelas}/${v.db_key}" method="POST" class="inline form-delete-riwayat">
<input type="hidden" name="_token" value="2nmvaOdti3XiJ0SP9O5tFY8Jvyn8L1eo7cGuJvfZ" autocomplete="off"> <input type="hidden" name="_method" value="DELETE"> <button type="submit" class="text-red-500 hover:text-red-700 text-xs p-2">
<i class="fa-solid fa-trash-can pointer-events-none"></i>
</button>
</form>
</div>
</div>
</div>`;
});
document.getElementById(" , "'" , "modalBody" , "'" , ").innerHTML = html;
document.getElementById(" , "'" , "detailModal" , "'" , ").classList.remove(" , "'" , "hidden" , "'" , ");
document.body.style.overflow = " , "'" , "hidden" , "'" , ";
}
// --- FUNGSI BUKA MODAL EDIT ---
function openEditModal(data) {
document.getElementById(" , "'" , "detailModal" , "'" , ").classList.add(" , "'" , "hidden" , "'" , ");
document.getElementById(" , "'" , "edit_kategori" , "'" , ").value = data.kategori;
document.getElementById(" , "'" , "edit_tanggal" , "'" , ").value = data.tgl;
document.getElementById(" , "'" , "edit_poin" , "'" , ").value = data.poin;
document.getElementById(" , "'" , "edit_detail" , "'" , ").value = data.detail;
document.getElementById(" , "'" , "editForm" , "'" , ").action = "https://sipemkas.my.id/guru/pelanggaran/update/" + data.db_key;
document.getElementById(" , "'" , "editModal" , "'" , ").classList.remove(" , "'" , "hidden" , "'" , ");
}
// --- FUNGSI CHART ---
function initCharts() {
if (typeof Chart === " , "'" , "undefined" , "'" , ") {
setTimeout(initCharts, 50);
return;
}
const ringan = Object.values(summaryData).reduce((acc, s) => acc + s.details.filter(d => d.kategori == " , "'" , "Ringan" , "'" , ").length, 0);
const sedang = Object.values(summaryData).reduce((acc, s) => acc + s.details.filter(d => d.kategori == " , "'" , "Sedang" , "'" , ").length, 0);
const berat = Object.values(summaryData).reduce((acc, s) => acc + s.details.filter(d => d.kategori == " , "'" , "Berat" , "'" , ").length, 0);
const ctxDonut = document.getElementById(" , "'" , "violationDonutChart" , "'" , ");
if (ctxDonut) {
if (donutChartInstance) donutChartInstance.destroy();
donutChartInstance = new Chart(ctxDonut.getContext(" , "'" , "2d" , "'" , "), {
type: " , "'" , "doughnut" , "'" , ",
data: {
labels: [" , "'" , "Ringan" , "'" , ", " , "'" , "Sedang" , "'" , ", " , "'" , "Berat" , "'" , "],
datasets: [{
data: [ringan, sedang, berat],
backgroundColor: [" , "'" , "#f59e0b" , "'" , ", " , "'" , "#ef4444" , "'" , ", " , "'" , "#b91c1c" , "'" , "],
borderWidth: 0,
cutout: " , "'" , "80%" , "'" , "
}]
},
options: { maintainAspectRatio: false, plugins: { legend: { position: " , "'" , "bottom" , "'" , ", labels: { usePointStyle: true, font: { size: 9, weight: " , "'" , "bold" , "'" , " } } } } }
});
}
const ctxBar = document.getElementById(" , "'" , "violationBarChart" , "'" , ");
if (ctxBar) {
if (barChartInstance) barChartInstance.destroy();
barChartInstance = new Chart(ctxBar.getContext(" , "'" , "2d" , "'" , "), {
type: " , "'" , "bar" , "'" , ",
data: {
labels: Object.values(summaryData).slice(0, 5).map(s => s.student_name.split(" , "'" , " " , "'" , ")[0]),
datasets: [{
label: " , "'" , "Total Poin" , "'" , ",
data: Object.values(summaryData).slice(0, 5).map(s => s.total_poin),
backgroundColor: " , "'" , "#1D4ED8" , "'" , ",
borderRadius: 10
}]
},
options: { maintainAspectRatio: false, scales: { y: { beginAtZero: true, grid: { display: false } }, x: { grid: { display: false } } }, plugins: { legend: { display: false } } }
});
}
}
initCharts();
});
") or . = concat("
10 April 2026
Pelanggaran 9A
Monitoring Kedisiplinan
Siswa Tercatat
09
Siswa
Input Data
KELAS 7A
KELAS 9A
CARI
No
Nama Peserta Didik
Jumlah Kasus
Total Poin
Aksi
1
test dua
ID: DwQPUt7Lb7al0Of1t5BXL0Yc6Up1
4 Kasus
60 Poin
2
Arjuna Pradipta
ID: h5M91XVZIKQqRtk6aevRApagyos1
2 Kasus
50 Poin
3
test tiga
ID: 5phVZQXKn6VFLXrP3YgZQd70uvB3
2 Kasus
30 Poin
4
test satu
ID: U7AdAaRYDNYFhcGkXwb7U1ac4au2
2 Kasus
30 Poin
5
test keempat
ID: yGv1dkK8PbM1SiP0CWQPHm1831K2
2 Kasus
20 Poin
6
michael septa wahyu angraini
ID: 6MxTl0E3WsM4miTa5i1ISwUmp0t1
1 Kasus
20 Poin
7
Ranaima Andara
ID: 8NFCQIX9B1hxoF0yaFfzAwjKe8J2
1 Kasus
20 Poin
8
tomi tomblok
ID: Ev5bOlIsRbOiL3JDiktt2B3App13
1 Kasus
20 Poin
9
renaldi
ID: gH0qvdmgv6dTaPgvskV7sYdlZux1
1 Kasus
20 Poin
Riwayat Pelanggaran
Tutup Laporan
Edit Data
Perbarui Catatan / Poin
Kategori
Ringan
Sedang
Berat
Sangat Berat
Tanggal
Poin Pelanggaran
Keterangan
Simpan Perubahan
document.addEventListener(" , "'" , "DOMContentLoaded" , "'" , ", function() {
const summaryData = {"DwQPUt7Lb7al0Of1t5BXL0Yc6Up1":{"student_id":"DwQPUt7Lb7al0Of1t5BXL0Yc6Up1","student_name":"test dua","total_poin":60,"kasus_count":4,"details":[{"created_at":"2026-04-02 00:51:01","detail":"Alpha Mapel MTK (Harian)","poin":10,"is_auto":true,"student_id":"DwQPUt7Lb7al0Of1t5BXL0Yc6Up1","kategori":"Ringan","tgl":"2026-04-01","student_name":"test dua","kelas":"9A","db_key":"AUTO_Alpha_DwQPUt7Lb7al0Of1t5BXL0Yc6Up1_20260401"},{"created_at":"2026-04-05 07:43:38","detail":"Alpha Mapel BIN (Harian)","is_auto":true,"poin":10,"student_name":"test dua","kategori":"Ringan","tgl":"2026-04-05","student_id":"DwQPUt7Lb7al0Of1t5BXL0Yc6Up1","kelas":"9A","db_key":"AUTO_Alpha_DwQPUt7Lb7al0Of1t5BXL0Yc6Up1_20260405"},{"created_at":"2026-04-02 14:47:30","detail":"Mendapat nilai 0 karena tidak mengerjakan \u0027uas mtk\u0027.","poin":20,"student_name":"test dua","kategori":"Ringan","tgl":"2026-04-02","uid_guru":"tj6gMczau2T1AotiZCd7rs4Geoa2","kelas":"9A","student_id":"DwQPUt7Lb7al0Of1t5BXL0Yc6Up1","db_key":"MANUAL_NOL_DwQPUt7Lb7al0Of1t5BXL0Yc6Up1_6PatX"},{"created_at":"2026-04-02 00:42:04","detail":"Mendapat nilai 0 karena tidak mengerjakan \u0027lari lari pagi memutari lapangan\u0027.","poin":20,"student_id":"DwQPUt7Lb7al0Of1t5BXL0Yc6Up1","kategori":null,"tgl":null,"uid_guru":"tj6gMczau2T1AotiZCd7rs4Geoa2","kelas":"9A","student_name":"test dua","db_key":"MANUAL_NOL_DwQPUt7Lb7al0Of1t5BXL0Yc6Up1_juD3H"}]},"h5M91XVZIKQqRtk6aevRApagyos1":{"student_id":"h5M91XVZIKQqRtk6aevRApagyos1","student_name":"Arjuna Pradipta","total_poin":50,"kasus_count":2,"details":[{"created_at":"2026-04-10 19:20:41","detail":"bermain hp saat kelas berlangsung","poin":25,"student_name":"Arjuna Pradipta","kategori":"Sedang","tgl":"2026-04-10","student_id":"h5M91XVZIKQqRtk6aevRApagyos1","kelas":"9A","db_key":"5p8rpnsQKtf1jhEc7Imw"},{"created_at":"2026-04-10 19:19:04","detail":"bermain hp saat kelas berlangsung","poin":25,"student_name":"Arjuna Pradipta","kategori":"Sedang","tgl":"2026-04-10","student_id":"h5M91XVZIKQqRtk6aevRApagyos1","kelas":"9A","db_key":"RdI2lNr8g6ka5ighkFZR"}]},"5phVZQXKn6VFLXrP3YgZQd70uvB3":{"student_id":"5phVZQXKn6VFLXrP3YgZQd70uvB3","student_name":"test tiga","total_poin":30,"kasus_count":2,"details":[{"created_at":"2026-04-02 00:51:02","detail":"Alpha Mapel MTK (Harian)","poin":10,"is_auto":true,"student_id":"5phVZQXKn6VFLXrP3YgZQd70uvB3","kategori":"Ringan","tgl":"2026-04-01","student_name":"test tiga","kelas":"9A","db_key":"AUTO_Alpha_5phVZQXKn6VFLXrP3YgZQd70uvB3_20260401"},{"created_at":"2026-04-02 00:42:10","detail":"Mendapat nilai 0 karena tidak mengerjakan \u0027lari lari pagi memutari lapangan\u0027.","poin":20,"student_id":"5phVZQXKn6VFLXrP3YgZQd70uvB3","kategori":"Akademik","tgl":"2026-04-02","uid_guru":"tj6gMczau2T1AotiZCd7rs4Geoa2","kelas":"9A","student_name":"test tiga","db_key":"MANUAL_NOL_5phVZQXKn6VFLXrP3YgZQd70uvB3_S1CPC"}]},"U7AdAaRYDNYFhcGkXwb7U1ac4au2":{"student_id":"U7AdAaRYDNYFhcGkXwb7U1ac4au2","student_name":"test satu","total_poin":30,"kasus_count":2,"details":[{"created_at":"2026-04-09 16:37:23","detail":"Alpha Mapel BIN","is_auto":true,"poin":10,"student_name":"test satu","kategori":"Ringan","tgl":"2026-04-09","student_id":"U7AdAaRYDNYFhcGkXwb7U1ac4au2","kelas":"9A","db_key":"AUTO_Alpha_U7AdAaRYDNYFhcGkXwb7U1ac4au2_20260409"},{"created_at":"2026-04-09 14:44:24","detail":"gancokkkk","poin":20,"student_id":"U7AdAaRYDNYFhcGkXwb7U1ac4au2","kategori":"Ringan","tgl":"2026-04-09","student_name":"test satu","kelas":"9A","db_key":"EIDK07XQVgUF9URLeEqf"}]},"yGv1dkK8PbM1SiP0CWQPHm1831K2":{"student_id":"yGv1dkK8PbM1SiP0CWQPHm1831K2","student_name":"test keempat","total_poin":20,"kasus_count":2,"details":[{"created_at":"2026-04-02 00:51:01","detail":null,"poin":10,"is_auto":true,"student_id":"yGv1dkK8PbM1SiP0CWQPHm1831K2","kategori":"Ringan","tgl":"2026-04-01","student_name":"test keempat","kelas":"9A","db_key":"AUTO_Alpha_yGv1dkK8PbM1SiP0CWQPHm1831K2_20260401"},{"created_at":"2026-04-09 16:35:46","detail":"Alpha Mapel BIN","is_auto":true,"poin":10,"student_name":"test keempat","kategori":"Ringan","tgl":"2026-04-09","student_id":"yGv1dkK8PbM1SiP0CWQPHm1831K2","kelas":"9A","db_key":"AUTO_Alpha_yGv1dkK8PbM1SiP0CWQPHm1831K2_20260409"}]},"6MxTl0E3WsM4miTa5i1ISwUmp0t1":{"student_id":"6MxTl0E3WsM4miTa5i1ISwUmp0t1","student_name":"michael septa wahyu angraini","total_poin":20,"kasus_count":1,"details":[{"created_at":"2026-04-03 18:46:09","detail":"Mendapat nilai 0 karena tidak mengerjakan \u0027Input Manual: null (Tugas)\u0027.","poin":20,"student_name":"michael septa wahyu angraini","kategori":"Ringan","tgl":"2026-04-03","uid_guru":"J76i0U5HUBYlrSTGsUtfSmLksgq1","kelas":"9A","student_id":"6MxTl0E3WsM4miTa5i1ISwUmp0t1","db_key":"MANUAL_NOL_6MxTl0E3WsM4miTa5i1ISwUmp0t1_eBY94"}]},"8NFCQIX9B1hxoF0yaFfzAwjKe8J2":{"student_id":"8NFCQIX9B1hxoF0yaFfzAwjKe8J2","student_name":"Ranaima Andara","total_poin":20,"kasus_count":1,"details":[{"created_at":"2026-04-03 18:46:03","detail":"Mendapat nilai 0 karena tidak mengerjakan \u0027Input Manual: null (Tugas)\u0027.","poin":20,"student_name":"Ranaima Andara","kategori":"Ringan","tgl":"2026-04-03","uid_guru":"J76i0U5HUBYlrSTGsUtfSmLksgq1","kelas":"9A","student_id":"8NFCQIX9B1hxoF0yaFfzAwjKe8J2","db_key":"MANUAL_NOL_8NFCQIX9B1hxoF0yaFfzAwjKe8J2_i1TAn"}]},"Ev5bOlIsRbOiL3JDiktt2B3App13":{"student_id":"Ev5bOlIsRbOiL3JDiktt2B3App13","student_name":"tomi tomblok","total_poin":20,"kasus_count":1,"details":[{"created_at":"2026-04-03 18:46:10","detail":"Mendapat nilai 0 karena tidak mengerjakan \u0027Input Manual: null (Tugas)\u0027.","poin":20,"student_name":"tomi tomblok","kategori":"Ringan","tgl":"2026-04-03","uid_guru":"J76i0U5HUBYlrSTGsUtfSmLksgq1","kelas":"9A","student_id":"Ev5bOlIsRbOiL3JDiktt2B3App13","db_key":"MANUAL_NOL_Ev5bOlIsRbOiL3JDiktt2B3App13_FOlNu"}]},"gH0qvdmgv6dTaPgvskV7sYdlZux1":{"student_id":"gH0qvdmgv6dTaPgvskV7sYdlZux1","student_name":"renaldi","total_poin":20,"kasus_count":1,"details":[{"created_at":"2026-04-03 18:46:10","detail":"Mendapat nilai 0 karena tidak mengerjakan \u0027Input Manual: null (Tugas)\u0027.","poin":20,"student_name":"renaldi","kategori":"Ringan","tgl":"2026-04-03","uid_guru":"J76i0U5HUBYlrSTGsUtfSmLksgq1","kelas":"9A","student_id":"gH0qvdmgv6dTaPgvskV7sYdlZux1","db_key":"MANUAL_NOL_gH0qvdmgv6dTaPgvskV7sYdlZux1_gPdJE"}]}};
let donutChartInstance = null;
let barChartInstance = null;
// --- SWEETALERT NOTIFICATIONS ---
// --- EVENT DELEGATION (Table, Modals & Forms) ---
document.body.addEventListener(" , "'" , "click" , "'" , ", function(e) {
// Buka Detail Modal
const btnDetail = e.target.closest(" , "'" , ".btn-show-detail" , "'" , ");
if (btnDetail) {
showDetail(btnDetail.dataset.id);
}
// Buka Edit Modal (Dihasilkan dinamis di dalam Modal Detail)
const btnEdit = e.target.closest(" , "'" , ".btn-edit-riwayat" , "'" , ");
if (btnEdit) {
const data = JSON.parse(btnEdit.dataset.data);
openEditModal(data);
}
// Tutup Modal Detail
if (e.target.closest(" , "'" , "#btnCloseDetailModal" , "'" , ") || e.target.closest(" , "'" , "#btnTutupLaporan" , "'" , ")) {
document.getElementById(" , "'" , "detailModal" , "'" , ").classList.add(" , "'" , "hidden" , "'" , ");
document.body.style.overflow = " , "'" , "auto" , "'" , ";
}
// Tutup Modal Edit
if (e.target.closest(" , "'" , "#btnCloseEditModal" , "'" , ")) {
document.getElementById(" , "'" , "editModal" , "'" , ").classList.add(" , "'" , "hidden" , "'" , ");
document.body.style.overflow = " , "'" , "auto" , "'" , ";
}
});
// Menangani form hapus, reset & ubah menggunakan SweetAlert
document.body.addEventListener(" , "'" , "submit" , "'" , ", function(e) {
// Reset 1 Siswa (Tabel Utama)
if (e.target.classList.contains(" , "'" , "form-reset-siswa" , "'" , ")) {
e.preventDefault();
Swal.fire({
title: " , "'" , "Hapus Semua Data?" , "'" , ",
text: "Seluruh riwayat dan poin siswa ini akan di-reset menjadi 0!",
icon: " , "'" , "warning" , "'" , ",
showCancelButton: true,
confirmButtonColor: " , "'" , "#ef4444" , "'" , ",
cancelButtonColor: " , "'" , "#9ca3af" , "'" , ",
confirmButtonText: " , "'" , "Ya, Reset Data!" , "'" , ",
cancelButtonText: " , "'" , "Batal" , "'" , ",
customClass: { popup: " , "'" , "rounded-3xl" , "'" , " }
}).then((result) => {
if (result.isConfirmed) e.target.submit();
});
}
// Hapus Riwayat Spesifik (Dalam Modal Detail)
if (e.target.classList.contains(" , "'" , "form-delete-riwayat" , "'" , ")) {
e.preventDefault();
Swal.fire({
title: " , "'" , "Hapus Catatan Ini?" , "'" , ",
text: "Riwayat pelanggaran akan dihapus permanen.",
icon: " , "'" , "warning" , "'" , ",
showCancelButton: true,
confirmButtonColor: " , "'" , "#ef4444" , "'" , ",
cancelButtonColor: " , "'" , "#9ca3af" , "'" , ",
confirmButtonText: " , "'" , "Ya, Hapus!" , "'" , ",
cancelButtonText: " , "'" , "Batal" , "'" , ",
customClass: { popup: " , "'" , "rounded-3xl" , "'" , " }
}).then((result) => {
if (result.isConfirmed) e.target.submit();
});
}
// Konfirmasi Form Edit (Dalam Modal Edit)
if (e.target.classList.contains(" , "'" , "form-edit-riwayat" , "'" , ")) {
e.preventDefault();
Swal.fire({
title: " , "'" , "Simpan Perubahan?" , "'" , ",
text: "Data poin dan catatan pelanggaran akan diperbarui.",
icon: " , "'" , "info" , "'" , ",
showCancelButton: true,
confirmButtonColor: " , "'" , "#ef4444" , "'" , ",
cancelButtonColor: " , "'" , "#9ca3af" , "'" , ",
confirmButtonText: " , "'" , "Ya, Simpan!" , "'" , ",
cancelButtonText: " , "'" , "Batal" , "'" , ",
customClass: { popup: " , "'" , "rounded-3xl" , "'" , " }
}).then((result) => {
if (result.isConfirmed) e.target.submit();
});
}
});
// --- FITUR FILTER KELAS ---
const filterKelas = document.getElementById(" , "'" , "filterKelas" , "'" , ");
if (filterKelas) {
filterKelas.addEventListener(" , "'" , "change" , "'" , ", function() {
document.getElementById(" , "'" , "filterFormPelanggaran" , "'" , ").submit();
});
}
// --- FITUR LIVE SEARCH (Debounce Optimization) ---
const searchInput = document.getElementById(" , "'" , "violationSearch" , "'" , ");
if (searchInput) {
let debounceTimer;
const rows = document.querySelectorAll(".violation-row");
searchInput.addEventListener(" , "'" , "input" , "'" , ", function(e) {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
const filter = e.target.value.toUpperCase();
rows.forEach(tr => {
const name = tr.dataset.name || " , "'" , "" , "'" , ";
tr.style.display = name.includes(filter) ? "" : "none";
});
}, 250);
});
}
// --- FUNGSI TAMPILKAN DETAIL MODAL ---
function showDetail(sId) {
const student = summaryData[sId];
document.getElementById(" , "'" , "modalTitle" , "'" , ").innerText = student.student_name;
document.getElementById(" , "'" , "modalSubTitle" , "'" , ").innerText = student.kasus_count + " Total Catatan";
let html = " , "'" , "" , "'" , ";
student.details.forEach(v => {
const isAuto = (v.detail || " , "'" , "" , "'" , ").toLowerCase().includes(" , "'" , "otomatis" , "'" , ");
const dataString = JSON.stringify(v).replace(/"/g, " , "'" , """ , "'" , ");
const isMinus = parseInt(v.poin) < 0;
let badgeClass = isMinus ? " , "'" , "bg-emerald-500 text-white" , "'" , " : (isAuto ? " , "'" , "bg-amber-500 text-white" , "'" , " : " , "'" , "bg-red-600 text-white" , "'" , ");
let borderClass = isMinus ? " , "'" , "border-emerald-100 bg-emerald-50/30" , "'" , " : (isAuto ? " , "'" , "bg-amber-50/50 border-amber-100" , "'" , " : " , "'" , "bg-gray-50 border-gray-100" , "'" , ");
html += `
<div class="p-5 ${borderClass} border-2 rounded-[1.5rem] transition-all relative overflow-hidden mb-4">
${isMinus ? " , "'" , "<i class="fa-solid fa-medal absolute -right-4 -bottom-4 text-6xl text-emerald-100 opacity-50 rotate-12 pointer-events-none"></i>" , "'" , " : " , "'" , "" , "'" , "}
<div class="flex justify-between items-center mb-3 relative z-10">
<span class="text-[9px] font-black px-3 py-1 rounded-full ${badgeClass} uppercase tracking-widest">${v.kategori}</span>
<span class="text-[10px] font-black text-gray-400 italic">${v.tgl}</span>
</div>
<p class="text-[11px] font-bold text-slate-700 leading-relaxed mb-3 relative z-10">${v.detail}</p>
<div class="flex justify-between items-center border-t ${isMinus ? " , "'" , "border-emerald-200" , "'" , " : " , "'" , "border-dashed border-gray-200" , "'" , "} pt-3 relative z-10">
<span class="text-[12px] font-black ${isMinus ? " , "'" , "text-emerald-600" , "'" , " : " , "'" , "text-slate-900" , "'" , "} uppercase">
${parseInt(v.poin) > 0 ? " , "'" , "+" , "'" , " : " , "'" , "" , "'" , "}${v.poin} Poin
</span>
<div class="flex items-center gap-2">
<button type="button" data-data="${dataString}" class="btn-edit-riwayat text-blue-500 hover:text-blue-700 text-xs p-2">
<i class="fa-solid fa-pen-to-square pointer-events-none"></i>
</button>
<form action="https://sipemkas.my.id/guru/pelanggaran/hapus/${v.kelas}/${v.db_key}" method="POST" class="inline form-delete-riwayat">
<input type="hidden" name="_token" value="2nmvaOdti3XiJ0SP9O5tFY8Jvyn8L1eo7cGuJvfZ" autocomplete="off"> <input type="hidden" name="_method" value="DELETE"> <button type="submit" class="text-red-500 hover:text-red-700 text-xs p-2">
<i class="fa-solid fa-trash-can pointer-events-none"></i>
</button>
</form>
</div>
</div>
</div>`;
});
document.getElementById(" , "'" , "modalBody" , "'" , ").innerHTML = html;
document.getElementById(" , "'" , "detailModal" , "'" , ").classList.remove(" , "'" , "hidden" , "'" , ");
document.body.style.overflow = " , "'" , "hidden" , "'" , ";
}
// --- FUNGSI BUKA MODAL EDIT ---
function openEditModal(data) {
document.getElementById(" , "'" , "detailModal" , "'" , ").classList.add(" , "'" , "hidden" , "'" , ");
document.getElementById(" , "'" , "edit_kategori" , "'" , ").value = data.kategori;
document.getElementById(" , "'" , "edit_tanggal" , "'" , ").value = data.tgl;
document.getElementById(" , "'" , "edit_poin" , "'" , ").value = data.poin;
document.getElementById(" , "'" , "edit_detail" , "'" , ").value = data.detail;
document.getElementById(" , "'" , "editForm" , "'" , ").action = "https://sipemkas.my.id/guru/pelanggaran/update/" + data.db_key;
document.getElementById(" , "'" , "editModal" , "'" , ").classList.remove(" , "'" , "hidden" , "'" , ");
}
// --- FUNGSI CHART ---
function initCharts() {
if (typeof Chart === " , "'" , "undefined" , "'" , ") {
setTimeout(initCharts, 50);
return;
}
const ringan = Object.values(summaryData).reduce((acc, s) => acc + s.details.filter(d => d.kategori == " , "'" , "Ringan" , "'" , ").length, 0);
const sedang = Object.values(summaryData).reduce((acc, s) => acc + s.details.filter(d => d.kategori == " , "'" , "Sedang" , "'" , ").length, 0);
const berat = Object.values(summaryData).reduce((acc, s) => acc + s.details.filter(d => d.kategori == " , "'" , "Berat" , "'" , ").length, 0);
const ctxDonut = document.getElementById(" , "'" , "violationDonutChart" , "'" , ");
if (ctxDonut) {
if (donutChartInstance) donutChartInstance.destroy();
donutChartInstance = new Chart(ctxDonut.getContext(" , "'" , "2d" , "'" , "), {
type: " , "'" , "doughnut" , "'" , ",
data: {
labels: [" , "'" , "Ringan" , "'" , ", " , "'" , "Sedang" , "'" , ", " , "'" , "Berat" , "'" , "],
datasets: [{
data: [ringan, sedang, berat],
backgroundColor: [" , "'" , "#f59e0b" , "'" , ", " , "'" , "#ef4444" , "'" , ", " , "'" , "#b91c1c" , "'" , "],
borderWidth: 0,
cutout: " , "'" , "80%" , "'" , "
}]
},
options: { maintainAspectRatio: false, plugins: { legend: { position: " , "'" , "bottom" , "'" , ", labels: { usePointStyle: true, font: { size: 9, weight: " , "'" , "bold" , "'" , " } } } } }
});
}
const ctxBar = document.getElementById(" , "'" , "violationBarChart" , "'" , ");
if (ctxBar) {
if (barChartInstance) barChartInstance.destroy();
barChartInstance = new Chart(ctxBar.getContext(" , "'" , "2d" , "'" , "), {
type: " , "'" , "bar" , "'" , ",
data: {
labels: Object.values(summaryData).slice(0, 5).map(s => s.student_name.split(" , "'" , " " , "'" , ")[0]),
datasets: [{
label: " , "'" , "Total Poin" , "'" , ",
data: Object.values(summaryData).slice(0, 5).map(s => s.total_poin),
backgroundColor: " , "'" , "#1D4ED8" , "'" , ",
borderRadius: 10
}]
},
options: { maintainAspectRatio: false, scales: { y: { beginAtZero: true, grid: { display: false } }, x: { grid: { display: false } } }, plugins: { legend: { display: false } } }
});
}
}
initCharts();
});
"))]
0293dfaa-f1fd-4e46-a473-750541ca7bbd