Invesment

Add :
-  lib/dummy-data/_master/bank.ts
- investment/[id]/(transaction-flow)/select-bank.tsx
- /investment/[id]/(transaction-flow)/process.tsx
- investment/[id]/(transaction-flow)/invoice.tsx

## No Issue

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

@@ -1,6 +1,7 @@
 import { BackButton } from "@/components";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { HeaderStyles } from "@/styles/header-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
@@ -275,6 +276,34 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
+        <Stack.Screen
+          name="investment/[id]/(transaction-flow)/select-bank"
+          options={{
+            title: "Pilih Bank",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="investment/[id]/(transaction-flow)/invoice"
+          options={{
+            title: "Invoice",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="investment/[id]/(transaction-flow)/process"
+          options={{
+            title: "Proses",
+            headerLeft: () => (
+              <Ionicons
+                name="close"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.yellow}
+                onPress={() => router.navigate(`/investment/(tabs)/transaction`)}
+              />
+            ),
+          }}
+        />
 
         {/* ========== End Investment Section ========= */}
 

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

@@ -1,12 +1,88 @@
-import { TextCustom, ViewWrapper } from "@/components";
-import { useLocalSearchParams } from "expo-router";
+import {
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCustom,
+  Divider,
+  Grid,
+  StackCustom,
+  TextCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { router, useLocalSearchParams } from "expo-router";
 
 export default function InvestmentInvest() {
   const { id } = useLocalSearchParams();
+
+  const buttonSubmit = () => {
+    return (
+      <>
+        <BoxButtonOnFooter>
+          <ButtonCustom onPress={() => router.push(`/investment/${id}/select-bank`)}>Beli</ButtonCustom>
+        </BoxButtonOnFooter>
+      </>
+    );
+  };
+
   return (
     <>
-      <ViewWrapper>
-        <TextCustom>Pembelian Saham {id}</TextCustom>
+      <ViewWrapper footerComponent={buttonSubmit()}>
+        <BaseBox>
+          <StackCustom gap={"xs"}>
+            <Grid>
+              <Grid.Col span={6}>
+                <TextCustom>Sisa Lembar Saham</TextCustom>
+              </Grid.Col>
+              <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
+                <TextCustom>3.000</TextCustom>
+              </Grid.Col>
+            </Grid>
+            <Grid>
+              <Grid.Col span={6}>
+                <TextCustom>Harga Per Lembar</TextCustom>
+              </Grid.Col>
+              <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
+                <TextCustom>Rp. 1.000</TextCustom>
+              </Grid.Col>
+            </Grid>
+            <Grid>
+              <Grid.Col
+                span={6}
+                style={{
+                  justifyContent: "center",
+                }}
+              >
+                <TextCustom>Jumlah Pembelian</TextCustom>
+                <TextCustom bold color="yellow" size="small">
+                  Minimum 10 lembar
+                </TextCustom>
+              </Grid.Col>
+              <Grid.Col
+                span={6}
+                style={{
+                  alignItems: "flex-end",
+                }}
+              >
+                <TextInputCustom
+                  style={{
+                    width: "80%",
+                  }}
+                  placeholder="0"
+                  keyboardType="numeric"
+                />
+              </Grid.Col>
+            </Grid>
+            <Divider />
+            <Grid>
+              <Grid.Col span={6}>
+                <TextCustom>Total Harga</TextCustom>
+              </Grid.Col>
+              <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
+                <TextCustom>Rp. 1.000</TextCustom>
+              </Grid.Col>
+            </Grid>
+          </StackCustom>
+        </BaseBox>
       </ViewWrapper>
     </>
   );

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

@@ -0,0 +1,103 @@
+import {
+    BaseBox,
+    ButtonCenteredOnly,
+    ButtonCustom,
+    Grid,
+    InformationBox,
+    Spacing,
+    StackCustom,
+    TextCustom,
+    ViewWrapper
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { router, useLocalSearchParams } from "expo-router";
+
+export default function InvestmentInvoice() {
+    const { id } = useLocalSearchParams();
+  return (
+    <>
+      <ViewWrapper>
+        <StackCustom>
+          <InformationBox text="Mohon transfer ke rekening dibawah" />
+          <BaseBox>
+            <StackCustom gap={"xs"}>
+              <TextCustom>Nama BANK</TextCustom>
+              <TextCustom>Nama Penerima</TextCustom>
+              <Spacing height={10} />
+
+              <BaseBox backgroundColor={MainColor.soft_darkblue}>
+                <Grid containerStyle={{ justifyContent: "center" }}>
+                  <Grid.Col
+                    span={8}
+                    style={{
+                      justifyContent: "center",
+                    }}
+                  >
+                    <TextCustom size="xlarge" bold color="yellow">
+                      4567898765433567
+                    </TextCustom>
+                  </Grid.Col>
+                  <Grid.Col
+                    span={4}
+                    style={{
+                      alignItems: "flex-end",
+                    }}
+                  >
+                    <ButtonCustom>Salin</ButtonCustom>
+                  </Grid.Col>
+                </Grid>
+              </BaseBox>
+            </StackCustom>
+          </BaseBox>
+
+          <BaseBox>
+            <StackCustom gap={"xs"}>
+              <TextCustom>Jumlah Transaksi</TextCustom>
+
+              <Spacing height={10} />
+
+              <BaseBox backgroundColor={MainColor.soft_darkblue}>
+                <Grid containerStyle={{ justifyContent: "center" }}>
+                  <Grid.Col
+                    span={8}
+                    style={{
+                      justifyContent: "center",
+                    }}
+                  >
+                    <TextCustom size="xlarge" bold color="yellow">
+                      Rp. 1.000.000
+                    </TextCustom>
+                  </Grid.Col>
+                  <Grid.Col
+                    span={4}
+                    style={{
+                      alignItems: "flex-end",
+                    }}
+                  >
+                    <ButtonCustom>Salin</ButtonCustom>
+                  </Grid.Col>
+                </Grid>
+              </BaseBox>
+            </StackCustom>
+          </BaseBox>
+
+          <BaseBox>
+            <StackCustom>
+              <TextCustom>Upload bukti transfer anda.</TextCustom>
+              <ButtonCenteredOnly onPress={() => {
+                router.push("/(application)/(image)/take-picture/123")
+              }} icon="upload">
+                Upload
+              </ButtonCenteredOnly>
+            </StackCustom>
+          </BaseBox>
+
+          <ButtonCustom onPress={() => {
+            router.push(`/investment/${id}/(transaction-flow)/process`)
+
+          }}>Saya Sudah Transfer</ButtonCustom>
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -0,0 +1,13 @@
+import { BaseBox, TextCustom, ViewWrapper } from "@/components";
+
+export default function InvestmentProcess() {
+  return (
+    <>
+      <ViewWrapper>
+        <BaseBox>
+          <TextCustom align="center">Menunggu Konfirmasi Admin</TextCustom>
+        </BaseBox>
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -0,0 +1,35 @@
+import { BaseBox, BoxButtonOnFooter, ButtonCustom, ViewWrapper } from "@/components";
+import { RadioCustom, RadioGroup } from "@/components/Radio/RadioCustom";
+import { dummyMasterBank } from "@/lib/dummy-data/_master/bank";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function InvestmentSelectBank() {
+  const { id } = useLocalSearchParams();
+  const [value, setValue] = useState<any | number>("");
+
+  const buttonSubmit = () => {
+    return (
+      <>
+        <BoxButtonOnFooter>
+          <ButtonCustom
+            onPress={() => router.push(`/investment/${id}/invoice`)}
+          >
+            Pilih
+          </ButtonCustom>
+        </BoxButtonOnFooter>
+      </>
+    );
+  };
+  return (
+    <ViewWrapper footerComponent={buttonSubmit()}>
+      <RadioGroup value={value} onChange={setValue}>
+        {dummyMasterBank.map((item) => (
+          <BaseBox key={item.name}>
+            <RadioCustom label={item.name} value={item.code} />
+          </BaseBox>
+        ))}
+      </RadioGroup>
+    </ViewWrapper>
+  );
+}

lib/dummy-data/_master/bank.ts

@@ -0,0 +1,22 @@
+export const dummyMasterBank = [
+    {
+        name: "Bank BCA",
+        code: "BCA",
+    },
+    {
+        name: "Bank BNI",
+        code: "BNI",
+    },
+    {
+        name: "Bank BRI",
+        code: "BRI",
+    },
+    {
+        name: "Bank Mandiri",
+        code: "MANDIRI",
+    },
+    {
+        name: "Bank Permata",
+        code: "PERMATA",
+    },
+]

screens/Authentication/LoginView.tsx

@@ -32,13 +32,13 @@ export default function LoginView() {
 
     // router.navigate("/verification");
     // router.navigate(`/(application)/(user)/profile/${id}`);
-    router.navigate("/(application)/(user)/home");
+    // router.navigate("/(application)/(user)/home");
     // router.navigate(`/(application)/profile/${id}/edit`);
     // router.navigate(`/(application)/(user)/portofolio/${id}`)
     // router.navigate(`/(application)/(image)/preview-image/${id}`);
     // router.replace("/(application)/(user)/event/(tabs)");
     // router.replace("/(application)/coba");
-    // router.navigate("/investment/(tabs)")
+    router.navigate("/investment/(tabs)")
   }
 
   return (

screens/Invesment/ButtonStatusSection.tsx

@@ -3,8 +3,10 @@ import { router } from "expo-router";
 
 export default function Investment_ButtonStatusSection({
   status,
+  buttonPublish
 }: {
   status: string;
+  buttonPublish?: React.ReactNode;
 }) {
   const handleBatalkanReview = () => {
     AlertDefaultSystem({
@@ -74,7 +76,9 @@ export default function Investment_ButtonStatusSection({
 
   switch (status) {
     case "publish":
-      return <></>;
+      return <>
+      {buttonPublish}
+      </>;
 
     case "review":
       return (

screens/Invesment/DetailDataPublishSection.tsx

@@ -29,8 +29,10 @@ export default function Invesment_DetailDataPublishSection({
           }
           bottomSection={bottomSection}
         />
-        <Investment_ButtonStatusSection status={status as string} />
-        {buttonSection}
+        <Investment_ButtonStatusSection
+          status={status as string}
+          buttonPublish={buttonSection}
+        />
       </StackCustom>
       <Spacing />
     </>