Deskripsi:

Event:
Add file:
- contibution with id
- list of participan
- publish
- BoxDetailPublishSection
- BoxPublishSection
- menuDrawerPublish

Fix:
Event:
- layout dan index\

# No Issue

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

@@ -100,6 +100,14 @@ export default function UserLayout() {
           }}
         />
 
+        <Stack.Screen
+          name="event/[id]/list-of-participants"
+          options={{
+            title: "Daftar peserta",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
         {/* ========== Forum Section ========= */}
         <Stack.Screen
           name="forum/create"

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

@@ -1,17 +1,9 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import {
-  AvatarUsernameAndOtherComponent,
-  BaseBox,
-  StackCustom,
-  TextCustom,
-} from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import FloatingButton from "@/components/Button/FloatingButton";
+import Event_BoxPublishSection from "@/screens/Event/BoxPublishSection";
 import { router } from "expo-router";
 
 export default function Event() {
-  const index = "test-id-event";
-  const status = "publish";
   return (
     <ViewWrapper
       hideFooter
@@ -20,23 +12,7 @@ export default function Event() {
       }
     >
       {Array.from({ length: 10 }).map((_, index) => (
-        <BaseBox key={index} href={`/event/${index}/${status}/detail-event`}>
-          <StackCustom gap={"xs"}>
-            <AvatarUsernameAndOtherComponent
-              avatarHref={`/profile/${index}`}
-              name="Lorem ipsum dolor sit"
-            />
-            <TextCustom truncate bold>
-              Lorem ipsum dolor sit
-            </TextCustom>
-            <TextCustom truncate={2}>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro sed
-              doloremque tempora soluta. Dolorem ex quidem ipsum tempora, ipsa,
-              obcaecati quia suscipit numquam, voluptates commodi porro impedit
-              natus quos doloremque!
-            </TextCustom>
-          </StackCustom>
-        </BaseBox>
+        <Event_BoxPublishSection key={index} id={index.toString()} />
       ))}
     </ViewWrapper>
   );

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

@@ -5,14 +5,14 @@ import {
   Grid,
   StackCustom,
   TextCustom,
-  ViewWrapper
+  ViewWrapper,
 } from "@/components";
 
 export default function Kontribusi() {
   return (
-    <ViewWrapper>
+    <ViewWrapper hideFooter>
       {Array.from({ length: 10 }).map((_, index) => (
-        <BaseBox key={index} href={`/event/${index}/publish/detail-event`}>
+        <BaseBox key={index} href={`/event/${index}/contribution`}>
           <StackCustom>
             <AvatarUsernameAndOtherComponent
               avatarHref={`/profile/${index}`}

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 EventContribution() {
+  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]/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,69 @@
+import {
+  ViewWrapper,
+  StackCustom,
+  TextCustom,
+  BaseBox,
+  Grid,
+  DotButton,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  ButtonCustom,
+  AlertCustom,
+  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";
+import { Alert } from "react-native";
+
+export default function EventPublish() {
+  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>
+    </>
+  );
+}

screens/Event/BoxDetailPublishSection.tsx

@@ -0,0 +1,61 @@
+import {
+    BaseBox,
+    Grid,
+    StackCustom,
+    TextCustom
+} from "@/components";
+
+export default function Event_BoxDetailPublishSection({
+  footerButton,
+}: {
+  footerButton?: React.ReactNode;
+}) {
+  return (
+    <>
+      <BaseBox>
+        <StackCustom>
+          <TextCustom bold align="center" size="xlarge">
+            Judul event publish
+          </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>
+
+      {footerButton}
+    </>
+  );
+}
+
+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!",
+  },
+];

screens/Event/BoxPublishSection.tsx

@@ -0,0 +1,39 @@
+import { BaseBox, StackCustom, AvatarUsernameAndOtherComponent, TextCustom } from "@/components";
+
+export default function Event_BoxPublishSection({
+    id,
+    name,
+    avatarHref,
+    description,
+    footerButton
+}: {
+    id: string;
+    name?: string;
+    avatarHref?: string;
+    description?: string;
+    footerButton?: React.ReactNode;
+}) {
+    return (
+      <>
+        <BaseBox href={`/event/${id}/publish`}>
+          <StackCustom gap={"xs"}>
+            <AvatarUsernameAndOtherComponent
+              avatarHref={`/profile/${id}`}
+              name="Lorem ipsum dolor sit"
+            />
+            <TextCustom truncate bold>
+              Lorem ipsum dolor sit
+            </TextCustom>
+            <TextCustom truncate={2}>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro sed
+              doloremque tempora soluta. Dolorem ex quidem ipsum tempora, ipsa,
+              obcaecati quia suscipit numquam, voluptates commodi porro impedit
+              natus quos doloremque!
+            </TextCustom>
+          </StackCustom>
+        </BaseBox>
+        {footerButton}
+      </>
+    );
+}
+    

screens/Event/menuDrawerPublish.tsx

@@ -0,0 +1,17 @@
+import { AccentColor } from "@/constants/color-palet";
+import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
+import { FontAwesome } from "@expo/vector-icons";
+
+export const menuDrawerPublishEvent = ({ id }: { id: string }) => [
+  {
+    icon: (
+      <FontAwesome
+        name="users"
+        size={ICON_SIZE_MEDIUM}
+        color={AccentColor.white}
+      />
+    ),
+    label: "Daftar peserta",
+    path: `/(application)/(user)/event/${id}/list-of-participants`,
+  },
+];