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
2026-02-25 08:24:31 +07:00 · 2026-02-25 08:24:31 +07:00 · 4ba89a1aea
parent 69e9a64014
commit 4ba89a1aea
12 changed files with 3650 additions and 0 deletions
--- a/flowcharts/README.md
+++ 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
--- a/flowcharts/admin-management-flowchart.md
+++ 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"]
  ↓
 <Validasi input>
  ↓
 {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"]
  ↓
 <Validasi input>
  ↓
 {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"]
  ↓
 <Validasi input>
  ↓
 {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
--- a/flowcharts/auth-flowchart.md
+++ 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]
  ↓
 <Validasi format email>
  ↓
 {Email valid?}
  ├─ NO → [Tampilkan error: "Format email salah"] → [Kembali ke form] → END
  └─ YES ↓
       ↓
 <Validasi password tidak kosong>
  ↓
 {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]
  ↓
 <Validasi input>
  ↓
 {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
--- a/flowcharts/bank-account-flowchart.md
+++ 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"]
  ↓
 <Validasi input>
  ↓
 {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"]
  ↓
 <Validasi input>
  ↓
 {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
--- a/flowcharts/booking-flowchart.md
+++ 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"]
  ↓
 <Validasi input>
  ↓
 {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]
  ↓
 <Validasi file>
  ↓
 {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
--- a/flowcharts/dashboard-flowchart.md
+++ 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
--- a/flowcharts/payment-verification-flowchart.md
+++ 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"]
  ↓
 <Validasi input>
  ↓
 {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
--- a/flowcharts/qr-scanner-flowchart.md
+++ 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"]
  ↓
 <Validasi input>
  ↓
 {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
--- a/flowcharts/ticket-management-flowchart.md
+++ 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"]
  ↓
 <Validasi input>
  ↓
 {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"]
  ↓
 <Validasi input>
  ↓
 {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
--- a/flowcharts/ticket-purchase-flowchart.md
+++ 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]
  ↓
 <Validasi tanggal>
  ↓
 {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]
  ↓
 <Validasi file>
  ↓
 {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
--- a/flowcharts/user-history-flowchart.md
+++ 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
--- a/flowcharts/user-profile-flowchart.md
+++ 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"]
  ↓
 <Validasi input>
  ↓
 {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"]
  ↓
 <Validasi input>
  ↓
 {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