API Event

Add:
- api-client/api-event : fetch get one, update data, update status, create event

Fix:
- UI : create , detail dan status: untuk menyambungkan ke API

### 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)/(image)/preview-image/[id]/index.tsx

@@ -1,9 +1,33 @@
-import { LandscapeFrameUploaded, ViewWrapper } from "@/components";
+import { CenterCustom, TextCustom, ViewWrapper } from "@/components";
+import API_STRORAGE from "@/constants/base-url-api-strorage";
+import { Image } from "expo-image";
+import { useLocalSearchParams } from "expo-router";
+import React, { useState } from "react";
 
 export default function PreviewImage() {
+  const { id } = useLocalSearchParams();
+  const [isLoading, setIsLoading] = useState(true);
+
   return (
     <ViewWrapper>
-      <LandscapeFrameUploaded />
+      {id ? (
+        <Image
+          onLoad={() => {
+            setIsLoading(false);
+          }}
+          source={
+            isLoading
+              ? require("@/assets/images/loading.gif")
+              : API_STRORAGE.GET({ fileId: id as string })
+          }
+          contentFit="contain"
+          style={{ width: "100%", height: "100%" }}
+        />
+      ) : (
+        <CenterCustom>
+          <TextCustom>File not found</TextCustom>
+        </CenterCustom>
+      )}
     </ViewWrapper>
   );
 }

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)/collaboration/[id]/detail-project-main.tsx

@@ -8,7 +8,7 @@ import {
   Spacing,
   StackCustom,
   TextCustom,
-  ViewWrapper
+  ViewWrapper,
 } from "@/components";
 import { IconEdit } from "@/components/_Icon";
 import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection";

app/(application)/(user)/event/(tabs)/status.tsx

@@ -1,27 +1,57 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-    BoxWithHeaderSection,
-    Grid,
-    ScrollableCustom,
-    StackCustom,
-    TextCustom
+  BoxWithHeaderSection,
+  Grid,
+  LoaderCustom,
+  ScrollableCustom,
+  StackCustom,
+  TextCustom,
 } from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { useAuth } from "@/hooks/use-auth";
 import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
-import { useState } from "react";
+import { apiEventGetByStatus } from "@/service/api-client/api-event";
+import { useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function EventStatus() {
-  const id = "test-id-event";
-
+  const { user } = useAuth();
+  const id = user?.id || "";
   const [activeCategory, setActiveCategory] = useState<string | null>(
     "publish"
   );
+  const [listData, setListData] = useState([]);
+  const [loadingGetData, setLoadingGetData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [activeCategory, id])
+  );
+
+  async function onLoadData() {
+    try {
+      setLoadingGetData(true);
+      const response = await apiEventGetByStatus({
+        id: id!,
+        status: activeCategory!,
+      });
+      // console.log("Response", JSON.stringify(response.data, null, 2));
+      setListData(response.data);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setLoadingGetData(false);
+    }
+  }
 
   const handlePress = (item: any) => {
     setActiveCategory(item.value);
     // tambahkan logika lain seperti filter dsb.
   };
 
-  const scrollComponent = (
+  const tabsComponent = (
     <ScrollableCustom
       data={dummyMasterStatus.map((e, i) => ({
         id: i,
@@ -34,30 +64,36 @@ export default function EventStatus() {
   );
 
   return (
-    <ViewWrapper headerComponent={scrollComponent}>
-      <BoxWithHeaderSection href={`/event/${id}/${activeCategory}/detail-event`}>
-        <StackCustom gap={"xs"}>
-          <Grid>
-            <Grid.Col span={8}>
-              <TextCustom truncate bold>
-                Lorem ipsum,{" "}
-                <TextCustom color="green">{activeCategory}</TextCustom> dolor
-                sit amet consectetur adipisicing elit.
-              </TextCustom>
-            </Grid.Col>
-            <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
-              <TextCustom>{new Date().toLocaleDateString()}</TextCustom>
-            </Grid.Col>
-          </Grid>
+    <ViewWrapper headerComponent={tabsComponent}>
+      {loadingGetData ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Tidak ada data {activeCategory}</TextCustom>
+      ) : (
+        listData.map((item: any, i) => (
+          <BoxWithHeaderSection
+            key={i}
+            href={`/event/${item.id }/${activeCategory}/detail-event`}
+          >
+            <StackCustom gap={"xs"}>
+              <Grid>
+                <Grid.Col span={8}>
+                  <TextCustom truncate bold>
+                    {item?.title}
+                  </TextCustom>
+                </Grid.Col>
+                <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+                  <TextCustom>
+                    {new Date(item?.tanggal).toLocaleDateString()}
+                  </TextCustom>
+                </Grid.Col>
+              </Grid>
 
-          <TextCustom truncate={2}>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
-            eveniet ab eum ducimus tempore a quia deserunt quisquam. Tempora,
-            atque. Aperiam minima asperiores dicta perferendis quis adipisci,
-            dolore optio porro!
-          </TextCustom>
-        </StackCustom>
-      </BoxWithHeaderSection>
+              <TextCustom truncate={2}>{item?.deskripsi}</TextCustom>
+            </StackCustom>
+          </BoxWithHeaderSection>
+        ))
+      )}
     </ViewWrapper>
   );
 }

app/(application)/(user)/event/[id]/[status]/detail-event.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BaseBox,
   DotButton,
@@ -11,17 +12,64 @@ import {
 } from "@/components";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import LeftButtonCustom from "@/components/Button/BackButton";
-import Event_AlertButtonStatusSection from "@/screens/Event/AlertButtonStatusSection";
 import Event_ButtonStatusSection from "@/screens/Event/ButtonStatusSection";
 import { menuDrawerDraftEvent } from "@/screens/Event/menuDrawerDraft";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { apiEventGetOne } from "@/service/api-client/api-event";
+import { dateTimeView } from "@/utils/dateTimeView";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function EventDetailStatus() {
   const { id, status } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
-  const [openAlert, setOpenAlert] = useState(false);
-  const [openDeleteAlert, setOpenDeleteAlert] = useState(false);
+  // const [openAlert, setOpenAlert] = useState(false);
+
+  const [data, setData] = useState<any>();
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  async function onLoadData() {
+    try {
+      const response = await apiEventGetOne({ id: id as string });
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  }
+
+  const listData = [
+    {
+      title: "Lokasi",
+      value: data?.lokasi || "-",
+    },
+    {
+      title: "Tipe Acara",
+      value: data?.EventMaster_TipeAcara?.name || "-",
+    },
+    {
+      title: "Tanggal Mulai",
+      value: dateTimeView({ date: data?.tanggal }) || "-",
+    },
+    {
+      title: "Tanggal Berakhir",
+      value: dateTimeView({ date: data?.tanggalSelesai }) || "-",
+    },
+    {
+      title: "Deskripsi",
+      value: data?.deskripsi || "-",
+    },
+  ];
 
   const handlePress = (item: IMenuDrawerItem) => {
     console.log("PATH >> ", item.path);
@@ -45,7 +93,7 @@ export default function EventDetailStatus() {
         <BaseBox>
           <StackCustom>
             <TextCustom bold align="center" size="xlarge">
-              Judul event {status}
+              {data?.title || "-"}
             </TextCustom>
             {listData.map((item, index) => (
               <Grid key={index}>
@@ -60,9 +108,8 @@ export default function EventDetailStatus() {
           </StackCustom>
         </BaseBox>
         <Event_ButtonStatusSection
+          id={id as string}
           status={status as string}
-          onOpenAlert={setOpenAlert}
-          onOpenDeleteAlert={setOpenDeleteAlert}
         />
         <Spacing />
       </ViewWrapper>
@@ -70,7 +117,7 @@ export default function EventDetailStatus() {
       <DrawerCustom
         isVisible={openDrawer}
         closeDrawer={() => setOpenDrawer(false)}
-        height={250}
+        height={"auto"}
       >
         <MenuDrawerDynamicGrid
           data={menuDrawerDraftEvent({ id: id as string }) as any}
@@ -78,40 +125,6 @@ export default function EventDetailStatus() {
           onPressItem={handlePress as any}
         />
       </DrawerCustom>
-
-      <Event_AlertButtonStatusSection
-        id={id as string}
-        status={status as string}
-        openAlert={openAlert}
-        setOpenAlert={setOpenAlert}
-        openDeleteAlert={openDeleteAlert}
-        setOpenDeleteAlert={setOpenDeleteAlert}
-      />
     </>
   );
 }
-
-const listData = [
-  {
-    title: "Lokasi",
-    value:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur eveniet ab eum ducimus tempore a quia deserunt quisquam. Tempora, atque. Aperiam minima asperiores dicta perferendis quis adipisci, dolore optio porro!",
-  },
-  {
-    title: "Tipe Acara",
-    value: "Workshop",
-  },
-  {
-    title: "Tanggal Mulai",
-    value: "Senin, 18 Juli 2025, 10:00 WIB",
-  },
-  {
-    title: "Tanggal Berakhir",
-    value: "Selasa, 19 Juli 2025, 12:00 WIB",
-  },
-  {
-    title: "Deskripsi",
-    value:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur eveniet ab eum ducimus tempore a quia deserunt quisquam. Tempora, atque. Aperiam minima asperiores dicta perferendis quis adipisci, dolore optio porro!",
-  },
-];

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

@@ -1,106 +1,265 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   ButtonCustom,
+  LoaderCustom,
   SelectCustom,
+  Spacing,
   StackCustom,
   TextAreaCustom,
+  TextCustom,
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
 import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
-import { masterTypeEvent } from "@/lib/dummy-data/event/master-type-event";
+import {
+  apiEventGetOne,
+  apiEventUpdateData,
+} from "@/service/api-client/api-event";
+import { apiMasterEventType } from "@/service/api-client/api-master";
 import { DateTimePickerEvent } from "@react-native-community/datetimepicker";
-import { router } from "expo-router";
-import React, { useState } from "react";
-import { Platform } from "react-native";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import React, { useCallback, useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function EventEdit() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any>();
+  //   {
+  //   title: "",
+  //   lokasi: "",
+  //   deskripsi: "",
+  //   eventMaster_TipeAcaraId: "",
+  //   tanggal: "",
+  //   tanggalSelesai: "",
+  //   authorId: "",
+  // }
+  const [listTypeEvent, setListTypeEvent] = useState([]);
   const [selectedDate, setSelectedDate] = useState<
     Date | DateTimePickerEvent | null
-  >(null);
+  >();
 
   const [selectedEndDate, setSelectedEndDate] = useState<
     Date | DateTimePickerEvent | null
-  >(null);
+  >();
 
-  const handlerSubmit = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadData, setIsLoadData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  async function onLoadData() {
     try {
-      if (selectedDate) {
-        console.log("Tanggal yang dipilih:", selectedDate);
-        console.log(`ISO Format ${Platform.OS}:`, selectedDate.toString());
-        // Kirim ke API atau proses lanjutan
-      } else {
-        console.log("Tanggal belum dipilih");
+      setIsLoadData(true);
+      const response = await apiEventGetOne({ id: id as string });
+      if (response.success) {
+        setData(response.data);
+        setSelectedDate(new Date(response.data.tanggal));
+        setSelectedEndDate(new Date(response.data.tanggalSelesai));
       }
-
-      if (selectedEndDate) {
-        console.log("Tanggal yang dipilih:", selectedEndDate);
-        console.log(`ISO Format ${Platform.OS}:`, selectedEndDate.toString());
-        // Kirim ke API atau proses lanjutan
-      } else {
-        console.log("Tanggal berakhir belum dipilih");
-      }
-
-      console.log("Data berhasil terupdate");
-      router.back()
     } catch (error) {
-      console.log(error);
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadData(false);
+    }
+  }
+
+  useEffect(() => {
+    onLoadMasterEventType();
+  }, []);
+
+  const onLoadMasterEventType = async () => {
+    try {
+      const response = await apiMasterEventType();
+      setListTypeEvent(response.data);
+    } catch (error) {
+      console.log("Error onLoadMasterEventType", error);
     }
   };
 
-  const buttonSubmit = (
-    <ButtonCustom title="Update" onPress={handlerSubmit} />
-  );
+  const validateDate = () => {
+    if (
+      data?.title === "" ||
+      data?.lokasi === "" ||
+      data?.deskripsi === "" ||
+      data?.eventMaster_TipeAcaraId === ""
+    ) {
+      Toast.show({
+        type: "info",
+        text1: "Info",
+        text2: "Lengkapi semua data",
+      });
+      return;
+    }
+
+    const startDate = new Date(selectedDate as any);
+    const endDate = new Date(selectedEndDate as any);
+
+    if (startDate >= endDate) {
+      Toast.show({
+        type: "info",
+        text1: "Info",
+        text2: "Ubah tanggal berakhirnya event",
+      });
+      return;
+    }
+  };
+
+  const handlerSubmit = async () => {
+    validateDate();
+    try {
+      setIsLoading(true);
+      const newData = {
+        ...data,
+        tanggal: new Date(selectedDate as any).toISOString(),
+        tanggalSelesai: new Date(selectedEndDate as any).toISOString(),
+      };
+
+      const response = await apiEventUpdateData({
+        id: id as string,
+        data: newData,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: response.message,
+        });
+        return router.back();
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const validateDateRange = (
+    selectedDate: string | Date,
+    selectedEndDate: string | Date
+  ): { isValid: boolean; error?: string } => {
+    const startDate = new Date(selectedDate);
+    const endDate = new Date(selectedEndDate);
+
+    // Cek apakah tanggal valid
+    if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
+      return {
+        isValid: false,
+        error: "Invalid date provided",
+      };
+    }
+
+    if (startDate >= endDate) {
+      return {
+        isValid: false,
+        error: "Ubah tanggal berakhirnya event",
+      };
+    }
+
+    return {
+      isValid: true,
+      error: undefined,
+    };
+  };
 
   return (
     <>
       <ViewWrapper>
-        <StackCustom gap={"xs"}>
-          <TextInputCustom
-            placeholder="Masukkan nama event"
-            label="Nama Event"
-            required
-          />
-          <SelectCustom
-            label="Tipe Event"
-            placeholder="Pilih tipe event"
-            data={masterTypeEvent}
-            onChange={(value) => console.log(value)}
-          />
-          <TextInputCustom
-            label="Lokasi"
-            placeholder="Masukkan lokasi event"
-            required
-          />
+        {isLoadData ? (
+          <LoaderCustom />
+        ) : (
+          <StackCustom gap={"xs"}>
+            <TextInputCustom
+              placeholder="Masukkan nama event"
+              label="Nama Event"
+              required
+              value={data?.title}
+              onChangeText={(value) => setData({ ...data, title: value })}
+            />
+            <SelectCustom
+              label="Tipe Event"
+              placeholder="Pilih tipe event"
+              data={listTypeEvent.map((item: any) => ({
+                label: item.name,
+                value: item.id,
+              }))}
+              value={data?.eventMaster_TipeAcaraId || ""}
+              onChange={(value) => {
+                console.log(value);
+                setData({ ...data, eventMaster_TipeAcaraId: value });
+              }}
+            />
+            <TextInputCustom
+              label="Lokasi"
+              placeholder="Masukkan lokasi event"
+              required
+              value={data?.lokasi}
+              onChangeText={(value) => setData({ ...data, lokasi: value })}
+            />
+            <DateTimePickerCustom
+              minimumDate={new Date(Date.now())}
+              label="Tanggal & Waktu Mulai"
+              required
+              value={selectedDate as any}
+              onChange={(date: any) => {
+                setSelectedDate(date as any);
+              }}
+            />
+            <StackCustom gap={0}>
+              <DateTimePickerCustom
+                minimumDate={selectedDate as any}
+                label="Tanggal & Waktu Berakhir"
+                required
+                value={selectedEndDate as any}
+                onChange={(date: any) => {
+                  setSelectedEndDate(date as any);
+                }}
+              />
 
-          <DateTimePickerCustom
-            label="Tanggal & Waktu Mulai"
-            required
-            onChange={(date: Date) => {
-              setSelectedDate(date as any);
-            }}
-            value={selectedDate as any}
-            minimumDate={new Date(Date.now())}
-          />
+              {/* Muncul */}
+              {validateDateRange(selectedDate as any, selectedEndDate as any)
+                .isValid ? (
+                <TextCustom style={{ color: "green" }}>
+                  {
+                    validateDateRange(
+                      selectedDate as any,
+                      selectedEndDate as any
+                    ).error
+                  }
+                </TextCustom>
+              ) : (
+                <TextCustom style={{ color: "red" }}>
+                  {
+                    validateDateRange(
+                      selectedDate as any,
+                      selectedEndDate as any
+                    ).error
+                  }
+                </TextCustom>
+              )}
+              <Spacing />
+            </StackCustom>
 
-          <DateTimePickerCustom
-            label="Tanggal & Waktu Berakhir"
-            required
-            onChange={(date: Date) => {
-              setSelectedEndDate(date as any);
-            }}
-            value={selectedEndDate as any}
-          />
+            <TextAreaCustom
+              label="Deskripsi"
+              placeholder="Masukkan deskripsi event"
+              required
+              showCount
+              maxLength={100}
+              value={data?.deskripsi}
+              onChangeText={(value) => setData({ ...data, deskripsi: value })}
+            />
 
-          <TextAreaCustom
-            label="Deskripsi"
-            placeholder="Masukkan deskripsi event"
-            required
-            showCount
-            maxLength={100}
-          />
-
-          {buttonSubmit}
-        </StackCustom>
+            <ButtonCustom
+              isLoading={isLoading}
+              title="Update"
+              onPress={handlerSubmit}
+            />
+          </StackCustom>
+        )}
       </ViewWrapper>
     </>
   );

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

@@ -1,19 +1,51 @@
 import {
   ButtonCustom,
   SelectCustom,
+  Spacing,
   StackCustom,
   TextAreaCustom,
+  TextCustom,
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
 import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
-import { masterTypeEvent } from "@/lib/dummy-data/event/master-type-event";
+import { useAuth } from "@/hooks/use-auth";
+import { apiEventCreate } from "@/service/api-client/api-event";
+import { apiMasterEventType } from "@/service/api-client/api-master";
 import { DateTimePickerEvent } from "@react-native-community/datetimepicker";
 import { router } from "expo-router";
-import React, { useState } from "react";
-import { Platform } from "react-native";
+import React, { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
+
+interface EventCreateProps {
+  title?: string;
+  lokasi?: string;
+  deskripsi?: string;
+  eventMaster_TipeAcaraId?: string;
+  tanggal?: string;
+  tanggalSelesai?: string;
+  authorId?: string;
+}
 
 export default function EventCreate() {
+  const [data, setData] = useState<EventCreateProps>();
+  const [listTypeEvent, setListTypeEvent] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const { user } = useAuth();
+
+  useEffect(() => {
+    onLoadMasterEventType();
+  }, []);
+
+  const onLoadMasterEventType = async () => {
+    try {
+      const response = await apiMasterEventType();
+      setListTypeEvent(response.data);
+    } catch (error) {
+      console.log("Error onLoadMasterEventType", error);
+    }
+  };
+
   const [selectedDate, setSelectedDate] = useState<
     Date | DateTimePickerEvent | null
   >(null);
@@ -22,35 +54,76 @@ export default function EventCreate() {
     Date | DateTimePickerEvent | null
   >(null);
 
-  const handlerSubmit = () => {
+  const handlerSubmit = async () => {
+    if (
+      !data?.title ||
+      !data?.lokasi ||
+      !data?.deskripsi ||
+      !data?.eventMaster_TipeAcaraId
+    ) {
+      Toast.show({
+        type: "info",
+        text1: "Info",
+        text2: "Lengkapi semua data",
+      });
+      return;
+    }
+
+    if (!selectedDate || !selectedEndDate) {
+      Toast.show({
+        type: "info",
+        text1: "Info",
+        text2: "Pilih tanggal mulai dan berakhir",
+      });
+      return;
+    }
+
+    // if (selectedDate) {
+    //   console.log("Tanggal yang dipilih:", selectedDate);
+    //   console.log(`ISO Format ${Platform.OS}:`, selectedDate.toString());
+
+    //   // Kirim ke API atau proses lanjutan
+    // } else {
+    //   console.log("Tanggal belum dipilih");
+    // }
+
+    // if (selectedEndDate) {
+    //   console.log("Tanggal yang dipilih:", selectedEndDate);
+    //   console.log(`ISO Format ${Platform.OS}:`, selectedEndDate.toString());
+    //   // Kirim ke API atau proses lanjutan
+    // } else {
+    //   console.log("Tanggal berakhir belum dipilih");
+    // }
+
     try {
-      if (selectedDate) {
-        console.log("Tanggal yang dipilih:", selectedDate);
-        console.log(`ISO Format ${Platform.OS}:`, selectedDate.toString());
-        // Kirim ke API atau proses lanjutan
-      } else {
-        console.log("Tanggal belum dipilih");
-      }
+      setIsLoading(true);
 
-      if (selectedEndDate) {
-        console.log("Tanggal yang dipilih:", selectedEndDate);
-        console.log(`ISO Format ${Platform.OS}:`, selectedEndDate.toString());
-        // Kirim ke API atau proses lanjutan
-      } else {
-        console.log("Tanggal berakhir belum dipilih");
-      }
+      const newData = {
+        ...data,
+        tanggal: new Date(selectedDate as any).toISOString(),
+        tanggalSelesai: new Date(selectedEndDate as any).toISOString(),
+        authorId: user?.id,
+      };
+
+      console.log("Data berhasil disimpan", JSON.stringify(newData, null, 2));
+
+      const response = await apiEventCreate(newData);
+      console.log("Response", JSON.stringify(response, null, 2));
 
-      console.log("Data berhasil disimpan");
       router.navigate("/event/status");
     } catch (error) {
       console.log(error);
+    } finally {
+      setIsLoading(false);
     }
   };
 
   const buttonSubmit = (
-    <ButtonCustom title="Simpan" onPress={handlerSubmit} />
-    // <BoxButtonOnFooter>
-    // </BoxButtonOnFooter>
+    <ButtonCustom
+      isLoading={isLoading}
+      title="Simpan"
+      onPress={handlerSubmit}
+    />
   );
 
   return (
@@ -61,17 +134,27 @@ export default function EventCreate() {
             placeholder="Masukkan nama event"
             label="Nama Event"
             required
+            onChangeText={(value: any) => setData({ ...data, title: value })}
           />
+
           <SelectCustom
             label="Tipe Event"
             placeholder="Pilih tipe event"
-            data={masterTypeEvent}
-            onChange={(value) => console.log(value)}
+            data={listTypeEvent.map((item: any) => ({
+              label: item.name,
+              value: item.id,
+            }))}
+            value={data?.eventMaster_TipeAcaraId || ""}
+            onChange={(value: any) =>
+              setData({ ...data, eventMaster_TipeAcaraId: value })
+            }
           />
+
           <TextInputCustom
             label="Lokasi"
             placeholder="Masukkan lokasi event"
             required
+            onChangeText={(value: any) => setData({ ...data, lokasi: value })}
           />
 
           <DateTimePickerCustom
@@ -84,14 +167,24 @@ export default function EventCreate() {
             minimumDate={new Date(Date.now())}
           />
 
-          <DateTimePickerCustom
-            label="Tanggal & Waktu Berakhir"
-            required
-            onChange={(date: Date) => {
-              setSelectedEndDate(date as any);
-            }}
-            value={selectedEndDate as any}
-          />
+          <StackCustom gap={0}>
+            <DateTimePickerCustom
+              disabled={!selectedDate}
+              label="Tanggal & Waktu Berakhir"
+              required
+              onChange={(date: Date) => {
+                setSelectedEndDate(date as any);
+              }}
+              value={selectedEndDate as any}
+              minimumDate={new Date(selectedDate as any)}
+            />
+            {!selectedDate && (
+              <TextCustom color="gray" size={"small"}>
+                Note: Pilih tanggal mulai terlebih dahulu
+              </TextCustom>
+            )}
+            <Spacing />
+          </StackCustom>
 
           <TextAreaCustom
             label="Deskripsi"
@@ -99,6 +192,9 @@ export default function EventCreate() {
             required
             showCount
             maxLength={100}
+            onChangeText={(value: any) =>
+              setData({ ...data, deskripsi: value })
+            }
           />
 
           {buttonSubmit}

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

@@ -1,9 +1,91 @@
-import UiHome from "@/screens/Home/UiHome";
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* 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 { apiVersion } from "@/service/api-config";
+import { Ionicons } from "@expo/vector-icons";
+import { Redirect, router, Stack } from "expo-router";
+import { useEffect, useState } from "react";
 
 export default function Application() {
+  const { token, user } = useAuth();
+
+  const [data, setData] = useState<any>();
+
+  useEffect(() => {
+    onLoadData();
+    checkVersion();
+  }, []);
+
+  async function onLoadData() {
+    const response = await apiUser(user?.id as string);
+    console.log("Response profile >>", JSON.stringify(response?.data?.Profile, null, 2));
+
+    setData(response.data);
+  }
+
+  const checkVersion = async () => {
+    const response = await apiVersion();
+    console.log("Version >>", JSON.stringify(response.data, null, 2));
+  };
+
+  if (data && data?.active === false) {
+    console.log("User is not active");
+    return <Redirect href={`/waiting-room`} />;
+  }
+
+  if (data && data?.Profile === null) {
+    console.log("Profile is 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)/maps/index.tsx

@@ -1,9 +1,19 @@
 import { MapCustom, ViewWrapper } from "@/components";
+import { View } from "react-native";
+import MapView from "react-native-maps";
 
 export default function Maps() {
   return (
     <ViewWrapper style={{ paddingInline: 0, paddingBlock: 0 }}>
-      <MapCustom height={"100%"} />
+      {/* <MapCustom height={"100%"} /> */}
+      <View style={{ flex: 1 }}>
+        <MapView
+          style={{
+            width: "100%",
+            height: "100%",
+          }}
+        />
+      </View>
     </ViewWrapper>
   );
 }

app/(application)/(user)/portofolio/[id]/create.tsx

@@ -1,10 +1,12 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import {
-  BoxButtonOnFooter,
+  ActionIcon,
+  AvatarComp,
+  BaseBox,
   ButtonCenteredOnly,
-  ButtonCustom,
+  CenterCustom,
   Grid,
   InformationBox,
-  LandscapeFrameUploaded,
   SelectCustom,
   Spacing,
   StackCustom,
@@ -13,49 +15,122 @@ import {
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
+import { IconPlus } from "@/components/_Icon";
 import { MainColor } from "@/constants/color-palet";
-import dummyMasterBidangBisnis from "@/lib/dummy-data/master-bidang-bisnis";
-import dummyMasterSubBidangBisnis from "@/lib/dummy-data/master-sub-bidang-bisnis";
+import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import Portofolio_ButtonCreate from "@/screens/Portofolio/ButtonCreatePortofolio";
+import {
+  apiMasterBidangBisnis,
+  apiMasterSubBidangBisnis,
+} from "@/service/api-client/api-master";
+import {
+  IMasterBidangBisnis,
+  IMasterSubBidangBisnis,
+} from "@/types/Type-Master";
+import pickImage from "@/utils/pickImage";
 import { Ionicons } from "@expo/vector-icons";
-import { router, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { Image } from "expo-image";
+import { useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useEffect, useState } from "react";
 import { Text, TouchableOpacity, View } from "react-native";
 import PhoneInput, { ICountry } from "react-native-international-phone-number";
+import { Avatar } from "react-native-paper";
 
 export default function PortofolioCreate() {
   const { id } = useLocalSearchParams();
   const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
   const [inputValue, setInputValue] = useState<string>("");
   const [data, setData] = useState({
-    name: "",
-    bidang_usaha: "",
-    sub_bidang_usaha: "",
-    alamat: "",
-    nomor_telepon: "",
+    namaBisnis: "",
+    masterBidangBisnisId: "",
+    alamatKantor: "",
+    tlpn: "",
     deskripsi: "",
   });
+  const [imageUri, setImageUri] = useState<string | null>(null);
+
+  const [bidangBisnis, setBidangBisnis] = useState<IMasterBidangBisnis[]>([]);
+  const [subBidangBisnis, setSubBidangBisnis] = useState<
+    IMasterSubBidangBisnis[]
+  >([]);
+
+  const [selectedSubBidang, setSelectedSubBidang] = useState<string[]>([]);
+  const [listSubBidangSelected, setListSubBidangSelected] = useState([
+    {
+      id: "",
+    },
+  ]);
+
+  const [dataMedsos, setDataMedsos] = useState({
+    facebook: "",
+    twitter: "",
+    instagram: "",
+    youtube: "",
+    tiktok: "",
+  });
+
+  const [isLoadingCreate, setIsLoadingCreate] = useState(false);
 
   function handleInputValue(phoneNumber: string) {
     setInputValue(phoneNumber);
+    const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
+    const fixNumber = inputValue.replace(/\s+/g, "");
+    const realNumber = callingCode + fixNumber;
+    setData({ ...data, tlpn: realNumber });
   }
 
   function handleSelectedCountry(country: ICountry) {
     setSelectedCountry(country);
   }
 
-  function handleSave() {
-    console.log("Selanjutnya");
-    router.replace(`/maps/create`);
-  }
+  useEffect(() => {
+    onLoadMaster();
+    onLoadMasterSubBidangBisnis();
+  }, []);
 
-  const buttonSave = (
-    <BoxButtonOnFooter>
-      <ButtonCustom onPress={handleSave}>Selanjutnya</ButtonCustom>
-    </BoxButtonOnFooter>
-  );
+  const onLoadMaster = async () => {
+    try {
+      const response = await apiMasterBidangBisnis();
+      setBidangBisnis(response.data);
+    } catch (error) {
+      setBidangBisnis([]);
+      console.log("Error onLoadMasterBidangBisnis", error);
+    }
+  };
+
+  const onLoadMasterSubBidangBisnis = async () => {
+    try {
+      const response = await apiMasterSubBidangBisnis({});
+      setSubBidangBisnis(response.data);
+    } catch (error) {
+      setSubBidangBisnis([]);
+      console.log("Error onLoadMasterBidangBisnis", error);
+    }
+  };
+
+  const handlerSelectedSubBidang = ({ id }: { id: string }) => {
+    const selectedList = subBidangBisnis?.filter(
+      (item) => (item?.masterBidangBisnisId as any) === id
+    );
+    setSelectedSubBidang(selectedList as any[]);
+  };
 
   return (
-    <ViewWrapper footerComponent={buttonSave}>
+    <ViewWrapper
+      footerComponent={
+        <Portofolio_ButtonCreate
+          id={id as string}
+          data={data}
+          dataMedsos={dataMedsos}
+          imageUri={imageUri}
+          subBidangSelected={listSubBidangSelected}
+          isLoadingCreate={isLoadingCreate}
+          setIsLoadingCreate={setIsLoadingCreate}
+        />
+      }
+    >
       {/* <TextCustom>Portofolio Create {id}</TextCustom> */}
       <StackCustom gap={"xs"}>
         <InformationBox text="Lengkapi data bisnis anda." />
@@ -63,51 +138,121 @@ export default function PortofolioCreate() {
           required
           label="Nama Bisnis"
           placeholder="Masukkan nama bisnis"
-
+          onChangeText={(value: any) => setData({ ...data, namaBisnis: value })}
         />
+
         <SelectCustom
           label="Bidang Usaha"
           required
-          data={dummyMasterBidangBisnis.map((item) => ({
+          data={bidangBisnis.map((item) => ({
             label: item.name,
             value: item.id,
           }))}
-          value={data.bidang_usaha}
+          value={data.masterBidangBisnisId}
           onChange={(value) => {
-            setData({ ...(data as any), bidang_usaha: value });
+            const isSameBidang = data.masterBidangBisnisId === value;
+
+            if (!isSameBidang) {
+              setListSubBidangSelected([{ id: "" }]);
+            }
+
+            setData({ ...(data as any), masterBidangBisnisId: value });
+            handlerSelectedSubBidang({ id: value as string });
           }}
         />
 
-        <Grid>
-          <Grid.Col span={10}>
-            <SelectCustom
-              // disabled
-              label="Sub Bidang Usaha"
-              required
-              data={dummyMasterSubBidangBisnis.map((item) => ({
-                label: item.name,
-                value: item.id,
+        {listSubBidangSelected.map((item, index) => (
+          <SelectCustom
+            key={index}
+            disabled={data.masterBidangBisnisId === ""}
+            label="Sub Bidang Usaha"
+            required
+            data={_.map(selectedSubBidang as any)
+              .filter((option: any) => {
+                const selectedValues = listSubBidangSelected.map((s) => s.id);
+                return (
+                  option.id === item.id || // biarkan tetap muncul kalau ini valuenya sendiri
+                  !selectedValues.includes(option.id)
+                );
+              })
+              .map((e: any) => ({
+                value: e.id,
+                label: e.name,
               }))}
-              value={data.sub_bidang_usaha}
-              onChange={(value) => {
-                setData({ ...(data as any), sub_bidang_usaha: value });
-              }}
-            />
-          </Grid.Col>
-          <Grid.Col
-            span={2}
-            style={{ alignItems: "center", justifyContent: "center" }}
-          >
-            <TouchableOpacity onPress={() => console.log("delete")}>
-              <Ionicons name="trash" size={24} color={MainColor.red} />
-            </TouchableOpacity>
-          </Grid.Col>
-        </Grid>
+            value={item.id || null}
+            onChange={(value) => {
+              const list = _.clone(listSubBidangSelected);
+              list[index].id = value as any;
+              setListSubBidangSelected(list);
+            }}
+          />
+        ))}
 
-        <ButtonCenteredOnly onPress={() => console.log("add")}>
+        <CenterCustom>
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+            <ActionIcon
+              disabled={
+                selectedSubBidang.length === listSubBidangSelected.length
+              }
+              onPress={() => {
+                setListSubBidangSelected([
+                  ...listSubBidangSelected,
+                  { id: "" },
+                ]);
+              }}
+              icon={
+                <Ionicons
+                  name="add-circle-outline"
+                  size={ICON_SIZE_XLARGE}
+                  color={MainColor.black}
+                />
+              }
+              size="xl"
+            />
+            <ActionIcon
+              disabled={listSubBidangSelected.length <= 1}
+              onPress={() => {
+                const list = _.clone(listSubBidangSelected);
+                list.pop();
+                setListSubBidangSelected(list);
+              }}
+              icon={
+                <Ionicons
+                  name="remove-circle-outline"
+                  size={ICON_SIZE_XLARGE}
+                  color={MainColor.black}
+                />
+              }
+              size="xl"
+            />
+          </View>
+        </CenterCustom>
+        <Spacing />
+
+        {/* <SelectCustom
+          label="Bidang Usaha"
+          required
+          data={bidangBisnis.map((item) => ({
+            label: item.name,
+            value: item.id,
+          }))}
+          value={null}
+          onChange={(value) => {
+            setData({ ...(data as any), masterBidangBisnisId: value });
+            handlerSelectedSubBidang({ id: value as string });
+          }}
+        /> */}
+
+        {/* <ButtonCenteredOnly
+          onPress={() => {
+            setListSubBidangSelected([...listSubBidangSelected, { id: "" }]);
+          }}
+        >
           Tambah Pilihan
         </ButtonCenteredOnly>
-        <Spacing />
+        <Spacing /> */}
+
+        {/* <TextCustom>{JSON.stringify(bidangBisnis, null, 2)}</TextCustom> */}
 
         <View>
           <View style={{ flexDirection: "row", alignItems: "center" }}>
@@ -132,6 +277,9 @@ export default function PortofolioCreate() {
           required
           label="Alamat Bisnis"
           placeholder="Masukkan alamat bisnis"
+          onChangeText={(value: any) =>
+            setData({ ...data, alamatKantor: value })
+          }
         />
 
         <TextAreaCustom
@@ -144,18 +292,26 @@ export default function PortofolioCreate() {
           maxRows={5}
           required
           showCount
-          maxLength={100}
+          maxLength={1000}
         />
         <Spacing />
 
         {/* Logo */}
         <InformationBox text="Upload logo bisnis anda untuk di tampilaka pada portofolio." />
-        <LandscapeFrameUploaded />
+
+        <CenterCustom>
+          <Avatar.Image
+            source={imageUri ? { uri: imageUri } : DUMMY_IMAGE.dummy_image}
+            size={200}
+          />
+        </CenterCustom>
+        <Spacing />
         <ButtonCenteredOnly
           icon="upload"
           onPress={() => {
-            console.log("Upload logo >>", id);
-            router.navigate(`/(application)/(image)/take-picture/${id}`);
+            pickImage({
+              setImageUri,
+            });
           }}
         >
           Upload
@@ -167,22 +323,37 @@ export default function PortofolioCreate() {
         <TextInputCustom
           label="Tiktok"
           placeholder="Masukkan username tiktok"
+          onChangeText={(value: any) =>
+            setDataMedsos({ ...dataMedsos, tiktok: value })
+          }
         />
         <TextInputCustom
           label="Facebook"
           placeholder="Masukkan username facebook"
+          onChangeText={(value: any) =>
+            setDataMedsos({ ...dataMedsos, facebook: value })
+          }
         />
         <TextInputCustom
           label="Instagram"
           placeholder="Masukkan username instagram"
+          onChangeText={(value: any) =>
+            setDataMedsos({ ...dataMedsos, instagram: value })
+          }
         />
         <TextInputCustom
           label="Twitter"
           placeholder="Masukkan username twitter"
+          onChangeText={(value: any) =>
+            setDataMedsos({ ...dataMedsos, twitter: value })
+          }
         />
         <TextInputCustom
           label="Youtube"
           placeholder="Masukkan username youtube"
+          onChangeText={(value: any) =>
+            setDataMedsos({ ...dataMedsos, youtube: value })
+          }
         />
         <Spacing />
       </StackCustom>

app/(application)/(user)/portofolio/[id]/edit-logo.tsx

@@ -1,25 +1,125 @@
 import {
-  AvatarCustom,
   BaseBox,
   BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
-  ViewWrapper,
+  ViewWrapper
 } from "@/components";
+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 { useAuth } from "@/hooks/use-auth";
+import { apiFileDelete } from "@/service/api-client/api-file";
+import {
+  apiGetOnePortofolio,
+  apiUpdatePortofolio,
+} from "@/service/api-client/api-portofolio";
+import { uploadImageService } from "@/service/upload-service";
+import pickImage from "@/utils/pickImage";
+import { Image } from "expo-image";
 import { router, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function PortofolioEditLogo() {
   const { id } = useLocalSearchParams();
+  const [logoId, setLogoId] = useState<any>();
+  const [imageUri, setImageUri] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const { token } = useAuth();
+
+  useEffect(() => {
+    onLoadData(id as string);
+  }, [id]);
+
+  const onLoadData = async (id: string) => {
+    const response = await apiGetOnePortofolio({ id: id });
+    console.log(
+      "Response portofolio >>",
+      JSON.stringify(response.data.logoId, null, 2)
+    );
+    setLogoId(response.data.logoId);
+  };
+
+  async function onUpload() {
+    try {
+      setIsLoading(true);
+
+      const response = await uploadImageService({
+        imageUri,
+        dirId: DIRECTORY_ID.portofolio_logo,
+      });
+
+      if (response.success) {
+        const fileId = response.data.id;
+        const responseUpdate = await apiUpdatePortofolio({
+          id: id as string,
+          data: { fileId },
+          category: "logo",
+        });
+
+        if (!responseUpdate.success) {
+          Toast.show({
+            type: "error",
+            text1: "Info",
+            text2: responseUpdate.message,
+          });
+          return;
+        }
+
+        if (logoId) {
+          const deletePrevFile = await apiFileDelete({
+            token: token as string,
+            id: logoId as string,
+          });
+
+          if (!deletePrevFile.success) {
+            console.log("error delete prev file >>", deletePrevFile.message);
+          }
+        }
+
+        Toast.show({
+          type: "success",
+          text1: "Sukses",
+          text2: "Logo berhasil diupdate",
+        });
+
+        router.back();
+      }
+    } catch (error) {
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: error as string,
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  const image = imageUri ? (
+    <Image source={{ uri: imageUri }} style={{ width: 200, height: 200 }} />
+  ) : (
+    <Image
+      source={
+        logoId
+          ? { uri: API_STRORAGE.GET({ fileId: logoId }) }
+          : DUMMY_IMAGE.avatar
+      }
+      style={{ width: 200, height: 200 }}
+    />
+  );
 
   const buttonFooter = (
     <BoxButtonOnFooter>
       <ButtonCustom
+        isLoading={isLoading}
+        disabled={isLoading}
         onPress={() => {
-          console.log("Simpan logo ");
-          router.back();
+          onUpload();
         }}
       >
-        Simpan
+        Update
       </ButtonCustom>
     </BoxButtonOnFooter>
   );
@@ -34,13 +134,17 @@ export default function PortofolioEditLogo() {
             height: 250,
           }}
         >
-          <AvatarCustom size="xl" />
+          {image}
         </BaseBox>
         <ButtonCenteredOnly
           icon="upload"
-          onPress={() => router.navigate(`/take-picture/${id}`)}
+          onPress={() => {
+            pickImage({
+              setImageUri,
+            });
+          }}
         >
-          Update
+          Upload
         </ButtonCenteredOnly>
       </ViewWrapper>
     </>

app/(application)/(user)/portofolio/[id]/edit-social-media.tsx

@@ -4,20 +4,87 @@ import {
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
+import {
+  apiGetOnePortofolio,
+  apiUpdatePortofolio,
+} from "@/service/api-client/api-portofolio";
 import { useLocalSearchParams, router } from "expo-router";
+import { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function PortofolioEditSocialMedia() {
   const { id } = useLocalSearchParams();
+  console.log("ID >>", id);
+  const [isLoading, setIsLoading] = useState(false);
+  const [data, setData] = useState<any>({
+    facebook: "",
+    twitter: "",
+    instagram: "",
+    tiktok: "",
+    youtube: "",
+  });
+
+  useEffect(() => {
+    onLoadData(id as string);
+  }, [id]);
+
+  const onLoadData = async (id: string) => {
+    const response = await apiGetOnePortofolio({ id: id });
+    console.log(
+      "Response portofolio >>",
+      JSON.stringify(response.data.Portofolio_MediaSosial, null, 2)
+    );
+    const data = response.data.Portofolio_MediaSosial;
+    setData({
+      facebook: data.facebook,
+      twitter: data.twitter,
+      instagram: data.instagram,
+      tiktok: data.tiktok,
+      youtube: data.youtube,
+    });
+  };
+
+  const onSubmitUpdate = async () => {
+    try {
+      setIsLoading(true);
+      const response = await apiUpdatePortofolio({
+        id: id as string,
+        data: data,
+        category: "medsos",
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "info",
+          text1: "Info",
+          text2: response.message,
+        });
+
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Sukses",
+        text2: "Data media terupdate",
+      });
+
+      router.back();
+    } catch (error) {
+      console.log("Error onSubmitUpdate", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   const buttonFooter = (
     <BoxButtonOnFooter>
       <ButtonCustom
-        onPress={() => {
-          console.log(`Simpan sosmed ${id}`);
-          router.back();
-        }}
+        isLoading={isLoading}
+        disabled={isLoading}
+        onPress={onSubmitUpdate}
       >
-        Simpan
+        Update
       </ButtonCustom>
     </BoxButtonOnFooter>
   );
@@ -25,11 +92,36 @@ export default function PortofolioEditSocialMedia() {
   return (
     <>
       <ViewWrapper footerComponent={buttonFooter}>
-        <TextInputCustom label="Tiktok" placeholder="Masukkan tiktok" />
-        <TextInputCustom label="Instagram" placeholder="Masukkan instagram" />
-        <TextInputCustom label="Facebook" placeholder="Masukkan facebook" />
-        <TextInputCustom label="Twitter" placeholder="Masukkan twitter" />
-        <TextInputCustom label="Youtube" placeholder="Masukkan youtube" />
+        <TextInputCustom
+          value={data.tiktok}
+          onChangeText={(value) => setData({ ...data, tiktok: value })}
+          label="Tiktok"
+          placeholder="Masukkan tiktok"
+        />
+        <TextInputCustom
+          value={data.instagram}
+          onChangeText={(value) => setData({ ...data, instagram: value })}
+          label="Instagram"
+          placeholder="Masukkan instagram"
+        />
+        <TextInputCustom
+          value={data.facebook}
+          onChangeText={(value) => setData({ ...data, facebook: value })}
+          label="Facebook"
+          placeholder="Masukkan facebook"
+        />
+        <TextInputCustom
+          value={data.twitter}
+          onChangeText={(value) => setData({ ...data, twitter: value })}
+          label="Twitter"
+          placeholder="Masukkan twitter"
+        />
+        <TextInputCustom
+          value={data.youtube}
+          onChangeText={(value) => setData({ ...data, youtube: value })}
+          label="Youtube"
+          placeholder="Masukkan youtube"
+        />
       </ViewWrapper>
     </>
   );

app/(application)/(user)/portofolio/[id]/edit.back.txt

@@ -0,0 +1,357 @@
+import {
+  ActionIcon,
+  BoxButtonOnFooter,
+  ButtonCustom,
+  CenterCustom,
+  SelectCustom,
+  Spacing,
+  StackCustom,
+  TextAreaCustom,
+  TextCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
+import {
+  apiMasterBidangBisnis,
+  apiMasterSubBidangBisnis,
+} from "@/service/api-client/api-master";
+import {
+  apiGetOnePortofolio,
+  apiUpdatePortofolio,
+} from "@/service/api-client/api-portofolio";
+import {
+  IMasterBidangBisnis,
+  IMasterSubBidangBisnis,
+} from "@/types/Type-Master";
+import { Ionicons } from "@expo/vector-icons";
+import { router, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import { Text, View } from "react-native";
+import PhoneInput, { ICountry } from "react-native-international-phone-number";
+import Toast from "react-native-toast-message";
+
+interface IFormData {
+  id_Portofolio: string;
+  namaBisnis: string;
+  alamatKantor: string;
+  tlpn: string;
+  deskripsi: string;
+  masterBidangBisnisId: string;
+  subBidang: any[];
+}
+
+interface IListSubBidangSelected {
+  id: string;
+  MasterSubBidangBisnis: {
+    id: string;
+    name: string;
+    masterBidangBisnisId: string;
+  };
+}
+
+export default function PortofolioEdit() {
+  const { id } = useLocalSearchParams();
+  const [isLoading, setIsLoading] = useState(false);
+  const [data, setData] = useState<any>({});
+
+  const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
+  const [bidangBisnis, setBidangBisnis] = useState<IMasterBidangBisnis[]>([]);
+  const [subBidangBisnis, setSubBidangBisnis] = useState<
+    IMasterSubBidangBisnis[]
+  >([]);
+  const [selectedSubBidang, setSelectedSubBidang] = useState<string[]>([]);
+  const [listSubBidangSelected, setListSubBidangSelected] = useState<
+    IListSubBidangSelected[]
+  >([
+    {
+      id: "",
+      MasterSubBidangBisnis: {
+        id: "",
+        name: "",
+        masterBidangBisnisId: "",
+      },
+    },
+  ]);
+
+  function handleInputValue(phoneNumber: string) {
+    setData({ ...data, tlpn: phoneNumber });
+  }
+
+  function handleSelectedCountry(country: ICountry) {
+    setSelectedCountry(country);
+  }
+
+  useEffect(() => {
+    onLoadData(id as string);
+    onLoadMasterBidang();
+    onLoadMasterSubBidangBisnis();
+  }, [id]);
+
+  const onLoadData = async (id: string) => {
+    const response = await apiGetOnePortofolio({ id: id });
+
+    if (response.data.tlpn && response.data.tlpn.includes("62")) {
+      const fixNumber = response.data.tlpn.replace("62", "");
+
+      setData({ ...response.data, tlpn: fixNumber });
+    }
+  };
+
+  const onLoadMasterBidang = async () => {
+    try {
+      const response = await apiMasterBidangBisnis();
+      setBidangBisnis(response.data);
+    } catch (error) {
+      setBidangBisnis([]);
+      console.log("Error onLoadMasterBidangBisnis", error);
+    }
+  };
+
+  async function onLoadMasterSubBidangBisnis() {
+    try {
+      const response = await apiMasterSubBidangBisnis({});
+
+      if (response.success) {
+        setSubBidangBisnis(response.data);
+      }
+    } catch (error) {
+      console.error("Error on load master sub bidang bisnis", error);
+    }
+  }
+
+  const handleSubmitUpdate = async () => {
+    try {
+      setIsLoading(true);
+      const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
+      const fixNumber = data.tlpn.replace(/\s+/g, "");
+      const realNumber = callingCode + fixNumber;
+
+      const newData: IFormData = {
+        id_Portofolio: data.id_Portofolio,
+        namaBisnis: data.namaBisnis,
+        alamatKantor: data.alamatKantor,
+        tlpn: realNumber,
+        deskripsi: data.deskripsi,
+        masterBidangBisnisId: data.masterBidangBisnisId,
+        subBidang: listSubBidangSelected,
+      };
+
+      const response = await apiUpdatePortofolio({
+        id: id as string,
+        data: newData,
+        category: "detail",
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "info",
+          text1: "Info",
+          text2: response.message,
+        });
+
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Sukses",
+        text2: "Data terupdate",
+      });
+
+      router.back();
+    } catch (error) {
+      console.log("Error handleSubmitUpdate", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const buttonUpdate = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        isLoading={isLoading}
+        disabled={isLoading}
+        onPress={handleSubmitUpdate}
+      >
+        Update
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <>
+      <ViewWrapper footerComponent={buttonUpdate}>
+        <StackCustom gap={"xs"}>
+          <TextInputCustom
+            required
+            label="Nama Bisnis"
+            placeholder="Masukkan nama bisnis"
+            value={data.namaBisnis}
+            onChangeText={(value: any) =>
+              setData({ ...data, namaBisnis: value })
+            }
+          />
+
+          <SelectCustom
+            label="Bidang Usaha"
+            required
+            data={bidangBisnis?.map((item) => ({
+              label: item.name,
+              value: item.id,
+            }))}
+            value={data.masterBidangBisnisId}
+            onChange={(value) => {
+              setData({ ...(data as any), masterBidangBisnisId: value });
+            }}
+          />
+
+          {listSubBidangSelected.map((item, index) => (
+            <SelectCustom
+              key={index}
+              label="Sub Bidang Usaha"
+              required
+              data={subBidangBisnis?.map((item) => ({
+                label: item.name,
+                value: item.id,
+              }))}
+              value={item.id || null}
+              onChange={(value) => {
+                console.log("Value >>", value);
+              }}
+            />
+          ))}
+
+          <CenterCustom>
+            <View
+              style={{ flexDirection: "row", alignItems: "center", gap: 10 }}
+            >
+              <ActionIcon
+                // disabled={
+                //   selectedSubBidang.length === listSubBidangSelected.length
+                // }
+                onPress={() => {
+                  setListSubBidangSelected([
+                    ...listSubBidangSelected,
+                    {
+                      id: "",
+                      MasterSubBidangBisnis: {
+                        id: "",
+                        name: "",
+                        masterBidangBisnisId: "",
+                      },
+                    },
+                  ]);
+                }}
+                icon={
+                  <Ionicons
+                    name="add-circle-outline"
+                    size={ICON_SIZE_XLARGE}
+                    color={MainColor.black}
+                  />
+                }
+                size="xl"
+              />
+              <ActionIcon
+                // disabled={listSubBidangSelected.length <= 1}
+                onPress={() => {
+                  const list = _.clone(listSubBidangSelected);
+                  list.pop();
+                  setListSubBidangSelected(list);
+                }}
+                icon={
+                  <Ionicons
+                    name="remove-circle-outline"
+                    size={ICON_SIZE_XLARGE}
+                    color={MainColor.black}
+                  />
+                }
+                size="xl"
+              />
+            </View>
+          </CenterCustom>
+          <Spacing />
+
+          {/* <Grid>
+            <Grid.Col span={10}>
+              <SelectCustom
+                // disabled
+                label="Sub Bidang Usaha"
+                required
+                data={dummyMasterSubBidangBisnis.map((item) => ({
+                  label: item.name,
+                  value: item.id,
+                }))}
+                value={data.masterSubBidangBisnisId}
+                onChange={(value) => {
+                  setData({ ...(data as any), masterSubBidangBisnisId: value });
+                }}
+              />
+            </Grid.Col>
+            <Grid.Col
+              span={2}
+              style={{ alignItems: "center", justifyContent: "center" }}
+            >
+              <TouchableOpacity onPress={() => console.log("delete")}>
+                <Ionicons name="trash" size={24} color={MainColor.red} />
+              </TouchableOpacity>
+            </Grid.Col>
+          </Grid> */}
+          {/* <ButtonCenteredOnly onPress={() => console.log("add")}>
+            Tambah Pilihan
+          </ButtonCenteredOnly>
+          <Spacing /> */}
+
+          <View>
+            <View style={{ flexDirection: "row", alignItems: "center" }}>
+              <TextCustom semiBold style={{ color: MainColor.white_gray }}>
+                Nomor Telepon
+              </TextCustom>
+              <Text style={{ color: "red" }}> *</Text>
+            </View>
+            <Spacing height={5} />
+            <PhoneInput
+              value={data.tlpn}
+              onChangePhoneNumber={handleInputValue}
+              selectedCountry={selectedCountry}
+              onChangeSelectedCountry={handleSelectedCountry}
+              defaultCountry="ID"
+              placeholder="xxx-xxx-xxx"
+            />
+          </View>
+          <Spacing />
+
+          <TextInputCustom
+            required
+            label="Alamat Bisnis"
+            placeholder="Masukkan alamat bisnis"
+            value={data.alamatKantor}
+            onChangeText={(value: any) =>
+              setData({ ...data, alamatKantor: value })
+            }
+          />
+
+          <TextAreaCustom
+            label="Deskripsi Bisnis"
+            placeholder="Masukkan deskripsi bisnis"
+            value={data.deskripsi}
+            onChangeText={(value: any) =>
+              setData({ ...data, deskripsi: value })
+            }
+            autosize
+            minRows={2}
+            maxRows={5}
+            required
+            showCount
+            maxLength={1000}
+          />
+          <Spacing />
+
+          <TextCustom>{JSON.stringify(subBidangBisnis, null, 2)}</TextCustom>
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -1,8 +1,9 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
+  ActionIcon,
   BoxButtonOnFooter,
-  ButtonCenteredOnly,
   ButtonCustom,
-  Grid,
+  CenterCustom,
   SelectCustom,
   Spacing,
   StackCustom,
@@ -12,46 +13,319 @@ import {
   ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
-import dummyMasterBidangBisnis from "@/lib/dummy-data/master-bidang-bisnis";
-import dummyMasterSubBidangBisnis from "@/lib/dummy-data/master-sub-bidang-bisnis";
+import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
+import {
+  apiMasterBidangBisnis,
+  apiMasterSubBidangBisnis,
+} from "@/service/api-client/api-master";
+import {
+  apiGetOnePortofolio,
+  apiUpdatePortofolio,
+} from "@/service/api-client/api-portofolio";
+import {
+  IMasterBidangBisnis,
+  IMasterSubBidangBisnis,
+} from "@/types/Type-Master";
 import { Ionicons } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
-import { Text, TouchableOpacity, View } from "react-native";
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import { Text, View } from "react-native";
 import PhoneInput, { ICountry } from "react-native-international-phone-number";
+import { ActivityIndicator } from "react-native-paper";
+import Toast from "react-native-toast-message";
+
+interface IFormData {
+  id_Portofolio: string;
+  namaBisnis: string;
+  alamatKantor: string;
+  tlpn: string;
+  deskripsi: string;
+  masterBidangBisnisId: string;
+  subBidang: any[];
+}
+
+interface IListSubBidangSelected {
+  id: string;
+  MasterSubBidangBisnis?: {
+    id?: string;
+    name?: string;
+    masterBidangBisnisId?: string;
+  };
+}
 
 export default function PortofolioEdit() {
   const { id } = useLocalSearchParams();
-  const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
-  const [inputValue, setInputValue] = useState<string>("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [data, setData] = useState<any>({});
 
-  const [data, setData] = useState({
-    name: "",
-    bidang_usaha: "",
-    sub_bidang_usaha: "",
-    alamat: "",
-    nomor_telepon: "",
-    deskripsi: "",
-  });
+  const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
+  const [bidangBisnis, setBidangBisnis] = useState<
+    IMasterBidangBisnis[] | null
+  >(null);
+  const [subBidangBisnis, setSubBidangBisnis] = useState<
+    IMasterSubBidangBisnis[] | null
+  >(null);
+  const [selectedSubBidang, setSelectedSubBidang] = useState<string[]>([]);
+  const [listSubBidangSelected, setListSubBidangSelected] = useState<
+    IListSubBidangSelected[]
+  >([]);
 
   function handleInputValue(phoneNumber: string) {
-    setInputValue(phoneNumber);
+    setData({ ...data, tlpn: phoneNumber });
   }
 
   function handleSelectedCountry(country: ICountry) {
     setSelectedCountry(country);
   }
 
-  function handleSave() {
-    console.log(`Update portofolio berhasil ${id}`);
-    router.back();
+  const onLoadMasterBidang = async () => {
+    try {
+      const response = await apiMasterBidangBisnis();
+      setBidangBisnis(response.data);
+
+      return response.success;
+    } catch (error) {
+      setBidangBisnis([]);
+      console.log("Error onLoadMasterBidangBisnis", error);
+    }
+  };
+
+  async function onLoadMasterSubBidangBisnis() {
+    try {
+      const response = await apiMasterSubBidangBisnis({});
+      setSubBidangBisnis(response.data);
+
+      return response.success;
+    } catch (error) {
+      console.error("Error on load master sub bidang bisnis", error);
+    }
   }
 
+  const handleLoadMaster = async (id: string) => {
+    const loadBidang = await onLoadMasterBidang();
+    const loadSubBidang = await onLoadMasterSubBidangBisnis();
+
+    if (!loadBidang || !loadSubBidang) {
+      return;
+    }
+
+    onLoadData(id);
+  };
+
+  useEffect(() => {
+    handleLoadMaster(id as any);
+  }, [id]);
+
+  const onLoadData = async (id: string) => {
+    const response = await apiGetOnePortofolio({ id: id });
+
+    if (response.success) {
+      const fixNumber = response.data.tlpn.replace("62", "");
+      setData({ ...response.data, tlpn: fixNumber });
+
+      // Cek apakah ada sub bidang bisnis yang terpilih
+      const prevSubBidang = response.data.Portofolio_BidangDanSubBidangBisnis;
+      if (prevSubBidang && prevSubBidang.length > 0) {
+        setListSubBidangSelected(prevSubBidang);
+      } else {
+        // Jika tidak ada sub bidang yang terpilih sebelumnya, tetap inisialisasi dengan array kosong
+        setListSubBidangSelected([
+          {
+            id: "",
+            MasterSubBidangBisnis: {
+              id: "",
+              name: "",
+            },
+          },
+        ]);
+      }
+
+      const bisnisId = response.data.masterBidangBisnisId;
+      handleLoadSelectedSubBidang({
+        id: bisnisId,
+      });
+    }
+  };
+
+  // Handler untuk saat komponen pertama kali load
+  const handleLoadSelectedSubBidang = ({ id }: { id: string }) => {
+    if (!subBidangBisnis) return;
+
+    const filteredSubBidang: any = subBidangBisnis.filter((item) => {
+      return item.masterBidangBisnisId === id;
+    });
+    setSelectedSubBidang(filteredSubBidang);
+  };
+
+  // Handler untuk menambah sub bidang bisnis
+  const handleAddSubBidang = () => {
+    setListSubBidangSelected([
+      ...listSubBidangSelected,
+      {
+        id: "",
+        MasterSubBidangBisnis: { id: "", name: "" },
+      },
+    ]);
+  };
+
+  // Handler untuk menghapus sub bidang bisnis
+  const handleRemoveSubBidang = (index: number) => {
+    if (listSubBidangSelected.length <= 1) return;
+
+    const updatedList = [...listSubBidangSelected];
+    updatedList.splice(index, 1);
+    setListSubBidangSelected(updatedList);
+  };
+
+  // Handler untuk perubahan bidang bisnis
+  const handleBidangBisnisChange = (val: string) => {
+    const isSameBidang = data?.MasterBidangBisnis?.id === val;
+
+    setData({ ...(data as any), masterBidangBisnisId: val });
+
+    // Reset sub bidang jika ganti bidang
+    if (!isSameBidang) {
+      setListSubBidangSelected([
+        {
+          id: "",
+          MasterSubBidangBisnis: { id: "", name: "" },
+        },
+      ]);
+    }
+
+    handleLoadSelectedSubBidang({ id: val });
+  };
+
+  // Handler untuk update sub bidang
+  const handleSubBidangChange = (value: string, index: number) => {
+    const select = selectedSubBidang.find((sub: any) => sub.id === value);
+    const list: any = _.cloneDeep(listSubBidangSelected);
+    list[index] = {
+      id: "",
+      MasterSubBidangBisnis: select || {
+        id: value,
+        name: "",
+        masterBidangBisnisId: "",
+      },
+    };
+    setListSubBidangSelected(list);
+  };
+
+  useEffect(() => {
+    if (subBidangBisnis?.length !== undefined && data.masterBidangBisnisId) {
+      handleLoadSelectedSubBidang({
+        id: data.masterBidangBisnisId,
+      });
+    }
+  }, [subBidangBisnis, data.masterBidangBisnisId]);
+
+  function validateData(data: any) {
+    if (
+      !data.namaBisnis ||
+      !data.alamatKantor ||
+      !data.tlpn ||
+      !data.deskripsi ||
+      !data.masterBidangBisnisId
+    ) {
+      return false;
+    }
+
+    return true;
+  }
+
+  function validateDataSubBidang(dataArray: any[]) {
+    return !dataArray.some(
+      (item: any) =>
+        !item.MasterSubBidangBisnis.id ||
+        item.MasterSubBidangBisnis.id.trim() === ""
+    );
+  }
+
+  const handleSubmitUpdate = async () => {
+    const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
+    const fixNumber = data.tlpn.replace(/\s+/g, "");
+    const realNumber = callingCode + fixNumber;
+
+    const newData: IFormData = {
+      id_Portofolio: data.id_Portofolio,
+      namaBisnis: data.namaBisnis,
+      alamatKantor: data.alamatKantor,
+      tlpn: realNumber,
+      deskripsi: data.deskripsi,
+      masterBidangBisnisId: data.masterBidangBisnisId,
+      subBidang: listSubBidangSelected,
+    };
+
+    if (!validateData(newData)) {
+      return Toast.show({
+        type: "error",
+        text1: "Harap lengkapi data",
+      });
+    }
+
+    if (!validateDataSubBidang(listSubBidangSelected as any)) {
+      return Toast.show({
+        type: "error",
+        text1: "Harap lengkapi sub bidang",
+      });
+    }
+
+    try {
+      setIsLoading(true);
+
+      const response = await apiUpdatePortofolio({
+        id: id as string,
+        data: newData,
+        category: "detail",
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "info",
+          text1: "Info",
+          text2: response.message,
+        });
+
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Sukses",
+        text2: "Data terupdate",
+      });
+
+      router.back();
+    } catch (error) {
+      console.log("Error handleSubmitUpdate", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const buttonUpdate = (
     <BoxButtonOnFooter>
-      <ButtonCustom onPress={handleSave}>Simpan</ButtonCustom>
+      <ButtonCustom
+        isLoading={isLoading}
+        disabled={isLoading}
+        onPress={handleSubmitUpdate}
+      >
+        Update
+      </ButtonCustom>
     </BoxButtonOnFooter>
   );
+
+  if (!bidangBisnis || !subBidangBisnis) {
+    return (
+      <>
+        <ViewWrapper>
+          <ActivityIndicator size="large" color={MainColor.yellow} />
+        </ViewWrapper>
+      </>
+    );
+  }
+
   return (
     <>
       <ViewWrapper footerComponent={buttonUpdate}>
@@ -60,50 +334,98 @@ export default function PortofolioEdit() {
             required
             label="Nama Bisnis"
             placeholder="Masukkan nama bisnis"
+            value={data.namaBisnis}
+            onChangeText={(value: any) =>
+              setData({ ...data, namaBisnis: value })
+            }
           />
 
           <SelectCustom
             label="Bidang Usaha"
             required
-            data={dummyMasterBidangBisnis.map((item) => ({
+            data={bidangBisnis?.map((item) => ({
               label: item.name,
               value: item.id,
             }))}
-            value={data.bidang_usaha}
-            onChange={(value) => {
-              setData({ ...(data as any), bidang_usaha: value });
+            value={data.masterBidangBisnisId}
+            onChange={(value: any) => {
+              handleBidangBisnisChange(value);
             }}
           />
 
-          <Grid>
-            <Grid.Col span={10}>
+          {listSubBidangSelected.map((item, index) => {
+            // Filter data untuk select sub bidang, menghilangkan yang sudah dipilih kecuali untuk item ini sendiri
+            const selectedIds = listSubBidangSelected
+              .filter((_, i) => i !== index)
+              .map((s) => s.MasterSubBidangBisnis?.id)
+              .filter((id) => id); // Filter hanya yang memiliki id (tidak kosong)
+
+            const availableSubBidangOptions = (selectedSubBidang || [])
+              .filter((sub: any) => {
+                // Tampilkan jika ini adalah opsi yang dipilih saat ini atau belum dipilih di sub bidang lainnya
+
+                return (
+                  sub.id === item.MasterSubBidangBisnis?.id ||
+                  !selectedIds.includes(sub.id)
+                );
+              })
+              .map((sub: any) => ({
+                value: sub.id,
+                label: sub.name,
+              }));
+
+            return (
               <SelectCustom
-                // disabled
+                key={index}
                 label="Sub Bidang Usaha"
                 required
-                data={dummyMasterSubBidangBisnis.map((item) => ({
-                  label: item.name,
-                  value: item.id,
-                }))}
-                value={data.sub_bidang_usaha}
-                onChange={(value) => {
-                  setData({ ...(data as any), sub_bidang_usaha: value });
+                data={availableSubBidangOptions}
+                value={item.MasterSubBidangBisnis?.id || null}
+                onChange={(value: any) => {
+                  handleSubBidangChange(value, index);
                 }}
               />
-            </Grid.Col>
-            <Grid.Col
-              span={2}
-              style={{ alignItems: "center", justifyContent: "center" }}
+            );
+          })}
+
+          <CenterCustom>
+            <View
+              style={{ flexDirection: "row", alignItems: "center", gap: 10 }}
             >
-              <TouchableOpacity onPress={() => console.log("delete")}>
-                <Ionicons name="trash" size={24} color={MainColor.red} />
-              </TouchableOpacity>
-            </Grid.Col>
-          </Grid>
-          <ButtonCenteredOnly onPress={() => console.log("add")}>
-            Tambah Pilihan
-          </ButtonCenteredOnly>
+              <ActionIcon
+                disabled={
+                  selectedSubBidang.length === listSubBidangSelected.length
+                }
+                onPress={() => {
+                  handleAddSubBidang();
+                }}
+                icon={
+                  <Ionicons
+                    name="add-circle-outline"
+                    size={ICON_SIZE_XLARGE}
+                    color={MainColor.black}
+                  />
+                }
+                size="xl"
+              />
+              <ActionIcon
+                disabled={listSubBidangSelected.length <= 1}
+                onPress={() => {
+                  handleRemoveSubBidang(listSubBidangSelected.length - 1);
+                }}
+                icon={
+                  <Ionicons
+                    name="remove-circle-outline"
+                    size={ICON_SIZE_XLARGE}
+                    color={MainColor.black}
+                  />
+                }
+                size="xl"
+              />
+            </View>
+          </CenterCustom>
           <Spacing />
+
           <View>
             <View style={{ flexDirection: "row", alignItems: "center" }}>
               <TextCustom semiBold style={{ color: MainColor.white_gray }}>
@@ -113,7 +435,7 @@ export default function PortofolioEdit() {
             </View>
             <Spacing height={5} />
             <PhoneInput
-              value={inputValue}
+              value={data.tlpn}
               onChangePhoneNumber={handleInputValue}
               selectedCountry={selectedCountry}
               onChangeSelectedCountry={handleSelectedCountry}
@@ -127,6 +449,10 @@ export default function PortofolioEdit() {
             required
             label="Alamat Bisnis"
             placeholder="Masukkan alamat bisnis"
+            value={data.alamatKantor}
+            onChangeText={(value: any) =>
+              setData({ ...data, alamatKantor: value })
+            }
           />
 
           <TextAreaCustom
@@ -141,7 +467,7 @@ export default function PortofolioEdit() {
             maxRows={5}
             required
             showCount
-            maxLength={100}
+            maxLength={1000}
           />
           <Spacing />
         </StackCustom>

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

@@ -1,20 +1,31 @@
-import { AlertCustom, DrawerCustom } from "@/components";
+/* eslint-disable react-hooks/exhaustive-deps */
+import { DrawerCustom, LoaderCustom, Spacing, StackCustom } from "@/components";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
+import Portofolio_BusinessLocation from "@/screens/Portofolio/BusinessLocationSection";
+import Portofolio_ButtonDelete from "@/screens/Portofolio/ButtonDelete";
+import Portofolio_Data from "@/screens/Portofolio/DataPortofolio";
 import { drawerItemsPortofolio } from "@/screens/Portofolio/ListPage";
 import Portofolio_MenuDrawerSection from "@/screens/Portofolio/MenuDrawer";
-import PorfofolioSection from "@/screens/Portofolio/PorfofolioSection";
+import Portofolio_SocialMediaSection from "@/screens/Portofolio/SocialMediaSection";
+import { apiGetOnePortofolio } from "@/service/api-client/api-portofolio";
+import { apiUser } from "@/service/api-client/api-user";
 import { GStyles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
-import { Stack, useLocalSearchParams, router } from "expo-router";
-import { useState } from "react";
+import { Stack, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
 import { TouchableOpacity } from "react-native";
 
 export default function Portofolio() {
   const { id } = useLocalSearchParams();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [isLoadingDelete, setIsLoadingDelete] = useState(false);
+  const [data, setData] = useState<any>();
+  const [profileId, setProfileId] = useState<any>();
+
+  const { user } = useAuth();
 
   const openDrawer = () => {
     setIsDrawerOpen(true);
@@ -22,15 +33,41 @@ export default function Portofolio() {
   const closeDrawer = () => {
     setIsDrawerOpen(false);
   };
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData(id as string);
+      onLoadUserByToken();
+    }, [id])
+  );
+
+  async function onLoadData(id: string) {
+    const response = await apiGetOnePortofolio({ id: id });
+    console.log(
+      "[PROFILE ID]>>",
+      JSON.stringify(response.data.Profile.id, null, 2)
+    );
+    setData(response.data);
+  }
+
+  const onLoadUserByToken = async () => {
+    const response = await apiUser(user?.id as string);
+    console.log(
+      "[PROFILE LOGIN]>>",
+      JSON.stringify(response.data?.Profile.id, null, 2)
+    );
+    setProfileId(response?.data?.Profile?.id);
+  };
+
   return (
     <>
-      <ViewWrapper>
-        {/* Header */}
-        <Stack.Screen
-          options={{
-            title: "Portofolio",
-            headerLeft: () => <LeftButtonCustom />,
-            headerRight: () => (
+      {/* Header */}
+      <Stack.Screen
+        options={{
+          title: "Portofolio",
+          headerLeft: () => <LeftButtonCustom />,
+          headerRight: () =>
+            data?.Profile?.id !== profileId ? null : (
               <TouchableOpacity onPress={openDrawer}>
                 <Ionicons
                   name="ellipsis-vertical"
@@ -39,40 +76,44 @@ export default function Portofolio() {
                 />
               </TouchableOpacity>
             ),
-            headerStyle: GStyles.headerStyle,
-            headerTitleStyle: GStyles.headerTitleStyle,
-          }}
-        />
-        <PorfofolioSection setShowDeleteAlert={setDeleteAlert} />
+          headerStyle: GStyles.headerStyle,
+          headerTitleStyle: GStyles.headerTitleStyle,
+        }}
+      />
+      <ViewWrapper>
+        {!data || !profileId ? (
+          <LoaderCustom />
+        ) : (
+          <StackCustom>
+            <Portofolio_Data
+              data={data}
+              listSubBidang={data?.Portofolio_BidangDanSubBidangBisnis as any[]}
+            />
+            <Portofolio_BusinessLocation />
+            <Portofolio_SocialMediaSection
+              data={data?.Portofolio_MediaSosial}
+            />
+            <Portofolio_ButtonDelete
+              id={id as string}
+              isLoadingDelete={isLoadingDelete}
+              setIsLoadingDelete={setIsLoadingDelete}
+            />
+            <Spacing />
+          </StackCustom>
+        )}
       </ViewWrapper>
 
       {/* Drawer Komponen Eksternal */}
       <DrawerCustom
         isVisible={isDrawerOpen}
         closeDrawer={closeDrawer}
-        height={350}
+        height={"auto"}
       >
         <Portofolio_MenuDrawerSection
           drawerItems={drawerItemsPortofolio({ id: id as string })}
           setIsDrawerOpen={setIsDrawerOpen}
         />
       </DrawerCustom>
-
-      {/* Alert Delete */}
-      <AlertCustom
-        isVisible={deleteAlert}
-        onLeftPress={() => setDeleteAlert(false)}
-        onRightPress={() => {
-          setDeleteAlert(false);
-          console.log("Hapus portofolio");
-          router.back();
-        }}
-        title="Hapus Portofolio"
-        message="Apakah Anda yakin ingin menghapus portofolio ini?"
-        textLeft="Batal"
-        textRight="Hapus"
-        colorRight={MainColor.red}
-      />
     </>
   );
 }

app/(application)/(user)/portofolio/[id]/list.tsx

@@ -1,47 +1,28 @@
-import { BaseBox, Grid, TextCustom, ViewWrapper } from "@/components";
-import { MainColor } from "@/constants/color-palet";
-import { ICON_SIZE_SMALL } from "@/constants/constans-value";
-import { Ionicons } from "@expo/vector-icons";
-import { router, useLocalSearchParams } from "expo-router";
+import { TextCustom, ViewWrapper } from "@/components";
+import Portofolio_BoxView from "@/screens/Portofolio/BoxPortofolioView";
+import { apiGetPortofolio } from "@/service/api-client/api-portofolio";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function ListPortofolio() {
   const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any[]>([]);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadPortofolio(id as string);
+    }, [id])
+  );
+
+  const onLoadPortofolio = async (id: string) => {
+    const response = await apiGetPortofolio({ id: id });
+    setData(response.data);
+  };
   return (
     <ViewWrapper>
-      {Array.from({ length: 10 }).map((_, index) => (
-        <BaseBox
-          key={index}
-          style={{ backgroundColor: MainColor.darkblue }}
-          onPress={() => {
-            console.log("press to Portofolio");
-            router.push(`/portofolio/${id}`);
-          }}
-        >
-          <Grid>
-            <Grid.Col
-              span={10}
-              style={{ justifyContent: "center", backgroundColor: "" }}
-            >
-              <TextCustom bold size="large" truncate={1}>
-                Nama usaha portofolio
-              </TextCustom>
-              <TextCustom size="small" color="yellow">
-                #id-porofolio12345
-              </TextCustom>
-            </Grid.Col>
-            <Grid.Col
-              span={2}
-              style={{ alignItems: "flex-end", justifyContent: "center" }}
-            >
-              <Ionicons
-                name="caret-forward"
-                size={ICON_SIZE_SMALL}
-                color="white"
-              />
-            </Grid.Col>
-          </Grid>
-        </BaseBox>
-      ))}
+      {data ? data?.map((item: any, index: number) => (
+        <Portofolio_BoxView key={index} data={item} />
+      )) : <TextCustom>Tidak ada portofolio</TextCustom>}
     </ViewWrapper>
   );
 }

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

@@ -1,110 +0,0 @@
-import {
-  AvatarCustom,
-  ButtonCenteredOnly,
-  ButtonCustom,
-  SelectCustom,
-  Spacing,
-  StackCustom,
-  TextInputCustom,
-  ViewWrapper,
-} from "@/components";
-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 { View } from "react-native";
-
-export default function CreateProfile() {
-  const { id } = useLocalSearchParams();
-  const [data, setData] = useState({
-    name: "",
-    email: "",
-    address: "",
-    gender: "",
-  });
-
-  const handlerSave = () => {
-    console.log("data create profile >>", data);
-    router.back();
-  };
-
-  const footerComponent = (
-    <BoxButtonOnFooter>
-      <ButtonCustom
-        onPress={handlerSave}
-        // disabled={!data.name || !data.email || !data.address || !data.gender}
-      >
-        Simpan
-      </ButtonCustom>
-    </BoxButtonOnFooter>
-  );
-
-  return (
-    <ViewWrapper footerComponent={footerComponent}>
-      <StackCustom>
-        <InformationBox text="Upload foto profile anda." />
-        <View style={{ alignItems: "center" }}>
-          <AvatarCustom size="xl" />
-          <Spacing />
-          <ButtonCenteredOnly
-            icon="upload"
-            onPress={() => router.navigate(`/take-picture/${id}`)}
-          >
-            Upload
-          </ButtonCenteredOnly>
-        </View>
-
-        <Spacing />
-
-        <View>
-          <InformationBox text="Upload foto latar belakang anda." />
-          <LandscapeFrameUploaded />
-          <Spacing />
-          <ButtonCenteredOnly
-            icon="upload"
-            onPress={() => router.navigate(`/take-picture/${id}`)}
-          >
-            Upload
-          </ButtonCenteredOnly>
-        </View>
-
-        <Spacing />
-        <TextInputCustom
-          required
-          label="Nama"
-          placeholder="Masukkan nama"
-          value={data.name}
-          onChangeText={(text) => setData({ ...data, name: text })}
-        />
-        <TextInputCustom
-          keyboardType="email-address"
-          required
-          label="Email"
-          placeholder="Masukkan email"
-          value={data.email}
-          onChangeText={(text) => setData({ ...data, email: text })}
-        />
-        <TextInputCustom
-          required
-          label="Alamat"
-          placeholder="Masukkan alamat"
-          value={data.address}
-          onChangeText={(text) => setData({ ...data, address: text })}
-        />
-        <SelectCustom
-          label="Jenis Kelamin"
-          placeholder="Pilih jenis kelamin"
-          data={[
-            { label: "Laki-laki", value: "laki-laki" },
-            { label: "Perempuan", value: "perempuan" },
-          ]}
-          value={data.gender}
-          required
-          onChange={(value) => setData({ ...(data as any), gender: value })}
-        />
-        <Spacing />
-      </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,75 @@ 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,
+        category: "profile",
+      });
+      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 +83,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 +102,7 @@ export default function ProfileEdit() {
         <TextInputCustom
           label="Alamat"
           placeholder="Alamat"
-          value={data.alamat}
+          value={data?.alamat}
           onChangeText={(text) => {
             setData({ ...data, alamat: text });
           }}
@@ -84,25 +113,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,32 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { LoaderCustom } from "@/components";
 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 Profile_PortofolioSection from "@/screens/Profile/PortofolioSection";
 import ProfileSection from "@/screens/Profile/ProfileSection";
+import { apiGetPortofolio } from "@/service/api-client/api-portofolio";
+import { apiProfile } from "@/service/api-client/api-profile";
+import { apiUser } from "@/service/api-client/api-user";
 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 [dataToken, setDataToken] = useState<IProfile>();
+  const [listPortofolio, setListPortofolio] = useState<any[]>();
+
+  const { logout, isAdmin, user } = useAuth();
 
   const openDrawer = () => {
     setIsDrawerOpen(true);
@@ -25,21 +36,51 @@ export default function Profile() {
     setIsDrawerOpen(false);
   };
 
-  const handleLogout = () => {
-    console.log("User logout");
-    router.replace("/");
-    setShowLogoutAlert(false);
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData(id as string);
+      onLoadPortofolio(id as string);
+      onLoadUserByToken();
+      isUserCheck();
+    }, [id])
+  );
+
+  const isUserCheck = () => {
+    const userId = id;
+    const userLoginId = dataToken?.id;
+
+    return userId === userLoginId;
+  };
+
+  const onLoadData = async (id: string) => {
+    const response = await apiProfile({ id: id });
+    setData(response.data);
+  };
+
+  const onLoadUserByToken = async () => {
+    const response = await apiUser(user?.id as string);
+    setDataToken(response?.data?.Profile);
+  };
+
+  const onLoadPortofolio = async (id: string) => {
+    const response = await apiGetPortofolio({ id: id });
+    const lastTwoByDate = response.data
+      .sort(
+        (a: any, b: any) =>
+          new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+      ) // urut desc
+      .slice(0, 2);
+    setListPortofolio(lastTwoByDate);
   };
 
   return (
     <>
-      <ViewWrapper>
-        {/* Header */}
-        <Stack.Screen
-          options={{
-            title: "Profile",
-            headerLeft: () => <LeftButtonCustom />,
-            headerRight: () => (
+      <Stack.Screen
+        options={{
+          title: "Profile",
+          headerLeft: () => <LeftButtonCustom />,
+          headerRight: () =>
+            isUserCheck() && (
               <TouchableOpacity onPress={openDrawer}>
                 <Ionicons
                   name="ellipsis-vertical"
@@ -48,36 +89,38 @@ export default function Profile() {
                 />
               </TouchableOpacity>
             ),
-            headerStyle: GStyles.headerStyle,
-            headerTitleStyle: GStyles.headerTitleStyle,
-          }}
-        />
-        <ProfileSection />
+          headerStyle: GStyles.headerStyle,
+          headerTitleStyle: GStyles.headerTitleStyle,
+        }}
+      />
+      {/* Main View */}
+      <ViewWrapper>
+        {!data || !dataToken ? (
+          <LoaderCustom />
+        ) : (
+          <>
+            <ProfileSection data={data as any} />
+
+            <Profile_PortofolioSection
+              data={listPortofolio as any}
+              profileId={id as string}
+            />
+          </>
+        )}
       </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-background.tsx

@@ -5,40 +5,142 @@ import {
   ButtonCustom,
 } from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+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 { router, useLocalSearchParams } from "expo-router";
+import { useAuth } from "@/hooks/use-auth";
+import { apiFileDelete } from "@/service/api-client/api-file";
+import { apiProfile, apiUpdateProfile } 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";
+import Toast from "react-native-toast-message";
 
 export default function UpdateBackgroundProfile() {
   const { id } = useLocalSearchParams();
+  const [data, setData] = useState<IProfile>();
+  const [imageUri, setImageUri] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const { token } = useAuth();
+
+  useFocusEffect(
+    useCallback(() => {
+      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);
+    }
+  }
+
+  async function onUpload() {
+    try {
+      setIsLoading(true);
+
+      const response = await uploadImageService({
+        imageUri,
+        dirId: DIRECTORY_ID.profile_background,
+      });
+
+      if (response.success) {
+        const fileId = response.data.id;
+        const responseUpdate = await apiUpdateProfile({
+          id: id as string,
+          data: { fileId },
+          category: "background",
+        });
+
+        if (!responseUpdate.success) {
+          Toast.show({
+            type: "error",
+            text1: "Info",
+            text2: responseUpdate.message,
+          });
+          return;
+        }
+
+        if (data?.imageBackgroundId) {
+          const deletePrevFile = await apiFileDelete({
+            token: token as string,
+            id: data?.imageBackgroundId as string,
+          });
+
+          if (!deletePrevFile.success) {
+            console.log("error delete prev file >>", deletePrevFile.message);
+          }
+        }
+
+        Toast.show({
+          type: "success",
+          text1: "Sukses",
+          text2: "Background berhasil diupdate",
+        });
+
+        router.back();
+      }
+    } catch (error) {
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: error as string,
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
   const buttonFooter = (
     <BoxButtonOnFooter>
       <ButtonCustom
+        isLoading={isLoading}
         onPress={() => {
-          console.log("Simpan foto background >>", id);
-          router.back();
+          onUpload();
         }}
       >
-        Simpan
+        Update
       </ButtonCustom>
     </BoxButtonOnFooter>
   );
 
+  const image = imageUri ? (
+    <Image
+      source={{ uri: imageUri }}
+      style={{ width: "100%", height: "100%" }}
+    />
+  ) : (
+    <Image
+      source={
+        data?.imageBackgroundId
+          ? { uri: API_STRORAGE.GET({ fileId: data.imageBackgroundId }) }
+          : DUMMY_IMAGE.background
+      }
+      style={{ width: "100%", height: "100%", borderRadius: 10 }}
+    />
+  );
+
   return (
     <ViewWrapper footerComponent={buttonFooter}>
       <BaseBox
         style={{ alignItems: "center", justifyContent: "center", height: 250 }}
       >
-        <Image
-          source={DUMMY_IMAGE.background}
-          resizeMode="cover"
-          style={{ width: "100%", height: "100%", borderRadius: 10 }}
-        />
+        {image}
       </BaseBox>
 
       <ButtonCenteredOnly
         icon="upload"
-        onPress={() => router.navigate(`/(application)/take-picture/${id}`)}
+        onPress={() => {
+          pickImage({
+            setImageUri,
+          });
+        }}
       >
         Update
       </ButtonCenteredOnly>

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

@@ -1,47 +1,148 @@
 import {
-  AvatarCustom,
   BaseBox,
   BoxButtonOnFooter,
   ButtonCenteredOnly,
   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, apiUpdateProfile } 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";
+import Toast from "react-native-toast-message";
+import { useAuth } from "@/hooks/use-auth";
+import { apiFileDelete } from "@/service/api-client/api-file";
 
 export default function UpdatePhotoProfile() {
   const { id } = useLocalSearchParams();
+  const [data, setData] = useState<IProfile>();
+  const [imageUri, setImageUri] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const { token } = useAuth();
+
+  useFocusEffect(
+    useCallback(() => {
+      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);
+    }
+  }
+
+  async function onUpload() {
+    try {
+      setIsLoading(true);
+
+      const response = await uploadImageService({
+        imageUri,
+        dirId: DIRECTORY_ID.profile_foto,
+      });
+
+      if (response.success) {
+        const fileId = response.data.id;
+        const responseUpdate = await apiUpdateProfile({
+          id: id as string,
+          data: { fileId },
+          category: "photo",
+        });
+
+        if (!responseUpdate.success) {
+          Toast.show({
+            type: "error",
+            text1: "Info",
+            text2: responseUpdate.message,
+          });
+          return;
+        }
+
+        if (data?.imageId) {
+          const deletePrevFile = await apiFileDelete({
+            token: token as string,
+            id: data?.imageId as string,
+          });
+
+          if (!deletePrevFile.success) {
+            console.log("error delete prev file >>", deletePrevFile.message);
+          }
+        }
+
+        Toast.show({
+          type: "success",
+          text1: "Sukses",
+          text2: "Photo berhasil diupdate",
+        });
+
+        router.back();
+      }
+    } catch (error) {
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: error as string,
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
   const buttonFooter = (
     <BoxButtonOnFooter>
       <ButtonCustom
+        isLoading={isLoading}
         onPress={() => {
-          console.log("Simpan foto profile >>", id);
-          router.back();
+          onUpload();
         }}
       >
-        Simpan
+        Update
       </ButtonCustom>
     </BoxButtonOnFooter>
   );
+
+  const image = imageUri ? (
+    <Image source={{ uri: imageUri }} style={{ width: 200, height: 200 }} />
+  ) : (
+    <Image
+      source={
+        data?.imageId
+          ? { uri: API_STRORAGE.GET({ fileId: data.imageId }) }
+          : DUMMY_IMAGE.avatar
+      }
+      style={{ width: 200, height: 200 }}
+    />
+  );
+
   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

@@ -0,0 +1,246 @@
+import {
+  BaseBox,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  SelectCustom,
+  Spacing,
+  StackCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
+import InformationBox from "@/components/Box/InformationBox";
+import DIRECTORY_ID from "@/constants/directory-id";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import { useAuth } from "@/hooks/use-auth";
+import { apiCreateProfile } from "@/service/api-client/api-profile";
+import { apiValidationEmail } from "@/service/api-client/api-validation";
+import { uploadImageService } from "@/service/upload-service";
+import pickImage from "@/utils/pickImage";
+import { router } from "expo-router";
+import { useState } from "react";
+import { Image, View } from "react-native";
+import { Avatar } from "react-native-paper";
+import Toast from "react-native-toast-message";
+
+export default function CreateProfile() {
+  const { user } = useAuth();
+  const [imagePhoto, setImagePhoto] = useState<string | null>(null);
+  const [imageBackground, setImageBackground] = useState<string | null>(null);
+
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [data, setData] = useState({
+    id: user?.id,
+    name: "",
+    email: "",
+    alamat: "",
+    jenisKelamin: "",
+  });
+
+  const handlerSave = async () => {
+    let IMG = {
+      imageId: "",
+      imageBackgroundId: "",
+    };
+    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 responseValidateEmail = await apiValidationEmail({
+        email: data.email,
+      });
+
+      if (!responseValidateEmail.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal",
+          text2: responseValidateEmail.message,
+        });
+        return;
+      }
+
+      if (imagePhoto) {
+        try {
+          const responseUploadPhoto = await uploadImageService({
+            imageUri: imagePhoto,
+            dirId: DIRECTORY_ID.profile_foto,
+          });
+
+          if (responseUploadPhoto.success) {
+            const fileIdPhoto = responseUploadPhoto.data.id;
+
+            IMG.imageId = fileIdPhoto;
+          }
+        } catch (error) {
+          Toast.show({
+            type: "error",
+            text1: "Gagal",
+            text2: error as string,
+          });
+        }
+      }
+
+      if (imageBackground) {
+        try {
+          const responseUploadBackground = await uploadImageService({
+            imageUri: imageBackground,
+            dirId: DIRECTORY_ID.profile_background,
+          });
+          if (responseUploadBackground.success) {
+            const fileIdBackground = responseUploadBackground.data.id;
+
+            IMG.imageBackgroundId = fileIdBackground;
+          }
+        } catch (error) {
+          Toast.show({
+            type: "error",
+            text1: "Gagal",
+            text2: error as string,
+          });
+        }
+      }
+
+      const fixData = {
+        ...data,
+        ...IMG,
+      };
+
+      const response = await apiCreateProfile(fixData);
+      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");
+      return;
+    } catch (error) {
+      console.log("error create profile >>", error);
+      Toast.show({
+        type: "error",
+        text1: "Gagal membuat profile",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const footerComponent = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        isLoading={isLoading}
+        onPress={handlerSave}
+        // disabled={!data.name || !data.email || !data.address || !data.gender}
+      >
+        Simpan
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <ViewWrapper footerComponent={footerComponent}>
+      <StackCustom>
+        <InformationBox text="Upload foto profile anda." />
+        <View style={{ alignItems: "center" }}>
+          <Avatar.Image
+            size={100}
+            source={imagePhoto ? { uri: imagePhoto } : DUMMY_IMAGE.avatar}
+          />
+          <Spacing />
+          <ButtonCenteredOnly
+            icon="upload"
+            onPress={() => {
+              pickImage({
+                setImageUri: setImagePhoto,
+              });
+            }}
+          >
+            Upload
+          </ButtonCenteredOnly>
+        </View>
+
+        <Spacing />
+
+        <View>
+          <InformationBox text="Upload foto latar belakang anda." />
+          <BaseBox>
+            <Image
+              source={
+                imageBackground
+                  ? { uri: imageBackground }
+                  : DUMMY_IMAGE.background
+              }
+              style={{ width: "100%", height: 200 }}
+            />
+          </BaseBox>
+          {/* <Spacing /> */}
+          <ButtonCenteredOnly
+            icon="upload"
+            onPress={() => {
+              pickImage({
+                setImageUri: setImageBackground,
+              });
+            }}
+          >
+            Upload
+          </ButtonCenteredOnly>
+        </View>
+
+        <Spacing />
+        <TextInputCustom
+          required
+          label="Nama"
+          placeholder="Masukkan nama"
+          value={data.name}
+          onChangeText={(text) => setData({ ...data, name: text })}
+        />
+        <TextInputCustom
+          keyboardType="email-address"
+          required
+          label="Email"
+          placeholder="Masukkan email"
+          value={data.email}
+          onChangeText={(text) => setData({ ...data, email: text })}
+        />
+        <TextInputCustom
+          required
+          label="Alamat"
+          placeholder="Masukkan alamat"
+          value={data.alamat}
+          onChangeText={(text) => setData({ ...data, alamat: text })}
+        />
+        <SelectCustom
+          label="Jenis Kelamin"
+          placeholder="Pilih jenis kelamin"
+          data={[
+            { label: "Laki-laki", value: "laki-laki" },
+            { label: "Perempuan", value: "perempuan" },
+          ]}
+          value={data.jenisKelamin}
+          required
+          onChange={(value) =>
+            setData({ ...(data as any), jenisKelamin: value })
+          }
+        />
+        <Spacing />
+      </StackCustom>
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/user-search/index.tsx

@@ -1,5 +1,5 @@
 import {
-  AvatarCustom,
+  AvatarComp,
   ClickableCustom,
   Grid,
   Spacing,
@@ -10,39 +10,42 @@ import {
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { apiAllUser } from "@/service/api-client/api-user";
 import { Ionicons } from "@expo/vector-icons";
 import { router } from "expo-router";
+import _ from "lodash";
+import { useEffect, useState } from "react";
 
 export default function UserSearch() {
-  function generateRandomPhoneNumber(index: number) {
-    let prefix;
+  const [data, setData] = useState<any[]>([]);
+  const [search, setSearch] = useState<string>("");
 
-    // Menentukan prefix berdasarkan index genap atau ganjil
-    if (index % 2 === 0) {
-      const evenPrefixes = ["6288", "6289", "6281"];
-      prefix = evenPrefixes[Math.floor(Math.random() * evenPrefixes.length)];
-    } else {
-      const oddPrefixes = ["6285", "6283"];
-      prefix = oddPrefixes[Math.floor(Math.random() * oddPrefixes.length)];
+  useEffect(() => {
+    onLoadData(search);
+  }, [search]);
+
+  const onLoadData = async (search: string) => {
+    try {
+      const response = await apiAllUser({ search: search });
+      console.log("[DATA USER] >", JSON.stringify(response.data, null, 2));
+      setData(response.data);
+    } catch (error) {
+      console.log("Error fetching data", error);
     }
+  };
 
-    // Menghitung panjang sisa nomor acak (antara 10 - 12 digit)
-    const remainingLength = Math.floor(Math.random() * 3) + 10; // 10, 11, atau 12
+  const handleSearch = (search: string) => {
+    setSearch(search);
+    onLoadData(search);
+  };
 
-    // Membuat sisa nomor acak
-    let randomNumber = "";
-    for (let i = 0; i < remainingLength; i++) {
-      randomNumber += Math.floor(Math.random() * 10); // Digit acak antara 0-9
-    }
-
-    // Menggabungkan prefix dan sisa nomor
-    return prefix + randomNumber;
-  }
   return (
     <>
       <ViewWrapper
         headerComponent={
           <TextInputCustom
+            value={search}
+            onChangeText={handleSearch}
             iconLeft={
               <Ionicons
                 name="search"
@@ -57,41 +60,46 @@ export default function UserSearch() {
         }
       >
         <StackCustom>
-          {Array.from({ length: 20 }).map((e, index) => {
-            return (
-              <Grid key={index}>
-                <Grid.Col span={2}>
-                  <AvatarCustom href={`/profile/${index}`}/>  
-                </Grid.Col>
-                <Grid.Col span={9}>
-                  <TextCustom size="large">Nama user {index}</TextCustom>
-                  <TextCustom size="small">
-                    +{generateRandomPhoneNumber(index)}
-                  </TextCustom>
-                </Grid.Col>
-                <Grid.Col
-                  span={1}
-                  style={{
-                    justifyContent: "center",
-                    alignItems: "flex-end",
+          {!_.isEmpty(data) ? (
+            data?.map((e, index) => {
+              return (
+                <ClickableCustom
+                  key={index}
+                  onPress={() => {
+                    console.log("Ke Profile");
+                    router.push(`/profile/${e?.Profile?.id}`);
                   }}
                 >
-                  <ClickableCustom
-                    onPress={() => {
-                      console.log("Ke Profile");
-                      router.push(`/profile/${index}`);
-                    }}
-                  >
-                    <Ionicons
-                      name="chevron-forward"
-                      size={ICON_SIZE_SMALL}
-                      color={MainColor.white}
-                    />
-                  </ClickableCustom>
-                </Grid.Col>
-              </Grid>
-            );
-          })}
+                  <Grid>
+                    <Grid.Col span={2}>
+                      <AvatarComp fileId={e?.Profile?.imageId} size="base" />
+                    </Grid.Col>
+                    <Grid.Col span={9}>
+                      <StackCustom gap={"sm"}>
+                        <TextCustom size="large">{e?.username}</TextCustom>
+                        <TextCustom size="small">+{e?.nomor}</TextCustom>
+                      </StackCustom>
+                    </Grid.Col>
+                    <Grid.Col
+                      span={1}
+                      style={{
+                        justifyContent: "center",
+                        alignItems: "flex-end",
+                      }}
+                    >
+                      <Ionicons
+                        name="chevron-forward"
+                        size={ICON_SIZE_SMALL}
+                        color={MainColor.white}
+                      />
+                    </Grid.Col>
+                  </Grid>
+                </ClickableCustom>
+              );
+            })
+          ) : (
+            <TextCustom align="center">Tidak ditemukan</TextCustom>
+          )}
         </StackCustom>
         <Spacing height={50} />
       </ViewWrapper>

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,19 +82,42 @@ 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" />
+        {/* ================== 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/[id]/[status]/index" />
+        <Stack.Screen name="event/[id]/reject-input"/> */}
+        {/* ================== Event End ================== */}
+
+        {/* ================== Donasi Start ================== */}
+        {/* <Stack.Screen name="donation/index" /> */}
+        {/* <Stack.Screen name="donation/[status]/status" /> */}
+        {/* <Stack.Screen name="donation/[id]/[status]/index" />
+        <Stack.Screen name="donation/[id]/reject-input"/> */}
+        {/* ================== Donasi End ================== */}
       </Stack>
 
       <DrawerAdmin
@@ -193,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") {
@@ -203,7 +231,7 @@ export default function AdminLayout() {
                   textLeft: "Batal",
                   textRight: "Keluar",
                   onPressRight: () => {
-                    router.replace("/");
+                    logout();
                   },
                 });
               }

app/(application)/admin/app-information/index.tsx

@@ -1,18 +1,15 @@
 import {
-  ActionIcon,
   ScrollableCustom,
   StackCustom,
-  ViewWrapper,
+  ViewWrapper
 } from "@/components";
+import AdminActionIconPlus from "@/components/_ShareComponent/Admin/ActionIconPlus";
 import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import AdminAppInformation_BusinessFieldSection from "@/screens/Admin/App-Information/BusinessFieldSection";
 import AdminAppInformation_Bank from "@/screens/Admin/App-Information/InformationBankSection";
 import AdminAppInformation_StickerSection from "@/screens/Admin/App-Information/StickerSection";
-import { Ionicons } from "@expo/vector-icons";
 import { router } from "expo-router";
 import { useState } from "react";
-import { View } from "react-native";
 
 export default function AdminInformation() {
   const [activeCategory, setActiveCategory] = useState<string | null>("bank");
@@ -53,22 +50,17 @@ export default function AdminInformation() {
         <AdminComp_BoxTitle
           title={activePage}
           rightComponent={
-            <View style={{ flexDirection: "row" }}>
-              <ActionIcon
-                icon={
-                  <Ionicons name="add" size={ICON_SIZE_SMALL} color="black" />
+            <AdminActionIconPlus
+              onPress={() => {
+                if (activeCategory === "bank") {
+                  router.push("/admin/app-information/information-bank/create");
+                } else if (activeCategory === "business") {
+                  router.push("/admin/app-information/business-field/create");
+                } else if (activeCategory === "sticker") {
+                  router.push("/admin/app-information/sticker/create");
                 }
-                onPress={() => {
-                  if (activeCategory === "bank") {
-                    router.push("/admin/app-information/information-bank/create");
-                  } else if (activeCategory === "business") {
-                    router.push("/admin/app-information/business-field/create");
-                  } else if (activeCategory === "sticker") {
-                    router.push("/admin/app-information/sticker/create");
-                  }
-                }}
-              />
-            </View>
+              }}
+            />
           }
         />
         {renderContent()}

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

@@ -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 AdminDonationStatus() {
+  const { status } = useLocalSearchParams();
+  const rightComponent = (
+    <SearchInput
+      containerStyle={{ width: "100%", marginBottom: 0 }}
+      placeholder="Cari"
+    />
+  );
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminComp_BoxTitle
+            title={`Donasi ${_.startCase(status as string)}`}
+            rightComponent={rightComponent}
+          />
+        }
+      >
+        <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>
+            }
+          />
+        ))}
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/donation/category-create.tsx

@@ -0,0 +1,27 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { useRouter } from "expo-router";
+
+export default function AdminDonationCategoryCreate() {
+  const router = useRouter();
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom onPress={() => router.back()}>Simpan</ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title="Tambah Kategori" />}
+        footerComponent={buttonSubmit}
+      >
+        <TextInputCustom placeholder="Masukkan Kategori" />
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/donation/category-update.tsx

@@ -0,0 +1,35 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { useState } from "react";
+
+export default function AdminDonationCategoryUpdate() {
+  const { id } = useLocalSearchParams();
+  const [value, setValue] = useState(id);
+
+  const router = useRouter();
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom onPress={() => router.back()}>Update</ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title="Ubah Kategori" />}
+        footerComponent={buttonSubmit}
+      >
+        <TextInputCustom
+          placeholder="Masukkan Kategori"
+          value={value as any}
+          onChangeText={setValue}
+        />
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/donation/category.tsx

@@ -0,0 +1,113 @@
+import {
+    ActionIcon,
+    BaseBox,
+    CenterCustom,
+    Spacing,
+    StackCustom,
+    TextCustom,
+    ViewWrapper,
+} from "@/components";
+import { IconEdit } from "@/components/_Icon";
+import AdminActionIconPlus from "@/components/_ShareComponent/Admin/ActionIconPlus";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { GridView_3_3_6 } from "@/components/_ShareComponent/GridView_3_3_6";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { View } from "react-native";
+import { Divider, Switch } from "react-native-paper";
+import { router } from "expo-router";
+
+export default function AdminDonationCategory() {
+  return (
+    <>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Donasi" />}>
+        <AdminComp_BoxTitle
+          title="Kategori"
+          rightComponent={
+            <AdminActionIconPlus
+              onPress={() => {
+                router.push(`/admin/donation/category-create`);
+              }}
+            />
+          }
+        />
+
+        <BaseBox>
+          <GridView_3_3_6
+            component1={
+              <TextCustom bold align="center">
+                Aksi
+              </TextCustom>
+            }
+            component2={<TextCustom bold>Status</TextCustom>}
+            component3={<TextCustom bold>Kategori</TextCustom>}
+          />
+          <Divider />
+          <Spacing />
+
+          <StackCustom>
+            {listData.map((item, index) => (
+              <View key={index}>
+                <GridView_3_3_6
+                  component1={
+                    <CenterCustom>
+                      <ActionIcon
+                        icon={
+                          <IconEdit size={ICON_SIZE_BUTTON} color="black" />
+                        }
+                        onPress={() => {
+                            router.push(`/admin/donation/category-update?id=${index}`);
+                        }}
+                      />
+                    </CenterCustom>
+                  }
+                  component2={
+                    <Switch
+                      value={true}
+                      onValueChange={(item) => {
+                        console.log(item);
+                      }}
+                      color={MainColor.yellow}
+                      
+                    />
+                  }
+                  component3={<TextCustom bold>{item.label}</TextCustom>}
+                />
+                <Spacing height={10} />
+                <Divider />
+              </View>
+            ))}
+          </StackCustom>
+        </BaseBox>
+      </ViewWrapper>
+    </>
+  );
+}
+
+const listData = [
+  {
+    label: "Kegiatan Sosial",
+    value: "kegiatan_sosial",
+  },
+  {
+    label: "Pendidikan",
+    value: "pendidikan",
+  },
+  {
+    label: "Kesehatan",
+    value: "kesehatan",
+  },
+  {
+    label: "Kebudayaan",
+    value: "kebudayaan",
+  },
+  {
+    label: "Bencana Alami",
+    value: "bencana_alami",
+  },
+  {
+    label: "Lainnya",
+    value: "lainnya",
+  },
+];

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

@@ -0,0 +1,49 @@
+import { Spacing, StackCustom, ViewWrapper } from "@/components";
+import {
+    IconList,
+    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 AdminDonation() {
+  return (
+    <>
+      <ViewWrapper>
+        <AdminTitlePage title="Donasi" />
+        <Spacing />
+        <StackCustom gap={"xs"}>
+          {listData.map((item, i) => (
+            <AdminComp_BoxDashboard key={i} item={item} />
+          ))}
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}
+
+const listData = [
+  {
+    label: "Publish",
+    value: 4,
+    icon: <IconPublish size={25} color={MainColor.green} />,
+  },
+  {
+    label: "Review",
+    value: 7,
+    icon: <IconReview size={25} color={MainColor.orange} />,
+  },
+  {
+    label: "Reject",
+    value: 5,
+    icon: <IconReject size={25} color={MainColor.red} />,
+  },
+  {
+    label: "Kategori",
+    value: 4,
+    icon: <IconList size={25} color={MainColor.white_gray} />,
+  },
+];

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

@@ -0,0 +1,217 @@
+import {
+  ActionIcon,
+  AlertDefaultSystem,
+  BadgeCustom,
+  BaseBox,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  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 } from "@/constants/constans-value";
+import dayjs from "dayjs";
+import { router, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import React from "react";
+import QRCode from "react-native-qrcode-svg";
+
+export default function AdminEventDetail() {
+  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: "Pembuat Event",
+      value: `Bagas Banuna ${id}`,
+    },
+    {
+      label: "Judul Event",
+      value: `Event 123`,
+    },
+    {
+      label: "Status",
+      value: (
+        <BadgeCustom color={colorBadge()}>
+          {_.startCase(status as string)}
+        </BadgeCustom>
+      ),
+    },
+    {
+      label: "Lokasi",
+      value: "Lokasi Event",
+    },
+    {
+      label: "Tipe Acara",
+      value: "Tipe Acara",
+    },
+    {
+      label: "Mulai Event",
+      value: dayjs().format("DD/MM/YYYY HH:mm:ss"),
+    },
+    {
+      label: "Event Berakhir",
+      value: dayjs().add(3, "day").format("DD/MM/YYYY HH:mm:ss"),
+    },
+    {
+      label: "Deskripsi",
+      value: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+    },
+    // {
+    //   label: "Daftar Tipe Acara",
+    //   value: (
+    //     <>
+    //       <List.Item
+    //         title={<TextCustom>Pilihan 1</TextCustom>}
+    //         left={(props) => (
+    //           <List.Icon {...props} icon="circle" color={MainColor.yellow} />
+    //         )}
+    //       />
+    //       <List.Item
+    //         title={<TextCustom>Pilihan 2</TextCustom>}
+    //         left={(props) => (
+    //           <List.Icon {...props} icon="circle" color={MainColor.yellow} />
+    //         )}
+    //       />
+    //       <List.Item
+    //         title={<TextCustom>Pilihan 3</TextCustom>}
+    //         left={(props) => (
+    //           <List.Icon {...props} icon="circle" color={MainColor.yellow} />
+    //         )}
+    //       />
+    //       <List.Item
+    //         title={<TextCustom>Pilihan 4</TextCustom>}
+    //         left={(props) => (
+    //           <List.Icon {...props} icon="circle" color={MainColor.yellow} />
+    //         )}
+    //       />
+    //     </>
+    //   ),
+    // },
+  ];
+
+  const rightComponent = (
+    <ActionIcon
+      icon={<IconDot size={ICON_SIZE_BUTTON} />}
+      onPress={() => {
+        setOpenDrawer(true);
+      }}
+    />
+  );
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminBackButtonAntTitle
+            title={`Detail Data`}
+            rightComponent={
+              (status === "publish" || status === "riwayat") && rightComponent
+            }
+          />
+        }
+      >
+        <BaseBox>
+          <StackCustom>
+            {listData.map((item, i) => (
+              <GridDetail_4_8
+                key={i}
+                label={<TextCustom bold>{item.label}</TextCustom>}
+                value={<TextCustom>{item.value}</TextCustom>}
+              />
+            ))}
+          </StackCustom>
+
+          <Spacing />
+        </BaseBox>
+        {(status === "publish" || status === "riwayat") && (
+          <BaseBox>
+            <StackCustom style={{ alignItems: "center" }}>
+              <TextCustom bold>QR Code Event</TextCustom>
+              <QRCode
+                value="https://google.com"
+                size={200}
+                // logo={require("@/assets/images/logo-hipmi.png")}
+                // logoSize={70}
+                // logoBackgroundColor="transparent"
+                // logoBorderRadius={50}
+                // color="black"
+              />
+            </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/event/${id}/reject-input`);
+            }}
+          />
+        )}
+
+        {status === "reject" && (
+          <AdminButtonReject
+            title="Tambah Catatan"
+            onReject={() => {
+              router.push(`/admin/event/${id}/reject-input`);
+            }}
+          />
+        )}
+        <Spacing />
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              label: "Daftar Peserta",
+              icon: <IconList />,
+              path: `/admin/event/${id}/list-of-participants`,
+            },
+          ]}
+          onPressItem={(item) => {
+            setOpenDrawer(false);
+            router.push(item.path as any);
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

app/(application)/admin/event/[id]/list-of-participants.tsx

@@ -0,0 +1,42 @@
+import { BadgeCustom, BaseBox, Grid, TextCustom, ViewWrapper } from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { MainColor } from "@/constants/color-palet";
+
+export default function AdminEventListOfParticipants() {
+
+    const isPresent = ({id}: {id: number}) => {
+        const check = id % 3 * 3;
+        if (check === 0) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title="Daftar Peserta" />}
+      >
+        {Array.from({ length: 10 }).map((item, index) => (
+          <BaseBox key={index}>
+            <Grid>
+              <Grid.Col span={6}>
+                <TextCustom bold>Username {index + 1}</TextCustom>
+                <TextCustom>+6282123456789</TextCustom>
+              </Grid.Col>
+              <Grid.Col span={6} style={{ justifyContent: "center" }}>
+                <BadgeCustom
+                  style={{ alignSelf: "flex-end" }}
+                  color={isPresent({id: index}) ? MainColor.green : MainColor.red}
+                >
+                  {isPresent({id: index}) ? "Hadir" : "Tidak Hadir"}
+                </BadgeCustom>
+              </Grid.Col>
+            </Grid>
+          </BaseBox>
+        ))}
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/event/[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 AdminEventRejectInput() {
+  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/event/reject/status`);
+            },
+          })
+        }
+      />
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <>
+      <ViewWrapper
+        footerComponent={buttonSubmit}
+        headerComponent={<AdminBackButtonAntTitle title="Penolakan Event" />}
+      >
+        <TextAreaCustom
+          value={value}
+          onChangeText={setValue}
+          placeholder="Masukan alasan"
+          required
+          showCount
+          maxLength={1000}
+        />
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -0,0 +1,76 @@
+import {
+  ActionIcon,
+  BaseBox,
+  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 AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+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 AdminEventStatus() {
+  const { status } = useLocalSearchParams();
+  const rightComponent = (
+    <SearchInput
+      containerStyle={{ width: "100%", marginBottom: 0 }}
+      placeholder="Cari"
+    />
+  );
+  return (
+    <>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Event" />}>
+        <AdminComp_BoxTitle
+          title={`${_.startCase(status as string)}`}
+          rightComponent={rightComponent}
+        />
+
+        <BaseBox>
+          <AdminTitleTable
+            title1="Aksi"
+            title2="Username"
+            title3="Judul Event"
+          />
+          <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/event/${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>
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -0,0 +1,55 @@
+import { Spacing, StackCustom, ViewWrapper } from "@/components";
+import { IconArchive } from "@/components/_Icon";
+import {
+  IconList,
+  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 AdminVoting() {
+  return (
+    <>
+      <ViewWrapper>
+        <AdminTitlePage title="Event" />
+        <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: 8,
+    icon: <IconReview size={25} color={MainColor.orange} />,
+  },
+  {
+    label: "Reject",
+    value: 4,
+    icon: <IconReject size={25} color={MainColor.red} />,
+  },
+  {
+    label: "Riwayat",
+    value: 6,
+    icon: <IconArchive size={25} color={MainColor.placeholder} />,
+  },
+  {
+    label: "Tipe Acara",
+    value: 7,
+    icon: <IconList size={25} color={MainColor.placeholder} />,
+  },
+];

app/(application)/admin/event/type-create.tsx

@@ -0,0 +1,27 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { useRouter } from "expo-router";
+
+export default function AdminEventTypeOfEventCreate() {
+  const router = useRouter();
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom onPress={() => router.back()}>Simpan</ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title="Tambah Tipe Acara" />}
+        footerComponent={buttonSubmit}
+      >
+        <TextInputCustom placeholder="Masukkan Tipe Acara" />
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/event/type-of-event.tsx

@@ -0,0 +1,104 @@
+import {
+  ActionIcon,
+  BaseBox,
+  CenterCustom,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconEdit } from "@/components/_Icon";
+import AdminActionIconPlus from "@/components/_ShareComponent/Admin/ActionIconPlus";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { router } from "expo-router";
+import { View } from "react-native";
+import { Divider } from "react-native-paper";
+
+export default function AdminEventTypeOfEvent() {
+  return (
+    <>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Event" />}>
+        <AdminComp_BoxTitle
+          title="Tipe Acara"
+          rightComponent={
+            <AdminActionIconPlus
+              onPress={() => {
+                router.push(`/admin/event/type-create`);
+              }}
+            />
+          }
+        />
+
+        <BaseBox>
+          <GridDetail_4_8
+            label={
+              <TextCustom bold align="center">
+                Aksi
+              </TextCustom>
+            }
+            value={<TextCustom bold>Tipe Acara</TextCustom>}
+          />
+          <Divider />
+          <Spacing />
+
+          <StackCustom>
+            {listData.map((item, index) => (
+              <View key={index}>
+                <GridDetail_4_8
+                  label={
+                    <CenterCustom>
+                      <ActionIcon
+                        icon={
+                          <IconEdit size={ICON_SIZE_BUTTON} color="black" />
+                        }
+                        onPress={() => {
+                          router.push(`/admin/event/type-update?id=${index}`);
+                        }}
+                      />
+                    </CenterCustom>
+                  }
+                  value={<TextCustom bold>{item.label}</TextCustom>}
+                />
+                <Divider />
+              </View>
+            ))}
+          </StackCustom>
+        </BaseBox>
+      </ViewWrapper>
+    </>
+  );
+}
+
+const listData = [
+  {
+    label: "Seminar",
+    value: "seminar",
+  },
+  {
+    label: "Workshop",
+    value: "workshop",
+  },
+  {
+    label: "Konferensi",
+    value: "konferensi",
+  },
+  {
+    label: "Lomba",
+    value: "lomba",
+  },
+  {
+    label: "Pameran",
+    value: "pameran",
+  },
+  {
+    label: "Pesta",
+    value: "pesta",
+  },
+  {
+    label: "Pertandingan",
+    value: "pertandingan",
+  },
+];

app/(application)/admin/event/type-update.tsx

@@ -0,0 +1,30 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { useLocalSearchParams, useRouter } from "expo-router";
+
+export default function AdminEventTypeOfEventUpdate() {
+  const { id } = useLocalSearchParams();
+  console.log("id >", id);
+
+  const router = useRouter();
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom onPress={() => router.back()}>Update</ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title="Ubah Tipe Acara" />}
+        footerComponent={buttonSubmit}
+      >
+        <TextInputCustom placeholder="Masukkan Tipe Acara" value="" />
+      </ViewWrapper>
+    </>
+  );
+}

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>
-    </>
-  );
-}