Component

Fix: fix nama upload dan delete file service

Invesment:
Fix:
- Edit data dan edit prospektus
- View file dengan metode react-native-webview

### 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,74 @@
+// 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',
+    // softwareKeyboardLayoutMode: 'resize', // option: untuk mengatur keyboard pada room chst collaboration
+  },
+
+  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,
+    BASE_URL: process.env.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)/(file)/[id].tsx

@@ -1,9 +1,13 @@
-import { BackButton, ViewWrapper } from "@/components";
-import { MainColor } from "@/constants/color-palet";
-import { FontAwesome } from "@expo/vector-icons";
-import { Stack } from "expo-router";
+import { BackButton } from "@/components";
+import PdfViewer from "@/components/_ShareComponent/PdfViewer";
+import API_STRORAGE from "@/constants/base-url-api-strorage";
+import { Stack, useLocalSearchParams } from "expo-router";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 export default function FileScreen() {
+  const { id } = useLocalSearchParams();
+  const url = API_STRORAGE.GET({ fileId: id as string });
+  
   return (
     <>
       <Stack.Screen
@@ -12,14 +16,9 @@ export default function FileScreen() {
           headerLeft: () => <BackButton />,
         }}
       />
-      <ViewWrapper>
-        <FontAwesome
-          name="file-pdf-o"
-          size={300}
-          style={{ alignSelf: "center" }}
-          color={MainColor.white}
-        />
-      </ViewWrapper>
+      <SafeAreaView style={{ flex: 1 }} edges={["bottom"]}>
+        <PdfViewer uri={url} />
+      </SafeAreaView>
     </>
   );
 }

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,
           }}
         />
 
@@ -132,14 +118,13 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
-        <Stack.Screen
+        {/* <Stack.Screen
           name="collaboration/[id]/detail-participant"
           options={{
             title: "Partisipasi Proyek",
             headerLeft: () => <BackButton />,
           }}
-        />
-
+        /> */}
         <Stack.Screen
           name="collaboration/[id]/edit"
           options={{
@@ -147,6 +132,20 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
+        <Stack.Screen
+          name="collaboration/[id]/create-pacticipants"
+          options={{
+            title: "Ajukan Partisipasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="collaboration/[id]/select-of-participants"
+          options={{
+            title: "Pilih Partisipan",
+            headerLeft: () => <BackButton />,
+          }}
+        />
 
         {/* ========== End Collaboration Section ========= */}
 
@@ -523,6 +522,13 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
+        <Stack.Screen
+          name="job/[id]/archive"
+          options={{
+            title: "Arsip Job",
+            headerLeft: () => <BackButton />,
+          }}
+        />
 
         {/* ========== End Job Section ========= */}
 

app/(application)/(user)/collaboration/(tabs)/group.tsx

@@ -1,38 +1,96 @@
-import { BaseBox, Grid, TextCustom } from "@/components";
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BaseBox,
+  Grid,
+  LoaderCustom,
+  StackCustom,
+  TextCustom,
+} from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
+import { apiCollaborationGetAll } from "@/service/api-client/api-collaboration";
 import { Feather } from "@expo/vector-icons";
+import { useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useState, useCallback } from "react";
 
 export default function CollaborationGroup() {
-  
+  const { user } = useAuth();
+  const [listData, setListData] = useState<any[]>();
+  const [loadingGetData, setLoadingGetData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [user?.id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadingGetData(true);
+      const response = await apiCollaborationGetAll({
+        category: "group",
+        authorId: user?.id,
+      });
+      
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetData(false);
+    }
+  };
 
   return (
     <ViewWrapper hideFooter>
-      {Array.from({ length: 10 }).map((_, index) => (
-        <BaseBox
-          key={index}
-          paddingBlock={5}
-          href={`/collaboration/${index}/${generateProjectName()}/room-chat`}
-        >
-          <Grid>
-            <Grid.Col span={10}>
-              <TextCustom bold>{generateProjectName()}</TextCustom>
-              <TextCustom size="small">2 Anggota</TextCustom>
-            </Grid.Col>
-            <Grid.Col
-              span={2}
-              style={{ alignItems: "flex-end", justifyContent: "center" }}
+      {loadingGetData ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Tidak ada data</TextCustom>
+      ) : (
+        <StackCustom>
+          {listData?.map((item: any, index: any) => (
+            <BaseBox
+              key={index}
+              paddingBlock={5}
+              href={`/collaboration/${item?.ProjectCollaboration_RoomChat?.id}/${item?.ProjectCollaboration_RoomChat?.name}/room-chat`}
             >
-              <Feather name="chevron-right" size={20} color={MainColor.white} />
-            </Grid.Col>
-          </Grid>
-        </BaseBox>
-      ))}
+              <Grid>
+                <Grid.Col span={10}>
+                  <TextCustom bold>
+                    {item?.ProjectCollaboration_RoomChat?.name}
+                  </TextCustom>
+                  <TextCustom size="small">
+                    {
+                      item?.ProjectCollaboration_RoomChat
+                        ?.ProjectCollaboration_AnggotaRoomChat?.length
+                    }{" "}
+                    Anggota
+                  </TextCustom>
+                </Grid.Col>
+                <Grid.Col
+                  span={2}
+                  style={{ alignItems: "flex-end", justifyContent: "center" }}
+                >
+                  <Feather
+                    name="chevron-right"
+                    size={20}
+                    color={MainColor.white}
+                  />
+                </Grid.Col>
+              </Grid>
+            </BaseBox>
+          ))}
+        </StackCustom>
+      )}
     </ViewWrapper>
   );
 }
 
-
 function generateProjectName() {
   const adjectives = [
     "Blue",
@@ -65,4 +123,4 @@ function generateProjectName() {
   const randomNoun = nouns[Math.floor(Math.random() * nouns.length)];
 
   return randomAdjective + randomNoun;
-}
+}

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

@@ -1,8 +1,40 @@
-import { FloatingButton, ViewWrapper } from "@/components";
+import {
+  FloatingButton,
+  LoaderCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
 import Collaboration_BoxPublishSection from "@/screens/Collaboration/BoxPublishSection";
-import { router } from "expo-router";
+import { apiCollaborationGetAll } from "@/service/api-client/api-collaboration";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function CollaborationBeranda() {
+  const [listData, setListData] = useState<any[]>();
+  const [loadingGetData, setLoadingGetData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadingGetData(true);
+      const response = await apiCollaborationGetAll({
+        category: "beranda",
+      });
+
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetData(false);
+    }
+  };
+  
   return (
     <>
       <ViewWrapper
@@ -15,13 +47,19 @@ export default function CollaborationBeranda() {
           />
         }
       >
-        {Array.from({ length: 10 }).map((_, index) => (
-          <Collaboration_BoxPublishSection
-            key={index}
-            id={index.toString()}
-            href={`/collaboration/${index}`}
-          />
-        ))}
+        {loadingGetData ? (
+          <LoaderCustom />
+        ) : _.isEmpty(listData) ? (
+          <TextCustom align="center">Tidak ada data</TextCustom>
+        ) : (
+          listData?.map((item: any, index: number) => (
+            <Collaboration_BoxPublishSection
+              key={index}
+              href={`/collaboration/${item.id}`}
+              data={item}
+            />
+          ))
+        )}
       </ViewWrapper>
     </>
   );

app/(application)/(user)/collaboration/(tabs)/participant.tsx

@@ -1,15 +1,46 @@
-import { ButtonCustom, Spacing } 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 Collaboration_BoxPublishSection from "@/screens/Collaboration/BoxPublishSection";
-import { useState } from "react";
+import { apiCollaborationGetAll } from "@/service/api-client/api-collaboration";
+import { useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 import { View } from "react-native";
 
 export default function CollaborationParticipans() {
-  const [activeCategory, setActiveCategory] = useState<string | null>(
-    "participant"
+  const [activeCategory, setActiveCategory] = useState<
+    "participant" | "my-project"
+  >("participant");
+  const { user } = useAuth();
+  const [listData, setListData] = useState<any[]>();
+  const [loadingGetData, setLoadingGetData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [activeCategory])
   );
 
+  const onLoadData = async () => {
+    try {
+      setLoadingGetData(true);
+      const response = await apiCollaborationGetAll({
+        category:
+          activeCategory === "participant" ? "participant" : "my-project",
+        authorId: user?.id,
+      });
+
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetData(false);
+    }
+  };
+
   const handlePress = (item: any) => {
     setActiveCategory(item);
     // tambahkan logika lain seperti filter dsb.
@@ -41,13 +72,13 @@ export default function CollaborationParticipans() {
       <Spacing width={"2%"} />
       <ButtonCustom
         backgroundColor={
-          activeCategory === "main" ? MainColor.yellow : AccentColor.blue
+          activeCategory === "my-project" ? MainColor.yellow : AccentColor.blue
         }
         textColor={
-          activeCategory === "main" ? MainColor.black : MainColor.white
+          activeCategory === "my-project" ? MainColor.black : MainColor.white
         }
         style={{ width: "49%" }}
-        onPress={() => handlePress("main")}
+        onPress={() => handlePress("my-project")}
       >
         Proyek Saya
       </ButtonCustom>
@@ -56,22 +87,27 @@ export default function CollaborationParticipans() {
 
   return (
     <ViewWrapper hideFooter headerComponent={headerComponent}>
-      {Array.from({ length: 10 }).map((_, index) => (
-        <Collaboration_BoxPublishSection
-          key={index.toString()}
-          id={index.toString()}
-          username={` ${
-            activeCategory === "participant"
-              ? "Partisipasi Proyek"
-              : "Proyek Saya"
-          }`}
-          href={
-            activeCategory === "participant"
-              ? `/collaboration/${index}/detail-participant`
-              : `/collaboration/${index}/detail-project-main`
-          }
-        />
-      ))}
+      {loadingGetData ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Tidak ada data</TextCustom>
+      ) : activeCategory === "participant" ? (
+        listData?.map((item: any, index: number) => (
+          <Collaboration_BoxPublishSection
+            key={index.toString()}
+            data={item?.ProjectCollaboration}
+            href={`/collaboration/${item?.ProjectCollaboration?.id}/detail-participant`}
+          />
+        ))
+      ) : (
+        listData?.map((item: any, index: number) => (
+          <Collaboration_BoxPublishSection
+            key={index.toString()}
+            data={item}
+            href={`/collaboration/${item?.id}/detail-project-main`}
+          />
+        ))
+      )}
     </ViewWrapper>
   );
 }

app/(application)/(user)/collaboration/[id]/[detail]/info.tsx

@@ -1,17 +1,41 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import {
   AvatarUsernameAndOtherComponent,
   BackButton,
+  BaseBox,
   BoxWithHeaderSection,
   Grid,
   StackCustom,
   TextCustom,
   ViewWrapper,
 } from "@/components";
-import { Stack, useLocalSearchParams } from "expo-router";
+import { apiCollaborationGroup } from "@/service/api-client/api-collaboration";
+import { Stack, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useState, useCallback } from "react";
 
 export default function CollaborationRoomInfo() {
   const { id, detail } = useLocalSearchParams();
+  const [data, setData] = useState<any>();
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiCollaborationGroup({ id: id as string });
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
   return (
     <>
       <Stack.Screen
@@ -24,7 +48,7 @@ export default function CollaborationRoomInfo() {
       <ViewWrapper>
         <BoxWithHeaderSection>
           <StackCustom>
-            {listData.map((item, index) => (
+            {listData({ data }).map((item, index) => (
               <Grid key={index}>
                 <Grid.Col span={4}>
                   <TextCustom bold>{item.title}</TextCustom>
@@ -37,37 +61,42 @@ export default function CollaborationRoomInfo() {
           </StackCustom>
         </BoxWithHeaderSection>
 
-        <BoxWithHeaderSection>
-          {Array.from({ length: 10 }).map((_, index) => (
-            <AvatarUsernameAndOtherComponent key={index} avatarHref={`/profile/${index}`} />
-          ))}
-        </BoxWithHeaderSection>
+        <BaseBox>
+          <StackCustom gap={10}>
+            {data?.ProjectCollaboration_AnggotaRoomChat?.map(
+              (item: any, index: number) => (
+                <AvatarUsernameAndOtherComponent
+                  key={index}
+                  avatarHref={`/profile/${item?.User?.Profile?.id}`}
+                  name={item?.User?.username}
+                  avatar={item?.User?.Profile?.imageId}
+                />
+              )
+            )}
+          </StackCustom>
+        </BaseBox>
       </ViewWrapper>
     </>
   );
 }
 
-const listData = [
+const listData = ({ data }: { data: any }) => [
   {
     title: "Judul Proyek",
-    value: "Judul Proyek",
+    value: data?.ProjectCollaboration?.title || "-",
   },
   {
     title: "Industri",
-    value: "Pilihan Industri",
-  },
-  {
-    title: "Deskripsi",
-    value: "Deskripsi Proyek",
+    value:
+      data?.ProjectCollaboration?.ProjectCollaborationMaster_Industri?.name ||
+      "-",
   },
   {
     title: "Tujuan Proyek",
-    value:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    value: data?.ProjectCollaboration?.purpose || "-",
   },
   {
     title: "Keuntungan Proyek",
-    value:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    value: data?.ProjectCollaboration?.benefit || "-",
   },
 ];

app/(application)/(user)/collaboration/[id]/[detail]/room-chat.tsx

@@ -1,68 +1,13 @@
-import {
-  BackButton,
-  BoxButtonOnFooter,
-  Grid,
-  TextCustom,
-  TextInputCustom,
-  ViewWrapper,
-} from "@/components";
-import { AccentColor, MainColor } from "@/constants/color-palet";
+import { BackButton } from "@/components";
+import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import ChatScreen from "@/screens/Collaboration/GroupChatSection";
 import { Feather } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
-import { StyleSheet, TouchableOpacity, View } from "react-native";
 
 export default function CollaborationRoomChat() {
   const { id, detail } = useLocalSearchParams();
 
-  const inputChat = () => {
-    return (
-      <>
-        <BoxButtonOnFooter>
-          {/* <View style={{flexDirection: 'row', alignItems: 'center'}}>
-            <TextInputCustom placeholder="Ketik pesan..." />
-            <TouchableOpacity
-              activeOpacity={0.5}
-              onPress={() => console.log("Send")}
-              style={{
-                backgroundColor: AccentColor.blue,
-                padding: 10,
-                borderRadius: 50,
-              }}
-            >
-              <Feather name="send" size={30} color={MainColor.white} />
-            </TouchableOpacity>
-          </View> */}
-          <Grid>
-            <Grid.Col span={9}>
-              <TextInputCustom placeholder="Ketik pesan..." />
-            </Grid.Col>
-            <Grid.Col span={1}>
-              <View />
-            </Grid.Col>
-            <Grid.Col span={2} style={{ alignItems: "center" }}>
-              <TouchableOpacity
-                activeOpacity={0.5}
-                onPress={() => console.log("Send")}
-                style={{
-                  backgroundColor: AccentColor.blue,
-                  padding: 10,
-                  borderRadius: 50,
-                }}
-              >
-                <Feather
-                  name="send"
-                  size={30}
-                  color={MainColor.white}
-                />
-              </TouchableOpacity>
-            </Grid.Col>
-          </Grid>
-        </BoxButtonOnFooter>
-      </>
-    );
-  };
-
   return (
     <>
       <Stack.Screen
@@ -79,114 +24,8 @@ export default function CollaborationRoomChat() {
           ),
         }}
       />
-      <ViewWrapper footerComponent={inputChat()}>
-        {dummyData.map((item, index) => (
-          <View
-            key={index}
-            style={[
-              styles.messageRow,
-              item.role === 1 ? styles.rightAlign : styles.leftAlign,
-            ]}
-          >
-            <View
-              style={[
-                styles.bubble,
-                item.role === 1 ? styles.bubbleRight : styles.bubbleLeft,
-              ]}
-            >
-              <TextCustom style={styles.sender}>{item.nama}</TextCustom>
-              <TextCustom style={styles.message}>{item.chat}</TextCustom>
-              <TextCustom style={styles.time}>
-                {new Date(item.time).toLocaleTimeString([], {
-                  hour: "2-digit",
-                  minute: "2-digit",
-                })}
-              </TextCustom>
-            </View>
-          </View>
-        ))}
-        {/* <TextInputCustom placeholder="Ketik pesan..." />
-        <Spacing/> */}
-      </ViewWrapper>
+
+      <ChatScreen id={id as string} />
     </>
   );
 }
-
-const dummyData = [
-  {
-    nama: "Dina",
-    role: 1,
-    chat: "Hai! Kamu udah lihat dokumen proyek yang baru?",
-    time: "2025-07-24T09:01:15Z",
-  },
-  {
-    nama: "Rafi",
-    role: 2,
-    chat: "Halo! Iya, aku baru aja baca. Kayaknya kita harus revisi bagian akhir deh.",
-    time: "2025-07-24T09:02:03Z",
-  },
-  {
-    nama: "Dina",
-    role: 1,
-    chat: "Setuju. Aku juga kurang sreg sama penutupnya.",
-    time: "2025-07-24T09:02:45Z",
-  },
-  {
-    nama: "Rafi",
-    role: 2,
-    chat: "Oke, aku coba edit malam ini ya. Nanti aku share ulang versinya.",
-    time: "2025-07-24T09:03:10Z",
-  },
-  {
-    nama: "Dina",
-    role: 1,
-    chat: "Siap, makasih ya. Jangan begadang!",
-    time: "2025-07-24T09:03:30Z",
-  },
-];
-
-const styles = StyleSheet.create({
-  container: {
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-  },
-  messageRow: {
-    flexDirection: "row",
-    marginBottom: 12,
-  },
-  rightAlign: {
-    justifyContent: "flex-end",
-  },
-  leftAlign: {
-    justifyContent: "flex-start",
-  },
-  bubble: {
-    maxWidth: "75%",
-    padding: 10,
-    borderRadius: 12,
-  },
-  bubbleRight: {
-    backgroundColor: "#DCF8C6", // hijau muda
-    borderTopRightRadius: 0,
-  },
-  bubbleLeft: {
-    backgroundColor: "#F0F0F0", // abu-abu terang
-    borderTopLeftRadius: 0,
-  },
-  sender: {
-    fontSize: 12,
-    fontWeight: "bold",
-    marginBottom: 2,
-    color: "#555",
-  },
-  message: {
-    fontSize: 15,
-    color: "#000",
-  },
-  time: {
-    fontSize: 10,
-    color: "#888",
-    textAlign: "right",
-    marginTop: 4,
-  },
-});

app/(application)/(user)/collaboration/[id]/create-pacticipants.tsx

@@ -0,0 +1,80 @@
+import {
+  AlertDefaultSystem,
+  ButtonCustom,
+  TextAreaCustom,
+  ViewWrapper,
+} from "@/components";
+import { useAuth } from "@/hooks/use-auth";
+import { apiCollaborationCreatePartisipasi } from "@/service/api-client/api-collaboration";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import Toast from "react-native-toast-message";
+
+export default function CollaborationCreatePartisipans() {
+  const { user } = useAuth();
+  const { id } = useLocalSearchParams();
+  const [description, setDescription] = useState("");
+  const [isLoading, setLoading] = useState(false);
+
+  const handlerSubmitParticipans = async () => {
+    try {
+      setLoading(true);
+      const response = await apiCollaborationCreatePartisipasi({
+        id: id as string,
+        data: {
+          authorId: user?.id,
+          description,
+        },
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Data berhasil disimpan",
+        });
+        router.replace(`/collaboration/${id}/list-of-participants`);
+      } else {
+        Toast.show({
+          type: "error",
+          text1: "Gagal menyimpan data",
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <ViewWrapper>
+      <TextAreaCustom
+        //   label="Deskripsi"
+        placeholder="Masukan deskripsi diri anda .."
+        value={description}
+        onChangeText={setDescription}
+        required
+        showCount
+        maxLength={1000}
+      />
+
+      <ButtonCustom
+        disabled={description.length === 0}
+        isLoading={isLoading}
+        onPress={() => {
+          AlertDefaultSystem({
+            title: "Simpan data deskripsi",
+            message: "Apakah anda sudah yakin ingin menyimpan data ini ?",
+            textLeft: "Batal",
+            textRight: "Simpan",
+            onPressRight: () => {
+              handlerSubmitParticipans();
+            },
+          });
+        }}
+      >
+        Simpan
+      </ButtonCustom>
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/collaboration/[id]/detail-participant.tsx

@@ -1,26 +1,54 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-  AvatarUsernameAndOtherComponent,
-  BaseBox,
+  BackButton,
+  DotButton,
   DrawerCustom,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
+  MenuDrawerDynamicGrid,
+  ViewWrapper
 } from "@/components";
-import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection";
-import { MaterialIcons } from "@expo/vector-icons";
-import { useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { apiCollaborationGetOne } from "@/service/api-client/api-collaboration";
+import { Ionicons } from "@expo/vector-icons";
+import { router, Stack, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function CollaborationDetailParticipant() {
   const { id } = useLocalSearchParams();
   const [openDrawerParticipant, setOpenDrawerParticipant] = useState(false);
+  const [data, setData] = useState<any>();
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiCollaborationGetOne({ id: id as string });
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
 
   return (
     <>
+      <Stack.Screen
+        options={{
+          title: "Detail Proyek",
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <DotButton onPress={() => setOpenDrawerParticipant(true)} />
+          ),
+        }}
+      />
+
       <ViewWrapper>
-        <Collaboration_BoxDetailSection id={id as string} />
-        <BaseBox style={{ height: 500 }}>
+        <Collaboration_BoxDetailSection data={data} />
+        {/* <BaseBox style={{ height: 500 }}>
             <TextCustom align="center" bold size="large">
               Partisipan
             </TextCustom>
@@ -39,13 +67,33 @@ export default function CollaborationDetailParticipant() {
                 }
               />
             ))}
-        </BaseBox>
+        </BaseBox> */}
       </ViewWrapper>
 
       <DrawerCustom
         isVisible={openDrawerParticipant}
         closeDrawer={() => setOpenDrawerParticipant(false)}
         height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <Ionicons name="people" size={24} color="white" />,
+              label: "Daftar Partisipan",
+              path: `/collaboration/${id}/list-of-participants`,
+            },
+          ]}
+          onPressItem={(item) => {
+            router.push(item.path as any);
+            setOpenDrawerParticipant(false);
+          }}
+        />
+      </DrawerCustom>
+
+      {/* <DrawerCustom
+        isVisible={openDrawerParticipant}
+        closeDrawer={() => setOpenDrawerParticipant(false)}
+        height={"auto"}
       >
         <StackCustom>
           <TextCustom bold>Deskripsi Diri</TextCustom>
@@ -56,7 +104,7 @@ export default function CollaborationDetailParticipant() {
             Temporibus iusto soluta necessitatibus.
           </TextCustom>
         </StackCustom>
-      </DrawerCustom>
+      </DrawerCustom> */}
     </>
   );
 }

app/(application)/(user)/collaboration/[id]/detail-project-main.tsx

@@ -1,30 +1,65 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-  AlertDefaultSystem,
   BackButton,
-  ButtonCustom,
   DotButton,
   DrawerCustom,
+  LoaderCustom,
   MenuDrawerDynamicGrid,
   Spacing,
-  StackCustom,
-  TextCustom,
   ViewWrapper
 } from "@/components";
 import { IconEdit } from "@/components/_Icon";
 import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection";
-import Collaboration_MainParticipanSelectedSection from "@/screens/Collaboration/ProjectMainSelectedSection";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import {
+  apiCollaborationGetOne
+} from "@/service/api-client/api-collaboration";
+import { MaterialIcons } from "@expo/vector-icons";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function CollaborationDetailProjectMain() {
   const { id } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
-  const [openDrawerParticipant, setOpenDrawerParticipant] = useState(false);
-  const [selected, setSelected] = useState<(string | number)[]>([]);
+  const [data, setData] = useState<any>();
+  const [loadingGetData, setLoadingGetData] = useState(false);
 
-  const handleEdit = () => {
-    console.log("Edit collaboration");
-    router.push("/(application)/(user)/collaboration/(id)/edit");
+  useFocusEffect(
+    useCallback(() => {
+      handlerLoadData();
+    }, [id])
+  );
+
+  const handlerLoadData = async () => {
+    try {
+      setLoadingGetData(true);
+      await onLoadData();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetData(false);
+    }
+  };
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiCollaborationGetOne({ id: id as string });
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handleSubmit = (item: any) => {
+    console.log("item :", item);
+    router.push(item.path);
+    setOpenDrawer(false);
   };
 
   return (
@@ -37,34 +72,21 @@ export default function CollaborationDetailProjectMain() {
         }}
       />
       <ViewWrapper>
-        <Collaboration_BoxDetailSection id={id as string} />
-        <Collaboration_MainParticipanSelectedSection
-          selected={selected}
-          setSelected={setSelected}
-          setOpenDrawerParticipant={setOpenDrawerParticipant}
-        />
+        {loadingGetData ? (
+          <LoaderCustom />
+        ) : (
+          <>
+            <Collaboration_BoxDetailSection data={data} />
+            {/* <Collaboration_MainParticipanSelectedSection
+              selected={selected}
+              setSelected={setSelected}
+              setOpenDrawerParticipant={setOpenDrawerParticipant}
+              listData={listData as any}
+            /> */}
 
-        <ButtonCustom
-          onPress={() => {
-            AlertDefaultSystem({
-              title: "Buat Grup",
-              message:
-                "Apakah anda yakin ingin membuat grup untuk proyek ini ?",
-              textLeft: "Tidak",
-              textRight: "Ya",
-              onPressLeft: () => {},
-              onPressRight: () => {
-                router.navigate(
-                  "/(application)/(user)/collaboration/(tabs)/group"
-                );
-                console.log("selected :", selected);
-              },
-            });
-          }}
-        >
-          Buat Grup
-        </ButtonCustom>
-        <Spacing />
+            <Spacing />
+          </>
+        )}
       </ViewWrapper>
 
       <DrawerCustom
@@ -76,31 +98,20 @@ export default function CollaborationDetailProjectMain() {
           data={[
             {
               label: "Edit",
-              path: "/(application)/(user)/collaboration/(tabs)/group",
+              path: `/(application)/(user)/collaboration/${id}/edit`,
               icon: <IconEdit />,
             },
+            {
+              label: "Pilih Partisipan",
+              path: `/(application)/(user)/collaboration/${id}/select-of-participants`,
+              icon: <MaterialIcons name="checklist" size={24} color="white" />,
+            },
           ]}
-          onPressItem={(item) => {
-            handleEdit();
+          onPressItem={(item: any) => {
+            handleSubmit(item);
           }}
         />
       </DrawerCustom>
-
-      <DrawerCustom
-        isVisible={openDrawerParticipant}
-        closeDrawer={() => setOpenDrawerParticipant(false)}
-        height={"auto"}
-      >
-        <StackCustom>
-          <TextCustom bold>Deskripsi Diri</TextCustom>
-          <TextCustom>
-            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi,
-            itaque adipisci. Voluptas, sed quod! Ad facere labore voluptates,
-            neque quidem aut reprehenderit ducimus mollitia quisquam temporibus!
-            Temporibus iusto soluta necessitatibus.
-          </TextCustom>
-        </StackCustom>
-      </DrawerCustom>
     </>
   );
 }

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

@@ -1,53 +1,171 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   ButtonCustom,
+  LoaderCustom,
   SelectCustom,
   StackCustom,
   TextAreaCustom,
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
-import { router } from "expo-router";
+import {
+  apiCollaborationEditData,
+  apiCollaborationGetOne,
+} from "@/service/api-client/api-collaboration";
+import { apiMasterCollaborationType } from "@/service/api-client/api-master";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function CollaborationEdit() {
+  const { id } = useLocalSearchParams();
+  console.log("id :", id);
+  const [data, setData] = useState<any>();
+  const [listMaster, setListMaster] = useState<any[]>([]);
+  const [loadingData, setLoadingData] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      const fetchData = async () => {
+        try {
+          setLoadingData(true);
+          await onLoadData();
+          await onLoadMaster();
+        } catch (error) {
+          console.log("[ERROR]", error);
+        } finally {
+          setLoadingData(false);
+        }
+      };
+      fetchData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiCollaborationGetOne({ id: id as string });
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  async function onLoadMaster() {
+    try {
+      const response = await apiMasterCollaborationType();
+      setListMaster(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  }
+
+  const handlerSubmitUpdate = async () => {
+    if (
+      !data?.title ||
+      !data?.lokasi ||
+      !data?.projectCollaborationMaster_IndustriId ||
+      !data?.purpose ||
+      !data?.benefit
+    ) {
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: "Harap isi semua data",
+      });
+      return;
+    }
+    
+    try {
+      setIsLoading(true);
+      const response = await apiCollaborationEditData({
+        id: id as string,
+        data: data,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: response.message,
+        });
+        router.back();
+      } else {
+        Toast.show({
+          type: "error",
+          text1: response.message,
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <ViewWrapper>
-      <StackCustom gap={"xs"}>
-        <TextInputCustom label="Judul" placeholder="Masukan judul" required />
-        <TextInputCustom label="Lokasi" placeholder="Masukan lokasi" required />
-        <SelectCustom
-          label="Pilih Industri"
-          data={[
-            { label: "Industri 1", value: "industri-1" },
-            { label: "Industri 2", value: "industri-2" },
-            { label: "Industri 3", value: "industri-3" },
-          ]}
-          onChange={(value) => console.log(value)}
-        />
+      {loadingData ? (
+        <LoaderCustom />
+      ) : (
+        <StackCustom gap={"xs"}>
+          <TextInputCustom
+            label="Judul"
+            placeholder="Masukan judul"
+            required
+            value={data?.title}
+            onChangeText={(value) => setData({ ...data, title: value })}
+          />
+          <TextInputCustom
+            label="Lokasi"
+            placeholder="Masukan lokasi"
+            required
+            value={data?.lokasi}
+            onChangeText={(value) => setData({ ...data, lokasi: value })}
+          />
+          <SelectCustom
+            label="Pilih Industri"
+            data={listMaster?.map((item: any) => ({
+              label: item.name,
+              value: item.id,
+            }))}
+            value={data?.projectCollaborationMaster_IndustriId}
+            onChange={(value) =>
+              setData({ ...data, projectCollaborationMaster_IndustriId: value })
+            }
+          />
 
-        <TextAreaCustom
-          required
-          label="Tujuan Proyek"
-          placeholder="Masukan tujuan proyek"
-          showCount
-          maxLength={1000}
-        />
+          <TextAreaCustom
+            required
+            label="Tujuan Proyek"
+            placeholder="Masukan tujuan proyek"
+            showCount
+            maxLength={1000}
+            value={data?.purpose}
+            onChangeText={(value) => setData({ ...data, purpose: value })}
+          />
 
-        <TextAreaCustom
-          required
-          label="Keuntungan Proyek"
-          placeholder="Masukan keuntungan proyek"
-          showCount
-          maxLength={1000}
-        />
+          <TextAreaCustom
+            required
+            label="Keuntungan Proyek"
+            placeholder="Masukan keuntungan proyek"
+            showCount
+            maxLength={1000}
+            value={data?.benefit}
+            onChangeText={(value) => setData({ ...data, benefit: value })}
+          />
 
-        <ButtonCustom
-          title="Update"
-          onPress={() => {
-            console.log("Update proyek");
-            router.back();
-          }}
-        />
-      </StackCustom>
+          <ButtonCustom
+            isLoading={isLoading}
+            title="Update"
+            onPress={() => {
+              handlerSubmitUpdate();
+            }}
+          />
+        </StackCustom>
+      )}
     </ViewWrapper>
   );
 }

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

@@ -1,22 +1,75 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-  AlertDefaultSystem,
   BackButton,
   ButtonCustom,
   DotButton,
   DrawerCustom,
+  InformationBox,
+  LoaderCustom,
   MenuDrawerDynamicGrid,
-  TextAreaCustom,
   ViewWrapper,
 } from "@/components";
+import { useAuth } from "@/hooks/use-auth";
 import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection";
+import {
+  apiCollaborationGetOne,
+  apiCollaborationGetParticipants,
+} from "@/service/api-client/api-collaboration";
 import { Ionicons } from "@expo/vector-icons";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function CollaborationDetail() {
+  const { user } = useAuth();
   const { id } = useLocalSearchParams();
-  const [openDrawerPartisipasi, setOpenDrawerPartisipasi] = useState(false);
+  const [data, setData] = useState<any>();
   const [openDrawerMenu, setOpenDrawerMenu] = useState(false);
+  const [isParticipant, setIsParticipant] = useState(false);
+  const [loadingIsParticipant, setLoadingIsParticipant] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+      onLoadParticipants();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiCollaborationGetOne({ id: id as string });
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const onLoadParticipants = async () => {
+    try {
+      setLoadingIsParticipant(true);
+      const response = await apiCollaborationGetParticipants({
+        category: "check-participant",
+        id: id as string,
+        authorId: user?.id,
+      });
+
+      if (response.success) {
+        setIsParticipant(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingIsParticipant(false);
+    }
+  };
+
   return (
     <>
       <Stack.Screen
@@ -29,15 +82,35 @@ export default function CollaborationDetail() {
         }}
       />
       <ViewWrapper>
-        <Collaboration_BoxDetailSection id={id as string} />
-
-        <ButtonCustom onPress={() => setOpenDrawerPartisipasi(true)}>
-          Partisipasi
-        </ButtonCustom>
+        {!data && !isParticipant ? (
+          <LoaderCustom />
+        ) : (
+          <>
+            {user?.id === data?.Author?.id && (
+              <InformationBox
+                text={
+                  "Tombol partisipasi hanya muncul pada proyek milik orang lain"
+                }
+              />
+            )}
+            <Collaboration_BoxDetailSection data={data} />
+            {user?.id !== data?.Author?.id && (
+              <ButtonCustom
+                disabled={isParticipant || loadingIsParticipant}
+                onPress={() => {
+                  router.push(`/collaboration/${id}/create-pacticipants`);
+                  //  setOpenDrawerPartisipasi(true);
+                }}
+              >
+                {isParticipant ? "Anda telah berpartisipasi" : "Partisipasi"}
+              </ButtonCustom>
+            )}
+          </>
+        )}
       </ViewWrapper>
 
       {/* Drawer Partisipasi */}
-      <DrawerCustom
+      {/* <DrawerCustom
         isVisible={openDrawerPartisipasi}
         closeDrawer={() => setOpenDrawerPartisipasi(false)}
         height={300}
@@ -48,6 +121,8 @@ export default function CollaborationDetail() {
           required
           showCount
           maxLength={500}
+          value={description}
+          onChangeText={setDescription}
         />
 
         <ButtonCustom
@@ -58,19 +133,21 @@ export default function CollaborationDetail() {
               message: "Apakah anda sudah yakin ingin menyimpan data ini ?",
               textLeft: "Batal",
               textRight: "Simpan",
-              onPressRight: () => router.replace(`/collaboration/(tabs)/group`),
+              onPressRight: () => {
+                handlerSubmitParticipans();
+              },
             });
           }}
         >
           Simpan
         </ButtonCustom>
-      </DrawerCustom>
+      </DrawerCustom> */}
 
       {/* Drawer Menu */}
       <DrawerCustom
         isVisible={openDrawerMenu}
         closeDrawer={() => setOpenDrawerMenu(false)}
-        height={250}
+        height={"auto"}
       >
         <MenuDrawerDynamicGrid
           data={[

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

@@ -1,38 +1,79 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-    AvatarUsernameAndOtherComponent,
-    BaseBox,
-    DrawerCustom,
-    Spacing,
-    StackCustom,
-    TextCustom,
-    ViewWrapper
+  AvatarUsernameAndOtherComponent,
+  BaseBox,
+  DrawerCustom,
+  LoaderCustom,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
 } from "@/components";
+import { apiCollaborationGetParticipants } from "@/service/api-client/api-collaboration";
 import { Feather } from "@expo/vector-icons";
 import { useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import _ from "lodash";
+import { useEffect, useState } from "react";
 import { ScrollView } from "react-native";
 
 export default function CollaborationListOfParticipants() {
   const { id } = useLocalSearchParams();
+  const [listData, setListData] = useState<any[]>();
+  const [loadingGetData, setLoadingGetData] = useState(false);
+  const [description, setDescription] = useState("");
+
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
+
+  const onLoadData = async () => {
+    try {
+      setLoadingGetData(true);
+      const response = await apiCollaborationGetParticipants({
+        category: "list",
+        id: id as string,
+      });
+
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetData(false);
+    }
+  };
+
   const [openDrawer, setOpenDrawer] = useState(false);
   return (
     <>
       <ViewWrapper>
-        {Array.from({ length: 10 }).map((_, index) => (
-          <BaseBox key={index} paddingBlock={5}>
-            <AvatarUsernameAndOtherComponent
-              avatarHref={`/profile/${id}`}
-              rightComponent={
-                <Feather
-                  name="chevron-right"
-                  size={24}
-                  color="white"
-                  onPress={() => setOpenDrawer(true)}
-                />
-              }
-            />
-          </BaseBox>
-        ))}
+        {loadingGetData ? (
+          <LoaderCustom />
+        ) : _.isEmpty(listData) ? (
+          <TextCustom align="center">Tidak ada partisipan</TextCustom>
+        ) : (
+          listData?.map((item: any, index: number) => (
+            <BaseBox key={index} paddingBlock={5}>
+              <AvatarUsernameAndOtherComponent
+                avatar={item?.User?.Profile?.imageId}
+                avatarHref={`/profile/${item?.User?.Profile?.id}`}
+                name={item?.User?.username}
+                rightComponent={
+                  <Feather
+                    name="chevron-right"
+                    size={24}
+                    color="white"
+                    onPress={() => {
+                      setDescription(item?.deskripsi_diri);
+                      setOpenDrawer(true);
+                    }}
+                  />
+                }
+              />
+            </BaseBox>
+          ))
+        )}
       </ViewWrapper>
 
       {/* Drawer */}
@@ -44,34 +85,7 @@ export default function CollaborationListOfParticipants() {
           <TextCustom bold>Deskripsi diri</TextCustom>
           <BaseBox>
             <ScrollView style={{ height: "80%" }}>
-              <TextCustom>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
-                ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
-                ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
-                ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut iqua.Lorem ipsum dolor sit amet,
-                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-                labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
-                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-                labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
-                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-                labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
-                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-                labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
-                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-                labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
-                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-                labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
-                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-                labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
-                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-                labore et dolore magna aliqua.
-              </TextCustom>
+              <TextCustom>{description}</TextCustom>
             </ScrollView>
           </BaseBox>
           <Spacing />

app/(application)/(user)/collaboration/[id]/select-of-participants.tsx

@@ -0,0 +1,251 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+    AlertDefaultSystem,
+    AvatarComp,
+    BaseBox,
+    BoxButtonOnFooter,
+    ButtonCustom,
+    CheckboxCustom,
+    CheckboxGroup,
+    DrawerCustom,
+    Grid,
+    LoaderCustom,
+    Spacing,
+    StackCustom,
+    TextAreaCustom,
+    TextCustom,
+    ViewWrapper,
+} from "@/components";
+import ModalCustom from "@/components/Modal/ModalCustom";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { useAuth } from "@/hooks/use-auth";
+import {
+    apiCollaborationCreateGroup,
+    apiCollaborationGetParticipants,
+} from "@/service/api-client/api-collaboration";
+import { MaterialIcons } from "@expo/vector-icons";
+import { router, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import { ScrollView, View } from "react-native";
+import Toast from "react-native-toast-message";
+
+export default function CollaborationSelectOfParticipants() {
+  const { user } = useAuth();
+  const { id } = useLocalSearchParams();
+  const [listData, setListData] = useState<any[]>();
+  const [loadingGetData, setLoadingGetData] = useState(false);
+  const [description, setDescription] = useState("");
+  const [selected, setSelected] = useState<(string | number)[]>([]);
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [nameGroup, setNameGroup] = useState("");
+  const [openModal, setOpenModal] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
+
+  const onLoadData = async () => {
+    try {
+      setLoadingGetData(true);
+      const response = await apiCollaborationGetParticipants({
+        category: "list",
+        id: id as string,
+      });
+      //   console.log("response :", JSON.stringify(response.data, null, 2));
+
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetData(false);
+    }
+  };
+
+  const handlerCreateGroup = async () => {
+    if (_.isEmpty(nameGroup)) {
+      Toast.show({
+        type: "error",
+        text1: "Nama grup tidak boleh kosong",
+      });
+      return;
+    }
+    try {
+      setIsLoading(true);
+      const response = await apiCollaborationCreateGroup({
+        id: id as string,
+        data: {
+          authorId: user?.id,
+          nameGroup: nameGroup,
+          listSelect: selected,
+        },
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Grup berhasil dibuat",
+        });
+        router.push("/(application)/(user)/collaboration/(tabs)/group");
+      } else {
+        Toast.show({
+          type: "error",
+          text1: "Gagal membuat grup",
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handlerSubmit = () => {
+    return (
+      <>
+        <BoxButtonOnFooter>
+          <ButtonCustom
+            disabled={_.isEmpty(selected)}
+            onPress={() => {
+              setOpenModal(true);
+              setNameGroup("");
+            }}
+          >
+            Buat Grup
+          </ButtonCustom>
+        </BoxButtonOnFooter>
+      </>
+    );
+  };
+
+  return (
+    <>
+      <ViewWrapper
+        footerComponent={_.isEmpty(listData) ? null : handlerSubmit()}
+      >
+        {loadingGetData ? (
+          <LoaderCustom />
+        ) : _.isEmpty(listData) ? (
+          <TextCustom align="center">Tidak ada partisipan</TextCustom>
+        ) : (
+          <StackCustom>
+            <TextCustom size="default" color="red" bold>
+              *{" "}
+              <TextCustom size="small" semiBold>
+                Pilih user yang akan menjadi tim proyek anda
+              </TextCustom>
+            </TextCustom>
+
+            <CheckboxGroup
+              value={selected}
+              onChange={(val: any) => {
+                console.log("val :", val);
+                setSelected(val);
+              }}
+            >
+              {listData?.map((item: any, index: any) => (
+                <View key={index}>
+                  <Grid key={index}>
+                    <Grid.Col
+                      span={2}
+                      style={{ alignItems: "center", justifyContent: "center" }}
+                    >
+                      <CheckboxCustom valueKey={item?.User?.id} />
+                    </Grid.Col>
+                    <Grid.Col span={2} style={{ alignItems: "center" }}>
+                      <AvatarComp
+                        size="base"
+                        fileId={item?.User?.Profile?.imageId}
+                      />
+                    </Grid.Col>
+                    <Grid.Col span={6} style={{ justifyContent: "center" }}>
+                      <TextCustom bold truncate>
+                        {item?.User?.username}
+                      </TextCustom>
+                    </Grid.Col>
+                    <Grid.Col
+                      span={2}
+                      style={{ alignItems: "center", justifyContent: "center" }}
+                    >
+                      <MaterialIcons
+                        name="notes"
+                        size={ICON_SIZE_SMALL}
+                        color="white"
+                        onPress={() => {
+                          setOpenDrawer(true);
+                          setDescription(item?.deskripsi_diri);
+                        }}
+                      />
+                    </Grid.Col>
+                  </Grid>
+                </View>
+              ))}
+            </CheckboxGroup>
+          </StackCustom>
+        )}
+      </ViewWrapper>
+
+      <ModalCustom isVisible={openModal}>
+        <StackCustom gap={0}>
+          <TextAreaCustom
+            placeholder="Nama Grup"
+            value={nameGroup}
+            onChangeText={(val) => setNameGroup(val)}
+          />
+          <Grid>
+            <Grid.Col span={6} style={{ paddingRight: 10 }}>
+              <ButtonCustom
+                backgroundColor="gray"
+                onPress={() => {
+                  setOpenModal(false);
+                }}
+              >
+                Batal
+              </ButtonCustom>
+            </Grid.Col>
+            <Grid.Col span={6} style={{ paddingLeft: 10 }}>
+              <ButtonCustom
+                isLoading={isLoading}
+                disabled={_.isEmpty(nameGroup)}
+                onPress={() => {
+                  AlertDefaultSystem({
+                    title: "Buat Grup",
+                    message:
+                      "Apakah anda yakin ingin membuat grup untuk proyek ini ?",
+                    textLeft: "Tidak",
+                    textRight: "Ya",
+                    onPressLeft: () => {},
+                    onPressRight: () => {
+                      handlerCreateGroup();
+                    },
+                  });
+                }}
+              >
+                Simpan
+              </ButtonCustom>
+            </Grid.Col>
+          </Grid>
+        </StackCustom>
+      </ModalCustom>
+
+      {/* Drawer */}
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+      >
+        <StackCustom>
+          <TextCustom bold>Deskripsi diri</TextCustom>
+          <BaseBox>
+            <ScrollView style={{ height: "80%" }}>
+              <TextCustom>{description}</TextCustom>
+            </ScrollView>
+          </BaseBox>
+          <Spacing />
+        </StackCustom>
+      </DrawerCustom>
+    </>
+  );
+}

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

@@ -1,53 +1,174 @@
 import {
-    ButtonCustom,
-    SelectCustom,
-    StackCustom,
-    TextAreaCustom,
-    TextInputCustom,
-    ViewWrapper
+  ButtonCustom,
+  LoaderCustom,
+  SelectCustom,
+  StackCustom,
+  TextAreaCustom,
+  TextInputCustom,
+  ViewWrapper,
 } from "@/components";
+import { useAuth } from "@/hooks/use-auth";
+import { apiCollaborationCreate } from "@/service/api-client/api-collaboration";
+import { apiMasterCollaborationType } from "@/service/api-client/api-master";
 import { router } from "expo-router";
+import React, { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
+
+interface CollaborationCreateProps {
+  title?: string;
+  lokasi?: string;
+  purpose?: string;
+  benefit?: string;
+  projectCollaborationMaster_IndustriId?: string;
+  userId?: string;
+}
 
 export default function CollaborationCreate() {
+  const { user } = useAuth();
+  const [listMaster, setListMaster] = useState<any>([]);
+  const [loadingMaster, setLoadingMaster] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [data, setData] = React.useState<CollaborationCreateProps>({
+    title: "",
+    lokasi: "",
+    purpose: "",
+    benefit: "",
+    projectCollaborationMaster_IndustriId: "",
+    userId: "",
+  });
+
+  useEffect(() => {
+    onLoadMaster();
+  }, []);
+
+  async function onLoadMaster() {
+    try {
+      setLoadingMaster(true);
+      const response = await apiMasterCollaborationType();
+      setListMaster(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingMaster(false);
+    }
+  }
+
+  const handlerSubmit = async () => {
+    if (
+      !data?.title ||
+      !data?.lokasi ||
+      !data?.purpose ||
+      !data?.benefit ||
+      !data?.projectCollaborationMaster_IndustriId
+    ) {
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: "Harap isi semua data",
+      });
+      return;
+    }
+
+    const newData: CollaborationCreateProps = {
+      title: data?.title,
+      lokasi: data?.lokasi,
+      purpose: data?.purpose,
+      benefit: data?.benefit,
+      projectCollaborationMaster_IndustriId:
+        data?.projectCollaborationMaster_IndustriId,
+      userId: user?.id,
+    };
+
+    try {
+      setIsLoading(true);
+
+      const response = await apiCollaborationCreate({ data: newData });
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Berhasil",
+          text2: response.message,
+        });
+        router.back();
+      } else {
+        Toast.show({
+          type: "error",
+          text1: "Gagal",
+          text2: response.message,
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <ViewWrapper>
-      <StackCustom gap={"xs"}>
-        <TextInputCustom label="Judul" placeholder="Masukan judul" required />
-        <TextInputCustom label="Lokasi" placeholder="Masukan lokasi" required />
-        <SelectCustom
-          label="Pilih Industri"
-          data={[
-            { label: "Industri 1", value: "industri-1" },
-            { label: "Industri 2", value: "industri-2" },
-            { label: "Industri 3", value: "industri-3" },
-          ]}
-          onChange={(value) => console.log(value)}
-        />
+      {loadingMaster ? (
+        <LoaderCustom />
+      ) : (
+        <StackCustom gap={"xs"}>
+          <TextInputCustom
+            label="Judul"
+            placeholder="Masukan judul"
+            required
+            value={data?.title}
+            onChangeText={(value: any) => setData({ ...data, title: value })}
+          />
 
-        <TextAreaCustom
-          required
-          label="Tujuan Proyek"
-          placeholder="Masukan tujuan proyek"
-          showCount
-          maxLength={1000}
-        />
+          <TextInputCustom
+            label="Lokasi"
+            placeholder="Masukan lokasi"
+            required
+            value={data?.lokasi}
+            onChangeText={(value: any) => setData({ ...data, lokasi: value })}
+          />
 
-        <TextAreaCustom
-          required
-          label="Keuntungan Proyek"
-          placeholder="Masukan keuntungan proyek"
-          showCount
-          maxLength={1000}
-        />
+          <SelectCustom
+            label="Pilih Industri"
+            data={listMaster?.map((item: any) => ({
+              label: item.name,
+              value: item.id,
+            }))}
+            value={data?.projectCollaborationMaster_IndustriId}
+            onChange={(value: any) => {
+              console.log(value);
+              setData({
+                ...data,
+                projectCollaborationMaster_IndustriId: value,
+              });
+            }}
+          />
 
-        <ButtonCustom
-          title="Simpan"
-          onPress={() => {
-            console.log("Simpan proyek");
-            router.back();
-          }}
-        />
-      </StackCustom>
+          <TextAreaCustom
+            required
+            label="Tujuan Proyek"
+            placeholder="Masukan tujuan proyek"
+            showCount
+            maxLength={1000}
+            value={data?.purpose}
+            onChangeText={(value: any) => setData({ ...data, purpose: value })}
+          />
+
+          <TextAreaCustom
+            required
+            label="Keuntungan Proyek"
+            placeholder="Masukan keuntungan proyek"
+            showCount
+            maxLength={1000}
+            value={data?.benefit}
+            onChangeText={(value: any) => setData({ ...data, benefit: value })}
+          />
+
+          <ButtonCustom
+            isLoading={isLoading}
+            title="Simpan"
+            onPress={() => handlerSubmit()}
+          />
+        </StackCustom>
+      )}
     </ViewWrapper>
   );
 }

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)/forum/[id]/edit.tsx

@@ -1,37 +1,98 @@
 import {
   BoxButtonOnFooter,
   ButtonCustom,
+  LoaderCustom,
   TextAreaCustom,
   ViewWrapper,
 } from "@/components";
-import { router } from "expo-router";
-import { useState } from "react";
+import { apiForumGetOne, apiForumUpdate } from "@/service/api-client/api-forum";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function ForumEdit() {
+  const { id } = useLocalSearchParams();
   const [text, setText] = useState("");
+  const [loadingGetData, setLoadingGetData] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
-  const buttonFooter = (
-    <BoxButtonOnFooter>
-      <ButtonCustom
-        onPress={() => {
-          console.log("Posting", text);
-          router.back();
-        }}
-      >
-        Update
-      </ButtonCustom>
-    </BoxButtonOnFooter>
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData(id as string);
+    }, [id])
   );
 
+  const onLoadData = async (id: string) => {
+    try {
+      setLoadingGetData(true);
+      const response = await apiForumGetOne({ id });
+
+      setText(response.data.diskusi);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetData(false);
+    }
+  };
+
+  const handlerUpdateData = async () => {
+    if (!text) {
+      Toast.show({
+        type: "error",
+        text1: "Harap masukkan diskusi",
+      });
+      return;
+    }
+    try {
+      setIsLoading(true);
+      const response = await apiForumUpdate({
+        id: id as string,
+        data: text,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Berhasil diupdate",
+        });
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const buttonFooter = () => {
+    return (
+      <>
+        {!loadingGetData && (
+          <BoxButtonOnFooter>
+            <ButtonCustom isLoading={isLoading} onPress={handlerUpdateData}>
+              Update
+            </ButtonCustom>
+          </BoxButtonOnFooter>
+        )}
+      </>
+    );
+  };
+
   return (
-    <ViewWrapper footerComponent={buttonFooter}>
-      <TextAreaCustom
-        placeholder="Ketik diskusi anda..."
-        maxLength={1000}
-        showCount
-        value={text}
-        onChangeText={setText}
-      />
+    <ViewWrapper footerComponent={buttonFooter()}>
+      {!loadingGetData ? (
+        <TextAreaCustom
+          placeholder="Ketik diskusi anda..."
+          maxLength={1000}
+          showCount
+          value={text}
+          onChangeText={(value) => {
+            setText(value);
+          }}
+        />
+      ) : (
+        <LoaderCustom />
+      )}
     </ViewWrapper>
   );
 }

app/(application)/(user)/forum/[id]/forumku.tsx

@@ -1,35 +1,86 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-  AlertCustom,
-  AvatarCustom,
+  AvatarComp,
   ButtonCustom,
   CenterCustom,
   DrawerCustom,
+  FloatingButton,
   Grid,
+  LoaderCustom,
   StackCustom,
   TextCustom,
   ViewWrapper,
 } from "@/components";
-import { MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
 import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
-import { listDummyDiscussionForum } from "@/screens/Forum/list-data-dummy";
 import Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
-import { useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { apiForumGetAll } from "@/service/api-client/api-forum";
+import { apiUser } from "@/service/api-client/api-user";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function Forumku() {
   const { id } = useLocalSearchParams();
+  const { user } = useAuth();
   const [openDrawer, setOpenDrawer] = useState(false);
   const [status, setStatus] = useState("");
-  const [alertStatus, setAlertStatus] = useState(false);
-  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [listData, setListData] = useState<any | null>(null);
+  const [dataUser, setDataUser] = useState<any | null>(null);
+  const [loadingGetList, setLoadingGetList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+      onLoadDataProfile(id as string);
+    }, [id])
+  );
+
+  const onLoadDataProfile = async (id: string) => {
+    try {
+      const response = await apiUser(id);
+
+      setDataUser(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+    }
+  };
+
+  const onLoadData = async () => {
+    try {
+      setLoadingGetList(true);
+      const response = await apiForumGetAll({
+        search: "",
+        authorId: id as string,
+      });
+
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetList(false);
+    }
+  };
 
   return (
     <>
-      <ViewWrapper>
+      <ViewWrapper
+        floatingButton={
+          user?.id === id && (
+            <FloatingButton
+              onPress={() =>
+                router.navigate("/(application)/(user)/forum/create")
+              }
+            />
+          )
+        }
+      >
         <StackCustom>
           <CenterCustom>
-            <AvatarCustom
-              href={`/(application)/(image)/preview-image/${id}`}
+            <AvatarComp
+              fileId={dataUser?.Profile?.imageId}
+              href={`/(application)/(image)/preview-image/${dataUser?.Profile?.imageId}`}
               size="xl"
             />
           </CenterCustom>
@@ -37,32 +88,43 @@ export default function Forumku() {
           <Grid>
             <Grid.Col span={6}>
               <TextCustom bold truncate>
-                @bagas_banuna
+                @{dataUser?.username || "-"}
               </TextCustom>
-              <TextCustom>1 postingan</TextCustom>
+              <TextCustom>{listData?.length || "0"} postingan</TextCustom>
             </Grid.Col>
             <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
-              <ButtonCustom href={`/profile/${id}`}>
+              <ButtonCustom href={`/profile/${dataUser?.Profile?.id}`}>
                 Kunjungi Profile
               </ButtonCustom>
             </Grid.Col>
           </Grid>
-          {listDummyDiscussionForum.map((e, i) => (
-            <Forum_BoxDetailSection
-              key={i}
-              data={e}
-              setOpenDrawer={setOpenDrawer}
-              setStatus={setStatus}
-              isTruncate={true}
-              href={`/forum/${id}`}
-            />
-          ))}
+          {loadingGetList ? (
+            <LoaderCustom />
+          ) : _.isEmpty(listData) ? (
+            <TextCustom> Tidak ada diskusi</TextCustom>
+          ) : (
+            <>
+              {listData?.map((item: any, index: number) => (
+                <Forum_BoxDetailSection
+                  isRightComponent={false}
+                  key={index}
+                  data={item}
+                  isTruncate={true}
+                  href={`/forum/${item.id}`}
+                  onSetData={(value) => {
+                    setOpenDrawer(value.setOpenDrawer);
+                    setStatus(value.setStatus);
+                  }}
+                />
+              ))}
+            </>
+          )}
         </StackCustom>
       </ViewWrapper>
 
       {/* Drawer Komponen Eksternal */}
       <DrawerCustom
-        height={350}
+        height={"auto"}
         isVisible={openDrawer}
         closeDrawer={() => setOpenDrawer(false)}
       >
@@ -72,42 +134,9 @@ export default function Forumku() {
           setIsDrawerOpen={() => {
             setOpenDrawer(false);
           }}
-          setShowDeleteAlert={setDeleteAlert}
-          setShowAlertStatus={setAlertStatus}
+          authorId={id as string}
         />
       </DrawerCustom>
-
-      {/* Alert Komponen Eksternal */}
-      <AlertCustom
-        isVisible={alertStatus}
-        onLeftPress={() => setAlertStatus(false)}
-        onRightPress={() => {
-          setOpenDrawer(false);
-          setAlertStatus(false);
-          console.log("Ubah status forum");
-        }}
-        title="Ubah Status Forum"
-        message="Apakah Anda yakin ingin mengubah status forum ini?"
-        textLeft="Batal"
-        textRight="Ubah"
-        colorRight={MainColor.green}
-      />
-
-      {/* Alert Delete */}
-      <AlertCustom
-        isVisible={deleteAlert}
-        onLeftPress={() => setDeleteAlert(false)}
-        onRightPress={() => {
-          setOpenDrawer(false);
-          setDeleteAlert(false);
-          console.log("Hapus forum");
-        }}
-        title="Hapus Forum"
-        message="Apakah Anda yakin ingin menghapus forum ini?"
-        textLeft="Batal"
-        textRight="Hapus"
-        colorRight={MainColor.red}
-      />
     </>
   );
 }

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

@@ -1,176 +1,263 @@
 import {
-  AlertCustom,
   ButtonCustom,
   DrawerCustom,
+  LoaderCustom,
   Spacing,
   TextAreaCustom,
+  TextCustom,
   ViewWrapper,
 } from "@/components";
-import { MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
 import Forum_CommentarBoxSection from "@/screens/Forum/CommentarBoxSection";
 import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
-import { listDummyCommentarForum } from "@/screens/Forum/list-data-dummy";
 import Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
 import Forum_MenuDrawerCommentar from "@/screens/Forum/MenuDrawerSection.tsx/MenuCommentar";
-import { router, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import {
+  apiForumCreateComment,
+  apiForumGetComment,
+  apiForumGetOne,
+  apiForumUpdateStatus,
+} from "@/service/api-client/api-forum";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useEffect, useState } from "react";
+
+interface CommentProps {
+  id: string;
+  isActive: boolean;
+  komentar: string;
+  createdAt: Date;
+  authorId: string;
+  Author: {
+    id: string;
+    username: string;
+    Profile: {
+      id: string;
+      imageId: string;
+    };
+  };
+}
 
 export default function ForumDetail() {
   const { id } = useLocalSearchParams();
-  console.log(id);
+  const { user } = useAuth();
   const [openDrawer, setOpenDrawer] = useState(false);
+  const [data, setData] = useState<any | null>(null);
+  const [listComment, setListComment] = useState<CommentProps[] | null>(null);
+  const [isLoadingComment, setLoadingComment] = useState(false);
+
+  // Status
   const [status, setStatus] = useState("");
-  const [alertStatus, setAlertStatus] = useState(false);
-  const [deleteAlert, setDeleteAlert] = useState(false);
   const [text, setText] = useState("");
+  const [authorId, setAuthorId] = useState("");
+  const [dataId, setDataId] = useState("");
 
   // Comentar
   const [openDrawerCommentar, setOpenDrawerCommentar] = useState(false);
-  const [alertDeleteCommentar, setAlertDeleteCommentar] = useState(false);
+  const [commentId, setCommentId] = useState("");
+  const [commentAuthorId, setCommentAuthorId] = useState("");
 
-  const dataDummy = {
-    name: "Bagas",
-    status: "Open",
-    date: "14/07/2025",
-    deskripsi:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae inventore iure pariatur, libero omnis excepturi. Ullam ad officiis deleniti quos esse odit nesciunt, ipsam adipisci cumque aliquam corporis culpa fugit?",
-    jumlahBalas: 2,
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData(id as string);
+    }, [id])
+  );
+
+  const onLoadData = async (id: string) => {
+    try {
+      const response = await apiForumGetOne({ id });
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  useEffect(() => {
+    onLoadListComment(id as string);
+  }, [id]);
+
+  const onLoadListComment = async (id: string) => {
+    try {
+      const response = await apiForumGetComment({
+        id: id as string,
+      });
+      setListComment(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  // Update Status
+  const handlerUpdateStatus = async (value: any) => {
+    try {
+      const response = await apiForumUpdateStatus({
+        id: id as string,
+        data: value,
+      });
+      if (response.success) {
+        setStatus(response.data);
+        setData({
+          ...data,
+          ForumMaster_StatusPosting: {
+            status: response.data,
+          },
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  // Create Commentar
+  const handlerCreateCommentar = async () => {
+    const newData = {
+      comment: text,
+      authorId: user?.id,
+    };
+
+    try {
+      setLoadingComment(true);
+      const response = await apiForumCreateComment({
+        id: id as string,
+        data: newData,
+      });
+
+      if (response.success) {
+        setText("");
+        const newComment = {
+          id: response.data.id,
+          isActive: response.data.isActive,
+          komentar: response.data.komentar,
+          createdAt: response.data.createdAt,
+          authorId: response.data.authorId,
+          Author: response.data.Author,
+        };
+        setListComment((prev) => [newComment, ...(prev || [])]);
+        setData({
+          ...data,
+          count: data.count + 1,
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingComment(false);
+    }
   };
 
   return (
     <>
       <ViewWrapper>
-        {/* <StackCustom>
-        </StackCustom> */}
-        <Forum_BoxDetailSection
-          data={dataDummy}
-          setOpenDrawer={setOpenDrawer}
-          setStatus={setStatus}
-        />
+        {!data && !listComment ? (
+          <LoaderCustom />
+        ) : (
+          <>
+            {/* Box Posting */}
+            <Forum_BoxDetailSection
+              data={data}
+              onSetData={() => {
+                setOpenDrawer(true);
+                setStatus(data.ForumMaster_StatusPosting?.status);
+                setAuthorId(data.Author?.id);
+                setDataId(data.id);
+              }}
+            />
 
-        <TextAreaCustom
-          placeholder="Ketik diskusi anda..."
-          maxLength={1000}
-          showCount
-          value={text}
-          onChangeText={setText}
-          style={{
-            marginBottom: 0,
-          }}
-        />
-        <ButtonCustom
-          style={{
-            alignSelf: "flex-end",
-          }}
-          onPress={() => {
-            console.log("Posting", text);
-            router.back();
-          }}
-        >
-          Balas
-        </ButtonCustom>
+            {/* Area Commentar */}
+            {data?.ForumMaster_StatusPosting?.status === "Open" && (
+              <>
+                <TextAreaCustom
+                  placeholder="Ketik diskusi anda..."
+                  maxLength={1000}
+                  showCount
+                  value={text}
+                  onChangeText={setText}
+                  style={{
+                    marginBottom: 0,
+                  }}
+                />
+                <ButtonCustom
+                  isLoading={isLoadingComment}
+                  style={{
+                    alignSelf: "flex-end",
+                  }}
+                  onPress={() => {
+                    handlerCreateCommentar();
+                  }}
+                >
+                  Balas
+                </ButtonCustom>
+              </>
+            )}
+            <Spacing height={40} />
 
-        <Spacing height={40} />
-
-        {listDummyCommentarForum.map((e, i) => (
-          <Forum_CommentarBoxSection
-            key={i}
-            data={e}
-            setOpenDrawer={setOpenDrawerCommentar}
-          />
-        ))}
+            {/* List Commentar */}
+            {_.isEmpty(listComment) ? (
+              <TextCustom align="center" color="gray" size={"small"}>
+                Tidak ada komentar
+              </TextCustom>
+            ) : (
+              <TextCustom color="gray">Komentar :</TextCustom>
+            )}
+            <Spacing height={5} />
+            {listComment?.map((item: any, index: number) => (
+              <Forum_CommentarBoxSection
+                key={index}
+                data={item}
+                onSetData={(value) => {
+                  setCommentId(value.setCommentId);
+                  setOpenDrawerCommentar(value.setOpenDrawer);
+                  setCommentAuthorId(value.setCommentAuthorId);
+                }}
+              />
+            ))}
+          </>
+        )}
       </ViewWrapper>
 
+      {/* Posting Drawer */}
       <DrawerCustom
-        height={350}
+        height={"auto"}
         isVisible={openDrawer}
         closeDrawer={() => setOpenDrawer(false)}
       >
         <Forum_MenuDrawerBerandaSection
-          id={id as string}
+          id={dataId}
           status={status}
           setIsDrawerOpen={() => {
             setOpenDrawer(false);
           }}
-          setShowDeleteAlert={setDeleteAlert}
-          setShowAlertStatus={setAlertStatus}
+          authorId={authorId}
+          handlerUpdateStatus={(value: any) => {
+            handlerUpdateStatus(value);
+          }}
         />
       </DrawerCustom>
 
-      {/* Alert Status */}
-      <AlertCustom
-        isVisible={alertStatus}
-        title="Ubah Status Forum"
-        message="Apakah Anda yakin ingin mengubah status forum ini?"
-        onLeftPress={() => {
-          setOpenDrawer(false);
-          setAlertStatus(false);
-          console.log("Batal");
-        }}
-        onRightPress={() => {
-          setOpenDrawer(false);
-          setAlertStatus(false);
-          console.log("Ubah status forum");
-        }}
-        textLeft="Batal"
-        textRight="Ubah"
-        colorRight={MainColor.green}
-      />
-
-      {/* Alert Delete */}
-      <AlertCustom
-        isVisible={deleteAlert}
-        title="Hapus Forum"
-        message="Apakah Anda yakin ingin menghapus forum ini?"
-        onLeftPress={() => {
-          setOpenDrawer(false);
-          setDeleteAlert(false);
-          console.log("Batal");
-        }}
-        onRightPress={() => {
-          setOpenDrawer(false);
-          setDeleteAlert(false);
-          console.log("Hapus forum");
-        }}
-        textLeft="Batal"
-        textRight="Hapus"
-        colorRight={MainColor.red}
-      />
-
-      {/* Commentar */}
+      {/* Commentar Drawer */}
       <DrawerCustom
-        height={350}
+        height={"auto"}
         isVisible={openDrawerCommentar}
         closeDrawer={() => setOpenDrawerCommentar(false)}
       >
         <Forum_MenuDrawerCommentar
-          id={id as string}
+          id={commentId as string}
+          commentId={commentId}
+          commentAuthorId={commentAuthorId}
           setIsDrawerOpen={() => {
             setOpenDrawerCommentar(false);
           }}
-          setShowDeleteAlert={setAlertDeleteCommentar}
+          listComment={listComment}
+          setListComment={setListComment}
+          countComment={data?.count}
+          setCountComment={(val: any) => {
+            setData((prev: any) => ({
+              ...prev,
+              count: val,
+            }));
+          }}
         />
       </DrawerCustom>
-
-      {/* Alert Delete Commentar */}
-      <AlertCustom
-        isVisible={alertDeleteCommentar}
-        title="Hapus Komentar"
-        message="Apakah Anda yakin ingin menghapus komentar ini?"
-        onLeftPress={() => {
-          setOpenDrawerCommentar(false);
-          setAlertDeleteCommentar(false);
-          console.log("Batal");
-        }}
-        onRightPress={() => {
-          setOpenDrawerCommentar(false);
-          setAlertDeleteCommentar(false);
-          console.log("Hapus commentar");
-        }}
-        textLeft="Batal"
-        textRight="Hapus"
-        colorRight={MainColor.red}
-      />
     </>
   );
 }

app/(application)/(user)/forum/[id]/other-report-commentar.tsx

@@ -5,27 +5,69 @@ import {
   ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
-import { router } from "expo-router";
+import { useAuth } from "@/hooks/use-auth";
+import { apiForumCreateReportCommentar } from "@/service/api-client/api-master";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function ForumOtherReportCommentar() {
+  const { id } = useLocalSearchParams();
+  const { user } = useAuth();
+  const [value, setValue] = useState<string>("");
+
+  const handlerSubmitReport = async () => {
+    const newData = {
+      authorId: user?.id,
+      description: value,
+    };
+
+    try {
+      const response = await apiForumCreateReportCommentar({
+        id: id as string,
+        data: newData,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Laporan berhasil dikirim",
+        });
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: "Laporan gagal dikirim",
+      });
+    }
+  };
+
   const handleSubmit = (
     <BoxButtonOnFooter>
       <ButtonCustom
+        disabled={!value}
         backgroundColor={MainColor.red}
         textColor={MainColor.white}
         onPress={() => {
-          console.log("Report lainnya");
-          router.back();
+          handlerSubmitReport();
         }}
       >
         Report
       </ButtonCustom>
     </BoxButtonOnFooter>
   );
+
   return (
     <>
       <ViewWrapper footerComponent={handleSubmit}>
-        <TextAreaCustom placeholder="Laporkan Komentar" />
+        <TextAreaCustom
+          placeholder="Laporkan Komentar"
+          value={value}
+          onChangeText={setValue}
+        />
       </ViewWrapper>
     </>
   );

app/(application)/(user)/forum/[id]/other-report-posting.tsx

@@ -5,17 +5,54 @@ import {
   ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
-import { router } from "expo-router";
+import { useAuth } from "@/hooks/use-auth";
+import { apiForumCreateReportPosting } from "@/service/api-client/api-master";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function ForumOtherReportPosting() {
+  const { id } = useLocalSearchParams();
+  const { user } = useAuth();
+  const [value, setValue] = useState<string>("");
+
+  const handlerSubmitReport = async () => {
+    const newData = {
+      authorId: user?.id,
+      description: value,
+    };
+
+    try {
+      const response = await apiForumCreateReportPosting({
+        id: id as string,
+        data: newData,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Laporan berhasil dikirim",
+        });
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: "Laporan gagal dikirim",
+      });
+    }
+  };
+
   const handleSubmit = (
     <BoxButtonOnFooter>
       <ButtonCustom
+        disabled={!value}
         backgroundColor={MainColor.red}
         textColor={MainColor.white}
         onPress={() => {
-          console.log("Report lainnya");
-          router.back();
+          handlerSubmitReport();
         }}
       >
         Report
@@ -25,7 +62,11 @@ export default function ForumOtherReportPosting() {
   return (
     <>
       <ViewWrapper footerComponent={handleSubmit}>
-        <TextAreaCustom placeholder="Laporkan Diskusi" />
+        <TextAreaCustom
+          placeholder="Laporkan Diskusi"
+          value={value}
+          onChangeText={setValue}
+        />
       </ViewWrapper>
     </>
   );

app/(application)/(user)/forum/[id]/report-commentar.tsx

@@ -1,41 +1,105 @@
 import {
-    ButtonCustom,
-    Spacing,
-    StackCustom,
-    ViewWrapper
+  ButtonCustom,
+  LoaderCustom,
+  Spacing,
+  StackCustom,
+  ViewWrapper,
 } from "@/components";
 import { AccentColor, MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
 import Forum_ReportListSection from "@/screens/Forum/ReportListSection";
-import { router } from "expo-router";
+import { apiForumCreateReportCommentar, apiMasterForumReportList } from "@/service/api-client/api-master";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState, useEffect } from "react";
+import Toast from "react-native-toast-message";
 
 export default function ForumReportCommentar() {
+  const { id } = useLocalSearchParams();
+  const { user } = useAuth();
+  const [selectReport, setSelectReport] = useState<string>("");
+  const [listMaster, setListMaster] = useState<any[] | null>(null);
+  const [isLoadingList, setIsLoadingList] = useState(false);
+
+  useEffect(() => {
+    onLoadListMaster();
+  }, []);
+
+  const onLoadListMaster = async () => {
+    try {
+      setIsLoadingList(true);
+      const response = await apiMasterForumReportList();
+
+      setListMaster(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadingList(false);
+    }
+  };
+
+  const handlerReport = async () => {
+    const newData = {
+      authorId: user?.id,
+      categoryId: selectReport,
+    };
+
+    try {
+      const response = await apiForumCreateReportCommentar({
+        id: id as string,
+        data: newData,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Laporan berhasil dikirim",
+        });
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: "Laporan gagal dikirim",
+      });
+    }
+  };
+
   return (
     <>
       <ViewWrapper>
-        <StackCustom>
-          <Forum_ReportListSection />
-          <ButtonCustom
-            backgroundColor={MainColor.red}
-            textColor={MainColor.white}
-            onPress={() => {
-              console.log("Report");
-              router.back();
-            }}
-          >
-            Report
-          </ButtonCustom>
-          <ButtonCustom
-            backgroundColor={AccentColor.blue}
-            textColor={MainColor.white}
-            onPress={() => {
-              console.log("Lainnya");
-              router.replace("/forum/[id]/other-report-commentar");
-            }}
-          >
-            Lainnya
-          </ButtonCustom>
-          <Spacing/>
-        </StackCustom>
+        {isLoadingList ? (
+          <LoaderCustom />
+        ) : (
+          <StackCustom>
+            <Forum_ReportListSection
+              listMaster={listMaster}
+              selectReport={selectReport}
+              setSelectReport={setSelectReport}
+            />
+            <ButtonCustom
+              disabled={!selectReport}
+              backgroundColor={MainColor.red}
+              textColor={MainColor.white}
+              onPress={() => {
+                handlerReport();
+              }}
+            >
+              Report
+            </ButtonCustom>
+            <ButtonCustom
+              backgroundColor={AccentColor.blue}
+              textColor={MainColor.white}
+              onPress={() => {
+                router.replace(`/forum/${id}/other-report-commentar`);
+              }}
+            >
+              Lainnya
+            </ButtonCustom>
+            <Spacing />
+          </StackCustom>
+        )}
       </ViewWrapper>
     </>
   );

app/(application)/(user)/forum/[id]/report-posting.tsx

@@ -1,20 +1,103 @@
-import { ViewWrapper, StackCustom, ButtonCustom, Spacing } from "@/components";
-import { MainColor, AccentColor } from "@/constants/color-palet";
+import {
+  AlertDefaultSystem,
+  ButtonCustom,
+  LoaderCustom,
+  Spacing,
+  StackCustom,
+  ViewWrapper,
+} from "@/components";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
 import Forum_ReportListSection from "@/screens/Forum/ReportListSection";
-import { router } from "expo-router";
+import {
+  apiForumCreateReportPosting,
+  apiMasterForumReportList,
+} from "@/service/api-client/api-master";
+import { router, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function ForumReportPosting() {
-    return (
-      <>
-        <ViewWrapper>
+  const { id } = useLocalSearchParams();
+  const { user } = useAuth();
+  const [selectReport, setSelectReport] = useState<string>("");
+  const [listMaster, setListMaster] = useState<any[] | null>(null);
+  const [isLoadingList, setIsLoadingList] = useState(false);
+
+  useEffect(() => {
+    onLoadListMaster();
+  }, []);
+
+  const onLoadListMaster = async () => {
+    try {
+      setIsLoadingList(true);
+      const response = await apiMasterForumReportList();
+
+      setListMaster(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadingList(false);
+    }
+  };
+
+  const handlerReport = async () => {
+    const newData = {
+      authorId: user?.id,
+      categoryId: selectReport,
+    };
+
+    try {
+      const response = await apiForumCreateReportPosting({
+        id: id as string,
+        data: newData,
+      });
+
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Laporan berhasil dikirim",
+        });
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: "Laporan gagal dikirim",
+      });
+    }
+  };
+
+  return (
+    <>
+      <ViewWrapper>
+        {isLoadingList ? (
+          <LoaderCustom />
+        ) : (
           <StackCustom>
-            <Forum_ReportListSection />
+            <Forum_ReportListSection
+              listMaster={listMaster}
+              selectReport={selectReport}
+              setSelectReport={setSelectReport}
+            />
+
             <ButtonCustom
+              disabled={!selectReport}
               backgroundColor={MainColor.red}
               textColor={MainColor.white}
               onPress={() => {
-                console.log("Report");
-                router.back();
+                AlertDefaultSystem({
+                  title: "Laporan Posting",
+                  message: "Apakah anda yakin ingin melaporkan postingan ini?",
+                  textLeft: "Batal",
+                  textRight: "Laporkan",
+                  onPressRight: () => {
+                    handlerReport();
+                  },
+                });
               }}
             >
               Report
@@ -23,15 +106,15 @@ export default function ForumReportPosting() {
               backgroundColor={AccentColor.blue}
               textColor={MainColor.white}
               onPress={() => {
-                console.log("Lainnya");
-                router.replace("/forum/[id]/other-report-posting");
+                router.replace(`/forum/${id}/other-report-posting`);
               }}
             >
               Lainnya
             </ButtonCustom>
             <Spacing />
           </StackCustom>
-        </ViewWrapper>
-      </>
-    );
-}
+        )}
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -4,18 +4,47 @@ import {
   TextAreaCustom,
   ViewWrapper,
 } from "@/components";
+import { useAuth } from "@/hooks/use-auth";
+import { apiForumCreate } from "@/service/api-client/api-forum";
 import { router } from "expo-router";
 import { useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function ForumCreate() {
+  const { user } = useAuth();
   const [text, setText] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handlerSubmit = async () => {
+    const newData = {
+      diskusi: text,
+      authorId: user?.id,
+    };
+
+    try {
+      setIsLoading(true);
+      const response = await apiForumCreate({ data: newData });
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Posting berhasil",
+        });
+        setText("");
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   const buttonFooter = (
     <BoxButtonOnFooter>
       <ButtonCustom
+        isLoading={isLoading}
         onPress={() => {
-          console.log("Posting", text);
-          router.back();
+          handlerSubmit();
         }}
       >
         Posting

app/(application)/(user)/forum/index.tsx

@@ -1,25 +1,58 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-  AlertCustom,
-  AvatarCustom,
+  AvatarComp,
   BackButton,
   DrawerCustom,
+  LoaderCustom,
   SearchInput,
+  TextCustom,
   ViewWrapper,
 } from "@/components";
 import FloatingButton from "@/components/Button/FloatingButton";
-import { MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
 import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
-import { listDummyDiscussionForum } from "@/screens/Forum/list-data-dummy";
 import Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
-import { router, Stack } from "expo-router";
-import { useState } from "react";
+import { apiForumGetAll } from "@/service/api-client/api-forum";
+import { apiUser } from "@/service/api-client/api-user";
+import { router, Stack, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function Forum() {
-  const id = "test-id-forum";
   const [openDrawer, setOpenDrawer] = useState(false);
   const [status, setStatus] = useState("");
-  const [alertStatus, setAlertStatus] = useState(false);
-  const [deleteAlert, setDeleteAlert] = useState(false);
+  const { user } = useAuth();
+  const [dataUser, setDataUser] = useState<any>();
+  const [listData, setListData] = useState<any[]>();
+  const [loadingGetList, setLoadingGetList] = useState(false);
+  const [search, setSearch] = useState("");
+  const [dataId, setDataId] = useState("");
+  const [authorId, setAuthorId] = useState("");
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+      onLoadDataProfile(user?.id as string);
+    }, [user?.id, search])
+  );
+
+  const onLoadDataProfile = async (id: string) => {
+    const response = await apiUser(id);
+    setDataUser(response.data);
+  };
+
+  const onLoadData = async () => {
+    try {
+      setLoadingGetList(true);
+      const response = await apiForumGetAll({ search: search });
+
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetList(false);
+    }
+  };
 
   return (
     <>
@@ -27,12 +60,23 @@ export default function Forum() {
         options={{
           title: "Forum",
           headerLeft: () => <BackButton />,
-          headerRight: () => <AvatarCustom href={`/forum/${id}/forumku`} />,
+          headerRight: () => (
+            <AvatarComp
+              fileId={dataUser?.Profile?.imageId}
+              size="base"
+              href={`/forum/${user?.id}/forumku`}
+            />
+          ),
         }}
       />
 
       <ViewWrapper
-        headerComponent={<SearchInput placeholder="Cari topik diskusi" />}
+        headerComponent={
+          <SearchInput
+            placeholder="Cari topik diskusi"
+            onChangeText={(e) => setSearch(e)}
+          />
+        }
         floatingButton={
           <FloatingButton
             onPress={() =>
@@ -41,73 +85,45 @@ export default function Forum() {
           />
         }
       >
-        {listDummyDiscussionForum.map((e, i) => (
-          <Forum_BoxDetailSection
-            key={i}
-            data={e}
-            setOpenDrawer={setOpenDrawer}
-            setStatus={setStatus}
-            isTruncate={true}
-            href={`/forum/${id}`}
-          />
-        ))}
+        {loadingGetList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(listData) ? (
+          <TextCustom align="center" color="gray">
+            Tidak ada diskusi
+          </TextCustom>
+        ) : (
+          listData?.map((e: any, i: number) => (
+            <Forum_BoxDetailSection
+              key={i}
+              data={e}
+              onSetData={() => {
+                setDataId(e.id);
+                setOpenDrawer(true);
+                setStatus(e.ForumMaster_StatusPosting?.status);
+                setAuthorId(e.Author?.id);
+              }}
+              isTruncate={true}
+              href={`/forum/${e.id}`}
+              isRightComponent={false}
+            />
+          ))
+        )}
       </ViewWrapper>
 
       <DrawerCustom
-        height={350}
+        height={"auto"}
         isVisible={openDrawer}
         closeDrawer={() => setOpenDrawer(false)}
       >
         <Forum_MenuDrawerBerandaSection
-          id={id}
+          id={dataId}
+          authorId={authorId}
           status={status}
           setIsDrawerOpen={() => {
             setOpenDrawer(false);
           }}
-          setShowDeleteAlert={setDeleteAlert}
-          setShowAlertStatus={setAlertStatus}
         />
       </DrawerCustom>
-
-      {/* Alert Status */}
-      <AlertCustom
-        isVisible={alertStatus}
-        title="Ubah Status Forum"
-        message="Apakah Anda yakin ingin mengubah status forum ini?"
-        onLeftPress={() => {
-          setOpenDrawer(false);
-          setAlertStatus(false);
-          console.log("Batal");
-        }}
-        onRightPress={() => {
-          setOpenDrawer(false);
-          setAlertStatus(false);
-          console.log("Ubah status forum");
-        }}
-        textLeft="Batal"
-        textRight="Ubah"
-        colorRight={MainColor.green}
-      />
-
-      {/* Alert Delete */}
-      <AlertCustom
-        isVisible={deleteAlert}
-        title="Hapus Forum"
-        message="Apakah Anda yakin ingin menghapus forum ini?"
-        onLeftPress={() => {
-          setOpenDrawer(false);
-          setDeleteAlert(false);
-          console.log("Batal");
-        }}
-        onRightPress={() => {
-          setOpenDrawer(false);
-          setDeleteAlert(false);
-          console.log("Hapus forum");
-        }}
-        textLeft="Batal"
-        textRight="Hapus"
-        colorRight={MainColor.red}
-      />
     </>
   );
 }

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)/investment/(tabs)/portofolio.tsx

@@ -1,13 +1,48 @@
-import { ScrollableCustom, ViewWrapper } from "@/components";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  LoaderCustom,
+  ScrollableCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { useAuth } from "@/hooks/use-auth";
 import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
 import Investment_StatusBox from "@/screens/Invesment/StatusBox";
-import { useState } from "react";
+import { apiInvestmentGetByStatus } from "@/service/api-client/api-investment";
+import { useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function InvestmentPortofolio() {
+  const { user } = useAuth();
   const [activeCategory, setActiveCategory] = useState<string | null>(
     "publish"
   );
 
+  const [listData, setListData] = useState<any[]>([]);
+  const [loadingList, setLoadingList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [user?.id, activeCategory])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadingList(true);
+      const response = await apiInvestmentGetByStatus({
+        authorId: user?.id as string,
+        status: activeCategory as string,
+      });
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingList(false);
+    }
+  };
+
   const handlePress = (item: any) => {
     setActiveCategory(item.value);
     // tambahkan logika lain seperti filter dsb.
@@ -26,14 +61,20 @@ export default function InvestmentPortofolio() {
   );
   return (
     <ViewWrapper headerComponent={scrollComponent} hideFooter>
-      {Array.from({ length: 10 }).map((_, index) => (
-        <Investment_StatusBox
-          key={index}
-          id={index.toString()}
-          status={activeCategory as string}
-          href={`/investment/${index}/${activeCategory}/detail`}
-        />
-      ))}
+      {loadingList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Tidak ada data {activeCategory}</TextCustom>
+      ) : (
+        listData.map((item: any, index: number) => (
+          <Investment_StatusBox
+            key={index}
+            data={item}
+            status={activeCategory as string}
+            href={`/investment/${item.id}/${activeCategory}/detail`}
+          />
+        ))
+      )}
     </ViewWrapper>
   );
 }

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

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BackButton,
   DotButton,
@@ -12,16 +13,42 @@ import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
 import Investment_ButtonInvestasiSection from "@/screens/Invesment/ButtonInvestasiSection";
 import Invesment_ComponentBoxOnBottomDetail from "@/screens/Invesment/ComponentBoxOnBottomDetail";
 import Invesment_DetailDataPublishSection from "@/screens/Invesment/DetailDataPublishSection";
+import { apiInvestmentGetById } from "@/service/api-client/api-investment";
 import { AntDesign, MaterialIcons } from "@expo/vector-icons";
-import { router, Stack, useLocalSearchParams } from "expo-router";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
 import _ from "lodash";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 
 export default function InvestmentDetailStatus() {
   const { id, status } = useLocalSearchParams();
   const [openDrawerDraft, setOpenDrawerDraft] = useState(false);
   const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
 
+  const [data, setData] = useState<any>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id, status])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiInvestmentGetById({
+        id: id as string,
+      });
+
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
   const handlePressDraft = (item: IMenuDrawerItem) => {
     console.log("PATH >> ", item.path);
     router.navigate(item.path as any);
@@ -36,7 +63,8 @@ export default function InvestmentDetailStatus() {
 
   const bottomSection = (
     <Invesment_ComponentBoxOnBottomDetail
-      id={id as string}
+      id={data?.id}
+      prospectusId={data?.prospektusFileId}
       status={status as string}
     />
   );
@@ -63,6 +91,7 @@ export default function InvestmentDetailStatus() {
       <ViewWrapper>
         <Invesment_DetailDataPublishSection
           status={status as string}
+          data={data}
           bottomSection={bottomSection}
           buttonSection={buttonSection}
         />

app/(application)/(user)/investment/[id]/edit-prospectus.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BaseBox,
   BoxButtonOnFooter,
@@ -5,38 +6,149 @@ import {
   ButtonCustom,
   CenterCustom,
   InformationBox,
+  LoaderCustom,
   Spacing,
   StackCustom,
+  TextCustom,
   ViewWrapper,
 } from "@/components";
-import { MainColor } from "@/constants/color-palet";
-import { FontAwesome5 } from "@expo/vector-icons";
-import { router } from "expo-router";
+import DIRECTORY_ID from "@/constants/directory-id";
+import {
+  apiInvestmentGetById,
+  apiInvestmentUpdateData,
+} from "@/service/api-client/api-investment";
+import { deleteFileService, uploadFileService } from "@/service/upload-service";
+import pickFile, { IFileData } from "@/utils/pickFile";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function InvestmentEditProspectus() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any>(null);
+  const [loadingGet, setLoadingGet] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [pdf, setPdf] = useState<IFileData | null>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadingGet(true);
+      const response = await apiInvestmentGetById({
+        id: id as string,
+      });
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGet(false);
+    }
+  };
+
+  const handleSubmitUpdate = async () => {
+    const prevProspectusFileId = data?.prospektusFileId;
+    try {
+      setIsLoading(true);
+
+      const responseUploadImage = await uploadFileService({
+        imageUri: pdf?.uri as any,
+        dirId: DIRECTORY_ID.investasi_prospektus,
+      });
+
+      if (!responseUploadImage.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengunggah gambar",
+        });
+        return;
+      }
+      const prospektusFileId = responseUploadImage.data.id;
+
+      const responseUpdate = await apiInvestmentUpdateData({
+        id: id as string,
+        data: prospektusFileId,
+        category: "prospectus",
+      });
+
+      if (responseUpdate.success) {
+        const deletePrevImage = await deleteFileService({
+          id: prevProspectusFileId as any,
+        });
+
+        if (!deletePrevImage.success) {
+          console.log("[ERROR DELETE PREV IMAGE]", deletePrevImage.message);
+          return;
+        }
+
+        Toast.show({
+          type: "success",
+          text1: "Data berhasil diupdate",
+        });
+        router.back();
+      } else {
+        Toast.show({
+          type: "error",
+          text1: responseUpdate.message,
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const buttonFooter = (
     <BoxButtonOnFooter>
-      <ButtonCustom onPress={() => router.back()}>Update</ButtonCustom>
+      <ButtonCustom
+        disabled={pdf === null}
+        isLoading={isLoading}
+        onPress={handleSubmitUpdate}
+      >
+        Update
+      </ButtonCustom>
     </BoxButtonOnFooter>
   );
   return (
-    <ViewWrapper footerComponent={buttonFooter}>
+    <ViewWrapper footerComponent={!loadingGet && buttonFooter}>
       <StackCustom gap={"xs"}>
         <InformationBox text="File prospektus wajib untuk diupload, agar calon investor paham dengan prospek investasi yang akan anda jalankan kedepan." />
         <Spacing />
 
         <BaseBox>
           <CenterCustom>
-            <FontAwesome5
-              name="file-pdf"
-              size={30}
-              color={MainColor.disabled}
-            />
+            {loadingGet ? (
+              <LoaderCustom />
+            ) : pdf ? (
+              <TextCustom truncate>{pdf.name}</TextCustom>
+            ) : (
+              <TextCustom truncate>
+                {_.snakeCase(data?.title || "").replace(/_/g, "-")}.pdf
+              </TextCustom>
+            )}
           </CenterCustom>
         </BaseBox>
         <ButtonCenteredOnly
+          disabled={loadingGet}
           icon="upload"
-          onPress={() => router.push("/(application)/(image)/take-picture/123")}
+          onPress={() => {
+            pickFile({
+              allowedType: "pdf",
+              setPdfUri(file: any) {
+                setPdf({
+                  uri: file.uri,
+                  name: file.name,
+                  size: file.size,
+                });
+              },
+            });
+          }}
         >
           Upload
         </ButtonCenteredOnly>

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

@@ -1,40 +1,224 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   ButtonCenteredOnly,
   ButtonCustom,
   InformationBox,
   LandscapeFrameUploaded,
+  LoaderCustom,
   SelectCustom,
   Spacing,
   StackCustom,
   TextInputCustom,
-  ViewWrapper
+  ViewWrapper,
 } from "@/components";
-import dummyPembagianDeviden from "@/lib/dummy-data/investment/pembagian-deviden";
-import dummyListPencarianInvestor from "@/lib/dummy-data/investment/pencarian-investor";
-import dummyPeriodeDeviden from "@/lib/dummy-data/investment/periode-deviden";
-import { router } from "expo-router";
-import { useState } from "react";
+import API_STRORAGE from "@/constants/base-url-api-strorage";
+import DIRECTORY_ID from "@/constants/directory-id";
+import {
+  apiInvestmentGetById,
+  apiInvestmentUpdateData,
+} from "@/service/api-client/api-investment";
+import { apiMasterInvestment } from "@/service/api-client/api-master";
+import {
+  deleteFileService,
+  uploadFileService,
+} from "@/service/upload-service";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import pickFile from "@/utils/pickFile";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
+
+interface IInvestment {
+  title?: string;
+  targetDana?: string;
+  hargaLembar?: string;
+  totalLembar?: string;
+  roi?: string;
+  masterPencarianInvestorId?: string;
+  masterPeriodeDevidenId?: string;
+  masterPembagianDevidenId?: string;
+  authorId?: string;
+  imageId?: string;
+  prospektusFileId?: string;
+}
 
 export default function InvestmentEdit() {
-  const [data, setData] = useState({
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<IInvestment>({
     title: "",
-    targetDana: 0,
-    hargaPerLembar: 0,
-    totalLembar: 0,
-    rasioKeuntungan: 0,
-    pencarianInvestor: "",
-    periodeDeviden: "",
-    pembagianDeviden: "",
+    targetDana: "",
+    hargaLembar: "",
+    totalLembar: "",
+    roi: "",
+    masterPencarianInvestorId: "",
+    masterPeriodeDevidenId: "",
+    masterPembagianDevidenId: "",
+    authorId: "",
+    imageId: "",
+    prospektusFileId: "",
   });
 
+  const [image, setImage] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [loadingMaster, setLoadingMaster] = useState(false);
+  const [listPencarianInvestor, setListPencarianInvestor] = useState<any[]>([]);
+  const [listPeriodeDeviden, setListPeriodeDeviden] = useState<any[]>([]);
+  const [listPembagianDeviden, setListPembagianDeviden] = useState<any[]>([]);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadMaster();
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadMaster = async () => {
+    try {
+      setLoadingMaster(true);
+      const response = await apiMasterInvestment({ category: "" });
+
+      setListPencarianInvestor(response.data.pencarianInvestor);
+      setListPeriodeDeviden(response.data.periodeDeviden);
+      setListPembagianDeviden(response.data.pembagianDeviden);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingMaster(false);
+    }
+  };
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiInvestmentGetById({
+        id: id as string,
+      });
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const displayTargetDana = formatCurrencyDisplay(data?.targetDana);
+  const displayHargaPerLembar = formatCurrencyDisplay(data?.hargaLembar);
+  const displayTotalLembar = formatCurrencyDisplay(
+    Number(data?.targetDana) / Number(data?.hargaLembar)
+  );
+
+  const handleChangeCurrency = (field: keyof typeof data) => (text: string) => {
+    const numeric = text.replace(/\D/g, "");
+    setData((prev) => ({ ...prev, [field]: numeric }));
+  };
+
+  const validateData = () => {
+    if (
+      !data.title ||
+      !data.targetDana ||
+      !data.hargaLembar ||
+      !data.totalLembar ||
+      !data.roi ||
+      !data.masterPencarianInvestorId ||
+      !data.masterPeriodeDevidenId ||
+      !data.masterPembagianDevidenId
+    ) {
+      Toast.show({
+        type: "info",
+        text1: "Harap isi semua data",
+      });
+      return false;
+    }
+
+    return true;
+  };
+
+  const handleSubmitUpdate = async () => {
+    let newData = {
+      ...data,
+    };
+
+    if (!validateData()) {
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+
+      if (image) {
+        const responseUploadImage = await uploadFileService({
+          imageUri: image,
+          dirId: DIRECTORY_ID.investasi_image,
+        });
+
+        if (!responseUploadImage.success) {
+          Toast.show({
+            type: "error",
+            text1: "Gagal mengunggah gambar",
+          });
+          return;
+        }
+
+        const deletePrevImage = await deleteFileService({
+          id: data?.imageId as any,
+        });
+
+        if (!deletePrevImage.success) {
+          Toast.show({
+            type: "error",
+            text1: "Gagal menghapus gambar",
+          });
+          return;
+        }
+
+        newData = {
+          ...newData,
+          imageId: responseUploadImage.data.id,
+        };
+      }
+
+      const responseUpdate = await apiInvestmentUpdateData({
+        id: id as string,
+        data: newData,
+        category: "data"
+      });
+
+      if (responseUpdate.success) {
+        Toast.show({
+          type: "success",
+          text1: "Data berhasil diupdate",
+        });
+        router.back();
+      } else {
+        Toast.show({
+          type: "error",
+          text1: responseUpdate.message,
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Gambar investasi bisa berupa ilustrasi, poster atau foto terkait investasi." />
-        <LandscapeFrameUploaded />
+        <LandscapeFrameUploaded
+          image={
+            image ? image : API_STRORAGE.GET({ fileId: data?.imageId as any })
+          }
+        />
         <ButtonCenteredOnly
           icon="upload"
-          onPress={() => router.push("/take-picture/1")}
+          onPress={() => {
+            pickFile({
+              setImageUri: ({ uri }) => {
+                setImage(uri);
+              },
+              allowedType: "image",
+            });
+          }}
         >
           Upload
         </ButtonCenteredOnly>
@@ -47,7 +231,7 @@ export default function InvestmentEdit() {
           required
           placeholder="Judul"
           label="Judul"
-          value={data.title}
+          value={data?.title}
           onChangeText={(value) => setData({ ...data, title: value })}
         />
 
@@ -57,22 +241,8 @@ export default function InvestmentEdit() {
           placeholder="0"
           label="Target Dana"
           keyboardType="numeric"
-          onChangeText={(value) =>
-            setData({ ...data, targetDana: Number(value) })
-          }
-          value={data.targetDana === 0 ? "" : data.targetDana.toString()}
-        />
-
-        <TextInputCustom
-          required
-          iconLeft="Rp."
-          placeholder="0"
-          label="Target Dana"
-          keyboardType="numeric"
-          onChangeText={(value) =>
-            setData({ ...data, targetDana: Number(value) })
-          }
-          value={data.targetDana === 0 ? "" : data.targetDana.toString()}
+          onChangeText={handleChangeCurrency("targetDana")}
+          value={displayTargetDana}
         />
 
         <TextInputCustom
@@ -81,10 +251,8 @@ export default function InvestmentEdit() {
           placeholder="0"
           label="Harga Per Lembar"
           keyboardType="numeric"
-          onChangeText={(value) =>
-            setData({ ...data, targetDana: Number(value) })
-          }
-          value={data.targetDana === 0 ? "" : data.targetDana.toString()}
+          onChangeText={handleChangeCurrency("hargaLembar")}
+          value={displayHargaPerLembar}
         />
 
         <TextInputCustom
@@ -92,10 +260,8 @@ export default function InvestmentEdit() {
           placeholder="0"
           label="Total Lembar"
           keyboardType="numeric"
-          onChangeText={(value) =>
-            setData({ ...data, totalLembar: Number(value) })
-          }
-          value={data.totalLembar === 0 ? "" : data.totalLembar.toString()}
+          onChangeText={(value) => setData({ ...data, totalLembar: value })}
+          value={displayTotalLembar}
         />
 
         <TextInputCustom
@@ -104,57 +270,78 @@ export default function InvestmentEdit() {
           label="Rasio Keuntungan / ROI %"
           placeholder="0"
           keyboardType="numeric"
-          onChangeText={(value) =>
-            setData({ ...data, rasioKeuntungan: Number(value) })
-          }
-          value={
-            data.rasioKeuntungan === 0 ? "" : data.rasioKeuntungan.toString()
-          }
+          onChangeText={(value) => setData({ ...data, roi: value })}
+          value={data?.roi === "" ? "" : data?.roi}
         />
 
-        <SelectCustom
-          required
-          placeholder="Pilih batas waktu"
-          label="Pencarian Investor"
-          data={dummyListPencarianInvestor.map((item) => ({
-            label: item.name + `${" "}hari`,
-            value: item.id,
-          }))}
-          onChange={(value) =>
-            setData({ ...data, pencarianInvestor: value as any })
-          }
-          value={data.pencarianInvestor}
-        />
+        {loadingMaster ? (
+          <LoaderCustom />
+        ) : (
+          <SelectCustom
+            required
+            placeholder="Pilih batas waktu"
+            label="Pencarian Investor"
+            data={
+              _.isEmpty(listPencarianInvestor)
+                ? []
+                : listPencarianInvestor.map((item) => ({
+                    label: item.name + `${" "}hari`,
+                    value: item.id,
+                  }))
+            }
+            onChange={(value) =>
+              setData({ ...data, masterPencarianInvestorId: value as any })
+            }
+            value={data.masterPencarianInvestorId}
+          />
+        )}
 
-        <SelectCustom
-          required
-          placeholder="Pilih batas waktu"
-          label="Pilih Periode Deviden"
-          data={dummyPeriodeDeviden.map((item) => ({
-            label: item.name,
-            value: item.id,
-          }))}
-          onChange={(value) =>
-            setData({ ...data, periodeDeviden: value as any })
-          }
-          value={data.periodeDeviden}
-        />
+        {loadingMaster ? (
+          <LoaderCustom />
+        ) : (
+          <SelectCustom
+            required
+            placeholder="Pilih batas waktu"
+            label="Pilih Periode Deviden"
+            data={
+              _.isEmpty(listPeriodeDeviden)
+                ? []
+                : listPeriodeDeviden.map((item) => ({
+                    label: item.name,
+                    value: item.id,
+                  }))
+            }
+            onChange={(value) =>
+              setData({ ...data, masterPeriodeDevidenId: value as any })
+            }
+            value={data.masterPeriodeDevidenId}
+          />
+        )}
+
+        {loadingMaster ? (
+          <LoaderCustom />
+        ) : (
+          <SelectCustom
+            required
+            placeholder="Pilih batas waktu"
+            label="Pilih Pembagian Deviden"
+            data={
+              _.isEmpty(listPembagianDeviden)
+                ? []
+                : listPembagianDeviden.map((item) => ({
+                    label: item.name + `${" "}bulan`,
+                    value: item.id,
+                  }))
+            }
+            onChange={(value) =>
+              setData({ ...data, masterPembagianDevidenId: value as any })
+            }
+            value={data.masterPembagianDevidenId}
+          />
+        )}
 
-        <SelectCustom
-          required
-          placeholder="Pilih batas waktu"
-          label="Pilih Pembagian Deviden"
-          data={dummyPembagianDeviden.map((item) => ({
-            label: item.name + `${" "}bulan`,
-            value: item.id,
-          }))}
-          onChange={(value) =>
-            setData({ ...data, pembagianDeviden: value as any })
-          }
-          value={data.pembagianDeviden}
-        />
         <Spacing />
-        <ButtonCustom onPress={() => router.replace("/investment/portofolio")}>
+        <ButtonCustom isLoading={isLoading} onPress={handleSubmitUpdate}>
           Simpan
         </ButtonCustom>
       </StackCustom>

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

@@ -1,76 +1,236 @@
 import {
-    BaseBox,
-    ButtonCenteredOnly,
-    ButtonCustom,
-    CenterCustom,
-    InformationBox,
-    LandscapeFrameUploaded,
-    SelectCustom,
-    Spacing,
-    StackCustom,
-    TextInputCustom,
-    ViewWrapper,
+  BaseBox,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  CenterCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  LoaderCustom,
+  SelectCustom,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
-import dummyPembagianDeviden from "@/lib/dummy-data/investment/pembagian-deviden";
-import dummyListPencarianInvestor from "@/lib/dummy-data/investment/pencarian-investor";
-import dummyPeriodeDeviden from "@/lib/dummy-data/investment/periode-deviden";
+import DIRECTORY_ID from "@/constants/directory-id";
+import { useAuth } from "@/hooks/use-auth";
+import { apiInvestmentCreate } from "@/service/api-client/api-investment";
+import { apiMasterInvestment } from "@/service/api-client/api-master";
+import { uploadFileService } from "@/service/upload-service";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import pickFile, { IFileData } from "@/utils/pickFile";
 import { FontAwesome5 } from "@expo/vector-icons";
-import { router } from "expo-router";
-import { useState } from "react";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function InvestmentCreate() {
+  const { user } = useAuth();
   const [data, setData] = useState({
     title: "",
-    targetDana: 0,
-    hargaPerLembar: 0,
-    totalLembar: 0,
-    rasioKeuntungan: 0,
+    targetDana: "",
+    hargaPerLembar: "",
+    totalLembar: "",
+    rasioKeuntungan: "",
     pencarianInvestor: "",
     periodeDeviden: "",
     pembagianDeviden: "",
+    authorId: "",
+    imageId: "",
+    prospektusFileId: "",
   });
+  const [image, setImage] = useState<string | null>(null);
+  const [pdf, setPdf] = useState<IFileData | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
 
-//   const [coba, setCoba] = useState(""); 
+  const [loadingMaster, setLoadingMaster] = useState(false);
+  const [listPencarianInvestor, setListPencarianInvestor] = useState<any[]>([]);
+  const [listPeriodeDeviden, setListPeriodeDeviden] = useState<any[]>([]);
+  const [listPembagianDeviden, setListPembagianDeviden] = useState<any[]>([]);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadMaster();
+    }, [])
+  );
+
+  const onLoadMaster = async () => {
+    try {
+      setLoadingMaster(true);
+      const response = await apiMasterInvestment({ category: "" });
+
+      setListPencarianInvestor(response.data.pencarianInvestor);
+      setListPeriodeDeviden(response.data.periodeDeviden);
+      setListPembagianDeviden(response.data.pembagianDeviden);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingMaster(false);
+    }
+  };
+
+  const displayTargetDana = formatCurrencyDisplay(data.targetDana);
+  const displayHargaPerLembar = formatCurrencyDisplay(data.hargaPerLembar);
+  const displayTotalLembar = formatCurrencyDisplay(
+    Number(data.targetDana) / Number(data.hargaPerLembar)
+  );
+
+  const handleChangeCurrency = (field: keyof typeof data) => (text: string) => {
+    const numeric = text.replace(/\D/g, "");
+    setData((prev) => ({ ...prev, [field]: numeric }));
+  };
+
+  const validateData = () => {
+    if (
+      !data.title ||
+      !data.targetDana ||
+      !data.hargaPerLembar ||
+      !data.rasioKeuntungan ||
+      !data.pencarianInvestor ||
+      !data.periodeDeviden ||
+      !data.pembagianDeviden
+    ) {
+      Toast.show({
+        type: "error",
+        text1: "Harap isi semua data",
+      });
+      return false;
+    }
+
+    return true;
+  };
+
+  const handleSubmit = async () => {
+    if (!validateData()) {
+      return;
+    }
+
+    if (!image || !pdf) {
+      Toast.show({
+        type: "error",
+        text1: "Harap upload gambar dan file PDF",
+      });
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      const responseUploadImage = await uploadFileService({
+        imageUri: image,
+        dirId: DIRECTORY_ID.investasi_image,
+      });
+
+      if (!responseUploadImage.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengunggah gambar",
+        });
+        return;
+      }
+
+      const imageId = responseUploadImage.data.id;
+      const responseUploadPdf = await uploadFileService({
+        imageUri: pdf.uri,
+        dirId: DIRECTORY_ID.investasi_prospektus,
+      });
+
+      if (!responseUploadPdf.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengunggah file PDF",
+        });
+        return;
+      }
+
+      const pdfId = responseUploadPdf.data.id;
+      const newData = {
+        title: data.title,
+        targetDana: data.targetDana,
+        hargaLembar: data.hargaPerLembar,
+        totalLembar: displayTotalLembar,
+        roi: data.rasioKeuntungan,
+        masterPencarianInvestorId: data.pencarianInvestor,
+        masterPembagianDevidenId: data.pembagianDeviden,
+        masterPeriodeDevidenId: data.periodeDeviden,
+        authorId: user?.id,
+        imageId: imageId,
+        prospektusFileId: pdfId,
+      };
+
+      const response = await apiInvestmentCreate({ data: newData });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Berhasil",
+          text2: response.message,
+        });
+        router.replace("/investment/portofolio");
+      } else {
+        Toast.show({
+          type: "error",
+          text1: "Info",
+          text2: response.message,
+        });
+      }
+    } catch (error) {
+      console.log("error", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  //   const [coba, setCoba] = useState("");
   return (
     <ViewWrapper>
       <StackCustom gap={"xs"}>
-        {/* <View style={GStyles.inputContainerInput}>
-          <TextInput
-            style={{
-              ...GStyles.inputText,
-            }}
-            onChangeText={(value) => setCoba(value)}
-            value={coba}
-            keyboardType="decimal-pad"
-          />
-        </View> */}
-
         <InformationBox text="Gambar investasi bisa berupa ilustrasi, poster atau foto terkait investasi." />
-        <LandscapeFrameUploaded />
+        <LandscapeFrameUploaded image={image as string} />
         <ButtonCenteredOnly
           icon="upload"
-          onPress={() => router.push("/take-picture/1")}
+          onPress={() => {
+            pickFile({
+              setImageUri: ({ uri }) => {
+                setImage(uri);
+              },
+              allowedType: "image",
+            });
+          }}
         >
           Upload
         </ButtonCenteredOnly>
 
         <Spacing />
 
-        <InformationBox text="File prospektus wajib untuk diupload, agar calon investor paham dengan prospek investasi yang akan anda jalankan kedepannya." />
+        <InformationBox text="File prospektus wajib untuk diupload, agar calon investor paham dengan prospek investasi yang akan anda jalankan kedepannya. Gunakan format PDF." />
 
         <BaseBox>
           <CenterCustom>
-            <FontAwesome5
-              name="file-pdf"
-              size={30}
-              color={MainColor.disabled}
-            />
+            {pdf ? (
+              <TextCustom>{pdf.name}</TextCustom>
+            ) : (
+              <FontAwesome5
+                name="file-pdf"
+                size={30}
+                color={MainColor.disabled}
+              />
+            )}
           </CenterCustom>
         </BaseBox>
         <ButtonCenteredOnly
           icon="upload"
-          onPress={() => router.push("/take-picture/1")}
+          onPress={() => {
+            pickFile({
+              setPdfUri: ({ uri, name, size }) => {
+
+                setPdf({ uri, name, size });
+              },
+              allowedType: "pdf",
+            });
+          }}
         >
           Upload File
         </ButtonCenteredOnly>
@@ -90,22 +250,8 @@ export default function InvestmentCreate() {
           placeholder="0"
           label="Target Dana"
           keyboardType="numeric"
-          onChangeText={(value) =>
-            setData({ ...data, targetDana: Number(value) })
-          }
-          value={data.targetDana === 0 ? "" : data.targetDana.toString()}
-        />
-
-        <TextInputCustom
-          required
-          iconLeft="Rp."
-          placeholder="0"
-          label="Target Dana"
-          keyboardType="numeric"
-          onChangeText={(value) =>
-            setData({ ...data, targetDana: Number(value) })
-          }
-          value={data.targetDana === 0 ? "" : data.targetDana.toString()}
+          onChangeText={handleChangeCurrency("targetDana")}
+          value={displayTargetDana}
         />
 
         <TextInputCustom
@@ -114,22 +260,24 @@ export default function InvestmentCreate() {
           placeholder="0"
           label="Harga Per Lembar"
           keyboardType="numeric"
-          onChangeText={(value) =>
-            setData({ ...data, targetDana: Number(value) })
-          }
-          value={data.targetDana === 0 ? "" : data.targetDana.toString()}
+          onChangeText={handleChangeCurrency("hargaPerLembar")}
+          value={displayHargaPerLembar}
         />
 
-        <TextInputCustom
-          required
-          placeholder="0"
-          label="Total Lembar"
-          keyboardType="numeric"
-          onChangeText={(value) =>
-            setData({ ...data, totalLembar: Number(value) })
-          }
-          value={data.totalLembar === 0 ? "" : data.totalLembar.toString()}
-        />
+        <StackCustom gap={0}>
+          <TextInputCustom
+            required
+            placeholder="0"
+            label="Total Lembar"
+            keyboardType="numeric"
+            // onChangeText={handleChangeCurrency("totalLembar")}
+            value={displayTotalLembar}
+          />
+          <TextCustom size={"small"} color="gray">
+            *Total lembar dihitung dari, Target Dana / Harga Perlembar
+          </TextCustom>
+        </StackCustom>
+        <Spacing />
 
         <TextInputCustom
           required
@@ -137,57 +285,80 @@ export default function InvestmentCreate() {
           label="Rasio Keuntungan / ROI %"
           placeholder="0"
           keyboardType="numeric"
-          onChangeText={(value) =>
-            setData({ ...data, rasioKeuntungan: Number(value) })
-          }
+          onChangeText={(value) => setData({ ...data, rasioKeuntungan: value })}
           value={
-            data.rasioKeuntungan === 0 ? "" : data.rasioKeuntungan.toString()
+            data.rasioKeuntungan === "" ? "" : data.rasioKeuntungan.toString()
           }
         />
 
-        <SelectCustom
-          required
-          placeholder="Pilih batas waktu"
-          label="Pencarian Investor"
-          data={dummyListPencarianInvestor.map((item) => ({
-            label: item.name + `${" "}hari`,
-            value: item.id,
-          }))}
-          onChange={(value) =>
-            setData({ ...data, pencarianInvestor: value as any })
-          }
-          value={data.pencarianInvestor}
-        />
+        {loadingMaster ? (
+          <LoaderCustom />
+        ) : (
+          <SelectCustom
+            required
+            placeholder="Pilih batas waktu"
+            label="Pencarian Investor"
+            data={
+              _.isEmpty(listPencarianInvestor)
+                ? []
+                : listPencarianInvestor.map((item) => ({
+                    label: item.name + `${" "}hari`,
+                    value: item.id,
+                  }))
+            }
+            onChange={(value) =>
+              setData({ ...data, pencarianInvestor: value as any })
+            }
+            value={data.pencarianInvestor}
+          />
+        )}
 
-        <SelectCustom
-          required
-          placeholder="Pilih batas waktu"
-          label="Pilih Periode Deviden"
-          data={dummyPeriodeDeviden.map((item) => ({
-            label: item.name,
-            value: item.id,
-          }))}
-          onChange={(value) =>
-            setData({ ...data, periodeDeviden: value as any })
-          }
-          value={data.periodeDeviden}
-        />
+        {loadingMaster ? (
+          <LoaderCustom />
+        ) : (
+          <SelectCustom
+            required
+            placeholder="Pilih batas waktu"
+            label="Pilih Periode Deviden"
+            data={
+              _.isEmpty(listPeriodeDeviden)
+                ? []
+                : listPeriodeDeviden.map((item) => ({
+                    label: item.name,
+                    value: item.id,
+                  }))
+            }
+            onChange={(value) =>
+              setData({ ...data, periodeDeviden: value as any })
+            }
+            value={data.periodeDeviden}
+          />
+        )}
+
+        {loadingMaster ? (
+          <LoaderCustom />
+        ) : (
+          <SelectCustom
+            required
+            placeholder="Pilih batas waktu"
+            label="Pilih Pembagian Deviden"
+            data={
+              _.isEmpty(listPembagianDeviden)
+                ? []
+                : listPembagianDeviden.map((item) => ({
+                    label: item.name + `${" "}bulan`,
+                    value: item.id,
+                  }))
+            }
+            onChange={(value) =>
+              setData({ ...data, pembagianDeviden: value as any })
+            }
+            value={data.pembagianDeviden}
+          />
+        )}
 
-        <SelectCustom
-          required
-          placeholder="Pilih batas waktu"
-          label="Pilih Pembagian Deviden"
-          data={dummyPembagianDeviden.map((item) => ({
-            label: item.name + `${" "}bulan`,
-            value: item.id,
-          }))}
-          onChange={(value) =>
-            setData({ ...data, pembagianDeviden: value as any })
-          }
-          value={data.pembagianDeviden}
-        />
         <Spacing />
-        <ButtonCustom onPress={() => router.replace("/investment/portofolio")}>
+        <ButtonCustom isLoading={isLoading} onPress={() => handleSubmit()}>
           Simpan
         </ButtonCustom>
       </StackCustom>

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

@@ -1,16 +1,57 @@
-import { BaseBox, TextCustom, ViewWrapper } from "@/components";
-import { jobDataDummy } from "@/screens/Job/listDataDummy";
+/* eslint-disable react-hooks/exhaustive-deps */
+import { BaseBox, LoaderCustom, TextCustom, ViewWrapper } from "@/components";
+import { useAuth } from "@/hooks/use-auth";
+import { apiJobGetAll } from "@/service/api-client/api-job";
+import { useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function JobArchive() {
+  const { user } = useAuth();
+  const [listData, setListData] = useState<any[]>([]);
+  const [isLoadData, setIsLoadData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [user?.id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setIsLoadData(true);
+      const response = await apiJobGetAll({
+        category: "archive",
+        authorId: user?.id,
+      });
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadData(false);
+    }
+  };
+
   return (
     <ViewWrapper hideFooter>
-      {jobDataDummy.map((e, i) => (
-        <BaseBox key={i} paddingTop={20} paddingBottom={20}>
-          <TextCustom align="center" bold truncate size="large">
-            {e.posisi}
-          </TextCustom>
-        </BaseBox>
-      ))}
+      {isLoadData ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Anda tidak memiliki arsip</TextCustom>
+      ) : (
+        listData.map((item, index) => (
+          <BaseBox
+            key={index}
+            paddingTop={20}
+            paddingBottom={20}
+            href={`/job/${item.id}/archive`}
+          >
+            <TextCustom align="center" bold truncate size="large">
+              {item?.title || "-"}
+            </TextCustom>
+          </BaseBox>
+        ))
+      )}
     </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, category: "beranda" });
+      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,23 @@ 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}
+                isArchive={true}
+              />
+            </StackCustom>
+            <Spacing />
+          </>
+        )}
       </ViewWrapper>
 
       <DrawerCustom

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

@@ -0,0 +1,100 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  ButtonCustom,
+  LoaderCustom,
+  Spacing,
+  StackCustom,
+  ViewWrapper,
+} from "@/components";
+import Job_BoxDetailSection from "@/screens/Job/BoxDetailSection";
+import { apiJobGetOne, apiJobUpdateData } from "@/service/api-client/api-job";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
+
+export default function JobDetailArchive() {
+  const { id } = useLocalSearchParams();
+  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 handleArchive = async () => {
+    try {
+      setIsLoading(true);
+      const response = await apiJobUpdateData({
+        id: id as string,
+        data: false,
+        category: "archive",
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: response.message,
+        });
+        router.back();
+      } else {
+        Toast.show({
+          type: "info",
+          text1: "Info",
+          text2: response.message,
+        });
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      {isLoadData ? (
+        <LoaderCustom />
+      ) : (
+        <ViewWrapper>
+          <>
+            <StackCustom>
+              <Job_BoxDetailSection data={data} />
+              <ButtonCustom
+                isLoading={isLoading}
+                onPress={() => {
+                  handleArchive();
+                }}
+              >
+                Publish kembali
+              </ButtonCustom>
+              {/* <Job_ButtonStatusSection
+                id={id as string}
+                status={status as string}
+                isLoading={isLoading}
+                onSetLoading={setIsLoading}
+                isArchive={true}
+              /> */}
+            </StackCustom>
+            <Spacing />
+          </>
+        </ViewWrapper>
+      )}
+    </>
+  );
+}

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

@@ -1,21 +1,133 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-  ButtonCenteredOnly,
-  ButtonCustom,
-  InformationBox,
-  LandscapeFrameUploaded,
-  Spacing,
-  StackCustom,
-  TextAreaCustom,
-  TextInputCustom,
-  ViewWrapper,
+    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 {
+    deleteFileService,
+    uploadFileService,
+} 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 uploadFileService({
+          imageUri: imageUri,
+          dirId: DIRECTORY_ID.job_image,
+        });
+
+        if (responseUploadImage.success) {
+          newImageId = responseUploadImage.data.id;
+        }
+      }
+
+      if (data?.imageId) {
+        const responseDeleteImage = await deleteFileService({
+          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,
+        category: "edit",
+      });
+
+      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 +135,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,43 @@
-import {
-  ButtonCustom,
-  Spacing,
-  ViewWrapper
-} from "@/components";
+/* eslint-disable react-hooks/exhaustive-deps */
+import { ButtonCustom, LoaderCustom, Spacing, StackCustom, 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 { BASE_URL } from "@/service/api-config";
 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 baseUrl = BASE_URL;
+  const linkUrl = `${baseUrl}/job-vacancy/`;
+
+  const OpenLinkButton = ({ id }: { id: string }) => {
+    const jobUrl = `${linkUrl}${id}`;
 
     const openInBrowser = async () => {
       const supported = await Linking.canOpenURL(jobUrl);
@@ -44,9 +62,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 +87,18 @@ export default function JobDetail() {
 
   return (
     <ViewWrapper>
-      <Job_BoxDetailSection data={jobDetail}/>
-      <OpenLinkButton />
-      <Spacing />
-      <CopyLinkButton />
+      {isLoading ? (
+        <LoaderCustom />
+      ) : (
+        <>
+          <Job_BoxDetailSection data={data} />
+          <StackCustom>
+            <OpenLinkButton id={id as string} />
+            <CopyLinkButton id={id as string} />
+          </StackCustom>
+          <Spacing />
+        </>
+      )}
     </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 { uploadFileService } 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 uploadFileService({
+        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,
+    BaseBox,
+    BoxButtonOnFooter,
+    ButtonCenteredOnly,
+    ButtonCustom,
+    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 { uploadFileService } 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 uploadFileService({
+        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>
     </>
   );