Portal Akun Pelanggan
Flow 5 dari 28 — Phase 2Pelanggan Melihat Dashboard Akun Pribadi
Aktor: Pelanggan (sudah login)
Target: /customer
Syarat: Sudah login dengan Magic Link
flowchart TD
A["Pelanggan sudah login"] --> B["Masuk ke Dashboard Akun"]
B --> C["Lihat ringkasan: Reservasi Mendatang"]
C --> D{Apakah ada reservasi aktif?}
D -->|Ada| E["Tampilkan 1 reservasi terdekat: tanggal, cabang, paket, status"]
D -->|Belum ada| F["Tampilkan ajakan: 'Belum ada reservasi — Reservasi Sekarang'"]
E --> G["Lihat Kendaraan Saya — maks 3"]
F --> G
G --> H["Tombol Aksi Cepat: Reservasi Baru, Kendaraan, Riwayat"]
H --> I["Klik menu samping untuk akses fitur lain"]
I --> J["Dashboard Akun"]
style J fill:#16a34a,color:#fff
style A fill:#7c3aed,color:#fff
Apa yang Ditampilkan di Dashboard
| Bagian | Isi | Kegunaan |
| Sapaan | "Halo, Budi Santoso!" | Personalisasi — pelanggan merasa dikenali |
| Reservasi Mendatang | Kartu berisi: tanggal, jam, cabang, paket, status | Pelanggan langsung tahu kapan servis berikutnya |
| Kendaraan Saya | Daftar singkat 3 kendaraan teratas | Akses cepat — tidak perlu isi ulang data kendaraan |
| Aksi Cepat | Tombol: Reservasi Baru, Kendaraan, Riwayat | Navigasi cepat ke fitur utama |
| Menu Samping | Dashboard, Kendaraan Saya, Riwayat Reservasi, Profil, Keluar | Navigasi lengkap ke semua fitur akun |
📖 Cerita Contoh
Budi baru saja login. Dashboard langsung menyapanya "Halo, Budi!". Di bagian atas, muncul kartu reservasi mendatang: 20 Juni, sesi siang, Cabang Jakarta Pusat, Spooring & Balancing. Di bawahnya ada daftar kendaraannya: Toyota Avanza dan Honda HR-V. Budi bisa langsung klik "Reservasi Baru" untuk booking servis berikutnya.
⚠ Jika Belum Ada Data
| Keadaan | Apa yang Terjadi |
| Belum ada reservasi | Menampilkan ilustrasi + "Belum ada reservasi" + tombol Reservasi Sekarang |
| Belum ada kendaraan | Menampilkan "Tambahkan kendaraan pertama Anda" + tombol Tambah |
Flow 6 dari 28 — Phase 2Pelanggan Mengelola Data Kendaraan
Aktor: Pelanggan (sudah login)
Maksimal: 10 kendaraan per akun
CRUD: Tambah, Edit, Hapus
flowchart TD
A["Buka menu Kendaraan Saya"] --> B["Lihat daftar kendaraan — kartu"]
B --> C{Pilih tindakan}
C -->|Tambah| D["Klik Tambah Kendaraan"]
C -->|Edit| E["Klik ikon Edit di kartu"]
C -->|Hapus| F["Klik ikon Hapus di kartu"]
D --> G["Isi form: plat, merk, model, tahun, CC, VIN, warna"]
G --> H["Klik Simpan"]
H --> I["Kendaraan baru tersimpan"]
E --> J["Ubah data yang perlu diperbarui"]
J --> H
F --> K{Terkait reservasi aktif?}
K -->|Ya| L["Tidak bisa dihapus — kendaraan sedang digunakan"]
K -->|Tidak| M["Konfirmasi: Yakin hapus kendaraan ini?"]
M --> N["Kendaraan dihapus"]
style I fill:#16a34a,color:#fff
style N fill:#16a34a,color:#fff
style L fill:#dc2626,color:#fff
Data yang Disimpan per Kendaraan
| Data | Wajib? | Keterangan |
| Plat Nomor | ✅ Wajib | Otomatis jadi huruf kapital. Format: B 1234 ABC |
| Merk | ✅ Wajib | Contoh: Toyota, Honda, Daihatsu |
| Model / Tipe | ✅ Wajib | Contoh: Avanza, HR-V, Xenia |
| Tahun | ✅ Wajib | 1970 sampai tahun sekarang |
| CC / Isi Silinder | ❌ Opsional | Contoh: 1500 |
| VIN / Nomor Rangka | ❌ Opsional | 17 digit, otomatis huruf kapital |
| Warna | ❌ Opsional | Contoh: Putih, Hitam Metalik |
📖 Cerita Contoh
Dewi memiliki 2 mobil: Honda HR-V dan Toyota Innova. Ia buka menu Kendaraan Saya, klik Tambah Kendaraan. Isi plat B 5678 DEF, merk Toyota, model Innova, tahun 2019. Klik Simpan. Sekarang dua mobilnya tersimpan. Saat reservasi nanti, Dewi tinggal pilih mobil mana yang mau diservis — tidak perlu isi ulang.
⚠ Jika Terjadi Masalah
| Masalah | Apa yang Terjadi |
| Plat nomor sudah terdaftar | "Plat nomor ini sudah terdaftar di akun Anda" |
| Sudah mencapai 10 kendaraan | "Maksimal 10 kendaraan per akun. Hapus kendaraan lama untuk menambah baru." |
| Kendaraan sedang direservasi | Tidak bisa dihapus — kendaraan sedang dalam reservasi aktif |
Flow 7 dari 28 — Phase 2Pelanggan Melihat Riwayat Reservasi
Aktor: Pelanggan (sudah login)
Target: /customer/riwayat
Fitur: Filter status, tanggal, urutkan
flowchart TD
A["Buka menu Riwayat Reservasi"] --> B["Lihat daftar semua reservasi"]
B --> C{Gunakan filter?}
C -->|Filter Status| D["Pilih: Semua / Dikonfirmasi / Dikerjakan / Selesai / Dibatalkan"]
C -->|Filter Tanggal| E["Pilih rentang tanggal"]
C -->|Tidak| F["Lihat semua, urutan terbaru"]
D --> G["Tabel terfilter"]
E --> G
F --> G
G --> H["Klik salah satu reservasi"]
H --> I["Lihat Detail Lengkap: status, cabang, paket, kendaraan, mekanik, catatan"]
I --> J{Tindakan dari detail}
J -->|Batalkan| K["Buka halaman pembatalan"]
J -->|Ubah Jadwal| L["Buka halaman ubah jadwal"]
J -->|Kembali| G
style I fill:#1d4ed8,color:#fff
Informasi yang Ditampilkan
| Di Halaman Daftar | Di Halaman Detail |
| Tanggal reservasi | Semua info daftar + status lengkap dengan progress |
| Status (badge warna) | Nama cabang, alamat, telepon |
| Nama cabang | Detail paket: nama, item, estimasi, harga |
| Plat nomor kendaraan | Data kendaraan lengkap |
| Nama paket layanan | Nama mekanik yang mengerjakan (jika sudah assigned) |
| Jam sesi | Linimasa pengerjaan (catatan mekanik) |
| — | Tombol Batalkan / Ubah Jadwal (jika masih bisa) |
📖 Cerita Contoh
Dewi ingin tahu kapan terakhir kali ia servis shock absorber. Ia buka Riwayat Reservasi. Daftar menampilkan 12 reservasi sebelumnya. Ia filter status Selesai. Klik reservasi 3 bulan lalu — detailnya muncul: servis dilakukan di Cabang Surabaya, mekanik Agus yang mengerjakan, ada catatan "Shock depan kanan diganti". Dewi jadi tahu persis riwayat mobilnya.
⚠ Jika Terjadi Masalah
| Keadaan | Apa yang Terjadi |
| Belum ada riwayat | Ilustrasi + "Belum ada riwayat reservasi" + tombol Reservasi Sekarang |
| Reservasi sudah selesai / dibatalkan | Tombol Batalkan dan Ubah Jadwal tidak muncul (hanya untuk status Dikonfirmasi) |
Flow 8 dari 28 — Phase 2Pelanggan Membatalkan atau Mengubah Jadwal dari Portal
Aktor: Pelanggan (sudah login)
Syarat: Status masih "Dikonfirmasi" & H-6 jam
Perbedaan: Tidak perlu buka email — semua dari dashboard
flowchart TD
A["Buka Riwayat > Klik reservasi"] --> B["Halaman Detail Reservasi"]
B --> C{Pilih tindakan}
C -->|Batalkan| D["Tulis alasan — opsional"]
C -->|Ubah Jadwal| E["Pilih sesi baru dari kalender"]
C -->|Kembali| A
D --> F["Klik Konfirmasi Pembatalan"]
F --> G["Reservasi dibatalkan — slot dikembalikan"]
E --> H["Bandingkan jadwal Lama vs Baru"]
H --> I["Klik Konfirmasi Perubahan"]
I --> J["Jadwal diperbarui — slot lama dikembalikan"]
G --> K["Email notifikasi otomatis"]
J --> K
style G fill:#dc2626,color:#fff
style J fill:#16a34a,color:#fff
Perbedaan dengan Phase 1 (via Email)
| Aspek | Phase 1 (via Email) | Phase 2 (via Portal) |
| Cara akses | Harus buka email, cari tautan | Langsung dari Dashboard Akun |
| Login | Tidak perlu login | Harus sudah login |
| Riwayat | Tidak ada | Bisa lihat semua riwayat reservasi |
| Kemudahan | Harus menyimpan email | Semua di satu tempat — Dashboard Akun |
📖 Cerita Contoh
Dewi login ke akunnya. Di dashboard, ia melihat reservasi besok untuk Honda HR-V. Ada keperluan mendadak. Ia klik reservasi itu, lalu klik Ubah Jadwal. Pilih tanggal 3 hari kemudian, sesi yang masih tersedia. Bandingkan jadwal lama vs baru. Klik Konfirmasi. Beres. Semua dilakukan dari dashboard tanpa perlu mencari-cari email lama.
⚠ Batasan
| Batasan | Keterangan |
| Hanya untuk status Dikonfirmasi | Jika sudah Dikerjakan atau Selesai, tombol tidak muncul |
| Maksimal H-6 jam | Sama seperti via email — tidak bisa mendadak |
| Maksimal 1 kali ubah jadwal | Mencegah penyalahgunaan |
Flow 9 dari 28 — Phase 2Sistem Otomatis Mengenali Pelanggan Lama (Auto-Fill)
Aktor: Sistem (otomatis) dibantu Pelanggan
Pemicu: Pelanggan login, atau mengisi nomor HP di form reservasi
flowchart TD
A["Pelanggan mulai isi form reservasi"] --> B{Apelanggan sudah login?}
B -->|Sudah login| C["Otomatis tampilkan pilihan kendaraan dari akun"]
B -->|Belum login| D["Pelanggan mengisi nomor HP"]
C --> E["Pelanggan pilih kendaraan dari daftar"]
D --> F["Sistem mencari di database: nomor HP dikenal?"]
F -->|Dikenal| G["Otomatis isi nama, email, alamat"]
F -->|Belum dikenal| H["Pelanggan isi data diri seperti biasa"]
E --> I["Data kendaraan otomatis terisi lengkap"]
G --> J["Notifikasi: Data diisi dari riwayat Anda"]
I --> K["Form siap — 70% lebih cepat"]
J --> K
H --> K
style K fill:#16a34a,color:#fff
style J fill:#7c3aed,color:#fff
Apa yang Otomatis Terisi
| Kondisi | Data yang Otomatis Terisi | Efek ke Pelanggan |
| Pelanggan login + pilih kendaraan | Semua data kendaraan: plat, merk, model, tahun, CC, VIN, warna | Tidak perlu isi form kendaraan sama sekali |
| Pelanggan login (tanpa pilih kendaraan) | Data diri: nama, email, alamat, nomor HP | Hanya perlu isi data kendaraan |
| Pelanggan belum login, HP dikenal | Nama, email (tersamar), alamat, kendaraan terakhir | Form terisi 50% otomatis |
| Pelanggan baru (HP tidak dikenal) | Tidak ada — isi manual | Proses normal seperti Phase 1 |
📖 Cerita Contoh
Dewi sudah login. Ia klik Reservasi Baru. Di langkah form, sistem otomatis menampilkan daftar kendaraannya: Honda HR-V dan Toyota Innova. Dewi pilih Honda HR-V. Semua data kendaraan otomatis terisi. Nama, nomor HP, dan alamatnya juga sudah terisi. Dewi hanya perlu pilih tipe pekerjaan dan tulis keluhan (jika ada). Proses yang tadinya 5 menit sekarang hanya 1 menit.
Layanan CSO
Flow 13 dari 28 — Phase 2CSO Membuat Reservasi Manual untuk Pelanggan
Aktor: CSO / Admin Cabang
Langkah: 5 langkah
Waktu: ± 2 menit (pelanggan lama), ± 3 menit (pelanggan baru)
Kegunaan: Pelanggan walk-in atau telepon
flowchart TD
A["CSO buka menu Reservasi Baru"] --> B["Langkah 1: Cari atau Buat Pelanggan"]
B --> C{Pelanggan dikenal?}
C -->|Ya| D["Klik dari hasil pencarian — data otomatis terisi"]
C -->|Tidak| E["Isi form data pelanggan baru: nama, HP"]
D --> F["Langkah 2: Pilih Kendaraan"]
E --> F
F --> G{Kendaraan dikenal?}
G -->|Ya| H["Pilih kendaraan dari daftar yang sudah ada"]
G -->|Tidak| I["Isi form kendaraan baru: plat, merk, model, tahun"]
H --> J["Langkah 3: Pilih Cabang, Paket, Jadwal"]
I --> J
J --> K["Langkah 4: Detail Pekerjaan"]
K --> L["Langkah 5: Ringkasan dan Konfirmasi"]
L --> M["Klik Simpan Reservasi"]
M --> N["Reservasi tersimpan — pilihan langsung assign mekanik"]
style N fill:#16a34a,color:#fff
style M fill:#7c3aed,color:#fff
Rincian Setiap Langkah
| Langkah | Yang Dilakukan CSO | Data yang Diisi |
| 1. Cari Pelanggan | Ketik nama, nomor HP, atau plat — pilih dari hasil | Kata kunci pencarian |
| 2. Pilih Kendaraan | Pilih dari daftar kendaraan pelanggan, atau tambah baru | Plat, merk, model, tahun (jika baru) |
| 3. Pilih Jadwal | Pilih cabang, paket, tanggal, sesi (dari dropdown) | Klik pilihan dari dropdown |
| 4. Detail | Tentukan tipe pekerjaan (Baru/Garansi), tulis keluhan | Tipe pekerjaan, keluhan |
| 5. Konfirmasi | Periksa ringkasan, klik Simpan | — |
📖 Cerita Contoh
Seorang pelanggan menelepon ke cabang. Siska (CSO) buka menu Reservasi Baru. Ia ketik nomor HP pelanggan — sistem langsung menampilkan data pelanggan tersebut. Siska pilih kendaraan si pelanggan (Toyota Avanza). Pilih paket Spooring, pilih sesi yang tersedia. Tulis keluhan "Setir terasa berat". Klik Simpan. Reservasi tersimpan — pelanggan tinggal datang sesuai jadwal. Semua selesai dalam 2 menit selama di telepon.
⚠ Jika Terjadi Masalah
| Masalah | Apa yang Terjadi |
| Pelanggan belum ada di database | CSO isi form singkat: nama + nomor HP (cukup 2 field) |
| Slot penuh | Sesi tidak muncul di dropdown pilihan |