Invesment

Add:
- dummy-data-not-publish
- BoxDetailDataSection

Fix:
- investment/[id]/[status]/detail: fix basic ui

## No Issue

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

@@ -2,13 +2,12 @@
 import {
   BackButton,
   BaseBox,
-  ButtonCustom,
   CenterCustom,
   DotButton,
   DrawerCustom,
-  DummyLandscapeImage,
   Grid,
   MenuDrawerDynamicGrid,
+  ProgressCustom,
   Spacing,
   StackCustom,
   TextCustom,
@@ -17,7 +16,9 @@ import {
 import { IconEdit } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import { AccentColor, MainColor } from "@/constants/color-palet";
-import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
+import { ICON_SIZE_MEDIUM, ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { listDataNotPublish } from "@/lib/dummy-data/investment/dummy-data-not-publish";
+import BoxDetailDataSection from "@/screens/Invesment/BoxDetailDataSection";
 import Investment_ButtonStatusSection from "@/screens/Invesment/ButtonStatusSection";
 import {
   AntDesign,
@@ -28,11 +29,11 @@ import {
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
 import { useState } from "react";
-import { View } from "react-native";
 
 export default function InvestmentDetailStatus() {
   const { id, status } = useLocalSearchParams();
   const [openDrawerDraft, setOpenDrawerDraft] = useState(false);
+  const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
 
   const handlePressDraft = (item: IMenuDrawerItem) => {
     console.log("PATH >> ", item.path);
@@ -40,6 +41,54 @@ export default function InvestmentDetailStatus() {
     setOpenDrawerDraft(false);
   };
 
+  const handlePressPublish = (item: IMenuDrawerItem) => {
+    console.log("PATH >> ", item.path);
+    router.navigate(item.path as any);
+    setOpenDrawerPublish(false);
+  };
+
+  const bottomSection = (
+    <Grid>
+      <Grid.Col span={6} style={{ paddingRight: 10 }}>
+        <BaseBox
+          backgroundColor={AccentColor.blue}
+          style={{ borderColor: AccentColor.softblue, borderWidth: 1 }}
+          href={`/investment/${id}/prospektus/file`}
+        >
+          <StackCustom>
+            <TextCustom align="center">Prospektus</TextCustom>
+            <CenterCustom>
+              <FontAwesome6
+                name="file-contract"
+                size={50}
+                color={MainColor.white}
+              />
+            </CenterCustom>
+          </StackCustom>
+        </BaseBox>
+      </Grid.Col>
+
+      <Grid.Col span={6} style={{ paddingLeft: 10 }}>
+        <BaseBox
+          backgroundColor={AccentColor.blue}
+          style={{ borderColor: AccentColor.softblue, borderWidth: 1 }}
+          href={`/investment/${id}/list-of-document`}
+        >
+          <StackCustom>
+            <TextCustom align="center">Dokumen</TextCustom>
+            <CenterCustom>
+              <FontAwesome6
+                name="file-lines"
+                size={50}
+                color={MainColor.white}
+              />
+            </CenterCustom>
+          </StackCustom>
+        </BaseBox>
+      </Grid.Col>
+    </Grid>
+  );
+
   return (
     <>
       <Stack.Screen
@@ -49,82 +98,31 @@ export default function InvestmentDetailStatus() {
           headerRight: () =>
             status === "draft" ? (
               <DotButton onPress={() => setOpenDrawerDraft(true)} />
+            ) : status === "publish" ? (
+              <DotButton onPress={() => setOpenDrawerPublish(true)} />
             ) : null,
-          //  : status === "publish" ? (
-          //   <DotButton onPress={() => setOpenDrawerPublish(true)} />
-          // ) : null,
         }}
       />
       <ViewWrapper>
-        <BaseBox paddingBottom={0}>
+        <StackCustom gap={"sm"}>
-          <StackCustom gap={"xs"}>
+          {status === "publish" && (
-            <DummyLandscapeImage />
+            <BaseBox>
-            <Spacing />
+              <StackCustom>
-            <TextCustom align="center" size="xlarge" bold>
+                <TextCustom bold>Progress Saham</TextCustom>
-              Title of Investment
+                <ProgressCustom value={70} size="lg" />
-            </TextCustom>
+              </StackCustom>
-            <Spacing />
+            </BaseBox>
-
+          )}
-            {listData.map((item, index) => (
+          <BoxDetailDataSection
-              <Grid key={index}>
+            data={listDataNotPublish}
-                <Grid.Col span={4}>
+            bottomSection={bottomSection}
-                  <TextCustom bold>{item.label}</TextCustom>
+          />
-                </Grid.Col>
+          <Investment_ButtonStatusSection status={status as string} />
-                <Grid.Col span={1}>
+          <Spacing />
-                  <View />
+        </StackCustom>
-                </Grid.Col>
-                <Grid.Col span={7} style={{ justifyContent: "center" }}>
-                  <TextCustom>{item.value}</TextCustom>
-                </Grid.Col>
-              </Grid>
-            ))}
-
-            <Grid>
-              <Grid.Col span={6} style={{ paddingRight: 10 }}>
-                <BaseBox
-                  backgroundColor={AccentColor.blue}
-                  style={{ borderColor: AccentColor.softblue, borderWidth: 1 }}
-                  href={`/investment/${id}/prospektus/file`}
-                >
-                  <StackCustom>
-                    <TextCustom align="center">Prospektus</TextCustom>
-                    <CenterCustom>
-                      <FontAwesome6
-                        name="file-contract"
-                        size={50}
-                        color={MainColor.white}
-                      />
-                    </CenterCustom>
-                  </StackCustom>
-                </BaseBox>
-              </Grid.Col>
-
-              <Grid.Col span={6} style={{ paddingLeft: 10 }}>
-                <BaseBox
-                  backgroundColor={AccentColor.blue}
-                  style={{ borderColor: AccentColor.softblue, borderWidth: 1 }}
-                  href={`/investment/${id}/list-of-document`}
-                >
-                  <StackCustom>
-                    <TextCustom align="center">Dokumen</TextCustom>
-                    <CenterCustom>
-                      <FontAwesome6
-                        name="file-lines"
-                        size={50}
-                        color={MainColor.white}
-                      />
-                    </CenterCustom>
-                  </StackCustom>
-                </BaseBox>
-              </Grid.Col>
-            </Grid>
-          </StackCustom>
-        </BaseBox>
-        <Spacing />
-        <Investment_ButtonStatusSection status={status as string} />
-        <Spacing />
       </ViewWrapper>
 
+      {/* ========= Draft Drawer ========= */}
       <DrawerCustom
         isVisible={openDrawerDraft}
         closeDrawer={() => setOpenDrawerDraft(false)}
@@ -164,37 +162,42 @@ export default function InvestmentDetailStatus() {
           onPressItem={handlePressDraft as any}
         />
       </DrawerCustom>
+
+      {/* ========= Publish Drawer ========= */}
+      <DrawerCustom
+        isVisible={openDrawerPublish}
+        closeDrawer={() => setOpenDrawerPublish(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: (
+                <FontAwesome6
+                  name="file-lines"
+                  size={ICON_SIZE_SMALL}
+                  color={MainColor.white}
+                />
+              ),
+              label: "Update Dokumen",
+              path: `/investment/${id}/recap-of-document`,
+            },
+            {
+              icon: (
+                <Ionicons
+                  name="newspaper-outline"
+                  size={ICON_SIZE_MEDIUM}
+                  color={MainColor.white}
+                />
+              ),
+              label: "Update Berita",
+              path: `/investment/${id}/edit`,
+            },
+          ]}
+          columns={4}
+          onPressItem={handlePressPublish as any}
+        />
+      </DrawerCustom>
     </>
   );
 }
-
-const listData = [
-  {
-    label: "Target Dana",
-    value: "Rp. 7.500.000",
-  },
-  {
-    label: "Harga Per Lembar",
-    value: "Rp. 2.400.",
-  },
-  {
-    label: "Return Of Investment (ROI)",
-    value: "3 %",
-  },
-  {
-    label: "Total Lembar",
-    value: "1.200",
-  },
-  {
-    label: "Jadwal Pembagian",
-    value: "Rp. 2.880.000",
-  },
-  {
-    label: "Pembagian Deviden",
-    value: "Selamanya",
-  },
-  {
-    label: "Pencarian Investor",
-    value: "30 Hari",
-  },
-];

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

@@ -0,0 +1,32 @@
+const listDataNotPublish = [
+  {
+    label: "Target Dana",
+    value: "Rp. 7.500.000",
+  },
+  {
+    label: "Harga Per Lembar",
+    value: "Rp. 2.400",
+  },
+  {
+    label: "Return Of Investment (ROI)",
+    value: "3 %",
+  },
+  {
+    label: "Total Lembar",
+    value: "1.200",
+  },
+  {
+    label: "Jadwal Pembagian",
+    value: "Rp. 2.880.000",
+  },
+  {
+    label: "Pembagian Deviden",
+    value: "Selamanya",
+  },
+  {
+    label: "Pencarian Investor",
+    value: "30 Hari",
+  },
+];
+
+export  {listDataNotPublish};

screens/Invesment/BoxDetailDataSection.tsx

@@ -0,0 +1,50 @@
+import {
+  BaseBox,
+  DummyLandscapeImage,
+  Grid,
+  Spacing,
+  StackCustom,
+  TextCustom,
+} from "@/components";
+import { View } from "react-native";
+
+export default function BoxDetailDataSection({
+  title,
+  data,
+  bottomSection,
+}: {
+  title?: string;
+  data: any;
+  bottomSection?: React.ReactNode;
+}) {
+  return (
+    <>
+      <BaseBox paddingBottom={0}>
+        <StackCustom gap={"xs"}>
+          <DummyLandscapeImage />
+          <Spacing />
+          <TextCustom align="center" size="xlarge" bold>
+            {title || "Title of Investment"}
+          </TextCustom>
+          <Spacing />
+
+          {data.map((item: any, index: any) => (
+            <Grid key={index}>
+              <Grid.Col span={4}>
+                <TextCustom bold>{item.label}</TextCustom>
+              </Grid.Col>
+              <Grid.Col span={1}>
+                <View />
+              </Grid.Col>
+              <Grid.Col span={7} style={{ justifyContent: "center" }}>
+                <TextCustom>{item.value}</TextCustom>
+              </Grid.Col>
+            </Grid>
+          ))}
+
+          {bottomSection}
+        </StackCustom>
+      </BaseBox>
+    </>
+  );
+}