e41221784
/
TIF_NGANJUK_E41221784
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
TIF_NGANJUK_E41221784/Object Repository/Page_Monitoring Kedisiplina.../main_10 April 2026.rs

2291 lines
113 KiB
XML
Raw Blame History

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