From 4862975402088152900f8c2dac001fd0477135ee Mon Sep 17 00:00:00 2001 From: bagasbanuna Date: Thu, 19 Feb 2026 14:06:02 +0800 Subject: [PATCH] Ringkasan Perubahan File yang Dimodifikasi: 1. `service/api-admin/api-admin-investment.ts` - Tambah parameter page untuk pagination 2. `app/(application)/admin/investment/[id]/list-of-investor.tsx` - Clean route file File Baru: 3. `screens/Admin/Investment/ScreenInvestmentListOfInvestor.tsx` - Screen component dengan pagination 4. `screens/Admin/Investment/BoxInvestmentListOfInvestor.tsx` - Box component untuk list item ### No Issue --- QWEN.md | 518 ++++++++++++------ app/(application)/(user)/home.tsx | 16 +- .../admin/investment/[id]/[status]/index.tsx | 14 +- .../[id]/[status]/transaction-detail.tsx | 2 +- .../investment/[id]/list-of-investor.tsx | 194 +------ .../admin/investment/[status]/status.tsx | 112 +--- docs/prompt-for-qwen-code.md | 23 +- screens/Admin/Donation/BoxDonationStatus.tsx | 2 +- .../BoxInvestmentListOfInvestor.tsx | 63 +++ .../Admin/Investment/BoxInvestmentStatus.tsx | 54 ++ .../ScreenInvestmentListOfInvestor.tsx | 132 +++++ .../Investment/ScreenInvestmentStatus.tsx | 109 ++++ screens/Admin/listPageAdmin.tsx | 40 +- service/api-admin/api-admin-investment.ts | 18 +- 14 files changed, 789 insertions(+), 508 deletions(-) create mode 100644 screens/Admin/Investment/BoxInvestmentListOfInvestor.tsx create mode 100644 screens/Admin/Investment/BoxInvestmentStatus.tsx create mode 100644 screens/Admin/Investment/ScreenInvestmentListOfInvestor.tsx create mode 100644 screens/Admin/Investment/ScreenInvestmentStatus.tsx diff --git a/QWEN.md b/QWEN.md index cdaccdf..de3f5de 100644 --- a/QWEN.md +++ b/QWEN.md @@ -2,56 +2,68 @@ ## Project Overview -HIPMI Mobile is a cross-platform mobile application built with Expo and React Native. The application is named "HIPMI Badung Connect" and serves as a platform for the HIPMI (Himpunan Pengusaha dan Pengusaha Indonesia) Badung chapter. It's designed to run on iOS, Android, and web platforms using a single codebase. +HIPMI Mobile is a cross-platform mobile application built with Expo and React Native. The application is named **"HIPMI Badung Connect"** and serves as a platform for the HIPMI (Himpunan Pengusaha dan Pengusaha Indonesia) Badung chapter. It's designed to run on iOS, Android, and web platforms using a single codebase. ### Key Technologies -- **Framework**: Expo (v54.0.0) with React Native (v0.81.4) +- **Framework**: Expo (v54.0.0) with React Native (v0.81.5) - **Language**: TypeScript - **Architecture**: File-based routing with Expo Router -- **State Management**: Context API +- **State Management**: Context API (AuthContext) - **UI Components**: React Native Paper, custom components - **Maps Integration**: Mapbox Maps for React Native - **Push Notifications**: React Native Firebase Messaging - **Build System**: Metro bundler +- **Package Manager**: Bun ### Project Structure ``` hipmi-mobile/ -├── app/ # Main application screens and routing +├── app/ # Main application screens and routing (Expo Router) │ ├── _layout.tsx # Root layout component │ ├── index.tsx # Entry point (Login screen) -│ └── ... +│ └── (application)/ # Main app screens +│ ├── admin/ # Admin panel screens +│ ├── (user)/ # User screens +│ └── ... ├── components/ # Reusable UI components +│ ├── _ShareComponent/ # Shared components (NewWrapper, Admin components) +│ ├── _Icon/ # Icon components +│ └── ... ├── context/ # State management (AuthContext) ├── screens/ # Screen components organized by feature │ ├── Admin/ # Admin panel screens +│ │ ├── Donation/ # Donation management screens +│ │ ├── Voting/ # Voting management screens +│ │ ├── Event/ # Event management screens +│ │ └── ... │ ├── Authentication/ # Login, registration flows -│ ├── Collaboration/ # Collaboration features -│ ├── Event/ # Event management -│ ├── Forum/ # Forum functionality -│ ├── Home/ # Home screen -│ ├── Maps/ # Map integration -│ ├── Profile/ # User profile +│ ├── RootLayout/ # Root layout components │ └── ... -├── assets/ # Images, icons, and static assets -├── constants/ # Constants and configuration values -├── helpers/ # Helper functions (pagination, etc.) -├── hooks/ # Custom React hooks -├── lib/ # Utility libraries -├── navigation/ # Navigation configuration ├── service/ # API services and business logic +│ ├── api-admin/ # Admin API endpoints +│ ├── api-client/ # Client API endpoints +│ └── api-config.ts # Axios configuration +├── hooks/ # Custom React hooks +│ ├── use-pagination.tsx # Pagination hook +│ └── ... +├── helpers/ # Helper functions +│ ├── paginationHelpers.tsx # Pagination UI helpers +│ └── ... ├── types/ # TypeScript type definitions -└── utils/ # Helper functions +├── utils/ # Utility functions +├── constants/ # Constants and configuration values +├── styles/ # Global styles +├── assets/ # Images, icons, and static assets +└── docs/ # Documentation files ``` ## Building and Running ### Prerequisites -- Node.js (with bun as the package manager) -- Expo CLI -- iOS Simulator or Android Emulator (for native builds) -- Android Studio (for Android builds) -- Xcode (for iOS builds, macOS only) +- **Node.js**: v18+ with Bun package manager +- **Expo CLI**: Installed globally or via npx +- **iOS**: Xcode (macOS only) for iOS simulator/builds +- **Android**: Android Studio for Android emulator/builds ### Setup and Development @@ -63,16 +75,27 @@ hipmi-mobile/ 2. **Run Development Server** ```bash bun run start - ``` - Or use the shorthand: - ```bash + # or bunx expo start ``` 3. **Platform-Specific Commands** - - iOS: `bun run ios` or `bunx expo start --ios` - - Android: `bun run android` or `bunx expo start --android` - - Web: `bun run web` or `bunx expo start --web` + ```bash + # iOS Simulator + bun run ios + # or + bunx expo start --ios + + # Android Emulator + bun run android + # or + bunx expo start --android + + # Web Browser + bun run web + # or + bunx expo start --web + ``` 4. **Linting** ```bash @@ -83,13 +106,13 @@ hipmi-mobile/ #### EAS Build (Production) ```bash -# Production build +# Production build (App Store / Play Store) eas build --profile production -# Preview build +# Preview build (Internal distribution) eas build --profile preview -# Development build +# Development build (Development client) eas build --profile development ``` @@ -100,7 +123,7 @@ npx expo prebuild # iOS specific bunx expo prebuild --platform ios -open ios/HIPMIBADUNG.xcworkspace +open ios/HIPMIBadungConnect.xcworkspace # Android specific bunx expo prebuild --platform android @@ -110,6 +133,12 @@ bunx expo prebuild --platform android ```bash # Patch version update npm version patch + +# Update iOS build number +bunx expo prebuild --platform ios + +# Update Android version code +bunx expo prebuild --platform android ``` ### Android Debugging @@ -126,157 +155,336 @@ adb -s install android/app/build/outputs/apk/debug/app-debug.apk ## Environment Variables -The application uses environment variables defined in the `app.config.js` file: -- `API_BASE_URL`: Base URL for API endpoints -- `BASE_URL`: Base application URL -- `DEEP_LINK_URL`: URL for deep linking functionality +Create a `.env` file in the project root with: -Create a `.env` file in the project root with these variables. +```env +API_BASE_URL=https://your-api-base-url.com +BASE_URL=https://your-app-url.com +DEEP_LINK_URL=hipmimobile:// +``` -## EAS Build Configuration +These are loaded in `app.config.js` and accessible via `Constants.expoConfig.extra`. -The project uses Expo Application Services (EAS) for building and deploying: -- **Development**: Development builds with development client -- **Preview**: Internal distribution builds (APK for Android) -- **Production**: App store builds (App Bundle for Android, IPA for iOS) +## Architecture Patterns -Configuration is in `eas.json`. +### 1. Separation of Concerns -## Features and Functionality +**Route Files** (`app/`) should be minimal (max 5 lines): +```typescript +import { Admin_ScreenXXX } from "@/screens/Admin/XXX/ScreenXXX"; -The application includes several key modules: -- **Authentication**: Login with phone number, OTP verification, registration, terms acceptance -- **Admin Panel**: Administrative functions for managing content and users -- **Collaboration**: Tools for member collaboration -- **Events**: Event management and calendar -- **Forum**: Discussion forums -- **Maps**: Location-based services with Mapbox integration -- **Donations**: Donation functionality with fund disbursement tracking -- **Job Board**: Employment opportunities -- **Investment**: Investment-related features -- **Voting**: Voting systems -- **Portfolio**: Member portfolio showcase -- **Notifications**: Push notifications via Firebase +export default function AdminXXX() { + return ; +} +``` + +**Screen Components** (`screens/`) contain all business logic: +```typescript +export function Admin_ScreenXXX() { + // Logic, hooks, state management + return ; +} +``` + +### 2. Pagination Pattern + +Using `usePagination` hook with infinite scroll: + +```typescript +const pagination = usePagination({ + fetchFunction: async (page, searchQuery) => { + const response = await apiXXX({ page: String(page) }); + if (response.success) { + return { data: response.data }; + } + return { data: [] }; + }, + pageSize: PAGINATION_DEFAULT_TAKE, // 10 + searchQuery: search, + dependencies: [dependency], +}); + +const { ListEmptyComponent, ListFooterComponent } = + createPaginationComponents({ + loading: pagination.loading, + refreshing: pagination.refreshing, + listData: pagination.listData, + emptyMessage: "Belum ada data", + skeletonCount: PAGINATION_DEFAULT_TAKE, + }); +``` + +### 3. Wrapper Components + +**NewWrapper** (preferred for lists): +```typescript +} +/> +``` + +**AdminBasicBox** (for card layouts): +```typescript + router.push(`/path/${item.id}`)} + style={{ marginHorizontal: 10, marginVertical: 5 }} +> + + Value} /> + + +``` + +### 4. API Service Structure + +```typescript +// service/api-admin/api-xxx.ts +export async function apiXXX({ page = "1" }: { page?: string }) { + try { + const response = await apiConfig.get(`/mobile/admin/xxx?page=${page}`); + return response.data; + } catch (error) { + throw error; + } +} +``` + +**Important**: All list APIs should support pagination with `page` parameter (default: "1"). + +### 5. Authentication Flow + +Managed by `AuthContext`: +- `loginWithNomor()` - Send phone number, receive OTP +- `validateOtp()` - Validate OTP, get token +- `registerUser()` - Register new user +- `logout()` - Clear session and logout +- `userData()` - Fetch user data by token ## Development Conventions ### Coding Standards -- TypeScript is used throughout the project for type safety -- Component-based architecture with reusable components -- Context API for state management (AuthContext) -- File-based routing with Expo Router -- Consistent naming conventions using camelCase for variables and PascalCase for components -- Path aliases: `@/*` maps to project root +- **TypeScript**: Strict mode enabled +- **Naming**: + - Components: PascalCase (`Admin_ScreenDonationStatus`) + - Files: PascalCase for components (`ScreenDonationStatus.tsx`) + - Variables: camelCase + - Constants: UPPER_SNAKE_CASE +- **Path Aliases**: `@/*` maps to project root +- **Imports**: Group imports by type (components, hooks, services, etc.) -### Architecture Patterns +### Component Structure +```typescript +// 1. Imports (grouped) +import { ... } from "@/components"; +import { ... } from "@/hooks"; +import { ... } from "@/service"; -#### Screen Components -- Screen components are stored in `/screens` directory organized by feature -- Route files in `/app` import and use screen components -- Example pattern: - ```tsx - // app/some-route.tsx - import SomeScreen from "@/screens/Feature/ScreenSome"; - - export default function SomeRoute() { - return ; - } - ``` +// 2. Types/Interfaces +interface Props { ... } -#### Wrapper Components -- `NewWrapper` component is used for consistent screen layouts -- Located at `components/_ShareComponent/NewWrapper.tsx` - -#### Pagination Pattern -- Use `hooks/use-pagination.tsx` and `helpers/paginationHelpers.tsx` -- Helper functions: `createSkeletonList`, `createEmptyState`, `createLoadingFooter`, `createPaginationComponents` -- API functions should accept `page` parameter (default: "1") - -### API Service Structure -- Base API configuration: `service/api-config.ts` -- Client APIs: `service/api-client/` -- Admin APIs: `service/api-admin/` -- All API calls use axios with interceptors for auth token injection +// 3. Main Component +export function ComponentName() { + // State + // Hooks + // Functions + // Render +} +``` ### Testing -- Linting is configured with ESLint -- Standard Expo linting configuration +- Linting: `bun run lint` +- No formal test suite configured yet -### Security -- Firebase is integrated for authentication and messaging -- Camera and location permissions are properly configured -- Deep linking is secured with app domain associations -- Auth tokens stored in AsyncStorage +### Git Workflow +- Feature branches: `feature/xxx` or `fixed-admin/xxx` +- Commit messages: Clear and descriptive +- Use CHANGE_LOG.md for tracking changes -## Key Dependencies +## Key Features -### Core Dependencies -- `@react-navigation/*`: Navigation solution for React Native -- `@react-native-firebase/*`: Firebase integration for React Native -- `@rnmapbox/maps`: Mapbox integration for React Native -- `expo-router`: File-based routing for Expo applications -- `react-native-paper`: Material Design components for React Native -- `react-native-toast-message`: Toast notifications -- `react-native-otp-entry`: OTP input components -- `react-native-qrcode-svg`: QR code generation -- `axios`: HTTP client for API calls -- `lodash`: Utility library -- `moti`: Animation library +### Authentication +- Phone number login with OTP +- User registration +- Terms & Conditions acceptance +- Session persistence with AsyncStorage -### Development Dependencies -- `@types/*`: TypeScript type definitions -- `eslint-config-expo`: Expo-specific ESLint configuration -- `typescript`: Type checking +### Admin Module +- **Dashboard**: Overview and statistics +- **User Access**: User management +- **Event**: Event CRUD with status management +- **Voting**: Voting management (publish/review/reject) +- **Donation**: Donation management with categories and transaction tracking +- **Collaboration**: Collaboration requests +- **Investment**: Investment management +- **Maps**: Location-based features +- **App Information**: Bank and business field management -## Platform Support +### User Module +- **Home**: Main dashboard +- **Forum**: Discussion forums +- **Profile**: User profile management +- **Portfolio**: Member portfolio +- **Notifications**: Push notifications via Firebase -The application is configured to support: -- **iOS**: - - Bundle identifier: `com.anonymous.hipmi-mobile` - - Supports tablets - - Build number: 21 - - Google Services integration - - Associated domains for deep linking -- **Android**: - - Package name: `com.bip.hipmimobileapp` - - Version code: 4 - - Adaptive icons - - Edge-to-edge display enabled - - Intent filters for HTTPS deep linking -- **Web**: Static output configuration for web deployment +## API Configuration -## Special Configurations +### Base URLs +```typescript +// From app.config.js extra +API_BASE_URL: process.env.API_BASE_URL +BASE_URL: process.env.BASE_URL +DEEP_LINK_URL: process.env.DEEP_LINK_URL +``` + +### Axios Interceptor +All API calls use `apiConfig` with automatic token injection: +```typescript +apiConfig.interceptors.request.use(async (config) => { + const token = await AsyncStorage.getItem("authToken"); + if (token) { + config.headers.Authorization = `Bearer ${token}`; + } + return config; +}); +``` + +## Platform Configuration + +### iOS +- **Bundle ID**: `com.anonymous.hipmi-mobile` +- **Build Number**: 21 +- **Google Services**: Configured +- **Associated Domains**: `applinks:cld-dkr-staging-hipmi.wibudev.com` +- **Tablet Support**: Enabled + +### Android +- **Package**: `com.bip.hipmimobileapp` +- **Version Code**: 4 +- **Google Services**: Configured (`google-services.json`) +- **Deep Links**: HTTPS intent filters configured +- **Edge-to-Edge**: Enabled + +### Web +- **Output**: Static +- **Bundler**: Metro + +## Special Integrations + +### Firebase +- Authentication +- Push Notifications (FCM) +- Configured for both iOS and Android + +### Mapbox +- Map integration via `@rnmapbox/maps` +- Location permissions configured ### Deep Linking - Scheme: `hipmimobile://` -- Associated domains: `applinks:cld-dkr-staging-hipmi.wibudev.com` -- Configured for both iOS and Android - -### Maps Integration -The application uses Mapbox for mapping functionality with the `@rnmapbox/maps` plugin. - -### Push Notifications -Firebase Cloud Messaging is integrated for push notifications with proper configuration for both iOS and Android platforms. +- HTTPS: `cld-dkr-staging-hipmi.wibudev.com` +- Configured for both platforms ### Camera -Camera permissions configured for both iOS and Android with microphone access for recording. +- Camera and microphone permissions +- QR code generation support ## Common Development Tasks -### Adding a New Screen -1. Create screen component in appropriate `/screens` subdirectory -2. Add route in `/app` directory if needed -3. Configure navigation in `AppRoot.tsx` if custom header is needed +### Adding a New Admin Screen -### Adding API Endpoint -1. Add function in appropriate service file (`service/api-client/` or `service/api-admin/`) -2. Use `apiConfig` axios instance for requests -3. Include proper error handling +1. **Create Screen Component** (`screens/Admin/Feature/ScreenXXX.tsx`): +```typescript +export function Admin_ScreenXXX() { + const pagination = usePagination({...}); + const renderItem = useCallback(...); + const headerComponent = useMemo(...); + + return ; +} +``` -### Refactoring Pattern (from docs/prompt-for-qwen-code.md) -When moving code from route files to screen components: -1. Create new file in `screens//` directory -2. Rename function with prefix (e.g., `Admin_`, `Donation_`) -3. Use `NewWrapper` component for consistent layout -4. Apply pagination helpers if displaying lists -5. Import and call from original route file +2. **Create Box Component** (optional, for custom item rendering): +```typescript +export default function Admin_BoxXXX({ item }: { item: any }) { + return ( + router.push(...)}> + ... + + ); +} +``` + +3. **Update API** (add pagination if needed): +```typescript +export async function apiXXX({ page = "1" }: { page?: string }) { + // ... +} +``` + +4. **Create Route File** (`app/(application)/admin/feature/xxx.tsx`): +```typescript +import { Admin_ScreenXXX } from "@/screens/Admin/Feature/ScreenXXX"; + +export default function AdminXXX() { + return ; +} +``` + +### Updating API Endpoints + +1. Add function in appropriate service file +2. Include `page` parameter for list endpoints +3. Use `apiConfig` axios instance +4. Handle errors properly + +## Troubleshooting + +### Build Issues +```bash +# Clean and rebuild +rm -rf node_modules +bun install +bunx expo prebuild --clean + +# iOS specific +cd ios && pod install && cd .. + +# Android specific +cd android && ./gradlew clean && cd .. +``` + +### Cache Issues +```bash +# Clear Expo cache +bunx expo start -c + +# Clear Metro cache +bunx expo start --clear +``` + +### Dependency Issues +```bash +# Reinstall dependencies +rm -rf node_modules bun.lock +bun install +``` + +## Documentation Files + +- `docs/CHANGE_LOG.md` - Change log for recent updates +- `docs/COMMIT_NOTES.md` - Commit notes and guidelines +- `docs/hipmi-note.md` - Build and deployment notes +- `docs/prompt-for-qwen-code.md` - Development prompts and patterns + +## Resources + +- [Expo Documentation](https://docs.expo.dev/) +- [React Native Documentation](https://reactnative.dev/) +- [Expo Router Documentation](https://docs.expo.dev/router/introduction/) +- [TypeScript Documentation](https://www.typescriptlang.org/docs/) diff --git a/app/(application)/(user)/home.tsx b/app/(application)/(user)/home.tsx index ad768bd..38dc8a2 100644 --- a/app/(application)/(user)/home.tsx +++ b/app/(application)/(user)/home.tsx @@ -77,14 +77,14 @@ export default function Application() { ); } - // if (data && data?.masterUserRoleId !== "1") { - // console.log("User is not admin"); - // return ( - // - // - // - // ); - // } + if (data && data?.masterUserRoleId !== "1") { + console.log("User is not admin"); + return ( + + + + ); + } return ( <> diff --git a/app/(application)/admin/investment/[id]/[status]/index.tsx b/app/(application)/admin/investment/[id]/[status]/index.tsx index f0ce822..30d44aa 100644 --- a/app/(application)/admin/investment/[id]/[status]/index.tsx +++ b/app/(application)/admin/investment/[id]/[status]/index.tsx @@ -20,6 +20,7 @@ import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButt import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject"; import AdminButtonReview from "@/components/_ShareComponent/Admin/ButtonReview"; import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8"; +import GridTwoView from "@/components/_ShareComponent/GridTwoView"; import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom"; import ReportBox from "@/components/Box/ReportBox"; import { MainColor } from "@/constants/color-palet"; @@ -182,9 +183,9 @@ export default function AdminInvestmentDetail() { - File Prospektus} - value={ + File Prospektus} + rightItem={ } /> - File Dokumen} - value={ + File Dokumen} + rightItem={ {_.isEmpty(data?.DokumenInvestasi) ? ( - diff --git a/app/(application)/admin/investment/[id]/[status]/transaction-detail.tsx b/app/(application)/admin/investment/[id]/[status]/transaction-detail.tsx index f751825..1f99826 100644 --- a/app/(application)/admin/investment/[id]/[status]/transaction-detail.tsx +++ b/app/(application)/admin/investment/[id]/[status]/transaction-detail.tsx @@ -60,7 +60,7 @@ export default function AdminInvestmentTransactionDetail() { value: (data && data?.MasterBank?.namaBank) || "-", }, { - label: "Jumlah Investasi", + label: "Nominal", value: (data && `Rp. ${formatCurrencyDisplay(data?.nominal)}`) || "-", }, { diff --git a/app/(application)/admin/investment/[id]/list-of-investor.tsx b/app/(application)/admin/investment/[id]/list-of-investor.tsx index 9d5bbb8..a6c806b 100644 --- a/app/(application)/admin/investment/[id]/list-of-investor.tsx +++ b/app/(application)/admin/investment/[id]/list-of-investor.tsx @@ -1,195 +1,5 @@ -/* eslint-disable react-hooks/exhaustive-deps */ -import { - ActionIcon, - BadgeCustom, - CenterCustom, - LoaderCustom, - SelectCustom, - StackCustom, - TextCustom, - ViewWrapper, -} from "@/components"; -import { IconView } from "@/components/_Icon/IconComponent"; -import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle"; -import { GridViewCustomSpan } from "@/components/_ShareComponent/GridViewCustomSpan"; -import NoDataText from "@/components/_ShareComponent/NoDataText"; -import { ICON_SIZE_BUTTON } from "@/constants/constans-value"; -import { apiAdminInvestmentListOfInvestor } from "@/service/api-admin/api-admin-investment"; -import { apiMasterTransaction } from "@/service/api-client/api-master"; -import { colorBadgeTransaction } from "@/utils/colorBadge"; -import { router, useFocusEffect, useLocalSearchParams } from "expo-router"; -import _ from "lodash"; -import React, { useEffect } from "react"; -import { View } from "react-native"; -import { Divider } from "react-native-paper"; +import { Admin_ScreenInvestmentListOfInvestor } from "@/screens/Admin/Investment/ScreenInvestmentListOfInvestor"; export default function AdminInvestmentListOfInvestor() { - const { id } = useLocalSearchParams(); - console.log("[ID]", id); - - const [listData, setListData] = React.useState(null); - const [loadData, setLoadData] = React.useState(false); - const [master, setMaster] = React.useState([]); - - const [selectValue, setSelectValue] = React.useState(null); - const [selectedStatus, setSelectedStatus] = React.useState( - null - ); - - useEffect(() => { - onLoadMaster(); - }, []); - - const onLoadMaster = async () => { - try { - const response = await apiMasterTransaction(); - - if (response.success) { - setMaster(response.data); - } - } catch (error) { - console.log("[ERROR]", error); - setMaster([]); - } - }; - - useFocusEffect( - React.useCallback(() => { - onLoadData(); - }, [id, selectValue]) - ); - - const onLoadData = async () => { - try { - setLoadData(true); - const response = await apiAdminInvestmentListOfInvestor({ - id: id as string, - status: selectedStatus as any, - }); - console.log("[LIST OF INVESTOR]", JSON.stringify(response, null, 2)); - - if (response.success) { - setListData(response.data); - } - } catch (error) { - console.log("[ERROR]", error); - setListData([]); - } finally { - setLoadData(false); - } - }; - - useEffect(() => { - onLoadMaster(); - }, []); - - const searchComponent = ( - - ({ - label: item.name, - value: item.id, - })) - } - value={selectValue} - onChange={(value: any) => { - setSelectValue(value); - const nameSelected = master.find((item: any) => item.id === value); - const statusChooses = _.lowerCase(nameSelected?.name); - setSelectedStatus(statusChooses); - }} - styleContainer={{ width: "100%", marginBottom: 0 }} - allowClear - /> - - ); - - const headerComponent = ( - - - {searchComponent} - - ); - - return ( - <> - - - - Aksi - - } - component2={ - - Investor - - } - component3={ - - Status - - } - /> - - - {loadData ? ( - - ) : _.isEmpty(listData) ? ( - - ) : ( - listData?.map((item: any, index: number) => ( - - - - } - onPress={() => { - router.push( - `/admin/investment/${item?.id}/${_.lowerCase( - item?.StatusInvoice?.name - )}/transaction-detail` - ); - }} - /> - - } - component2={ - - {item?.Author?.username || "-"} - - } - component3={ - - {item?.StatusInvoice?.name} - - } - /> - - )) - )} - - - - - ); + return ; } diff --git a/app/(application)/admin/investment/[status]/status.tsx b/app/(application)/admin/investment/[status]/status.tsx index c84c8ad..8f5f084 100644 --- a/app/(application)/admin/investment/[status]/status.tsx +++ b/app/(application)/admin/investment/[status]/status.tsx @@ -1,113 +1,5 @@ -/* eslint-disable react-hooks/exhaustive-deps */ -import { - ActionIcon, - LoaderCustom, - SearchInput, - StackCustom, - TextCustom, - ViewWrapper -} from "@/components"; -import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage"; -import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle"; -import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue"; -import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage"; -import NoDataText from "@/components/_ShareComponent/NoDataText"; -import { ICON_SIZE_BUTTON } from "@/constants/constans-value"; -import { apiAdminInvestment } from "@/service/api-admin/api-admin-investment"; -import { Octicons } from "@expo/vector-icons"; -import { router, useFocusEffect, useLocalSearchParams } from "expo-router"; -import _ from "lodash"; -import React, { useCallback } from "react"; -import { Divider } from "react-native-paper"; +import { Admin_ScreenInvestmentStatus } from "@/screens/Admin/Investment/ScreenInvestmentStatus"; export default function AdminInvestmentStatus() { - const { status } = useLocalSearchParams(); - const [listData, setListData] = React.useState(null); - const [loadData, setLoadingData] = React.useState(false); - const [search, setSearch] = React.useState(""); - - useFocusEffect( - useCallback(() => { - onLoadData(); - }, [status, search]) - ); - - const onLoadData = async () => { - try { - setLoadingData(true); - const response = await apiAdminInvestment({ - category: status as "publish" | "review" | "reject", - search, - }); - - if (response.success) { - setListData(response.data); - } - } catch (error) { - console.log(error); - setListData([]); - } finally { - setLoadingData(false); - } - }; - - const rightComponent = ( - - ); - return ( - <> - }> - - - - - - - {loadData ? ( - - ) : _.isEmpty(listData) ? ( - - ) : ( - listData?.map((item: any, index: number) => ( - - } - onPress={() => { - router.push(`/admin/investment/${item.id}/${status}`); - }} - /> - } - value2={{item?.author?.username}} - value3={ - - {item?.title} - - } - /> - )) - )} - - - - ); + return ; } diff --git a/docs/prompt-for-qwen-code.md b/docs/prompt-for-qwen-code.md index c0a1ed7..97b34f2 100644 --- a/docs/prompt-for-qwen-code.md +++ b/docs/prompt-for-qwen-code.md @@ -55,10 +55,10 @@ Component yang digunakan: components/_ShareComponent/NewWrapper.tsx -File source: app/(application)/admin/donation/[id]/list-disbursement-of-funds.tsx -Folder tujuan: screens/Admin/Donation -Nama file utama: ScreenDonationListDisbursementOfFunds.tsx -Nama function utama: Admin_ScreenDonationListDisbursementOfFunds +File source: app/(application)/admin/investment/[id]/list-of-investor.tsx +Folder tujuan: screens/Admin/Investment +Nama file utama: ScreenInvestmentListOfInvestor.tsx +Nama function utama: Admin_ScreenInvestmentListOfInvestor File komponen wrapper: components/_ShareComponent/NewWrapper.tsx Buat file baru pada "Folder tujuan" dengan nama "Nama file utama" dan ubah nama function menjadi "Nama function utama" kemudian clean code, import dan panggil function tersebut pada file "File source" @@ -66,8 +66,8 @@ Analisa juga file "Nama file utama" , jika belum menggunakan NewWrapper pada fil -Function fecth: apiAdminDonationDisbursementOfFundsListById -File function fetch: service/api-admin/api-admin-donation.ts +Function fecth: apiAdminInvestmentListOfInvestor +File function fetch: service/api-admin/api-admin-investment.ts Terapkan pagination pada file "Nama file utama" Komponen pagination yang digunaka berada pada file hooks/use-pagination.tsx dan helpers/paginationHelpers.tsx @@ -80,10 +80,10 @@ Gunakan bahasa indonesia pada cli agar saya mudah membacanya. -File refrensi: screens/Admin/Voting/ScreenEventTypeOfEvent.tsx +File refrensi: screens/Admin/Donation/ScreenDonationListOfDonatur.tsx Anda bisa menggunakan refrensi dari "File refrensi" jika butuh pemahaman dengan tipe fitur yang hampir sama -Untuk refrensi tampilan Box bisa anda gunakan dari file: screens/Admin/Donation/BoxDonationCategory.tsx dan buatkan komponen yang mirip untuk list of donatur dengan nama file: BoxDonationListOfDonatur.tsx +Untuk refrensi tampilan Box bisa anda gunakan dari file: screens/Admin/Donation/BoxDonationListOfDonatur.tsx dan buatkan komponen yang mirip untuk list of donatur dengan nama file: BoxDonationListOfInvestor.tsx Terapkan NewWrapper pada file: screens/Admin/App-Information/InformationBankSection.tsx @@ -108,9 +108,10 @@ Jika tidak ada props page maka tambahkan props page dan default page: "1" ( stri Jika butuh refrensi FlatList bisa lihat pada file components/_ShareComponent/NewWrapper.tsx -File Utama: screens/Admin/Donation/Admin_ScreenDonationStatus.tsx -Folder tujuan: screens/Admin/Donation -Buat box component baru pada file "File Utama" di bagian renderItem, +File Utama: screens/Admin/Investment/ScreenInvestmentStatus.tsx +Folder tujuan: screens/Admin/Investment +Reffrensi: screens/Admin/Donation/BoxDonationStatus.tsx +Buatkan box component baru pada file "File Utama" di bagian renderItem agar lebih rapi buat file baru dengan nama BoxInvestmentStatus.tsx diff --git a/screens/Admin/Donation/BoxDonationStatus.tsx b/screens/Admin/Donation/BoxDonationStatus.tsx index 55721e3..e113d5c 100644 --- a/screens/Admin/Donation/BoxDonationStatus.tsx +++ b/screens/Admin/Donation/BoxDonationStatus.tsx @@ -38,7 +38,7 @@ export default function Admin_BoxDonationStatus({ } /> Target} + label={Target Dana} value={ {item?.target diff --git a/screens/Admin/Investment/BoxInvestmentListOfInvestor.tsx b/screens/Admin/Investment/BoxInvestmentListOfInvestor.tsx new file mode 100644 index 0000000..f3e62cf --- /dev/null +++ b/screens/Admin/Investment/BoxInvestmentListOfInvestor.tsx @@ -0,0 +1,63 @@ +import { BadgeCustom, Divider, StackCustom, TextCustom } from "@/components"; +import AdminBasicBox from "@/components/_ShareComponent/Admin/AdminBasicBox"; +import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8"; +import { colorBadgeTransaction } from "@/utils/colorBadge"; +import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay"; +import { router } from "expo-router"; +import _ from "lodash"; + +interface BoxInvestmentListOfInvestorProps { + item: any; +} + +export default function Admin_BoxInvestmentListOfInvestor({ + item, +}: BoxInvestmentListOfInvestorProps) { + const statusName = item?.StatusInvoice?.name || "-"; + + return ( + <> + { + router.push( + `/admin/investment/${item?.id}/${_.lowerCase( + item?.StatusInvoice?.name, + )}/transaction-detail`, + ); + }} + > + + + + {item?.Author?.username || "-"} + + + + Status} + value={ + + {statusName} + + } + /> + Nominal} + value={ + + {item?.nominal + ? `Rp ${formatCurrencyDisplay(item?.nominal)}` + : "-"} + + } + /> + + + + ); +} diff --git a/screens/Admin/Investment/BoxInvestmentStatus.tsx b/screens/Admin/Investment/BoxInvestmentStatus.tsx new file mode 100644 index 0000000..90c869a --- /dev/null +++ b/screens/Admin/Investment/BoxInvestmentStatus.tsx @@ -0,0 +1,54 @@ +import { Divider, StackCustom, TextCustom } from "@/components"; +import AdminBasicBox from "@/components/_ShareComponent/Admin/AdminBasicBox"; +import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8"; +import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay"; +import { router } from "expo-router"; +import { View } from "react-native"; + +interface BoxInvestmentStatusProps { + item: any; + status?: string; +} + +export default function Admin_BoxInvestmentStatus({ + item, + status, +}: BoxInvestmentStatusProps) { + return ( + <> + { + router.push(`/admin/investment/${item.id}/${status}`); + }} + > + + + + {item?.title || "-"} + + + + Durasi} + value={ + + {item?.MasterPencarianInvestor?.name || "-"} hari + + } + /> + Target Dana} + value={ + + {item?.targetDana + ? `Rp ${formatCurrencyDisplay(item?.targetDana)}` + : "-"} + + } + /> + + + + ); +} diff --git a/screens/Admin/Investment/ScreenInvestmentListOfInvestor.tsx b/screens/Admin/Investment/ScreenInvestmentListOfInvestor.tsx new file mode 100644 index 0000000..e46a28c --- /dev/null +++ b/screens/Admin/Investment/ScreenInvestmentListOfInvestor.tsx @@ -0,0 +1,132 @@ +import { SelectCustom } from "@/components"; +import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle"; +import NewWrapper from "@/components/_ShareComponent/NewWrapper"; +import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value"; +import { createPaginationComponents } from "@/helpers/paginationHelpers"; +import { usePagination } from "@/hooks/use-pagination"; +import { apiAdminInvestmentListOfInvestor } from "@/service/api-admin/api-admin-investment"; +import { apiMasterTransaction } from "@/service/api-client/api-master"; +import { useLocalSearchParams } from "expo-router"; +import _ from "lodash"; +import { useCallback, useEffect, useMemo, useState } from "react"; +import { RefreshControl } from "react-native"; +import Admin_BoxInvestmentListOfInvestor from "./BoxInvestmentListOfInvestor"; + +export function Admin_ScreenInvestmentListOfInvestor() { + const { id } = useLocalSearchParams(); + const [selectValue, setSelectValue] = useState(null); + const [selectedStatus, setSelectedStatus] = useState(null); + const [master, setMaster] = useState([]); + + // Gunakan hook pagination + const pagination = usePagination({ + fetchFunction: async (page, searchQuery) => { + const response = await apiAdminInvestmentListOfInvestor({ + id: id as string, + status: selectedStatus as any, + page: String(page), + }); + + if (response.success) { + return { data: response.data }; + } else { + return { data: [] }; + } + }, + pageSize: PAGINATION_DEFAULT_TAKE, + searchQuery: "", + dependencies: [id, selectedStatus], + }); + + // Load master data untuk select option + useEffect(() => { + onLoadMaster(); + }, []); + + const onLoadMaster = async () => { + try { + const response = await apiMasterTransaction(); + if (response.success) { + setMaster(response.data); + } + } catch (error) { + console.log("[ERROR]", error); + setMaster([]); + } + }; + + // Komponen select untuk filter status + const searchComponent = useMemo( + () => ( + ({ + label: item.name, + value: item.id, + })) + } + value={selectValue} + onChange={(value: any) => { + setSelectValue(value); + const nameSelected = master.find((item: any) => item.id === value); + const statusChooses = _.lowerCase(nameSelected?.name); + setSelectedStatus(statusChooses); + }} + styleContainer={{ width: "100%", marginBottom: 0 }} + allowClear + /> + ), + [master, selectValue] + ); + + // Header component dengan back button dan select filter + const headerComponent = useMemo( + () => , + [searchComponent] + ); + + // Render item untuk daftar investor + const renderItem = useCallback( + ({ item, index }: { item: any; index: number }) => ( + + ), + [] + ); + + // Buat komponen-komponen pagination + const { ListEmptyComponent, ListFooterComponent } = + createPaginationComponents({ + loading: pagination.loading, + refreshing: pagination.refreshing, + listData: pagination.listData, + searchQuery: "", + emptyMessage: "Belum ada data investor", + emptySearchMessage: "Tidak ada hasil pencarian", + isInitialLoad: pagination.isInitialLoad, + skeletonCount: PAGINATION_DEFAULT_TAKE, + skeletonHeight: 100, + }); + + return ( + item.id?.toString() || `fallback-${item.id}`} + headerComponent={headerComponent} + ListEmptyComponent={ListEmptyComponent} + ListFooterComponent={ListFooterComponent} + onEndReached={pagination.loadMore} + refreshControl={ + + } + /> + ); +} diff --git a/screens/Admin/Investment/ScreenInvestmentStatus.tsx b/screens/Admin/Investment/ScreenInvestmentStatus.tsx new file mode 100644 index 0000000..61fa36a --- /dev/null +++ b/screens/Admin/Investment/ScreenInvestmentStatus.tsx @@ -0,0 +1,109 @@ +import { SearchInput } from "@/components"; +import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage"; +import NewWrapper from "@/components/_ShareComponent/NewWrapper"; +import { + PAGINATION_DEFAULT_TAKE, +} from "@/constants/constans-value"; +import { createPaginationComponents } from "@/helpers/paginationHelpers"; +import { usePagination } from "@/hooks/use-pagination"; +import { apiAdminInvestment } from "@/service/api-admin/api-admin-investment"; +import { useLocalSearchParams } from "expo-router"; +import _ from "lodash"; +import { useCallback, useMemo, useState } from "react"; +import { RefreshControl } from "react-native"; +import Admin_BoxInvestmentStatus from "./BoxInvestmentStatus"; + +export function Admin_ScreenInvestmentStatus() { + const { status } = useLocalSearchParams(); + const [search, setSearch] = useState(""); + + // Gunakan hook pagination + const pagination = usePagination({ + fetchFunction: async (page, searchQuery) => { + const response = await apiAdminInvestment({ + category: status as "publish" | "review" | "reject", + search: searchQuery, + page: String(page), + }); + + if (response.success) { + return { data: response.data }; + } else { + return { data: [] }; + } + }, + pageSize: PAGINATION_DEFAULT_TAKE, + searchQuery: search, + dependencies: [status], + }); + + // Komponen search input untuk header + const rightComponent = useMemo( + () => ( + setSearch(value)} + /> + ), + [search], + ); + + // Render item untuk daftar investasi menggunakan Box Component + const renderItem = useCallback( + ({ item, index }: { item: any; index: number }) => ( + + ), + [status], + ); + + // Header component dengan judul status investasi + const headerComponent = useMemo( + () => ( + + ), + [status, rightComponent], + ); + + // Buat komponen-komponen pagination + const { ListEmptyComponent, ListFooterComponent } = + createPaginationComponents({ + loading: pagination.loading, + refreshing: pagination.refreshing, + listData: pagination.listData, + searchQuery: search, + emptyMessage: "Belum ada data", + emptySearchMessage: "Tidak ada hasil pencarian", + isInitialLoad: pagination.isInitialLoad, + skeletonCount: PAGINATION_DEFAULT_TAKE, + skeletonHeight: 120, + }); + + return ( + item.id?.toString() || `fallback-${item.id}`} + headerComponent={headerComponent} + ListEmptyComponent={ListEmptyComponent} + ListFooterComponent={ListFooterComponent} + onEndReached={pagination.loadMore} + refreshControl={ + + } + /> + ); +} diff --git a/screens/Admin/listPageAdmin.tsx b/screens/Admin/listPageAdmin.tsx index 4726614..71e389f 100644 --- a/screens/Admin/listPageAdmin.tsx +++ b/screens/Admin/listPageAdmin.tsx @@ -72,16 +72,16 @@ const adminListMenu: NavbarItem[] = [ { label: "Report Komentar", link: "/admin/forum/report-comment" }, ], }, - { - label: "Collaboration", - icon: "people", - links: [ - { label: "Dashboard", link: "/admin/collaboration" }, - { label: "Publish", link: "/admin/collaboration/publish" }, - { label: "Group", link: "/admin/collaboration/group" }, - { label: "Reject", link: "/admin/collaboration/reject" }, - ], - }, + // { + // label: "Collaboration", + // icon: "people", + // links: [ + // { label: "Dashboard", link: "/admin/collaboration" }, + // { label: "Publish", link: "/admin/collaboration/publish" }, + // { label: "Group", link: "/admin/collaboration/group" }, + // { label: "Reject", link: "/admin/collaboration/reject" }, + // ], + // }, { label: "Maps", icon: "map", link: "/admin/maps" }, { label: "App Information", @@ -165,16 +165,16 @@ const superAdminListMenu: NavbarItem[] = [ { label: "Report Komentar", link: "/admin/forum/report-comment" }, ], }, - { - label: "Collaboration", - icon: "people", - links: [ - { label: "Dashboard", link: "/admin/collaboration" }, - { label: "Publish", link: "/admin/collaboration/publish" }, - { label: "Group", link: "/admin/collaboration/group" }, - { label: "Reject", link: "/admin/collaboration/reject" }, - ], - }, + // { + // label: "Collaboration", + // icon: "people", + // links: [ + // { label: "Dashboard", link: "/admin/collaboration" }, + // { label: "Publish", link: "/admin/collaboration/publish" }, + // { label: "Group", link: "/admin/collaboration/group" }, + // { label: "Reject", link: "/admin/collaboration/reject" }, + // ], + // }, { label: "Maps", icon: "map", link: "/admin/maps" }, { label: "App Information", diff --git a/service/api-admin/api-admin-investment.ts b/service/api-admin/api-admin-investment.ts index 510bd9c..d2901df 100644 --- a/service/api-admin/api-admin-investment.ts +++ b/service/api-admin/api-admin-investment.ts @@ -4,14 +4,16 @@ import { apiConfig } from "../api-config"; export async function apiAdminInvestment({ category, search, + page = "1", }: { category: "dashboard" | "publish" | "review" | "reject"; search?: string; + page?: string; }) { const propsQuery = category === "dashboard" - ? `category=${category}` - : `category=${category}&search=${search}`; + ? `category=${category}&page=${page}` + : `category=${category}&search=${search}&page=${page}`; try { const response = await apiConfig.get( @@ -57,15 +59,23 @@ export async function apiAdminInvestasiUpdateByStatus({ export async function apiAdminInvestmentListOfInvestor({ id, status, + page = "1", }: { id: string; status: "berhasil" | "gagal" | "proses" | "menunggu" | null; + page?: string; }) { - const query = status && status !== null ? `?status=${status}` : ""; + const queryParams = new URLSearchParams(); + + if (status && status !== null) { + queryParams.append("status", status); + } + + queryParams.append("page", page); try { const response = await apiConfig.get( - `/mobile/admin/investment/${id}/investor${query}` + `/mobile/admin/investment/${id}/investor?${queryParams.toString()}` ); return response.data; } catch (error) {