Mengelola Voucher Code

Halaman Voucher Promo menampilkan daftar semua kode voucher yang telah dibuat untuk event dalam format card grid yang informatif dan mudah dibaca. Halaman ini memungkinkan Kamu untuk melihat overview semua voucher code, informasi potongan harga, periode berlaku, kuota penggunaan, dan dengan cepat mengelola voucher code yang ingin diubah atau dihapus.

Akses Halaman Voucher Code

Untuk mengakses halaman Voucher Promo:

1. Buka halaman detail event di /events/{eventId}
2. Klik menu "Kode Voucher" di grid Pengaturan Event
3. Atau akses langsung melalui URL: /events/{eventId}/voucher-codes
4. Kamu akan melihat halaman daftar Voucher Promo

Struktur Card Display

Halaman Voucher Promo menampilkan voucher code dalam bentuk card. Berikut adalah tabel struktur card display:

Elemen	Deskripsi	Tipe Data
Name	Nama voucher code	Text (variant header)
Discount Amount	Potongan harga	Text dengan icon BadgePercent
Expiry Date	Tanggal berakhir voucher	Text dengan icon Calendar
Usage Quota	Kuota penggunaan voucher	Text dengan icon CheckCheck
Code	Kode voucher untuk digunakan	Button dengan icon Copy
Actions	Tombol aksi (Edit, Delete)	Button Group

Voucher Code Card

Setiap voucher code ditampilkan dalam card yang berisi:

Layout Card

Card memiliki layout vertikal dengan beberapa bagian:

• Header: Nama voucher code dan tombol aksi
• Body: Informasi potongan, periode berlaku, dan kuota penggunaan
• Footer: Kode voucher dengan tombol copy

Header Section

Bagian header card menampilkan:

• Name: Nama voucher code dengan style variant header
• Actions:
  • Tombol Edit (icon Pencil, variant ghost, hover orange-100)
  • Tombol Delete (icon Trash, variant ghost, hover red-100)

Body Section

Bagian body card menampilkan:

• Discount Amount:
  • Icon BadgePercent dengan ukuran 16px
  • Text "Potongan sebesar Rp X.XXX" dengan format currency
• Expiry Date:
  • Icon Calendar dengan ukuran 16px
  • Text "Berlaku hingga DD MMM YYYY" dengan format tanggal
• Usage Quota:
  • Icon CheckCheck dengan ukuran 16px
  • Text "Terpakai X / Y" menunjukkan penggunaan dan kuota total

Footer Section

Bagian footer card menampilkan:

• Code:
  • Button dengan variant ghost
  • Icon Copy dengan ukuran 16px
  • Kode voucher dengan style variant header, color secondary
  • Action: Copy kode voucher ke clipboard saat diklik

Layout Card Grid

Voucher code ditampilkan dalam grid layout yang responsif:

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

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

Search Bar

Halaman Voucher Promo dilengkapi dengan search bar untuk mencari voucher code:

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

Filter Button

Terdapat tombol filter di samping search bar:

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

Create Button

Terdapat tombol untuk membuat voucher code baru:

• Title: "Tambah Kode Voucher"
• Icon: Plus icon
• Position: Di sebelah kanan filter button
• Action: Link ke halaman create voucher code

Actions pada Card

Setiap card voucher code memiliki beberapa aksi:

Edit Action

• Icon: Pencil (ukuran 16px, stroke orange-500)
• Variant: Ghost
• Hover: Background orange-100
• Action: Mengarahkan ke halaman update voucher code: /events/{eventId}/voucher-codes/{voucherCodeId}/update

Delete Action

• Icon: Trash (ukuran 16px, stroke red-500)
• Variant: Ghost
• Hover: Background red-100
• Action: Membuka dialog konfirmasi penghapusan voucher code

Copy Code Action

• Icon: Copy (ukuran 16px)
• Variant: Ghost
• Action: Copy kode voucher ke clipboard

Copy Voucher Code

Untuk menyalin kode voucher:

1. Klik tombol dengan icon Copy pada card voucher code
2. Kode voucher akan otomatis tersalin ke clipboard
3. Kamu dapat paste kode voucher di tempat yang diinginkan

Tips menggunakan copy code:

• Gunakan fitur copy untuk membagikan kode voucher dengan mudah
• Kode voucher dapat digunakan oleh peserta saat checkout tiket
• Pastikan kode voucher masih berlaku sebelum membagikan

Load More Functionality

Halaman mendukung load more untuk menampilkan lebih banyak voucher code:

• Load More Button: Tombol "Selanjutnya" untuk memuat lebih banyak data
• Disabled State: Tombol akan disabled dengan teks "Seluruh data sudah ditampilkan" ketika tidak ada data lagi
• Load Next: Memuat 25 voucher code per halaman

Empty State

Jika belum ada voucher code 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)

Navigasi ke Update Voucher Code

Untuk mengupdate voucher code:

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

Menghapus Voucher Code

Untuk menghapus voucher code:

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

Peringatan: Hapus voucher code dengan hati-hati. Voucher code yang sudah digunakan mungkin memerlukan penanganan khusus sebelum dihapus.

Tips

• Buat voucher code dengan nama yang jelas dan mudah diingat
• Tentukan potongan harga yang menarik namun tetap realistis
• Tentukan periode berlaku yang sesuai dengan strategi promosi
• Monitor kuota penggunaan untuk melihat seberapa efektif voucher code
• Gunakan kode voucher yang mudah diingat dan diucapkan
• Bagikan kode voucher melalui berbagai channel untuk meningkatkan penggunaan
• Hapus voucher code yang sudah tidak relevan atau sudah habis kuotanya
• Gunakan copy code untuk memudahkan pembagian kode voucher