Admin Donation

Add:
- (application)/admin/donation/

Component Admin
Add:
- _ShareComponent/GridView_3_3_6.tsx

### 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

@@ -1,6 +1,7 @@
 import { BackButton } from "@/components";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { HeaderStyles } from "@/styles/header-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
@@ -207,10 +208,146 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
+        <Stack.Screen
+          name="investment/[id]/index"
+          options={{
+            title: "Detail Investasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="investment/[id]/edit"
+          options={{
+            title: "Edit Investasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
 
+        <Stack.Screen
+          name="investment/[id]/edit-prospectus"
+          options={{
+            title: "Edit Prospektus",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        <Stack.Screen
+          name="investment/[id]/(document)/list-of-document"
+          options={{
+            title: "Daftar Dokumen",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="investment/[id]/(document)/add-document"
+          options={{
+            title: "Tambah Dokumen",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="investment/[id]/(document)/edit-document"
+          options={{
+            title: "Edit Dokumen",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        <Stack.Screen
+          name="investment/[id]/(news)/add-news"
+          options={{
+            title: "Tambah Berita",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        <Stack.Screen
+          name="investment/[id]/investor"
+          options={{
+            title: "Investor",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        <Stack.Screen
+          name="investment/[id]/(transaction-flow)/index"
+          options={{
+            title: "Pembelian Saham",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="investment/[id]/(transaction-flow)/select-bank"
+          options={{
+            title: "Pilih Bank",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="investment/[id]/(transaction-flow)/invoice"
+          options={{
+            title: "Invoice",
+            headerLeft: () => (
+              <Ionicons
+                name="close"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.yellow}
+                onPress={() =>
+                  router.navigate(`/investment/(tabs)/transaction`)
+                }
+              />
+            ),
+          }}
+        />
+        <Stack.Screen
+          name="investment/[id]/(transaction-flow)/process"
+          options={{
+            title: "Proses",
+            headerLeft: () => (
+              <Ionicons
+                name="close"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.yellow}
+                onPress={() =>
+                  router.navigate(`/investment/(tabs)/transaction`)
+                }
+              />
+            ),
+          }}
+        />
+        <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={{
@@ -218,6 +355,142 @@ 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`)}
+              />
+            ),
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/(transaction-flow)/[transaction]/success"
+          options={{
+            title: "Donasi Berhasil",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/(transaction-flow)/[transaction]/failed"
+          options={{
+            title: "Donasi Gagal",
+            headerLeft: () => <BackButton />,
+          }}
+        />
 
         {/* ========== 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,76 @@
+import {
+  BadgeCustom,
+  BaseBox,
+  DummyLandscapeImage,
+  Grid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { dummyMasterStatusTransaction } from "@/lib/dummy-data/_master/status-transaction";
+import { router } from "expo-router";
+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];
+  });
+
+  const handlePress = (value: string) => {
+    if (value === "menunggu") {
+      router.push(`/donation/${value}/(transaction-flow)/123/invoice`);
+    } else if (value === "proses") {
+      router.push(`/donation/${value}/(transaction-flow)/123/process`);
+    } else if (value === "berhasil") {
+      router.push(`/donation/${value}/(transaction-flow)/123/success`);
+    } else if (value === "gagal") {
+      router.push(`/donation/${value}/(transaction-flow)/123/failed`);
+    }
+  };
+
+  return (
+    <ViewWrapper hideFooter>
+      {randomStatusData.map((item, index) => (
+        <BaseBox
+          key={index}
+          paddingTop={7}
+          paddingBottom={7}
+          onPress={() => {
+            handlePress(item.value);
+          }}
+        >
+          <Grid>
+            <Grid.Col span={5}>
+              <DummyLandscapeImage height={100} unClickPath />
+            </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]/failed.tsx

@@ -0,0 +1,83 @@
+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";
+import dayjs from "dayjs";
+
+export default function DonasiFailed() {
+  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 Donasi",
+    value: "Rp. 750.000",
+  },
+  {
+    label: "Tanggal",
+    value: `${dayjs(new Date()).format("DD/MM/YYYY")}`,
+  },
+];

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, transaction } = useLocalSearchParams();
+  return (
+    <>
+      <ViewWrapper>
+        <StackCustom>
+          <InformationBox text={`Mohon transfer donasi anda ke rekening dibawah dengan Id: ${transaction}`} />
+          <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)/[transaction]/success.tsx

@@ -0,0 +1,83 @@
+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";
+import dayjs from "dayjs";
+
+export default function DonationSuccess() {
+  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 Penggalian Dana 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 Donasi",
+    value: "Rp. 750.000",
+  },
+  {
+    label: "Tanggal",
+    value: `${dayjs(new Date()).format("DD/MM/YYYY")}`,
+  },
+];

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.replace(`/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.replace("/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)/index.tsx

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

app/(application)/(user)/investment/(tabs)/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,16 +1,7 @@
-import {
-  BaseBox,
-  Grid,
-  ScrollableCustom,
-  Spacing,
-  TextCustom,
-  ViewWrapper
-} from "@/components";
-import DUMMY_IMAGE from "@/constants/dummy-image-value";
-import { masterStatus } from "@/lib/dummy-data/_master/status";
-import { Image } from "expo-image";
+import { ScrollableCustom, ViewWrapper } from "@/components";
+import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
+import Investment_StatusBox from "@/screens/Invesment/StatusBox";
 import { useState } from "react";
-import { View } from "react-native";
 
 export default function InvestmentPortofolio() {
   const [activeCategory, setActiveCategory] = useState<string | null>(
@@ -24,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,
@@ -36,34 +27,12 @@ export default function InvestmentPortofolio() {
   return (
     <ViewWrapper headerComponent={scrollComponent} hideFooter>
       {Array.from({ length: 10 }).map((_, index) => (
-        <BaseBox key={index} paddingTop={7} paddingBottom={7}>
-          <Grid>
-            <Grid.Col span={6}>
-              <TextCustom truncate={2}>
-                Title here : {activeCategory} Lorem ipsum dolor sit amet consectetur adipisicing
-                elit. Omnis, exercitationem, sequi enim quod distinctio maiores
-                laudantium amet, quidem atque repellat sit vitae qui aliquam est
-                veritatis laborum eum voluptatum totam!
-              </TextCustom>
-
-              <Spacing />
-
-              <TextCustom bold size="small">
-                Target Dana:
-              </TextCustom>
-              <TextCustom>Rp. {index + 1 % 3/4 * 1004000}</TextCustom>
-            </Grid.Col>
-            <Grid.Col span={1}>
-              <View />
-            </Grid.Col>
-            <Grid.Col span={5}>
-              <Image
-                source={DUMMY_IMAGE.background}
-                style={{ width: "auto", height: 100, borderRadius: 10 }}
-              />
-            </Grid.Col>
-          </Grid>
-        </BaseBox>
+        <Investment_StatusBox
+          key={index}
+          id={index.toString()}
+          status={activeCategory as string}
+          href={`/investment/${index}/${activeCategory}/detail`}
+        />
       ))}
     </ViewWrapper>
   );

app/(application)/(user)/investment/(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)/add-document.tsx

@@ -0,0 +1,58 @@
+import {
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  CenterCustom,
+  InformationBox,
+  Spacing,
+  StackCustom,
+  TextInputCustom,
+  ViewWrapper
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { FontAwesome5 } from "@expo/vector-icons";
+import { router } from "expo-router";
+
+export default function InvestmentAddDocument() {
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom onPress={() => router.back()}>Simpan</ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <>
+      <ViewWrapper footerComponent={buttonFooter}>
+        <StackCustom gap={"xs"}>
+          <InformationBox text="File dokumen bersifat opsional, jika memang ada file yang bisa membantu meyakinkan investor. Anda bisa mengupload nya." />
+          <Spacing />
+          <TextInputCustom
+            label="Judul Dokumen"
+            placeholder="Masukan judul dokumen"
+            required
+          />
+
+          <BaseBox>
+            <CenterCustom>
+              <FontAwesome5
+                name="file-pdf"
+                size={30}
+                color={MainColor.disabled}
+              />
+            </CenterCustom>
+          </BaseBox>
+
+          <ButtonCenteredOnly
+            icon="upload"
+            onPress={() =>
+              router.push("/(application)/(image)/take-picture/123")
+            }
+          >
+            Upload
+          </ButtonCenteredOnly>
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -0,0 +1,58 @@
+import {
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  CenterCustom,
+  InformationBox,
+  Spacing,
+  StackCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { FontAwesome5 } from "@expo/vector-icons";
+import { router } from "expo-router";
+
+export default function InvestmentEditDocument() {
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom onPress={() => router.back()}>Update</ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <>
+      <ViewWrapper footerComponent={buttonFooter}>
+        <StackCustom gap={"xs"}>
+          <InformationBox text="File dokumen bersifat opsional, jika memang ada file yang bisa membantu meyakinkan investor. Anda bisa mengupload nya." />
+          <Spacing />
+          <TextInputCustom
+            label="Judul Dokumen"
+            placeholder="Masukan judul dokumen"
+            required
+          />
+
+          <BaseBox>
+            <CenterCustom>
+              <FontAwesome5
+                name="file-pdf"
+                size={30}
+                color={MainColor.disabled}
+              />
+            </CenterCustom>
+          </BaseBox>
+
+          <ButtonCenteredOnly
+            icon="upload"
+            onPress={() =>
+              router.push("/(application)/(image)/take-picture/123")
+            }
+          >
+            Upload
+          </ButtonCenteredOnly>
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -0,0 +1,16 @@
+import { ViewWrapper } from "@/components";
+import Investment_BoxDetailDocument from "@/screens/Invesment/Document/RecapBoxDetail";
+
+export default function InvestmentListOfDocument() {
+  return (
+    <ViewWrapper>
+      {Array.from({ length: 10 }).map((_, index) => (
+        <Investment_BoxDetailDocument
+          key={index}
+          title={`Judul Dokumen ${index + 1}`}
+          href={`/(file)/${index + 1}`}
+        />
+      ))}
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,133 @@
+import {
+  AlertDefaultSystem,
+  BackButton,
+  DotButton,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  ViewWrapper,
+} from "@/components";
+import { IconEdit } from "@/components/_Icon";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import Investment_BoxDetailDocument from "@/screens/Invesment/Document/RecapBoxDetail";
+import { AntDesign, Ionicons } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function InvestmentRecapOfDocument() {
+  const { id } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [openDrawerBox, setOpenDrawerBox] = useState(false);
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Rekap Dokumen",
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <DotButton
+              onPress={() => {
+                setOpenDrawer(true);
+                setOpenDrawerBox(false);
+              }}
+            />
+          ),
+        }}
+      />
+
+      <ViewWrapper>
+        {Array.from({ length: 10 }).map((_, index) => (
+          <Investment_BoxDetailDocument
+            key={index}
+            title={`Judul Dokumen ${index + 1}`}
+            leftIcon={
+              <Ionicons
+                name="ellipsis-horizontal-outline"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.white}
+                style={{
+                  zIndex: 10,
+                  alignSelf: "flex-end",
+                }}
+                onPress={() => setOpenDrawerBox(true)}
+              />
+            }
+            href={`/(file)/${id}`}
+          />
+        ))}
+      </ViewWrapper>
+
+      {/* Drawer On Header */}
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: (
+                <AntDesign
+                  name="pluscircle"
+                  size={ICON_SIZE_SMALL}
+                  color={MainColor.white}
+                />
+              ),
+              label: "Tambah Dokumen",
+              path: `/investment/${id}/(document)/add-document`,
+            },
+          ]}
+          onPressItem={(item) => {
+            router.push(item.path as any);
+            setOpenDrawer(false);
+          }}
+        />
+      </DrawerCustom>
+
+      {/* Drawer On Box */}
+      <DrawerCustom
+        isVisible={openDrawerBox}
+        closeDrawer={() => setOpenDrawerBox(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconEdit />,
+              label: "Edit Dokumen",
+              path: `/investment/${id}/(document)/edit-document`,
+            },
+            {
+              icon: (
+                <Ionicons
+                  name="trash-outline"
+                  size={ICON_SIZE_SMALL}
+                  color={MainColor.white}
+                />
+              ),
+              label: "Hapus Dokumen",
+              path: "" as any,
+              color: MainColor.red,
+            },
+          ]}
+          onPressItem={(item) => {
+            if (item.path === ("" as any)) {
+              AlertDefaultSystem({
+                title: "Hapus Dokumen",
+                message: "Apakah anda yakin ingin menghapus dokumen ini?",
+                textLeft: "Batal",
+                textRight: "Hapus",
+                onPressRight: () => {
+                  setOpenDrawerBox(false);
+                },
+              });
+            }
+            router.push(item.path as any);
+            setOpenDrawer(false);
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

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]/(news)/[news]/index.tsx

@@ -0,0 +1,76 @@
+import {
+  AlertDefaultSystem,
+  BackButton,
+  BaseBox,
+  DotButton,
+  DrawerCustom,
+  DummyLandscapeImage,
+  MenuDrawerDynamicGrid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper
+} from "@/components";
+import { IconTrash } from "@/components/_Icon/IconTrash";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function InvestmentNews() {
+  const { id, news } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Detail Berita",
+          headerLeft: () => <BackButton />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+        }}
+      />
+      <ViewWrapper>
+        <BaseBox>
+          <StackCustom>
+            <DummyLandscapeImage />
+            <TextCustom bold align="center" size="large">
+              Judul Berita {news} Terbaru
+            </TextCustom>
+            <TextCustom>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
+              fuga mollitia laboriosam voluptatibus quos molestias, illo fugiat
+              esse repellat, ad officia earum numquam? Aliquid corrupti quam
+              tempora cum harum est!
+            </TextCustom>
+          </StackCustom>
+        </BaseBox>
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              label: "Hapus Berita",
+              path: `/investment/${id}/add-news`,
+              icon: <IconTrash />,
+              color: "red",
+            },
+          ]}
+          onPressItem={(item) => {
+            AlertDefaultSystem({
+              title: "Hapus Berita",
+              message: "Apakah Anda yakin ingin menghapus berita ini?",
+              textLeft: "Batal",
+              textRight: "Hapus",
+              onPressRight: () => {
+                router.back();
+                setOpenDrawer(false);
+              },
+            });
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

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

@@ -0,0 +1,53 @@
+import {
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  Spacing,
+  StackCustom,
+  TextAreaCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { router } from "expo-router";
+
+export default function InvestmentAddNews() {
+  return (
+    <ViewWrapper>
+      <StackCustom gap={"xs"}>
+        <InformationBox text="Pengunggahan foto ke aplikasi bersifat opsional dan tidak diwajibkan, Anda dapat menyimpan berita tanpa mengunggah foto." />
+        <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}
+        />
+
+        <ButtonCustom
+          onPress={() => {
+            router.back();
+          }}
+        >
+          Simpan
+        </ButtonCustom>
+      </StackCustom>
+      <Spacing />
+    </ViewWrapper>
+  );
+}

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

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

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

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

app/(application)/(user)/investment/[id]/(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)/index.tsx

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

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

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

app/(application)/(user)/investment/[id]/(transaction-flow)/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 InvestmentProcess() {
+  return (
+    <>
+      <ViewWrapper>
+        <BaseBox>
+          <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

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

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]/[status]/detail.tsx

@@ -0,0 +1,136 @@
+import {
+  BackButton,
+  DotButton,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  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 Investment_ButtonInvestasiSection from "@/screens/Invesment/ButtonInvestasiSection";
+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 InvestmentDetailStatus() {
+  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={status as string}
+    />
+  );
+
+  const buttonSection = (
+    <Investment_ButtonInvestasiSection id={id as string} isMine={false} />
+  );
+
+  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>
+        <Invesment_DetailDataPublishSection
+          status={status as string}
+          bottomSection={bottomSection}
+          buttonSection={buttonSection}
+        />
+      </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}/(document)/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}/(document)/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]/edit-prospectus.tsx

@@ -0,0 +1,46 @@
+import {
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  CenterCustom,
+  InformationBox,
+  Spacing,
+  StackCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { FontAwesome5 } from "@expo/vector-icons";
+import { router } from "expo-router";
+
+export default function InvestmentEditProspectus() {
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom onPress={() => router.back()}>Update</ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <ViewWrapper footerComponent={buttonFooter}>
+      <StackCustom gap={"xs"}>
+        <InformationBox text="File prospektus wajib untuk diupload, agar calon investor paham dengan prospek investasi yang akan anda jalankan kedepan." />
+        <Spacing />
+
+        <BaseBox>
+          <CenterCustom>
+            <FontAwesome5
+              name="file-pdf"
+              size={30}
+              color={MainColor.disabled}
+            />
+          </CenterCustom>
+        </BaseBox>
+        <ButtonCenteredOnly
+          icon="upload"
+          onPress={() => router.push("/(application)/(image)/take-picture/123")}
+        >
+          Upload
+        </ButtonCenteredOnly>
+      </StackCustom>
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,164 @@
+import {
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  SelectCustom,
+  Spacing,
+  StackCustom,
+  TextInputCustom,
+  ViewWrapper
+} from "@/components";
+import dummyPembagianDeviden from "@/lib/dummy-data/investment/pembagian-deviden";
+import dummyListPencarianInvestor from "@/lib/dummy-data/investment/pencarian-investor";
+import dummyPeriodeDeviden from "@/lib/dummy-data/investment/periode-deviden";
+import { router } from "expo-router";
+import { useState } from "react";
+
+export default function InvestmentEdit() {
+  const [data, setData] = useState({
+    title: "",
+    targetDana: 0,
+    hargaPerLembar: 0,
+    totalLembar: 0,
+    rasioKeuntungan: 0,
+    pencarianInvestor: "",
+    periodeDeviden: "",
+    pembagianDeviden: "",
+  });
+
+  return (
+    <ViewWrapper>
+      <StackCustom gap={"xs"}>
+        <InformationBox text="Gambar investasi bisa berupa ilustrasi, poster atau foto terkait investasi." />
+        <LandscapeFrameUploaded />
+        <ButtonCenteredOnly
+          icon="upload"
+          onPress={() => router.push("/take-picture/1")}
+        >
+          Upload
+        </ButtonCenteredOnly>
+
+        <Spacing />
+
+        <InformationBox text="File prospektus wajib untuk diupload, agar calon investor paham dengan prospek investasi yang akan anda jalankan kedepannya." />
+
+        <TextInputCustom
+          required
+          placeholder="Judul"
+          label="Judul"
+          value={data.title}
+          onChangeText={(value) => setData({ ...data, title: value })}
+        />
+
+        <TextInputCustom
+          required
+          iconLeft="Rp."
+          placeholder="0"
+          label="Target Dana"
+          keyboardType="numeric"
+          onChangeText={(value) =>
+            setData({ ...data, targetDana: Number(value) })
+          }
+          value={data.targetDana === 0 ? "" : data.targetDana.toString()}
+        />
+
+        <TextInputCustom
+          required
+          iconLeft="Rp."
+          placeholder="0"
+          label="Target Dana"
+          keyboardType="numeric"
+          onChangeText={(value) =>
+            setData({ ...data, targetDana: Number(value) })
+          }
+          value={data.targetDana === 0 ? "" : data.targetDana.toString()}
+        />
+
+        <TextInputCustom
+          required
+          iconLeft="Rp."
+          placeholder="0"
+          label="Harga Per Lembar"
+          keyboardType="numeric"
+          onChangeText={(value) =>
+            setData({ ...data, targetDana: Number(value) })
+          }
+          value={data.targetDana === 0 ? "" : data.targetDana.toString()}
+        />
+
+        <TextInputCustom
+          required
+          placeholder="0"
+          label="Total Lembar"
+          keyboardType="numeric"
+          onChangeText={(value) =>
+            setData({ ...data, totalLembar: Number(value) })
+          }
+          value={data.totalLembar === 0 ? "" : data.totalLembar.toString()}
+        />
+
+        <TextInputCustom
+          required
+          iconRight="%"
+          label="Rasio Keuntungan / ROI %"
+          placeholder="0"
+          keyboardType="numeric"
+          onChangeText={(value) =>
+            setData({ ...data, rasioKeuntungan: Number(value) })
+          }
+          value={
+            data.rasioKeuntungan === 0 ? "" : data.rasioKeuntungan.toString()
+          }
+        />
+
+        <SelectCustom
+          required
+          placeholder="Pilih batas waktu"
+          label="Pencarian Investor"
+          data={dummyListPencarianInvestor.map((item) => ({
+            label: item.name + `${" "}hari`,
+            value: item.id,
+          }))}
+          onChange={(value) =>
+            setData({ ...data, pencarianInvestor: value as any })
+          }
+          value={data.pencarianInvestor}
+        />
+
+        <SelectCustom
+          required
+          placeholder="Pilih batas waktu"
+          label="Pilih Periode Deviden"
+          data={dummyPeriodeDeviden.map((item) => ({
+            label: item.name,
+            value: item.id,
+          }))}
+          onChange={(value) =>
+            setData({ ...data, periodeDeviden: value as any })
+          }
+          value={data.periodeDeviden}
+        />
+
+        <SelectCustom
+          required
+          placeholder="Pilih batas waktu"
+          label="Pilih Pembagian Deviden"
+          data={dummyPembagianDeviden.map((item) => ({
+            label: item.name + `${" "}bulan`,
+            value: item.id,
+          }))}
+          onChange={(value) =>
+            setData({ ...data, pembagianDeviden: value as any })
+          }
+          value={data.pembagianDeviden}
+        />
+        <Spacing />
+        <ButtonCustom onPress={() => router.replace("/investment/portofolio")}>
+          Simpan
+        </ButtonCustom>
+      </StackCustom>
+      <Spacing height={50} />
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,134 @@
+import {
+  BackButton,
+  DotButton,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  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 Investment_ButtonInvestasiSection from "@/screens/Invesment/ButtonInvestasiSection";
+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 InvestmentDetail() {
+  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'}
+    />
+  );
+
+  const buttonSection = <Investment_ButtonInvestasiSection id={id as string} isMine={true} />;
+
+  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>
+        <Invesment_DetailDataPublishSection
+          status={"publish"}
+          bottomSection={bottomSection}
+          buttonSection={buttonSection}
+        />
+      </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]/investor.tsx

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

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)/history.tsx

@@ -1,5 +1,5 @@
 import { ViewWrapper } from "@/components";
-import TabsTwoHeaderCustom from "@/components/_ShareComponent/TabsTwoHeaderCustom";
+import TabsTwoButtonCustom from "@/components/_ShareComponent/TabsTwoHeaderCustom";
 import Voting_BoxPublishSection from "@/screens/Voting/BoxPublishSection";
 import { useState } from "react";
 
@@ -15,7 +15,7 @@ export default function VotingHistory() {
     <ViewWrapper
       hideFooter
       headerComponent={
-        <TabsTwoHeaderCustom
+        <TabsTwoButtonCustom
           leftValue="all"
           rightValue="main"
           leftText="Semua Riwayat"

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,

app/(application)/_layout.tsx

@@ -7,6 +7,8 @@ export default function ApplicationLayout() {
     <>
       <Stack screenOptions={HeaderStyles}>
         <Stack.Screen name="(user)" options={{ headerShown: false }} />
+        <Stack.Screen name="admin" options={{ headerShown: false }} />
+        
 
         {/* Take Picture */}
         <Stack.Screen

app/(application)/admin/_layout.tsx

@@ -0,0 +1,239 @@
+import {
+  AlertDefaultSystem,
+  DrawerCustom,
+  GridComponentView,
+  MenuDrawerDynamicGrid,
+  StackCustom,
+  TextCustom,
+} from "@/components";
+import DrawerAdmin from "@/components/Drawer/DrawerAdmin";
+import NavbarMenu from "@/components/Drawer/NavbarMenu";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_MEDIUM, ICON_SIZE_SMALL, ICON_SIZE_XLARGE } from "@/constants/constans-value";
+import { adminListMenu } from "@/screens/Admin/listPageAdmin";
+import { GStyles } from "@/styles/global-styles";
+import { FontAwesome6, Ionicons } from "@expo/vector-icons";
+import { router, Stack } from "expo-router";
+import { useState } from "react";
+
+export default function AdminLayout() {
+  const [openDrawerNavbar, setOpenDrawerNavbar] = useState(false);
+  const [openDrawerUser, setOpenDrawerUser] = useState(false);
+  return (
+    <>
+      <Stack
+        screenOptions={{
+          title: "HIPMI DASHBOARD",
+          headerStyle: GStyles.headerStyle,
+          headerTitleStyle: GStyles.headerTitleStyle,
+          headerTitleAlign: "center",
+          contentStyle: {
+            borderBottomColor: AccentColor.blue,
+          },
+          headerLeft: () => (
+            <Ionicons
+              name="menu"
+              size={ICON_SIZE_XLARGE}
+              color={MainColor.white}
+              onPress={() => setOpenDrawerNavbar(true)}
+            />
+          ),
+          headerRight: () => (
+            <FontAwesome6
+              name="circle-user"
+              size={ICON_SIZE_MEDIUM}
+              color={MainColor.white}
+              onPress={() => setOpenDrawerUser(true)}
+            />
+          ),
+        }}
+      >
+        <Stack.Screen name="dashboard" />
+        {/* ================== Investment Start ================== */}
+        <Stack.Screen name="investment/index" />
+        <Stack.Screen name="investment/publish" />
+        <Stack.Screen name="investment/review" />
+        <Stack.Screen name="investment/reject" />
+        {/* ================== Investment End ================== */}
+
+        {/* ================== Maps Start ================== */}
+        <Stack.Screen name="maps" />
+        {/* ================== Maps End ================== */}
+
+        {/* ================== App Information Start ================== */}
+        <Stack.Screen name="app-information/index" />
+        {/* ================== App Information End ================== */}
+
+        {/* ================== Job Start ================== */}
+        <Stack.Screen name="job/index" />
+        {/* <Stack.Screen name="job/publish" />
+        <Stack.Screen name="job/review" />
+        <Stack.Screen name="job/reject" /> */}
+        <Stack.Screen name="job/[status]/status" />
+        <Stack.Screen name="job/[id]/[status]/index" />
+
+        {/* ================== Collaboration Start ================== */}
+        <Stack.Screen name="collaboration/index" />
+        <Stack.Screen name="collaboration/publish" />
+        <Stack.Screen name="collaboration/group" />
+        <Stack.Screen name="collaboration/reject" />
+        <Stack.Screen name="collaboration/[id]/[status]"/>
+        <Stack.Screen name="collaboration/[id]/group"/>
+        {/* ================== Collaboration End ================== */}
+
+        {/* ================== Forum Start ================== */}
+        <Stack.Screen name="forum/index" />
+        <Stack.Screen name="forum/[id]/index" />
+        <Stack.Screen name="forum/report-comment"/>
+        <Stack.Screen name="forum/report-posting"/>
+        <Stack.Screen name="forum/[id]/list-report-posting" />
+        <Stack.Screen name="forum/[id]/list-report-comment"/>
+        {/* ================== Forum End ================== */}
+
+        {/* ================== Voting Start ================== */}
+        <Stack.Screen name="voting/index" />
+        <Stack.Screen name="voting/[status]/status" />
+        <Stack.Screen name="voting/[id]/[status]/index" />
+        <Stack.Screen name="voting/[id]/reject-input"/>
+        {/* ================== Voting End ================== */}
+
+        {/* ================== Event Start ================== */}
+        <Stack.Screen name="event/index" />
+        <Stack.Screen name="event/[status]/status" />
+        <Stack.Screen name="event/type-of-event"/>
+        <Stack.Screen name="event/type-create"/>
+        <Stack.Screen name="event/type-update"/>
+        {/* <Stack.Screen name="event/[id]/[status]/index" />
+        <Stack.Screen name="event/[id]/reject-input"/> */}
+        {/* ================== Event End ================== */}
+
+        {/* ================== Donasi Start ================== */}
+        {/* <Stack.Screen name="donation/index" /> */}
+        {/* <Stack.Screen name="donation/[status]/status" /> */}
+        {/* <Stack.Screen name="donation/[id]/[status]/index" />
+        <Stack.Screen name="donation/[id]/reject-input"/> */}
+        {/* ================== Donasi End ================== */}
+      </Stack>
+
+      <DrawerAdmin
+        isVisible={openDrawerNavbar}
+        onClose={() => setOpenDrawerNavbar(false)}
+      >
+        <StackCustom gap={"xs"}>
+          <Ionicons
+            name="close"
+            size={ICON_SIZE_SMALL}
+            color={MainColor.white}
+            onPress={() => setOpenDrawerNavbar(false)}
+            style={{ alignSelf: "flex-end" }}
+          />
+
+          <NavbarMenu
+            items={adminListMenu}
+            onClose={() => setOpenDrawerNavbar(false)}
+          />
+        </StackCustom>
+      </DrawerAdmin>
+
+      <DrawerCustom
+        isVisible={openDrawerUser}
+        closeDrawer={() => setOpenDrawerUser(false)}
+        height={"auto"}
+      >
+        <StackCustom>
+          <GridComponentView
+            leftIcon={
+              <Ionicons
+                name="person"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.white}
+              />
+            }
+          >
+            <TextCustom>Username</TextCustom>
+          </GridComponentView>
+          <GridComponentView
+            leftIcon={
+              <Ionicons
+                name="ribbon-outline"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.white}
+              />
+            }
+          >
+            <TextCustom>User Role</TextCustom>
+          </GridComponentView>
+
+          <MenuDrawerDynamicGrid
+            columns={3}
+            data={[
+              {
+                label: "Notifikasi",
+                value: "notification",
+                icon: (
+                  <Ionicons
+                    name="notifications"
+                    size={ICON_SIZE_SMALL}
+                    color={MainColor.white}
+                  />
+                ),
+                path: "/admin/notification",
+              },
+              {
+                label: "Kembali ke User",
+                value: "back-to-user",
+                icon: (
+                  <Ionicons
+                    name="git-compare"
+                    size={ICON_SIZE_SMALL}
+                    color={MainColor.white}
+                  />
+                ),
+                path: "" as any,
+              },
+              {
+                label: "Keluar",
+                value: "logout",
+                icon: (
+                  <Ionicons
+                    name="log-out"
+                    size={ICON_SIZE_SMALL}
+                    color={MainColor.white}
+                  />
+                ),
+                path: "" as any,
+                color: MainColor.red,
+              },
+            ]}
+            onPressItem={(item) => {
+              if (item.value === "notification") {
+                router.push("/admin/notification");
+                setOpenDrawerUser(false);
+              } else if (item.value === "back-to-user") {
+                AlertDefaultSystem({
+                  title: "Kembali ke User",
+                  message: "Apakah Anda yakin ingin kembali ke user?",
+                  textLeft: "Batal",
+                  textRight: "Ya",
+                  onPressRight: () => {
+                    router.replace(`/(application)/(user)/profile/${123}`);
+                  },
+                });
+              } else if (item.value === "logout") {
+                AlertDefaultSystem({
+                  title: "Keluar",
+                  message: "Apakah Anda yakin ingin keluar?",
+                  textLeft: "Batal",
+                  textRight: "Keluar",
+                  onPressRight: () => {
+                    router.replace("/");
+                  },
+                });
+              }
+            }}
+          />
+        </StackCustom>
+      </DrawerCustom>
+    </>
+  );
+}

app/(application)/admin/app-information/business-field/[id]/index.tsx

@@ -0,0 +1,36 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  StackCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { router } from "expo-router";
+
+export default function AdminAppInformation_BusinessFieldDetail() {
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => router.back()}
+      >
+        Update
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper footerComponent={buttonSubmit}>
+        <StackCustom>
+          <AdminBackButtonAntTitle title="Update Bidang Bisnis" />
+
+          <TextInputCustom
+            label="Nama Bidang Bisnis"
+            placeholder="Masukan Nama Bidang Bisnis"
+            required
+          />
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/app-information/business-field/create.tsx

@@ -0,0 +1,36 @@
+import {
+    BoxButtonOnFooter,
+    ButtonCustom,
+    StackCustom,
+    TextInputCustom,
+    ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { router } from "expo-router";
+
+export default function AdminAppInformation_BusinessFieldCreate() {
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => router.back()}
+      >
+        Tambah
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper footerComponent={buttonSubmit}>
+        <StackCustom>
+          <AdminBackButtonAntTitle title="Tambah Bidang Bisnis" />
+
+          <TextInputCustom
+            label="Nama Bidang Bisnis"
+            placeholder="Masukan Nama Bidang Bisnis"
+            required
+          />
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/app-information/index.tsx

@@ -0,0 +1,88 @@
+import {
+  ScrollableCustom,
+  StackCustom,
+  ViewWrapper
+} from "@/components";
+import AdminActionIconPlus from "@/components/_ShareComponent/Admin/ActionIconPlus";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminAppInformation_BusinessFieldSection from "@/screens/Admin/App-Information/BusinessFieldSection";
+import AdminAppInformation_Bank from "@/screens/Admin/App-Information/InformationBankSection";
+import AdminAppInformation_StickerSection from "@/screens/Admin/App-Information/StickerSection";
+import { router } from "expo-router";
+import { useState } from "react";
+
+export default function AdminInformation() {
+  const [activeCategory, setActiveCategory] = useState<string | null>("bank");
+  const [activePage, setActivePage] = useState<string>("Informasi Bank");
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+    setActivePage(item.label);
+    // tambahkan logika lain seperti filter dsb.
+  };
+
+  const scrollComponent = (
+    <StackCustom>
+      <ScrollableCustom
+        data={listPage}
+        onButtonPress={handlePress}
+        activeId={activeCategory as any}
+      />
+    </StackCustom>
+  );
+
+  const renderContent = () => {
+    switch (activeCategory) {
+      case "bank":
+        return <AdminAppInformation_Bank />;
+      case "business":
+        return <AdminAppInformation_BusinessFieldSection />;
+      case "sticker":
+        return <AdminAppInformation_StickerSection />;
+      default:
+        return <AdminAppInformation_Bank />;
+    }
+  };
+
+  return (
+    <>
+      <ViewWrapper headerComponent={scrollComponent}>
+        <AdminComp_BoxTitle
+          title={activePage}
+          rightComponent={
+            <AdminActionIconPlus
+              onPress={() => {
+                if (activeCategory === "bank") {
+                  router.push("/admin/app-information/information-bank/create");
+                } else if (activeCategory === "business") {
+                  router.push("/admin/app-information/business-field/create");
+                } else if (activeCategory === "sticker") {
+                  router.push("/admin/app-information/sticker/create");
+                }
+              }}
+            />
+          }
+        />
+        {renderContent()}
+      </ViewWrapper>
+    </>
+  );
+}
+
+const listPage = [
+  {
+    id: "1",
+    label: "Informasi Bank",
+    value: "bank",
+  },
+  {
+    id: "2",
+    label: "Bidang Bisnis",
+    value: "business",
+  },
+  {
+    id: "3",
+    label: "Stiker",
+    value: "sticker",
+  },
+];

app/(application)/admin/app-information/information-bank/[id]/index.tsx

@@ -0,0 +1,50 @@
+import {
+    BoxButtonOnFooter,
+    ButtonCustom,
+    StackCustom,
+    TextInputCustom,
+    ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { router } from "expo-router";
+
+export default function AdminAppInformation_BankDetail() {
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => router.back()}
+      >
+        Update
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper footerComponent={buttonSubmit}>
+        <StackCustom>
+          <AdminBackButtonAntTitle title="Update Bank" />
+
+          <StackCustom>
+            <TextInputCustom
+              label="Nama Bank"
+              placeholder="Masukan Nama Bank"
+              required
+            />
+
+            <TextInputCustom
+              label="Nama Rekening"
+              placeholder="Masukan Nama Rekening"
+              required
+            />
+
+            <TextInputCustom
+              label="Nomor Rekening"
+              placeholder="Masukan Nomor Rekening"
+              required
+            />
+          </StackCustom>
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/app-information/information-bank/create.tsx

@@ -0,0 +1,50 @@
+import {
+    BoxButtonOnFooter,
+    ButtonCustom,
+    StackCustom,
+    TextInputCustom,
+    ViewWrapper
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { router } from "expo-router";
+
+export default function AdminAppInformation_BankCreate() {
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => router.back()}
+      >
+        Tambah
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper footerComponent={buttonSubmit}>
+        <StackCustom>
+          <AdminBackButtonAntTitle title="Tambah Daftar Bank" />
+
+          <StackCustom>
+            <TextInputCustom
+              label="Nama Bank"
+              placeholder="Masukan Nama Bank"
+              required
+            />
+
+            <TextInputCustom
+              label="Nama Rekening"
+              placeholder="Masukan Nama Rekening"
+              required
+            />
+
+            <TextInputCustom
+              label="Nomor Rekening"
+              placeholder="Masukan Nomor Rekening"
+              required
+            />
+          </StackCustom>
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/app-information/sticker/[id]/index.tsx

@@ -0,0 +1,80 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  CheckboxCustom,
+  CheckboxGroup,
+  LandscapeFrameUploaded,
+  SelectCustom,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { dummyMasterEmotions } from "@/lib/dummy-data/_master/emotions";
+import { router } from "expo-router";
+import { useState } from "react";
+import { View } from "react-native";
+
+export default function AdminAppInformation_StickerCreate() {
+  const [value, setValue] = useState<string | null>(null);
+  const [selectedEmotions, setSelectedEmotions] = useState<string[]>([]);
+
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom onPress={() => router.back()}>Update</ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper footerComponent={buttonSubmit}>
+        <StackCustom>
+          <AdminBackButtonAntTitle title="Edit Stiker" />
+
+          <StackCustom gap={"xs"}>
+            <LandscapeFrameUploaded />
+            <ButtonCenteredOnly icon="upload" onPress={() => {}}>
+              Upload
+            </ButtonCenteredOnly>
+            <Spacing />
+
+            <SelectCustom
+              required
+              label="Jenis Kelamin"
+              data={[
+                { label: "Laki-laki", value: "laki-laki" },
+                { label: "Perempuan", value: "perempuan" },
+              ]}
+              value={value}
+              onChange={(value) => setValue(value as string)}
+            />
+
+            <View style={{ flexDirection: "row", alignItems: "center" }}>
+              <TextCustom>Pilih Emosi Stiker</TextCustom>
+              <TextCustom color="red">*</TextCustom>
+            </View>
+            <Spacing height={10} />
+
+            <CheckboxGroup
+              value={selectedEmotions}
+              onChange={(value) => setSelectedEmotions(value as string[])}
+            >
+              <StackCustom>
+                {dummyMasterEmotions.map((e) => (
+                  <CheckboxCustom
+                    size={25}
+                    key={e.id}
+                    label={<TextCustom>{e.label}</TextCustom>}
+                    valueKey={e.id}
+                  />
+                ))}
+              </StackCustom>
+            </CheckboxGroup>
+          </StackCustom>
+        </StackCustom>
+        <Spacing />
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/app-information/sticker/create.tsx

@@ -0,0 +1,84 @@
+import {
+    BoxButtonOnFooter,
+    ButtonCenteredOnly,
+    ButtonCustom,
+    CheckboxCustom,
+    CheckboxGroup,
+    LandscapeFrameUploaded,
+    SelectCustom,
+    Spacing,
+    StackCustom,
+    TextCustom,
+    ViewWrapper
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { dummyMasterEmotions } from "@/lib/dummy-data/_master/emotions";
+import { router } from "expo-router";
+import { useState } from "react";
+import { View } from "react-native";
+
+export default function AdminAppInformation_StickerCreate() {
+  const [value, setValue] = useState<string | null>(null);
+  const [selectedEmotions, setSelectedEmotions] = useState<string[]>([]);
+
+  const buttonSubmit = (
+      <BoxButtonOnFooter>
+        <ButtonCustom
+          onPress={() => router.back()}
+        >
+          Tambah
+        </ButtonCustom>
+      </BoxButtonOnFooter>
+    );
+  return (
+    <>
+      <ViewWrapper footerComponent={buttonSubmit}>
+        <StackCustom>
+          <AdminBackButtonAntTitle title="Tambah Stiker" />
+
+          <StackCustom gap={"xs"}>
+            <LandscapeFrameUploaded />
+            <ButtonCenteredOnly icon="upload" onPress={() => {}}>
+              Upload
+            </ButtonCenteredOnly>
+            <Spacing />
+
+            <SelectCustom
+              required
+              label="Jenis Kelamin"
+              data={[
+                { label: "Laki-laki", value: "laki-laki" },
+                { label: "Perempuan", value: "perempuan" },
+              ]}
+              value={value}
+              onChange={(value) => setValue(value as string)}
+            />
+
+            <View style={{ flexDirection: "row", alignItems: "center" }}>
+              <TextCustom>Pilih Emosi Stiker</TextCustom>
+              <TextCustom color="red">*</TextCustom>
+            </View>
+            <Spacing height={10} />
+
+            <CheckboxGroup
+              value={selectedEmotions}
+              onChange={(value) => setSelectedEmotions(value as string[])}
+            >
+              <StackCustom>
+                {dummyMasterEmotions.map((e) => (
+                  <CheckboxCustom
+                    size={25}
+                    key={e.id}
+                    label={<TextCustom>{e.label}</TextCustom>}
+                    valueKey={e.id}
+                  />
+                ))}
+              </StackCustom>
+            </CheckboxGroup>
+          </StackCustom>
+        </StackCustom>
+        <Spacing/>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/collaboration/[id]/[status].tsx

@@ -0,0 +1,89 @@
+import {
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCustom,
+  Grid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { MainColor } from "@/constants/color-palet";
+import { useLocalSearchParams } from "expo-router";
+
+export default function AdminCollaborationPublish() {
+  const { id, status } = useLocalSearchParams();
+  console.log("params:", id, status);
+  const bottomFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        backgroundColor={MainColor.red}
+        textColor="white"
+        onPress={() => {}}
+      >
+        Reject
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title={`Detail ${status}`} />}
+        footerComponent={bottomFooter}
+      >
+        <BaseBox>
+          <StackCustom>
+            {listData.map((item, i) => (
+              <Grid key={i}>
+                <Grid.Col
+                  span={4}
+                  style={{ justifyContent: "center", paddingRight: 10 }}
+                >
+                  <TextCustom bold>{item.label}</TextCustom>
+                </Grid.Col>
+                <Grid.Col span={8} style={{ justifyContent: "center" }}>
+                  <TextCustom>{item.value}</TextCustom>
+                </Grid.Col>
+              </Grid>
+            ))}
+          </StackCustom>
+        </BaseBox>
+      </ViewWrapper>
+    </>
+  );
+}
+
+const listData = [
+  {
+    label: "Username",
+    value: "Bagas Banuna",
+  },
+  {
+    label: "Judul Proyek",
+    value:
+      "Judul Proyek: Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+  },
+  {
+    label: "Industri",
+    value: "Kesehatan",
+  },
+  {
+    label: "Jumlah Partisipan ",
+    value: "0",
+  },
+  {
+    label: "Lokasi",
+    value: "Kuta Selatan, Bali",
+  },
+  {
+    label: "Tujuan Proyek",
+    value:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+  {
+    label: "Keuntungan",
+    value:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+];

app/(application)/admin/collaboration/[id]/group.tsx

@@ -0,0 +1,97 @@
+import {
+  BaseBox,
+  Grid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { useLocalSearchParams } from "expo-router";
+
+export default function AdminCollaborationGroup() {
+  const { id } = useLocalSearchParams();
+  console.log("params:", id);
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminBackButtonAntTitle title={`Detail Group ${id}`} />
+        }
+      >
+        <StackCustom gap={"xs"}>
+          <BaseBox>
+            <StackCustom>
+              {listData.map((item, i) => (
+                <Grid key={i}>
+                  <Grid.Col
+                    span={4}
+                    style={{ justifyContent: "center", paddingRight: 10 }}
+                  >
+                    <TextCustom bold>{item.label}</TextCustom>
+                  </Grid.Col>
+                  <Grid.Col span={8} style={{ justifyContent: "center" }}>
+                    <TextCustom>{item.value}</TextCustom>
+                  </Grid.Col>
+                </Grid>
+              ))}
+            </StackCustom>
+          </BaseBox>
+          <BaseBox>
+            <StackCustom>
+              <TextCustom align="center">Anggota</TextCustom>
+
+              {Array.from({ length: 10 }).map((_, i) => (
+                <Grid key={i}>
+                  <Grid.Col
+                    span={4}
+                    style={{ justifyContent: "center", paddingRight: 10 }}
+                  >
+                    <TextCustom bold>Username</TextCustom>
+                  </Grid.Col>
+                  <Grid.Col span={8} style={{ justifyContent: "center" }}>
+                    <TextCustom>
+                      Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                    </TextCustom>
+                  </Grid.Col>
+                </Grid>
+              ))}
+            </StackCustom>
+          </BaseBox>
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}
+
+const listData = [
+  {
+    label: "Admin Group",
+    value: "Bagas Banuna",
+  },
+  {
+    label: "Nama Group",
+    value: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+  },
+  {
+    label: "Industri",
+    value: "Kesehatan",
+  },
+  {
+    label: "Jumlah Partisipan ",
+    value: "0",
+  },
+  {
+    label: "Lokasi",
+    value: "Kuta Selatan, Bali",
+  },
+  {
+    label: "Tujuan Proyek",
+    value:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+  {
+    label: "Keuntungan",
+    value:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+];

app/(application)/admin/collaboration/group.tsx

@@ -0,0 +1,69 @@
+import {
+  ActionIcon,
+  BaseBox,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
+import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { Octicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { Divider } from "react-native-paper";
+
+export default function AdminCollaborationGroup() {
+  return (
+    <>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Collaboration" />}>
+        <StackCustom gap={"xs"}>
+          <AdminComp_BoxTitle title="Group" />
+          <BaseBox>
+            <AdminTitleTable
+              title1="Aksi"
+              title2="Admin Group"
+              title3="Nama Group"
+            />
+            <Spacing height={10} />
+            <Divider />
+
+            {Array.from({ length: 10 }).map((_, index) => (
+              <AdminTableValue
+                key={index}
+                value1={
+                  <ActionIcon
+                    icon={
+                      <Octicons
+                        name="eye"
+                        size={ICON_SIZE_BUTTON}
+                        color="black"
+                      />
+                    }
+                    onPress={() => {
+                      router.push(`/admin/collaboration/${index}/group`);
+                    }}
+                  />
+                }
+                value2={
+                  <TextCustom truncate={1}>Username username </TextCustom>
+                }
+                value3={
+                  <TextCustom truncate={2}>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                    Blanditiis asperiores quidem deleniti architecto eaque et
+                    nostrum, ad consequuntur eveniet quisquam quae voluptatum
+                    ducimus! Dolorem nobis modi officia debitis, beatae
+                    mollitia.
+                  </TextCustom>
+                }
+              />
+            ))}
+          </BaseBox>
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/collaboration/index.tsx

@@ -0,0 +1,37 @@
+import { StackCustom, ViewWrapper } from "@/components";
+import AdminComp_BoxDashboard from "@/components/_ShareComponent/Admin/BoxDashboard";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { MainColor } from "@/constants/color-palet";
+import { Entypo, FontAwesome } from "@expo/vector-icons";
+
+export default function AdminCollaboration() {
+  return (
+    <>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Collaboration" />}>
+        <StackCustom gap={"xs"}>
+          {listData.map((item, i) => (
+            <AdminComp_BoxDashboard key={i} item={item} />
+          ))}
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}
+
+const listData = [
+  {
+    label: "Publish",
+    value: 4,
+    icon: <Entypo name="publish" size={25} color={MainColor.green} />,
+  },
+  {
+    label: "Group",
+    value: 7,
+    icon: <FontAwesome name="group" size={25} color={MainColor.yellow} />,
+  },
+  {
+    label: "Reject",
+    value: 7,
+    icon: <FontAwesome name="warning" size={25} color={MainColor.red} />,
+  },
+];

app/(application)/admin/collaboration/publish.tsx

@@ -0,0 +1,70 @@
+import {
+  ActionIcon,
+  BaseBox,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
+import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { Octicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { Divider } from "react-native-paper";
+
+export default function AdminCollaborationPublish() {
+  return (
+    <>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Collaboration" />}>
+        <StackCustom gap={"xs"}>
+          <AdminComp_BoxTitle title="Publish" />
+          <BaseBox>
+            <AdminTitleTable
+              title1="Aksi"
+              title2="Username"
+              title3="Judul Proyek"
+            />
+            <Spacing height={10} />
+            <Divider />
+
+            {Array.from({ length: 10 }).map((_, index) => (
+              <AdminTableValue
+                key={index}
+                value1={
+                  <ActionIcon
+                    icon={
+                      <Octicons
+                        name="eye"
+                        size={ICON_SIZE_BUTTON}
+                        color="black"
+                      />
+                    }
+                    onPress={() => {
+                      router.push(`/admin/collaboration/${index}/publish`);
+                    }}
+                  />
+                }
+                value2={
+                  <TextCustom truncate={1}>Username username </TextCustom>
+                }
+                value3={
+                  <TextCustom truncate={2}>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                    Blanditiis asperiores quidem deleniti architecto eaque et
+                    nostrum, ad consequuntur eveniet quisquam quae voluptatum
+                    ducimus! Dolorem nobis modi officia debitis, beatae
+                    mollitia.
+                  </TextCustom>
+                }
+              />
+            ))}
+          </BaseBox>
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}
+

app/(application)/admin/collaboration/reject.tsx

@@ -0,0 +1,69 @@
+import {
+  ActionIcon,
+  BaseBox,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
+import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { Octicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { Divider } from "react-native-paper";
+
+export default function AdminCollaborationReject() {
+  return (
+    <>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Collaboration" />}>
+        <StackCustom gap={"xs"}>
+          <AdminComp_BoxTitle title="Reject" />
+          <BaseBox>
+            <AdminTitleTable
+              title1="Aksi"
+              title2="Username"
+              title3="Judul Proyek"
+            />
+            <Spacing height={10} />
+            <Divider />
+
+            {Array.from({ length: 10 }).map((_, index) => (
+              <AdminTableValue
+                key={index}
+                value1={
+                  <ActionIcon
+                    icon={
+                      <Octicons
+                        name="eye"
+                        size={ICON_SIZE_BUTTON}
+                        color="black"
+                      />
+                    }
+                    onPress={() => {
+                      router.push(`/admin/collaboration/${index}/reject`);
+                    }}
+                  />
+                }
+                value2={
+                  <TextCustom truncate={1}>Username username </TextCustom>
+                }
+                value3={
+                  <TextCustom truncate={2}>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                    Blanditiis asperiores quidem deleniti architecto eaque et
+                    nostrum, ad consequuntur eveniet quisquam quae voluptatum
+                    ducimus! Dolorem nobis modi officia debitis, beatae
+                    mollitia.
+                  </TextCustom>
+                }
+              />
+            ))}
+          </BaseBox>
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/dashboard.tsx

@@ -0,0 +1,40 @@
+import {
+  StackCustom,
+  TextCustom,
+  ViewWrapper
+} from "@/components";
+import AdminComp_BoxDashboard from "@/components/_ShareComponent/Admin/BoxDashboard";
+import { MainColor } from "@/constants/color-palet";
+import { Ionicons } from "@expo/vector-icons";
+
+export default function AdminDashboard() {
+  return (
+    <>
+      <ViewWrapper>
+        <StackCustom>
+          <TextCustom bold size={30}>
+            Main Dashboard
+          </TextCustom>
+          {listData.map((item, i) => (
+            <AdminComp_BoxDashboard key={i} item={item} />
+          ))}
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}
+
+const listData = [
+  {
+    label: "User",
+    value: 4,
+    icon: <Ionicons name="people" size={30} color={MainColor.yellow} />,
+  },
+  {
+    label: "Portofolio",
+    value: 7,
+    icon: (
+      <Ionicons name="id-card-outline" size={30} color={MainColor.yellow} />
+    ),
+  },
+];

app/(application)/admin/donation/[status]/status.tsx

@@ -0,0 +1,76 @@
+import {
+    ActionIcon,
+    BaseBox,
+    SearchInput,
+    Spacing,
+    TextCustom,
+    ViewWrapper,
+} from "@/components";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
+import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { Octicons } from "@expo/vector-icons";
+import { useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { Divider } from "react-native-paper";
+
+export default function AdminDonationStatus() {
+  const { status } = useLocalSearchParams();
+  const rightComponent = (
+    <SearchInput
+      containerStyle={{ width: "100%", marginBottom: 0 }}
+      placeholder="Cari"
+    />
+  );
+  return (
+    <>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Donasi" />}>
+        <AdminComp_BoxTitle
+          title={`${_.startCase(status as string)}`}
+          rightComponent={rightComponent}
+        />
+
+        <BaseBox>
+          <AdminTitleTable
+            title1="Aksi"
+            title2="Username"
+            title3="Judul Donasi"
+          />
+          <Spacing />
+          <Divider />
+
+          {Array.from({ length: 10 }).map((_, index) => (
+            <AdminTableValue
+              key={index}
+              value1={
+                <ActionIcon
+                  icon={
+                    <Octicons
+                      name="eye"
+                      size={ICON_SIZE_BUTTON}
+                      color="black"
+                    />
+                  }
+                  onPress={() => {
+                    // router.push(`/admin/donation/${index}/${status}`);
+                  }}
+                />
+              }
+              value2={<TextCustom truncate={1}>Username username</TextCustom>}
+              value3={
+                <TextCustom truncate={2}>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Blanditiis asperiores quidem deleniti architecto eaque et
+                  nostrum, ad consequuntur eveniet quisquam quae voluptatum
+                  ducimus! Dolorem nobis modi officia debitis, beatae mollitia.
+                </TextCustom>
+              }
+            />
+          ))}
+        </BaseBox>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/donation/category-create.tsx

@@ -0,0 +1,27 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { useRouter } from "expo-router";
+
+export default function AdminDonationCategoryCreate() {
+  const router = useRouter();
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom onPress={() => router.back()}>Simpan</ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title="Tambah Kategori" />}
+        footerComponent={buttonSubmit}
+      >
+        <TextInputCustom placeholder="Masukkan Kategori" />
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/donation/category-update.tsx

@@ -0,0 +1,35 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { useState } from "react";
+
+export default function AdminDonationCategoryUpdate() {
+  const { id } = useLocalSearchParams();
+  const [value, setValue] = useState(id);
+
+  const router = useRouter();
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom onPress={() => router.back()}>Update</ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title="Ubah Kategori" />}
+        footerComponent={buttonSubmit}
+      >
+        <TextInputCustom
+          placeholder="Masukkan Kategori"
+          value={value as any}
+          onChangeText={setValue}
+        />
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/donation/category.tsx

@@ -0,0 +1,113 @@
+import {
+    ActionIcon,
+    BaseBox,
+    CenterCustom,
+    Spacing,
+    StackCustom,
+    TextCustom,
+    ViewWrapper,
+} from "@/components";
+import { IconEdit } from "@/components/_Icon";
+import AdminActionIconPlus from "@/components/_ShareComponent/Admin/ActionIconPlus";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { GridView_3_3_6 } from "@/components/_ShareComponent/GridView_3_3_6";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { View } from "react-native";
+import { Divider, Switch } from "react-native-paper";
+import { router } from "expo-router";
+
+export default function AdminDonationCategory() {
+  return (
+    <>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Donasi" />}>
+        <AdminComp_BoxTitle
+          title="Kategori"
+          rightComponent={
+            <AdminActionIconPlus
+              onPress={() => {
+                router.push(`/admin/donation/category-create`);
+              }}
+            />
+          }
+        />
+
+        <BaseBox>
+          <GridView_3_3_6
+            component1={
+              <TextCustom bold align="center">
+                Aksi
+              </TextCustom>
+            }
+            component2={<TextCustom bold>Status</TextCustom>}
+            component3={<TextCustom bold>Kategori</TextCustom>}
+          />
+          <Divider />
+          <Spacing />
+
+          <StackCustom>
+            {listData.map((item, index) => (
+              <View key={index}>
+                <GridView_3_3_6
+                  component1={
+                    <CenterCustom>
+                      <ActionIcon
+                        icon={
+                          <IconEdit size={ICON_SIZE_BUTTON} color="black" />
+                        }
+                        onPress={() => {
+                            router.push(`/admin/donation/category-update?id=${index}`);
+                        }}
+                      />
+                    </CenterCustom>
+                  }
+                  component2={
+                    <Switch
+                      value={true}
+                      onValueChange={(item) => {
+                        console.log(item);
+                      }}
+                      color={MainColor.yellow}
+                      
+                    />
+                  }
+                  component3={<TextCustom bold>{item.label}</TextCustom>}
+                />
+                <Spacing height={10} />
+                <Divider />
+              </View>
+            ))}
+          </StackCustom>
+        </BaseBox>
+      </ViewWrapper>
+    </>
+  );
+}
+
+const listData = [
+  {
+    label: "Kegiatan Sosial",
+    value: "kegiatan_sosial",
+  },
+  {
+    label: "Pendidikan",
+    value: "pendidikan",
+  },
+  {
+    label: "Kesehatan",
+    value: "kesehatan",
+  },
+  {
+    label: "Kebudayaan",
+    value: "kebudayaan",
+  },
+  {
+    label: "Bencana Alami",
+    value: "bencana_alami",
+  },
+  {
+    label: "Lainnya",
+    value: "lainnya",
+  },
+];

app/(application)/admin/donation/index.tsx

@@ -0,0 +1,49 @@
+import { Spacing, StackCustom, ViewWrapper } from "@/components";
+import {
+    IconList,
+    IconPublish,
+    IconReject,
+    IconReview,
+} from "@/components/_Icon/IconComponent";
+import AdminComp_BoxDashboard from "@/components/_ShareComponent/Admin/BoxDashboard";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { MainColor } from "@/constants/color-palet";
+
+export default function AdminDonation() {
+  return (
+    <>
+      <ViewWrapper>
+        <AdminTitlePage title="Donasi" />
+        <Spacing />
+        <StackCustom gap={"xs"}>
+          {listData.map((item, i) => (
+            <AdminComp_BoxDashboard key={i} item={item} />
+          ))}
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}
+
+const listData = [
+  {
+    label: "Publish",
+    value: 4,
+    icon: <IconPublish size={25} color={MainColor.green} />,
+  },
+  {
+    label: "Review",
+    value: 7,
+    icon: <IconReview size={25} color={MainColor.orange} />,
+  },
+  {
+    label: "Reject",
+    value: 5,
+    icon: <IconReject size={25} color={MainColor.red} />,
+  },
+  {
+    label: "Kategori",
+    value: 4,
+    icon: <IconList size={25} color={MainColor.white_gray} />,
+  },
+];

app/(application)/admin/event/[id]/[status]/index.tsx

@@ -0,0 +1,217 @@
+import {
+  ActionIcon,
+  AlertDefaultSystem,
+  BadgeCustom,
+  BaseBox,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconDot, IconList } from "@/components/_Icon/IconComponent";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
+import AdminButtonReview from "@/components/_ShareComponent/Admin/ButtonReview";
+import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import dayjs from "dayjs";
+import { router, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import React from "react";
+import QRCode from "react-native-qrcode-svg";
+
+export default function AdminEventDetail() {
+  const { id, status } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = React.useState(false);
+
+  const colorBadge = () => {
+    if (status === "publish") {
+      return MainColor.green;
+    } else if (status === "review") {
+      return MainColor.orange;
+    } else if (status === "reject") {
+      return MainColor.red;
+    } else {
+      return MainColor.placeholder;
+    }
+  };
+
+  const listData = [
+    {
+      label: "Pembuat Event",
+      value: `Bagas Banuna ${id}`,
+    },
+    {
+      label: "Judul Event",
+      value: `Event 123`,
+    },
+    {
+      label: "Status",
+      value: (
+        <BadgeCustom color={colorBadge()}>
+          {_.startCase(status as string)}
+        </BadgeCustom>
+      ),
+    },
+    {
+      label: "Lokasi",
+      value: "Lokasi Event",
+    },
+    {
+      label: "Tipe Acara",
+      value: "Tipe Acara",
+    },
+    {
+      label: "Mulai Event",
+      value: dayjs().format("DD/MM/YYYY HH:mm:ss"),
+    },
+    {
+      label: "Event Berakhir",
+      value: dayjs().add(3, "day").format("DD/MM/YYYY HH:mm:ss"),
+    },
+    {
+      label: "Deskripsi",
+      value: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+    },
+    // {
+    //   label: "Daftar Tipe Acara",
+    //   value: (
+    //     <>
+    //       <List.Item
+    //         title={<TextCustom>Pilihan 1</TextCustom>}
+    //         left={(props) => (
+    //           <List.Icon {...props} icon="circle" color={MainColor.yellow} />
+    //         )}
+    //       />
+    //       <List.Item
+    //         title={<TextCustom>Pilihan 2</TextCustom>}
+    //         left={(props) => (
+    //           <List.Icon {...props} icon="circle" color={MainColor.yellow} />
+    //         )}
+    //       />
+    //       <List.Item
+    //         title={<TextCustom>Pilihan 3</TextCustom>}
+    //         left={(props) => (
+    //           <List.Icon {...props} icon="circle" color={MainColor.yellow} />
+    //         )}
+    //       />
+    //       <List.Item
+    //         title={<TextCustom>Pilihan 4</TextCustom>}
+    //         left={(props) => (
+    //           <List.Icon {...props} icon="circle" color={MainColor.yellow} />
+    //         )}
+    //       />
+    //     </>
+    //   ),
+    // },
+  ];
+
+  const rightComponent = (
+    <ActionIcon
+      icon={<IconDot size={ICON_SIZE_BUTTON} />}
+      onPress={() => {
+        setOpenDrawer(true);
+      }}
+    />
+  );
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminBackButtonAntTitle
+            title={`Detail Data`}
+            rightComponent={
+              (status === "publish" || status === "riwayat") && rightComponent
+            }
+          />
+        }
+      >
+        <BaseBox>
+          <StackCustom>
+            {listData.map((item, i) => (
+              <GridDetail_4_8
+                key={i}
+                label={<TextCustom bold>{item.label}</TextCustom>}
+                value={<TextCustom>{item.value}</TextCustom>}
+              />
+            ))}
+          </StackCustom>
+
+          <Spacing />
+        </BaseBox>
+        {(status === "publish" || status === "riwayat") && (
+          <BaseBox>
+            <StackCustom style={{ alignItems: "center" }}>
+              <TextCustom bold>QR Code Event</TextCustom>
+              <QRCode
+                value="https://google.com"
+                size={200}
+                // logo={require("@/assets/images/logo-hipmi.png")}
+                // logoSize={70}
+                // logoBackgroundColor="transparent"
+                // logoBorderRadius={50}
+                // color="black"
+              />
+            </StackCustom>
+          </BaseBox>
+        )}
+
+        {status === "review" && (
+          <AdminButtonReview
+            onPublish={() => {
+              AlertDefaultSystem({
+                title: "Publish",
+                message: "Apakah anda yakin ingin mempublikasikan data ini?",
+                textLeft: "Batal",
+                textRight: "Ya",
+                onPressLeft: () => {
+                  router.back();
+                },
+                onPressRight: () => {
+                  router.back();
+                },
+              });
+            }}
+            onReject={() => {
+              router.push(`/admin/event/${id}/reject-input`);
+            }}
+          />
+        )}
+
+        {status === "reject" && (
+          <AdminButtonReject
+            title="Tambah Catatan"
+            onReject={() => {
+              router.push(`/admin/event/${id}/reject-input`);
+            }}
+          />
+        )}
+        <Spacing />
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              label: "Daftar Peserta",
+              icon: <IconList />,
+              path: `/admin/event/${id}/list-of-participants`,
+            },
+          ]}
+          onPressItem={(item) => {
+            setOpenDrawer(false);
+            router.push(item.path as any);
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

app/(application)/admin/event/[id]/list-of-participants.tsx

@@ -0,0 +1,42 @@
+import { BadgeCustom, BaseBox, Grid, TextCustom, ViewWrapper } from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { MainColor } from "@/constants/color-palet";
+
+export default function AdminEventListOfParticipants() {
+
+    const isPresent = ({id}: {id: number}) => {
+        const check = id % 3 * 3;
+        if (check === 0) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title="Daftar Peserta" />}
+      >
+        {Array.from({ length: 10 }).map((item, index) => (
+          <BaseBox key={index}>
+            <Grid>
+              <Grid.Col span={6}>
+                <TextCustom bold>Username {index + 1}</TextCustom>
+                <TextCustom>+6282123456789</TextCustom>
+              </Grid.Col>
+              <Grid.Col span={6} style={{ justifyContent: "center" }}>
+                <BadgeCustom
+                  style={{ alignSelf: "flex-end" }}
+                  color={isPresent({id: index}) ? MainColor.green : MainColor.red}
+                >
+                  {isPresent({id: index}) ? "Hadir" : "Tidak Hadir"}
+                </BadgeCustom>
+              </Grid.Col>
+            </Grid>
+          </BaseBox>
+        ))}
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/event/[id]/reject-input.tsx

@@ -0,0 +1,55 @@
+import {
+  AlertDefaultSystem,
+  BoxButtonOnFooter,
+  TextAreaCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function AdminEventRejectInput() {
+  const { id } = useLocalSearchParams();
+  const [value, setValue] = useState(id as string);
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <AdminButtonReject
+        title="Reject"
+        onReject={() =>
+          AlertDefaultSystem({
+            title: "Reject",
+            message: "Apakah anda yakin ingin menolak data ini?",
+            textLeft: "Batal",
+            textRight: "Ya",
+            onPressLeft: () => {
+              router.back();
+            },
+            onPressRight: () => {
+              console.log("value:", value);
+              router.replace(`/admin/event/reject/status`);
+            },
+          })
+        }
+      />
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <>
+      <ViewWrapper
+        footerComponent={buttonSubmit}
+        headerComponent={<AdminBackButtonAntTitle title="Masukan Alasan" />}
+      >
+        <TextAreaCustom
+          value={value}
+          onChangeText={setValue}
+          placeholder="Masukan alasan"
+          required
+          showCount
+          maxLength={1000}
+        />
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/event/[status]/status.tsx

@@ -0,0 +1,76 @@
+import {
+  ActionIcon,
+  BaseBox,
+  SearchInput,
+  Spacing,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
+import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { Octicons } from "@expo/vector-icons";
+import { router, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { Divider } from "react-native-paper";
+
+export default function AdminEventStatus() {
+  const { status } = useLocalSearchParams();
+  const rightComponent = (
+    <SearchInput
+      containerStyle={{ width: "100%", marginBottom: 0 }}
+      placeholder="Cari"
+    />
+  );
+  return (
+    <>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Event" />}>
+        <AdminComp_BoxTitle
+          title={`${_.startCase(status as string)}`}
+          rightComponent={rightComponent}
+        />
+
+        <BaseBox>
+          <AdminTitleTable
+            title1="Aksi"
+            title2="Username"
+            title3="Judul Event"
+          />
+          <Spacing />
+          <Divider />
+
+          {Array.from({ length: 10 }).map((_, index) => (
+            <AdminTableValue
+              key={index}
+              value1={
+                <ActionIcon
+                  icon={
+                    <Octicons
+                      name="eye"
+                      size={ICON_SIZE_BUTTON}
+                      color="black"
+                    />
+                  }
+                  onPress={() => {
+                    router.push(`/admin/event/${index}/${status}`);
+                  }}
+                />
+              }
+              value2={<TextCustom truncate={1}>Username username</TextCustom>}
+              value3={
+                <TextCustom truncate={2}>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Blanditiis asperiores quidem deleniti architecto eaque et
+                  nostrum, ad consequuntur eveniet quisquam quae voluptatum
+                  ducimus! Dolorem nobis modi officia debitis, beatae mollitia.
+                </TextCustom>
+              }
+            />
+          ))}
+        </BaseBox>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/event/index.tsx

@@ -0,0 +1,55 @@
+import { Spacing, StackCustom, ViewWrapper } from "@/components";
+import { IconArchive } from "@/components/_Icon";
+import {
+  IconList,
+  IconPublish,
+  IconReject,
+  IconReview,
+} from "@/components/_Icon/IconComponent";
+import AdminComp_BoxDashboard from "@/components/_ShareComponent/Admin/BoxDashboard";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { MainColor } from "@/constants/color-palet";
+
+export default function AdminVoting() {
+  return (
+    <>
+      <ViewWrapper>
+        <AdminTitlePage title="Event" />
+        <Spacing />
+        <StackCustom gap={"xs"}>
+          {listData.map((item, i) => (
+            <AdminComp_BoxDashboard key={i} item={item} />
+          ))}
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}
+
+const listData = [
+  {
+    label: "Publish",
+    value: 3,
+    icon: <IconPublish size={25} color={MainColor.green} />,
+  },
+  {
+    label: "Review",
+    value: 8,
+    icon: <IconReview size={25} color={MainColor.orange} />,
+  },
+  {
+    label: "Reject",
+    value: 4,
+    icon: <IconReject size={25} color={MainColor.red} />,
+  },
+  {
+    label: "Riwayat",
+    value: 6,
+    icon: <IconArchive size={25} color={MainColor.placeholder} />,
+  },
+  {
+    label: "Tipe Acara",
+    value: 7,
+    icon: <IconList size={25} color={MainColor.placeholder} />,
+  },
+];

app/(application)/admin/event/type-create.tsx

@@ -0,0 +1,27 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { useRouter } from "expo-router";
+
+export default function AdminEventTypeOfEventCreate() {
+  const router = useRouter();
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom onPress={() => router.back()}>Simpan</ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title="Tambah Tipe Acara" />}
+        footerComponent={buttonSubmit}
+      >
+        <TextInputCustom placeholder="Masukkan Tipe Acara" />
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/event/type-of-event.tsx

@@ -0,0 +1,104 @@
+import {
+  ActionIcon,
+  BaseBox,
+  CenterCustom,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconEdit } from "@/components/_Icon";
+import AdminActionIconPlus from "@/components/_ShareComponent/Admin/ActionIconPlus";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { router } from "expo-router";
+import { View } from "react-native";
+import { Divider } from "react-native-paper";
+
+export default function AdminEventTypeOfEvent() {
+  return (
+    <>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Event" />}>
+        <AdminComp_BoxTitle
+          title="Tipe Acara"
+          rightComponent={
+            <AdminActionIconPlus
+              onPress={() => {
+                router.push(`/admin/event/type-create`);
+              }}
+            />
+          }
+        />
+
+        <BaseBox>
+          <GridDetail_4_8
+            label={
+              <TextCustom bold align="center">
+                Aksi
+              </TextCustom>
+            }
+            value={<TextCustom bold>Tipe Acara</TextCustom>}
+          />
+          <Divider />
+          <Spacing />
+
+          <StackCustom>
+            {listData.map((item, index) => (
+              <View key={index}>
+                <GridDetail_4_8
+                  label={
+                    <CenterCustom>
+                      <ActionIcon
+                        icon={
+                          <IconEdit size={ICON_SIZE_BUTTON} color="black" />
+                        }
+                        onPress={() => {
+                          router.push(`/admin/event/type-update?id=${index}`);
+                        }}
+                      />
+                    </CenterCustom>
+                  }
+                  value={<TextCustom bold>{item.label}</TextCustom>}
+                />
+                <Divider />
+              </View>
+            ))}
+          </StackCustom>
+        </BaseBox>
+      </ViewWrapper>
+    </>
+  );
+}
+
+const listData = [
+  {
+    label: "Seminar",
+    value: "seminar",
+  },
+  {
+    label: "Workshop",
+    value: "workshop",
+  },
+  {
+    label: "Konferensi",
+    value: "konferensi",
+  },
+  {
+    label: "Lomba",
+    value: "lomba",
+  },
+  {
+    label: "Pameran",
+    value: "pameran",
+  },
+  {
+    label: "Pesta",
+    value: "pesta",
+  },
+  {
+    label: "Pertandingan",
+    value: "pertandingan",
+  },
+];

app/(application)/admin/event/type-update.tsx

@@ -0,0 +1,30 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { useLocalSearchParams, useRouter } from "expo-router";
+
+export default function AdminEventTypeOfEventUpdate() {
+  const { id } = useLocalSearchParams();
+  console.log("id >", id);
+
+  const router = useRouter();
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom onPress={() => router.back()}>Update</ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title="Ubah Tipe Acara" />}
+        footerComponent={buttonSubmit}
+      >
+        <TextInputCustom placeholder="Masukkan Tipe Acara" value="" />
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/forum/[id]/index.tsx

@@ -0,0 +1,203 @@
+import {
+  ActionIcon,
+  AlertDefaultSystem,
+  BadgeCustom,
+  BaseBox,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconDot, IconView } from "@/components/_Icon/IconComponent";
+import { IconTrash } from "@/components/_Icon/IconTrash";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
+import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
+import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { MainColor } from "@/constants/color-palet";
+import {
+  ICON_SIZE_BUTTON,
+  ICON_SIZE_MEDIUM,
+  ICON_SIZE_XLARGE,
+} from "@/constants/constans-value";
+import { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { useState } from "react";
+import { Divider } from "react-native-paper";
+import Toast from "react-native-toast-message";
+
+export default function AdminForumDetailPosting() {
+  const [openDrawerPage, setOpenDrawerPage] = useState(false);
+  const [openDrawerAction, setOpenDrawerAction] = useState(false);
+  const [id, setId] = useState<any>();
+
+  const handlerAction = (item: { value: string; path: string }) => {
+    if (item.value === "delete") {
+      AlertDefaultSystem({
+        title: "Hapus Posting",
+        message: "Apakah Anda yakin ingin menghapus posting ini?",
+        textLeft: "Batal",
+        textRight: "Hapus",
+        onPressRight: () => {
+          Toast.show({
+            type: "success",
+            text1: "Posting berhasil dihapus",
+          });
+        },
+      });
+    } else {
+      router.navigate(item.path as any);
+    }
+    setOpenDrawerAction(false);
+  };
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminBackButtonAntTitle
+            title="Detail Posting"
+            rightComponent={
+              <ActionIcon
+                icon={<IconDot size={16} color={MainColor.darkblue} />}
+                onPress={() => setOpenDrawerPage(true)}
+              />
+            }
+          />
+        }
+      >
+        <BaseBox>
+          <StackCustom gap={"sm"}>
+            {listDataAction.map((item, i) => (
+              <GridDetail_4_8
+                key={i}
+                label={<TextCustom bold>{item.label}</TextCustom>}
+                value={<TextCustom>{item.value}</TextCustom>}
+              />
+            ))}
+            <TextCustom bold>Posting</TextCustom>
+            <TextCustom>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Asperiores cupiditate nobis dignissimos explicabo quo unde dolorum
+              numquam eos ab laborum fugiat illo nam velit quibusdam, maxime
+              assumenda aut vero provident!
+            </TextCustom>
+          </StackCustom>
+        </BaseBox>
+
+        {/* <AdminComp_BoxTitle title="Komentar" rightComponent={rightComponent} /> */}
+        <BaseBox>
+          <AdminTitleTable title1="Aksi" title2="Username" title3="Komentar" />
+          <Spacing />
+          <Divider />
+          {Array.from({ length: 10 }).map((_, index) => (
+            <AdminTableValue
+              key={index}
+              value1={
+                <ActionIcon
+                  icon={
+                    <Ionicons
+                      name="ellipsis-vertical-outline"
+                      size={ICON_SIZE_BUTTON}
+                      color="black"
+                    />
+                  }
+                  onPress={() => {
+                    setOpenDrawerAction(true);
+                    setId(index + 1);
+                  }}
+                />
+              }
+              value2={<TextCustom truncate={1}>Username username</TextCustom>}
+              value3={
+                <TextCustom truncate={2}>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Blanditiis asperiores quidem deleniti architecto eaque et
+                  nostrum, ad consequuntur eveniet quisquam quae voluptatum
+                  ducimus! Dolorem nobis modi officia debitis, beatae mollitia.
+                </TextCustom>
+              }
+            />
+          ))}
+        </BaseBox>
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawerPage}
+        closeDrawer={() => setOpenDrawerPage(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: (
+                <Ionicons
+                  name="list"
+                  size={ICON_SIZE_XLARGE}
+                  color={MainColor.white}
+                />
+              ),
+              label: "Daftar Report Posting",
+              value: "detail",
+              path: `/admin/forum/${id}/list-report-posting`,
+            },
+          ]}
+          onPressItem={(item) => {
+            router.navigate(item.path as any);
+            setOpenDrawerPage(false);
+          }}
+        />
+      </DrawerCustom>
+
+      <DrawerCustom
+        isVisible={openDrawerAction}
+        closeDrawer={() => setOpenDrawerAction(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconView />,
+              label: "Detail Komentar",
+              value: "detail",
+              path: `admin/forum/${id}/list-report-comment`,
+            },
+            {
+              icon: (
+                <IconTrash size={ICON_SIZE_MEDIUM} color={MainColor.white} />
+              ),
+              label: "Hapus Komentar",
+              value: "delete",
+              path: "",
+              color: MainColor.red,
+            },
+          ]}
+          onPressItem={(item) => {
+            handlerAction(item as any);
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}
+
+const listDataAction = [
+  {
+    label: "Username",
+    value: "Username",
+  },
+  {
+    label: "Status",
+    value: <BadgeCustom color={MainColor.green}>Open</BadgeCustom>,
+  },
+  {
+    label: "Komentar",
+    value: "10",
+  },
+  {
+    label: "Total Report",
+    value: "1",
+  },
+];

app/(application)/admin/forum/[id]/list-report-comment.tsx

@@ -0,0 +1,168 @@
+import {
+  ActionIcon,
+  AlertDefaultSystem,
+  BaseBox,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconDot, IconView } from "@/components/_Icon/IconComponent";
+import { IconTrash } from "@/components/_Icon/IconTrash";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
+import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
+import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { router } from "expo-router";
+import { useState } from "react";
+import { Divider } from "react-native-paper";
+import Toast from "react-native-toast-message";
+
+export default function AdminForumReportComment() {
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [openDrawerAction, setOpenDrawerAction] = useState(false);
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminBackButtonAntTitle
+            title="Report Komentar"
+            rightComponent={
+              <ActionIcon
+                icon={<IconDot size={16} color={MainColor.darkblue} />}
+                onPress={() => setOpenDrawer(true)}
+              />
+            }
+          />
+        }
+      >
+        <BaseBox>
+          <StackCustom gap={"sm"}>
+            {listData.map((item, i) => (
+              <GridDetail_4_8
+                key={i}
+                label={<TextCustom bold>{item.label}</TextCustom>}
+                value={<TextCustom>{item.value}</TextCustom>}
+              />
+            ))}
+            <TextCustom bold>Posting</TextCustom>
+            <TextCustom>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Asperiores cupiditate nobis dignissimos explicabo quo unde dolorum
+              numquam eos ab laborum fugiat illo nam velit quibusdam, maxime
+              assumenda aut vero provident!
+            </TextCustom>
+          </StackCustom>
+        </BaseBox>
+
+        <AdminComp_BoxTitle title="Daftar Report Komentar" />
+
+        <BaseBox>
+          <AdminTitleTable
+            title1="Aksi"
+            title2="Username"
+            title3="Kategori Report"
+          />
+          <Spacing />
+          <Divider />
+          {Array.from({ length: 5 }).map((_, index) => (
+            <AdminTableValue
+              key={index}
+              value1={
+                <ActionIcon
+                  icon={<IconView size={ICON_SIZE_BUTTON} color="black" />}
+                  onPress={() => {
+                    setOpenDrawerAction(true);
+                  }}
+                />
+              }
+              value2={<TextCustom truncate={1}>Username username</TextCustom>}
+              value3={
+                <TextCustom truncate={2} align="center">
+                  SPAM
+                </TextCustom>
+              }
+            />
+          ))}
+        </BaseBox>
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconTrash />,
+              label: "Hapus Komentar",
+              value: "delete",
+              path: "",
+              color: MainColor.red,
+            },
+          ]}
+          onPressItem={(item) => {
+            AlertDefaultSystem({
+              title: "Hapus Komentar",
+              message: "Apakah Anda yakin ingin menghapus komentar ini?",
+              textLeft: "Batal",
+              textRight: "Hapus",
+              onPressRight: () => {
+                setOpenDrawer(false);
+                Toast.show({
+                  type: "success",
+                  text1: "Komentar berhasil dihapus",
+                });
+                router.back();
+              },
+            });
+          }}
+        />
+      </DrawerCustom>
+
+      <DrawerCustom
+        isVisible={openDrawerAction}
+        closeDrawer={() => setOpenDrawerAction(false)}
+        height={"auto"}
+      >
+        {listDataAction.map((item, i) => (
+          <GridDetail_4_8
+            key={i}
+            label={<TextCustom bold>{item.label}</TextCustom>}
+            value={<TextCustom>{item.value}</TextCustom>}
+          />
+        ))}
+      </DrawerCustom>
+    </>
+  );
+}
+
+const listData = [
+  {
+    label: "Username",
+    value: "Username",
+  },
+];
+
+const listDataAction = [
+  {
+    label: "Username",
+    value: "Riyusa",
+  },
+  {
+    label: "Kategori Report",
+    value: "SPAM",
+  },
+  {
+    label: "Deskripsi",
+    value:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis asperiores quidem deleniti architecto eaque et nostrum, ad consequuntur eveniet quisquam quae voluptatum ducimus! Dolorem nobis modi officia debitis, beatae mollitia.",
+  },
+];

app/(application)/admin/forum/[id]/list-report-posting.tsx

@@ -0,0 +1,170 @@
+import {
+  ActionIcon,
+  AlertDefaultSystem,
+  BadgeCustom,
+  BaseBox,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconDot, IconView } from "@/components/_Icon/IconComponent";
+import { IconTrash } from "@/components/_Icon/IconTrash";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
+import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
+import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { router } from "expo-router";
+import { useState } from "react";
+import { Divider } from "react-native-paper";
+import Toast from "react-native-toast-message";
+
+export default function AdminForumReportPosting() {
+  const [openDrawerPage, setOpenDrawerPage] = useState(false);
+  const [openDrawerAction, setOpenDrawerAction] = useState(false);
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminBackButtonAntTitle
+            title="Report Posting"
+            rightComponent={
+              <ActionIcon
+                icon={<IconDot size={16} color={MainColor.darkblue} />}
+                onPress={() => setOpenDrawerPage(true)}
+              />
+            }
+          />
+        }
+      >
+        <BaseBox>
+          <StackCustom gap={"sm"}>
+            {listData.map((item, i) => (
+              <GridDetail_4_8
+                key={i}
+                label={<TextCustom bold>{item.label}</TextCustom>}
+                value={<TextCustom>{item.value}</TextCustom>}
+              />
+            ))}
+            <TextCustom bold>Posting</TextCustom>
+            <TextCustom>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Asperiores cupiditate nobis dignissimos explicabo quo unde dolorum
+              numquam eos ab laborum fugiat illo nam velit quibusdam, maxime
+              assumenda aut vero provident!
+            </TextCustom>
+          </StackCustom>
+        </BaseBox>
+
+        <AdminComp_BoxTitle title="Daftar Report Posting" />
+        <BaseBox>
+          <AdminTitleTable
+            title1="Aksi"
+            title2="Username"
+            title3="Kategori Report"
+          />
+          <Spacing />
+          <Divider />
+          {Array.from({ length: 5 }).map((_, index) => (
+            <AdminTableValue
+              key={index}
+              value1={
+                <ActionIcon
+                  icon={<IconView size={ICON_SIZE_BUTTON} color="black" />}
+                  onPress={() => setOpenDrawerAction(true)}
+                />
+              }
+              value2={<TextCustom truncate={1}>Username username</TextCustom>}
+              value3={
+                <TextCustom truncate={2} align="center">
+                  SPAM
+                </TextCustom>
+              }
+            />
+          ))}
+        </BaseBox>
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawerPage}
+        closeDrawer={() => setOpenDrawerPage(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconTrash />,
+              label: "Hapus Posting",
+              value: "delete",
+              path: "",
+              color: MainColor.red,
+            },
+          ]}
+          onPressItem={(item) => {
+            AlertDefaultSystem({
+              title: "Hapus Posting",
+              message: "Apakah Anda yakin ingin menghapus posting ini?",
+              textLeft: "Batal",
+              textRight: "Hapus",
+              onPressRight: () => {
+                setOpenDrawerPage(false);
+                Toast.show({
+                  type: "success",
+                  text1: "Posting berhasil dihapus",
+                });
+                router.back()
+              },
+            });
+          }}
+        />
+      </DrawerCustom>
+
+      <DrawerCustom
+        isVisible={openDrawerAction}
+        closeDrawer={() => setOpenDrawerAction(false)}
+        height={"auto"}
+      >
+        {listDataAction.map((item, i) => (
+          <GridDetail_4_8
+            key={i}
+            label={<TextCustom bold>{item.label}</TextCustom>}
+            value={<TextCustom>{item.value}</TextCustom>}
+          />
+        ))}
+      </DrawerCustom>
+    </>
+  );
+}
+
+const listData = [
+  {
+    label: "Username",
+    value: "Username",
+  },
+  {
+    label: "Status",
+    value: <BadgeCustom color={MainColor.green}>Open</BadgeCustom>,
+  },
+];
+
+const listDataAction = [
+  {
+    label: "Username",
+    value: "Firman Nusantara",
+  },
+  {
+    label: "Kategori Report",
+    value: "SPAM",
+  },
+  {
+    label: "Deskripsi",
+    value:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis asperiores quidem deleniti architecto eaque et nostrum, ad consequuntur eveniet quisquam quae voluptatum ducimus! Dolorem nobis modi officia debitis, beatae mollitia.",
+  },
+];

app/(application)/admin/forum/index.tsx

@@ -0,0 +1,42 @@
+import { Spacing, StackCustom, ViewWrapper } from "@/components";
+import {
+    IconPublish,
+    IconReport,
+} from "@/components/_Icon/IconComponent";
+import AdminComp_BoxDashboard from "@/components/_ShareComponent/Admin/BoxDashboard";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { MainColor } from "@/constants/color-palet";
+
+export default function AdminForum() {
+  return (
+    <>
+      <ViewWrapper>
+        <AdminTitlePage title="Forum" />
+        <Spacing />
+        <StackCustom gap={"xs"}>
+          {listData.map((item, i) => (
+            <AdminComp_BoxDashboard key={i} item={item} />
+          ))}
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}
+
+const listData = [
+  {
+    label: "Posting",
+    value: 4,
+    icon: <IconPublish size={25} color={MainColor.green} />,
+  },
+  {
+    label: "Report Posting",
+    value: 7,
+    icon: <IconReport size={25} color={MainColor.orange} />,
+  },
+  {
+    label: "Report Comment",
+    value: 5,
+    icon: <IconReport size={25} color={MainColor.red} />,
+  },
+];

app/(application)/admin/forum/posting.tsx

@@ -0,0 +1,61 @@
+import {
+  ActionIcon,
+  BaseBox,
+  SearchInput,
+  Spacing,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconView } from "@/components/_Icon/IconComponent";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
+import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { router } from "expo-router";
+import React from "react";
+import { Divider } from "react-native-paper";
+
+export default function AdminForumPosting() {
+  const rightComponent = (
+    <SearchInput
+      containerStyle={{ width: "100%", marginBottom: 0 }}
+      placeholder="Cari"
+    />
+  );
+
+  return (
+    <>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Forum" />}>
+        <AdminComp_BoxTitle title={"Posting"} rightComponent={rightComponent} />
+        <BaseBox>
+          <AdminTitleTable title1="Aksi" title2="Username" title3="Postingan" />
+          <Spacing />
+          <Divider />
+          {Array.from({ length: 10 }).map((_, index) => (
+            <AdminTableValue
+              key={index}
+              value1={
+                <ActionIcon
+                  icon={<IconView size={ICON_SIZE_BUTTON} color="black" />}
+                  onPress={() => {
+                    router.push(`/admin/forum/${index + 1}`);
+                  }}
+                />
+              }
+              value2={<TextCustom truncate={1}>Username username</TextCustom>}
+              value3={
+                <TextCustom truncate={2}>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Blanditiis asperiores quidem deleniti architecto eaque et
+                  nostrum, ad consequuntur eveniet quisquam quae voluptatum
+                  ducimus! Dolorem nobis modi officia debitis, beatae mollitia.
+                </TextCustom>
+              }
+            />
+          ))}
+        </BaseBox>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/forum/report-comment.tsx

@@ -0,0 +1,65 @@
+import {
+  ActionIcon,
+  BaseBox,
+  Divider,
+  SearchInput,
+  Spacing,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconView } from "@/components/_Icon/IconComponent";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
+import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { router } from "expo-router";
+
+export default function AdminForumReportComment() {
+
+  const rightComponent = (
+    <SearchInput
+      containerStyle={{ width: "100%", marginBottom: 0 }}
+      placeholder="Cari Komentar"
+    />
+  );
+
+  return (
+    <>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Forum" />}>
+        <AdminComp_BoxTitle
+          title="Report Comment"
+          rightComponent={rightComponent}
+        />
+
+        <BaseBox>
+          <AdminTitleTable title1="Aksi" title2="Pelapor" title3="Jenis Laporan" />
+          <Spacing />
+          <Divider />
+          {Array.from({ length: 10 }).map((_, index) => (
+            <AdminTableValue
+              key={index}
+              value1={
+                <ActionIcon
+                  icon={
+                    <IconView size={ICON_SIZE_BUTTON} color={MainColor.black} />
+                  }
+                  onPress={() => {
+                    router.push(`/admin/forum/${index + 1}/list-report-comment`);
+                  }}
+                />
+              }
+              value2={<TextCustom truncate={1}>Username username</TextCustom>}
+              value3={
+                <TextCustom truncate={2} align="center">
+                 SPAM
+                </TextCustom>
+              }
+            />
+          ))}
+        </BaseBox>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/forum/report-posting.tsx

@@ -0,0 +1,73 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  ActionIcon,
+  BaseBox,
+  Divider,
+  SearchInput,
+  Spacing,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconView } from "@/components/_Icon/IconComponent";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
+import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { router } from "expo-router";
+import { useState } from "react";
+
+export default function AdminForumReportPosting() {
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [id, setId] = useState<any>();
+
+  const rightComponent = (
+    <SearchInput
+      containerStyle={{ width: "100%", marginBottom: 0 }}
+      placeholder="Cari"
+    />
+  );
+
+  return (
+    <>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Forum" />}>
+        <AdminComp_BoxTitle
+          title="Report Posting"
+          rightComponent={rightComponent}
+        />
+
+        <BaseBox>
+          <AdminTitleTable title1="Aksi" title2="Pelapor" title3="Postingan" />
+          <Spacing />
+          <Divider />
+          {Array.from({ length: 10 }).map((_, index) => (
+            <AdminTableValue
+              key={index}
+              value1={
+                <ActionIcon
+                  icon={
+                    <IconView size={ICON_SIZE_BUTTON} color={MainColor.black} />
+                  }
+                  onPress={() => {
+                    router.push(`/admin/forum/${id}/list-report-posting`);
+                  }}
+                />
+              }
+              value2={<TextCustom truncate={1}>Username username</TextCustom>}
+              value3={
+                <TextCustom truncate={2} align="center">
+                  Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+                  Omnis laborum doloremque eius velit voluptate corrupti vel,
+                  provident quaerat tempore animi sed accusamus amet.
+                  Temporibus, praesentium? Rem voluptatum nesciunt voluptas
+                  repellat.
+                </TextCustom>
+              }
+            />
+          ))}
+        </BaseBox>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/investment/index.tsx

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

app/(application)/admin/investment/publish.tsx

@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function AdminInvestmentPublish() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Admin Investment Publish</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/investment/reject.tsx

@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function AdminInvestmentReject() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Admin Investment Reject</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/investment/review.tsx

@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function AdminInvestmentReview() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Admin Investment Review</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/job/[id]/[status]/index.tsx

@@ -0,0 +1,129 @@
+import {
+  AlertDefaultSystem,
+  BadgeCustom,
+  BaseBox,
+  DummyLandscapeImage,
+  Grid,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
+import AdminButtonReview from "@/components/_ShareComponent/Admin/ButtonReview";
+import { MainColor } from "@/constants/color-palet";
+import { router, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+
+export default function AdminJobDetailStatus() {
+  const { id, status } = useLocalSearchParams();
+
+  const colorBadge = () => {
+    if (status === "publish") {
+      return MainColor.green;
+    } else if (status === "review") {
+      return MainColor.orange;
+    } else if (status === "reject") {
+      return MainColor.red;
+    }
+  };
+
+  const listData = [
+    {
+      label: "Username",
+      value: "Bagas Banuna",
+    },
+    {
+      label: "Judul",
+      value: `Judul Proyek: ${id}Lorem ipsum dolor sit amet consectetur adipisicing elit.`,
+    },
+    {
+      label: "Status",
+      value: (
+        <BadgeCustom color={colorBadge()}>
+          {_.startCase(status as string)}
+        </BadgeCustom>
+      ),
+    },
+    {
+      label: "Konten",
+      value: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+    },
+    {
+      label: "Deskripsi",
+      value: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+    },
+    // {
+    //   label: "Poster",
+    //   value: (
+    //     <ButtonCustom
+    //       href={`/(application)/()/${id}`}
+    //     >
+    //       Lihat Poster
+    //     </ButtonCustom>
+    //   ),
+    // },
+  ];
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title={`Detail Data`} />}
+      >
+        <BaseBox>
+          <StackCustom>
+            {listData.map((item, i) => (
+              <Grid key={i}>
+                <Grid.Col
+                  span={4}
+                  style={{ justifyContent: "center", paddingRight: 10 }}
+                >
+                  <TextCustom bold>{item.label}</TextCustom>
+                </Grid.Col>
+                <Grid.Col span={8} style={{ justifyContent: "center" }}>
+                  <TextCustom>{item.value}</TextCustom>
+                </Grid.Col>
+              </Grid>
+            ))}
+
+            <TextCustom bold>Poster</TextCustom>
+
+            <DummyLandscapeImage />
+          </StackCustom>
+        </BaseBox>
+
+        {status === "review" && (
+          <AdminButtonReview
+            onPublish={() => {
+              AlertDefaultSystem({
+                title: "Publish",
+                message: "Apakah anda yakin ingin mempublikasikan data ini?",
+                textLeft: "Batal",
+                textRight: "Ya",
+                onPressLeft: () => {
+                  router.back();
+                },
+                onPressRight: () => {
+                  router.back();
+                },
+              });
+            }}
+            onReject={() => {
+              router.push(`/admin/job/${id}/reject-input`);
+            }}
+          />
+        )}
+        {status === "reject" && (
+          <AdminButtonReject
+            title="Tambah Catatan"
+            onReject={() => {
+              router.push(`/admin/job/${id}/reject-input`);
+            }}
+          />
+        )}
+        <Spacing />
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/job/[id]/reject-input.tsx

@@ -0,0 +1,55 @@
+import {
+  AlertDefaultSystem,
+  BoxButtonOnFooter,
+  TextAreaCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function AdminJobRejectInput() {
+  const { id } = useLocalSearchParams();
+  const [value, setValue] = useState(id as string);
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <AdminButtonReject
+        title="Reject"
+        onReject={() =>
+          AlertDefaultSystem({
+            title: "Reject",
+            message: "Apakah anda yakin ingin menolak data ini?",
+            textLeft: "Batal",
+            textRight: "Ya",
+            onPressLeft: () => {
+              router.back();
+            },
+            onPressRight: () => {
+              console.log("value:", value);
+              router.replace(`/admin/job/reject/status`);
+            },
+          })
+        }
+      />
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <>
+      <ViewWrapper
+        footerComponent={buttonSubmit}
+        headerComponent={<AdminBackButtonAntTitle title="Masukan Alasan" />}
+      >
+        <TextAreaCustom
+          value={value}
+          onChangeText={setValue}
+          placeholder="Masukan alasan"
+          required
+          showCount
+          maxLength={1000}
+        />
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/job/[status]/status.tsx

@@ -0,0 +1,76 @@
+import {
+  ActionIcon,
+  BaseBox,
+  SearchInput,
+  Spacing,
+  TextCustom,
+  ViewWrapper
+} from "@/components";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
+import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { Octicons } from "@expo/vector-icons";
+import { router, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { Divider } from "react-native-paper";
+
+export default function AdminJobStatus() {
+  const { status } = useLocalSearchParams();
+  const rightComponent = (
+    <SearchInput
+      containerStyle={{ width: "100%", marginBottom: 0 }}
+      placeholder="Cari"
+    />
+  );
+  return (
+    <>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Job Vacancy" />}>
+        <AdminComp_BoxTitle
+          title={`${_.startCase(status as string)}`}
+          rightComponent={rightComponent}
+        />
+
+        <BaseBox>
+          <AdminTitleTable
+            title1="Aksi"
+            title2="Username"
+            title3="Judul Pekerjaan"
+          />
+          <Spacing />
+          <Divider />
+
+          {Array.from({ length: 10 }).map((_, index) => (
+            <AdminTableValue
+              key={index}
+              value1={
+                <ActionIcon
+                  icon={
+                    <Octicons
+                      name="eye"
+                      size={ICON_SIZE_BUTTON}
+                      color="black"
+                    />
+                  }
+                  onPress={() => {
+                    router.push(`/admin/job/${index}/${status}`);
+                  }}
+                />
+              }
+              value2={<TextCustom truncate={1}>Username username</TextCustom>}
+              value3={
+                <TextCustom truncate={2}>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Blanditiis asperiores quidem deleniti architecto eaque et
+                  nostrum, ad consequuntur eveniet quisquam quae voluptatum
+                  ducimus! Dolorem nobis modi officia debitis, beatae mollitia.
+                </TextCustom>
+              }
+            />
+          ))}
+        </BaseBox>
+      </ViewWrapper>
+    </>
+  );
+}