Invesment

Add:
- screens/Invesment/ComponentBoxOnBottomDetail.tsx
- screens/Invesment/ButtonInvestasiSection.tsx
- app/(application)/(user)/investment/[id]/investor.tsx
- app/(application)/(user)/investment/[id]/(news)/list-of-news.tsx

Fix:
- screens/Invesment/BoxDetailDataSection.tsx
- app/(application)/(user)/investment/[id]/[status]/detail.tsx
- app/(application)/(user)/_layout.tsx

## No Issue

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

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

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

@@ -0,0 +1,58 @@
+import {
+    BackButton,
+    BaseBox,
+    DrawerCustom,
+    MenuDrawerDynamicGrid,
+    TextCustom,
+    ViewWrapper
+} from "@/components";
+import { IconPlus } from "@/components/_Icon";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function InvestmentListOfNews() {
+  const { id } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Daftar Berita",
+          headerLeft: () => <BackButton />,
+          //   headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+        }}
+      />
+      <ViewWrapper>
+        {Array.from({ length: 15 }).map((_, index) => (
+          <BaseBox
+            key={index}
+            paddingBlock={5}
+            href={`/investment/${id}/(news)/${index + 1}`}
+          >
+            <TextCustom bold>Berita Terbaru {index + 1}</TextCustom>
+          </BaseBox>
+        ))}
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              label: "Tambah Berita",
+              path: `/investment/${id}/add-news`,
+              icon: <IconPlus />,
+            },
+          ]}
+          onPressItem={(item) => {
+            router.push(item.path as any);
+            setOpenDrawer(false);
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

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

@@ -1,33 +1,27 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import {
-  BackButton,
+    BackButton,
-  BaseBox,
+    BaseBox,
-  CenterCustom,
+    DotButton,
-  DotButton,
+    DrawerCustom,
-  DrawerCustom,
+    MenuDrawerDynamicGrid,
-  Grid,
+    ProgressCustom,
-  MenuDrawerDynamicGrid,
+    Spacing,
-  ProgressCustom,
+    StackCustom,
-  Spacing,
+    TextCustom,
-  StackCustom,
+    ViewWrapper
-  TextCustom,
-  ViewWrapper,
 } from "@/components";
-import {
+import { IconDocument, IconEdit, IconNews } from "@/components/_Icon";
-  IconDocument,
-  IconEdit,
-  IconNews,
-  IconProspectus,
-} from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
-import { AccentColor, MainColor } from "@/constants/color-palet";
+import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
 import {
-  listDataNotPublishInvesment,
+    listDataNotPublishInvesment,
-  listDataPublishInvesment,
+    listDataPublishInvesment,
 } from "@/lib/dummy-data/investment/dummy-data-not-publish";
-import BoxDetailDataSection from "@/screens/Invesment/BoxDetailDataSection";
+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 { AntDesign, MaterialIcons } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
@@ -51,37 +45,10 @@ export default function InvestmentDetailStatus() {
   };
 
   const bottomSection = (
-    <Grid>
+    <Invesment_ComponentBoxOnBottomDetail
-      <Grid.Col span={6} style={{ paddingRight: 10 }}>
+      id={id as string}
-        <BaseBox
+      status={status as string}
-          backgroundColor={AccentColor.blue}
+    />
-          style={{ borderColor: AccentColor.softblue, borderWidth: 1 }}
-          href={`/investment/${id}/prospektus/file`}
-        >
-          <StackCustom>
-            <TextCustom align="center">Prospektus</TextCustom>
-            <CenterCustom>
-              <IconProspectus 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>
-              <IconDocument size={50} color={MainColor.white} />
-            </CenterCustom>
-          </StackCustom>
-        </BaseBox>
-      </Grid.Col>
-    </Grid>
   );
 
   return (
@@ -98,6 +65,7 @@ export default function InvestmentDetailStatus() {
             ) : null,
         }}
       />
+
       <ViewWrapper>
         <StackCustom gap={"sm"}>
           {status === "publish" && (
@@ -108,7 +76,7 @@ export default function InvestmentDetailStatus() {
               </StackCustom>
             </BaseBox>
           )}
-          <BoxDetailDataSection
+          <Invesment_BoxDetailDataSection
             data={
               status === "publish"
                 ? listDataPublishInvesment
@@ -117,8 +85,9 @@ export default function InvestmentDetailStatus() {
             bottomSection={bottomSection}
           />
           <Investment_ButtonStatusSection status={status as string} />
-          <Spacing />
+          <Investment_ButtonInvestasiSection isMine={false} />
         </StackCustom>
+        <Spacing />
       </ViewWrapper>
 
       {/* ========= Draft Drawer ========= */}

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

@@ -0,0 +1,21 @@
+import {
+  AvatarUsernameAndOtherComponent,
+  BoxWithHeaderSection,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+
+export default function InvestmentInvestor() {
+  return (
+    <>
+      <ViewWrapper>
+        {Array.from({ length: 10 }).map((_, index) => (
+          <BoxWithHeaderSection key={index}>
+            <AvatarUsernameAndOtherComponent />
+            <TextCustom bold>Rp. 7.000.000</TextCustom>
+          </BoxWithHeaderSection>
+        ))}
+      </ViewWrapper>
+    </>
+  );
+}

components/Grid/GridCustom.tsx

@@ -90,8 +90,8 @@ const Col: React.FC<ColProps> = ({ children, span, style }) => {
     col: {
       flexBasis: `${(100 / columns) * colSpan}%`,
       paddingVertical: margin,
-    //   marginBottom: gap,
+      marginBottom: gap,
-      marginBlock: gap,
+      // marginBlock: gap,
     },
   });
 

screens/Invesment/BoxDetailDataSection.tsx

@@ -8,7 +8,7 @@ import {
 } from "@/components";
 import { View } from "react-native";
 
-export default function BoxDetailDataSection({
+export default function Invesment_BoxDetailDataSection({
   title,
   data,
   bottomSection,
@@ -41,7 +41,7 @@ export default function BoxDetailDataSection({
               </Grid.Col>
             </Grid>
           ))}
-
+          <Spacing />
           {bottomSection}
         </StackCustom>
       </BaseBox>

screens/Invesment/ButtonInvestasiSection.tsx

@@ -0,0 +1,17 @@
+import { ButtonCustom } from "@/components";
+
+export default function Investment_ButtonInvestasiSection({
+  isMine,
+}: {
+  isMine: boolean;
+}) {
+  return (
+    <>
+      {isMine ? (
+        <ButtonCustom>Beli Saham</ButtonCustom>
+      ) : (
+        <ButtonCustom disabled>Investasi Ini Milik Anda</ButtonCustom>
+      )}
+    </>
+  );
+}

screens/Invesment/ComponentBoxOnBottomDetail.tsx

@@ -0,0 +1,126 @@
+import {
+  BaseBox,
+  CenterCustom,
+  Grid,
+  StackCustom,
+  TextCustom,
+} from "@/components";
+import { IconDocument, IconNews, IconProspectus } from "@/components/_Icon";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { Ionicons } from "@expo/vector-icons";
+
+export default function Invesment_ComponentBoxOnBottomDetail({
+  id,
+  status,
+}: {
+  id: string;
+  status: string;
+}) {
+  return (
+    <>
+      {status === "publish" ? (
+        <>
+          <Grid>
+            <Grid.Col span={6} style={{ paddingInline: 5 }}>
+              <BaseBox
+                backgroundColor={AccentColor.blue}
+                style={{ borderColor: AccentColor.softblue, borderWidth: 1 }}
+                href={`/investment/${id}/prospektus/file`}
+              >
+                <StackCustom>
+                  <TextCustom align="center">Prospektus</TextCustom>
+                  <CenterCustom>
+                    <IconProspectus size={50} color={MainColor.white} />
+                  </CenterCustom>
+                </StackCustom>
+              </BaseBox>
+            </Grid.Col>
+
+            <Grid.Col span={6} style={{ paddingInline: 5 }}>
+              <BaseBox
+                backgroundColor={AccentColor.blue}
+                style={{ borderColor: AccentColor.softblue, borderWidth: 1 }}
+                href={`/investment/${id}/list-of-document`}
+              >
+                <StackCustom>
+                  <TextCustom align="center">Dokumen</TextCustom>
+                  <CenterCustom>
+                    <IconDocument size={50} color={MainColor.white} />
+                  </CenterCustom>
+                </StackCustom>
+              </BaseBox>
+            </Grid.Col>
+          </Grid>
+
+          <Grid>
+            <Grid.Col span={6} style={{ paddingInline: 5 }}>
+              <BaseBox
+                backgroundColor={AccentColor.blue}
+                style={{ borderColor: AccentColor.softblue, borderWidth: 1 }}
+                href={`/investment/${id}/investor`}
+              >
+                <StackCustom>
+                  <TextCustom align="center">Investor</TextCustom>
+                  <CenterCustom>
+                    <Ionicons
+                      name="cash-outline"
+                      size={50}
+                      color={MainColor.white}
+                    />
+                  </CenterCustom>
+                </StackCustom>
+              </BaseBox>
+            </Grid.Col>
+
+            <Grid.Col span={6} style={{ paddingInline: 5 }}>
+              <BaseBox
+                backgroundColor={AccentColor.blue}
+                style={{ borderColor: AccentColor.softblue, borderWidth: 1 }}
+                href={`/investment/${id}/list-of-news`}
+              >
+                <StackCustom>
+                  <TextCustom align="center">Berita</TextCustom>
+                  <CenterCustom>
+                    <IconNews size={50} color={MainColor.white} />
+                  </CenterCustom>
+                </StackCustom>
+              </BaseBox>
+            </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>
+                  <IconProspectus 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>
+                  <IconDocument size={50} color={MainColor.white} />
+                </CenterCustom>
+              </StackCustom>
+            </BaseBox>
+          </Grid.Col>
+        </Grid>
+      )}
+    </>
+  );
+}