1 Alur Registrasi User
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
2 Alur Login User
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
3 Alur Forgot Password
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
4 Alur Browse & Search Event
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
5 Alur Pembelian Tiket
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
6 Alur Payment Processing
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
7 Alur E-Ticket Generation
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
8 Alur Ticket Validation (Check-in)
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
9 Alur Create Event (Organizer)
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
10 Alur Refund Request
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
11 Alur Admin Dashboard
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
12 System Architecture Overview
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