fix

deskripsi:
- forum & forumku

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

@@ -1,18 +1,30 @@
 import {
+  AlertCustom,
   AvatarCustom,
   ButtonCustom,
   CenterCustom,
+  DrawerCustom,
   Grid,
   StackCustom,
   TextCustom,
   ViewWrapper,
 } from "@/components";
-import Forum_BerandaSection from "@/screens/Forum/berandaSection";
+import { MainColor } from "@/constants/color-palet";
+import Forum_BerandaSection from "@/screens/Forum/BerandaSection";
+import { listDataDummyForum } 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>
@@ -35,8 +47,65 @@ export default function Forumku() {
               </ButtonCustom>
             </Grid.Col>
           </Grid>
-      <Forum_BerandaSection />
+          {listDataDummyForum.map((e, i) => (
+            <Forum_BerandaSection
+              key={i}
+              data={e}
+              setOpenDrawer={setOpenDrawer}
+              setStatus={setStatus}
+            />
+          ))}
         </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/index.tsx

@@ -1,25 +1,35 @@
 import {
+  AlertCustom,
   AvatarCustom,
   BackButton,
+  DrawerCustom,
   TextInputCustom,
-  ViewWrapper
+  ViewWrapper,
 } from "@/components";
 import FloatingButton from "@/components/Button/FloatingButton";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
-import Forum_BerandaSection from "@/screens/Forum/berandaSection";
+import Forum_BerandaSection from "@/screens/Forum/BerandaSection";
+import { listDataDummyForum } from "@/screens/Forum/list-data-dummy";
+import Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
 import { Ionicons } from "@expo/vector-icons";
-import { router, Stack, useLocalSearchParams } from "expo-router";
+import { router, Stack } from "expo-router";
+import { useState } from "react";
 
 export default function Forum() {
-  const { id } = useLocalSearchParams();
+  const id = "test-id-forum";
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [status, setStatus] = useState("");
+  const [alertStatus, setAlertStatus] = useState(false);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+
   return (
     <>
       <Stack.Screen
         options={{
           title: "Forum",
           headerLeft: () => <BackButton />,
-          headerRight: () => <AvatarCustom href={`/forum/${id}/forumku`}/>,
+          headerRight: () => <AvatarCustom href={`/forum/${id}/forumku`} />,
         }}
       />
 
@@ -39,11 +49,78 @@ export default function Forum() {
           />
         }
         floatingButton={
-          <FloatingButton onPress={() => router.navigate("/(application)/(user)/forum/create")} />
+          <FloatingButton
+            onPress={() =>
+              router.navigate("/(application)/(user)/forum/create")
+            }
+          />
         }
       >
-        <Forum_BerandaSection />
+        {listDataDummyForum.map((e, i) => (
+          <Forum_BerandaSection
+            key={i}
+            data={e}
+            setOpenDrawer={setOpenDrawer}
+            setStatus={setStatus}
+          />
+        ))}
       </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}
+      />
     </>
   );
 }

screens/Forum/ListPage.tsx

@@ -0,0 +1,41 @@
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { Feather, Ionicons } from "@expo/vector-icons";
+
+export { drawerItemsForumBeranda };
+
+const drawerItemsForumBeranda = ({
+  id,
+  status,
+}: {
+  id: string;
+  status: string;
+}) => [
+  {
+    icon: (
+      <Feather name="edit" size={ICON_SIZE_SMALL} color={MainColor.white} />
+    ),
+    label: "Edit posting",
+    path: `/forumku/${id}`,
+  },
+  {
+    icon:
+      status === "Open" ? (
+        <Ionicons name="open" size={ICON_SIZE_SMALL} color={MainColor.white} />
+      ) : (
+        <Ionicons name="close" size={ICON_SIZE_SMALL} color={MainColor.white} />
+      ),
+
+    label: status === "Open" ? "Buka forum" : "Tutup forum",
+    path: "",
+    color: status === "Open" ? MainColor.green : MainColor.orange,
+  },
+  {
+    icon: (
+      <Ionicons name="trash" size={ICON_SIZE_SMALL} color={MainColor.white} />
+    ),
+    label: "Hapus",
+    path: "",
+    color: MainColor.red,
+  },
+];

screens/Forum/MenuDrawerSection.tsx/MenuBeranda.tsx

@@ -0,0 +1,41 @@
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+import MenuDrawerDynamicGrid from "@/components/Drawer/MenuDrawerDynamicGird";
+import { router } from "expo-router";
+import { drawerItemsForumBeranda } from "../ListPage";
+
+export default function Forum_MenuDrawerBerandaSection({
+  id,
+  status,
+  setIsDrawerOpen,
+  setShowDeleteAlert,
+  setShowAlertStatus,
+}: {
+  id: string;
+  status: string;
+  setIsDrawerOpen: (value: boolean) => void;
+  setShowDeleteAlert: (value: boolean) => void;
+  setShowAlertStatus: (value: boolean) => void;
+}) {
+  const handlePress = (item: IMenuDrawerItem) => {
+    if (item.label === "Hapus") {
+      setShowDeleteAlert(true);
+    } else if (item.label === "Buka forum" || item.label === "Tutup forum") {
+      setShowAlertStatus(true);
+    } else {
+      router.push(item.path as any);
+    }
+
+    setIsDrawerOpen(false);
+  };
+
+  return (
+    <>
+      {/* Menu Items */}
+      <MenuDrawerDynamicGrid
+        data={drawerItemsForumBeranda({ id, status })}
+        columns={4} // Ubah ke 2 jika ingin 2 kolom per baris
+        onPressItem={handlePress}
+      />
+    </>
+  );
+}

screens/Forum/berandaSection.tsx

@@ -1,33 +1,45 @@
 import {
-  BaseBox,
-  Grid,
   AvatarCustom,
-  TextCustom,
+  BaseBox,
   ClickableCustom,
+  Grid,
   Spacing,
+  TextCustom,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { Entypo, Ionicons } from "@expo/vector-icons";
 import { View } from "react-native";
-import dayjs from "dayjs";
 
-export default function Forum_BerandaSection() {
+export default function Forum_BerandaSection({
-  const dateNow = dayjs().format("DD/MM/YYYY")
+  data,
+  setOpenDrawer,
+  setStatus,
+}: {
+  data: any;
+  setOpenDrawer: (value: boolean) => void;
+  setStatus: (value: string) => void;
+}) {
+
   return (
     <>
-      {Array.from({ length: 10 }).map((e, i) => (
+      <BaseBox>
-        <BaseBox key={i}>
         <View>
           <Grid>
             <Grid.Col span={2}>
-                <AvatarCustom />
+              <AvatarCustom href={`/profile/${data.id}`} />
             </Grid.Col>
             <Grid.Col span={8}>
-                <TextCustom>Nama User</TextCustom>
+              <TextCustom>{data.name}</TextCustom>
+              {data.status === "Open" ? (
                 <TextCustom bold size="small" color="green">
-                  Open
+                  {data.status}
                 </TextCustom>
+              ) : (
+                <TextCustom bold size="small" color="red">
+                  {data.status}
+                </TextCustom>
+              )}
             </Grid.Col>
 
             <Grid.Col
@@ -37,7 +49,10 @@ export default function Forum_BerandaSection() {
               }}
             >
               <ClickableCustom
-                  onPress={() => {}}
+                onPress={() => {
+                  setOpenDrawer(true);
+                  setStatus(data.status);
+                }}
                 style={{
                   alignItems: "flex-end",
                 }}
@@ -58,12 +73,7 @@ export default function Forum_BerandaSection() {
               borderRadius: 8,
             }}
           >
-              <TextCustom truncate={2}>
+            <TextCustom truncate={2}>{data.deskripsi}</TextCustom>
-                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?
-              </TextCustom>
           </View>
           <Spacing />
 
@@ -81,16 +91,15 @@ export default function Forum_BerandaSection() {
                   size={ICON_SIZE_SMALL}
                   color={MainColor.white}
                 />
-                  <TextCustom>2</TextCustom>
+                <TextCustom>{data.jumlahBalas}</TextCustom>
               </View>
             </Grid.Col>
             <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
-                <TextCustom size="small"> {dateNow}</TextCustom>
+              <TextCustom size="small"> {data.date}</TextCustom>
             </Grid.Col>
           </Grid>
         </View>
       </BaseBox>
-      ))}
     </>
   );
 }

screens/Forum/list-data-dummy.tsx

@@ -0,0 +1,52 @@
+export const listDataDummyForum = [
+  {
+    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,
+  },
+  {
+    name: "Banuna",
+    status: "Close",
+    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: 8,
+  },
+  {
+    name: "Nusantara",
+    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: 5,
+  },
+
+  {
+    name: "Nabillah",
+    status: "Close",
+    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,
+  },
+
+  {
+    name: "Riyusa",
+    status: "Close",
+    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: 3,
+  },
+  {
+    name: "Nita",
+    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,
+  },
+];