Admin Forum

Add: - admin/forum/report-posting - admin/forum/report-comment - admin/forum/posting - admin/forum/[id] Component Fix: - screens/Admin/listPageAdmin - app/(application)/admin/_layout - Admin/TitlePage - Admin/BackButtonAntTitle - Admin/BoxTitlePage Package Install Add: - react-native-toast-message: untuk menampilkan toast ### No Issue
Admin Forum
2025-08-11 17:18:14 +08:00 · 2025-08-11 10:47:20 +08:00
23 changed files with 962 additions and 74 deletions
--- a/app/(application)/admin/_layout.tsx
+++ b/app/(application)/admin/_layout.tsx
@@ -66,9 +66,9 @@ export default function AdminLayout() {

        {/* ================== Job Start ================== */}
        <Stack.Screen name="job/index" />
-        <Stack.Screen name="job/publish" />
+        {/* <Stack.Screen name="job/publish" />
        <Stack.Screen name="job/review" />
-        <Stack.Screen name="job/reject" />
+        <Stack.Screen name="job/reject" /> */}
        <Stack.Screen name="job/[status]/status" />
        <Stack.Screen name="job/[id]/[status]/index" />

@@ -80,6 +80,16 @@ export default function AdminLayout() {
        <Stack.Screen name="collaboration/[id]/[status]"/>
        <Stack.Screen name="collaboration/[id]/group"/>
        {/* ================== Collaboration End ================== */}
+
+        {/* ================== Forum Start ================== */}
+        <Stack.Screen name="forum/index" />
+        <Stack.Screen name="forum/[id]/index" />
+        <Stack.Screen name="forum/report-comment"/>
+        <Stack.Screen name="forum/report-posting"/>
+        
+        <Stack.Screen name="forum/[id]/list-report-posting" />
+        <Stack.Screen name="forum/[id]/list-report-comment"/>
+        {/* ================== Forum End ================== */}
      </Stack>

      <DrawerAdmin
--- a/app/(application)/admin/forum/[id]/index.tsx
+++ b/app/(application)/admin/forum/[id]/index.tsx
@@ -0,0 +1,203 @@
+import {
+  ActionIcon,
+  AlertDefaultSystem,
+  BadgeCustom,
+  BaseBox,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconDot, IconView } from "@/components/_Icon/IconComponent";
+import { IconTrash } from "@/components/_Icon/IconTrash";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
+import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
+import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { MainColor } from "@/constants/color-palet";
+import {
+  ICON_SIZE_BUTTON,
+  ICON_SIZE_MEDIUM,
+  ICON_SIZE_XLARGE,
+} from "@/constants/constans-value";
+import { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { useState } from "react";
+import { Divider } from "react-native-paper";
+import Toast from "react-native-toast-message";
+
+export default function AdminForumDetailPosting() {
+  const [openDrawerPage, setOpenDrawerPage] = useState(false);
+  const [openDrawerAction, setOpenDrawerAction] = useState(false);
+  const [id, setId] = useState<any>();
+
+  const handlerAction = (item: { value: string; path: string }) => {
+    if (item.value === "delete") {
+      AlertDefaultSystem({
+        title: "Hapus Posting",
+        message: "Apakah Anda yakin ingin menghapus posting ini?",
+        textLeft: "Batal",
+        textRight: "Hapus",
+        onPressRight: () => {
+          Toast.show({
+            type: "success",
+            text1: "Posting berhasil dihapus",
+          });
+        },
+      });
+    } else {
+      router.navigate(item.path as any);
+    }
+    setOpenDrawerAction(false);
+  };
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminBackButtonAntTitle
+            title="Detail Posting"
+            rightComponent={
+              <ActionIcon
+                icon={<IconDot size={16} color={MainColor.darkblue} />}
+                onPress={() => setOpenDrawerPage(true)}
+              />
+            }
+          />
+        }
+      >
+        <BaseBox>
+          <StackCustom gap={"sm"}>
+            {listDataAction.map((item, i) => (
+              <GridDetail_4_8
+                key={i}
+                label={<TextCustom bold>{item.label}</TextCustom>}
+                value={<TextCustom>{item.value}</TextCustom>}
+              />
+            ))}
+            <TextCustom bold>Posting</TextCustom>
+            <TextCustom>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Asperiores cupiditate nobis dignissimos explicabo quo unde dolorum
+              numquam eos ab laborum fugiat illo nam velit quibusdam, maxime
+              assumenda aut vero provident!
+            </TextCustom>
+          </StackCustom>
+        </BaseBox>
+
+        {/* <AdminComp_BoxTitle title="Komentar" rightComponent={rightComponent} /> */}
+        <BaseBox>
+          <AdminTitleTable title1="Aksi" title2="Username" title3="Komentar" />
+          <Spacing />
+          <Divider />
+          {Array.from({ length: 10 }).map((_, index) => (
+            <AdminTableValue
+              key={index}
+              value1={
+                <ActionIcon
+                  icon={
+                    <Ionicons
+                      name="ellipsis-vertical-outline"
+                      size={ICON_SIZE_BUTTON}
+                      color="black"
+                    />
+                  }
+                  onPress={() => {
+                    setOpenDrawerAction(true);
+                    setId(index + 1);
+                  }}
+                />
+              }
+              value2={<TextCustom truncate={1}>Username username</TextCustom>}
+              value3={
+                <TextCustom truncate={2}>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Blanditiis asperiores quidem deleniti architecto eaque et
+                  nostrum, ad consequuntur eveniet quisquam quae voluptatum
+                  ducimus! Dolorem nobis modi officia debitis, beatae mollitia.
+                </TextCustom>
+              }
+            />
+          ))}
+        </BaseBox>
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawerPage}
+        closeDrawer={() => setOpenDrawerPage(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: (
+                <Ionicons
+                  name="list"
+                  size={ICON_SIZE_XLARGE}
+                  color={MainColor.white}
+                />
+              ),
+              label: "Daftar Report Posting",
+              value: "detail",
+              path: `/admin/forum/${id}/list-report-posting`,
+            },
+          ]}
+          onPressItem={(item) => {
+            router.navigate(item.path as any);
+            setOpenDrawerPage(false);
+          }}
+        />
+      </DrawerCustom>
+
+      <DrawerCustom
+        isVisible={openDrawerAction}
+        closeDrawer={() => setOpenDrawerAction(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconView />,
+              label: "Detail Komentar",
+              value: "detail",
+              path: `admin/forum/${id}/list-report-comment`,
+            },
+            {
+              icon: (
+                <IconTrash size={ICON_SIZE_MEDIUM} color={MainColor.white} />
+              ),
+              label: "Hapus Komentar",
+              value: "delete",
+              path: "",
+              color: MainColor.red,
+            },
+          ]}
+          onPressItem={(item) => {
+            handlerAction(item as any);
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}
+
+const listDataAction = [
+  {
+    label: "Username",
+    value: "Username",
+  },
+  {
+    label: "Status",
+    value: <BadgeCustom color={MainColor.green}>Open</BadgeCustom>,
+  },
+  {
+    label: "Komentar",
+    value: "10",
+  },
+  {
+    label: "Total Report",
+    value: "1",
+  },
+];
--- a/app/(application)/admin/forum/[id]/list-report-comment.tsx
+++ b/app/(application)/admin/forum/[id]/list-report-comment.tsx
@@ -0,0 +1,168 @@
+import {
+  ActionIcon,
+  AlertDefaultSystem,
+  BaseBox,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconDot, IconView } from "@/components/_Icon/IconComponent";
+import { IconTrash } from "@/components/_Icon/IconTrash";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
+import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
+import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { router } from "expo-router";
+import { useState } from "react";
+import { Divider } from "react-native-paper";
+import Toast from "react-native-toast-message";
+
+export default function AdminForumReportComment() {
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [openDrawerAction, setOpenDrawerAction] = useState(false);
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminBackButtonAntTitle
+            title="Report Komentar"
+            rightComponent={
+              <ActionIcon
+                icon={<IconDot size={16} color={MainColor.darkblue} />}
+                onPress={() => setOpenDrawer(true)}
+              />
+            }
+          />
+        }
+      >
+        <BaseBox>
+          <StackCustom gap={"sm"}>
+            {listData.map((item, i) => (
+              <GridDetail_4_8
+                key={i}
+                label={<TextCustom bold>{item.label}</TextCustom>}
+                value={<TextCustom>{item.value}</TextCustom>}
+              />
+            ))}
+            <TextCustom bold>Posting</TextCustom>
+            <TextCustom>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Asperiores cupiditate nobis dignissimos explicabo quo unde dolorum
+              numquam eos ab laborum fugiat illo nam velit quibusdam, maxime
+              assumenda aut vero provident!
+            </TextCustom>
+          </StackCustom>
+        </BaseBox>
+
+        <AdminComp_BoxTitle title="Daftar Report Komentar" />
+
+        <BaseBox>
+          <AdminTitleTable
+            title1="Aksi"
+            title2="Username"
+            title3="Kategori Report"
+          />
+          <Spacing />
+          <Divider />
+          {Array.from({ length: 5 }).map((_, index) => (
+            <AdminTableValue
+              key={index}
+              value1={
+                <ActionIcon
+                  icon={<IconView size={ICON_SIZE_BUTTON} color="black" />}
+                  onPress={() => {
+                    setOpenDrawerAction(true);
+                  }}
+                />
+              }
+              value2={<TextCustom truncate={1}>Username username</TextCustom>}
+              value3={
+                <TextCustom truncate={2} align="center">
+                  SPAM
+                </TextCustom>
+              }
+            />
+          ))}
+        </BaseBox>
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconTrash />,
+              label: "Hapus Komentar",
+              value: "delete",
+              path: "",
+              color: MainColor.red,
+            },
+          ]}
+          onPressItem={(item) => {
+            AlertDefaultSystem({
+              title: "Hapus Komentar",
+              message: "Apakah Anda yakin ingin menghapus komentar ini?",
+              textLeft: "Batal",
+              textRight: "Hapus",
+              onPressRight: () => {
+                setOpenDrawer(false);
+                Toast.show({
+                  type: "success",
+                  text1: "Komentar berhasil dihapus",
+                });
+                router.back();
+              },
+            });
+          }}
+        />
+      </DrawerCustom>
+
+      <DrawerCustom
+        isVisible={openDrawerAction}
+        closeDrawer={() => setOpenDrawerAction(false)}
+        height={"auto"}
+      >
+        {listDataAction.map((item, i) => (
+          <GridDetail_4_8
+            key={i}
+            label={<TextCustom bold>{item.label}</TextCustom>}
+            value={<TextCustom>{item.value}</TextCustom>}
+          />
+        ))}
+      </DrawerCustom>
+    </>
+  );
+}
+
+const listData = [
+  {
+    label: "Username",
+    value: "Username",
+  },
+];
+
+const listDataAction = [
+  {
+    label: "Username",
+    value: "Riyusa",
+  },
+  {
+    label: "Kategori Report",
+    value: "SPAM",
+  },
+  {
+    label: "Deskripsi",
+    value:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis asperiores quidem deleniti architecto eaque et nostrum, ad consequuntur eveniet quisquam quae voluptatum ducimus! Dolorem nobis modi officia debitis, beatae mollitia.",
+  },
+];
--- a/app/(application)/admin/forum/[id]/list-report-posting.tsx
+++ b/app/(application)/admin/forum/[id]/list-report-posting.tsx
@@ -0,0 +1,170 @@
+import {
+  ActionIcon,
+  AlertDefaultSystem,
+  BadgeCustom,
+  BaseBox,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconDot, IconView } from "@/components/_Icon/IconComponent";
+import { IconTrash } from "@/components/_Icon/IconTrash";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
+import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
+import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { router } from "expo-router";
+import { useState } from "react";
+import { Divider } from "react-native-paper";
+import Toast from "react-native-toast-message";
+
+export default function AdminForumReportPosting() {
+  const [openDrawerPage, setOpenDrawerPage] = useState(false);
+  const [openDrawerAction, setOpenDrawerAction] = useState(false);
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminBackButtonAntTitle
+            title="Report Posting"
+            rightComponent={
+              <ActionIcon
+                icon={<IconDot size={16} color={MainColor.darkblue} />}
+                onPress={() => setOpenDrawerPage(true)}
+              />
+            }
+          />
+        }
+      >
+        <BaseBox>
+          <StackCustom gap={"sm"}>
+            {listData.map((item, i) => (
+              <GridDetail_4_8
+                key={i}
+                label={<TextCustom bold>{item.label}</TextCustom>}
+                value={<TextCustom>{item.value}</TextCustom>}
+              />
+            ))}
+            <TextCustom bold>Posting</TextCustom>
+            <TextCustom>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Asperiores cupiditate nobis dignissimos explicabo quo unde dolorum
+              numquam eos ab laborum fugiat illo nam velit quibusdam, maxime
+              assumenda aut vero provident!
+            </TextCustom>
+          </StackCustom>
+        </BaseBox>
+
+        <AdminComp_BoxTitle title="Daftar Report Posting" />
+        <BaseBox>
+          <AdminTitleTable
+            title1="Aksi"
+            title2="Username"
+            title3="Kategori Report"
+          />
+          <Spacing />
+          <Divider />
+          {Array.from({ length: 5 }).map((_, index) => (
+            <AdminTableValue
+              key={index}
+              value1={
+                <ActionIcon
+                  icon={<IconView size={ICON_SIZE_BUTTON} color="black" />}
+                  onPress={() => setOpenDrawerAction(true)}
+                />
+              }
+              value2={<TextCustom truncate={1}>Username username</TextCustom>}
+              value3={
+                <TextCustom truncate={2} align="center">
+                  SPAM
+                </TextCustom>
+              }
+            />
+          ))}
+        </BaseBox>
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawerPage}
+        closeDrawer={() => setOpenDrawerPage(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconTrash />,
+              label: "Hapus Posting",
+              value: "delete",
+              path: "",
+              color: MainColor.red,
+            },
+          ]}
+          onPressItem={(item) => {
+            AlertDefaultSystem({
+              title: "Hapus Posting",
+              message: "Apakah Anda yakin ingin menghapus posting ini?",
+              textLeft: "Batal",
+              textRight: "Hapus",
+              onPressRight: () => {
+                setOpenDrawerPage(false);
+                Toast.show({
+                  type: "success",
+                  text1: "Posting berhasil dihapus",
+                });
+                router.back()
+              },
+            });
+          }}
+        />
+      </DrawerCustom>
+
+      <DrawerCustom
+        isVisible={openDrawerAction}
+        closeDrawer={() => setOpenDrawerAction(false)}
+        height={"auto"}
+      >
+        {listDataAction.map((item, i) => (
+          <GridDetail_4_8
+            key={i}
+            label={<TextCustom bold>{item.label}</TextCustom>}
+            value={<TextCustom>{item.value}</TextCustom>}
+          />
+        ))}
+      </DrawerCustom>
+    </>
+  );
+}
+
+const listData = [
+  {
+    label: "Username",
+    value: "Username",
+  },
+  {
+    label: "Status",
+    value: <BadgeCustom color={MainColor.green}>Open</BadgeCustom>,
+  },
+];
+
+const listDataAction = [
+  {
+    label: "Username",
+    value: "Firman Nusantara",
+  },
+  {
+    label: "Kategori Report",
+    value: "SPAM",
+  },
+  {
+    label: "Deskripsi",
+    value:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis asperiores quidem deleniti architecto eaque et nostrum, ad consequuntur eveniet quisquam quae voluptatum ducimus! Dolorem nobis modi officia debitis, beatae mollitia.",
+  },
+];
--- a/app/(application)/admin/forum/index.tsx
+++ b/app/(application)/admin/forum/index.tsx
@@ -0,0 +1,42 @@
+import { Spacing, StackCustom, ViewWrapper } from "@/components";
+import {
+    IconPublish,
+    IconReport,
+} from "@/components/_Icon/IconComponent";
+import AdminComp_BoxDashboard from "@/components/_ShareComponent/Admin/BoxDashboard";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { MainColor } from "@/constants/color-palet";
+
+export default function AdminForum() {
+  return (
+    <>
+      <ViewWrapper>
+        <AdminTitlePage title="Forum" />
+        <Spacing />
+        <StackCustom gap={"xs"}>
+          {listData.map((item, i) => (
+            <AdminComp_BoxDashboard key={i} item={item} />
+          ))}
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}
+
+const listData = [
+  {
+    label: "Posting",
+    value: 4,
+    icon: <IconPublish size={25} color={MainColor.green} />,
+  },
+  {
+    label: "Report Posting",
+    value: 7,
+    icon: <IconReport size={25} color={MainColor.orange} />,
+  },
+  {
+    label: "Report Comment",
+    value: 5,
+    icon: <IconReport size={25} color={MainColor.red} />,
+  },
+];
--- a/app/(application)/admin/forum/posting.tsx
+++ b/app/(application)/admin/forum/posting.tsx
@@ -0,0 +1,61 @@
+import {
+  ActionIcon,
+  BaseBox,
+  SearchInput,
+  Spacing,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconView } from "@/components/_Icon/IconComponent";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
+import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { router } from "expo-router";
+import React from "react";
+import { Divider } from "react-native-paper";
+
+export default function AdminForumPosting() {
+  const rightComponent = (
+    <SearchInput
+      containerStyle={{ width: "100%", marginBottom: 0 }}
+      placeholder="Cari"
+    />
+  );
+
+  return (
+    <>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Forum" />}>
+        <AdminComp_BoxTitle title={"Posting"} rightComponent={rightComponent} />
+        <BaseBox>
+          <AdminTitleTable title1="Aksi" title2="Username" title3="Postingan" />
+          <Spacing />
+          <Divider />
+          {Array.from({ length: 10 }).map((_, index) => (
+            <AdminTableValue
+              key={index}
+              value1={
+                <ActionIcon
+                  icon={<IconView size={ICON_SIZE_BUTTON} color="black" />}
+                  onPress={() => {
+                    router.push(`/admin/forum/${index + 1}`);
+                  }}
+                />
+              }
+              value2={<TextCustom truncate={1}>Username username</TextCustom>}
+              value3={
+                <TextCustom truncate={2}>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Blanditiis asperiores quidem deleniti architecto eaque et
+                  nostrum, ad consequuntur eveniet quisquam quae voluptatum
+                  ducimus! Dolorem nobis modi officia debitis, beatae mollitia.
+                </TextCustom>
+              }
+            />
+          ))}
+        </BaseBox>
+      </ViewWrapper>
+    </>
+  );
+}
--- a/app/(application)/admin/forum/report-comment.tsx
+++ b/app/(application)/admin/forum/report-comment.tsx
@@ -0,0 +1,65 @@
+import {
+  ActionIcon,
+  BaseBox,
+  Divider,
+  SearchInput,
+  Spacing,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconView } from "@/components/_Icon/IconComponent";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
+import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { router } from "expo-router";
+
+export default function AdminForumReportComment() {
+
+  const rightComponent = (
+    <SearchInput
+      containerStyle={{ width: "100%", marginBottom: 0 }}
+      placeholder="Cari Komentar"
+    />
+  );
+
+  return (
+    <>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Forum" />}>
+        <AdminComp_BoxTitle
+          title="Report Comment"
+          rightComponent={rightComponent}
+        />
+
+        <BaseBox>
+          <AdminTitleTable title1="Aksi" title2="Pelapor" title3="Jenis Laporan" />
+          <Spacing />
+          <Divider />
+          {Array.from({ length: 10 }).map((_, index) => (
+            <AdminTableValue
+              key={index}
+              value1={
+                <ActionIcon
+                  icon={
+                    <IconView size={ICON_SIZE_BUTTON} color={MainColor.black} />
+                  }
+                  onPress={() => {
+                    router.push(`/admin/forum/${index + 1}/list-report-comment`);
+                  }}
+                />
+              }
+              value2={<TextCustom truncate={1}>Username username</TextCustom>}
+              value3={
+                <TextCustom truncate={2} align="center">
+                 SPAM
+                </TextCustom>
+              }
+            />
+          ))}
+        </BaseBox>
+      </ViewWrapper>
+    </>
+  );
+}
--- a/app/(application)/admin/forum/report-posting.tsx
+++ b/app/(application)/admin/forum/report-posting.tsx
@@ -0,0 +1,73 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  ActionIcon,
+  BaseBox,
+  Divider,
+  SearchInput,
+  Spacing,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconView } from "@/components/_Icon/IconComponent";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
+import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { router } from "expo-router";
+import { useState } from "react";
+
+export default function AdminForumReportPosting() {
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [id, setId] = useState<any>();
+
+  const rightComponent = (
+    <SearchInput
+      containerStyle={{ width: "100%", marginBottom: 0 }}
+      placeholder="Cari"
+    />
+  );
+
+  return (
+    <>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Forum" />}>
+        <AdminComp_BoxTitle
+          title="Report Posting"
+          rightComponent={rightComponent}
+        />
+
+        <BaseBox>
+          <AdminTitleTable title1="Aksi" title2="Pelapor" title3="Postingan" />
+          <Spacing />
+          <Divider />
+          {Array.from({ length: 10 }).map((_, index) => (
+            <AdminTableValue
+              key={index}
+              value1={
+                <ActionIcon
+                  icon={
+                    <IconView size={ICON_SIZE_BUTTON} color={MainColor.black} />
+                  }
+                  onPress={() => {
+                    router.push(`/admin/forum/${id}/list-report-posting`);
+                  }}
+                />
+              }
+              value2={<TextCustom truncate={1}>Username username</TextCustom>}
+              value3={
+                <TextCustom truncate={2} align="center">
+                  Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+                  Omnis laborum doloremque eius velit voluptate corrupti vel,
+                  provident quaerat tempore animi sed accusamus amet.
+                  Temporibus, praesentium? Rem voluptatum nesciunt voluptas
+                  repellat.
+                </TextCustom>
+              }
+            />
+          ))}
+        </BaseBox>
+      </ViewWrapper>
+    </>
+  );
+}
--- a/app/(application)/admin/job/index.tsx
+++ b/app/(application)/admin/job/index.tsx
@@ -1,8 +1,12 @@
 import { Spacing, StackCustom, ViewWrapper } from "@/components";
+import {
+  IconPublish,
+  IconReject,
+  IconReview,
+} from "@/components/_Icon/IconComponent";
 import AdminComp_BoxDashboard from "@/components/_ShareComponent/Admin/BoxDashboard";
 import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
 import { MainColor } from "@/constants/color-palet";
-import { Entypo, FontAwesome, FontAwesome6 } from "@expo/vector-icons";

 export default function AdminJob() {
  return (
@@ -24,22 +28,16 @@ const listData = [
  {
    label: "Publish",
    value: 4,
-    icon: <Entypo name="publish" size={25} color={MainColor.green} />,
+    icon: <IconPublish size={25} color={MainColor.green} />,
  },
  {
    label: "Review",
    value: 7,
-    icon: (
-      <FontAwesome6
-        name="person-circle-check"
-        size={25}
-        color={MainColor.orange}
-      />
-    ),
+    icon: <IconReview size={25} color={MainColor.orange} />,
  },
  {
    label: "Reject",
    value: 5,
-    icon: <FontAwesome name="warning" size={25} color={MainColor.red} />,
+    icon: <IconReject size={25} color={MainColor.red} />,
  },
 ];
--- a/app/(application)/admin/job/publish.tsx
+++ b/app/(application)/admin/job/publish.tsx
@@ -1,11 +0,0 @@
-import { TextCustom, ViewWrapper } from "@/components";
-
-export default function AdminJobPublish() {
-  return (
-    <>
-      <ViewWrapper>
-        <TextCustom>Admin Job Publish</TextCustom>
-      </ViewWrapper>
-    </>
-  );
-}
--- a/app/(application)/admin/job/reject.tsx
+++ b/app/(application)/admin/job/reject.tsx
@@ -1,11 +0,0 @@
-import { TextCustom, ViewWrapper } from "@/components";
-
-export default function AdminJobReject() {
-  return (
-    <>
-      <ViewWrapper>
-        <TextCustom>Admin Job Reject</TextCustom>
-      </ViewWrapper>
-    </>
-  );
-}
--- a/app/(application)/admin/job/review.tsx
+++ b/app/(application)/admin/job/review.tsx
@@ -1,11 +0,0 @@
-import { TextCustom, ViewWrapper } from "@/components";
-
-export default function AdminJobReview() {
-  return (
-    <>
-      <ViewWrapper>
-        <TextCustom>Admin Job Review</TextCustom>
-      </ViewWrapper>
-    </>
-  );
-}
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -2,6 +2,7 @@ import { MainColor } from "@/constants/color-palet";
 import { Stack } from "expo-router";
 import "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
+import Toast from "react-native-toast-message";

 export default function RootLayout() {
  return (
@@ -30,6 +31,7 @@ export default function RootLayout() {
          <Stack.Screen name="(application)" options={{ headerShown: false }} />
        </Stack>
      </SafeAreaProvider>
+      <Toast />
    </>
  );
 }
--- a/bun.lock
+++ b/bun.lock
@@ -45,6 +45,7 @@
        "react-native-reanimated": "~3.17.4",
        "react-native-safe-area-context": "5.4.0",
        "react-native-screens": "~4.11.1",
+        "react-native-toast-message": "^2.3.3",
        "react-native-vector-icons": "^10.2.0",
        "react-native-web": "~0.20.0",
        "react-native-webview": "13.13.5",
@@ -1413,6 +1414,8 @@

    "react-native-screens": ["react-native-screens@4.11.1", "", { "dependencies": { "react-freeze": "^1.0.0", "react-native-is-edge-to-edge": "^1.1.7", "warn-once": "^0.1.0" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-F0zOzRVa3ptZfLpD0J8ROdo+y1fEPw+VBFq1MTY/iyDu08al7qFUO5hLMd+EYMda5VXGaTFCa8q7bOppUszhJw=="],

+    "react-native-toast-message": ["react-native-toast-message@2.3.3", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-4IIUHwUPvKHu4gjD0Vj2aGQzqPATiblL1ey8tOqsxOWRPGGu52iIbL8M/mCz4uyqecvPdIcMY38AfwRuUADfQQ=="],
+
    "react-native-vector-icons": ["react-native-vector-icons@10.2.0", "", { "dependencies": { "prop-types": "^15.7.2", "yargs": "^16.1.1" }, "bin": { "fa-upgrade.sh": "bin/fa-upgrade.sh", "fa5-upgrade": "bin/fa5-upgrade.sh", "fa6-upgrade": "bin/fa6-upgrade.sh", "generate-icon": "bin/generate-icon.js" } }, "sha512-n5HGcxUuVaTf9QJPs/W22xQpC2Z9u0nb0KgLPnVltP8vdUvOp6+R26gF55kilP/fV4eL4vsAHUqUjewppJMBOQ=="],

    "react-native-web": ["react-native-web@0.20.0", "", { "dependencies": { "@babel/runtime": "^7.18.6", "@react-native/normalize-colors": "^0.74.1", "fbjs": "^3.0.4", "inline-style-prefixer": "^7.0.1", "memoize-one": "^6.0.0", "nullthrows": "^1.1.1", "postcss-value-parser": "^4.2.0", "styleq": "^0.1.3" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-OOSgrw+aON6R3hRosCau/xVxdLzbjEcsLysYedka0ZON4ZZe6n9xgeN9ZkoejhARM36oTlUgHIQqxGutEJ9Wxg=="],
--- a/components/Drawer/MenuDrawerDynamicGird.tsx
+++ b/components/Drawer/MenuDrawerDynamicGird.tsx
@@ -8,7 +8,7 @@ type IMenuDrawerItemProps = {
    icon: React.ReactNode;
    label: string;
    value?: string;
-    path?: Href;
+    path?: Href | string;
    color?: string;
 }

--- a/components/_Icon/IconComponent.tsx
+++ b/components/_Icon/IconComponent.tsx
@@ -0,0 +1,111 @@
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
+import {
+  Entypo,
+  FontAwesome,
+  FontAwesome6,
+  Ionicons,
+  Octicons,
+} from "@expo/vector-icons";
+
+export const IconPublish = ({
+  size,
+  color,
+}: {
+  size?: number;
+  color?: string;
+}) => {
+  return (
+    <>
+      <Entypo
+        name="publish"
+        size={size || ICON_SIZE_MEDIUM}
+        color={color || MainColor.white}
+      />
+    </>
+  );
+};
+
+export const IconReview = ({
+  size,
+  color,
+}: {
+  size?: number;
+  color?: string;
+}) => {
+  return (
+    <>
+      <FontAwesome6
+        name="person-circle-check"
+        size={size || ICON_SIZE_MEDIUM}
+        color={color || MainColor.white}
+      />
+    </>
+  );
+};
+
+export const IconReject = ({
+  size,
+  color,
+}: {
+  size?: number;
+  color?: string;
+}) => {
+  return (
+    <>
+      <FontAwesome
+        name="warning"
+        size={size || ICON_SIZE_MEDIUM}
+        color={color || MainColor.white}
+      />
+    </>
+  );
+};
+
+export const IconReport = ({
+  size,
+  color,
+}: {
+  size?: number;
+  color?: string;
+}) => {
+  return (
+    <>
+      <Octicons
+        name="report"
+        size={size || ICON_SIZE_MEDIUM}
+        color={color || MainColor.white}
+      />
+    </>
+  );
+};
+
+export const IconView = ({
+  size,
+  color,
+}: {
+  size?: number;
+  color?: string;
+}) => {
+  return (
+    <>
+      <Octicons
+        name="eye"
+        size={size || ICON_SIZE_MEDIUM}
+        color={color || MainColor.white}
+      />
+    </>
+  );
+};
+
+export const IconDot = ({ size, color }: { size?: number; color?: string }) => {
+  return (
+    <>
+      <Ionicons
+        name="ellipsis-vertical"
+        size={size || ICON_SIZE_MEDIUM}
+        color={color || MainColor.darkblue}
+      />
+    </>
+  );
+};
--- a/components/_ShareComponent/Admin/BackButtonAntTitle.tsx
+++ b/components/_ShareComponent/Admin/BackButtonAntTitle.tsx
@@ -1,12 +1,13 @@
 import Grid from "@/components/Grid/GridCustom";
 import TextCustom from "@/components/Text/TextCustom";
-import { View } from "react-native";
 import AdminBackButton from "./BackButton";

 export default function AdminBackButtonAntTitle({
  title,
+  rightComponent,
 }: {
  title: string;
+  rightComponent?: React.ReactNode;
 }) {
  return (
    <>
@@ -22,8 +23,8 @@ export default function AdminBackButtonAntTitle({
              {title}
            </TextCustom>
          </Grid.Col>
-          <Grid.Col span={2}>
-            <View />
+          <Grid.Col span={2} style={{ alignItems: "flex-end" }}>
+            {rightComponent}
          </Grid.Col>
        </Grid>
      </>
--- a/components/_ShareComponent/Admin/BoxTitlePage.tsx
+++ b/components/_ShareComponent/Admin/BoxTitlePage.tsx
@@ -17,17 +17,8 @@ export default function AdminComp_BoxTitle({
        paddingTop={5}
        paddingBottom={5}
      >
-        {/* <TextCustom
-          // style={{ alignSelf: "center" }}
-          bold
-          size={TEXT_SIZE_LARGE}
-        >
-          {title}
-        </TextCustom>
-        {rightComponent} */}
-
        <Grid>
-          <Grid.Col span={6} style={{ justifyContent: "center" }}>
+          <Grid.Col span={rightComponent ? 6 : 12} style={{ justifyContent: "center" }}>
            <TextCustom
              // style={{ alignSelf: "center" }}
              bold
@@ -36,15 +27,17 @@ export default function AdminComp_BoxTitle({
              {title}
            </TextCustom>
          </Grid.Col>
-          <Grid.Col
-            span={6}
-            style={{
-              justifyContent: "center",
-              alignItems: "flex-end",
-            }}
-          >
-            {rightComponent}
-          </Grid.Col>
+          {rightComponent && (
+            <Grid.Col
+              span={6}
+              style={{
+                justifyContent: "center",
+                alignItems: "flex-end",
+              }}
+            >
+              {rightComponent}
+            </Grid.Col>
+          )}
        </Grid>
      </BaseBox>
    </>
--- a/components/_ShareComponent/Admin/TitlePage.tsx
+++ b/components/_ShareComponent/Admin/TitlePage.tsx
@@ -3,7 +3,7 @@ import TextCustom from "@/components/Text/TextCustom";
 export default function AdminTitlePage({ title }: { title: string }) {
  return (
    <>
-      <TextCustom bold size={30}>
+      <TextCustom bold size={25}>
        {title}
      </TextCustom>
    </>
--- a/components/_ShareComponent/GridDetail_4_8.tsx
+++ b/components/_ShareComponent/GridDetail_4_8.tsx
@@ -0,0 +1,20 @@
+import { Grid } from "@/components";
+
+export const GridDetail_4_8 = ({
+    label,
+    value,
+}: {
+    label: React.ReactNode;
+    value: React.ReactNode;
+}) => {
+    return (
+        <Grid>
+            <Grid.Col span={4} style={{ justifyContent: "center", paddingRight: 10 }}>
+                {label}
+            </Grid.Col>
+            <Grid.Col span={8} style={{ justifyContent: "center" }}>
+                {value}
+            </Grid.Col>
+        </Grid>
+    );
+};
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
    "react-native-reanimated": "~3.17.4",
    "react-native-safe-area-context": "5.4.0",
    "react-native-screens": "~4.11.1",
+    "react-native-toast-message": "^2.3.3",
    "react-native-vector-icons": "^10.2.0",
    "react-native-web": "~0.20.0",
    "react-native-webview": "13.13.5"
--- a/screens/Admin/listPageAdmin.tsx
+++ b/screens/Admin/listPageAdmin.tsx
@@ -67,9 +67,9 @@ const adminListMenu: NavbarItem[] = [
    icon: "chatbubble-ellipses-outline",
    links: [
      { label: "Dashboard", link: "/admin/forum" },
-      { label: "Posting", link: "/admin/forum/publish" },
-      { label: "Report Posting", link: "/admin/forum/review" },
-      { label: "Report Comment", link: "/admin/forum/reject" },
+      { label: "Posting", link: "/admin/forum/posting" },
+      { label: "Report Posting", link: "/admin/forum/report-posting" },
+      { label: "Report Comment", link: "/admin/forum/report-comment" },
    ],
  },
  {
--- a/screens/Authentication/LoginView.tsx
+++ b/screens/Authentication/LoginView.tsx
@@ -84,9 +84,9 @@ export default function LoginView() {

        <Spacing />

-        {/* <ButtonCustom onPress={() => router.navigate("/admin/job")}>
+        <ButtonCustom onPress={() => router.navigate("/admin/forum")}>
          Admin ( Delete Soon )
-        </ButtonCustom> */}
+        </ButtonCustom>
      </View>
    </ViewWrapper>
  );