Darmaraya — Dokumentasi Smart Dashboard

Darmaraya · Dokumentasi Teknis

Smart
Dashboard

Panduan lengkap sistem — fungsi, alur kerja, keamanan, dan manfaat dari platform manajemen tamu pernikahan Darmaraya.

Client Portal Real-Time Data Google Apps Script RSVP Tracking Excel Export Token Auth

01 — Overview

Apa itu Smart Dashboard?

Smart Dashboard adalah portal web klien Darmaraya — halaman single-file HTML yang memungkinkan pasangan pengantin memantau data tamu undangan mereka secara real-time langsung dari browser, tanpa perlu install aplikasi apapun.

🎯

Tujuan Utama

Memberikan transparansi data kepada klien — mereka bisa melihat siapa yang sudah konfirmasi hadir, ucapan tamu, dan daftar undangan yang terkirim.

⚡

Single File

Seluruh dashboard berjalan dalam satu file HTML — tidak perlu framework, tidak perlu server Node.js, cukup buka di browser manapun.

🔗

Backend GAS

Terhubung ke Google Apps Script (GAS) sebagai backend — data tersimpan di Google Sheets dan diakses via HTTP endpoint yang aman.

02 — Alur Sistem

Bagaimana Cara Kerjanya?

Dashboard bekerja dalam dua fase utama: autentikasi klien, lalu pemuatan data. Semua komunikasi dilakukan via fetch() ke endpoint Google Apps Script.

Klien Buka Dashboard

Halaman login tampil. Klien memasukkan ID Project (contoh: premium-1) dan PIN yang sudah diberikan Darmaraya. Tombol login otomatis ter-disable saat proses verifikasi berlangsung untuk mencegah double-submit.

Verifikasi ke Google Apps Script

Fungsi prosesVerifikasiLoginPusat() mengirim POST request ke endpoint GAS dengan action login, id_client, dan PIN. GAS memvalidasi data di Google Sheets dan mengembalikan response JSON.

POST → gasURL
{ action: "login", id_client: "premium-1", pin: "****" }

Response: { success: true, nama: "Ahmad & Hani", foto: "...", link: "..." }

Dashboard Terbuka

Jika login berhasil, halaman login disembunyikan dan dashboard utama ditampilkan. Nama klien, foto, dan ID project langsung diisi secara dinamis dari response server.

Muat Data Analitik

Fungsi muatDataAnalitikKlien() langsung dipanggil — mengambil statistik (total diundang, hadir, tidak hadir, pax, ucapan) sekaligus log RSVP, buku tamu, dan daftar nama tamu dalam 3 fetch paralel.

Fetch 1 → get_analytics (statistik + log RSVP)
Fetch 2 → GET ?id_client (buku tamu / ucapan)
Fetch 3 → get_nama_tamu (daftar nama tamu terkirim)

Render UI & Donut Chart

Data yang masuk langsung dirender ke tabel dan donut chart SVG. Animasi stroke-dasharray memberikan efek pengisian lingkaran yang smooth selama 1.2 detik menggunakan CSS transition cubic-bezier.

Klien Interaksi

Klien bisa berpindah tab (RSVP / Buku Tamu / Nama Tamu), download Excel 3-sheet, atau membuka WA Sender & Non-WA Sender dengan token otentikasi yang di-generate otomatis berbasis waktu.

03 — Referensi Fungsi

Daftar Fungsi JavaScript

Semua fungsi ditulis dalam vanilla JavaScript — tidak ada dependency framework. Setiap fungsi punya tanggung jawab tunggal yang jelas.

Nama Fungsi	Deskripsi & Cara Kerja
prosesVerifikasiLoginPusat()	Mengambil nilai ID dan PIN dari input, mengirim POST request ke GAS, lalu menyembunyikan login dan menampilkan dashboard jika berhasil. Tombol otomatis disabled selama proses untuk mencegah spam request.
muatDataAnalitikKlien()	Fungsi utama pemuatan data. Mengirim 3 fetch sekaligus: statistik + log RSVP, buku tamu/ucapan, dan daftar nama tamu. Hasil disimpan ke variabel cache global (cacheRSVP, cacheBukuTamu, cacheNamaTamu) untuk keperluan export Excel.
updateDonuts()	Menerima 4 angka (total, hadir, absen, ucapan) lalu menghitung persentase masing-masing terhadap total dan memanggil setDonut() untuk setiap kartu statistik. Juga mengupdate teks persentase dan label konversi.
setDonut(id, pct)	Helper donut chart. Menghitung panjang busur SVG menggunakan rumus keliling lingkaran (2πr = 251.3px untuk r=40) lalu mengatur stroke-dasharray pada elemen circle. Nilai diclamp antara 0–1 untuk keamanan.
gantiMenuTabDashboard(tipe)	Mengatur visibilitas 3 container tabel (RSVP, Buku Tamu, Nama Tamu) dan mengubah class active pada tombol tab yang sesuai. Menerima parameter string: 'rsvp', 'comment', atau 'namatamu'.
bukaSender(tipe)	Membuka halaman Mass Sender (WA atau Non-WA) di tab baru dengan 3 parameter URL: id client, link undangan, dan auth_token berbasis waktu. Token di-generate dengan btoa() menggunakan kombinasi ID + "DarmarayaSec" + menit-saat-ini.
downloadExcelTigaSheet()	Menggunakan library SheetJS untuk mengemas data dari 3 cache (RSVP, Buku Tamu, Nama Tamu) menjadi satu file .xlsx dengan 3 sheet terpisah. Nama file otomatis menyertakan ID klien dan tanggal download.
prosesLogoutKlien()	Melakukan logout dengan cara paling aman dan sederhana: location.reload(). Ini menghapus seluruh state JavaScript dari memori browser tanpa meninggalkan data sensitif apapun.

04 — Fitur Dashboard

Apa Saja yang Bisa Dilihat Klien?

Dashboard dirancang agar klien bisa mendapat gambaran lengkap kondisi undangan mereka dalam satu halaman — tanpa perlu memahami teknologi di baliknya.

🍩

4 Kartu Statistik Donut

Total Diundang, Konfirmasi Hadir (+ total pax/orang), Tidak Hadir, dan Buku Tamu — masing-masing ditampilkan dengan donut chart SVG animasi yang menunjukkan persentase secara visual.

📋

Log RSVP Real-Time

Tabel lengkap semua respons tamu: nama, status (Hadir/Tidak Hadir), nomor WhatsApp, email, dan waktu respons — diurutkan dari yang terbaru.

✍️

Buku Tamu Digital

Semua ucapan dan doa dari tamu yang mengisi di halaman undangan ditampilkan di sini lengkap dengan nama dan waktu pengiriman.

👥

Daftar Nama Tamu

Daftar semua tamu yang sudah dikirimi undangan — lengkap dengan nomor WA, slug/link undangan personal mereka, dan waktu undangan dikirim.

📥

Export Excel 3 Sheet

Satu klik download file .xlsx berisi 3 sheet: Log RSVP, Buku Tamu, dan Daftar Nama Tamu — dengan nama file otomatis menyertakan tanggal download.

📨

Akses Mass Sender

Tombol WA Sender dan Non-WA Sender membuka tools pengiriman undangan massal dengan otentikasi otomatis — klien tidak perlu login ulang di halaman sender.

05 — Keamanan

Sistem Perlindungan Data

Meskipun berbasis file HTML statis, dashboard menerapkan beberapa lapisan keamanan untuk melindungi data klien dan mencegah akses tidak sah ke tools sender.

🔐

Akses dashboard hanya bisa dilakukan dengan kombinasi ID Project dan PIN yang benar. Verifikasi dilakukan di sisi server (GAS/Google Sheets), bukan di browser — jadi tidak bisa di-bypass dengan inspect element.

⏱️

Token Berbasis Waktu

Akses ke WA Sender & Non-WA Sender menggunakan token yang di-generate dari kombinasi ID + kata sandi tersembunyi + menit saat ini. Token ini kedaluwarsa setiap menit — URL tidak bisa dibagikan atau dipakai ulang.

🔒

Tidak Ada Session Tersimpan

Data login (ID, variabel sesi) hanya hidup di memori JavaScript selama tab browser terbuka. Saat halaman di-refresh atau ditutup, semua data hilang — tidak ada cookies atau localStorage yang menyimpan session.

🛡️

Data Isolasi Per Klien

Setiap request ke GAS selalu menyertakan id_client. Validasi di sisi GAS memastikan klien A tidak bisa mengakses data klien B meskipun mengetahui endpoint URL-nya.

🚫

Anti Double-Submit

Tombol login langsung di-disable begitu diklik dan baru aktif kembali jika login gagal. Mencegah klien menekan tombol berulang kali dan menghasilkan multiple request ke server.

🗄️

Logout Bersih

Fungsi logout menggunakan location.reload() — cara paling aman untuk menghapus seluruh state JavaScript dari memori. Tidak ada data yang tertinggal di browser setelah logout.

06 — Manfaat

Nilai yang Diberikan

Smart Dashboard hadir bukan hanya sebagai fitur teknis — melainkan sebagai nilai tambah nyata bagi klien dan efisiensi operasional Darmaraya.

Transparansi penuh untuk klien. Pasangan pengantin tidak perlu terus bertanya ke tim Darmaraya soal "sudah berapa yang konfirmasi?" — mereka bisa cek sendiri kapanpun, dari HP manapun, tanpa install apapun.

Data real-time tanpa delay. Setiap respons tamu yang masuk langsung tercatat di Google Sheets dan bisa dilihat di dashboard saat itu juga — tidak perlu menunggu laporan manual dari tim.

Export data mandiri. Klien bisa download file Excel kapanpun untuk keperluan sendiri — koordinasi dengan venue soal jumlah tamu, penyusunan tempat duduk, atau sekadar arsip kenangan pernikahan.

Akses sender terintegrasi. Dari dashboard yang sama, klien bisa langsung membuka tools pengiriman undangan massal — semua terhubung dengan satu sesi login, tidak perlu login ulang ke sistem lain.

Efisiensi tim Darmaraya. Karena klien bisa memantau sendiri, beban pertanyaan berulang ke tim berkurang drastis — tim bisa fokus ke hal yang lebih penting seperti desain dan koordinasi acara.

Kesan premium untuk klien. Tampilan dashboard yang elegan dan fungsional memperkuat persepsi bahwa Darmaraya adalah layanan profesional berkelas — bukan sekadar "bikin undangan" biasa.

07 — Teknologi

Stack yang Digunakan

Seluruh dashboard dibangun dengan teknologi yang ringan, gratis, dan tidak memerlukan server — cocok untuk deployment cepat dan maintenance minimal.

📄

Vanilla HTML/CSS/JS

Tidak ada framework — React, Vue, Angular. Ini artinya: tidak ada build process, tidak ada dependency yang bisa rusak, dan file bisa langsung dibuka tanpa setup apapun.

📊

Google Apps Script

Backend gratis yang berjalan di infrastruktur Google. Data tersimpan di Google Sheets, endpoint otomatis ter-deploy via URL publik GAS — tidak perlu bayar hosting server.

📗

SheetJS (xlsx)

Library JavaScript untuk generate file Excel langsung di browser tanpa server. Dimuat dari CDN jsDelivr — ringan dan tidak perlu install. Mendukung multi-sheet dengan lebar kolom kustom.

🎨

SVG Donut Chart

Grafik donut dibuat murni dengan SVG + CSS — tidak menggunakan library charting apapun. Animasi menggunakan stroke-dasharray dengan CSS transition cubic-bezier yang halus.

🔤

Google Fonts

Tiga typeface: Cormorant Garamond (display/serif elegan), Belleza (nama klien), dan DM Sans (body/UI). Kombinasi ini menciptakan karakter visual yang premium namun tetap mudah dibaca.

🌐

Fetch API

Komunikasi ke server menggunakan native Fetch API browser — tidak perlu jQuery atau Axios. Semua request menggunakan FormData untuk POST dan query string untuk GET.

Ringkasan Arsitektur
        Browser klien → fetch() → Google Apps Script → Google Sheets

        Semua data hidup di Google. Semua tampilan hidup di browser.

        Zero server cost. Zero installation. Zero maintenance.

Smart
Dashboard

Apa itu Smart Dashboard?

Bagaimana Cara Kerjanya?

Daftar Fungsi JavaScript

Apa Saja yang Bisa Dilihat Klien?

Sistem Perlindungan Data

Nilai yang Diberikan

Stack yang Digunakan

31

Minggu

Januari 2026

31

Minggu

Januari 2026

31

Minggu

Januari 2026

31

Minggu

Januari 2026

31

Minggu

Januari 2026

31

Minggu

Januari 2026

31

Minggu

Januari 2026

31

Minggu

Januari 2026

31

Minggu

Januari 2026

31

Minggu

Januari 2026

SmartDashboard

Apa itu Smart Dashboard?

Bagaimana Cara Kerjanya?

Daftar Fungsi JavaScript

Apa Saja yang Bisa Dilihat Klien?

Sistem Perlindungan Data

Nilai yang Diberikan

Stack yang Digunakan

Dress Code

Wedding Gift

Journey of Love

First Meet

Engagement

Marriage

RSVP

Ucapan & Doa

Zahra Anisa, S.Pd

&

Ahmad Rivaldi, S.Pd

Save The Date

Sabtu 16 Desember 2026

Akad Nikah

31

Minggu

Januari 2026

Resepsi

31

Minggu

Januari 2026

Our Gallery

Assalamu’alaikum Warahmatullahi Wabarakatuh

Zahra & Aldi

Dress Code

Wedding Gift

Save The Date

Sabtu 16 Desember 2026

Akad Nikah

31

Minggu

Januari 2026

Resepsi

31

Minggu

Januari 2026

Zahra Anisa, S.Pd

&

Ahmad Rivaldi, S.Pd

Our Gallery

RSVP

Ucapan & Doa

Zahra & Aldi

Wedding Gift

Dress Code

Live Streaming

Zahra Anisa, S.Pd

&

Ahmad Rivaldi, S.Pd

Journey of Love

First Meet

Engagement

Marriage

Save The Date

Sabtu 16 Desember 2026

Akad Nikah

31

Minggu

Januari 2026

Resepsi

31

Minggu

Januari 2026

Our Gallery

RSVP

Ucapan & Doa

Assalamu’alaikum Warahmatullahi Wabarakatuh

Zahra & Aldi

Save The Date

Sabtu 16 Desember 2026

Akad Nikah

31

Smart
Dashboard