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

@@ -4,14 +4,16 @@ import {
   DrawerCustom,
   Grid,
   MenuDrawerDynamicGrid,
+  Spacing,
   StackCustom,
   TextCustom,
-  ViewWrapper,
+  ViewWrapper
 } from "@/components";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import { AccentColor } from "@/constants/color-palet";
 import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
+import Event_AlertButtonStatusSection from "@/screens/Event/AlertButtonStatusSection";
 import Event_ButtonStatusSection from "@/screens/Event/ButtonStatusSection";
 import { Ionicons } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
@@ -43,8 +45,10 @@ const listData = [
 ];
 
 export default function EventDetail() {
-  const { id, detail } = useLocalSearchParams();
+  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);
@@ -52,7 +56,7 @@ export default function EventDetail() {
     setOpenDrawer(false);
   };
 
-  const drawerItemsDraftEvent = [
+  const drawerMenuDraftEvent = ({ id }: { id: string }) => [
     {
       icon: (
         <Ionicons
@@ -70,10 +74,10 @@ export default function EventDetail() {
     <>
       <Stack.Screen
         options={{
-          title: `Detail ${detail === "publish" ? "" : detail}`,
+          title: `Detail ${status === "publish" ? "" : status}`,
           headerLeft: () => <LeftButtonCustom />,
           headerRight: () =>
-            detail === "draft" ? (
+            status === "draft" ? (
               <DotButton onPress={() => setOpenDrawer(true)} />
             ) : null,
         }}
@@ -82,7 +86,7 @@ export default function EventDetail() {
         <BaseBox>
           <StackCustom>
             <TextCustom bold align="center" size="xlarge">
-              Judul event {id}
+              Judul event {status}
             </TextCustom>
             {listData.map((item, index) => (
               <Grid key={index}>
@@ -96,21 +100,34 @@ export default function EventDetail() {
             ))}
           </StackCustom>
         </BaseBox>
+        <Event_ButtonStatusSection
+          status={status as string}
+          onOpenAlert={setOpenAlert}
+          onOpenDeleteAlert={setOpenDeleteAlert}
+        />
+        <Spacing />
       </ViewWrapper>
 
-      {/* <Event_ButtonStatusSection detail={detail as string} /> */}
-
       <DrawerCustom
         isVisible={openDrawer}
         closeDrawer={() => setOpenDrawer(false)}
         height={250}
       >
         <MenuDrawerDynamicGrid
-          data={drawerItemsDraftEvent}
+          data={drawerMenuDraftEvent({ id: id as string })}
           columns={4}
           onPressItem={handlePress}
         />
       </DrawerCustom>
+
+      <Event_AlertButtonStatusSection
+        id={id as string}
+        status={status as string}
+        openAlert={openAlert}
+        setOpenAlert={setOpenAlert}
+        openDeleteAlert={openDeleteAlert}
+        setOpenDeleteAlert={setOpenDeleteAlert}
+      />
     </>
   );
 }

screens/Event/AlertButtonStatusSection.tsx

@@ -0,0 +1,115 @@
+import AlertCustom from "@/components/Alert/AlertCustom";
+import { router } from "expo-router";
+
+export default function Event_AlertButtonStatusSection({
+  id,
+  status,
+  openAlert,
+  setOpenAlert,
+  openDeleteAlert,
+  setOpenDeleteAlert,
+}: {
+  id: string;
+  status: string;
+  openAlert: boolean;
+  setOpenAlert: (value: boolean) => void;
+  openDeleteAlert: boolean;
+  setOpenDeleteAlert: (value: boolean) => void;
+}) {
+  // --- Alert untuk aksi berdasarkan status ---
+  const renderStatusAlert = () => {
+    switch (status) {
+      case "publish":
+        return <></>;
+
+      case "review":
+        return (
+          <AlertCustom
+            isVisible={openAlert}
+            title="Batalkan Review"
+            message="Apakah Anda yakin ingin membatalkan review?"
+            textLeft="Batal"
+            textRight="Ya"
+            colorRight="green"
+            onLeftPress={() => {
+              setOpenAlert(false);
+            }}
+            onRightPress={() => {
+              setOpenAlert(false);
+              router.back();
+            }}
+          />
+        );
+
+      case "draft":
+        return (
+          <AlertCustom
+            isVisible={openAlert}
+            title="Ajukan Review ?"
+            message="Apakah Anda yakin ingin mengajukan review kembali?"
+            textLeft="Batal"
+            textRight="Ya"
+            colorRight="green"
+            onLeftPress={() => {
+              setOpenAlert(false);
+              router.back();
+            }}
+            onRightPress={() => {
+              setOpenAlert(false);
+              router.back();
+            }}
+          />
+        );
+
+      case "reject":
+        return (
+          <AlertCustom
+            isVisible={openAlert}
+            title="Edit Kembali"
+            message="Apakah Anda yakin ingin mengedit kembali event ini?"
+            textLeft="Batal"
+            textRight="Ya"
+            colorRight="green"
+            onLeftPress={() => {
+              setOpenAlert(false);
+              router.back();
+            }}
+            onRightPress={() => {
+              setOpenAlert(false);
+              router.back();
+            }}
+          />
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <>
+      {/* Alert berdasarkan status */}
+      {renderStatusAlert()}
+
+      {/* Alert untuk hapus - selalu muncul jika openDeleteAlert true */}
+      <AlertCustom
+        isVisible={openDeleteAlert}
+        title="Hapus Event"
+        message="Apakah Anda yakin ingin menghapus event ini?"
+        textLeft="Batal"
+        textRight="Ya, Hapus"
+        colorRight="red"
+        onLeftPress={() => {
+          setOpenDeleteAlert(false);
+          router.back();
+        }}
+        onRightPress={() => {
+          // Aksi hapus event
+          console.log("Menghapus event dengan ID:", id);
+          setOpenDeleteAlert(false);
+          router.back();
+        }}
+      />
+    </>
+  );
+}

screens/Event/ButtonStatusSection.tsx

@@ -1,19 +1,76 @@
-import { ButtonCustom } from "@/components";
+import { ButtonCustom, Grid } from "@/components";
 import { View } from "react-native";
 
 export default function Event_ButtonStatusSection({
-  detail,
+  status,
+  onOpenAlert,
+  onOpenDeleteAlert,
 }: {
-  detail: string;
+  status: string;
+  onOpenAlert: (value: boolean) => void;
+  onOpenDeleteAlert: (value: boolean) => void;
 }) {
-  return (
-    <>
-      {detail && detail === "draft" && (
-        <View>
-          <ButtonCustom>Ajukan Review</ButtonCustom>
-          <ButtonCustom backgroundColor="red">Hapus</ButtonCustom>
-        </View>
-      )}
-    </>
-  );
+
+  const handleOpenAlert = () => {
+    onOpenAlert(true);
+  };
+
+  const handleOpenDeleteAlert = () => {
+    onOpenDeleteAlert(true);
+  };
+
+  const DeleteButton = () => {
+    return (
+      <>
+        <ButtonCustom backgroundColor="red" textColor="white" onPress={handleOpenDeleteAlert}>
+          Hapus
+        </ButtonCustom>
+      </>
+    );
+  };
+
+  switch (status) {
+    case "publish":
+      return <></>;
+
+    case "review":
+      return (
+        <ButtonCustom onPress={handleOpenAlert}>
+          Batalkan Review
+        </ButtonCustom>
+      );
+
+    case "draft":
+      return (
+        <>
+          <Grid>
+            <Grid.Col span={5}>
+              <ButtonCustom onPress={handleOpenAlert}>Ajukan Review</ButtonCustom>
+            </Grid.Col>
+            <Grid.Col span={2}>
+              <View />
+            </Grid.Col>
+            <Grid.Col span={5}>{DeleteButton()}</Grid.Col>
+          </Grid>
+        </>
+      );
+
+    case "reject":
+      return (
+        <>
+          <Grid>
+            <Grid.Col span={5}>
+              <ButtonCustom onPress={handleOpenAlert}>Edit Kembali</ButtonCustom>
+            </Grid.Col>
+            <Grid.Col span={2}>
+              <View />
+            </Grid.Col>
+            <Grid.Col span={5}>{DeleteButton()}</Grid.Col>
+          </Grid>
+        </>
+      );
+
+    default:
+      return <ButtonCustom disabled>Status Undifined</ButtonCustom>;
+  }
 }