LUTHFI IGI

<!DOCTYPE html>

<head>

<title>Sistem Absensi Face Recognition</title>

<style>

/* CSS Khusus Blogger Override & Tampilan Aplikasi */

html, body {

margin: 0 !important;

padding: 0 !important;

width: 100% !important;

height: 100% !important;

overflow: hidden !important; /* Mencegah scroll bawaan blogger */

font-family: 'Plus Jakarta Sans', sans-serif;

}

/* Sembunyikan elemen navbar default Blogger */

#navbar-iframe, .Navbar, .navbar { display: none !important; }

#app-container {

position: fixed !important;

top: 0 !important;

left: 0 !important;

width: 100vw !important;

height: 100vh !important;

background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;

z-index: 2147483647 !important;

overflow-y: auto !important;

}

/* Elemen UI Modern (Glassmorphism) */

.glass-card { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 10px 30px rgba(0,0,0,0.08); }

.custom-scrollbar::-webkit-scrollbar { width: 6px; }

.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

.view-section { display: none; min-height: 100vh; flex-direction: column; }

.view-section.active { display: flex; }

/* Sidebar Styles & Transitions */

.sidebar-container { transition: width 0.3s ease; }

.sidebar-collapsed { width: 5.5rem !important; }

.sidebar-collapsed .nav-text { display: none; }

.sidebar-collapsed .admin-tab { justify-content: center; padding-left: 0; padding-right: 0; }

.sidebar-collapsed .admin-tab i { margin: 0; font-size: 1.25rem; }

/* Bottom Nav untuk HP & Tablet */

@media (max-width: 767px) {

.mobile-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; flex-direction: row; justify-content: space-around; padding: 0.5rem; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05); border-top: 1px solid #e5e7eb; overflow-x: auto;}

.mobile-bottom-nav button { flex-direction: column; padding: 0.5rem; font-size: 0.7rem; gap: 0.25rem; justify-content: center; min-width: 20%; flex-shrink: 0; }

.mobile-bottom-nav button i { margin: 0; font-size: 1.25rem; }

.mobile-bottom-nav button span { display: block; }

.content-area-mobile-fix { padding-bottom: 5.5rem !important; }

#btn-collapse-sidebar { display: none; }

}

@media (min-width: 768px) {

.mobile-bottom-nav button span { display: inline-block; }

}

/* Loading Overlay */

#loading-overlay {

position: fixed; top: 0; left: 0; width: 100%; height: 100%;

background: rgba(255,255,255,0.9); z-index: 99999999;

display: flex; flex-direction: column; justify-content: center; align-items: center;

}

.loader {

border: 5px solid #f3f3f3; border-top: 5px solid #3b82f6;

border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite;

}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Notifikasi Toast */

#toast-container { position: fixed; top: 20px; right: 20px; z-index: 999999999; }

.toast { background: #10b981; color: white; padding: 15px 25px; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); opacity: 0; transform: translateX(100%); transition: all 0.3s ease; }

.toast.show { opacity: 1; transform: translateX(0); }

.toast.error { background: #ef4444; }

.toast.warning { background: #f59e0b; }

.toast.info { background: #3b82f6; }

</style>

</head>

<body>

window.addEventListener('DOMContentLoaded', (event) => {

const appContainer = document.getElementById('app-container');

if (appContainer) {

document.body.appendChild(appContainer);

Array.from(document.body.children).forEach(child => {

if (child !== appContainer && child.tagName !== 'SCRIPT' && child.tagName !== 'STYLE' && child.tagName !== 'LINK') {

child.style.display = 'none';

child.style.visibility = 'hidden';

}

});

}

});

</script>

<h2 class="text-xl font-bold text-gray-700">Memuat Sistem...</h2>

<p class="text-gray-500 mt-2" id="loading-text">Menyiapkan model AI dan lingkungan kerja</p>

</div>

Sistem Informasi Kiosk

</div>

<h1 id="ui-nama-lembaga" class="text-4xl md:text-5xl font-extrabold text-gray-900 mb-4 leading-tight tracking-tight">Smart Absensi AI</h1>

Selamat datang di portal absensi masa depan. Sistem Kiosk Berbasis Pengenalan Wajah kami memastikan pencatatan kehadiran yang akurat, cepat, dan terintegrasi penuh.

</p>

<div>

<h3 class="font-bold text-gray-800">Cepat & Akurat</h3>

<p class="text-sm text-gray-500">Pemindaian instan dengan validasi biometrik 128-dimensi.</p>

</div>

<div>

<h3 class="font-bold text-gray-800">Rekapitulasi Otomatis</h3>

<p class="text-sm text-gray-500">Laporan harian & bulanan, siap cetak ke format PDF.</p>

</div>

</div>

<h2 class="text-2xl font-bold mb-2">Akses Sistem</h2>

<p class="text-gray-400 mb-8 text-sm">Masuk sebagai administrator untuk mengaktifkan mesin pemindai dan mengelola laporan.</p>

<i class="fa-solid fa-lock text-lg"></i> Login Administrator

</button>

</div>

</button>

</div>

<h2 class="text-2xl font-extrabold text-gray-800">Admin Panel</h2>

</div>

<label class="block text-sm font-bold text-gray-700 mb-2">Username</label>

</div>

<label class="block text-sm font-bold text-gray-700 mb-2">Password</label>

</div>

Masuk Sistem

</button>

</form>

<p class="text-xs text-center text-blue-800 mt-6 font-semibold bg-blue-50 py-2 rounded-lg border border-blue-100">Preview Akun: admin / admin2026</p>

</div>

</div>

<span class="hidden sm:inline" id="ui-nav-title">Kiosk Admin</span>

</button>

</div>

<i class="fa-solid fa-right-from-bracket"></i> Keluar

</button>

</nav>

<i class="fa-solid fa-expand text-xl md:text-lg md:w-6 text-center"></i> <span class="nav-text">Kiosk</span>

</button>

<i class="fa-solid fa-pen-to-square text-xl md:text-lg md:w-6 text-center"></i> <span class="nav-text">Absen Manual</span>

</button>

<i class="fa-solid fa-user-plus text-xl md:text-lg md:w-6 text-center"></i> <span class="nav-text">Daftar Wajah</span>

</button>

<i class="fa-solid fa-users text-xl md:text-lg md:w-6 text-center"></i> <span class="nav-text">Database</span>

</button>

<i class="fa-solid fa-clipboard-list text-xl md:text-lg md:w-6 text-center"></i> <span class="nav-text">Rekapitulasi</span>

</button>

<i class="fa-solid fa-gear text-xl md:text-lg md:w-6 text-center"></i> <span class="nav-text">Pengaturan</span>

</button>

</div>

<div>

<h2 class="text-2xl font-extrabold text-gray-800 tracking-tight">Kamera Kiosk Absensi</h2>

<p class="text-gray-500 text-sm font-medium mt-1">Biarkan halaman ini terbuka agar mesin absen mendeteksi wajah otomatis.</p>

</div>

<i class="fa-solid fa-circle-dot animate-pulse"></i> Kamera Mati

</div>

</div>

<button onclick="startKioskScanner()" class="flex-1 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-bold shadow-lg transition transform hover:-translate-y-1">Mulai Scanner</button>

<button onclick="stopCamera('kiosk')" class="flex-1 py-3 bg-red-100 hover:bg-red-200 text-red-700 rounded-xl font-bold shadow transition">Hentikan</button>

</div>

<span>Log Realtime</span>

</h3>

<div class="text-sm text-gray-400 text-center mt-10 font-medium">Belum ada absen terdeteksi</div>

</div>

<i class="fa-solid fa-pen-to-square text-blue-600 mr-3"></i> Form Absensi Manual

</h2>

<p>Gunakan menu ini untuk mencatat kehadiran bagi mereka yang tidak bisa memindai wajah (Sakit, Izin, Dinas Luar, dll). Data akan langsung tersinkronisasi ke laporan Hari Ini.</p>

</div>

<div>

<label class="block text-sm font-bold text-gray-700 mb-2">1. Pilih Kategori Pegawai/Siswa</label>

<option value="">-- Memuat Kategori --</option>

</select>

</div>

<div>

<label class="block text-sm font-bold text-gray-700 mb-2">2. Pilih Nama</label>

<option value="">-- Pilih Kategori Terlebih Dahulu --</option>

</select>

</div>

<div>

<label class="block text-sm font-bold text-gray-700 mb-2">3. Status Kehadiran</label>

<option value="Hadir">Hadir</option>

<option value="Sakit">Sakit</option>

<option value="DL">Dinas Luar (DL)</option>

<option value="Lainnya">Lainnya</option>

</select>

</div>

<i class="fa-solid fa-save text-lg"></i> Simpan Ke Database

</button>

</div>

<h2 class="text-2xl font-extrabold text-gray-800 border-b border-gray-200 pb-4 mb-6 tracking-tight"><i class="fa-solid fa-camera-retro text-blue-600 mr-3"></i> Pendaftaran Wajah Baru</h2>

<div>

<label class="block text-sm font-bold text-gray-700 mb-2">Nama Lengkap</label>

</div>

<label class="block text-sm font-bold text-gray-700 mb-2">Nomor Identitas (NIP/NIS/KTP)</label>

</div>

<label class="block text-sm font-bold text-gray-700 mb-2">Kategori (Pilih atau Ketik Baru)</label>

</datalist>

</div>

<li>Pastikan cahaya ruangan terang.</li>

<li>Posisikan wajah tepat di tengah kamera.</li>

<li>Jangan gunakan masker atau kacamata gelap.</li>

</ul>

</div>

<i class="fa-solid fa-expand text-lg"></i> Pindai & Simpan Wajah

</button>

</div>

</div>

<p class="text-sm text-blue-600 mt-4 font-bold bg-blue-50 px-4 py-2 rounded-lg border border-blue-100" id="reg-status"><i class="fa-solid fa-info-circle"></i> Kamera akan aktif saat tab ini dibuka.</p>

</div>

<h2 class="text-2xl font-extrabold text-gray-800 tracking-tight">Data Wajah Terdaftar</h2>

<button onclick="fetchPegawaiData()" class="px-4 py-2.5 bg-white hover:bg-gray-50 shadow-sm border border-gray-200 rounded-xl text-sm font-bold text-gray-700 transition flex items-center gap-2"><i class="fa-solid fa-rotate-right"></i> Refresh</button>

</div>

<thead>

<th class="p-4">Identitas</th>

<th class="p-4">Nama Lengkap</th>

<th class="p-4">Kategori</th>

</tr>

</thead>

<tr><td colspan="4" class="p-6 text-center text-gray-500 font-medium">Memuat data...</td></tr>

</tbody>

</table>

</div>

<div>

<h2 class="text-2xl font-extrabold text-gray-800 tracking-tight">Laporan Kehadiran</h2>

<p class="text-sm text-gray-500 font-medium">Pilih mode tampilan dan filter periode.</p>

</div>

<button id="btn-mode-harian" onclick="setRecapMode('harian')" class="flex-1 md:w-32 py-2 px-4 bg-white text-blue-600 shadow-sm rounded-lg font-bold text-sm transition">Harian</button>

<button id="btn-mode-bulanan" onclick="setRecapMode('bulanan')" class="flex-1 md:w-32 py-2 px-4 text-gray-500 hover:text-gray-700 rounded-lg font-bold text-sm transition">Bulanan</button>

</div>

<label class="block text-xs font-bold text-blue-800 mb-1">Tanggal Absensi</label>

</div>

<label class="block text-xs font-bold text-blue-800 mb-1">Bulan Absensi</label>

</div>

<label class="block text-xs font-bold text-blue-800 mb-1">Kategori</label>

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

</select>

</div>

<i class="fa-solid fa-file-pdf"></i> Unduh PDF

</button>

</div>

<p class="text-xs font-bold text-gray-500 uppercase tracking-wide">Total Terdaftar</p>

</div>

<p class="text-xs font-bold text-blue-600 uppercase tracking-wide" id="stat-label-2">Sudah Tercatat</p>

</div>

<p class="text-xs font-bold text-red-600 uppercase tracking-wide" id="stat-label-3">Belum/Alpa</p>

</div>

<p class="text-xs font-bold text-green-600 uppercase tracking-wide" id="stat-label-4">Rata-rata Hadir</p>

</div>

<thead>

</tr>

</thead>

<tr><td colspan="5" class="p-6 text-center text-gray-500 font-medium">Tekan tombol refresh untuk memuat data.</td></tr>

</tbody>

</table>

</div>

<h2 class="text-2xl font-extrabold text-gray-800 border-b border-gray-200 pb-4 mb-6 tracking-tight"><i class="fa-solid fa-gear text-blue-600 mr-3"></i> Pengaturan Sistem & Laporan</h2>

<h3 class="font-bold text-lg text-gray-800 border-l-4 border-blue-500 pl-3">Profil Lembaga</h3>

<div>

<label class="block text-sm font-bold text-gray-700 mb-2">Nama Lembaga / Instansi</label>

</div>

<div>

<label class="block text-sm font-bold text-gray-700 mb-2">Slogan / Deskripsi Singkat</label>

</div>

<div>

<label class="block text-sm font-bold text-gray-700 mb-2">Alamat Lengkap</label>

</div>

<div>

<label class="block text-sm font-bold text-gray-700 mb-2">URL Logo Lembaga (Opsional)</label>

</div>

<h3 class="font-bold text-lg text-gray-800 border-l-4 border-green-500 pl-3">Data Pengesahan (Untuk Cetak PDF)</h3>

<div>

<label class="block text-sm font-bold text-gray-700 mb-2">Tempat Tanda Tangan</label>

</div>

<div>

<label class="block text-sm font-bold text-gray-700 mb-2">Jenis Jabatan Atasan</label>

</div>

<div>

<label class="block text-sm font-bold text-gray-700 mb-2">Nama Lengkap Atasan (Beserta Gelar)</label>

</div>

<div>

<label class="block text-sm font-bold text-gray-700 mb-2">Jenis ID</label>

</div>

<div>

<label class="block text-sm font-bold text-gray-700 mb-2">Nomor ID Atasan</label>

</div>

<p class="text-xs text-gray-500"><i class="fa-solid fa-info-circle text-blue-500 mr-1"></i> Data disinkronkan dan disimpan dengan aman ke Google Spreadsheet.</p>

<i class="fa-solid fa-floppy-disk"></i> Simpan Pengaturan

</button>

</div>

/**

* ==========================================

* KONFIGURASI APLIKASI

* ==========================================

const IS_PREVIEW = true; // Ubah ke false setelah integrasi GAS

const GAS_URL = "https://script.google.com/macros/s/AKfycbxdc4f_ym7sZvAAT1x1xrBBIiAH-K1cd7W7B3LVym2u8CgrvR-UO6ocisYauaYjNH-QIg/exec";

/**

* ==========================================

* STATE MANAGEMENT

* ==========================================

let currentStream = null;

let faceMatcher = null;

let scannerInterval = null;

let labeledDescriptors = [];

let isSidebarCollapsed = false;

let cachedPegawai = [];

let cachedAbsensi = [];

const cooldownMap = {};

let todayAttended = new Set();

let recapMode = 'harian'; // 'harian' atau 'bulanan'

let currentPdfHead = [];

let currentPdfBody = [];

// Data dummy untuk preview

let dummyAdmin = { user: "admin", pass: "admin2026" };

let dummyPegawai = [

{ id: 'AI-101', identitas: '199001', nama: 'Budi Santoso', kategori: 'Pegawai', descriptor: '[]' },

{ id: 'AI-102', identitas: '199002', nama: 'Siti Aminah', kategori: 'Pegawai', descriptor: '[]' },

{ id: 'AI-103', identitas: '202301', nama: 'Andi Kusuma', kategori: 'Siswa', descriptor: '[]' }

];

// Simulasi absen hari ini dan kemarin

let dummyAbsensi = [

{ timestamp: new Date().toLocaleString('id-ID'), nama: 'Budi Santoso', ket: 'Hadir' },

{ timestamp: new Date().toLocaleString('id-ID'), nama: 'Siti Aminah', ket: 'Sakit' }

];

/**

* ==========================================

* INISIALISASI

* ==========================================

window.onload = async () => {

if (IS_PREVIEW) document.getElementById('preview-hint').classList.remove('hidden');

loadSettings();

// Set default date to today for filters

const today = new Date();

const yyyy = today.getFullYear();

const mm = String(today.getMonth() + 1).padStart(2, '0');

const dd = String(today.getDate()).padStart(2, '0');

document.getElementById('filter-date').value = `${yyyy}-${mm}-${dd}`;

document.getElementById('filter-month').value = `${yyyy}-${mm}`;

try {

const MODEL_URL = 'https://cdn.jsdelivr.net/npm/@vladmandic/face-api/model/';

await faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL);

await faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL);

await faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL);

if (localStorage.getItem('app_is_logged_in') === 'true') {

navigate('admin');

} else {

navigate('landing');

}

document.getElementById('loading-overlay').style.display = 'none';

} catch (error) {

console.error(error);

document.getElementById('loading-text').innerText = "Gagal memuat sistem AI. Cek koneksi internet.";

document.getElementById('loading-text').style.color = "red";

}

};

/**

* ==========================================

* PENGATURAN UI & LOGO

* ==========================================

async function loadSettings() {

// Render dari cache lokal dulu agar UI tidak kosong (Instant Load)

applySettingsToUI();

if (!IS_PREVIEW) {

try {

const res = await fetch(GAS_URL, { method: 'POST', body: JSON.stringify({ action: 'getSettings' }) });

const result = await res.json();

if(result.status === 'success') {

// Simpan data dari database ke cache lokal

for (const [key, value] of Object.entries(result.data)) {

localStorage.setItem(key, value);

}

// Render ulang UI dengan data terbaru dari database

applySettingsToUI();

}

} catch(err) {

console.error("Gagal memuat pengaturan dari server", err);

}

function applySettingsToUI() {

const getVal = (key, def) => localStorage.getItem(key) || def;

const nama = getVal('app_nama_lembaga', 'Smart Absensi AI');

const profil = getVal('app_profil_singkat', 'Sistem Kiosk Berbasis Pengenalan Wajah memastikan pencatatan kehadiran yang akurat, cepat, dan terintegrasi penuh.');

const logo = getVal('app_logo_url', '');

const alamat = getVal('app_alamat', 'Jl. Jend. Sudirman No 1');

const tempatTtd = getVal('app_tempat_ttd', 'Jakarta');

const jAtasan = getVal('app_jenis_atasan', 'Kepala Instansi');

const nAtasan = getVal('app_nama_atasan', 'Dr. Budi M.Pd');

const idTAtasan = getVal('app_jenis_id_atasan', 'NIP');

const idNAtasan = getVal('app_nomor_id_atasan', '198001012005011001');

// Update Teks Layar

document.getElementById('ui-nama-lembaga').innerText = nama;

document.getElementById('ui-nav-title').innerText = nama.substring(0, 15) + (nama.length > 15 ? '...' : '');

document.getElementById('ui-profil-lembaga').innerText = profil;

// Update Input

document.getElementById('set-nama').value = nama;

document.getElementById('set-profil').value = profil;

document.getElementById('set-logo').value = logo;

document.getElementById('set-alamat').value = alamat;

document.getElementById('set-tempat-ttd').value = tempatTtd;

document.getElementById('set-jenis-atasan').value = jAtasan;

document.getElementById('set-nama-atasan').value = nAtasan;

document.getElementById('set-jenis-id-atasan').value = idTAtasan;

document.getElementById('set-nomor-id-atasan').value = idNAtasan;

// Update Logo Display

const updateLogoDisplay = (imgId, iconId, url) => {

const img = document.getElementById(imgId);

const icon = document.getElementById(iconId);

if (url && url.trim() !== "") {

img.src = url;

img.classList.remove('hidden');

if(icon) icon.style.display = 'none';

} else {

img.classList.add('hidden');

if(icon) icon.style.display = '';

}

};

updateLogoDisplay('img-landing', 'icon-landing', logo);

updateLogoDisplay('img-login', 'icon-login', logo);

updateLogoDisplay('img-nav', 'icon-nav', logo);

}

async function saveSettings() {

const nama = document.getElementById('set-nama').value.trim();

if(!nama) return showToast("Nama lembaga tidak boleh kosong", "error");

const settingsData = {

app_nama_lembaga: nama,

app_profil_singkat: document.getElementById('set-profil').value.trim(),

app_logo_url: document.getElementById('set-logo').value.trim(),

app_alamat: document.getElementById('set-alamat').value.trim(),

app_tempat_ttd: document.getElementById('set-tempat-ttd').value.trim(),

app_jenis_atasan: document.getElementById('set-jenis-atasan').value.trim(),

app_nama_atasan: document.getElementById('set-nama-atasan').value.trim(),

app_jenis_id_atasan: document.getElementById('set-jenis-id-atasan').value.trim(),

app_nomor_id_atasan: document.getElementById('set-nomor-id-atasan').value.trim()

};

// Simpan ke cache lokal agar langsung berubah di UI

for (const [key, value] of Object.entries(settingsData)) {

localStorage.setItem(key, value);

}

applySettingsToUI();

if (IS_PREVIEW) {

showToast("Pengaturan berhasil disimpan (Mode Preview)", "success");

} else {

const btn = document.getElementById('btn-save-settings');

const originalHtml = btn.innerHTML;

btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Menyimpan ke Database...';

btn.disabled = true;

try {

const res = await fetch(GAS_URL, {

method: 'POST',

body: JSON.stringify({ action: 'saveSettings', data: settingsData })

});

const result = await res.json();

if (result.status === 'success') {

showToast("Pengaturan tersimpan ke Database!", "success");

} else {

throw new Error(result.message);

}

} catch (err) {

showToast("Gagal menyimpan ke server: " + err.message, "error");

} finally {

btn.innerHTML = originalHtml;

btn.disabled = false;

}

/**

* ==========================================

* NAVIGASI & UI LOGIC

* ==========================================

function navigate(viewId) {

stopCamera('reg'); stopCamera('kiosk');

document.querySelectorAll('.view-section').forEach(el => el.classList.remove('active'));

document.getElementById(`view-${viewId}`).classList.add('active');

if (viewId === 'admin') { switchAdminTab('scanner'); fetchPegawaiData(); }

}

function switchAdminTab(tabName) {

document.querySelectorAll('.admin-tab').forEach(el => {

el.classList.remove('text-blue-700', 'md:bg-blue-100');

el.classList.add('text-gray-500');

});

let activeTab = document.getElementById(`tab-${tabName}`);

activeTab.classList.remove('text-gray-500');

activeTab.classList.add('text-blue-700', 'md:bg-blue-100');

document.querySelectorAll('.admin-content').forEach(el => {

el.classList.remove('block'); el.classList.add('hidden');

});

document.getElementById(`admin-content-${tabName}`).classList.remove('hidden');

document.getElementById(`admin-content-${tabName}`).classList.add('block');

stopCamera('kiosk'); stopCamera('reg');

if (tabName === 'register') startCamera('reg');

if (tabName === 'absensi') loadAndRenderRecap();

if (tabName === 'manual') initManualForm();

}

function toggleSidebar() {

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

isSidebarCollapsed = !isSidebarCollapsed;

if (isSidebarCollapsed) sidebar.classList.add('sidebar-collapsed');

else sidebar.classList.remove('sidebar-collapsed');

}

function showToast(message, type = 'info') {

const container = document.getElementById('toast-container');

const toast = document.createElement('div');

toast.className = `toast ${type}`;

const icon = type === 'error' ? 'fa-circle-exclamation' : (type === 'success' ? 'fa-circle-check' : 'fa-info-circle');

toast.innerHTML = `<i class="fa-solid ${icon} mr-2"></i> ${message}`;

container.appendChild(toast);

setTimeout(() => toast.classList.add('show'), 10);

setTimeout(() => { toast.classList.remove('show'); setTimeout(() => toast.remove(), 300); }, 3000);

}

/**

* ==========================================

* KAMERA LOGIC

* ==========================================

async function startCamera(mode) {

const video = document.getElementById(mode === 'reg' ? 'video-reg' : 'video-kiosk');

try {

currentStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" }, audio: false });

video.srcObject = currentStream;

if(mode === 'reg') {

document.getElementById('reg-status').innerHTML = "<i class='fa-solid fa-camera mr-2'></i>Kamera aktif.";

} else if (mode === 'kiosk') {

document.getElementById('kiosk-status').innerHTML = '<i class="fa-solid fa-video"></i> Scanner Aktif';

document.getElementById('kiosk-status').className = 'px-4 py-2 bg-green-100 text-green-700 rounded-full text-sm font-bold border border-green-200 shadow-sm flex items-center gap-2';

}

} catch (err) { showToast("Izin kamera ditolak atau kamera tidak ditemukan.", "error"); }

}

function stopCamera(mode) {

if (currentStream) { currentStream.getTracks().forEach(track => track.stop()); currentStream = null; }

if (scannerInterval) { clearInterval(scannerInterval); scannerInterval = null; }

if (mode === 'kiosk') {

document.getElementById('kiosk-status').innerHTML = '<i class="fa-solid fa-circle-dot"></i> Kamera Mati';

document.getElementById('kiosk-status').className = 'px-4 py-2 bg-red-100 text-red-700 rounded-full text-sm font-bold border border-red-200 shadow-sm flex items-center gap-2';

const canvas = document.getElementById('canvas-kiosk');

canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);

}

/**

* ==========================================

* FITUR: ABSEN MANUAL

* ==========================================

function initManualForm() {

if (cachedPegawai.length === 0) {

fetchPegawaiData().then(() => populateManualKategori());

} else {

populateManualKategori();

}

function populateManualKategori() {

const select = document.getElementById('manual-kategori');

const cats = [...new Set(cachedPegawai.map(p => p.kategori || 'Umum'))];

let html = '<option value="">-- Pilih Kategori --</option>';

cats.forEach(c => html += `<option value="${c}">${c}</option>`);

select.innerHTML = html;

document.getElementById('manual-nama').innerHTML = '<option value="">-- Pilih Kategori Dahulu --</option>';

}

function onManualKategoriChange() {

const kat = document.getElementById('manual-kategori').value;

const select = document.getElementById('manual-nama');

if(!kat) { select.innerHTML = '<option value="">-- Pilih Kategori Dahulu --</option>'; return; }

const filtered = cachedPegawai.filter(p => (p.kategori || 'Umum') === kat);

let html = '<option value="">-- Pilih Nama --</option>';

filtered.forEach(p => html += `<option value="${p.nama}">${p.identitas || '-'} - ${p.nama}</option>`);

select.innerHTML = html;

}

async function submitManualAbsen() {

const nama = document.getElementById('manual-nama').value;

const ket = document.getElementById('manual-status').value;

if (!nama || !ket) return showToast("Silakan pilih Nama dan Status Kehadiran!", "error");

const btn = document.getElementById('btn-submit-manual');

btn.disabled = true;

btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin text-lg"></i> Menyimpan...';

const ts = new Date().toLocaleString('id-ID'); // Waktu saat ini

try {

if (IS_PREVIEW) {

dummyAbsensi.push({ timestamp: ts, nama: nama, ket: ket });

cachedAbsensi = dummyAbsensi;

todayAttended.add(nama);

showToast(`Absen Manual (${ket}) berhasil disimpan!`, "success");

document.getElementById('manual-nama').value = '';

} else {

const payload = { action: 'recordAbsen', nama: nama, ket: ket, timestamp: ts };

const res = await fetch(GAS_URL, { method: 'POST', body: JSON.stringify(payload) });

const result = await res.json();

if(result.status === 'success') {

todayAttended.add(nama);

showToast(`Absen Manual (${ket}) berhasil disimpan!`, "success");

document.getElementById('manual-nama').value = '';

} else throw new Error(result.message);

}

} catch (err) {

showToast(err.message || "Gagal menyimpan absen", "error");

} finally {

btn.disabled = false;

btn.innerHTML = '<i class="fa-solid fa-save text-lg"></i> Simpan Ke Database';

}

/**

* ==========================================

* FITUR: REGISTRASI & LOGIN & PEGAWAI CRUD

* ==========================================

async function captureAndRegister() {

const nama = document.getElementById('reg-nama').value.trim();

const identitas = document.getElementById('reg-identitas').value.trim();

const kategori = document.getElementById('reg-kategori').value.trim() || 'Umum';

if (!nama || !identitas) return showToast("Nama dan Identitas wajib diisi!", "error");

const video = document.getElementById('video-reg');

const btn = document.getElementById('btn-rekam');

btn.disabled = true; btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Memindai...';

try {

const detection = await faceapi.detectSingleFace(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceDescriptor();

if (!detection) throw new Error("Wajah tidak terdeteksi dengan jelas.");

const descriptorJson = JSON.stringify(Array.from(detection.descriptor));

if (IS_PREVIEW) {

dummyPegawai.push({ id: 'AI-'+Date.now(), identitas: identitas, nama: nama, kategori: kategori, descriptor: descriptorJson });

setTimeout(() => { showToast(`Wajah ${nama} terdaftar!`, "success"); resetRegForm(); }, 1000);

} else {

const res = await fetch(GAS_URL, { method: 'POST', body: JSON.stringify({ action: 'registerFace', nama, identitas, kategori, descriptor: descriptorJson }) });

const result = await res.json();

if(result.status === 'success') { showToast("Registrasi berhasil!", "success"); resetRegForm(); }

else throw new Error(result.message);

}

} catch (err) { showToast(err.message, "error"); }

finally { btn.disabled = false; btn.innerHTML = '<i class="fa-solid fa-expand text-lg"></i> Pindai & Simpan Wajah'; }

}

function resetRegForm() {

document.getElementById('reg-nama').value = ""; document.getElementById('reg-identitas').value = ""; document.getElementById('reg-kategori').value = "";

fetchPegawaiData();

}

async function handleLogin(e) {

e.preventDefault();

const user = document.getElementById('login-user').value;

const pass = document.getElementById('login-pass').value;

const btn = document.getElementById('btn-login');

btn.disabled = true; btn.innerText = "Memverifikasi...";

try {

if (IS_PREVIEW) {

setTimeout(() => {

if (user === dummyAdmin.user && pass === dummyAdmin.pass) {

localStorage.setItem('app_is_logged_in', 'true');

showToast("Login Berhasil", "success");

document.getElementById('login-user').value = ''; document.getElementById('login-pass').value = '';

navigate('admin');

} else showToast("Username/Password salah!", "error");

btn.disabled = false; btn.innerText = "Masuk Sistem";

}, 800);

} else {

const res = await fetch(GAS_URL, { method: 'POST', body: JSON.stringify({ action: 'loginAdmin', user, pass }) });

const result = await res.json();

if(result.status === 'success') {

localStorage.setItem('app_is_logged_in', 'true');

showToast("Login Berhasil", "success");

document.getElementById('login-user').value = ''; document.getElementById('login-pass').value = '';

navigate('admin');

} else throw new Error(result.message);

}

} catch (err) { showToast(err.message, "error"); btn.disabled = false; btn.innerText = "Masuk Sistem"; }

}

function logout() { localStorage.removeItem('app_is_logged_in'); stopCamera('kiosk'); navigate('landing'); showToast("Anda telah keluar", "info"); }

async function fetchPegawaiData() {

const tbody = document.getElementById('table-pegawai');

if(tbody) tbody.innerHTML = '<tr><td colspan="4" class="p-6 text-center text-gray-500 font-medium">Memuat data...</td></tr>';

try {

if (IS_PREVIEW) { cachedPegawai = dummyPegawai; }

else {

const res = await fetch(GAS_URL, { method: 'POST', body: JSON.stringify({ action: 'getPegawai' }) });

const result = await res.json();

if(result.status === 'success') cachedPegawai = result.data;

}

labeledDescriptors = [];

cachedPegawai.forEach(p => {

try {

let arr = JSON.parse(p.descriptor);

if (arr && typeof arr === 'object' && !Array.isArray(arr)) arr = Object.values(arr);

if (Array.isArray(arr) && arr.length === 128) {

labeledDescriptors.push(new faceapi.LabeledFaceDescriptors(p.nama, [new Float32Array(arr.map(Number))]));

}

} catch(e) {}

});

if(tbody) {

if (cachedPegawai.length === 0) tbody.innerHTML = '<tr><td colspan="4" class="p-6 text-center text-gray-500 font-medium">Belum ada data.</td></tr>';

else tbody.innerHTML = cachedPegawai.map((p, i) => `<tr class="border-b hover:bg-gray-50"><td class="p-4 text-sm font-bold text-gray-600">${p.identitas||'-'}</td><td class="p-4 font-bold text-gray-800">${p.nama}</td><td class="p-4 text-xs font-bold text-gray-600">${p.kategori||'Umum'}</td><td class="p-4 text-right"><button onclick="hapusPegawai('${p.id}')" class="w-8 h-8 bg-red-50 text-red-500 hover:bg-red-500 hover:text-white rounded-lg transition"><i class="fa-solid fa-trash"></i></button></td></tr>`).join('');

}

} catch(err) { if(tbody) tbody.innerHTML = `<tr><td colspan="4" class="p-6 text-center text-red-500">Gagal memuat data.</td></tr>`; }

}

async function hapusPegawai(id) {

if(!confirm("Yakin ingin menghapus data wajah ini?")) return;

if (IS_PREVIEW) { dummyPegawai = dummyPegawai.filter(p => p.id !== id); showToast("Terhapus", "success"); fetchPegawaiData(); }

else {

const res = await fetch(GAS_URL, { method: 'POST', body: JSON.stringify({ action: 'deletePegawai', id }) });

const result = await res.json();

if(result.status === 'success') { showToast("Terhapus", "success"); fetchPegawaiData(); }

}

/**

* ==========================================

* FITUR: REKAP HARIAN & BULANAN & PDF

* ==========================================

function setRecapMode(mode) {

recapMode = mode;

const btnHarian = document.getElementById('btn-mode-harian');

const btnBulanan = document.getElementById('btn-mode-bulanan');

if(mode === 'harian') {

btnHarian.className = 'flex-1 md:w-32 py-2 px-4 bg-white text-blue-600 shadow-sm rounded-lg font-bold text-sm transition';

btnBulanan.className = 'flex-1 md:w-32 py-2 px-4 text-gray-500 hover:text-gray-700 rounded-lg font-bold text-sm transition';

document.getElementById('filter-date-container').classList.remove('hidden');

document.getElementById('filter-month-container').classList.add('hidden');

} else {

btnBulanan.className = 'flex-1 md:w-32 py-2 px-4 bg-white text-blue-600 shadow-sm rounded-lg font-bold text-sm transition';

btnHarian.className = 'flex-1 md:w-32 py-2 px-4 text-gray-500 hover:text-gray-700 rounded-lg font-bold text-sm transition';

document.getElementById('filter-month-container').classList.remove('hidden');

document.getElementById('filter-date-container').classList.add('hidden');

}

renderRecap();

}

async function syncTodayAttendance() {

try {

if (IS_PREVIEW) { cachedAbsensi = [...dummyAbsensi]; }

else {

const res = await fetch(GAS_URL, { method: 'POST', body: JSON.stringify({ action: 'getAbsensi' }) });

const result = await res.json();

if(result.status === 'success') cachedAbsensi = result.data;

}

const todayPrefix = new Date().toLocaleDateString('id-ID');

todayAttended.clear();

cachedAbsensi.forEach(a => { if (a.timestamp.includes(todayPrefix)) todayAttended.add(a.nama); });

} catch (err) { console.error(err); }

}

async function loadAndRenderRecap() {

document.getElementById('table-recap-harian').innerHTML = '<tr><td colspan="5" class="p-6 text-center text-gray-500 font-medium"><i class="fa-solid fa-spinner fa-spin mr-2"></i> Mensinkronisasi...</td></tr>';

if(cachedPegawai.length === 0) await fetchPegawaiData();

try {

await syncTodayAttendance();

updateCategoryFilter();

renderRecap();

} catch(err) { document.getElementById('table-recap-harian').innerHTML = `<tr><td colspan="5" class="p-6 text-center text-red-500">Gagal memuat rekap.</td></tr>`; }

}

function updateCategoryFilter() {

const select = document.getElementById('filter-kategori');

const val = select.value;

const cats = [...new Set(cachedPegawai.map(p => p.kategori || 'Umum'))];

let html = '<option value="Semua">Semua Kategori</option>';

cats.forEach(c => html += `<option value="${c}">${c}</option>`);

select.innerHTML = html;

if(cats.includes(val)) select.value = val;

}

function parseIdDateString(tsStr) {

const match = tsStr.match(/(\d+)[-/](\d+)[-/](\d+)/);

if(match) {

let p1 = parseInt(match[1]), p2 = parseInt(match[2]), p3 = parseInt(match[3]);

if(p1 > 31) return new Date(p1, p2-1, p3);

return new Date(p3, p2-1, p1);

}

return new Date();

}

function renderRecap() {

const tbody = document.getElementById('table-recap-harian');

const thead = document.getElementById('recap-table-head');

const filterKat = document.getElementById('filter-kategori').value;

currentPdfHead = recapMode === 'harian'

? [['Identitas', 'Nama Lengkap', 'Kategori', 'Status', 'Waktu']]

: [['Identitas', 'Nama Lengkap', 'Kategori', 'Total Kehadiran', 'Persentase']];

thead.innerHTML = recapMode === 'harian'

? '<th class="p-4">Identitas</th><th class="p-4">Nama Lengkap</th><th class="p-4">Kategori</th><th class="p-4">Status</th><th class="p-4">Waktu</th>'

: '<th class="p-4">Identitas</th><th class="p-4">Nama Lengkap</th><th class="p-4">Kategori</th><th class="p-4">Total Kehadiran</th><th class="p-4">Persentase</th>';

let basePegawai = cachedPegawai;

if (filterKat !== 'Semua') basePegawai = basePegawai.filter(p => (p.kategori || 'Umum') === filterKat);

currentPdfBody = [];

if (recapMode === 'harian') {

// --- MODE HARIAN ---

const dateInput = document.getElementById('filter-date').value;

if(!dateInput) return;

const [y, m, d] = dateInput.split('-');

const dayAbsen = cachedAbsensi.filter(a => parseIdDateString(a.timestamp).toDateString() === new Date(y, m-1, d).toDateString());

const dictAbsen = {};

dayAbsen.forEach(a => { dictAbsen[a.nama] = { ts: a.timestamp, ket: a.ket }; });

let tercatatCount = 0;

let html = '';

basePegawai.forEach(p => {

const absenData = dictAbsen[p.nama];

const isAbsen = absenData !== undefined;

if(isAbsen) tercatatCount++;

const ketStatus = isAbsen ? absenData.ket : 'Belum Absen';

const waktu = isAbsen ? absenData.ts.split(/[, ]+/)[1] || '-' : '-';

let statBadge = '';

if(ketStatus === 'Hadir') statBadge = '<span class="px-3 py-1 bg-green-100 text-green-700 border border-green-200 rounded-lg text-xs font-bold">Hadir</span>';

else if(ketStatus === 'Sakit') statBadge = '<span class="px-3 py-1 bg-yellow-100 text-yellow-700 border border-yellow-200 rounded-lg text-xs font-bold">Sakit</span>';

else if(ketStatus === 'Izin' || ketStatus === 'Cuti') statBadge = '<span class="px-3 py-1 bg-blue-100 text-blue-700 border border-blue-200 rounded-lg text-xs font-bold">'+ketStatus+'</span>';

else if(ketStatus === 'DL') statBadge = '<span class="px-3 py-1 bg-purple-100 text-purple-700 border border-purple-200 rounded-lg text-xs font-bold">Dinas Luar</span>';

else if(ketStatus === 'Belum Absen') statBadge = '<span class="px-3 py-1 bg-red-50 text-red-600 border border-red-200 rounded-lg text-xs font-bold">Belum/Alpa</span>';

else statBadge = `<span class="px-3 py-1 bg-gray-100 text-gray-700 border border-gray-200 rounded-lg text-xs font-bold">${ketStatus}</span>`;

currentPdfBody.push([p.identitas||'-', p.nama, p.kategori||'Umum', ketStatus, waktu]);

html += `<tr class="hover:bg-blue-50/30">

<td class="p-4 text-sm font-bold text-gray-600">${p.identitas||'-'}</td>

<td class="p-4 text-sm text-gray-600">${p.kategori||'Umum'}</td>

<td class="p-4">${statBadge}</td><td class="p-4 text-sm font-medium text-gray-700">${waktu}</td>

</tr>`;

});

document.getElementById('stat-label-2').innerText = "Sudah Tercatat";

document.getElementById('stat-label-3').innerText = "Belum/Alpa";

document.getElementById('stat-label-4').innerText = "Persentase Tercatat";

document.getElementById('stat-total').innerText = basePegawai.length;

document.getElementById('stat-val-2').innerText = tercatatCount;

document.getElementById('stat-val-3').innerText = basePegawai.length - tercatatCount;

document.getElementById('stat-val-4').innerText = basePegawai.length > 0 ? Math.round((tercatatCount/basePegawai.length)*100)+'%' : '0%';

tbody.innerHTML = html || '<tr><td colspan="5" class="p-6 text-center text-gray-500">Tidak ada data terdaftar.</td></tr>';

} else {

// --- MODE BULANAN ---

const monthInput = document.getElementById('filter-month').value;

if(!monthInput) return;

const [y, m] = monthInput.split('-');

const monthAbsen = cachedAbsensi.filter(a => {

const dt = parseIdDateString(a.timestamp);

return dt.getFullYear() == parseInt(y) && dt.getMonth() == parseInt(m)-1;

});

// Hari efektif = hari dimana minimal 1 orang absensi

const uniqueDays = new Set(monthAbsen.map(a => parseIdDateString(a.timestamp).getDate()));

const hariEfektif = uniqueDays.size || 1;

const hadirPerOrang = {};

monthAbsen.forEach(a => {

// Hitung Hadir dan Dinas Luar (DL) sebagai persentase kehadiran

if(a.ket === 'Hadir' || a.ket === 'DL') {

const dStr = parseIdDateString(a.timestamp).toDateString();

if(!hadirPerOrang[a.nama]) hadirPerOrang[a.nama] = new Set();

hadirPerOrang[a.nama].add(dStr);

}

});

let totalPersenAll = 0;

let html = '';

basePegawai.forEach(p => {

const totalHadir = hadirPerOrang[p.nama] ? hadirPerOrang[p.nama].size : 0;

const persen = Math.min(Math.round((totalHadir / hariEfektif) * 100), 100);

totalPersenAll += persen;

const color = persen >= 80 ? 'green' : (persen >= 50 ? 'orange' : 'red');

const badge = `<span class="px-3 py-1 bg-${color}-100 text-${color}-700 rounded-lg text-xs font-bold">${persen}%</span>`;

currentPdfBody.push([p.identitas||'-', p.nama, p.kategori||'Umum', `${totalHadir} Hari`, `${persen}%`]);

html += `<tr class="hover:bg-blue-50/30">

<td class="p-4 text-sm font-bold text-gray-600">${p.identitas||'-'}</td>

<td class="p-4 text-sm text-gray-600">${p.kategori||'Umum'}</td>

<td class="p-4 font-bold text-gray-700">${totalHadir} Hari</td>

<td class="p-4">${badge}</td>

</tr>`;

});

const avgPersen = basePegawai.length > 0 ? Math.round(totalPersenAll / basePegawai.length) : 0;

document.getElementById('stat-label-2').innerText = "Hari Efektif";

document.getElementById('stat-label-3').innerText = "Total Data Log";

document.getElementById('stat-label-4').innerText = "Rata-rata Kehadiran";

document.getElementById('stat-total').innerText = basePegawai.length;

document.getElementById('stat-val-2').innerText = hariEfektif;

document.getElementById('stat-val-3').innerText = monthAbsen.length;

document.getElementById('stat-val-4').innerText = avgPersen + '%';

tbody.innerHTML = html || '<tr><td colspan="5" class="p-6 text-center text-gray-500">Tidak ada data terdaftar.</td></tr>';

}

// --- FUNGSI DOWNLOAD PDF ---

function getBase64ImageFromURL(url) {

return new Promise((resolve, reject) => {

var img = new Image();

img.setAttribute("crossOrigin", "anonymous");

img.onload = () => {

var canvas = document.createElement("canvas");

canvas.width = img.width; canvas.height = img.height;

var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0);

resolve(canvas.toDataURL("image/png"));

};

img.onerror = error => reject(error);

img.src = url;

});

}

async function downloadPDF() {

if(currentPdfBody.length === 0) return showToast("Tabel kosong, tidak ada data untuk dicetak", "error");

showToast("Menyiapkan Dokumen PDF...", "info");

const { jsPDF } = window.jspdf;

const doc = new jsPDF('p', 'mm', 'a4');

const nLembaga = localStorage.getItem('app_nama_lembaga') || 'Sistem Absensi';

const alamat = localStorage.getItem('app_alamat') || '-';

const tempatTtd = localStorage.getItem('app_tempat_ttd') || 'Jakarta';

const jAtasan = localStorage.getItem('app_jenis_atasan') || 'Pimpinan';

const nAtasan = localStorage.getItem('app_nama_atasan') || 'Nama Pimpinan';

const idTAtasan = localStorage.getItem('app_jenis_id_atasan') || 'NIP';

const idNAtasan = localStorage.getItem('app_nomor_id_atasan') || '-';

const logoUrl = localStorage.getItem('app_logo_url') || '';

if (logoUrl) {

try {

const base64Img = await getBase64ImageFromURL(logoUrl);

doc.addImage(base64Img, 'PNG', 15, 10, 22, 22);

} catch(e) { console.warn("Logo gagal dimuat ke PDF karena aturan CORS server gambar."); }

}

doc.setFontSize(16); doc.setFont("helvetica", "bold");

doc.text(nLembaga.toUpperCase(), 105, 18, { align: "center" });

doc.setFontSize(10); doc.setFont("helvetica", "normal");

doc.text(alamat, 105, 24, { align: "center" });

doc.setLineWidth(0.5); doc.line(15, 32, 195, 32);

doc.setFontSize(12); doc.setFont("helvetica", "bold");

const title = recapMode === 'harian' ? 'LAPORAN REKAPITULASI KEHADIRAN HARIAN' : 'LAPORAN REKAPITULASI KEHADIRAN BULANAN';

doc.text(title, 105, 42, { align: "center" });

doc.setFontSize(10); doc.setFont("helvetica", "normal");

// Format Bulan Indonesia

const monthNames = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];

let periodStr = "";

if (recapMode === 'harian') {

const dt = document.getElementById('filter-date').value.split('-');

periodStr = `${dt[2]} ${monthNames[parseInt(dt[1])-1]} ${dt[0]}`;

} else {

const dt = document.getElementById('filter-month').value.split('-');

periodStr = `${monthNames[parseInt(dt[1])-1]} ${dt[0]}`;

}

doc.text(`Periode: ${periodStr} | Kategori: ${document.getElementById('filter-kategori').value}`, 105, 48, { align: "center" });

doc.autoTable({

startY: 55,

head: currentPdfHead,

body: currentPdfBody,

theme: 'grid',

headStyles: { fillColor: [37, 99, 235], textColor: [255, 255, 255], fontStyle: 'bold' },

styles: { fontSize: 9, cellPadding: 3 },

alternateRowStyles: { fillColor: [240, 249, 255] }

});

const finalY = doc.lastAutoTable.finalY + 15;

const datePrinted = new Date().toLocaleDateString('id-ID', { year: 'numeric', month: 'long', day: 'numeric' });

doc.setFontSize(10);

doc.text(`${tempatTtd}, ${datePrinted}`, 140, finalY);

doc.text(`Mengetahui,`, 140, finalY + 5);

doc.text(jAtasan, 140, finalY + 10);

doc.setFont("helvetica", "bold");

doc.text(nAtasan, 140, finalY + 30);

doc.setFont("helvetica", "normal");

doc.text(`${idTAtasan}. ${idNAtasan}`, 140, finalY + 35);

doc.save(`Laporan_Absensi_${recapMode}_${periodStr.replace(/\s+/g, '_')}.pdf`);

showToast("PDF Berhasil Diunduh!", "success");

}

/**

* ==========================================

* FITUR 4: KIOSK SCANNER (AUTO ABSEN)

* ==========================================

async function startKioskScanner() {

stopCamera('kiosk');

showToast("Mensinkronisasi data...", "info");

if (labeledDescriptors.length === 0) await fetchPegawaiData();

await syncTodayAttendance();

const validDescriptors = labeledDescriptors.filter(ld => ld.descriptors.length > 0 && ld.descriptors[0].length === 128);

if (validDescriptors.length === 0) return showToast("Tidak ada data wajah AI yang valid.", "error");

faceMatcher = new faceapi.FaceMatcher(validDescriptors, 0.55);

await startCamera('kiosk');

const video = document.getElementById('video-kiosk');

const canvas = document.getElementById('canvas-kiosk');

video.onplay = () => {

const displaySize = { width: video.videoWidth, height: video.videoHeight };

faceapi.matchDimensions(canvas, displaySize);

if (scannerInterval) clearInterval(scannerInterval);

scannerInterval = setInterval(async () => {

try {

const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceDescriptors();

const resizedDetections = faceapi.resizeResults(detections, displaySize);

canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);

resizedDetections.forEach(d => {

if (d && d.descriptor && d.descriptor.length === 128) {

const result = faceMatcher.findBestMatch(d.descriptor);

const box = d.detection.box;

let text = result.label, boxColor = 'green';

if (result.label === 'unknown') { text = 'Tidak Dikenali'; boxColor = 'red'; }

else {

if (todayAttended.has(result.label)) { text = `${result.label} (Sudah Absen)`; boxColor = 'orange'; }

else { text = `${result.label} (${Math.round(result.distance * 100)})`; boxColor = 'green'; triggerAbsen(result.label, 'Hadir'); }

}

const drawBox = new faceapi.draw.DrawBox(box, { label: text, boxColor: boxColor });

drawBox.draw(canvas);

}

});

} catch (err) {}

}, 500);

};

}

// Modified: Menerima status khusus (Hadir/Sakit/Izin dll)

async function triggerAbsen(nama, ketStatus) {

const now = Date.now();

if (todayAttended.has(nama)) return;

if (cooldownMap[nama] && (now - cooldownMap[nama] < 5000)) return;

cooldownMap[nama] = now; todayAttended.add(nama);

logToKiosk(nama, `Tercatat: ${ketStatus}`, "success");

try { const ctx = new (window.AudioContext || window.webkitAudioContext)(); const osc = ctx.createOscillator(); osc.type = "sine"; osc.frequency.setValueAtTime(800, ctx.currentTime); osc.connect(ctx.destination); osc.start(); osc.stop(ctx.currentTime + 0.1); } catch(e) {}

const ts = new Date().toLocaleString('id-ID');

if (IS_PREVIEW) { dummyAbsensi.push({ timestamp: ts, nama: nama, ket: ketStatus }); cachedAbsensi = dummyAbsensi; }

else fetch(GAS_URL, { method: 'POST', body: JSON.stringify({ action: 'recordAbsen', nama: nama, ket: ketStatus, timestamp: ts }) });

}

function logToKiosk(nama, status, type) {

const logDiv = document.getElementById('kiosk-log');

const timeStr = new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit' });

if(logDiv.innerHTML.includes('Belum ada absen')) logDiv.innerHTML = '';

const logItem = document.createElement('div');

logItem.className = 'p-3 bg-green-50 border border-green-200 rounded-xl text-sm flex items-center gap-4 shadow-sm animate-fade-in mb-3';

logItem.innerHTML = `<i class="fa-solid fa-check-circle text-green-500 text-3xl drop-shadow-sm"></i> <div class="flex-1"><p class="font-extrabold text-gray-800 text-base">${nama}</p><p class="text-xs text-green-700 font-bold">${timeStr} - ${status}</p></div>`;

logDiv.prepend(logItem);

}

</script>

</body>

</html>

LUTHFI IGI

Saturday, May 9, 2026

0 Comments:

Post a Comment

About Me

Previous Posts