Membuat Aplikasi "Absensi Pegawai" dengan Google Apps Script

Di era digital saat ini, kebutuhan akan sistem absensi yang praktis, akurat, dan dapat diakses dari berbagai perangkat menjadi semakin penting. Banyak perusahaan, sekolah, rumah sakit, hingga instansi pemerintahan mulai beralih dari metode absensi manual ke sistem berbasis web yang lebih efisien dan terintegrasi.

Salah satu solusi yang paling mudah dan ekonomis adalah memanfaatkan Google Apps Script (GAS). Dengan menggunakan Google Spreadsheet sebagai database dan Google Apps Script sebagai backend, Anda dapat membangun aplikasi absensi pegawai modern tanpa perlu menyewa hosting, membeli server, maupun menggunakan software berbayar.

Pada artikel ini, kita akan membahas cara membuat aplikasi Absensi Pegawai Berbasis Google Apps Script yang dilengkapi berbagai fitur modern seperti GPS Location, Selfie Verification, Rekap Kehadiran Otomatis, Manajemen Karyawan, dan Pengaturan Sistem.

Fitur Utama Aplikasi

📍 Absensi Masuk & Pulang
📋 Riwayat Absensi
📊 Rekap Kehadiran Bulanan
👥 Data Karyawan
⚙️ Pengaturan Sistem
📸 Selfie Verification
📍 Validasi Lokasi GPS
📱 Responsive Mobile Friendly

Cara Deploy ke Google Apps Script

1. Buat Google Spreadsheet

Buat spreadsheet baru melalui Google Sheets dan catat Spreadsheet ID yang terdapat pada URL berikut:

https://docs.google.com/spreadsheets/d/SPREADSHEET_ID_ADA_DI_SINI/edit

2. Buat Project Google Apps Script

Buka script.google.com
Klik New Project
Hapus isi file Code.gs bawaan
Paste source code Code.gs
Klik New File → HTML
Beri nama file index
Paste source code Index.html

3. Ganti Konfigurasi Utama

Pada file Code.gs:

const SPREADSHEET_ID = 'GANTI_DENGAN_SPREADSHEET_ID_ANDA';

Pada file Index.html:

const SCRIPT_URL = 'https://script.google.com/macros/s/DEPLOYMENT_ID/exec';

4. Inisialisasi Spreadsheet

Jalankan fungsi initSpreadsheet() satu kali melalui editor Google Apps Script untuk membuat seluruh sheet yang diperlukan secara otomatis.

5. Deploy Sebagai Web App

Klik Deploy → New Deployment
Pilih Web App
Pada bagian Execute As pilih Me
Pada bagian Who Has Access pilih Anyone atau Anyone with Google Account
Klik Deploy
Salin URL Web App yang dihasilkan
Masukkan URL tersebut ke variabel SCRIPT_URL
Lakukan deploy ulang aplikasi

Source Code Aplikasi

Berikut adalah file utama yang digunakan untuk menjalankan aplikasi Absensi Pegawai.

📄 File Code.gs

// ============================================================
// SISTEM ABSENSI KARYAWAN — Google Apps Script Backend
// ============================================================
// SETUP:
// 1. Buat Google Spreadsheet baru
// 2. Copy Spreadsheet ID ke konstanta SPREADSHEET_ID di bawah
// 3. Deploy sebagai Web App (Execute as: Me, Access: Anyone)
// 4. Pastikan scope: spreadsheets, drive, script.external_request
// ============================================================

const SPREADSHEET_ID = 'GANTI_DENGAN_SPREADSHEET_ID_ANDA';

// Sheet names
const SHEET_ABSENSI    = 'Absensi';
const SHEET_KARYAWAN   = 'Karyawan';
const SHEET_REKAP      = 'Rekap Bulanan';
const SHEET_PENGATURAN = 'Pengaturan';

// Jam kerja default (bisa diubah di sheet Pengaturan)
const DEFAULT_JAM_MASUK  = '08:00';
const DEFAULT_JAM_PULANG = '17:00';
const TOLERANSI_MENIT    = 15;

// ============================================================
// ENTRY POINTS
// ============================================================

function doGet(e) {
  return HtmlService
    .createHtmlOutputFromFile('index')
    .setTitle('Sistem Absensi Karyawan')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
    .addMetaTag('viewport', 'width=device-width, initial-scale=1.0');
}

function doPost(e) {
  const params = JSON.parse(e.postData.contents);
  const action = params.action;
  try {
    switch (action) {
      case 'checkIn':         return respond(checkIn(params));
      case 'checkOut':        return respond(checkOut(params));
      case 'getStatus':       return respond(getStatus(params));
      case 'getKaryawan':     return respond(getKaryawanList());
      case 'getRekap':        return respond(getRekap(params));
      case 'addKaryawan':     return respond(addKaryawan(params));
      case 'getPengaturan':   return respond(getPengaturan());
      case 'savePengaturan':  return respond(savePengaturan(params));
      case 'getRekapBulanan': return respond(getRekapBulanan(params));
      default: return respond({ success: false, message: 'Action tidak dikenal' });
    }
  } catch (err) {
    return respond({ success: false, message: err.toString() });
  }
}

function respond(data) {
  return ContentService
    .createTextOutput(JSON.stringify(data))
    .setMimeType(ContentService.MimeType.JSON);
}

// ============================================================
// INISIALISASI SPREADSHEET
// ============================================================

function initSpreadsheet() {
  const ss = SpreadsheetApp.openById(SPREADSHEET_ID);

  // Sheet Karyawan
  let sheetK = ss.getSheetByName(SHEET_KARYAWAN);
  if (!sheetK) {
    sheetK = ss.insertSheet(SHEET_KARYAWAN);
    sheetK.appendRow(['ID Karyawan', 'Nama', 'Jabatan', 'Departemen', 'Email', 'Status', 'Tanggal Bergabung']);
    sheetK.getRange(1, 1, 1, 7).setFontWeight('bold').setBackground('#1a237e').setFontColor('#ffffff');
    sheetK.appendRow(['EMP001', 'Ahmad Fauzi', 'Staff IT', 'Teknologi', 'ahmad@perusahaan.com', 'Aktif', '2023-01-15']);
    sheetK.appendRow(['EMP002', 'Siti Rahayu', 'Manager HRD', 'HR', 'siti@perusahaan.com', 'Aktif', '2022-06-01']);
    sheetK.appendRow(['EMP003', 'Budi Santoso', 'Staff Keuangan', 'Finance', 'budi@perusahaan.com', 'Aktif', '2023-03-10']);
  }

  // Sheet Absensi
  let sheetA = ss.getSheetByName(SHEET_ABSENSI);
  if (!sheetA) {
    sheetA = ss.insertSheet(SHEET_ABSENSI);
    sheetA.appendRow([
      'ID Absensi', 'Tanggal', 'ID Karyawan', 'Nama Karyawan',
      'Jam Masuk', 'Lat Masuk', 'Lng Masuk', 'Foto Masuk',
      'Jam Pulang', 'Lat Pulang', 'Lng Pulang', 'Foto Pulang',
      'Durasi Kerja (Jam)', 'Status', 'Keterlambatan (Menit)',
      'Keterangan', 'Device Info'
    ]);
    sheetA.getRange(1, 1, 1, 17).setFontWeight('bold').setBackground('#1a237e').setFontColor('#ffffff');
    sheetA.setFrozenRows(1);
  }

  // Sheet Rekap Bulanan
  let sheetR = ss.getSheetByName(SHEET_REKAP);
  if (!sheetR) {
    sheetR = ss.insertSheet(SHEET_REKAP);
    sheetR.appendRow([
      'Bulan', 'ID Karyawan', 'Nama', 'Total Hadir', 'Total Terlambat',
      'Total Absen', 'Rata-rata Jam Kerja', 'Total Keterlambatan (Menit)'
    ]);
    sheetR.getRange(1, 1, 1, 8).setFontWeight('bold').setBackground('#1a237e').setFontColor('#ffffff');
  }

  // Sheet Pengaturan
  let sheetP = ss.getSheetByName(SHEET_PENGATURAN);
  if (!sheetP) {
    sheetP = ss.insertSheet(SHEET_PENGATURAN);
    sheetP.appendRow(['Parameter', 'Nilai']);
    sheetP.getRange(1, 1, 1, 2).setFontWeight('bold').setBackground('#1a237e').setFontColor('#ffffff');
    sheetP.appendRow(['Jam Masuk', DEFAULT_JAM_MASUK]);
    sheetP.appendRow(['Jam Pulang', DEFAULT_JAM_PULANG]);
    sheetP.appendRow(['Toleransi Keterlambatan (Menit)', TOLERANSI_MENIT]);
    sheetP.appendRow(['Nama Perusahaan', 'PT. Nama Perusahaan Anda']);
    sheetP.appendRow(['Radius Absensi (Meter)', '100']);
    sheetP.appendRow(['Lokasi Kantor Lat', '-6.2000']);
    sheetP.appendRow(['Lokasi Kantor Lng', '106.8166']);
    sheetP.appendRow(['Wajib Foto', 'true']);
    sheetP.appendRow(['Wajib Lokasi', 'false']);
  }

  return { success: true, message: 'Spreadsheet berhasil diinisialisasi' };
}

// ============================================================
// FUNGSI CHECK-IN
// ============================================================

function checkIn(params) {
  const { idKaryawan, latitude, longitude, fotoBase64, deviceInfo, keterangan } = params;
  if (!idKaryawan) return { success: false, message: 'ID Karyawan diperlukan' };

  const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
  const sheetA = ss.getSheetByName(SHEET_ABSENSI) || ss.insertSheet(SHEET_ABSENSI);
  const pengaturan = getPengaturan();

  const now = new Date();
  const tanggal = Utilities.formatDate(now, 'Asia/Jakarta', 'yyyy-MM-dd');
  const jamSekarang = Utilities.formatDate(now, 'Asia/Jakarta', 'HH:mm:ss');

  const dataHariIni = getAbsensiHariIni(idKaryawan, tanggal);
  if (dataHariIni && dataHariIni.jamMasuk) {
    return { success: false, message: `Anda sudah check-in hari ini pukul ${dataHariIni.jamMasuk}` };
  }

  // Validasi lokasi jika wajib
  if (pengaturan.wajibLokasi === 'true' && latitude && longitude) {
    const jarak = hitungJarak(
      parseFloat(latitude), parseFloat(longitude),
      parseFloat(pengaturan.lokasiKantorLat), parseFloat(pengaturan.lokasiKantorLng)
    );
    if (jarak > parseInt(pengaturan.radiusAbsensi)) {
      return {
        success: false,
        message: `Anda berada ${Math.round(jarak)}m dari kantor. Radius yang diizinkan: ${pengaturan.radiusAbsensi}m`
      };
    }
  }

  // Hitung keterlambatan
  const [jamMasukH, jamMasukM] = pengaturan.jamMasuk.split(':').map(Number);
  const toleransiM = parseInt(pengaturan.toleransiKeterlambatan);
  const batasJam = new Date(now);
  batasJam.setHours(jamMasukH, jamMasukM + toleransiM, 0, 0);

  let keterlambatanMenit = 0;
  let statusAbsensi = 'Hadir';
  if (now > batasJam) {
    keterlambatanMenit = Math.floor((now - batasJam) / 60000);
    statusAbsensi = 'Terlambat';
  }

  const karyawan = getKaryawanById(idKaryawan);
  const namaKaryawan = karyawan ? karyawan.nama : idKaryawan;

  let fotoUrl = '';
  if (fotoBase64) fotoUrl = simpanFoto(fotoBase64, `${idKaryawan}_masuk_${tanggal}`);

  const idAbsensi = `ABS-${tanggal.replace(/-/g,'')}-${idKaryawan}`;

  sheetA.appendRow([
    idAbsensi, tanggal, idKaryawan, namaKaryawan,
    jamSekarang, latitude || '', longitude || '', fotoUrl,
    '', '', '', '',
    '', statusAbsensi, keterlambatanMenit,
    keterangan || '', deviceInfo || ''
  ]);

  const lastRow = sheetA.getLastRow();
  if (statusAbsensi === 'Terlambat') {
    sheetA.getRange(lastRow, 14).setBackground('#fff3e0').setFontColor('#e65100');
  } else {
    sheetA.getRange(lastRow, 14).setBackground('#e8f5e9').setFontColor('#2e7d32');
  }

  return {
    success: true,
    message: statusAbsensi === 'Terlambat'
      ? `Check-in berhasil. Anda terlambat ${keterlambatanMenit} menit.`
      : 'Check-in berhasil. Selamat bekerja!',
    data: { idAbsensi, tanggal, jamMasuk: jamSekarang, status: statusAbsensi, keterlambatan: keterlambatanMenit, namaKaryawan, fotoUrl }
  };
}

// ============================================================
// FUNGSI CHECK-OUT
// ============================================================

function checkOut(params) {
  const { idKaryawan, latitude, longitude, fotoBase64, deviceInfo, keterangan } = params;
  if (!idKaryawan) return { success: false, message: 'ID Karyawan diperlukan' };

  const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
  const sheetA = ss.getSheetByName(SHEET_ABSENSI);
  if (!sheetA) return { success: false, message: 'Data absensi tidak ditemukan' };

  const now = new Date();
  const tanggal = Utilities.formatDate(now, 'Asia/Jakarta', 'yyyy-MM-dd');
  const jamSekarang = Utilities.formatDate(now, 'Asia/Jakarta', 'HH:mm:ss');

  const data = sheetA.getDataRange().getValues();
  let rowIndex = -1;
  let jamMasuk = '';

  for (let i = 1; i < data.length; i++) {
    if (data[i][1] == tanggal && data[i][2] == idKaryawan && !data[i][8]) {
      rowIndex = i + 1;
      jamMasuk = data[i][4];
      break;
    }
  }

  if (rowIndex === -1) {
    return { success: false, message: 'Anda belum check-in hari ini atau sudah check-out' };
  }

  let durasiJam = 0;
  if (jamMasuk) {
    const [mH, mM, mS] = jamMasuk.split(':').map(Number);
    const [kH, kM, kS] = jamSekarang.split(':').map(Number);
    durasiJam = Math.max(0, parseFloat((((kH * 3600 + kM * 60 + kS) - (mH * 3600 + mM * 60 + mS)) / 3600).toFixed(2)));
  }

  let fotoUrl = '';
  if (fotoBase64) fotoUrl = simpanFoto(fotoBase64, `${idKaryawan}_pulang_${tanggal}`);

  sheetA.getRange(rowIndex, 9).setValue(jamSekarang);
  sheetA.getRange(rowIndex, 10).setValue(latitude || '');
  sheetA.getRange(rowIndex, 11).setValue(longitude || '');
  sheetA.getRange(rowIndex, 12).setValue(fotoUrl);
  sheetA.getRange(rowIndex, 13).setValue(durasiJam);
  if (keterangan) sheetA.getRange(rowIndex, 16).setValue(keterangan);

  updateRekapBulanan(idKaryawan, tanggal);

  return {
    success: true,
    message: `Check-out berhasil. Total jam kerja: ${durasiJam.toFixed(1)} jam`,
    data: { jamPulang: jamSekarang, durasiJam, tanggal }
  };
}

// ============================================================
// CEK STATUS
// ============================================================

function getStatus(params) {
  const { idKaryawan } = params;
  if (!idKaryawan) return { success: false, message: 'ID Karyawan diperlukan' };

  const now = new Date();
  const tanggal = Utilities.formatDate(now, 'Asia/Jakarta', 'yyyy-MM-dd');
  const jamSekarang = Utilities.formatDate(now, 'Asia/Jakarta', 'HH:mm:ss');

  const absensi = getAbsensiHariIni(idKaryawan, tanggal);
  const karyawan = getKaryawanById(idKaryawan);
  const pengaturan = getPengaturan();

  return {
    success: true,
    data: {
      tanggal, jamSekarang, karyawan, absensi,
      pengaturan: {
        jamMasuk: pengaturan.jamMasuk,
        jamPulang: pengaturan.jamPulang,
        namaPerusahaan: pengaturan.namaPerusahaan
      }
    }
  };
}

// ============================================================
// MANAJEMEN KARYAWAN
// ============================================================

function getKaryawanList() {
  const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
  const sheet = ss.getSheetByName(SHEET_KARYAWAN);
  if (!sheet) return { success: false, message: 'Sheet karyawan tidak ditemukan' };

  const data = sheet.getDataRange().getValues();
  const karyawanList = [];
  for (let i = 1; i < data.length; i++) {
    if (data[i][0]) {
      karyawanList.push({
        id: data[i][0], nama: data[i][1], jabatan: data[i][2],
        departemen: data[i][3], email: data[i][4], status: data[i][5]
      });
    }
  }
  return { success: true, data: karyawanList };
}

function getKaryawanById(id) {
  const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
  const sheet = ss.getSheetByName(SHEET_KARYAWAN);
  if (!sheet) return null;

  const data = sheet.getDataRange().getValues();
  for (let i = 1; i < data.length; i++) {
    if (data[i][0] == id) {
      return {
        id: data[i][0], nama: data[i][1], jabatan: data[i][2],
        departemen: data[i][3], email: data[i][4], status: data[i][5]
      };
    }
  }
  return null;
}

function addKaryawan(params) {
  const { id, nama, jabatan, departemen, email } = params;
  if (!id || !nama) return { success: false, message: 'ID dan Nama wajib diisi' };

  const existing = getKaryawanById(id);
  if (existing) return { success: false, message: `ID ${id} sudah terdaftar` };

  const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
  const sheet = ss.getSheetByName(SHEET_KARYAWAN);
  const tanggal = Utilities.formatDate(new Date(), 'Asia/Jakarta', 'yyyy-MM-dd');
  sheet.appendRow([id, nama, jabatan || '', departemen || '', email || '', 'Aktif', tanggal]);

  return { success: true, message: `Karyawan ${nama} berhasil ditambahkan` };
}

// ============================================================
// REKAP & LAPORAN
// ============================================================

function getRekap(params) {
  const { idKaryawan, bulan, tahun } = params;
  const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
  const sheetA = ss.getSheetByName(SHEET_ABSENSI);
  if (!sheetA) return { success: false, message: 'Data tidak ditemukan' };

  const data = sheetA.getDataRange().getValues();
  const hasil = [];

  for (let i = 1; i < data.length; i++) {
    const row = data[i];
    if (!row[0]) continue;
    const tgl = row[1] ? row[1].toString() : '';
    const filterBulan = bulan ? tgl.startsWith(`${tahun}-${bulan.toString().padStart(2,'0')}`) : true;
    const filterKaryawan = idKaryawan ? row[2] == idKaryawan : true;

    if (filterBulan && filterKaryawan) {
      hasil.push({
        idAbsensi: row[0], tanggal: row[1], idKaryawan: row[2],
        namaKaryawan: row[3], jamMasuk: row[4],
        latMasuk: row[5], lngMasuk: row[6], fotoMasuk: row[7],
        jamPulang: row[8], latPulang: row[9], lngPulang: row[10],
        fotoPulang: row[11], durasiKerja: row[12],
        status: row[13], keterlambatan: row[14], keterangan: row[15]
      });
    }
  }
  return { success: true, data: hasil };
}

function getRekapBulanan(params) {
  const { bulan, tahun } = params;
  const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
  const sheetA = ss.getSheetByName(SHEET_ABSENSI);
  if (!sheetA) return { success: false, message: 'Data tidak ditemukan' };

  const karyawanList = getKaryawanList().data || [];
  const data = sheetA.getDataRange().getValues();
  const rekapMap = {};

  karyawanList.forEach(k => {
    rekapMap[k.id] = {
      id: k.id, nama: k.nama, jabatan: k.jabatan,
      totalHadir: 0, totalTerlambat: 0, totalAbsen: 0,
      totalDurasi: 0, totalKeterlambatan: 0
    };
  });

  for (let i = 1; i < data.length; i++) {
    const row = data[i];
    if (!row[0]) continue;
    const tgl = row[1] ? row[1].toString() : '';
    if (!tgl.startsWith(`${tahun}-${bulan.toString().padStart(2,'0')}`)) continue;

    const kId = row[2];
    if (!rekapMap[kId]) {
      rekapMap[kId] = {
        id: kId, nama: row[3], totalHadir: 0, totalTerlambat: 0,
        totalAbsen: 0, totalDurasi: 0, totalKeterlambatan: 0
      };
    }
    rekapMap[kId].totalHadir++;
    if (row[13] === 'Terlambat') rekapMap[kId].totalTerlambat++;
    if (row[12]) rekapMap[kId].totalDurasi += parseFloat(row[12]) || 0;
    if (row[14]) rekapMap[kId].totalKeterlambatan += parseInt(row[14]) || 0;
  }

  const hasil = Object.values(rekapMap).map(r => ({
    ...r,
    rataRataDurasi: r.totalHadir > 0 ? (r.totalDurasi / r.totalHadir).toFixed(2) : 0
  }));

  return { success: true, data: hasil };
}

function updateRekapBulanan(idKaryawan, tanggal) {
  try {
    const [tahun, bulan] = tanggal.split('-');
    const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
    const sheetR = ss.getSheetByName(SHEET_REKAP);
    const rekap = getRekapBulanan({ bulan: parseInt(bulan), tahun: parseInt(tahun) });
    const kData = rekap.data.find(k => k.id == idKaryawan);
    if (!kData) return;

    const bulanLabel = `${tahun}-${bulan}`;
    const dataR = sheetR.getDataRange().getValues();
    let rowIdx = -1;
    for (let i = 1; i < dataR.length; i++) {
      if (dataR[i][0] == bulanLabel && dataR[i][1] == idKaryawan) { rowIdx = i + 1; break; }
    }

    const rowData = [bulanLabel, kData.id, kData.nama, kData.totalHadir,
      kData.totalTerlambat, kData.totalAbsen, kData.rataRataDurasi, kData.totalKeterlambatan];

    if (rowIdx > 0) {
      sheetR.getRange(rowIdx, 1, 1, 8).setValues([rowData]);
    } else {
      sheetR.appendRow(rowData);
    }
  } catch(e) { /* silent fail */ }
}

// ============================================================
// PENGATURAN
// ============================================================

function getPengaturan() {
  try {
    const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
    const sheet = ss.getSheetByName(SHEET_PENGATURAN);
    if (!sheet) return getDefaultPengaturan();

    const data = sheet.getDataRange().getValues();
    const p = {};
    for (let i = 1; i < data.length; i++) {
      const key = data[i][0].toString().toLowerCase()
        .replace(/ /g,'').replace(/\(/g,'').replace(/\)/g,'')
        .replace('jammasuk','jamMasuk').replace('jampulang','jamPulang')
        .replace('toleransiketerlambatanmenit','toleransiKeterlambatan')
        .replace('namaperusahaan','namaPerusahaan')
        .replace('radiusabsensimeter','radiusAbsensi')
        .replace('lokasikanttorlat','lokasiKantorLat').replace('lokasikantorLat','lokasiKantorLat').replace('lokasikantorlat','lokasiKantorLat')
        .replace('lokasikanttorlng','lokasiKantorLng').replace('lokasikantorLng','lokasiKantorLng').replace('lokasikantorlng','lokasiKantorLng')
        .replace('wajibfoto','wajibFoto').replace('wajib lokasi','wajibLokasi').replace('wajibLokasi','wajibLokasi').replace('wajib lokasi','wajibLokasi');
      p[key] = data[i][1] ? data[i][1].toString() : '';
    }

    return {
      jamMasuk:               p['jamMasuk'] || DEFAULT_JAM_MASUK,
      jamPulang:              p['jamPulang'] || DEFAULT_JAM_PULANG,
      toleransiKeterlambatan: p['toleransiKeterlambatan'] || TOLERANSI_MENIT.toString(),
      namaPerusahaan:         p['namaPerusahaan'] || 'PT. Perusahaan Anda',
      radiusAbsensi:          p['radiusAbsensi'] || '100',
      lokasiKantorLat:        p['lokasiKantorLat'] || '-6.2000',
      lokasiKantorLng:        p['lokasiKantorLng'] || '106.8166',
      wajibFoto:              p['wajibFoto'] || 'true',
      wajibLokasi:            p['wajibLokasi'] || 'false'
    };
  } catch(e) {
    return getDefaultPengaturan();
  }
}

function getDefaultPengaturan() {
  return {
    jamMasuk: DEFAULT_JAM_MASUK, jamPulang: DEFAULT_JAM_PULANG,
    toleransiKeterlambatan: TOLERANSI_MENIT.toString(),
    namaPerusahaan: 'PT. Perusahaan Anda', radiusAbsensi: '100',
    lokasiKantorLat: '-6.2000', lokasiKantorLng: '106.8166',
    wajibFoto: 'true', wajibLokasi: 'false'
  };
}

function savePengaturan(params) {
  const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
  let sheet = ss.getSheetByName(SHEET_PENGATURAN);
  if (!sheet) {
    sheet = ss.insertSheet(SHEET_PENGATURAN);
  }
  sheet.clearContents();
  sheet.appendRow(['Parameter', 'Nilai']);
  sheet.appendRow(['Jam Masuk', params.jamMasuk]);
  sheet.appendRow(['Jam Pulang', params.jamPulang]);
  sheet.appendRow(['Toleransi Keterlambatan (Menit)', params.toleransiKeterlambatan]);
  sheet.appendRow(['Nama Perusahaan', params.namaPerusahaan]);
  sheet.appendRow(['Radius Absensi (Meter)', params.radiusAbsensi]);
  sheet.appendRow(['Lokasi Kantor Lat', params.lokasiKantorLat]);
  sheet.appendRow(['Lokasi Kantor Lng', params.lokasiKantorLng]);
  sheet.appendRow(['Wajib Foto', params.wajibFoto]);
  sheet.appendRow(['Wajib Lokasi', params.wajibLokasi]);
  sheet.getRange(1, 1, 1, 2).setFontWeight('bold').setBackground('#1a237e').setFontColor('#ffffff');

  return { success: true, message: 'Pengaturan berhasil disimpan' };
}

// ============================================================
// HELPER FUNCTIONS
// ============================================================

function getAbsensiHariIni(idKaryawan, tanggal) {
  const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
  const sheet = ss.getSheetByName(SHEET_ABSENSI);
  if (!sheet) return null;

  const data = sheet.getDataRange().getValues();
  for (let i = 1; i < data.length; i++) {
    if (data[i][1] == tanggal && data[i][2] == idKaryawan) {
      return {
        idAbsensi: data[i][0], tanggal: data[i][1],
        jamMasuk: data[i][4], jamPulang: data[i][8],
        status: data[i][13], keterlambatan: data[i][14],
        durasiKerja: data[i][12]
      };
    }
  }
  return null;
}

function simpanFoto(base64Data, namaFile) {
  try {
    const base64Clean = base64Data.replace(/^data:image\/\w+;base64,/, '');
    const blob = Utilities.newBlob(Utilities.base64Decode(base64Clean), 'image/jpeg', `${namaFile}.jpg`);

    let folder;
    const folders = DriveApp.getFoldersByName('Foto Absensi');
    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder('Foto Absensi');
    }

    const file = folder.createFile(blob);
    file.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.VIEW);
    return file.getDownloadUrl();
  } catch (e) {
    return '';
  }
}

function hitungJarak(lat1, lng1, lat2, lng2) {
  const R = 6371000;
  const φ1 = lat1 * Math.PI / 180;
  const φ2 = lat2 * Math.PI / 180;
  const Δφ = (lat2 - lat1) * Math.PI / 180;
  const Δλ = (lng2 - lng1) * Math.PI / 180;
  const a = Math.sin(Δφ/2) * Math.sin(Δφ/2) +
            Math.cos(φ1) * Math.cos(φ2) *
            Math.sin(Δλ/2) * Math.sin(Δλ/2);
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  return R * c;
}

function setupTriggers() {
  ScriptApp.newTrigger('initSpreadsheet').timeBased().everyDays(1).atHour(0).create();
}

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

🌐 File Index.html

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Sistem Absensi</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
<style>
  :root {
    --bg:         #0a0f1e;
    --bg2:        #111827;
    --surface:    #1a2235;
    --surface2:   #242d42;
    --border:     rgba(99,179,237,0.12);
    --primary:    #3b82f6;
    --primary-g:  linear-gradient(135deg,#3b82f6,#6366f1);
    --success:    #10b981;
    --success-bg: rgba(16,185,129,0.1);
    --warn:       #f59e0b;
    --warn-bg:    rgba(245,158,11,0.1);
    --danger:     #ef4444;
    --danger-bg:  rgba(239,68,68,0.1);
    --text:       #f1f5f9;
    --text-muted: #64748b;
    --text-soft:  #94a3b8;
    --radius:     16px;
    --radius-sm:  10px;
    --shadow:     0 8px 32px rgba(0,0,0,0.4);
    --font:       'Plus Jakarta Sans', sans-serif;
    --mono:       'JetBrains Mono', monospace;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    height: 100%; font-family: var(--font);
    background: var(--bg); color: var(--text);
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
  }
  .app { min-height: 100vh; display: flex; flex-direction: column; }

  .header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(10,15,30,0.85); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 14px 20px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .header-brand { display: flex; align-items: center; gap: 10px; }
  .header-logo {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--primary-g);
    display: flex; align-items: center; justify-content: center; font-size: 18px;
  }
  .header-title { font-size: 15px; font-weight: 700; letter-spacing: -0.3px; }
  .header-sub { font-size: 11px; color: var(--text-muted); font-weight: 500; }
  .header-time { text-align: right; font-family: var(--mono); font-size: 18px; font-weight: 600; color: var(--primary); letter-spacing: 1px; }
  .header-date { font-size: 11px; color: var(--text-muted); text-align: right; margin-top: 2px; }

  .nav-bar {
    position: sticky; top: 65px; z-index: 99;
    background: rgba(10,15,30,0.95); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    display: flex; overflow-x: auto; scrollbar-width: none; padding: 0 8px;
  }
  .nav-bar::-webkit-scrollbar { display: none; }
  .nav-btn {
    flex-shrink: 0; padding: 14px 16px; border: none; background: none;
    color: var(--text-muted); font-family: var(--font); font-size: 12px; font-weight: 600;
    cursor: pointer; display: flex; align-items: center; gap: 6px;
    border-bottom: 2px solid transparent; transition: all .2s; white-space: nowrap;
  }
  .nav-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
  .nav-btn:hover:not(.active) { color: var(--text-soft); }

  .page { display: none; padding: 20px; flex: 1; animation: fadeUp .3s ease; }
  .page.active { display: block; }
  @keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

  .card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow);
  }
  .card-title {
    font-size: 13px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 14px;
    display: flex; align-items: center; gap: 8px;
  }

  .status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  }
  .badge-hadir    { background: var(--success-bg); color: var(--success); }
  .badge-terlambat { background: var(--warn-bg); color: var(--warn); }
  .badge-belum    { background: rgba(100,116,139,0.1); color: var(--text-muted); }
  .badge-pulang   { background: rgba(99,102,241,0.1); color: #818cf8; }

  .user-card {
    background: linear-gradient(135deg, var(--surface) 0%, #1e293b 100%);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 20px; margin-bottom: 16px; position: relative; overflow: hidden;
  }
  .user-card::before { content:''; position:absolute; inset:0; background:var(--primary-g); opacity:0.04; }
  .user-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--primary-g); display: flex; align-items: center; justify-content: center;
    font-size: 22px; margin-bottom: 12px; box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
  }
  .user-name { font-size: 18px; font-weight: 800; letter-spacing: -0.5px; }
  .user-jabatan { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

  .time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
  .time-block {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 12px 14px;
  }
  .time-block-label { font-size: 10px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
  .time-block-value { font-family: var(--mono); font-size: 20px; font-weight: 600; color: var(--primary); margin-top: 4px; letter-spacing: 1px; }
  .time-block-value.empty { color: var(--text-muted); font-size: 16px; }

  .btn {
    width: 100%; padding: 16px; border: none; border-radius: var(--radius);
    font-family: var(--font); font-size: 15px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    gap: 8px; transition: all .2s; letter-spacing: -0.2px;
    position: relative; overflow: hidden;
  }
  .btn::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,0); transition:background .2s; }
  .btn:hover::before { background: rgba(255,255,255,0.06); }
  .btn:active { transform: scale(0.98); }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .btn-primary  { background: var(--primary-g); color: white; box-shadow: 0 4px 20px rgba(59,130,246,0.4); }
  .btn-success  { background: linear-gradient(135deg,#10b981,#059669); color: white; box-shadow: 0 4px 20px rgba(16,185,129,0.4); }
  .btn-warning  { background: linear-gradient(135deg,#f59e0b,#d97706); color: white; box-shadow: 0 4px 20px rgba(245,158,11,0.3); }
  .btn-outline  { background: transparent; border: 1px solid var(--border); color: var(--text-soft); }
  .btn-sm       { width: auto; padding: 8px 16px; font-size: 13px; border-radius: var(--radius-sm); }

  .form-group { margin-bottom: 14px; }
  .form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
  .form-control {
    width: 100%; padding: 12px 14px; background: var(--surface2);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text); font-family: var(--font); font-size: 14px;
    transition: border-color .2s; outline: none;
  }
  .form-control:focus { border-color: var(--primary); }
  .form-control::placeholder { color: var(--text-muted); }
  select.form-control { cursor: pointer; }
  select.form-control option { background: var(--surface2); }

  .camera-wrap {
    background: var(--surface2); border: 2px dashed var(--border);
    border-radius: var(--radius); overflow: hidden;
    aspect-ratio: 4/3; position: relative;
    display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
  }
  .camera-wrap video, .camera-wrap canvas, .camera-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
  .camera-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--text-muted); }
  .camera-icon { font-size: 48px; }
  .camera-overlay p { font-size: 13px; font-weight: 500; }

  .gps-bar {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); margin-bottom: 12px; font-size: 13px;
  }
  .gps-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
  .gps-dot.active { background: var(--success); box-shadow: 0 0 0 3px rgba(16,185,129,0.2); animation: pulse 2s infinite; }
  @keyframes pulse {
    0%,100% { box-shadow: 0 0 0 3px rgba(16,185,129,0.2); }
    50%      { box-shadow: 0 0 0 6px rgba(16,185,129,0.05); }
  }

  .alert {
    padding: 12px 16px; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 500; margin-bottom: 12px;
    display: flex; align-items: flex-start; gap: 8px;
  }
  .alert-success { background: var(--success-bg); color: var(--success); border: 1px solid rgba(16,185,129,0.2); }
  .alert-error   { background: var(--danger-bg);  color: var(--danger);  border: 1px solid rgba(239,68,68,0.2); }
  .alert-warn    { background: var(--warn-bg);    color: var(--warn);    border: 1px solid rgba(245,158,11,0.2); }

  .table-wrap { overflow-x: auto; margin: 0 -4px; }
  table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 500px; }
  th { padding: 10px 12px; text-align: left; color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); }
  td { padding: 12px; border-bottom: 1px solid rgba(99,179,237,0.05); color: var(--text-soft); }
  tr:last-child td { border-bottom: none; }
  tr:hover td { background: rgba(99,179,237,0.03); }
  td .mono { font-family: var(--mono); font-size: 12px; }

  .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
  .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; }
  .stat-val { font-size: 28px; font-weight: 800; letter-spacing: -1px; }
  .stat-label { font-size: 11px; color: var(--text-muted); font-weight: 600; margin-top: 4px; }
  .stat-val.blue   { color: var(--primary); }
  .stat-val.green  { color: var(--success); }
  .stat-val.orange { color: var(--warn); }
  .stat-val.red    { color: var(--danger); }

  .spinner { width:20px; height:20px; border-radius:50%; border:2px solid rgba(255,255,255,0.2); border-top-color:white; animation:spin .6s linear infinite; flex-shrink:0; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .modal-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
    display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  .modal-overlay.open { opacity: 1; pointer-events: all; }
  .modal {
    background: var(--bg2); border-radius: var(--radius) var(--radius) 0 0;
    width: 100%; max-width: 480px; padding: 24px;
    border: 1px solid var(--border); border-bottom: none;
    transform: translateY(100%); transition: transform .3s cubic-bezier(.32,.72,0,1);
    max-height: 90vh; overflow-y: auto;
  }
  .modal-overlay.open .modal { transform: translateY(0); }
  .modal-handle { width: 36px; height: 4px; background: var(--text-muted); border-radius: 2px; margin: 0 auto 20px; }

  .filter-row { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
  .filter-row .form-control { flex: 1; min-width: 100px; }

  .empty { text-align: center; padding: 40px 20px; color: var(--text-muted); }
  .empty-icon { font-size: 48px; margin-bottom: 12px; }
  .empty p { font-size: 14px; }

  @media (min-width: 480px) {
    .page { padding: 24px; max-width: 480px; margin: 0 auto; }
    .nav-bar { justify-content: center; }
  }
</style>
</head>
<body>
<div class="app">

  <header class="header">
    <div class="header-brand">
      <div class="header-logo">👤</div>
      <div>
        <div class="header-title" id="companyName">Sistem Absensi</div>
        <div class="header-sub">Karyawan Portal</div>
      </div>
    </div>
    <div>
      <div class="header-time" id="liveClock">--:--:--</div>
      <div class="header-date" id="liveDate">--</div>
    </div>
  </header>

  <nav class="nav-bar">
    <button class="nav-btn active" onclick="showPage('absensi')" id="nav-absensi">📍 Absensi</button>
    <button class="nav-btn" onclick="showPage('riwayat')" id="nav-riwayat">📋 Riwayat</button>
    <button class="nav-btn" onclick="showPage('rekap')" id="nav-rekap">📊 Rekap</button>
    <button class="nav-btn" onclick="showPage('karyawan')" id="nav-karyawan">👥 Karyawan</button>
    <button class="nav-btn" onclick="showPage('pengaturan')" id="nav-pengaturan">⚙️ Pengaturan</button>
  </nav>

  <!-- PAGE: ABSENSI -->
  <div id="page-absensi" class="page active">
    <div id="loginSection">
      <div class="card">
        <div class="card-title">🔐 Masuk sebagai</div>
        <div class="form-group">
          <label class="form-label">ID Karyawan</label>
          <select class="form-control" id="selectKaryawan">
            <option value="">-- Pilih Karyawan --</option>
          </select>
        </div>
        <button class="btn btn-primary" onclick="pilihKaryawan()">Lanjutkan</button>
      </div>
    </div>

    <div id="absensiPanel" style="display:none">
      <div class="user-card" id="userCard">
        <div class="user-avatar" id="userAvatar">👤</div>
        <div class="user-name" id="userName">-</div>
        <div class="user-jabatan" id="userJabatan">-</div>
        <div style="margin-top:10px" id="userBadge"></div>
        <div class="time-grid">
          <div class="time-block">
            <div class="time-block-label">⬆ Jam Masuk</div>
            <div class="time-block-value empty" id="dispJamMasuk">--:--</div>
          </div>
          <div class="time-block">
            <div class="time-block-label">⬇ Jam Pulang</div>
            <div class="time-block-value empty" id="dispJamPulang">--:--</div>
          </div>
        </div>
        <div style="margin-top:12px;font-size:12px;color:var(--text-muted)" id="durasiInfo"></div>
      </div>

      <div class="gps-bar" id="gpsBar">
        <div class="gps-dot" id="gpsDot"></div>
        <span id="gpsText">Mendeteksi lokasi...</span>
      </div>

      <div id="absensiAlert" style="display:none"></div>

      <div class="card" id="cameraSection">
        <div class="card-title">📸 Foto Selfie</div>
        <div class="camera-wrap" id="cameraWrap">
          <div class="camera-overlay" id="cameraPlaceholder">
            <div class="camera-icon">📷</div>
            <p>Ketuk untuk ambil foto</p>
          </div>
          <video id="videoEl" autoplay playsinline style="display:none"></video>
          <canvas id="canvasEl" style="display:none"></canvas>
          <img id="previewImg" style="display:none" alt="preview">
        </div>
        <div style="display:flex;gap:8px">
          <button class="btn btn-outline btn-sm" onclick="startCamera()" id="btnKamera">📷 Buka Kamera</button>
          <button class="btn btn-outline btn-sm" onclick="retakePhoto()" id="btnUlang" style="display:none">🔄 Ulang</button>
        </div>
      </div>

      <div class="card">
        <div class="card-title">📝 Keterangan (opsional)</div>
        <textarea class="form-control" id="inputKeterangan" rows="2" placeholder="Tambahkan keterangan..."></textarea>
      </div>

      <div id="btnCheckIn">
        <button class="btn btn-success" onclick="doCheckIn()" id="checkInBtn">⬆ Check-In Sekarang</button>
      </div>
      <div id="btnCheckOut" style="display:none;margin-top:10px">
        <button class="btn btn-warning" onclick="doCheckOut()" id="checkOutBtn">⬇ Check-Out Sekarang</button>
      </div>
      <button class="btn btn-outline" style="margin-top:10px" onclick="gantiKaryawan()">🔀 Ganti Karyawan</button>
    </div>
  </div>

  <!-- PAGE: RIWAYAT -->
  <div id="page-riwayat" class="page">
    <div class="filter-row">
      <select class="form-control" id="filterKaryawanRiwayat"><option value="">Semua Karyawan</option></select>
      <input type="month" class="form-control" id="filterBulanRiwayat" style="max-width:160px">
    </div>
    <button class="btn btn-primary" onclick="loadRiwayat()" style="margin-bottom:14px">🔍 Tampilkan</button>
    <div id="riwayatResult">
      <div class="empty"><div class="empty-icon">📋</div><p>Pilih filter lalu klik Tampilkan</p></div>
    </div>
  </div>

  <!-- PAGE: REKAP -->
  <div id="page-rekap" class="page">
    <div class="filter-row">
      <select class="form-control" id="filterBulanRekap">
        <option value="1">Januari</option><option value="2">Februari</option>
        <option value="3">Maret</option><option value="4">April</option>
        <option value="5">Mei</option><option value="6">Juni</option>
        <option value="7">Juli</option><option value="8">Agustus</option>
        <option value="9">September</option><option value="10">Oktober</option>
        <option value="11">November</option><option value="12">Desember</option>
      </select>
      <input type="number" class="form-control" id="filterTahunRekap" placeholder="Tahun" style="max-width:100px">
    </div>
    <button class="btn btn-primary" onclick="loadRekap()" style="margin-bottom:14px">📊 Lihat Rekap</button>
    <div id="rekapResult">
      <div class="empty"><div class="empty-icon">📊</div><p>Pilih bulan & tahun lalu klik Lihat Rekap</p></div>
    </div>
  </div>

  <!-- PAGE: KARYAWAN -->
  <div id="page-karyawan" class="page">
    <button class="btn btn-primary" onclick="openAddKaryawan()" style="margin-bottom:14px">➕ Tambah Karyawan</button>
    <div id="karyawanList">
      <div class="empty"><div class="empty-icon">👥</div><p>Memuat data karyawan...</p></div>
    </div>
  </div>

  <!-- PAGE: PENGATURAN -->
  <div id="page-pengaturan" class="page">
    <div class="card">
      <div class="card-title">⚙️ Pengaturan Jam Kerja</div>
      <div class="form-group">
        <label class="form-label">Nama Perusahaan</label>
        <input type="text" class="form-control" id="setNamaPerusahaan" placeholder="PT. Nama Perusahaan">
      </div>
      <div class="form-group">
        <label class="form-label">Jam Masuk</label>
        <input type="time" class="form-control" id="setJamMasuk">
      </div>
      <div class="form-group">
        <label class="form-label">Jam Pulang</label>
        <input type="time" class="form-control" id="setJamPulang">
      </div>
      <div class="form-group">
        <label class="form-label">Toleransi Keterlambatan (Menit)</label>
        <input type="number" class="form-control" id="setToleransi" min="0" max="120">
      </div>
    </div>
    <div class="card">
      <div class="card-title">📍 Pengaturan Lokasi</div>
      <div class="form-group">
        <label class="form-label">Wajib Verifikasi Lokasi</label>
        <select class="form-control" id="setWajibLokasi">
          <option value="false">Tidak</option>
          <option value="true">Ya</option>
        </select>
      </div>
      <div class="form-group">
        <label class="form-label">Radius Absensi (Meter)</label>
        <input type="number" class="form-control" id="setRadius" min="50">
      </div>
      <div class="form-group">
        <label class="form-label">Latitude Kantor</label>
        <input type="text" class="form-control" id="setLat" placeholder="-6.2000">
      </div>
      <div class="form-group">
        <label class="form-label">Longitude Kantor</label>
        <input type="text" class="form-control" id="setLng" placeholder="106.8166">
      </div>
      <button class="btn btn-outline btn-sm" onclick="ambilLokasiKantor()" style="margin-bottom:12px">
        📍 Gunakan Lokasi Saat Ini sebagai Kantor
      </button>
    </div>
    <div class="card">
      <div class="card-title">📸 Pengaturan Foto</div>
      <div class="form-group">
        <label class="form-label">Wajib Foto Selfie</label>
        <select class="form-control" id="setWajibFoto">
          <option value="true">Ya</option>
          <option value="false">Tidak</option>
        </select>
      </div>
    </div>
    <div id="pengaturanAlert" style="display:none"></div>
    <button class="btn btn-primary" onclick="savePengaturan()">💾 Simpan Pengaturan</button>
  </div>

</div><!-- .app -->

<!-- MODAL: Add Karyawan -->
<div class="modal-overlay" id="modalKaryawan" onclick="closeModal(event)">
  <div class="modal">
    <div class="modal-handle"></div>
    <div style="font-size:16px;font-weight:800;margin-bottom:16px">➕ Tambah Karyawan</div>
    <div class="form-group">
      <label class="form-label">ID Karyawan *</label>
      <input type="text" class="form-control" id="newId" placeholder="EMP004">
    </div>
    <div class="form-group">
      <label class="form-label">Nama Lengkap *</label>
      <input type="text" class="form-control" id="newNama" placeholder="Nama Karyawan">
    </div>
    <div class="form-group">
      <label class="form-label">Jabatan</label>
      <input type="text" class="form-control" id="newJabatan" placeholder="Staff / Manager">
    </div>
    <div class="form-group">
      <label class="form-label">Departemen</label>
      <input type="text" class="form-control" id="newDepartemen" placeholder="IT / HR / Finance">
    </div>
    <div class="form-group">
      <label class="form-label">Email</label>
      <input type="email" class="form-control" id="newEmail" placeholder="email@perusahaan.com">
    </div>
    <div id="modalAlert" style="display:none"></div>
    <button class="btn btn-primary" onclick="submitKaryawan()">Simpan Karyawan</button>
  </div>
</div>

<script>
// ⚠️ GANTI DENGAN URL WEB APP ANDA SETELAH DEPLOY
const SCRIPT_URL = 'https://script.google.com/macros/s/GANTI_DENGAN_DEPLOYMENT_ID/exec';

let state = {
  karyawanList: [], selectedKaryawan: null,
  gpsCoords: null, fotoBase64: null, stream: null, pengaturan: {}
};

document.addEventListener('DOMContentLoaded', () => {
  startClock();
  loadKaryawanList();
  loadPengaturan();
  setDefaultBulan();
  requestGPS();
});

function startClock() {
  function tick() {
    const now = new Date();
    document.getElementById('liveClock').textContent =
      now.toLocaleTimeString('id-ID', { hour:'2-digit', minute:'2-digit', second:'2-digit' });
    document.getElementById('liveDate').textContent =
      now.toLocaleDateString('id-ID', { weekday:'long', day:'numeric', month:'long', year:'numeric' });
  }
  tick(); setInterval(tick, 1000);
}

function setDefaultBulan() {
  const now = new Date();
  document.getElementById('filterBulanRiwayat').value =
    `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}`;
  document.getElementById('filterBulanRekap').value = now.getMonth() + 1;
  document.getElementById('filterTahunRekap').value = now.getFullYear();
}

async function api(action, params = {}) {
  const res = await fetch(SCRIPT_URL, {
    method: 'POST', redirect: 'follow',
    body: JSON.stringify({ action, ...params }),
    headers: { 'Content-Type': 'text/plain' }
  });
  return await res.json();
}

function requestGPS() {
  if (!navigator.geolocation) { setGPS(false, 'GPS tidak didukung'); return; }
  setGPS(null, 'Mendeteksi lokasi...');
  navigator.geolocation.getCurrentPosition(
    pos => {
      state.gpsCoords = { lat: pos.coords.latitude, lng: pos.coords.longitude, acc: pos.coords.accuracy };
      setGPS(true, `${pos.coords.latitude.toFixed(5)}, ${pos.coords.longitude.toFixed(5)} (±${Math.round(pos.coords.accuracy)}m)`);
    },
    () => setGPS(false, 'Lokasi tidak tersedia — pastikan izin GPS aktif'),
    { enableHighAccuracy: true, timeout: 10000, maximumAge: 60000 }
  );
}

function setGPS(ok, text) {
  document.getElementById('gpsText').textContent = text;
  document.getElementById('gpsDot').classList.toggle('active', ok === true);
}

async function loadKaryawanList() {
  const res = await api('getKaryawan');
  if (!res.success) return;
  state.karyawanList = res.data || [];

  const sel = document.getElementById('selectKaryawan');
  sel.innerHTML = '<option value="">-- Pilih Karyawan --</option>';
  state.karyawanList.forEach(k => {
    sel.innerHTML += `<option value="${k.id}">${k.id} — ${k.nama}</option>`;
  });

  const fR = document.getElementById('filterKaryawanRiwayat');
  fR.innerHTML = '<option value="">Semua Karyawan</option>';
  state.karyawanList.forEach(k => {
    fR.innerHTML += `<option value="${k.id}">${k.nama}</option>`;
  });

  renderKaryawanList();
}

function renderKaryawanList() {
  const wrap = document.getElementById('karyawanList');
  if (!state.karyawanList.length) {
    wrap.innerHTML = '<div class="empty"><div class="empty-icon">👥</div><p>Belum ada karyawan</p></div>';
    return;
  }
  wrap.innerHTML = state.karyawanList.map(k => `
    <div class="card" style="margin-bottom:10px">
      <div style="display:flex;align-items:center;gap:12px">
        <div style="width:40px;height:40px;border-radius:50%;background:var(--primary-g);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0">👤</div>
        <div style="flex:1">
          <div style="font-weight:700;font-size:15px">${k.nama}</div>
          <div style="font-size:12px;color:var(--text-muted)">${k.jabatan||'-'} · ${k.departemen||'-'}</div>
        </div>
        <span class="status-badge badge-hadir">${k.id}</span>
      </div>
    </div>
  `).join('');
}

async function pilihKaryawan() {
  const id = document.getElementById('selectKaryawan').value;
  if (!id) return showAlert('absensiAlert', 'Pilih karyawan terlebih dahulu', 'warn');

  state.selectedKaryawan = state.karyawanList.find(k => k.id === id);
  document.getElementById('loginSection').style.display = 'none';
  document.getElementById('absensiPanel').style.display = 'block';
  document.getElementById('userName').textContent = state.selectedKaryawan.nama;
  document.getElementById('userJabatan').textContent = `${state.selectedKaryawan.jabatan||'-'} · ${state.selectedKaryawan.departemen||'-'}`;
  document.getElementById('userAvatar').textContent = state.selectedKaryawan.nama[0];
  await refreshStatus();
}

async function refreshStatus() {
  if (!state.selectedKaryawan) return;
  const res = await api('getStatus', { idKaryawan: state.selectedKaryawan.id });
  if (!res.success) return;

  const { absensi } = res.data;
  const badgeEl   = document.getElementById('userBadge');
  const masukEl   = document.getElementById('dispJamMasuk');
  const pulangEl  = document.getElementById('dispJamPulang');
  const durasiEl  = document.getElementById('durasiInfo');

  if (absensi) {
    masukEl.textContent  = absensi.jamMasuk  ? absensi.jamMasuk.substring(0,5)  : '--:--';
    masukEl.className    = `time-block-value${absensi.jamMasuk  ? '' : ' empty'}`;
    pulangEl.textContent = absensi.jamPulang ? absensi.jamPulang.substring(0,5) : '--:--';
    pulangEl.className   = `time-block-value${absensi.jamPulang ? '' : ' empty'}`;

    if (absensi.status === 'Terlambat') {
      badgeEl.innerHTML = `<span class="status-badge badge-terlambat">⚠ Terlambat ${absensi.keterlambatan} menit</span>`;
    } else if (absensi.jamPulang) {
      badgeEl.innerHTML = `<span class="status-badge badge-pulang">✓ Sudah Pulang · ${absensi.durasiKerja} jam</span>`;
      durasiEl.textContent = `Total jam kerja hari ini: ${absensi.durasiKerja} jam`;
    } else if (absensi.jamMasuk) {
      badgeEl.innerHTML = `<span class="status-badge badge-hadir">✓ Sudah Hadir</span>`;
    }

    if (absensi.jamMasuk && !absensi.jamPulang) {
      document.getElementById('btnCheckIn').style.display  = 'none';
      document.getElementById('btnCheckOut').style.display = 'block';
    } else if (absensi.jamPulang) {
      document.getElementById('btnCheckIn').style.display  = 'none';
      document.getElementById('btnCheckOut').style.display = 'none';
    } else {
      document.getElementById('btnCheckIn').style.display  = 'block';
      document.getElementById('btnCheckOut').style.display = 'none';
    }
  } else {
    badgeEl.innerHTML = `<span class="status-badge badge-belum">• Belum Absen</span>`;
    document.getElementById('btnCheckIn').style.display  = 'block';
    document.getElementById('btnCheckOut').style.display = 'none';
  }
}

function gantiKaryawan() {
  state.selectedKaryawan = null; state.fotoBase64 = null;
  stopCamera(); resetCameraUI(); hideAlert('absensiAlert');
  document.getElementById('loginSection').style.display = 'block';
  document.getElementById('absensiPanel').style.display = 'none';
}

async function startCamera() {
  try {
    state.stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' }, audio: false });
    const video = document.getElementById('videoEl');
    video.srcObject = state.stream; video.style.display = 'block';
    document.getElementById('cameraPlaceholder').style.display = 'none';
    document.getElementById('btnKamera').textContent = '📸 Ambil Foto';
    document.getElementById('btnKamera').onclick = capturePhoto;
    document.getElementById('cameraWrap').onclick = capturePhoto;
  } catch (e) {
    showAlert('absensiAlert', 'Tidak bisa akses kamera: ' + e.message, 'warn');
  }
}

function capturePhoto() {
  const video = document.getElementById('videoEl');
  const canvas = document.getElementById('canvasEl');
  canvas.width = video.videoWidth; canvas.height = video.videoHeight;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(video, 0, 0);

  const now = new Date();
  ctx.fillStyle = 'rgba(0,0,0,0.5)';
  ctx.fillRect(0, canvas.height - 28, canvas.width, 28);
  ctx.fillStyle = '#fff'; ctx.font = '12px monospace';
  ctx.fillText(now.toLocaleString('id-ID'), 8, canvas.height - 10);

  state.fotoBase64 = canvas.toDataURL('image/jpeg', 0.8);
  const img = document.getElementById('previewImg');
  img.src = state.fotoBase64; img.style.display = 'block';
  document.getElementById('videoEl').style.display = 'none';
  document.getElementById('cameraWrap').onclick = null;
  stopCamera();
  document.getElementById('btnKamera').style.display = 'none';
  document.getElementById('btnUlang').style.display = 'inline-flex';
}

function retakePhoto() { state.fotoBase64 = null; resetCameraUI(); startCamera(); }

function resetCameraUI() {
  document.getElementById('videoEl').style.display = 'none';
  document.getElementById('previewImg').style.display = 'none';
  document.getElementById('cameraPlaceholder').style.display = 'flex';
  document.getElementById('btnKamera').style.display = 'inline-flex';
  document.getElementById('btnKamera').textContent = '📷 Buka Kamera';
  document.getElementById('btnKamera').onclick = startCamera;
  document.getElementById('btnUlang').style.display = 'none';
  document.getElementById('cameraWrap').onclick = null;
}

function stopCamera() {
  if (state.stream) { state.stream.getTracks().forEach(t => t.stop()); state.stream = null; }
}

async function doCheckIn() {
  if (!state.selectedKaryawan) return;
  if (state.pengaturan.wajibFoto === 'true' && !state.fotoBase64)
    return showAlert('absensiAlert', 'Foto selfie wajib diambil sebelum check-in!', 'warn');

  setBtnLoading('checkInBtn', true); hideAlert('absensiAlert');
  const res = await api('checkIn', {
    idKaryawan: state.selectedKaryawan.id,
    latitude:   state.gpsCoords?.lat, longitude: state.gpsCoords?.lng,
    fotoBase64: state.fotoBase64,
    keterangan: document.getElementById('inputKeterangan').value,
    deviceInfo: navigator.userAgent
  });
  setBtnLoading('checkInBtn', false);
  showAlert('absensiAlert', res.message, res.success ? 'success' : 'error');
  if (res.success) await refreshStatus();
}

async function doCheckOut() {
  if (!state.selectedKaryawan) return;
  if (state.pengaturan.wajibFoto === 'true' && !state.fotoBase64)
    return showAlert('absensiAlert', 'Foto selfie wajib diambil sebelum check-out!', 'warn');

  setBtnLoading('checkOutBtn', true); hideAlert('absensiAlert');
  const res = await api('checkOut', {
    idKaryawan: state.selectedKaryawan.id,
    latitude:   state.gpsCoords?.lat, longitude: state.gpsCoords?.lng,
    fotoBase64: state.fotoBase64,
    keterangan: document.getElementById('inputKeterangan').value,
    deviceInfo: navigator.userAgent
  });
  setBtnLoading('checkOutBtn', false);
  showAlert('absensiAlert', res.message, res.success ? 'success' : 'error');
  if (res.success) await refreshStatus();
}

async function loadRiwayat() {
  const bulanVal = document.getElementById('filterBulanRiwayat').value;
  const [tahun, bulan] = bulanVal.split('-');
  const karyawanId = document.getElementById('filterKaryawanRiwayat').value;
  const res = await api('getRekap', { idKaryawan: karyawanId || null, bulan, tahun });
  const el = document.getElementById('riwayatResult');

  if (!res.success || !res.data.length) {
    el.innerHTML = '<div class="empty"><div class="empty-icon">📋</div><p>Tidak ada data untuk filter ini</p></div>';
    return;
  }
  el.innerHTML = `
    <div style="font-size:12px;color:var(--text-muted);margin-bottom:10px">${res.data.length} data ditemukan</div>
    <div class="table-wrap">
      <table>
        <thead><tr><th>Tanggal</th><th>Nama</th><th>Masuk</th><th>Pulang</th><th>Durasi</th><th>Status</th><th>Telat</th></tr></thead>
        <tbody>
          ${res.data.map(r => `
            <tr>
              <td class="mono">${r.tanggal}</td>
              <td>${r.namaKaryawan}</td>
              <td class="mono">${r.jamMasuk ? r.jamMasuk.substring(0,5) : '-'}</td>
              <td class="mono">${r.jamPulang ? r.jamPulang.substring(0,5) : '-'}</td>
              <td class="mono">${r.durasiKerja ? r.durasiKerja+'j' : '-'}</td>
              <td>${badgeHtml(r.status)}</td>
              <td class="mono" style="color:${r.keterlambatan > 0 ? 'var(--warn)' : 'var(--text-muted)'}">
                ${r.keterlambatan > 0 ? r.keterlambatan+'m' : '-'}
              </td>
            </tr>
          `).join('')}
        </tbody>
      </table>
    </div>`;
}

async function loadRekap() {
  const bulan = document.getElementById('filterBulanRekap').value;
  const tahun = document.getElementById('filterTahunRekap').value;
  const res = await api('getRekapBulanan', { bulan: parseInt(bulan), tahun: parseInt(tahun) });
  const el = document.getElementById('rekapResult');

  if (!res.success || !res.data.length) {
    el.innerHTML = '<div class="empty"><div class="empty-icon">📊</div><p>Tidak ada data rekap</p></div>';
    return;
  }
  const total = res.data.reduce((a, k) => ({ hadir: a.hadir + k.totalHadir, terlambat: a.terlambat + k.totalTerlambat }), { hadir: 0, terlambat: 0 });
  el.innerHTML = `
    <div class="stat-grid">
      <div class="stat-card"><div class="stat-val blue">${total.hadir}</div><div class="stat-label">Total Kehadiran</div></div>
      <div class="stat-card"><div class="stat-val orange">${total.terlambat}</div><div class="stat-label">Total Keterlambatan</div></div>
    </div>
    <div class="table-wrap">
      <table>
        <thead><tr><th>Nama</th><th>Hadir</th><th>Telat</th><th>Avg Jam</th><th>Total Telat</th></tr></thead>
        <tbody>
          ${res.data.map(k => `
            <tr>
              <td>
                <div style="font-weight:600;color:var(--text)">${k.nama}</div>
                <div style="font-size:11px;color:var(--text-muted)">${k.jabatan||''}</div>
              </td>
              <td style="color:var(--success);font-weight:700">${k.totalHadir}</td>
              <td style="color:${k.totalTerlambat > 0 ? 'var(--warn)' : 'var(--text-muted)'};font-weight:700">${k.totalTerlambat}</td>
              <td class="mono">${k.rataRataDurasi}j</td>
              <td class="mono" style="color:${k.totalKeterlambatan > 0 ? 'var(--warn)' : 'var(--text-muted)'}">
                ${k.totalKeterlambatan > 0 ? k.totalKeterlambatan+'m' : '-'}
              </td>
            </tr>
          `).join('')}
        </tbody>
      </table>
    </div>`;
}

async function loadPengaturan() {
  const res = await api('getPengaturan');
  const p = res;
  state.pengaturan = p;
  if (p.namaPerusahaan) document.getElementById('companyName').textContent = p.namaPerusahaan;
  document.getElementById('setNamaPerusahaan').value = p.namaPerusahaan || '';
  document.getElementById('setJamMasuk').value       = p.jamMasuk || '08:00';
  document.getElementById('setJamPulang').value      = p.jamPulang || '17:00';
  document.getElementById('setToleransi').value      = p.toleransiKeterlambatan || 15;
  document.getElementById('setWajibLokasi').value    = p.wajibLokasi || 'false';
  document.getElementById('setRadius').value         = p.radiusAbsensi || 100;
  document.getElementById('setLat').value            = p.lokasiKantorLat || '';
  document.getElementById('setLng').value            = p.lokasiKantorLng || '';
  document.getElementById('setWajibFoto').value      = p.wajibFoto || 'true';
}

async function savePengaturan() {
  const params = {
    namaPerusahaan:         document.getElementById('setNamaPerusahaan').value,
    jamMasuk:               document.getElementById('setJamMasuk').value,
    jamPulang:              document.getElementById('setJamPulang').value,
    toleransiKeterlambatan: document.getElementById('setToleransi').value,
    wajibLokasi:            document.getElementById('setWajibLokasi').value,
    radiusAbsensi:          document.getElementById('setRadius').value,
    lokasiKantorLat:        document.getElementById('setLat').value,
    lokasiKantorLng:        document.getElementById('setLng').value,
    wajibFoto:              document.getElementById('setWajibFoto').value
  };
  const res = await api('savePengaturan', params);
  showAlert('pengaturanAlert', res.message, res.success ? 'success' : 'error');
  if (res.success) { state.pengaturan = params; document.getElementById('companyName').textContent = params.namaPerusahaan; }
}

function ambilLokasiKantor() {
  if (!state.gpsCoords) return showAlert('pengaturanAlert', 'GPS belum aktif', 'warn');
  document.getElementById('setLat').value = state.gpsCoords.lat.toFixed(6);
  document.getElementById('setLng').value = state.gpsCoords.lng.toFixed(6);
  showAlert('pengaturanAlert', `Lokasi kantor diset ke: ${state.gpsCoords.lat.toFixed(5)}, ${state.gpsCoords.lng.toFixed(5)}`, 'success');
}

function openAddKaryawan() { document.getElementById('modalKaryawan').classList.add('open'); }
function closeModal(e) {
  if (e.target === document.getElementById('modalKaryawan'))
    document.getElementById('modalKaryawan').classList.remove('open');
}

async function submitKaryawan() {
  const id   = document.getElementById('newId').value.trim();
  const nama = document.getElementById('newNama').value.trim();
  if (!id || !nama) return showAlert('modalAlert', 'ID dan Nama wajib diisi', 'warn');

  const res = await api('addKaryawan', {
    id, nama,
    jabatan:    document.getElementById('newJabatan').value,
    departemen: document.getElementById('newDepartemen').value,
    email:      document.getElementById('newEmail').value
  });
  showAlert('modalAlert', res.message, res.success ? 'success' : 'error');
  if (res.success) {
    setTimeout(() => {
      document.getElementById('modalKaryawan').classList.remove('open');
      loadKaryawanList();
    }, 1200);
  }
}

function showPage(name) {
  document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
  document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
  document.getElementById(`page-${name}`).classList.add('active');
  document.getElementById(`nav-${name}`).classList.add('active');
  if (name === 'pengaturan') loadPengaturan();
}

function showAlert(id, msg, type) {
  const el = document.getElementById(id);
  if (!el) return;
  const icon = type === 'success' ? '✓' : type === 'warn' ? '⚠' : '✕';
  el.className = `alert alert-${type === 'warn' ? 'warn' : type === 'error' ? 'error' : 'success'}`;
  el.innerHTML = `<span>${icon}</span><span>${msg}</span>`;
  el.style.display = 'flex';
  if (type === 'success') setTimeout(() => hideAlert(id), 4000);
}

function hideAlert(id) { const el = document.getElementById(id); if (el) el.style.display = 'none'; }

function setBtnLoading(id, loading) {
  const btn = document.getElementById(id);
  if (!btn) return;
  btn.disabled = loading;
  if (loading) { btn._orig = btn.innerHTML; btn.innerHTML = `<div class="spinner"></div> Memproses...`; }
  else { btn.innerHTML = btn._orig; }
}

function badgeHtml(status) {
  if (!status) return '-';
  const cls = status === 'Hadir' ? 'badge-hadir' : status === 'Terlambat' ? 'badge-terlambat' : 'badge-belum';
  return `<span class="status-badge ${cls}">${status}</span>`;
}
</script>
</body>
</html>

Sheet yang Otomatis Dibuat

Sheet	Fungsi
Absensi	Menyimpan data check-in, check-out, GPS, foto, dan status kehadiran
Karyawan	Master data pegawai
Rekap Bulanan	Rekap otomatis setiap bulan
Pengaturan	Konfigurasi jam kerja, radius, dan parameter sistem

Fitur yang Tersedia

✅ Check-in dan Check-out dari Smartphone
✅ Foto Selfie dengan Timestamp Otomatis
✅ GPS Tracking dan Validasi Radius Kantor
✅ Perhitungan Keterlambatan Otomatis
✅ Rekap Kehadiran Bulanan
✅ Manajemen Data Karyawan
✅ Pengaturan Jam Kerja dan Toleransi
✅ Data Tersimpan Langsung ke Google Sheets

Struktur Database

📋 Sheet: Absensi

ID Absensi
Tanggal
ID Karyawan
Nama Karyawan
Jam Masuk
Latitude Masuk
Longitude Masuk
Foto Masuk
Jam Pulang
Latitude Pulang
Longitude Pulang
Foto Pulang
Durasi Kerja
Status Kehadiran
Keterlambatan
Keterangan
Device Info

👥 Sheet: Karyawan

ID Karyawan
Nama
Jabatan
Departemen
Email
Status
Tanggal Bergabung

📊 Sheet: Rekap Bulanan

Bulan
ID Karyawan
Nama
Total Hadir
Total Terlambat
Total Absen
Rata-rata Jam Kerja
Total Keterlambatan

⚙️ Sheet: Pengaturan

Jam Masuk
Jam Pulang
Toleransi Keterlambatan
Nama Perusahaan
Radius Absensi
Lokasi Kantor Latitude
Lokasi Kantor Longitude
Wajib Foto
Wajib Lokasi

Kesimpulan

Google Apps Script merupakan solusi yang sangat efektif untuk membangun aplikasi absensi pegawai berbasis web tanpa biaya server tambahan. Dengan memanfaatkan Google Spreadsheet sebagai database dan Apps Script sebagai backend, Anda dapat membuat sistem absensi yang modern, responsif, mudah digunakan, dan dapat diakses dari mana saja.

Melalui fitur Absensi, Riwayat Kehadiran, Rekap Bulanan, Data Karyawan, GPS Tracking, Selfie Verification, dan Pengaturan Sistem, aplikasi ini sudah cukup untuk mendukung kebutuhan operasional perusahaan, sekolah, rumah sakit, maupun instansi pemerintahan.

Setelah file Code.gs dan Index.html diisi dengan source code asli, Anda hanya perlu melakukan deploy sebagai Web App dan aplikasi siap digunakan secara online.

Lokasi:

Go Tagulandang