Golf

Dear mas Alwi,

Mohon bantuannya untuk membuatkan tampilan halaman Profile dan Profile Setting pada aplikasi Golfscape berfungsi sebagai pusat pengelolaan identitas dan informasi pribadi pengguna. Desain ini mengutamakan kesederhanaan, aksesibilitas, dan konsistensi visual dengan identitas merek Golfscape. Kedua halaman ini dibuat untuk memastikan pengguna dapat dengan mudah melihat, mengakses, dan mengubah data mereka tanpa kebingungan.

1. Profile Screen
Fungsi Utama:
• Menampilkan ringkasan profil pengguna.
• Menyediakan akses cepat ke fitur terkait akun seperti pengaturan, jadwal, riwayat, dan logout.
• Memberikan opsi untuk mengubah foto profil.

Elemen Desain & Detail:
1. Header & Branding
o Posisi di bagian paling atas layar.
o Menu hamburger di pojok kiri atas untuk navigasi umum aplikasi.
o Logo Golfscape di pojok kanan atas untuk memperkuat branding.
o Background header transparan agar selaras dengan latar halaman.

2. Foto Profil
o Berbentuk lingkaran, berada di tengah.
o Diameter cukup besar agar mudah dikenali (~120px).
o Ikon pensil di sudut kanan bawah foto untuk mengganti foto profil.
o Saat ikon pensil ditekan, akan muncul modal atau navigasi ke halaman upload foto baru.

3. Nama Pengguna
o Diletakkan tepat di bawah foto profil.
o Menggunakan font yang tegas namun sederhana (medium weight).
o Contoh teks: Dhafin Riando.

4. Menu Navigasi Utama
o Settings → Menu pengaturan umum akun & aplikasi.
o My Schedule → Menampilkan jadwal booking atau aktivitas.
o History → Menampilkan riwayat pemesanan atau aktivitas sebelumnya.
o Logout → Keluar dari akun pengguna.

o Setiap menu memiliki:
Ikon di kiri untuk memperjelas fungsi.
Teks di tengah.
Panah kanan (>) untuk indikasi navigasi.
Area klik yang luas (full row) untuk kemudahan akses.

5. Tombol Back
o Posisi: Bagian bawah layar.
o Warna: Hijau muda (#D8EB9E).
o Sudut melengkung (rounded corner) agar konsisten dengan desain keseluruhan.
o Fungsi: Kembali ke halaman sebelumnya.

2. Profile Setting Screen
Fungsi Utama:
• Memungkinkan pengguna memperbarui data pribadi.
• Memberikan akses untuk mengganti foto, nama, email, dan password.

Elemen Desain & Detail:
1. Header & Subjudul
o Teks utama: Profile Setting dengan font besar dan jelas.
o Subteks: "Change your personal info." untuk memberi konteks.
o Menu hamburger dan logo Golfscape tetap dipertahankan agar konsisten dengan halaman sebelumnya.

2. Foto Profil
o Sama seperti di Profile Screen.
o Ikon pensil berfungsi sama: membuka opsi ganti foto.

3. Form Input
o Full Name:
Pre-filled dengan nama pengguna.
Field berbentuk rounded dengan background krem muda.
Placeholder diganti dengan value nama pengguna saat ini.
o Email:
Pre-filled dengan email terdaftar.
Format input email, validasi saat disimpan.
o Password:
Berisi titik-titik (●●●●●●●) untuk keamanan.
Dapat diubah dengan mengetikkan password baru.
Minimal 8 karakter, validasi dilakukan sebelum simpan.

4. Tombol Aksi
o Edit Profile:
Warna hijau tua (#A5D36C) sebagai tombol utama (primary action).
Fungsi: Menyimpan perubahan data dan kembali ke halaman Profile.
o Back:
Warna hijau muda (#D8EB9E) sebagai tombol sekunder.
Fungsi: Membatalkan perubahan dan kembali ke halaman Profile tanpa menyimpan.

Link Prototype: 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