Detail Event
Halaman detail event menampilkan informasi lengkap tentang event, berbagai pengaturan untuk mengelola event, tools untuk mengelola event, dan statistik event. Dari halaman ini, Kamu dapat mengakses semua fitur yang diperlukan untuk mengelola event secara menyeluruh.
Akses Halaman Detail
Untuk mengakses halaman detail event:
- Buka halaman daftar Events di
/events - Klik pada card event yang ingin dilihat
- Kamu akan diarahkan ke halaman detail:
/events/{eventId}
Struktur Halaman Detail
Halaman detail terdiri dari beberapa bagian utama:
1. Info Card (Sidebar Kiri)
Card di bagian kiri menampilkan informasi utama event:
- Banner Image: Gambar banner event dengan ukuran 120px × 150px
- Status Badge: Status event (PUBLISHED, DRAFT, dll)
- Title: Judul event
- Date Range: Tanggal mulai dan berakhir event dengan format DD MMM YYYY HH:mm
- Rincian Button: Tombol untuk melihat detail lengkap event
- Publish Toggle: Switch untuk mempublikasikan atau menyembunyikan event
2. Pengaturan Event Section
Bagian ini menampilkan grid dengan berbagai menu pengaturan:
| Menu | Icon | Deskripsi | Link |
|---|---|---|---|
| Ubah | Pencil | Edit event | /events/{eventId}/update |
| Tiket | Ticket | Kelola tiket event | /events/{eventId}/tickets |
| Kode Voucher | BadgePercent | Kelola kode voucher | /events/{eventId}/voucher-codes |
| Pesan Konfirmasi | Kelola pesan konfirmasi | Dialog | |
| Group & Admin | LinkIcon | Kelola action links | /events/{eventId}/action-links |
| Pengumuman | Volume2 | Kelola pengumuman | /events/{eventId}/announcements |
| Lampiran File | File | Kelola lampiran file | /events/{eventId}/materials |
| Whitelist User | UserCheck | Kelola whitelist user | Button (belum aktif) |
| Quiz | Trophy | Kelola quiz | /events/{eventId}/quizzes |
| Hapus | Trash | Hapus event | Delete dialog |
3. Tools Event Section
Bagian ini menampilkan grid dengan berbagai tools untuk mengelola event:
| Tool | Icon | Deskripsi | Action |
|---|---|---|---|
| Share | Share | Bagikan event | Share navigator dialog |
| Import Peserta | UserPlus | Import peserta secara manual | /events/{eventId}/participants/import |
| Ticket Scanner | QrCode | Scanner untuk check-in peserta | External link ke scanner |
4. Ringkasan Statistik Event Section
Bagian ini menampilkan ringkasan statistik event:
- Event Metric Summary: Ringkasan metrik event seperti jumlah peserta, tiket terjual, dll
- Suspense Loading: Loading state saat data sedang dimuat
5. Ringkasan Statistik Peserta Section
Bagian ini menampilkan ringkasan statistik peserta:
- Event Participant Summary: Ringkasan statistik peserta event
6. Grafik Peserta Per-hari Section
Bagian ini menampilkan grafik peserta per-hari:
- Event Participant Chart: Grafik yang menampilkan perkembangan peserta per-hari
- Height: 96 (h-96) untuk tinggi grafik
7. Peserta Terbaru Section
Bagian ini menampilkan preview peserta terbaru:
- User Ticket List Table: Tabel dengan peserta terbaru
- Load More: Disabled (loadMore=)
- Lihat Semua Button: Tombol untuk mengakses halaman peserta lengkap
Fitur-Fitur di Detail Page
Info Card dengan Banner
Card di bagian kiri menampilkan:
- Banner image dengan ukuran 24 (w-24) yang di-rounded
- Status badge untuk menunjukkan status publikasi
- Title event
- Event date dengan format yang rapi
Rincian Dialog
Tombol Rincian Event membuka dialog yang menampilkan informasi lengkap event:
- Judul: Judul event
- Deskripsi: Deskripsi lengkap event
- Periode Event: Tanggal mulai dan berakhir
- Kategori: Kategori event
- Lokasi: Lokasi atau URL event
- Pemateri: Daftar pemateri atau ustadz
Publish Toggle
Switch untuk mempublikasikan atau menyembunyikan event:
- ON (Published): Event dapat diakses publik dan muncul di halaman publik
- OFF (Draft): Event tersembunyi dari publik dan hanya dapat diakses melalui dashboard
Tips menggunakan Publish Toggle:
- Publikasikan event setelah semua informasi sudah lengkap
- Gunakan draft mode untuk menyiapkan event sebelum dipublikasikan
- Nonaktifkan event jika event sudah berakhir atau dibatalkan
Warning Card (Jika Belum Ada Tiket)
Jika event belum memiliki tiket, akan muncul warning card:
- Background: Blue-100 dengan border blue-200
- Icon: Info icon dengan warna blue-600
- Message: Pesan bahwa event belum memiliki tiket
- Action Button: Tombol "Buat tiket" untuk membuat tiket pertama
Share Event
Tombol Share memungkinkan Kamu untuk membagikan event melalui berbagai platform:
- Klik menu Share di grid tools
- Share navigator dialog akan muncul
- Pilih platform untuk membagikan (WhatsApp, Facebook, Twitter, dll)
- Event akan dibagikan dengan link dan deskripsi
Tips membagikan event:
- Bagikan melalui berbagai channel untuk menjangkau lebih banyak peserta
- Sertakan informasi penting dalam pesan share
- Gunakan waktu yang tepat untuk membagikan (misalnya pagi hari atau akhir pekan)
Ticket Scanner
Menu Ticket Scanner membuka scanner untuk check-in peserta:
- URL: Link eksternal ke event scanner
- Format:
https://event-scanner.darisini.com/{scannerId}?type=event - Scanner ID: Base64 encoded dari event ID
Delete Event
Menu Hapus memungkinkan Kamu untuk menghapus event:
- Klik menu Hapus di grid pengaturan
- Dialog konfirmasi akan muncul
- Konfirmasi penghapusan
- Event akan dihapus dari sistem
Peringatan: Hapus event dengan hati-hati. Event yang sudah memiliki peserta mungkin memerlukan penanganan khusus sebelum dihapus.
Navigasi Menu
Dari halaman detail, Kamu dapat mengakses berbagai fitur:
- Ubah: Edit event (akan diarahkan ke halaman update)
- Tiket: Kelola tiket event
- Kode Voucher: Kelola kode voucher untuk diskon
- Pesan Konfirmasi: Kelola pesan konfirmasi yang dikirim ke peserta
- Group & Admin: Kelola action links untuk group dan admin
- Pengumuman: Kelola pengumuman untuk berkomunikasi dengan peserta
- Lampiran File: Kelola file-file yang dilampirkan ke event
- Quiz: Kelola quiz untuk event
- Share: Bagikan event ke berbagai platform
- Import Peserta: Import peserta secara manual
- Ticket Scanner: Akses scanner untuk check-in peserta
- Hapus: Hapus event dari sistem
Layout Responsif
Halaman detail menggunakan layout responsif:
- Mobile: Info card dan settings grid ditampilkan secara vertikal
- Desktop (lg): Info card di kiri (4/12 width), settings grid di kanan (8/12 width)
- Desktop (2xl): Info card di kiri (3/12 width), settings grid di kanan (9/12 width)
Tips
- Gunakan Publish Toggle untuk mengontrol visibilitas event
- Pastikan event memiliki tiket sebelum dipublikasikan
- Bagikan event melalui berbagai channel untuk menjangkau lebih banyak peserta
- Monitor statistik event secara berkala untuk melihat perkembangan pendaftaran
- Gunakan Ticket Scanner untuk memudahkan proses check-in peserta
- Akses menu Pengaturan Event untuk mengelola event secara lengkap
- Kelola Peserta Terbaru untuk melihat perkembangan pendaftaran secara real-time