Sentra Membership — UI Screen List & Wireframes¶
14.1 Screen Map for Multi-Branch Gym Ecosystem¶
| App | Platform | Layar Utama |
|---|---|---|
| Member Mobile Native App | React Native (iOS & Android) | Halaman pencapaian, daftar program kebugaran, pemesanan kuota sesi kelas, QR Code dinamis untuk scan gerbang, top-up saldo QRIS |
| Frontdesk / Receptionist Desktop App | React + Electron | Monitor akses gerbang real-time, pencarian member manual, cetak kartu RFID NFC, rekonsiliasi kas kasir |
| Trainer Console | Responsive Web (React) | Kalender jadwal sesi pribadi, absensi member kelas, laporan kumulatif komisi mengajar bulanan |
14.2 Wireframe 1: Member Mobile Booking Calendar & Quotas¶
Antarmuka pemesanan kelas yang dioptimalkan untuk kecepatan navigasi mobile:
+-------------------------------------------------------------+
| [SENTRACLUB FIT] | Jakarta Pusat | Saldo: Rp 350.000 | [🔔] |
+-------------------------------------------------------------+
| JADWAL KELAS MINGGU INI |
| [ SEN, 22 ] (* SEL, 23 *) [ RAB, 24 ] [ KAM, 25 ] |
+-------------------------------------------------------------+
| PILIH KELAS TERSEDIA (SELASA, 23 MEI 2026): |
| |
| [07:00] YOGA SUNRISE - Studio 1 (Dr. Anastasia) |
| Slot: [XXXXXXXX..] 8/10 Tersisa |
| [ BOOKING SLOT ] |
| |
| [18:30] ZUMBA PARTY - Main Hall (Instruktur: Rina) |
| Slot: [XXXXXXXXXX] FULL | 5 Waiting List |
| [ MASUK WAITING LIST (Posisi 6) ] |
| |
| [20:00] BODYPUMP H.I.I.T - Studio 2 (Trainer: Irfan) |
| Slot: [XXXXXX....] 6/12 Tersisa |
| [ BOOKING SLOT ] |
+-------------------------------------------------------------+
| REKOMENDASI UNTUK KAMU: |
| -> Kamu butuh 2 sesi kardio lagi minggu ini untuk badge |
| achievement "Kardio Warrior" bulan ini! |
+-------------------------------------------------------------+
| [ HOME ] [ BOOKING ] [ WALLET ] [ PROFIL ] |
+-------------------------------------------------------------+
14.3 Wireframe 2: Frontdesk Reception Access Gate Monitor¶
Tampilan monitor resepsionis untuk pengawasan akses turnstile real-time:
+--------------------------------------------------------------------------------------------------+
| SENTRACLUB RECEP | Cabang: Jakarta Pusat | Gate 1: [ONLINE] | Gate 2: [ONLINE] |
+--------------------------------------------------------------------------------------------------+
| [ LIVE MONITOR AKSES GERBANG MASUK TURNSTILE ] |
| Time | Member Name | Status | Verification | Gate | Action Required |
| 20:22:15 | Budi Santoso | GRANTED | FACE SCAN | Gate 01-IN | None (Checked In) |
| 20:22:02 | Amanda Putri | GRANTED | RFID CARD | Gate 02-IN | None (Checked In) |
| 20:21:40 | Ronal Wijaya | DENIED | RFID CARD | Gate 01-IN | [!] Ditolak: ANTI-PASSBACK |
| 20:20:11 | Jessica Lee | DENIED | FACE SCAN | Gate 02-IN | [!] Paket Expired (Renew) |
+--------------------------------------------------------------------------------------------------+
| DETAIL PERINGATAN (TERKINI): |
| Member: Ronal Wijaya (MEM-2026-0044) | Status Terakhir: IN di Cabang Jaksel (20:15 WIB) |
| Masalah: Mencoba scan IN di Jakpus dalam selisih 7 menit (Indikasi sharing kartu membership!) |
| |
| [ ACTION BUTTONS FOR RECEPTIONIST ] |
| [ HUBUNGI MEMBER ] [ OVERRIDE AKSES GATE (IZINKAN MASUK) ] [ BLOKIR SEMENTARA AKUN MEMBER ] |
+--------------------------------------------------------------------------------------------------+
| CARI MEMBER CEPAT: [ Input Nama / Member Number... ] [ CEK STATUS KELAYAKAN MEMBERSHIP ] |
+--------------------------------------------------------------------------------------------------+
15. User Stories¶
15.1 User Story 1: Member Melakukan Reservasi Kelas Populer (High Concurrency)¶
- As a Member SentraClub Fit
- I want to Melakukan reservasi slot kelas Zumba populer di menit pertama kelas dibuka
- So that Saya pasti mendapatkan tempat tanpa terhambat overload sistem atau over-capacity slot kelas
Acceptance Criteria (BDD Scenario):
- Given Kelas Zumba memiliki sisa kapasitas 2 slot
- And Ada 100 member menekan tombol "BOOKING SLOT" pada detik yang sama di aplikasi mobile
- When Sistem memproses permintaan booking konkuren secara bersamaan di backend
- Then Sistem harus menggunakan Redis distributed transaction untuk mengurangi kuota satu per satu secara berurutan
- And Hanya 2 member pertama yang menerima konfirmasi
status: CONFIRMEDdengan sisa kapasitas berubah menjadi 0 - And 98 member lainnya dialihkan secara tertib ke antrean daftar tunggu (
status: WAITING) sesuai urutan milidetik masuk transaksi - And Sistem tidak boleh mengalami inkonsistensi data kuota yang mengakibatkan over-capacity
15.2 User Story 2: Verifikasi Turnstile Gate Mendeteksi Membership Sharing Abuse¶
- As a Resepsionis Cabang
- I want to Mendapatkan peringatan otomatis ketika sistem pintu masuk mendeteksi pelanggaran Anti-Passback atau ketidakcocokan wajah
- So that Saya dapat segera menegur member bersangkutan untuk menghindari fraud kerugian bisnis
Acceptance Criteria (BDD Scenario):
- Given Member A telah sukses melakukan scan kartu RFID dan terverifikasi masuk (
access_type: IN) di dalam area gym - When Member A melemparkan kartunya ke luar area gerbang kepada temannya (Member B) untuk digunakan masuk
- And Member B men-scan kartu RFID yang sama di gerbang masuk dalam durasi waktu berjalan
- Then Edge Gateway harus menolak verifikasi dengan status
ANTI_PASSBACK_VIOLATION - And Gerbang turnstile tetap terkunci rapat
- And Layar monitor resepsionis berkedip merah menampilkan peringatan "Passback Abuse Warning: Ronal Wijaya"
- And Sistem mencatat insiden percobaan tersebut di tabel
gate_logsuntuk evaluasi audit