src/app/api/new/investasi/berita/[id]/route.ts

@@ -0,0 +1,85 @@
+import { prisma } from "@/app/lib";
+import backendLogger from "@/util/backendLogger";
+import { NextResponse } from "next/server";
+
+export async function GET(
+  request: Request,
+  context: { params: { id: string } }
+) {
+  // if (request.method === "GET") {
+  //   return NextResponse.json(
+  //     { success: false, message: "Method not allowed" },
+  //     { status: 405 }
+  //   );
+  // }
+
+  try {
+    let fixData;
+    const { id } = context.params;
+    const { searchParams } = new URL(request.url);
+    const kategori: string | null = searchParams.get("kategori");
+    const page = searchParams.get("page");
+    const takeData = 10;
+    const skipData = Number(page) * takeData - takeData;
+
+    if (!kategori) {
+      fixData = await prisma.beritaInvestasi.findFirst({
+        where: {
+          id: id,
+        },
+        include: {
+          investasi: {
+            select: {
+              authorId: true,
+            },
+          },
+        },
+      });
+    } else if (kategori == "get-all") {
+      fixData = await prisma.beritaInvestasi.findMany({
+        take: takeData,
+        skip: skipData,
+        orderBy: {
+          updatedAt: "desc",
+        },
+        where: {
+          investasiId: id,
+          active: true,
+        },
+      });
+    }
+
+    await prisma.$disconnect();
+
+    return NextResponse.json(
+      { success: true, message: "Success get data news", data: fixData },
+      { status: 200 }
+    );
+  } catch (error) {
+    await prisma.$disconnect();
+    backendLogger.error("Error get data news", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Failed to get data, try again later",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}
+
+async function main({ id }: { id: string }) {
+  const fixData = await prisma.beritaInvestasi.findMany({
+    take: 10,
+    skip: 0,
+    orderBy: {
+      updatedAt: "desc",
+    },
+    where: {
+      investasiId: id.trim(),
+      active: true,
+    },
+  });
+  console.log("data sebelum disconnect>>", fixData);
+}

src/app/dev/investasi/berita/[id]/page.tsx

@@ -1,12 +1,12 @@
-import { investasi_funGetOneBeritaById } from "@/app_modules/investasi/_fun";
+import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { Investasi_UiDetailBerita } from "@/app_modules/investasi/_ui";
 
-export default async function Page({ params }: { params: { id: string } }) {
-  const beritaId = params.id;
-  const dataBerita = await investasi_funGetOneBeritaById({ beritaId });
+export default async function Page() {
+  const userLoginId = await funGetUserIdByToken();
+
   return (
     <>
-      <Investasi_UiDetailBerita dataBerita={dataBerita} />
+      <Investasi_UiDetailBerita userLoginId={userLoginId} />
     </>
   );
 }

src/app/dev/investasi/berita/daftar/[id]/page.tsx

@@ -1,14 +1,9 @@
-import { investasi_funGetBeritaById } from "@/app_modules/investasi/_fun";
 import { Investasi_UiDaftarBerita } from "@/app_modules/investasi/_ui";
 
-export default async function Page({ params }: { params: { id: string } }) {
-   const investasiId = params.id;
-   const dataBerita = await investasi_funGetBeritaById({ investasiId });
-
-  
+export default async function Page() {
   return (
     <>
-      <Investasi_UiDaftarBerita dataBerita={dataBerita} />
+      <Investasi_UiDaftarBerita />
     </>
   );
 }

src/app/dev/investasi/berita/rekap/[id]/page.tsx

@@ -1,17 +1,9 @@
-import { investasi_funGetBeritaById } from "@/app_modules/investasi/_fun";
 import { Investasi_UiRekapBerita } from "@/app_modules/investasi/_ui";
 
-export default async function Page({ params }: { params: { id: string } }) {
-  const investasiId = params.id;
-  const dataBerita = await investasi_funGetBeritaById({ investasiId });
-
-
+export default async function Page() {
   return (
     <>
-      <Investasi_UiRekapBerita
-        investasiId={investasiId}
-        dataBerita={dataBerita}
-      />
+      <Investasi_UiRekapBerita />
     </>
   );
 }

src/app/dev/investasi/create/berita/[id]/page.tsx

@@ -1,10 +1,9 @@
 import { Investasi_UiCreateBerita } from "@/app_modules/investasi/_ui";
 
-export default async function Page({ params }: { params: { id: string } }) {
-  const investasiId = params.id;
+export default async function Page() {
   return (
     <>
-      <Investasi_UiCreateBerita investasiId={investasiId} />
+      <Investasi_UiCreateBerita />
     </>
   );
 }

src/app/lib/prisma.ts

@@ -21,9 +21,9 @@ if (process.env.NODE_ENV !== "production") {
 }
 
 process.on("SIGINT", async () => {
-  console.log("Start in Disconnecting PrismaClient...");
+  // console.log("Start in Disconnecting PrismaClient...");
   const disconnect = await prisma.$disconnect();
-  console.log("End of Disconnecting PrismaClient...", disconnect);
+  // console.log("End of Disconnecting PrismaClient...", disconnect);
   process.exit(0);
 });
 

src/app_modules/_global/fun/delete/fun_delete_file_by_id.tsx

@@ -10,7 +10,7 @@ export async function funDeteleteFileById({
   try {
     const tokenResponse = await fetch("/api/get-cookie");
     if (!tokenResponse.ok) {
-      throw new Error("Failed to get token");
+      return { success: false, message: "Token not found" };
     }
     const { token } = await tokenResponse.json();
 

src/app_modules/investasi/_lib/api_interface.ts

@@ -1,3 +1,4 @@
+import { data } from "autoprefixer";
 export const apiGetOneInvestasiById = async ({ id }: { id: string }) => {
   const { token } = await fetch("/api/get-cookie").then((res) => res.json());
   if (!token) return await token.json().catch(() => null);
@@ -88,3 +89,29 @@ export const apiGetDokumenInvestasiById = async ({
   );
   return await response.json().catch(() => null);
 };
+
+export const apiGetBeritaInvestasiById = async ({
+  id,
+  kategori,
+  page,
+}: {
+  id: string;
+  kategori?: undefined | "get-all";
+  page?: string;
+}) => {
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  if (!token) return await token.json().catch(() => null);
+
+  const onCategory = kategori ? `?kategori=${kategori}&page=${page}` : "";
+
+  const response = await fetch(`/api/new/investasi/berita/${id}${onCategory}`, {
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  return await response.json().catch(() => null);
+};

src/app_modules/investasi/_ui/create/ui_create_berita.tsx

@@ -6,17 +6,13 @@ import {
 } from "@/app_modules/_global/ui";
 import { Investasi_ViewCreateBerita } from "../../_view";
 
-export function Investasi_UiCreateBerita({
-  investasiId,
-}: {
-  investasiId: string;
-}) {
+export function Investasi_UiCreateBerita() {
   return (
     <>
       <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Tambah Berita" />}
       >
-        <Investasi_ViewCreateBerita investasiId={investasiId} />
+        <Investasi_ViewCreateBerita  />
       </UIGlobal_LayoutTamplate>
     </>
   );

src/app_modules/investasi/_ui/detail/ui_berita.tsx

@@ -10,40 +10,82 @@ import {
   UIGlobal_DrawerCustom,
   UIGlobal_LayoutHeaderTamplate,
   UIGlobal_LayoutTamplate,
-  UIGlobal_Modal
+  UIGlobal_Modal,
 } from "@/app_modules/_global/ui";
 import { ActionIcon, Button, Center, Stack, Text } from "@mantine/core";
 import { IconDotsVertical, IconTrash } from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import { investasi_funDeleteBerita } from "../../_fun";
 import { Investasi_ViewDetailBerita } from "../../_view";
+import { DIRECTORY_ID } from "@/app/lib";
+import { clientLogger } from "@/util/clientLogger";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetBeritaInvestasiById } from "../../_lib/api_interface";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+
+export function Investasi_UiDetailBerita({
+  userLoginId,
+}: {
+  userLoginId: string;
+}) {
+  const params = useParams<{ id: string }>();
+  const id = params.id;
 
-export function Investasi_UiDetailBerita({ dataBerita }: { dataBerita: any }) {
   const router = useRouter();
   const [openDrawer, setOpenDrawer] = useState(false);
   const [openModal, setOpenModal] = useState(false);
-  const [data, setData] = useState(dataBerita);
+  const [data, setData] = useState<any | null>(null);
+  const [isLoading, setLoading] = useState(false);
 
-  async function onDelete() {
-    const del = await investasi_funDeleteBerita({
-      beritaId: dataBerita.id,
-    });
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
 
-    if (del.status === 200) {
-      const deleteImage = await funGlobal_DeleteFileById({
-        fileId: data.imageId,
+  async function onLoadData() {
+    try {
+      const respone = await apiGetBeritaInvestasiById({
+        id: id,
       });
 
-      if (!deleteImage.success) {
-        ComponentGlobal_NotifikasiPeringatan("Gagal hapus gambar ");
+      if (respone) {
+        setData(respone.data);
       }
+    } catch (error) {
+      clientLogger.error("Error get detail berita", error);
+    }
+  }
 
-      ComponentGlobal_NotifikasiBerhasil(del.message);
-      setOpenModal(false);
-      router.back();
-    } else {
-      ComponentGlobal_NotifikasiGagal(del.message);
+  async function onDelete() {
+    try {
+      setLoading(true);
+      const del = await investasi_funDeleteBerita({
+        beritaId: id,
+      });
+
+      if (del.status === 200) {
+        if (data.imageId != null) {
+          const deleteImage = await funGlobal_DeleteFileById({
+            fileId: data.imageId,
+            dirId: DIRECTORY_ID.investasi_berita,
+          });
+
+          if (!deleteImage.success) {
+            setLoading(false);
+            ComponentGlobal_NotifikasiPeringatan("Gagal hapus gambar ");
+          }
+        }
+
+        router.back();
+        ComponentGlobal_NotifikasiBerhasil(del.message);
+        setOpenModal(false);
+      } else {
+        setLoading(false);
+        ComponentGlobal_NotifikasiGagal(del.message);
+      }
+    } catch (error) {
+      setLoading(false);
+      clientLogger.error("Error delete berita", error);
     }
   }
 
@@ -54,17 +96,21 @@ export function Investasi_UiDetailBerita({ dataBerita }: { dataBerita: any }) {
           <UIGlobal_LayoutHeaderTamplate
             title="Detail Berita"
             customButtonRight={
-              <ActionIcon
-                variant="transparent"
-                onClick={() => setOpenDrawer(true)}
-              >
-                <IconDotsVertical color="white" />
-              </ActionIcon>
+              data && userLoginId === data.investasi.authorId ? (
+                <ActionIcon
+                  variant="transparent"
+                  onClick={() => setOpenDrawer(true)}
+                >
+                  <IconDotsVertical color="white" />
+                </ActionIcon>
+              ) : (
+                ""
+              )
             }
           />
         }
       >
-        <Investasi_ViewDetailBerita dataBerita={data} />
+        <Investasi_ViewDetailBerita />
       </UIGlobal_LayoutTamplate>
 
       <UIGlobal_DrawerCustom
@@ -100,6 +146,8 @@ export function Investasi_UiDetailBerita({ dataBerita }: { dataBerita: any }) {
         }
         buttonKanan={
           <Button
+            loaderPosition="center"
+            loading={isLoading}
             radius="xl"
             color="red"
             onClick={() => {

src/app_modules/investasi/_ui/detail/ui_daftar_berita.tsx

@@ -6,16 +6,12 @@ import {
 } from "@/app_modules/_global/ui";
 import { Investasi_ViewDaftarBerita } from "../../_view";
 
-export function Investasi_UiDaftarBerita({
-  dataBerita,
-}: {
-  dataBerita: any[];
-}) {
+export function Investasi_UiDaftarBerita() {
   return (
     <UIGlobal_LayoutTamplate
       header={<UIGlobal_LayoutHeaderTamplate title="Daftar Berita" />}
     >
-      <Investasi_ViewDaftarBerita dataBerita={dataBerita} />
+      <Investasi_ViewDaftarBerita />
     </UIGlobal_LayoutTamplate>
   );
 }

src/app_modules/investasi/_ui/detail/ui_rekap_berita.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 import {
   UIGlobal_Drawer,
   UIGlobal_LayoutHeaderTamplate,
@@ -7,19 +8,13 @@ import {
 } from "@/app_modules/_global/ui";
 import { ActionIcon } from "@mantine/core";
 import { IconCirclePlus, IconDotsVertical } from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import { useState } from "react";
 import { Investasi_ViewRekapBerita } from "../../_view";
-import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 
-export function Investasi_UiRekapBerita({
-  investasiId,
-  dataBerita,
-}: {
-  investasiId: string;
-  dataBerita: any[]
-}) {
-  const router = useRouter();
+export function Investasi_UiRekapBerita() {
+  const params = useParams<{ id: string }>();
+  const investasiId = params.id;
   const [openDrawer, setOpenDrawer] = useState(false);
 
   const listPage = [
@@ -32,32 +27,32 @@ export function Investasi_UiRekapBerita({
   ];
 
   return (
-    <UIGlobal_LayoutTamplate
-      header={
-        <UIGlobal_LayoutHeaderTamplate
-          title="Rekap Berita"
-          customButtonRight={
-            <ActionIcon
-              variant="transparent"
-              onClick={() => {
-                setOpenDrawer(true);
-              }}
-            >
-              <IconDotsVertical color="white" />
-            </ActionIcon>
-          }
-        />
-      }
-    >
-
-
-      <Investasi_ViewRekapBerita dataBerita={dataBerita} />
+    <>
+      <UIGlobal_LayoutTamplate
+        header={
+          <UIGlobal_LayoutHeaderTamplate
+            title="Rekap Berita"
+            customButtonRight={
+              <ActionIcon
+                variant="transparent"
+                onClick={() => {
+                  setOpenDrawer(true);
+                }}
+              >
+                <IconDotsVertical color="white" />
+              </ActionIcon>
+            }
+          />
+        }
+      >
+        <Investasi_ViewRekapBerita />
+      </UIGlobal_LayoutTamplate>
 
       <UIGlobal_Drawer
         opened={openDrawer}
         close={() => setOpenDrawer(false)}
         component={listPage}
       />
-    </UIGlobal_LayoutTamplate>
+    </>
   );
 }

src/app_modules/investasi/_view/create/view_create_berita.tsx

@@ -1,39 +1,37 @@
-import { AccentColor, MainColor } from "@/app_modules/_global/color";
-import {
-    ComponentGlobal_BoxInformation,
-    ComponentGlobal_BoxUploadImage,
-    ComponentGlobal_InputCountDown,
-} from "@/app_modules/_global/component";
-import {
-    ComponentGlobal_NotifikasiBerhasil,
-    ComponentGlobal_NotifikasiGagal,
-    ComponentGlobal_NotifikasiPeringatan,
-} from "@/app_modules/_global/notif_global";
-import {
-    AspectRatio,
-    Button,
-    Center,
-    FileButton,
-    Image,
-    Stack,
-    Text,
-    TextInput,
-    Textarea,
-} from "@mantine/core";
-import { IconCamera, IconUpload } from "@tabler/icons-react";
-
 import { DIRECTORY_ID } from "@/app/lib";
+import { MainColor } from "@/app_modules/_global/color";
+import {
+  ComponentGlobal_BoxInformation,
+  ComponentGlobal_BoxUploadImage,
+  ComponentGlobal_ButtonUploadFileImage,
+  ComponentGlobal_InputCountDown,
+} from "@/app_modules/_global/component";
 import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+import {
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiGagal,
+  ComponentGlobal_NotifikasiPeringatan,
+} from "@/app_modules/_global/notif_global";
+import { clientLogger } from "@/util/clientLogger";
+import {
+  AspectRatio,
+  Button,
+  Center,
+  Image,
+  Stack,
+  TextInput,
+  Textarea,
+} from "@mantine/core";
 import { Prisma } from "@prisma/client";
-import { useRouter } from "next/navigation";
+import { IconPhoto } from "@tabler/icons-react";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import { investasi_funCreateBerita } from "../../_fun";
 
-export function Investasi_ViewCreateBerita({
-  investasiId,
-}: {
-  investasiId: string;
-}) {
+export function Investasi_ViewCreateBerita() {
+  const params = useParams<{ id: string }>();
+  const investasiId = params.id;
+
   const router = useRouter();
   const [file, setFile] = useState<File | null>(null);
   const [img, setImg] = useState<any | null>();
@@ -48,9 +46,6 @@ export function Investasi_ViewCreateBerita({
   });
 
   async function onCreate() {
-    if (data.data.title == "" || data.data.deskripsi == "")
-      return ComponentGlobal_NotifikasiPeringatan("Lengkapi data");
-
     try {
       setIsLoading(true);
       if (file != null) {
@@ -59,32 +54,39 @@ export function Investasi_ViewCreateBerita({
           dirId: DIRECTORY_ID.investasi_berita,
         });
 
-        if (!uploadFile.success)
-          return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+        if (!uploadFile.success) {
+          ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+          return;
+        }
 
         const createWithFile = await investasi_funCreateBerita({
           data: data.data as any,
           fileId: uploadFile.data.id,
         });
 
-        createWithFile.status === 201
-          ? (ComponentGlobal_NotifikasiBerhasil(createWithFile.message),
-            router.back())
-          : ComponentGlobal_NotifikasiGagal(createWithFile.message);
+        if (createWithFile.status === 201) {
+          ComponentGlobal_NotifikasiBerhasil(createWithFile.message);
+          router.back();
+        } else {
+          setIsLoading(false);
+          ComponentGlobal_NotifikasiGagal(createWithFile.message);
+        }
       } else {
         const createNoFile = await investasi_funCreateBerita({
           data: data.data as any,
         });
 
-        createNoFile.status === 201
-          ? (ComponentGlobal_NotifikasiBerhasil(createNoFile.message),
-            router.back())
-          : ComponentGlobal_NotifikasiGagal(createNoFile.message);
+        if (createNoFile.status === 201) {
+          ComponentGlobal_NotifikasiBerhasil(createNoFile.message);
+          router.back();
+        } else {
+          setIsLoading(false);
+          ComponentGlobal_NotifikasiGagal(createNoFile.message);
+        }
       }
     } catch (error) {
-      console.log(error);
-    } finally {
       setIsLoading(false);
+      clientLogger.error("Error create news", error);
     }
   }
 
@@ -106,43 +108,16 @@ export function Investasi_ViewCreateBerita({
               </AspectRatio>
             ) : (
               <Stack justify="center" align="center" h={"100%"}>
-                <IconUpload color="white" />
-                <Text fz={10} fs={"italic"} c={"white"} fw={"bold"}>
-                  Upload Gambar
-                </Text>
+                <IconPhoto size={100} />
               </Stack>
             )}
           </ComponentGlobal_BoxUploadImage>
 
           <Center>
-            <FileButton
-              onChange={async (files: any | null) => {
-                try {
-                  const buffer = URL.createObjectURL(
-                    new Blob([new Uint8Array(await files.arrayBuffer())])
-                  );
-                  setImg(buffer);
-                  setFile(files);
-                } catch (error) {
-                  console.log(error);
-                }
-              }}
-              accept="image/png,image/jpeg"
-            >
-              {(props) => (
-                <Button
-                  {...props}
-                  radius={"xl"}
-                  w={100}
-                  style={{
-                    backgroundColor: MainColor.yellow,
-                    border: `1px solid ${AccentColor.yellow}`,
-                  }}
-                >
-                  <IconCamera color="black" />
-                </Button>
-              )}
-            </FileButton>
+            <ComponentGlobal_ButtonUploadFileImage
+              onSetFile={setFile}
+              onSetImage={setImg}
+            />
           </Center>
         </Stack>
 
@@ -187,6 +162,10 @@ export function Investasi_ViewCreateBerita({
         </Stack>
 
         <Button
+          disabled={data.data.title === "" || data.data.deskripsi === ""}
+          style={{
+            transition: "all 0.5s",
+          }}
           loaderPosition="center"
           loading={isLoading}
           my={"md"}

src/app_modules/investasi/_view/detail/view_berita.tsx

@@ -3,29 +3,55 @@ import {
   ComponentGlobal_LoadImageLandscape,
 } from "@/app_modules/_global/component";
 import { Stack, Text, Title } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import { Prisma } from "@prisma/client";
+import { useParams } from "next/navigation";
 import { useState } from "react";
+import { apiGetBeritaInvestasiById } from "../../_lib/api_interface";
+import { clientLogger } from "@/util/clientLogger";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
-export function Investasi_ViewDetailBerita({
-  dataBerita,
-}: {
-  dataBerita: any;
-}) {
-  const [data, setData] =
-    useState<Prisma.BeritaInvestasiGetPayload<{}>>(dataBerita);
+type MODEL_DATA = Prisma.BeritaInvestasiGetPayload<{}>;
+
+export function Investasi_ViewDetailBerita() {
+  const params = useParams<{ id: string }>();
+  const id = params.id;
+
+  const [data, setData] = useState<MODEL_DATA | null>(null);
+
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetBeritaInvestasiById({
+        id: id,
+      });
+
+      if (respone) {
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get detail berita", error);
+    }
+  }
+
+  if (!data) {
+    return <CustomSkeleton height={300} width={"100%"} />;
+  }
 
   return (
     <>
       <ComponentGlobal_CardStyles>
         <Stack>
-          {data.imageId == null ? (
-            ""
-          ) : (
-            <ComponentGlobal_LoadImageLandscape fileId={data.imageId} />
+          {data.imagesId && (
+            <ComponentGlobal_LoadImageLandscape
+              fileId={data.imageId as string}
+            />
           )}
 
           <Title order={4} align="center">
-            {" "}
             {data.title}
           </Title>
 

src/app_modules/investasi/_view/detail/view_daftar_berita.tsx

@@ -3,43 +3,104 @@ import {
   ComponentGlobal_CardStyles,
   ComponentGlobal_CardLoadingOverlay,
 } from "@/app_modules/_global/component";
-import { Box, Title } from "@mantine/core";
-import { useRouter } from "next/navigation";
+import { clientLogger } from "@/util/clientLogger";
+import { Box, Center, Title } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
+import { Investasi_SkeletonListDokumen } from "../../_component/skeleton_view";
+import { apiGetBeritaInvestasiById } from "../../_lib/api_interface";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { ScrollOnly } from "next-scroll-loader";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import _ from "lodash";
+
+export function Investasi_ViewDaftarBerita() {
+  const params = useParams<{ id: string }>();
+  const investasiId = params.id;
 
-export function Investasi_ViewDaftarBerita({
-  dataBerita,
-}: {
-  dataBerita: any[];
-}) {
   const router = useRouter();
-  const [data, setData] = useState(dataBerita);
+  const [data, setData] = useState<any[] | null>(null);
+  const [activePage, setActivePage] = useState(1);
+
   const [visible, setVisible] = useState(false);
   const [dataId, setDataId] = useState("");
 
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetBeritaInvestasiById({
+        id: investasiId,
+        kategori: "get-all",
+        page: `${activePage}`,
+      });
+
+      if (respone) {
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get daftar berita", error);
+    }
+  }
+
+  if (data === null) {
+    return <Investasi_SkeletonListDokumen />;
+  }
+
   return (
     <>
-      <Box>
-        {data.map((e, i) => (
-          <ComponentGlobal_CardStyles
-            key={i}
-            onClickHandler={() => {
-              router.push(NEW_RouterInvestasi.berita({ id: e.id }), {
-                scroll: false,
-              });
-              setVisible(true);
-              setDataId(e.id);
+      {_.isEmpty(data) ? (
+        <ComponentGlobal_IsEmptyData />
+      ) : (
+        <Box>
+          <ScrollOnly
+            height="90vh"
+            renderLoading={() => (
+              <Center>
+                <ComponentGlobal_Loader size={25} />
+              </Center>
+            )}
+            data={data}
+            setData={setData as any}
+            moreData={async () => {
+              try {
+                const respone = await apiGetBeritaInvestasiById({
+                  id: investasiId,
+                  kategori: "get-all",
+                  page: `${activePage + 1}`,
+                });
+
+                if (respone.success) {
+                  setActivePage((val) => val + 1);
+
+                  return respone.data;
+                }
+              } catch (error) {
+                clientLogger.error("Error load data dokumen:", error);
+              }
             }}
           >
-            <Title order={6} lineClamp={1}>
-              {e.title}
-            </Title>
-            {visible && dataId === e.id && (
-              <ComponentGlobal_CardLoadingOverlay />
+            {(item) => (
+              <ComponentGlobal_CardStyles
+                onClickHandler={() => {
+                  router.push(NEW_RouterInvestasi.berita({ id: item.id }), {
+                    scroll: false,
+                  });
+                  setVisible(true);
+                }}
+              >
+                <Title order={6} lineClamp={1}>
+                  {item.title}
+                </Title>
+                {visible && <ComponentGlobal_CardLoadingOverlay />}
+              </ComponentGlobal_CardStyles>
             )}
-          </ComponentGlobal_CardStyles>
-        ))}
-      </Box>
+          </ScrollOnly>
+        </Box>
+      )}
     </>
   );
 }

src/app_modules/investasi/_view/detail/view_rekap_berita.tsx

@@ -1,45 +1,108 @@
+"use client";
 import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 import {
   ComponentGlobal_CardLoadingOverlay,
   ComponentGlobal_CardStyles,
 } from "@/app_modules/_global/component";
-import { Box, Group, Title } from "@mantine/core";
-import { useRouter } from "next/navigation";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { clientLogger } from "@/util/clientLogger";
+import { Box, Center, Title } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
+import { Investasi_SkeletonListDokumen } from "../../_component/skeleton_view";
+import { apiGetBeritaInvestasiById } from "../../_lib/api_interface";
+
+export function Investasi_ViewRekapBerita() {
+  const params = useParams<{ id: string }>();
+  const investasiId = params.id;
 
-export function Investasi_ViewRekapBerita({
-  dataBerita,
-}: {
-  dataBerita: any[];
-}) {
   const router = useRouter();
-  const [data, setData] = useState(dataBerita);
+  const [data, setData] = useState<any[] | null>(null);
+  const [activePage, setActivePage] = useState(1);
   const [visible, setVisible] = useState(false);
-  const [dataId, setDataId] = useState("");
+
+
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetBeritaInvestasiById({
+        id: investasiId,
+        kategori: "get-all",
+        page: `${activePage}`,
+      });
+
+      if (respone) {
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data berita", error);
+    }
+  }
+
+  if (data === null) {
+    return <Investasi_SkeletonListDokumen />;
+  }
 
   return (
     <>
-      <Box>
-        {data.map((e, i) => (
-          <ComponentGlobal_CardStyles
-            key={i}
-            onClickHandler={() => {
-              router.push(NEW_RouterInvestasi.berita({ id: e.id }), {
-                scroll: false,
-              });
-              setVisible(true);
-              setDataId(e.id);
+      {_.isEmpty(data) ? (
+        <ComponentGlobal_IsEmptyData />
+      ) : (
+        <Box>
+          <ScrollOnly
+            height="90vh"
+            renderLoading={() => (
+              <Center>
+                <ComponentGlobal_Loader size={25} />
+              </Center>
+            )}
+            data={data}
+            setData={setData as any}
+            moreData={async () => {
+              try {
+                const respone = await apiGetBeritaInvestasiById({
+                  id: investasiId,
+                  kategori: "get-all",
+                  page: `${activePage + 1}`,
+                });
+
+                if (respone.success) {
+                  setActivePage((val) => val + 1);
+
+                  return respone.data;
+                }
+              } catch (error) {
+                clientLogger.error("Error load data dokumen:", error);
+              }
             }}
           >
-            <Title order={6} lineClamp={1}>
-              {e.title}
-            </Title>
-            {visible && dataId === e.id && (
-              <ComponentGlobal_CardLoadingOverlay />
+            {(item) => (
+              <ComponentGlobal_CardStyles
+                onClickHandler={() => {
+                  router.push(NEW_RouterInvestasi.berita({ id: item.id }), {
+                    scroll: false,
+                  });
+                  setVisible(true);
+                }}
+              >
+                <Title order={6} lineClamp={1}>
+                  {item.title}
+                </Title>
+                {visible && (
+                  <ComponentGlobal_CardLoadingOverlay />
+                )}
+              </ComponentGlobal_CardStyles>
             )}
-          </ComponentGlobal_CardStyles>
-        ))}
-      </Box>
+          </ScrollOnly>
+        </Box>
+      )}
     </>
   );
 }

src/middleware.ts

@@ -22,7 +22,6 @@ const middlewareConfig: MiddlewareConfig = {
   // registarasiPath: "/register",
   userPath: "/dev/home",
   publicRoutes: [
-    
     // API
     "/",
     "/api/voting/*",
@@ -35,7 +34,7 @@ const middlewareConfig: MiddlewareConfig = {
     "/api/event/*",
     // "/api/image/*",
     // "/api/user",
-    // "/api/new/*",
+    "/api/new/*",
     // Akses awal
     "/api/get-cookie",
     "/api/user/activation",
@@ -104,7 +103,7 @@ export const middleware = async (req: NextRequest) => {
 
   if (
     isPublicRoute &&
-    pathname !== loginPath 
+    pathname !== loginPath
     // &&
     // pathname !== validasiPath &&
     // pathname !== registarasiPath