Phase 1 — Reservasi Dasar (MVP)

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

LangkahYang Dilakukan PelangganData yang DiisiYang Ditampilkan Sistem
1. Pilih CabangBrowser 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 kotaKartu cabang terurut jarak terdekat (dengan GPS) atau grouped per kota (tanpa GPS). Menampilkan badge "Terdekat" + jarak (km) untuk hasil geolokasi.
2. Pilih PaketCentang paket yang diinginkan (bisa lebih dari satu)Checkbox pilihan paketKartu paket: nama, deskripsi, durasi, kisaran harga
3. Pilih JadwalKlik tanggal di kalender, pilih sesi yang tersediaKlik tanggal & sesiKalender + indikator slot (⚠ hijau = banyak, kuning = hampir penuh, merah = penuh)
4. Isi DataIsi data kendaraan (plat, merk, model, tahun) dan data diri (nama, HP, email)Plat nomor, merk, model, tahun, nama, nomor HP, email, keluhanForm 2 bagian dengan pengecekan otomatis jika ada salah
5. KonfirmasiPeriksa ulang semua data, centang persetujuanCheckbox setuju syarat & ketentuanRingkasan lengkap per bagian, bisa diedit
6. SuksesLihat bukti reservasi, simpan ke kalender HPDetail 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

MasalahApa yang Terjadi
Slot tiba-tiba penuh saat submitSistem memberi tahu "Sesi ini sudah penuh" dan mengembalikan Budi ke langkah pilih jadwal untuk memilih sesi lain
Data yang diisi tidak lengkapField yang bermasalah ditandai merah, tombol Konfirmasi tidak bisa diklik sampai semua benar
Email gagal terkirimReservasi tetap tersimpan aman. Sistem mencoba mengirim ulang email sampai 3 kali di belakang layar
Pilih 2 paket berbedaSistem 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

LangkahYang Dilakukan PelangganData yang DiisiYang Ditampilkan Sistem
1. Minta TautanMasukkan email (atau nomor HP), klik KirimEmail atau nomor HPPesan: "Tautan dikirim ke email Anda. Cek inbox atau folder spam."
2. Klik TautanBuka email dari Jantra Kakikaki, klik tautan masukBrowser membuka halaman verifikasi singkat
3. Otomatis MasukTidak perlu lakukan apa-apaTampilan 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

MasalahApa yang Terjadi
Tautan kadaluarsa (lebih 15 menit)Sistem menampilkan "Tautan sudah tidak berlaku" dan menyediakan tombol Kirim Ulang
Tautan sudah diklik sebelumnyaSistem menampilkan "Tautan ini sudah digunakan" — setiap tautan hanya bisa dipakai satu kali
Terlalu banyak minta tautanSistem meminta menunggu beberapa menit (maksimal 3 kali dalam 5 menit)
Email belum terdaftarSistem 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

LangkahYang Dilakukan PelangganData yang DiisiYang Ditampilkan Sistem
1. Klik TautanBuka email konfirmasi, klik "Batalkan Reservasi"Browser membuka halaman pembatalan
2. KonfirmasiLihat detail, isi alasan (opsional), klik konfirmasiAlasan pembatalan (boleh kosong)Detail reservasi + form alasan
3. SelesaiLihat 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

MasalahApa yang Terjadi
Kurang dari 6 jam sebelum jadwalSistem 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

LangkahYang Dilakukan PelangganData yang DiisiYang Ditampilkan Sistem
1. Klik TautanBuka email, klik "Ubah Jadwal"Browser membuka halaman ubah jadwal
2. Lihat Jadwal LamaMelihat info reservasi yang sedang berjalanInfo reservasi saat ini: tanggal, sesi, cabang
3. Pilih Sesi BaruPilih tanggal dan sesi baru yang tersediaKlik tanggal & sesiKalender + indikator ketersediaan slot
4. BandingkanLihat perbandingan jadwal lama dan baruTabel perbandingan: Lama vs Baru
5. SelesaiLihat reservasi yang sudah diperbaruiPesan 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

MasalahApa yang Terjadi
Kurang dari 6 jamSistem menolak perubahan
Sesi baru sudah penuhSesi ditandai merah, tidak bisa dipilih. Pelanggan harus memilih sesi lain
Sudah pernah ubah jadwal"Ubah jadwal hanya bisa dilakukan 1 kali"
Servis sudah dikerjakanTidak 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

LangkahYang Dilakukan StaffData yang DiisiYang Ditampilkan Sistem
1. LoginBuka halaman login backoffice, isi email & passwordEmail staff, passwordForm login dengan logo Jantra Kakikaki
2. MasukSistem memverifikasi, langsung masuk dashboardDashboard + menu sebelah kiri sesuai jabatan

Hak Akses Berdasarkan Jabatan

JabatanMelihat DataMenu yang Tampil
Super AdminSemua cabang (22 cabang)Dashboard, Reservasi, Pelanggan, Master Data, Laporan, Pengguna
Admin CabangHanya cabang tempat bertugasDashboard, Reservasi, Pelanggan, Mekanik, Laporan
CSOHanya cabang tempat bertugasDashboard, 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

MasalahApa 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 menitSistem 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

LangkahYang Dilakukan CSOData yang DiisiYang Ditampilkan Sistem
1. CariCari data reservasi dengan mengetik plat nomor atau namaPlat nomor atau nama pelangganHasil pencarian otomatis saat mengetik
2. VerifikasiCocokkan data di layar dengan kendaraan fisikPengecekan visual: plat, merkDetail: nama, plat, merk, model, paket, sesi
3. Check-inKlik tombol validasiKlik Validasi dan Check-inStatus 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

MasalahApa yang Terjadi
Pelanggan belum reservasi (walk-in)CSO langsung masuk ke form reservasi manual, tanggal otomatis hari ini
Plat nomor tidak ditemukanCSO konfirmasi ulang ke pelanggan, atau langsung buka form reservasi baru
Reservasi sudah check-inSistem menolak — tidak bisa check-in dua kali
Reservasi untuk tanggal berbedaSistem 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

LangkahYang Dilakukan StaffData yang DiisiYang Ditampilkan Sistem
1. Lihat DaftarBuka halaman reservasi, lihat semua reservasi hari iniTabel: ID, jam, nama pelanggan, plat, paket, status
2. PilihKlik baris reservasi yang ingin dikelolaPanel detail di samping atau halaman baru
3. DetailLihat informasi lengkap reservasiStatus, sesi, cabang, data pelanggan, data kendaraan, paket
4. Update StatusPilih tindakan dari tombol yang tersediaKlik Mulai atau SelesaiStatus berubah, toast notifikasi, email ke pelanggan

Alur Perubahan Status

Dikonfirmasi Sedang Dikerjakan Selesai
Dikonfirmasi Dibatalkan (oleh staff, dengan alasan wajib)
Status Saat IniTindakan yang TersediaStatus Baru
DikonfirmasiMulai PengerjaanSedang Dikerjakan
DikonfirmasiBatalkan (wajib isi alasan)Dibatalkan
Sedang DikerjakanSelesaiSelesai
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

MasalahApa yang Terjadi
Mencoba mundurkan statusSelesai tidak bisa kembali ke Sedang Dikerjakan. Tombol tidak muncul.
Staff membatalkan reservasiStaff bisa batalkan kapan saja (tidak terbatas 6 jam). Wajib isi alasan minimal 10 karakter, dan mengetik kata "BATAL" sebagai konfirmasi.
Belum ada reservasi hari iniHalaman menampilkan ilustrasi dan teks "Belum ada reservasi hari ini"
Tabel diperbarui otomatisTabel reservasi diperbarui setiap 60 detik. Bisa dimatikan dengan toggle.