Penyesuaian setelah showing dengan Pak cornel

.gitignore

+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

BUILD_APK.md

+# Panduan Build APK Android
+
+## Langkah-langkah Build APK
+
+### 1. Install Dependencies
+```bash
+npm install
+```
+
+### 2. Build Aplikasi React
+```bash
+npm run build
+```
+
+### 3. Sync dengan Capacitor
+```bash
+npx cap sync android
+```
+
+### 4. Buka di Android Studio
+```bash
+npx cap open android
+```
+
+### 5. Build APK di Android Studio
+
+Setelah Android Studio terbuka:
+
+1. Tunggu Gradle sync selesai
+2. Pilih menu **Build > Build Bundle(s) / APK(s) > Build APK(s)**
+3. Tunggu proses build selesai
+4. Klik **locate** pada notifikasi untuk membuka folder APK
+5. APK tersimpan di: `android/app/build/outputs/apk/debug/app-debug.apk`
+
+## Alternatif: Build via Command Line
+
+Jika sudah setup Android SDK di PATH:
+
+```bash
+cd android
+./gradlew assembleDebug
+```
+
+APK akan tersimpan di `android/app/build/outputs/apk/debug/app-debug.apk`
+
+## Build APK Release (Signed)
+
+Untuk production APK yang bisa di-upload ke Play Store:
+
+1. Generate keystore:
+```bash
+keytool -genkey -v -keystore dms-sales.keystore -alias dms-sales -keyalg RSA -keysize 2048 -validity 10000
+```
+
+2. Edit `android/app/build.gradle`, tambahkan:
+```gradle
+android {
+    ...
+    signingConfigs {
+        release {
+            storeFile file('../../dms-sales.keystore')
+            storePassword 'your-password'
+            keyAlias 'dms-sales'
+            keyPassword 'your-password'
+        }
+    }
+    buildTypes {
+        release {
+            signingConfig signingConfigs.release
+            ...
+        }
+    }
+}
+```
+
+3. Build release APK:
+```bash
+cd android
+./gradlew assembleRelease
+```
+
+APK release tersimpan di `android/app/build/outputs/apk/release/app-release.apk`
+
+## Troubleshooting
+
+### Error: ANDROID_HOME not set
+Set environment variable ANDROID_HOME ke lokasi Android SDK:
+```bash
+# Windows
+set ANDROID_HOME=C:\Users\YourName\AppData\Local\Android\Sdk
+
+# Linux/Mac
+export ANDROID_HOME=$HOME/Android/Sdk
+```
+
+### Error: Java version
+Pastikan menggunakan JDK 11 atau lebih baru:
+```bash
+java -version
+```
+
+### Error: Gradle sync failed
+Buka Android Studio dan sync manual, atau jalankan:
+```bash
+cd android
+./gradlew clean
+```
+
+## Testing APK
+
+Install APK ke device/emulator:
+```bash
+adb install android/app/build/outputs/apk/debug/app-debug.apk
+```
+
+Atau transfer file APK ke device dan install manual.

INSTALL_ANDROID_SDK.md

+# Cara Install Android SDK dan Build APK
+
+## Opsi 1: Menggunakan Android Studio (Recommended)
+
+### 1. Download dan Install Android Studio
+- Download dari: https://developer.android.com/studio
+- Install Android Studio
+- Saat pertama kali buka, ikuti wizard setup untuk install Android SDK
+
+### 2. Konfigurasi SDK
+Setelah Android Studio terinstall, SDK biasanya ada di:
+- Windows: `C:\Users\[USERNAME]\AppData\Local\Android\Sdk`
+- Mac: `~/Library/Android/sdk`
+- Linux: `~/Android/Sdk`
+
+### 3. Set Environment Variable (Optional tapi recommended)
+Windows:
+```
+setx ANDROID_HOME "C:\Users\[USERNAME]\AppData\Local\Android\Sdk"
+setx PATH "%PATH%;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools"
+```
+
+### 4. Build APK via Android Studio
+```bash
+# Buka project di Android Studio
+npx cap open android
+
+# Di Android Studio:
+# Build > Build Bundle(s) / APK(s) > Build APK(s)
+```
+
+APK akan tersimpan di: `android/app/build/outputs/apk/debug/app-debug.apk`
+
+### 5. Build APK via Command Line
+Setelah Android Studio terinstall:
+```bash
+cd dms-sales-app/android
+./gradlew assembleDebug
+```
+
+---
+
+## Opsi 2: Install Command Line Tools Only (Tanpa Android Studio)
+
+### 1. Download Command Line Tools
+- Download dari: https://developer.android.com/studio#command-tools
+- Extract ke folder, misalnya: `C:\Android\cmdline-tools`
+
+### 2. Install SDK Components
+```bash
+cd C:\Android\cmdline-tools\bin
+sdkmanager "platform-tools" "platforms;android-33" "build-tools;33.0.0"
+```
+
+### 3. Buat local.properties
+Buat file `dms-sales-app/android/local.properties`:
+```
+sdk.dir=C:\\Android
+```
+
+### 4. Build APK
+```bash
+cd dms-sales-app/android
+./gradlew assembleDebug
+```
+
+---
+
+## Opsi 3: Build Online (Tanpa Install SDK)
+
+Gunakan layanan online seperti:
+- **Expo EAS Build** (untuk React Native/Capacitor)
+- **Appetize.io** (untuk testing)
+- **GitHub Actions** (CI/CD dengan Android SDK pre-installed)
+
+---
+
+## Troubleshooting
+
+### Error: SDK location not found
+Buat file `android/local.properties`:
+```
+sdk.dir=C:\\Users\\[USERNAME]\\AppData\\Local\\Android\\Sdk
+```
+
+### Error: Java version
+Pastikan Java 11 atau lebih baru terinstall:
+```bash
+java -version
+```
+
+Download JDK dari: https://adoptium.net/
+
+### Error: Gradle build failed
+Clean dan rebuild:
+```bash
+cd android
+./gradlew clean
+./gradlew assembleDebug
+```
+
+---
+
+## Quick Start (Jika SDK Sudah Terinstall)
+
+```bash
+# 1. Build React app
+npm run build
+
+# 2. Sync dengan Capacitor
+npx cap sync android
+
+# 3. Build APK
+cd android
+./gradlew assembleDebug
+
+# APK location:
+# android/app/build/outputs/apk/debug/app-debug.apk
+```
+
+---
+
+## Install APK ke Device
+
+### Via USB:
+```bash
+adb install android/app/build/outputs/apk/debug/app-debug.apk
+```
+
+### Via File Transfer:
+1. Copy file `app-debug.apk` ke device
+2. Buka file di device
+3. Allow "Install from Unknown Sources" jika diminta
+4. Install aplikasi

QUICK_BUILD_GUIDE.md

+# Panduan Cepat Build APK - DMS Sales App
+
+## Status Saat Ini ✅
+
+Aplikasi sudah siap dan berhasil di-build! Yang perlu dilakukan:
+
+1. ✅ React app sudah dibuat
+2. ✅ Tailwind CSS sudah dikonfigurasi
+3. ✅ Capacitor sudah disetup
+4. ✅ Build production sudah berhasil (`npm run build`)
+5. ✅ Sync dengan Android sudah berhasil (`npx cap sync android`)
+6. ⏳ Tinggal build APK (butuh Android SDK)
+
+## Cara Tercepat Build APK
+
+### Metode 1: Menggunakan Android Studio (Paling Mudah)
+
+1. **Install Android Studio**
+   - Download: https://developer.android.com/studio
+   - Install dengan default settings (akan otomatis install Android SDK)
+
+2. **Buka Project**
+   ```bash
+   npx cap open android
+   ```
+
+3. **Build APK di Android Studio**
+   - Tunggu Gradle sync selesai
+   - Klik menu: **Build > Build Bundle(s) / APK(s) > Build APK(s)**
+   - Tunggu proses build (5-10 menit pertama kali)
+   - Klik **locate** untuk buka folder APK
+
+4. **Lokasi APK**
+   ```
+   dms-sales-app/android/app/build/outputs/apk/debug/app-debug.apk
+   ```
+
+### Metode 2: Command Line (Setelah Android Studio Terinstall)
+
+```bash
+# Dari folder dms-sales-app
+cd android
+./gradlew assembleDebug
+```
+
+APK akan ada di: `android/app/build/outputs/apk/debug/app-debug.apk`
+
+## Install APK ke HP Android
+
+### Cara 1: Via USB
+```bash
+adb install android/app/build/outputs/apk/debug/app-debug.apk
+```
+
+### Cara 2: Transfer File
+1. Copy file `app-debug.apk` ke HP (via USB, email, atau cloud)
+2. Buka file di HP
+3. Izinkan "Install from Unknown Sources" jika diminta
+4. Tap Install
+
+## Ukuran APK yang Diharapkan
+
+- Debug APK: ~7-10 MB
+- Release APK (signed): ~5-7 MB
+
+## Testing Aplikasi Tanpa Build APK
+
+Jika ingin test dulu sebelum build APK:
+
+```bash
+# Test di browser
+npm start
+```
+
+Buka http://localhost:3000 di browser
+
+## Catatan Penting
+
+- APK debug hanya untuk testing, tidak bisa di-upload ke Play Store
+- Untuk production, perlu build release APK dengan signing key
+- Aplikasi ini pure prototyping, tidak ada koneksi API/backend
+
+## Butuh Bantuan?
+
+Jika ada error saat build, cek file `INSTALL_ANDROID_SDK.md` untuk troubleshooting lengkap.

README.md

+# DMS Sales App
+
+Aplikasi prototyping untuk Dealer Management System (DMS) Sales berbasis React JS dengan Tailwind CSS.
+
+## Fitur Aplikasi
+
+1. **Beranda** - Dashboard dengan detail mobil dan simulasi kredit
+2. **Prospek** - Daftar dan input data prospek pelanggan
+3. **Penawaran** - Detail penawaran harga dan finalisasi
+4. **Transaksi** - Riwayat transaksi penjualan
+
+## Cara Menjalankan Aplikasi
+
+### Development Mode
+
+```bash
+npm start
+```
+
+Aplikasi akan berjalan di `http://localhost:3000`
+
+### Build untuk Production
+
+```bash
+npm run build
+```
+
+### Build APK Android
+
+1. Build aplikasi React terlebih dahulu:
+```bash
+npm run build
+```
+
+2. Sync dengan Capacitor:
+```bash
+npx cap sync android
+```
+
+3. Buka project Android di Android Studio:
+```bash
+npx cap open android
+```
+
+4. Di Android Studio:
+   - Pastikan Android SDK sudah terinstall
+   - Pilih menu **Build > Build Bundle(s) / APK(s) > Build APK(s)**
+   - APK akan tersimpan di `android/app/build/outputs/apk/debug/app-debug.apk`
+
+## Persyaratan untuk Build APK
+
+- Node.js (v14 atau lebih baru)
+- Android Studio
+- Java Development Kit (JDK) 11 atau lebih baru
+- Android SDK
+
+## Teknologi yang Digunakan
+
+- React JS
+- React Router DOM
+- Tailwind CSS
+- Capacitor (untuk build APK)
+
+## Catatan
+
+Aplikasi ini adalah prototyping tanpa integrasi API. Semua data bersifat statis untuk keperluan demonstrasi.

android/.gitignore

+# Using Android gitignore template: https://github.com/github/gitignore/blob/HEAD/Android.gitignore
+
+# Built application files
+*.apk
+*.aar
+*.ap_
+*.aab
+
+# Files for the ART/Dalvik VM
+*.dex
+
+# Java class files
+*.class
+
+# Generated files
+bin/
+gen/
+out/
+#  Uncomment the following line in case you need and you don't have the release build type files in your app
+# release/
+
+# Gradle files
+.gradle/
+build/
+
+# Local configuration file (sdk path, etc)
+local.properties
+
+# Proguard folder generated by Eclipse
+proguard/
+
+# Log Files
+*.log
+
+# Android Studio Navigation editor temp files
+.navigation/
+
+# Android Studio captures folder
+captures/
+
+# IntelliJ
+*.iml
+.idea/workspace.xml
+.idea/tasks.xml
+.idea/gradle.xml
+.idea/assetWizardSettings.xml
+.idea/dictionaries
+.idea/libraries
+# Android Studio 3 in .gitignore file.
+.idea/caches
+.idea/modules.xml
+# Comment next line if keeping position of elements in Navigation Editor is relevant for you
+.idea/navEditor.xml
+
+# Keystore files
+# Uncomment the following lines if you do not want to check your keystore files in.
+#*.jks
+#*.keystore
+
+# External native build folder generated in Android Studio 2.2 and later
+.externalNativeBuild
+.cxx/
+
+# Google Services (e.g. APIs or Firebase)
+# google-services.json
+
+# Freeline
+freeline.py
+freeline/
+freeline_project_description.json
+
+# fastlane
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots
+fastlane/test_output
+fastlane/readme.md
+
+# Version control
+vcs.xml
+
+# lint
+lint/intermediates/
+lint/generated/
+lint/outputs/
+lint/tmp/
+# lint/reports/
+
+# Android Profiling
+*.hprof
+
+# Cordova plugins for Capacitor
+capacitor-cordova-android-plugins
+
+# Copied web assets
+app/src/main/assets/public
+
+# Generated Config files
+app/src/main/assets/capacitor.config.json
+app/src/main/assets/capacitor.plugins.json
+app/src/main/res/xml/config.xml

android/app/.gitignore

+/build/*
+!/build/.npmkeep

android/app/build.gradle

+apply plugin: 'com.android.application'
+
+android {
+    namespace "com.dms.sales"
+    compileSdk rootProject.ext.compileSdkVersion
+    defaultConfig {
+        applicationId "com.dms.sales"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+        aaptOptions {
+             // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
+             // Default: https://android.googlesource.com/platform/frameworks/base/+/282e181b58cf72b6ca770dc7ca5f91f135444502/tools/aapt/AaptAssets.cpp#61
+            ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
+        }
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+repositories {
+    flatDir{
+        dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
+    }
+}
+
+dependencies {
+    implementation fileTree(include: ['*.jar'], dir: 'libs')
+    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
+    implementation "androidx.coordinatorlayout:coordinatorlayout:$androidxCoordinatorLayoutVersion"
+    implementation "androidx.core:core-splashscreen:$coreSplashScreenVersion"
+    implementation project(':capacitor-android')
+    testImplementation "junit:junit:$junitVersion"
+    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
+    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
+    implementation project(':capacitor-cordova-android-plugins')
+}
+
+apply from: 'capacitor.build.gradle'
+
+try {
+    def servicesJSON = file('google-services.json')
+    if (servicesJSON.text) {
+        apply plugin: 'com.google.gms.google-services'
+    }
+} catch(Exception e) {
+    logger.info("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
+}

android/app/capacitor.build.gradle

+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+
+android {
+  compileOptions {
+      sourceCompatibility JavaVersion.VERSION_17
+      targetCompatibility JavaVersion.VERSION_17
+  }
+}
+
+apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
+dependencies {
+
+
+}
+
+
+if (hasProperty('postBuildExtras')) {
+  postBuildExtras()
+}

android/app/proguard-rules.pro

+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile

android/app/src/androidTest/java/com/getcapacitor/myapp/ExampleInstrumentedTest.java

+package com.getcapacitor.myapp;
+
+import static org.junit.Assert.*;
+
+import android.content.Context;
+import androidx.test.ext.junit.runners.AndroidJUnit4;
+import androidx.test.platform.app.InstrumentationRegistry;
+import org.junit.Test;
+import org.junit.runner.RunWith;
+
+/**
+ * Instrumented test, which will execute on an Android device.
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+@RunWith(AndroidJUnit4.class)
+public class ExampleInstrumentedTest {
+
+    @Test
+    public void useAppContext() throws Exception {
+        // Context of the app under test.
+        Context appContext = InstrumentationRegistry.getInstrumentation().getTargetContext();
+
+        assertEquals("com.getcapacitor.app", appContext.getPackageName());
+    }
+}

android/app/src/main/AndroidManifest.xml

+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <application
+        android:allowBackup="true"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:supportsRtl="true"
+        android:theme="@style/AppTheme">
+
+        <activity
+            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
+            android:name=".MainActivity"
+            android:label="@string/title_activity_main"
+            android:theme="@style/AppTheme.NoActionBarLaunch"
+            android:launchMode="singleTask"
+            android:exported="true">
+
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+
+        </activity>
+
+        <provider
+            android:name="androidx.core.content.FileProvider"
+            android:authorities="${applicationId}.fileprovider"
+            android:exported="false"
+            android:grantUriPermissions="true">
+            <meta-data
+                android:name="android.support.FILE_PROVIDER_PATHS"
+                android:resource="@xml/file_paths"></meta-data>
+        </provider>
+    </application>
+
+    <!-- Permissions -->
+
+    <uses-permission android:name="android.permission.INTERNET" />
+</manifest>

android/app/src/main/java/com/dms/sales/MainActivity.java

+package com.dms.sales;
+
+import com.getcapacitor.BridgeActivity;
+
+public class MainActivity extends BridgeActivity {}

android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml

+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108">
+    <path
+        android:fillType="evenOdd"
+        android:pathData="M32,64C32,64 38.39,52.99 44.13,50.95C51.37,48.37 70.14,49.57 70.14,49.57L108.26,87.69L108,109.01L75.97,107.97L32,64Z"
+        android:strokeColor="#00000000"
+        android:strokeWidth="1">
+        <aapt:attr name="android:fillColor">
+            <gradient
+                android:endX="78.5885"
+                android:endY="90.9159"
+                android:startX="48.7653"
+                android:startY="61.0927"
+                android:type="linear">
+                <item
+                    android:color="#44000000"
+                    android:offset="0.0" />
+                <item
+                    android:color="#00000000"
+                    android:offset="1.0" />
+            </gradient>
+        </aapt:attr>
+    </path>
+    <path
+        android:fillColor="#FFFFFF"
+        android:fillType="nonZero"
+        android:pathData="M66.94,46.02L66.94,46.02C72.44,50.07 76,56.61 76,64L32,64C32,56.61 35.56,50.11 40.98,46.06L36.18,41.19C35.45,40.45 35.45,39.3 36.18,38.56C36.91,37.81 38.05,37.81 38.78,38.56L44.25,44.05C47.18,42.57 50.48,41.71 54,41.71C57.48,41.71 60.78,42.57 63.68,44.05L69.11,38.56C69.84,37.81 70.98,37.81 71.71,38.56C72.44,39.3 72.44,40.45 71.71,41.19L66.94,46.02ZM62.94,56.92C64.08,56.92 65,56.01 65,54.88C65,53.76 64.08,52.85 62.94,52.85C61.8,52.85 60.88,53.76 60.88,54.88C60.88,56.01 61.8,56.92 62.94,56.92ZM45.06,56.92C46.2,56.92 47.13,56.01 47.13,54.88C47.13,53.76 46.2,52.85 45.06,52.85C43.92,52.85 43,53.76 43,54.88C43,56.01 43.92,56.92 45.06,56.92Z"
+        android:strokeColor="#00000000"
+        android:strokeWidth="1" />
+</vector>

android/app/src/main/res/drawable/ic_launcher_background.xml

+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108">
+    <path
+        android:fillColor="#26A69A"
+        android:pathData="M0,0h108v108h-108z" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M9,0L9,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,0L19,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,0L29,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,0L39,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,0L49,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,0L59,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,0L69,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,0L79,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M89,0L89,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M99,0L99,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,9L108,9"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,19L108,19"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,29L108,29"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,39L108,39"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,49L108,49"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,59L108,59"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,69L108,69"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,79L108,79"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,89L108,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,99L108,99"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,29L89,29"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,39L89,39"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,49L89,49"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,59L89,59"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,69L89,69"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,79L89,79"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,19L29,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,19L39,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,19L49,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,19L59,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,19L69,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,19L79,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+</vector>

android/app/src/main/res/layout/activity_main.xml

+<?xml version="1.0" encoding="utf-8"?>
+<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context=".MainActivity">
+
+    <WebView
+        android:layout_width="match_parent"
+        android:layout_height="match_parent" />
+</androidx.coordinatorlayout.widget.CoordinatorLayout>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>
\ No newline at end of file

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>
\ No newline at end of file

android/app/src/main/res/values/ic_launcher_background.xml

+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#FFFFFF</color>
+</resources>
\ No newline at end of file

android/app/src/main/res/values/strings.xml

+<?xml version='1.0' encoding='utf-8'?>
+<resources>
+    <string name="app_name">DMS Sales</string>
+    <string name="title_activity_main">DMS Sales</string>
+    <string name="package_name">com.dms.sales</string>
+    <string name="custom_url_scheme">com.dms.sales</string>
+</resources>

android/app/src/main/res/values/styles.xml

+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
+        <!-- Customize your theme here. -->
+        <item name="colorPrimary">@color/colorPrimary</item>
+        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
+        <item name="colorAccent">@color/colorAccent</item>
+    </style>
+
+    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">
+        <item name="windowActionBar">false</item>
+        <item name="windowNoTitle">true</item>
+        <item name="android:background">@null</item>
+    </style>
+
+
+    <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
+        <item name="android:background">@drawable/splash</item>
+    </style>
+</resources>
\ No newline at end of file

android/app/src/main/res/xml/file_paths.xml

+<?xml version="1.0" encoding="utf-8"?>
+<paths xmlns:android="http://schemas.android.com/apk/res/android">
+    <external-path name="my_images" path="." />
+    <cache-path name="my_cache_images" path="." />
+</paths>
\ No newline at end of file

android/app/src/test/java/com/getcapacitor/myapp/ExampleUnitTest.java

+package com.getcapacitor.myapp;
+
+import static org.junit.Assert.*;
+
+import org.junit.Test;
+
+/**
+ * Example local unit test, which will execute on the development machine (host).
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+public class ExampleUnitTest {
+
+    @Test
+    public void addition_isCorrect() throws Exception {
+        assertEquals(4, 2 + 2);
+    }
+}

android/build.gradle

+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+    
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:8.2.1'
+        classpath 'com.google.gms:google-services:4.4.0'
+
+        // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files
+    }
+}
+
+apply from: "variables.gradle"
+
+allprojects {
+    repositories {
+        google()
+        mavenCentral()
+    }
+}
+
+task clean(type: Delete) {
+    delete rootProject.buildDir
+}

android/capacitor.settings.gradle

+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+include ':capacitor-android'
+project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')

android/gradle.properties

+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+org.gradle.jvmargs=-Xmx1536m
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true

android/gradle/wrapper/gradle-wrapper.properties

+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.2.1-all.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

android/gradlew

+#!/bin/sh
+
+#
+# Copyright © 2015-2021 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/HEAD/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC3045
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC3045
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command;
+#   * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of
+#     shell script including quotes and variable substitutions, so put them in
+#     double quotes to make sure that they get re-expanded; and
+#   * put everything else in single quotes, so that it's not re-expanded.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        org.gradle.wrapper.GradleWrapperMain \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"

android/gradlew.bat

+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

android/settings.gradle

+include ':app'
+include ':capacitor-cordova-android-plugins'
+project(':capacitor-cordova-android-plugins').projectDir = new File('./capacitor-cordova-android-plugins/')
+
+apply from: 'capacitor.settings.gradle'
\ No newline at end of file

android/variables.gradle

+ext {
+    minSdkVersion = 22
+    compileSdkVersion = 34
+    targetSdkVersion = 34
+    androidxActivityVersion = '1.8.0'
+    androidxAppCompatVersion = '1.6.1'
+    androidxCoordinatorLayoutVersion = '1.2.0'
+    androidxCoreVersion = '1.12.0'
+    androidxFragmentVersion = '1.6.2'
+    coreSplashScreenVersion = '1.0.1'
+    androidxWebkitVersion = '1.9.0'
+    junitVersion = '4.13.2'
+    androidxJunitVersion = '1.1.5'
+    androidxEspressoCoreVersion = '3.5.1'
+    cordovaAndroidVersion = '10.1.1'
+}
\ No newline at end of file

capacitor.config.ts

+import type { CapacitorConfig } from '@capacitor/cli';
+
+const config: CapacitorConfig = {
+  appId: 'com.dms.sales',
+  appName: 'DMS Sales',
+  webDir: 'build'
+};
+
+export default config;

ios/.gitignore

+App/build
+App/Pods
+App/output
+App/App/public
+DerivedData
+xcuserdata
+
+# Cordova plugins for Capacitor
+capacitor-cordova-ios-plugins
+
+# Generated Config files
+App/App/capacitor.config.json
+App/App/config.xml

ios/App/App.xcodeproj/project.pbxproj

+// !$*UTF8*$!
+{
+	archiveVersion = 1;
+	classes = {
+	};
+	objectVersion = 48;
+	objects = {
+
+/* Begin PBXBuildFile section */
+		2FAD9763203C412B000D30F8 /* config.xml in Resources */ = {isa = PBXBuildFile; fileRef = 2FAD9762203C412B000D30F8 /* config.xml */; };
+		50379B232058CBB4000EE86E /* capacitor.config.json in Resources */ = {isa = PBXBuildFile; fileRef = 50379B222058CBB4000EE86E /* capacitor.config.json */; };
+		504EC3081FED79650016851F /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 504EC3071FED79650016851F /* AppDelegate.swift */; };
+		504EC30D1FED79650016851F /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 504EC30B1FED79650016851F /* Main.storyboard */; };
+		504EC30F1FED79650016851F /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 504EC30E1FED79650016851F /* Assets.xcassets */; };
+		504EC3121FED79650016851F /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 504EC3101FED79650016851F /* LaunchScreen.storyboard */; };
+		50B271D11FEDC1A000F3C39B /* public in Resources */ = {isa = PBXBuildFile; fileRef = 50B271D01FEDC1A000F3C39B /* public */; };
+		A084ECDBA7D38E1E42DFC39D /* Pods_App.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = AF277DCFFFF123FFC6DF26C7 /* Pods_App.framework */; };
+/* End PBXBuildFile section */
+
+/* Begin PBXFileReference section */
+		2FAD9762203C412B000D30F8 /* config.xml */ = {isa = PBXFileReference; lastKnownFileType = text.xml; path = config.xml; sourceTree = "<group>"; };
+		50379B222058CBB4000EE86E /* capacitor.config.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; path = capacitor.config.json; sourceTree = "<group>"; };
+		504EC3041FED79650016851F /* App.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = App.app; sourceTree = BUILT_PRODUCTS_DIR; };
+		504EC3071FED79650016851F /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
+		504EC30C1FED79650016851F /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Main.storyboard; sourceTree = "<group>"; };
+		504EC30E1FED79650016851F /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
+		504EC3111FED79650016851F /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
+		504EC3131FED79650016851F /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
+		50B271D01FEDC1A000F3C39B /* public */ = {isa = PBXFileReference; lastKnownFileType = folder; path = public; sourceTree = "<group>"; };
+		AF277DCFFFF123FFC6DF26C7 /* Pods_App.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_App.framework; sourceTree = BUILT_PRODUCTS_DIR; };
+		AF51FD2D460BCFE21FA515B2 /* Pods-App.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-App.release.xcconfig"; path = "Pods/Target Support Files/Pods-App/Pods-App.release.xcconfig"; sourceTree = "<group>"; };
+		FC68EB0AF532CFC21C3344DD /* Pods-App.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-App.debug.xcconfig"; path = "Pods/Target Support Files/Pods-App/Pods-App.debug.xcconfig"; sourceTree = "<group>"; };
+/* End PBXFileReference section */
+
+/* Begin PBXFrameworksBuildPhase section */
+		504EC3011FED79650016851F /* Frameworks */ = {
+			isa = PBXFrameworksBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				A084ECDBA7D38E1E42DFC39D /* Pods_App.framework in Frameworks */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXFrameworksBuildPhase section */
+
+/* Begin PBXGroup section */
+		27E2DDA53C4D2A4D1A88CE4A /* Frameworks */ = {
+			isa = PBXGroup;
+			children = (
+				AF277DCFFFF123FFC6DF26C7 /* Pods_App.framework */,
+			);
+			name = Frameworks;
+			sourceTree = "<group>";
+		};
+		504EC2FB1FED79650016851F = {
+			isa = PBXGroup;
+			children = (
+				504EC3061FED79650016851F /* App */,
+				504EC3051FED79650016851F /* Products */,
+				7F8756D8B27F46E3366F6CEA /* Pods */,
+				27E2DDA53C4D2A4D1A88CE4A /* Frameworks */,
+			);
+			sourceTree = "<group>";
+		};
+		504EC3051FED79650016851F /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				504EC3041FED79650016851F /* App.app */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		504EC3061FED79650016851F /* App */ = {
+			isa = PBXGroup;
+			children = (
+				50379B222058CBB4000EE86E /* capacitor.config.json */,
+				504EC3071FED79650016851F /* AppDelegate.swift */,
+				504EC30B1FED79650016851F /* Main.storyboard */,
+				504EC30E1FED79650016851F /* Assets.xcassets */,
+				504EC3101FED79650016851F /* LaunchScreen.storyboard */,
+				504EC3131FED79650016851F /* Info.plist */,
+				2FAD9762203C412B000D30F8 /* config.xml */,
+				50B271D01FEDC1A000F3C39B /* public */,
+			);
+			path = App;
+			sourceTree = "<group>";
+		};
+		7F8756D8B27F46E3366F6CEA /* Pods */ = {
+			isa = PBXGroup;
+			children = (
+				FC68EB0AF532CFC21C3344DD /* Pods-App.debug.xcconfig */,
+				AF51FD2D460BCFE21FA515B2 /* Pods-App.release.xcconfig */,
+			);
+			name = Pods;
+			sourceTree = "<group>";
+		};
+/* End PBXGroup section */
+
+/* Begin PBXNativeTarget section */
+		504EC3031FED79650016851F /* App */ = {
+			isa = PBXNativeTarget;
+			buildConfigurationList = 504EC3161FED79650016851F /* Build configuration list for PBXNativeTarget "App" */;
+			buildPhases = (
+				6634F4EFEBD30273BCE97C65 /* [CP] Check Pods Manifest.lock */,
+				504EC3001FED79650016851F /* Sources */,
+				504EC3011FED79650016851F /* Frameworks */,
+				504EC3021FED79650016851F /* Resources */,
+				9592DBEFFC6D2A0C8D5DEB22 /* [CP] Embed Pods Frameworks */,
+			);
+			buildRules = (
+			);
+			dependencies = (
+			);
+			name = App;
+			productName = App;
+			productReference = 504EC3041FED79650016851F /* App.app */;
+			productType = "com.apple.product-type.application";
+		};
+/* End PBXNativeTarget section */
+
+/* Begin PBXProject section */
+		504EC2FC1FED79650016851F /* Project object */ = {
+			isa = PBXProject;
+			attributes = {
+				LastSwiftUpdateCheck = 0920;
+				LastUpgradeCheck = 0920;
+				TargetAttributes = {
+					504EC3031FED79650016851F = {
+						CreatedOnToolsVersion = 9.2;
+						LastSwiftMigration = 1100;
+						ProvisioningStyle = Automatic;
+					};
+				};
+			};
+			buildConfigurationList = 504EC2FF1FED79650016851F /* Build configuration list for PBXProject "App" */;
+			compatibilityVersion = "Xcode 8.0";
+			developmentRegion = en;
+			hasScannedForEncodings = 0;
+			knownRegions = (
+				en,
+				Base,
+			);
+			mainGroup = 504EC2FB1FED79650016851F;
+			packageReferences = (
+			);
+			productRefGroup = 504EC3051FED79650016851F /* Products */;
+			projectDirPath = "";
+			projectRoot = "";
+			targets = (
+				504EC3031FED79650016851F /* App */,
+			);
+		};
+/* End PBXProject section */
+
+/* Begin PBXResourcesBuildPhase section */
+		504EC3021FED79650016851F /* Resources */ = {
+			isa = PBXResourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				504EC3121FED79650016851F /* LaunchScreen.storyboard in Resources */,
+				50B271D11FEDC1A000F3C39B /* public in Resources */,
+				504EC30F1FED79650016851F /* Assets.xcassets in Resources */,
+				50379B232058CBB4000EE86E /* capacitor.config.json in Resources */,
+				504EC30D1FED79650016851F /* Main.storyboard in Resources */,
+				2FAD9763203C412B000D30F8 /* config.xml in Resources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXResourcesBuildPhase section */
+
+/* Begin PBXShellScriptBuildPhase section */
+		6634F4EFEBD30273BCE97C65 /* [CP] Check Pods Manifest.lock */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
+				"${PODS_ROOT}/Manifest.lock",
+			);
+			name = "[CP] Check Pods Manifest.lock";
+			outputPaths = (
+				"$(DERIVED_FILE_DIR)/Pods-App-checkManifestLockResult.txt",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
+			showEnvVarsInLog = 0;
+		};
+		9592DBEFFC6D2A0C8D5DEB22 /* [CP] Embed Pods Frameworks */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+			);
+			name = "[CP] Embed Pods Frameworks";
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-App/Pods-App-frameworks.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
+/* End PBXShellScriptBuildPhase section */
+
+/* Begin PBXSourcesBuildPhase section */
+		504EC3001FED79650016851F /* Sources */ = {
+			isa = PBXSourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				504EC3081FED79650016851F /* AppDelegate.swift in Sources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXSourcesBuildPhase section */
+
+/* Begin PBXVariantGroup section */
+		504EC30B1FED79650016851F /* Main.storyboard */ = {
+			isa = PBXVariantGroup;
+			children = (
+				504EC30C1FED79650016851F /* Base */,
+			);
+			name = Main.storyboard;
+			sourceTree = "<group>";
+		};
+		504EC3101FED79650016851F /* LaunchScreen.storyboard */ = {
+			isa = PBXVariantGroup;
+			children = (
+				504EC3111FED79650016851F /* Base */,
+			);
+			name = LaunchScreen.storyboard;
+			sourceTree = "<group>";
+		};
+/* End PBXVariantGroup section */
+
+/* Begin XCBuildConfiguration section */
+		504EC3141FED79650016851F /* Debug */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_NONNULL = YES;
+				CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++14";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_COMMA = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+				CLANG_WARN_STRICT_PROTOTYPES = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				CODE_SIGN_IDENTITY = "iPhone Developer";
+				COPY_PHASE_STRIP = NO;
+				DEBUG_INFORMATION_FORMAT = dwarf;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				ENABLE_TESTABILITY = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu11;
+				GCC_DYNAMIC_NO_PIC = NO;
+				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_OPTIMIZATION_LEVEL = 0;
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"DEBUG=1",
+					"$(inherited)",
+				);
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
+				MTL_ENABLE_DEBUG_INFO = YES;
+				ONLY_ACTIVE_ARCH = YES;
+				SDKROOT = iphoneos;
+				SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
+				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
+			};
+			name = Debug;
+		};
+		504EC3151FED79650016851F /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_NONNULL = YES;
+				CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++14";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_COMMA = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+				CLANG_WARN_STRICT_PROTOTYPES = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				CODE_SIGN_IDENTITY = "iPhone Developer";
+				COPY_PHASE_STRIP = NO;
+				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
+				ENABLE_NS_ASSERTIONS = NO;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu11;
+				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
+				MTL_ENABLE_DEBUG_INFO = NO;
+				SDKROOT = iphoneos;
+				SWIFT_OPTIMIZATION_LEVEL = "-Owholemodule";
+				VALIDATE_PRODUCT = YES;
+			};
+			name = Release;
+		};
+		504EC3171FED79650016851F /* Debug */ = {
+			isa = XCBuildConfiguration;
+			baseConfigurationReference = FC68EB0AF532CFC21C3344DD /* Pods-App.debug.xcconfig */;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CODE_SIGN_STYLE = Automatic;
+				CURRENT_PROJECT_VERSION = 1;
+				INFOPLIST_FILE = App/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
+				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
+				MARKETING_VERSION = 1.0;
+				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
+				PRODUCT_BUNDLE_IDENTIFIER = com.dms.sales;
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
+				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
+			};
+			name = Debug;
+		};
+		504EC3181FED79650016851F /* Release */ = {
+			isa = XCBuildConfiguration;
+			baseConfigurationReference = AF51FD2D460BCFE21FA515B2 /* Pods-App.release.xcconfig */;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CODE_SIGN_STYLE = Automatic;
+				CURRENT_PROJECT_VERSION = 1;
+				INFOPLIST_FILE = App/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
+				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
+				MARKETING_VERSION = 1.0;
+				PRODUCT_BUNDLE_IDENTIFIER = com.dms.sales;
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
+				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
+			};
+			name = Release;
+		};
+/* End XCBuildConfiguration section */
+
+/* Begin XCConfigurationList section */
+		504EC2FF1FED79650016851F /* Build configuration list for PBXProject "App" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				504EC3141FED79650016851F /* Debug */,
+				504EC3151FED79650016851F /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+		504EC3161FED79650016851F /* Build configuration list for PBXNativeTarget "App" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				504EC3171FED79650016851F /* Debug */,
+				504EC3181FED79650016851F /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+/* End XCConfigurationList section */
+	};
+	rootObject = 504EC2FC1FED79650016851F /* Project object */;
+}

ios/App/App.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>

ios/App/App/AppDelegate.swift

+import UIKit
+import Capacitor
+
+@UIApplicationMain
+class AppDelegate: UIResponder, UIApplicationDelegate {
+
+    var window: UIWindow?
+
+    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+        // Override point for customization after application launch.
+        return true
+    }
+
+    func applicationWillResignActive(_ application: UIApplication) {
+        // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
+        // Use this method to pause ongoing tasks, disable timers, and invalidate graphics rendering callbacks. Games should use this method to pause the game.
+    }
+
+    func applicationDidEnterBackground(_ application: UIApplication) {
+        // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
+        // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
+    }
+
+    func applicationWillEnterForeground(_ application: UIApplication) {
+        // Called as part of the transition from the background to the active state; here you can undo many of the changes made on entering the background.
+    }
+
+    func applicationDidBecomeActive(_ application: UIApplication) {
+        // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
+    }
+
+    func applicationWillTerminate(_ application: UIApplication) {
+        // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.
+    }
+
+    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
+        // Called when the app was launched with a url. Feel free to add additional processing here,
+        // but if you want the App API to support tracking app url opens, make sure to keep this call
+        return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
+    }
+
+    func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
+        // Called when the app was launched with an activity, including Universal Links.
+        // Feel free to add additional processing here, but if you want the App API to support
+        // tracking app url opens, make sure to keep this call
+        return ApplicationDelegateProxy.shared.application(application, continue: userActivity, restorationHandler: restorationHandler)
+    }
+
+}

ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json

+{
+  "images" : [
+    {
+      "filename" : "AppIcon-512@2x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "size" : "1024x1024"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ios/App/App/Assets.xcassets/Contents.json

+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file

ios/App/App/Assets.xcassets/Splash.imageset/Contents.json

+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "splash-2732x2732-2.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "splash-2732x2732-1.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "splash-2732x2732.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file

ios/App/App/Base.lproj/LaunchScreen.storyboard

+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17132" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina4_7" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17105"/>
+        <capability name="System colors in document resources" minToolsVersion="11.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <!--View Controller-->
+        <scene sceneID="EHf-IW-A2E">
+            <objects>
+                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
+                    <imageView key="view" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="Splash" id="snD-IY-ifK">
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
+                        <autoresizingMask key="autoresizingMask"/>
+                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
+                    </imageView>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="53" y="375"/>
+        </scene>
+    </scenes>
+    <resources>
+        <image name="Splash" width="1366" height="1366"/>
+        <systemColor name="systemBackgroundColor">
+            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+        </systemColor>
+    </resources>
+</document>

ios/App/App/Base.lproj/Main.storyboard

+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14111" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
+    <device id="retina4_7" orientation="portrait">
+        <adaptation id="fullscreen"/>
+    </device>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
+    </dependencies>
+    <scenes>
+        <!--Bridge View Controller-->
+        <scene sceneID="tne-QT-ifu">
+            <objects>
+                <viewController id="BYZ-38-t0r" customClass="CAPBridgeViewController" customModule="Capacitor" sceneMemberID="viewController"/>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
+            </objects>
+        </scene>
+    </scenes>
+</document>

ios/App/App/Info.plist

+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleDisplayName</key>
+        <string>DMS Sales</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>$(MARKETING_VERSION)</string>
+	<key>CFBundleVersion</key>
+	<string>$(CURRENT_PROJECT_VERSION)</string>
+	<key>LSRequiresIPhoneOS</key>
+	<true/>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
+	<key>UIMainStoryboardFile</key>
+	<string>Main</string>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>armv7</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UISupportedInterfaceOrientations~ipad</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationPortraitUpsideDown</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UIViewControllerBasedStatusBarAppearance</key>
+	<true/>
+</dict>
+</plist>

ios/App/Podfile

+require_relative '../../node_modules/@capacitor/ios/scripts/pods_helpers'
+
+platform :ios, '13.0'
+use_frameworks!
+
+# workaround to avoid Xcode caching of Pods that requires
+# Product -> Clean Build Folder after new Cordova plugins installed
+# Requires CocoaPods 1.6 or newer
+install! 'cocoapods', :disable_input_output_paths => true
+
+def capacitor_pods
+  pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
+  pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
+
+end
+
+target 'App' do
+  capacitor_pods
+  # Add your Pods here
+end
+
+post_install do |installer|
+  assertDeploymentTarget(installer)
+end

package.json

+{
+  "name": "dms-sales-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@capacitor/android": "^6.1.2",
+    "@capacitor/cli": "^6.1.2",
+    "@capacitor/core": "^6.1.2",
+    "@capacitor/ios": "^6.2.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.14.0",
+    "react-scripts": "^5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1"
+  }
+}

postcss.config.js

+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

public/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

public/manifest.json

+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt

+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/App.js

+import React, { useState, useEffect } from 'react';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import Login from './pages/Login';
+import Beranda from './pages/Beranda';
+import Prospek from './pages/Prospek';
+import InputProspek from './pages/InputProspek';
+import Penawaran from './pages/Penawaran';
+import Activities from './pages/Activities';
+import Transaksi from './pages/Transaksi';
+import DetailAktivitas from './pages/DetailAktivitas';
+import DetailSPK from './pages/DetailSPK';
+import FollowUp from './pages/FollowUp';
+import AskDora from './pages/AskDora';
+import KonfirmasiDeal from './pages/KonfirmasiDeal';
+import BuatPenawaran from './pages/BuatPenawaran';
+import Tracking from './pages/Tracking';
+import DetailMonitoring from './pages/DetailMonitoring';
+import Profil from './pages/Profil';
+
+function App() {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  const ProtectedRoute = ({ children }) => {
+    return isLoggedIn ? children : <Navigate to="/login" />;
+  };
+
+  return (
+    <Router>
+      <div className="min-h-screen bg-gray-50">
+        <Routes>
+          <Route path="/login" element={isLoggedIn ? <Navigate to="/" /> : <Login />} />
+          <Route path="/" element={<ProtectedRoute><Beranda /></ProtectedRoute>} />
+          <Route path="/prospek" element={<ProtectedRoute><Prospek /></ProtectedRoute>} />
+          <Route path="/prospek/input" element={<ProtectedRoute><InputProspek /></ProtectedRoute>} />
+          <Route path="/penawaran" element={<ProtectedRoute><Penawaran /></ProtectedRoute>} />
+          <Route path="/activities" element={<ProtectedRoute><Activities /></ProtectedRoute>} />
+          <Route path="/transaksi" element={<ProtectedRoute><Transaksi /></ProtectedRoute>} />
+          <Route path="/detail-aktivitas" element={<ProtectedRoute><DetailAktivitas /></ProtectedRoute>} />
+          <Route path="/detail-spk" element={<ProtectedRoute><DetailSPK /></ProtectedRoute>} />
+          <Route path="/follow-up" element={<ProtectedRoute><FollowUp /></ProtectedRoute>} />
+          <Route path="/ask-dora" element={<ProtectedRoute><AskDora /></ProtectedRoute>} />
+          <Route path="/konfirmasi-deal" element={<ProtectedRoute><KonfirmasiDeal /></ProtectedRoute>} />
+          <Route path="/buat-penawaran" element={<ProtectedRoute><BuatPenawaran /></ProtectedRoute>} />
+          <Route path="/tracking" element={<ProtectedRoute><Tracking /></ProtectedRoute>} />
+          <Route path="/detail-monitoring" element={<ProtectedRoute><DetailMonitoring /></ProtectedRoute>} />
+          <Route path="/profil" element={<ProtectedRoute><Profil /></ProtectedRoute>} />
+        </Routes>
+      </div>
+    </Router>
+  );
+}
+
+export default App;

src/App.test.js

+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/BUILD_COMMANDS.md

+# Build Commands - DMS Sales App
+
+## Quick Build Commands
+
+### Android APK
+
+#### Debug APK (untuk testing)
+```bash
+# 1. Build React app
+npm run build
+
+# 2. Sync to Android
+npx cap sync android
+
+# 3. Build APK
+cd android
+gradlew assembleDebug
+cd ..
+```
+
+APK location: `android/app/build/outputs/apk/debug/app-debug.apk`
+
+#### Release APK (untuk production)
+```bash
+# 1. Build React app
+npm run build
+
+# 2. Sync to Android
+npx cap sync android
+
+# 3. Build Release APK
+cd android
+gradlew assembleRelease
+cd ..
+```
+
+APK location: `android/app/build/outputs/apk/release/app-release.apk`
+
+### iOS App
+
+#### Development Build
+```bash
+# 1. Build React app
+npm run build
+
+# 2. Add iOS platform (first time only)
+npx cap add ios
+
+# 3. Sync to iOS
+npx cap sync ios
+
+# 4. Open in Xcode
+npx cap open ios
+```
+
+Then in Xcode: Product > Run (⌘R)
+
+#### Production Build
+```bash
+# 1. Build React app
+npm run build
+
+# 2. Sync to iOS
+npx cap sync ios
+
+# 3. Open in Xcode
+npx cap open ios
+```
+
+Then in Xcode: Product > Archive
+
+## One-Line Commands
+
+### Android Debug
+```bash
+npm run build && npx cap sync android && cd android && gradlew assembleDebug && cd ..
+```
+
+### Android Release
+```bash
+npm run build && npx cap sync android && cd android && gradlew assembleRelease && cd ..
+```
+
+### iOS
+```bash
+npm run build && npx cap sync ios && npx cap open ios
+```
+
+## PowerShell Commands (Windows)
+
+### Android Debug
+```powershell
+npm run build; npx cap sync android; Push-Location android; .\gradlew.bat assembleDebug; Pop-Location
+```
+
+### Android Release
+```powershell
+npm run build; npx cap sync android; Push-Location android; .\gradlew.bat assembleRelease; Pop-Location
+```
+
+### Open Android Studio
+```powershell
+npx cap open android
+```
+
+## Bash Commands (Mac/Linux)
+
+### Android Debug
+```bash
+npm run build && npx cap sync android && cd android && ./gradlew assembleDebug && cd ..
+```
+
+### Android Release
+```bash
+npm run build && npx cap sync android && cd android && ./gradlew assembleRelease && cd ..
+```
+
+### iOS
+```bash
+npm run build && npx cap sync ios && npx cap open ios
+```
+
+## Build Status
+
+✅ **Android Debug APK** - Successfully built!
+- Location: `android/app/build/outputs/apk/debug/app-debug.apk`
+- Size: ~4.3 MB
+- Ready for testing on Android devices
+
+⏳ **iOS App** - Requires macOS with Xcode
+- Follow iOS build instructions in BUILD_IOS.md
+- Requires Apple Developer Account for device testing
+
+## Testing
+
+### Install APK on Android Device
+
+#### Via USB (ADB)
+```bash
+adb install android/app/build/outputs/apk/debug/app-debug.apk
+```
+
+#### Via File Transfer
+1. Copy APK to device
+2. Open file manager on device
+3. Tap APK file
+4. Allow installation from unknown sources if prompted
+5. Install
+
+### Test on iOS Device
+
+#### Via Xcode
+1. Connect iPhone/iPad via USB
+2. Open project in Xcode
+3. Select your device
+4. Click Run (⌘R)
+
+#### Via TestFlight
+1. Archive and upload to App Store Connect
+2. Add testers in TestFlight
+3. Testers install via TestFlight app
+
+## Clean Build
+
+If you encounter issues, clean and rebuild:
+
+### Android
+```bash
+cd android
+gradlew clean
+gradlew assembleDebug
+cd ..
+```
+
+### iOS
+```bash
+cd ios/App
+pod deintegrate
+pod install
+cd ../..
+npx cap sync ios
+```
+
+## Update Native Code
+
+After adding new Capacitor plugins:
+
+```bash
+npm install
+npx cap sync
+```
+
+## Live Reload (Development)
+
+For faster development with live reload:
+
+```bash
+# Terminal 1: Start React dev server
+npm start
+
+# Terminal 2: Run on Android with live reload
+npx cap run android -l --external
+
+# Or for iOS
+npx cap run ios -l --external
+```
+
+## Production Checklist
+
+Before building for production:
+
+- [ ] Update version in `package.json`
+- [ ] Update version code in `android/app/build.gradle`
+- [ ] Update version in `ios/App/App.xcodeproj`
+- [ ] Test all features
+- [ ] Optimize images and assets
+- [ ] Remove console.logs
+- [ ] Update app icons and splash screens
+- [ ] Test on multiple devices
+- [ ] Create release notes
+
+## Troubleshooting
+
+### Gradle build fails
+```bash
+cd android
+gradlew clean
+cd ..
+npm run build
+npx cap sync android
+cd android
+gradlew assembleDebug
+```
+
+### iOS build fails
+```bash
+cd ios/App
+pod repo update
+pod install
+cd ../..
+npx cap sync ios
+```
+
+### Web assets not updating
+```bash
+npm run build
+npx cap copy
+```
+
+## Resources
+
+- [Capacitor Documentation](https://capacitorjs.com/docs)
+- [Android Studio](https://developer.android.com/studio)
+- [Xcode](https://developer.apple.com/xcode/)
+- [Gradle Documentation](https://gradle.org/guides/)

src/BUILD_IOS.md

+# Panduan Build iOS App
+
+## Persyaratan
+- macOS (iOS development hanya bisa di Mac)
+- Xcode 14 atau lebih baru
+- CocoaPods
+- Apple Developer Account (untuk deploy ke device/App Store)
+
+## Langkah-langkah Build iOS
+
+### 1. Install Dependencies
+```bash
+npm install
+```
+
+### 2. Build Aplikasi React
+```bash
+npm run build
+```
+
+### 3. Tambah iOS Platform (jika belum)
+```bash
+npx cap add ios
+```
+
+### 4. Sync dengan Capacitor
+```bash
+npx cap sync ios
+```
+
+### 5. Buka di Xcode
+```bash
+npx cap open ios
+```
+
+### 6. Build di Xcode
+
+Setelah Xcode terbuka:
+
+1. Pilih target device/simulator di toolbar atas
+2. Pilih menu **Product > Build** (⌘B)
+3. Untuk run di simulator: **Product > Run** (⌘R)
+4. Untuk archive: **Product > Archive**
+
+## Build untuk Testing (Development)
+
+### Run di Simulator
+1. Buka Xcode
+2. Pilih simulator (iPhone 14, iPad, dll)
+3. Klik tombol Play atau tekan ⌘R
+
+### Run di Device Fisik
+1. Hubungkan iPhone/iPad via USB
+2. Trust device di Mac dan iPhone
+3. Di Xcode, pilih device Anda
+4. Pilih **Signing & Capabilities** tab
+5. Pilih Team (Apple Developer Account)
+6. Klik Play untuk install dan run
+
+## Build untuk Production (App Store)
+
+### 1. Setup Signing
+1. Buka project di Xcode
+2. Pilih target **App**
+3. Tab **Signing & Capabilities**
+4. Pilih Team (Apple Developer Account)
+5. Pastikan Bundle Identifier unik: `com.dms.sales`
+
+### 2. Archive Build
+```bash
+# Di Xcode:
+# Product > Archive
+```
+
+Atau via command line:
+```bash
+cd ios/App
+xcodebuild -workspace App.xcworkspace \
+  -scheme App \
+  -configuration Release \
+  -archivePath ./build/App.xcarchive \
+  archive
+```
+
+### 3. Export IPA
+1. Setelah archive selesai, Organizer akan terbuka
+2. Pilih archive terbaru
+3. Klik **Distribute App**
+4. Pilih metode distribusi:
+   - **App Store Connect** - untuk upload ke App Store
+   - **Ad Hoc** - untuk testing internal
+   - **Development** - untuk testing developer
+   - **Enterprise** - untuk distribusi internal perusahaan
+
+### 4. Upload ke App Store Connect
+1. Pilih **App Store Connect**
+2. Klik **Upload**
+3. Tunggu proses upload selesai
+4. Buka App Store Connect di browser
+5. Buat app baru atau pilih app yang ada
+6. Submit untuk review
+
+## Testing IPA
+
+### Install via TestFlight
+1. Upload IPA ke App Store Connect
+2. Tambahkan tester di TestFlight
+3. Tester akan menerima email invite
+4. Install TestFlight app dari App Store
+5. Install app dari TestFlight
+
+### Install via Xcode
+```bash
+# Connect device
+# Drag IPA file ke Xcode Devices window
+```
+
+## Update Capacitor Config untuk iOS
+
+Edit `capacitor.config.ts`:
+```typescript
+import type { CapacitorConfig } from '@capacitor/cli';
+
+const config: CapacitorConfig = {
+  appId: 'com.dms.sales',
+  appName: 'DMS Sales',
+  webDir: 'build',
+  ios: {
+    contentInset: 'always',
+    scrollEnabled: true
+  }
+};
+
+export default config;
+```
+
+## Troubleshooting
+
+### Error: CocoaPods not installed
+```bash
+sudo gem install cocoapods
+```
+
+### Error: Pod install failed
+```bash
+cd ios/App
+pod repo update
+pod install
+```
+
+### Error: Signing failed
+1. Pastikan Apple Developer Account aktif
+2. Buat App ID di developer.apple.com
+3. Buat Provisioning Profile
+4. Download dan install di Xcode
+
+### Error: Build failed - Swift version
+1. Buka Xcode
+2. Build Settings > Swift Language Version
+3. Set ke Swift 5.0 atau lebih baru
+
+### Error: Device not trusted
+1. Di iPhone: Settings > General > Device Management
+2. Trust developer certificate
+
+## App Icons & Splash Screen
+
+### Generate Icons
+1. Buat icon 1024x1024px
+2. Gunakan tool online atau:
+```bash
+npm install -g @capacitor/assets
+npx capacitor-assets generate --ios
+```
+
+### Custom Splash Screen
+1. Edit `ios/App/App/Assets.xcassets/Splash.imageset/`
+2. Atau gunakan Capacitor Splash Screen plugin
+
+## Optimasi Build
+
+### Reduce App Size
+1. Enable bitcode (jika memungkinkan)
+2. Strip debug symbols untuk release
+3. Optimize images dan assets
+
+### Performance
+1. Enable WKWebView optimizations
+2. Use native navigation jika perlu
+3. Lazy load components
+
+## Resources
+
+- [Capacitor iOS Documentation](https://capacitorjs.com/docs/ios)
+- [Apple Developer Documentation](https://developer.apple.com/documentation/)
+- [App Store Review Guidelines](https://developer.apple.com/app-store/review/guidelines/)
+- [TestFlight Documentation](https://developer.apple.com/testflight/)

src/BUILD_STATUS.md

+# 🚀 Build Status - DMS Sales App
+
+## ✅ Build Completed Successfully!
+
+---
+
+## 📱 Android APK
+
+### Status: ✅ READY TO INSTALL
+
+**APK Information:**
+- **Location:** `android/app/build/outputs/apk/debug/app-debug.apk`
+- **File Size:** 4.12 MB
+- **Build Time:** 09 April 2026, 19:21:05
+- **Build Type:** Debug (for testing)
+- **Min SDK:** Android 5.0 (API 21)
+- **Target SDK:** Android 14 (API 34)
+
+### 📥 How to Install APK
+
+#### Method 1: Via USB (ADB)
+```bash
+# Connect Android device via USB
+# Enable USB Debugging on device
+adb install android/app/build/outputs/apk/debug/app-debug.apk
+```
+
+#### Method 2: Direct Transfer
+1. Copy `app-debug.apk` to your Android device
+2. Open file manager on device
+3. Tap the APK file
+4. Allow installation from unknown sources (if prompted)
+5. Tap "Install"
+
+#### Method 3: Via Email/Cloud
+1. Email the APK to yourself or upload to cloud storage
+2. Download on Android device
+3. Open and install
+
+### 🔄 Rebuild Android APK
+
+If you make changes and need to rebuild:
+
+```bash
+# 1. Build React app
+npm run build
+
+# 2. Sync to Android
+npx cap sync android
+
+# 3. Build APK
+cd android
+gradlew assembleDebug
+cd ..
+```
+
+**One-line command (PowerShell):**
+```powershell
+npm run build; npx cap sync android; Push-Location android; .\gradlew.bat assembleDebug; Pop-Location
+```
+
+---
+
+## 🍎 iOS App
+
+### Status: ⚠️ REQUIRES macOS
+
+**Platform Information:**
+- **Location:** `ios/App/App.xcworkspace`
+- **Status:** Project created, ready for Xcode
+- **Requirement:** macOS with Xcode installed
+- **iOS Version:** iOS 13.0+
+
+### 📋 Prerequisites for iOS Build
+
+1. **macOS Computer** (iOS development only works on Mac)
+2. **Xcode 14+** - Download from Mac App Store
+3. **CocoaPods** - Install via:
+   ```bash
+   sudo gem install cocoapods
+   ```
+4. **Apple Developer Account** (for device testing/App Store)
+
+### 🛠️ Build iOS App (on Mac)
+
+#### Step 1: Install Dependencies
+```bash
+cd ios/App
+pod install
+cd ../..
+```
+
+#### Step 2: Open in Xcode
+```bash
+npx cap open ios
+```
+
+#### Step 3: Build in Xcode
+1. Select target device/simulator
+2. Click Play button (⌘R) to run
+3. Or: Product > Build (⌘B)
+
+#### Step 4: Archive for Distribution
+1. Product > Archive
+2. Wait for archive to complete
+3. Organizer window will open
+4. Select archive and click "Distribute App"
+
+### 📱 Testing on iOS
+
+#### Simulator (Free)
+```bash
+# Open in Xcode
+npx cap open ios
+
+# Select simulator (iPhone 14, iPad, etc.)
+# Click Play button
+```
+
+#### Physical Device (Requires Apple Developer Account)
+1. Connect iPhone/iPad via USB
+2. Trust device on Mac and iPhone
+3. In Xcode: Select your device
+4. Signing & Capabilities > Select Team
+5. Click Play to install and run
+
+### 🔄 Rebuild iOS App
+
+```bash
+# 1. Build React app
+npm run build
+
+# 2. Sync to iOS
+npx cap sync ios
+
+# 3. Open in Xcode
+npx cap open ios
+
+# Then build in Xcode
+```
+
+---
+
+## 📊 Build Summary
+
+| Platform | Status | Size | Location |
+|----------|--------|------|----------|
+| Android APK | ✅ Ready | 4.12 MB | `android/app/build/outputs/apk/debug/` |
+| iOS App | ⚠️ Needs Mac | N/A | `ios/App/App.xcworkspace` |
+
+---
+
+## 🎯 Features Included
+
+✅ Login with authentication  
+✅ Dashboard with statistics  
+✅ Prospect management with filters  
+✅ Add new prospect form  
+✅ Activity details tracking  
+✅ AI Assistant (DORA) chat  
+✅ Deal confirmation  
+✅ Quotation builder  
+✅ User profile management  
+✅ Sticky headers on all pages  
+✅ Scrollable content  
+✅ Bottom navigation  
+✅ Responsive design  
+
+---
+
+## 🔧 Technical Details
+
+### React Build
+- **Status:** ✅ Compiled successfully
+- **Bundle Size:** 87.85 kB (gzipped)
+- **CSS Size:** 4.02 kB (gzipped)
+- **Warnings:** None
+
+### Capacitor
+- **Version:** 6.1.2
+- **Android:** ✅ Configured
+- **iOS:** ✅ Configured
+- **Web Dir:** build
+
+### Dependencies
+- React: 19.2.4
+- React Router: 7.14.0
+- Tailwind CSS: 3.4.1
+- Capacitor Android: 6.1.2
+- Capacitor iOS: 6.1.2
+
+---
+
+## 📝 Next Steps
+
+### For Android Testing:
+1. ✅ APK is ready - install on device
+2. Test all features
+3. Report any bugs
+4. For production: Build release APK with signing
+
+### For iOS Testing:
+1. ⚠️ Need macOS with Xcode
+2. Run `pod install` in ios/App directory
+3. Open in Xcode
+4. Test on simulator or device
+5. For production: Archive and submit to App Store
+
+---
+
+## 🐛 Troubleshooting
+
+### Android APK Not Installing
+- Enable "Install from Unknown Sources"
+- Check device storage space
+- Try uninstalling old version first
+
+### iOS Build Fails
+- Update Xcode to latest version
+- Run `pod repo update` and `pod install`
+- Clean build folder: Product > Clean Build Folder
+- Check signing certificates
+
+### App Crashes on Launch
+- Check device logs
+- Verify minimum OS version
+- Rebuild with latest code
+
+---
+
+## 📚 Documentation
+
+- **Build Commands:** See `BUILD_COMMANDS.md`
+- **Android Guide:** See `BUILD_APK.md`
+- **iOS Guide:** See `BUILD_IOS.md`
+- **Changelog:** See `CHANGELOG.md`
+
+---
+
+## 🎉 Success!
+
+Your DMS Sales App is now built and ready for testing!
+
+**Android:** Install the APK and start testing  
+**iOS:** Open in Xcode on Mac to build and test
+
+For any issues, check the troubleshooting section or documentation files.
+
+---
+
+**Build Date:** 09 April 2026  
+**Version:** 0.1.0  
+**Build Type:** Development/Debug

src/CHANGELOG.md

+# Changelog - DMS Sales App
+
+## [Latest Update] - Sticky Header & Scrollable Content
+
+### ✨ Fitur Baru
+- **Sticky Header**: Semua header di setiap halaman sekarang sticky (tetap di atas saat scroll)
+- **Scrollable Content**: Konten halaman dapat di-scroll dengan smooth
+- **Better UX**: Navigasi lebih mudah dengan header yang selalu terlihat
+
+### 📱 Halaman yang Diupdate
+
+#### Dengan Sticky Header:
+1. ✅ **Beranda** - Header sticky, konten scrollable
+2. ✅ **Manajemen Prospek** - Header sticky, konten scrollable
+3. ✅ **Input Prospek** - Custom header sticky, konten scrollable
+4. ✅ **Detail Aktivitas** - Header sticky, konten scrollable
+5. ✅ **Ask Dora** - Header sticky, chat scrollable, input sticky di bawah
+6. ✅ **Konfirmasi Deal** - Header sticky, form scrollable
+7. ✅ **Buat Penawaran** - Header sticky, form scrollable
+8. ✅ **Profil** - Header sticky, menu scrollable
+9. ✅ **Penawaran** - Header sticky, konten scrollable
+10. ✅ **Transaksi** - Header sticky, list scrollable
+
+### 🎨 Perubahan Teknis
+
+#### Layout Structure
+```jsx
+// Before
+<div className="pb-20 bg-gray-50 min-h-screen">
+  <Header />
+  <div className="p-4">
+    {/* Content */}
+  </div>
+  <BottomNav />
+</div>
+
+// After
+<div className="flex flex-col h-screen bg-gray-50">
+  <Header /> {/* Sticky at top */}
+  <div className="flex-1 overflow-y-auto pb-20">
+    <div className="p-4">
+      {/* Scrollable Content */}
+    </div>
+  </div>
+  <BottomNav /> {/* Fixed at bottom */}
+</div>
+```
+
+#### Header Component
+```jsx
+// Updated to sticky
+<div className="sticky top-0 z-50 bg-white px-4 py-3 flex items-center justify-between shadow-sm">
+```
+
+#### Special Cases
+
+**Ask Dora Page:**
+- Header: Sticky at top
+- Content: Scrollable in middle
+- Input Area: Sticky at bottom
+
+```jsx
+<div className="flex flex-col h-screen">
+  <div className="sticky top-0 z-50">Header</div>
+  <div className="flex-1 overflow-y-auto">Content</div>
+  <div className="sticky bottom-0">Input</div>
+</div>
+```
+
+### 🐛 Bug Fixes
+- Removed unused imports (navigate, Header, state variables)
+- Fixed ESLint warnings
+- Cleaned up code structure
+
+### 📦 Build Info
+- **Build Status**: ✅ Compiled successfully
+- **Bundle Size**: 87.85 kB (gzipped)
+- **CSS Size**: 4.02 kB (gzipped)
+- **No Warnings**: Clean build
+
+### 🚀 Deployment
+```bash
+# Build React app
+npm run build
+
+# Sync to Android
+npx cap sync android
+
+# Build APK (optional)
+cd android
+gradlew assembleDebug
+```
+
+### 📱 Testing Checklist
+- [ ] Test scroll behavior on all pages
+- [ ] Verify header stays at top when scrolling
+- [ ] Check bottom navigation is always visible
+- [ ] Test on different screen sizes
+- [ ] Verify floating buttons (Ask Dora, Add Lead) work correctly
+- [ ] Test on Android device/emulator
+- [ ] Test on iOS device/simulator (if available)
+
+### 💡 Benefits
+1. **Better Navigation**: Header always accessible
+2. **More Content Space**: Full screen height utilized
+3. **Improved UX**: Natural scrolling behavior
+4. **Mobile-First**: Optimized for mobile devices
+5. **Consistent**: Same behavior across all pages
+
+### 🔄 Migration Notes
+If you're updating from previous version:
+1. Pull latest changes
+2. Run `npm install` (if needed)
+3. Run `npm run build`
+4. Run `npx cap sync`
+5. Test on device
+
+### 📝 Next Steps
+- [ ] Add pull-to-refresh functionality
+- [ ] Implement infinite scroll for lists
+- [ ] Add loading skeletons
+- [ ] Optimize scroll performance
+- [ ] Add scroll-to-top button
+
+---
+
+## Previous Updates
+
+### Initial Release
+- Login page with authentication
+- Dashboard with statistics
+- Prospect management
+- Activity tracking
+- AI assistant (DORA)
+- Deal confirmation
+- Quotation builder
+- Profile management
+- Bottom navigation
+- Responsive design

src/UPDATE_NOTES.md

+# Update Notes - Ask Dora Integration
+
+## 🆕 Latest Update
+
+### ✨ Ask Dora Button Added to More Pages
+
+**Date:** 09 April 2026
+
+---
+
+## 📱 Changes Made
+
+### 1. Ask Dora Button on Activities Page (Penawaran)
+- **Location:** Bottom left corner
+- **Style:** Floating button with sticky position
+- **Action:** Opens Ask Dora chat interface
+- **Z-index:** 10 (above content, below bottom nav)
+
+```jsx
+// Added to pages/Penawaran.js
+<button 
+  onClick={() => navigate('/ask-dora')}
+  className="fixed bottom-24 left-4 bg-slate-800 text-white px-4 py-3 rounded-full shadow-lg flex items-center gap-2 z-10"
+>
+  <svg>...</svg>
+  <span>ASK DORA</span>
+</button>
+```
+
+### 2. Ask Dora Button on Quotation Page (Transaksi)
+- **Location:** Bottom left corner
+- **Style:** Floating button with sticky position
+- **Action:** Opens Ask Dora chat interface
+- **Z-index:** 10 (above content, below bottom nav)
+
+```jsx
+// Added to pages/Transaksi.js
+<button 
+  onClick={() => navigate('/ask-dora')}
+  className="fixed bottom-24 left-4 bg-slate-800 text-white px-4 py-3 rounded-full shadow-lg flex items-center gap-2 z-10"
+>
+  <svg>...</svg>
+  <span>ASK DORA</span>
+</button>
+```
+
+### 3. Ask Dora Input Area - Enhanced Sticky
+- **Location:** Bottom of Ask Dora page
+- **Style:** Sticky at bottom with proper z-index
+- **Features:**
+  - Input field for typing messages
+  - Send button
+  - Add attachment button
+  - Always visible while scrolling
+
+```jsx
+// Updated in pages/AskDora.js
+<div className="sticky bottom-0 z-40 bg-white border-t border-gray-200 p-4 pb-safe">
+  <div className="flex items-center gap-2">
+    <button>+</button>
+    <input placeholder="Tulis pesan..." />
+    <button>Send</button>
+  </div>
+</div>
+```
+
+### 4. Bottom Navigation - Z-Index Update
+- **Z-index:** 50 (highest priority)
+- **Purpose:** Ensure bottom nav is always on top
+- **Safe area:** Added safe-area-inset-bottom for notched devices
+
+```jsx
+// Updated in components/BottomNav.js
+<div className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-200 px-2 py-2 safe-area-inset-bottom">
+```
+
+---
+
+## 🎯 Pages with Ask Dora Button
+
+| Page | Button Location | Status |
+|------|----------------|--------|
+| Beranda (Home) | Bottom left | ✅ Active |
+| Prospek (Leads) | Bottom left | ✅ Active |
+| Penawaran (Activities) | Bottom left | ✅ NEW |
+| Transaksi (Quotation) | Bottom left | ✅ NEW |
+| Ask Dora | N/A (is the page) | ✅ Active |
+
+---
+
+## 📐 Z-Index Hierarchy
+
+```
+Level 50: Bottom Navigation (highest)
+Level 40: Ask Dora Input Area
+Level 10: Floating Buttons (Ask Dora, Add Lead)
+Level 0:  Page Content
+```
+
+This ensures:
+- Bottom nav is always accessible
+- Ask Dora input doesn't hide behind bottom nav
+- Floating buttons are above content but below navigation
+
+---
+
+## 🎨 Visual Design
+
+### Ask Dora Button
+- **Background:** Slate 800 (dark gray)
+- **Text:** White
+- **Icon:** Chat bubble
+- **Shape:** Rounded full (pill shape)
+- **Shadow:** Large shadow for depth
+- **Position:** Fixed at bottom-24 left-4
+- **Size:** Compact but tappable
+
+### Input Area (Ask Dora Page)
+- **Background:** White
+- **Border:** Top border only
+- **Padding:** 4 units with safe area
+- **Input:** Rounded full with gray background
+- **Buttons:** Icon buttons for add and send
+
+---
+
+## 🔄 User Flow
+
+### From Activities/Quotation to Ask Dora:
+1. User is on Activities or Quotation page
+2. Sees "ASK DORA" button at bottom left
+3. Taps button
+4. Navigates to Ask Dora chat interface
+5. Can ask questions or get help
+6. Can navigate back via back button or bottom nav
+
+### Ask Dora Chat Experience:
+1. Header is sticky at top (with back button)
+2. Chat content scrolls in middle
+3. Input area is sticky at bottom
+4. Bottom navigation is always visible
+5. User can type and send messages
+6. Can scroll through chat history
+
+---
+
+## 🧪 Testing Checklist
+
+- [x] Ask Dora button appears on Activities page
+- [x] Ask Dora button appears on Quotation page
+- [x] Button navigates to Ask Dora page
+- [x] Input area is sticky on Ask Dora page
+- [x] Input area doesn't hide behind bottom nav
+- [x] Bottom nav is always on top
+- [x] Scrolling works smoothly
+- [x] Button is tappable and responsive
+- [x] Z-index hierarchy is correct
+- [x] Build compiles successfully
+
+---
+
+## 📦 Build Information
+
+### React Build
+- **Status:** ✅ Compiled successfully
+- **Bundle Size:** 87.9 kB (gzipped)
+- **CSS Size:** 4.03 kB (gzipped)
+- **Warnings:** None
+
+### Capacitor Sync
+- **Android:** ✅ Synced
+- **iOS:** ✅ Synced
+- **Web:** ✅ Synced
+
+---
+
+## 🚀 Deployment
+
+### Quick Deploy Commands:
+
+```bash
+# Build and sync
+npm run build && npx cap sync
+
+# Build Android APK
+cd android
+gradlew assembleDebug
+cd ..
+
+# Open iOS in Xcode (Mac only)
+npx cap open ios
+```
+
+### PowerShell One-liner:
+```powershell
+npm run build; npx cap sync; Push-Location android; .\gradlew.bat assembleDebug; Pop-Location
+```
+
+---
+
+## 💡 Benefits
+
+1. **Better Accessibility:** Ask Dora available on more pages
+2. **Consistent UX:** Same button style across all pages
+3. **Quick Help:** Users can get assistance without navigating
+4. **Improved Flow:** Sticky input makes chatting easier
+5. **Professional Look:** Proper z-index hierarchy
+
+---
+
+## 🔮 Future Enhancements
+
+- [ ] Add notification badge on Ask Dora button
+- [ ] Implement real-time chat functionality
+- [ ] Add typing indicators
+- [ ] Voice input support
+- [ ] Quick action buttons in chat
+- [ ] Chat history persistence
+- [ ] Offline message queue
+
+---
+
+## 📝 Notes
+
+- Ask Dora button uses `navigate('/ask-dora')` for routing
+- Input area uses `sticky bottom-0` for positioning
+- Z-index values are carefully chosen to avoid conflicts
+- Safe area insets ensure compatibility with notched devices
+- All changes are responsive and mobile-optimized
+
+---
+
+**Updated by:** Kiro AI Assistant  
+**Date:** 09 April 2026  
+**Version:** 0.1.1

src/components/BottomNav.js

+import React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+
+const BottomNav = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const navItems = [
+    { path: '/', label: 'Beranda', icon: 'home' },
+    { path: '/prospek', label: 'Prospek', icon: 'users' },
+    { path: '/activities', label: 'Penjualan', icon: 'file' },
+    { path: '/tracking', label: 'Tracking', icon: 'repeat' },
+  ];
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-200 px-2 py-2 safe-area-inset-bottom">
+      <div className="flex justify-around items-center">
+        {navItems.map((item) => (
+          <button
+            key={item.path}
+            onClick={() => navigate(item.path)}
+            className={`flex flex-col items-center gap-1 px-4 py-1 ${
+              location.pathname === item.path ? 'text-blue-600' : 'text-gray-400'
+            }`}
+          >
+            <div className="w-6 h-6">
+              {item.icon === 'home' && (
+                <svg fill="currentColor" viewBox="0 0 20 20">
+                  <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
+                </svg>
+              )}
+              {item.icon === 'users' && (
+                <svg fill="currentColor" viewBox="0 0 20 20">
+                  <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
+                </svg>
+              )}
+              {item.icon === 'file' && (
+                <svg fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clipRule="evenodd" />
+                </svg>
+              )}
+              {item.icon === 'repeat' && (
+                <svg fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clipRule="evenodd" />
+                </svg>
+              )}
+              {item.icon === 'user' && (
+                <svg fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
+                </svg>
+              )}
+            </div>
+            <span className="text-xs font-medium">{item.label}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default BottomNav;

src/components/Header.js

+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const Header = ({ title = 'DMS Sales' }) => {
+  const navigate = useNavigate();
+  const [showLogoutMenu, setShowLogoutMenu] = useState(false);
+
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('rememberMe');
+    navigate('/login');
+    window.location.reload();
+  };
+
+  return (
+    <div className="sticky top-0 z-50 bg-white px-4 py-3 flex items-center justify-between shadow-sm">
+      <div className="flex items-center gap-3">
+        <div className="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center">
+          <span className="text-white text-sm font-bold">D</span>
+        </div>
+        <span className="font-semibold text-gray-800">{title}</span>
+      </div>
+      <div className="relative">
+        <button 
+          onClick={() => setShowLogoutMenu(!showLogoutMenu)}
+          className="text-gray-400 hover:text-gray-600"
+        >
+          <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>
+        
+        {showLogoutMenu && (
+          <>
+            <div 
+              className="fixed inset-0 z-10" 
+              onClick={() => setShowLogoutMenu(false)}
+            />
+            <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg z-20 py-1">
+              <button
+                onClick={handleLogout}
+                className="w-full px-4 py-2 text-left text-red-600 hover:bg-gray-50 flex items-center gap-2"
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+                </svg>
+                Logout
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Header;

src/index.css

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@keyframes scale-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.animate-scale-in {
+  animation: scale-in 0.3s ease-out;
+}

src/index.js

+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

src/logo.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file

src/pages/Activities.js

+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import BottomNav from '../components/BottomNav';
+
+const Activities = () => {
+  const navigate = useNavigate();
+  const [activeTab, setActiveTab] = useState('semua');
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const spkList = [
+    {
+      id: 1,
+      nomorDokumen: 'SPK/2024/08/0129',
+      pelanggan: 'Bambang Wijaya',
+      unitKendaraan: 'Chery Tiggo 8 Pro',
+      tanggal: '24 Ags 2024',
+      status: 'APPROVED',
+      statusColor: 'bg-green-100 text-green-700'
+    },
+    {
+      id: 2,
+      nomorDokumen: 'SPK/2024/08/0130',
+      pelanggan: 'Siti Maesaroh',
+      unitKendaraan: 'Omoda 5 GT AWD',
+      tanggal: '25 Ags 2024',
+      status: 'PENDING',
+      statusColor: 'bg-yellow-100 text-yellow-700'
+    },
+    {
+      id: 3,
+      nomorDokumen: 'SPK/2024/08/0131',
+      pelanggan: 'Hendri Kusuma',
+      unitKendaraan: 'Chery Omoda E5',
+      tanggal: '25 Ags 2024',
+      status: 'PROCESSING',
+      statusColor: 'bg-blue-100 text-blue-700'
+    }
+  ];
+
+  const filteredSPK = spkList.filter(spk => {
+    const matchesSearch = spk.nomorDokumen.toLowerCase().includes(searchQuery.toLowerCase()) || 
+                         spk.pelanggan.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesTab = activeTab === 'semua' ? true : 
+                      activeTab === 'menunggu' ? spk.status === 'PENDING' :
+                      activeTab === 'disetujui' ? spk.status === 'APPROVED' : true;
+    return matchesSearch && matchesTab;
+  });
+
+  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 mb-4">
+          <div className="flex items-center gap-3">
+            <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="M4 6h16M4 12h16M4 18h16" />
+              </svg>
+            </button>
+            <h1 className="text-lg font-bold text-gray-900">Monitoring SPK</h1>
+          </div>
+          <button className="w-10 h-10 bg-teal-700 rounded-full flex items-center justify-center text-white font-bold">
+            D
+          </button>
+        </div>
+
+        {/* Search Bar */}
+        <div className="relative mb-4">
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Cari No. SPK atau Nama Pelanggan"
+            className="w-full pl-10 pr-4 py-3 bg-gray-100 border-0 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-800"
+          />
+          <svg className="w-5 h-5 text-gray-400 absolute left-3 top-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex gap-2 overflow-x-auto pb-2">
+          {[
+            { id: 'semua', label: 'Semua' },
+            { id: 'menunggu', label: 'Menunggu' },
+            { id: 'disetujui', label: 'Disetujui' }
+          ].map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`px-5 py-2 rounded-full font-semibold text-sm whitespace-nowrap transition-colors ${
+                activeTab === tab.id
+                  ? 'bg-slate-800 text-white'
+                  : 'bg-gray-100 text-gray-700'
+              }`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+      </div>
+      
+      <div className="flex-1 overflow-y-auto pb-20">
+        <div className="p-4">
+        {/* SPK List */}
+        <div className="space-y-3">
+          {filteredSPK.map((spk) => (
+            <div 
+              key={spk.id} 
+              className="bg-white rounded-2xl p-4 shadow-sm"
+            >
+              <div className="flex items-start justify-between mb-3">
+                <div className="flex-1">
+                  <p className="text-xs text-gray-500 mb-1">NOMOR DOKUMEN</p>
+                  <h3 className="font-bold text-gray-900 mb-2">{spk.nomorDokumen}</h3>
+                </div>
+                <span className={`${spk.statusColor} text-xs px-3 py-1 rounded-full font-semibold`}>
+                  {spk.status}
+                </span>
+              </div>
+
+              <div className="space-y-2 mb-3">
+                <div className="flex items-center gap-2">
+                  <svg className="w-4 h-4 text-gray-400" 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>
+                  <div>
+                    <p className="text-xs text-gray-500">PELANGGAN</p>
+                    <p className="text-sm font-semibold text-gray-900">{spk.pelanggan}</p>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <svg className="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/>
+                  </svg>
+                  <div>
+                    <p className="text-xs text-gray-500">UNIT KENDARAAN</p>
+                    <p className="text-sm font-semibold text-gray-900">{spk.unitKendaraan}</p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between pt-3 border-t border-gray-100">
+                <div className="flex items-center gap-1 text-xs text-gray-500">
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                  </svg>
+                  <span>{spk.tanggal}</span>
+                </div>
+                <button 
+                  onClick={() => navigate('/detail-spk')}
+                  className="text-blue-600 text-sm font-semibold flex items-center gap-1"
+                >
+                  Detail
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {filteredSPK.length === 0 && (
+          <div className="text-center py-12">
+            <p className="text-gray-500">Tidak ada SPK ditemukan</p>
+          </div>
+        )}
+
+        {/* Ask Dora Button */}
+        <button 
+          onClick={() => navigate('/ask-dora')}
+          className="fixed bottom-24 right-4 bg-slate-800 text-white px-4 py-3 rounded-full shadow-lg flex items-center gap-2 z-10"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
+          </svg>
+          <span className="text-sm font-semibold">ASK DORA</span>
+        </button>
+        </div>
+      </div>
+
+      <BottomNav />
+    </div>
+  );
+};
+
+export default Activities;

src/pages/AskDora.js

+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import BottomNav from '../components/BottomNav';
+
+const AskDora = () => {
+  const navigate = useNavigate();
+  const [message, setMessage] = useState('');
+
+  const quickActions = [
+    { icon: '📊', text: 'Cek target bulan ini' },
+    { icon: '📋', text: 'Daftar follow-up hari ini' },
+    { icon: '📝', text: 'Bantuan input SPK' }
+  ];
+
+  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 justify-between shadow-sm">
+        <div className="flex items-center gap-3">
+          <button onClick={() => navigate('/')} 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>
+          <div className="w-10 h-10 bg-slate-800 rounded-full flex items-center justify-center">
+            <span className="text-white text-xl">🤖</span>
+          </div>
+          <div>
+            <h1 className="font-bold text-gray-900">DORA</h1>
+            <p className="text-xs text-green-600">ONLINE</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          <button className="text-gray-600">
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </button>
+          <button className="text-gray-600">
+            <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>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto pb-24">
+        <div className="p-4 space-y-4">
+        {/* Welcome Message */}
+        <div className="text-center py-8">
+          <h2 className="text-2xl font-bold text-gray-900 mb-2">Selamat Pagi, Rian</h2>
+          <p className="text-gray-600">
+            Kelola unit, prospek, dan target penjualan Anda dengan asisten AI yang lebih cerdas.
+          </p>
+        </div>
+
+        {/* DORA Message */}
+        <div className="flex gap-3">
+          <div className="w-10 h-10 bg-slate-800 rounded-full flex items-center justify-center flex-shrink-0">
+            <span className="text-white text-xl">🤖</span>
+          </div>
+          <div className="flex-1">
+            <div className="bg-white rounded-2xl rounded-tl-none p-4 shadow-sm">
+              <p className="text-gray-800">
+                Halo, Rian! Saya DORA, asisten digital Anda. Ada yang bisa saya bantu untuk mempermudah pekerjaan Anda hari ini? 😊
+              </p>
+            </div>
+            <p className="text-xs text-gray-500 mt-1 ml-2">09:41 AM</p>
+          </div>
+        </div>
+
+        {/* Quick Actions */}
+        <div className="space-y-2">
+          {quickActions.map((action, index) => (
+            <button
+              key={index}
+              className="w-full bg-white rounded-xl p-4 shadow-sm text-left flex items-center gap-3 hover:bg-gray-50 transition-colors"
+            >
+              <span className="text-2xl">{action.icon}</span>
+              <span className="text-gray-800 font-medium">{action.text}</span>
+              <svg className="w-5 h-5 text-gray-400 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+          ))}
+        </div>
+        </div>
+      </div>
+
+      {/* Input Area - Above Bottom Nav */}
+      <div className="sticky bottom-16 z-40 bg-gray-50 border-t border-gray-200 px-4 py-3">
+        <div className="flex items-center gap-3">
+          <button className="text-gray-400 hover:text-gray-600">
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </button>
+          <input
+            type="text"
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            placeholder="Tulis pesan..."
+            className="flex-1 bg-white rounded-lg px-4 py-3 text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-800 border border-gray-200"
+          />
+          <button className="bg-slate-800 text-white p-3 rounded-full hover:bg-slate-700 transition-colors flex-shrink-0">
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <BottomNav />
+    </div>
+  );
+};
+
+export default AskDora;

src/pages/Beranda.js

+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import BottomNav from '../components/BottomNav';
+
+const Beranda = () => {
+  const navigate = useNavigate();
+
+  const recentActivities = [
+    {
+      name: 'Budi Santoso',
+      activity: 'Janji Temu',
+      detail: 'Hari Ini, 14:00',
+      status: 'HOT',
+      statusColor: 'bg-red-100 text-red-700',
+      icon: '📅',
+      iconBg: 'bg-gray-100'
+    },
+    {
+      name: 'Siti Aminah',
+      activity: 'Penawaran Terkirim',
+      detail: 'Kemarin',
+      status: 'WARM',
+      statusColor: 'bg-yellow-100 text-yellow-700',
+      icon: '📧',
+      iconBg: 'bg-gray-100'
+    },
+    {
+      name: 'Aris Kurniawan',
+      activity: 'Panggilan Terlewat',
+      detail: '2 jam yang lalu',
+      status: 'COLD',
+      statusColor: 'bg-blue-100 text-blue-700',
+      icon: '📞',
+      iconBg: 'bg-gray-100'
+    }
+  ];
+
+  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">
+            <div className="w-10 h-10 bg-teal-700 rounded-full flex items-center justify-center text-white font-bold">
+              D
+            </div>
+            <h1 className="text-lg font-bold text-gray-900">DMS AutoPRO</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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+            </svg>
+          </button>
+        </div>
+      </div>
+      
+      <div className="flex-1 overflow-y-auto pb-20">
+        <div className="p-4 space-y-4">
+        {/* Greeting */}
+        <div>
+          <h2 className="text-2xl font-bold text-gray-900 mb-1">Selamat datang, Sales</h2>
+          <p className="text-sm text-gray-600 flex items-center gap-1">
+            Semangat closing hari ini 🚀
+          </p>
+        </div>
+
+        {/* Stats Cards */}
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <p className="text-xs text-gray-600 font-medium mb-1">TOTAL LEAD</p>
+            <p className="text-4xl font-bold text-gray-900">12</p>
+            <div className="w-16 h-1 bg-slate-800 rounded-full mt-2"></div>
+          </div>
+
+          <div>
+            <p className="text-xs text-gray-600 font-medium mb-1">FOLLOW-UP</p>
+            <p className="text-4xl font-bold text-gray-900">05</p>
+            <div className="w-16 h-1 bg-blue-500 rounded-full mt-2"></div>
+          </div>
+        </div>
+
+        {/* Menu Utama */}
+        <div>
+          <h3 className="text-sm font-bold text-gray-600 mb-3">MENU UTAMA</h3>
+          <div className="grid grid-cols-3 gap-3">
+            <button 
+              onClick={() => navigate('/buat-penawaran')}
+              className="bg-white rounded-2xl p-4 shadow-sm flex flex-col items-center gap-2"
+            >
+              <div className="w-14 h-14 bg-blue-100 rounded-2xl flex items-center justify-center">
+                <svg className="w-7 h-7 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/>
+                </svg>
+              </div>
+              <span className="text-xs font-bold text-gray-900 text-center">SALES</span>
+            </button>
+
+            <button 
+              onClick={() => navigate('/prospek')}
+              className="bg-white rounded-2xl p-4 shadow-sm flex flex-col items-center gap-2"
+            >
+              <div className="w-14 h-14 bg-orange-100 rounded-2xl flex items-center justify-center">
+                <svg className="w-7 h-7 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+                </svg>
+              </div>
+              <span className="text-xs font-bold text-gray-900 text-center">PROSPEK</span>
+            </button>
+
+            <button 
+              onClick={() => navigate('/prospek/input')}
+              className="bg-white rounded-2xl p-4 shadow-sm flex flex-col items-center gap-2"
+            >
+              <div className="w-14 h-14 bg-green-100 rounded-2xl flex items-center justify-center">
+                <svg className="w-7 h-7 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
+                </svg>
+              </div>
+              <span className="text-xs font-bold text-gray-900 text-center">LEADS</span>
+            </button>
+
+            <button 
+              onClick={() => navigate('/activities')}
+              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">
+                <svg className="w-7 h-7 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                </svg>
+              </div>
+              <span className="text-xs font-bold text-gray-900 text-center">TRACKING</span>
+            </button>
+          </div>
+        </div>
+
+        {/* Aktivitas Terakhir */}
+        <div>
+          <div className="flex justify-between items-center mb-3">
+            <h3 className="font-bold text-gray-900">Aktifitas Terakhir</h3>
+            <button 
+              onClick={() => navigate('/activities')}
+              className="text-blue-600 text-sm font-semibold"
+            >
+              Lihat Detail
+            </button>
+          </div>
+          
+          <div className="space-y-3">
+            {recentActivities.map((activity, index) => (
+              <button
+                key={index}
+                onClick={() => navigate('/detail-aktivitas')}
+                className="w-full bg-white rounded-2xl p-4 shadow-sm flex items-center gap-3"
+              >
+                <div className={`w-12 h-12 ${activity.iconBg} rounded-full flex items-center justify-center text-xl`}>
+                  {activity.icon}
+                </div>
+                <div className="flex-1 text-left">
+                  <h4 className="font-bold text-gray-900 text-sm mb-1">{activity.name}</h4>
+                  <p className="text-xs text-gray-600">{activity.activity} • {activity.detail}</p>
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Ask Dora Button */}
+        <button 
+          onClick={() => navigate('/ask-dora')}
+          className="fixed bottom-24 right-4 bg-slate-800 text-white px-4 py-3 rounded-full shadow-lg flex items-center gap-2 z-10"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
+          </svg>
+          <span className="text-sm font-semibold">ASK DORA</span>
+        </button>
+        </div>
+      </div>
+
+      <BottomNav />
+    </div>
+  );
+};
+
+export default Beranda;

src/pages/BuatPenawaran.js

+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import BottomNav from '../components/BottomNav';
+
+const BuatPenawaran = () => {
+  const navigate = useNavigate();
+  const [activeTab, setActiveTab] = useState('kredit');
+  const [showSuccessModal, setShowSuccessModal] = useState(false);
+  const [formData, setFormData] = useState({
+    namaPelanggan: '',
+    noWhatsapp: '',
+    namaCustomer: '',
+    alamatPengiriman: '',
+    tanggalTestDrive: '',
+    pilihBrand: 'Chery',
+    metodePembayaran: 'kredit',
+    tenor: '12',
+    uangMuka: '15.000.000',
+    diskon: '',
+    bookingFee: ''
+  });
+
+  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-100 text-green-700'
+    },
+    {
+      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-100 text-orange-700'
+    },
+    {
+      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-100 text-green-700'
+    }
+  ];
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log('Penawaran data:', formData);
+    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="font-semibold text-gray-800">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-600" 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-sm text-gray-600 mb-2">Nama Pelanggan</label>
+                <input
+                  type="text"
+                  value={formData.namaPelanggan}
+                  onChange={(e) => setFormData({...formData, namaPelanggan: e.target.value})}
+                  placeholder="Masukkan nama lengkap"
+                  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"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm text-gray-600 mb-2">NO WHATSAPP / HP</label>
+                <input
+                  type="tel"
+                  value={formData.noWhatsapp}
+                  onChange={(e) => setFormData({...formData, noWhatsapp: e.target.value})}
+                  placeholder="Contoh: 08123456789"
+                  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"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm text-gray-600 mb-2">NIK / CUSTOMER ID</label>
+                <input
+                  type="text"
+                  value={formData.namaCustomer}
+                  onChange={(e) => setFormData({...formData, namaCustomer: e.target.value})}
+                  placeholder="16 digit NIK"
+                  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"
+                />
+              </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-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>
+              <h3 className="font-bold text-gray-900">Detail Pengiriman</h3>
+            </div>
+
+            <div className="space-y-3">
+              <div>
+                <label className="block text-sm text-gray-600 mb-2">ALAMAT PENGIRIMAN</label>
+                <textarea
+                  value={formData.alamatPengiriman}
+                  onChange={(e) => setFormData({...formData, alamatPengiriman: e.target.value})}
+                  placeholder="Masukkan alamat lengkap"
+                  rows="3"
+                  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 resize-none"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm text-gray-600 mb-2">TANGGAL TEST DRIVE</label>
+                <input
+                  type="date"
+                  value={formData.tanggalTestDrive}
+                  onChange={(e) => setFormData({...formData, tanggalTestDrive: e.target.value})}
+                  placeholder="mm/dd/yyyy"
+                  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"
+                />
+              </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-600" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/>
+              </svg>
+              <h3 className="font-bold text-gray-900">Pemilihan Unit</h3>
+            </div>
+
+            <div className="space-y-3">
+              <div>
+                <label className="block text-sm text-gray-600 mb-2">PILIH BRAND</label>
+                <select
+                  value={formData.pilihBrand}
+                  onChange={(e) => setFormData({...formData, pilihBrand: e.target.value})}
+                  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>
+                </select>
+              </div>
+
+              {/* Unit List */}
+              <div className="space-y-2">
+                {units.map((unit) => (
+                  <div
+                    key={unit.id}
+                    className="bg-gray-50 rounded-xl p-3 flex items-center justify-between cursor-pointer hover:bg-gray-100 transition-colors"
+                  >
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2 mb-1">
+                        <h4 className="font-bold text-gray-900 text-sm">{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" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                    </svg>
+                  </div>
+                ))}
+              </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-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
+              </svg>
+              <h3 className="font-bold text-gray-900">Metode Pembayaran</h3>
+            </div>
+
+            <div className="flex gap-2 mb-4">
+              <button
+                type="button"
+                onClick={() => setActiveTab('kredit')}
+                className={`flex-1 py-2 rounded-lg font-semibold text-sm transition-colors ${
+                  activeTab === 'kredit'
+                    ? 'bg-slate-800 text-white'
+                    : 'bg-gray-100 text-gray-700'
+                }`}
+              >
+                Kredit
+              </button>
+              <button
+                type="button"
+                onClick={() => setActiveTab('cash')}
+                className={`flex-1 py-2 rounded-lg font-semibold text-sm transition-colors ${
+                  activeTab === 'cash'
+                    ? 'bg-slate-800 text-white'
+                    : 'bg-gray-100 text-gray-700'
+                }`}
+              >
+                Cash
+              </button>
+            </div>
+
+            {activeTab === 'kredit' && (
+              <div className="space-y-3">
+                <div>
+                  <label className="block text-sm text-gray-600 mb-2">TENOR (BULAN)</label>
+                  <select
+                    value={formData.tenor}
+                    onChange={(e) => setFormData({...formData, tenor: e.target.value})}
+                    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="12">12 Bulan</option>
+                    <option value="24">24 Bulan</option>
+                    <option value="36">36 Bulan</option>
+                    <option value="48">48 Bulan</option>
+                    <option value="60">60 Bulan</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-sm text-gray-600 mb-2">UANG MUKA</label>
+                  <input
+                    type="text"
+                    value={formData.uangMuka}
+                    onChange={(e) => setFormData({...formData, uangMuka: 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"
+                  />
+                </div>
+
+                {/* Cicilan Preview */}
+                <div className="bg-blue-50 rounded-xl p-4">
+                  <p className="text-xs text-gray-600 mb-1">Cicilan Perbulan</p>
+                  <p className="text-2xl font-bold text-gray-900">Rp 12.400.000</p>
+                  <p className="text-xs text-gray-600 mt-2">
+                    Estimasi bunga 6.5% per tahun. Syarat dan ketentuan berlaku.
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'cash' && (
+              <div className="space-y-3">
+                <div>
+                  <label className="block text-sm text-gray-600 mb-2">HARGA JUAL</label>
+                  <div className="bg-gray-50 rounded-xl p-4">
+                    <p className="text-2xl font-bold text-gray-900">Rp 488.800.000</p>
+                  </div>
+                </div>
+
+                <div>
+                  <label className="block text-sm text-gray-600 mb-2">DISKON</label>
+                  <input
+                    type="text"
+                    value={formData.diskon}
+                    onChange={(e) => setFormData({...formData, diskon: e.target.value})}
+                    placeholder="Mendapatkan potongan harga khusus pembayaran tunai"
+                    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"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm text-gray-600 mb-2">BOOKING FEE</label>
+                  <input
+                    type="text"
+                    value={formData.bookingFee}
+                    onChange={(e) => setFormData({...formData, bookingFee: e.target.value})}
+                    placeholder="Nominal minimal booking fee"
+                    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"
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Total Harga */}
+          <div className="bg-slate-800 rounded-2xl p-5 text-white">
+            <p className="text-xs text-gray-300 mb-1">TOTAL HARGA</p>
+            <p className="text-4xl font-bold">Rp 488.800.000</p>
+          </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-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>
+              <h3 className="font-bold text-gray-900">Dokumen Operasional</h3>
+            </div>
+
+            <div className="space-y-3">
+              <button
+                type="button"
+                className="w-full bg-gray-50 rounded-xl p-4 flex items-center gap-3 text-left"
+              >
+                <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="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+                  </svg>
+                </div>
+                <div className="flex-1">
+                  <p className="font-semibold text-gray-900">Upload KTP</p>
+                  <p className="text-xs text-gray-500">Maks 5MB (JPG, PNG)</p>
+                </div>
+              </button>
+
+              <button
+                type="button"
+                className="w-full bg-gray-50 rounded-xl p-4 flex items-center gap-3 text-left"
+              >
+                <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">
+                  <p className="font-semibold text-gray-900">Kartu Keluarga</p>
+                  <p className="text-xs text-gray-500">Maks 5MB (JPG, PNG)</p>
+                </div>
+              </button>
+
+              <button
+                type="button"
+                className="w-full bg-gray-50 rounded-xl p-4 flex items-center gap-3 text-left"
+              >
+                <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">
+                  <p className="font-semibold text-gray-900">NPWP</p>
+                  <p className="text-xs text-gray-500">Maks 5MB (JPG, PNG)</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 mx-4 animate-scale-in">
+            {/* Success Icon */}
+            <div className="flex justify-center mb-6">
+              <div className="w-24 h-24 bg-green-500 rounded-full flex items-center justify-center shadow-lg">
+                <svg className="w-12 h-12 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>
+
+            {/* Title */}
+            <h2 className="text-2xl font-bold text-gray-900 text-center mb-3">
+              SPK Berhasil Disimpan
+            </h2>
+
+            {/* Description */}
+            <p className="text-sm text-gray-600 text-center mb-8">
+              Pesanan telah diteruskan ke tim <span className="font-bold text-gray-900">Back Office Admin</span> untuk diproses lebih lanjut
+            </p>
+
+            {/* Buttons */}
+            <div className="space-y-3">
+              <button
+                onClick={() => navigate('/')}
+                className="w-full bg-slate-800 text-white py-4 rounded-xl font-semibold hover:bg-slate-700 transition-colors"
+              >
+                Kembali ke Beranda
+              </button>
+              <button
+                onClick={() => {
+                  setShowSuccessModal(false);
+                  navigate('/prospek');
+                }}
+                className="w-full bg-white text-gray-600 py-4 rounded-xl font-semibold hover:bg-gray-50 transition-colors"
+              >
+                Lihat Daftar SPK
+              </button>
+            </div>
+
+            {/* Reference ID */}
+            <div className="mt-6 pt-6 border-t border-gray-200 flex items-center justify-between">
+              <span className="text-xs text-gray-500 font-semibold">REF ID</span>
+              <span className="text-xs text-gray-700 bg-gray-100 px-3 py-1 rounded font-mono">SPK-2023-08922</span>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BuatPenawaran;

src/pages/DetailAktivitas.js

+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import BottomNav from '../components/BottomNav';
+
+const DetailAktivitas = () => {
+  const navigate = useNavigate();
+
+  const activities = [
+    {
+      type: 'appointment',
+      icon: '📅',
+      iconBg: 'bg-slate-800',
+      title: 'Janji Temu',
+      badge: 'Hari Ini',
+      badgeColor: 'bg-blue-100 text-blue-700',
+      description: 'Test Drive SUV Premium - Lokasi: Dealer Pusat',
+      time: ''
+    },
+    {
+      type: 'phone',
+      icon: '📞',
+      iconBg: 'bg-gray-100',
+      title: 'Telepon',
+      time: 'Kemarin, 14:20',
+      description: 'Konfirmasi ketersediaan unit dan jadwal kunjungan. Prospek sangat tertarik.',
+      badge: '',
+      badgeColor: ''
+    },
+    {
+      type: 'input',
+      icon: '📝',
+      iconBg: 'bg-gray-100',
+      title: 'Input Lead',
+      time: '2 hari lalu',
+      description: 'Data masuk melalui sistem CRM - Referral dari booth pameran.',
+      badge: '',
+      badgeColor: ''
+    }
+  ];
+
+  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 justify-between 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>
+          <span className="font-semibold text-gray-800">Detail Prospek</span>
+        </div>
+        <div className="flex items-center gap-3">
+          <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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+            </svg>
+          </button>
+          <button className="w-8 h-8 bg-slate-800 rounded-full flex items-center justify-center text-white text-sm font-bold">
+            B
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto pb-20">
+        <div className="p-4 space-y-4">
+        {/* Customer Info Card */}
+        <div className="bg-white rounded-2xl p-4 shadow-sm">
+          <div className="flex items-start gap-3 mb-4">
+            <div className="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center">
+              <svg className="w-8 h-8 text-blue-600" 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>
+            </div>
+            <div className="flex-1">
+              <h2 className="text-xl font-bold text-gray-900 mb-2">Budi Santoso</h2>
+              <div className="flex items-center gap-2 mb-3">
+                <span className="bg-green-100 text-green-700 text-xs px-2 py-1 rounded font-semibold">
+                  HOT PROSPECT
+                </span>
+                <span className="text-xs text-gray-600">Jakarta Selatan</span>
+              </div>
+              
+              {/* Action Buttons */}
+              <div className="flex gap-2">
+                <button className="flex-1 bg-slate-800 text-white py-2 px-4 rounded-lg text-sm font-semibold flex items-center justify-center gap-2">
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                  </svg>
+                  Hubungi
+                </button>
+                <button className="flex-1 bg-blue-100 text-blue-700 py-2 px-4 rounded-lg text-sm font-semibold flex items-center justify-center gap-2">
+                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
+                  </svg>
+                  WhatsApp
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Info Grid */}
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <p className="text-xs text-gray-500 mb-1">UNIT DIMINATI</p>
+              <p className="text-sm font-bold text-gray-900">SUV Premium X5</p>
+            </div>
+            <div>
+              <p className="text-xs text-gray-500 mb-1">SUMBER LEAD</p>
+              <p className="text-sm font-bold text-gray-900">Pameran GIIAS</p>
+            </div>
+            <div>
+              <p className="text-xs text-gray-500 mb-1">TIPE</p>
+              <p className="text-sm font-bold text-gray-900">Kredit 36 Bln</p>
+            </div>
+            <div>
+              <p className="text-xs text-gray-500 mb-1">ESTIMASI CLOSING</p>
+              <p className="text-sm font-bold text-gray-900">15 Okt 2023</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Timeline Aktivitas */}
+        <div>
+          <div className="flex items-center justify-between mb-3">
+            <h3 className="font-bold text-gray-900">Timeline Aktivitas</h3>
+            <button className="text-blue-600 text-sm font-semibold">Lihat Semua</button>
+          </div>
+
+          <div className="space-y-3">
+            {activities.map((activity, index) => (
+              <div key={index} className="bg-white rounded-2xl p-4 shadow-sm">
+                <div className="flex gap-3">
+                  <div className={`w-12 h-12 ${activity.iconBg} rounded-full flex items-center justify-center flex-shrink-0`}>
+                    <span className="text-xl">{activity.icon}</span>
+                  </div>
+                  <div className="flex-1">
+                    <div className="flex items-start justify-between mb-1">
+                      <div className="flex items-center gap-2">
+                        <h4 className="font-bold text-gray-900 text-sm">{activity.title}</h4>
+                        {activity.badge && (
+                          <span className={`${activity.badgeColor} text-xs px-2 py-0.5 rounded font-semibold`}>
+                            {activity.badge}
+                          </span>
+                        )}
+                      </div>
+                      {activity.time && (
+                        <span className="text-xs text-gray-500">{activity.time}</span>
+                      )}
+                    </div>
+                    <p className="text-sm text-gray-600">{activity.description}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Menu Navigasi */}
+        <div>
+          <h3 className="font-bold text-gray-900 mb-3">Menu Navigasi</h3>
+          <div className="space-y-2">
+            <button 
+              onClick={() => navigate('/follow-up')}
+              className="w-full bg-white rounded-xl p-4 shadow-sm flex items-center justify-between"
+            >
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 bg-slate-800 rounded-lg flex items-center justify-center">
+                  <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                  </svg>
+                </div>
+                <span className="font-semibold text-gray-900">Follow Up</span>
+              </div>
+              <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+
+            <button 
+              onClick={() => navigate('/buat-penawaran')}
+              className="w-full bg-white rounded-xl p-4 shadow-sm flex items-center justify-between"
+            >
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
+                  <svg className="w-5 h-5 text-blue-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>
+                <span className="font-semibold text-gray-900">Buat Penawaran</span>
+              </div>
+              <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+
+            <button className="w-full bg-white rounded-xl p-4 shadow-sm flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 bg-gray-100 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                  </svg>
+                </div>
+                <span className="font-semibold text-gray-900">Ubah Status</span>
+              </div>
+              <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        {/* Ask Dora Button */}
+        <button 
+          onClick={() => navigate('/ask-dora')}
+          className="fixed bottom-24 right-4 bg-slate-800 text-white p-4 rounded-full shadow-lg flex flex-col items-center gap-1 z-10"
+        >
+          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
+          </svg>
+        </button>
+        </div>
+      </div>
+
+      <BottomNav />
+    </div>
+  );
+};
+
+export default DetailAktivitas;

src/pages/DetailMonitoring.js

+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import BottomNav from '../components/BottomNav';
+
+const DetailMonitoring = () => {
+  const navigate = useNavigate();
+
+  const timelineSteps = [
+    {
+      id: 1,
+      title: 'SPK Dibuat',
+      description: 'Dokumen Surat Pemesanan Kendaraan telah divalidasi oleh sistem',
+      date: '3 Okt 2023, 08:20',
+      status: 'completed',
+      icon: 'check'
+    },
+    {
+      id: 2,
+      title: 'Pembayaran DP',
+      description: 'Down Payment sebesar Rp 50.000.000 telah diterima dan dikonfirmasi',
+      date: '03 Okt 2023, 08:35',
+      status: 'completed',
+      icon: 'check'
+    },
+    {
+      id: 3,
+      title: 'Unit Ready',
+      description: 'Pengecekan kualitas awal, PDI seeding dilakukan oleh tim teknis',
+      date: '',
+      status: 'current',
+      icon: 'current',
+      badges: [
+        { label: 'QUALITY CHECK', color: 'bg-gray-100 text-gray-700' },
+        { label: 'CLEANING', color: 'bg-gray-100 text-gray-700' }
+      ]
+    },
+    {
+      id: 4,
+      title: 'Pengiriman',
+      description: 'Unit akan dikirimkan ke alamat konsumen sesuai jadwal',
+      date: '',
+      status: 'pending',
+      icon: 'pending'
+    }
+  ];
+
+  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="w-10 h-10 bg-slate-800 rounded-full flex items-center justify-center text-white">
+              <svg className="w-5 h-5" 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">DMS AutoPRO</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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto pb-20">
+        <div className="p-4 space-y-4">
+          {/* Back Link */}
+          <button onClick={() => navigate(-1)} className="flex items-center gap-1 text-gray-500 text-sm">
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+            KEMBALI
+          </button>
+
+          {/* Title */}
+          <div>
+            <h2 className="text-2xl font-bold text-gray-900 mb-1">Status Pesanan</h2>
+            <p className="text-sm text-gray-500">Order ID: #SPK-2023-09012</p>
+          </div>
+
+          {/* Status Card */}
+          <div className="bg-white rounded-2xl p-4 shadow-sm">
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <p className="text-xs text-gray-500 mb-1">STATUS</p>
+                <p className="text-sm font-bold text-blue-600">UNIT READY</p>
+              </div>
+              <div>
+                <p className="text-xs text-gray-500 mb-1">ESTIMASI PENGIRIMAN</p>
+                <p className="text-sm font-bold text-gray-900">15 Okt 2023</p>
+              </div>
+            </div>
+            <div className="flex gap-2 mt-4">
+              <button className="flex-1 bg-gray-100 text-gray-700 py-2 rounded-lg text-xs font-semibold">
+                PEMESANAN
+              </button>
+              <button className="flex-1 bg-slate-800 text-white py-2 rounded-lg text-xs font-semibold">
+                PROSES
+              </button>
+              <button className="flex-1 bg-gray-100 text-gray-700 py-2 rounded-lg text-xs font-semibold">
+                SELESAI
+              </button>
+            </div>
+          </div>
+
+          {/* Timeline Progress */}
+          <div className="bg-white rounded-2xl p-4 shadow-sm">
+            <h3 className="text-sm font-bold text-gray-900 mb-4">TIMELINE PROGRESS</h3>
+            
+            <div className="space-y-4">
+              {timelineSteps.map((step, index) => (
+                <div key={step.id} className="flex gap-3">
+                  {/* Icon */}
+                  <div className="flex flex-col items-center">
+                    <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
+                      step.status === 'completed' ? 'bg-green-500' :
+                      step.status === 'current' ? 'bg-blue-500' :
+                      'bg-gray-300'
+                    }`}>
+                      {step.status === 'completed' && (
+                        <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                        </svg>
+                      )}
+                      {step.status === 'current' && (
+                        <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                      )}
+                      {step.status === 'pending' && (
+                        <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
+                        </svg>
+                      )}
+                    </div>
+                    {index < timelineSteps.length - 1 && (
+                      <div className={`w-0.5 h-16 ${
+                        step.status === 'completed' ? 'bg-green-500' : 'bg-gray-300'
+                      }`}></div>
+                    )}
+                  </div>
+
+                  {/* Content */}
+                  <div className="flex-1 pb-4">
+                    <h4 className="text-base font-bold text-gray-900 mb-1">{step.title}</h4>
+                    <p className="text-sm text-gray-600 mb-2">{step.description}</p>
+                    {step.date && (
+                      <p className="text-xs text-gray-400">{step.date}</p>
+                    )}
+                    {step.badges && (
+                      <div className="flex gap-2 mt-2">
+                        {step.badges.map((badge, idx) => (
+                          <span key={idx} className={`text-xs px-3 py-1 rounded-full font-semibold ${badge.color}`}>
+                            {badge.label}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Detail Unit */}
+          <div className="bg-slate-800 rounded-2xl p-4 shadow-sm">
+            <p className="text-xs text-gray-400 mb-3">DETAIL UNIT</p>
+            
+            <div className="bg-white rounded-xl p-3 mb-3">
+              <img 
+                src="/images/SUV-premium-x-series-phantom-black.png" 
+                alt="SUV Premium X-Series"
+                className="w-full h-32 object-contain"
+                onError={(e) => {
+                  e.target.style.display = 'none';
+                  e.target.nextSibling.style.display = 'flex';
+                }}
+              />
+              <div className="hidden w-full h-32 items-center justify-center bg-gray-100 rounded-lg">
+                <svg className="w-16 h-16 text-gray-400" 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>
+              </div>
+            </div>
+
+            <h3 className="text-lg font-bold text-white mb-1">SUV Premium X-Series</h3>
+            <p className="text-sm text-gray-300 mb-4">Phantom Black • All Wheel Drive</p>
+
+            <div className="border-t border-gray-600 pt-3">
+              <div className="flex justify-between items-center">
+                <span className="text-sm text-gray-300">Harga OTR</span>
+                <div className="flex items-center gap-2">
+                  <span className="text-lg font-bold text-white">Rp 845.000.000</span>
+                  <button className="w-5 h-5 bg-gray-600 rounded-full flex items-center justify-center">
+                    <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Kontak Pelanggan */}
+          <div className="bg-white rounded-2xl p-4 shadow-sm">
+            <p className="text-xs text-gray-500 mb-3">KONTAK PELANGGAN</p>
+            <div className="flex items-center gap-3 mb-3">
+              <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
+                <svg className="w-6 h-6 text-blue-600" 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>
+              </div>
+              <div>
+                <p className="text-sm font-bold text-gray-900">Bpk. Adhi Wijaya</p>
+                <p className="text-xs text-gray-500">+62 812 3456 7890</p>
+              </div>
+            </div>
+            <button className="w-full bg-blue-500 text-white py-3 rounded-xl font-semibold flex items-center justify-center gap-2">
+              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
+              </svg>
+              Hubungi Pelanggan
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <BottomNav />
+    </div>
+  );
+};
+
+export default DetailMonitoring;

src/pages/DetailSPK.js

+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import BottomNav from '../components/BottomNav';
+
+const DetailSPK = () => {
+  const navigate = useNavigate();
+
+  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="w-10 h-10 bg-slate-800 rounded-full flex items-center justify-center text-white">
+              <svg className="w-5 h-5" 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-lg font-bold text-gray-900">Ringkasan SPK</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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto pb-20">
+        <div className="p-4 space-y-4">
+          {/* Status Card */}
+          <div className="bg-white rounded-2xl p-4 shadow-sm">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div className="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center">
+                  <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                  </svg>
+                </div>
+                <div>
+                  <p className="text-xs text-gray-500 mb-1">STATUS PESANAN</p>
+                  <p className="text-lg font-bold text-gray-900">Approved</p>
+                </div>
+              </div>
+              <div className="text-right">
+                <p className="text-xs text-gray-500 mb-1">NO. SPK</p>
+                <p className="text-sm font-bold text-gray-900">SPK/2024/08/0129</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Car Image & Info */}
+          <div className="bg-white rounded-2xl p-4 shadow-sm">
+            <div className="bg-white rounded-2xl p-4 mb-4">
+              <img 
+                src="/images/chery-tiggo-8-pro.png" 
+                alt="Chery Tiggo 8 Pro"
+                className="w-full h-48 object-contain rounded-xl"
+              />
+            </div>
+            <div className="flex items-start justify-between">
+              <div>
+                <h2 className="text-xl font-bold text-gray-900 mb-1">Chery Tiggo 8 Pro</h2>
+                <p className="text-sm text-gray-600">Premium Luxury Edition • 2.0 Turbo</p>
+              </div>
+              <span className="bg-gray-100 text-gray-700 text-xs px-3 py-1 rounded-full font-semibold">2024</span>
+            </div>
+          </div>
+
+          {/* 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-600" 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="grid grid-cols-2 gap-4">
+              <div>
+                <p className="text-xs text-gray-500 mb-1">Nama Pemesanan</p>
+                <p className="text-sm font-semibold text-gray-900">Bambang Wijaya</p>
+              </div>
+              <div>
+                <p className="text-xs text-gray-500 mb-1">Metode Bayar</p>
+                <p className="text-sm font-semibold text-gray-900">Kredit (BCA Finance)</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Rincian Finansial */}
+          <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-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
+              </svg>
+              <h3 className="font-bold text-gray-900">RINCIAN FINANSIAL</h3>
+            </div>
+
+            <div className="space-y-3">
+              <div className="flex justify-between">
+                <span className="text-sm text-gray-600">Harga OAR</span>
+                <span className="text-sm font-semibold text-gray-900">Rp 558.500.000</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-sm text-gray-600">Down Payment (20%)</span>
+                <span className="text-sm font-semibold text-gray-900">Rp 111.700.000</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-sm text-gray-600">Angsuran (60x)</span>
+                <span className="text-sm font-semibold text-gray-900">Rp 9.250.000 / bln</span>
+              </div>
+              <div className="border-t pt-3 mt-3">
+                <div className="flex justify-between">
+                  <span className="text-base font-bold text-gray-900">Total Booking Fee</span>
+                  <span className="text-base font-bold text-gray-900">Rp 10.000.000</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Generate PDF Button */}
+          <button className="w-full bg-slate-800 text-white py-4 rounded-xl font-semibold flex items-center justify-center gap-2">
+            <svg className="w-5 h-5" 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>
+            Generate PDF SPK
+          </button>
+
+          <button 
+            onClick={() => navigate('/activities')}
+            className="w-full bg-white text-gray-600 py-4 rounded-xl font-semibold"
+          >
+            Lihat Histori Aktivitas
+          </button>
+
+          {/* Timeline */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <p className="text-xs text-gray-500 mb-1">TANGGAL SPK</p>
+              <p className="text-sm font-semibold text-gray-900">24 Ags 2024</p>
+            </div>
+            <div>
+              <p className="text-xs text-gray-500 mb-1">ESTIMASI DELIVERY</p>
+              <p className="text-sm font-semibold text-gray-900">12 Sep 2024</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <BottomNav />
+    </div>
+  );
+};
+
+export default DetailSPK;

src/pages/FollowUp.js

+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import BottomNav from '../components/BottomNav';
+
+const FollowUp = () => {
+  const navigate = useNavigate();
+  const [formData, setFormData] = useState({
+    tanggalWaktu: '',
+    hasilFollowUp: 'Tertarik',
+    catatanAktivitas: ''
+  });
+
+  const riwayatInteraksi = [
+    {
+      type: 'TELEPON KELUAR',
+      typeColor: 'bg-blue-100 text-blue-700',
+      date: '12 Okt, 14:20',
+      title: 'Hasil: Tanya Harga',
+      description: 'Menanyakan diskon akhir tahun untuk unit warna hitam. Belum bisa janji temu minggu ini.'
+    },
+    {
+      type: 'WHATSAPP',
+      typeColor: 'bg-green-100 text-green-700',
+      date: '10 Okt, 09:15',
+      title: 'Hasil: Tertarik',
+      description: 'Mengirimkan brosur digital. Respon sangat positif terhadap fitur keamanan baru.'
+    }
+  ];
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log('Follow up data:', formData);
+    navigate('/detail-aktivitas');
+  };
+
+  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="w-10 h-10 bg-slate-800 rounded-full flex items-center justify-center text-white">
+              <svg className="w-5 h-5" 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-lg font-bold text-gray-900">Input Aktivitas</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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto pb-20">
+        <div className="p-4 space-y-4">
+          {/* Customer Info */}
+          <div className="bg-blue-50 rounded-2xl p-4">
+            <div className="flex items-center gap-3">
+              <div className="w-12 h-12 bg-blue-200 rounded-full flex items-center justify-center">
+                <svg className="w-6 h-6 text-blue-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>
+              </div>
+              <div>
+                <p className="text-xs text-gray-600 mb-1">SEDANG FOLLOW -UP</p>
+                <h3 className="font-bold text-gray-900">Budi Santoso</h3>
+                <p className="text-sm text-gray-600">Minat: Su V Premium u-100</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Form */}
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {/* Tanggal & Waktu */}
+            <div>
+              <label className="block text-sm font-semibold text-gray-700 mb-2">
+                Tanggal & u aktu
+              </label>
+              <input
+                type="datetime-local"
+                value={formData.tanggalWaktu}
+                onChange={(e) => setFormData({...formData, tanggalWaktu: e.target.value})}
+                placeholder="mm/dd/yyyy, --:-- --"
+                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>
+
+            {/* Hasil Follow-up */}
+            <div>
+              <label className="block text-sm font-semibold text-gray-700 mb-2">
+                Hasil Follow-up
+              </label>
+              <select
+                value={formData.hasilFollowUp}
+                onChange={(e) => setFormData({...formData, hasilFollowUp: e.target.value})}
+                className="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-gray-900 appearance-none focus:outline-none focus:ring-2 focus:ring-slate-800 focus:border-transparent"
+              >
+                <option value="Tertarik">Tertarik</option>
+                <option value="Sangat Tertarik">Sangat Tertarik</option>
+                <option value="Perlu Waktu">Perlu Waktu</option>
+                <option value="Tidak Tertarik">Tidak Tertarik</option>
+                <option value="Tidak Terjangkau">Tidak Terjangkau</option>
+              </select>
+            </div>
+
+            {/* Catatan Aktivitas */}
+            <div>
+              <label className="block text-sm font-semibold text-gray-700 mb-2">
+                Catatan Aktivitas
+              </label>
+              <textarea
+                value={formData.catatanAktivitas}
+                onChange={(e) => setFormData({...formData, catatanAktivitas: e.target.value})}
+                placeholder="Masukkan detail percakapan atau langkah selanjutnya..."
+                rows="5"
+                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 hover:bg-slate-700 transition-colors"
+            >
+              Simpan Aktivitas
+            </button>
+          </form>
+
+          {/* Riwayat Interaksi */}
+          <div>
+            <h3 className="font-bold text-gray-900 mb-3">Riwayat Interaksi</h3>
+            <div className="space-y-3">
+              {riwayatInteraksi.map((item, index) => (
+                <div key={index} className="bg-white rounded-2xl p-4 shadow-sm">
+                  <div className="flex items-start justify-between mb-2">
+                    <span className={`${item.typeColor} text-xs px-3 py-1 rounded-full font-semibold`}>
+                      {item.type}
+                    </span>
+                    <span className="text-xs text-gray-500">{item.date}</span>
+                  </div>
+                  <h4 className="font-bold text-gray-900 mb-1">{item.title}</h4>
+                  <p className="text-sm text-gray-600">{item.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <BottomNav />
+    </div>
+  );
+};
+
+export default FollowUp;

src/pages/InputProspek.js

+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import BottomNav from '../components/BottomNav';
+
+const InputProspek = () => {
+  const navigate = useNavigate();
+  const [showSuccessModal, setShowSuccessModal] = useState(false);
+  const [formData, setFormData] = useState({
+    namaCustomer: '',
+    noHP: '',
+    unitDiminati: '',
+    sumberLead: [],
+    catatanTambahan: ''
+  });
+
+  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-100 text-green-700'
+    },
+    {
+      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-100 text-orange-700'
+    },
+    {
+      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-100 text-green-700'
+    }
+  ];
+
+  const sumberLeadOptions = [
+    { id: 'walk-in', label: 'Walk-in', icon: '🚶' },
+    { id: 'website', label: 'Website', icon: '🌐' },
+    { id: 'instagram', label: 'Instagram', icon: '📷' },
+    { id: 'referral', label: 'Referral', icon: '👥' }
+  ];
+
+  const handleSumberToggle = (id) => {
+    setFormData(prev => ({
+      ...prev,
+      sumberLead: prev.sumberLead.includes(id)
+        ? prev.sumberLead.filter(s => s !== id)
+        : [...prev.sumberLead, id]
+    }));
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log('Form data:', formData);
+    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 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>
+      
+      <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
+            />
+          </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>
+
+          {/* 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'
+                  }`}
+                >
+                  <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>
+                      </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>
+                    </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>
+              ))}
+            </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>
+              ))}
+            </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>
+
+          {/* 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>
+
+      <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 mx-4 animate-scale-in">
+            {/* Success Icon */}
+            <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>
+
+            {/* Title */}
+            <h2 className="text-2xl font-bold text-gray-900 text-center mb-3">
+              Lead Berhasil Disimpan
+            </h2>
+
+            {/* Description */}
+            <p className="text-sm text-gray-600 text-center mb-8">
+              Data prospek baru telah berhasil disimpan dan siap untuk proses tindak lanjut berikutnya.
+            </p>
+
+            {/* Buttons */}
+            <div className="space-y-3">
+              <button
+                onClick={() => navigate('/')}
+                className="w-full bg-slate-800 text-white py-4 rounded-xl font-semibold hover:bg-slate-700 transition-colors"
+              >
+                Kembali ke Beranda
+              </button>
+              <button
+                onClick={() => navigate('/prospek')}
+                className="w-full bg-white text-slate-800 py-4 rounded-xl font-semibold border-2 border-transparent hover:border-slate-800 transition-colors"
+              >
+                Lihat Daftar Prospek
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default InputProspek;

src/pages/KonfirmasiDeal.js

+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import BottomNav from '../components/BottomNav';
+
+const KonfirmasiDeal = () => {
+  const navigate = useNavigate();
+  const [metodePembayaran, setMetodePembayaran] = useState('cash');
+
+  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 justify-between 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="font-semibold text-gray-800">Konfirmasi Deal</span>
+        <button className="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center">
+          <span className="text-sm">👤</span>
+        </button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto pb-20">
+        <div className="p-4 space-y-4">
+        {/* Status Badge */}
+        <div className="bg-blue-50 rounded-xl p-3 flex items-center gap-3">
+          <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
+            <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+          <div>
+            <p className="text-xs text-blue-600 font-semibold">STATUS DEAL</p>
+            <p className="text-sm font-bold text-blue-900">Pending Review</p>
+          </div>
+        </div>
+
+        {/* Customer Info */}
+        <div className="bg-white rounded-xl p-4 shadow-sm">
+          <div className="flex items-center gap-2 mb-3">
+            <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+            </svg>
+            <span className="text-xs text-gray-500 font-semibold">KLIK</span>
+          </div>
+          <h3 className="text-sm text-gray-600 mb-1">Nama Customer</h3>
+          <p className="text-lg font-bold text-gray-900">Aditya Pramana</p>
+        </div>
+
+        {/* Unit Info */}
+        <div className="bg-slate-800 rounded-xl p-4 text-white">
+          <div className="flex items-center gap-2 mb-2">
+            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/>
+            </svg>
+            <span className="text-xs text-gray-300">UNIT TERPILIH</span>
+          </div>
+          <h2 className="text-2xl font-bold mb-1">Hyundai IONIQ 5</h2>
+          <p className="text-sm text-gray-300 mb-4">Signature Long Range</p>
+          
+          <div className="border-t border-gray-600 pt-3">
+            <p className="text-xs text-gray-300 mb-1">HARGA FINAL</p>
+            <p className="text-3xl font-bold">Rp 1.250.000.000</p>
+          </div>
+        </div>
+
+        {/* Metode Pembayaran */}
+        <div className="bg-white rounded-xl p-4 shadow-sm">
+          <div className="flex items-center gap-2 mb-3">
+            <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="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="grid grid-cols-2 gap-3">
+            <button
+              onClick={() => setMetodePembayaran('cash')}
+              className={`p-4 rounded-xl border-2 transition-all ${
+                metodePembayaran === 'cash'
+                  ? 'bg-slate-800 border-slate-800 text-white'
+                  : 'bg-white border-gray-200 text-gray-700'
+              }`}
+            >
+              <div className="text-center">
+                <p className="font-bold mb-1">Cash</p>
+                <div className="flex items-center justify-center gap-1">
+                  <p className="text-sm">Pelunasan</p>
+                  {metodePembayaran === 'cash' && (
+                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                    </svg>
+                  )}
+                </div>
+                <p className="text-xs mt-1">Langsung</p>
+              </div>
+            </button>
+
+            <button
+              onClick={() => setMetodePembayaran('leasing')}
+              className={`p-4 rounded-xl border-2 transition-all ${
+                metodePembayaran === 'leasing'
+                  ? 'bg-slate-800 border-slate-800 text-white'
+                  : 'bg-white border-gray-200 text-gray-700'
+              }`}
+            >
+              <div className="text-center">
+                <p className="font-bold mb-1">Leasing</p>
+                <p className="text-sm">Cicilan</p>
+                <p className="text-xs mt-1">Pembiayaan</p>
+              </div>
+            </button>
+          </div>
+        </div>
+
+        {/* Upload Dokumen */}
+        <div className="bg-white rounded-xl p-4 shadow-sm">
+          <div className="flex items-center gap-2 mb-3">
+            <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>
+            <h3 className="font-bold text-gray-900">Upload Dokumen</h3>
+          </div>
+
+          <div className="space-y-3">
+            {/* KTP Upload */}
+            <div className="border-2 border-dashed border-gray-300 rounded-xl p-6 text-center">
+              <div className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3">
+                <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+                </svg>
+              </div>
+              <p className="font-semibold text-gray-900 mb-1">Kartu Identitas (KTP)</p>
+              <p className="text-xs text-gray-500 mb-3">JPEG atau PDF (Maks 5MB)</p>
+              <button className="bg-blue-50 text-blue-600 px-4 py-2 rounded-lg text-sm font-semibold">
+                Pilih File
+              </button>
+            </div>
+
+            {/* SPK Upload */}
+            <div className="border-2 border-dashed border-gray-300 rounded-xl p-6 text-center">
+              <div className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3">
+                <svg className="w-6 h-6 text-gray-400" 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>
+              <p className="font-semibold text-gray-900 mb-1">Surat Pemesanan (SPK)</p>
+              <p className="text-xs text-gray-500 mb-3">Tanda tangan sudah digital</p>
+              <button className="bg-blue-50 text-blue-600 px-4 py-2 rounded-lg text-sm font-semibold">
+                Pilih File
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Info Note */}
+        <div className="bg-blue-50 rounded-xl p-4 flex gap-3">
+          <div className="flex-shrink-0">
+            <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+          <p className="text-sm text-gray-700">
+            Pastikan semua data sudah sesuai dengan KTP dan SPK. Perubahan setelah konfirmasi memerlukan persetujuan Head of Sales.
+          </p>
+        </div>
+
+        {/* Submit Button */}
+        <button className="w-full bg-slate-800 text-white py-4 rounded-xl font-semibold flex items-center justify-center gap-2">
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          Konfirmasi Deal 🚀
+        </button>
+        </div>
+      </div>
+
+      <BottomNav />
+    </div>
+  );
+};
+
+export default KonfirmasiDeal;

src/pages/Login.js

+import React, { useState } from 'react';
+
+function Login() {
+  const [formData, setFormData] = useState({
+    username: '',
+    password: '',
+    rememberMe: false
+  });
+  const [showPassword, setShowPassword] = useState(false);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Simpan status login
+    localStorage.setItem('isLoggedIn', 'true');
+    if (formData.rememberMe) {
+      localStorage.setItem('rememberMe', 'true');
+    }
+    // Redirect ke halaman utama
+    window.location.href = '/';
+  };
+
+  const handleChange = (e) => {
+    const { name, value, type, checked } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: type === 'checkbox' ? checked : value
+    }));
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-100 flex items-center justify-center px-4">
+      <div className="w-full max-w-md">
+        {/* Logo dan Header */}
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center justify-center w-20 h-20 bg-slate-800 rounded-3xl mb-6">
+            <svg className="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/>
+            </svg>
+          </div>
+          <h1 className="text-3xl font-bold text-slate-900 mb-2">Masuk ke DMS</h1>
+          <p className="text-gray-500">Silakan masuk untuk mengelola penjualan Anda</p>
+        </div>
+
+        {/* Form Login */}
+        <div className="bg-white rounded-3xl shadow-sm p-8">
+          <form onSubmit={handleSubmit}>
+            {/* Input Username */}
+            <div className="mb-6">
+              <label className="block text-sm font-medium text-gray-500 mb-2">
+                NAMA PENGGUNA / EMAIL
+              </label>
+              <div className="relative">
+                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                  <svg className="w-5 h-5 text-gray-400" 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>
+                </div>
+                <input
+                  type="text"
+                  name="username"
+                  value={formData.username}
+                  onChange={handleChange}
+                  placeholder="Masukkan nama pengguna"
+                  className="w-full pl-12 pr-4 py-4 bg-gray-50 border-0 rounded-2xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-800"
+                  required
+                />
+              </div>
+            </div>
+
+            {/* Input Password */}
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-gray-500 mb-2">
+                KATA SANDI
+              </label>
+              <div className="relative">
+                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                  <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                  </svg>
+                </div>
+                <input
+                  type={showPassword ? "text" : "password"}
+                  name="password"
+                  value={formData.password}
+                  onChange={handleChange}
+                  placeholder="••••••••"
+                  className="w-full pl-12 pr-12 py-4 bg-gray-50 border-0 rounded-2xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-800"
+                  required
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute inset-y-0 right-0 pr-4 flex items-center"
+                >
+                  <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    {showPassword ? (
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                    ) : (
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+                    )}
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            {/* Remember Me & Forgot Password */}
+            <div className="flex items-center justify-between mb-6">
+              <label className="flex items-center">
+                <input
+                  type="checkbox"
+                  name="rememberMe"
+                  checked={formData.rememberMe}
+                  onChange={handleChange}
+                  className="w-5 h-5 rounded border-gray-300 text-slate-800 focus:ring-slate-800"
+                />
+                <span className="ml-2 text-sm text-gray-700">Ingat Saya</span>
+              </label>
+              <button type="button" className="text-sm font-semibold text-slate-900 hover:text-slate-700">
+                Lupa Kata Sandi?
+              </button>
+            </div>
+
+            {/* Submit Button */}
+            <button
+              type="submit"
+              className="w-full bg-slate-800 text-white py-4 rounded-2xl font-semibold hover:bg-slate-700 transition-colors flex items-center justify-center gap-2"
+            >
+              Masuk
+              <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>
+
+        {/* Footer */}
+        <div className="text-center mt-8">
+          <p className="text-gray-600">
+            Butuh bantuan?{' '}
+            <button className="font-semibold text-slate-900 hover:text-slate-700">
+              Hubungi Admin
+            </button>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Login;

src/pages/Penawaran.js

+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import Header from '../components/Header';
+import BottomNav from '../components/BottomNav';
+
+const Penawaran = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="flex flex-col h-screen bg-gray-50">
+      <Header />
+      
+      <div className="flex-1 overflow-y-auto pb-20">
+        <div className="p-4">
+        <div className="bg-white rounded-xl p-4 shadow-sm mb-4">
+          <div className="flex items-center gap-2 mb-4">
+            <span className="text-gray-500">← MENUNGGU / DISETUJUI / SELESAI</span>
+          </div>
+          
+          <h1 className="text-2xl font-bold mb-1">Finalisasi Transaksi</h1>
+          <div className="flex items-center gap-2 mb-4">
+            <div className="w-3 h-3 bg-green-500 rounded-full"></div>
+            <span className="text-sm font-semibold text-green-600">Status: Disetujui</span>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4 mb-4">
+            <div>
+              <p className="text-xs text-gray-500 mb-1">NAMA PELANGGAN</p>
+              <p className="font-bold">Alexander</p>
+              <p className="font-bold">Sterling</p>
+            </div>
+            <div>
+              <p className="text-xs text-gray-500 mb-1">ID TRANSAKSI</p>
+              <p className="font-semibold text-sm">#DMS-2024-</p>
+              <p className="font-semibold text-sm">8802</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Car Image */}
+        <div className="bg-white rounded-xl p-4 shadow-sm mb-4">
+          <div className="bg-gradient-to-br from-teal-400 to-teal-600 rounded-lg h-40 flex items-center justify-center mb-3">
+            <div className="text-white text-center">
+              <p className="text-lg font-bold">2024 Executive Sport</p>
+              <p className="text-sm">Sedan LX</p>
+            </div>
+          </div>
+          <p className="text-xs text-gray-500 mb-1">MODEL MOBIL</p>
+          <p className="font-bold">2024 Executive Sport</p>
+          <p className="font-bold">Sedan LX</p>
+        </div>
+
+        {/* Harga */}
+        <div className="bg-white rounded-xl p-4 shadow-sm mb-4">
+          <div className="grid grid-cols-2 gap-4 mb-4">
+            <div>
+              <p className="text-xs text-gray-500 mb-1">HARGA DASAR</p>
+              <p className="font-bold">Rp</p>
+              <p className="font-bold">806.250.000</p>
+            </div>
+            <div>
+              <p className="text-xs text-gray-500 mb-1">TAMBAHAN</p>
+              <p className="font-bold">Rp</p>
+              <p className="font-bold">28.750.000</p>
+            </div>
+          </div>
+          
+          <div className="bg-gray-50 rounded-lg p-3">
+            <p className="text-xs text-gray-500 mb-1">HARGA AKHIR</p>
+            <p className="text-2xl font-bold text-primary">Rp 835.000.000</p>
+          </div>
+        </div>
+
+        {/* Metode Pembayaran */}
+        <div className="bg-white rounded-xl p-4 shadow-sm mb-4">
+          <p className="text-xs text-gray-500 font-semibold mb-3">METODE PEMBAYARAN</p>
+          
+          <div className="space-y-3">
+            <div className="flex items-center justify-between p-3 border-2 border-primary rounded-lg bg-blue-50">
+              <div className="flex items-center gap-3">
+                <div className="w-5 h-5 rounded-full border-2 border-primary flex items-center justify-center">
+                  <div className="w-3 h-3 rounded-full bg-primary"></div>
+                </div>
+                <div>
+                  <p className="font-semibold">Tunai / Langsung</p>
+                  <p className="text-xs text-gray-600">Pelunasan dalam 48 jam</p>
+                </div>
+              </div>
+              <svg className="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
+              </svg>
+            </div>
+
+            <div className="flex items-center justify-between p-3 border-2 border-gray-200 rounded-lg">
+              <div className="flex items-center gap-3">
+                <div className="w-5 h-5 rounded-full border-2 border-gray-300"></div>
+                <div>
+                  <p className="font-semibold">Skema Kredit/Leasing</p>
+                  <p className="text-xs text-gray-600">Tenor 36 Bulan, Bunga 3.5%</p>
+                </div>
+              </div>
+              <svg className="w-6 h-6 text-gray-400" 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>
+            </div>
+          </div>
+        </div>
+
+        {/* Action Button */}
+        <div className="bg-primary rounded-xl p-4 text-white mb-4">
+          <p className="text-sm font-semibold mb-2">LANGKAH SELANJUTNYA</p>
+          <p className="text-lg font-bold mb-3">Buat Surat Perjanjian Jual Beli dan</p>
+          <p className="text-lg font-bold mb-4">Tanda Tangan!</p>
+          
+          <button className="w-full bg-white text-primary font-semibold py-3 rounded-lg flex items-center justify-center gap-2">
+            Konfirmasi Transaksi
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Upload Dokumen */}
+        <div className="bg-white rounded-xl p-4 shadow-sm">
+          <div className="flex justify-between items-center mb-3">
+            <p className="text-xs text-gray-500 font-semibold">UNDOAH DOKUMEN (KTP, SURAT PERJANJIAN)</p>
+            <p className="text-xs text-gray-500">2 dari 2</p>
+            <p className="text-xs text-gray-500">Terupload</p>
+          </div>
+
+          <div className="space-y-3">
+            <div className="flex items-center gap-3 p-3 bg-blue-50 rounded-lg border border-blue-200">
+              <div className="w-10 h-10 bg-blue-100 rounded flex items-center justify-center">
+                <svg className="w-6 h-6 text-blue-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">
+                <p className="font-semibold text-sm">KTP Pelanggan</p>
+                <p className="text-xs text-gray-600">Menunggu verifikasi (872.pdf)</p>
+              </div>
+              <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+              </svg>
+            </div>
+
+            <div className="flex items-center gap-3 p-3 bg-blue-50 rounded-lg border border-blue-200">
+              <div className="w-10 h-10 bg-blue-100 rounded flex items-center justify-center">
+                <svg className="w-6 h-6 text-blue-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">
+                <p className="font-semibold text-sm">Surat Perjanjian</p>
+                <p className="text-xs text-gray-600">Menunggu unggahan tanda</p>
+                <p className="text-xs text-gray-600">tangan</p>
+              </div>
+              <svg className="w-5 h-5 text-gray-400" 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>
+        </div>
+        </div>
+      </div>
+
+      {/* Ask Dora Button */}
+      <button 
+        onClick={() => navigate('/ask-dora')}
+        className="fixed bottom-24 left-4 bg-slate-800 text-white px-4 py-3 rounded-full shadow-lg flex items-center gap-2 z-10"
+      >
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
+        </svg>
+        <span className="text-sm font-semibold">ASK DORA</span>
+      </button>
+
+      <BottomNav />
+    </div>
+  );
+};
+
+export default Penawaran;

src/pages/Profil.js

+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import BottomNav from '../components/BottomNav';
+
+const Profil = () => {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('rememberMe');
+    navigate('/login');
+    window.location.reload();
+  };
+
+  const menuItems = [
+    {
+      icon: (
+        <svg className="w-6 h-6" 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>
+      ),
+      title: 'Informasi Pribadi',
+      bgColor: 'bg-blue-100'
+    },
+    {
+      icon: (
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+        </svg>
+      ),
+      title: 'Target Penjualan Saya',
+      bgColor: 'bg-green-100'
+    },
+    {
+      icon: (
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+        </svg>
+      ),
+      title: 'Riwayat Transaksi',
+      bgColor: 'bg-purple-100'
+    },
+    {
+      icon: (
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
+        </svg>
+      ),
+      title: 'Sertifikasi & Pelatihan',
+      bgColor: 'bg-yellow-100'
+    },
+    {
+      icon: (
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+        </svg>
+      ),
+      title: 'Pengaturan Akun',
+      bgColor: 'bg-gray-100'
+    },
+    {
+      icon: (
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+      ),
+      title: 'Pusat Bantuan',
+      bgColor: 'bg-teal-100'
+    }
+  ];
+
+  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 justify-between shadow-sm">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center">
+            <span className="text-sm">👤</span>
+          </div>
+          <span className="font-semibold text-gray-800">DMS Control</span>
+        </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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+          </svg>
+        </button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto pb-20">
+        <div className="p-4 space-y-4">
+        {/* Profile Card */}
+        <div className="bg-white rounded-2xl p-6 shadow-sm text-center">
+          <div className="relative inline-block mb-4">
+            <div className="w-24 h-24 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white text-4xl mx-auto">
+              👨‍💼
+            </div>
+            <div className="absolute bottom-0 right-0 w-6 h-6 bg-green-500 rounded-full border-4 border-white"></div>
+          </div>
+          
+          <h2 className="text-2xl font-bold text-gray-900 mb-1">Rian Wijaya</h2>
+          <p className="text-gray-600 mb-3">Senior Sales Consultant</p>
+          
+          <div className="flex items-center justify-center gap-2 mb-4">
+            <div className="flex items-center gap-1 text-sm text-gray-600">
+              <svg className="w-4 h-4" 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>
+              <span>Jakarta Pusat</span>
+            </div>
+            <div className="inline-block bg-yellow-100 text-yellow-700 text-xs px-3 py-1 rounded-full font-semibold">
+              ⭐ Top Performance
+            </div>
+          </div>
+
+          {/* Stats */}
+          <div className="grid grid-cols-3 gap-4 pt-4 border-t">
+            <div>
+              <p className="text-2xl font-bold text-gray-900">145</p>
+              <p className="text-xs text-gray-600">TOTAL UNIT TERJUAL</p>
+            </div>
+            <div>
+              <p className="text-2xl font-bold text-gray-900">28</p>
+              <p className="text-xs text-gray-600">PROSPEK AKTIF</p>
+            </div>
+            <div>
+              <p className="text-2xl font-bold text-gray-900">4.9⭐</p>
+              <p className="text-xs text-gray-600">RATING PELANGGAN</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Menu Section */}
+        <div>
+          <h3 className="text-sm font-bold text-gray-900 mb-3">PENGATURAN & INFORMASI</h3>
+          <div className="space-y-2">
+            {menuItems.map((item, index) => (
+              <button
+                key={index}
+                className="w-full bg-white rounded-xl p-4 shadow-sm flex items-center gap-3 hover:bg-gray-50 transition-colors"
+              >
+                <div className={`w-10 h-10 ${item.bgColor} rounded-xl flex items-center justify-center text-gray-700`}>
+                  {item.icon}
+                </div>
+                <span className="flex-1 text-left font-semibold text-gray-900">{item.title}</span>
+                <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                </svg>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Logout Button */}
+        <button
+          onClick={handleLogout}
+          className="w-full bg-red-50 text-red-600 py-4 rounded-xl font-semibold flex items-center justify-center gap-2"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+          </svg>
+          Keluar dari Akun
+        </button>
+
+        {/* Version */}
+        <p className="text-center text-xs text-gray-500 pt-2">
+          VENTURA AUTOMOTIVE DMS V4.2.0
+        </p>
+        </div>
+      </div>
+
+      <BottomNav />
+    </div>
+  );
+};
+
+export default Profil;

src/pages/Prospek.js

+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import BottomNav from '../components/BottomNav';
+
+const Prospek = () => {
+  const navigate = useNavigate();
+  const [activeTab, setActiveTab] = useState('baru');
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const prospekList = [
+    {
+      id: 1,
+      initials: 'BP',
+      initialsColor: 'bg-blue-200 text-blue-800',
+      name: 'Bambang Pamungkas',
+      subtitle: 'Ditambahkan hari ini',
+      model: 'Chery Tiggo 8 Pro',
+      lastActivity: 'Aktivitas terakhir: 2 jam lalu',
+      status: 'HOT',
+      statusColor: 'bg-green-100 text-green-700',
+      type: 'baru'
+    },
+    {
+      id: 2,
+      initials: 'AS',
+      initialsColor: 'bg-blue-200 text-blue-800',
+      name: 'Anisa Salim',
+      subtitle: 'Prospek dari IMS',
+      model: 'Omoda 5 GT',
+      lastActivity: 'Aktivitas terakhir: 5 jam lalu',
+      status: 'WARM',
+      statusColor: 'bg-yellow-100 text-yellow-700',
+      type: 'tidak-lanjut'
+    },
+    {
+      id: 3,
+      initials: 'RW',
+      initialsColor: 'bg-blue-200 text-blue-800',
+      name: 'Rian Wijaya',
+      subtitle: 'Website Inquiry',
+      model: 'Tiggo 7 Pro',
+      lastActivity: 'Aktivitas terakhir: 1 hari lalu',
+      status: 'BARU',
+      statusColor: 'bg-blue-100 text-blue-700',
+      type: 'baru'
+    }
+  ];
+
+  const filteredProspek = prospekList.filter(p => {
+    const matchesSearch = p.name.toLowerCase().includes(searchQuery.toLowerCase()) || 
+                         p.model.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesTab = activeTab === 'baru' ? true : p.type === activeTab;
+    return matchesSearch && matchesTab;
+  });
+
+  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 mb-4">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-teal-700 rounded-full flex items-center justify-center text-white font-bold">
+              D
+            </div>
+            <h1 className="text-lg font-bold text-gray-900">DMS AutoPRO</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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+            </svg>
+          </button>
+        </div>
+
+        <h2 className="text-2xl font-bold text-gray-900 mb-4">Daftar Leads</h2>
+
+        {/* Search Bar */}
+        <div className="relative mb-4">
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Cari nama atau model mobil..."
+            className="w-full pl-10 pr-4 py-3 bg-gray-100 border-0 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-800"
+          />
+          <svg className="w-5 h-5 text-gray-400 absolute left-3 top-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex gap-2 overflow-x-auto pb-2">
+          {[
+            { id: 'baru', label: 'Baru' },
+            { id: 'tidak-lanjut', label: 'Tindak Lanjut' },
+            { id: 'hot', label: 'Hot' },
+            { id: 'cold', label: 'Cold' }
+          ].map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`px-5 py-2 rounded-full font-semibold text-sm whitespace-nowrap transition-colors ${
+                activeTab === tab.id
+                  ? 'bg-slate-800 text-white'
+                  : 'bg-gray-100 text-gray-700'
+              }`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+      </div>
+      
+      <div className="flex-1 overflow-y-auto pb-20">
+        <div className="p-4">
+        {/* Prospek List */}
+        <div className="space-y-3">
+          {filteredProspek.map((prospek) => (
+            <div 
+              key={prospek.id} 
+              onClick={() => navigate('/detail-aktivitas')}
+              className="bg-white rounded-2xl p-4 shadow-sm cursor-pointer"
+            >
+              <div className="flex items-start gap-3 mb-3">
+                <div className={`w-14 h-14 ${prospek.initialsColor} rounded-2xl flex items-center justify-center text-xl font-bold flex-shrink-0`}>
+                  {prospek.initials}
+                </div>
+                <div className="flex-1">
+                  <div className="flex items-center gap-2 mb-1">
+                    <h3 className="font-bold text-gray-900">{prospek.name}</h3>
+                    <span className={`${prospek.statusColor} text-xs px-2 py-0.5 rounded font-semibold`}>
+                      {prospek.status}
+                    </span>
+                  </div>
+                  <p className="text-xs text-gray-500 mb-2">{prospek.subtitle}</p>
+                  
+                  {/* Model Info */}
+                  <div className="bg-gray-50 rounded-lg p-2 mb-2 flex items-center justify-between">
+                    <div>
+                      <p className="text-xs text-gray-500 mb-0.5">MOBIL MINAT</p>
+                      <p className="text-sm font-bold text-gray-900">{prospek.model}</p>
+                    </div>
+                    <svg className="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
+                      <path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/>
+                    </svg>
+                  </div>
+
+                  {/* Last Activity */}
+                  <div className="flex items-center gap-1 text-xs text-gray-500">
+                    <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    <span>{prospek.lastActivity}</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Action Button */}
+              <button 
+                onClick={(e) => {
+                  e.stopPropagation();
+                  navigate('/detail-aktivitas');
+                }}
+                className="w-full bg-slate-800 text-white py-3 rounded-xl text-sm font-semibold"
+              >
+                Detail
+              </button>
+            </div>
+          ))}
+        </div>
+
+        {filteredProspek.length === 0 && (
+          <div className="text-center py-12">
+            <p className="text-gray-500">Tidak ada prospek ditemukan</p>
+          </div>
+        )}
+
+        {/* Ask Dora Button */}
+        <button 
+          onClick={() => navigate('/ask-dora')}
+          className="fixed bottom-24 right-4 bg-slate-800 text-white p-4 rounded-full shadow-lg flex flex-col items-center gap-1 z-10"
+        >
+          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
+          </svg>
+        </button>
+        </div>
+      </div>
+
+      <BottomNav />
+    </div>
+  );
+};
+
+export default Prospek;

src/pages/Tracking.js

+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import BottomNav from '../components/BottomNav';
+
+const Tracking = () => {
+  const navigate = useNavigate();
+  const [activeTab, setActiveTab] = useState('semua');
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const orders = [
+    {
+      id: 'SPK-2023-09012',
+      unit: 'SUV Premium X-Series',
+      status: 'UNIT READY',
+      statusColor: 'bg-blue-100 text-blue-700',
+      progress: 85,
+      progressLabel: 'Persiapan Unit Akhir',
+      lastUpdate: 'Est. 2 Hari Lagi',
+      action: 'DETAIL MONITORING',
+      image: '/images/suv-premium.png',
+      category: 'unit-ready'
+    },
+    {
+      id: 'SPK-2023-09045',
+      unit: 'Volt E-Sedan 500',
+      status: 'PROSES',
+      statusColor: 'bg-gray-100 text-gray-700',
+      progress: 40,
+      progressLabel: 'Pemeriksaan Kelayakan Jalan',
+      lastUpdate: 'Est. 5 Hari Lagi',
+      action: 'DETAIL MONITORING',
+      image: '/images/volt-sedan.png',
+      category: 'proses'
+    },
+    {
+      id: 'SPK-2023-08991',
+      unit: 'Grand Tourer V-8',
+      status: 'PENGIRIMAN',
+      statusColor: 'bg-blue-500 text-white',
+      progress: 95,
+      progressLabel: 'Menuju Lokasi Konsumen',
+      lastUpdate: 'Dalam Perjalanan',
+      action: 'DETAIL MONITORING',
+      image: '/images/grand-tourer.png',
+      category: 'unit-ready'
+    }
+  ];
+
+  const filteredOrders = orders.filter(order => {
+    const matchesSearch = order.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                         order.unit.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesTab = activeTab === 'semua' || 
+                      (activeTab === 'proses' && order.category === 'proses') ||
+                      (activeTab === 'unit-ready' && order.category === 'unit-ready');
+    return matchesSearch && matchesTab;
+  });
+
+  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 mb-4">
+          <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="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+          <h1 className="text-lg font-bold text-gray-900">DMS AutoPRO</h1>
+          <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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto pb-20">
+        <div className="p-4 space-y-4">
+          {/* Title */}
+          <h2 className="text-2xl font-bold text-gray-900">Monitoring Pesanan</h2>
+
+          {/* Search Bar */}
+          <div className="relative">
+            <input
+              type="text"
+              placeholder="Cari ID Pesanan atau Unit..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full pl-10 pr-4 py-3 bg-gray-100 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-slate-800"
+            />
+            <svg className="w-5 h-5 text-gray-400 absolute left-3 top-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+          </div>
+
+          {/* Tabs */}
+          <div className="flex gap-2">
+            <button
+              onClick={() => setActiveTab('semua')}
+              className={`px-6 py-2 rounded-full text-sm font-semibold transition-colors ${
+                activeTab === 'semua'
+                  ? 'bg-slate-800 text-white'
+                  : 'bg-gray-100 text-gray-600'
+              }`}
+            >
+              Semua
+            </button>
+            <button
+              onClick={() => setActiveTab('proses')}
+              className={`px-6 py-2 rounded-full text-sm font-semibold transition-colors ${
+                activeTab === 'proses'
+                  ? 'bg-slate-800 text-white'
+                  : 'bg-gray-100 text-gray-600'
+              }`}
+            >
+              Proses
+            </button>
+            <button
+              onClick={() => setActiveTab('unit-ready')}
+              className={`px-6 py-2 rounded-full text-sm font-semibold transition-colors ${
+                activeTab === 'unit-ready'
+                  ? 'bg-slate-800 text-white'
+                  : 'bg-gray-100 text-gray-600'
+              }`}
+            >
+              Unit Ready
+            </button>
+          </div>
+
+          {/* Order Cards */}
+          <div className="space-y-4">
+            {filteredOrders.map((order) => (
+              <div key={order.id} className="bg-white rounded-2xl p-4 shadow-sm">
+                <div className="flex gap-3 mb-3">
+                  <div className="w-16 h-16 bg-gray-800 rounded-xl flex items-center justify-center overflow-hidden flex-shrink-0">
+                    <svg className="w-10 h-10 text-gray-400" 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>
+                  </div>
+                  <div className="flex-1">
+                    <div className="flex items-start justify-between mb-1">
+                      <p className="text-xs text-gray-500 font-medium">{order.id}</p>
+                      <span className={`text-xs px-3 py-1 rounded-full font-semibold ${order.statusColor}`}>
+                        {order.status}
+                      </span>
+                    </div>
+                    <h3 className="text-base font-bold text-gray-900">{order.unit}</h3>
+                  </div>
+                </div>
+
+                {/* Progress */}
+                <div className="mb-3">
+                  <div className="flex justify-between items-center mb-2">
+                    <p className="text-sm text-gray-700">{order.progressLabel}</p>
+                    <p className="text-sm font-bold text-blue-600">{order.progress}%</p>
+                  </div>
+                  <div className="w-full bg-gray-200 rounded-full h-2">
+                    <div
+                      className="bg-slate-800 h-2 rounded-full transition-all"
+                      style={{ width: `${order.progress}%` }}
+                    ></div>
+                  </div>
+                </div>
+
+                {/* Footer */}
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-1 text-gray-500">
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    <span className="text-xs">{order.lastUpdate}</span>
+                  </div>
+                  <button 
+                    onClick={() => navigate('/detail-monitoring')}
+                    className="text-blue-600 text-xs font-semibold flex items-center gap-1 hover:text-blue-700 transition-colors"
+                  >
+                    {order.action}
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <BottomNav />
+    </div>
+  );
+};
+
+export default Tracking;

src/pages/Transaksi.js

+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import Header from '../components/Header';
+import BottomNav from '../components/BottomNav';
+
+const Transaksi = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="flex flex-col h-screen bg-gray-50">
+      <Header />
+      
+      <div className="flex-1 overflow-y-auto pb-20">
+        <div className="p-4">
+        <h1 className="text-2xl font-bold mb-1">Transaksi</h1>
+        <p className="text-gray-600 mb-6">Riwayat dan status transaksi penjualan</p>
+
+        <div className="space-y-4">
+          {/* Transaksi Card 1 */}
+          <div className="bg-white rounded-xl p-4 shadow-sm border-l-4 border-green-500">
+            <div className="flex justify-between items-start mb-3">
+              <div>
+                <div className="flex items-center gap-2 mb-1">
+                  <h3 className="font-bold">Alexander Sterling</h3>
+                  <span className="bg-green-100 text-green-700 text-xs px-2 py-1 rounded-full">
+                    SELESAI
+                  </span>
+                </div>
+                <p className="text-sm text-gray-600">2024 Executive Sport Sedan LX</p>
+                <p className="text-xs text-gray-500 mt-1">#DMS-2024-8802</p>
+              </div>
+            </div>
+            <div className="flex justify-between items-center pt-3 border-t">
+              <div>
+                <p className="text-xs text-gray-500">Total</p>
+                <p className="font-bold text-primary">Rp 835.000.000</p>
+              </div>
+              <button className="text-primary font-semibold text-sm">
+                Lihat Detail →
+              </button>
+            </div>
+          </div>
+
+          {/* Transaksi Card 2 */}
+          <div className="bg-white rounded-xl p-4 shadow-sm border-l-4 border-blue-500">
+            <div className="flex justify-between items-start mb-3">
+              <div>
+                <div className="flex items-center gap-2 mb-1">
+                  <h3 className="font-bold">Sarah Jenkins</h3>
+                  <span className="bg-blue-100 text-blue-700 text-xs px-2 py-1 rounded-full">
+                    PROSES
+                  </span>
+                </div>
+                <p className="text-sm text-gray-600">GT Hybrid Sedan</p>
+                <p className="text-xs text-gray-500 mt-1">#DMS-2024-8801</p>
+              </div>
+            </div>
+            <div className="flex justify-between items-center pt-3 border-t">
+              <div>
+                <p className="text-xs text-gray-500">Total</p>
+                <p className="font-bold text-primary">Rp 720.000.000</p>
+              </div>
+              <button className="text-primary font-semibold text-sm">
+                Lihat Detail →
+              </button>
+            </div>
+          </div>
+
+          {/* Transaksi Card 3 */}
+          <div className="bg-white rounded-xl p-4 shadow-sm border-l-4 border-orange-500">
+            <div className="flex justify-between items-start mb-3">
+              <div>
+                <div className="flex items-center gap-2 mb-1">
+                  <h3 className="font-bold">Marcus Vane</h3>
+                  <span className="bg-orange-100 text-orange-700 text-xs px-2 py-1 rounded-full">
+                    MENUNGGU
+                  </span>
+                </div>
+                <p className="text-sm text-gray-600">Roadster Z - Carbon Pack</p>
+                <p className="text-xs text-gray-500 mt-1">#DMS-2024-8800</p>
+              </div>
+            </div>
+            <div className="flex justify-between items-center pt-3 border-t">
+              <div>
+                <p className="text-xs text-gray-500">Total</p>
+                <p className="font-bold text-primary">Rp 950.000.000</p>
+              </div>
+              <button className="text-primary font-semibold text-sm">
+                Lihat Detail →
+              </button>
+            </div>
+          </div>
+        </div>
+        </div>
+      </div>
+
+      {/* Ask Dora Button */}
+      <button 
+        onClick={() => navigate('/ask-dora')}
+        className="fixed bottom-24 left-4 bg-slate-800 text-white px-4 py-3 rounded-full shadow-lg flex items-center gap-2 z-10"
+      >
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
+        </svg>
+        <span className="text-sm font-semibold">ASK DORA</span>
+      </button>
+
+      <BottomNav />
+    </div>
+  );
+};
+
+export default Transaksi;

src/reportWebVitals.js

+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

src/setupTests.js

+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

tailwind.config.js

+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: '#003D6B',
+        secondary: '#0066B3',
+      },
+    },
+  },
+  plugins: [],
+}