Proses pendaftaran user baru dimulai dari pengisian form registrasi, validasi data, pembuatan akun,
hingga verifikasi email. User harus memverifikasi email sebelum dapat menggunakan akun secara penuh.
flowchart TD
A[Start] --> B[User Buka Halaman Register]
B --> C[Isi Form Registrasi]
C --> D{Validasi Input}
D -->|Invalid| E[Tampilkan Error]
E --> C
D -->|Valid| F{Cek Email di Database}
F -->|Sudah Terdaftar| G[Email Sudah Digunakan]
G --> C
F -->|Belum Terdaftar| H[Hash Password dengan Bcrypt]
H --> I[Simpan User ke Database]
I --> J[Generate Verification Token]
J --> K[Kirim Email Verifikasi]
K --> L[Tampilkan Pesan Sukses]
L --> M[User Cek Email]
M --> N[Klik Link Verifikasi]
N --> O{Token Valid?}
O -->|Invalid/Expired| P[Token Tidak Valid]
P --> Q[Request Resend Email]
Q --> K
O -->|Valid| R[Update Status is_verified = true]
R --> S[Hapus Verification Token]
S --> T[Redirect ke Login]
T --> U[End - Registrasi Berhasil]
style A fill:#10b981,stroke:#059669,color:#fff
style U fill:#10b981,stroke:#059669,color:#fff
style E fill:#ef4444,stroke:#dc2626,color:#fff
style G fill:#ef4444,stroke:#dc2626,color:#fff
style P fill:#ef4444,stroke:#dc2626,color:#fff
style H fill:#3b82f6,stroke:#2563eb,color:#fff
style I fill:#3b82f6,stroke:#2563eb,color:#fff
style K fill:#8b5cf6,stroke:#7c3aed,color:#fff
Proses autentikasi user menggunakan email dan password. Sistem akan memvalidasi kredensial,
generate JWT access token dan refresh token, lalu menyimpan session untuk akses selanjutnya.
flowchart TD
A[Start] --> B[User Buka Halaman Login]
B --> C[Input Email & Password]
C --> D{Validasi Format}
D -->|Invalid| E[Tampilkan Error Format]
E --> C
D -->|Valid| F[Kirim Request ke API]
F --> G{Cek User di Database}
G -->|Tidak Ditemukan| H[Email Tidak Terdaftar]
H --> C
G -->|Ditemukan| I{Verify Password dengan Bcrypt}
I -->|Tidak Cocok| J[Password Salah]
J --> C
I -->|Cocok| K{Cek Status Verifikasi}
K -->|Belum Verified| L[Akun Belum Diverifikasi]
L --> M[Opsi Resend Email]
K -->|Verified| N[Generate Access Token JWT]
N --> O[Generate Refresh Token]
O --> P[Simpan Refresh Token ke DB]
P --> Q[Return Tokens + User Data]
Q --> R[Simpan Token di LocalStorage]
R --> S[Redirect ke Dashboard]
S --> T[End - Login Berhasil]
style A fill:#10b981,stroke:#059669,color:#fff
style T fill:#10b981,stroke:#059669,color:#fff
style H fill:#ef4444,stroke:#dc2626,color:#fff
style J fill:#ef4444,stroke:#dc2626,color:#fff
style L fill:#f59e0b,stroke:#d97706,color:#fff
style N fill:#3b82f6,stroke:#2563eb,color:#fff
style O fill:#3b82f6,stroke:#2563eb,color:#fff
Proses reset password untuk user yang lupa password. Sistem mengirim link reset melalui email
dengan token yang memiliki masa berlaku terbatas untuk keamanan.
flowchart TD
A[Start] --> B[User Klik Forgot Password]
B --> C[Input Email]
C --> D[Kirim Request Reset]
D --> E{Cek Email di Database}
E -->|Tidak Ada| F[Tampilkan Pesan Generic]
E -->|Ada| G[Generate Reset Token]
G --> H[Simpan Token dengan Expiry 1 Jam]
H --> I[Kirim Email Reset Password]
I --> F
F --> J[User Cek Email]
J --> K{Email Diterima?}
K -->|Tidak| L[Cek Spam / Request Ulang]
L --> C
K -->|Ya| M[Klik Link Reset]
M --> N{Validasi Token}
N -->|Invalid/Expired| O[Token Tidak Valid]
O --> P[Request Reset Baru]
P --> C
N -->|Valid| Q[Tampilkan Form Password Baru]
Q --> R[Input Password Baru]
R --> S{Validasi Password}
S -->|Tidak Valid| T[Password Tidak Memenuhi Syarat]
T --> R
S -->|Valid| U[Hash Password Baru]
U --> V[Update Password di Database]
V --> W[Hapus Semua Refresh Tokens]
W --> X[Hapus Reset Token]
X --> Y[Redirect ke Login]
Y --> Z[End - Password Berhasil Direset]
style A fill:#10b981,stroke:#059669,color:#fff
style Z fill:#10b981,stroke:#059669,color:#fff
style O fill:#ef4444,stroke:#dc2626,color:#fff
style T fill:#ef4444,stroke:#dc2626,color:#fff
style I fill:#8b5cf6,stroke:#7c3aed,color:#fff
style U fill:#3b82f6,stroke:#2563eb,color:#fff
Proses pencarian dan filter event oleh user. Mendukung berbagai filter seperti kategori,
tanggal, lokasi, dan harga untuk memudahkan user menemukan event yang diinginkan.
flowchart TD
A[Start] --> B[User Buka Halaman Events]
B --> C[Load Default Event List]
C --> D[Tampilkan Event dengan Pagination]
D --> E{User Ingin Filter?}
E -->|Tidak| F{Pilih Event?}
E -->|Ya| G[Pilih Filter Options]
G --> H{Tipe Filter}
H -->|Kategori| I[Filter by Category]
H -->|Tanggal| J[Filter by Date Range]
H -->|Lokasi| K[Filter by Location]
H -->|Harga| L[Filter by Price Range]
H -->|Search| M[Search by Keyword]
I --> N[Apply Filter]
J --> N
K --> N
L --> N
M --> N
N --> O[Request API dengan Query Params]
O --> P{Ada Hasil?}
P -->|Tidak| Q[Tampilkan Empty State]
Q --> R[Saran: Ubah Filter]
R --> G
P -->|Ya| S[Tampilkan Hasil Filter]
S --> F
F -->|Tidak| T[Continue Browsing]
T --> E
F -->|Ya| U[Klik Event Card]
U --> V[Load Event Detail]
V --> W[Tampilkan Info Event]
W --> X[Tampilkan Jenis Tiket]
X --> Y{User Tertarik?}
Y -->|Tidak| Z[Kembali ke List]
Z --> D
Y -->|Ya| AA[Pilih Tiket]
AA --> AB[End - Lanjut ke Checkout]
style A fill:#10b981,stroke:#059669,color:#fff
style AB fill:#10b981,stroke:#059669,color:#fff
style Q fill:#f59e0b,stroke:#d97706,color:#fff
style O fill:#3b82f6,stroke:#2563eb,color:#fff
style V fill:#3b82f6,stroke:#2563eb,color:#fff
Proses lengkap pembelian tiket dari pemilihan tiket hingga checkout. Termasuk validasi stok,
penerapan promo code, dan pembuatan order sebelum proses pembayaran.
flowchart TD
A[Start] --> B[User di Halaman Event Detail]
B --> C[Pilih Jenis Tiket]
C --> D[Pilih Jumlah Tiket]
D --> E{Cek Ketersediaan}
E -->|Stok Habis| F[Tampilkan Sold Out]
F --> G[Pilih Tiket Lain]
G --> C
E -->|Stok Tersedia| H{Jumlah <= 10?}
H -->|Tidak| I[Max 10 Tiket per Transaksi]
I --> D
H -->|Ya| J[Tambah ke Cart]
J --> K{Tambah Tiket Lain?}
K -->|Ya| C
K -->|Tidak| L[Klik Checkout]
L --> M{User Login?}
M -->|Tidak| N[Redirect ke Login]
N --> O[Login/Register]
O --> L
M -->|Ya| P[Tampilkan Order Summary]
P --> Q{Punya Promo Code?}
Q -->|Ya| R[Input Promo Code]
R --> S{Validasi Promo}
S -->|Invalid| T[Promo Tidak Valid]
T --> Q
S -->|Valid| U[Apply Discount]
U --> V[Update Total]
Q -->|Tidak| V
V --> W[Input Data Pembeli]
W --> X{Validasi Data}
X -->|Invalid| Y[Perbaiki Data]
Y --> W
X -->|Valid| Z[Pilih Metode Pembayaran]
Z --> AA[Create Order]
AA --> AB[Set Status = Pending]
AB --> AC[Lock Tiket Sementara]
AC --> AD[Set Expiry Time 15 Menit]
AD --> AE[End - Lanjut Payment]
style A fill:#10b981,stroke:#059669,color:#fff
style AE fill:#10b981,stroke:#059669,color:#fff
style F fill:#ef4444,stroke:#dc2626,color:#fff
style I fill:#f59e0b,stroke:#d97706,color:#fff
style T fill:#ef4444,stroke:#dc2626,color:#fff
style U fill:#10b981,stroke:#059669,color:#fff
style AA fill:#3b82f6,stroke:#2563eb,color:#fff
Proses pembayaran menggunakan payment gateway (Midtrans/Xendit). Mencakup redirect ke halaman
pembayaran, pemrosesan, dan handling webhook untuk update status.
flowchart TD
A[Start - Order Created] --> B[Redirect ke Payment Gateway]
B --> C[User di Halaman Pembayaran]
C --> D{Pilih Metode Bayar}
D -->|Bank Transfer| E[Tampilkan VA Number]
D -->|E-Wallet| F[Generate QR Code]
D -->|Credit Card| G[Input Card Details]
E --> H[User Transfer Manual]
F --> I[User Scan & Pay]
G --> J[Process Card Payment]
H --> K{Payment Received?}
I --> K
J --> K
K -->|Timeout 15 Menit| L[Order Expired]
L --> M[Release Locked Tickets]
M --> N[Update Order Status = Expired]
N --> O[Notify User]
O --> P[❌ End - Payment Failed]
K -->|Success| Q[Payment Gateway Callback]
Q --> R[Webhook Received]
R --> S{Validate Signature}
S -->|Invalid| T[Log & Reject]
T --> P
S -->|Valid| U{Payment Status}
U -->|Pending| V[Keep Waiting]
V --> K
U -->|Failed| W[Update Order = Failed]
W --> M
U -->|Success| X[Update Order = Paid]
X --> Y[Update Ticket Sold Count]
Y --> Z[Generate E-Ticket]
Z --> AA[Send Confirmation Email]
AA --> AB[End - Payment Success]
style A fill:#10b981,stroke:#059669,color:#fff
style AB fill:#10b981,stroke:#059669,color:#fff
style P fill:#ef4444,stroke:#dc2626,color:#fff
style L fill:#ef4444,stroke:#dc2626,color:#fff
style X fill:#10b981,stroke:#059669,color:#fff
style Z fill:#8b5cf6,stroke:#7c3aed,color:#fff
style AA fill:#8b5cf6,stroke:#7c3aed,color:#fff
Proses pembuatan e-ticket setelah pembayaran berhasil. Setiap tiket memiliki QR code unik
yang berisi informasi terenkripsi untuk validasi saat check-in di venue.
flowchart TD
A[Start - Payment Confirmed] --> B[Get Order Details]
B --> C[Loop: For Each Ticket in Order]
C --> D[Generate Unique Ticket ID]
D --> E[Create Ticket Data Object]
E --> F[Encrypt Ticket Data]
F --> G[Generate QR Code]
G --> H[Create E-Ticket Record]
H --> I[Save to Database]
I --> J{More Tickets?}
J -->|Ya| C
J -->|Tidak| K[Compile All E-Tickets]
K --> L[Generate PDF Document]
L --> M[Upload PDF to Storage]
M --> N[Get Download URL]
N --> O[Update Order with Ticket URLs]
O --> P[Prepare Email Content]
P --> Q[Attach E-Tickets]
Q --> R[Send Email to User]
R --> S[Update Notification Status]
S --> T[End - E-Tickets Delivered]
subgraph QR_Content [QR Code Contains]
QR1[Ticket ID]
QR2[Event ID]
QR3[User ID]
QR4[Ticket Type]
QR5[Timestamp]
QR6[Digital Signature]
end
style A fill:#10b981,stroke:#059669,color:#fff
style T fill:#10b981,stroke:#059669,color:#fff
style G fill:#8b5cf6,stroke:#7c3aed,color:#fff
style L fill:#3b82f6,stroke:#2563eb,color:#fff
style R fill:#8b5cf6,stroke:#7c3aed,color:#fff
Proses validasi tiket saat user datang ke venue event. Staff atau organizer scan QR code
untuk memverifikasi keaslian tiket dan mencegah penggunaan tiket ganda.
flowchart TD
A[Start] --> B[User Tiba di Venue]
B --> C[Tunjukkan E-Ticket/QR Code]
C --> D[Staff Buka Scanner App]
D --> E[Scan QR Code]
E --> F{QR Readable?}
F -->|Tidak| G[QR Rusak/Blur]
G --> H[Manual Input Ticket ID]
H --> I[Search Ticket]
F -->|Ya| I
I --> J{Decrypt & Validate}
J -->|Invalid Signature| K[❌ Tiket Tidak Valid]
K --> L[Reject Entry]
J -->|Valid| M{Cek Event Match}
M -->|Tidak Match| N[❌ Tiket Bukan untuk Event Ini]
N --> L
M -->|Match| O{Cek Tanggal Event}
O -->|Belum/Sudah Lewat| P[❌ Event Belum/Sudah Selesai]
P --> L
O -->|Hari Ini| Q{Cek Status Tiket}
Q -->|Already Used| R[❌ Tiket Sudah Digunakan]
R --> S[Tampilkan Info Check-in Sebelumnya]
S --> L
Q -->|Cancelled| T[❌ Tiket Dibatalkan]
T --> L
Q -->|Valid| U[Update Status = Used]
U --> V[Record Check-in Time]
V --> W[Record Staff ID]
W --> X[Tampilkan Konfirmasi]
X --> Y[Tampilkan Info Tiket]
Y --> Z[Allow Entry]
Z --> AA[End - Check-in Success]
L --> AB[❌ End - Entry Denied]
style A fill:#10b981,stroke:#059669,color:#fff
style AA fill:#10b981,stroke:#059669,color:#fff
style AB fill:#ef4444,stroke:#dc2626,color:#fff
style K fill:#ef4444,stroke:#dc2626,color:#fff
style N fill:#ef4444,stroke:#dc2626,color:#fff
style R fill:#ef4444,stroke:#dc2626,color:#fff
style T fill:#ef4444,stroke:#dc2626,color:#fff
style U fill:#10b981,stroke:#059669,color:#fff
Proses pembuatan event baru oleh organizer atau admin. Mencakup pengisian detail event,
upload media, pengaturan tiket, dan proses approval sebelum dipublikasikan.
flowchart TD
A[Start] --> B{User Role?}
B -->|Customer| C[❌ Access Denied]
B -->|Admin/Organizer| D[Buka Dashboard]
D --> E[Klik Create New Event]
E --> F[Isi Form Event Details]
F --> G[Input: Nama Event]
G --> H[Input: Deskripsi]
H --> I[Input: Tanggal & Waktu]
I --> J[Input: Lokasi/Venue]
J --> K[Pilih Kategori]
K --> L[Upload Banner Image]
L --> M{Image Valid?}
M -->|Tidak| N[Error: Format/Size]
N --> L
M -->|Ya| O[Upload ke Storage]
O --> P[Setup Ticket Types]
P --> Q[Tambah Jenis Tiket]
Q --> R[Input: Nama Tiket]
R --> S[Input: Harga]
S --> T[Input: Kuota]
T --> U[Input: Periode Penjualan]
U --> V{Tambah Tiket Lain?}
V -->|Ya| Q
V -->|Tidak| W{Validasi Semua Data}
W -->|Invalid| X[Tampilkan Error]
X --> F
W -->|Valid| Y[Save as Draft]
Y --> Z{Publish Sekarang?}
Z -->|Tidak| AA[Simpan Draft]
AA --> AB[Edit Nanti]
Z -->|Ya| AC{Need Approval?}
AC -->|Ya - Organizer| AD[Submit for Review]
AD --> AE[Admin Review]
AE --> AF{Approved?}
AF -->|Tidak| AG[Revisi Required]
AG --> F
AF -->|Ya| AH[Set Status = Published]
AC -->|Tidak - Admin| AH
AH --> AI[Event Live di Website]
AI --> AJ[End - Event Created]
style A fill:#10b981,stroke:#059669,color:#fff
style AJ fill:#10b981,stroke:#059669,color:#fff
style C fill:#ef4444,stroke:#dc2626,color:#fff
style N fill:#ef4444,stroke:#dc2626,color:#fff
style AH fill:#10b981,stroke:#059669,color:#fff
style O fill:#3b82f6,stroke:#2563eb,color:#fff
Proses pengajuan refund oleh customer. Mencakup validasi kebijakan refund,
review oleh admin, dan proses pengembalian dana jika disetujui.
flowchart TD
A[Start] --> B[User Buka Order History]
B --> C[Pilih Order untuk Refund]
C --> D{Order Status = Paid?}
D -->|Tidak| E[❌ Tidak Bisa Refund]
D -->|Ya| F{Cek Kebijakan Refund}
F --> G{Waktu ke Event}
G -->|< 24 Jam| H[❌ Tidak Bisa Refund]
G -->|24-72 Jam| I[Refund 50%]
G -->|> 72 Jam| J[Refund 100%]
H --> E
I --> K[Tampilkan Refund Amount]
J --> K
K --> L[User Isi Form Refund]
L --> M[Input: Alasan Refund]
M --> N[Input: Bank Account]
N --> O[Submit Request]
O --> P[Create Refund Record]
P --> Q[Status = Pending Review]
Q --> R[Notify Admin]
R --> S[Admin Review Request]
S --> T{Decision}
T -->|Reject| U[Update Status = Rejected]
U --> V[Notify User - Rejected]
V --> W[❌ End - Refund Rejected]
T -->|Approve| X[Update Status = Approved]
X --> Y[Cancel E-Tickets]
Y --> Z[Return Ticket Quota]
Z --> AA[Process Refund via Payment Gateway]
AA --> AB{Refund Success?}
AB -->|Gagal| AC[Retry / Manual Process]
AC --> AA
AB -->|Sukses| AD[Update Status = Completed]
AD --> AE[Update Order Status = Refunded]
AE --> AF[Notify User - Success]
AF --> AG[End - Refund Complete]
style A fill:#10b981,stroke:#059669,color:#fff
style AG fill:#10b981,stroke:#059669,color:#fff
style W fill:#ef4444,stroke:#dc2626,color:#fff
style E fill:#ef4444,stroke:#dc2626,color:#fff
style H fill:#ef4444,stroke:#dc2626,color:#fff
style I fill:#f59e0b,stroke:#d97706,color:#fff
style J fill:#10b981,stroke:#059669,color:#fff
style AA fill:#3b82f6,stroke:#2563eb,color:#fff
Overview fitur dan alur kerja admin dashboard untuk manajemen sistem ticketing secara keseluruhan,
termasuk monitoring, reporting, dan pengelolaan data.
flowchart TD
A[Admin Login] --> B{Role = Admin?}
B -->|Tidak| C[❌ Access Denied]
B -->|Ya| D[Dashboard Home]
D --> E[View Statistics Overview]
E --> F{Pilih Menu}
F -->|User Management| G[List All Users]
G --> H[Search/Filter Users]
H --> I{Action}
I -->|View| J[User Detail]
I -->|Edit Role| K[Change Role]
I -->|Suspend| L[Suspend Account]
I -->|Delete| M[Delete User]
F -->|Event Management| N[List All Events]
N --> O[Filter by Status]
O --> P{Action}
P -->|Approve| Q[Publish Event]
P -->|Reject| R[Reject with Reason]
P -->|Edit| S[Edit Event Detail]
P -->|Cancel| T[Cancel Event]
F -->|Transaction Report| U[View Transactions]
U --> V[Filter by Date/Status]
V --> W[Generate Report]
W --> X[Export Excel/PDF]
F -->|Refund Management| Y[List Refund Requests]
Y --> Z[Review Request]
Z --> AA{Decision}
AA -->|Approve| AB[Process Refund]
AA -->|Reject| AC[Reject Request]
F -->|Promo Management| AD[List Promo Codes]
AD --> AE[Create/Edit/Delete Promo]
F -->|System Settings| AF[Configuration]
AF --> AG[Payment Gateway Settings]
AF --> AH[Email Settings]
AF --> AI[General Settings]
J --> AJ[Back to Menu]
K --> AJ
L --> AJ
Q --> AJ
R --> AJ
X --> AJ
AB --> AJ
AC --> AJ
AE --> AJ
AI --> AJ
AJ --> F
style A fill:#10b981,stroke:#059669,color:#fff
style C fill:#ef4444,stroke:#dc2626,color:#fff
style D fill:#3b82f6,stroke:#2563eb,color:#fff
style Q fill:#10b981,stroke:#059669,color:#fff
style AB fill:#10b981,stroke:#059669,color:#fff
Diagram arsitektur keseluruhan sistem ticketing yang menunjukkan hubungan antara
frontend, backend, database, dan external services.
flowchart TB
subgraph Client ["Client Layer"]
WEB[Web Browser]
MOBILE[Mobile App]
end
subgraph CDN ["CDN Layer"]
STATIC[Static Assets]
IMAGES[Images/Media]
end
subgraph LoadBalancer ["Load Balancer"]
NGINX[Nginx Reverse Proxy]
end
subgraph Frontend ["Frontend - Next.js"]
NEXTJS[Next.js App Router]
SSR[Server Side Rendering]
PAGES[Pages & Components]
STATE[Zustand State]
end
subgraph Backend ["Backend - Golang"]
GIN[Gin HTTP Server]
HANDLERS[Handlers]
SERVICES[Services]
REPOS[Repositories]
MIDDLEWARE[Middleware]
end
subgraph Database ["Database Layer"]
POSTGRES[(PostgreSQL)]
REDIS[(Redis Cache)]
end
subgraph Storage ["Storage"]
MINIO[MinIO / S3]
end
subgraph External ["External Services"]
PAYMENT[Payment Gateway
Midtrans/Xendit]
EMAIL[SMTP Server
Email Service]
OAUTH[OAuth Providers
Google/Facebook]
end
WEB --> NGINX
MOBILE --> NGINX
NGINX --> NEXTJS
NGINX --> GIN
NEXTJS --> SSR
SSR --> PAGES
PAGES --> STATE
NEXTJS --> CDN
GIN --> MIDDLEWARE
MIDDLEWARE --> HANDLERS
HANDLERS --> SERVICES
SERVICES --> REPOS
REPOS --> POSTGRES
SERVICES --> REDIS
SERVICES --> MINIO
SERVICES --> PAYMENT
SERVICES --> EMAIL
SERVICES --> OAUTH
CDN --> STATIC
CDN --> IMAGES
MINIO --> IMAGES
style Client fill:#e0f2fe,stroke:#0284c7
style Frontend fill:#dbeafe,stroke:#2563eb
style Backend fill:#fef3c7,stroke:#d97706
style Database fill:#dcfce7,stroke:#16a34a
style External fill:#fce7f3,stroke:#db2777
style Storage fill:#f3e8ff,stroke:#9333ea
Client Layer - Browser & Mobile
Database - PostgreSQL & Redis