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

@@ -93,6 +93,13 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
+        <Stack.Screen
+          name="forum/[id]/edit"
+          options={{
+            title: "Edit Diskusi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
         <Stack.Screen
           name="forum/[id]/forumku"
           options={{
@@ -100,6 +107,13 @@ export default function UserLayout() {
             headerLeft: () => <BackButton icon={'close'} />,
           }}
         />
+        <Stack.Screen
+          name="forum/[id]/index"
+          options={{
+            title: "Detail",
+            headerLeft: () => <BackButton />,
+          }}
+        />
 
         {/* ========== Maps Section ========= */}
         <Stack.Screen

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

@@ -0,0 +1,37 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  TextAreaCustom,
+  ViewWrapper,
+} from "@/components";
+import { router } from "expo-router";
+import { useState } from "react";
+
+export default function ForumEdit() {
+  const [text, setText] = useState("");
+
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => {
+          console.log("Posting", text);
+          router.back();
+        }}
+      >
+        Update
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <ViewWrapper footerComponent={buttonFooter}>
+      <TextAreaCustom
+        placeholder="Ketik diskusi anda..."
+        maxLength={1000}
+        showCount
+        value={text}
+        onChangeText={setText}
+      />
+    </ViewWrapper>
+  );
+}

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

@@ -10,8 +10,8 @@ import {
   ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
-import Forum_BerandaSection from "@/screens/Forum/BerandaSection";
-import { listDataDummyForum } from "@/screens/Forum/list-data-dummy";
+import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
+import { listDataDummyCommentarForum } from "@/screens/Forum/list-data-dummy";
 import Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
 import { useLocalSearchParams } from "expo-router";
 import { useState } from "react";
@@ -47,8 +47,8 @@ export default function Forumku() {
               </ButtonCustom>
             </Grid.Col>
           </Grid>
-          {listDataDummyForum.map((e, i) => (
-            <Forum_BerandaSection
+          {listDataDummyCommentarForum.map((e, i) => (
+            <Forum_BoxDetailSection
               key={i}
               data={e}
               setOpenDrawer={setOpenDrawer}

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

@@ -0,0 +1,160 @@
+import {
+  AlertCustom,
+  ButtonCustom,
+  DrawerCustom,
+  Spacing,
+  StackCustom,
+  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 { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import { Divider } from "react-native-paper";
+
+export default function ForumDetail() {
+  const { id } = useLocalSearchParams();
+  console.log(id);
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [status, setStatus] = useState("");
+  const [alertStatus, setAlertStatus] = useState(false);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [text, setText] = useState("");
+
+  // Comentar
+  const [openDrawerCommentar, setOpenDrawerCommentar] = useState(false);
+  const [statusCommentar, setStatusCommentar] = useState("");
+
+  const dataDummy = {
+    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,
+  };
+
+  return (
+    <>
+      <ViewWrapper>
+        {/* <StackCustom>
+        </StackCustom> */}
+        <Forum_BoxDetailSection
+          data={dataDummy}
+          setOpenDrawer={setOpenDrawer}
+          setStatus={setStatus}
+        />
+
+        <TextAreaCustom
+          placeholder="Ketik diskusi anda..."
+          maxLength={1000}
+          showCount
+          value={text}
+          onChangeText={setText}
+          style={{
+            marginBottom: 0,
+          }}
+        />
+        <ButtonCustom
+          style={{
+            alignSelf: "flex-end",
+          }}
+          onPress={() => {
+            console.log("Posting", text);
+            router.back();
+          }}
+        >
+          Balas
+        </ButtonCustom>
+
+        <Spacing height={40} />
+
+        {listDummyCommentarForum.map((e, i) => (
+          <Forum_CommentarBoxSection
+            key={i}
+            data={e}
+            setOpenDrawer={setOpenDrawerCommentar}
+            setStatus={setStatusCommentar}
+          />
+        ))}
+      </ViewWrapper>
+
+      <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 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}
+      />
+
+      {/* Commentar */}
+      <DrawerCustom
+        height={350}
+        isVisible={openDrawerCommentar}
+        closeDrawer={() => setOpenDrawerCommentar(false)}
+      >
+        <Forum_MenuDrawerBerandaSection
+          id={id as string}
+          status={statusCommentar}
+          setIsDrawerOpen={() => {
+            setOpenDrawerCommentar(false);
+          }}
+          setShowDeleteAlert={setDeleteAlert}
+          setShowAlertStatus={setAlertStatus}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

app/(application)/(user)/forum/index.tsx

@@ -9,8 +9,8 @@ import {
 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 { listDataDummyForum } from "@/screens/Forum/list-data-dummy";
+import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
+import { listDummyDiscussionForum } from "@/screens/Forum/list-data-dummy";
 import Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
 import { Ionicons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
@@ -56,12 +56,14 @@ export default function Forum() {
           />
         }
       >
-        {listDataDummyForum.map((e, i) => (
-          <Forum_BerandaSection
+        {listDummyDiscussionForum.map((e, i) => (
+          <Forum_BoxDetailSection
             key={i}
             data={e}
             setOpenDrawer={setOpenDrawer}
             setStatus={setStatus}
+            isTruncate={true}
+            href={`/forum/${id}`}
           />
         ))}
       </ViewWrapper>

screens/Forum/CommentarBoxSection.tsx

@@ -0,0 +1,74 @@
+import {
+  BaseBox,
+  Grid,
+  AvatarCustom,
+  TextCustom,
+  ClickableCustom,
+  Spacing,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { Entypo } from "@expo/vector-icons";
+import { View } from "react-native";
+
+export default function Forum_CommentarBoxSection({
+  data,
+  setOpenDrawer,
+  setStatus,
+}: {
+  data: any;
+  setOpenDrawer: (value: boolean) => void;
+  setStatus: (value: string) => void;
+}) {
+  return (
+    <>
+      <BaseBox>
+        <View>
+          <Grid>
+            <Grid.Col span={2}>
+              <AvatarCustom href={`/profile/${data.id}`} />
+            </Grid.Col>
+            <Grid.Col
+              span={8}
+              style={{
+                justifyContent: "center",
+              }}
+            >
+              <TextCustom>{data.name}</TextCustom>
+            </Grid.Col>
+
+            <Grid.Col
+              span={2}
+              style={{
+                justifyContent: "center",
+              }}
+            >
+              <ClickableCustom
+                onPress={() => {
+                  setOpenDrawer(true);
+                  setStatus(data.status);
+                }}
+                style={{
+                  alignItems: "flex-end",
+                }}
+              >
+                <Entypo
+                  name="dots-three-horizontal"
+                  color={MainColor.white}
+                  size={ICON_SIZE_SMALL}
+                />
+              </ClickableCustom>
+            </Grid.Col>
+          </Grid>
+
+          <TextCustom>{data.deskripsi}</TextCustom>
+
+          <Spacing />
+          <View style={{ alignItems: "flex-end" }}>
+            <TextCustom>{data.date}</TextCustom>
+          </View>
+        </View>
+      </BaseBox>
+    </>
+  );
+}

screens/Forum/DiscussionBoxSection.tsx

@@ -9,17 +9,37 @@ import {
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { Entypo, Ionicons } from "@expo/vector-icons";
+import { Href, router } from "expo-router";
 import { View } from "react-native";
 
-export default function Forum_BerandaSection({
+export default function Forum_BoxDetailSection({
   data,
+  isTruncate,
   setOpenDrawer,
   setStatus,
+  href,
 }: {
   data: any;
+  isTruncate?: boolean;
   setOpenDrawer: (value: boolean) => void;
   setStatus: (value: string) => void;
+  href?: Href;
 }) {
+  const deskripsiView = (
+    <View
+      style={{
+        backgroundColor: MainColor.soft_darkblue,
+        padding: 8,
+        borderRadius: 8,
+      }}
+    >
+      {isTruncate ? (
+        <TextCustom truncate={2}>{data.deskripsi}</TextCustom>
+      ) : (
+        <TextCustom>{data.deskripsi}</TextCustom>
+      )}
+    </View>
+  );
 
   return (
     <>
@@ -66,16 +86,15 @@ export default function Forum_BerandaSection({
             </Grid.Col>
           </Grid>
 
-          <View
-            style={{
-              backgroundColor: MainColor.soft_darkblue,
-              padding: 8,
-              borderRadius: 8,
-            }}
-          >
-            <TextCustom truncate={2}>{data.deskripsi}</TextCustom>
-          </View>
-          <Spacing />
+          {href ? (
+            <ClickableCustom onPress={() => router.push(href as any)}>
+              {deskripsiView}
+            </ClickableCustom>
+          ) : (
+            deskripsiView
+          )}
+
+          <Spacing height={10} />
 
           <Grid>
             <Grid.Col span={6}>

screens/Forum/ListPage.tsx

@@ -16,7 +16,7 @@ const drawerItemsForumBeranda = ({
       <Feather name="edit" size={ICON_SIZE_SMALL} color={MainColor.white} />
     ),
     label: "Edit posting",
-    path: `/forumku/${id}`,
+    path: `/forum/${id}/edit`,
   },
   {
     icon:

screens/Forum/list-data-dummy.tsx

@@ -1,4 +1,9 @@
-export const listDataDummyForum = [
+export {
+  listDummyDiscussionForum,
+  listDummyCommentarForum,
+}
+
+const listDummyDiscussionForum = [
   {
     name: "Bagas",
     status: "Open",
@@ -50,3 +55,50 @@ export const listDataDummyForum = [
     jumlahBalas: 2,
   },
 ];
+
+ const listDummyCommentarForum = [
+  {
+    name: "Bagas",
+    status: "Delete",
+    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?",
+  },
+  {
+    name: "Banuna",
+    status: "Report",
+    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?",
+  },
+  {
+    name: "Nusantara",
+    status: "Delete",
+    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?",
+  },
+
+  {
+    name: "Nabillah",
+    status: "Report",
+    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?",
+  },
+
+  {
+    name: "Riyusa",
+    status: "Report",
+    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?",
+  },
+  {
+    name: "Nita",
+    status: "Delete",
+    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?",
+  },
+];