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>
feat: Migrate Portfolio & Maps screens + perbaiki bug auto-scroll keyboard
2026-04-09 17:48:51 +08:00 · 2026-04-08 17:27:06 +08:00 · 2026-04-08 14:32:11 +08:00
40 changed files with 724 additions and 480 deletions
--- a/QWEN.md
+++ b/QWEN.md
@@ -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
--- a/app/(application)/(user)/delete-account.tsx
+++ b/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>
    </>
  );
 }
--- a/app/(application)/(user)/forum/[id]/edit.tsx
+++ b/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>
  );
 }
--- a/app/(application)/(user)/forum/[id]/other-report-commentar.tsx
+++ b/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>
    </>
  );
 }
--- a/app/(application)/(user)/forum/[id]/other-report-posting.tsx
+++ b/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>
    </>
  );
 }
--- a/app/(application)/(user)/forum/[id]/preview-report-comment.tsx
+++ b/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>
    </>
  );
 }
--- a/app/(application)/(user)/forum/[id]/preview-report-posting.tsx
+++ b/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>
    </>
  );
 }
--- a/app/(application)/(user)/forum/[id]/report-commentar.tsx
+++ b/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>
    </>
  );
 }
--- a/app/(application)/(user)/forum/[id]/report-posting.tsx
+++ b/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>
    </>
  );
 }
--- a/app/(application)/(user)/forum/create.tsx
+++ b/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>
  );
 }
--- a/app/(application)/(user)/forum/terms.tsx
+++ b/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>
  );
 }

--- a/app/(application)/(user)/portofolio/[id]/edit-logo.tsx
+++ b/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>
    </>
  );
 }
--- a/app/(application)/(user)/portofolio/[id]/edit-social-media.tsx
+++ b/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>
    </>
  );
 }
--- a/app/(application)/(user)/portofolio/[id]/edit.tsx
+++ b/app/(application)/(user)/portofolio/[id]/edit.tsx
@@ -4,7 +4,7 @@ import {
  BoxButtonOnFooter,
  ButtonCustom,
  CenterCustom,
-  NewWrapper,
+  OS_Wrapper,
  PhoneInputCustom,
  SelectCustom,
  Spacing,
@@ -16,7 +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 {
+  DEFAULT_COUNTRY,
+  type CountryData,
+  COUNTRIES,
+} from "@/constants/countries";
 import {
  apiMasterBidangBisnis,
  apiMasterSubBidangBisnis,
@@ -61,7 +65,8 @@ export default function PortofolioEdit() {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState<any>({});
  const [phoneNumber, setPhoneNumber] = useState<string>("");
-  const [selectedCountry, setSelectedCountry] = useState<CountryData>(DEFAULT_COUNTRY);
+  const [selectedCountry, setSelectedCountry] =
+    useState<CountryData>(DEFAULT_COUNTRY);
  const [bidangBisnis, setBidangBisnis] = useState<
    IMasterBidangBisnis[] | null
  >(null);
@@ -75,38 +80,38 @@ export default function PortofolioEdit() {

  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 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 });
  }
@@ -157,7 +162,7 @@ export default function PortofolioEdit() {
      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)) {
@@ -166,12 +171,12 @@ export default function PortofolioEdit() {
          break;
        }
      }
-      
+
      setSelectedCountry(detectedCountry);
-      
+
      // Remove leading zero if present
      displayNumber = displayNumber.replace(/^0+/, "");
-      
+
      setPhoneNumber(displayNumber);
      setData({ ...response.data, tlpn: displayNumber });

@@ -363,161 +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} />
-            <PhoneInputCustom
-              value={phoneNumber}
-              onChangePhoneNumber={handlePhoneChange}
-              selectedCountry={selectedCountry}
-              onChangeCountry={handleCountryChange}
-              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>
    </>
  );
 }
--- a/app/(application)/(user)/portofolio/[id]/index.tsx
+++ b/app/(application)/(user)/portofolio/[id]/index.tsx
@@ -4,6 +4,7 @@ import {
  DrawerCustom,
  DummyLandscapeImage,
  LoaderCustom,
+  OS_Wrapper,
  Spacing,
  StackCustom,
  TextCustom,
@@ -12,7 +13,6 @@ 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";
@@ -92,7 +92,7 @@ export default function Portofolio() {
          ),
        }}
      />
-      <ViewWrapper>
+      <OS_Wrapper>
        {!data || !profileId ? (
            <StackCustom>
            <CustomSkeleton height={400} />
@@ -125,7 +125,7 @@ export default function Portofolio() {
            <Spacing />
          </StackCustom>
        )}
-      </ViewWrapper>
+      </OS_Wrapper>

      {/* Drawer Komponen Eksternal */}
      <DrawerCustom
--- a/app/(application)/(user)/profile/[id]/blocked-list.tsx
+++ b/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}
--- a/app/(application)/(user)/profile/[id]/detail-blocked.tsx
+++ b/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>
    </>
  );
 }
--- a/app/(application)/(user)/profile/[id]/edit.tsx
+++ b/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>
  );
 }
--- a/app/(application)/(user)/profile/[id]/index.tsx
+++ b/app/(application)/(user)/profile/[id]/index.tsx
@@ -1,5 +1,5 @@
 /* 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";
@@ -119,7 +119,7 @@ export default function Profile() {
        }}
      />
      {/* Main View */}
-      <NewWrapper
+      <OS_Wrapper
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
@@ -144,7 +144,7 @@ export default function Profile() {
            />
          </>
        )}
-      </NewWrapper>
+      </OS_Wrapper>

      {/* Drawer Komponen Eksternal */}
      <DrawerCustom
--- a/app/(application)/(user)/profile/[id]/update-background.tsx
+++ b/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>
  );
 }
--- a/app/(application)/(user)/profile/[id]/update-photo.tsx
+++ b/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>
  );
 }
--- a/app/(application)/(user)/profile/create.tsx
+++ b/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>
  );
 }
--- a/app/(application)/(user)/waiting-room.tsx
+++ b/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>
    </>
  );
 }
--- a/app/(application)/admin/user-access/[id]/index.tsx
+++ b/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>
    </>
  );
 }
--- a/components/_ShareComponent/AndroidWrapper.tsx
+++ b/components/_ShareComponent/AndroidWrapper.tsx
@@ -19,7 +19,7 @@ import {
  SafeAreaView,
 } from "react-native-safe-area-context";
 import type { ScrollViewProps, FlatListProps } from "react-native";
-import { useKeyboardForm } from "@/hooks/useKeyboardForm";
+import { useKeyboardForm, cloneChildrenWithFocusHandler } from "@/hooks/useKeyboardForm";

 // --- Base Props ---
 interface BaseProps {
@@ -52,6 +52,12 @@ interface BaseProps {
   * @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 {
@@ -87,6 +93,7 @@ export function AndroidWrapper(props: AndroidWrapperProps) {
    keyboardScrollOffset,
    contentPaddingBottom,
    contentPadding,
+    disableFlexGrow = false,
  } = props;

  // Default values (should be set by OS_Wrapper, but fallback for direct usage)
@@ -123,15 +130,12 @@ export function AndroidWrapper(props: AndroidWrapperProps) {
    const listProps = props as ListModeProps;

    return (
-      <TouchableWithoutFeedback onPress={Keyboard.dismiss} style={{ flex: 1 }}>
-        <KeyboardAvoidingView
-          behavior={undefined}
-          style={{ flex: 1, backgroundColor: MainColor.darkblue }}
-        >
-          {headerComponent && (
-            <View style={GStyles.stickyHeader}>{headerComponent}</View>
-          )}
-          <FlatList
+      <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={
@@ -145,13 +149,16 @@ export function AndroidWrapper(props: AndroidWrapperProps) {
            ListFooterComponent={listProps.ListFooterComponent}
            ListEmptyComponent={listProps.ListEmptyComponent}
            contentContainerStyle={{
-              flexGrow: 1,
+              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% */}
@@ -174,19 +181,20 @@ export function AndroidWrapper(props: AndroidWrapperProps) {
        {floatingButton && (
          <View style={GStyles.floatingContainer}>{floatingButton}</View>
        )}
-      </KeyboardAvoidingView>
-    </TouchableWithoutFeedback>
+      </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 (
-    <KeyboardAvoidingView
-      behavior={undefined}
-      style={{ flex: 1, backgroundColor: MainColor.darkblue }}
-    >
+    <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
      {headerComponent && (
        <View style={GStyles.stickyHeader}>{headerComponent}</View>
      )}
@@ -195,9 +203,10 @@ export function AndroidWrapper(props: AndroidWrapperProps) {
        ref={keyboardForm?.scrollViewRef}
        onScroll={keyboardForm?.handleScroll}
        scrollEventThrottle={16}
+        refreshControl={refreshControl}
        style={{ flex: 1 }}
        contentContainerStyle={{
-          flexGrow: 1,
+          flexGrow: disableFlexGrow ? 0 : 1,
          paddingBottom:
            (footerComponent && !hideFooter ? OS_HEIGHT : 0) +
            finalContentPaddingBottom,
@@ -207,7 +216,7 @@ export function AndroidWrapper(props: AndroidWrapperProps) {
        showsVerticalScrollIndicator={false}
      >
        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-          {renderContainer(staticProps.children)}
+          {renderContainer(childrenWithFocus)}
        </TouchableWithoutFeedback>
      </ScrollView>

@@ -238,7 +247,7 @@ export function AndroidWrapper(props: AndroidWrapperProps) {
      {floatingButton && (
        <View style={GStyles.floatingContainer}>{floatingButton}</View>
      )}
-    </KeyboardAvoidingView>
+    </View>
  );
 }

--- a/components/_ShareComponent/OS_Wrapper.tsx
+++ b/components/_ShareComponent/OS_Wrapper.tsx
@@ -22,6 +22,7 @@ interface BaseProps {
  edgesFooter?: NativeSafeAreaViewProps["edges"];
  style?: StyleProp<ViewStyle>;
  refreshControl?: ScrollViewProps["refreshControl"];
+  disableFlexGrow?: boolean;
 }

 // ========== Static Mode Props ==========
@@ -123,13 +124,14 @@ export function OS_Wrapper(props: OS_WrapperProps) {
    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)} />;
+    return <IOSWrapper {...(wrapperProps as any)} disableFlexGrow={disableFlexGrow} />;
  }

  // Android uses AndroidWrapper (with keyboard handling support)
@@ -140,6 +142,7 @@ export function OS_Wrapper(props: OS_WrapperProps) {
      keyboardScrollOffset={keyboardScrollOffset}
      contentPaddingBottom={contentPaddingBottom}
      contentPadding={contentPadding}
+      disableFlexGrow={disableFlexGrow}
    />
  );
 }
--- a/hooks/useKeyboardForm.ts
+++ b/hooks/useKeyboardForm.ts
@@ -1,12 +1,25 @@
 // useKeyboardForm.ts - Hook untuk keyboard handling pada form
-import { Keyboard, ScrollView, Dimensions } from "react-native";
-import { useState, useEffect, useRef } from "react";
-import React from "react";
+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(() => {
@@ -16,20 +29,34 @@ export function useKeyboardForm(scrollOffset = 100) {
        const kbHeight = e.endCoordinates.height;
        setKeyboardHeight(kbHeight);
        
-        // Simple: scroll by keyboard height saat keyboard muncul
+        // Conditional scroll: hanya scroll jika input tertutup keyboard
        if (scrollViewRef.current) {
-          const targetY = currentScrollY.current + kbHeight - scrollOffset;
-          scrollViewRef.current.scrollTo({
-            y: Math.max(0, targetY),
-            animated: true,
-          });
+          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;
      }
    );

@@ -37,35 +64,74 @@ export function useKeyboardForm(scrollOffset = 100) {
      keyboardDidShowListener.remove();
      keyboardDidHideListener.remove();
    };
-  }, [scrollOffset]);
+  }, [scrollOffset, screenHeight]);

  // Track scroll position
  const handleScroll = (event: any) => {
    currentScrollY.current = event.nativeEvent.contentOffset.y;
  };

-  // Dummy handlers (for API compatibility)
-  const createFocusHandler = () => {
-    return () => {};
-  };
-
-  const registerInputFocus = () => {};
-
  return {
    scrollViewRef,
    keyboardHeight,
-    registerInputFocus,
-    createFocusHandler,
+    handleInputFocus,
    handleScroll,
  };
 }

 /**
- * Dummy helper (no-op, for API compatibility)
+ * 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: (inputRef: any) => void
+  focusHandler: (target: any) => void
 ): React.ReactNode {
-  return children;
-}
+  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;
+  });
+}
--- a/screens/Admin/User-Access/ScreenUserAccess.tsx
+++ b/screens/Admin/User-Access/ScreenUserAccess.tsx
@@ -3,13 +3,13 @@ import {
  BadgeCustom,
  CenterCustom,
  Grid,
+  OS_Wrapper,
  SearchInput,
  StackCustom,
  TextCustom,
 } from "@/components";
 import AdminBasicBox from "@/components/_ShareComponent/Admin/AdminBasicBox";
 import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { MainColor } from "@/constants/color-palet";
 import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
@@ -101,7 +101,7 @@ export function Admin_ScreenUserAccess() {
  );

  return (
-    <NewWrapper
+    <OS_Wrapper
      headerComponent={
        <AdminComp_BoxTitle
          title="User Access"
--- a/screens/Forum/DetailForum.tsx
+++ b/screens/Forum/DetailForum.tsx
@@ -3,12 +3,11 @@ import {
  ButtonCustom,
  DrawerCustom,
  LoaderCustom,
-  NewWrapper,
+  OS_Wrapper,
  Spacing,
  TextAreaCustom,
  TextCustom,
  TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import AlertWarning from "@/components/Alert/AlertWarning";
@@ -193,7 +192,7 @@ export default function DetailForum() {

  return (
    <>
-      <NewWrapper
+      <OS_Wrapper
      // headerComponent={headerComponent()}
      >
        {!data && !listComment ? (
@@ -225,7 +224,7 @@ export default function DetailForum() {
            ))}
          </>
        )}
-      </NewWrapper>
+      </OS_Wrapper>

      {/* Posting Drawer */}
      <DrawerCustom
--- a/screens/Forum/DetailForum2.tsx
+++ b/screens/Forum/DetailForum2.tsx
@@ -3,13 +3,12 @@ import {
  ButtonCustom,
  DrawerCustom,
  LoaderCustom,
-  NewWrapper,
+  OS_Wrapper,
  Spacing,
  StackCustom,
  TextAreaCustom,
  TextCustom,
  TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import AlertWarning from "@/components/Alert/AlertWarning";
@@ -34,6 +33,7 @@ import _ from "lodash";
 import { useCallback, useEffect, useState } from "react";
 import { RefreshControl } from "react-native";
 import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
+import { PADDING_INLINE } from "@/constants/constans-value";

 export default function DetailForum2() {
  const { id } = useLocalSearchParams();
@@ -213,20 +213,6 @@ export default function DetailForum2() {
        }}
      />
  )
-    // !data || !commentPagination.listData ? (
-    //   // <ListSkeletonComponent height={120} />
-    //   <LoaderCustom />
-    // ) : (
-    //   <Forum_CommentarBoxSection
-    //     key={item.id}
-    //     data={item}
-    //     onSetData={(value) => {
-    //       setCommentId(value.setCommentId);
-    //       setOpenDrawerCommentar(value.setOpenDrawer);
-    //       setCommentAuthorId(value.setCommentAuthorId);
-    //     }}
-    //   />
-    // );

  // Generate pagination components using helper
  const { ListEmptyComponent, ListFooterComponent } =
@@ -242,8 +228,9 @@ export default function DetailForum2() {

  return (
    <>
-      <NewWrapper
-        // headerComponent={}
+      <OS_Wrapper
+        contentPadding={PADDING_INLINE}
+        disableFlexGrow
        listData={commentPagination.listData}
        renderItem={renderCommentItem}
        refreshControl={
--- a/screens/Forum/ViewBeranda.tsx
+++ b/screens/Forum/ViewBeranda.tsx
@@ -1,7 +1,7 @@
 import {
  BackButton,
  AvatarComp,
-  ViewWrapper,
+  OS_Wrapper,
  SearchInput,
  FloatingButton,
  LoaderCustom,
@@ -71,7 +71,7 @@ export default function Forum_ViewBeranda() {
        }}
      />

-      <ViewWrapper
+      <OS_Wrapper
        headerComponent={
          <SearchInput
            placeholder="Cari topik diskusi"
@@ -107,7 +107,7 @@ export default function Forum_ViewBeranda() {
            />
          ))
        )}
-      </ViewWrapper>
+      </OS_Wrapper>
    </>
  );
 }
--- a/screens/Forum/ViewBeranda2.tsx
+++ b/screens/Forum/ViewBeranda2.tsx
@@ -6,11 +6,11 @@ import {
  LoaderCustom,
  SearchInput,
  StackCustom,
-  TextCustom, // ← gunakan NewWrapper yang sudah diperbaiki
+  TextCustom,
+  OS_Wrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import SkeletonCustom from "@/components/_ShareComponent/SkeletonCustom";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { useAuth } from "@/hooks/use-auth";
 import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
 import { apiForumGetAll } from "@/service/api-client/api-forum";
@@ -172,8 +172,8 @@ export default function Forum_ViewBeranda2() {
        }}
      />

-      {/* 🔹 NewWrapper dalam mode list */}
-      <NewWrapper
+      {/* 🔹 OS_Wrapper dalam mode list */}
+      <OS_Wrapper
        // Header global (di atas FlatList, sticky)
        headerComponent={
          <View style={{ paddingHorizontal: 16, paddingTop: 8 }}>
--- a/screens/Forum/ViewBeranda3.tsx
+++ b/screens/Forum/ViewBeranda3.tsx
@@ -2,11 +2,12 @@ import {
  AvatarComp,
  BackButton,
  FloatingButton,
+  OS_Wrapper,
  SearchInput,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { MainColor } from "@/constants/color-palet";
+import { PADDING_INLINE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { useAuth } from "@/hooks/use-auth";
 import { usePagination } from "@/hooks/use-pagination";
@@ -75,12 +76,6 @@ export default function Forum_ViewBeranda3() {
    />
  );

-  //   const ListHeaderComponent = (
-  //     <View style={{ paddingVertical: 8, alignItems: "center" }}>
-  //       <TextCustom>Diskusi Terbaru</TextCustom>
-  //     </View>
-  //   );
-
  return (
    <>
      <Stack.Screen
@@ -105,8 +100,9 @@ export default function Forum_ViewBeranda3() {
        }}
      />

-      <NewWrapper
+      <OS_Wrapper
        hideFooter
+        contentPadding={PADDING_INLINE}
        headerComponent={
          <View style={{ paddingTop: 8 }}>
            <SearchInput
--- a/screens/Forum/ViewForumku.tsx
+++ b/screens/Forum/ViewForumku.tsx
@@ -7,9 +7,9 @@ import {
  FloatingButton,
  Grid,
  LoaderCustom,
+  OS_Wrapper,
  StackCustom,
  TextCustom,
-  ViewWrapper,
 } from "@/components";
 import { useAuth } from "@/hooks/use-auth";
 import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
@@ -66,7 +66,7 @@ export default function View_Forumku() {

  return (
    <>
-      <ViewWrapper
+      <OS_Wrapper
        floatingButton={
          user?.id === id && (
            <FloatingButton
@@ -121,7 +121,7 @@ export default function View_Forumku() {
            </>
          )}
        </StackCustom>
-      </ViewWrapper>
+      </OS_Wrapper>

      {/* Drawer Komponen Eksternal */}
      <DrawerCustom
--- a/screens/Forum/ViewForumku2.tsx
+++ b/screens/Forum/ViewForumku2.tsx
@@ -6,11 +6,11 @@ import {
  FloatingButton,
  Grid,
  LoaderCustom,
+  OS_Wrapper,
  Spacing,
  StackCustom,
  TextCustom,
 } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import NoDataText from "@/components/_ShareComponent/NoDataText";
 import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import { MainColor } from "@/constants/color-palet";
@@ -24,6 +24,7 @@ import { router, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
 import { useEffect, useState } from "react";
 import { RefreshControl, View } from "react-native";
+import { PADDING_INLINE } from "@/constants/constans-value";

 export default function View_Forumku2() {
  const { id } = useLocalSearchParams();
@@ -120,7 +121,8 @@ export default function View_Forumku2() {

  return (
    <>
-      <NewWrapper
+      <OS_Wrapper
+      contentPadding={PADDING_INLINE}
        floatingButton={
          user?.id === id && (
            <FloatingButton
--- a/screens/Maps/ScreenMapsCreate.tsx
+++ b/screens/Maps/ScreenMapsCreate.tsx
@@ -1,4 +1,3 @@
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import {
  BoxButtonOnFooter,
  ButtonCustom,
@@ -8,6 +7,7 @@ import {
  TextInputCustom,
  LandscapeFrameUploaded,
  ButtonCenteredOnly,
+  OS_Wrapper,
 } from "@/components";
 import { MapSelectedPlatform } from "@/components/Map/MapSelectedPlatform";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -142,10 +142,14 @@ export function Maps_ScreenMapsCreate() {
  );

  /**
-   * Render screen dengan NewWrapper
+   * Render screen dengan OS_Wrapper
   */
  return (
-    <NewWrapper footerComponent={buttonFooter}>
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
+      footerComponent={buttonFooter}
+    >
      <InformationBox text="Tentukan lokasi pin map dengan menekan pada map." />

      <BaseBox>
@@ -179,7 +183,7 @@ export function Maps_ScreenMapsCreate() {
      </ButtonCenteredOnly>

      <Spacing height={50} />
-    </NewWrapper>
+    </OS_Wrapper>
  );
 }

--- a/screens/Maps/ScreenMapsEdit.tsx
+++ b/screens/Maps/ScreenMapsEdit.tsx
@@ -7,7 +7,7 @@ import {
  LandscapeFrameUploaded,
  Spacing,
  TextInputCustom,
-  ViewWrapper,
+  OS_Wrapper,
 } from "@/components";
 import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import { MapSelectedPlatform } from "@/components/Map/MapSelectedPlatform";
@@ -166,7 +166,11 @@ export function Maps_ScreenMapsEdit() {
      : defaultRegion;

  return (
-    <ViewWrapper footerComponent={buttonFooter}>
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
+      footerComponent={buttonFooter}
+    >
      <InformationBox text="Tentukan lokasi pin map dengan menekan pada map." />

      {/* <MapSelectedPlatform
@@ -223,6 +227,6 @@ export function Maps_ScreenMapsEdit() {
        Upload
      </ButtonCenteredOnly>
      <Spacing height={50} />
-    </ViewWrapper>
+    </OS_Wrapper>
  );
 }
--- a/screens/Portofolio/ScreenPortofolioCreate.tsx
+++ b/screens/Portofolio/ScreenPortofolioCreate.tsx
@@ -4,7 +4,7 @@ import {
  ButtonCenteredOnly,
  CenterCustom,
  InformationBox,
-  NewWrapper,
+  OS_Wrapper,
  PhoneInputCustom,
  SelectCustom,
  Spacing,
@@ -142,7 +142,9 @@ export function ScreenPortofolioCreate() {
  };

  return (
-    <NewWrapper
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
      footerComponent={
        <Portofolio_ButtonCreate
          id={id as string}
@@ -362,6 +364,6 @@ export function ScreenPortofolioCreate() {
          }
        />
      </StackCustom>
-    </NewWrapper>
+    </OS_Wrapper>
  );
 }
--- a/screens/Portofolio/ViewListPortofolio.tsx
+++ b/screens/Portofolio/ViewListPortofolio.tsx
@@ -1,4 +1,4 @@
-import { NewWrapper, TextCustom } from "@/components";
+import { OS_Wrapper, TextCustom } from "@/components";
 import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import { MainColor } from "@/constants/color-palet";
 import { usePagination } from "@/hooks/use-pagination";
@@ -9,7 +9,7 @@ import { useCallback } from "react";
 import { RefreshControl } from "react-native";
 import Portofolio_BoxView from "./BoxPortofolioView";
 import NoDataText from "@/components/_ShareComponent/NoDataText";
-import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+import { PADDING_INLINE, PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";

 export default function ViewListPortofolio() {
  const { id } = useLocalSearchParams();
@@ -19,9 +19,9 @@ export default function ViewListPortofolio() {
    fetchFunction: async (page) => {
      return await apiGetPortofolio({
        id: id as string,
-        page: String(page) // API expects string
+        page: String(page), // API expects string
      });
-    //   return response.data;
+      //   return response.data;
    },
    pageSize: PAGINATION_DEFAULT_TAKE,
    dependencies: [id],
@@ -41,18 +41,20 @@ export default function ViewListPortofolio() {
  );

  // Generate pagination components using helper
-  const { ListEmptyComponent, ListFooterComponent } = createPaginationComponents({
-    loading: pagination.loading,
-    refreshing: pagination.refreshing,
-    listData: pagination.listData,
-    isInitialLoad: pagination.isInitialLoad,
-    emptyMessage: "Tidak ada portofolio",
-    skeletonCount: 3,
-    skeletonHeight: 100,
-  });
+  const { ListEmptyComponent, ListFooterComponent } =
+    createPaginationComponents({
+      loading: pagination.loading,
+      refreshing: pagination.refreshing,
+      listData: pagination.listData,
+      isInitialLoad: pagination.isInitialLoad,
+      emptyMessage: "Tidak ada portofolio",
+      skeletonCount: 3,
+      skeletonHeight: 100,
+    });

  return (
-    <NewWrapper
+    <OS_Wrapper
+      contentPadding={PADDING_INLINE}
      listData={pagination.listData}
      renderItem={renderItem}
      refreshControl={
--- a/tasks/TASK-005-OS-Wrapper-Implementation.md
+++ b/tasks/TASK-005-OS-Wrapper-Implementation.md
@@ -32,8 +32,8 @@ refreshControl?: RefreshControl;
 // Keyboard handling (Android only - iOS mengabaikan)
 enableKeyboardHandling?: boolean;      // Default: false
 keyboardScrollOffset?: number;         // Default: 100
-contentPaddingBottom?: number;         // Default: 80
-contentPadding?: number;               // Default: 16
+contentPaddingBottom?: number;         // Default: 100
+contentPadding?: number;               // Default: 0
 ```

 ### 2. **IOSWrapper** / **AndroidWrapper** (Direct Usage)
@@ -68,19 +68,19 @@ import { OS_Wrapper } from "@/components";
 // Form mode (with keyboard handling - Android only)
 <OS_Wrapper
  enableKeyboardHandling
-  keyboardScrollOffset={150}
-  contentPaddingBottom={100}
-  footerComponent={<SubmitButton />}
+  contentPaddingBottom={250}  // ← HANYA untuk screens dengan TextInput
 >
  <FormContent />
 </OS_Wrapper>
 ```

-## 🚀 Implementation Status
+---

-### ✅ Phase 1: Job Screens - COMPLETED (2026-04-06)
+# 🔵 USER PHASES (User-Facing Screens)

-**Files migrated: 8**
+## ✅ User Phase 1: Job Screens - COMPLETED (2026-04-06 to 2026-04-07)
+
+**Files migrated: 9**

 #### Job List Screens (OS_Wrapper):
 - ✅ `screens/Job/ScreenBeranda.tsx` - ViewWrapper → OS_Wrapper
@@ -91,8 +91,11 @@ import { OS_Wrapper } from "@/components";
 - ✅ `screens/Job/MainViewStatus2.tsx` - NewWrapper_V2 → OS_Wrapper

 #### Job Form Screens (OS_Wrapper with keyboard handling):
- ✅ `screens/Job/ScreenJobCreate.tsx` - NewWrapper_V2 → OS_Wrapper + enableKeyboardHandling
- ✅ `screens/Job/ScreenJobEdit.tsx` - NewWrapper_V2 → OS_Wrapper + enableKeyboardHandling
+- ✅ `screens/Job/ScreenJobCreate.tsx` - NewWrapper_V2 → OS_Wrapper + enableKeyboardHandling + contentPaddingBottom={250}
+- ✅ `screens/Job/ScreenJobEdit.tsx` - NewWrapper_V2 → OS_Wrapper + enableKeyboardHandling + contentPaddingBottom={250}
+
+#### Job Detail Screen:
+- ✅ `app/(application)/(user)/job/[id]/[status]/detail.tsx` - NewWrapper_V2 → OS_Wrapper

 **Testing Status:**
 - ✅ TypeScript: No errors
@@ -100,82 +103,211 @@ import { OS_Wrapper } from "@/components";
 - ✅ iOS Testing: Complete ✅
 - ✅ Android Testing: Complete ✅

-**Implementation Notes:**
- Semua form screens menggunakan `enableKeyboardHandling` untuk keyboard auto-scroll di Android
- Semua list screens menggunakan pagination dengan `onEndReached`
- Floating button dan sticky header berfungsi dengan baik
- Footer component tetap di posisi bawah
+## ✅ User Phase 2: Profile, Waiting Room, Delete Account - COMPLETED (2026-04-08)

-### ⏳ Phase 2: Other User Screens (Priority: HIGH)
+**Files migrated: 10**

 #### Profile Screens:
- [ ] `screens/Profile/ScreenProfile.tsx`
- [ ] `screens/Profile/ScreenProfileEdit.tsx` → pakai `enableKeyboardHandling`
- [ ] `screens/Profile/ScreenProfileCreate.tsx` → pakai `enableKeyboardHandling`
+- ✅ `app/(application)/(user)/profile/[id]/index.tsx` - NewWrapper → OS_Wrapper (list with pull-to-refresh)
+- ✅ `app/(application)/(user)/profile/[id]/edit.tsx` - ViewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
+- ✅ `app/(application)/(user)/profile/create.tsx` - ViewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
+- ✅ `app/(application)/(user)/profile/[id]/blocked-list.tsx` - NewWrapper → OS_Wrapper (pagination list)
+- ✅ `app/(application)/(user)/profile/[id]/detail-blocked.tsx` - NewWrapper → OS_Wrapper (static with footer)
+- ✅ `app/(application)/(user)/profile/[id]/update-background.tsx` - ViewWrapper → OS_Wrapper (static with footer)
+- ✅ `app/(application)/(user)/profile/[id]/update-photo.tsx` - ViewWrapper → OS_Wrapper (static with footer)

-#### Forum/Discussion:
- [ ] `screens/Forum/ScreenForum.tsx`
- [ ] `screens/Forum/ScreenForumDetail.tsx`
- [ ] `screens/Forum/ScreenForumCreate.tsx` → pakai `enableKeyboardHandling`
+#### Other Screens:
+- ✅ `app/(application)/(user)/waiting-room.tsx` - NewWrapper → OS_Wrapper (static with refresh + footer)
+- ✅ `app/(application)/(user)/delete-account.tsx` - ViewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})

-#### Portfolio:
- [ ] `screens/Portfolio/ScreenPortfolio.tsx`
- [ ] `screens/Portfolio/ScreenPortfolioCreate.tsx` → pakai `enableKeyboardHandling`
- [ ] `screens/Portfolio/ScreenPortfolioEdit.tsx` → pakai `enableKeyboardHandling`
+## ✅ User Phase 3: Portfolio Screens - COMPLETED (2026-04-08)

-### ⏳ Phase 3: Admin Screens (Priority: MEDIUM)
+**Files migrated: 6**

-#### Event Management:
- [ ] `screens/Admin/Event/ScreenEventList.tsx`
- [ ] `screens/Admin/Event/ScreenEventCreate.tsx` → pakai `enableKeyboardHandling`
- [ ] `screens/Admin/Event/ScreenEventEdit.tsx` → pakai `enableKeyboardHandling`
+#### Portfolio Screens:
+- ✅ `app/(application)/(user)/portofolio/[id]/index.tsx` - ViewWrapper → OS_Wrapper (detail screen with pull-to-refresh)
+- ✅ `app/(application)/(user)/portofolio/[id]/edit.tsx` - NewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
+- ✅ `app/(application)/(user)/portofolio/[id]/edit-logo.tsx` - ViewWrapper → OS_Wrapper (static with footer)
+- ✅ `app/(application)/(user)/portofolio/[id]/edit-social-media.tsx` - ViewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
+- ✅ `screens/Portofolio/ViewListPortofolio.tsx` - NewWrapper → OS_Wrapper (pagination list)
+- ✅ `screens/Portofolio/ScreenPortofolioCreate.tsx` - NewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})

-#### Voting Management:
- [ ] `screens/Admin/Voting/ScreenVotingList.tsx`
- [ ] `screens/Admin/Voting/ScreenVotingCreate.tsx` → pakai `enableKeyboardHandling`
- [ ] `screens/Admin/Voting/ScreenVotingEdit.tsx` → pakai `enableKeyboardHandling`
+## ✅ User Phase 4: Maps Screens - COMPLETED (2026-04-08)

-#### Donation Management:
- [ ] `screens/Admin/Donation/ScreenDonationList.tsx`
- [ ] `screens/Admin/Donation/ScreenDonationCreate.tsx` → pakai `enableKeyboardHandling`
- [ ] `screens/Admin/Donation/ScreenDonationEdit.tsx` → pakai `enableKeyboardHandling`
+**Files migrated: 2**

-### ⏳ Phase 4: Other Screens (Priority: LOW)
- [ ] `screens/Investasi/` - Investment screens
- [ ] `screens/Kolaborasi/` - Collaboration screens
- [ ] Other user-facing screens
+#### Maps Screens:
+- ✅ `screens/Maps/ScreenMapsCreate.tsx` - NewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
+- ✅ `screens/Maps/ScreenMapsEdit.tsx` - ViewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})

-## ✅ Testing Checklist
+## ✅ User Phase 5: Forum Screens - COMPLETED (2026-04-09)

-Setiap screen yang sudah di-migrate, test:
+**Files migrated: 17**

-### iOS Testing
- [ ] UI tampil sesuai design
- [ ] Tabs berfungsi dengan baik
- [ ] ScrollView/FlatList scroll dengan smooth
- [ ] Keyboard tidak menutupi input (jika pakai `enableKeyboardHandling`)
- [ ] Footer muncul di posisi yang benar
- [ ] Pull to refresh berfungsi (jika ada)
+#### Forum List & Create Screens:
+- ✅ `screens/Forum/ViewBeranda.tsx` - ViewWrapper → OS_Wrapper
+- ✅ `screens/Forum/ViewBeranda2.tsx` - NewWrapper → OS_Wrapper
+- ✅ `screens/Forum/ViewBeranda3.tsx` - NewWrapper → OS_Wrapper (Active)
+- ✅ `screens/Forum/create.tsx` - ViewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
+- ✅ `screens/Forum/terms.tsx` - NewWrapper → OS_Wrapper (Terms page)

-### Android Testing
- [ ] UI tampil sesuai design
- [ ] Tabs berfungsi dengan baik
- [ ] ScrollView/FlatList scroll dengan smooth
- [ ] Keyboard handling: auto scroll saat input focus (jika pakai `enableKeyboardHandling`)
- [ ] Footer muncul di posisi yang benar (tidak tertutup navigation bar)
- [ ] Pull to refresh berfungsi (jika ada)
+#### Forum Detail & Comments Screens:
+- ✅ `screens/Forum/DetailForum.tsx` - NewWrapper → OS_Wrapper
+- ✅ `screens/Forum/DetailForum2.tsx` - NewWrapper → OS_Wrapper (Active + disableFlexGrow fix)

-### Common Testing
- [ ] Background image muncul (jika `withBackground={true}`)
- [ ] Sticky header berfungsi (jika ada `headerComponent`)
- [ ] Footer fixed di bottom (jika ada `footerComponent`)
- [ ] Floating button muncul (jika ada `floatingButton`)
- [ ] Loading skeleton muncul saat pagination
- [ ] Empty state muncul saat data kosong
+#### User's Forum ("Forumku") Screens:
+- ✅ `screens/Forum/ViewForumku.tsx` - ViewWrapper → OS_Wrapper
+- ✅ `screens/Forum/ViewForumku2.tsx` - NewWrapper → OS_Wrapper

-## 📌 Notes
+#### Report & Edit Screens:
+- ✅ `app/(application)/(user)/forum/[id]/edit.tsx` - ViewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
+- ✅ `app/(application)/(user)/forum/[id]/report-commentar.tsx` - ViewWrapper → OS_Wrapper (Static report form)
+- ✅ `app/(application)/(user)/forum/[id]/report-posting.tsx` - ViewWrapper → OS_Wrapper (Static report form)
+- ✅ `app/(application)/(user)/forum/[id]/other-report-commentar.tsx` - ViewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
+- ✅ `app/(application)/(user)/forum/[id]/other-report-posting.tsx` - ViewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
+- ✅ `app/(application)/(user)/forum/[id]/preview-report-comment.tsx` - NewWrapper → OS_Wrapper
+- ✅ `app/(application)/(user)/forum/[id]/preview-report-posting.tsx` - NewWrapper → OS_Wrapper
+- ✅ `app/(application)/(user)/forum/[id]/index.tsx` - Checked (No wrapper to migrate, just imports)

-### Usage Pattern:
+**Bug Fixes Implemented:**
+- ✅ **Scroll Macet (Ghost Scroll):** Fixed dengan menghapus `KeyboardAvoidingView` & `TouchableWithoutFeedback` di List Mode `AndroidWrapper`.
+- ✅ **Header Besar Terpotong:** Menambahkan props `disableFlexGrow={true}` untuk layar dengan header besar (DetailForum2).
+- ✅ **Keyboard Dismiss:** Menggunakan `keyboardShouldPersistTaps="handled"` agar tap di area kosong menutup keyboard.
+
+## ⏳ User Phase 6: Event Screens (Priority: HIGH)
+
+- [ ] `app/(application)/(user)/event/create.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- [ ] `app/(application)/(user)/event/(tabs)/index.tsx`
+- [ ] `app/(application)/(user)/event/[id]/index.tsx` (detail)
+- [ ] `app/(application)/(user)/event/detail/[id].tsx`
+
+## ⏳ User Phase 7: Voting Screens (Priority: HIGH)
+
+- [ ] `app/(application)/(user)/voting/create.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- [ ] `app/(application)/(user)/voting/(tabs)/index.tsx`
+- [ ] `app/(application)/(user)/voting/[id]/index.tsx` (detail)
+
+## ⏳ User Phase 8: Donation Screens (Priority: HIGH)
+
+- [ ] `app/(application)/(user)/donation/create.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- [ ] `app/(application)/(user)/donation/create-story.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- [ ] `app/(application)/(user)/donation/(tabs)/index.tsx`
+- [ ] `app/(application)/(user)/donation/[id]/index.tsx` (detail)
+
+## ⏳ User Phase 9: Investment Screens (Priority: MEDIUM)
+
+- [ ] `app/(application)/(user)/investment/create.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- [ ] `app/(application)/(user)/investment/(tabs)/index.tsx`
+- [ ] `app/(application)/(user)/investment/[id]/index.tsx` (detail)
+
+## ⏳ User Phase 10: Collaboration Screens (Priority: MEDIUM)
+
+- [ ] `app/(application)/(user)/collaboration/create.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- [ ] `app/(application)/(user)/collaboration/(tabs)/index.tsx`
+- [ ] `app/(application)/(user)/collaboration/[id]/index.tsx` (detail)
+
+## ⏳ User Phase 11: Other User Screens (Priority: LOW)
+
+- [ ] `app/(application)/(user)/marketplace/index.tsx`
+- [ ] `app/(application)/(user)/user-search/index.tsx`
+- [ ] `app/(application)/(user)/notifications/` - Notification screens (TBD)
+- [ ] `app/(application)/(user)/crowdfunding/` - Crowdfunding screens (TBD)
+
+---
+
+# 🔴 ADMIN PHASES (Admin-Facing Screens)
+
+## ⏳ Admin Phase 1: Event Management (Priority: HIGH)
+
+- [ ] `app/(application)/admin/event/index.tsx`
+- [ ] `app/(application)/admin/event/type-create.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- [ ] `app/(application)/admin/event/type-update.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- [ ] `app/(application)/admin/event/type-of-event.tsx`
+- [ ] `app/(application)/admin/event/[id]/index.tsx` (detail)
+- [ ] `app/(application)/admin/event/[status]/index.tsx`
+
+## ⏳ Admin Phase 2: Voting Management (Priority: HIGH)
+
+- [ ] `app/(application)/admin/voting/index.tsx`
+- [ ] `app/(application)/admin/voting/history.tsx`
+- [ ] `app/(application)/admin/voting/[id]/index.tsx` (detail)
+- [ ] `app/(application)/admin/voting/[status]/index.tsx`
+
+## ⏳ Admin Phase 3: Donation Management (Priority: HIGH)
+
+- [ ] `app/(application)/admin/donation/index.tsx`
+- [ ] `app/(application)/admin/donation/category.tsx`
+- [ ] `app/(application)/admin/donation/category-create.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- [ ] `app/(application)/admin/donation/category-update.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- [ ] `app/(application)/admin/donation/[id]/index.tsx` (detail)
+- [ ] `app/(application)/admin/donation/[status]/index.tsx`
+
+## ⏳ Admin Phase 4: Forum Admin (Priority: MEDIUM)
+
+- [ ] `app/(application)/admin/forum/index.tsx`
+- [ ] `app/(application)/admin/forum/posting.tsx`
+- [ ] `app/(application)/admin/forum/report-posting.tsx`
+- [ ] `app/(application)/admin/forum/report-comment.tsx`
+- [ ] `app/(application)/admin/forum/[id]/index.tsx` (detail)
+
+## ⏳ Admin Phase 5: Collaboration Admin (Priority: MEDIUM)
+
+- [ ] `app/(application)/admin/collaboration/index.tsx`
+- [ ] `app/(application)/admin/collaboration/group.tsx`
+- [ ] `app/(application)/admin/collaboration/publish.tsx`
+- [ ] `app/(application)/admin/collaboration/reject.tsx`
+- [ ] `app/(application)/admin/collaboration/[id]/index.tsx` (detail)
+
+## ⏳ Admin Phase 6: Job Admin (Priority: MEDIUM)
+
+- [ ] `app/(application)/admin/job/index.tsx`
+- [ ] `app/(application)/admin/job/[id]/index.tsx` (detail)
+- [ ] `app/(application)/admin/job/[status]/index.tsx`
+
+## ⏳ Admin Phase 7: Investment Admin (Priority: LOW)
+
+- [ ] `app/(application)/admin/investment/index.tsx`
+- [ ] `app/(application)/admin/investment/[id]/index.tsx` (detail)
+- [ ] `app/(application)/admin/investment/[status]/index.tsx`
+
+## ⏳ Admin Phase 8: App Information (Priority: LOW)
+
+- [ ] `app/(application)/admin/app-information/index.tsx`
+- [ ] `app/(application)/admin/app-information/business-field/` (TBD files)
+- [ ] `app/(application)/admin/app-information/information-bank/` (TBD files)
+- [ ] `app/(application)/admin/app-information/sticker/` (TBD files)
+
+## ⏳ Admin Phase 9: User Access & Others (Priority: LOW)
+
+- [x] `app/(application)/admin/user-access/index.tsx` - NewWrapper → OS_Wrapper (list with pagination + search)
+- [x] `app/(application)/admin/user-access/[id]/index.tsx` - ViewWrapper → OS_Wrapper (detail with footer button)
+- [ ] `app/(application)/admin/notification/` - Notification admin (TBD)
+- [ ] `app/(application)/admin/super-admin/` - Super admin (TBD)
+- [ ] `app/(application)/admin/dashboard.tsx`
+- [ ] `app/(application)/admin/maps.tsx`
+
+---
+
+# 📌 Notes & Patterns
+
+### Spacing Pattern:
+- **Default**: `contentPaddingBottom=100` (list & static screens)
+- **Forms**: `contentPaddingBottom={250}` (HANYA untuk screens dengan TextInput/TextArea)
+- **contentPadding=0** (default, per-screen control jika perlu)
+
+### User Preference:
+- **NO PADDING_INLINE by default** - Bisa mempersempit box tampilan
+- User akan review dan tambahkan sendiri jika diperlukan per-screen
+
+### Keyboard Handling:
+- `enableKeyboardHandling` → Auto-scroll saat keyboard muncul (Android only)
+- **Bug Fixed (2026-04-08)**: Input di paling atas tidak lagi "terlempar" keluar layar saat keyboard muncul
+- **Solusi**: Menggunakan `UIManager.measure` untuk mendapatkan posisi absolut input (`pageY`), lalu conditional scroll:
+  - Jika input DI ATAS keyboard (terlihat) → **TIDAK SCROLL**
+  - Jika input DI BAWAH keyboard (tertutup) → **Scroll secukupnya**
+- Tap anywhere di luar input → keyboard dismiss (sudah implementasi di kedua mode)
+
+### Migration Pattern:

 #### Untuk List Screen:
 ```tsx
@@ -185,12 +317,7 @@ Setiap screen yang sudah di-migrate, test:
  ListEmptyComponent={ListEmptyComponent}
  ListFooterComponent={ListFooterComponent}
  onEndReached={pagination.loadMore}
-  refreshControl={
-    <RefreshControl
-      refreshing={pagination.refreshing}
-      onRefresh={pagination.onRefresh}
-    />
-  }
+  refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
 />
 ```

@@ -199,6 +326,7 @@ Setiap screen yang sudah di-migrate, test:
 <OS_Wrapper
  headerComponent={<HeaderSection />}
  footerComponent={<FooterSection />}
+  refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
 >
  <YourContent />
 </OS_Wrapper>
@@ -208,59 +336,8 @@ Setiap screen yang sudah di-migrate, test:
 ```tsx
 <OS_Wrapper
  enableKeyboardHandling
-  keyboardScrollOffset={150}
-  contentPaddingBottom={100}
-  footerComponent={
-    <BoxButtonOnFooter>
-      <ButtonCustom onPress={handleSubmit}>Submit</ButtonCustom>
-    </BoxButtonOnFooter>
-  }
->
-  <FormContent />
-</OS_Wrapper>
-```
-
-### Migration Pattern:
-
-```tsx
-// OLD
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
-
-<NewWrapper
-  listData={data}
-  renderItem={renderItem}
-  headerComponent={header}
-  footerComponent={footer}
-/>
-
-// NEW
-import { OS_Wrapper } from "@/components";
-
-<OS_Wrapper
-  listData={data}
-  renderItem={renderItem}
-  headerComponent={header}
-  footerComponent={footer}
-/>
-```
-
-```tsx
-// OLD (Form with keyboard handling)
-import { NewWrapper_V2 } from "@/components/_ShareComponent/NewWrapper_V2";
-
-<NewWrapper_V2
-  enableKeyboardHandling
-  keyboardScrollOffset={150}
->
-  <FormContent />
-</NewWrapper_V2>
-
-// NEW (Unified API)
-import { OS_Wrapper } from "@/components";
-
-<OS_Wrapper
-  enableKeyboardHandling
-  keyboardScrollOffset={150}
+  contentPaddingBottom={250}  // ← HANYA untuk screens dengan TextInput
+  footerComponent={<SubmitButton />}
 >
  <FormContent />
 </OS_Wrapper>
@@ -272,23 +349,55 @@ import { OS_Wrapper } from "@/components";
 **Solution**: Pastikan tidak ada custom padding yang overriding default behavior. Jika masih bermasalah, cek apakah `contentPadding` atau `contentPaddingBottom` terlalu besar.

 ### Issue: Keyboard menutupi input di Android
-**Solution**: Pastikan pakai `OS_Wrapper` dengan `enableKeyboardHandling={true}`. Adjust `keyboardScrollOffset` jika perlu.
+**Solution**: Pastikan pakai `OS_Wrapper` dengan `enableKeyboardHandling={true}` dan `contentPaddingBottom={250}` untuk form screens.
+
+### Issue: Pull-to-refresh tidak berfungsi di static mode
+**Solution**: Sudah diperbaiki! `refreshControl` sekarang di-pass ke ScrollView di AndroidWrapper.

 ### Issue: Footer terlalu jauh dari bottom
-**Solution**: Kurangi `contentPaddingBottom` (default: 80). Untuk list screen tanpa navigation bar overlay, bisa set ke 0.
+**Solution**: Kurangi `contentPaddingBottom` (default: 100 untuk list). Untuk form screens tetap 250.

 ### Issue: White space di bottom saat keyboard close (Android)
 **Solution**: Ini sudah di-fix di AndroidWrapper. Pastikan screen pakai OS_Wrapper, bukan NewWrapper langsung.

 ## 📊 Progress Tracking

+### User Phases:
 | Phase | Total Files | Migrated | Testing | Status |
 |-------|-------------|----------|---------|--------|
-| Phase 1 (Job) | 8 | 8 | ✅ Complete | ✅ Complete |
-| Phase 2 (User) | TBD | 0 | 0 | ⏳ Pending |
-| Phase 3 (Admin) | TBD | 0 | 0 | ⏳ Pending |
-| Phase 4 (Other) | TBD | 0 | 0 | ⏳ Pending |
-| **Total** | **8+** | **8** | **8** | **100% (Phase 1)** |
+| User Phase 1 (Job) | 9 | 9 | ✅ Complete | ✅ Complete |
+| User Phase 2 (Profile + Others) | 10 | 10 | ✅ Complete | ✅ Complete |
+| User Phase 3 (Portfolio) | 6 | 6 | ⏳ Pending | ✅ Complete |
+| User Phase 4 (Maps) | 2 | 2 | ⏳ Pending | ✅ Complete |
+| User Phase 5 (Forum) | 17 | 17 | ⏳ Pending | ✅ Complete |
+| User Phase 6 (Event) | ~4 | 0 | 0 | ⏳ Pending |
+| User Phase 7 (Voting) | ~3 | 0 | 0 | ⏳ Pending |
+| User Phase 8 (Donation) | ~4 | 0 | 0 | ⏳ Pending |
+| User Phase 9 (Investment) | ~3 | 0 | 0 | ⏳ Pending |
+| User Phase 10 (Collaboration) | ~3 | 0 | 0 | ⏳ Pending |
+| User Phase 11 (Others) | ~4 | 0 | 0 | ⏳ Pending |
+| **User Total** | **~69** | **44** | **9** | **~64% Complete** |
+
+### Admin Phases:
+| Phase | Total Files | Migrated | Testing | Status |
+|-------|-------------|----------|---------|--------|
+| Admin Phase 1 (Event) | ~6 | 0 | 0 | ⏳ Pending |
+| Admin Phase 2 (Voting) | ~4 | 0 | 0 | ⏳ Pending |
+| Admin Phase 3 (Donation) | ~6 | 0 | 0 | ⏳ Pending |
+| Admin Phase 4 (Forum) | ~5 | 0 | 0 | ⏳ Pending |
+| Admin Phase 5 (Collaboration) | ~5 | 0 | 0 | ⏳ Pending |
+| Admin Phase 6 (Job) | ~3 | 0 | 0 | ⏳ Pending |
+| Admin Phase 7 (Investment) | ~3 | 0 | 0 | ⏳ Pending |
+| Admin Phase 8 (App Info) | ~4 | 0 | 0 | ⏳ Pending |
+| Admin Phase 9 (User Access) | ~6 | 2 | 0 | 🔄 In Progress |
+| **Admin Total** | **~42** | **2** | **0** | **5% Complete** |
+
+### Grand Total:
+| Category | Total Files | Migrated | Status |
+|----------|-------------|----------|--------|
+| **User Screens** | ~69 | 44 | ~64% Complete |
+| **Admin Screens** | ~42 | 2 | 5% Complete |
+| **GRAND TOTAL** | **~111** | **46** | **~41% Complete** |

 ## 🔄 Rollback Plan

@@ -302,6 +411,6 @@ Jika ada issue yang tidak bisa di-fix dalam 1 jam:

 **Co-authored-by**: Qwen-Coder <qwen-coder@alibabacloud.com>
 **Created**: 2026-04-06
-**Last Updated**: 2026-04-06
-**Status**: Phase 1 (Job Screens) Complete ✅
-**Next**: Phase 2 - Other User Screens
+**Last Updated**: 2026-04-09
+**Status**: User Phase 1-4 Complete ✅ (27 files migrated)
+**Next**: User Phase 5 - Forum Screens