Voting:

Add:
- ComponentDetailDataSection : Tampilan judul, deskripsi, batas waktu
- BoxDetailHistorySection
- (user)/voting/[id]/history

Fix:
Perbaikan component detail data pada:
- screens/Voting/BoxDetailSection.tsx
-  screens/Voting/BoxDetailPublishSection.tsx
- screens/Voting/BoxDetailContribution.tsx

# No Issue

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)/(user)/_layout.tsx

@@ -76,6 +76,13 @@ export default function UserLayout() {
             ),
           }}
         />
+        <Stack.Screen
+          name="event/create"
+          options={{
+            title: "Tambah Event",
+            headerLeft: () => <BackButton />,
+          }}
+        />
 
         <Stack.Screen
           name="event/detail/[id]"
@@ -85,11 +92,182 @@ export default function UserLayout() {
           }}
         />
 
+        <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 ========= */}
+
+        {/* ========== 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/index"
+          name="forum/create"
           options={{
-            title: "Forum",
+            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 />,
           }}
         />

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)/event/(tabs)/_layout.tsx

@@ -1,62 +1,41 @@
-import { MainColor } from "@/constants/color-palet";
-import { FontAwesome5, Ionicons } from "@expo/vector-icons";
+import {
+  IconContribution,
+  IconHistory,
+  IconHome,
+  IconStatus,
+} from "@/components/_Icon";
+import { TabsStyles } from "@/styles/tabs-styles";
 import { Tabs } from "expo-router";
 
-export default function EventLayout() {
+export default function EventTabsLayout() {
   return (
-    <Tabs
-      screenOptions={{
-        headerShown: false,
-        tabBarActiveTintColor: MainColor.yellow,
-        tabBarInactiveTintColor: MainColor.white_gray,
-        tabBarStyle: {
-          backgroundColor: MainColor.darkblue,
-        },
-        //   tabBarButton: HapticTab,
-        //   tabBarBackground: BlurTabBarBackground,
-        //   tabBarStyle: Platform.select({
-        //     ios: {
-        //       // Use a transparent background on iOS to show the blur effect
-        //       position: "absolute",
-        //     },
-        //     default: {},
-        //   }),
-      }}
-    >
+    <Tabs screenOptions={TabsStyles}>
       <Tabs.Screen
         name="index"
         options={{
-          title: "Home",
-          tabBarIcon: ({ color }) => (
-            <Ionicons size={20} name="home" color={color} />
-          ),
+          title: "Beranda",
+          tabBarIcon: ({ color }) => <IconHome color={color} />,
         }}
       />
       <Tabs.Screen
         name="status"
         options={{
           title: "Status",
-          tabBarIcon: ({ color }) => (
-            <Ionicons size={20} name="list" color={color} />
-          ),
+          tabBarIcon: ({ color }) => <IconStatus color={color} />,
         }}
       />
       <Tabs.Screen
-        name="kontribusi"
+        name="contribution"
         options={{
           title: "Kontribusi",
-          tabBarIcon: ({ color }) => (
-            <Ionicons size={20} name="extension-puzzle" color={color} />
-          ),
+          tabBarIcon: ({ color }) => <IconContribution color={color} />,
         }}
       />
       <Tabs.Screen
-        name="riwayat"
+        name="history"
         options={{
           title: "Riwayat",
-          tabBarIcon: ({ color }) => (
-            <FontAwesome5 size={20} name="history" color={color} />
-          ),
+          tabBarIcon: ({ color }) => <IconHistory color={color} />,
         }}
       />
     </Tabs>

app/(application)/(user)/event/(tabs)/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

@@ -1,25 +1,23 @@
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { AccentColor, MainColor } from "@/constants/color-palet";
-import { GStyles } from "@/styles/global-styles";
+import FloatingButton from "@/components/Button/FloatingButton";
+import Event_BoxPublishSection from "@/screens/Event/BoxPublishSection";
 import { router } from "expo-router";
-import { Text, TouchableHighlight, View } from "react-native";
 
-export default function Event() {
+export default function EventBeranda() {
   return (
-    <ViewWrapper>
-      <TouchableHighlight onPress={() => router.push("/event/detail/1")}>
-        <View
-          style={{
-            padding: 20,
-            backgroundColor: MainColor.darkblue,
-            borderRadius: 10,
-            borderColor: AccentColor.blue,
-            borderWidth: 1,
-          }}
-        >
-          <Text style={GStyles.textLabel}>Event</Text>
-        </View>
-      </TouchableHighlight>
+    <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)/kontribusi.tsx

@@ -1,11 +0,0 @@
-import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { GStyles } from "@/styles/global-styles";
-import { Text } from "react-native";
-
-export default function Kontribusi() {
-  return (
-    <ViewWrapper>
-      <Text style={GStyles.textLabel}>Kontribusi</Text>
-    </ViewWrapper>
-  );
-}

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

@@ -1,11 +0,0 @@
-import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { GStyles } from "@/styles/global-styles";
-import { Text } from "react-native";
-
-export default function Riwayat() {
-  return (
-    <ViewWrapper>
-      <Text style={GStyles.textLabel}>Riwayat</Text>
-    </ViewWrapper>
-  );
-}

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

@@ -1,11 +1,63 @@
+import {
+  BoxWithHeaderSection,
+  Grid,
+  ScrollableCustom,
+  StackCustom,
+  TextCustom
+} from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { GStyles } from "@/styles/global-styles";
-import { Text } from "react-native";
+import { masterStatus } 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={masterStatus.map((e, i) => ({
+        id: i,
+        label: e.label,
+        value: e.value,
+      }))}
+      onButtonPress={handlePress}
+      activeId={activeCategory as any}
+    />
+  );
 
-export default function Status() {
   return (
-    <ViewWrapper>
-      <Text style={GStyles.textLabel}>Status</Text>
+    <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)/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

@@ -1,11 +1,113 @@
-import { TextCustom, ViewWrapper } from "@/components";
+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 (
     <>
-      <ViewWrapper>
-        <TextCustom>Forum</TextCustom>
+      <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)/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 { masterStatus } 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={masterStatus.map((e, i) => ({
+        id: i,
+        label: e.label,
+        value: e.value,
+      }))}
+      onButtonPress={handlePress}
+      activeId={activeCategory as any}
+    />
+  );
+
+  return (
+    <ViewWrapper headerComponent={scrollComponent} hideFooter>
+      {jobDataDummy.map((e, i) => (
+        <BaseBox
+          key={i}
+          paddingTop={20}
+          paddingBottom={20}
+          href={`/job/${e.id}/${activeCategory}/detail`}
+          // onPress={() => console.log("pressed")}
+        >
+          <TextCustom align="center" bold truncate size="large">
+            {e.posisi} {activeCategory?.toUpperCase()}
+          </TextCustom>
+        </BaseBox>
+      ))}
+    </ViewWrapper>
+  );
+}

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

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

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

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

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

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

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

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

app/(application)/(user)/maps/[id]/custom-pin.tsx

@@ -1,10 +1,54 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  AvatarCustom,
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  MapCustom,
+  Spacing,
+  StackCustom,
+  ViewWrapper,
+} from "@/components";
+import CenterCustom from "@/components/Center/CenterCustom";
+import { router, useLocalSearchParams } from "expo-router";
 
 export default function MapsCustomPin() {
+  const { id } = useLocalSearchParams();
+
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => {
+          console.log(`Simpan maps ${id}`);
+          router.back();
+        }}
+      >
+        Simpan
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
   return (
     <>
-      <ViewWrapper>
-        <TextCustom>Maps Custom Pin</TextCustom>
+      <ViewWrapper footerComponent={buttonFooter}>
+        <StackCustom>
+          <InformationBox text="Pin map akan secara otomatis menampilkan logo pada porotofolio ini, jika anda ingin melakukan custom silahkan upload logo pin baru anda." />
+          <CenterCustom>
+            <AvatarCustom size="xl" />
+          </CenterCustom>
+          <ButtonCenteredOnly
+            onPress={() => console.log("Upload")}
+            icon="upload"
+          >
+            Upload
+          </ButtonCenteredOnly>
+          <Spacing />
+
+          <BaseBox>
+            <MapCustom />
+          </BaseBox>
+          <Spacing />
+        </StackCustom>
       </ViewWrapper>
     </>
   );

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

@@ -1,11 +1,59 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  MapCustom,
+  Spacing,
+  TextInputCustom,
+  ViewWrapper
+} from "@/components";
+import { router, useLocalSearchParams } from "expo-router";
 
 export default function MapsEdit() {
+  const { id } = useLocalSearchParams();
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => {
+          console.log(`Simpan maps ${id}`);
+          router.back()
+        }}
+      >
+        Simpan
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
   return (
-    <>
-      <ViewWrapper>
-        <TextCustom>Maps Edit</TextCustom>
-      </ViewWrapper>
-    </>
+    <ViewWrapper footerComponent={buttonFooter}>
+      <InformationBox text="Tentukan lokasi pin map dengan menekan pada map." />
+
+      <BaseBox>
+        <MapCustom />
+      </BaseBox>
+
+      <TextInputCustom
+        required
+        label="Nama Pin"
+        placeholder="Masukkan nama pin maps"
+      />
+
+      <Spacing />
+
+      <InformationBox text="Upload foto lokasi bisnis anda untuk ditampilkan dalam detail maps." />
+      <LandscapeFrameUploaded />
+      <ButtonCenteredOnly
+        icon="upload"
+        onPress={() => {
+          console.log("Upload foto ");
+          router.navigate(`/take-picture/${id}`);
+        }}
+      >
+        Upload
+      </ButtonCenteredOnly>
+      <Spacing height={50} />
+    </ViewWrapper>
   );
 }

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

@@ -18,7 +18,7 @@ export default function MapsCreate() {
     <BoxButtonOnFooter>
       <ButtonCustom
         onPress={() => {
-          console.log("Simpan");
+          console.log(`Simpan maps ${id}`);
           router.replace(`/portofolio/${id}`);
         }}
       >

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

@@ -1,9 +1,9 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import { MapCustom, ViewWrapper } from "@/components";
 
 export default function Maps() {
-    return (
-        <ViewWrapper>
-            <TextCustom>Maps</TextCustom>
-        </ViewWrapper>
-    )
-}
+  return (
+    <ViewWrapper style={{ paddingInline: 0, paddingBlock: 0 }}>
+      <MapCustom height={"100%"} />
+    </ViewWrapper>
+  );
+}

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

@@ -1,9 +1,111 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  BaseBox,
+  Grid,
+  ScrollableCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { useState } from "react";
+import { View } from "react-native";
+
+const categories = [
+  { value: "all", label: "Semua" },
+  { value: "event", label: "Event" },
+  { value: "job", label: "Job" },
+  { value: "voting", label: "Voting" },
+  { value: "donasi", label: "Donasi" },
+  { value: "investasi", label: "Investasi" },
+  { value: "forum", label: "Forum" },
+  { value: "collaboration", label: "Collaboration" },
+];
+
+const selectedCategory = (value: string) => {
+  const category = categories.find((c) => c.value === value);
+  return category?.label;
+};
+
+const BoxNotification = ({
+  index,
+  activeCategory,
+}: {
+  index: number;
+  activeCategory: string | null;
+}) => {
+  return (
+    <>
+      <BaseBox
+        onPress={() =>
+          console.log(
+            "Notification >",
+            selectedCategory(activeCategory as string)
+          )
+        }
+      >
+        <StackCustom>
+          <TextCustom bold>
+            # {selectedCategory(activeCategory as string)}
+          </TextCustom>
+
+          <View
+            style={{
+              borderBottomColor: MainColor.white_gray,
+              borderBottomWidth: 1,
+            }}
+          />
+
+          <TextCustom truncate={2}>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint odio
+            unde quidem voluptate quam culpa sequi molestias ipsa corrupti id,
+            soluta, nostrum adipisci similique, et illo asperiores deleniti eum
+            labore.
+          </TextCustom>
+
+          <Grid>
+            <Grid.Col span={6}>
+              <TextCustom size="small" color="gray">
+                {index + 1} Agustus 2025
+              </TextCustom>
+            </Grid.Col>
+            <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
+              <TextCustom size="small" color="gray">
+                Belum lihat
+              </TextCustom>
+            </Grid.Col>
+          </Grid>
+        </StackCustom>
+      </BaseBox>
+    </>
+  );
+};
 
 export default function Notifications() {
+  const [activeCategory, setActiveCategory] = useState<string | null>("all");
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+    // tambahkan logika lain seperti filter dsb.
+  };
   return (
-    <ViewWrapper>
-      <TextCustom>Notifications</TextCustom>
+    <ViewWrapper
+      headerComponent={
+        <ScrollableCustom
+          data={categories.map((e, i) => ({
+            id: i,
+            label: e.label,
+            value: e.value,
+          }))}
+          onButtonPress={handlePress}
+          activeId={activeCategory as string}
+        />
+      }
+    >
+      {Array.from({ length: 20 }).map((e, i) => (
+        <View key={i}>
+          <BoxNotification index={i} activeCategory={activeCategory as any} />
+        </View>
+      ))}
     </ViewWrapper>
   );
 }

app/(application)/(user)/portofolio/[id]/create.tsx

@@ -155,7 +155,7 @@ export default function PortofolioCreate() {
           icon="upload"
           onPress={() => {
             console.log("Upload logo >>", id);
-            router.navigate(`/(application)/take-picture/${id}`);
+            router.navigate(`/(application)/(image)/take-picture/${id}`);
           }}
         >
           Upload

app/(application)/(user)/portofolio/[id]/edit-logo.tsx

@@ -1,10 +1,47 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  AvatarCustom,
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  ViewWrapper,
+} from "@/components";
+import { router, useLocalSearchParams } from "expo-router";
 
 export default function PortofolioEditLogo() {
+  const { id } = useLocalSearchParams();
+
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => {
+          console.log("Simpan logo ");
+          router.back();
+        }}
+      >
+        Simpan
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+
   return (
     <>
-      <ViewWrapper>
-        <TextCustom>Portofolio Edit Logo</TextCustom>
+      <ViewWrapper footerComponent={buttonFooter}>
+        <BaseBox
+          style={{
+            alignItems: "center",
+            justifyContent: "center",
+            height: 250,
+          }}
+        >
+          <AvatarCustom size="xl" />
+        </BaseBox>
+        <ButtonCenteredOnly
+          icon="upload"
+          onPress={() => router.navigate(`/take-picture/${id}`)}
+        >
+          Update
+        </ButtonCenteredOnly>
       </ViewWrapper>
     </>
   );

app/(application)/(user)/portofolio/[id]/edit-social-media.tsx

@@ -1,10 +1,35 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { useLocalSearchParams, router } from "expo-router";
 
 export default function PortofolioEditSocialMedia() {
+  const { id } = useLocalSearchParams();
+
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => {
+          console.log(`Simpan sosmed ${id}`);
+          router.back();
+        }}
+      >
+        Simpan
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+
   return (
     <>
-      <ViewWrapper>
-        <TextCustom>Portofolio Edit Social Media</TextCustom>
+      <ViewWrapper footerComponent={buttonFooter}>
+        <TextInputCustom label="Tiktok" placeholder="Masukkan tiktok" />
+        <TextInputCustom label="Instagram" placeholder="Masukkan instagram" />
+        <TextInputCustom label="Facebook" placeholder="Masukkan facebook" />
+        <TextInputCustom label="Twitter" placeholder="Masukkan twitter" />
+        <TextInputCustom label="Youtube" placeholder="Masukkan youtube" />
       </ViewWrapper>
     </>
   );

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

@@ -1,10 +1,150 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  Grid,
+  SelectCustom,
+  Spacing,
+  StackCustom,
+  TextAreaCustom,
+  TextCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import dummyMasterBidangBisnis from "@/lib/dummy-data/master-bidang-bisnis";
+import dummyMasterSubBidangBisnis from "@/lib/dummy-data/master-sub-bidang-bisnis";
+import { Ionicons } from "@expo/vector-icons";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import { Text, TouchableOpacity, View } from "react-native";
+import PhoneInput, { ICountry } from "react-native-international-phone-number";
 
 export default function PortofolioEdit() {
+  const { id } = useLocalSearchParams();
+  const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
+  const [inputValue, setInputValue] = useState<string>("");
+
+  const [data, setData] = useState({
+    name: "",
+    bidang_usaha: "",
+    sub_bidang_usaha: "",
+    alamat: "",
+    nomor_telepon: "",
+    deskripsi: "",
+  });
+
+  function handleInputValue(phoneNumber: string) {
+    setInputValue(phoneNumber);
+  }
+
+  function handleSelectedCountry(country: ICountry) {
+    setSelectedCountry(country);
+  }
+
+  function handleSave() {
+    console.log(`Update portofolio berhasil ${id}`);
+    router.back();
+  }
+
+  const buttonUpdate = (
+    <BoxButtonOnFooter>
+      <ButtonCustom onPress={handleSave}>Simpan</ButtonCustom>
+    </BoxButtonOnFooter>
+  );
   return (
     <>
-      <ViewWrapper>
-        <TextCustom>Portofolio Edit</TextCustom>
+      <ViewWrapper footerComponent={buttonUpdate}>
+        <StackCustom gap={"xs"}>
+          <TextInputCustom
+            required
+            label="Nama Bisnis"
+            placeholder="Masukkan nama bisnis"
+          />
+
+          <SelectCustom
+            label="Bidang Usaha"
+            required
+            data={dummyMasterBidangBisnis.map((item) => ({
+              label: item.name,
+              value: item.id,
+            }))}
+            value={data.bidang_usaha}
+            onChange={(value) => {
+              setData({ ...(data as any), bidang_usaha: value });
+            }}
+          />
+
+          <Grid>
+            <Grid.Col span={10}>
+              <SelectCustom
+                // disabled
+                label="Sub Bidang Usaha"
+                required
+                data={dummyMasterSubBidangBisnis.map((item) => ({
+                  label: item.name,
+                  value: item.id,
+                }))}
+                value={data.sub_bidang_usaha}
+                onChange={(value) => {
+                  setData({ ...(data as any), sub_bidang_usaha: value });
+                }}
+              />
+            </Grid.Col>
+            <Grid.Col
+              span={2}
+              style={{ alignItems: "center", justifyContent: "center" }}
+            >
+              <TouchableOpacity onPress={() => console.log("delete")}>
+                <Ionicons name="trash" size={24} color={MainColor.red} />
+              </TouchableOpacity>
+            </Grid.Col>
+          </Grid>
+          <ButtonCenteredOnly onPress={() => console.log("add")}>
+            Tambah Pilihan
+          </ButtonCenteredOnly>
+          <Spacing />
+          <View>
+            <View style={{ flexDirection: "row", alignItems: "center" }}>
+              <TextCustom semiBold style={{ color: MainColor.white_gray }}>
+                Nomor Telepon
+              </TextCustom>
+              <Text style={{ color: "red" }}> *</Text>
+            </View>
+            <Spacing height={5} />
+            <PhoneInput
+              value={inputValue}
+              onChangePhoneNumber={handleInputValue}
+              selectedCountry={selectedCountry}
+              onChangeSelectedCountry={handleSelectedCountry}
+              defaultCountry="ID"
+              placeholder="xxx-xxx-xxx"
+            />
+          </View>
+          <Spacing />
+
+          <TextInputCustom
+            required
+            label="Alamat Bisnis"
+            placeholder="Masukkan alamat bisnis"
+          />
+
+          <TextAreaCustom
+            label="Deskripsi Bisnis"
+            placeholder="Masukkan deskripsi bisnis"
+            value={data.deskripsi}
+            onChangeText={(value: any) =>
+              setData({ ...data, deskripsi: value })
+            }
+            autosize
+            minRows={2}
+            maxRows={5}
+            required
+            showCount
+            maxLength={100}
+          />
+          <Spacing />
+        </StackCustom>
       </ViewWrapper>
     </>
   );

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

@@ -1,21 +1,20 @@
-import { DrawerCustom } from "@/components";
+import { AlertCustom, DrawerCustom } from "@/components";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { MainColor } from "@/constants/color-palet";
 import { drawerItemsPortofolio } from "@/screens/Portofolio/ListPage";
 import Portofolio_MenuDrawerSection from "@/screens/Portofolio/MenuDrawer";
+import PorfofolioSection from "@/screens/Portofolio/PorfofolioSection";
 import { GStyles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
-import { Stack, useLocalSearchParams } from "expo-router";
+import { Stack, useLocalSearchParams, router } from "expo-router";
 import { useState } from "react";
-import {
-  Text,
-  TouchableOpacity
-} from "react-native";
+import { TouchableOpacity } from "react-native";
 
 export default function Portofolio() {
   const { id } = useLocalSearchParams();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [deleteAlert, setDeleteAlert] = useState(false);
 
   const openDrawer = () => {
     setIsDrawerOpen(true);
@@ -44,7 +43,7 @@ export default function Portofolio() {
             headerTitleStyle: GStyles.headerTitleStyle,
           }}
         />
-        <Text style={GStyles.textLabel}>Portofolio {id}</Text>
+        <PorfofolioSection setShowDeleteAlert={setDeleteAlert} />
       </ViewWrapper>
 
       {/* Drawer Komponen Eksternal */}
@@ -58,6 +57,22 @@ export default function Portofolio() {
           setIsDrawerOpen={setIsDrawerOpen}
         />
       </DrawerCustom>
+
+      {/* Alert Delete */}
+      <AlertCustom
+        isVisible={deleteAlert}
+        onLeftPress={() => setDeleteAlert(false)}
+        onRightPress={() => {
+          setDeleteAlert(false);
+          console.log("Hapus portofolio");
+          router.back();
+        }}
+        title="Hapus Portofolio"
+        message="Apakah Anda yakin ingin menghapus portofolio ini?"
+        textLeft="Batal"
+        textRight="Hapus"
+        colorRight={MainColor.red}
+      />
     </>
   );
 }

app/(application)/(user)/profile/[id]/create.tsx

@@ -103,14 +103,7 @@ export default function CreateProfile() {
           required
           onChange={(value) => setData({ ...(data as any), gender: value })}
         />
-        <TextInputCustom
-          required
-          label="Alamat"
-          placeholder="Masukkan alamat"
-          value={data.address}
-          onChangeText={(text) => setData({ ...data, address: text })}
-        />
-        {/* <Spacing /> */}
+        <Spacing />
       </StackCustom>
     </ViewWrapper>
   );

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

@@ -22,15 +22,8 @@ export default function ProfileEdit() {
   });
 
   const options = [
-    { label: "React", value: "react" },
-    { label: "Vue", value: "vue" },
-    { label: "Angular", value: "angular" },
-    { label: "Svelte", value: "svelte" },
-    { label: "Next.js", value: "nextjs" },
-    { label: "Nuxt.js", value: "nuxtjs" },
-    { label: "Remix", value: "remix" },
-    { label: "Sapper", value: "sapper" },
-    { label: "SvelteKit", value: "sveltekit" },
+    { label: "Laki-laki", value: "laki-laki" },
+    { label: "Perempuan", value: "perempuan" },
   ];
 
   const handleSave = () => {
@@ -59,16 +52,6 @@ export default function ProfileEdit() {
       }
     >
       <StackCustom gap={"xs"}>
-        <SelectCustom
-          label="Framework"
-          placeholder="Pilih framework favoritmu"
-          data={options}
-          value={data.selectedValue}
-          onChange={(value) => {
-            setData({ ...(data as any), selectedValue: value });
-          }}
-        />
-
         <TextInputCustom
           label="Nama"
           placeholder="Nama"
@@ -96,6 +79,16 @@ export default function ProfileEdit() {
           }}
           required
         />
+        <SelectCustom
+          required
+          label="Jenis Kelamin"
+          placeholder="Pilih jenis kelamin"
+          data={options}
+          value={data.selectedValue}
+          onChange={(value) => {
+            setData({ ...(data as any), selectedValue: value });
+          }}
+        />
       </StackCustom>
     </ViewWrapper>
   );

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

@@ -4,8 +4,8 @@ import LeftButtonCustom from "@/components/Button/BackButton";
 import DrawerCustom from "@/components/Drawer/DrawerCustom";
 import { MainColor } from "@/constants/color-palet";
 import { drawerItemsProfile } from "@/screens/Profile/ListPage";
-import Profile_MenuDrawerSection from "@/screens/Profile/MenuDrawerSection";
-import ProfilSection from "@/screens/Profile/ProfilSection";
+import Profile_MenuDrawerSection from "@/screens/Profile/menuDrawerSection";
+import ProfileSection from "@/screens/Profile/ProfileSection";
 import { GStyles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
@@ -52,7 +52,7 @@ export default function Profile() {
             headerTitleStyle: GStyles.headerTitleStyle,
           }}
         />
-        <ProfilSection />
+        <ProfileSection />
       </ViewWrapper>
 
       {/* Drawer Komponen Eksternal */}

app/(application)/(user)/profile/[id]/update-photo.tsx

@@ -1,13 +1,12 @@
 import {
+  AvatarCustom,
   BaseBox,
   BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
 } from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import DUMMY_IMAGE from "@/constants/dummy-image-value";
 import { router, useLocalSearchParams } from "expo-router";
-import { Image } from "react-native";
 
 export default function UpdatePhotoProfile() {
   const { id } = useLocalSearchParams();
@@ -28,11 +27,7 @@ export default function UpdatePhotoProfile() {
       <BaseBox
         style={{ alignItems: "center", justifyContent: "center", height: 250 }}
       >
-        <Image
-          source={DUMMY_IMAGE.avatar}
-          resizeMode="cover"
-          style={{ width: 200, height: 200 }}
-        />
+        <AvatarCustom size="xl" />
       </BaseBox>
 
       <ButtonCenteredOnly

app/(application)/(user)/user-search/index.tsx

@@ -1,9 +1,100 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  AvatarCustom,
+  ClickableCustom,
+  Grid,
+  Spacing,
+  StackCustom,
+  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 } from "expo-router";
 
 export default function UserSearch() {
+  function generateRandomPhoneNumber(index: number) {
+    let prefix;
+
+    // Menentukan prefix berdasarkan index genap atau ganjil
+    if (index % 2 === 0) {
+      const evenPrefixes = ["6288", "6289", "6281"];
+      prefix = evenPrefixes[Math.floor(Math.random() * evenPrefixes.length)];
+    } else {
+      const oddPrefixes = ["6285", "6283"];
+      prefix = oddPrefixes[Math.floor(Math.random() * oddPrefixes.length)];
+    }
+
+    // Menghitung panjang sisa nomor acak (antara 10 - 12 digit)
+    const remainingLength = Math.floor(Math.random() * 3) + 10; // 10, 11, atau 12
+
+    // Membuat sisa nomor acak
+    let randomNumber = "";
+    for (let i = 0; i < remainingLength; i++) {
+      randomNumber += Math.floor(Math.random() * 10); // Digit acak antara 0-9
+    }
+
+    // Menggabungkan prefix dan sisa nomor
+    return prefix + randomNumber;
+  }
   return (
-    <ViewWrapper>
-      <TextCustom>User Search</TextCustom>
-    </ViewWrapper>
+    <>
+      <ViewWrapper
+        headerComponent={
+          <TextInputCustom
+            iconLeft={
+              <Ionicons
+                name="search"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.placeholder}
+              />
+            }
+            placeholder="Cari Pengguna"
+            borderRadius={50}
+            containerStyle={{ marginBottom: 0 }}
+          />
+        }
+      >
+        <StackCustom>
+          {Array.from({ length: 20 }).map((e, index) => {
+            return (
+              <Grid key={index}>
+                <Grid.Col span={2}>
+                  <AvatarCustom href={`/profile/${index}`}/>  
+                </Grid.Col>
+                <Grid.Col span={9}>
+                  <TextCustom size="large">Nama user {index}</TextCustom>
+                  <TextCustom size="small">
+                    +{generateRandomPhoneNumber(index)}
+                  </TextCustom>
+                </Grid.Col>
+                <Grid.Col
+                  span={1}
+                  style={{
+                    justifyContent: "center",
+                    alignItems: "flex-end",
+                  }}
+                >
+                  <ClickableCustom
+                    onPress={() => {
+                      console.log("Ke Profile");
+                      router.push(`/profile/${index}`);
+                    }}
+                  >
+                    <Ionicons
+                      name="chevron-forward"
+                      size={ICON_SIZE_SMALL}
+                      color={MainColor.white}
+                    />
+                  </ClickableCustom>
+                </Grid.Col>
+              </Grid>
+            );
+          })}
+        </StackCustom>
+        <Spacing height={50} />
+      </ViewWrapper>
+    </>
   );
 }

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,60 @@
+import {
+  BadgeCustom,
+  BaseBox,
+  ScrollableCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { masterStatus } from "@/lib/dummy-data/_master/status";
+import dayjs from "dayjs";
+import { useState } from "react";
+
+export default function VotingStatus() {
+  const [activeCategory, setActiveCategory] = useState<string | null>(
+    "publish"
+  );
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+    // tambahkan logika lain seperti filter dsb.
+  };
+
+  const scrollComponent = (
+    <ScrollableCustom
+      data={masterStatus.map((e, i) => ({
+        id: i,
+        label: e.label,
+        value: e.value,
+      }))}
+      onButtonPress={handlePress}
+      activeId={activeCategory as any}
+    />
+  );
+
+  return (
+    <ViewWrapper headerComponent={scrollComponent} hideFooter>
+      {Array.from({ length: 10 }).map((_, i) => (
+        <BaseBox
+          key={i}
+          paddingTop={20}
+          paddingBottom={20}
+          href={`/voting/${i}/${activeCategory}/detail`}
+        >
+          <StackCustom>
+            <TextCustom align="center" bold truncate size="large">
+              Lorem ipsum dolor sit {activeCategory}
+            </TextCustom>
+            <BadgeCustom
+              style={{ width: "70%", alignSelf: "center" }}
+              variant="light"
+            >
+              {dayjs().format("DD/MM/YYYY")} -{" "}
+              {dayjs().add(1, "day").format("DD/MM/YYYY")}
+            </BadgeCustom>
+          </StackCustom>
+        </BaseBox>
+      ))}
+    </ViewWrapper>
+  );
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

app/(application)/_layout.tsx

@@ -1,7 +1,6 @@
-import { MainColor } from "@/constants/color-palet";
+import { BackButton } from "@/components";
 import { HeaderStyles } from "@/styles/header-styles";
-import { Ionicons } from "@expo/vector-icons";
-import { router, Stack } from "expo-router";
+import { Stack } from "expo-router";
 
 export default function ApplicationLayout() {
   return (
@@ -11,17 +10,19 @@ export default function ApplicationLayout() {
 
         {/* Take Picture */}
         <Stack.Screen
-          name="take-picture/[id]/index"
+          name="(image)/take-picture/[id]/index"
           options={{
             title: "Ambil Gambar",
-            headerLeft: () => (
-              <Ionicons
-                name="arrow-back"
-                size={20}
-                color={MainColor.yellow}
-                onPress={() => router.back()}
-              />
-            ),
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        {/* Preview Image */}
+        <Stack.Screen
+          name="(image)/preview-image/[id]/index"
+          options={{
+            title: "Preview Gambar",
+            headerLeft: () => <BackButton />,
           }}
         />
       </Stack>

app/(application)/coba/double-scroll.tsx

@@ -0,0 +1,258 @@
+// File: src/screens/EventDetailScreen.tsx
+
+import LeftButtonCustom from "@/components/Button/BackButton";
+import { MainColor } from "@/constants/color-palet";
+import React, { useState, useEffect } from "react";
+import {
+  FlatList,
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  ActivityIndicator,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+// === TYPES ===
+type Participant = {
+  id: number;
+  name: string;
+  avatar: string;
+};
+
+type EventDetail = {
+  id: number;
+  title: string;
+  description: string;
+  date: string;
+  location: string;
+  organizer: string;
+};
+
+// === KOMPONEN UTAMA ===
+const EventDetailScreen: React.FC = () => {
+  const [participants, setParticipants] = useState<Participant[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [loadingMore, setLoadingMore] = useState<boolean>(false);
+
+  // Data event
+  const event: EventDetail = {
+    id: 1,
+    title: "Workshop React Native & Expo",
+    description:
+      "Pelatihan intensif pengembangan aplikasi mobile menggunakan React Native, Expo, dan TypeScript. Cocok untuk developer tingkat menengah.",
+    date: "Sabtu, 5 April 2025 | 09:00 - 16:00",
+    location: "Gedung Teknologi, Jakarta Selatan",
+    organizer: "DevCommunity Indonesia",
+  };
+
+  // Simulasi API: generate data dummy
+  const generateParticipants = (
+    startId: number,
+    count: number
+  ): Participant[] => {
+    return Array.from({ length: count }, (_, i) => {
+      const id = startId + i;
+      return {
+        id,
+        name: `Peserta ${id}`,
+        avatar: `https://i.pravatar.cc/150?img=${(id % 70) + 1}`, // 70 gambar unik
+      };
+    });
+  };
+
+  // Load data awal
+  useEffect(() => {
+    const loadInitial = () => {
+      setTimeout(() => {
+        const initialData = generateParticipants(1, 20); // 20 peserta pertama
+        setParticipants(initialData);
+        setLoading(false);
+      }, 800);
+    };
+
+    loadInitial();
+  }, []);
+
+  // Load lebih banyak peserta saat scroll ke bawah
+  const loadMore = () => {
+    if (loadingMore || participants.length >= 200) return; // Batas 200 peserta
+
+    setLoadingMore(true);
+    setTimeout(() => {
+      const nextId = participants.length + 1;
+      const newData = generateParticipants(nextId, 10); // Tambah 10 peserta
+      setParticipants((prev) => [...prev, ...newData]);
+      setLoadingMore(false);
+    }, 1000);
+  };
+
+  // Render footer: loading indicator
+  const renderFooter = () => {
+    if (!loadingMore) return null;
+    return (
+      <View style={styles.footer}>
+        <ActivityIndicator size="small" color="#007AFF" />
+        <Text style={styles.loadingText}> Memuat peserta berikutnya...</Text>
+      </View>
+    );
+  };
+
+  // Render header: detail event + info jumlah peserta
+  const renderHeader = () => (
+    <>
+      <View style={styles.headerContainer}>
+        <LeftButtonCustom path={"/"} />
+        <Text style={styles.title}>{event.title}</Text>
+        <Text style={styles.info}>📅 {event.date}</Text>
+        <Text style={styles.info}>📍 {event.location}</Text>
+        <Text style={styles.info}>👤 {event.organizer}</Text>
+        <Text style={styles.description}>{event.description}</Text>
+
+        <View style={styles.divider} />
+
+        <Text style={styles.sectionTitle}>
+          Daftar Peserta ({participants.length})
+        </Text>
+      </View>
+
+      {/* Sub-header tambahan jika perlu */}
+      {participants.length === 0 ? (
+        <Text style={styles.empty}>Belum ada peserta yang terdaftar.</Text>
+      ) : null}
+    </>
+  );
+
+  // Loading awal
+  if (loading) {
+    return (
+      <SafeAreaView style={styles.container}>
+        <ActivityIndicator size="large" color="#007AFF" style={styles.loader} />
+      </SafeAreaView>
+    );
+  }
+
+  return (
+    <>
+      <FlatList
+        data={participants}
+        keyExtractor={(item) => item.id.toString()}
+        ListHeaderComponent={renderHeader}
+        ListFooterComponent={renderFooter}
+        onEndReached={loadMore}
+        onEndReachedThreshold={0.5}
+        renderItem={({ item }) => (
+          <View style={styles.participantItem}>
+            <Image source={{ uri: item.avatar }} style={styles.avatar} />
+            <Text style={styles.participantName}>{item.name}</Text>
+          </View>
+        )}
+        initialNumToRender={10}
+        maxToRenderPerBatch={5}
+        windowSize={7}
+        showsVerticalScrollIndicator={false}
+        ListEmptyComponent={
+          <Text style={styles.empty}>Tidak ada peserta.</Text>
+        }
+      />
+
+      <SafeAreaView
+        edges={["bottom"]}
+        style={{ backgroundColor: MainColor.darkblue }}
+      />
+    </>
+  );
+};
+
+export default EventDetailScreen;
+
+// === STYLES ===
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#f8f9fa",
+  },
+  loader: {
+    marginTop: 20,
+  },
+  headerContainer: {
+    padding: 16,
+    backgroundColor: "#ffffff",
+    borderBottomWidth: 1,
+    borderBottomColor: "#e0e0e0",
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "bold",
+    color: "#1d1d1d",
+    marginBottom: 8,
+  },
+  info: {
+    fontSize: 16,
+    color: "#444",
+    marginBottom: 4,
+  },
+  description: {
+    fontSize: 14,
+    color: "#666",
+    lineHeight: 20,
+    marginTop: 12,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: "#e0e0e0",
+    marginVertical: 16,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#1d1d1d",
+    marginBottom: 12,
+  },
+  participantItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: "#fff",
+    borderBottomWidth: 1,
+    borderBottomColor: "#f0f0f0",
+  },
+  avatar: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    marginRight: 12,
+  },
+  participantName: {
+    fontSize: 16,
+    color: "#333",
+  },
+  footer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 16,
+    backgroundColor: "#f8f9fa",
+  },
+  loadingText: {
+    color: "#555",
+    fontSize: 14,
+  },
+  empty: {
+    textAlign: "center",
+    color: "#999",
+    fontStyle: "italic",
+    padding: 16,
+    backgroundColor: "#fff",
+    fontSize: 14,
+  },
+  subHeader: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    backgroundColor: "#f1f1f1",
+    fontSize: 14,
+    color: "#666",
+    fontStyle: "italic",
+  },
+});

app/(application)/coba/index.tsx

@@ -8,7 +8,9 @@ import {
   ScrollView,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
-import { router } from "expo-router";
+import { router, Stack } from "expo-router";
+import EventDetailScreen from "./double-scroll";
+import LeftButtonCustom from "@/components/Button/BackButton";
 
 const { width } = Dimensions.get("window");
 
@@ -16,7 +18,9 @@ const { width } = Dimensions.get("window");
 const HomeScreen = () => (
   <View style={styles.screen}>
     <Text style={styles.screenTitle}>Selamat Datang!</Text>
-    <Text style={styles.screenText}>Ini adalah halaman utama aplikasi Anda</Text>
+    <Text style={styles.screenText}>
+      Ini adalah halaman utama aplikasi Anda
+    </Text>
   </View>
 );
 const SearchScreen = () => (
@@ -65,9 +69,7 @@ const CustomTab = ({ icon, label, isActive, onPress }: any) => (
 
 // Main Custom Tab Navigator
 const CustomTabNavigator = () => {
-  const [activeTab, setActiveTab] = React.useState(
-    'home'
-  );
+  const [activeTab, setActiveTab] = React.useState("home");
   const [showHome, setShowHome] = React.useState(true);
 
   const tabs = [
@@ -97,13 +99,12 @@ const CustomTabNavigator = () => {
     },
   ];
 
-  
   // Function untuk handle tab press
   const handleTabPress = (tabId: string) => {
     setActiveTab(tabId);
     setShowHome(false); // Hide home when any tab is pressed
   };
-  
+
   // Determine which component to show
   const getActiveComponent = () => {
     if (showHome || activeTab === "home") {
@@ -111,38 +112,46 @@ const CustomTabNavigator = () => {
     }
     // const selectedTab = tabs.find((tab) => tab.id === activeTab);
     // return selectedTab ? selectedTab.component : HomeScreen;
-    return HomeScreen
+    return HomeScreen;
   };
 
   const ActiveComponent = getActiveComponent();
 
   return (
-    <View style={styles.container}>
-      {/* Content Area */}
-      <ScrollView>
-        <View style={styles.content}>
-          <ActiveComponent />
-        </View>
-      </ScrollView>
+    <>
+      <Stack.Screen
+        options={{
+          title: "Custom Tab Navigator",
+        }}
+      />
+      <EventDetailScreen />
+    </>
+    // <View style={styles.container}>
+    //   {/* Content Area */}
+    //   <ScrollView>
+    //     <View style={styles.content}>
+    //       <ActiveComponent />
+    //     </View>
+    //   </ScrollView>
 
-      {/* Custom Tab Bar */}
-      <View style={styles.tabBar}>
-        <View style={styles.tabContainer}>
-          {tabs.map((e) => (
-            <CustomTab
-              key={e.id}
-              icon={activeTab === e.id ? e.activeIcon : e.icon}
-              label={e.label}
-              isActive={activeTab === e.id && !showHome}
-              onPress={() => {
-                handleTabPress(e.id);
-                router.push(e.path as any);
-              }}
-            />
-          ))}
-        </View>
-      </View>
-    </View>
+    //   {/* Custom Tab Bar */}
+    //   <View style={styles.tabBar}>
+    //     <View style={styles.tabContainer}>
+    //       {tabs.map((e) => (
+    //         <CustomTab
+    //           key={e.id}
+    //           icon={activeTab === e.id ? e.activeIcon : e.icon}
+    //           label={e.label}
+    //           isActive={activeTab === e.id && !showHome}
+    //           onPress={() => {
+    //             handleTabPress(e.id);
+    //             router.push(e.path as any);
+    //           }}
+    //         />
+    //       ))}
+    //     </View>
+    //   </View>
+    // </View>
   );
 };
 

bun.lock

@@ -5,15 +5,18 @@
       "name": "hipmi-mobile",
       "dependencies": {
         "@expo/vector-icons": "^14.1.0",
+        "@react-native-community/datetimepicker": "8.4.1",
         "@react-navigation/bottom-tabs": "^7.4.2",
         "@react-navigation/drawer": "^7.5.2",
         "@react-navigation/elements": "^2.3.8",
         "@react-navigation/native": "^7.1.6",
         "@react-navigation/native-stack": "^7.3.21",
         "@types/react-native-vector-icons": "^6.4.18",
+        "dayjs": "^1.11.13",
         "expo": "53.0.17",
         "expo-blur": "~14.1.5",
         "expo-camera": "~16.1.10",
+        "expo-clipboard": "~7.1.5",
         "expo-constants": "~17.1.7",
         "expo-font": "~13.3.2",
         "expo-haptics": "~14.1.4",
@@ -31,7 +34,10 @@
         "react-native": "0.79.5",
         "react-native-gesture-handler": "~2.24.0",
         "react-native-international-phone-number": "^0.9.3",
+        "react-native-maps": "1.20.1",
         "react-native-otp-entry": "^1.8.5",
+        "react-native-pager-view": "6.7.1",
+        "react-native-paper": "^5.14.5",
         "react-native-reanimated": "~3.17.4",
         "react-native-safe-area-context": "5.4.0",
         "react-native-screens": "~4.11.1",
@@ -237,6 +243,8 @@
 
     "@babel/types": ["@babel/types@7.27.6", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.27.1" } }, "sha512-ETyHEk2VHHvl9b9jZP5IHPavHYk57EhanlRRuae9XCpb/j5bDCbPPMOBfCWhnl/7EDJz0jEMCi/RhccCE8r1+Q=="],
 
+    "@callstack/react-theme-provider": ["@callstack/react-theme-provider@3.0.9", "", { "dependencies": { "deepmerge": "^3.2.0", "hoist-non-react-statics": "^3.3.0" }, "peerDependencies": { "react": ">=16.3.0" } }, "sha512-tTQ0uDSCL0ypeMa8T/E9wAZRGKWj8kXP7+6RYgPTfOPs9N07C9xM8P02GJ3feETap4Ux5S69D9nteq9mEj86NA=="],
+
     "@egjs/hammerjs": ["@egjs/hammerjs@2.0.17", "", { "dependencies": { "@types/hammerjs": "^2.0.36" } }, "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A=="],
 
     "@emnapi/core": ["@emnapi/core@1.4.3", "", { "dependencies": { "@emnapi/wasi-threads": "1.0.2", "tslib": "^2.4.0" } }, "sha512-4m62DuCE07lw01soJwPiBGC0nAww0Q+RY70VZ+n49yDIO13yyinhbWCeNnaob0lakDtWQzSdtNWzJeOJt2ma+g=="],
@@ -367,6 +375,8 @@
 
     "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.0", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w=="],
 
+    "@react-native-community/datetimepicker": ["@react-native-community/datetimepicker@8.4.1", "", { "dependencies": { "invariant": "^2.2.4" }, "peerDependencies": { "expo": ">=52.0.0", "react": "*", "react-native": "*", "react-native-windows": "*" }, "optionalPeers": ["expo", "react-native-windows"] }, "sha512-DrK+CUS5fZnz8dhzBezirkzQTcNDdaXer3oDLh0z4nc2tbdIdnzwvXCvi8IEOIvleoc9L95xS5tKUl0/Xv71Mg=="],
+
     "@react-native/assets-registry": ["@react-native/assets-registry@0.79.5", "", {}, "sha512-N4Kt1cKxO5zgM/BLiyzuuDNquZPiIgfktEQ6TqJ/4nKA8zr4e8KJgU6Tb2eleihDO4E24HmkvGc73naybKRz/w=="],
 
     "@react-native/babel-plugin-codegen": ["@react-native/babel-plugin-codegen@0.79.5", "", { "dependencies": { "@babel/traverse": "^7.25.3", "@react-native/codegen": "0.79.5" } }, "sha512-Rt/imdfqXihD/sn0xnV4flxxb1aLLjPtMF1QleQjEhJsTUPpH4TFlfOpoCvsrXoDl4OIcB1k4FVM24Ez92zf5w=="],
@@ -423,6 +433,8 @@
 
     "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
 
+    "@types/geojson": ["@types/geojson@7946.0.16", "", {}, "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg=="],
+
     "@types/graceful-fs": ["@types/graceful-fs@4.1.9", "", { "dependencies": { "@types/node": "*" } }, "sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ=="],
 
     "@types/hammerjs": ["@types/hammerjs@2.0.46", "", {}, "sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw=="],
@@ -697,6 +709,8 @@
 
     "data-view-byte-offset": ["data-view-byte-offset@1.0.1", "", { "dependencies": { "call-bound": "^1.0.2", "es-errors": "^1.3.0", "is-data-view": "^1.0.1" } }, "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ=="],
 
+    "dayjs": ["dayjs@1.11.13", "", {}, "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="],
+
     "debug": ["debug@4.4.1", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ=="],
 
     "decode-uri-component": ["decode-uri-component@0.2.2", "", {}, "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ=="],
@@ -815,6 +829,8 @@
 
     "expo-camera": ["expo-camera@16.1.10", "", { "dependencies": { "invariant": "^2.2.4" }, "peerDependencies": { "expo": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native-web"] }, "sha512-qoRJeSwPmMbuu0VfnQTC+q79Kt2SqTWColEImgithL9u0qUQcC55U89IfhZk55Hpt6f1DgKuDzUOG5oY+snSWg=="],
 
+    "expo-clipboard": ["expo-clipboard@7.1.5", "", { "peerDependencies": { "expo": "*", "react": "*", "react-native": "*" } }, "sha512-TCANUGOxouoJXxKBW5ASJl2WlmQLGpuZGemDCL2fO5ZMl57DGTypUmagb0CVUFxDl0yAtFIcESd78UsF9o64aw=="],
+
     "expo-constants": ["expo-constants@17.1.7", "", { "dependencies": { "@expo/config": "~11.0.12", "@expo/env": "~1.0.7" }, "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-byBjGsJ6T6FrLlhOBxw4EaiMXrZEn/MlUYIj/JAd+FS7ll5X/S4qVRbIimSJtdW47hXMq0zxPfJX6njtA56hHA=="],
 
     "expo-file-system": ["expo-file-system@18.1.11", "", { "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-HJw/m0nVOKeqeRjPjGdvm+zBi5/NxcdPf8M8P3G2JFvH5Z8vBWqVDic2O58jnT1OFEy0XXzoH9UqFu7cHg9DTQ=="],
@@ -1373,8 +1389,14 @@
 
     "react-native-is-edge-to-edge": ["react-native-is-edge-to-edge@1.1.7", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-EH6i7E8epJGIcu7KpfXYXiV2JFIYITtq+rVS8uEb+92naMRBdxhTuS8Wn2Q7j9sqyO0B+Xbaaf9VdipIAmGW4w=="],
 
+    "react-native-maps": ["react-native-maps@1.20.1", "", { "dependencies": { "@types/geojson": "^7946.0.13" }, "peerDependencies": { "react": ">= 17.0.1", "react-native": ">= 0.64.3", "react-native-web": ">= 0.11" }, "optionalPeers": ["react-native-web"] }, "sha512-NZI3B5Z6kxAb8gzb2Wxzu/+P2SlFIg1waHGIpQmazDSCRkNoHNY4g96g+xS0QPSaG/9xRBbDNnd2f2/OW6t6LQ=="],
+
     "react-native-otp-entry": ["react-native-otp-entry@1.8.5", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-TZNkIuUzZKAAWrC8X/A22ZHJdycLysxUNysrGf0yTmDLRUyf4zLXwVFcDYUcRNe763Hjaf5qvtKGILb6lDGzoA=="],
 
+    "react-native-pager-view": ["react-native-pager-view@6.7.1", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-cBSr6xw4g5N7Kd3VGWcf+kmaH7iBWb0DXAf2bVo3bXkzBcBbTOmYSvc0LVLHhUPW8nEq5WjT9LCIYAzgF++EXw=="],
+
+    "react-native-paper": ["react-native-paper@5.14.5", "", { "dependencies": { "@callstack/react-theme-provider": "^3.0.9", "color": "^3.1.2", "use-latest-callback": "^0.2.3" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-safe-area-context": "*" } }, "sha512-eaIH5bUQjJ/mYm4AkI6caaiyc7BcHDwX6CqNDi6RIxfxfWxROsHpll1oBuwn/cFvknvA8uEAkqLk/vzVihI3AQ=="],
+
     "react-native-reanimated": ["react-native-reanimated@3.17.5", "", { "dependencies": { "@babel/plugin-transform-arrow-functions": "^7.0.0-0", "@babel/plugin-transform-class-properties": "^7.0.0-0", "@babel/plugin-transform-classes": "^7.0.0-0", "@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0", "@babel/plugin-transform-optional-chaining": "^7.0.0-0", "@babel/plugin-transform-shorthand-properties": "^7.0.0-0", "@babel/plugin-transform-template-literals": "^7.0.0-0", "@babel/plugin-transform-unicode-regex": "^7.0.0-0", "@babel/preset-typescript": "^7.16.7", "convert-source-map": "^2.0.0", "invariant": "^2.2.4", "react-native-is-edge-to-edge": "1.1.7" }, "peerDependencies": { "@babel/core": "^7.0.0-0", "react": "*", "react-native": "*" } }, "sha512-SxBK7wQfJ4UoWoJqQnmIC7ZjuNgVb9rcY5Xc67upXAFKftWg0rnkknTw6vgwnjRcvYThrjzUVti66XoZdDJGtw=="],
 
     "react-native-safe-area-context": ["react-native-safe-area-context@5.4.0", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-JaEThVyJcLhA+vU0NU8bZ0a1ih6GiF4faZ+ArZLqpYbL6j7R3caRqj+mE3lEtKCuHgwjLg3bCxLL1GPUJZVqUA=="],
@@ -1707,6 +1729,8 @@
 
     "@babel/traverse--for-generate-function-map/globals": ["globals@11.12.0", "", {}, "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="],
 
+    "@callstack/react-theme-provider/deepmerge": ["deepmerge@3.3.0", "", {}, "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA=="],
+
     "@eslint-community/eslint-utils/eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="],
 
     "@eslint/eslintrc/globals": ["globals@14.0.0", "", {}, "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ=="],
@@ -1887,6 +1911,8 @@
 
     "react-native/semver": ["semver@7.7.2", "", { "bin": "bin/semver.js" }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],
 
+    "react-native-paper/color": ["color@3.2.1", "", { "dependencies": { "color-convert": "^1.9.3", "color-string": "^1.6.0" } }, "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA=="],
+
     "react-native-vector-icons/yargs": ["yargs@16.2.0", "", { "dependencies": { "cliui": "^7.0.2", "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "require-directory": "^2.1.1", "string-width": "^4.2.0", "y18n": "^5.0.5", "yargs-parser": "^20.2.2" } }, "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw=="],
 
     "react-native-web/@react-native/normalize-colors": ["@react-native/normalize-colors@0.74.89", "", {}, "sha512-qoMMXddVKVhZ8PA1AbUCk83trpd6N+1nF2A6k1i6LsQObyS92fELuk8kU/lQs6M7BsMHwqyLCpQJ1uFgNvIQXg=="],
@@ -2007,6 +2033,8 @@
 
     "ora/chalk/supports-color": ["supports-color@5.5.0", "", { "dependencies": { "has-flag": "^3.0.0" } }, "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow=="],
 
+    "react-native-paper/color/color-convert": ["color-convert@1.9.3", "", { "dependencies": { "color-name": "1.1.3" } }, "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg=="],
+
     "react-native-vector-icons/yargs/cliui": ["cliui@7.0.4", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.0", "wrap-ansi": "^7.0.0" } }, "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ=="],
 
     "react-native-vector-icons/yargs/yargs-parser": ["yargs-parser@20.2.9", "", {}, "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="],
@@ -2043,6 +2071,8 @@
 
     "ora/chalk/supports-color/has-flag": ["has-flag@3.0.0", "", {}, "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="],
 
+    "react-native-paper/color/color-convert/color-name": ["color-name@1.1.3", "", {}, "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="],
+
     "react-native-vector-icons/yargs/cliui/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
 
     "serve-static/send/debug/ms": ["ms@2.0.0", "", {}, "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="],

components/Alert/AlertDefaultSystem.ts

@@ -0,0 +1,31 @@
+import { Alert } from "react-native";
+
+export default function AlertDefaultSystem({
+  title,
+  message,
+  textLeft,
+  textRight,
+  onPressLeft,
+  onPressRight,
+}: {
+  title: string;
+  message: string;
+  textLeft: string;
+  textRight: string;
+  onPressLeft?: () => void;
+  onPressRight?: () => void;
+}) {
+  return Alert.alert(title, message, [
+    {
+      style: "cancel",
+      text: textLeft,
+      onPress: () => onPressLeft?.(),
+    },
+    {
+      style: "default",
+      text: textRight,
+      isPreferred: true,
+      onPress: () => onPressRight?.(),
+    },
+  ]);
+}

components/Badge/BadgeCustom.tsx

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

components/Box/BaseBox.tsx

@@ -1,52 +1,79 @@
 import { AccentColor } from "@/constants/color-palet";
-import { StyleProp, TouchableHighlight, View, ViewStyle } from "react-native";
+import {
+  PADDING_MEDIUM,
+  PADDING_SMALL
+} from "@/constants/constans-value";
+import { Href, router } from "expo-router";
+import {
+  StyleProp,
+  TouchableOpacity,
+  View,
+  ViewStyle
+} from "react-native";
 
 interface BaseBoxProps {
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
+  href?: Href;
   onPress?: () => void;
   marginBottom?: number;
   padding?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
   paddingInline?: number;
+  paddingBlock?: number;
+  backgroundColor?: string;
 }
 
 export default function BaseBox({
   children,
   style,
+  href,
   onPress,
-  marginBottom = 16,
-  padding = 12,
+  marginBottom = PADDING_MEDIUM,
+  paddingBlock = PADDING_MEDIUM,
+  paddingInline = PADDING_SMALL,
+  paddingTop = PADDING_MEDIUM,
+  paddingBottom = PADDING_MEDIUM,
+  backgroundColor = AccentColor.darkblue,
 }: BaseBoxProps) {
+
   return (
     <>
-      {onPress ? (
-        <TouchableHighlight
-          onPress={onPress}
+      {onPress || href ? (
+        <TouchableOpacity
+          activeOpacity={0.7}
+          onPress={href ? () => router.navigate(href) : onPress}
           style={[
             {
-              backgroundColor: AccentColor.darkblue,
+              backgroundColor,
               borderColor: AccentColor.blue,
               borderWidth: 1,
               borderRadius: 10,
               marginBottom,
-              padding,
+              paddingBlock,
+              paddingInline,
+              paddingTop,
+              paddingBottom,
             },
             style,
           ]}
-          // activeOpacity={0.7}
         >
           <View>{children}</View>
-        </TouchableHighlight>
+        </TouchableOpacity>
       ) : (
         <View
           style={[
             {
-              backgroundColor: AccentColor.darkblue,
+              backgroundColor,
               borderColor: AccentColor.blue,
               borderWidth: 1,
               borderRadius: 10,
               marginBottom,
-              padding,
+              paddingBlock,
+              paddingInline,
+              paddingTop,
+              paddingBottom,
             },
             style,
           ]}

components/Box/BoxWithHeaderInformation.tsx

@@ -0,0 +1,20 @@
+import { Href } from "expo-router";
+import BaseBox from "./BaseBox";
+
+export default function BoxWithHeaderSection({
+  children,
+  href,
+  onPress,
+}: {
+  children: React.ReactNode;
+  href?: Href;
+  onPress?: () => void;
+}) {
+  return (
+    <>
+      <BaseBox href={href} onPress={onPress} style={{ paddingTop: 5 }}>
+        {children}
+      </BaseBox>
+    </>
+  );
+}

components/Button/BackButton.tsx

@@ -3,19 +3,33 @@ import { Ionicons } from "@expo/vector-icons";
 import { Href, router } from "expo-router";
 
 /**
- * 
+ *
  * @param path - path to navigate to ?
  * @default router.back()
  * @returns if path : router.replace(path) else router.back()
  */
-const LeftButtonCustom = ({path}: {path?: Href}) => {
+const LeftButtonCustom = ({
+  path,
+  icon = "arrow-back",
+  iconCustom,
+}: {
+  path?: Href;
+  icon?: React.ReactNode | any;
+  iconCustom?: React.ReactNode;
+}) => {
   return (
-    <Ionicons
-      name="arrow-back"
-      size={20}
-      color={MainColor.yellow}
-      onPress={() => path ? router.replace(path) : router.back()}
-    />
+    <>
+      {iconCustom ? (
+        iconCustom
+      ) : (
+        <Ionicons
+          name={icon}
+          size={20}
+          color={MainColor.yellow}
+          onPress={() => (path ? router.replace(path) : router.back())}
+        />
+      )}
+    </>
   );
 };
 

components/Button/ButtonCustom.tsx

@@ -5,6 +5,7 @@ import { StyleProp, Text, TouchableOpacity, ViewStyle } from "react-native";
 import { radiusMap } from "@/constants/radius-value";
 import { MainColor } from "@/constants/color-palet";
 import { stylesButton } from "./buttonCustomStyles";
+import { Href, router } from "expo-router";
 
 // Import radiusMap
 
@@ -13,6 +14,7 @@ type RadiusType = keyof typeof radiusMap | number;
 
 interface ButtonProps {
   children?: React.ReactNode;
+  href?: Href;
   onPress?: () => void;
   title?: string;
   backgroundColor?: string;
@@ -25,6 +27,7 @@ interface ButtonProps {
 
 const ButtonCustom: React.FC<ButtonProps> = ({
   children,
+  href,
   onPress,
   title = "Button",
   backgroundColor = MainColor.yellow,
@@ -38,12 +41,19 @@ const ButtonCustom: React.FC<ButtonProps> = ({
     <TouchableOpacity
       style={[
         stylesButton.button,
-        disabled && stylesButton.disabled,
-        style,
         { borderRadius: radius },
-        { backgroundColor },
+        disabled
+          ? [stylesButton.disabled, { backgroundColor: MainColor.disabled }]
+          : { backgroundColor },
+        style,
       ]}
-      onPress={onPress}
+      onPress={() => {
+        if (href) {
+          router.push(href);
+        } else {
+          onPress?.();
+        }
+      }}
       disabled={disabled}
       activeOpacity={0.8}
     >

components/Button/DotButton.tsx

@@ -0,0 +1,13 @@
+import { Ionicons } from "@expo/vector-icons";
+import { MainColor } from "@/constants/color-palet";
+
+export default function DotButton({ onPress }: { onPress: () => void }) {
+  return (
+    <Ionicons
+      onPress={onPress}
+      name="ellipsis-vertical"
+      size={20}
+      color={MainColor.yellow}
+    />
+  );
+}

components/Button/FloatingButton.tsx

@@ -0,0 +1,45 @@
+// components/FloatingButton.tsx
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import React from "react";
+import { StyleSheet, ViewStyle } from "react-native";
+import { FAB } from "react-native-paper";
+
+// Props untuk komponen
+interface FloatingButtonProps {
+  onPress: () => void;
+//   label?: string;
+  icon?: string; // MaterialCommunityIcons
+  style?: ViewStyle;
+}
+
+const FloatingButton: React.FC<FloatingButtonProps> = ({
+  onPress,
+  //   label = "Buat",
+  icon = "pencil-plus-outline",
+  style,
+}) => {
+  return (
+    <FAB
+      style={[styles.fab, style]}
+      icon={icon}
+      color={MainColor.white}
+      //   label={label}
+      onPress={onPress}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  fab: {
+    position: "absolute",
+    margin: 16,
+    right: 0,
+    bottom: 0,
+    backgroundColor: AccentColor.softblue, // Warna Twitter biru
+    borderRadius: 50,
+    borderColor: AccentColor.blue,
+    borderWidth: 1,
+  },
+});
+
+export default FloatingButton;

components/Button/buttonCustomStyles.ts

@@ -7,7 +7,7 @@ import { StyleSheet } from "react-native";
 export const stylesButton = StyleSheet.create({
     button: {
       backgroundColor: MainColor.yellow,
-      paddingVertical: 12,
+      paddingVertical: 10,
       paddingHorizontal: 20,
       flexDirection: "row", // 👈 Tambahkan baris ini
       alignItems: "center",

components/Center/CenterCustom.tsx

@@ -0,0 +1,51 @@
+// Center.tsx
+import React from "react";
+import { View, StyleSheet, ViewStyle } from "react-native";
+
+type JustifyContent =
+  | "flex-start"
+  | "flex-end"
+  | "center"
+  | "space-between"
+  | "space-around"
+  | "space-evenly";
+
+type AlignItems = "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+
+interface CenterProps {
+  children: React.ReactNode;
+  style?: ViewStyle;
+  direction?: "row" | "column";
+  justifyContent?: JustifyContent;
+  alignItems?: AlignItems;
+}
+
+const CenterCustom: React.FC<CenterProps> = ({
+  children,
+  style,
+  direction = "column",
+  justifyContent = "center",
+  alignItems = "center",
+}) => {
+  return (
+    <View
+      style={[
+        styles.container,
+        { flexDirection: direction },
+        { justifyContent },
+        { alignItems },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export default CenterCustom;

components/Checkbox/CheckboxCustom.tsx

@@ -0,0 +1,133 @@
+import { AccentColor } from "@/constants/color-palet";
+import { MaterialIcons } from "@expo/vector-icons"; // Bisa diganti dengan ikon lain
+import React, { useContext } from "react";
+import { Animated, Text, TouchableOpacity, View } from "react-native";
+import { checkboxStyles } from "./checkbox-styles";
+
+// Context untuk Group
+interface CheckboxGroupContextType {
+  value: (string | number)[];
+  onChange: (value: (string | number)[]) => void;
+  disabled?: boolean;
+}
+
+const CheckboxGroupContext =
+  React.createContext<CheckboxGroupContextType | null>(null);
+
+// Tipe props
+// Tambahkan prop baru: groupValueKey
+interface CheckboxProps {
+  label?: string;
+  description?: string;
+  error?: string;
+  value?: boolean; // controlled value (untuk standalone)
+  onChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  size?: number;
+  color?: string;
+  style?: object;
+  component?: React.ReactNode;
+  // Prop tambahan untuk Group
+  valueKey?: string | number; // nilai unik untuk identifikasi di group
+}
+
+const CheckboxCustom: React.FC<CheckboxProps> = ({
+  label,
+  description,
+  error,
+  value: controlledValue,
+  onChange,
+  disabled: propDisabled,
+  size = 20,
+  color = AccentColor.softblue,
+  style,
+  component,
+  valueKey,
+}) => {
+  //   const [uncontrolledChecked, setUncontrolledChecked] = useState(false);
+  //   const isChecked = controlledValue ?? uncontrolledChecked;
+  //   const scaleValue = new Animated.Value(isChecked ? 1 : 0);
+
+  const group = useContext(CheckboxGroupContext);
+  const isInsideGroup = !!group && valueKey !== undefined;
+
+  // Jika di dalam group, gunakan logika group
+  const isChecked = isInsideGroup
+    ? group.value.includes(valueKey!)
+    : controlledValue ?? false;
+
+  const disabled = propDisabled || (isInsideGroup && group.disabled);
+
+  const scaleValue = new Animated.Value(isChecked ? 1 : 0);
+
+  const toggle = () => {
+    if (disabled) return;
+
+    if (isInsideGroup) {
+      const newValue = isChecked
+        ? group.value.filter((v) => v !== valueKey)
+        : [...group.value, valueKey!];
+      group.onChange(newValue);
+    } else if (onChange) {
+      onChange(!controlledValue);
+    }
+  };
+
+  const styles = checkboxStyles({
+    size,
+    color,
+    disabled: disabled as boolean,
+    error: !!error,
+  });
+
+  return (
+    <TouchableOpacity
+      activeOpacity={disabled ? 1 : 0.7}
+      onPress={toggle}
+      style={[styles.container, style]}
+      disabled={disabled}
+    >
+      <View style={styles.innerContainer}>
+        <View style={[styles.box, isChecked && !disabled && styles.checked]}>
+          {isChecked && (
+            <Animated.View
+              style={{
+                transform: [
+                  {
+                    scale: scaleValue.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [0, 1],
+                    }),
+                  },
+                ],
+              }}
+            >
+              <MaterialIcons name="check" size={size * 0.6} color="#fff" />
+            </Animated.View>
+          )}
+        </View>
+        {component}
+        {(label || description) && (
+          <View style={styles.labelWrapper}>
+            {label ? (
+              <Text style={styles.label} numberOfLines={1}>
+                {label}
+              </Text>
+            ) : null}
+            {description ? (
+              <Text style={styles.description} numberOfLines={2}>
+                {description}
+              </Text>
+            ) : null}
+            {error ? <Text style={styles.errorText}>{error}</Text> : null}
+          </View>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default CheckboxCustom;
+
+// Export context agar bisa digunakan
+export { CheckboxGroupContext };

components/Checkbox/CheckboxGroup.tsx

@@ -0,0 +1,75 @@
+import React, { useState, useMemo } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { CheckboxGroupContext } from "./CheckboxCustom";
+
+interface CheckboxGroupProps {
+  value?: (string | number)[];
+  onChange?: (values: (string | number)[]) => void;
+  defaultValue?: (string | number)[];
+  label?: string;
+  description?: string;
+  error?: string;
+  disabled?: boolean;
+  children: React.ReactNode;
+  style?: object;
+}
+const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
+  value: controlledValue,
+  onChange,
+  defaultValue = [],
+  label,
+  description,
+  error,
+  disabled = false,
+  children,
+  style,
+}) => {
+  const [uncontrolledValue, setUncontrolledValue] =
+    useState<(string | number)[]>(defaultValue);
+
+  const value = controlledValue ?? uncontrolledValue;
+  const handleChange = onChange ?? setUncontrolledValue;
+
+  const contextValue = useMemo(
+    () => ({ value, onChange: handleChange, disabled }),
+    [value, handleChange, disabled]
+  );
+
+  return (
+    <CheckboxGroupContext.Provider value={contextValue}>
+      <View style={[styles.container, style]}>
+        {label ? <Text style={styles.label}>{label}</Text> : null}
+        {description ? (
+          <Text style={styles.description}>{description}</Text>
+        ) : null}
+        {children}
+        {error ? <Text style={styles.errorText}>{error}</Text> : null}
+      </View>
+    </CheckboxGroupContext.Provider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 8,
+  },
+  label: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#f8f9fa",
+    marginBottom: 4,
+  },
+  description: {
+    fontSize: 14,
+    color: "#ced4da",
+    marginBottom: 8,
+  },
+  errorText: {
+    color: "#e03131",
+    fontSize: 14,
+    marginTop: 4,
+  },
+});
+
+export default CheckboxGroup;
+

components/Checkbox/checkbox-styles.tsx

@@ -0,0 +1,61 @@
+import { MainColor } from "@/constants/color-palet";
+import { StyleSheet } from "react-native";
+
+export const checkboxStyles = (props: {
+  size: number;
+  color: string;
+  disabled: boolean;
+  error: boolean;
+}) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: "row",
+      alignItems: "flex-start",
+      //   marginBottom: 12,
+    },
+    innerContainer: {
+      flexDirection: "row",
+      alignItems: "center",
+    },
+    box: {
+      width: props.size,
+      height: props.size,
+      borderRadius: 6,
+      borderWidth: 2,
+      borderColor: props.error
+        ? "#fff"
+        : props.disabled
+        ? "#ced4da"
+        : props.color,
+      justifyContent: "center",
+      alignItems: "center",
+      marginRight: 10,
+    },
+    checked: {
+      backgroundColor: props.color,
+      borderColor: props.color,
+    },
+    checkIcon: {
+      color: MainColor.white,
+      fontWeight: "bold",
+      fontSize: props.size * 0.6,
+    },
+    labelWrapper: {
+      flex: 1,
+    },
+    label: {
+      fontSize: props.size * 0.6,
+      color: props.disabled ? MainColor.disabled : MainColor.white,
+      fontWeight: "500",
+    },
+    description: {
+      fontSize: props.size * 0.5,
+      color: props.disabled ? MainColor.disabled : MainColor.white,
+      marginTop: 2,
+    },
+    errorText: {
+      color: MainColor.red,
+      fontSize: props.size * 0.5,
+      marginTop: 2,
+    },
+  });

components/Clickable/ClickableCustom.tsx

@@ -0,0 +1,36 @@
+import { StyleSheet, TouchableOpacity } from "react-native";
+
+export default function ClickableCustom({
+  children,
+  onPress,
+  disabled,
+  style,
+  ...props
+}: {
+  children: React.ReactNode;
+  onPress: () => void;
+  disabled?: boolean;
+  style?: any;
+  [key: string]: any;
+}) {
+  return (
+    <>
+      <TouchableOpacity
+        activeOpacity={0.7}
+        onPress={onPress}
+        disabled={disabled}
+        style={[styles.container, style]}
+        {...props}
+      >
+        {children}
+      </TouchableOpacity>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    height: "auto",
+  },
+});

components/Container/CircleContainer.tsx

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

components/DateInput/DataTimeAndroid.tsx

@@ -0,0 +1,205 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// DateTimeInput.tsx
+import { MainColor } from "@/constants/color-palet";
+import { GStyles } from "@/styles/global-styles";
+import { Ionicons } from "@expo/vector-icons";
+import DateTimePicker, {
+  DateTimePickerEvent,
+} from "@react-native-community/datetimepicker";
+import React, { useCallback, useState } from "react";
+import { Pressable, StyleProp, Text, View, ViewStyle } from "react-native";
+import Grid from "../Grid/GridCustom";
+import TextCustom from "../Text/TextCustom";
+
+interface DateTimeInputProps {
+  // Main
+  value?: DateTimePickerEvent;
+  mode?: "date" | "time";
+  onChange: (selectedDate: DateTimePickerEvent) => void;
+  maximumDate?: Date;
+  minimumDate?: Date;
+  // Main
+  label?: string;
+  required?: boolean;
+  disabled?: boolean;
+  iconLeft?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  borderRadius?: number;
+  externalError?: string;
+  internalError?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+const DateTimeInput_Android: React.FC<DateTimeInputProps> = ({
+  // Main
+  value,
+  mode,
+  onChange,
+  maximumDate,
+  minimumDate,
+  // Main
+  label,
+  required,
+  disabled,
+  iconLeft,
+  style,
+  borderRadius = 8,
+  externalError,
+  internalError,
+  containerStyle,
+}) => {
+  const [showDate, setShowDate] = useState(false);
+  const [showTime, setShowTime] = useState(false);
+  const [selectedDate, setSelectedDate] = useState<Date>(value as any);
+  const [selectedTime, setSelectedTime] = useState<Date>(value as any);
+
+  // Fungsi untuk menggabungkan tanggal dan waktu
+  const combineDateAndTime = useCallback((date: Date, time: Date): Date => {
+    const combined = new Date(date);
+    combined.setHours(
+      time.getHours(),
+      time.getMinutes(),
+      time.getSeconds(),
+      time.getMilliseconds()
+    );
+    return combined;
+  }, []);
+
+  // Handler untuk tanggal
+  const handleConfirmDate = (event: DateTimePickerEvent, date?: Date) => {
+    if (event.type === "set" && date) {
+      setSelectedDate(date);
+      if (selectedTime) {
+        const combined = combineDateAndTime(date, selectedTime);
+        onChange?.(combined as any);
+      }
+    }
+    setShowDate(false);
+  };
+
+  // Handler untuk waktu
+  const handleConfirmTime = (event: DateTimePickerEvent, time?: Date) => {
+    if (event.type === "set" && time) {
+      setSelectedTime(time);
+      if (selectedDate) {
+        const combined = combineDateAndTime(selectedDate, time);
+        onChange?.(combined as any);
+      }
+    }
+    setShowTime(false);
+  };
+
+  const toggleDatePicker = () => {
+    setShowDate(!showDate);
+  };
+
+  const toggleTimePicker = () => {
+    setShowTime(!showTime);
+  };
+
+  return (
+    <>
+      <View style={[GStyles.inputContainerArea, containerStyle]}>
+        {label && (
+          <Text style={GStyles.inputLabel}>
+            {label}
+            {required && <Text style={GStyles.inputRequired}> *</Text>}
+          </Text>
+        )}
+        <View
+          style={[
+            style,
+            { borderRadius },
+            externalError || internalError ? GStyles.inputErrorBorder : null,
+            GStyles.inputContainerInput,
+            disabled && GStyles.disabledBox,
+          ]}
+        >
+          <View style={GStyles.inputIcon}>
+            <Ionicons
+              name="calendar-outline"
+              size={20}
+              color={MainColor.placeholder}
+            />
+          </View>
+
+          <Grid
+            containerStyle={{
+              borderRadius: 8,
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <Grid.Col span={6} style={{}}>
+              <Pressable onPress={toggleDatePicker}>
+                <TextCustom color="gray">
+                  {selectedDate ? (
+                    <TextCustom color="black">
+                      {selectedDate.toLocaleDateString()}
+                    </TextCustom>
+                  ) : (
+                    "Pilih tanggal"
+                  )}
+                </TextCustom>
+              </Pressable>
+            </Grid.Col>
+            <Grid.Col span={1} style={{ alignItems: "center" }}>
+              <TextCustom color="gray">|</TextCustom>
+            </Grid.Col>
+
+            <Grid.Col span={5} style={{}}>
+              <Pressable onPress={toggleTimePicker}>
+                <TextCustom color="gray">
+                  {selectedTime ? (
+                    <TextCustom color="black">
+                      {selectedTime.toLocaleTimeString("id-ID", {
+                        minute: "2-digit",
+                        hour: "2-digit",
+                      })}
+                    </TextCustom>
+                  ) : (
+                    "Pilih waktu"
+                  )}
+                </TextCustom>
+              </Pressable>
+            </Grid.Col>
+          </Grid>
+        </View>
+        {externalError ||
+          (internalError && (
+            <Text style={GStyles.inputErrorMessage}>
+              {externalError || internalError}
+            </Text>
+          ))}
+      </View>
+
+      {showDate && (
+        <DateTimePicker
+          testID="dateTimePicker"
+          value={selectedDate || new Date()}
+          mode="date"
+          is24Hour={true}
+          display="default"
+          onChange={handleConfirmDate}
+          minimumDate={minimumDate}
+          maximumDate={maximumDate}
+        />
+      )}
+
+      {showTime && (
+        <DateTimePicker
+          testID="dateTimePicker"
+          value={selectedTime || new Date()}
+          mode="time"
+          is24Hour={true}
+          display="default"
+          onChange={handleConfirmTime}
+          minimumDate={minimumDate}
+          maximumDate={maximumDate}
+        />
+      )}
+    </>
+  );
+};
+
+export default DateTimeInput_Android;

components/DateInput/DateTimeIOS.tsx

@@ -0,0 +1,161 @@
+// DateTimeInput.tsx
+import { MainColor } from "@/constants/color-palet";
+import { GStyles } from "@/styles/global-styles";
+import { Ionicons } from "@expo/vector-icons";
+import DateTimePicker, {
+    DateTimePickerEvent,
+} from "@react-native-community/datetimepicker";
+import dayjs from "dayjs";
+import React, { useState } from "react";
+import {
+    StyleProp,
+    Text,
+    View,
+    ViewStyle
+} from "react-native";
+import ClickableCustom from "../Clickable/ClickableCustom";
+import TextCustom from "../Text/TextCustom";
+
+interface DateTimeInputProps {
+  // Main
+  value?: DateTimePickerEvent;
+  mode?: "date" | "time";
+  onChange: (selectedDate: DateTimePickerEvent) => void;
+  maximumDate?: Date;
+  minimumDate?: Date;
+  // Main
+  label?: string;
+  required?: boolean;
+  disabled?: boolean;
+  iconLeft?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  borderRadius?: number;
+  externalError?: string;
+  internalError?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+const DateTimeInput_IOS: React.FC<DateTimeInputProps> = ({
+  // Main
+  value,
+  mode,
+  onChange,
+  maximumDate,
+  minimumDate,
+  // Main
+  label,
+  required,
+  disabled,
+  iconLeft,
+  style,
+  borderRadius = 8,
+  externalError,
+  internalError,
+  containerStyle,
+}) => {
+  const [show, setShow] = useState(false);
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(
+    value as any
+  );
+
+  const handleConfirm = (event: any, date?: Date) => {
+    if (event.type === "set" && date !== undefined) {
+      setSelectedDate(date);
+      onChange(date as any);
+    }
+  };
+
+  const handlePress = () => {
+    setShow(!show);
+  };
+
+  return (
+    <>
+      <ClickableCustom
+        activeOpacity={0.8}
+        style={[GStyles.inputContainerArea, containerStyle]}
+        onPress={handlePress}
+      >
+        {label && (
+          <Text style={GStyles.inputLabel}>
+            {label}
+            {required && <Text style={GStyles.inputRequired}> *</Text>}
+          </Text>
+        )}
+        <View
+          style={[
+            style,
+            { borderRadius },
+            externalError || internalError ? GStyles.inputErrorBorder : null,
+            GStyles.inputContainerInput,
+            disabled && GStyles.disabledBox,
+          ]}
+        >
+          <View style={GStyles.inputIcon}>
+            <Ionicons
+              name="calendar-outline"
+              size={20}
+              color={MainColor.placeholder}
+            />
+          </View>
+
+          <TextCustom color="gray">
+            {selectedDate ? (
+              <TextCustom color="black">
+                {dayjs(selectedDate).format("DD-MM-YYYY HH:mm")}
+              </TextCustom>
+            ) : (
+              "Pilih tanggal"
+            )}
+          </TextCustom>
+        </View>
+        {externalError ||
+          (internalError && (
+            <Text style={GStyles.inputErrorMessage}>
+              {externalError || internalError}
+            </Text>
+          ))}
+      </ClickableCustom>
+
+      {show && (
+        <>
+          <View
+            style={{
+              position: "absolute",
+              zIndex: 15,
+              backgroundColor: "white",
+              borderRadius: 8,
+              padding: 10,
+              // top: 0,
+              bottom: 0,
+              left: 0,
+              right: 0,
+              borderColor: "#ccc",
+              borderWidth: 1,
+            }}
+          >
+            <View style={{ alignItems: "flex-end" }}>
+              <Ionicons
+                name="close"
+                size={20}
+                color="black"
+                onPress={() => setShow(false)}
+              />
+            </View>
+
+            <DateTimePicker
+              value={selectedDate || new Date()}
+              mode={"datetime"}
+              display="inline"
+              onChange={handleConfirm}
+              minimumDate={minimumDate}
+              maximumDate={maximumDate}
+            />
+          </View>
+        </>
+      )}
+    </>
+  );
+};
+
+export default DateTimeInput_IOS;

components/DateInput/DateTimePickerCustom.tsx

@@ -0,0 +1,54 @@
+
+import {
+  DateTimePickerEvent,
+} from "@react-native-community/datetimepicker";
+import React from "react";
+import { Platform } from "react-native";
+import DateTimeInput_Android from "./DataTimeAndroid";
+import DateTimeInput_IOS from "./DateTimeIOS";
+
+type Props = {
+  value?: Date;
+  onChange?: (date: Date) => void;
+  label?: string;
+  required?: boolean;
+  maximumDate?: Date;
+  minimumDate?: Date;
+};
+
+const DateTimePickerCustom: React.FC<Props> = ({
+  value,
+  onChange,
+  label,
+  required,
+  maximumDate,
+  minimumDate,
+}) => {
+  return (
+    <>
+      {Platform.OS === "ios" ? (
+        <DateTimeInput_IOS
+          label={label}
+          onChange={(date: DateTimePickerEvent) => {
+            onChange?.(date as any);
+          }}
+          required={required}
+          maximumDate={maximumDate}
+          minimumDate={minimumDate}
+        />
+      ) : (
+        <DateTimeInput_Android
+          label={label}
+          onChange={(date: DateTimePickerEvent) => {
+            onChange?.(date as any);
+          }}
+          required={required}
+          maximumDate={maximumDate}
+          minimumDate={minimumDate}
+        />
+      )}
+    </>
+  );
+};
+
+export default DateTimePickerCustom;

components/DateInput/DateTimeTry.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import { Pressable, Text, StyleSheet } from "react-native";
+import DateTimePicker, { Event } from "@react-native-community/datetimepicker";
+
+type Props = {
+  value?: Date;
+  mode?: "date" | "time" | "datetime";
+  onChange: (date: Date) => void;
+};
+
+const DateTimePickerTry: React.FC<Props> = ({
+  value = new Date(),
+  mode = "date",
+  onChange,
+}) => {
+  const [show, setShow] = useState(false);
+
+  const toggleDatePicker = () => {
+    setShow(!show);
+  };
+
+  const handleConfirm = (event: Event, selectedDate?: Date) => {
+    if (event.type === "set" && selectedDate !== undefined) {
+      onChange(selectedDate);
+    }
+    setShow(false);
+  };
+
+  return (
+    <>
+      <Pressable onPress={toggleDatePicker} style={styles.button}>
+        <Text style={styles.buttonText}>
+          {value ? value.toLocaleDateString() : "Pilih tanggal"}
+        </Text>
+      </Pressable>
+
+      {show && (
+        <DateTimePicker
+        //   style={styles.button}
+          textColor="white"
+          testID="dateTimePicker"
+          value={value}
+          mode={mode}
+          is24Hour={true}
+          display="default"
+          onChange={handleConfirm as any}
+        />
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    backgroundColor: "white",
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    marginVertical: 10,
+  },
+  buttonText: {
+    color: "white",
+    fontSize: 16,
+    fontWeight: "bold",
+  },
+});
+
+export default DateTimePickerTry;

components/Divider/Divider.tsx

@@ -0,0 +1,25 @@
+import { AccentColor } from "@/constants/color-palet";
+import { View } from "react-native";
+
+export default function Divider({
+    color = AccentColor.blue,
+    size = 1,
+    marginTop= 12,
+    marginBottom= 12, 
+}: {
+    color?: string;
+    size?: number;
+    marginTop?: number;
+    marginBottom?: number;
+}) {
+  return (
+    <View
+      style={{
+        borderTopColor: color,
+        borderTopWidth: size,
+        marginTop,
+        marginBottom,
+      }}
+    />
+  );
+}

components/Divider/DividerCustom.tsx

@@ -0,0 +1,186 @@
+import React from "react";
+import {
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextStyle,
+  View,
+  ViewStyle,
+} from "react-native";
+
+// Define types for props
+type Orientation = "horizontal" | "vertical";
+type HorizontalLabelPosition = "center" | "left" | "right";
+type VerticalLabelPosition = "center" | "top" | "bottom";
+type LabelPosition = HorizontalLabelPosition | VerticalLabelPosition;
+
+type Size = number | "xs" | "sm" | "md" | "lg" | "xl";
+
+interface DividerProps {
+  orientation?: Orientation;
+  color?: string;
+  size?: Size;
+  label?: React.ReactNode;
+  labelPosition?: LabelPosition;
+  labelStyle?: StyleProp<TextStyle>;
+  style?: StyleProp<ViewStyle>;
+}
+
+const DividerCustom: React.FC<DividerProps> = ({
+  orientation = "horizontal",
+  color = "#DADADA",
+  size = "xs",
+  label,
+  labelPosition = "center",
+  labelStyle,
+  style,
+}) => {
+  const isHorizontal = orientation === "horizontal";
+
+  // Convert size to actual dimensions
+  const getSize = (): number => {
+    if (typeof size === "number") return size;
+
+    switch (size) {
+      case "xs":
+        return 1;
+      case "sm":
+        return 2;
+      case "md":
+        return 3;
+      case "lg":
+        return 4;
+      case "xl":
+        return 5;
+      default:
+        return 1; // Default size
+    }
+  };
+
+  const thickness = getSize();
+
+  const capitalize = (str: string): string =>
+    str.charAt(0).toUpperCase() + str.slice(1);
+
+  const renderLabel = () => {
+    if (!label) return null;
+
+    return (
+      <View
+        style={[
+          styles.labelContainer,
+          isHorizontal
+            ? styles[
+                `label${capitalize(
+                  labelPosition as string
+                )}` as keyof typeof styles
+              ]
+            : styles[
+                `label${capitalize(
+                  labelPosition as string
+                )}` as keyof typeof styles
+              ],
+        ]}
+      >
+        <Text style={[styles.labelText, labelStyle]}>{label}</Text>
+      </View>
+    );
+  };
+
+  return (
+    <View
+      style={[
+        isHorizontal ? styles.horizontalDivider : styles.verticalDivider,
+        { backgroundColor: color },
+        style,
+      ]}
+    >
+      {isHorizontal ? (
+        labelPosition !== "center" ? (
+          <View style={{ flex: 1, flexDirection: "row", alignItems: "center" }}>
+            {labelPosition === "left" && renderLabel()}
+            <View
+              style={{ flex: 1, backgroundColor: color, height: thickness }}
+            />
+            {labelPosition === "right" && renderLabel()}
+          </View>
+        ) : (
+          <>
+            {renderLabel()}
+            <View style={{ flex: 1 }} />
+          </>
+        )
+      ) : labelPosition !== "center" && !isHorizontal ? (
+        <View
+          style={{ flex: 1, flexDirection: "column", justifyContent: "center" }}
+        >
+          {labelPosition === "top" && renderLabel()}
+          <View style={{ flex: 1, backgroundColor: color, width: thickness }} />
+          {labelPosition === "bottom" && renderLabel()}
+        </View>
+      ) : (
+        <>
+          {renderLabel()}
+          <View style={{ flex: 1 }} />
+        </>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  horizontalDivider: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginVertical: 8,
+    position: "relative",
+  },
+  verticalDivider: {
+    flexDirection: "column",
+    justifyContent: "center",
+    marginHorizontal: 8,
+    position: "relative",
+  },
+  labelText: {
+    fontSize: 14,
+    fontWeight: "500",
+    color: "#666",
+    marginHorizontal: 12,
+    marginVertical: 4,
+    backgroundColor: "white",
+    paddingHorizontal: 8,
+  },
+  labelContainer: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  labelLeft: {
+    left: 12,
+    right: null,
+    alignItems: "flex-start",
+  },
+  labelRight: {
+    right: 12,
+    left: null,
+    alignItems: "flex-end",
+  },
+  labelCenter: {
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  labelTop: {
+    top: 12,
+    bottom: null,
+    justifyContent: "flex-start",
+  },
+  labelBottom: {
+    bottom: 12,
+    top: null,
+    justifyContent: "flex-end",
+  },
+});
+
+export default DividerCustom;