Admin Job:

Add:
- admin/job/[status]/
- dmin/job/[id]/

### 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,206 @@
+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 ================== */}
+      </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,96 @@
+import {
+  ActionIcon,
+  ScrollableCustom,
+  StackCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+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 { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { useState } from "react";
+import { View } from "react-native";
+
+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={
+            <View style={{ flexDirection: "row" }}>
+              <ActionIcon
+                icon={
+                  <Ionicons name="add" size={ICON_SIZE_SMALL} color="black" />
+                }
+                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");
+                  }
+                }}
+              />
+            </View>
+          }
+        />
+        {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/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,110 @@
+import {
+  BadgeCustom,
+  BaseBox,
+  ButtonCustom,
+  DummyLandscapeImage,
+  Grid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { MainColor } from "@/constants/color-palet";
+import { 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" && (
+          <Grid>
+            <Grid.Col span={6} style={{ paddingRight: 10 }}>
+              <ButtonCustom backgroundColor={MainColor.green} textColor="white">
+                Publish
+              </ButtonCustom>
+            </Grid.Col>
+            <Grid.Col span={6} style={{ paddingLeft: 10 }}>
+              <ButtonCustom backgroundColor={MainColor.red} textColor="white">
+                Reject
+              </ButtonCustom>
+            </Grid.Col>
+          </Grid>
+        )}
+      </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>
+    </>
+  );
+}

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

@@ -0,0 +1,45 @@
+import { Spacing, 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, FontAwesome6 } from "@expo/vector-icons";
+
+export default function AdminJob() {
+  return (
+    <>
+      <ViewWrapper>
+        <AdminTitlePage title="Job Vacancy" />
+        <Spacing />
+        <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: "Review",
+    value: 7,
+    icon: (
+      <FontAwesome6
+        name="person-circle-check"
+        size={25}
+        color={MainColor.orange}
+      />
+    ),
+  },
+  {
+    label: "Reject",
+    value: 5,
+    icon: <FontAwesome name="warning" size={25} color={MainColor.red} />,
+  },
+];

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

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

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

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

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

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

app/(application)/admin/maps.tsx

@@ -0,0 +1,11 @@
+import { MapCustom, ViewWrapper } from "@/components";
+
+export default function AdminMaps() {
+  return (
+    <>
+      <ViewWrapper>
+        <MapCustom height={"100%"} />
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -0,0 +1,20 @@
+import { BackButton, TextCustom, ViewWrapper } from "@/components";
+import { Stack } from "expo-router";
+
+export default function AdminNotification() {
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Admin Notifikasi",
+          headerLeft: () => <BackButton />,
+          headerRight: () => <></>,
+        }}
+      />
+
+      <ViewWrapper>
+        <TextCustom>Notification</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/user-access.tsx

@@ -0,0 +1,117 @@
+import {
+    ButtonCustom,
+    Divider,
+    Grid,
+    SearchInput,
+    StackCustom,
+    TextCustom,
+    ViewWrapper
+} from "@/components";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
+import { Ionicons } from "@expo/vector-icons";
+
+export default function AdminUserAccess() {
+  const rightComponent = () => {
+    return (
+      <>
+        <SearchInput
+          containerStyle={{ width: "100%", marginBottom: 0 }}
+          placeholder="Cari User"
+        />
+      </>
+    );
+  };
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminComp_BoxTitle
+            title="User Access"
+            rightComponent={rightComponent()}
+          />
+        }
+      >
+        <Grid>
+          <Grid.Col span={4} style={{ alignItems: "center" }}>
+            <TextCustom bold>Aksi</TextCustom>
+          </Grid.Col>
+          <Grid.Col span={4} style={{ alignItems: "center" }}>
+            <TextCustom bold>Username</TextCustom>
+          </Grid.Col>
+          <Grid.Col span={4} style={{ alignItems: "center" }}>
+            <TextCustom bold>Nomor</TextCustom>
+          </Grid.Col>
+        </Grid>
+
+        <Divider />
+
+        <StackCustom>
+          {Array.from({ length: 10 }).map((_, index) => (
+            <Grid key={index}>
+              <Grid.Col
+                span={4}
+                style={{
+                  alignItems: "center",
+                  paddingLeft: 5,
+                  paddingRight: 5,
+                }}
+              >
+                <TextCustom bold>
+                  <ButtonCustom
+                    iconLeft={
+                      <Ionicons
+                        name={
+                          index % 2 === 0
+                            ? "checkmark-outline"
+                            : "close-circle-outline"
+                        }
+                        size={ICON_SIZE_MEDIUM}
+                        color="black"
+                      />
+                    }
+                    onPress={() => {}}
+                    backgroundColor={
+                      index % 2 === 0 ? MainColor.green : MainColor.red
+                    }
+                  >
+                    <TextCustom size={"small"} color={"black"}>
+                      {index % 2 === 0 ? "Berikan Akses" : "Hapus Akses"}
+                    </TextCustom>
+                  </ButtonCustom>
+                </TextCustom>
+              </Grid.Col>
+              <Grid.Col
+                span={4}
+                style={{
+                  alignItems: "center",
+                  justifyContent: "center",
+                  paddingLeft: 5,
+                  paddingRight: 5,
+                }}
+              >
+                <TextCustom bold truncate>
+                  Useraname
+                </TextCustom>
+              </Grid.Col>
+              <Grid.Col
+                span={4}
+                style={{
+                  alignItems: "center",
+                  justifyContent: "center",
+                  paddingLeft: 5,
+                  paddingRight: 5,
+                }}
+              >
+                <TextCustom bold truncate>
+                  08123456789
+                </TextCustom>
+              </Grid.Col>
+            </Grid>
+          ))}
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/_layout.tsx

@@ -14,7 +14,10 @@ export default function RootLayout() {
             headerTitleAlign: "center",
           }}
         >
-          <Stack.Screen name="index" options={{ title: "" }} />
+          <Stack.Screen
+            name="index"
+            options={{ title: "", headerBackVisible: false }}
+          />
           <Stack.Screen name="+not-found" options={{ title: "" }} />
           <Stack.Screen
             name="verification"

bun.lock

@@ -11,6 +11,7 @@
         "@react-navigation/elements": "^2.3.8",
         "@react-navigation/native": "^7.1.6",
         "@react-navigation/native-stack": "^7.3.21",
+        "@types/lodash": "^4.17.20",
         "@types/react-native-vector-icons": "^6.4.18",
         "dayjs": "^1.11.13",
         "expo": "53.0.17",
@@ -31,6 +32,7 @@
         "expo-symbols": "~0.4.5",
         "expo-system-ui": "~5.0.10",
         "expo-web-browser": "~14.2.0",
+        "lodash": "^4.17.21",
         "react": "19.0.0",
         "react-dom": "19.0.0",
         "react-native": "0.79.5",
@@ -451,6 +453,8 @@
 
     "@types/json5": ["@types/json5@0.0.29", "", {}, "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="],
 
+    "@types/lodash": ["@types/lodash@4.17.20", "", {}, "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA=="],
+
     "@types/node": ["@types/node@24.0.3", "", { "dependencies": { "undici-types": "~7.8.0" } }, "sha512-R4I/kzCYAdRLzfiCabn9hxWfbuHS573x+r0dJMkkzThEa7pbrcDWK+9zu3e7aBOouf+rQAciqPFMnxwr0aWgKg=="],
 
     "@types/react": ["@types/react@19.0.14", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-ixLZ7zG7j1fM0DijL9hDArwhwcCb4vqmePgwtV0GfnkHRSCUEv4LvzarcTdhoqgyMznUx/EhoTUv31CKZzkQlw=="],
@@ -1159,6 +1163,8 @@
 
     "locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],
 
+    "lodash": ["lodash@4.17.21", "", {}, "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="],
+
     "lodash.debounce": ["lodash.debounce@4.0.8", "", {}, "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="],
 
     "lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="],

components/ActionIcon/ActionIcon.tsx

@@ -0,0 +1,59 @@
+import { MainColor } from "@/constants/color-palet";
+import { Href, router } from "expo-router";
+import { DimensionValue, TouchableOpacity } from "react-native";
+
+type SizeType = "xs" | "sm" | "md" | "lg" | "xl" | number | string | undefined;
+
+export default function ActionIcon({
+  href,
+  onPress,
+  icon,
+  size = "md",
+}: {
+  href?: Href;
+  onPress?: () => void;
+  icon: React.ReactNode;
+  size?: SizeType;
+}) {
+  const sizeMap = {
+    xs: 22,
+    sm: 26,
+    md: 30,
+    lg: 34,
+    xl: 38,
+  };
+
+  const getSize = (size: SizeType): DimensionValue => {
+    if (!size) return sizeMap.md; // Default to 'md' if size is undefined
+    if (typeof size === 'string' && size in sizeMap) {
+      return sizeMap[size as keyof typeof sizeMap];
+    }
+    return size as DimensionValue;
+  };
+
+  const iconSize = getSize(size);
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.7}
+      style={{
+        backgroundColor: MainColor.yellow,
+        padding: 5,
+        borderRadius: 50,
+        alignItems: "center",
+        justifyContent: "center",
+        width: iconSize,
+        height: iconSize,
+      }}
+      onPress={() => {
+        if (href) {
+          router.push(href);
+        } else {
+          onPress?.();
+        }
+      }}
+    >
+      {icon}
+    </TouchableOpacity>
+  );
+}

components/Badge/BadgeCustom.tsx

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

components/Box/InformationBox.tsx

@@ -3,11 +3,12 @@ import { Ionicons } from "@expo/vector-icons";
 import Grid from "../Grid/GridCustom";
 import TextCustom from "../Text/TextCustom";
 import BaseBox from "./BaseBox";
+import React from "react";
 
-export default function InformationBox({ text }: { text: string }) {
+export default function InformationBox({ text }: { text: React.ReactNode | string }) {
   return (
     <>
-      <BaseBox>
+      <BaseBox paddingTop={5} paddingBottom={5}>
         <Grid>
           <Grid.Col
             span={2}

components/Button/ButtonCenteredOnly.tsx

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

components/Checkbox/CheckboxCustom.tsx

@@ -1,4 +1,4 @@
-import { AccentColor } from "@/constants/color-palet";
+import { AccentColor, MainColor } from "@/constants/color-palet";
 import { MaterialIcons } from "@expo/vector-icons"; // Bisa diganti dengan ikon lain
 import React, { useContext } from "react";
 import { Animated, Text, TouchableOpacity, View } from "react-native";
@@ -17,7 +17,7 @@ const CheckboxGroupContext =
 // Tipe props
 // Tambahkan prop baru: groupValueKey
 interface CheckboxProps {
-  label?: string;
+  label?: string | React.ReactNode;
   description?: string;
   error?: string;
   value?: boolean; // controlled value (untuk standalone)
@@ -39,7 +39,7 @@ const CheckboxCustom: React.FC<CheckboxProps> = ({
   onChange,
   disabled: propDisabled,
   size = 20,
-  color = AccentColor.softblue,
+  color = MainColor.yellow,
   style,
   component,
   valueKey,

components/Container/CircleContainer.tsx

@@ -1,22 +1,28 @@
 import { MainColor } from "@/constants/color-palet";
 import React from "react";
-import { StyleSheet, TextInput, View } from "react-native";
+import { StyleProp, StyleSheet, TextInput, View, ViewStyle } from "react-native";
 
 interface CircularInputProps {
-  value: string | number;
-  onChange?: (value: string) => void;
+  value?: string | number
+  onChange?: (value: string | number) => void;
+  icon?: React.ReactNode;
+  style?: StyleProp<ViewStyle>
 }
 
-const CircularInput: React.FC<CircularInputProps> = ({ value, onChange }) => {
+const CircularInput: React.FC<CircularInputProps> = ({ value, onChange, icon, style }) => {
   return (
-    <View style={styles.circleContainer}>
-      <TextInput
-        value={String(value)}
-        onChangeText={onChange}
-        style={styles.input}
-        keyboardType="numeric"
-        maxLength={2} // Batasan maksimal karakter
-      />
+    <View style={[styles.circleContainer, style]}>
+      {icon ? (
+        icon
+      ) : (
+        <TextInput
+          value={String(value)}
+          onChangeText={onChange}
+          style={styles.input}
+          keyboardType="numeric"
+          maxLength={2} // Batasan maksimal karakter
+        />
+      )}
     </View>
   );
 };

components/Divider/Divider.tsx

@@ -2,8 +2,8 @@ import { AccentColor } from "@/constants/color-palet";
 import { View } from "react-native";
 
 export default function Divider({
-    color = AccentColor.blue,
-    size = 1,
+    color = AccentColor.white,
+    size = 0.5,
     marginTop= 12,
     marginBottom= 12, 
 }: {

components/Drawer/DrawerAdmin.tsx

@@ -0,0 +1,157 @@
+import React, { useEffect, useRef } from "react";
+import {
+  Animated,
+  Dimensions,
+  InteractionManager,
+  PanResponder,
+  StyleSheet,
+} from "react-native";
+
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+// Lebar drawer (bisa di-pass sebagai prop)
+const DRAWER_WIDTH = Dimensions.get("window").width * 0.8; // 80% lebar layar
+
+interface DrawerAdminProps {
+  children?: React.ReactNode;
+  width?: number; // lebar drawer
+  isVisible: boolean;
+  onClose: () => void; // ganti nama dari closeDrawer agar lebih jelas
+}
+
+export default function DrawerAdmin({
+  children,
+  width = DRAWER_WIDTH,
+  isVisible,
+  onClose,
+}: DrawerAdminProps) {
+  const drawerAnim = useRef(new Animated.Value(-width)).current; // mulai dari kiri (tersembunyi)
+
+  // Efek untuk handle animasi saat isVisible berubah
+  useEffect(() => {
+    if (isVisible) {
+      Animated.timing(drawerAnim, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      Animated.timing(drawerAnim, {
+        toValue: -width,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [isVisible, width, onClose, drawerAnim]);
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (_, gestureState) => {
+        return Math.abs(gestureState.dx) > 10; // deteksi gesek horizontal
+      },
+      onPanResponderMove: (_, gestureState) => {
+        let newAnim = gestureState.dx; // geser ke kanan = dx positif → drawerAnim negatif
+        newAnim = Math.max(-width, Math.min(0, newAnim)); // batas antara -width dan 0
+        drawerAnim.setValue(newAnim);
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        if (gestureState.dx > 100) {
+          // gesek kencang ke kiri → tutup
+          InteractionManager.runAfterInteractions(() => {
+            onClose();
+          });
+        } else {
+          // kembali ke posisi terbuka penuh
+          Animated.spring(drawerAnim, {
+            toValue: 0,
+            useNativeDriver: true,
+          }).start();
+        }
+      },
+    })
+  ).current;
+
+  if (!isVisible) return null;
+
+  return (
+    <>
+      {/* Overlay Gelap */}
+      <Animated.View
+        style={[
+          styles.overlay,
+          {
+            opacity: drawerAnim.interpolate({
+              inputRange: [-width, 0],
+              outputRange: [0, 0.6],
+              extrapolate: "clamp",
+            }),
+          },
+        ]}
+        onTouchStart={() => {
+          InteractionManager.runAfterInteractions(() => {
+            onClose();
+          });
+        }}
+      />
+
+      {/* Left Drawer */}
+      <Animated.View
+        style={[
+          styles.drawer,
+          {
+            width,
+            transform: [{ translateX: drawerAnim }],
+          },
+        ]}
+        {...panResponder.panHandlers}
+      >
+        {/* Handle Bar (opsional) */}
+        <SafeAreaView
+          edges={["top", "bottom"]}
+          style={{
+            flex: 1,
+          }}
+        >
+          {children}
+          {/* <Spacing/> */}
+        </SafeAreaView>
+      </Animated.View>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "black",
+    zIndex: 998,
+  },
+  drawer: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    backgroundColor: AccentColor.darkblue,
+    // borderRadius: 20, // opsional
+    shadowColor: "#000",
+    shadowOffset: { width: 2, height: 0 },
+    shadowOpacity: 0.2,
+    shadowRadius: 5,
+    elevation: 5,
+    zIndex: 999,
+    padding: 20,
+  },
+  handleBar: {
+    width: 10,
+    height: 5,
+    backgroundColor: MainColor.yellow,
+    borderRadius: 5,
+    alignSelf: "flex-start",
+    marginBottom: 20,
+  },
+});

components/Drawer/MenuDrawerDynamicGird.tsx

@@ -7,6 +7,7 @@ import { Href } from "expo-router";
 type IMenuDrawerItemProps = {
     icon: React.ReactNode;
     label: string;
+    value?: string;
     path?: Href;
     color?: string;
 }

components/Drawer/NavbarMenu.tsx

@@ -0,0 +1,276 @@
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { Ionicons } from "@expo/vector-icons";
+import { router, usePathname } from "expo-router";
+import React, { useEffect, useRef, useState } from "react";
+import {
+  Animated,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+
+export interface NavbarItem {
+  label: string;
+  icon?: keyof typeof Ionicons.glyphMap;
+  color?: string;
+  link?: string;
+  links?: {
+    label: string;
+    link: string;
+  }[];
+  initiallyOpened?: boolean;
+}
+
+interface NavbarMenuProps {
+  items: NavbarItem[];
+  onClose?: () => void;
+}
+
+export default function NavbarMenu({ items, onClose }: NavbarMenuProps) {
+  const pathname = usePathname();
+  const [activeLink, setActiveLink] = useState<string | null>(null);
+  const [openKeys, setOpenKeys] = useState<string[]>([]); // Untuk kontrol dropdown
+
+  // Normalisasi path: hapus trailing slash
+  const normalizePath = (path: string) => path.replace(/\/+$/, "");
+  const normalizedPathname = pathname ? normalizePath(pathname) : "";
+
+  // Set activeLink saat pathname berubah
+  useEffect(() => {
+    if (normalizedPathname) {
+      setActiveLink(normalizedPathname);
+    }
+  }, [normalizedPathname]);
+
+  // Toggle dropdown
+  const toggleOpen = (label: string) => {
+    setOpenKeys((prev) =>
+      prev.includes(label) ? prev.filter((key) => key !== label) : [label]
+    );
+  };
+
+  return (
+    <View
+      style={{
+        //  flex: 1,
+        //  backgroundColor: MainColor.black,
+        marginBottom: 20, 
+      }}
+    >
+      <ScrollView
+        contentContainerStyle={{
+          paddingVertical: 10, // Opsional: tambahkan padding
+        }}
+        //  showsVerticalScrollIndicator={false} // Opsional: sembunyikan indikator scroll
+      >
+        {items.map((item) => (
+          <MenuItem
+            key={item.label}
+            item={item}
+            onClose={onClose}
+            activeLink={activeLink}
+            setActiveLink={setActiveLink}
+            isOpen={openKeys.includes(item.label)}
+            toggleOpen={() => toggleOpen(item.label)}
+          />
+        ))}
+      </ScrollView>
+    </View>
+  );
+}
+
+// Komponen Item Menu
+function MenuItem({
+  item,
+  onClose,
+  activeLink,
+  setActiveLink,
+  isOpen,
+  toggleOpen,
+}: {
+  item: NavbarItem;
+  onClose?: () => void;
+  activeLink: string | null;
+  setActiveLink: (link: string | null) => void;
+  isOpen: boolean;
+  toggleOpen: () => void;
+}) {
+  const isActive = activeLink === item.link;
+  const animatedHeight = useRef(new Animated.Value(0)).current;
+
+  // Animasi saat isOpen berubah
+  React.useEffect(() => {
+    Animated.timing(animatedHeight, {
+      toValue: isOpen ? (item.links ? item.links.length * 40 : 0) : 0,
+      duration: 200,
+      useNativeDriver: false,
+    }).start();
+  }, [isOpen, item.links, animatedHeight]);
+
+  // Jika ada submenu
+  if (item.links && item.links.length > 0) {
+    return (
+      <View>
+        {/* Parent Item */}
+        <TouchableOpacity style={styles.parentItem} onPress={toggleOpen}>
+          <Ionicons
+            name={item.icon}
+            size={16}
+            color={MainColor.white}
+            style={styles.icon}
+          />
+          <Text style={styles.parentText}>{item.label}</Text>
+          <Ionicons
+            name={isOpen ? "chevron-up" : "chevron-down"}
+            size={16}
+            color={MainColor.white}
+          />
+        </TouchableOpacity>
+
+        {/* Submenu (Animated) */}
+        <Animated.View
+          style={[
+            styles.submenu,
+            // {
+            //   backgroundColor: "red",
+            // },
+            {
+              height: animatedHeight,
+              opacity: animatedHeight.interpolate({
+                inputRange: [0, item.links.length * 40],
+                outputRange: [0, 1],
+                extrapolate: "clamp",
+              }),
+            },
+          ]}
+        >
+          {item.links.map((subItem, index) => {
+            const isSubActive = activeLink === subItem.link;
+            return (
+              <TouchableOpacity
+                key={index}
+                style={[styles.subItem, isSubActive && styles.subItemActive]}
+                onPress={() => {
+                  setActiveLink(subItem.link);
+                  onClose?.();
+                  router.push(subItem.link as any);
+                }}
+              >
+                <Ionicons
+                  name="radio-button-on-outline"
+                  size={16}
+                  color={isSubActive ? MainColor.yellow : MainColor.white}
+                  style={styles.icon}
+                />
+                <Text
+                  style={[
+                    styles.subText,
+                    isSubActive && { color: MainColor.yellow },
+                  ]}
+                >
+                  {subItem.label}
+                </Text>
+              </TouchableOpacity>
+            );
+          })}
+        </Animated.View>
+      </View>
+    );
+  }
+
+  // Menu tanpa submenu
+  return (
+    <TouchableOpacity
+      style={[styles.singleItem, isActive && styles.singleItemActive]}
+      onPress={() => {
+        setActiveLink(item.link || null);
+        onClose?.();
+        router.push(item.link as any);
+      }}
+    >
+      <Ionicons
+        name={item.icon}
+        size={16}
+        color={isActive ? MainColor.yellow : MainColor.white}
+        style={styles.icon}
+      />
+      <Text
+        style={[
+          styles.singleText,
+          { color: isActive ? MainColor.yellow : MainColor.white },
+        ]}
+      >
+        {item.label}
+      </Text>
+    </TouchableOpacity>
+  );
+}
+// Styles
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 5,
+  },
+  parentItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 10,
+    // backgroundColor: AccentColor.darkblue,
+    borderRadius: 8,
+    marginBottom: 5,
+    justifyContent: "space-between",
+  },
+  parentText: {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: "500",
+    marginLeft: 10,
+    color: MainColor.white,
+  },
+  singleItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 10,
+    // backgroundColor: AccentColor.darkblue,
+    borderRadius: 8,
+    marginBottom: 5,
+  },
+  singleItemActive: {
+    backgroundColor: AccentColor.blue,
+  },
+  singleText: {
+    fontSize: 16,
+    fontWeight: "500",
+    marginLeft: 10,
+    color: MainColor.white,
+  },
+  icon: {
+    width: 24,
+    textAlign: "center",
+    paddingRight: 10,
+  },
+  submenu: {
+    overflow: "hidden",
+    marginLeft: 30,
+    marginTop: 5,
+  },
+  subItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+    borderRadius: 6,
+    marginBottom: 4,
+  },
+  subItemActive: {
+    backgroundColor: AccentColor.blue,
+  },
+  subText: {
+    color: MainColor.white,
+    fontSize: 16,
+    fontWeight: "500",
+  },
+});

components/Drawer/SidebarMenu.tsx

@@ -0,0 +1,279 @@
+import React, { useEffect, useRef, useState } from "react";
+import {
+  Animated,
+  Dimensions,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { Ionicons } from "@expo/vector-icons";
+import { router, usePathname } from "expo-router";
+
+// Lebar sidebar
+const SIDEBAR_WIDTH = Dimensions.get("window").width * 0.8;
+
+interface SidebarItem {
+  label: string;
+  icon?: keyof typeof Ionicons.glyphMap;
+  color?: string;
+  link?: string;
+  links?: {
+    label: string;
+    link: string;
+  }[];
+  initiallyOpened?: boolean;
+}
+
+interface SidebarMenuProps {
+  items: SidebarItem[];
+  onClose?: () => void;
+}
+
+export default function SidebarMenu({ items, onClose }: SidebarMenuProps) {
+  const pathname = usePathname();
+  const [activeLink, setActiveLink] = useState<string | null>(null);
+  const [openKeys, setOpenKeys] = useState<string[]>([]); // Untuk kontrol dropdown
+
+  // Normalisasi path: hapus trailing slash
+  const normalizePath = (path: string) => path.replace(/\/+$/, "");
+  const normalizedPathname = pathname ? normalizePath(pathname) : "";
+
+  // Set activeLink saat pathname berubah
+  useEffect(() => {
+    if (normalizedPathname) {
+      setActiveLink(normalizedPathname);
+    }
+  }, [normalizedPathname]);
+
+  // Auto-buka dropdown jika submenu aktif
+  useEffect(() => {
+    const activeItem = items.find((item) =>
+      item.links?.some((sub) => sub.link === normalizedPathname)
+    );
+    if (activeItem && !openKeys.includes(activeItem.label)) {
+      setOpenKeys([activeItem.label]);
+    }
+  }, [normalizedPathname, items, openKeys]);
+
+  // Toggle dropdown
+  const toggleOpen = (label: string) => {
+    setOpenKeys((prev) =>
+      prev.includes(label) ? prev.filter((key) => key !== label) : [label]
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      {items.map((item) => (
+        <MenuItem
+          key={item.label}
+          item={item}
+          onClose={onClose}
+          activeLink={activeLink}
+          setActiveLink={setActiveLink}
+          isOpen={openKeys.includes(item.label)}
+          toggleOpen={() => toggleOpen(item.label)}
+        />
+      ))}
+    </View>
+  );
+}
+
+// Komponen Item Menu
+function MenuItem({
+  item,
+  onClose,
+  activeLink,
+  setActiveLink,
+  isOpen,
+  toggleOpen,
+}: {
+  item: SidebarItem;
+  onClose?: () => void;
+  activeLink: string | null;
+  setActiveLink: (link: string | null) => void;
+  isOpen: boolean;
+  toggleOpen: () => void;
+}) {
+  const animatedHeight = useRef(new Animated.Value(0)).current;
+
+  // Animasi saat isOpen berubah
+  React.useEffect(() => {
+    Animated.timing(animatedHeight, {
+      toValue: isOpen ? (item.links ? item.links.length * 40 : 0) : 0,
+      duration: 200,
+      useNativeDriver: false,
+    }).start();
+  }, [isOpen, item.links]);
+
+  // Cek apakah menu ini aktif
+  const isActive = activeLink === item.link;
+
+  // Cek apakah ada submenu aktif
+  const hasActiveSubItem = item.links?.some((sub) => sub.link === activeLink);
+
+  // Jika ada submenu
+  if (item.links && item.links.length > 0) {
+    return (
+      <View>
+        {/* Parent Item */}
+        <TouchableOpacity style={styles.parentItem} onPress={toggleOpen}>
+          <Ionicons
+            name={item.icon}
+            size={20}
+            color={MainColor.white}
+            style={styles.icon}
+          />
+          <Text style={styles.parentText}>{item.label}</Text>
+          <Ionicons
+            name={isOpen ? "chevron-up" : "chevron-down"}
+            size={16}
+            color={MainColor.white}
+          />
+        </TouchableOpacity>
+
+        {/* Submenu (Animated) */}
+        <Animated.View
+          style={[
+            styles.submenu,
+            {
+              height: animatedHeight,
+              opacity: animatedHeight.interpolate({
+                inputRange: [0, item.links.length * 40],
+                outputRange: [0, 1],
+                extrapolate: "clamp",
+              }),
+            },
+          ]}
+        >
+          {item.links.map((subItem, index) => {
+            const isSubActive = activeLink === subItem.link;
+            return (
+              <TouchableOpacity
+                key={index}
+                style={[styles.subItem, isSubActive && styles.subItemActive]}
+                onPress={() => {
+                  setActiveLink(subItem.link);
+                  onClose?.();
+                  router.push(subItem.link as any);
+                }}
+              >
+                <Ionicons
+                  name="caret-forward-sharp"
+                  size={16}
+                  color={isSubActive ? MainColor.yellow : MainColor.white}
+                  style={styles.icon}
+                />
+                <Text
+                  style={[
+                    styles.subText,
+                    isSubActive && { color: MainColor.yellow },
+                  ]}
+                >
+                  {subItem.label}
+                </Text>
+              </TouchableOpacity>
+            );
+          })}
+        </Animated.View>
+      </View>
+    );
+  }
+
+  // Menu tanpa submenu
+  return (
+    <TouchableOpacity
+      style={[styles.singleItem, isActive && styles.singleItemActive]}
+      onPress={() => {
+        setActiveLink(item.link || null);
+        onClose?.();
+        router.push(item.link as any);
+      }}
+    >
+      <Ionicons
+        name={item.icon}
+        size={20}
+        color={isActive ? MainColor.yellow : MainColor.white}
+        style={styles.icon}
+      />
+      <Text
+        style={[
+          styles.singleText,
+          { color: isActive ? MainColor.yellow : MainColor.white },
+        ]}
+      >
+        {item.label}
+      </Text>
+    </TouchableOpacity>
+  );
+}
+
+// Styles
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 20,
+  },
+  parentItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 10,
+    backgroundColor: AccentColor.darkblue,
+    borderRadius: 8,
+    marginBottom: 5,
+    justifyContent: "space-between",
+  },
+  parentText: {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: "500",
+    marginLeft: 10,
+    color: MainColor.white,
+  },
+  singleItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 10,
+    backgroundColor: AccentColor.darkblue,
+    borderRadius: 8,
+    marginBottom: 5,
+  },
+  singleItemActive: {
+    backgroundColor: AccentColor.blue,
+  },
+  singleText: {
+    fontSize: 16,
+    fontWeight: "500",
+    marginLeft: 10,
+    color: MainColor.white,
+  },
+  icon: {
+    width: 24,
+    textAlign: "center",
+    paddingRight: 10,
+  },
+  submenu: {
+    overflow: "hidden",
+    marginLeft: 30,
+    marginTop: 5,
+  },
+  subItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+    borderRadius: 6,
+    marginBottom: 4,
+  },
+  subItemActive: {
+    backgroundColor: AccentColor.blue,
+  },
+  subText: {
+    color: MainColor.white,
+    fontSize: 14,
+  },
+});

components/Grid/GridCustom.tsx

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