# Forum Report

## feat
- Repot posting
- Report komentar
### No issuee

prisma/schema.prisma

@@ -668,11 +668,12 @@ model Forum_Komentar {
 }
 
 model ForumMaster_KategoriReport {
-  id                   String                 @id @default(cuid())
+  id                   Int                    @id @default(autoincrement())
   isActive             Boolean                @default(true)
   createdAt            DateTime               @default(now())
   updatedAt            DateTime               @updatedAt
-  kategori             String
+  title                String
+  deskripsi            String                 @db.Text
   Forum_ReportPosting  Forum_ReportPosting[]
   Forum_ReportKomentar Forum_ReportKomentar[]
 }
@@ -682,12 +683,12 @@ model Forum_ReportPosting {
   isActive  Boolean  @default(true)
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
+  deskripsi String?  @db.Text
 
   ForumMaster_KategoriReport   ForumMaster_KategoriReport? @relation(fields: [forumMaster_KategoriReportId], references: [id])
-  forumMaster_KategoriReportId String?
+  forumMaster_KategoriReportId Int?
   Forum_Posting                Forum_Posting?              @relation(fields: [forum_PostingId], references: [id])
   forum_PostingId              String?
-  deskripsi                    String?
   User                         User?                       @relation(fields: [userId], references: [id])
   userId                       String?
 }
@@ -697,12 +698,12 @@ model Forum_ReportKomentar {
   isActive  Boolean  @default(true)
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
+  deskripsi String?  @db.Text
 
   ForumMaster_KategoriReport   ForumMaster_KategoriReport? @relation(fields: [forumMaster_KategoriReportId], references: [id])
-  forumMaster_KategoriReportId String?
+  forumMaster_KategoriReportId Int?
   Forum_Komentar               Forum_Komentar?             @relation(fields: [forum_KomentarId], references: [id])
   forum_KomentarId             String?
-  deskripsi                    String?
   User                         User?                       @relation(fields: [userId], references: [id])
   userId                       String?
 }

src/app/api/seeder/route.ts

@@ -19,6 +19,7 @@ import event_status from "../../../bin/seeder/event/master_status.json";
 import event_tipe_acara from "../../../bin/seeder/event/master_tipe_acara.json";
 import voting_status from "../../../bin/seeder/voting/master_status.json";
 import master_status from "../../../bin/seeder/master_status.json";
+import forum_kategori_report from "../../../bin/seeder/forum/master_report.json";
 
 export async function GET(req: Request) {
   const dev = new URL(req.url).searchParams.get("dev");
@@ -328,6 +329,22 @@ export async function GET(req: Request) {
       });
     }
 
+    for (let m of forum_kategori_report) {
+      await prisma.forumMaster_KategoriReport.upsert({
+        where: {
+          id: m.id as number,
+        },
+        create: {
+          title: m.title,
+          deskripsi: m.deskripsi,
+        },
+        update: {
+          title: m.title,
+          deskripsi: m.deskripsi,
+        },
+      });
+    }
+
     return NextResponse.json({ success: true });
   }
 

src/app/dev/forum/detail/[id]/page.tsx

@@ -2,9 +2,12 @@ import Forum_Detail from "@/app_modules/forum/detail";
 import { forum_getKomentarById } from "@/app_modules/forum/fun/get/get_komentar_by_id";
 import { forum_getOnePostingById } from "@/app_modules/forum/fun/get/get_one_posting_by_id";
 import { forum_countOneTotalKomentarById } from "@/app_modules/forum/fun/count/count_one_total_komentar_by_id";
+import { User_getUserId } from "@/app_modules/fun_global/get_user_token";
 
 export default async function Page({ params }: { params: { id: string } }) {
   let postingId = params.id;
+
+  const userLoginId = await User_getUserId()
   const dataPosting = await forum_getOnePostingById(postingId);
   const listKomentar = await forum_getKomentarById(postingId);
   const totalKomentar = await forum_countOneTotalKomentarById(postingId)
@@ -16,6 +19,7 @@ export default async function Page({ params }: { params: { id: string } }) {
         dataPosting={dataPosting as any}
         listKomentar={listKomentar as any}
         totalKomentar={totalKomentar}
+        userLoginId={userLoginId}
       />
     </>
   );

src/app/dev/forum/report/komentar-lainnya/[id]/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutForum_ReportKomentar } from "@/app_modules/forum";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutForum_ReportKomentar>{children}</LayoutForum_ReportKomentar>
+    </>
+  );
+}

src/app/dev/forum/report/komentar-lainnya/[id]/loading.tsx

@@ -0,0 +1,9 @@
+import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
+
+export default async function Page() {
+  return (
+    <>
+      <ComponentGlobal_V2_LoadingPage />
+    </>
+  );
+}

src/app/dev/forum/report/komentar-lainnya/[id]/page.tsx

@@ -0,0 +1,11 @@
+import { Forum_ReportKomentarLainnya } from "@/app_modules/forum";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  let komentarId = params.id;
+
+  return (
+    <>
+      <Forum_ReportKomentarLainnya komentarId={komentarId} />
+    </>
+  );
+}

src/app/dev/forum/report/komentar/[id]/page.tsx

@@ -1,8 +1,16 @@
 import { Forum_ReportKomentar } from "@/app_modules/forum";
+import { forum_getMasterKategoriReport } from "@/app_modules/forum/fun/master/get_master_kategori_report";
 
-export default async function Page({params}: {params: {id: string}}) {
-    let komentarId = params.id
-    return<>
-    <Forum_ReportKomentar id={komentarId}/>
+export default async function Page({ params }: { params: { id: string } }) {
+  let komentarId = params.id;
+  const listReport = await forum_getMasterKategoriReport();
+
+  return (
+    <>
+      <Forum_ReportKomentar
+        komentarId={komentarId}
+        listReport={listReport as any}
+      />
     </>
-}
+  );
+}

src/app/dev/forum/report/posting-lainnya/[id]/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutForum_ReportPosting } from "@/app_modules/forum";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutForum_ReportPosting>{children}</LayoutForum_ReportPosting>
+    </>
+  );
+}

src/app/dev/forum/report/posting-lainnya/[id]/loading.tsx

@@ -0,0 +1,9 @@
+import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
+
+export default async function Page() {
+  return (
+    <>
+      <ComponentGlobal_V2_LoadingPage />
+    </>
+  );
+}

src/app/dev/forum/report/posting-lainnya/[id]/page.tsx

@@ -0,0 +1,11 @@
+import { Forum_ReportPostingLainnya } from "@/app_modules/forum";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  let postingIg = params.id;
+
+  return (
+    <>
+      <Forum_ReportPostingLainnya postingIg={postingIg} />
+    </>
+  );
+}

src/app/dev/forum/report/posting/[id]/page.tsx

@@ -1,11 +1,16 @@
 import { Forum_ReportPosting } from "@/app_modules/forum";
+import { forum_getMasterKategoriReport } from "@/app_modules/forum/fun/master/get_master_kategori_report";
 
 export default async function Page({ params }: { params: { id: string } }) {
-  let id = params.id;
+  let postingId = params.id;
+  const listReport = await forum_getMasterKategoriReport();
 
   return (
     <>
-      <Forum_ReportPosting id={id} />
+      <Forum_ReportPosting
+        postingId={postingId}
+        listReport={listReport as any}
+      />
     </>
   );
 }

src/app/lib/router_hipmi/router_forum.ts

@@ -21,4 +21,6 @@ export const RouterForum = {
   //report
   report_posting: "/dev/forum/report/posting/",
   report_komentar: "/dev/forum/report/komentar/",
+  report_posting_lainnya: "/dev/forum/report/posting-lainnya/",
+  report_komentar_lainnya: "/dev/forum/report/komentar-lainnya/",
 };

src/app_modules/component_global/notif_global/notifikasi_berhasil.tsx

@@ -26,7 +26,7 @@ export async function ComponentGlobal_NotifikasiBerhasil(
     ),
     color: "green",
     radius: "md",
-    autoClose: durasi ? durasi : 1000,
+    autoClose: durasi ? durasi : 2000,
     icon: <IconCircleCheck color="white" />,
     withCloseButton: false,
 

src/app_modules/component_global/notif_global/notifikasi_gagal.tsx

@@ -17,7 +17,7 @@ export async function ComponentGlobal_NotifikasiGagal(text: string) {
     ),
     color: "red",
     radius: "md",
-    autoClose: 1000,
+    autoClose: 2000,
     icon: <IconAlertTriangle color="white" />,
     withCloseButton: false,
 

src/app_modules/component_global/notif_global/notifikasi_peringatan.tsx

@@ -20,7 +20,7 @@ export async function ComponentGlobal_NotifikasiPeringatan(
     ),
     color: "yellow.1",
     radius: "md",
-    autoClose: durasi ? durasi : 1000,
+    autoClose: durasi ? durasi : 2000,
     style: {
       borderWidth: "0.5px",
       borderStyle: "solid",

src/app_modules/forum/component/header/komentar_author_header_name.tsx

@@ -31,6 +31,7 @@ export default function ComponentForum_KomentarAuthorNameOnHeader({
   isMoreButton,
   setKomentar,
   postingId,
+  userLoginId,
 }: {
   userId?: string;
   komentarId?: string;
@@ -40,7 +41,8 @@ export default function ComponentForum_KomentarAuthorNameOnHeader({
   isPembatas?: boolean;
   isMoreButton?: boolean;
   setKomentar?: any;
-  postingId?: string
+  postingId?: string;
+  userLoginId: string
 }) {
   const router = useRouter();
 
@@ -117,6 +119,7 @@ export default function ComponentForum_KomentarAuthorNameOnHeader({
                     komentarId={komentarId}
                     setKomentar={setKomentar}
                     postingId={postingId}
+                    userLoginId={userLoginId}
                   />
                 </Group>
               ) : (

src/app_modules/forum/component/more_button/komentar_button_more.tsx

@@ -37,16 +37,17 @@ export default function ComponentForum_KomentarButtonMore({
   komentarId,
   setKomentar,
   postingId,
+  userLoginId,
 }: {
   userId: any;
   komentarId: any;
   setKomentar?: any;
   postingId?: string;
+  userLoginId: string
 }) {
   const router = useRouter();
   const [opened, { open, close }] = useDisclosure(false);
   const [openDel, setOpenDel] = useState(false);
-  const [userLoginId, setUserLoginId] = useState("");
 
   // loading
   const [loadingEdit, setLoadingEdit] = useState(false);
@@ -54,14 +55,7 @@ export default function ComponentForum_KomentarButtonMore({
 
   //   if (loadingEdit) return <ComponentGlobal_V2_LoadingPage />;
 
-  useShallowEffect(() => {
-    getUserLoginId();
-  }, []);
-
-  async function getUserLoginId() {
-    const getUserLoginId = await User_getUserId();
-    setUserLoginId(getUserLoginId);
-  }
+ 
 
   return (
     <>

src/app_modules/forum/detail/index.tsx

@@ -25,7 +25,7 @@ import dynamic from "next/dynamic";
 import React, { useState } from "react";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
-import { forum_funCreateKomentar } from "../fun/create/fun_create_komentra";
+import { forum_funCreateKomentar } from "../fun/create/fun_create_komentar";
 const ReactQuill = dynamic(
   () => {
     return import("react-quill");
@@ -39,10 +39,12 @@ export default function Forum_Detail({
   dataPosting,
   listKomentar,
   totalKomentar,
+  userLoginId,
 }: {
   dataPosting: MODEL_FORUM_POSTING;
   listKomentar: MODEL_FORUM_KOMENTAR[];
-  totalKomentar: number
+  totalKomentar: number;
+  userLoginId: string
 }) {
   const [komentar, setKomentar] = useState(listKomentar);
 
@@ -55,6 +57,7 @@ export default function Forum_Detail({
           listKomentar={komentar}
           setKomentar={setKomentar}
           postingId={dataPosting?.id}
+          userLoginId={userLoginId}
         />
       </Stack>
     </>
@@ -194,10 +197,12 @@ function KomentarView({
   listKomentar,
   setKomentar,
   postingId,
+  userLoginId,
 }: {
   listKomentar: MODEL_FORUM_KOMENTAR[];
   setKomentar: any;
-  postingId: string
+  postingId: string;
+  userLoginId: string
 }) {
   return (
     <>
@@ -221,6 +226,7 @@ function KomentarView({
                   isMoreButton={true}
                   setKomentar={setKomentar}
                   postingId={postingId}
+                  userLoginId={userLoginId}
                 />
               </Card.Section>
               <Card.Section sx={{ zIndex: 0 }} p={"sm"}>

src/app_modules/forum/fun/create/fun_create_report_komentar.ts

@@ -0,0 +1,29 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { User_getUserId } from "@/app_modules/fun_global/get_user_token";
+
+export async function forum_funCreateReportKomentar(
+  komentarId: string,
+  value: string
+) {
+  const authorId = await User_getUserId();
+
+  const cekId = await prisma.forumMaster_KategoriReport.findFirst({
+    where: {
+      title: value,
+    },
+  });
+
+  const createReport = await prisma.forum_ReportKomentar.create({
+    data: {
+      userId: authorId,
+      forumMaster_KategoriReportId: cekId?.id,
+      forum_KomentarId: komentarId,
+    },
+  });
+
+  if (!createReport)
+    return { status: 400, message: "Gagal menambahkan report komentar !" };
+  return { status: 201, message: "Berhasil me-report komentar !" };
+}

src/app_modules/forum/fun/create/fun_create_report_komentar_lainnya.ts

@@ -0,0 +1,21 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { User_getUserId } from "@/app_modules/fun_global/get_user_token";
+
+export async function forum_funCreateReportKomentarLainnya(
+  komentarId: string,
+  deskripsi: string
+) {
+  const authorId = await User_getUserId();
+  const create = await prisma.forum_ReportKomentar.create({
+    data: {
+      forum_KomentarId: komentarId,
+      deskripsi: deskripsi,
+      userId: authorId,
+    },
+  });
+
+  if (!create) return { status: 400, message: "Gagal menambah report !" };
+  return { status: 201, message: "Berhasil menambah report !" };
+}

src/app_modules/forum/fun/create/fun_create_report_posting.ts

@@ -0,0 +1,29 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { User_getUserId } from "@/app_modules/fun_global/get_user_token";
+import { revalidatePath } from "next/cache";
+
+export async function forum_funCreateReportPosting(
+  postingId: string,
+  value: string,
+) {
+  const authorId = await User_getUserId();
+  const cekId = await prisma.forumMaster_KategoriReport.findFirst({
+    where: {
+      title: value,
+    },
+  });
+
+  const createReport = await prisma.forum_ReportPosting.create({
+    data: {
+      userId: authorId,
+      forum_PostingId: postingId,
+      forumMaster_KategoriReportId: cekId?.id,
+    },
+  });
+
+  if (!createReport)
+    return { status: 400, message: "Gagal menambahkan report posting!" };
+  return { status: 201, message: "Berhasil me-report posting!" };
+}

src/app_modules/forum/fun/create/fun_create_report_posting_lainnya.ts

@@ -0,0 +1,21 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { User_getUserId } from "@/app_modules/fun_global/get_user_token";
+
+export async function forum_funCreateReportPostingLainnya(
+  postingId: string,
+  deskripsi: string
+) {
+  const authorId = await User_getUserId();
+  const create = await prisma.forum_ReportPosting.create({
+    data: {
+      forum_PostingId: postingId,
+      deskripsi: deskripsi,
+      userId: authorId,
+    },
+  });
+
+  if (!create) return { status: 400, message: "Gagal menambah report !" };
+  return { status: 201, message: "Berhasil menambah report !" };
+}

src/app_modules/forum/fun/master/get_master_kategori_report.ts

@@ -0,0 +1,11 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export async function forum_getMasterKategoriReport() {
+  const data = await prisma.forumMaster_KategoriReport.findMany({});
+
+  const changeType = JSON.stringify(data, null,2)
+
+  return data;
+}

src/app_modules/forum/index.ts

@@ -17,6 +17,8 @@ import Forum_EditKomentar from "./edit/komentar";
 import LayoutForum_EditKomentar from "./edit/komentar/layout";
 import Forum_ReportKomentar from "./report/komentar";
 import LayoutForum_ReportKomentar from "./report/komentar/layout";
+import Forum_ReportPostingLainnya from "./report/posting/lainnya";
+import Forum_ReportKomentarLainnya from "./report/komentar/lainnya";
 
 export {
   Forum_Splash,
@@ -38,4 +40,6 @@ export {
   LayoutForum_EditKomentar as LaoyoutForum_EditKomentar,
   Forum_ReportKomentar,
   LayoutForum_ReportKomentar,
+  Forum_ReportPostingLainnya,
+  Forum_ReportKomentarLainnya,
 };

src/app_modules/forum/komentar/index.tsx

@@ -24,7 +24,7 @@ import "react-quill/dist/quill.bubble.css";
 import { IconPhotoUp } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { MODEL_FORUM_POSTING } from "../model/interface";
-import { forum_funCreateKomentar } from "../fun/create/fun_create_komentra";
+import { forum_funCreateKomentar } from "../fun/create/fun_create_komentar";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 

src/app_modules/forum/model/interface.tsx

@@ -9,7 +9,7 @@ export interface MODEL_FORUM_POSTING {
   diskusi: string;
   authorId: string;
   Author: MODEL_USER;
-  _count: number
+  _count: number;
 }
 
 export interface MODEL_FORUM_KOMENTAR {
@@ -20,5 +20,14 @@ export interface MODEL_FORUM_KOMENTAR {
   komentar: string;
   forum_PostingId: string;
   authorId: string;
-  Author: MODEL_USER
+  Author: MODEL_USER;
+}
+
+export interface MODEL_FORUM_REPORT {
+  id: string;
+  isActive: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+  title: string;
+  deskripsi: string;
 }

src/app_modules/forum/report/komentar/index.tsx

@@ -1,11 +1,88 @@
-"use client"
+"use client";
 
-import { Stack } from "@mantine/core"
+import { Box, Button, Paper, Radio, Stack, Text, Title } from "@mantine/core";
+import { MODEL_FORUM_REPORT } from "../../model/interface";
+import { useState } from "react";
+import { forum_funCreateReportPosting } from "../../fun/create/fun_create_report_posting";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { useRouter } from "next/navigation";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import { forum_funCreateReportKomentar } from "../../fun/create/fun_create_report_komentar";
 
-export default function Forum_ReportKomentar({id}: {id: string}){
-    return <>
-    <Stack>
-        ini laporan
-    </Stack>
+export default function Forum_ReportKomentar({
+  komentarId,
+  listReport,
+}: {
+  komentarId: string;
+  listReport: MODEL_FORUM_REPORT[];
+}) {
+  const [reportValue, setReportValue] = useState("Kebencian");
+
+  return (
+    <>
+      <Stack px={"sm"}>
+        <Radio.Group value={reportValue as any} onChange={setReportValue}>
+          <Stack spacing={"xl"}>
+            {listReport.map((e) => (
+              <Stack key={e.id}>
+                <Radio
+                  value={e.title}
+                  label={<Title order={5}>{e.title}</Title>}
+                />
+                <Text>{e.deskripsi}</Text>
+              </Stack>
+            ))}
+          </Stack>
+        </Radio.Group>
+        <ButtonAction value={reportValue} komentarId={komentarId} />
+      </Stack>
     </>
-}
+  );
+}
+
+function ButtonAction({
+  value,
+  komentarId,
+}: {
+  value: string;
+  komentarId: string;
+}) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+
+  async function onReport() {
+    await forum_funCreateReportKomentar(komentarId, value).then((res) => {
+      if (res.status === 201) {
+        ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
+        setLoading(true);
+        router.back();
+      } else {
+        ComponentGlobal_NotifikasiGagal(res.message);
+      }
+    });
+  }
+  return (
+    <>
+      <Stack mt={"md"}>
+        <Button
+          radius={"xl"}
+          onClick={() =>
+            router.replace(RouterForum.report_komentar_lainnya + komentarId)
+          }
+        >
+          Lainnya
+        </Button>
+        <Button
+          radius={"xl"}
+          color="red"
+          loaderPosition="center"
+          loading={loading ? true : false}
+          onClick={() => onReport()}
+        >
+          Report
+        </Button>
+      </Stack>
+    </>
+  );
+}

src/app_modules/forum/report/komentar/lainnya.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import { Button, Group, Stack, Textarea } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { forum_funCreateReportPosting } from "../../fun/create/fun_create_report_posting";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
+import { forum_funCreateReportPostingLainnya } from "../../fun/create/fun_create_report_posting_lainnya";
+import { forum_funCreateReportKomentarLainnya } from "../../fun/create/fun_create_report_komentar_lainnya";
+
+export default function Forum_ReportKomentarLainnya({ komentarId }: { komentarId: string }) {
+  const [deskripsi, setDeskripsi] = useState("");
+  return (
+    <>
+      <Stack>
+        <Textarea
+          label={"Kirimkan Laporan"}
+          placeholder="Ketik laporan anda tentang komentar ini ..."
+          minRows={5}
+          onChange={(val) => {
+            setDeskripsi(val.currentTarget.value);
+          }}
+        />
+        <ButtonAction komentarId={komentarId} deskripsi={deskripsi} />
+      </Stack>
+    </>
+  );
+}
+
+function ButtonAction({
+  komentarId,
+  deskripsi,
+}: {
+  komentarId: string;
+  deskripsi: string;
+}) {
+  const router = useRouter();
+
+  async function onReport() {
+    await forum_funCreateReportKomentarLainnya(komentarId, deskripsi).then(
+      (res) => {
+        if (res.status === 201) {
+          ComponentGlobal_NotifikasiBerhasil(res.message);
+          router.back();
+        } else {
+          ComponentGlobal_NotifikasiGagal(res.message);
+        }
+      }
+    );
+  }
+  return (
+    <>
+      <Group position="apart" grow>
+        <Button
+          radius={"xl"}
+          onClick={() =>
+            router.replace(RouterForum.report_komentar + komentarId)
+          }
+        >
+          Batal
+        </Button>
+        <Button radius={"xl"} color="red" onClick={() => onReport()}>
+          Report
+        </Button>
+      </Group>
+    </>
+  );
+}

src/app_modules/forum/report/posting/index.tsx

@@ -1,11 +1,85 @@
-"use client"
+"use client";
 
-import { Stack } from "@mantine/core"
+import { Box, Button, Paper, Radio, Stack, Text, Title } from "@mantine/core";
+import { MODEL_FORUM_REPORT } from "../../model/interface";
+import { useState } from "react";
+import { forum_funCreateReportPosting } from "../../fun/create/fun_create_report_posting";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { useRouter } from "next/navigation";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
 
-export default function Forum_ReportPosting({id}: {id: string}){
-    return <>
-    <Stack>
-        ini laporan
-    </Stack>
+export default function Forum_ReportPosting({
+  postingId,
+  listReport,
+}: {
+  postingId: string;
+  listReport: MODEL_FORUM_REPORT[];
+}) {
+  const [reportValue, setReportValue] = useState("Kebencian");
+
+  return (
+    <>
+      <Stack px={"sm"}>
+        <Radio.Group value={reportValue as any} onChange={setReportValue}>
+          <Stack spacing={"xl"}>
+            {listReport.map((e) => (
+              <Stack key={e.id}>
+                <Radio
+                  value={e.title}
+                  label={<Title order={5}>{e.title}</Title>}
+                />
+                <Text>{e.deskripsi}</Text>
+              </Stack>
+            ))}
+          </Stack>
+        </Radio.Group>
+        <ButtonAction value={reportValue} postingId={postingId} />
+      </Stack>
     </>
-}
+  );
+}
+
+function ButtonAction({
+  value,
+  postingId,
+}: {
+  value: string;
+  postingId: string;
+}) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+
+  async function onReport() {
+    await forum_funCreateReportPosting(postingId, value).then((res) => {
+      if (res.status === 201) {
+        ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
+        setLoading(true);
+        router.back();
+      } else {
+        ComponentGlobal_NotifikasiGagal(res.message);
+      }
+    });
+  }
+  return (
+    <>
+      <Stack mt={"md"}>
+        <Button
+          radius={"xl"}
+          onClick={() => router.replace(RouterForum.report_posting_lainnya + postingId)}
+        >
+          Lainnya
+        </Button>
+        <Button
+          radius={"xl"}
+          color="red"
+          loaderPosition="center"
+          loading={loading ? true : false}
+          onClick={() => onReport()}
+        >
+          Report
+        </Button>
+      </Stack>
+    </>
+  );
+}

src/app_modules/forum/report/posting/lainnya.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import { Button, Group, Stack, Textarea } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { forum_funCreateReportPosting } from "../../fun/create/fun_create_report_posting";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
+import { forum_funCreateReportPostingLainnya } from "../../fun/create/fun_create_report_posting_lainnya";
+
+export default function Forum_ReportPostingLainnya({
+  postingIg,
+}: {
+  postingIg: string;
+}) {
+  const [deskripsi, setDeskripsi] = useState("");
+  return (
+    <>
+      <Stack>
+        <Textarea
+          label={"Kirimkan Laporan"}
+          placeholder="Ketik laporan anda tentang postingan ini ..."
+          minRows={5}
+          onChange={(val) => {
+            setDeskripsi(val.currentTarget.value);
+          }}
+        />
+        <ButtonAction postingIg={postingIg} deskripsi={deskripsi} />
+      </Stack>
+    </>
+  );
+}
+
+function ButtonAction({
+  postingIg,
+  deskripsi,
+}: {
+  postingIg: string;
+  deskripsi: string;
+}) {
+  const router = useRouter();
+
+  async function onReport() {
+    await forum_funCreateReportPostingLainnya(postingIg, deskripsi).then(
+      (res) => {
+        if (res.status === 201) {
+          ComponentGlobal_NotifikasiBerhasil(res.message);
+          router.back();
+        } else {
+          ComponentGlobal_NotifikasiGagal(res.message);
+        }
+      }
+    );
+  }
+  return (
+    <>
+      <Group position="apart" grow>
+        <Button
+          radius={"xl"}
+          onClick={() => router.replace(RouterForum.report_posting + postingIg)}
+        >
+          Batal
+        </Button>
+        <Button radius={"xl"} color="red" onClick={() => onReport()}>
+          Report
+        </Button>
+      </Group>
+    </>
+  );
+}

src/app_modules/forum/report/posting/layout.tsx

@@ -16,7 +16,7 @@ export default function LayoutForum_ReportPosting({
     <>
       <AppShell
         header={
-          <ComponentForum_HeaderRataKiri title="Mengumpulkan Informasi Posting"/>
+          <ComponentForum_HeaderRataKiri title="Mengumpulkan Informasi Posting" />
         }
       >
         {children}

src/bin/seeder/forum/master_report.json

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