Admin

App-Information
Add:
- screens/Admin/App-Information
- _ShareComponent/Admin
- app/(application)/admin/app-information

### No Issue

app.json

@@ -1,6 +1,6 @@
 {
   "expo": {
-    "name": "hipmi-mobile",
+    "name": "HIPMI BADUNG",
     "slug": "hipmi-mobile",
     "version": "1.0.0",
     "orientation": "portrait",
@@ -38,7 +38,16 @@
           "resizeMode": "contain",
           "backgroundColor": "#ffffff"
         }
-      ]
+      ],
+      [
+        "expo-camera",
+        {
+          "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera",
+          "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone",
+          "recordAudioAndroid": true
+        }
+      ],
+      "expo-font"
     ],
     "experiments": {
       "typedRoutes": true

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

@@ -0,0 +1,9 @@
+import { LandscapeFrameUploaded, ViewWrapper } from "@/components";
+
+export default function PreviewImage() {
+  return (
+    <ViewWrapper>
+      <LandscapeFrameUploaded />
+    </ViewWrapper>
+  );
+}

app/(application)/(image)/take-picture/[id]/index.tsx

@@ -0,0 +1,171 @@
+import {
+    ButtonCustom,
+    Spacing,
+    StackCustom,
+    ViewWrapper
+} from "@/components";
+import AntDesign from "@expo/vector-icons/AntDesign";
+import FontAwesome6 from "@expo/vector-icons/FontAwesome6";
+import { CameraType, CameraView, useCameraPermissions } from "expo-camera";
+import { Image } from "expo-image";
+import * as ImagePicker from "expo-image-picker";
+import { router, useLocalSearchParams } from "expo-router";
+import { useRef, useState } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+
+export default function TakePicture() {
+  const { id } = useLocalSearchParams();
+//   console.log("Take Picture ID >>", id);
+
+  const [permission, requestPermission] = useCameraPermissions();
+  const ref = useRef<CameraView>(null);
+  const [uri, setUri] = useState<string | null>(null);
+  const [facing, setFacing] = useState<CameraType>("back");
+
+  if (!permission?.granted) {
+    return (
+      <View style={styles.container}>
+        <Text style={{ textAlign: "center" }}>
+          We need your permission to use the camera
+        </Text>
+        <Pressable onPress={requestPermission}>
+          <Text style={{ color: "blue", marginTop: 10 }}>Grant permission</Text>
+        </Pressable>
+      </View>
+    );
+  }
+
+  const takePicture = async () => {
+    const photo = await ref.current?.takePictureAsync();
+    setUri(photo?.uri || null);
+  };
+
+  const pickImage = async () => {
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      allowsEditing: true,
+      aspect: [1, 1],
+      quality: 1,
+    });
+
+    if (!result.canceled) {
+      setUri(result.assets[0].uri);
+    }
+  };
+
+  const toggleFacing = () => {
+    setFacing((prev) => (prev === "back" ? "front" : "back"));
+  };
+
+  const renderPicture = () => {
+    return (
+      <View>
+        <Image
+          source={uri ? uri : null}
+          contentFit="contain"
+          style={{ width: 340, aspectRatio: 1 }}
+        />
+        <Spacing />
+
+        <StackCustom >
+          <ButtonCustom onPress={() => setUri(null)} title="Foto ulang" />
+          <ButtonCustom
+            onPress={() => {
+              console.log("Upload picture >>", id);
+              router.back();
+            }}
+            title="Upload Foto"
+          />
+        </StackCustom>
+      </View>
+    );
+  };
+
+  const renderCameraUI = () => {
+    return (
+      <View style={styles.cameraOverlay}>
+        <View style={styles.shutterContainer}>
+          <Pressable onPress={toggleFacing}>
+            <FontAwesome6 name="rotate-left" size={32} color="white" />
+          </Pressable>
+
+          <Pressable onPress={takePicture}>
+            {({ pressed }) => (
+              <View
+                style={[
+                  styles.shutterBtn,
+                  {
+                    opacity: pressed ? 0.5 : 1,
+                  },
+                ]}
+              >
+                <View style={styles.shutterBtnInner} />
+              </View>
+            )}
+          </Pressable>
+
+          <Pressable onPress={pickImage}>
+            <AntDesign name="folderopen" size={32} color="white" />
+          </Pressable>
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <>
+      {uri ? (
+        <ViewWrapper>
+          <View style={styles.container}>{renderPicture()}</View>
+        </ViewWrapper>
+      ) : (
+        <>
+          <CameraView
+            style={styles.camera}
+            ref={ref}
+            facing={facing}
+            responsiveOrientationWhenOrientationLocked
+          />
+          {renderCameraUI()}
+        </>
+      )}
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  camera: {
+    flex: 1,
+    width: "100%",
+  },
+  cameraOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: "flex-end",
+    padding: 44,
+  },
+  shutterContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  shutterBtn: {
+    backgroundColor: "transparent",
+    borderWidth: 5,
+    borderColor: "white",
+    width: 85,
+    height: 85,
+    borderRadius: 45,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  shutterBtnInner: {
+    width: 70,
+    height: 70,
+    borderRadius: 50,
+    backgroundColor: "white",
+  },
+});

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

@@ -0,0 +1,628 @@
+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";
+
+export default function UserLayout() {
+  return (
+    <>
+      <Stack screenOptions={HeaderStyles}>
+        <Stack.Screen
+          name="home"
+          options={{
+            title: "HIPMI",
+            headerLeft: () => (
+              <Ionicons
+                name="search"
+                size={20}
+                color={MainColor.yellow}
+                onPress={() => router.push("/user-search")}
+              />
+            ),
+            headerRight: () => (
+              <Ionicons
+                name="notifications"
+                size={20}
+                color={MainColor.yellow}
+                onPress={() => router.push("/notifications")}
+              />
+            ),
+          }}
+        />
+
+        {/* ========== Profile Section ========= */}
+        <Stack.Screen
+          name="profile"
+          options={{
+            headerShown: false,
+          }}
+        />
+
+        {/* ========== Portofolio Section ========= */}
+        <Stack.Screen
+          name="portofolio"
+          options={{
+            headerShown: false,
+          }}
+        />
+
+        {/* ========== User Search Section ========= */}
+        <Stack.Screen
+          name="user-search/index"
+          options={{
+            title: "Pencarian Pengguna",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        {/* ========== Notification Section ========= */}
+        <Stack.Screen
+          name="notifications/index"
+          options={{
+            title: "Notifikasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        {/* ========== Event Section ========= */}
+        <Stack.Screen
+          name="event/(tabs)"
+          options={{
+            title: "Event",
+            headerLeft: () => (
+              <LeftButtonCustom path="/(application)/(user)/home" />
+            ),
+          }}
+        />
+        <Stack.Screen
+          name="event/create"
+          options={{
+            title: "Tambah Event",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        <Stack.Screen
+          name="event/detail/[id]"
+          options={{
+            title: "Event Detail",
+            headerLeft: () => <LeftButtonCustom />,
+          }}
+        />
+
+        <Stack.Screen
+          name="event/[id]/edit"
+          options={{
+            title: "Edit Event",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        <Stack.Screen
+          name="event/[id]/list-of-participants"
+          options={{
+            title: "Daftar peserta",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        {/* ========== End Event Section ========= */}
+
+        {/* ========== Collaboration Section ========= */}
+        <Stack.Screen
+          name="collaboration/(tabs)"
+          options={{
+            title: "Collaboration",
+            headerLeft: () => <BackButton path="/home" />,
+          }}
+        />
+        <Stack.Screen
+          name="collaboration/create"
+          options={{
+            title: "Tambah Proyek",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="collaboration/[id]/list-of-participants"
+          options={{
+            title: "Daftar Partisipan",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="collaboration/[id]/detail-participant"
+          options={{
+            title: "Partisipasi Proyek",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        <Stack.Screen
+          name="collaboration/[id]/edit"
+          options={{
+            title: "Edit Proyek",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        {/* ========== 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="/crowdfunding" />,
+          }}
+        />
+
+        <Stack.Screen
+          name="donation/create"
+          options={{
+            title: "Tambah Donasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/create-story"
+          options={{
+            title: "Tambah Donasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        <Stack.Screen
+          name="donation/[id]/edit"
+          options={{
+            title: "Edit Donasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/edit-story"
+          options={{
+            title: "Edit Donasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/edit-rekening"
+          options={{
+            title: "Edit Rekening",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/detail-story"
+          options={{
+            title: "Cerita Penggalang",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/infromation-fundrising"
+          options={{
+            title: "Informasi Penggalang Dana",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/list-of-donatur"
+          options={{
+            title: "Daftar Donatur",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/fund-disbursement"
+          options={{
+            title: "Pencairan Dana",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        <Stack.Screen
+          name="donation/[id]/(news)/recap-of-news"
+          options={{
+            title: "Rekap Kabar",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/(news)/add-news"
+          options={{
+            title: "Tambah Berita",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/(news)/[news]/edit-news"
+          options={{
+            title: "Edit Berita",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        <Stack.Screen
+          name="donation/[id]/(transaction-flow)/index"
+          options={{
+            title: "Donasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/(transaction-flow)/select-bank"
+          options={{
+            title: "Pilih Bank",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/(transaction-flow)/[transaction]/invoice"
+          options={{
+            title: "Invoice",
+            headerLeft: () => (
+              <Ionicons
+                name="close"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.yellow}
+                onPress={() => router.navigate(`/donation/(tabs)/my-donation`)}
+              />
+            ),
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/(transaction-flow)/[transaction]/process"
+          options={{
+            title: "Proses",
+            headerLeft: () => (
+              <Ionicons
+                name="close"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.yellow}
+                onPress={() => router.navigate(`/donation/(tabs)/my-donation`)}
+              />
+            ),
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/(transaction-flow)/[transaction]/success"
+          options={{
+            title: "Donasi Berhasil",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/(transaction-flow)/[transaction]/failed"
+          options={{
+            title: "Donasi Gagal",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        {/* ========== End Donation Section ========= */}
+
+        {/* ========== 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"
+          options={{
+            title: "Tambah Diskusi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="forum/[id]/edit"
+          options={{
+            title: "Edit Diskusi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="forum/[id]/forumku"
+          options={{
+            title: "Forumku",
+            headerLeft: () => <BackButton icon={"close"} />,
+          }}
+        />
+        <Stack.Screen
+          name="forum/[id]/index"
+          options={{
+            title: "Detail",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="forum/[id]/report-commentar"
+          options={{
+            title: "Laporkan Komentar",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="forum/[id]/other-report-commentar"
+          options={{
+            title: "Laporkan Komentar",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="forum/[id]/report-posting"
+          options={{
+            title: "Laporkan Diskusi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="forum/[id]/other-report-posting"
+          options={{
+            title: "Laporkan Diskusi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        {/* ========== Maps Section ========= */}
+        <Stack.Screen
+          name="maps/index"
+          options={{
+            title: "Maps",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="maps/create"
+          options={{
+            title: "Tambah Maps",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="maps/[id]/edit"
+          options={{
+            title: "Edit Maps",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="maps/[id]/custom-pin"
+          options={{
+            title: "Custom Pin Maps",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        {/* ========== Marketplace Section ========= */}
+        <Stack.Screen
+          name="marketplace/index"
+          options={{
+            title: "Market Place",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+      </Stack>
+    </>
+  );
+}

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

@@ -0,0 +1,36 @@
+import { IconHome } from "@/components/_Icon";
+import { TabsStyles } from "@/styles/tabs-styles";
+import { Ionicons } from "@expo/vector-icons";
+import { Tabs } from "expo-router";
+
+export default function CollaborationTabsLayout() {
+  return (
+    <Tabs screenOptions={TabsStyles}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Beranda",
+          tabBarIcon: ({ color }) => <IconHome color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="participant"
+        options={{
+          title: "Partisipan",
+          tabBarIcon: ({ color }) => (
+            <Ionicons size={20} name="people" color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="group"
+        options={{
+          title: "Grup",
+          tabBarIcon: ({ color }) => (
+            <Ionicons size={20} name="chatbox-ellipses" color={color} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}

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

@@ -0,0 +1,68 @@
+import { BaseBox, Grid, TextCustom } from "@/components";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { MainColor } from "@/constants/color-palet";
+import { Feather } from "@expo/vector-icons";
+
+export default function CollaborationGroup() {
+  
+
+  return (
+    <ViewWrapper hideFooter>
+      {Array.from({ length: 10 }).map((_, index) => (
+        <BaseBox
+          key={index}
+          paddingBlock={5}
+          href={`/collaboration/${index}/${generateProjectName()}/room-chat`}
+        >
+          <Grid>
+            <Grid.Col span={10}>
+              <TextCustom bold>{generateProjectName()}</TextCustom>
+              <TextCustom size="small">2 Anggota</TextCustom>
+            </Grid.Col>
+            <Grid.Col
+              span={2}
+              style={{ alignItems: "flex-end", justifyContent: "center" }}
+            >
+              <Feather name="chevron-right" size={20} color={MainColor.white} />
+            </Grid.Col>
+          </Grid>
+        </BaseBox>
+      ))}
+    </ViewWrapper>
+  );
+}
+
+
+function generateProjectName() {
+  const adjectives = [
+    "Blue",
+    "Dark",
+    "Bright",
+    "Quantum",
+    "Silent",
+    "Cyber",
+    "Epic",
+    "Golden",
+    "Shadow",
+    "Rapid",
+  ];
+
+  const nouns = [
+    "Spark",
+    "Core",
+    "Orbit",
+    "Nest",
+    "Drive",
+    "Nova",
+    "Cloud",
+    "Blade",
+    "Matrix",
+    "Link",
+  ];
+
+  const randomAdjective =
+    adjectives[Math.floor(Math.random() * adjectives.length)];
+  const randomNoun = nouns[Math.floor(Math.random() * nouns.length)];
+
+  return randomAdjective + randomNoun;
+}

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

@@ -0,0 +1,28 @@
+import { FloatingButton, ViewWrapper } from "@/components";
+import Collaboration_BoxPublishSection from "@/screens/Collaboration/BoxPublishSection";
+import { router } from "expo-router";
+
+export default function CollaborationBeranda() {
+  return (
+    <>
+      <ViewWrapper
+        hideFooter
+        floatingButton={
+          <FloatingButton
+            onPress={() => {
+              router.push("/collaboration/create");
+            }}
+          />
+        }
+      >
+        {Array.from({ length: 10 }).map((_, index) => (
+          <Collaboration_BoxPublishSection
+            key={index}
+            id={index.toString()}
+            href={`/collaboration/${index}`}
+          />
+        ))}
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -0,0 +1,77 @@
+import { ButtonCustom, Spacing } from "@/components";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import Collaboration_BoxPublishSection from "@/screens/Collaboration/BoxPublishSection";
+import { useState } from "react";
+import { View } from "react-native";
+
+export default function CollaborationParticipans() {
+  const [activeCategory, setActiveCategory] = useState<string | null>(
+    "participant"
+  );
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item);
+    // tambahkan logika lain seperti filter dsb.
+  };
+
+  const headerComponent = (
+    <View
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        padding: 5,
+        backgroundColor: MainColor.soft_darkblue,
+        borderRadius: 50,
+        width: "100%",
+      }}
+    >
+      <ButtonCustom
+        backgroundColor={
+          activeCategory === "participant" ? MainColor.yellow : AccentColor.blue
+        }
+        textColor={
+          activeCategory === "participant" ? MainColor.black : MainColor.white
+        }
+        style={{ width: "49%" }}
+        onPress={() => handlePress("participant")}
+      >
+        Partisipasi Proyek
+      </ButtonCustom>
+      <Spacing width={"2%"} />
+      <ButtonCustom
+        backgroundColor={
+          activeCategory === "main" ? MainColor.yellow : AccentColor.blue
+        }
+        textColor={
+          activeCategory === "main" ? MainColor.black : MainColor.white
+        }
+        style={{ width: "49%" }}
+        onPress={() => handlePress("main")}
+      >
+        Proyek Saya
+      </ButtonCustom>
+    </View>
+  );
+
+  return (
+    <ViewWrapper hideFooter headerComponent={headerComponent}>
+      {Array.from({ length: 10 }).map((_, index) => (
+        <Collaboration_BoxPublishSection
+          key={index.toString()}
+          id={index.toString()}
+          username={` ${
+            activeCategory === "participant"
+              ? "Partisipasi Proyek"
+              : "Proyek Saya"
+          }`}
+          href={
+            activeCategory === "participant"
+              ? `/collaboration/${index}/detail-participant`
+              : `/collaboration/${index}/detail-project-main`
+          }
+        />
+      ))}
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/collaboration/[id]/[detail]/info.tsx

@@ -0,0 +1,73 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  AvatarUsernameAndOtherComponent,
+  BackButton,
+  BoxWithHeaderSection,
+  Grid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { Stack, useLocalSearchParams } from "expo-router";
+
+export default function CollaborationRoomInfo() {
+  const { id, detail } = useLocalSearchParams();
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: `Info`,
+          headerLeft: () => <BackButton />,
+        }}
+      />
+
+      <ViewWrapper>
+        <BoxWithHeaderSection>
+          <StackCustom>
+            {listData.map((item, index) => (
+              <Grid key={index}>
+                <Grid.Col span={4}>
+                  <TextCustom bold>{item.title}</TextCustom>
+                </Grid.Col>
+                <Grid.Col span={8}>
+                  <TextCustom>{item.value}</TextCustom>
+                </Grid.Col>
+              </Grid>
+            ))}
+          </StackCustom>
+        </BoxWithHeaderSection>
+
+        <BoxWithHeaderSection>
+          {Array.from({ length: 10 }).map((_, index) => (
+            <AvatarUsernameAndOtherComponent key={index} avatarHref={`/profile/${index}`} />
+          ))}
+        </BoxWithHeaderSection>
+      </ViewWrapper>
+    </>
+  );
+}
+
+const listData = [
+  {
+    title: "Judul Proyek",
+    value: "Judul Proyek",
+  },
+  {
+    title: "Industri",
+    value: "Pilihan Industri",
+  },
+  {
+    title: "Deskripsi",
+    value: "Deskripsi Proyek",
+  },
+  {
+    title: "Tujuan Proyek",
+    value:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+  {
+    title: "Keuntungan Proyek",
+    value:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+];

app/(application)/(user)/collaboration/[id]/[detail]/room-chat.tsx

@@ -0,0 +1,192 @@
+import {
+  BackButton,
+  BoxButtonOnFooter,
+  Grid,
+  TextCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { Feather } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
+
+export default function CollaborationRoomChat() {
+  const { id, detail } = useLocalSearchParams();
+
+  const inputChat = () => {
+    return (
+      <>
+        <BoxButtonOnFooter>
+          {/* <View style={{flexDirection: 'row', alignItems: 'center'}}>
+            <TextInputCustom placeholder="Ketik pesan..." />
+            <TouchableOpacity
+              activeOpacity={0.5}
+              onPress={() => console.log("Send")}
+              style={{
+                backgroundColor: AccentColor.blue,
+                padding: 10,
+                borderRadius: 50,
+              }}
+            >
+              <Feather name="send" size={30} color={MainColor.white} />
+            </TouchableOpacity>
+          </View> */}
+          <Grid>
+            <Grid.Col span={9}>
+              <TextInputCustom placeholder="Ketik pesan..." />
+            </Grid.Col>
+            <Grid.Col span={1}>
+              <View />
+            </Grid.Col>
+            <Grid.Col span={2} style={{ alignItems: "center" }}>
+              <TouchableOpacity
+                activeOpacity={0.5}
+                onPress={() => console.log("Send")}
+                style={{
+                  backgroundColor: AccentColor.blue,
+                  padding: 10,
+                  borderRadius: 50,
+                }}
+              >
+                <Feather
+                  name="send"
+                  size={30}
+                  color={MainColor.white}
+                />
+              </TouchableOpacity>
+            </Grid.Col>
+          </Grid>
+        </BoxButtonOnFooter>
+      </>
+    );
+  };
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: `Proyek ${detail}`,
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <Feather
+              name="info"
+              size={ICON_SIZE_SMALL}
+              color={MainColor.yellow}
+              onPress={() => router.push(`/collaboration/${id}/${detail}/info`)}
+            />
+          ),
+        }}
+      />
+      <ViewWrapper footerComponent={inputChat()}>
+        {dummyData.map((item, index) => (
+          <View
+            key={index}
+            style={[
+              styles.messageRow,
+              item.role === 1 ? styles.rightAlign : styles.leftAlign,
+            ]}
+          >
+            <View
+              style={[
+                styles.bubble,
+                item.role === 1 ? styles.bubbleRight : styles.bubbleLeft,
+              ]}
+            >
+              <TextCustom style={styles.sender}>{item.nama}</TextCustom>
+              <TextCustom style={styles.message}>{item.chat}</TextCustom>
+              <TextCustom style={styles.time}>
+                {new Date(item.time).toLocaleTimeString([], {
+                  hour: "2-digit",
+                  minute: "2-digit",
+                })}
+              </TextCustom>
+            </View>
+          </View>
+        ))}
+        {/* <TextInputCustom placeholder="Ketik pesan..." />
+        <Spacing/> */}
+      </ViewWrapper>
+    </>
+  );
+}
+
+const dummyData = [
+  {
+    nama: "Dina",
+    role: 1,
+    chat: "Hai! Kamu udah lihat dokumen proyek yang baru?",
+    time: "2025-07-24T09:01:15Z",
+  },
+  {
+    nama: "Rafi",
+    role: 2,
+    chat: "Halo! Iya, aku baru aja baca. Kayaknya kita harus revisi bagian akhir deh.",
+    time: "2025-07-24T09:02:03Z",
+  },
+  {
+    nama: "Dina",
+    role: 1,
+    chat: "Setuju. Aku juga kurang sreg sama penutupnya.",
+    time: "2025-07-24T09:02:45Z",
+  },
+  {
+    nama: "Rafi",
+    role: 2,
+    chat: "Oke, aku coba edit malam ini ya. Nanti aku share ulang versinya.",
+    time: "2025-07-24T09:03:10Z",
+  },
+  {
+    nama: "Dina",
+    role: 1,
+    chat: "Siap, makasih ya. Jangan begadang!",
+    time: "2025-07-24T09:03:30Z",
+  },
+];
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+  },
+  messageRow: {
+    flexDirection: "row",
+    marginBottom: 12,
+  },
+  rightAlign: {
+    justifyContent: "flex-end",
+  },
+  leftAlign: {
+    justifyContent: "flex-start",
+  },
+  bubble: {
+    maxWidth: "75%",
+    padding: 10,
+    borderRadius: 12,
+  },
+  bubbleRight: {
+    backgroundColor: "#DCF8C6", // hijau muda
+    borderTopRightRadius: 0,
+  },
+  bubbleLeft: {
+    backgroundColor: "#F0F0F0", // abu-abu terang
+    borderTopLeftRadius: 0,
+  },
+  sender: {
+    fontSize: 12,
+    fontWeight: "bold",
+    marginBottom: 2,
+    color: "#555",
+  },
+  message: {
+    fontSize: 15,
+    color: "#000",
+  },
+  time: {
+    fontSize: 10,
+    color: "#888",
+    textAlign: "right",
+    marginTop: 4,
+  },
+});

app/(application)/(user)/collaboration/[id]/detail-participant.tsx

@@ -0,0 +1,62 @@
+import {
+  AvatarUsernameAndOtherComponent,
+  BaseBox,
+  DrawerCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection";
+import { MaterialIcons } from "@expo/vector-icons";
+import { useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function CollaborationDetailParticipant() {
+  const { id } = useLocalSearchParams();
+  const [openDrawerParticipant, setOpenDrawerParticipant] = useState(false);
+
+  return (
+    <>
+      <ViewWrapper>
+        <Collaboration_BoxDetailSection id={id as string} />
+        <BaseBox style={{ height: 500 }}>
+            <TextCustom align="center" bold size="large">
+              Partisipan
+            </TextCustom>
+
+            {Array.from({ length: 5 }).map((_, index) => (
+              <AvatarUsernameAndOtherComponent
+                key={index}
+                avatarHref={`/profile/${index}`}
+                rightComponent={
+                  <MaterialIcons
+                    name="notes"
+                    size={ICON_SIZE_SMALL}
+                    color="white"
+                    onPress={() => setOpenDrawerParticipant(true)}
+                  />
+                }
+              />
+            ))}
+        </BaseBox>
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawerParticipant}
+        closeDrawer={() => setOpenDrawerParticipant(false)}
+        height={"auto"}
+      >
+        <StackCustom>
+          <TextCustom bold>Deskripsi Diri</TextCustom>
+          <TextCustom>
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi,
+            itaque adipisci. Voluptas, sed quod! Ad facere labore voluptates,
+            neque quidem aut reprehenderit ducimus mollitia quisquam temporibus!
+            Temporibus iusto soluta necessitatibus.
+          </TextCustom>
+        </StackCustom>
+      </DrawerCustom>
+    </>
+  );
+}

app/(application)/(user)/collaboration/[id]/detail-project-main.tsx

@@ -0,0 +1,106 @@
+import {
+  AlertDefaultSystem,
+  BackButton,
+  ButtonCustom,
+  DotButton,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper
+} from "@/components";
+import { IconEdit } from "@/components/_Icon";
+import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection";
+import Collaboration_MainParticipanSelectedSection from "@/screens/Collaboration/ProjectMainSelectedSection";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function CollaborationDetailProjectMain() {
+  const { id } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [openDrawerParticipant, setOpenDrawerParticipant] = useState(false);
+  const [selected, setSelected] = useState<(string | number)[]>([]);
+
+  const handleEdit = () => {
+    console.log("Edit collaboration");
+    router.push("/(application)/(user)/collaboration/(id)/edit");
+  };
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Proyek Saya",
+          headerLeft: () => <BackButton />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+        }}
+      />
+      <ViewWrapper>
+        <Collaboration_BoxDetailSection id={id as string} />
+        <Collaboration_MainParticipanSelectedSection
+          selected={selected}
+          setSelected={setSelected}
+          setOpenDrawerParticipant={setOpenDrawerParticipant}
+        />
+
+        <ButtonCustom
+          onPress={() => {
+            AlertDefaultSystem({
+              title: "Buat Grup",
+              message:
+                "Apakah anda yakin ingin membuat grup untuk proyek ini ?",
+              textLeft: "Tidak",
+              textRight: "Ya",
+              onPressLeft: () => {},
+              onPressRight: () => {
+                router.navigate(
+                  "/(application)/(user)/collaboration/(tabs)/group"
+                );
+                console.log("selected :", selected);
+              },
+            });
+          }}
+        >
+          Buat Grup
+        </ButtonCustom>
+        <Spacing />
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              label: "Edit",
+              path: "/(application)/(user)/collaboration/(tabs)/group",
+              icon: <IconEdit />,
+            },
+          ]}
+          onPressItem={(item) => {
+            handleEdit();
+          }}
+        />
+      </DrawerCustom>
+
+      <DrawerCustom
+        isVisible={openDrawerParticipant}
+        closeDrawer={() => setOpenDrawerParticipant(false)}
+        height={"auto"}
+      >
+        <StackCustom>
+          <TextCustom bold>Deskripsi Diri</TextCustom>
+          <TextCustom>
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi,
+            itaque adipisci. Voluptas, sed quod! Ad facere labore voluptates,
+            neque quidem aut reprehenderit ducimus mollitia quisquam temporibus!
+            Temporibus iusto soluta necessitatibus.
+          </TextCustom>
+        </StackCustom>
+      </DrawerCustom>
+    </>
+  );
+}

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

@@ -0,0 +1,53 @@
+import {
+  ButtonCustom,
+  SelectCustom,
+  StackCustom,
+  TextAreaCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { router } from "expo-router";
+
+export default function CollaborationEdit() {
+  return (
+    <ViewWrapper>
+      <StackCustom gap={"xs"}>
+        <TextInputCustom label="Judul" placeholder="Masukan judul" required />
+        <TextInputCustom label="Lokasi" placeholder="Masukan lokasi" required />
+        <SelectCustom
+          label="Pilih Industri"
+          data={[
+            { label: "Industri 1", value: "industri-1" },
+            { label: "Industri 2", value: "industri-2" },
+            { label: "Industri 3", value: "industri-3" },
+          ]}
+          onChange={(value) => console.log(value)}
+        />
+
+        <TextAreaCustom
+          required
+          label="Tujuan Proyek"
+          placeholder="Masukan tujuan proyek"
+          showCount
+          maxLength={1000}
+        />
+
+        <TextAreaCustom
+          required
+          label="Keuntungan Proyek"
+          placeholder="Masukan keuntungan proyek"
+          showCount
+          maxLength={1000}
+        />
+
+        <ButtonCustom
+          title="Update"
+          onPress={() => {
+            console.log("Update proyek");
+            router.back();
+          }}
+        />
+      </StackCustom>
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,91 @@
+import {
+  AlertDefaultSystem,
+  BackButton,
+  ButtonCustom,
+  DotButton,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  TextAreaCustom,
+  ViewWrapper,
+} from "@/components";
+import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection";
+import { Ionicons } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function CollaborationDetail() {
+  const { id } = useLocalSearchParams();
+  const [openDrawerPartisipasi, setOpenDrawerPartisipasi] = useState(false);
+  const [openDrawerMenu, setOpenDrawerMenu] = useState(false);
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Detail Proyek",
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <DotButton onPress={() => setOpenDrawerMenu(true)} />
+          ),
+        }}
+      />
+      <ViewWrapper>
+        <Collaboration_BoxDetailSection id={id as string} />
+
+        <ButtonCustom onPress={() => setOpenDrawerPartisipasi(true)}>
+          Partisipasi
+        </ButtonCustom>
+      </ViewWrapper>
+
+      {/* Drawer Partisipasi */}
+      <DrawerCustom
+        isVisible={openDrawerPartisipasi}
+        closeDrawer={() => setOpenDrawerPartisipasi(false)}
+        height={300}
+      >
+        <TextAreaCustom
+          label="Dekripsi diri"
+          placeholder="Masukan dekripsi diri"
+          required
+          showCount
+          maxLength={500}
+        />
+
+        <ButtonCustom
+          style={{ alignSelf: "flex-end" }}
+          onPress={() => {
+            AlertDefaultSystem({
+              title: "Simpan data deskripsi",
+              message: "Apakah anda sudah yakin ingin menyimpan data ini ?",
+              textLeft: "Batal",
+              textRight: "Simpan",
+              onPressRight: () => router.replace(`/collaboration/(tabs)/group`),
+            });
+          }}
+        >
+          Simpan
+        </ButtonCustom>
+      </DrawerCustom>
+
+      {/* Drawer Menu */}
+      <DrawerCustom
+        isVisible={openDrawerMenu}
+        closeDrawer={() => setOpenDrawerMenu(false)}
+        height={250}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <Ionicons name="people" size={24} color="white" />,
+              label: "Daftar Partisipan",
+              path: `/collaboration/${id}/list-of-participants`,
+            },
+          ]}
+          onPressItem={(item) => {
+            router.push(item.path as any);
+            setOpenDrawerMenu(false);
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

app/(application)/(user)/collaboration/[id]/list-of-participants.tsx

@@ -0,0 +1,82 @@
+import {
+    AvatarUsernameAndOtherComponent,
+    BaseBox,
+    DrawerCustom,
+    Spacing,
+    StackCustom,
+    TextCustom,
+    ViewWrapper
+} from "@/components";
+import { Feather } from "@expo/vector-icons";
+import { useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import { ScrollView } from "react-native";
+
+export default function CollaborationListOfParticipants() {
+  const { id } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+  return (
+    <>
+      <ViewWrapper>
+        {Array.from({ length: 10 }).map((_, index) => (
+          <BaseBox key={index} paddingBlock={5}>
+            <AvatarUsernameAndOtherComponent
+              avatarHref={`/profile/${id}`}
+              rightComponent={
+                <Feather
+                  name="chevron-right"
+                  size={24}
+                  color="white"
+                  onPress={() => setOpenDrawer(true)}
+                />
+              }
+            />
+          </BaseBox>
+        ))}
+      </ViewWrapper>
+
+      {/* Drawer */}
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+      >
+        <StackCustom>
+          <TextCustom bold>Deskripsi diri</TextCustom>
+          <BaseBox>
+            <ScrollView style={{ height: "80%" }}>
+              <TextCustom>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
+                ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
+                ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
+                ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut iqua.Lorem ipsum dolor sit amet,
+                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
+                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
+                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
+                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
+                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
+                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
+                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
+                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                labore et dolore magna aliqua.
+              </TextCustom>
+            </ScrollView>
+          </BaseBox>
+          <Spacing />
+        </StackCustom>
+      </DrawerCustom>
+    </>
+  );
+}

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

@@ -0,0 +1,53 @@
+import {
+    ButtonCustom,
+    SelectCustom,
+    StackCustom,
+    TextAreaCustom,
+    TextInputCustom,
+    ViewWrapper
+} from "@/components";
+import { router } from "expo-router";
+
+export default function CollaborationCreate() {
+  return (
+    <ViewWrapper>
+      <StackCustom gap={"xs"}>
+        <TextInputCustom label="Judul" placeholder="Masukan judul" required />
+        <TextInputCustom label="Lokasi" placeholder="Masukan lokasi" required />
+        <SelectCustom
+          label="Pilih Industri"
+          data={[
+            { label: "Industri 1", value: "industri-1" },
+            { label: "Industri 2", value: "industri-2" },
+            { label: "Industri 3", value: "industri-3" },
+          ]}
+          onChange={(value) => console.log(value)}
+        />
+
+        <TextAreaCustom
+          required
+          label="Tujuan Proyek"
+          placeholder="Masukan tujuan proyek"
+          showCount
+          maxLength={1000}
+        />
+
+        <TextAreaCustom
+          required
+          label="Keuntungan Proyek"
+          placeholder="Masukan keuntungan proyek"
+          showCount
+          maxLength={1000}
+        />
+
+        <ButtonCustom
+          title="Simpan"
+          onPress={() => {
+            console.log("Simpan proyek");
+            router.back();
+          }}
+        />
+      </StackCustom>
+    </ViewWrapper>
+  );
+}

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,21 @@
+import {
+  FloatingButton,
+  ViewWrapper
+} from "@/components";
+import Donation_BoxPublish from "@/screens/Donation/BoxPublish";
+import { router } from "expo-router";
+
+export default function DonationBeranda() {
+  return (
+    <ViewWrapper
+      hideFooter
+      floatingButton={
+        <FloatingButton onPress={() => router.push("/donation/create")} />
+      }
+    >
+      {Array.from({ length: 10 }).map((_, index) => (
+        <Donation_BoxPublish key={index} id={index.toString()}/>
+      ))}
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,76 @@
+import {
+  BadgeCustom,
+  BaseBox,
+  DummyLandscapeImage,
+  Grid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { dummyMasterStatusTransaction } from "@/lib/dummy-data/_master/status-transaction";
+import { router } from "expo-router";
+import { View } from "react-native";
+
+export default function DonationMyDonation() {
+  const randomStatusData = Array.from({ length: 10 }, () => {
+    const randomIndex = Math.floor(
+      Math.random() * dummyMasterStatusTransaction.length
+    );
+    return dummyMasterStatusTransaction[randomIndex];
+  });
+
+  const handlePress = (value: string) => {
+    if (value === "menunggu") {
+      router.push(`/donation/${value}/(transaction-flow)/123/invoice`);
+    } else if (value === "proses") {
+      router.push(`/donation/${value}/(transaction-flow)/123/process`);
+    } else if (value === "berhasil") {
+      router.push(`/donation/${value}/(transaction-flow)/123/success`);
+    } else if (value === "gagal") {
+      router.push(`/donation/${value}/(transaction-flow)/123/failed`);
+    }
+  };
+
+  return (
+    <ViewWrapper hideFooter>
+      {randomStatusData.map((item, index) => (
+        <BaseBox
+          key={index}
+          paddingTop={7}
+          paddingBottom={7}
+          onPress={() => {
+            handlePress(item.value);
+          }}
+        >
+          <Grid>
+            <Grid.Col span={5}>
+              <DummyLandscapeImage height={100} unClickPath />
+            </Grid.Col>
+            <Grid.Col span={1}>
+              <View />
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <StackCustom gap={"sm"}>
+                <View>
+                  <TextCustom truncate>
+                    Judul Donasi: Lorem ipsum dolor sit amet consectetur
+                    adipisicing elit.
+                  </TextCustom>
+                </View>
+                <View>
+                  <TextCustom>Donasi Saya</TextCustom>
+                  <TextCustom bold color="yellow">
+                    Rp. 7.500.000
+                  </TextCustom>
+                </View>
+                <BadgeCustom variant="light" color={item.color} fullWidth>
+                  {item.label}
+                </BadgeCustom>
+              </StackCustom>
+            </Grid.Col>
+          </Grid>
+        </BaseBox>
+      ))}
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,38 @@
+import { ScrollableCustom, ViewWrapper } from "@/components";
+import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
+import Donasi_BoxStatus from "@/screens/Donation/BoxStatus";
+import { useState } from "react";
+
+export default function DonationStatus() {
+  const [activeCategory, setActiveCategory] = useState<string | null>(
+    "publish"
+  );
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+    // tambahkan logika lain seperti filter dsb.
+  };
+
+  const scrollComponent = (
+    <ScrollableCustom
+      data={dummyMasterStatus.map((e, i) => ({
+        id: i,
+        label: e.label,
+        value: e.value,
+      }))}
+      onButtonPress={handlePress}
+      activeId={activeCategory as any}
+    />
+  );
+  return (
+    <ViewWrapper hideFooter headerComponent={scrollComponent}>
+      {Array.from({ length: 10 }).map((_, index) => (
+        <Donasi_BoxStatus
+          key={index}
+          id={index.toString()}
+          status={activeCategory as string}
+        />
+      ))}
+    </ViewWrapper>
+  );
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,32 @@
+import { ViewWrapper, StackCustom, InformationBox, TextInputCustom, Spacing, ButtonCustom } from "@/components";
+import { router } from "expo-router";
+
+export default function DonationEditRekening() {
+  return (
+    <ViewWrapper>
+      <StackCustom gap={"xs"}>
+        <InformationBox text="Pastikan Anda mengisi nama bank dan nomor rekening dengan benar. Informasi ini akan membantu admin memverifikasi dan memproses penggalangan dana Anda dengan cepat dan tepat setelah penggalangan dana dipublikasikan." />
+        <TextInputCustom
+          label="Nama Bank"
+          placeholder="Masukkan nama bank"
+          required
+        />
+        <TextInputCustom
+          label="Nomor Rekening"
+          placeholder="Masukkan nomor rekening"
+          required
+        />
+
+        <Spacing />
+        <ButtonCustom
+          onPress={() => {
+            router.back();
+          }}
+        >
+          Update
+        </ButtonCustom>
+      </StackCustom>
+      <Spacing />
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,56 @@
+import {
+    ButtonCenteredOnly,
+    ButtonCustom,
+    InformationBox,
+    LandscapeFrameUploaded,
+    Spacing,
+    StackCustom,
+    TextAreaCustom,
+    ViewWrapper
+} from "@/components";
+import { router } from "expo-router";
+
+export default function DonationEditStory() {
+  return (
+    <ViewWrapper>
+      <StackCustom gap={"xs"}>
+        <InformationBox text="Cerita Anda adalah kunci untuk menginspirasi kebaikan. Jelaskan dengan jujur dan jelas tujuan penggalangan dana ini agar calon donatur memahami dampak positif yang dapat mereka wujudkan melalui kontribusi mereka." />
+        <TextAreaCustom
+          label="Pembukaan Cerita"
+          placeholder="Masukkan pembukaan cerita"
+          required
+          showCount
+          maxLength={1000}
+        />
+
+        <LandscapeFrameUploaded />
+        <ButtonCenteredOnly
+          onPress={() => {
+            router.push("/(application)/(image)/take-picture/123");
+          }}
+          icon="upload"
+        >
+          Upload
+        </ButtonCenteredOnly>
+        <Spacing />
+        <TextAreaCustom
+          label="Tujuan Donasi"
+          placeholder="Masukkan tujuan donasi"
+          required
+          showCount
+          maxLength={1000}
+        />
+
+        <Spacing height={40} />
+        <ButtonCustom
+          onPress={() => {
+            router.back();
+          }}
+        >
+          Update
+        </ButtonCustom>
+      </StackCustom>
+      <Spacing />
+    </ViewWrapper>
+  );
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,79 @@
+import {
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  SelectCustom,
+  Spacing,
+  StackCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { dummyDonasiDurasi } from "@/lib/dummy-data/donasi/durasi";
+import { dummyDonasiKategori } from "@/lib/dummy-data/donasi/kategori";
+import { router } from "expo-router";
+
+export default function 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"
+        />
+
+        <LandscapeFrameUploaded />
+        <ButtonCenteredOnly
+          onPress={() => {
+            router.push("/(application)/(image)/take-picture/123");
+          }}
+          icon="upload"
+        >
+          Upload
+        </ButtonCenteredOnly>
+        <Spacing />
+
+        <SelectCustom
+          data={dummyDonasiKategori.map((item) => ({
+            label: item.label,
+            value: item.value,
+          }))}
+          onChange={(value) => console.log(value)}
+          label="Pilih Kategori Donasi"
+          placeholder="Pilih Kategori Donasi"
+          required
+        />
+
+        <SelectCustom
+          data={dummyDonasiDurasi.map((item) => ({
+            label: item.label,
+            value: item.value,
+          }))}
+          onChange={(value) => console.log(value)}
+          label="Pilih Durasi Donasi"
+          placeholder="Pilih Durasi Donasi"
+          required
+        />
+        <Spacing />
+        <ButtonCustom
+          onPress={() => {
+            router.replace("/donation/create-story");
+          }}
+        >
+          Selanjutnya
+        </ButtonCustom>
+        <Spacing />
+      </StackCustom>
+      <Spacing />
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/event/(tabs)/_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 EventTabsLayout() {
+  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)/event/(tabs)/contribution.tsx

@@ -0,0 +1,43 @@
+import {
+  AvatarCustom,
+  AvatarUsernameAndOtherComponent,
+  BoxWithHeaderSection,
+  Grid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper
+} from "@/components";
+import React from "react";
+
+export default function EventContribution() {
+  return (
+    <ViewWrapper hideFooter>
+      {Array.from({ length: 10 }).map((_, index) => (
+        <BoxWithHeaderSection key={index} href={`/event/${index}/contribution`}>
+          <StackCustom>
+            <AvatarUsernameAndOtherComponent
+              avatarHref={`/profile/${index}`}
+              rightComponent={
+                <TextCustom truncate>
+                  {new Date().toLocaleDateString()}
+                </TextCustom>
+              }
+            />
+
+            <TextCustom bold align="center" size="xlarge">
+              Judul Event Disini
+            </TextCustom>
+
+            <Grid>
+              {Array.from({ length: 4 }).map((_, index2) => (
+                <Grid.Col span={3} key={index2}>
+                  <AvatarCustom size="sm" href={`/profile/${index2}`} />
+                </Grid.Col>
+              ))}
+            </Grid>
+          </StackCustom>
+        </BoxWithHeaderSection>
+      ))}
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,68 @@
+import { ButtonCustom, Spacing, TextCustom } from "@/components";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import Event_BoxPublishSection from "@/screens/Event/BoxPublishSection";
+import { useState } from "react";
+import { View } from "react-native";
+
+export default function EventHistory() {
+  const [activeCategory, setActiveCategory] = useState<string | null>("all");
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item);
+    // tambahkan logika lain seperti filter dsb.
+  };
+
+  const headerComponent = (
+    <View
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        padding: 5,
+        backgroundColor: MainColor.soft_darkblue,
+        borderRadius: 50,
+        width: "100%",
+      }}
+    >
+      <ButtonCustom
+        backgroundColor={
+          activeCategory === "all" ? MainColor.yellow : AccentColor.blue
+        }
+        textColor={activeCategory === "all" ? MainColor.black : MainColor.white}
+        style={{ width: "49%" }}
+        onPress={() => handlePress("all")}
+      >
+        Semua Riwayat
+      </ButtonCustom>
+      <Spacing width={"2%"} />
+      <ButtonCustom
+        backgroundColor={
+          activeCategory === "main" ? MainColor.yellow : AccentColor.blue
+        }
+        textColor={
+          activeCategory === "main" ? MainColor.black : MainColor.white
+        }
+        style={{ width: "49%" }}
+        onPress={() => handlePress("main")}
+      >
+        Riwayat Saya
+      </ButtonCustom>
+    </View>
+  );
+
+  return (
+    <ViewWrapper headerComponent={headerComponent} hideFooter>
+      {Array.from({ length: 10 }).map((_, index) => (
+        <Event_BoxPublishSection
+          key={index.toString()}
+          id={index.toString()}
+          username={`Riwayat ${activeCategory === "main" ? "Saya" : "Semua"}`}
+          rightComponentAvatar={
+            <TextCustom>{new Date().toLocaleDateString()}</TextCustom>
+          }
+          href={`/event/${index}/history`}
+        />
+      ))}
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,23 @@
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import FloatingButton from "@/components/Button/FloatingButton";
+import Event_BoxPublishSection from "@/screens/Event/BoxPublishSection";
+import { router } from "expo-router";
+
+export default function EventBeranda() {
+  return (
+    <ViewWrapper
+      hideFooter
+      floatingButton={
+        <FloatingButton onPress={() => router.push("/event/create")} />
+      }
+    >
+      {Array.from({ length: 10 }).map((_, index) => (
+        <Event_BoxPublishSection
+          key={index}
+          id={index.toString()}
+          href={`/event/${index}/publish`}
+        />
+      ))}
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,63 @@
+import {
+    BoxWithHeaderSection,
+    Grid,
+    ScrollableCustom,
+    StackCustom,
+    TextCustom
+} from "@/components";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
+import { useState } from "react";
+
+export default function EventStatus() {
+  const id = "test-id-event";
+
+  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}>
+      <BoxWithHeaderSection href={`/event/${id}/${activeCategory}/detail-event`}>
+        <StackCustom gap={"xs"}>
+          <Grid>
+            <Grid.Col span={8}>
+              <TextCustom truncate bold>
+                Lorem ipsum,{" "}
+                <TextCustom color="green">{activeCategory}</TextCustom> dolor
+                sit amet consectetur adipisicing elit.
+              </TextCustom>
+            </Grid.Col>
+            <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+              <TextCustom>{new Date().toLocaleDateString()}</TextCustom>
+            </Grid.Col>
+          </Grid>
+
+          <TextCustom truncate={2}>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
+            eveniet ab eum ducimus tempore a quia deserunt quisquam. Tempora,
+            atque. Aperiam minima asperiores dicta perferendis quis adipisci,
+            dolore optio porro!
+          </TextCustom>
+        </StackCustom>
+      </BoxWithHeaderSection>
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,117 @@
+import {
+  BaseBox,
+  DotButton,
+  DrawerCustom,
+  Grid,
+  MenuDrawerDynamicGrid,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+import LeftButtonCustom from "@/components/Button/BackButton";
+import Event_AlertButtonStatusSection from "@/screens/Event/AlertButtonStatusSection";
+import Event_ButtonStatusSection from "@/screens/Event/ButtonStatusSection";
+import { menuDrawerDraftEvent } from "@/screens/Event/menuDrawerDraft";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function EventDetailStatus() {
+  const { id, status } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [openAlert, setOpenAlert] = useState(false);
+  const [openDeleteAlert, setOpenDeleteAlert] = useState(false);
+
+  const handlePress = (item: IMenuDrawerItem) => {
+    console.log("PATH >> ", item.path);
+    router.navigate(item.path as any);
+    setOpenDrawer(false);
+  };
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: `Detail ${status === "publish" ? "" : status}`,
+          headerLeft: () => <LeftButtonCustom />,
+          headerRight: () =>
+            status === "draft" ? (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ) : null,
+        }}
+      />
+      <ViewWrapper>
+        <BaseBox>
+          <StackCustom>
+            <TextCustom bold align="center" size="xlarge">
+              Judul event {status}
+            </TextCustom>
+            {listData.map((item, index) => (
+              <Grid key={index}>
+                <Grid.Col span={4}>
+                  <TextCustom bold>{item.title}</TextCustom>
+                </Grid.Col>
+                <Grid.Col span={8}>
+                  <TextCustom>{item.value}</TextCustom>
+                </Grid.Col>
+              </Grid>
+            ))}
+          </StackCustom>
+        </BaseBox>
+        <Event_ButtonStatusSection
+          status={status as string}
+          onOpenAlert={setOpenAlert}
+          onOpenDeleteAlert={setOpenDeleteAlert}
+        />
+        <Spacing />
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={250}
+      >
+        <MenuDrawerDynamicGrid
+          data={menuDrawerDraftEvent({ id: id as string }) as any}
+          columns={4}
+          onPressItem={handlePress as any}
+        />
+      </DrawerCustom>
+
+      <Event_AlertButtonStatusSection
+        id={id as string}
+        status={status as string}
+        openAlert={openAlert}
+        setOpenAlert={setOpenAlert}
+        openDeleteAlert={openDeleteAlert}
+        setOpenDeleteAlert={setOpenDeleteAlert}
+      />
+    </>
+  );
+}
+
+const listData = [
+  {
+    title: "Lokasi",
+    value:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur eveniet ab eum ducimus tempore a quia deserunt quisquam. Tempora, atque. Aperiam minima asperiores dicta perferendis quis adipisci, dolore optio porro!",
+  },
+  {
+    title: "Tipe Acara",
+    value: "Workshop",
+  },
+  {
+    title: "Tanggal Mulai",
+    value: "Senin, 18 Juli 2025, 10:00 WIB",
+  },
+  {
+    title: "Tanggal Berakhir",
+    value: "Selasa, 19 Juli 2025, 12:00 WIB",
+  },
+  {
+    title: "Deskripsi",
+    value:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur eveniet ab eum ducimus tempore a quia deserunt quisquam. Tempora, atque. Aperiam minima asperiores dicta perferendis quis adipisci, dolore optio porro!",
+  },
+];

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

@@ -0,0 +1,51 @@
+import {
+  DotButton,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  ViewWrapper,
+  Spacing,
+} from "@/components";
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+import LeftButtonCustom from "@/components/Button/BackButton";
+import Event_BoxDetailPublishSection from "@/screens/Event/BoxDetailPublishSection";
+import { menuDrawerPublishEvent } from "@/screens/Event/menuDrawerPublish";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function EventDetailContribution() {
+  const { id } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  const handlePress = (item: IMenuDrawerItem) => {
+    console.log("PATH ", item.path);
+    router.navigate(item.path as any);
+    setOpenDrawer(false);
+  };
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: `Detail kontribusi`,
+          headerLeft: () => <LeftButtonCustom />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+        }}
+      />
+      <ViewWrapper>
+        <Event_BoxDetailPublishSection />
+        <Spacing />
+      </ViewWrapper>
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={250}
+      >
+        <MenuDrawerDynamicGrid
+          data={menuDrawerPublishEvent({ id: id as string })}
+          columns={4}
+          onPressItem={handlePress}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

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

@@ -0,0 +1,107 @@
+import {
+  ButtonCustom,
+  SelectCustom,
+  StackCustom,
+  TextAreaCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
+import { masterTypeEvent } from "@/lib/dummy-data/event/master-type-event";
+import { DateTimePickerEvent } from "@react-native-community/datetimepicker";
+import { router } from "expo-router";
+import React, { useState } from "react";
+import { Platform } from "react-native";
+
+export default function EventEdit() {
+  const [selectedDate, setSelectedDate] = useState<
+    Date | DateTimePickerEvent | null
+  >(null);
+
+  const [selectedEndDate, setSelectedEndDate] = useState<
+    Date | DateTimePickerEvent | null
+  >(null);
+
+  const handlerSubmit = () => {
+    try {
+      if (selectedDate) {
+        console.log("Tanggal yang dipilih:", selectedDate);
+        console.log(`ISO Format ${Platform.OS}:`, selectedDate.toString());
+        // Kirim ke API atau proses lanjutan
+      } else {
+        console.log("Tanggal belum dipilih");
+      }
+
+      if (selectedEndDate) {
+        console.log("Tanggal yang dipilih:", selectedEndDate);
+        console.log(`ISO Format ${Platform.OS}:`, selectedEndDate.toString());
+        // Kirim ke API atau proses lanjutan
+      } else {
+        console.log("Tanggal berakhir belum dipilih");
+      }
+
+      console.log("Data berhasil terupdate");
+      router.back()
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const buttonSubmit = (
+    <ButtonCustom title="Update" onPress={handlerSubmit} />
+  );
+
+  return (
+    <>
+      <ViewWrapper>
+        <StackCustom gap={"xs"}>
+          <TextInputCustom
+            placeholder="Masukkan nama event"
+            label="Nama Event"
+            required
+          />
+          <SelectCustom
+            label="Tipe Event"
+            placeholder="Pilih tipe event"
+            data={masterTypeEvent}
+            onChange={(value) => console.log(value)}
+          />
+          <TextInputCustom
+            label="Lokasi"
+            placeholder="Masukkan lokasi event"
+            required
+          />
+
+          <DateTimePickerCustom
+            label="Tanggal & Waktu Mulai"
+            required
+            onChange={(date: Date) => {
+              setSelectedDate(date as any);
+            }}
+            value={selectedDate as any}
+            minimumDate={new Date(Date.now())}
+          />
+
+          <DateTimePickerCustom
+            label="Tanggal & Waktu Berakhir"
+            required
+            onChange={(date: Date) => {
+              setSelectedEndDate(date as any);
+            }}
+            value={selectedEndDate as any}
+          />
+
+          <TextAreaCustom
+            label="Deskripsi"
+            placeholder="Masukkan deskripsi event"
+            required
+            showCount
+            maxLength={100}
+          />
+
+          {buttonSubmit}
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -0,0 +1,51 @@
+import {
+  DotButton,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  ViewWrapper,
+  Spacing,
+} from "@/components";
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+import LeftButtonCustom from "@/components/Button/BackButton";
+import Event_BoxDetailPublishSection from "@/screens/Event/BoxDetailPublishSection";
+import { menuDrawerPublishEvent } from "@/screens/Event/menuDrawerPublish";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function EventDetailHistory() {
+  const { id } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  const handlePress = (item: IMenuDrawerItem) => {
+    console.log("PATH ", item.path);
+    router.navigate(item.path as any);
+    setOpenDrawer(false);
+  };
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: `Detail riwayat`,
+          headerLeft: () => <LeftButtonCustom />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+        }}
+      />
+      <ViewWrapper>
+        <Event_BoxDetailPublishSection />
+        <Spacing />
+      </ViewWrapper>
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={250}
+      >
+        <MenuDrawerDynamicGrid
+          data={menuDrawerPublishEvent({ id: id as string })}
+          columns={4}
+          onPressItem={handlePress}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

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

@@ -0,0 +1,17 @@
+import {
+  AvatarUsernameAndOtherComponent,
+  BaseBox,
+  ViewWrapper,
+} from "@/components";
+
+export default function EventListOfParticipants() {
+  return (
+    <ViewWrapper>
+      {Array.from({ length: 10 }).map((_, index) => (
+        <BaseBox key={index} paddingBlock={0}>
+          <AvatarUsernameAndOtherComponent avatarHref={`/profile/${index}`} />
+        </BaseBox>
+      ))}
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/event/[id]/publish.tsx

@@ -0,0 +1,64 @@
+import {
+    ButtonCustom,
+    DotButton,
+    DrawerCustom,
+    MenuDrawerDynamicGrid,
+    Spacing,
+    ViewWrapper
+} from "@/components";
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+import LeftButtonCustom from "@/components/Button/BackButton";
+import Event_BoxDetailPublishSection from "@/screens/Event/BoxDetailPublishSection";
+import { menuDrawerPublishEvent } from "@/screens/Event/menuDrawerPublish";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import { Alert } from "react-native";
+
+export default function EventDetailPublish() {
+  const { id } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  const handlePress = (item: IMenuDrawerItem) => {
+    console.log("PATH ", item.path);
+    router.navigate(item.path as any);
+    setOpenDrawer(false);
+  };
+
+  const footerButton = (
+    <ButtonCustom
+      backgroundColor="green"
+      textColor="white"
+      onPress={() => Alert.alert("Anda berhasil join event ini")}
+    >
+      Join
+    </ButtonCustom>
+  );
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: `Event publish`,
+          headerLeft: () => <LeftButtonCustom />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+        }}
+      />
+      <ViewWrapper>
+        <Event_BoxDetailPublishSection footerButton={footerButton} />
+        <Spacing />
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={250}
+      >
+        <MenuDrawerDynamicGrid
+          data={menuDrawerPublishEvent({ id: id as string })}
+          columns={4}
+          onPressItem={handlePress}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

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

@@ -0,0 +1,109 @@
+import {
+  ButtonCustom,
+  SelectCustom,
+  StackCustom,
+  TextAreaCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
+import { masterTypeEvent } from "@/lib/dummy-data/event/master-type-event";
+import { DateTimePickerEvent } from "@react-native-community/datetimepicker";
+import { router } from "expo-router";
+import React, { useState } from "react";
+import { Platform } from "react-native";
+
+export default function EventCreate() {
+  const [selectedDate, setSelectedDate] = useState<
+    Date | DateTimePickerEvent | null
+  >(null);
+
+  const [selectedEndDate, setSelectedEndDate] = useState<
+    Date | DateTimePickerEvent | null
+  >(null);
+
+  const handlerSubmit = () => {
+    try {
+      if (selectedDate) {
+        console.log("Tanggal yang dipilih:", selectedDate);
+        console.log(`ISO Format ${Platform.OS}:`, selectedDate.toString());
+        // Kirim ke API atau proses lanjutan
+      } else {
+        console.log("Tanggal belum dipilih");
+      }
+
+      if (selectedEndDate) {
+        console.log("Tanggal yang dipilih:", selectedEndDate);
+        console.log(`ISO Format ${Platform.OS}:`, selectedEndDate.toString());
+        // Kirim ke API atau proses lanjutan
+      } else {
+        console.log("Tanggal berakhir belum dipilih");
+      }
+
+      console.log("Data berhasil disimpan");
+      router.navigate("/event/status");
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const buttonSubmit = (
+    <ButtonCustom title="Simpan" onPress={handlerSubmit} />
+    // <BoxButtonOnFooter>
+    // </BoxButtonOnFooter>
+  );
+
+  return (
+    <>
+      <ViewWrapper>
+        <StackCustom gap={"xs"}>
+          <TextInputCustom
+            placeholder="Masukkan nama event"
+            label="Nama Event"
+            required
+          />
+          <SelectCustom
+            label="Tipe Event"
+            placeholder="Pilih tipe event"
+            data={masterTypeEvent}
+            onChange={(value) => console.log(value)}
+          />
+          <TextInputCustom
+            label="Lokasi"
+            placeholder="Masukkan lokasi event"
+            required
+          />
+
+          <DateTimePickerCustom
+            label="Tanggal & Waktu Mulai"
+            required
+            onChange={(date: Date) => {
+              setSelectedDate(date as any);
+            }}
+            value={selectedDate as any}
+            minimumDate={new Date(Date.now())}
+          />
+
+          <DateTimePickerCustom
+            label="Tanggal & Waktu Berakhir"
+            required
+            onChange={(date: Date) => {
+              setSelectedEndDate(date as any);
+            }}
+            value={selectedEndDate as any}
+          />
+
+          <TextAreaCustom
+            label="Deskripsi"
+            placeholder="Masukkan deskripsi event"
+            required
+            showCount
+            maxLength={100}
+          />
+
+          {buttonSubmit}
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -1,5 +1,5 @@
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { Styles } from "@/styles/global-styles";
+import { GStyles } from "@/styles/global-styles";
 import { useLocalSearchParams } from "expo-router";
 import { Text } from "react-native";
 
@@ -8,7 +8,7 @@ export default function DetailEvent() {
   console.log("id event >", id);
   return (
     <ViewWrapper>
-      <Text style={Styles.textLabel}>Detail Event {id}</Text>
+      <Text style={GStyles.textLabel}>Detail Event {id}</Text>
     </ViewWrapper>
   );
 }

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

@@ -0,0 +1,37 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  TextAreaCustom,
+  ViewWrapper,
+} from "@/components";
+import { router } from "expo-router";
+import { useState } from "react";
+
+export default function ForumEdit() {
+  const [text, setText] = useState("");
+
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => {
+          console.log("Posting", text);
+          router.back();
+        }}
+      >
+        Update
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <ViewWrapper footerComponent={buttonFooter}>
+      <TextAreaCustom
+        placeholder="Ketik diskusi anda..."
+        maxLength={1000}
+        showCount
+        value={text}
+        onChangeText={setText}
+      />
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/forum/[id]/forumku.tsx

@@ -0,0 +1,113 @@
+import {
+  AlertCustom,
+  AvatarCustom,
+  ButtonCustom,
+  CenterCustom,
+  DrawerCustom,
+  Grid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+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 { useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function Forumku() {
+  const { id } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [status, setStatus] = useState("");
+  const [alertStatus, setAlertStatus] = useState(false);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+
+  return (
+    <>
+      <ViewWrapper>
+        <StackCustom>
+          <CenterCustom>
+            <AvatarCustom
+              href={`/(application)/(image)/preview-image/${id}`}
+              size="xl"
+            />
+          </CenterCustom>
+
+          <Grid>
+            <Grid.Col span={6}>
+              <TextCustom bold truncate>
+                @bagas_banuna
+              </TextCustom>
+              <TextCustom>1 postingan</TextCustom>
+            </Grid.Col>
+            <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
+              <ButtonCustom href={`/profile/${id}`}>
+                Kunjungi Profile
+              </ButtonCustom>
+            </Grid.Col>
+          </Grid>
+          {listDummyDiscussionForum.map((e, i) => (
+            <Forum_BoxDetailSection
+              key={i}
+              data={e}
+              setOpenDrawer={setOpenDrawer}
+              setStatus={setStatus}
+              isTruncate={true}
+              href={`/forum/${id}`}
+            />
+          ))}
+        </StackCustom>
+      </ViewWrapper>
+
+      {/* Drawer Komponen Eksternal */}
+      <DrawerCustom
+        height={350}
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+      >
+        <Forum_MenuDrawerBerandaSection
+          id={id as string}
+          status={status}
+          setIsDrawerOpen={() => {
+            setOpenDrawer(false);
+          }}
+          setShowDeleteAlert={setDeleteAlert}
+          setShowAlertStatus={setAlertStatus}
+        />
+      </DrawerCustom>
+
+      {/* Alert Komponen Eksternal */}
+      <AlertCustom
+        isVisible={alertStatus}
+        onLeftPress={() => setAlertStatus(false)}
+        onRightPress={() => {
+          setOpenDrawer(false);
+          setAlertStatus(false);
+          console.log("Ubah status forum");
+        }}
+        title="Ubah Status Forum"
+        message="Apakah Anda yakin ingin mengubah status forum ini?"
+        textLeft="Batal"
+        textRight="Ubah"
+        colorRight={MainColor.green}
+      />
+
+      {/* Alert Delete */}
+      <AlertCustom
+        isVisible={deleteAlert}
+        onLeftPress={() => setDeleteAlert(false)}
+        onRightPress={() => {
+          setOpenDrawer(false);
+          setDeleteAlert(false);
+          console.log("Hapus forum");
+        }}
+        title="Hapus Forum"
+        message="Apakah Anda yakin ingin menghapus forum ini?"
+        textLeft="Batal"
+        textRight="Hapus"
+        colorRight={MainColor.red}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,176 @@
+import {
+  AlertCustom,
+  ButtonCustom,
+  DrawerCustom,
+  Spacing,
+  TextAreaCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import Forum_CommentarBoxSection from "@/screens/Forum/CommentarBoxSection";
+import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
+import { listDummyCommentarForum } from "@/screens/Forum/list-data-dummy";
+import Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
+import Forum_MenuDrawerCommentar from "@/screens/Forum/MenuDrawerSection.tsx/MenuCommentar";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function ForumDetail() {
+  const { id } = useLocalSearchParams();
+  console.log(id);
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [status, setStatus] = useState("");
+  const [alertStatus, setAlertStatus] = useState(false);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [text, setText] = useState("");
+
+  // Comentar
+  const [openDrawerCommentar, setOpenDrawerCommentar] = useState(false);
+  const [alertDeleteCommentar, setAlertDeleteCommentar] = useState(false);
+
+  const dataDummy = {
+    name: "Bagas",
+    status: "Open",
+    date: "14/07/2025",
+    deskripsi:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae inventore iure pariatur, libero omnis excepturi. Ullam ad officiis deleniti quos esse odit nesciunt, ipsam adipisci cumque aliquam corporis culpa fugit?",
+    jumlahBalas: 2,
+  };
+
+  return (
+    <>
+      <ViewWrapper>
+        {/* <StackCustom>
+        </StackCustom> */}
+        <Forum_BoxDetailSection
+          data={dataDummy}
+          setOpenDrawer={setOpenDrawer}
+          setStatus={setStatus}
+        />
+
+        <TextAreaCustom
+          placeholder="Ketik diskusi anda..."
+          maxLength={1000}
+          showCount
+          value={text}
+          onChangeText={setText}
+          style={{
+            marginBottom: 0,
+          }}
+        />
+        <ButtonCustom
+          style={{
+            alignSelf: "flex-end",
+          }}
+          onPress={() => {
+            console.log("Posting", text);
+            router.back();
+          }}
+        >
+          Balas
+        </ButtonCustom>
+
+        <Spacing height={40} />
+
+        {listDummyCommentarForum.map((e, i) => (
+          <Forum_CommentarBoxSection
+            key={i}
+            data={e}
+            setOpenDrawer={setOpenDrawerCommentar}
+          />
+        ))}
+      </ViewWrapper>
+
+      <DrawerCustom
+        height={350}
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+      >
+        <Forum_MenuDrawerBerandaSection
+          id={id as string}
+          status={status}
+          setIsDrawerOpen={() => {
+            setOpenDrawer(false);
+          }}
+          setShowDeleteAlert={setDeleteAlert}
+          setShowAlertStatus={setAlertStatus}
+        />
+      </DrawerCustom>
+
+      {/* Alert Status */}
+      <AlertCustom
+        isVisible={alertStatus}
+        title="Ubah Status Forum"
+        message="Apakah Anda yakin ingin mengubah status forum ini?"
+        onLeftPress={() => {
+          setOpenDrawer(false);
+          setAlertStatus(false);
+          console.log("Batal");
+        }}
+        onRightPress={() => {
+          setOpenDrawer(false);
+          setAlertStatus(false);
+          console.log("Ubah status forum");
+        }}
+        textLeft="Batal"
+        textRight="Ubah"
+        colorRight={MainColor.green}
+      />
+
+      {/* Alert Delete */}
+      <AlertCustom
+        isVisible={deleteAlert}
+        title="Hapus Forum"
+        message="Apakah Anda yakin ingin menghapus forum ini?"
+        onLeftPress={() => {
+          setOpenDrawer(false);
+          setDeleteAlert(false);
+          console.log("Batal");
+        }}
+        onRightPress={() => {
+          setOpenDrawer(false);
+          setDeleteAlert(false);
+          console.log("Hapus forum");
+        }}
+        textLeft="Batal"
+        textRight="Hapus"
+        colorRight={MainColor.red}
+      />
+
+      {/* Commentar */}
+      <DrawerCustom
+        height={350}
+        isVisible={openDrawerCommentar}
+        closeDrawer={() => setOpenDrawerCommentar(false)}
+      >
+        <Forum_MenuDrawerCommentar
+          id={id as string}
+          setIsDrawerOpen={() => {
+            setOpenDrawerCommentar(false);
+          }}
+          setShowDeleteAlert={setAlertDeleteCommentar}
+        />
+      </DrawerCustom>
+
+      {/* Alert Delete Commentar */}
+      <AlertCustom
+        isVisible={alertDeleteCommentar}
+        title="Hapus Komentar"
+        message="Apakah Anda yakin ingin menghapus komentar ini?"
+        onLeftPress={() => {
+          setOpenDrawerCommentar(false);
+          setAlertDeleteCommentar(false);
+          console.log("Batal");
+        }}
+        onRightPress={() => {
+          setOpenDrawerCommentar(false);
+          setAlertDeleteCommentar(false);
+          console.log("Hapus commentar");
+        }}
+        textLeft="Batal"
+        textRight="Hapus"
+        colorRight={MainColor.red}
+      />
+    </>
+  );
+}

app/(application)/(user)/forum/[id]/other-report-commentar.tsx

@@ -0,0 +1,32 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  TextAreaCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { router } from "expo-router";
+
+export default function ForumOtherReportCommentar() {
+  const handleSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        backgroundColor={MainColor.red}
+        textColor={MainColor.white}
+        onPress={() => {
+          console.log("Report lainnya");
+          router.back();
+        }}
+      >
+        Report
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper footerComponent={handleSubmit}>
+        <TextAreaCustom placeholder="Laporkan Komentar" />
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/(user)/forum/[id]/other-report-posting.tsx

@@ -0,0 +1,32 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  TextAreaCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { router } from "expo-router";
+
+export default function ForumOtherReportPosting() {
+  const handleSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        backgroundColor={MainColor.red}
+        textColor={MainColor.white}
+        onPress={() => {
+          console.log("Report lainnya");
+          router.back();
+        }}
+      >
+        Report
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper footerComponent={handleSubmit}>
+        <TextAreaCustom placeholder="Laporkan Diskusi" />
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/(user)/forum/[id]/report-commentar.tsx

@@ -0,0 +1,42 @@
+import {
+    ButtonCustom,
+    Spacing,
+    StackCustom,
+    ViewWrapper
+} from "@/components";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import Forum_ReportListSection from "@/screens/Forum/ReportListSection";
+import { router } from "expo-router";
+
+export default function ForumReportCommentar() {
+  return (
+    <>
+      <ViewWrapper>
+        <StackCustom>
+          <Forum_ReportListSection />
+          <ButtonCustom
+            backgroundColor={MainColor.red}
+            textColor={MainColor.white}
+            onPress={() => {
+              console.log("Report");
+              router.back();
+            }}
+          >
+            Report
+          </ButtonCustom>
+          <ButtonCustom
+            backgroundColor={AccentColor.blue}
+            textColor={MainColor.white}
+            onPress={() => {
+              console.log("Lainnya");
+              router.replace("/forum/[id]/other-report-commentar");
+            }}
+          >
+            Lainnya
+          </ButtonCustom>
+          <Spacing/>
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -0,0 +1,37 @@
+import { ViewWrapper, StackCustom, ButtonCustom, Spacing } from "@/components";
+import { MainColor, AccentColor } from "@/constants/color-palet";
+import Forum_ReportListSection from "@/screens/Forum/ReportListSection";
+import { router } from "expo-router";
+
+export default function ForumReportPosting() {
+    return (
+      <>
+        <ViewWrapper>
+          <StackCustom>
+            <Forum_ReportListSection />
+            <ButtonCustom
+              backgroundColor={MainColor.red}
+              textColor={MainColor.white}
+              onPress={() => {
+                console.log("Report");
+                router.back();
+              }}
+            >
+              Report
+            </ButtonCustom>
+            <ButtonCustom
+              backgroundColor={AccentColor.blue}
+              textColor={MainColor.white}
+              onPress={() => {
+                console.log("Lainnya");
+                router.replace("/forum/[id]/other-report-posting");
+              }}
+            >
+              Lainnya
+            </ButtonCustom>
+            <Spacing />
+          </StackCustom>
+        </ViewWrapper>
+      </>
+    );
+}

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

@@ -0,0 +1,37 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  TextAreaCustom,
+  ViewWrapper,
+} from "@/components";
+import { router } from "expo-router";
+import { useState } from "react";
+
+export default function ForumCreate() {
+  const [text, setText] = useState("");
+
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => {
+          console.log("Posting", text);
+          router.back();
+        }}
+      >
+        Posting
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <ViewWrapper footerComponent={buttonFooter}>
+      <TextAreaCustom
+        placeholder="Ketik diskusi anda..."
+        maxLength={1000}
+        showCount
+        value={text}
+        onChangeText={setText}
+      />
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,113 @@
+import {
+  AlertCustom,
+  AvatarCustom,
+  BackButton,
+  DrawerCustom,
+  SearchInput,
+  ViewWrapper,
+} from "@/components";
+import FloatingButton from "@/components/Button/FloatingButton";
+import { MainColor } from "@/constants/color-palet";
+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 { router, Stack } from "expo-router";
+import { useState } from "react";
+
+export default function Forum() {
+  const id = "test-id-forum";
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [status, setStatus] = useState("");
+  const [alertStatus, setAlertStatus] = useState(false);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Forum",
+          headerLeft: () => <BackButton />,
+          headerRight: () => <AvatarCustom href={`/forum/${id}/forumku`} />,
+        }}
+      />
+
+      <ViewWrapper
+        headerComponent={<SearchInput placeholder="Cari topik diskusi" />}
+        floatingButton={
+          <FloatingButton
+            onPress={() =>
+              router.navigate("/(application)/(user)/forum/create")
+            }
+          />
+        }
+      >
+        {listDummyDiscussionForum.map((e, i) => (
+          <Forum_BoxDetailSection
+            key={i}
+            data={e}
+            setOpenDrawer={setOpenDrawer}
+            setStatus={setStatus}
+            isTruncate={true}
+            href={`/forum/${id}`}
+          />
+        ))}
+      </ViewWrapper>
+
+      <DrawerCustom
+        height={350}
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+      >
+        <Forum_MenuDrawerBerandaSection
+          id={id}
+          status={status}
+          setIsDrawerOpen={() => {
+            setOpenDrawer(false);
+          }}
+          setShowDeleteAlert={setDeleteAlert}
+          setShowAlertStatus={setAlertStatus}
+        />
+      </DrawerCustom>
+
+      {/* Alert Status */}
+      <AlertCustom
+        isVisible={alertStatus}
+        title="Ubah Status Forum"
+        message="Apakah Anda yakin ingin mengubah status forum ini?"
+        onLeftPress={() => {
+          setOpenDrawer(false);
+          setAlertStatus(false);
+          console.log("Batal");
+        }}
+        onRightPress={() => {
+          setOpenDrawer(false);
+          setAlertStatus(false);
+          console.log("Ubah status forum");
+        }}
+        textLeft="Batal"
+        textRight="Ubah"
+        colorRight={MainColor.green}
+      />
+
+      {/* Alert Delete */}
+      <AlertCustom
+        isVisible={deleteAlert}
+        title="Hapus Forum"
+        message="Apakah Anda yakin ingin menghapus forum ini?"
+        onLeftPress={() => {
+          setOpenDrawer(false);
+          setDeleteAlert(false);
+          console.log("Batal");
+        }}
+        onRightPress={() => {
+          setOpenDrawer(false);
+          setDeleteAlert(false);
+          console.log("Hapus forum");
+        }}
+        textLeft="Batal"
+        textRight="Hapus"
+        colorRight={MainColor.red}
+      />
+    </>
+  );
+}

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

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

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

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

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

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

@@ -0,0 +1,136 @@
+import {
+  BackButton,
+  DotButton,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  ViewWrapper,
+} from "@/components";
+import { IconDocument, IconEdit, IconNews } from "@/components/_Icon";
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
+import Investment_ButtonInvestasiSection from "@/screens/Invesment/ButtonInvestasiSection";
+import Invesment_ComponentBoxOnBottomDetail from "@/screens/Invesment/ComponentBoxOnBottomDetail";
+import Invesment_DetailDataPublishSection from "@/screens/Invesment/DetailDataPublishSection";
+import { AntDesign, MaterialIcons } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useState } from "react";
+
+export default function InvestmentDetailStatus() {
+  const { id, status } = useLocalSearchParams();
+  const [openDrawerDraft, setOpenDrawerDraft] = useState(false);
+  const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
+
+  const handlePressDraft = (item: IMenuDrawerItem) => {
+    console.log("PATH >> ", item.path);
+    router.navigate(item.path as any);
+    setOpenDrawerDraft(false);
+  };
+
+  const handlePressPublish = (item: IMenuDrawerItem) => {
+    console.log("PATH >> ", item.path);
+    router.navigate(item.path as any);
+    setOpenDrawerPublish(false);
+  };
+
+  const bottomSection = (
+    <Invesment_ComponentBoxOnBottomDetail
+      id={id as string}
+      status={status as string}
+    />
+  );
+
+  const buttonSection = (
+    <Investment_ButtonInvestasiSection id={id as string} isMine={false} />
+  );
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: `Detail ${_.startCase(status as string)}`,
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            status === "draft" ? (
+              <DotButton onPress={() => setOpenDrawerDraft(true)} />
+            ) : status === "publish" ? (
+              <DotButton onPress={() => setOpenDrawerPublish(true)} />
+            ) : null,
+        }}
+      />
+
+      <ViewWrapper>
+        <Invesment_DetailDataPublishSection
+          status={status as string}
+          bottomSection={bottomSection}
+          buttonSection={buttonSection}
+        />
+      </ViewWrapper>
+
+      {/* ========= Draft Drawer ========= */}
+      <DrawerCustom
+        isVisible={openDrawerDraft}
+        closeDrawer={() => setOpenDrawerDraft(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconEdit />,
+              label: "Edit Data",
+              path: `/investment/${id}/edit`,
+            },
+            {
+              icon: (
+                <AntDesign
+                  name="edit"
+                  size={ICON_SIZE_MEDIUM}
+                  color={MainColor.white}
+                />
+              ),
+              label: "Edit Prospektus",
+              path: `/investment/${id}/edit-prospectus`,
+            },
+            {
+              icon: (
+                <MaterialIcons
+                  name="create"
+                  size={ICON_SIZE_MEDIUM}
+                  color={MainColor.white}
+                />
+              ),
+              label: "Update Dokumen",
+              path: `/investment/${id}/(document)/recap-of-document`,
+            },
+          ]}
+          columns={4}
+          onPressItem={handlePressDraft as any}
+        />
+      </DrawerCustom>
+
+      {/* ========= Publish Drawer ========= */}
+      <DrawerCustom
+        isVisible={openDrawerPublish}
+        closeDrawer={() => setOpenDrawerPublish(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconDocument />,
+              label: "Update Dokumen",
+              path: `/investment/${id}/(document)/recap-of-document`,
+            },
+            {
+              icon: <IconNews />,
+              label: "Update Berita",
+              path: `/investment/${id}/(news)/recap-of-news`,
+            },
+          ]}
+          onPressItem={handlePressPublish as any}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,134 @@
+import {
+  BackButton,
+  DotButton,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  ViewWrapper,
+} from "@/components";
+import { IconDocument, IconEdit, IconNews } from "@/components/_Icon";
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
+import Investment_ButtonInvestasiSection from "@/screens/Invesment/ButtonInvestasiSection";
+import Invesment_ComponentBoxOnBottomDetail from "@/screens/Invesment/ComponentBoxOnBottomDetail";
+import Invesment_DetailDataPublishSection from "@/screens/Invesment/DetailDataPublishSection";
+import { AntDesign, MaterialIcons } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useState } from "react";
+
+export default function InvestmentDetail() {
+  const { id, status } = useLocalSearchParams();
+  const [openDrawerDraft, setOpenDrawerDraft] = useState(false);
+  const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
+
+  const handlePressDraft = (item: IMenuDrawerItem) => {
+    console.log("PATH >> ", item.path);
+    router.navigate(item.path as any);
+    setOpenDrawerDraft(false);
+  };
+
+  const handlePressPublish = (item: IMenuDrawerItem) => {
+    console.log("PATH >> ", item.path);
+    router.navigate(item.path as any);
+    setOpenDrawerPublish(false);
+  };
+
+  const bottomSection = (
+    <Invesment_ComponentBoxOnBottomDetail
+      id={id as string}
+      status={'publish'}
+    />
+  );
+
+  const buttonSection = <Investment_ButtonInvestasiSection id={id as string} isMine={true} />;
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: `Detail ${_.startCase(status as string)}`,
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            status === "draft" ? (
+              <DotButton onPress={() => setOpenDrawerDraft(true)} />
+            ) : status === "publish" ? (
+              <DotButton onPress={() => setOpenDrawerPublish(true)} />
+            ) : null,
+        }}
+      />
+
+      <ViewWrapper>
+        <Invesment_DetailDataPublishSection
+          status={"publish"}
+          bottomSection={bottomSection}
+          buttonSection={buttonSection}
+        />
+      </ViewWrapper>
+
+      {/* ========= Draft Drawer ========= */}
+      <DrawerCustom
+        isVisible={openDrawerDraft}
+        closeDrawer={() => setOpenDrawerDraft(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconEdit />,
+              label: "Edit Data",
+              path: `/investment/${id}/edit`,
+            },
+            {
+              icon: (
+                <AntDesign
+                  name="edit"
+                  size={ICON_SIZE_MEDIUM}
+                  color={MainColor.white}
+                />
+              ),
+              label: "Edit Prospektus",
+              path: `/investment/${id}/edit-prospectus`,
+            },
+            {
+              icon: (
+                <MaterialIcons
+                  name="create"
+                  size={ICON_SIZE_MEDIUM}
+                  color={MainColor.white}
+                />
+              ),
+              label: "Update Dokumen",
+              path: `/investment/${id}/recap-of-document`,
+            },
+          ]}
+          columns={4}
+          onPressItem={handlePressDraft as any}
+        />
+      </DrawerCustom>
+
+      {/* ========= Publish Drawer ========= */}
+      <DrawerCustom
+        isVisible={openDrawerPublish}
+        closeDrawer={() => setOpenDrawerPublish(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconDocument />,
+              label: "Update Dokumen",
+              path: `/investment/${id}/recap-of-document`,
+            },
+            {
+              icon: <IconNews />,
+              label: "Update Berita",
+              path: `/investment/${id}/(news)/recap-of-news`,
+            },
+          ]}
+          onPressItem={handlePressPublish as any}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

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

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

app/(application)/(user)/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>
+  );
+}