API upload image

Add:
- utils/pickImage.ts
- service/upload-service.ts
- constants/directory-id.ts
- constants/base-url-api-strorage.ts

### No Issue

.gitignore

@@ -38,3 +38,5 @@ yarn-error.*
 
 app-example
 .qodo
+
+.env

android/.gitignore

@@ -0,0 +1,16 @@
+# OSX
+#
+.DS_Store
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+
+# Bundle artifacts
+*.jsbundle

android/app/build.gradle

@@ -0,0 +1,177 @@
+apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
+apply plugin: "com.facebook.react"
+
+def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
+
+/**
+ * This is the configuration block to customize your React Native Android app.
+ * By default you don't need to apply any configuration, just uncomment the lines you need.
+ */
+react {
+    entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
+    reactNativeDir = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+    hermesCommand = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsolutePath() + "/sdks/hermesc/%OS-BIN%/hermesc"
+    codegenDir = new File(["node", "--print", "require.resolve('@react-native/codegen/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+
+    enableBundleCompression = (findProperty('android.enableBundleCompression') ?: false).toBoolean()
+    // Use Expo CLI to bundle the app, this ensures the Metro config
+    // works correctly with Expo projects.
+    cliFile = new File(["node", "--print", "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"].execute(null, rootDir).text.trim())
+    bundleCommand = "export:embed"
+
+    /* Folders */
+     //   The root of your project, i.e. where "package.json" lives. Default is '../..'
+    // root = file("../../")
+    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
+    // reactNativeDir = file("../../node_modules/react-native")
+    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
+    // codegenDir = file("../../node_modules/@react-native/codegen")
+
+    /* Variants */
+    //   The list of variants to that are debuggable. For those we're going to
+    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
+    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
+    // debuggableVariants = ["liteDebug", "prodDebug"]
+
+    /* Bundling */
+    //   A list containing the node command and its flags. Default is just 'node'.
+    // nodeExecutableAndArgs = ["node"]
+
+    //
+    //   The path to the CLI configuration file. Default is empty.
+    // bundleConfig = file(../rn-cli.config.js)
+    //
+    //   The name of the generated asset file containing your JS bundle
+    // bundleAssetName = "MyApplication.android.bundle"
+    //
+    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
+    // entryFile = file("../js/MyApplication.android.js")
+    //
+    //   A list of extra flags to pass to the 'bundle' commands.
+    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
+    // extraPackagerArgs = []
+
+    /* Hermes Commands */
+    //   The hermes compiler command to run. By default it is 'hermesc'
+    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
+    //
+    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
+    // hermesFlags = ["-O", "-output-source-map"]
+
+    /* Autolinking */
+    autolinkLibrariesWithApp()
+}
+
+/**
+ * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
+ */
+def enableProguardInReleaseBuilds = (findProperty('android.enableProguardInReleaseBuilds') ?: false).toBoolean()
+
+/**
+ * The preferred build flavor of JavaScriptCore (JSC)
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US. Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
+
+android {
+    ndkVersion rootProject.ext.ndkVersion
+
+    buildToolsVersion rootProject.ext.buildToolsVersion
+    compileSdk rootProject.ext.compileSdkVersion
+
+    namespace 'com.bip.hipmimobileapp'
+    defaultConfig {
+        applicationId 'com.bip.hipmimobileapp'
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0.0"
+    }
+    signingConfigs {
+        debug {
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
+        }
+    }
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
+            shrinkResources (findProperty('android.enableShrinkResourcesInReleaseBuilds')?.toBoolean() ?: false)
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+            crunchPngs (findProperty('android.enablePngCrunchInReleaseBuilds')?.toBoolean() ?: true)
+        }
+    }
+    packagingOptions {
+        jniLibs {
+            useLegacyPackaging (findProperty('expo.useLegacyPackaging')?.toBoolean() ?: false)
+        }
+    }
+    androidResources {
+        ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:!CVS:!thumbs.db:!picasa.ini:!*~'
+    }
+}
+
+// Apply static values from `gradle.properties` to the `android.packagingOptions`
+// Accepts values in comma delimited lists, example:
+// android.packagingOptions.pickFirsts=/LICENSE,**/picasa.ini
+["pickFirsts", "excludes", "merges", "doNotStrip"].each { prop ->
+    // Split option: 'foo,bar' -> ['foo', 'bar']
+    def options = (findProperty("android.packagingOptions.$prop") ?: "").split(",");
+    // Trim all elements in place.
+    for (i in 0..<options.size()) options[i] = options[i].trim();
+    // `[] - ""` is essentially `[""].filter(Boolean)` removing all empty strings.
+    options -= ""
+
+    if (options.length > 0) {
+        println "android.packagingOptions.$prop += $options ($options.length)"
+        // Ex: android.packagingOptions.pickFirsts += '**/SCCS/**'
+        options.each {
+            android.packagingOptions[prop] += it
+        }
+    }
+}
+
+dependencies {
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
+
+    def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
+    def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
+    def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";
+
+    if (isGifEnabled) {
+        // For animated gif support
+        implementation("com.facebook.fresco:animated-gif:${expoLibs.versions.fresco.get()}")
+    }
+
+    if (isWebpEnabled) {
+        // For webp support
+        implementation("com.facebook.fresco:webpsupport:${expoLibs.versions.fresco.get()}")
+        if (isWebpAnimatedEnabled) {
+            // Animated webp support
+            implementation("com.facebook.fresco:animated-webp:${expoLibs.versions.fresco.get()}")
+        }
+    }
+
+    if (hermesEnabled.toBoolean()) {
+        implementation("com.facebook.react:hermes-android")
+    } else {
+        implementation jscFlavor
+    }
+}

android/app/proguard-rules.pro

@@ -0,0 +1,14 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# react-native-reanimated
+-keep class com.swmansion.reanimated.** { *; }
+-keep class com.facebook.react.turbomodule.** { *; }
+
+# Add any project specific keep options here:

android/app/src/debug/AndroidManifest.xml

@@ -0,0 +1,7 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
+</manifest>

android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,34 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
+  <uses-permission android:name="android.permission.CAMERA"/>
+  <uses-permission android:name="android.permission.INTERNET"/>
+  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+  <uses-permission android:name="android.permission.RECORD_AUDIO"/>
+  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+  <uses-permission android:name="android.permission.VIBRATE"/>
+  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+  <queries>
+    <intent>
+      <action android:name="android.intent.action.VIEW"/>
+      <category android:name="android.intent.category.BROWSABLE"/>
+      <data android:scheme="https"/>
+    </intent>
+  </queries>
+  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:supportsRtl="true">
+    <meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
+    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
+    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
+    <activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="portrait">
+      <intent-filter>
+        <action android:name="android.intent.action.MAIN"/>
+        <category android:name="android.intent.category.LAUNCHER"/>
+      </intent-filter>
+      <intent-filter>
+        <action android:name="android.intent.action.VIEW"/>
+        <category android:name="android.intent.category.DEFAULT"/>
+        <category android:name="android.intent.category.BROWSABLE"/>
+        <data android:scheme="hipmimobile"/>
+        <data android:scheme="exp+hipmi-mobile"/>
+      </intent-filter>
+    </activity>
+  </application>
+</manifest>

android/app/src/main/java/com/bip/hipmimobileapp/MainActivity.kt

@@ -0,0 +1,65 @@
+package com.bip.hipmimobileapp
+import expo.modules.splashscreen.SplashScreenManager
+
+import android.os.Build
+import android.os.Bundle
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+
+import expo.modules.ReactActivityDelegateWrapper
+
+class MainActivity : ReactActivity() {
+  override fun onCreate(savedInstanceState: Bundle?) {
+    // Set the theme to AppTheme BEFORE onCreate to support
+    // coloring the background, status bar, and navigation bar.
+    // This is required for expo-splash-screen.
+    // setTheme(R.style.AppTheme);
+    // @generated begin expo-splashscreen - expo prebuild (DO NOT MODIFY) sync-f3ff59a738c56c9a6119210cb55f0b613eb8b6af
+    SplashScreenManager.registerOnActivity(this)
+    // @generated end expo-splashscreen
+    super.onCreate(null)
+  }
+
+  /**
+   * Returns the name of the main component registered from JavaScript. This is used to schedule
+   * rendering of the component.
+   */
+  override fun getMainComponentName(): String = "main"
+
+  /**
+   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
+   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
+   */
+  override fun createReactActivityDelegate(): ReactActivityDelegate {
+    return ReactActivityDelegateWrapper(
+          this,
+          BuildConfig.IS_NEW_ARCHITECTURE_ENABLED,
+          object : DefaultReactActivityDelegate(
+              this,
+              mainComponentName,
+              fabricEnabled
+          ){})
+  }
+
+  /**
+    * Align the back button behavior with Android S
+    * where moving root activities to background instead of finishing activities.
+    * @see <a href="https://developer.android.com/reference/android/app/Activity#onBackPressed()">onBackPressed</a>
+    */
+  override fun invokeDefaultOnBackPressed() {
+      if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.R) {
+          if (!moveTaskToBack(false)) {
+              // For non-root activities, use the default implementation to finish them.
+              super.invokeDefaultOnBackPressed()
+          }
+          return
+      }
+
+      // Use the default back button implementation on Android S
+      // because it's doing more than [Activity.moveTaskToBack] in fact.
+      super.invokeDefaultOnBackPressed()
+  }
+}

android/app/src/main/java/com/bip/hipmimobileapp/MainApplication.kt

@@ -0,0 +1,57 @@
+package com.bip.hipmimobileapp
+
+import android.app.Application
+import android.content.res.Configuration
+
+import com.facebook.react.PackageList
+import com.facebook.react.ReactApplication
+import com.facebook.react.ReactNativeHost
+import com.facebook.react.ReactPackage
+import com.facebook.react.ReactHost
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
+import com.facebook.react.defaults.DefaultReactNativeHost
+import com.facebook.react.soloader.OpenSourceMergedSoMapping
+import com.facebook.soloader.SoLoader
+
+import expo.modules.ApplicationLifecycleDispatcher
+import expo.modules.ReactNativeHostWrapper
+
+class MainApplication : Application(), ReactApplication {
+
+  override val reactNativeHost: ReactNativeHost = ReactNativeHostWrapper(
+        this,
+        object : DefaultReactNativeHost(this) {
+          override fun getPackages(): List<ReactPackage> {
+            val packages = PackageList(this).packages
+            // Packages that cannot be autolinked yet can be added manually here, for example:
+            // packages.add(MyReactNativePackage())
+            return packages
+          }
+
+          override fun getJSMainModuleName(): String = ".expo/.virtual-metro-entry"
+
+          override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
+
+          override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
+          override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
+      }
+  )
+
+  override val reactHost: ReactHost
+    get() = ReactNativeHostWrapper.createReactHost(applicationContext, reactNativeHost)
+
+  override fun onCreate() {
+    super.onCreate()
+    SoLoader.init(this, OpenSourceMergedSoMapping)
+    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+      // If you opted-in for the New Architecture, we load the native entry point for this app.
+      load()
+    }
+    ApplicationLifecycleDispatcher.onApplicationCreate(this)
+  }
+
+  override fun onConfigurationChanged(newConfig: Configuration) {
+    super.onConfigurationChanged(newConfig)
+    ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
+  }
+}

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

@@ -0,0 +1,6 @@
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+  <item android:drawable="@color/splashscreen_background"/>
+  <item>
+    <bitmap android:gravity="center" android:src="@drawable/splashscreen_logo"/>
+  </item>
+</layer-list>

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

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2014 The Android Open Source Project
+
+     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
+
+          http://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.
+-->
+<inset xmlns:android="http://schemas.android.com/apk/res/android"
+       android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetTop="@dimen/abc_edit_text_inset_top_material"
+       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material"
+       >
+
+    <selector>
+        <!--
+          This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
+          The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
+          NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
+
+          <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+
+          For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
+        -->
+        <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
+    </selector>
+
+</inset>

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

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/iconBackground"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

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

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/iconBackground"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/values-night/colors.xml

@@ -0,0 +1 @@
+<resources/>

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

@@ -0,0 +1,6 @@
+<resources>
+  <color name="splashscreen_background">#ffffff</color>
+  <color name="iconBackground">#ffffff</color>
+  <color name="colorPrimary">#023c69</color>
+  <color name="colorPrimaryDark">#ffffff</color>
+</resources>

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

@@ -0,0 +1,6 @@
+<resources>
+  <string name="app_name">HIPMI BADUNG</string>
+  <string name="expo_system_ui_user_interface_style" translatable="false">automatic</string>
+  <string name="expo_splash_screen_resize_mode" translatable="false">contain</string>
+  <string name="expo_splash_screen_status_bar_translucent" translatable="false">false</string>
+</resources>

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

@@ -0,0 +1,12 @@
+<resources xmlns:tools="http://schemas.android.com/tools">
+  <style name="AppTheme" parent="Theme.EdgeToEdge">
+    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+    <item name="colorPrimary">@color/colorPrimary</item>
+    <item name="android:statusBarColor">#ffffff</item>
+  </style>
+  <style name="Theme.App.SplashScreen" parent="Theme.SplashScreen">
+    <item name="windowSplashScreenBackground">@color/splashscreen_background</item>
+    <item name="windowSplashScreenAnimatedIcon">@drawable/splashscreen_logo</item>
+    <item name="postSplashScreenTheme">@style/AppTheme</item>
+  </style>
+</resources>

android/build.gradle

@@ -0,0 +1,37 @@
+// 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')
+    classpath('com.facebook.react:react-native-gradle-plugin')
+    classpath('org.jetbrains.kotlin:kotlin-gradle-plugin')
+  }
+}
+
+def reactNativeAndroidDir = new File(
+  providers.exec {
+    workingDir(rootDir)
+    commandLine("node", "--print", "require.resolve('react-native/package.json')")
+  }.standardOutput.asText.get().trim(),
+  "../android"
+)
+
+allprojects {
+  repositories {
+    maven {
+      // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
+      url(reactNativeAndroidDir)
+    }
+
+    google()
+    mavenCentral()
+    maven { url 'https://www.jitpack.io' }
+  }
+}
+
+apply plugin: "expo-root-project"
+apply plugin: "com.facebook.react.rootproject"

android/gradle.properties

@@ -0,0 +1,59 @@
+# 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.
+# Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
+org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
+
+# 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
+
+# Enable AAPT2 PNG crunching
+android.enablePngCrunchInReleaseBuilds=true
+
+# Use this property to specify which architecture you want to build.
+# You can also override it from the CLI using
+# ./gradlew <task> -PreactNativeArchitectures=x86_64
+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+
+# Use this property to enable support to the new architecture.
+# This will allow you to use TurboModules and the Fabric render in
+# your application. You should enable this flag either if you want
+# to write custom TurboModules/Fabric components OR use libraries that
+# are providing them.
+newArchEnabled=true
+
+# Use this property to enable or disable the Hermes JS engine.
+# If set to false, you will be using JSC instead.
+hermesEnabled=true
+
+# Enable GIF support in React Native images (~200 B increase)
+expo.gif.enabled=true
+# Enable webp support in React Native images (~85 KB increase)
+expo.webp.enabled=true
+# Enable animated webp support (~3.4 MB increase)
+# Disabled by default because iOS doesn't support animated webp
+expo.webp.animated=false
+
+# Enable network inspector
+EX_DEV_CLIENT_NETWORK_INSPECTOR=true
+
+# Use legacy packaging to compress native libraries in the resulting APK.
+expo.useLegacyPackaging=false
+
+# Whether the app is configured to use edge-to-edge via the app config or `react-native-edge-to-edge` plugin
+expo.edgeToEdgeEnabled=true

android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,7 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-bin.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

android/gradlew

@@ -0,0 +1,251 @@
+#!/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.
+#
+# SPDX-License-Identifier: Apache-2.0
+#
+
+##############################################################################
+#
+#   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/platforms/jvm/plugins-application/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##*/}
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || 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=SC2039,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=SC2039,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, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
+
+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

@@ -0,0 +1,94 @@
+@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
+@rem SPDX-License-Identifier: Apache-2.0
+@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. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+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

@@ -0,0 +1,39 @@
+pluginManagement {
+  def reactNativeGradlePlugin = new File(
+    providers.exec {
+      workingDir(rootDir)
+      commandLine("node", "--print", "require.resolve('@react-native/gradle-plugin/package.json', { paths: [require.resolve('react-native/package.json')] })")
+    }.standardOutput.asText.get().trim()
+  ).getParentFile().absolutePath
+  includeBuild(reactNativeGradlePlugin)
+  
+  def expoPluginsPath = new File(
+    providers.exec {
+      workingDir(rootDir)
+      commandLine("node", "--print", "require.resolve('expo-modules-autolinking/package.json', { paths: [require.resolve('expo/package.json')] })")
+    }.standardOutput.asText.get().trim(),
+    "../android/expo-gradle-plugin"
+  ).absolutePath
+  includeBuild(expoPluginsPath)
+}
+
+plugins {
+  id("com.facebook.react.settings")
+  id("expo-autolinking-settings")
+}
+
+extensions.configure(com.facebook.react.ReactSettingsExtension) { ex ->
+  if (System.getenv('EXPO_USE_COMMUNITY_AUTOLINKING') == '1') {
+    ex.autolinkLibrariesFromCommand()
+  } else {
+    ex.autolinkLibrariesFromCommand(expoAutolinking.rnConfigCommand)
+  }
+}
+expoAutolinking.useExpoModules()
+
+rootProject.name = 'HIPMI BADUNG'
+
+expoAutolinking.useExpoVersionCatalog()
+
+include ':app'
+includeBuild(expoAutolinking.reactNativeGradlePlugin)

app.config.js

@@ -0,0 +1,71 @@
+// app.config.js
+require('dotenv').config();
+
+export default {
+  name: 'HIPMI BADUNG',
+  slug: 'hipmi-mobile',
+  version: '1.0.0',
+  orientation: 'portrait',
+  icon: './assets/images/icon.png',
+  scheme: 'hipmimobile',
+  userInterfaceStyle: 'automatic',
+  newArchEnabled: true,
+
+  ios: {
+    supportsTablet: true,
+    bundleIdentifier: 'com.anonymous.hipmi-mobile',
+    infoPlist: {
+      ITSAppUsesNonExemptEncryption: false,
+    },
+  },
+
+  android: {
+    adaptiveIcon: {
+      foregroundImage: './assets/images/splash-icon.png',
+      backgroundColor: '#ffffff',
+    },
+    edgeToEdgeEnabled: true,
+    package: 'com.bip.hipmimobileapp',
+  },
+
+  web: {
+    bundler: 'metro',
+    output: 'static',
+    favicon: './assets/images/favicon.png',
+  },
+
+  plugins: [
+    'expo-router',
+    [
+      'expo-splash-screen',
+      {
+        image: './assets/images/splash-icon.png',
+        imageWidth: 200,
+        resizeMode: 'contain',
+        backgroundColor: '#ffffff',
+      },
+    ],
+    [
+      'expo-camera',
+      {
+        cameraPermission: 'Allow $(PRODUCT_NAME) to access your camera',
+        microphonePermission: 'Allow $(PRODUCT_NAME) to access your microphone',
+        recordAudioAndroid: true,
+      },
+    ],
+    'expo-font',
+  ],
+
+  experiments: {
+    typedRoutes: true,
+  },
+
+  extra: {
+    router: {},
+    eas: {
+      projectId: '5cf15964-4889-4755-b8ed-b99c61d614d1',
+    },
+    // Tambahkan environment variables ke sini
+    API_BASE_URL: process.env.API_BASE_URL,
+  },
+};

app.json.backup

@@ -4,7 +4,7 @@
     "slug": "hipmi-mobile",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/images/logo-hipmi.png",
+    "icon": "./assets/images/icon.png",
     "scheme": "hipmimobile",
     "userInterfaceStyle": "automatic",
     "newArchEnabled": true,
@@ -17,7 +17,7 @@
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "foregroundImage": "./assets/images/splash-icon.png",
         "backgroundColor": "#ffffff"
       },
       "edgeToEdgeEnabled": true,

app/(application)/(user)/_layout.tsx

@@ -10,26 +10,12 @@ export default function UserLayout() {
   return (
     <>
       <Stack screenOptions={HeaderStyles}>
+
         <Stack.Screen
-          name="home"
+          name="waiting-room"
           options={{
-            title: "HIPMI",
-            headerLeft: () => (
-              <Ionicons
-                name="search"
-                size={20}
-                color={MainColor.yellow}
-                onPress={() => router.push("/user-search")}
-              />
-            ),
-            headerRight: () => (
-              <Ionicons
-                name="notifications"
-                size={20}
-                color={MainColor.yellow}
-                onPress={() => router.push("/notifications")}
-              />
-            ),
+            title: "Waiting Room",
+            headerBackVisible: false,
           }}
         />
 

app/(application)/(user)/home.tsx

@@ -1,9 +1,78 @@
-import UiHome from "@/screens/Home/UiHome";
+/* eslint-disable react-hooks/exhaustive-deps */
+import { StackCustom, ViewWrapper } from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
+import Home_BottomFeatureSection from "@/screens/Home/bottomFeatureSection";
+import Home_ImageSection from "@/screens/Home/imageSection";
+import TabSection from "@/screens/Home/tabSection";
+import { tabsHome } from "@/screens/Home/tabsList";
+import Home_FeatureSection from "@/screens/Home/topFeatureSection";
+import { apiUser } from "@/service/api-client/api-user";
+import { Ionicons } from "@expo/vector-icons";
+import { Redirect, router, Stack } from "expo-router";
+import { useEffect, useState } from "react";
 
 export default function Application() {
+  const { user } = useAuth();
+  const [data, setData] = useState<any>({});
+
+  useEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    const response = await apiUser(user?.id as string);
+    setData(response.data);
+  }
+
+  if (data && data?.active === false) {
+    return <Redirect href={`/waiting-room`} />;
+  }
+
+  if (data && data?.Profile === null) {
+    return <Redirect href={`/profile/create`} />;
+  }
+
   return (
     <>
-      <UiHome />
+      <Stack.Screen
+        options={{
+          title: "HIPMI",
+          headerLeft: () => (
+            <Ionicons
+              name="search"
+              size={20}
+              color={MainColor.yellow}
+              onPress={() => {
+                router.push("/user-search");
+              }}
+            />
+          ),
+          headerRight: () => (
+            <Ionicons
+              name="notifications"
+              size={20}
+              color={MainColor.yellow}
+              onPress={() => {
+                router.push("/notifications");
+              }}
+            />
+          ),
+        }}
+      />
+      <ViewWrapper
+        footerComponent={
+          <TabSection tabs={tabsHome(data?.Profile?.id as string)} />
+        }
+      >
+        <StackCustom>
+          <Home_ImageSection />
+
+          <Home_FeatureSection />
+
+          <Home_BottomFeatureSection />
+        </StackCustom>
+      </ViewWrapper>
     </>
   );
 }

app/(application)/(user)/profile/[id]/edit.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import {
   ButtonCustom,
   SelectCustom,
@@ -7,46 +6,69 @@ import {
   ViewWrapper,
 } from "@/components";
 import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
+import { apiProfile, apiUpdateProfile } from "@/service/api-client/api-profile";
+import { IProfile } from "@/types/Type-Profile";
 import { router, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
-import { StyleSheet } from "react-native";
+import { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function ProfileEdit() {
   const { id } = useLocalSearchParams();
 
-  const [data, setData] = useState({
-    nama: "Bagas Banuna",
-    email: "bagasbanuna@gmail.com",
-    alamat: "Jember",
-    selectedValue: "",
-  });
+  const [data, setData] = useState<IProfile | any>();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const options = [
     { label: "Laki-laki", value: "laki-laki" },
     { label: "Perempuan", value: "perempuan" },
   ];
 
-  const handleSave = () => {
-    console.log({
-      nama: data.nama,
-      email: data.email,
-      alamat: data.alamat,
-      selectedValue: data.selectedValue,
-    });
-    router.back();
+  useEffect(() => {
+    onLoadData(id as string);
+  }, [id]);
+
+  async function onLoadData(id: string) {
+    try {
+      const response = await apiProfile({ id });
+      setData(response.data);
+    } catch (error) {
+      console.log("error get profile >>", error);
+    }
+  }
+
+  const handleUpdate = async () => {
+    try {
+      setIsLoading(true);
+      const response = await apiUpdateProfile({ id: id as string, data });
+      if (!response.success) {
+        Toast.show({
+          type: "info",
+          text1: "Info",
+          text2: response.message,
+        });
+
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Sukses",
+        text2: "Profile berhasil diupdate",
+      });
+      return router.back();
+    } catch (error) {
+      console.log("error update profile >>", error);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   return (
     <ViewWrapper
       footerComponent={
         <BoxButtonOnFooter>
-          <ButtonCustom
-            // disabled={
-            //   !data.nama || !data.email || !data.alamat || !data.selectedValue
-            // }
-            onPress={handleSave}
-          >
-            Simpan
+          <ButtonCustom isLoading={isLoading} onPress={handleUpdate}>
+            Update
           </ButtonCustom>
         </BoxButtonOnFooter>
       }
@@ -55,16 +77,17 @@ export default function ProfileEdit() {
         <TextInputCustom
           label="Nama"
           placeholder="Nama"
-          value={data.nama}
+          value={data?.name}
           onChangeText={(text) => {
-            setData({ ...data, nama: text });
+            setData({ ...data, name: text });
           }}
           required
         />
         <TextInputCustom
+          keyboardType="email-address"
           label="Email"
           placeholder="Email"
-          value={data.email}
+          value={data?.email}
           onChangeText={(text) => {
             setData({ ...data, email: text });
           }}
@@ -73,7 +96,7 @@ export default function ProfileEdit() {
         <TextInputCustom
           label="Alamat"
           placeholder="Alamat"
-          value={data.alamat}
+          value={data?.alamat}
           onChangeText={(text) => {
             setData({ ...data, alamat: text });
           }}
@@ -84,25 +107,12 @@ export default function ProfileEdit() {
           label="Jenis Kelamin"
           placeholder="Pilih jenis kelamin"
           data={options}
-          value={data.selectedValue}
+          value={data?.jenisKelamin}
           onChange={(value) => {
-            setData({ ...(data as any), selectedValue: value });
+            setData({ ...(data as any), jenisKelamin: value });
           }}
         />
       </StackCustom>
     </ViewWrapper>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-    padding: 20,
-  },
-  result: {
-    marginTop: 20,
-    fontSize: 16,
-    fontWeight: "bold",
-  },
-});

app/(application)/(user)/profile/[id]/index.tsx

@@ -1,21 +1,29 @@
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import AlertCustom from "@/components/Alert/AlertCustom";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import DrawerCustom from "@/components/Drawer/DrawerCustom";
 import { MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
 import { drawerItemsProfile } from "@/screens/Profile/ListPage";
 import Profile_MenuDrawerSection from "@/screens/Profile/menuDrawerSection";
 import ProfileSection from "@/screens/Profile/ProfileSection";
+import { apiProfile } from "@/service/api-client/api-profile";
 import { GStyles } from "@/styles/global-styles";
+import { IProfile } from "@/types/Type-Profile";
 import { Ionicons } from "@expo/vector-icons";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import React, { useState } from "react";
+import {
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams
+} from "expo-router";
+import React, { useCallback, useState } from "react";
 import { TouchableOpacity } from "react-native";
 
 export default function Profile() {
   const { id } = useLocalSearchParams();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-  const [showLogoutAlert, setShowLogoutAlert] = useState(false);
+  const [data, setData] = useState<IProfile>();
+
+  const { logout, isAdmin } = useAuth();
 
   const openDrawer = () => {
     setIsDrawerOpen(true);
@@ -25,59 +33,53 @@ export default function Profile() {
     setIsDrawerOpen(false);
   };
 
-  const handleLogout = () => {
-    console.log("User logout");
-    router.replace("/");
-    setShowLogoutAlert(false);
-  };
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData(id as string);
+    }, [id])
+  );
+
+  async function onLoadData(id: string) {
+    const response = await apiProfile({ id: id });
+    setData(response.data);
+  }
 
   return (
     <>
+      <Stack.Screen
+        options={{
+          title: "Profile",
+          headerLeft: () => <LeftButtonCustom />,
+          headerRight: () => (
+            <TouchableOpacity onPress={openDrawer}>
+              <Ionicons
+                name="ellipsis-vertical"
+                size={20}
+                color={MainColor.yellow}
+              />
+            </TouchableOpacity>
+          ),
+          headerStyle: GStyles.headerStyle,
+          headerTitleStyle: GStyles.headerTitleStyle,
+        }}
+      />
       <ViewWrapper>
         {/* Header */}
-        <Stack.Screen
-          options={{
-            title: "Profile",
-            headerLeft: () => <LeftButtonCustom />,
-            headerRight: () => (
-              <TouchableOpacity onPress={openDrawer}>
-                <Ionicons
-                  name="ellipsis-vertical"
-                  size={20}
-                  color={MainColor.yellow}
-                />
-              </TouchableOpacity>
-            ),
-            headerStyle: GStyles.headerStyle,
-            headerTitleStyle: GStyles.headerTitleStyle,
-          }}
-        />
-        <ProfileSection />
+        <ProfileSection data={data as any} />
       </ViewWrapper>
 
       {/* Drawer Komponen Eksternal */}
       <DrawerCustom
-        height={350}
+        height={"auto"}
         isVisible={isDrawerOpen}
         closeDrawer={closeDrawer}
       >
         <Profile_MenuDrawerSection
-          drawerItems={drawerItemsProfile({ id: id as string })}
-          setShowLogoutAlert={setShowLogoutAlert}
+          drawerItems={drawerItemsProfile({ id: id as string, isAdmin })}
           setIsDrawerOpen={setIsDrawerOpen}
+          logout={logout}
         />
       </DrawerCustom>
-
-      {/* Alert Komponen Eksternal */}
-      <AlertCustom
-        isVisible={showLogoutAlert}
-        onLeftPress={() => setShowLogoutAlert(false)}
-        onRightPress={handleLogout}
-        title="Apakah anda yakin ingin keluar?"
-        textLeft="Batal"
-        textRight="Keluar"
-        colorRight={MainColor.red}
-      />
     </>
   );
 }

app/(application)/(user)/profile/[id]/update-photo.tsx

@@ -6,42 +6,109 @@ import {
   ButtonCustom,
 } from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { router, useLocalSearchParams } from "expo-router";
+import API_STRORAGE from "@/constants/base-url-api-strorage";
+import DIRECTORY_ID from "@/constants/directory-id";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import { apiProfile } from "@/service/api-client/api-profile";
+import { uploadImageService } from "@/service/upload-service";
+import { IProfile } from "@/types/Type-Profile";
+import pickImage from "@/utils/pickImage";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import { Image } from "react-native";
 
 export default function UpdatePhotoProfile() {
   const { id } = useLocalSearchParams();
+  const [data, setData] = useState<IProfile>();
+  const [imageUri, setImageUri] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData(id as string);
+    }, [id])
+  );
+
+  async function onLoadData(id: string) {
+    try {
+      const response = await apiProfile({ id });
+      console.log(
+        "response image id >>",
+        JSON.stringify(response.data.imageId, null, 2)
+      );
+      setData(response.data);
+    } catch (error) {
+      console.log("error get profile >>", error);
+    }
+  }
+
+  async function onUpload() {
+    try {
+      setIsLoading(true);
+
+      const response = await uploadImageService({
+        imageUri,
+        dirId: DIRECTORY_ID.profile_foto,
+      });
+
+      console.log("Upload res >>", JSON.stringify(response, null, 2));
+      if (response.success) {
+        router.back();
+      }
+    } catch (error) {
+      console.log("error upload >>", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
   const buttonFooter = (
     <BoxButtonOnFooter>
       <ButtonCustom
+        isLoading={isLoading}
         onPress={() => {
-          console.log("Simpan foto profile >>", id);
-          router.back();
+          onUpload();
+          // console.log("Simpan foto profile >>", id);
+          // router.back();
         }}
       >
-        Simpan
+        Update
       </ButtonCustom>
     </BoxButtonOnFooter>
   );
+
+  const image = imageUri ? (
+    <Image source={{ uri: imageUri }} style={{ width: 200, height: 200 }} />
+  ) : (
+    <AvatarCustom
+      size="xl"
+      source={
+        data?.imageId
+          ? API_STRORAGE.GET({ fileId: data.imageId })
+          : DUMMY_IMAGE.avatar
+      }
+    />
+  );
+
   return (
     <ViewWrapper footerComponent={buttonFooter}>
       <BaseBox
         style={{ alignItems: "center", justifyContent: "center", height: 250 }}
       >
-        <AvatarCustom size="xl" />
+        {image}
       </BaseBox>
 
+      {/* Upload Image */}
       <ButtonCenteredOnly
         icon="upload"
         onPress={() => {
-          console.log("Update photo >>", id);
-          router.navigate(`/(application)/take-picture/${id}`);
+          pickImage({
+            setImageUri,
+          });
         }}
       >
-        Update
+        Upload
       </ButtonCenteredOnly>
-
-      {/* <Spacing />
-      <ButtonCustom>Test</ButtonCustom> */}
     </ViewWrapper>
   );
 }

app/(application)/(user)/profile/_layout.tsx

@@ -11,22 +11,27 @@ export default function ProfileLayout() {
           headerTitleStyle: GStyles.headerTitleStyle,
           headerTitleAlign: "center",
           headerBackButtonDisplayMode: "minimal",
-          headerLeft: () => <BackButton />,
         }}
       >
         {/* <Stack.Screen name="[id]/index" options={{ headerShown: false }} /> */}
-        <Stack.Screen name="[id]/edit" options={{ title: "Edit Profile" }} />
+        <Stack.Screen
+          name="[id]/edit"
+          options={{ title: "Edit Profile", headerLeft: () => <BackButton /> }}
+        />
         <Stack.Screen
           name="[id]/update-photo"
-          options={{ title: "Update Foto" }}
+          options={{ title: "Update Foto", headerLeft: () => <BackButton /> }}
         />
         <Stack.Screen
           name="[id]/update-background"
-          options={{ title: "Update Latar Belakang" }}
+          options={{
+            title: "Update Latar Belakang",
+            headerLeft: () => <BackButton />,
+          }}
         />
         <Stack.Screen
-          name="[id]/create"
-          options={{ title: "Buat Profile" }}
+          name="create"
+          options={{ title: "Buat Profile", headerBackVisible: false }}
         />
       </Stack>
     </>

app/(application)/(user)/profile/create.tsx

@@ -11,27 +11,74 @@ import {
 import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
 import InformationBox from "@/components/Box/InformationBox";
 import LandscapeFrameUploaded from "@/components/Image/LandscapeFrameUploaded";
-import { router, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { useAuth } from "@/hooks/use-auth";
+import { apiCreateProfile } from "@/service/api-client/api-profile";
+import { router, useFocusEffect } from "expo-router";
+import { useCallback, useState } from "react";
 import { View } from "react-native";
+import Toast from "react-native-toast-message";
 
 export default function CreateProfile() {
-  const { id } = useLocalSearchParams();
+  const { user } = useAuth();
+
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const [data, setData] = useState({
+    id: user?.id,
     name: "",
     email: "",
-    address: "",
-    gender: "",
+    alamat: "",
+    jenisKelamin: "",
   });
 
-  const handlerSave = () => {
-    console.log("data create profile >>", data);
-    router.back();
+  useFocusEffect(
+    useCallback(() => {
+      Toast.show({
+        type: "info",
+        text1: "Lengkapi Profile Anda",
+        text2: "Untuk menjelajahi fitur-fitur yang ada",
+      });
+    }, [])
+  );
+
+  const handlerSave = async () => {
+    if (!data.name || !data.email || !data.alamat || !data.jenisKelamin) {
+      Toast.show({
+        type: "info",
+        text1: "Info",
+        text2: "Harap isi semua data",
+      });
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      const response = await apiCreateProfile(data);
+      if (response.status === 400) {
+        Toast.show({
+          type: "error",
+          text1: "Email sudah terdaftar",
+          text2: "Gunakan email lain",
+        });
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Sukses",
+        text2: "Profile berhasil dibuat",
+      });
+      router.push("/(application)/(user)/home");
+    } catch (error) {
+      console.log("error create profile >>", error);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   const footerComponent = (
     <BoxButtonOnFooter>
       <ButtonCustom
+        isLoading={isLoading}
         onPress={handlerSave}
         // disabled={!data.name || !data.email || !data.address || !data.gender}
       >
@@ -49,7 +96,7 @@ export default function CreateProfile() {
           <Spacing />
           <ButtonCenteredOnly
             icon="upload"
-            onPress={() => router.navigate(`/take-picture/${id}`)}
+            onPress={() => router.navigate(`/take-picture/${user?.id}`)}
           >
             Upload
           </ButtonCenteredOnly>
@@ -63,7 +110,7 @@ export default function CreateProfile() {
           <Spacing />
           <ButtonCenteredOnly
             icon="upload"
-            onPress={() => router.navigate(`/take-picture/${id}`)}
+            onPress={() => router.navigate(`/take-picture/${user?.id}`)}
           >
             Upload
           </ButtonCenteredOnly>
@@ -89,8 +136,8 @@ export default function CreateProfile() {
           required
           label="Alamat"
           placeholder="Masukkan alamat"
-          value={data.address}
-          onChangeText={(text) => setData({ ...data, address: text })}
+          value={data.alamat}
+          onChangeText={(text) => setData({ ...data, alamat: text })}
         />
         <SelectCustom
           label="Jenis Kelamin"
@@ -99,9 +146,11 @@ export default function CreateProfile() {
             { label: "Laki-laki", value: "laki-laki" },
             { label: "Perempuan", value: "perempuan" },
           ]}
-          value={data.gender}
+          value={data.jenisKelamin}
           required
-          onChange={(value) => setData({ ...(data as any), gender: value })}
+          onChange={(value) =>
+            setData({ ...(data as any), jenisKelamin: value })
+          }
         />
         <Spacing />
       </StackCustom>

app/(application)/(user)/waiting-room.tsx

@@ -0,0 +1,87 @@
+import {
+  AlertDefaultSystem,
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  StackCustom,
+  ViewWrapper,
+} from "@/components";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { useAuth } from "@/hooks/use-auth";
+import { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import Toast from "react-native-toast-message";
+
+export default function WaitingRoom() {
+  const { token, isLoading, logout, userData } = useAuth();
+
+  async function handleCheck() {
+    try {
+      const response = await userData(token as string);
+      if (response.active) {
+        Toast.show({
+          type: "success",
+          text1: "Akun anda telah aktif", // text2: "Anda berhasil login",
+        });
+        router.replace(`/(application)/(user)/profile/create`);
+      } else {
+        Toast.show({
+          type: "error",
+          text1: "Akun anda belum aktif",
+          text2: "Silahkan hubungi admin",
+        });
+      }
+    } catch (error) {
+      console.log("Error check", error);
+    }
+  }
+
+  const logoutButton = () => {
+    return (
+      <>
+        <BoxButtonOnFooter>
+          <ButtonCustom
+            backgroundColor="red"
+            textColor="white"
+            iconLeft={
+              <Ionicons name="log-out" size={ICON_SIZE_BUTTON} color="white" />
+            }
+            onPress={() => {
+              AlertDefaultSystem({
+                title: "Keluar",
+                message: "Apakah anda yakin ingin keluar?",
+                textLeft: "Batal",
+                textRight: "Ya",
+                onPressRight: () => {
+                  logout();
+                },
+              });
+            }}
+          >
+            Keluar
+          </ButtonCustom>
+        </BoxButtonOnFooter>
+      </>
+    );
+  };
+
+  return (
+    <>
+      <ViewWrapper footerComponent={logoutButton()}>
+        <StackCustom>
+          <InformationBox text="Permohonan akses Anda sedang dalam proses verifikasi oleh admin. Harap tunggu, Anda akan menerima pemberitahuan melalui Whatsapp setelah disetujui." />
+          <ButtonCenteredOnly
+            isLoading={isLoading}
+            onPress={() => {
+              handleCheck();
+            }}
+            icon="refresh-ccw"
+          >
+            Check
+          </ButtonCenteredOnly>
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/_layout.tsx

@@ -9,7 +9,12 @@ import {
 import DrawerAdmin from "@/components/Drawer/DrawerAdmin";
 import NavbarMenu from "@/components/Drawer/NavbarMenu";
 import { AccentColor, MainColor } from "@/constants/color-palet";
-import { ICON_SIZE_MEDIUM, ICON_SIZE_SMALL, ICON_SIZE_XLARGE } from "@/constants/constans-value";
+import {
+  ICON_SIZE_MEDIUM,
+  ICON_SIZE_SMALL,
+  ICON_SIZE_XLARGE,
+} from "@/constants/constans-value";
+import { useAuth } from "@/hooks/use-auth";
 import { adminListMenu } from "@/screens/Admin/listPageAdmin";
 import { GStyles } from "@/styles/global-styles";
 import { FontAwesome6, Ionicons } from "@expo/vector-icons";
@@ -19,6 +24,9 @@ import { useState } from "react";
 export default function AdminLayout() {
   const [openDrawerNavbar, setOpenDrawerNavbar] = useState(false);
   const [openDrawerUser, setOpenDrawerUser] = useState(false);
+
+  const { logout } = useAuth();
+
   return (
     <>
       <Stack
@@ -51,9 +59,6 @@ export default function AdminLayout() {
         <Stack.Screen name="dashboard" />
         {/* ================== Investment Start ================== */}
         <Stack.Screen name="investment/index" />
-        <Stack.Screen name="investment/publish" />
-        <Stack.Screen name="investment/review" />
-        <Stack.Screen name="investment/reject" />
         {/* ================== Investment End ================== */}
 
         {/* ================== Maps Start ================== */}
@@ -77,32 +82,32 @@ export default function AdminLayout() {
         <Stack.Screen name="collaboration/publish" />
         <Stack.Screen name="collaboration/group" />
         <Stack.Screen name="collaboration/reject" />
-        <Stack.Screen name="collaboration/[id]/[status]"/>
-        <Stack.Screen name="collaboration/[id]/group"/>
+        <Stack.Screen name="collaboration/[id]/[status]" />
+        <Stack.Screen name="collaboration/[id]/group" />
         {/* ================== Collaboration End ================== */}
 
         {/* ================== Forum Start ================== */}
         <Stack.Screen name="forum/index" />
         <Stack.Screen name="forum/[id]/index" />
-        <Stack.Screen name="forum/report-comment"/>
-        <Stack.Screen name="forum/report-posting"/>
+        <Stack.Screen name="forum/report-comment" />
+        <Stack.Screen name="forum/report-posting" />
         <Stack.Screen name="forum/[id]/list-report-posting" />
-        <Stack.Screen name="forum/[id]/list-report-comment"/>
+        <Stack.Screen name="forum/[id]/list-report-comment" />
         {/* ================== Forum End ================== */}
 
         {/* ================== Voting Start ================== */}
         <Stack.Screen name="voting/index" />
         <Stack.Screen name="voting/[status]/status" />
         <Stack.Screen name="voting/[id]/[status]/index" />
-        <Stack.Screen name="voting/[id]/reject-input"/>
+        <Stack.Screen name="voting/[id]/reject-input" />
         {/* ================== Voting End ================== */}
 
         {/* ================== Event Start ================== */}
         <Stack.Screen name="event/index" />
         <Stack.Screen name="event/[status]/status" />
-        <Stack.Screen name="event/type-of-event"/>
-        <Stack.Screen name="event/type-create"/>
-        <Stack.Screen name="event/type-update"/>
+        <Stack.Screen name="event/type-of-event" />
+        <Stack.Screen name="event/type-create" />
+        <Stack.Screen name="event/type-update" />
         {/* <Stack.Screen name="event/[id]/[status]/index" />
         <Stack.Screen name="event/[id]/reject-input"/> */}
         {/* ================== Event End ================== */}
@@ -216,7 +221,7 @@ export default function AdminLayout() {
                   textLeft: "Batal",
                   textRight: "Ya",
                   onPressRight: () => {
-                    router.replace(`/(application)/(user)/profile/${123}`);
+                    router.replace(`/(application)/(user)/home`);
                   },
                 });
               } else if (item.value === "logout") {
@@ -226,7 +231,7 @@ export default function AdminLayout() {
                   textLeft: "Batal",
                   textRight: "Keluar",
                   onPressRight: () => {
-                    router.replace("/");
+                    logout();
                   },
                 });
               }

app/(application)/admin/donation/[id]/[status]/index.tsx

@@ -0,0 +1,259 @@
+import {
+  ActionIcon,
+  AlertDefaultSystem,
+  BadgeCustom,
+  BaseBox,
+  ButtonCustom,
+  DrawerCustom,
+  DummyLandscapeImage,
+  MenuDrawerDynamicGrid,
+  ProgressCustom,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconDot, IconList } from "@/components/_Icon/IconComponent";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
+import AdminButtonReview from "@/components/_ShareComponent/Admin/ButtonReview";
+import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_BUTTON, TEXT_SIZE_LARGE } from "@/constants/constans-value";
+import AdminDonation_BoxOfDonationStory from "@/screens/Admin/Donation/BoxOfDonationStory";
+import { Ionicons } from "@expo/vector-icons";
+import { router, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import React from "react";
+import { View } from "react-native";
+
+export default function AdminDonationDetail() {
+  const { id, status } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = React.useState(false);
+
+  const colorBadge = () => {
+    if (status === "publish") {
+      return MainColor.green;
+    } else if (status === "review") {
+      return MainColor.orange;
+    } else if (status === "reject") {
+      return MainColor.red;
+    } else {
+      return MainColor.placeholder;
+    }
+  };
+
+  const listData = [
+    {
+      label: "Penggalang Dana",
+      value: `Bagas Banuna ${id}`,
+    },
+    {
+      label: "Judul",
+      value: `Donasi Lorem ipsum dolor sit amet, consectetur adipisicing elit.`,
+    },
+    {
+      label: "Status",
+      value: (
+        <BadgeCustom color={colorBadge()}>
+          {_.startCase(status as string)}
+        </BadgeCustom>
+      ),
+    },
+    {
+      label: "Durasi",
+      value: "30 Hari",
+    },
+    {
+      label: "Target Dana",
+      value: "Rp 10.000.000",
+    },
+    {
+      label: "Kategori",
+      value: "Kategori Donasi",
+    },
+    // {
+    //   label: "Total Donatur",
+    //   value: "-",
+    // },
+    // {
+    //   label: "Progress",
+    //   value: "0 %",
+    // },
+    // {
+    //   label: "Dana Terkumpul",
+    //   value: "Rp 0",
+    // },
+  ];
+
+  const listPencarianDana = [
+    {
+      label: "Total Dana Dicairkan",
+      value: "Rp 0",
+    },
+    {
+      label: "Sisa Dana",
+      value: "Rp 0",
+    },
+    {
+      label: "Akumulasi Pencairan",
+      value: "0 kali",
+    },
+    {
+      label: "Bank Tujuan",
+      value: "BNI",
+    },
+    {
+      label: "Nomor Rekening",
+      value: "123456789",
+    },
+  ];
+
+  const rightComponent = (
+    <ActionIcon
+      icon={<IconDot size={ICON_SIZE_BUTTON} />}
+      onPress={() => {
+        setOpenDrawer(true);
+      }}
+    />
+  );
+
+
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminBackButtonAntTitle
+            title={`Detail Data`}
+            rightComponent={status === "publish" && rightComponent}
+          />
+        }
+      >
+        {status === "publish" && (
+          <View>
+            <BaseBox>
+              <StackCustom>
+                <TextCustom bold align="center" size={TEXT_SIZE_LARGE}>
+                  Pencarian Dana
+                </TextCustom>
+
+                <StackCustom gap={5}>
+                  {listPencarianDana.map((item, i) => (
+                    <GridDetail_4_8
+                      key={i}
+                      label={<TextCustom bold>{item.label}</TextCustom>}
+                      value={<TextCustom>{item.value}</TextCustom>}
+                    />
+                  ))}
+                </StackCustom>
+                <ButtonCustom
+                  iconLeft={
+                    <Ionicons name="cash-outline" size={ICON_SIZE_BUTTON} />
+                  }
+                  onPress={() => {
+                    router.push(`/admin/donation/${id}/disbursement-of-funds`);
+                  }}
+                >
+                  Cairkan Dana
+                </ButtonCustom>
+              </StackCustom>
+            </BaseBox>
+
+            <BaseBox>
+              <ProgressCustom size="lg" />
+              <Spacing />
+              <StackCustom gap={"xs"}>
+                <GridDetail_4_8
+                  label={<TextCustom bold>Jumlah Donatur</TextCustom>}
+                  value={<TextCustom>0 orang</TextCustom>}
+                />
+                <GridDetail_4_8
+                  label={<TextCustom bold>Dana Terkumpul</TextCustom>}
+                  value={<TextCustom>Rp 0</TextCustom>}
+                />
+              </StackCustom>
+            </BaseBox>
+          </View>
+        )}
+
+        <BaseBox>
+          <StackCustom>
+            <DummyLandscapeImage />
+            {listData.map((item, i) => (
+              <GridDetail_4_8
+                key={i}
+                label={<TextCustom bold>{item.label}</TextCustom>}
+                value={<TextCustom>{item.value}</TextCustom>}
+              />
+            ))}
+          </StackCustom>
+        </BaseBox>
+
+        {status === "review" && (
+          <StackCustom>
+            <AdminDonation_BoxOfDonationStory />
+
+            <AdminButtonReview
+              onPublish={() => {
+                AlertDefaultSystem({
+                  title: "Publish",
+                  message: "Apakah anda yakin ingin mempublikasikan data ini?",
+                  textLeft: "Batal",
+                  textRight: "Ya",
+                  onPressLeft: () => {
+                    router.back();
+                  },
+                  onPressRight: () => {
+                    router.back();
+                  },
+                });
+              }}
+              onReject={() => {
+                router.push(`/admin/donation/${id}/reject-input`);
+              }}
+            />
+          </StackCustom>
+        )}
+
+        {status === "reject" && (
+          <StackCustom>
+            <AdminDonation_BoxOfDonationStory />
+
+            <AdminButtonReject
+              title="Tambah Catatan"
+              onReject={() => {
+                router.push(`/admin/donation/${id}/reject-input`);
+              }}
+            />
+          </StackCustom>
+        )}
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              label: "Daftar Donatur",
+              icon: <IconList />,
+              path: `/admin/donation/${id}/list-of-donatur`,
+            },
+            {
+              label: "Daftar Pencarian Dana",
+              icon: <IconList />,
+              path: `/admin/donation/${id}/list-disbursement-of-funds`,
+            },
+          ]}
+          onPressItem={(item) => {
+            setOpenDrawer(false);
+            router.push(item.path as any);
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

app/(application)/admin/donation/[id]/[status]/transaction-detail.tsx

@@ -0,0 +1,80 @@
+import {
+  BadgeCustom,
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { MainColor } from "@/constants/color-palet";
+import dayjs from "dayjs";
+import { router, useLocalSearchParams } from "expo-router";
+
+export default function AdminDonasiTransactionDetail() {
+  const { id } = useLocalSearchParams();
+
+  const buttonAction = (
+    <BoxButtonOnFooter>
+      <ButtonCustom onPress={() => router.back()}>Terima</ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+
+  const listData = [
+    {
+      label: "Donatur",
+      value: "Bagas Banuna",
+    },
+    {
+      label: "Bank",
+      value: "BCA",
+    },
+    {
+      label: "Jumlah Donasi",
+      value: "Rp. 1.000.000",
+    },
+    {
+      label: "Status",
+      value: <BadgeCustom color={MainColor.green}>Berhasil</BadgeCustom>,
+    },
+    {
+      label: "Tanggal",
+      value: dayjs().format("DD-MM-YYYY HH:mm:ss"),
+    },
+    {
+      label: "Bukti Transfer",
+      value: (
+        <ButtonCustom
+          onPress={() =>
+            router.push(`/(application)/(image)/preview-image/${id}`)
+          }
+        >
+          Cek
+        </ButtonCustom>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title="Detail Transaksi" />}
+        footerComponent={buttonAction}
+      >
+        <BaseBox>
+          <StackCustom>
+            {listData.map((item, index) => (
+              <GridDetail_4_8
+                key={index}
+                label={<TextCustom bold>{item.label}</TextCustom>}
+                value={<TextCustom>{item.value}</TextCustom>}
+              />
+            ))}
+          </StackCustom>
+        </BaseBox>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/donation/[id]/detail-disbursement-of-funds.tsx

@@ -0,0 +1,62 @@
+import {
+  BaseBox,
+  ButtonCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import dayjs from "dayjs";
+import { router, useLocalSearchParams } from "expo-router";
+
+export default function AdminDonationDetailDisbursementOfFunds() {
+  const { id } = useLocalSearchParams();
+  const listData = [
+    {
+      label: "Nominal",
+      value: "Rp 1.000.000",
+    },
+    {
+      label: "Tanggal",
+      value: dayjs().format("DD-MM-YYYY HH:mm"),
+    },
+    {
+      label: "Judul",
+      value: `Judul Pencairan Dana ${id}`,
+    },
+    {
+      label: "Deskripsi",
+      value: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque velit eos facere a dicta nemo repellendus harum laboriosam quos, earum reprehenderit. Nisi sapiente, quo earum quis alias ullam temporibus quidem.`,
+    },
+  ];
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminBackButtonAntTitle title="Detail Pencairan Dana" />
+        }
+      >
+        <BaseBox>
+          <StackCustom>
+            {listData.map((item, index) => (
+              <GridDetail_4_8
+                key={index}
+                label={<TextCustom bold>{item.label}</TextCustom>}
+                value={<TextCustom>{item.value}</TextCustom>}
+              />
+            ))}
+          </StackCustom>
+        </BaseBox>
+
+        <ButtonCustom
+          onPress={() =>
+            router.push(`/(application)/(image)/preview-image/${id}`)
+          }
+        >
+          Cek Bukti Transaksi
+        </ButtonCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/donation/[id]/disbursement-of-funds.tsx

@@ -0,0 +1,85 @@
+import {
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  Spacing,
+  StackCustom,
+  TextAreaCustom,
+  TextCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { router, useLocalSearchParams } from "expo-router";
+
+export default function AdminDonationDisbursementOfFunds() {
+  const { id } = useLocalSearchParams();
+  const handleSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => {
+          router.back();
+        }}
+      >
+        Simpan
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <ViewWrapper
+      headerComponent={<AdminBackButtonAntTitle title="Pencairan Dana" />}
+      footerComponent={handleSubmit}
+    >
+      <BaseBox>
+        <StackCustom gap="md">
+          <TextCustom align="center" bold size="large">
+            Dana Tersisa
+          </TextCustom>
+          <TextCustom align="center" bold size="large">
+            Rp 1.000.000
+          </TextCustom>
+        </StackCustom>
+      </BaseBox>
+
+      <BaseBox>
+        <TextCustom bold size="large" align="center">
+          Form Pencairan Dana
+        </TextCustom>
+        <Spacing />
+        <StackCustom gap={"xs"}>
+          <TextInputCustom
+            required
+            keyboardType="numeric"
+            label="Nominal"
+            placeholder="0"
+            iconLeft={"Rp"}
+          />
+
+          <TextInputCustom required label="Judul" placeholder="Masukan judul" />
+
+          <TextAreaCustom
+            required
+            label="Deskripsi"
+            placeholder="Masukan deskripsi"
+            showCount
+            maxLength={500}
+          />
+        </StackCustom>
+      </BaseBox>
+      <InformationBox text="Wajib menyertakan bukti transfer" />
+
+      <ButtonCenteredOnly
+        onPress={() => {
+          router.push(`/(application)/(image)/take-picture/${id}`);
+        }}
+        icon="upload"
+      >
+        Upload
+      </ButtonCenteredOnly>
+      <Spacing />
+    </ViewWrapper>
+  );
+}

app/(application)/admin/donation/[id]/list-disbursement-of-funds.tsx

@@ -0,0 +1,82 @@
+import {
+    ActionIcon,
+    CenterCustom,
+    Divider,
+    StackCustom,
+    TextCustom,
+    ViewWrapper
+} from "@/components";
+import { IconView } from "@/components/_Icon/IconComponent";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { GridViewCustomSpan } from "@/components/_ShareComponent/GridViewCustomSpan";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import dayjs from "dayjs";
+import { router, useLocalSearchParams } from "expo-router";
+import { View } from "react-native";
+
+export default function AdminDonasiListOfDisbursementOfFunds() {
+  const { id } = useLocalSearchParams();
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminBackButtonAntTitle title="Daftar Pencairan Dana" />
+        }
+      >
+        <GridViewCustomSpan
+          span1={3}
+          span2={5}
+          span3={4}
+          component1={
+            <TextCustom bold align="center">
+              Aksi
+            </TextCustom>
+          }
+          component2={
+            <TextCustom bold align="center">
+              Tanggal
+            </TextCustom>
+          }
+          component3={
+            <TextCustom bold align="center">
+              Nominal
+            </TextCustom>
+          }
+        />
+        <Divider />
+        <StackCustom>
+          {Array.from({ length: 10 }).map((_, index) => (
+            <View key={index}>
+              <GridViewCustomSpan
+                span1={3}
+                span2={5}
+                span3={4}
+                component1={
+                  <CenterCustom>
+                    <ActionIcon
+                      icon={<IconView size={ICON_SIZE_BUTTON} color="black" />}
+                      onPress={() => {
+                        router.push(
+                          `/admin/donation/${id}/detail-disbursement-of-funds`
+                        );
+                      }}
+                    />
+                  </CenterCustom>
+                }
+                component2={
+                  <TextCustom bold align="center" truncate>
+                    {dayjs()
+                      .add(index + 1, "day")
+                      .format("DD-MM-YYYY HH:mm")}
+                  </TextCustom>
+                }
+                component3={<TextCustom>Rp. 1.000.000</TextCustom>}
+              />
+              <Divider />
+            </View>
+          ))}
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/donation/[id]/list-of-donatur.tsx

@@ -0,0 +1,101 @@
+import {
+  ActionIcon,
+  BadgeCustom,
+  CenterCustom,
+  SelectCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconView } from "@/components/_Icon/IconComponent";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { GridViewCustomSpan } from "@/components/_ShareComponent/GridViewCustomSpan";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { dummyMasterStatusTransaction } from "@/lib/dummy-data/_master/status-transaction";
+import { router, useLocalSearchParams } from "expo-router";
+import React from "react";
+import { View } from "react-native";
+import { Divider } from "react-native-paper";
+
+export default function AdminDonasiListOfDonatur() {
+  const { id } = useLocalSearchParams();
+  const searchComponent = (
+    <View style={{ flexDirection: "row", gap: 5 }}>
+      <SelectCustom
+        placeholder="Pilih status transaksi"
+        data={dummyMasterStatusTransaction}
+        onChange={(value) => console.log(value)}
+        styleContainer={{ width: "100%", marginBottom: 0 }}
+      />
+    </View>
+  );
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminBackButtonAntTitle newComponent={searchComponent} />
+        }
+      >
+        <GridViewCustomSpan
+          span1={3}
+          span2={5}
+          span3={4}
+          component1={
+            <TextCustom bold align="center">
+              Aksi
+            </TextCustom>
+          }
+          component2={
+            <TextCustom bold align="center">
+              Donatur
+            </TextCustom>
+          }
+          component3={
+            <TextCustom bold align="center">
+              Status
+            </TextCustom>
+          }
+        />
+        <Divider />
+        <StackCustom>
+          {Array.from({ length: 10 }).map((_, index) => (
+            <View key={index}>
+              <GridViewCustomSpan
+                span1={3}
+                span2={5}
+                span3={4}
+                component1={
+                  <CenterCustom>
+                    <ActionIcon
+                      icon={<IconView size={ICON_SIZE_BUTTON} color="black" />}
+                      onPress={() => {
+                        router.push(
+                          `/admin/donation/${id}/berhasil/transaction-detail`
+                        );
+                      }}
+                    />
+                  </CenterCustom>
+                }
+                component2={
+                  <TextCustom bold align="center" truncate>
+                    Bagas Banuna
+                  </TextCustom>
+                }
+                component3={
+                  <BadgeCustom
+                    style={{ alignSelf: "center" }}
+                    color={MainColor.green}
+                  >
+                    Berhasil
+                  </BadgeCustom>
+                }
+              />
+              <Divider />
+            </View>
+          ))}
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/donation/[id]/reject-input.tsx

@@ -0,0 +1,55 @@
+import {
+  AlertDefaultSystem,
+  BoxButtonOnFooter,
+  TextAreaCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function AdminDonationRejectInput() {
+  const { id } = useLocalSearchParams();
+  const [value, setValue] = useState(id as string);
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <AdminButtonReject
+        title="Reject"
+        onReject={() =>
+          AlertDefaultSystem({
+            title: "Reject",
+            message: "Apakah anda yakin ingin menolak data ini?",
+            textLeft: "Batal",
+            textRight: "Ya",
+            onPressLeft: () => {
+              router.back();
+            },
+            onPressRight: () => {
+              console.log("value:", value);
+              router.replace(`/admin/donation/reject/status`);
+            },
+          })
+        }
+      />
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <>
+      <ViewWrapper
+        footerComponent={buttonSubmit}
+        headerComponent={<AdminBackButtonAntTitle title="Penolakan Donasi" />}
+      >
+        <TextAreaCustom
+          value={value}
+          onChangeText={setValue}
+          placeholder="Masukan alasan"
+          required
+          showCount
+          maxLength={1000}
+        />
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/donation/[status]/status.tsx

@@ -1,18 +1,16 @@
 import {
     ActionIcon,
-    BaseBox,
     SearchInput,
     Spacing,
     TextCustom,
-    ViewWrapper,
+    ViewWrapper
 } from "@/components";
 import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
 import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
 import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
-import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
 import { Octicons } from "@expo/vector-icons";
-import { useLocalSearchParams } from "expo-router";
+import { router, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
 import { Divider } from "react-native-paper";
 
@@ -26,50 +24,46 @@ export default function AdminDonationStatus() {
   );
   return (
     <>
-      <ViewWrapper headerComponent={<AdminTitlePage title="Donasi" />}>
-        <AdminComp_BoxTitle
-          title={`${_.startCase(status as string)}`}
-          rightComponent={rightComponent}
-        />
-
-        <BaseBox>
-          <AdminTitleTable
-            title1="Aksi"
-            title2="Username"
-            title3="Judul Donasi"
+      <ViewWrapper
+        headerComponent={
+          <AdminComp_BoxTitle
+            title={`Donasi ${_.startCase(status as string)}`}
+            rightComponent={rightComponent}
           />
-          <Spacing />
-          <Divider />
+        }
+      >
+        <AdminTitleTable
+          title1="Aksi"
+          title2="Username"
+          title3="Judul Donasi"
+        />
+        <Spacing />
+        <Divider />
 
-          {Array.from({ length: 10 }).map((_, index) => (
-            <AdminTableValue
-              key={index}
-              value1={
-                <ActionIcon
-                  icon={
-                    <Octicons
-                      name="eye"
-                      size={ICON_SIZE_BUTTON}
-                      color="black"
-                    />
-                  }
-                  onPress={() => {
-                    // router.push(`/admin/donation/${index}/${status}`);
-                  }}
-                />
-              }
-              value2={<TextCustom truncate={1}>Username username</TextCustom>}
-              value3={
-                <TextCustom truncate={2}>
-                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                  Blanditiis asperiores quidem deleniti architecto eaque et
-                  nostrum, ad consequuntur eveniet quisquam quae voluptatum
-                  ducimus! Dolorem nobis modi officia debitis, beatae mollitia.
-                </TextCustom>
-              }
-            />
-          ))}
-        </BaseBox>
+        {Array.from({ length: 10 }).map((_, index) => (
+          <AdminTableValue
+            key={index}
+            value1={
+              <ActionIcon
+                icon={
+                  <Octicons name="eye" size={ICON_SIZE_BUTTON} color="black" />
+                }
+                onPress={() => {
+                  router.push(`/admin/donation/${index}/${status}`);
+                }}
+              />
+            }
+            value2={<TextCustom truncate={1}>Username username</TextCustom>}
+            value3={
+              <TextCustom truncate={2}>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                Blanditiis asperiores quidem deleniti architecto eaque et
+                nostrum, ad consequuntur eveniet quisquam quae voluptatum
+                ducimus! Dolorem nobis modi officia debitis, beatae mollitia.
+              </TextCustom>
+            }
+          />
+        ))}
       </ViewWrapper>
     </>
   );

app/(application)/admin/event/[id]/reject-input.tsx

@@ -39,7 +39,7 @@ export default function AdminEventRejectInput() {
     <>
       <ViewWrapper
         footerComponent={buttonSubmit}
-        headerComponent={<AdminBackButtonAntTitle title="Masukan Alasan" />}
+        headerComponent={<AdminBackButtonAntTitle title="Penolakan Event" />}
       >
         <TextAreaCustom
           value={value}

app/(application)/admin/investment/[id]/[status]/index.tsx

@@ -0,0 +1,244 @@
+import {
+  ActionIcon,
+  AlertDefaultSystem,
+  BadgeCustom,
+  BaseBox,
+  ButtonCustom,
+  DrawerCustom,
+  DummyLandscapeImage,
+  MenuDrawerDynamicGrid,
+  ProgressCustom,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper
+} from "@/components";
+import { IconProspectus } from "@/components/_Icon";
+import { IconDot, IconList } from "@/components/_Icon/IconComponent";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
+import AdminButtonReview from "@/components/_ShareComponent/Admin/ButtonReview";
+import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { router, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import React from "react";
+
+export default function AdminInvestmentDetail() {
+  const { id, status } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = React.useState(false);
+
+  const colorBadge = () => {
+    if (status === "publish") {
+      return MainColor.green;
+    } else if (status === "review") {
+      return MainColor.orange;
+    } else if (status === "reject") {
+      return MainColor.red;
+    } else {
+      return MainColor.placeholder;
+    }
+  };
+
+  const listData = [
+    {
+      label: "Username",
+      value: `Bagas Banuna ${id}`,
+    },
+    {
+      label: "Judul",
+      value: `Donasi Lorem ipsum dolor sit amet, consectetur adipisicing elit.`,
+    },
+    {
+      label: "Status",
+      value: (
+        <BadgeCustom color={colorBadge()}>
+          {_.startCase(status as string)}
+        </BadgeCustom>
+      ),
+    },
+    {
+      label: "Dana Dibutuhkan",
+      value: "Rp 10.000.000",
+    },
+    {
+      label: "Harga Perlembar",
+      value: "Rp 2500",
+    },
+    {
+      label: "Total Lembar",
+      value: "2490 lembar",
+    },
+    {
+      label: "ROI",
+      value: "4 %",
+    },
+    {
+      label: "Pembagian Deviden",
+      value: "3 bulan",
+    },
+    {
+      label: "Jadwal Pembagian",
+      value: "Selamanya",
+    },
+    {
+      label: "Pencarian Investor",
+      value: "30 Hari",
+    },
+  ];
+
+  const rightComponent = (
+    <ActionIcon
+      icon={<IconDot size={ICON_SIZE_BUTTON} />}
+      onPress={() => {
+        setOpenDrawer(true);
+      }}
+    />
+  );
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminBackButtonAntTitle
+            title={`Detail Data`}
+            rightComponent={status === "publish" && rightComponent}
+          />
+        }
+      >
+        {status === "publish" && (
+          <BaseBox>
+            <ProgressCustom size="lg" />
+            <Spacing />
+            <StackCustom gap={"xs"}>
+              <GridDetail_4_8
+                label={<TextCustom bold>Sisa Saham</TextCustom>}
+                value={<TextCustom>2490 lembar</TextCustom>}
+              />
+              <GridDetail_4_8
+                label={<TextCustom bold>Validasi Transaksi</TextCustom>}
+                value={<TextCustom>4 Transaksi</TextCustom>}
+              />
+            </StackCustom>
+          </BaseBox>
+        )}
+
+        <BaseBox>
+          <StackCustom>
+            <DummyLandscapeImage />
+            {listData.map((item, i) => (
+              <GridDetail_4_8
+                key={i}
+                label={<TextCustom bold>{item.label}</TextCustom>}
+                value={<TextCustom>{item.value}</TextCustom>}
+              />
+            ))}
+          </StackCustom>
+        </BaseBox>
+
+        <BaseBox>
+          <StackCustom>
+            <GridDetail_4_8
+              label={<TextCustom bold>File Prospektus</TextCustom>}
+              value={
+                <ButtonCustom
+                  iconLeft={
+                    <IconProspectus
+                      size={ICON_SIZE_BUTTON}
+                      color={MainColor.darkblue}
+                    />
+                  }
+                  onPress={() => {
+                    router.push(`/(application)/(file)/${id}`);
+                  }}
+                >
+                  Preview
+                </ButtonCustom>
+              }
+            />
+            <GridDetail_4_8
+              label={<TextCustom bold>File Dokumen</TextCustom>}
+              value={
+                <StackCustom>
+                  {Array.from({ length: 5 }).map((_, i) => (
+                    <ButtonCustom
+                      key={i}
+                      iconLeft={
+                        <IconProspectus
+                          size={ICON_SIZE_BUTTON}
+                          color={MainColor.darkblue}
+                        />
+                      }
+                      onPress={() => {
+                        router.push(`/(application)/(file)/${id}`);
+                      }}
+                    >
+                      Dokumen {i + 1}
+                    </ButtonCustom>
+                  ))}
+                </StackCustom>
+              }
+            />
+          </StackCustom>
+        </BaseBox>
+
+        {status === "review" && (
+          <AdminButtonReview
+            onPublish={() => {
+              AlertDefaultSystem({
+                title: "Publish",
+                message: "Apakah anda yakin ingin mempublikasikan data ini?",
+                textLeft: "Batal",
+                textRight: "Ya",
+                onPressLeft: () => {
+                  router.back();
+                },
+                onPressRight: () => {
+                  router.back();
+                },
+              });
+            }}
+            onReject={() => {
+              router.push(`/admin/investment/${id}/reject-input`);
+            }}
+          />
+        )}
+
+        {status === "reject" && (
+          <AdminButtonReject
+            title="Tambah Catatan"
+            onReject={() => {
+              router.push(`/admin/investment/${id}/reject-input`);
+            }}
+          />
+        )}
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              label: "Daftar Investor",
+              icon: <IconList />,
+              path: `/admin/investment/${id}/list-of-investor`,
+            },
+            // {
+            //   label: "Daftar Pencarian Dana",
+            //   icon: <IconList />,
+            //   path: `/admin/donation/${id}/list-disbursement-of-funds`,
+            // },
+          ]}
+          onPressItem={(item) => {
+            setOpenDrawer(false);
+            router.push(item.path as any);
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

app/(application)/admin/investment/[id]/[status]/transaction-detail.tsx

@@ -0,0 +1,80 @@
+import {
+  BadgeCustom,
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { MainColor } from "@/constants/color-palet";
+import dayjs from "dayjs";
+import { router, useLocalSearchParams } from "expo-router";
+
+export default function AdminInvestmentTransactionDetail() {
+  const { id } = useLocalSearchParams();
+
+  const buttonAction = (
+    <BoxButtonOnFooter>
+      <ButtonCustom onPress={() => router.back()}>Terima</ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+
+  const listData = [
+    {
+      label: "Investor",
+      value: "Bagas Banuna",
+    },
+    {
+      label: "Bank",
+      value: "BCA",
+    },
+    {
+      label: "Jumlah Investasi",
+      value: "Rp. 1.000.000",
+    },
+    {
+      label: "Status",
+      value: <BadgeCustom color={MainColor.green}>Berhasil</BadgeCustom>,
+    },
+    {
+      label: "Tanggal",
+      value: dayjs().format("DD-MM-YYYY HH:mm:ss"),
+    },
+    {
+      label: "Bukti Transfer",
+      value: (
+        <ButtonCustom
+          onPress={() =>
+            router.push(`/(application)/(image)/preview-image/${id}`)
+          }
+        >
+          Cek
+        </ButtonCustom>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title="Detail Transaksi Investor" />}
+        footerComponent={buttonAction}
+      >
+        <BaseBox>
+          <StackCustom>
+            {listData.map((item, index) => (
+              <GridDetail_4_8
+                key={index}
+                label={<TextCustom bold>{item.label}</TextCustom>}
+                value={<TextCustom>{item.value}</TextCustom>}
+              />
+            ))}
+          </StackCustom>
+        </BaseBox>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/investment/[id]/list-of-investor.tsx

@@ -0,0 +1,107 @@
+import {
+  ActionIcon,
+  BadgeCustom,
+  CenterCustom,
+  SelectCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconView } from "@/components/_Icon/IconComponent";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { GridViewCustomSpan } from "@/components/_ShareComponent/GridViewCustomSpan";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { dummyMasterStatusTransaction } from "@/lib/dummy-data/_master/status-transaction";
+import { router, useLocalSearchParams } from "expo-router";
+import React from "react";
+import { View } from "react-native";
+import { Divider } from "react-native-paper";
+
+export default function AdminInvestmentListOfInvestor() {
+  const { id } = useLocalSearchParams();
+  const searchComponent = (
+    <View style={{ flexDirection: "row", gap: 5 }}>
+      <SelectCustom
+        placeholder="Pilih status transaksi"
+        data={dummyMasterStatusTransaction}
+        onChange={(value) => console.log(value)}
+        styleContainer={{ width: "100%", marginBottom: 0 }}
+      />
+    </View>
+  );
+
+  const headerComponent = (
+    <StackCustom gap={"xs"}>
+      <AdminBackButtonAntTitle title="Daftar Investor" />
+      {searchComponent}
+    </StackCustom>
+  );
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={headerComponent}
+      >
+        <GridViewCustomSpan
+          span1={3}
+          span2={5}
+          span3={4}
+          component1={
+            <TextCustom bold align="center">
+              Aksi
+            </TextCustom>
+          }
+          component2={
+            <TextCustom bold align="center">
+              Investor
+            </TextCustom>
+          }
+          component3={
+            <TextCustom bold align="center">
+              Status
+            </TextCustom>
+          }
+        />
+        <Divider />
+        <StackCustom>
+          {Array.from({ length: 10 }).map((_, index) => (
+            <View key={index}>
+              <GridViewCustomSpan
+                span1={3}
+                span2={5}
+                span3={4}
+                component1={
+                  <CenterCustom>
+                    <ActionIcon
+                      icon={<IconView size={ICON_SIZE_BUTTON} color="black" />}
+                      onPress={() => {
+                        router.push(
+                          `/admin/investment/${id}/berhasil/transaction-detail`
+                        );
+                      }}
+                    />
+                  </CenterCustom>
+                }
+                component2={
+                  <TextCustom bold align="center" truncate>
+                    Bagas Banuna
+                  </TextCustom>
+                }
+                component3={
+                  <BadgeCustom
+                    style={{ alignSelf: "center" }}
+                    color={MainColor.green}
+                  >
+                    Berhasil
+                  </BadgeCustom>
+                }
+              />
+              <Divider />
+            </View>
+          ))}
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/investment/[id]/reject-input.tsx

@@ -0,0 +1,55 @@
+import {
+  AlertDefaultSystem,
+  BoxButtonOnFooter,
+  TextAreaCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function AdminInvestmentRejectInput() {
+  const { id } = useLocalSearchParams();
+  const [value, setValue] = useState(id as string);
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <AdminButtonReject
+        title="Reject"
+        onReject={() =>
+          AlertDefaultSystem({
+            title: "Reject",
+            message: "Apakah anda yakin ingin menolak data ini?",
+            textLeft: "Batal",
+            textRight: "Ya",
+            onPressLeft: () => {
+              router.back();
+            },
+            onPressRight: () => {
+              console.log("value:", value);
+              router.replace(`/admin/investment/reject/status`);
+            },
+          })
+        }
+      />
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <>
+      <ViewWrapper
+        footerComponent={buttonSubmit}
+        headerComponent={<AdminBackButtonAntTitle title="Penolakan Investasi" />}
+      >
+        <TextAreaCustom
+          value={value}
+          onChangeText={setValue}
+          placeholder="Masukan alasan"
+          required
+          showCount
+          maxLength={1000}
+        />
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/investment/[status]/status.tsx

@@ -0,0 +1,70 @@
+import {
+    ActionIcon,
+    SearchInput,
+    Spacing,
+    TextCustom,
+    ViewWrapper
+} from "@/components";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
+import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { Octicons } from "@expo/vector-icons";
+import { router, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { Divider } from "react-native-paper";
+
+export default function AdminInvestmentStatus() {
+  const { status } = useLocalSearchParams();
+  const rightComponent = (
+    <SearchInput
+      containerStyle={{ width: "100%", marginBottom: 0 }}
+      placeholder="Cari"
+    />
+  );
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminComp_BoxTitle
+            title={`Investasi ${_.startCase(status as string)}`}
+            rightComponent={rightComponent}
+          />
+        }
+      >
+        <AdminTitleTable
+          title1="Aksi"
+          title2="Username"
+          title3="Judul Investasi"
+        />
+        <Spacing />
+        <Divider />
+
+        {Array.from({ length: 10 }).map((_, index) => (
+          <AdminTableValue
+            key={index}
+            value1={
+              <ActionIcon
+                icon={
+                  <Octicons name="eye" size={ICON_SIZE_BUTTON} color="black" />
+                }
+                onPress={() => {
+                  router.push(`/admin/investment/${index}/${status}`);
+                }}
+              />
+            }
+            value2={<TextCustom truncate={1}>Username username</TextCustom>}
+            value3={
+              <TextCustom truncate={2}>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                Blanditiis asperiores quidem deleniti architecto eaque et
+                nostrum, ad consequuntur eveniet quisquam quae voluptatum
+                ducimus! Dolorem nobis modi officia debitis, beatae mollitia.
+              </TextCustom>
+            }
+          />
+        ))}
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/investment/index.tsx

@@ -1,11 +1,43 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import { Spacing, StackCustom, ViewWrapper } from "@/components";
+import {
+  IconPublish,
+  IconReject,
+  IconReview,
+} from "@/components/_Icon/IconComponent";
+import AdminComp_BoxDashboard from "@/components/_ShareComponent/Admin/BoxDashboard";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { MainColor } from "@/constants/color-palet";
 
 export default function AdminInvestment() {
   return (
     <>
       <ViewWrapper>
-        <TextCustom>Admin Investment</TextCustom>
+        <AdminTitlePage title="Investasi" />
+        <Spacing />
+        <StackCustom gap={"xs"}>
+          {listData.map((item, i) => (
+            <AdminComp_BoxDashboard key={i} item={item} />
+          ))}
+        </StackCustom>
       </ViewWrapper>
     </>
   );
 }
+
+const listData = [
+  {
+    label: "Publish",
+    value: 3,
+    icon: <IconPublish size={25} color={MainColor.green} />,
+  },
+  {
+    label: "Review",
+    value: 5,
+    icon: <IconReview size={25} color={MainColor.orange} />,
+  },
+  {
+    label: "Reject",
+    value: 8,
+    icon: <IconReject size={25} color={MainColor.red} />,
+  },
+];

app/(application)/admin/investment/publish.tsx

@@ -1,11 +0,0 @@
-import { TextCustom, ViewWrapper } from "@/components";
-
-export default function AdminInvestmentPublish() {
-  return (
-    <>
-      <ViewWrapper>
-        <TextCustom>Admin Investment Publish</TextCustom>
-      </ViewWrapper>
-    </>
-  );
-}

app/(application)/admin/investment/reject.tsx

@@ -1,11 +0,0 @@
-import { TextCustom, ViewWrapper } from "@/components";
-
-export default function AdminInvestmentReject() {
-  return (
-    <>
-      <ViewWrapper>
-        <TextCustom>Admin Investment Reject</TextCustom>
-      </ViewWrapper>
-    </>
-  );
-}

app/(application)/admin/investment/review.tsx

@@ -1,11 +0,0 @@
-import { TextCustom, ViewWrapper } from "@/components";
-
-export default function AdminInvestmentReview() {
-  return (
-    <>
-      <ViewWrapper>
-        <TextCustom>Admin Investment Review</TextCustom>
-      </ViewWrapper>
-    </>
-  );
-}

app/(application)/admin/job/[id]/reject-input.tsx

@@ -39,7 +39,7 @@ export default function AdminJobRejectInput() {
     <>
       <ViewWrapper
         footerComponent={buttonSubmit}
-        headerComponent={<AdminBackButtonAntTitle title="Masukan Alasan" />}
+        headerComponent={<AdminBackButtonAntTitle title="Penolakan Job" />}
       >
         <TextAreaCustom
           value={value}

app/(application)/admin/voting/[id]/reject-input.tsx

@@ -39,7 +39,7 @@ export default function AdminVotingRejectInput() {
     <>
       <ViewWrapper
         footerComponent={buttonSubmit}
-        headerComponent={<AdminBackButtonAntTitle title="Masukan Alasan" />}
+        headerComponent={<AdminBackButtonAntTitle title="Penolakan Voting" />}
       >
         <TextAreaCustom
           value={value}

app/(application)/coba/button-upload.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { ButtonCustom } from "@/components";
+import pickImage from "@/utils/pickImage";
+import { Feather } from "@expo/vector-icons";
+import * as ImagePicker from "expo-image-picker";
+import { Alert } from "react-native";
+
+// Daftar ekstensi yang diperbolehkan
+const ALLOWED_EXTENSIONS = ["jpg", "jpeg", "png"];
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+
+export default function ButtonUpload({
+  setImageUri,
+}: {
+  setImageUri: (uri: string) => void;
+}) {
+  const pickImg = async () => {
+    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+    if (status !== "granted") {
+      Alert.alert(
+        "Permission Denied",
+        "You need to grant permission to access your media library"
+      );
+      return;
+    }
+
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      allowsEditing: true,
+      aspect: [4, 3],
+      quality: 1,
+    });
+
+    if (result.canceled || !result.assets[0]?.uri) {
+      return;
+    }
+
+    const uri = result.assets[0].uri;
+    const filename = uri.split("/").pop()?.toLowerCase() || "";
+    const match = /\.(\w+)$/.exec(filename);
+    const extension = match ? match[1] : "";
+
+    // Validasi ekstensi
+    if (!extension || !ALLOWED_EXTENSIONS.includes(extension)) {
+      Alert.alert(
+        "File Tidak Valid",
+        "Hanya file JPG, JPEG, dan PNG yang diperbolehkan."
+      );
+      return;
+    }
+
+    // Opsional: Validasi ukuran file (jika metadata tersedia)
+    // Catatan: Di Expo, `file.size` mungkin tidak tersedia di semua platform
+    const asset = result.assets[0];
+    if (asset.fileSize && asset.fileSize > MAX_FILE_SIZE) {
+      Alert.alert("File Terlalu Besar", "Ukuran file maksimal adalah 5MB.");
+      return;
+    }
+
+    // Jika lolos validasi, simpan URI
+    setImageUri(uri);
+  };
+
+  return (
+    <ButtonCustom
+      iconLeft={<Feather name="upload" size={14} color="black" />}
+      style={{
+        width: 120,
+        margin: "auto",
+      }}
+      onPress={() => {
+        pickImage({
+          setImageUri,
+        });
+      }}
+    >
+      Upload
+    </ButtonCustom>
+  );
+}

app/(application)/coba/index.tsx

@@ -1,184 +1,39 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
+import { Stack } from "expo-router";
 import React from "react";
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-  Dimensions,
-  ScrollView,
-} from "react-native";
-import { Ionicons } from "@expo/vector-icons";
-import { router, Stack } from "expo-router";
-import EventDetailScreen from "./double-scroll";
-import LeftButtonCustom from "@/components/Button/BackButton";
-import CustomUploadButton from "./upload-button";
+import { Dimensions, StyleSheet } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
+import ScreenViewImage from "./screen-view-image";
 
 const { width } = Dimensions.get("window");
 
-// Sample Screen Components
-const HomeScreen = () => (
-  <View style={styles.screen}>
-    <Text style={styles.screenTitle}>Selamat Datang!</Text>
-    <Text style={styles.screenText}>
-      Ini adalah halaman utama aplikasi Anda
-    </Text>
-  </View>
-);
-const SearchScreen = () => (
-  <View style={styles.screen}>
-    <Text style={styles.screenTitle}>Search Screen</Text>
-    <Text style={styles.screenText}>Cari apa yang Anda butuhkan</Text>
-  </View>
-);
-
-const ProfileScreen = () => (
-  <View style={styles.screen}>
-    <Text style={styles.screenTitle}>Profile Screen</Text>
-    <Text style={styles.screenText}>Informasi profil pengguna</Text>
-  </View>
-);
-
-const NotificationScreen = () => (
-  <View style={styles.screen}>
-    {Array.from({ length: 10 }).map((_, index) => (
-      <View key={index}>
-        <Text style={styles.screenTitle}>Notifications</Text>
-        <Text style={styles.screenText}>Notifikasi terbaru Anda</Text>
-      </View>
-    ))}
-  </View>
-);
-
-// Custom Tab Component
-const CustomTab = ({ icon, label, isActive, onPress }: any) => (
-  <TouchableOpacity
-    style={[styles.tabItem, isActive && styles.activeTab]}
-    onPress={onPress}
-    activeOpacity={0.7}
-  >
-    <View
-      style={[styles.iconContainer, isActive && styles.activeIconContainer]}
-    >
-      <Ionicons name={icon} size={24} color={isActive ? "#fff" : "#666"} />
-    </View>
-    <Text style={[styles.tabLabel, isActive && styles.activeTabLabel]}>
-      {label}
-    </Text>
-    {isActive && <View style={styles.activeIndicator} />}
-  </TouchableOpacity>
-);
-
 // Main Custom Tab Navigator
 const CustomTabNavigator = () => {
-  const [activeTab, setActiveTab] = React.useState("home");
-  const [showHome, setShowHome] = React.useState(true);
-
-  const tabs = [
-    {
-      id: "search",
-      icon: "search-outline",
-      activeIcon: "search",
-      label: "Event",
-      component: SearchScreen,
-      path: "/event",
-    },
-    {
-      id: "notifications",
-      icon: "notifications-outline",
-      activeIcon: "notifications",
-      label: "Forum",
-      component: NotificationScreen,
-      path: "/forum",
-    },
-    {
-      id: "profile",
-      icon: "person-outline",
-      activeIcon: "person",
-      label: "Katalog",
-      component: ProfileScreen,
-      path: "/profile",
-    },
-  ];
-
-  // Function untuk handle tab press
-  const handleTabPress = (tabId: string) => {
-    setActiveTab(tabId);
-    setShowHome(false); // Hide home when any tab is pressed
-  };
-
-  // Determine which component to show
-  const getActiveComponent = () => {
-    if (showHome || activeTab === "home") {
-      return HomeScreen;
-    }
-    // const selectedTab = tabs.find((tab) => tab.id === activeTab);
-    // return selectedTab ? selectedTab.component : HomeScreen;
-    return HomeScreen;
-  };
-
-  const ActiveComponent = getActiveComponent();
-
-  const handleImageUpload = (file: any) => {
-    console.log("Gambar dipilih:", file);
-    // Upload ke server
-  };
-
-  const handlePdfOrPngUpload = (file: any) => {
-    console.log("PDF atau PNG dipilih:", file);
-  };
-
   return (
     <>
       <SafeAreaView edges={["bottom"]} style={styles.container}>
         <Stack.Screen
           options={{
-            title: "Custom Tab Navigator",
+            title: "Tampilan Percobaan",
           }}
         />
-        <EventDetailScreen />
+        <ScreenViewImage />
+        {/* <ScreenUpload/> */}
+        {/* <EventDetailScreen /> */}
 
-        <CustomUploadButton
+        {/* <CustomUploadButton
           allowedExtensions={["jpeg", "png"]}
           buttonTitle="Unggah Gambar (JPEG/PNG)"
           onFileSelected={handleImageUpload}
-        />
+        /> */}
 
         {/* Hanya PDF atau PNG */}
-        <CustomUploadButton
+        {/* <CustomUploadButton
           allowedExtensions={["pdf"]}
           buttonTitle="Unggah PDF atau PNG"
           onFileSelected={handlePdfOrPngUpload}
-        />
+        /> */}
       </SafeAreaView>
     </>
-    // <View style={styles.container}>
-    //   {/* Content Area */}
-    //   <ScrollView>
-    //     <View style={styles.content}>
-    //       <ActiveComponent />
-    //     </View>
-    //   </ScrollView>
-
-    //   {/* Custom Tab Bar */}
-    //   <View style={styles.tabBar}>
-    //     <View style={styles.tabContainer}>
-    //       {tabs.map((e) => (
-    //         <CustomTab
-    //           key={e.id}
-    //           icon={activeTab === e.id ? e.activeIcon : e.icon}
-    //           label={e.label}
-    //           isActive={activeTab === e.id && !showHome}
-    //           onPress={() => {
-    //             handleTabPress(e.id);
-    //             router.push(e.path as any);
-    //           }}
-    //         />
-    //       ))}
-    //     </View>
-    //   </View>
-    // </View>
   );
 };
 

app/(application)/coba/screen-upload.tsx

@@ -0,0 +1,74 @@
+import {
+  AvatarCustom,
+  BoxButtonOnFooter,
+  ButtonCustom,
+  StackCustom,
+  ViewWrapper,
+} from "@/components";
+import DIRECTORY_ID from "@/constants/directory-id";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import { uploadImageService } from "@/service/upload-service";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { router } from "expo-router";
+import { useState } from "react";
+import { View } from "react-native";
+import ButtonUpload from "./button-upload";
+
+export default function ScreenUpload() {
+  const [imageUri, setImageUri] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  async function onUpload() {
+    setIsLoading(true);
+    try {
+      const response = await uploadImageService({
+        imageUri,
+        dirId: DIRECTORY_ID.profile_foto,
+      });
+
+      console.log("Response", JSON.stringify(response, null, 2));
+      if (response.success) {
+        await AsyncStorage.setItem("idImage", response.data.id);
+        router.back();
+      }
+    } catch (error) {
+      console.log("Error", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  async function buttonUpload() {
+    return (
+      <>
+        <BoxButtonOnFooter>
+          <ButtonCustom isLoading={isLoading} onPress={() => onUpload()}>
+            Simpan
+          </ButtonCustom>
+        </BoxButtonOnFooter>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <ViewWrapper footerComponent={buttonUpload()}>
+        <StackCustom>
+          <View
+            style={{
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <AvatarCustom
+              source={imageUri ? { uri: imageUri } : DUMMY_IMAGE.avatar}
+              size="xl"
+            />
+          </View>
+
+          <ButtonUpload setImageUri={setImageUri} />
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/coba/screen-view-image.tsx

@@ -0,0 +1,73 @@
+/* eslint-disable no-unused-expressions */
+import { ButtonCustom, StackCustom, ViewWrapper } from "@/components";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { router, useFocusEffect } from "expo-router";
+import { useCallback, useState } from "react";
+import { ActivityIndicator, Image } from "react-native";
+
+export default function ScreenViewImage() {
+  const [dataId, setDataId] = useState<string | null>(null);
+  useFocusEffect(
+    useCallback(() => {
+      AsyncStorage.getItem("idImage").then((id) => {
+        setDataId(id || null);
+      });
+    }, [])
+  );
+
+  return (
+    <ViewWrapper>
+      <StackCustom>
+        {dataId ? (
+          <Image
+            onLoad={() => {
+              <ActivityIndicator size="large" />
+            }}
+            source={{ uri: APIs.GET({ fileId: dataId }) }}
+            style={{
+              width: 200,
+              height: 200,
+              margin: "auto",
+            }}
+          />
+        ) : (
+          <Image
+            source={DUMMY_IMAGE.avatar}
+            style={{
+              width: 200,
+              height: 200,
+              margin: "auto",
+            }}
+          />
+        )}
+
+        <ButtonCustom onPress={async () => {
+            await AsyncStorage.removeItem("idImage");
+            router.push("/coba/screen-upload");
+        }}>
+          Upload image
+        </ButtonCustom>
+      </StackCustom>
+    </ViewWrapper>
+  );
+}
+
+const APIs = {
+  /**
+   *
+   * @param fileId | file id from wibu storage , atau bisa disimpan di DB
+   * @param size | file size 10 - 1000 , tergantung ukuran file dan kebutuhan saar di tampilkan
+   * @type {string}
+   */
+  GET: ({ fileId, size }: { fileId: string; size?: string }) =>
+    size
+      ? `https://wibu-storage.wibudev.com/api/files/${fileId}-size-${size}`
+      : `https://wibu-storage.wibudev.com/api/files/${fileId}`,
+
+  /**
+   * @type {string}
+   * @returns alamat API dari wibu storage
+   */
+  GET_NO_PARAMS: "https://wibu-storage.wibudev.com/api/files/",
+};

app/(application)/coba/upload-image.tsx

@@ -0,0 +1,131 @@
+import { apiConfig } from "@/service/api-config";
+import * as ImagePicker from "expo-image-picker";
+import { useState } from "react";
+import {
+  ActivityIndicator,
+  Alert,
+  Button,
+  Image,
+  Text,
+  View,
+} from "react-native";
+
+// Daftar ekstensi yang diperbolehkan
+const ALLOWED_EXTENSIONS = ["jpg", "jpeg", "png"];
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+
+export default function UploadImage() {
+  const [imageUri, setImageUri] = useState<string | null>(null);
+  const [uploading, setUploading] = useState(false);
+
+  const pickImage = async () => {
+    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+    if (status !== "granted") {
+      Alert.alert(
+        "Permission Denied",
+        "You need to grant permission to access your media library"
+      );
+      return;
+    }
+
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      allowsEditing: true,
+      aspect: [1, 1],
+      quality: 1,
+    });
+
+    if (result.canceled || !result.assets[0]?.uri) {
+      return;
+    }
+
+    const uri = result.assets[0].uri;
+    const filename = uri.split("/").pop()?.toLowerCase() || "";
+    const match = /\.(\w+)$/.exec(filename);
+    const extension = match ? match[1] : "";
+
+    // Validasi ekstensi
+    if (!extension || !ALLOWED_EXTENSIONS.includes(extension)) {
+      Alert.alert(
+        "File Tidak Valid",
+        "Hanya file JPG, JPEG, dan PNG yang diperbolehkan."
+      );
+      return;
+    }
+
+    // Opsional: Validasi ukuran file (jika metadata tersedia)
+    // Catatan: Di Expo, `file.size` mungkin tidak tersedia di semua platform
+    const asset = result.assets[0];
+    if (asset.fileSize && asset.fileSize > MAX_FILE_SIZE) {
+      Alert.alert("File Terlalu Besar", "Ukuran file maksimal adalah 5MB.");
+      return;
+    }
+
+    // Jika lolos validasi, simpan URI
+    setImageUri(uri);
+  };
+
+  const uploadImage = async () => {
+    if (!imageUri) return;
+
+    setUploading(true);
+
+    const uri = imageUri;
+    const filename = uri.split("/").pop();
+    const match = /\.(\w+)$/.exec(filename || "");
+    const type = match ? `image/${match[1]}` : "image";
+    const dirId = "cmeryhudo016lbpnn3vlhnufq";
+
+    const formData = new FormData();
+    // @ts-ignore: React Native tidak mengenal Blob secara langsung
+    formData.append("file", {
+      uri,
+      name: filename,
+      type,
+    });
+    formData.append("dirId", dirId);
+
+    try {
+      const response = await apiConfig.post("/mobile/upload", formData, {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+        timeout: 30000,
+      });
+
+      console.log("Response", JSON.stringify(response.data, null, 2));
+    } catch (error) {
+      console.log("Error", error);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  return (
+    <View style={{ flex: 1, padding: 20, justifyContent: "center" }}>
+      <Button title="Pilih Gambar" onPress={pickImage} />
+
+      {imageUri && (
+        <Image
+          source={{ uri: imageUri }}
+          style={{ width: 300, height: 300, margin: "auto" }}
+        />
+      )}
+
+      {imageUri && !uploading && (
+        <Button
+          title="Unggah Gambar"
+          onPress={uploadImage}
+          disabled={uploading}
+        />
+      )}
+
+      {uploading && (
+        <View style={{ marginTop: 20 }}>
+          <ActivityIndicator size="large" color="#0000ff" />
+          <Text>Mengunggah...</Text>
+        </View>
+      )}
+    </View>
+  );
+}

app/(application)/coba/upload-service.ts

@@ -0,0 +1,68 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { apiConfig } from "@/service/api-config";
+import Toast from "react-native-toast-message";
+
+export async function tryUploadService({
+  dirId,
+  imageUri,
+}: {
+  dirId: string;
+  imageUri: string | null;
+}) {
+  if (!imageUri) {
+    Toast.show({
+      type: "error",
+      text1: "Gagal",
+      text2: "Harap pilih gambar terlebih dahulu",
+    });
+    return;
+  }
+
+  try {
+    const uri = imageUri;
+    const filename = uri.split("/").pop();
+    const match = /\.(\w+)$/.exec(filename || "");
+    const type = match ? `image/${match[1]}` : "image";
+
+    const formData = new FormData();
+    // @ts-ignore: React Native tidak mengenal Blob secara langsung
+    formData.append("file", {
+      uri,
+      name: filename,
+      type,
+    });
+    formData.append("dirId", dirId);
+
+    const response = await apiConfig.post("/mobile/upload", formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+      timeout: 30000,
+    });
+
+    console.log("Response", JSON.stringify(response.data, null, 2));
+    const { data } = response;
+
+    if (!data.success) {
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: data.message,
+      });
+
+      return;
+    }
+
+    Toast.show({
+      type: "success",
+      text1: "File berhasil diunggah",
+    });
+
+    return data;
+  } catch (error) {
+    Toast.show({
+      type: "error",
+      text1: "File gagal diunggah",
+    });
+  }
+}

app/_layout.tsx

@@ -1,5 +1,5 @@
-import { MainColor } from "@/constants/color-palet";
-import { Stack } from "expo-router";
+import { AuthProvider } from "@/context/AuthContext";
+import AppRoot from "@/screens/RootLayout/AppRoot";
 import "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import Toast from "react-native-toast-message";
@@ -8,28 +8,9 @@ export default function RootLayout() {
   return (
     <>
       <SafeAreaProvider>
-        <Stack
-          screenOptions={{
-            headerStyle: { backgroundColor: MainColor.darkblue },
-            headerTitleStyle: { color: MainColor.yellow, fontWeight: "bold" },
-            headerTitleAlign: "center",
-          }}
-        >
-          <Stack.Screen
-            name="index"
-            options={{ title: "", headerBackVisible: false }}
-          />
-          <Stack.Screen name="+not-found" options={{ title: "" }} />
-          <Stack.Screen
-            name="verification"
-            options={{ title: "", headerBackVisible: false }}
-          />
-          <Stack.Screen
-            name="register"
-            options={{ title: "", headerBackVisible: false }}
-          />
-          <Stack.Screen name="(application)" options={{ headerShown: false }} />
-        </Stack>
+        <AuthProvider>
+          <AppRoot />
+        </AuthProvider>
       </SafeAreaProvider>
       <Toast />
     </>

components/Button/ButtonCenteredOnly.tsx

@@ -9,17 +9,24 @@ interface ButtonCenteredOnlyProps {
   children?: React.ReactNode;
   icon?: "plus" | "upload" | string;
   onPress: () => void;
+  isLoading?: boolean;
 }
 export default function ButtonCenteredOnly({
   onPress,
   children,
-  icon = "plus"
+  icon = "plus",
+  isLoading = false,
 }: ButtonCenteredOnlyProps) {
   return (
     <ButtonCustom
+      isLoading={isLoading}
       onPress={onPress}
       iconLeft={
-        <Feather name={icon as any} size={ICON_SIZE_BUTTON} color={MainColor.black} />
+        <Feather
+          name={icon as any}
+          size={ICON_SIZE_BUTTON}
+          color={MainColor.black}
+        />
       }
       style={[GStyles.buttonCentered50Percent]}
     >

components/Button/ButtonCustom.tsx

@@ -6,6 +6,7 @@ import { radiusMap } from "@/constants/radius-value";
 import { MainColor } from "@/constants/color-palet";
 import { stylesButton } from "./buttonCustomStyles";
 import { Href, router } from "expo-router";
+import { ActivityIndicator } from "react-native-paper";
 
 // Import radiusMap
 
@@ -23,6 +24,7 @@ interface ButtonProps {
   disabled?: boolean;
   iconLeft?: React.ReactNode;
   style?: StyleProp<ViewStyle>;
+  isLoading?: boolean;
 }
 
 const ButtonCustom: React.FC<ButtonProps> = ({
@@ -36,6 +38,7 @@ const ButtonCustom: React.FC<ButtonProps> = ({
   disabled = false,
   iconLeft,
   style,
+  isLoading = false,
 }) => {
   return (
     <TouchableOpacity
@@ -59,9 +62,13 @@ const ButtonCustom: React.FC<ButtonProps> = ({
     >
       {/* Render icon jika tersedia */}
       {iconLeft && iconLeft}
-      <Text style={[stylesButton.buttonText, { color: textColor }]}>
-        {children || title}
-      </Text>
+      {isLoading ? (
+        <ActivityIndicator size={18} color={MainColor.darkblue} />
+      ) : (
+        <Text style={[stylesButton.buttonText, { color: textColor }]}>
+          {children || title}
+        </Text>
+      )}
     </TouchableOpacity>
   );
 };

components/Select/SelectCustom.tsx

@@ -5,9 +5,11 @@ import {
   FlatList,
   Modal,
   Pressable,
+  StyleProp,
   Text,
   TouchableOpacity,
   View,
+  ViewStyle,
 } from "react-native";
 
 type SelectItem = {
@@ -24,6 +26,7 @@ type SelectProps = {
   disabled?: boolean; // <-- tambahkan prop disabled
   onChange: (value: string | number) => void;
   borderRadius?: number;
+  styleContainer?: StyleProp<ViewStyle>;
 };
 
 const SelectCustom: React.FC<SelectProps> = ({
@@ -35,6 +38,7 @@ const SelectCustom: React.FC<SelectProps> = ({
   disabled = false, // <-- default false
   onChange,
   borderRadius = 8,
+  styleContainer,
 }) => {
   const [modalVisible, setModalVisible] = useState(false);
 
@@ -43,7 +47,7 @@ const SelectCustom: React.FC<SelectProps> = ({
   const hasError = required && value === null; // <-- check if empty and required
 
   return (
-    <View style={GStyles.inputContainerArea}>
+    <View style={[GStyles.inputContainerArea, styleContainer]}>
       {label && (
         <Text style={GStyles.inputLabel}>
           {label}
@@ -52,7 +56,7 @@ const SelectCustom: React.FC<SelectProps> = ({
       )}
       <Pressable
         style={[
-          { borderRadius },
+          { borderRadius, },
           hasError ? GStyles.inputErrorBorder : null,
           GStyles.inputContainerInput,
           disabled && GStyles.disabledBox,

components/_Interface/types.ts

@@ -24,4 +24,5 @@ interface IMenuDrawerItem {
   label: string;
   path?: string;
   color?: string;
+  value?: string;
 }

components/_ShareComponent/Admin/BackButtonAntTitle.tsx

@@ -5,28 +5,37 @@ import AdminBackButton from "./BackButton";
 export default function AdminBackButtonAntTitle({
   title,
   rightComponent,
+  newComponent,
 }: {
-  title: string;
+  title?: string;
   rightComponent?: React.ReactNode;
+  newComponent?: React.ReactNode;
 }) {
   return (
     <>
       <Grid>
-        <Grid.Col span={2}>
+        <Grid.Col span={2} style={{ justifyContent: "center" }}>
           <AdminBackButton />
-          </Grid.Col>
-          <Grid.Col
-            span={8}
-            style={{ alignItems: "center", justifyContent: "center" }}
-          >
+        </Grid.Col>
+        <Grid.Col
+          span={newComponent ? 10 : 8}
+          style={{ alignItems: "center", justifyContent: "center" }}
+        >
+          {newComponent ? (
+            newComponent
+          ) : (
             <TextCustom bold size={"large"} align="center">
               {title}
             </TextCustom>
-          </Grid.Col>
-          <Grid.Col span={2} style={{ alignItems: "flex-end" }}>
-            {rightComponent}
-          </Grid.Col>
-        </Grid>
-      </>
-    );
-}
+          )}
+        </Grid.Col>
+        <Grid.Col
+          span={newComponent ? 0 : 2}
+          style={{ alignItems: "flex-end" }}
+        >
+          {rightComponent}
+        </Grid.Col>
+      </Grid>
+    </>
+  );
+}

components/_ShareComponent/GridViewCustomSpan.tsx

@@ -0,0 +1,40 @@
+import { Grid } from "@/components";
+
+export const GridViewCustomSpan = ({
+  span1,
+  span2,
+  span3,
+  component1,
+  component2,
+  component3,
+}: {
+  span1: number;
+  span2: number;
+  span3: number;
+  component1: React.ReactNode;
+  component2: React.ReactNode;
+  component3: React.ReactNode;
+}) => {
+  return (
+    <Grid>
+      <Grid.Col
+        span={span1 || 4}
+        style={{ justifyContent: "center", paddingRight: 5, paddingLeft: 5 }}
+      >
+        {component1}
+      </Grid.Col>
+      <Grid.Col
+        span={span2 || 4}
+        style={{ justifyContent: "center", paddingRight: 5, paddingLeft: 5 }}
+      >
+        {component2}
+      </Grid.Col>
+      <Grid.Col
+        span={span3 || 4}
+        style={{ justifyContent: "center", paddingRight: 5, paddingLeft: 5 }}
+      >
+        {component3}
+      </Grid.Col>
+    </Grid>
+  );
+};

components/_ShareComponent/GridView_4_4_4.tsx

@@ -0,0 +1,34 @@
+import { Grid } from "@/components";
+
+export const GridView_4_4_4 = ({
+  component1,
+  component2,
+  component3,
+}: {
+  component1: React.ReactNode;
+  component2: React.ReactNode;
+  component3: React.ReactNode;
+}) => {
+  return (
+    <Grid>
+      <Grid.Col
+        span={4}
+        style={{ justifyContent: "center", paddingRight: 5, paddingLeft: 5 }}
+      >
+        {component1}
+      </Grid.Col>
+      <Grid.Col
+        span={4}
+        style={{ justifyContent: "center", paddingRight: 5, paddingLeft: 5 }}
+      >
+        {component2}
+      </Grid.Col>
+      <Grid.Col
+        span={4}
+        style={{ justifyContent: "center", paddingRight: 5, paddingLeft: 5 }}
+      >
+        {component3}
+      </Grid.Col>
+    </Grid>
+  );
+};

constants/base-url-api-strorage.ts

@@ -0,0 +1,20 @@
+const API_STRORAGE = {
+  /**
+   *
+   * @param fileId | file id from wibu storage , atau bisa disimpan di DB
+   * @param size | file size 10 - 1000 , tergantung ukuran file dan kebutuhan saar di tampilkan
+   * @type {string}
+   */
+  GET: ({ fileId, size }: { fileId: string; size?: string }) =>
+    size
+      ? `https://wibu-storage.wibudev.com/api/files/${fileId}-size-${size}`
+      : `https://wibu-storage.wibudev.com/api/files/${fileId}`,
+
+  /**
+   * @type {string}
+   * @returns alamat API dari wibu storage
+   */
+  GET_NO_PARAMS: "https://wibu-storage.wibudev.com/api/files/",
+};
+
+export default API_STRORAGE;

constants/directory-id.ts

@@ -0,0 +1,33 @@
+const DIRECTORY_ID = {
+  profile_foto: "cm0x93rgo000jbp5tj8baoaus",
+  profile_background: "cm0x93ze8000lbp5t1a8uc9wl",
+  portofolio_logo: "cm0yjl6ug000310njwmk6j0tx",
+  map_pin: "cm0yjq8up000710njv5klra32",
+  map_image: "cm0yjqnxl000910njplqho07w",
+
+  // Investasi
+  investasi_image: "cm0yjs35h000b10njb35o12h1",
+  investasi_bukti_transfer: "cm0yjsflu000d10njrc3lnqho",
+  investasi_prospektus: "cm1soio74003p38bjyciwf1oy",
+  investasi_dokumen: "cm21g2hxw004d10dpx8j16tt7",
+  investasi_berita: "cm21g2yzc004f10dpbtqdfcjb",
+
+  // Donasi
+  donasi_image: "cm0yk1coh000f10nj597a99kv",
+  donasi_cerita_image: "cm2dvy9bi007v10dpmatb5yiy",
+  donasi_kabar: "cm2dvxo48007t10dpmmustxa2",
+  donasi_bukti_transfer: "cm0yk1pmh000h10njhi6m8b8t",
+  donasi_bukti_trf_pencairan_dana: "cm32s7h1q005yb5kuf5uiv5de",
+
+  // Job
+  job_image: "cm0ypp6zl0003kp7jf59zuvjy",
+
+  // Event
+  event_sponsor: "cm65zlbyf001udvmggnd6i0oh",
+  event_bukti_transfer: "cm65zlehy001wdvmgnobur2zh",
+
+  // Sticker
+  sticker: "cmanquv32002fcesbk49cj07g",
+};
+
+export default DIRECTORY_ID;

context/AuthContext.tsx

@@ -0,0 +1,238 @@
+import {
+  apiConfig,
+  apiLogin,
+  apiRegister,
+  apiValidationCode,
+} from "@/service/api-config";
+import { IUser } from "@/types/User";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { router } from "expo-router";
+import { createContext, useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
+
+// --- Types ---
+type AuthContextType = {
+  user: IUser | null;
+  token: string | null;
+  isLoading: boolean;
+  isAuthenticated: boolean;
+  isAdmin: boolean;
+  isUserActive: boolean;
+  loginWithNomor: (nomor: string) => Promise<void>;
+  validateOtp: (nomor: string) => Promise<any>;
+  logout: () => Promise<void>;
+  registerUser: (userData: {
+    username: string;
+    nomor: string;
+  }) => Promise<void>;
+  userData: (token: string) => Promise<any>;
+};
+
+// --- Create Context ---
+export const AuthContext = createContext<AuthContextType | undefined>(
+  undefined
+);
+
+export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
+  const [user, setUser] = useState<IUser | null>(null);
+  const [token, setToken] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  const isAuthenticated = !!user;
+  const isAdmin = user?.masterUserRoleId !== "1";
+  const isUserActive = user?.active === true;
+
+  // --- Load session from AsyncStorage on app start ---
+  useEffect(() => {
+    const loadSession = async () => {
+      try {
+        const storedToken = await AsyncStorage.getItem("authToken");
+        const storedUser = await AsyncStorage.getItem("userData");
+
+        if (storedToken) {
+          setToken(storedToken);
+        }
+
+        if (storedToken && storedUser) {
+          setToken(storedToken);
+          setUser(JSON.parse(storedUser));
+        }
+      } catch (error) {
+        console.error("Failed to load session", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadSession();
+  }, []);
+
+  // --- 1. Kirim nomor → dapat OTP ---
+  const loginWithNomor = async (nomor: string) => {
+    setIsLoading(true);
+    try {
+      const response = await apiLogin({ nomor: nomor });
+      await AsyncStorage.setItem("kode_otp", response.kodeId);
+    } catch (error: any) {
+      throw new Error(error.response?.data?.message || "Gagal kirim OTP");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // --- 2. Validasi OTP & cek user ---
+  const validateOtp = async (nomor: string) => {
+    try {
+      setIsLoading(true);
+      const response = await apiValidationCode({ nomor: nomor });
+
+      const { token } = response;
+      if (response.success) {
+        setToken(token);
+        await AsyncStorage.setItem("authToken", token);
+
+        const responseUser = await apiConfig.get(
+          `/mobile/user?token=${token}`,
+          {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          }
+        );
+        const dataUser = responseUser.data.data;
+
+        setUser(dataUser);
+        await AsyncStorage.setItem("userData", JSON.stringify(dataUser));
+
+        if (response.active) {
+          if (response.roleId === "1") {
+            return "/(application)/(user)/home";
+          } else {
+            return "/(application)/admin/dashboard";
+          }
+        } else {
+          return "/(application)/(user)/waiting-room";
+        }
+      } else {
+        Toast.show({
+          type: "info",
+          text1: "Anda belum terdaftar",
+          text2: "Silahkan daftar terlebih dahulu",
+        });
+        return `/register?nomor=${nomor}`;
+      }
+    } catch (error: any) {
+      console.log("Error validasi otp >>", (error as Error).message || error);
+      throw new Error(
+        error.response?.data?.message || "OTP salah atau user tidak ditemukan"
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // --- 3. Ambil data user ---
+  const userData = async (token: string) => {
+    try {
+      setIsLoading(true);
+      const response = await apiConfig.get(`/mobile/user?token=${token}`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      const dataUser = response.data.data;
+
+      setUser(dataUser);
+      await AsyncStorage.setItem("userData", JSON.stringify(dataUser));
+      return dataUser;
+    } catch (error: any) {
+      throw new Error(
+        error.response?.data?.message || "Gagal mengambil data user"
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // --- 4. Register jika user belum ada ---
+  const registerUser = async (userData: {
+    username: string;
+    nomor: string;
+  }) => {
+    setIsLoading(true);
+    try {
+      const response = await apiRegister({ data: userData });
+
+      const { token } = response;
+      if (!response.success) {
+        Toast.show({
+          type: "info",
+          text1: "Info",
+          text2: response.message,
+        });
+
+        return;
+      }
+
+      setToken(token);
+      await AsyncStorage.setItem("authToken", token);
+      Toast.show({
+        type: "success",
+        text1: "Sukses",
+        text2: "Anda berhasil terdaftar",
+      });
+      router.replace("/(application)/(user)/waiting-room");
+      return;
+    } catch (error: any) {
+      console.log("Error register", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // --- 5. Logout ---
+  const logout = async () => {
+    try {
+      setIsLoading(true);
+      setToken(null);
+      setUser(null);
+      await AsyncStorage.removeItem("authToken");
+      await AsyncStorage.removeItem("userData");
+      setIsLoading(false);
+
+      Toast.show({
+        type: "success",
+        text1: "Logout berhasil",
+        text2: "Anda berhasil keluar dari akun.",
+      });
+      router.replace("/");
+    } catch (error) {
+      console.log("Logout error (optional):", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <AuthContext.Provider
+        value={{
+          user,
+          token,
+          isLoading,
+          isAuthenticated,
+          isAdmin,
+          isUserActive,
+          loginWithNomor,
+          validateOtp,
+          logout,
+          registerUser,
+          userData,
+        }}
+      >
+        {children}
+      </AuthContext.Provider>
+    </>
+  );
+};

hooks/use-auth.ts

@@ -0,0 +1,10 @@
+import { AuthContext } from "@/context/AuthContext";
+import { useContext } from "react";
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+};