diff --git a/TASKS/crowdfunding-redesign.md b/TASKS/crowdfunding-redesign.md deleted file mode 100644 index f990431..0000000 --- a/TASKS/crowdfunding-redesign.md +++ /dev/null @@ -1,337 +0,0 @@ -# Crowdfunding Page Redesign - Modern UI Enhancement - -## 📋 Ringkasan Task -Redesign halaman Crowdfunding (`app/(application)/(user)/crowdfunding/index.tsx`) untuk menciptakan tampilan yang lebih modern, menarik, dan user-friendly dengan visual hierarchy yang lebih baik. - ---- - -## 🎯 Tujuan -1. Meningkatkan visual appeal dengan desain card yang modern -2. Memperbaiki spacing dan layout untuk readability yang lebih baik -3. Menambahkan elemen visual (icon, color accent) untuk navigasi yang lebih intuitif -4. Menciptakan konsistensi dengan design system aplikasi HIPMI - ---- - -## 📁 File yang Terlibat - -### File Utama -- **Target**: `app/(application)/(user)/crowdfunding/index.tsx` - -### Komponen yang Mungkin Digunakan -- `ViewWrapper` - Wrapper utama -- `StackCustom` - Layout vertikal -- `Grid` & `Grid.Col` - Layout horizontal -- `TextCustom` - Typography -- `BaseBox` / `AdminBasicBox` - Card container -- `ClickableCustom` - Interactive element -- `Feather` / `Ionicons` - Icons - -### Constants -- `MainColor` - Color palette -- `ICON_SIZE_SMALL`, `ICON_SIZE_BASE` - Icon sizing - -### Assets -- `@/assets/images/constants/crowd-hipmi.png` - Header image - ---- - -## 🔍 Analisis Kondisi Saat Ini - -### Kelemahan Design Sekarang -1. **Header Image** - - Plain image tanpa overlay atau title - - Tidak ada visual hierarchy - -2. **Card List** - - BaseBox terlalu simple, kurang depth - - Tidak ada shadow atau elevation - - Border radius mungkin kurang smooth - - Spacing antar elemen kurang konsisten - -3. **Typography** - - Judul dan deskripsi kurang kontras - - Tidak ada visual emphasis yang kuat - -4. **Navigation** - - Chevron icon terlalu plain - - Tidak ada visual feedback saat hover/press - -5. **Color Usage** - - Kurang color accent untuk membedakan sections - - Monoton dengan warna yang ada - ---- - -## 🎨 Rencana Desain - -### 1. Header Section Enhancement -``` -┌─────────────────────────────────────┐ -│ [Hero Image dengan Overlay] │ -│ ┌─────────────────────────────┐ │ -│ │ Crowdfunding │ │ -│ │ Platform Investasi & Donasi │ │ -│ └─────────────────────────────┘ │ -└─────────────────────────────────────┘ -``` - -**Implementasi:** -- Image dengan overlay gradient untuk text readability -- Title "Crowdfunding" dengan subtitle -- Rounded corners dengan overflow hidden -- Height: ~180-200px - -### 2. Card Design Modern -``` -┌─────────────────────────────────────┐ -│ [Icon] Investasi → │ -│ Deskripsi singkat... │ -│ (2-3 baris max) │ -└─────────────────────────────────────┘ -``` - -**Implementasi:** -- Card dengan: - - Background gradient atau solid color dengan tint - - Shadow/elevation untuk depth - - Border radius: 12-16px - - Padding: 16-20px - - Icon di kiri (Investasi & Donasi) - - Chevron di kanan dengan style yang lebih modern - -### 3. Icon Integration -- **Investasi**: Icon grafik/trending (contoh: `trending-up`, `pie-chart`) -- **Donasi**: Icon hati/tangan (contoh: `heart`, `hand-heart`) -- Size: 40-48px untuk icon card -- Background icon: Circle dengan color accent - -### 4. Color Scheme -``` -Investasi: -- Primary: Blue/Teal gradient -- Accent: Soft blue background -- Icon: White on blue - -Donasi: -- Primary: Orange/Red gradient -- Accent: Soft orange background -- Icon: White on orange -``` - -### 5. Typography Hierarchy -``` -Header Title: bold, x-large (20-22px) -Header Subtitle: regular, small (14-15px), gray -Card Title: bold, large (17-18px) -Card Description: regular, base (14px), gray -``` - -### 6. Spacing & Layout -``` -Container padding: 16px -Card margin bottom: 12-16px -Card internal padding: 16px -Gap between elements: 8-12px -``` - ---- - -## 📝 Breakdown Task - -### Task 1: Persiapan & Research -- [ ] Review komponen yang tersedia di `components/` -- [ ] Cek color palette di `constants/color-palet.ts` -- [ ] Identifikasi icon yang tersedia (Feather, Ionicons) -- [ ] Screenshot design sekarang untuk perbandingan - -### Task 2: Setup Structure -- [ ] Buat constant untuk list menu (pindahkan dari component body) -- [ ] Tambahkan icon mapping untuk setiap menu item -- [ ] Setup color scheme untuk setiap card - -### Task 3: Header Redesign -- [ ] Buat container dengan overflow hidden -- [ ] Tambahkan image dengan overlay gradient -- [ ] Tambahkan title "Crowdfunding" dengan text white -- [ ] Tambahkan subtitle (opsional) -- [ ] Test di berbagai ukuran layar - -### Task 4: Card Component -- [ ] Buat custom card component atau modify BaseBox -- [ ] Tambahkan shadow/elevation -- [ ] Tambahkan border radius yang smooth -- [ ] Setup gradient background (opsional) -- [ ] Tambahkan visual feedback saat press - -### Task 5: Icon Integration -- [ ] Pilih icon yang sesuai untuk setiap menu -- [ ] Buat icon container dengan background color -- [ ] Setup icon size dan positioning -- [ ] Test visibility di berbagai device - -### Task 6: Typography & Content -- [ ] Apply text hierarchy (title, subtitle, desc) -- [ ] Truncate description jika terlalu panjang (max 2-3 baris) -- [ ] Ensure text contrast yang baik -- [ ] Test dengan text panjang - -### Task 7: Polish & Refinement -- [ ] Adjust spacing dan padding -- [ ] Test di light/dark mode (jika applicable) -- [ ] Test di berbagai ukuran layar (responsive) -- [ ] Add smooth transitions/animations - -### Task 8: Testing -- [ ] Test navigation ke setiap halaman -- [ ] Test di iOS simulator -- [ ] Test di Android emulator -- [ ] Test di device fisik (jika memungkinkan) -- [ ] Check performance (no lag saat scroll) - ---- - -## 💻 Implementation Guidelines - -### Code Structure Example -```typescript -// Constants -const CROWDFUNDING_MENU = [ - { - title: "Investasi", - desc: "Buat investasi dan jual beli saham lebih mudah dengan pengguna lain.", - path: "investment/(tabs)", - icon: "trending-up", - color: MainColor.blue, - gradient: ["#667eea", "#764ba2"], - }, - // ... -]; - -// Component -export default function Crowdfunding() { - const renderHeader = () => ( - - - - Crowdfunding - Platform Investasi & Donasi - - - ); - - const renderCard = (item: CrowdfundingMenuItem) => ( - - - - - - {item.title} - {item.desc} - - - - ); - - return ( - - - {renderHeader()} - {CROWDFUNDING_MENU.map(renderCard)} - - - ); -} -``` - -### Style Guidelines -```typescript -const styles = StyleSheet.create({ - headerContainer: { - position: 'relative', - borderRadius: 16, - overflow: 'hidden', - marginBottom: 20, - }, - headerOverlay: { - position: 'absolute', - bottom: 0, - left: 0, - right: 0, - padding: 16, - backgroundColor: 'rgba(0,0,0,0.6)', - }, - card: { - backgroundColor: MainColor.white, - borderRadius: 16, - padding: 16, - marginBottom: 12, - elevation: 4, - shadowColor: '#000', - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.1, - shadowRadius: 4, - }, - iconContainer: { - width: 48, - height: 48, - borderRadius: 24, - alignItems: 'center', - justifyContent: 'center', - marginRight: 12, - }, -}); -``` - ---- - -## ✅ Acceptance Criteria - -### Visual -- [ ] Header dengan overlay text yang readable -- [ ] Card dengan shadow/elevation yang jelas -- [ ] Icon untuk setiap menu item -- [ ] Color accent yang berbeda untuk Investasi & Donasi -- [ ] Typography hierarchy yang jelas - -### Functional -- [ ] Navigation ke halaman tujuan berfungsi -- [ ] Responsive di berbagai ukuran layar -- [ ] No console errors atau warnings -- [ ] Smooth scroll (60fps) - -### Code Quality -- [ ] Code terorganisir dengan baik -- [ ] Components terpisah untuk reusability -- [ ] Constants untuk data statis -- [ ] Comments untuk logic yang kompleks -- [ ] TypeScript types yang proper - ---- - -## 📊 Estimated Effort -- **Complexity**: Low-Medium -- **Time Estimate**: 2-3 jam -- **Risk Level**: Low (tidak ada breaking changes) - ---- - -## 🔗 References -- Design Reference: `screens/Forum/ViewBeranda3.tsx` (untuk pagination pattern) -- Color Palette: `constants/color-palet.ts` -- Icons: Feather Icons, Ionicons -- Components: `components/_ShareComponent/` - ---- - -## 📝 Notes -- Pastikan backward compatibility (tidak breaking existing features) -- Test di device dengan screen size berbeda -- Consider accessibility (text contrast, touch target size) -- Jika ada time, tambahkan micro-interactions (scale on press, dll) - ---- - -**Created**: 2026-03-25 -**Status**: Pending -**Priority**: Medium diff --git a/TASKS/fix-phone-input-ios-16.md b/TASKS/fix-phone-input-ios-16.md new file mode 100644 index 0000000..09bb6da --- /dev/null +++ b/TASKS/fix-phone-input-ios-16.md @@ -0,0 +1,369 @@ +# Fix Phone Number Input - iOS 16+ Compatibility + +## 📋 Ringkasan Task +Memperbaiki masalah phone number input pada `screens/Authentication/LoginView.tsx` yang tidak berfungsi dengan baik pada iOS versi 16 ke atas. + +--- + +## 🎯 Tujuan +1. Fix keyboard overlay issues pada iOS 16+ +2. Perbaiki layout measurement dan safe area +3. Pastikan input phone number responsive di semua device +4. Maintain UX yang konsisten dengan Android + +--- + +## 📁 File yang Terlibat + +### File Utama +- **Target**: `screens/Authentication/LoginView.tsx` + +### File Pendukung +- `components/TextInput/TextInputCustom.tsx` - Alternatif custom input +- `styles/global-styles.ts` - Styling adjustments +- `package.json` - Update dependencies (jika perlu) + +### Dependencies Terkait +- `react-native-international-phone-number`: ^0.9.3 +- `react-native-keyboard-controller`: ^1.18.6 + +--- + +## 🔍 Analisis Masalah + +### Issues pada iOS 16+ + +#### 1. **Keyboard Overlay Problem** +**Symptom**: Input field tertutup keyboard saat aktif +**Cause**: +- Safe area insets tidak terhitung dengan benar +- Keyboard animation tidak sinkron dengan layout +- `react-native-keyboard-controller` tidak terintegrasi dengan baik + +#### 2. **Layout Measurement Issues** +**Symptom**: Input field berubah ukuran secara tidak terduga +**Cause**: +- Dynamic Type settings mempengaruhi layout +- Font scaling pada iOS 16+ berbeda +- Container tidak memiliki fixed height + +#### 3. **Focus Behavior** +**Symptom**: Input tidak auto-scroll saat di-focus +**Cause**: +- ScrollView/KeyboardAvoidingView configuration salah +- Keyboard dismissing behavior tidak konsisten + +#### 4. **Visual Glitches** +**Symptom**: Country flag dropdown tidak muncul atau terpotong +**Cause**: +- Z-index issues pada iOS +- Modal/Popover rendering problems + +--- + +## 🎨 Solusi yang Direkomendasikan + +### Option 1: **KeyboardAvoidingView Enhancement** (RECOMMENDED) +**Effort**: Medium +**Impact**: High + +```typescript +import { KeyboardAvoidingView, Platform } from "react-native"; + + + + {/* Content */} + + +``` + +**Keuntungan**: +- Native solution dari React Native +- Tidak perlu tambahan library +- Stabil untuk iOS 16+ + +**Kekurangan**: +- Perlu tuning offset untuk setiap device +- Tidak se-smooth keyboard controller + +### Option 2: **React Native Keyboard Controller** (BETTER UX) +**Effort**: Medium-High +**Impact**: High + +```typescript +import { KeyboardProvider } from "react-native-keyboard-controller"; + +// Wrap di root app (sudah ada di _layout.tsx) + + + + +// Di LoginView +import { KeyboardAwareScrollView } from "react-native-keyboard-controller"; + + + {/* Content */} + +``` + +**Keuntungan**: +- Smooth keyboard animations +- Better control over keyboard behavior +- Cross-platform consistency + +**Kekurangan**: +- Perlu verify konfigurasi yang sudah ada +- Mungkin perlu update library + +### Option 3: **Custom Phone Input** (FALLBACK) +**Effort**: High +**Impact**: Medium + +Membuat custom phone input dengan: +- TextInputCustom component +- Country code picker modal +- Validation logic + +**Keuntungan**: +- Full control atas behavior +- Tidak depend on third-party issues + +**Kekurangan**: +- Development time lebih lama +- Perlu testing ekstensif +- Maintain code sendiri + +--- + +## 📝 Breakdown Task + +### Task 1: Research & Setup ✅ +- [x] Identifikasi masalah pada iOS 16+ +- [x] Cek dokumentasi library +- [x] Review existing implementation +- [ ] Test di iOS simulator (iOS 16+) +- [ ] Test di device fisik (jika ada) + +### Task 2: Implement KeyboardAvoidingView Fix +- [ ] Wrap ViewWrapper dengan KeyboardAvoidingView +- [ ] Set behavior berdasarkan Platform +- [ ] Adjust keyboardVerticalOffset +- [ ] Test di berbagai ukuran layar +- [ ] Test landscape mode (jika applicable) + +### Task 3: Adjust Layout & Styling +- [ ] Fix container height/width +- [ ] Adjust safe area insets +- [ ] Test dengan Dynamic Type settings +- [ ] Ensure consistent padding/margin + +### Task 4: Test Focus Behavior +- [ ] Auto-scroll saat focus +- [ ] Keyboard dismiss saat tap outside +- [ ] Next/previous field navigation (jika ada) +- [ ] Input validation on blur + +### Task 5: Country Picker Fix +- [ ] Verify dropdown z-index +- [ ] Test modal presentation +- [ ] Ensure flag icons visible +- [ ] Test search functionality + +### Task 6: Testing & QA +- [ ] Test iOS 16, 17, 18 +- [ ] Test Android (regression) +- [ ] Test dengan berbagai device sizes +- [ ] Test accessibility (VoiceOver) +- [ ] Performance test (no lag) + +### Task 7: Documentation +- [ ] Update code comments +- [ ] Document iOS-specific workarounds +- [ ] Add troubleshooting notes + +--- + +## 💻 Implementation Guidelines + +### Recommended Implementation (Option 1 + 2 Hybrid) + +```typescript +import { KeyboardAvoidingView, Platform } from "react-native"; +import { KeyboardProvider } from "react-native-keyboard-controller"; + +// Di LoginView.tsx +export default function LoginView() { + return ( + + } + > + + + {/* Title Section */} + + WELCOME TO + + HIPMI BADUNG APPS + + + + + + {/* Phone Input - Wrap dengan View untuk stability */} + + + + + + + {/* Login Button */} + + Login + + + + + {/* Terms Text */} + + Dengan menggunakan aplikasi ini, Anda telah menyetujui{" "} + { + const toUrl = `${url}/terms-of-service.html`; + openBrowser(toUrl); + }} + > + Syarat & Ketentuan + {" "} + dan seluruh kebijakan privasi yang berlaku. + + + {/* Version Info */} + + {version} | powered by muku.id + + + + + ); +} +``` + +### Styling Adjustments + +```typescript +// styles/global-styles.ts +export const GStyles = StyleSheet.create({ + authContainer: { + flex: 1, + justifyContent: "center", + paddingHorizontal: 24, + // Add padding bottom untuk keyboard space + paddingBottom: Platform.OS === "ios" ? 40 : 20, + }, + // ... existing styles +}); +``` + +--- + +## ✅ Acceptance Criteria + +### Functional +- [ ] Input field tidak tertutup keyboard saat focus +- [ ] Country picker dropdown berfungsi dengan baik +- [ ] Auto-scroll bekerja smooth saat focus +- [ ] Keyboard dismiss saat tap outside +- [ ] Input validation berjalan normal + +### Visual +- [ ] Layout tidak berubah saat keyboard muncul +- [ ] No visual glitches atau flickering +- [ ] Country flag icons visible +- [ ] Consistent spacing dan padding + +### Compatibility +- [ ] iOS 16, 17, 18 - Tested ✅ +- [ ] Android - No regression ✅ +- [ ] iPad - Responsive ✅ +- [ ] Landscape mode - Usable ✅ + +### Performance +- [ ] No lag saat typing +- [ ] Smooth keyboard animations +- [ ] No memory leaks +- [ ] Fast input response + +--- + +## 🔗 References +- [React Native KeyboardAvoidingView Docs](https://reactnative.dev/docs/keyboardavoidingview) +- [react-native-keyboard-controller](https://github.com/kirillzyusko/react-native-keyboard-controller) +- [react-native-international-phone-number Issues](https://github.com/bluesky01/react-native-international-phone-number/issues) +- [iOS 16+ Keyboard Changes](https://developer.apple.com/documentation/uikit/uikit) + +--- + +## 📊 Estimated Effort +- **Complexity**: Medium +- **Time Estimate**: 2-4 jam +- **Risk Level**: Medium (perlu testing ekstensif di device) + +--- + +## 📝 Notes +- **Priority**: High (login adalah critical path) +- **Testing**: Wajib test di device fisik jika memungkinkan +- **Fallback**: Jika Option 1 & 2 gagal, siap untuk implement Option 3 (custom input) +- **Monitoring**: Add analytics untuk track input completion rate + +--- + +**Created**: 2026-03-25 +**Status**: Pending +**Priority**: High +**Related Issue**: iOS 16+ keyboard compatibility diff --git a/docs/prompt-for-qwen-code.md b/docs/prompt-for-qwen-code.md index ecc6aa4..ea4f33b 100644 --- a/docs/prompt-for-qwen-code.md +++ b/docs/prompt-for-qwen-code.md @@ -120,4 +120,9 @@ Buatkan file baru pada "Folder tujuan" dengan nama "Nama file utama" dan ubah na + +Diskusi pada file screens/Authentication/LoginView.tsx , tentang penggunaan phone number input. Karena tidak berfungsi dengan baik pada versi ios 26 keatas + + +