feat: Complete User Phase 9 Investment screens migration + note known upload issue

- Migrate 24 investment screens to OS_Wrapper (tabs, list, detail, forms, transaction flow)
- Add contentPadding={PADDING_INLINE} to 9 list/tabs screens for consistent spacing
- Add enableKeyboardHandling to 6 form screens
- Fix investment tabs layout height to use OS_IOS_HEIGHT/OS_ANDROID_HEIGHT constants
- Update TASK-005 with known issue: upload image returns 500 error in dev env
- Note: Investment feature not fully complete - upload issue needs investigation tomorrow

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

QWEN.md

@@ -540,3 +540,4 @@ Contoh:
 - User akan review dan tambahkan sendiri jika perlu
 
 Profile screens: PADDING_INLINE dihapus dari edit.tsx dan create.tsx
+- User ingin mengecek semua user layout tabs setelah perubahan height layout tabs donation di constants. Pattern yang perlu dicek: semua tabs screens harus pakai contentPadding={PADDING_INLINE} untuk konsistensi layout.

app/(application)/(user)/crowdfunding/index.tsx

@@ -1,9 +1,9 @@
 import {
   BaseBox,
   Grid,
+  OS_Wrapper,
   StackCustom,
   TextCustom,
-  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
@@ -25,7 +25,7 @@ export default function Crowdfunding() {
   ];
 
   return (
-    <ViewWrapper>
+    <OS_Wrapper>
       <StackCustom>
         <Image
           source={require("@/assets/images/constants/crowd-hipmi.png")}
@@ -63,6 +63,6 @@ export default function Crowdfunding() {
           </BaseBox>
         ))}
       </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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

@@ -1,5 +1,5 @@
 import { IconHome, IconStatus } from "@/components/_Icon";
-import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { ICON_SIZE_SMALL, OS_ANDROID_HEIGHT, OS_IOS_HEIGHT } from "@/constants/constans-value";
 import { TabsStyles } from "@/styles/tabs-styles";
 import {
     FontAwesome5
@@ -23,12 +23,12 @@ function DonationTabsWrapper() {
             ios: {
               borderTopWidth: 0,
               paddingTop: 12,
-              height: 80,
+              height: OS_IOS_HEIGHT,
             },
             android: {
               borderTopWidth: 0,
               paddingTop: 5,
-              height: 70 + paddingBottom,
+              height: OS_ANDROID_HEIGHT + paddingBottom,
             },
           }),
         }}

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

@@ -5,11 +5,11 @@ import {
   ButtonCustom,
   InformationBox,
   LandscapeFrameUploaded,
+  OS_Wrapper,
   Spacing,
   StackCustom,
   TextAreaCustom,
   TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -105,7 +105,9 @@ export default function DonationEditNews() {
   };
 
   return (
-    <ViewWrapper
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
       footerComponent={
         <BoxButtonOnFooter>
           <ButtonCustom
@@ -165,6 +167,6 @@ export default function DonationEditNews() {
         <Spacing />
       </StackCustom>
       <Spacing />
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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

@@ -7,9 +7,9 @@ import {
   DrawerCustom,
   DummyLandscapeImage,
   MenuDrawerDynamicGrid,
+  OS_Wrapper,
   StackCustom,
   TextCustom,
-  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconEdit } from "@/components/_Icon";
@@ -28,6 +28,7 @@ import {
 } from "expo-router";
 import { useCallback, useState } from "react";
 import Toast from "react-native-toast-message";
+import { dateTimeView } from "@/utils/dateTimeView";
 
 export default function DonationNews() {
   const { user } = useAuth();
@@ -71,11 +72,11 @@ export default function DonationNews() {
           ),
         }}
       />
-      <ViewWrapper>
+      <OS_Wrapper>
         <BaseBox>
           <StackCustom>
-            <TextCustom style={{ alignSelf: "flex-end" }}>
-              {formatChatTime(data?.createdAt)}
+            <TextCustom color="gray" size={"small"} style={{ alignSelf: "flex-end" }}>
+              {dateTimeView({date: data?.createdAt})}
             </TextCustom>
 
             {data && data.imageId && (
@@ -89,7 +90,7 @@ export default function DonationNews() {
             <TextCustom>{data?.deskripsi || "-"}</TextCustom>
           </StackCustom>
         </BaseBox>
-      </ViewWrapper>
+      </OS_Wrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

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

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

app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/failed.tsx

@@ -2,10 +2,10 @@
 import {
   BaseBox,
   Grid,
+  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
-  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { apiDonationGetInvoiceById } from "@/service/api-client/api-donation";
@@ -63,7 +63,7 @@ export default function DonasiFailed() {
   ];
 
   return (
-    <ViewWrapper>
+    <OS_Wrapper>
       <StackCustom>
         <BaseBox>
           <StackCustom>
@@ -105,6 +105,6 @@ export default function DonasiFailed() {
           </StackCustom>
         </BaseBox>
       </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/invoice.tsx

@@ -6,10 +6,10 @@ import {
   ButtonCustom,
   Grid,
   InformationBox,
+  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
-  ViewWrapper,
 } from "@/components";
 import CopyButton from "@/components/Button/CoyButton";
 import { MainColor } from "@/constants/color-palet";
@@ -101,8 +101,7 @@ export default function DonationInvoice() {
 
   return (
     <>
-      <ViewWrapper
-        hideFooter
+      <OS_Wrapper
         footerComponent={
           <BoxButtonOnFooter>
             <ButtonCustom
@@ -222,7 +221,7 @@ export default function DonationInvoice() {
           </BaseBox>
         </StackCustom>
         <Spacing />
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/process.tsx

@@ -1,11 +1,11 @@
-import { BaseBox, StackCustom, TextCustom, ViewWrapper } from "@/components";
+import { BaseBox, OS_Wrapper, StackCustom, TextCustom } from "@/components";
 import MoneyTransferAnimation from "@/components/_ShareComponent/MoneyTransferAnimation";
 import { View } from "react-native";
 
 export default function DonationProcess() {
   return (
     <>
-      <ViewWrapper>
+      <OS_Wrapper>
         <BaseBox>
           <StackCustom>
             <TextCustom align="center" bold>
@@ -35,7 +35,7 @@ export default function DonationProcess() {
             </Grid.Col>
           </Grid>
         </BaseBox> */}
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/success.tsx

@@ -2,10 +2,10 @@
 import {
   BaseBox,
   Grid,
+  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
-  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { apiDonationGetInvoiceById } from "@/service/api-client/api-donation";
@@ -63,7 +63,7 @@ export default function DonationSuccess() {
   ];
 
   return (
-    <ViewWrapper>
+    <OS_Wrapper>
       <StackCustom>
         <BaseBox>
           <StackCustom>
@@ -105,7 +105,7 @@ export default function DonationSuccess() {
           </StackCustom>
         </BaseBox>
       </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }
 

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

@@ -3,9 +3,9 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   Grid,
+  OS_Wrapper,
   TextCustom,
   TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
@@ -64,7 +64,7 @@ export default function InvestmentInputDonation() {
   );
   return (
     <>
-      <ViewWrapper footerComponent={bottomComponent}>
+      <OS_Wrapper enableKeyboardHandling contentPaddingBottom={250} footerComponent={bottomComponent}>
         {listData.map((item, i) => (
           <BaseBox key={i} onPress={() => setNominal(item.value)}>
             <Grid>
@@ -98,7 +98,7 @@ export default function InvestmentInputDonation() {
             Minimal donasi Rp. 10.000
           </TextCustom>
         </BaseBox>
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

app/(application)/(user)/donation/[id]/(transaction-flow)/select-bank.tsx

@@ -2,7 +2,7 @@ import {
   BaseBox,
   BoxButtonOnFooter,
   ButtonCustom,
-  ViewWrapper,
+  OS_Wrapper,
 } from "@/components";
 import { RadioCustom, RadioGroup } from "@/components/Radio/RadioCustom";
 import { LOCAL_STORAGE_KEY } from "@/constants/local-storage-key";
@@ -91,7 +91,7 @@ export default function DonationSelectBank() {
     );
   };
   return (
-    <ViewWrapper footerComponent={buttonSubmit()}>
+    <OS_Wrapper footerComponent={buttonSubmit()}>
       <RadioGroup value={select} onChange={setSelect}>
         {_.isEmpty(listBank)
           ? []
@@ -101,6 +101,6 @@ export default function DonationSelectBank() {
               </BaseBox>
             ))}
       </RadioGroup>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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

@@ -4,7 +4,7 @@ import {
   DotButton,
   DrawerCustom,
   MenuDrawerDynamicGrid,
-  NewWrapper,
+  OS_Wrapper,
   Spacing,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
@@ -113,7 +113,7 @@ export default function DonasiDetailStatus() {
           ),
         }}
       />
-      <NewWrapper
+      <OS_Wrapper
         refreshControl={
           <RefreshControl
             refreshing={refreshing}
@@ -156,7 +156,7 @@ export default function DonasiDetailStatus() {
             <Spacing />
           </>
         )}
-      </NewWrapper>
+      </OS_Wrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

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

@@ -1,9 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
   DummyLandscapeImage,
+  OS_Wrapper,
   StackCustom,
   TextCustom,
-  ViewWrapper,
 } from "@/components";
 import { apiDonationGetOne } from "@/service/api-client/api-donation";
 import { useFocusEffect, useLocalSearchParams } from "expo-router";
@@ -32,12 +32,12 @@ export default function DonationDetailStory() {
     }
   };
   return (
-    <ViewWrapper>
+    <OS_Wrapper>
       <StackCustom>
         <TextCustom>{data?.pembukaan || "-"}</TextCustom>
         <DummyLandscapeImage imageId={data?.imageId} />
         <TextCustom>{data?.cerita || "-"}</TextCustom>
       </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-  ViewWrapper,
+  OS_Wrapper,
   StackCustom,
   InformationBox,
   TextInputCustom,
@@ -76,7 +76,7 @@ export default function DonationEditRekening() {
   };
 
   return (
-    <ViewWrapper>
+    <OS_Wrapper enableKeyboardHandling contentPaddingBottom={250}>
       <StackCustom gap={"xs"}>
         <InformationBox text="Pastikan Anda mengisi nama bank dan nomor rekening dengan benar. Informasi ini akan membantu admin memverifikasi dan memproses penggalangan dana Anda dengan cepat dan tepat setelah penggalangan dana dipublikasikan." />
         <TextInputCustom
@@ -105,6 +105,6 @@ export default function DonationEditRekening() {
         </ButtonCustom>
       </StackCustom>
       <Spacing />
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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

@@ -4,10 +4,10 @@ import {
   ButtonCustom,
   InformationBox,
   LandscapeFrameUploaded,
+  OS_Wrapper,
   Spacing,
   StackCustom,
   TextAreaCustom,
-  ViewWrapper,
 } from "@/components";
 import API_IMAGE from "@/constants/api-storage";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -93,7 +93,7 @@ export default function DonationEditStory() {
   };
 
   return (
-    <ViewWrapper>
+    <OS_Wrapper enableKeyboardHandling contentPaddingBottom={250}>
       <StackCustom gap={"xs"}>
         <InformationBox text="Cerita Anda adalah kunci untuk menginspirasi kebaikan. Jelaskan dengan jujur dan jelas tujuan penggalangan dana ini agar calon donatur memahami dampak positif yang dapat mereka wujudkan melalui kontribusi mereka." />
         <TextAreaCustom
@@ -146,6 +146,6 @@ export default function DonationEditStory() {
         </ButtonCustom>
       </StackCustom>
       <Spacing />
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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

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

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

@@ -6,9 +6,8 @@ import {
   DotButton,
   DrawerCustom,
   MenuDrawerDynamicGrid,
-  NewWrapper,
+  OS_Wrapper,
   StackCustom,
-  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconNews } from "@/components/_Icon";
@@ -104,7 +103,7 @@ export default function DonasiDetailBeranda() {
           ),
         }}
       />
-      <NewWrapper footerComponent={buttonSection}>
+      <OS_Wrapper footerComponent={buttonSection}>
         {!data ? (
           <CustomSkeleton height={400} />
         ) : (
@@ -127,7 +126,7 @@ export default function DonasiDetailBeranda() {
             />
           </StackCustom>
         )}
-      </NewWrapper>
+      </OS_Wrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

app/(application)/(user)/donation/[id]/infromation-fundrising.tsx

@@ -5,9 +5,9 @@ import {
   ButtonCustom,
   Grid,
   LoaderCustom,
+  OS_Wrapper,
   Spacing,
   TextCustom,
-  ViewWrapper
 } from "@/components";
 import Donation_BoxPublish from "@/screens/Donation/BoxPublish";
 import { apiDonationFundrising } from "@/service/api-client/api-donation";
@@ -44,7 +44,7 @@ export default function DonationInformationFunrising() {
 
   return (
     <>
-      <ViewWrapper>
+      <OS_Wrapper>
         <BaseBox>
           <Grid>
             <Grid.Col span={6} style={{ justifyContent: "center" }}>
@@ -80,7 +80,7 @@ export default function DonationInformationFunrising() {
             <Donation_BoxPublish key={index} id={item?.id} data={item} />
           ))
         )}
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

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

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

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

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

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}

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

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

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

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

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}

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

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

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

@@ -1,5 +1,5 @@
 import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
-import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { ICON_SIZE_SMALL, OS_ANDROID_HEIGHT, OS_IOS_HEIGHT } from "@/constants/constans-value";
 import { TabsStyles } from "@/styles/tabs-styles";
 import { Feather, FontAwesome6, Ionicons } from "@expo/vector-icons";
 import { router, Tabs, useLocalSearchParams, useNavigation } from "expo-router";
@@ -40,12 +40,12 @@ function InvestmentTabsWrapper() {
             ios: {
               borderTopWidth: 0,
               paddingTop: 12,
-              height: 80,
+              height: OS_IOS_HEIGHT,
             },
             android: {
               borderTopWidth: 0,
               paddingTop: 5,
-              height: 70 + paddingBottom,
+              height: OS_ANDROID_HEIGHT + paddingBottom,
             },
           }),
         }}

app/(application)/(user)/investment/[id]/(document)/add-document.tsx

@@ -5,11 +5,11 @@ import {
   ButtonCustom,
   CenterCustom,
   InformationBox,
+  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
   TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -83,9 +83,12 @@ export default function InvestmentAddDocument() {
   );
 
   return (
-    <>
-      <ViewWrapper footerComponent={buttonFooter}>
-        <StackCustom gap={"xs"}>
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
+      footerComponent={buttonFooter}
+    >
+      <StackCustom gap={"xs"}>
           <InformationBox text="File dokumen bersifat opsional, jika memang ada file yang bisa membantu meyakinkan investor. Anda bisa mengupload nya." />
           <Spacing />
           <TextInputCustom
@@ -124,7 +127,6 @@ export default function InvestmentAddDocument() {
             Upload
           </ButtonCenteredOnly>
         </StackCustom>
-      </ViewWrapper>
-    </>
+    </OS_Wrapper>
   );
 }

app/(application)/(user)/investment/[id]/(document)/edit-document.tsx

@@ -6,11 +6,11 @@ import {
   ButtonCustom,
   CenterCustom,
   InformationBox,
+  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
   TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import DIRECTORY_ID from "@/constants/directory-id";
 import {
@@ -105,9 +105,12 @@ export default function InvestmentEditDocument() {
   );
 
   return (
-    <>
-      <ViewWrapper footerComponent={buttonFooter}>
-        <StackCustom gap={"xs"}>
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
+      footerComponent={buttonFooter}
+    >
+      <StackCustom gap={"xs"}>
           <InformationBox text="File dokumen bersifat opsional, jika memang ada file yang bisa membantu meyakinkan investor. Anda bisa mengupload nya." />
           <Spacing />
           <TextInputCustom
@@ -142,7 +145,6 @@ export default function InvestmentEditDocument() {
             Upload
           </ButtonCenteredOnly>
         </StackCustom>
-      </ViewWrapper>
-    </>
+    </OS_Wrapper>
   );
 }

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

@@ -6,9 +6,9 @@ import {
   DrawerCustom,
   Grid,
   MenuDrawerDynamicGrid,
+  OS_Wrapper,
   StackCustom,
   TextCustom,
-  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconDocument, IconEdit, IconNews } from "@/components/_Icon";
@@ -93,7 +93,7 @@ export default function InvestmentDetailHolding() {
         }}
       />
 
-      <ViewWrapper>
+      <OS_Wrapper>
         <BaseBox>
           <StackCustom gap={"xs"}>
             <Grid>
@@ -124,7 +124,7 @@ export default function InvestmentDetailHolding() {
           status={"publish"}
           bottomSection={bottomSection}
         />
-      </ViewWrapper>
+      </OS_Wrapper>
 
       {/* ========= Draft Drawer ========= */}
       <DrawerCustom

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

@@ -7,9 +7,9 @@ import {
   DrawerCustom,
   DummyLandscapeImage,
   MenuDrawerDynamicGrid,
+  OS_Wrapper,
   StackCustom,
   TextCustom,
-  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconTrash } from "@/components/_Icon/IconTrash";
@@ -70,7 +70,7 @@ export default function InvestmentNews() {
           ),
         }}
       />
-      <ViewWrapper>
+      <OS_Wrapper>
         <BaseBox>
           <StackCustom>
             {data && data?.imageId && (
@@ -82,7 +82,7 @@ export default function InvestmentNews() {
             <TextCustom>{(data && data?.deskripsi) || "-"}</TextCustom>
           </StackCustom>
         </BaseBox>
-      </ViewWrapper>
+      </OS_Wrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

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

@@ -3,11 +3,11 @@ import {
   ButtonCustom,
   InformationBox,
   LandscapeFrameUploaded,
+  OS_Wrapper,
   Spacing,
   StackCustom,
   TextAreaCustom,
   TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { apiInvestmentCreateNews } from "@/service/api-client/api-investment";
@@ -80,7 +80,10 @@ export default function InvestmentAddNews() {
   };
 
   return (
-    <ViewWrapper>
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
+    >
       <StackCustom gap={"xs"}>
         <InformationBox text="Pengunggahan foto ke aplikasi bersifat opsional dan tidak diwajibkan, Anda dapat menyimpan berita tanpa mengunggah foto." />
         <LandscapeFrameUploaded image={image?.uri} />
@@ -123,7 +126,6 @@ export default function InvestmentAddNews() {
           Simpan
         </ButtonCustom>
       </StackCustom>
-      <Spacing />
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

app/(application)/(user)/investment/[id]/(transaction-flow)/failed.tsx

@@ -2,10 +2,10 @@
 import {
   BaseBox,
   Grid,
+  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
-  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { apiInvestmentGetInvoice } from "@/service/api-client/api-investment";
@@ -69,7 +69,7 @@ export default function InvestmentFailed() {
   ];
 
   return (
-    <ViewWrapper>
+    <OS_Wrapper>
       <StackCustom>
         <BaseBox>
           <StackCustom>
@@ -110,6 +110,6 @@ export default function InvestmentFailed() {
           </StackCustom>
         </BaseBox>
       </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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

@@ -5,10 +5,10 @@ import {
   ButtonCustom,
   Divider,
   Grid,
+  OS_Wrapper,
   StackCustom,
   TextCustom,
   TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import { LOCAL_STORAGE_KEY } from "@/constants/local-storage-key";
 import { apiInvestmentGetOne } from "@/service/api-client/api-investment";
@@ -99,9 +99,12 @@ export default function InvestmentInvest() {
   };
 
   return (
-    <>
-      <ViewWrapper footerComponent={buttonSubmit()}>
-        <BaseBox>
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
+      footerComponent={buttonSubmit()}
+    >
+      <BaseBox>
           <StackCustom gap={"xs"}>
             <Grid>
               <Grid.Col span={6}>
@@ -165,7 +168,6 @@ export default function InvestmentInvest() {
             </Grid>
           </StackCustom>
         </BaseBox>
-      </ViewWrapper>
-    </>
+    </OS_Wrapper>
   );
 }

app/(application)/(user)/investment/[id]/(transaction-flow)/process.tsx

@@ -1,11 +1,11 @@
-import { BaseBox, StackCustom, TextCustom, ViewWrapper } from "@/components";
+import { BaseBox, OS_Wrapper, StackCustom, TextCustom } from "@/components";
 import MoneyTransferAnimation from "@/components/_ShareComponent/MoneyTransferAnimation";
 import { View } from "react-native";
 
 export default function InvestmentProcess() {
   return (
     <>
-      <ViewWrapper>
+      <OS_Wrapper>
         <BaseBox>
           <StackCustom>
             <TextCustom align="center" bold>
@@ -35,7 +35,7 @@ export default function InvestmentProcess() {
             </Grid.Col>
           </Grid>
         </BaseBox> */}
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

app/(application)/(user)/investment/[id]/(transaction-flow)/select-bank.tsx

@@ -2,7 +2,7 @@ import {
   BaseBox,
   BoxButtonOnFooter,
   ButtonCustom,
-  ViewWrapper,
+  OS_Wrapper,
 } from "@/components";
 import { RadioCustom, RadioGroup } from "@/components/Radio/RadioCustom";
 import { LOCAL_STORAGE_KEY } from "@/constants/local-storage-key";
@@ -86,7 +86,7 @@ export default function InvestmentSelectBank() {
   };
 
   return (
-    <ViewWrapper footerComponent={buttonSubmit()}>
+    <OS_Wrapper footerComponent={buttonSubmit()}>
       <RadioGroup value={select} onChange={setSelect}>
         {_.isEmpty(listBank)
           ? []
@@ -96,6 +96,6 @@ export default function InvestmentSelectBank() {
               </BaseBox>
             ))}
       </RadioGroup>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

app/(application)/(user)/investment/[id]/(transaction-flow)/success.tsx

@@ -2,10 +2,10 @@
 import {
   BaseBox,
   Grid,
+  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
-  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { apiInvestmentGetInvoice } from "@/service/api-client/api-investment";
@@ -69,7 +69,7 @@ export default function InvestmentSuccess() {
   ];
 
   return (
-    <ViewWrapper>
+    <OS_Wrapper>
       <StackCustom>
         <BaseBox>
           <StackCustom>
@@ -110,6 +110,6 @@ export default function InvestmentSuccess() {
           </StackCustom>
         </BaseBox>
       </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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

@@ -4,7 +4,7 @@ import {
   DotButton,
   DrawerCustom,
   MenuDrawerDynamicGrid,
-  ViewWrapper,
+  OS_Wrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconDocument, IconEdit, IconNews } from "@/components/_Icon";
@@ -123,14 +123,14 @@ export default function InvestmentDetailStatus() {
         }}
       />
 
-      <ViewWrapper>
+      <OS_Wrapper>
         <Invesment_DetailDataPublishSection
           status={status as string}
           data={data}
           bottomSection={bottomSection}
           buttonSection={buttonSection}
         />
-      </ViewWrapper>
+      </OS_Wrapper>
 
       {/* ========= Draft Drawer ========= */}
       <DrawerCustom

app/(application)/(user)/investment/[id]/edit-prospectus.tsx

@@ -7,10 +7,10 @@ import {
   CenterCustom,
   InformationBox,
   LoaderCustom,
+  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
-  ViewWrapper,
 } from "@/components";
 import DIRECTORY_ID from "@/constants/directory-id";
 import {
@@ -116,7 +116,7 @@ export default function InvestmentEditProspectus() {
     </BoxButtonOnFooter>
   );
   return (
-    <ViewWrapper footerComponent={!loadingGet && buttonFooter}>
+    <OS_Wrapper footerComponent={!loadingGet && buttonFooter}>
       <StackCustom gap={"xs"}>
         <InformationBox text="File prospektus wajib untuk diupload, agar calon investor paham dengan prospek investasi yang akan anda jalankan kedepan." />
         <Spacing />
@@ -153,6 +153,6 @@ export default function InvestmentEditProspectus() {
           Upload
         </ButtonCenteredOnly>
       </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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

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

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

@@ -4,7 +4,7 @@ import {
   DotButton,
   DrawerCustom,
   MenuDrawerDynamicGrid,
-  ViewWrapper,
+  OS_Wrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconDocument, IconEdit, IconNews } from "@/components/_Icon";
@@ -122,14 +122,14 @@ export default function InvestmentDetail() {
         }}
       />
 
-      <ViewWrapper>
+      <OS_Wrapper>
         <Invesment_DetailDataPublishSection
           status={"publish"}
           data={data}
           bottomSection={bottomSection}
           buttonSection={buttonSection}
         />
-      </ViewWrapper>
+      </OS_Wrapper>
 
       {/* ========= Draft Drawer ========= */}
       <DrawerCustom

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

@@ -6,7 +6,7 @@ import {
   CenterCustom,
   InformationBox,
   LandscapeFrameUploaded,
-  NewWrapper,
+  OS_Wrapper,
   SelectCustom,
   Spacing,
   StackCustom,
@@ -185,7 +185,9 @@ export default function InvestmentCreate() {
 
   //   const [coba, setCoba] = useState("");
   return (
-    <NewWrapper
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
       footerComponent={
         <BoxButtonOnFooter>
           <ButtonCustom
@@ -373,7 +375,6 @@ export default function InvestmentCreate() {
 
         <Spacing />
       </StackCustom>
-      {/* <Spacing height={50} /> */}
-    </NewWrapper>
+    </OS_Wrapper>
   );
 }

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

@@ -6,6 +6,7 @@ import {
 } from "@/components/_Icon";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
+import { OS_ANDROID_HEIGHT, OS_IOS_HEIGHT } from "@/constants/constans-value";
 import { TabsStyles } from "@/styles/tabs-styles";
 import { router, Tabs, useLocalSearchParams } from "expo-router";
 import { View } from "react-native";
@@ -30,12 +31,12 @@ function VotingTabsWrapper() {
             ios: {
               borderTopWidth: 0,
               paddingTop: 12,
-              height: 80,
+              height: OS_IOS_HEIGHT,
             },
             android: {
               borderTopWidth: 0,
               paddingTop: 5,
-              height: 70 + paddingBottom,
+              height: OS_ANDROID_HEIGHT + paddingBottom,
             },
           }),
           header: () => (

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

@@ -7,10 +7,10 @@ import {
   DrawerCustom,
   LoaderCustom,
   MenuDrawerDynamicGrid,
+  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
-  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconArchive, IconContribution, IconEdit } from "@/components/_Icon";
@@ -119,7 +119,7 @@ export default function VotingDetailStatus() {
           ),
         }}
       />
-      <ViewWrapper>
+      <OS_Wrapper>
         {loadingGetData ? (
           <LoaderCustom />
         ) : (
@@ -158,7 +158,7 @@ export default function VotingDetailStatus() {
             <Spacing />
           </>
         )}
-      </ViewWrapper>
+      </OS_Wrapper>
 
       {/* ========= Draft Drawer ========= */}
       <DrawerCustom

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

@@ -6,8 +6,8 @@ import {
   DrawerCustom,
   LoaderCustom,
   MenuDrawerDynamicGrid,
+  OS_Wrapper,
   Spacing,
-  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconContribution } from "@/components/_Icon";
@@ -94,7 +94,7 @@ export default function VotingDetailContribution() {
         }}
       />
 
-      <ViewWrapper>
+      <OS_Wrapper>
         {loadingGetData ? (
           <LoaderCustom />
         ) : (
@@ -116,7 +116,7 @@ export default function VotingDetailContribution() {
             <Spacing />
           </>
         )}
-      </ViewWrapper>
+      </OS_Wrapper>
 
       {/* ========= Publish Drawer ========= */}
       <DrawerCustom

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

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

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

@@ -6,8 +6,8 @@ import {
   DrawerCustom,
   LoaderCustom,
   MenuDrawerDynamicGrid,
+  OS_Wrapper,
   Spacing,
-  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconContribution } from "@/components/_Icon";
@@ -94,7 +94,7 @@ export default function VotingDetailHistory() {
           ),
         }}
       />
-      <ViewWrapper>
+      <OS_Wrapper>
         {loadingGetData ? (
           <LoaderCustom />
         ) : (
@@ -116,7 +116,7 @@ export default function VotingDetailHistory() {
             <Spacing />
           </>
         )}
-      </ViewWrapper>
+      </OS_Wrapper>
 
       {/* ========= Publish Drawer ========= */}
       <DrawerCustom

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

@@ -8,8 +8,8 @@ import {
   InformationBox,
   LoaderCustom,
   MenuDrawerDynamicGrid,
+  OS_Wrapper,
   StackCustom,
-  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconArchive, IconContribution } from "@/components/_Icon";
@@ -32,6 +32,7 @@ import {
   useLocalSearchParams,
 } from "expo-router";
 import React, { useCallback, useEffect, useState } from "react";
+import { RefreshControl } from "react-native";
 import Toast from "react-native-toast-message";
 
 export default function VotingDetail() {
@@ -133,9 +134,9 @@ export default function VotingDetail() {
 
   if (isEventFinished) {
     return (
-      <ViewWrapper>
+      <OS_Wrapper>
         <CustomSkeleton />
-      </ViewWrapper>
+      </OS_Wrapper>
     );
   }
 
@@ -155,7 +156,14 @@ export default function VotingDetail() {
         }}
       />
 
-      <ViewWrapper>
+      <OS_Wrapper
+        refreshControl={
+          <RefreshControl
+            refreshing={loadingGetData}
+            onRefresh={handlerLoadData}
+          />
+        }
+      >
         {loadingGetData ? (
           <LoaderCustom />
         ) : (
@@ -182,7 +190,7 @@ export default function VotingDetail() {
             />
           </StackCustom>
         )}
-      </ViewWrapper>
+      </OS_Wrapper>
 
       {/* ========= Publish Drawer ========= */}
       <DrawerCustom

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

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

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

screens/Donation/ScreenBeranda.tsx

@@ -1,7 +1,7 @@
 import FloatingButton from "@/components/Button/FloatingButton";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { OS_Wrapper } from "@/components";
 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 Donation_BoxPublish from "@/screens/Donation/BoxPublish";
@@ -37,7 +37,8 @@ export default function Donation_ScreenBeranda() {
     });
 
   return (
-    <NewWrapper
+    <OS_Wrapper
+      contentPadding={PADDING_INLINE}
       listData={pagination.listData}
       renderItem={({ item }) => (
         <Donation_BoxPublish data={item} id={item.id} />

screens/Donation/ScreenFundDisbursement.tsx

@@ -4,11 +4,13 @@ import {
   BaseBox,
   Grid,
   InformationBox,
+  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
+import { PADDING_INLINE } from "@/constants/constans-value";
 import { usePagination } from "@/hooks/use-pagination";
 import {
   apiDonationDisbursementOfFundsListById,
@@ -23,7 +25,6 @@ import React, { useState } from "react";
 import { RefreshControl, View } from "react-native";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { Divider } from "react-native-paper";
 
 interface Donation_ScreenFundDisbursementProps {
@@ -155,7 +156,8 @@ export default function Donation_ScreenFundDisbursement({
   );
 
   return (
-    <NewWrapper
+    <OS_Wrapper
+      contentPadding={PADDING_INLINE}
       listData={pagination.listData}
       renderItem={renderItem}
       onEndReached={pagination.loadMore}

screens/Donation/ScreenListOfDonatur.tsx

@@ -3,11 +3,13 @@ import {
   BaseBox,
   Grid,
   LoaderCustom,
+  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
+import { PADDING_INLINE } from "@/constants/constans-value";
 import { usePagination } from "@/hooks/use-pagination";
 import { apiDonationListOfDonaturById } from "@/service/api-client/api-donation";
 import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
@@ -16,7 +18,6 @@ import dayjs from "dayjs";
 import { RefreshControl } from "react-native";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 
 interface Donation_ScreenListOfDonaturProps {
   donationId: string;
@@ -80,7 +81,8 @@ export default function Donation_ScreenListOfDonatur({
     });
 
   return (
-    <NewWrapper
+    <OS_Wrapper
+      contentPadding={PADDING_INLINE}
       hideFooter
       listData={pagination.listData}
       renderItem={renderItem}

screens/Donation/ScreenListOfNews.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { BackButton, DrawerCustom, MenuDrawerDynamicGrid } from "@/components";
+import { BackButton, DrawerCustom, MenuDrawerDynamicGrid, OS_Wrapper } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconPlus } from "@/components/_Icon";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { MainColor } from "@/constants/color-palet";
+import { PADDING_INLINE } from "@/constants/constans-value";
 import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { usePagination } from "@/hooks/use-pagination";
@@ -61,7 +61,8 @@ export default function Donation_ScreenListOfNews({
           ),
         }}
       />
-      <NewWrapper
+      <OS_Wrapper
+        contentPadding={PADDING_INLINE}
         listData={pagination.listData}
         renderItem={renderItem}
         onEndReached={pagination.loadMore}

screens/Donation/ScreenMyDonation.tsx

@@ -3,13 +3,13 @@ import {
   BaseBox,
   DummyLandscapeImage,
   Grid,
+  OS_Wrapper,
   StackCustom,
   TextCustom,
 } from "@/components";
 import FloatingButton from "@/components/Button/FloatingButton";
-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 { useAuth } from "@/hooks/use-auth";
 import { usePagination } from "@/hooks/use-pagination";
@@ -129,7 +129,8 @@ export default function Donation_ScreenMyDonation() {
   );
 
   return (
-    <NewWrapper
+    <OS_Wrapper
+      contentPadding={PADDING_INLINE}
       listData={pagination.listData}
       renderItem={renderItem}
       onEndReached={pagination.loadMore}

screens/Donation/ScreenRecapOfNews.tsx

@@ -4,10 +4,11 @@ import {
   DotButton,
   DrawerCustom,
   MenuDrawerDynamicGrid,
+  OS_Wrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconPlus } from "@/components/_Icon";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { PADDING_INLINE } from "@/constants/constans-value";
 import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { usePagination } from "@/hooks/use-pagination";
@@ -71,7 +72,8 @@ export default function Donation_ScreenRecapOfNews({
           ),
         }}
       />
-      <NewWrapper
+      <OS_Wrapper
+        contentPadding={PADDING_INLINE}
         listData={pagination.listData}
         renderItem={renderItem}
         onEndReached={pagination.loadMore}

screens/Donation/ScreenStatus.tsx

@@ -1,8 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { ScrollableCustom } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { OS_Wrapper, ScrollableCustom } from "@/components";
 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 { useAuth } from "@/hooks/use-auth";
 import { usePagination } from "@/hooks/use-pagination";
@@ -76,7 +75,8 @@ export default function Donation_ScreenStatus({
     });
 
   return (
-    <NewWrapper
+    <OS_Wrapper
+      contentPadding={PADDING_INLINE}
       listData={pagination.listData}
       renderItem={renderItem}
       onEndReached={pagination.loadMore}

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

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

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

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

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}

screens/Invesment/Document/ScreenListDocument.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { TextCustom } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
-import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+import { TextCustom, OS_Wrapper } from "@/components";
+import { PAGINATION_DEFAULT_TAKE, PADDING_INLINE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { usePagination } from "@/hooks/use-pagination";
 import Investment_BoxDetailDocument from "@/screens/Invesment/Document/RecapBoxDetail";
@@ -58,8 +57,9 @@ export default function Investment_ScreenListOfDocument() {
   );
 
   return (
-    <NewWrapper
+    <OS_Wrapper
       hideFooter
+      contentPadding={PADDING_INLINE}
       listData={pagination.listData}
       renderItem={renderDocumentItem}
       refreshControl={

screens/Invesment/Document/ScreenRecapOfDocument.tsx

@@ -4,13 +4,13 @@ import {
   BackButton,
   DotButton,
   DrawerCustom,
-  MenuDrawerDynamicGrid
+  MenuDrawerDynamicGrid,
+  OS_Wrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconEdit } from "@/components/_Icon";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { MainColor } from "@/constants/color-palet";
-import { ICON_SIZE_SMALL, PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+import { ICON_SIZE_SMALL, PAGINATION_DEFAULT_TAKE, PADDING_INLINE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { usePagination } from "@/hooks/use-pagination";
 import Investment_BoxDetailDocument from "@/screens/Invesment/Document/RecapBoxDetail";
@@ -143,8 +143,9 @@ export default function Investment_ScreenRecapOfDocument() {
         }}
       />
 
-      <NewWrapper
+      <OS_Wrapper
         hideFooter
+        contentPadding={PADDING_INLINE}
         listData={pagination.listData}
         renderItem={renderDocumentItem}
         refreshControl={

screens/Invesment/News/ScreenListOfNews.tsx

@@ -5,11 +5,12 @@ import {
   DrawerCustom,
   LoaderCustom,
   MenuDrawerDynamicGrid,
+  OS_Wrapper,
   TextCustom,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconPlus } from "@/components/_Icon";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { PADDING_INLINE } from "@/constants/constans-value";
 import { usePagination } from "@/hooks/use-pagination";
 import { apiInvestmentGetNews } from "@/service/api-client/api-investment";
 import { router, Stack, useFocusEffect } from "expo-router";
@@ -75,8 +76,9 @@ export default function Investment_ScreenListOfNews({
         }}
       />
 
-      <NewWrapper
+      <OS_Wrapper
         hideFooter
+        contentPadding={PADDING_INLINE}
         listData={pagination.listData}
         renderItem={renderItem}
         onEndReached={pagination.loadMore}

screens/Invesment/News/ScreenRecapOfNews.tsx

@@ -6,19 +6,19 @@ import {
   DrawerCustom,
   LoaderCustom,
   MenuDrawerDynamicGrid,
+  OS_Wrapper,
   Spacing,
   TextCustom,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconPlus } from "@/components/_Icon";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { PAGINATION_DEFAULT_TAKE, PADDING_INLINE } from "@/constants/constans-value";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { usePagination } from "@/hooks/use-pagination";
 import { apiInvestmentGetNews } from "@/service/api-client/api-investment";
 import { router, Stack, useFocusEffect } from "expo-router";
 import { useCallback, useState } from "react";
 import { RefreshControl } from "react-native";
-import { createPaginationComponents } from "@/helpers/paginationHelpers";
-import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
 import Investment_BoxNews from "./BoxNews";
 
 interface InvestmentRecapOfNewsProps {
@@ -76,8 +76,9 @@ export default function Investment_ScreenRecapOfNews({
           ),
         }}
       />
-      <NewWrapper
+      <OS_Wrapper
         hideFooter
+        contentPadding={PADDING_INLINE}
         listData={pagination.listData}
         renderItem={renderItem}
         onEndReached={pagination.loadMore}

screens/Invesment/ScreenBursa.tsx

@@ -1,8 +1,9 @@
 import {
   FloatingButton,
+  OS_Wrapper,
   TextCustom,
 } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { PADDING_INLINE } from "@/constants/constans-value";
 import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { usePagination } from "@/hooks/use-pagination";
@@ -46,7 +47,8 @@ export default function Investment_ScreenBursa() {
   );
 
   return (
-    <NewWrapper
+    <OS_Wrapper
+      contentPadding={PADDING_INLINE}
       listData={pagination.listData}
       renderItem={renderInvestmentItem}
       refreshControl={

screens/Invesment/ScreenInvestor.tsx

@@ -3,12 +3,12 @@ import {
   AvatarUsernameAndOtherComponent,
   BoxWithHeaderSection,
   CenterCustom,
+  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
 } 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 { usePagination } from "@/hooks/use-pagination";
 import { apiInvestmentGetInvestorById } from "@/service/api-client/api-investment";
@@ -66,8 +66,9 @@ export default function Investment_ScreenInvestor({
     });
 
   return (
-    <NewWrapper
+    <OS_Wrapper
       hideFooter
+      contentPadding={PADDING_INLINE}
       listData={pagination.listData}
       renderItem={renderItem}
       onEndReached={pagination.loadMore}

screens/Invesment/ScreenInvoice.tsx

@@ -5,10 +5,10 @@ import {
   ButtonCustom,
   Grid,
   InformationBox,
+  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
-  ViewWrapper,
 } from "@/components";
 import CopyButton from "@/components/Button/CoyButton";
 import { MainColor } from "@/constants/color-palet";
@@ -94,7 +94,7 @@ export default function Investment_ScreenInvoice() {
 
   return (
     <>
-      <ViewWrapper>
+      <OS_Wrapper>
         <StackCustom>
           <InformationBox text="Mohon transfer ke rekening dibawah" />
           <BaseBox>
@@ -224,7 +224,7 @@ export default function Investment_ScreenInvoice() {
           </ButtonCustom>
         </StackCustom>
         <Spacing />
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

screens/Invesment/ScreenMyHolding.tsx

@@ -1,11 +1,12 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
     BaseBox,
+    OS_Wrapper,
     ProgressCustom,
     StackCustom,
     TextCustom
 } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { PADDING_INLINE } from "@/constants/constans-value";
 import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { useAuth } from "@/hooks/use-auth";
@@ -73,7 +74,8 @@ export default function Investment_ScreenMyHolding() {
     });
 
   return (
-    <NewWrapper
+    <OS_Wrapper
+      contentPadding={PADDING_INLINE}
       listData={pagination.listData}
       renderItem={renderItem}
       onEndReached={pagination.loadMore}

screens/Invesment/ScreenPortofolio.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { ScrollableCustom, TextCustom } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { OS_Wrapper, ScrollableCustom, TextCustom } from "@/components";
+import { PADDING_INLINE } from "@/constants/constans-value";
 import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { useAuth } from "@/hooks/use-auth";
@@ -83,7 +83,8 @@ export default function Investment_ScreenPortofolio() {
   );
 
   return (
-    <NewWrapper
+    <OS_Wrapper
+      contentPadding={PADDING_INLINE}
       hideFooter
       headerComponent={tabsComponent}
       listData={pagination.listData}

screens/Invesment/ScreenTransaction.tsx

@@ -3,12 +3,13 @@ import {
   BadgeCustom,
   BaseBox,
   Grid,
+  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
 } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import NoDataText from "@/components/_ShareComponent/NoDataText";
+import { PADDING_INLINE } from "@/constants/constans-value";
 import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { useAuth } from "@/hooks/use-auth";
@@ -128,7 +129,8 @@ export default function Investment_ScreenTransaction() {
   );
 
   return (
-    <NewWrapper
+    <OS_Wrapper
+      contentPadding={PADDING_INLINE}
       hideFooter
       listData={pagination.listData}
       renderItem={renderTransactionItem}

screens/Voting/ScreenBeranda.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { FloatingButton, SearchInput } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { FloatingButton, OS_Wrapper, SearchInput } from "@/components";
+import { PADDING_INLINE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { useAuth } from "@/hooks/use-auth";
 import { usePagination } from "@/hooks/use-pagination";
@@ -58,7 +58,8 @@ export default function Voting_ScreenBeranda() {
   );
 
   return (
-    <NewWrapper
+    <OS_Wrapper
+      contentPadding={PADDING_INLINE}
       listData={pagination.listData}
       renderItem={renderItem}
       ListEmptyComponent={ListEmptyComponent}

screens/Voting/ScreenContribution.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { OS_Wrapper } from "@/components";
+import { PADDING_INLINE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { useAuth } from "@/hooks/use-auth";
 import { usePagination } from "@/hooks/use-pagination";
@@ -52,7 +53,8 @@ export default function Voting_ScreenContribution() {
   );
 
   return (
-    <NewWrapper
+    <OS_Wrapper
+      contentPadding={PADDING_INLINE}
       listData={pagination.listData}
       renderItem={renderItem}
       ListEmptyComponent={ListEmptyComponent}

screens/Voting/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, OS_Wrapper, Spacing, TextCustom } from "@/components";
 import { AccentColor, 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 { useAuth } from "@/hooks/use-auth";
 import { usePagination } from "@/hooks/use-pagination";
@@ -93,7 +92,8 @@ export default function Voting_ScreenHistory() {
   );
 
   return (
-    <NewWrapper
+    <OS_Wrapper
+      contentPadding={PADDING_INLINE}
       headerComponent={headerComponent}
       listData={pagination.listData}
       renderItem={renderVotingItem}

screens/Voting/ScreenListOfContributor.tsx

@@ -3,10 +3,10 @@ import {
   AvatarUsernameAndOtherComponent,
   BadgeCustom,
   BaseBox,
+  OS_Wrapper,
   Spacing,
   TextCustom,
 } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { usePagination } from "@/hooks/use-pagination";
@@ -62,7 +62,7 @@ export default function Voting_ScreenListOfContributor() {
   );
 
   return (
-    <NewWrapper
+    <OS_Wrapper
       hideFooter
       listData={pagination.listData}
       renderItem={renderContributorItem}

screens/Voting/ScreenStatus.tsx

@@ -2,13 +2,13 @@
 import {
   BadgeCustom,
   BaseBox,
+  OS_Wrapper,
   ScrollableCustom,
   StackCustom,
   TextCustom,
 } 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 { useAuth } from "@/hooks/use-auth";
 import { usePagination } from "@/hooks/use-pagination";
@@ -111,7 +111,8 @@ export default function Voting_ScreenStatus() {
   );
 
   return (
-    <NewWrapper
+    <OS_Wrapper
+      contentPadding={PADDING_INLINE}
       headerComponent={<View style={{ paddingTop: 8 }}>{scrollComponent}</View>}
       listData={pagination.listData}
       renderItem={renderVotingItem}

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

@@ -174,117 +174,222 @@ import { OS_Wrapper } from "@/components";
 - ✅ **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)
+## ✅ User Phase 6: Event Screens - COMPLETED (2026-04-10)
 
-- [ ] `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`
+**Files migrated: 16**
 
-## ⏳ User Phase 7: Voting Screens (Priority: HIGH)
+#### 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})
 
-- [ ] `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)
+#### 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)
 
-## ⏳ User Phase 8: Donation Screens (Priority: HIGH)
+#### Event `detail/` Sub-Routes:
+- ✅ `app/(application)/(user)/event/detail/[id].tsx` - ViewWrapper → OS_Wrapper
 
-- [ ] `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)
+## ✅ User Phase 7: Voting Screens - COMPLETED (2026-04-13)
 
-- [ ] `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)
+**Files migrated: 11**
 
-## ⏳ User Phase 10: Collaboration Screens (Priority: MEDIUM)
+#### Voting List Screens (OS_Wrapper):
+- ✅ `screens/Voting/ScreenBeranda.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (tabs list)
+- ✅ `screens/Voting/ScreenContribution.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (tabs list)
+- ✅ `screens/Voting/ScreenHistory.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (tabs list)
+- ✅ `screens/Voting/ScreenStatus.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (tabs list)
+- ✅ `screens/Voting/ScreenListOfContributor.tsx` - NewWrapper → OS_Wrapper (pagination list)
 
-- [ ] `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)
+#### Voting Form Screens (OS_Wrapper with keyboard handling):
+- ✅ `app/(application)/(user)/voting/create.tsx` - NewWrapper → OS_Wrapper + `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- ✅ `app/(application)/(user)/voting/[id]/edit.tsx` - NewWrapper → OS_Wrapper + `enableKeyboardHandling` + `contentPaddingBottom={250}`
 
-## ⏳ User Phase 11: Other User Screens (Priority: LOW)
+#### Voting Detail Screens (OS_Wrapper static):
+- ✅ `app/(application)/(user)/voting/[id]/index.tsx` - ViewWrapper → OS_Wrapper (detail with pull-to-refresh)
+- ✅ `app/(application)/(user)/voting/[id]/contribution.tsx` - ViewWrapper → OS_Wrapper (detail static)
+- ✅ `app/(application)/(user)/voting/[id]/history.tsx` - ViewWrapper → OS_Wrapper (detail static)
+- ✅ `app/(application)/(user)/voting/[id]/[status]/detail.tsx` - ViewWrapper → OS_Wrapper (detail static)
 
-- [ ] `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)
+**Testing Status:**
+- ✅ TypeScript: No errors
+- ⏳ Build: Pending
+- ⏳ iOS Testing: Pending
+- ⏳ Android Testing: Pending
+
+---
+
+## ✅ User Phase 8: Donation Screens - COMPLETED (2026-04-13)
+
+**Files migrated: 31**
+
+#### Donation List Screens (OS_Wrapper - tabs dengan contentPadding={PADDING_INLINE}):
+- ✅ `screens/Donation/ScreenBeranda.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (tabs list - index)
+- ✅ `screens/Donation/ScreenMyDonation.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (tabs list - my-donation)
+- ✅ `screens/Donation/ScreenStatus.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (tabs list - status)
+
+#### Donation List/Recap Screens (OS_Wrapper dengan contentPadding={PADDING_INLINE}):
+- ✅ `screens/Donation/ScreenFundDisbursement.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (fund disbursement list)
+- ✅ `screens/Donation/ScreenListOfDonatur.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (donatur list)
+- ✅ `screens/Donation/ScreenListOfNews.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (news list)
+- ✅ `screens/Donation/ScreenRecapOfNews.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (news recap)
+
+#### Donation Detail & Info Screens (OS_Wrapper static):
+- ✅ `app/(application)/(user)/donation/[id]/index.tsx` - NewWrapper → OS_Wrapper (detail main)
+- ✅ `app/(application)/(user)/donation/[id]/[status]/detail.tsx` - NewWrapper → OS_Wrapper (detail status)
+- ✅ `app/(application)/(user)/donation/[id]/infromation-fundrising.tsx` - ViewWrapper → OS_Wrapper (fund info)
+- ✅ `app/(application)/(user)/donation/[id]/detail-story.tsx` - ViewWrapper → OS_Wrapper (story detail)
+
+#### Donation Form Screens (OS_Wrapper with enableKeyboardHandling):
+- ✅ `app/(application)/(user)/donation/create.tsx` - NewWrapper → OS_Wrapper + `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- ✅ `app/(application)/(user)/donation/[id]/edit.tsx` - NewWrapper → OS_Wrapper + `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- ✅ `app/(application)/(user)/donation/create-story.tsx` - NewWrapper → OS_Wrapper + `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- ✅ `app/(application)/(user)/donation/[id]/edit-story.tsx` - ViewWrapper → OS_Wrapper + `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- ✅ `app/(application)/(user)/donation/[id]/edit-rekening.tsx` - ViewWrapper → OS_Wrapper + `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- ✅ `app/(application)/(user)/donation/[id]/(news)/add-news.tsx` - NewWrapper → OS_Wrapper + `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- ✅ `app/(application)/(user)/donation/[id]/(news)/[news]/edit-news.tsx` - ViewWrapper → OS_Wrapper + `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- ✅ `app/(application)/(user)/donation/[id]/(news)/[news]/index.tsx` - ViewWrapper → OS_Wrapper (news detail)
+- ✅ `app/(application)/(user)/donation/[id]/(transaction-flow)/index.tsx` - ViewWrapper → OS_Wrapper + `enableKeyboardHandling` + `contentPaddingBottom={250}`
+
+#### Donation Transaction Flow (OS_Wrapper static/no keyboard):
+- ✅ `app/(application)/(user)/donation/[id]/(transaction-flow)/select-bank.tsx` - ViewWrapper → OS_Wrapper (bank selection)
+- ✅ `app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/invoice.tsx` - ViewWrapper → OS_Wrapper (invoice with file upload)
+- ✅ `app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/process.tsx` - ViewWrapper → OS_Wrapper (payment process)
+- ✅ `app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/success.tsx` - ViewWrapper → OS_Wrapper (payment success)
+- ✅ `app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/failed.tsx` - ViewWrapper → OS_Wrapper (payment failed)
+
+#### Crowdfunding Screen:
+- ✅ `app/(application)/(user)/crowdfunding/index.tsx` - ViewWrapper → OS_Wrapper (static screen)
+
+#### Tabs Layout Height Constants Fix:
+- ✅ `app/(application)/(user)/voting/(tabs)/_layout.tsx` - Hardcode → `OS_IOS_HEIGHT` / `OS_ANDROID_HEIGHT`
+
+**Testing Status:**
+- ✅ TypeScript: No errors
+- ⏳ Build: Pending
+- ⏳ iOS Testing: Pending
+- ⏳ Android Testing: Pending
+
+---
+
+## ✅ User Phase 9: Investment Screens - COMPLETED (2026-04-13)
+
+**Files migrated: 24**
+
+#### Investment Tabs Screens (OS_Wrapper - tabs dengan contentPadding={PADDING_INLINE}):
+- ✅ `screens/Invesment/ScreenBursa.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (tabs list - index)
+- ✅ `screens/Invesment/ScreenMyHolding.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (tabs list - my-holding)
+- ✅ `screens/Invesment/ScreenPortofolio.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (tabs list - portofolio)
+- ✅ `screens/Invesment/ScreenTransaction.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (tabs list - transaction)
+
+#### Investment List/Document Screens (OS_Wrapper dengan contentPadding={PADDING_INLINE}):
+- ✅ `screens/Invesment/ScreenInvestor.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (investor list)
+- ✅ `screens/Invesment/Document/ScreenListDocument.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (document list)
+- ✅ `screens/Invesment/Document/ScreenRecapOfDocument.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (document recap)
+- ✅ `screens/Invesment/News/ScreenListOfNews.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (news list)
+- ✅ `screens/Invesment/News/ScreenRecapOfNews.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (news recap)
+
+#### Investment Detail Screens (OS_Wrapper static):
+- ✅ `app/(application)/(user)/investment/[id]/index.tsx` - ViewWrapper → OS_Wrapper (detail main)
+- ✅ `app/(application)/(user)/investment/[id]/[status]/detail.tsx` - ViewWrapper → OS_Wrapper (detail status)
+- ✅ `app/(application)/(user)/investment/[id]/(my-holding)/[id].tsx` - ViewWrapper → OS_Wrapper (holding detail)
+- ✅ `app/(application)/(user)/investment/[id]/edit-prospectus.tsx` - ViewWrapper → OS_Wrapper (file upload)
+- ✅ `app/(application)/(user)/investment/[id]/(news)/[news]/index.tsx` - ViewWrapper → OS_Wrapper (news detail)
+
+#### Investment Form Screens (OS_Wrapper with enableKeyboardHandling):
+- ✅ `app/(application)/(user)/investment/create.tsx` - NewWrapper → OS_Wrapper + `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- ✅ `app/(application)/(user)/investment/[id]/edit.tsx` - NewWrapper → OS_Wrapper + `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- ✅ `app/(application)/(user)/investment/[id]/(document)/add-document.tsx` - ViewWrapper → OS_Wrapper + `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- ✅ `app/(application)/(user)/investment/[id]/(document)/edit-document.tsx` - ViewWrapper → OS_Wrapper + `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- ✅ `app/(application)/(user)/investment/[id]/(news)/add-news.tsx` - ViewWrapper → OS_Wrapper + `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- ✅ `app/(application)/(user)/investment/[id]/(transaction-flow)/index.tsx` - ViewWrapper → OS_Wrapper + `enableKeyboardHandling` + `contentPaddingBottom={250}`
+
+#### Investment Transaction Flow (OS_Wrapper static/no keyboard):
+- ✅ `screens/Invesment/ScreenInvoice.tsx` - ViewWrapper → OS_Wrapper (invoice display)
+- ✅ `app/(application)/(user)/investment/[id]/(transaction-flow)/process.tsx` - ViewWrapper → OS_Wrapper (status page)
+- ✅ `app/(application)/(user)/investment/[id]/(transaction-flow)/select-bank.tsx` - ViewWrapper → OS_Wrapper (bank selection)
+- ✅ `app/(application)/(user)/investment/[id]/(transaction-flow)/failed.tsx` - ViewWrapper → OS_Wrapper (status failed)
+- ✅ `app/(application)/(user)/investment/[id]/(transaction-flow)/success.tsx` - ViewWrapper → OS_Wrapper (status success)
+
+#### Investment Tabs Layout Height Fix:
+- ✅ `app/(application)/(user)/investment/(tabs)/_layout.tsx` - Hardcode → `OS_IOS_HEIGHT` / `OS_ANDROID_HEIGHT`
+
+**Testing Status:**
+- ✅ TypeScript: No errors
+- ⏳ Build: Pending
+- ⏳ iOS Testing: Pending
+- ⏳ Android Testing: Pending
+
+#### ⚠️ Known Issues - Investment Upload:
+- **Issue:** Error saat upload gambar di `investment/create.tsx`
+- **Error Message:** `url >> http://192.168.1.112:3000/api/mobile/file` + `[ERROR] [AxiosError: Request failed with status code 500]`
+- **Status:** ❌ Belum diperbaiki - akan diperbaiki besok
+- **Note Penting:** Fitur Investment **belum sepenuhnya rampung** - masih ada issue upload file yang perlu diinvestigasi lebih lanjut. Kemungkinan masalah di server upload service atau environment development. Production saat ini masih aman.
 
 ---
 
 # 🔴 ADMIN PHASES (Admin-Facing Screens)
 
-## ⏳ Admin Phase 1: Event Management (Priority: HIGH)
+## ✅ Admin Phase 9: User Access - COMPLETED (2026-04-09)
 
-- [ ] `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`
+**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}`
 
 ## ⏳ 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`
+- [ ] `screens/Admin/Voting/ScreenVotingList.tsx`
+- [ ] `screens/Admin/Voting/ScreenVotingCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- [ ] `screens/Admin/Voting/ScreenVotingEdit.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
 
 ## ⏳ 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`
+- [ ] `screens/Admin/Donation/ScreenDonationList.tsx`
+- [ ] `screens/Admin/Donation/ScreenDonationCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- [ ] `screens/Admin/Donation/ScreenDonationEdit.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
 
 ## ⏳ 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)
+- [ ] `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`
 
 ## ⏳ 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)
+- [ ] `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)
-
-- [ ] `app/(application)/admin/job/index.tsx`
-- [ ] `app/(application)/admin/job/[id]/index.tsx` (detail)
-- [ ] `app/(application)/admin/job/[status]/index.tsx`
+- [ ] `screens/Admin/Job/ScreenJobAdminList.tsx`
+- [ ] `screens/Admin/Job/ScreenJobAdminDetail.tsx`
+- [ ] `screens/Admin/Job/ScreenJobAdminStatus.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`
+- [ ] `screens/Admin/Investment/ScreenInvestmentList.tsx`
+- [ ] `screens/Admin/Investment/ScreenInvestmentDetail.tsx`
+- [ ] `screens/Admin/Investment/ScreenInvestmentStatus.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`
+- [ ] `screens/Admin/App-Information/ScreenAppInfoList.tsx`
+- [ ] `screens/Admin/App-Information/ScreenBusinessField.tsx`
+- [ ] `screens/Admin/App-Information/ScreenInformationBank.tsx`
+- [ ] `screens/Admin/App-Information/ScreenSticker.tsx`
 
 ---
 
@@ -294,10 +399,12 @@ import { OS_Wrapper } from "@/components";
 - **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)
@@ -318,6 +425,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)
 />
 ```
 
@@ -366,38 +474,38 @@ import { OS_Wrapper } from "@/components";
 | Phase | Total Files | Migrated | Testing | Status |
 |-------|-------------|----------|---------|--------|
 | User Phase 1 (Job) | 9 | 9 | ✅ Complete | ✅ Complete |
-| User Phase 2 (Profile + Others) | 10 | 10 | ✅ 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) | ~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 6 (Event) | 16 | 16 | ⏳ Pending | ✅ Complete |
+| User Phase 7 (Voting) | 11 | 11 | ✅ No errors | ✅ Complete |
+| User Phase 8 (Donation + Others) | 31 | 31 | ✅ No errors | ✅ Complete |
+| User Phase 9 (Investment) | 24 | 24 | ✅ No errors | ✅ Complete |
 | User Phase 10 (Collaboration) | ~3 | 0 | 0 | ⏳ Pending |
-| User Phase 11 (Others) | ~4 | 0 | 0 | ⏳ Pending |
-| **User Total** | **~69** | **44** | **9** | **~64% Complete** |
+| User Phase 11 (Others) | ~3 | 0 | 0 | ⏳ Pending |
+| **User Total** | **~132** | **126** | **10** | **~95% 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 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) | ~6 | 2 | 0 | 🔄 In Progress |
-| **Admin Total** | **~42** | **2** | **0** | **5% Complete** |
+| 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** | ~69 | 44 | ~64% Complete |
-| **Admin Screens** | ~42 | 2 | 5% Complete |
-| **GRAND TOTAL** | **~111** | **46** | **~41% Complete** |
+| **User Screens** | ~132 | 126 | ~95% Complete |
+| **Admin Screens** | ~31 | 2 | ~6% Complete |
+| **GRAND TOTAL** | **~163** | **128** | **~79% Complete** |
 
 ## 🔄 Rollback Plan
 
@@ -411,6 +519,7 @@ 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-09
-**Status**: User Phase 1-4 Complete ✅ (27 files migrated)
-**Next**: User Phase 5 - Forum Screens
+**Last Updated**: 2026-04-13
+**Status**: User Phase 1-9 Complete ✅ (with known issues) | Admin Phase 9 Complete ✅ (128 files migrated)
+**Next**: User Phase 10-11 (~6 files) OR Admin Phase 1-3 (HIGH Priority, ~9 files)
+**TODO Tomorrow**: Fix Investment upload error (status 500 on image upload)