UI/UX Mockup (Hitam–Putih)
Halaman ini khusus untuk kebutuhan desain UI/UX. Semua tampilan dibuat statis sebagai contoh seperti layout Figma, lalu kamu bisa screenshot per menu. Akses: /uiux (hanya aktif saat APP_DEBUG=true).
Mobile 390×844 • Desktop 1440×900
Kiosk - Landing
Public
PT PUTRA MUARA SUKSES
Sistem Absensi Kiosk
12:45
SENIN, 26 APRIL 2026
Sesi Aktif: SHIFT PAGI • 08:00–12:00
MULAI ABSENSI
Admin Login
Kiosk - Scan
Verifikasi + Foto
X
Kedip 1x untuk verifikasi
Nama Karyawan
AMBIL FOTO
ULANG
KONFIRMASI
Auth - Login Admin
Desktop
PMS Absensi
/login
Admin - Dashboard
Desktop
Admin
Dashboard
Karyawan
Sesi
Absensi
Laporan
Admin
Dashboard
Karyawan
Sesi Kerja
Monitoring Absensi
Laporan
Settings
Audit Logs
Total Karyawan
28
Hadir Hari Ini
21
Sesi Aktif
1
Terlambat
3
Nama
Jam
Status
Lokasi
Foto
Budi Santoso
08:01
HADIR
Dalam radius
VIEW
Siti Aulia
08:07
HADIR
Dalam radius
VIEW
Rizky Putra
08:15
HADIR
Dalam radius
VIEW
Admin - Karyawan
Desktop
Admin
Dashboard
Karyawan
Sesi
Absensi
Laporan
Admin
Dashboard
Karyawan
Sesi Kerja
Monitoring Absensi
Laporan
Settings
Audit Logs
Cari karyawan...
+ TAMBAH
Nama
Role
HP
Status
Aksi
Budi Santoso
Employee
08xxxx
Aktif
EDIT
Siti Aulia
Employee
08xxxx
Aktif
EDIT
Admin
Admin
-
Aktif
EDIT
Admin - Karyawan (Tambah)
Desktop
Admin
Dashboard
Karyawan
Sesi
Absensi
Laporan
Admin
Dashboard
Karyawan
Sesi Kerja
Monitoring Absensi
Laporan
Settings
Audit Logs
Tambah Karyawan
Isi data karyawan baru dan unggah foto wajah.
KEMBALI
Form Tambah
Nama
Contoh: Budi Santoso
No. HP
08xxxxxxxxxx
Role
Employee
Foto Wajah
Upload file (jpg/png)
BATAL
SIMPAN
Preview Data
Ringkasan data sebelum disimpan.
Nama: Budi Santoso
No. HP: 08xxxxxxxxxx
Role: Employee
Foto: foto_wajah.jpg
Admin - Karyawan (Edit)
Desktop
Admin
Dashboard
Karyawan
Sesi
Absensi
Laporan
Admin
Dashboard
Karyawan
Sesi Kerja
Monitoring Absensi
Laporan
Settings
Audit Logs
Edit Karyawan
Perbarui data karyawan yang sudah ada.
KEMBALI
Form Edit
Nama
Siti Aulia
No. HP
0812xxxxxxx
Role
Employee
Ganti Foto (Opsional)
Upload file (jpg/png)
HAPUS
UPDATE
Data Saat Ini
Contoh data yang tersimpan.
ID: EMP-002
Nama: Siti Aulia
Status: Aktif
Foto: siti.jpg
Admin - Sesi Kerja
Desktop
Admin
Dashboard
Karyawan
Sesi
Absensi
Laporan
Admin
Dashboard
Karyawan
Sesi Kerja
Monitoring Absensi
Laporan
Settings
Audit Logs
Daftar Sesi
+ BUAT SESI
Judul
Tanggal
Jam
Aktif
Detail
Shift Pagi
26/04
08:00–12:00
ON
OPEN
Shift Sore
26/04
13:00–17:00
OFF
OPEN
Detail Sesi (Preview)
List karyawan yang sudah absen pada sesi yang dipilih.
Budi • 08:01 Siti • 08:07 Rizky • 08:15
Admin - Sesi Kerja (Buat)
Desktop
Admin
Dashboard
Karyawan
Sesi
Absensi
Laporan
Admin
Dashboard
Karyawan
Sesi Kerja
Monitoring Absensi
Laporan
Settings
Audit Logs
Buat Sesi Kerja
Buat jadwal sesi absensi baru.
KEMBALI
Form Buat Sesi
Judul Sesi
Contoh: Shift Pagi
Tanggal
YYYY-MM-DD
Status
OFF (default)
Jam Mulai
08:00
Jam Selesai
12:00
BATAL
SIMPAN
Preview
Ringkasan sesi yang akan dibuat.
Judul: Shift Pagi
Tanggal: 2026-04-26
Jam: 08:00–12:00
Status: OFF
Admin - Sesi Kerja (Edit)
Desktop
Admin
Dashboard
Karyawan
Sesi
Absensi
Laporan
Admin
Dashboard
Karyawan
Sesi Kerja
Monitoring Absensi
Laporan
Settings
Audit Logs
Edit Sesi Kerja
Perbarui jadwal dan status sesi.
KEMBALI
Form Edit Sesi
Judul Sesi
Shift Sore
Tanggal
2026-04-26
Aktif
OFF
Jam Mulai
13:00
Jam Selesai
17:00
HAPUS
UPDATE
Info Sesi
Contoh info tambahan.
ID Sesi: WS-002
Jumlah hadir: 12
Last update: 26/04 12:30
Admin - Monitoring Absensi
Desktop
Admin
Dashboard
Karyawan
Sesi
Absensi
Laporan
Admin
Dashboard
Karyawan
Sesi Kerja
Monitoring Absensi
Laporan
Settings
Audit Logs
Cari karyawan...
Tanggal
Tanggal/Jam
Nama
Status
Lokasi
Foto
26/04 08:01
Budi Santoso
Hadir
Dalam radius
VIEW
26/04 08:07
Siti Aulia
Hadir
Dalam radius
VIEW
26/04 08:15
Rizky Putra
Hadir
Dalam radius
VIEW
Modal Foto (Preview)
Admin - Laporan
Desktop
Admin
Dashboard
Karyawan
Sesi
Absensi
Laporan
Admin
Dashboard
Karyawan
Sesi Kerja
Monitoring Absensi
Laporan
Settings
Audit Logs
Filter Laporan
Dari Tanggal
Sampai Tanggal
Karyawan (opsional)
TAMPILKAN
EXPORT
Tanggal
Nama
Status
Lokasi
File
26/04
Budi Santoso
Hadir
Dalam radius
PDF
26/04
Siti Aulia
Hadir
Dalam radius
PDF
Admin - Settings
Desktop
Admin
Dashboard
Karyawan
Sesi
Absensi
Laporan
Admin
Dashboard
Karyawan
Sesi Kerja
Monitoring Absensi
Laporan
Settings
Audit Logs
Pengaturan Kantor
Latitude
Longitude
Radius (m)
SIMPAN
RESET
Preview Peta (Placeholder)
Admin - Audit Logs
Desktop
Admin
Dashboard
Karyawan
Sesi
Absensi
Laporan
Admin
Dashboard
Karyawan
Sesi Kerja
Monitoring Absensi
Laporan
Settings
Audit Logs
Waktu
Aksi
Status
User
Detail
26/04 08:01
Absensi Kiosk
OK
Budi
VIEW
26/04 08:07
Tambah Karyawan
OK
Admin
VIEW
26/04 08:15
Aktifkan Sesi
OK
Admin
VIEW
Detail Log (Preview)
Menampilkan detail aktivitas untuk kebutuhan audit.