fix

deskripsi:
- forum & forumku

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

@@ -1,42 +1,111 @@
 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();
-  return (
+  const [openDrawer, setOpenDrawer] = useState(false);
-    <ViewWrapper>
+  const [status, setStatus] = useState("");
-      <StackCustom>
+  const [alertStatus, setAlertStatus] = useState(false);
-        <CenterCustom>
+  const [deleteAlert, setDeleteAlert] = useState(false);
-          <AvatarCustom
-            href={`/(application)/(image)/preview-image/${id}`}
-            size="xl"
-          />
-        </CenterCustom>
 
-        <Grid>
+  return (
-          <Grid.Col span={6}>
+    <>
-            <TextCustom bold truncate>
+      <ViewWrapper>
-              @bagas_banuna
+        <StackCustom>
-            </TextCustom>
+          <CenterCustom>
-            <TextCustom>1 postingan</TextCustom>
+            <AvatarCustom
-          </Grid.Col>
+              href={`/(application)/(image)/preview-image/${id}`}
-          <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
+              size="xl"
-            <ButtonCustom href={`/profile/${id}`}>
+            />
-              Kunjungi Profile
+          </CenterCustom>
-            </ButtonCustom>
+
-          </Grid.Col>
+          <Grid>
-        </Grid>
+            <Grid.Col span={6}>
-      <Forum_BerandaSection />
+              <TextCustom bold truncate>
-      </StackCustom>
+                @bagas_banuna
-    </ViewWrapper>
+              </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>
+          {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,96 +1,105 @@
 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>
-          <View>
+          <Grid>
-            <Grid>
+            <Grid.Col span={2}>
-              <Grid.Col span={2}>
+              <AvatarCustom href={`/profile/${data.id}`} />
-                <AvatarCustom />
+            </Grid.Col>
-              </Grid.Col>
+            <Grid.Col span={8}>
-              <Grid.Col span={8}>
+              <TextCustom>{data.name}</TextCustom>
-                <TextCustom>Nama User</TextCustom>
+              {data.status === "Open" ? (
                 <TextCustom bold size="small" color="green">
-                  Open
+                  {data.status}
                 </TextCustom>
-              </Grid.Col>
+              ) : (
+                <TextCustom bold size="small" color="red">
+                  {data.status}
+                </TextCustom>
+              )}
+            </Grid.Col>
 
-              <Grid.Col
+            <Grid.Col
-                span={2}
+              span={2}
-                style={{
-                  justifyContent: "center",
-                }}
-              >
-                <ClickableCustom
-                  onPress={() => {}}
-                  style={{
-                    alignItems: "flex-end",
-                  }}
-                >
-                  <Entypo
-                    name="dots-three-horizontal"
-                    color={MainColor.white}
-                    size={ICON_SIZE_SMALL}
-                  />
-                </ClickableCustom>
-              </Grid.Col>
-            </Grid>
-
-            <View
               style={{
-                backgroundColor: MainColor.soft_darkblue,
+                justifyContent: "center",
-                padding: 8,
-                borderRadius: 8,
               }}
             >
-              <TextCustom truncate={2}>
+              <ClickableCustom
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae
+                onPress={() => {
-                inventore iure pariatur, libero omnis excepturi. Ullam ad
+                  setOpenDrawer(true);
-                officiis deleniti quos esse odit nesciunt, ipsam adipisci cumque
+                  setStatus(data.status);
-                aliquam corporis culpa fugit?
+                }}
-              </TextCustom>
+                style={{
-            </View>
+                  alignItems: "flex-end",
-            <Spacing />
+                }}
+              >
+                <Entypo
+                  name="dots-three-horizontal"
+                  color={MainColor.white}
+                  size={ICON_SIZE_SMALL}
+                />
+              </ClickableCustom>
+            </Grid.Col>
+          </Grid>
 
-            <Grid>
+          <View
-              <Grid.Col span={6}>
+            style={{
-                <View
+              backgroundColor: MainColor.soft_darkblue,
-                  style={{
+              padding: 8,
-                    flexDirection: "row",
+              borderRadius: 8,
-                    alignItems: "center",
+            }}
-                    gap: 10,
+          >
-                  }}
+            <TextCustom truncate={2}>{data.deskripsi}</TextCustom>
-                >
-                  <Ionicons
-                    name="chatbubble-outline"
-                    size={ICON_SIZE_SMALL}
-                    color={MainColor.white}
-                  />
-                  <TextCustom>2</TextCustom>
-                </View>
-              </Grid.Col>
-              <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
-                <TextCustom size="small"> {dateNow}</TextCustom>
-              </Grid.Col>
-            </Grid>
           </View>
-        </BaseBox>
+          <Spacing />
-      ))}
+
+          <Grid>
+            <Grid.Col span={6}>
+              <View
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: 10,
+                }}
+              >
+                <Ionicons
+                  name="chatbubble-outline"
+                  size={ICON_SIZE_SMALL}
+                  color={MainColor.white}
+                />
+                <TextCustom>{data.jumlahBalas}</TextCustom>
+              </View>
+            </Grid.Col>
+            <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
+              <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,
+  },
+];