- Reduce default contentPaddingBottom from 250 to 100
- Better for list screens (less empty space)
- Only form screens with TextInput need 250px
- Set OS_ANDROID_PADDING_TOP to 6px
- More compact tabs on Android
- Update form screens (Create/Edit):
- Explicit contentPaddingBottom={250}
- Only screens with TextInput use larger spacing
- Remove unnecessary PADDING_INLINE from detail screens
- Detail screen doesn't need inline padding
Pattern:
- Default: contentPaddingBottom=100 (list screens)
- Forms: contentPaddingBottom=250 (screens with TextInput)
- contentPadding=0 (per-screen control)
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
- 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
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>
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
- Implement pagination on investment screens (ScreenMyHolding, ScreenInvestor, ScreenRecapOfNews, ScreenListOfNews)
- Implement pagination on donation screens (ScreenStatus)
- Update API functions to support pagination with page parameter (apiInvestmentGetAll, apiInvestmentGetInvestorById, apiInvestmentGetNews, apiDonationGetByStatus)
- Replace ViewWrapper with NewWrapper for better UI experience
- Update app directory files to use new modular components from screens directory
- Add pull-to-refresh and infinite scroll functionality
- Improve performance by loading data incrementally
- Apply NewWrapper to donation create and create-story screens
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
1. Pembuatan dan Pembaruan Komponen Layar Investasi dengan Sistem Pagination
ScreenMyHolding.tsx
- Diperbarui dari sistem loading data statis ke sistem pagination dinamis
- Menggunakan hook usePagination untuk manajemen data
- Mengganti ViewWrapper dengan NewWrapper untuk tampilan yang lebih modern
- Menambahkan fitur pull-to-refresh dan infinite scroll
- Menggunakan helper pagination dari createPaginationComponents
ScreenInvestor.tsx
- Dibuat baru dengan sistem pagination
- Menggunakan hook usePagination untuk manajemen data
- Menggunakan NewWrapper sebagai komponen dasar
- Menambahkan fitur pull-to-refresh dan infinite scroll
ScreenRecapOfNews.tsx
- Dibuat baru dengan sistem pagination
- Menggunakan hook usePagination untuk manajemen data
- Menggunakan NewWrapper sebagai komponen dasar
- Menambahkan fitur pull-to-refresh dan infinite scroll
ScreenListOfNews.tsx
- Dibuat baru dengan sistem pagination
- Menggunakan hook usePagination untuk manajemen data
- Menggunakan NewWrapper sebagai komponen dasar
- Menambahkan fitur pull-to-refresh dan infinite scroll
2. Perubahan pada Fungsi-Fungsi API untuk Mendukung Pagination
apiInvestmentGetAll
- Sudah mendukung parameter page dengan default "1"
apiInvestmentGetInvestorById
- Ditambahkan parameter page dengan default "1"
- Memungkinkan pengambilan data investor secara bertahap
apiInvestmentGetNews
- Ditambahkan parameter page dengan default "1"
- Memungkinkan pengambilan data berita secara bertahap
3. Pembaruan File-File di Direktori app/ untuk Menggunakan Komponen-Komponen Baru
app/(application)/(user)/investment/[id]/investor.tsx
- Diperbarui untuk menggunakan komponen Investment_ScreenInvestor
- Menghilangkan logika lokal dan menggantinya dengan komponen modular
app/(application)/(user)/investment/[id]/(news)/recap-of-news.tsx
- Diperbarui untuk menggunakan komponen Investment_ScreenRecapOfNews
- Menghilangkan logika lokal dan menggantinya dengan komponen modular
app/(application)/(user)/investment/[id]/(news)/list-of-news.tsx
- Diperbarui untuk menggunakan komponen Investment_ScreenListOfNews
- Menghilangkan logika lokal dan menggantinya dengan komponen modular
4. Implementasi Sistem Pagination
usePagination Hook
- Digunakan secara konsisten di semua komponen layar investasi
- Menyediakan fitur load more dan refresh
- Mengelola state loading, refreshing, dan data
NewWrapper Component
- Digunakan sebagai pengganti ViewWrapper
- Menyediakan dukungan bawaan untuk FlatList
- Menyediakan dukungan untuk refreshControl dan onEndReached
Pagination Helpers
- Menggunakan createPaginationComponents untuk menghasilkan komponen-komponen pagination
- Menyediakan skeleton loading saat data sedang dimuat
- Menyediakan pesan kosong saat tidak ada data
5. Manfaat dari Perubahan Ini
1. Performa Lebih Baik: Dengan pagination, hanya sejumlah kecil data yang dimuat pada satu waktu, meningkatkan
performa aplikasi
2. Pengalaman Pengguna Lebih Baik: Fitur pull-to-refresh dan infinite scroll membuat navigasi lebih intuitif
3. Kode Lebih Modular: Komponen-komponen baru dapat digunakan kembali dan dipelihara lebih mudah
4. Struktur Kode Lebih Rapi: Pemisahan antara logika tampilan dan logika data membuat kode lebih terorganisir
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
