feat: Complete Forum & Admin User Access migration + fix scroll issues

Forum Screens (User Phase 5 - 17 files):
- Migrate all forum list, detail, create, and report screens to OS_Wrapper.
- ViewBeranda, ViewBeranda2, ViewBeranda3: List screens with pull-to-refresh.
- DetailForum, DetailForum2: Comment sections with headers (apply disableFlexGrow fix).
- create, edit, report-*, other-report-*, preview-report-*: Forms with keyboard handling.

Admin Phase 9 (User Access - 2 files):
- index.tsx: List with search and pagination.
- [id]/index.tsx: Detail with status toggle footer.

Scroll Fixes (Critical Bugs):
- Fix "Ghost Scroll" in Android FlatList: Removed TouchableWithoutFeedback and KeyboardAvoidingView wrappers in List Mode.
- Fix Large Header Cut-off: Added optional disableFlexGrow={true} to OS_Wrapper for screens with complex ListHeaderComponents (e.g., Forum Detail).
- Fix Keyboard Dismiss: Changed keyboardShouldPersistTaps to "handled" so taps on empty areas dismiss the keyboard while allowing scroll.

Documentation:
- Update TASK-005 with complete Phase 5 details and new progress totals.

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

.gitignore

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

.qwen/settings.json

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

.qwen/settings.json.orig

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

QWEN.md

@@ -387,7 +387,7 @@ apiConfig.interceptors.request.use(async (config) => {
 
 ### Deep Linking
 - Scheme: `hipmimobile://`
-- HTTPS: `cld-dkr-staging-hipmi.wibudev.com`
+- HTTPS: `cld-dkr-hipmi-stg.wibudev.com`
 - Configured for both platforms
 
 ### Camera
@@ -513,3 +513,30 @@ 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

android/app/build.gradle

@@ -100,7 +100,7 @@ packagingOptions {
         applicationId 'com.bip.hipmimobileapp'
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1
+        versionCode 5
         versionName "1.0.2"
 
         buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""

android/app/src/debugOptimized/AndroidManifest.xml

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

android/app/src/main/AndroidManifest.xml

@@ -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="cld-dkr-staging-hipmi.wibudev.com" android:pathPrefix="/"/>
+        <data android:scheme="https" android:host="hipmi.muku.id" android:pathPrefix="/"/>
         <category android:name="android.intent.category.BROWSABLE"/>
         <category android:name="android.intent.category.DEFAULT"/>
       </intent-filter>

android/build.gradle

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

app.config.js

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

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

@@ -1,4 +1,5 @@
 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";
@@ -7,13 +8,12 @@ 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={{
-          title: "File",
-          headerLeft: () => <BackButton />,
+          header: () => <AppHeader title="File" left={<BackButton />} />,
         }}
       />
       <SafeAreaView style={{ flex: 1 }} edges={["bottom"]}>

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

@@ -1,29 +1,27 @@
 import { BackButton } from "@/components";
+import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconPlus } from "@/components/_Icon";
 import { IconDot } from "@/components/_Icon/IconComponent";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
-import { HeaderStyles } from "@/styles/header-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
 
 export default function UserLayout() {
   return (
     <>
-      <Stack screenOptions={HeaderStyles}>
+      <Stack>
         <Stack.Screen
           name="delete-account"
           options={{
-            title: "Hapus Akun",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Hapus Akun" />,
           }}
         />
         <Stack.Screen
           name="waiting-room"
           options={{
-            title: "Waiting Room",
-            headerBackVisible: false,
+            header: () => <AppHeader title="Waiting Room" />,
           }}
         />
 
@@ -47,8 +45,7 @@ export default function UserLayout() {
         <Stack.Screen
           name="user-search/index"
           options={{
-            title: "Pencarian Pengguna",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Pencarian Pengguna" />,
           }}
         />
 
@@ -71,10 +68,18 @@ 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" />
@@ -85,32 +90,28 @@ export default function UserLayout() {
         <Stack.Screen
           name="event/create"
           options={{
-            title: "Tambah Event",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Tambah Event" />,
           }}
         />
 
         <Stack.Screen
           name="event/detail/[id]"
           options={{
-            title: "Event Detail",
-            headerLeft: () => <LeftButtonCustom />,
+            header: () => <AppHeader title="Event Detail" left={<LeftButtonCustom />} />,
           }}
         />
 
         <Stack.Screen
           name="event/[id]/edit"
           options={{
-            title: "Edit Event",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Event" />,
           }}
         />
 
         <Stack.Screen
           name="event/[id]/list-of-participants"
           options={{
-            title: "Daftar peserta",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Daftar peserta" />,
           }}
         />
         {/* ========== End Event Section ========= */}
@@ -119,22 +120,19 @@ export default function UserLayout() {
         <Stack.Screen
           name="collaboration/(tabs)"
           options={{
-            title: "Collaboration",
-            headerLeft: () => <BackButton path="/home" />,
+            header: () => <AppHeader title="Collaboration" left={<BackButton path="/home" />} />,
           }}
         />
         <Stack.Screen
           name="collaboration/create"
           options={{
-            title: "Tambah Proyek",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Tambah Proyek" />,
           }}
         />
         <Stack.Screen
           name="collaboration/[id]/list-of-participants"
           options={{
-            title: "Daftar Partisipan",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Daftar Partisipan" />,
           }}
         />
         {/* <Stack.Screen
@@ -147,22 +145,19 @@ export default function UserLayout() {
         <Stack.Screen
           name="collaboration/[id]/edit"
           options={{
-            title: "Edit Proyek",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Proyek" />,
           }}
         />
         <Stack.Screen
           name="collaboration/[id]/create-pacticipants"
           options={{
-            title: "Ajukan Partisipasi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Ajukan Partisipasi" />,
           }}
         />
         <Stack.Screen
           name="collaboration/[id]/select-of-participants"
           options={{
-            title: "Pilih Partisipan",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Pilih Partisipan" />,
           }}
         />
 
@@ -172,29 +167,25 @@ export default function UserLayout() {
         <Stack.Screen
           name="voting/create"
           options={{
-            title: "Tambah Voting",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Tambah Voting" />,
           }}
         />
         <Stack.Screen
           name="voting/(tabs)"
           options={{
-            title: "Voting",
-            headerLeft: () => <BackButton path="/home" />,
+            header: () => <AppHeader title="Voting" left={<BackButton path="/home" />} />,
           }}
         />
         <Stack.Screen
           name="voting/[id]/edit"
           options={{
-            title: "Edit Voting",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Voting" />,
           }}
         />
         <Stack.Screen
           name="voting/[id]/list-of-contributor"
           options={{
-            title: "Daftar Kontributor",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Daftar Kontributor" />,
           }}
         />
 
@@ -204,8 +195,7 @@ export default function UserLayout() {
         <Stack.Screen
           name="crowdfunding/index"
           options={{
-            title: "Crowdfunding",
-            headerLeft: () => <BackButton path="/home" />,
+            header: () => <AppHeader title="Crowdfunding" left={<BackButton path="/home" />} />,
           }}
         />
 
@@ -215,103 +205,95 @@ export default function UserLayout() {
         <Stack.Screen
           name="investment/(tabs)"
           options={{
-            title: "Investasi",
-            headerLeft: () => <BackButton path="/crowdfunding" />,
+            header: () => <AppHeader title="Investasi" left={<BackButton path="/crowdfunding" />} />,
           }}
         />
         <Stack.Screen
           name="investment/create"
           options={{
-            title: "Tambah Investasi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Tambah Investasi" />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/index"
           options={{
-            title: "Detail Investasi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Detail Investasi" />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/edit"
           options={{
-            title: "Edit Investasi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Investasi" />,
           }}
         />
 
         <Stack.Screen
           name="investment/[id]/edit-prospectus"
           options={{
-            title: "Edit Prospektus",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Prospektus" />,
           }}
         />
 
         <Stack.Screen
           name="investment/[id]/(document)/list-of-document"
           options={{
-            title: "Daftar Dokumen",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Daftar Dokumen" />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/(document)/add-document"
           options={{
-            title: "Tambah Dokumen",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Tambah Dokumen" />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/(document)/edit-document"
           options={{
-            title: "Edit Dokumen",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Dokumen" />,
           }}
         />
 
         <Stack.Screen
           name="investment/[id]/(news)/add-news"
           options={{
-            title: "Tambah Berita",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Tambah Berita" />,
           }}
         />
 
         <Stack.Screen
           name="investment/[id]/investor"
           options={{
-            title: "Investor",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Investor" />,
           }}
         />
 
         <Stack.Screen
           name="investment/[id]/(transaction-flow)/index"
           options={{
-            title: "Pembelian Saham",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Pembelian Saham" />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/(transaction-flow)/select-bank"
           options={{
-            title: "Pilih Bank",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Pilih Bank" />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/(transaction-flow)/invoice"
           options={{
-            title: "Invoice",
-            headerLeft: () => (
-              <Ionicons
-                name="close"
-                size={ICON_SIZE_SMALL}
-                color={MainColor.yellow}
-                onPress={() =>
-                  router.navigate(`/investment/(tabs)/transaction`)
+            header: () => (
+              <AppHeader
+                title="Invoice"
+                left={
+                  <Ionicons
+                    name="close"
+                    size={ICON_SIZE_SMALL}
+                    color={MainColor.yellow}
+                    onPress={() =>
+                      router.navigate(`/investment/(tabs)/transaction`)
+                    }
+                  />
                 }
               />
             ),
@@ -320,14 +302,18 @@ export default function UserLayout() {
         <Stack.Screen
           name="investment/[id]/(transaction-flow)/process"
           options={{
-            title: "Proses",
-            headerLeft: () => (
-              <Ionicons
-                name="close"
-                size={ICON_SIZE_SMALL}
-                color={MainColor.yellow}
-                onPress={() =>
-                  router.navigate(`/investment/(tabs)/transaction`)
+            header: () => (
+              <AppHeader
+                title="Proses"
+                left={
+                  <Ionicons
+                    name="close"
+                    size={ICON_SIZE_SMALL}
+                    color={MainColor.yellow}
+                    onPress={() =>
+                      router.navigate(`/investment/(tabs)/transaction`)
+                    }
+                  />
                 }
               />
             ),
@@ -336,23 +322,20 @@ export default function UserLayout() {
         <Stack.Screen
           name="investment/[id]/(transaction-flow)/success"
           options={{
-            title: "Transaksi Berhasil",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Transaksi Berhasil" />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/(transaction-flow)/failed"
           options={{
-            title: "Transaksi Gagal",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Transaksi Gagal" />,
           }}
         />
 
         <Stack.Screen
           name="investment/[id]/(my-holding)/[id]"
           options={{
-            title: "Detail Saham Saya",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Detail Saham Saya" />,
           }}
         />
         {/* ========== End Investment Section ========= */}
@@ -361,122 +344,111 @@ export default function UserLayout() {
         <Stack.Screen
           name="donation/(tabs)"
           options={{
-            title: "Donasi",
-            headerLeft: () => <BackButton path="/crowdfunding" />,
+            header: () => <AppHeader title="Donasi" left={<BackButton path="/crowdfunding" />} />,
           }}
         />
 
         <Stack.Screen
           name="donation/create"
           options={{
-            title: "Tambah Donasi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Tambah Donasi" />,
           }}
         />
         <Stack.Screen
           name="donation/create-story"
           options={{
-            title: "Tambah Donasi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Tambah Donasi" />,
           }}
         />
 
         <Stack.Screen
           name="donation/[id]/edit"
           options={{
-            title: "Edit Donasi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Donasi" />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/edit-story"
           options={{
-            title: "Edit Donasi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Donasi" />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/edit-rekening"
           options={{
-            title: "Edit Rekening",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Rekening" />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/detail-story"
           options={{
-            title: "Cerita Penggalang",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Cerita Penggalang" />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/infromation-fundrising"
           options={{
-            title: "Informasi Penggalang Dana",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Informasi Penggalang Dana" />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/list-of-donatur"
           options={{
-            title: "Daftar Donatur",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Daftar Donatur" />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/fund-disbursement"
           options={{
-            title: "Pencairan Dana",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Pencairan Dana" />,
           }}
         />
 
         <Stack.Screen
           name="donation/[id]/(news)/recap-of-news"
           options={{
-            title: "Rekap Kabar",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Rekap Kabar" />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/(news)/add-news"
           options={{
-            title: "Tambah Berita",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Tambah Berita" />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/(news)/[news]/edit-news"
           options={{
-            title: "Edit Berita",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Berita" />,
           }}
         />
 
         <Stack.Screen
           name="donation/[id]/(transaction-flow)/index"
           options={{
-            title: "Donasi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Donasi" />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/(transaction-flow)/select-bank"
           options={{
-            title: "Pilih Bank",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Pilih Bank" />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/(transaction-flow)/[invoiceId]/invoice"
           options={{
-            title: "Invoice",
-            headerLeft: () => (
-              <Ionicons
-                name="close"
-                size={ICON_SIZE_SMALL}
-                color={MainColor.yellow}
-                onPress={() => router.navigate(`/donation/(tabs)/my-donation`)}
+            header: () => (
+              <AppHeader
+                title="Invoice"
+                left={
+                  <Ionicons
+                    name="close"
+                    size={ICON_SIZE_SMALL}
+                    color={MainColor.yellow}
+                    onPress={() => router.navigate(`/donation/(tabs)/my-donation`)}
+                  />
+                }
               />
             ),
           }}
@@ -484,13 +456,17 @@ export default function UserLayout() {
         <Stack.Screen
           name="donation/[id]/(transaction-flow)/[invoiceId]/process"
           options={{
-            title: "Proses",
-            headerLeft: () => (
-              <Ionicons
-                name="close"
-                size={ICON_SIZE_SMALL}
-                color={MainColor.yellow}
-                onPress={() => router.navigate(`/donation/(tabs)/my-donation`)}
+            header: () => (
+              <AppHeader
+                title="Proses"
+                left={
+                  <Ionicons
+                    name="close"
+                    size={ICON_SIZE_SMALL}
+                    color={MainColor.yellow}
+                    onPress={() => router.navigate(`/donation/(tabs)/my-donation`)}
+                  />
+                }
               />
             ),
           }}
@@ -498,55 +474,51 @@ export default function UserLayout() {
         <Stack.Screen
           name="donation/[id]/(transaction-flow)/[invoiceId]/success"
           options={{
-            title: "Donasi Berhasil",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Donasi Berhasil" />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/(transaction-flow)/[invoiceId]/failed"
           options={{
-            title: "Donasi Gagal",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Donasi Gagal" />,
           }}
         />
 
         {/* ========== End Donation Section ========= */}
 
         {/* ========== Job Section ========= */}
+
+
         <Stack.Screen
           name="job/create"
           options={{
-            title: "Tambah Job",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Tambah Job" />,
           }}
         />
         <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={{
-            title: "Detail Job",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Detail Job" />,
           }}
         />
         <Stack.Screen
           name="job/[id]/edit"
           options={{
-            title: "Edit Job",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Job" />,
           }}
         />
         <Stack.Screen
           name="job/[id]/archive"
           options={{
-            title: "Arsip Job",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Arsip Job" />,
           }}
         />
 
@@ -556,78 +528,67 @@ export default function UserLayout() {
         <Stack.Screen
           name="forum/create"
           options={{
-            title: "Tambah Diskusi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Tambah Diskusi" />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/edit"
           options={{
-            title: "Edit Diskusi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Diskusi" />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/forumku"
           options={{
-            title: "Forumku",
-            headerLeft: () => <BackButton icon={"close"} />,
+            header: () => <AppHeader title="Forumku" left={<BackButton icon={"close"} />} />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/index"
           options={{
-            title: "Detail",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Detail" />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/report-commentar"
           options={{
-            title: "Laporkan Komentar",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Laporkan Komentar" />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/other-report-commentar"
           options={{
-            title: "Laporkan Komentar",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Laporkan Komentar" />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/report-posting"
           options={{
-            title: "Laporkan Diskusi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Laporkan Diskusi" />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/other-report-posting"
           options={{
-            title: "Laporkan Diskusi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Laporkan Diskusi" />,
           }}
         />
         <Stack.Screen
           name="forum/terms"
           options={{
-            title: "Syarat & Ketentuan Forum",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Syarat & Ketentuan Forum" />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/preview-report-posting"
           options={{
-            title: "Laporan Postingan",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Laporan Postingan" />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/preview-report-comment"
           options={{
-            title: "Laporan Komentar",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Laporan Komentar" />,
           }}
         />
 
@@ -635,29 +596,25 @@ export default function UserLayout() {
         <Stack.Screen
           name="maps/index"
           options={{
-            title: "Maps",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Maps" />,
           }}
         />
         <Stack.Screen
           name="maps/create"
           options={{
-            title: "Tambah Maps",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Tambah Maps" />,
           }}
         />
         <Stack.Screen
           name="maps/[id]/edit"
           options={{
-            title: "Edit Maps",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Maps" />,
           }}
         />
         <Stack.Screen
           name="maps/[id]/custom-pin"
           options={{
-            title: "Custom Pin Maps",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Custom Pin Maps" />,
           }}
         />
 
@@ -665,8 +622,7 @@ export default function UserLayout() {
         <Stack.Screen
           name="marketplace/index"
           options={{
-            title: "Market Place",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Market Place" />,
           }}
         />
       </Stack>

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

@@ -2,35 +2,64 @@ 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;
 
-export default function CollaborationTabsLayout() {
   return (
-    <Tabs screenOptions={TabsStyles}>
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: "Beranda",
-          tabBarIcon: ({ color }) => <IconHome color={color} />,
+    <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="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>
+      >
+        <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 />;
+}

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

@@ -10,6 +10,7 @@ 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";
@@ -40,8 +41,7 @@ export default function CollaborationRoomInfo() {
     <>
       <Stack.Screen
         options={{
-          title: `Info`,
-          headerLeft: () => <BackButton />,
+          header: () => <AppHeader title="Info" left={<BackButton />} />,
         }}
       />
 

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

@@ -1,4 +1,5 @@
 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";
@@ -12,14 +13,18 @@ export default function CollaborationRoomChat() {
     <>
       <Stack.Screen
         options={{
-          title: `Proyek ${detail}`,
-          headerLeft: () => <BackButton />,
-          headerRight: () => (
-            <Feather
-              name="info"
-              size={ICON_SIZE_SMALL}
-              color={MainColor.yellow}
-              onPress={() => router.push(`/collaboration/${id}/${detail}/info`)}
+          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`)}
+                />
+              }
             />
           ),
         }}

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

@@ -6,6 +6,7 @@ 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";
@@ -38,10 +39,14 @@ export default function CollaborationDetailParticipant() {
     <>
       <Stack.Screen
         options={{
-          title: "Detail Proyek",
-          headerLeft: () => <BackButton />,
-          headerRight: () => (
-            <DotButton onPress={() => setOpenDrawerParticipant(true)} />
+          header: () => (
+            <AppHeader
+              title="Detail Proyek"
+              left={<BackButton />}
+              right={
+                <DotButton onPress={() => setOpenDrawerParticipant(true)} />
+              }
+            />
           ),
         }}
       />

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

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

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

@@ -9,6 +9,7 @@ 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 {
@@ -74,10 +75,14 @@ export default function CollaborationDetail() {
     <>
       <Stack.Screen
         options={{
-          title: "Detail Proyek",
-          headerLeft: () => <BackButton />,
-          headerRight: () => (
-            <DotButton onPress={() => setOpenDrawerMenu(true)} />
+          header: () => (
+            <AppHeader
+              title="Detail Proyek"
+              left={<BackButton />}
+              right={
+                <DotButton onPress={() => setOpenDrawerMenu(true)} />
+              }
+            />
           ),
         }}
       />

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,7 +68,10 @@ export default function DeleteAccount() {
 
   return (
     <>
-      <ViewWrapper>
+      <OS_Wrapper
+        enableKeyboardHandling
+        contentPaddingBottom={250}
+      >
         <StackCustom>
           <BaseBox>
             <StackCustom>
@@ -105,7 +108,7 @@ export default function DeleteAccount() {
             </StackCustom>
           </BaseBox>
         </StackCustom>
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

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

@@ -5,33 +5,62 @@ 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 (
-    <Tabs screenOptions={TabsStyles}>
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: "Beranda",
-          tabBarIcon: ({ color }) => <IconHome color={color} />,
+    <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="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>
+      >
+        <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>
   );
 }
+
+export default function DonationTabsLayout() {
+  return <DonationTabsWrapper />;
+}

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

@@ -11,6 +11,7 @@ import {
   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";
@@ -57,12 +58,17 @@ export default function DonationNews() {
     <>
       <Stack.Screen
         options={{
-          title: "Detail Kabar",
-          headerLeft: () => <BackButton />,
-          headerRight: () =>
-            user?.id === data?.authorId && (
-              <DotButton onPress={() => setOpenDrawer(true)} />
-            ),
+          header: () => (
+            <AppHeader
+              title="Detail Kabar"
+              left={<BackButton />}
+              right={
+                user?.id === data?.authorId && (
+                  <DotButton onPress={() => setOpenDrawer(true)} />
+                )
+              }
+            />
+          ),
         }}
       />
       <ViewWrapper>

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

@@ -7,6 +7,7 @@ import {
   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";
@@ -97,14 +98,19 @@ export default function DonasiDetailStatus() {
     <>
       <Stack.Screen
         options={{
-          title: `Detail ${_.startCase(status as string)}`,
-          headerLeft: () => <BackButton />,
-          headerRight: () =>
-            status === "draft" ? (
-              <DotButton onPress={() => setOpenDrawer(true)} />
-            ) : status === "publish" ? (
-              <DotButton onPress={() => setOpenDrawerPublish(true)} />
-            ) : null,
+          header: () => (
+            <AppHeader
+              title={`Detail ${_.startCase(status as string)}`}
+              left={<BackButton />}
+              right={
+                status === "draft" ? (
+                  <DotButton onPress={() => setOpenDrawer(true)} />
+                ) : status === "publish" ? (
+                  <DotButton onPress={() => setOpenDrawerPublish(true)} />
+                ) : null
+              }
+            />
+          ),
         }}
       />
       <NewWrapper

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

@@ -185,7 +185,6 @@ export default function DonationEdit() {
 
   return (
     <NewWrapper
-      hideFooter
       footerComponent={
         <BoxButtonOnFooter>
           <ButtonCustom

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

@@ -10,6 +10,7 @@ import {
   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,12 +91,17 @@ export default function DonasiDetailBeranda() {
     <>
       <Stack.Screen
         options={{
-          title: `Detail Donasi`,
-          headerLeft: () => <BackButton />,
-          headerRight: () =>
-            user?.id === data?.Author?.id ? (
-              <DotButton onPress={() => setOpenDrawer(true)} />
-            ) : null,
+          header: () => (
+            <AppHeader
+              title="Detail Donasi"
+              left={<BackButton />}
+              right={
+                user?.id === data?.Author?.id ? (
+                  <DotButton onPress={() => setOpenDrawer(true)} />
+                ) : null
+              }
+            />
+          ),
         }}
       />
       <NewWrapper footerComponent={buttonSection}>

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

@@ -114,7 +114,6 @@ export default function DonationCreateStory() {
 
   return (
     <NewWrapper
-      hideFooter
       footerComponent={
         <>
          <BoxButtonOnFooter>

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

@@ -127,7 +127,6 @@ export default function DonationCreate() {
 
   return (
     <NewWrapper
-      hideFooter
       footerComponent={
         <>
           <BoxButtonOnFooter>

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

@@ -4,64 +4,87 @@ 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, useNavigation } from "expo-router";
-import { useLayoutEffect } from "react";
-
-export default function EventTabsLayout() {
-  const navigation = useNavigation();
+import { router, Tabs, useLocalSearchParams } from "expo-router";
+import { View } from "react-native";
+import { MainColor } from "@/constants/color-palet";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Platform } from "react-native";
+import { OS_ANDROID_HEIGHT, OS_IOS_HEIGHT } from "@/constants/constans-value";
 
+function EventTabsWrapper() {
+  const insets = useSafeAreaInsets();
+  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
   const { from, category } = useLocalSearchParams<{
     from?: string;
     category?: string;
   }>();
 
-  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: "Beranda",
-          tabBarIcon: ({ color }) => <IconHome color={color} />,
+    <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
+      <Tabs
+        screenOptions={{
+          ...TabsStyles,
+          tabBarStyle: Platform.select({
+            ios: {
+              borderTopWidth: 0,
+              paddingTop: 12,
+              height: OS_IOS_HEIGHT,
+            },
+            android: {
+              borderTopWidth: 0,
+              paddingTop: 5,
+              height: OS_ANDROID_HEIGHT + paddingBottom,
+            },
+          }),
+          header: () => (
+            <AppHeader
+              title="Event"
+              left={
+                <BackButtonFromNotification
+                  from={from || ""}
+                  category={category}
+                />
+              }
+            />
+          ),
         }}
-      />
-      <Tabs.Screen
-        name="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>
+      >
+        <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>
   );
 }
+
+export default function EventTabsLayout() {
+  return <EventTabsWrapper />;
+}

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

@@ -10,6 +10,7 @@ import {
   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";
@@ -81,12 +82,17 @@ export default function EventDetailStatus() {
     <>
       <Stack.Screen
         options={{
-          title: `Detail ${status === "publish" ? "" : status}`,
-          headerLeft: () => <LeftButtonCustom />,
-          headerRight: () =>
-            status === "draft" ? (
-              <DotButton onPress={() => setOpenDrawer(true)} />
-            ) : null,
+          header: () => (
+            <AppHeader
+              title={`Detail ${status === "publish" ? "" : status}`}
+              left={<LeftButtonCustom />}
+              right={
+                status === "draft" ? (
+                  <DotButton onPress={() => setOpenDrawer(true)} />
+                ) : null
+              }
+            />
+          ),
         }}
       />
       <ViewWrapper>

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

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

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

@@ -7,6 +7,7 @@ import {
   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";
@@ -49,9 +50,13 @@ export default function EventDetailContribution() {
     <>
       <Stack.Screen
         options={{
-          title: `Detail kontribusi`,
-          headerLeft: () => <LeftButtonCustom />,
-          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+          header: () => (
+            <AppHeader
+              title="Detail kontribusi"
+              left={<LeftButtonCustom />}
+              right={<DotButton onPress={() => setOpenDrawer(true)} />}
+            />
+          ),
         }}
       />
       <ViewWrapper>

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

@@ -6,6 +6,7 @@ import {
   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";
@@ -44,9 +45,13 @@ export default function EventDetailHistory() {
     <>
       <Stack.Screen
         options={{
-          title: `Detail riwayat`,
-          headerLeft: () => <LeftButtonCustom />,
-          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+          header: () => (
+            <AppHeader
+              title="Detail riwayat"
+              left={<LeftButtonCustom />}
+              right={<DotButton onPress={() => setOpenDrawer(true)} />}
+            />
+          ),
         }}
       />
       <ViewWrapper>

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

@@ -8,6 +8,7 @@ import {
   MenuDrawerDynamicGrid,
   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";
@@ -156,9 +157,13 @@ export default function EventDetailPublish() {
     <>
       <Stack.Screen
         options={{
-          title: `Event Publish`,
-          headerLeft: () => <BackButton onPress={() => router.back()} />,
-          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+          header: () => (
+            <AppHeader
+              title="Event Publish"
+              left={<BackButton onPress={() => router.back()} />}
+              right={<DotButton onPress={() => setOpenDrawer(true)} />}
+            />
+          ),
         }}
       />
       <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,7 +88,11 @@ export default function ForumEdit() {
   };
 
   return (
-    <ViewWrapper footerComponent={buttonFooter()}>
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
+      footerComponent={buttonFooter()}
+    >
       {!loadingGetData ? (
         <TextAreaCustom
           placeholder="Ketik diskusi anda..."
@@ -102,6 +106,6 @@ export default function ForumEdit() {
       ) : (
         <LoaderCustom />
       )}
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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,13 +62,17 @@ export default function ForumOtherReportCommentar() {
 
   return (
     <>
-      <ViewWrapper footerComponent={handleSubmit}>
+      <OS_Wrapper
+        enableKeyboardHandling
+        contentPaddingBottom={250}
+        footerComponent={handleSubmit}
+      >
         <TextAreaCustom
           placeholder="Laporkan Komentar"
           value={value}
           onChangeText={setValue}
         />
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

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,13 +61,17 @@ export default function ForumOtherReportPosting() {
   );
   return (
     <>
-      <ViewWrapper footerComponent={handleSubmit}>
+      <OS_Wrapper
+        enableKeyboardHandling
+        contentPaddingBottom={250}
+        footerComponent={handleSubmit}
+      >
         <TextAreaCustom
           placeholder="Laporkan Diskusi"
           value={value}
           onChangeText={setValue}
         />
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

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

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

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

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

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 (
     <>
-      <ViewWrapper>
+      <OS_Wrapper>
         {isLoadingList ? (
           <LoaderCustom />
         ) : (
@@ -101,7 +101,7 @@ export default function ForumReportCommentar() {
             <Spacing />
           </StackCustom>
         )}
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

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 (
     <>
-      <ViewWrapper>
+      <OS_Wrapper>
         {isLoadingList ? (
           <LoaderCustom />
         ) : (
@@ -114,7 +114,7 @@ export default function ForumReportPosting() {
             <Spacing />
           </StackCustom>
         )}
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

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,7 +67,11 @@ export default function ForumCreate() {
   );
 
   return (
-    <ViewWrapper footerComponent={buttonFooter}>
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
+      footerComponent={buttonFooter}
+    >
       <TextAreaCustom
         placeholder="Ketik diskusi anda..."
         maxLength={1000}
@@ -75,6 +79,6 @@ export default function ForumCreate() {
         value={text}
         onChangeText={setText}
       />
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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

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

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

@@ -1,25 +1,27 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react-hooks/exhaustive-deps */
-import { BasicWrapper, StackCustom, ViewWrapper } from "@/components";
+import { BasicWrapper, Spacing, StackCustom, ViewWrapper } from "@/components";
+import AppHeader from "@/components/_ShareComponent/AppHeader";
 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, View } from "react-native";
+import { RefreshControl, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Platform } from "react-native";
 
 export default function Application() {
   const { token, user, userData } = useAuth();
@@ -27,6 +29,8 @@ 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(() => {
@@ -104,98 +108,95 @@ 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={{
-          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} />
-            ),
+          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} />
+                )
+              }
+            />
+          ),
         }}
       />
-      <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,
-              })}
+
+      <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]}
             />
-          ) : (
-            <View style={GStyles.tabBar}>
-              <View style={[GStyles.tabContainer, { paddingTop: 10 }]}>
-                {Array.from({ length: 4 }).map((e, index) => (
+          }
+          keyboardShouldPersistTaps="handled"
+        >
+          <StackCustom>
+            <Home_ImageSection />
+
+            {data && data ? (
+              <Home_FeatureSection />
+            ) : (
+              <View style={stylesHome.gridContainer}>
+                {Array.from({ length: 4 }).map((_, index) => (
                   <CustomSkeleton
                     key={index}
-                    height={40}
-                    width={40}
-                    radius={100}
+                    style={stylesHome.gridItem}
+                    radius={50}
                   />
                 ))}
               </View>
-            </View>
-          )
-        }
-      >
-        <StackCustom>
-          <Home_ImageSection />
+            )}
 
-          {data && data ? (
-            <Home_FeatureSection />
-          ) : (
-            <View style={stylesHome.gridContainer}>
-              {Array.from({ length: 4 }).map((item, index) => (
-                <CustomSkeleton
-                  key={index}
-                  style={stylesHome.gridItem}
-                  radius={50}
-                />
-              ))}
-            </View>
-          )}
+            {data ? (
+              <Home_BottomFeatureSection listData={listData} />
+            ) : (
+              <CustomSkeleton height={150} />
+            )}
+          </StackCustom>
+        </ScrollView>
 
-          {data ? (
-            <Home_BottomFeatureSection listData={listData} />
-          ) : (
-            <CustomSkeleton height={200} />
-          )}
-        </StackCustom>
-      </ViewWrapper>
+        {/* 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>
     </>
   );
 }

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

@@ -4,80 +4,105 @@ 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";
 
-export default function InvestmentTabsLayout() {
-  // const navigation = useNavigation();
+function InvestmentTabsWrapper() {
+  const insets = useSafeAreaInsets();
+  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
+  const navigation = useNavigation();
 
-  // const { from, category } = useLocalSearchParams<{
-  //   from?: string;
-  //   category?: string;
-  // }>();
+  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]);
+  // Atur header secara dinamis
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerLeft: () => (
+        <BackButtonFromNotification
+          from={from || ""}
+          category={category}
+        />
+      ),
+    });
+  }, [from, category, 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}
-            />
-          ),
+    <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="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>
+      >
+        <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 />;
+}

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

@@ -10,6 +10,7 @@ import {
   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";
@@ -30,13 +31,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({
@@ -44,7 +45,7 @@ export default function InvestmentDetailHolding() {
           authorId: user?.id,
           category: "invoice",
         });
-  
+
         console.log("[DATA]", JSON.stringify(response.data, null, 2));
         setData(response.data);
       } catch (error) {
@@ -76,14 +77,19 @@ export default function InvestmentDetailHolding() {
     <>
       <Stack.Screen
         options={{
-          title: `Detail ${_.startCase(status as string)}`,
-          headerLeft: () => <BackButton />,
-          headerRight: () =>
-            status === "draft" ? (
-              <DotButton onPress={() => setOpenDrawerDraft(true)} />
-            ) : status === "publish" ? (
-              <DotButton onPress={() => setOpenDrawerPublish(true)} />
-            ) : null,
+          header: () => (
+            <AppHeader
+              title={`Detail ${_.startCase(status as string)}`}
+              left={<BackButton />}
+              right={
+                status === "draft" ? (
+                  <DotButton onPress={() => setOpenDrawerDraft(true)} />
+                ) : status === "publish" ? (
+                  <DotButton onPress={() => setOpenDrawerPublish(true)} />
+                ) : null
+              }
+            />
+          ),
         }}
       />
 

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

@@ -11,6 +11,7 @@ import {
   TextCustom,
   ViewWrapper,
 } from "@/components";
+import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconTrash } from "@/components/_Icon/IconTrash";
 import { useAuth } from "@/hooks/use-auth";
 import {
@@ -56,12 +57,17 @@ export default function InvestmentNews() {
     <>
       <Stack.Screen
         options={{
-          title: "Detail Berita",
-          headerLeft: () => <BackButton />,
-          headerRight: () =>
-            user?.id === data?.authorId && (
-              <DotButton onPress={() => setOpenDrawer(true)} />
-            ),
+          header: () => (
+            <AppHeader
+              title="Detail Berita"
+              left={<BackButton />}
+              right={
+                user?.id === data?.authorId && (
+                  <DotButton onPress={() => setOpenDrawer(true)} />
+                )
+              }
+            />
+          ),
         }}
       />
       <ViewWrapper>

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

@@ -6,6 +6,7 @@ import {
   MenuDrawerDynamicGrid,
   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,14 +107,19 @@ export default function InvestmentDetailStatus() {
     <>
       <Stack.Screen
         options={{
-          title: `Detail ${_.startCase(status as string)}`,
-          headerLeft: () => <BackButton />,
-          headerRight: () =>
-            status === "draft" ? (
-              <DotButton onPress={() => setOpenDrawerDraft(true)} />
-            ) : status === "publish" ? (
-              <DotButton onPress={() => setOpenDrawerPublish(true)} />
-            ) : null,
+          header: () => (
+            <AppHeader
+              title={`Detail ${_.startCase(status as string)}`}
+              left={<BackButton />}
+              right={
+                status === "draft" ? (
+                  <DotButton onPress={() => setOpenDrawerDraft(true)} />
+                ) : status === "publish" ? (
+                  <DotButton onPress={() => setOpenDrawerPublish(true)} />
+                ) : null
+              }
+            />
+          ),
         }}
       />
 

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

@@ -6,6 +6,7 @@ import {
   MenuDrawerDynamicGrid,
   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";
@@ -105,14 +106,19 @@ export default function InvestmentDetail() {
     <>
       <Stack.Screen
         options={{
-          title: `Detail ${_.startCase(status as string)}`,
-          headerLeft: () => <BackButton />,
-          headerRight: () =>
-            status === "draft" ? (
-              <DotButton onPress={() => setOpenDrawerDraft(true)} />
-            ) : status === "publish" ? (
-              <DotButton onPress={() => setOpenDrawerPublish(true)} />
-            ) : null,
+          header: () => (
+            <AppHeader
+              title={`Detail ${_.startCase(status as string)}`}
+              left={<BackButton />}
+              right={
+                status === "draft" ? (
+                  <DotButton onPress={() => setOpenDrawerDraft(true)} />
+                ) : status === "publish" ? (
+                  <DotButton onPress={() => setOpenDrawerPublish(true)} />
+                ) : null
+              }
+            />
+          ),
         }}
       />
 

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

@@ -1,37 +1,60 @@
 /* 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 {
-  router,
-  Tabs,
-  useLocalSearchParams,
-  useNavigation
-} from "expo-router";
-import { useLayoutEffect } from "react";
-
-export default function JobTabsLayout() {
-  const navigation = useNavigation();
+  OS_ANDROID_HEIGHT,
+  OS_ANDROID_PADDING_TOP,
+  OS_IOS_HEIGHT,
+  OS_IOS_PADDING_TOP,
+} from "@/constants/constans-value";
 
+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 (
-    <>
-      <Tabs screenOptions={TabsStyles}>
+    <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.Screen
           name="index"
           options={{
@@ -56,6 +79,10 @@ export default function JobTabsLayout() {
           }}
         />
       </Tabs>
-    </>
+    </View>
   );
 }
+
+export default function JobTabsLayout() {
+  return <JobTabsWrapper />;
+}

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

@@ -5,10 +5,11 @@ 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";
@@ -22,6 +23,7 @@ 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();
@@ -58,15 +60,20 @@ export default function JobDetailStatus() {
     <>
       <Stack.Screen
         options={{
-          title: `Detail`,
-          headerLeft: () => <BackButton />,
-          headerRight: () =>
-            status === "draft" ? (
-              <DotButton onPress={() => setOpenDrawer(true)} />
-            ) : null,
+          header: () => (
+            <AppHeader
+              title="Detail"
+              left={<BackButton />}
+              right={
+                status === "draft" ? (
+                  <DotButton onPress={() => setOpenDrawer(true)} />
+                ) : null
+              }
+            />
+          ),
         }}
       />
-      <ViewWrapper>
+      <OS_Wrapper >
         {isLoadData ? (
           <LoaderCustom />
         ) : (
@@ -77,7 +84,7 @@ export default function JobDetailStatus() {
                 (status === "draft" || status === "reject") && (
                   <ReportBox text={data?.catatan} />
                 )}
-                
+
               <Job_BoxDetailSection data={data} />
               <Job_ButtonStatusSection
                 id={id as string}
@@ -90,7 +97,7 @@ export default function JobDetailStatus() {
             <Spacing />
           </>
         )}
-      </ViewWrapper>
+      </OS_Wrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

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

@@ -1,198 +1,5 @@
-/* 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";
+import { Job_ScreenEdit } from "@/screens/Job/ScreenJobEdit";
 
 export default function JobEdit() {
-  const { id } = useLocalSearchParams();
-  const [data, setData] = useState<any>({
-    title: "",
-    content: "",
-    deskripsi: "",
-  });
-  const [isLoadData, setIsLoadData] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const [imageUri, setImageUri] = useState<string | null>(null);
-
-  useEffect(() => {
-    onLoadData();
-  }, [id]);
-
-  const onLoadData = async () => {
-    try {
-      setIsLoadData(true);
-      const response = await apiJobGetOne({ id: id as string });
-      if (response.success) {
-        setData(response.data);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setIsLoadData(false);
-    }
-  };
-
-  const handlerOnUpdate = async () => {
-    if (!data.title || !data.content || !data.deskripsi) {
-      Toast.show({
-        type: "info",
-        text1: "Info",
-        text2: "Harap isi semua data",
-      });
-      return;
-    }
-
-    try {
-      setIsLoading(true);
-      let newImageId = "";
-
-      if (imageUri) {
-        const responseUploadImage = await uploadFileService({
-          imageUri: imageUri,
-          dirId: DIRECTORY_ID.job_image,
-        });
-
-        if (responseUploadImage.success) {
-          newImageId = responseUploadImage.data.id;
-        }
-      }
-
-      if (data?.imageId) {
-        const responseDeleteImage = await deleteFileService({
-          id: data.imageId,
-        });
-
-        if (!responseDeleteImage.success) {
-          console.log("[ERROR DELETE IMAGE]", responseDeleteImage.message);
-        }
-      }
-
-      const newData = {
-        title: data.title,
-        content: data.content,
-        deskripsi: data.deskripsi,
-        imageId: newImageId,
-      };
-
-      const response = await apiJobUpdateData({
-        id: id as string,
-        data: newData,
-        category: "edit",
-      });
-
-      if (response.success) {
-        Toast.show({
-          type: "success",
-          text1: response.message,
-        });
-        router.back();
-      } else {
-        Toast.show({
-          type: "info",
-          text1: "Info",
-          text2: response.message,
-        });
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const buttonSubmit = () => {
-    return (
-      <>
-        <ButtonCustom 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>
-  );
+  return <Job_ScreenEdit />;
 }

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

@@ -1,168 +1,5 @@
-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";
+import { Job_ScreenCreate } from "@/screens/Job/ScreenJobCreate";
 
 export default function JobCreate() {
-  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>
-  );
+  return <Job_ScreenCreate />;
 }

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

@@ -1,365 +1,5 @@
-/* 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";
+import { ScreenPortofolioCreate } from "@/screens/Portofolio/ScreenPortofolioCreate";
 
 export default function PortofolioCreate() {
-  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>
-  );
+  return <ScreenPortofolioCreate />;
 }

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

@@ -3,7 +3,7 @@ import {
     BoxButtonOnFooter,
     ButtonCenteredOnly,
     ButtonCustom,
-    ViewWrapper
+    OS_Wrapper
 } 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 (
     <>
-      <ViewWrapper footerComponent={buttonFooter}>
+      <OS_Wrapper footerComponent={buttonFooter}>
         <BaseBox
           style={{
             alignItems: "center",
@@ -146,7 +146,7 @@ export default function PortofolioEditLogo() {
         >
           Upload
         </ButtonCenteredOnly>
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

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,7 +91,11 @@ export default function PortofolioEditSocialMedia() {
 
   return (
     <>
-      <ViewWrapper footerComponent={buttonFooter}>
+      <OS_Wrapper
+        enableKeyboardHandling
+        contentPaddingBottom={250}
+        footerComponent={buttonFooter}
+      >
         <TextInputCustom
           value={data.tiktok}
           onChangeText={(value) => setData({ ...data, tiktok: value })}
@@ -122,7 +126,7 @@ export default function PortofolioEditSocialMedia() {
           label="Youtube"
           placeholder="Masukkan youtube"
         />
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

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

@@ -4,7 +4,8 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   CenterCustom,
-  NewWrapper,
+  OS_Wrapper,
+  PhoneInputCustom,
   SelectCustom,
   Spacing,
   StackCustom,
@@ -15,6 +16,11 @@ 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,
@@ -32,7 +38,6 @@ 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";
 
@@ -59,8 +64,9 @@ export default function PortofolioEdit() {
   const { id } = useLocalSearchParams();
   const [isLoading, setIsLoading] = useState(false);
   const [data, setData] = useState<any>({});
-
-  const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
+  const [phoneNumber, setPhoneNumber] = useState<string>("");
+  const [selectedCountry, setSelectedCountry] =
+    useState<CountryData>(DEFAULT_COUNTRY);
   const [bidangBisnis, setBidangBisnis] = useState<
     IMasterBidangBisnis[] | null
   >(null);
@@ -72,12 +78,42 @@ export default function PortofolioEdit() {
     IListSubBidangSelected[]
   >([]);
 
-  function handleInputValue(phoneNumber: string) {
-    setData({ ...data, tlpn: phoneNumber });
+  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 handleSelectedCountry(country: ICountry) {
+  function handleCountryChange(country: CountryData) {
     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 () => {
@@ -122,8 +158,27 @@ export default function PortofolioEdit() {
     const response = await apiGetOnePortofolio({ id: id });
 
     if (response.success) {
-      const fixNumber = response.data.tlpn.replace("62", "");
-      setData({ ...response.data, tlpn: fixNumber });
+      // 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 });
 
       // Cek apakah ada sub bidang bisnis yang terpilih
       const prevSubBidang = response.data.Portofolio_BidangDanSubBidangBisnis;
@@ -244,15 +299,11 @@ 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: realNumber,
+      tlpn: data.tlpn, // Already formatted by PhoneInputCustom
       deskripsi: data.deskripsi,
       masterBidangBisnisId: data.masterBidangBisnisId,
       subBidang: listSubBidangSelected,
@@ -317,162 +368,159 @@ export default function PortofolioEdit() {
     </BoxButtonOnFooter>
   );
 
-  if (!bidangBisnis || !subBidangBisnis) {
-    return (
-      <>
-        <NewWrapper>
-          <ListSkeletonComponent height={80} />
-        </NewWrapper>
-      </>
-    );
-  }
-
   return (
     <>
-      <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);
-            }}
-          />
-
-          {listSubBidangSelected.map((item, index) => {
-            // Filter data untuk select sub bidang, menghilangkan yang sudah dipilih kecuali untuk item ini sendiri
-            const selectedIds = listSubBidangSelected
-              .filter((_, i) => i !== index)
-              .map((s) => s.MasterSubBidangBisnis?.id)
-              .filter((id) => id); // Filter hanya yang memiliki id (tidak kosong)
-
-            const availableSubBidangOptions = (selectedSubBidang || [])
-              .filter((sub: any) => {
-                // Tampilkan jika ini adalah opsi yang dipilih saat ini atau belum dipilih di sub bidang lainnya
-
-                return (
-                  sub.id === item.MasterSubBidangBisnis?.id ||
-                  !selectedIds.includes(sub.id)
-                );
-              })
-              .map((sub: any) => ({
-                value: sub.id,
-                label: sub.name,
-              }));
-
-            return (
-              <SelectCustom
-                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} />
-            <PhoneInput
-              value={data.tlpn}
-              onChangePhoneNumber={handleInputValue}
-              selectedCountry={selectedCountry}
-              onChangeSelectedCountry={handleSelectedCountry}
-              defaultCountry="ID"
-              placeholder="xxx-xxx-xxx"
+      <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 })
+              }
             />
-          </View>
-          <Spacing />
 
-          <TextInputCustom
-            required
-            label="Alamat Bisnis"
-            placeholder="Masukkan alamat bisnis"
-            value={data.alamatKantor}
-            onChangeText={(value: any) =>
-              setData({ ...data, alamatKantor: value })
-            }
-          />
+            <SelectCustom
+              label="Bidang Usaha"
+              required
+              data={bidangBisnis?.map((item) => ({
+                label: item.name,
+                value: item.id,
+              }))}
+              value={data.masterBidangBisnisId}
+              onChange={(value: any) => {
+                handleBidangBisnisChange(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>
+            {listSubBidangSelected.map((item, index) => {
+              // Filter data untuk select sub bidang, menghilangkan yang sudah dipilih kecuali untuk item ini sendiri
+              const selectedIds = listSubBidangSelected
+                .filter((_, i) => i !== index)
+                .map((s) => s.MasterSubBidangBisnis?.id)
+                .filter((id) => id); // Filter hanya yang memiliki id (tidak kosong)
+
+              const availableSubBidangOptions = (selectedSubBidang || [])
+                .filter((sub: any) => {
+                  // Tampilkan jika ini adalah opsi yang dipilih saat ini atau belum dipilih di sub bidang lainnya
+
+                  return (
+                    sub.id === item.MasterSubBidangBisnis?.id ||
+                    !selectedIds.includes(sub.id)
+                  );
+                })
+                .map((sub: any) => ({
+                  value: sub.id,
+                  label: sub.name,
+                }));
+
+              return (
+                <SelectCustom
+                  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"
+              />
+            </View>
+            <Spacing />
+
+            <TextInputCustom
+              required
+              label="Alamat Bisnis"
+              placeholder="Masukkan alamat bisnis"
+              value={data.alamatKantor}
+              onChangeText={(value: any) =>
+                setData({ ...data, alamatKantor: value })
+              }
+            />
+
+            <TextAreaCustom
+              label="Deskripsi Bisnis"
+              placeholder="Masukkan deskripsi bisnis"
+              value={data.deskripsi}
+              onChangeText={(value: any) =>
+                setData({ ...data, deskripsi: value })
+              }
+              autosize
+              minRows={2}
+              maxRows={5}
+              required
+              showCount
+              maxLength={1000}
+            />
+            <Spacing />
+          </StackCustom>
+        )}
+      </OS_Wrapper>
     </>
   );
 }

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

@@ -4,14 +4,15 @@ 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";
@@ -72,23 +73,26 @@ export default function Portofolio() {
       {/* Header */}
       <Stack.Screen
         options={{
-          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,
+          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>
+                )
+              }
+            />
+          ),
         }}
       />
-      <ViewWrapper>
+      <OS_Wrapper>
         {!data || !profileId ? (
             <StackCustom>
             <CustomSkeleton height={400} />
@@ -121,7 +125,7 @@ export default function Portofolio() {
             <Spacing />
           </StackCustom>
         )}
-      </ViewWrapper>
+      </OS_Wrapper>
 
       {/* 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,8 +7,9 @@ export default function PortofolioLayout() {
     <>
       <Stack
         screenOptions={{
-          ...HeaderStyles,
-          headerLeft: () => <LeftButtonCustom />,
+          header: () => (
+            <AppHeader title="Portofolio" left={<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 (
     <>
-      <NewWrapper
+      <OS_Wrapper
         // headerComponent={renderHeader()}
         listData={listData}
         renderItem={renderItem}

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

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

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

@@ -1,11 +1,12 @@
 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";
@@ -70,7 +71,9 @@ export default function ProfileEdit() {
   };
 
   return (
-    <ViewWrapper
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
       footerComponent={
         <BoxButtonOnFooter>
           <ButtonCustom isLoading={isLoading} onPress={handleUpdate}>
@@ -119,6 +122,6 @@ export default function ProfileEdit() {
           }}
         />
       </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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

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

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 (
-    <ViewWrapper footerComponent={buttonFooter}>
+    <OS_Wrapper footerComponent={buttonFooter}>
       <BaseBox
         style={{ alignItems: "center", justifyContent: "center", height: 250 }}
       >
@@ -143,6 +143,6 @@ export default function UpdatePhotoProfile() {
       >
         Upload
       </ButtonCenteredOnly>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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

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

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

@@ -2,16 +2,17 @@ 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";
@@ -155,7 +156,11 @@ export default function CreateProfile() {
   );
 
   return (
-    <ViewWrapper footerComponent={footerComponent}>
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
+      footerComponent={footerComponent}
+    >
       <StackCustom>
         <InformationBox text="Upload foto profile anda." />
         <View style={{ alignItems: "center" }}>
@@ -241,6 +246,6 @@ export default function CreateProfile() {
         />
         <Spacing />
       </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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

@@ -4,64 +4,86 @@ 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 { Tabs, useLocalSearchParams, useNavigation, router } from "expo-router";
-import { useLayoutEffect } from "react";
-
-export default function VotingTabsLayout() {
-  const navigation = useNavigation();
+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";
 
+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 (
-    <Tabs screenOptions={TabsStyles}>
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: "Beranda",
-          tabBarIcon: ({ color }) => <IconHome color={color} />,
+    <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,
+            },
+          }),
+          header: () => (
+            <AppHeader
+              title="Voting"
+              left={
+                <BackButtonFromNotification
+                  from={from || ""}
+                  category={category}
+                />
+              }
+            />
+          ),
         }}
-      />
-      <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>
+      >
+        <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>
   );
 }
+
+export default function VotingTabsLayout() {
+  return <VotingTabsWrapper />;
+}

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

@@ -12,6 +12,7 @@ import {
   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";
@@ -103,14 +104,19 @@ export default function VotingDetailStatus() {
     <>
       <Stack.Screen
         options={{
-          title: `Detail`,
-          headerLeft: () => <BackButton />,
-          headerRight: () =>
-            status === "draft" ? (
-              <DotButton onPress={() => setOpenDrawerDraft(true)} />
-            ) : status === "publish" ? (
-              <DotButton onPress={() => setOpenDrawerPublish(true)} />
-            ) : null,
+          header: () => (
+            <AppHeader
+              title="Detail"
+              left={<BackButton />}
+              right={
+                status === "draft" ? (
+                  <DotButton onPress={() => setOpenDrawerDraft(true)} />
+                ) : status === "publish" ? (
+                  <DotButton onPress={() => setOpenDrawerPublish(true)} />
+                ) : null
+              }
+            />
+          ),
         }}
       />
       <ViewWrapper>

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

@@ -9,6 +9,7 @@ import {
   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";
@@ -81,10 +82,14 @@ export default function VotingDetailContribution() {
     <>
       <Stack.Screen
         options={{
-          title: "Detail Kontribusi",
-          headerLeft: () => <BackButton />,
-          headerRight: () => (
-            <DotButton onPress={() => setOpenDrawerPublish(true)} />
+          header: () => (
+            <AppHeader
+              title="Detail Kontribusi"
+              left={<BackButton />}
+              right={
+                <DotButton onPress={() => setOpenDrawerPublish(true)} />
+              }
+            />
           ),
         }}
       />

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

@@ -9,6 +9,7 @@ import {
   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,10 +83,14 @@ export default function VotingDetailHistory() {
     <>
       <Stack.Screen
         options={{
-          title: "Riwayat Voting",
-          headerLeft: () => <BackButton />,
-          headerRight: () => (
-            <DotButton onPress={() => setOpenDrawerPublish(true)} />
+          header: () => (
+            <AppHeader
+              title="Riwayat Voting"
+              left={<BackButton />}
+              right={
+                <DotButton onPress={() => setOpenDrawerPublish(true)} />
+              }
+            />
           ),
         }}
       />

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

@@ -11,6 +11,7 @@ import {
   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";
@@ -142,10 +143,14 @@ export default function VotingDetail() {
     <>
       <Stack.Screen
         options={{
-          title: `Detail Voting`,
-          headerLeft: () => <BackButton />,
-          headerRight: () => (
-            <DotButton onPress={() => setOpenDrawerPublish(true)} />
+          header: () => (
+            <AppHeader
+              title="Detail Voting"
+              left={<BackButton />}
+              right={
+                <DotButton onPress={() => setOpenDrawerPublish(true)} />
+              }
+            />
           ),
         }}
       />

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

@@ -3,7 +3,7 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   InformationBox,
-  NewWrapper,
+  OS_Wrapper,
   StackCustom
 } from "@/components";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
@@ -82,7 +82,7 @@ export default function WaitingRoom() {
 
   return (
     <>
-      <NewWrapper
+      <OS_Wrapper
         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>
-      </NewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

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 screenOptions={HeaderStyles}>
+      <Stack>
         <Stack.Screen name="(user)" options={{ headerShown: false }} />
         <Stack.Screen name="admin" options={{ headerShown: false }} />
 
@@ -28,8 +28,7 @@ function ApplicationStack() {
         <Stack.Screen
           name="(image)/take-picture/[id]/index"
           options={{
-            title: "Ambil Gambar",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Ambil Gambar" />,
           }}
         />
 
@@ -37,8 +36,7 @@ function ApplicationStack() {
         <Stack.Screen
           name="(image)/preview-image/[id]/index"
           options={{
-            title: "Preview Gambar",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Preview Gambar" />,
           }}
         />
       </Stack>

app/(application)/admin/_layout.tsx

@@ -6,6 +6,7 @@ import {
   StackCustom,
   TextCustom,
 } from "@/components";
+import AppHeader from "@/components/_ShareComponent/AppHeader";
 import DrawerAdmin from "@/components/Drawer/DrawerAdmin";
 import NavbarMenu from "@/components/Drawer/NavbarMenu";
 import NavbarMenu_V2 from "@/components/Drawer/NavbarMenu_V2";
@@ -17,6 +18,7 @@ import {
   ICON_SIZE_XLARGE,
 } from "@/constants/constans-value";
 import { useAuth } from "@/hooks/use-auth";
+import { useNotificationStore } from "@/hooks/use-notification-store";
 import AdminNotificationBell from "@/screens/Admin/AdminNotificationBell";
 import {
   adminListMenu,
@@ -34,12 +36,28 @@ import { useState } from "react";
 export default function AdminLayout() {
   const [openDrawerNavbar, setOpenDrawerNavbar] = useState(false);
   const [openDrawerUser, setOpenDrawerUser] = useState(false);
-  // const [user, setUser] = useState(null);
-
   const { logout, user } = useAuth();
 
   console.log("[USER LAYOUT]", JSON.stringify(user, null, 2));
 
+  const headerLeft = () => (
+    <Ionicons
+      name="menu"
+      size={ICON_SIZE_XLARGE}
+      color={MainColor.white}
+      onPress={() => setOpenDrawerNavbar(true)}
+    />
+  );
+
+  const headerRight = () => (
+    <FontAwesome6
+      name="circle-user"
+      size={ICON_SIZE_MEDIUM}
+      color={MainColor.white}
+      onPress={() => setOpenDrawerUser(true)}
+    />
+  );
+
   return (
     <>
       <Stack
@@ -51,20 +69,33 @@ export default function AdminLayout() {
           contentStyle: {
             borderBottomColor: AccentColor.blue,
           },
-          headerLeft: () => (
-            <Ionicons
-              name="menu"
-              size={ICON_SIZE_XLARGE}
-              color={MainColor.white}
-              onPress={() => setOpenDrawerNavbar(true)}
-            />
-          ),
-          headerRight: () => (
-            <FontAwesome6
-              name="circle-user"
-              size={ICON_SIZE_MEDIUM}
-              color={MainColor.white}
-              onPress={() => setOpenDrawerUser(true)}
+
+          //  headerLeft: () => (
+          //   <Ionicons
+          //     name="menu"
+          //     size={ICON_SIZE_XLARGE}
+          //     color={MainColor.white}
+          //     onPress={() => setOpenDrawerNavbar(true)}
+          //   />
+          // ),
+          // headerRight: () => (
+          //   <FontAwesome6
+          //     name="circle-user"
+          //     size={ICON_SIZE_MEDIUM}
+          //     color={MainColor.white}
+          //     onPress={() => setOpenDrawerUser(true)}
+          //   />
+          // ),
+
+
+
+          
+          header: () => (
+            <AppHeader
+              title="HIPMI DASHBOARD"
+              showBack={false}
+              left={headerLeft()}
+              right={headerRight()}
             />
           ),
         }}

app/(application)/admin/user-access/[id]/index.tsx

@@ -3,9 +3,9 @@ import {
     BoxButtonOnFooter,
     ButtonCustom,
     LoaderCustom,
+    OS_Wrapper,
     StackCustom,
     TextCustom,
-    ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import GridTwoView from "@/components/_ShareComponent/GridTwoView";
@@ -76,7 +76,7 @@ export default function AdminUserAccessDetail() {
 
   return (
     <>
-      <ViewWrapper
+      <OS_Wrapper
         headerComponent={<AdminBackButtonAntTitle title={`Detail User`} />}
         footerComponent={
           data && (
@@ -108,7 +108,7 @@ export default function AdminUserAccessDetail() {
             ))}
           </StackCustom>
         )}
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

app/+not-found.tsx

@@ -1,4 +1,5 @@
 import { BackButton, StackCustom, TextCustom, ViewWrapper } from "@/components";
+import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { router, Stack } from "expo-router";
 
 export default function NotFoundScreen() {
@@ -15,7 +16,7 @@ export default function NotFoundScreen() {
   return (
     <>
       <Stack.Screen
-        options={{ headerShown: true, title: "", headerLeft: () => <BackButton onPress={() => handleBack()} /> }}
+        options={{ header: () => <AppHeader title="" left={<BackButton onPress={() => handleBack()} />} /> }}
       />
       <ViewWrapper>
         <StackCustom

bun.lock

@@ -41,6 +41,7 @@
         "expo-symbols": "~1.0.7",
         "expo-system-ui": "~6.0.7",
         "expo-web-browser": "~15.0.9",
+        "libphonenumber-js": "^1.12.40",
         "lodash": "^4.17.21",
         "moti": "^0.30.0",
         "react": "19.1.0",
@@ -1772,6 +1773,8 @@
 
     "levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="],
 
+    "libphonenumber-js": ["libphonenumber-js@1.12.40", "", {}, "sha512-HKGs7GowShNls3Zh+7DTr6wYpPk5jC78l508yQQY3e8ZgJChM3A9JZghmMJZuK+5bogSfuTafpjksGSR3aMIEg=="],
+
     "lighthouse-logger": ["lighthouse-logger@1.4.2", "", { "dependencies": { "debug": "^2.6.9", "marky": "^1.2.2" } }, "sha512-gPWxznF6TKmUHrOQjlVo2UbaL2EJ71mb2CCeRs/2qBpi4L/g4LUVc9+3lKQ6DTUZwJswfM7ainGrLO1+fOqa2g=="],
 
     "lightningcss": ["lightningcss@1.31.1", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.31.1", "lightningcss-darwin-arm64": "1.31.1", "lightningcss-darwin-x64": "1.31.1", "lightningcss-freebsd-x64": "1.31.1", "lightningcss-linux-arm-gnueabihf": "1.31.1", "lightningcss-linux-arm64-gnu": "1.31.1", "lightningcss-linux-arm64-musl": "1.31.1", "lightningcss-linux-x64-gnu": "1.31.1", "lightningcss-linux-x64-musl": "1.31.1", "lightningcss-win32-arm64-msvc": "1.31.1", "lightningcss-win32-x64-msvc": "1.31.1" } }, "sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ=="],

components/Button/BackButtonFromNotification.tsx

@@ -12,14 +12,15 @@ export default function BackButtonFromNotification({
   return (
     <>
       <BackButton
+
         onPress={() => {
           if (from === "notifications") {
-            router.replace(`/notifications?category=${category}`);
+            router.push(`/notifications?category=${category}`);
           } else {
             if (from) {
-              router.replace(`/${from}` as any);
+              router.back();
             } else {
-              router.navigate("/home");
+              router.back();
             }
           }
         }}

components/PhoneInput/PhoneInputCustom.tsx

@@ -0,0 +1,256 @@
+import { MainColor } from "@/constants/color-palet";
+import {
+  DEFAULT_COUNTRY,
+  searchCountries,
+  type CountryData,
+} from "@/constants/countries";
+import { useState } from "react";
+import {
+  Modal,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+
+interface PhoneInputProps {
+  value: string;
+  onChangePhoneNumber: (phone: string) => void;
+  selectedCountry?: CountryData;
+  onChangeCountry: (country: CountryData) => void;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+export default function PhoneInputCustom({
+  value,
+  onChangePhoneNumber,
+  selectedCountry = DEFAULT_COUNTRY,
+  onChangeCountry,
+  placeholder = "Masukkan nomor",
+  disabled = false,
+}: PhoneInputProps) {
+  const [countryPickerVisible, setCountryPickerVisible] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredCountries = searchCountries(searchQuery);
+
+  const handleSelectCountry = (country: CountryData) => {
+    onChangeCountry(country);
+    setCountryPickerVisible(false);
+    setSearchQuery("");
+  };
+
+  const handlePhoneChange = (text: string) => {
+    // Only allow numbers and spaces
+    const cleaned = text.replace(/[^\d\s]/g, "");
+    onChangePhoneNumber(cleaned);
+  };
+
+  return (
+    <>
+      {/* Phone Input Field */}
+      <View style={styles.container}>
+        <TouchableOpacity
+          style={styles.countryPickerButton}
+          onPress={() => setCountryPickerVisible(true)}
+          disabled={disabled}
+          activeOpacity={0.7}
+        >
+          <Text style={styles.countryCodeText}>+{selectedCountry.callingCode}</Text>
+        </TouchableOpacity>
+
+        <View style={styles.divider} />
+
+        <TextInput
+          style={[styles.phoneInput, disabled && styles.disabledInput]}
+          placeholder={placeholder}
+          placeholderTextColor={MainColor.placeholder}
+          value={value}
+          onChangeText={handlePhoneChange}
+          keyboardType="phone-pad"
+          autoComplete="tel"
+          importantForAutofill="yes"
+          editable={!disabled}
+        />
+      </View>
+
+      {/* Country Picker Modal */}
+      <Modal
+        visible={countryPickerVisible}
+        transparent
+        animationType="slide"
+        onRequestClose={() => setCountryPickerVisible(false)}
+      >
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalContent}>
+            <View style={styles.modalHeader}>
+              <Text style={styles.modalTitle}>Pilih Negara</Text>
+              <TouchableOpacity onPress={() => setCountryPickerVisible(false)}>
+                <Text style={styles.modalClose}>✕</Text>
+              </TouchableOpacity>
+            </View>
+
+            <TextInput
+              style={styles.searchInput}
+              placeholder="Cari negara atau kode..."
+              placeholderTextColor={MainColor.placeholder}
+              value={searchQuery}
+              onChangeText={setSearchQuery}
+              autoFocus
+            />
+
+            <ScrollView style={styles.countryList}>
+              {filteredCountries.map((country) => (
+                <TouchableOpacity
+                  key={country.code}
+                  style={[
+                    styles.countryItem,
+                    selectedCountry.code === country.code &&
+                      styles.countryItemSelected,
+                  ]}
+                  onPress={() => handleSelectCountry(country)}
+                  activeOpacity={0.7}
+                >
+                  <View style={styles.countryInfo}>
+                    <Text style={styles.countryName}>{country.name}</Text>
+                    <Text style={styles.countryCode}>+{country.callingCode}</Text>
+                  </View>
+                  {selectedCountry.code === country.code && (
+                    <Text style={styles.checkmark}>✓</Text>
+                  )}
+                </TouchableOpacity>
+              ))}
+            </ScrollView>
+          </View>
+        </View>
+      </Modal>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  // Container
+  container: {
+    flexDirection: "row",
+    backgroundColor: MainColor.white,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: MainColor.white_gray,
+    marginBottom: 16,
+    overflow: "hidden",
+  },
+  // Country Picker Button
+  countryPickerButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    backgroundColor: MainColor.text_input,
+    borderRightWidth: 1,
+    borderRightColor: MainColor.white_gray,
+  },
+  countryCodeText: {
+    fontSize: 16,
+    color: MainColor.black,
+    fontWeight: "600",
+  },
+  dropdownIcon: {
+    fontSize: 18,
+    color: MainColor.placeholder,
+    marginLeft: 4,
+  },
+  // Divider
+  divider: {
+    width: 1,
+    backgroundColor: MainColor.white_gray,
+  },
+  // Phone Input
+  phoneInput: {
+    flex: 1,
+    paddingVertical: 14,
+    paddingHorizontal: 12,
+    fontSize: 16,
+    color: MainColor.black,
+  },
+  disabledInput: {
+    backgroundColor: MainColor.text_input,
+    color: MainColor.placeholder,
+  },
+  // Modal
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "flex-end",
+  },
+  modalContent: {
+    backgroundColor: MainColor.white,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    maxHeight: "80%",
+    paddingBottom: 34,
+  },
+  modalHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: 20,
+    borderBottomWidth: 1,
+    borderBottomColor: MainColor.white_gray,
+  },
+  modalTitle: {
+    fontSize: 18,
+    fontWeight: "bold",
+    color: MainColor.black,
+  },
+  modalClose: {
+    fontSize: 24,
+    color: MainColor.placeholder,
+    padding: 5,
+  },
+  // Search Input
+  searchInput: {
+    backgroundColor: MainColor.text_input,
+    margin: 16,
+    padding: 12,
+    borderRadius: 8,
+    fontSize: 16,
+    color: MainColor.black,
+  },
+  // Country List
+  countryList: {
+    paddingHorizontal: 16,
+  },
+  countryItem: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: MainColor.white_gray,
+  },
+  countryItemSelected: {
+    backgroundColor: MainColor.soft_darkblue + "15",
+  },
+  countryInfo: {
+    flex: 1,
+  },
+  countryName: {
+    fontSize: 16,
+    color: MainColor.black,
+    fontWeight: "500",
+  },
+  countryCode: {
+    fontSize: 14,
+    color: MainColor.placeholder,
+    marginTop: 2,
+  },
+  checkmark: {
+    fontSize: 20,
+    color: MainColor.green,
+    fontWeight: "bold",
+  },
+});

components/_ShareComponent/AndroidWrapper.tsx

@@ -0,0 +1,254 @@
+// @/components/AndroidWrapper.tsx
+// Android Wrapper - Based on NewWrapper_V2 (with keyboard handling for Android)
+import { MainColor } from "@/constants/color-palet";
+import { OS_HEIGHT } from "@/constants/constans-value";
+import { GStyles } from "@/styles/global-styles";
+import {
+  ImageBackground,
+  Keyboard,
+  KeyboardAvoidingView,
+  ScrollView,
+  FlatList,
+  TouchableWithoutFeedback,
+  View,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
+import {
+  NativeSafeAreaViewProps,
+  SafeAreaView,
+} from "react-native-safe-area-context";
+import type { ScrollViewProps, FlatListProps } from "react-native";
+import { useKeyboardForm, cloneChildrenWithFocusHandler } from "@/hooks/useKeyboardForm";
+
+// --- Base Props ---
+interface BaseProps {
+  withBackground?: boolean;
+  headerComponent?: React.ReactNode;
+  footerComponent?: React.ReactNode;
+  floatingButton?: React.ReactNode;
+  hideFooter?: boolean;
+  edgesFooter?: NativeSafeAreaViewProps["edges"];
+  style?: StyleProp<ViewStyle>;
+  refreshControl?: ScrollViewProps["refreshControl"];
+  /**
+   * Enable keyboard handling with auto-scroll (Android only)
+   * @default false
+   */
+  enableKeyboardHandling?: boolean;
+  /**
+   * Scroll offset when keyboard appears (Android only)
+   * @default 100
+   */
+  keyboardScrollOffset?: number;
+  /**
+   * Extra padding bottom for content to avoid navigation bar (Android only)
+   * @default 80
+   */
+  contentPaddingBottom?: number;
+  /**
+   * Padding untuk content container (Android only)
+   * Set to 0 untuk tidak ada padding, atau custom value sesuai kebutuhan
+   * @default 16
+   */
+  contentPadding?: number;
+  /**
+   * Disable flexGrow: 1 in contentContainerStyle
+   * Use this for screens with very large headers to fix scroll issues
+   * @default false
+   */
+  disableFlexGrow?: boolean;
+}
+
+interface StaticModeProps extends BaseProps {
+  children: React.ReactNode;
+  listData?: never;
+  renderItem?: never;
+}
+
+interface ListModeProps extends BaseProps {
+  children?: never;
+  listData?: any[];
+  renderItem?: FlatListProps<any>["renderItem"];
+  onEndReached?: () => void;
+  ListHeaderComponent?: React.ReactElement | null;
+  ListFooterComponent?: React.ReactElement | null;
+  ListEmptyComponent?: React.ReactElement | null;
+  keyExtractor?: FlatListProps<any>["keyExtractor"];
+}
+
+type AndroidWrapperProps = StaticModeProps | ListModeProps;
+
+export function AndroidWrapper(props: AndroidWrapperProps) {
+  const {
+    withBackground = false,
+    headerComponent,
+    footerComponent,
+    floatingButton,
+    hideFooter = false,
+    edgesFooter = [],
+    style,
+    refreshControl,
+    enableKeyboardHandling = false,
+    keyboardScrollOffset,
+    contentPaddingBottom,
+    contentPadding,
+    disableFlexGrow = false,
+  } = props;
+
+  // Default values (should be set by OS_Wrapper, but fallback for direct usage)
+  const finalKeyboardScrollOffset = keyboardScrollOffset ?? 100;
+  const finalContentPaddingBottom = contentPaddingBottom ?? 250;
+  const finalContentPadding = contentPadding ?? 0;
+
+  const assetBackground = require("../../assets/images/main-background.png");
+
+  // Use keyboard hook if enabled
+  const keyboardForm = enableKeyboardHandling
+    ? useKeyboardForm(finalKeyboardScrollOffset)
+    : null;
+
+  const renderContainer = (content: React.ReactNode) => {
+    if (withBackground) {
+      return (
+        <ImageBackground
+          source={assetBackground}
+          resizeMode="cover"
+          style={GStyles.imageBackground}
+        >
+          <View style={[GStyles.containerWithBackground, style]}>
+            {content}
+          </View>
+        </ImageBackground>
+      );
+    }
+    return <View style={[GStyles.container, style]}>{content}</View>;
+  };
+
+  // 🔹 Mode Dinamis (FlatList)
+  if ("listData" in props) {
+    const listProps = props as ListModeProps;
+
+    return (
+      <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
+        {headerComponent && (
+          <View style={GStyles.stickyHeader}>{headerComponent}</View>
+        )}
+        <FlatList
+            style={{ flex: 1 }}
+            data={listProps.listData}
+            renderItem={listProps.renderItem}
+            keyExtractor={
+              listProps.keyExtractor ||
+              ((item, index) => `${String(item.id)}-${index}`)
+            }
+            refreshControl={refreshControl}
+            onEndReached={listProps.onEndReached}
+            onEndReachedThreshold={0.5}
+            ListHeaderComponent={listProps.ListHeaderComponent}
+            ListFooterComponent={listProps.ListFooterComponent}
+            ListEmptyComponent={listProps.ListEmptyComponent}
+            contentContainerStyle={{
+              flexGrow: disableFlexGrow ? 0 : 1,
+              paddingBottom:
+                (footerComponent && !hideFooter ? OS_HEIGHT : 0) +
+                finalContentPaddingBottom,
+              padding: finalContentPadding,
+            }}
+            keyboardShouldPersistTaps="handled"
+            removeClippedSubviews={false}
+            stickyHeaderIndices={[]}
+            nestedScrollEnabled={true}
+          />
+
+        {/* Footer - Fixed di bawah dengan width 100% */}
+        {footerComponent && !hideFooter && (
+          <SafeAreaView
+            edges={["bottom"]}
+            style={{ backgroundColor: MainColor.darkblue, width: "100%" }}
+          >
+            <View style={{ width: "100%" }}>{footerComponent}</View>
+          </SafeAreaView>
+        )}
+
+        {!footerComponent && !hideFooter && (
+          <SafeAreaView
+            edges={["bottom"]}
+            style={{ backgroundColor: MainColor.darkblue }}
+          />
+        )}
+
+        {floatingButton && (
+          <View style={GStyles.floatingContainer}>{floatingButton}</View>
+        )}
+      </View>
+    );
+  }
+
+  // 🔹 Mode Statis (ScrollView)
+  const staticProps = props as StaticModeProps;
+
+  // Inject focus handler jika keyboard handling enabled
+  const childrenWithFocus = enableKeyboardHandling && keyboardForm
+    ? cloneChildrenWithFocusHandler(staticProps.children, keyboardForm.handleInputFocus)
+    : staticProps.children;
+
+  return (
+    <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
+      {headerComponent && (
+        <View style={GStyles.stickyHeader}>{headerComponent}</View>
+      )}
+
+      <ScrollView
+        ref={keyboardForm?.scrollViewRef}
+        onScroll={keyboardForm?.handleScroll}
+        scrollEventThrottle={16}
+        refreshControl={refreshControl}
+        style={{ flex: 1 }}
+        contentContainerStyle={{
+          flexGrow: disableFlexGrow ? 0 : 1,
+          paddingBottom:
+            (footerComponent && !hideFooter ? OS_HEIGHT : 0) +
+            finalContentPaddingBottom,
+          padding: finalContentPadding,
+        }}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+      >
+        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+          {renderContainer(childrenWithFocus)}
+        </TouchableWithoutFeedback>
+      </ScrollView>
+
+      {/* Footer - Fixed di bawah dengan width 100% */}
+      {footerComponent && !hideFooter && (
+        <SafeAreaView
+          edges={["bottom"]}
+          style={{
+            backgroundColor: MainColor.darkblue,
+            width: "100%",
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            right: 0,
+          }}
+        >
+          <View style={{ width: "100%" }}>{footerComponent}</View>
+        </SafeAreaView>
+      )}
+
+      {!footerComponent && !hideFooter && (
+        <SafeAreaView
+          edges={["bottom"]}
+          style={{ backgroundColor: MainColor.darkblue }}
+        />
+      )}
+
+      {floatingButton && (
+        <View style={GStyles.floatingContainer}>{floatingButton}</View>
+      )}
+    </View>
+  );
+}
+
+export default AndroidWrapper;

components/_ShareComponent/AppHeader.tsx

@@ -0,0 +1,114 @@
+import { MainColor } from "@/constants/color-palet";
+import { Platform, StyleSheet, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { BackButton } from "..";
+
+type Props = {
+  title: string;
+  right?: React.ReactNode;
+  showBack?: boolean;
+  onPressLeft?: () => void;
+  left?: React.ReactNode;
+};
+
+export default function AppHeader({
+  title,
+  right,
+  showBack = true,
+  onPressLeft,
+  left,
+}: Props) {
+  const insets = useSafeAreaInsets();
+
+  // iOS 16+ detection (Dynamic Island) - insets.top > 47 indicates Dynamic Island
+  const isIOS26Plus =
+    Platform.OS === "ios" && insets.top > 47;
+
+  // Dynamic padding berdasarkan platform dan iOS version
+  const paddingTop =
+    Platform.OS === "ios"
+      ? isIOS26Plus
+        ? insets.top - 10
+        : insets.top
+      : 40;
+
+  const paddingBottom = Platform.OS === "ios" ? 8 : 13;
+
+  return (
+    <View
+      style={[
+        {
+          backgroundColor: MainColor.darkblue,
+          paddingTop,
+          paddingBottom,
+        },
+      ]}
+      pointerEvents="box-none"
+    >
+      {/* Header Container dengan absolute positioning untuk title center */}
+      <View style={styles.headerApp} pointerEvents="box-none">
+        {/* Left Section - Absolute Left */}
+        <View style={styles.headerLeft}>
+          {showBack ? (
+            <BackButton onPress={onPressLeft} />
+          ) : left ? (
+            left
+          ) : (
+            <View style={styles.placeholder} />
+          )}
+        </View>
+
+        {/* Title - Absolute Center */}
+        <View style={styles.headerCenter}>
+          <Text
+            style={styles.headerTitle}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+          >
+            {title ? title.charAt(0).toUpperCase() + title.slice(1) : ""}
+          </Text>
+        </View>
+
+        {/* Right Section - Absolute Right */}
+        <View style={styles.headerRight}>
+          {right}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  headerApp: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    height: 44, // Fixed height untuk consistency
+  },
+  headerLeft: {
+    position: "absolute",
+    left: 16,
+    zIndex: 1,
+  },
+  headerCenter: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  headerRight: {
+    position: "absolute",
+    right: 16,
+    zIndex: 1,
+  },
+  placeholder: {
+    width: 40,
+    height: 40,
+  },
+  headerTitle: {
+    color: MainColor.yellow,
+    fontSize: 18,
+    fontWeight: "600",
+    textAlign: "center",
+  },
+});

components/_ShareComponent/FormWrapper.tsx

@@ -0,0 +1,75 @@
+// FormWrapper.tsx - Reusable wrapper untuk form dengan keyboard handling
+import { MainColor } from "@/constants/color-palet";
+import { Keyboard, KeyboardAvoidingView, Platform, ScrollView, TouchableWithoutFeedback, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { ReactNode } from "react";
+import { useKeyboardForm } from "@/hooks/useKeyboardForm";
+
+interface FormWrapperProps {
+  children: ReactNode;
+  footerComponent?: ReactNode;
+  /**
+   * Offset scroll saat keyboard muncul (default: 100)
+   */
+  scrollOffset?: number;
+  /**
+   * Padding bottom untuk content (default: 100)
+   */
+  contentPaddingBottom?: number;
+  /**
+   * Padding untuk content container (default: 16)
+   */
+  contentPadding?: number;
+}
+
+export function FormWrapper({
+  children,
+  footerComponent,
+  scrollOffset = 100,
+  contentPaddingBottom = 100,
+  contentPadding = 16,
+}: FormWrapperProps) {
+  const { scrollViewRef, handleScroll } = useKeyboardForm(scrollOffset);
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : undefined}
+      style={{ flex: 1, backgroundColor: MainColor.darkblue }}
+    >
+      <ScrollView
+        ref={scrollViewRef}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+        style={{ flex: 1 }}
+        contentContainerStyle={{
+          flexGrow: 1,
+          paddingBottom: contentPaddingBottom,
+        }}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+      >
+        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+          <View style={{ flex: 1, padding: contentPadding }}>
+            {children}
+          </View>
+        </TouchableWithoutFeedback>
+      </ScrollView>
+
+      {/* Footer - Fixed di bawah */}
+      {footerComponent && (
+        <SafeAreaView
+          edges={["bottom"]}
+          style={{
+            backgroundColor: MainColor.darkblue,
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+          }}
+        >
+          {footerComponent}
+        </SafeAreaView>
+      )}
+    </KeyboardAvoidingView>
+  );
+}

components/_ShareComponent/IOSWrapper.tsx

@@ -0,0 +1,216 @@
+// @/components/iOSWrapper.tsx
+// iOS Wrapper - Based on NewWrapper (stable version for iOS)
+import { MainColor } from "@/constants/color-palet";
+import { OS_HEIGHT } from "@/constants/constans-value";
+import { GStyles } from "@/styles/global-styles";
+import {
+  ImageBackground,
+  Keyboard,
+  KeyboardAvoidingView,
+  ScrollView,
+  FlatList,
+  TouchableWithoutFeedback,
+  View,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
+import {
+  NativeSafeAreaViewProps,
+  SafeAreaView,
+} from "react-native-safe-area-context";
+import type { ScrollViewProps, FlatListProps } from "react-native";
+
+// --- Base Props ---
+interface BaseProps {
+  withBackground?: boolean;
+  headerComponent?: React.ReactNode;
+  footerComponent?: React.ReactNode;
+  floatingButton?: React.ReactNode;
+  hideFooter?: boolean;
+  edgesFooter?: NativeSafeAreaViewProps["edges"];
+  style?: StyleProp<ViewStyle>;
+  refreshControl?: ScrollViewProps["refreshControl"];
+}
+
+interface StaticModeProps extends BaseProps {
+  children: React.ReactNode;
+  listData?: never;
+  renderItem?: never;
+}
+
+interface ListModeProps extends BaseProps {
+  children?: never;
+  listData?: any[];
+  renderItem?: FlatListProps<any>["renderItem"];
+  onEndReached?: () => void;
+  ListHeaderComponent?: React.ReactElement | null;
+  ListFooterComponent?: React.ReactElement | null;
+  ListEmptyComponent?: React.ReactElement | null;
+  keyExtractor?: FlatListProps<any>["keyExtractor"];
+}
+
+type iOSWrapperProps = StaticModeProps | ListModeProps;
+
+const iOSWrapper = (props: iOSWrapperProps) => {
+  const {
+    withBackground = false,
+    headerComponent,
+    footerComponent,
+    floatingButton,
+    hideFooter = false,
+    edgesFooter = [],
+    style,
+    refreshControl,
+  } = props;
+
+  const assetBackground = require("../../assets/images/main-background.png");
+
+  const renderContainer = (content: React.ReactNode) => {
+    if (withBackground) {
+      return (
+        <ImageBackground
+          source={assetBackground}
+          resizeMode="cover"
+          style={GStyles.imageBackground}
+        >
+          <View style={[GStyles.containerWithBackground, style]}>
+            {content}
+          </View>
+        </ImageBackground>
+      );
+    }
+    return <View style={[GStyles.container, style]}>{content}</View>;
+  };
+
+  // 🔹 Mode Dinamis (FlatList)
+  if ("listData" in props) {
+    const listProps = props as ListModeProps;
+
+    return (
+      <KeyboardAvoidingView
+        behavior="padding"
+        style={{ flex: 1, backgroundColor: MainColor.darkblue }}
+      >
+        {headerComponent && (
+          <View style={GStyles.stickyHeader}>{headerComponent}</View>
+        )}
+        <View style={[GStyles.container, style, { flex: 1 }]}>
+          <FlatList
+            data={listProps.listData}
+            renderItem={listProps.renderItem}
+            keyExtractor={
+              listProps.keyExtractor ||
+              ((item, index) => {
+                if (item.id == null) {
+                  console.warn("Item tanpa 'id':", item);
+                  return `fallback-${index}-${JSON.stringify(item)}`;
+                }
+
+                return `${String(item.id)}-${index}`;
+              })
+            }
+            refreshControl={refreshControl}
+            onEndReached={listProps.onEndReached}
+            onEndReachedThreshold={0.5}
+            ListHeaderComponent={listProps.ListHeaderComponent}
+            ListFooterComponent={listProps.ListFooterComponent}
+            ListEmptyComponent={listProps.ListEmptyComponent}
+            contentContainerStyle={{
+              flexGrow: 1,
+              paddingBottom: footerComponent && !hideFooter ? OS_HEIGHT : 0
+            }}
+            keyboardShouldPersistTaps="handled"
+          />
+        </View>
+
+        {/* Footer - tetap di bawah dengan position absolute */}
+        {footerComponent && !hideFooter && (
+          <View style={styles.footerContainer}>
+            <SafeAreaView
+              edges={edgesFooter}
+              style={{ backgroundColor: MainColor.darkblue }}
+            >
+              {footerComponent}
+            </SafeAreaView>
+          </View>
+        )}
+
+        {!footerComponent && !hideFooter && (
+          <SafeAreaView
+            edges={["bottom"]}
+            style={{ backgroundColor: MainColor.darkblue }}
+          />
+        )}
+
+        {floatingButton && (
+          <View style={GStyles.floatingContainer}>{floatingButton}</View>
+        )}
+      </KeyboardAvoidingView>
+    );
+  }
+
+  // 🔹 Mode Statis (ScrollView)
+  const staticProps = props as StaticModeProps;
+
+  return (
+    <KeyboardAvoidingView
+      behavior="padding"
+      style={{ flex: 1, backgroundColor: MainColor.darkblue }}
+    >
+      {headerComponent && (
+        <View style={GStyles.stickyHeader}>{headerComponent}</View>
+      )}
+
+      <View style={{ flex: 1 }}>
+        <ScrollView
+          contentContainerStyle={{
+            flexGrow: 1,
+            paddingBottom: footerComponent && !hideFooter ? OS_HEIGHT : 0
+          }}
+          keyboardShouldPersistTaps="handled"
+          refreshControl={refreshControl}
+        >
+          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+            {renderContainer(staticProps.children)}
+          </TouchableWithoutFeedback>
+        </ScrollView>
+      </View>
+
+      {/* Footer - tetap di bawah dengan position absolute */}
+      {footerComponent && !hideFooter && (
+        <View style={styles.footerContainer}>
+          <SafeAreaView
+            edges={edgesFooter}
+            style={{ backgroundColor: MainColor.darkblue }}
+          >
+            {footerComponent}
+          </SafeAreaView>
+        </View>
+      )}
+
+      {!footerComponent && !hideFooter && (
+        <SafeAreaView
+          edges={["bottom"]}
+          style={{ backgroundColor: MainColor.darkblue }}
+        />
+      )}
+
+      {floatingButton && (
+        <View style={GStyles.floatingContainer}>{floatingButton}</View>
+      )}
+    </KeyboardAvoidingView>
+  );
+};
+
+// Styles untuk footer dengan position absolute
+const styles = {
+  footerContainer: {
+    position: "absolute" as const,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: MainColor.darkblue,
+  },
+};
+
+export default iOSWrapper;

components/_ShareComponent/NewWrapper.tsx

@@ -19,6 +19,7 @@ import {
   SafeAreaView,
 } from "react-native-safe-area-context";
 import type { ScrollViewProps, FlatListProps } from "react-native";
+import Spacing from "./Spacing";
 
 // --- ✅ Tambahkan refreshControl ke BaseProps ---
 interface BaseProps {
@@ -83,7 +84,7 @@ const NewWrapper = (props: NewWrapperProps) => {
     return <View style={[GStyles.container, style]}>{content}</View>;
   };
 
-  // 🔹 Mode Dinamis
+  // 🔹 Mode Dinamis (FlatList)
   if ("listData" in props) {
     const listProps = props as ListModeProps;
 
@@ -95,7 +96,7 @@ const NewWrapper = (props: NewWrapperProps) => {
         {headerComponent && (
           <View style={GStyles.stickyHeader}>{headerComponent}</View>
         )}
-        <View style={[GStyles.container, style]}>
+        <View style={[GStyles.container, style, { flex: 1 }]}>
           <FlatList
             data={listProps.listData}
             renderItem={listProps.renderItem}
@@ -107,30 +108,36 @@ const NewWrapper = (props: NewWrapperProps) => {
                   return `fallback-${index}-${JSON.stringify(item)}`;
                 }
 
-                // Gabungkan ID dengan indeks untuk mencegah duplikasi
                 return `${String(item.id)}-${index}`;
               })
             }
-          
-            refreshControl={refreshControl} // ✅ dari BaseProps
+            refreshControl={refreshControl}
             onEndReached={listProps.onEndReached}
             onEndReachedThreshold={0.5}
             ListHeaderComponent={listProps.ListHeaderComponent}
             ListFooterComponent={listProps.ListFooterComponent}
             ListEmptyComponent={listProps.ListEmptyComponent}
-            contentContainerStyle={{ flexGrow: 1 }}
+            contentContainerStyle={{
+              flexGrow: 1,
+              paddingBottom: footerComponent && !hideFooter ? OS_HEIGHT : 0
+            }}
             keyboardShouldPersistTaps="handled"
           />
         </View>
 
-        {footerComponent ? (
-          <SafeAreaView
-            edges={Platform.OS === "ios" ? edgesFooter : ["bottom"]}
-            style={{ backgroundColor: MainColor.darkblue, height: OS_HEIGHT }}
-          >
-            {footerComponent}
-          </SafeAreaView>
-        ) : hideFooter ? null : (
+        {/* Footer - tetap di bawah dengan position absolute */}
+        {footerComponent && !hideFooter && (
+          <View style={styles.footerContainer}>
+            <SafeAreaView
+              edges={Platform.OS === "ios" ? edgesFooter : ["bottom"]}
+              style={{ backgroundColor: MainColor.darkblue }}
+            >
+              {footerComponent}
+            </SafeAreaView>
+          </View>
+        )}
+
+        {!footerComponent && !hideFooter && (
           <SafeAreaView
             edges={["bottom"]}
             style={{ backgroundColor: MainColor.darkblue }}
@@ -144,7 +151,7 @@ const NewWrapper = (props: NewWrapperProps) => {
     );
   }
 
-  // 🔹 Mode Statis
+  // 🔹 Mode Statis (ScrollView)
   const staticProps = props as StaticModeProps;
 
   return (
@@ -156,24 +163,34 @@ const NewWrapper = (props: NewWrapperProps) => {
         <View style={GStyles.stickyHeader}>{headerComponent}</View>
       )}
 
-      <ScrollView
-        contentContainerStyle={{ flexGrow: 1 }}
-        keyboardShouldPersistTaps="handled"
-        refreshControl={refreshControl} // ✅ sekarang valid
-      >
-        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-          {renderContainer(staticProps.children)}
-        </TouchableWithoutFeedback>
-      </ScrollView>
-
-      {footerComponent ? (
-        <SafeAreaView
-          edges={Platform.OS === "ios" ? edgesFooter : ["bottom"]}
-          style={{ backgroundColor: MainColor.darkblue, height: OS_HEIGHT }}
+      <View style={{ flex: 1 }}>
+        <ScrollView
+          contentContainerStyle={{
+            flexGrow: 1,
+            paddingBottom: footerComponent && !hideFooter ? OS_HEIGHT : 0
+          }}
+          keyboardShouldPersistTaps="handled"
+          refreshControl={refreshControl}
         >
-          {footerComponent}
-        </SafeAreaView>
-      ) : hideFooter ? null : (
+          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+            {renderContainer(staticProps.children)}
+          </TouchableWithoutFeedback>
+        </ScrollView>
+      </View>
+
+      {/* Footer - tetap di bawah dengan position absolute */}
+      {footerComponent && !hideFooter && (
+        <View style={styles.footerContainer}>
+          <SafeAreaView
+            edges={Platform.OS === "ios" ? edgesFooter : ["bottom"]}
+            style={{ backgroundColor: MainColor.darkblue }}
+          >
+            {footerComponent}
+          </SafeAreaView>
+        </View>
+      )}
+
+      {!footerComponent && !hideFooter && (
         <SafeAreaView
           edges={["bottom"]}
           style={{ backgroundColor: MainColor.darkblue }}
@@ -187,4 +204,15 @@ const NewWrapper = (props: NewWrapperProps) => {
   );
 };
 
+// Styles untuk footer dengan position absolute
+const styles = {
+  footerContainer: {
+    position: "absolute" as const,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: MainColor.darkblue,
+  },
+};
+
 export default NewWrapper;

components/_ShareComponent/NewWrapper_V2.tsx

@@ -0,0 +1,231 @@
+// NewWrapper_V2.tsx - Wrapper baru dengan keyboard handling
+import { MainColor } from "@/constants/color-palet";
+import { OS_HEIGHT } from "@/constants/constans-value";
+import { GStyles } from "@/styles/global-styles";
+import {
+  ImageBackground,
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  FlatList,
+  TouchableWithoutFeedback,
+  View,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
+import {
+  NativeSafeAreaViewProps,
+  SafeAreaView,
+} from "react-native-safe-area-context";
+import type { ScrollViewProps, FlatListProps } from "react-native";
+import Spacing from "./Spacing";
+import { useKeyboardForm } from "@/hooks/useKeyboardForm";
+
+interface BaseProps {
+  withBackground?: boolean;
+  headerComponent?: React.ReactNode;
+  footerComponent?: React.ReactNode;
+  floatingButton?: React.ReactNode;
+  hideFooter?: boolean;
+  edgesFooter?: NativeSafeAreaViewProps["edges"];
+  style?: StyleProp<ViewStyle>;
+  refreshControl?: ScrollViewProps["refreshControl"];
+  /**
+   * Enable keyboard handling with auto-scroll
+   * @default false
+   */
+  enableKeyboardHandling?: boolean;
+  /**
+   * Scroll offset when keyboard appears (default: 100)
+   */
+  keyboardScrollOffset?: number;
+  /**
+   * Extra padding bottom for content to avoid navigation bar (default: 80)
+   */
+  contentPaddingBottom?: number;
+  /**
+   * Padding untuk content container (default: 16)
+   * Set to 0 untuk tidak ada padding, atau custom value sesuai kebutuhan
+   */
+  contentPadding?: number;
+}
+
+interface StaticModeProps extends BaseProps {
+  children: React.ReactNode;
+  listData?: never;
+  renderItem?: never;
+}
+
+interface ListModeProps extends BaseProps {
+  children?: never;
+  listData?: any[];
+  renderItem?: FlatListProps<any>["renderItem"];
+  onEndReached?: () => void;
+  ListHeaderComponent?: React.ReactElement | null;
+  ListFooterComponent?: React.ReactElement | null;
+  ListEmptyComponent?: React.ReactElement | null;
+  keyExtractor?: FlatListProps<any>["keyExtractor"];
+}
+
+type NewWrapper_V2_Props = StaticModeProps | ListModeProps;
+
+export function NewWrapper_V2(props: NewWrapper_V2_Props) {
+  const {
+    withBackground = false,
+    headerComponent,
+    footerComponent,
+    floatingButton,
+    hideFooter = false,
+    edgesFooter = [],
+    style,
+    refreshControl,
+    enableKeyboardHandling = false,
+    keyboardScrollOffset = 100,
+    contentPaddingBottom = 80, // Default 80 untuk navigasi device
+    contentPadding = 16, // Default 16 untuk padding konsisten
+  } = props;
+
+  const assetBackground = require("../../assets/images/main-background.png");
+
+  // Use keyboard hook if enabled
+  const keyboardForm = enableKeyboardHandling 
+    ? useKeyboardForm(keyboardScrollOffset) 
+    : null;
+
+  const renderContainer = (content: React.ReactNode) => {
+    if (withBackground) {
+      return (
+        <ImageBackground
+          source={assetBackground}
+          resizeMode="cover"
+          style={GStyles.imageBackground}
+        >
+          <View style={[GStyles.containerWithBackground, style]}>
+            {content}
+          </View>
+        </ImageBackground>
+      );
+    }
+    return <View style={[GStyles.container, style]}>{content}</View>;
+  };
+
+  // 🔹 Mode Dinamis (FlatList)
+  if ("listData" in props) {
+    const listProps = props as ListModeProps;
+
+    return (
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : undefined}
+        style={{ flex: 1, backgroundColor: MainColor.darkblue }}
+      >
+        {headerComponent && (
+          <View style={GStyles.stickyHeader}>{headerComponent}</View>
+        )}
+        <FlatList
+          data={listProps.listData}
+          renderItem={listProps.renderItem}
+          keyExtractor={
+            listProps.keyExtractor ||
+            ((item, index) => `${String(item.id)}-${index}`)
+          }
+          refreshControl={refreshControl}
+          onEndReached={listProps.onEndReached}
+          onEndReachedThreshold={0.5}
+          ListHeaderComponent={listProps.ListHeaderComponent}
+          ListFooterComponent={listProps.ListFooterComponent}
+          ListEmptyComponent={listProps.ListEmptyComponent}
+          contentContainerStyle={{
+            flexGrow: 1,
+            paddingBottom: (footerComponent && !hideFooter ? OS_HEIGHT : 0) + contentPaddingBottom,
+            padding: contentPadding,
+          }}
+          keyboardShouldPersistTaps="handled"
+        />
+
+        {/* Footer - Fixed di bawah dengan width 100% */}
+        {footerComponent && !hideFooter && (
+          <SafeAreaView
+            edges={Platform.OS === "ios" ? edgesFooter : ["bottom"]}
+            style={{ backgroundColor: MainColor.darkblue, width: "100%" }}
+          >
+            <View style={{ width: "100%" }}>
+              {footerComponent}
+            </View>
+          </SafeAreaView>
+        )}
+
+        {!footerComponent && !hideFooter && (
+          <SafeAreaView
+            edges={["bottom"]}
+            style={{ backgroundColor: MainColor.darkblue }}
+          />
+        )}
+
+        {floatingButton && (
+          <View style={GStyles.floatingContainer}>{floatingButton}</View>
+        )}
+      </KeyboardAvoidingView>
+    );
+  }
+
+  // 🔹 Mode Statis (ScrollView)
+  const staticProps = props as StaticModeProps;
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : undefined}
+      style={{ flex: 1, backgroundColor: MainColor.darkblue }}
+    >
+      {headerComponent && (
+        <View style={GStyles.stickyHeader}>{headerComponent}</View>
+      )}
+
+      <ScrollView
+        ref={keyboardForm?.scrollViewRef}
+        style={{ flex: 1 }}
+        contentContainerStyle={{
+          flexGrow: 1,
+          paddingBottom: (footerComponent && !hideFooter ? OS_HEIGHT : 0) + contentPaddingBottom,
+          padding: contentPadding,
+        }}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+      >
+        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+          {renderContainer(staticProps.children)}
+        </TouchableWithoutFeedback>
+      </ScrollView>
+
+      {/* Footer - Fixed di bawah dengan width 100% */}
+      {footerComponent && !hideFooter && (
+        <SafeAreaView
+          edges={["bottom"]}
+          style={{
+            backgroundColor: MainColor.darkblue,
+            width: "100%",
+            position: Platform.OS === "android" ? "absolute" : undefined,
+            bottom: Platform.OS === "android" ? 0 : undefined,
+            left: 0,
+            right: 0,
+          }}
+        >
+          <View style={{ width: "100%" }}>
+            {footerComponent}
+          </View>
+        </SafeAreaView>
+      )}
+
+      {!footerComponent && !hideFooter && (
+        <SafeAreaView
+          edges={["bottom"]}
+          style={{ backgroundColor: MainColor.darkblue }}
+        />
+      )}
+
+      {floatingButton && (
+        <View style={GStyles.floatingContainer}>{floatingButton}</View>
+      )}
+    </KeyboardAvoidingView>
+  );
+}

components/_ShareComponent/OS_Wrapper.tsx

@@ -0,0 +1,157 @@
+// @/components/OS_Wrapper.tsx
+// OS-Specific Wrapper - Automatically routes to iOSWrapper or AndroidWrapper
+// iOS: Uses NewWrapper (stable for iOS)
+// Android: Uses NewWrapper_V2 (with keyboard handling)
+
+import { Platform } from "react-native";
+import type { ScrollViewProps, FlatListProps } from "react-native";
+import {
+  NativeSafeAreaViewProps,
+} from "react-native-safe-area-context";
+import type { StyleProp, ViewStyle } from "react-native";
+import IOSWrapper from "./IOSWrapper";
+import AndroidWrapper from "./AndroidWrapper";
+
+// ========== Base Props ==========
+interface BaseProps {
+  withBackground?: boolean;
+  headerComponent?: React.ReactNode;
+  footerComponent?: React.ReactNode;
+  floatingButton?: React.ReactNode;
+  hideFooter?: boolean;
+  edgesFooter?: NativeSafeAreaViewProps["edges"];
+  style?: StyleProp<ViewStyle>;
+  refreshControl?: ScrollViewProps["refreshControl"];
+  disableFlexGrow?: boolean;
+}
+
+// ========== Static Mode Props ==========
+interface StaticModeProps extends BaseProps {
+  children: React.ReactNode;
+  listData?: never;
+  renderItem?: never;
+}
+
+// ========== List Mode Props ==========
+interface ListModeProps extends BaseProps {
+  children?: never;
+  listData?: any[];
+  renderItem?: FlatListProps<any>["renderItem"];
+  onEndReached?: () => void;
+  ListHeaderComponent?: React.ReactElement | null;
+  ListFooterComponent?: React.ReactElement | null;
+  ListEmptyComponent?: React.ReactElement | null;
+  keyExtractor?: FlatListProps<any>["keyExtractor"];
+}
+
+// ========== Keyboard Handling Props (Android only) ==========
+interface KeyboardHandlingProps {
+  /**
+   * Enable keyboard handling with auto-scroll (Android only)
+   * iOS ignores this prop
+   * @default false
+   */
+  enableKeyboardHandling?: boolean;
+
+  /**
+   * Scroll offset when keyboard appears (Android only)
+   * iOS ignores this prop
+   * @default 100
+   */
+  keyboardScrollOffset?: number;
+
+  /**
+   * Extra padding bottom for content (Android only)
+   * iOS ignores this prop
+   * @default 80
+   */
+  contentPaddingBottom?: number;
+
+  /**
+   * Padding untuk content container (Android only)
+   * iOS ignores this prop
+   * @default 16
+   */
+  contentPadding?: number;
+}
+
+// ========== Final Props Types ==========
+type OS_WrapperStaticProps = StaticModeProps & KeyboardHandlingProps;
+type OS_WrapperListProps = ListModeProps & KeyboardHandlingProps;
+
+type OS_WrapperProps = OS_WrapperStaticProps | OS_WrapperListProps;
+
+/**
+ * OS_Wrapper - Automatically selects iOSWrapper or AndroidWrapper based on platform
+ * 
+ * Features:
+ * - Auto platform detection
+ * - Optional keyboard handling for Android forms
+ * - Unified API for all use cases
+ *
+ * @example Static Mode (Simple Content)
+ * ```tsx
+ * <OS_Wrapper>
+ *   <YourContent />
+ * </OS_Wrapper>
+ * ```
+ *
+ * @example List Mode (with pagination)
+ * ```tsx
+ * <OS_Wrapper
+ *   listData={data}
+ *   renderItem={({ item }) => <ItemCard item={item} />}
+ *   ListEmptyComponent={<EmptyState />}
+ *   onEndReached={loadMore}
+ * />
+ * ```
+ *
+ * @example Form Mode (with keyboard handling - Android only)
+ * ```tsx
+ * <OS_Wrapper
+ *   enableKeyboardHandling
+ *   keyboardScrollOffset={150}
+ *   contentPaddingBottom={100}
+ *   footerComponent={<SubmitButton />}
+ * >
+ *   <FormContent />
+ * </OS_Wrapper>
+ * ```
+ */
+export function OS_Wrapper(props: OS_WrapperProps) {
+  const {
+    enableKeyboardHandling = false,
+    keyboardScrollOffset = 100,
+    contentPaddingBottom = 100,
+    contentPadding = 0,
+    disableFlexGrow = false,
+    ...wrapperProps
+  } = props;
+
+  // iOS uses IOSWrapper (based on NewWrapper)
+  if (Platform.OS === "ios") {
+    // Keyboard handling props are ignored on iOS
+    return <IOSWrapper {...(wrapperProps as any)} disableFlexGrow={disableFlexGrow} />;
+  }
+
+  // Android uses AndroidWrapper (with keyboard handling support)
+  return (
+    <AndroidWrapper
+      {...(wrapperProps as any)}
+      enableKeyboardHandling={enableKeyboardHandling}
+      keyboardScrollOffset={keyboardScrollOffset}
+      contentPaddingBottom={contentPaddingBottom}
+      contentPadding={contentPadding}
+      disableFlexGrow={disableFlexGrow}
+    />
+  );
+}
+
+// Re-export individual wrappers for direct usage if needed
+export { default as IOSWrapper } from "./IOSWrapper";
+export { default as AndroidWrapper } from "./AndroidWrapper";
+
+// Legacy export untuk backward compatibility
+export { IOSWrapper as iOSWrapper };
+
+export default OS_Wrapper;

components/index.ts

@@ -49,6 +49,8 @@ import MapCustom from "./Map/MapCustom";
 import CenterCustom from "./Center/CenterCustom";
 // Clickable
 import ClickableCustom from "./Clickable/ClickableCustom";
+// PhoneInput
+import PhoneInputCustom from "./PhoneInput/PhoneInputCustom";
 // Scroll
 import ScrollableCustom from "./Scroll/ScrollCustom";
 // ShareComponent
@@ -61,6 +63,11 @@ import DummyLandscapeImage from "./_ShareComponent/DummyLandscapeImage";
 import GridComponentView from "./_ShareComponent/GridSectionView";
 import NewWrapper from "./_ShareComponent/NewWrapper";
 import BasicWrapper from "./_ShareComponent/BasicWrapper";
+import { FormWrapper } from "./_ShareComponent/FormWrapper";
+import { NewWrapper_V2 } from "./_ShareComponent/NewWrapper_V2";
+// OS-Specific Wrappers
+import OS_Wrapper, { IOSWrapper, AndroidWrapper } from "./_ShareComponent/OS_Wrapper";
+
 // Progress
 import ProgressCustom from "./Progress/ProgressCustom";
 // Loader
@@ -95,6 +102,8 @@ export {
   CheckboxGroup,
   // Clickable
   ClickableCustom,
+  // PhoneInput
+  PhoneInputCustom,
   // Container
   CircleContainer,
   // Divider
@@ -123,6 +132,12 @@ export {
   Spacing,
   NewWrapper,
   BasicWrapper,
+  FormWrapper,
+  NewWrapper_V2,
+  // OS-Specific Wrappers
+  OS_Wrapper,
+  IOSWrapper,
+  AndroidWrapper,
   // Stack
   StackCustom,
   TabBarBackground,

constants/constans-value.ts

@@ -4,6 +4,10 @@ export {
   OS_ANDROID_HEIGHT,
   OS_IOS_HEIGHT,
   OS_HEIGHT,
+  OS_ANDROID_PADDING_TOP,
+  OS_IOS_PADDING_TOP,
+  OS_PADDING_TOP,
+  PADDING_INLINE,
   TEXT_SIZE_SMALL,
   TEXT_SIZE_MEDIUM,
   TEXT_SIZE_LARGE,
@@ -23,10 +27,15 @@ export {
 };
 
 // OS Height
-const OS_ANDROID_HEIGHT = 115
-const OS_IOS_HEIGHT = 90
+const OS_ANDROID_HEIGHT = 60
+const OS_IOS_HEIGHT = 80
 const OS_HEIGHT = Platform.OS === "ios" ? OS_IOS_HEIGHT : OS_ANDROID_HEIGHT
 
+// OS Padding Top
+const OS_ANDROID_PADDING_TOP = 6
+const OS_IOS_PADDING_TOP = 12
+const OS_PADDING_TOP = Platform.OS === "ios" ? OS_IOS_PADDING_TOP : OS_ANDROID_PADDING_TOP
+
 // Text Size
 const TEXT_SIZE_SMALL = 12;
 const TEXT_SIZE_MEDIUM = 14;
@@ -47,6 +56,7 @@ const DRAWER_HEIGHT = 500; // tinggi drawer5
 const RADIUS_BUTTON = 50
 
 // Padding
+const PADDING_INLINE = 16
 const PADDING_EXTRA_SMALL = 10
 const PADDING_SMALL = 12
 const PADDING_MEDIUM = 16

constants/countries.ts

@@ -0,0 +1,89 @@
+import { type CountryCode } from "libphonenumber-js";
+
+/**
+ * Country data for phone number input
+ * Contains only country name and calling code (NO flags for maximum compatibility)
+ */
+export interface CountryData {
+  code: CountryCode;
+  name: string;
+  callingCode: string;
+}
+
+/**
+ * List of supported countries for phone number input
+ * 
+ * @description
+ * This list includes major countries across different regions.
+ * Countries are ordered by likelihood of use (Indonesia first as default).
+ * 
+ * @note
+ * NO emoji flags used - only text-based country name and calling code
+ * This ensures maximum compatibility across all platforms and iOS versions
+ */
+export const COUNTRIES: CountryData[] = [
+  // Asia Pacific (Primary markets)
+  { code: "ID", name: "Indonesia", callingCode: "62" },
+  { code: "SG", name: "Singapore", callingCode: "65" },
+  { code: "MY", name: "Malaysia", callingCode: "60" },
+  { code: "AU", name: "Australia", callingCode: "61" },
+  
+  // Asia (Other)
+  { code: "CN", name: "China", callingCode: "86" },
+  { code: "JP", name: "Japan", callingCode: "81" },
+  { code: "KR", name: "South Korea", callingCode: "82" },
+  { code: "IN", name: "India", callingCode: "91" },
+  
+  // Middle East
+  { code: "AE", name: "United Arab Emirates", callingCode: "971" },
+  { code: "SA", name: "Saudi Arabia", callingCode: "966" },
+  
+  // Europe
+  { code: "GB", name: "United Kingdom", callingCode: "44" },
+  { code: "DE", name: "Germany", callingCode: "49" },
+  { code: "FR", name: "France", callingCode: "33" },
+  { code: "NL", name: "Netherlands", callingCode: "31" },
+  
+  // Americas
+  { code: "US", name: "United States", callingCode: "1" },
+];
+
+/**
+ * Default country for phone number input
+ * Used when no country is selected (Indonesia by default)
+ */
+export const DEFAULT_COUNTRY: CountryData = COUNTRIES[0];
+
+/**
+ * Get country by calling code
+ * @param callingCode - The calling code to search for (e.g., "62", "1")
+ * @returns The matching country data or undefined if not found
+ */
+export function getCountryByCallingCode(callingCode: string): CountryData | undefined {
+  return COUNTRIES.find((country) => country.callingCode === callingCode);
+}
+
+/**
+ * Get country by country code (ISO 3166-1 alpha-2)
+ * @param code - The country code to search for (e.g., "ID", "US")
+ * @returns The matching country data or undefined if not found
+ */
+export function getCountryByCode(code: CountryCode): CountryData | undefined {
+  return COUNTRIES.find((country) => country.code === code);
+}
+
+/**
+ * Search countries by name or calling code
+ * @param query - The search query (case-insensitive)
+ * @returns Array of matching countries
+ */
+export function searchCountries(query: string): CountryData[] {
+  const normalizedQuery = query.toLowerCase().trim();
+  
+  return COUNTRIES.filter(
+    (country) =>
+      country.name.toLowerCase().includes(normalizedQuery) ||
+      country.code.toLowerCase().includes(normalizedQuery) ||
+      country.callingCode.includes(normalizedQuery)
+  );
+}

context/AuthContext.tsx

@@ -22,7 +22,7 @@ type AuthContextType = {
   isAdmin: boolean;
   isUserActive: boolean;
   loginWithNomor: (nomor: string) => Promise<boolean>;
-  validateOtp: (nomor: string) => Promise<any>;
+  validateOtp: (nomor: string, code: string) => Promise<any>;
   logout: () => Promise<void>;
   registerUser: (userData: {
     username: string;
@@ -97,10 +97,10 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
   };
 
   // --- 2. Validasi OTP & cek user ---
-  const validateOtp = async (nomor: string) => {
+  const validateOtp = async (nomor: string, code: string) => {
     try {
       setIsLoading(true);
-      const response = await apiValidationCode({ nomor: nomor });
+      const response = await apiValidationCode({ nomor: nomor, code: code });
       const { token } = response;
       console.log("[RESPONSE VALIDASI OTP]", JSON.stringify(response, null, 2));
 

docs/KEYBOARD-BUG-TEST.md

@@ -0,0 +1,148 @@
+# Keyboard Bug Investigation
+
+## 🐛 Problem
+
+Footer terangkat dan muncul area putih di bawah saat keyboard ditutup setelah input ke TextInput.
+
+## 📋 Test Cases
+
+### Test 1: Minimal Wrapper
+**File**: `test-keyboard-bug.tsx`
+
+Wrapper yang sangat sederhana:
+```typescript
+<KeyboardAvoidingView behavior="height">
+  <ScrollView>
+    <TextInput />
+  </ScrollView>
+  <SafeAreaView>Footer</SafeAreaView>
+</KeyboardAvoidingView>
+```
+
+**Expected**: Footer tetap di bawah
+**Actual**: ? (To be tested)
+
+### Test 2: Original NewWrapper
+**File**: `components/_ShareComponent/NewWrapper.tsx`
+
+Wrapper yang digunakan di production:
+```typescript
+<KeyboardAvoidingView behavior="height">
+  <View flex={0}>
+    <ScrollView>
+      {content}
+    </ScrollView>
+  </View>
+  <View position="absolute">Footer</View>
+</KeyboardAvoidingView>
+```
+
+**Expected**: Footer tetap di bawah
+**Actual**: Footer terangkat, ada putih di bawah
+
+## 🔍 Possible Causes
+
+### 1. KeyboardAvoidingView Behavior
+- **Android**: `behavior="height"` mengurangi height view saat keyboard muncul
+- **Issue**: Saat keyboard close, height tidak kembali ke semula
+
+### 2. View Wrapper dengan flex: 0
+- NewWrapper menggunakan `<View style={{ flex: 0 }}>`
+- Ini membuat ScrollView tidak expand dengan benar
+- **Fix**: Coba `<View style={{ flex: 1 }}>`
+
+### 3. Footer dengan position: absolute
+- Footer "melayang" di atas konten
+- Tidak ikut terdorong saat keyboard muncul
+- Saat keyboard close, footer kembali tapi layout sudah berubah
+
+### 4. SafeAreaView Insets
+- Safe area insets berubah saat keyboard muncul
+- Footer tidak handle insets dengan benar
+
+## 🧪 Test Scenarios
+
+1. **Test Input Focus**
+   - [ ] Tap Input 1 → Keyboard muncul
+   - [ ] Footer tetap di bawah?
+
+2. **Test Input Blur**
+   - [ ] Tap Input 1 → Keyboard muncul
+   - [ ] Tap outside → Keyboard close
+   - [ ] Footer kembali ke posisi?
+   - [ ] Ada putih di bawah?
+
+3. **Test Multiple Inputs**
+   - [ ] Tap Input 1 → Input 2 → Input 3
+   - [ ] Keyboard pindah dengan smooth
+   - [ ] Footer tetap di bawah?
+
+4. **Test Scroll After Close**
+   - [ ] Input → Close keyboard
+   - [ ] Scroll ke bawah
+   - [ ] Footer terlihat?
+   - [ ] Ada putih di bawah?
+
+## 🔧 Potential Fixes
+
+### Fix 1: Remove position: absolute
+```typescript
+// Before
+<View style={{ position: "absolute", bottom: 0 }}>
+  {footer}
+</View>
+
+// After
+<SafeAreaView>
+  {footer}
+</SafeAreaView>
+```
+
+### Fix 2: Use flex: 1 instead of flex: 0
+```typescript
+// Before
+<View style={{ flex: 0 }}>
+  <ScrollView />
+</View>
+
+// After
+<View style={{ flex: 1 }}>
+  <ScrollView />
+</View>
+```
+
+### Fix 3: Use KeyboardAwareScrollView
+```typescript
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
+
+<KeyboardAwareScrollView>
+  {content}
+</KeyboardAwareScrollView>
+```
+
+### Fix 4: Manual keyboard handling
+```typescript
+const [keyboardVisible, setKeyboardVisible] = useState(false);
+
+useEffect(() => {
+  const show = Keyboard.addListener('keyboardDidShow', () => setKeyboardVisible(true));
+  const hide = Keyboard.addListener('keyboardDidHide', () => setKeyboardVisible(false));
+  return () => { show.remove(); hide.remove(); }
+}, []);
+```
+
+## 📝 Test Results
+
+| Test | Platform | Result | Notes |
+|------|----------|--------|-------|
+| Test 1 (Minimal) | Android | ? | TBD |
+| Test 1 (Minimal) | iOS | ? | TBD |
+| Test 2 (Original) | Android | ❌ Bug | Footer terangkat |
+| Test 2 (Original) | iOS | ? | TBD |
+
+## 🎯 Next Steps
+
+1. Test dengan `TestWrapper` (minimal wrapper)
+2. Identifikasi apakah bug dari wrapper atau React Native
+3. Apply fix yang sesuai
+4. Test di semua screen

docs/NEWWRAPPER-KEYBOARD-IMPLEMENTATION.md

@@ -0,0 +1,346 @@
+# NewWrapper Keyboard Handling Implementation
+
+## 📋 Problem Statement
+
+NewWrapper saat ini memiliki masalah keyboard handling pada Android:
+- Footer terangkat saat keyboard close
+- Muncul area putih di bawah
+- Input terpotong saat keyboard muncul
+- Tidak ada auto-scroll ke focused input
+
+## 🔍 Root Cause Analysis
+
+### Current NewWrapper Structure
+
+```typescript
+<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"}>
+  <View style={{ flex: 0 }}>  // ← MASALAH 1: flex: 0
+    <ScrollView>
+      {children}
+    </ScrollView>
+  </View>
+  <View style={{ position: "absolute" }}>  // ← MASALAH 2: position absolute
+    {footerComponent}
+  </View>
+</KeyboardAvoidingView>
+```
+
+### Issues Identified
+
+| Issue | Impact | Severity |
+|-------|--------|----------|
+| `behavior="height"` di Android | View di-resize, content terpotong | 🔴 High |
+| `flex: 0` pada View wrapper | ScrollView tidak expand dengan benar | 🔴 High |
+| Footer dengan `position: absolute` | Footer tidak ikut layout flow | 🟡 Medium |
+| Tidak ada keyboard event handling | Tidak ada auto-scroll ke input | 🟡 Medium |
+
+---
+
+## 💡 Proposed Solutions
+
+### Option A: Full Integration (Breaking Changes)
+
+Replace entire KeyboardAvoidingView logic dengan keyboard handling baru.
+
+```typescript
+// NewWrapper.tsx
+export function NewWrapper({ children, footerComponent }: Props) {
+  const { scrollViewRef, createFocusHandler } = useKeyboardForm();
+  
+  return (
+    <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : undefined}>
+      <ScrollView ref={scrollViewRef} style={{ flex: 1 }}>
+        {children}
+      </ScrollView>
+      <SafeAreaView style={{ position: 'absolute', bottom: 0 }}>
+        {footerComponent}
+      </SafeAreaView>
+    </KeyboardAvoidingView>
+  );
+}
+```
+
+**Pros:**
+- ✅ Clean implementation
+- ✅ Consistent behavior across all screens
+- ✅ Single source of truth
+
+**Cons:**
+- ❌ **Breaking changes** - Semua screen yang pakai NewWrapper akan affected
+- ❌ **Need to add onFocus handlers** to all TextInput/TextArea components
+- ❌ **High risk** - May break existing screens
+- ❌ **Requires testing** all screens that use NewWrapper
+
+**Impact:**
+- All existing screens using NewWrapper will be affected
+- Need to add `onFocus` handlers to all inputs
+- Need to wrap inputs with `View onStartShouldSetResponder`
+
+---
+
+### Option B: Opt-in Feature (Recommended) ⭐
+
+Add flag to enable keyboard handling optionally (backward compatible).
+
+```typescript
+// NewWrapper.tsx
+interface NewWrapperProps {
+  // ... existing props
+  enableKeyboardHandling?: boolean;  // Default: false
+  keyboardScrollOffset?: number;     // Default: 100
+}
+
+export function NewWrapper(props: NewWrapperProps) {
+  const { 
+    enableKeyboardHandling = false,
+    keyboardScrollOffset = 100,
+    ...rest 
+  } = props;
+
+  // Use keyboard hook if enabled
+  const keyboardForm = enableKeyboardHandling 
+    ? useKeyboardForm(keyboardScrollOffset) 
+    : null;
+
+  // Render different structure based on flag
+  if (enableKeyboardHandling && keyboardForm) {
+    return renderWithKeyboardHandling(rest, keyboardForm);
+  }
+  
+  return renderOriginal(rest);
+}
+```
+
+**Pros:**
+- ✅ **Backward compatible** - No breaking changes
+- ✅ **Opt-in** - Screens yang butuh bisa enable
+- ✅ **Safe** - Existing screens tetap bekerja
+- ✅ **Gradual migration** - Bisa migrate screen by screen
+- ✅ **Low risk** - Can test with new screens first
+
+**Cons:**
+- ⚠️ More code (duplicate logic)
+- ⚠️ Need to maintain 2 implementations temporarily
+
+**Usage Example:**
+
+```typescript
+// Existing screens - No changes needed!
+<NewWrapper footerComponent={<Footer />}>
+  <Content />
+</NewWrapper>
+
+// New screens with forms - Enable keyboard handling
+<NewWrapper 
+  enableKeyboardHandling
+  keyboardScrollOffset={100}
+  footerComponent={<Footer />}
+>
+  <View onStartShouldSetResponder={() => true}>
+    <TextInputCustom onFocus={keyboardForm.createFocusHandler()} />
+  </View>
+</NewWrapper>
+```
+
+---
+
+### Option C: Create New Component (Safest)
+
+Keep NewWrapper as is, create separate component for forms.
+
+```typescript
+// Keep NewWrapper unchanged
+// Use FormWrapper for forms (already created!)
+```
+
+**Pros:**
+- ✅ **Zero risk** - NewWrapper tidak berubah
+- ✅ **Clear separation** - Old vs New
+- ✅ **Safe for existing screens**
+- ✅ **FormWrapper already exists!**
+
+**Cons:**
+- ⚠️ Multiple wrapper components
+- ⚠️ Confusion which one to use
+
+**Usage:**
+```typescript
+// For regular screens
+<NewWrapper>{content}</NewWrapper>
+
+// For form screens
+<FormWrapper footerComponent={<Footer />}>
+  <TextInputCustom />
+</FormWrapper>
+```
+
+---
+
+## 📊 Comparison Matrix
+
+| Criteria | Option A | Option B | Option C |
+|----------|----------|----------|----------|
+| **Backward Compatible** | ❌ | ✅ | ✅ |
+| **Implementation Effort** | High | Medium | Low |
+| **Risk Level** | 🔴 High | 🟡 Medium | 🟢 Low |
+| **Code Duplication** | None | Temporary | Permanent |
+| **Migration Required** | Yes | Gradual | No |
+| **Testing Required** | All screens | New screens only | New screens only |
+| **Recommended For** | Greenfield projects | Existing projects | Conservative teams |
+
+---
+
+## 🎯 Recommended Approach: Option B (Opt-in)
+
+### Implementation Plan
+
+#### Phase 1: Add Keyboard Handling to NewWrapper (Week 1)
+
+```typescript
+// Add to NewWrapper interface
+interface NewWrapperProps {
+  enableKeyboardHandling?: boolean;
+  keyboardScrollOffset?: number;
+}
+
+// Implement dual rendering logic
+if (enableKeyboardHandling) {
+  return renderWithKeyboardHandling(props);
+}
+return renderOriginal(props);
+```
+
+#### Phase 2: Test with New Screens (Week 2)
+
+- Test with Job Create 2 screen
+- Verify auto-scroll works
+- Verify footer stays in place
+- Test on iOS and Android
+
+#### Phase 3: Gradual Migration (Week 3-4)
+
+Migrate screens one by one:
+1. Event Create
+2. Donation Create
+3. Investment Create
+4. Voting Create
+5. Profile Create/Edit
+
+#### Phase 4: Make Default (Next Major Version)
+
+After thorough testing:
+- Make `enableKeyboardHandling` default to `true`
+- Deprecate old behavior
+- Remove old code in next major version
+
+---
+
+## 📝 Technical Requirements
+
+### For NewWrapper with Keyboard Handling
+
+```typescript
+// 1. Import hook
+import { useKeyboardForm } from "@/hooks/useKeyboardForm";
+
+// 2. Use hook in component
+const { scrollViewRef, createFocusHandler } = useKeyboardForm(100);
+
+// 3. Pass ref to ScrollView
+<ScrollView ref={scrollViewRef}>
+
+// 4. Wrap inputs with View
+<View onStartShouldSetResponder={() => true}>
+  <TextInputCustom onFocus={createFocusHandler()} />
+</View>
+```
+
+### Required Changes per Screen
+
+For each screen that enables keyboard handling:
+
+1. **Add `enableKeyboardHandling` prop**
+2. **Wrap all TextInput/TextArea with View**
+3. **Add `onFocus` handler to inputs**
+4. **Test thoroughly**
+
+---
+
+## 🧪 Testing Checklist
+
+### For Each Screen
+
+- [ ] Tap Input 1 → Auto-scroll to input
+- [ ] Tap Input 2 → Auto-scroll to input
+- [ ] Tap Input 3 → Auto-scroll to input
+- [ ] Dismiss keyboard → Footer returns to position
+- [ ] No white area at bottom
+- [ ] Footer not raised
+- [ ] Smooth transitions
+- [ ] iOS compatibility
+- [ ] Android compatibility
+
+### Platforms to Test
+
+- [ ] Android with navigation buttons
+- [ ] Android with gesture navigation
+- [ ] iOS with home button
+- [ ] iOS with gesture (notch)
+- [ ] Various screen sizes
+
+---
+
+## 📋 Decision Factors
+
+### Choose Option A if:
+- ✅ Project is new (few existing screens)
+- ✅ Team has time for full migration
+- ✅ Want clean codebase immediately
+- ✅ Accept short-term disruption
+
+### Choose Option B if: ⭐
+- ✅ Existing project with many screens
+- ✅ Want zero disruption to users
+- ✅ Prefer gradual migration
+- ✅ Want to test thoroughly first
+
+### Choose Option C if:
+- ✅ Very conservative team
+- ✅ Cannot risk any changes to existing screens
+- ✅ OK with multiple wrapper components
+- ✅ FormWrapper is sufficient
+
+---
+
+## 🚀 Next Steps
+
+1. **Review this document** with team
+2. **Decide on approach** (A, B, or C)
+3. **Create implementation ticket**
+4. **Start with Phase 1**
+5. **Test thoroughly**
+6. **Roll out gradually**
+
+---
+
+## 📚 Related Files
+
+- `components/_ShareComponent/NewWrapper.tsx` - Current wrapper
+- `components/_ShareComponent/FormWrapper.tsx` - New form wrapper
+- `hooks/useKeyboardForm.ts` - Keyboard handling hook
+- `screens/Job/ScreenJobCreate2.tsx` - Example implementation
+
+---
+
+## 📞 Discussion Points
+
+1. **Which option do you prefer?** (A, B, or C)
+2. **How many screens use NewWrapper?**
+3. **Team capacity for migration?**
+4. **Timeline for implementation?**
+5. **Risk tolerance level?**
+
+---
+
+**Last Updated:** 2026-04-01
+**Status:** 📝 Under Discussion

docs/OS-Wrapper-Quick-Reference.md

@@ -0,0 +1,158 @@
+# OS_Wrapper Quick Reference
+
+## 📦 Import
+```tsx
+import { OS_Wrapper, IOSWrapper, AndroidWrapper } from "@/components";
+```
+
+## 🎯 Usage Examples
+
+### 1. OS_Wrapper - List Mode (Most Common)
+```tsx
+<OS_Wrapper
+  listData={data}
+  renderItem={({ item }) => <Card item={item} />}
+  ListEmptyComponent={<EmptyState />}
+  ListFooterComponent={<LoadingFooter />}
+  onEndReached={loadMore}
+  refreshControl={
+    <RefreshControl
+      refreshing={refreshing}
+      onRefresh={onRefresh}
+    />
+  }
+/>
+```
+
+### 2. OS_Wrapper - Static Mode
+```tsx
+<OS_Wrapper
+  headerComponent={<HeaderSection />}
+  footerComponent={<FooterSection />}
+  withBackground={true}
+>
+  <YourContent />
+</OS_Wrapper>
+```
+
+### 3. OS_Wrapper - Form dengan Keyboard Handling
+```tsx
+<OS_Wrapper
+  enableKeyboardHandling
+  keyboardScrollOffset={150}
+  contentPaddingBottom={100}
+  footerComponent={
+    <BoxButtonOnFooter>
+      <ButtonCustom isLoading={loading} onPress={handleSubmit}>
+        Submit
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  }
+>
+  <ScrollView>
+    <TextInputCustom />
+    <TextInputCustom />
+  </ScrollView>
+</OS_Wrapper>
+```
+
+### 4. Platform-Specific (Rare Cases)
+```tsx
+// iOS only
+<IOSWrapper>
+  <Content />
+</IOSWrapper>
+
+// Android only
+<AndroidWrapper enableKeyboardHandling>
+  <Content />
+</AndroidWrapper>
+```
+
+## 📋 Props Reference
+
+### Common Props (iOS + Android)
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `withBackground` | boolean | false | Show background image |
+| `headerComponent` | ReactNode | - | Sticky header component |
+| `footerComponent` | ReactNode | - | Fixed footer component |
+| `floatingButton` | ReactNode | - | Floating button |
+| `hideFooter` | boolean | false | Hide footer section |
+| `edgesFooter` | Edge[] | [] | Safe area edges |
+| `style` | ViewStyle | - | Custom container style |
+| `refreshControl` | RefreshControl | - | Pull to refresh control |
+
+### Android-Only Props (Ignored on iOS)
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `enableKeyboardHandling` | boolean | false | Auto-scroll on input focus |
+| `keyboardScrollOffset` | number | 100 | Scroll offset when keyboard appears |
+| `contentPaddingBottom` | number | 80 | Extra bottom padding |
+| `contentPadding` | number | 16 | Content padding (all sides) |
+
+## 🔄 Migration Pattern
+
+```diff
+- import NewWrapper from "@/components/_ShareComponent/NewWrapper";
++ import { OS_Wrapper } from "@/components";
+
+- <NewWrapper
++ <OS_Wrapper
+    listData={data}
+    renderItem={renderItem}
+    {...otherProps}
+  />
+```
+
+```diff
+- import { NewWrapper_V2 } from "@/components/_ShareComponent/NewWrapper_V2";
++ import { OS_Wrapper } from "@/components";
+
+- <NewWrapper_V2 enableKeyboardHandling>
++ <OS_Wrapper enableKeyboardHandling>
+    <FormContent />
+  </NewWrapper_V2>
+```
+
+## 💡 Tips
+
+1. **Pakai OS_Wrapper** untuk semua screen (list, detail, form)
+2. **Tambahkan `enableKeyboardHandling`** untuk form dengan input fields
+3. **Jangan mix** wrapper lama dan baru di screen yang sama
+4. **Test di kedua platform** sebelum commit
+5. **Keyboard handling** hanya bekerja di Android (iOS mengabaikan props ini)
+
+## ⚠️ Common Mistakes
+
+### ❌ Wrong
+```tsx
+// Jangan import langsung dari file
+import OS_Wrapper from "@/components/_ShareComponent/OS_Wrapper";
+
+// Jangan mix wrapper
+<OS_Wrapper>
+  <NewWrapper>{content}</NewWrapper>
+</OS_Wrapper>
+
+// Jangan pakai PageWrapper (sudah tidak ada)
+import { PageWrapper } from "@/components";
+```
+
+### ✅ Correct
+```tsx
+// Import dari @/components
+import { OS_Wrapper } from "@/components";
+
+// Simple content
+<OS_Wrapper>{content}</OS_Wrapper>
+
+// Form with keyboard handling
+<OS_Wrapper enableKeyboardHandling keyboardScrollOffset={150}>
+  <FormContent />
+</OS_Wrapper>
+```
+
+---
+
+Last updated: 2026-04-06

docs/QR_CODE_TESTING.md

@@ -0,0 +1,253 @@
+# QR Code Testing Guide - HIPMI Mobile
+
+## 📋 Overview
+
+Dokumentasi ini menjelaskan cara testing QR Code untuk Universal Links (iOS) dan App Links (Android) pada fitur Event Confirmation.
+
+## 🔧 Update Terbaru
+
+File `screens/Admin/Event/EventDetailQRCode.tsx` telah diupdate dengan fitur:
+- **Toggle Button**: Switch antara HTTPS link dan Custom Scheme link
+- **HTTPS Link**: Untuk testing Universal Links/App Links dengan domain staging
+- **Custom Scheme**: Untuk testing langsung tanpa domain verification
+
+## 🎯 Cara Testing QR Code
+
+### Opsi 1: HTTPS Link (Recommended untuk Production)
+
+**Gunakan tombol "HTTPS"** di component QR Code.
+
+**Link yang di-generate:**
+```
+https://cld-dkr-staging-hipmi.wibudev.com/event/{id}/confirmation?userId={userId}
+```
+
+**Cara kerja:**
+1. User scan QR code dengan kamera
+2. Safari/Chrome terbuka dengan URL HTTPS
+3. iOS/Android mendeteksi domain terverifikasi
+4. App terbuka otomatis dan menuju halaman confirmation
+
+**Prerequisites:**
+- ✅ File `apple-app-site-association` harus accessible di Next.js server
+- ✅ File `assetlinks.json` harus accessible di Next.js server
+- ✅ Domain harus terverifikasi di app.config.js
+- ✅ App harus di-build ulang setelah perubahan domain
+
+**Testing Steps:**
+```bash
+# 1. Pastikan .well-known files accessible
+curl https://cld-dkr-staging-hipmi.wibudev.com/.well-known/apple-app-site-association
+curl https://cld-dkr-staging-hipmi.wibudev.com/.well-known/assetlinks.json
+
+# 2. Rebuild app
+bunx expo prebuild --clean
+
+# 3. Run di physical device (bukan simulator)
+bun run android    # untuk Android
+bun run ios        # untuk iOS
+```
+
+### Opsi 2: Custom Scheme Link (Untuk Development/Testing Cepat)
+
+**Gunakan tombol "Custom Scheme"** di component QR Code.
+
+**Link yang di-generate:**
+```
+hipmimobile://event/{id}/confirmation?userId={userId}
+```
+
+**Cara kerja:**
+1. User scan QR code dengan kamera
+2. iOS: Pilih "Open in HIPMI Badung Connect"
+3. Android: Langsung buka app
+4. App terbuka dan menuju halaman confirmation
+
+**Keuntungan:**
+- ✅ Tidak butuh domain verification
+- ✅ Bisa testing langsung tanpa rebuild
+- ✅ Cocok untuk development
+
+**Kekurangan:**
+- ❌ Tidak bisa dibuka dari web browser
+- ❌ Tidak support universal linking dari website lain
+
+## 📱 Testing Checklist
+
+### iOS (Universal Links)
+
+- [ ] File `apple-app-site-association` valid dan accessible
+- [ ] Domain terdaftar di `app.config.js` → `ios.associatedDomains`
+- [ ] Bundle ID match dengan konfigurasi
+- [ ] Team ID benar di apple-app-site-association
+- [ ] Test dengan **physical device** (simulator tidak support)
+- [ ] Test dengan **Safari** (bukan Chrome)
+- [ ] Long press link → ada opsi "Open"
+
+**Debug iOS:**
+```bash
+# Cek apple-app-site-association
+curl -I https://cld-dkr-staging-hipmi.wibudev.com/.well-known/apple-app-site-association
+
+# Harus return:
+# Content-Type: application/json
+# HTTP/2 200
+```
+
+### Android (App Links)
+
+- [ ] File `assetlinks.json` valid dan accessible
+- [ ] SHA256 fingerprint benar
+- [ ] Package name match
+- [ ] Intent filters terdaftar di app.config.js
+- [ ] Test dengan **physical device**
+- [ ] Test dengan **Chrome**
+
+**Debug Android:**
+```bash
+# Dapatkan SHA256 fingerprint
+cd android
+./gradlew signingReport
+
+# Cek assetlinks.json
+curl https://cld-dkr-staging-hipmi.wibudev.com/.well-known/assetlinks.json
+```
+
+## 🐛 Troubleshooting
+
+### Problem: QR Scan Terbuka di Safari, Tidak Balik ke App
+
+**Penyebab:**
+- Domain belum terverifikasi untuk Universal Links/App Links
+- File `.well-known` tidak accessible atau invalid
+- App belum di-rebuild setelah perubahan domain
+
+**Solusi:**
+1. Pastikan file `.well-known` accessible:
+   ```bash
+   curl https://cld-dkr-staging-hipmi.wibudev.com/.well-known/apple-app-site-association
+   ```
+
+2. Rebuild app:
+   ```bash
+   bunx expo prebuild --clean
+   bun run android  # atau bun run ios
+   ```
+
+3. Gunakan **Custom Scheme** untuk testing cepat
+
+### Problem: Link Tidak Membuka App Sama Sekali
+
+**Cek:**
+1. App sudah terinstall di device
+2. Link format benar (hipmimobile:// atau https://)
+3. Route handler sudah ada di app folder
+
+**Test manual:**
+```bash
+# iOS Simulator
+xcrun simctl openurl booted "hipmimobile://event/123/confirmation?userId=456"
+
+# Android Emulator
+adb shell am start -W -a android.intent.action.VIEW \
+  -d "hipmimobile://event/123/confirmation?userId=456" \
+  com.bip.hipmimobileapp
+```
+
+### Problem: "Cannot GET /event/..." di Next.js
+
+**Penyebab:**
+Route `/event/[id]/confirmation` tidak ada di Next.js server
+
+**Solusi:**
+Pastikan Next.js project punya file:
+```
+public/.well-known/apple-app-site-association
+public/.well-known/assetlinks.json
+```
+
+Dan API route untuk handle:
+```
+pages/api/event/[id]/confirmation.ts
+```
+
+## 📄 File Configuration
+
+### app.config.js - iOS
+```javascript
+ios: {
+  associatedDomains: ["applinks:cld-dkr-staging-hipmi.wibudev.com"],
+}
+```
+
+### app.config.js - Android
+```javascript
+android: {
+  intentFilters: [
+    {
+      action: "VIEW",
+      autoVerify: true,
+      data: [
+        {
+          scheme: "https",
+          host: "cld-dkr-staging-hipmi.wibudev.com",
+          pathPrefix: "/",
+        },
+      ],
+      category: ["BROWSABLE", "DEFAULT"],
+    },
+  ],
+}
+```
+
+### apple-app-site-association (Next.js)
+```json
+{
+  "applinks": {
+    "apps": [],
+    "details": [
+      {
+        "appID": "TEAM_ID.com.anonymous.hipmi-mobile",
+        "paths": ["/event/*/confirmation"]
+      }
+    ]
+  }
+}
+```
+
+### assetlinks.json (Next.js)
+```json
+[
+  {
+    "relation": ["delegate_permission/common.handle_all_urls"],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "com.bip.hipmimobileapp",
+      "sha256_cert_fingerprints": ["YOUR_SHA256_FINGERPRINT"]
+    }
+  }
+]
+```
+
+## 🎓 Best Practices
+
+1. **Development**: Gunakan Custom Scheme untuk testing cepat
+2. **Staging**: Gunakan HTTPS link dengan domain staging
+3. **Production**: Gunakan HTTPS link dengan domain production
+4. **Testing**: Selalu test di physical device, bukan simulator
+5. **Debugging**: Enable logging di confirmation page untuk track deep link
+
+## 🔗 Related Files
+
+- `screens/Admin/Event/EventDetailQRCode.tsx` - QR Code generator
+- `app/(application)/(user)/event/[id]/confirmation.tsx` - Confirmation page
+- `app.config.js` - App configuration
+- `service/api-config.ts` - API configuration (DEEP_LINK_URL)
+
+## 📞 Support
+
+Jika masih ada masalah:
+1. Cek logs di console
+2. Test manual dengan adb/xcrun
+3. Verify .well-known files dengan curl
+4. Pastikan app rebuild setelah perubahan config

docs/prompt-for-qwen-code.md

@@ -55,10 +55,10 @@ Component yang digunakan: components/_ShareComponent/NewWrapper.tsx
 
 <!-- START Prompt Admin Refactoring -->
 <!-- Pindah kode ke Screen Component -->
-File source: app/(application)/admin/event/[id]/[status]/index.tsx
-Folder tujuan: screens/Admin/Event
-Nama file utama: ScreenEventDetail.tsx
-Nama function utama: Admin_ScreenEventDetail
+File source: app/(application)/(user)/portofolio/[id]/create.tsx
+Folder tujuan: screens/Portofolio
+Nama file utama: ScreenPortofolioCreate.tsx
+Nama function utama: Admin_ScreenPortofolioCreate
 File komponen wrapper: components/_ShareComponent/NewWrapper.tsx
 
 Buat file baru pada "Folder tujuan" dengan nama "Nama file utama" dan ubah nama function menjadi "Nama function utama" kemudian clean code, import dan panggil function tersebut pada file "File source" 
@@ -120,4 +120,9 @@ Buatkan file baru pada "Folder tujuan" dengan nama "Nama file utama" dan ubah na
 
 <!-- END Create Box -->
 
+<!-- Random Prompt -->
+Diskusi pada file screens/Authentication/LoginView.tsx , tentang penggunaan phone number input. Karena tidak berfungsi dengan baik pada versi ios 26 keatas
+
+<!-- END Random Prompt -->
+
 <!-- END Use Prompt Now -->

hooks/useKeyboardForm.ts

@@ -0,0 +1,137 @@
+// useKeyboardForm.ts - Hook untuk keyboard handling pada form
+import { Keyboard, ScrollView, Dimensions, findNodeHandle, UIManager } from "react-native";
+import { useState, useEffect, useRef, useCallback } from "react";
+
+export function useKeyboardForm(scrollOffset = 100) {
+  const scrollViewRef = useRef<ScrollView>(null);
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const currentScrollY = useRef(0);
+  const inputPageY = useRef(0);
+  const screenHeight = Dimensions.get('window').height;
+
+  // Fungsi untuk mengukur posisi absolut input
+  const handleInputFocus = useCallback((target: any) => {
+    const nodeHandle = findNodeHandle(target);
+    if (nodeHandle) {
+      UIManager.measure(nodeHandle, (x, y, width, height, pageX, pageY) => {
+        if (pageY !== undefined && pageY !== null) {
+          inputPageY.current = pageY;
+        }
+      });
+    }
+  }, []);
+
+  // Listen to keyboard events
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener(
+      'keyboardDidShow',
+      (e) => {
+        const kbHeight = e.endCoordinates.height;
+        setKeyboardHeight(kbHeight);
+        
+        // Conditional scroll: hanya scroll jika input tertutup keyboard
+        if (scrollViewRef.current) {
+          const touchAbsoluteY = inputPageY.current;
+          
+          // Posisi Y teratas keyboard (dari atas layar)
+          const keyboardTopY = screenHeight - kbHeight;
+          
+          // Jika input ADA DI BAWAH keyboard (tertutup)
+          if (touchAbsoluteY > keyboardTopY) {
+            // Hitung berapa harus scroll agar input terlihat di atas keyboard
+            const scrollBy = touchAbsoluteY - keyboardTopY + scrollOffset;
+            const targetY = currentScrollY.current + scrollBy;
+            
+            scrollViewRef.current.scrollTo({
+              y: Math.max(0, targetY),
+              animated: true,
+            });
+          }
+          // Jika input SUDAH TERLIHAT (di atas keyboard), JANGAN SCROLL
+        }
+      }
+    );
+    
+    const keyboardDidHideListener = Keyboard.addListener(
+      'keyboardDidHide',
+      () => {
+        setKeyboardHeight(0);
+        inputPageY.current = 0;
+      }
+    );
+
+    return () => {
+      keyboardDidShowListener.remove();
+      keyboardDidHideListener.remove();
+    };
+  }, [scrollOffset, screenHeight]);
+
+  // Track scroll position
+  const handleScroll = (event: any) => {
+    currentScrollY.current = event.nativeEvent.contentOffset.y;
+  };
+
+  return {
+    scrollViewRef,
+    keyboardHeight,
+    handleInputFocus,
+    handleScroll,
+  };
+}
+
+/**
+ * Helper untuk inject onFocus handler ke semua TextInput/TextArea children
+ * Menggunakan UI.measure untuk mendapatkan posisi absolut input secara akurat
+ */
+export function cloneChildrenWithFocusHandler(
+  children: React.ReactNode,
+  focusHandler: (target: any) => void
+): React.ReactNode {
+  if (!children) return children;
+  const React = require("react");
+
+  return React.Children.map(children, (child: any) => {
+    if (!React.isValidElement(child)) return child;
+
+    const childType = child.type;
+    const childProps = child.props as Record<string, any> || {};
+
+    // Check if it's a text input component
+    let isTextInput = false;
+    
+    if (typeof childType === 'string') {
+      isTextInput = childType.toLowerCase().includes('textinput');
+    } else if (childType) {
+      isTextInput = 
+        (childType as any).displayName?.includes('TextInput') ||
+        (childType as any).name?.includes('TextInput') ||
+        (childType as any).displayName?.includes('TextArea') ||
+        (childType as any).name?.includes('TextArea') ||
+        (childType as any).displayName?.includes('PhoneInput') ||
+        (childType as any).name?.includes('PhoneInput') ||
+        (childType as any).displayName?.includes('Select') ||
+        (childType as any).name?.includes('Select');
+    }
+
+    if (isTextInput) {
+      const existingOnFocus = childProps.onFocus;
+      return React.cloneElement(child, {
+        ...childProps,
+        onFocus: (e: any) => {
+          existingOnFocus?.(e);
+          focusHandler(e.target);
+        },
+      } as any);
+    }
+
+    // Recursively clone nested children
+    if (childProps.children) {
+      return React.cloneElement(child, {
+        ...childProps,
+        children: cloneChildrenWithFocusHandler(childProps.children, focusHandler),
+      } as any);
+    }
+
+    return child;
+  });
+}

ios/HIPMIBadungConnect.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -1,15 +0,0 @@
-{
-  "originHash" : "e70d3525c8e2819a8b34f22909815dab5c700c25a06c32388f3930f7b3627768",
-  "pins" : [
-    {
-      "identity" : "maplibre-gl-native-distribution",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/maplibre/maplibre-gl-native-distribution",
-      "state" : {
-        "revision" : "c68c970ff3ece56cfc3b36849db70167fa208beb",
-        "version" : "6.17.1"
-      }
-    }
-  ],
-  "version" : 3
-}

ios/HIPMIBadungConnect/HIPMIBadungConnect.entitlements

@@ -6,7 +6,7 @@
     <string>development</string>
     <key>com.apple.developer.associated-domains</key>
     <array>
-      <string>applinks:cld-dkr-staging-hipmi.wibudev.com</string>
+      <string>applinks:hipmi.muku.id</string>
     </array>
   </dict>
 </plist>

ios/HIPMIBadungConnect/Info.plist

@@ -39,7 +39,7 @@
       </dict>
     </array>
     <key>CFBundleVersion</key>
-    <string>3</string>
+    <string>7</string>
     <key>ITSAppUsesNonExemptEncryption</key>
     <false/>
     <key>LSMinimumSystemVersion</key>

ios/Podfile

@@ -1,15 +1,22 @@
-use_modular_headers!
-
 require File.join(File.dirname(`node --print "require.resolve('expo/package.json')"`), "scripts/autolinking")
 require File.join(File.dirname(`node --print "require.resolve('react-native/package.json')"`), "scripts/react_native_pods")
 
 require 'json'
 podfile_properties = JSON.parse(File.read(File.join(__dir__, 'Podfile.properties.json'))) rescue {}
 
+def ccache_enabled?(podfile_properties)
+  # Environment variable takes precedence
+  return ENV['USE_CCACHE'] == '1' if ENV['USE_CCACHE']
+  
+  # Fall back to Podfile properties
+  podfile_properties['apple.ccacheEnabled'] == 'true'
+end
+
 ENV['RCT_NEW_ARCH_ENABLED'] ||= '0' if podfile_properties['newArchEnabled'] == 'false'
 ENV['EX_DEV_CLIENT_NETWORK_INSPECTOR'] ||= podfile_properties['EX_DEV_CLIENT_NETWORK_INSPECTOR']
 ENV['RCT_USE_RN_DEP'] ||= '1' if podfile_properties['ios.buildReactNativeFromSource'] != 'true' && podfile_properties['newArchEnabled'] != 'false'
 ENV['RCT_USE_PREBUILT_RNCORE'] ||= '1' if podfile_properties['ios.buildReactNativeFromSource'] != 'true' && podfile_properties['newArchEnabled'] != 'false'
+use_modular_headers!
 platform :ios, podfile_properties['ios.deploymentTarget'] || '15.1'
 
 prepare_react_native_project!
@@ -21,7 +28,10 @@ target 'HIPMIBadungConnect' do
     config_command = ['node', '-e', "process.argv=['', '', 'config'];require('@react-native-community/cli').run()"];
   else
     config_command = [
-      'npx',
+      'node',
+      '--no-warnings',
+      '--eval',
+      'require(\'expo/bin/autolinking\')',
       'expo-modules-autolinking',
       'react-native-config',
       '--json',
@@ -35,7 +45,6 @@ target 'HIPMIBadungConnect' do
   use_frameworks! :linkage => podfile_properties['ios.useFrameworks'].to_sym if podfile_properties['ios.useFrameworks']
   use_frameworks! :linkage => ENV['USE_FRAMEWORKS'].to_sym if ENV['USE_FRAMEWORKS']
 
-
   use_react_native!(
     :path => config[:reactNativePath],
     :hermes_enabled => podfile_properties['expo.jsEngine'] == nil || podfile_properties['expo.jsEngine'] == 'hermes',
@@ -44,23 +53,12 @@ target 'HIPMIBadungConnect' do
     :privacy_file_aggregation_enabled => podfile_properties['apple.privacyManifestAggregationEnabled'] != 'false',
   )
 
-  pod 'Firebase'
-  pod 'Firebase/Messaging'
-
-  # @generated begin post_installer - expo prebuild (DO NOT MODIFY) sync-4092f82b887b5b9edb84642c2a56984d69b9a403
   post_install do |installer|
-# @generated begin @maplibre/maplibre-react-native:post-install - expo prebuild (DO NOT MODIFY) sync-6e76c80af0d70c0003d06822dd59b7c729fca472
-    $MLRN.post_install(installer)
-# @generated end @maplibre/maplibre-react-native:post-install
-
     # Fix all script phases with incorrect paths
     installer.pods_project.targets.each do |target|
       target.build_phases.each do |phase|
         next unless phase.respond_to?(:shell_script)
-        
-        # Fix duplicated path issue
         if phase.shell_script.include?('with-environment.sh')
-          # Remove any existing path and use proper relative path
           phase.shell_script = phase.shell_script.gsub(
             %r{(/.*?/node_modules/react-native)+/scripts/xcode/with-environment.sh},
             '${PODS_ROOT}/../../node_modules/react-native/scripts/xcode/with-environment.sh'
@@ -68,15 +66,14 @@ target 'HIPMIBadungConnect' do
         end
       end
     end
-    
-    # Standard React Native post install
+# @generated begin @maplibre/maplibre-react-native:post-install - expo prebuild (DO NOT MODIFY) sync-6e76c80af0d70c0003d06822dd59b7c729fca472
+    $MLRN.post_install(installer)
+# @generated end @maplibre/maplibre-react-native:post-install
     react_native_post_install(
       installer,
       config[:reactNativePath],
       :mac_catalyst_enabled => false,
-      :ccache_enabled => podfile_properties['apple.ccacheEnabled'] == 'true',
+      :ccache_enabled => ccache_enabled?(podfile_properties),
     )
   end
-  # @generated end post_installer
- 
-end
+end

ios/Podfile.lock

@@ -279,34 +279,11 @@ PODS:
   - EXUpdatesInterface (2.0.0):
     - ExpoModulesCore
   - FBLazyVector (0.81.5)
-  - Firebase (12.8.0):
-    - Firebase/Core (= 12.8.0)
-  - Firebase/Core (12.8.0):
-    - Firebase/CoreOnly
-    - FirebaseAnalytics (~> 12.8.0)
   - Firebase/CoreOnly (12.8.0):
     - FirebaseCore (~> 12.8.0)
   - Firebase/Messaging (12.8.0):
     - Firebase/CoreOnly
     - FirebaseMessaging (~> 12.8.0)
-  - FirebaseAnalytics (12.8.0):
-    - FirebaseAnalytics/Default (= 12.8.0)
-    - FirebaseCore (~> 12.8.0)
-    - FirebaseInstallations (~> 12.8.0)
-    - GoogleUtilities/AppDelegateSwizzler (~> 8.1)
-    - GoogleUtilities/MethodSwizzler (~> 8.1)
-    - GoogleUtilities/Network (~> 8.1)
-    - "GoogleUtilities/NSData+zlib (~> 8.1)"
-    - nanopb (~> 3.30910.0)
-  - FirebaseAnalytics/Default (12.8.0):
-    - FirebaseCore (~> 12.8.0)
-    - FirebaseInstallations (~> 12.8.0)
-    - GoogleAppMeasurement/Default (= 12.8.0)
-    - GoogleUtilities/AppDelegateSwizzler (~> 8.1)
-    - GoogleUtilities/MethodSwizzler (~> 8.1)
-    - GoogleUtilities/Network (~> 8.1)
-    - "GoogleUtilities/NSData+zlib (~> 8.1)"
-    - nanopb (~> 3.30910.0)
   - FirebaseCore (12.8.0):
     - FirebaseCoreInternal (~> 12.8.0)
     - GoogleUtilities/Environment (~> 8.1)
@@ -329,33 +306,6 @@ PODS:
     - GoogleUtilities/Reachability (~> 8.1)
     - GoogleUtilities/UserDefaults (~> 8.1)
     - nanopb (~> 3.30910.0)
-  - GoogleAdsOnDeviceConversion (3.2.0):
-    - GoogleUtilities/Environment (~> 8.1)
-    - GoogleUtilities/Logger (~> 8.1)
-    - GoogleUtilities/Network (~> 8.1)
-    - nanopb (~> 3.30910.0)
-  - GoogleAppMeasurement/Core (12.8.0):
-    - GoogleUtilities/AppDelegateSwizzler (~> 8.1)
-    - GoogleUtilities/MethodSwizzler (~> 8.1)
-    - GoogleUtilities/Network (~> 8.1)
-    - "GoogleUtilities/NSData+zlib (~> 8.1)"
-    - nanopb (~> 3.30910.0)
-  - GoogleAppMeasurement/Default (12.8.0):
-    - GoogleAdsOnDeviceConversion (~> 3.2.0)
-    - GoogleAppMeasurement/Core (= 12.8.0)
-    - GoogleAppMeasurement/IdentitySupport (= 12.8.0)
-    - GoogleUtilities/AppDelegateSwizzler (~> 8.1)
-    - GoogleUtilities/MethodSwizzler (~> 8.1)
-    - GoogleUtilities/Network (~> 8.1)
-    - "GoogleUtilities/NSData+zlib (~> 8.1)"
-    - nanopb (~> 3.30910.0)
-  - GoogleAppMeasurement/IdentitySupport (12.8.0):
-    - GoogleAppMeasurement/Core (= 12.8.0)
-    - GoogleUtilities/AppDelegateSwizzler (~> 8.1)
-    - GoogleUtilities/MethodSwizzler (~> 8.1)
-    - GoogleUtilities/Network (~> 8.1)
-    - "GoogleUtilities/NSData+zlib (~> 8.1)"
-    - nanopb (~> 3.30910.0)
   - GoogleDataTransport (10.1.0):
     - nanopb (~> 3.30910.0)
     - PromisesObjC (~> 2.4)
@@ -369,9 +319,6 @@ PODS:
   - GoogleUtilities/Logger (8.1.0):
     - GoogleUtilities/Environment
     - GoogleUtilities/Privacy
-  - GoogleUtilities/MethodSwizzler (8.1.0):
-    - GoogleUtilities/Logger
-    - GoogleUtilities/Privacy
   - GoogleUtilities/Network (8.1.0):
     - GoogleUtilities/Logger
     - "GoogleUtilities/NSData+zlib"
@@ -2581,9 +2528,9 @@ PODS:
     - ReactCommon/turbomodule/core
     - ReactNativeDependencies
     - Yoga
-  - SDWebImage (5.21.6):
-    - SDWebImage/Core (= 5.21.6)
-  - SDWebImage/Core (5.21.6)
+  - SDWebImage (5.21.7):
+    - SDWebImage/Core (= 5.21.7)
+  - SDWebImage/Core (5.21.7)
   - SDWebImageAVIFCoder (0.11.1):
     - libavif/core (>= 0.11.0)
     - SDWebImage (~> 5.10)
@@ -2633,8 +2580,6 @@ DEPENDENCIES:
   - ExpoWebBrowser (from `../node_modules/expo-web-browser/ios`)
   - EXUpdatesInterface (from `../node_modules/expo-updates-interface/ios`)
   - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
-  - Firebase
-  - Firebase/Messaging
   - hermes-engine (from `../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`)
   - "maplibre-react-native (from `../node_modules/@maplibre/maplibre-react-native`)"
   - RCTDeprecation (from `../node_modules/react-native/ReactApple/Libraries/RCTFoundation/RCTDeprecation`)
@@ -2722,14 +2667,11 @@ DEPENDENCIES:
 SPEC REPOS:
   trunk:
     - Firebase
-    - FirebaseAnalytics
     - FirebaseCore
     - FirebaseCoreExtension
     - FirebaseCoreInternal
     - FirebaseInstallations
     - FirebaseMessaging
-    - GoogleAdsOnDeviceConversion
-    - GoogleAppMeasurement
     - GoogleDataTransport
     - GoogleUtilities
     - libavif
@@ -3011,14 +2953,11 @@ SPEC CHECKSUMS:
   EXUpdatesInterface: 5adf50cb41e079c861da6d9b4b954c3db9a50734
   FBLazyVector: e95a291ad2dadb88e42b06e0c5fb8262de53ec12
   Firebase: 9a58fdbc9d8655ed7b79a19cf9690bb007d3d46d
-  FirebaseAnalytics: f20bbad8cb7f65d8a5eaefeb424ae8800a31bdfc
   FirebaseCore: 0dbad74bda10b8fb9ca34ad8f375fb9dd3ebef7c
   FirebaseCoreExtension: 6605938d51f765d8b18bfcafd2085276a252bee2
   FirebaseCoreInternal: fe5fa466aeb314787093a7dce9f0beeaad5a2a21
   FirebaseInstallations: 6a14ab3d694ebd9f839c48d330da5547e9ca9dc0
   FirebaseMessaging: 7f42cfd10ec64181db4e01b305a613791c8e782c
-  GoogleAdsOnDeviceConversion: d68c69dd9581a0f5da02617b6f377e5be483970f
-  GoogleAppMeasurement: 72c9a682fec6290327ea5e3c4b829b247fcb2c17
   GoogleDataTransport: aae35b7ea0c09004c3797d53c8c41f66f219d6a7
   GoogleUtilities: 00c88b9a86066ef77f0da2fab05f65d7768ed8e1
   hermes-engine: 9f4dfe93326146a1c99eb535b1cb0b857a3cd172
@@ -3107,13 +3046,13 @@ SPEC CHECKSUMS:
   RNSVG: 31d6639663c249b7d5abc9728dde2041eb2a3c34
   RNVectorIcons: 4351544f100d4f12cac156a7c13399e60bab3e26
   RNWorklets: 43cd6af94c18f89cbca10ea83fee281b69d75da5
-  SDWebImage: 1bb6a1b84b6fe87b972a102bdc77dd589df33477
+  SDWebImage: e9fc87c1aab89a8ab1bbd74eba378c6f53be8abf
   SDWebImageAVIFCoder: afe194a084e851f70228e4be35ef651df0fc5c57
   SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c
   SDWebImageWebPCoder: e38c0a70396191361d60c092933e22c20d5b1380
   Yoga: 5934998fbeaef7845dbf698f698518695ab4cd1a
   ZXingObjC: 8898711ab495761b2dbbdec76d90164a6d7e14c5
 
-PODFILE CHECKSUM: c099c57001b36661ca723fa0edfdb338496e8b9d
+PODFILE CHECKSUM: 98fc0b2be4d9f9b5a23816e3c77ad0e74ea84fa0
 
 COCOAPODS: 1.16.2