From 4ba89a1aeabff8acc32614657b123958736bdff2 Mon Sep 17 00:00:00 2001 From: ardhikaxx Date: Wed, 25 Feb 2026 08:24:31 +0700 Subject: [PATCH] docs(flowcharts): tambah dokumentasi flowchart lengkap per fitur - Tambah 11 file flowchart untuk semua fitur sistem - Auth: login, register, logout - Tiket: pembelian, upload bukti, download - Booking: buat booking, cek tanggal, upload bukti - Admin: verifikasi pembayaran, manajemen tiket, manajemen admin - QR Scanner: scan QR, input manual, verifikasi - Dashboard: statistik, chart penjualan - Bank Account: CRUD rekening bank - User: riwayat tiket/booking, profil - Tambah README.md dengan panduan lengkap Draw.io - Format ASCII flowchart siap digunakan untuk visualisasi --- flowcharts/README.md | 210 ++++++++++ flowcharts/admin-management-flowchart.md | 376 +++++++++++++++++ flowcharts/auth-flowchart.md | 203 ++++++++++ flowcharts/bank-account-flowchart.md | 293 ++++++++++++++ flowcharts/booking-flowchart.md | 344 ++++++++++++++++ flowcharts/dashboard-flowchart.md | 401 +++++++++++++++++++ flowcharts/payment-verification-flowchart.md | 360 +++++++++++++++++ flowcharts/qr-scanner-flowchart.md | 287 +++++++++++++ flowcharts/ticket-management-flowchart.md | 298 ++++++++++++++ flowcharts/ticket-purchase-flowchart.md | 300 ++++++++++++++ flowcharts/user-history-flowchart.md | 345 ++++++++++++++++ flowcharts/user-profile-flowchart.md | 233 +++++++++++ 12 files changed, 3650 insertions(+) create mode 100644 flowcharts/README.md create mode 100644 flowcharts/admin-management-flowchart.md create mode 100644 flowcharts/auth-flowchart.md create mode 100644 flowcharts/bank-account-flowchart.md create mode 100644 flowcharts/booking-flowchart.md create mode 100644 flowcharts/dashboard-flowchart.md create mode 100644 flowcharts/payment-verification-flowchart.md create mode 100644 flowcharts/qr-scanner-flowchart.md create mode 100644 flowcharts/ticket-management-flowchart.md create mode 100644 flowcharts/ticket-purchase-flowchart.md create mode 100644 flowcharts/user-history-flowchart.md create mode 100644 flowcharts/user-profile-flowchart.md diff --git a/flowcharts/README.md b/flowcharts/README.md new file mode 100644 index 0000000..718f011 --- /dev/null +++ b/flowcharts/README.md @@ -0,0 +1,210 @@ +# Flowchart Dokumentasi - Banyu Biru Ticketing & Booking System + +Dokumentasi flowchart lengkap untuk setiap fitur dalam sistem. Setiap file berisi flowchart detail yang dapat digunakan untuk membuat diagram di Draw.io. + +## πŸ“‹ Daftar Flowchart + +### 1. Autentikasi +**File:** [auth-flowchart.md](auth-flowchart.md) + +Fitur yang didokumentasikan: +- Login (User & Admin) +- Register (User Baru) +- Logout (dengan konfirmasi SweetAlert) + +--- + +### 2. Pembelian Tiket +**File:** [ticket-purchase-flowchart.md](ticket-purchase-flowchart.md) + +Fitur yang didokumentasikan: +- Lihat Daftar Tiket +- Beli Tiket (dengan generate QR code) +- Upload Bukti Pembayaran +- Download Tiket (berdasarkan status) + +--- + +### 3. Booking Pendopo +**File:** [booking-flowchart.md](booking-flowchart.md) + +Fitur yang didokumentasikan: +- Lihat Halaman Booking +- Cek Ketersediaan Tanggal (AJAX) +- Buat Booking +- Upload Bukti Pembayaran Booking +- Lihat Status Booking + +--- + +### 4. Verifikasi Pembayaran Admin +**File:** [payment-verification-flowchart.md](payment-verification-flowchart.md) + +Fitur yang didokumentasikan: +- Lihat Daftar Order Tiket +- Lihat Detail Order Tiket +- Konfirmasi Pembayaran Tiket +- Tolak Pembayaran Tiket +- Verifikasi Pembayaran Booking + +--- + +### 5. QR Scanner Verifikasi Tiket +**File:** [qr-scanner-flowchart.md](qr-scanner-flowchart.md) + +Fitur yang didokumentasikan: +- Scan QR Code Tiket (menggunakan kamera) +- Input Manual Kode Tiket +- Verifikasi Tiket +- Tandai Tiket Sebagai Dipakai + +--- + +### 6. Manajemen Tiket Admin +**File:** [ticket-management-flowchart.md](ticket-management-flowchart.md) + +Fitur yang didokumentasikan: +- Lihat Daftar Tiket +- Tambah Tiket Baru +- Edit Tiket +- Hapus Tiket +- Toggle Status Aktif Tiket + +--- + +### 7. Manajemen Admin +**File:** [admin-management-flowchart.md](admin-management-flowchart.md) + +Fitur yang didokumentasikan: +- Lihat Daftar Admin +- Tambah Admin Baru +- Edit Admin +- Hapus Admin +- Edit Profil Admin + +--- + +### 8. Dashboard & Statistik +**File:** [dashboard-flowchart.md](dashboard-flowchart.md) + +Fitur yang didokumentasikan: +- Tampilkan Dashboard Admin +- Hitung Total Tiket Terjual +- Hitung Penjualan Bulan Ini +- Hitung Total Pendapatan +- Generate Chart Penjualan +- Tampilkan Order Terbaru +- Tampilkan Booking Terbaru + +--- + +### 9. Manajemen Rekening Bank +**File:** [bank-account-flowchart.md](bank-account-flowchart.md) + +Fitur yang didokumentasikan: +- Lihat Daftar Rekening Bank +- Tambah Rekening Bank +- Edit Rekening Bank +- Hapus Rekening Bank +- Toggle Status Aktif Rekening + +--- + +### 10. Riwayat User +**File:** [user-history-flowchart.md](user-history-flowchart.md) + +Fitur yang didokumentasikan: +- Lihat Riwayat Tiket +- Lihat Riwayat Booking +- Lihat Detail Tiket dari Riwayat +- Lihat Detail Booking dari Riwayat + +--- + +### 11. Profil User +**File:** [user-profile-flowchart.md](user-profile-flowchart.md) + +Fitur yang didokumentasikan: +- Lihat Profil User +- Edit Profil User +- Ubah Password User + +--- + +## 🎨 Panduan Umum Draw.io + +### Simbol Flowchart Standar +- **Terminator (Oval)** - START/END +- **Process (Rectangle)** - Proses/aksi +- **Decision (Diamond)** - Kondisi/percabangan +- **Data (Parallelogram)** - Input/Output +- **Database (Cylinder)** - Operasi database +- **Document (Rectangle with wavy bottom)** - Form/dokumen +- **Loop (Hexagon)** - Perulangan +- **Predefined Process (Rectangle with double lines)** - Subprocess + +### Palet Warna Konsisten +``` +START/END: #14B8A6 (Teal) +Process: #E3F2FD (Biru Muda) +Decision: #FFF59D (Kuning) +Database Operation: #E1BEE7 (Ungu Muda) +Form: #BBDEFB (Biru Tua Muda) +Create: #C8E6C9 (Hijau Muda) +Update: #B3E5FC (Biru Muda) +Delete: #FFCDD2 (Merah Muda) +Success: #C8E6C9 (Hijau Muda) +Error: #FFCDD2 (Merah Muda) +Warning: #FFF9C4 (Kuning Muda) +Loop: #FFE0B2 (Oranye Muda) +Security Check: #FFE0B2 (Oranye Muda) +``` + +### Tips Membuat Diagram +1. **Gunakan Swimlane** untuk memisahkan actor (User, Admin, System, Database) +2. **Konsisten dengan warna** untuk memudahkan identifikasi jenis proses +3. **Label yang jelas** pada setiap decision branch (YES/NO) +4. **Spacing yang rapi** antar simbol untuk readability +5. **Connector yang jelas** dengan arrow yang tepat +6. **Notes/Comments** untuk penjelasan kompleks +7. **Vertical flow** (top to bottom) untuk kemudahan membaca + +### Langkah Membuat di Draw.io +1. Buka [draw.io](https://app.diagrams.net/) +2. Pilih "Create New Diagram" +3. Pilih template "Flowchart" atau "Blank" +4. Drag & drop simbol dari panel kiri +5. Gunakan connector tool untuk menghubungkan simbol +6. Atur warna sesuai panduan di atas +7. Export sebagai PNG/PDF/SVG + +--- + +## πŸ“Š Statistik Dokumentasi + +- **Total Flowchart Files**: 11 +- **Total Fitur Terdokumentasi**: 50+ +- **Format**: Markdown dengan ASCII flowchart +- **Kompatibilitas**: Draw.io, Lucidchart, Visio + +--- + +## πŸ”„ Update History + +- **25 Februari 2026**: Pembuatan dokumentasi lengkap untuk semua fitur sistem + +--- + +## πŸ“ Catatan + +- Setiap flowchart sudah disesuaikan dengan implementasi aktual di kode +- Status order/booking: `pending`, `confirmed`, `rejected` +- Kode unik format: `AT-XXXXX` (tiket), `AB-XXXXX` (booking) +- Semua flowchart sudah termasuk validasi dan error handling +- Security checks sudah didokumentasikan (password hashing, authorization, dll) + +--- + +**Sistem**: Banyu Biru Ticketing & Booking System +**Dibuat**: 25 Februari 2026 +**Versi**: 1.0 diff --git a/flowcharts/admin-management-flowchart.md b/flowcharts/admin-management-flowchart.md new file mode 100644 index 0000000..582fd8a --- /dev/null +++ b/flowcharts/admin-management-flowchart.md @@ -0,0 +1,376 @@ +# Flowchart - Fitur Manajemen Admin + +## Daftar Isi +1. [Lihat Daftar Admin](#1-lihat-daftar-admin) +2. [Tambah Admin Baru](#2-tambah-admin-baru) +3. [Edit Admin](#3-edit-admin) +4. [Hapus Admin](#4-hapus-admin) +5. [Edit Profil Admin](#5-edit-profil-admin) + +--- + +## 1. Lihat Daftar Admin + +### Deskripsi +Flowchart untuk admin melihat daftar semua admin. + +### Flowchart + +``` +START + ↓ +{User sudah login?} + β”œβ”€ NO β†’ [Redirect ke halaman login] β†’ END + └─ YES ↓ + ↓ +{User adalah admin?} + β”œβ”€ NO β†’ [Error 403: Unauthorized] β†’ END + └─ YES ↓ + ↓ +[Admin mengakses menu "Admin"] + ↓ +[Query database: ambil users dengan role 'admin'] + ↓ +[Urutkan berdasarkan nama] + ↓ +[Tampilkan tabel admin:] + - Nama + - Email + - Tanggal Dibuat + - Aksi (Edit, Hapus) + ↓ +[Tampilkan tombol "Tambah Admin"] + ↓ +END +``` + +--- + +## 2. Tambah Admin Baru + +### Deskripsi +Flowchart untuk menambah admin baru ke sistem. + +### Flowchart + +``` +START + ↓ +[Admin di halaman daftar admin] + ↓ +[Admin klik tombol "Tambah Admin"] + ↓ +[Redirect ke halaman form tambah admin] + ↓ +[Tampilkan form:] + - Nama + - Email + - Password + - Konfirmasi Password + ↓ +[Admin mengisi form] + ↓ +[Admin klik tombol "Simpan"] + ↓ + + ↓ +{Nama terisi?} + β”œβ”€ NO β†’ [Error: "Nama wajib diisi"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Format email valid?} + β”œβ”€ NO β†’ [Error: "Format email tidak valid"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +[Query database: cek email sudah terdaftar] + ↓ +{Email sudah ada?} + β”œβ”€ YES β†’ [Error: "Email sudah terdaftar"] β†’ [Kembali ke form] β†’ END + └─ NO ↓ + ↓ +{Password minimal 8 karakter?} + β”œβ”€ NO β†’ [Error: "Password minimal 8 karakter"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Password = Konfirmasi Password?} + β”œβ”€ NO β†’ [Error: "Konfirmasi password tidak cocok"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +[Hash password menggunakan bcrypt] + ↓ +[Simpan data ke tabel users:] + - name + - email + - password (hashed) + ↓ +[Assign role 'admin' ke user baru] + ↓ +[Tampilkan notifikasi sukses:] + "Admin berhasil ditambahkan" + ↓ +[Redirect ke halaman daftar admin] + ↓ +END +``` + + +--- + +## 3. Edit Admin + +### Deskripsi +Flowchart untuk mengedit data admin. + +### Flowchart + +``` +START + ↓ +[Admin di halaman daftar admin] + ↓ +[Admin klik tombol "Edit" pada admin] + ↓ +[Query database: ambil user berdasarkan ID] + ↓ +{User ditemukan?} + β”œβ”€ NO β†’ [Error 404: Admin tidak ditemukan] β†’ END + └─ YES ↓ + ↓ +{User memiliki role 'admin'?} + β”œβ”€ NO β†’ [Error: "User bukan admin"] β†’ END + └─ YES ↓ + ↓ +[Redirect ke halaman form edit admin] + ↓ +[Tampilkan form dengan data admin:] + - Nama (terisi) + - Email (terisi) + - Password (kosong, opsional) + - Konfirmasi Password (kosong, opsional) + ↓ +[Admin mengubah data] + ↓ +[Admin klik tombol "Update"] + ↓ + + ↓ +{Nama terisi?} + β”œβ”€ NO β†’ [Error: "Nama wajib diisi"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Format email valid?} + β”œβ”€ NO β†’ [Error: "Format email tidak valid"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +[Query: cek email sudah digunakan user lain] + ↓ +{Email digunakan user lain?} + β”œβ”€ YES β†’ [Error: "Email sudah terdaftar"] β†’ [Kembali ke form] β†’ END + └─ NO ↓ + ↓ +{Password diisi?} + β”œβ”€ YES β†’ {Password minimal 8 karakter?} + β”‚ β”œβ”€ NO β†’ [Error: "Password minimal 8 karakter"] β†’ [Kembali ke form] β†’ END + β”‚ └─ YES ↓ + β”‚ ↓ + β”‚ {Password = Konfirmasi Password?} + β”‚ β”œβ”€ NO β†’ [Error: "Konfirmasi password tidak cocok"] β†’ [Kembali ke form] β†’ END + β”‚ └─ YES ↓ + β”‚ ↓ + β”‚ [Hash password baru] + β”‚ ↓ + β”‚ [Update dengan password baru] + β”‚ + └─ NO β†’ [Update tanpa mengubah password] + ↓ +[Update tabel users:] + - name + - email + - password (jika diisi) + ↓ +[Simpan perubahan ke database] + ↓ +[Tampilkan notifikasi sukses:] + "Admin berhasil diupdate" + ↓ +[Redirect ke halaman daftar admin] + ↓ +END +``` + +--- + +## 4. Hapus Admin + +### Deskripsi +Flowchart untuk menghapus admin dari sistem. + +### Flowchart + +``` +START + ↓ +[Admin di halaman daftar admin] + ↓ +[Admin klik tombol "Hapus" pada admin] + ↓ +[Tampilkan konfirmasi SweetAlert:] + "Yakin ingin menghapus admin ini?" + ↓ +{Admin konfirmasi?} + β”œβ”€ NO (Batal) β†’ [Tutup dialog] β†’ END + └─ YES ↓ + ↓ +[Query database: ambil user berdasarkan ID] + ↓ +{User ditemukan?} + β”œβ”€ NO β†’ [Error: "Admin tidak ditemukan"] β†’ END + └─ YES ↓ + ↓ +{User adalah admin yang sedang login?} + β”œβ”€ YES β†’ [Error: "Tidak dapat menghapus akun sendiri"] + β”‚ ↓ + β”‚ END + └─ NO ↓ + ↓ +[Cek apakah admin pernah melakukan verifikasi] + ↓ +[Query: cek ticket_orders dengan confirmed_by = admin_id] + ↓ +[Query: cek bookings dengan confirmed_by = admin_id] + ↓ +{Admin pernah verifikasi transaksi?} + β”œβ”€ YES β†’ [Error: "Admin tidak dapat dihapus karena ada riwayat verifikasi"] + β”‚ ↓ + β”‚ [Sarankan: nonaktifkan akun saja] + β”‚ ↓ + β”‚ END + └─ NO ↓ + ↓ +[Hapus role 'admin' dari user] + ↓ +[Hapus user dari database] + ↓ +[Tampilkan notifikasi sukses:] + "Admin berhasil dihapus" + ↓ +[Refresh halaman daftar admin] + ↓ +END +``` + +--- + +## 5. Edit Profil Admin + +### Deskripsi +Flowchart untuk admin mengedit profil sendiri. + +### Flowchart + +``` +START + ↓ +[Admin mengakses menu "Profil"] + ↓ +[Query database: ambil data admin yang login] + ↓ +[Tampilkan halaman profil] + ↓ +[Tampilkan form dengan data admin:] + - Nama (terisi) + - Email (terisi) + - Nomor Telepon (terisi/kosong) + - Alamat (terisi/kosong) + - Password Baru (kosong, opsional) + - Konfirmasi Password (kosong, opsional) + ↓ +[Admin mengubah data] + ↓ +[Admin klik tombol "Update Profil"] + ↓ + + ↓ +{Nama terisi?} + β”œβ”€ NO β†’ [Error: "Nama wajib diisi"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Format email valid?} + β”œβ”€ NO β†’ [Error: "Format email tidak valid"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +[Query: cek email sudah digunakan user lain] + ↓ +{Email digunakan user lain?} + β”œβ”€ YES β†’ [Error: "Email sudah terdaftar"] β†’ [Kembali ke form] β†’ END + └─ NO ↓ + ↓ +{Password baru diisi?} + β”œβ”€ YES β†’ {Password minimal 8 karakter?} + β”‚ β”œβ”€ NO β†’ [Error: "Password minimal 8 karakter"] β†’ [Kembali ke form] β†’ END + β”‚ └─ YES ↓ + β”‚ ↓ + β”‚ {Password = Konfirmasi Password?} + β”‚ β”œβ”€ NO β†’ [Error: "Konfirmasi password tidak cocok"] β†’ [Kembali ke form] β†’ END + β”‚ └─ YES ↓ + β”‚ ↓ + β”‚ [Hash password baru] + β”‚ ↓ + β”‚ [Update dengan password baru] + β”‚ + └─ NO β†’ [Update tanpa mengubah password] + ↓ +[Update tabel users:] + - name + - email + - phone (jika diisi) + - address (jika diisi) + - password (jika diisi) + ↓ +[Simpan perubahan ke database] + ↓ +[Update session dengan data baru] + ↓ +[Tampilkan notifikasi sukses:] + "Profil berhasil diupdate" + ↓ +[Refresh halaman profil] + ↓ +END +``` + +--- + +## Panduan Membuat di Draw.io + +### Simbol Flowchart +1. **Terminator** (Oval) - START/END +2. **Process** (Rectangle) - Proses/aksi +3. **Decision** (Diamond) - Kondisi/percabangan +4. **Data** (Parallelogram) - Input/Output +5. **Database** (Cylinder) - Operasi database +6. **Document** (Rectangle with wavy bottom) - Form + +### Warna yang Disarankan +- **START/END**: Hijau teal (#14B8A6) +- **Process**: Biru muda (#E3F2FD) +- **Decision**: Kuning (#FFF59D) +- **Database Operation**: Ungu muda (#E1BEE7) +- **Form**: Biru tua muda (#BBDEFB) +- **Create**: Hijau muda (#C8E6C9) +- **Update**: Biru muda (#B3E5FC) +- **Delete**: Merah muda (#FFCDD2) +- **Security Check**: Oranye muda (#FFE0B2) + +### Tips +- Gunakan swimlane untuk memisahkan Admin dan System +- Tandai operasi CRUD dengan warna berbeda +- Gunakan connector yang jelas untuk decision branch +- Tambahkan notes untuk security checks penting +- Highlight proses hashing password + +--- + +**Dibuat**: 25 Februari 2026 +**Fitur**: Manajemen Admin +**Sistem**: Banyu Biru Ticketing & Booking System diff --git a/flowcharts/auth-flowchart.md b/flowcharts/auth-flowchart.md new file mode 100644 index 0000000..07e897c --- /dev/null +++ b/flowcharts/auth-flowchart.md @@ -0,0 +1,203 @@ +# Flowchart - Fitur Autentikasi + +## Daftar Isi +1. [Login](#1-login) +2. [Register](#2-register) +3. [Logout](#3-logout) + +--- + +## 1. Login + +### Deskripsi +Flowchart untuk proses login user dan admin ke sistem. + +### Flowchart + +``` +START + ↓ +[User mengakses halaman login] + ↓ +[Tampilkan form login] + ↓ +[User input email dan password] + ↓ +[User klik tombol Login] + ↓ + + ↓ +{Email valid?} + β”œβ”€ NO β†’ [Tampilkan error: "Format email salah"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ + + ↓ +{Password terisi?} + β”œβ”€ NO β†’ [Tampilkan error: "Password wajib diisi"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +[Query database: cari user berdasarkan email] + ↓ +{User ditemukan?} + β”œβ”€ NO β†’ [Tampilkan error: "Email tidak terdaftar"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +[Ambil data user dari database] + ↓ +[Verifikasi password dengan hash] + ↓ +{Password cocok?} + β”œβ”€ NO β†’ [Tampilkan error: "Password salah"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +[Buat session untuk user] + ↓ +[Simpan data user ke session] + ↓ +[Cek role user] + ↓ +{Role = Admin?} + β”œβ”€ YES β†’ [Redirect ke /admin/dashboard] + β”‚ ↓ + β”‚ [Tampilkan dashboard admin] + β”‚ ↓ + β”‚ END + β”‚ + └─ NO (User) β†’ [Redirect ke /] + ↓ + [Tampilkan halaman beranda] + ↓ + END +``` + +### Simbol yang Digunakan +- `[ ]` = Proses/Action +- `{ }` = Decision/Kondisi +- `< >` = Subprocess +- `β†’` = Flow direction +- `↓` = Flow continuation + +--- + +## 2. Register + +### Deskripsi +Flowchart untuk proses registrasi user baru. + +### Flowchart + +``` +START + ↓ +[User mengakses halaman register] + ↓ +[Tampilkan form registrasi] + ↓ +[User input: nama, email, password, password confirmation] + ↓ +[User klik tombol Register] + ↓ + + ↓ +{Nama terisi?} + β”œβ”€ NO β†’ [Error: "Nama wajib diisi"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Format email valid?} + β”œβ”€ NO β†’ [Error: "Format email salah"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +[Query database: cek email sudah terdaftar] + ↓ +{Email sudah ada?} + β”œβ”€ YES β†’ [Error: "Email sudah terdaftar"] β†’ [Kembali ke form] β†’ END + └─ NO ↓ + ↓ +{Password minimal 8 karakter?} + β”œβ”€ NO β†’ [Error: "Password minimal 8 karakter"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Password = Password Confirmation?} + β”œβ”€ NO β†’ [Error: "Konfirmasi password tidak cocok"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +[Hash password menggunakan bcrypt] + ↓ +[Simpan data user ke database] + ↓ +[Assign role "user" ke user baru] + ↓ +[Buat session untuk user] + ↓ +[Tampilkan notifikasi sukses] + ↓ +[Redirect ke halaman beranda] + ↓ +END +``` + +--- + +## 3. Logout + +### Deskripsi +Flowchart untuk proses logout user/admin dari sistem. + +### Flowchart + +``` +START + ↓ +[User klik tombol Logout] + ↓ +[Tampilkan konfirmasi SweetAlert] + ↓ +{User konfirmasi logout?} + β”œβ”€ NO (Batal) β†’ [Tutup dialog] β†’ END + └─ YES ↓ + ↓ +[Tampilkan loading "Logging out..."] + ↓ +[Hapus session user] + ↓ +[Hapus remember token] + ↓ +[Clear authentication] + ↓ +[Redirect ke halaman login] + ↓ +[Tampilkan pesan "Berhasil logout"] + ↓ +END +``` + +--- + +## Panduan Membuat di Draw.io + +### Simbol Flowchart +1. **Terminator** (Oval) - START/END +2. **Process** (Rectangle) - Proses/aksi +3. **Decision** (Diamond) - Kondisi/percabangan +4. **Data** (Parallelogram) - Input/Output +5. **Arrow** - Alur/flow + +### Warna yang Disarankan +- **START/END**: Hijau teal (#14B8A6) +- **Process**: Biru muda (#E3F2FD) +- **Decision**: Kuning (#FFF59D) +- **Error**: Merah muda (#FFCDD2) +- **Success**: Hijau muda (#C8E6C9) + +### Layout +- Gunakan vertical flow (top to bottom) +- Spacing konsisten antar simbol +- Label jelas pada setiap decision branch +- Gunakan connector yang rapi + +--- + +**Dibuat**: 25 Februari 2026 +**Fitur**: Autentikasi (Login, Register, Logout) +**Sistem**: Banyu Biru Ticketing & Booking System diff --git a/flowcharts/bank-account-flowchart.md b/flowcharts/bank-account-flowchart.md new file mode 100644 index 0000000..8ec8060 --- /dev/null +++ b/flowcharts/bank-account-flowchart.md @@ -0,0 +1,293 @@ +# Flowchart - Fitur Manajemen Rekening Bank + +## Daftar Isi +1. [Lihat Daftar Rekening Bank](#1-lihat-daftar-rekening-bank) +2. [Tambah Rekening Bank](#2-tambah-rekening-bank) +3. [Edit Rekening Bank](#3-edit-rekening-bank) +4. [Hapus Rekening Bank](#4-hapus-rekening-bank) +5. [Toggle Status Aktif Rekening](#5-toggle-status-aktif-rekening) + +--- + +## 1. Lihat Daftar Rekening Bank + +### Deskripsi +Flowchart untuk admin melihat daftar rekening bank. + +### Flowchart + +``` +START + ↓ +{User sudah login?} + β”œβ”€ NO β†’ [Redirect ke halaman login] β†’ END + └─ YES ↓ + ↓ +{User adalah admin?} + β”œβ”€ NO β†’ [Error 403: Unauthorized] β†’ END + └─ YES ↓ + ↓ +[Admin mengakses menu "Rekening Bank"] + ↓ +[Query database: ambil semua bank_accounts] + ↓ +[Urutkan berdasarkan ID] + ↓ +[Tampilkan tabel rekening:] + - Nama Bank + - Nomor Rekening + - Atas Nama + - Status (Aktif/Nonaktif) + - Aksi (Edit, Hapus) + ↓ +[Tampilkan tombol "Tambah Rekening"] + ↓ +END +``` + +--- + +## 2. Tambah Rekening Bank + +### Deskripsi +Flowchart untuk admin menambah rekening bank baru. + +### Flowchart + +``` +START + ↓ +[Admin di halaman daftar rekening] + ↓ +[Admin klik tombol "Tambah Rekening"] + ↓ +[Redirect ke halaman form tambah rekening] + ↓ +[Tampilkan form:] + - Nama Bank + - Nomor Rekening + - Atas Nama + - Status Aktif (checkbox) + ↓ +[Admin mengisi form] + ↓ +[Admin klik tombol "Simpan"] + ↓ + + ↓ +{Nama bank terisi?} + β”œβ”€ NO β†’ [Error: "Nama bank wajib diisi"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Nomor rekening terisi?} + β”œβ”€ NO β†’ [Error: "Nomor rekening wajib diisi"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Nomor rekening hanya angka?} + β”œβ”€ NO β†’ [Error: "Nomor rekening harus angka"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Atas nama terisi?} + β”œβ”€ NO β†’ [Error: "Atas nama wajib diisi"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +[Simpan data ke tabel bank_accounts:] + - bank_name + - account_number + - account_holder + - is_active (default: true) + ↓ +[Tampilkan notifikasi sukses:] + "Rekening bank berhasil ditambahkan" + ↓ +[Redirect ke halaman daftar rekening] + ↓ +END +``` + +--- + +## 3. Edit Rekening Bank + +### Deskripsi +Flowchart untuk admin mengedit data rekening bank. + +### Flowchart + +``` +START + ↓ +[Admin di halaman daftar rekening] + ↓ +[Admin klik tombol "Edit" pada rekening] + ↓ +[Query database: ambil bank_account berdasarkan ID] + ↓ +{Rekening ditemukan?} + β”œβ”€ NO β†’ [Error 404: Rekening tidak ditemukan] β†’ END + └─ YES ↓ + ↓ +[Redirect ke halaman form edit rekening] + ↓ +[Tampilkan form dengan data rekening:] + - Nama Bank (terisi) + - Nomor Rekening (terisi) + - Atas Nama (terisi) + - Status Aktif (checked/unchecked) + ↓ +[Admin mengubah data] + ↓ +[Admin klik tombol "Update"] + ↓ + + ↓ +{Nama bank terisi?} + β”œβ”€ NO β†’ [Error: "Nama bank wajib diisi"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Nomor rekening terisi?} + β”œβ”€ NO β†’ [Error: "Nomor rekening wajib diisi"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Nomor rekening hanya angka?} + β”œβ”€ NO β†’ [Error: "Nomor rekening harus angka"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Atas nama terisi?} + β”œβ”€ NO β†’ [Error: "Atas nama wajib diisi"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +[Update tabel bank_accounts:] + - bank_name + - account_number + - account_holder + - is_active + ↓ +[Simpan perubahan ke database] + ↓ +[Tampilkan notifikasi sukses:] + "Rekening bank berhasil diupdate" + ↓ +[Redirect ke halaman daftar rekening] + ↓ +END +``` + +--- + +## 4. Hapus Rekening Bank + +### Deskripsi +Flowchart untuk admin menghapus rekening bank. + +### Flowchart + +``` +START + ↓ +[Admin di halaman daftar rekening] + ↓ +[Admin klik tombol "Hapus" pada rekening] + ↓ +[Tampilkan konfirmasi SweetAlert:] + "Yakin ingin menghapus rekening ini?" + ↓ +{Admin konfirmasi?} + β”œβ”€ NO (Batal) β†’ [Tutup dialog] β†’ END + └─ YES ↓ + ↓ +[Query database: ambil bank_account berdasarkan ID] + ↓ +{Rekening ditemukan?} + β”œβ”€ NO β†’ [Error: "Rekening tidak ditemukan"] β†’ END + └─ YES ↓ + ↓ +[Hapus rekening dari database] + ↓ +[Tampilkan notifikasi sukses:] + "Rekening bank berhasil dihapus" + ↓ +[Refresh halaman daftar rekening] + ↓ +END +``` + +--- + +## 5. Toggle Status Aktif Rekening + +### Deskripsi +Flowchart untuk mengaktifkan/menonaktifkan rekening bank. + +### Flowchart + +``` +START + ↓ +[Admin di halaman edit rekening] + ↓ +[Tampilkan checkbox "Status Aktif"] + ↓ +{Rekening saat ini aktif?} + β”œβ”€ YES β†’ [Checkbox checked] + └─ NO β†’ [Checkbox unchecked] + ↓ +[Admin toggle checkbox] + ↓ +[Admin klik tombol "Update"] + ↓ +[Update tabel bank_accounts:] + - is_active = nilai checkbox (true/false) + ↓ +{is_active = true?} + β”œβ”€ YES β†’ [Rekening muncul di halaman pembayaran user] + β”‚ ↓ + β”‚ [User dapat transfer ke rekening ini] + β”‚ ↓ + β”‚ [Notifikasi: "Rekening diaktifkan"] + β”‚ + └─ NO β†’ [Rekening tidak muncul di halaman pembayaran] + ↓ + [User tidak dapat transfer ke rekening ini] + ↓ + [Notifikasi: "Rekening dinonaktifkan"] + ↓ +[Redirect ke halaman daftar rekening] + ↓ +END +``` + +--- + +## Panduan Membuat di Draw.io + +### Simbol Flowchart +1. **Terminator** (Oval) - START/END +2. **Process** (Rectangle) - Proses/aksi +3. **Decision** (Diamond) - Kondisi/percabangan +4. **Data** (Parallelogram) - Input/Output +5. **Database** (Cylinder) - Operasi database +6. **Document** (Rectangle with wavy bottom) - Form + +### Warna yang Disarankan +- **START/END**: Hijau teal (#14B8A6) +- **Process**: Biru muda (#E3F2FD) +- **Decision**: Kuning (#FFF59D) +- **Database Operation**: Ungu muda (#E1BEE7) +- **Form**: Biru tua muda (#BBDEFB) +- **Create**: Hijau muda (#C8E6C9) +- **Update**: Biru muda (#B3E5FC) +- **Delete**: Merah muda (#FFCDD2) +- **Toggle**: Oranye muda (#FFE0B2) + +### Tips +- Gunakan swimlane untuk memisahkan Admin dan System +- Tandai operasi CRUD dengan warna berbeda +- Gunakan connector yang jelas untuk decision branch +- Tambahkan notes untuk validasi nomor rekening + +--- + +**Dibuat**: 25 Februari 2026 +**Fitur**: Manajemen Rekening Bank +**Sistem**: Banyu Biru Ticketing & Booking System diff --git a/flowcharts/booking-flowchart.md b/flowcharts/booking-flowchart.md new file mode 100644 index 0000000..b09c7f5 --- /dev/null +++ b/flowcharts/booking-flowchart.md @@ -0,0 +1,344 @@ +# Flowchart - Fitur Booking Pendopo + +## Daftar Isi +1. [Lihat Halaman Booking](#1-lihat-halaman-booking) +2. [Cek Ketersediaan Tanggal](#2-cek-ketersediaan-tanggal) +3. [Buat Booking](#3-buat-booking) +4. [Upload Bukti Pembayaran Booking](#4-upload-bukti-pembayaran-booking) +5. [Lihat Status Booking](#5-lihat-status-booking) + +--- + +## 1. Lihat Halaman Booking + +### Deskripsi +Flowchart untuk mengakses halaman booking pendopo. + +### Flowchart + +``` +START + ↓ +{User sudah login?} + β”œβ”€ NO β†’ [Redirect ke halaman login] β†’ END + └─ YES ↓ + ↓ +{User adalah admin?} + β”œβ”€ YES β†’ [Tampilkan SweetAlert: "Admin tidak dapat melakukan booking"] + β”‚ ↓ + β”‚ [Redirect ke dashboard admin] + β”‚ ↓ + β”‚ END + └─ NO ↓ + ↓ +[Query database: cari place dengan name = 'pendopo'] + ↓ +{Place 'pendopo' ditemukan?} + β”œβ”€ NO β†’ [Query: ambil place aktif pertama] + β”‚ ↓ + β”‚ [Gunakan place tersebut] + └─ YES ↓ + ↓ +[Ambil data place pendopo] + ↓ +[Tampilkan halaman booking] + ↓ +[Tampilkan informasi pendopo:] + - Nama tempat + - Harga per hari + - Deskripsi + ↓ +[Tampilkan form booking] + ↓ +END +``` + +--- + +## 2. Cek Ketersediaan Tanggal + +### Deskripsi +Flowchart untuk mengecek apakah tanggal sudah dibooking atau masih tersedia. + +### Flowchart + +``` +START + ↓ +[User memilih tanggal booking] + ↓ +[Trigger event onchange pada input tanggal] + ↓ +[Kirim AJAX request ke server] + ↓ +[Server: validasi format tanggal] + ↓ +{Format tanggal valid?} + β”œβ”€ NO β†’ [Return error: "Format tanggal tidak valid"] β†’ END + └─ YES ↓ + ↓ +[Query database: cari booking dengan tanggal tersebut] + ↓ +[Query: WHERE place_id = pendopo_id] + ↓ +[Query: AND booking_date = tanggal_dipilih] + ↓ +{Booking ditemukan?} + β”œβ”€ YES β†’ [Return JSON: available = false] + β”‚ ↓ + β”‚ [Tampilkan pesan: "Tanggal sudah dibooking"] + β”‚ ↓ + β”‚ [Disable tombol submit] + β”‚ ↓ + β”‚ [Tampilkan alert merah] + β”‚ ↓ + β”‚ END + β”‚ + └─ NO β†’ [Return JSON: available = true] + ↓ + [Tampilkan pesan: "Tanggal tersedia"] + ↓ + [Enable tombol submit] + ↓ + [Tampilkan alert hijau] + ↓ + END +``` + +--- + +## 3. Buat Booking + +### Deskripsi +Flowchart untuk proses pembuatan booking pendopo. + +### Flowchart + +``` +START + ↓ +[User di halaman booking] + ↓ +[User mengisi form:] + - Tanggal booking + - Nama pengunjung + - Nomor telepon + - Alamat + - Catatan (opsional) + ↓ +[User klik tombol "Booking Sekarang"] + ↓ + + ↓ +{Tanggal >= hari ini?} + β”œβ”€ NO β†’ [Error: "Tanggal harus hari ini atau setelahnya"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Nama pengunjung terisi?} + β”œβ”€ NO β†’ [Error: "Nama wajib diisi"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Nomor telepon terisi?} + β”œβ”€ NO β†’ [Error: "Nomor telepon wajib diisi"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Alamat terisi?} + β”œβ”€ NO β†’ [Error: "Alamat wajib diisi"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +[Query database: cek tanggal sudah dibooking] + ↓ +{Tanggal sudah dibooking?} + β”œβ”€ YES β†’ [Error: "Tanggal sudah dibooking, pilih tanggal lain"] + β”‚ ↓ + β”‚ [Kembali ke form dengan input tersimpan] + β”‚ ↓ + β”‚ END + └─ NO ↓ + ↓ +[Generate kode booking unik (AB-XXXXX)] + ↓ +[Hitung total harga = price_per_day dari place] + ↓ +[Simpan data ke tabel bookings:] + - user_id = user yang login + - place_id = pendopo_id + - booking_code = AB-XXXXX + - booking_date = tanggal dipilih + - visitor_name + - visitor_phone + - visitor_address + - num_persons = 1 + - total_price + - notes + - status = 'pending' + ↓ +[Tampilkan notifikasi sukses] + ↓ +[Redirect ke halaman pembayaran] + ↓ +END +``` + +--- + +## 4. Upload Bukti Pembayaran Booking + +### Deskripsi +Flowchart untuk upload bukti transfer pembayaran booking. + +### Flowchart + +``` +START + ↓ +[User di halaman pembayaran booking] + ↓ +[Tampilkan informasi booking:] + - Kode booking + - Tanggal booking + - Nama pengunjung + - Total harga + ↓ +[Query database: ambil daftar rekening bank aktif] + ↓ +[Tampilkan nomor rekening bank] + ↓ +[User melakukan transfer ke rekening] + ↓ +[User klik "Upload Bukti Pembayaran"] + ↓ +[User pilih file bukti transfer] + ↓ + + ↓ +{File dipilih?} + β”œβ”€ NO β†’ [Error: "File wajib dipilih"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Format file valid (jpg, jpeg, png, pdf)?} + β”œβ”€ NO β†’ [Error: "Format file tidak valid"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Ukuran file <= 5MB?} + β”œβ”€ NO β†’ [Error: "Ukuran file terlalu besar"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +[Generate nama file unik:] + Format: YYYYMMDDHHMMSS_uniqid.ext + ↓ +[Simpan file ke /public/payment-proofs/] + ↓ +[Update tabel bookings:] + - payment_proof = path file + - status tetap 'pending' + ↓ +[Tampilkan notifikasi sukses] + ↓ +[Redirect ke halaman status booking] + ↓ +END +``` + +--- + +## 5. Lihat Status Booking + +### Deskripsi +Flowchart untuk melihat status booking setelah upload bukti pembayaran. + +### Flowchart + +``` +START + ↓ +[User mengakses halaman status booking] + ↓ +[Query database: ambil booking berdasarkan booking_code] + ↓ +{Booking ditemukan?} + β”œβ”€ NO β†’ [Error 404: Booking tidak ditemukan] β†’ END + └─ YES ↓ + ↓ +{Booking milik user yang login?} + β”œβ”€ NO β†’ [Error 403: Unauthorized] β†’ END + └─ YES ↓ + ↓ +[Ambil data booking dengan relasi place] + ↓ +[Cek status booking] + ↓ +{Status = 'confirmed'?} + β”œβ”€ YES β†’ [Tampilkan halaman status] + β”‚ ↓ + β”‚ [Tampilkan alert sukses:] + β”‚ "Pembayaran berhasil diverifikasi" + β”‚ ↓ + β”‚ [Tampilkan informasi booking:] + β”‚ - Kode booking + β”‚ - Status: Confirmed + β”‚ - Tanggal booking + β”‚ - Nama pengunjung + β”‚ - Total harga + β”‚ ↓ + β”‚ [Tampilkan tombol "Kembali ke Beranda"] + β”‚ ↓ + β”‚ END + β”‚ + β”œβ”€ Status = 'pending' β†’ [Tampilkan halaman status] + β”‚ ↓ + β”‚ [Tampilkan alert warning:] + β”‚ "Menunggu verifikasi admin" + β”‚ ↓ + β”‚ [Tampilkan informasi booking] + β”‚ ↓ + β”‚ [Tampilkan pesan:] + β”‚ "Bukti pembayaran sedang diverifikasi" + β”‚ ↓ + β”‚ END + β”‚ + └─ Status = 'rejected' β†’ [Tampilkan halaman status] + ↓ + [Tampilkan alert danger:] + "Pembayaran ditolak" + ↓ + [Tampilkan alasan penolakan] + ↓ + [Tampilkan tombol "Upload Ulang Bukti"] + ↓ + END +``` + +--- + +## Panduan Membuat di Draw.io + +### Simbol Flowchart +1. **Terminator** (Oval) - START/END +2. **Process** (Rectangle) - Proses/aksi +3. **Decision** (Diamond) - Kondisi/percabangan +4. **Data** (Parallelogram) - Input/Output +5. **Database** (Cylinder) - Operasi database +6. **Document** (Rectangle with wavy bottom) - File/dokumen + +### Warna yang Disarankan +- **START/END**: Hijau teal (#14B8A6) +- **Process**: Biru muda (#E3F2FD) +- **Decision**: Kuning (#FFF59D) +- **Database Operation**: Ungu muda (#E1BEE7) +- **File Operation**: Oranye muda (#FFE0B2) +- **Error**: Merah muda (#FFCDD2) +- **Success**: Hijau muda (#C8E6C9) +- **Warning**: Kuning muda (#FFF9C4) + +### Tips +- Gunakan swimlane untuk memisahkan User, System, dan Database +- Tandai proses AJAX dengan warna berbeda +- Gunakan connector yang jelas untuk decision branch +- Tambahkan notes untuk validasi kompleks + +--- + +**Dibuat**: 25 Februari 2026 +**Fitur**: Booking Pendopo +**Sistem**: Banyu Biru Ticketing & Booking System diff --git a/flowcharts/dashboard-flowchart.md b/flowcharts/dashboard-flowchart.md new file mode 100644 index 0000000..7bc59ab --- /dev/null +++ b/flowcharts/dashboard-flowchart.md @@ -0,0 +1,401 @@ +# Flowchart - Fitur Dashboard & Statistik + +## Daftar Isi +1. [Tampilkan Dashboard Admin](#1-tampilkan-dashboard-admin) +2. [Hitung Total Tiket Terjual](#2-hitung-total-tiket-terjual) +3. [Hitung Penjualan Bulan Ini](#3-hitung-penjualan-bulan-ini) +4. [Hitung Total Pendapatan](#4-hitung-total-pendapatan) +5. [Generate Chart Penjualan](#5-generate-chart-penjualan) + +--- + +## 1. Tampilkan Dashboard Admin + +### Deskripsi +Flowchart untuk menampilkan dashboard admin dengan statistik. + +### Flowchart + +``` +START + ↓ +{User sudah login?} + β”œβ”€ NO β†’ [Redirect ke halaman login] β†’ END + └─ YES ↓ + ↓ +{User adalah admin?} + β”œβ”€ NO β†’ [Error 403: Unauthorized] β†’ END + └─ YES ↓ + ↓ +[Admin mengakses dashboard] + ↓ +[Inisialisasi variabel:] + - confirmedStatus = ['confirmed'] + - currentMonth = bulan ini + - currentYear = tahun ini + ↓ +[Hitung Total Tiket Terjual] + [Lihat flowchart #2] + ↓ +[Hitung Penjualan Bulan Ini] + [Lihat flowchart #3] + ↓ +[Hitung Total Pendapatan] + [Lihat flowchart #4] + ↓ +[Generate Chart Penjualan] + [Lihat flowchart #5] + ↓ +[Query: ambil 5 order tiket terbaru] + ↓ +[Query: ambil 5 booking terbaru] + ↓ +[Tampilkan dashboard dengan:] + - 4 Card statistik + - Chart penjualan + - Tabel order terbaru + - Tabel booking terbaru + ↓ +END +``` + +--- + +## 2. Hitung Total Tiket Terjual + +### Deskripsi +Flowchart untuk menghitung total tiket yang sudah dikonfirmasi. + +### Flowchart + +``` +START + ↓ +[Query database: ticket_orders] + ↓ +[Filter: status = 'confirmed'] + ↓ +[Sum: total_qty dari semua order confirmed] + ↓ +[Simpan hasil ke variabel: totalTicketsSold] + ↓ +[Tampilkan di card:] + - Judul: "Total Tiket Terjual" + - Nilai: totalTicketsSold + - Icon: fas fa-ticket-alt + - Warna: Teal + - Keterangan: "Sudah dikonfirmasi" + ↓ +END +``` + +--- + +## 3. Hitung Penjualan Bulan Ini + +### Deskripsi +Flowchart untuk menghitung penjualan tiket dan booking bulan ini. + +### Flowchart + +``` +START + ↓ +[Ambil bulan dan tahun saat ini] + ↓ +[Query database: ticket_orders] + ↓ +[Filter: status = 'confirmed'] + ↓ +[Filter: MONTH(created_at) = bulan ini] + ↓ +[Filter: YEAR(created_at) = tahun ini] + ↓ +[Sum: total_qty dari hasil filter] + ↓ +[Simpan ke: monthlyTicketSales] + ↓ +[Query database: bookings] + ↓ +[Filter: status = 'confirmed'] + ↓ +[Filter: MONTH(created_at) = bulan ini] + ↓ +[Filter: YEAR(created_at) = tahun ini] + ↓ +[Count: jumlah booking] + ↓ +[Simpan ke: monthlyBookings] + ↓ +[Tampilkan di card:] + - Judul: "Penjualan Bulan Ini" + - Nilai: monthlyTicketSales + " tiket, " + monthlyBookings + " booking" + - Icon: fas fa-chart-line + - Warna: Biru + - Keterangan: "Hanya yang terkonfirmasi" + ↓ +END +``` + + +--- + +## 4. Hitung Total Pendapatan + +### Deskripsi +Flowchart untuk menghitung total pendapatan dari tiket dan booking yang dikonfirmasi. + +### Flowchart + +``` +START + ↓ +[Query database: ticket_orders] + ↓ +[Filter: status = 'confirmed'] + ↓ +[Sum: total_price dari semua order confirmed] + ↓ +[Simpan ke: ticketRevenue] + ↓ +[Query database: bookings] + ↓ +[Filter: status = 'confirmed'] + ↓ +[Sum: total_price dari semua booking confirmed] + ↓ +[Simpan ke: bookingRevenue] + ↓ +[Hitung: monthlyRevenue = ticketRevenue + bookingRevenue] + ↓ +[Format: Rp X.XXX.XXX] + ↓ +[Tampilkan di card:] + - Judul: "Total Pendapatan" + - Nilai: monthlyRevenue (formatted) + - Icon: fas fa-money-bill-wave + - Warna: Hijau + - Keterangan: "Tiket + Booking terkonfirmasi" + ↓ +END +``` + +--- + +## 5. Generate Chart Penjualan + +### Deskripsi +Flowchart untuk membuat chart penjualan 6 bulan terakhir. + +### Flowchart + +``` +START + ↓ +[Inisialisasi array kosong:] + - labels = [] + - ticketData = [] + - bookingData = [] + ↓ +[Loop: untuk 6 bulan terakhir] + ↓ + β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” + β”‚ [Hitung bulan dan tahun untuk iterasi ke-i] + β”‚ ↓ + β”‚ [Format nama bulan: "Jan 2026"] + β”‚ ↓ + β”‚ [Tambahkan ke labels array] + β”‚ ↓ + β”‚ [Query: ticket_orders confirmed untuk bulan ini] + β”‚ ↓ + β”‚ [Sum: total_qty] + β”‚ ↓ + β”‚ [Tambahkan ke ticketData array] + β”‚ ↓ + β”‚ [Query: bookings confirmed untuk bulan ini] + β”‚ ↓ + β”‚ [Count: jumlah booking] + β”‚ ↓ + β”‚ [Tambahkan ke bookingData array] + β”‚ ↓ + β”‚ [Ulangi untuk bulan berikutnya] + β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + ↓ +[Kirim data ke view:] + - chartLabels = labels (JSON) + - chartTicketData = ticketData (JSON) + - chartBookingData = bookingData (JSON) + ↓ +[Render chart menggunakan Chart.js] + ↓ +[Tampilkan line chart dengan:] + - X-axis: Bulan + - Y-axis: Jumlah + - Line 1: Penjualan Tiket (Teal) + - Line 2: Booking (Biru) + - Legend: Aktif + - Tooltip: Aktif + ↓ +END +``` + +--- + +## 6. Tampilkan Order Terbaru + +### Deskripsi +Flowchart untuk menampilkan 5 order tiket terbaru. + +### Flowchart + +``` +START + ↓ +[Query database: ticket_orders] + ↓ +[Include relasi: user] + ↓ +[Urutkan: created_at DESC] + ↓ +[Limit: 5 data] + ↓ +[Loop untuk setiap order:] + ↓ + β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” + β”‚ [Ambil data order:] + β”‚ - Kode order + β”‚ - Nama user + β”‚ - Total qty + β”‚ - Total harga + β”‚ - Status + β”‚ - Tanggal order + β”‚ ↓ + β”‚ [Format tanggal: d M Y] + β”‚ ↓ + β”‚ [Format harga: Rp X.XXX] + β”‚ ↓ + β”‚ [Tentukan warna badge status:] + β”‚ - pending: kuning + β”‚ - confirmed: hijau + β”‚ - rejected: merah + β”‚ ↓ + β”‚ [Tampilkan row di tabel] + β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + ↓ +[Tampilkan tabel di dashboard] + ↓ +[Tampilkan link "Lihat Semua"] + ↓ +END +``` + +--- + +## 7. Tampilkan Booking Terbaru + +### Deskripsi +Flowchart untuk menampilkan 5 booking terbaru. + +### Flowchart + +``` +START + ↓ +[Query database: bookings] + ↓ +[Include relasi: user, place] + ↓ +[Urutkan: created_at DESC] + ↓ +[Limit: 5 data] + ↓ +[Loop untuk setiap booking:] + ↓ + β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” + β”‚ [Ambil data booking:] + β”‚ - Kode booking + β”‚ - Nama user + β”‚ - Nama tempat + β”‚ - Tanggal booking + β”‚ - Total harga + β”‚ - Status + β”‚ ↓ + β”‚ [Format tanggal: d M Y] + β”‚ ↓ + β”‚ [Format harga: Rp X.XXX] + β”‚ ↓ + β”‚ [Tentukan warna badge status:] + β”‚ - pending: kuning + β”‚ - confirmed: hijau + β”‚ - rejected: merah + β”‚ ↓ + β”‚ [Tampilkan row di tabel] + β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + ↓ +[Tampilkan tabel di dashboard] + ↓ +[Tampilkan link "Lihat Semua"] + ↓ +END +``` + +--- + +## Panduan Membuat di Draw.io + +### Simbol Flowchart +1. **Terminator** (Oval) - START/END +2. **Process** (Rectangle) - Proses/aksi +3. **Decision** (Diamond) - Kondisi/percabangan +4. **Data** (Parallelogram) - Input/Output +5. **Database** (Cylinder) - Operasi database +6. **Loop** (Hexagon) - Perulangan +7. **Predefined Process** (Rectangle with double lines) - Subprocess + +### Warna yang Disarankan +- **START/END**: Hijau teal (#14B8A6) +- **Process**: Biru muda (#E3F2FD) +- **Decision**: Kuning (#FFF59D) +- **Database Operation**: Ungu muda (#E1BEE7) +- **Calculation**: Hijau muda (#C8E6C9) +- **Chart/Display**: Biru tua muda (#BBDEFB) +- **Loop**: Oranye muda (#FFE0B2) +- **Aggregate**: Kuning muda (#FFF9C4) + +### Tips +- Gunakan swimlane untuk memisahkan Data Processing dan Display +- Tandai proses agregasi (SUM, COUNT) dengan warna khusus +- Gunakan loop symbol untuk iterasi 6 bulan +- Tambahkan notes untuk formula perhitungan +- Highlight filter status 'confirmed' yang penting + +### Layout Suggestion +``` +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +β”‚ Dashboard Controller β”‚ +β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ +β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ +β”‚ β”‚ Tiket β”‚ β”‚ Booking β”‚ β”‚ +β”‚ β”‚ Terjual β”‚ β”‚ Bulan β”‚ β”‚ +β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚ +β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ +β”‚ β”‚ Penjualanβ”‚ β”‚ Total β”‚ β”‚ +β”‚ β”‚ Bulan β”‚ β”‚ Pendapatanβ”‚ β”‚ +β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚ +β”‚ β”‚ +β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ +β”‚ β”‚ Chart Penjualan 6 Bulan β”‚ β”‚ +β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚ +β”‚ β”‚ +β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ +β”‚ β”‚ Order β”‚ β”‚ Booking β”‚ β”‚ +β”‚ β”‚ Terbaru β”‚ β”‚ Terbaru β”‚ β”‚ +β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ +``` + +--- + +**Dibuat**: 25 Februari 2026 +**Fitur**: Dashboard & Statistik +**Sistem**: Banyu Biru Ticketing & Booking System diff --git a/flowcharts/payment-verification-flowchart.md b/flowcharts/payment-verification-flowchart.md new file mode 100644 index 0000000..9cf9858 --- /dev/null +++ b/flowcharts/payment-verification-flowchart.md @@ -0,0 +1,360 @@ +# Flowchart - Fitur Verifikasi Pembayaran Admin + +## Daftar Isi +1. [Lihat Daftar Order Tiket](#1-lihat-daftar-order-tiket) +2. [Lihat Detail Order Tiket](#2-lihat-detail-order-tiket) +3. [Konfirmasi Pembayaran Tiket](#3-konfirmasi-pembayaran-tiket) +4. [Tolak Pembayaran Tiket](#4-tolak-pembayaran-tiket) +5. [Verifikasi Pembayaran Booking](#5-verifikasi-pembayaran-booking) + +--- + +## 1. Lihat Daftar Order Tiket + +### Deskripsi +Flowchart untuk admin melihat daftar semua order tiket. + +### Flowchart + +``` +START + ↓ +{User sudah login?} + β”œβ”€ NO β†’ [Redirect ke halaman login] β†’ END + └─ YES ↓ + ↓ +{User adalah admin?} + β”œβ”€ NO β†’ [Error 403: Unauthorized] β†’ END + └─ YES ↓ + ↓ +[Admin mengakses menu "Order Tiket"] + ↓ +[Query database: ambil semua ticket_orders] + ↓ +[Include relasi: user] + ↓ +[Urutkan: terbaru ke terlama (latest)] + ↓ +[Tampilkan tabel order tiket:] + - Kode Order + - Nama User + - Tanggal Kunjungan + - Total Qty + - Total Harga + - Status (pending/confirmed/rejected) + - Aksi (Detail) + ↓ +[Tampilkan badge warna sesuai status:] + - Pending: Kuning + - Confirmed: Hijau + - Rejected: Merah + ↓ +END +``` + +--- + +## 2. Lihat Detail Order Tiket + +### Deskripsi +Flowchart untuk admin melihat detail order tiket dan bukti pembayaran. + +### Flowchart + +``` +START + ↓ +[Admin klik tombol "Detail" pada order] + ↓ +[Query database: ambil ticket_order berdasarkan ID] + ↓ +[Include relasi:] + - user + - items.ticket + ↓ +{Order ditemukan?} + β”œβ”€ NO β†’ [Error 404: Order tidak ditemukan] β†’ END + └─ YES ↓ + ↓ +[Tampilkan halaman detail order] + ↓ +[Tampilkan informasi order:] + - Kode Order + - Nama User + - Email User + - Tanggal Kunjungan + - Total Qty + - Total Harga + - Status + - Tanggal Order + ↓ +[Tampilkan daftar tiket yang dibeli:] + - Kode Tiket + - Jenis Tiket + - Harga + - QR Code + - Status Dipakai + ↓ +{Bukti pembayaran ada?} + β”œβ”€ NO β†’ [Tampilkan pesan: "Belum upload bukti"] + └─ YES ↓ + ↓ +[Tampilkan bukti pembayaran (gambar/PDF)] + ↓ +{Status = 'pending'?} + β”œβ”€ YES β†’ [Tampilkan tombol:] + β”‚ - "Konfirmasi Pembayaran" (hijau) + β”‚ - "Tolak Pembayaran" (merah) + β”‚ ↓ + β”‚ END + β”‚ + β”œβ”€ Status = 'confirmed' β†’ [Tampilkan badge: "Sudah Dikonfirmasi"] + β”‚ ↓ + β”‚ [Tampilkan info:] + β”‚ - Dikonfirmasi oleh: nama admin + β”‚ - Tanggal konfirmasi + β”‚ ↓ + β”‚ END + β”‚ + └─ Status = 'rejected' β†’ [Tampilkan badge: "Ditolak"] + ↓ + [Tampilkan alasan penolakan] + ↓ + END +``` + +--- + +## 3. Konfirmasi Pembayaran Tiket + +### Deskripsi +Flowchart untuk admin mengkonfirmasi pembayaran tiket. + +### Flowchart + +``` +START + ↓ +[Admin di halaman detail order] + ↓ +[Admin memeriksa bukti pembayaran] + ↓ +{Bukti pembayaran valid?} + β”œβ”€ NO β†’ [Admin klik "Tolak Pembayaran"] β†’ [Lihat flowchart #4] + └─ YES ↓ + ↓ +[Admin klik tombol "Konfirmasi Pembayaran"] + ↓ +[Tampilkan konfirmasi SweetAlert:] + "Yakin ingin konfirmasi pembayaran?" + ↓ +{Admin konfirmasi?} + β”œβ”€ NO (Batal) β†’ [Tutup dialog] β†’ END + └─ YES ↓ + ↓ +[Query database: ambil ticket_order berdasarkan ID] + ↓ +{Order ditemukan?} + β”œβ”€ NO β†’ [Error: Order tidak ditemukan] β†’ END + └─ YES ↓ + ↓ +[Update tabel ticket_orders:] + - status = 'confirmed' + - confirmed_at = waktu sekarang + - confirmed_by = admin_id yang login + - rejection_note = null + ↓ +[Simpan perubahan ke database] + ↓ +[Tampilkan notifikasi sukses:] + "Order tiket berhasil dikonfirmasi" + ↓ +[Refresh halaman detail order] + ↓ +[Tampilkan badge "Confirmed"] + ↓ +[Hide tombol konfirmasi/tolak] + ↓ +END +``` + +--- + +## 4. Tolak Pembayaran Tiket + +### Deskripsi +Flowchart untuk admin menolak pembayaran tiket dengan alasan. + +### Flowchart + +``` +START + ↓ +[Admin di halaman detail order] + ↓ +[Admin memeriksa bukti pembayaran] + ↓ +{Bukti pembayaran tidak valid?} + β”œβ”€ NO β†’ [Admin klik "Konfirmasi"] β†’ [Lihat flowchart #3] + └─ YES ↓ + ↓ +[Admin klik tombol "Tolak Pembayaran"] + ↓ +[Tampilkan modal form penolakan] + ↓ +[Tampilkan textarea untuk alasan penolakan] + ↓ +[Admin mengetik alasan penolakan] + ↓ +[Admin klik "Submit"] + ↓ + + ↓ +{Alasan penolakan terisi?} + β”œβ”€ NO β†’ [Error: "Alasan penolakan wajib diisi"] + β”‚ ↓ + β”‚ [Kembali ke modal] + β”‚ ↓ + β”‚ END + └─ YES ↓ + ↓ +[Query database: ambil ticket_order berdasarkan ID] + ↓ +{Order ditemukan?} + β”œβ”€ NO β†’ [Error: Order tidak ditemukan] β†’ END + └─ YES ↓ + ↓ +[Update tabel ticket_orders:] + - status = 'rejected' + - confirmed_by = admin_id yang login + - rejection_note = alasan dari admin + ↓ +[Simpan perubahan ke database] + ↓ +[Tampilkan notifikasi sukses:] + "Order tiket ditolak" + ↓ +[Refresh halaman detail order] + ↓ +[Tampilkan badge "Rejected"] + ↓ +[Tampilkan alasan penolakan] + ↓ +[Hide tombol konfirmasi/tolak] + ↓ +END +``` + +--- + +## 5. Verifikasi Pembayaran Booking + +### Deskripsi +Flowchart untuk admin memverifikasi pembayaran booking pendopo. + +### Flowchart + +``` +START + ↓ +[Admin mengakses menu "Booking"] + ↓ +[Query database: ambil semua bookings] + ↓ +[Include relasi: user, place] + ↓ +[Urutkan: terbaru ke terlama] + ↓ +[Tampilkan tabel booking:] + - Kode Booking + - Nama User + - Tempat + - Tanggal Booking + - Total Harga + - Status + - Aksi (Detail) + ↓ +[Admin klik "Detail" pada booking] + ↓ +[Query database: ambil booking berdasarkan ID] + ↓ +[Tampilkan detail booking:] + - Kode Booking + - Nama Pengunjung + - Nomor Telepon + - Alamat + - Tanggal Booking + - Total Harga + - Catatan + - Bukti Pembayaran + ↓ +{Status = 'pending'?} + β”œβ”€ YES β†’ [Tampilkan tombol:] + β”‚ - "Konfirmasi" (hijau) + β”‚ - "Tolak" (merah) + β”‚ ↓ + β”‚ [Admin klik salah satu tombol] + β”‚ ↓ + β”‚ {Klik Konfirmasi?} + β”‚ β”œβ”€ YES β†’ [Update status = 'confirmed'] + β”‚ β”‚ ↓ + β”‚ β”‚ [Set confirmed_at = now()] + β”‚ β”‚ ↓ + β”‚ β”‚ [Set confirmed_by = admin_id] + β”‚ β”‚ ↓ + β”‚ β”‚ [Notifikasi: "Booking dikonfirmasi"] + β”‚ β”‚ ↓ + β”‚ β”‚ END + β”‚ β”‚ + β”‚ └─ NO (Tolak) β†’ [Tampilkan form alasan] + β”‚ ↓ + β”‚ [Admin input alasan] + β”‚ ↓ + β”‚ [Update status = 'rejected'] + β”‚ ↓ + β”‚ [Set rejection_note] + β”‚ ↓ + β”‚ [Notifikasi: "Booking ditolak"] + β”‚ ↓ + β”‚ END + β”‚ + └─ NO (confirmed/rejected) β†’ [Tampilkan status saja] + ↓ + [Hide tombol aksi] + ↓ + END +``` + +--- + +## Panduan Membuat di Draw.io + +### Simbol Flowchart +1. **Terminator** (Oval) - START/END +2. **Process** (Rectangle) - Proses/aksi +3. **Decision** (Diamond) - Kondisi/percabangan +4. **Data** (Parallelogram) - Input/Output +5. **Database** (Cylinder) - Operasi database +6. **Manual Input** (Parallelogram with slanted top) - Input manual admin + +### Warna yang Disarankan +- **START/END**: Hijau teal (#14B8A6) +- **Process**: Biru muda (#E3F2FD) +- **Decision**: Kuning (#FFF59D) +- **Database Operation**: Ungu muda (#E1BEE7) +- **Admin Action**: Biru tua muda (#BBDEFB) +- **Confirm**: Hijau muda (#C8E6C9) +- **Reject**: Merah muda (#FFCDD2) +- **Pending**: Kuning muda (#FFF9C4) + +### Tips +- Gunakan swimlane untuk memisahkan Admin dan System +- Tandai proses verifikasi dengan warna khusus +- Gunakan connector yang jelas untuk decision branch +- Tambahkan notes untuk status order + +--- + +**Dibuat**: 25 Februari 2026 +**Fitur**: Verifikasi Pembayaran Admin +**Sistem**: Banyu Biru Ticketing & Booking System diff --git a/flowcharts/qr-scanner-flowchart.md b/flowcharts/qr-scanner-flowchart.md new file mode 100644 index 0000000..0a30bbc --- /dev/null +++ b/flowcharts/qr-scanner-flowchart.md @@ -0,0 +1,287 @@ +# Flowchart - Fitur QR Scanner Verifikasi Tiket + +## Daftar Isi +1. [Scan QR Code Tiket](#1-scan-qr-code-tiket) +2. [Input Manual Kode Tiket](#2-input-manual-kode-tiket) +3. [Verifikasi Tiket](#3-verifikasi-tiket) +4. [Tandai Tiket Sebagai Dipakai](#4-tandai-tiket-sebagai-dipakai) + +--- + +## 1. Scan QR Code Tiket + +### Deskripsi +Flowchart untuk scan QR code tiket menggunakan kamera. + +### Flowchart + +``` +START + ↓ +{User sudah login?} + β”œβ”€ NO β†’ [Redirect ke halaman login] β†’ END + └─ YES ↓ + ↓ +{User adalah admin?} + β”œβ”€ NO β†’ [Error 403: Unauthorized] β†’ END + └─ YES ↓ + ↓ +[Admin mengakses halaman "Verifikasi Tiket"] + ↓ +[Tampilkan 2 metode verifikasi:] + - Scan QR Code (aktif) + - Input Manual + ↓ +[Initialize html5-qrcode library] + ↓ +[Request akses kamera] + ↓ +{Izin kamera diberikan?} + β”œβ”€ NO β†’ [Tampilkan error: "Tidak dapat mengakses kamera"] + β”‚ ↓ + β”‚ [Sarankan gunakan Input Manual] + β”‚ ↓ + β”‚ END + └─ YES ↓ + ↓ +[Tampilkan preview kamera] + ↓ +[Tampilkan frame scanner dengan overlay] + ↓ +[Mulai scanning dengan fps: 10] + ↓ +[Loop: Deteksi QR code] + ↓ + β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” + β”‚ [Scan frame kamera] + β”‚ ↓ + β”‚ {QR code terdeteksi?} + β”‚ β”œβ”€ NO β†’ [Lanjut scan frame berikutnya] + β”‚ β”‚ ↓ + β”‚ β”‚ [Ulangi loop] + β”‚ β”‚ + β”‚ └─ YES ↓ + β”‚ ↓ + β”‚ [Decode QR code] + β”‚ ↓ + β”‚ [Ambil kode tiket dari QR] + β”‚ ↓ + β”‚ [Stop scanner] + β”‚ ↓ + β”‚ [Hide kamera] + β”‚ ↓ + β”‚ [Tampilkan: "Memproses QR Code..."] + β”‚ ↓ + β”‚ [Submit form dengan kode tiket] + β”‚ ↓ + β”‚ [Lihat flowchart #3: Verifikasi Tiket] + β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + ↓ +END +``` + + +--- + +## 2. Input Manual Kode Tiket + +### Deskripsi +Flowchart untuk input kode tiket secara manual tanpa scan QR. + +### Flowchart + +``` +START + ↓ +[Admin di halaman "Verifikasi Tiket"] + ↓ +[Admin klik metode "Input Manual"] + ↓ +[Stop scanner QR (jika aktif)] + ↓ +[Hide section QR scanner] + ↓ +[Tampilkan section input manual] + ↓ +[Tampilkan form input:] + - Input text untuk kode tiket + - Placeholder: "AT-XXXXX" + - Tombol "Cek Tiket" + ↓ +[Admin mengetik kode tiket] + ↓ +[Admin klik tombol "Cek Tiket"] + ↓ + + ↓ +{Kode tiket terisi?} + β”œβ”€ NO β†’ [Error: "Kode tiket wajib diisi"] + β”‚ ↓ + β”‚ [Focus ke input] + β”‚ ↓ + β”‚ END + └─ YES ↓ + ↓ +[Submit form dengan kode tiket] + ↓ +[Lihat flowchart #3: Verifikasi Tiket] + ↓ +END +``` + +--- + +## 3. Verifikasi Tiket + +### Deskripsi +Flowchart untuk memverifikasi kode tiket dan menampilkan hasilnya. + +### Flowchart + +``` +START + ↓ +[Terima kode tiket dari QR scan atau input manual] + ↓ +[Query database: cari ticket_order_items] + ↓ +[WHERE ticket_code = kode yang diinput] + ↓ +[Include relasi:] + - order.user + - ticket + ↓ +{Tiket ditemukan?} + β”œβ”€ NO β†’ [Tampilkan error: "Tiket tidak ditemukan"] + β”‚ ↓ + β”‚ [Tampilkan tombol "Scan Lagi"] + β”‚ ↓ + β”‚ END + └─ YES ↓ + ↓ +[Ambil data tiket lengkap] + ↓ +[Cek status tiket] + ↓ +{Tiket sudah dipakai (is_used = true)?} + β”œβ”€ YES β†’ [Tampilkan card hasil dengan border merah] + β”‚ ↓ + β”‚ [Tampilkan informasi:] + β”‚ - Kode Tiket + β”‚ - Nama Pemesan + β”‚ - Jenis Tiket + β”‚ - Tanggal Kunjungan + β”‚ - Status: "Sudah Dipakai" (badge merah) + β”‚ ↓ + β”‚ [Hide tombol "Tandai Sebagai Dipakai"] + β”‚ ↓ + β”‚ [Tampilkan tombol "Scan Lagi"] + β”‚ ↓ + β”‚ END + β”‚ + └─ NO (is_used = false) β†’ [Tampilkan card hasil dengan border hijau] + ↓ + [Tampilkan informasi:] + - Kode Tiket + - Nama Pemesan + - Jenis Tiket + - Tanggal Kunjungan + - Status: "Valid" (badge hijau) + ↓ + [Tampilkan tombol "Tandai Sebagai Dipakai"] + ↓ + [Tampilkan tombol "Scan Lagi"] + ↓ + END +``` + +--- + +## 4. Tandai Tiket Sebagai Dipakai + +### Deskripsi +Flowchart untuk menandai tiket yang sudah digunakan. + +### Flowchart + +``` +START + ↓ +[Admin melihat hasil verifikasi tiket valid] + ↓ +[Admin klik tombol "Tandai Sebagai Dipakai"] + ↓ +[Submit form dengan:] + - ticket_code + - mark_used = 1 + ↓ +[Query database: cari ticket_order_items] + ↓ +[WHERE ticket_code = kode tiket] + ↓ +{Tiket ditemukan?} + β”œβ”€ NO β†’ [Error: "Tiket tidak ditemukan"] β†’ END + └─ YES ↓ + ↓ +{Tiket sudah dipakai?} + β”œβ”€ YES β†’ [Error: "Tiket sudah ditandai dipakai sebelumnya"] + β”‚ ↓ + β”‚ [Kembali ke halaman verifikasi] + β”‚ ↓ + β”‚ END + └─ NO ↓ + ↓ +[Update tabel ticket_order_items:] + - is_used = true + - used_at = waktu sekarang + ↓ +[Simpan perubahan ke database] + ↓ +[Tampilkan notifikasi sukses:] + "Tiket berhasil ditandai sebagai dipakai" + ↓ +[Refresh halaman verifikasi] + ↓ +[Tampilkan hasil dengan status "Sudah Dipakai"] + ↓ +[Hide tombol "Tandai Sebagai Dipakai"] + ↓ +[Tampilkan tombol "Scan Lagi"] + ↓ +END +``` + +--- + +## Panduan Membuat di Draw.io + +### Simbol Flowchart +1. **Terminator** (Oval) - START/END +2. **Process** (Rectangle) - Proses/aksi +3. **Decision** (Diamond) - Kondisi/percabangan +4. **Data** (Parallelogram) - Input/Output +5. **Database** (Cylinder) - Operasi database +6. **Manual Operation** (Trapezoid) - Operasi manual admin +7. **Loop** (Hexagon) - Perulangan + +### Warna yang Disarankan +- **START/END**: Hijau teal (#14B8A6) +- **Process**: Biru muda (#E3F2FD) +- **Decision**: Kuning (#FFF59D) +- **Database Operation**: Ungu muda (#E1BEE7) +- **Camera/Scanner**: Biru tua muda (#BBDEFB) +- **Valid**: Hijau muda (#C8E6C9) +- **Used/Invalid**: Merah muda (#FFCDD2) +- **Loop**: Oranye muda (#FFE0B2) + +### Tips +- Gunakan swimlane untuk memisahkan Admin, Camera, dan System +- Tandai proses scanning dengan warna khusus +- Gunakan loop symbol untuk proses scanning berulang +- Tambahkan notes untuk library yang digunakan (html5-qrcode) + +--- + +**Dibuat**: 25 Februari 2026 +**Fitur**: QR Scanner Verifikasi Tiket +**Sistem**: Banyu Biru Ticketing & Booking System diff --git a/flowcharts/ticket-management-flowchart.md b/flowcharts/ticket-management-flowchart.md new file mode 100644 index 0000000..c32325e --- /dev/null +++ b/flowcharts/ticket-management-flowchart.md @@ -0,0 +1,298 @@ +# Flowchart - Fitur Manajemen Tiket Admin + +## Daftar Isi +1. [Lihat Daftar Tiket](#1-lihat-daftar-tiket) +2. [Tambah Tiket Baru](#2-tambah-tiket-baru) +3. [Edit Tiket](#3-edit-tiket) +4. [Hapus Tiket](#4-hapus-tiket) +5. [Toggle Status Aktif Tiket](#5-toggle-status-aktif-tiket) + +--- + +## 1. Lihat Daftar Tiket + +### Deskripsi +Flowchart untuk admin melihat daftar semua tiket. + +### Flowchart + +``` +START + ↓ +{User sudah login?} + β”œβ”€ NO β†’ [Redirect ke halaman login] β†’ END + └─ YES ↓ + ↓ +{User adalah admin?} + β”œβ”€ NO β†’ [Error 403: Unauthorized] β†’ END + └─ YES ↓ + ↓ +[Admin mengakses menu "Tiket"] + ↓ +[Query database: ambil semua tickets] + ↓ +[Urutkan berdasarkan ID] + ↓ +[Tampilkan tabel tiket:] + - Nama Tiket + - Harga + - Deskripsi + - Status (Aktif/Nonaktif) + - Aksi (Edit, Hapus) + ↓ +[Tampilkan tombol "Tambah Tiket"] + ↓ +END +``` + +--- + +## 2. Tambah Tiket Baru + +### Deskripsi +Flowchart untuk admin menambah tiket baru. + +### Flowchart + +``` +START + ↓ +[Admin di halaman daftar tiket] + ↓ +[Admin klik tombol "Tambah Tiket"] + ↓ +[Redirect ke halaman form tambah tiket] + ↓ +[Tampilkan form:] + - Nama Tiket + - Harga + - Deskripsi + - Status Aktif (checkbox) + ↓ +[Admin mengisi form] + ↓ +[Admin klik tombol "Simpan"] + ↓ + + ↓ +{Nama tiket terisi?} + β”œβ”€ NO β†’ [Error: "Nama tiket wajib diisi"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Harga terisi dan valid?} + β”œβ”€ NO β†’ [Error: "Harga wajib diisi dan harus angka"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Harga >= 0?} + β”œβ”€ NO β†’ [Error: "Harga tidak boleh negatif"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +[Simpan data ke tabel tickets:] + - name + - price + - description + - is_active (default: true) + ↓ +[Tampilkan notifikasi sukses:] + "Tiket berhasil ditambahkan" + ↓ +[Redirect ke halaman daftar tiket] + ↓ +END +``` + + +--- + +## 3. Edit Tiket + +### Deskripsi +Flowchart untuk admin mengedit data tiket. + +### Flowchart + +``` +START + ↓ +[Admin di halaman daftar tiket] + ↓ +[Admin klik tombol "Edit" pada tiket] + ↓ +[Query database: ambil tiket berdasarkan ID] + ↓ +{Tiket ditemukan?} + β”œβ”€ NO β†’ [Error 404: Tiket tidak ditemukan] β†’ END + └─ YES ↓ + ↓ +[Redirect ke halaman form edit tiket] + ↓ +[Tampilkan form dengan data tiket:] + - Nama Tiket (terisi) + - Harga (terisi) + - Deskripsi (terisi) + - Status Aktif (checked/unchecked) + ↓ +[Admin mengubah data] + ↓ +[Admin klik tombol "Update"] + ↓ + + ↓ +{Nama tiket terisi?} + β”œβ”€ NO β†’ [Error: "Nama tiket wajib diisi"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Harga terisi dan valid?} + β”œβ”€ NO β†’ [Error: "Harga wajib diisi dan harus angka"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Harga >= 0?} + β”œβ”€ NO β†’ [Error: "Harga tidak boleh negatif"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +[Update tabel tickets:] + - name + - price + - description + - is_active + ↓ +[Simpan perubahan ke database] + ↓ +[Tampilkan notifikasi sukses:] + "Tiket berhasil diupdate" + ↓ +[Redirect ke halaman daftar tiket] + ↓ +END +``` + +--- + +## 4. Hapus Tiket + +### Deskripsi +Flowchart untuk admin menghapus tiket. + +### Flowchart + +``` +START + ↓ +[Admin di halaman daftar tiket] + ↓ +[Admin klik tombol "Hapus" pada tiket] + ↓ +[Tampilkan konfirmasi SweetAlert:] + "Yakin ingin menghapus tiket ini?" + ↓ +{Admin konfirmasi?} + β”œβ”€ NO (Batal) β†’ [Tutup dialog] β†’ END + └─ YES ↓ + ↓ +[Query database: ambil tiket berdasarkan ID] + ↓ +{Tiket ditemukan?} + β”œβ”€ NO β†’ [Error: "Tiket tidak ditemukan"] β†’ END + └─ YES ↓ + ↓ +[Cek apakah tiket pernah digunakan] + ↓ +[Query: cek ticket_order_items dengan ticket_id ini] + ↓ +{Tiket pernah digunakan?} + β”œβ”€ YES β†’ [Error: "Tiket tidak dapat dihapus karena sudah pernah digunakan"] + β”‚ ↓ + β”‚ [Sarankan: nonaktifkan tiket saja] + β”‚ ↓ + β”‚ END + └─ NO ↓ + ↓ +[Hapus tiket dari database] + ↓ +[Tampilkan notifikasi sukses:] + "Tiket berhasil dihapus" + ↓ +[Refresh halaman daftar tiket] + ↓ +END +``` + +--- + +## 5. Toggle Status Aktif Tiket + +### Deskripsi +Flowchart untuk mengaktifkan/menonaktifkan tiket. + +### Flowchart + +``` +START + ↓ +[Admin di halaman edit tiket] + ↓ +[Tampilkan checkbox "Status Aktif"] + ↓ +{Tiket saat ini aktif?} + β”œβ”€ YES β†’ [Checkbox checked] + └─ NO β†’ [Checkbox unchecked] + ↓ +[Admin toggle checkbox] + ↓ +[Admin klik tombol "Update"] + ↓ +[Update tabel tickets:] + - is_active = nilai checkbox (true/false) + ↓ +{is_active = true?} + β”œβ”€ YES β†’ [Tiket akan muncul di halaman user] + β”‚ ↓ + β”‚ [Tiket dapat dibeli] + β”‚ ↓ + β”‚ [Notifikasi: "Tiket diaktifkan"] + β”‚ + └─ NO β†’ [Tiket tidak muncul di halaman user] + ↓ + [Tiket tidak dapat dibeli] + ↓ + [Notifikasi: "Tiket dinonaktifkan"] + ↓ +[Redirect ke halaman daftar tiket] + ↓ +END +``` + +--- + +## Panduan Membuat di Draw.io + +### Simbol Flowchart +1. **Terminator** (Oval) - START/END +2. **Process** (Rectangle) - Proses/aksi +3. **Decision** (Diamond) - Kondisi/percabangan +4. **Data** (Parallelogram) - Input/Output +5. **Database** (Cylinder) - Operasi database +6. **Document** (Rectangle with wavy bottom) - Form + +### Warna yang Disarankan +- **START/END**: Hijau teal (#14B8A6) +- **Process**: Biru muda (#E3F2FD) +- **Decision**: Kuning (#FFF59D) +- **Database Operation**: Ungu muda (#E1BEE7) +- **Form**: Biru tua muda (#BBDEFB) +- **Create**: Hijau muda (#C8E6C9) +- **Update**: Biru muda (#B3E5FC) +- **Delete**: Merah muda (#FFCDD2) +- **Toggle**: Oranye muda (#FFE0B2) + +### Tips +- Gunakan swimlane untuk memisahkan Admin dan System +- Tandai operasi CRUD dengan warna berbeda +- Gunakan connector yang jelas untuk decision branch +- Tambahkan notes untuk validasi penting + +--- + +**Dibuat**: 25 Februari 2026 +**Fitur**: Manajemen Tiket Admin +**Sistem**: Banyu Biru Ticketing & Booking System diff --git a/flowcharts/ticket-purchase-flowchart.md b/flowcharts/ticket-purchase-flowchart.md new file mode 100644 index 0000000..4ee0f80 --- /dev/null +++ b/flowcharts/ticket-purchase-flowchart.md @@ -0,0 +1,300 @@ +# Flowchart - Fitur Pembelian Tiket + +## Daftar Isi +1. [Lihat Daftar Tiket](#1-lihat-daftar-tiket) +2. [Beli Tiket](#2-beli-tiket) +3. [Upload Bukti Pembayaran](#3-upload-bukti-pembayaran) +4. [Download Tiket](#4-download-tiket) + +--- + +## 1. Lihat Daftar Tiket + +### Deskripsi +Flowchart untuk melihat daftar tiket yang tersedia. + +### Flowchart + +``` +START + ↓ +{User sudah login?} + β”œβ”€ NO β†’ [Redirect ke halaman login] β†’ END + └─ YES ↓ + ↓ +{User adalah admin?} + β”œβ”€ YES β†’ [Tampilkan SweetAlert: "Admin tidak dapat membeli tiket"] + β”‚ ↓ + β”‚ [Redirect ke dashboard admin] + β”‚ ↓ + β”‚ END + └─ NO ↓ + ↓ +[Query database: ambil tiket dengan is_active = true] + ↓ +[Filter: name = "Tiket Masuk"] + ↓ +{Tiket ditemukan?} + β”œβ”€ NO β†’ [Query: ambil semua tiket aktif] + β”‚ ↓ + β”‚ [Tampilkan tiket pertama] + └─ YES ↓ + ↓ +[Tampilkan halaman pembelian tiket] + ↓ +[Tampilkan informasi tiket:] + - Nama tiket + - Harga + - Deskripsi + ↓ +[Tampilkan form pembelian] + ↓ +END +``` + +--- + +## 2. Beli Tiket + +### Deskripsi +Flowchart untuk proses pembelian tiket lengkap. + +### Flowchart + +``` +START + ↓ +[User di halaman pembelian tiket] + ↓ +[User pilih tanggal kunjungan] + ↓ + + ↓ +{Tanggal >= hari ini?} + β”œβ”€ NO β†’ [Error: "Tanggal tidak valid"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +[User pilih jenis tiket] + ↓ +[User tentukan jumlah tiket (1-20)] + ↓ +{Jumlah valid (1-20)?} + β”œβ”€ NO β†’ [Error: "Jumlah tidak valid"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +[Hitung total harga = jumlah Γ— harga tiket] + ↓ +[Tampilkan ringkasan pesanan] + ↓ +[User klik "Lanjutkan Pembayaran"] + ↓ +[Mulai database transaction] + ↓ +[Generate kode order unik (AT-XXXXX)] + ↓ +[Simpan data ke tabel ticket_orders:] + - user_id + - order_code + - visit_date + - total_qty + - total_price + - status = 'pending' + ↓ +[Loop untuk setiap tiket yang dibeli] + ↓ + β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” + β”‚ [Generate kode tiket unik (AT-XXXXX)] + β”‚ ↓ + β”‚ [Generate QR code SVG] + β”‚ ↓ + β”‚ [Simpan QR code ke /public/qrcodes/] + β”‚ ↓ + β”‚ [Simpan data ke ticket_order_items:] + β”‚ - ticket_order_id + β”‚ - ticket_id + β”‚ - ticket_code + β”‚ - qr_code_path + β”‚ - qty = 1 + β”‚ - price + β”‚ - is_used = false + β”‚ ↓ + β”‚ [Ulangi untuk tiket berikutnya] + β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + ↓ +[Commit transaction] + ↓ +[Redirect ke halaman pembayaran] + ↓ +END +``` + +--- + +## 3. Upload Bukti Pembayaran + +### Deskripsi +Flowchart untuk upload bukti transfer pembayaran tiket. + +### Flowchart + +``` +START + ↓ +[User di halaman pembayaran] + ↓ +[Tampilkan informasi order:] + - Kode order + - Total harga + - Daftar tiket + ↓ +[Query database: ambil daftar rekening bank aktif] + ↓ +[Tampilkan nomor rekening bank] + ↓ +[User melakukan transfer ke rekening] + ↓ +[User klik "Upload Bukti Pembayaran"] + ↓ +[User pilih file bukti transfer] + ↓ + + ↓ +{File dipilih?} + β”œβ”€ NO β†’ [Error: "File wajib dipilih"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Format file valid (jpg, jpeg, png, pdf)?} + β”œβ”€ NO β†’ [Error: "Format file tidak valid"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Ukuran file <= 5MB?} + β”œβ”€ NO β†’ [Error: "Ukuran file terlalu besar"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +[Generate nama file unik:] + Format: YYYYMMDDHHMMSS_proof_uniqid.ext + ↓ +[Simpan file ke /public/payment-proofs/] + ↓ +[Update tabel ticket_orders:] + - payment_proof = path file + - status tetap 'pending' + ↓ +[Tampilkan notifikasi sukses] + ↓ +[Redirect ke halaman download tiket] + ↓ +END +``` + +--- + +## 4. Download Tiket + +### Deskripsi +Flowchart untuk download tiket setelah pembayaran dikonfirmasi. + +### Flowchart + +``` +START + ↓ +[User mengakses halaman download] + ↓ +[Query database: ambil order berdasarkan order_code] + ↓ +{Order ditemukan?} + β”œβ”€ NO β†’ [Error 404: Order tidak ditemukan] β†’ END + └─ YES ↓ + ↓ +{Order milik user yang login?} + β”œβ”€ NO β†’ [Error 403: Unauthorized] β†’ END + └─ YES ↓ + ↓ +[Ambil semua ticket_order_items untuk order ini] + ↓ +[Cek status order] + ↓ +{Status = 'confirmed'?} + β”œβ”€ YES β†’ [Tampilkan halaman download] + β”‚ ↓ + β”‚ [Tampilkan pesan: "Pembayaran berhasil diverifikasi"] + β”‚ ↓ + β”‚ [Tampilkan daftar tiket dengan QR code] + β”‚ ↓ + β”‚ [Aktifkan tombol "Download PDF"] + β”‚ ↓ + β”‚ [Aktifkan tombol "Print Tiket"] + β”‚ ↓ + β”‚ [User klik tombol download] + β”‚ ↓ + β”‚ [Generate PDF tiket dengan:] + β”‚ - Kode tiket + β”‚ - QR code + β”‚ - Nama pengunjung + β”‚ - Tanggal kunjungan + β”‚ - Jenis tiket + β”‚ ↓ + β”‚ [Download file PDF] + β”‚ ↓ + β”‚ END + β”‚ + β”œβ”€ Status = 'pending' β†’ [Tampilkan halaman download] + β”‚ ↓ + β”‚ [Tampilkan pesan: "Menunggu verifikasi admin"] + β”‚ ↓ + β”‚ [Tampilkan daftar tiket] + β”‚ ↓ + β”‚ [Disabled tombol "Download PDF" (abu-abu)] + β”‚ ↓ + β”‚ [Disabled tombol "Print Tiket" (abu-abu)] + β”‚ ↓ + β”‚ [Tampilkan alert: "Menunggu verifikasi admin"] + β”‚ ↓ + β”‚ END + β”‚ + └─ Status = 'rejected' β†’ [Tampilkan halaman download] + ↓ + [Tampilkan pesan: "Pembayaran ditolak"] + ↓ + [Tampilkan alasan penolakan] + ↓ + [Disabled tombol download] + ↓ + [Tampilkan tombol "Upload Ulang Bukti"] + ↓ + END +``` + +--- + +## Panduan Membuat di Draw.io + +### Simbol Flowchart +1. **Terminator** (Oval) - START/END +2. **Process** (Rectangle) - Proses/aksi +3. **Decision** (Diamond) - Kondisi/percabangan +4. **Data** (Parallelogram) - Input/Output +5. **Predefined Process** (Rectangle with double lines) - Subprocess +6. **Loop** (Hexagon) - Perulangan + +### Warna yang Disarankan +- **START/END**: Hijau teal (#14B8A6) +- **Process**: Biru muda (#E3F2FD) +- **Decision**: Kuning (#FFF59D) +- **Database Operation**: Ungu muda (#E1BEE7) +- **Error**: Merah muda (#FFCDD2) +- **Success**: Hijau muda (#C8E6C9) +- **Loop**: Oranye muda (#FFE0B2) + +### Tips +- Gunakan swimlane untuk memisahkan User dan System +- Tandai proses database dengan warna berbeda +- Gunakan connector yang jelas untuk decision branch +- Tambahkan notes untuk penjelasan kompleks + +--- + +**Dibuat**: 25 Februari 2026 +**Fitur**: Pembelian Tiket +**Sistem**: Banyu Biru Ticketing & Booking System diff --git a/flowcharts/user-history-flowchart.md b/flowcharts/user-history-flowchart.md new file mode 100644 index 0000000..7245648 --- /dev/null +++ b/flowcharts/user-history-flowchart.md @@ -0,0 +1,345 @@ +# Flowchart - Fitur Riwayat User + +## Daftar Isi +1. [Lihat Riwayat Tiket](#1-lihat-riwayat-tiket) +2. [Lihat Riwayat Booking](#2-lihat-riwayat-booking) +3. [Lihat Detail Tiket dari Riwayat](#3-lihat-detail-tiket-dari-riwayat) +4. [Lihat Detail Booking dari Riwayat](#4-lihat-detail-booking-dari-riwayat) + +--- + +## 1. Lihat Riwayat Tiket + +### Deskripsi +Flowchart untuk user melihat riwayat pembelian tiket. + +### Flowchart + +``` +START + ↓ +{User sudah login?} + β”œβ”€ NO β†’ [Redirect ke halaman login] β†’ END + └─ YES ↓ + ↓ +{User adalah admin?} + β”œβ”€ YES β†’ [Redirect ke dashboard admin] β†’ END + └─ NO ↓ + ↓ +[User klik menu "Tiket Saya" di dropdown navbar] + ↓ +[Query database: ticket_orders] + ↓ +[Filter: user_id = user yang login] + ↓ +[Include relasi: items.ticket] + ↓ +[Urutkan: created_at DESC] + ↓ +[Pagination: 10 data per halaman] + ↓ +{Ada data tiket?} + β”œβ”€ NO β†’ [Tampilkan pesan: "Belum ada riwayat pembelian tiket"] + β”‚ ↓ + β”‚ [Tampilkan tombol "Beli Tiket Sekarang"] + β”‚ ↓ + β”‚ END + └─ YES ↓ + ↓ +[Loop untuk setiap order:] + ↓ + β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” + β”‚ [Tampilkan card order:] + β”‚ - Kode Order + β”‚ - Tanggal Kunjungan + β”‚ - Total Qty + β”‚ - Total Harga + β”‚ - Status (badge warna) + β”‚ - Tanggal Order + β”‚ ↓ + β”‚ [Tampilkan daftar tiket dalam order] + β”‚ ↓ + β”‚ {Status = 'confirmed'?} + β”‚ β”œβ”€ YES β†’ [Tampilkan tombol "Download Tiket"] + β”‚ β”‚ ↓ + β”‚ β”‚ [Tampilkan tombol "Lihat Detail"] + β”‚ β”‚ + β”‚ β”œβ”€ Status = 'pending' β†’ [Tampilkan badge "Menunggu Verifikasi"] + β”‚ β”‚ ↓ + β”‚ β”‚ [Tampilkan tombol "Lihat Detail"] + β”‚ β”‚ + β”‚ └─ Status = 'rejected' β†’ [Tampilkan badge "Ditolak"] + β”‚ ↓ + β”‚ [Tampilkan tombol "Upload Ulang"] + β”‚ ↓ + β”‚ [Ulangi untuk order berikutnya] + β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + ↓ +[Tampilkan pagination] + ↓ +END +``` + +--- + +## 2. Lihat Riwayat Booking + +### Deskripsi +Flowchart untuk user melihat riwayat booking pendopo. + +### Flowchart + +``` +START + ↓ +{User sudah login?} + β”œβ”€ NO β†’ [Redirect ke halaman login] β†’ END + └─ YES ↓ + ↓ +{User adalah admin?} + β”œβ”€ YES β†’ [Redirect ke dashboard admin] β†’ END + └─ NO ↓ + ↓ +[User klik menu "Booking Saya" di dropdown navbar] + ↓ +[Query database: bookings] + ↓ +[Filter: user_id = user yang login] + ↓ +[Include relasi: place] + ↓ +[Urutkan: created_at DESC] + ↓ +[Pagination: 10 data per halaman] + ↓ +{Ada data booking?} + β”œβ”€ NO β†’ [Tampilkan pesan: "Belum ada riwayat booking"] + β”‚ ↓ + β”‚ [Tampilkan tombol "Booking Sekarang"] + β”‚ ↓ + β”‚ END + └─ YES ↓ + ↓ +[Loop untuk setiap booking:] + ↓ + β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” + β”‚ [Tampilkan card booking:] + β”‚ - Kode Booking + β”‚ - Nama Tempat + β”‚ - Tanggal Booking + β”‚ - Nama Pengunjung + β”‚ - Total Harga + β”‚ - Status (badge warna) + β”‚ - Tanggal Order + β”‚ ↓ + β”‚ {Status = 'confirmed'?} + β”‚ β”œβ”€ YES β†’ [Tampilkan badge "Dikonfirmasi"] + β”‚ β”‚ ↓ + β”‚ β”‚ [Tampilkan tombol "Lihat Detail"] + β”‚ β”‚ + β”‚ β”œβ”€ Status = 'pending' β†’ [Tampilkan badge "Menunggu Verifikasi"] + β”‚ β”‚ ↓ + β”‚ β”‚ [Tampilkan tombol "Lihat Detail"] + β”‚ β”‚ ↓ + β”‚ β”‚ [Tampilkan tombol "Upload Bukti"] + β”‚ β”‚ + β”‚ └─ Status = 'rejected' β†’ [Tampilkan badge "Ditolak"] + β”‚ ↓ + β”‚ [Tampilkan alasan penolakan] + β”‚ ↓ + β”‚ [Tampilkan tombol "Upload Ulang"] + β”‚ ↓ + β”‚ [Ulangi untuk booking berikutnya] + β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + ↓ +[Tampilkan pagination] + ↓ +END +``` + +--- + +## 3. Lihat Detail Tiket dari Riwayat + +### Deskripsi +Flowchart untuk user melihat detail order tiket dari riwayat. + +### Flowchart + +``` +START + ↓ +[User di halaman riwayat tiket] + ↓ +[User klik tombol "Lihat Detail" atau "Download Tiket"] + ↓ +[Redirect ke halaman download tiket] + ↓ +[Query database: ticket_orders] + ↓ +[Filter: order_code = kode yang diklik] + ↓ +[Filter: user_id = user yang login] + ↓ +[Include relasi: items.ticket] + ↓ +{Order ditemukan?} + β”œβ”€ NO β†’ [Error 404: Order tidak ditemukan] β†’ END + └─ YES ↓ + ↓ +{Order milik user yang login?} + β”œβ”€ NO β†’ [Error 403: Unauthorized] β†’ END + └─ YES ↓ + ↓ +[Tampilkan halaman detail order] + ↓ +[Cek status order] + ↓ +{Status = 'confirmed'?} + β”œβ”€ YES β†’ [Tampilkan pesan sukses] + β”‚ ↓ + β”‚ [Tampilkan daftar tiket dengan QR code] + β”‚ ↓ + β”‚ [Enable tombol "Download PDF"] + β”‚ ↓ + β”‚ [Enable tombol "Print Tiket"] + β”‚ ↓ + β”‚ END + β”‚ + β”œβ”€ Status = 'pending' β†’ [Tampilkan pesan warning] + β”‚ ↓ + β”‚ [Tampilkan daftar tiket] + β”‚ ↓ + β”‚ [Disable tombol download (abu-abu)] + β”‚ ↓ + β”‚ [Tampilkan: "Menunggu verifikasi admin"] + β”‚ ↓ + β”‚ END + β”‚ + └─ Status = 'rejected' β†’ [Tampilkan pesan danger] + ↓ + [Tampilkan alasan penolakan] + ↓ + [Tampilkan tombol "Upload Ulang Bukti"] + ↓ + END +``` + +--- + +## 4. Lihat Detail Booking dari Riwayat + +### Deskripsi +Flowchart untuk user melihat detail booking dari riwayat. + +### Flowchart + +``` +START + ↓ +[User di halaman riwayat booking] + ↓ +[User klik tombol "Lihat Detail"] + ↓ +[Redirect ke halaman status booking] + ↓ +[Query database: bookings] + ↓ +[Filter: booking_code = kode yang diklik] + ↓ +[Filter: user_id = user yang login] + ↓ +[Include relasi: place] + ↓ +{Booking ditemukan?} + β”œβ”€ NO β†’ [Error 404: Booking tidak ditemukan] β†’ END + └─ YES ↓ + ↓ +{Booking milik user yang login?} + β”œβ”€ NO β†’ [Error 403: Unauthorized] β†’ END + └─ YES ↓ + ↓ +[Tampilkan halaman detail booking] + ↓ +[Tampilkan informasi booking:] + - Kode Booking + - Nama Tempat + - Tanggal Booking + - Nama Pengunjung + - Nomor Telepon + - Alamat + - Total Harga + - Catatan + - Bukti Pembayaran + ↓ +[Cek status booking] + ↓ +{Status = 'confirmed'?} + β”œβ”€ YES β†’ [Tampilkan alert sukses:] + β”‚ "Pembayaran berhasil diverifikasi" + β”‚ ↓ + β”‚ [Tampilkan badge "Confirmed"] + β”‚ ↓ + β”‚ [Tampilkan tombol "Kembali"] + β”‚ ↓ + β”‚ END + β”‚ + β”œβ”€ Status = 'pending' β†’ [Tampilkan alert warning:] + β”‚ "Menunggu verifikasi admin" + β”‚ ↓ + β”‚ [Tampilkan badge "Pending"] + β”‚ ↓ + β”‚ {Bukti pembayaran sudah diupload?} + β”‚ β”œβ”€ YES β†’ [Tampilkan pesan: "Bukti sedang diverifikasi"] + β”‚ └─ NO β†’ [Tampilkan tombol "Upload Bukti"] + β”‚ ↓ + β”‚ END + β”‚ + └─ Status = 'rejected' β†’ [Tampilkan alert danger:] + "Pembayaran ditolak" + ↓ + [Tampilkan badge "Rejected"] + ↓ + [Tampilkan alasan penolakan] + ↓ + [Tampilkan tombol "Upload Ulang Bukti"] + ↓ + END +``` + +--- + +## Panduan Membuat di Draw.io + +### Simbol Flowchart +1. **Terminator** (Oval) - START/END +2. **Process** (Rectangle) - Proses/aksi +3. **Decision** (Diamond) - Kondisi/percabangan +4. **Data** (Parallelogram) - Input/Output +5. **Database** (Cylinder) - Operasi database +6. **Loop** (Hexagon) - Perulangan +7. **Display** (Parallelogram with curved sides) - Tampilan UI + +### Warna yang Disarankan +- **START/END**: Hijau teal (#14B8A6) +- **Process**: Biru muda (#E3F2FD) +- **Decision**: Kuning (#FFF59D) +- **Database Operation**: Ungu muda (#E1BEE7) +- **Display**: Biru tua muda (#BBDEFB) +- **Confirmed**: Hijau muda (#C8E6C9) +- **Pending**: Kuning muda (#FFF9C4) +- **Rejected**: Merah muda (#FFCDD2) +- **Loop**: Oranye muda (#FFE0B2) + +### Tips +- Gunakan swimlane untuk memisahkan User dan System +- Tandai status order dengan warna berbeda +- Gunakan loop symbol untuk iterasi data +- Tambahkan notes untuk pagination +- Highlight perbedaan tampilan berdasarkan status + +--- + +**Dibuat**: 25 Februari 2026 +**Fitur**: Riwayat User (Tiket & Booking) +**Sistem**: Banyu Biru Ticketing & Booking System diff --git a/flowcharts/user-profile-flowchart.md b/flowcharts/user-profile-flowchart.md new file mode 100644 index 0000000..879162f --- /dev/null +++ b/flowcharts/user-profile-flowchart.md @@ -0,0 +1,233 @@ +# Flowchart - Fitur Profil User + +## Daftar Isi +1. [Lihat Profil User](#1-lihat-profil-user) +2. [Edit Profil User](#2-edit-profil-user) +3. [Ubah Password User](#3-ubah-password-user) + +--- + +## 1. Lihat Profil User + +### Deskripsi +Flowchart untuk user melihat profil sendiri. + +### Flowchart + +``` +START + ↓ +{User sudah login?} + β”œβ”€ NO β†’ [Redirect ke halaman login] β†’ END + └─ YES ↓ + ↓ +{User adalah admin?} + β”œβ”€ YES β†’ [Redirect ke profil admin] β†’ END + └─ NO ↓ + ↓ +[User klik menu "Profil Saya" di dropdown navbar] + ↓ +[Query database: users] + ↓ +[Filter: id = user yang login] + ↓ +{User ditemukan?} + β”œβ”€ NO β†’ [Error: User tidak ditemukan] β†’ [Logout] β†’ END + └─ YES ↓ + ↓ +[Tampilkan halaman profil] + ↓ +[Tampilkan informasi user:] + - Nama + - Email + - Nomor Telepon + - Alamat + - Tanggal Bergabung + ↓ +[Tampilkan tombol "Edit Profil"] + ↓ +END +``` + +--- + +## 2. Edit Profil User + +### Deskripsi +Flowchart untuk user mengedit profil sendiri. + +### Flowchart + +``` +START + ↓ +[User di halaman profil] + ↓ +[User klik tombol "Edit Profil"] + ↓ +[Tampilkan form edit profil dengan data user:] + - Nama (terisi) + - Email (terisi) + - Nomor Telepon (terisi/kosong) + - Alamat (terisi/kosong) + ↓ +[User mengubah data] + ↓ +[User klik tombol "Update Profil"] + ↓ + + ↓ +{Nama terisi?} + β”œβ”€ NO β†’ [Error: "Nama wajib diisi"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Format email valid?} + β”œβ”€ NO β†’ [Error: "Format email tidak valid"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +[Query database: cek email sudah digunakan user lain] + ↓ +{Email digunakan user lain?} + β”œβ”€ YES β†’ [Error: "Email sudah terdaftar"] β†’ [Kembali ke form] β†’ END + └─ NO ↓ + ↓ +{Nomor telepon diisi?} + β”œβ”€ YES β†’ {Format nomor telepon valid?} + β”‚ β”œβ”€ NO β†’ [Error: "Format nomor telepon tidak valid"] β†’ [Kembali ke form] β†’ END + β”‚ └─ YES β†’ [Lanjut] + └─ NO β†’ [Lanjut] + ↓ +[Update tabel users:] + - name + - email + - phone (jika diisi) + - address (jika diisi) + ↓ +[Simpan perubahan ke database] + ↓ +[Update session dengan data baru] + ↓ +[Tampilkan notifikasi sukses:] + "Profil berhasil diupdate" + ↓ +[Refresh halaman profil] + ↓ +END +``` + +--- + +## 3. Ubah Password User + +### Deskripsi +Flowchart untuk user mengubah password sendiri. + +### Flowchart + +``` +START + ↓ +[User di halaman profil] + ↓ +[User klik tombol "Ubah Password"] + ↓ +[Tampilkan form ubah password:] + - Password Lama + - Password Baru + - Konfirmasi Password Baru + ↓ +[User mengisi form] + ↓ +[User klik tombol "Update Password"] + ↓ + + ↓ +{Password lama terisi?} + β”œβ”€ NO β†’ [Error: "Password lama wajib diisi"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +[Query database: ambil user yang login] + ↓ +[Verifikasi password lama dengan hash] + ↓ +{Password lama cocok?} + β”œβ”€ NO β†’ [Error: "Password lama salah"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Password baru terisi?} + β”œβ”€ NO β†’ [Error: "Password baru wajib diisi"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Password baru minimal 8 karakter?} + β”œβ”€ NO β†’ [Error: "Password minimal 8 karakter"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Password baru = Konfirmasi Password?} + β”œβ”€ NO β†’ [Error: "Konfirmasi password tidak cocok"] β†’ [Kembali ke form] β†’ END + └─ YES ↓ + ↓ +{Password baru berbeda dari password lama?} + β”œβ”€ NO β†’ [Error: "Password baru harus berbeda dari password lama"] + β”‚ ↓ + β”‚ [Kembali ke form] + β”‚ ↓ + β”‚ END + └─ YES ↓ + ↓ +[Hash password baru menggunakan bcrypt] + ↓ +[Update tabel users:] + - password = password baru (hashed) + ↓ +[Simpan perubahan ke database] + ↓ +[Tampilkan notifikasi sukses:] + "Password berhasil diubah" + ↓ +[Redirect ke halaman profil] + ↓ +END +``` + +--- + +## Panduan Membuat di Draw.io + +### Simbol Flowchart +1. **Terminator** (Oval) - START/END +2. **Process** (Rectangle) - Proses/aksi +3. **Decision** (Diamond) - Kondisi/percabangan +4. **Data** (Parallelogram) - Input/Output +5. **Database** (Cylinder) - Operasi database +6. **Document** (Rectangle with wavy bottom) - Form +7. **Manual Input** (Parallelogram with slanted top) - Input user + +### Warna yang Disarankan +- **START/END**: Hijau teal (#14B8A6) +- **Process**: Biru muda (#E3F2FD) +- **Decision**: Kuning (#FFF59D) +- **Database Operation**: Ungu muda (#E1BEE7) +- **Form**: Biru tua muda (#BBDEFB) +- **Update**: Biru muda (#B3E5FC) +- **Security Check**: Oranye muda (#FFE0B2) +- **Success**: Hijau muda (#C8E6C9) +- **Error**: Merah muda (#FFCDD2) + +### Tips +- Gunakan swimlane untuk memisahkan User dan System +- Tandai proses security check (password verification) dengan warna khusus +- Gunakan connector yang jelas untuk decision branch +- Tambahkan notes untuk validasi password +- Highlight proses hashing password + +### Security Notes +- Password lama harus diverifikasi sebelum mengubah password +- Password baru harus di-hash menggunakan bcrypt +- Password baru harus berbeda dari password lama +- Session harus diupdate setelah perubahan data + +--- + +**Dibuat**: 25 Februari 2026 +**Fitur**: Profil User +**Sistem**: Banyu Biru Ticketing & Booking System