feat: Complete User Phase 7 Voting screens migration to OS_Wrapper

- Migrate 5 list screens (Beranda, Contribution, History, Status, ListOfContributor)
- Migrate 2 form screens (create, edit) with enableKeyboardHandling
- Migrate 4 detail screens (index, contribution, history, detail)
- Add PADDING_INLINE to tabs screens for consistent spacing
- Update TASK-005 progress to 80% complete (71/89 files)

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

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

screens/Voting/ScreenBeranda.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { FloatingButton, SearchInput } from "@/components";
+import { FloatingButton, OS_Wrapper, SearchInput } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+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 { ButtonCustom, OS_Wrapper, Spacing, TextCustom } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 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

@@ -198,6 +198,35 @@ import { OS_Wrapper } from "@/components";
 
 ---
 
+## ✅ User Phase 7: Voting Screens - COMPLETED (2026-04-13)
+
+**Files migrated: 11**
+
+#### Voting List Screens (OS_Wrapper):
+- ✅ `screens/Voting/ScreenBeranda.tsx` - NewWrapper → OS_Wrapper (tabs list + contentPadding={PADDING_INLINE})
+- ✅ `screens/Voting/ScreenContribution.tsx` - NewWrapper → OS_Wrapper (tabs list + contentPadding={PADDING_INLINE})
+- ✅ `screens/Voting/ScreenHistory.tsx` - NewWrapper → OS_Wrapper (tabs list + contentPadding={PADDING_INLINE})
+- ✅ `screens/Voting/ScreenStatus.tsx` - NewWrapper → OS_Wrapper (tabs list + contentPadding={PADDING_INLINE})
+- ✅ `screens/Voting/ScreenListOfContributor.tsx` - NewWrapper → OS_Wrapper (pagination list)
+
+#### 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}
+
+#### 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)
+
+**Testing Status:**
+- ✅ TypeScript: No errors
+- ⏳ Build: Pending
+- ⏳ iOS Testing: Pending
+- ⏳ Android Testing: Pending
+
+---
+
 # 🔴 ADMIN PHASES (Admin-Facing Screens)
 
 ## ✅ Admin Phase 9: User Access - COMPLETED (2026-04-09)
@@ -341,12 +370,12 @@ import { OS_Wrapper } from "@/components";
 | User Phase 4 (Maps) | 2 | 2 | ⏳ Pending | ✅ Complete |
 | User Phase 5 (Forum) | 17 | 17 | ⏳ Pending | ✅ Complete |
 | User Phase 6 (Event) | 16 | 16 | ⏳ Pending | ✅ Complete |
-| User Phase 7 (Voting) | ~10 | 0 | 0 | ⏳ Pending |
+| User Phase 7 (Voting) | 11 | 11 | ✅ No errors | ✅ Complete |
 | User Phase 8 (Donation) | ~4 | 0 | 0 | ⏳ Pending |
 | User Phase 9 (Investment) | ~3 | 0 | 0 | ⏳ Pending |
 | User Phase 10 (Collaboration) | ~3 | 0 | 0 | ⏳ Pending |
 | User Phase 11 (Others) | ~4 | 0 | 0 | ⏳ Pending |
-| **User Total** | **~84** | **60** | **9** | **~71% Complete** |
+| **User Total** | **~89** | **71** | **10** | **~80% Complete** |
 
 ### Admin Phases:
 | Phase | Total Files | Migrated | Testing | Status |
@@ -381,6 +410,6 @@ Jika ada issue yang tidak bisa di-fix dalam 1 jam:
 
 **Co-authored-by**: Qwen-Coder <qwen-coder@alibabacloud.com>
 **Created**: 2026-04-06
-**Last Updated**: 2026-04-10
+**Last Updated**: 2026-04-13
-**Status**: User Phase 1-6 Complete ✅ (60 files migrated)
+**Status**: User Phase 1-7 Complete ✅ | Admin Phase 9 Complete ✅ (71 files migrated)
-**Next**: User Phase 7 - Voting Screens
+**Next**: User Phase 8 - Donation Screens OR Admin Phase 1-3 (HIGH Priority)