Sentra Service — UI Screen List & Wireframes

14.1 Halaman Utama SentraService Book

1. Frontdesk Scheduler Console (Dashboard Resepsionis)

• Time Slot Matrix view: Grid interaktif yang menyandingkan kolom nama staf dengan baris waktu 30 menit, lengkap dengan fitur drag-and-drop jadwal.
• Walk-in Queue Panel: Monitor pendaftaran walk-in, cetak tiket, dan kontrol waiting list.
• Staff Shift & Availability Setup: Pengaturan jam kerja staf harian.

2. Mobile Customer Booking Widget

• Wizard Form: Alur sederhana 3 langkah: Pilih Cabang & Jasa -> Pilih Staf & Jam -> Input Data & Bayar DP.

14.2 ASCII Wireframe: Frontdesk Scheduler Calendar Matrix (Next.js Desktop View)

====================================================================================================
 SENTRASERVICE ADMIN                        | CABANG: DAGO-BANDUNG | STATUS: ACTIVE (SYNC) | A-09
====================================================================================================
 [ PEMESANAN BARU ] [ PENDAFTARAN WALK-IN ] [x] WAITING LIST ANTRIAN: [ 1. ANTO WIJAYA | 2. SITI ]
----------------------------------------------------------------------------------------------------
  WAKTU | BUDI (KAPSTER)      | RIAN (HAIRDRESSER)  | INDRA (SPECIALIST)  | RUANGAN SPA-01
--------+---------------------+---------------------+---------------------+-------------------------
  09:00 | [## ANTO WIJAYA ##] |                     |                     | [#####################]
  09:30 | [## Haircut-A12  ##] |                     | [## SITI NUR HALB##]| [## PIJAT TRADIS    ##]
  10:00 |                     |                     | [## Hair Color-A9##]| [## REFLEKSI  - R2  ##]
  10:30 |                     | [## HENDRI JAYA  ##]|                     |
  11:00 | [## BREAK TIME   ##]| [## Haircut-A15  ##]|                     | [#####################]
  11:30 | [## BREAK TIME   ##]|                     |                     | [## PIJAT TRADIS    ##]
--------+---------------------+---------------------+---------------------+-------------------------
 [ DETAIL APPOINTMENT AKTIF: ANTO WIJAYA ]                                | TOTAL KAPASITAS HARI INI
 Laypanan  : Premium Haircut & Wash (45 Menit)                             | Slot Terisi : 12
 Staf      : BUDI (Kapster)                                                | Slot Kosong :  8
 Jam Slot  : 09:00 - 09:45                                                 | Status Toko : RAMAI
 Status DP : LUNAS Rp 20.000 (QRIS) - [ CHECK-IN ] [ LATE DETECTED ]       | PPN (11%)   : Otomatis
====================================================================================================

14.3 ASCII Wireframe: Mobile Customer Booking Widget (Smartphone View)

+-----------------------------------+
| <   SENTRASERVICE - BOOKING       |
+-----------------------------------+
| 1. PILIH LAYANAN & CABANG         |
|    Cabang : [ DAGO-BANDUNG    ] V |
|    Jasa   : [ Premium Haircut ] V |
|                                   |
| 2. PILIH STAF & SLOT HARI INI     |
|    Tanggal: 2026-05-21            |
|    Staf   : [ BUDI (Kapster)  ] V |
|                                   |
|    PILIH WAKTU TERSEDIA:          |
|    +-------------+ +-------------+|
|    | 09:00 - 09:45| | 09:45 - 10:30||
|    | (TERSEDIA)  | | (TERSEDIA)  ||
|    +-------------+ +-------------+|
|    +-------------+ +-------------+|
|    | 10:30 - 11:15| | 11:15 - 12:00||
|    | (TERISI)    | | (TERSEDIA)  ||
|    +-------------+ +-------------+|
|                                   |
| 3. DETAIL PEMESANAN               |
|    Subtotal Jasa : Rp 100.000     |
|    Uang Muka (DP): Rp  20.000     |
|                                   |
|    [ BAYAR SEKARANG via QRIS / E-WALLET ]|
+-----------------------------------+

User Stories

15.1 Online Slot Reservation (Customer Role)

• USER STORY: Sebagai Pelanggan, saya ingin memilih slot waktu kosong dan membayar DP secara online agar saya terjamin mendapatkan pelayanan dari kapster favorit tanpa harus mengantre lama.
• ACCEPTANCE CRITERIA:
• Given Pelanggan berada pada widget booking seluler cabang Dago.
• When Pelanggan memilih tanggal "2026-05-21", jam "09:00", dan staf "Budi", lalu mengklik "Bayar DP".
• Then Sistem mengunci slot tersebut di Redis selama 10 menit dan memunculkan gambar QRIS dinamis senilai Rp 20.000.
• And Setelah pembayaran terverifikasi sukses, sistem menerbitkan nomor booking "BK/DG/20260521/008", mengirimkan konfirmasi via WhatsApp lengkap dengan link lokasi Google Maps, dan mengubah slot di dashboard resepsionis menjadi CONFIRMED.

15.2 Walk-in Check-in Integration (Receptionist Role)

• USER STORY: Sebagai Resepsionis, saya ingin mendaftarkan pelanggan walk-in dan menyinkronkan status kedatangan pelanggan booking online agar distribusi antrean pengerjaan staf terpantau tertib di layar monitor lobi.
• ACCEPTANCE CRITERIA:
• Given Pelanggan booking online "Anto Wijaya" tiba di toko dan menyebutkan nomor booking.
• When Resepsionis mencari nama Anto di dashboard resepsionis dan menekan tombol "Check-in".
• Then Sistem mengubah status janji temu menjadi CHECKED_IN, menyalakan notifikasi di tablet kapster Budi, serta memunculkan nama Anto di antrean monitor TV lobi sebagai "Meja 01 - Silakan Bersiap".