feat: Migrate Profile, Waiting Room, and Delete Account to OS_Wrapper

Profile Screens (8 files):
- [id]/index.tsx: NewWrapper → OS_Wrapper (list with refresh)
- [id]/edit.tsx: ViewWrapper → OS_Wrapper (form + keyboard handling)
- create.tsx: ViewWrapper → OS_Wrapper (form + keyboard handling)
- [id]/blocked-list.tsx: NewWrapper → OS_Wrapper (pagination list)
- [id]/detail-blocked.tsx: NewWrapper → OS_Wrapper (static with footer)
- [id]/update-background.tsx: ViewWrapper → OS_Wrapper (static with footer)
- [id]/update-photo.tsx: ViewWrapper → OS_Wrapper (static with footer)
- All Profile forms use enableKeyboardHandling + contentPaddingBottom={250}

Other Screens (2 files):
- waiting-room.tsx: NewWrapper → OS_Wrapper (static with refresh + footer)
- delete-account.tsx: ViewWrapper → OS_Wrapper (form + keyboard handling)

Bug Fixes:
- AndroidWrapper: Add refreshControl to ScrollView (fix pull-to-refresh on static mode)

Pattern Applied:
- List screens: contentPaddingBottom=100 (default)
- Form screens: contentPaddingBottom=250 (with TextInput)
- No PADDING_INLINE (user preference - prevents box narrowing)

Documentation:
- Update TASK-005 with Phase 1 completion details

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

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
2026-04-08 14:32:11 +08:00
parent b8f8a361d6
commit 6ec839fd67
12 changed files with 113 additions and 61 deletions

27
QWEN.md
View File

@@ -513,3 +513,30 @@ When using Maplibre MapView on iOS, prevent "Attempt to recycle a mounted view"
- [Expo Router Documentation](https://docs.expo.dev/router/introduction/) - [Expo Router Documentation](https://docs.expo.dev/router/introduction/)
- [TypeScript Documentation](https://www.typescriptlang.org/docs/) - [TypeScript Documentation](https://www.typescriptlang.org/docs/)
- [Maplibre React Native](https://github.com/maplibre/maplibre-react-native) - [Maplibre React Native](https://github.com/maplibre/maplibre-react-native)
## Qwen Added Memories
- OS_Wrapper contentPaddingBottom pattern:
- Default: contentPaddingBottom=100 (untuk list screens)
- Forms: contentPaddingBottom=250 (HANYA untuk screens yang punya TextInput/TextArea)
- contentPadding=0 (default, per-screen control)
- OS_ANDROID_PADDING_TOP=6 (compact tabs)
- OS_IOS_PADDING_TOP=12
- PADDING_INLINE=16 (constant)
Contoh:
```tsx
// List screen (default 100px)
<OS_Wrapper listData={data} renderItem={renderItem} />
// Form screen (explicit 250px)
<OS_Wrapper enableKeyboardHandling contentPaddingBottom={250}>
<FormWithTextInput />
</OS_Wrapper>
```
- PADDING_INLINE usage pattern - User preference:
- PADDING_INLINE (16px) TIDAK selalu diperlukan
- User remove PADDING_INLINE dari Profile screens karena mempersempit box tampilan
- Decision: Tambahkan PADDING_INLINE HANYA jika diperlukan per-screen, jangan default
- User akan review dan tambahkan sendiri jika perlu
Profile screens: PADDING_INLINE dihapus dari edit.tsx dan create.tsx

View File

@@ -3,10 +3,10 @@ import {
BaseBox, BaseBox,
ButtonCustom, ButtonCustom,
CenterCustom, CenterCustom,
OS_Wrapper,
StackCustom, StackCustom,
TextCustom, TextCustom,
TextInputCustom, TextInputCustom,
ViewWrapper,
} from "@/components"; } from "@/components";
import { useAuth } from "@/hooks/use-auth"; import { useAuth } from "@/hooks/use-auth";
import { apiDeleteUser } from "@/service/api-client/api-user"; import { apiDeleteUser } from "@/service/api-client/api-user";
@@ -68,7 +68,10 @@ export default function DeleteAccount() {
return ( return (
<> <>
<ViewWrapper> <OS_Wrapper
enableKeyboardHandling
contentPaddingBottom={250}
>
<StackCustom> <StackCustom>
<BaseBox> <BaseBox>
<StackCustom> <StackCustom>
@@ -105,7 +108,7 @@ export default function DeleteAccount() {
</StackCustom> </StackCustom>
</BaseBox> </BaseBox>
</StackCustom> </StackCustom>
</ViewWrapper> </OS_Wrapper>
</> </>
); );
} }

View File

@@ -3,13 +3,13 @@ import {
BadgeCustom, BadgeCustom,
ClickableCustom, ClickableCustom,
Divider, Divider,
OS_Wrapper,
SelectCustom, SelectCustom,
TextCustom, TextCustom,
} from "@/components"; } from "@/components";
import ListEmptyComponent from "@/components/_ShareComponent/ListEmptyComponent"; import ListEmptyComponent from "@/components/_ShareComponent/ListEmptyComponent";
import ListLoaderFooterComponent from "@/components/_ShareComponent/ListLoaderFooterComponent"; import ListLoaderFooterComponent from "@/components/_ShareComponent/ListLoaderFooterComponent";
import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent"; import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
import NewWrapper from "@/components/_ShareComponent/NewWrapper";
import { MainColor } from "@/constants/color-palet"; import { MainColor } from "@/constants/color-palet";
import { useAuth } from "@/hooks/use-auth"; import { useAuth } from "@/hooks/use-auth";
import { usePaginatedApi } from "@/hooks/use-paginated-api"; import { usePaginatedApi } from "@/hooks/use-paginated-api";
@@ -120,7 +120,7 @@ export default function ProfileBlockedList() {
return ( return (
<> <>
<NewWrapper <OS_Wrapper
// headerComponent={renderHeader()} // headerComponent={renderHeader()}
listData={listData} listData={listData}
renderItem={renderItem} renderItem={renderItem}

View File

@@ -5,7 +5,7 @@ import {
BoxButtonOnFooter, BoxButtonOnFooter,
BoxWithHeaderSection, BoxWithHeaderSection,
ButtonCustom, ButtonCustom,
NewWrapper, OS_Wrapper,
StackCustom, StackCustom,
TextCustom, TextCustom,
} from "@/components"; } from "@/components";
@@ -46,7 +46,7 @@ export default function ProfileDetailBlocked() {
return ( return (
<> <>
<NewWrapper <OS_Wrapper
footerComponent={ footerComponent={
<BoxButtonOnFooter> <BoxButtonOnFooter>
<ButtonCustom <ButtonCustom
@@ -86,7 +86,7 @@ export default function ProfileDetailBlocked() {
</TextCustom> </TextCustom>
</StackCustom> </StackCustom>
</BoxWithHeaderSection> </BoxWithHeaderSection>
</NewWrapper> </OS_Wrapper>
</> </>
); );
} }

View File

@@ -1,11 +1,12 @@
import { import {
ButtonCustom, ButtonCustom,
OS_Wrapper,
SelectCustom, SelectCustom,
StackCustom, StackCustom,
TextInputCustom, TextInputCustom,
ViewWrapper,
} from "@/components"; } from "@/components";
import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter"; import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
import { PADDING_INLINE } from "@/constants/constans-value";
import { apiProfile, apiUpdateProfile } from "@/service/api-client/api-profile"; import { apiProfile, apiUpdateProfile } from "@/service/api-client/api-profile";
import { IProfile } from "@/types/Type-Profile"; import { IProfile } from "@/types/Type-Profile";
import { router, useLocalSearchParams } from "expo-router"; import { router, useLocalSearchParams } from "expo-router";
@@ -70,7 +71,9 @@ export default function ProfileEdit() {
}; };
return ( return (
<ViewWrapper <OS_Wrapper
enableKeyboardHandling
contentPaddingBottom={250}
footerComponent={ footerComponent={
<BoxButtonOnFooter> <BoxButtonOnFooter>
<ButtonCustom isLoading={isLoading} onPress={handleUpdate}> <ButtonCustom isLoading={isLoading} onPress={handleUpdate}>
@@ -119,6 +122,6 @@ export default function ProfileEdit() {
}} }}
/> />
</StackCustom> </StackCustom>
</ViewWrapper> </OS_Wrapper>
); );
} }

View File

@@ -1,5 +1,5 @@
/* eslint-disable react-hooks/exhaustive-deps */ /* eslint-disable react-hooks/exhaustive-deps */
import { NewWrapper, StackCustom } from "@/components"; import { OS_Wrapper, StackCustom } from "@/components";
import AppHeader from "@/components/_ShareComponent/AppHeader"; import AppHeader from "@/components/_ShareComponent/AppHeader";
import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom"; import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
import LeftButtonCustom from "@/components/Button/BackButton"; import LeftButtonCustom from "@/components/Button/BackButton";
@@ -119,7 +119,7 @@ export default function Profile() {
}} }}
/> />
{/* Main View */} {/* Main View */}
<NewWrapper <OS_Wrapper
refreshControl={ refreshControl={
<RefreshControl <RefreshControl
refreshing={refreshing} refreshing={refreshing}
@@ -144,7 +144,7 @@ export default function Profile() {
/> />
</> </>
)} )}
</NewWrapper> </OS_Wrapper>
{/* Drawer Komponen Eksternal */} {/* Drawer Komponen Eksternal */}
<DrawerCustom <DrawerCustom

View File

@@ -3,8 +3,8 @@ import {
BoxButtonOnFooter, BoxButtonOnFooter,
ButtonCenteredOnly, ButtonCenteredOnly,
ButtonCustom, ButtonCustom,
OS_Wrapper,
} from "@/components"; } from "@/components";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import API_STRORAGE from "@/constants/base-url-api-strorage"; import API_STRORAGE from "@/constants/base-url-api-strorage";
import DIRECTORY_ID from "@/constants/directory-id"; import DIRECTORY_ID from "@/constants/directory-id";
import DUMMY_IMAGE from "@/constants/dummy-image-value"; import DUMMY_IMAGE from "@/constants/dummy-image-value";
@@ -127,7 +127,7 @@ export default function UpdateBackgroundProfile() {
); );
return ( return (
<ViewWrapper footerComponent={buttonFooter}> <OS_Wrapper footerComponent={buttonFooter}>
<BaseBox <BaseBox
style={{ alignItems: "center", justifyContent: "center", height: 250 }} style={{ alignItems: "center", justifyContent: "center", height: 250 }}
> >
@@ -144,6 +144,6 @@ export default function UpdateBackgroundProfile() {
> >
Update Update
</ButtonCenteredOnly> </ButtonCenteredOnly>
</ViewWrapper> </OS_Wrapper>
); );
} }

View File

@@ -3,8 +3,8 @@ import {
BoxButtonOnFooter, BoxButtonOnFooter,
ButtonCenteredOnly, ButtonCenteredOnly,
ButtonCustom, ButtonCustom,
OS_Wrapper,
} from "@/components"; } from "@/components";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import API_STRORAGE from "@/constants/base-url-api-strorage"; import API_STRORAGE from "@/constants/base-url-api-strorage";
import DIRECTORY_ID from "@/constants/directory-id"; import DIRECTORY_ID from "@/constants/directory-id";
import DUMMY_IMAGE from "@/constants/dummy-image-value"; import DUMMY_IMAGE from "@/constants/dummy-image-value";
@@ -125,7 +125,7 @@ export default function UpdatePhotoProfile() {
); );
return ( return (
<ViewWrapper footerComponent={buttonFooter}> <OS_Wrapper footerComponent={buttonFooter}>
<BaseBox <BaseBox
style={{ alignItems: "center", justifyContent: "center", height: 250 }} style={{ alignItems: "center", justifyContent: "center", height: 250 }}
> >
@@ -143,6 +143,6 @@ export default function UpdatePhotoProfile() {
> >
Upload Upload
</ButtonCenteredOnly> </ButtonCenteredOnly>
</ViewWrapper> </OS_Wrapper>
); );
} }

View File

@@ -2,16 +2,17 @@ import {
BaseBox, BaseBox,
ButtonCenteredOnly, ButtonCenteredOnly,
ButtonCustom, ButtonCustom,
OS_Wrapper,
SelectCustom, SelectCustom,
Spacing, Spacing,
StackCustom, StackCustom,
TextInputCustom, TextInputCustom,
ViewWrapper,
} from "@/components"; } from "@/components";
import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter"; import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
import InformationBox from "@/components/Box/InformationBox"; import InformationBox from "@/components/Box/InformationBox";
import DIRECTORY_ID from "@/constants/directory-id"; import DIRECTORY_ID from "@/constants/directory-id";
import DUMMY_IMAGE from "@/constants/dummy-image-value"; import DUMMY_IMAGE from "@/constants/dummy-image-value";
import { PADDING_INLINE } from "@/constants/constans-value";
import { useAuth } from "@/hooks/use-auth"; import { useAuth } from "@/hooks/use-auth";
import { apiCreateProfile } from "@/service/api-client/api-profile"; import { apiCreateProfile } from "@/service/api-client/api-profile";
import { apiValidationEmail } from "@/service/api-client/api-validation"; import { apiValidationEmail } from "@/service/api-client/api-validation";
@@ -155,7 +156,11 @@ export default function CreateProfile() {
); );
return ( return (
<ViewWrapper footerComponent={footerComponent}> <OS_Wrapper
enableKeyboardHandling
contentPaddingBottom={250}
footerComponent={footerComponent}
>
<StackCustom> <StackCustom>
<InformationBox text="Upload foto profile anda." /> <InformationBox text="Upload foto profile anda." />
<View style={{ alignItems: "center" }}> <View style={{ alignItems: "center" }}>
@@ -241,6 +246,6 @@ export default function CreateProfile() {
/> />
<Spacing /> <Spacing />
</StackCustom> </StackCustom>
</ViewWrapper> </OS_Wrapper>
); );
} }

View File

@@ -3,7 +3,7 @@ import {
BoxButtonOnFooter, BoxButtonOnFooter,
ButtonCustom, ButtonCustom,
InformationBox, InformationBox,
NewWrapper, OS_Wrapper,
StackCustom StackCustom
} from "@/components"; } from "@/components";
import { ICON_SIZE_BUTTON } from "@/constants/constans-value"; import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
@@ -82,7 +82,7 @@ export default function WaitingRoom() {
return ( return (
<> <>
<NewWrapper <OS_Wrapper
footerComponent={logoutButton()} footerComponent={logoutButton()}
refreshControl={ refreshControl={
<RefreshControl refreshing={isLoading} onRefresh={handleCheck} /> <RefreshControl refreshing={isLoading} onRefresh={handleCheck} />
@@ -103,7 +103,7 @@ Silakan tunggu beberapa saat. Untuk memperbarui status, tarik layar ke bawah."
Check Check
</ButtonCenteredOnly> */} </ButtonCenteredOnly> */}
</StackCustom> </StackCustom>
</NewWrapper> </OS_Wrapper>
</> </>
); );
} }

View File

@@ -195,6 +195,7 @@ export function AndroidWrapper(props: AndroidWrapperProps) {
ref={keyboardForm?.scrollViewRef} ref={keyboardForm?.scrollViewRef}
onScroll={keyboardForm?.handleScroll} onScroll={keyboardForm?.handleScroll}
scrollEventThrottle={16} scrollEventThrottle={16}
refreshControl={refreshControl}
style={{ flex: 1 }} style={{ flex: 1 }}
contentContainerStyle={{ contentContainerStyle={{
flexGrow: 1, flexGrow: 1,

View File

@@ -32,8 +32,8 @@ refreshControl?: RefreshControl;
// Keyboard handling (Android only - iOS mengabaikan) // Keyboard handling (Android only - iOS mengabaikan)
enableKeyboardHandling?: boolean; // Default: false enableKeyboardHandling?: boolean; // Default: false
keyboardScrollOffset?: number; // Default: 100 keyboardScrollOffset?: number; // Default: 100
contentPaddingBottom?: number; // Default: 80 contentPaddingBottom?: number; // Default: 100
contentPadding?: number; // Default: 16 contentPadding?: number; // Default: 0
``` ```
### 2. **IOSWrapper** / **AndroidWrapper** (Direct Usage) ### 2. **IOSWrapper** / **AndroidWrapper** (Direct Usage)
@@ -68,9 +68,7 @@ import { OS_Wrapper } from "@/components";
// Form mode (with keyboard handling - Android only) // Form mode (with keyboard handling - Android only)
<OS_Wrapper <OS_Wrapper
enableKeyboardHandling enableKeyboardHandling
keyboardScrollOffset={150} contentPaddingBottom={250} // ← HANYA untuk screens dengan TextInput
contentPaddingBottom={100}
footerComponent={<SubmitButton />}
> >
<FormContent /> <FormContent />
</OS_Wrapper> </OS_Wrapper>
@@ -78,21 +76,24 @@ import { OS_Wrapper } from "@/components";
## 🚀 Implementation Status ## 🚀 Implementation Status
### ✅ Phase 1: Job Screens - COMPLETED (2026-04-06) ### ✅ Phase 1: Job Screens - COMPLETED (2026-04-06 to 2026-04-07)
**Files migrated: 8** **Files migrated: 9**
#### Job List Screens (OS_Wrapper): #### Job List Screens (OS_Wrapper):
-`screens/Job/ScreenBeranda.tsx` - ViewWrapper → OS_Wrapper -`screens/Job/ScreenBeranda.tsx` - ViewWrapper → OS_Wrapper + PADDING_INLINE
-`screens/Job/ScreenBeranda2.tsx` - NewWrapper_V2 → OS_Wrapper -`screens/Job/ScreenBeranda2.tsx` - NewWrapper_V2 → OS_Wrapper + PADDING_INLINE
-`screens/Job/ScreenArchive.tsx` - ViewWrapper → OS_Wrapper -`screens/Job/ScreenArchive.tsx` - ViewWrapper → OS_Wrapper + PADDING_INLINE
-`screens/Job/ScreenArchive2.tsx` - NewWrapper_V2 → OS_Wrapper -`screens/Job/ScreenArchive2.tsx` - NewWrapper_V2 → OS_Wrapper + PADDING_INLINE
-`screens/Job/MainViewStatus.tsx` - ViewWrapper → OS_Wrapper -`screens/Job/MainViewStatus.tsx` - ViewWrapper → OS_Wrapper + PADDING_INLINE
-`screens/Job/MainViewStatus2.tsx` - NewWrapper_V2 → OS_Wrapper -`screens/Job/MainViewStatus2.tsx` - NewWrapper_V2 → OS_Wrapper + PADDING_INLINE
#### Job Form Screens (OS_Wrapper with keyboard handling): #### Job Form Screens (OS_Wrapper with keyboard handling):
-`screens/Job/ScreenJobCreate.tsx` - NewWrapper_V2 → OS_Wrapper + enableKeyboardHandling -`screens/Job/ScreenJobCreate.tsx` - NewWrapper_V2 → OS_Wrapper + enableKeyboardHandling + contentPaddingBottom={250}
-`screens/Job/ScreenJobEdit.tsx` - NewWrapper_V2 → OS_Wrapper + enableKeyboardHandling -`screens/Job/ScreenJobEdit.tsx` - NewWrapper_V2 → OS_Wrapper + enableKeyboardHandling + contentPaddingBottom={250}
#### Job Detail Screen:
-`app/(application)/(user)/job/[id]/[status]/detail.tsx` - NewWrapper_V2 → OS_Wrapper
**Testing Status:** **Testing Status:**
- ✅ TypeScript: No errors - ✅ TypeScript: No errors
@@ -101,44 +102,50 @@ import { OS_Wrapper } from "@/components";
- ✅ Android Testing: Complete ✅ - ✅ Android Testing: Complete ✅
**Implementation Notes:** **Implementation Notes:**
- **contentPaddingBottom pattern**:
- Default: `100` (list screens)
- Forms: `250` (screens with TextInput/TextArea)
- Override per-screen sesuai kebutuhan
- **PADDING_INLINE constant**: `16px` untuk konsisten padding horizontal
- Semua form screens menggunakan `enableKeyboardHandling` untuk keyboard auto-scroll di Android - Semua form screens menggunakan `enableKeyboardHandling` untuk keyboard auto-scroll di Android
- Semua list screens menggunakan pagination dengan `onEndReached` - Semua list screens menggunakan pagination dengan `onEndReached`
- Floating button dan sticky header berfungsi dengan baik - Floating button dan sticky header berfungsi dengan baik
- Footer component tetap di posisi bawah - Footer component tetap di posisi bawah
- Tap anywhere untuk dismiss keyboard sudah implementasi
### ⏳ Phase 2: Other User Screens (Priority: HIGH) ### ⏳ Phase 2: Other User Screens (Priority: HIGH)
#### Profile Screens: #### Profile Screens:
- [ ] `screens/Profile/ScreenProfile.tsx` - [ ] `screens/Profile/ScreenProfile.tsx`
- [ ] `screens/Profile/ScreenProfileEdit.tsx` → pakai `enableKeyboardHandling` - [ ] `screens/Profile/ScreenProfileEdit.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
- [ ] `screens/Profile/ScreenProfileCreate.tsx` → pakai `enableKeyboardHandling` - [ ] `screens/Profile/ScreenProfileCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
#### Forum/Discussion: #### Forum/Discussion:
- [ ] `screens/Forum/ScreenForum.tsx` - [ ] `screens/Forum/ScreenForum.tsx`
- [ ] `screens/Forum/ScreenForumDetail.tsx` - [ ] `screens/Forum/ScreenForumDetail.tsx`
- [ ] `screens/Forum/ScreenForumCreate.tsx` → pakai `enableKeyboardHandling` - [ ] `screens/Forum/ScreenForumCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
#### Portfolio: #### Portfolio:
- [ ] `screens/Portfolio/ScreenPortfolio.tsx` - [ ] `screens/Portfolio/ScreenPortfolio.tsx`
- [ ] `screens/Portfolio/ScreenPortfolioCreate.tsx` → pakai `enableKeyboardHandling` - [ ] `screens/Portfolio/ScreenPortfolioCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
- [ ] `screens/Portfolio/ScreenPortfolioEdit.tsx` → pakai `enableKeyboardHandling` - [ ] `screens/Portfolio/ScreenPortfolioEdit.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
### ⏳ Phase 3: Admin Screens (Priority: MEDIUM) ### ⏳ Phase 3: Admin Screens (Priority: MEDIUM)
#### Event Management: #### Event Management:
- [ ] `screens/Admin/Event/ScreenEventList.tsx` - [ ] `screens/Admin/Event/ScreenEventList.tsx`
- [ ] `screens/Admin/Event/ScreenEventCreate.tsx` → pakai `enableKeyboardHandling` - [ ] `screens/Admin/Event/ScreenEventCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
- [ ] `screens/Admin/Event/ScreenEventEdit.tsx` → pakai `enableKeyboardHandling` - [ ] `screens/Admin/Event/ScreenEventEdit.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
#### Voting Management: #### Voting Management:
- [ ] `screens/Admin/Voting/ScreenVotingList.tsx` - [ ] `screens/Admin/Voting/ScreenVotingList.tsx`
- [ ] `screens/Admin/Voting/ScreenVotingCreate.tsx` → pakai `enableKeyboardHandling` - [ ] `screens/Admin/Voting/ScreenVotingCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
- [ ] `screens/Admin/Voting/ScreenVotingEdit.tsx` → pakai `enableKeyboardHandling` - [ ] `screens/Admin/Voting/ScreenVotingEdit.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
#### Donation Management: #### Donation Management:
- [ ] `screens/Admin/Donation/ScreenDonationList.tsx` - [ ] `screens/Admin/Donation/ScreenDonationList.tsx`
- [ ] `screens/Admin/Donation/ScreenDonationCreate.tsx` → pakai `enableKeyboardHandling` - [ ] `screens/Admin/Donation/ScreenDonationCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
- [ ] `screens/Admin/Donation/ScreenDonationEdit.tsx` → pakai `enableKeyboardHandling` - [ ] `screens/Admin/Donation/ScreenDonationEdit.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
### ⏳ Phase 4: Other Screens (Priority: LOW) ### ⏳ Phase 4: Other Screens (Priority: LOW)
- [ ] `screens/Investasi/` - Investment screens - [ ] `screens/Investasi/` - Investment screens
@@ -172,6 +179,8 @@ Setiap screen yang sudah di-migrate, test:
- [ ] Floating button muncul (jika ada `floatingButton`) - [ ] Floating button muncul (jika ada `floatingButton`)
- [ ] Loading skeleton muncul saat pagination - [ ] Loading skeleton muncul saat pagination
- [ ] Empty state muncul saat data kosong - [ ] Empty state muncul saat data kosong
- [ ] Tap anywhere dismiss keyboard berfungsi
- [ ] contentPaddingBottom: 100 (list) / 250 (form) sesuai kebutuhan
## 📌 Notes ## 📌 Notes
@@ -182,6 +191,7 @@ Setiap screen yang sudah di-migrate, test:
<OS_Wrapper <OS_Wrapper
listData={pagination.listData} listData={pagination.listData}
renderItem={renderItem} renderItem={renderItem}
contentPadding={PADDING_INLINE}
ListEmptyComponent={ListEmptyComponent} ListEmptyComponent={ListEmptyComponent}
ListFooterComponent={ListFooterComponent} ListFooterComponent={ListFooterComponent}
onEndReached={pagination.loadMore} onEndReached={pagination.loadMore}
@@ -199,6 +209,7 @@ Setiap screen yang sudah di-migrate, test:
<OS_Wrapper <OS_Wrapper
headerComponent={<HeaderSection />} headerComponent={<HeaderSection />}
footerComponent={<FooterSection />} footerComponent={<FooterSection />}
contentPadding={PADDING_INLINE}
> >
<YourContent /> <YourContent />
</OS_Wrapper> </OS_Wrapper>
@@ -208,8 +219,8 @@ Setiap screen yang sudah di-migrate, test:
```tsx ```tsx
<OS_Wrapper <OS_Wrapper
enableKeyboardHandling enableKeyboardHandling
keyboardScrollOffset={150} contentPaddingBottom={250} // ← HANYA untuk screens dengan TextInput
contentPaddingBottom={100} contentPadding={PADDING_INLINE}
footerComponent={ footerComponent={
<BoxButtonOnFooter> <BoxButtonOnFooter>
<ButtonCustom onPress={handleSubmit}>Submit</ButtonCustom> <ButtonCustom onPress={handleSubmit}>Submit</ButtonCustom>
@@ -235,10 +246,12 @@ import NewWrapper from "@/components/_ShareComponent/NewWrapper";
// NEW // NEW
import { OS_Wrapper } from "@/components"; import { OS_Wrapper } from "@/components";
import { PADDING_INLINE } from "@/constants/constans-value";
<OS_Wrapper <OS_Wrapper
listData={data} listData={data}
renderItem={renderItem} renderItem={renderItem}
contentPadding={PADDING_INLINE}
headerComponent={header} headerComponent={header}
footerComponent={footer} footerComponent={footer}
/> />
@@ -260,7 +273,7 @@ import { OS_Wrapper } from "@/components";
<OS_Wrapper <OS_Wrapper
enableKeyboardHandling enableKeyboardHandling
keyboardScrollOffset={150} contentPaddingBottom={250} // ← Explicit untuk form screens
> >
<FormContent /> <FormContent />
</OS_Wrapper> </OS_Wrapper>
@@ -272,10 +285,10 @@ import { OS_Wrapper } from "@/components";
**Solution**: Pastikan tidak ada custom padding yang overriding default behavior. Jika masih bermasalah, cek apakah `contentPadding` atau `contentPaddingBottom` terlalu besar. **Solution**: Pastikan tidak ada custom padding yang overriding default behavior. Jika masih bermasalah, cek apakah `contentPadding` atau `contentPaddingBottom` terlalu besar.
### Issue: Keyboard menutupi input di Android ### Issue: Keyboard menutupi input di Android
**Solution**: Pastikan pakai `OS_Wrapper` dengan `enableKeyboardHandling={true}`. Adjust `keyboardScrollOffset` jika perlu. **Solution**: Pastikan pakai `OS_Wrapper` dengan `enableKeyboardHandling={true}` dan `contentPaddingBottom={250}` untuk form screens.
### Issue: Footer terlalu jauh dari bottom ### Issue: Footer terlalu jauh dari bottom
**Solution**: Kurangi `contentPaddingBottom` (default: 80). Untuk list screen tanpa navigation bar overlay, bisa set ke 0. **Solution**: Kurangi `contentPaddingBottom` (default: 100 untuk list). Untuk form screens tetap 250.
### Issue: White space di bottom saat keyboard close (Android) ### Issue: White space di bottom saat keyboard close (Android)
**Solution**: Ini sudah di-fix di AndroidWrapper. Pastikan screen pakai OS_Wrapper, bukan NewWrapper langsung. **Solution**: Ini sudah di-fix di AndroidWrapper. Pastikan screen pakai OS_Wrapper, bukan NewWrapper langsung.
@@ -284,11 +297,11 @@ import { OS_Wrapper } from "@/components";
| Phase | Total Files | Migrated | Testing | Status | | Phase | Total Files | Migrated | Testing | Status |
|-------|-------------|----------|---------|--------| |-------|-------------|----------|---------|--------|
| Phase 1 (Job) | 8 | 8 | ✅ Complete | ✅ Complete | | Phase 1 (Job) | 9 | 9 | ✅ Complete | ✅ Complete |
| Phase 2 (User) | TBD | 0 | 0 | ⏳ Pending | | Phase 2 (User) | TBD | 0 | 0 | ⏳ Pending |
| Phase 3 (Admin) | TBD | 0 | 0 | ⏳ Pending | | Phase 3 (Admin) | TBD | 0 | 0 | ⏳ Pending |
| Phase 4 (Other) | TBD | 0 | 0 | ⏳ Pending | | Phase 4 (Other) | TBD | 0 | 0 | ⏳ Pending |
| **Total** | **8+** | **8** | **8** | **100% (Phase 1)** | | **Total** | **9+** | **9** | **9** | **100% (Phase 1)** |
## 🔄 Rollback Plan ## 🔄 Rollback Plan
@@ -302,6 +315,6 @@ Jika ada issue yang tidak bisa di-fix dalam 1 jam:
**Co-authored-by**: Qwen-Coder <qwen-coder@alibabacloud.com> **Co-authored-by**: Qwen-Coder <qwen-coder@alibabacloud.com>
**Created**: 2026-04-06 **Created**: 2026-04-06
**Last Updated**: 2026-04-06 **Last Updated**: 2026-04-08
**Status**: Phase 1 (Job Screens) Complete ✅ **Status**: Phase 1 (Job Screens) Complete ✅
**Next**: Phase 2 - Other User Screens **Next**: Phase 2 - Other User Screens (Profile, Forum, Portfolio)