Invesment

Fix: Integrasi API ke UI
- investment/[id]/(transaction-flow)/index.tsx
- investment/[id]/index.tsx

### Issue: input data untuk total lembar dan sisa lembar berisi . dianatra angkanya

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

@@ -2,18 +2,46 @@ import {
   BaseBox,
   FloatingButton,
   Grid,
+  LoaderCustom,
   ProgressCustom,
   StackCustom,
   TextCustom,
   ViewWrapper,
 } from "@/components";
+import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DUMMY_IMAGE from "@/constants/dummy-image-value";
+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 } from "expo-router";
+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);
+  const [loadingList, setLoadingList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadingList(true);
+      const response = await apiInvestmentGetAll();
+      console.log("[DATA LIST]", JSON.stringify(response.data, null, 2));
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingList(false);
+    }
+  };
+
   return (
     <ViewWrapper
       hideFooter
@@ -21,40 +49,77 @@ export default function InvestmentBursa() {
         <FloatingButton onPress={() => router.push("/investment/create")} />
       }
     >
-      {Array.from({ length: 10 }).map((_, index) => (
-        <BaseBox key={index} paddingTop={7} paddingBottom={7} href={`/investment/${index}`}>
-          <Grid>
-            <Grid.Col span={5}>
-              <Image
-                source={DUMMY_IMAGE.background}
-                style={{ width: "auto", height: 100, borderRadius: 10 }}
-              />
-            </Grid.Col>
-            <Grid.Col span={1}>
-              <View />
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <StackCustom>
-                <TextCustom truncate={2}>
-                  Title here : Lorem ipsum dolor sit amet consectetur
-                  adipisicing elit. Omnis, exercitationem, sequi enim quod
-                  distinctio maiores laudantium amet, quidem atque repellat sit
-                  vitae qui aliquam est veritatis laborum eum voluptatum totam!
-                </TextCustom>
-                <ProgressCustom value={index % 5 * 20} size="lg" />
-                <TextCustom>
-                  Sisa waktu: {dayjs().diff(dayjs(), "day")} hari
-                </TextCustom>
-              </StackCustom>
-            </Grid.Col>
-          </Grid>
-        </BaseBox>
-      ))}
+      {loadingList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(list) ? (
+        <TextCustom>Belum ada data</TextCustom>
+      ) : (
+        list?.map((item: any, index: number) => (
+          <BaseBox
+            key={index}
+            paddingTop={7}
+            paddingBottom={7}
+            href={`/investment/${item.id}`}
+          >
+            <Grid>
+              <Grid.Col span={5}>
+                <Image
+                  source={
+                    item && item.imageId
+                      ? API_STRORAGE.GET({ fileId: item.imageId })
+                      : DUMMY_IMAGE.background
+                  }
+                  style={{ width: "auto", height: 100, borderRadius: 10 }}
+                />
+              </Grid.Col>
+              <Grid.Col span={1}>
+                <View />
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <StackCustom>
+                  <TextCustom truncate={2}>{item.title}</TextCustom>
+                  <ProgressCustom
+                    label={`${item.progress}%`}
+                    value={item.progress}
+                    size="lg"
+                  />
+                  {Number(item?.pencarianInvestor) -
+                    dayjs().diff(dayjs(item.countDown), "days") <=
+                  0 ? (
+                    <View
+                      style={{
+                        flexDirection: "row",
+                        alignItems: "center",
+                        gap: 5,
+                      }}
+                    >
+                      <Ionicons
+                        name="alert-circle-outline"
+                        size={16}
+                        color="red"
+                      />
+                      <TextCustom color="red" size="small">
+                        Periode Investasi Selesai
+                      </TextCustom>
+                    </View>
+                  ) : (
+                    <TextCustom>
+                      Sisa waktu:{" "}
+                      {Number(item?.pencarianInvestor) -
+                        dayjs().diff(dayjs(item.countDown), "days")}{" "}
+                      hari
+                    </TextCustom>
+                  )}
+                </StackCustom>
+              </Grid.Col>
+            </Grid>
+          </BaseBox>
+        ))
+      )}
     </ViewWrapper>
   );
 }
 
-
 //   <View style={{ padding: 20, gap: 16 }}>
 //     <TextCustom>Progress 70%</TextCustom>
 //     <ProgressCustom value={70} color="primary" size="md" />
@@ -78,4 +143,4 @@ export default function InvestmentBursa() {
 //     <ProgressCustom value={90} color="warning" size="lg" showLabel={false} />
 
 //     <ProgressCustom value={null} color="error" size="sm" label="Loading..." />
-//   </View>;
+//   </View>;

app/(application)/(user)/investment/[id]/(document)/add-document.tsx

@@ -7,17 +7,78 @@ import {
   InformationBox,
   Spacing,
   StackCustom,
+  TextCustom,
   TextInputCustom,
-  ViewWrapper
+  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
+import DIRECTORY_ID from "@/constants/directory-id";
+import { apiInvestmentUpsertDocument } from "@/service/api-client/api-investment";
+import { uploadFileService } from "@/service/upload-service";
+import pickFile from "@/utils/pickFile";
 import { FontAwesome5 } from "@expo/vector-icons";
-import { router } from "expo-router";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function InvestmentAddDocument() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState({
+    title: "",
+  });
+  const [pdf, setPdf] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const handlerSubmit = async () => {
+    try {
+      setIsLoading(true);
+      const responseUploadFile = await uploadFileService({
+        dirId: DIRECTORY_ID.investasi_dokumen,
+        imageUri: pdf.uri,
+      });
+
+      if (!responseUploadFile.success) {
+        throw new Error(responseUploadFile.message);
+      }
+
+      const newData = {
+        title: data.title,
+        fileId: responseUploadFile.data.id,
+      };
+
+      const response = await apiInvestmentUpsertDocument({
+        id: id as string,
+        data: newData,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Data berhasil disimpan",
+        });
+
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      Toast.show({
+        type: "error",
+        text1: "Gagal menyimpan data",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const buttonFooter = (
     <BoxButtonOnFooter>
-      <ButtonCustom onPress={() => router.back()}>Simpan</ButtonCustom>
+      <ButtonCustom
+        isLoading={isLoading}
+        disabled={!pdf || data.title.length <= 0}
+        onPress={handlerSubmit}
+      >
+        Simpan
+      </ButtonCustom>
     </BoxButtonOnFooter>
   );
 
@@ -31,22 +92,33 @@ export default function InvestmentAddDocument() {
             label="Judul Dokumen"
             placeholder="Masukan judul dokumen"
             required
+            value={data.title}
+            onChangeText={(value) => setData({ ...data, title: value })}
           />
 
           <BaseBox>
             <CenterCustom>
-              <FontAwesome5
-                name="file-pdf"
-                size={30}
-                color={MainColor.disabled}
-              />
+              {pdf ? (
+                <TextCustom truncate>{pdf.name}</TextCustom>
+              ) : (
+                <FontAwesome5
+                  name="file-pdf"
+                  size={30}
+                  color={MainColor.disabled}
+                />
+              )}
             </CenterCustom>
           </BaseBox>
 
           <ButtonCenteredOnly
             icon="upload"
             onPress={() =>
-              router.push("/(application)/(image)/take-picture/123")
+              pickFile({
+                allowedType: "pdf",
+                setPdfUri(file) {
+                  setPdf(file);
+                },
+              })
             }
           >
             Upload

app/(application)/(user)/investment/[id]/(document)/edit-document.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BaseBox,
   BoxButtonOnFooter,
@@ -7,17 +8,99 @@ import {
   InformationBox,
   Spacing,
   StackCustom,
+  TextCustom,
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
-import { MainColor } from "@/constants/color-palet";
-import { FontAwesome5 } from "@expo/vector-icons";
-import { router } from "expo-router";
+import DIRECTORY_ID from "@/constants/directory-id";
+import {
+  apiInvestmentGetDocument,
+  apiInvestmentUpsertDocument,
+} from "@/service/api-client/api-investment";
+import { deleteFileService, uploadFileService } from "@/service/upload-service";
+import pickFile from "@/utils/pickFile";
+import { router, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function InvestmentEditDocument() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any>(null);
+  const [pdf, setPdf] = useState<any>(null);
+  const [titleFile, setTitleFile] = useState<string>("");
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiInvestmentGetDocument({
+        id: id as string,
+        category: "one-document",
+      });
+      setData(response.data);
+      setTitleFile(response.data.title);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handlerUpdate = async () => {
+    const prevFileId = data.fileId;
+    try {
+      setIsLoading(true);
+      const responseUploadFile = await uploadFileService({
+        dirId: DIRECTORY_ID.investasi_dokumen,
+        imageUri: pdf.uri,
+      });
+
+      if (!responseUploadFile.success) {
+        throw new Error(responseUploadFile.message);
+      }
+
+      const newData = {
+        title: data.title,
+        fileId: responseUploadFile.data.id,
+      };
+
+      const response = await apiInvestmentUpsertDocument({
+        id: id as string,
+        data: newData,
+      });
+
+      if (response.success) {
+        const delPrevFile = await deleteFileService({
+          id: prevFileId,
+        });
+
+        console.log("[DEL PREV FILE]", delPrevFile);
+
+        Toast.show({
+          type: "success",
+          text1: "Data berhasil diupdate",
+        });
+
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      Toast.show({
+        type: "error",
+        text1: "Gagal mengupdate data",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const buttonFooter = (
     <BoxButtonOnFooter>
-      <ButtonCustom onPress={() => router.back()}>Update</ButtonCustom>
+      <ButtonCustom isLoading={isLoading} disabled={!pdf} onPress={handlerUpdate}>
+        Update
+      </ButtonCustom>
     </BoxButtonOnFooter>
   );
 
@@ -31,22 +114,29 @@ export default function InvestmentEditDocument() {
             label="Judul Dokumen"
             placeholder="Masukan judul dokumen"
             required
+            value={data?.title}
+            onChangeText={(value) => setData({ ...data, title: value })}
           />
 
           <BaseBox>
             <CenterCustom>
-              <FontAwesome5
-                name="file-pdf"
-                size={30}
-                color={MainColor.disabled}
-              />
+              {pdf ? (
+                <TextCustom truncate>{pdf.name}</TextCustom>
+              ) : (
+                <TextCustom truncate>{_.snakeCase(titleFile || "")}.pdf</TextCustom>
+              )}
             </CenterCustom>
           </BaseBox>
 
           <ButtonCenteredOnly
             icon="upload"
             onPress={() =>
-              router.push("/(application)/(image)/take-picture/123")
+              pickFile({
+                allowedType: "pdf",
+                setPdfUri(file) {
+                  setPdf(file);
+                },
+              })
             }
           >
             Upload

app/(application)/(user)/investment/[id]/(document)/list-of-document.tsx

@@ -1,16 +1,58 @@
-import { ViewWrapper } from "@/components";
+/* eslint-disable react-hooks/exhaustive-deps */
+import { LoaderCustom, TextCustom, ViewWrapper } from "@/components";
 import Investment_BoxDetailDocument from "@/screens/Invesment/Document/RecapBoxDetail";
+import { apiInvestmentGetDocument } from "@/service/api-client/api-investment";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function InvestmentListOfDocument() {
+  const { id } = useLocalSearchParams();
+  console.log("ID >> ", id);
+
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadListDocument();
+    }, [id])
+  );
+
+  const onLoadListDocument = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiInvestmentGetDocument({
+        id: id as string,
+        category: "all-document",
+      });
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setList([]);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
   return (
     <ViewWrapper>
-      {Array.from({ length: 10 }).map((_, index) => (
-        <Investment_BoxDetailDocument
-          key={index}
-          title={`Judul Dokumen ${index + 1}`}
-          href={`/(file)/${index + 1}`}
-        />
-      ))}
+      {loadList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(list) ? (
+        <TextCustom align="center" color="gray">
+          Tidak ada data
+        </TextCustom>
+      ) : (
+        list?.map((item: any, index: number) => (
+          <Investment_BoxDetailDocument
+            key={index}
+            title={item.title}
+            href={`/(file)/${item.fileId}`}
+          />
+        ))
+      )}
     </ViewWrapper>
   );
 }

app/(application)/(user)/investment/[id]/(document)/recap-of-document.tsx

@@ -1,23 +1,90 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   AlertDefaultSystem,
   BackButton,
   DotButton,
   DrawerCustom,
+  LoaderCustom,
   MenuDrawerDynamicGrid,
+  TextCustom,
   ViewWrapper,
 } from "@/components";
 import { IconEdit } from "@/components/_Icon";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import Investment_BoxDetailDocument from "@/screens/Invesment/Document/RecapBoxDetail";
+import {
+  apiInvestmentDeleteDocument,
+  apiInvestmentGetDocument,
+} from "@/service/api-client/api-investment";
 import { AntDesign, Ionicons } from "@expo/vector-icons";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function InvestmentRecapOfDocument() {
   const { id } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
   const [openDrawerBox, setOpenDrawerBox] = useState(false);
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+  const [selectId, setSelectId] = useState<string | null>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadListDocument();
+    }, [id])
+  );
+
+  const onLoadListDocument = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiInvestmentGetDocument({
+        id: id as string,
+        category: "all-document",
+      });
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setList([]);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
+  const handlerDeleteDocument = async () => {
+    try {
+      const response = await apiInvestmentDeleteDocument({
+        id: selectId as string,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Data berhasil dihapus",
+        });
+        setList((prev: any[] | null) => {
+          if (!prev) return null;
+          return prev.filter((item: any) => item.id !== selectId);
+        });
+        setOpenDrawerBox(false);
+        setSelectId(null);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      Toast.show({
+        type: "error",
+        text1: "Gagal menghapus data",
+      });
+    }
+  };
 
   return (
     <>
@@ -37,25 +104,36 @@ export default function InvestmentRecapOfDocument() {
       />
 
       <ViewWrapper>
-        {Array.from({ length: 10 }).map((_, index) => (
-          <Investment_BoxDetailDocument
-            key={index}
-            title={`Judul Dokumen ${index + 1}`}
-            leftIcon={
-              <Ionicons
-                name="ellipsis-horizontal-outline"
-                size={ICON_SIZE_SMALL}
-                color={MainColor.white}
-                style={{
-                  zIndex: 10,
-                  alignSelf: "flex-end",
-                }}
-                onPress={() => setOpenDrawerBox(true)}
-              />
-            }
-            href={`/(file)/${id}`}
-          />
-        ))}
+        {loadList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(list) ? (
+          <TextCustom align="center" color="gray">
+            Tidak ada data
+          </TextCustom>
+        ) : (
+          list?.map((item: any, index: number) => (
+            <Investment_BoxDetailDocument
+              key={index}
+              title={item.title}
+              leftIcon={
+                <Ionicons
+                  name="ellipsis-horizontal-outline"
+                  size={ICON_SIZE_SMALL}
+                  color={MainColor.white}
+                  style={{
+                    zIndex: 10,
+                    alignSelf: "flex-end",
+                  }}
+                  onPress={() => {
+                    setSelectId(item.id);
+                    setOpenDrawerBox(true);
+                  }}
+                />
+              }
+              href={`/(file)/${item.fileId}`}
+            />
+          ))
+        )}
       </ViewWrapper>
 
       {/* Drawer On Header */}
@@ -69,7 +147,7 @@ export default function InvestmentRecapOfDocument() {
             {
               icon: (
                 <AntDesign
-                  name="pluscircle"
+                  name="plus-circle"
                   size={ICON_SIZE_SMALL}
                   color={MainColor.white}
                 />
@@ -96,7 +174,7 @@ export default function InvestmentRecapOfDocument() {
             {
               icon: <IconEdit />,
               label: "Edit Dokumen",
-              path: `/investment/${id}/(document)/edit-document`,
+              path: `/investment/${selectId}/(document)/edit-document`,
             },
             {
               icon: (
@@ -119,12 +197,14 @@ export default function InvestmentRecapOfDocument() {
                 textLeft: "Batal",
                 textRight: "Hapus",
                 onPressRight: () => {
-                  setOpenDrawerBox(false);
+                  handlerDeleteDocument();
                 },
               });
+            } else {
+              router.push(item.path as any);
             }
-            router.push(item.path as any);
-            setOpenDrawer(false);
+
+            setOpenDrawerBox(false);
           }}
         />
       </DrawerCustom>

app/(application)/(user)/investment/[id]/(transaction-flow)/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BaseBox,
   BoxButtonOnFooter,
@@ -9,16 +10,72 @@ import {
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
-import { router, useLocalSearchParams } from "expo-router";
+import { apiInvestmentGetOne } from "@/service/api-client/api-investment";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function InvestmentInvest() {
   const { id } = useLocalSearchParams();
+  // console.log("[ID]", id);
+  const [data, setData] = useState<any>(null);
+  const [value, setValue] = useState<number>(0);
+  const [total, setTotal] = useState<number>(0);
+  const [sisaLembar, setSisaLembar] = useState<number>(0);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiInvestmentGetOne({
+        id: id as string,
+      });
+
+      setData(response.data);
+      setSisaLembar(response.data?.sisaLembar);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handleTextChange = (text: string) => {
+    // Izinkan input kosong → anggap sebagai 0 (atau abaikan, tergantung UX)
+    if (text === "") {
+      setValue(0);
+      setTotal(0);
+      return;
+    }
+
+    // Regex: hanya digit (angka bulat positif)
+    const integerRegex = /^\d+$/;
+
+    if (integerRegex.test(text)) {
+      const numValue = Number(text);
+      // Karena regex sudah pastikan hanya angka, isNaN biasanya false
+      // Tapi tetap aman untuk cek
+      if (!isNaN(numValue)) {
+        setValue(numValue);
+        setTotal(numValue * Number(data?.hargaLembar));
+        console.log("[VALUE]", numValue);
+      }
+    }
+    // Jika input tidak valid (misal: "12a", "12."), abaikan → state tidak berubah
+  };
 
   const buttonSubmit = () => {
     return (
       <>
         <BoxButtonOnFooter>
-          <ButtonCustom onPress={() => router.push(`/investment/${id}/select-bank`)}>Beli</ButtonCustom>
+          <ButtonCustom
+            disabled={value < 10 || value >= sisaLembar}
+            onPress={() => router.push(`/investment/${id}/select-bank`)}
+          >
+            Beli {value}, {sisaLembar}
+          </ButtonCustom>
         </BoxButtonOnFooter>
       </>
     );
@@ -34,7 +91,7 @@ export default function InvestmentInvest() {
                 <TextCustom>Sisa Lembar Saham</TextCustom>
               </Grid.Col>
               <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
-                <TextCustom>3.000</TextCustom>
+                <TextCustom>{data?.sisaLembar || "-"}</TextCustom>
               </Grid.Col>
             </Grid>
             <Grid>
@@ -42,7 +99,7 @@ export default function InvestmentInvest() {
                 <TextCustom>Harga Per Lembar</TextCustom>
               </Grid.Col>
               <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
-                <TextCustom>Rp. 1.000</TextCustom>
+                <TextCustom>{data?.hargaLembar || "-"}</TextCustom>
               </Grid.Col>
             </Grid>
             <Grid>
@@ -69,6 +126,10 @@ export default function InvestmentInvest() {
                   }}
                   placeholder="0"
                   keyboardType="numeric"
+                  value={value.toString()}
+                  onChangeText={(value) => {
+                    handleTextChange(value);
+                  }}
                 />
               </Grid.Col>
             </Grid>
@@ -78,7 +139,7 @@ export default function InvestmentInvest() {
                 <TextCustom>Total Harga</TextCustom>
               </Grid.Col>
               <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
-                <TextCustom>Rp. 1.000</TextCustom>
+                <TextCustom> Rp. {formatCurrencyDisplay(total)}</TextCustom>
               </Grid.Col>
             </Grid>
           </StackCustom>

app/(application)/(user)/investment/[id]/[status]/detail.tsx

@@ -10,10 +10,11 @@ import { IconDocument, IconEdit, IconNews } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
+import { useAuth } from "@/hooks/use-auth";
 import Investment_ButtonInvestasiSection from "@/screens/Invesment/ButtonInvestasiSection";
 import Invesment_ComponentBoxOnBottomDetail from "@/screens/Invesment/ComponentBoxOnBottomDetail";
 import Invesment_DetailDataPublishSection from "@/screens/Invesment/DetailDataPublishSection";
-import { apiInvestmentGetById } from "@/service/api-client/api-investment";
+import { apiInvestmentGetOne } from "@/service/api-client/api-investment";
 import { AntDesign, MaterialIcons } from "@expo/vector-icons";
 import {
   router,
@@ -25,6 +26,7 @@ import _ from "lodash";
 import { useCallback, useState } from "react";
 
 export default function InvestmentDetailStatus() {
+  const { user } = useAuth();
   const { id, status } = useLocalSearchParams();
   const [openDrawerDraft, setOpenDrawerDraft] = useState(false);
   const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
@@ -39,7 +41,7 @@ export default function InvestmentDetailStatus() {
 
   const onLoadData = async () => {
     try {
-      const response = await apiInvestmentGetById({
+      const response = await apiInvestmentGetOne({
         id: id as string,
       });
 
@@ -70,7 +72,7 @@ export default function InvestmentDetailStatus() {
   );
 
   const buttonSection = (
-    <Investment_ButtonInvestasiSection id={id as string} isMine={false} />
+    <Investment_ButtonInvestasiSection id={id as string} isMine={user?.id === data?.author?.id} />
   );
 
   return (

app/(application)/(user)/investment/[id]/edit-prospectus.tsx

@@ -14,7 +14,7 @@ import {
 } from "@/components";
 import DIRECTORY_ID from "@/constants/directory-id";
 import {
-  apiInvestmentGetById,
+  apiInvestmentGetOne,
   apiInvestmentUpdateData,
 } from "@/service/api-client/api-investment";
 import { deleteFileService, uploadFileService } from "@/service/upload-service";
@@ -40,7 +40,7 @@ export default function InvestmentEditProspectus() {
   const onLoadData = async () => {
     try {
       setLoadingGet(true);
-      const response = await apiInvestmentGetById({
+      const response = await apiInvestmentGetOne({
         id: id as string,
       });
       setData(response.data);

app/(application)/(user)/investment/[id]/edit.tsx

@@ -14,7 +14,7 @@ import {
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DIRECTORY_ID from "@/constants/directory-id";
 import {
-  apiInvestmentGetById,
+  apiInvestmentGetOne,
   apiInvestmentUpdateData,
 } from "@/service/api-client/api-investment";
 import { apiMasterInvestment } from "@/service/api-client/api-master";
@@ -90,7 +90,7 @@ export default function InvestmentEdit() {
 
   const onLoadData = async () => {
     try {
-      const response = await apiInvestmentGetById({
+      const response = await apiInvestmentGetOne({
         id: id as string,
       });
       setData(response.data);

app/(application)/(user)/investment/[id]/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BackButton,
   DotButton,
@@ -9,18 +10,45 @@ import { IconDocument, IconEdit, IconNews } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
+import { useAuth } from "@/hooks/use-auth";
 import Investment_ButtonInvestasiSection from "@/screens/Invesment/ButtonInvestasiSection";
 import Invesment_ComponentBoxOnBottomDetail from "@/screens/Invesment/ComponentBoxOnBottomDetail";
 import Invesment_DetailDataPublishSection from "@/screens/Invesment/DetailDataPublishSection";
+import { apiInvestmentGetOne } from "@/service/api-client/api-investment";
 import { AntDesign, MaterialIcons } from "@expo/vector-icons";
-import { router, Stack, useLocalSearchParams } from "expo-router";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
 import _ from "lodash";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 
 export default function InvestmentDetail() {
+  const { user } = useAuth();
   const { id, status } = useLocalSearchParams();
   const [openDrawerDraft, setOpenDrawerDraft] = useState(false);
   const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
+  const [data, setData] = useState<any>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id, status])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiInvestmentGetOne({
+        id: id as string,
+      });
+
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
 
   const handlePressDraft = (item: IMenuDrawerItem) => {
     console.log("PATH >> ", item.path);
@@ -37,11 +65,14 @@ export default function InvestmentDetail() {
   const bottomSection = (
     <Invesment_ComponentBoxOnBottomDetail
       id={id as string}
-      status={'publish'}
+      prospectusId={data?.prospektusFileId}
+      status={"publish"}
     />
   );
 
-  const buttonSection = <Investment_ButtonInvestasiSection id={id as string} isMine={true} />;
+  const buttonSection = (
+    <Investment_ButtonInvestasiSection id={id as string} isMine={user?.id === data?.author?.id} />
+  );
 
   return (
     <>
@@ -61,6 +92,7 @@ export default function InvestmentDetail() {
       <ViewWrapper>
         <Invesment_DetailDataPublishSection
           status={"publish"}
+          data={data}
           bottomSection={bottomSection}
           buttonSection={buttonSection}
         />

lib/dummy-data/investment/dummy-data-not-publish.ts

@@ -40,34 +40,34 @@ const listDataPublishInvesment = ({ data }: { data: any }) => [
   },
   {
     label: "Target Dana",
-    value: data?.targetDana,
+    value: `Rp. ${formatCurrencyDisplay(data?.targetDana) || "-"}`,
   },
   {
     label: "Harga Per Lembar",
-    value: data?.hargaPerLembar,
+    value: `Rp. ${formatCurrencyDisplay(data?.hargaLembar) || "-"}`,
   },
   {
     label: "Return Of Investment (ROI)",
-    value: data?.roi + " %",
+    value: `${data?.roi || "-"} %`,
   },
   {
     label: "Total Lembar",
-    value: data?.totalLembar,
+    value: data?.totalLembar || "-",
   },
   {
     label: "Sisa Lembar",
-    value: data?.sisaLembar,
-  },
-  {
-    label: "Jadwal Pembagian",
-    value: data?.jadwalPembagian,
-  },
-  {
-    label: "Pembagian Deviden",
-    value: data?.pembagianDeviden,
+    value: data?.sisaLembar || "-",
   },
   {
     label: "Pencarian Investor",
-    value: data?.pencarianInvestor,
+    value: (data && data?.MasterPencarianInvestor?.name + " hari") || "-",
+  },
+  {
+    label: "Jadwal Pembagian",
+    value: (data && data?.MasterPembagianDeviden?.name + " bulan") || "-",
+  },
+  {
+    label: "Pembagian Deviden",
+    value: data?.MasterPeriodeDeviden?.name || "-",
   },
 ];

screens/Invesment/BoxDetailDataSection.tsx

@@ -1,28 +1,40 @@
 import {
-  BaseBox,
+  AvatarUsernameAndOtherComponent,
+  BoxWithHeaderSection,
   DummyLandscapeImage,
   Grid,
   Spacing,
   StackCustom,
-  TextCustom,
+  TextCustom
 } from "@/components";
 import { View } from "react-native";
 
 export default function Invesment_BoxDetailDataSection({
   title,
+  author,
   imageId,
   data,
   bottomSection,
 }: {
   title?: string;
+  author?: any;
   imageId?: string;
   data: any;
   bottomSection?: React.ReactNode;
 }) {
+
   return (
     <>
-      <BaseBox paddingBottom={0}>
+      <BoxWithHeaderSection>
         <StackCustom gap={"xs"}>
+          {author && (
+            <AvatarUsernameAndOtherComponent
+              avatar={author?.Profile?.imageId}
+              name={author?.username}
+              rightComponent={""}
+              withBottomLine={true}
+            />
+          )}
           <DummyLandscapeImage imageId={imageId} />
           <Spacing />
           <TextCustom align="center" size="xlarge" bold>
@@ -46,7 +58,7 @@ export default function Invesment_BoxDetailDataSection({
           <Spacing />
           {bottomSection}
         </StackCustom>
-      </BaseBox>
+      </BoxWithHeaderSection>
     </>
   );
 }

screens/Invesment/BoxProgressSection.tsx

@@ -1,13 +1,13 @@
 import { BaseBox, StackCustom, TextCustom, ProgressCustom } from "@/components";
 
-export default function Invesment_BoxProgressSection({status}: {status: string}) {
+export default function Invesment_BoxProgressSection({progress, status}: {progress: number, status: string}) {
     return (
       <>
         {status === "publish" && (
           <BaseBox>
             <StackCustom>
               <TextCustom bold>Progress Saham</TextCustom>
-              <ProgressCustom value={70} size="lg" />
+              <ProgressCustom label={progress + "%"} value={progress} size="lg" />
             </StackCustom>
           </BaseBox>
         )}

screens/Invesment/ButtonInvestasiSection.tsx

@@ -8,9 +8,12 @@ export default function Investment_ButtonInvestasiSection({
   id: string;
   isMine: boolean;
 }) {
+  console.log("[IS MINE]", isMine);
   return (
     <>
       {isMine ? (
+        <ButtonCustom disabled>Investasi Ini Milik Anda</ButtonCustom>
+      ) : (
         <ButtonCustom
           onPress={() => {
             router.navigate(`/investment/${id}/(transaction-flow)`);
@@ -18,8 +21,6 @@ export default function Investment_ButtonInvestasiSection({
         >
           Beli Saham
         </ButtonCustom>
-      ) : (
-        <ButtonCustom disabled>Investasi Ini Milik Anda</ButtonCustom>
       )}
     </>
   );

screens/Invesment/ButtonStatusSection.tsx

@@ -3,7 +3,6 @@ import {
   apiInvestmentDelete,
   apiInvestmentUpdateStatus,
 } from "@/service/api-client/api-investment";
-import { deleteFileService } from "@/service/upload-service";
 import { router } from "expo-router";
 import { useState } from "react";
 import Toast from "react-native-toast-message";
@@ -136,36 +135,14 @@ export default function Investment_ButtonStatusSection({
             id: id as string,
           });
 
-          console.log("[RESPONSE]", JSON.stringify(response, null, 2));
+          console.log("[RESPONSE DELETE]", JSON.stringify(response, null, 2));
+
           if (response.success) {
-            const deleteImage = await deleteFileService({
-              id: response?.data?.imageId as string,
-            });
-
-            if (!deleteImage.success) {
-              Toast.show({
-                type: "error",
-                text1: "Gagal Hapus Data",
-              });
-              return;
-            }
-
-            const deleteFile = await deleteFileService({
-              id: response?.data?.prospektusFileId as string,
-            });
-
-            if (!deleteFile.success) {
-              Toast.show({
-                type: "error",
-                text1: "Gagal Hapus Data",
-              });
-              return;
-            }
-
             Toast.show({
               type: "success",
               text1: "Berhasil Hapus Data",
             });
+
             router.back();
           } else {
             Toast.show({

screens/Invesment/ComponentBoxOnBottomDetail.tsx

@@ -18,7 +18,6 @@ export default function Invesment_ComponentBoxOnBottomDetail({
   prospectusId: string;
   status: string;
 }) {
-
   return (
     <>
       {status === "publish" ? (
@@ -28,7 +27,7 @@ export default function Invesment_ComponentBoxOnBottomDetail({
               <BaseBox
                 backgroundColor={AccentColor.blue}
                 style={{ borderColor: AccentColor.softblue, borderWidth: 1 }}
-                href={`/(file)/${id}`}
+                href={`/(file)/${prospectusId}`}
               >
                 <StackCustom>
                   <TextCustom align="center">Prospektus</TextCustom>

screens/Invesment/DetailDataPublishSection.tsx

@@ -19,13 +19,14 @@ export default function Invesment_DetailDataPublishSection({
   bottomSection?: React.ReactNode;
   buttonSection?: React.ReactNode;
 }) {
-  // console.log("[DATA DETAIL]", JSON.stringify(data, null, 2));
+
   return (
     <>
       <StackCustom gap={"sm"}>
-        <Invesment_BoxProgressSection status={status as string} />
+        <Invesment_BoxProgressSection progress={data?.progress} status={status as string} />
         <Invesment_BoxDetailDataSection
           title={data?.title}
+          author={data?.author}
           imageId={data?.imageId}
           data={
             status === "publish"

screens/Invesment/Document/RecapBoxDetail.tsx

@@ -1,5 +1,5 @@
-import { BaseBox, Grid, TextCustom } from "@/components";
-import { Href } from "expo-router";
+import { BaseBox, ClickableCustom, Grid, TextCustom } from "@/components";
+import { Href, router } from "expo-router";
 
 export default function Investment_BoxDetailDocument({
   title,
@@ -8,17 +8,19 @@ export default function Investment_BoxDetailDocument({
 }: {
   title: string;
   leftIcon?: React.ReactNode;
-  href?: Href;
+  href?: Href | string;
 }) {
   return (
     <>
-      <BaseBox href={href}>
+      <BaseBox>
         <Grid>
           <Grid.Col span={leftIcon ? 10 : 12}>
-            <TextCustom truncate>
-              {title ||
-                `Judul Dokumen: Lorem, ipsum dolor sit amet consectetur adipisicing elit.`}
-            </TextCustom>
+            <ClickableCustom onPress={() => router.push(href as any)}>
+              <TextCustom truncate>
+                {title ||
+                  `Judul Dokumen: Lorem, ipsum dolor sit amet consectetur adipisicing elit.`}
+              </TextCustom>
+            </ClickableCustom>
           </Grid.Col>
           {leftIcon && <Grid.Col span={2}>{leftIcon}</Grid.Col>}
         </Grid>

service/api-client/api-investment.ts

@@ -28,7 +28,7 @@ export async function apiInvestmentGetByStatus({
   }
 }
 
-export async function apiInvestmentGetById({ id }: { id: string }) {
+export async function apiInvestmentGetOne({ id }: { id: string }) {
   try {
     const response = await apiConfig.get(`/mobile/investment/${id}`);
     return response.data;
@@ -44,7 +44,6 @@ export async function apiInvestmentUpdateStatus({
   id: string;
   status: "publish" | "draft" | "review" | "reject";
 }) {
-
   try {
     const response = await apiConfig.put(`/mobile/investment/${id}/${status}`);
     return response.data;
@@ -71,9 +70,28 @@ export async function apiInvestmentUpdateData({
   data: any;
   category: "data" | "prospectus";
 }) {
-
   try {
-    const response = await apiConfig.put(`/mobile/investment/${id}?category=${category}`, {
+    const response = await apiConfig.put(
+      `/mobile/investment/${id}?category=${category}`,
+      {
+        data: data,
+      }
+    );
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiInvestmentUpsertDocument({
+  id,
+  data,
+}: {
+  id: string;
+  data: any;
+}) {
+  try {
+    const response = await apiConfig.post(`/mobile/investment/${id}/document`, {
       data: data,
     });
     return response.data;
@@ -81,3 +99,41 @@ export async function apiInvestmentUpdateData({
     throw error;
   }
 }
+
+export async function apiInvestmentGetDocument({
+  id,
+  category,
+}: {
+  id: string;
+  category: "one-document" | "all-document";
+}) {
+  try {
+    const response = await apiConfig.get(
+      `/mobile/investment/${id}/document?category=${category}`
+    );
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiInvestmentDeleteDocument({ id }: { id: string }) {
+  try {
+    const response = await apiConfig.delete(
+      `/mobile/investment/${id}/document`
+    );
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiInvestmentGetAll() {
+  try {
+    const response = await apiConfig.get(`/mobile/investment`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+