Mengelola Assets
Halaman Assets menampilkan daftar semua aset yang terdaftar di platform dalam format card yang informatif dan mudah dibaca. Halaman ini memungkinkan Kamu untuk mencari dan menjelajahi aset sesuai kebutuhan Circle Kamu.
Akses Halaman Assets
Untuk mengakses halaman Assets:
- Login ke dashboard Circle di aplikasi darisini
- Navigasi ke menu Assets atau akses langsung melalui URL:
/assets - Kamu akan melihat halaman daftar Assets
Struktur Card Display
Setiap aset ditampilkan dalam bentuk card yang berisi informasi lengkap. Berikut adalah tabel struktur card display:
| Elemen | Deskripsi | Tipe Data |
|---|---|---|
| User Avatar | Foto profil pemilik aset | Image (circular, 40x40px) |
| Nama Lengkap | Nama lengkap pemilik aset | Text (header, size sm) |
| Alamat email pemilik aset | Text (secondary color, size sm) | |
| Separator | Garis pemisah antara user info dan asset info | Separator component |
| Asset Thumbnail | Gambar utama aset | Image (80x100px, rounded) |
| Category Badge | Kategori aset | Badge (background black/5, text xs) |
| Asset Name | Nama atau judul aset | Text (header, line-clamp-1) |
| Location | Kota tempat aset berada | Text (size sm, dengan icon MapPin) |
| Copy Phone Button | Tombol untuk menyalin nomor telepon | Button (ghost variant, icon Phone) |
Search Bar
Halaman Assets dilengkapi dengan search bar yang memungkinkan Kamu untuk mencari aset berdasarkan:
- Nama Asset: Ketik nama aset untuk mencari aset tertentu
Cara Menggunakan Search Bar
- Klik pada search bar di bagian atas halaman
- Ketik nama aset yang ingin Kamu cari
- Hasil pencarian akan otomatis ter-update saat Kamu mengetik
- Sistem akan mencari di field nama aset
Layout Card Grid
Assets ditampilkan dalam grid layout yang responsif:
- Mobile: 1 kolom
- Tablet (lg): 2 kolom
- Desktop (xl): 2 kolom dengan gap lebih besar
- Large Desktop (2xl): 4 kolom
Setiap card memiliki shadow dan spacing yang konsisten untuk kemudahan membaca.
Informasi Detail Card
User Information Section
Bagian atas card menampilkan informasi pemilik aset:
- Avatar: Foto profil pemilik dalam bentuk circular
- Nama: Nama lengkap pemilik dengan style header
- Email: Alamat email dengan warna secondary
- Copy Phone Button: Tombol dengan icon phone untuk menyalin nomor telepon
Asset Information Section
Bagian bawah card menampilkan informasi aset:
- Thumbnail: Gambar utama aset (jika tidak ada gambar, akan menampilkan placeholder
/no-photo.png) - Category Badge: Kategori aset ditampilkan sebagai badge dengan background abu-abu terang
- Asset Name: Nama atau judul aset (dengan line-clamp untuk mencegah text overflow)
- Location: Kota tempat aset berada dengan icon MapPin
Asset Thumbnail
Setiap aset menampilkan thumbnail (gambar utama):
- Ukuran: 80x100 pixels
- Format: Rounded corners
- Fallback: Jika aset tidak memiliki gambar, akan menampilkan placeholder
/no-photo.png - Source: Mengambil gambar pertama dari array images aset
Category Badge
Kategori aset ditampilkan sebagai badge:
- Style: Background hitam dengan opacity 5% (bg-black/5)
- Text: Ukuran xs dengan padding
- Position: Di atas nama aset
Kategori membantu Kamu mengidentifikasi jenis aset dengan cepat.
Pagination
Jika terdapat banyak aset, halaman akan menampilkan 25 aset per halaman. Gunakan tombol "Muat Lainnya" di bagian bawah untuk memuat aset berikutnya.
Status Tombol Pagination
- "Muat Lainnya": Muncul ketika masih ada aset yang belum ditampilkan
- "Seluruh data sudah ditampilkan": Muncul ketika semua aset sudah ditampilkan dan tombol menjadi disabled
Empty State
Jika tidak ada aset yang ditemukan berdasarkan pencarian yang Kamu gunakan, halaman akan menampilkan pesan "Tidak ada data" dengan deskripsi "Silakan ubah filter pencarian".
Copy Phone Number
Untuk menyalin nomor telepon pemilik aset:
- Klik tombol Phone (ikon telepon) di bagian kanan atas card
- Nomor telepon akan otomatis tersalin ke clipboard
- Kamu akan melihat notifikasi bahwa nomor telah berhasil disalin
- Paste nomor di aplikasi yang Kamu inginkan
Tips
- Gunakan search bar dengan keyword yang spesifik untuk hasil yang lebih tepat
- Periksa kategori aset untuk memastikan sesuai dengan kebutuhan
- Perhatikan lokasi aset untuk memastikan aksesibilitas
- Gunakan pagination untuk menjelajahi semua aset yang tersedia
- Simpan nomor telepon pemilik aset yang menarik untuk referensi di kemudian hari