Buatkan saya sebuah aplikasi web lengkap "Sistem Administrasi Guru Digital (EdAdmin Pro)" yang berfungsi sebagai portal satu pintu untuk guru dalam mengelola administrasi kelas.
Aplikasi ini menggunakan arsitektur Headless (Frontend terpisah dari Backend):
- **Frontend:** Menggunakan HTML5 murni, Tailwind CSS untuk styling, dan Vanilla JavaScript (SPA - Single Page Application). Dirancang agar bisa dipasang di Blogger/Blogspot (disesuaikan dengan tag XML Blogger) atau di-hosting di platform statis.
- **Backend & Database:** Menggunakan Google Apps Script (GAS) yang terhubung ke Google Spreadsheet sebagai databasenya, dengan metode komunikasi REST API (JSON).
Berikut adalah spesifikasi detail untuk setiap komponen yang wajib Anda buat:
### 1. STRUKTUR DATABASE (GOOGLE SPREADSHEET & GAS)
Buatkan kode `backend.gs` dengan fungsi `SETUP_DATABASE()` yang akan otomatis membuat sheet/tabel berikut jika belum ada:
1. **Config:** [Key, Value] -> Menyimpan pengaturan aplikasi (Nama Sekolah, Kepsek, NIP, Logo, dll).
2. **DataSiswa:** [ID, NISN, Nama Siswa, Kelas] -> Master data siswa.
3. **Mapel:** [ID, Nama Mapel, Semester, Tahun Ajaran] -> Master data mata pelajaran.
4. **Jadwal:** [ID, Hari, Jam, Kelas, Mapel] -> Master jadwal mengajar.
5. **Absensi:** [Waktu, Kelas, Mapel, ID_Siswa, Nama Siswa, Status, Nama Guru, Bulan, Tahun] -> Data absensi (Hadir, Izin, Sakit, Alpa).
6. **Nilai:** [Waktu, Jenis, Mapel, Kelas, ID_Siswa, Nama Siswa, Nilai, Nama Guru] -> Data nilai (Tugas 1, UH 1, UTS, dll).
7. **Agenda:** [Tanggal, Jam, Kelas, Mapel, Materi, Status, Absen Siswa, Ket, Nama Guru] -> Jurnal harian guru.
8. **SiswaBimbingan:** [ID, Nama Siswa, Kelas] -> Daftar siswa perwalian.
9. **BimbinganWali:** [Tanggal, Nama Siswa, Kelas, Jenis, Kasus, Tindak Lanjut, Guru Wali] -> Catatan kasus siswa.
**Logika API Backend (doGet & doPost):**
- **doGet(e):** Jika parameter `action=all`, kembalikan seluruh isi database di atas dalam format JSON (Array of Objects). Tangani formatting tanggal agar tidak terjadi error zona waktu (gunakan `slice(-2)` untuk format YYYY-MM-DD).
- **doPost(e):** Buat sistem *routing* untuk menerima data JSON dari frontend.
- **CRITICAL (Proteksi Anti-Duplikat / Upsert):** Pada fungsi `handleAbsensi`, `handlePenilaian`, dan `handleSaveSiswaBulk`, WAJIB ada logika yang mengecek apakah data dengan ID yang sama di tanggal/jenis yang sama sudah ada. Jika ada, UPDATE baris tersebut. Jika tidak ada, INSERT baris baru. Jangan sampai data beranak-pinak saat tombol simpan diklik berkali-kali.
### 2. DESAIN FRONTEND (HTML + TAILWIND CSS)
Buatkan satu file HTML (atau XML untuk Blogger) yang menampung seluruh UI.
- Gunakan Tailwind CSS via CDN.
- Gunakan FontAwesome untuk ikon.
- Buat tata letak layout dengan Sidebar di kiri (dapat disembunyikan di versi mobile) dan Konten Utama di kanan.
- Pastikan desain 100% responsif (Gunakan `overflow-x-auto` pada tabel dan `min-w-[...]px` agar tidak rusak di layar HP). Tabel zebra striping (selang-seling warna) untuk kemudahan membaca di HP.
- Terapkan dark mode (opsional via tombol toggle).
### 3. FITUR & LOGIKA FRONTEND (JAVASCRIPT)
Aplikasi beroperasi secara *Single Page Application* (SPA), pindah halaman cukup dengan menyembunyikan/menampilkan div menggunakan class `hidden`.
**Menu yang harus ada:**
1. **Dashboard:** Menampilkan statistik (Total Siswa, Kelas, Mapel, Persentase Kehadiran Hari ini). Tambahkan 2 grafik menggunakan `Chart.js`: Bar Chart (Kehadiran 7 hari terakhir) dan Line Chart (Rata-rata nilai tiap Mapel).
2. **Kelola Siswa & Mapel:** Form input manual + tabel daftar. Khusus Siswa, tambahkan tombol "Template Excel" dan "Upload Excel" yang menggunakan library `SheetJS (xlsx)`. Pastikan input Excel membaca kolom secara dinamis dan mendeteksi NISN ganda.
3. **Jadwal Mengajar:** Form input dan tabel.
4. **Input Absensi:** Input tanggal, dropdown Kelas, dropdown Mapel. Tabel memuat nama siswa berdasarkan kelas yang dipilih. Input berupa 4 Radio Button (Hadir, Izin, Sakit, Alpa) berjejer ke samping agar ramah mobile. Tambahkan tombol "Hadir Semua".
5. **Input Penilaian:** Dropdown Kelas, Mapel, dan Input text untuk "Jenis" (misal: "Tugas 1"). Tabel hanya menampilkan 1 kolom input angka untuk setiap siswa (Single Column Input).
6. **Agenda Mengajar:** Form input jurnal harian guru.
7. **Bimbingan Wali:** Terdiri dari 2 form. Form 1: Daftarkan siswa perwalian secara manual. Form 2: Input catatan kasus berdasarkan siswa yang sudah didaftarkan (dropdown siswa otomatis memunculkan nama dan mengisi kelasnya).
8. **Pusat Cetak Laporan:** Menggunakan library `jsPDF` dan `jsPDF-AutoTable`. Sediakan tombol untuk mencetak:
- Rekap Absensi (Olah data absensi per bulan menjadi tabel persentase).
- Riwayat Absensi.
- Leger Nilai (Cari semua 'Jenis' nilai yang ada, jadikan kolom-kolom baru, lalu hitung Total dan Rata-rata akhirnya).
- Riwayat Penilaian.
- Jurnal Agenda & Laporan Bimbingan Wali.
*Kop Surat Laporan:* Harus mengambil data secara dinamis dari menu Pengaturan (Nama Pemerintah, Sekolah, Alamat, Logo, dan Tanda Tangan Kepsek & Guru).
*Barcode:* Inject `JsBarcode` di kanan atas PDF yang berisi kode Sekolah + Timestamp.
9. **Pengaturan:** Form untuk mengisi profil sekolah (Logo URL, Nama, NIP Kepsek, Nama Guru, dll). Data ini dikirim ke backend dan langsung disimpan di local state agar tidak hilang saat reload.
### 4. ALUR SINKRONISASI (CORS & FETCH)
- Gunakan `fetch` API.
- Tampilkan overlay loading menggunakan `SweetAlert2` saat melakukan fetching data awal. Tampilkan status koneksi di header (Online/Offline/Syncing).
- Untuk melewati blokir CORS dari Google Apps Script, pastikan *request* menggunakan `method: 'POST'` dengan `headers: { 'Content-Type': 'text/plain;charset=utf-8' }` dan kembalian dari backend harus menggunakan `ContentService.createTextOutput().setMimeType(ContentService.MimeType.JSON)`.
### 5. PANDUAN INSTALASI
Sertakan langkah-langkah detail cara mengimplementasikan kode yang Anda buat:
1. Cara membuat Spreadsheet dan setup Apps Script.
2. Cara melakukan Deployment di GAS untuk mendapatkan Web App URL (Penting: Akses ke "Anyone").
3. Cara memasukkan URL tersebut ke Frontend (Blogger/HTML lokal).
Tolong buatkan kodenya secara lengkap, stabil, modular, dan bersih!
