Skip to main content

Mengelola Tiket

Halaman Tiket Event menampilkan daftar semua tiket yang telah dibuat untuk event dalam format card grid yang informatif dan mudah dibaca. Halaman ini memungkinkan Kamu untuk melihat overview semua tiket, informasi periode penjualan, kuota, harga, dan dengan cepat mengelola tiket yang ingin diubah atau dihapus.

Akses Halaman Tiket​

Untuk mengakses halaman Tiket Event:

  1. Buka halaman detail event di /events/{eventId}
  2. Klik menu "Tiket" di grid Pengaturan Event
  3. Atau akses langsung melalui URL: /events/{eventId}/tickets
  4. Kamu akan melihat halaman daftar Tiket Event

Struktur Card Display​

Halaman Tiket Event menampilkan tiket dalam bentuk card. Berikut adalah tabel struktur card display:

ElemenDeskripsiTipe Data
Visibility BadgeBadge untuk menunjukkan visibility tiket (PUBLIC/PRIVATE)Badge Component
NameNama tiketText (font-semibold)
DescriptionDeskripsi tiket (jika ada)Markdown Component
Date RangePeriode penjualan tiketDate Range Display (dengan icon Calendar)
Quota InfoInformasi kuota tiketText dengan icon Ticket
PriceHarga tiketText (orange-500, font-header, size-lg)
ActionsTombol aksi (Edit, Delete, Share)Button Group

Tiket Card​

Setiap tiket ditampilkan dalam card yang berisi:

Layout Card​

Card memiliki layout vertikal dengan beberapa bagian:

  • Header: Visibility badge dan nama tiket
  • Body: Deskripsi (jika ada), periode penjualan, dan kuota
  • Footer: Harga dan tombol aksi

Header Section​

Bagian header card menampilkan:

  • Visibility Badge: Badge untuk menunjukkan apakah tiket Public atau Private (Unlisted)
  • Name: Nama tiket dengan style font-semibold

Body Section​

Bagian body card menampilkan:

  • Description: Deskripsi tiket dalam format markdown (jika ada), ditampilkan dalam box dengan background slate-100
  • Date Range:
    • Icon Calendar dengan ukuran 16px
    • Tanggal mulai penjualan (format: DD MMM YYYY HH:mm)
    • Separator "-"
    • Tanggal akhir penjualan (format: DD MMM YYYY HH:mm)
  • Quota Info:
    • Icon Ticket dengan ukuran 16px
    • Total kuota tiket
    • Tersisa tiket dalam format: (tersisa X tiket)

Bagian footer card menampilkan:

  • Price:
    • Harga tiket dengan style orange-500, font-header, size-lg
    • Menampilkan "Gratis" jika harga 0
    • Menampilkan "Rp X.XXX" jika berbayar
  • Actions:
    • Tombol Edit (icon Pencil, variant ghost)
    • Tombol Delete (icon Trash, variant ghost)
    • Tombol Share (icon Share2, variant default, size xs)

Layout Card Grid​

Tiket ditampilkan dalam grid layout yang responsif:

  • Mobile: 1 kolom
  • Tablet (lg): 2 kolom
  • Desktop (2xl): 3 kolom

Setiap card memiliki shadow dan spacing yang konsisten untuk kemudahan membaca.

Halaman Tiket dilengkapi dengan search bar untuk mencari tiket:

  • Placeholder: "Ketik nama episode untuk pencarian"
  • Position: Di bagian atas halaman, sebelum grid cards
  • Functionality: Mencari berdasarkan nama tiket

Filter Button​

Terdapat tombol filter di samping search bar:

  • Icon: Filter icon
  • Position: Di sebelah kanan search bar
  • Functionality: Membuka dialog filter untuk memfilter tiket

Create Button​

Terdapat tombol untuk membuat tiket baru:

  • Title: "Tambah Tiket"
  • Icon: Plus icon
  • Position: Di sebelah kanan filter button
  • Action: Link ke halaman create tiket

Actions pada Card​

Setiap card tiket memiliki beberapa aksi:

Edit Action​

  • Icon: Pencil (ukuran 16px)
  • Variant: Ghost
  • Action: Mengarahkan ke halaman update tiket: /events/{eventId}/tickets/{ticketId}/update

Delete Action​

  • Icon: Trash (ukuran 16px)
  • Variant: Ghost
  • Action: Membuka dialog konfirmasi penghapusan tiket

Share Action​

  • Icon: Share2 (ukuran 16px)
  • Variant: Default
  • Size: XS
  • Action: Membuka dialog share tiket

Empty State​

Jika belum ada tiket yang dibuat, halaman akan menampilkan:

  • Empty State Component: Pesan "Tidak ada data"
  • Description: "Data transaksi akan ditampilkan setelah ada transaksi yang dilakukan oleh user"
  • Action: Tidak ada tombol action (karena create button sudah ada di header)

Untuk melihat detail atau mengupdate tiket:

  1. Klik tombol Edit (icon Pencil) pada card tiket yang ingin diubah
  2. Kamu akan diarahkan ke halaman update: /events/{eventId}/tickets/{ticketId}/update
  3. Di halaman update, Kamu dapat mengubah informasi tiket

Menghapus Tiket​

Untuk menghapus tiket:

  1. Klik tombol Delete (icon Trash) pada card tiket yang ingin dihapus
  2. Dialog konfirmasi penghapusan akan muncul
  3. Konfirmasi penghapusan
  4. Tiket akan dihapus dari sistem

Peringatan: Hapus tiket dengan hati-hati. Tiket yang sudah memiliki transaksi mungkin memerlukan penanganan khusus sebelum dihapus.

Membagikan Tiket​

Untuk membagikan tiket:

  1. Klik tombol Share pada card tiket yang ingin dibagikan
  2. Dialog share akan muncul
  3. Pilih platform untuk membagikan atau copy link
  4. Tiket akan dibagikan dengan link yang dapat digunakan untuk membeli tiket

Tips​

  • Buat berbagai jenis tiket dengan harga yang berbeda untuk memberikan pilihan kepada peserta
  • Gunakan visibility Public untuk tiket yang ingin ditampilkan di halaman publik
  • Gunakan visibility Private (Unlisted) untuk tiket khusus atau early bird
  • Monitor kuota tiket secara berkala untuk melihat perkembangan penjualan
  • Gunakan deskripsi tiket untuk menjelaskan keuntungan atau benefit tiket tertentu
  • Bagikan tiket melalui berbagai channel untuk meningkatkan penjualan
  • Hapus tiket yang sudah tidak relevan atau sudah habis kuotanya
Last updated on