10. Mobile App (Portal Karyawan)¶

Bab ini menjelaskan aplikasi mobile WaktuKerja — Progressive Web App (PWA) khusus untuk karyawan. Bukan native iOS/Android — di-install dari browser via "Add to Home Screen" lalu berfungsi seperti aplikasi native (fullscreen, ikon di home screen, splash screen).

Audiens bab ini: karyawan & HR yang membantu onboarding. HR tidak login di mobile app — HR pakai portal web admin di komputer.

10.1 Instalasi¶

Android (Chrome)¶

Buka browser Chrome di HP
Akses URL aplikasi mobile (mis. https://mobile.waktukerja.com — minta ke HR Anda)
Chrome otomatis menampilkan prompt "Install app" di bawah address bar (atau via menu ⋮ → "Install app" / "Add to Home screen")
Konfirmasi — ikon WaktuKerja (Kawung Jam) muncul di home screen
Buka ikon → aplikasi berjalan fullscreen tanpa address bar

iOS (Safari)¶

Buka Safari (browser lain tidak support PWA install di iOS)
Akses URL aplikasi mobile
Tap tombol Share (kotak dengan panah) di bawah
Scroll → tap "Add to Home Screen"
Konfirmasi nama default "WaktuKerja" → tap Add
Ikon muncul di home screen; buka untuk launch fullscreen

HTTPS wajib: fitur akses kamera (Check In/Out face capture) hanya jalan di HTTPS (kecuali localhost). Pastikan URL pakai https://.

Layar login full-screen dengan gradient terracotta + logo Kawung Jam + wordmark "waktuKerja".

Field: - Username — sama dengan login web admin. Format umum: emp.{kode-tenant}.{nomor-induk} (mis. emp.log01.0001) - Password — sama dengan login web

Tap Masuk. Setelah sukses, langsung ke Beranda.

Kalau role akun = HR → akan ditolak dengan pesan "Akun ini bukan karyawan. Gunakan portal web admin." App mobile strictly KARYAWAN-only.

Logout: ada di tab Akun (sudut kanan atas, tombol "Keluar"). Logout = hapus token dari device → kembali ke layar login.

10.3 Navigasi (Bottom Tab)¶

App pakai pola bottom navigation dengan 5 tab utama yang selalu visible di bawah:

Tab	Icon	Isi
Beranda	rumah	Dashboard greeting + shift hari ini + Check In/Out + statistik periode aktif + pengajuan terbaru
Notifikasi	bell	Feed notifikasi (pengajuan diproses, slip gaji baru, tukar shift, dll) + badge unread
Pengajuan	dokumen	List sub-menu: Cuti, Ijin, Tukar Shift, Lembur, Perjalanan Dinas
Penggajian	uang	List sub-menu: Riwayat Gaji, Gaji Non Reguler
Akun	user	Profil + Data Alamat + Data Keluarga + Riwayat Kerja + Riwayat Pendidikan + Jadwal Kerja + Realisasi Kehadiran + tombol Keluar

Tab aktif di-highlight terracotta + bold. Saat di sub-page (mis. di /me/cuti dari tab Pengajuan), tab parent ("Pengajuan") tetap highlight.

Top bar menampilkan: - Title halaman (sub-label parent tab kalau sedang di sub-page, mis. "PENGGAJIAN / Riwayat Gaji") - Back arrow ← (kalau di sub-page, navigate kembali) - Tombol "Keluar" (hanya di tab Akun)

10.4 Beranda (Dashboard)¶

Saat buka app, default ke Beranda.

Greeting — "Selamat pagi/siang/sore" + nama depan + emoji 👋. Update otomatis sesuai waktu HP.

Check In / Check Out (face capture + GPS)¶

Dua tombol prominent berwarna moss (Check In) dan terracotta (Check Out) di paling atas. Pakai untuk absen masuk/pulang.

Alur 3 langkah:

Permission: tap tombol → browser minta izin Kamera + Lokasi. Tap "Izinkan" untuk keduanya.
Face capture: kamera depan aktif dengan overlay lingkaran face frame:
Posisikan wajah di dalam lingkaran
Tap shutter (lingkaran putih besar di bawah)
Preview foto muncul — pilih Ulangi atau Konfirmasi
Submit + validasi GPS: tap Konfirmasi → app baca koordinat GPS HP Anda → kirim ke server bersama foto.

Server validate GPS terhadap lokasi presensi yang di-set HR di Master Data → Waktu Kerja → Lokasi Presensi:

Skenario	Yang terjadi
Dalam radius (mis. ≤ 100m dari Kantor Pusat)	✓ Sukses. Toast hijau: "Check-in tercatat di Kantor Pusat (15m)". Capture masuk ke history.
Di luar radius	✗ Tolak. Pesan: "Anda berada 250m dari Kantor Pusat. Mendekati lokasi maks 100m." Foto tidak ter-submit.
Tenant belum setup lokasi sama sekali	✓ Pass tanpa validasi (mode setup awal — HR perlu setup lokasi presensi)
Karyawan belum di-assign lokasi & tenant punya ≥ 1 lokasi aktif	Cek terhadap semua lokasi tenant; lulus kalau ada minimal 1 yang dalam radius
HP nolak izin GPS	✗ Tolak. Pesan: "Aktifkan izin lokasi di pengaturan browser."
GPS akurasi rendah (mis. dalam gedung)	✗ Tolak. Pesan: "Akurasi GPS terlalu rendah. Pindah ke ruang terbuka."

Tips: kalau check-in gagal terus karena "di luar radius": - Pastikan Anda sedang di lokasi yang benar (HR set titik mana?) - Coba refresh GPS dengan toggle airplane mode ON/OFF - Kalau pakai HP indoor dekat tembok beton, jalan ke jendela atau teras dulu (GPS butuh line-of-sight ke satelit) - Kalau yakin sudah di lokasi tapi tetap ditolak → lapor HR, mungkin radius di-set terlalu ketat

Shift hari ini¶

Card di bawah Check In/Out: - Kode + nama shift (mis. T2-OFC — Pagi Office) - Jam masuk – jam pulang (mis. 08:00 – 17:00) - Window tap masuk yang valid (mis. 07:30 – 09:00 — di luar ini tap akan invalid) - Kalau hari libur: tampil "Libur 🌴" + nama hari libur

Statistik periode aktif¶

4 tile grid 2×2: - Kehadiran — hadir / hari_kerja di periode aktif (mis. 15/22 hari) - Lembur disetujui — total durasi lembur DISETUJUI (jam + menit) - Cuti tahun ini — total hari cuti DISETUJUI tahun berjalan - Pengajuan pending — count semua pengajuan (cuti+ijin+lembur+tukar shift) status PENDING

Pengajuan terbaru¶

Card list 3 pengajuan terbaru (kind + ID + status badge + detail singkat). Tap → navigate ke list pengajuan sesuai jenis.

Akses cepat¶

2 link cepat ke halaman yang sering di-akses: Realisasi Kehadiran + Riwayat Gaji.

10.5 Notifikasi¶

Tab kedua di bottom nav. Badge merah muncul kalau ada notifikasi belum dibaca (count up to "9+").

Jenis notifikasi¶

Sistem otomatis trigger notifikasi pada event berikut:

Event	Kapan	Icon warna
PENGAJUAN_STATUS	HR approve / reject / cancel cuti / ijin / lembur / tukar shift Anda	hijau (moss)
TUKAR_SHIFT_REQUEST	Rekan kerja request tukar shift dengan Anda — menunggu respond	terracotta
SLIP_GAJI_BARU	HR Tutup Bulan periode — slip gaji baru tersedia di Riwayat Gaji	indigo
GAJI_NON_REGULER	HR Finalize SK gaji non reguler (THR/Bonus/dll) — Anda terdaftar di SK	ochre
JADWAL_OVERRIDE	HR mengubah shift Anda di tanggal tertentu (mis. swap manual)	indigo gelap

Header bar¶

Toggle Semua / Belum dibaca (N) — filter list
Tombol Tandai semua dibaca (muncul hanya kalau ada unread)

Card per notifikasi¶

Icon bundar berwarna sesuai jenis (di kiri)
Title (bold kalau unread, regular kalau sudah dibaca)
Body 2 baris max (truncated dengan ellipsis)
Relative time ("3 jam lalu", "2 hari lalu", atau tanggal kalau >7 hari)
Dot indikator terracotta + border-left 3px terracotta kalau unread

Tap card → mark as read otomatis + navigate ke halaman terkait (mis. notif cuti DISETUJUI → buka /me/cuti).

Polling¶

App fetch unread count tiap 60 detik saat tab aktif + saat user kembali ke app dari background. Notifikasi muncul tanpa perlu manual refresh.

Realtime push (Web Push API) belum diimplementasikan — feature follow-up. Saat ini polling cukup untuk frequency notif HRIS tipikal.

10.6 Tab Pengajuan¶

5 sub-menu sebagai card list. Semua sub-menu sudah functional di mobile — Cuti / Ijin / Lembur / Tukar Shift bisa submit-edit-batalkan; Perjalanan Dinas read-only karena SPD dibuat oleh HR (instruksi dinas), bukan diajukan karyawan.

Sub-menu	Status
Cuti	✅ List + ajukan + detail + batalkan (bila PENDING)
Ijin	✅ List + ajukan + detail + batalkan (bila PENDING)
Tukar Shift	✅ List peran-aware + ajukan (pilih rekan) + respond accept/reject + batalkan
Lembur	✅ List + ajukan + detail + batalkan (bila DIPERINTAHKAN)
Perjalanan Dinas	✅ List + detail (read-only — SPD dibuat HR, lihat sub-section di bawah)

Pola umum 4 halaman pengajuan¶

Keempat halaman pakai pattern konsisten:

Filter pills di atas (horizontal scroll): Semua / Menunggu / Disetujui / Ditolak / Dibatalkan
List card stacked vertical, sorted terbaru di atas. Card berisi info ringkas + status badge berwarna
FAB + (tombol bundar terracotta di pojok kanan bawah, terangkat di atas bottom nav) → buka bottom-sheet form ajukan
Tap card → bottom-sheet detail (slide up dari bawah, drag handle, header sticky, body scrollable)
Aksi kontekstual di footer sheet: tombol "Batalkan Pengajuan" muncul hanya kalau pengajuan masih PENDING/DIPERINTAHKAN

Toast confirmation muncul di bawah setelah aksi berhasil. Notifikasi terkait (PENGAJUAN_STATUS) di-broadcast otomatis saat HR approve/reject.

Cuti¶

Card list pengajuan cuti dengan border-left terracotta.

Form Ajukan: - Jenis cuti — dropdown: Cuti Tahunan / Cuti Besar / Cuti Melahirkan / Cuti Menikah / Cuti Kematian / Cuti Lainnya - Tanggal mulai + tanggal selesai (selesai >= mulai, validasi inline) - Alasan — textarea (opsional)

Detail sheet: status banner + semua field + (kalau bukan PENDING) info diputus oleh + catatan approval. Kalau PENDING, ada section "Alasan Pembatalan" + tombol "Batalkan Pengajuan" crimson.

Ijin¶

Card list dengan border-left ochre. Form mirip cuti tapi field berbeda: - Tanggal (1 hari saja) - Jenis — Satu Hari / Setengah Hari - Keperluan — input text wajib (mis. "kontrol dokter", "antar anak sekolah") - Catatan tambahan — textarea opsional

Lembur¶

Card list dengan border-left indigo. Status istilah berbeda dari cuti/ijin: - DIPERINTAHKAN → label "Menunggu" (ochre badge) — menunggu approval HR - DISETUJUI / DITOLAK / DIBATALKAN — sama pattern

Card: tanggal + jam range monospace + durasi auto-compute (mis. "3j 30m") + hint "lintas malam" kalau jam_selesai < jam_mulai + clamp tugas 2 baris.

Form Ajukan: - Tanggal - Jam Mulai + Jam Selesai (24h, validasi mulai != selesai) - Banner info "lintas malam" otomatis muncul kalau jam selesai < jam mulai - Tugas — textarea wajib (max 2000 char) - Catatan — textarea opsional

Detail sheet termasuk durasi total + slot index ("#1 dari 2" — sistem support max 2 slot lembur per hari).

Tukar Shift¶

Card list dengan border-left moss. Peran-aware: karyawan bisa muncul sebagai Pengaju (ajukan tukar) atau Penerima (di-ajak rekan). Badge peran di kiri card: - Pengaju badge indigo - Penerima badge ochre

Swap diagram di tiap card menampilkan pertukaran shift visual: [Shift Anda] ↔ [Shift Rekan] dengan kode shift + jam dalam monospace.

Form Ajukan: - Rekan (Penerima) — tap tombol untuk buka picker sheet, search by NIK/nama (debounced 300ms, hasil max 20). Self otomatis ter-exclude - Tanggal — server snapshot shift Anda + rekan dari jadwal harian - Alasan — textarea opsional

Detail sheet menampilkan swap diagram lengkap dengan label kontekstual ("Anda (Pengaju)" atau "Anda (Penerima)"), tombol berbeda per peran: - Pengaju + PENDING → tombol "Batalkan Pengajuan" crimson - Penerima + PENDING → dua tombol berdampingan: "Tolak" (crimson) + "Terima" (moss). Banner info di atas form menjelaskan "Terima akan otomatis tukar shift Anda & rekan di tanggal X." - Selain itu → cuma tombol tutup

Perjalanan Dinas¶

Read-only — SPD itu instruksi dinas dari HR ke karyawan, bukan diajukan. Tidak ada tombol Ajukan (FAB). Karyawan hanya lihat SPD yang melibatkan dirinya.

Card list dengan border-left terracotta. Tiap card menampilkan: - Jenis SPD (badge): Sales / Seminar / Training / Project / Lainnya - Status badge: Menunggu / Disetujui / Ditolak / Dibatalkan - Range tanggal + chip durasi ("5 hari") - Anggaran total + jumlah komponen (kalau ada benefit)

Tap card → bottom-sheet detail berisi: - Status + tanggal SPD dibuat HR - Periode dinas - Tujuan / Catatan (free text dari HR) - Box approval: siapa yang setujui, kapan, catatan approval (kalau ada) - Tabel Benefit: list komponen + nominal + pajak per row. Footer TOTAL anggaran.

Empty state: kalau filter tidak ada hasil → "Tidak ada SPD dengan status X". Kalau benar-benar belum pernah dapat SPD → "SPD dibuat oleh HR. Hubungi HR kalau Anda merasa harusnya ada SPD yang melibatkan Anda."

10.7 Tab Penggajian¶

2 sub-menu sebagai card list:

Sub-menu	Status
Riwayat Gaji	✅ List periode arsip + bottom-sheet detail breakdown komponen
Gaji Non Reguler	⏳ Placeholder — buka portal web untuk SK THR / Bonus / Gaji XIII / Insentif

Riwayat Gaji¶

Halaman list periode gaji yang sudah tutup-bulan (/me/penggajian/riwayat). Periode aktif yang masih di-proses HR tidak muncul — hanya yang sudah ter-arsip (nominal final).

Card per periode dengan border-left terracotta: - Kode periode monospace + rentang tanggal - THP highlight — kotak ber-background terracotta soft, label "Take-Home Pay" + nominal IDR formatted besar - 2 mini-stat side-by-side: Pendapatan (moss) + Potongan (crimson) - Footer: "Diarsipkan " - Tap card → buka bottom-sheet detail

Detail sheet: - 4 stat cards grid 2×2: Pendapatan (moss) / Potongan (crimson) / Benefit (indigo) / THP (terracotta, emphasis dengan background tinted) - Breakdown komponen di-group per kategori (PENDAPATAN / POTONGAN / BENEFIT). Tiap section punya count + list row: - Nama komponen (bold) + kode (mono) + model (FORMULA / FASILITAS / UPLOAD / PINJAMAN) di subtitle - Nominal IDR di kanan — warna crimson kalau POTONGAN, otherwise default text

Sumber data: kalkulasi_komponen_karyawan filter karyawan_id + periode dengan diarsipkan_pada IS NOT NULL.

10.8 Tab Akun¶

Hero card identitas dengan gradient terracotta + avatar inisial nama + username monospace.

Sub-menu list:

Profil¶

Halaman read-only data karyawan login: - Avatar bundar dengan inisial nama atau foto profil yang sudah di-upload - Posisi: jabatan + level (golongan) + atasan + kelompok kerja + masa kerja (X tahun Y bulan dari tanggal_bergabung) + tipe penempatan - Biodata: email, nomor telepon, tempat & tanggal lahir, jenis kelamin, agama, golongan darah - NPWP (jika ada)

Upload foto profil: saat ini fitur edit avatar tersedia di portal web desktop (dash.waktukerja.com → login karyawan → Profil → klik ikon pencil di avatar → modal 2 tab: Upload Image / Ambil Foto via webcam). Setelah upload, foto otomatis muncul di mobile + web. Versi mobile-native upload menyusul di iterasi berikutnya.

Footer info: "Update alamat, keluarga, dan riwayat kerja/pendidikan via menu terpisah di tab Akun. Untuk perubahan data sensitif (NPWP, gaji pokok, bank rekening), hubungi HR."

Data Alamat, Data Keluarga, Riwayat Kerja, Riwayat Pendidikan (CRUD)¶

Empat sub-menu personalia karyawan dengan CRUD penuh di mobile (tambah, edit, hapus). Pakai endpoint /me/biodata/{child} di backend — biodata_id auto-derive dari JWT karyawan_id, owner-check di service layer. Soft-delete (deleted_at), bukan hard delete.

Pola UI konsisten untuk keempat halaman: - List card stacked dengan border-left warna pembeda - FAB + terracotta di pojok kanan bawah → bottom-sheet form "Tambah …" - Tiap card ada footer 2 tombol berdampingan: Edit (outline) + Hapus (crimson outline) - Tap Edit → bottom-sheet form pre-filled dengan data current - Tap Hapus → dialog konfirmasi native browser (confirm()) → toast "berhasil dihapus" / error toast - Submit form → toast "ditambahkan / diperbarui" + list otomatis refresh

Data Alamat (`/me/profile/alamat`)¶

Card per alamat dengan kategori tag berwarna: - Alamat KTP (indigo) - Alamat Tinggal (moss) - Kontak Darurat (crimson) - Lainnya (mute)

Isi card: nama kontak + telepon (monospace) + alamat/catatan (multi-line, pre-wrap).

Form Tambah/Edit: - Tipe Alamat — dropdown 4 opsi di atas - Nama Kontak — input text (max 150, opsional) - Nomor Telepon — input tel (max 25, opsional) - Alamat / Catatan — textarea 4 baris (alamat lengkap atau detail tambahan)

Data Keluarga (`/me/profile/keluarga`)¶

Card per anggota keluarga dengan border-left terracotta. Header: nama lengkap (bold) + label relasi (Suami/Istri/Anak/Ayah/Ibu/dll). Badge "Tertanggung" (moss) di sudut kanan kalau tertanggung=true. Body: tanggal lahir + usia auto-compute ("12 Mei 1990 · 35 tahun").

Form Tambah/Edit: - Nama Lengkap — input text wajib (max 150) - Relasi — dropdown 13 enum: Suami / Istri / Anak / Ayah / Ibu / Saudara Kandung / Paman / Bibi / Keponakan / Kakek / Nenek / Sepupu / Lainnya - Tanggal Lahir — date picker (opsional) - Checkbox Tertanggung — dengan label penjelas: "Centang kalau anggota ini termasuk tanggungan untuk perhitungan PPh21"

Riwayat Kerja (`/me/profile/riwayat-kerja`)¶

Card per pengalaman kerja, sorted desc by tahun_masuk. Border-left moss. - Nama perusahaan (bold) - Jabatan terakhir (terracotta) - Periode mono "2020 – 2023" (atau "2018 – Sekarang" kalau tahun_keluar=null) + kota - (Optional) Gaji terakhir formatted IDR di section terpisah

Form Tambah/Edit: - Nama Perusahaan — input wajib (max 200) - Jabatan Terakhir (max 150) - Kota (max 100) - Tahun Masuk + Tahun Keluar — dua number input side-by-side (range 1900–2200), inputMode numeric - Gaji Terakhir (IDR) — number input dengan hint "Hanya angka — tanpa titik / koma"

Riwayat Pendidikan (`/me/profile/riwayat-pendidikan`)¶

Card per jenjang pendidikan, sorted desc by tahun_lulus. Border-left warna by kategori: - Formal (indigo) - Kedinasan (terracotta) - Non-Formal (moss)

Header: nama lembaga (bold) + kategori tag di kanan. Body: "Lulus " (mono) + kota. Optional: nomor ijazah (mono) di section terpisah.

Form Tambah/Edit: - Kategori — dropdown 3 opsi - Nama Lembaga / Sekolah — input wajib (max 200, mis. "SMA Negeri 1 Jakarta", "Universitas Indonesia") - Kota (max 100) - Tahun Lulus — number input (1900–2200) - Nomor Ijazah (max 100)

Jadwal Kerja¶

Halaman kalender shift per hari untuk 1 periode: - Dropdown periode di atas (kalau >1 periode tersedia) - Info bar: kode periode + range tanggal + nama kelompok kerja - 2 stat chip: Hari Kerja / Hari Libur (dari total hari periode) - List per minggu (mulai Senin): - Kolom tanggal (hari + nomor) - Kolom shift (kode + nama + jam datang–pulang) - Badge status berwarna: Kerja (moss), Libur (gray), Libur Kalender (ochre, dengan nama hari libur) - Tanggal Minggu di-highlight merah - Libur kalender pakai background tinted ochre

Realisasi Kehadiran¶

Halaman kalender bulanan visual dengan color-code per status: - Dropdown periode + info bar - 4 stat cards: % Kehadiran / Tidak Hadir (XTY) / Izin + Cuti (+SPD) / Libur - Legenda 7 status berwarna - Grid kalender 7 kolom (Sen-Min) — tiap tile: - Tanggal di atas-kiri - Badge status 2-3 char di atas-kanan - Kode shift di bawah (kalau hari kerja) - Warna background: OS/HD moss (hadir), XTY crimson (tidak hadir tanpa keterangan), IZ/AZ terracotta (izin), CT indigo (cuti), LB ochre (libur kalender), SPD ungu (perjalanan dinas) - Tap tile → modal detail dengan: - Status banner - Shift terjadwal - Clock-in time (tap masuk) - Clock-out time (tap pulang) - Catatan + warning kalau ada invalid_capture_count > 0

10.9 Add-On: Internal Survey¶

Hanya tampil kalau organisasi Anda aktifkan add-on Internal Survey (di-aktifkan HR via halaman Add-Ons). Kalau tidak aktif, menu Survey tidak muncul.

Modul karyawan untuk mengisi survey yang HR distribusikan: engagement survey, pulse check bulanan, atau exit interview.

Akses¶

Menu Survey muncul di Beranda (section "Beranda" di sidebar karyawan / akses cepat di tab Beranda mobile). Path: /me/survey.

Halaman Daftar (`/me/survey`)¶

Hanya menampilkan survey yang: - Sudah di-publish HR (status PUBLISHED) - Periode masih aktif (today ∈ [tanggal_mulai, tanggal_selesai]) - Anda termasuk audience target (departemen × golongan yang HR pilih) - Belum Anda isi

Tiap card berisi: - Judul survey - Badge Anonim (kalau survey diset anonim — jawaban Anda tidak dikaitkan ke identitas) - Deskripsi singkat - Jumlah pertanyaan - Tanggal batas akhir pengisian

Tap card → buka form pengisian.

Halaman Isi (`/me/survey/:id`)¶

Header: judul + badge Anonim (kalau berlaku).

Pengantar (kalau HR set template instruksi): paragraf intro yang HR siapkan — biasanya konteks survey & cara isi.

Banner privacy (hanya untuk survey anonim):

Identitas Anda tidak akan disimpan bersama jawaban. Sistem hanya mencatat bahwa Anda sudah mengisi (untuk mencegah pengisian ganda).

Pertanyaan — 3 tipe input:

Tipe	UI
Likert (Skala 1–5)	5 tombol horizontal: 1=Sangat Tidak Setuju, 2=Tidak Setuju, 3=Netral, 4=Setuju, 5=Sangat Setuju. Tap untuk pilih; tap lagi untuk batal. Tombol aktif highlight indigo.
NPS (0–10)	11 tombol angka 0–10 dengan color-code: merah (0–6, Detractor) → oranye (7–8, Passive) → hijau (9–10, Promoter). Label di atas: "0 = Sangat tidak mungkin" / "10 = Sangat mungkin".
Open text	Textarea bebas.

Pertanyaan wajib ditandai * (asterisk) di judul. Pertanyaan opsional boleh dikosongkan.

Submit¶

Tombol Submit Jawaban di bawah halaman. Sebelum submit: - Validasi client-side: kalau ada pertanyaan wajib belum dijawab → toast merah "X pertanyaan wajib belum dijawab" dan submit dibatalkan - Modal konfirmasi muncul: "Submit jawaban Anda? Setelah disubmit tidak bisa diubah."

Setelah submit sukses: - Toast hijau "Terima kasih! Jawaban Anda sudah tersimpan." - Auto-redirect kembali ke daftar - Survey hilang dari list (karena Anda sudah mengisi)

Catatan¶

1 kali per karyawan per survey — sistem tolak submit ulang dengan pesan "Anda sudah mengisi survey ini". Termasuk untuk survey anonim (dedup tetap jalan via tabel marker terpisah, tanpa kaitkan ke jawaban Anda).
Tidak ada draft / save partial — Anda harus selesaikan dalam satu sesi. Jangan refresh sebelum submit.
Survey hilang setelah HR tutup — kalau HR menutup survey sebelum Anda submit, halaman pengisian akan menolak dengan pesan "Periode pengisian survey sudah lewat".

10.10 Restriksi¶

HR tidak bisa login di mobile app (HTTP 403). Pakai portal web admin.
Khusus ponsel — mobile app (m.waktukerja.com) menolak akses dari desktop / tablet / kiosk. Halaman 404 "Khusus Ponsel" akan muncul dengan link ke portal web admin di dash.waktukerja.com. Deteksi via touch pointer + viewport ≤ 932px (iPhone Pro Max landscape). Tetap reactive ke rotasi/resize (kalau buka di Chrome DevTools mobile emulation, muncul normal saat aktif, balik 404 saat keluar emulation).
Logo + branding sama persis dengan web — Kawung Jam SVG + wordmark "WaktuKerja". File logo-waktukerja.svg shared antara frontend/public/ dan mobile/public/.
Theme sinkron dengan portal web (Vibrant Tenun: krem + sogan + prada emas + indigo batik). Font Plus Jakarta Sans + Lora dari Google Fonts.
Offline: PWA service worker cache static asset (HTML/CSS/JS/SVG) — UI loading instan setelah first visit. API request selalu hit network (no offline cache) — data karyawan harus fresh, lebih baik error daripada tampil data lama.

10.11 Troubleshooting¶

"Login pertama gagal, baru bisa setelah reload" → Sudah di-fix. Kalau masih terjadi, hapus cache browser dan coba lagi. Atau hapus app dari home screen dan re-install.

"Tombol Check In tap kamera tidak muncul" → Browser belum dapat izin akses kamera. Buka pengaturan browser → Site Settings → izinkan kamera untuk URL aplikasi. Refresh app.

"Check-in selalu tolak — Anda berada Xm dari Kantor" → Jarak GPS Anda di luar radius yang HR set. Cek: (1) Anda benar di lokasi kantor? (2) GPS HP aktif & akurat? (3) Coba pindah ke ruang terbuka / dekat jendela. Kalau masih gagal padahal sudah di lokasi: lapor HR untuk longgarkan radius di Master Data → Waktu Kerja → Lokasi Presensi.

"Buka m.waktukerja.com di laptop tampil 404 Khusus Ponsel" → By design. Mobile app hanya untuk ponsel. Buka portal web admin di dash.waktukerja.com (link ada di halaman 404). Untuk testing layout di laptop, pakai Chrome DevTools → toggle device toolbar (Ctrl+Shift+M) → pilih preset iPhone / Android.

"Notifikasi telat masuk" → App polling tiap 60 detik. Saat HP background (app tidak active), polling pause. Buka app → polling resume + immediate fetch. Untuk realtime, fitur Web Push di-develop terpisah.

"Logo tidak muncul di home screen Android" → Beberapa launcher Android tidak render SVG icon dengan baik. Workaround: pakai launcher default (Nova / Pixel Launcher / Samsung One UI) untuk hasil terbaik. Generate PNG icon untuk production deployment.

"Mau install di iOS tapi tidak ada tombol Add to Home Screen" → Pastikan pakai Safari (bukan Chrome iOS — Chrome iOS pakai engine WebKit yang sama tapi PWA support beda). Tap tombol Share di bawah, scroll ke bawah, "Add to Home Screen" ada di antara opsi share.

"Saat install dapet 'No icon' atau ikon kosong" → Kemungkinan cache PWA browser stale. Coba: buka URL di tab baru, clear cache, re-install. Atau install dari mode incognito.

Lihat juga¶

09-laporan.md — Laporan portal web (data Riwayat Gaji + Realisasi Kehadiran di mobile sourced dari sini)
05-pengajuan.md — Workflow pengajuan dari sisi HR (yang trigger notifikasi untuk karyawan)
Technical doc (sisi developer, di repository): documentation/notifications.md, documentation/personalia.md, documentation/pengajuan.md