Flowchart Website Ticketing System

Dokumentasi Visual Alur Sistem - Next.js + Golang + Apache Kafka

🔄 Versi Revisi 2.1 - Desember 2024

Daftar Flowchart

1. Registrasi User Revisi + Verifikasi via Email/WhatsApp
2. Login User Revisi + Notif WA, Cache, Multi-verifikasi
3. Forgot Password Alur reset password
4. Browse Event Revisi + Lazy Load (bukan Pagination)
5. Pembelian Tiket Revisi + Form Kritik & Saran
6. Payment Processing Alur proses pembayaran
7. E-Ticket Generation Alur pembuatan e-ticket
8. Ticket Validation Alur validasi tiket di venue
9. Create Event (Organizer) Alur pembuatan event
10. Refund Request Revisi ⚠️ OPTIONAL / Ditiadakan
11. Admin Dashboard Revisi + Add Role EO & Reseller
12. System Architecture Arsitektur keseluruhan sistem
13. Reseller Dashboard Baru Alur kerja Reseller baru
14. EO Add Reseller Baru EO menambahkan Reseller
15. Laporan Transaksi Baru Alur generate laporan
16. Dokumen Kebutuhan Dokumen kebutuhan fungsional dan non-fungsional

1 Alur Registrasi User

Proses pendaftaran user baru dengan opsi verifikasi melalui Email atau WhatsApp. User dapat memilih metode verifikasi yang diinginkan saat registrasi.

📝 Poin Revisi:

  • Verifikasi bisa lewat Email ATAU No. Handphone (WhatsApp)
  • User memilih metode verifikasi saat registrasi
flowchart TD A([🚀 Start]) --> B[User Buka Halaman Register] B --> C[Isi Form Registrasi] C --> C1[Input: Nama, Email, Password] C1 --> C2[Input: No. Handphone/WA] C2 --> 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{Pilih Metode Verifikasi} J -->|📧 Email| K1[Generate Email Token] K1 --> K2[Kirim Email Verifikasi] K2 --> K3[User Cek Email] K3 --> K4[Klik Link Verifikasi] J -->|📱 WhatsApp| W1[Generate OTP 6 Digit] W1 --> W2[Kirim OTP via WhatsApp API] W2 --> W3[User Cek WhatsApp] W3 --> W4[Input OTP di Form] K4 --> V{Token/OTP Valid?} W4 --> V V -->|Invalid/Expired| P[❌ Token/OTP Tidak Valid] P --> P1{Pilih Resend} P1 -->|Email| K1 P1 -->|WhatsApp| W1 V -->|Valid| R[✅ Update Status is_verified = true] R --> S[Hapus Token/OTP] 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 J fill:#8b5cf6,stroke:#7c3aed,color:#fff style K2 fill:#3b82f6,stroke:#2563eb,color:#fff style W2 fill:#22c55e,stroke:#16a34a,color:#fff style R fill:#10b981,stroke:#059669,color:#fff

2 Alur Login User

Proses autentikasi user dengan Cache halaman login/register, notifikasi WhatsApp setelah berhasil login, dan opsi verifikasi tambahan (tidak hanya email).

📝 Poin Revisi:

  • Cache halaman Login dan Register untuk performa
  • Notifikasi WhatsApp setelah berhasil login
  • Tambahan verifikasi tidak hanya by email (OTP WA/SMS)
flowchart TD A([🚀 Start]) --> B[User Buka Halaman Login] B --> B1[📦 Load dari Cache jika ada] B1 --> 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 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 Verifikasi] M --> M1{Pilih Metode} M1 -->|Email| M2[Kirim Ulang Email] M1 -->|WhatsApp| M3[Kirim Ulang OTP WA] K -->|Verified| N{Perlu 2FA?} N -->|Ya - High Risk| N1[Kirim OTP via WA/SMS] N1 --> N2[User Input OTP] N2 --> N3{OTP Valid?} N3 -->|Tidak| N4[❌ OTP Salah] N4 --> N1 N3 -->|Ya| O N -->|Tidak| O[Generate Access Token JWT] O --> P[Generate Refresh Token] P --> Q[Simpan Refresh Token ke DB] Q --> R[Return Tokens + User Data] R --> S[Simpan Token di LocalStorage] S --> T[📦 Cache Halaman di Browser] T --> WA[📱 Kirim Notif Login via WhatsApp] WA --> WA1[Notif: Login berhasil dari Device X] WA1 --> U[Redirect ke Dashboard] U --> V([🎉 End - Login Berhasil]) style A fill:#10b981,stroke:#059669,color:#fff style V 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 N4 fill:#ef4444,stroke:#dc2626,color:#fff style O fill:#3b82f6,stroke:#2563eb,color:#fff style WA fill:#22c55e,stroke:#16a34a,color:#fff style T fill:#8b5cf6,stroke:#7c3aed,color:#fff style B1 fill:#8b5cf6,stroke:#7c3aed,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 - 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 dengan Lazy Load (bukan pagination). Event akan dimuat secara bertahap saat user scroll ke bawah (infinite scroll).

📝 Poin Revisi:

  • Menggunakan Lazy Load / Infinite Scroll (bukan Pagination tradisional)
  • Event dimuat bertahap saat user scroll
flowchart TD A([🚀 Start]) --> B[User Buka Halaman Events] B --> C[Load Batch Pertama - 12 Events] C --> D[Tampilkan Event Cards] D --> E{User Scroll ke Bawah?} E -->|Ya| F{Threshold Tercapai?} F -->|80% scroll| G[🔄 Trigger Lazy Load] G --> H[Fetch Batch Berikutnya] H --> I{Ada Data Lagi?} I -->|Ya| J[Append ke List] J --> D I -->|Tidak| K[Tampilkan End of List] F -->|Belum| E E -->|Tidak - Ingin Filter| L[Pilih Filter Options] L --> M{Tipe Filter} M -->|Kategori| N1[Filter by Category] M -->|Tanggal| N2[Filter by Date Range] M -->|Lokasi| N3[Filter by Location] M -->|Harga| N4[Filter by Price Range] M -->|Search| N5[Search by Keyword] N1 --> O[Reset List & Apply Filter] N2 --> O N3 --> O N4 --> O N5 --> O O --> P[Request API dengan Filter] P --> Q{Ada Hasil?} Q -->|Tidak| R[Tampilkan Empty State] R --> S[Saran: Ubah Filter] S --> L Q -->|Ya| T[Tampilkan Hasil Filter] T --> D E -->|Pilih Event| 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 G fill:#8b5cf6,stroke:#7c3aed,color:#fff style K fill:#64748b,stroke:#475569,color:#fff style R fill:#f59e0b,stroke:#d97706,color:#fff style P fill:#3b82f6,stroke:#2563eb,color:#fff

5 Alur Pembelian Tiket

Proses lengkap pembelian tiket dari pemilihan hingga checkout. Setelah minimal 1x pembelian tiket, user akan diminta untuk mengisi Kritik dan Saran.

📝 Poin Revisi:

  • Tambahkan form Kritik dan Saran setelah minimal 1x pembelian tiket selesai
  • Form muncul setelah e-ticket diterima
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[Proses Payment...] AE --> AF{Payment Success?} AF -->|Tidak| AG[❌ Payment Failed] AF -->|Ya| AH[✅ E-Ticket Dikirim] AH --> KS{Sudah Pernah Beli Sebelumnya?} KS -->|Ya - Minimal 1x| KS1[📝 Tampilkan Form Kritik & Saran] KS1 --> KS2[User Isi Feedback] KS2 --> KS3{Submit Feedback?} KS3 -->|Ya| KS4[Simpan Feedback ke DB] KS4 --> AI KS3 -->|Skip| AI KS -->|Belum Pernah| AI AI([🎉 End - Pembelian Selesai]) style A fill:#10b981,stroke:#059669,color:#fff style AI 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 AG fill:#ef4444,stroke:#dc2626,color:#fff style U fill:#10b981,stroke:#059669,color:#fff style AH fill:#10b981,stroke:#059669,color:#fff style KS1 fill:#8b5cf6,stroke:#7c3aed,color:#fff style KS4 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

⚠️ FITUR INI BERSIFAT OPTIONAL / DITIADAKAN
Jika diimplementasikan, proses pengajuan refund oleh customer mencakup validasi kebijakan refund, review oleh admin, dan proses pengembalian dana jika disetujui.

📝 Poin Revisi:

  • Logic Refund ditiadakan (OPTIONAL)
  • Dapat diimplementasikan di fase selanjutnya jika diperlukan
flowchart TD A([🚀 Start]) --> OPT{Fitur Refund Aktif?} OPT -->|Tidak - Ditiadakan| OPT1[❌ Fitur Tidak Tersedia] OPT1 --> OPT2[Tampilkan Pesan: Refund tidak tersedia] OPT2 --> OPT3([End - Fitur Disabled]) OPT -->|Ya - Optional| 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 OPT fill:#f59e0b,stroke:#d97706,color:#fff style OPT1 fill:#64748b,stroke:#475569,color:#fff style OPT3 fill:#64748b,stroke:#475569,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

11 Alur Admin Dashboard

Overview fitur dan alur kerja admin dashboard dengan penambahan menu Add Role EO dan Add Role Reseller untuk manajemen pengguna.

📝 Poin Revisi:

  • Penambahan Add Role EO di Menu Dashboard Admin
  • Penambahan Add Role Reseller di Menu Dashboard Admin
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] I -->|🆕 Add Role EO| EO1[Pilih User Customer] EO1 --> EO2[Upgrade ke Event Organizer] EO2 --> EO3[Set Permissions EO] EO3 --> EO4[✅ User Jadi EO] I -->|🆕 Add Role Reseller| RS1[Pilih User Customer] RS1 --> RS2[Upgrade ke Reseller] RS2 --> RS3[Set Komisi %] RS3 --> RS4[Set Event yang Bisa Dijual] RS4 --> RS5[✅ User Jadi Reseller] 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 --> Y1{Fitur Aktif?} Y1 -->|Tidak| Y2[Fitur Disabled] Y1 -->|Ya| 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 -->|🆕 Reseller Management| RM1[List All Resellers] RM1 --> RM2[View Performance] RM2 --> RM3[Adjust Komisi] RM3 --> RM4[Enable/Disable Reseller] 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 EO4 --> AJ RS5 --> AJ Q --> AJ X --> AJ AB --> AJ AE --> AJ RM4 --> 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 style EO1 fill:#8b5cf6,stroke:#7c3aed,color:#fff style EO4 fill:#10b981,stroke:#059669,color:#fff style RS1 fill:#f97316,stroke:#ea580c,color:#fff style RS5 fill:#10b981,stroke:#059669,color:#fff style RM1 fill:#f97316,stroke:#ea580c,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 MessageBroker ["📨 Message Broker"] KAFKA[Apache Kafka] 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] WHATSAPP[WhatsApp API
Notification] OAUTH[OAuth Providers
Google] 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 --> KAFKA KAFKA --> EMAIL KAFKA --> WHATSAPP SERVICES --> PAYMENT 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 style MessageBroker fill:#fef3c7,stroke:#f59e0b
Client Layer - Browser & Mobile
Frontend - Next.js
Backend - Golang + Kafka
Database - PostgreSQL & Redis
External Services + WhatsApp API
Storage - MinIO/S3

13 Alur Reseller Dashboard

Flowchart baru untuk pengguna Reseller. Reseller dapat melihat event yang bisa dijual, melakukan penjualan tiket dengan komisi, melihat laporan penjualan, dan mencairkan komisi.
flowchart TD A([🚀 Start]) --> B{User Role = Reseller?} B -->|Tidak| C[❌ Access Denied] B -->|Ya| D[🏪 Reseller Dashboard] D --> E[View Dashboard Overview] E --> E1[Total Penjualan] E --> E2[Komisi Pending] E --> E3[Komisi Dicairkan] E --> F{Pilih Menu} F -->|📋 Event Tersedia| G[List Event yang Bisa Dijual] G --> G1[Filter by Kategori/Tanggal] G1 --> G2[Lihat Detail Event] G2 --> G3[Lihat Komisi per Tiket] G3 --> G4{Jual Event Ini?} G4 -->|Ya| G5[Generate Link Referral] G5 --> G6[Copy/Share Link] G4 -->|Tidak| G F -->|🛒 Penjualan Manual| H[Input Data Pembeli] H --> H1[Pilih Event] H1 --> H2[Pilih Jenis Tiket] H2 --> H3[Input Jumlah] H3 --> H4[Input Data Customer] H4 --> H5{Stok Tersedia?} H5 -->|Tidak| H6[❌ Stok Habis] H6 --> H1 H5 -->|Ya| H7[Create Order dengan Reseller ID] H7 --> H8[Proses Payment] H8 --> H9{Payment Success?} H9 -->|Tidak| H10[❌ Payment Failed] H9 -->|Ya| H11[✅ Tiket Terjual] H11 --> H12[Komisi Tercatat] F -->|📊 Laporan Penjualan| I[View Sales Report] I --> I1[Filter by Tanggal] I1 --> I2[Filter by Event] I2 --> I3[Tampilkan Detail] I3 --> I4[Total Tiket Terjual] I3 --> I5[Total Pendapatan] I3 --> I6[Total Komisi] I6 --> I7[Export Report] F -->|💰 Cairkan Komisi| J[View Komisi Pending] J --> J1{Komisi >= Min. Withdraw?} J1 -->|Tidak| J2[⚠️ Belum Memenuhi Minimum] J1 -->|Ya| J3[Input Bank Account] J3 --> J4[Request Withdraw] J4 --> J5[Status: Pending Admin] J5 --> J6[Admin Approve] J6 --> J7[✅ Dana Ditransfer] F -->|👤 Profil| K[Edit Profil Reseller] K --> K1[Update Bank Account] K --> K2[Update Contact Info] G6 --> L[Back to Menu] H12 --> L I7 --> L J7 --> L K2 --> L L --> F style A fill:#10b981,stroke:#059669,color:#fff style C fill:#ef4444,stroke:#dc2626,color:#fff style D fill:#f97316,stroke:#ea580c,color:#fff style G5 fill:#8b5cf6,stroke:#7c3aed,color:#fff style H11 fill:#10b981,stroke:#059669,color:#fff style H12 fill:#f97316,stroke:#ea580c,color:#fff style J7 fill:#10b981,stroke:#059669,color:#fff style H6 fill:#ef4444,stroke:#dc2626,color:#fff style H10 fill:#ef4444,stroke:#dc2626,color:#fff

14 Alur EO Add Reseller

Event Organizer dapat menambahkan Reseller untuk membantu menjual tiket event mereka. EO dapat mengatur komisi dan event mana yang bisa dijual oleh Reseller.
flowchart TD A([🚀 Start]) --> B{User Role = EO?} B -->|Tidak| C[❌ Access Denied] B -->|Ya| D[🎪 EO Dashboard] D --> E{Pilih Menu} E -->|👥 Manage Resellers| F[List Reseller Saya] F --> F1[View Active Resellers] F --> F2[View Pending Requests] F1 --> G{Action} G -->|View| G1[Lihat Performa Reseller] G1 --> G2[Total Penjualan] G1 --> G3[Komisi Dibayar] G -->|Edit| G4[Edit Komisi %] G4 --> G5[Edit Event Access] G -->|Disable| G6[Nonaktifkan Reseller] G6 --> G7[Reseller Tidak Bisa Jual] E -->|➕ Add New Reseller| H[Cari User] H --> H1[Input Email/Nama] H1 --> H2{User Ditemukan?} H2 -->|Tidak| H3[❌ User Tidak Ditemukan] H3 --> H1 H2 -->|Ya| H4[Tampilkan Info User] H4 --> H5{User Sudah Reseller?} H5 -->|Ya - Reseller Lain| H6[⚠️ Sudah Jadi Reseller EO Lain] H5 -->|Ya - Reseller Saya| H7[⚠️ Sudah Terdaftar] H5 -->|Belum| H8[Set Komisi %] H8 --> H9[Pilih Event yang Bisa Dijual] H9 --> H10[Set Periode Aktif] H10 --> H11[Send Invitation] H11 --> H12[Notif ke User via WA/Email] H12 --> H13{User Accept?} H13 -->|Tidak| H14[❌ Invitation Rejected] H13 -->|Ya| H15[✅ Reseller Aktif] H15 --> H16[User Role Updated] E -->|📊 Reseller Performance| I[View All Reseller Stats] I --> I1[Ranking by Sales] I --> I2[Total Revenue via Reseller] I --> I3[Commission Paid Out] G2 --> J[Back to Menu] G5 --> J G7 --> J H15 --> J I3 --> J J --> E style A fill:#10b981,stroke:#059669,color:#fff style C fill:#ef4444,stroke:#dc2626,color:#fff style D fill:#8b5cf6,stroke:#7c3aed,color:#fff style H15 fill:#10b981,stroke:#059669,color:#fff style H16 fill:#f97316,stroke:#ea580c,color:#fff style H3 fill:#ef4444,stroke:#dc2626,color:#fff style H14 fill:#ef4444,stroke:#dc2626,color:#fff style H6 fill:#f59e0b,stroke:#d97706,color:#fff style H7 fill:#f59e0b,stroke:#d97706,color:#fff style H12 fill:#22c55e,stroke:#16a34a,color:#fff

15 Alur Laporan Transaksi

Alur generate laporan transaksi untuk Admin, Event Organizer, dan Reseller. Setiap role memiliki akses laporan yang berbeda sesuai dengan kewenangannya.
flowchart TD A([🚀 Start]) --> B{Cek User Role} B -->|Admin| ADM[📊 Admin Report Dashboard] B -->|Event Organizer| EO[📊 EO Report Dashboard] B -->|Reseller| RS[📊 Reseller Report Dashboard] B -->|Customer| C[❌ Access Denied] ADM --> ADM1[Pilih Jenis Laporan] ADM1 --> ADM2{Tipe Laporan} ADM2 -->|Transaksi Global| ADM3[Semua Transaksi Platform] ADM2 -->|Per Event| ADM4[Transaksi per Event] ADM2 -->|Per User| ADM5[Transaksi per User] ADM2 -->|Per Reseller| ADM6[Penjualan Reseller] ADM2 -->|Revenue| ADM7[Laporan Pendapatan] EO --> EO1[Pilih Event Saya] EO1 --> EO2{Tipe Laporan} EO2 -->|Penjualan Tiket| EO3[Detail Penjualan] EO2 -->|Revenue| EO4[Pendapatan Event] EO2 -->|Reseller| EO5[Penjualan via Reseller] EO2 -->|Check-in| EO6[Laporan Check-in] RS --> RS1{Tipe Laporan} RS1 -->|Penjualan| RS2[Tiket yang Terjual] RS1 -->|Komisi| RS3[Detail Komisi] RS1 -->|Withdraw| RS4[History Pencairan] ADM3 --> FLT[Set Filter] ADM4 --> FLT ADM5 --> FLT ADM6 --> FLT ADM7 --> FLT EO3 --> FLT EO4 --> FLT EO5 --> FLT EO6 --> FLT RS2 --> FLT RS3 --> FLT RS4 --> FLT FLT --> FLT1[Filter: Tanggal Mulai] FLT1 --> FLT2[Filter: Tanggal Akhir] FLT2 --> FLT3[Filter: Status Transaksi] FLT3 --> FLT4[Filter Tambahan...] FLT4 --> GEN[Generate Report] GEN --> PREV[Preview Laporan] PREV --> PREV1[Tampilkan Summary] PREV --> PREV2[Tampilkan Detail Tabel] PREV --> PREV3[Tampilkan Grafik] PREV --> EXP{Export?} EXP -->|Excel| EXP1[📥 Download .xlsx] EXP -->|PDF| EXP2[📥 Download .pdf] EXP -->|CSV| EXP3[📥 Download .csv] EXP -->|Print| EXP4[🖨️ Print Report] EXP -->|Tidak| BACK[Kembali ke Dashboard] EXP1 --> DONE([🎉 End - Report Downloaded]) EXP2 --> DONE EXP3 --> DONE EXP4 --> DONE BACK --> B style A fill:#10b981,stroke:#059669,color:#fff style C fill:#ef4444,stroke:#dc2626,color:#fff style ADM fill:#3b82f6,stroke:#2563eb,color:#fff style EO fill:#8b5cf6,stroke:#7c3aed,color:#fff style RS fill:#f97316,stroke:#ea580c,color:#fff style GEN fill:#10b981,stroke:#059669,color:#fff style DONE fill:#10b981,stroke:#059669,color:#fff style EXP1 fill:#22c55e,stroke:#16a34a,color:#fff style EXP2 fill:#ef4444,stroke:#dc2626,color:#fff style EXP3 fill:#3b82f6,stroke:#2563eb,color:#fff