Perbaikan routing menu Tracking

.gitignore

@@ -21,3 +21,15 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Android keystore files (IMPORTANT: Never commit these!)
+*.keystore
+*.jks
+keystore.properties
+key.properties
+
+# Android build outputs
+android/app/build/
+android/app/release/
+android/.gradle/
+android/build/

APK_BUILD_SUCCESS.md

+# ✅ APK Android Berhasil Dibuat!
+
+## Informasi APK (Update Terbaru)
+
+- **Nama File**: app-debug.apk
+- **Ukuran**: 4.84 MB
+- **Tanggal Build**: 19 April 2026, 22:21
+- **Tipe**: Debug APK (untuk testing)
+- **Lokasi**: `android/app/build/outputs/apk/debug/app-debug.apk`
+
+## Update Terbaru
+
+✅ Halaman InputProspek sudah disesuaikan dengan design baru
+✅ Halaman InputPesanan sudah ditambahkan
+✅ Semua fitur sudah terintegrasi dalam APK
+
+## Cara Install APK ke HP Android
+
+### Metode 1: Via USB (ADB)
+1. Hubungkan HP ke komputer via USB
+2. Aktifkan USB Debugging di HP (Settings → Developer Options → USB Debugging)
+3. Jalankan command:
+```bash
+adb install android/app/build/outputs/apk/debug/app-debug.apk
+```
+
+### Metode 2: Via File Transfer
+1. Copy file `app-debug.apk` dari folder `android/app/build/outputs/apk/debug/` ke HP Anda
+2. Buka File Manager di HP
+3. Cari dan tap file `app-debug.apk`
+4. Jika diminta, izinkan "Install from Unknown Sources"
+5. Tap tombol "Install"
+6. Tunggu proses instalasi selesai
+7. Tap "Open" untuk membuka aplikasi
+
+### Metode 3: Via Google Drive / WhatsApp
+1. Upload file APK ke Google Drive atau kirim via WhatsApp ke diri sendiri
+2. Download di HP
+3. Tap file yang sudah didownload
+4. Install seperti metode 2
+
+## Fitur Aplikasi yang Sudah Dibuat
+
+✅ Login Page
+✅ Beranda (Home) dengan stats dan menu utama
+✅ Prospek (Leads) dengan tabs dan search
+✅ Input Prospek (Add Lead) dengan form lengkap
+✅ Detail Aktivitas dengan timeline
+✅ Follow Up dengan form dan riwayat
+✅ Buat Penawaran dengan mode Kredit/Cash
+✅ Penjualan (SPK Monitoring) dengan tabs
+✅ Detail SPK dengan informasi lengkap
+✅ Tracking (Monitoring Pesanan) dengan progress
+✅ Detail Monitoring dengan timeline progress
+✅ Bottom Navigation
+✅ Responsive Design dengan Tailwind CSS
+
+## Build APK Lagi di Masa Depan
+
+### Cara Cepat (Windows):
+```bash
+build-apk.bat
+```
+Pilih opsi 1
+
+### Cara Cepat (Command):
+```bash
+npm run android:apk
+```
+
+### Manual Step by Step:
+```bash
+npm run build
+npx cap sync android
+cd android
+./gradlew assembleDebug
+```
+
+## Build APK Release (Production)
+
+Untuk production/publish ke Play Store:
+
+1. Generate keystore (sekali saja):
+```bash
+keytool -genkey -v -keystore dms-sales-app.keystore -alias dms-sales -keyalg RSA -keysize 2048 -validity 10000
+```
+
+2. Konfigurasi signing (lihat BUILD_ANDROID.md untuk detail)
+
+3. Build release:
+```bash
+npm run build
+npx cap sync android
+cd android
+./gradlew assembleRelease
+```
+
+APK release akan ada di: `android/app/build/outputs/apk/release/`
+
+## Troubleshooting
+
+### APK tidak bisa diinstall
+- Pastikan "Install from Unknown Sources" diaktifkan
+- Uninstall versi lama jika ada
+- Pastikan HP memiliki cukup storage
+
+### Aplikasi crash saat dibuka
+- Coba build ulang dengan `./gradlew clean` terlebih dahulu
+- Pastikan semua dependencies sudah terinstall
+
+### Perlu update aplikasi
+1. Build APK baru dengan versi lebih tinggi
+2. Uninstall aplikasi lama dari HP
+3. Install APK baru
+
+## Catatan Penting
+
+⚠️ APK Debug ini hanya untuk testing, JANGAN dipublish ke Play Store
+⚠️ Untuk production, gunakan APK Release yang sudah di-sign
+⚠️ Simpan keystore file dengan aman (jangan hilang!)
+
+## Next Steps
+
+1. ✅ Install APK ke HP untuk testing
+2. ⬜ Test semua fitur aplikasi
+3. ⬜ Fix bugs jika ada
+4. ⬜ Generate keystore untuk production
+5. ⬜ Build APK Release
+6. ⬜ Publish ke Google Play Store
+
+## Dokumentasi Lengkap
+
+- `BUILD_ANDROID.md` - Panduan lengkap build APK
+- `QUICK_START.md` - Quick reference
+- `build-apk.bat` - Script Windows
+- `build-apk.sh` - Script Mac/Linux
+
+---
+
+**Selamat! Aplikasi DMS Sales sudah siap diinstall di HP Android! 🎉**

BUILD_ANDROID.md

+# Panduan Build APK Android - DMS Sales App
+
+## Prasyarat
+
+Pastikan Anda sudah menginstall:
+- Node.js (v14 atau lebih baru)
+- Java Development Kit (JDK) 11 atau 17
+- Android Studio (untuk build dengan GUI)
+- Gradle (biasanya sudah include di Android Studio)
+
+## Script NPM yang Tersedia
+
+### 1. Build React App
+```bash
+npm run build
+```
+Build production React app ke folder `build/`
+
+### 2. Sync dengan Capacitor
+```bash
+npm run cap:sync
+```
+Sync semua platform (iOS & Android)
+
+```bash
+npm run cap:sync:android
+```
+Sync hanya Android
+
+### 3. Buka Android Studio
+```bash
+npm run cap:open:android
+```
+Membuka project Android di Android Studio
+
+### 4. Build dan Buka Android Studio
+```bash
+npm run android:open
+```
+Build React app, sync dengan Android, dan buka Android Studio
+
+### 5. Build APK Debug (Command Line)
+```bash
+npm run android:apk
+```
+Build React app, sync, dan generate APK debug secara otomatis
+APK akan tersimpan di: `android/app/build/outputs/apk/debug/app-debug.apk`
+
+### 6. Build APK Debug (Manual)
+```bash
+npm run android:apk:debug
+```
+Hanya build APK debug (tanpa build React app terlebih dahulu)
+
+### 7. Build APK Release
+```bash
+npm run android:apk:release
+```
+Build APK release (production)
+APK akan tersimpan di: `android/app/build/outputs/apk/release/app-release-unsigned.apk`
+
+## Cara Tercepat Build APK
+
+### Untuk Testing (Debug APK):
+```bash
+npm run android:apk
+```
+
+Setelah selesai, APK ada di:
+```
+android/app/build/outputs/apk/debug/app-debug.apk
+```
+
+### Untuk Production (Release APK):
+```bash
+npm run build
+npm run cap:sync:android
+npm run android:apk:release
+```
+
+Setelah selesai, APK ada di:
+```
+android/app/build/outputs/apk/release/app-release-unsigned.apk
+```
+
+## Build dengan Android Studio
+
+1. Build dan sync:
+```bash
+npm run android:build
+```
+
+2. Buka Android Studio:
+```bash
+npm run cap:open:android
+```
+
+3. Di Android Studio:
+   - Tunggu Gradle sync selesai
+   - Pilih menu: **Build → Build Bundle(s) / APK(s) → Build APK(s)**
+   - Tunggu proses build selesai
+   - Klik "locate" untuk membuka folder APK
+
+## Signing APK untuk Production
+
+Untuk release APK yang bisa dipublish ke Play Store, Anda perlu signing dengan keystore:
+
+### 1. Generate Keystore (sekali saja):
+```bash
+keytool -genkey -v -keystore dms-sales-app.keystore -alias dms-sales -keyalg RSA -keysize 2048 -validity 10000
+```
+
+### 2. Konfigurasi Signing di `android/app/build.gradle`:
+
+Tambahkan sebelum `android {`:
+```gradle
+def keystorePropertiesFile = rootProject.file("keystore.properties")
+def keystoreProperties = new Properties()
+if (keystorePropertiesFile.exists()) {
+    keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
+}
+```
+
+Tambahkan di dalam `android { ... }`:
+```gradle
+signingConfigs {
+    release {
+        keyAlias keystoreProperties['keyAlias']
+        keyPassword keystoreProperties['keyPassword']
+        storeFile file(keystoreProperties['storeFile'])
+        storePassword keystoreProperties['storePassword']
+    }
+}
+
+buildTypes {
+    release {
+        signingConfig signingConfigs.release
+        minifyEnabled false
+        proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
+    }
+}
+```
+
+### 3. Buat file `android/keystore.properties`:
+```properties
+storeFile=../dms-sales-app.keystore
+storePassword=YOUR_STORE_PASSWORD
+keyAlias=dms-sales
+keyPassword=YOUR_KEY_PASSWORD
+```
+
+### 4. Build Signed APK:
+```bash
+npm run android:apk:release
+```
+
+APK signed akan tersimpan di: `android/app/build/outputs/apk/release/app-release.apk`
+
+## Troubleshooting
+
+### Error: Gradle command not found
+Pastikan Android Studio sudah terinstall dan Gradle sudah ada di PATH, atau gunakan:
+```bash
+cd android
+./gradlew assembleDebug
+```
+
+### Error: Java version
+Pastikan menggunakan JDK 11 atau 17:
+```bash
+java -version
+```
+
+### Error: Build failed
+Coba clean build:
+```bash
+cd android
+./gradlew clean
+./gradlew assembleDebug
+```
+
+### APK tidak bisa diinstall
+- Pastikan "Install from Unknown Sources" diaktifkan di Android
+- Untuk release APK, pastikan sudah di-sign dengan keystore
+
+## Install APK ke Device
+
+### Via USB (ADB):
+```bash
+adb install android/app/build/outputs/apk/debug/app-debug.apk
+```
+
+### Via File Transfer:
+1. Copy APK ke device
+2. Buka file manager di device
+3. Tap APK file
+4. Izinkan install dari unknown sources
+5. Install
+
+## Update Capacitor Config
+
+Jika perlu update konfigurasi app, edit `capacitor.config.json`:
+```json
+{
+  "appId": "com.dms.sales",
+  "appName": "DMS Sales",
+  "webDir": "build",
+  "bundledWebRuntime": false
+}
+```
+
+Setelah update, jalankan:
+```bash
+npm run cap:sync:android
+```
+
+## Tips
+
+1. Selalu build React app terlebih dahulu sebelum sync ke Android
+2. Gunakan debug APK untuk testing
+3. Gunakan release APK yang sudah di-sign untuk production
+4. Simpan keystore file dengan aman (jangan commit ke git)
+5. Tambahkan `*.keystore` dan `keystore.properties` ke `.gitignore`
+
+## Struktur Output APK
+
+```
+android/app/build/outputs/apk/
+├── debug/
+│   └── app-debug.apk          (untuk testing)
+└── release/
+    └── app-release.apk        (untuk production, setelah signing)
+```

QUICK_START.md

+# Quick Start - Build APK Android
+
+## Cara Tercepat (Windows)
+
+### Menggunakan Script Batch:
+```bash
+build-apk.bat
+```
+Pilih opsi 1 untuk build APK debug
+
+### Menggunakan NPM Script:
+```bash
+npm run android:apk
+```
+
+APK akan tersimpan di: `android/app/build/outputs/apk/debug/app-debug.apk`
+
+## Cara Tercepat (Mac/Linux)
+
+```bash
+npm run android:apk
+```
+
+APK akan tersimpan di: `android/app/build/outputs/apk/debug/app-debug.apk`
+
+## Install APK ke HP Android
+
+### Via USB:
+1. Hubungkan HP ke komputer via USB
+2. Aktifkan USB Debugging di HP
+3. Jalankan:
+```bash
+adb install android/app/build/outputs/apk/debug/app-debug.apk
+```
+
+### Via File Transfer:
+1. Copy file `app-debug.apk` ke HP
+2. Buka file manager di HP
+3. Tap file APK
+4. Izinkan install dari unknown sources jika diminta
+5. Tap Install
+
+## Semua Perintah yang Tersedia
+
+| Perintah | Fungsi |
+|----------|--------|
+| `npm run build` | Build React app |
+| `npm run cap:sync:android` | Sync dengan Android |
+| `npm run cap:open:android` | Buka Android Studio |
+| `npm run android:build` | Build + Sync |
+| `npm run android:open` | Build + Sync + Buka Studio |
+| `npm run android:apk` | Build APK Debug (lengkap) |
+| `npm run android:apk:debug` | Build APK Debug (cepat) |
+| `npm run android:apk:release` | Build APK Release |
+| `build-apk.bat` | Menu interaktif (Windows) |
+
+## Troubleshooting Cepat
+
+### Gradle error:
+```bash
+cd android
+./gradlew clean
+cd ..
+npm run android:apk
+```
+
+### Java version error:
+Pastikan JDK 11 atau 17 terinstall
+
+### APK tidak bisa install:
+Aktifkan "Install from Unknown Sources" di pengaturan Android
+
+## Untuk Production
+
+1. Generate keystore (sekali saja):
+```bash
+keytool -genkey -v -keystore dms-sales-app.keystore -alias dms-sales -keyalg RSA -keysize 2048 -validity 10000
+```
+
+2. Konfigurasi signing (lihat BUILD_ANDROID.md)
+
+3. Build release:
+```bash
+npm run android:apk:release
+```
+
+## Butuh Bantuan?
+
+Lihat dokumentasi lengkap di `BUILD_ANDROID.md`

build-apk.bat

+@echo off
+echo ========================================
+echo DMS Sales App - Android APK Builder
+echo ========================================
+echo.
+
+:menu
+echo Pilih opsi build:
+echo 1. Build APK Debug (untuk testing)
+echo 2. Build APK Release (untuk production)
+echo 3. Build dan Buka Android Studio
+echo 4. Sync Capacitor saja
+echo 5. Exit
+echo.
+set /p choice="Masukkan pilihan (1-5): "
+
+if "%choice%"=="1" goto debug
+if "%choice%"=="2" goto release
+if "%choice%"=="3" goto studio
+if "%choice%"=="4" goto sync
+if "%choice%"=="5" goto end
+echo Pilihan tidak valid!
+goto menu
+
+:debug
+echo.
+echo [1/3] Building React app...
+call npm run build
+if errorlevel 1 (
+    echo Error: Build React app gagal!
+    pause
+    goto menu
+)
+
+echo.
+echo [2/3] Syncing dengan Android...
+call npx cap sync android
+if errorlevel 1 (
+    echo Error: Sync Capacitor gagal!
+    pause
+    goto menu
+)
+
+echo.
+echo [3/3] Building APK Debug...
+cd android
+call gradlew assembleDebug
+if errorlevel 1 (
+    echo Error: Build APK gagal!
+    cd ..
+    pause
+    goto menu
+)
+cd ..
+
+echo.
+echo ========================================
+echo APK Debug berhasil dibuat!
+echo Lokasi: android\app\build\outputs\apk\debug\app-debug.apk
+echo ========================================
+echo.
+pause
+goto menu
+
+:release
+echo.
+echo [1/3] Building React app...
+call npm run build
+if errorlevel 1 (
+    echo Error: Build React app gagal!
+    pause
+    goto menu
+)
+
+echo.
+echo [2/3] Syncing dengan Android...
+call npx cap sync android
+if errorlevel 1 (
+    echo Error: Sync Capacitor gagal!
+    pause
+    goto menu
+)
+
+echo.
+echo [3/3] Building APK Release...
+cd android
+call gradlew assembleRelease
+if errorlevel 1 (
+    echo Error: Build APK gagal!
+    cd ..
+    pause
+    goto menu
+)
+cd ..
+
+echo.
+echo ========================================
+echo APK Release berhasil dibuat!
+echo Lokasi: android\app\build\outputs\apk\release\app-release.apk
+echo ========================================
+echo.
+echo CATATAN: Untuk production, APK harus di-sign dengan keystore!
+echo Lihat BUILD_ANDROID.md untuk panduan signing.
+echo.
+pause
+goto menu
+
+:studio
+echo.
+echo [1/2] Building dan Syncing...
+call npm run android:build
+if errorlevel 1 (
+    echo Error: Build gagal!
+    pause
+    goto menu
+)
+
+echo.
+echo [2/2] Membuka Android Studio...
+call npx cap open android
+
+echo.
+echo Android Studio dibuka. Build APK dari menu:
+echo Build ^> Build Bundle(s) / APK(s) ^> Build APK(s)
+echo.
+pause
+goto menu
+
+:sync
+echo.
+echo Syncing Capacitor dengan Android...
+call npx cap sync android
+if errorlevel 1 (
+    echo Error: Sync gagal!
+    pause
+    goto menu
+)
+
+echo.
+echo Sync berhasil!
+echo.
+pause
+goto menu
+
+:end
+echo.
+echo Terima kasih!
+exit

build-apk.sh

+#!/bin/bash
+
+echo "========================================"
+echo "DMS Sales App - Android APK Builder"
+echo "========================================"
+echo ""
+
+show_menu() {
+    echo "Pilih opsi build:"
+    echo "1. Build APK Debug (untuk testing)"
+    echo "2. Build APK Release (untuk production)"
+    echo "3. Build dan Buka Android Studio"
+    echo "4. Sync Capacitor saja"
+    echo "5. Exit"
+    echo ""
+    read -p "Masukkan pilihan (1-5): " choice
+    
+    case $choice in
+        1) build_debug ;;
+        2) build_release ;;
+        3) open_studio ;;
+        4) sync_only ;;
+        5) exit 0 ;;
+        *) echo "Pilihan tidak valid!"; show_menu ;;
+    esac
+}
+
+build_debug() {
+    echo ""
+    echo "[1/3] Building React app..."
+    npm run build || { echo "Error: Build React app gagal!"; read -p "Press enter..."; show_menu; return; }
+    
+    echo ""
+    echo "[2/3] Syncing dengan Android..."
+    npx cap sync android || { echo "Error: Sync Capacitor gagal!"; read -p "Press enter..."; show_menu; return; }
+    
+    echo ""
+    echo "[3/3] Building APK Debug..."
+    cd android && ./gradlew assembleDebug && cd .. || { echo "Error: Build APK gagal!"; cd ..; read -p "Press enter..."; show_menu; return; }
+    
+    echo ""
+    echo "========================================"
+    echo "APK Debug berhasil dibuat!"
+    echo "Lokasi: android/app/build/outputs/apk/debug/app-debug.apk"
+    echo "========================================"
+    echo ""
+    read -p "Press enter to continue..."
+    show_menu
+}
+
+build_release() {
+    echo ""
+    echo "[1/3] Building React app..."
+    npm run build || { echo "Error!"; read -p "Press enter..."; show_menu; return; }
+    
+    echo ""
+    echo "[2/3] Syncing dengan Android..."
+    npx cap sync android || { echo "Error!"; read -p "Press enter..."; show_menu; return; }
+    
+    echo ""
+    echo "[3/3] Building APK Release..."
+    cd android && ./gradlew assembleRelease && cd .. || { echo "Error!"; cd ..; read -p "Press enter..."; show_menu; return; }
+    
+    echo ""
+    echo "========================================"
+    echo "APK Release berhasil dibuat!"
+    echo "Lokasi: android/app/build/outputs/apk/release/app-release.apk"
+    echo "========================================"
+    echo ""
+    read -p "Press enter to continue..."
+    show_menu
+}
+
+open_studio() {
+    echo ""
+    echo "[1/2] Building dan Syncing..."
+    npm run android:build || { echo "Error!"; read -p "Press enter..."; show_menu; return; }
+    
+    echo ""
+    echo "[2/2] Membuka Android Studio..."
+    npx cap open android
+    
+    echo ""
+    read -p "Press enter to continue..."
+    show_menu
+}
+
+sync_only() {
+    echo ""
+    echo "Syncing Capacitor dengan Android..."
+    npx cap sync android || { echo "Error!"; read -p "Press enter..."; show_menu; return; }
+    
+    echo ""
+    echo "Sync berhasil!"
+    echo ""
+    read -p "Press enter to continue..."
+    show_menu
+}
+
+show_menu

package.json

@@ -21,7 +21,15 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "cap:sync": "npx cap sync",
+    "cap:sync:android": "npx cap sync android",
+    "cap:open:android": "npx cap open android",
+    "android:build": "npm run build && npx cap sync android",
+    "android:open": "npm run android:build && npx cap open android",
+    "android:apk:debug": "cd android && gradlew assembleDebug",
+    "android:apk:release": "cd android && gradlew assembleRelease",
+    "android:apk": "npm run build && npx cap sync android && cd android && gradlew assembleDebug"
   },
   "eslintConfig": {
     "extends": [

src/App.js

@@ -4,6 +4,7 @@ import Login from './pages/Login';
 import Beranda from './pages/Beranda';
 import Prospek from './pages/Prospek';
 import InputProspek from './pages/InputProspek';
+import InputPesanan from './pages/InputPesanan';
 import Penawaran from './pages/Penawaran';
 import Activities from './pages/Activities';
 import Transaksi from './pages/Transaksi';
@@ -37,6 +38,7 @@ function App() {
           <Route path="/" element={<ProtectedRoute><Beranda /></ProtectedRoute>} />
           <Route path="/prospek" element={<ProtectedRoute><Prospek /></ProtectedRoute>} />
           <Route path="/prospek/input" element={<ProtectedRoute><InputProspek /></ProtectedRoute>} />
+          <Route path="/input-pesanan" element={<ProtectedRoute><InputPesanan /></ProtectedRoute>} />
           <Route path="/penawaran" element={<ProtectedRoute><Penawaran /></ProtectedRoute>} />
           <Route path="/activities" element={<ProtectedRoute><Activities /></ProtectedRoute>} />
           <Route path="/transaksi" element={<ProtectedRoute><Transaksi /></ProtectedRoute>} />

src/pages/Beranda.js

@@ -120,7 +120,7 @@ const Beranda = () => {
             </button>
 
             <button 
-              onClick={() => navigate('/activities')}
+              onClick={() => navigate('/tracking')}
               className="bg-white rounded-2xl p-4 shadow-sm flex flex-col items-center gap-2"
             >
               <div className="w-14 h-14 bg-purple-100 rounded-2xl flex items-center justify-center">

src/pages/BuatPenawaran.js

@@ -173,8 +173,7 @@ const BuatPenawaran = () => {
                   className="w-full px-4 py-3 bg-gray-50 border-0 rounded-xl text-gray-900 appearance-none focus:outline-none focus:ring-2 focus:ring-slate-800"
                 >
                   <option value="Chery">Chery</option>
-                  <option value="Hyundai">Hyundai</option>
-                  <option value="Toyota">Toyota</option>
+                  <option value="Hyundai">Jaecoo</option>
                 </select>
               </div>
 
@@ -240,6 +239,14 @@ const BuatPenawaran = () => {
 
             {activeTab === 'kredit' && (
               <div className="space-y-3">
+                <div>
+                  <label className="block text-xs text-gray-500 mb-1">NAMA LEASING</label>
+                  <select
+                    className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800 mb-4">
+                    <option>ADIRA MULTIFINANCE (ADIRA)</option>
+                    <option>MANDIRI UTAMA FINANCE (MUF)</option>
+                  </select>
+                </div>
                 <div>
                   <label className="block text-sm text-gray-600 mb-2">TENOR (BULAN)</label>
                   <select
@@ -256,11 +263,11 @@ const BuatPenawaran = () => {
                 </div>
 
                 <div>
-                  <label className="block text-sm text-gray-600 mb-2">UANG MUKA</label>
+                  <label className="block text-sm text-gray-600 mb-2">BOOKING FEE</label>
                   <input
                     type="text"
-                    value={formData.uangMuka}
-                    onChange={(e) => setFormData({...formData, uangMuka: e.target.value})}
+                    value={formData.bookingFee}
+                    onChange={(e) => setFormData({...formData, bookingFee: e.target.value})}
                     placeholder="Masukkan nominal"
                     className="w-full px-4 py-3 bg-gray-50 border-0 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-800"
                   />

src/pages/InputPesanan.js

+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import BottomNav from '../components/BottomNav';
+
+const InputPesanan = () => {
+  const navigate = useNavigate();
+  const [selectedBrand, setSelectedBrand] = useState('Chery');
+  const [selectedUnit, setSelectedUnit] = useState(null);
+  const [paymentMethod, setPaymentMethod] = useState('kredit');
+  const [showSuccessModal, setShowSuccessModal] = useState(false);
+
+  const [formData, setFormData] = useState({
+    namaPelanggan: '',
+    noWhatsapp: '',
+    nik: '',
+    alamatPengiriman: '',
+    tanggalTersediaPengiriman: '',
+    tenor: '',
+    uangMuka: '',
+    cicilanPerBulan: '',
+    hargaJual: '',
+    diskon: '',
+    bookingFee: '',
+    totalBiaya: ''
+  });
+
+  const units = [
+    {
+      id: 'tiggo-8-pro-max',
+      name: 'Tiggo 8 Pro Max 2026',
+      price: 'Rp 650.000.000',
+      specs: '2.0T AWD • 250 HP • 7 Seater',
+      badge: 'READY STOCK',
+      badgeColor: 'bg-green-500 text-white'
+    },
+    {
+      id: 'omoda-5-gt',
+      name: 'Omoda 5 GT 2026',
+      price: 'Rp 480.000.000',
+      specs: '1.6T DCT • 197 HP • Futuristic SUV',
+      badge: 'INDENT',
+      badgeColor: 'bg-orange-500 text-white'
+    },
+    {
+      id: 'tiggo-7-pro-hybrid',
+      name: 'Tiggo 7 Pro Hybrid 2026',
+      price: 'Rp 520.000.000',
+      specs: '1.5T HEV • 170 HP • Efficient Hybrid',
+      badge: 'READY STOCK',
+      badgeColor: 'bg-green-500 text-white'
+    }
+  ];
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setShowSuccessModal(true);
+  };
+
+  return (
+    <div className="flex flex-col h-screen bg-gray-50">
+      {/* Header */}
+      <div className="sticky top-0 z-50 bg-white px-4 py-3 shadow-sm">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <button onClick={() => navigate(-1)} className="text-gray-700">
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              </svg>
+            </button>
+            <h1 className="text-base font-bold text-gray-900">Input Pesanan/Penjualan</h1>
+          </div>
+          <button className="text-gray-700">
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto pb-20">
+        <form onSubmit={handleSubmit} className="p-4 space-y-4">
+          {/* Data Pelanggan */}
+          <div className="bg-white rounded-2xl p-4 shadow-sm">
+            <div className="flex items-center gap-2 mb-4">
+              <svg className="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+              </svg>
+              <h3 className="font-bold text-gray-900">Data Pelanggan</h3>
+            </div>
+
+            <div className="space-y-3">
+              <div>
+                <label className="block text-xs text-gray-500 mb-1">NAMA PELANGGAN</label>
+                <input
+                  type="text"
+                  placeholder="Masukkan nama lengkap"
+                  className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800"
+                  value={formData.namaPelanggan}
+                  onChange={(e) => setFormData({...formData, namaPelanggan: e.target.value})}
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs text-gray-500 mb-1">NO WHATSAPP / HP</label>
+                <input
+                  type="tel"
+                  placeholder="08xxxxxxxxxx"
+                  className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800"
+                  value={formData.noWhatsapp}
+                  onChange={(e) => setFormData({...formData, noWhatsapp: e.target.value})}
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs text-gray-500 mb-1">NIK / CUSTOMER ID</label>
+                <input
+                  type="text"
+                  placeholder="16 digit NIK"
+                  className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800"
+                  value={formData.nik}
+                  onChange={(e) => setFormData({...formData, nik: e.target.value})}
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Detail Pengiriman */}
+          <div className="bg-white rounded-2xl p-4 shadow-sm">
+            <div className="flex items-center gap-2 mb-4">
+              <svg className="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+              </svg>
+              <h3 className="font-bold text-gray-900">Detail Pengiriman</h3>
+            </div>
+
+            <div className="space-y-3">
+              <div>
+                <label className="block text-xs text-gray-500 mb-1">ALAMAT PENGIRIMAN</label>
+                <textarea
+                  placeholder="Masukkan alamat lengkap pengiriman"
+                  rows="2"
+                  className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800 resize-none"
+                  value={formData.alamatPengiriman}
+                  onChange={(e) => setFormData({...formData, alamatPengiriman: e.target.value})}
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs text-gray-500 mb-1">TANGGAL TERSEDIA PENGIRIMAN</label>
+                <input
+                  type="text"
+                  placeholder="mm/dd/yyyy"
+                  className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800"
+                  value={formData.tanggalTersediaPengiriman}
+                  onChange={(e) => setFormData({...formData, tanggalTersediaPengiriman: e.target.value})}
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Pemilihan Unit */}
+          <div className="bg-white rounded-2xl p-4 shadow-sm">
+            <div className="flex items-center gap-2 mb-4">
+              <svg className="w-5 h-5 text-gray-700" fill="currentColor" viewBox="0 0 20 20">
+                <path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" />
+                <path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0115.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z" />
+              </svg>
+              <h3 className="font-bold text-gray-900">Pemilihan Unit</h3>
+            </div>
+
+            <div>
+              <label className="block text-xs text-gray-500 mb-2">PILIH BRAND</label>
+              <select
+                className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800 mb-4"
+                value={selectedBrand}
+                onChange={(e) => setSelectedBrand(e.target.value)}
+              >
+                <option>Chery</option>
+                <option>Omoda</option>
+              </select>
+
+              <div className="space-y-2">
+                {units.map((unit) => (
+                  <button
+                    key={unit.id}
+                    type="button"
+                    onClick={() => setSelectedUnit(unit.id)}
+                    className={`w-full bg-gray-50 rounded-xl p-3 text-left border-2 transition-all ${
+                      selectedUnit === unit.id ? 'border-slate-800' : 'border-transparent'
+                    }`}
+                  >
+                    <div className="flex items-start justify-between">
+                      <div className="flex-1">
+                        <div className="flex items-center gap-2 mb-1">
+                          <h4 className="font-bold text-sm text-gray-900">{unit.name}</h4>
+                          <span className={`${unit.badgeColor} text-xs px-2 py-0.5 rounded font-semibold`}>
+                            {unit.badge}
+                          </span>
+                        </div>
+                        <p className="text-sm font-bold text-gray-900 mb-0.5">{unit.price}</p>
+                        <p className="text-xs text-gray-600">{unit.specs}</p>
+                      </div>
+                      <svg className="w-5 h-5 text-gray-400 flex-shrink-0 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                      </svg>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Metode Pembayaran */}
+          <div className="bg-white rounded-2xl p-4 shadow-sm">
+            <div className="flex items-center gap-2 mb-4">
+              <svg className="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
+              </svg>
+              <h3 className="font-bold text-gray-900">Metode Pembayaran</h3>
+            </div>
+
+            <div className="flex gap-2 mb-4">
+              <button
+                type="button"
+                onClick={() => setPaymentMethod('kredit')}
+                className={`flex-1 py-2 rounded-lg text-sm font-semibold transition-colors ${
+                  paymentMethod === 'kredit'
+                    ? 'bg-slate-800 text-white'
+                    : 'bg-gray-100 text-gray-700'
+                }`}
+              >
+                Kredit
+              </button>
+              <button
+                type="button"
+                onClick={() => setPaymentMethod('cash')}
+                className={`flex-1 py-2 rounded-lg text-sm font-semibold transition-colors ${
+                  paymentMethod === 'cash'
+                    ? 'bg-slate-800 text-white'
+                    : 'bg-gray-100 text-gray-700'
+                }`}
+              >
+                Cash
+              </button>
+            </div>
+
+            {paymentMethod === 'kredit' ? (
+              <div className="space-y-3">
+                <div>
+                  <label className="block text-xs text-gray-500 mb-1">NAMA LEASING</label>
+                  <select
+                    className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800 mb-4">
+                    <option>ADIRA MULTIFINANCE (ADIRA)</option>
+                    <option>MANDIRI UTAMA FINANCE (MUF)</option>
+                </select>
+                </div>
+                <div>
+                  <label className="block text-xs text-gray-500 mb-1">TENOR (BULAN)</label>
+                  <input
+                    type="text"
+                    placeholder="Masukkan tenor"
+                    className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800"
+                    value={formData.tenor}
+                    onChange={(e) => setFormData({...formData, tenor: e.target.value})}
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs text-gray-500 mb-1">UANG MUKA</label>
+                  <input
+                    type="text"
+                    placeholder="Rp 0"
+                    className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800"
+                    value={formData.uangMuka}
+                    onChange={(e) => setFormData({...formData, uangMuka: e.target.value})}
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs text-gray-500 mb-1">CICILAN PER BULAN</label>
+                  <input
+                    type="text"
+                    placeholder="Rp 0"
+                    className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800"
+                    value={formData.cicilanPerBulan}
+                    onChange={(e) => setFormData({...formData, cicilanPerBulan: e.target.value})}
+                  />
+                </div>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                <div>
+                  <label className="block text-xs text-gray-500 mb-1">HARGA JUAL</label>
+                  <input
+                    type="text"
+                    placeholder="Rp 0"
+                    className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800"
+                    value={formData.hargaJual}
+                    onChange={(e) => setFormData({...formData, hargaJual: e.target.value})}
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs text-gray-500 mb-1">DISKON</label>
+                  <input
+                    type="text"
+                    placeholder="Rp 0"
+                    className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800"
+                    value={formData.diskon}
+                    onChange={(e) => setFormData({...formData, diskon: e.target.value})}
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs text-gray-500 mb-1">BOOKING FEE</label>
+                  <input
+                    type="text"
+                    placeholder="Rp 10.000.000"
+                    className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800"
+                    value={formData.bookingFee}
+                    onChange={(e) => setFormData({...formData, bookingFee: e.target.value})}
+                  />
+                </div>
+              </div>
+            )}
+
+            <div className="mt-4 pt-4 border-t">
+              <div className="flex justify-between items-center">
+                <span className="text-sm text-gray-600">Total Biaya</span>
+                <span className="text-xl font-bold text-gray-900">Rp 488.800.000</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Dokumen Operasional */}
+          <div className="bg-white rounded-2xl p-4 shadow-sm">
+            <div className="flex items-center gap-2 mb-4">
+              <svg className="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+              <h3 className="font-bold text-gray-900">Dokumen Operasional</h3>
+            </div>
+
+            <div className="space-y-2">
+              <button type="button" className="w-full flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
+                <div className="w-10 h-10 bg-gray-200 rounded-lg flex items-center justify-center">
+                  <svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
+                  </svg>
+                </div>
+                <div className="flex-1 text-left">
+                  <p className="text-sm font-semibold text-gray-900">Foto KTP</p>
+                  <p className="text-xs text-gray-500">Upload foto KTP</p>
+                </div>
+              </button>
+
+              <button type="button" className="w-full flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
+                <div className="w-10 h-10 bg-gray-200 rounded-lg flex items-center justify-center">
+                  <svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                  </svg>
+                </div>
+                <div className="flex-1 text-left">
+                  <p className="text-sm font-semibold text-gray-900">Kartu Keluarga</p>
+                  <p className="text-xs text-gray-500">Upload kartu keluarga</p>
+                </div>
+              </button>
+
+              <button type="button" className="w-full flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
+                <div className="w-10 h-10 bg-gray-200 rounded-lg flex items-center justify-center">
+                  <svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                  </svg>
+                </div>
+                <div className="flex-1 text-left">
+                  <p className="text-sm font-semibold text-gray-900">NPWP</p>
+                  <p className="text-xs text-gray-500">Upload NPWP</p>
+                </div>
+              </button>
+            </div>
+          </div>
+
+          {/* Submit Button */}
+          <button
+            type="submit"
+            className="w-full bg-slate-800 text-white py-4 rounded-xl font-semibold flex items-center justify-center gap-2"
+          >
+            Simpan & Proses Pesanan
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+            </svg>
+          </button>
+        </form>
+      </div>
+
+      <BottomNav />
+
+      {/* Success Modal */}
+      {showSuccessModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-3xl p-8 max-w-sm w-full animate-scale-in">
+            <div className="flex justify-center mb-6">
+              <div className="w-20 h-20 bg-green-500 rounded-full flex items-center justify-center">
+                <svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+                </svg>
+              </div>
+            </div>
+            <h2 className="text-2xl font-bold text-gray-900 text-center mb-3">
+              Pesanan Berhasil!
+            </h2>
+            <p className="text-sm text-gray-600 text-center mb-8">
+              Pesanan telah berhasil dibuat dan akan diproses segera.
+            </p>
+            <button
+              onClick={() => {
+                setShowSuccessModal(false);
+                navigate('/activities');
+              }}
+              className="w-full bg-slate-800 text-white py-4 rounded-xl font-semibold"
+            >
+              Lihat Status Pesanan
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default InputPesanan;

src/pages/InputProspek.js

@@ -5,11 +5,13 @@ import BottomNav from '../components/BottomNav';
 const InputProspek = () => {
   const navigate = useNavigate();
   const [showSuccessModal, setShowSuccessModal] = useState(false);
+  const [selectedBrand, setSelectedBrand] = useState('Chery');
+  const [selectedUnit, setSelectedUnit] = useState(null);
+  const [selectedSources, setSelectedSources] = useState([]);
+  
   const [formData, setFormData] = useState({
     namaCustomer: '',
     noHP: '',
-    unitDiminati: '',
-    sumberLead: [],
     catatanTambahan: ''
   });
 
@@ -20,7 +22,7 @@ const InputProspek = () => {
       price: 'Rp 650.000.000',
       specs: '2.0T AWD • 250 HP • 7 Seater',
       badge: 'READY STOCK',
-      badgeColor: 'bg-green-100 text-green-700'
+      badgeColor: 'bg-green-500 text-white'
     },
     {
       id: 'omoda-5-gt',
@@ -28,7 +30,7 @@ const InputProspek = () => {
       price: 'Rp 480.000.000',
       specs: '1.6T DCT • 197 HP • Futuristic SUV',
       badge: 'INDENT',
-      badgeColor: 'bg-orange-100 text-orange-700'
+      badgeColor: 'bg-orange-500 text-white'
     },
     {
       id: 'tiggo-7-pro-hybrid',
@@ -36,7 +38,7 @@ const InputProspek = () => {
       price: 'Rp 520.000.000',
       specs: '1.5T HEV • 170 HP • Efficient Hybrid',
       badge: 'READY STOCK',
-      badgeColor: 'bg-green-100 text-green-700'
+      badgeColor: 'bg-green-500 text-white'
     }
   ];
 
@@ -48,12 +50,11 @@ const InputProspek = () => {
   ];
 
   const handleSumberToggle = (id) => {
-    setFormData(prev => ({
-      ...prev,
-      sumberLead: prev.sumberLead.includes(id)
-        ? prev.sumberLead.filter(s => s !== id)
-        : [...prev.sumberLead, id]
-    }));
+    setSelectedSources(prev =>
+      prev.includes(id)
+        ? prev.filter(s => s !== id)
+        : [...prev, id]
+    );
   };
 
   const handleSubmit = (e) => {
@@ -65,143 +66,158 @@ const InputProspek = () => {
   return (
     <div className="flex flex-col h-screen bg-gray-50">
       {/* Header */}
-      <div className="sticky top-0 z-50 bg-white px-4 py-3 flex items-center shadow-sm">
-        <button onClick={() => navigate(-1)} className="text-gray-700">
-          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-          </svg>
-        </button>
-        <span className="ml-3 font-semibold text-gray-800">Tambah Lead Baru</span>
+      <div className="sticky top-0 z-50 bg-white px-4 py-3 shadow-sm">
+        <div className="flex items-center gap-3">
+          <button onClick={() => navigate(-1)} className="text-gray-700">
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+          </button>
+          <h1 className="text-base font-semibold text-gray-900">Tambah Lead Baru</h1>
+        </div>
       </div>
       
       <div className="flex-1 overflow-y-auto pb-20">
         <div className="p-4">
-        {/* Header Section */}
-        <div className="bg-slate-800 rounded-2xl p-5 mb-6 text-white">
-          <p className="text-xs text-gray-300 mb-1">Manajemen Prospek</p>
-          <h1 className="text-xl font-bold mb-2">Kualifikasi Prospek</h1>
-          <p className="text-sm text-gray-300">
-            Lengkapi data calon pelanggan untuk memulai proses sales funnel.
-          </p>
-        </div>
-
-        <form onSubmit={handleSubmit} className="space-y-5">
-          {/* Nama Customer */}
-          <div>
-            <label className="block text-sm font-semibold text-gray-700 mb-2">
-              Nama Customer
-            </label>
-            <input
-              type="text"
-              value={formData.namaCustomer}
-              onChange={(e) => setFormData({...formData, namaCustomer: e.target.value})}
-              placeholder="Contoh: Budi Santoso"
-              className="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-800 focus:border-transparent"
-              required
-            />
+          {/* Header Section */}
+          <div className="bg-slate-800 rounded-2xl p-5 mb-6 text-white">
+            <p className="text-xs text-gray-300 mb-1">Manajemen Prospek</p>
+            <h1 className="text-xl font-bold mb-2">Kualifikasi Prospek</h1>
+            <p className="text-sm text-gray-300">
+              Lengkapi data calon pelanggan untuk memulai proses sales funnel.
+            </p>
           </div>
 
-          {/* Nomor HP / WhatsApp */}
-          <div>
-            <label className="block text-sm font-semibold text-gray-700 mb-2">
-              Nomor HP / u hatsApp
-            </label>
-            <input
-              type="tel"
-              value={formData.noHP}
-              onChange={(e) => setFormData({...formData, noHP: e.target.value})}
-              placeholder="+62  812 3456 7890"
-              className="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-800 focus:border-transparent"
-              required
-            />
-          </div>
+          <form onSubmit={handleSubmit} className="space-y-5">
+            {/* Nama Customer */}
+            <div>
+              <label className="block text-sm font-semibold text-gray-700 mb-2">
+                Nama Customer
+              </label>
+              <input
+                type="text"
+                value={formData.namaCustomer}
+                onChange={(e) => setFormData({...formData, namaCustomer: e.target.value})}
+                placeholder="Contoh: Budi Santoso"
+                className="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-800 focus:border-transparent"
+                required
+              />
+            </div>
 
-          {/* Unit yang Diminati */}
-          <div>
-            <label className="block text-sm font-semibold text-gray-700 mb-3">
-              Unit yang Diminati
-            </label>
-            <div className="space-y-3">
-              {units.map((unit) => (
-                <button
-                  key={unit.id}
-                  type="button"
-                  onClick={() => setFormData({...formData, unitDiminati: unit.id})}
-                  className={`w-full bg-white rounded-xl p-4 border-2 transition-all text-left ${
-                    formData.unitDiminati === unit.id
-                      ? 'border-slate-800 shadow-md'
-                      : 'border-gray-200'
-                  }`}
+            {/* Nomor HP / WhatsApp */}
+            <div>
+              <label className="block text-sm font-semibold text-gray-700 mb-2">
+                Nomor HP / u hatsApp
+              </label>
+              <input
+                type="tel"
+                value={formData.noHP}
+                onChange={(e) => setFormData({...formData, noHP: e.target.value})}
+                placeholder="+62  812 3456 7890"
+                className="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-800 focus:border-transparent"
+                required
+              />
+            </div>
+
+            {/* Unit yang Diminati */}
+            <div>
+              <label className="block text-sm font-semibold text-gray-700 mb-3">
+                Unit yang Diminati
+              </label>
+              
+              <div className="mb-3">
+                <label className="block text-xs text-gray-500 mb-2">PILIH BRAND</label>
+                <select
+                  className="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-gray-900 focus:outline-none focus:ring-2 focus:ring-slate-800"
+                  value={selectedBrand}
+                  onChange={(e) => setSelectedBrand(e.target.value)}
                 >
-                  <div className="flex items-start justify-between mb-2">
-                    <div className="flex-1">
-                      <div className="flex items-center gap-2 mb-1">
-                        <h3 className="font-bold text-gray-900">{unit.name}</h3>
-                        <span className={`${unit.badgeColor} text-xs px-2 py-0.5 rounded font-semibold`}>
-                          {unit.badge}
-                        </span>
+                  <option>Chery</option>
+                  <option>Jaecoo</option>
+                </select>
+              </div>
+
+              <div className="space-y-3">
+                {units.map((unit) => (
+                  <button
+                    key={unit.id}
+                    type="button"
+                    onClick={() => setSelectedUnit(unit.id)}
+                    className={`w-full bg-white rounded-xl p-4 border-2 transition-all text-left ${
+                      selectedUnit === unit.id
+                        ? 'border-slate-800 shadow-md'
+                        : 'border-gray-200'
+                    }`}
+                  >
+                    <div className="flex items-start justify-between">
+                      <div className="flex-1">
+                        <div className="flex items-center gap-2 mb-1">
+                          <h3 className="font-bold text-base text-gray-900">{unit.name}</h3>
+                          <span className={`${unit.badgeColor} text-xs px-2 py-0.5 rounded font-semibold`}>
+                            {unit.badge}
+                          </span>
+                        </div>
+                        <p className="text-base font-bold text-gray-900 mb-1">{unit.price}</p>
+                        <p className="text-xs text-gray-600">{unit.specs}</p>
                       </div>
-                      <p className="text-lg font-bold text-gray-900 mb-1">{unit.price}</p>
-                      <p className="text-xs text-gray-600">{unit.specs}</p>
+                      <svg className="w-5 h-5 text-gray-400 flex-shrink-0 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                      </svg>
                     </div>
-                    <svg className="w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                    </svg>
-                  </div>
-                </button>
-              ))}
+                  </button>
+                ))}
+              </div>
             </div>
-          </div>
 
-          {/* Sumber Lead */}
-          <div>
-            <label className="block text-sm font-semibold text-gray-700 mb-3">
-              Sumber Lead
-            </label>
-            <div className="grid grid-cols-2 gap-3">
-              {sumberLeadOptions.map((option) => (
-                <button
-                  key={option.id}
-                  type="button"
-                  onClick={() => handleSumberToggle(option.id)}
-                  className={`flex items-center justify-center gap-2 px-4 py-3 rounded-xl border-2 transition-all ${
-                    formData.sumberLead.includes(option.id)
-                      ? 'bg-slate-800 border-slate-800 text-white'
-                      : 'bg-white border-gray-200 text-gray-700'
-                  }`}
-                >
-                  <span className="text-lg">{option.icon}</span>
-                  <span className="font-medium text-sm">{option.label}</span>
-                </button>
-              ))}
+            {/* Sumber Lead */}
+            <div>
+              <label className="block text-sm font-semibold text-gray-700 mb-3">
+                Sumber Lead
+              </label>
+              <div className="grid grid-cols-2 gap-3">
+                {sumberLeadOptions.map((option) => (
+                  <button
+                    key={option.id}
+                    type="button"
+                    onClick={() => handleSumberToggle(option.id)}
+                    className={`flex items-center justify-center gap-2 px-4 py-3 rounded-xl border-2 transition-all ${
+                      selectedSources.includes(option.id)
+                        ? 'bg-slate-800 border-slate-800 text-white'
+                        : 'bg-white border-gray-200 text-gray-700'
+                    }`}
+                  >
+                    <span className="text-lg">{option.icon}</span>
+                    <span className="font-medium text-sm">{option.label}</span>
+                  </button>
+                ))}
+              </div>
             </div>
-          </div>
 
-          {/* Catatan Tambahan */}
-          <div>
-            <label className="block text-sm font-semibold text-gray-700 mb-2">
-              Catatan Tambahan
-            </label>
-            <textarea
-              value={formData.catatanTambahan}
-              onChange={(e) => setFormData({...formData, catatanTambahan: e.target.value})}
-              placeholder="Tambahkan preferensi warna, budget, atau jadwal test drive..."
-              rows="4"
-              className="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-800 focus:border-transparent resize-none"
-            />
-          </div>
+            {/* Catatan Tambahan */}
+            <div>
+              <label className="block text-sm font-semibold text-gray-700 mb-2">
+                Catatan Tambahan
+              </label>
+              <textarea
+                value={formData.catatanTambahan}
+                onChange={(e) => setFormData({...formData, catatanTambahan: e.target.value})}
+                placeholder="Tambahkan preferensi warna, budget, atau jadwal test drive..."
+                rows="4"
+                className="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-800 focus:border-transparent resize-none"
+              />
+            </div>
 
-          {/* Submit Button */}
-          <button
-            type="submit"
-            className="w-full bg-slate-800 text-white py-4 rounded-xl font-semibold flex items-center justify-center gap-2 hover:bg-slate-700 transition-colors"
-          >
-            Simpan Lead
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
-            </svg>
-          </button>
-        </form>
+            {/* Submit Button */}
+            <button
+              type="submit"
+              className="w-full bg-slate-800 text-white py-4 rounded-xl font-semibold flex items-center justify-center gap-2 hover:bg-slate-700 transition-colors"
+            >
+              Simpan Lead
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+              </svg>
+            </button>
+          </form>
         </div>
       </div>