feat: Complete Phase 6 Event screens migration + add PADDING_INLINE to tabs

User Phase 6 - Event Screens (16 files): - Beranda, Status, History, Contribution (tabs screens) → NewWrapper → OS_Wrapper + contentPadding={PADDING_INLINE} - create.tsx & edit.tsx → Forms with enableKeyboardHandling + contentPaddingBottom={250} - [id]/publish.tsx, history.tsx, contribution.tsx, confirmation.tsx → Static detail screens - [id]/[status]/detail-event.tsx → Status detail screen - detail/[id].tsx → Detail route screen - ScreenListOfParticipants.tsx → Participants list screen Key Improvements: - Added contentPadding={PADDING_INLINE} to all Event (tabs) screens to prevent tight edge margins. - Form screens (create, edit) use enableKeyboardHandling + contentPaddingBottom={250}. - Removed all ViewWrapper and NewWrapper instances from Event feature. Documentation: - Update TASK-005 with Phase 6 completion details and new progress totals. - Added note about PADDING_INLINE usage for tab screens. Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com> Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
feat: Complete Forum & Admin User Access migration + fix scroll issues
2026-04-10 13:50:59 +08:00 · 2026-04-09 17:48:51 +08:00
37 changed files with 391 additions and 238 deletions
--- a/app/(application)/(user)/event/[id]/[status]/detail-event.tsx
+++ b/app/(application)/(user)/event/[id]/[status]/detail-event.tsx
@@ -5,10 +5,10 @@ import {
  DrawerCustom,
  Grid,
  MenuDrawerDynamicGrid,
+  OS_Wrapper,
  Spacing,
  StackCustom,
  TextCustom,
-  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
@@ -95,7 +95,7 @@ export default function EventDetailStatus() {
          ),
        }}
      />
-      <ViewWrapper>
+      <OS_Wrapper>
        <BaseBox>
          <StackCustom>
            <TextCustom bold align="center" size="xlarge">
@@ -118,7 +118,7 @@ export default function EventDetailStatus() {
          status={status as string}
        />
        <Spacing />
-      </ViewWrapper>
+      </OS_Wrapper>

      <DrawerCustom
        isVisible={openDrawer}
--- a/app/(application)/(user)/event/[id]/confirmation.tsx
+++ b/app/(application)/(user)/event/[id]/confirmation.tsx
@@ -5,9 +5,9 @@ import {
  ButtonCustom,
  CenterCustom,
  LoaderCustom,
+  OS_Wrapper,
  StackCustom,
  TextCustom,
-  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { MainColor } from "@/constants/color-palet";
@@ -281,7 +281,7 @@ export default function UserEventConfirmation() {
          ),
        }}
      />
-      <ViewWrapper>{handlerReturn()}</ViewWrapper>
+      <OS_Wrapper>{handlerReturn()}</OS_Wrapper>
    </>
  );
 }
--- a/app/(application)/(user)/event/[id]/contribution.tsx
+++ b/app/(application)/(user)/event/[id]/contribution.tsx
@@ -4,8 +4,8 @@ import {
  DrawerCustom,
  LoaderCustom,
  MenuDrawerDynamicGrid,
+  OS_Wrapper,
  Spacing,
-  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
@@ -59,14 +59,14 @@ export default function EventDetailContribution() {
          ),
        }}
      />
-      <ViewWrapper>
+      <OS_Wrapper>
        {isLoadData ? (
          <LoaderCustom />
        ) : (
          <Event_BoxDetailPublishSection data={data} />
        )}
        <Spacing />
-      </ViewWrapper>
+      </OS_Wrapper>
      <DrawerCustom
        isVisible={openDrawer}
        closeDrawer={() => setOpenDrawer(false)}
--- a/app/(application)/(user)/event/[id]/edit.tsx
+++ b/app/(application)/(user)/event/[id]/edit.tsx
@@ -3,14 +3,13 @@ import {
  BoxButtonOnFooter,
  ButtonCustom,
  LoaderCustom,
-  NewWrapper,
+  OS_Wrapper,
  SelectCustom,
  Spacing,
  StackCustom,
  TextAreaCustom,
  TextCustom,
  TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
 import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
@@ -186,7 +185,9 @@ export default function EventEdit() {

  return (
    <>
-      <NewWrapper
+      <OS_Wrapper
+        enableKeyboardHandling
+        contentPaddingBottom={250}
        footerComponent={
          <BoxButtonOnFooter>
            <ButtonCustom
@@ -283,7 +284,7 @@ export default function EventEdit() {
            />
          </StackCustom>
        )}
-      </NewWrapper>
+      </OS_Wrapper>
    </>
  );
 }
--- a/app/(application)/(user)/event/[id]/history.tsx
+++ b/app/(application)/(user)/event/[id]/history.tsx
@@ -3,7 +3,7 @@ import {
  DotButton,
  DrawerCustom,
  MenuDrawerDynamicGrid,
-  ViewWrapper,
+  OS_Wrapper,
  Spacing,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
@@ -54,10 +54,10 @@ export default function EventDetailHistory() {
          ),
        }}
      />
-      <ViewWrapper>
+      <OS_Wrapper>
        <Event_BoxDetailPublishSection data={data} />
        <Spacing />
-      </ViewWrapper>
+      </OS_Wrapper>
      <DrawerCustom
        isVisible={openDrawer}
        closeDrawer={() => setOpenDrawer(false)}
--- a/app/(application)/(user)/event/[id]/publish.tsx
+++ b/app/(application)/(user)/event/[id]/publish.tsx
@@ -6,7 +6,7 @@ import {
  DotButton,
  DrawerCustom,
  MenuDrawerDynamicGrid,
-  ViewWrapper,
+  OS_Wrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
@@ -122,9 +122,9 @@ export default function EventDetailPublish() {

  if (isEventFinished) {
    return (
-      <ViewWrapper>
+      <OS_Wrapper>
        <CustomSkeleton />
-      </ViewWrapper>
+      </OS_Wrapper>
    );
  }

@@ -166,7 +166,7 @@ export default function EventDetailPublish() {
          ),
        }}
      />
-      <ViewWrapper>
+      <OS_Wrapper>
        {isLoadingData ? (
          <CustomSkeleton height={400} />
        ) : (
@@ -175,7 +175,7 @@ export default function EventDetailPublish() {
            footerButton={FooterButton()}
          />
        )}
-      </ViewWrapper>
+      </OS_Wrapper>

      <DrawerCustom
        isVisible={openDrawer}
--- a/app/(application)/(user)/event/create.tsx
+++ b/app/(application)/(user)/event/create.tsx
@@ -1,7 +1,7 @@
 import {
  BoxButtonOnFooter,
  ButtonCustom,
-  NewWrapper,
+  OS_Wrapper,
  SelectCustom,
  Spacing,
  StackCustom,
@@ -112,7 +112,9 @@ export default function EventCreate() {

  return (
    <>
-      <NewWrapper
+      <OS_Wrapper
+        enableKeyboardHandling
+        contentPaddingBottom={250}
        footerComponent={<BoxButtonOnFooter>{buttonSubmit}</BoxButtonOnFooter>}
      >
        <StackCustom gap={"xs"}>
@@ -182,7 +184,7 @@ export default function EventCreate() {
            />
          </StackCustom>
        </StackCustom>
-      </NewWrapper>
+      </OS_Wrapper>
    </>
  );
 }
--- a/app/(application)/(user)/event/detail/[id].tsx
+++ b/app/(application)/(user)/event/detail/[id].tsx
@@ -1,4 +1,4 @@
-import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { OS_Wrapper } from "@/components";
 import { GStyles } from "@/styles/global-styles";
 import { useLocalSearchParams } from "expo-router";
 import { Text } from "react-native";
@@ -7,8 +7,8 @@ export default function DetailEvent() {
  const { id } = useLocalSearchParams();
  console.log("id event >", id);
  return (
-    <ViewWrapper>
+    <OS_Wrapper>
      <Text style={GStyles.textLabel}>Detail Event {id}</Text>
-    </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)/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
@@ -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,
--- 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/ios/HIPMIBadungConnect.xcodeproj/project.pbxproj
+++ b/ios/HIPMIBadungConnect.xcodeproj/project.pbxproj
--- a/ios/HIPMIBadungConnect.xcworkspace/xcshareddata/swiftpm/Package.resolved
+++ b/ios/HIPMIBadungConnect.xcworkspace/xcshareddata/swiftpm/Package.resolved
@@ -0,0 +1,15 @@
+{
+  "originHash" : "e70d3525c8e2819a8b34f22909815dab5c700c25a06c32388f3930f7b3627768",
+  "pins" : [
+    {
+      "identity" : "maplibre-gl-native-distribution",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/maplibre/maplibre-gl-native-distribution",
+      "state" : {
+        "revision" : "c68c970ff3ece56cfc3b36849db70167fa208beb",
+        "version" : "6.17.1"
+      }
+    }
+  ],
+  "version" : 3
+}
--- 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/Event/ScreenBeranda.tsx
+++ b/screens/Event/ScreenBeranda.tsx
@@ -1,8 +1,7 @@
-import { TextCustom } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { TextCustom, OS_Wrapper } from "@/components";
 import FloatingButton from "@/components/Button/FloatingButton";
 import { MainColor } from "@/constants/color-palet";
-import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+import { PAGINATION_DEFAULT_TAKE, PADDING_INLINE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { usePagination } from "@/hooks/use-pagination";
 import Event_BoxPublishSection from "@/screens/Event/BoxPublishSection";
@@ -52,7 +51,8 @@ export default function Event_ScreenBeranda() {


  return (
-    <NewWrapper
+    <OS_Wrapper
+      contentPadding={PADDING_INLINE}
      listData={pagination.listData}
      renderItem={renderEventItem}
      refreshControl={
--- a/screens/Event/ScreenContribution.tsx
+++ b/screens/Event/ScreenContribution.tsx
@@ -4,11 +4,11 @@ import {
    BoxWithHeaderSection,
    Spacing,
    StackCustom,
-    TextCustom
+    TextCustom,
+    OS_Wrapper,
 } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { MainColor } from "@/constants/color-palet";
-import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+import { PAGINATION_DEFAULT_TAKE, PADDING_INLINE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { useAuth } from "@/hooks/use-auth";
 import { usePagination } from "@/hooks/use-pagination";
@@ -82,7 +82,8 @@ export default function Event_ScreenContribution() {
  //   }, []);

  return (
-    <NewWrapper
+    <OS_Wrapper
+      contentPadding={PADDING_INLINE}
      listData={pagination.listData}
      renderItem={renderEventItem}
      refreshControl={
--- a/screens/Event/ScreenHistory.tsx
+++ b/screens/Event/ScreenHistory.tsx
@@ -1,8 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { ButtonCustom, Spacing, TextCustom } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { ButtonCustom, Spacing, TextCustom, OS_Wrapper } from "@/components";
 import { AccentColor, MainColor } from "@/constants/color-palet";
-import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+import { PAGINATION_DEFAULT_TAKE, PADDING_INLINE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { useAuth } from "@/hooks/use-auth";
 import { usePagination } from "@/hooks/use-pagination";
@@ -100,8 +99,9 @@ export default function Event_ScreenHistory() {
  );

  return (
-    <NewWrapper
+    <OS_Wrapper
      headerComponent={headerComponent}
+      contentPadding={PADDING_INLINE}
      listData={pagination.listData}
      renderItem={renderEventItem}
      refreshControl={
--- a/screens/Event/ScreenListOfParticipants.tsx
+++ b/screens/Event/ScreenListOfParticipants.tsx
@@ -2,11 +2,11 @@
 import {
    AvatarUsernameAndOtherComponent,
    BadgeCustom,
-    BaseBox
+    BaseBox,
+    OS_Wrapper,
 } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { MainColor } from "@/constants/color-palet";
-import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+import { PADDING_INLINE, PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { usePagination } from "@/hooks/use-pagination";
 import {
@@ -102,7 +102,8 @@ export default function Event_ScreenListOfParticipants() {
  );

  return (
-    <NewWrapper
+    <OS_Wrapper
+      contentPadding={PADDING_INLINE}
      listData={pagination.listData}
      renderItem={renderParticipantItem}
      refreshControl={
--- a/screens/Event/ScreenStatus.tsx
+++ b/screens/Event/ScreenStatus.tsx
@@ -5,9 +5,9 @@ import {
  ScrollableCustom,
  StackCustom,
  TextCustom,
+  OS_Wrapper,
 } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
-import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+import { PAGINATION_DEFAULT_TAKE, PADDING_INLINE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { useAuth } from "@/hooks/use-auth";
 import { usePagination } from "@/hooks/use-pagination";
@@ -103,8 +103,9 @@ export default function Event_ScreenStatus() {
  );

  return (
-    <NewWrapper
+    <OS_Wrapper
      hideFooter
+      contentPadding={PADDING_INLINE}
      headerComponent={<View style={{ paddingTop: 8 }}>{tabsComponent}</View>}
      listData={pagination.listData}
      renderItem={renderEventItem}
--- 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/Portofolio/ViewListPortofolio.tsx
+++ b/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={
--- a/tasks/TASK-005-OS-Wrapper-Implementation.md
+++ b/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,45 +140,133 @@ 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)

+**Files migrated: 17**
+
+#### 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)
+
+#### Forum Detail & Comments Screens:
+- ✅ `screens/Forum/DetailForum.tsx` - NewWrapper → OS_Wrapper
+- ✅ `screens/Forum/DetailForum2.tsx` - NewWrapper → OS_Wrapper (Active + disableFlexGrow fix)
+
+#### User's Forum ("Forumku") Screens:
+- ✅ `screens/Forum/ViewForumku.tsx` - ViewWrapper → OS_Wrapper
+- ✅ `screens/Forum/ViewForumku2.tsx` - NewWrapper → OS_Wrapper
+
+#### 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)
+
+**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 - COMPLETED (2026-04-10)
+
+**Files migrated: 16**
+
+#### Event List & Create Screens:
+- ✅ `screens/Event/ScreenBeranda.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (tabs list)
+- ✅ `screens/Event/ScreenStatus.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (tabs list)
+- ✅ `screens/Event/ScreenHistory.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (tabs list)
+- ✅ `screens/Event/ScreenContribution.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (tabs list)
+- ✅ `app/(application)/(user)/event/create.tsx` - NewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
+
+#### Event Detail & Sub-Screens (`[id]/`):
+- ✅ `app/(application)/(user)/event/[id]/edit.tsx` - NewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
+- ✅ `app/(application)/(user)/event/[id]/publish.tsx` - ViewWrapper → OS_Wrapper (detail with join button)
+- ✅ `app/(application)/(user)/event/[id]/history.tsx` - ViewWrapper → OS_Wrapper (history detail)
+- ✅ `app/(application)/(user)/event/[id]/contribution.tsx` - ViewWrapper → OS_Wrapper (contribution detail)
+- ✅ `app/(application)/(user)/event/[id]/confirmation.tsx` - ViewWrapper → OS_Wrapper (confirmation flow)
+- ✅ `app/(application)/(user)/event/[id]/[status]/detail-event.tsx` - ViewWrapper → OS_Wrapper (status detail)
+
+#### Event `detail/` Sub-Routes:
+- ✅ `app/(application)/(user)/event/detail/[id].tsx` - ViewWrapper → OS_Wrapper
+
+---
+
+# 🔴 ADMIN PHASES (Admin-Facing Screens)
+
+## ✅ Admin Phase 9: User Access - COMPLETED (2026-04-09)
+
+**Files migrated: 2**
+
+#### User Access:
+- ✅ `screens/Admin/User-Access/ScreenUserAccess.tsx` - NewWrapper → OS_Wrapper (list with pagination + search)
+- ✅ `app/(application)/admin/user-access/[id]/index.tsx` - ViewWrapper → OS_Wrapper (detail with footer button)
+
+## ⏳ Admin Phase 1: Event Management (Priority: HIGH)
 - [ ] `screens/Admin/Event/ScreenEventList.tsx`
 - [ ] `screens/Admin/Event/ScreenEventCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
 - [ ] `screens/Admin/Event/ScreenEventEdit.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`

-### ⏳ Phase 6: Voting Management (Priority: MEDIUM)
-
+## ⏳ Admin Phase 2: Voting Management (Priority: HIGH)
 - [ ] `screens/Admin/Voting/ScreenVotingList.tsx`
 - [ ] `screens/Admin/Voting/ScreenVotingCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
 - [ ] `screens/Admin/Voting/ScreenVotingEdit.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`

-### ⏳ Phase 7: Forum/Discussion Screens (Priority: LOW)
-
- [ ] `screens/Forum/ScreenForum.tsx`
- [ ] `screens/Forum/ScreenForumDetail.tsx`
- [ ] `screens/Forum/ScreenForumCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
-
-### ⏳ Phase 8: Donation Management (Priority: LOW)
-
+## ⏳ Admin Phase 3: Donation Management (Priority: HIGH)
 - [ ] `screens/Admin/Donation/ScreenDonationList.tsx`
 - [ ] `screens/Admin/Donation/ScreenDonationCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
 - [ ] `screens/Admin/Donation/ScreenDonationEdit.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`

-### ⏳ Phase 9: Other Screens (Priority: LOW)
- [ ] `screens/Investasi/` - Investment screens
- [ ] `screens/Kolaborasi/` - Collaboration screens
- [ ] Other user-facing screens
+## ⏳ Admin Phase 4: Forum Admin (Priority: MEDIUM)
+- [ ] `screens/Admin/Forum/ScreenForumList.tsx`
+- [ ] `screens/Admin/Forum/ScreenForumPosting.tsx`
+- [ ] `screens/Admin/Forum/ScreenForumReportPosting.tsx`
+- [ ] `screens/Admin/Forum/ScreenForumReportComment.tsx`
+- [ ] `screens/Admin/Forum/ScreenForumDetail.tsx`

-## 📌 Notes & Patterns
+## ⏳ Admin Phase 5: Collaboration Admin (Priority: MEDIUM)
+- [ ] `screens/Admin/Collaboration/ScreenCollaborationList.tsx`
+- [ ] `screens/Admin/Collaboration/ScreenCollaborationGroup.tsx`
+- [ ] `screens/Admin/Collaboration/ScreenCollaborationPublish.tsx`
+- [ ] `screens/Admin/Collaboration/ScreenCollaborationReject.tsx`
+- [ ] `screens/Admin/Collaboration/ScreenCollaborationDetail.tsx`
+
+## ⏳ Admin Phase 6: Job Admin (Priority: MEDIUM)
+- [ ] `screens/Admin/Job/ScreenJobAdminList.tsx`
+- [ ] `screens/Admin/Job/ScreenJobAdminDetail.tsx`
+- [ ] `screens/Admin/Job/ScreenJobAdminStatus.tsx`
+
+## ⏳ Admin Phase 7: Investment Admin (Priority: LOW)
+- [ ] `screens/Admin/Investment/ScreenInvestmentList.tsx`
+- [ ] `screens/Admin/Investment/ScreenInvestmentDetail.tsx`
+- [ ] `screens/Admin/Investment/ScreenInvestmentStatus.tsx`
+
+## ⏳ Admin Phase 8: App Information (Priority: LOW)
+- [ ] `screens/Admin/App-Information/ScreenAppInfoList.tsx`
+- [ ] `screens/Admin/App-Information/ScreenBusinessField.tsx`
+- [ ] `screens/Admin/App-Information/ScreenInformationBank.tsx`
+- [ ] `screens/Admin/App-Information/ScreenSticker.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)
+- **contentPadding={PADDING_INLINE}** (16px, ditambahkan khusus ke screen dalam `(tabs)` agar tidak terlalu mepet ke pinggir).

 ### User Preference:
 - **NO PADDING_INLINE by default** - Bisa mempersempit box tampilan
 - User akan review dan tambahkan sendiri jika diperlukan per-screen
+- Khusus untuk tab screen (`(tabs)/`), ditambahkan `contentPadding={PADDING_INLINE}` agar tampilan lebih rapi.

 ### Keyboard Handling:
 - `enableKeyboardHandling` → Auto-scroll saat keyboard muncul (Android only)
@@ -197,6 +287,7 @@ import { OS_Wrapper } from "@/components";
  ListFooterComponent={ListFooterComponent}
  onEndReached={pagination.loadMore}
  refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
+  contentPadding={PADDING_INLINE} // Jika screen berada di dalam (tabs)
 />
 ```

@@ -241,18 +332,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 | ⏳ Pending | ✅ 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) | 16 | 16 | ⏳ Pending | ✅ Complete |
+| User Phase 7 (Voting) | ~10 | 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** | **~84** | **60** | **9** | **~71% Complete** |
+
+### Admin Phases:
+| Phase | Total Files | Migrated | Testing | Status |
+|-------|-------------|----------|---------|--------|
+| Admin Phase 1 (Event) | ~3 | 0 | 0 | ⏳ Pending |
+| Admin Phase 2 (Voting) | ~3 | 0 | 0 | ⏳ Pending |
+| Admin Phase 3 (Donation) | ~3 | 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) | 2 | 2 | 0 | ✅ Complete |
+| **Admin Total** | **~31** | **2** | **0** | **~6% Complete** |
+
+### Grand Total:
+| Category | Total Files | Migrated | Status |
+|----------|-------------|----------|--------|
+| **User Screens** | ~84 | 60 | ~71% Complete |
+| **Admin Screens** | ~31 | 2 | ~6% Complete |
+| **GRAND TOTAL** | **~115** | **62** | **~54% Complete** |

 ## 🔄 Rollback Plan

@@ -266,6 +381,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-10
+**Status**: User Phase 1-6 Complete ✅ (60 files migrated)
+**Next**: User Phase 7 - Voting Screens