app/(application)/(user)/_layout.tsx

@@ -266,6 +266,14 @@ export default function UserLayout() {
           }}
         />
 
+        <Stack.Screen
+          name="investment/[id]/(transaction-flow)/index"
+          options={{
+            title: "Pembelian Saham",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
         {/* ========== End Investment Section ========= */}
 
         {/* ========== Donation Section ========= */}

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

@@ -0,0 +1,13 @@
+import { TextCustom, ViewWrapper } from "@/components";
+import { useLocalSearchParams } from "expo-router";
+
+export default function InvestmentInvest() {
+  const { id } = useLocalSearchParams();
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Pembelian Saham {id}</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -1,27 +1,17 @@
 import {
-    BackButton,
-    BaseBox,
-    DotButton,
-    DrawerCustom,
-    MenuDrawerDynamicGrid,
-    ProgressCustom,
-    Spacing,
-    StackCustom,
-    TextCustom,
-    ViewWrapper
+  BackButton,
+  DotButton,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  ViewWrapper,
 } from "@/components";
 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 {
-    listDataNotPublishInvesment,
-    listDataPublishInvesment,
-} from "@/lib/dummy-data/investment/dummy-data-not-publish";
-import Invesment_BoxDetailDataSection from "@/screens/Invesment/BoxDetailDataSection";
 import Investment_ButtonInvestasiSection from "@/screens/Invesment/ButtonInvestasiSection";
-import Investment_ButtonStatusSection from "@/screens/Invesment/ButtonStatusSection";
 import Invesment_ComponentBoxOnBottomDetail from "@/screens/Invesment/ComponentBoxOnBottomDetail";
+import Invesment_DetailDataPublishSection from "@/screens/Invesment/DetailDataPublishSection";
 import { AntDesign, MaterialIcons } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
@@ -51,6 +41,10 @@ export default function InvestmentDetailStatus() {
     />
   );
 
+  const buttonSection = (
+    <Investment_ButtonInvestasiSection id={id as string} isMine={false} />
+  );
+
   return (
     <>
       <Stack.Screen
@@ -67,27 +61,11 @@ export default function InvestmentDetailStatus() {
       />
 
       <ViewWrapper>
-        <StackCustom gap={"sm"}>
-          {status === "publish" && (
-            <BaseBox>
-              <StackCustom>
-                <TextCustom bold>Progress Saham</TextCustom>
-                <ProgressCustom value={70} size="lg" />
-              </StackCustom>
-            </BaseBox>
-          )}
-          <Invesment_BoxDetailDataSection
-            data={
-              status === "publish"
-                ? listDataPublishInvesment
-                : listDataNotPublishInvesment
-            }
-            bottomSection={bottomSection}
-          />
-          <Investment_ButtonStatusSection status={status as string} />
-          <Investment_ButtonInvestasiSection isMine={false} />
-        </StackCustom>
-        <Spacing />
+        <Invesment_DetailDataPublishSection
+          status={status as string}
+          bottomSection={bottomSection}
+          buttonSection={buttonSection}
+        />
       </ViewWrapper>
 
       {/* ========= Draft Drawer ========= */}

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

@@ -1,9 +1,134 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  BackButton,
+  DotButton,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  ViewWrapper,
+} from "@/components";
+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 Investment_ButtonInvestasiSection from "@/screens/Invesment/ButtonInvestasiSection";
+import Invesment_ComponentBoxOnBottomDetail from "@/screens/Invesment/ComponentBoxOnBottomDetail";
+import Invesment_DetailDataPublishSection from "@/screens/Invesment/DetailDataPublishSection";
+import { AntDesign, MaterialIcons } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useState } from "react";
 
 export default function InvestmentDetail() {
-    return (
-        <ViewWrapper>
-            <TextCustom>Investment Detail</TextCustom>
-        </ViewWrapper>
-    )
-}
+  const { id, status } = useLocalSearchParams();
+  const [openDrawerDraft, setOpenDrawerDraft] = useState(false);
+  const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
+
+  const handlePressDraft = (item: IMenuDrawerItem) => {
+    console.log("PATH >> ", item.path);
+    router.navigate(item.path as any);
+    setOpenDrawerDraft(false);
+  };
+
+  const handlePressPublish = (item: IMenuDrawerItem) => {
+    console.log("PATH >> ", item.path);
+    router.navigate(item.path as any);
+    setOpenDrawerPublish(false);
+  };
+
+  const bottomSection = (
+    <Invesment_ComponentBoxOnBottomDetail
+      id={id as string}
+      status={status as string}
+    />
+  );
+
+  const buttonSection = <Investment_ButtonInvestasiSection id={id as string} isMine={true} />;
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: `Detail ${_.startCase(status as string)}`,
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            status === "draft" ? (
+              <DotButton onPress={() => setOpenDrawerDraft(true)} />
+            ) : status === "publish" ? (
+              <DotButton onPress={() => setOpenDrawerPublish(true)} />
+            ) : null,
+        }}
+      />
+
+      <ViewWrapper>
+        <Invesment_DetailDataPublishSection
+          status={"publish"}
+          bottomSection={bottomSection}
+          buttonSection={buttonSection}
+        />
+      </ViewWrapper>
+
+      {/* ========= Draft Drawer ========= */}
+      <DrawerCustom
+        isVisible={openDrawerDraft}
+        closeDrawer={() => setOpenDrawerDraft(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconEdit />,
+              label: "Edit Data",
+              path: `/investment/${id}/edit`,
+            },
+            {
+              icon: (
+                <AntDesign
+                  name="edit"
+                  size={ICON_SIZE_MEDIUM}
+                  color={MainColor.white}
+                />
+              ),
+              label: "Edit Prospektus",
+              path: `/investment/${id}/edit-prospectus`,
+            },
+            {
+              icon: (
+                <MaterialIcons
+                  name="create"
+                  size={ICON_SIZE_MEDIUM}
+                  color={MainColor.white}
+                />
+              ),
+              label: "Update Dokumen",
+              path: `/investment/${id}/recap-of-document`,
+            },
+          ]}
+          columns={4}
+          onPressItem={handlePressDraft as any}
+        />
+      </DrawerCustom>
+
+      {/* ========= Publish Drawer ========= */}
+      <DrawerCustom
+        isVisible={openDrawerPublish}
+        closeDrawer={() => setOpenDrawerPublish(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconDocument />,
+              label: "Update Dokumen",
+              path: `/investment/${id}/recap-of-document`,
+            },
+            {
+              icon: <IconNews />,
+              label: "Update Berita",
+              path: `/investment/${id}/(news)/recap-of-news`,
+            },
+          ]}
+          onPressItem={handlePressPublish as any}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

screens/Invesment/BoxProgressSection.tsx

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

screens/Invesment/ButtonInvestasiSection.tsx

@@ -1,14 +1,23 @@
 import { ButtonCustom } from "@/components";
+import { router } from "expo-router";
 
 export default function Investment_ButtonInvestasiSection({
+  id,
   isMine,
 }: {
+  id: string;
   isMine: boolean;
 }) {
   return (
     <>
       {isMine ? (
-        <ButtonCustom>Beli Saham</ButtonCustom>
+        <ButtonCustom
+          onPress={() => {
+            router.navigate(`/investment/${id}/(transaction-flow)`);
+          }}
+        >
+          Beli Saham
+        </ButtonCustom>
       ) : (
         <ButtonCustom disabled>Investasi Ini Milik Anda</ButtonCustom>
       )}

screens/Invesment/DetailDataPublishSection.tsx

@@ -0,0 +1,35 @@
+import { Spacing, StackCustom } from "@/components";
+import { listDataNotPublishInvesment, listDataPublishInvesment } from "@/lib/dummy-data/investment/dummy-data-not-publish";
+import React from "react";
+import Invesment_BoxDetailDataSection from "./BoxDetailDataSection";
+import Invesment_BoxProgressSection from "./BoxProgressSection";
+import Investment_ButtonStatusSection from "./ButtonStatusSection";
+
+export default function Invesment_DetailDataPublishSection({
+    status,
+    bottomSection,
+    buttonSection,
+}: {
+    status: string;
+    bottomSection: React.ReactNode;
+    buttonSection: React.ReactNode
+}) {
+    return (
+      <>
+        <StackCustom gap={"sm"}>
+          <Invesment_BoxProgressSection status={status as string} />
+          <Invesment_BoxDetailDataSection
+            data={
+              status === "publish"
+                ? listDataPublishInvesment
+                : listDataNotPublishInvesment
+            }
+            bottomSection={bottomSection}
+          />
+          <Investment_ButtonStatusSection status={status as string} />
+          {buttonSection}
+        </StackCustom>
+        <Spacing />
+      </>
+    );
+}