Donation

Add:
- lib/dummy-data/donasi
- donation/(tabs)/
- donation/create-story.tsx

Fix:
- app/(application)/(user)/_layout.tsx
- app/(application)/(user)/crowdfunding/index.tsx
- app/(application)/(user)/donation/create.tsx
- screens/Authentication/LoginView.tsx

## No Issue

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

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

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

@@ -1,6 +1,7 @@
 import { BackButton } from "@/components";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { HeaderStyles } from "@/styles/header-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
@@ -147,9 +148,254 @@ export default function UserLayout() {
           }}
         />
 
-
         {/* ========== End Collaboration Section ========= */}
 
+        {/* ========== Voting Section ========= */}
+        <Stack.Screen
+          name="voting/create"
+          options={{
+            title: "Tambah Voting",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="voting/(tabs)"
+          options={{
+            title: "Voting",
+            headerLeft: () => <BackButton path="/home" />,
+          }}
+        />
+        <Stack.Screen
+          name="voting/[id]/edit"
+          options={{
+            title: "Edit Voting",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="voting/[id]/list-of-contributor"
+          options={{
+            title: "Daftar Kontributor",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        {/* ========== End Voting Section ========= */}
+
+        {/* ========== Crowdfunding Section ========= */}
+        <Stack.Screen
+          name="crowdfunding/index"
+          options={{
+            title: "Crowdfunding",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        {/* ========== End Crowdfunding Section ========= */}
+
+        {/* ========== Investment Section ========= */}
+        <Stack.Screen
+          name="investment/(tabs)"
+          options={{
+            title: "Investasi",
+            headerLeft: () => <BackButton path="/crowdfunding" />,
+          }}
+        />
+        <Stack.Screen
+          name="investment/create"
+          options={{
+            title: "Tambah Investasi",
+            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="/home" />,
+          }}
+        />
+
+        <Stack.Screen
+          name="donation/create"
+          options={{
+            title: "Tambah Donasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/create-story"
+          options={{
+            title: "Tambah Donasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        {/* ========== End Donation Section ========= */}
+
+        {/* ========== Job Section ========= */}
+        <Stack.Screen
+          name="job/create"
+          options={{
+            title: "Tambah Job",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="job/(tabs)"
+          options={{
+            title: "Job Vacancy",
+            headerLeft: () => <BackButton path="/home" />,
+          }}
+        />
+        <Stack.Screen
+          name="job/[id]/index"
+          options={{
+            title: "Detail Job",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="job/[id]/edit"
+          options={{
+            title: "Edit Job",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        {/* ========== End Job Section ========= */}
+
         {/* ========== Forum Section ========= */}
         <Stack.Screen
           name="forum/create"

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

@@ -1,3 +1,4 @@
+import { IconHome } from "@/components/_Icon";
 import { TabsStyles } from "@/styles/tabs-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { Tabs } from "expo-router";
@@ -9,9 +10,7 @@ export default function CollaborationTabsLayout() {
         name="index"
         options={{
           title: "Beranda",
-          tabBarIcon: ({ color }) => (
-            <Ionicons size={20} name="home" color={color} />
-          ),
+          tabBarIcon: ({ color }) => <IconHome color={color} />,
         }}
       />
       <Tabs.Screen

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

@@ -0,0 +1,68 @@
+import {
+  BaseBox,
+  Grid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { Feather } from "@expo/vector-icons";
+import { Image } from "expo-image";
+
+export default function Crowdfunding() {
+  const listPage = [
+    {
+      title: "Investasi",
+      desc: "Buat investasi dan jual beli saham lebih mudah dengan pengguna lain.",
+      path: "investment/(tabs)",
+    },
+    {
+      title: "Donasi",
+      desc: "Berbagi info untuk berdonasi lebih luas dan lebih efisien.",
+      path: "donation/(tabs)",
+    },
+  ];
+
+  return (
+    <ViewWrapper>
+      <StackCustom>
+        <Image
+          source={require("@/assets/images/constants/crowd-hipmi.png")}
+          contentFit="cover"
+          transition={1000}
+          style={{
+            width: "100%",
+            height: 200,
+            borderRadius: 10,
+          }}
+        />
+
+        {listPage.map((item, index) => (
+          <BaseBox key={index} paddingTop={10} paddingBottom={10} href={item.path as any} marginBottom={0}>
+            <Grid>
+              <Grid.Col span={10}>
+               <StackCustom gap={"xs"}>
+               <TextCustom bold size="large">
+                  {item.title}
+                </TextCustom>
+                <TextCustom>{item.desc}</TextCustom>
+               </StackCustom>
+              </Grid.Col>
+              <Grid.Col
+                span={2}
+                style={{ alignItems: "flex-end", justifyContent: "center" }}
+              >
+                <Feather
+                  name="chevron-right"
+                  size={ICON_SIZE_SMALL}
+                  color={MainColor.white}
+                />
+              </Grid.Col>
+            </Grid>
+          </BaseBox>
+        ))}
+      </StackCustom>
+    </ViewWrapper>
+  );
+}

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,70 @@
+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>
+      <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"
+        />
+
+        <SelectCustom
+          data={dummyDonasiKategori.map((item) => ({
+            label: item.label,
+            value: item.value,
+          }))}
+          onChange={(value) => console.log(value)}
+          label="Pilih Kategori Donasi"
+          placeholder="Pilih Kategori Donasi"
+          required
+        />
+
+        <SelectCustom
+          data={dummyDonasiDurasi.map((item) => ({
+            label: item.label,
+            value: item.value,
+          }))}
+          onChange={(value) => console.log(value)}
+          label="Pilih Durasi Donasi"
+          placeholder="Pilih Durasi Donasi"
+          required
+        />
+
+        <LandscapeFrameUploaded />
+        <ButtonCenteredOnly onPress={() => {
+          router.push("/(application)/(image)/take-picture/123")
+        }} icon="upload">
+          Upload
+        </ButtonCenteredOnly>
+        <Spacing />
+        <ButtonCustom onPress={() => {
+          router.push("/donation/create-story")
+        }}>Selanjutnya</ButtonCustom>
+      </StackCustom>
+      <Spacing />
+    </ViewWrapper>
+  );
+}

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

@@ -1,49 +1,43 @@
+import {
+  IconContribution,
+  IconHistory,
+  IconHome,
+  IconStatus,
+} from "@/components/_Icon";
 import { TabsStyles } from "@/styles/tabs-styles";
-import { FontAwesome5, Ionicons } from "@expo/vector-icons";
 import { Tabs } from "expo-router";
 
 export default function EventTabsLayout() {
   return (
-    <Tabs
-      screenOptions={TabsStyles}
-    >
+    <Tabs screenOptions={TabsStyles}>
       <Tabs.Screen
         name="index"
         options={{
           title: "Beranda",
-          tabBarIcon: ({ color }) => (
-            <Ionicons size={20} name="home" color={color} />
-          ),
+          tabBarIcon: ({ color }) => <IconHome color={color} />,
         }}
       />
       <Tabs.Screen
         name="status"
         options={{
           title: "Status",
-          tabBarIcon: ({ color }) => (
-            <Ionicons size={20} name="list" color={color} />
-          ),
+          tabBarIcon: ({ color }) => <IconStatus color={color} />,
         }}
       />
       <Tabs.Screen
         name="contribution"
         options={{
           title: "Kontribusi",
-          tabBarIcon: ({ color }) => (
-            <Ionicons size={20} name="extension-puzzle" color={color} />
-          ),
+          tabBarIcon: ({ color }) => <IconContribution color={color} />,
         }}
       />
       <Tabs.Screen
         name="history"
         options={{
           title: "Riwayat",
-          tabBarIcon: ({ color }) => (
-            <FontAwesome5 size={20} name="history" color={color} />
-          ),
+          tabBarIcon: ({ color }) => <IconHistory color={color} />,
         }}
       />
     </Tabs>
   );
 }
-

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

@@ -73,9 +73,9 @@ export default function EventDetailStatus() {
         height={250}
       >
         <MenuDrawerDynamicGrid
-          data={menuDrawerDraftEvent({ id: id as string })}
+          data={menuDrawerDraftEvent({ id: id as string }) as any}
           columns={4}
-          onPressItem={handlePress}
+          onPressItem={handlePress as any}
         />
       </DrawerCustom>
 

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

@@ -3,16 +3,14 @@ import {
   AvatarCustom,
   BackButton,
   DrawerCustom,
-  TextInputCustom,
+  SearchInput,
   ViewWrapper,
 } from "@/components";
 import FloatingButton from "@/components/Button/FloatingButton";
 import { MainColor } from "@/constants/color-palet";
-import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
 import { listDummyDiscussionForum } from "@/screens/Forum/list-data-dummy";
 import Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
-import { Ionicons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
 import { useState } from "react";
 
@@ -34,20 +32,7 @@ export default function Forum() {
       />
 
       <ViewWrapper
-        headerComponent={
-          <TextInputCustom
-            iconLeft={
-              <Ionicons
-                name="search-outline"
-                size={ICON_SIZE_SMALL}
-                color={MainColor.placeholder}
-              />
-            }
-            placeholder="Cari topik forum..."
-            borderRadius={50}
-            containerStyle={{ marginBottom: 0 }}
-          />
-        }
+        headerComponent={<SearchInput placeholder="Cari topik diskusi" />}
         floatingButton={
           <FloatingButton
             onPress={() =>

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

@@ -0,0 +1,59 @@
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { TabsStyles } from "@/styles/tabs-styles";
+import { Feather, FontAwesome6, Ionicons } from "@expo/vector-icons";
+import { Tabs } from "expo-router";
+
+export default function InvestmentTabsLayout() {
+  return (
+    <Tabs screenOptions={TabsStyles}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Bursa",
+          tabBarIcon: ({ color }) => (
+            <Ionicons
+              name="bar-chart-outline"
+              color={color}
+              size={ICON_SIZE_SMALL}
+            />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="portofolio"
+        options={{
+          title: "Portofolio",
+          tabBarIcon: ({ color }) => (
+            <Feather name="pie-chart" color={color} size={ICON_SIZE_SMALL} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="my-holding"
+        options={{
+          title: "Saham Saya",
+          tabBarIcon: ({ color }) => (
+            <FontAwesome6
+              name="hand-holding-dollar"
+              color={color}
+              size={ICON_SIZE_SMALL}
+            />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="transaction"
+        options={{
+          title: "Transaksi",
+          tabBarIcon: ({ color }) => (
+            <FontAwesome6
+              name="money-bill-transfer"
+              color={color}
+              size={ICON_SIZE_SMALL}
+            />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}

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

@@ -0,0 +1,81 @@
+import {
+  BaseBox,
+  FloatingButton,
+  Grid,
+  ProgressCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import dayjs from "dayjs";
+import { Image } from "expo-image";
+import { router } from "expo-router";
+import { View } from "react-native";
+
+export default function InvestmentBursa() {
+  return (
+    <ViewWrapper
+      hideFooter
+      floatingButton={
+        <FloatingButton onPress={() => router.push("/investment/create")} />
+      }
+    >
+      {Array.from({ length: 10 }).map((_, index) => (
+        <BaseBox key={index} paddingTop={7} paddingBottom={7} href={`/investment/${index}`}>
+          <Grid>
+            <Grid.Col span={5}>
+              <Image
+                source={DUMMY_IMAGE.background}
+                style={{ width: "auto", height: 100, borderRadius: 10 }}
+              />
+            </Grid.Col>
+            <Grid.Col span={1}>
+              <View />
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <StackCustom>
+                <TextCustom truncate={2}>
+                  Title here : 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>
+                <ProgressCustom value={index % 5 * 20} size="lg" />
+                <TextCustom>
+                  Sisa waktu: {dayjs().diff(dayjs(), "day")} hari
+                </TextCustom>
+              </StackCustom>
+            </Grid.Col>
+          </Grid>
+        </BaseBox>
+      ))}
+    </ViewWrapper>
+  );
+}
+
+
+//   <View style={{ padding: 20, gap: 16 }}>
+//     <TextCustom>Progress 70%</TextCustom>
+//     <ProgressCustom value={70} color="primary" size="md" />
+
+//     <TextCustom>Success Progress</TextCustom>
+//     <ProgressCustom value={40} color="success" size="lg" />
+
+//     <TextCustom>Warning Progress (small)</TextCustom>
+//     <ProgressCustom value={90} color="warning" size="sm" />
+
+//     <TextCustom>Error Indeterminate</TextCustom>
+//     <ProgressCustom value={null} color="error" size="md" />
+
+//     <TextCustom>Custom Radius</TextCustom>
+//     <ProgressCustom value={60} color="info" size="xl" radius={4} />
+
+//     <ProgressCustom value={70} color="primary" size="lg" />
+
+//     <ProgressCustom value={45} color="success" size="md" label="Halfway!" />
+
+//     <ProgressCustom value={90} color="warning" size="lg" showLabel={false} />
+
+//     <ProgressCustom value={null} color="error" size="sm" label="Loading..." />
+//   </View>;

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

@@ -0,0 +1,50 @@
+import {
+  BaseBox,
+  Grid,
+  ProgressCustom,
+  Spacing,
+  StackCustom,
+  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} onPress={() => router.push(`/investment/${index}/(my-holding)/holding-${index}`)}>
+          <Grid>
+            <Grid.Col span={6}>
+              <StackCustom gap={"xs"}>
+                <TextCustom truncate={2}>
+                  Title here : 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 height={5} />
+                <TextCustom size="small">Rp. 7.500.000</TextCustom>
+                <TextCustom size="small">300 Lembar</TextCustom>
+              </StackCustom>
+            </Grid.Col>
+            <Grid.Col span={1}>
+              <View />
+            </Grid.Col>
+            <Grid.Col
+              span={5}
+              style={{
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <ProgressCustom value={(index % 5) * 20} size="lg" />
+            </Grid.Col>
+          </Grid>
+        </BaseBox>
+      ))}
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,39 @@
+import { ScrollableCustom, ViewWrapper } from "@/components";
+import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
+import Investment_StatusBox from "@/screens/Invesment/StatusBox";
+import { useState } from "react";
+
+export default function InvestmentPortofolio() {
+  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 headerComponent={scrollComponent} hideFooter>
+      {Array.from({ length: 10 }).map((_, index) => (
+        <Investment_StatusBox
+          key={index}
+          id={index.toString()}
+          status={activeCategory as string}
+          href={`/investment/${index}/${activeCategory}/detail`}
+        />
+      ))}
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,81 @@
+import {
+  BadgeCustom,
+  BaseBox,
+  Grid,
+  StackCustom,
+  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>
+      {randomStatusData.map((item, i) => (
+        <BaseBox
+          key={i}
+          paddingTop={7}
+          paddingBottom={7}
+          onPress={() => {
+            handlePress(item.value);
+          }}
+        >
+          <Grid>
+            <Grid.Col span={6}>
+              <StackCustom gap={"xs"}>
+                <TextCustom truncate>
+                  Title Investment: Lorem ipsum dolor sit amet consectetur
+                  adipisicing elit. Am culpa excepturi deleniti soluta animi
+                  porro amet ducimus.
+                </TextCustom>
+                <TextCustom color="gray" size="small">
+                  {dayjs().format("DD/MM/YYYY")}
+                </TextCustom>
+              </StackCustom>
+            </Grid.Col>
+            <Grid.Col span={1}>
+              <View />
+            </Grid.Col>
+            <Grid.Col span={5} style={{ alignItems: "flex-end" }}>
+              <StackCustom gap={"xs"}>
+                <TextCustom bold truncate>
+                  Rp. 7.500.000
+                </TextCustom>
+                <BadgeCustom
+                  variant="light"
+                  color={item.color}
+                  style={GStyles.alignSelfFlexEnd}
+                >
+                  {item.label}
+                </BadgeCustom>
+              </StackCustom>
+            </Grid.Col>
+          </Grid>
+        </BaseBox>
+      ))}
+    </ViewWrapper>
+  );
+}

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 transaksimu
+            </TextCustom>
+            <ActivityIndicator size="large" color={MainColor.yellow} />
+          </StackCustom>
+        </BaseBox>
+
+        <BaseBox>
+          <Grid>
+            <Grid.Col span={10} style={{justifyContent: 'center'}}>
+              <TextCustom size="small">
+                Hubungi admin jika tidak kunjung di proses! Klik pada logo
+                Whatsapp ini.
+              </TextCustom>
+            </Grid.Col>
+            <Grid.Col span={2} style={{alignItems: "flex-end"}}>
+              <Ionicons
+                name="logo-whatsapp"
+                size={50}
+                color={MainColor.green}
+              />
+            </Grid.Col>
+          </Grid>
+        </BaseBox>
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -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)/investment/create.tsx

@@ -0,0 +1,197 @@
+import {
+    BaseBox,
+    ButtonCenteredOnly,
+    ButtonCustom,
+    CenterCustom,
+    InformationBox,
+    LandscapeFrameUploaded,
+    SelectCustom,
+    Spacing,
+    StackCustom,
+    TextInputCustom,
+    ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+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 { FontAwesome5 } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { useState } from "react";
+
+export default function InvestmentCreate() {
+  const [data, setData] = useState({
+    title: "",
+    targetDana: 0,
+    hargaPerLembar: 0,
+    totalLembar: 0,
+    rasioKeuntungan: 0,
+    pencarianInvestor: "",
+    periodeDeviden: "",
+    pembagianDeviden: "",
+  });
+
+//   const [coba, setCoba] = useState(""); 
+  return (
+    <ViewWrapper>
+      <StackCustom gap={"xs"}>
+        {/* <View style={GStyles.inputContainerInput}>
+          <TextInput
+            style={{
+              ...GStyles.inputText,
+            }}
+            onChangeText={(value) => setCoba(value)}
+            value={coba}
+            keyboardType="decimal-pad"
+          />
+        </View> */}
+
+        <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." />
+
+        <BaseBox>
+          <CenterCustom>
+            <FontAwesome5
+              name="file-pdf"
+              size={30}
+              color={MainColor.disabled}
+            />
+          </CenterCustom>
+        </BaseBox>
+        <ButtonCenteredOnly
+          icon="upload"
+          onPress={() => router.push("/take-picture/1")}
+        >
+          Upload File
+        </ButtonCenteredOnly>
+        <Spacing />
+
+        <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)/job/(tabs)/_layout.tsx

@@ -0,0 +1,34 @@
+import { IconHome, IconStatus } from "@/components/_Icon";
+import { TabsStyles } from "@/styles/tabs-styles";
+import { Ionicons } from "@expo/vector-icons";
+import { Tabs } from "expo-router";
+
+export default function JobTabsLayout() {
+  return (
+    <Tabs screenOptions={TabsStyles}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Beranda",
+          tabBarIcon: ({ color }) => <IconHome color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="status"
+        options={{
+          title: "Status",
+          tabBarIcon: ({ color }) => <IconStatus color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="archive"
+        options={{
+          title: "Arsip",
+          tabBarIcon: ({ color }) => (
+            <Ionicons size={20} name="archive" color={color} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}

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

@@ -0,0 +1,16 @@
+import { BaseBox, TextCustom, ViewWrapper } from "@/components";
+import { jobDataDummy } from "@/screens/Job/listDataDummy";
+
+export default function JobArchive() {
+  return (
+    <ViewWrapper hideFooter>
+      {jobDataDummy.map((e, i) => (
+        <BaseBox key={i} paddingTop={20} paddingBottom={20}>
+          <TextCustom align="center" bold truncate size="large">
+            {e.posisi}
+          </TextCustom>
+        </BaseBox>
+      ))}
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,34 @@
+import {
+    AvatarUsernameAndOtherComponent,
+    BoxWithHeaderSection,
+    FloatingButton,
+    SearchInput,
+    Spacing,
+    TextCustom,
+    ViewWrapper
+} from "@/components";
+import { jobDataDummy } from "@/screens/Job/listDataDummy";
+import { router } from "expo-router";
+
+export default function JobBeranda() {
+  return (
+    <ViewWrapper
+      hideFooter
+      floatingButton={
+        <FloatingButton onPress={() => router.push("/job/create")} />
+      }
+      headerComponent={<SearchInput placeholder="Cari pekerjaan" />}
+    >
+      {jobDataDummy.map((item, index) => (
+        <BoxWithHeaderSection key={index} onPress={() => router.push(`/job/${item.id}`)}>
+          <AvatarUsernameAndOtherComponent avatarHref={`/profile/${item.id}`} />
+          <Spacing />
+          <TextCustom truncate={2} align="center" bold size="large">
+            {item.posisi}
+          </TextCustom>
+          <Spacing />
+        </BoxWithHeaderSection>
+      ))}
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,50 @@
+import {
+    BaseBox,
+    ScrollableCustom,
+    TextCustom,
+    ViewWrapper,
+} from "@/components";
+import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
+import { jobDataDummy } from "@/screens/Job/listDataDummy";
+import { useState } from "react";
+
+export default function JobStatus() {
+  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 headerComponent={scrollComponent} hideFooter>
+      {jobDataDummy.map((e, i) => (
+        <BaseBox
+          key={i}
+          paddingTop={20}
+          paddingBottom={20}
+          href={`/job/${e.id}/${activeCategory}/detail`}
+          // onPress={() => console.log("pressed")}
+        >
+          <TextCustom align="center" bold truncate size="large">
+            {e.posisi} {activeCategory?.toUpperCase()}
+          </TextCustom>
+        </BaseBox>
+      ))}
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,65 @@
+import {
+  BackButton,
+  DotButton,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  Spacing,
+  ViewWrapper,
+} from "@/components";
+import { IconEdit } from "@/components/_Icon";
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+import Job_BoxDetailSection from "@/screens/Job/BoxDetailSection";
+import Job_ButtonStatusSection from "@/screens/Job/ButtonStatusSection";
+import { jobDataDummy } from "@/screens/Job/listDataDummy";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function JobDetailStatus() {
+  const { id, status } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const jobDetail = jobDataDummy.find((e) => e.id === Number(id));
+
+  const handlePress = (item: IMenuDrawerItem) => {
+    console.log("PATH >> ", item.path);
+    router.navigate(item.path as any);
+    setOpenDrawer(false);
+  };
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: `Detail`,
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            status === "draft" ? (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ) : null,
+        }}
+      />
+      <ViewWrapper>
+        <Job_BoxDetailSection data={jobDetail} />
+        <Job_ButtonStatusSection status={status as string} />
+        <Spacing />
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconEdit />,
+              label: "Edit",
+              path: `/job/${id}/edit`,
+            },
+          ]}
+          columns={4}
+          onPressItem={handlePress as any}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

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

@@ -0,0 +1,67 @@
+import {
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  Spacing,
+  StackCustom,
+  TextAreaCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { router } from "expo-router";
+
+export default function JobEdit() {
+  const buttonSubmit = () => {
+    return (
+      <>
+        <ButtonCustom onPress={() => router.back()}>Update</ButtonCustom>
+        <Spacing />
+      </>
+    );
+  };
+
+  return (
+    <ViewWrapper>
+      <StackCustom gap={"xs"}>
+        <InformationBox text="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja." />
+
+        <LandscapeFrameUploaded />
+        <ButtonCenteredOnly
+          onPress={() => {
+            router.push("/(application)/(image)/take-picture/123");
+          }}
+          icon="upload"
+        >
+          Upload
+        </ButtonCenteredOnly>
+
+        <Spacing />
+
+        <TextInputCustom
+          label="Judul Lowongan"
+          placeholder="Masukan Judul Lowongan Kerja"
+          required
+        />
+
+        <TextAreaCustom
+          label="Syarat & Kualifikasi"
+          placeholder="Masukan Syarat & Kualifikasi Lowongan Kerja"
+          required
+          showCount
+          maxLength={1000}
+        />
+
+        <TextAreaCustom
+          label="Deskripsi Lowongan"
+          placeholder="Masukan Deskripsi Lowongan Kerja"
+          required
+          showCount
+          maxLength={1000}
+        />
+
+        {buttonSubmit()}
+      </StackCustom>
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,79 @@
+import {
+  ButtonCustom,
+  Spacing,
+  ViewWrapper
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import Job_BoxDetailSection from "@/screens/Job/BoxDetailSection";
+import { jobDataDummy } from "@/screens/Job/listDataDummy";
+import { Ionicons } from "@expo/vector-icons";
+import * as Clipboard from "expo-clipboard";
+import { useLocalSearchParams } from "expo-router";
+import { Alert, Linking } from "react-native";
+
+export default function JobDetail() {
+  const { id } = useLocalSearchParams();
+
+  const jobDetail = jobDataDummy.find((e) => e.id === Number(id));
+
+  const OpenLinkButton = () => {
+    const jobUrl =
+      "https://stg-hipmi.wibudev.com/job-vacancy/cm6ijt9w8005zucv4twsct657";
+
+    const openInBrowser = async () => {
+      const supported = await Linking.canOpenURL(jobUrl);
+      if (supported) {
+        await Linking.openURL(jobUrl);
+      } else {
+        Alert.alert("Gagal membuka link", "Browser tidak tersedia.");
+      }
+    };
+
+    return (
+      <ButtonCustom
+        iconLeft={
+          <Ionicons name="globe" size={ICON_SIZE_SMALL} color="white" />
+        }
+        onPress={openInBrowser}
+        backgroundColor="green"
+        textColor="white"
+      >
+        Buka Lowongan di Browser
+      </ButtonCustom>
+    );
+  };
+
+  const CopyLinkButton = () => {
+    const jobUrl =
+      "https://stg-hipmi.wibudev.com/job-vacancy/cm6ijt9w8005zucv4twsct657";
+
+    const copyToClipboard = async () => {
+      await Clipboard.setStringAsync(jobUrl);
+      Alert.alert(
+        "Link disalin",
+        "Tautan lowongan telah disalin ke clipboard."
+      );
+    };
+
+    return (
+      <ButtonCustom
+        iconLeft={<Ionicons name="copy" size={ICON_SIZE_SMALL} color="white" />}
+        onPress={copyToClipboard}
+        backgroundColor={MainColor.orange}
+        textColor="white"
+      >
+        Salin Link
+      </ButtonCustom>
+    );
+  };
+
+  return (
+    <ViewWrapper>
+      <Job_BoxDetailSection data={jobDetail}/>
+      <OpenLinkButton />
+      <Spacing />
+      <CopyLinkButton />
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,73 @@
+import {
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  Spacing,
+  StackCustom,
+  TextAreaCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { router } from "expo-router";
+
+export default function JobCreate() {
+  const buttonSubmit = () => {
+    return (
+      <>
+        <ButtonCustom
+          onPress={() =>
+            router.replace("/(application)/(user)/job/(tabs)/status")
+          }
+        >
+          Simpan
+        </ButtonCustom>
+        <Spacing />
+      </>
+    );
+  };
+
+  return (
+    <ViewWrapper>
+      <StackCustom gap={"xs"}>
+        <InformationBox text="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja." />
+
+        <LandscapeFrameUploaded />
+        <ButtonCenteredOnly
+          onPress={() => {
+            router.push("/(application)/(image)/take-picture/123");
+          }}
+          icon="upload"
+        >
+          Upload
+        </ButtonCenteredOnly>
+
+        <Spacing />
+
+        <TextInputCustom
+          label="Judul Lowongan"
+          placeholder="Masukan Judul Lowongan Kerja"
+          required
+        />
+
+        <TextAreaCustom
+          label="Syarat & Kualifikasi"
+          placeholder="Masukan Syarat & Kualifikasi Lowongan Kerja"
+          required
+          showCount
+          maxLength={1000}
+        />
+
+        <TextAreaCustom
+          label="Deskripsi Lowongan"
+          placeholder="Masukan Deskripsi Lowongan Kerja"
+          required
+          showCount
+          maxLength={1000}
+        />
+
+        {buttonSubmit()}
+      </StackCustom>
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,43 @@
+import {
+    IconContribution,
+    IconHistory,
+    IconHome,
+    IconStatus,
+} from "@/components/_Icon";
+import { TabsStyles } from "@/styles/tabs-styles";
+import { Tabs } from "expo-router";
+
+export default function VotingTabsLayout() {
+  return (
+    <Tabs screenOptions={TabsStyles}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Beranda",
+          tabBarIcon: ({ color }) => <IconHome color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="status"
+        options={{
+          title: "Status",
+          tabBarIcon: ({ color }) => <IconStatus color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="contribution"
+        options={{
+          title: "Kontribusi",
+          tabBarIcon: ({ color }) => <IconContribution color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="history"
+        options={{
+          title: "Riwayat",
+          tabBarIcon: ({ color }) => <IconHistory color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}

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

@@ -0,0 +1,17 @@
+import {
+  ViewWrapper
+} from "@/components";
+import Voting_BoxPublishSection from "@/screens/Voting/BoxPublishSection";
+
+export default function VotingContribution() {
+  return (
+    <ViewWrapper hideFooter>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <Voting_BoxPublishSection
+          key={index}
+          href={`/voting/${index}/contribution`}
+        />
+      ))}
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,37 @@
+import { ViewWrapper } from "@/components";
+import TabsTwoHeaderCustom from "@/components/_ShareComponent/TabsTwoHeaderCustom";
+import Voting_BoxPublishSection from "@/screens/Voting/BoxPublishSection";
+import { useState } from "react";
+
+export default function VotingHistory() {
+  const [activeCategory, setActiveCategory] = useState<string | null>("all");
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item);
+    // tambahkan logika lain seperti filter dsb.
+  };
+
+  return (
+    <ViewWrapper
+      hideFooter
+      headerComponent={
+        <TabsTwoHeaderCustom
+          leftValue="all"
+          rightValue="main"
+          leftText="Semua Riwayat"
+          rightText="Riwayat Saya"
+          activeCategory={activeCategory}
+          handlePress={handlePress}
+        />
+      }
+    >
+      {Array.from({ length: 10 }).map((_, index) => (
+        <Voting_BoxPublishSection
+          key={index}
+          id={activeCategory as any}
+          href={`/voting/${index}/history`}
+        />
+      ))}
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,23 @@
+import {
+  FloatingButton,
+  SearchInput,
+  ViewWrapper
+} from "@/components";
+import Voting_BoxPublishSection from "@/screens/Voting/BoxPublishSection";
+import { router } from "expo-router";
+
+export default function VotingBeranda() {
+  return (
+    <ViewWrapper
+      hideFooter
+      floatingButton={
+        <FloatingButton onPress={() => router.push("/voting/create")} />
+      }
+      headerComponent={<SearchInput placeholder="Cari voting" />}
+    >
+      {Array.from({ length: 5 }).map((_, index) => (
+        <Voting_BoxPublishSection key={index} href={`/voting/${index}`} />
+      ))}
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,60 @@
+import {
+  BadgeCustom,
+  BaseBox,
+  ScrollableCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
+import dayjs from "dayjs";
+import { useState } from "react";
+
+export default function VotingStatus() {
+  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 headerComponent={scrollComponent} hideFooter>
+      {Array.from({ length: 10 }).map((_, i) => (
+        <BaseBox
+          key={i}
+          paddingTop={20}
+          paddingBottom={20}
+          href={`/voting/${i}/${activeCategory}/detail`}
+        >
+          <StackCustom>
+            <TextCustom align="center" bold truncate size="large">
+              Lorem ipsum dolor sit {activeCategory}
+            </TextCustom>
+            <BadgeCustom
+              style={{ width: "70%", alignSelf: "center" }}
+              variant="light"
+            >
+              {dayjs().format("DD/MM/YYYY")} -{" "}
+              {dayjs().add(1, "day").format("DD/MM/YYYY")}
+            </BadgeCustom>
+          </StackCustom>
+        </BaseBox>
+      ))}
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,108 @@
+import {
+  AlertDefaultSystem,
+  BackButton,
+  DotButton,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  Spacing,
+  ViewWrapper,
+} from "@/components";
+import { IconArchive, IconContribution, IconEdit } from "@/components/_Icon";
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+import { Voting_BoxDetailSection } from "@/screens/Voting/BoxDetailSection";
+import Voting_ButtonStatusSection from "@/screens/Voting/ButtonStatusSection";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function VotingDetailStatus() {
+  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) => {
+    if (item.path === "") {
+      AlertDefaultSystem({
+        title: "Update Arsip",
+        message: "Apakah Anda yakin ingin mengarsipkan voting ini?",
+        textLeft: "Batal",
+        textRight: "Ya",
+        onPressRight: () => {
+          console.log("Hapus");
+          router.back();
+        },
+      });
+    }
+    router.navigate(item.path as any);
+    setOpenDrawerPublish(false);
+  };
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: `Detail ${status}`,
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            status === "draft" ? (
+              <DotButton onPress={() => setOpenDrawerDraft(true)} />
+            ) : status === "publish" ? (
+              <DotButton onPress={() => setOpenDrawerPublish(true)} />
+            ) : null,
+        }}
+      />
+      <ViewWrapper>
+        <Voting_BoxDetailSection />
+        <Voting_ButtonStatusSection status={status as string} />
+        <Spacing />
+      </ViewWrapper>
+
+      {/* ========= Draft Drawer ========= */}
+      <DrawerCustom
+        isVisible={openDrawerDraft}
+        closeDrawer={() => setOpenDrawerDraft(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconEdit />,
+              label: "Edit",
+              path: `/voting/${id}/edit`,
+            },
+          ]}
+          columns={4}
+          onPressItem={handlePressDraft as any}
+        />
+      </DrawerCustom>
+
+      {/* ========= Publish Drawer ========= */}
+      <DrawerCustom
+        isVisible={openDrawerPublish}
+        closeDrawer={() => setOpenDrawerPublish(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconContribution />,
+              label: "Daftar Kontributor",
+              path: `/voting/${id}/list-of-contributor`,
+            },
+            {
+              icon: <IconArchive />,
+              label: "Update Arsip",
+              path: "" as any,
+            },
+          ]}
+          onPressItem={handlePressPublish as any}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

app/(application)/(user)/voting/[id]/contribution.tsx

@@ -0,0 +1,65 @@
+import {
+    AvatarUsernameAndOtherComponent,
+    BackButton,
+    DotButton,
+    DrawerCustom,
+    MenuDrawerDynamicGrid,
+    Spacing,
+    ViewWrapper,
+} from "@/components";
+import { IconContribution } from "@/components/_Icon";
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+import { Voting_BoxDetailContributionSection } from "@/screens/Voting/BoxDetailContribution";
+import Voting_BoxDetailHasilVotingSection from "@/screens/Voting/BoxDetailHasilVotingSection";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function VotingDetailContribution() {
+  const { id } = useLocalSearchParams();
+  const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
+
+  const handlePressPublish = (item: IMenuDrawerItem) => {
+    router.navigate(item.path as any);
+    setOpenDrawerPublish(false);
+  };
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Detail Kontribusi",
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <DotButton onPress={() => setOpenDrawerPublish(true)} />
+          ),
+        }}
+      />
+
+      <ViewWrapper>
+        <Voting_BoxDetailContributionSection
+          headerAvatar={<AvatarUsernameAndOtherComponent />}
+        />
+        <Voting_BoxDetailHasilVotingSection />
+        <Spacing />
+      </ViewWrapper>
+
+      {/* ========= Publish Drawer ========= */}
+      <DrawerCustom
+        isVisible={openDrawerPublish}
+        closeDrawer={() => setOpenDrawerPublish(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconContribution />,
+              label: "Daftar Kontributor",
+              path: `/voting/${id}/list-of-contributor`,
+            },
+          ]}
+          onPressItem={handlePressPublish as any}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

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

@@ -0,0 +1,78 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  Grid,
+  Spacing,
+  StackCustom,
+  TextAreaCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
+import { MainColor } from "@/constants/color-palet";
+import { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { TouchableOpacity } from "react-native";
+
+export default function VotingEdit() {
+  const buttonSubmit = () => {
+    return (
+      <>
+        <BoxButtonOnFooter>
+          <ButtonCustom
+            onPress={() =>
+              router.back()
+            }
+          >
+            Update
+          </ButtonCustom>
+        </BoxButtonOnFooter>
+      </>
+    );
+  };
+
+  return (
+    <ViewWrapper footerComponent={buttonSubmit()}>
+      <StackCustom gap={"xs"}>
+        <TextInputCustom
+          label="Judul Voting"
+          placeholder="MasukanJudul Voting"
+          required
+        />
+        <TextAreaCustom
+          label="Deskripsi"
+          placeholder="Masukan Deskripsi"
+          required
+          showCount
+          maxLength={1000}
+        />
+        <DateTimePickerCustom label="Mulai Voting" required />
+        <DateTimePickerCustom label="Voting Berakhir" required />
+
+        <Grid>
+          <Grid.Col span={10}>
+            <TextInputCustom
+              label="Pilihan"
+              placeholder="Masukan Pilihan"
+              required
+            />
+          </Grid.Col>
+          <Grid.Col
+            span={2}
+            style={{ alignItems: "center", justifyContent: "center" }}
+          >
+            <TouchableOpacity onPress={() => console.log("delete")}>
+              <Ionicons name="trash" size={24} color={MainColor.red} />
+            </TouchableOpacity>
+          </Grid.Col>
+        </Grid>
+
+        <ButtonCenteredOnly onPress={() => console.log("add")}>
+          Tambah Pilihan
+        </ButtonCenteredOnly>
+        <Spacing />
+      </StackCustom>
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/voting/[id]/history.tsx

@@ -0,0 +1,64 @@
+import {
+    AvatarUsernameAndOtherComponent,
+    BackButton,
+    DotButton,
+    DrawerCustom,
+    MenuDrawerDynamicGrid,
+    Spacing,
+    ViewWrapper,
+} from "@/components";
+import { IconContribution } from "@/components/_Icon";
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+import Voting_BoxDetailHasilVotingSection from "@/screens/Voting/BoxDetailHasilVotingSection";
+import { Voting_BoxDetailHistorySection } from "@/screens/Voting/BoxDetailHistorySection";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function VotingDetailHistory() {
+  const { id } = useLocalSearchParams();
+  const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
+
+  const handlePressPublish = (item: IMenuDrawerItem) => {
+    router.navigate(item.path as any);
+    setOpenDrawerPublish(false);
+  };
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Riwayat Voting",
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <DotButton onPress={() => setOpenDrawerPublish(true)} />
+          ),
+        }}
+      />
+      <ViewWrapper>
+        <Voting_BoxDetailHistorySection
+          headerAvatar={<AvatarUsernameAndOtherComponent />}
+        />
+        <Voting_BoxDetailHasilVotingSection />
+        <Spacing />
+      </ViewWrapper>
+
+      {/* ========= Publish Drawer ========= */}
+      <DrawerCustom
+        isVisible={openDrawerPublish}
+        closeDrawer={() => setOpenDrawerPublish(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconContribution />,
+              label: "Daftar Kontributor",
+              path: `/voting/${id}/list-of-contributor`,
+            },
+          ]}
+          onPressItem={handlePressPublish as any}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

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

@@ -0,0 +1,87 @@
+import {
+  AlertDefaultSystem,
+  AvatarUsernameAndOtherComponent,
+  BackButton,
+  DotButton,
+  DrawerCustom,
+  InformationBox,
+  MenuDrawerDynamicGrid,
+  StackCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconArchive, IconContribution } from "@/components/_Icon";
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+import Voting_BoxDetailHasilVotingSection from "@/screens/Voting/BoxDetailHasilVotingSection";
+import { Voting_BoxDetailPublishSection } from "@/screens/Voting/BoxDetailPublishSection";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import React, { useState } from "react";
+
+export default function VotingDetail() {
+  const { id } = useLocalSearchParams();
+  const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
+  const handlePressPublish = (item: IMenuDrawerItem) => {
+    if (item.path === "") {
+      AlertDefaultSystem({
+        title: "Update Arsip",
+        message: "Apakah Anda yakin ingin mengarsipkan voting ini?",
+        textLeft: "Batal",
+        textRight: "Ya",
+        onPressRight: () => {
+          console.log("Hapus");
+          router.back();
+        },
+      });
+    }
+    router.navigate(item.path as any);
+    setOpenDrawerPublish(false);
+  };
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: `Detail Voting`,
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <DotButton onPress={() => setOpenDrawerPublish(true)} />
+          ),
+        }}
+      />
+
+      <ViewWrapper>
+        <StackCustom>
+          <InformationBox text="Untuk sementara voting ini belum di buka. Voting akan dimulai sesuai dengan tanggal awal pemilihan, dan akan ditutup sesuai dengan tanggal akhir pemilihan." />
+
+          <Voting_BoxDetailPublishSection
+            headerAvatar={<AvatarUsernameAndOtherComponent />}
+          />
+
+          <Voting_BoxDetailHasilVotingSection />
+        </StackCustom>
+      </ViewWrapper>
+
+      {/* ========= Publish Drawer ========= */}
+      <DrawerCustom
+        isVisible={openDrawerPublish}
+        closeDrawer={() => setOpenDrawerPublish(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconContribution />,
+              label: "Daftar Kontributor",
+              path: `/voting/${id}/list-of-contributor`,
+            },
+            {
+              icon: <IconArchive />,
+              label: "Update Arsip",
+              path: "" as any,
+            },
+          ]}
+          onPressItem={handlePressPublish as any}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

app/(application)/(user)/voting/[id]/list-of-contributor.tsx

@@ -0,0 +1,26 @@
+import {
+  AvatarUsernameAndOtherComponent,
+  BadgeCustom,
+  BaseBox,
+  ViewWrapper,
+} from "@/components";
+
+export default function Voting_ListOfContributor() {
+  return (
+    <ViewWrapper>
+      {Array.from({ length: 10 }).map((_, index) => (
+        <BaseBox paddingTop={5} paddingBottom={5} key={index.toString()}>
+          <AvatarUsernameAndOtherComponent
+            rightComponent={
+              <BadgeCustom
+                style={{alignSelf: "flex-end" }}
+              >
+                Pilihan {index + 1}
+              </BadgeCustom>
+            }
+          />
+        </BaseBox>
+      ))}
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,78 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  Grid,
+  Spacing,
+  StackCustom,
+  TextAreaCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
+import { MainColor } from "@/constants/color-palet";
+import { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { TouchableOpacity } from "react-native";
+
+export default function VotingCreate() {
+  const buttonSubmit = () => {
+    return (
+      <>
+        <BoxButtonOnFooter>
+          <ButtonCustom
+            onPress={() =>
+              router.replace("/(application)/(user)/voting/(tabs)/status")
+            }
+          >
+            Simpan
+          </ButtonCustom>
+        </BoxButtonOnFooter>
+      </>
+    );
+  };
+
+  return (
+    <ViewWrapper footerComponent={buttonSubmit()}>
+      <StackCustom gap={"xs"}>
+        <TextInputCustom
+          label="Judul Voting"
+          placeholder="MasukanJudul Voting"
+          required
+        />
+        <TextAreaCustom
+          label="Deskripsi"
+          placeholder="Masukan Deskripsi"
+          required
+          showCount
+          maxLength={1000}
+        />
+        <DateTimePickerCustom label="Mulai Voting" required />
+        <DateTimePickerCustom label="Voting Berakhir" required />
+
+        <Grid>
+          <Grid.Col span={10}>
+            <TextInputCustom
+              label="Pilihan"
+              placeholder="Masukan Pilihan"
+              required
+            />
+          </Grid.Col>
+          <Grid.Col
+            span={2}
+            style={{ alignItems: "center", justifyContent: "center" }}
+          >
+            <TouchableOpacity onPress={() => console.log("delete")}>
+              <Ionicons name="trash" size={24} color={MainColor.red} />
+            </TouchableOpacity>
+          </Grid.Col>
+        </Grid>
+
+        <ButtonCenteredOnly onPress={() => console.log("add")}>
+          Tambah Pilihan
+        </ButtonCenteredOnly>
+        <Spacing />
+      </StackCustom>
+    </ViewWrapper>
+  );
+}

app/(application)/coba/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import React from "react";
 import {
   View,
@@ -11,6 +12,8 @@ import { Ionicons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
 import EventDetailScreen from "./double-scroll";
 import LeftButtonCustom from "@/components/Button/BackButton";
+import CustomUploadButton from "./upload-button";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 const { width } = Dimensions.get("window");
 
@@ -117,14 +120,38 @@ const CustomTabNavigator = () => {
 
   const ActiveComponent = getActiveComponent();
 
+  const handleImageUpload = (file: any) => {
+    console.log("Gambar dipilih:", file);
+    // Upload ke server
+  };
+
+  const handlePdfOrPngUpload = (file: any) => {
+    console.log("PDF atau PNG dipilih:", file);
+  };
+
   return (
     <>
-      <Stack.Screen
-        options={{
-          title: "Custom Tab Navigator",
-        }}
-      />
-      <EventDetailScreen />
+      <SafeAreaView edges={["bottom"]} style={styles.container}>
+        <Stack.Screen
+          options={{
+            title: "Custom Tab Navigator",
+          }}
+        />
+        <EventDetailScreen />
+
+        <CustomUploadButton
+          allowedExtensions={["jpeg", "png"]}
+          buttonTitle="Unggah Gambar (JPEG/PNG)"
+          onFileSelected={handleImageUpload}
+        />
+
+        {/* Hanya PDF atau PNG */}
+        <CustomUploadButton
+          allowedExtensions={["pdf"]}
+          buttonTitle="Unggah PDF atau PNG"
+          onFileSelected={handlePdfOrPngUpload}
+        />
+      </SafeAreaView>
     </>
     // <View style={styles.container}>
     //   {/* Content Area */}

app/(application)/coba/upload-button.tsx

@@ -0,0 +1,99 @@
+// components/CustomUploadButton.tsx
+import React from 'react';
+import { Button, Alert, View, StyleSheet } from 'react-native';
+import * as DocumentPicker from 'expo-document-picker';
+import { isValidFileType, getMimeType } from '../../../utils/fileValidation';
+
+interface UploadButtonProps {
+  allowedExtensions: string[];
+  buttonTitle?: string;
+  onFileSelected?: (file: {
+    uri: string;
+    name: string;
+    size: number | null;
+    mimeType: string;
+  }) => void;
+}
+
+const CustomUploadButton: React.FC<UploadButtonProps> = ({
+  allowedExtensions,
+  buttonTitle = 'Pilih File',
+  onFileSelected,
+}) => {
+  const handlePickFile = async () => {
+    try {
+      // Coba filter dengan MIME type jika memungkinkan
+      const typeFilter = getMimeTypeFilter(allowedExtensions);
+
+      const result = await DocumentPicker.getDocumentAsync({
+        type: typeFilter, // Ini membantu memfilter di UI pemilih
+        copyToCacheDirectory: true,
+      });
+
+      if (result.canceled) {
+        Alert.alert('Dibatalkan', 'Tidak ada file yang dipilih.');
+        return;
+      }
+
+      const file = result.assets[0];
+      const { uri, name, size } = file;
+
+      // Validasi ekstensi secara manual (cadangan jika MIME tidak akurat)
+      if (!isValidFileType(name, allowedExtensions)) {
+        Alert.alert(
+          'Format Tidak Didukung',
+          `Hanya file dengan ekstensi berikut yang diperbolehkan: ${allowedExtensions.join(', ')}`
+        );
+        return;
+      }
+
+      const mimeType = getMimeType(name);
+
+      // Kirim data file ke komponen induk
+      if (onFileSelected) {
+        onFileSelected({ uri, name, size: size || null, mimeType });
+      }
+
+      Alert.alert('Berhasil', `File ${name} berhasil dipilih!`);
+    } catch (error) {
+      console.error('Error picking file:', error);
+      Alert.alert('Error', 'Terjadi kesalahan saat memilih file.');
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <Button title={buttonTitle} onPress={handlePickFile} />
+    </View>
+  );
+};
+
+// Fungsi bantu untuk menghasilkan MIME type filter dari ekstensi
+const getMimeTypeFilter = (extensions: string[]): string => {
+  const mimeTypes: string[] = [];
+  extensions.forEach((ext) => {
+    switch (ext.toLowerCase()) {
+      case 'jpg':
+      case 'jpeg':
+        if (!mimeTypes.includes('image/jpeg')) mimeTypes.push('image/jpeg');
+        break;
+      case 'png':
+        if (!mimeTypes.includes('image/png')) mimeTypes.push('image/png');
+        break;
+      case 'pdf':
+        if (!mimeTypes.includes('application/pdf')) mimeTypes.push('application/pdf');
+        break;
+      default:
+        mimeTypes.push('*/*'); // fallback
+    }
+  });
+  return mimeTypes.length > 0 ? mimeTypes.join(',') : '*/*';
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 10,
+  },
+});
+
+export default CustomUploadButton;

bun.lock

@@ -11,12 +11,16 @@
         "@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",
         "expo-blur": "~14.1.5",
         "expo-camera": "~16.1.10",
+        "expo-clipboard": "~7.1.5",
         "expo-constants": "~17.1.7",
+        "expo-document-picker": "~13.1.6",
+        "expo-file-system": "~18.1.11",
         "expo-font": "~13.3.2",
         "expo-haptics": "~14.1.4",
         "expo-image": "~2.3.2",
@@ -28,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",
@@ -35,6 +40,7 @@
         "react-native-international-phone-number": "^0.9.3",
         "react-native-maps": "1.20.1",
         "react-native-otp-entry": "^1.8.5",
+        "react-native-pager-view": "6.7.1",
         "react-native-paper": "^5.14.5",
         "react-native-reanimated": "~3.17.4",
         "react-native-safe-area-context": "5.4.0",
@@ -447,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=="],
@@ -827,8 +835,12 @@
 
     "expo-camera": ["expo-camera@16.1.10", "", { "dependencies": { "invariant": "^2.2.4" }, "peerDependencies": { "expo": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native-web"] }, "sha512-qoRJeSwPmMbuu0VfnQTC+q79Kt2SqTWColEImgithL9u0qUQcC55U89IfhZk55Hpt6f1DgKuDzUOG5oY+snSWg=="],
 
+    "expo-clipboard": ["expo-clipboard@7.1.5", "", { "peerDependencies": { "expo": "*", "react": "*", "react-native": "*" } }, "sha512-TCANUGOxouoJXxKBW5ASJl2WlmQLGpuZGemDCL2fO5ZMl57DGTypUmagb0CVUFxDl0yAtFIcESd78UsF9o64aw=="],
+
     "expo-constants": ["expo-constants@17.1.7", "", { "dependencies": { "@expo/config": "~11.0.12", "@expo/env": "~1.0.7" }, "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-byBjGsJ6T6FrLlhOBxw4EaiMXrZEn/MlUYIj/JAd+FS7ll5X/S4qVRbIimSJtdW47hXMq0zxPfJX6njtA56hHA=="],
 
+    "expo-document-picker": ["expo-document-picker@13.1.6", "", { "peerDependencies": { "expo": "*" } }, "sha512-8FTQPDOkyCvFN/i4xyqzH7ELW4AsB6B3XBZQjn1FEdqpozo6rpNJRr7sWFU/93WrLgA9FJEKpKbyr6XxczK6BA=="],
+
     "expo-file-system": ["expo-file-system@18.1.11", "", { "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-HJw/m0nVOKeqeRjPjGdvm+zBi5/NxcdPf8M8P3G2JFvH5Z8vBWqVDic2O58jnT1OFEy0XXzoH9UqFu7cHg9DTQ=="],
 
     "expo-font": ["expo-font@13.3.2", "", { "dependencies": { "fontfaceobserver": "^2.1.0" }, "peerDependencies": { "expo": "*", "react": "*" } }, "sha512-wUlMdpqURmQ/CNKK/+BIHkDA5nGjMqNlYmW0pJFXY/KE/OG80Qcavdu2sHsL4efAIiNGvYdBS10WztuQYU4X0A=="],
@@ -1151,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=="],
@@ -1389,6 +1403,8 @@
 
     "react-native-otp-entry": ["react-native-otp-entry@1.8.5", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-TZNkIuUzZKAAWrC8X/A22ZHJdycLysxUNysrGf0yTmDLRUyf4zLXwVFcDYUcRNe763Hjaf5qvtKGILb6lDGzoA=="],
 
+    "react-native-pager-view": ["react-native-pager-view@6.7.1", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-cBSr6xw4g5N7Kd3VGWcf+kmaH7iBWb0DXAf2bVo3bXkzBcBbTOmYSvc0LVLHhUPW8nEq5WjT9LCIYAzgF++EXw=="],
+
     "react-native-paper": ["react-native-paper@5.14.5", "", { "dependencies": { "@callstack/react-theme-provider": "^3.0.9", "color": "^3.1.2", "use-latest-callback": "^0.2.3" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-safe-area-context": "*" } }, "sha512-eaIH5bUQjJ/mYm4AkI6caaiyc7BcHDwX6CqNDi6RIxfxfWxROsHpll1oBuwn/cFvknvA8uEAkqLk/vzVihI3AQ=="],
 
     "react-native-reanimated": ["react-native-reanimated@3.17.5", "", { "dependencies": { "@babel/plugin-transform-arrow-functions": "^7.0.0-0", "@babel/plugin-transform-class-properties": "^7.0.0-0", "@babel/plugin-transform-classes": "^7.0.0-0", "@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0", "@babel/plugin-transform-optional-chaining": "^7.0.0-0", "@babel/plugin-transform-shorthand-properties": "^7.0.0-0", "@babel/plugin-transform-template-literals": "^7.0.0-0", "@babel/plugin-transform-unicode-regex": "^7.0.0-0", "@babel/preset-typescript": "^7.16.7", "convert-source-map": "^2.0.0", "invariant": "^2.2.4", "react-native-is-edge-to-edge": "1.1.7" }, "peerDependencies": { "@babel/core": "^7.0.0-0", "react": "*", "react-native": "*" } }, "sha512-SxBK7wQfJ4UoWoJqQnmIC7ZjuNgVb9rcY5Xc67upXAFKftWg0rnkknTw6vgwnjRcvYThrjzUVti66XoZdDJGtw=="],

components/Badge/BadgeCustom.tsx

@@ -0,0 +1,189 @@
+import React from "react";
+import {
+  StyleSheet,
+  Text,
+  TextStyle,
+  View,
+  ViewProps,
+  ViewStyle,
+} from "react-native";
+
+type BadgeVariant = "filled" | "light" | "outline" | "dot";
+type BadgeColor =
+  | "primary"
+  | "success"
+  | "warning"
+  | "danger"
+  | "gray"
+  | "dark";
+type BadgeSize = "xs" | "sm" | "md" | "lg";
+
+interface BadgeProps extends ViewProps {
+  children: React.ReactNode;
+  variant?: BadgeVariant;
+  color?: BadgeColor | string;
+  size?: BadgeSize;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  radius?: number;
+  fullWidth?: boolean;
+  textColor?: string;
+}
+
+const BadgeCustom: React.FC<BadgeProps> = ({
+  children,
+  variant = "filled",
+  color = "primary",
+  size = "md",
+  leftIcon,
+  rightIcon,
+  radius = 50,
+  fullWidth = false,
+  textColor = "#fff",
+  style,
+  ...props
+}) => {
+  // Daftar warna bawaan
+  const defaultColors = {
+    primary: "#339AF0",
+    success: "#40C057",
+    warning: "#FAB005",
+    danger: "#FA5252",
+    gray: "#868E96",
+    dark: "#212529",
+  };
+
+  const themeColor = color in defaultColors ? defaultColors[color as BadgeColor] : color;
+  // Ganti bagian sizeStyles dan styles.container
+  const sizeStyles = {
+    xs: {
+      fontSize: 10,
+      paddingHorizontal: 6,
+      paddingVertical: 2,
+      height: 18, // Dinaikkan dari 16 → 18 agar teks tidak terpotong
+      lineHeight: 10, // 👈 Penting: match fontSize agar kontrol vertikal lebih baik
+    },
+    sm: {
+      fontSize: 11,
+      paddingHorizontal: 8,
+      paddingVertical: 3,
+      height: 20,
+      lineHeight: 11,
+    },
+    md: {
+      fontSize: 12,
+      paddingHorizontal: 10,
+      paddingVertical: 4,
+      height: 24,
+      lineHeight: 12,
+    },
+    lg: {
+      fontSize: 14,
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      height: 30,
+      lineHeight: 14,
+    },
+  };
+
+  const currentSize = sizeStyles[size];
+
+  let variantStyles: ViewStyle & { text: TextStyle } = {
+    backgroundColor: themeColor,
+    borderColor: themeColor,
+    borderWidth: 1,
+    borderRadius: radius,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    text: { color: textColor, fontWeight: "600" },
+  };
+
+  switch (variant) {
+    case "light":
+      variantStyles.backgroundColor = `${themeColor}20`;
+      variantStyles.text.color = themeColor;
+      break;
+    case "outline":
+      variantStyles.backgroundColor = "transparent";
+      variantStyles.text.color = themeColor;
+      break;
+    case "dot":
+      variantStyles.backgroundColor = themeColor;
+      variantStyles.paddingHorizontal = 0;
+      variantStyles.paddingVertical = 0;
+      variantStyles.height = currentSize.fontSize * 2;
+      variantStyles.width = currentSize.fontSize * 2;
+      variantStyles.borderRadius = currentSize.fontSize;
+      break;
+    default:
+      break;
+  }
+
+  if (variant === "dot") {
+    return (
+      <View
+        style={[variantStyles, fullWidth && styles.fullWidth, style]}
+        {...props}
+      />
+    );
+  }
+
+  return (
+    <View
+      style={[
+        styles.container,
+        variantStyles,
+        currentSize,
+        { borderRadius: radius },
+        fullWidth && styles.fullWidth,
+        style,
+      ]}
+      {...props}
+    >
+      {leftIcon && <View style={styles.iconContainer}>{leftIcon}</View>}
+      <Text
+        style={[
+          styles.text,
+          variantStyles.text,
+          { fontSize: currentSize.fontSize },
+        ]}
+      >
+        {children}
+      </Text>
+      {rightIcon && <View style={styles.iconContainer}>{rightIcon}</View>}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: "flex-start",
+    flexDirection: "row",
+    alignItems: "center", // Vertikal center anak-anak (termasuk teks)
+    justifyContent: "center", // Horizontal center
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    minWidth: 20,
+    borderRadius: 6,
+    // ❌ Jangan gunakan `height` fix di sini — kita override per size
+  },
+  text: {
+    fontWeight: "600",
+    textAlign: "center",
+    // ❌ Hapus marginHorizontal jika mengganggu alignment
+    // marginHorizontal: 2, // Opsional, bisa dihapus atau dikurangi
+    includeFontPadding: false, // 👈 Ini penting untuk Android!
+    padding: 0, // Bersihkan padding tambahan dari font
+  },
+  iconContainer: {
+    marginHorizontal: 2, // Lebih kecil dari sebelumnya agar tidak ganggu ukuran kecil
+  },
+  fullWidth: {
+    width: "100%",
+    alignSelf: "stretch",
+    justifyContent: "center",
+  },
+});
+
+export default BadgeCustom;

components/Box/BaseBox.tsx

@@ -72,6 +72,8 @@ export default function BaseBox({
               marginBottom,
               paddingBlock,
               paddingInline,
+              paddingTop,
+              paddingBottom,
             },
             style,
           ]}

components/Box/InformationBox.tsx

@@ -7,7 +7,7 @@ import BaseBox from "./BaseBox";
 export default function InformationBox({ text }: { text: string }) {
   return (
     <>
-      <BaseBox>
+      <BaseBox paddingTop={5} paddingBottom={5}>
         <Grid>
           <Grid.Col
             span={2}

components/Container/CircleContainer.tsx

@@ -0,0 +1,44 @@
+import { MainColor } from "@/constants/color-palet";
+import React from "react";
+import { StyleSheet, TextInput, View } from "react-native";
+
+interface CircularInputProps {
+  value: string | number;
+  onChange?: (value: string) => void;
+}
+
+const CircularInput: React.FC<CircularInputProps> = ({ value, onChange }) => {
+  return (
+    <View style={styles.circleContainer}>
+      <TextInput
+        value={String(value)}
+        onChangeText={onChange}
+        style={styles.input}
+        keyboardType="numeric"
+        maxLength={2} // Batasan maksimal karakter
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  circleContainer: {
+    width: 60,
+    height: 60,
+    borderRadius: 40, // Setiap setengah dari lebar/tinggi
+    borderWidth: 2,
+    borderColor: MainColor.yellow, // Warna kuning
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  input: {
+    color: MainColor.yellow, // Warna kuning
+    fontSize: 24,
+    fontWeight: "bold",
+    textAlign: "center",
+    padding: 0,
+    backgroundColor: "transparent",
+  },
+});
+
+export default CircularInput;

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,
     },
   });

components/Progress/ProgressCustom.tsx

@@ -0,0 +1,193 @@
+import { useTheme } from "@react-navigation/native";
+import React from "react";
+import { Animated, StyleSheet, Text, View, ViewStyle } from "react-native";
+
+type ProgressColor =
+  | "primary"
+  | "success"
+  | "warning"
+  | "error"
+  | "info"
+  | "dark";
+
+type ProgressSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+interface ProgressProps {
+  value?: number | null;
+  color?: ProgressColor;
+  size?: ProgressSize;
+  radius?: number;
+  style?: ViewStyle;
+  animated?: boolean;
+  label?: React.ReactNode; // Konten label (bisa string, number, atau elemen)
+  showLabel?: boolean; // Jika ingin mengontrol visibilitas
+}
+
+const getColor = (color: ProgressColor, isDark: boolean) => {
+  const palette: Record<ProgressColor, string> = {
+    primary: "#FFC107",
+    success: "#228B22",
+    warning: "#FFA500",
+    error: "#DC3545",
+    info: "#177DDC",
+    dark: isDark ? "#DADADA" : "#212121",
+  };
+  return palette[color];
+};
+
+const getSize = (size: ProgressSize): number => {
+  const sizes: Record<ProgressSize, number> = {
+    xs: 6,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 20,
+  };
+  return sizes[size];
+};
+
+const ProgressCustom: React.FC<ProgressProps> = ({
+  value = 0,
+  color = "primary",
+  size = "md",
+  radius = 999,
+  style,
+  animated = true,
+  label,
+  showLabel = true,
+}) => {
+  const { dark } = useTheme();
+  const isDark = dark ?? false;
+
+  const barHeight = getSize(size);
+  const progressColor = getColor(color, isDark);
+  const displayValue =
+    typeof value === "number" ? Math.max(0, Math.min(100, value)) : 0;
+
+  // Animasi indeterminate
+  const translateX = React.useRef(new Animated.Value(-1)).current;
+
+  React.useEffect(() => {
+    if (value === null && animated) {
+      const animation = Animated.loop(
+        Animated.timing(translateX, {
+          toValue: 1,
+          duration: 1200,
+          useNativeDriver: true,
+        })
+      );
+      animation.start();
+      return () => animation.stop();
+    }
+  }, [value, animated, translateX]);
+
+  const isIndeterminate = value === null;
+
+  // Tentukan teks label
+  const labelText =
+    label !== undefined
+      ? label
+      : typeof value === "number"
+      ? `${Math.round(value)}%`
+      : "";
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          height: barHeight,
+          borderRadius: radius,
+          backgroundColor: isDark
+            ? "rgb(255, 255, 255)"
+            : "rgba(255, 255, 255, 0.84)",
+        },
+        style,
+      ]}
+    >
+      {/* Progress Fill */}
+      {isIndeterminate ? (
+        <Animated.View
+          style={[
+            styles.indeterminateBar,
+            {
+              width: "50%",
+              height: barHeight,
+              borderRadius: radius,
+              backgroundColor: progressColor,
+              transform: [
+                {
+                  translateX: translateX.interpolate({
+                    inputRange: [-1, 1],
+                    outputRange: [-100, 100],
+                  }),
+                },
+              ],
+            },
+          ]}
+        />
+      ) : (
+        <View
+          style={[
+            styles.progressBar,
+            {
+              width: `${displayValue}%`,
+              height: barHeight,
+              borderRadius: radius,
+              backgroundColor: progressColor,
+            },
+          ]}
+        />
+      )}
+
+      {/* Label di tengah */}
+      {showLabel && labelText ? (
+        <View style={StyleSheet.absoluteFill}>
+          <Text
+            style={[
+              styles.label,
+              {
+                fontSize: barHeight * 0.7,
+                lineHeight: barHeight,
+                color: isDark ? "black" : "black", // Warna teks, bisa disesuaikan
+                fontWeight: "600",
+              },
+            ]}
+            numberOfLines={1}
+            adjustsFontSizeToFit
+          >
+            {labelText}
+          </Text>
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+export default ProgressCustom;
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: "hidden",
+    backgroundColor: "rgba(0,0,0,0.1)",
+    width: "100%",
+    justifyContent: "center", // Pusatkan label secara vertikal
+  },
+  progressBar: {
+    backgroundColor: "#007BFF",
+  },
+  indeterminateBar: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    backgroundColor: "#007BFF",
+  },
+  label: {
+    textAlign: "center",
+    width: "100%",
+    // Hindari overlap dengan background — bisa tambahkan shadow atau background jika perlu
+    textShadowColor: "rgba(255,255,255,0.6)",
+    textShadowOffset: { width: 1, height: 1 },
+    textShadowRadius: 1,
+  },
+});

components/_Icon/IconArchive.tsx

@@ -0,0 +1,13 @@
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { Ionicons } from "@expo/vector-icons";
+
+export default function IconArchive({ color }: { color?: string }) {
+  return (
+    <Ionicons
+      name="archive"
+      size={ICON_SIZE_SMALL}
+      color={color || MainColor.white}
+    />
+  );
+}

components/_Icon/IconContribution.tsx

@@ -0,0 +1,14 @@
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { Ionicons } from "@expo/vector-icons";
+
+export default function IconContribution({ color }: { color?: string }) {
+  return (
+    <>
+      <Ionicons
+        size={ICON_SIZE_SMALL}
+        name="people"
+        color={color || "white"}
+      />
+    </>
+  );
+}

components/_Icon/IconDocument.tsx

@@ -0,0 +1,25 @@
+import { FontAwesome6, MaterialIcons } from "@expo/vector-icons";
+import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
+import { MainColor } from "@/constants/color-palet";
+
+export { IconDocument, IconDocumentEdit };
+
+function IconDocument({ color, size }: { color?: string; size?: number }) {
+  return (
+    <FontAwesome6
+      name="file-lines"
+      size={size || ICON_SIZE_MEDIUM}
+      color={color || MainColor.white}
+    />
+  );
+}
+
+function IconDocumentEdit({ color, size }: { color?: string; size?: number }) {
+  return (
+    <MaterialIcons
+      name="edit-document"
+      size={size || ICON_SIZE_MEDIUM}
+      color={color || MainColor.white}
+    />
+  );
+}

components/_Icon/IconHistory.tsx

@@ -0,0 +1,9 @@
+import { FontAwesome5 } from "@expo/vector-icons";
+
+export default function IconHistory({ color }: { color?: string }) {
+  return (
+    <>
+      <FontAwesome5 size={20} name="history" color={color} />
+    </>
+  );
+}

components/_Icon/IconHome.tsx

@@ -0,0 +1,10 @@
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { Ionicons } from "@expo/vector-icons";
+
+export default function IconHome({ color }: { color?: string }) {
+  return (
+    <>
+      <Ionicons name="home" size={ICON_SIZE_SMALL} color={color || "white"} />
+    </>
+  );
+}

components/_Icon/IconNews.tsx

@@ -0,0 +1,15 @@
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
+import { MaterialIcons } from "@expo/vector-icons";
+
+export { IconNews };
+
+function IconNews({ color, size }: { color?: string; size?: number }) {
+  return (
+    <MaterialIcons
+      name="newspaper"
+      size={size || ICON_SIZE_MEDIUM}
+      color={color || MainColor.white}
+    />
+  );
+}

components/_Icon/IconPlus.tsx

@@ -0,0 +1,15 @@
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
+import { Octicons } from "@expo/vector-icons";
+
+export { IconPlus };
+
+function IconPlus({ color, size }: { color?: string; size?: number }) {
+  return (
+    <Octicons
+      name="plus-circle"
+      size={size || ICON_SIZE_MEDIUM}
+      color={color || MainColor.white}
+    />
+  );
+}

components/_Icon/IconProspectus.tsx

@@ -0,0 +1,21 @@
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
+import { FontAwesome6, MaterialIcons } from "@expo/vector-icons";
+
+export { IconProspectus , IconProspectusEdit};
+
+function IconProspectus({ color, size }: { color?: string; size?: number }) {
+  return (
+      <FontAwesome6 name="file-contract" size={size || ICON_SIZE_MEDIUM} color={color || MainColor.white} />
+    );
+}
+
+function IconProspectusEdit({ color, size }: { color?: string; size?: number }) {
+  return (
+    <MaterialIcons
+      name="edit-note"
+      size={size || ICON_SIZE_MEDIUM}
+      color={color || MainColor.white}
+    />
+  );
+}

components/_Icon/IconStatus.tsx

@@ -0,0 +1,12 @@
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { MaterialIcons } from "@expo/vector-icons";
+
+export default function IconStatus({ color }: { color?: string }) {
+  return (
+    <MaterialIcons
+      size={ICON_SIZE_SMALL}
+      name="checklist-rtl"
+      color={color || "white"}
+    />
+  );
+}

components/_Icon/IconTrash.tsx

@@ -0,0 +1,15 @@
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
+import { Ionicons } from "@expo/vector-icons";
+
+export { IconTrash };
+
+function IconTrash({ color, size }: { color?: string; size?: number }) {
+  return (
+    <Ionicons
+      name="trash"
+      size={size || ICON_SIZE_MEDIUM}
+      color={color || MainColor.white}
+    />
+  );
+}

components/_Icon/index.ts

@@ -1,3 +1,29 @@
+import IconContribution from "./IconContribution";
 import IconEdit from "./IconEdit";
+import IconHistory from "./IconHistory";
+import IconHome from "./IconHome";
+import IconStatus from "./IconStatus";
+import IconArchive from "./IconArchive";
+import { IconProspectus, IconProspectusEdit } from "./IconProspectus";
+import { IconDocument, IconDocumentEdit } from "./IconDocument";
+import { IconNews } from "./IconNews";
+import { IconPlus } from "./IconPlus";
 
-export { IconEdit };
+export {
+  IconContribution,
+  IconEdit,
+  IconHistory,
+  IconHome,
+  IconStatus,
+  IconArchive,
+  // Prospectus
+  IconProspectus,
+  IconProspectusEdit,
+  // Document
+  IconDocument,
+  IconDocumentEdit,
+  // News
+  IconNews,
+  // Plus
+  IconPlus,
+};

components/_ShareComponent/AvataraAndOtherHeaderComponent.tsx

@@ -1,8 +1,8 @@
-import { ImageSourcePropType, View } from "react-native";
+import { ImageSourcePropType } from "react-native";
+import Divider from "../Divider/Divider";
 import Grid from "../Grid/GridCustom";
 import AvatarCustom from "../Image/AvatarCustom";
 import TextCustom from "../Text/TextCustom";
-import Divider from "../Divider/Divider"
 
 const AvatarUsernameAndOtherComponent = ({
   avatarHref,
@@ -19,30 +19,28 @@ const AvatarUsernameAndOtherComponent = ({
 }) => {
   return (
     <>
-        <Grid containerStyle={{ zIndex: 10 }}>
-          <Grid.Col span={2}>
-            <AvatarCustom source={avatar} href={avatarHref as any} />
-          </Grid.Col>
+      <Grid containerStyle={{ zIndex: 10 }}>
+        <Grid.Col span={2}>
+          <AvatarCustom source={avatar} href={avatarHref as any} />
+        </Grid.Col>
+        <Grid.Col
+          span={rightComponent ? 6 : 10}
+          style={{ justifyContent: "center" }}
+        >
+          <TextCustom truncate bold>
+            {name || "Username"}
+          </TextCustom>
+        </Grid.Col>
+        {rightComponent && (
           <Grid.Col
-            span={rightComponent ? 6 : 10}
-            style={{ justifyContent: "center" }}
+            span={4}
+            style={{ alignItems: "flex-end", justifyContent: "center" }}
           >
-            <TextCustom truncate bold>
-              {name || "Username"}
-            </TextCustom>
+            {rightComponent}
           </Grid.Col>
-          {rightComponent && (
-            <Grid.Col
-              span={4}
-              style={{ alignItems: "flex-end", justifyContent: "center" }}
-            >
-              {rightComponent}
-            </Grid.Col>
-          )}
-        </Grid>
-        {withBottomLine && <Divider marginTop={0} />}
-      <View>
-      </View>
+        )}
+      </Grid>
+      {withBottomLine && <Divider marginTop={0} />}
     </>
   );
 };

components/_ShareComponent/DummyLandscapeImage.tsx

@@ -0,0 +1,31 @@
+import { AccentColor } from "@/constants/color-palet";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import { Image } from "expo-image";
+import { StyleSheet } from "react-native";
+import ClickableCustom from "../Clickable/ClickableCustom";
+import { router } from "expo-router";
+
+export default function DummyLandscapeImage({height}: {height?: number}) {
+  return (
+    <ClickableCustom
+      onPress={() => {
+        router.push("/(application)/(image)/preview-image/1");
+      }}
+    >
+      <Image source={DUMMY_IMAGE.background} style={[styles.backgroundImage, {height: height || 200}]} />
+    </ClickableCustom>
+  );
+}
+
+const styles = StyleSheet.create({
+  backgroundImage: {
+    width: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 6,
+    overflow: "hidden",
+    borderWidth: 1,
+    borderColor: AccentColor.blue,
+    backgroundColor: "white",
+  },
+});

components/_ShareComponent/SearchInput.tsx

@@ -0,0 +1,39 @@
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import TextInputCustom from "../TextInput/TextInputCustom";
+import { Ionicons } from "@expo/vector-icons";
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+
+interface SearchInputProps {
+  placeholder?: string;
+  onPress?: () => void;
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode;
+  containerStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<TextStyle>;
+}
+export default function SearchInput({
+  placeholder,
+  onPress,
+  iconLeft,
+  iconRight,
+  containerStyle = { marginBottom: 0 },
+  style,
+  ...props
+}: SearchInputProps) {
+  return (
+    <TextInputCustom
+      iconLeft={
+        <Ionicons
+          name="search-outline"
+          size={ICON_SIZE_SMALL}
+          color={MainColor.placeholder}
+        />
+      }
+      placeholder={placeholder}
+      borderRadius={50}
+      containerStyle={containerStyle}
+      {...props}
+    />
+  );
+}

components/_ShareComponent/TabsTwoHeaderCustom.tsx

@@ -0,0 +1,61 @@
+import { MainColor, AccentColor } from "@/constants/color-palet";
+import { View } from "react-native";
+import ButtonCustom from "../Button/ButtonCustom";
+import Spacing from "./Spacing";
+
+export default function TabsTwoHeaderCustom ({
+    leftValue,
+    rightValue,
+    leftText,
+    rightText,
+    activeCategory,
+    handlePress,
+}: {
+    leftValue: string;
+    rightValue: string;
+    leftText: string;
+    rightText: string;
+    activeCategory: string | null;
+    handlePress: (item: string) => void;
+}) {
+    return (
+      <>
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            padding: 5,
+            backgroundColor: MainColor.soft_darkblue,
+            borderRadius: 50,
+            width: "100%",
+          }}
+        >
+          <ButtonCustom
+            backgroundColor={
+              activeCategory === leftValue ? MainColor.yellow : AccentColor.blue
+            }
+            textColor={
+              activeCategory === leftValue ? MainColor.black : MainColor.white
+            }
+            style={{ width: "49%" }}
+            onPress={() => handlePress(leftValue)}
+          >
+            {leftText}
+          </ButtonCustom>
+          <Spacing width={"2%"} />
+          <ButtonCustom
+            backgroundColor={
+              activeCategory === rightValue ? MainColor.yellow : AccentColor.blue
+            }
+            textColor={
+              activeCategory === rightValue ? MainColor.black : MainColor.white
+            }
+            style={{ width: "49%" }}
+            onPress={() => handlePress(rightValue)}
+          >
+            {rightText}
+          </ButtonCustom>
+        </View>
+      </>
+    );
+}

components/index.ts

@@ -7,6 +7,10 @@ import ButtonCenteredOnly from "./Button/ButtonCenteredOnly";
 import ButtonCustom from "./Button/ButtonCustom";
 import DotButton from "./Button/DotButton";
 import FloatingButton from "./Button/FloatingButton";
+// Badge
+import BadgeCustom from "./Badge/BadgeCustom";
+// Container
+import CircleContainer from "./Container/CircleContainer";
 // Checkbox
 import CheckboxCustom from "./Checkbox/CheckboxCustom";
 import CheckboxGroup from "./Checkbox/CheckboxGroup";
@@ -49,6 +53,10 @@ import AvatarUsernameAndOtherComponent from "./_ShareComponent/AvataraAndOtherHe
 import Spacing from "./_ShareComponent/Spacing";
 import TabBarBackground from "./_ShareComponent/TabBarBackground";
 import ViewWrapper from "./_ShareComponent/ViewWrapper";
+import SearchInput from "./_ShareComponent/SearchInput";
+import DummyLandscapeImage from "./_ShareComponent/DummyLandscapeImage";
+// Progress
+import ProgressCustom from "./Progress/ProgressCustom";
 
 export {
   AlertCustom,
@@ -66,6 +74,8 @@ export {
   ButtonCenteredOnly,
   ButtonCustom,
   DotButton,
+  // Badge
+  BadgeCustom,
   // Center
   CenterCustom,
   // Checkbox
@@ -73,6 +83,8 @@ export {
   CheckboxGroup,
   // Clickable
   ClickableCustom,
+  // Container
+  CircleContainer,
   // Divider
   Divider,
   DividerCustom,
@@ -86,11 +98,15 @@ export {
   // Map
   MapCustom,
   MenuDrawerDynamicGrid,
+  // Progress
+  ProgressCustom,
   // Scroll
   ScrollableCustom,
   // Select
   SelectCustom,
   // ShareComponent
+  SearchInput,
+  DummyLandscapeImage,
   Spacing,
   // Stack
   StackCustom,

lib/dummy-data/_master/bank.ts

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

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

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

lib/dummy-data/_master/status.tsx

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

lib/dummy-data/donasi/durasi.tsx

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

lib/dummy-data/donasi/kategori.tsx

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

lib/dummy-data/investment/dummy-data-not-publish.ts

@@ -0,0 +1,71 @@
+export  {listDataNotPublishInvesment, listDataPublishInvesment};
+
+const listDataNotPublishInvesment = [
+  {
+    label: "Target Dana",
+    value: "Rp. 7.500.000",
+  },
+  {
+    label: "Harga Per Lembar",
+    value: "Rp. 2.400",
+  },
+  {
+    label: "Return Of Investment (ROI)",
+    value: "3 %",
+  },
+  {
+    label: "Total Lembar",
+    value: "1.200",
+  },
+  {
+    label: "Jadwal Pembagian",
+    value: "Rp. 2.880.000",
+  },
+  {
+    label: "Pembagian Deviden",
+    value: "Selamanya",
+  },
+  {
+    label: "Pencarian Investor",
+    value: "30 Hari",
+  },
+];
+
+const listDataPublishInvesment = [
+  {
+    label: "Investor",
+    value: "10",
+  },
+  {
+    label: "Target Dana",
+    value: "Rp. 7.500.000",
+  },
+  {
+    label: "Harga Per Lembar",
+    value: "Rp. 2.400",
+  },
+  {
+    label: "Return Of Investment (ROI)",
+    value: "3 %",
+  },
+  {
+    label: "Total Lembar",
+    value: "1.200",
+  },
+  {
+    label: "Sisa Lembar",
+    value: "600",
+  },
+  {
+    label: "Jadwal Pembagian",
+    value: "Rp. 2.880.000",
+  },
+  {
+    label: "Pembagian Deviden",
+    value: "Selamanya",
+  },
+  {
+    label: "Pencarian Investor",
+    value: "30 Hari",
+  },
+];

lib/dummy-data/investment/pembagian-deviden.ts

@@ -0,0 +1,20 @@
+const dummyPembagianDeviden = [
+  {
+    id: "1",
+    name: "3",
+  },
+  {
+    id: "2",
+    name: "6",
+  },
+  {
+    id: "3",
+    name: "9",
+  },
+  {
+    id: "4",
+    name: "12",
+  },
+];
+
+export default dummyPembagianDeviden;

lib/dummy-data/investment/pencarian-investor.ts

@@ -0,0 +1,20 @@
+const dummyListPencarianInvestor = [
+  {
+    id: "1",
+    name: "30",
+  },
+  {
+    id: "2",
+    name: "60",
+  },
+  {
+    id: "3",
+    name: "90",
+  },
+  {
+    id: "4",
+    name: "120",
+  },
+];
+
+export default dummyListPencarianInvestor;

lib/dummy-data/investment/periode-deviden.ts

@@ -0,0 +1,12 @@
+const dummyPeriodeDeviden = [
+  {
+    id: "1",
+    name: "Selamanya",
+  },
+  {
+    id: "2",
+    name: "Satu tahun",
+  },
+];
+
+export default dummyPeriodeDeviden;

package-lock.json

@@ -9,16 +9,21 @@
       "version": "1.0.0",
       "dependencies": {
         "@expo/vector-icons": "^14.1.0",
+        "@react-native-community/datetimepicker": "8.4.1",
         "@react-navigation/bottom-tabs": "^7.4.2",
         "@react-navigation/drawer": "^7.5.2",
         "@react-navigation/elements": "^2.3.8",
         "@react-navigation/native": "^7.1.6",
         "@react-navigation/native-stack": "^7.3.21",
         "@types/react-native-vector-icons": "^6.4.18",
+        "dayjs": "^1.11.13",
         "expo": "53.0.17",
         "expo-blur": "~14.1.5",
         "expo-camera": "~16.1.10",
+        "expo-clipboard": "~7.1.5",
         "expo-constants": "~17.1.7",
+        "expo-document-picker": "~13.1.6",
+        "expo-file-system": "~18.1.11",
         "expo-font": "~13.3.2",
         "expo-haptics": "~14.1.4",
         "expo-image": "~2.3.2",
@@ -37,6 +42,7 @@
         "react-native-international-phone-number": "^0.9.3",
         "react-native-maps": "1.20.1",
         "react-native-otp-entry": "^1.8.5",
+        "react-native-pager-view": "6.7.1",
         "react-native-paper": "^5.14.5",
         "react-native-reanimated": "~3.17.4",
         "react-native-safe-area-context": "5.4.0",
@@ -2801,6 +2807,29 @@
         }
       }
     },
+    "node_modules/@react-native-community/datetimepicker": {
+      "version": "8.4.1",
+      "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-8.4.1.tgz",
+      "integrity": "sha512-DrK+CUS5fZnz8dhzBezirkzQTcNDdaXer3oDLh0z4nc2tbdIdnzwvXCvi8IEOIvleoc9L95xS5tKUl0/Xv71Mg==",
+      "license": "MIT",
+      "dependencies": {
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "expo": ">=52.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-windows": "*"
+      },
+      "peerDependenciesMeta": {
+        "expo": {
+          "optional": true
+        },
+        "react-native-windows": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@react-native/assets-registry": {
       "version": "0.79.5",
       "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.79.5.tgz",
@@ -5343,6 +5372,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
@@ -6331,6 +6366,17 @@
         }
       }
     },
+    "node_modules/expo-clipboard": {
+      "version": "7.1.5",
+      "resolved": "https://registry.npmjs.org/expo-clipboard/-/expo-clipboard-7.1.5.tgz",
+      "integrity": "sha512-TCANUGOxouoJXxKBW5ASJl2WlmQLGpuZGemDCL2fO5ZMl57DGTypUmagb0CVUFxDl0yAtFIcESd78UsF9o64aw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/expo-constants": {
       "version": "17.1.7",
       "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-17.1.7.tgz",
@@ -6345,6 +6391,15 @@
         "react-native": "*"
       }
     },
+    "node_modules/expo-document-picker": {
+      "version": "13.1.6",
+      "resolved": "https://registry.npmjs.org/expo-document-picker/-/expo-document-picker-13.1.6.tgz",
+      "integrity": "sha512-8FTQPDOkyCvFN/i4xyqzH7ELW4AsB6B3XBZQjn1FEdqpozo6rpNJRr7sWFU/93WrLgA9FJEKpKbyr6XxczK6BA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-file-system": {
       "version": "18.1.11",
       "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-18.1.11.tgz",
@@ -10442,6 +10497,16 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-pager-view": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/react-native-pager-view/-/react-native-pager-view-6.7.1.tgz",
+      "integrity": "sha512-cBSr6xw4g5N7Kd3VGWcf+kmaH7iBWb0DXAf2bVo3bXkzBcBbTOmYSvc0LVLHhUPW8nEq5WjT9LCIYAzgF++EXw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-paper": {
       "version": "5.14.5",
       "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.14.5.tgz",

package.json

@@ -18,12 +18,16 @@
     "@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",
     "expo-blur": "~14.1.5",
     "expo-camera": "~16.1.10",
+    "expo-clipboard": "~7.1.5",
     "expo-constants": "~17.1.7",
+    "expo-document-picker": "~13.1.6",
+    "expo-file-system": "~18.1.11",
     "expo-font": "~13.3.2",
     "expo-haptics": "~14.1.4",
     "expo-image": "~2.3.2",
@@ -35,6 +39,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",
@@ -42,6 +47,7 @@
     "react-native-international-phone-number": "^0.9.3",
     "react-native-maps": "1.20.1",
     "react-native-otp-entry": "^1.8.5",
+    "react-native-pager-view": "6.7.1",
     "react-native-paper": "^5.14.5",
     "react-native-reanimated": "~3.17.4",
     "react-native-safe-area-context": "5.4.0",

screens/Authentication/LoginView.tsx

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

screens/Forum/ReportListSection.tsx

@@ -1,8 +1,6 @@
-import { BaseBox, ButtonCustom, StackCustom, TextCustom } from "@/components";
+import { BaseBox, StackCustom, TextCustom } from "@/components";
 import { RadioCustom, RadioGroup } from "@/components/Radio/RadioCustom";
-import { MainColor } from "@/constants/color-palet";
 import { listDummyReportForum } from "@/lib/dummy-data/forum/report-list";
-import { router } from "expo-router";
 import { useState } from "react";
 import { View } from "react-native";
 

screens/Home/bottomFeatureSection.tsx

@@ -1,52 +1,55 @@
-import { TextCustom } from "@/components";
+import { ClickableCustom, TextCustom } from "@/components";
 import Spacing from "@/components/_ShareComponent/Spacing";
 import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/FontAwesome";
 import { stylesHome } from "./homeViewStyle";
+import { router } from "expo-router";
 
 export default function Home_BottomFeatureSection() {
   return (
     <>
-      <View style={stylesHome.jobVacancyContainer}>
-        <View style={stylesHome.jobVacancyHeader}>
-          <Icon name="briefcase" size={24} color="white" />
-          <Spacing width={10}/>
-          <TextCustom bold size="large">
-            Job Vacancy
-          </TextCustom>
-        </View>
-
-        <View style={stylesHome.vacancyList}>
-          {/* Vacancy Item 1 */}
-          <View style={stylesHome.vacancyItem}>
-            {/* <Icon name="user" size={20} color="#FFD700" /> */}
-            <View style={stylesHome.vacancyDetails}>
-              <TextCustom bold color="yellow" truncate size="large">
-                Bagas_banuna
-              </TextCustom>
-              <Spacing height={5} />
-              <TextCustom truncate={2}>
-                Dicari perawat kucing dan perawat anjing
-              </TextCustom>
-            </View>
+      <ClickableCustom onPress={() => router.push("/job")}>
+        <View style={stylesHome.jobVacancyContainer}>
+          <View style={stylesHome.jobVacancyHeader}>
+            <Icon name="briefcase" size={24} color="white" />
+            <Spacing width={10} />
+            <TextCustom bold size="large">
+              Job Vacancy
+            </TextCustom>
           </View>
 
-          {/* Vacancy Item 2 */}
-          <View style={stylesHome.vacancyItem}>
-            {/* <Icon name="user" size={20} color="#FFD700" /> */}
-            <View style={stylesHome.vacancyDetails}>
-              <TextCustom bold color="yellow" truncate size="large">
-                fibramarcell
-              </TextCustom>
-              <Spacing height={5} />
-              <TextCustom truncate={2}>
-                Di Butuhkan Seorang Programer dan Designer
-              </TextCustom>
+          <View style={stylesHome.vacancyList}>
+            {/* Vacancy Item 1 */}
+            <View style={stylesHome.vacancyItem}>
+              {/* <Icon name="user" size={20} color="#FFD700" /> */}
+              <View style={stylesHome.vacancyDetails}>
+                <TextCustom bold color="yellow" truncate size="large">
+                  Bagas_banuna
+                </TextCustom>
+                <Spacing height={5} />
+                <TextCustom truncate={2}>
+                  Dicari perawat kucing dan perawat anjing
+                </TextCustom>
+              </View>
+            </View>
+
+            {/* Vacancy Item 2 */}
+            <View style={stylesHome.vacancyItem}>
+              {/* <Icon name="user" size={20} color="#FFD700" /> */}
+              <View style={stylesHome.vacancyDetails}>
+                <TextCustom bold color="yellow" truncate size="large">
+                  fibramarcell
+                </TextCustom>
+                <Spacing height={5} />
+                <TextCustom truncate={2}>
+                  Di Butuhkan Seorang Programer dan Designer
+                </TextCustom>
+              </View>
             </View>
           </View>
         </View>
-      </View>
+      </ClickableCustom>
     </>
   );
 }