Integrasi API: Investment:

Add:
- screens/Invesment/BoxBerandaSection.tsx

Fix:
- app/(application)/(user)/investment/(tabs)/index.tsx
- screens/Donation/BoxPublish.tsx
- screens/Invesment/BoxProgressSection.tsx
- screens/Invesment/DetailDataPublishSection.tsx

### No Issue

screens/Donation/BoxPublish.tsx

@@ -22,7 +22,7 @@ export default function Donation_BoxPublish({
     sisa: 0,
     reminder: false,
   });
-
+  
   useEffect(() => {
     updateCountDown();
   }, [data]);

screens/Invesment/BoxBerandaSection.tsx

@@ -0,0 +1,97 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BaseBox,
+  Grid,
+  StackCustom,
+  TextCustom,
+  ProgressCustom,
+} 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";
+
+export default function Investment_BoxBerandaSection({
+  id,
+  data,
+}: {
+  id: string;
+  data: any;
+}) {
+//   console.log("[DATA By one]", JSON.stringify(data, null, 2));
+
+  const [value, setValue] = useState({
+    sisa: 0,
+    reminder: false,
+  });
+
+  useEffect(() => {
+    updateCountDown();
+  }, [data]);
+
+  const updateCountDown = () => {
+    const countDown = countDownAndCondition({
+      duration: data?.pencarianInvestor,
+      publishTime: data?.countDown,
+    });
+
+    setValue({
+      sisa: countDown.durationDay,
+      reminder: countDown.reminder,
+    });
+  };
+
+  return (
+    <>
+      <BaseBox paddingTop={7} paddingBottom={7} href={`/investment/${id}`}>
+        <Grid>
+          <Grid.Col span={5}>
+            <Image
+              source={
+                data && data.imageId
+                  ? API_STRORAGE.GET({ fileId: data.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}>{data.title}</TextCustom>
+              <ProgressCustom
+                label={`${data.progress}%`}
+                value={data.progress}
+                size="lg"
+              />
+              {value.reminder ? (
+                <View
+                  style={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: 5,
+                  }}
+                >
+                  <Ionicons name="alert-circle-outline" size={16} color="red" />
+                  <TextCustom truncate color="red" size="small">
+                    Periode Investasi Berakhir
+                  </TextCustom>
+                </View>
+              ) : (
+                <TextCustom>
+                  Sisa waktu: {value.sisa} hari
+                </TextCustom>
+              )}
+            </StackCustom>
+          </Grid.Col>
+        </Grid>
+      </BaseBox>
+    </>
+  );
+}

screens/Invesment/BoxProgressSection.tsx

@@ -7,7 +7,7 @@ export default function Invesment_BoxProgressSection({progress, status}: {progre
           <BaseBox>
             <StackCustom>
               <TextCustom bold>Progress Saham</TextCustom>
-              <ProgressCustom label={progress + "%"} value={progress} size="lg" />
+              <ProgressCustom label={(progress || 0) + "%"} value={progress || 0} size="lg" />
             </StackCustom>
           </BaseBox>
         )}

screens/Invesment/DetailDataPublishSection.tsx

@@ -1,13 +1,15 @@
-import { Spacing, StackCustom } from "@/components";
+/* eslint-disable react-hooks/exhaustive-deps */
+import { ButtonCustom, Spacing, StackCustom, TextCustom } from "@/components";
 import {
   listDataNotPublishInvesment,
   listDataPublishInvesment,
 } from "@/lib/dummy-data/investment/dummy-data-not-publish";
-import React from "react";
+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,
@@ -20,14 +22,39 @@ export default function Invesment_DetailDataPublishSection({
   bottomSection?: React.ReactNode;
   buttonSection?: React.ReactNode;
 }) {
+  const [value, setValue] = useState({
+    sisa: 0,
+    reminder: false,
+  });
+
+  useEffect(() => {
+    updateCountDown();
+  }, [data]);
+
+  const updateCountDown = () => {
+    const countDown = countDownAndCondition({
+      duration: data?.durasiDonasi,
+      publishTime: data?.publishTime,
+    });
+
+    setValue({
+      sisa: countDown.durationDay,
+      reminder: countDown.reminder,
+    });
+  };
 
   return (
     <>
       <StackCustom gap={"sm"}>
-        {data && data?.catatan && (status === "draft" || status === "reject") && (
-          <ReportBox text={data?.catatan} />
-        )}
-        <Invesment_BoxProgressSection progress={data?.progress} status={status as string} />
+        {data &&
+          data?.catatan &&
+          (status === "draft" || status === "reject") && (
+            <ReportBox text={data?.catatan} />
+          )}
+        <Invesment_BoxProgressSection
+          progress={data?.progress}
+          status={status as string}
+        />
         <Invesment_BoxDetailDataSection
           title={data?.title}
           author={data?.author}
@@ -39,11 +66,18 @@ export default function Invesment_DetailDataPublishSection({
           }
           bottomSection={bottomSection}
         />
-        <Investment_ButtonStatusSection
-          id={data?.id}
-          status={status as string}
-          buttonPublish={buttonSection}
-        />
+
+        {value.reminder ? (
+          <ButtonCustom disabled>
+            Periode Investasi Berakhir
+          </ButtonCustom>
+        ) : (
+          <Investment_ButtonStatusSection
+            id={data?.id}
+            status={status as string}
+            buttonPublish={buttonSection}
+          />
+        )}
       </StackCustom>
       <Spacing />
     </>