Mengelola Donations

Halaman Donations menampilkan daftar semua campaign donasi yang telah dibuat dalam format card grid yang informatif dan mudah dibaca. Halaman ini memungkinkan Kamu untuk melihat overview semua campaign, progress masing-masing campaign, dan dengan cepat mengakses campaign yang ingin dikelola lebih lanjut.

Akses Halaman Donations

Untuk mengakses halaman Donations:

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

Struktur Card Display

Halaman Donations menampilkan campaign dalam bentuk card. Berikut adalah tabel struktur card display:

Elemen	Deskripsi	Tipe Data
Create Card	Card khusus untuk membuat campaign donasi baru	Card dengan icon Plus, link ke create page
Donation Title	Judul campaign donasi	Text (font-semibold)
Date Range	Tanggal mulai dan berakhir campaign	Date Range Display (dengan icon Calendar)
Status Badge	Status campaign (PUBLISHED, DRAFT, dll)	Status Badge Component
Progress Percentage	Persentase progress donasi	Text (size xs, variant header) dalam card kecil
Progress Bar	Visualisasi progress dalam bentuk bar	Progress Component
Progress Amount	Jumlah donasi terkumpul	Currency (format Rupiah)
Card Link	Link ke halaman detail campaign	Link wrapper untuk seluruh card

Create Card

Card pertama di halaman adalah card khusus untuk membuat campaign donasi baru:

• Icon: Icon Plus di tengah card
• Text: "Buat Donasi Campaign"
• Action: Klik card untuk mengakses halaman create

Donation Campaign Card

Setiap campaign donasi ditampilkan dalam card yang berisi:

Header Section

Bagian atas card menampilkan:

• Title: Judul campaign donasi dengan style font-semibold
• Date Range:
  • Icon Calendar dengan ukuran 16px
  • Tanggal mulai (format: DD MMM YYYY)
  • Separator "-" (jika ada tanggal berakhir)
  • Tanggal berakhir (format: DD MMM YYYY)
• Status Badge: Badge status campaign di pojok kanan atas

Progress Section

Bagian bawah card menampilkan progress donasi:

• Percentage Card: Card kecil dengan background slate-200 menampilkan persentase progress
• Progress Label: Text "Progress" dengan style font-semibold
• Progress Amount: Jumlah donasi terkumpul dalam format Rupiah
• Progress Bar: Visualisasi progress dengan komponen Progress

Layout Card Grid

Campaign donasi 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.

Status Campaign

Setiap campaign memiliki status yang ditampilkan sebagai badge. Status yang tersedia:

• PUBLISHED: Campaign sudah dipublikasikan dan dapat diakses publik
• DRAFT: Campaign masih dalam draft dan belum dipublikasikan
• Status lainnya sesuai dengan state campaign

Progress Tracking

Progress donasi ditampilkan dalam beberapa format:

1. Percentage: Persentase dalam card kecil (contoh: 45%)
2. Progress Bar: Visualisasi bar yang menunjukkan seberapa banyak target yang sudah tercapai
3. Amount: Jumlah donasi terkumpul dalam format Rupiah

Jika campaign tidak memiliki target amount, progress bar akan menampilkan 100%.

Navigasi ke Detail Campaign

Untuk melihat detail campaign:

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

Empty State

Jika belum ada campaign donasi yang dibuat, halaman akan menampilkan hanya Create Card. Setelah membuat campaign pertama, card campaign akan muncul di grid.

Tips

• Gunakan Create Card untuk membuat campaign baru dengan cepat
• Periksa progress setiap campaign secara berkala
• Klik card untuk mengakses detail dan mengelola campaign lebih lanjut
• Perhatikan status campaign untuk memastikan campaign sudah dipublikasikan
• Monitor progress untuk melihat perkembangan penggalangan dana