Bertindaklah sebagai Full-Stack Developer Ahli yang mahir dalam Google Apps Script (GAS), Bootstrap 5, dan integrasi API PDF. Buatkan saya "Aplikasi Web E-Tabungan Siswa" yang memiliki 2 file: `Code.gs` (Backend) dan `Index.html` (Frontend).
Berikut adalah spesifikasi wajib yang harus diikuti dengan ketat:
1. ARSITEKTUR BACKEND (Code.gs)
- Auto-Generate Sheets: Buat fungsi untuk otomatis membuat sheet 'Siswa', 'Transaksi', dan 'Config' jika belum ada. Berikan data default untuk Config (Nama Sekolah, Kelas, Nama Guru, Tempat Tanda Tangan).
- Kalkulasi Saldo Dinamis (Anti-Selisih): Jangan menggunakan angka saldo mati/statis. Saat memuat data siswa, hitung saldo secara real-time berdasarkan riwayat di sheet 'Transaksi' (Setor = tambah, Tarik = kurang).
- Validasi Keamanan: Jika jenis transaksi "Tarik" melebihi saldo aktual, tolak transaksi.
- Zona Waktu Paten: Gunakan `Utilities.formatDate(..., "Asia/Jakarta", "dd/MM/yyyy")` untuk semua penarikan data tanggal agar tidak mundur 1 hari.
2. ARSITEKTUR FRONTEND (Index.html) & UI/UX
- Framework: Gunakan Bootstrap 5, FontAwesome, Google Font 'Poppins', dan SweetAlert2 untuk notifikasi loading/sukses/error yang elegan.
- Navigasi Mobile-Friendly: Buat 5 menu tab (Dashboard, Transaksi, Data Saldo, Laporan, Setup). Pada tampilan mobile, menu harus sejajar ke samping (bisa di-scroll horizontal tanpa scrollbar), tidak boleh bertumpuk. Pada desktop, menu berada di tengah.
- Dashboard Interaktif: Gunakan Chart.js. Tampilkan 4 kartu ringkasan (Total Siswa, Total Penyetoran, Total Penarikan, Total Saldo). Di bawahnya, buat 2 grafik: Doughnut Chart (Rasio Setor vs Tarik) dan Bar Chart (Total Saldo). Terdapat juga tombol akses cepat ke menu lain.
- Input Tanggal: Gunakan zona waktu lokal browser pengguna untuk default input `type="date"` agar akurat.
- Fitur Setup: Form untuk mengubah identitas sekolah dan input siswa massal (bulk insert) via textarea.
3. ENGINE CETAK PDF (SANGAT KRUSIAL - BACA DENGAN TELITI)
- Dilarang Menggunakan html2pdf/html2canvas: Untuk menghindari bug PDF blank atau terpotong di HP, gunakan MURNI kombinasi `jsPDF` dan `jspdf-autotable`.
- Trik Hidden Assets: Buat elemen div tersembunyi (di luar layar) untuk merender QR Code (menggunakan qrcode.js) dan Barcode (menggunakan JsBarcode). Konversi canvas tersebut menjadi Base64 image, lalu injeksikan/tambahkan ke dalam jsPDF menggunakan `doc.addImage()`.
- Dua Format Cetak (Kertas A4 Presisi):
a. Buku Tabungan (Per Siswa): Memiliki header kotak berwarna biru (menggunakan doc.setFillColor), menampilkan nama & barcode siswa, tabel transaksi lengkap (warna hijau untuk masuk, merah untuk keluar), dan diakhiri dengan tanda tangan + QR Code validasi guru.
b. Laporan Bulanan (Per Kelas): Format surat resmi (kop surat bergaris), ada rangkuman Saldo Awal dan Total Saldo Akhir, tabel rekapitulasi transaksi seluruh siswa pada bulan terpilih, dan tanda tangan + QR Code di bawahnya.
- Download Mobile Safe: Gunakan metode blob URL (`URL.createObjectURL(blob)`) yang disisipkan ke tag `
` sementara, lalu di-klik otomatis lewat JS agar file PDF berhasil terunduh di semua merk HP (Android/iOS).
- Page Break: Gunakan settingan pada autotable agar baris tabel dan area tanda tangan tidak terbelah di tengah halaman.
4. KEAMANAN & COPYRIGHT
- Tambahkan div footer bertuliskan "© 2026 yefriharyanto.id | Developed by Yefri Haryanto".
- Buat script interval (anti-tamper) yang mengecek setiap 2 detik. Jika teks "Developed by Yefri Haryanto" diubah, disembunyikan, atau dihapus, ubah seluruh layar menjadi hitam total seketika.
Pastikan kode yang diberikan lengkap tanpa ada yang terpotong. Tolong berikan kode Code.gs dan Index.html secara utuh.
