Merge pull request 'clean-code/11-mar-26' (#62) from clean-code/11-mar-26 into staging

Reviewed-on: #62

.gitignore

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

.qwen/settings.json

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

.qwen/settings.json.orig

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

QWEN.md

@@ -387,7 +387,7 @@ apiConfig.interceptors.request.use(async (config) => {
 
 ### Deep Linking
 - Scheme: `hipmimobile://`
-- HTTPS: `cld-dkr-hipmi-stg.wibudev.com`
+- HTTPS: `cld-dkr-staging-hipmi.wibudev.com`
 - Configured for both platforms
 
 ### Camera
@@ -513,31 +513,3 @@ When using Maplibre MapView on iOS, prevent "Attempt to recycle a mounted view"
 - [Expo Router Documentation](https://docs.expo.dev/router/introduction/)
 - [TypeScript Documentation](https://www.typescriptlang.org/docs/)
 - [Maplibre React Native](https://github.com/maplibre/maplibre-react-native)
-
-## Qwen Added Memories
-- OS_Wrapper contentPaddingBottom pattern:
-- Default: contentPaddingBottom=100 (untuk list screens)
-- Forms: contentPaddingBottom=250 (HANYA untuk screens yang punya TextInput/TextArea)
-- contentPadding=0 (default, per-screen control)
-- OS_ANDROID_PADDING_TOP=6 (compact tabs)
-- OS_IOS_PADDING_TOP=12
-- PADDING_INLINE=16 (constant)
-
-Contoh:
-```tsx
-// List screen (default 100px)
-<OS_Wrapper listData={data} renderItem={renderItem} />
-
-// Form screen (explicit 250px)
-<OS_Wrapper enableKeyboardHandling contentPaddingBottom={250}>
-  <FormWithTextInput />
-</OS_Wrapper>
-```
-- PADDING_INLINE usage pattern - User preference:
-- PADDING_INLINE (16px) TIDAK selalu diperlukan
-- User remove PADDING_INLINE dari Profile screens karena mempersempit box tampilan
-- Decision: Tambahkan PADDING_INLINE HANYA jika diperlukan per-screen, jangan default
-- User akan review dan tambahkan sendiri jika perlu
-
-Profile screens: PADDING_INLINE dihapus dari edit.tsx dan create.tsx
-- User ingin mengecek semua user layout tabs setelah perubahan height layout tabs donation di constants. Pattern yang perlu dicek: semua tabs screens harus pakai contentPadding={PADDING_INLINE} untuk konsistensi layout.

android/app/build.gradle

@@ -100,7 +100,7 @@ packagingOptions {
         applicationId 'com.bip.hipmimobileapp'
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 5
+        versionCode 1
         versionName "1.0.2"
 
         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

@@ -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-hipmi-stg.wibudev.com" android:pathPrefix="/"/>
         <category android:name="android.intent.category.BROWSABLE"/>
         <category android:name="android.intent.category.DEFAULT"/>
       </intent-filter>

android/build.gradle

@@ -6,17 +6,32 @@ buildscript {
     mavenCentral()
   }
   dependencies {
-        classpath 'com.google.gms:google-services:4.4.1'
+    classpath 'com.google.gms:google-services:4.4.1'
     classpath('com.android.tools.build:gradle')
     classpath('com.facebook.react:react-native-gradle-plugin')
     classpath('org.jetbrains.kotlin:kotlin-gradle-plugin')
   }
 }
 
+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

@@ -25,27 +25,27 @@ 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",
+      "applinks:cld-dkr-hipmi-stg.wibudev.com",
     ],
-    buildNumber: "7",
+    buildNumber: "4",
   },
 
   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: 5,
+    versionCode: 1,
     // softwareKeyboardLayoutMode: 'resize', // option: untuk mengatur keyboard pada room chst collaboration
     intentFilters: [
       {
@@ -54,7 +54,7 @@ export default {
         data: [
           {
             scheme: "https",
-            host: "hipmi.muku.id",
+            host: "cld-dkr-hipmi-stg.wibudev.com",
             pathPrefix: "/",
           },
         ],
@@ -70,7 +70,6 @@ export default {
   },
 
   plugins: [
-    "./plugins/withCustomConfig",
     "expo-router",
     "expo-web-browser",
     [

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)/(user)/_layout.tsx

@@ -1,27 +1,29 @@
 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,7 +47,8 @@ export default function UserLayout() {
         <Stack.Screen
           name="user-search/index"
           options={{
-            header: () => <AppHeader title="Pencarian Pengguna" />,
+            title: "Pencarian Pengguna",
+            headerLeft: () => <BackButton />,
           }}
         />
 
@@ -68,18 +71,10 @@ export default function UserLayout() {
 
         {/* ========== 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" />
@@ -90,28 +85,32 @@ export default function UserLayout() {
         <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 +119,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 +147,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 +172,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 +204,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 +215,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 +320,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 +336,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 +361,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 +484,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 +498,55 @@ 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",
+            // headerLeft: () => <BackButton path="/home" />,
             // NOTE: headerLeft di pindahkan ke Tabs Layout
-            header: () => <AppHeader title="Job Vacancy" left={<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 +556,78 @@ 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" />,
+            title: "Syarat & Ketentuan Forum",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/preview-report-posting"
           options={{
-            header: () => <AppHeader title="Laporan Postingan" />,
+            title: "Laporan Postingan",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/preview-report-comment"
           options={{
-            header: () => <AppHeader title="Laporan Komentar" />,
+            title: "Laporan Komentar",
+            headerLeft: () => <BackButton />,
           }}
         />
 
@@ -596,25 +635,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 +665,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/[id]/(news)/[news]/edit-news.tsx

@@ -5,11 +5,11 @@ import {
   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";
@@ -105,9 +105,7 @@ export default function DonationEditNews() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
+    <ViewWrapper
       footerComponent={
         <BoxButtonOnFooter>
           <ButtonCustom
@@ -167,6 +165,6 @@ export default function DonationEditNews() {
         <Spacing />
       </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

@@ -4,11 +4,12 @@ import {
   ButtonCustom,
   InformationBox,
   LandscapeFrameUploaded,
-  OS_Wrapper,
+  NewWrapper,
   Spacing,
   StackCustom,
   TextAreaCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { apiDonationCreateNews } from "@/service/api-client/api-donation";
@@ -71,9 +72,7 @@ export default function DonationAddNews() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
+    <NewWrapper
       footerComponent={
         <BoxButtonOnFooter>
           <ButtonCustom
@@ -134,6 +133,6 @@ export default function DonationAddNews() {
 
         <Spacing />
       </StackCustom>
-    </OS_Wrapper>
+    </NewWrapper>
   );
 }

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

@@ -6,10 +6,10 @@ import {
   ButtonCustom,
   Grid,
   InformationBox,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
 import CopyButton from "@/components/Button/CoyButton";
 import { MainColor } from "@/constants/color-palet";
@@ -101,7 +101,8 @@ export default function DonationInvoice() {
 
   return (
     <>
-      <OS_Wrapper
+      <ViewWrapper
+        hideFooter
         footerComponent={
           <BoxButtonOnFooter>
             <ButtonCustom
@@ -221,7 +222,7 @@ export default function DonationInvoice() {
           </BaseBox>
         </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,9 +3,9 @@ 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";
@@ -64,7 +64,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 +98,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,10 +4,9 @@ import {
   DotButton,
   DrawerCustom,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
+  NewWrapper,
   Spacing,
 } 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";
@@ -98,22 +97,17 @@ export default function DonasiDetailStatus() {
     <>
       <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
+      <NewWrapper
         refreshControl={
           <RefreshControl
             refreshing={refreshing}
@@ -156,7 +150,7 @@ export default function DonasiDetailStatus() {
             <Spacing />
           </>
         )}
-      </OS_Wrapper>
+      </NewWrapper>
 
       <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

@@ -6,11 +6,12 @@ import {
   InformationBox,
   LandscapeFrameUploaded,
   LoaderCustom,
-  OS_Wrapper,
+  NewWrapper,
   SelectCustom,
   Spacing,
   StackCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
 import API_IMAGE from "@/constants/api-storage";
@@ -183,9 +184,8 @@ export default function DonationEdit() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
+    <NewWrapper
+      hideFooter
       footerComponent={
         <BoxButtonOnFooter>
           <ButtonCustom
@@ -279,6 +279,6 @@ export default function DonationEdit() {
         </StackCustom>
       )}
       <Spacing />
-    </OS_Wrapper>
+    </NewWrapper>
   );
 }

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

@@ -6,10 +6,10 @@ import {
   DotButton,
   DrawerCustom,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
+  NewWrapper,
   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";
@@ -90,20 +90,15 @@ 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}>
+      <NewWrapper footerComponent={buttonSection}>
         {!data ? (
           <CustomSkeleton height={400} />
         ) : (
@@ -126,7 +121,7 @@ export default function DonasiDetailBeranda() {
             />
           </StackCustom>
         )}
-      </OS_Wrapper>
+      </NewWrapper>
 
       <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/create-story.tsx

@@ -10,7 +10,7 @@ import {
   TextAreaCustom,
   TextInputCustom,
 } from "@/components";
-import OS_Wrapper from "@/components/_ShareComponent/OS_Wrapper";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { useAuth } from "@/hooks/use-auth";
 import {
@@ -113,9 +113,8 @@ export default function DonationCreateStory() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
+    <NewWrapper
+      hideFooter
       footerComponent={
         <>
          <BoxButtonOnFooter>
@@ -186,6 +185,6 @@ export default function DonationCreateStory() {
         />
       </StackCustom>
       <Spacing />
-    </OS_Wrapper>
+    </NewWrapper>
   );
 }

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

@@ -5,12 +5,12 @@ import {
   InformationBox,
   LandscapeFrameUploaded,
   LoaderCustom,
-  OS_Wrapper,
   SelectCustom,
   Spacing,
   StackCustom,
   TextInputCustom,
 } from "@/components";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { apiDonationCreate } from "@/service/api-client/api-donation";
 import { apiMasterDonation } from "@/service/api-client/api-master";
@@ -126,9 +126,8 @@ export default function DonationCreate() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
+    <NewWrapper
+      hideFooter
       footerComponent={
         <>
           <BoxButtonOnFooter>
@@ -222,6 +221,6 @@ export default function DonationCreate() {
         )}
       </StackCustom>
       <Spacing />
-    </OS_Wrapper>
+    </NewWrapper>
   );
 }

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

@@ -4,87 +4,64 @@ 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";
+import { router, Tabs, useLocalSearchParams, useNavigation } from "expo-router";
+import { useLayoutEffect } from "react";
+
+export default function EventTabsLayout() {
+  const navigation = useNavigation();
 
-function EventTabsWrapper() {
-  const insets = useSafeAreaInsets();
-  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
   const { from, category } = useLocalSearchParams<{
     from?: string;
     category?: string;
   }>();
 
+  console.log("from", from);
+  console.log("category", category);
+
+  // Atur header secara dinamis
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerLeft: () => (
+        <BackButtonFromNotification
+          from={from as string}
+          category={category as string}
+        />
+      ),
+    });
+  }, [from, 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,
-            },
-          }),
-          header: () => (
-            <AppHeader
-              title="Event"
-              left={
-                <BackButtonFromNotification
-                  from={from || ""}
-                  category={category}
-                />
-              }
-            />
-          ),
+    <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: "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>
+      />
+      <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>
   );
 }
-
-export default function EventTabsLayout() {
-  return <EventTabsWrapper />;
-}

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,11 +5,10 @@ import {
   ButtonCustom,
   CenterCustom,
   LoaderCustom,
-  OS_Wrapper,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
 import {
@@ -266,22 +265,18 @@ 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("/")}
             />
           ),
         }}
       />
-      <OS_Wrapper>{handlerReturn()}</OS_Wrapper>
+      <ViewWrapper>{handlerReturn()}</ViewWrapper>
     </>
   );
 }

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

@@ -3,13 +3,14 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   LoaderCustom,
-  OS_Wrapper,
+  NewWrapper,
   SelectCustom,
   Spacing,
   StackCustom,
   TextAreaCustom,
   TextCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
 import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
@@ -185,9 +186,7 @@ export default function EventEdit() {
 
   return (
     <>
-      <OS_Wrapper
-        enableKeyboardHandling
-        contentPaddingBottom={250}
+      <NewWrapper
         footerComponent={
           <BoxButtonOnFooter>
             <ButtonCustom
@@ -284,7 +283,7 @@ export default function EventEdit() {
             />
           </StackCustom>
         )}
-      </OS_Wrapper>
+      </NewWrapper>
     </>
   );
 }

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,19 +44,15 @@ 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)}

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

@@ -6,9 +6,8 @@ import {
   DotButton,
   DrawerCustom,
   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";
@@ -122,9 +121,9 @@ export default function EventDetailPublish() {
 
   if (isEventFinished) {
     return (
-      <OS_Wrapper>
+      <ViewWrapper>
         <CustomSkeleton />
-      </OS_Wrapper>
+      </ViewWrapper>
     );
   }
 
@@ -157,16 +156,12 @@ 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: () => <BackButton onPress={() => router.back()} />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
         }}
       />
-      <OS_Wrapper>
+      <ViewWrapper>
         {isLoadingData ? (
           <CustomSkeleton height={400} />
         ) : (
@@ -175,7 +170,7 @@ export default function EventDetailPublish() {
             footerButton={FooterButton()}
           />
         )}
-      </OS_Wrapper>
+      </ViewWrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

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

@@ -1,7 +1,7 @@
 import {
   BoxButtonOnFooter,
   ButtonCustom,
-  OS_Wrapper,
+  NewWrapper,
   SelectCustom,
   Spacing,
   StackCustom,
@@ -112,9 +112,7 @@ export default function EventCreate() {
 
   return (
     <>
-      <OS_Wrapper
-        enableKeyboardHandling
-        contentPaddingBottom={250}
+      <NewWrapper
         footerComponent={<BoxButtonOnFooter>{buttonSubmit}</BoxButtonOnFooter>}
       >
         <StackCustom gap={"xs"}>
@@ -184,7 +182,7 @@ export default function EventCreate() {
             />
           </StackCustom>
         </StackCustom>
-      </OS_Wrapper>
+      </NewWrapper>
     </>
   );
 }

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]/other-report-commentar.tsx

@@ -1,8 +1,8 @@
 import {
   BoxButtonOnFooter,
   ButtonCustom,
-  OS_Wrapper,
   TextAreaCustom,
+  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
@@ -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,8 +1,8 @@
 import {
   BoxButtonOnFooter,
   ButtonCustom,
-  OS_Wrapper,
   TextAreaCustom,
+  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
@@ -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,6 +1,6 @@
 import {
   BaseBox,
-  OS_Wrapper,
+  NewWrapper,
   Spacing,
   StackCustom,
   TextCustom,
@@ -41,7 +41,7 @@ export default function ForumPreviewReportComment() {
 
   return (
     <>
-      <OS_Wrapper>
+      <NewWrapper>
         <StackCustom>
           <TextCustom color="red" bold>
             Komentar anda telah melanggar aturan forum ! Admin mengambil
@@ -85,7 +85,7 @@ export default function ForumPreviewReportComment() {
               </BaseBox>
           ))
         )}
-      </OS_Wrapper>
+      </NewWrapper>
     </>
   );
 }

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

@@ -1,6 +1,6 @@
 import {
   BaseBox,
-  OS_Wrapper,
+  NewWrapper,
   Spacing,
   StackCustom,
   TextCustom,
@@ -41,7 +41,7 @@ export default function ForumPreviewReportPosting() {
 
   return (
     <>
-      <OS_Wrapper>
+      <NewWrapper>
         <StackCustom>
           <TextCustom color="red" bold>
             Postingan anda telah melanggar aturan forum ! Admin mengambil
@@ -85,7 +85,7 @@ export default function ForumPreviewReportPosting() {
             </BaseBox>
           ))
         )}
-      </OS_Wrapper>
+      </NewWrapper>
     </>
   );
 }

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

@@ -1,9 +1,9 @@
 import {
   ButtonCustom,
   LoaderCustom,
-  OS_Wrapper,
   Spacing,
   StackCustom,
+  ViewWrapper,
 } from "@/components";
 import { AccentColor, MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
@@ -69,7 +69,7 @@ export default function ForumReportCommentar() {
 
   return (
     <>
-      <OS_Wrapper>
+      <ViewWrapper>
         {isLoadingList ? (
           <LoaderCustom />
         ) : (
@@ -101,7 +101,7 @@ export default function ForumReportCommentar() {
             <Spacing />
           </StackCustom>
         )}
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

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

@@ -2,9 +2,9 @@ import {
   AlertDefaultSystem,
   ButtonCustom,
   LoaderCustom,
-  OS_Wrapper,
   Spacing,
   StackCustom,
+  ViewWrapper,
 } from "@/components";
 import { AccentColor, MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
@@ -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,8 +1,8 @@
 import {
   BoxButtonOnFooter,
   ButtonCustom,
-  OS_Wrapper,
   TextAreaCustom,
+  ViewWrapper,
 } from "@/components";
 import AlertWarning from "@/components/Alert/AlertWarning";
 import { useAuth } from "@/hooks/use-auth";
@@ -67,11 +67,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 +75,6 @@ export default function ForumCreate() {
         value={text}
         onChangeText={setText}
       />
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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,27 +1,25 @@
 /* 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 { BasicWrapper, StackCustom, ViewWrapper } from "@/components";
 import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 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 { GStyles } from "@/styles/global-styles";
 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 { RefreshControl, View } from "react-native";
 
 export default function Application() {
   const { token, user, userData } = useAuth();
@@ -29,8 +27,6 @@ export default function Application() {
   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;
 
   useFocusEffect(
     useCallback(() => {
@@ -108,95 +104,98 @@ export default function Application() {
     );
   }
 
+  // if (data && data?.masterUserRoleId !== "1") {
+  //   console.log("User is not admin");
+  //   return (
+  //     <BasicWrapper>
+  //       <Redirect href={`/admin/dashboard`} />
+  //     </BasicWrapper>
+  //   );
+  // }
+
   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: () =>
+            data ? (
+              <Ionicons
+                name="search"
+                size={20}
+                color={MainColor.yellow}
+                onPress={() => {
+                  router.push("/user-search");
+                }}
+              />
+            ) : (
+              <CustomSkeleton height={30} width={30} radius={100} />
+            ),
+          headerRight: () =>
+            data ? (
+              <HeaderBell />
+            ) : (
+              <CustomSkeleton height={30} width={30} radius={100} />
+            ),
         }}
       />
-
-      <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]}
+      <ViewWrapper
+        refreshControl={
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            tintColor={MainColor.yellow}
+            colors={[MainColor.yellow]}
+          />
+        }
+        footerComponent={
+          data && data ? (
+            <TabSection
+              tabs={tabsHome({
+                acceptedForumTermsAt: data?.acceptedForumTermsAt,
+                profileId: data?.Profile?.id,
+              })}
             />
-          }
-          keyboardShouldPersistTaps="handled"
-        >
-          <StackCustom>
-            <Home_ImageSection />
-
-            {data && data ? (
-              <Home_FeatureSection />
-            ) : (
-              <View style={stylesHome.gridContainer}>
-                {Array.from({ length: 4 }).map((_, index) => (
+          ) : (
+            <View style={GStyles.tabBar}>
+              <View style={[GStyles.tabContainer, { paddingTop: 10 }]}>
+                {Array.from({ length: 4 }).map((e, index) => (
                   <CustomSkeleton
                     key={index}
-                    style={stylesHome.gridItem}
-                    radius={50}
+                    height={40}
+                    width={40}
+                    radius={100}
                   />
                 ))}
               </View>
-            )}
+            </View>
+          )
+        }
+      >
+        <StackCustom>
+          <Home_ImageSection />
 
-            {data ? (
-              <Home_BottomFeatureSection listData={listData} />
-            ) : (
-              <CustomSkeleton height={150} />
-            )}
-          </StackCustom>
-        </ScrollView>
+          {data && data ? (
+            <Home_FeatureSection />
+          ) : (
+            <View style={stylesHome.gridContainer}>
+              {Array.from({ length: 4 }).map((item, index) => (
+                <CustomSkeleton
+                  key={index}
+                  style={stylesHome.gridItem}
+                  radius={50}
+                />
+              ))}
+            </View>
+          )}
 
-        {/* Home Tabs di bawah */}
-        {data && data ? (
-          <HomeTabs
-            tabs={tabsHome({
-              acceptedForumTermsAt: data?.acceptedForumTermsAt,
-              profileId: data?.Profile?.id,
-            })}
-          />
-        ) : (
-          <View style={{ height: 80 + paddingBottom, backgroundColor: MainColor.darkblue }} />
-        )}
-      </View>
+          {data ? (
+            <Home_BottomFeatureSection listData={listData} />
+          ) : (
+            <CustomSkeleton height={200} />
+          )}
+        </StackCustom>
+      </ViewWrapper>
     </>
   );
 }

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

@@ -1,108 +1,83 @@
 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>
-  );
-}
 
 export default function InvestmentTabsLayout() {
-  return <InvestmentTabsWrapper />;
+  // const navigation = useNavigation();
+
+  // const { from, category } = useLocalSearchParams<{
+  //   from?: string;
+  //   category?: string;
+  // }>();
+
+  // console.log("from", from);
+  // console.log("category", category);
+
+  // // Atur header secara dinamis
+  // useLayoutEffect(() => {
+  //   navigation.setOptions({
+  //     headerLeft: () => (
+  //       <BackButtonFromNotification
+  //         from={from as string}
+  //         category={category as string}
+  //       />
+  //     ),
+  //   });
+  // }, [from, router, navigation]);
+
+  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/[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]/(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} />
@@ -126,6 +123,7 @@ export default function InvestmentAddNews() {
           Simpan
         </ButtonCustom>
       </StackCustom>
-    </OS_Wrapper>
+      <Spacing />
+    </ViewWrapper>
   );
 }

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)/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";
@@ -86,7 +86,7 @@ export default function InvestmentSelectBank() {
   };
 
   return (
-    <OS_Wrapper footerComponent={buttonSubmit()}>
+    <ViewWrapper footerComponent={buttonSubmit()}>
       <RadioGroup value={select} onChange={setSelect}>
         {_.isEmpty(listBank)
           ? []
@@ -96,6 +96,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";
@@ -107,30 +106,25 @@ export default function InvestmentDetailStatus() {
     <>
       <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

@@ -6,7 +6,7 @@ import {
   InformationBox,
   LandscapeFrameUploaded,
   LoaderCustom,
-  OS_Wrapper,
+  NewWrapper,
   SelectCustom,
   Spacing,
   StackCustom,
@@ -199,9 +199,7 @@ export default function InvestmentEdit() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
+    <NewWrapper
       footerComponent={
         <BoxButtonOnFooter>
           <ButtonCustom isLoading={isLoading} onPress={handleSubmitUpdate}>
@@ -352,6 +350,6 @@ export default function InvestmentEdit() {
 
         <Spacing />
       </StackCustom>
-    </OS_Wrapper>
+    </NewWrapper>
   );
 }

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";
@@ -106,30 +105,25 @@ export default function InvestmentDetail() {
     <>
       <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/create.tsx

@@ -6,7 +6,7 @@ import {
   CenterCustom,
   InformationBox,
   LandscapeFrameUploaded,
-  OS_Wrapper,
+  NewWrapper,
   SelectCustom,
   Spacing,
   StackCustom,
@@ -118,21 +118,6 @@ export default function InvestmentCreate() {
 
     try {
       setIsLoading(true);
-
-      const responseUploadPdf = await uploadFileService({
-        imageUri: pdf.uri,
-        dirId: DIRECTORY_ID.investasi_prospektus,
-      });
-
-      if (!responseUploadPdf.success) {
-        Toast.show({
-          type: "error",
-          text1: "Gagal mengunggah file PDF",
-        });
-        return;
-      }
-      const pdfId = responseUploadPdf.data.id;
-
       const responseUploadImage = await uploadFileService({
         imageUri: image,
         dirId: DIRECTORY_ID.investasi_image,
@@ -145,8 +130,22 @@ export default function InvestmentCreate() {
         });
         return;
       }
-      const imageId = responseUploadImage.data.id;
 
+      const imageId = responseUploadImage.data.id;
+      const responseUploadPdf = await uploadFileService({
+        imageUri: pdf.uri,
+        dirId: DIRECTORY_ID.investasi_prospektus,
+      });
+
+      if (!responseUploadPdf.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengunggah file PDF",
+        });
+        return;
+      }
+
+      const pdfId = responseUploadPdf.data.id;
       const newData = {
         title: data.title,
         targetDana: data.targetDana,
@@ -186,9 +185,7 @@ export default function InvestmentCreate() {
 
   //   const [coba, setCoba] = useState("");
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
+    <NewWrapper
       footerComponent={
         <BoxButtonOnFooter>
           <ButtonCustom
@@ -376,6 +373,7 @@ export default function InvestmentCreate() {
 
         <Spacing />
       </StackCustom>
-    </OS_Wrapper>
+      {/* <Spacing height={50} /> */}
+    </NewWrapper>
   );
 }

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

@@ -1,60 +1,37 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { BackButton } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconHome, IconStatus } from "@/components/_Icon";
 import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
 import { TabsStyles } from "@/styles/tabs-styles";
 import { Ionicons } from "@expo/vector-icons";
-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_ANDROID_PADDING_TOP,
-  OS_IOS_HEIGHT,
-  OS_IOS_PADDING_TOP,
-} from "@/constants/constans-value";
+  router,
+  Tabs,
+  useLocalSearchParams,
+  useNavigation
+} from "expo-router";
+import { useLayoutEffect } from "react";
+
+export default function JobTabsLayout() {
+  const navigation = useNavigation();
 
-function JobTabsWrapper() {
-  const insets = useSafeAreaInsets();
-  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
   const { from, category } = useLocalSearchParams<{
     from?: string;
     category?: string;
   }>();
 
+  // Atur header secara dinamis
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerLeft: () => (
+       <BackButtonFromNotification from={from as string} category={category as string} />
+      ),
+    });
+  }, [from, router, navigation]);
+
   return (
-    <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
-      <Tabs
-        screenOptions={{
-          ...TabsStyles,
-          tabBarStyle: Platform.select({
-            ios: {
-              borderTopWidth: 0,
-              paddingTop: OS_IOS_PADDING_TOP,
-              height: OS_IOS_HEIGHT,
-            },
-            android: {
-              borderTopWidth: 0,
-              paddingTop: OS_ANDROID_PADDING_TOP,
-              height: OS_ANDROID_HEIGHT + paddingBottom,
-            },
-          }),
-          header: () => (
-            <AppHeader
-              title="Job Vacancy"
-              left={
-                <BackButtonFromNotification
-                  from={from || ""}
-                  category={category}
-                />
-              }
-            />
-          ),
-        }}
-      >
+    <>
+      <Tabs screenOptions={TabsStyles}>
         <Tabs.Screen
           name="index"
           options={{
@@ -79,10 +56,6 @@ function JobTabsWrapper() {
           }}
         />
       </Tabs>
-    </View>
+    </>
   );
 }
-
-export default function JobTabsLayout() {
-  return <JobTabsWrapper />;
-}

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

@@ -5,11 +5,10 @@ import {
   DrawerCustom,
   LoaderCustom,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
   Spacing,
   StackCustom,
+  ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconEdit } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import ReportBox from "@/components/Box/ReportBox";
@@ -23,7 +22,6 @@ import {
   useLocalSearchParams,
 } from "expo-router";
 import { useCallback, useState } from "react";
-import { PADDING_INLINE } from "@/constants/constans-value";
 
 export default function JobDetailStatus() {
   const { id, status } = useLocalSearchParams();
@@ -60,20 +58,15 @@ export default function JobDetailStatus() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Detail"
-              left={<BackButton />}
-              right={
-                status === "draft" ? (
-                  <DotButton onPress={() => setOpenDrawer(true)} />
-                ) : null
-              }
-            />
-          ),
+          title: `Detail`,
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            status === "draft" ? (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ) : null,
         }}
       />
-      <OS_Wrapper >
+      <ViewWrapper>
         {isLoadData ? (
           <LoaderCustom />
         ) : (
@@ -84,7 +77,7 @@ export default function JobDetailStatus() {
                 (status === "draft" || status === "reject") && (
                   <ReportBox text={data?.catatan} />
                 )}
-
+                
               <Job_BoxDetailSection data={data} />
               <Job_ButtonStatusSection
                 id={id as string}
@@ -97,7 +90,7 @@ export default function JobDetailStatus() {
             <Spacing />
           </>
         )}
-      </OS_Wrapper>
+      </ViewWrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

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

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

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

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

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

@@ -1,5 +1,365 @@
-import { ScreenPortofolioCreate } from "@/screens/Portofolio/ScreenPortofolioCreate";
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  ActionIcon,
+  AvatarComp,
+  BaseBox,
+  ButtonCenteredOnly,
+  CenterCustom,
+  Grid,
+  InformationBox,
+  NewWrapper,
+  SelectCustom,
+  Spacing,
+  StackCustom,
+  TextAreaCustom,
+  TextCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconPlus } from "@/components/_Icon";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import Portofolio_ButtonCreate from "@/screens/Portofolio/ButtonCreatePortofolio";
+import {
+  apiMasterBidangBisnis,
+  apiMasterSubBidangBisnis,
+} from "@/service/api-client/api-master";
+import {
+  IMasterBidangBisnis,
+  IMasterSubBidangBisnis,
+} from "@/types/Type-Master";
+import pickImage from "@/utils/pickImage";
+import { Ionicons } from "@expo/vector-icons";
+import { Image } from "expo-image";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useEffect, useState } from "react";
+import { Text, TouchableOpacity, View } from "react-native";
+import PhoneInput, { ICountry } from "react-native-international-phone-number";
+import { Avatar } from "react-native-paper";
 
 export default function PortofolioCreate() {
-  return <ScreenPortofolioCreate />;
+  const { id } = useLocalSearchParams();
+  const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
+  const [inputValue, setInputValue] = useState<string>("");
+  const [data, setData] = useState({
+    namaBisnis: "",
+    masterBidangBisnisId: "",
+    alamatKantor: "",
+    tlpn: "",
+    deskripsi: "",
+  });
+  const [imageUri, setImageUri] = useState<string | null>(null);
+
+  const [bidangBisnis, setBidangBisnis] = useState<IMasterBidangBisnis[]>([]);
+  const [subBidangBisnis, setSubBidangBisnis] = useState<
+    IMasterSubBidangBisnis[]
+  >([]);
+
+  const [selectedSubBidang, setSelectedSubBidang] = useState<string[]>([]);
+  const [listSubBidangSelected, setListSubBidangSelected] = useState([
+    {
+      id: "",
+    },
+  ]);
+
+  const [dataMedsos, setDataMedsos] = useState({
+    facebook: "",
+    twitter: "",
+    instagram: "",
+    youtube: "",
+    tiktok: "",
+  });
+
+  const [isLoadingCreate, setIsLoadingCreate] = useState(false);
+
+  function handleInputValue(phoneNumber: string) {
+    setInputValue(phoneNumber);
+    const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
+    let fixNumber = inputValue.replace(/\s+/g, "").replace(/^0+/, "");
+    const realNumber = callingCode + fixNumber;
+    setData({ ...data, tlpn: realNumber });
+  }
+
+  function handleSelectedCountry(country: ICountry) {
+    setSelectedCountry(country);
+  }
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadMaster();
+      onLoadMasterSubBidangBisnis();
+    }, [])
+  );
+
+  const onLoadMaster = async () => {
+    try {
+      const response = await apiMasterBidangBisnis();
+      setBidangBisnis(response.data);
+    } catch (error) {
+      setBidangBisnis([]);
+      console.log("Error onLoadMasterBidangBisnis", error);
+    }
+  };
+
+  const onLoadMasterSubBidangBisnis = async () => {
+    try {
+      const response = await apiMasterSubBidangBisnis({});
+      setSubBidangBisnis(response.data);
+    } catch (error) {
+      setSubBidangBisnis([]);
+      console.log("Error onLoadMasterBidangBisnis", error);
+    }
+  };
+
+  const handlerSelectedSubBidang = ({ id }: { id: string }) => {
+    const selectedList = subBidangBisnis?.filter(
+      (item) => (item?.masterBidangBisnisId as any) === id
+    );
+    setSelectedSubBidang(selectedList as any[]);
+  };
+
+  return (
+    <NewWrapper
+      footerComponent={
+        <Portofolio_ButtonCreate
+          id={id as string}
+          data={data}
+          dataMedsos={dataMedsos}
+          imageUri={imageUri}
+          subBidangSelected={listSubBidangSelected}
+          isLoadingCreate={isLoadingCreate}
+          setIsLoadingCreate={setIsLoadingCreate}
+        />
+      }
+    >
+      {/* <TextCustom>Portofolio Create {id}</TextCustom> */}
+      <StackCustom gap={"xs"}>
+        <InformationBox text="Lengkapi data bisnis anda." />
+        <TextInputCustom
+          required
+          label="Nama Bisnis"
+          placeholder="Masukkan nama bisnis"
+          onChangeText={(value: any) => setData({ ...data, namaBisnis: value })}
+        />
+
+        <SelectCustom
+          label="Bidang Usaha"
+          required
+          data={bidangBisnis.map((item) => ({
+            label: item.name,
+            value: item.id,
+          }))}
+          value={data.masterBidangBisnisId}
+          onChange={(value) => {
+            const isSameBidang = data.masterBidangBisnisId === value;
+
+            if (!isSameBidang) {
+              setListSubBidangSelected([{ id: "" }]);
+            }
+
+            setData({ ...(data as any), masterBidangBisnisId: value });
+            handlerSelectedSubBidang({ id: value as string });
+          }}
+        />
+
+        {listSubBidangSelected.map((item, index) => (
+          <SelectCustom
+            key={index}
+            disabled={data.masterBidangBisnisId === ""}
+            label="Sub Bidang Usaha"
+            required
+            data={_.map(selectedSubBidang as any)
+              .filter((option: any) => {
+                const selectedValues = listSubBidangSelected.map((s) => s.id);
+                return (
+                  option.id === item.id || // biarkan tetap muncul kalau ini valuenya sendiri
+                  !selectedValues.includes(option.id)
+                );
+              })
+              .map((e: any) => ({
+                value: e.id,
+                label: e.name,
+              }))}
+            value={item.id || null}
+            onChange={(value) => {
+              const list = _.clone(listSubBidangSelected);
+              list[index].id = value as any;
+              setListSubBidangSelected(list);
+            }}
+          />
+        ))}
+
+        <CenterCustom>
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+            <ActionIcon
+              disabled={
+                selectedSubBidang.length === listSubBidangSelected.length
+              }
+              onPress={() => {
+                setListSubBidangSelected([
+                  ...listSubBidangSelected,
+                  { id: "" },
+                ]);
+              }}
+              icon={
+                <Ionicons
+                  name="add-circle-outline"
+                  size={ICON_SIZE_XLARGE}
+                  color={MainColor.black}
+                />
+              }
+              size="xl"
+            />
+            <ActionIcon
+              disabled={listSubBidangSelected.length <= 1}
+              onPress={() => {
+                const list = _.clone(listSubBidangSelected);
+                list.pop();
+                setListSubBidangSelected(list);
+              }}
+              icon={
+                <Ionicons
+                  name="remove-circle-outline"
+                  size={ICON_SIZE_XLARGE}
+                  color={MainColor.black}
+                />
+              }
+              size="xl"
+            />
+          </View>
+        </CenterCustom>
+        <Spacing />
+
+        {/* <SelectCustom
+          label="Bidang Usaha"
+          required
+          data={bidangBisnis.map((item) => ({
+            label: item.name,
+            value: item.id,
+          }))}
+          value={null}
+          onChange={(value) => {
+            setData({ ...(data as any), masterBidangBisnisId: value });
+            handlerSelectedSubBidang({ id: value as string });
+          }}
+        /> */}
+
+        {/* <ButtonCenteredOnly
+          onPress={() => {
+            setListSubBidangSelected([...listSubBidangSelected, { id: "" }]);
+          }}
+        >
+          Tambah Pilihan
+        </ButtonCenteredOnly>
+        <Spacing /> */}
+
+        {/* <TextCustom>{JSON.stringify(bidangBisnis, null, 2)}</TextCustom> */}
+
+        <View>
+          <View style={{ flexDirection: "row", alignItems: "center" }}>
+            <TextCustom semiBold style={{ color: MainColor.white_gray }}>
+              Nomor Telepon
+            </TextCustom>
+            <Text style={{ color: "red" }}> *</Text>
+          </View>
+          <Spacing height={5} />
+          <PhoneInput
+            value={inputValue}
+            onChangePhoneNumber={handleInputValue}
+            selectedCountry={selectedCountry}
+            onChangeSelectedCountry={handleSelectedCountry}
+            defaultCountry="ID"
+            placeholder="xxx-xxx-xxx"
+          />
+        </View>
+        <Spacing />
+
+        <TextInputCustom
+          required
+          label="Alamat Bisnis"
+          placeholder="Masukkan alamat bisnis"
+          onChangeText={(value: any) =>
+            setData({ ...data, alamatKantor: value })
+          }
+        />
+
+        <TextAreaCustom
+          label="Deskripsi Bisnis"
+          placeholder="Masukkan deskripsi bisnis"
+          value={data.deskripsi}
+          onChangeText={(value: any) => setData({ ...data, deskripsi: value })}
+          autosize
+          minRows={2}
+          maxRows={5}
+          required
+          showCount
+          maxLength={1000}
+        />
+        <Spacing />
+
+        {/* Logo */}
+        <InformationBox text="Upload logo bisnis anda untuk di tampilaka pada portofolio." />
+
+        <CenterCustom>
+          <Avatar.Image
+            source={imageUri ? { uri: imageUri } : DUMMY_IMAGE.dummy_image}
+            size={200}
+          />
+        </CenterCustom>
+        <Spacing />
+        <ButtonCenteredOnly
+          icon="upload"
+          onPress={() => {
+            pickImage({
+              setImageUri,
+            });
+          }}
+        >
+          Upload
+        </ButtonCenteredOnly>
+        <Spacing height={40} />
+
+        {/* Social Media */}
+        <InformationBox text="Isi hanya pada sosial media yang anda miliki." />
+        <TextInputCustom
+          label="Tiktok"
+          placeholder="Masukkan username tiktok"
+          onChangeText={(value: any) =>
+            setDataMedsos({ ...dataMedsos, tiktok: value })
+          }
+        />
+        <TextInputCustom
+          label="Facebook"
+          placeholder="Masukkan username facebook"
+          onChangeText={(value: any) =>
+            setDataMedsos({ ...dataMedsos, facebook: value })
+          }
+        />
+        <TextInputCustom
+          label="Instagram"
+          placeholder="Masukkan username instagram"
+          onChangeText={(value: any) =>
+            setDataMedsos({ ...dataMedsos, instagram: value })
+          }
+        />
+        <TextInputCustom
+          label="Twitter"
+          placeholder="Masukkan username twitter"
+          onChangeText={(value: any) =>
+            setDataMedsos({ ...dataMedsos, twitter: value })
+          }
+        />
+        <TextInputCustom
+          label="Youtube"
+          placeholder="Masukkan username youtube"
+          onChangeText={(value: any) =>
+            setDataMedsos({ ...dataMedsos, youtube: value })
+          }
+        />
+        {/* <Spacing /> */}
+      </StackCustom>
+    </NewWrapper>
+  );
 }

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

@@ -3,7 +3,7 @@ import {
     BoxButtonOnFooter,
     ButtonCenteredOnly,
     ButtonCustom,
-    OS_Wrapper
+    ViewWrapper
 } from "@/components";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -126,7 +126,7 @@ export default function PortofolioEditLogo() {
 
   return (
     <>
-      <OS_Wrapper footerComponent={buttonFooter}>
+      <ViewWrapper footerComponent={buttonFooter}>
         <BaseBox
           style={{
             alignItems: "center",
@@ -146,7 +146,7 @@ export default function PortofolioEditLogo() {
         >
           Upload
         </ButtonCenteredOnly>
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

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

@@ -1,8 +1,8 @@
 import {
   BoxButtonOnFooter,
   ButtonCustom,
-  OS_Wrapper,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import {
   apiGetOnePortofolio,
@@ -91,11 +91,7 @@ export default function PortofolioEditSocialMedia() {
 
   return (
     <>
-      <OS_Wrapper
-        enableKeyboardHandling
-        contentPaddingBottom={250}
-        footerComponent={buttonFooter}
-      >
+      <ViewWrapper footerComponent={buttonFooter}>
         <TextInputCustom
           value={data.tiktok}
           onChangeText={(value) => setData({ ...data, tiktok: value })}
@@ -126,7 +122,7 @@ export default function PortofolioEditSocialMedia() {
           label="Youtube"
           placeholder="Masukkan youtube"
         />
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

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

@@ -4,8 +4,7 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   CenterCustom,
-  OS_Wrapper,
-  PhoneInputCustom,
+  NewWrapper,
   SelectCustom,
   Spacing,
   StackCustom,
@@ -16,11 +15,6 @@ import {
 import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
-import {
-  DEFAULT_COUNTRY,
-  type CountryData,
-  COUNTRIES,
-} from "@/constants/countries";
 import {
   apiMasterBidangBisnis,
   apiMasterSubBidangBisnis,
@@ -38,6 +32,7 @@ import { router, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
 import { useEffect, useState } from "react";
 import { Text, View } from "react-native";
+import PhoneInput, { ICountry } from "react-native-international-phone-number";
 import { ActivityIndicator } from "react-native-paper";
 import Toast from "react-native-toast-message";
 
@@ -64,9 +59,8 @@ export default function PortofolioEdit() {
   const { id } = useLocalSearchParams();
   const [isLoading, setIsLoading] = useState(false);
   const [data, setData] = useState<any>({});
-  const [phoneNumber, setPhoneNumber] = useState<string>("");
-  const [selectedCountry, setSelectedCountry] =
-    useState<CountryData>(DEFAULT_COUNTRY);
+
+  const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
   const [bidangBisnis, setBidangBisnis] = useState<
     IMasterBidangBisnis[] | null
   >(null);
@@ -78,42 +72,12 @@ export default function PortofolioEdit() {
     IListSubBidangSelected[]
   >([]);
 
-  function handlePhoneChange(phone: string) {
-    setPhoneNumber(phone);
-
-    // Format phone number for API
-    const callingCode = selectedCountry.callingCode;
-    let fixNumber = phone.replace(/\s+/g, "").replace(/^0+/, "");
-
-    // Remove country code if already present
-    if (fixNumber.startsWith(callingCode)) {
-      fixNumber = fixNumber.substring(callingCode.length);
-    }
-
-    // Remove leading zero
-    fixNumber = fixNumber.replace(/^0+/, "");
-
-    const realNumber = callingCode + fixNumber;
-    setData({ ...data, tlpn: realNumber });
+  function handleInputValue(phoneNumber: string) {
+    setData({ ...data, tlpn: phoneNumber });
   }
 
-  function handleCountryChange(country: CountryData) {
+  function handleSelectedCountry(country: ICountry) {
     setSelectedCountry(country);
-
-    // Re-format with new country code
-    const callingCode = country.callingCode;
-    let fixNumber = phoneNumber.replace(/\s+/g, "").replace(/^0+/, "");
-
-    // Remove country code if already present
-    if (fixNumber.startsWith(callingCode)) {
-      fixNumber = fixNumber.substring(callingCode.length);
-    }
-
-    // Remove leading zero
-    fixNumber = fixNumber.replace(/^0+/, "");
-
-    const realNumber = callingCode + fixNumber;
-    setData({ ...data, tlpn: realNumber });
   }
 
   const onLoadMasterBidang = async () => {
@@ -158,27 +122,8 @@ export default function PortofolioEdit() {
     const response = await apiGetOnePortofolio({ id: id });
 
     if (response.success) {
-      // Extract phone number without country code for display
-      const fullNumber = response.data.tlpn;
-      let displayNumber = fullNumber;
-      let detectedCountry = DEFAULT_COUNTRY;
-
-      // Try to detect country from calling code
-      for (const country of COUNTRIES) {
-        if (fullNumber.startsWith(country.callingCode)) {
-          detectedCountry = country;
-          displayNumber = fullNumber.substring(country.callingCode.length);
-          break;
-        }
-      }
-
-      setSelectedCountry(detectedCountry);
-
-      // Remove leading zero if present
-      displayNumber = displayNumber.replace(/^0+/, "");
-
-      setPhoneNumber(displayNumber);
-      setData({ ...response.data, tlpn: displayNumber });
+      const fixNumber = response.data.tlpn.replace("62", "");
+      setData({ ...response.data, tlpn: fixNumber });
 
       // Cek apakah ada sub bidang bisnis yang terpilih
       const prevSubBidang = response.data.Portofolio_BidangDanSubBidangBisnis;
@@ -299,11 +244,15 @@ export default function PortofolioEdit() {
   }
 
   const handleSubmitUpdate = async () => {
+    const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
+    let fixNumber = data.tlpn.replace(/\s+/g, "").replace(/^0+/, "");
+    const realNumber = callingCode + fixNumber;
+
     const newData: IFormData = {
       id_Portofolio: data.id_Portofolio,
       namaBisnis: data.namaBisnis,
       alamatKantor: data.alamatKantor,
-      tlpn: data.tlpn, // Already formatted by PhoneInputCustom
+      tlpn: realNumber,
       deskripsi: data.deskripsi,
       masterBidangBisnisId: data.masterBidangBisnisId,
       subBidang: listSubBidangSelected,
@@ -368,159 +317,162 @@ export default function PortofolioEdit() {
     </BoxButtonOnFooter>
   );
 
+  if (!bidangBisnis || !subBidangBisnis) {
+    return (
+      <>
+        <NewWrapper>
+          <ListSkeletonComponent height={80} />
+        </NewWrapper>
+      </>
+    );
+  }
+
   return (
     <>
-      <OS_Wrapper
-        enableKeyboardHandling
-        contentPaddingBottom={250}
-        footerComponent={buttonUpdate}
-      >
-        {!bidangBisnis || !subBidangBisnis ? (
-          <ListSkeletonComponent height={80} />
-        ) : (
-          <StackCustom gap={"xs"}>
-            <TextInputCustom
-              required
-              label="Nama Bisnis"
-              placeholder="Masukkan nama bisnis"
-              value={data.namaBisnis}
-              onChangeText={(value: any) =>
-                setData({ ...data, namaBisnis: value })
-              }
-            />
+      <NewWrapper footerComponent={buttonUpdate}>
+        <StackCustom gap={"xs"}>
+          <TextInputCustom
+            required
+            label="Nama Bisnis"
+            placeholder="Masukkan nama bisnis"
+            value={data.namaBisnis}
+            onChangeText={(value: any) =>
+              setData({ ...data, namaBisnis: value })
+            }
+          />
 
-            <SelectCustom
-              label="Bidang Usaha"
-              required
-              data={bidangBisnis?.map((item) => ({
-                label: item.name,
-                value: item.id,
-              }))}
-              value={data.masterBidangBisnisId}
-              onChange={(value: any) => {
-                handleBidangBisnisChange(value);
-              }}
-            />
+          <SelectCustom
+            label="Bidang Usaha"
+            required
+            data={bidangBisnis?.map((item) => ({
+              label: item.name,
+              value: item.id,
+            }))}
+            value={data.masterBidangBisnisId}
+            onChange={(value: any) => {
+              handleBidangBisnisChange(value);
+            }}
+          />
 
-            {listSubBidangSelected.map((item, index) => {
-              // Filter data untuk select sub bidang, menghilangkan yang sudah dipilih kecuali untuk item ini sendiri
-              const selectedIds = listSubBidangSelected
-                .filter((_, i) => i !== index)
-                .map((s) => s.MasterSubBidangBisnis?.id)
-                .filter((id) => id); // Filter hanya yang memiliki id (tidak kosong)
+          {listSubBidangSelected.map((item, index) => {
+            // Filter data untuk select sub bidang, menghilangkan yang sudah dipilih kecuali untuk item ini sendiri
+            const selectedIds = listSubBidangSelected
+              .filter((_, i) => i !== index)
+              .map((s) => s.MasterSubBidangBisnis?.id)
+              .filter((id) => id); // Filter hanya yang memiliki id (tidak kosong)
 
-              const availableSubBidangOptions = (selectedSubBidang || [])
-                .filter((sub: any) => {
-                  // Tampilkan jika ini adalah opsi yang dipilih saat ini atau belum dipilih di sub bidang lainnya
+            const availableSubBidangOptions = (selectedSubBidang || [])
+              .filter((sub: any) => {
+                // Tampilkan jika ini adalah opsi yang dipilih saat ini atau belum dipilih di sub bidang lainnya
 
-                  return (
-                    sub.id === item.MasterSubBidangBisnis?.id ||
-                    !selectedIds.includes(sub.id)
-                  );
-                })
-                .map((sub: any) => ({
-                  value: sub.id,
-                  label: sub.name,
-                }));
+                return (
+                  sub.id === item.MasterSubBidangBisnis?.id ||
+                  !selectedIds.includes(sub.id)
+                );
+              })
+              .map((sub: any) => ({
+                value: sub.id,
+                label: sub.name,
+              }));
 
-              return (
-                <SelectCustom
-                  key={index}
-                  label="Sub Bidang Usaha"
-                  required
-                  data={availableSubBidangOptions}
-                  value={item.MasterSubBidangBisnis?.id || null}
-                  onChange={(value: any) => {
-                    handleSubBidangChange(value, index);
-                  }}
-                />
-              );
-            })}
+            return (
+              <SelectCustom
+                key={index}
+                label="Sub Bidang Usaha"
+                required
+                data={availableSubBidangOptions}
+                value={item.MasterSubBidangBisnis?.id || null}
+                onChange={(value: any) => {
+                  handleSubBidangChange(value, index);
+                }}
+              />
+            );
+          })}
 
-            <CenterCustom>
-              <View
-                style={{ flexDirection: "row", alignItems: "center", gap: 10 }}
-              >
-                <ActionIcon
-                  disabled={
-                    selectedSubBidang.length === listSubBidangSelected.length
-                  }
-                  onPress={() => {
-                    handleAddSubBidang();
-                  }}
-                  icon={
-                    <Ionicons
-                      name="add-circle-outline"
-                      size={ICON_SIZE_XLARGE}
-                      color={MainColor.black}
-                    />
-                  }
-                  size="xl"
-                />
-                <ActionIcon
-                  disabled={listSubBidangSelected.length <= 1}
-                  onPress={() => {
-                    handleRemoveSubBidang(listSubBidangSelected.length - 1);
-                  }}
-                  icon={
-                    <Ionicons
-                      name="remove-circle-outline"
-                      size={ICON_SIZE_XLARGE}
-                      color={MainColor.black}
-                    />
-                  }
-                  size="xl"
-                />
-              </View>
-            </CenterCustom>
-            <Spacing />
-
-            <View>
-              <View style={{ flexDirection: "row", alignItems: "center" }}>
-                <TextCustom semiBold style={{ color: MainColor.white_gray }}>
-                  Nomor Telepon
-                </TextCustom>
-                <Text style={{ color: "red" }}> *</Text>
-              </View>
-              <Spacing height={5} />
-              <PhoneInputCustom
-                value={phoneNumber}
-                onChangePhoneNumber={handlePhoneChange}
-                selectedCountry={selectedCountry}
-                onChangeCountry={handleCountryChange}
-                placeholder="xxx-xxx-xxx"
+          <CenterCustom>
+            <View
+              style={{ flexDirection: "row", alignItems: "center", gap: 10 }}
+            >
+              <ActionIcon
+                disabled={
+                  selectedSubBidang.length === listSubBidangSelected.length
+                }
+                onPress={() => {
+                  handleAddSubBidang();
+                }}
+                icon={
+                  <Ionicons
+                    name="add-circle-outline"
+                    size={ICON_SIZE_XLARGE}
+                    color={MainColor.black}
+                  />
+                }
+                size="xl"
+              />
+              <ActionIcon
+                disabled={listSubBidangSelected.length <= 1}
+                onPress={() => {
+                  handleRemoveSubBidang(listSubBidangSelected.length - 1);
+                }}
+                icon={
+                  <Ionicons
+                    name="remove-circle-outline"
+                    size={ICON_SIZE_XLARGE}
+                    color={MainColor.black}
+                  />
+                }
+                size="xl"
               />
             </View>
-            <Spacing />
+          </CenterCustom>
+          <Spacing />
 
-            <TextInputCustom
-              required
-              label="Alamat Bisnis"
-              placeholder="Masukkan alamat bisnis"
-              value={data.alamatKantor}
-              onChangeText={(value: any) =>
-                setData({ ...data, alamatKantor: value })
-              }
+          <View>
+            <View style={{ flexDirection: "row", alignItems: "center" }}>
+              <TextCustom semiBold style={{ color: MainColor.white_gray }}>
+                Nomor Telepon
+              </TextCustom>
+              <Text style={{ color: "red" }}> *</Text>
+            </View>
+            <Spacing height={5} />
+            <PhoneInput
+              value={data.tlpn}
+              onChangePhoneNumber={handleInputValue}
+              selectedCountry={selectedCountry}
+              onChangeSelectedCountry={handleSelectedCountry}
+              defaultCountry="ID"
+              placeholder="xxx-xxx-xxx"
             />
+          </View>
+          <Spacing />
 
-            <TextAreaCustom
-              label="Deskripsi Bisnis"
-              placeholder="Masukkan deskripsi bisnis"
-              value={data.deskripsi}
-              onChangeText={(value: any) =>
-                setData({ ...data, deskripsi: value })
-              }
-              autosize
-              minRows={2}
-              maxRows={5}
-              required
-              showCount
-              maxLength={1000}
-            />
-            <Spacing />
-          </StackCustom>
-        )}
-      </OS_Wrapper>
+          <TextInputCustom
+            required
+            label="Alamat Bisnis"
+            placeholder="Masukkan alamat bisnis"
+            value={data.alamatKantor}
+            onChangeText={(value: any) =>
+              setData({ ...data, alamatKantor: value })
+            }
+          />
+
+          <TextAreaCustom
+            label="Deskripsi Bisnis"
+            placeholder="Masukkan deskripsi bisnis"
+            value={data.deskripsi}
+            onChangeText={(value: any) =>
+              setData({ ...data, deskripsi: value })
+            }
+            autosize
+            minRows={2}
+            maxRows={5}
+            required
+            showCount
+            maxLength={1000}
+          />
+          <Spacing />
+        </StackCustom>
+      </NewWrapper>
     </>
   );
 }

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

@@ -4,15 +4,14 @@ import {
   DrawerCustom,
   DummyLandscapeImage,
   LoaderCustom,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import GridTwoView from "@/components/_ShareComponent/GridTwoView";
 import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { useAuth } from "@/hooks/use-auth";
@@ -73,26 +72,23 @@ export default function Portofolio() {
       {/* Header */}
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Portofolio"
-              left={<LeftButtonCustom />}
-              right={
-                data?.Profile?.id !== profileId ? null : (
-                  <TouchableOpacity onPress={openDrawer}>
-                    <Ionicons
-                      name="ellipsis-vertical"
-                      size={20}
-                      color={MainColor.yellow}
-                    />
-                  </TouchableOpacity>
-                )
-              }
-            />
-          ),
+          title: "Portofolio",
+          headerLeft: () => <LeftButtonCustom />,
+          headerRight: () =>
+            data?.Profile?.id !== profileId ? null : (
+              <TouchableOpacity onPress={openDrawer}>
+                <Ionicons
+                  name="ellipsis-vertical"
+                  size={20}
+                  color={MainColor.yellow}
+                />
+              </TouchableOpacity>
+            ),
+          headerStyle: GStyles.headerStyle,
+          headerTitleStyle: GStyles.headerTitleStyle,
         }}
       />
-      <OS_Wrapper>
+      <ViewWrapper>
         {!data || !profileId ? (
             <StackCustom>
             <CustomSkeleton height={400} />
@@ -125,7 +121,7 @@ export default function Portofolio() {
             <Spacing />
           </StackCustom>
         )}
-      </OS_Wrapper>
+      </ViewWrapper>
 
       {/* Drawer Komponen Eksternal */}
       <DrawerCustom

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

@@ -1,5 +1,5 @@
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import LeftButtonCustom from "@/components/Button/BackButton";
+import { HeaderStyles } from "@/styles/header-styles";
 import { Stack } from "expo-router";
 
 export default function PortofolioLayout() {
@@ -7,9 +7,8 @@ export default function PortofolioLayout() {
     <>
       <Stack
         screenOptions={{
-          header: () => (
-            <AppHeader title="Portofolio" left={<LeftButtonCustom />} />
-          ),
+          ...HeaderStyles,
+          headerLeft: () => <LeftButtonCustom />,
         }}
       >
         {/* <Stack.Screen name="[id]/index" options={{ title: "Portofolio" }} /> */}

app/(application)/(user)/profile/[id]/blocked-list.tsx

@@ -3,13 +3,13 @@ import {
   BadgeCustom,
   ClickableCustom,
   Divider,
-  OS_Wrapper,
   SelectCustom,
   TextCustom,
 } from "@/components";
 import ListEmptyComponent from "@/components/_ShareComponent/ListEmptyComponent";
 import ListLoaderFooterComponent from "@/components/_ShareComponent/ListLoaderFooterComponent";
 import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
 import { usePaginatedApi } from "@/hooks/use-paginated-api";
@@ -120,7 +120,7 @@ export default function ProfileBlockedList() {
 
   return (
     <>
-      <OS_Wrapper
+      <NewWrapper
         // headerComponent={renderHeader()}
         listData={listData}
         renderItem={renderItem}

app/(application)/(user)/profile/[id]/detail-blocked.tsx

@@ -5,7 +5,7 @@ import {
   BoxButtonOnFooter,
   BoxWithHeaderSection,
   ButtonCustom,
-  OS_Wrapper,
+  NewWrapper,
   StackCustom,
   TextCustom,
 } from "@/components";
@@ -46,7 +46,7 @@ export default function ProfileDetailBlocked() {
 
   return (
     <>
-      <OS_Wrapper
+      <NewWrapper
         footerComponent={
           <BoxButtonOnFooter>
             <ButtonCustom
@@ -86,7 +86,7 @@ export default function ProfileDetailBlocked() {
             </TextCustom>
           </StackCustom>
         </BoxWithHeaderSection>
-      </OS_Wrapper>
+      </NewWrapper>
     </>
   );
 }

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

@@ -1,12 +1,11 @@
 import {
   ButtonCustom,
-  OS_Wrapper,
   SelectCustom,
   StackCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
-import { PADDING_INLINE } from "@/constants/constans-value";
 import { apiProfile, apiUpdateProfile } from "@/service/api-client/api-profile";
 import { IProfile } from "@/types/Type-Profile";
 import { router, useLocalSearchParams } from "expo-router";
@@ -71,9 +70,7 @@ export default function ProfileEdit() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
+    <ViewWrapper
       footerComponent={
         <BoxButtonOnFooter>
           <ButtonCustom isLoading={isLoading} onPress={handleUpdate}>
@@ -122,6 +119,6 @@ export default function ProfileEdit() {
           }}
         />
       </StackCustom>
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

@@ -1,6 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { OS_Wrapper, StackCustom } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
+import { NewWrapper, StackCustom } from "@/components";
 import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import DrawerCustom from "@/components/Drawer/DrawerCustom";
@@ -102,24 +101,22 @@ export default function Profile() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Profile"
-              left={<LeftButtonCustom />}
-              right={
-                <ButtonnDot
-                  id={id as string}
-                  openDrawer={openDrawer}
-                  isUserCheck={isUserCheck()}
-                  logout={logout}
-                />
-              }
+          title: `Profile`,
+          headerLeft: () => <LeftButtonCustom />,
+          headerRight: () => (
+            <ButtonnDot
+              id={id as string}
+              openDrawer={openDrawer}
+              isUserCheck={isUserCheck()}
+              logout={logout}
             />
           ),
+          headerStyle: GStyles.headerStyle,
+          headerTitleStyle: GStyles.headerTitleStyle,
         }}
       />
       {/* Main View */}
-      <OS_Wrapper
+      <NewWrapper
         refreshControl={
           <RefreshControl
             refreshing={refreshing}
@@ -144,7 +141,7 @@ export default function Profile() {
             />
           </>
         )}
-      </OS_Wrapper>
+      </NewWrapper>
 
       {/* Drawer Komponen Eksternal */}
       <DrawerCustom

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

@@ -3,8 +3,8 @@ import {
     BoxButtonOnFooter,
     ButtonCenteredOnly,
     ButtonCustom,
-    OS_Wrapper,
 } from "@/components";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DIRECTORY_ID from "@/constants/directory-id";
 import DUMMY_IMAGE from "@/constants/dummy-image-value";
@@ -127,7 +127,7 @@ export default function UpdateBackgroundProfile() {
   );
 
   return (
-    <OS_Wrapper footerComponent={buttonFooter}>
+    <ViewWrapper footerComponent={buttonFooter}>
       <BaseBox
         style={{ alignItems: "center", justifyContent: "center", height: 250 }}
       >
@@ -144,6 +144,6 @@ export default function UpdateBackgroundProfile() {
       >
         Update
       </ButtonCenteredOnly>
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

@@ -3,8 +3,8 @@ import {
   BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
-  OS_Wrapper,
 } from "@/components";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DIRECTORY_ID from "@/constants/directory-id";
 import DUMMY_IMAGE from "@/constants/dummy-image-value";
@@ -125,7 +125,7 @@ export default function UpdatePhotoProfile() {
   );
 
   return (
-    <OS_Wrapper footerComponent={buttonFooter}>
+    <ViewWrapper footerComponent={buttonFooter}>
       <BaseBox
         style={{ alignItems: "center", justifyContent: "center", height: 250 }}
       >
@@ -143,6 +143,6 @@ export default function UpdatePhotoProfile() {
       >
         Upload
       </ButtonCenteredOnly>
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

@@ -1,43 +1,47 @@
 import { BackButton } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
+import { GStyles } from "@/styles/global-styles";
 import { Stack } from "expo-router";
 
 export default function ProfileLayout() {
   return (
     <>
-      <Stack>
+      <Stack
+        screenOptions={{
+          headerStyle: GStyles.headerStyle,
+          headerTitleStyle: GStyles.headerTitleStyle,
+          headerTitleAlign: "center",
+          headerBackButtonDisplayMode: "minimal",
+        }}
+      >
         {/* <Stack.Screen name="[id]/index" options={{ headerShown: false }} /> */}
         <Stack.Screen
           name="[id]/edit"
-          options={{ header: () => <AppHeader title="Edit Profile" /> }}
+          options={{ title: "Edit Profile", headerLeft: () => <BackButton /> }}
         />
         <Stack.Screen
           name="[id]/update-photo"
-          options={{ header: () => <AppHeader title="Update Foto" /> }}
+          options={{ title: "Update Foto", headerLeft: () => <BackButton /> }}
         />
         <Stack.Screen
           name="[id]/update-background"
           options={{
-            header: () => <AppHeader title="Update Latar Belakang" />,
+            title: "Update Latar Belakang",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="create"
-          options={{
-            header: () => (
-              <AppHeader title="Tambah Profil" showBack={false} />
-            ),
-          }}
+          options={{ title: "Buat Profile", headerBackVisible: false }}
         />
 
         <Stack.Screen
           name="[id]/blocked-list"
-          options={{ header: () => <AppHeader title="Daftar Blokir" /> }}
+          options={{ title: "Daftar Blokir", headerLeft: () => <BackButton /> }}
         />
 
         <Stack.Screen
           name="[id]/detail-blocked"
-          options={{ header: () => <AppHeader title="Detail Blokir" /> }}
+          options={{ title: "Detail Blokir", headerLeft: () => <BackButton /> }}
         />
       </Stack>
     </>

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

@@ -2,17 +2,16 @@ import {
     BaseBox,
     ButtonCenteredOnly,
     ButtonCustom,
-    OS_Wrapper,
     SelectCustom,
     Spacing,
     StackCustom,
     TextInputCustom,
+    ViewWrapper,
 } from "@/components";
 import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
 import InformationBox from "@/components/Box/InformationBox";
 import DIRECTORY_ID from "@/constants/directory-id";
 import DUMMY_IMAGE from "@/constants/dummy-image-value";
-import { PADDING_INLINE } from "@/constants/constans-value";
 import { useAuth } from "@/hooks/use-auth";
 import { apiCreateProfile } from "@/service/api-client/api-profile";
 import { apiValidationEmail } from "@/service/api-client/api-validation";
@@ -156,11 +155,7 @@ export default function CreateProfile() {
   );
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-      footerComponent={footerComponent}
-    >
+    <ViewWrapper footerComponent={footerComponent}>
       <StackCustom>
         <InformationBox text="Upload foto profile anda." />
         <View style={{ alignItems: "center" }}>
@@ -246,6 +241,6 @@ export default function CreateProfile() {
         />
         <Spacing />
       </StackCustom>
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

@@ -4,87 +4,64 @@ import {
   IconHome,
   IconStatus,
 } from "@/components/_Icon";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
-import { OS_ANDROID_HEIGHT, OS_IOS_HEIGHT } from "@/constants/constans-value";
 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 { Tabs, useLocalSearchParams, useNavigation, router } from "expo-router";
+import { useLayoutEffect } from "react";
+
+export default function VotingTabsLayout() {
+  const navigation = useNavigation();
 
-function VotingTabsWrapper() {
-  const insets = useSafeAreaInsets();
-  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
   const { from, category } = useLocalSearchParams<{
     from?: string;
     category?: string;
   }>();
 
+  console.log("from", from);
+  console.log("category", category);
+
+  // Atur header secara dinamis
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerLeft: () => (
+        <BackButtonFromNotification
+          from={from as string}
+          category={category as string}
+        />
+      ),
+    });
+  }, [from, 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,
-            },
-          }),
-          header: () => (
-            <AppHeader
-              title="Voting"
-              left={
-                <BackButtonFromNotification
-                  from={from || ""}
-                  category={category}
-                />
-              }
-            />
-          ),
+    <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: "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>
+      />
+      <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>
   );
 }
-
-export default function VotingTabsLayout() {
-  return <VotingTabsWrapper />;
-}

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

@@ -7,12 +7,11 @@ import {
   DrawerCustom,
   LoaderCustom,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconArchive, IconContribution, IconEdit } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import ReportBox from "@/components/Box/ReportBox";
@@ -104,22 +103,17 @@ export default function VotingDetailStatus() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Detail"
-              left={<BackButton />}
-              right={
-                status === "draft" ? (
-                  <DotButton onPress={() => setOpenDrawerDraft(true)} />
-                ) : status === "publish" ? (
-                  <DotButton onPress={() => setOpenDrawerPublish(true)} />
-                ) : null
-              }
-            />
-          ),
+          title: `Detail`,
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            status === "draft" ? (
+              <DotButton onPress={() => setOpenDrawerDraft(true)} />
+            ) : status === "publish" ? (
+              <DotButton onPress={() => setOpenDrawerPublish(true)} />
+            ) : null,
         }}
       />
-      <OS_Wrapper>
+      <ViewWrapper>
         {loadingGetData ? (
           <LoaderCustom />
         ) : (
@@ -158,7 +152,7 @@ export default function VotingDetailStatus() {
             <Spacing />
           </>
         )}
-      </OS_Wrapper>
+      </ViewWrapper>
 
       {/* ========= Draft Drawer ========= */}
       <DrawerCustom

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

@@ -6,10 +6,9 @@ import {
   DrawerCustom,
   LoaderCustom,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
   Spacing,
+  ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconContribution } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import { useAuth } from "@/hooks/use-auth";
@@ -82,19 +81,15 @@ export default function VotingDetailContribution() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Detail Kontribusi"
-              left={<BackButton />}
-              right={
-                <DotButton onPress={() => setOpenDrawerPublish(true)} />
-              }
-            />
+          title: "Detail Kontribusi",
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <DotButton onPress={() => setOpenDrawerPublish(true)} />
           ),
         }}
       />
 
-      <OS_Wrapper>
+      <ViewWrapper>
         {loadingGetData ? (
           <LoaderCustom />
         ) : (
@@ -116,7 +111,7 @@ export default function VotingDetailContribution() {
             <Spacing />
           </>
         )}
-      </OS_Wrapper>
+      </ViewWrapper>
 
       {/* ========= Publish Drawer ========= */}
       <DrawerCustom

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

@@ -5,7 +5,7 @@ import {
   ButtonCustom,
   CenterCustom,
   LoaderCustom,
-  OS_Wrapper,
+  NewWrapper,
   Spacing,
   StackCustom,
   TextAreaCustom,
@@ -189,11 +189,7 @@ export default function VotingEdit() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-      footerComponent={buttonSubmit()}
-    >
+    <NewWrapper footerComponent={buttonSubmit()}>
       {loadingGetData ? (
         <ListSkeletonComponent />
       ) : (
@@ -332,6 +328,6 @@ export default function VotingEdit() {
           <Spacing />
         </StackCustom>
       )}
-    </OS_Wrapper>
+    </NewWrapper>
   );
 }

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

@@ -6,10 +6,9 @@ import {
   DrawerCustom,
   LoaderCustom,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
   Spacing,
+  ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconContribution } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import { useAuth } from "@/hooks/use-auth";
@@ -83,18 +82,14 @@ export default function VotingDetailHistory() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Riwayat Voting"
-              left={<BackButton />}
-              right={
-                <DotButton onPress={() => setOpenDrawerPublish(true)} />
-              }
-            />
+          title: "Riwayat Voting",
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <DotButton onPress={() => setOpenDrawerPublish(true)} />
           ),
         }}
       />
-      <OS_Wrapper>
+      <ViewWrapper>
         {loadingGetData ? (
           <LoaderCustom />
         ) : (
@@ -116,7 +111,7 @@ export default function VotingDetailHistory() {
             <Spacing />
           </>
         )}
-      </OS_Wrapper>
+      </ViewWrapper>
 
       {/* ========= Publish Drawer ========= */}
       <DrawerCustom

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

@@ -8,10 +8,9 @@ import {
   InformationBox,
   LoaderCustom,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
   StackCustom,
+  ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconArchive, IconContribution } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
@@ -32,7 +31,6 @@ import {
   useLocalSearchParams,
 } from "expo-router";
 import React, { useCallback, useEffect, useState } from "react";
-import { RefreshControl } from "react-native";
 import Toast from "react-native-toast-message";
 
 export default function VotingDetail() {
@@ -134,9 +132,9 @@ export default function VotingDetail() {
 
   if (isEventFinished) {
     return (
-      <OS_Wrapper>
+      <ViewWrapper>
         <CustomSkeleton />
-      </OS_Wrapper>
+      </ViewWrapper>
     );
   }
 
@@ -144,26 +142,15 @@ export default function VotingDetail() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Detail Voting"
-              left={<BackButton />}
-              right={
-                <DotButton onPress={() => setOpenDrawerPublish(true)} />
-              }
-            />
+          title: `Detail Voting`,
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <DotButton onPress={() => setOpenDrawerPublish(true)} />
           ),
         }}
       />
 
-      <OS_Wrapper
-        refreshControl={
-          <RefreshControl
-            refreshing={loadingGetData}
-            onRefresh={handlerLoadData}
-          />
-        }
-      >
+      <ViewWrapper>
         {loadingGetData ? (
           <LoaderCustom />
         ) : (
@@ -190,7 +177,7 @@ export default function VotingDetail() {
             />
           </StackCustom>
         )}
-      </OS_Wrapper>
+      </ViewWrapper>
 
       {/* ========= Publish Drawer ========= */}
       <DrawerCustom

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

@@ -3,11 +3,12 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   CenterCustom,
-  OS_Wrapper,
+  NewWrapper,
   Spacing,
   StackCustom,
   TextAreaCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
 import { MainColor } from "@/constants/color-palet";
@@ -106,11 +107,7 @@ export default function VotingCreate() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-      footerComponent={buttonSubmit()}
-    >
+    <NewWrapper footerComponent={buttonSubmit()}>
       <StackCustom gap={"xs"}>
         <TextInputCustom
           label="Judul Voting"
@@ -201,6 +198,6 @@ export default function VotingCreate() {
 
         <Spacing />
       </StackCustom>
-    </OS_Wrapper>
+    </NewWrapper>
   );
 }

app/(application)/(user)/waiting-room.tsx

@@ -3,7 +3,7 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   InformationBox,
-  OS_Wrapper,
+  NewWrapper,
   StackCustom
 } from "@/components";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
@@ -82,7 +82,7 @@ export default function WaitingRoom() {
 
   return (
     <>
-      <OS_Wrapper
+      <NewWrapper
         footerComponent={logoutButton()}
         refreshControl={
           <RefreshControl refreshing={isLoading} onRefresh={handleCheck} />
@@ -103,7 +103,7 @@ Silakan tunggu beberapa saat. Untuk memperbarui status, tarik layar ke bawah."
             Check
           </ButtonCenteredOnly> */}
         </StackCustom>
-      </OS_Wrapper>
+      </NewWrapper>
     </>
   );
 }

app/(application)/_layout.tsx

@@ -1,8 +1,8 @@
 import { BackButton } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import BackgroundNotificationHandler from "@/components/Notification/BackgroundNotificationHandler";
 import NotificationInitializer from "@/components/Notification/NotificationInitializer";
 import { NotificationProvider } from "@/hooks/use-notification-store";
+import { HeaderStyles } from "@/styles/header-styles";
 import { Stack } from "expo-router";
 
 export default function ApplicationLayout() {
@@ -20,7 +20,7 @@ export default function ApplicationLayout() {
 function ApplicationStack() {
   return (
     <>
-      <Stack>
+      <Stack screenOptions={HeaderStyles}>
         <Stack.Screen name="(user)" options={{ headerShown: false }} />
         <Stack.Screen name="admin" options={{ headerShown: false }} />
 
@@ -28,7 +28,8 @@ function ApplicationStack() {
         <Stack.Screen
           name="(image)/take-picture/[id]/index"
           options={{
-            header: () => <AppHeader title="Ambil Gambar" />,
+            title: "Ambil Gambar",
+            headerLeft: () => <BackButton />,
           }}
         />
 
@@ -36,7 +37,8 @@ function ApplicationStack() {
         <Stack.Screen
           name="(image)/preview-image/[id]/index"
           options={{
-            header: () => <AppHeader title="Preview Gambar" />,
+            title: "Preview Gambar",
+            headerLeft: () => <BackButton />,
           }}
         />
       </Stack>