Donation

Add:
- donation/[id]/(transaction-flow)

### No Issue

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="/crowdfunding" />,
+          }}
+        />
+
         <Stack.Screen
           name="donation/create"
           options={{
@@ -315,6 +355,128 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
+        <Stack.Screen
+          name="donation/create-story"
+          options={{
+            title: "Tambah Donasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        <Stack.Screen
+          name="donation/[id]/edit"
+          options={{
+            title: "Edit Donasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/edit-story"
+          options={{
+            title: "Edit Donasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/edit-rekening"
+          options={{
+            title: "Edit Rekening",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/detail-story"
+          options={{
+            title: "Cerita Penggalang",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/infromation-fundrising"
+          options={{
+            title: "Informasi Penggalang Dana",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/list-of-donatur"
+          options={{
+            title: "Daftar Donatur",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/fund-disbursement"
+          options={{
+            title: "Pencairan Dana",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        <Stack.Screen
+          name="donation/[id]/(news)/recap-of-news"
+          options={{
+            title: "Rekap Kabar",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/(news)/add-news"
+          options={{
+            title: "Tambah Berita",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/(news)/[news]/edit-news"
+          options={{
+            title: "Edit Berita",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        <Stack.Screen
+          name="donation/[id]/(transaction-flow)/index"
+          options={{
+            title: "Donasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/(transaction-flow)/select-bank"
+          options={{
+            title: "Pilih Bank",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/(transaction-flow)/[transaction]/invoice"
+          options={{
+            title: "Invoice",
+            headerLeft: () => (
+              <Ionicons
+                name="close"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.yellow}
+                onPress={() => router.navigate(`/donation/(tabs)/my-donation`)}
+              />
+            ),
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/(transaction-flow)/[transaction]/process"
+          options={{
+            title: "Proses",
+            headerLeft: () => (
+              <Ionicons
+                name="close"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.yellow}
+                onPress={() => router.navigate(`/donation/(tabs)/my-donation`)}
+              />
+            ),
+          }}
+        />
 
         {/* ========== End Donation 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,21 @@
+import {
+  FloatingButton,
+  ViewWrapper
+} from "@/components";
+import Donation_BoxPublish from "@/screens/Donation/BoxPublish";
+import { router } from "expo-router";
+
+export default function DonationBeranda() {
+  return (
+    <ViewWrapper
+      hideFooter
+      floatingButton={
+        <FloatingButton onPress={() => router.push("/donation/create")} />
+      }
+    >
+      {Array.from({ length: 10 }).map((_, index) => (
+        <Donation_BoxPublish key={index} id={index.toString()}/>
+      ))}
+    </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,38 @@
+import { ScrollableCustom, ViewWrapper } from "@/components";
+import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
+import Donasi_BoxStatus from "@/screens/Donation/BoxStatus";
+import { useState } from "react";
+
+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) => (
+        <Donasi_BoxStatus
+          key={index}
+          id={index.toString()}
+          status={activeCategory as string}
+        />
+      ))}
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/donation/[id]/(news)/[news]/edit-news.tsx

@@ -0,0 +1,54 @@
+import {
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  Spacing,
+  StackCustom,
+  TextAreaCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { router } from "expo-router";
+
+export default function DonationEditNews() {
+  return (
+    <ViewWrapper>
+      <StackCustom gap={"xs"}>
+        <InformationBox text="Upload gambar bersifat opsional untuk melengkapi kabar terkait donasi Anda." />
+        <LandscapeFrameUploaded />
+        <ButtonCenteredOnly
+          onPress={() => {
+            router.push("/(application)/(image)/take-picture/123");
+          }}
+          icon="upload"
+        >
+          Upload
+        </ButtonCenteredOnly>
+        <Spacing />
+        <TextInputCustom
+          label="Judul Berita"
+          placeholder="Masukan judul berita"
+          required
+        />
+        <TextAreaCustom
+          label="Deskripsi Berita"
+          placeholder="Masukan deskripsi berita"
+          required
+          showCount
+          maxLength={1000}
+        />
+
+        <Spacing />
+        <ButtonCustom
+          onPress={() => {
+            router.back();
+          }}
+        >
+          Update
+        </ButtonCustom>
+      </StackCustom>
+      <Spacing />
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,95 @@
+import {
+  AlertDefaultSystem,
+  BackButton,
+  BaseBox,
+  DotButton,
+  DrawerCustom,
+  DummyLandscapeImage,
+  MenuDrawerDynamicGrid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconEdit } from "@/components/_Icon";
+import { IconTrash } from "@/components/_Icon/IconTrash";
+import dayjs from "dayjs";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function DonationNews() {
+  const { id, news } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Detail Kabar",
+          headerLeft: () => <BackButton />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+        }}
+      />
+      <ViewWrapper>
+        <BaseBox>
+          <StackCustom>
+            <TextCustom style={{ alignSelf: "flex-end" }}>
+              {dayjs().format("DD MMM YYYY")}
+            </TextCustom>
+
+            <DummyLandscapeImage />
+
+            <TextCustom bold size="large" align="center">
+              Judul Berita
+            </TextCustom>
+
+            <TextCustom>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
+              est id temporibus perferendis eos reiciendis reprehenderit tempora
+              ut quibusdam dolores facilis rerum exercitationem recusandae quis
+              neque, adipisci dolorum, aspernatur labore?
+            </TextCustom>
+          </StackCustom>
+        </BaseBox>
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconEdit />,
+              label: "Edit Berita",
+              path: `/donation/${id}/(news)/${news}/edit-news` as any,
+            },
+            {
+              icon: <IconTrash />,
+              label: "Hapus Berita",
+              path: `` as any,
+              color: "red",
+            },
+          ]}
+          onPressItem={(item) => {
+            if ((item.path as any) === "") {
+              setOpenDrawer(false);
+              AlertDefaultSystem({
+                title: "Hapus Berita",
+                message: "Apakah Anda yakin ingin menghapus berita ini?",
+                textLeft: "Batal",
+                textRight: "Hapus",
+                onPressRight: () => {
+                  router.back();
+                },
+              });
+            } else {
+              router.navigate(item.path as any);
+              setOpenDrawer(false);
+            }
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

app/(application)/(user)/donation/[id]/(news)/add-news.tsx

@@ -0,0 +1,54 @@
+import {
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  Spacing,
+  StackCustom,
+  TextAreaCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { router } from "expo-router";
+
+export default function DonationAddNews() {
+  return (
+    <ViewWrapper>
+      <StackCustom gap={"xs"}>
+        <InformationBox text="Upload gambar bersifat opsional untuk melengkapi kabar terkait donasi Anda." />
+        <LandscapeFrameUploaded />
+        <ButtonCenteredOnly
+          onPress={() => {
+            router.push("/(application)/(image)/take-picture/123");
+          }}
+          icon="upload"
+        >
+          Upload
+        </ButtonCenteredOnly>
+        <Spacing />
+        <TextInputCustom
+          label="Judul Berita"
+          placeholder="Masukan judul berita"
+          required
+        />
+        <TextAreaCustom
+          label="Deskripsi Berita"
+          placeholder="Masukan deskripsi berita"
+          required
+          showCount
+          maxLength={1000}
+        />
+        
+        <Spacing />
+        <ButtonCustom
+          onPress={() => {
+            router.back();
+          }}
+        >
+          Simpan
+        </ButtonCustom>
+      </StackCustom>
+      <Spacing />
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,67 @@
+import {
+    BackButton,
+    BaseBox,
+    DrawerCustom,
+    Grid,
+    MenuDrawerDynamicGrid,
+    TextCustom,
+    ViewWrapper
+} from "@/components";
+import { IconPlus } from "@/components/_Icon";
+import dayjs from "dayjs";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function DonationRecapOfNews() {
+  const { id } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Daftar Kabar",
+          headerLeft: () => <BackButton />, }}
+      />
+      <ViewWrapper>
+        {Array.from({ length: 15 }).map((_, index) => (
+          <BaseBox key={index} href={`/donation/${id}/(news)/${index}`}>
+            <Grid>
+              <Grid.Col span={8}>
+                <TextCustom truncate bold>
+                  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+                </TextCustom>
+              </Grid.Col>
+              <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+                <TextCustom size="small">
+                  {dayjs().format("DD MMM YYYY")}
+                </TextCustom>
+              </Grid.Col>
+            </Grid>
+          </BaseBox>
+        ))}
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconPlus />,
+              label: "Tambah Berita",
+              path: `/donation/${id}/(news)/add-news`,
+            },
+          ]}
+          onPressItem={(item) => {
+            console.log("PATH ", item.path);
+            router.navigate(item.path as any);
+            setOpenDrawer(false);
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

app/(application)/(user)/donation/[id]/(news)/recap-of-news.tsx

@@ -0,0 +1,68 @@
+import {
+  BackButton,
+  BaseBox,
+  DotButton,
+  DrawerCustom,
+  Grid,
+  MenuDrawerDynamicGrid,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconPlus } from "@/components/_Icon";
+import dayjs from "dayjs";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function DonationRecapOfNews() {
+  const { id } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Rekap Kabar",
+          headerLeft: () => <BackButton />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+        }}
+      />
+      <ViewWrapper>
+        {Array.from({ length: 15 }).map((_, index) => (
+          <BaseBox key={index} href={`/donation/${id}/(news)/${index}`}>
+            <Grid>
+              <Grid.Col span={8}>
+                <TextCustom truncate bold>
+                  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+                </TextCustom>
+              </Grid.Col>
+              <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+                <TextCustom size="small">{dayjs().format("DD MMM YYYY")}</TextCustom>
+              </Grid.Col>
+            </Grid>
+          </BaseBox>
+        ))}
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconPlus />,
+              label: "Tambah Berita",
+              path: `/donation/${id}/(news)/add-news`,
+            },
+          ]}
+          onPressItem={(item) => {
+            console.log("PATH ", item.path);
+            router.navigate(item.path as any);
+            setOpenDrawer(false);
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

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

@@ -0,0 +1,110 @@
+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 DonationInvoice() {
+  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(`/donation/${id}/(transaction-flow)/process`);
+            }}
+          >
+            Saya Sudah Transfer
+          </ButtonCustom>
+        </StackCustom>
+        <Spacing />
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -0,0 +1,45 @@
+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 DonationProcess() {
+  return (
+    <>
+      <ViewWrapper>
+        <BaseBox>
+          <StackCustom>
+            <TextCustom align="center" bold>
+              Admin sedang memproses transaksi donasimu
+            </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)/donation/[id]/(transaction-flow)/index.tsx

@@ -0,0 +1,81 @@
+import {
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCustom,
+  Grid,
+  TextCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { Ionicons } from "@expo/vector-icons";
+import { router, useLocalSearchParams } from "expo-router";
+
+export default function InvestmentInputDonation() {
+  const { id } = useLocalSearchParams();
+  const bottomComponent = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => router.replace(`/donation/${id}/select-bank`)}
+      >
+        Lanjutan
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper footerComponent={bottomComponent}>
+        {listData.map((item, i) => (
+          <BaseBox key={i}>
+            <Grid>
+              <Grid.Col span={8}>
+                <TextCustom bold size="large">
+                  Rp. {item.label}
+                </TextCustom>
+              </Grid.Col>
+              <Grid.Col span={4}>
+                <Ionicons
+                  name="chevron-forward"
+                  size={ICON_SIZE_SMALL}
+                  color={MainColor.yellow}
+                  style={{ alignSelf: "flex-end" }}
+                />
+              </Grid.Col>
+            </Grid>
+          </BaseBox>
+        ))}
+
+        <BaseBox>
+          <TextInputCustom
+            label="Nominal lainnya"
+            placeholder="0"
+            iconLeft="Rp."
+          />
+          <TextCustom size="small" color="gray">
+            Minimal donasi Rp. 10.000
+          </TextCustom>
+        </BaseBox>
+      </ViewWrapper>
+    </>
+  );
+}
+
+const listData = [
+  {
+    label: "25.000",
+    value: 25000,
+  },
+  {
+    label: "50.000",
+    value: 50000,
+  },
+  {
+    label: "100.000",
+    value: 100000,
+  },
+  {
+    label: "250.000",
+    value: 250000,
+  },
+];

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

@@ -0,0 +1,44 @@
+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 DonationSelectBank() {
+  const { id, transaction } = useLocalSearchParams();
+  const [value, setValue] = useState<any | number>("");
+
+  const buttonSubmit = () => {
+    return (
+      <>
+        <BoxButtonOnFooter>
+          <ButtonCustom
+            onPress={() =>
+              router.replace(
+                `/(application)/(user)/donation/${id}/(transaction-flow)/${transaction}/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>
+  );
+}

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

@@ -0,0 +1,115 @@
+import {
+  BackButton,
+  DotButton,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  Spacing,
+  ViewWrapper,
+} from "@/components";
+import { IconEdit, IconNews } from "@/components/_Icon";
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import Donation_ButtonStatusSection from "@/screens/Donation/ButtonStatusSection";
+import Donation_ComponentBoxDetailData from "@/screens/Donation/ComponentBoxDetailData";
+import Donation_ComponentStoryFunrising from "@/screens/Donation/ComponentStoryFunrising";
+import Donation_ProgressSection from "@/screens/Donation/ProgressSection";
+import { FontAwesome6 } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useState } from "react";
+
+export default function DonasiDetailStatus() {
+  const { id, status } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
+
+  const handlePress = (item: IMenuDrawerItem) => {
+    console.log("PATH ", item.path);
+    router.navigate(item.path as any);
+    setOpenDrawer(false);
+  };
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: `Detail ${_.startCase(status as string)}`,
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            status === "draft" ? (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ) : status === "publish" ? (
+              <DotButton onPress={() => setOpenDrawerPublish(true)} />
+            ) : null,
+        }}
+      />
+      <ViewWrapper>
+        <Donation_ComponentBoxDetailData
+          bottomSection={
+            status === "publish" && <Donation_ProgressSection id={id as string} />
+          }
+        />
+        <Donation_ComponentStoryFunrising id={id as string} />
+        <Spacing />
+        <Donation_ButtonStatusSection status={status as string} />
+        <Spacing />
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconEdit />,
+              label: "Edit Donasi",
+              path: `/donation/${id}/edit`,
+            },
+            {
+              icon: <IconEdit />,
+              label: "Edit Cerita",
+              path: `/donation/${id}/edit-story`,
+            },
+            {
+              icon: (
+                <FontAwesome6
+                  name="credit-card"
+                  color={MainColor.white}
+                  size={ICON_SIZE_SMALL}
+                />
+              ),
+              label: "Edit Rekening",
+              path: `/donation/${id}/edit-rekening`,
+            },
+          ]}
+          columns={4}
+          onPressItem={handlePress as any}
+        />
+      </DrawerCustom>
+
+      <DrawerCustom
+        isVisible={openDrawerPublish}
+        closeDrawer={() => setOpenDrawerPublish(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconNews />,
+              label: "Rekap Kabar",
+              path: `/donation/${id}/(news)/recap-of-news`,
+            },
+          ]}
+          onPressItem={(item) => {
+            console.log("PATH ", item.path);
+            router.navigate(item.path as any);
+            setOpenDrawerPublish(false);
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

app/(application)/(user)/donation/[id]/detail-story.tsx

@@ -0,0 +1,28 @@
+import {
+  DummyLandscapeImage,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { useLocalSearchParams } from "expo-router";
+
+export default function DonationDetailStory() {
+  const { id } = useLocalSearchParams();
+  return (
+    <ViewWrapper>
+      <StackCustom>
+        <TextCustom>
+          Lorem {id} ipsum dolor, sit amet consectetur adipisicing elit. Fuga
+          quasi nam nesciunt nisi corporis alias modi, pariatur sit totam rem
+          fugiat ex similique magni, aliquam maiores officiis iure at adipisci.
+        </TextCustom>
+        <DummyLandscapeImage />
+        <TextCustom>
+          Lorem {id} ipsum dolor, sit amet consectetur adipisicing elit. Fuga
+          quasi nam nesciunt nisi corporis alias modi, pariatur sit totam rem
+          fugiat ex similique magni, aliquam maiores officiis iure at adipisci.
+        </TextCustom>
+      </StackCustom>
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/donation/[id]/edit-rekening.tsx

@@ -0,0 +1,32 @@
+import { ViewWrapper, StackCustom, InformationBox, TextInputCustom, Spacing, ButtonCustom } from "@/components";
+import { router } from "expo-router";
+
+export default function DonationEditRekening() {
+  return (
+    <ViewWrapper>
+      <StackCustom gap={"xs"}>
+        <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.back();
+          }}
+        >
+          Update
+        </ButtonCustom>
+      </StackCustom>
+      <Spacing />
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/donation/[id]/edit-story.tsx

@@ -0,0 +1,56 @@
+import {
+    ButtonCenteredOnly,
+    ButtonCustom,
+    InformationBox,
+    LandscapeFrameUploaded,
+    Spacing,
+    StackCustom,
+    TextAreaCustom,
+    ViewWrapper
+} from "@/components";
+import { router } from "expo-router";
+
+export default function DonationEditStory() {
+  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}
+        />
+
+        <LandscapeFrameUploaded />
+        <ButtonCenteredOnly
+          onPress={() => {
+            router.push("/(application)/(image)/take-picture/123");
+          }}
+          icon="upload"
+        >
+          Upload
+        </ButtonCenteredOnly>
+        <Spacing />
+        <TextAreaCustom
+          label="Tujuan Donasi"
+          placeholder="Masukkan tujuan donasi"
+          required
+          showCount
+          maxLength={1000}
+        />
+
+        <Spacing height={40} />
+        <ButtonCustom
+          onPress={() => {
+            router.back();
+          }}
+        >
+          Update
+        </ButtonCustom>
+      </StackCustom>
+      <Spacing />
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,79 @@
+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 DonationEdit() {
+  return (
+    <ViewWrapper>
+      <StackCustom gap={"xs"}>
+        <InformationBox text="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita penggalangan dana." />
+
+        <TextInputCustom
+          label="Judul Donasi"
+          placeholder="Masukkan Judul Donasi"
+          required
+        />
+        <TextInputCustom
+          label="Target Donasi"
+          placeholder="Masukkan Target Donasi"
+          required
+          keyboardType="numeric"
+        />
+
+        <LandscapeFrameUploaded />
+        <ButtonCenteredOnly
+          onPress={() => {
+            router.push("/(application)/(image)/take-picture/123");
+          }}
+          icon="upload"
+        >
+          Upload
+        </ButtonCenteredOnly>
+        <Spacing />
+
+        <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
+        />
+
+        <Spacing />
+        <ButtonCustom
+          onPress={() => {
+            router.back();
+          }}
+        >
+          Update
+        </ButtonCustom>
+      </StackCustom>
+      <Spacing />
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/donation/[id]/fund-disbursement.tsx

@@ -0,0 +1,67 @@
+import {
+  BaseBox,
+  ButtonCenteredOnly,
+  Grid,
+  InformationBox,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import dayjs from "dayjs";
+import { router, useLocalSearchParams } from "expo-router";
+
+export default function DonationFundDisbursement() {
+  const { id } = useLocalSearchParams();
+  return (
+    <>
+      <ViewWrapper>
+        <InformationBox text="Pencairan dana akan dilakukan oleh Admin HIPMI tanpa campur tangan pihak manapun, jika berita pencairan dana dibawah tidak sesuai dengan kabar yang diberikan oleh PENGGALANG DANA. Maka pegguna lain dapat melaporkannya pada Admin HIPMI !" />
+        <BaseBox>
+          <Grid>
+            <Grid.Col span={6}>
+              <TextCustom bold color="yellow">
+                Rp. 0
+              </TextCustom>
+              <TextCustom size="small">Total Pencairan Dana</TextCustom>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <TextCustom bold color="yellow">
+                0 kali
+              </TextCustom>
+              <TextCustom size="small">Akumulasi Pencairan</TextCustom>
+            </Grid.Col>
+          </Grid>
+        </BaseBox>
+
+        {Array.from({ length: 10 }).map((_, index) => (
+          <BaseBox key={index}>
+            <StackCustom>
+              <Grid>
+                <Grid.Col span={8}>
+                  <TextCustom bold>Pencairan ke - {index + 1}</TextCustom>
+                </Grid.Col>
+                <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+                  <TextCustom>{dayjs().format("DD MMM YYYY")}</TextCustom>
+                </Grid.Col>
+              </Grid>
+              <TextCustom>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                Nesciunt dolor ad sit? Eaque rem nihil natus, id, esse possimus
+                perferendis provident velit illo consectetur distinctio ab
+                accusantium quis earum omnis!
+              </TextCustom>
+              <ButtonCenteredOnly
+                onPress={() => {
+                  router.navigate(`/(application)/(file)/${id}`);
+                }}
+                icon="file-text"
+              >
+                Bukti Transaksi
+              </ButtonCenteredOnly>
+            </StackCustom>
+          </BaseBox>
+        ))}
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -0,0 +1,78 @@
+import {
+  BackButton,
+  BoxButtonOnFooter,
+  ButtonCustom,
+  DotButton,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  StackCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconNews } from "@/components/_Icon";
+import Donation_ComponentBoxDetailData from "@/screens/Donation/ComponentBoxDetailData";
+import Donation_ComponentInfoFundrising from "@/screens/Donation/ComponentInfoFundrising";
+import Donation_ComponentStoryFunrising from "@/screens/Donation/ComponentStoryFunrising";
+import Donation_ProgressSection from "@/screens/Donation/ProgressSection";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function DonasiDetailBeranda() {
+  const { id } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  const buttonSection = (
+    <>
+      <BoxButtonOnFooter>
+        <ButtonCustom
+          onPress={() =>
+            router.navigate(`/donation/${id}/(transaction-flow)`)
+          }
+        >
+          Donasi
+        </ButtonCustom>
+      </BoxButtonOnFooter>
+    </>
+  );
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: `Detail Donasi`,
+          headerLeft: () => <BackButton />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+        }}
+      />
+      <ViewWrapper footerComponent={buttonSection}>
+        <StackCustom>
+          <Donation_ComponentBoxDetailData
+            bottomSection={<Donation_ProgressSection id={id as string} />}
+          />
+          <Donation_ComponentInfoFundrising id={id as string} />
+          <Donation_ComponentStoryFunrising id={id as string} />
+        </StackCustom>
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconNews />,
+              label: "Rekap Kabar",
+              path: `/donation/${id}/(news)/recap-of-news`,
+            },
+          ]}
+          onPressItem={(item) => {
+            console.log("PATH ", item.path);
+            router.navigate(item.path as any);
+            setOpenDrawer(false);
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

app/(application)/(user)/donation/[id]/infromation-fundrising.tsx

@@ -0,0 +1,44 @@
+import {
+  AvatarCustom,
+  BaseBox,
+  ButtonCustom,
+  CenterCustom,
+  Grid,
+  Spacing,
+  TextCustom,
+  ViewWrapper
+} from "@/components";
+import Donation_BoxPublish from "@/screens/Donation/BoxPublish";
+import React from "react";
+
+export default function DonationInformationFunrising() {
+  return (
+    <>
+      <ViewWrapper>
+        <BaseBox>
+          <Grid>
+            <Grid.Col span={6} style={{ justifyContent: "center" }}>
+              <CenterCustom>
+                <AvatarCustom size="lg" />
+                <TextCustom bold size="large" truncate>
+                  @Username
+                </TextCustom>
+              </CenterCustom>
+            </Grid.Col>
+            <Grid.Col span={6} style={{ justifyContent: "center" }}>
+              <ButtonCustom href={`/profile/1234`}>
+                Kunjungi Profile
+              </ButtonCustom>
+            </Grid.Col>
+          </Grid>
+        </BaseBox>
+
+        <Spacing />
+
+        {Array.from({ length: 10 }).map((_, index) => (
+          <Donation_BoxPublish key={index} id={index.toString()} />
+        ))}
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/(user)/donation/[id]/list-of-donatur.tsx

@@ -0,0 +1,47 @@
+import {
+  BaseBox,
+  Grid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { FontAwesome6 } from "@expo/vector-icons";
+import dayjs from "dayjs";
+
+export default function Donation_ListOfDonatur() {
+  return (
+    <>
+      <ViewWrapper>
+        {Array.from({ length: 10 }).map((_, index) => (
+          <BaseBox key={index}>
+            <Grid>
+              <Grid.Col
+                span={3}
+                style={{ alignItems: "center", justifyContent: "center" }}
+              >
+                <FontAwesome6
+                  name="face-smile-wink"
+                  size={50}
+                  style={{ color: MainColor.yellow }}
+                />
+              </Grid.Col>
+              <Grid.Col span={9}>
+                <StackCustom gap={"xs"}>
+                  <TextCustom bold size="large">
+                    Username
+                  </TextCustom>
+                  <TextCustom>Berdonas sebesar </TextCustom>
+                  <TextCustom bold size="large" color="yellow">
+                    Rp. 100.000
+                  </TextCustom>
+                  <TextCustom>{dayjs().format("DD MMM YYYY")}</TextCustom>
+                </StackCustom>
+              </Grid.Col>
+            </Grid>
+          </BaseBox>
+        ))}
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -0,0 +1,69 @@
+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={() => {
+            router.push("/(application)/(image)/take-picture/123");
+          }}
+          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,79 @@
-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">
-        Coming Soon !
-      </TextCustom>
+      <StackCustom gap={"xs"}>
+        <InformationBox text="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita penggalangan dana." />
+
+        <TextInputCustom
+          label="Judul Donasi"
+          placeholder="Masukkan Judul Donasi"
+          required
+        />
+        <TextInputCustom
+          label="Target Donasi"
+          placeholder="Masukkan Target Donasi"
+          required
+          keyboardType="numeric"
+        />
+
+        <LandscapeFrameUploaded />
+        <ButtonCenteredOnly
+          onPress={() => {
+            router.push("/(application)/(image)/take-picture/123");
+          }}
+          icon="upload"
+        >
+          Upload
+        </ButtonCenteredOnly>
+        <Spacing />
+
+        <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
+        />
+        <Spacing />
+        <ButtonCustom
+          onPress={() => {
+            router.push("/donation/create-story");
+          }}
+        >
+          Selanjutnya
+        </ButtonCustom>
+        <Spacing />
+      </StackCustom>
+      <Spacing />
     </ViewWrapper>
   );
 }

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

@@ -1,12 +1,12 @@
 import {
-  BoxWithHeaderSection,
-  Grid,
-  ScrollableCustom,
-  StackCustom,
-  TextCustom
+    BoxWithHeaderSection,
+    Grid,
+    ScrollableCustom,
+    StackCustom,
+    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) => (
-        <BaseBox key={i} paddingTop={7} paddingBottom={7}>
+      {randomStatusData.map((item, i) => (
+        <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,
-    ButtonCenteredOnly,
-    ButtonCustom,
-    Grid,
-    InformationBox,
-    Spacing,
-    StackCustom,
-    TextCustom,
-    ViewWrapper
+  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();
+  const { id } = useLocalSearchParams();
   return (
     <>
       <ViewWrapper>
@@ -84,19 +84,26 @@ export default function InvestmentInvoice() {
           <BaseBox>
             <StackCustom>
               <TextCustom>Upload bukti transfer anda.</TextCustom>
-              <ButtonCenteredOnly onPress={() => {
-                router.push("/(application)/(image)/take-picture/123")
-              }} icon="upload">
+              <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>
+          <ButtonCustom
+            onPress={() => {
+              router.push(`/investment/${id}/(transaction-flow)/process`);
+            }}
+          >
+            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 transaksi investasimu
+            </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,
-  ScrollableCustom,
-  TextCustom,
-  ViewWrapper,
+    BaseBox,
+    ScrollableCustom,
+    TextCustom,
+    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/Button/ButtonCenteredOnly.tsx

@@ -7,7 +7,7 @@ import ButtonCustom from "./ButtonCustom";
 
 interface ButtonCenteredOnlyProps {
   children?: React.ReactNode;
-  icon?: "plus" | "upload";
+  icon?: "plus" | "upload" | string;
   onPress: () => void;
 }
 export default function ButtonCenteredOnly({
@@ -19,7 +19,7 @@ export default function ButtonCenteredOnly({
     <ButtonCustom
       onPress={onPress}
       iconLeft={
-        <Feather name={icon} size={ICON_SIZE_BUTTON} color={MainColor.black} />
+        <Feather name={icon as any} size={ICON_SIZE_BUTTON} color={MainColor.black} />
       }
       style={[GStyles.buttonCentered50Percent]}
     >

components/_ShareComponent/DummyLandscapeImage.tsx

@@ -5,14 +5,16 @@ import { StyleSheet } from "react-native";
 import ClickableCustom from "../Clickable/ClickableCustom";
 import { router } from "expo-router";
 
-export default function DummyLandscapeImage() {
+export default function DummyLandscapeImage({height, unClickPath}: {height?: number, unClickPath?: boolean}) {
   return (
     <ClickableCustom
       onPress={() => {
-        router.push("/(application)/(image)/preview-image/1");
+        if (!unClickPath) {
+          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 +22,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/Donation/BoxPublish.tsx

@@ -0,0 +1,41 @@
+import {
+  BaseBox,
+  Grid,
+  DummyLandscapeImage,
+  StackCustom,
+  TextCustom,
+  ProgressCustom,
+} from "@/components";
+import { View } from "react-native";
+
+export default function Donation_BoxPublish({ id }: { id: string }) {
+  return (
+    <>
+      <BaseBox paddingTop={7} paddingBottom={7} href={`/donation/${id}`}>
+        <Grid>
+          <Grid.Col span={5}>
+            <DummyLandscapeImage unClickPath 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={(Number(id) % 5) * 20} size="lg" />
+              {/* <TextCustom>
+                 Terkumpul : Rp 300.000
+                </TextCustom> */}
+            </StackCustom>
+          </Grid.Col>
+        </Grid>
+      </BaseBox>
+    </>
+  );
+}

screens/Donation/BoxStatus.tsx

@@ -0,0 +1,50 @@
+import {
+  BaseBox,
+  Grid,
+  DummyLandscapeImage,
+  StackCustom,
+  TextCustom,
+} from "@/components";
+import { View } from "react-native";
+
+export default function Donasi_BoxStatus({
+  id,
+  status,
+}: {
+  id: string;
+  status: string;
+}) {
+  return (
+    <>
+      <BaseBox
+        paddingTop={7}
+        paddingBottom={7}
+        href={`/donation/${id}/${status}/detail`}
+      >
+        <Grid>
+          <Grid.Col span={5}>
+            <DummyLandscapeImage unClickPath height={100} />
+          </Grid.Col>
+          <Grid.Col span={1}>
+            <View />
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <StackCustom>
+              <TextCustom truncate>
+                Judul Donasi: {status} Lorem ipsum dolor sit amet consectetur
+                adipisicing elit.
+              </TextCustom>
+
+              <View>
+                <TextCustom>Target Dana</TextCustom>
+                <TextCustom bold color="yellow">
+                  Rp. 7.500.000
+                </TextCustom>
+              </View>
+            </StackCustom>
+          </Grid.Col>
+        </Grid>
+      </BaseBox>
+    </>
+  );
+}

screens/Donation/ButtonStatusSection.tsx

@@ -0,0 +1,121 @@
+import { AlertDefaultSystem, ButtonCustom, Grid } from "@/components";
+import { router } from "expo-router";
+
+export default function Donation_ButtonStatusSection({
+  status,
+}: {
+  status: string;
+}) {
+  const handleBatalkanReview = () => {
+    AlertDefaultSystem({
+      title: "Batalkan Review",
+      message: "Apakah Anda yakin ingin batalkan review ini?",
+      textLeft: "Batal",
+      textRight: "Ya",
+      onPressRight: () => {
+        console.log("Hapus");
+        router.back();
+      },
+    });
+  };
+
+  const handleAjukanReview = () => {
+    AlertDefaultSystem({
+      title: "Ajukan Review",
+      message: "Apakah Anda yakin ingin ajukan review ini?",
+      textLeft: "Batal",
+      textRight: "Ya",
+      onPressRight: () => {
+        console.log("Hapus");
+        router.back();
+      },
+    });
+  };
+
+  const handleEditKembali = () => {
+    AlertDefaultSystem({
+      title: "Edit Kembali",
+      message: "Apakah Anda yakin ingin edit kembali ini?",
+      textLeft: "Batal",
+      textRight: "Ya",
+      onPressRight: () => {
+        console.log("Hapus");
+        router.back();
+      },
+    });
+  };
+
+  const handleOpenDeleteAlert = () => {
+    AlertDefaultSystem({
+      title: "Hapus",
+      message: "Apakah Anda yakin ingin menghapus data ini?",
+      textLeft: "Batal",
+      textRight: "Hapus",
+      onPressRight: () => {
+        console.log("Hapus");
+        router.back();
+      },
+    });
+  };
+
+  const DeleteButton = () => {
+    return (
+      <>
+        <ButtonCustom
+          backgroundColor="red"
+          textColor="white"
+          onPress={handleOpenDeleteAlert}
+        >
+          Hapus
+        </ButtonCustom>
+      </>
+    );
+  };
+
+  switch (status) {
+    case "publish":
+      return <></>;
+
+    case "review":
+      return (
+        <ButtonCustom onPress={handleBatalkanReview}>
+          Batalkan Review
+        </ButtonCustom>
+      );
+
+    case "draft":
+      return (
+        <>
+          <Grid>
+            <Grid.Col span={6} style={{ paddingRight: 10 }}>
+              <ButtonCustom onPress={handleAjukanReview}>
+                Ajukan Review
+              </ButtonCustom>
+            </Grid.Col>
+            <Grid.Col span={6} style={{ paddingLeft: 10 }}>
+              {DeleteButton()}
+            </Grid.Col>
+          </Grid>
+        </>
+      );
+
+    case "reject":
+      return (
+        <>
+          <Grid>
+            <Grid.Col span={6} style={{ paddingRight: 10 }}>
+              <ButtonCustom onPress={handleEditKembali}>
+                Edit Kembali
+              </ButtonCustom>
+            </Grid.Col>
+            <Grid.Col span={6} style={{ paddingLeft: 10 }}>
+              {DeleteButton()}
+            </Grid.Col>
+          </Grid>
+        </>
+      );
+
+    default:
+      return <ButtonCustom disabled>Status Undifined</ButtonCustom>;
+  }
+}

screens/Donation/ComponentBoxDetailData.tsx

@@ -0,0 +1,52 @@
+import {
+  BaseBox,
+  StackCustom,
+  DummyLandscapeImage,
+  TextCustom,
+  Grid,
+} from "@/components";
+import React from "react";
+import { View } from "react-native";
+
+export default function Donation_ComponentBoxDetailData({
+  bottomSection,
+}: {
+  bottomSection?: React.ReactNode;
+}) {
+  return (
+    <>
+      <BaseBox>
+        <StackCustom>
+          <DummyLandscapeImage />
+          <View>
+            <TextCustom bold size="large">
+              Judul Donasi: Lorem, ipsum dolor sit amet consectetur adipisicing
+              elit.
+            </TextCustom>
+            <TextCustom size="small">Durasi: 30 hari</TextCustom>
+          </View>
+
+          <Grid>
+            <Grid.Col span={6}>
+              <View>
+                <TextCustom size="small">Target Dana</TextCustom>
+                <TextCustom truncate={2} size="large" bold color="yellow">
+                  Rp. 7.500.000
+                </TextCustom>
+              </View>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <View>
+                <TextCustom size="small">Kategori</TextCustom>
+                <TextCustom size="large" bold color="yellow">
+                  Kegiatan Sosial
+                </TextCustom>
+              </View>
+            </Grid.Col>
+          </Grid>
+          {bottomSection}
+        </StackCustom>
+      </BaseBox>
+    </>
+  );
+}

screens/Donation/ComponentInfoFundrising.tsx

@@ -0,0 +1,48 @@
+import {
+  AvatarUsernameAndOtherComponent,
+  BaseBox,
+  Grid,
+  InformationBox,
+  StackCustom,
+  TextCustom,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { Ionicons } from "@expo/vector-icons";
+
+export default function Donation_ComponentInfoFundrising({
+  id,
+}: {
+  id: string;
+}) {
+  return (
+    <>
+      <BaseBox href={`/donation/${id}/infromation-fundrising`} style={{paddingBottom: 0}}>
+        <StackCustom gap={"xs"}>
+          <Grid>
+            <Grid.Col span={10}>
+              <TextCustom bold size="large">
+                Informasi Penggalang Dana
+              </TextCustom>
+            </Grid.Col>
+            <Grid.Col span={2}>
+              <Ionicons
+                name="chevron-forward-circle-outline"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.yellow}
+                style={{
+                  alignSelf: "flex-end",
+                }}
+              />
+            </Grid.Col>
+          </Grid>
+
+          <AvatarUsernameAndOtherComponent />
+          <InformationBox
+            text="Semua dana yang terkumpul akan disalurkan ke penggalang dana, kabar penyaluran dapat dilihat di halaman kabar terbaru."
+          />
+        </StackCustom>
+      </BaseBox>
+    </>
+  );
+}

screens/Donation/ComponentStoryFunrising.tsx

@@ -0,0 +1,42 @@
+import { BaseBox, StackCustom, Grid, TextCustom } from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { Ionicons } from "@expo/vector-icons";
+
+export default function Donation_ComponentStoryFunrising({
+  id,
+}: {
+  id: string;
+}) {
+  return (
+    <>
+      <BaseBox href={`/donation/${id}/detail-story`}>
+        <StackCustom gap={"xs"}>
+          <Grid>
+            <Grid.Col span={10}>
+              <TextCustom bold size="large">
+                Cerita Penggalang Dana
+              </TextCustom>
+            </Grid.Col>
+            <Grid.Col span={2}>
+              <Ionicons
+                name="chevron-forward-circle-outline"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.yellow}
+                style={{
+                  alignSelf: "flex-end",
+                }}
+              />
+            </Grid.Col>
+          </Grid>
+          <TextCustom truncate={3}>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam,
+            iusto porro quae optio accusantium amet minima deleniti temporibus
+            cum voluptatem vel veniam doloribus blanditiis sapiente deserunt
+            distinctio eaque aliquid laboriosam?
+          </TextCustom>
+        </StackCustom>
+      </BaseBox>
+    </>
+  );
+}

screens/Donation/ProgressSection.tsx

@@ -0,0 +1,70 @@
+import {
+  ClickableCustom,
+  Grid,
+  ProgressCustom,
+  Spacing,
+  TextCustom,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
+import { Ionicons, MaterialIcons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { View } from "react-native";
+
+export default function Donation_ProgressSection({ id }: { id: string }) {
+  return (
+    <>
+      <View>
+        <ProgressCustom size="lg" />
+        <Spacing />
+        <Grid>
+          <Grid.Col span={4}>
+            <ClickableCustom
+              onPress={() => router.push(`/donation/${id}/list-of-donatur`)}
+            >
+              <View style={{ alignItems: "center" }}>
+                <Ionicons
+                  name="flower-sharp"
+                  size={ICON_SIZE_MEDIUM}
+                  color={MainColor.yellow}
+                />
+                <Spacing height={10} />
+                <TextCustom size="small">Donatur</TextCustom>
+              </View>
+            </ClickableCustom>
+          </Grid.Col>
+          <Grid.Col span={4}>
+            <ClickableCustom
+              onPress={() => router.push(`/donation/${id}/(news)/list-of-news`)}
+            >
+              <View style={{ alignItems: "center" }}>
+                <Ionicons
+                  name="chatbox"
+                  size={ICON_SIZE_MEDIUM}
+                  color={MainColor.yellow}
+                />
+                <Spacing height={10} />
+                <TextCustom size="small">Kabar Terbaru</TextCustom>
+              </View>
+            </ClickableCustom>
+          </Grid.Col>
+          <Grid.Col span={4}>
+            <ClickableCustom
+              onPress={() => router.push(`/donation/${id}/fund-disbursement`)}
+            >
+              <View style={{ alignItems: "center" }}>
+                <MaterialIcons
+                  name="transfer-within-a-station"
+                  size={ICON_SIZE_MEDIUM}
+                  color={MainColor.yellow}
+                />
+                <Spacing height={10} />
+                <TextCustom size="small">Pencairan Dana</TextCustom>
+              </View>
+            </ClickableCustom>
+          </Grid.Col>
+        </Grid>
+      </View>
+    </>
+  );
+}

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;
-  buttonSection: React.ReactNode;
+  bottomSection?: React.ReactNode;
+  buttonSection?: React.ReactNode;
 }) {
   return (
     <>