wibu/hipmi-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Docs: add task breakdown untuk fix phone input iOS 16+

Browse Source 
- Add TASKS/fix-phone-input-ios-16.md dengan analisis lengkap
- 3 opsi solusi: KeyboardAvoidingView, Keyboard Controller, Custom Input
- Detailed implementation guidelines
- Testing checklist untuk iOS 16, 17, 18

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
bagasbanuna
2026-03-25 16:39:48 +08:00
parent b6cd308b0b
commit 2e58f8c7b4
3 changed files with 374 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

337
TASKS/crowdfunding-redesign.md
View File

@@ -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 = () => (
<View style={styles.headerContainer}>
<Image source={...} style={styles.headerImage} />
<View style={styles.headerOverlay}>
<TextCustom bold size="x-large">Crowdfunding</TextCustom>
<TextCustom>Platform Investasi & Donasi</TextCustom>
</View>
</View>
);
const renderCard = (item: CrowdfundingMenuItem) => (
<ClickableCustom onPress={...} style={styles.card}>
<View style={[styles.iconContainer, { backgroundColor: item.color }]}>
<Feather name={item.icon} size={24} color={MainColor.white} />
</View>
<Grid.Col span={8}>
<TextCustom bold size="large">{item.title}</TextCustom>
<TextCustom numberOfLines={2}>{item.desc}</TextCustom>
</Grid.Col>
<Feather name="chevron-right" size={ICON_SIZE_SMALL} />
</ClickableCustom>
);
return (
<ViewWrapper>
<StackCustom>
{renderHeader()}
{CROWDFUNDING_MENU.map(renderCard)}
</StackCustom>
</ViewWrapper>
);
}
```
### 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

369
TASKS/fix-phone-input-ios-16.md Normal file
View File

@@ -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";
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
keyboardVerticalOffset={Platform.OS === "ios" ? 90 : 50}
style={{ flex: 1 }}
>
<ViewWrapper>
{/* Content */}
</ViewWrapper>
</KeyboardAvoidingView>
```
**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)
<KeyboardProvider>
<App />
</KeyboardProvider>
// Di LoginView
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
<KeyboardAwareScrollView
bottomOffset={20}
keyboardOffset={10}
>
{/* Content */}
</KeyboardAwareScrollView>
```
**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 (
<ViewWrapper
withBackground
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
}
>
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
keyboardVerticalOffset={Platform.OS === "ios" ? 100 : 50}
style={{ flex: 1 }}
>
<View style={[GStyles.authContainer, { paddingBottom: 40 }]}>
{/* Title Section */}
<View style={GStyles.authContainerTitle}>
<Text style={GStyles.authSubTitle}>WELCOME TO</Text>
<Spacing height={5} />
<Text style={GStyles.authTitle}>HIPMI BADUNG APPS</Text>
<Spacing height={5} />
</View>
<Spacing height={50} />
{/* Phone Input - Wrap dengan View untuk stability */}
<View style={{ marginBottom: 20 }}>
<PhoneInput
value={inputValue}
onChangePhoneNumber={handleInputValue}
selectedCountry={selectedCountry}
onChangeSelectedCountry={handleSelectedCountry}
defaultCountry="ID"
placeholder="Masukkan nomor"
// Add iOS-specific props
textInputProps={{
keyboardType: "phone-pad",
autoComplete: "tel",
importantForAutofill: "yes",
}}
/>
</View>
<Spacing />
{/* Login Button */}
<ButtonCustom
onPress={handleLogin}
disabled={loadingTerm}
isLoading={loading || loadingTerm}
>
Login
</ButtonCustom>
<Spacing height={50} />
{/* Terms Text */}
<Text style={{ ...GStyles.textLabel, textAlign: "center", fontSize: 12 }}>
Dengan menggunakan aplikasi ini, Anda telah menyetujui{" "}
<Text
style={{
color: MainColor.yellow,
textDecorationLine: "underline",
}}
onPress={() => {
const toUrl = `${url}/terms-of-service.html`;
openBrowser(toUrl);
}}
>
Syarat & Ketentuan
</Text>{" "}
dan seluruh kebijakan privasi yang berlaku.
</Text>
{/* Version Info */}
<Text
style={{
position: "absolute",
bottom: 35,
right: 50,
fontSize: 10,
fontWeight: "thin",
fontStyle: "italic",
color: MainColor.white_gray,
}}
>
{version} | powered by muku.id
</Text>
</View>
</KeyboardAvoidingView>
</ViewWrapper>
);
}
```
### 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

5
docs/prompt-for-qwen-code.md
View File

@@ -120,4 +120,9 @@ Buatkan file baru pada "Folder tujuan" dengan nama "Nama file utama" dan ubah na
<!-- END Create Box -->
<!-- Random Prompt -->
Diskusi pada file screens/Authentication/LoginView.tsx , tentang penggunaan phone number input. Karena tidak berfungsi dengan baik pada versi ios 26 keatas
<!-- END Random Prompt -->
<!-- END Use Prompt Now -->