deskripsi:

Fix event: layout dan event deatil
Feature: Button dot, edit screen

# No Issue

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

@@ -92,6 +92,14 @@ export default function UserLayout() {
           }}
         />
 
+        <Stack.Screen
+          name="event/[id]/edit"
+          options={{
+            title: "Edit Event",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
         {/* ========== Forum Section ========= */}
         <Stack.Screen
           name="forum/create"

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

@@ -1,39 +1,68 @@
 import {
   BaseBox,
+  DotButton,
+  DrawerCustom,
   Grid,
-  Spacing,
+  MenuDrawerDynamicGrid,
   StackCustom,
   TextCustom,
   ViewWrapper,
 } from "@/components";
+import { IMenuDrawerItem } from "@/components/_Interface/types";
 import LeftButtonCustom from "@/components/Button/BackButton";
-import { Stack, useLocalSearchParams } from "expo-router";
+import { AccentColor } from "@/constants/color-palet";
+import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
+import Event_ButtonStatusSection from "@/screens/Event/ButtonStatusSection";
+import { Ionicons } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+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!",
+  },
+];
 
 export default function EventDetail() {
   const { id, detail } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
 
-  const listData = [
+  const handlePress = (item: IMenuDrawerItem) => {
+    console.log("PATH >> ", item.path);
+    router.navigate(item.path as any);
+    setOpenDrawer(false);
+  };
+
+  const drawerItemsDraftEvent = [
     {
-      title: "Lokasi",
+      icon: (
-      value:
+        <Ionicons
-        "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!",
+          name="create"
-    },
+          size={ICON_SIZE_MEDIUM}
-    {
+          color={AccentColor.white}
-      title: "Tipe Acara",
+        />
-      value: "Workshop",
+      ),
-    },
+      label: "Edit event",
-    {
+      path: `/(application)/(user)/event/${id}/edit`,
-      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!",
     },
   ];
 
@@ -41,8 +70,12 @@ export default function EventDetail() {
     <>
       <Stack.Screen
         options={{
-          title: `Detail ${detail}`,
+          title: `Detail ${detail === "publish" ? "" : detail}`,
           headerLeft: () => <LeftButtonCustom />,
+          headerRight: () =>
+            detail === "draft" ? (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ) : null,
         }}
       />
       <ViewWrapper>
@@ -64,6 +97,20 @@ export default function EventDetail() {
           </StackCustom>
         </BaseBox>
       </ViewWrapper>
+
+      {/* <Event_ButtonStatusSection detail={detail as string} /> */}
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={250}
+      >
+        <MenuDrawerDynamicGrid
+          data={drawerItemsDraftEvent}
+          columns={4}
+          onPressItem={handlePress}
+        />
+      </DrawerCustom>
     </>
   );
 }

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

@@ -0,0 +1,13 @@
+import { StackCustom, TextCustom, ViewWrapper } from "@/components";
+
+export default function EventEdit() {
+  return (
+    <>
+      <ViewWrapper>
+        <StackCustom>
+          <TextCustom>Edit Event</TextCustom>
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

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/index.ts

@@ -4,6 +4,7 @@ import AlertCustom from "./Alert/AlertCustom";
 import LeftButtonCustom from "./Button/BackButton";
 import ButtonCenteredOnly from "./Button/ButtonCenteredOnly";
 import ButtonCustom from "./Button/ButtonCustom";
+import DotButton from "./Button/DotButton";
 // Drawer
 import DrawerCustom from "./Drawer/DrawerCustom";
 import MenuDrawerDynamicGrid from "./Drawer/MenuDrawerDynamicGird";
@@ -48,11 +49,12 @@ export {
   // Box
   BaseBox,
   BoxButtonOnFooter,
-  ButtonCenteredOnly,
   InformationBox,
-  LeftButtonCustom as BackButton,
   // Button
+  ButtonCenteredOnly,
   ButtonCustom,
+  LeftButtonCustom as BackButton,
+  DotButton,
   // Drawer
   DrawerCustom,
   MenuDrawerDynamicGrid,

screens/Event/ButtonStatusSection.tsx

@@ -0,0 +1,19 @@
+import { ButtonCustom } from "@/components";
+import { View } from "react-native";
+
+export default function Event_ButtonStatusSection({
+  detail,
+}: {
+  detail: string;
+}) {
+  return (
+    <>
+      {detail && detail === "draft" && (
+        <View>
+          <ButtonCustom>Ajukan Review</ButtonCustom>
+          <ButtonCustom backgroundColor="red">Hapus</ButtonCustom>
+        </View>
+      )}
+    </>
+  );
+}