Website Pelanggan
Flow 1 dari 28 — Phase 1Pelanggan Baru Melakukan Reservasi
Aktor: Pelanggan (tanpa perlu login)
Langkah: 6 langkah
Waktu: ± 5 menit
Target: Website jantrakakikaki.com
flowchart TD
A["Pelanggan buka website Jantra Kakikaki"] --> B["Langkah 1: Pilih Cabang"]
B --> C["Langkah 2: Pilih Paket Layanan"]
C --> D["Langkah 3: Pilih Tanggal dan Sesi"]
D --> E["Langkah 4: Isi Data Kendaraan dan Data Diri"]
E --> F["Langkah 5: Periksa Ringkasan dan Konfirmasi"]
F --> G{Sistem memproses}
G -->|Berhasil| H["Langkah 6: Halaman Sukses"]
G -->|Slot penuh| D
G -->|Data kurang| E
H --> I["Email konfirmasi terkirim otomatis"]
I --> J["Selesai"]
style J fill:#16a34a,color:#fff
style H fill:#16a34a,color:#fff
style I fill:#1d4ed8,color:#fff
Rincian Setiap Langkah
| Langkah | Yang Dilakukan Pelanggan | Data yang Diisi | Yang Ditampilkan Sistem |
| 1. Pilih Cabang | Browser minta izin GPS. Jika diizinkan: cabang terdekat otomatis tampil paling atas. Jika ditolak: cari cabang per kota. Klik Pilih. | Izin GPS (opsional), kata kunci pencarian kota | Kartu cabang terurut jarak terdekat (dengan GPS) atau grouped per kota (tanpa GPS). Menampilkan badge "Terdekat" + jarak (km) untuk hasil geolokasi. |
| 2. Pilih Paket | Centang paket yang diinginkan (bisa lebih dari satu) | Checkbox pilihan paket | Kartu paket: nama, deskripsi, durasi, kisaran harga |
| 3. Pilih Jadwal | Klik tanggal di kalender, pilih sesi yang tersedia | Klik tanggal & sesi | Kalender + indikator slot (⚠ hijau = banyak, kuning = hampir penuh, merah = penuh) |
| 4. Isi Data | Isi data kendaraan (plat, merk, model, tahun) dan data diri (nama, HP, email) | Plat nomor, merk, model, tahun, nama, nomor HP, email, keluhan | Form 2 bagian dengan pengecekan otomatis jika ada salah |
| 5. Konfirmasi | Periksa ulang semua data, centang persetujuan | Checkbox setuju syarat & ketentuan | Ringkasan lengkap per bagian, bisa diedit |
| 6. Sukses | Lihat bukti reservasi, simpan ke kalender HP | — | Detail lengkap + tombol Tambah ke Kalender |
📖 Cerita Contoh (Happy Path)
Budi ingin servis mobilnya. Ia buka jantrakakikaki.com, klik tombol Reservasi Sekarang. Browser meminta izin akses lokasi — Budi mengizinkan. Sistem mendeteksi posisi GPS Budi dan otomatis menampilkan Cabang Jakarta Pusat di urutan pertama dengan badge "Terdekat (2.3 km)". Budi klik cabang itu. Ia pilih paket Spooring & Balancing (estimasi 2 jam). Di kalender, ia pilih 15 Juni — sesi pagi (08:00-10:00) masih tersedia 3 slot. Budi isi data kendaraannya: B 1234 ABC, Toyota Avanza, 2020. Isi data diri: nama, nomor HP. Ia periksa ringkasan, klik Konfirmasi Reservasi. Halaman sukses muncul. 5 detik kemudian email konfirmasi masuk ke HP-nya.
⚠ Jika Terjadi Masalah
| Masalah | Apa yang Terjadi |
| Slot tiba-tiba penuh saat submit | Sistem memberi tahu "Sesi ini sudah penuh" dan mengembalikan Budi ke langkah pilih jadwal untuk memilih sesi lain |
| Data yang diisi tidak lengkap | Field yang bermasalah ditandai merah, tombol Konfirmasi tidak bisa diklik sampai semua benar |
| Email gagal terkirim | Reservasi tetap tersimpan aman. Sistem mencoba mengirim ulang email sampai 3 kali di belakang layar |
| Pilih 2 paket berbeda | Sistem otomatis menjumlahkan waktu: Kaki-Kaki (4 jam) + Spooring (2 jam) = total 6 jam |
Flow 2 dari 28 — Phase 1Pelanggan Login dengan Magic Link (Tautan Ajaib)
Aktor: Pelanggan
Langkah: 3 langkah
Waktu: ± 30 detik
Keamanan: Tanpa password — tautan hanya berlaku 15 menit
flowchart TD
A["Pelanggan klik Masuk di website"] --> B["Langkah 1: Masukkan Email atau Nomor HP"]
B --> C["Sistem mengirim tautan ke email"]
C --> D["Langkah 2: Buka email, klik tautan"]
D --> E{Tautan masih berlaku?}
E -->|Ya, belum dipakai| F["Langkah 3: Otomatis masuk dan diarahkan ke Dashboard"]
E -->|Sudah kadaluarsa — lebih 15 menit| G["Tautan tidak berlaku — minta tautan baru"]
E -->|Sudah dipakai| H["Tautan sudah digunakan — minta tautan baru"]
G --> B
H --> B
F --> I["Masuk ke Dashboard Akun"]
style I fill:#16a34a,color:#fff
style C fill:#1d4ed8,color:#fff
Rincian Setiap Langkah
| Langkah | Yang Dilakukan Pelanggan | Data yang Diisi | Yang Ditampilkan Sistem |
| 1. Minta Tautan | Masukkan email (atau nomor HP), klik Kirim | Email atau nomor HP | Pesan: "Tautan dikirim ke email Anda. Cek inbox atau folder spam." |
| 2. Klik Tautan | Buka email dari Jantra Kakikaki, klik tautan masuk | — | Browser membuka halaman verifikasi singkat |
| 3. Otomatis Masuk | Tidak perlu lakukan apa-apa | — | Tampilan loading sesaat, lalu langsung masuk ke Dashboard Akun |
📖 Cerita Contoh (Happy Path)
Budi ingin melihat riwayat servisnya. Ia buka website, klik Masuk. Masukkan email [email protected], klik Kirim Tautan. 3 detik kemudian email dari Jantra Kakikaki masuk. Budi klik tautan di email itu. Browser langsung membuka Dashboard Akun Budi. Tidak perlu mengingat password sama sekali.
⚠ Jika Terjadi Masalah
| Masalah | Apa yang Terjadi |
| Tautan kadaluarsa (lebih 15 menit) | Sistem menampilkan "Tautan sudah tidak berlaku" dan menyediakan tombol Kirim Ulang |
| Tautan sudah diklik sebelumnya | Sistem menampilkan "Tautan ini sudah digunakan" — setiap tautan hanya bisa dipakai satu kali |
| Terlalu banyak minta tautan | Sistem meminta menunggu beberapa menit (maksimal 3 kali dalam 5 menit) |
| Email belum terdaftar | Sistem tetap mengirim tautan dan otomatis membuat akun baru saat tautan diklik (pelanggan tidak perlu daftar secara terpisah) |
Flow 3 dari 28 — Phase 1Pelanggan Membatalkan Reservasi (via Email)
Aktor: Pelanggan
Langkah: 3 langkah
Syarat: Maksimal 6 jam sebelum jadwal
flowchart TD
A["Buka email konfirmasi reservasi"] --> B["Langkah 1: Klik tautan Batalkan"]
B --> C["Langkah 2: Halaman Pembatalan — lihat detail reservasi"]
C --> D{Batas waktu >= 6 jam?}
D -->|Ya| E["Tulis alasan pembatalan — boleh dikosongkan"]
D -->|Tidak| F["Pembatalan hanya bisa dilakukan maksimal 6 jam sebelum jadwal"]
E --> G["Klik Konfirmasi Pembatalan"]
G --> H["Langkah 3: Reservasi dibatalkan"]
H --> I["Email konfirmasi pembatalan terkirim"]
I --> J["Selesai — slot dikembalikan ke sistem"]
style J fill:#16a34a,color:#fff
style H fill:#dc2626,color:#fff
Rincian Setiap Langkah
| Langkah | Yang Dilakukan Pelanggan | Data yang Diisi | Yang Ditampilkan Sistem |
| 1. Klik Tautan | Buka email konfirmasi, klik "Batalkan Reservasi" | — | Browser membuka halaman pembatalan |
| 2. Konfirmasi | Lihat detail, isi alasan (opsional), klik konfirmasi | Alasan pembatalan (boleh kosong) | Detail reservasi + form alasan |
| 3. Selesai | Lihat pesan pembatalan berhasil | — | "Reservasi berhasil dibatalkan" + email notifikasi |
📖 Cerita Contoh (Happy Path)
Budi tidak bisa datang karena ada keperluan mendadak. Ia buka email konfirmasi reservasinya, klik tautan Batalkan Reservasi. Ia melihat detail reservasinya (masih 2 hari lagi, jadi masih bisa dibatalkan). Budi menulis alasan "Ada keperluan mendadak", klik Konfirmasi Pembatalan. Reservasi berhasil dibatalkan. Slot yang tadinya dipesan Budi sekarang tersedia lagi untuk pelanggan lain.
⚠ Jika Terjadi Masalah
| Masalah | Apa yang Terjadi |
| Kurang dari 6 jam sebelum jadwal | Sistem menolak — "Pembatalan hanya bisa dilakukan maksimal 6 jam sebelum jadwal" |
| Tautan tidak valid | "Tautan pembatalan tidak valid" — mungkin sudah kadaluarsa |
| Reservasi sudah dibatalkan | "Reservasi ini sudah dibatalkan sebelumnya" |
| Reservasi sudah selesai | "Reservasi sudah selesai, tidak dapat dibatalkan" |
Flow 4 dari 28 — Phase 1Pelanggan Mengubah Jadwal Reservasi (via Email)
Aktor: Pelanggan
Langkah: 5 langkah
Syarat: H-6 jam & maksimal 1 kali ubah
flowchart TD
A["Buka email konfirmasi reservasi"] --> B["Langkah 1: Klik tautan Ubah Jadwal"]
B --> C["Langkah 2: Lihat jadwal saat ini"]
C --> D{Batas waktu OK?}
D -->|Tidak| E["Hanya bisa ubah jadwal maksimal 6 jam sebelumnya"]
D -->|Ya| F["Langkah 3: Pilih sesi baru dari kalender"]
F --> G{Sesi baru tersedia?}
G -->|Tidak| F
G -->|Ya| H["Langkah 4: Bandingkan jadwal Lama vs Baru"]
H --> I["Klik Konfirmasi Perubahan"]
I --> J["Langkah 5: Reservasi diperbarui"]
J --> K["Email konfirmasi perubahan terkirim"]
K --> L["Selesai — slot lama dikembalikan"]
style L fill:#16a34a,color:#fff
style H fill:#1d4ed8,color:#fff
Rincian Setiap Langkah
| Langkah | Yang Dilakukan Pelanggan | Data yang Diisi | Yang Ditampilkan Sistem |
| 1. Klik Tautan | Buka email, klik "Ubah Jadwal" | — | Browser membuka halaman ubah jadwal |
| 2. Lihat Jadwal Lama | Melihat info reservasi yang sedang berjalan | — | Info reservasi saat ini: tanggal, sesi, cabang |
| 3. Pilih Sesi Baru | Pilih tanggal dan sesi baru yang tersedia | Klik tanggal & sesi | Kalender + indikator ketersediaan slot |
| 4. Bandingkan | Lihat perbandingan jadwal lama dan baru | — | Tabel perbandingan: Lama vs Baru |
| 5. Selesai | Lihat reservasi yang sudah diperbarui | — | Pesan sukses + email konfirmasi perubahan |
📖 Cerita Contoh (Happy Path)
Budi dapat undangan mendadak di hari yang sama dengan jadwal servisnya (15 Juni sesi pagi). Ia buka email konfirmasi, klik Ubah Jadwal. Sistem menampilkan kalender — Budi memilih 20 Juni sesi siang (11:00-13:00) yang masih tersedia. Sistem menampilkan perbandingan: jadwal lama vs jadwal baru. Budi klik Konfirmasi Perubahan. Slot lamanya dikembalikan, slot baru dipesan. Email konfirmasi perubahan masuk.
⚠ Jika Terjadi Masalah
| Masalah | Apa yang Terjadi |
| Kurang dari 6 jam | Sistem menolak perubahan |
| Sesi baru sudah penuh | Sesi ditandai merah, tidak bisa dipilih. Pelanggan harus memilih sesi lain |
| Sudah pernah ubah jadwal | "Ubah jadwal hanya bisa dilakukan 1 kali" |
| Servis sudah dikerjakan | Tidak bisa ubah jadwal — status sudah "Sedang Dikerjakan" |
Backoffice Staff
Flow 10 dari 28 — Phase 1Staff Melakukan Login ke Backoffice
Aktor: Super Admin / Admin Cabang / CSO
Langkah: 2 langkah
Waktu: ± 30 detik
flowchart TD
A["Staff buka halaman backoffice"] --> B["Langkah 1: Masukkan email dan password"]
B --> C["Klik Masuk"]
C --> D{Sistem memeriksa}
D -->|Email dan password benar| E{Cek jabatan}
E -->|Super Admin| F["Masuk ke Dashboard Semua Cabang"]
E -->|Admin Cabang| G["Masuk ke Dashboard Cabang Sendiri"]
E -->|CSO| H["Masuk ke Dashboard CSO Cabang"]
D -->|Password salah| I["Tampil pesan: Email atau password salah"]
D -->|Akun dinonaktifkan| J["Tampil pesan: Akun dinonaktifkan — hubungi admin"]
D -->|Terlalu banyak coba| K["Tampil pesan: Coba lagi 15 menit lagi"]
I --> B
J --> B
K --> B
F --> L["Masuk Backoffice"]
G --> L
H --> L
style L fill:#16a34a,color:#fff
Rincian Setiap Langkah
| Langkah | Yang Dilakukan Staff | Data yang Diisi | Yang Ditampilkan Sistem |
| 1. Login | Buka halaman login backoffice, isi email & password | Email staff, password | Form login dengan logo Jantra Kakikaki |
| 2. Masuk | Sistem memverifikasi, langsung masuk dashboard | — | Dashboard + menu sebelah kiri sesuai jabatan |
Hak Akses Berdasarkan Jabatan
| Jabatan | Melihat Data | Menu yang Tampil |
| Super Admin | Semua cabang (22 cabang) | Dashboard, Reservasi, Pelanggan, Master Data, Laporan, Pengguna |
| Admin Cabang | Hanya cabang tempat bertugas | Dashboard, Reservasi, Pelanggan, Mekanik, Laporan |
| CSO | Hanya cabang tempat bertugas | Dashboard, Reservasi, Pelanggan |
📖 Cerita Contoh (Happy Path)
Rina adalah Admin Cabang Jakarta Pusat. Ia buka alamat backoffice, masukkan email dan passwordnya. Sistem langsung mengarahkannya ke Dashboard Cabang Jakarta Pusat. Di sebelah kiri muncul menu: Dashboard, Reservasi, Pelanggan, Mekanik, Laporan. Rina hanya bisa melihat data milik cabangnya sendiri.
⚠ Jika Terjadi Masalah
| Masalah | Apa yang Terjadi |
| Password salah | "Email atau password salah" (sengaja tidak memberi tahu mana yang salah, demi keamanan) |
| Akun dinonaktifkan | "Akun Anda telah dinonaktifkan. Hubungi administrator." |
| Pelanggan mencoba login | "Akun ini tidak memiliki akses backoffice" (akun pelanggan tidak bisa masuk backoffice) |
| 5 kali gagal dalam 15 menit | Sistem memblokir sementara — "Terlalu banyak percobaan. Silakan coba lagi 15 menit lagi." |
Flow 11 dari 28 — Phase 1CSO Memverifikasi Kedatangan Pelanggan (Check-in)
Aktor: CSO / Staff Frontliner
Langkah: 3 langkah
Waktu: ± 1 menit
flowchart TD
A["CSO di halaman Dashboard"] --> B["Langkah 1: Buka menu Check-in"]
B --> C["Cari pelanggan dengan plat nomor atau nama"]
C --> D{Ditemukan?}
D -->|Ya| E["Tampilkan detail reservasi"]
D -->|Tidak| F["Pelanggan walk-in: buka form reservasi baru"]
E --> G["Cocokkan plat nomor dan merk kendaraan"]
G --> H["Klik Validasi dan Check-in"]
H --> I["Status berubah: Dikonfirmasi > Sudah Datang"]
I --> J["Selesai — pelanggan siap dilayani"]
style J fill:#16a34a,color:#fff
style I fill:#1d4ed8,color:#fff
Rincian Setiap Langkah
| Langkah | Yang Dilakukan CSO | Data yang Diisi | Yang Ditampilkan Sistem |
| 1. Cari | Cari data reservasi dengan mengetik plat nomor atau nama | Plat nomor atau nama pelanggan | Hasil pencarian otomatis saat mengetik |
| 2. Verifikasi | Cocokkan data di layar dengan kendaraan fisik | Pengecekan visual: plat, merk | Detail: nama, plat, merk, model, paket, sesi |
| 3. Check-in | Klik tombol validasi | Klik Validasi dan Check-in | Status berubah + tercatat jam kedatangan + nama CSO |
📖 Cerita Contoh (Happy Path)
Pelanggan Budi tiba di bengkel. Siska (CSO) membuka menu check-in, mengetik plat nomor B 1234 ABC. Sistem langsung menampilkan reservasi Budi: Toyota Avanza, Spooring & Balancing, sesi 1 jam 08:00. Siska memverifikasi plat dan merk kendaraan fisik cocok dengan data di layar. Klik Validasi dan Check-in. Status berubah menjadi "Sudah Datang". Siska kemudian mengarahkan Budi ke mekanik yang bertugas.
⚠ Jika Terjadi Masalah
| Masalah | Apa yang Terjadi |
| Pelanggan belum reservasi (walk-in) | CSO langsung masuk ke form reservasi manual, tanggal otomatis hari ini |
| Plat nomor tidak ditemukan | CSO konfirmasi ulang ke pelanggan, atau langsung buka form reservasi baru |
| Reservasi sudah check-in | Sistem menolak — tidak bisa check-in dua kali |
| Reservasi untuk tanggal berbeda | Sistem memberi peringatan: "Reservasi ini untuk tanggal lain" — CSO konfirmasi ke pelanggan |
Flow 12 dari 28 — Phase 1Staff Mengelola Status Reservasi
Aktor: CSO / Admin Cabang / Super Admin
Langkah: 4 langkah
Waktu: ± 2 menit per reservasi
flowchart TD
A["Staff di Dashboard"] --> B["Langkah 1: Lihat daftar reservasi hari ini"]
B --> C["Langkah 2: Klik reservasi yang ingin dilihat"]
C --> D["Langkah 3: Detail reservasi terbuka"]
D --> E{Pilih tindakan}
E -->|Mulai Pengerjaan| F["Konfirmasi: mulai dikerjakan?"]
E -->|Selesai| G["Konfirmasi: servis selesai?"]
F --> H["Status: Sedang Dikerjakan"]
G --> I["Status: Selesai"]
H --> J["Langkah 4: Status terbarui"]
I --> J
J --> K["Notifikasi email otomatis ke pelanggan"]
K --> L["Selesai"]
style L fill:#16a34a,color:#fff
style H fill:#fbbf24,color:#000
style I fill:#16a34a,color:#fff
Rincian Setiap Langkah
| Langkah | Yang Dilakukan Staff | Data yang Diisi | Yang Ditampilkan Sistem |
| 1. Lihat Daftar | Buka halaman reservasi, lihat semua reservasi hari ini | — | Tabel: ID, jam, nama pelanggan, plat, paket, status |
| 2. Pilih | Klik baris reservasi yang ingin dikelola | — | Panel detail di samping atau halaman baru |
| 3. Detail | Lihat informasi lengkap reservasi | — | Status, sesi, cabang, data pelanggan, data kendaraan, paket |
| 4. Update Status | Pilih tindakan dari tombol yang tersedia | Klik Mulai atau Selesai | Status berubah, toast notifikasi, email ke pelanggan |
Alur Perubahan Status
Dikonfirmasi
→
Sedang Dikerjakan
→
Selesai
Dikonfirmasi
→
Dibatalkan
(oleh staff, dengan alasan wajib)
| Status Saat Ini | Tindakan yang Tersedia | Status Baru |
| Dikonfirmasi | Mulai Pengerjaan | Sedang Dikerjakan |
| Dikonfirmasi | Batalkan (wajib isi alasan) | Dibatalkan |
| Sedang Dikerjakan | Selesai | Selesai |
| Selesai | — (status akhir) | Tidak bisa diubah |
| Dibatalkan | — (status akhir) | Tidak bisa diubah |
📖 Cerita Contoh (Happy Path)
Siska (CSO) login pagi. Dashboard menampilkan 8 reservasi hari ini. Budi dengan Toyota Avanza sudah check-in. Siska klik reservasi Budi, klik Mulai Pengerjaan. Status berubah jadi Sedang Dikerjakan. 2 jam kemudian mekanik selesai, Siska update ke Selesai. Status jadi Selesai. Email notifikasi otomatis terkirim ke Budi: "Servis kendaraan Anda telah selesai."
⚠ Jika Terjadi Masalah
| Masalah | Apa yang Terjadi |
| Mencoba mundurkan status | Selesai tidak bisa kembali ke Sedang Dikerjakan. Tombol tidak muncul. |
| Staff membatalkan reservasi | Staff bisa batalkan kapan saja (tidak terbatas 6 jam). Wajib isi alasan minimal 10 karakter, dan mengetik kata "BATAL" sebagai konfirmasi. |
| Belum ada reservasi hari ini | Halaman menampilkan ilustrasi dan teks "Belum ada reservasi hari ini" |
| Tabel diperbarui otomatis | Tabel reservasi diperbarui setiap 60 detik. Bisa dimatikan dengan toggle. |