Golf

Dear mas Alwi,

Mohon bantuannya untuk membuatkan tampilan halaman History yang di gunakan untuk menampilkan catatan riwayat aktivitas pengguna, yang terbagi menjadi dua kategori utama: Training dan Payment. Tampilan ini memudahkan pengguna mencari, memfilter, dan memeriksa detail riwayat sesi latihan atau pembayaran yang pernah dilakukan.

Halaman ini juga berfungsi sebagai pusat informasi bagi pengguna untuk melacak semua transaksi dan sesi yang pernah dipesan, sehingga meminimalkan kebingungan serta memastikan proses pencarian data riwayat menjadi lebih cepat dan efisien.

1. Elemen Desain & Detail
A. Header & Navigasi
• Menu di pojok kiri atas untuk membuka navigasi utama.
• Logo Golfscape di pojok kanan atas untuk konsistensi branding.

B. Search Bar & Filter
• Search Field: Placeholder "Search your session or payment history".
• Ikon kaca pembesar di kiri untuk memperjelas fungsi pencarian.
• Filter Icon di kanan untuk membuka opsi filter tambahan (tanggal, status, kategori).

C. Tab Kategori
• Dua tombol tab: Training dan Payment.
• Tab aktif berwarna hijau tua (#A0C878), tab nonaktif berwarna krem (#FAF6E9) dengan bayangan tipis.

D. List Item Riwayat
1. Training Tab

Setiap card berisi:
• Judul Kategori: "Training"
• Nama Sesi: Contoh "Golf Lesson"
• Booking ID: Nomor unik booking.
• Tanggal & Waktu: Format hari, tanggal, bulan, tahun dan jam mulai – selesai.
• Detail Latihan: Jenis analisis, contoh "Swing Analysis – Rp250.000".
• Coach Name: Nama pelatih.
• Status Button:
Warna hijau tua untuk Completed.
Berbentuk rounded kecil di kiri bawah card.

2. Payment Tab
Setiap card berisi:
• Judul Kategori: "Payment"
• Jenis Status Pembayaran: Misalnya "Pending Confirmation", "Payment Confirmation".
• Booking ID: Nomor unik booking.
• Tanggal & Waktu: Sama seperti tab Training.
• Deskripsi: Nama sesi & harga.
• Status Button:
Warna hijau muda untuk Waiting Payment.
Warna hijau tua untuk Complete.
Bentuk rounded kecil.

Protorype Figma : https://www.figma.com/proto/vLRpE0LWnQhuWvJEe9umOp/CRM-Training-Golf?node-id=213-522&t=rXAAphdkJyNQBxPY-0&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=129%3A212

database = 103.153.60.89
nama database = MinovaES_DEMO_GolfCourse