Sikutaki Dashboard

Sikutaki: situs perusahaan, Dashboard HR, dan aplikasi karyawan untuk memantau kesehatan mental tim secara anonim. Next.js di Vercel (atau Cloudflare Workers), akun dan data di Supabase, dan Asisten AI berbasis Google Gemini yang berjalan di server.

• Akun sungguhan. HR mendaftarkan perusahaan di /daftar, karyawan bergabung dengan kode undangan di /gabung, semua masuk di /masuk dengan email dan kata sandi (Supabase Auth). Ada lupa kata sandi dan keluar.
• Data tersimpan di Supabase. Mood dan jam tidur harian, check-in mingguan, latihan dan program, permintaan konseling, serta pengaturan, catatan, dan psikolog mitra milik HR.
• Privasi dijaga database. Row level security di supabase/schema.sql: data karyawan hanya bisa dibaca karyawan itu sendiri. HR hanya mendapat jumlah dan rata-rata kelompok minimal 5 orang, dan permintaan konseling sampai ke HR tanpa id akun.
• Asisten AI di server. Key Gemini (GEMINI_API_KEY) hanya ada di server dan tidak pernah sampai ke peramban. Asisten hanya bisa dipakai karyawan yang sudah masuk.
• Mode demo tetap ada. /demo/hr dan /demo/karyawan membuka aplikasi dengan perusahaan contoh tanpa akun; isiannya tersimpan di peramban saja.

Angka grafik Dashboard HR masih memakai perusahaan contoh, karena rata-rata kelompok butuh banyak karyawan. Di Beranda HR ada kartu Data asli perusahaan Anda yang membaca jumlah karyawan, check-in, dan rata-rata mood dari Supabase.

Asisten AI (Gemini)

Tab Asisten di aplikasi karyawan (/dashboard-employee/asisten). Asisten membuka percakapan dengan follow-up dari aktivitas terakhir (hasil check-in, program berjalan, latihan terakhir), menggali konteks dulu, membantu memahami hasil check-in, lalu menyarankan paling banyak 3 latihan atau program dari katalog Sikutaki sebagai kartu yang langsung bisa dibuka. Psikolog hanya disebut bila ada tanda krisis atau karyawan sendiri memintanya. Tombol "Bahas dengan Asisten" di Insight dan laporan membuka asisten dengan pertanyaannya (/dashboard-employee/asisten?tanya=...).

• Peramban mengirim percakapan dan ringkasan konteks ke /api/assistant. Server memeriksa sesi Supabase, menyusun instruksi sistem (src/lib/assistant.ts), lalu memanggil Gemini.
• Asisten tidak mendiagnosis dan hanya boleh menyarankan latihan yang ada di katalog.
• Bila pesan berisi tanda krisis, aplikasi selalu menampilkan Healing119 (119 ext 8) dan 112, apa pun jawaban model.
• Yang dikirim ke Google: pesan percakapan dan ringkasan mood, tidur, check-in minggu ini, serta program yang berjalan. Tidak ada nama lengkap atau email. Percakapan tidak disimpan di database.

Cara membaca skor

• Setiap pertanyaan check-in menanyakan seberapa sering sesuatu dialami (0 Tidak pernah sampai 4 Hampir selalu). Skor area 0-100 = rata-rata frekuensi; makin tinggi makin perlu perhatian. Penjelasan tiap area (apa yang diukur, arti skor tinggi, langkah kecil, latihan yang cocok) ada di src/lib/area-guide.ts.
• Indeks wellbeing = 100 dikurangi rata-rata skor area (inti berbobot 3x), dengan 5 kategori (WELLBEING_BANDS di src/lib/catalog.ts). Perubahan 10 poin atau lebih dianggap bermakna, di bawah 5 poin naik-turun biasa (changeMeaning). Dasar dan sumbernya tercantum di SCORE_BASIS dan di bagian akhir laporan HR.
• Pertanyaan pemicu (eksploratif) punya pilihan Lainnya dengan isian. Isiannya hanya tersimpan di akun karyawan (employee_state); HR hanya melihat persentase yang memilih Lainnya.

Route

Route	Isi
/, /tentang, /harga, /keamanan, /kontak, /privasi, /syarat	Situs perusahaan
/masuk	Masuk dengan email dan kata sandi (HR dan karyawan), plus tombol mode demo
/daftar	HR membuat akun dan perusahaan
/gabung?kode=...	Karyawan membuat akun dengan kode undangan
/lupa-sandi, /atur-sandi	Minta tautan reset lewat email, lalu buat kata sandi baru
/demo/hr, /demo/karyawan	Buka aplikasi dalam mode demo, tanpa akun
/auth/callback	Tujuan tautan dari email Supabase (konfirmasi, reset)
/api/assistant	Asisten AI di server (Gemini)
/dashboard-hr	Beranda HR: wellbeing, partisipasi, mood, fokus per divisi
/dashboard-hr/divisi, /dashboard-hr/divisi/[id]	Divisi, penyebab, catatan tindakan HR
/dashboard-hr/area, /dashboard-hr/area/[id]	42 area dan detail per area
/dashboard-hr/check-in	Jadwal check-in dan corong partisipasi
/dashboard-hr/laporan	Laporan bulanan, bisa disimpan sebagai PDF
/dashboard-hr/pengaturan	Organisasi, karyawan, privasi, psikolog mitra
/dashboard-employee	Kenalan (janji privasi), sekali saja
/dashboard-employee/beranda	Catat mood dan tidur, rencana hari ini
/dashboard-employee/check-in	Check-in mingguan
/dashboard-employee/insight	Insight pribadi (hanya karyawan itu sendiri)
/dashboard-employee/latihan, /dashboard-employee/latihan/[id]	Latihan napas dan pemutarnya

Struktur

src/
  app/                    Route (App Router). page.tsx tipis, hanya merender fitur.
  middleware.ts           Memperbarui sesi Supabase, mengarahkan tamu ke /masuk
  app/api/assistant/      Asisten AI: memanggil Gemini dari server
  app/auth/callback/      Tautan dari email Supabase
  server/gemini.ts        Panggilan ke Gemini API (hanya server)
  store/
    cloud.ts              Sinkron dengan Supabase: muat saat aplikasi dibuka, simpan setiap perubahan
    local.ts              Salinan data di peramban (satu-satunya salinan di mode demo)
    hr.ts, hr-actions.ts  Data dan perubahan HR
    employee.ts, employee-actions.ts  Data dan perubahan karyawan
    account.ts            Masuk, daftar, gabung, reset kata sandi, keluar
    assistant.ts          Kirim percakapan ke /api/assistant
  features/
    hr/                   Dashboard HR
    employee/             Aplikasi karyawan
    landing/, site/       Situs perusahaan dan halaman masuk/daftar
  components/             Komponen dasar dan grafik SVG
  lib/
    supabase/             Klien Supabase untuk peramban dan server
    catalog.ts            42 area, skala jawaban, penyebab, rotasi check-in
    model.ts              Perhitungan dashboard dari dataset agregat
    sample.ts             Perusahaan contoh
    assistant.ts          Aturan dan katalog untuk Asisten AI
    week.ts               Tanggal dan minggu (WIB)

Menyiapkan Supabase

1. Buat project di supabase.com (region terdekat, misalnya Singapore).
2. SQL Editor > New query, tempel seluruh isi supabase/schema.sql, lalu Run. Aman dijalankan ulang.
3. Authentication > URL Configuration
   • Site URL: alamat situs, misalnya https://sikutaki-dashboard.vercel.app
   • Redirect URLs: tambahkan https://sikutaki-dashboard.vercel.app/auth/callback, http://localhost:3000/auth/callback, dan http://localhost:8787/auth/callback (ditambah alamat Cloudflare bila dipakai)
4. Authentication > Sign In / Providers > Email: biarkan Confirm email menyala bila pengguna harus mengonfirmasi email dulu, atau matikan agar akun langsung bisa dipakai saat uji coba. Email bawaan Supabase dibatasi beberapa email per jam; untuk dipakai sungguhan, atur SMTP sendiri di Authentication > Emails > SMTP Settings.
5. Salin Project URL dan Publishable key (atau anon key) dari tombol Connect atau Project Settings > API Keys.

Deploy ke Vercel

Alamat Supabase dan publishable key sudah ada di .env.production, jadi Vercel hanya perlu key Gemini.

1. Impor repo di vercel.com/new. Framework: Next.js. Biarkan Build Command dan Output Directory bawaan (versi lama memakai folder out/; hapus isian itu bila pernah diubah).
2. Settings > Environment Variables, untuk Production dan Preview: GEMINI_API_KEY dari aistudio.google.com/apikey (tanpa awalan NEXT_PUBLIC_), dan opsional GEMINI_MODEL (bawaan gemini-3.5-flash-lite). Hapus NEXT_PUBLIC_GEMINI_API_KEY bila pernah diisi.
3. Deployments > Redeploy setelah mengisi variabel. Setiap push ke main ter-deploy ulang otomatis.

Deploy ke Cloudflare Workers (pilihan lain)

Situs berjalan sebagai Cloudflare Worker lewat adapter OpenNext. Paket gratis Workers boleh dipakai komersial (100.000 request per hari); ukuran worker sekitar 1,8 MB terkompresi, di bawah batas 3 MB.

Alamat Supabase dan publishable key ada di .env.production karena memang publik (data dilindungi row level security). Ganti isinya bila memakai project Supabase lain. GEMINI_API_KEY tidak pernah masuk repo.

Lewat dashboard (deploy otomatis tiap push ke main)

1. dash.cloudflare.com > Workers & Pages > Create > Import a repository, pilih repo ini.
2. Project name: sikutaki (harus sama dengan name di wrangler.jsonc). Build command: npx opennextjs-cloudflare build. Deploy command: npx opennextjs-cloudflare deploy.
3. Setelah worker dibuat: Settings > Variables and Secrets > Add, tipe Secret, nama GEMINI_API_KEY, isi key dari aistudio.google.com/apikey. Opsional: variabel GEMINI_MODEL (bawaan gemini-3.5-flash-lite).
4. Alamat situs tampil di Settings > Domains & Routes (https://sikutaki.<akun>.workers.dev), atau tambahkan domain sendiri di sana. Masukkan alamat itu ke Supabase (lihat langkah 3 di atas).

Lewat terminal

npx wrangler login
npx wrangler secret put GEMINI_API_KEY
npm run deploy               # build + deploy

Workflow .github/workflows/ci.yml menjalankan typecheck dan build di setiap push dan pull request.

Menjalankan di komputer

cp .env.example .env.local   # isi key Supabase dan Gemini
npm install
npm run dev                  # http://localhost:3000
npm run typecheck
npm run build && npm start
npm run preview              # versi Cloudflare di http://localhost:8787 (key Gemini di .dev.vars)

Tanpa variabel Supabase, situs tetap jalan dalam mode demo saja.

Foto masuk/daftar

Foto di samping formulir masuk, daftar, dan gabung masih sementara (Unsplash):

• public/img/auth/masuk.jpg untuk /masuk, /lupa-sandi, /atur-sandi
• public/img/auth/daftar.jpg untuk /daftar dan /gabung

Panduan mengganti, ukuran yang disarankan, dan prompt siap pakai untuk ChatGPT (DALL·E) ada di proposal/Prompt_Foto_Masuk_Daftar.md di folder proyek. Cukup timpa file dengan nama yang sama (JPG, di bawah ~300 KB); kode tidak perlu diubah.

Batasan saat ini

• Grafik Dashboard HR memakai angka perusahaan contoh dengan 8 divisi contoh. Nama divisi bisa diganti, tapi menambah atau menghapus divisi belum bisa.
• Jurnal latihan tersimpan di peramban saja, tidak dikirim ke server.
• Pesan antara HR dan karyawan di permintaan konseling muncul setelah halaman dimuat ulang (belum realtime).
• Mode demo tidak memakai Asisten AI, agar key Gemini tidak bisa dipakai siapa pun tanpa akun.