- Migrate ScreenJobCreate.tsx to NewWrapper_V2
- Migrate ScreenJobEdit.tsx to NewWrapper_V2
- Add NewWrapper_V2 component with auto-scroll keyboard handling
- Add useKeyboardForm hook for keyboard management
- Add FormWrapper component for forms
- Create ScreenJobEdit.tsx from edit route (separation of concerns)
- Add documentation for keyboard implementation
- Add TASK-004 migration plan
- Fix: Footer width 100% with safe positioning
- Fix: Content padding bottom 80px for navigation bar
- Fix: Auto-scroll to focused input
- Fix: No white area when keyboard close
- Fix: Footer not raised after keyboard close
Phase 1 completed: Job screens migrated
### No Issue
Problem:
- Footer component tertutup atau scroll melebihi layar
- Tabs tidak bisa diklik karena footer floating
- Height OS_HEIGHT tidak konsisten di berbagai device
Solution:
✅ Footer menggunakan position: absolute untuk stay di bawah
✅ Konten ScrollView/FlatList mendapat paddingBottom: OS_HEIGHT
✅ SafeAreaView hanya untuk area aman, bukan height control
✅ Footer tetap visible di semua ukuran layar
Changes:
- Add styles.footerContainer dengan position: absolute
- Add paddingBottom ke contentContainerStyle (ScrollView & FlatList)
- Remove height: OS_HEIGHT dari SafeAreaView
- Footer stay di bottom dengan proper safe area handling
Result:
- Footer selalu terlihat di bawah layar
- Konten tidak tertutup footer (ada padding)
- Tabs bisa diklik dengan baik
- Konsisten di iOS & Android
- Respect safe area insets
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
Changes:
- Replace react-native-international-phone-number with PhoneInputCustom
- Remove ICountry dependency, use CountryData from constants
- Add phone number state management
- Implement country detection from existing phone number
- Auto-detect country based on calling code on load
- Improve phone number formatting logic
Features Applied:
✅ NO emoji flags - only calling codes (+62, +65, etc)
✅ Clean, professional UI
✅ Modal country picker with search
✅ Auto-detect country from saved phone number
✅ Real-time phone number formatting
✅ Auto-update country code on change
✅ Consistent with LoginView & ScreenPortofolioCreate
Phone Detection Logic:
- Load existing phone number from API
- Detect country by matching calling code
- Extract phone number without country code for display
- Set detected country for country picker
- Re-format on country change
UI:
- Phone Input: [+62 ⌄ | xxx-xxx-xxx]
- Country Picker: Modal with search
- Display: Country name + calling code only
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
Changes:
- Replace react-native-international-phone-number with PhoneInputCustom
- Remove ICountry dependency, use CountryData from constants
- Update state management (inputValue → phoneNumber)
- Improve phone number formatting logic
- Add handleCountryChange for better country switching
Features Applied:
✅ NO emoji flags - only calling codes (+62, +65, etc)
✅ Clean, professional UI
✅ Modal country picker with search
✅ Real-time phone number formatting
✅ Auto-update country code on change
✅ Consistent with LoginView implementation
Phone Input Logic:
- Format on every phone change
- Re-format when country changes
- Remove duplicate country codes
- Remove leading zeros
- Store E.164 format in API data
UI:
- Phone Input: [+62 ⌄ | xxx-xxx-xxx]
- Country Picker: Modal with search
- Display: Country name + calling code only
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
Changes:
- Replace react-native-international-phone-number with PhoneInputCustom
- Remove dependency on ICountry, use CountryData from constants
- Add KeyboardAvoidingView for better iOS keyboard handling
- Improve validation with libphonenumber-js
- Add proper phone number formatting
- Update state management (inputValue → phoneNumber)
Features Applied:
✅ NO emoji flags - only calling codes (+62, +65, etc)
✅ Clean, professional UI
✅ Modal country picker with search
✅ Better keyboard handling on iOS
✅ Real-time validation with libphonenumber-js
✅ Auto-formatting for international numbers
✅ Reusable component
UI:
- Phone Input: [+62 ⌄ | 812-3456-7890]
- Country Picker: Modal with search
- Display: Country name + calling code only
Validation:
- Check phone number length
- Validate with libphonenumber-js
- Format to E.164 on login
- Error handling with Toast
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
New Components:
- PhoneInputCustom: Reusable phone input without emoji flags
- constants/countries.ts: Country data with calling codes only
Features:
✅ NO emoji flags - only country name + calling code (+62, +65, etc)
✅ Clean, professional UI
✅ Modal country picker with search
✅ 15 countries supported
✅ Helper functions: getCountryByCallingCode, getCountryByCode, searchCountries
✅ Fully typed with TypeScript
✅ Reusable across the app
✅ Maximum compatibility (no emoji rendering issues)
UI Design:
- Phone Input: [+62 ⌄ | 812-3456-7890]
- Country Picker: Modal with search
- Display: Country name + calling code only
Usage:
import { PhoneInputCustom } from '@/components';
import { DEFAULT_COUNTRY } from '@/constants/countries';
<PhoneInputCustom
value={phoneNumber}
onChangePhoneNumber={setPhoneNumber}
selectedCountry={selectedCountry}
onChangeCountry={setSelectedCountry}
/>
Benefits:
✅ Works on ALL iOS versions (no emoji issues)
✅ Consistent across all platforms
✅ Faster render (no emoji/image loading)
✅ Cleaner code structure
✅ Easy to maintain
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
- Add QR code toggle for HTTPS/Custom Scheme links
- Add Universal Links (iOS) and App Links (Android) support
- Create deep link route handler with platform detection
- Add .well-known files for domain verification
- Fix Content-Type headers for apple-app-site-association
- Add environment configuration for staging & production
- Add comprehensive testing documentation
Testing:
- QR scan → Safari → App switch working ✅
- Platform detection working ✅
- Auto redirect to custom scheme working ✅
- Web fallback JSON response working ✅
### No Issue
Deskripsi:
Menambahkan halaman detail event pada admin panel dengan status parameter
Menambahkan beberapa komponen UI untuk menampilkan detail event, drawer informasi, dan QR Code
Update konfigurasi aplikasi dan iOS project
Perbaikan pada halaman verifikasi authentication
Update dokumentasi prompt untuk Qwen
File yang diubah:
Modified
app.config.js
app/(application)/admin/event/[id]/[status]/index.tsx
docs/prompt-for-qwen-code.md
ios/HIPMIBadungConnect.xcodeproj/project.pbxproj
ios/HIPMIBadungConnect/Info.plist
screens/Authentication/VerificationView.tsx
New Admin Event Components
screens/Admin/Event/BoxEventDetail.tsx
screens/Admin/Event/EventDetailDrawer.tsx
screens/Admin/Event/EventDetailQRCode.tsx
screens/Admin/Event/ScreenEventDetail.tsx
### No Issue
Kami telah melakukan serangkaian perubahan pada file app/(application)/admin/event/[id]/[status]/index.tsx
untuk memperbaiki error dan meningkatkan fungsionalitas aplikasi. Berikut adalah perubahan-perubahan yang
telah dilakukan:
1. Perbaikan Fungsi Download QR Code
- Mengganti implementasi fungsi downloadQRCode yang sebelumnya menggunakan modul native
(react-native-view-shot dan @react-native-camera-roll/camera-roll) yang menyebabkan error
- Mengganti dengan implementasi sederhana yang menampilkan pesan bahwa fitur sedang dalam pengembangan
- Menambahkan pengecekan platform untuk memastikan fitur hanya berjalan di platform yang didukung (non-web)
2. Pembersihan Kode
- Menghapus penggunaan useRef karena tidak lagi diperlukan setelah mengganti implementasi
- Menghapus komponen View yang digunakan sebagai referensi karena tidak lagi diperlukan
- Menyederhanakan struktur komponen QR code
3. Perbaikan Tampilan
- Menyesuaikan tampilan tombol download agar tetap muncul meskipun QR code sedang dimuat
- Memastikan bahwa tombol download QR tetap terlihat dan fungsional
4. Penanganan Error
- Menambahkan penanganan error yang lebih baik untuk mencegah crash aplikasi
- Mengganti implementasi yang menyebabkan error Invariant Violation terkait modul native yang tidak terdaftar
Tujuan dari Perubahan Ini
1. Mengatasi Error Runtime: Mengatasi error Invariant Violation: TurboModuleRegistry.getEnforcing(...):
'RNViewShot' could not be found dan error terkait modul native lainnya
2. Meningkatkan Stabilitas Aplikasi: Memastikan bahwa aplikasi tidak mengalami crash akibat modul yang tidak
terdaftar
3. Menyederhanakan Fungsionalitas: Menyediakan implementasi sementara untuk fitur download QR code sampai
konfigurasi native module selesai
4. Meningkatkan Pengalaman Pengguna: Memastikan bahwa antarmuka tetap responsif dan memberikan umpan balik yang
jelas kepada pengguna
File yang Terpengaruh
- app/(application)/admin/event/[id]/[status]/index.tsx
### No Issue
1. Penambahan Pagination pada Fitur Admin Job
- Menerapkan sistem pagination menggunakan hook usePagination dari hooks/use-pagination.tsx
- Mengintegrasikan komponen-komponen pagination dari helpers/paginationHelpers.tsx
- Menambahkan dukungan infinite scroll dan pull-to-refresh
- Menambahkan loading state, skeleton loader, dan empty state
2. Pembaruan Fungsi API
- Memperbarui fungsi apiAdminJob di service/api-admin/api-admin-job.ts untuk mendukung parameter
pagination
- Menambahkan parameter page dengan nilai default 1
3. Modularisasi Kode
- Memindahkan komponen AdminJobStatus dari app/(application)/admin/job/[status]/status.tsx ke
screens/Admin/Job/ScreenJobStatus.tsx
- Mengganti ViewWrapper dengan NewWrapper untuk tampilan yang lebih fleksibel
- Membuat komponen baru BoxStatusJob.tsx untuk memisahkan logika tampilan item pekerjaan
- Menggunakan komponen BoxStatusJob di dalam ScreenJobStatus untuk menampilkan daftar pekerjaan
4. Perbaikan Struktur dan Organisasi Kode
- Mengorganisir ulang struktur folder untuk komponen admin job
- Memisahkan tanggung jawab antara komponen layar dan komponen item
- Mengoptimalkan performa dengan menggunakan useCallback dan useMemo
File-file yang Diubah
1. screens/Admin/Job/ScreenJobStatus.tsx - Implementasi utama dengan pagination
2. screens/Admin/Job/BoxStatusJob.tsx - Komponen baru untuk menampilkan item pekerjaan
3. service/api-admin/api-admin-job.ts - Penambahan parameter pagination
4. app/(application)/admin/job/[status]/status.tsx - Diperbarui untuk menggunakan komponen baru
### NO Issue
User Layout
- app/(application)/(user)/home.tsx
Components
- components/Drawer/NavbarMenu_V2.tsx
Docs
- docs/admin-folder-structure.md
### Issue: saat masuk lebih dalam ke sub menu indikator aktif di navbar hilang
Donasi. Berikut adalah ringkasan perubahan yang telah dilakukan:
1. Menerapkan sistem pagination pada berbagai komponen layar donasi:
- ScreenBeranda.tsx
- ScreenMyDonation.tsx
- ScreenRecapOfNews.tsx
- ScreenListOfNews.tsx
- ScreenListOfDonatur.tsx
- ScreenFundDisbursement.tsx
2. Memperbarui fungsi-fungsi API untuk mendukung parameter page:
- apiDonationGetAll
- apiDonationGetNewsById
- apiDonationListOfDonaturById
- apiDonationDisbursementOfFundsListById
3. Mengganti komponen wrapper lama (ViewWrapper) dengan NewWrapper yang mendukung sistem pagination
4. Membuat komponen layar terpisah untuk meningkatkan modularitas kode
5. Memperbaiki berbagai error yang terjadi, termasuk masalah dengan import komponen dan struktur JSX
### No Issue
