Filter console dan clean code

Add:
- service/api-device-token.ts

Fix:
- app/(application)/(user)/home.tsx
- app/(application)/(user)/test-notifications.tsx
- app/_layout.tsx
- components/_ShareComponent/NotificationInitializer.tsx
- context/AuthContext.tsx
- hooks/use-foreground-notifications.ts
- screens/Home/HeaderBell.tsx
- service/api-notifications.ts

### No Issue

.gitignore

@@ -40,3 +40,45 @@ app-example
 .qodo
 
 .env
+
+# @generated expo-cli sync-8d4afeec25ea8a192358fae2f8e2fc766bdce4ec
+# The following patterns were generated by expo-cli
+
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+# @end expo-cli

android/app/build.gradle

@@ -64,9 +64,9 @@ react {
 }
 
 /**
- * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
+ * Set this to true in release builds to optimize the app using [R8](https://developer.android.com/topic/performance/app-optimization/enable-app-optimization).
  */
-def enableProguardInReleaseBuilds = (findProperty('android.enableProguardInReleaseBuilds') ?: false).toBoolean()
+def enableMinifyInReleaseBuilds = (findProperty('android.enableMinifyInReleaseBuilds') ?: false).toBoolean()
 
 /**
  * The preferred build flavor of JavaScriptCore (JSC)
@@ -82,6 +82,14 @@ def enableProguardInReleaseBuilds = (findProperty('android.enableProguardInRelea
 def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
 
 android {
+// @generated begin @rnmapbox/maps-libcpp - expo prebuild (DO NOT MODIFY) sync-e24830a5a3e854b398227dfe9630aabfaa1cadd1
+packagingOptions {
+        pickFirst 'lib/x86/libc++_shared.so'
+        pickFirst 'lib/x86_64/libc++_shared.so'
+        pickFirst 'lib/arm64-v8a/libc++_shared.so'
+        pickFirst 'lib/armeabi-v7a/libc++_shared.so'
+    }
+// @generated end @rnmapbox/maps-libcpp
     ndkVersion rootProject.ext.ndkVersion
 
     buildToolsVersion rootProject.ext.buildToolsVersion
@@ -92,8 +100,10 @@ android {
         applicationId 'com.bip.hipmimobileapp'
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1
+        versionCode 3
-        versionName "1.0.0"
+        versionName "1.0.1"
+
+        buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""
     }
     signingConfigs {
         debug {
@@ -111,15 +121,18 @@ android {
             // 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)
+            def enableShrinkResources = findProperty('android.enableShrinkResourcesInReleaseBuilds') ?: 'false'
-            minifyEnabled enableProguardInReleaseBuilds
+            shrinkResources enableShrinkResources.toBoolean()
+            minifyEnabled enableMinifyInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
-            crunchPngs (findProperty('android.enablePngCrunchInReleaseBuilds')?.toBoolean() ?: true)
+            def enablePngCrunchInRelease = findProperty('android.enablePngCrunchInReleaseBuilds') ?: 'true'
+            crunchPngs enablePngCrunchInRelease.toBoolean()
         }
     }
     packagingOptions {
         jniLibs {
-            useLegacyPackaging (findProperty('expo.useLegacyPackaging')?.toBoolean() ?: false)
+            def enableLegacyPackaging = findProperty('expo.useLegacyPackaging') ?: 'false'
+            useLegacyPackaging enableLegacyPackaging.toBoolean()
         }
     }
     androidResources {
@@ -175,3 +188,5 @@ dependencies {
         implementation jscFlavor
     }
 }
+
+apply plugin: 'com.google.gms.google-services'

android/app/google-services.json

@@ -0,0 +1,29 @@
+{
+  "project_info": {
+    "project_number": "608461535079",
+    "project_id": "hipmi-badung-connect",
+    "storage_bucket": "hipmi-badung-connect.firebasestorage.app"
+  },
+  "client": [
+    {
+      "client_info": {
+        "mobilesdk_app_id": "1:608461535079:android:4ff12ddc283fb3746761c2",
+        "android_client_info": {
+          "package_name": "com.bip.hipmimobileapp"
+        }
+      },
+      "oauth_client": [],
+      "api_key": [
+        {
+          "current_key": "AIzaSyBiDtIk3Q9zffFwIdJ5cjqY7e4390JGSkM"
+        }
+      ],
+      "services": {
+        "appinvite_service": {
+          "other_platform_oauth_client": []
+        }
+      }
+    }
+  ],
+  "configuration_version": "1"
+}

android/app/src/main/AndroidManifest.xml

@@ -1,4 +1,6 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
+  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
+  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
   <uses-permission android:name="android.permission.CAMERA"/>
   <uses-permission android:name="android.permission.INTERNET"/>
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
@@ -13,7 +15,11 @@
       <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">
+  <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" android:enableOnBackInvokedCallback="false" android:fullBackupContent="@xml/secure_store_backup_rules" android:dataExtractionRules="@xml/secure_store_data_extraction_rules">
+    <meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/notification_icon_color"/>
+    <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/notification_icon"/>
+    <meta-data android:name="expo.modules.notifications.default_notification_color" android:resource="@color/notification_icon_color"/>
+    <meta-data android:name="expo.modules.notifications.default_notification_icon" android:resource="@drawable/notification_icon"/>
     <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"/>
@@ -29,6 +35,12 @@
         <data android:scheme="hipmimobile"/>
         <data android:scheme="exp+hipmi-mobile"/>
       </intent-filter>
+      <intent-filter android:autoVerify="true" data-generated="true">
+        <action android:name="android.intent.action.VIEW"/>
+        <data android:scheme="https" android:host="cld-dkr-staging-hipmi.wibudev.com" android:pathPrefix="/"/>
+        <category android:name="android.intent.category.BROWSABLE"/>
+        <category android:name="android.intent.category.DEFAULT"/>
+      </intent-filter>
     </activity>
   </application>
 </manifest>

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

@@ -5,13 +5,13 @@ import android.content.res.Configuration
 
 import com.facebook.react.PackageList
 import com.facebook.react.ReactApplication
+import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative
 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.common.ReleaseLevel
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint
 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
@@ -19,21 +19,19 @@ import expo.modules.ReactNativeHostWrapper
 class MainApplication : Application(), ReactApplication {
 
   override val reactNativeHost: ReactNativeHost = ReactNativeHostWrapper(
-        this,
+      this,
-        object : DefaultReactNativeHost(this) {
+      object : DefaultReactNativeHost(this) {
-          override fun getPackages(): List<ReactPackage> {
+        override fun getPackages(): List<ReactPackage> =
-            val packages = PackageList(this).packages
+            PackageList(this).packages.apply {
-            // Packages that cannot be autolinked yet can be added manually here, for example:
+              // Packages that cannot be autolinked yet can be added manually here, for example:
-            // packages.add(MyReactNativePackage())
+              // 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
       }
   )
 
@@ -42,11 +40,12 @@ class MainApplication : Application(), ReactApplication {
 
   override fun onCreate() {
     super.onCreate()
-    SoLoader.init(this, OpenSourceMergedSoMapping)
+    DefaultNewArchitectureEntryPoint.releaseLevel = try {
-    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+      ReleaseLevel.valueOf(BuildConfig.REACT_NATIVE_RELEASE_LEVEL.uppercase())
-      // If you opted-in for the New Architecture, we load the native entry point for this app.
+    } catch (e: IllegalArgumentException) {
-      load()
+      ReleaseLevel.STABLE
     }
+    loadReactNative(this)
     ApplicationLifecycleDispatcher.onApplicationCreate(this)
   }
 

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

@@ -3,4 +3,5 @@
   <color name="iconBackground">#ffffff</color>
   <color name="colorPrimary">#023c69</color>
   <color name="colorPrimaryDark">#ffffff</color>
+  <color name="notification_icon_color">#ffffff</color>
 </resources>

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

@@ -1,5 +1,5 @@
 <resources>
-  <string name="app_name">HIPMI BADUNG</string>
+  <string name="app_name">HIPMI Badung Connect</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>

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

@@ -1,5 +1,6 @@
 <resources xmlns:tools="http://schemas.android.com/tools">
-  <style name="AppTheme" parent="Theme.EdgeToEdge">
+  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+    <item name="android:enforceNavigationBarContrast" tools:targetApi="29">true</item>
     <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
     <item name="colorPrimary">@color/colorPrimary</item>
     <item name="android:statusBarColor">#ffffff</item>
@@ -8,5 +9,6 @@
     <item name="windowSplashScreenBackground">@color/splashscreen_background</item>
     <item name="windowSplashScreenAnimatedIcon">@drawable/splashscreen_logo</item>
     <item name="postSplashScreenTheme">@style/AppTheme</item>
+    <item name="android:windowSplashScreenBehavior">icon_preferred</item>
   </style>
 </resources>

android/build.gradle

@@ -6,27 +6,15 @@ buildscript {
     mavenCentral()
   }
   dependencies {
+        classpath 'com.google.gms:google-services:4.4.1'
     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' }
@@ -35,3 +23,25 @@ allprojects {
 
 apply plugin: "expo-root-project"
 apply plugin: "com.facebook.react.rootproject"
+// @generated begin @rnmapbox/maps-v2-maven - expo prebuild (DO NOT MODIFY) sync-d4ccbfdff48fdba3138b02a8ba41b9722af001d8
+
+allprojects {
+  repositories {
+    maven {
+      url 'https://api.mapbox.com/downloads/v2/releases/maven'
+      // Authentication is no longer required as per Mapbox's removal of download token requirement
+      // See: https://github.com/mapbox/mapbox-maps-flutter/issues/775
+      // Keeping this as optional for backward compatibility
+      def token = project.properties['MAPBOX_DOWNLOADS_TOKEN'] ?: System.getenv('RNMAPBOX_MAPS_DOWNLOAD_TOKEN')
+      if (token) {
+        authentication { basic(BasicAuthentication) }
+        credentials {
+          username = 'mapbox'
+          password = token
+        }
+      }
+    }
+  }
+}
+
+// @generated end @rnmapbox/maps-v2-maven

android/gradle.properties

@@ -15,7 +15,7 @@ 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
+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
@@ -41,6 +41,11 @@ newArchEnabled=true
 # If set to false, you will be using JSC instead.
 hermesEnabled=true
 
+# Use this property to enable edge-to-edge display support.
+# This allows your app to draw behind system bars for an immersive UI.
+# Note: Only works with ReactActivity and should not be used with custom Activity.
+edgeToEdgeEnabled=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)
@@ -55,5 +60,6 @@ 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
+# Specifies whether the app is configured to use edge-to-edge via the app config or plugin
-expo.edgeToEdgeEnabled=true
+# WARNING: This property has been deprecated and will be removed in Expo SDK 55. Use `edgeToEdgeEnabled` or `react.edgeToEdgeEnabled` to determine whether the project is using edge-to-edge.
+expo.edgeToEdgeEnabled=true

android/gradle/wrapper/gradle-wrapper.properties

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

android/gradlew

@@ -114,7 +114,7 @@ case "$( uname )" in                #(
   NONSTOP* )        nonstop=true ;;
 esac
 
-CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+CLASSPATH="\\\"\\\""
 
 
 # Determine the Java command to use to start the JVM.
@@ -213,7 +213,7 @@ DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
 set -- \
         "-Dorg.gradle.appname=$APP_BASE_NAME" \
         -classpath "$CLASSPATH" \
-        org.gradle.wrapper.GradleWrapperMain \
+        -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
         "$@"
 
 # Stop when "xargs" is not available.

android/gradlew.bat

@@ -70,11 +70,11 @@ goto fail
 :execute
 @rem Setup the command line
 
-set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+set CLASSPATH=
 
 
 @rem Execute Gradle
-"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
 
 :end
 @rem End local scope for the variables with windows NT shell

android/settings.gradle

@@ -31,7 +31,7 @@ extensions.configure(com.facebook.react.ReactSettingsExtension) { ex ->
 }
 expoAutolinking.useExpoModules()
 
-rootProject.name = 'HIPMI BADUNG'
+rootProject.name = 'HIPMI Badung Connect'
 
 expoAutolinking.useExpoVersionCatalog()
 

app.config.js

@@ -1,60 +1,92 @@
 // app.config.js
-require('dotenv').config();
+require("dotenv").config();
 
 export default {
-  name: 'HIPMI BADUNG',
+  name: "HIPMI Badung Connect",
-  slug: 'hipmi-mobile',
+  slug: "hipmi-mobile",
-  version: '1.0.0',
+  version: "1.0.1",
-  orientation: 'portrait',
+  orientation: "portrait",
-  icon: './assets/images/icon.png',
+  icon: "./assets/images/icon.png",
-  scheme: 'hipmimobile',
+  scheme: "hipmimobile",
-  userInterfaceStyle: 'automatic',
+  userInterfaceStyle: "automatic",
   newArchEnabled: true,
 
   ios: {
     supportsTablet: true,
-    bundleIdentifier: 'com.anonymous.hipmi-mobile',
+    bundleIdentifier: "com.anonymous.hipmi-mobile",
+    googleServicesFile: "./ios/HIPMIBadungConnect/GoogleService-Info.plist",
     infoPlist: {
       ITSAppUsesNonExemptEncryption: false,
+      NSLocationWhenInUseUsageDescription:
+        "Aplikasi membutuhkan akses lokasi untuk menampilkan peta.",
     },
+    associatedDomains: ["applinks:cld-dkr-staging-hipmi.wibudev.com"],
+    buildNumber: "15",
   },
 
   android: {
+    googleServicesFile: "./google-services.json",
     adaptiveIcon: {
-      foregroundImage: './assets/images/splash-icon.png',
+      foregroundImage: "./assets/images/splash-icon.png",
-      backgroundColor: '#ffffff',
+      backgroundColor: "#ffffff",
     },
     edgeToEdgeEnabled: true,
-    package: 'com.bip.hipmimobileapp',
+    package: "com.bip.hipmimobileapp",
+    versionCode: 3,
+    // softwareKeyboardLayoutMode: 'resize', // option: untuk mengatur keyboard pada room chst collaboration
+    intentFilters: [
+      {
+        action: "VIEW",
+        autoVerify: true, // wajib untuk App Links
+        data: [
+          {
+            scheme: "https",
+            host: "cld-dkr-staging-hipmi.wibudev.com",
+            pathPrefix: "/",
+          },
+        ],
+        category: ["BROWSABLE", "DEFAULT"],
+      },
+    ],
   },
 
   web: {
-    bundler: 'metro',
+    bundler: "metro",
-    output: 'static',
+    output: "static",
-    favicon: './assets/images/favicon.png',
+    favicon: "./assets/images/favicon.png",
   },
 
   plugins: [
-    'expo-router',
+    "expo-router",
-    'expo-web-browser',
+    "expo-web-browser",
     [
-      'expo-splash-screen',
+      "expo-splash-screen",
       {
-        image: './assets/images/splash-icon.png',
+        image: "./assets/images/splash-icon.png",
         imageWidth: 200,
-        resizeMode: 'contain',
+        resizeMode: "contain",
-        backgroundColor: '#ffffff',
+        backgroundColor: "#ffffff",
       },
     ],
     [
-      'expo-camera',
+      "expo-camera",
       {
-        cameraPermission: 'Allow $(PRODUCT_NAME) to access your camera',
+        cameraPermission: "Allow $(PRODUCT_NAME) to access your camera",
-        microphonePermission: 'Allow $(PRODUCT_NAME) to access your microphone',
+        microphonePermission: "Allow $(PRODUCT_NAME) to access your microphone",
         recordAudioAndroid: true,
       },
     ],
-    'expo-font',
+    "expo-font",
+    "@rnmapbox/maps",
+    "@react-native-firebase/app",
+    [
+      "expo-notifications",
+      {
+        icon: "./assets/images/icon.png",
+        color: "#ffffff",
+        iosDisplayInForeground: true,
+      },
+    ],
   ],
 
   experiments: {
@@ -64,9 +96,11 @@ export default {
   extra: {
     router: {},
     eas: {
-      projectId: '5cf15964-4889-4755-b8ed-b99c61d614d1',
+      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,
+    DEEP_LINK_URL: process.env.DEEP_LINK_URL,
   },
-};
+};

app/(application)/(file)/[id].tsx

@@ -1,9 +1,13 @@
-import { BackButton, ViewWrapper } from "@/components";
+import { BackButton } from "@/components";
-import { MainColor } from "@/constants/color-palet";
+import PdfViewer from "@/components/_ShareComponent/PdfViewer";
-import { FontAwesome } from "@expo/vector-icons";
+import API_STRORAGE from "@/constants/base-url-api-strorage";
-import { Stack } from "expo-router";
+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>
+      <SafeAreaView style={{ flex: 1 }} edges={["bottom"]}>
-        <FontAwesome
+        <PdfViewer uri={url} />
-          name="file-pdf-o"
+      </SafeAreaView>
-          size={300}
-          style={{ alignSelf: "center" }}
-          color={MainColor.white}
-        />
-      </ViewWrapper>
     </>
   );
 }

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

@@ -10,7 +10,13 @@ export default function UserLayout() {
   return (
     <>
       <Stack screenOptions={HeaderStyles}>
-
+        <Stack.Screen
+          name="delete-account"
+          options={{
+            title: "Hapus Akun",
+            headerLeft: () => <BackButton />,
+          }}
+        />
         <Stack.Screen
           name="waiting-room"
           options={{
@@ -118,14 +124,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={{
@@ -133,6 +138,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 ========= */}
 
@@ -173,7 +192,7 @@ export default function UserLayout() {
           name="crowdfunding/index"
           options={{
             title: "Crowdfunding",
-            headerLeft: () => <BackButton />,
+            headerLeft: () => <BackButton path="/home" />,
           }}
         />
 
@@ -436,7 +455,7 @@ export default function UserLayout() {
           }}
         />
         <Stack.Screen
-          name="donation/[id]/(transaction-flow)/[transaction]/invoice"
+          name="donation/[id]/(transaction-flow)/[invoiceId]/invoice"
           options={{
             title: "Invoice",
             headerLeft: () => (
@@ -450,7 +469,7 @@ export default function UserLayout() {
           }}
         />
         <Stack.Screen
-          name="donation/[id]/(transaction-flow)/[transaction]/process"
+          name="donation/[id]/(transaction-flow)/[invoiceId]/process"
           options={{
             title: "Proses",
             headerLeft: () => (
@@ -464,14 +483,14 @@ export default function UserLayout() {
           }}
         />
         <Stack.Screen
-          name="donation/[id]/(transaction-flow)/[transaction]/success"
+          name="donation/[id]/(transaction-flow)/[invoiceId]/success"
           options={{
             title: "Donasi Berhasil",
             headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
-          name="donation/[id]/(transaction-flow)/[transaction]/failed"
+          name="donation/[id]/(transaction-flow)/[invoiceId]/failed"
           options={{
             title: "Donasi Gagal",
             headerLeft: () => <BackButton />,
@@ -576,6 +595,13 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
+        <Stack.Screen
+          name="forum/terms"
+          options={{
+            title: "Syarat & Ketentuan Forum",
+            headerLeft: () => <BackButton />,
+          }}
+        />
 
         {/* ========== Maps Section ========= */}
         <Stack.Screen

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) => (
+      {loadingGetData ? (
-        <BaseBox
+        <LoaderCustom />
-          key={index}
+      ) : _.isEmpty(listData) ? (
-          paddingBlock={5}
+        <TextCustom align="center">Tidak ada data</TextCustom>
-          href={`/collaboration/${index}/${generateProjectName()}/room-chat`}
+      ) : (
-        >
+        <StackCustom>
-          <Grid>
+          {listData?.map((item: any, index: any) => (
-            <Grid.Col span={10}>
+            <BaseBox
-              <TextCustom bold>{generateProjectName()}</TextCustom>
+              key={index}
-              <TextCustom size="small">2 Anggota</TextCustom>
+              paddingBlock={5}
-            </Grid.Col>
+              href={`/collaboration/${item?.ProjectCollaboration_RoomChat?.id}/${item?.ProjectCollaboration_RoomChat?.name}/room-chat`}
-            <Grid.Col
-              span={2}
-              style={{ alignItems: "flex-end", justifyContent: "center" }}
             >
-              <Feather name="chevron-right" size={20} color={MainColor.white} />
+              <Grid>
-            </Grid.Col>
+                <Grid.Col span={10}>
-          </Grid>
+                  <TextCustom bold>
-        </BaseBox>
+                    {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) => (
+        {loadingGetData ? (
-          <Collaboration_BoxPublishSection
+          <LoaderCustom />
-            key={index}
+        ) : _.isEmpty(listData) ? (
-            id={index.toString()}
+          <TextCustom align="center">Tidak ada data</TextCustom>
-            href={`/collaboration/${index}`}
+        ) : (
-          />
+          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>(
+  const [activeCategory, setActiveCategory] = useState<
-    "participant"
+    "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) => (
+      {loadingGetData ? (
-        <Collaboration_BoxPublishSection
+        <LoaderCustom />
-          key={index.toString()}
+      ) : _.isEmpty(listData) ? (
-          id={index.toString()}
+        <TextCustom align="center">Tidak ada data</TextCustom>
-          username={` ${
+      ) : activeCategory === "participant" ? (
-            activeCategory === "participant"
+        listData?.map((item: any, index: number) => (
-              ? "Partisipasi Proyek"
+          <Collaboration_BoxPublishSection
-              : "Proyek Saya"
+            key={index.toString()}
-          }`}
+            data={item?.ProjectCollaboration}
-          href={
+            href={`/collaboration/${item?.ProjectCollaboration?.id}/detail-participant`}
-            activeCategory === "participant"
+          />
-              ? `/collaboration/${index}/detail-participant`
+        ))
-              : `/collaboration/${index}/detail-project-main`
+      ) : (
-          }
+        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>
+        <BaseBox>
-          {Array.from({ length: 10 }).map((_, index) => (
+          <StackCustom gap={10}>
-            <AvatarUsernameAndOtherComponent key={index} avatarHref={`/profile/${index}`} />
+            {data?.ProjectCollaboration_AnggotaRoomChat?.map(
-          ))}
+              (item: any, index: number) => (
-        </BoxWithHeaderSection>
+                <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",
+    value:
-  },
+      data?.ProjectCollaboration?.ProjectCollaborationMaster_Industri?.name ||
-  {
+      "-",
-    title: "Deskripsi",
-    value: "Deskripsi Proyek",
   },
   {
     title: "Tujuan Proyek",
-    value:
+    value: data?.ProjectCollaboration?.purpose || "-",
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     title: "Keuntungan Proyek",
-    value:
+    value: data?.ProjectCollaboration?.benefit || "-",
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
 ];

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

@@ -1,68 +1,13 @@
-import {
+import { BackButton } from "@/components";
-  BackButton,
+import { MainColor } from "@/constants/color-palet";
-  BoxButtonOnFooter,
-  Grid,
-  TextCustom,
-  TextInputCustom,
-  ViewWrapper,
-} from "@/components";
-import { AccentColor, 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) => (
+      <ChatScreen id={id as string} />
-          <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>
     </>
   );
 }
-
-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,
+  BackButton,
-  BaseBox,
+  DotButton,
   DrawerCustom,
-  StackCustom,
+  MenuDrawerDynamicGrid,
-  TextCustom,
+  ViewWrapper
-  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 { apiCollaborationGetOne } from "@/service/api-client/api-collaboration";
-import { useLocalSearchParams } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
-import { useState } from "react";
+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} />
+        <Collaboration_BoxDetailSection data={data} />
-        <BaseBox style={{ height: 500 }}>
+        {/* <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,
+  ViewWrapper
-  TextCustom,
-  ViewWrapper,
 } from "@/components";
 import { IconEdit } from "@/components/_Icon";
 import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection";
-import Collaboration_MainParticipanSelectedSection from "@/screens/Collaboration/ProjectMainSelectedSection";
+import {
-import { router, Stack, useLocalSearchParams } from "expo-router";
+  apiCollaborationGetOne
-import { useState } from "react";
+} 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 [data, setData] = useState<any>();
-  const [selected, setSelected] = useState<(string | number)[]>([]);
+  const [loadingGetData, setLoadingGetData] = useState(false);
 
-  const handleEdit = () => {
+  useFocusEffect(
-    console.log("Edit collaboration");
+    useCallback(() => {
-    router.push("/(application)/(user)/collaboration/(id)/edit");
+      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} />
+        {loadingGetData ? (
-        <Collaboration_MainParticipanSelectedSection
+          <LoaderCustom />
-          selected={selected}
+        ) : (
-          setSelected={setSelected}
+          <>
-          setOpenDrawerParticipant={setOpenDrawerParticipant}
+            <Collaboration_BoxDetailSection data={data} />
-        />
+            {/* <Collaboration_MainParticipanSelectedSection
+              selected={selected}
+              setSelected={setSelected}
+              setOpenDrawerParticipant={setOpenDrawerParticipant}
+              listData={listData as any}
+            /> */}
 
-        <ButtonCustom
+            <Spacing />
-          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 />
       </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) => {
+          onPressItem={(item: any) => {
-            handleEdit();
+            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,170 @@
+/* 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();
+  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"}>
+      {loadingData ? (
-        <TextInputCustom label="Judul" placeholder="Masukan judul" required />
+        <LoaderCustom />
-        <TextInputCustom label="Lokasi" placeholder="Masukan lokasi" required />
+      ) : (
-        <SelectCustom
+        <StackCustom gap={"xs"}>
-          label="Pilih Industri"
+          <TextInputCustom
-          data={[
+            label="Judul"
-            { label: "Industri 1", value: "industri-1" },
+            placeholder="Masukan judul"
-            { label: "Industri 2", value: "industri-2" },
+            required
-            { label: "Industri 3", value: "industri-3" },
+            value={data?.title}
-          ]}
+            onChangeText={(value) => setData({ ...data, title: value })}
-          onChange={(value) => console.log(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
+          <TextAreaCustom
-          required
+            required
-          label="Tujuan Proyek"
+            label="Tujuan Proyek"
-          placeholder="Masukan tujuan proyek"
+            placeholder="Masukan tujuan proyek"
-          showCount
+            showCount
-          maxLength={1000}
+            maxLength={1000}
-        />
+            value={data?.purpose}
+            onChangeText={(value) => setData({ ...data, purpose: value })}
+          />
 
-        <TextAreaCustom
+          <TextAreaCustom
-          required
+            required
-          label="Keuntungan Proyek"
+            label="Keuntungan Proyek"
-          placeholder="Masukan keuntungan proyek"
+            placeholder="Masukan keuntungan proyek"
-          showCount
+            showCount
-          maxLength={1000}
+            maxLength={1000}
-        />
+            value={data?.benefit}
+            onChangeText={(value) => setData({ ...data, benefit: value })}
+          />
 
-        <ButtonCustom
+          <ButtonCustom
-          title="Update"
+            isLoading={isLoading}
-          onPress={() => {
+            title="Update"
-            console.log("Update proyek");
+            onPress={() => {
-            router.back();
+              handlerSubmitUpdate();
-          }}
+            }}
-        />
+          />
-      </StackCustom>
+        </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 {
-import { useState } from "react";
+  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} />
+        {!data && !isParticipant ? (
-
+          <LoaderCustom />
-        <ButtonCustom onPress={() => setOpenDrawerPartisipasi(true)}>
+        ) : (
-          Partisipasi
+          <>
-        </ButtonCustom>
+            {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,
+  AvatarUsernameAndOtherComponent,
-    BaseBox,
+  BaseBox,
-    DrawerCustom,
+  DrawerCustom,
-    Spacing,
+  LoaderCustom,
-    StackCustom,
+  Spacing,
-    TextCustom,
+  StackCustom,
-    ViewWrapper
+  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) => (
+        {loadingGetData ? (
-          <BaseBox key={index} paddingBlock={5}>
+          <LoaderCustom />
-            <AvatarUsernameAndOtherComponent
+        ) : _.isEmpty(listData) ? (
-              avatarHref={`/profile/${id}`}
+          <TextCustom align="center">Tidak ada partisipan</TextCustom>
-              rightComponent={
+        ) : (
-                <Feather
+          listData?.map((item: any, index: number) => (
-                  name="chevron-right"
+            <BaseBox key={index} paddingBlock={5}>
-                  size={24}
+              <AvatarUsernameAndOtherComponent
-                  color="white"
+                avatar={item?.User?.Profile?.imageId}
-                  onPress={() => setOpenDrawer(true)}
+                avatarHref={`/profile/${item?.User?.Profile?.id}`}
-                />
+                name={item?.User?.username}
-              }
+                rightComponent={
-            />
+                  <Feather
-          </BaseBox>
+                    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>
+              <TextCustom>{description}</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>
             </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,
+  ButtonCustom,
-    SelectCustom,
+  LoaderCustom,
-    StackCustom,
+  SelectCustom,
-    TextAreaCustom,
+  StackCustom,
-    TextInputCustom,
+  TextAreaCustom,
-    ViewWrapper
+  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"}>
+      {loadingMaster ? (
-        <TextInputCustom label="Judul" placeholder="Masukan judul" required />
+        <LoaderCustom />
-        <TextInputCustom label="Lokasi" placeholder="Masukan lokasi" required />
+      ) : (
-        <SelectCustom
+        <StackCustom gap={"xs"}>
-          label="Pilih Industri"
+          <TextInputCustom
-          data={[
+            label="Judul"
-            { label: "Industri 1", value: "industri-1" },
+            placeholder="Masukan judul"
-            { label: "Industri 2", value: "industri-2" },
+            required
-            { label: "Industri 3", value: "industri-3" },
+            value={data?.title}
-          ]}
+            onChangeText={(value: any) => setData({ ...data, title: value })}
-          onChange={(value) => console.log(value)}
+          />
-        />
 
-        <TextAreaCustom
+          <TextInputCustom
-          required
+            label="Lokasi"
-          label="Tujuan Proyek"
+            placeholder="Masukan lokasi"
-          placeholder="Masukan tujuan proyek"
+            required
-          showCount
+            value={data?.lokasi}
-          maxLength={1000}
+            onChangeText={(value: any) => setData({ ...data, lokasi: value })}
-        />
+          />
 
-        <TextAreaCustom
+          <SelectCustom
-          required
+            label="Pilih Industri"
-          label="Keuntungan Proyek"
+            data={listMaster?.map((item: any) => ({
-          placeholder="Masukan keuntungan proyek"
+              label: item.name,
-          showCount
+              value: item.id,
-          maxLength={1000}
+            }))}
-        />
+            value={data?.projectCollaborationMaster_IndustriId}
+            onChange={(value: any) => {
+              console.log(value);
+              setData({
+                ...data,
+                projectCollaborationMaster_IndustriId: value,
+              });
+            }}
+          />
 
-        <ButtonCustom
+          <TextAreaCustom
-          title="Simpan"
+            required
-          onPress={() => {
+            label="Tujuan Proyek"
-            console.log("Simpan proyek");
+            placeholder="Masukan tujuan proyek"
-            router.back();
+            showCount
-          }}
+            maxLength={1000}
-        />
+            value={data?.purpose}
-      </StackCustom>
+            onChangeText={(value: any) => setData({ ...data, purpose: value })}
+          />
+
+          <TextAreaCustom
+            required
+            label="Keuntungan Proyek"
+            placeholder="Masukan keuntungan proyek, contoh: Meningkatkan relasi bisnis , menjamin kualitas produk, meningkatkan kinerja dan lain lain"
+            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)/delete-account.tsx

@@ -0,0 +1,111 @@
+import {
+  AlertDefaultSystem,
+  BaseBox,
+  ButtonCustom,
+  CenterCustom,
+  StackCustom,
+  TextCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { useAuth } from "@/hooks/use-auth";
+import { apiDeleteUser } from "@/service/api-client/api-user";
+import { Image } from "expo-image";
+import { useLocalSearchParams } from "expo-router/build/hooks";
+import { useState } from "react";
+import Toast from "react-native-toast-message";
+
+export default function DeleteAccount() {
+  const { token, logout, user } = useAuth();
+  const { phone } = useLocalSearchParams();
+  const [text, setText] = useState("");
+  const [isLoading, setLoading] = useState(false);
+
+  const deleteAccount = async () => {
+    if (text !== "Delete Account") {
+      return Toast.show({
+        type: "error",
+        text1: "Ketik 'Delete Account' untuk menghapus akun",
+      });
+    }
+
+    AlertDefaultSystem({
+      title: "Anda yakin akan menghapus akun ini?",
+      message:
+        "Semua data yang pernah anda buat akan terhapus secara permanen !",
+      textLeft: "Batal",
+      textRight: "Ya",
+      onPressRight: async () => {
+        try {
+          setLoading(true);
+          const response = await apiDeleteUser({ id: user?.id as string });
+
+          if (response.success) {
+            console.log("RESPONSE >> ", response);
+            Toast.show({
+              type: "success",
+              text1: "Akun berhasil dihapus",
+            });
+
+            setTimeout(() => {
+              logout();
+              setLoading(false);
+            }, 2000);
+          } else {
+            Toast.show({
+              type: "error",
+              text1: "Gagal menghapus akun",
+            });
+            setLoading(false);
+          }
+        } catch (error) {
+          console.log("ERROR >> ", error);
+          setLoading(false);
+        }
+      },
+    });
+  };
+
+  return (
+    <>
+      <ViewWrapper>
+        <StackCustom>
+          <BaseBox>
+            <StackCustom>
+              <CenterCustom>
+                <Image
+                  source={require("@/assets/images/constants/logo-hipmi.png")}
+                  style={{
+                    width: 150,
+                    height: 150,
+                  }}
+                />
+              </CenterCustom>
+              <TextCustom align="center">
+                Anda akan menghapus akun dengan nomor +{phone}
+              </TextCustom>
+              <TextCustom align="center">
+                Ketik 'Delete Account' untuk menghapus akun
+              </TextCustom>
+              <TextInputCustom
+                value={text}
+                onChangeText={setText}
+                placeholder="Ketik 'Delete Account'"
+              />
+
+              <ButtonCustom
+                backgroundColor="red"
+                textColor="white"
+                onPress={deleteAccount}
+                isLoading={isLoading}
+                disabled={isLoading}
+              >
+                Submit
+              </ButtonCustom>
+            </StackCustom>
+          </BaseBox>
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -1,11 +1,41 @@
 import {
   FloatingButton,
-  ViewWrapper
+  LoaderCustom,
+  TextCustom,
+  ViewWrapper,
 } from "@/components";
 import Donation_BoxPublish from "@/screens/Donation/BoxPublish";
-import { router } from "expo-router";
+import { apiDonationGetAll } from "@/service/api-client/api-donation";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function DonationBeranda() {
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiDonationGetAll({
+        category: "beranda"
+      });
+      console.log("[RES GET ALL]", JSON.stringify(response.data, null, 2));
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
   return (
     <ViewWrapper
       hideFooter
@@ -13,9 +43,15 @@ export default function DonationBeranda() {
         <FloatingButton onPress={() => router.push("/donation/create")} />
       }
     >
-      {Array.from({ length: 10 }).map((_, index) => (
+      {loadList ? (
-        <Donation_BoxPublish key={index} id={index.toString()}/>
+        <LoaderCustom />
-      ))}
+      ) : _.isEmpty(list) ? (
+        <TextCustom align="center" color="gray">Belum ada donasi</TextCustom>
+      ) : (
+        list?.map((item: any, index: number) => (
+          <Donation_BoxPublish data={item} key={index} id={item.id} />
+        ))
+      )}
     </ViewWrapper>
   );
 }

app/(application)/(user)/donation/(tabs)/my-donation.tsx

@@ -1,76 +1,142 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BadgeCustom,
   BaseBox,
   DummyLandscapeImage,
   Grid,
+  LoaderCustom,
   StackCustom,
   TextCustom,
   ViewWrapper,
 } from "@/components";
-import { dummyMasterStatusTransaction } from "@/lib/dummy-data/_master/status-transaction";
+import { useAuth } from "@/hooks/use-auth";
-import { router } from "expo-router";
+import { apiDonationGetAll } from "@/service/api-client/api-donation";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import { Href, router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 import { View } from "react-native";
 
 export default function DonationMyDonation() {
-  const randomStatusData = Array.from({ length: 10 }, () => {
+  const { user } = useAuth();
-    const randomIndex = Math.floor(
+  const [list, setList] = useState<any[] | null>(null);
-      Math.random() * dummyMasterStatusTransaction.length
+  const [loadList, setLoadList] = useState(false);
-    );
-    return dummyMasterStatusTransaction[randomIndex];
-  });
 
-  const handlePress = (value: string) => {
+  useFocusEffect(
-    if (value === "menunggu") {
+    useCallback(() => {
-      router.push(`/donation/${value}/(transaction-flow)/123/invoice`);
+      onLoadData();
-    } else if (value === "proses") {
+    }, [user?.id])
-      router.push(`/donation/${value}/(transaction-flow)/123/process`);
+  );
-    } else if (value === "berhasil") {
+
-      router.push(`/donation/${value}/(transaction-flow)/123/success`);
+  const onLoadData = async () => {
-    } else if (value === "gagal") {
+    try {
-      router.push(`/donation/${value}/(transaction-flow)/123/failed`);
+      setLoadList(true);
+      const response = await apiDonationGetAll({
+        category: "my-donation",
+        authorId: user?.id,
+      });
+      console.log(
+        "[RES GET MY DONATION]",
+        JSON.stringify(response.data, null, 2)
+      );
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
+  const handlerColor = (status: string) => {
+    if (status === "menunggu") {
+      return "orange";
+    } else if (status === "proses") {
+      return "white";
+    } else if (status === "berhasil") {
+      return "green";
+    } else if (status === "gagal") {
+      return "red";
+    }
+  };
+
+  const handlePress = ({
+    invoiceId,
+    donationId,
+    status,
+  }: {
+    invoiceId: string;
+    donationId: string;
+    status: string;
+  }) => {
+    const url: Href = `../${donationId}/(transaction-flow)/${invoiceId}`;
+    if (status === "menunggu") {
+      router.push(`${url}/invoice`);
+    } else if (status === "proses") {
+      router.push(`${url}/process`);
+    } else if (status === "berhasil") {
+      router.push(`${url}/success`);
+    } else if (status === "gagal") {
+      router.push(`${url}/failed`);
     }
   };
 
   return (
     <ViewWrapper hideFooter>
-      {randomStatusData.map((item, index) => (
+      {loadList ? (
-        <BaseBox
+        <LoaderCustom />
-          key={index}
+      ) : _.isEmpty(list) ? (
-          paddingTop={7}
+        <TextCustom align="center" color="gray">
-          paddingBottom={7}
+          Belum ada transaksi
-          onPress={() => {
+        </TextCustom>
-            handlePress(item.value);
+      ) : (
-          }}
+        list?.map((item, index) => (
-        >
+          <BaseBox
-          <Grid>
+            key={index}
-            <Grid.Col span={5}>
+            paddingTop={7}
-              <DummyLandscapeImage height={100} unClickPath />
+            paddingBottom={7}
-            </Grid.Col>
+            onPress={() => {
-            <Grid.Col span={1}>
+              handlePress({
-              <View />
+                status: _.lowerCase(item.statusInvoice),
-            </Grid.Col>
+                invoiceId: item.id,
-            <Grid.Col span={6}>
+                donationId: item.donasiId,
-              <StackCustom gap={"sm"}>
+              });
-                <View>
+            }}
-                  <TextCustom truncate>
+          >
-                    Judul Donasi: Lorem ipsum dolor sit amet consectetur
+            <Grid>
-                    adipisicing elit.
+              <Grid.Col span={5}>
+                <DummyLandscapeImage
+                  height={100}
+                  unClickPath
+                  imageId={item.imageId}
+                />
+              </Grid.Col>
+              <Grid.Col span={1}>
+                <View />
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <StackCustom>
+                  <TextCustom truncate={2} bold>
+                    {item.title || "-"}
                   </TextCustom>
-                </View>
+
-                <View>
-                  <TextCustom>Donasi Saya</TextCustom>
                   <TextCustom bold color="yellow">
-                    Rp. 7.500.000
+                    Rp. {formatCurrencyDisplay(item.nominal)}
                   </TextCustom>
-                </View>
+
-                <BadgeCustom variant="light" color={item.color} fullWidth>
+                  <BadgeCustom
-                  {item.label}
+                    variant="light"
-                </BadgeCustom>
+                    color={handlerColor(_.lowerCase(item.statusInvoice))}
-              </StackCustom>
+                    fullWidth
-            </Grid.Col>
+                  >
-          </Grid>
+                    {item.statusInvoice}
-        </BaseBox>
+                  </BadgeCustom>
-      ))}
+                </StackCustom>
+              </Grid.Col>
+            </Grid>
+          </BaseBox>
+        ))
+      )}
     </ViewWrapper>
   );
 }

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

@@ -1,12 +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 Donasi_BoxStatus from "@/screens/Donation/BoxStatus";
-import { useState } from "react";
+import { apiDonationGetByStatus } from "@/service/api-client/api-donation";
+import { useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function DonationStatus() {
+  const { user } = useAuth();
   const [activeCategory, setActiveCategory] = useState<string | null>(
     "publish"
   );
+  const [listData, setListData] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [activeCategory])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiDonationGetByStatus({
+        authorId: user?.id as string,
+        status: activeCategory as string,
+      });
+
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setListData(null);
+    } finally {
+      setLoadList(false);
+    }
+  };
 
   const handlePress = (item: any) => {
     setActiveCategory(item.value);
@@ -26,13 +62,19 @@ export default function DonationStatus() {
   );
   return (
     <ViewWrapper hideFooter headerComponent={scrollComponent}>
-      {Array.from({ length: 10 }).map((_, index) => (
+      {loadList ? (
-        <Donasi_BoxStatus
+        <LoaderCustom />
-          key={index}
+      ) : _.isEmpty(listData) ? (
-          id={index.toString()}
+        <TextCustom align="center">Tidak ada data {activeCategory}</TextCustom>
-          status={activeCategory as string}
+      ) : (
-        />
+        listData?.map((item: any, index: number) => (
-      ))}
+          <Donasi_BoxStatus
+            key={index}
+            data={item}
+            status={activeCategory as string}
+          />
+        ))
+      )}
     </ViewWrapper>
   );
 }

app/(application)/(user)/donation/[id]/(news)/[news]/edit-news.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   ButtonCenteredOnly,
   ButtonCustom,
@@ -9,17 +10,120 @@ import {
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
-import { router } from "expo-router";
+import API_STRORAGE from "@/constants/base-url-api-strorage";
+import DIRECTORY_ID from "@/constants/directory-id";
+import {
+  apiDonationGetNewsById,
+  apiDonationUpdateNews,
+} from "@/service/api-client/api-donation";
+import { uploadFileService } from "@/service/upload-service";
+import pickFile, { IFileData } from "@/utils/pickFile";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function DonationEditNews() {
+  const { news } = useLocalSearchParams();
+  const [data, setData] = useState<any>(null);
+  const [image, setImage] = useState<IFileData | null>(null);
+  const [isLoading, setLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [news])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetNewsById({
+        id: news as string,
+        category: "get-one",
+      });
+
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handlerSubmitUpdate = async () => {
+    let newData;
+    if (!data.title || !data.deskripsi) {
+      Toast.show({
+        type: "error",
+        text1: "Judul dan deskripsi harus diisi",
+      });
+      return;
+    }
+
+    try {
+      setLoading(true);
+
+      newData = {
+        title: data?.title,
+        deskripsi: data?.deskripsi,
+      };
+
+      if (image && image?.uri) {
+        const uploadNewImage = await uploadFileService({
+          dirId: DIRECTORY_ID.donasi_kabar,
+          imageUri: image?.uri,
+        });
+
+        newData = {
+          title: data?.title,
+          deskripsi: data?.deskripsi,
+          newImageId: uploadNewImage.data.id,
+        };
+      }
+
+      const response = await apiDonationUpdateNews({
+        id: news as string,
+        data: newData,
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengupdate berita",
+        });
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Berita berhasil diperbarui",
+      });
+      router.back();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Upload gambar bersifat opsional untuk melengkapi kabar terkait donasi Anda." />
-        <LandscapeFrameUploaded />
+        <LandscapeFrameUploaded
+          image={
+            image
+              ? image.uri
+              : data && data.imageId
+              ? API_STRORAGE.GET({ fileId: data.imageId })
+              : undefined
+          }
+        />
         <ButtonCenteredOnly
           onPress={() => {
-            router.push("/(application)/(image)/take-picture/123");
+            pickFile({
+              allowedType: "image",
+              setImageUri(file) {
+                setImage(file);
+              },
+            });
           }}
           icon="upload"
         >
@@ -30,6 +134,8 @@ export default function DonationEditNews() {
           label="Judul Berita"
           placeholder="Masukan judul berita"
           required
+          value={data?.title}
+          onChangeText={(value) => setData({ ...data, title: value })}
         />
         <TextAreaCustom
           label="Deskripsi Berita"
@@ -37,12 +143,16 @@ export default function DonationEditNews() {
           required
           showCount
           maxLength={1000}
+          value={data?.deskripsi}
+          onChangeText={(value) => setData({ ...data, deskripsi: value })}
         />
 
         <Spacing />
         <ButtonCustom
+          disabled={!data?.title || !data?.deskripsi}
+          isLoading={isLoading}
           onPress={() => {
-            router.back();
+            handlerSubmitUpdate();
           }}
         >
           Update

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

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   AlertDefaultSystem,
   BackButton,
@@ -12,13 +13,45 @@ import {
 } from "@/components";
 import { IconEdit } from "@/components/_Icon";
 import { IconTrash } from "@/components/_Icon/IconTrash";
-import dayjs from "dayjs";
+import { useAuth } from "@/hooks/use-auth";
-import { router, Stack, useLocalSearchParams } from "expo-router";
+import {
-import { useState } from "react";
+  apiDonationDeleteNews,
+  apiDonationGetNewsById,
+} from "@/service/api-client/api-donation";
+import { formatChatTime } from "@/utils/formatChatTime";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function DonationNews() {
-  const { id, news } = useLocalSearchParams();
+  const { user } = useAuth();
+  const { news } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
+  const [data, setData] = useState<any>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [news])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetNewsById({
+        id: news as string,
+        category: "get-one",
+      });
+
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
 
   return (
     <>
@@ -26,28 +59,28 @@ export default function DonationNews() {
         options={{
           title: "Detail Kabar",
           headerLeft: () => <BackButton />,
-          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+          headerRight: () =>
+            user?.id === data?.authorId && (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ),
         }}
       />
       <ViewWrapper>
         <BaseBox>
           <StackCustom>
             <TextCustom style={{ alignSelf: "flex-end" }}>
-              {dayjs().format("DD MMM YYYY")}
+              {formatChatTime(data?.createdAt)}
             </TextCustom>
 
-            <DummyLandscapeImage />
+            {data && data.imageId && (
+              <DummyLandscapeImage imageId={data.imageId} />
+            )}
 
             <TextCustom bold size="large" align="center">
-              Judul Berita
+              {data?.title || "-"}
             </TextCustom>
 
-            <TextCustom>
+            <TextCustom>{data?.deskripsi || "-"}</TextCustom>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
-              est id temporibus perferendis eos reiciendis reprehenderit tempora
-              ut quibusdam dolores facilis rerum exercitationem recusandae quis
-              neque, adipisci dolorum, aspernatur labore?
-            </TextCustom>
           </StackCustom>
         </BaseBox>
       </ViewWrapper>
@@ -62,12 +95,12 @@ export default function DonationNews() {
             {
               icon: <IconEdit />,
               label: "Edit Berita",
-              path: `/donation/${id}/(news)/${news}/edit-news` as any,
+              path: `/donation/[id]/(news)/${news}/edit-news` as any,
             },
             {
               icon: <IconTrash />,
               label: "Hapus Berita",
-              path: `` as any,
+              path: "",
               color: "red",
             },
           ]}
@@ -79,7 +112,23 @@ export default function DonationNews() {
                 message: "Apakah Anda yakin ingin menghapus berita ini?",
                 textLeft: "Batal",
                 textRight: "Hapus",
-                onPressRight: () => {
+                onPressRight: async () => {
+                  const response = await apiDonationDeleteNews({
+                    id: news as string,
+                  });
+
+                  if (!response.success) {
+                    Toast.show({
+                      type: "error",
+                      text1: "Gagal menghapus berita",
+                    });
+                    return;
+                  }
+
+                  Toast.show({
+                    type: "success",
+                    text1: "Berita berhasil dihapus",
+                  });
                   router.back();
                 },
               });

app/(application)/(user)/donation/[id]/(news)/add-news.tsx

@@ -9,17 +9,79 @@ import {
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
-import { router } from "expo-router";
+import DIRECTORY_ID from "@/constants/directory-id";
+import { apiDonationCreateNews } from "@/service/api-client/api-donation";
+import { uploadFileService } from "@/service/upload-service";
+import pickFile, { IFileData } from "@/utils/pickFile";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function DonationAddNews() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState({
+    title: "",
+    deskripsi: "",
+  });
+  const [image, setImage] = useState<IFileData | null>(null);
+  const [isLoading, setLoading] = useState(false);
+
+  const handlerSubmit = async () => {
+    let newData: any = { ...data };
+    try {
+      setLoading(true);
+      if (image) {
+        const responseUploadImage = await uploadFileService({
+          dirId: DIRECTORY_ID.donasi_kabar,
+          imageUri: image?.uri,
+        });
+
+        newData = {
+          ...newData,
+          imageId: responseUploadImage.data.id,
+        };
+      }
+
+      const response = await apiDonationCreateNews({
+        id: id as string,
+        data: newData,
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal menambah berita",
+        });
+
+        return
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Berita berhasil ditambahkan",
+      });
+
+      router.back();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Upload gambar bersifat opsional untuk melengkapi kabar terkait donasi Anda." />
-        <LandscapeFrameUploaded />
+        <LandscapeFrameUploaded image={image?.uri} />
         <ButtonCenteredOnly
           onPress={() => {
-            router.push("/(application)/(image)/take-picture/123");
+            pickFile({
+              allowedType: "image",
+              setImageUri(file) {
+                setImage(file);
+              },
+            });
           }}
           icon="upload"
         >
@@ -30,6 +92,13 @@ export default function DonationAddNews() {
           label="Judul Berita"
           placeholder="Masukan judul berita"
           required
+          value={data.title}
+          onChangeText={(value) => {
+            setData({
+              ...data,
+              title: value,
+            });
+          }}
         />
         <TextAreaCustom
           label="Deskripsi Berita"
@@ -37,12 +106,21 @@ export default function DonationAddNews() {
           required
           showCount
           maxLength={1000}
+          value={data.deskripsi}
+          onChangeText={(value) => {
+            setData({
+              ...data,
+              deskripsi: value,
+            });
+          }}
         />
-        
+
         <Spacing />
         <ButtonCustom
+          disabled={!data.title || !data.deskripsi}
+          isLoading={isLoading}
           onPress={() => {
-            router.back();
+            handlerSubmit();
           }}
         >
           Simpan

app/(application)/(user)/donation/[id]/(news)/list-of-news.tsx

@@ -1,45 +1,88 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-    BackButton,
+  BackButton,
-    BaseBox,
+  BaseBox,
-    DrawerCustom,
+  DrawerCustom,
-    Grid,
+  Grid,
-    MenuDrawerDynamicGrid,
+  LoaderCustom,
-    TextCustom,
+  MenuDrawerDynamicGrid,
-    ViewWrapper
+  TextCustom,
+  ViewWrapper,
 } from "@/components";
 import { IconPlus } from "@/components/_Icon";
-import dayjs from "dayjs";
+import { apiDonationGetNewsById } from "@/service/api-client/api-donation";
-import { router, Stack, useLocalSearchParams } from "expo-router";
+import { formatChatTime } from "@/utils/formatChatTime";
-import { useState } from "react";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function DonationRecapOfNews() {
   const { id } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState<boolean>(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiDonationGetNewsById({
+        id: id as string,
+        category: "get-all",
+      });
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setList([]);
+    } finally {
+      setLoadList(false);
+    }
+  };
 
   return (
     <>
       <Stack.Screen
         options={{
           title: "Daftar Kabar",
-          headerLeft: () => <BackButton />, }}
+          headerLeft: () => <BackButton />,
+        }}
       />
       <ViewWrapper>
-        {Array.from({ length: 15 }).map((_, index) => (
+        {loadList ? (
-          <BaseBox key={index} href={`/donation/${id}/(news)/${index}`}>
+          <LoaderCustom />
-            <Grid>
+        ) : _.isEmpty(list) ? (
-              <Grid.Col span={8}>
+          <TextCustom align="center" color="gray">
-                <TextCustom truncate bold>
+            Tidak ada kabar
-                  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+          </TextCustom>
-                </TextCustom>
+        ) : (
-              </Grid.Col>
+          list?.map((item: any, index: number) => (
-              <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+            <BaseBox key={index} href={`/donation/[id]/(news)/${item.id}`}>
-                <TextCustom size="small">
+              <Grid>
-                  {dayjs().format("DD MMM YYYY")}
+                <Grid.Col span={8}>
-                </TextCustom>
+                  <TextCustom truncate bold>
-              </Grid.Col>
+                    {item?.title || "-"}
-            </Grid>
+                  </TextCustom>
-          </BaseBox>
+                </Grid.Col>
-        ))}
+                <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+                  <TextCustom size="small">
+                    {formatChatTime(item?.createdAt)}
+                  </TextCustom>
+                </Grid.Col>
+              </Grid>
+            </BaseBox>
+          ))
+        )}
       </ViewWrapper>
 
       <DrawerCustom

app/(application)/(user)/donation/[id]/(news)/recap-of-news.tsx

@@ -1,21 +1,55 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BackButton,
   BaseBox,
   DotButton,
   DrawerCustom,
   Grid,
+  LoaderCustom,
   MenuDrawerDynamicGrid,
   TextCustom,
   ViewWrapper,
 } from "@/components";
 import { IconPlus } from "@/components/_Icon";
-import dayjs from "dayjs";
+import { apiDonationGetNewsById } from "@/service/api-client/api-donation";
-import { router, Stack, useLocalSearchParams } from "expo-router";
+import { formatChatTime } from "@/utils/formatChatTime";
-import { useState } from "react";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function DonationRecapOfNews() {
   const { id } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState<boolean>(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiDonationGetNewsById({
+        id: id as string,
+        category: "get-all",
+      });
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setList([]);
+    } finally {
+      setLoadList(false);
+    }
+  };
 
   return (
     <>
@@ -27,20 +61,30 @@ export default function DonationRecapOfNews() {
         }}
       />
       <ViewWrapper>
-        {Array.from({ length: 15 }).map((_, index) => (
+        {loadList ? (
-          <BaseBox key={index} href={`/donation/${id}/(news)/${index}`}>
+          <LoaderCustom />
-            <Grid>
+        ) : _.isEmpty(list) ? (
-              <Grid.Col span={8}>
+          <TextCustom align="center" color="gray">
-                <TextCustom truncate bold>
+            Tidak ada kabar
-                  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+          </TextCustom>
-                </TextCustom>
+        ) : (
-              </Grid.Col>
+          list?.map((item: any, index: number) => (
-              <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+            <BaseBox key={index} href={`/donation/[id]/(news)/${item.id}`}>
-                <TextCustom size="small">{dayjs().format("DD MMM YYYY")}</TextCustom>
+              <Grid>
-              </Grid.Col>
+                <Grid.Col span={8}>
-            </Grid>
+                  <TextCustom truncate bold>
-          </BaseBox>
+                    {item?.title || "-"}
-        ))}
+                  </TextCustom>
+                </Grid.Col>
+                <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+                  <TextCustom size="small">
+                    {formatChatTime(item?.createdAt)}
+                  </TextCustom>
+                </Grid.Col>
+              </Grid>
+            </BaseBox>
+          ))
+        )}
       </ViewWrapper>
 
       <DrawerCustom

app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/failed.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BaseBox,
   Grid,
@@ -7,11 +8,60 @@ import {
   ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
+import { apiDonationGetInvoiceById } from "@/service/api-client/api-donation";
 import { GStyles } from "@/styles/global-styles";
+import { dateTimeView } from "@/utils/dateTimeView";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
 import { FontAwesome6 } from "@expo/vector-icons";
-import dayjs from "dayjs";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function DonasiFailed() {
+  const { id, invoiceId } = useLocalSearchParams();
+  const [data, setData] = useState<any>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id, invoiceId])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetInvoiceById({
+        id: invoiceId as string,
+      });
+
+      console.log("[DATA]", JSON.stringify(response.data, null, 2));
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const listData = [
+    {
+      label: "Bank",
+      value: (data && data?.MasterBank?.namaBank) || "-",
+    },
+    {
+      label: "Rekening Penerima",
+      value: (data && data?.MasterBank?.namaAkun) || "-",
+    },
+    {
+      label: "No Rekening",
+      value: (data && data?.MasterBank?.norek) || "-",
+    },
+    {
+      label: "Jumlah Donasi",
+      value: (data && formatCurrencyDisplay(data?.nominal)) || "-",
+    },
+    {
+      label: "Tanggal",
+      value: (data && dateTimeView({ date: data?.createdAt })) || "-",
+    },
+  ];
+
   return (
     <ViewWrapper>
       <StackCustom>
@@ -58,26 +108,3 @@ export default function DonasiFailed() {
     </ViewWrapper>
   );
 }
-
-const listData = [
-  {
-    label: "Bank",
-    value: " BCA",
-  },
-  {
-    label: "Rekening Penerima",
-    value: "Himpunan Pengusaha Muda Indonesia",
-  },
-  {
-    label: "No Rekening",
-    value: "2304235678854332",
-  },
-  {
-    label: "Jumlah Donasi",
-    value: "Rp. 750.000",
-  },
-  {
-    label: "Tanggal",
-    value: `${dayjs(new Date()).format("DD/MM/YYYY")}`,
-  },
-];

app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/invoice.tsx

@@ -0,0 +1,222 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BaseBox,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  Grid,
+  InformationBox,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import CopyButton from "@/components/Button/CoyButton";
+import { MainColor } from "@/constants/color-palet";
+import DIRECTORY_ID from "@/constants/directory-id";
+import {
+  apiDonationGetInvoiceById,
+  apiDonationUpdateInvoice,
+} from "@/service/api-client/api-donation";
+import { uploadFileService } from "@/service/upload-service";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import pickFile from "@/utils/pickFile";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import { View } from "react-native";
+import Toast from "react-native-toast-message";
+
+export default function DonationInvoice() {
+  const { invoiceId } = useLocalSearchParams();
+  console.log("invoiceId", invoiceId);
+  const [data, setData] = useState<any>(null);
+  const [image, setImage] = useState<any>(null);
+  const [isLoading, setLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [invoiceId])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetInvoiceById({
+        id: invoiceId as string,
+      });
+      console.log("[RESPONSE]", JSON.stringify(response, null, 2));
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handlerUpdateInvoice = async () => {
+    try {
+      setLoading(true);
+      const responseUploadImage = await uploadFileService({
+        dirId: DIRECTORY_ID.donasi_bukti_transfer,
+        imageUri: image?.uri,
+      });
+
+      console.log("[RESPONSE UPLOAD IMAGE]", responseUploadImage);
+
+      if (!responseUploadImage?.data?.id) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengunggah bukti transfer",
+        });
+        return;
+      }
+
+      const fileId = responseUploadImage?.data?.id;
+
+      const response = await apiDonationUpdateInvoice({
+        id: invoiceId as string,
+        fileId: fileId,
+        status: "proses",
+      });
+
+      console.log("[RESPONSE UPDATE]", JSON.stringify(response, null, 2));
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengunggah bukti transfer",
+        });
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Berhasil mengunggah bukti transfer",
+      });
+      router.replace(`/donation/[id]/(transaction-flow)/${invoiceId}/process`);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <ViewWrapper>
+        <StackCustom>
+          <InformationBox
+            text={`Mohon transfer donasi anda ke rekening dibawah`}
+          />
+          <BaseBox>
+            <StackCustom gap={"xs"}>
+              <TextCustom bold>
+                BANK: {data?.DonasiMaster_Bank?.name}
+              </TextCustom>
+              {/* <TextCustom>{data?.DonasiMaster_Bank?.accountName}</TextCustom> */}
+              <Spacing height={10} />
+
+              <BaseBox backgroundColor={MainColor.soft_darkblue}>
+                <Grid containerStyle={{ justifyContent: "center" }}>
+                  <Grid.Col
+                    span={8}
+                    style={{
+                      justifyContent: "center",
+                    }}
+                  >
+                    <TextCustom size="xlarge" bold color="yellow">
+                      {data?.MasterBank?.norek}
+                    </TextCustom>
+                  </Grid.Col>
+                  <Grid.Col
+                    span={4}
+                    style={{
+                      alignItems: "flex-end",
+                    }}
+                  >
+                    <CopyButton textToCopy={data?.MasterBank?.norek} />
+                  </Grid.Col>
+                </Grid>
+              </BaseBox>
+            </StackCustom>
+          </BaseBox>
+
+          <BaseBox>
+            <StackCustom gap={"xs"}>
+              <TextCustom>Jumlah Transaksi</TextCustom>
+
+              <Spacing height={10} />
+
+              <BaseBox backgroundColor={MainColor.soft_darkblue}>
+                <Grid containerStyle={{ justifyContent: "center" }}>
+                  <Grid.Col
+                    span={8}
+                    style={{
+                      justifyContent: "center",
+                    }}
+                  >
+                    <TextCustom size="xlarge" bold color="yellow">
+                      Rp. {formatCurrencyDisplay(data?.nominal) || "-"}
+                    </TextCustom>
+                  </Grid.Col>
+                  <Grid.Col
+                    span={4}
+                    style={{
+                      alignItems: "flex-end",
+                    }}
+                  >
+                    <CopyButton textToCopy={data?.nominal} />
+                  </Grid.Col>
+                </Grid>
+              </BaseBox>
+            </StackCustom>
+          </BaseBox>
+
+          <BaseBox>
+            <StackCustom>
+              <TextCustom bold align="center" size={"small"} color="gray">
+                Upload bukti transfer anda.
+              </TextCustom>
+              {image ? (
+                <View
+                  style={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: 10,
+                    paddingInline: 20,
+                  }}
+                >
+                  <TextCustom bold align="center" truncate>
+                    {image?.name}
+                  </TextCustom>
+                </View>
+              ) : null}
+              <ButtonCenteredOnly
+                onPress={() => {
+                  pickFile({
+                    allowedType: "image",
+                    setImageUri(file) {
+                      setImage(file);
+                    },
+                  });
+                }}
+                icon="upload"
+              >
+                Upload
+              </ButtonCenteredOnly>
+            </StackCustom>
+          </BaseBox>
+
+          <ButtonCustom
+            disabled={!image}
+            isLoading={isLoading}
+            onPress={() => {
+              handlerUpdateInvoice();
+            }}
+          >
+            Simpan
+          </ButtonCustom>
+        </StackCustom>
+        <Spacing />
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/process.tsx

@@ -1,13 +1,6 @@
-import {
+import { BaseBox, StackCustom, TextCustom, ViewWrapper } from "@/components";
-  BaseBox,
+import MoneyTransferAnimation from "@/components/_ShareComponent/MoneyTransferAnimation";
-  Grid,
+import { View } from "react-native";
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { MainColor } from "@/constants/color-palet";
-import { Ionicons } from "@expo/vector-icons";
-import { ActivityIndicator } from "react-native";
 
 export default function DonationProcess() {
   return (
@@ -16,13 +9,16 @@ export default function DonationProcess() {
         <BaseBox>
           <StackCustom>
             <TextCustom align="center" bold>
-              Admin sedang memproses transaksi donasimu
+              Admin sedang memvalidasi data dan bukti transfer anda. Mohon
+              tunggu proses ini selesai.
             </TextCustom>
-            <ActivityIndicator size="large" color={MainColor.yellow} />
+            <View style={{ alignItems: "center", justifyContent: "center" }}>
+              <MoneyTransferAnimation />
+            </View>
           </StackCustom>
         </BaseBox>
 
-        <BaseBox>
+        {/* <BaseBox>
           <Grid>
             <Grid.Col span={10} style={{ justifyContent: "center" }}>
               <TextCustom size="small">
@@ -38,7 +34,7 @@ export default function DonationProcess() {
               />
             </Grid.Col>
           </Grid>
-        </BaseBox>
+        </BaseBox> */}
       </ViewWrapper>
     </>
   );

app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/success.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BaseBox,
   Grid,
@@ -7,11 +8,60 @@ import {
   ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
+import { apiDonationGetInvoiceById } from "@/service/api-client/api-donation";
 import { GStyles } from "@/styles/global-styles";
+import { dateTimeView } from "@/utils/dateTimeView";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
 import { FontAwesome6 } from "@expo/vector-icons";
-import dayjs from "dayjs";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function DonationSuccess() {
+  const { id, invoiceId } = useLocalSearchParams();
+  const [data, setData] = useState<any>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id, invoiceId])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetInvoiceById({
+        id: invoiceId as string,
+      });
+
+      console.log("[DATA]", JSON.stringify(response.data, null, 2));
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const listData = [
+    {
+      label: "Bank",
+      value: (data && data?.MasterBank?.namaBank) || "-",
+    },
+    {
+      label: "Rekening Penerima",
+      value: (data && data?.MasterBank?.namaAkun) || "-",
+    },
+    {
+      label: "No Rekening",
+      value: (data && data?.MasterBank?.norek) || "-",
+    },
+    {
+      label: "Jumlah Donasi",
+      value: (data && formatCurrencyDisplay(data?.nominal)) || "-",
+    },
+    {
+      label: "Tanggal",
+      value: (data && dateTimeView({ date: data?.createdAt })) || "-",
+    },
+  ];
+
   return (
     <ViewWrapper>
       <StackCustom>
@@ -59,25 +109,4 @@ export default function DonationSuccess() {
   );
 }
 
-const listData = [
+
-  {
-    label: "Bank",
-    value: " BCA",
-  },
-  {
-    label: "Rekening Penerima",
-    value: "Himpunan Pengusaha Muda Indonesia",
-  },
-  {
-    label: "No Rekening",
-    value: "2304235678854332",
-  },
-  {
-    label: "Jumlah Donasi",
-    value: "Rp. 750.000",
-  },
-  {
-    label: "Tanggal",
-    value: `${dayjs(new Date()).format("DD/MM/YYYY")}`,
-  },
-];

app/(application)/(user)/donation/[id]/(transaction-flow)/[transaction]/invoice.tsx

@@ -1,110 +0,0 @@
-import {
-  BaseBox,
-  ButtonCenteredOnly,
-  ButtonCustom,
-  Grid,
-  InformationBox,
-  Spacing,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { MainColor } from "@/constants/color-palet";
-import { router, useLocalSearchParams } from "expo-router";
-
-export default function DonationInvoice() {
-  const { id, transaction } = useLocalSearchParams();
-  return (
-    <>
-      <ViewWrapper>
-        <StackCustom>
-          <InformationBox text={`Mohon transfer donasi anda ke rekening dibawah dengan Id: ${transaction}`} />
-          <BaseBox>
-            <StackCustom gap={"xs"}>
-              <TextCustom>Nama BANK</TextCustom>
-              <TextCustom>Nama Penerima</TextCustom>
-              <Spacing height={10} />
-
-              <BaseBox backgroundColor={MainColor.soft_darkblue}>
-                <Grid containerStyle={{ justifyContent: "center" }}>
-                  <Grid.Col
-                    span={8}
-                    style={{
-                      justifyContent: "center",
-                    }}
-                  >
-                    <TextCustom size="xlarge" bold color="yellow">
-                      4567898765433567
-                    </TextCustom>
-                  </Grid.Col>
-                  <Grid.Col
-                    span={4}
-                    style={{
-                      alignItems: "flex-end",
-                    }}
-                  >
-                    <ButtonCustom>Salin</ButtonCustom>
-                  </Grid.Col>
-                </Grid>
-              </BaseBox>
-            </StackCustom>
-          </BaseBox>
-
-          <BaseBox>
-            <StackCustom gap={"xs"}>
-              <TextCustom>Jumlah Transaksi</TextCustom>
-
-              <Spacing height={10} />
-
-              <BaseBox backgroundColor={MainColor.soft_darkblue}>
-                <Grid containerStyle={{ justifyContent: "center" }}>
-                  <Grid.Col
-                    span={8}
-                    style={{
-                      justifyContent: "center",
-                    }}
-                  >
-                    <TextCustom size="xlarge" bold color="yellow">
-                      Rp. 1.000.000
-                    </TextCustom>
-                  </Grid.Col>
-                  <Grid.Col
-                    span={4}
-                    style={{
-                      alignItems: "flex-end",
-                    }}
-                  >
-                    <ButtonCustom>Salin</ButtonCustom>
-                  </Grid.Col>
-                </Grid>
-              </BaseBox>
-            </StackCustom>
-          </BaseBox>
-
-          <BaseBox>
-            <StackCustom>
-              <TextCustom>Upload bukti transfer anda.</TextCustom>
-              <ButtonCenteredOnly
-                onPress={() => {
-                  router.push("/(application)/(image)/take-picture/123");
-                }}
-                icon="upload"
-              >
-                Upload
-              </ButtonCenteredOnly>
-            </StackCustom>
-          </BaseBox>
-
-          <ButtonCustom
-            onPress={() => {
-              router.push(`/donation/${id}/(transaction-flow)/process`);
-            }}
-          >
-            Saya Sudah Transfer
-          </ButtonCustom>
-        </StackCustom>
-        <Spacing />
-      </ViewWrapper>
-    </>
-  );
-}

app/(application)/(user)/donation/[id]/(transaction-flow)/index.tsx

@@ -9,15 +9,43 @@ import {
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { LOCAL_STORAGE_KEY } from "@/constants/local-storage-key";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
 import { Ionicons } from "@expo/vector-icons";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
 
 export default function InvestmentInputDonation() {
   const { id } = useLocalSearchParams();
+  const [nominal, setNominal] = useState<number>(0);
+
+  const handlerSubmit = async () => {
+    try {
+      await AsyncStorage.setItem(
+        LOCAL_STORAGE_KEY.transactionDonation,
+        JSON.stringify({ nominal: nominal.toString() })
+      );
+      router.replace(`/donation/${id}/select-bank`);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const displayJumlah = formatCurrencyDisplay(nominal);
+
+  const handleChangeCurrency = (text: string) => {
+    const numeric = text.replace(/\D/g, "");
+    setNominal(Number(numeric));
+  };
+
   const bottomComponent = (
     <BoxButtonOnFooter>
       <ButtonCustom
-        onPress={() => router.replace(`/donation/${id}/select-bank`)}
+        disabled={nominal < 10000 || nominal === 0}
+        onPress={() => {
+          handlerSubmit();
+        }}
       >
         Lanjutan
       </ButtonCustom>
@@ -27,7 +55,7 @@ export default function InvestmentInputDonation() {
     <>
       <ViewWrapper footerComponent={bottomComponent}>
         {listData.map((item, i) => (
-          <BaseBox key={i}>
+          <BaseBox key={i} onPress={() => setNominal(item.value)}>
             <Grid>
               <Grid.Col span={8}>
                 <TextCustom bold size="large">
@@ -48,9 +76,12 @@ export default function InvestmentInputDonation() {
 
         <BaseBox>
           <TextInputCustom
+            keyboardType="numeric"
             label="Nominal lainnya"
             placeholder="0"
             iconLeft="Rp."
+            value={displayJumlah}
+            onChangeText={(value) => handleChangeCurrency(value)}
           />
           <TextCustom size="small" color="gray">
             Minimal donasi Rp. 10.000

app/(application)/(user)/donation/[id]/(transaction-flow)/select-bank.tsx

@@ -5,24 +5,84 @@ import {
   ViewWrapper,
 } from "@/components";
 import { RadioCustom, RadioGroup } from "@/components/Radio/RadioCustom";
-import { dummyMasterBank } from "@/lib/dummy-data/_master/bank";
+import { LOCAL_STORAGE_KEY } from "@/constants/local-storage-key";
+import { useAuth } from "@/hooks/use-auth";
+import { apiDonationCreateInvoice } from "@/service/api-client/api-donation";
+import { apiMasterBank } from "@/service/api-client/api-master";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import { router, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import _ from "lodash";
+import { useEffect, useState } from "react";
 
 export default function DonationSelectBank() {
-  const { id, transaction } = useLocalSearchParams();
+  const { user } = useAuth();
-  const [value, setValue] = useState<any | number>("");
+  const { id } = useLocalSearchParams();
+  const [select, setSelect] = useState<any | number>("");
+  const [listBank, setListBank] = useState<any>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    loadListBank();
+  }, []);
+
+  const loadListBank = async () => {
+    try {
+      const response = await apiMasterBank();
+
+      setListBank(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setListBank([]);
+    }
+  };
+
+  const handlerSubmit = async () => {
+    try {
+      setIsLoading(true);
+      const dataStorage = await AsyncStorage.getItem(
+        LOCAL_STORAGE_KEY.transactionDonation
+      );
+
+      if (dataStorage) {
+        const storage = JSON.parse(dataStorage);
+        const newData = {
+          ...storage,
+          bankId: select,
+          authorId: user?.id,
+        };
+
+        const response = await apiDonationCreateInvoice({
+          id: id as string,
+          data: newData,
+        });
+
+        if (response.success) {
+          const invoiceId = response.data.id;
+
+          await AsyncStorage.removeItem(LOCAL_STORAGE_KEY.transactionDonation);
+
+          router.replace(
+            `/(application)/(user)/donation/[id]/(transaction-flow)/${invoiceId}/invoice`
+          );
+        } else {
+          console.log("[FAILED]", response);
+        }
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   const buttonSubmit = () => {
     return (
       <>
         <BoxButtonOnFooter>
           <ButtonCustom
-            onPress={() =>
+            isLoading={isLoading}
-              router.replace(
+            disabled={!select}
-                `/(application)/(user)/donation/${id}/(transaction-flow)/${transaction}/invoice`
+            onPress={() => handlerSubmit()}
-              )
-            }
           >
             Pilih
           </ButtonCustom>
@@ -32,12 +92,14 @@ export default function DonationSelectBank() {
   };
   return (
     <ViewWrapper footerComponent={buttonSubmit()}>
-      <RadioGroup value={value} onChange={setValue}>
+      <RadioGroup value={select} onChange={setSelect}>
-        {dummyMasterBank.map((item) => (
+        {_.isEmpty(listBank)
-          <BaseBox key={item.name}>
+          ? []
-            <RadioCustom label={item.name} value={item.code} />
+          : listBank?.map((item: any, index: number) => (
-          </BaseBox>
+              <BaseBox key={index}>
-        ))}
+                <RadioCustom label={item.namaBank} value={item.id} />
+              </BaseBox>
+            ))}
       </RadioGroup>
     </ViewWrapper>
   );

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

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BackButton,
   DotButton,
@@ -14,16 +15,43 @@ import Donation_ButtonStatusSection from "@/screens/Donation/ButtonStatusSection
 import Donation_ComponentBoxDetailData from "@/screens/Donation/ComponentBoxDetailData";
 import Donation_ComponentStoryFunrising from "@/screens/Donation/ComponentStoryFunrising";
 import Donation_ProgressSection from "@/screens/Donation/ProgressSection";
+import { apiDonationGetOne } from "@/service/api-client/api-donation";
 import { FontAwesome6 } 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 DonasiDetailStatus() {
   const { id, status } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
   const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
 
+  const [data, setData] = useState<any>();
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetOne({
+        id: id as string,
+        category: "permanent",
+      });
+
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
   const handlePress = (item: IMenuDrawerItem) => {
     console.log("PATH ", item.path);
     router.navigate(item.path as any);
@@ -46,13 +74,22 @@ export default function DonasiDetailStatus() {
       />
       <ViewWrapper>
         <Donation_ComponentBoxDetailData
+          data={data}
           bottomSection={
-            status === "publish" && <Donation_ProgressSection id={id as string} />
+            status === "publish" && (
+              <Donation_ProgressSection id={id as string} />
+            )
           }
         />
-        <Donation_ComponentStoryFunrising id={id as string} />
+        <Donation_ComponentStoryFunrising
+          id={id as string}
+          dataStory={data?.CeritaDonasi}
+        />
         <Spacing />
-        <Donation_ButtonStatusSection status={status as string} />
+        <Donation_ButtonStatusSection
+          id={id as string}
+          status={status as string}
+        />
         <Spacing />
       </ViewWrapper>
 

app/(application)/(user)/donation/[id]/detail-story.tsx

@@ -1,27 +1,42 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   DummyLandscapeImage,
   StackCustom,
   TextCustom,
   ViewWrapper,
 } from "@/components";
-import { useLocalSearchParams } from "expo-router";
+import { apiDonationGetOne } from "@/service/api-client/api-donation";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function DonationDetailStory() {
   const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any>();
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetOne({
+        id: id as string,
+        category: "permanent",
+      });
+
+      setData(response.data.CeritaDonasi);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
   return (
     <ViewWrapper>
       <StackCustom>
-        <TextCustom>
+        <TextCustom>{data?.pembukaan || "-"}</TextCustom>
-          Lorem {id} ipsum dolor, sit amet consectetur adipisicing elit. Fuga
+        <DummyLandscapeImage imageId={data?.imageId} />
-          quasi nam nesciunt nisi corporis alias modi, pariatur sit totam rem
+        <TextCustom>{data?.cerita || "-"}</TextCustom>
-          fugiat ex similique magni, aliquam maiores officiis iure at adipisci.
-        </TextCustom>
-        <DummyLandscapeImage />
-        <TextCustom>
-          Lorem {id} ipsum dolor, sit amet consectetur adipisicing elit. Fuga
-          quasi nam nesciunt nisi corporis alias modi, pariatur sit totam rem
-          fugiat ex similique magni, aliquam maiores officiis iure at adipisci.
-        </TextCustom>
       </StackCustom>
     </ViewWrapper>
   );

app/(application)/(user)/donation/[id]/edit-rekening.tsx

@@ -1,7 +1,80 @@
-import { ViewWrapper, StackCustom, InformationBox, TextInputCustom, Spacing, ButtonCustom } from "@/components";
+/* eslint-disable react-hooks/exhaustive-deps */
-import { router } from "expo-router";
+import {
+  ViewWrapper,
+  StackCustom,
+  InformationBox,
+  TextInputCustom,
+  Spacing,
+  ButtonCustom,
+} from "@/components";
+import {
+  apiDonationGetOne,
+  apiDonationUpdateData,
+} from "@/service/api-client/api-donation";
+import { router, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function DonationEditRekening() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState({
+    namaBank: "",
+    rekening: "",
+  });
+  const [isLoading, setLoading] = useState(false);
+
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetOne({
+        id: id as string,
+        category: "permanent",
+      });
+
+      const resData = response.data;
+      console.log("[RESPONSE]", JSON.stringify(resData, null, 2));
+
+      setData({
+        namaBank: resData.namaBank,
+        rekening: resData.rekening,
+      });
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handlerSubmitUpdate = async () => {
+    try {
+      setLoading(true);
+
+      const response = await apiDonationUpdateData({
+        id: id as string,
+        data: data,
+        category: "edit-bank-account",
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengupdate data bank",
+        });
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Data bank berhasil diupdate",
+      });
+      router.back();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <ViewWrapper>
       <StackCustom gap={"xs"}>
@@ -10,17 +83,22 @@ export default function DonationEditRekening() {
           label="Nama Bank"
           placeholder="Masukkan nama bank"
           required
+          value={data.namaBank}
+          onChangeText={(value) => setData({ ...data, namaBank: value })}
         />
         <TextInputCustom
           label="Nomor Rekening"
           placeholder="Masukkan nomor rekening"
           required
+          value={data.rekening}
+          onChangeText={(value) => setData({ ...data, rekening: value })}
         />
 
         <Spacing />
         <ButtonCustom
+          isLoading={isLoading}
           onPress={() => {
-            router.back();
+            handlerSubmitUpdate();
           }}
         >
           Update
@@ -29,4 +107,4 @@ export default function DonationEditRekening() {
       <Spacing />
     </ViewWrapper>
   );
-}
+}

app/(application)/(user)/donation/[id]/edit-story.tsx

@@ -1,16 +1,97 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-    ButtonCenteredOnly,
+  ButtonCenteredOnly,
-    ButtonCustom,
+  ButtonCustom,
-    InformationBox,
+  InformationBox,
-    LandscapeFrameUploaded,
+  LandscapeFrameUploaded,
-    Spacing,
+  Spacing,
-    StackCustom,
+  StackCustom,
-    TextAreaCustom,
+  TextAreaCustom,
-    ViewWrapper
+  ViewWrapper,
 } from "@/components";
-import { router } from "expo-router";
+import API_IMAGE from "@/constants/api-storage";
+import DIRECTORY_ID from "@/constants/directory-id";
+import {
+  apiDonationGetOne,
+  apiDonationUpdateData,
+} from "@/service/api-client/api-donation";
+import { uploadFileService } from "@/service/upload-service";
+import pickFile from "@/utils/pickFile";
+import { router, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function DonationEditStory() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any>();
+  const [imageStory, setImageStory] = useState<string | null>(null);
+  const [isLoading, setLoading] = useState(false);
+
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetOne({
+        id: id as string,
+        category: "permanent",
+      });
+
+      setData(response.data.CeritaDonasi);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handlerSubmitUpdate = async () => {
+    let newData;
+    try {
+      setLoading(true);
+
+      newData = {
+        ...data,
+      };
+
+      if (imageStory) {
+        const responseUploadImageDonasi = await uploadFileService({
+          imageUri: imageStory,
+          dirId: DIRECTORY_ID.donasi_cerita_image,
+        });
+
+        newData = {
+          ...data,
+          newImageId: responseUploadImageDonasi.data.id,
+        };
+      }
+
+      const response = await apiDonationUpdateData({
+        id: id as string,
+        data: newData,
+        category: "edit-story",
+      });
+
+      console.log("[RESPONSE]", JSON.stringify(response, null, 2));
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal membuat donasi",
+        });
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Donasi berhasil disimpan",
+      });
+      router.back();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <ViewWrapper>
       <StackCustom gap={"xs"}>
@@ -21,12 +102,23 @@ export default function DonationEditStory() {
           required
           showCount
           maxLength={1000}
+          value={data?.pembukaan}
+          onChangeText={(value) => setData({ ...data, pembukaan: value })}
         />
 
-        <LandscapeFrameUploaded />
+        <LandscapeFrameUploaded
+          image={
+            imageStory ? imageStory : API_IMAGE.GET({ fileId: data?.imageId })
+          }
+        />
         <ButtonCenteredOnly
           onPress={() => {
-            router.push("/(application)/(image)/take-picture/123");
+            pickFile({
+              allowedType: "image",
+              setImageUri: ({ uri }) => {
+                setImageStory(uri);
+              },
+            });
           }}
           icon="upload"
         >
@@ -39,12 +131,15 @@ export default function DonationEditStory() {
           required
           showCount
           maxLength={1000}
+          value={data?.cerita}
+          onChangeText={(value) => setData({ ...data, cerita: value })}
         />
 
         <Spacing height={40} />
         <ButtonCustom
+          isLoading={isLoading}
           onPress={() => {
-            router.back();
+            handlerSubmitUpdate();
           }}
         >
           Update

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

@@ -1,78 +1,275 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-    ButtonCenteredOnly,
+  ButtonCenteredOnly,
-    ButtonCustom,
+  ButtonCustom,
-    InformationBox,
+  InformationBox,
-    LandscapeFrameUploaded,
+  LandscapeFrameUploaded,
-    SelectCustom,
+  LoaderCustom,
-    Spacing,
+  SelectCustom,
-    StackCustom,
+  Spacing,
-    TextInputCustom,
+  StackCustom,
-    ViewWrapper,
+  TextInputCustom,
+  ViewWrapper,
 } from "@/components";
-import { dummyDonasiDurasi } from "@/lib/dummy-data/donasi/durasi";
+import API_IMAGE from "@/constants/api-storage";
-import { dummyDonasiKategori } from "@/lib/dummy-data/donasi/kategori";
+import DIRECTORY_ID from "@/constants/directory-id";
-import { router } from "expo-router";
+import {
+  apiDonationGetOne,
+  apiDonationUpdateData,
+} from "@/service/api-client/api-donation";
+import { apiMasterDonation } from "@/service/api-client/api-master";
+import { 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 IEditDonation {
+  donasiMaster_KategoriId: string;
+  donasiMaster_DurasiId: string;
+  title: string;
+  target: string;
+  imageId: string;
+}
 
 export default function DonationEdit() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<IEditDonation>({
+    donasiMaster_DurasiId: "",
+    donasiMaster_KategoriId: "",
+    title: "",
+    target: "",
+    imageId: "",
+  });
+
+  const [image, setImage] = useState<string | null>(null);
+  const [listCategory, setListCategory] = useState<any[]>([]);
+  const [listDuration, setListDuration] = useState<any[]>([]);
+  const [loadList, setLoadList] = useState<boolean>(false);
+  const [isLoading, setLoading] = useState(false);
+
+  const displayTarget = formatCurrencyDisplay(data?.target);
+  const handleChangeCurrency = (field: keyof typeof data) => (text: string) => {
+    const numeric = text.replace(/\D/g, "");
+    setData((prev: any) => ({ ...prev, [field]: numeric }));
+  };
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+      onLoadList();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetOne({
+        id: id as string,
+        category: "permanent",
+      });
+
+      if (response.success) {
+        setData({
+          donasiMaster_DurasiId: response.data.donasiMaster_DurasiId,
+          donasiMaster_KategoriId: response.data.donasiMaster_KategoriId,
+          title: response.data.title,
+          target: response.data.target,
+          imageId: response.data.imageId,
+        });
+      }
+
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiMasterDonation({ category: "" });
+
+      setListCategory(response.data.category);
+      setListDuration(response.data.duration);
+    } catch (error) {
+      console.log(["ERROR"], error);
+      setListCategory([]);
+      setListDuration([]);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
+  const validateData = async () => {
+    if (
+      !data.donasiMaster_DurasiId ||
+      !data.donasiMaster_KategoriId ||
+      !data.title ||
+      !data.target ||
+      !data.imageId
+    ) {
+      Toast.show({
+        type: "error",
+        text1: "Harap lengkapi data",
+      });
+
+      return false;
+    }
+
+    return true;
+  };
+
+  const handlerSubmitUpdate = async () => {
+    const isValid = await validateData();
+    if (!isValid) {
+      return;
+    }
+
+    try {
+      let newData;
+
+      newData = {
+        ...data,
+      };
+      setLoading(true);
+
+      if (image && image) {
+        const uploadNewImage = await uploadFileService({
+          dirId: DIRECTORY_ID.donasi_image,
+          imageUri: image,
+        });
+
+        if (!uploadFileService) {
+          Toast.show({
+            type: "error",
+            text1: "Gagal mengunggah gambar",
+          });
+          return;
+        }
+
+        newData = {
+          ...data,
+          newImageId: uploadNewImage.data.id,
+        };
+      }
+
+      const response = await apiDonationUpdateData({
+        id: id as string,
+        data: newData,
+        category: "edit-donation",
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: response.message,
+        });
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Donasi berhasil diperbarui",
+      });
+
+      router.back();
+    } catch (error) {
+      console.log("[ERROR UPDATE DONASI]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <ViewWrapper>
-      <StackCustom gap={"xs"}>
+      <InformationBox text="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita penggalangan dana." />
-        <InformationBox text="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita penggalangan dana." />
+      {!data || loadList ? (
+        <LoaderCustom />
+      ) : (
+        <StackCustom gap={"xs"}>
+          <TextInputCustom
+            label="Judul Donasi"
+            placeholder="Masukkan Judul Donasi"
+            required
+            value={data?.title}
+            onChangeText={(value) => setData({ ...data, title: value })}
+          />
+          <TextInputCustom
+            iconLeft="Rp."
+            label="Target Donasi"
+            placeholder="Masukkan Target Donasi"
+            required
+            keyboardType="numeric"
+            value={displayTarget}
+            onChangeText={handleChangeCurrency("target")}
+          />
 
-        <TextInputCustom
+          <LandscapeFrameUploaded
-          label="Judul Donasi"
+            image={image ? image : API_IMAGE.GET({ fileId: data?.imageId })}
-          placeholder="Masukkan Judul Donasi"
+          />
-          required
+          <ButtonCenteredOnly
-        />
+            onPress={() => {
-        <TextInputCustom
+              pickFile({
-          label="Target Donasi"
+                setImageUri: ({ uri }) => {
-          placeholder="Masukkan Target Donasi"
+                  setImage(uri);
-          required
+                },
-          keyboardType="numeric"
+                allowedType: "image",
-        />
+              });
+            }}
+            icon="upload"
+          >
+            Upload
+          </ButtonCenteredOnly>
+          <Spacing />
 
-        <LandscapeFrameUploaded />
+          <SelectCustom
-        <ButtonCenteredOnly
+            data={
-          onPress={() => {
+              _.isEmpty(listCategory)
-            router.push("/(application)/(image)/take-picture/123");
+                ? []
-          }}
+                : listCategory?.map((item) => ({
-          icon="upload"
+                    label: item.name,
-        >
+                    value: item.id,
-          Upload
+                  }))
-        </ButtonCenteredOnly>
+            }
-        <Spacing />
+            label="Pilih Kategori Donasi"
+            placeholder="Pilih Kategori Donasi"
+            required
+            value={data?.donasiMaster_KategoriId}
+            onChange={(value: any) =>
+              setData({ ...data, donasiMaster_KategoriId: value })
+            }
+          />
 
-        <SelectCustom
+          <SelectCustom
-          data={dummyDonasiKategori.map((item) => ({
+            data={
-            label: item.label,
+              _.isEmpty(listDuration)
-            value: item.value,
+                ? []
-          }))}
+                : listDuration?.map((item) => ({
-          onChange={(value) => console.log(value)}
+                    label: item.name + " hari",
-          label="Pilih Kategori Donasi"
+                    value: item.id,
-          placeholder="Pilih Kategori Donasi"
+                  }))
-          required
+            }
-        />
+            label="Pilih Durasi Donasi"
+            placeholder="Pilih Durasi Donasi"
+            required
+            value={data?.donasiMaster_DurasiId}
+            onChange={(value: any) =>
+              setData({ ...data, donasiMaster_DurasiId: value })
+            }
+          />
 
-        <SelectCustom
+          <Spacing />
-          data={dummyDonasiDurasi.map((item) => ({
+          <ButtonCustom
-            label: item.label,
+            isLoading={isLoading}
-            value: item.value,
+            onPress={() => {
-          }))}
+              handlerSubmitUpdate();
-          onChange={(value) => console.log(value)}
+            }}
-          label="Pilih Durasi Donasi"
+          >
-          placeholder="Pilih Durasi Donasi"
+            Update
-          required
+          </ButtonCustom>
-        />
+        </StackCustom>
-
+      )}
-        <Spacing />
-        <ButtonCustom
-          onPress={() => {
-            router.back();
-          }}
-        >
-          Update
-        </ButtonCustom>
-      </StackCustom>
       <Spacing />
     </ViewWrapper>
   );

app/(application)/(user)/donation/[id]/fund-disbursement.tsx

@@ -1,17 +1,71 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BaseBox,
   ButtonCenteredOnly,
   Grid,
   InformationBox,
+  LoaderCustom,
   StackCustom,
   TextCustom,
   ViewWrapper,
 } from "@/components";
+import {
+  apiDonationDisbursementOfFundsListById,
+  apiDonationGetOne,
+} from "@/service/api-client/api-donation";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
 import dayjs from "dayjs";
-import { router, useLocalSearchParams } from "expo-router";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import React, { useState } from "react";
 
 export default function DonationFundDisbursement() {
   const { id } = useLocalSearchParams();
+
+  const [data, setData] = useState({
+    totalPencairan: 0,
+    akumulasiPencairan: 0,
+  });
+
+  const [listData, setListData] = React.useState<any[] | null>(null);
+  const [loadData, setLoadData] = React.useState(false);
+
+  useFocusEffect(
+    React.useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadData(true);
+
+      const responseData = await apiDonationGetOne({
+        id: id as string,
+        category: "permanent",
+      });
+
+      if (responseData.success) {
+        setData({
+          totalPencairan: responseData.data.totalPencairan,
+          akumulasiPencairan: responseData.data.akumulasiPencairan,
+        });
+      }
+
+      const responseList = await apiDonationDisbursementOfFundsListById({
+        id: id as string,
+      });
+
+      if (responseList.success) {
+        setListData(responseList.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadData(false);
+    }
+  };
+
   return (
     <>
       <ViewWrapper>
@@ -20,47 +74,50 @@ export default function DonationFundDisbursement() {
           <Grid>
             <Grid.Col span={6}>
               <TextCustom bold color="yellow">
-                Rp. 0
+                Rp. {formatCurrencyDisplay(data?.totalPencairan)}
               </TextCustom>
               <TextCustom size="small">Total Pencairan Dana</TextCustom>
             </Grid.Col>
             <Grid.Col span={6}>
               <TextCustom bold color="yellow">
-                0 kali
+                {data?.akumulasiPencairan} kali
               </TextCustom>
               <TextCustom size="small">Akumulasi Pencairan</TextCustom>
             </Grid.Col>
           </Grid>
         </BaseBox>
 
-        {Array.from({ length: 10 }).map((_, index) => (
+        {loadData ? (
-          <BaseBox key={index}>
+          <LoaderCustom />
-            <StackCustom>
+        ) : _.isEmpty(listData) ? (
-              <Grid>
+          <TextCustom align="center" color="gray">
-                <Grid.Col span={8}>
+            Belum ada data
-                  <TextCustom bold>Pencairan ke - {index + 1}</TextCustom>
+          </TextCustom>
-                </Grid.Col>
+        ) : (
-                <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+          listData?.map((item, index) => (
-                  <TextCustom>{dayjs().format("DD MMM YYYY")}</TextCustom>
+            <BaseBox key={index}>
-                </Grid.Col>
+              <StackCustom>
-              </Grid>
+                <Grid>
-              <TextCustom>
+                  <Grid.Col span={8}>
-                Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                    <TextCustom bold>{item?.title}</TextCustom>
-                Nesciunt dolor ad sit? Eaque rem nihil natus, id, esse possimus
+                  </Grid.Col>
-                perferendis provident velit illo consectetur distinctio ab
+                  <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
-                accusantium quis earum omnis!
+                    <TextCustom>{dayjs(item?.createdAt).format("DD MMM YYYY")}</TextCustom>
-              </TextCustom>
+                  </Grid.Col>
-              <ButtonCenteredOnly
+                </Grid>
-                onPress={() => {
+                <TextCustom>{item?.deskripsi}</TextCustom>
-                  router.navigate(`/(application)/(file)/${id}`);
+                <ButtonCenteredOnly
-                }}
+                  onPress={() => {
-                icon="file-text"
+                    router.navigate(`/(application)/(image)/preview-image/${item?.imageId}`);
-              >
+                  }}
-                Bukti Transaksi
+                  icon="file-text"
-              </ButtonCenteredOnly>
+                >
-            </StackCustom>
+                  Bukti Transaksi
-          </BaseBox>
+                </ButtonCenteredOnly>
-        ))}
+              </StackCustom>
+            </BaseBox>
+          ))
+        )}
       </ViewWrapper>
     </>
   );

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

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BackButton,
   BoxButtonOnFooter,
@@ -9,26 +10,75 @@ import {
   ViewWrapper,
 } from "@/components";
 import { IconNews } from "@/components/_Icon";
+import { useAuth } from "@/hooks/use-auth";
 import Donation_ComponentBoxDetailData from "@/screens/Donation/ComponentBoxDetailData";
 import Donation_ComponentInfoFundrising from "@/screens/Donation/ComponentInfoFundrising";
 import Donation_ComponentStoryFunrising from "@/screens/Donation/ComponentStoryFunrising";
 import Donation_ProgressSection from "@/screens/Donation/ProgressSection";
-import { router, Stack, useLocalSearchParams } from "expo-router";
+import { apiDonationGetOne } from "@/service/api-client/api-donation";
-import { useState } from "react";
+import { countDownAndCondition } from "@/utils/countDownAndCondition";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import { useCallback, useEffect, useState } from "react";
 
 export default function DonasiDetailBeranda() {
+  const { user } = useAuth();
   const { id } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
+  const [data, setData] = useState<any>();
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetOne({
+        id: id as string,
+        category: "permanent",
+      });
+
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const [value, setValue] = useState({
+    sisa: 0,
+    reminder: false,
+  });
+
+  useEffect(() => {
+    updateCountDown();
+  }, [data]);
+
+  const updateCountDown = () => {
+    const countDown = countDownAndCondition({
+      duration: data?.DonasiMaster_Durasi?.name,
+      publishTime: data?.publishTime,
+    });
+
+    setValue({
+      sisa: countDown.durationDay,
+      reminder: countDown.reminder,
+    });
+  };
 
   const buttonSection = (
     <>
       <BoxButtonOnFooter>
         <ButtonCustom
-          onPress={() =>
+          disabled={value?.reminder}
-            router.navigate(`/donation/${id}/(transaction-flow)`)
+          onPress={() => router.navigate(`/donation/${id}/(transaction-flow)`)}
-          }
         >
-          Donasi
+          {value?.reminder ? "Waktu berakhir" : "Donasi"}
         </ButtonCustom>
       </BoxButtonOnFooter>
     </>
@@ -40,16 +90,25 @@ export default function DonasiDetailBeranda() {
         options={{
           title: `Detail Donasi`,
           headerLeft: () => <BackButton />,
-          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+          headerRight: () =>
+            user?.id === data?.Author?.id ? (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ) : null,
         }}
       />
       <ViewWrapper footerComponent={buttonSection}>
         <StackCustom>
           <Donation_ComponentBoxDetailData
-            bottomSection={<Donation_ProgressSection id={id as string} />}
+            sisaHari={value.sisa}
+            reminder={value.reminder}
+            data={data}
+            bottomSection={<Donation_ProgressSection id={id as string} progres={Number(data?.progres) || 0} />}
+          />
+          <Donation_ComponentInfoFundrising dataAuthor={data?.Author} />
+          <Donation_ComponentStoryFunrising
+            id={id as string}
+            dataStory={data?.CeritaDonasi}
           />
-          <Donation_ComponentInfoFundrising id={id as string} />
-          <Donation_ComponentStoryFunrising id={id as string} />
         </StackCustom>
       </ViewWrapper>
 

app/(application)/(user)/donation/[id]/infromation-fundrising.tsx

@@ -1,32 +1,68 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-  AvatarCustom,
+  AvatarComp,
   BaseBox,
   ButtonCustom,
-  CenterCustom,
   Grid,
+  LoaderCustom,
   Spacing,
   TextCustom,
   ViewWrapper
 } from "@/components";
 import Donation_BoxPublish from "@/screens/Donation/BoxPublish";
-import React from "react";
+import { apiDonationFundrising } from "@/service/api-client/api-donation";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import React, { useCallback, useState } from "react";
+import { View } from "react-native";
 
 export default function DonationInformationFunrising() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any>();
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiDonationFundrising({ id: id as string });
+
+      setData(response?.data?.user);
+      setList(response?.data?.donasi);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
   return (
     <>
       <ViewWrapper>
         <BaseBox>
           <Grid>
             <Grid.Col span={6} style={{ justifyContent: "center" }}>
-              <CenterCustom>
+              <View
-                <AvatarCustom size="lg" />
+                style={{
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 10,
+                }}
+              >
+                <AvatarComp size="lg" fileId={data?.Profile?.imageId} />
                 <TextCustom bold size="large" truncate>
-                  @Username
+                  @{data?.username}
                 </TextCustom>
-              </CenterCustom>
+              </View>
             </Grid.Col>
             <Grid.Col span={6} style={{ justifyContent: "center" }}>
-              <ButtonCustom href={`/profile/1234`}>
+              <ButtonCustom href={`/profile/${data?.Profile?.id}`}>
                 Kunjungi Profile
               </ButtonCustom>
             </Grid.Col>
@@ -35,9 +71,15 @@ export default function DonationInformationFunrising() {
 
         <Spacing />
 
-        {Array.from({ length: 10 }).map((_, index) => (
+        {loadList ? (
-          <Donation_BoxPublish key={index} id={index.toString()} />
+          <LoaderCustom />
-        ))}
+        ) : _.isEmpty(list) ? (
+          <TextCustom align="center" color="gray" size="small">Belum ada data</TextCustom>
+        ) : (
+          list?.map((item: any, index: number) => (
+            <Donation_BoxPublish key={index} id={item?.id} data={item} />
+          ))
+        )}
       </ViewWrapper>
     </>
   );

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

@@ -1,46 +1,93 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BaseBox,
   Grid,
+  LoaderCustom,
+  Spacing,
   StackCustom,
   TextCustom,
   ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
+import { apiAdminDonationListOfDonaturById } from "@/service/api-admin/api-admin-donation";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
 import { FontAwesome6 } from "@expo/vector-icons";
 import dayjs from "dayjs";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function Donation_ListOfDonatur() {
+  const { id } = useLocalSearchParams();
+  const [listData, setListData] = useState<any[] | null>(null);
+  const [loadData, setLoadData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadData(true);
+      const response = await apiAdminDonationListOfDonaturById({
+        id: id as string,
+      });
+
+
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadData(false);
+    }
+  };
+
   return (
     <>
       <ViewWrapper>
-        {Array.from({ length: 10 }).map((_, index) => (
+        {loadData ? (
-          <BaseBox key={index}>
+          <LoaderCustom />
-            <Grid>
+        ) : _.isEmpty(listData) ? (
-              <Grid.Col
+          <TextCustom bold align="center">
-                span={3}
+            Belum ada donatur
-                style={{ alignItems: "center", justifyContent: "center" }}
+          </TextCustom>
-              >
+        ) : (
-                <FontAwesome6
+          listData?.map((item: any, index: number) => (
-                  name="face-smile-wink"
+            <BaseBox key={index}>
-                  size={50}
+              <Grid>
-                  style={{ color: MainColor.yellow }}
+                <Grid.Col
-                />
+                  span={3}
-              </Grid.Col>
+                  style={{ alignItems: "center", justifyContent: "center" }}
-              <Grid.Col span={9}>
+                >
-                <StackCustom gap={"xs"}>
+                  <FontAwesome6
+                    name="face-smile-wink"
+                    size={50}
+                    style={{ color: MainColor.yellow }}
+                  />
+                </Grid.Col>
+                <Grid.Col span={9}>
                   <TextCustom bold size="large">
-                    Username
+                    {item?.Author?.username || "-"}
                   </TextCustom>
-                  <TextCustom>Berdonas sebesar </TextCustom>
+                  <Spacing/>
-                  <TextCustom bold size="large" color="yellow">
+                  <StackCustom gap={"xs"}>
-                    Rp. 100.000
+                    <TextCustom size={"small"}>Berdonas sebesar </TextCustom>
-                  </TextCustom>
+                    <TextCustom bold size="large" color="yellow">
-                  <TextCustom>{dayjs().format("DD MMM YYYY")}</TextCustom>
+                      Rp. {formatCurrencyDisplay(item?.nominal)}
-                </StackCustom>
+                    </TextCustom>
-              </Grid.Col>
+                    <TextCustom>
-            </Grid>
+                      {dayjs(item?.createdAt).format("DD MMM YYYY, HH:mm")}
-          </BaseBox>
+                    </TextCustom>
-        ))}
+                  </StackCustom>
+                </Grid.Col>
+              </Grid>
+            </BaseBox>
+          ))
+        )}
       </ViewWrapper>
     </>
   );

app/(application)/(user)/donation/create-story.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   ButtonCenteredOnly,
   ButtonCustom,
@@ -9,9 +10,107 @@ import {
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
-import { router } from "expo-router";
+import DIRECTORY_ID from "@/constants/directory-id";
+import { useAuth } from "@/hooks/use-auth";
+import {
+  apiDonationCreate,
+  apiDonationGetOne,
+} from "@/service/api-client/api-donation";
+import { uploadFileService } from "@/service/upload-service";
+import pickFile from "@/utils/pickFile";
+import { router, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function DonationCreateStory() {
+  const { user } = useAuth();
+  const { id } = useLocalSearchParams();
+  const [temporary, setTemporary] = useState<any>();
+  const [data, setData] = useState({
+    pembukaan: "",
+    cerita: "",
+    namaBank: "",
+    rekening: "",
+  });
+  const [imageStory, setImageStory] = useState<string | null>(null);
+  const [isLoading, setLoading] = useState(false);
+
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetOne({
+        id: id as string,
+        category: "temporary",
+      });
+
+      setTemporary(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handlerSubmit = async () => {
+    if (_.values(data).includes("")) {
+      Toast.show({
+        type: "error",
+        text1: "Harap isi semua data",
+      });
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const responseUploadImageDonasi = await uploadFileService({
+        imageUri: imageStory,
+        dirId: DIRECTORY_ID.donasi_cerita_image,
+      });
+
+      const newData = {
+        // Data Donasi
+        temporaryId: temporary?.id,
+        authorId: user?.id,
+        title: temporary?.title,
+        target: temporary?.target,
+        donasiMaster_KategoriId: temporary?.donasiMaster_KategoriId,
+        donasiMaster_DurasiId: temporary?.donasiMaster_DurasiId,
+        imageId: temporary?.imageId,
+        // Data Bank
+        namaBank: data.namaBank,
+        rekening: data.rekening,
+        // Data Cerita
+        imageCeritaId: responseUploadImageDonasi.data.id,
+        pembukaan: data.pembukaan,
+        cerita: data.cerita,
+      };
+
+      const response = await apiDonationCreate({
+        data: newData,
+        category: "permanent",
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal membuat donasi",
+        });
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Donasi berhasil disimpan",
+      });
+      router.replace("/donation/status");
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <ViewWrapper>
       <StackCustom gap={"xs"}>
@@ -22,6 +121,8 @@ export default function DonationCreateStory() {
           required
           showCount
           maxLength={1000}
+          value={data.pembukaan}
+          onChangeText={(value) => setData({ ...data, pembukaan: value })}
         />
         <TextAreaCustom
           label="Tujuan Donasi"
@@ -29,12 +130,19 @@ export default function DonationCreateStory() {
           required
           showCount
           maxLength={1000}
+          value={data.cerita}
+          onChangeText={(value) => setData({ ...data, cerita: value })}
         />
 
-        <LandscapeFrameUploaded />
+        <LandscapeFrameUploaded image={imageStory || ""} />
         <ButtonCenteredOnly
           onPress={() => {
-            router.push("/(application)/(image)/take-picture/123");
+            pickFile({
+              allowedType: "image",
+              setImageUri: ({ uri }) => {
+                setImageStory(uri);
+              },
+            });
           }}
           icon="upload"
         >
@@ -47,17 +155,23 @@ export default function DonationCreateStory() {
           label="Nama Bank"
           placeholder="Masukkan nama bank"
           required
+          value={data.namaBank}
+          onChangeText={(value) => setData({ ...data, namaBank: value })}
         />
         <TextInputCustom
           label="Nomor Rekening"
           placeholder="Masukkan nomor rekening"
           required
+          keyboardType="numeric"
+          value={data.rekening}
+          onChangeText={(value) => setData({ ...data, rekening: value })}
         />
 
         <Spacing />
         <ButtonCustom
+          isLoading={isLoading}
           onPress={() => {
-            router.replace(`/donation/(tabs)/status`);
+            handlerSubmit();
           }}
         >
           Simpan

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

@@ -3,17 +3,127 @@ import {
   ButtonCustom,
   InformationBox,
   LandscapeFrameUploaded,
+  LoaderCustom,
   SelectCustom,
   Spacing,
   StackCustom,
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
-import { dummyDonasiDurasi } from "@/lib/dummy-data/donasi/durasi";
+import DIRECTORY_ID from "@/constants/directory-id";
-import { dummyDonasiKategori } from "@/lib/dummy-data/donasi/kategori";
+import { apiDonationCreate } from "@/service/api-client/api-donation";
-import { router } from "expo-router";
+import { apiMasterDonation } from "@/service/api-client/api-master";
+import { uploadFileService } from "@/service/upload-service";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import pickFile from "@/utils/pickFile";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function DonationCreate() {
+  const [listCategory, setListCategory] = useState<any[]>([]);
+  const [listDuration, setListDuration] = useState<any[]>([]);
+  const [loadList, setLoadList] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [image, setImage] = useState<string | null>(null);
+  const [data, setData] = useState({
+    kategoriId: "",
+    title: "",
+    target: "",
+    durasiId: "",
+  });
+
+  const displayTarget = formatCurrencyDisplay(data.target);
+  const handleChangeCurrency = (field: keyof typeof data) => (text: string) => {
+    const numeric = text.replace(/\D/g, "");
+    setData((prev) => ({ ...prev, [field]: numeric }));
+  };
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiMasterDonation({ category: "" });
+
+      setListCategory(response.data.category);
+      setListDuration(response.data.duration);
+    } catch (error) {
+      console.log(["ERROR"], error);
+      setListCategory([]);
+      setListDuration([]);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
+  const validateData = () => {
+    if (!data.title || !data.target || !data.durasiId || !data.kategoriId) {
+      Toast.show({
+        type: "error",
+        text1: "Harap isi semua data",
+      });
+      return false;
+    }
+
+    return true;
+  };
+
+  const handlerSubmit = async () => {
+    if (!validateData()) {
+      return;
+    }
+    try {
+      setIsLoading(true);
+      const responseUploadImage = await uploadFileService({
+        imageUri: image,
+        dirId: DIRECTORY_ID.donasi_image,
+      });
+
+      if (!responseUploadImage.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengunggah gambar",
+        });
+        return;
+      }
+
+      const imageId = responseUploadImage.data.id;
+
+      const newData = {
+        title: data.title,
+        target: data.target,
+        durasiId: data.durasiId,
+        kategoriId: data.kategoriId,
+        imageId: imageId,
+      };
+
+      const response = await apiDonationCreate({
+        data: newData,
+        category: "temporary",
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal membuat donasi",
+        });
+        return;
+      }
+
+      router.push(`/donation/create-story?id=${response.data.id}`);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <ViewWrapper>
       <StackCustom gap={"xs"}>
@@ -23,18 +133,28 @@ export default function DonationCreate() {
           label="Judul Donasi"
           placeholder="Masukkan Judul Donasi"
           required
+          value={data.title}
+          onChangeText={(value) => setData({ ...data, title: value })}
         />
         <TextInputCustom
+          iconLeft="Rp."
           label="Target Donasi"
           placeholder="Masukkan Target Donasi"
           required
           keyboardType="numeric"
+          value={displayTarget}
+          onChangeText={handleChangeCurrency("target")}
         />
 
-        <LandscapeFrameUploaded />
+        <LandscapeFrameUploaded image={image || ""} />
         <ButtonCenteredOnly
           onPress={() => {
-            router.push("/(application)/(image)/take-picture/123");
+            pickFile({
+              allowedType: "image",
+              setImageUri: ({ uri }) => {
+                setImage(uri);
+              },
+            });
           }}
           icon="upload"
         >
@@ -42,31 +162,52 @@ export default function DonationCreate() {
         </ButtonCenteredOnly>
         <Spacing />
 
-        <SelectCustom
+        {loadList ? (
-          data={dummyDonasiKategori.map((item) => ({
+          <LoaderCustom />
-            label: item.label,
+        ) : (
-            value: item.value,
+          <SelectCustom
-          }))}
+            data={
-          onChange={(value) => console.log(value)}
+              _.isEmpty(listCategory)
-          label="Pilih Kategori Donasi"
+                ? []
-          placeholder="Pilih Kategori Donasi"
+                : listCategory?.map((item: any) => ({
-          required
+                    label: item.name,
-        />
+                    value: item.id,
+                  }))
+            }
+            label="Pilih Kategori Donasi"
+            placeholder="Pilih Kategori Donasi"
+            required
+            value={data.kategoriId}
+            onChange={(value: any) => setData({ ...data, kategoriId: value })}
+          />
+        )}
+
+        {loadList ? (
+          <LoaderCustom />
+        ) : (
+          <SelectCustom
+            data={
+              _.isEmpty(listDuration)
+                ? []
+                : listDuration?.map((item: any) => ({
+                    label: item.name + `${" hari"}`,
+                    value: item.id,
+                  }))
+            }
+            label="Pilih Durasi Donasi"
+            placeholder="Pilih Durasi Donasi"
+            required
+            value={data.durasiId}
+            onChange={(value: any) => setData({ ...data, durasiId: value })}
+          />
+        )}
 
-        <SelectCustom
-          data={dummyDonasiDurasi.map((item) => ({
-            label: item.label,
-            value: item.value,
-          }))}
-          onChange={(value) => console.log(value)}
-          label="Pilih Durasi Donasi"
-          placeholder="Pilih Durasi Donasi"
-          required
-        />
         <Spacing />
         <ButtonCustom
+          isLoading={isLoading}
           onPress={() => {
-            router.replace("/donation/create-story");
+            handlerSubmit();
+            // router.push(`/donation/create-story?id=${"dasdsadsa"}`);
           }}
         >
           Selanjutnya

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

@@ -44,6 +44,8 @@ export default function EventBeranda() {
         <TextCustom align="center">Belum ada event</TextCustom>
       ) : (
         listData.map((item: any, index) => (
+
+          
           <Event_BoxPublishSection
             key={index}
             href={`/event/${item.id}/publish`}

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

@@ -0,0 +1,554 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BaseBox,
+  ButtonCustom,
+  CenterCustom,
+  LoaderCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
+import {
+  apiEventConfirmationAction,
+  apiEventGetConfirmation,
+  apiEventJoin,
+} from "@/service/api-client/api-event";
+import { Ionicons } from "@expo/vector-icons";
+import dayjs from "dayjs";
+import isBetween from "dayjs/plugin/isBetween";
+import {
+  Redirect,
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import React, { useCallback, useState } from "react";
+import { View } from "react-native";
+import Toast from "react-native-toast-message";
+
+// Extend Day.js dengan plugin isBetween
+dayjs.extend(isBetween);
+
+interface DataEvent {
+  id: string;
+  title: string;
+  tanggal: Date;
+  tanggalSelesai: Date;
+  lokasi: string;
+  Author: {
+    id: string;
+    username: string;
+    Profile: {
+      id: string;
+      name: string;
+    };
+  };
+}
+
+export default function UserEventConfirmation() {
+  const { token } = useAuth();
+  const { id, userId: authorId } = useLocalSearchParams();
+  const { user } = useAuth();
+  const [data, setData] = useState<DataEvent | null>(null);
+  const [peserta, setPeserta] = useState<boolean | null>(null);
+  const [konfirmasi, setKonfirmasi] = useState<boolean | null>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      checkTokenAndDataParticipants() || console.log("Token is null");
+    }, [token, id, user?.id])
+  );
+
+  const checkTokenAndDataParticipants = async () => {
+    if (!token) {
+      return <Redirect href={`/`} />;
+    }
+
+    try {
+      const response = await apiEventGetConfirmation({
+        id: id as string,
+        userId: user?.id as string,
+      });
+
+      if (response.success) {
+        setData(response.data?.dataEvent);
+        setPeserta(response.data?.peserta);
+        setKonfirmasi(response.data?.kehadiran);
+      }
+    } catch (error) {
+      console.log("[ERROR CONFIRMATION]", error);
+    }
+  };
+
+  const handlerReturn = () => {
+    const now = dayjs(); // asumsi: UTC, sesuai dengan API
+
+    // --- [1] Loading & Data tidak ditemukan ---
+    if (data === undefined || data === null) {
+      if (peserta === null && konfirmasi === null) {
+        return <LoaderCustom />;
+      }
+      return (
+        <BaseBox>
+          <TextCustom bold align="center" size={"large"}>
+            Data Tidak Ditemukan
+          </TextCustom>
+          <BackToOtherPath path="home" />
+        </BaseBox>
+      );
+    }
+
+    // --- [2] Ambil waktu event dari `data` ---
+    const eventStart = dayjs(data.tanggal);
+    const eventEnd = dayjs(data.tanggalSelesai);
+
+    // --- [3] Definisikan jendela konfirmasi: 1 jam sebelum mulai → 1 jam setelah selesai ---
+    const confirmationStart = eventStart.subtract(1, "hour");
+    const confirmationEnd = eventEnd.add(1, "hour");
+    const isWithinConfirmationWindow = now.isBetween(
+      confirmationStart,
+      confirmationEnd,
+      null,
+      "[]"
+    );
+
+    // --- [4] Status waktu event (untuk pesan UI) ---
+    const isBeforeEvent = now.isBefore(eventStart);
+    const isAfterEvent = now.isAfter(eventEnd);
+    const isDuringEvent = !isBeforeEvent && !isAfterEvent;
+
+    // --- [5] Handle berdasarkan waktu dan status peserta/konfirmasi ---
+
+    // 🟢 Acara sudah selesai
+    if (isAfterEvent) {
+      if (peserta === false) {
+        return (
+          <TamplateBox data={data}>
+            <TamplateText text="Event telah selesai, sehingga konfirmasi kehadiran sudah tidak dapat dilakukan. Terima kasih atas perhatian dan minat Anda. Kami berharap dapat bertemu di acara kami berikutnya." />
+            <BackToOtherPath
+              path="event"
+              id={data.id}
+              isAfterEvent={isAfterEvent}
+            />
+          </TamplateBox>
+        );
+      }
+      return (
+        <TamplateBox data={data}>
+          <TamplateText
+            text={`Event telah selesai, anda terdaftar sebagai peserta dan ${
+              konfirmasi
+                ? "Anda telah mengonfirmasi kehadiran."
+                : "Anda tidak mengonfirmasi kehadiran."
+            } Terima kasih atas perhatian dan minat Anda. Kami berharap dapat bertemu di acara kami berikutnya.`}
+          />
+          <BackToOtherPath
+            path="event"
+            id={data.id}
+            isAfterEvent={isAfterEvent}
+          />
+        </TamplateBox>
+      );
+    }
+
+    // 🔵 Acara belum mulai & belum terdaftar
+    if (isBeforeEvent) {
+      if (peserta === false) {
+        return (
+          <NotStarted_And_UserNotParticipan
+            id={data.id}
+            userId={user?.id as string}
+            data={data}
+          />
+        );
+      }
+
+      // Peserta sudah daftar → cek apakah sudah boleh konfirmasi
+      if (isWithinConfirmationWindow && peserta === true) {
+        if (konfirmasi === false) {
+          return (
+            <UserParticipan_And_DuringEvent
+              id={data.id}
+              userId={user?.id as string}
+              data={data}
+            />
+          );
+        }
+        return (
+          <TamplateBox data={data}>
+            <TamplateText text="Terimakasih telah mengonfirmasi kehadiran. Silahkan lihat peserta lain pada halaman event atau kembali ke halaman home. Selamat menikmati acara dan selamat berpartisipasi." />
+            <BackToOtherPath
+              path="event"
+              id={data.id}
+              isAfterEvent={isAfterEvent}
+            />
+          </TamplateBox>
+        );
+      }
+
+      return (
+        <TamplateBox data={data}>
+          <TamplateText text="Anda telah terdaftar sebagai peserta pada Event ini. Konfirmasi kehadiran dibuka 1 jam sebelum acara dimulai." />
+          <BackToOtherPath
+            path="event"
+            id={data.id}
+            isAfterEvent={isAfterEvent}
+          />
+        </TamplateBox>
+      );
+    }
+
+    // 🟡 Acara sedang berlangsung & belum terdaftar
+    if (isDuringEvent) {
+      if (peserta === false) {
+        return (
+          <UserNotParticipan_And_DuringEvent
+            id={data.id}
+            userId={user?.id as string}
+            data={data}
+          />
+        );
+      }
+
+      if (peserta === true) {
+        if (isWithinConfirmationWindow) {
+          if (konfirmasi === false) {
+            return (
+              <TamplateBox data={data}>
+                <TamplateText text="Konfirmasi Kehadiran" />
+              </TamplateBox>
+            );
+          }
+          return (
+            <TamplateBox data={data}>
+              <TamplateText text="Anda telah mengonfirmasi kehadiran dalam event ini. Terima kasih dan selamat menikmati acara. Have fun!" />
+              <BackToOtherPath
+                path="event"
+                id={data.id}
+                isAfterEvent={isAfterEvent}
+              />
+            </TamplateBox>
+          );
+        }
+
+        // Ini sangat jarang terjadi selama event berlangsung, tapi aman
+        return (
+          <TamplateBox data={data}>
+            <TamplateText text="Konfirmasi kehadiran tidak tersedia saat ini." />
+            <BackToOtherPath path="home" />
+          </TamplateBox>
+        );
+      }
+    }
+
+    // 🛑 Fallback aman
+    return (
+      <BaseBox>
+        <StackCustom>
+          <TamplateText text="Terjadi kesalahan tak terduga pada logika waktu." />
+          <BackToOtherPath path="home" />
+        </StackCustom>
+      </BaseBox>
+    );
+  };
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Konfirmasi Event",
+          // headerLeft: () => (
+          //   <Ionicons
+          //     name="arrow-back"
+          //     size={20}
+          //     color={MainColor.yellow}
+          //     onPress={() =>
+          //       router.navigate("/(application)/(user)/event/create")
+          //     }
+          //   />
+          // ),
+        }} 
+      />
+      <ViewWrapper>{handlerReturn()}</ViewWrapper>
+    </>
+  );
+}
+
+const TamplateBox = ({
+  data,
+  children,
+}: {
+  data: DataEvent;
+  children: React.ReactNode;
+}) => {
+  return (
+    <>
+      <CenterCustom>
+        <BaseBox>
+          <StackCustom gap={"lg"}>
+            <StackCustom gap={"sm"}>
+              <TextCustom bold align="center" size={"large"}>
+                {data?.title}
+              </TextCustom>
+              <View
+                style={{
+                  flexDirection: "row",
+                  justifyContent: "center",
+                  //   backgroundColor: AccentColor.blue,
+                  //   borderColor: AccentColor.blue,
+                  //   borderWidth: 1,
+                  //   borderRadius: 4,
+                  //   padding: 3
+                }}
+              >
+                <TextCustom align="center" size="small" bold>
+                  {dayjs(data?.tanggal).format("DD MMM YYYY: HH:mm")}
+                </TextCustom>
+                <TextCustom align="center" size="small" bold>
+                  {" "}
+                  -{" "}
+                </TextCustom>
+                <TextCustom align="center" size="small" bold>
+                  {dayjs(data?.tanggalSelesai).format("DD MMM YYYY: HH:mm")}
+                </TextCustom>
+              </View>
+            </StackCustom>
+
+            {children}
+          </StackCustom>
+        </BaseBox>
+      </CenterCustom>
+    </>
+  );
+};
+
+const TamplateText = ({ text }: { text: React.ReactNode }) => {
+  return (
+    <>
+      <TextCustom align="center">{text}</TextCustom>
+    </>
+  );
+};
+
+type BackToOtherPathProps =
+  | { path: "home" | "beranda-event"; id?: never; isAfterEvent?: never }
+  | { path: "event"; id: string; isAfterEvent: boolean };
+
+const BackToOtherPath = ({ path, id, isAfterEvent }: BackToOtherPathProps) => {
+  return (
+    <>
+      {path === "home" ? (
+        <ButtonCustom
+          onPress={() => {
+            router.replace("/(application)/home");
+          }}
+        >
+          Home
+        </ButtonCustom>
+      ) : (
+        <View
+          style={{
+            flexDirection: "row",
+            gap: 10,
+
+            justifyContent: "center",
+          }}
+        >
+          <ButtonCustom
+            onPress={() => {
+              router.replace("/(application)/home");
+            }}
+          >
+            Home
+          </ButtonCustom>
+          <ButtonCustom
+            onPress={() => {
+              if (path === "event") {
+                if (isAfterEvent) {
+                  router.push(`/(application)/(user)/event/${id}/history`);
+                } else {
+                  router.push(`/(application)/(user)/event/${id}/publish`);
+                }
+              } else if (path === "beranda-event") {
+                router.push(`/(application)/(user)/event`);
+              } else {
+                console.log("[PATH]", path);
+              }
+            }}
+          >
+            Lihat {path === "event" ? "Event" : "Beranda Event"}
+          </ButtonCustom>
+        </View>
+      )}
+    </>
+  );
+};
+
+// 🔵 Acara belum mulai & belum terdaftar
+const NotStarted_And_UserNotParticipan = ({
+  id,
+  userId,
+  data,
+}: {
+  id: string;
+  userId: string;
+  data: DataEvent;
+}) => {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const handlerJoinEvent = async () => {
+    try {
+      setIsLoading(true);
+
+      const response = await apiEventJoin({
+        id: id as string,
+        userId: userId as string,
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Anda gagal join",
+        });
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Anda berhasil join",
+      });
+      router.navigate(`/(application)/(user)/event/${id}/publish`);
+    } catch (error) {
+      console.log("[ERROR JOIN EVENT]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <TamplateBox data={data}>
+        <TamplateText text="Anda belum terdaftar sebagai peserta & Event belum dimulai. Silahkan daftarkan diri anda terlebih dahulu" />
+        <ButtonCustom onPress={handlerJoinEvent} isLoading={isLoading}>
+          Join
+        </ButtonCustom>
+      </TamplateBox>
+    </>
+  );
+};
+
+// 🟡 ZONA ACARA BERLANGSUNG
+// Acara sedang berlangsung & belum terdaftar & user harus join dan konfirmasi
+const UserNotParticipan_And_DuringEvent = ({
+  id,
+  userId,
+  data,
+}: {
+  id: string;
+  userId: string;
+  data: DataEvent;
+}) => {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const handlerSubmit = async () => {
+    try {
+      setIsLoading(true);
+
+      const response = await apiEventConfirmationAction({
+        id: id as string,
+        userId: userId as string,
+        category: "join_and_confirm",
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Anda gagal join & konfirmasi",
+        });
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Anda berhasil join & konfirmasi",
+      });
+      router.navigate(`/(application)/(user)/event/${id}/publish`);
+    } catch (error) {
+      console.log("[ERROR JOIN & CONFIRMATION EVENT]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <TamplateBox data={data}>
+        <TamplateText text="Anda belum terdaftar sebagai peserta & Event sedang berlangsung. Silahkan daftarkan diri anda & Konfirmasi kehadiran" />
+
+        <ButtonCustom onPress={() => handlerSubmit()} isLoading={isLoading}>
+          Join & Konfirmasi
+        </ButtonCustom>
+      </TamplateBox>
+    </>
+  );
+};
+
+
+// 🟡 ZONA ACARA BERLANGSUN
+// User sudah terdaftar & Event sedang berlangsung & user harus konfirmasi
+const UserParticipan_And_DuringEvent = ({
+  id,
+  userId,
+  data,
+}: {
+  id: string;
+  userId: string;
+  data: DataEvent;
+}) => {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const handlerSubmit = async () => {
+    try {
+      setIsLoading(true);
+
+      const response = await apiEventConfirmationAction({
+        id: id as string,
+        userId: userId as string,
+        category: "confirmation",
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Anda gagal konfirmasi",
+        });
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Anda berhasil konfirmasi",
+      });
+      router.navigate(`/(application)/(user)/event/${id}/publish`);
+    } catch (error) {
+      console.log("[ERROR JOIN & CONFIRMATION EVENT]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return (
+    <>
+      <TamplateBox data={data}>
+        <TamplateText text="Anda sudah terdaftar sebagai peserta & Event sedang berlangsung. Silahkan konfirmasi kehadiran" />
+
+        <ButtonCustom onPress={() => handlerSubmit()} isLoading={isLoading}>
+          Konfirmasi
+        </ButtonCustom>
+      </TamplateBox>
+    </>
+  );
+};

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

@@ -18,7 +18,7 @@ import {
 import { apiMasterEventType } from "@/service/api-client/api-master";
 import { DateTimePickerEvent } from "@react-native-community/datetimepicker";
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
-import React, { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import Toast from "react-native-toast-message";
 
 export default function EventEdit() {
@@ -55,6 +55,7 @@ export default function EventEdit() {
     try {
       setIsLoadData(true);
       const response = await apiEventGetOne({ id: id as string });
+      console.log("[DATA BY ID]", JSON.stringify(response, null, 2));
       if (response.success) {
         setData(response.data);
         setSelectedDate(new Date(response.data.tanggal));
@@ -209,7 +210,7 @@ export default function EventEdit() {
               minimumDate={new Date(Date.now())}
               label="Tanggal & Waktu Mulai"
               required
-              value={selectedDate as any}
+              value={selectedDate}
               onChange={(date: any) => {
                 setSelectedDate(date as any);
               }}
@@ -254,7 +255,6 @@ export default function EventEdit() {
               placeholder="Masukkan deskripsi event"
               required
               showCount
-              maxLength={100}
               value={data?.deskripsi}
               onChangeText={(value) => setData({ ...data, deskripsi: value })}
             />

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

@@ -11,29 +11,30 @@ import {
   apiEventGetOne,
   apiEventListOfParticipants,
 } from "@/service/api-client/api-event";
-import { useLocalSearchParams } from "expo-router";
+import dayjs, { Dayjs } from "dayjs";
-import { useEffect, useState } from "react";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 import { View } from "react-native";
 
 export default function EventListOfParticipants() {
   const { id } = useLocalSearchParams();
-  const [startDate, setStartDate] = useState();
+  const [startDate, setStartDate] = useState<Dayjs | undefined>();
-  const [listData, setListData] = useState([]);
+  const [listData, setListData] = useState<any[] | null>(null);
-  const [isLoadData, setIsLoadData] = useState(false);
+  const [loadtData, setLoadData] = useState(false);
 
-  useEffect(() => {
+  useFocusEffect(
-    handlerLoadData();
+    useCallback(() => {
-  }, [id]);
+      handlerLoadData();
+    }, [id])
+  );
 
   const handlerLoadData = () => {
     try {
-      setIsLoadData(true);
       onLoadData();
       onLoadList();
     } catch (error) {
       console.log("[ERROR]", error);
-    } finally {
-      setIsLoadData(false);
     }
   };
 
@@ -41,7 +42,8 @@ export default function EventListOfParticipants() {
     try {
       const response = await apiEventGetOne({ id: id as string });
       if (response.success) {
-        setStartDate(response.data.tanggal);
+        const date = dayjs(response.data.tanggal);
+        setStartDate(date);
       }
     } catch (error) {
       console.log("[ERROR]", error);
@@ -50,30 +52,36 @@ export default function EventListOfParticipants() {
 
   const onLoadList = async () => {
     try {
+      setLoadData(true);
       const response = await apiEventListOfParticipants({ id: id as string });
+     
       if (response.success) {
         setListData(response.data);
       }
     } catch (error) {
       console.log("[ERROR]", error);
+    } finally {
+      setLoadData(false);
     }
   };
 
   return (
     <ViewWrapper>
-      {isLoadData ? (
+      {loadtData && !listData ? (
         <LoaderCustom />
-      ) : listData.length === 0 ? (
+      ) : _.isEmpty(listData) ? (
-        <TextCustom align="center">Belum ada peserta</TextCustom>
+        <TextCustom align="center" color="gray">
+          Belum ada peserta
+        </TextCustom>
       ) : (
-        listData.map((item: any, index: number) => (
+        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() ? (
+                startDate && startDate.subtract(1, "hour").diff(dayjs()) < 0 ? (
                   <View
                     style={{
                       justifyContent: "flex-end",

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

@@ -55,6 +55,8 @@ export default function EventDetailPublish() {
           userId: user?.id as string,
         });
 
+        console.log("[RES CHECK PARTICIPANTS]", responseCheckParticipants);
+
         if (
           responseCheckParticipants.success &&
           responseCheckParticipants.data
@@ -135,7 +137,7 @@ export default function EventDetailPublish() {
     <>
       <Stack.Screen
         options={{
-          title: `Event publish`,
+          title: `Event Publish`,
           headerLeft: () => <LeftButtonCustom />,
           headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
         }}

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

@@ -110,13 +110,14 @@ export default function EventCreate() {
       const response = await apiEventCreate(newData);
       console.log("Response", JSON.stringify(response, null, 2));
 
-      router.navigate("/event/status");
+      router.replace("/event/status");
     } catch (error) {
       console.log(error);
     } finally {
       setIsLoading(false);
     }
   };
+  
 
   const buttonSubmit = (
     <ButtonCustom
@@ -144,7 +145,7 @@ export default function EventCreate() {
               label: item.name,
               value: item.id,
             }))}
-            value={data?.eventMaster_TipeAcaraId || ""}
+            value={data?.eventMaster_TipeAcaraId || null}
             onChange={(value: any) =>
               setData({ ...data, eventMaster_TipeAcaraId: value })
             }
@@ -191,7 +192,7 @@ export default function EventCreate() {
             placeholder="Masukkan deskripsi event"
             required
             showCount
-            maxLength={100}
+            value={data?.deskripsi || ""}
             onChangeText={(value: any) =>
               setData({ ...data, deskripsi: value })
             }

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

@@ -1,37 +1,107 @@
 import {
   BoxButtonOnFooter,
   ButtonCustom,
+  LoaderCustom,
   TextAreaCustom,
   ViewWrapper,
 } from "@/components";
-import { router } from "expo-router";
+import AlertWarning from "@/components/Alert/AlertWarning";
-import { useState } from "react";
+import { apiForumGetOne, apiForumUpdate } from "@/service/api-client/api-forum";
+import { isBadContent } from "@/utils/badWordsIndonesia";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import { Alert } from "react-native";
+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 = (
+  useFocusEffect(
-    <BoxButtonOnFooter>
+    useCallback(() => {
-      <ButtonCustom
+      onLoadData(id as string);
-        onPress={() => {
+    }, [id])
-          console.log("Posting", text);
-          router.back();
-        }}
-      >
-        Update
-      </ButtonCustom>
-    </BoxButtonOnFooter>
   );
 
+  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;
+    }
+
+    if (isBadContent(text)) {
+      AlertWarning({});
+      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}>
+    <ViewWrapper footerComponent={buttonFooter()}>
-      <TextAreaCustom
+      {!loadingGetData ? (
-        placeholder="Ketik diskusi anda..."
+        <TextAreaCustom
-        maxLength={1000}
+          placeholder="Ketik diskusi anda..."
-        showCount
+          maxLength={1000}
-        value={text}
+          showCount
-        onChangeText={setText}
+          value={text}
-      />
+          onChangeText={(value) => {
+            setText(value);
+          }}
+        />
+      ) : (
+        <LoaderCustom />
+      )}
     </ViewWrapper>
   );
 }

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

@@ -1,113 +1,12 @@
-import {
+/* eslint-disable react-hooks/exhaustive-deps */
-  AlertCustom,
+import View_Forumku from "@/screens/Forum/ViewForumku";
-  AvatarCustom,
+import View_Forumku2 from "@/screens/Forum/ViewForumku2";
-  ButtonCustom,
-  CenterCustom,
-  DrawerCustom,
-  Grid,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { MainColor } from "@/constants/color-palet";
-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";
 
 export default function Forumku() {
-  const { id } = useLocalSearchParams();
-  const [openDrawer, setOpenDrawer] = useState(false);
-  const [status, setStatus] = useState("");
-  const [alertStatus, setAlertStatus] = useState(false);
-  const [deleteAlert, setDeleteAlert] = useState(false);
-
   return (
     <>
-      <ViewWrapper>
+      {/* <View_Forumku />  */}
-        <StackCustom>
+      <View_Forumku2 />
-          <CenterCustom>
-            <AvatarCustom
-              href={`/(application)/(image)/preview-image/${id}`}
-              size="xl"
-            />
-          </CenterCustom>
-
-          <Grid>
-            <Grid.Col span={6}>
-              <TextCustom bold truncate>
-                @bagas_banuna
-              </TextCustom>
-              <TextCustom>1 postingan</TextCustom>
-            </Grid.Col>
-            <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
-              <ButtonCustom href={`/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}`}
-            />
-          ))}
-        </StackCustom>
-      </ViewWrapper>
-
-      {/* Drawer Komponen Eksternal */}
-      <DrawerCustom
-        height={350}
-        isVisible={openDrawer}
-        closeDrawer={() => setOpenDrawer(false)}
-      >
-        <Forum_MenuDrawerBerandaSection
-          id={id as string}
-          status={status}
-          setIsDrawerOpen={() => {
-            setOpenDrawer(false);
-          }}
-          setShowDeleteAlert={setDeleteAlert}
-          setShowAlertStatus={setAlertStatus}
-        />
-      </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,271 @@
 import {
-  AlertCustom,
   ButtonCustom,
   DrawerCustom,
+  LoaderCustom,
   Spacing,
   TextAreaCustom,
+  TextCustom,
   ViewWrapper,
 } from "@/components";
-import { MainColor } from "@/constants/color-palet";
+import AlertWarning from "@/components/Alert/AlertWarning";
+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 {
-import { useState } from "react";
+  apiForumCreateComment,
+  apiForumGetComment,
+  apiForumGetOne,
+  apiForumUpdateStatus,
+} from "@/service/api-client/api-forum";
+import { isBadContent } from "@/utils/badWordsIndonesia";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useEffect, useState } from "react";
+import { Alert } from "react-native";
+
+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 = {
+  useFocusEffect(
-    name: "Bagas",
+    useCallback(() => {
-    status: "Open",
+      onLoadData(id as string);
-    date: "14/07/2025",
+    }, [id])
-    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,
+  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 () => {
+    if (isBadContent(text)) {
+      AlertWarning({});
+      return;
+    }
+    
+    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>
+        {!data && !listComment ? (
-        </StackCustom> */}
+          <LoaderCustom />
-        <Forum_BoxDetailSection
+        ) : (
-          data={dataDummy}
+          <>
-          setOpenDrawer={setOpenDrawer}
+            {/* Box Posting */}
-          setStatus={setStatus}
+            <Forum_BoxDetailSection
-        />
+              data={data}
+              onSetData={() => {
+                setOpenDrawer(true);
+                setStatus(data.ForumMaster_StatusPosting?.status);
+                setAuthorId(data.Author?.id);
+                setDataId(data.id);
+              }}
+            />
 
-        <TextAreaCustom
+            {/* Area Commentar */}
-          placeholder="Ketik diskusi anda..."
+            {data?.ForumMaster_StatusPosting?.status === "Open" && (
-          maxLength={1000}
+              <>
-          showCount
+                <TextAreaCustom
-          value={text}
+                  placeholder="Ketik diskusi anda..."
-          onChangeText={setText}
+                  maxLength={1000}
-          style={{
+                  showCount
-            marginBottom: 0,
+                  value={text}
-          }}
+                  onChangeText={setText}
-        />
+                  style={{
-        <ButtonCustom
+                    marginBottom: 0,
-          style={{
+                  }}
-            alignSelf: "flex-end",
+                />
-          }}
+                <ButtonCustom
-          onPress={() => {
+                  isLoading={isLoadingComment}
-            console.log("Posting", text);
+                  style={{
-            router.back();
+                    alignSelf: "flex-end",
-          }}
+                  }}
-        >
+                  onPress={() => {
-          Balas
+                    handlerCreateCommentar();
-        </ButtonCustom>
+                  }}
+                >
+                  Balas
+                </ButtonCustom>
+              </>
+            )}
+            <Spacing height={40} />
 
-        <Spacing height={40} />
+            {/* List Commentar */}
-
+            {_.isEmpty(listComment) ? (
-        {listDummyCommentarForum.map((e, i) => (
+              <TextCustom align="center" color="gray" size={"small"}>
-          <Forum_CommentarBoxSection
+                Tidak ada komentar
-            key={i}
+              </TextCustom>
-            data={e}
+            ) : (
-            setOpenDrawer={setOpenDrawerCommentar}
+              <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}
+          authorUsername={data?.Author?.username as string}
           status={status}
           setIsDrawerOpen={() => {
             setOpenDrawer(false);
           }}
-          setShowDeleteAlert={setDeleteAlert}
+          authorId={authorId}
-          setShowAlertStatus={setAlertStatus}
+          handlerUpdateStatus={(value: any) => {
+            handlerUpdateStatus(value);
+          }}
         />
       </DrawerCustom>
 
-      {/* Alert Status */}
+      {/* Commentar Drawer */}
-      <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 */}
       <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");
+          handlerSubmitReport();
-          router.back();
         }}
       >
         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");
+          handlerSubmitReport();
-          router.back();
         }}
       >
         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,
+  ButtonCustom,
-    Spacing,
+  LoaderCustom,
-    StackCustom,
+  Spacing,
-    ViewWrapper
+  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>
+        {isLoadingList ? (
-          <Forum_ReportListSection />
+          <LoaderCustom />
-          <ButtonCustom
+        ) : (
-            backgroundColor={MainColor.red}
+          <StackCustom>
-            textColor={MainColor.white}
+            <Forum_ReportListSection
-            onPress={() => {
+              listMaster={listMaster}
-              console.log("Report");
+              selectReport={selectReport}
-              router.back();
+              setSelectReport={setSelectReport}
-            }}
+            />
-          >
+            <ButtonCustom
-            Report
+              disabled={!selectReport}
-          </ButtonCustom>
+              backgroundColor={MainColor.red}
-          <ButtonCustom
+              textColor={MainColor.white}
-            backgroundColor={AccentColor.blue}
+              onPress={() => {
-            textColor={MainColor.white}
+                handlerReport();
-            onPress={() => {
+              }}
-              console.log("Lainnya");
+            >
-              router.replace("/forum/[id]/other-report-commentar");
+              Report
-            }}
+            </ButtonCustom>
-          >
+            <ButtonCustom
-            Lainnya
+              backgroundColor={AccentColor.blue}
-          </ButtonCustom>
+              textColor={MainColor.white}
-          <Spacing/>
+              onPress={() => {
-        </StackCustom>
+                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 {
-import { MainColor, AccentColor } from "@/constants/color-palet";
+  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 (
+  const { id } = useLocalSearchParams();
-      <>
+  const { user } = useAuth();
-        <ViewWrapper>
+  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");
+                AlertDefaultSystem({
-                router.back();
+                  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

@@ -2,20 +2,57 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   TextAreaCustom,
-  ViewWrapper,
+  ViewWrapper
 } from "@/components";
+import AlertWarning from "@/components/Alert/AlertWarning";
+import { useAuth } from "@/hooks/use-auth";
+import { apiForumCreate } from "@/service/api-client/api-forum";
+import { isBadContent } from "@/utils/badWordsIndonesia";
 import { router } from "expo-router";
 import { useState } from "react";
+import { Alert } from "react-native";
+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 () => {
+    
+    if (isBadContent(text)) {
+      AlertWarning({})
+      return;
+    }
+    
+    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);
+          handlerSubmit();
-          router.back();
         }}
       >
         Posting

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

@@ -1,113 +1,12 @@
-import {
+/* eslint-disable react-hooks/exhaustive-deps */
-  AlertCustom,
+import Forum_ViewBeranda from "@/screens/Forum/ViewBeranda";
-  AvatarCustom,
+import Forum_ViewBeranda2 from "@/screens/Forum/ViewBeranda2";
-  BackButton,
-  DrawerCustom,
-  SearchInput,
-  ViewWrapper,
-} from "@/components";
-import FloatingButton from "@/components/Button/FloatingButton";
-import { MainColor } from "@/constants/color-palet";
-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";
 
 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);
-
   return (
     <>
-      <Stack.Screen
+      {/* <Forum_ViewBeranda /> */}
-        options={{
+      <Forum_ViewBeranda2 />
-          title: "Forum",
-          headerLeft: () => <BackButton />,
-          headerRight: () => <AvatarCustom href={`/forum/${id}/forumku`} />,
-        }}
-      />
-
-      <ViewWrapper
-        headerComponent={<SearchInput placeholder="Cari topik diskusi" />}
-        floatingButton={
-          <FloatingButton
-            onPress={() =>
-              router.navigate("/(application)/(user)/forum/create")
-            }
-          />
-        }
-      >
-        {listDummyDiscussionForum.map((e, i) => (
-          <Forum_BoxDetailSection
-            key={i}
-            data={e}
-            setOpenDrawer={setOpenDrawer}
-            setStatus={setStatus}
-            isTruncate={true}
-            href={`/forum/${id}`}
-          />
-        ))}
-      </ViewWrapper>
-
-      <DrawerCustom
-        height={350}
-        isVisible={openDrawer}
-        closeDrawer={() => setOpenDrawer(false)}
-      >
-        <Forum_MenuDrawerBerandaSection
-          id={id}
-          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)/forum/terms.tsx

@@ -0,0 +1,202 @@
+import {
+    BaseBox,
+    ButtonCustom,
+    CheckboxCustom,
+    NewWrapper,
+    StackCustom,
+    TextCustom,
+} from "@/components";
+import { useAuth } from "@/hooks/use-auth";
+import { apiAcceptForumTerms } from "@/service/api-client/api-user";
+import { GStyles } from "@/styles/global-styles";
+import { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { useState } from "react";
+import { View } from "react-native";
+import { Text } from "react-native-paper";
+import Toast from "react-native-toast-message";
+
+export default function ForumSplash() {
+  const { user } = useAuth();
+  const [term, setTerm] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async () => {
+    try {
+      setLoading(true);
+      const respone = await apiAcceptForumTerms({
+        category: "Forum",
+        userId: user?.id as any,
+      });
+
+      if (respone.success) {
+        Toast.show({
+          type: "success",
+          text1: "Berhasil",
+          text2: "Terima kasih telah menerima syarat & ketentuan forum ini",
+        });
+
+        router.replace("/(application)/forum");
+
+        return;
+      }
+
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: "Terjadi kesalahan, silahkan coba lagi",
+      });
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <NewWrapper>
+      {/* <TextCustom bold>HIPMI Badung Connect</TextCustom> . */}
+
+      <BaseBox>
+        <StackCustom>
+          <TextCustom>
+            Dengan mengakses dan menggunakan Forum HIPMI Badung Connect, Anda
+            secara sadar menyetujui ketentuan berikut:
+          </TextCustom>
+
+          <TextCustom bold>
+            1. Dilarang keras memposting konten yang mengandung:
+          </TextCustom>
+          <View style={{ paddingInline: 10 }}>
+            {forumTerms1.map((term, index) => (
+              <View
+                key={index}
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: 10,
+                  paddingBottom: 10,
+                }}
+              >
+                <Ionicons name="radio-button-on" color={"white"} />
+                <TextCustom>{term.text}</TextCustom>
+              </View>
+            ))}
+          </View>
+
+          <TextCustom bold>
+            2. Setiap pengguna bertanggung jawab penuh atas konten yang
+            diunggah. Konten yang melanggar ketentuan ini dapat dihapus kapan
+            saja tanpa pemberitahuan.
+          </TextCustom>
+
+          <TextCustom bold>
+            3. Jika Anda menemukan konten tidak pantas, segera:
+          </TextCustom>
+          <View style={{ paddingInline: 10 }}>
+            {forumTerms2.map((term, index) => (
+              <View
+                key={index}
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: 10,
+                  paddingBottom: 10,
+                }}
+              >
+                <Ionicons name="radio-button-on" color={"white"} />
+                <TextCustom>{term.text}</TextCustom>
+              </View>
+            ))}
+          </View>
+
+          <TextCustom bold>
+            4. Gunakan fitur “Blokir Pengguna” di profil pengguna terkait
+          </TextCustom>
+          <View style={{ paddingInline: 10 }}>
+            {forumTerms3.map((term, index) => (
+              <View
+                key={index}
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: 10,
+                  paddingBottom: 10,
+                }}
+              >
+                <Ionicons name="radio-button-on" color={"white"} />
+                <TextCustom>{term.text}</TextCustom>
+              </View>
+            ))}
+          </View>
+
+          <TextCustom>
+            Pelanggaran terhadap ketentuan ini berakibat{" "}
+            <TextCustom bold>pencabutan akses</TextCustom> ke Forum dan/atau{" "}
+            <TextCustom bold>pemblokiran akun secara permanen</TextCustom> tanpa
+            pemberitahuan lebih lanjut.
+          </TextCustom>
+
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              marginTop: 16,
+              marginBottom: 16,
+            }}
+          >
+            <CheckboxCustom value={term} onChange={() => setTerm(!term)} />
+
+            <Text style={GStyles.textLabel}>
+              Saya telah membaca dan menyetujui Syarat & Ketentuan Forum ini
+            </Text>
+          </View>
+
+          <ButtonCustom
+            disabled={!term || loading}
+            onPress={() => {
+              handleSubmit();
+            }}
+          >
+            Lanjut
+          </ButtonCustom>
+        </StackCustom>
+      </BaseBox>
+    </NewWrapper>
+  );
+}
+
+// Data dalam format JSON (bisa juga diimpor dari file terpisah)
+interface Term {
+  text: string;
+}
+
+const forumTerms1: Term[] = [
+  {
+    text: "Ujaran kebencian, diskriminasi, atau konten SARA (Suku, Agama, Ras, Antar-golongan)",
+  },
+  { text: "Kata kasar, pelecehan, ancaman, atau bullying" },
+  { text: "Pornografi, hoaks, spam, atau informasi menyesatkan" },
+  { text: "Promosi aktivitas ilegal seperti perjudian atau narkoba" },
+];
+
+const forumTerms2: Term[] = [
+  {
+    text: "Gunakan tombol “Laporkan” di setiap postingan, atau",
+  },
+  {
+    text: "Gunakan fitur “Blokir Pengguna” di profil pengguna terkait.",
+  },
+];
+
+const forumTerms3: Term[] = [
+  {
+    text: "Meninjau setiap laporan dalam waktu 24 jam",
+  },
+  {
+    text: "Menghapus konten yang melanggar",
+  },
+  {
+    text: "Memblokir akun pelanggar sesuai tingkat pelanggaran",
+  },
+];

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

@@ -1,9 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react-hooks/exhaustive-deps */
-import { StackCustom, ViewWrapper } from "@/components";
+import { ButtonCustom, StackCustom, ViewWrapper } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
+import { useNotificationStore } from "@/hooks/use-notification-store";
 import Home_BottomFeatureSection from "@/screens/Home/bottomFeatureSection";
+import HeaderBell from "@/screens/Home/HeaderBell";
 import Home_ImageSection from "@/screens/Home/imageSection";
 import TabSection from "@/screens/Home/tabSection";
 import { tabsHome } from "@/screens/Home/tabsList";
@@ -11,31 +13,50 @@ 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 { Redirect, router, Stack, useFocusEffect } from "expo-router";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
+import { RefreshControl, Text, View } from "react-native";
 
 export default function Application() {
-  const { token, user } = useAuth();
+  const { token, user, userData } = useAuth();
-
   const [data, setData] = useState<any>();
+  const [refreshing, setRefreshing] = useState(false);
 
-  useEffect(() => {
+  useFocusEffect(
-    onLoadData();
+    useCallback(() => {
-    checkVersion();
+      onLoadData();
-  }, []);
+      checkVersion();
+      userData(token as string);
+    }, [user?.id, token])
+  );
 
   async function onLoadData() {
     const response = await apiUser(user?.id as string);
-    console.log("Response profile >>", JSON.stringify(response?.data?.Profile, null, 2));
+    console.log(
+      "[Profile ID]>>",
+      JSON.stringify(response?.data?.Profile?.id, null, 2)
+    );
 
     setData(response.data);
   }
 
   const checkVersion = async () => {
     const response = await apiVersion();
-    console.log("Version >>", JSON.stringify(response.data, null, 2));
+    console.log("[Version] >>", JSON.stringify(response.data, null, 2));
   };
 
+  const onRefresh = useCallback(() => {
+    setRefreshing(true);
+    onLoadData();
+    checkVersion();
+    setRefreshing(false);
+  }, []);
+
+  if (user && user?.termsOfServiceAccepted === false) {
+    console.log("User is not accept term service");
+    return <Redirect href={`/terms-agreement`} />;
+  }
+
   if (data && data?.active === false) {
     console.log("User is not active");
     return <Redirect href={`/waiting-room`} />;
@@ -61,24 +82,25 @@ export default function Application() {
               }}
             />
           ),
-          headerRight: () => (
+          headerRight: () => <HeaderBell />,
-            <Ionicons
-              name="notifications"
-              size={20}
-              color={MainColor.yellow}
-              onPress={() => {
-                router.push("/notifications");
-              }}
-            />
-          ),
         }}
       />
       <ViewWrapper
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        }
         footerComponent={
-          <TabSection tabs={tabsHome(data?.Profile?.id as string)} />
+          <TabSection
+            tabs={tabsHome({
+              acceptedForumTermsAt: data?.acceptedForumTermsAt,
+              profileId: data?.Profile?.id,
+            })}
+          />
         }
       >
         <StackCustom>
+          {/* <ButtonCustom onPress={() => router.push("./test-notifications")}>Test Notif</ButtonCustom> */}
+
           <Home_ImageSection />
 
           <Home_FeatureSection />