Mengelola Events

Halaman Events menampilkan daftar semua event yang telah dibuat dalam format card grid yang informatif dan mudah dibaca. Halaman ini memungkinkan Kamu untuk melihat overview semua event, informasi periode event, lokasi, dan dengan cepat mengakses event yang ingin dikelola lebih lanjut.

Akses Halaman Events

Untuk mengakses halaman Events:

1. Login ke dashboard Circle di aplikasi darisini
2. Navigasi ke menu Events atau akses langsung melalui URL: /events
3. Kamu akan melihat halaman daftar Events

Struktur Card Display

Halaman Events menampilkan event dalam bentuk card. Berikut adalah tabel struktur card display:

Elemen	Deskripsi	Tipe Data
Create Card	Card khusus untuk membuat event baru	Card dengan icon Plus, link ke create page
Banner Image	Gambar banner event	Image (rasio 4:5)
Title	Judul event	Text (font-semibold)
Date Range	Tanggal mulai dan berakhir event	Date Range Display (dengan icon Calendar dan Clock)
Location	Lokasi atau URL event	Text (line-clamp-1)
Card Link	Link ke halaman detail event	Link wrapper untuk seluruh card

Create Card

Card pertama di halaman adalah card khusus untuk membuat event baru:

• Icon: Icon Plus di tengah card
• Text: "Buat Event Baru"
• Action: Klik card untuk mengakses halaman create
• Style: Border dashed dengan background slate-100

Event Card

Setiap event ditampilkan dalam card yang berisi:

Layout Card

Card memiliki layout horizontal dengan dua bagian utama:

• Bagian Kiri: Banner image dengan ukuran tetap (120px width di mobile, 160px di desktop)
• Bagian Kanan: Informasi event

Banner Section

Bagian kiri card menampilkan:

• Banner Image: Gambar banner dengan rasio 4:5
• Size: 120px × 150px (mobile) atau 160px × 200px (desktop)
• Style: Rounded corners dengan object-cover

Information Section

Bagian kanan card menampilkan:

• Title: Judul event dengan style font-semibold (line-clamp-1)
• Date Range:
  • Icon Calendar dengan ukuran 16px
  • Tanggal mulai (format: DD MMM YYYY)
  • Separator "-"
  • Tanggal berakhir (format: DD MMM YYYY)
• Time Range:
  • Icon Clock dengan ukuran 16px
  • Waktu mulai (format: HH:mm)
  • Separator "-"
  • Waktu berakhir (format: HH:mm)
• Location:
  • Label "Lokasi"
  • Lokasi atau URL event (line-clamp-1 untuk truncate)

Layout Card Grid

Event ditampilkan dalam grid layout yang responsif:

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

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

Event Analytics

Halaman Events juga menampilkan Event Analytics di bagian atas yang memberikan ringkasan statistik event:

• Ringkasan Statistik: Informasi tentang event yang telah dibuat
• Grafik dan Metrik: Visualisasi data event

Empty State

Jika belum ada event yang dibuat, halaman akan menampilkan:

• Empty State Component: Pesan "Tidak ada data"
• Description: "Silakan buat event terlebih dahulu"
• Action Button: Tombol "Buat Event" untuk membuat event pertama

Navigasi ke Detail Event

Untuk melihat detail event:

1. Klik pada card event yang ingin dilihat
2. Kamu akan diarahkan ke halaman detail: /events/{eventId}
3. Di halaman detail, Kamu dapat mengelola event lebih lanjut

Load More Functionality

Halaman mendukung load more untuk menampilkan lebih banyak event:

• Load More Button: Tombol "Muat lainnya" 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 event per halaman

Tips

• Gunakan Create Card untuk membuat event baru dengan cepat
• Klik card untuk mengakses detail dan mengelola event lebih lanjut
• Perhatikan periode event untuk memastikan event masih aktif atau sudah berakhir
• Monitor statistik melalui Event Analytics untuk melihat perkembangan event
• Gunakan lokasi yang jelas untuk membantu peserta menemukan event dengan mudah