Merge pull request 'Checkpoint 2' (#28) from checkpoint-2/12-dec-25 into main

Reviewed-on: http://wibugit.wibudev.com/wibu/hipmi-mobile/pulls/28

.gitignore

@@ -81,7 +81,4 @@ yarn-error.*
 # typescript
 *.tsbuildinfo
 
-# secrets
-secrets/
-
 # @end expo-cli

.qwen/settings.json

@@ -1,22 +0,0 @@
-{
-  "security": {
-    "auth": {
-      "selectedType": "openai"
-    }
-  },
-  "env": {
-    "OPENAI_BASE_URL": "https://claude-local.wibudev.com/v1",
-    "OPENAI_API_KEY": "sk-T8mDcFAe83WWOQsHGx0JxvTmgBVdTQ2uFKzIRjZpwrh0H4Bg",
-    "OPENAI_MODEL": "claude-sonnet-4-6"
-  },
-  "projectContext": {
-    "enabled": false
-  },
-  "agent": {
-    "enabled": false
-  },
-  "permissions": {
-    "allow": []
-  },
-  "$version": 3
-}

.qwen/settings.json.orig

@@ -1,7 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(git add *)"
-    ]
-  }
-}

android/app/build.gradle

@@ -100,8 +100,8 @@ packagingOptions {
         applicationId 'com.bip.hipmimobileapp'
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 6
-        versionName "1.0.3"
+        versionCode 3
+        versionName "1.0.1"
 
         buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""
     }

android/app/src/debugOptimized/AndroidManifest.xml

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

android/app/src/main/AndroidManifest.xml

@@ -15,8 +15,8 @@
       <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" 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" tools:replace="android:resource"/>
+  <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">
+    <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"/>
@@ -37,7 +37,7 @@
       </intent-filter>
       <intent-filter android:autoVerify="true" data-generated="true">
         <action android:name="android.intent.action.VIEW"/>
-        <data android:scheme="https" android:host="hipmi.muku.id" android:pathPrefix="/"/>
+        <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>

android/app/src/main/res/xml/secure_store_backup_rules.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<full-backup-content>
-  <exclude domain="sharedpref" path="SECURESTORE"/>
-</full-backup-content>

android/app/src/main/res/xml/secure_store_data_extraction_rules.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<data-extraction-rules>
-  <cloud-backup>
-    <exclude domain="sharedpref" path="SECURESTORE"/>
-  </cloud-backup>
-  <device-transfer>
-    <exclude domain="sharedpref" path="SECURESTORE"/>
-  </device-transfer>
-</data-extraction-rules>

android/build.gradle

@@ -13,10 +13,25 @@ buildscript {
   }
 }
 
+allprojects {
+  repositories {
+    google()
+    mavenCentral()
+    maven { url 'https://www.jitpack.io' }
+  }
+}
+
+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) }
@@ -26,11 +41,7 @@ allprojects {
         }
       }
     }
-    google()
-    mavenCentral()
-    maven { url 'https://www.jitpack.io' }
   }
 }
 
-apply plugin: "expo-root-project"
-apply plugin: "com.facebook.react.rootproject"
+// @generated end @rnmapbox/maps-v2-maven

app.config.js

@@ -1,21 +1,10 @@
 // app.config.js
 require("dotenv").config();
 
-// const isDev = process.env.NODE_ENV === "development";
-// const isStaging = process.env.NEXT_PUBLIC_ENV === "staging";
-// const isProd = process.env.NEXT_PUBLIC_ENV === "production";
-
-// Domain berdasarkan environment
-// const domain = isDev
-//   ? "localhost:3000"
-//   : isStaging
-//   ? "cld-dkr-hipmi-stg.wibudev.com"
-//   : "hipmi.muku.id"; // Production domain
-
 export default {
   name: "HIPMI Badung Connect",
   slug: "hipmi-mobile",
-  version: "1.0.3",
+  version: "1.0.1",
   orientation: "portrait",
   icon: "./assets/images/icon.png",
   scheme: "hipmimobile",
@@ -25,27 +14,25 @@ export default {
   ios: {
     supportsTablet: true,
     bundleIdentifier: "com.anonymous.hipmi-mobile",
-    googleServicesFile: "./secrets/GoogleService-Info.plist",
+    googleServicesFile: "./ios/HIPMIBadungConnect/GoogleService-Info.plist",
     infoPlist: {
       ITSAppUsesNonExemptEncryption: false,
       NSLocationWhenInUseUsageDescription:
         "Aplikasi membutuhkan akses lokasi untuk menampilkan peta.",
     },
-    associatedDomains: [
-      "applinks:hipmi.muku.id",
-    ],
-    buildNumber: "1",
+    associatedDomains: ["applinks:cld-dkr-staging-hipmi.wibudev.com"],
+    buildNumber: "15",
   },
 
   android: {
-    googleServicesFile: "./secrets/google-services.json",
+    googleServicesFile: "./google-services.json",
     adaptiveIcon: {
       foregroundImage: "./assets/images/splash-icon.png",
       backgroundColor: "#ffffff",
     },
     edgeToEdgeEnabled: true,
     package: "com.bip.hipmimobileapp",
-    versionCode: 6,
+    versionCode: 3,
     // softwareKeyboardLayoutMode: 'resize', // option: untuk mengatur keyboard pada room chst collaboration
     intentFilters: [
       {
@@ -54,7 +41,7 @@ export default {
         data: [
           {
             scheme: "https",
-            host: "hipmi.muku.id",
+            host: "cld-dkr-staging-hipmi.wibudev.com",
             pathPrefix: "/",
           },
         ],
@@ -70,7 +57,6 @@ export default {
   },
 
   plugins: [
-    "./plugins/withCustomConfig",
     "expo-router",
     "expo-web-browser",
     [
@@ -91,6 +77,7 @@ export default {
       },
     ],
     "expo-font",
+    "@rnmapbox/maps",
     "@react-native-firebase/app",
     [
       "expo-notifications",
@@ -100,7 +87,6 @@ export default {
         iosDisplayInForeground: true,
       },
     ],
-    "@maplibre/maplibre-react-native",
   ],
 
   experiments: {

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

@@ -1,5 +1,4 @@
 import { BackButton } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import PdfViewer from "@/components/_ShareComponent/PdfViewer";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import { Stack, useLocalSearchParams } from "expo-router";
@@ -8,12 +7,13 @@ 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
         options={{
-          header: () => <AppHeader title="File" left={<BackButton />} />,
+          title: "File",
+          headerLeft: () => <BackButton />,
         }}
       />
       <SafeAreaView style={{ flex: 1 }} edges={["bottom"]}>

app/(application)/(image)/preview-image/[id]/index.tsx

@@ -1,10 +1,8 @@
 import { CenterCustom, TextCustom, ViewWrapper } from "@/components";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
-import { MainColor } from "@/constants/color-palet";
 import { Image } from "expo-image";
 import { useLocalSearchParams } from "expo-router";
 import React, { useState } from "react";
-import { View } from "react-native";
 
 export default function PreviewImage() {
   const { id } = useLocalSearchParams();
@@ -13,48 +11,18 @@ export default function PreviewImage() {
   return (
     <ViewWrapper>
       {id ? (
-        <View
-          style={{
-            width: "100%",
-            height: "100%",
-            position: "relative",
+        <Image
+          onLoad={() => {
+            setIsLoading(false);
           }}
-        >
-          {/* Main Image */}
-          <Image
-            onLoad={() => {
-              setIsLoading(false);
-            }}
-            source={API_STRORAGE.GET({ fileId: id as string })}
-            contentFit="contain"
-            style={{ width: "100%", height: "100%" }}
-            // placeholder={require("@/assets/images/loading.gif")}
-          />
-
-          {/* Custom Loader Overlay */}
-          {isLoading && (
-            <View
-              style={{
-                position: "absolute",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                justifyContent: "center",
-                alignItems: "center",
-                backgroundColor: MainColor.darkblue,
-                zIndex: 1,
-                opacity: 0.5,
-              }}
-            >
-              <Image
-                source={require("@/assets/images/loading.gif")}
-                contentFit="contain"
-                style={{ width: 60, height: 60 }}
-              />
-            </View>
-          )}
-        </View>
+          source={
+            isLoading
+              ? require("@/assets/images/loading.gif")
+              : API_STRORAGE.GET({ fileId: id as string })
+          }
+          contentFit="contain"
+          style={{ width: "100%", height: "100%" }}
+        />
       ) : (
         <CenterCustom>
           <TextCustom>File not found</TextCustom>

app/(application)/(image)/take-picture/[id]/index.tsx

@@ -105,7 +105,7 @@ export default function TakePicture() {
           </Pressable>
 
           <Pressable onPress={pickImage}>
-            <AntDesign name="folder-open" size={32} color="white" />
+            <AntDesign name="folderopen" size={32} color="white" />
           </Pressable>
         </View>
       </View>

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

@@ -1,27 +1,27 @@
 import { BackButton } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
-import { IconPlus } from "@/components/_Icon";
-import { IconDot } from "@/components/_Icon/IconComponent";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { HeaderStyles } from "@/styles/header-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
 
 export default function UserLayout() {
   return (
     <>
-      <Stack>
+      <Stack screenOptions={HeaderStyles}>
         <Stack.Screen
           name="delete-account"
           options={{
-            header: () => <AppHeader title="Hapus Akun" />,
+            title: "Hapus Akun",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="waiting-room"
           options={{
-            header: () => <AppHeader title="Waiting Room" />,
+            title: "Waiting Room",
+            headerBackVisible: false,
           }}
         />
 
@@ -45,73 +45,59 @@ export default function UserLayout() {
         <Stack.Screen
           name="user-search/index"
           options={{
-            header: () => <AppHeader title="Pencarian Pengguna" />,
+            title: "Pencarian Pengguna",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         {/* ========== Notification Section ========= */}
-
-        {/* DIPINDAH DI FILE NOTIFICATION USER */}
-        {/* <Stack.Screen
+        <Stack.Screen
           name="notifications/index"
           options={{
             title: "Notifikasi",
             headerLeft: () => <BackButton />,
-            // headerRight: () => (
-            //   <IconPlus
-            //     color={MainColor.yellow}
-            //     onPress={() => router.push("/test-notifications")}
-            //   />
-            // ),
           }}
-        /> */}
+        />
 
         {/* ========== Event Section ========= */}
-
-        {/* <Stack.Screen
-          name="event/(tabs)"
-          options={{
-            header: () => <AppHeader title="Event" left={<BackButton path="/home" />} />,
-          }}
-        /> */}
-
         <Stack.Screen
           name="event/(tabs)"
           options={{
             title: "Event",
-            header: () => <AppHeader title="Event" left={<BackButton path="/home" />} />,
-            // NOTE: DIPINDAH DI FILE /Event/(Tabs)/_layout.tsx
-            // headerLeft: () => (
-            //   <LeftButtonCustom path="/(application)/(user)/home" />
-            // ),
+            headerLeft: () => (
+              <LeftButtonCustom path="/(application)/(user)/home" />
+            ),
           }}
         />
-
         <Stack.Screen
           name="event/create"
           options={{
-            header: () => <AppHeader title="Tambah Event" />,
+            title: "Tambah Event",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         <Stack.Screen
           name="event/detail/[id]"
           options={{
-            header: () => <AppHeader title="Event Detail" left={<LeftButtonCustom />} />,
+            title: "Event Detail",
+            headerLeft: () => <LeftButtonCustom />,
           }}
         />
 
         <Stack.Screen
           name="event/[id]/edit"
           options={{
-            header: () => <AppHeader title="Edit Event" />,
+            title: "Edit Event",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         <Stack.Screen
           name="event/[id]/list-of-participants"
           options={{
-            header: () => <AppHeader title="Daftar peserta" />,
+            title: "Daftar peserta",
+            headerLeft: () => <BackButton />,
           }}
         />
         {/* ========== End Event Section ========= */}
@@ -120,19 +106,22 @@ export default function UserLayout() {
         <Stack.Screen
           name="collaboration/(tabs)"
           options={{
-            header: () => <AppHeader title="Collaboration" left={<BackButton path="/home" />} />,
+            title: "Collaboration",
+            headerLeft: () => <BackButton path="/home" />,
           }}
         />
         <Stack.Screen
           name="collaboration/create"
           options={{
-            header: () => <AppHeader title="Tambah Proyek" />,
+            title: "Tambah Proyek",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="collaboration/[id]/list-of-participants"
           options={{
-            header: () => <AppHeader title="Daftar Partisipan" />,
+            title: "Daftar Partisipan",
+            headerLeft: () => <BackButton />,
           }}
         />
         {/* <Stack.Screen
@@ -145,19 +134,22 @@ export default function UserLayout() {
         <Stack.Screen
           name="collaboration/[id]/edit"
           options={{
-            header: () => <AppHeader title="Edit Proyek" />,
+            title: "Edit Proyek",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="collaboration/[id]/create-pacticipants"
           options={{
-            header: () => <AppHeader title="Ajukan Partisipasi" />,
+            title: "Ajukan Partisipasi",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="collaboration/[id]/select-of-participants"
           options={{
-            header: () => <AppHeader title="Pilih Partisipan" />,
+            title: "Pilih Partisipan",
+            headerLeft: () => <BackButton />,
           }}
         />
 
@@ -167,25 +159,29 @@ export default function UserLayout() {
         <Stack.Screen
           name="voting/create"
           options={{
-            header: () => <AppHeader title="Tambah Voting" />,
+            title: "Tambah Voting",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="voting/(tabs)"
           options={{
-            header: () => <AppHeader title="Voting" left={<BackButton path="/home" />} />,
+            title: "Voting",
+            headerLeft: () => <BackButton path="/home" />,
           }}
         />
         <Stack.Screen
           name="voting/[id]/edit"
           options={{
-            header: () => <AppHeader title="Edit Voting" />,
+            title: "Edit Voting",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="voting/[id]/list-of-contributor"
           options={{
-            header: () => <AppHeader title="Daftar Kontributor" />,
+            title: "Daftar Kontributor",
+            headerLeft: () => <BackButton />,
           }}
         />
 
@@ -195,7 +191,8 @@ export default function UserLayout() {
         <Stack.Screen
           name="crowdfunding/index"
           options={{
-            header: () => <AppHeader title="Crowdfunding" left={<BackButton path="/home" />} />,
+            title: "Crowdfunding",
+            headerLeft: () => <BackButton path="/home" />,
           }}
         />
 
@@ -205,95 +202,103 @@ export default function UserLayout() {
         <Stack.Screen
           name="investment/(tabs)"
           options={{
-            header: () => <AppHeader title="Investasi" left={<BackButton path="/crowdfunding" />} />,
+            title: "Investasi",
+            headerLeft: () => <BackButton path="/crowdfunding" />,
           }}
         />
         <Stack.Screen
           name="investment/create"
           options={{
-            header: () => <AppHeader title="Tambah Investasi" />,
+            title: "Tambah Investasi",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/index"
           options={{
-            header: () => <AppHeader title="Detail Investasi" />,
+            title: "Detail Investasi",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/edit"
           options={{
-            header: () => <AppHeader title="Edit Investasi" />,
+            title: "Edit Investasi",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         <Stack.Screen
           name="investment/[id]/edit-prospectus"
           options={{
-            header: () => <AppHeader title="Edit Prospektus" />,
+            title: "Edit Prospektus",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         <Stack.Screen
           name="investment/[id]/(document)/list-of-document"
           options={{
-            header: () => <AppHeader title="Daftar Dokumen" />,
+            title: "Daftar Dokumen",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/(document)/add-document"
           options={{
-            header: () => <AppHeader title="Tambah Dokumen" />,
+            title: "Tambah Dokumen",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/(document)/edit-document"
           options={{
-            header: () => <AppHeader title="Edit Dokumen" />,
+            title: "Edit Dokumen",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         <Stack.Screen
           name="investment/[id]/(news)/add-news"
           options={{
-            header: () => <AppHeader title="Tambah Berita" />,
+            title: "Tambah Berita",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         <Stack.Screen
           name="investment/[id]/investor"
           options={{
-            header: () => <AppHeader title="Investor" />,
+            title: "Investor",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         <Stack.Screen
           name="investment/[id]/(transaction-flow)/index"
           options={{
-            header: () => <AppHeader title="Pembelian Saham" />,
+            title: "Pembelian Saham",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/(transaction-flow)/select-bank"
           options={{
-            header: () => <AppHeader title="Pilih Bank" />,
+            title: "Pilih Bank",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/(transaction-flow)/invoice"
           options={{
-            header: () => (
-              <AppHeader
-                title="Invoice"
-                left={
-                  <Ionicons
-                    name="close"
-                    size={ICON_SIZE_SMALL}
-                    color={MainColor.yellow}
-                    onPress={() =>
-                      router.navigate(`/investment/(tabs)/transaction`)
-                    }
-                  />
+            title: "Invoice",
+            headerLeft: () => (
+              <Ionicons
+                name="close"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.yellow}
+                onPress={() =>
+                  router.navigate(`/investment/(tabs)/transaction`)
                 }
               />
             ),
@@ -302,18 +307,14 @@ export default function UserLayout() {
         <Stack.Screen
           name="investment/[id]/(transaction-flow)/process"
           options={{
-            header: () => (
-              <AppHeader
-                title="Proses"
-                left={
-                  <Ionicons
-                    name="close"
-                    size={ICON_SIZE_SMALL}
-                    color={MainColor.yellow}
-                    onPress={() =>
-                      router.navigate(`/investment/(tabs)/transaction`)
-                    }
-                  />
+            title: "Proses",
+            headerLeft: () => (
+              <Ionicons
+                name="close"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.yellow}
+                onPress={() =>
+                  router.navigate(`/investment/(tabs)/transaction`)
                 }
               />
             ),
@@ -322,20 +323,23 @@ export default function UserLayout() {
         <Stack.Screen
           name="investment/[id]/(transaction-flow)/success"
           options={{
-            header: () => <AppHeader title="Transaksi Berhasil" />,
+            title: "Transaksi Berhasil",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/(transaction-flow)/failed"
           options={{
-            header: () => <AppHeader title="Transaksi Gagal" />,
+            title: "Transaksi Gagal",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         <Stack.Screen
           name="investment/[id]/(my-holding)/[id]"
           options={{
-            header: () => <AppHeader title="Detail Saham Saya" />,
+            title: "Detail Saham Saya",
+            headerLeft: () => <BackButton />,
           }}
         />
         {/* ========== End Investment Section ========= */}
@@ -344,111 +348,122 @@ export default function UserLayout() {
         <Stack.Screen
           name="donation/(tabs)"
           options={{
-            header: () => <AppHeader title="Donasi" left={<BackButton path="/crowdfunding" />} />,
+            title: "Donasi",
+            headerLeft: () => <BackButton path="/crowdfunding" />,
           }}
         />
 
         <Stack.Screen
           name="donation/create"
           options={{
-            header: () => <AppHeader title="Tambah Donasi" />,
+            title: "Tambah Donasi",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="donation/create-story"
           options={{
-            header: () => <AppHeader title="Tambah Donasi" />,
+            title: "Tambah Donasi",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         <Stack.Screen
           name="donation/[id]/edit"
           options={{
-            header: () => <AppHeader title="Edit Donasi" />,
+            title: "Edit Donasi",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/edit-story"
           options={{
-            header: () => <AppHeader title="Edit Donasi" />,
+            title: "Edit Donasi",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/edit-rekening"
           options={{
-            header: () => <AppHeader title="Edit Rekening" />,
+            title: "Edit Rekening",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/detail-story"
           options={{
-            header: () => <AppHeader title="Cerita Penggalang" />,
+            title: "Cerita Penggalang",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/infromation-fundrising"
           options={{
-            header: () => <AppHeader title="Informasi Penggalang Dana" />,
+            title: "Informasi Penggalang Dana",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/list-of-donatur"
           options={{
-            header: () => <AppHeader title="Daftar Donatur" />,
+            title: "Daftar Donatur",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/fund-disbursement"
           options={{
-            header: () => <AppHeader title="Pencairan Dana" />,
+            title: "Pencairan Dana",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         <Stack.Screen
           name="donation/[id]/(news)/recap-of-news"
           options={{
-            header: () => <AppHeader title="Rekap Kabar" />,
+            title: "Rekap Kabar",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/(news)/add-news"
           options={{
-            header: () => <AppHeader title="Tambah Berita" />,
+            title: "Tambah Berita",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/(news)/[news]/edit-news"
           options={{
-            header: () => <AppHeader title="Edit Berita" />,
+            title: "Edit Berita",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         <Stack.Screen
           name="donation/[id]/(transaction-flow)/index"
           options={{
-            header: () => <AppHeader title="Donasi" />,
+            title: "Donasi",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/(transaction-flow)/select-bank"
           options={{
-            header: () => <AppHeader title="Pilih Bank" />,
+            title: "Pilih Bank",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/(transaction-flow)/[invoiceId]/invoice"
           options={{
-            header: () => (
-              <AppHeader
-                title="Invoice"
-                left={
-                  <Ionicons
-                    name="close"
-                    size={ICON_SIZE_SMALL}
-                    color={MainColor.yellow}
-                    onPress={() => router.navigate(`/donation/(tabs)/my-donation`)}
-                  />
-                }
+            title: "Invoice",
+            headerLeft: () => (
+              <Ionicons
+                name="close"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.yellow}
+                onPress={() => router.navigate(`/donation/(tabs)/my-donation`)}
               />
             ),
           }}
@@ -456,17 +471,13 @@ export default function UserLayout() {
         <Stack.Screen
           name="donation/[id]/(transaction-flow)/[invoiceId]/process"
           options={{
-            header: () => (
-              <AppHeader
-                title="Proses"
-                left={
-                  <Ionicons
-                    name="close"
-                    size={ICON_SIZE_SMALL}
-                    color={MainColor.yellow}
-                    onPress={() => router.navigate(`/donation/(tabs)/my-donation`)}
-                  />
-                }
+            title: "Proses",
+            headerLeft: () => (
+              <Ionicons
+                name="close"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.yellow}
+                onPress={() => router.navigate(`/donation/(tabs)/my-donation`)}
               />
             ),
           }}
@@ -474,51 +485,54 @@ export default function UserLayout() {
         <Stack.Screen
           name="donation/[id]/(transaction-flow)/[invoiceId]/success"
           options={{
-            header: () => <AppHeader title="Donasi Berhasil" />,
+            title: "Donasi Berhasil",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/(transaction-flow)/[invoiceId]/failed"
           options={{
-            header: () => <AppHeader title="Donasi Gagal" />,
+            title: "Donasi Gagal",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         {/* ========== End Donation Section ========= */}
 
         {/* ========== Job Section ========= */}
-
-
         <Stack.Screen
           name="job/create"
           options={{
-            header: () => <AppHeader title="Tambah Job" />,
+            title: "Tambah Job",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="job/(tabs)"
           options={{
             title: "Job Vacancy",
-            // NOTE: headerLeft di pindahkan ke Tabs Layout
-            header: () => <AppHeader title="Job Vacancy" left={<BackButton path="/home" />} />,
+            headerLeft: () => <BackButton path="/home" />,
           }}
         />
         <Stack.Screen
           name="job/[id]/index"
           options={{
-            header: () => <AppHeader title="Detail Job" />,
+            title: "Detail Job",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="job/[id]/edit"
           options={{
-            header: () => <AppHeader title="Edit Job" />,
+            title: "Edit Job",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="job/[id]/archive"
           options={{
-            header: () => <AppHeader title="Arsip Job" />,
+            title: "Arsip Job",
+            headerLeft: () => <BackButton />,
           }}
         />
 
@@ -528,67 +542,64 @@ export default function UserLayout() {
         <Stack.Screen
           name="forum/create"
           options={{
-            header: () => <AppHeader title="Tambah Diskusi" />,
+            title: "Tambah Diskusi",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/edit"
           options={{
-            header: () => <AppHeader title="Edit Diskusi" />,
+            title: "Edit Diskusi",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/forumku"
           options={{
-            header: () => <AppHeader title="Forumku" left={<BackButton icon={"close"} />} />,
+            title: "Forumku",
+            headerLeft: () => <BackButton icon={"close"} />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/index"
           options={{
-            header: () => <AppHeader title="Detail" />,
+            title: "Detail",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/report-commentar"
           options={{
-            header: () => <AppHeader title="Laporkan Komentar" />,
+            title: "Laporkan Komentar",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/other-report-commentar"
           options={{
-            header: () => <AppHeader title="Laporkan Komentar" />,
+            title: "Laporkan Komentar",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/report-posting"
           options={{
-            header: () => <AppHeader title="Laporkan Diskusi" />,
+            title: "Laporkan Diskusi",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/other-report-posting"
           options={{
-            header: () => <AppHeader title="Laporkan Diskusi" />,
+            title: "Laporkan Diskusi",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="forum/terms"
           options={{
-            header: () => <AppHeader title="Syarat & Ketentuan Forum" />,
-          }}
-        />
-        <Stack.Screen
-          name="forum/[id]/preview-report-posting"
-          options={{
-            header: () => <AppHeader title="Laporan Postingan" />,
-          }}
-        />
-        <Stack.Screen
-          name="forum/[id]/preview-report-comment"
-          options={{
-            header: () => <AppHeader title="Laporan Komentar" />,
+            title: "Syarat & Ketentuan Forum",
+            headerLeft: () => <BackButton />,
           }}
         />
 
@@ -596,25 +607,29 @@ export default function UserLayout() {
         <Stack.Screen
           name="maps/index"
           options={{
-            header: () => <AppHeader title="Maps" />,
+            title: "Maps",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="maps/create"
           options={{
-            header: () => <AppHeader title="Tambah Maps" />,
+            title: "Tambah Maps",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="maps/[id]/edit"
           options={{
-            header: () => <AppHeader title="Edit Maps" />,
+            title: "Edit Maps",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="maps/[id]/custom-pin"
           options={{
-            header: () => <AppHeader title="Custom Pin Maps" />,
+            title: "Custom Pin Maps",
+            headerLeft: () => <BackButton />,
           }}
         />
 
@@ -622,7 +637,8 @@ export default function UserLayout() {
         <Stack.Screen
           name="marketplace/index"
           options={{
-            header: () => <AppHeader title="Market Place" />,
+            title: "Market Place",
+            headerLeft: () => <BackButton />,
           }}
         />
       </Stack>

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

@@ -2,64 +2,35 @@ import { IconHome } from "@/components/_Icon";
 import { TabsStyles } from "@/styles/tabs-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { Tabs } from "expo-router";
-import { View } from "react-native";
-import { MainColor } from "@/constants/color-palet";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Platform } from "react-native";
-
-function CollaborationTabsWrapper() {
-  const insets = useSafeAreaInsets();
-  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
-
-  return (
-    <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
-      <Tabs
-        screenOptions={{
-          ...TabsStyles,
-          tabBarStyle: Platform.select({
-            ios: {
-              borderTopWidth: 0,
-              paddingTop: 12,
-              height: 80,
-            },
-            android: {
-              borderTopWidth: 0,
-              paddingTop: 5,
-              height: 70 + paddingBottom,
-            },
-          }),
-        }}
-      >
-        <Tabs.Screen
-          name="index"
-          options={{
-            title: "Beranda",
-            tabBarIcon: ({ color }) => <IconHome color={color} />,
-          }}
-        />
-        <Tabs.Screen
-          name="participant"
-          options={{
-            title: "Partisipan",
-            tabBarIcon: ({ color }) => (
-              <Ionicons size={20} name="people" color={color} />
-            ),
-          }}
-        />
-        <Tabs.Screen
-          name="group"
-          options={{
-            title: "Grup",
-            tabBarIcon: ({ color }) => (
-              <Ionicons size={20} name="chatbox-ellipses" color={color} />
-            ),
-          }}
-        />
-      </Tabs>
-    </View>
-  );
-}
 
 export default function CollaborationTabsLayout() {
-  return <CollaborationTabsWrapper />;
+  return (
+    <Tabs screenOptions={TabsStyles}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Beranda",
+          tabBarIcon: ({ color }) => <IconHome color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="participant"
+        options={{
+          title: "Partisipan",
+          tabBarIcon: ({ color }) => (
+            <Ionicons size={20} name="people" color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="group"
+        options={{
+          title: "Grup",
+          tabBarIcon: ({ color }) => (
+            <Ionicons size={20} name="chatbox-ellipses" color={color} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
 }

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

@@ -10,7 +10,6 @@ import {
   TextCustom,
   ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { apiCollaborationGroup } from "@/service/api-client/api-collaboration";
 import { Stack, useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useState, useCallback } from "react";
@@ -41,7 +40,8 @@ export default function CollaborationRoomInfo() {
     <>
       <Stack.Screen
         options={{
-          header: () => <AppHeader title="Info" left={<BackButton />} />,
+          title: `Info`,
+          headerLeft: () => <BackButton />,
         }}
       />
 

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

@@ -1,5 +1,4 @@
 import { BackButton } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import ChatScreen from "@/screens/Collaboration/GroupChatSection";
@@ -13,18 +12,14 @@ export default function CollaborationRoomChat() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title={`Proyek ${detail}`}
-              left={<BackButton />}
-              right={
-                <Feather
-                  name="info"
-                  size={ICON_SIZE_SMALL}
-                  color={MainColor.yellow}
-                  onPress={() => router.push(`/collaboration/${id}/${detail}/info`)}
-                />
-              }
+          title: `Proyek ${detail}`,
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <Feather
+              name="info"
+              size={ICON_SIZE_SMALL}
+              color={MainColor.yellow}
+              onPress={() => router.push(`/collaboration/${id}/${detail}/info`)}
             />
           ),
         }}

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

@@ -6,7 +6,6 @@ import {
   MenuDrawerDynamicGrid,
   ViewWrapper
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection";
 import { apiCollaborationGetOne } from "@/service/api-client/api-collaboration";
 import { Ionicons } from "@expo/vector-icons";
@@ -39,14 +38,10 @@ export default function CollaborationDetailParticipant() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Detail Proyek"
-              left={<BackButton />}
-              right={
-                <DotButton onPress={() => setOpenDrawerParticipant(true)} />
-              }
-            />
+          title: "Detail Proyek",
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <DotButton onPress={() => setOpenDrawerParticipant(true)} />
           ),
         }}
       />

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

@@ -8,7 +8,6 @@ import {
   Spacing,
   ViewWrapper
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconEdit } from "@/components/_Icon";
 import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection";
 import {
@@ -67,13 +66,9 @@ export default function CollaborationDetailProjectMain() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Proyek Saya"
-              left={<BackButton />}
-              right={<DotButton onPress={() => setOpenDrawer(true)} />}
-            />
-          ),
+          title: "Proyek Saya",
+          headerLeft: () => <BackButton />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
         }}
       />
       <ViewWrapper>

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

@@ -9,7 +9,6 @@ import {
   MenuDrawerDynamicGrid,
   ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { useAuth } from "@/hooks/use-auth";
 import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection";
 import {
@@ -75,14 +74,10 @@ export default function CollaborationDetail() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Detail Proyek"
-              left={<BackButton />}
-              right={
-                <DotButton onPress={() => setOpenDrawerMenu(true)} />
-              }
-            />
+          title: "Detail Proyek",
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <DotButton onPress={() => setOpenDrawerMenu(true)} />
           ),
         }}
       />

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

@@ -1,9 +1,9 @@
 import {
   BaseBox,
   Grid,
-  OS_Wrapper,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
@@ -25,7 +25,7 @@ export default function Crowdfunding() {
   ];
 
   return (
-    <OS_Wrapper>
+    <ViewWrapper>
       <StackCustom>
         <Image
           source={require("@/assets/images/constants/crowd-hipmi.png")}
@@ -63,6 +63,6 @@ export default function Crowdfunding() {
           </BaseBox>
         ))}
       </StackCustom>
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

app/(application)/(user)/delete-account.tsx

@@ -3,10 +3,10 @@ import {
   BaseBox,
   ButtonCustom,
   CenterCustom,
-  OS_Wrapper,
   StackCustom,
   TextCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import { useAuth } from "@/hooks/use-auth";
 import { apiDeleteUser } from "@/service/api-client/api-user";
@@ -68,10 +68,7 @@ export default function DeleteAccount() {
 
   return (
     <>
-      <OS_Wrapper
-        enableKeyboardHandling
-        contentPaddingBottom={250}
-      >
+      <ViewWrapper>
         <StackCustom>
           <BaseBox>
             <StackCustom>
@@ -108,7 +105,7 @@ export default function DeleteAccount() {
             </StackCustom>
           </BaseBox>
         </StackCustom>
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

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

@@ -1,66 +1,37 @@
 import { IconHome, IconStatus } from "@/components/_Icon";
-import { ICON_SIZE_SMALL, OS_ANDROID_HEIGHT, OS_IOS_HEIGHT } from "@/constants/constans-value";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { TabsStyles } from "@/styles/tabs-styles";
 import {
     FontAwesome5
 } from "@expo/vector-icons";
 import { Tabs } from "expo-router";
-import { View } from "react-native";
-import { MainColor } from "@/constants/color-palet";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Platform } from "react-native";
-
-function DonationTabsWrapper() {
-  const insets = useSafeAreaInsets();
-  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
 
+export default function InvestmentTabsLayout() {
   return (
-    <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
-      <Tabs
-        screenOptions={{
-          ...TabsStyles,
-          tabBarStyle: Platform.select({
-            ios: {
-              borderTopWidth: 0,
-              paddingTop: 12,
-              height: OS_IOS_HEIGHT,
-            },
-            android: {
-              borderTopWidth: 0,
-              paddingTop: 5,
-              height: OS_ANDROID_HEIGHT + paddingBottom,
-            },
-          }),
+    <Tabs screenOptions={TabsStyles}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Beranda",
+          tabBarIcon: ({ color }) => <IconHome color={color} />,
         }}
-      >
-        <Tabs.Screen
-          name="index"
-          options={{
-            title: "Beranda",
-            tabBarIcon: ({ color }) => <IconHome color={color} />,
-          }}
-        />
-        <Tabs.Screen
-          name="status"
-          options={{
-            title: "Galang Dana",
-            tabBarIcon: ({ color }) => <IconStatus color={color} />,
-          }}
-        />
-        <Tabs.Screen
-          name="my-donation"
-          options={{
-            title: "Donasi Saya",
-            tabBarIcon: ({ color }) => (
-              <FontAwesome5 name="donate" color={color} size={ICON_SIZE_SMALL} />
-            ),
-          }}
-        />
-      </Tabs>
-    </View>
+      />
+      <Tabs.Screen
+        name="status"
+        options={{
+          title: "Galang Dana",
+          tabBarIcon: ({ color }) => <IconStatus color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="my-donation"
+        options={{
+          title: "Donasi Saya",
+          tabBarIcon: ({ color }) => (
+            <FontAwesome5 name="donate" color={color} size={ICON_SIZE_SMALL} />
+          ),
+        }}
+      />
+    </Tabs>
   );
 }
-
-export default function DonationTabsLayout() {
-  return <DonationTabsWrapper />;
-}

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

@@ -1,9 +1,57 @@
-import Donation_ScreenBeranda from "@/screens/Donation/ScreenBeranda";
+import {
+  FloatingButton,
+  LoaderCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import Donation_BoxPublish from "@/screens/Donation/BoxPublish";
+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 (
-    <>
-      <Donation_ScreenBeranda />
-    </>
+    <ViewWrapper
+      hideFooter
+      floatingButton={
+        <FloatingButton onPress={() => router.push("/donation/create")} />
+      }
+    >
+      {loadList ? (
+        <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,5 +1,142 @@
-import Donation_ScreenMyDonation from "@/screens/Donation/ScreenMyDonation";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BadgeCustom,
+  BaseBox,
+  DummyLandscapeImage,
+  Grid,
+  LoaderCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { useAuth } from "@/hooks/use-auth";
+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() {
-  return <Donation_ScreenMyDonation />;
+  const { user } = useAuth();
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [user?.id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      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>
+      {loadList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(list) ? (
+        <TextCustom align="center" color="gray">
+          Belum ada transaksi
+        </TextCustom>
+      ) : (
+        list?.map((item, index) => (
+          <BaseBox
+            key={index}
+            paddingTop={7}
+            paddingBottom={7}
+            onPress={() => {
+              handlePress({
+                status: _.lowerCase(item.statusInvoice),
+                invoiceId: item.id,
+                donationId: item.donasiId,
+              });
+            }}
+          >
+            <Grid>
+              <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>
+
+                  <TextCustom bold color="yellow">
+                    Rp. {formatCurrencyDisplay(item.nominal)}
+                  </TextCustom>
+
+                  <BadgeCustom
+                    variant="light"
+                    color={handlerColor(_.lowerCase(item.statusInvoice))}
+                    fullWidth
+                  >
+                    {item.statusInvoice}
+                  </BadgeCustom>
+                </StackCustom>
+              </Grid.Col>
+            </Grid>
+          </BaseBox>
+        ))
+      )}
+    </ViewWrapper>
+  );
 }

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

@@ -1,10 +1,80 @@
-import Donation_ScreenStatus from "@/screens/Donation/ScreenStatus";
-import { useLocalSearchParams } from "expo-router";
+/* 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 { 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 { status } = useLocalSearchParams<{ status?: string }>();
-  
+  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);
+    // tambahkan logika lain seperti filter dsb.
+  };
+
+  const scrollComponent = (
+    <ScrollableCustom
+      data={dummyMasterStatus.map((e, i) => ({
+        id: i,
+        label: e.label,
+        value: e.value,
+      }))}
+      onButtonPress={handlePress}
+      activeId={activeCategory as any}
+    />
+  );
   return (
-    <Donation_ScreenStatus initialStatus={status || "publish"} />
+    <ViewWrapper hideFooter headerComponent={scrollComponent}>
+      {loadList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Tidak ada data {activeCategory}</TextCustom>
+      ) : (
+        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,15 +1,14 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-  BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
   InformationBox,
   LandscapeFrameUploaded,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextAreaCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -32,7 +31,7 @@ export default function DonationEditNews() {
   useFocusEffect(
     useCallback(() => {
       onLoadData();
-    }, [news]),
+    }, [news])
   );
 
   const onLoadData = async () => {
@@ -105,23 +104,7 @@ export default function DonationEditNews() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-      footerComponent={
-        <BoxButtonOnFooter>
-          <ButtonCustom
-            disabled={!data?.title || !data?.deskripsi}
-            isLoading={isLoading}
-            onPress={() => {
-              handlerSubmitUpdate();
-            }}
-          >
-            Update
-          </ButtonCustom>
-        </BoxButtonOnFooter>
-      }
-    >
+    <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Upload gambar bersifat opsional untuk melengkapi kabar terkait donasi Anda." />
         <LandscapeFrameUploaded
@@ -165,8 +148,17 @@ export default function DonationEditNews() {
         />
 
         <Spacing />
+        <ButtonCustom
+          disabled={!data?.title || !data?.deskripsi}
+          isLoading={isLoading}
+          onPress={() => {
+            handlerSubmitUpdate();
+          }}
+        >
+          Update
+        </ButtonCustom>
       </StackCustom>
       <Spacing />
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

@@ -7,11 +7,10 @@ import {
   DrawerCustom,
   DummyLandscapeImage,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconEdit } from "@/components/_Icon";
 import { IconTrash } from "@/components/_Icon/IconTrash";
 import { useAuth } from "@/hooks/use-auth";
@@ -28,7 +27,6 @@ import {
 } from "expo-router";
 import { useCallback, useState } from "react";
 import Toast from "react-native-toast-message";
-import { dateTimeView } from "@/utils/dateTimeView";
 
 export default function DonationNews() {
   const { user } = useAuth();
@@ -59,24 +57,19 @@ export default function DonationNews() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Detail Kabar"
-              left={<BackButton />}
-              right={
-                user?.id === data?.authorId && (
-                  <DotButton onPress={() => setOpenDrawer(true)} />
-                )
-              }
-            />
-          ),
+          title: "Detail Kabar",
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            user?.id === data?.authorId && (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ),
         }}
       />
-      <OS_Wrapper>
+      <ViewWrapper>
         <BaseBox>
           <StackCustom>
-            <TextCustom color="gray" size={"small"} style={{ alignSelf: "flex-end" }}>
-              {dateTimeView({date: data?.createdAt})}
+            <TextCustom style={{ alignSelf: "flex-end" }}>
+              {formatChatTime(data?.createdAt)}
             </TextCustom>
 
             {data && data.imageId && (
@@ -90,7 +83,7 @@ export default function DonationNews() {
             <TextCustom>{data?.deskripsi || "-"}</TextCustom>
           </StackCustom>
         </BaseBox>
-      </OS_Wrapper>
+      </ViewWrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

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

@@ -1,14 +1,13 @@
 import {
-  BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
   InformationBox,
   LandscapeFrameUploaded,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextAreaCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { apiDonationCreateNews } from "@/service/api-client/api-donation";
@@ -54,7 +53,7 @@ export default function DonationAddNews() {
           text1: "Gagal menambah berita",
         });
 
-        return;
+        return
       }
 
       Toast.show({
@@ -71,23 +70,7 @@ export default function DonationAddNews() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-      footerComponent={
-        <BoxButtonOnFooter>
-          <ButtonCustom
-            disabled={!data.title || !data.deskripsi}
-            isLoading={isLoading}
-            onPress={() => {
-              handlerSubmit();
-            }}
-          >
-            Simpan
-          </ButtonCustom>
-        </BoxButtonOnFooter>
-      }
-    >
+    <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Upload gambar bersifat opsional untuk melengkapi kabar terkait donasi Anda." />
         <LandscapeFrameUploaded image={image?.uri} />
@@ -133,7 +116,17 @@ export default function DonationAddNews() {
         />
 
         <Spacing />
+        <ButtonCustom
+          disabled={!data.title || !data.deskripsi}
+          isLoading={isLoading}
+          onPress={() => {
+            handlerSubmit();
+          }}
+        >
+          Simpan
+        </ButtonCustom>
       </StackCustom>
-    </OS_Wrapper>
+      <Spacing />
+    </ViewWrapper>
   );
 }

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

@@ -1,8 +1,110 @@
-import { useLocalSearchParams } from "expo-router";
-import Donation_ScreenListOfNews from "@/screens/Donation/ScreenListOfNews";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BackButton,
+  BaseBox,
+  DrawerCustom,
+  Grid,
+  LoaderCustom,
+  MenuDrawerDynamicGrid,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconPlus } from "@/components/_Icon";
+import { apiDonationGetNewsById } from "@/service/api-client/api-donation";
+import { formatChatTime } from "@/utils/formatChatTime";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function DonationRecapOfNews() {
   const { id } = useLocalSearchParams();
-  
-  return <Donation_ScreenListOfNews donationId={id as string} />;
+  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 />,
+        }}
+      />
+      <ViewWrapper>
+        {loadList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(list) ? (
+          <TextCustom align="center" color="gray">
+            Tidak ada kabar
+          </TextCustom>
+        ) : (
+          list?.map((item: any, index: number) => (
+            <BaseBox key={index} href={`/donation/[id]/(news)/${item.id}`}>
+              <Grid>
+                <Grid.Col span={8}>
+                  <TextCustom truncate bold>
+                    {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
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconPlus />,
+              label: "Tambah Berita",
+              path: `/donation/${id}/(news)/add-news`,
+            },
+          ]}
+          onPressItem={(item) => {
+            console.log("PATH ", item.path);
+            router.navigate(item.path as any);
+            setOpenDrawer(false);
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
 }

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

@@ -1,8 +1,112 @@
-import { useLocalSearchParams } from "expo-router";
-import Donation_ScreenRecapOfNews from "@/screens/Donation/ScreenRecapOfNews";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BackButton,
+  BaseBox,
+  DotButton,
+  DrawerCustom,
+  Grid,
+  LoaderCustom,
+  MenuDrawerDynamicGrid,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconPlus } from "@/components/_Icon";
+import { apiDonationGetNewsById } from "@/service/api-client/api-donation";
+import { formatChatTime } from "@/utils/formatChatTime";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function DonationRecapOfNews() {
   const { id } = useLocalSearchParams();
-  
-  return <Donation_ScreenRecapOfNews donationId={id as string} />;
+  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: "Rekap Kabar",
+          headerLeft: () => <BackButton />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+        }}
+      />
+      <ViewWrapper>
+        {loadList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(list) ? (
+          <TextCustom align="center" color="gray">
+            Tidak ada kabar
+          </TextCustom>
+        ) : (
+          list?.map((item: any, index: number) => (
+            <BaseBox key={index} href={`/donation/[id]/(news)/${item.id}`}>
+              <Grid>
+                <Grid.Col span={8}>
+                  <TextCustom truncate bold>
+                    {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
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconPlus />,
+              label: "Tambah Berita",
+              path: `/donation/${id}/(news)/add-news`,
+            },
+          ]}
+          onPressItem={(item) => {
+            console.log("PATH ", item.path);
+            router.navigate(item.path as any);
+            setOpenDrawer(false);
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
 }

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

@@ -2,10 +2,10 @@
 import {
   BaseBox,
   Grid,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { apiDonationGetInvoiceById } from "@/service/api-client/api-donation";
@@ -63,7 +63,7 @@ export default function DonasiFailed() {
   ];
 
   return (
-    <OS_Wrapper>
+    <ViewWrapper>
       <StackCustom>
         <BaseBox>
           <StackCustom>
@@ -105,6 +105,6 @@ export default function DonasiFailed() {
           </StackCustom>
         </BaseBox>
       </StackCustom>
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

@@ -1,15 +1,14 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
   BaseBox,
-  BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
   Grid,
   InformationBox,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
 import CopyButton from "@/components/Button/CoyButton";
 import { MainColor } from "@/constants/color-palet";
@@ -36,7 +35,7 @@ export default function DonationInvoice() {
   useFocusEffect(
     useCallback(() => {
       onLoadData();
-    }, [invoiceId]),
+    }, [invoiceId])
   );
 
   const onLoadData = async () => {
@@ -101,21 +100,7 @@ export default function DonationInvoice() {
 
   return (
     <>
-      <OS_Wrapper
-        footerComponent={
-          <BoxButtonOnFooter>
-            <ButtonCustom
-              disabled={!image}
-              isLoading={isLoading}
-              onPress={() => {
-                handlerUpdateInvoice();
-              }}
-            >
-              Simpan
-            </ButtonCustom>
-          </BoxButtonOnFooter>
-        }
-      >
+      <ViewWrapper>
         <StackCustom>
           <InformationBox
             text={`Mohon transfer donasi anda ke rekening dibawah`}
@@ -219,9 +204,19 @@ export default function DonationInvoice() {
               </ButtonCenteredOnly>
             </StackCustom>
           </BaseBox>
+
+          <ButtonCustom
+            disabled={!image}
+            isLoading={isLoading}
+            onPress={() => {
+              handlerUpdateInvoice();
+            }}
+          >
+            Simpan
+          </ButtonCustom>
         </StackCustom>
         <Spacing />
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

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

@@ -1,11 +1,11 @@
-import { BaseBox, OS_Wrapper, StackCustom, TextCustom } from "@/components";
+import { BaseBox, StackCustom, TextCustom, ViewWrapper } from "@/components";
 import MoneyTransferAnimation from "@/components/_ShareComponent/MoneyTransferAnimation";
 import { View } from "react-native";
 
 export default function DonationProcess() {
   return (
     <>
-      <OS_Wrapper>
+      <ViewWrapper>
         <BaseBox>
           <StackCustom>
             <TextCustom align="center" bold>
@@ -35,7 +35,7 @@ export default function DonationProcess() {
             </Grid.Col>
           </Grid>
         </BaseBox> */}
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

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

@@ -2,10 +2,10 @@
 import {
   BaseBox,
   Grid,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { apiDonationGetInvoiceById } from "@/service/api-client/api-donation";
@@ -63,7 +63,7 @@ export default function DonationSuccess() {
   ];
 
   return (
-    <OS_Wrapper>
+    <ViewWrapper>
       <StackCustom>
         <BaseBox>
           <StackCustom>
@@ -105,7 +105,7 @@ export default function DonationSuccess() {
           </StackCustom>
         </BaseBox>
       </StackCustom>
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }
 

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

@@ -3,39 +3,28 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   Grid,
-  OS_Wrapper,
   TextCustom,
   TextInputCustom,
+  ViewWrapper,
 } 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 { useAuth } from "@/hooks/use-auth";
 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";
-import Toast from "react-native-toast-message";
 
 export default function InvestmentInputDonation() {
-  const { user } = useAuth();
   const { id } = useLocalSearchParams();
   const [nominal, setNominal] = useState<number>(0);
 
   const handlerSubmit = async () => {
-    if (!user?.id) {
-      Toast.show({
-        type: "error",
-        text1: "User tidak ditemukan",
-      });
-
-      return;
-    }
     try {
       await AsyncStorage.setItem(
         LOCAL_STORAGE_KEY.transactionDonation,
-        JSON.stringify({ nominal: nominal.toString() }),
+        JSON.stringify({ nominal: nominal.toString() })
       );
       router.replace(`/donation/${id}/select-bank`);
     } catch (error) {
@@ -64,7 +53,7 @@ export default function InvestmentInputDonation() {
   );
   return (
     <>
-      <OS_Wrapper enableKeyboardHandling contentPaddingBottom={250} footerComponent={bottomComponent}>
+      <ViewWrapper footerComponent={bottomComponent}>
         {listData.map((item, i) => (
           <BaseBox key={i} onPress={() => setNominal(item.value)}>
             <Grid>
@@ -98,7 +87,7 @@ export default function InvestmentInputDonation() {
             Minimal donasi Rp. 10.000
           </TextCustom>
         </BaseBox>
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

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

@@ -2,7 +2,7 @@ import {
   BaseBox,
   BoxButtonOnFooter,
   ButtonCustom,
-  OS_Wrapper,
+  ViewWrapper,
 } from "@/components";
 import { RadioCustom, RadioGroup } from "@/components/Radio/RadioCustom";
 import { LOCAL_STORAGE_KEY } from "@/constants/local-storage-key";
@@ -91,7 +91,7 @@ export default function DonationSelectBank() {
     );
   };
   return (
-    <OS_Wrapper footerComponent={buttonSubmit()}>
+    <ViewWrapper footerComponent={buttonSubmit()}>
       <RadioGroup value={select} onChange={setSelect}>
         {_.isEmpty(listBank)
           ? []
@@ -101,6 +101,6 @@ export default function DonationSelectBank() {
               </BaseBox>
             ))}
       </RadioGroup>
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

@@ -4,13 +4,11 @@ import {
   DotButton,
   DrawerCustom,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
   Spacing,
+  ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconEdit, IconNews } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
-import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import Donation_ButtonStatusSection from "@/screens/Donation/ButtonStatusSection";
@@ -18,7 +16,6 @@ import Donation_ComponentBoxDetailData from "@/screens/Donation/ComponentBoxDeta
 import Donation_ComponentStoryFunrising from "@/screens/Donation/ComponentStoryFunrising";
 import Donation_ProgressSection from "@/screens/Donation/ProgressSection";
 import { apiDonationGetOne } from "@/service/api-client/api-donation";
-import { countDownAndCondition } from "@/utils/countDownAndCondition";
 import { FontAwesome6 } from "@expo/vector-icons";
 import {
   router,
@@ -27,20 +24,19 @@ import {
   useLocalSearchParams,
 } from "expo-router";
 import _ from "lodash";
-import { useCallback, useEffect, useState } from "react";
-import { RefreshControl } from "react-native";
+import { useCallback, useState } from "react";
 
 export default function DonasiDetailStatus() {
   const { id, status } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
   const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
-  const [refreshing, setRefreshing] = useState(false);
-  const [data, setData] = useState<any | null>(null);
+
+  const [data, setData] = useState<any>();
 
   useFocusEffect(
     useCallback(() => {
       onLoadData();
-    }, [id]),
+    }, [id])
   );
 
   const onLoadData = async () => {
@@ -62,101 +58,40 @@ export default function DonasiDetailStatus() {
     setOpenDrawer(false);
   };
 
-  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 onRefresh = useCallback(() => {
-    try {
-      setRefreshing(true);
-      onLoadData();
-    } catch (error) {
-      console.log("Error refresh");
-    } finally {
-      setRefreshing(false);
-    }
-  }, []);
-
   return (
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title={`Detail ${_.startCase(status as string)}`}
-              left={<BackButton />}
-              right={
-                status === "draft" ? (
-                  <DotButton onPress={() => setOpenDrawer(true)} />
-                ) : status === "publish" ? (
-                  <DotButton onPress={() => setOpenDrawerPublish(true)} />
-                ) : null
-              }
-            />
-          ),
+          title: `Detail ${_.startCase(status as string)}`,
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            status === "draft" ? (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ) : status === "publish" ? (
+              <DotButton onPress={() => setOpenDrawerPublish(true)} />
+            ) : null,
         }}
       />
-      <OS_Wrapper
-        refreshControl={
-          <RefreshControl
-            refreshing={refreshing}
-            onRefresh={onRefresh}
-            tintColor={MainColor.yellow}
-            colors={[MainColor.yellow]}
-          />
-        }
-      >
-        {!data ? (
-          <CustomSkeleton height={400} />
-        ) : (
-          <>
-            <Donation_ComponentBoxDetailData
-              sisaHari={value.sisa}
-              reminder={value.reminder}
-              data={data}
-              showSisaHari={status === "publish" ? true : false}
-              bottomSection={
-                status === "publish" && (
-                  <Donation_ProgressSection
-                    id={id as string}
-                    progres={Number(data?.progres) || 0}
-                  />
-                )
-              }
-            />
-            <Donation_ComponentStoryFunrising
-              id={id as string}
-              dataStory={data?.CeritaDonasi}
-            />
-            <Spacing />
-            {data && (
-              <Donation_ButtonStatusSection
-                id={id as string}
-                status={status as string}
-              />
-            )}
-
-            <Spacing />
-          </>
-        )}
-      </OS_Wrapper>
+      <ViewWrapper>
+        <Donation_ComponentBoxDetailData
+          data={data}
+          bottomSection={
+            status === "publish" && (
+              <Donation_ProgressSection id={id as string} />
+            )
+          }
+        />
+        <Donation_ComponentStoryFunrising
+          id={id as string}
+          dataStory={data?.CeritaDonasi}
+        />
+        <Spacing />
+        <Donation_ButtonStatusSection
+          id={id as string}
+          status={status as string}
+        />
+        <Spacing />
+      </ViewWrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

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

@@ -1,9 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
   DummyLandscapeImage,
-  OS_Wrapper,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
 import { apiDonationGetOne } from "@/service/api-client/api-donation";
 import { useFocusEffect, useLocalSearchParams } from "expo-router";
@@ -32,12 +32,12 @@ export default function DonationDetailStory() {
     }
   };
   return (
-    <OS_Wrapper>
+    <ViewWrapper>
       <StackCustom>
         <TextCustom>{data?.pembukaan || "-"}</TextCustom>
         <DummyLandscapeImage imageId={data?.imageId} />
         <TextCustom>{data?.cerita || "-"}</TextCustom>
       </StackCustom>
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-  OS_Wrapper,
+  ViewWrapper,
   StackCustom,
   InformationBox,
   TextInputCustom,
@@ -76,7 +76,7 @@ export default function DonationEditRekening() {
   };
 
   return (
-    <OS_Wrapper enableKeyboardHandling contentPaddingBottom={250}>
+    <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Pastikan Anda mengisi nama bank dan nomor rekening dengan benar. Informasi ini akan membantu admin memverifikasi dan memproses penggalangan dana Anda dengan cepat dan tepat setelah penggalangan dana dipublikasikan." />
         <TextInputCustom
@@ -105,6 +105,6 @@ export default function DonationEditRekening() {
         </ButtonCustom>
       </StackCustom>
       <Spacing />
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

@@ -4,10 +4,10 @@ import {
   ButtonCustom,
   InformationBox,
   LandscapeFrameUploaded,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextAreaCustom,
+  ViewWrapper,
 } from "@/components";
 import API_IMAGE from "@/constants/api-storage";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -93,7 +93,7 @@ export default function DonationEditStory() {
   };
 
   return (
-    <OS_Wrapper enableKeyboardHandling contentPaddingBottom={250}>
+    <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Cerita Anda adalah kunci untuk menginspirasi kebaikan. Jelaskan dengan jujur dan jelas tujuan penggalangan dana ini agar calon donatur memahami dampak positif yang dapat mereka wujudkan melalui kontribusi mereka." />
         <TextAreaCustom
@@ -146,6 +146,6 @@ export default function DonationEditStory() {
         </ButtonCustom>
       </StackCustom>
       <Spacing />
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

@@ -1,18 +1,16 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-  BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
   InformationBox,
   LandscapeFrameUploaded,
   LoaderCustom,
-  OS_Wrapper,
   SelectCustom,
   Spacing,
   StackCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
-import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
 import API_IMAGE from "@/constants/api-storage";
 import DIRECTORY_ID from "@/constants/directory-id";
 import {
@@ -62,7 +60,7 @@ export default function DonationEdit() {
     useCallback(() => {
       onLoadData();
       onLoadList();
-    }, [id]),
+    }, [id])
   );
 
   const onLoadData = async () => {
@@ -81,6 +79,7 @@ export default function DonationEdit() {
           imageId: response.data.imageId,
         });
       }
+
     } catch (error) {
       console.log("[ERROR]", error);
     }
@@ -183,25 +182,10 @@ export default function DonationEdit() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-      footerComponent={
-        <BoxButtonOnFooter>
-          <ButtonCustom
-            isLoading={isLoading}
-            onPress={() => {
-              handlerSubmitUpdate();
-            }}
-          >
-            Update
-          </ButtonCustom>
-        </BoxButtonOnFooter>
-      }
-    >
+    <ViewWrapper>
       <InformationBox text="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita penggalangan dana." />
       {!data || loadList ? (
-        <ListSkeletonComponent />
+        <LoaderCustom />
       ) : (
         <StackCustom gap={"xs"}>
           <TextInputCustom
@@ -276,9 +260,17 @@ export default function DonationEdit() {
           />
 
           <Spacing />
+          <ButtonCustom
+            isLoading={isLoading}
+            onPress={() => {
+              handlerSubmitUpdate();
+            }}
+          >
+            Update
+          </ButtonCustom>
         </StackCustom>
       )}
       <Spacing />
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

@@ -1,8 +1,124 @@
-import { useLocalSearchParams } from "expo-router";
-import Donation_ScreenFundDisbursement from "@/screens/Donation/ScreenFundDisbursement";
+/* 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, useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import React, { useState } from "react";
 
 export default function DonationFundDisbursement() {
   const { id } = useLocalSearchParams();
-  
-  return <Donation_ScreenFundDisbursement donationId={id as string} />;
+
+  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>
+        <InformationBox text="Pencairan dana akan dilakukan oleh Admin HIPMI tanpa campur tangan pihak manapun, jika berita pencairan dana dibawah tidak sesuai dengan kabar yang diberikan oleh PENGGALANG DANA. Maka pegguna lain dapat melaporkannya pada Admin HIPMI !" />
+        <BaseBox>
+          <Grid>
+            <Grid.Col span={6}>
+              <TextCustom bold color="yellow">
+                Rp. {formatCurrencyDisplay(data?.totalPencairan)}
+              </TextCustom>
+              <TextCustom size="small">Total Pencairan Dana</TextCustom>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <TextCustom bold color="yellow">
+                {data?.akumulasiPencairan} kali
+              </TextCustom>
+              <TextCustom size="small">Akumulasi Pencairan</TextCustom>
+            </Grid.Col>
+          </Grid>
+        </BaseBox>
+
+        {loadData ? (
+          <LoaderCustom />
+        ) : _.isEmpty(listData) ? (
+          <TextCustom align="center" color="gray">
+            Belum ada data
+          </TextCustom>
+        ) : (
+          listData?.map((item, index) => (
+            <BaseBox key={index}>
+              <StackCustom>
+                <Grid>
+                  <Grid.Col span={8}>
+                    <TextCustom bold>{item?.title}</TextCustom>
+                  </Grid.Col>
+                  <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+                    <TextCustom>{dayjs(item?.createdAt).format("DD MMM YYYY")}</TextCustom>
+                  </Grid.Col>
+                </Grid>
+                <TextCustom>{item?.deskripsi}</TextCustom>
+                <ButtonCenteredOnly
+                  onPress={() => {
+                    router.navigate(`/(application)/(image)/preview-image/${item?.imageId}`);
+                  }}
+                  icon="file-text"
+                >
+                  Bukti Transaksi
+                </ButtonCenteredOnly>
+              </StackCustom>
+            </BaseBox>
+          ))
+        )}
+      </ViewWrapper>
+    </>
+  );
 }

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

@@ -6,12 +6,10 @@ import {
   DotButton,
   DrawerCustom,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
   StackCustom,
+  ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconNews } from "@/components/_Icon";
-import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import { useAuth } from "@/hooks/use-auth";
 import Donation_ComponentBoxDetailData from "@/screens/Donation/ComponentBoxDetailData";
 import Donation_ComponentInfoFundrising from "@/screens/Donation/ComponentInfoFundrising";
@@ -36,7 +34,7 @@ export default function DonasiDetailBeranda() {
   useFocusEffect(
     useCallback(() => {
       onLoadData();
-    }, [id]),
+    }, [id])
   );
 
   const onLoadData = async () => {
@@ -77,10 +75,10 @@ export default function DonasiDetailBeranda() {
     <>
       <BoxButtonOnFooter>
         <ButtonCustom
-          disabled={value?.reminder || !data}
+          disabled={value?.reminder}
           onPress={() => router.navigate(`/donation/${id}/(transaction-flow)`)}
         >
-          {!data ? "Loading..." : value?.reminder ? "Waktu berakhir" : "Donasi"}
+          {value?.reminder ? "Waktu berakhir" : "Donasi"}
         </ButtonCustom>
       </BoxButtonOnFooter>
     </>
@@ -90,43 +88,29 @@ export default function DonasiDetailBeranda() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Detail Donasi"
-              left={<BackButton />}
-              right={
-                user?.id === data?.Author?.id ? (
-                  <DotButton onPress={() => setOpenDrawer(true)} />
-                ) : null
-              }
-            />
-          ),
+          title: `Detail Donasi`,
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            user?.id === data?.Author?.id ? (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ) : null,
         }}
       />
-      <OS_Wrapper footerComponent={buttonSection}>
-        {!data ? (
-          <CustomSkeleton height={400} />
-        ) : (
-          <StackCustom>
-            <Donation_ComponentBoxDetailData
-              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}
-            />
-          </StackCustom>
-        )}
-      </OS_Wrapper>
+      <ViewWrapper footerComponent={buttonSection}>
+        <StackCustom>
+          <Donation_ComponentBoxDetailData
+            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}
+          />
+        </StackCustom>
+      </ViewWrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

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

@@ -5,9 +5,9 @@ import {
   ButtonCustom,
   Grid,
   LoaderCustom,
-  OS_Wrapper,
   Spacing,
   TextCustom,
+  ViewWrapper
 } from "@/components";
 import Donation_BoxPublish from "@/screens/Donation/BoxPublish";
 import { apiDonationFundrising } from "@/service/api-client/api-donation";
@@ -44,7 +44,7 @@ export default function DonationInformationFunrising() {
 
   return (
     <>
-      <OS_Wrapper>
+      <ViewWrapper>
         <BaseBox>
           <Grid>
             <Grid.Col span={6} style={{ justifyContent: "center" }}>
@@ -80,7 +80,7 @@ export default function DonationInformationFunrising() {
             <Donation_BoxPublish key={index} id={item?.id} data={item} />
           ))
         )}
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

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

@@ -1,8 +1,94 @@
-import { useLocalSearchParams } from "expo-router";
-import Donation_ScreenListOfDonatur from "@/screens/Donation/ScreenListOfDonatur";
+/* 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 DonationListOfDonatur() {
+export default function Donation_ListOfDonatur() {
   const { id } = useLocalSearchParams();
-  
-  return <Donation_ScreenListOfDonatur donationId={id as string} />;
+  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>
+        {loadData ? (
+          <LoaderCustom />
+        ) : _.isEmpty(listData) ? (
+          <TextCustom bold align="center">
+            Belum ada donatur
+          </TextCustom>
+        ) : (
+          listData?.map((item: any, index: number) => (
+            <BaseBox key={index}>
+              <Grid>
+                <Grid.Col
+                  span={3}
+                  style={{ alignItems: "center", justifyContent: "center" }}
+                >
+                  <FontAwesome6
+                    name="face-smile-wink"
+                    size={50}
+                    style={{ color: MainColor.yellow }}
+                  />
+                </Grid.Col>
+                <Grid.Col span={9}>
+                  <TextCustom bold size="large">
+                    {item?.Author?.username || "-"}
+                  </TextCustom>
+                  <Spacing/>
+                  <StackCustom gap={"xs"}>
+                    <TextCustom size={"small"}>Berdonas sebesar </TextCustom>
+                    <TextCustom bold size="large" color="yellow">
+                      Rp. {formatCurrencyDisplay(item?.nominal)}
+                    </TextCustom>
+                    <TextCustom>
+                      {dayjs(item?.createdAt).format("DD MMM YYYY, HH:mm")}
+                    </TextCustom>
+                  </StackCustom>
+                </Grid.Col>
+              </Grid>
+            </BaseBox>
+          ))
+        )}
+      </ViewWrapper>
+    </>
+  );
 }

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

@@ -1,6 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-  BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
   InformationBox,
@@ -9,8 +8,8 @@ import {
   StackCustom,
   TextAreaCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
-import OS_Wrapper from "@/components/_ShareComponent/OS_Wrapper";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { useAuth } from "@/hooks/use-auth";
 import {
@@ -104,7 +103,7 @@ export default function DonationCreateStory() {
         type: "success",
         text1: "Donasi berhasil disimpan",
       });
-      router.replace("/donation/status?status=review");
+      router.replace("/donation/status");
     } catch (error) {
       console.log("[ERROR]", error);
     } finally {
@@ -113,24 +112,7 @@ export default function DonationCreateStory() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-      footerComponent={
-        <>
-         <BoxButtonOnFooter>
-           <ButtonCustom
-            isLoading={isLoading}
-            onPress={() => {
-              handlerSubmit();
-            }}
-          >
-            Simpan
-          </ButtonCustom>
-         </BoxButtonOnFooter>
-        </>
-      }
-    >
+    <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Cerita Anda adalah kunci untuk menginspirasi kebaikan. Jelaskan dengan jujur dan jelas tujuan penggalangan dana ini agar calon donatur memahami dampak positif yang dapat mereka wujudkan melalui kontribusi mereka." />
         <TextAreaCustom
@@ -184,8 +166,18 @@ export default function DonationCreateStory() {
           value={data.rekening}
           onChangeText={(value) => setData({ ...data, rekening: value })}
         />
+
+        <Spacing />
+        <ButtonCustom
+          isLoading={isLoading}
+          onPress={() => {
+            handlerSubmit();
+          }}
+        >
+          Simpan
+        </ButtonCustom>
       </StackCustom>
       <Spacing />
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

@@ -1,15 +1,14 @@
 import {
-  BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
   InformationBox,
   LandscapeFrameUploaded,
   LoaderCustom,
-  OS_Wrapper,
   SelectCustom,
   Spacing,
   StackCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { apiDonationCreate } from "@/service/api-client/api-donation";
@@ -44,7 +43,7 @@ export default function DonationCreate() {
   useFocusEffect(
     useCallback(() => {
       onLoadList();
-    }, []),
+    }, [])
   );
 
   const onLoadList = async () => {
@@ -126,25 +125,7 @@ export default function DonationCreate() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-      footerComponent={
-        <>
-          <BoxButtonOnFooter>
-            <ButtonCustom
-              isLoading={isLoading}
-              onPress={() => {
-                handlerSubmit();
-                // router.push(`/donation/create-story?id=${"dasdsadsa"}`);
-              }}
-            >
-              Selanjutnya
-            </ButtonCustom>
-          </BoxButtonOnFooter>
-        </>
-      }
-    >
+    <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita penggalangan dana." />
 
@@ -220,8 +201,20 @@ export default function DonationCreate() {
             onChange={(value: any) => setData({ ...data, durasiId: value })}
           />
         )}
+
+        <Spacing />
+        <ButtonCustom
+          isLoading={isLoading}
+          onPress={() => {
+            handlerSubmit();
+            // router.push(`/donation/create-story?id=${"dasdsadsa"}`);
+          }}
+        >
+          Selanjutnya
+        </ButtonCustom>
+        <Spacing />
       </StackCustom>
       <Spacing />
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

@@ -4,87 +4,40 @@ import {
   IconHome,
   IconStatus,
 } from "@/components/_Icon";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
-import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
 import { TabsStyles } from "@/styles/tabs-styles";
-import { router, Tabs, useLocalSearchParams } from "expo-router";
-import { View } from "react-native";
-import { MainColor } from "@/constants/color-palet";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Platform } from "react-native";
-import { OS_ANDROID_HEIGHT, OS_IOS_HEIGHT } from "@/constants/constans-value";
-
-function EventTabsWrapper() {
-  const insets = useSafeAreaInsets();
-  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
-  const { from, category } = useLocalSearchParams<{
-    from?: string;
-    category?: string;
-  }>();
-
-  return (
-    <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
-      <Tabs
-        screenOptions={{
-          ...TabsStyles,
-          tabBarStyle: Platform.select({
-            ios: {
-              borderTopWidth: 0,
-              paddingTop: 12,
-              height: OS_IOS_HEIGHT,
-            },
-            android: {
-              borderTopWidth: 0,
-              paddingTop: 5,
-              height: OS_ANDROID_HEIGHT + paddingBottom,
-            },
-          }),
-          header: () => (
-            <AppHeader
-              title="Event"
-              left={
-                <BackButtonFromNotification
-                  from={from || ""}
-                  category={category}
-                />
-              }
-            />
-          ),
-        }}
-      >
-        <Tabs.Screen
-          name="index"
-          options={{
-            title: "Beranda",
-            tabBarIcon: ({ color }) => <IconHome color={color} />,
-          }}
-        />
-        <Tabs.Screen
-          name="status"
-          options={{
-            title: "Status",
-            tabBarIcon: ({ color }) => <IconStatus color={color} />,
-          }}
-        />
-        <Tabs.Screen
-          name="contribution"
-          options={{
-            title: "Kontribusi",
-            tabBarIcon: ({ color }) => <IconContribution color={color} />,
-          }}
-        />
-        <Tabs.Screen
-          name="history"
-          options={{
-            title: "Riwayat",
-            tabBarIcon: ({ color }) => <IconHistory color={color} />,
-          }}
-        />
-      </Tabs>
-    </View>
-  );
-}
+import { Tabs } from "expo-router";
 
 export default function EventTabsLayout() {
-  return <EventTabsWrapper />;
+  return (
+    <Tabs screenOptions={TabsStyles}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Beranda",
+          tabBarIcon: ({ color }) => <IconHome color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="status"
+        options={{
+          title: "Status",
+          tabBarIcon: ({ color }) => <IconStatus color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="contribution"
+        options={{
+          title: "Kontribusi",
+          tabBarIcon: ({ color }) => <IconContribution color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="history"
+        options={{
+          title: "Riwayat",
+          tabBarIcon: ({ color }) => <IconHistory color={color} />,
+        }}
+      />
+    </Tabs>
+  );
 }

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

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

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

@@ -1,10 +1,104 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import Event_ScreenHistory from "@/screens/Event/ScreenHistory";
+import { ButtonCustom, LoaderCustom, Spacing, TextCustom } from "@/components";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
+import Event_BoxPublishSection from "@/screens/Event/BoxPublishSection";
+import { apiEventGetAll } from "@/service/api-client/api-event";
+import { dateTimeView } from "@/utils/dateTimeView";
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import { View } from "react-native";
 
 export default function EventHistory() {
+  const [activeCategory, setActiveCategory] = useState<string | null>("all");
+  const { user } = useAuth();
+  const [listData, setListData] = useState<any>([]);
+  const [isLoadList, setIsLoadList] = useState(false);
+
+  useEffect(() => {
+    onLoadData({ userId: user?.id });
+  }, [user?.id, activeCategory]);
+
+  async function onLoadData({ userId }: { userId?: string }) {
+    try {
+      setIsLoadList(true);
+      const response = await apiEventGetAll({
+        category: activeCategory === "all" ? "all-history" : "my-history",
+        userId: userId,
+      });
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadList(false);
+    }
+  }
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item);
+    // tambahkan logika lain seperti filter dsb.
+  };
+
+  const headerComponent = (
+    <View
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        padding: 5,
+        backgroundColor: MainColor.soft_darkblue,
+        borderRadius: 50,
+        width: "100%",
+      }}
+    >
+      <ButtonCustom
+        backgroundColor={
+          activeCategory === "all" ? MainColor.yellow : AccentColor.blue
+        }
+        textColor={activeCategory === "all" ? MainColor.black : MainColor.white}
+        style={{ width: "49%" }}
+        onPress={() => handlePress("all")}
+      >
+        Semua Riwayat
+      </ButtonCustom>
+      <Spacing width={"2%"} />
+      <ButtonCustom
+        backgroundColor={
+          activeCategory === "main" ? MainColor.yellow : AccentColor.blue
+        }
+        textColor={
+          activeCategory === "main" ? MainColor.black : MainColor.white
+        }
+        style={{ width: "49%" }}
+        onPress={() => handlePress("main")}
+      >
+        Riwayat Saya
+      </ButtonCustom>
+    </View>
+  );
+
   return (
-    <>
-      <Event_ScreenHistory />
-    </>
+    <ViewWrapper headerComponent={headerComponent} hideFooter>
+      {isLoadList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Belum ada riwayat</TextCustom>
+      ) : (
+        listData.map((item: any, index: number) => (
+          <Event_BoxPublishSection
+            key={index.toString()}
+            data={item}
+            rightComponentAvatar={
+              <TextCustom>
+                {dateTimeView({ date: item?.tanggal, withoutTime: true })}
+              </TextCustom>
+            }
+            href={`/event/${item.id}/history`}
+          />
+        ))
+      )}
+    </ViewWrapper>
   );
 }

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

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

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

@@ -1,10 +1,99 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import Event_ScreenStatus from "@/screens/Event/ScreenStatus";
+import {
+  BoxWithHeaderSection,
+  Grid,
+  LoaderCustom,
+  ScrollableCustom,
+  StackCustom,
+  TextCustom,
+} from "@/components";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { useAuth } from "@/hooks/use-auth";
+import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
+import { apiEventGetByStatus } from "@/service/api-client/api-event";
+import { useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function EventStatus() {
+  const { user } = useAuth();
+  const id = user?.id || "";
+  const [activeCategory, setActiveCategory] = useState<string | null>(
+    "publish"
+  );
+  const [listData, setListData] = useState([]);
+  const [loadingGetData, setLoadingGetData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [activeCategory, id])
+  );
+
+  async function onLoadData() {
+    try {
+      setLoadingGetData(true);
+      const response = await apiEventGetByStatus({
+        id: id!,
+        status: activeCategory!,
+      });
+      // console.log("Response", JSON.stringify(response.data, null, 2));
+      setListData(response.data);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setLoadingGetData(false);
+    }
+  }
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+    // tambahkan logika lain seperti filter dsb.
+  };
+
+  const tabsComponent = (
+    <ScrollableCustom
+      data={dummyMasterStatus.map((e, i) => ({
+        id: i,
+        label: e.label,
+        value: e.value,
+      }))}
+      onButtonPress={handlePress}
+      activeId={activeCategory as any}
+    />
+  );
+
   return (
-    <>
-      <Event_ScreenStatus />
-    </>
+    <ViewWrapper headerComponent={tabsComponent}>
+      {loadingGetData ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Tidak ada data {activeCategory}</TextCustom>
+      ) : (
+        listData.map((item: any, i) => (
+          <BoxWithHeaderSection
+            key={i}
+            href={`/event/${item.id }/${activeCategory}/detail-event`}
+          >
+            <StackCustom gap={"xs"}>
+              <Grid>
+                <Grid.Col span={8}>
+                  <TextCustom truncate bold>
+                    {item?.title}
+                  </TextCustom>
+                </Grid.Col>
+                <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+                  <TextCustom>
+                    {new Date(item?.tanggal).toLocaleDateString()}
+                  </TextCustom>
+                </Grid.Col>
+              </Grid>
+
+              <TextCustom truncate={2}>{item?.deskripsi}</TextCustom>
+            </StackCustom>
+          </BoxWithHeaderSection>
+        ))
+      )}
+    </ViewWrapper>
   );
 }

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

@@ -5,12 +5,11 @@ import {
   DrawerCustom,
   Grid,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import Event_ButtonStatusSection from "@/screens/Event/ButtonStatusSection";
@@ -82,20 +81,15 @@ export default function EventDetailStatus() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title={`Detail ${status === "publish" ? "" : status}`}
-              left={<LeftButtonCustom />}
-              right={
-                status === "draft" ? (
-                  <DotButton onPress={() => setOpenDrawer(true)} />
-                ) : null
-              }
-            />
-          ),
+          title: `Detail ${status === "publish" ? "" : status}`,
+          headerLeft: () => <LeftButtonCustom />,
+          headerRight: () =>
+            status === "draft" ? (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ) : null,
         }}
       />
-      <OS_Wrapper>
+      <ViewWrapper>
         <BaseBox>
           <StackCustom>
             <TextCustom bold align="center" size="xlarge">
@@ -118,7 +112,7 @@ export default function EventDetailStatus() {
           status={status as string}
         />
         <Spacing />
-      </OS_Wrapper>
+      </ViewWrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

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

@@ -5,12 +5,11 @@ import {
   ButtonCustom,
   CenterCustom,
   LoaderCustom,
-  OS_Wrapper,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
-import { MainColor } from "@/constants/color-palet";
+import { AccentColor, MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
 import {
   apiEventConfirmationAction,
@@ -61,7 +60,7 @@ export default function UserEventConfirmation() {
   useFocusEffect(
     useCallback(() => {
       checkTokenAndDataParticipants() || console.log("Token is null");
-    }, [token, id, user?.id]),
+    }, [token, id, user?.id])
   );
 
   const checkTokenAndDataParticipants = async () => {
@@ -114,7 +113,7 @@ export default function UserEventConfirmation() {
       confirmationStart,
       confirmationEnd,
       null,
-      "[]",
+      "[]"
     );
 
     // --- [4] Status waktu event (untuk pesan UI) ---
@@ -219,14 +218,9 @@ export default function UserEventConfirmation() {
         if (isWithinConfirmationWindow) {
           if (konfirmasi === false) {
             return (
-              // <TamplateBox data={data}>
-              //   <TamplateText text="Konfirmasi Kehadiran" />
-              // </TamplateBox>
-              <UserParticipan_And_DuringEvent
-                id={data.id}
-                userId={user?.id as string}
-                data={data}
-              />
+              <TamplateBox data={data}>
+                <TamplateText text="Konfirmasi Kehadiran" />
+              </TamplateBox>
             );
           }
           return (
@@ -266,22 +260,20 @@ export default function UserEventConfirmation() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Konfirmasi Event"
-              left={
-                <Ionicons
-                  name="arrow-back"
-                  size={20}
-                  color={MainColor.yellow}
-                  onPress={() => router.navigate("/")}
-                />
-              }
-            />
-          ),
-        }}
+          title: "Konfirmasi Event",
+          // headerLeft: () => (
+          //   <Ionicons
+          //     name="arrow-back"
+          //     size={20}
+          //     color={MainColor.yellow}
+          //     onPress={() =>
+          //       router.navigate("/(application)/(user)/event/create")
+          //     }
+          //   />
+          // ),
+        }} 
       />
-      <OS_Wrapper>{handlerReturn()}</OS_Wrapper>
+      <ViewWrapper>{handlerReturn()}</ViewWrapper>
     </>
   );
 }
@@ -505,6 +497,7 @@ const UserNotParticipan_And_DuringEvent = ({
   );
 };
 
+
 // 🟡 ZONA ACARA BERLANGSUN
 // User sudah terdaftar & Event sedang berlangsung & user harus konfirmasi
 const UserParticipan_And_DuringEvent = ({

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

@@ -4,10 +4,9 @@ import {
   DrawerCustom,
   LoaderCustom,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
   Spacing,
+  ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import Event_BoxDetailPublishSection from "@/screens/Event/BoxDetailPublishSection";
@@ -50,23 +49,19 @@ export default function EventDetailContribution() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Detail kontribusi"
-              left={<LeftButtonCustom />}
-              right={<DotButton onPress={() => setOpenDrawer(true)} />}
-            />
-          ),
+          title: `Detail kontribusi`,
+          headerLeft: () => <LeftButtonCustom />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
         }}
       />
-      <OS_Wrapper>
+      <ViewWrapper>
         {isLoadData ? (
           <LoaderCustom />
         ) : (
           <Event_BoxDetailPublishSection data={data} />
         )}
         <Spacing />
-      </OS_Wrapper>
+      </ViewWrapper>
       <DrawerCustom
         isVisible={openDrawer}
         closeDrawer={() => setOpenDrawer(false)}

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

@@ -1,17 +1,15 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-  BoxButtonOnFooter,
   ButtonCustom,
   LoaderCustom,
-  OS_Wrapper,
   SelectCustom,
   Spacing,
   StackCustom,
   TextAreaCustom,
   TextCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
-import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
 import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
 import {
   apiEventGetOne,
@@ -50,14 +48,14 @@ export default function EventEdit() {
   useFocusEffect(
     useCallback(() => {
       onLoadData();
-    }, [id]),
+    }, [id])
   );
 
   async function onLoadData() {
     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));
@@ -102,15 +100,6 @@ export default function EventEdit() {
     const startDate = new Date(selectedDate as any);
     const endDate = new Date(selectedEndDate as any);
 
-    if (!startDate) {
-      Toast.show({
-        type: "info",
-        text1: "Info",
-        text2: "Tanggal mulai tidak valid",
-      });
-      return false;
-    }
-
     if (startDate >= endDate) {
       Toast.show({
         type: "info",
@@ -157,7 +146,7 @@ export default function EventEdit() {
 
   const validateDateRange = (
     selectedDate: string | Date,
-    selectedEndDate: string | Date,
+    selectedEndDate: string | Date
   ): { isValid: boolean; error?: string } => {
     const startDate = new Date(selectedDate);
     const endDate = new Date(selectedEndDate);
@@ -185,21 +174,9 @@ export default function EventEdit() {
 
   return (
     <>
-      <OS_Wrapper
-        enableKeyboardHandling
-        contentPaddingBottom={250}
-        footerComponent={
-          <BoxButtonOnFooter>
-            <ButtonCustom
-              isLoading={isLoading}
-              title="Update"
-              onPress={handlerSubmit}
-            />
-          </BoxButtonOnFooter>
-        }
-      >
+      <ViewWrapper>
         {isLoadData ? (
-          <ListSkeletonComponent />
+          <LoaderCustom />
         ) : (
           <StackCustom gap={"xs"}>
             <TextInputCustom
@@ -209,15 +186,26 @@ export default function EventEdit() {
               value={data?.title}
               onChangeText={(value) => setData({ ...data, title: value })}
             />
-            <TextAreaCustom
-              label="Deskripsi"
-              placeholder="Masukkan deskripsi event"
-              required
-              showCount
-              value={data?.deskripsi}
-              onChangeText={(value) => setData({ ...data, deskripsi: value })}
+            <SelectCustom
+              label="Tipe Event"
+              placeholder="Pilih tipe event"
+              data={listTypeEvent.map((item: any) => ({
+                label: item.name,
+                value: item.id,
+              }))}
+              value={data?.eventMaster_TipeAcaraId || ""}
+              onChange={(value) => {
+                console.log(value);
+                setData({ ...data, eventMaster_TipeAcaraId: value });
+              }}
+            />
+            <TextInputCustom
+              label="Lokasi"
+              placeholder="Masukkan lokasi event"
+              required
+              value={data?.lokasi}
+              onChangeText={(value) => setData({ ...data, lokasi: value })}
             />
-
             <DateTimePickerCustom
               minimumDate={new Date(Date.now())}
               label="Tanggal & Waktu Mulai"
@@ -245,7 +233,7 @@ export default function EventEdit() {
                   {
                     validateDateRange(
                       selectedDate as any,
-                      selectedEndDate as any,
+                      selectedEndDate as any
                     ).error
                   }
                 </TextCustom>
@@ -254,37 +242,31 @@ export default function EventEdit() {
                   {
                     validateDateRange(
                       selectedDate as any,
-                      selectedEndDate as any,
+                      selectedEndDate as any
                     ).error
                   }
                 </TextCustom>
               )}
-              {/* <Spacing /> */}
+              <Spacing />
             </StackCustom>
 
-            <SelectCustom
-              label="Tipe Event"
-              placeholder="Pilih tipe event"
-              data={listTypeEvent.map((item: any) => ({
-                label: item.name,
-                value: item.id,
-              }))}
-              value={data?.eventMaster_TipeAcaraId || ""}
-              onChange={(value) => {
-                console.log(value);
-                setData({ ...data, eventMaster_TipeAcaraId: value });
-              }}
-            />
-            <TextInputCustom
-              label="Lokasi"
-              placeholder="Masukkan lokasi event"
+            <TextAreaCustom
+              label="Deskripsi"
+              placeholder="Masukkan deskripsi event"
               required
-              value={data?.lokasi}
-              onChangeText={(value) => setData({ ...data, lokasi: value })}
+              showCount
+              value={data?.deskripsi}
+              onChangeText={(value) => setData({ ...data, deskripsi: value })}
+            />
+
+            <ButtonCustom
+              isLoading={isLoading}
+              title="Update"
+              onPress={handlerSubmit}
             />
           </StackCustom>
         )}
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

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

@@ -3,10 +3,9 @@ import {
   DotButton,
   DrawerCustom,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
+  ViewWrapper,
   Spacing,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import Event_BoxDetailPublishSection from "@/screens/Event/BoxDetailPublishSection";
@@ -45,23 +44,19 @@ export default function EventDetailHistory() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Detail riwayat"
-              left={<LeftButtonCustom />}
-              right={<DotButton onPress={() => setOpenDrawer(true)} />}
-            />
-          ),
+          title: `Detail riwayat`,
+          headerLeft: () => <LeftButtonCustom />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
         }}
       />
-      <OS_Wrapper>
+      <ViewWrapper>
         <Event_BoxDetailPublishSection data={data} />
         <Spacing />
-      </OS_Wrapper>
+      </ViewWrapper>
       <DrawerCustom
         isVisible={openDrawer}
         closeDrawer={() => setOpenDrawer(false)}
-        height={"auto"}
+        height={250}
       >
         <MenuDrawerDynamicGrid
           data={menuDrawerPublishEvent({ id: id as string })}

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

@@ -1,10 +1,110 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import Event_ScreenListOfParticipants from "@/screens/Event/ScreenListOfParticipants";
+import {
+  AvatarUsernameAndOtherComponent,
+  BadgeCustom,
+  BaseBox,
+  LoaderCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import {
+  apiEventGetOne,
+  apiEventListOfParticipants,
+} from "@/service/api-client/api-event";
+import dayjs, { Dayjs } from "dayjs";
+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<Dayjs | undefined>();
+  const [listData, setListData] = useState<any[] | null>(null);
+  const [loadtData, setLoadData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      handlerLoadData();
+    }, [id])
+  );
+
+  const handlerLoadData = () => {
+    try {
+      onLoadData();
+      onLoadList();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiEventGetOne({ id: id as string });
+      if (response.success) {
+        const date = dayjs(response.data.tanggal);
+        setStartDate(date);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  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 (
-    <>
-      <Event_ScreenListOfParticipants />
-    </>
+    <ViewWrapper>
+      {loadtData && !listData ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center" color="gray">
+          Belum ada peserta
+        </TextCustom>
+      ) : (
+        listData?.map((item: any, index: number) => (
+          <BaseBox key={index}>
+            <AvatarUsernameAndOtherComponent
+              avatar={item?.User?.Profile?.imageId}
+              name={item?.User?.username}
+              avatarHref={`/profile/${item?.User?.Profile?.id}`}
+              rightComponent={
+                startDate && startDate.subtract(1, "hour").diff(dayjs()) < 0 ? (
+                  <View
+                    style={{
+                      justifyContent: "flex-end",
+                    }}
+                  >
+                    <BadgeCustom color={item?.isPresent ? "green" : "red"}>
+                      {item?.isPresent ? "Hadir" : "Tidak Hadir"}
+                    </BadgeCustom>
+                  </View>
+                ) : (
+                  <View
+                    style={{
+                      justifyContent: "flex-end",
+                    }}
+                  >
+                    <BadgeCustom color="gray">-</BadgeCustom>
+                  </View>
+                )
+              }
+            />
+          </BaseBox>
+        ))
+      )}
+    </ViewWrapper>
   );
 }

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

@@ -1,16 +1,14 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
   AlertDefaultSystem,
-  BackButton,
   ButtonCustom,
   DotButton,
   DrawerCustom,
+  LoaderCustom,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
+  ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
-import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import { useAuth } from "@/hooks/use-auth";
 import Event_BoxDetailPublishSection from "@/screens/Event/BoxDetailPublishSection";
@@ -20,26 +18,23 @@ import {
   apiEventGetOne,
   apiEventJoin,
 } from "@/service/api-client/api-event";
-import dayjs from "dayjs";
 import {
-  Redirect,
   router,
   Stack,
   useFocusEffect,
   useLocalSearchParams,
 } from "expo-router";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 import Toast from "react-native-toast-message";
 
 export default function EventDetailPublish() {
-  const now = new Date().toISOString();
-  const { user } = useAuth();
   const { id } = useLocalSearchParams();
+  const { user } = useAuth();
   const [openDrawer, setOpenDrawer] = useState(false);
   const [isLoadingData, setIsLoadingData] = useState(false);
   const [isLoadingJoin, setIsLoadingJoin] = useState(false);
 
-  const [data, setData] = useState<any>();
+  const [data, setData] = useState();
   const [isParticipant, setIsParticipant] = useState<boolean | null>(null);
 
   useFocusEffect(
@@ -60,6 +55,8 @@ export default function EventDetailPublish() {
           userId: user?.id as string,
         });
 
+        console.log("[RES CHECK PARTICIPANTS]", responseCheckParticipants);
+
         if (
           responseCheckParticipants.success &&
           responseCheckParticipants.data
@@ -111,24 +108,7 @@ export default function EventDetailPublish() {
     }
   };
 
-  const isEventFinished =
-    id && data?.tanggalSelesai && dayjs(data.tanggalSelesai).isBefore(now);
-
-  useEffect(() => {
-    if (isEventFinished) {
-      router.replace(`/(application)/(user)/event/${id}/history`);
-    }
-  }, [isEventFinished, id]);
-
-  if (isEventFinished) {
-    return (
-      <OS_Wrapper>
-        <CustomSkeleton />
-      </OS_Wrapper>
-    );
-  }
-
-  const FooterButton = () => {
+  const footerButton = () => {
     return (
       <>
         <ButtonCustom
@@ -157,25 +137,21 @@ export default function EventDetailPublish() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Event Publish"
-              left={<BackButton onPress={() => router.back()} />}
-              right={<DotButton onPress={() => setOpenDrawer(true)} />}
-            />
-          ),
+          title: `Event Publish`,
+          headerLeft: () => <LeftButtonCustom />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
         }}
       />
-      <OS_Wrapper>
+      <ViewWrapper>
         {isLoadingData ? (
-          <CustomSkeleton height={400} />
+          <LoaderCustom />
         ) : (
           <Event_BoxDetailPublishSection
             data={data}
-            footerButton={FooterButton()}
+            footerButton={footerButton()}
           />
         )}
-      </OS_Wrapper>
+      </ViewWrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

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

@@ -1,13 +1,12 @@
 import {
-  BoxButtonOnFooter,
   ButtonCustom,
-  OS_Wrapper,
   SelectCustom,
   Spacing,
   StackCustom,
   TextAreaCustom,
   TextCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
 import { useAuth } from "@/hooks/use-auth";
@@ -15,7 +14,7 @@ import { apiEventCreate } from "@/service/api-client/api-event";
 import { apiMasterEventType } from "@/service/api-client/api-master";
 import { DateTimePickerEvent } from "@react-native-community/datetimepicker";
 import { router } from "expo-router";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import Toast from "react-native-toast-message";
 
 interface EventCreateProps {
@@ -79,6 +78,23 @@ export default function EventCreate() {
       return;
     }
 
+    // if (selectedDate) {
+    //   console.log("Tanggal yang dipilih:", selectedDate);
+    //   console.log(`ISO Format ${Platform.OS}:`, selectedDate.toString());
+
+    //   // Kirim ke API atau proses lanjutan
+    // } else {
+    //   console.log("Tanggal belum dipilih");
+    // }
+
+    // if (selectedEndDate) {
+    //   console.log("Tanggal yang dipilih:", selectedEndDate);
+    //   console.log(`ISO Format ${Platform.OS}:`, selectedEndDate.toString());
+    //   // Kirim ke API atau proses lanjutan
+    // } else {
+    //   console.log("Tanggal berakhir belum dipilih");
+    // }
+
     try {
       setIsLoading(true);
 
@@ -94,13 +110,14 @@ export default function EventCreate() {
       const response = await apiEventCreate(newData);
       console.log("Response", JSON.stringify(response, null, 2));
 
-      router.replace("/event/status?status=review");
+      router.replace("/event/status");
     } catch (error) {
       console.log(error);
     } finally {
       setIsLoading(false);
     }
   };
+  
 
   const buttonSubmit = (
     <ButtonCustom
@@ -112,11 +129,7 @@ export default function EventCreate() {
 
   return (
     <>
-      <OS_Wrapper
-        enableKeyboardHandling
-        contentPaddingBottom={250}
-        footerComponent={<BoxButtonOnFooter>{buttonSubmit}</BoxButtonOnFooter>}
-      >
+      <ViewWrapper>
         <StackCustom gap={"xs"}>
           <TextInputCustom
             placeholder="Masukkan nama event"
@@ -125,17 +138,26 @@ export default function EventCreate() {
             onChangeText={(value: any) => setData({ ...data, title: value })}
           />
 
-          <TextAreaCustom
-            label="Deskripsi"
-            placeholder="Masukkan deskripsi event"
-            required
-            showCount
-            value={data?.deskripsi || ""}
-            onChangeText={(value: any) =>
-              setData({ ...data, deskripsi: value })
+          <SelectCustom
+            label="Tipe Event"
+            placeholder="Pilih tipe event"
+            data={listTypeEvent.map((item: any) => ({
+              label: item.name,
+              value: item.id,
+            }))}
+            value={data?.eventMaster_TipeAcaraId || null}
+            onChange={(value: any) =>
+              setData({ ...data, eventMaster_TipeAcaraId: value })
             }
           />
 
+          <TextInputCustom
+            label="Lokasi"
+            placeholder="Masukkan lokasi event"
+            required
+            onChangeText={(value: any) => setData({ ...data, lokasi: value })}
+          />
+
           <DateTimePickerCustom
             label="Tanggal & Waktu Mulai"
             required
@@ -163,28 +185,22 @@ export default function EventCreate() {
               </TextCustom>
             )}
             <Spacing />
-            <SelectCustom
-              label="Tipe Event"
-              placeholder="Pilih tipe event"
-              data={listTypeEvent.map((item: any) => ({
-                label: item.name,
-                value: item.id,
-              }))}
-              value={data?.eventMaster_TipeAcaraId || null}
-              onChange={(value: any) =>
-                setData({ ...data, eventMaster_TipeAcaraId: value })
-              }
-            />
-
-            <TextInputCustom
-              label="Lokasi"
-              placeholder="Masukkan lokasi event"
-              required
-              onChangeText={(value: any) => setData({ ...data, lokasi: value })}
-            />
           </StackCustom>
+
+          <TextAreaCustom
+            label="Deskripsi"
+            placeholder="Masukkan deskripsi event"
+            required
+            showCount
+            value={data?.deskripsi || ""}
+            onChangeText={(value: any) =>
+              setData({ ...data, deskripsi: value })
+            }
+          />
+
+          {buttonSubmit}
         </StackCustom>
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

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

@@ -1,4 +1,4 @@
-import { OS_Wrapper } from "@/components";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { GStyles } from "@/styles/global-styles";
 import { useLocalSearchParams } from "expo-router";
 import { Text } from "react-native";
@@ -7,8 +7,8 @@ export default function DetailEvent() {
   const { id } = useLocalSearchParams();
   console.log("id event >", id);
   return (
-    <OS_Wrapper>
+    <ViewWrapper>
       <Text style={GStyles.textLabel}>Detail Event {id}</Text>
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

@@ -2,8 +2,8 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   LoaderCustom,
-  OS_Wrapper,
   TextAreaCustom,
+  ViewWrapper,
 } from "@/components";
 import AlertWarning from "@/components/Alert/AlertWarning";
 import { apiForumGetOne, apiForumUpdate } from "@/service/api-client/api-forum";
@@ -88,11 +88,7 @@ export default function ForumEdit() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-      footerComponent={buttonFooter()}
-    >
+    <ViewWrapper footerComponent={buttonFooter()}>
       {!loadingGetData ? (
         <TextAreaCustom
           placeholder="Ketik diskusi anda..."
@@ -106,6 +102,6 @@ export default function ForumEdit() {
       ) : (
         <LoaderCustom />
       )}
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

@@ -1,11 +1,271 @@
-import DetailForum from "@/screens/Forum/DetailForum";
-import DetailForum2 from "@/screens/Forum/DetailForum2";
+import {
+  ButtonCustom,
+  DrawerCustom,
+  LoaderCustom,
+  Spacing,
+  TextAreaCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+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 Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
+import Forum_MenuDrawerCommentar from "@/screens/Forum/MenuDrawerSection.tsx/MenuCommentar";
+import {
+  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();
+  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 [text, setText] = useState("");
+  const [authorId, setAuthorId] = useState("");
+  const [dataId, setDataId] = useState("");
+
+  // Comentar
+  const [openDrawerCommentar, setOpenDrawerCommentar] = useState(false);
+  const [commentId, setCommentId] = useState("");
+  const [commentAuthorId, setCommentAuthorId] = useState("");
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData(id as string);
+    }, [id])
+  );
+
+  const onLoadData = async (id: string) => {
+    try {
+      const response = await apiForumGetOne({ id });
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  useEffect(() => {
+    onLoadListComment(id as string);
+  }, [id]);
+
+  const onLoadListComment = async (id: string) => {
+    try {
+      const response = await apiForumGetComment({
+        id: id as string,
+      });
+      setListComment(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  // Update Status
+  const handlerUpdateStatus = async (value: any) => {
+    try {
+      const response = await apiForumUpdateStatus({
+        id: id as string,
+        data: value,
+      });
+      if (response.success) {
+        setStatus(response.data);
+        setData({
+          ...data,
+          ForumMaster_StatusPosting: {
+            status: response.data,
+          },
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  // Create Commentar
+  const handlerCreateCommentar = async () => {
+    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 (
     <>
-     {/* <DetailForum />; */}
-     <DetailForum2 />
+      <ViewWrapper>
+        {!data && !listComment ? (
+          <LoaderCustom />
+        ) : (
+          <>
+            {/* Box Posting */}
+            <Forum_BoxDetailSection
+              data={data}
+              onSetData={() => {
+                setOpenDrawer(true);
+                setStatus(data.ForumMaster_StatusPosting?.status);
+                setAuthorId(data.Author?.id);
+                setDataId(data.id);
+              }}
+            />
+
+            {/* Area Commentar */}
+            {data?.ForumMaster_StatusPosting?.status === "Open" && (
+              <>
+                <TextAreaCustom
+                  placeholder="Ketik diskusi anda..."
+                  maxLength={1000}
+                  showCount
+                  value={text}
+                  onChangeText={setText}
+                  style={{
+                    marginBottom: 0,
+                  }}
+                />
+                <ButtonCustom
+                  isLoading={isLoadingComment}
+                  style={{
+                    alignSelf: "flex-end",
+                  }}
+                  onPress={() => {
+                    handlerCreateCommentar();
+                  }}
+                >
+                  Balas
+                </ButtonCustom>
+              </>
+            )}
+            <Spacing height={40} />
+
+            {/* List Commentar */}
+            {_.isEmpty(listComment) ? (
+              <TextCustom align="center" color="gray" size={"small"}>
+                Tidak ada komentar
+              </TextCustom>
+            ) : (
+              <TextCustom color="gray">Komentar :</TextCustom>
+            )}
+            <Spacing height={5} />
+            {listComment?.map((item: any, index: number) => (
+              <Forum_CommentarBoxSection
+                key={index}
+                data={item}
+                onSetData={(value) => {
+                  setCommentId(value.setCommentId);
+                  setOpenDrawerCommentar(value.setOpenDrawer);
+                  setCommentAuthorId(value.setCommentAuthorId);
+                }}
+              />
+            ))}
+          </>
+        )}
+      </ViewWrapper>
+
+      {/* Posting Drawer */}
+      <DrawerCustom
+        height={"auto"}
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+      >
+        <Forum_MenuDrawerBerandaSection
+          id={dataId}
+          authorUsername={data?.Author?.username as string}
+          status={status}
+          setIsDrawerOpen={() => {
+            setOpenDrawer(false);
+          }}
+          authorId={authorId}
+          handlerUpdateStatus={(value: any) => {
+            handlerUpdateStatus(value);
+          }}
+        />
+      </DrawerCustom>
+
+      {/* Commentar Drawer */}
+      <DrawerCustom
+        height={"auto"}
+        isVisible={openDrawerCommentar}
+        closeDrawer={() => setOpenDrawerCommentar(false)}
+      >
+        <Forum_MenuDrawerCommentar
+          id={commentId as string}
+          commentId={commentId}
+          commentAuthorId={commentAuthorId}
+          setIsDrawerOpen={() => {
+            setOpenDrawerCommentar(false);
+          }}
+          listComment={listComment}
+          setListComment={setListComment}
+          countComment={data?.count}
+          setCountComment={(val: any) => {
+            setData((prev: any) => ({
+              ...prev,
+              count: val,
+            }));
+          }}
+        />
+      </DrawerCustom>
     </>
-  )
+  );
 }

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

@@ -1,12 +1,12 @@
 import {
   BoxButtonOnFooter,
   ButtonCustom,
-  OS_Wrapper,
   TextAreaCustom,
+  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
-import { apiForumCreateReportCommentar } from "@/service/api-client/api-forum";
+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";
@@ -62,17 +62,13 @@ export default function ForumOtherReportCommentar() {
 
   return (
     <>
-      <OS_Wrapper
-        enableKeyboardHandling
-        contentPaddingBottom={250}
-        footerComponent={handleSubmit}
-      >
+      <ViewWrapper footerComponent={handleSubmit}>
         <TextAreaCustom
           placeholder="Laporkan Komentar"
           value={value}
           onChangeText={setValue}
         />
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

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

@@ -1,12 +1,12 @@
 import {
   BoxButtonOnFooter,
   ButtonCustom,
-  OS_Wrapper,
   TextAreaCustom,
+  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
-import { apiForumCreateReportPosting } from "@/service/api-client/api-forum";
+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";
@@ -61,17 +61,13 @@ export default function ForumOtherReportPosting() {
   );
   return (
     <>
-      <OS_Wrapper
-        enableKeyboardHandling
-        contentPaddingBottom={250}
-        footerComponent={handleSubmit}
-      >
+      <ViewWrapper footerComponent={handleSubmit}>
         <TextAreaCustom
           placeholder="Laporkan Diskusi"
           value={value}
           onChangeText={setValue}
         />
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

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

@@ -1,91 +0,0 @@
-import {
-  BaseBox,
-  OS_Wrapper,
-  Spacing,
-  StackCustom,
-  TextCustom,
-} from "@/components";
-import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
-import NoDataText from "@/components/_ShareComponent/NoDataText";
-import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
-import { apiForumGetReportComment } from "@/service/api-client/api-forum";
-import { useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-
-export default function ForumPreviewReportComment() {
-  const { id } = useLocalSearchParams();
-  const [data, setData] = useState<any | null>(null);
-  const [listData, setListData] = useState<any | null>(null);
-  const [loading, setLoading] = useState<boolean>(false);
-  // Status
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData(id as string);
-    }, [id])
-  );
-
-  const onLoadData = async (id: string) => {
-    try {
-      setLoading(true);
-      const response = await apiForumGetReportComment({ id });
-      setData(response.data);
-      setListData(response?.data?.Forum_ReportKomentar);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <>
-      <OS_Wrapper>
-        <StackCustom>
-          <TextCustom color="red" bold>
-            Komentar anda telah melanggar aturan forum ! Admin mengambil
-            tindakan untuk menghapus komentar anda!
-          </TextCustom>
-          {loading ? (
-            <CustomSkeleton height={100} />
-          ) : (
-            <BaseBox>
-              <TextCustom>"{data?.komentar ? data?.komentar : "-"}"</TextCustom>
-            </BaseBox>
-          )}
-        </StackCustom>
-
-        <Spacing height={10} />
-        <TextCustom bold>Beberapa laporan yang telah diterima</TextCustom>
-        <Spacing height={10} />
-
-        {loading ? (
-          <ListSkeletonComponent />
-        ) : _.isEmpty(listData) ? (
-          <NoDataText />
-        ) : (
-          listData?.map((e: any, index: number) => (
-             <BaseBox key={index}>
-                {e?.deskripsi ? (
-                  <StackCustom gap={"sm"}>
-                    <TextCustom bold>Laporan Lainnya</TextCustom>
-                    <TextCustom>{e?.deskripsi}</TextCustom>
-                  </StackCustom>
-                ) : (
-                  <StackCustom gap={"sm"}>
-                    <TextCustom bold>
-                      {e?.ForumMaster_KategoriReport?.title}
-                    </TextCustom>
-                    <TextCustom>
-                      {e?.ForumMaster_KategoriReport?.deskripsi}
-                    </TextCustom>
-                  </StackCustom>
-                )}
-              </BaseBox>
-          ))
-        )}
-      </OS_Wrapper>
-    </>
-  );
-}

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

@@ -1,91 +0,0 @@
-import {
-  BaseBox,
-  OS_Wrapper,
-  Spacing,
-  StackCustom,
-  TextCustom,
-} from "@/components";
-import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
-import NoDataText from "@/components/_ShareComponent/NoDataText";
-import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
-import { apiForumGetReportPosting } from "@/service/api-client/api-forum";
-import { useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-
-export default function ForumPreviewReportPosting() {
-  const { id } = useLocalSearchParams();
-  const [data, setData] = useState<any | null>(null);
-  const [listData, setListData] = useState<any | null>(null);
-  const [loading, setLoading] = useState<boolean>(false);
-  // Status
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData(id as string);
-    }, [id])
-  );
-
-  const onLoadData = async (id: string) => {
-    try {
-      setLoading(true);
-      const response = await apiForumGetReportPosting({ id });
-      setData(response.data);
-      setListData(response?.data?.Forum_ReportPosting);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <>
-      <OS_Wrapper>
-        <StackCustom>
-          <TextCustom color="red" bold>
-            Postingan anda telah melanggar aturan forum ! Admin mengambil
-            tindakan untuk menghapus komentar anda!
-          </TextCustom>
-          {loading ? (
-            <CustomSkeleton height={100} />
-          ) : (
-            <BaseBox>
-              <TextCustom>"{data?.diskusi ? data?.diskusi : "-"}"</TextCustom>
-            </BaseBox>
-          )}
-        </StackCustom>
-
-        <Spacing height={10} />
-        <TextCustom bold>Beberapa laporan yang telah diterima</TextCustom>
-        <Spacing height={10} />
-
-        {loading ? (
-          <ListSkeletonComponent />
-        ) : _.isEmpty(listData) ? (
-          <NoDataText />
-        ) : (
-          listData?.map((e: any) => (
-            <BaseBox key={e?.id}>
-              {e?.deskripsi ? (
-                <StackCustom gap={"sm"}>
-                  <TextCustom bold>Laporan Lainnya</TextCustom>
-                  <TextCustom>{e?.deskripsi}</TextCustom>
-                </StackCustom>
-              ) : (
-                <StackCustom gap={"sm"}>
-                  <TextCustom bold>
-                    {e?.ForumMaster_KategoriReport?.title}
-                  </TextCustom>
-                  <TextCustom>
-                    {e?.ForumMaster_KategoriReport?.deskripsi}
-                  </TextCustom>
-                </StackCustom>
-              )}
-            </BaseBox>
-          ))
-        )}
-      </OS_Wrapper>
-    </>
-  );
-}

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

@@ -1,15 +1,14 @@
 import {
   ButtonCustom,
   LoaderCustom,
-  OS_Wrapper,
   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 { apiForumCreateReportCommentar } from "@/service/api-client/api-forum";
-import { apiMasterForumReportList } from "@/service/api-client/api-master";
+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";
@@ -69,7 +68,7 @@ export default function ForumReportCommentar() {
 
   return (
     <>
-      <OS_Wrapper>
+      <ViewWrapper>
         {isLoadingList ? (
           <LoaderCustom />
         ) : (
@@ -101,7 +100,7 @@ export default function ForumReportCommentar() {
             <Spacing />
           </StackCustom>
         )}
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

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

@@ -2,15 +2,15 @@ import {
   AlertDefaultSystem,
   ButtonCustom,
   LoaderCustom,
-  OS_Wrapper,
   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 { apiForumCreateReportPosting } from "@/service/api-client/api-forum";
 import {
+  apiForumCreateReportPosting,
   apiMasterForumReportList,
 } from "@/service/api-client/api-master";
 import { router, useLocalSearchParams } from "expo-router";
@@ -73,7 +73,7 @@ export default function ForumReportPosting() {
 
   return (
     <>
-      <OS_Wrapper>
+      <ViewWrapper>
         {isLoadingList ? (
           <LoaderCustom />
         ) : (
@@ -114,7 +114,7 @@ export default function ForumReportPosting() {
             <Spacing />
           </StackCustom>
         )}
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

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

@@ -1,15 +1,16 @@
 import {
   BoxButtonOnFooter,
   ButtonCustom,
-  OS_Wrapper,
   TextAreaCustom,
+  ViewWrapper
 } from "@/components";
 import AlertWarning from "@/components/Alert/AlertWarning";
 import { useAuth } from "@/hooks/use-auth";
 import { apiForumCreate } from "@/service/api-client/api-forum";
-import { censorText, isBadContent } from "@/utils/badWordsIndonesia";
+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() {
@@ -18,22 +19,16 @@ export default function ForumCreate() {
   const [isLoading, setIsLoading] = useState(false);
 
   const handlerSubmit = async () => {
-    if (text.trim() === "") {
-      AlertWarning({
-        title: "Lengkapi Data",
-        description: "Postingan tidak boleh kosong",
-      });
+    
+    if (isBadContent(text)) {
+      AlertWarning({})
       return;
     }
-
-    // Bisa di sensor atau return dan tidak bisa di post
-    const cencorContent = censorText(text)
-
+    
     const newData = {
-      diskusi: cencorContent,
+      diskusi: text,
       authorId: user?.id,
     };
-
     try {
       setIsLoading(true);
       const response = await apiForumCreate({ data: newData });
@@ -55,7 +50,6 @@ export default function ForumCreate() {
   const buttonFooter = (
     <BoxButtonOnFooter>
       <ButtonCustom
-        disabled={!text.trim() || isLoading}
         isLoading={isLoading}
         onPress={() => {
           handlerSubmit();
@@ -67,11 +61,7 @@ export default function ForumCreate() {
   );
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-      footerComponent={buttonFooter}
-    >
+    <ViewWrapper footerComponent={buttonFooter}>
       <TextAreaCustom
         placeholder="Ketik diskusi anda..."
         maxLength={1000}
@@ -79,6 +69,6 @@ export default function ForumCreate() {
         value={text}
         onChangeText={setText}
       />
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

@@ -1,14 +1,12 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import Forum_ViewBeranda from "@/screens/Forum/ViewBeranda";
 import Forum_ViewBeranda2 from "@/screens/Forum/ViewBeranda2";
-import Forum_ViewBeranda3 from "@/screens/Forum/ViewBeranda3";
 
 export default function Forum() {
   return (
     <>
       {/* <Forum_ViewBeranda /> */}
-      {/* <Forum_ViewBeranda2 /> */}
-      <Forum_ViewBeranda3 />
+      <Forum_ViewBeranda2 />
     </>
   );
 }

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

@@ -2,7 +2,7 @@ import {
     BaseBox,
     ButtonCustom,
     CheckboxCustom,
-    OS_Wrapper,
+    NewWrapper,
     StackCustom,
     TextCustom,
 } from "@/components";
@@ -54,7 +54,7 @@ export default function ForumSplash() {
   };
 
   return (
-    <OS_Wrapper>
+    <NewWrapper>
       {/* <TextCustom bold>HIPMI Badung Connect</TextCustom> . */}
 
       <BaseBox>
@@ -162,7 +162,7 @@ export default function ForumSplash() {
           </ButtonCustom>
         </StackCustom>
       </BaseBox>
-    </OS_Wrapper>
+    </NewWrapper>
   );
 }
 

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

@@ -1,202 +1,121 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react-hooks/exhaustive-deps */
-import { BasicWrapper, Spacing, StackCustom, ViewWrapper } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
-import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
+import { 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 HomeTabs from "@/screens/Home/HomeTabs";
-import { stylesHome } from "@/screens/Home/homeViewStyle";
 import Home_ImageSection from "@/screens/Home/imageSection";
+import TabSection from "@/screens/Home/tabSection";
 import { tabsHome } from "@/screens/Home/tabsList";
 import Home_FeatureSection from "@/screens/Home/topFeatureSection";
-import { apiJobGetAll } from "@/service/api-client/api-job";
 import { apiUser } from "@/service/api-client/api-user";
 import { apiVersion } from "@/service/api-config";
 import { Ionicons } from "@expo/vector-icons";
 import { Redirect, router, Stack, useFocusEffect } from "expo-router";
-import { useCallback, useState } from "react";
-import { RefreshControl, ScrollView, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Platform } from "react-native";
+import { useCallback, useEffect, useState } from "react";
+import { RefreshControl } from "react-native";
 
 export default function Application() {
   const { token, user, userData } = useAuth();
   const [data, setData] = useState<any>();
   const [refreshing, setRefreshing] = useState(false);
-  const { syncUnreadCount } = useNotificationStore();
-  const [listData, setListData] = useState<any[] | null>(null);
-  const insets = useSafeAreaInsets();
-  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
+  console.log("[User] >>", JSON.stringify(user?.id, null, 2));
 
+  // ‼️ Untuk cek apakah: 1. user ada, 2. user punya profile, 3. accept temrs of forum nya ada atau tidak
   useFocusEffect(
     useCallback(() => {
       onLoadData();
-      onLoadDataJob();
       checkVersion();
-      userData(token as string).catch((error) => {
-        console.log("[ERROR userData]", error?.message);
-        console.log("[ERROR userData Response]", error?.response?.data);
-      });
-      syncUnreadCount();
-    }, [user?.id, token]),
+      userData(token as string);
+    }, [user?.id, token])
   );
 
   async function onLoadData() {
-    try {
-      const response = await apiUser(user?.id as string);
-      setData(response.data);
-    } catch (error: any) {
-      console.log("[ERROR onLoadData]", error?.message);
-      console.log("[ERROR Response]", error?.response?.data);
-      // Set data tetap agar UI tidak stuck di loading
-      setData(null);
-    }
+    const response = await apiUser(user?.id as string);
+    console.log(
+      "[Profile ID]>>",
+      JSON.stringify(response?.data?.Profile?.id, null, 2)
+    );
+
+    setData(response.data);
   }
 
-  const onLoadDataJob = async () => {
-    try {
-      const response = await apiJobGetAll({
-        category: "beranda",
-      });
-      const result = response.data
-        .sort(
-          (a: any, b: any) =>
-            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
-        )
-        .slice(0, 2);
-      setListData(result);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    }
-  };
   const checkVersion = async () => {
-    try {
-      const response = await apiVersion();
-      console.log("[Version] >>", JSON.stringify(response.data, null, 2));
-    } catch (error: any) {
-      console.log("[ERROR checkVersion]", error?.message);
-    }
+    const response = await apiVersion();
+    console.log("[Version] >>", JSON.stringify(response.data, null, 2));
   };
 
   const onRefresh = useCallback(() => {
     setRefreshing(true);
     onLoadData();
-    onLoadDataJob();
     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.warn("User is not active");
-    return (
-      <BasicWrapper>
-        <Redirect href={`/waiting-room`} />
-      </BasicWrapper>
-    );
+    console.log("User is not active");
+    return <Redirect href={`/waiting-room`} />;
   }
 
   if (data && data?.Profile === null) {
-    console.warn("Profile is null");
-    return (
-      <BasicWrapper>
-        <Redirect href={`/profile/create`} />
-      </BasicWrapper>
-    );
+    console.log("Profile is null");
+    return <Redirect href={`/profile/create`} />;
   }
 
   return (
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="HIPMI"
-              showBack={false}
-              left={
-                data ? (
-                  <Ionicons
-                    name="search"
-                    size={20}
-                    color={MainColor.yellow}
-                    onPress={() => {
-                      router.push("/user-search");
-                    }}
-                  />
-                ) : (
-                  <CustomSkeleton height={30} width={30} radius={100} />
-                )
-              }
-              right={
-                data ? (
-                  <HeaderBell />
-                ) : (
-                  <CustomSkeleton height={30} width={30} radius={100} />
-                )
-              }
+          title: `HIPMI`,
+          headerLeft: () => (
+            <Ionicons
+              name="search"
+              size={20}
+              color={MainColor.yellow}
+              onPress={() => {
+                router.push("/user-search");
+              }}
+            />
+          ),
+          headerRight: () => (
+            <Ionicons
+              disabled={true}
+              name="notifications"
+              size={20}
+              color={MainColor.placeholder}
+              onPress={() => {
+                router.push("/notifications");
+              }}
             />
           ),
         }}
       />
-
-      <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
-        <ScrollView
-          style={{ flex: 1 }}
-          contentContainerStyle={{
-            flexGrow: 1,
-            paddingInline: 10,
-            paddingBottom: paddingBottom + 80, // Space for tabs + safe area
-          }}
-          refreshControl={
-            <RefreshControl
-              refreshing={refreshing}
-              onRefresh={onRefresh}
-              tintColor={MainColor.yellow}
-              colors={[MainColor.yellow]}
-            />
-          }
-          keyboardShouldPersistTaps="handled"
-        >
-          <StackCustom>
-            <Home_ImageSection />
-
-            {data && data ? (
-              <Home_FeatureSection />
-            ) : (
-              <View style={stylesHome.gridContainer}>
-                {Array.from({ length: 4 }).map((_, index) => (
-                  <CustomSkeleton
-                    key={index}
-                    style={stylesHome.gridItem}
-                    radius={50}
-                  />
-                ))}
-              </View>
-            )}
-
-            {data ? (
-              <Home_BottomFeatureSection listData={listData} />
-            ) : (
-              <CustomSkeleton height={150} />
-            )}
-          </StackCustom>
-        </ScrollView>
-
-        {/* Home Tabs di bawah */}
-        {data && data ? (
-          <HomeTabs
+      <ViewWrapper
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        }
+        footerComponent={
+          <TabSection
             tabs={tabsHome({
               acceptedForumTermsAt: data?.acceptedForumTermsAt,
               profileId: data?.Profile?.id,
             })}
           />
-        ) : (
-          <View style={{ height: 80 + paddingBottom, backgroundColor: MainColor.darkblue }} />
-        )}
-      </View>
+        }
+      >
+        <StackCustom>
+          <Home_ImageSection />
+
+          <Home_FeatureSection />
+
+          <Home_BottomFeatureSection />
+        </StackCustom>
+      </ViewWrapper>
     </>
   );
 }

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

@@ -1,108 +1,59 @@
-import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
-import { ICON_SIZE_SMALL, OS_ANDROID_HEIGHT, OS_IOS_HEIGHT } from "@/constants/constans-value";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { TabsStyles } from "@/styles/tabs-styles";
 import { Feather, FontAwesome6, Ionicons } from "@expo/vector-icons";
-import { router, Tabs, useLocalSearchParams, useNavigation } from "expo-router";
-import { useLayoutEffect } from "react";
-import { View } from "react-native";
-import { MainColor } from "@/constants/color-palet";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Platform } from "react-native";
-
-function InvestmentTabsWrapper() {
-  const insets = useSafeAreaInsets();
-  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
-  const navigation = useNavigation();
-
-  const { from, category } = useLocalSearchParams<{
-    from?: string;
-    category?: string;
-  }>();
-
-  // Atur header secara dinamis
-  useLayoutEffect(() => {
-    navigation.setOptions({
-      headerLeft: () => (
-        <BackButtonFromNotification
-          from={from || ""}
-          category={category}
-        />
-      ),
-    });
-  }, [from, category, router, navigation]);
-
-  return (
-    <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
-      <Tabs
-        screenOptions={{
-          ...TabsStyles,
-          tabBarStyle: Platform.select({
-            ios: {
-              borderTopWidth: 0,
-              paddingTop: 12,
-              height: OS_IOS_HEIGHT,
-            },
-            android: {
-              borderTopWidth: 0,
-              paddingTop: 5,
-              height: OS_ANDROID_HEIGHT + paddingBottom,
-            },
-          }),
-        }}
-      >
-        <Tabs.Screen
-          name="index"
-          options={{
-            title: "Bursa",
-            tabBarIcon: ({ color }) => (
-              <Ionicons
-                name="bar-chart-outline"
-                color={color}
-                size={ICON_SIZE_SMALL}
-              />
-            ),
-          }}
-        />
-        <Tabs.Screen
-          name="portofolio"
-          options={{
-            title: "Portofolio",
-            tabBarIcon: ({ color }) => (
-              <Feather name="pie-chart" color={color} size={ICON_SIZE_SMALL} />
-            ),
-          }}
-        />
-        <Tabs.Screen
-          name="my-holding"
-          options={{
-            title: "Saham Saya",
-            tabBarIcon: ({ color }) => (
-              <FontAwesome6
-                name="hand-holding-dollar"
-                color={color}
-                size={ICON_SIZE_SMALL}
-              />
-            ),
-          }}
-        />
-        <Tabs.Screen
-          name="transaction"
-          options={{
-            title: "Transaksi",
-            tabBarIcon: ({ color }) => (
-              <FontAwesome6
-                name="money-bill-transfer"
-                color={color}
-                size={ICON_SIZE_SMALL}
-              />
-            ),
-          }}
-        />
-      </Tabs>
-    </View>
-  );
-}
+import { Tabs } from "expo-router";
 
 export default function InvestmentTabsLayout() {
-  return <InvestmentTabsWrapper />;
+  return (
+    <Tabs screenOptions={TabsStyles}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Bursa",
+          tabBarIcon: ({ color }) => (
+            <Ionicons
+              name="bar-chart-outline"
+              color={color}
+              size={ICON_SIZE_SMALL}
+            />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="portofolio"
+        options={{
+          title: "Portofolio",
+          tabBarIcon: ({ color }) => (
+            <Feather name="pie-chart" color={color} size={ICON_SIZE_SMALL} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="my-holding"
+        options={{
+          title: "Saham Saya",
+          tabBarIcon: ({ color }) => (
+            <FontAwesome6
+              name="hand-holding-dollar"
+              color={color}
+              size={ICON_SIZE_SMALL}
+            />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="transaction"
+        options={{
+          title: "Transaksi",
+          tabBarIcon: ({ color }) => (
+            <FontAwesome6
+              name="money-bill-transfer"
+              color={color}
+              size={ICON_SIZE_SMALL}
+            />
+          ),
+        }}
+      />
+    </Tabs>
+  );
 }

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

@@ -1,9 +1,56 @@
-import Investment_ScreenBursa from "@/screens/Invesment/ScreenBursa";
+import {
+  FloatingButton,
+  LoaderCustom,
+  ViewWrapper
+} from "@/components";
+import NoDataText from "@/components/_ShareComponent/NoDataText";
+import Investment_BoxBerandaSection from "@/screens/Invesment/BoxBerandaSection";
+import { apiInvestmentGetAll } from "@/service/api-client/api-investment";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function InvestmentBursa() {
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadingList, setLoadingList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadingList(true);
+      const response = await apiInvestmentGetAll({
+        category: "bursa"
+      });
+      // console.log("[DATA LIST]", JSON.stringify(response.data, null, 2));
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingList(false);
+    }
+  };
+
   return (
-    <>
-      <Investment_ScreenBursa />
-    </>
+    <ViewWrapper
+      hideFooter
+      floatingButton={
+        <FloatingButton onPress={() => router.push("/investment/create")} />
+      }
+    >
+      {loadingList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(list) ? (
+        <NoDataText />
+      ) : (
+        list?.map((item: any, index: number) => (
+          <Investment_BoxBerandaSection id={item.id} data={item} key={index} />
+        ))
+      )}
+    </ViewWrapper>
   );
 }

app/(application)/(user)/investment/(tabs)/my-holding.tsx

@@ -1,10 +1,102 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import Investment_ScreenMyHolding from "@/screens/Invesment/ScreenMyHolding";
+import {
+  BaseBox,
+  Grid,
+  LoaderCustom,
+  ProgressCustom,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import NoDataText from "@/components/_ShareComponent/NoDataText";
+import { useAuth } from "@/hooks/use-auth";
+import {
+  apiInvestmentGetAll
+} from "@/service/api-client/api-investment";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import React, { useCallback, useState } from "react";
+import { View } from "react-native";
 
 export default function InvestmentMyHolding() {
+  const { user } = useAuth();
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadingList, setLoadingList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [user?.id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadingList(true);
+      const response = await apiInvestmentGetAll({
+        category: "my-holding",
+        authorId: user?.id,
+      });
+      console.log("[DATA LIST]", JSON.stringify(response.data, null, 2));
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingList(false);
+    }
+  };
+
   return (
-    <>
-      <Investment_ScreenMyHolding />
-    </>
+    <ViewWrapper hideFooter>
+      {loadingList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(list) ? (
+        <NoDataText />
+      ) : (
+        list?.map((item, index) => (
+          <BaseBox
+            key={index}
+            paddingTop={7}
+            paddingBottom={7}
+            onPress={() =>
+              router.push(`/investment/${item?.id}/(my-holding)/${item?.id}`)
+            }
+          >
+            <Grid>
+              <Grid.Col span={6}>
+                <StackCustom gap={"xs"}>
+                  <TextCustom truncate={2}>{item?.title}</TextCustom>
+
+                  <Spacing height={5} />
+                  <TextCustom size="small">
+                    Rp. {formatCurrencyDisplay(item?.nominal)}
+                  </TextCustom>
+                  <TextCustom size="small">
+                    {item?.lembarTerbeli} Lembar
+                  </TextCustom>
+                </StackCustom>
+              </Grid.Col>
+              <Grid.Col span={1}>
+                <View />
+              </Grid.Col>
+              <Grid.Col
+                span={5}
+                style={{
+                  justifyContent: "center",
+                  alignItems: "center",
+                }}
+              >
+                <ProgressCustom
+                  value={item?.progress}
+                  label={`${item?.progress}%`}
+                  size="lg"
+                />
+              </Grid.Col>
+            </Grid>
+          </BaseBox>
+        ))
+      )}
+    </ViewWrapper>
   );
 }

app/(application)/(user)/investment/(tabs)/portofolio.tsx

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

app/(application)/(user)/investment/(tabs)/transaction.tsx

@@ -1,10 +1,124 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import Investment_ScreenTransaction from "@/screens/Invesment/ScreenTransaction";
+import {
+  BadgeCustom,
+  BaseBox,
+  Grid,
+  LoaderCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import NoDataText from "@/components/_ShareComponent/NoDataText";
+import { useAuth } from "@/hooks/use-auth";
+import { apiInvestmentGetInvoice } from "@/service/api-client/api-investment";
+import { GStyles } from "@/styles/global-styles";
+import { formatChatTime } from "@/utils/formatChatTime";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+import { View } from "react-native";
 
 export default function InvestmentTransaction() {
+  const { user } = useAuth();
+  const [list, setList] = useState<any>([]);
+  const [loadList, setLoadList] = useState<boolean>(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [user?.id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiInvestmentGetInvoice({
+        authorId: user?.id as string,
+        category: "transaction",
+      });
+      console.log("[RESPONSE LIST]", 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 = ({ id, status }: { id: string; status: string }) => {
+    if (status === "menunggu") {
+      router.push(`/investment/${id}/(transaction-flow)/invoice`);
+    } else if (status === "proses") {
+      router.push(`/investment/${id}/(transaction-flow)/process`);
+    } else if (status === "berhasil") {
+      router.push(`/investment/${id}/(transaction-flow)/success`);
+    } else if (status === "gagal") {
+      router.push(`/investment/${id}/(transaction-flow)/failed`);
+    }
+  };
+
   return (
-    <>
-      <Investment_ScreenTransaction />
-    </>
+    <ViewWrapper hideFooter>
+      {loadList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(list) ? (
+        <NoDataText/>
+      ) : (
+        list.map((item: any, i: number) => (
+          <BaseBox
+            key={i}
+            paddingTop={7}
+            paddingBottom={7}
+            onPress={() => {
+              handlePress({
+                id: item.id,
+                status: _.lowerCase(item.statusInvoice),
+              });
+            }}
+          >
+            <Grid>
+              <Grid.Col span={6}>
+                <StackCustom gap={"xs"}>
+                  <TextCustom truncate>{item?.title || "-"}</TextCustom>
+                  <TextCustom color="gray" size="small">
+                    {formatChatTime(item?.createdAt)}
+                  </TextCustom>
+                </StackCustom>
+              </Grid.Col>
+              <Grid.Col span={1}>
+                <View />
+              </Grid.Col>
+              <Grid.Col span={5} style={{ alignItems: "flex-end" }}>
+                <StackCustom gap={"xs"}>
+                  <TextCustom bold truncate>
+                    Rp. {formatCurrencyDisplay(item?.nominal) || "-"}
+                  </TextCustom>
+                  <BadgeCustom
+                    variant="light"
+                    color={handlerColor(_.lowerCase(item.statusInvoice))}
+                    style={GStyles.alignSelfFlexEnd}
+                  >
+                    {item?.statusInvoice || "-"}
+                  </BadgeCustom>
+                </StackCustom>
+              </Grid.Col>
+            </Grid>
+          </BaseBox>
+        ))
+      )}
+    </ViewWrapper>
   );
 }

app/(application)/(user)/investment/[id]/(document)/add-document.tsx

@@ -5,11 +5,11 @@ import {
   ButtonCustom,
   CenterCustom,
   InformationBox,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -83,12 +83,9 @@ export default function InvestmentAddDocument() {
   );
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-      footerComponent={buttonFooter}
-    >
-      <StackCustom gap={"xs"}>
+    <>
+      <ViewWrapper footerComponent={buttonFooter}>
+        <StackCustom gap={"xs"}>
           <InformationBox text="File dokumen bersifat opsional, jika memang ada file yang bisa membantu meyakinkan investor. Anda bisa mengupload nya." />
           <Spacing />
           <TextInputCustom
@@ -127,6 +124,7 @@ export default function InvestmentAddDocument() {
             Upload
           </ButtonCenteredOnly>
         </StackCustom>
-    </OS_Wrapper>
+      </ViewWrapper>
+    </>
   );
 }

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

@@ -6,11 +6,11 @@ import {
   ButtonCustom,
   CenterCustom,
   InformationBox,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import DIRECTORY_ID from "@/constants/directory-id";
 import {
@@ -105,12 +105,9 @@ export default function InvestmentEditDocument() {
   );
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-      footerComponent={buttonFooter}
-    >
-      <StackCustom gap={"xs"}>
+    <>
+      <ViewWrapper footerComponent={buttonFooter}>
+        <StackCustom gap={"xs"}>
           <InformationBox text="File dokumen bersifat opsional, jika memang ada file yang bisa membantu meyakinkan investor. Anda bisa mengupload nya." />
           <Spacing />
           <TextInputCustom
@@ -145,6 +142,7 @@ export default function InvestmentEditDocument() {
             Upload
           </ButtonCenteredOnly>
         </StackCustom>
-    </OS_Wrapper>
+      </ViewWrapper>
+    </>
   );
 }

app/(application)/(user)/investment/[id]/(document)/list-of-document.tsx

@@ -1,10 +1,58 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import Investment_ScreenListOfDocument from "@/screens/Invesment/Document/ScreenListDocument";
+import { LoaderCustom, TextCustom, ViewWrapper } from "@/components";
+import Investment_BoxDetailDocument from "@/screens/Invesment/Document/RecapBoxDetail";
+import { apiInvestmentGetDocument } from "@/service/api-client/api-investment";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function InvestmentListOfDocument() {
+  const { id } = useLocalSearchParams();
+  console.log("ID >> ", id);
+
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadListDocument();
+    }, [id])
+  );
+
+  const onLoadListDocument = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiInvestmentGetDocument({
+        id: id as string,
+        category: "all-document",
+      });
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setList([]);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
   return (
-    <>
-      <Investment_ScreenListOfDocument />
-    </>
+    <ViewWrapper>
+      {loadList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(list) ? (
+        <TextCustom align="center" color="gray">
+          Tidak ada data
+        </TextCustom>
+      ) : (
+        list?.map((item: any, index: number) => (
+          <Investment_BoxDetailDocument
+            key={index}
+            title={item.title}
+            href={`/(file)/${item.fileId}`}
+          />
+        ))
+      )}
+    </ViewWrapper>
   );
 }

app/(application)/(user)/investment/[id]/(document)/recap-of-document.tsx

@@ -1,10 +1,213 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import Investment_ScreenRecapOfDocument from "@/screens/Invesment/Document/ScreenRecapOfDocument";
+import {
+  AlertDefaultSystem,
+  BackButton,
+  DotButton,
+  DrawerCustom,
+  LoaderCustom,
+  MenuDrawerDynamicGrid,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconEdit } from "@/components/_Icon";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import Investment_BoxDetailDocument from "@/screens/Invesment/Document/RecapBoxDetail";
+import {
+  apiInvestmentDeleteDocument,
+  apiInvestmentGetDocument,
+} from "@/service/api-client/api-investment";
+import { AntDesign, Ionicons } from "@expo/vector-icons";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function InvestmentRecapOfDocument() {
+  const { id } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [openDrawerBox, setOpenDrawerBox] = useState(false);
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+  const [selectId, setSelectId] = useState<string | null>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadListDocument();
+    }, [id])
+  );
+
+  const onLoadListDocument = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiInvestmentGetDocument({
+        id: id as string,
+        category: "all-document",
+      });
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setList([]);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
+  const handlerDeleteDocument = async () => {
+    try {
+      const response = await apiInvestmentDeleteDocument({
+        id: selectId as string,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Data berhasil dihapus",
+        });
+        setList((prev: any[] | null) => {
+          if (!prev) return null;
+          return prev.filter((item: any) => item.id !== selectId);
+        });
+        setOpenDrawerBox(false);
+        setSelectId(null);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      Toast.show({
+        type: "error",
+        text1: "Gagal menghapus data",
+      });
+    }
+  };
+
   return (
     <>
-      <Investment_ScreenRecapOfDocument />
+      <Stack.Screen
+        options={{
+          title: "Rekap Dokumen",
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <DotButton
+              onPress={() => {
+                setOpenDrawer(true);
+                setOpenDrawerBox(false);
+              }}
+            />
+          ),
+        }}
+      />
+
+      <ViewWrapper>
+        {loadList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(list) ? (
+          <TextCustom align="center" color="gray">
+            Tidak ada data
+          </TextCustom>
+        ) : (
+          list?.map((item: any, index: number) => (
+            <Investment_BoxDetailDocument
+              key={index}
+              title={item.title}
+              leftIcon={
+                <Ionicons
+                  name="ellipsis-horizontal-outline"
+                  size={ICON_SIZE_SMALL}
+                  color={MainColor.white}
+                  style={{
+                    zIndex: 10,
+                    alignSelf: "flex-end",
+                  }}
+                  onPress={() => {
+                    setSelectId(item.id);
+                    setOpenDrawerBox(true);
+                  }}
+                />
+              }
+              href={`/(file)/${item.fileId}`}
+            />
+          ))
+        )}
+      </ViewWrapper>
+
+      {/* Drawer On Header */}
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: (
+                <AntDesign
+                  name="plus-circle"
+                  size={ICON_SIZE_SMALL}
+                  color={MainColor.white}
+                />
+              ),
+              label: "Tambah Dokumen",
+              path: `/investment/${id}/(document)/add-document`,
+            },
+          ]}
+          onPressItem={(item) => {
+            router.push(item.path as any);
+            setOpenDrawer(false);
+          }}
+        />
+      </DrawerCustom>
+
+      {/* Drawer On Box */}
+      <DrawerCustom
+        isVisible={openDrawerBox}
+        closeDrawer={() => setOpenDrawerBox(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconEdit />,
+              label: "Edit Dokumen",
+              path: `/investment/${selectId}/(document)/edit-document`,
+            },
+            {
+              icon: (
+                <Ionicons
+                  name="trash-outline"
+                  size={ICON_SIZE_SMALL}
+                  color={MainColor.white}
+                />
+              ),
+              label: "Hapus Dokumen",
+              path: "" as any,
+              color: MainColor.red,
+            },
+          ]}
+          onPressItem={(item) => {
+            if (item.path === ("" as any)) {
+              AlertDefaultSystem({
+                title: "Hapus Dokumen",
+                message: "Apakah anda yakin ingin menghapus dokumen ini?",
+                textLeft: "Batal",
+                textRight: "Hapus",
+                onPressRight: () => {
+                  handlerDeleteDocument();
+                },
+              });
+            } else {
+              router.push(item.path as any);
+            }
+
+            setOpenDrawerBox(false);
+          }}
+        />
+      </DrawerCustom>
     </>
   );
 }

app/(application)/(user)/investment/[id]/(my-holding)/[id].tsx

@@ -6,11 +6,10 @@ import {
   DrawerCustom,
   Grid,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconDocument, IconEdit, IconNews } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import { MainColor } from "@/constants/color-palet";
@@ -31,13 +30,13 @@ export default function InvestmentDetailHolding() {
   const [openDrawerDraft, setOpenDrawerDraft] = useState(false);
   const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
     const [data, setData] = useState<any>(null);
-
+  
     useFocusEffect(
       useCallback(() => {
         onLoadData();
       }, [id, status])
     );
-
+  
     const onLoadData = async () => {
       try {
         const response = await apiInvestmentGetInvoice({
@@ -45,7 +44,7 @@ export default function InvestmentDetailHolding() {
           authorId: user?.id,
           category: "invoice",
         });
-
+  
         console.log("[DATA]", JSON.stringify(response.data, null, 2));
         setData(response.data);
       } catch (error) {
@@ -77,23 +76,18 @@ export default function InvestmentDetailHolding() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title={`Detail ${_.startCase(status as string)}`}
-              left={<BackButton />}
-              right={
-                status === "draft" ? (
-                  <DotButton onPress={() => setOpenDrawerDraft(true)} />
-                ) : status === "publish" ? (
-                  <DotButton onPress={() => setOpenDrawerPublish(true)} />
-                ) : null
-              }
-            />
-          ),
+          title: `Detail ${_.startCase(status as string)}`,
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            status === "draft" ? (
+              <DotButton onPress={() => setOpenDrawerDraft(true)} />
+            ) : status === "publish" ? (
+              <DotButton onPress={() => setOpenDrawerPublish(true)} />
+            ) : null,
         }}
       />
 
-      <OS_Wrapper>
+      <ViewWrapper>
         <BaseBox>
           <StackCustom gap={"xs"}>
             <Grid>
@@ -124,7 +118,7 @@ export default function InvestmentDetailHolding() {
           status={"publish"}
           bottomSection={bottomSection}
         />
-      </OS_Wrapper>
+      </ViewWrapper>
 
       {/* ========= Draft Drawer ========= */}
       <DrawerCustom

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

@@ -7,11 +7,10 @@ import {
   DrawerCustom,
   DummyLandscapeImage,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconTrash } from "@/components/_Icon/IconTrash";
 import { useAuth } from "@/hooks/use-auth";
 import {
@@ -57,20 +56,15 @@ export default function InvestmentNews() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Detail Berita"
-              left={<BackButton />}
-              right={
-                user?.id === data?.authorId && (
-                  <DotButton onPress={() => setOpenDrawer(true)} />
-                )
-              }
-            />
-          ),
+          title: "Detail Berita",
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            user?.id === data?.authorId && (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ),
         }}
       />
-      <OS_Wrapper>
+      <ViewWrapper>
         <BaseBox>
           <StackCustom>
             {data && data?.imageId && (
@@ -82,7 +76,7 @@ export default function InvestmentNews() {
             <TextCustom>{(data && data?.deskripsi) || "-"}</TextCustom>
           </StackCustom>
         </BaseBox>
-      </OS_Wrapper>
+      </ViewWrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

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

@@ -3,11 +3,11 @@ import {
   ButtonCustom,
   InformationBox,
   LandscapeFrameUploaded,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextAreaCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { apiInvestmentCreateNews } from "@/service/api-client/api-investment";
@@ -80,10 +80,7 @@ export default function InvestmentAddNews() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-    >
+    <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Pengunggahan foto ke aplikasi bersifat opsional dan tidak diwajibkan, Anda dapat menyimpan berita tanpa mengunggah foto." />
         <LandscapeFrameUploaded image={image?.uri} />
@@ -118,14 +115,11 @@ export default function InvestmentAddNews() {
           onChangeText={(value) => setData({ ...data, deskripsi: value })}
         />
 
-        <ButtonCustom
-          disabled={!data.title || !data.deskripsi || isLoading}
-          isLoading={isLoading}
-          onPress={handlerSubmit}
-        >
+        <ButtonCustom isLoading={isLoading} onPress={handlerSubmit}>
           Simpan
         </ButtonCustom>
       </StackCustom>
-    </OS_Wrapper>
+      <Spacing />
+    </ViewWrapper>
   );
 }

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

@@ -1,10 +1,100 @@
-import Investment_ScreenListOfNews from "@/screens/Invesment/News/ScreenListOfNews";
-import { useLocalSearchParams } from "expo-router";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BackButton,
+  BaseBox,
+  DrawerCustom,
+  LoaderCustom,
+  MenuDrawerDynamicGrid,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconPlus } from "@/components/_Icon";
+import { apiInvestmentGetNews } from "@/service/api-client/api-investment";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function InvestmentListOfNews() {
   const { id } = useLocalSearchParams();
-  
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiInvestmentGetNews({
+        id: id as string,
+        category: "all-news",
+      });
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
   return (
-    <Investment_ScreenListOfNews investmentId={id as string} />
+    <>
+      <Stack.Screen
+        options={{
+          title: "Daftar Berita",
+          headerLeft: () => <BackButton />,
+          //   headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+        }}
+      />
+
+      <ViewWrapper>
+        {loadList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(list) ? (
+          <TextCustom align="center" color="gray">
+            Tidak ada data
+          </TextCustom>
+        ) : (
+          list?.map((item: any, index: number) => (
+            <BaseBox
+              key={index}
+              paddingBlock={5}
+              href={`/investment/[id]/(news)/${item.id}`}
+            >
+              <TextCustom bold>{item.title}</TextCustom>
+            </BaseBox>
+          ))
+        )}
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              label: "Tambah Berita",
+              path: `/investment/${id}/add-news`,
+              icon: <IconPlus />,
+            },
+          ]}
+          onPressItem={(item) => {
+            router.push(item.path as any);
+            setOpenDrawer(false);
+          }}
+        />
+      </DrawerCustom>
+    </>
   );
 }

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

@@ -1,10 +1,101 @@
-import Investment_ScreenRecapOfNews from "@/screens/Invesment/News/ScreenRecapOfNews";
-import { useLocalSearchParams } from "expo-router";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BackButton,
+  BaseBox,
+  DotButton,
+  DrawerCustom,
+  LoaderCustom,
+  MenuDrawerDynamicGrid,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconPlus } from "@/components/_Icon";
+import { apiInvestmentGetNews } from "@/service/api-client/api-investment";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function InvestmentRecapOfNews() {
   const { id } = useLocalSearchParams();
-  
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiInvestmentGetNews({
+        id: id as string,
+        category: "all-news",
+      });
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
   return (
-    <Investment_ScreenRecapOfNews investmentId={id as string} />
+    <>
+      <Stack.Screen
+        options={{
+          title: "Rekap Berita",
+          headerLeft: () => <BackButton />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+        }}
+      />
+      <ViewWrapper>
+        {loadList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(list) ? (
+          <TextCustom align="center" color="gray">
+            Tidak ada data
+          </TextCustom>
+        ) : (
+          list?.map((item: any, index: number) => (
+            <BaseBox
+              key={index}
+              paddingBlock={5}
+              href={`/investment/[id]/(news)/${item.id}`}
+            >
+              <TextCustom bold>{item.title}</TextCustom>
+            </BaseBox>
+          ))
+        )}
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              label: "Tambah Berita",
+              path: `/investment/${id}/add-news`,
+              icon: <IconPlus />,
+            },
+          ]}
+          onPressItem={(item) => {
+            router.push(item.path as any);
+            setOpenDrawer(false);
+          }}
+        />
+      </DrawerCustom>
+    </>
   );
 }

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

@@ -2,10 +2,10 @@
 import {
   BaseBox,
   Grid,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { apiInvestmentGetInvoice } from "@/service/api-client/api-investment";
@@ -69,7 +69,7 @@ export default function InvestmentFailed() {
   ];
 
   return (
-    <OS_Wrapper>
+    <ViewWrapper>
       <StackCustom>
         <BaseBox>
           <StackCustom>
@@ -110,6 +110,6 @@ export default function InvestmentFailed() {
           </StackCustom>
         </BaseBox>
       </StackCustom>
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

@@ -5,10 +5,10 @@ import {
   ButtonCustom,
   Divider,
   Grid,
-  OS_Wrapper,
   StackCustom,
   TextCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import { LOCAL_STORAGE_KEY } from "@/constants/local-storage-key";
 import { apiInvestmentGetOne } from "@/service/api-client/api-investment";
@@ -99,12 +99,9 @@ export default function InvestmentInvest() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-      footerComponent={buttonSubmit()}
-    >
-      <BaseBox>
+    <>
+      <ViewWrapper footerComponent={buttonSubmit()}>
+        <BaseBox>
           <StackCustom gap={"xs"}>
             <Grid>
               <Grid.Col span={6}>
@@ -168,6 +165,7 @@ export default function InvestmentInvest() {
             </Grid>
           </StackCustom>
         </BaseBox>
-    </OS_Wrapper>
+      </ViewWrapper>
+    </>
   );
 }

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

@@ -1,10 +1,239 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import Investment_ScreenInvoice from "@/screens/Invesment/ScreenInvoice";
+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 {
+  apiInvestmentGetInvoice,
+  apiInvestmentUpdateInvoice,
+} from "@/service/api-client/api-investment";
+import { uploadFileService } from "@/service/upload-service";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import pickFile, { IFileData } 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 InvestmentInvoice() {
+  const { id } = useLocalSearchParams();
+  console.log("[ID]", id);
+  const [data, setData] = useState<any>({});
+  const [image, setImage] = useState<IFileData>({
+    name: "",
+    uri: "",
+    size: 0,
+  });
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiInvestmentGetInvoice({
+        id: id as string,
+        category: "invoice",
+      });
+
+      console.log("[RES INVOICE]", JSON.stringify(response.data, null, 2));
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handlerSubmitUpdate = async () => {
+    try {
+      setIsLoading(true);
+      const responseUploadImage = await uploadFileService({
+        dirId: DIRECTORY_ID.investasi_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 response = await apiInvestmentUpdateInvoice({
+        id: id as string,
+        data: {
+          imageId: responseUploadImage?.data?.id,
+        },
+        status: "proses",
+      });
+
+      if (response.success) {
+        console.log(
+          "[RESPONSE UPDATE]",
+          JSON.stringify(response.data, null, 2)
+        );
+        Toast.show({
+          type: "success",
+          text1: "Berhasil mengunggah bukti transfer",
+        });
+        router.push(`/investment/${id}/(transaction-flow)/process`);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <>
-      <Investment_ScreenInvoice />
+      <ViewWrapper>
+        <StackCustom>
+          <InformationBox text="Mohon transfer ke rekening dibawah" />
+          <BaseBox>
+            <StackCustom gap={"xs"}>
+              <Grid>
+                <Grid.Col span={4}>
+                  <TextCustom>Bank</TextCustom>
+                </Grid.Col>
+                <Grid.Col span={8}>
+                  <TextCustom>{data?.MasterBank?.namaBank}</TextCustom>
+                </Grid.Col>
+              </Grid>
+              <Spacing height={10} />
+              <Grid>
+                <Grid.Col span={4}>
+                  <TextCustom>Nama Akun</TextCustom>
+                </Grid.Col>
+                <Grid.Col span={8}>
+                  <TextCustom>{data?.MasterBank?.namaAkun}</TextCustom>
+                </Grid.Col>
+              </Grid>
+
+              <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 align="center">
+                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>
+              ) : (
+                <TextCustom align="center">
+                  Tidak ada gambar yang diunggah
+                </TextCustom>
+              )}
+              <ButtonCenteredOnly
+                onPress={() => {
+                  pickFile({
+                    allowedType: "image",
+                    setImageUri(file: any) {
+                      console.log("[IMAGE]", file);
+                      setImage(file);
+                    },
+                  });
+                }}
+                icon="upload"
+              >
+                Upload
+              </ButtonCenteredOnly>
+            </StackCustom>
+          </BaseBox>
+
+          <ButtonCustom
+            isLoading={isLoading}
+            disabled={!image}
+            onPress={() => {
+              handlerSubmitUpdate();
+            }}
+          >
+            Saya Sudah Transfer
+          </ButtonCustom>
+        </StackCustom>
+        <Spacing />
+      </ViewWrapper>
     </>
   );
 }

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

@@ -1,11 +1,11 @@
-import { BaseBox, OS_Wrapper, StackCustom, TextCustom } from "@/components";
+import { BaseBox, StackCustom, TextCustom, ViewWrapper } from "@/components";
 import MoneyTransferAnimation from "@/components/_ShareComponent/MoneyTransferAnimation";
 import { View } from "react-native";
 
 export default function InvestmentProcess() {
   return (
     <>
-      <OS_Wrapper>
+      <ViewWrapper>
         <BaseBox>
           <StackCustom>
             <TextCustom align="center" bold>
@@ -35,7 +35,7 @@ export default function InvestmentProcess() {
             </Grid.Col>
           </Grid>
         </BaseBox> */}
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

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

@@ -2,7 +2,7 @@ import {
   BaseBox,
   BoxButtonOnFooter,
   ButtonCustom,
-  OS_Wrapper,
+  ViewWrapper,
 } from "@/components";
 import { RadioCustom, RadioGroup } from "@/components/Radio/RadioCustom";
 import { LOCAL_STORAGE_KEY } from "@/constants/local-storage-key";
@@ -56,6 +56,7 @@ export default function InvestmentSelectBank() {
         });
 
         if (response.success) {
+          console.log("[RESPONSE >>]", response);
           const invoiceId = response.data.id;
 
           const delStorage = await AsyncStorage.removeItem(
@@ -86,7 +87,7 @@ export default function InvestmentSelectBank() {
   };
 
   return (
-    <OS_Wrapper footerComponent={buttonSubmit()}>
+    <ViewWrapper footerComponent={buttonSubmit()}>
       <RadioGroup value={select} onChange={setSelect}>
         {_.isEmpty(listBank)
           ? []
@@ -96,6 +97,6 @@ export default function InvestmentSelectBank() {
               </BaseBox>
             ))}
       </RadioGroup>
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

@@ -2,10 +2,10 @@
 import {
   BaseBox,
   Grid,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { apiInvestmentGetInvoice } from "@/service/api-client/api-investment";
@@ -69,7 +69,7 @@ export default function InvestmentSuccess() {
   ];
 
   return (
-    <OS_Wrapper>
+    <ViewWrapper>
       <StackCustom>
         <BaseBox>
           <StackCustom>
@@ -110,6 +110,6 @@ export default function InvestmentSuccess() {
           </StackCustom>
         </BaseBox>
       </StackCustom>
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

@@ -4,9 +4,8 @@ import {
   DotButton,
   DrawerCustom,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
+  ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconDocument, IconEdit, IconNews } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import { MainColor } from "@/constants/color-palet";
@@ -16,7 +15,6 @@ import Investment_ButtonInvestasiSection from "@/screens/Invesment/ButtonInvesta
 import Invesment_ComponentBoxOnBottomDetail from "@/screens/Invesment/ComponentBoxOnBottomDetail";
 import Invesment_DetailDataPublishSection from "@/screens/Invesment/DetailDataPublishSection";
 import { apiInvestmentGetOne } from "@/service/api-client/api-investment";
-import { countDownAndCondition } from "@/utils/countDownAndCondition";
 import { AntDesign, MaterialIcons } from "@expo/vector-icons";
 import {
   router,
@@ -25,7 +23,7 @@ import {
   useLocalSearchParams,
 } from "expo-router";
 import _ from "lodash";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 
 export default function InvestmentDetailStatus() {
   const { user } = useAuth();
@@ -65,28 +63,6 @@ export default function InvestmentDetailStatus() {
     setOpenDrawerPublish(false);
   };
 
-  const [value, setValue] = useState({
-    sisa: 0,
-    reminder: false,
-  });
-
-  useEffect(() => {
-    updateCountDown();
-  }, [data]);
-
-
-  const updateCountDown = () => {
-    const countDown = countDownAndCondition({
-      duration: data?.MasterPencarianInvestor.name,
-      publishTime: data?.countDown,
-    });
-
-    setValue({
-      sisa: countDown.durationDay,
-      reminder: countDown.reminder,
-    });
-  };
-
   const bottomSection = (
     <Invesment_ComponentBoxOnBottomDetail
       id={data?.id}
@@ -96,41 +72,32 @@ export default function InvestmentDetailStatus() {
   );
 
   const buttonSection = (
-    <Investment_ButtonInvestasiSection
-      id={id as string}
-      isMine={user?.id === data?.author?.id}
-      reminder={value.reminder}
-    />
+    <Investment_ButtonInvestasiSection id={id as string} isMine={user?.id === data?.author?.id} />
   );
 
   return (
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title={`Detail ${_.startCase(status as string)}`}
-              left={<BackButton />}
-              right={
-                status === "draft" ? (
-                  <DotButton onPress={() => setOpenDrawerDraft(true)} />
-                ) : status === "publish" ? (
-                  <DotButton onPress={() => setOpenDrawerPublish(true)} />
-                ) : null
-              }
-            />
-          ),
+          title: `Detail ${_.startCase(status as string)}`,
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            status === "draft" ? (
+              <DotButton onPress={() => setOpenDrawerDraft(true)} />
+            ) : status === "publish" ? (
+              <DotButton onPress={() => setOpenDrawerPublish(true)} />
+            ) : null,
         }}
       />
 
-      <OS_Wrapper>
+      <ViewWrapper>
         <Invesment_DetailDataPublishSection
           status={status as string}
           data={data}
           bottomSection={bottomSection}
           buttonSection={buttonSection}
         />
-      </OS_Wrapper>
+      </ViewWrapper>
 
       {/* ========= Draft Drawer ========= */}
       <DrawerCustom

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

@@ -7,10 +7,10 @@ import {
   CenterCustom,
   InformationBox,
   LoaderCustom,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
 import DIRECTORY_ID from "@/constants/directory-id";
 import {
@@ -116,7 +116,7 @@ export default function InvestmentEditProspectus() {
     </BoxButtonOnFooter>
   );
   return (
-    <OS_Wrapper footerComponent={!loadingGet && buttonFooter}>
+    <ViewWrapper footerComponent={!loadingGet && buttonFooter}>
       <StackCustom gap={"xs"}>
         <InformationBox text="File prospektus wajib untuk diupload, agar calon investor paham dengan prospek investasi yang akan anda jalankan kedepan." />
         <Spacing />
@@ -153,6 +153,6 @@ export default function InvestmentEditProspectus() {
           Upload
         </ButtonCenteredOnly>
       </StackCustom>
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

@@ -1,16 +1,15 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-  BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
   InformationBox,
   LandscapeFrameUploaded,
   LoaderCustom,
-  OS_Wrapper,
   SelectCustom,
   Spacing,
   StackCustom,
-  TextInputCustom
+  TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -19,7 +18,10 @@ import {
   apiInvestmentUpdateData,
 } from "@/service/api-client/api-investment";
 import { apiMasterInvestment } from "@/service/api-client/api-master";
-import { deleteFileService, uploadFileService } from "@/service/upload-service";
+import {
+  deleteFileService,
+  uploadFileService,
+} from "@/service/upload-service";
 import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
 import pickFile from "@/utils/pickFile";
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
@@ -68,7 +70,7 @@ export default function InvestmentEdit() {
     useCallback(() => {
       onLoadMaster();
       onLoadData();
-    }, [id]),
+    }, [id])
   );
 
   const onLoadMaster = async () => {
@@ -176,7 +178,7 @@ export default function InvestmentEdit() {
       const responseUpdate = await apiInvestmentUpdateData({
         id: id as string,
         data: newData,
-        category: "data",
+        category: "data"
       });
 
       if (responseUpdate.success) {
@@ -199,17 +201,7 @@ export default function InvestmentEdit() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-      footerComponent={
-        <BoxButtonOnFooter>
-          <ButtonCustom isLoading={isLoading} onPress={handleSubmitUpdate}>
-            Simpan
-          </ButtonCustom>
-        </BoxButtonOnFooter>
-      }
-    >
+    <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Gambar investasi bisa berupa ilustrasi, poster atau foto terkait investasi." />
         <LandscapeFrameUploaded
@@ -264,8 +256,6 @@ export default function InvestmentEdit() {
         />
 
         <TextInputCustom
-          iconLeft="Rp."
-          // disabled
           required
           placeholder="0"
           label="Total Lembar"
@@ -351,7 +341,11 @@ export default function InvestmentEdit() {
         )}
 
         <Spacing />
+        <ButtonCustom isLoading={isLoading} onPress={handleSubmitUpdate}>
+          Simpan
+        </ButtonCustom>
       </StackCustom>
-    </OS_Wrapper>
+      <Spacing height={50} />
+    </ViewWrapper>
   );
 }

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

@@ -4,9 +4,8 @@ import {
   DotButton,
   DrawerCustom,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
+  ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconDocument, IconEdit, IconNews } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import { MainColor } from "@/constants/color-palet";
@@ -64,27 +63,30 @@ export default function InvestmentDetail() {
     setOpenDrawerPublish(false);
   };
 
-  const [value, setValue] = useState({
-    sisa: 0,
-    reminder: false,
-  });
-
-  useEffect(() => {
-    updateCountDown();
-  }, [data]);
-
-
-  const updateCountDown = () => {
-    const countDown = countDownAndCondition({
-      duration: data?.MasterPencarianInvestor.name,
-      publishTime: data?.countDown,
+    const [value, setValue] = useState({
+      sisa: 0,
+      reminder: false,
     });
+  
+    useEffect(() => {
+      updateCountDown();
+    }, [data]);
+
+    console.log("[DATA DETAIL]", JSON.stringify(data, null, 2));
+  
+    const updateCountDown = () => {
+      const countDown = countDownAndCondition({
+        duration: data?.MasterPencarianInvestor.name,
+        publishTime: data?.countDown,
+      });
+  
+      setValue({
+        sisa: countDown.durationDay,
+        reminder: countDown.reminder,
+      });
+    };
+
 
-    setValue({
-      sisa: countDown.durationDay,
-      reminder: countDown.reminder,
-    });
-  };
 
   const bottomSection = (
     <Invesment_ComponentBoxOnBottomDetail
@@ -95,41 +97,32 @@ export default function InvestmentDetail() {
   );
 
   const buttonSection = (
-    <Investment_ButtonInvestasiSection
-      id={id as string}
-      isMine={user?.id === data?.author?.id}
-      reminder={value.reminder}
-    />
+    <Investment_ButtonInvestasiSection id={id as string} isMine={user?.id === data?.author?.id} reminder={value.reminder} />
   );
 
   return (
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title={`Detail ${_.startCase(status as string)}`}
-              left={<BackButton />}
-              right={
-                status === "draft" ? (
-                  <DotButton onPress={() => setOpenDrawerDraft(true)} />
-                ) : status === "publish" ? (
-                  <DotButton onPress={() => setOpenDrawerPublish(true)} />
-                ) : null
-              }
-            />
-          ),
+          title: `Detail ${_.startCase(status as string)}`,
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            status === "draft" ? (
+              <DotButton onPress={() => setOpenDrawerDraft(true)} />
+            ) : status === "publish" ? (
+              <DotButton onPress={() => setOpenDrawerPublish(true)} />
+            ) : null,
         }}
       />
 
-      <OS_Wrapper>
+      <ViewWrapper>
         <Invesment_DetailDataPublishSection
           status={"publish"}
           data={data}
           bottomSection={bottomSection}
           buttonSection={buttonSection}
         />
-      </OS_Wrapper>
+      </ViewWrapper>
 
       {/* ========= Draft Drawer ========= */}
       <DrawerCustom

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

@@ -1,10 +1,67 @@
-import Investment_ScreenInvestor from "@/screens/Invesment/ScreenInvestor";
-import { useLocalSearchParams } from "expo-router";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  AvatarUsernameAndOtherComponent,
+  BoxWithHeaderSection,
+  LoaderCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import NoDataText from "@/components/_ShareComponent/NoDataText";
+import { apiInvestmentGetInvestorById } from "@/service/api-client/api-investment";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function InvestmentInvestor() {
   const { id } = useLocalSearchParams();
-  
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadingList, setLoadingList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadingList(true);
+      const response = await apiInvestmentGetInvestorById({
+        id: id as string,
+      })
+      console.log("[DATA LIST]", JSON.stringify(response.data, null, 2));
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingList(false);
+    }
+  }
+
+
   return (
-    <Investment_ScreenInvestor investmentId={id as string} />
+    <>
+      <ViewWrapper>
+        {loadingList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(list) ? (
+          <NoDataText />
+        ) : (
+          list?.map((item: any, index: number) => (
+            <BoxWithHeaderSection key={index}>
+              <AvatarUsernameAndOtherComponent
+                avatar={item?.Author?.Profile?.imageId}
+                name={item?.Author?.username}
+                avatarHref={`/profile/${item?.Author?.Profile?.id}`}
+              />
+              <TextCustom bold>
+                Rp. {formatCurrencyDisplay(item?.nominal)}
+              </TextCustom>
+            </BoxWithHeaderSection>
+          ))
+        )}
+      </ViewWrapper>
+    </>
   );
 }