API Job

Add:
- api-client/api-job: kumpulan fetch api

Fix:
- UI beranda , status sudah terintergrasi dengan API
- UI detail status, detail utama sudah terintergrasi dengan API
- Search pada beranda sudah terintegrasi
- Edit sudah terintergrasi

### 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,72 @@
+// 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-web-browser',
+    [
+      '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)/contribution.tsx

@@ -1,43 +1,115 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-  AvatarCustom,
   AvatarUsernameAndOtherComponent,
   BoxWithHeaderSection,
-  Grid,
+  LoaderCustom,
+  Spacing,
   StackCustom,
   TextCustom,
   ViewWrapper
 } from "@/components";
-import React from "react";
+import { useAuth } from "@/hooks/use-auth";
+import {
+  apiEventGetAll
+} from "@/service/api-client/api-event";
+import { dateTimeView } from "@/utils/dateTimeView";
+import { useFocusEffect } from "expo-router";
+import _ from "lodash";
+import React, { useCallback, useState } from "react";
 
 export default function EventContribution() {
+  const { user } = useAuth();
+  const [listData, setListData] = useState<any>([]);
+  const [isLoadList, setIsLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [user?.id])
+  );
+
+  async function onLoadData() {
+    try {
+      setIsLoadList(true);
+      const response = await apiEventGetAll({
+        category: "contribution",
+        userId: user?.id,
+      });
+      console.log("[DATA] ", JSON.stringify(response.data, null, 2));
+      if (response.success) {
+        setListData(response.data);
+
+        // const responseListParticipants = await apiEventListOfParticipants({
+        //   id: response?.data?.Event?.id,
+        // });
+        // console.log(
+        //   "[LIST PARTICIPANTS]",
+        //   JSON.stringify(responseListParticipants.data, null, 2)
+        // );
+        // if (responseListParticipants.success) {
+        //   setListParticipants(responseListParticipants.data);
+        // }
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadList(false);
+    }
+  }
+
   return (
     <ViewWrapper hideFooter>
-      {Array.from({ length: 10 }).map((_, index) => (
-        <BoxWithHeaderSection key={index} href={`/event/${index}/contribution`}>
-          <StackCustom>
-            <AvatarUsernameAndOtherComponent
-              avatarHref={`/profile/${index}`}
-              rightComponent={
-                <TextCustom truncate>
-                  {new Date().toLocaleDateString()}
-                </TextCustom>
-              }
-            />
+      {isLoadList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Belum ada kontribusi</TextCustom>
+      ) : (
+        listData.map((item: any, index: number) => (
+          <BoxWithHeaderSection
+            key={index}
+            href={`/event/${item?.Event?.id}/contribution`}
+          >
+            <StackCustom>
+              <AvatarUsernameAndOtherComponent
+                avatar={item?.Event?.Author?.Profile?.imageId}
+                avatarHref={`/profile/${item?.Event?.Author?.Profile?.id}`}
+                name={item?.Event?.Author?.username}
+                rightComponent={
+                  <TextCustom truncate>
+                    {dateTimeView({
+                      date: item?.Event?.tanggal,
+                      withoutTime: true,
+                    })}
+                  </TextCustom>
+                }
+              />
 
-            <TextCustom bold align="center" size="xlarge">
-              Judul Event Disini
-            </TextCustom>
+              <TextCustom bold align="center" size="xlarge" truncate={2}>
+                {item?.Event?.title}
+              </TextCustom>
+              <Spacing height={0} />
 
-            <Grid>
-              {Array.from({ length: 4 }).map((_, index2) => (
-                <Grid.Col span={3} key={index2}>
-                  <AvatarCustom size="sm" href={`/profile/${index2}`} />
-                </Grid.Col>
-              ))}
-            </Grid>
-          </StackCustom>
-        </BoxWithHeaderSection>
-      ))}
+              {/* <Grid>
+                {item?.Event?.Event_Peserta?.map(
+                  (item2: any, index2: number) => (
+                    <Grid.Col
+                      style={{ alignItems: "center" }}
+                      span={12 / item?.Event?.Event_Peserta?.length}
+                      key={index2}
+                    >
+                      <AvatarComp
+                        size="base"
+                        href={`/profile/${item2?.User?.Profile?.id}`}
+                        fileId={item2?.User?.Profile?.imageId}
+                      />
+                    </Grid.Col>
+                  )
+                )}
+              </Grid> */}
+            </StackCustom>
+          </BoxWithHeaderSection>
+        ))
+      )}
     </ViewWrapper>
   );
 }

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

@@ -1,12 +1,41 @@
-import { ButtonCustom, Spacing, TextCustom } from "@/components";
+/* eslint-disable react-hooks/exhaustive-deps */
+import { ButtonCustom, LoaderCustom, Spacing, TextCustom } from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { AccentColor, MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
 import Event_BoxPublishSection from "@/screens/Event/BoxPublishSection";
-import { useState } from "react";
+import { apiEventGetAll } from "@/service/api-client/api-event";
+import { dateTimeView } from "@/utils/dateTimeView";
+import _ from "lodash";
+import { useEffect, useState } from "react";
 import { View } from "react-native";
 
 export default function EventHistory() {
   const [activeCategory, setActiveCategory] = useState<string | null>("all");
+  const { user } = useAuth();
+  const [listData, setListData] = useState<any>([]);
+  const [isLoadList, setIsLoadList] = useState(false);
+
+  useEffect(() => {
+    onLoadData({ userId: user?.id });
+  }, [user?.id, activeCategory]);
+
+  async function onLoadData({ userId }: { userId?: string }) {
+    try {
+      setIsLoadList(true);
+      const response = await apiEventGetAll({
+        category: activeCategory === "all" ? "all-history" : "my-history",
+        userId: userId,
+      });
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadList(false);
+    }
+  }
 
   const handlePress = (item: any) => {
     setActiveCategory(item);
@@ -52,17 +81,24 @@ export default function EventHistory() {
 
   return (
     <ViewWrapper headerComponent={headerComponent} hideFooter>
-      {Array.from({ length: 10 }).map((_, index) => (
-        <Event_BoxPublishSection
-          key={index.toString()}
-          id={index.toString()}
-          username={`Riwayat ${activeCategory === "main" ? "Saya" : "Semua"}`}
-          rightComponentAvatar={
-            <TextCustom>{new Date().toLocaleDateString()}</TextCustom>
-          }
-          href={`/event/${index}/history`}
-        />
-      ))}
+      {isLoadList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Belum ada riwayat</TextCustom>
+      ) : (
+        listData.map((item: any, index: number) => (
+          <Event_BoxPublishSection
+            key={index.toString()}
+            data={item}
+            rightComponentAvatar={
+              <TextCustom>
+                {dateTimeView({ date: item?.tanggal, withoutTime: true })}
+              </TextCustom>
+            }
+            href={`/event/${item.id}/history`}
+          />
+        ))
+      )}
     </ViewWrapper>
   );
 }

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

@@ -1,9 +1,36 @@
+import { LoaderCustom, TextCustom } from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import FloatingButton from "@/components/Button/FloatingButton";
 import Event_BoxPublishSection from "@/screens/Event/BoxPublishSection";
-import { router } from "expo-router";
+import { apiEventGetAll } from "@/service/api-client/api-event";
+import { dateTimeView } from "@/utils/dateTimeView";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function EventBeranda() {
+  const [listData, setListData] = useState([]);
+  const [isLoadData, setIsLoadData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setIsLoadData(true);
+      const response = await apiEventGetAll({category: "beranda"});
+      // console.log("Response", JSON.stringify(response.data, null, 2));
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadData(false);
+    }
+  };
+
   return (
     <ViewWrapper
       hideFooter
@@ -11,13 +38,24 @@ export default function EventBeranda() {
         <FloatingButton onPress={() => router.push("/event/create")} />
       }
     >
-      {Array.from({ length: 10 }).map((_, index) => (
-        <Event_BoxPublishSection
-          key={index}
-          id={index.toString()}
-          href={`/event/${index}/publish`}
-        />
-      ))}
+      {isLoadData ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Belum ada event</TextCustom>
+      ) : (
+        listData.map((item: any, index) => (
+          <Event_BoxPublishSection
+            key={index}
+            href={`/event/${item.id}/publish`}
+            data={item}
+            rightComponentAvatar={
+              <TextCustom>
+                {dateTimeView({ date: item?.tanggal, withoutTime: true })}
+              </TextCustom>
+            }
+          />
+        ))
+      )}
     </ViewWrapper>
   );
 }

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]/contribution.tsx

@@ -1,20 +1,43 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   DotButton,
   DrawerCustom,
+  LoaderCustom,
   MenuDrawerDynamicGrid,
-  ViewWrapper,
   Spacing,
+  ViewWrapper,
 } from "@/components";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import Event_BoxDetailPublishSection from "@/screens/Event/BoxDetailPublishSection";
 import { menuDrawerPublishEvent } from "@/screens/Event/menuDrawerPublish";
+import { apiEventGetOne } from "@/service/api-client/api-event";
 import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export default function EventDetailContribution() {
   const { id } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
+  const [data, setData] = useState<any>();
+  const [isLoadData, setIsLoadData] = useState(false);
+
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
+
+  const onLoadData = async () => {
+    try {
+      setIsLoadData(true);
+      const response = await apiEventGetOne({ id: id as string });
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadData(false);
+    }
+  };
 
   const handlePress = (item: IMenuDrawerItem) => {
     console.log("PATH ", item.path);
@@ -32,18 +55,22 @@ export default function EventDetailContribution() {
         }}
       />
       <ViewWrapper>
-        <Event_BoxDetailPublishSection />
+        {isLoadData ? (
+          <LoaderCustom />
+        ) : (
+          <Event_BoxDetailPublishSection data={data} />
+        )}
         <Spacing />
       </ViewWrapper>
       <DrawerCustom
         isVisible={openDrawer}
         closeDrawer={() => setOpenDrawer(false)}
-        height={250}
+        height={"auto"}
       >
         <MenuDrawerDynamicGrid
           data={menuDrawerPublishEvent({ id: id as string })}
           columns={4}
-          onPressItem={handlePress}
+          onPressItem={handlePress as any}
         />
       </DrawerCustom>
     </>

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

@@ -1,106 +1,271 @@
+/* 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 = async () => {
+    if (
+      data?.title === "" ||
+      data?.lokasi === "" ||
+      data?.deskripsi === "" ||
+      data?.eventMaster_TipeAcaraId === ""
+    ) {
+      Toast.show({
+        type: "info",
+        text1: "Info",
+        text2: "Lengkapi semua data",
+      });
+
+      return false;
+    }
+
+    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 false;
+    }
+
+    return true;
+  };
+
+  const handlerSubmit = async () => {
+    const isValid = await validateDate();
+    if (!isValid) return;
+
+    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/[id]/history.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   DotButton,
   DrawerCustom,
@@ -9,12 +10,29 @@ import { IMenuDrawerItem } from "@/components/_Interface/types";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import Event_BoxDetailPublishSection from "@/screens/Event/BoxDetailPublishSection";
 import { menuDrawerPublishEvent } from "@/screens/Event/menuDrawerPublish";
+import { apiEventGetOne } from "@/service/api-client/api-event";
 import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export default function EventDetailHistory() {
   const { id } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiEventGetOne({ id: id as string });
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
 
   const handlePress = (item: IMenuDrawerItem) => {
     console.log("PATH ", item.path);
@@ -32,7 +50,7 @@ export default function EventDetailHistory() {
         }}
       />
       <ViewWrapper>
-        <Event_BoxDetailPublishSection />
+        <Event_BoxDetailPublishSection data={data} />
         <Spacing />
       </ViewWrapper>
       <DrawerCustom
@@ -43,7 +61,7 @@ export default function EventDetailHistory() {
         <MenuDrawerDynamicGrid
           data={menuDrawerPublishEvent({ id: id as string })}
           columns={4}
-          onPressItem={handlePress}
+          onPressItem={handlePress as any}
         />
       </DrawerCustom>
     </>

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

@@ -1,17 +1,102 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   AvatarUsernameAndOtherComponent,
+  BadgeCustom,
   BaseBox,
+  LoaderCustom,
+  TextCustom,
   ViewWrapper,
 } from "@/components";
+import {
+  apiEventGetOne,
+  apiEventListOfParticipants,
+} from "@/service/api-client/api-event";
+import { useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { View } from "react-native";
 
 export default function EventListOfParticipants() {
+  const { id } = useLocalSearchParams();
+  const [startDate, setStartDate] = useState();
+  const [listData, setListData] = useState([]);
+  const [isLoadData, setIsLoadData] = useState(false);
+
+  useEffect(() => {
+    handlerLoadData();
+  }, [id]);
+
+  const handlerLoadData = () => {
+    try {
+      setIsLoadData(true);
+      onLoadData();
+      onLoadList();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadData(false);
+    }
+  };
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiEventGetOne({ id: id as string });
+      if (response.success) {
+        setStartDate(response.data.tanggal);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const onLoadList = async () => {
+    try {
+      const response = await apiEventListOfParticipants({ id: id as string });
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
   return (
     <ViewWrapper>
-      {Array.from({ length: 10 }).map((_, index) => (
-        <BaseBox key={index} paddingBlock={0}>
-          <AvatarUsernameAndOtherComponent avatarHref={`/profile/${index}`} />
-        </BaseBox>
-      ))}
+      {isLoadData ? (
+        <LoaderCustom />
+      ) : listData.length === 0 ? (
+        <TextCustom align="center">Belum ada peserta</TextCustom>
+      ) : (
+        listData.map((item: any, index: number) => (
+          <BaseBox key={index}>
+            <AvatarUsernameAndOtherComponent
+              avatar={item?.User?.Profile?.imageId}
+              name={item?.User?.username}
+              avatarHref={`/profile/${item?.User?.Profile?.id}`}
+              rightComponent={
+                new Date().getTime() > new Date(startDate as any).getTime() ? (
+                  <View
+                    style={{
+                      justifyContent: "flex-end",
+                    }}
+                  >
+                    <BadgeCustom color={item?.isPresent ? "green" : "red"}>
+                      {item?.isPresent ? "Hadir" : "Tidak Hadir"}
+                    </BadgeCustom>
+                  </View>
+                ) : (
+                  <View
+                    style={{
+                      justifyContent: "flex-end",
+                    }}
+                  >
+                    <BadgeCustom color="gray">-</BadgeCustom>
+                  </View>
+                )
+              }
+            />
+          </BaseBox>
+        ))
+      )}
     </ViewWrapper>
   );
 }

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

@@ -1,22 +1,73 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-    ButtonCustom,
-    DotButton,
-    DrawerCustom,
-    MenuDrawerDynamicGrid,
-    Spacing,
-    ViewWrapper
+  AlertDefaultSystem,
+  ButtonCustom,
+  DotButton,
+  DrawerCustom,
+  LoaderCustom,
+  MenuDrawerDynamicGrid,
+  ViewWrapper,
 } from "@/components";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import LeftButtonCustom from "@/components/Button/BackButton";
+import { useAuth } from "@/hooks/use-auth";
 import Event_BoxDetailPublishSection from "@/screens/Event/BoxDetailPublishSection";
 import { menuDrawerPublishEvent } from "@/screens/Event/menuDrawerPublish";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
-import { Alert } from "react-native";
+import {
+  apiEventCheckParticipants,
+  apiEventGetOne,
+  apiEventJoin,
+} from "@/service/api-client/api-event";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function EventDetailPublish() {
   const { id } = useLocalSearchParams();
+  const { user } = useAuth();
   const [openDrawer, setOpenDrawer] = useState(false);
+  const [isLoadingData, setIsLoadingData] = useState(false);
+  const [isLoadingJoin, setIsLoadingJoin] = useState(false);
+
+  const [data, setData] = useState();
+  const [isParticipant, setIsParticipant] = useState<boolean | null>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [])
+  );
+
+  async function onLoadData() {
+    try {
+      setIsLoadingData(true);
+      const response = await apiEventGetOne({ id: id as string });
+      if (response.success) {
+        setData(response.data);
+
+        const responseCheckParticipants = await apiEventCheckParticipants({
+          id: id as string,
+          userId: user?.id as string,
+        });
+
+        if (
+          responseCheckParticipants.success &&
+          responseCheckParticipants.data
+        ) {
+          setIsParticipant(true);
+        }
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadingData(false);
+    }
+  }
 
   const handlePress = (item: IMenuDrawerItem) => {
     console.log("PATH ", item.path);
@@ -24,15 +75,61 @@ export default function EventDetailPublish() {
     setOpenDrawer(false);
   };
 
-  const footerButton = (
-    <ButtonCustom
-      backgroundColor="green"
-      textColor="white"
-      onPress={() => Alert.alert("Anda berhasil join event ini")}
-    >
-      Join
-    </ButtonCustom>
-  );
+  const handlerJoin = async () => {
+    const userId = user?.id;
+    if (!userId) {
+      return Toast.show({
+        type: "error",
+        text2: "Anda belum login",
+      });
+    }
+
+    try {
+      setIsLoadingJoin(true);
+      const response = await apiEventJoin({
+        id: id as string,
+        userId: userId as string,
+      });
+      if (response.success) {
+        router.navigate(
+          `/(application)/(user)/event/${id}/list-of-participants`
+        );
+        Toast.show({
+          type: "success",
+          text1: "Anda berhasil join",
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadingJoin(false);
+    }
+  };
+
+  const footerButton = () => {
+    return (
+      <>
+        <ButtonCustom
+          disabled={isParticipant as any}
+          isLoading={isLoadingJoin}
+          backgroundColor="green"
+          textColor="white"
+          onPress={() =>
+            AlertDefaultSystem({
+              title: "Join event",
+              message: "Anda yakin ingin join sebagai peserta event ?",
+              textLeft: "Tidak",
+              textRight: "Ya",
+              onPressLeft: () => {},
+              onPressRight: () => handlerJoin(),
+            })
+          }
+        >
+          {isParticipant ? "Anda sudah tergabung" : "Join"}
+        </ButtonCustom>
+      </>
+    );
+  };
 
   return (
     <>
@@ -44,19 +141,25 @@ export default function EventDetailPublish() {
         }}
       />
       <ViewWrapper>
-        <Event_BoxDetailPublishSection footerButton={footerButton} />
-        <Spacing />
+        {isLoadingData ? (
+          <LoaderCustom />
+        ) : (
+          <Event_BoxDetailPublishSection
+            data={data}
+            footerButton={footerButton()}
+          />
+        )}
       </ViewWrapper>
 
       <DrawerCustom
         isVisible={openDrawer}
         closeDrawer={() => setOpenDrawer(false)}
-        height={250}
+        height={"auto"}
       >
         <MenuDrawerDynamicGrid
           data={menuDrawerPublishEvent({ id: id as string })}
           columns={4}
-          onPressItem={handlePress}
+          onPressItem={handlePress as any}
         />
       </DrawerCustom>
     </>

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)/job/(tabs)/index.tsx

@@ -1,34 +1,83 @@
 import {
-    AvatarUsernameAndOtherComponent,
-    BoxWithHeaderSection,
-    FloatingButton,
-    SearchInput,
-    Spacing,
-    TextCustom,
-    ViewWrapper
+  AvatarUsernameAndOtherComponent,
+  BoxWithHeaderSection,
+  FloatingButton,
+  LoaderCustom,
+  SearchInput,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
 } from "@/components";
-import { jobDataDummy } from "@/screens/Job/listDataDummy";
-import { router } from "expo-router";
+import { apiJobGetAll } from "@/service/api-client/api-job";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function JobBeranda() {
+  const [listData, setListData] = useState<any[]>([]);
+  const [isLoadData, setIsLoadData] = useState(false);
+  const [search, setSearch] = useState("");
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData(search);
+    }, [search])
+  );
+
+  const onLoadData = async (search: string) => {
+    try {
+      setIsLoadData(true);
+      const response = await apiJobGetAll({ search });
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadData(false);
+    }
+  };
+
+  const handleSearch = (search: string) => {
+    setSearch(search);
+    onLoadData(search);
+  };
+
   return (
     <ViewWrapper
       hideFooter
       floatingButton={
         <FloatingButton onPress={() => router.push("/job/create")} />
       }
-      headerComponent={<SearchInput placeholder="Cari pekerjaan" />}
+      headerComponent={
+        <SearchInput placeholder="Cari pekerjaan" onChangeText={handleSearch} />
+      }
     >
-      {jobDataDummy.map((item, index) => (
-        <BoxWithHeaderSection key={index} onPress={() => router.push(`/job/${item.id}`)}>
-          <AvatarUsernameAndOtherComponent avatarHref={`/profile/${item.id}`} />
-          <Spacing />
-          <TextCustom truncate={2} align="center" bold size="large">
-            {item.posisi}
-          </TextCustom>
-          <Spacing />
-        </BoxWithHeaderSection>
-      ))}
+      {isLoadData ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Belum ada lowongan</TextCustom>
+      ) : (
+        listData.map((item, index) => (
+          <BoxWithHeaderSection
+            key={index}
+            onPress={() => router.push(`/job/${item.id}`)}
+          >
+            <StackCustom>
+              <AvatarUsernameAndOtherComponent
+                avatar={item?.Author?.Profile?.imageId}
+                avatarHref={`/profile/${item?.Author?.Profile?.id}`}
+                name={item?.Author?.username}
+              />
+
+              <TextCustom truncate={2} align="center" bold size="large">
+                {item?.title || "-"}
+              </TextCustom>
+            </StackCustom>
+            <Spacing />
+          </BoxWithHeaderSection>
+        ))
+      )}
+      <Spacing />
     </ViewWrapper>
   );
 }

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

@@ -1,17 +1,46 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-    BaseBox,
-    ScrollableCustom,
-    TextCustom,
-    ViewWrapper,
+  BaseBox,
+  LoaderCustom,
+  ScrollableCustom,
+  TextCustom,
+  ViewWrapper,
 } from "@/components";
+import { useAuth } from "@/hooks/use-auth";
 import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
-import { jobDataDummy } from "@/screens/Job/listDataDummy";
-import { useState } from "react";
+import { apiJobGetByStatus } from "@/service/api-client/api-job";
+import { useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function JobStatus() {
+  const { user } = useAuth();
   const [activeCategory, setActiveCategory] = useState<string | null>(
     "publish"
   );
+  const [listData, setListData] = useState<any[]>([]);
+  const [isLoadList, setIsLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [user?.id, activeCategory])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setIsLoadList(true);
+      const response = await apiJobGetByStatus({
+        authorId: user?.id as string,
+        status: activeCategory as string,
+      });
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadList(false);
+    }
+  };
 
   const handlePress = (item: any) => {
     setActiveCategory(item.value);
@@ -32,19 +61,24 @@ export default function JobStatus() {
 
   return (
     <ViewWrapper headerComponent={scrollComponent} hideFooter>
-      {jobDataDummy.map((e, i) => (
-        <BaseBox
-          key={i}
-          paddingTop={20}
-          paddingBottom={20}
-          href={`/job/${e.id}/${activeCategory}/detail`}
-          // onPress={() => console.log("pressed")}
-        >
-          <TextCustom align="center" bold truncate size="large">
-            {e.posisi} {activeCategory?.toUpperCase()}
-          </TextCustom>
-        </BaseBox>
-      ))}
+      {isLoadList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Tidak ada data {activeCategory}</TextCustom>
+      ) : (
+        listData.map((e, i) => (
+          <BaseBox
+            key={i}
+            paddingTop={20}
+            paddingBottom={20}
+            href={`/job/${e?.id}/${activeCategory}/detail`}
+          >
+            <TextCustom align="center" bold truncate size="large">
+              {e?.title}
+            </TextCustom>
+          </BaseBox>
+        ))
+      )}
     </ViewWrapper>
   );
 }

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

@@ -1,23 +1,51 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BackButton,
   DotButton,
   DrawerCustom,
+  LoaderCustom,
   MenuDrawerDynamicGrid,
   Spacing,
+  StackCustom,
   ViewWrapper,
 } from "@/components";
 import { IconEdit } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import Job_BoxDetailSection from "@/screens/Job/BoxDetailSection";
 import Job_ButtonStatusSection from "@/screens/Job/ButtonStatusSection";
-import { jobDataDummy } from "@/screens/Job/listDataDummy";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { apiJobGetOne } from "@/service/api-client/api-job";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function JobDetailStatus() {
   const { id, status } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
-  const jobDetail = jobDataDummy.find((e) => e.id === Number(id));
+  const [data, setData] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadData, setIsLoadData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setIsLoadData(true);
+      const response = await apiJobGetOne({ id: id as string });
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadData(false);
+    }
+  };
 
   const handlePress = (item: IMenuDrawerItem) => {
     console.log("PATH >> ", item.path);
@@ -38,9 +66,22 @@ export default function JobDetailStatus() {
         }}
       />
       <ViewWrapper>
-        <Job_BoxDetailSection data={jobDetail} />
-        <Job_ButtonStatusSection status={status as string} />
-        <Spacing />
+        {isLoadData ? (
+          <LoaderCustom />
+        ) : (
+          <>
+            <StackCustom>
+              <Job_BoxDetailSection data={data} />
+              <Job_ButtonStatusSection
+                id={id as string}
+                status={status as string}
+                isLoading={isLoading}
+                onSetLoading={setIsLoading}
+              />
+            </StackCustom>
+            <Spacing />
+          </>
+        )}
       </ViewWrapper>
 
       <DrawerCustom

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

@@ -1,21 +1,132 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
+  BaseBox,
   ButtonCenteredOnly,
   ButtonCustom,
+  DummyLandscapeImage,
   InformationBox,
   LandscapeFrameUploaded,
+  LoaderCustom,
   Spacing,
   StackCustom,
   TextAreaCustom,
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
-import { router } from "expo-router";
+import DIRECTORY_ID from "@/constants/directory-id";
+import { apiJobGetOne, apiJobUpdateData } from "@/service/api-client/api-job";
+import {
+  deleteImageService,
+  uploadImageService,
+} from "@/service/upload-service";
+import pickImage from "@/utils/pickImage";
+import { router, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function JobEdit() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any>({
+    title: "",
+    content: "",
+    deskripsi: "",
+  });
+  const [isLoadData, setIsLoadData] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [imageUri, setImageUri] = useState<string | null>(null);
+
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
+
+  const onLoadData = async () => {
+    try {
+      setIsLoadData(true);
+      const response = await apiJobGetOne({ id: id as string });
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadData(false);
+    }
+  };
+
+  const handlerOnUpdate = async () => {
+    if (!data.title || !data.content || !data.deskripsi) {
+      Toast.show({
+        type: "info",
+        text1: "Info",
+        text2: "Harap isi semua data",
+      });
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      let newImageId = "";
+
+      if (imageUri) {
+        const responseUploadImage = await uploadImageService({
+          imageUri: imageUri,
+          dirId: DIRECTORY_ID.job_image,
+        });
+
+        if (responseUploadImage.success) {
+          newImageId = responseUploadImage.data.id;
+        }
+      }
+
+      if (data?.imageId) {
+        const responseDeleteImage = await deleteImageService({
+          id: data.imageId,
+        });
+
+        if (!responseDeleteImage.success) {
+          console.log("[ERROR DELETE IMAGE]", responseDeleteImage.message);
+        }
+      }
+
+      const newData = {
+        title: data.title,
+        content: data.content,
+        deskripsi: data.deskripsi,
+        imageId: newImageId,
+      };
+
+      const response = await apiJobUpdateData({
+        id: id as string,
+        data: newData,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: response.message,
+        });
+        router.back();
+      } else {
+        Toast.show({
+          type: "info",
+          text1: "Info",
+          text2: response.message,
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const buttonSubmit = () => {
     return (
       <>
-        <ButtonCustom onPress={() => router.back()}>Update</ButtonCustom>
+        <ButtonCustom isLoading={isLoading} onPress={() => handlerOnUpdate()}>
+          Update
+        </ButtonCustom>
         <Spacing />
       </>
     );
@@ -23,45 +134,64 @@ export default function JobEdit() {
 
   return (
     <ViewWrapper>
-      <StackCustom gap={"xs"}>
-        <InformationBox text="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja." />
+      {isLoadData ? (
+        <LoaderCustom />
+      ) : (
+        <StackCustom gap={"xs"}>
+          <InformationBox text="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja." />
 
-        <LandscapeFrameUploaded />
-        <ButtonCenteredOnly
-          onPress={() => {
-            router.push("/(application)/(image)/take-picture/123");
-          }}
-          icon="upload"
-        >
-          Upload
-        </ButtonCenteredOnly>
+          {imageUri ? (
+            <LandscapeFrameUploaded image={imageUri as any} />
+          ) : (
+            <BaseBox>
+              <DummyLandscapeImage imageId={data?.imageId} />
+            </BaseBox>
+          )}
 
-        <Spacing />
+          <ButtonCenteredOnly
+            onPress={() => {
+              pickImage({
+                setImageUri,
+              });
+            }}
+            icon="upload"
+          >
+            Upload
+          </ButtonCenteredOnly>
 
-        <TextInputCustom
-          label="Judul Lowongan"
-          placeholder="Masukan Judul Lowongan Kerja"
-          required
-        />
+          <Spacing />
 
-        <TextAreaCustom
-          label="Syarat & Kualifikasi"
-          placeholder="Masukan Syarat & Kualifikasi Lowongan Kerja"
-          required
-          showCount
-          maxLength={1000}
-        />
+          <TextInputCustom
+            label="Judul Lowongan"
+            placeholder="Masukan Judul Lowongan Kerja"
+            required
+            value={data.title}
+            onChangeText={(value) => setData({ ...data, title: value })}
+          />
 
-        <TextAreaCustom
-          label="Deskripsi Lowongan"
-          placeholder="Masukan Deskripsi Lowongan Kerja"
-          required
-          showCount
-          maxLength={1000}
-        />
+          <TextAreaCustom
+            label="Syarat & Kualifikasi"
+            placeholder="Masukan Syarat & Kualifikasi Lowongan Kerja"
+            required
+            showCount
+            maxLength={1000}
+            value={data.content}
+            onChangeText={(value) => setData({ ...data, content: value })}
+          />
 
-        {buttonSubmit()}
-      </StackCustom>
+          <TextAreaCustom
+            label="Deskripsi Lowongan"
+            placeholder="Masukan Deskripsi Lowongan Kerja"
+            required
+            showCount
+            maxLength={1000}
+            value={data.deskripsi}
+            onChangeText={(value) => setData({ ...data, deskripsi: value })}
+          />
+
+          {buttonSubmit()}
+        </StackCustom>
+      )}
     </ViewWrapper>
   );
 }

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

@@ -1,25 +1,41 @@
-import {
-  ButtonCustom,
-  Spacing,
-  ViewWrapper
-} from "@/components";
+/* eslint-disable react-hooks/exhaustive-deps */
+import { ButtonCustom, LoaderCustom, Spacing, ViewWrapper } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import Job_BoxDetailSection from "@/screens/Job/BoxDetailSection";
-import { jobDataDummy } from "@/screens/Job/listDataDummy";
+import { apiJobGetOne } from "@/service/api-client/api-job";
 import { Ionicons } from "@expo/vector-icons";
 import * as Clipboard from "expo-clipboard";
 import { useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
 import { Alert, Linking } from "react-native";
 
 export default function JobDetail() {
   const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState(false);
 
-  const jobDetail = jobDataDummy.find((e) => e.id === Number(id));
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
 
-  const OpenLinkButton = () => {
-    const jobUrl =
-      "https://stg-hipmi.wibudev.com/job-vacancy/cm6ijt9w8005zucv4twsct657";
+  const onLoadData = async () => {
+    try {
+      setIsLoading(true);
+      const response = await apiJobGetOne({ id: id as string });
+
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const linkUrl = `http://192.168.1.83:3000/job-vacancy/`;
+
+  const OpenLinkButton = ({ id }: { id: string }) => {
+    const jobUrl = `${linkUrl}${id}`;
 
     const openInBrowser = async () => {
       const supported = await Linking.canOpenURL(jobUrl);
@@ -44,9 +60,8 @@ export default function JobDetail() {
     );
   };
 
-  const CopyLinkButton = () => {
-    const jobUrl =
-      "https://stg-hipmi.wibudev.com/job-vacancy/cm6ijt9w8005zucv4twsct657";
+  const CopyLinkButton = ({ id }: { id: string }) => {
+    const jobUrl = `${linkUrl}${id}`;
 
     const copyToClipboard = async () => {
       await Clipboard.setStringAsync(jobUrl);
@@ -70,10 +85,16 @@ export default function JobDetail() {
 
   return (
     <ViewWrapper>
-      <Job_BoxDetailSection data={jobDetail}/>
-      <OpenLinkButton />
-      <Spacing />
-      <CopyLinkButton />
+      {isLoading ? (
+        <LoaderCustom />
+      ) : (
+        <>
+          <Job_BoxDetailSection data={data} />
+          <OpenLinkButton id={id as string} />
+          <Spacing />
+          <CopyLinkButton id={id as string} />
+        </>
+      )}
     </ViewWrapper>
   );
 }

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

@@ -7,19 +7,99 @@ import {
   StackCustom,
   TextAreaCustom,
   TextInputCustom,
-  ViewWrapper,
+  ViewWrapper
 } from "@/components";
+import DIRECTORY_ID from "@/constants/directory-id";
+import { useAuth } from "@/hooks/use-auth";
+import { apiJobCreate } from "@/service/api-client/api-job";
+import { uploadImageService } from "@/service/upload-service";
+import pickImage from "@/utils/pickImage";
 import { router } from "expo-router";
+import { useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function JobCreate() {
+  const nextUrl = "/(application)/(user)/job/(tabs)/status";
+  const { user } = useAuth();
+  const [isLoading, setIsLoading] = useState(false);
+  const [image, setImage] = useState<string | null>(null);
+  const [data, setData] = useState({
+    title: "",
+    content: "",
+    deskripsi: "",
+    authorId: "",
+  });
+
+  const handlerOnSubmit = async () => {
+    let imageId = "";
+    const newData = {
+      title: data.title,
+      content: data.content,
+      deskripsi: data.deskripsi,
+      authorId: user?.id,
+      imageId: "",
+    };
+
+    if (!data.title || !data.content || !data.deskripsi || !user?.id) {
+      Toast.show({
+        type: "info",
+        text1: "Info",
+        text2: "Harap isi semua data",
+      });
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+
+      if (image === null || !image) {
+        const response = await apiJobCreate(newData);
+        if (response.success) {
+          Toast.show({
+            type: "success",
+            text1: "Berhasil",
+            text2: "Lowongan berhasil dibuat",
+          });
+          router.replace(nextUrl);
+        }
+
+        return;
+      }
+
+      const responseUploadImage = await uploadImageService({
+        imageUri: image,
+        dirId: DIRECTORY_ID.job_image,
+      });
+
+      if (responseUploadImage.success) {
+        imageId = responseUploadImage.data.id;
+      }
+
+      const fixData = {
+        ...newData,
+        imageId: imageId,
+      };
+
+      const response = await apiJobCreate(fixData);
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Berhasil",
+          text2: "Lowongan berhasil dibuat",
+        });
+        router.replace(nextUrl);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const buttonSubmit = () => {
     return (
       <>
-        <ButtonCustom
-          onPress={() =>
-            router.replace("/(application)/(user)/job/(tabs)/status")
-          }
-        >
+        <ButtonCustom isLoading={isLoading} onPress={() => handlerOnSubmit()}>
           Simpan
         </ButtonCustom>
         <Spacing />
@@ -32,10 +112,19 @@ export default function JobCreate() {
       <StackCustom gap={"xs"}>
         <InformationBox text="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja." />
 
-        <LandscapeFrameUploaded />
+        {/* <BaseBox>
+          <Image
+            source={image ? { uri: image } : DUMMY_IMAGE.dummy_image}
+            style={{ width: "100%", height: 200 }}
+          />
+        </BaseBox> */}
+        <LandscapeFrameUploaded image={image as string} />
         <ButtonCenteredOnly
           onPress={() => {
-            router.push("/(application)/(image)/take-picture/123");
+            // router.push("/(application)/(image)/take-picture/123");
+            pickImage({
+              setImageUri: setImage,
+            });
           }}
           icon="upload"
         >
@@ -48,6 +137,8 @@ export default function JobCreate() {
           label="Judul Lowongan"
           placeholder="Masukan Judul Lowongan Kerja"
           required
+          value={data.title}
+          onChangeText={(value) => setData({ ...data, title: value })}
         />
 
         <TextAreaCustom
@@ -56,6 +147,8 @@ export default function JobCreate() {
           required
           showCount
           maxLength={1000}
+          value={data.content}
+          onChangeText={(value) => setData({ ...data, content: value })}
         />
 
         <TextAreaCustom
@@ -64,6 +157,8 @@ export default function JobCreate() {
           required
           showCount
           maxLength={1000}
+          value={data.deskripsi}
+          onChangeText={(value) => setData({ ...data, deskripsi: value })}
         />
 
         {buttonSubmit()}

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,59 +36,130 @@ 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 (
     <>
+      <Stack.Screen
+        options={{
+          title: `Profile`,
+          headerLeft: () => <LeftButtonCustom />,
+          headerRight: () => (
+            <ButtonnDot
+              id={id as string}
+              openDrawer={openDrawer}
+              isUserCheck={isUserCheck()}
+              logout={logout}
+            />
+          ),
+          headerStyle: GStyles.headerStyle,
+          headerTitleStyle: GStyles.headerTitleStyle,
+        }}
+      />
+      {/* Main View */}
       <ViewWrapper>
-        {/* Header */}
-        <Stack.Screen
-          options={{
-            title: "Profile",
-            headerLeft: () => <LeftButtonCustom />,
-            headerRight: () => (
-              <TouchableOpacity onPress={openDrawer}>
-                <Ionicons
-                  name="ellipsis-vertical"
-                  size={20}
-                  color={MainColor.yellow}
-                />
-              </TouchableOpacity>
-            ),
-            headerStyle: GStyles.headerStyle,
-            headerTitleStyle: GStyles.headerTitleStyle,
-          }}
-        />
-        <ProfileSection />
+        {!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}
-      />
     </>
   );
 }
+
+const ButtonnDot = ({
+  id,
+  openDrawer,
+  isUserCheck,
+  logout,
+}: {
+  id: string;
+  openDrawer: () => void;
+  isUserCheck: boolean;
+  logout: () => Promise<void>;
+}) => {
+  const isId = id === undefined || id === null;
+
+  console.log("ID CHECK", id);
+
+  if (isId) {
+    console.log("ID UNDEFINED", id);
+    return (
+      <>
+        <TouchableOpacity onPress={logout}>
+          <Ionicons name="log-out" size={20} color={MainColor.red} />
+        </TouchableOpacity>
+      </>
+    );
+  }
+
+  return (
+    <>
+      {isUserCheck && (
+        <TouchableOpacity onPress={openDrawer}>
+          <Ionicons
+            name="ellipsis-vertical"
+            size={20}
+            color={MainColor.yellow}
+          />
+        </TouchableOpacity>
+      )}
+    </>
+  );
+};

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,7 +1,8 @@
 import {
-  AvatarCustom,
+  AvatarComp,
   ClickableCustom,
   Grid,
+  LoaderCustom,
   Spacing,
   StackCustom,
   TextCustom,
@@ -10,39 +11,46 @@ 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>("");
+  const [isLoadList, setIsLoadList] = useState(false);
 
-    // 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 {
+      setIsLoadList(true);
+      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);
+    } finally {
+      setIsLoadList(false);
     }
+  };
 
-    // 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 +65,48 @@ 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",
+          {isLoadList ? (
+            <LoaderCustom />
+          ) : !_.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
@@ -74,32 +82,32 @@ export default function AdminLayout() {
         <Stack.Screen name="collaboration/publish" />
         <Stack.Screen name="collaboration/group" />
         <Stack.Screen name="collaboration/reject" />
-        <Stack.Screen name="collaboration/[id]/[status]"/>
-        <Stack.Screen name="collaboration/[id]/group"/>
+        <Stack.Screen name="collaboration/[id]/[status]" />
+        <Stack.Screen name="collaboration/[id]/group" />
         {/* ================== Collaboration End ================== */}
 
         {/* ================== Forum Start ================== */}
         <Stack.Screen name="forum/index" />
         <Stack.Screen name="forum/[id]/index" />
-        <Stack.Screen name="forum/report-comment"/>
-        <Stack.Screen name="forum/report-posting"/>
+        <Stack.Screen name="forum/report-comment" />
+        <Stack.Screen name="forum/report-posting" />
         <Stack.Screen name="forum/[id]/list-report-posting" />
-        <Stack.Screen name="forum/[id]/list-report-comment"/>
+        <Stack.Screen name="forum/[id]/list-report-comment" />
         {/* ================== Forum End ================== */}
 
         {/* ================== Voting Start ================== */}
         <Stack.Screen name="voting/index" />
         <Stack.Screen name="voting/[status]/status" />
         <Stack.Screen name="voting/[id]/[status]/index" />
-        <Stack.Screen name="voting/[id]/reject-input"/>
+        <Stack.Screen name="voting/[id]/reject-input" />
         {/* ================== Voting End ================== */}
 
         {/* ================== Event Start ================== */}
         <Stack.Screen name="event/index" />
         <Stack.Screen name="event/[status]/status" />
-        <Stack.Screen name="event/type-of-event"/>
-        <Stack.Screen name="event/type-create"/>
-        <Stack.Screen name="event/type-update"/>
+        <Stack.Screen name="event/type-of-event" />
+        <Stack.Screen name="event/type-create" />
+        <Stack.Screen name="event/type-update" />
         {/* <Stack.Screen name="event/[id]/[status]/index" />
         <Stack.Screen name="event/[id]/reject-input"/> */}
         {/* ================== Event End ================== */}
@@ -213,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") {
@@ -223,7 +231,7 @@ export default function AdminLayout() {
                   textLeft: "Batal",
                   textRight: "Keluar",
                   onPressRight: () => {
-                    router.replace("/");
+                    logout();
                   },
                 });
               }

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

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

app/(application)/coba/index.tsx

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

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

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

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

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

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

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

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

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

app/_layout.tsx

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