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

Ringkasan Perubahan

Browse Source 
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
This commit is contained in:
bagasbanuna
2026-02-19 14:06:02 +08:00
parent f284e2ec02
commit 4862975402
14 changed files with 789 additions and 508 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
screens/Admin/Donation/BoxDonationStatus.tsx
View File

@@ -38,7 +38,7 @@ export default function Admin_BoxDonationStatus({
}
/>
<GridSpan_4_8
label={<TextCustom>Target</TextCustom>}
label={<TextCustom>Target Dana</TextCustom>}
value={
<TextCustom>
{item?.target

63
screens/Admin/Investment/BoxInvestmentListOfInvestor.tsx Normal file
View File

@@ -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 (
<>
<AdminBasicBox
style={{ marginHorizontal: 10, marginVertical: 5 }}
onPress={() => {
router.push(
`/admin/investment/${item?.id}/${_.lowerCase(
item?.StatusInvoice?.name,
)}/transaction-detail`,
);
}}
>
<StackCustom gap={0}>
<StackCustom style={{ paddingBlock: 8 }}>
<TextCustom size="large" bold truncate>
{item?.Author?.username || "-"}
</TextCustom>
</StackCustom>
<Divider />
<GridSpan_4_8
label={<TextCustom>Status</TextCustom>}
value={
<BadgeCustom
color={colorBadgeTransaction({
status: statusName,
})}
>
{statusName}
</BadgeCustom>
}
/>
<GridSpan_4_8
label={<TextCustom>Nominal</TextCustom>}
value={
<TextCustom>
{item?.nominal
? `Rp ${formatCurrencyDisplay(item?.nominal)}`
: "-"}
</TextCustom>
}
/>
</StackCustom>
</AdminBasicBox>
</>
);
}

54
screens/Admin/Investment/BoxInvestmentStatus.tsx Normal file
View File

@@ -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 (
<>
<AdminBasicBox
style={{ marginHorizontal: 10, marginVertical: 5 }}
onPress={() => {
router.push(`/admin/investment/${item.id}/${status}`);
}}
>
<StackCustom gap={0}>
<View style={{ paddingBlock: 8 }}>
<TextCustom size={"large"} bold truncate={2}>
{item?.title || "-"}
</TextCustom>
</View>
<Divider />
<GridSpan_4_8
label={<TextCustom>Durasi</TextCustom>}
value={
<TextCustom>
{item?.MasterPencarianInvestor?.name || "-"} hari
</TextCustom>
}
/>
<GridSpan_4_8
label={<TextCustom>Target Dana</TextCustom>}
value={
<TextCustom>
{item?.targetDana
? `Rp ${formatCurrencyDisplay(item?.targetDana)}`
: "-"}
</TextCustom>
}
/>
</StackCustom>
</AdminBasicBox>
</>
);
}

132
screens/Admin/Investment/ScreenInvestmentListOfInvestor.tsx Normal file
View File

@@ -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<string | null>(null);
const [selectedStatus, setSelectedStatus] = useState<string | null>(null);
const [master, setMaster] = useState<any[]>([]);
// 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(
() => (
<SelectCustom
placeholder="Pilih status transaksi"
data={
_.isEmpty(master)
? []
: master?.map((item: any) => ({
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(
() => <AdminBackButtonAntTitle newComponent={searchComponent} />,
[searchComponent]
);
// Render item untuk daftar investor
const renderItem = useCallback(
({ item, index }: { item: any; index: number }) => (
<Admin_BoxInvestmentListOfInvestor key={index} item={item} />
),
[]
);
// 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 (
<NewWrapper
listData={pagination.listData}
renderItem={renderItem}
keyExtractor={(item: any) => item.id?.toString() || `fallback-${item.id}`}
headerComponent={headerComponent}
ListEmptyComponent={ListEmptyComponent}
ListFooterComponent={ListFooterComponent}
onEndReached={pagination.loadMore}
refreshControl={
<RefreshControl
refreshing={pagination.refreshing}
onRefresh={pagination.onRefresh}
tintColor="#E1B525"
colors={["#E1B525"]}
/>
}
/>
);
}

109
screens/Admin/Investment/ScreenInvestmentStatus.tsx Normal file
View File

@@ -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<string>("");
// 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(
() => (
<SearchInput
containerStyle={{ width: "100%", marginBottom: 0 }}
placeholder="Cari judul investasi"
value={search}
onChangeText={(value) => setSearch(value)}
/>
),
[search],
);
// Render item untuk daftar investasi menggunakan Box Component
const renderItem = useCallback(
({ item, index }: { item: any; index: number }) => (
<Admin_BoxInvestmentStatus
key={index}
item={item}
status={status as string}
/>
),
[status],
);
// Header component dengan judul status investasi
const headerComponent = useMemo(
() => (
<AdminComp_BoxTitle
title={`Investasi ${_.startCase(status as string)}`}
rightComponent={rightComponent}
/>
),
[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 (
<NewWrapper
listData={pagination.listData}
renderItem={renderItem}
keyExtractor={(item: any) => item.id?.toString() || `fallback-${item.id}`}
headerComponent={headerComponent}
ListEmptyComponent={ListEmptyComponent}
ListFooterComponent={ListFooterComponent}
onEndReached={pagination.loadMore}
refreshControl={
<RefreshControl
refreshing={pagination.refreshing}
onRefresh={pagination.onRefresh}
tintColor="#E1B525"
colors={["#E1B525"]}
/>
}
/>
);
}

40
screens/Admin/listPageAdmin.tsx
View File

@@ -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",