Refactor pagination implementation dan perbaikan UI

- Add default page parameter di apiAllUser - Refactor MainView_V2.tsx dengan separate render functions - Update pagination pageSize menjadi 10 di Forum - Fix iOS height constant dan tab styling - Rename Admin_ScreenPortofolioCreate ke ScreenPortofolioCreate - Add TASKS documentation folder Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
2026-03-25 16:22:54 +08:00
parent f68deab8c0
commit b6cd308b0b
15 changed files with 511 additions and 151 deletions
--- a/TASKS/crowdfunding-redesign.md
+++ b/TASKS/crowdfunding-redesign.md
@@ -0,0 +1,337 @@
+# 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