Golf

Dear mas Alwi,

Mohon bantuannya untuk membuatkan tampilan halaman Upcoming Sessions dirancang untuk menampilkan daftar seluruh sesi golf yang telah dijadwalkan oleh pengguna dan akan berlangsung di masa mendatang. Tampilan menggunakan format card-based layout yang rapi, sehingga memudahkan pengguna melihat informasi inti setiap sesi secara cepat dan jelas.
Informasi pada setiap card meliputi:

1. Judul Sesi Latihan
• Nama program atau jenis pelatihan golf. (Contoh: Full Swing Mastery)

2. Nama Pelatih
• Nama instruktur atau coach yang memandu sesi. (Contoh: Ikmal Gunawan)

3. Lokasi
• Tempat atau lapangan tempat sesi diadakan. (Contoh: Damai Indah Golf – BSD)

4. Tanggal Sesi
• Tanggal pelaksanaan. (Contoh: 24 Desember 2025)

5. Waktu & Durasi
• Jam mulai dan selesai, beserta total durasi. (Contoh: 08:30–10:30 | 120 menit)

6. Status Sesi
• Status terkini sesi. (Contoh: Waiting, Confirmed, Cancelled)

Tujuan Halaman:
• Memberikan ringkasan yang jelas mengenai sesi golf yang akan datang.
• Memudahkan pengguna memeriksa detail penting tanpa membuka halaman lain.
• Menyajikan informasi secara terstruktur dengan ikon pendukung untuk meningkatkan keterbacaan.

Kriteria Penerimaan (Acceptance Criteria):
1. Header menampilkan teks Upcoming Sessions dengan subteks singkat yang menjelaskan fungsinya.
2. Setiap card memuat seluruh detail sesuai poin 1–6 di atas.
3. Status sesi ditampilkan dengan label berwarna:
Kuning → Waiting
4. Ikon pendukung (pelatih, lokasi, kalender, jam) digunakan secara konsisten.
5. Desain responsif dan tetap rapi di berbagai perangkat.
6. Urutan penampilan sesi berdasarkan tanggal terdekat ke terjauh.