Invesment

Fix: - tampilan list data bada beranda dan detail data main ### No Issue
2025-10-01 16:45:23 +08:00
parent 250b216a54
commit c2acb97a37
12 changed files with 190 additions and 72 deletions
--- a/app/(application)/(user)/investment/(tabs)/index.tsx
+++ b/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>;
--- a/app/(application)/(user)/investment/[id]/[status]/detail.tsx
+++ b/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 (
--- a/app/(application)/(user)/investment/[id]/edit-prospectus.tsx
+++ b/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);
--- a/app/(application)/(user)/investment/[id]/edit.tsx
+++ b/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);
--- a/app/(application)/(user)/investment/[id]/index.tsx
+++ b/app/(application)/(user)/investment/[id]/index.tsx
@@ -9,18 +9,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 +64,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 +91,7 @@ export default function InvestmentDetail() {
      <ViewWrapper>
        <Invesment_DetailDataPublishSection
          status={"publish"}
+          data={data}
          bottomSection={bottomSection}
          buttonSection={buttonSection}
        />