Integrasi API: Admin Investasi

Fix:
- app/(application)/(user)/investment/(tabs)/index.tsx
- app/(application)/admin/investment/[id]/[status]/transaction-detail.tsx
- app/(application)/admin/investment/[id]/list-of-investor.tsx
- screens/Invesment/BoxBerandaSection.tsx
- screens/Invesment/DetailDataPublishSection.tsx
- service/api-admin/api-admin-investment.ts

### No Issue

app/(application)/(user)/investment/(tabs)/index.tsx

@@ -1,25 +1,14 @@
 import {
-  BaseBox,
   FloatingButton,
-  Grid,
   LoaderCustom,
-  ProgressCustom,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
+  ViewWrapper
 } from "@/components";
 import NoDataText from "@/components/_ShareComponent/NoDataText";
-import API_STRORAGE from "@/constants/base-url-api-strorage";
-import DUMMY_IMAGE from "@/constants/dummy-image-value";
 import Investment_BoxBerandaSection from "@/screens/Invesment/BoxBerandaSection";
 import { apiInvestmentGetAll } from "@/service/api-client/api-investment";
-import { Ionicons } from "@expo/vector-icons";
-import dayjs from "dayjs";
-import { Image } from "expo-image";
 import { router, useFocusEffect } from "expo-router";
 import _ from "lodash";
 import { useCallback, useState } from "react";
-import { View } from "react-native";
 
 export default function InvestmentBursa() {
   const [list, setList] = useState<any[] | null>(null);

app/(application)/admin/investment/[id]/[status]/transaction-detail.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BadgeCustom,
   BaseBox,
@@ -9,12 +10,38 @@ import {
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
-import { MainColor } from "@/constants/color-palet";
-import dayjs from "dayjs";
-import { router, useLocalSearchParams } from "expo-router";
+import { apiAdminInvestmentGetOneInvoiceById } from "@/service/api-admin/api-admin-investment";
+import { colorBadgeTransaction } from "@/utils/colorBadge";
+import { dateTimeView } from "@/utils/dateTimeView";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function AdminInvestmentTransactionDetail() {
   const { id } = useLocalSearchParams();
+  console.log("[ID]", id);
+
+  const [data, setData] = useState<any | null>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiAdminInvestmentGetOneInvoiceById({
+        id: id as string,
+      });
+      console.log("[RESPONSE]", JSON.stringify(response, null, 2));
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
 
   const buttonAction = (
     <BoxButtonOnFooter>
@@ -25,30 +52,41 @@ export default function AdminInvestmentTransactionDetail() {
   const listData = [
     {
       label: "Investor",
-      value: "Bagas Banuna",
+      value: data?.Author?.username || "-",
     },
     {
       label: "Bank",
-      value: "BCA",
+      value: data?.MasterBank?.namaBank || "-",
     },
     {
       label: "Jumlah Investasi",
-      value: "Rp. 1.000.000",
+      value: `Rp. ${formatCurrencyDisplay(data?.nominal) || "-"}`,
     },
     {
       label: "Status",
-      value: <BadgeCustom color={MainColor.green}>Berhasil</BadgeCustom>,
+      value:
+        data && data?.StatusInvoice?.name ? (
+          <BadgeCustom
+            color={colorBadgeTransaction({
+              status: data?.StatusInvoice?.name,
+            })}
+          >
+            {data?.StatusInvoice?.name}
+          </BadgeCustom>
+        ) : (
+          "-"
+        ),
     },
     {
       label: "Tanggal",
-      value: dayjs().format("DD-MM-YYYY HH:mm:ss"),
+      value: data && dateTimeView({ date: data?.createdAt }) || "-",
     },
     {
       label: "Bukti Transfer",
       value: (
         <ButtonCustom
           onPress={() =>
-            router.push(`/(application)/(image)/preview-image/${id}`)
+            router.push(`/(application)/(image)/preview-image/${data?.imageId}`)
           }
         >
           Cek
@@ -60,7 +98,9 @@ export default function AdminInvestmentTransactionDetail() {
   return (
     <>
       <ViewWrapper
-        headerComponent={<AdminBackButtonAntTitle title="Detail Transaksi Investor" />}
+        headerComponent={
+          <AdminBackButtonAntTitle title="Detail Transaksi Investor" />
+        }
         footerComponent={buttonAction}
       >
         <BaseBox>

app/(application)/admin/investment/[id]/list-of-investor.tsx

@@ -1,7 +1,9 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   ActionIcon,
   BadgeCustom,
   CenterCustom,
+  LoaderCustom,
   SelectCustom,
   StackCustom,
   TextCustom,
@@ -10,23 +12,100 @@ import {
 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 { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
 import { dummyMasterStatusTransaction } from "@/lib/dummy-data/_master/status-transaction";
-import { router, useLocalSearchParams } from "expo-router";
-import React from "react";
+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";
 
 export default function AdminInvestmentListOfInvestor() {
   const { id } = useLocalSearchParams();
+  console.log("[ID]", id);
+
+  const [listData, setListData] = React.useState<any[] | null>(null);
+  const [loadData, setLoadData] = React.useState(false);
+  const [master, setMaster] = React.useState<any[]>([]);
+
+  const [selectValue, setSelectValue] = React.useState<string | null>(null);
+  const [selectedStatus, setSelectedStatus] = React.useState<string | null>(
+    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 = (
     <View style={{ flexDirection: "row", gap: 5 }}>
       <SelectCustom
         placeholder="Pilih status transaksi"
-        data={dummyMasterStatusTransaction}
-        onChange={(value) => console.log(value)}
+        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
       />
     </View>
   );
@@ -40,66 +119,77 @@ export default function AdminInvestmentListOfInvestor() {
 
   return (
     <>
-      <ViewWrapper
-        headerComponent={headerComponent}
-      >
-        <GridViewCustomSpan
-          span1={3}
-          span2={5}
-          span3={4}
-          component1={
-            <TextCustom bold align="center">
-              Aksi
-            </TextCustom>
-          }
-          component2={
-            <TextCustom bold align="center">
-              Investor
-            </TextCustom>
-          }
-          component3={
-            <TextCustom bold align="center">
-              Status
-            </TextCustom>
-          }
-        />
-        <Divider />
+      <ViewWrapper headerComponent={headerComponent}>
         <StackCustom>
-          {Array.from({ length: 10 }).map((_, index) => (
-            <View key={index}>
-              <GridViewCustomSpan
-                span1={3}
-                span2={5}
-                span3={4}
-                component1={
-                  <CenterCustom>
-                    <ActionIcon
-                      icon={<IconView size={ICON_SIZE_BUTTON} color="black" />}
-                      onPress={() => {
-                        router.push(
-                          `/admin/investment/${id}/berhasil/transaction-detail`
-                        );
-                      }}
-                    />
-                  </CenterCustom>
-                }
-                component2={
-                  <TextCustom bold align="center" truncate>
-                    Bagas Banuna
-                  </TextCustom>
-                }
-                component3={
-                  <BadgeCustom
-                    style={{ alignSelf: "center" }}
-                    color={MainColor.green}
-                  >
-                    Berhasil
-                  </BadgeCustom>
-                }
-              />
-              <Divider />
-            </View>
-          ))}
+          <GridViewCustomSpan
+            span1={3}
+            span2={5}
+            span3={4}
+            component1={
+              <TextCustom bold align="center">
+                Aksi
+              </TextCustom>
+            }
+            component2={
+              <TextCustom bold align="center">
+                Investor
+              </TextCustom>
+            }
+            component3={
+              <TextCustom bold align="center">
+                Status
+              </TextCustom>
+            }
+          />
+          <Divider />
+          <StackCustom>
+            {loadData ? (
+              <LoaderCustom />
+            ) : _.isEmpty(listData) ? (
+              <NoDataText />
+            ) : (
+              listData?.map((item: any, index: number) => (
+                <View key={index}>
+                  <GridViewCustomSpan
+                    span1={3}
+                    span2={5}
+                    span3={4}
+                    component1={
+                      <CenterCustom>
+                        <ActionIcon
+                          icon={
+                            <IconView size={ICON_SIZE_BUTTON} color="black" />
+                          }
+                          onPress={() => {
+                            router.push(
+                              `/admin/investment/${item?.id}/${_.lowerCase(
+                                item?.StatusInvoice?.name
+                              )}/transaction-detail`
+                            );
+                          }}
+                        />
+                      </CenterCustom>
+                    }
+                    component2={
+                      <TextCustom bold align="center" truncate>
+                        {item?.Author?.username || "-"}
+                      </TextCustom>
+                    }
+                    component3={
+                      <BadgeCustom
+                        style={{ alignSelf: "center" }}
+                        color={colorBadgeTransaction({
+                          status: item?.StatusInvoice?.name,
+                        })}
+                      >
+                        {item?.StatusInvoice?.name}
+                      </BadgeCustom>
+                    }
+                  />
+                </View>
+              ))
+            )}
+          </StackCustom>
         </StackCustom>
       </ViewWrapper>
     </>

screens/Invesment/BoxBerandaSection.tsx

@@ -1,16 +1,15 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-  BaseBox,
-  Grid,
-  StackCustom,
-  TextCustom,
-  ProgressCustom,
+    BaseBox,
+    Grid,
+    ProgressCustom,
+    StackCustom,
+    TextCustom,
 } from "@/components";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DUMMY_IMAGE from "@/constants/dummy-image-value";
 import { countDownAndCondition } from "@/utils/countDownAndCondition";
 import { Ionicons } from "@expo/vector-icons";
-import dayjs from "dayjs";
 import { Image } from "expo-image";
 import { useEffect, useState } from "react";
 import { View } from "react-native";

screens/Invesment/DetailDataPublishSection.tsx

@@ -1,15 +1,15 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { ButtonCustom, Spacing, StackCustom, TextCustom } from "@/components";
+import { ButtonCustom, Spacing, StackCustom } from "@/components";
+import ReportBox from "@/components/Box/ReportBox";
 import {
   listDataNotPublishInvesment,
   listDataPublishInvesment,
 } from "@/lib/dummy-data/investment/dummy-data-not-publish";
+import { countDownAndCondition } from "@/utils/countDownAndCondition";
 import React, { useEffect, useState } from "react";
 import Invesment_BoxDetailDataSection from "./BoxDetailDataSection";
 import Invesment_BoxProgressSection from "./BoxProgressSection";
 import Investment_ButtonStatusSection from "./ButtonStatusSection";
-import ReportBox from "@/components/Box/ReportBox";
-import { countDownAndCondition } from "@/utils/countDownAndCondition";
 
 export default function Invesment_DetailDataPublishSection({
   status,

service/api-admin/api-admin-investment.ts

@@ -52,3 +52,37 @@ export async function apiAdminInvestasiUpdateByStatus({
     throw error;
   }
 }
+
+export async function apiAdminInvestmentListOfInvestor({
+  id,
+  status,
+}: {
+  id: string;
+  status: "berhasil" | "gagal" | "proses" | "menunggu" | null;
+}) {
+  const query = status && status !== null ? `?status=${status}` : "";
+
+  try {
+    const response = await apiConfig.get(
+      `/mobile/admin/investment/${id}/investor${query}`
+    );
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiAdminInvestmentGetOneInvoiceById({
+  id,
+}: {
+  id: string;
+}) {
+  try {
+    const response = await apiConfig.get(
+      `/mobile/admin/investment/${id}/invoice`
+    );
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}