Invesment

Add :
- screens/Invesment/
- app/(application)/(user)/investment/[id]/

Fix:
- index & portofolio: basic UI

## No Issue

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

@@ -207,6 +207,27 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
+        <Stack.Screen
+          name="investment/[id]/index"
+          options={{
+            title: "Detail Investasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="investment/[id]/list-of-document"
+          options={{
+            title: "Daftar Dokumen",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="investment/[id]/edit"
+          options={{
+            title: "Edit Investasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
 
         {/* ========== End Investment Section ========= */}
 

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

@@ -22,7 +22,7 @@ export default function InvestmentBursa() {
       }
     >
       {Array.from({ length: 10 }).map((_, index) => (
-        <BaseBox key={index} paddingTop={7} paddingBottom={7}>
+        <BaseBox key={index} paddingTop={7} paddingBottom={7} href={`/investment/${index}`}>
           <Grid>
             <Grid.Col span={5}>
               <Image

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

@@ -1,16 +1,7 @@
-import {
-  BaseBox,
-  Grid,
-  ScrollableCustom,
-  Spacing,
-  TextCustom,
-  ViewWrapper
-} from "@/components";
-import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import { ScrollableCustom, ViewWrapper } from "@/components";
 import { masterStatus } from "@/lib/dummy-data/_master/status";
-import { Image } from "expo-image";
+import Investment_StatusBox from "@/screens/Invesment/StatusBox";
 import { useState } from "react";
-import { View } from "react-native";
 
 export default function InvestmentPortofolio() {
   const [activeCategory, setActiveCategory] = useState<string | null>(
@@ -36,34 +27,12 @@ export default function InvestmentPortofolio() {
   return (
     <ViewWrapper headerComponent={scrollComponent} hideFooter>
       {Array.from({ length: 10 }).map((_, index) => (
-        <BaseBox key={index} paddingTop={7} paddingBottom={7}>
-          <Grid>
-            <Grid.Col span={6}>
-              <TextCustom truncate={2}>
-                Title here : {activeCategory} 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>
-
-              <Spacing />
-
-              <TextCustom bold size="small">
-                Target Dana:
-              </TextCustom>
-              <TextCustom>Rp. {index + 1 % 3/4 * 1004000}</TextCustom>
-            </Grid.Col>
-            <Grid.Col span={1}>
-              <View />
-            </Grid.Col>
-            <Grid.Col span={5}>
-              <Image
-                source={DUMMY_IMAGE.background}
-                style={{ width: "auto", height: 100, borderRadius: 10 }}
-              />
-            </Grid.Col>
-          </Grid>
-        </BaseBox>
+        <Investment_StatusBox
+          key={index}
+          id={index.toString()}
+          status={activeCategory as string}
+          href={`/investment/${index}/${activeCategory}/detail`}
+        />
       ))}
     </ViewWrapper>
   );

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

@@ -0,0 +1,171 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  BackButton,
+  BaseBox,
+  ButtonCustom,
+  CenterCustom,
+  DotButton,
+  DrawerCustom,
+  DummyLandscapeImage,
+  Grid,
+  MenuDrawerDynamicGrid,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconEdit } from "@/components/_Icon";
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import Investment_ButtonStatusSection from "@/screens/Invesment/ButtonStatusSection";
+import { FontAwesome6 } from "@expo/vector-icons";
+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 handlePressDraft = (item: IMenuDrawerItem) => {
+    console.log("PATH >> ", item.path);
+    router.navigate(item.path as any);
+    setOpenDrawerDraft(false);
+  };
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: `Detail ${_.startCase(status as string)}`,
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            status === "draft" ? (
+              <DotButton onPress={() => setOpenDrawerDraft(true)} />
+            ) : null,
+          //  : status === "publish" ? (
+          //   <DotButton onPress={() => setOpenDrawerPublish(true)} />
+          // ) : null,
+        }}
+      />
+      <ViewWrapper>
+        <BaseBox paddingBottom={0}>
+          <StackCustom gap={"xs"}>
+            <DummyLandscapeImage />
+            <Spacing />
+            <TextCustom align="center" size="xlarge" bold>
+              Title of Investment
+            </TextCustom>
+            <Spacing />
+
+            {listData.map((item, index) => (
+              <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>
+            ))}
+
+            <Grid>
+              <Grid.Col span={6} style={{ paddingRight: 10 }}>
+                <BaseBox
+                  backgroundColor={AccentColor.blue}
+                  style={{ borderColor: AccentColor.softblue, borderWidth: 1 }}
+                >
+                  <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>
+
+      <DrawerCustom
+        isVisible={openDrawerDraft}
+        closeDrawer={() => setOpenDrawerDraft(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconEdit />,
+              label: "Edit",
+              path: `/investment/${id}/edit`,
+            },
+          ]}
+          columns={4}
+          onPressItem={handlePressDraft 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",
+  },
+];

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

@@ -0,0 +1,9 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function InvestmentEdit() {
+  return (
+    <ViewWrapper>
+      <TextCustom>Edit</TextCustom>
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,9 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function InvestmentDetail() {
+    return (
+        <ViewWrapper>
+            <TextCustom>Investment Detail</TextCustom>
+        </ViewWrapper>
+    )
+}

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

@@ -0,0 +1,9 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function InvestmentListOfDocument() {
+  return (
+    <ViewWrapper>
+      <TextCustom>Document List</TextCustom>
+    </ViewWrapper>
+  );
+}