Source Code Aplikasi Administrasi Guru Lengkap (Absensi, Nilai, Jurnal, Guru Wali, Modul Ajar) lengkap dalam 1 Aplikasi untuk 1 Sekolah

Di era digitalisasi pendidikan 5.0, pengelolaan administrasi guru yang masih mengandalkan kertas (konvensional) sudah tidak lagi relevan. Bayangkan tumpukan absensi, buku nilai, jurnal harian, hingga catatan bimbingan siswa yang rentan hilang, rusak, dan sulit direkapitulasi.

Mengapa Harus Beralih ke Digital?
Administrasi manual memboroskan waktu guru yang seharusnya fokus pada pengajaran. Dengan sistem digital, semua data tersimpan aman di Cloud, otomatis terhitung, dan bisa diakses dari HP kapan saja.

Solusi: Sistem Administrasi Guru Berbasis Google AppScript

Aplikasi yang saya bagikan ini dibangun menggunakan Google AppScript. Ini adalah solusi Serverless gratis dari Google yang mengubah Google Sheets menjadi aplikasi web (Web App) yang canggih.

Kelebihan Menggunakan AppScript:

100% Gratis & Aman

Tidak perlu beli domain atau hosting. Database menggunakan Google Sheets di akun Drive Anda sendiri.

Mobile Friendly

Tampilan aplikasi responsif, mirip aplikasi Native Android/iOS saat dibuka di HP.

Fitur AI Generator

Sudah terintegrasi dengan link Generator Modul Ajar otomatis untuk membantu guru.

Cetak PDF Otomatis

Rekap absensi, leger nilai, dan jurnal mengajar bisa langsung dicetak ke PDF dalam sekali klik.

Langkah Instalasi (Deploy)

Buka Google Laman script.google.com.
Buka Project Baru, beri nama (Misalnya: DB_ADMINISTRASI_SEKOLAH_LENGKAP).
Klik menu di bawahnya Code gs > ctrl+A.
Hapus kode bawaan (myFunction).
Copy Kode GS (Backend) di bawah dan Paste di file Code.gs.
Buat file HTML baru dengan klik tanda (+) > pilih HTML > beri nama Index.
Copy Kode HTML (Frontend) di bawah dan Paste di file Index.html.
Klik tombol Deploy (Terapkan) > New Deployment > Pilih type Web App.
Set Access ke Anyone (Siapa Saja) > Klik Deploy. Selesai!

1. Kode Backend (Code.gs)

Salin seluruh kode di bawah ini ke dalam file Code.gs di editor Apps Script Anda.

Code.gs

/**
 * SISTEM ADMINISTRASI GURU v3.0 (PREMIUM UI)
 * Updated: Jan 2026
 */

const DB_NAME = "DB_ADMINISTRASI_SEKOLAH_LENGKAP"; 

function doGet() {
  return HtmlService.createTemplateFromFile('Index')
      .evaluate()
      .setTitle('Sistem Administrasi Guru')
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
      .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

// --- DATABASE CORE ---
function openDatabase() {
  const files = DriveApp.getFilesByName(DB_NAME);
  if (files.hasNext()) {
    return SpreadsheetApp.open(files.next());
  } else {
    const ss = SpreadsheetApp.create(DB_NAME);
    setupStructure(ss);
    return ss;
  }
}

function setupStructure(ss) {
  const struct = [
    { name: "Config", headers: ["Key", "Value"] }, 
    { name: "Kelas", headers: ["Nama Kelas"] }, 
    { name: "Mapel", headers: ["Nama Mapel"] }, 
    { name: "Users", headers: ["Nama", "Role", "MapelAmpuan", "Status"] }, 
    { name: "DataSiswa", headers: ["No", "Nama Siswa", "Kelas"] },
    { name: "Absensi", headers: ["Waktu", "Kelas", "Mapel", "PertemuanKe", "Tanggal", "Nama Siswa", "Status", "Nama Guru", "Bulan", "Tahun"] },
    { name: "Nilai", headers: ["Waktu", "JudulPenilaian", "Mapel", "Kelas", "Nama Siswa", "Nilai", "Nama Guru"] }, 
    { name: "Agenda", headers: ["Hari/Tgl", "Jam", "Kelas", "Mapel", "Materi", "Status", "Ketuntasan", "JmlHadir", "JmlTdkHadir", "PertemuanKe", "Nama Guru"] },
    { name: "SiswaBimbingan", headers: ["Nama Siswa", "Kelas", "Guru Wali"] },
    { name: "BimbinganWali", headers: ["Tanggal", "Nama Siswa", "Kelas", "Jenis Bimbingan", "Masalah/Topik", "Solusi/Hasil", "Guru Wali"] }
  ];

  struct.forEach(s => {
    let sheet = ss.getSheetByName(s.name);
    if (!sheet) {
      sheet = ss.insertSheet(s.name);
      sheet.appendRow(s.headers);
      sheet.getRange(1, 1, 1, s.headers.length).setFontWeight("bold").setBackground("#1e3a8a").setFontColor("white");
    }
  });

  const cS = ss.getSheetByName("Config");
  if(cS.getLastRow()<2) {
    cS.appendRow(["Nama Sekolah", "SMP NEGERI 3 KERINCI"]);
    cS.appendRow(["Link Spreadsheet", ""]); // Default kosong
  }
  const uS = ss.getSheetByName("Users");
  if(uS.getLastRow()<2) uS.appendRow(["Administrator", "Admin", "Semua", "Aktif"]); 
}

// --- API UMUM ---
function getConfig() {
  const ss = openDatabase();
  const data = ss.getSheetByName("Config").getDataRange().getValues();
  let conf = {}; data.forEach(r => { if(r[0]) conf[r[0]] = r[1]; });
  return conf;
}

function getUsers() {
  const ss = openDatabase();
  const data = ss.getSheetByName("Users").getDataRange().getValues();
  return data.slice(1).filter(r => r[0] !== "" && r[3] === "Aktif").map(r => ({ nama: r[0], role: r[1], mapel: r[2] }));
}

function getMasterData() {
  const ss = openDatabase();
  const sMapel = ss.getSheetByName("Mapel");
  const sKelas = ss.getSheetByName("Kelas");
  const mapel = sMapel.getLastRow() > 1 ? sMapel.getRange(2, 1, sMapel.getLastRow()-1, 1).getValues().flat().filter(String) : [];
  const kelas = sKelas.getLastRow() > 1 ? sKelas.getRange(2, 1, sKelas.getLastRow()-1, 1).getValues().flat().filter(String) : [];
  return { mapel: mapel, kelas: kelas };
}

// --- MODULE ADMIN ---
function saveConfig(key, val) { 
  const s = openDatabase().getSheetByName("Config"); 
  const data = s.getDataRange().getValues();
  let found = false;
  // Update jika ada
  for(let i=0; i<data.length; i++){
    if(data[i][0] == key){
      s.getRange(i+1, 2).setValue(val);
      found = true;
      break;
    }
  }
  // Insert jika baru
  if(!found) s.appendRow([key, val]);
  return "Berhasil disimpan";
}

function tambahUser(n,r,m) { openDatabase().getSheetByName("Users").appendRow([n,r,m,"Aktif"]); return "User Ditambahkan"; }
function hapusUser(n) { const s=openDatabase().getSheetByName("Users"); const d=s.getDataRange().getValues(); for(let i=0; i<d.length; i++){if(d[i][0]==n){s.deleteRow(i+1);break;}} return "User Dihapus"; }
function tambahKelasBaru(n) { openDatabase().getSheetByName("Kelas").appendRow([n]); return "Kelas Ditambahkan"; }
function hapusKelas(n) { const s=openDatabase().getSheetByName("Kelas"); const d=s.getDataRange().getValues(); for(let i=d.length-1; i>=0; i--){if(d[i][0]==n){s.deleteRow(i+1);}} return "Kelas Dihapus"; }
function tambahMapelBaru(n) { openDatabase().getSheetByName("Mapel").appendRow([n]); return "Mapel Ditambahkan"; }
function hapusMapel(n) { const s=openDatabase().getSheetByName("Mapel"); const d=s.getDataRange().getValues(); for(let i=d.length-1; i>=0; i--){if(d[i][0]==n){s.deleteRow(i+1);}} return "Mapel Dihapus"; }

// --- MODULE SISWA ---
function importSiswaBulk(arr, kls) {
  const s = openDatabase().getSheetByName("DataSiswa");
  let last = s.getLastRow(); let rows = [];
  arr.forEach(n => { if(n && n.trim()!=="") { rows.push([last, n.trim(), kls]); last++; } });
  if(rows.length>0) s.getRange(s.getLastRow()+1, 1, rows.length, 3).setValues(rows);
  return rows.length + " Siswa Berhasil Disimpan";
}
function getSiswaByKelas(k) {
  const s = openDatabase().getSheetByName("DataSiswa");
  if(s.getLastRow() < 2) return [];
  const data = s.getRange(2, 2, s.getLastRow() - 1, 2).getValues();
  return data.filter(r => r[1].toString().trim().toUpperCase() === k.toString().trim().toUpperCase()).map(r => r[0]).sort();
}

// --- MODULE ABSENSI ---
function simpanAbsensiServer(kelas, mapel, pert, tgl, guru, data) {
  if (!data || data.length === 0) return "Tidak ada data siswa.";
  const ss = openDatabase();
  const sheet = ss.getSheetByName("Absensi");
  const time = new Date();
  const tglObj = new Date(tgl);
  const bln = tglObj.getMonth() + 1;
  const thn = tglObj.getFullYear();
  const rows = data.map(d => [time, kelas, mapel, pert, tgl, d.nama, d.status, guru, bln, thn]);
  sheet.getRange(sheet.getLastRow()+1, 1, rows.length, 10).setValues(rows);
  return "Absensi Tersimpan!";
}

function getLaporanAbsensi(kelas, mapel, bulan, tahun) {
  const ss = openDatabase();
  const sheet = ss.getSheetByName("Absensi");
  const siswaList = getSiswaByKelas(kelas);
  if (siswaList.length === 0) return { error: "Belum ada siswa di kelas ini" };

  let data = [];
  if (sheet.getLastRow() > 1) {
    data = sheet.getRange(2, 1, sheet.getLastRow()-1, 10).getValues();
  }
  
  const filtered = data.filter(r => r[1] == kelas && r[2] == mapel && r[8] == bulan && r[9] == tahun);

  let meetings = {}; 
  filtered.forEach(r => {
    let p = r[3]; let t = r[4]; let w = r[0];
    let d = new Date(t);
    let dtStr = d.getDate() + "/" + (d.getMonth()+1);
    let jamStr = "";
    if (w instanceof Date) {
        let jam = w.getHours().toString().padStart(2, '0');
        let mnt = w.getMinutes().toString().padStart(2, '0');
        jamStr = `${jam}:${mnt}`;
    }
    meetings[p] = { tgl: dtStr, jam: jamStr };
  });
  
  let sortedKeys = Object.keys(meetings).sort((a,b) => parseInt(a)-parseInt(b));
  
  let result = siswaList.map((nama, idx) => {
    let stats = { S:0, I:0, A:0, H:0 };
    let rowDetail = {};
    sortedKeys.forEach(m => rowDetail[m] = "-"); 
    
    const myLogs = filtered.filter(r => r[5] === nama);
    myLogs.forEach(r => {
       let p = r[3]; let st = r[6];
       let code = st.charAt(0);
       if(st=='Sakit') { stats.S++; code='S'; }
       else if(st=='Izin') { stats.I++; code='I'; }
       else if(st=='Alpa') { stats.A++; code='A'; }
       else { stats.H++; code='H'; }
       rowDetail[p] = code;
    });
    
    let totalP = sortedKeys.length;
    let persen = totalP > 0 ? Math.round((stats.H / totalP) * 100) : 0;
    
    return {
      no: idx+1, nama: nama,
      s: stats.S, i: stats.I, a: stats.A, h: stats.H,
      persen: persen,
      detail: rowDetail
    };
  });
  
  return { rekap: result, cols: sortedKeys.map(k => ({ p: k, info: meetings[k] })) };
}

// --- MODULE NILAI ---
function simpanNilaiServer(judul, mapel, kelas, guru, dataNilai) {
  if (!dataNilai || dataNilai.length === 0) return "Tidak ada data nilai.";
  const ss = openDatabase();
  const sheet = ss.getSheetByName("Nilai");
  const time = new Date();
  const rows = dataNilai.map(d => [time, judul, mapel, kelas, d.nama, d.nilai, guru]);
  sheet.getRange(sheet.getLastRow()+1, 1, rows.length, 7).setValues(rows);
  return "Nilai Tersimpan!";
}

function getLegerDinamis(kelas, mapel) {
  const ss = openDatabase();
  const sheet = ss.getSheetByName("Nilai");
  
  const siswaList = getSiswaByKelas(kelas);
  if (!siswaList || siswaList.length === 0) return { error: "Tidak ada siswa di kelas ini." };
  
  let data = [];
  if (sheet.getLastRow() > 1) {
      data = sheet.getRange(2, 1, sheet.getLastRow()-1, 7).getValues();
  }

  const targetKelas = String(kelas).trim().toUpperCase();
  const targetMapel = String(mapel).trim().toUpperCase();

  const filtered = data.filter(r => {
      const dbKelas = String(r[3]).trim().toUpperCase();
      const dbMapel = String(r[2]).trim().toUpperCase();
      return dbKelas === targetKelas && dbMapel === targetMapel;
  });
  
  let uniqueHeaders = new Set();
  filtered.forEach(r => {
      let judul = String(r[1]).trim(); 
      if(judul) uniqueHeaders.add(judul);
  });
  
  let headers = [...uniqueHeaders].sort(); 
  
  let result = siswaList.map((nama, idx) => {
      let row = { no: idx+1, nama: nama, total: 0, count: 0 };
      
      headers.forEach(h => {
          let entry = filtered.filter(r => r[4] === nama && String(r[1]).trim() === h);
          let val = 0;
          if (entry.length > 0) {
              let rawVal = entry[entry.length-1][5];
              if(typeof rawVal === 'string') rawVal = rawVal.replace(',', '.');
              val = parseFloat(rawVal);
              if(isNaN(val)) val = 0;
          }
          row[h] = val; 
          if(val !== null && val !== undefined) {
             row.total += val;
             row.count++; 
          }
      });
      
      let pembagi = headers.length > 0 ? headers.length : 1;
      row.rata = (row.total / pembagi).toFixed(1); 
      return row;
  });
  
  return { headers: headers, data: result };
}

// --- MODULE AGENDA ---
function tambahAgenda(d) { 
  const time = new Date();
  const jam = time.getHours().toString().padStart(2,'0') + ":" + time.getMinutes().toString().padStart(2,'0');
  d.splice(1, 0, jam); 
  openDatabase().getSheetByName("Agenda").appendRow(d); 
}

function getAgenda(g) {
  const s = openDatabase().getSheetByName("Agenda");
  if(s.getLastRow()<2) return [];
  const data = s.getRange(2, 1, s.getLastRow()-1, 11).getDisplayValues(); 
  return data.filter(r => r[10] === g); 
}

// --- MODULE WALI ---
function simpanSiswaBimbingan(n,k,g) { openDatabase().getSheetByName("SiswaBimbingan").appendRow([n,k,g]); }
function getSiswaBimbingan(g) {
  const s = openDatabase().getSheetByName("SiswaBimbingan");
  if(s.getLastRow()<2) return [];
  return s.getRange(2,1,s.getLastRow()-1,3).getValues().filter(r=>r[2]==g).map(r=>({nama:r[0],kelas:r[1]}));
}
function simpanCatatanBimbingan(d) { openDatabase().getSheetByName("BimbinganWali").appendRow(d); }
function getRiwayatBimbingan(g) {
  const s = openDatabase().getSheetByName("BimbinganWali");
  if(s.getLastRow()<2) return [];
  return s.getRange(2,1,s.getLastRow()-1,7).getDisplayValues().filter(r=>r[6]==g);
}

2. Kode Frontend (Index.html)

Buat file baru bernama Index.html di Apps Script, lalu salin kode di bawah ini.

Index.html

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Sistem Administrasi Guru</title>
  
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
  
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.28/jspdf.plugin.autotable.min.js"></script>

  <style>
    :root { 
        --primary: #0f172a; 
        --secondary: #1e293b;
        --accent: #6366f1; 
        --accent-hover: #4f46e5;
        --bg-light: #f1f5f9;
        --card-bg: #ffffff;
        --text-main: #0f172a;
        --text-muted: #64748b;
        --sidebar-width: 250px; /* Lebar sidebar lebih compact */
    }

    body { 
        font-family: 'Plus Jakarta Sans', sans-serif; 
        background-color: var(--bg-light); 
        color: var(--text-main);
        font-size: 0.9rem; 
        overflow-x: hidden; 
    }
    
    .hidden { display: none !important; }

    /* --- SCROLLBAR CUSTOM (Agar rapi) --- */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

    /* --- SIDEBAR PREMIUM & COMPACT --- */
    .wrapper { display: flex; width: 100%; }
    
    #sidebar {
        width: var(--sidebar-width);
        min-width: var(--sidebar-width);
        background: var(--primary); 
        color: #fff;
        height: 100vh; 
        position: fixed; 
        top: 0; left: 0; 
        z-index: 1050;
        transition: all 0.3s ease-in-out;
        display: flex; flex-direction: column;
        border-right: 1px solid rgba(255,255,255,0.05);
    }
    
    .sidebar-header { 
        padding: 20px 15px; 
        text-align: center; 
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .brand-text { font-weight: 800; font-size: 1rem; letter-spacing: 1px; color: #fff; text-transform: uppercase; }
    
    /* Profile Box Compact */
    .profile-section { padding: 15px; }
    .profile-box {
        padding: 12px; 
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255,255,255,0.05);
        border-radius: 12px; 
        display: flex; align-items: center; gap: 10px;
    }
    .avatar-circle {
        width: 35px; height: 35px; /* Lebih kecil */
        background: var(--accent); border-radius: 50%;
        display: flex; align-items: center; justify-content: center; 
        font-weight: 700; font-size: 0.9rem; flex-shrink: 0;
    }
    .profile-info { overflow: hidden; }
    .profile-name { font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0;}
    .profile-role { font-size: 0.7rem; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.5px; }

    /* Menu List */
    .sb-menu { list-style: none; padding: 0 10px; margin: 0; flex-grow: 1; overflow-y: auto; }
    .sb-menu li { margin-bottom: 4px; }
    .sb-menu li a {
        display: flex; align-items: center; padding: 10px 15px; color: #94a3b8;
        text-decoration: none; font-weight: 500; transition: 0.2s; 
        border-radius: 8px; font-size: 0.85rem;
    }
    .sb-menu li a:hover, .sb-menu li a.active {
        background: var(--accent); color: #fff; 
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
    }
    .sb-menu li a i { width: 25px; font-size: 1rem; text-align: center; margin-right: 8px; }
    
    /* Logout Button Area */
    .sidebar-footer { padding: 15px; border-top: 1px solid rgba(255,255,255,0.05); }

    /* --- CONTENT AREA --- */
    #content { 
        width: 100%; 
        margin-left: var(--sidebar-width); 
        padding: 25px; 
        transition: 0.3s; 
        min-height: 100vh;
    }

    /* --- MOBILE RESPONSIVE LOGIC --- */
    #sidebar-overlay {
        display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.5); z-index: 1040; backdrop-filter: blur(2px);
    }

    @media (max-width: 991px) {
        #sidebar { margin-left: calc(var(--sidebar-width) * -1); } /* Sembunyi ke kiri */
        #sidebar.active { margin-left: 0; box-shadow: 5px 0 15px rgba(0,0,0,0.2); }
        #content { margin-left: 0; padding: 15px; }
        #sidebar-overlay.active { display: block; }
        
        .card-h { padding: 15px 20px; font-size: 1rem; }
        .card-b { padding: 20px; }
    }

    /* --- CARDS ULTRA PREMIUM --- */
    .card-u { 
        background: var(--card-bg); 
        border-radius: 16px; 
        box-shadow: 0 4px 20px -2px rgba(0,0,0,0.05); 
        margin-bottom: 20px; 
        border: 1px solid #e2e8f0; 
        overflow: hidden; 
    }
    .card-h { 
        background: #fff; padding: 18px 25px; 
        font-weight: 700; color: var(--text-main); 
        border-bottom: 1px solid #f1f5f9; 
        display: flex; align-items: center; gap: 10px; font-size: 1.05rem; 
    }
    .card-h i { color: var(--accent); }
    .card-b { padding: 25px; }

    /* --- WIDGETS --- */
    .dash-widget { 
        padding: 25px; border-radius: 16px; color: white; text-align: left; 
        cursor: pointer; transition: 0.3s; position: relative; overflow: hidden;
        box-shadow: 0 8px 15px -3px rgba(0,0,0,0.1); height: 100%;
        display: flex; flex-direction: column; justify-content: center;
    }
    .dash-widget:active { transform: scale(0.98); }
    .dash-widget h5 { font-weight: 700; margin-bottom: 5px; font-size: 1.1rem; position: relative; z-index: 2; }
    .dash-widget p { font-size: 0.8rem; opacity: 0.9; margin: 0; position: relative; z-index: 2; }
    .dash-icon-bg { position: absolute; right: -10px; bottom: -15px; font-size: 4.5rem; opacity: 0.15; transform: rotate(-15deg); }
    
    .bg-gradient-1 { background: linear-gradient(135deg, #6366f1, #4f46e5); } 
    .bg-gradient-2 { background: linear-gradient(135deg, #10b981, #059669); } 
    .bg-gradient-3 { background: linear-gradient(135deg, #f43f5e, #e11d48); } 
    .bg-gradient-4 { background: linear-gradient(135deg, #f59e0b, #d97706); } 
    .bg-gradient-5 { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
    .bg-gradient-6 { background: linear-gradient(135deg, #ec4899, #db2777); }

    /* --- FORM ELEMENTS --- */
    .form-control, .form-select {
        border-radius: 10px; padding: 10px 12px; border: 1px solid #cbd5e1; font-size: 0.9rem;
        background-color: #f8fafc;
    }
    .form-control:focus, .form-select:focus {
        border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); background-color: #fff;
    }
    .btn { border-radius: 10px; padding: 10px 18px; font-weight: 600; font-size: 0.9rem; transition: 0.2s; }
    .btn-primary { background-color: var(--accent); border-color: var(--accent); }
    .btn-primary:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); }

    /* --- LOGIN --- */
    #login-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #0f172a; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px;}
    .login-box { 
        background: rgba(255,255,255,0.05); backdrop-filter: blur(15px); 
        padding: 40px 30px; border-radius: 24px; width: 100%; max-width: 380px; text-align: center; 
        border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    }
    
    @media print { .no-print, #sidebar, .btn-toggle { display: none !important; } #content { margin: 0; padding: 0; } }
  </style>
</head>
<body>

<div id="sidebar-overlay" onclick="toggleSidebar()"></div>

<div id="login-screen">
    <div class="login-box">
        <div class="mb-4">
            <i class="fas fa-shapes fa-3x text-white mb-3" style="opacity: 0.9"></i>
            <h3 class="text-white fw-bold">SISTEM GURU</h3>
            <p class="text-white-50 small">Sistem Administrasi Terpadu</p>
        </div>
        <select id="user-select" class="form-select form-select-lg mb-4 text-center rounded-pill fw-bold text-secondary"><option>Memuat Data...</option></select>
        <button onclick="login()" class="btn btn-warning w-100 btn-lg rounded-pill fw-bold text-white shadow" style="background: linear-gradient(45deg, #f59e0b, #d97706); border:none;">MASUK APLIKASI</button>
    </div>
</div>

<div id="app" class="wrapper hidden">
  
  <nav id="sidebar">
    <div class="sidebar-header">
        <div class="brand-text">ADMINISTRASI GURU</div>
    </div>
    
    <div class="profile-section">
        <div class="profile-box">
            <div class="avatar-circle" id="av-text">A</div>
            <div class="profile-info">
                <div class="profile-name" id="sb-nama">Administrator</div>
                <div class="profile-role" id="sb-role">Admin</div>
            </div>
        </div>
    </div>

    <ul class="sb-menu">
      <li><a onclick="nav('home')" id="m-home"><i class="fas fa-th-large"></i> Dashboard</a></li>
      <li class="g-only"><a onclick="nav('absen')" id="m-absen"><i class="fas fa-calendar-check"></i> Absensi</a></li>
      <li class="g-only"><a onclick="nav('nilai')" id="m-nilai"><i class="fas fa-graduation-cap"></i> Penilaian</a></li>
      <li class="g-only"><a onclick="nav('agenda')" id="m-agenda"><i class="fas fa-book-reader"></i> Agenda</a></li>
      <li class="g-only"><a onclick="nav('wali')" id="m-wali"><i class="fas fa-user-friends"></i> Guru Wali</a></li>
      <li class="g-only"><a onclick="nav('rpp')" id="m-rpp"><i class="fas fa-robot"></i> Modul Ajar</a></li>
      <li><a onclick="openSpreadsheet()"><i class="fas fa-table"></i> Data Sheet</a></li>
      <li class="a-only hidden"><a onclick="nav('siswa')" id="m-siswa"><i class="fas fa-users"></i> Data Siswa</a></li>
      <li class="a-only hidden"><a onclick="nav('admin')" id="m-admin"><i class="fas fa-sliders-h"></i> Pengaturan</a></li>
    </ul>

    <div class="sidebar-footer">
        <a onclick="location.reload()" class="btn btn-danger w-100 btn-sm fw-bold"><i class="fas fa-sign-out-alt me-2"></i> Keluar</a>
    </div>
  </nav>

  <div id="content">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <button class="btn btn-white shadow-sm d-lg-none border" onclick="toggleSidebar()"><i class="fas fa-bars text-primary"></i></button>
        <h5 class="fw-bold m-0 d-lg-none text-primary">DASHBOARD</h5>
    </div>

    <div id="v-home" class="view">
        <div class="card-u bg-primary text-white border-0" style="background: linear-gradient(120deg, #6366f1, #8b5cf6);">
            <div class="card-b position-relative">
                <h4 class="fw-bold mb-2">Halo, <span id="dash-nama">User</span>!</h4>
                <p class="mb-0 fs-6 opacity-90">Selamat datang di Sistem Administrasi Guru.</p>
                <i class="fas fa-chalkboard-teacher position-absolute" style="right: 20px; bottom: -10px; font-size: 6rem; opacity: 0.15;"></i>
            </div>
        </div>

        <div class="a-only hidden">
             <div class="row g-3">
                 <div class="col-md-6">
                    <div class="dash-widget bg-gradient-1" onclick="nav('siswa')">
                        <h5>Data Siswa</h5><p>Database Peserta Didik</p><i class="fas fa-users dash-icon-bg"></i>
                    </div>
                 </div>
                 <div class="col-md-6">
                    <div class="dash-widget bg-gradient-2" onclick="nav('admin')">
                        <h5>Pengaturan</h5><p>Konfigurasi Sistem</p><i class="fas fa-cogs dash-icon-bg"></i>
                    </div>
                 </div>
             </div>
             
             <div class="card-u mt-4">
                <div class="card-h"><i class="fas fa-rocket"></i> Akses Cepat Admin</div>
                <div class="card-b">
                    <div class="row g-3">
                        <div class="col-sm-4"><button onclick="nav('admin')" class="btn btn-light w-100 py-3 border"><i class="fas fa-plus-circle text-primary d-block mb-1 fa-lg"></i>Tambah User</button></div>
                        <div class="col-sm-4"><button onclick="nav('siswa')" class="btn btn-light w-100 py-3 border"><i class="fas fa-file-import text-success d-block mb-1 fa-lg"></i>Import Siswa</button></div>
                        <div class="col-sm-4"><button onclick="openSpreadsheet()" class="btn btn-light w-100 py-3 border"><i class="fas fa-table text-warning d-block mb-1 fa-lg"></i>Buka Excel</button></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="g-only hidden">
            <div class="row g-3">
                <div class="col-6 col-md-4 col-lg-3" onclick="nav('absen')"><div class="dash-widget bg-gradient-2"><h5>Absensi</h5><p>Kehadiran</p><i class="fas fa-calendar-check dash-icon-bg"></i></div></div>
                <div class="col-6 col-md-4 col-lg-3" onclick="nav('nilai')"><div class="dash-widget bg-gradient-3"><h5>Nilai</h5><p>Input Data</p><i class="fas fa-star dash-icon-bg"></i></div></div>
                <div class="col-6 col-md-4 col-lg-3" onclick="nav('agenda')"><div class="dash-widget bg-gradient-4"><h5>Agenda</h5><p>Jurnal</p><i class="fas fa-book dash-icon-bg"></i></div></div>
                <div class="col-6 col-md-4 col-lg-3" onclick="nav('wali')"><div class="dash-widget bg-gradient-5"><h5>Guru Wali</h5><p>Konseling</p><i class="fas fa-user-friends dash-icon-bg"></i></div></div>
                <div class="col-6 col-md-4 col-lg-6" onclick="nav('rpp')"><div class="dash-widget bg-gradient-1"><h5>Modul Ajar</h5><p>AI Generator</p><i class="fas fa-robot dash-icon-bg"></i></div></div>
                <div class="col-6 col-md-4 col-lg-6" onclick="openSpreadsheet()"><div class="dash-widget bg-gradient-6"><h5>Data Sheet</h5><p>Database</p><i class="fas fa-table dash-icon-bg"></i></div></div>
            </div>
        </div>
    </div>

    <div id="v-absen" class="view hidden">
        <div class="card-u">
            <div class="card-h"><i class="fas fa-calendar-alt"></i> Input Absensi</div>
            <div class="card-b">
                <div class="row g-2 mb-3">
                    <div class="col-6 col-md-3"><label class="small fw-bold">Mapel</label><select id="a-mapel" class="form-select mapel-opt"></select></div>
                    <div class="col-6 col-md-2"><label class="small fw-bold">Kelas</label><select id="a-kelas" class="form-select kelas-opt"></select></div>
                    <div class="col-6 col-md-2"><label class="small fw-bold">Pertemuan</label><input type="number" id="a-pert" class="form-control" value="1"></div>
                    <div class="col-6 col-md-3"><label class="small fw-bold">Tanggal</label><input type="date" id="a-tgl" class="form-control"></div>
                    <div class="col-12 col-md-2 d-flex align-items-end"><button onclick="loadAbsen()" class="btn btn-primary w-100">Muat</button></div>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <button onclick="setAll('Hadir')" class="btn btn-outline-success btn-sm rounded-pill px-3"><i class="fas fa-check-double me-1"></i> Semua Hadir</button>
                    <span class="small text-muted fst-italic mt-1">*Pastikan klik Simpan</span>
                </div>
                <div class="table-responsive border rounded mb-3 bg-white" style="max-height:400px;">
                    <table class="table table-hover table-sm mb-0 align-middle" id="tbl-input-absen">
                        <thead class="table-light sticky-top"><tr><th>Nama Siswa</th><th width="120">Status</th></tr></thead>
                        <tbody></tbody>
                    </table>
                </div>
                <button onclick="saveAbsen()" class="btn btn-warning w-100 fw-bold text-white shadow-sm">SIMPAN ABSENSI</button>
            </div>
        </div>
        
        <div class="card-u">
            <div class="card-h"><i class="fas fa-file-invoice"></i> Laporan Absensi</div>
            <div class="card-b">
                <div class="row g-2 no-print align-items-end">
                    <div class="col-6 col-md-3"><label class="small fw-bold">Mapel</label><select id="r-mapel" class="form-select mapel-opt"></select></div>
                    <div class="col-6 col-md-3"><label class="small fw-bold">Kelas</label><select id="r-kelas" class="form-select kelas-opt"></select></div>
                    <div class="col-4 col-md-2"><label class="small fw-bold">Bulan</label><select id="r-bln" class="form-select"><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">Mei</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Agu</option><option value="9">Sep</option><option value="10">Okt</option><option value="11">Nov</option><option value="12">Des</option></select></div>
                    <div class="col-4 col-md-2"><label class="small fw-bold">Tahun</label><input id="r-thn" class="form-control" value="2026"></div>
                    <div class="col-4 col-md-2"><button onclick="loadRekap()" class="btn btn-info text-white w-100">Tampil</button></div>
                </div>
                
                <div id="area-rekap" class="hidden mt-3">
                    <div class="table-responsive"><table class="table table-bordered table-sm table-striped" id="tbl-rekap"><thead class="table-dark"><tr><th>No</th><th>Nama</th><th>S</th><th>I</th><th>A</th><th>H</th><th>%</th></tr></thead><tbody></tbody></table></div>
                </div>

                <div id="area-harian" class="hidden mt-3">
                    <div class="table-responsive"><table class="table table-bordered table-sm text-center" id="tbl-harian"><thead></thead><tbody></tbody></table></div>
                </div>
                
                <div class="d-flex gap-2 mt-3 no-print">
                    <button onclick="printPDF('area-rekap','Rekap_Absensi','l')" class="btn btn-danger flex-fill btn-sm"><i class="fas fa-print me-1"></i> Rekap</button>
                    <button onclick="printPDF('area-harian','Absensi_Harian','l')" class="btn btn-success flex-fill btn-sm"><i class="fas fa-print me-1"></i> Harian</button>
                </div>
            </div>
        </div>
    </div>

    <div id="v-nilai" class="view hidden">
        <div class="card-u">
            <div class="card-h"><i class="fas fa-pen-nib"></i> Input Nilai</div>
            <div class="card-b">
                <div class="alert alert-light border small text-primary mb-3"><i class="fas fa-info-circle me-1"></i> Masukkan Judul (Contoh: UH 1, Tugas).</div>
                <div class="row g-2 mb-3">
                    <div class="col-6 col-md-3"><label class="small fw-bold">Mapel</label><select id="n-mapel" class="form-select mapel-opt"></select></div>
                    <div class="col-6 col-md-3"><label class="small fw-bold">Kelas</label><select id="n-kelas" class="form-select kelas-opt"></select></div>
                    <div class="col-12 col-md-4"><label class="small fw-bold">Judul</label><input id="n-judul" class="form-control" placeholder="Judul Penilaian"></div>
                    <div class="col-12 col-md-2"><button onclick="loadNilai()" class="btn btn-primary w-100">Muat</button></div>
                </div>
                <div class="table-responsive border rounded bg-white" style="max-height:400px;">
                    <table class="table table-hover table-sm mb-0"><tbody id="tbl-input-nilai"></tbody></table>
                </div>
                <button onclick="saveNilai()" class="btn btn-success w-100 mt-3 fw-bold">SIMPAN NILAI</button>
            </div>
        </div>
        
        <div class="card-u">
            <div class="card-h"><i class="fas fa-table"></i> Leger Nilai</div>
            <div class="card-b">
                <div class="row g-2 no-print align-items-end">
                    <div class="col-6 col-md-4"><label class="small fw-bold">Mapel</label><select id="l-mapel" class="form-select mapel-opt"></select></div>
                    <div class="col-6 col-md-4"><label class="small fw-bold">Kelas</label><select id="l-kelas" class="form-select kelas-opt"></select></div>
                    <div class="col-12 col-md-4"><button onclick="loadLeger()" class="btn btn-warning text-white w-100">Tampilkan</button></div>
                </div>
                <div class="table-responsive mt-3" id="area-leger">
                    <h6 class="text-center fw-bold" id="judul-leger">LEGER NILAI</h6>
                    <table class="table table-bordered table-sm table-striped" id="tbl-leger"><thead class="table-dark"></thead><tbody></tbody></table>
                </div>
                <button onclick="printPDF('area-leger','Laporan_Nilai','l')" class="btn btn-danger mt-3 btn-sm"><i class="fas fa-file-pdf me-1"></i> Cetak Leger</button>
            </div>
        </div>
    </div>

    <div id="v-agenda" class="view hidden">
        <div class="card-u">
            <div class="card-h"><i class="fas fa-book"></i> Jurnal Mengajar</div>
            <div class="card-b">
                <form id="f-agenda" class="row g-2">
                    <div class="col-6 col-md-3"><label class="small fw-bold">Tgl</label><input type="date" id="ag-tgl" class="form-control"></div>
                    <div class="col-6 col-md-3"><label class="small fw-bold">Kls</label><select id="ag-kelas" class="form-select kelas-opt"></select></div>
                    <div class="col-6 col-md-3"><label class="small fw-bold">Mapel</label><select id="ag-mapel" class="form-select mapel-opt"></select></div>
                    <div class="col-6 col-md-3"><label class="small fw-bold">Pertemuan</label><input type="number" id="ag-pert" class="form-control" value="1"></div>
                    <div class="col-6 col-md-3"><label class="small fw-bold">Hadir</label><input type="number" id="ag-hadir" class="form-control" placeholder="0"></div>
                    <div class="col-6 col-md-3"><label class="small fw-bold">Tdk Hadir</label><input type="number" id="ag-tdk" class="form-control" placeholder="0"></div>
                    <div class="col-6 col-md-3"><label class="small fw-bold">Status</label><select id="ag-status" class="form-select"><option>Terlaksana</option><option>Tunda</option></select></div>
                    <div class="col-6 col-md-3"><label class="small fw-bold">Ketuntasan</label><select id="ag-tuntas" class="form-select"><option>Tuntas</option><option>Belum</option></select></div>
                    <div class="col-12"><label class="small fw-bold">Materi / Kegiatan</label><textarea id="ag-materi" class="form-control" rows="2"></textarea></div>
                    <div class="col-12"><button type="button" onclick="saveAgenda()" class="btn btn-primary w-100 mt-2">Simpan Jurnal</button></div>
                </form>
                <hr>
                <div class="row no-print mb-2 align-items-center">
                    <div class="col-8"><select id="filter-ag-mapel" class="form-select mapel-opt"><option value="">Semua Mapel</option></select></div>
                    <div class="col-4"><button onclick="loadAgendaList()" class="btn btn-secondary w-100">Filter</button></div>
                </div>
                <div class="table-responsive" id="area-agenda">
                    <h6 class="text-center fw-bold" id="judul-agenda">JURNAL MENGAJAR</h6>
                    <table class="table table-bordered table-sm" id="tbl-agenda"><thead class="table-dark"><tr><th>Tgl</th><th>Kls</th><th>Mapel</th><th>Materi</th><th>Sts</th><th>Tuntas</th><th>H</th><th>TH</th></tr></thead><tbody></tbody></table>
                </div>
                <button onclick="printPDF('area-agenda','Laporan_Agenda','l')" class="btn btn-danger mt-2 btn-sm"><i class="fas fa-file-pdf"></i> Cetak PDF</button>
            </div>
        </div>
    </div>

    <div id="v-wali" class="view hidden">
        <div class="row g-3">
            <div class="col-lg-4 col-12">
                <div class="card-u h-100">
                    <div class="card-h bg-light"><i class="fas fa-user-plus"></i> Input Siswa</div>
                    <div class="card-b">
                         <div class="mb-3"><label class="small fw-bold">Nama Siswa</label><input id="wb-nama" class="form-control" placeholder="Nama Lengkap"></div>
                         <div class="mb-3"><label class="small fw-bold">Kelas</label><input id="wb-kelas" class="form-control" placeholder="Contoh: 7A"></div>
                         <button onclick="saveSiswaBim()" class="btn btn-success w-100 fw-bold"><i class="fas fa-save me-1"></i> Simpan Data</button>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-8 col-12">
                <div class="card-u h-100">
                    <div class="card-h"><i class="fas fa-comments"></i> Catatan Bimbingan</div>
                    <div class="card-b">
                         <form class="row g-2 mb-3">
                             <div class="col-6 col-md-3"><label class="small fw-bold">Tgl</label><input type="date" id="bk-tgl" class="form-control"></div>
                             <div class="col-6 col-md-4"><label class="small fw-bold">Siswa</label><select id="bk-siswa" class="form-select" onchange="fillKelasBK()"><option value="">Pilih...</option></select></div>
                             <div class="col-6 col-md-2"><label class="small fw-bold">Kelas</label><input id="bk-kelas-auto" class="form-control" readonly></div>
                             <div class="col-6 col-md-3"><label class="small fw-bold">Jenis</label><select id="bk-jenis" class="form-select"><option>Akademik</option><option>Pribadi</option><option>Sosial</option><option>Karier</option></select></div>
                             <div class="col-12"><input id="bk-topik" class="form-control" placeholder="Masalah / Topik Bimbingan"></div>
                             <div class="col-12"><input id="bk-hasil" class="form-control" placeholder="Solusi / Hasil / Tindak Lanjut"></div>
                             <div class="col-12"><button type="button" onclick="saveBK()" class="btn btn-primary w-100">Simpan Catatan</button></div>
                         </form>
                         <hr>
                         <div class="table-responsive" id="area-bk">
                             <h6 class="text-center fw-bold small" id="judul-bk">RIWAYAT BIMBINGAN</h6>
                             <table class="table table-bordered table-sm table-hover" id="tbl-bk"><thead class="table-light"><tr><th>Tgl</th><th>Siswa</th><th>Masalah</th><th>Solusi</th></tr></thead><tbody></tbody></table>
                         </div>
                         <button onclick="printPDF('area-bk','Laporan_Bimbingan_Wali','l')" class="btn btn-danger mt-2 btn-sm"><i class="fas fa-file-pdf me-1"></i> Cetak</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="v-rpp" class="view hidden">
        <div class="card-u border-0 overflow-hidden" style="background: linear-gradient(135deg, #0f172a, #334155); color:white;">
            <div class="card-b text-center p-5">
                <i class="fas fa-robot mb-3 text-warning" style="font-size: 3.5rem;"></i>
                <h3 class="fw-bold mb-3">AI Generator & Modul Ajar</h3>
                <p class="mb-4 text-white-50 small mx-auto" style="max-width: 500px;">Buat perangkat ajar otomatis menggunakan AI atau akses database modul yang tersedia.</p>
                <div class="d-flex justify-content-center gap-3 flex-wrap">
                    <a href="https://gemini.google.com/share/c7ba53b1ada4" target="_blank" class="btn btn-warning fw-bold shadow rounded-pill px-4">
                        <i class="fas fa-magic me-2"></i> Generator AI
                    </a>
                    <a href="https://www.yefriharyanto.id/2025/10/perangkat-ajar-deep-learning-.html" target="_blank" class="btn btn-outline-light fw-bold rounded-pill px-4">
                        <i class="fas fa-folder-open me-2"></i> Bank Modul
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div id="v-admin" class="view hidden">
        <div class="row g-3 mb-3">
            <div class="col-md-6">
                <div class="card-u h-100">
                    <div class="card-h">Profil Sekolah</div>
                    <div class="card-b">
                        <input id="adm-sekolah" class="form-control mb-2" placeholder="Nama Sekolah">
                        <button onclick="saveConf('Nama Sekolah', document.getElementById('adm-sekolah').value)" class="btn btn-primary w-100 btn-sm">Simpan</button>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card-u h-100">
                    <div class="card-h">Link Spreadsheet</div>
                    <div class="card-b">
                        <input id="adm-link" class="form-control mb-2" placeholder="https://docs.google.com...">
                        <button onclick="saveConf('Link Spreadsheet', document.getElementById('adm-link').value)" class="btn btn-success w-100 btn-sm text-white">Simpan</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="card-u">
            <div class="card-h">Master Data</div>
            <div class="card-b row g-3">
                <div class="col-md-4">
                    <div class="bg-light p-3 rounded h-100 border">
                        <h6 class="fw-bold text-primary mb-2">Kelas</h6>
                        <div class="input-group mb-2"><input id="new-k" class="form-control form-control-sm"><button onclick="addK()" class="btn btn-primary btn-sm">+</button></div>
                        <ul id="list-k" class="list-group" style="height:150px;overflow:auto"></ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="bg-light p-3 rounded h-100 border">
                        <h6 class="fw-bold text-success mb-2">Mapel</h6>
                        <div class="input-group mb-2"><input id="new-m" class="form-control form-control-sm"><button onclick="addM()" class="btn btn-success btn-sm text-white">+</button></div>
                        <ul id="list-m" class="list-group" style="height:150px;overflow:auto"></ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="bg-light p-3 rounded h-100 border">
                        <h6 class="fw-bold text-warning mb-2">Guru</h6>
                        <input id="new-u" class="form-control form-control-sm mb-1" placeholder="Nama">
                        <div class="input-group mb-2"><input id="new-um" class="form-control form-control-sm" placeholder="Mapel"><button onclick="addU()" class="btn btn-warning btn-sm text-white">+</button></div>
                        <ul id="list-u" class="list-group" style="height:150px;overflow:auto"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="v-siswa" class="view hidden">
        <div class="card-u">
            <div class="card-h">Import Siswa</div>
            <div class="card-b">
                <div class="alert alert-info small py-2">Copy nama siswa dari Excel dan paste di bawah ini (1 baris = 1 siswa).</div>
                <textarea id="bulk-siswa" class="form-control mb-3" rows="8" placeholder="Nama Siswa 1
Nama Siswa 2"></textarea>
                <div class="row g-2">
                    <div class="col-8"><select id="target-kelas" class="form-select kelas-opt"><option value="">Pilih Kelas...</option></select></div>
                    <div class="col-4"><button onclick="processImport()" class="btn btn-success w-100 fw-bold">SIMPAN</button></div>
                </div>
            </div>
        </div>
    </div>

  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  let CUR_USER=null, LINK_SHEET="";

  window.onload = function() { 
      Swal.fire({title: 'Memuat Sistem...', didOpen:()=>{Swal.showLoading()}});
      google.script.run.withSuccessHandler(init).getConfig(); 
      refreshDataAdmin(); 
  };

  function init(c) { 
      Swal.close(); 
      document.getElementById('adm-sekolah').value = c['Nama Sekolah'] || '';
      document.getElementById('adm-link').value = c['Link Spreadsheet'] || '';
      LINK_SHEET = c['Link Spreadsheet']; 

      google.script.run.withSuccessHandler(users => { 
          let s=document.getElementById('user-select'); s.innerHTML='<option value="">Pilih User...</option>'; 
          users.forEach(u=>{ 
              let o=document.createElement('option');o.value=u.nama;o.innerText=u.nama;
              o.setAttribute('r',u.role);o.setAttribute('m',u.mapel);s.appendChild(o); 
          }); 
      }).getUsers(); 
  }

  function toggleSidebar(){ 
      document.getElementById('sidebar').classList.toggle('active'); 
      document.getElementById('sidebar-overlay').classList.toggle('active');
  }

  function login() {
      let sel = document.getElementById('user-select');
      if(!sel.value) return Swal.fire('Error','Pilih User terlebih dahulu','error');
      let opt = sel.options[sel.selectedIndex];
      CUR_USER = { nama:sel.value, role:opt.getAttribute('r'), mapel:opt.getAttribute('m') };
      
      document.getElementById('login-screen').classList.add('hidden'); 
      document.getElementById('app').classList.remove('hidden');
      
      document.getElementById('sb-nama').innerText = CUR_USER.nama; 
      document.getElementById('sb-role').innerText = CUR_USER.role; 
      document.getElementById('dash-nama').innerText = CUR_USER.nama;
      document.getElementById('av-text').innerText = CUR_USER.nama.charAt(0);
      
      if(CUR_USER.role==='Admin') { 
          document.querySelectorAll('.g-only').forEach(e=>e.classList.add('hidden')); 
          document.querySelectorAll('.a-only').forEach(e=>e.classList.remove('hidden')); 
      } else { 
          document.querySelectorAll('.g-only').forEach(e=>e.classList.remove('hidden')); 
          document.querySelectorAll('.a-only').forEach(e=>e.classList.add('hidden')); 
          let ms=CUR_USER.mapel.split(','); 
          document.querySelectorAll('.mapel-opt').forEach(s=>{ s.innerHTML=''; ms.forEach(m=>{if(m){let o=document.createElement('option');o.value=m;o.innerText=m;s.appendChild(o)}}) }); 
          refreshSiswaBim(); 
      }
      nav('home');
  }

  function nav(id) { 
      document.querySelectorAll('.view').forEach(e=>e.classList.add('hidden')); 
      document.getElementById('v-'+id).classList.remove('hidden'); 
      document.querySelectorAll('.sb-menu a').forEach(a=>a.classList.remove('active'));
      let mBtn = document.getElementById('m-'+id);
      if(mBtn) mBtn.classList.add('active');
      // Tutup sidebar otomatis di mobile
      if(window.innerWidth < 992) {
         document.getElementById('sidebar').classList.remove('active');
         document.getElementById('sidebar-overlay').classList.remove('active');
      }
  }

  function openSpreadsheet() {
      if(LINK_SHEET) { window.open(LINK_SHEET, '_blank'); } 
      else { Swal.fire('Info', 'Link Spreadsheet belum diatur oleh Admin.', 'info'); }
  }

  // ADMIN
  function refreshDataAdmin() {
      google.script.run.withSuccessHandler(d=>{
          document.querySelectorAll('.kelas-opt').forEach(s=>{ s.innerHTML=''; d.kelas.forEach(k=>{let o=document.createElement('option');o.value=k;o.innerText=k;s.appendChild(o)}) });
          let lk=document.getElementById('list-k'); lk.innerHTML=''; d.kelas.forEach(k=>lk.innerHTML+=`<li class="list-group-item d-flex justify-content-between align-items-center py-1 border-0 mb-1 rounded bg-white small shadow-sm">${k}<button onclick="delK('${k}')" class="btn btn-sm text-danger p-0"><i class="fas fa-times"></i></button></li>`);
          let lm=document.getElementById('list-m'); lm.innerHTML=''; d.mapel.forEach(m=>lm.innerHTML+=`<li class="list-group-item d-flex justify-content-between align-items-center py-1 border-0 mb-1 rounded bg-white small shadow-sm">${m}<button onclick="delM('${m}')" class="btn btn-sm text-danger p-0"><i class="fas fa-times"></i></button></li>`);
      }).getMasterData();
      google.script.run.withSuccessHandler(u=>{ let lu=document.getElementById('list-u'); lu.innerHTML=''; u.forEach(x=>lu.innerHTML+=`<li class="list-group-item d-flex justify-content-between align-items-center py-1 border-0 mb-1 rounded bg-white small shadow-sm"><div><strong class="d-block text-dark">${x.nama}</strong><small class="text-muted" style="font-size:0.7rem">${x.mapel}</small></div><button onclick="delU('${x.nama}')" class="btn btn-sm text-danger p-0"><i class="fas fa-times"></i></button></li>`); }).getUsers();
  }

  function addK(){ let n=document.getElementById('new-k').value; if(!n) return; Swal.showLoading(); google.script.run.withSuccessHandler(res=>{ Swal.fire('Berhasil', res, 'success'); document.getElementById('new-k').value = ''; refreshDataAdmin(); }).tambahKelasBaru(n); }
  function addM(){ let n=document.getElementById('new-m').value; if(!n) return; Swal.showLoading(); google.script.run.withSuccessHandler(res=>{ Swal.fire('Berhasil', res, 'success'); document.getElementById('new-m').value = ''; refreshDataAdmin(); }).tambahMapelBaru(n); }
  function addU(){ let n=document.getElementById('new-u').value, m=document.getElementById('new-um').value; if(!n) return; Swal.showLoading(); google.script.run.withSuccessHandler(res=>{ Swal.fire('Berhasil', res, 'success'); document.getElementById('new-u').value = ''; document.getElementById('new-um').value = ''; refreshDataAdmin(); }).tambahUser(n,'Guru',m); }
  function delK(n){ if(confirm('Hapus?')) google.script.run.withSuccessHandler(()=>{refreshDataAdmin();}).hapusKelas(n); }
  function delM(n){ if(confirm('Hapus?')) google.script.run.withSuccessHandler(()=>{refreshDataAdmin();}).hapusMapel(n); }
  function delU(n){ if(confirm('Hapus?')) google.script.run.withSuccessHandler(()=>{refreshDataAdmin();}).hapusUser(n); }
  function saveConf(key, val){ Swal.showLoading(); google.script.run.withSuccessHandler(res=>{ if(key==='Link Spreadsheet') LINK_SHEET=val; Swal.fire('Sukses', res, 'success'); }).saveConfig(key, val); }
  function processImport(){ let t=document.getElementById('target-kelas').value, b=document.getElementById('bulk-siswa').value; if(!t)return Swal.fire('Error','Pilih Kelas','error'); if(b){ let arr=b.split('\n'); Swal.showLoading(); google.script.run.withSuccessHandler(m=>{Swal.close(); Swal.fire('Info',m,'info');}).importSiswaBulk(arr,t); } }

  // LOGIKA LAINNYA
  function loadAbsen(){ Swal.showLoading(); let k=document.getElementById('a-kelas').value; google.script.run.withSuccessHandler(d=>{ Swal.close(); let h=''; d.forEach(n=>{h+=`<tr><td class="fw-bold text-dark">${n}</td><td><select class="form-select form-select-sm sa-v"><option>Hadir</option><option>Sakit</option><option>Izin</option><option>Alpa</option><option>Telat</option></select><input type="hidden" class="sa-n" value="${n}"></td></tr>`}); document.querySelector('#tbl-input-absen tbody').innerHTML=h; }).getSiswaByKelas(k); }
  function setAll(v){ document.querySelectorAll('.sa-v').forEach(e=>e.value=v); }
  function saveAbsen(){ let t=document.getElementById('a-tgl').value, p=document.getElementById('a-pert').value; if(!t)return Swal.fire('Error','Isi Tanggal','error'); let d=[]; document.querySelectorAll('#tbl-input-absen tr').forEach(r=>{ let sel = r.querySelector('.sa-v'); if(sel) d.push({nama:r.querySelector('.sa-n').value, status:sel.value}) }); if(d.length === 0) return; Swal.showLoading(); google.script.run.withSuccessHandler(m=>{Swal.close();Swal.fire('Sukses',m,'success')}).simpanAbsensiServer(document.getElementById('a-kelas').value, document.getElementById('a-mapel').value, p, t, CUR_USER.nama, d); }
  function loadRekap(){ let m=document.getElementById('r-mapel').value, k=document.getElementById('r-kelas').value, b=document.getElementById('r-bln').value, t=document.getElementById('r-thn').value; Swal.showLoading(); google.script.run.withSuccessHandler(d=>{ Swal.close(); if(d.error) return Swal.fire('Info',d.error,'info'); let h1=''; d.rekap.forEach(r=>{h1+=`<tr><td>${r.no}</td><td>${r.nama}</td><td>${r.s}</td><td>${r.i}</td><td>${r.a}</td><td>${r.h}</td><td><span class="badge bg-primary">${r.persen}%</span></td></tr>`}); document.getElementById('tbl-rekap').querySelector('tbody').innerHTML=h1; document.getElementById('area-rekap').classList.remove('hidden'); let h2head='<tr><th>Nama</th>'; d.cols.forEach(c=>h2head+=`<th>P${c.p}<br><small>${c.info.tgl}</small></th>`); h2head+='</tr>'; document.getElementById('tbl-harian').querySelector('thead').innerHTML=h2head; let h2body=''; d.rekap.forEach(r=>{ h2body+=`<tr><td>${r.nama}</td>`; d.cols.forEach(c=>{h2body+=`<td>${r.detail[c.p]}</td>`}); h2body+='</tr>'; }); document.getElementById('tbl-harian').querySelector('tbody').innerHTML=h2body; document.getElementById('area-harian').classList.remove('hidden'); }).getLaporanAbsensi(k,m,b,t); }
  function loadNilai(){ Swal.showLoading(); let k=document.getElementById('n-kelas').value; google.script.run.withSuccessHandler(d=>{ Swal.close(); let h=''; d.forEach(n=>{h+=`<tr><td>${n}</td><td><input type="number" class="form-control n-v" placeholder="0"><input type="hidden" class="n-n" value="${n}"></td></tr>`}); document.getElementById('tbl-input-nilai').innerHTML=h; }).getSiswaByKelas(k); }
  function saveNilai(){ let t=document.getElementById('n-judul').value; if(!t)return Swal.fire('Error','Isi Judul Penilaian','error'); let d=[]; document.querySelectorAll('.n-v').forEach((e,i)=>{if(e.value)d.push({nama:document.querySelectorAll('.n-n')[i].value, nilai:e.value})}); Swal.showLoading(); google.script.run.withSuccessHandler(m=>{Swal.close();Swal.fire('Info',m,'success')}).simpanNilaiServer(t, document.getElementById('n-mapel').value, document.getElementById('n-kelas').value, CUR_USER.nama, d); }
  function loadLeger(){ let k = document.getElementById('l-kelas').value; let m = document.getElementById('l-mapel').value; if(!k || !m) return Swal.fire('Peringatan', 'Pilih Kelas dan Mapel dulu!', 'warning'); Swal.showLoading(); google.script.run.withSuccessHandler(res => { Swal.close(); if(res.error) return Swal.fire('Info', res.error, 'info'); if(res.headers.length === 0) return Swal.fire('Kosong', 'Belum ada data nilai.', 'info'); let thead = '<tr><th class="text-center" width="5%">No</th><th>Nama Siswa</th>'; res.headers.forEach(h => { thead += `<th class="text-center">${h}</th>`; }); thead += '<th class="text-center bg-light">JML</th><th class="text-center bg-warning">RATA</th></tr>'; document.getElementById('tbl-leger').querySelector('thead').innerHTML = thead; let tbody = ''; res.data.forEach(r => { tbody += `<tr><td class="text-center">${r.no}</td><td>${r.nama}</td>`; res.headers.forEach(h => { let nilai = r[h]; let color = (nilai < 75 && nilai > 0) ? 'text-danger fw-bold' : ''; tbody += `<td class="text-center ${color}">${nilai}</td>`; }); tbody += `<td class="text-center fw-bold">${r.total}</td><td class="text-center fw-bold bg-light">${r.rata}</td></tr>`; }); document.getElementById('tbl-leger').querySelector('tbody').innerHTML = tbody; document.getElementById('judul-leger').innerText = `LEGER NILAI KELAS ${k} - ${m}`; }).getLegerDinamis(k, m); }
  function saveAgenda(){ let d=[document.getElementById('ag-tgl').value, document.getElementById('ag-kelas').value, document.getElementById('ag-mapel').value, document.getElementById('ag-materi').value, document.getElementById('ag-status').value, document.getElementById('ag-tuntas').value, document.getElementById('ag-hadir').value, document.getElementById('ag-tdk').value, document.getElementById('ag-pert').value, CUR_USER.nama]; Swal.showLoading(); google.script.run.withSuccessHandler(()=>{Swal.close();Swal.fire('Sukses','Jurnal Disimpan','success'); loadAgendaList();}).tambahAgenda(d); }
  function loadAgendaList(){ let f=document.getElementById('filter-ag-mapel').value; document.getElementById('judul-agenda').innerText = `JURNAL MENGAJAR ${f||'SEMUA'}`; google.script.run.withSuccessHandler(d=>{ let h=''; d.forEach((r)=>{ if(f && r[3]!==f)return; h+=`<tr><td>${r[0]}</td><td>${r[2]}</td><td>${r[3]}</td><td>${r[4]}</td><td>${r[5]}</td><td>${r[6]}</td><td>${r[7]}</td><td>${r[8]}</td></tr>`; }); document.querySelector('#tbl-agenda tbody').innerHTML=h; }).getAgenda(CUR_USER.nama); }
  function saveSiswaBim(){ google.script.run.withSuccessHandler(()=>{Swal.fire('Sukses','Disimpan','success'); refreshSiswaBim()}).simpanSiswaBimbingan(document.getElementById('wb-nama').value, document.getElementById('wb-kelas').value, CUR_USER.nama); }
  function refreshSiswaBim(){ if(!CUR_USER)return; google.script.run.withSuccessHandler(d=>{ SISWA_BIM=d; let s=document.getElementById('bk-siswa'); s.innerHTML='<option value="">Pilih...</option>'; d.forEach(x=>{ let o=document.createElement('option');o.value=x.nama;o.innerText=x.nama;o.setAttribute('k',x.kelas);s.appendChild(o); }); }).getSiswaBimbingan(CUR_USER.nama); google.script.run.withSuccessHandler(d=>{ let h=''; d.forEach(r=>h+=`<tr><td>${r[0]}</td><td>${r[1]}</td><td>${r[4]}</td><td>${r[5]}</td></tr>`); document.querySelector('#tbl-bk tbody').innerHTML=h; }).getRiwayatBimbingan(CUR_USER.nama); }
  function fillKelasBK(){ let s=document.getElementById('bk-siswa'); let k=s.options[s.selectedIndex].getAttribute('k'); document.getElementById('bk-kelas-auto').value=k; }
  function saveBK(){ let d=[document.getElementById('bk-tgl').value, document.getElementById('bk-siswa').value, document.getElementById('bk-kelas-auto').value, document.getElementById('bk-jenis').value, document.getElementById('bk-topik').value, document.getElementById('bk-hasil').value, CUR_USER.nama]; google.script.run.withSuccessHandler(()=>{Swal.fire('Sukses','Disimpan','success'); refreshSiswaBim();}).simpanCatatanBimbingan(d); }

  function printPDF(id, name, ori) {
      const { jsPDF } = window.jspdf; const doc = new jsPDF(ori, 'mm', 'a4');
      let s = document.getElementById('adm-sekolah').value || "SMPN 3 Kerinci";
      if(id.startsWith('area')) {
          let tbl = document.getElementById(id).querySelector('table');
          let clone = tbl.cloneNode(true);
          doc.setFontSize(14); doc.text(s, 14, 15);
          doc.setFontSize(10); doc.text(`Laporan: ${name}`, 14, 22);
          doc.autoTable({ html: clone, startY: 32, theme: 'grid', styles: {fontSize: 8} });
          doc.save(name+'.pdf');
      }
  }
</script>
</body>
</html>

Yefri Haryanto

Source Code Aplikasi Administrasi Guru Lengkap (Absensi, Nilai, Jurnal, Guru Wali, Modul Ajar) lengkap dalam 1 Aplikasi untuk 1 Sekolah

Solusi: Sistem Administrasi Guru Berbasis Google AppScript

Kelebihan Menggunakan AppScript:

Langkah Instalasi (Deploy)

1. Kode Backend (Code.gs)

2. Kode Frontend (Index.html)

Sistem Administrasi Guru Lengkap (AppScript)

Perangkat Ajar Pembelajaran Mendalam (Deep Learning) SD, SMP, SMA

Source Code Aplikasi Administrasi Guru Lengkap & Wali Kelas

Aplikasi Administrasi Guru & Guru Wali

Aplikasi Guru Wali & Konseling Digital

Aplikasi Bimbingan Konseling (Guru-BK)

Menu Halaman Statis