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

@@ -114,6 +114,34 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
+        <Stack.Screen
+          name="forum/[id]/report-commentar"
+          options={{
+            title: "Laporkan Komentar",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="forum/[id]/other-report-commentar"
+          options={{
+            title: "Laporkan Komentar",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="forum/[id]/report-posting"
+          options={{
+            title: "Laporkan Diskusi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="forum/[id]/other-report-posting"
+          options={{
+            title: "Laporkan Diskusi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
 
         {/* ========== Maps Section ========= */}
         <Stack.Screen

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

@@ -1,20 +1,19 @@
 import {
-  AlertCustom,
-  ButtonCustom,
-  DrawerCustom,
-  Spacing,
-  StackCustom,
-  TextAreaCustom,
-  ViewWrapper,
+    AlertCustom,
+    ButtonCustom,
+    DrawerCustom,
+    Spacing,
+    TextAreaCustom,
+    ViewWrapper
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import Forum_CommentarBoxSection from "@/screens/Forum/CommentarBoxSection";
 import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
 import { listDummyCommentarForum } from "@/screens/Forum/list-data-dummy";
 import Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
+import Forum_MenuDrawerCommentar from "@/screens/Forum/MenuDrawerSection.tsx/MenuCommentar";
 import { router, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
-import { Divider } from "react-native-paper";
 
 export default function ForumDetail() {
   const { id } = useLocalSearchParams();
@@ -27,7 +26,6 @@ export default function ForumDetail() {
 
   // Comentar
   const [openDrawerCommentar, setOpenDrawerCommentar] = useState(false);
-  const [statusCommentar, setStatusCommentar] = useState("");
 
   const dataDummy = {
     name: "Bagas",
@@ -78,7 +76,7 @@ export default function ForumDetail() {
             key={i}
             data={e}
             setOpenDrawer={setOpenDrawerCommentar}
-            setStatus={setStatusCommentar}
+
           />
         ))}
       </ViewWrapper>
@@ -145,16 +143,34 @@ export default function ForumDetail() {
         isVisible={openDrawerCommentar}
         closeDrawer={() => setOpenDrawerCommentar(false)}
       >
-        <Forum_MenuDrawerBerandaSection
+        <Forum_MenuDrawerCommentar
           id={id as string}
-          status={statusCommentar}
           setIsDrawerOpen={() => {
             setOpenDrawerCommentar(false);
           }}
           setShowDeleteAlert={setDeleteAlert}
-          setShowAlertStatus={setAlertStatus}
         />
       </DrawerCustom>
+
+      {/* Alert Delete Commentar */}
+      <AlertCustom
+        isVisible={deleteAlert}
+        title="Hapus Komentar"
+        message="Apakah Anda yakin ingin menghapus komentar ini?"
+        onLeftPress={() => {
+          setOpenDrawerCommentar(false);
+          setDeleteAlert(false);
+          console.log("Batal");
+        }}
+        onRightPress={() => {
+          setOpenDrawerCommentar(false);
+          setDeleteAlert(false);
+          console.log("Hapus commentar");
+        }}
+        textLeft="Batal"
+        textRight="Hapus"
+        colorRight={MainColor.red}
+      />
     </>
   );
 }

app/(application)/(user)/forum/[id]/other-report-commentar.tsx

@@ -0,0 +1,32 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  TextAreaCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { router } from "expo-router";
+
+export default function ForumOtherReportCommentar() {
+  const handleSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        backgroundColor={MainColor.red}
+        textColor={MainColor.white}
+        onPress={() => {
+          console.log("Report lainnya");
+          router.back();
+        }}
+      >
+        Report
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper footerComponent={handleSubmit}>
+        <TextAreaCustom placeholder="Laporkan Komentar" />
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/(user)/forum/[id]/other-report-posting.tsx

@@ -0,0 +1,32 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  TextAreaCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { router } from "expo-router";
+
+export default function ForumOtherReportPosting() {
+  const handleSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        backgroundColor={MainColor.red}
+        textColor={MainColor.white}
+        onPress={() => {
+          console.log("Report lainnya");
+          router.back();
+        }}
+      >
+        Report
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper footerComponent={handleSubmit}>
+        <TextAreaCustom placeholder="Laporkan Diskusi" />
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/(user)/forum/[id]/report-commentar.tsx

@@ -0,0 +1,40 @@
+import {
+    ButtonCustom,
+    StackCustom,
+    ViewWrapper
+} from "@/components";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import Forum_ReportListSection from "@/screens/Forum/ReportListSection";
+import { router } from "expo-router";
+
+export default function ForumReportCommentar() {
+  return (
+    <>
+      <ViewWrapper>
+        <StackCustom>
+          <Forum_ReportListSection />
+          <ButtonCustom
+            backgroundColor={MainColor.red}
+            textColor={MainColor.white}
+            onPress={() => {
+              console.log("Report");
+              router.back();
+            }}
+          >
+            Report
+          </ButtonCustom>
+          <ButtonCustom
+            backgroundColor={AccentColor.blue}
+            textColor={MainColor.white}
+            onPress={() => {
+              console.log("Lainnya");
+              router.replace("/forum/[id]/other-report-commentar");
+            }}
+          >
+            Lainnya
+          </ButtonCustom>
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/(user)/forum/[id]/report-posting.tsx

@@ -0,0 +1,36 @@
+import { ViewWrapper, StackCustom, ButtonCustom } from "@/components";
+import { MainColor, AccentColor } from "@/constants/color-palet";
+import Forum_ReportListSection from "@/screens/Forum/ReportListSection";
+import { router } from "expo-router";
+
+export default function ForumReportPosting() {
+    return (
+      <>
+        <ViewWrapper>
+          <StackCustom>
+            <Forum_ReportListSection />
+            <ButtonCustom
+              backgroundColor={MainColor.red}
+              textColor={MainColor.white}
+              onPress={() => {
+                console.log("Report");
+                router.back();
+              }}
+            >
+              Report
+            </ButtonCustom>
+            <ButtonCustom
+              backgroundColor={AccentColor.blue}
+              textColor={MainColor.white}
+              onPress={() => {
+                console.log("Lainnya");
+                router.replace("/forum/[id]/other-report-posting");
+              }}
+            >
+              Lainnya
+            </ButtonCustom>
+          </StackCustom>
+        </ViewWrapper>
+      </>
+    );
+}

lib/dummy-data/forum/report-list.tsx

@@ -0,0 +1,26 @@
+export const listDummyReportForum = [
+  {
+    title: "Kebencian",
+    desc: "Cercaan, Stereotip rasis atau seksis, Dehumanisasi, Menyulut ketakutan atau diskriminasi, Referensi kebencian, Simbol & logo kebencian",
+  },
+  {
+    title: "Penghinaan & Pelecehan secara Online",
+    desc: "Penghinaan, Konten Seksual yang Tidak Diinginkan, Penyangkalan Peristiwa Kekerasan, Pelecehan Bertarget dan Memprovokasi Pelecehan",
+  },
+  {
+    title: "Tutur Kekerasan",
+    desc: "Ancaman Kekerasan, Berharap Terjadinya Celaka, Mengagungkan Kekerasan, Penghasutan Kekerasan, Penghasutan Kekerasan dengan Kode",
+  },
+  {
+    title: "Keselamatan Anak",
+    desc: "Eksploitasi seks anak di bawah umur, grooming, kekerasan fisik terhadap anak, pengguna di bawah umur",
+  },
+  {
+    title: "Privasi",
+    desc: "Membagikan informasi pribadi, mengancam akan membagikan/menyebarkan informasi pribadi, membagikan gambar intim tanpa persetujuan, membagikan gambar saya yang tidak saya kehendaki di platform ini",
+  },
+  {
+    title: "Spam",
+    desc: "Akun palsu, penipuan keuangan, memposting tautan berbahaya, menyalahgunakan hashtag, keterlibatan palsu, balasan berulang, Posting Ulang, atau Direct Message",
+  },
+];

screens/Forum/CommentarBoxSection.tsx

@@ -1,10 +1,10 @@
 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";
@@ -14,11 +14,9 @@ import { View } from "react-native";
 export default function Forum_CommentarBoxSection({
   data,
   setOpenDrawer,
-  setStatus,
 }: {
   data: any;
   setOpenDrawer: (value: boolean) => void;
-  setStatus: (value: string) => void;
 }) {
   return (
     <>
@@ -46,7 +44,6 @@ export default function Forum_CommentarBoxSection({
               <ClickableCustom
                 onPress={() => {
                   setOpenDrawer(true);
-                  setStatus(data.status);
                 }}
                 style={{
                   alignItems: "flex-end",

screens/Forum/ListPage.tsx

@@ -2,7 +2,7 @@ import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { Feather, Ionicons } from "@expo/vector-icons";
 
-export { drawerItemsForumBeranda };
+export { drawerItemsForumBeranda, drawerItemsForumComentar };
 
 const drawerItemsForumBeranda = ({
   id,
@@ -11,6 +11,15 @@ const drawerItemsForumBeranda = ({
   id: string;
   status: string;
 }) => [
+  {
+    icon: (
+      <Ionicons name="flag" size={ICON_SIZE_SMALL} color={MainColor.white} />
+    ),
+    label: "Laporkan diskusi",
+    // color: MainColor.white,
+    path: `/forum/${id}/report-posting`,
+  },
+    
   {
     icon: (
       <Feather name="edit" size={ICON_SIZE_SMALL} color={MainColor.white} />
@@ -39,3 +48,22 @@ const drawerItemsForumBeranda = ({
     color: MainColor.red,
   },
 ];
+
+const drawerItemsForumComentar = ({ id }: { id: string }) => [
+  {
+    icon: (
+      <Ionicons name="flag" size={ICON_SIZE_SMALL} color={MainColor.white} />
+    ),
+    label: "Laporkan",
+    // color: MainColor.white,
+    path: `/forum/${id}/report-commentar`,
+  },
+  {
+    icon: (
+      <Ionicons name="trash" size={ICON_SIZE_SMALL} color={MainColor.white} />
+    ),
+    label: "Hapus",
+    color: MainColor.red,
+    path: "",
+  },
+];

screens/Forum/MenuDrawerSection.tsx/MenuCommentar.tsx

@@ -0,0 +1,33 @@
+import { MenuDrawerDynamicGrid } from "@/components";
+import { drawerItemsForumComentar } from "../ListPage";
+import { router } from "expo-router";
+
+export default function Forum_MenuDrawerCommentar({
+  id,
+  setShowDeleteAlert,
+  setIsDrawerOpen,
+}: {
+  id: string;
+  setShowDeleteAlert: (value: boolean) => void;
+  setIsDrawerOpen: (value: boolean) => void;
+}) {
+  const handlePress = (item: any) => {
+    if (item.label === "Hapus") {
+      setShowDeleteAlert(true);
+    } else {
+      router.push(item.path as any);
+    }
+
+    setIsDrawerOpen(false);
+  };
+
+  return (
+    <>
+      <MenuDrawerDynamicGrid
+        data={drawerItemsForumComentar({ id })}
+        columns={4}
+        onPressItem={handlePress}
+      />
+    </>
+  );
+}

screens/Forum/ReportListSection.tsx

@@ -0,0 +1,20 @@
+import { BaseBox, StackCustom, TextCustom } from "@/components";
+import { listDummyReportForum } from "@/lib/dummy-data/forum/report-list";
+import { View } from "react-native";
+
+export default function Forum_ReportListSection() {
+  return (
+    <>
+      <BaseBox>
+        <StackCustom>
+          {listDummyReportForum.map((e, i) => (
+            <View key={i}>
+              <TextCustom>{e.title}</TextCustom>
+              <TextCustom>{e.desc}</TextCustom>
+            </View>
+          ))}
+        </StackCustom>
+      </BaseBox>
+    </>
+  );
+}