Merge pull request 'Investasi & Donasi' (#8) from donation/1-aug-25 into main

Reviewed-on: bip/hipmi-mobile#8

app/(application)/(file)/[id].tsx

@@ -0,0 +1,25 @@
+import { BackButton, ViewWrapper } from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { FontAwesome } from "@expo/vector-icons";
+import { Stack } from "expo-router";
+
+export default function FileScreen() {
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "File",
+          headerLeft: () => <BackButton />,
+        }}
+      />
+      <ViewWrapper>
+        <FontAwesome
+          name="file-pdf-o"
+          size={300}
+          style={{ alignSelf: "center" }}
+          color={MainColor.white}
+        />
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -287,7 +287,16 @@ export default function UserLayout() {
           name="investment/[id]/(transaction-flow)/invoice"
           options={{
             title: "Invoice",
-            headerLeft: () => <BackButton />,
+            headerLeft: () => (
+              <Ionicons
+                name="close"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.yellow}
+                onPress={() =>
+                  router.navigate(`/investment/(tabs)/transaction`)
+                }
+              />
+            ),
           }}
         />
         <Stack.Screen
@@ -299,15 +308,46 @@ export default function UserLayout() {
                 name="close"
                 size={ICON_SIZE_SMALL}
                 color={MainColor.yellow}
-                onPress={() => router.navigate(`/investment/(tabs)/transaction`)}
+                onPress={() =>
+                  router.navigate(`/investment/(tabs)/transaction`)
+                }
               />
             ),
           }}
         />
+        <Stack.Screen
+          name="investment/[id]/(transaction-flow)/success"
+          options={{
+            title: "Transaksi Berhasil",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="investment/[id]/(transaction-flow)/failed"
+          options={{
+            title: "Transaksi Gagal",
+            headerLeft: () => <BackButton />,
+          }}
+        />
 
+        <Stack.Screen
+          name="investment/[id]/(my-holding)/[id]"
+          options={{
+            title: "Detail Saham Saya",
+            headerLeft: () => <BackButton />,
+          }}
+        />
         {/* ========== End Investment Section ========= */}
 
         {/* ========== Donation Section ========= */}
+        <Stack.Screen
+          name="donation/(tabs)"
+          options={{
+            title: "Donasi",
+            headerLeft: () => <BackButton path="/home" />,
+          }}
+        />
+
         <Stack.Screen
           name="donation/create"
           options={{
@@ -315,7 +355,13 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
-
+        <Stack.Screen
+          name="donation/create-story"
+          options={{
+            title: "Tambah Donasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
         {/* ========== End Donation Section ========= */}
 
         {/* ========== Job Section ========= */}

app/(application)/(user)/crowdfunding/index.tsx

@@ -20,7 +20,7 @@ export default function Crowdfunding() {
     {
       title: "Donasi",
       desc: "Berbagi info untuk berdonasi lebih luas dan lebih efisien.",
-      path: "donation/create",
+      path: "donation/(tabs)",
     },
   ];
 

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

@@ -0,0 +1,37 @@
+import { IconHome, IconStatus } from "@/components/_Icon";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { TabsStyles } from "@/styles/tabs-styles";
+import {
+    FontAwesome5
+} from "@expo/vector-icons";
+import { Tabs } from "expo-router";
+
+export default function InvestmentTabsLayout() {
+  return (
+    <Tabs screenOptions={TabsStyles}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Beranda",
+          tabBarIcon: ({ color }) => <IconHome color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="status"
+        options={{
+          title: "Galang Dana",
+          tabBarIcon: ({ color }) => <IconStatus color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="my-donation"
+        options={{
+          title: "Donasi Saya",
+          tabBarIcon: ({ color }) => (
+            <FontAwesome5 name="donate" color={color} size={ICON_SIZE_SMALL} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}

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

@@ -0,0 +1,56 @@
+import {
+    BaseBox,
+    DummyLandscapeImage,
+    FloatingButton,
+    Grid,
+    ProgressCustom,
+    StackCustom,
+    TextCustom,
+    ViewWrapper,
+} from "@/components";
+import { router } from "expo-router";
+import { View } from "react-native";
+
+export default function DonationBeranda() {
+  return (
+    <ViewWrapper
+      hideFooter
+      floatingButton={
+        <FloatingButton onPress={() => router.push("/donation/create")} />
+      }
+    >
+      {Array.from({ length: 10 }).map((_, index) => (
+        <BaseBox
+          key={index}
+          paddingTop={7}
+          paddingBottom={7}
+          href={`/investment/${index}`}
+        >
+          <Grid>
+            <Grid.Col span={5}>
+              <DummyLandscapeImage height={100} />
+            </Grid.Col>
+            <Grid.Col span={1}>
+              <View />
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <StackCustom>
+                <View>
+                  <TextCustom truncate>
+                    Judul Donasi: Lorem ipsum dolor sit amet consectetur
+                    adipisicing elit.
+                  </TextCustom>
+                  <TextCustom size="small">Sisa hari: 0</TextCustom>
+                </View>
+                <ProgressCustom value={(index % 5) * 20} size="lg" />
+                {/* <TextCustom>
+                 Terkumpul : Rp 300.000
+                </TextCustom> */}
+              </StackCustom>
+            </Grid.Col>
+          </Grid>
+        </BaseBox>
+      ))}
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/donation/(tabs)/my-donation.tsx

@@ -0,0 +1,60 @@
+import {
+    BadgeCustom,
+    BaseBox,
+    DummyLandscapeImage,
+    Grid,
+    StackCustom,
+    TextCustom,
+    ViewWrapper
+} from "@/components";
+import { dummyMasterStatusTransaction } from "@/lib/dummy-data/_master/status-transaction";
+import { View } from "react-native";
+
+export default function DonationMyDonation() {
+  const randomStatusData = Array.from({ length: 10 }, () => {
+    const randomIndex = Math.floor(
+      Math.random() * dummyMasterStatusTransaction.length
+    );
+    return dummyMasterStatusTransaction[randomIndex];
+  });
+  return (
+    <ViewWrapper hideFooter>
+      {randomStatusData.map((item, index) => (
+        <BaseBox
+          key={index}
+          paddingTop={7}
+          paddingBottom={7}
+          href={`/investment/${index}`}
+        >
+          <Grid>
+            <Grid.Col span={5}>
+              <DummyLandscapeImage height={100} />
+            </Grid.Col>
+            <Grid.Col span={1}>
+              <View />
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <StackCustom gap={"sm"}>
+                <View>
+                  <TextCustom truncate>
+                    Judul Donasi: Lorem ipsum dolor sit amet consectetur
+                    adipisicing elit.
+                  </TextCustom>
+                </View>
+                <View>
+                  <TextCustom>Donasi Saya</TextCustom>
+                  <TextCustom bold color="yellow">
+                    Rp. 7.500.000
+                  </TextCustom>
+                </View>
+                <BadgeCustom variant="light" color={item.color} fullWidth>
+                  {item.label}
+                </BadgeCustom>
+              </StackCustom>
+            </Grid.Col>
+          </Grid>
+        </BaseBox>
+      ))}
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/donation/(tabs)/status.tsx

@@ -0,0 +1,74 @@
+import {
+  Grid,
+  BaseBox,
+  DummyLandscapeImage,
+  ScrollableCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
+import { useState } from "react";
+import { View } from "react-native";
+
+export default function DonationStatus() {
+  const [activeCategory, setActiveCategory] = useState<string | null>(
+    "publish"
+  );
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+    // tambahkan logika lain seperti filter dsb.
+  };
+
+  const scrollComponent = (
+    <ScrollableCustom
+      data={dummyMasterStatus.map((e, i) => ({
+        id: i,
+        label: e.label,
+        value: e.value,
+      }))}
+      onButtonPress={handlePress}
+      activeId={activeCategory as any}
+    />
+  );
+  return (
+    <ViewWrapper hideFooter headerComponent={scrollComponent}>
+      {Array.from({ length: 10 }).map((_, index) => (
+        <BaseBox
+          key={index}
+          paddingTop={7}
+          paddingBottom={7}
+          href={`/investment/${index}`}
+        >
+          <Grid>
+            <Grid.Col span={5}>
+              <DummyLandscapeImage height={100} />
+            </Grid.Col>
+            <Grid.Col span={1}>
+              <View />
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <StackCustom>
+                <TextCustom truncate>
+                  Judul Donasi: {activeCategory} Lorem ipsum dolor sit amet
+                  consectetur adipisicing elit.
+                </TextCustom>
+
+                <View>
+                  <TextCustom>Target Dana</TextCustom>
+                  <TextCustom bold color="yellow">
+                    Rp. 7.500.000
+                  </TextCustom>
+                </View>
+                {/* <TextCustom>
+                 Terkumpul : Rp 300.000
+                </TextCustom> */}
+              </StackCustom>
+            </Grid.Col>
+          </Grid>
+        </BaseBox>
+      ))}
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/donation/create-story.tsx

@@ -0,0 +1,64 @@
+import {
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  Spacing,
+  StackCustom,
+  TextAreaCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { router } from "expo-router";
+
+export default function DonationCreateStory() {
+  return (
+    <ViewWrapper>
+      <StackCustom gap={"xs"}>
+        <InformationBox text="Cerita Anda adalah kunci untuk menginspirasi kebaikan. Jelaskan dengan jujur dan jelas tujuan penggalangan dana ini agar calon donatur memahami dampak positif yang dapat mereka wujudkan melalui kontribusi mereka." />
+        <TextAreaCustom
+          label="Pembukaan Cerita"
+          placeholder="Masukkan pembukaan cerita"
+          required
+          showCount
+          maxLength={1000}
+        />
+        <TextAreaCustom
+          label="Tujuan Donasi"
+          placeholder="Masukkan tujuan donasi"
+          required
+          showCount
+          maxLength={1000}
+        />
+
+        <LandscapeFrameUploaded />
+        <ButtonCenteredOnly onPress={() => {}} icon="upload">
+          Upload
+        </ButtonCenteredOnly>
+
+        <Spacing height={40} />
+        <InformationBox text="Pastikan Anda mengisi nama bank dan nomor rekening dengan benar. Informasi ini akan membantu admin memverifikasi dan memproses penggalangan dana Anda dengan cepat dan tepat setelah penggalangan dana dipublikasikan." />
+        <TextInputCustom
+          label="Nama Bank"
+          placeholder="Masukkan nama bank"
+          required
+        />
+        <TextInputCustom
+          label="Nomor Rekening"
+          placeholder="Masukkan nomor rekening"
+          required
+        />
+
+        <Spacing />
+        <ButtonCustom
+          onPress={() => {
+            router.navigate(`/donation/(tabs)/status`);
+          }}
+        >
+          Simpan
+        </ButtonCustom>
+      </StackCustom>
+      <Spacing />
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/donation/create.tsx

@@ -1,11 +1,70 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  SelectCustom,
+  Spacing,
+  StackCustom,
+  TextInputCustom,
+  ViewWrapper
+} from "@/components";
+import { dummyDonasiDurasi } from "@/lib/dummy-data/donasi/durasi";
+import { dummyDonasiKategori } from "@/lib/dummy-data/donasi/kategori";
+import { router } from "expo-router";
 
 export default function DonationCreate() {
   return (
     <ViewWrapper>
-      <TextCustom bold size="large">
+      <StackCustom gap={"xs"}>
-        Coming Soon !
+        <InformationBox text="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita penggalangan dana." />
-      </TextCustom>
+
+        <TextInputCustom
+          label="Judul Donasi"
+          placeholder="Masukkan Judul Donasi"
+          required
+        />
+        <TextInputCustom
+          label="Target Donasi"
+          placeholder="Masukkan Target Donasi"
+          required
+          keyboardType="numeric"
+        />
+
+        <SelectCustom
+          data={dummyDonasiKategori.map((item) => ({
+            label: item.label,
+            value: item.value,
+          }))}
+          onChange={(value) => console.log(value)}
+          label="Pilih Kategori Donasi"
+          placeholder="Pilih Kategori Donasi"
+          required
+        />
+
+        <SelectCustom
+          data={dummyDonasiDurasi.map((item) => ({
+            label: item.label,
+            value: item.value,
+          }))}
+          onChange={(value) => console.log(value)}
+          label="Pilih Durasi Donasi"
+          placeholder="Pilih Durasi Donasi"
+          required
+        />
+
+        <LandscapeFrameUploaded />
+        <ButtonCenteredOnly onPress={() => {
+          router.push("/(application)/(image)/take-picture/123")
+        }} icon="upload">
+          Upload
+        </ButtonCenteredOnly>
+        <Spacing />
+        <ButtonCustom onPress={() => {
+          router.push("/donation/create-story")
+        }}>Selanjutnya</ButtonCustom>
+      </StackCustom>
+      <Spacing />
     </ViewWrapper>
   );
 }

app/(application)/(user)/event/(tabs)/status.tsx

@@ -1,12 +1,12 @@
 import {
-  BoxWithHeaderSection,
+    BoxWithHeaderSection,
-  Grid,
+    Grid,
-  ScrollableCustom,
+    ScrollableCustom,
-  StackCustom,
+    StackCustom,
-  TextCustom
+    TextCustom
 } from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { masterStatus } from "@/lib/dummy-data/_master/status";
+import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
 import { useState } from "react";
 
 export default function EventStatus() {
@@ -23,7 +23,7 @@ export default function EventStatus() {
 
   const scrollComponent = (
     <ScrollableCustom
-      data={masterStatus.map((e, i) => ({
+      data={dummyMasterStatus.map((e, i) => ({
         id: i,
         label: e.label,
         value: e.value,

app/(application)/(user)/investment/(tabs)/my-holding.tsx

@@ -7,13 +7,14 @@ import {
   TextCustom,
   ViewWrapper,
 } from "@/components";
+import { router } from "expo-router";
 import { View } from "react-native";
 
 export default function InvestmentMyHolding() {
   return (
     <ViewWrapper hideFooter>
       {Array.from({ length: 10 }).map((_, index) => (
-        <BaseBox key={index} paddingTop={7} paddingBottom={7}>
+        <BaseBox key={index} paddingTop={7} paddingBottom={7} onPress={() => router.push(`/investment/${index}/(my-holding)/holding-${index}`)}>
           <Grid>
             <Grid.Col span={6}>
               <StackCustom gap={"xs"}>

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

@@ -1,5 +1,5 @@
 import { ScrollableCustom, ViewWrapper } from "@/components";
-import { masterStatus } from "@/lib/dummy-data/_master/status";
+import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
 import Investment_StatusBox from "@/screens/Invesment/StatusBox";
 import { useState } from "react";
 
@@ -15,7 +15,7 @@ export default function InvestmentPortofolio() {
 
   const scrollComponent = (
     <ScrollableCustom
-      data={masterStatus.map((e, i) => ({
+      data={dummyMasterStatus.map((e, i) => ({
         id: i,
         label: e.label,
         value: e.value,

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

@@ -6,15 +6,43 @@ import {
   TextCustom,
   ViewWrapper,
 } from "@/components";
+import { dummyMasterStatusTransaction } from "@/lib/dummy-data/_master/status-transaction";
 import { GStyles } from "@/styles/global-styles";
 import dayjs from "dayjs";
+import { router } from "expo-router";
 import { View } from "react-native";
 
 export default function InvestmentTransaction() {
+  const randomStatusData = Array.from({ length: 10 }, () => {
+    const randomIndex = Math.floor(
+      Math.random() * dummyMasterStatusTransaction.length
+    );
+    return dummyMasterStatusTransaction[randomIndex];
+  });
+
+  const handlePress = (value: string) => {
+    if (value === "menunggu") {
+      router.push(`/investment/${value}/(transaction-flow)/invoice`);
+    } else if (value === "proses") {
+      router.push(`/investment/${value}/(transaction-flow)/process`);
+    } else if (value === "berhasil") {
+      router.push(`/investment/${value}/(transaction-flow)/success`);
+    } else if (value === "gagal") {
+      router.push(`/investment/${value}/(transaction-flow)/failed`);
+    }
+  };
+
   return (
     <ViewWrapper hideFooter>
-      {Array.from({ length: 10 }).map((_, i) => (
+      {randomStatusData.map((item, i) => (
-        <BaseBox key={i} paddingTop={7} paddingBottom={7}>
+        <BaseBox
+          key={i}
+          paddingTop={7}
+          paddingBottom={7}
+          onPress={() => {
+            handlePress(item.value);
+          }}
+        >
           <Grid>
             <Grid.Col span={6}>
               <StackCustom gap={"xs"}>
@@ -38,10 +66,10 @@ export default function InvestmentTransaction() {
                 </TextCustom>
                 <BadgeCustom
                   variant="light"
-                  color="success"
+                  color={item.color}
                   style={GStyles.alignSelfFlexEnd}
                 >
-                  Berhasil
+                  {item.label}
                 </BadgeCustom>
               </StackCustom>
             </Grid.Col>

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

@@ -8,7 +8,7 @@ export default function InvestmentListOfDocument() {
         <Investment_BoxDetailDocument
           key={index}
           title={`Judul Dokumen ${index + 1}`}
-          href={`/investment/${index + 1}/dokumen/file`}
+          href={`/(file)/${index + 1}`}
         />
       ))}
     </ViewWrapper>

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

@@ -53,7 +53,7 @@ export default function InvestmentRecapOfDocument() {
                 onPress={() => setOpenDrawerBox(true)}
               />
             }
-            href={`/investment/${id}/dokumen/file`}
+            href={`/(file)/${id}`}
           />
         ))}
       </ViewWrapper>

app/(application)/(user)/investment/[id]/(my-holding)/[id].tsx

@@ -0,0 +1,154 @@
+import {
+    BackButton,
+    BaseBox,
+    DotButton,
+    DrawerCustom,
+    Grid,
+    MenuDrawerDynamicGrid,
+    StackCustom,
+    TextCustom,
+    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 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 InvestmentDetailHolding() {
+  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={"publish"}
+    />
+  );
+
+  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>
+        <BaseBox>
+          <StackCustom gap={"xs"}>
+            <Grid>
+              <Grid.Col span={6}>
+                <TextCustom bold>Nila Transaksi</TextCustom>
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <TextCustom bold>Rp. 7.500.000</TextCustom>
+              </Grid.Col>
+            </Grid>
+            <Grid>
+              <Grid.Col span={6}>
+                <TextCustom bold>Saham Terbeli</TextCustom>
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <TextCustom bold>300 Lembar</TextCustom>
+              </Grid.Col>
+            </Grid>
+          </StackCustom>
+        </BaseBox>
+        <Invesment_DetailDataPublishSection
+          status={"publish"}
+          bottomSection={bottomSection}
+        />
+      </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>
+    </>
+  );
+}

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

@@ -0,0 +1,79 @@
+import { BaseBox, Grid, Spacing, StackCustom, TextCustom, ViewWrapper } from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { GStyles } from "@/styles/global-styles";
+import { FontAwesome6 } from "@expo/vector-icons";
+
+export default function InvestmentFailed() {
+  return (
+    <ViewWrapper>
+      <StackCustom>
+        <BaseBox>
+          <StackCustom>
+            <TextCustom bold align="center">
+              Transaksi anda gagal karena bukti transfer tidak sesuai dengan
+              data kami. Jika ini masalah khusus silahkan hubungi pada kontak
+              whatsapp kami.
+            </TextCustom>
+
+            <FontAwesome6
+              name="whatsapp"
+              size={50}
+              color={MainColor.green}
+              style={GStyles.alignSelfCenter}
+            />
+          </StackCustom>
+        </BaseBox>
+
+        <BaseBox>
+          <TextCustom bold align="center" size="large">
+            Detail Transaksi
+          </TextCustom>
+
+          <Spacing />
+
+          <StackCustom>
+            {listData.map((item, i) => (
+              <Grid key={i}>
+                <Grid.Col span={5}>
+                  <TextCustom bold>{item.label}</TextCustom>
+                </Grid.Col>
+                <Grid.Col span={7}>
+                  <TextCustom style={{ paddingLeft: 10 }}>
+                    {item.value}
+                  </TextCustom>
+                </Grid.Col>
+              </Grid>
+            ))}
+          </StackCustom>
+        </BaseBox>
+      </StackCustom>
+    </ViewWrapper>
+  );
+}
+
+const listData = [
+  {
+    label: "Bank",
+    value: " BCA",
+  },
+  {
+    label: "Rekening Penerima",
+    value: "Himpunan Pengusaha Muda Indonesia",
+  },
+  {
+    label: "No Rekening",
+    value: "2304235678854332",
+  },
+  {
+    label: "Jumlah",
+    value: "Rp. 1.000.000",
+  },
+  {
+    label: "Tanggal",
+    value: "2022-01-01",
+  },
+  {
+    label: "Lembar Terbeli",
+    value: "100",
+  },
+];

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

@@ -1,19 +1,19 @@
 import {
-    BaseBox,
+  BaseBox,
-    ButtonCenteredOnly,
+  ButtonCenteredOnly,
-    ButtonCustom,
+  ButtonCustom,
-    Grid,
+  Grid,
-    InformationBox,
+  InformationBox,
-    Spacing,
+  Spacing,
-    StackCustom,
+  StackCustom,
-    TextCustom,
+  TextCustom,
-    ViewWrapper
+  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { router, useLocalSearchParams } from "expo-router";
 
 export default function InvestmentInvoice() {
-    const { id } = useLocalSearchParams();
+  const { id } = useLocalSearchParams();
   return (
     <>
       <ViewWrapper>
@@ -84,19 +84,26 @@ export default function InvestmentInvoice() {
           <BaseBox>
             <StackCustom>
               <TextCustom>Upload bukti transfer anda.</TextCustom>
-              <ButtonCenteredOnly onPress={() => {
+              <ButtonCenteredOnly
-                router.push("/(application)/(image)/take-picture/123")
+                onPress={() => {
-              }} icon="upload">
+                  router.push("/(application)/(image)/take-picture/123");
+                }}
+                icon="upload"
+              >
                 Upload
               </ButtonCenteredOnly>
             </StackCustom>
           </BaseBox>
 
-          <ButtonCustom onPress={() => {
+          <ButtonCustom
-            router.push(`/investment/${id}/(transaction-flow)/process`)
+            onPress={() => {
-
+              router.push(`/investment/${id}/(transaction-flow)/process`);
-          }}>Saya Sudah Transfer</ButtonCustom>
+            }}
+          >
+            Saya Sudah Transfer
+          </ButtonCustom>
         </StackCustom>
+        <Spacing/>
       </ViewWrapper>
     </>
   );

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

@@ -1,11 +1,43 @@
-import { BaseBox, TextCustom, ViewWrapper } from "@/components";
+import {
+  BaseBox,
+  Grid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { Ionicons } from "@expo/vector-icons";
+import { ActivityIndicator } from "react-native";
 
 export default function InvestmentProcess() {
   return (
     <>
       <ViewWrapper>
         <BaseBox>
-          <TextCustom align="center">Menunggu Konfirmasi Admin</TextCustom>
+          <StackCustom>
+            <TextCustom align="center" bold>
+              Admin sedang memproses transaksimu
+            </TextCustom>
+            <ActivityIndicator size="large" color={MainColor.yellow} />
+          </StackCustom>
+        </BaseBox>
+
+        <BaseBox>
+          <Grid>
+            <Grid.Col span={10} style={{justifyContent: 'center'}}>
+              <TextCustom size="small">
+                Hubungi admin jika tidak kunjung di proses! Klik pada logo
+                Whatsapp ini.
+              </TextCustom>
+            </Grid.Col>
+            <Grid.Col span={2} style={{alignItems: "flex-end"}}>
+              <Ionicons
+                name="logo-whatsapp"
+                size={50}
+                color={MainColor.green}
+              />
+            </Grid.Col>
+          </Grid>
         </BaseBox>
       </ViewWrapper>
     </>

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

@@ -1,4 +1,9 @@
-import { BaseBox, BoxButtonOnFooter, ButtonCustom, ViewWrapper } from "@/components";
+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";
@@ -13,7 +18,7 @@ export default function InvestmentSelectBank() {
       <>
         <BoxButtonOnFooter>
           <ButtonCustom
-            onPress={() => router.push(`/investment/${id}/invoice`)}
+            onPress={() => router.replace(`/investment/${id}/invoice`)}
           >
             Pilih
           </ButtonCustom>

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

@@ -0,0 +1,84 @@
+import {
+  BaseBox,
+  Grid,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { GStyles } from "@/styles/global-styles";
+import { FontAwesome6 } from "@expo/vector-icons";
+
+export default function InvestmentSuccess() {
+  return (
+    <ViewWrapper>
+      <StackCustom>
+        <BaseBox>
+          <StackCustom>
+            <FontAwesome6
+              name="money-bill-wave"
+              size={100}
+              color={MainColor.green}
+              style={GStyles.alignSelfCenter}
+            />
+
+            <TextCustom bold align="center">
+              Terimakasih telah percaya pada kami untuk mengelola dana anda!
+              Info mengenai update Investasi ini bisa di lihat di kolom berita.
+            </TextCustom>
+          </StackCustom>
+        </BaseBox>
+
+        <BaseBox>
+          <TextCustom bold align="center" size="large">
+            Detail Transaksi
+          </TextCustom>
+
+          <Spacing/>
+
+
+          <StackCustom>
+            {listData.map((item, i) => (
+              <Grid key={i}>
+                <Grid.Col span={5}>
+                  <TextCustom bold>{item.label}</TextCustom>
+                </Grid.Col>
+                <Grid.Col span={7}>
+                  <TextCustom style={{paddingLeft: 10}}>{item.value}</TextCustom>
+                </Grid.Col>
+              </Grid>
+            ))}
+          </StackCustom>
+        </BaseBox>
+      </StackCustom>
+    </ViewWrapper>
+  );
+}
+
+const listData = [
+  {
+    label: "Bank",
+    value: " BCA",
+  },
+  {
+    label: "Rekening Penerima",
+    value: "Himpunan Pengusaha Muda Indonesia",
+  },
+  {
+    label: "No Rekening",
+    value: "2304235678854332",
+  },
+  {
+    label: "Jumlah",
+    value: "Rp. 1.000.000",
+  },
+  {
+    label: "Tanggal",
+    value: "2022-01-01",
+  },
+  {
+    label: "Lembar Terbeli",
+    value: "100",
+  },
+];

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

@@ -1,20 +0,0 @@
-import { BackButton, TextCustom, ViewWrapper } from "@/components";
-import { Stack, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-
-export default function InvestmentProspectus() {
-  const { file } = useLocalSearchParams();
-  return (
-    <>
-      <Stack.Screen
-        options={{
-          title: `Pratinjau ${_.startCase(file as string)}`,
-          headerLeft: () => <BackButton />,
-        }}
-      />
-      <ViewWrapper>
-        <TextCustom>Pratinjau File</TextCustom>
-      </ViewWrapper>
-    </>
-  );
-}

app/(application)/(user)/job/(tabs)/status.tsx

@@ -1,10 +1,10 @@
 import {
-  BaseBox,
+    BaseBox,
-  ScrollableCustom,
+    ScrollableCustom,
-  TextCustom,
+    TextCustom,
-  ViewWrapper,
+    ViewWrapper,
 } from "@/components";
-import { masterStatus } from "@/lib/dummy-data/_master/status";
+import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
 import { jobDataDummy } from "@/screens/Job/listDataDummy";
 import { useState } from "react";
 
@@ -20,7 +20,7 @@ export default function JobStatus() {
 
   const scrollComponent = (
     <ScrollableCustom
-      data={masterStatus.map((e, i) => ({
+      data={dummyMasterStatus.map((e, i) => ({
         id: i,
         label: e.label,
         value: e.value,

app/(application)/(user)/voting/(tabs)/status.tsx

@@ -6,7 +6,7 @@ import {
   TextCustom,
   ViewWrapper,
 } from "@/components";
-import { masterStatus } from "@/lib/dummy-data/_master/status";
+import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
 import dayjs from "dayjs";
 import { useState } from "react";
 
@@ -22,7 +22,7 @@ export default function VotingStatus() {
 
   const scrollComponent = (
     <ScrollableCustom
-      data={masterStatus.map((e, i) => ({
+      data={dummyMasterStatus.map((e, i) => ({
         id: i,
         label: e.label,
         value: e.value,

components/Badge/BadgeCustom.tsx

@@ -21,7 +21,7 @@ type BadgeSize = "xs" | "sm" | "md" | "lg";
 interface BadgeProps extends ViewProps {
   children: React.ReactNode;
   variant?: BadgeVariant;
-  color?: BadgeColor;
+  color?: BadgeColor | string;
   size?: BadgeSize;
   leftIcon?: React.ReactNode;
   rightIcon?: React.ReactNode;
@@ -43,7 +43,8 @@ const BadgeCustom: React.FC<BadgeProps> = ({
   style,
   ...props
 }) => {
-  const colors = {
+  // Daftar warna bawaan
+  const defaultColors = {
     primary: "#339AF0",
     success: "#40C057",
     warning: "#FAB005",
@@ -52,8 +53,7 @@ const BadgeCustom: React.FC<BadgeProps> = ({
     dark: "#212529",
   };
 
-  const themeColor = colors[color];
+  const themeColor = color in defaultColors ? defaultColors[color as BadgeColor] : color;
-
   // Ganti bagian sizeStyles dan styles.container
   const sizeStyles = {
     xs: {

components/_ShareComponent/DummyLandscapeImage.tsx

@@ -5,14 +5,14 @@ import { StyleSheet } from "react-native";
 import ClickableCustom from "../Clickable/ClickableCustom";
 import { router } from "expo-router";
 
-export default function DummyLandscapeImage() {
+export default function DummyLandscapeImage({height}: {height?: number}) {
   return (
     <ClickableCustom
       onPress={() => {
         router.push("/(application)/(image)/preview-image/1");
       }}
     >
-      <Image source={DUMMY_IMAGE.background} style={styles.backgroundImage} />
+      <Image source={DUMMY_IMAGE.background} style={[styles.backgroundImage, {height: height || 200}]} />
     </ClickableCustom>
   );
 }
@@ -20,7 +20,6 @@ export default function DummyLandscapeImage() {
 const styles = StyleSheet.create({
   backgroundImage: {
     width: "100%",
-    height: 200, // Tinggi background sesuai kebutuhan
     justifyContent: "center",
     alignItems: "center",
     borderRadius: 6,

lib/dummy-data/_master/status-transaction.ts

@@ -0,0 +1,8 @@
+import { AccentColor, MainColor } from "@/constants/color-palet";
+
+export const dummyMasterStatusTransaction = [
+  { value: "berhasil", label: "Berhasil", color: MainColor.green },
+  { value: "proses", label: "Proses", color: AccentColor.skyblue },
+  { value: "menunggu", label: "Menunggu", color: MainColor.yellow },
+  { value: "gagal", label: "Gagal", color: MainColor.red },
+];

lib/dummy-data/_master/status.tsx

@@ -1,4 +1,4 @@
-export const masterStatus = [
+export const dummyMasterStatus = [
   { value: "publish", label: "Publish" },
   { value: "review", label: "Review" },
   { value: "draft", label: "Draft" },

lib/dummy-data/donasi/durasi.tsx

@@ -0,0 +1,18 @@
+export const dummyDonasiDurasi = [
+    {
+        label: "1 Bulan",
+        value: "1_bulan",
+    },
+    {
+        label: "3 Bulan",
+        value: "3_bulan",
+    },
+    {
+        label: "6 Bulan",
+        value: "6_bulan",
+    },
+    {
+        label: "1 Tahun",
+        value: "1_tahun",
+    },
+];

lib/dummy-data/donasi/kategori.tsx

@@ -0,0 +1,22 @@
+export const dummyDonasiKategori = [
+  {
+    label: "Medis",
+    value: "medis",
+  },
+  {
+    label: "Pendidikan",
+    value: "pendidikan",
+  },
+  {
+    label: "Kesehatan",
+    value: "kesehatan",
+  },
+  {
+    label: "Bantuan Sosial",
+    value: "bantuan_sosial",
+  },
+  {
+    label: "Lainnya",
+    value: "lainnya",
+  },
+];

screens/Authentication/LoginView.tsx

@@ -38,7 +38,8 @@ export default function LoginView() {
     // 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)")
+    router.navigate("/crowdfunding")
   }
 
   return (

screens/Invesment/ComponentBoxOnBottomDetail.tsx

@@ -25,7 +25,7 @@ export default function Invesment_ComponentBoxOnBottomDetail({
               <BaseBox
                 backgroundColor={AccentColor.blue}
                 style={{ borderColor: AccentColor.softblue, borderWidth: 1 }}
-                href={`/investment/${id}/prospektus/file`}
+                href={`/(file)/${id}`}
               >
                 <StackCustom>
                   <TextCustom align="center">Prospektus</TextCustom>
@@ -94,7 +94,7 @@ export default function Invesment_ComponentBoxOnBottomDetail({
             <BaseBox
               backgroundColor={AccentColor.blue}
               style={{ borderColor: AccentColor.softblue, borderWidth: 1 }}
-              href={`/investment/${id}/prospektus/file`}
+              href={`/(file)/${id}`}
             >
               <StackCustom>
                 <TextCustom align="center">Prospektus</TextCustom>

screens/Invesment/DetailDataPublishSection.tsx

@@ -14,8 +14,8 @@ export default function Invesment_DetailDataPublishSection({
   buttonSection,
 }: {
   status: string;
-  bottomSection: React.ReactNode;
+  bottomSection?: React.ReactNode;
-  buttonSection: React.ReactNode;
+  buttonSection?: React.ReactNode;
 }) {
   return (
     <>