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>

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)/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>
     </>
   );
 }

components/_ShareComponent/AndroidWrapper.tsx

@@ -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,8 +181,7 @@ export function AndroidWrapper(props: AndroidWrapperProps) {
         {floatingButton && (
           <View style={GStyles.floatingContainer}>{floatingButton}</View>
         )}
-      </KeyboardAvoidingView>
-    </TouchableWithoutFeedback>
+      </View>
     );
   }
 
@@ -200,7 +206,7 @@ export function AndroidWrapper(props: AndroidWrapperProps) {
         refreshControl={refreshControl}
         style={{ flex: 1 }}
         contentContainerStyle={{
-          flexGrow: 1,
+          flexGrow: disableFlexGrow ? 0 : 1,
           paddingBottom:
             (footerComponent && !hideFooter ? OS_HEIGHT : 0) +
             finalContentPaddingBottom,

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}
     />
   );
 }

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"

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

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={

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>
     </>
   );
 }

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 }}>

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

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

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

screens/Portofolio/ViewListPortofolio.tsx

@@ -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 (
     <OS_Wrapper
+      contentPadding={PADDING_INLINE}
       listData={pagination.listData}
       renderItem={renderItem}
       refreshControl={

tasks/TASK-005-OS-Wrapper-Implementation.md

@@ -74,19 +74,21 @@ import { OS_Wrapper } from "@/components";
 </OS_Wrapper>
 ```
 
-## 🚀 Implementation Status
+---
 
-### ✅ Phase 1: Job Screens - COMPLETED (2026-04-06 to 2026-04-07)
+# 🔵 USER PHASES (User-Facing Screens)
+
+## ✅ 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 + PADDING_INLINE
-- ✅ `screens/Job/ScreenBeranda2.tsx` - NewWrapper_V2 → OS_Wrapper + PADDING_INLINE
-- ✅ `screens/Job/ScreenArchive.tsx` - ViewWrapper → OS_Wrapper + PADDING_INLINE
-- ✅ `screens/Job/ScreenArchive2.tsx` - NewWrapper_V2 → OS_Wrapper + PADDING_INLINE
-- ✅ `screens/Job/MainViewStatus.tsx` - ViewWrapper → OS_Wrapper + PADDING_INLINE
-- ✅ `screens/Job/MainViewStatus2.tsx` - NewWrapper_V2 → OS_Wrapper + PADDING_INLINE
+- ✅ `screens/Job/ScreenBeranda.tsx` - ViewWrapper → OS_Wrapper
+- ✅ `screens/Job/ScreenBeranda2.tsx` - NewWrapper_V2 → OS_Wrapper
+- ✅ `screens/Job/ScreenArchive.tsx` - ViewWrapper → OS_Wrapper
+- ✅ `screens/Job/ScreenArchive2.tsx` - NewWrapper_V2 → OS_Wrapper
+- ✅ `screens/Job/MainViewStatus.tsx` - ViewWrapper → OS_Wrapper
+- ✅ `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 + contentPaddingBottom={250}
@@ -101,7 +103,7 @@ import { OS_Wrapper } from "@/components";
 - ✅ iOS Testing: Complete ✅
 - ✅ Android Testing: Complete ✅
 
-### ✅ Phase 2: Profile, Waiting Room, Delete Account - COMPLETED (2026-04-08)
+## ✅ User Phase 2: Profile, Waiting Room, Delete Account - COMPLETED (2026-04-08)
 
 **Files migrated: 10**
 
@@ -118,7 +120,7 @@ import { OS_Wrapper } from "@/components";
 - ✅ `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})
 
-### ✅ Phase 3: Portfolio Screens - COMPLETED (2026-04-08)
+## ✅ User Phase 3: Portfolio Screens - COMPLETED (2026-04-08)
 
 **Files migrated: 6**
 
@@ -130,7 +132,7 @@ import { OS_Wrapper } from "@/components";
 - ✅ `screens/Portofolio/ViewListPortofolio.tsx` - NewWrapper → OS_Wrapper (pagination list)
 - ✅ `screens/Portofolio/ScreenPortofolioCreate.tsx` - NewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
 
-### ✅ Phase 4: Maps Screens - COMPLETED (2026-04-08)
+## ✅ User Phase 4: Maps Screens - COMPLETED (2026-04-08)
 
 **Files migrated: 2**
 
@@ -138,36 +140,155 @@ import { OS_Wrapper } from "@/components";
 - ✅ `screens/Maps/ScreenMapsCreate.tsx` - NewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
 - ✅ `screens/Maps/ScreenMapsEdit.tsx` - ViewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
 
-### ⏳ Phase 5: Event Management (Priority: MEDIUM)
+## ✅ User Phase 5: Forum Screens - COMPLETED (2026-04-09)
 
-- [ ] `screens/Admin/Event/ScreenEventList.tsx`
-- [ ] `screens/Admin/Event/ScreenEventCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
-- [ ] `screens/Admin/Event/ScreenEventEdit.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
+**Files migrated: 17**
 
-### ⏳ Phase 6: Voting Management (Priority: MEDIUM)
+#### 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)
 
-- [ ] `screens/Admin/Voting/ScreenVotingList.tsx`
-- [ ] `screens/Admin/Voting/ScreenVotingCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
-- [ ] `screens/Admin/Voting/ScreenVotingEdit.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
+#### Forum Detail & Comments Screens:
+- ✅ `screens/Forum/DetailForum.tsx` - NewWrapper → OS_Wrapper
+- ✅ `screens/Forum/DetailForum2.tsx` - NewWrapper → OS_Wrapper (Active + disableFlexGrow fix)
 
-### ⏳ Phase 7: Forum/Discussion Screens (Priority: LOW)
+#### User's Forum ("Forumku") Screens:
+- ✅ `screens/Forum/ViewForumku.tsx` - ViewWrapper → OS_Wrapper
+- ✅ `screens/Forum/ViewForumku2.tsx` - NewWrapper → OS_Wrapper
 
-- [ ] `screens/Forum/ScreenForum.tsx`
-- [ ] `screens/Forum/ScreenForumDetail.tsx`
-- [ ] `screens/Forum/ScreenForumCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
+#### 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)
 
-### ⏳ Phase 8: Donation Management (Priority: LOW)
+**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.
 
-- [ ] `screens/Admin/Donation/ScreenDonationList.tsx`
-- [ ] `screens/Admin/Donation/ScreenDonationCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
-- [ ] `screens/Admin/Donation/ScreenDonationEdit.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
+## ⏳ User Phase 6: Event Screens (Priority: HIGH)
 
-### ⏳ Phase 9: Other Screens (Priority: LOW)
-- [ ] `screens/Investasi/` - Investment screens
-- [ ] `screens/Kolaborasi/` - Collaboration screens
-- [ ] Other user-facing screens
+- [ ] `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`
 
-## 📌 Notes & Patterns
+## ⏳ 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)
@@ -241,18 +362,42 @@ import { OS_Wrapper } from "@/components";
 
 ## 📊 Progress Tracking
 
+### User Phases:
 | Phase | Total Files | Migrated | Testing | Status |
 |-------|-------------|----------|---------|--------|
-| Phase 1 (Job) | 9 | 9 | ✅ Complete | ✅ Complete |
-| Phase 2 (Profile + Others) | 10 | 10 | ⏳ Pending | ✅ Complete |
-| Phase 3 (Portfolio) | 6 | 6 | ⏳ Pending | ✅ Complete |
-| Phase 4 (Maps) | 2 | 2 | ⏳ Pending | ✅ Complete |
-| Phase 5 (Event) | TBD | 0 | 0 | ⏳ Pending |
-| Phase 6 (Voting) | TBD | 0 | 0 | ⏳ Pending |
-| Phase 7 (Forum) | TBD | 0 | 0 | ⏳ Pending |
-| Phase 8 (Donation) | TBD | 0 | 0 | ⏳ Pending |
-| Phase 9 (Other) | TBD | 0 | 0 | ⏳ Pending |
-| **Total** | **27+** | **27** | **9** | **Phase 1-4 Complete** |
+| 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
 
@@ -266,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-08
-**Status**: Phase 1-4 Complete ✅ (27 files migrated)
-**Next**: Phase 5 - Event Management Screens
+**Last Updated**: 2026-04-09
+**Status**: User Phase 1-4 Complete ✅ (27 files migrated)
+**Next**: User Phase 5 - Forum Screens