Fix notifikasi server action to API

src/app/api/collaboration/master/route.ts

@@ -0,0 +1,20 @@
+import { prisma } from "@/app/lib";
+import backendLogger from "@/util/backendLogger";
+import { NextResponse } from "next/server";
+
+export const dynamic = "force-dynamic";
+export async function GET(request: Request) {
+  try {
+    const data = await prisma.projectCollaborationMaster_Industri.findMany({});
+    return NextResponse.json(
+      { success: true, message: "Berhasil mendapatkan data", data: data },
+      { status: 200 }
+    );
+  } catch (error) {
+    backendLogger.error("Master Collaboration:=========>", error);
+    return NextResponse.json(
+      { success: false, message: "Gagal mendapatkan data" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/notifikasi/count/route.ts

@@ -0,0 +1,28 @@
+import { prisma } from "@/app/lib";
+import { newFunGetUserId } from "@/app/lib/new_fun_user_id";
+import backendLogger from "@/util/backendLogger";
+import { NextResponse } from "next/server";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(request: Request) {
+  try {
+    const userLoginId = await newFunGetUserId();
+
+    const count = await prisma.notifikasi.findMany({
+      where: {
+        userId: userLoginId,
+        isRead: false,
+        userRoleId: "1",
+      },
+    });
+
+    return NextResponse.json({ success: true, data: count.length });
+  } catch (error) {
+    backendLogger.error("Gagal mendapatkan data count notifikasi", error);
+    return NextResponse.json(
+      { success: false, message: "Gagal mendapatkan data" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/notifikasi/get-all-by-category/route.ts

@@ -7,37 +7,34 @@ import { NextResponse } from "next/server";
 export const dynamic = "force-dynamic";
 
 export async function GET(request: Request) {
-  if (request.method === "GET") {
+  try {
-    try {
+    let fixData;
-      const { searchParams } = new URL(request.url);
+    const { searchParams } = new URL(request.url);
-      const category = searchParams.get("category") as ICategoryapp;
+    const category = searchParams.get("category") as ICategoryapp;
-      const page = searchParams.get("page");
+    const page = searchParams.get("page");
 
-      const userLoginId = await newFunGetUserId();
+    const userLoginId = await newFunGetUserId();
-      const fixPage = _.toNumber(page);
+    const fixPage = _.toNumber(page);
-      const takeData = 10;
+    const takeData = 10;
-      const skipData = fixPage * takeData - takeData;
+    const skipData = fixPage * takeData - takeData;
 
-      if (category === "Semua") {
+    if (category === "Semua") {
-        const data = await prisma.notifikasi.findMany({
+      fixData = await prisma.notifikasi.findMany({
-          take: takeData,
+        take: takeData,
-          skip: skipData,
+        skip: skipData,
-          orderBy: [
+        orderBy: [
-            {
+          {
-              isRead: "asc",
+            isRead: "asc",
-            },
-            { createdAt: "desc" },
-          ],
-          where: {
-            userId: userLoginId,
-            userRoleId: "1",
           },
-        });
+          { createdAt: "desc" },
-
+        ],
-        return NextResponse.json({ success: true, data });
+        where: {
-      }
+          userId: userLoginId,
-
+          userRoleId: "1",
-      const allData = await prisma.notifikasi.findMany({
+        },
+      });
+    } else {
+      fixData = await prisma.notifikasi.findMany({
         take: takeData,
         skip: skipData,
         orderBy: [
@@ -52,12 +49,17 @@ export async function GET(request: Request) {
           kategoriApp: _.upperCase(category),
         },
       });
-
-      return NextResponse.json({ success: true, data: allData });
-    } catch (error) {
-      backendLogger.error("Error get data notifikasi: " + error);
     }
-  } else {
+
-    return NextResponse.json({ success: false, message: "Method not allowed" });
+    return NextResponse.json(
+      { success: true, data: fixData, message: "Berhasil mendapatkan data" },
+      { status: 200 }
+    );
+  } catch (error) {
+    backendLogger.error("Error get data notifikasi: " + error);
+    return NextResponse.json(
+      { success: false, message: "Gagal mendapatkan data" },
+      { status: 500 }
+    );
   }
 }

src/app/api/notifikasi/master/route.ts

@@ -0,0 +1,35 @@
+import { prisma } from "@/app/lib";
+import backendLogger from "@/util/backendLogger";
+import { NextResponse } from "next/server";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(request: Request) {
+  try {
+    const data = await prisma.masterKategoriApp.findMany({
+      where: {
+        isActive: true,
+      },
+    });
+
+    data.unshift({
+      id: "0",
+      isActive: true,
+      createdAt: new Date(),
+      updatedAt: new Date(),
+      name: "Semua",
+      value: null,
+    });
+
+    return NextResponse.json(
+      { success: true, data, message: "Berhasil mendapatkan data" },
+      { status: 200 }
+    );
+  } catch (error) {
+    backendLogger.error("Master Notifikasi:", error);
+    return NextResponse.json(
+      { success: false, message: "Gagal mendapatkan data" },
+      { status: 500 }
+    );
+  }
+}

src/app/dev/(user)/home/page.tsx

@@ -15,7 +15,7 @@ export default async function PageHome() {
         dataJob={dataJob as any}
         countNotifikasi={countNotifikasi}
       /> */}
-      <HomeViewNew countNotifikasi={countNotifikasi} />
+      <HomeViewNew countNotifikasi={countNotifikasi}/>
     </>
   );
 }

src/app/dev/colab/create/page.tsx

@@ -1,12 +1,9 @@
 import { Colab_Create } from "@/app_modules/colab";
-import colab_funGetMasterIndustri from "@/app_modules/colab/fun/master/fun_get_master_industri";
 
 export default async function Page() {
-  const listIndustri = await colab_funGetMasterIndustri();
-
   return (
     <>
-      <Colab_Create listIndustri={listIndustri as any} />
+      <Colab_Create />
     </>
   );
 }

src/app/dev/notifikasi/collaboration/page.tsx

@@ -1,15 +1,9 @@
-import { Notifikasi_UiCollaboration } from "@/app_modules/notifikasi/_ui";
+import { Notifikasi_UiMain } from "@/app_modules/notifikasi/_ui";
-import notifikasi_getByUserId from "@/app_modules/notifikasi/fun/get/get_notifiaksi_by_id";
 
 export default async function Page() {
-  const listNotifikasi = await notifikasi_getByUserId({
-    page: 1,
-    kategoriApp: "Collaboration",
-  });
-
   return (
     <>
-      <Notifikasi_UiCollaboration listNotifikasi={listNotifikasi} />
+      <Notifikasi_UiMain />
     </>
   );
 }

src/app/dev/notifikasi/donasi/page.tsx

@@ -1,15 +1,9 @@
-import { Notifikasi_UiDonasi } from "@/app_modules/notifikasi/_ui";
+import { Notifikasi_UiMain } from "@/app_modules/notifikasi/_ui";
-import notifikasi_getByUserId from "@/app_modules/notifikasi/fun/get/get_notifiaksi_by_id";
 
 export default async function Page() {
-  const listNotifikasi = await notifikasi_getByUserId({
-    page: 1,
-    kategoriApp: "Donasi",
-  });
-
   return (
     <>
-      <Notifikasi_UiDonasi listNotifikasi={listNotifikasi} />
+      <Notifikasi_UiMain />
     </>
   );
 }

src/app/dev/notifikasi/event/page.tsx

@@ -1,11 +1,9 @@
-import { Notifikasi_UiEvent } from "@/app_modules/notifikasi/_ui";
+import Notifikasi_UiMain from "@/app_modules/notifikasi/_ui/ui_notifikasi";
 
 export default async function Page() {
-  // 
-
   return (
     <>
-      <Notifikasi_UiEvent />
+      <Notifikasi_UiMain />
     </>
   );
 }

src/app/dev/notifikasi/forum/page.tsx

@@ -1,15 +1,9 @@
-import { Notifikasi_UiForum } from "@/app_modules/notifikasi/_ui";
+import { Notifikasi_UiMain } from "@/app_modules/notifikasi/_ui";
-import notifikasi_getByUserId from "@/app_modules/notifikasi/fun/get/get_notifiaksi_by_id";
 
 export default async function Page() {
-  const listNotifikasi = await notifikasi_getByUserId({
-    page: 1,
-    kategoriApp: "Forum",
-  });
-
   return (
     <>
-      <Notifikasi_UiForum listNotifikasi={listNotifikasi} />
+      <Notifikasi_UiMain />
     </>
   );
 }

src/app/dev/notifikasi/investasi/page.tsx

@@ -1,15 +1,9 @@
-import { Notifikasi_UiDonasi, Notifikasi_UiInvestasi } from "@/app_modules/notifikasi/_ui";
+import { Notifikasi_UiMain } from "@/app_modules/notifikasi/_ui";
-import notifikasi_getByUserId from "@/app_modules/notifikasi/fun/get/get_notifiaksi_by_id";
 
 export default async function Page() {
-  const listNotifikasi = await notifikasi_getByUserId({
-    page: 1,
-    kategoriApp: "Investasi",
-  });
-
   return (
     <>
-      <Notifikasi_UiInvestasi listNotifikasi={listNotifikasi} />
+      <Notifikasi_UiMain />
     </>
   );
 }

src/app/dev/notifikasi/job/page.tsx

@@ -1,15 +1,9 @@
-import { Notifikasi_UiJob } from "@/app_modules/notifikasi/_ui";
+import { Notifikasi_UiMain } from "@/app_modules/notifikasi/_ui";
-import notifikasi_getByUserId from "@/app_modules/notifikasi/fun/get/get_notifiaksi_by_id";
 
 export default async function Page() {
-  const listNotifikasi = await notifikasi_getByUserId({
-    page: 1,
-    kategoriApp: "Job",
-  });
-
   return (
     <>
-      <Notifikasi_UiJob listNotifikasi={listNotifikasi} />
+      <Notifikasi_UiMain />
     </>
   );
 }

src/app/dev/notifikasi/layout.tsx

@@ -1,19 +1,15 @@
 import { UIGlobal_LayoutHeaderTamplate } from "@/app_modules/_global/ui";
 import { Notifikasi_UiNewLayout } from "@/app_modules/notifikasi/_ui";
-import { notifikasi_funGetKategoriApp } from "@/app_modules/notifikasi/fun/get/fun_get_kategori_app";
 
 export default async function Layout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const masterKategori = await notifikasi_funGetKategoriApp();
-
   return (
     <>
       <Notifikasi_UiNewLayout
         header={<UIGlobal_LayoutHeaderTamplate title="Notifikasi" />}
-        masterKategori={masterKategori}
       >
         {children}
       </Notifikasi_UiNewLayout>

src/app/dev/notifikasi/semua/page.tsx

@@ -1,9 +1,9 @@
-import { Notifikasi_UiAll } from "@/app_modules/notifikasi/_ui";
+import { Notifikasi_UiMain } from "@/app_modules/notifikasi/_ui";
 
 export default async function Page() {
   return (
     <>
-      <Notifikasi_UiAll />
+      <Notifikasi_UiMain />
     </>
   );
 }

src/app/dev/notifikasi/voting/page.tsx

@@ -1,15 +1,9 @@
-import { Notifikasi_UiVoting } from "@/app_modules/notifikasi/_ui";
+import { Notifikasi_UiMain } from "@/app_modules/notifikasi/_ui";
-import notifikasi_getByUserId from "@/app_modules/notifikasi/fun/get/get_notifiaksi_by_id";
 
 export default async function Page() {
-   const listNotifikasi = await notifikasi_getByUserId({
-     page: 1,
-     kategoriApp: "Voting",
-   });
-
   return (
     <>
-      <Notifikasi_UiVoting listNotifikasi={listNotifikasi} />
+      <Notifikasi_UiMain />
     </>
   );
 }

src/app/lib/api_user_router/route_api_notifikasi.ts

@@ -8,4 +8,8 @@ export const API_RouteNotifikasi = {
     category: ICategoryapp;
     page: number;
   }) => `/api/notifikasi/get-all-by-category?category=${category}&page=${page}`,
+
+  get_master_kategori: () => `/api/notifikasi/master`,
+
+  get_count_by_id: () => `/api/notifikasi/count`,
 };

src/app/lib/global_state.ts

@@ -42,7 +42,7 @@ export type IRealtimeData = {
 export const gs_realtimeData = atom<IRealtimeData | null>(null);
 export const gs_admin_ntf = atom<number>(0);
 export const gs_user_ntf = atom<number>(0);
-export const gs_count_ntf = atom<number>(0);
+export const gs_count_ntf = atom<number | null>(null);
 
 // job
 export const gs_adminJob_triggerReview = atom<boolean>(false);

src/app/lib/prisma.ts

@@ -25,6 +25,6 @@ process.on("SIGINT", async () => {
   process.exit(0);
 });
 
-// console.log("==> Test prisma");
+console.log("==> Test prisma");
 
 export default prisma;

src/app_modules/colab/component/index.ts

@@ -0,0 +1,3 @@
+import { Collaboration_SkeletonCreate } from "./skeleton_view";
+
+export { Collaboration_SkeletonCreate };

src/app_modules/colab/component/lib/api_collaboration.ts

@@ -0,0 +1,4 @@
+export async function apiGetMasterCollaboration() {
+  const data = await fetch(`/api/collaboration/master`);
+  return await data.json().catch(() => null);
+}

src/app_modules/colab/component/skeleton_view.tsx

@@ -0,0 +1,28 @@
+import { Skeleton, Stack } from "@mantine/core";
+
+export function Collaboration_SkeletonCreate() {
+  return (
+    <>
+      <Stack px={"xl"} spacing={"lg"}>
+        <Stack spacing={"xs"}>
+          <Skeleton height={10} width={50} />
+          <Skeleton height={40} />
+        </Stack>
+        <Stack spacing={"xs"}>
+          <Skeleton height={10} width={50} />
+          <Skeleton height={40} />
+        </Stack>
+        <Stack spacing={"xs"}>
+          <Skeleton height={10} width={50} />
+          <Skeleton height={130} />
+        </Stack>
+        <Stack spacing={"xs"}>
+          <Skeleton height={10} width={50} />
+          <Skeleton height={130} />
+        </Stack>
+
+        <Skeleton mt={50} height={40} radius={"xl"} />
+      </Stack>
+    </>
+  );
+}

src/app_modules/colab/create/index.tsx

@@ -5,7 +5,15 @@ import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/inpu
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import { Button, Select, Stack, TextInput, Textarea } from "@mantine/core";
+import {
+  Button,
+  Center,
+  Select,
+  Stack,
+  TextInput,
+  Textarea,
+  Loader,
+} from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import colab_funCreateProyek from "../fun/create/fun_create_proyek";
@@ -13,12 +21,12 @@ import { MODEL_COLLABORATION_MASTER } from "../model/interface";
 import mqtt_client from "@/util/mqtt_client";
 import { useHookstate } from "@hookstate/core";
 import { useGsCollabCreate } from "../global_state/state";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetMasterCollaboration } from "../component/lib/api_collaboration";
+import { clientLogger } from "@/util/clientLogger";
+import { Collaboration_SkeletonCreate } from "../component";
 
-export default function Colab_Create({
+export default function Colab_Create() {
-  listIndustri,
-}: {
-  listIndustri: MODEL_COLLABORATION_MASTER[];
-}) {
   const [value, setValue] = useState({
     title: "",
     lokasi: "",
@@ -27,9 +35,38 @@ export default function Colab_Create({
     projectCollaborationMaster_IndustriId: 0,
     // jumlah_partisipan: 0,
   });
+
+  const [listIndustri, setListIndustri] = useState<
+    MODEL_COLLABORATION_MASTER[] | null
+  >(null);
+
+  useShallowEffect(() => {
+    onLoadMaster();
+  }, []);
+
+  async function onLoadMaster() {
+    try {
+      const respone = await apiGetMasterCollaboration();
+      if (respone.success) {
+        setListIndustri(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get master collaboration", error);
+    }
+  }
+
+  
+  if (listIndustri == null) {
+    return (
+      <>
+        <Collaboration_SkeletonCreate />
+      </>
+    );
+  }
+
   return (
     <>
-      <Stack px={"xl"} py={"md"}>
+      <Stack px={"xl"} pb={"md"}>
         <TextInput
           maxLength={100}
           styles={{
@@ -66,7 +103,7 @@ export default function Colab_Create({
           }}
         />
 
-        <Select
+        {/* <Select
           styles={{
             label: {
               color: "white",
@@ -85,7 +122,7 @@ export default function Colab_Create({
               projectCollaborationMaster_IndustriId: val as any,
             });
           }}
-        />
+        /> */}
 
         {/* <TextInput
           description={

src/app_modules/home/component/body_home.tsx

@@ -1,3 +1,4 @@
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import { AccentColor, MainColor } from "@/app_modules/_global/color";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
@@ -19,7 +20,6 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { apiGetDataHome } from "../fun/get/api_home";
 import { listMenuHomeBody, menuHomeJob } from "./list_menu_home";
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 
 export default function BodyHome() {
   const router = useRouter();
@@ -83,12 +83,19 @@ export default function BodyHome() {
               }}
               onClick={() => {
                 if (
-                  dataUser.profile === undefined ||
+                  dataUser.profile == undefined ||
-                  dataUser?.profile === null
+                  dataUser?.profile == null ||
+                  dataJob.length == undefined ||
+                  dataJob.length == null
+                ) {
+                  return null;
+                } else if (
+                  dataUser.profile == undefined ||
+                  dataUser?.profile == null
                 ) {
                   router.push(RouterProfile.create, { scroll: false });
                 } else {
-                  if (e.link === "") {
+                  if (e.link == "") {
                     return ComponentGlobal_NotifikasiPeringatan(
                       "Cooming Soon !!"
                     );
@@ -102,11 +109,11 @@ export default function BodyHome() {
                 <ActionIcon
                   size={50}
                   variant="transparent"
-                  c={e.link === "" ? "gray.3" : "white"}
+                  c={e.link == "" ? "gray.3" : "white"}
                 >
                   {e.icon}
                 </ActionIcon>
-                <Text c={e.link === "" ? "gray.3" : "white"} fz={"xs"}>
+                <Text c={e.link == "" ? "gray.3" : "white"} fz={"xs"}>
                   {e.name}
                 </Text>
               </Stack>
@@ -127,12 +134,19 @@ export default function BodyHome() {
           <Stack
             onClick={() => {
               if (
-                dataUser.profile === undefined ||
+                dataUser.profile == undefined ||
-                dataUser?.profile === null
+                dataUser?.profile == null ||
+                dataJob.length == undefined ||
+                dataJob.length == null
+              ) {
+                return null;
+              } else if (
+                dataUser.profile == undefined ||
+                dataUser?.profile == null
               ) {
                 router.push(RouterProfile.create, { scroll: false });
               } else {
-                if (menuHomeJob.link === "") {
+                if (menuHomeJob.link == "") {
                   return ComponentGlobal_NotifikasiPeringatan(
                     "Cooming Soon !!"
                   );
@@ -146,11 +160,11 @@ export default function BodyHome() {
               <ActionIcon
                 variant="transparent"
                 size={40}
-                c={menuHomeJob.link === "" ? "gray.3" : "white"}
+                c={menuHomeJob.link == "" ? "gray.3" : "white"}
               >
                 {menuHomeJob.icon}
               </ActionIcon>
-              <Text c={menuHomeJob.link === "" ? "gray.3" : "white"}>
+              <Text c={menuHomeJob.link == "" ? "gray.3" : "white"}>
                 {menuHomeJob.name}
               </Text>
             </Group>

src/app_modules/home/component/footer_home.tsx

@@ -56,6 +56,11 @@ export default function FooterHome() {
                 if (
                   dataUser.profile === undefined ||
                   dataUser?.profile === null
+                ) {
+                  return null;
+                } else if (
+                  dataUser.profile === undefined ||
+                  dataUser?.profile === null
                 ) {
                   router.push(RouterProfile.create, { scroll: false });
                 } else {

src/app_modules/home/view_home_new.tsx

@@ -137,3 +137,137 @@ export default function HomeViewNew({
     </>
   );
 }
+
+// "use client";
+// import { API_RouteNotifikasi } from "@/app/lib/api_user_router/route_api_notifikasi";
+// import { gs_count_ntf, gs_user_ntf } from "@/app/lib/global_state";
+// import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+// import { RouterNotifikasi } from "@/app/lib/router_hipmi/router_notifikasi";
+// import { RouterUserSearch } from "@/app/lib/router_hipmi/router_user_search";
+// import { ActionIcon, Indicator, Text } from "@mantine/core";
+// import { useShallowEffect } from "@mantine/hooks";
+// import { IconBell, IconUserSearch } from "@tabler/icons-react";
+// import { useAtom } from "jotai";
+// import { useRouter } from "next/navigation";
+// import { useState } from "react";
+// import { MainColor } from "../_global/color";
+// import UIGlobal_LayoutHeaderTamplate from "../_global/ui/ui_header_tamplate";
+// import UIGlobal_LayoutTamplate from "../_global/ui/ui_layout_tamplate";
+// import { gs_notifikasi_kategori_app } from "../notifikasi/lib";
+// import BodyHome from "./component/body_home";
+// import FooterHome from "./component/footer_home";
+// import { apiGetDataHome } from "./fun/get/api_home";
+
+// export default function HomeViewNew() {
+//   const [countNtf, setCountNtf] = useAtom(gs_count_ntf);
+//   const [newUserNtf, setNewUserNtf] = useAtom(gs_user_ntf);
+//   const [dataUser, setDataUser] = useState<any>({});
+//   const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
+//   const router = useRouter();
+
+//   useShallowEffect(() => {
+//     onLoadNotifikasi();
+//   }, []);
+
+//   useShallowEffect(() => {
+//     if (countNtf != null) {
+//       setCountNtf(countNtf + newUserNtf);
+//       setNewUserNtf(0);
+//     }
+//     console.log("notif baru", newUserNtf);
+//     console.log("notif baru", countNtf);
+//   }, [newUserNtf, countNtf]);
+
+//   async function onLoadNotifikasi() {
+//     const loadNotif = await fetch(API_RouteNotifikasi.get_count_by_id());
+//     const data = await loadNotif.json().then((res) => res.data);
+//     setCountNtf(data);
+//   }
+
+//   useShallowEffect(() => {
+//     cekUserLogin();
+//   }, []);
+
+//   async function cekUserLogin() {
+//     try {
+//       const response = await apiGetDataHome("?cat=cek_profile");
+//       if (response.success) {
+//         setDataUser(response.data);
+//       }
+//     } catch (error) {
+//       console.error(error);
+//     }
+//   }
+
+//   return (
+//     <>
+//       <UIGlobal_LayoutTamplate
+//         header={
+//           <UIGlobal_LayoutHeaderTamplate
+//             title="HIPMI"
+//             customButtonLeft={
+//               <ActionIcon
+//                 radius={"xl"}
+//                 disabled={countNtf == null}
+//                 variant={"transparent"}
+//                 onClick={() => {
+//                   if (
+//                     dataUser.profile === undefined ||
+//                     dataUser?.profile === null
+//                   ) {
+//                     router.push(RouterProfile.create, { scroll: false });
+//                   } else {
+//                     router.push(RouterUserSearch.main, { scroll: false });
+//                   }
+//                 }}
+//               >
+//                 <IconUserSearch color="white" />
+//               </ActionIcon>
+//             }
+//             customButtonRight={
+//               <ActionIcon
+//                 variant="transparent"
+//                 disabled={countNtf == null}
+//                 onClick={() => {
+//                   if (
+//                     dataUser.profile === undefined ||
+//                     dataUser?.profile === null
+//                   ) {
+//                     router.push(RouterProfile.create, { scroll: false });
+//                   } else {
+//                     setCategoryPage("Semua");
+//                     router.push(
+//                       RouterNotifikasi.categoryApp({ name: "semua" }),
+//                       {
+//                         scroll: false,
+//                       }
+//                     );
+//                   }
+//                 }}
+//               >
+//                 {countNtf != null && countNtf > 0 ? (
+//                   <Indicator
+//                     processing
+//                     color={MainColor.yellow}
+//                     label={
+//                       <Text fz={10} c={MainColor.darkblue}>
+//                         {countNtf > 99 ? "99+" : countNtf}
+//                       </Text>
+//                     }
+//                   >
+//                     <IconBell color="white" />
+//                   </Indicator>
+//                 ) : (
+//                   <IconBell color="white" />
+//                 )}
+//               </ActionIcon>
+//             }
+//           />
+//         }
+//         footer={<FooterHome />}
+//       >
+//         <BodyHome />
+//       </UIGlobal_LayoutTamplate>
+//     </>
+//   );
+// }

src/app_modules/notifikasi/_ui/index.ts

@@ -1,21 +1,4 @@
-import Notifikasi_UiAll from "./ui_all_notifikasi";
-import Notifikasi_UiCollaboration from "./ui_collaboration_notifikasi";
-import Notifikasi_UiDonasi from "./ui_donasi_notifikasi";
-import Notifikasi_UiEvent from "./ui_event_notifikasi";
-import Notifikasi_UiForum from "./ui_forum_notifikasi";
-import Notifikasi_UiInvestasi from "./ui_investasi_notifikasi";
-import Notifikasi_UiJob from "./ui_job_notifikasi";
 import Notifikasi_UiNewLayout from "./ui_new_layout_notifikasi";
-import Notifikasi_UiNewMain from "./ui_new_notifikasi";
+import Notifikasi_UiMain from "./ui_notifikasi";
-import Notifikasi_UiVoting from "./ui_voting_notifikasi";
 
-export { Notifikasi_UiNewMain };
+export { Notifikasi_UiMain, Notifikasi_UiNewLayout };
-export { Notifikasi_UiNewLayout };
-export { Notifikasi_UiAll };
-export { Notifikasi_UiJob };
-export { Notifikasi_UiEvent };
-export { Notifikasi_UiForum };
-export { Notifikasi_UiVoting };
-export { Notifikasi_UiDonasi };
-export { Notifikasi_UiInvestasi };
-export { Notifikasi_UiCollaboration };

src/app_modules/notifikasi/_ui/ui_all_notifikasi.tsx

@@ -1,92 +0,0 @@
-"use client";
-
-import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
-import {
-  Box,
-  Center,
-  Divider,
-  Grid,
-  Group,
-  Loader,
-  Skeleton,
-  Stack,
-} from "@mantine/core";
-import _ from "lodash";
-import { ScrollOnly } from "next-scroll-loader";
-import { useState } from "react";
-import {
-  ComponentNotifiaksi_CardView,
-  Notifikasi_ComponentSkeletonView,
-} from "../component";
-import notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
-import { ICategoryapp, MODEL_NOTIFIKASI } from "../model/interface";
-import { useAtom } from "jotai";
-import { gs_notifikasi_kategori_app } from "../lib";
-import { useShallowEffect } from "@mantine/hooks";
-import { API_RouteNotifikasi } from "@/app/lib/api_user_router/route_api_notifikasi";
-import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
-
-export default function Notifikasi_UiAll() {
-  const [data, setData] = useState<MODEL_NOTIFIKASI[] | null>(null);
-  const [activePage, setActivePage] = useState(1);
-  const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
-
-  useShallowEffect(() => {
-    onLoadData();
-  }, []);
-
-  async function onLoadData() {
-    const loadData = await fetch(
-      API_RouteNotifikasi.get_all_by_category({
-        category: categoryPage as any,
-        page: 1,
-      })
-    );
-    const data = await loadData.json().then((res) => res.data as any);
-    setData(data);
-  }
-
-  return (
-    <>
-      <Box>
-        {_.isNull(data) ? (
-          <Notifikasi_ComponentSkeletonView />
-        ) : _.isEmpty(data) ? (
-          <ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />
-        ) : (
-          <ScrollOnly
-            height="85vh"
-            renderLoading={() => (
-              <Center mt={"lg"}>
-                <ComponentGlobal_Loader />
-              </Center>
-            )}
-            data={data}
-            setData={setData as any}
-            moreData={async () => {
-              const loadData = await fetch(
-                API_RouteNotifikasi.get_all_by_category({
-                  category: categoryPage as any,
-                  page: activePage + 1,
-                })
-              );
-              const data = await loadData.json().then((res) => res.data as any);
-
-              setActivePage((val) => val + 1);
-              return data;
-            }}
-          >
-            {(item) => (
-              <ComponentNotifiaksi_CardView
-                data={item}
-                onLoadData={setData}
-                categoryPage={categoryPage as any}
-              />
-            )}
-          </ScrollOnly>
-        )}
-      </Box>
-    </>
-  );
-}

src/app_modules/notifikasi/_ui/ui_collaboration_notifikasi.tsx

@@ -1,61 +0,0 @@
-"use client";
-
-import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
-import { Box, Center } from "@mantine/core";
-import { useAtom } from "jotai";
-import _ from "lodash";
-import { ScrollOnly } from "next-scroll-loader";
-import { useState } from "react";
-import { ComponentNotifiaksi_CardView } from "../component";
-import notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
-import { gs_notifikasi_kategori_app } from "../lib";
-import { MODEL_NOTIFIKASI } from "../model/interface";
-
-export default function Notifikasi_UiCollaboration({
-  listNotifikasi,
-}: {
-  listNotifikasi: any[];
-}) {
-  const [data, setData] = useState<MODEL_NOTIFIKASI[]>(listNotifikasi);
-  const [activePage, setActivePage] = useState(1);
-  const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
-
-  return (
-    <>
-      <Box>
-        {_.isEmpty(data) ? (
-          <ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />
-        ) : (
-          <ScrollOnly
-            height="85vh"
-            renderLoading={() => (
-              <Center mt={"lg"}>
-                <ComponentGlobal_Loader />
-              </Center>
-            )}
-            data={data}
-            setData={setData}
-            moreData={async () => {
-              const loadData = await notifikasi_getByUserId({
-                page: activePage + 1,
-                kategoriApp: categoryPage as any,
-              });
-
-              setActivePage((val) => val + 1);
-              return loadData;
-            }}
-          >
-            {(item) => (
-              <ComponentNotifiaksi_CardView
-                data={item}
-                onLoadData={setData}
-                categoryPage={categoryPage}
-              />
-            )}
-          </ScrollOnly>
-        )}
-      </Box>
-    </>
-  );
-}

src/app_modules/notifikasi/_ui/ui_donasi_notifikasi.tsx

@@ -1,61 +0,0 @@
-"use client";
-
-import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
-import { Box, Center } from "@mantine/core";
-import { useAtom } from "jotai";
-import _ from "lodash";
-import { ScrollOnly } from "next-scroll-loader";
-import { useState } from "react";
-import { ComponentNotifiaksi_CardView } from "../component";
-import notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
-import { gs_notifikasi_kategori_app } from "../lib";
-import { MODEL_NOTIFIKASI } from "../model/interface";
-
-export default function Notifikasi_UiDonasi({
-  listNotifikasi,
-}: {
-  listNotifikasi: any[];
-}) {
-  const [data, setData] = useState<MODEL_NOTIFIKASI[]>(listNotifikasi);
-  const [activePage, setActivePage] = useState(1);
-  const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
-
-  return (
-    <>
-      <Box>
-        {_.isEmpty(data) ? (
-          <ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />
-        ) : (
-          <ScrollOnly
-            height="85vh"
-            renderLoading={() => (
-              <Center mt={"lg"}>
-                <ComponentGlobal_Loader />
-              </Center>
-            )}
-            data={data}
-            setData={setData}
-            moreData={async () => {
-              const loadData = await notifikasi_getByUserId({
-                page: activePage + 1,
-                kategoriApp: categoryPage as any,
-              });
-
-              setActivePage((val) => val + 1);
-              return loadData;
-            }}
-          >
-            {(item) => (
-              <ComponentNotifiaksi_CardView
-                data={item}
-                onLoadData={setData}
-                categoryPage={categoryPage}
-              />
-            )}
-          </ScrollOnly>
-        )}
-      </Box>
-    </>
-  );
-}

src/app_modules/notifikasi/_ui/ui_forum_notifikasi.tsx

@@ -1,61 +0,0 @@
-"use client";
-
-import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
-import { Box, Center } from "@mantine/core";
-import { useAtom } from "jotai";
-import _ from "lodash";
-import { ScrollOnly } from "next-scroll-loader";
-import { useState } from "react";
-import { ComponentNotifiaksi_CardView } from "../component";
-import notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
-import { gs_notifikasi_kategori_app } from "../lib";
-import { MODEL_NOTIFIKASI } from "../model/interface";
-
-export default function Notifikasi_UiForum({
-  listNotifikasi,
-}: {
-  listNotifikasi: any[];
-}) {
-  const [data, setData] = useState<MODEL_NOTIFIKASI[]>(listNotifikasi);
-  const [activePage, setActivePage] = useState(1);
-  const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
-
-  return (
-    <>
-      <Box>
-        {_.isEmpty(data) ? (
-          <ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />
-        ) : (
-          <ScrollOnly
-            height="85vh"
-            renderLoading={() => (
-              <Center mt={"lg"}>
-                <ComponentGlobal_Loader />
-              </Center>
-            )}
-            data={data}
-            setData={setData}
-            moreData={async () => {
-              const loadData = await notifikasi_getByUserId({
-                page: activePage + 1,
-                kategoriApp: categoryPage as any,
-              });
-
-              setActivePage((val) => val + 1);
-              return loadData;
-            }}
-          >
-            {(item) => (
-              <ComponentNotifiaksi_CardView
-                data={item}
-                onLoadData={setData}
-                categoryPage={categoryPage}
-              />
-            )}
-          </ScrollOnly>
-        )}
-      </Box>
-    </>
-  );
-}

src/app_modules/notifikasi/_ui/ui_investasi_notifikasi.tsx

@@ -1,61 +0,0 @@
-"use client";
-
-import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
-import { Box, Center } from "@mantine/core";
-import { useAtom } from "jotai";
-import _ from "lodash";
-import { ScrollOnly } from "next-scroll-loader";
-import { useState } from "react";
-import { ComponentNotifiaksi_CardView } from "../component";
-import notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
-import { gs_notifikasi_kategori_app } from "../lib";
-import { MODEL_NOTIFIKASI } from "../model/interface";
-
-export default function Notifikasi_UiInvestasi({
-  listNotifikasi,
-}: {
-  listNotifikasi: any[];
-}) {
-  const [data, setData] = useState<MODEL_NOTIFIKASI[]>(listNotifikasi);
-  const [activePage, setActivePage] = useState(1);
-  const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
-
-  return (
-    <>
-      <Box>
-        {_.isEmpty(data) ? (
-          <ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />
-        ) : (
-          <ScrollOnly
-            height="85vh"
-            renderLoading={() => (
-              <Center mt={"lg"}>
-                <ComponentGlobal_Loader />
-              </Center>
-            )}
-            data={data}
-            setData={setData}
-            moreData={async () => {
-              const loadData = await notifikasi_getByUserId({
-                page: activePage + 1,
-                kategoriApp: categoryPage as any,
-              });
-
-              setActivePage((val) => val + 1);
-              return loadData;
-            }}
-          >
-            {(item) => (
-              <ComponentNotifiaksi_CardView
-                data={item}
-                onLoadData={setData}
-                categoryPage={categoryPage}
-              />
-            )}
-          </ScrollOnly>
-        )}
-      </Box>
-    </>
-  );
-}

src/app_modules/notifikasi/_ui/ui_job_notifikasi.tsx

@@ -1,74 +0,0 @@
-"use client";
-
-import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
-import { Box, Center } from "@mantine/core";
-import { useAtom } from "jotai";
-import _ from "lodash";
-import { ScrollOnly } from "next-scroll-loader";
-import { useState } from "react";
-import { ComponentNotifiaksi_CardView } from "../component";
-import notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
-import { gs_notifikasi_kategori_app } from "../lib";
-import { MODEL_NOTIFIKASI } from "../model/interface";
-import { useShallowEffect } from "@mantine/hooks";
-
-export default function Notifikasi_UiJob({
-  listNotifikasi,
-}: {
-  listNotifikasi: any[];
-}) {
-  const [data, setData] = useState<MODEL_NOTIFIKASI[]>(listNotifikasi);
-  const [activePage, setActivePage] = useState(1);
-  const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
-
-  useShallowEffect(() => {
-    onLoadData(setData);
-  }, [setData]);
-
-  async function onLoadData(setData: any) {
-    const listNotifikasi = await notifikasi_getByUserId({
-      page: 1,
-      kategoriApp: "Job",
-    });
-    setData(listNotifikasi);
-  }
-
-  return (
-    <>
-      <Box>
-        {_.isEmpty(data) ? (
-          <ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />
-        ) : (
-          <ScrollOnly
-            height="85vh"
-            renderLoading={() => (
-              <Center mt={"lg"}>
-                <ComponentGlobal_Loader />
-              </Center>
-            )}
-            data={data}
-            setData={setData}
-            moreData={async () => {
-              const loadData = await notifikasi_getByUserId({
-                page: activePage + 1,
-                kategoriApp: categoryPage as any,
-              });
-
-              setActivePage((val) => val + 1);
-              return loadData;
-            }}
-          >
-            {(item) => (
-              <ComponentNotifiaksi_CardView
-                data={item}
-                onLoadData={setData}
-                categoryPage={categoryPage}
-              />
-            )}
-          </ScrollOnly>
-        )}
-      </Box>
-    </>
-  );
-}

src/app_modules/notifikasi/_ui/ui_new_layout_notifikasi.tsx

@@ -9,21 +9,22 @@ import {
   Container,
   Flex,
   rem,
+  Loader,
 } from "@mantine/core";
 import { useAtom } from "jotai";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import React, { useState } from "react";
 import { gs_notifikasi_kategori_app } from "../lib/global_state";
+import { useShallowEffect } from "@mantine/hooks";
+import { API_RouteNotifikasi } from "@/app/lib/api_user_router/route_api_notifikasi";
 
 export default function Notifikasi_UiNewLayout({
   children,
   header,
-  masterKategori,
 }: {
   children: React.ReactNode;
   header?: React.ReactNode;
-  masterKategori: any[];
 }) {
   return (
     <>
@@ -45,7 +46,7 @@ export default function Notifikasi_UiNewLayout({
           >
             <UIHeader header={header} />
 
-            <UIChildren masterKategori={masterKategori}>{children}</UIChildren>
+            <UIChildren>{children}</UIChildren>
           </BackgroundImage>
         </Container>
       </Box>
@@ -75,17 +76,77 @@ function UIHeader({ header }: { header: React.ReactNode }) {
   );
 }
 
-function UIChildren({
+function UIChildren({ children }: { children: React.ReactNode }) {
-  children,
-  masterKategori,
-}: {
-  children: React.ReactNode;
-  masterKategori: any[];
-}) {
   const router = useRouter();
-  const [mstrKategori, setMstrKategori] = useState(masterKategori);
+  const [mstrKategori, setMstrKategori] = useState<any[] | null>(null);
   const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
 
+  useShallowEffect(() => {
+    onLoadMaster();
+  }, []);
+
+  async function onLoadMaster() {
+    const res = await fetch(API_RouteNotifikasi.get_master_kategori());
+    const data = await res.json();
+    setMstrKategori(data.data);
+  }
+
+  return (
+    <>
+      {_.isNull(mstrKategori) ? (
+        <SkeletonButton />
+      ) : _.isEmpty(mstrKategori) ? (
+        <Button w={80} radius={"xl"} c={"gray.5"}>
+          Null
+        </Button>
+      ) : (
+        <Box style={{ zIndex: 0 }} h={"92vh"} px={"xs"} pos={"static"}>
+          <Box
+            mb={"xs"}
+            style={{
+              display: "flex",
+              gap: "20px",
+              position: "relative",
+              overflowX: "scroll",
+              scrollbarWidth: "none",
+            }}
+          >
+            <Flex gap={"md"}>
+              {mstrKategori.map((e, i) => (
+                <Button
+                  radius={"xl"}
+                  key={i}
+                  c={categoryPage === e.name ? "black" : "gray.5"}
+                  style={{
+                    transition: "0.3s",
+                    backgroundColor:
+                      categoryPage === e.name ? MainColor.yellow : "GrayText",
+                  }}
+                  onClick={() => {
+                    router.replace(
+                      RouterNotifikasi.categoryApp({
+                        name: _.lowerCase(e.name),
+                      }),
+                      {
+                        scroll: false,
+                      }
+                    );
+                    setCategoryPage(e.name);
+                  }}
+                >
+                  {e.name}
+                </Button>
+              ))}
+            </Flex>
+          </Box>
+          {children}
+        </Box>
+      )}
+    </>
+  );
+}
+
+function SkeletonButton() {
   return (
     <>
       <Box style={{ zIndex: 0 }} h={"92vh"} px={"xs"} pos={"static"}>
@@ -100,33 +161,25 @@ function UIChildren({
           }}
         >
           <Flex gap={"md"}>
-            {mstrKategori.map((e, i) => (
+            {Array.from(new Array(10)).map((e, i) => (
               <Button
+                w={80}
                 radius={"xl"}
                 key={i}
-                c={categoryPage === e.name ? "black" : "gray.5"}
+                c={"gray.5"}
                 style={{
                   transition: "0.3s",
-                  backgroundColor:
+                  backgroundColor: "GrayText",
-                    categoryPage === e.name ? MainColor.yellow : "GrayText",
-                }}
-                onClick={() => {
-                  router.replace(
-                    RouterNotifikasi.categoryApp({ name: _.lowerCase(e.name) }),
-                    {
-                      scroll: false,
-                    }
-                  );
-                  setCategoryPage(e.name);
                 }}
+                onClick={() => {}}
               >
-                {e.name}
+                <Loader size={"xs"} color="black" />
               </Button>
             ))}
           </Flex>
         </Box>
-        {children}
       </Box>
+      ;
     </>
   );
 }

src/app_modules/notifikasi/_ui/ui_new_notifikasi.tsx

@@ -1,80 +0,0 @@
-"use client";
-
-import { Box, Button, Flex, Stack, Title } from "@mantine/core";
-import UIGlobal_LayoutHeaderTamplate from "../../_global/ui/ui_header_tamplate";
-import { Notifikasi_ViewNewMain } from "../_view";
-import { Notifikasi_UiLayout, Notifikasi_UiView } from "../ui";
-import { useState } from "react";
-import { MainColor } from "@/app_modules/_global/color";
-import { useRouter } from "next/navigation";
-import { RouterNotifikasi } from "@/app/lib/router_hipmi/router_notifikasi";
-import _ from "lodash";
-
-export default function Notifikasi_UiNewMain({
-  listNotifikasi,
-  masterKategori,
-  categoryName,
-}: {
-  listNotifikasi: any[];
-  masterKategori: any[];
-  categoryName: string;
-}) {
-  const router = useRouter();
-  const [mstrKategori, setMstrKategori] = useState(masterKategori);
-  const [activeKategori, setActiveKategori] = useState(categoryName);
-
-  return (
-    <>
-      <Stack>
-        <Box
-          style={{
-            display: "flex",
-            gap: "20px",
-            position: "relative",
-            overflowX: "scroll",
-            scrollbarWidth: "none",
-          }}
-        >
-          <Flex gap={"md"}>
-            {mstrKategori.map((e, i) => (
-              <Button
-                radius={"xl"}
-                key={i}
-                c={categoryName === _.lowerCase(e.name) ? "black" : "gray.5"}
-                style={{
-                  transition: "0.3s",
-                  backgroundColor:
-                    categoryName === _.lowerCase(e.name)
-                      ? MainColor.yellow
-                      : "GrayText",
-                }}
-                onClick={() => {
-                //   router.replace(
-                //     RouterNotifikasi.main({ name: _.lowerCase(e.name) }),
-                //     {
-                //       scroll: false,
-                //     }
-                //   );
-                  setActiveKategori(_.lowerCase(e.name));
-                  // onLoadDataNotifikasi(e.name);
-                }}
-              >
-                {e.name}
-              </Button>
-            ))}
-          </Flex>
-        </Box>
-
-        <Title>{activeKategori}</Title>
-      </Stack>
-      {/* <Notifikasi_UiNewLayout
-        header={<UIGlobal_LayoutHeaderTamplate title="Notifikasi" />}
-      >
-        <Notifikasi_ViewNewMain
-        //   listNotifikasi={listNotifikasi}
-        //   masterKategori={masterKategori}
-        />
-      </Notifikasi_UiNewLayout> */}
-    </>
-  );
-}

src/app_modules/notifikasi/_ui/ui_notifikasi.tsx

@@ -1,8 +1,11 @@
 "use client";
 
+import { API_RouteNotifikasi } from "@/app/lib/api_user_router/route_api_notifikasi";
 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 } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import { useAtom } from "jotai";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
@@ -11,13 +14,11 @@ import {
   ComponentNotifiaksi_CardView,
   Notifikasi_ComponentSkeletonView,
 } from "../component";
-import notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
 import { gs_notifikasi_kategori_app } from "../lib";
+import { apiGetAllNotifikasiByCategory } from "../lib/api_notifikasi";
 import { MODEL_NOTIFIKASI } from "../model/interface";
-import { useShallowEffect } from "@mantine/hooks";
-import { API_RouteNotifikasi } from "@/app/lib/api_user_router/route_api_notifikasi";
 
-export default function Notifikasi_UiEvent() {
+export default function Notifikasi_UiMain() {
   const [data, setData] = useState<MODEL_NOTIFIKASI[] | null>(null);
   const [activePage, setActivePage] = useState(1);
   const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
@@ -27,11 +28,18 @@ export default function Notifikasi_UiEvent() {
   }, []);
 
   async function onLoadData() {
-    const loadData = await fetch(
+    try {
-      API_RouteNotifikasi.get_all_by_category({  category: categoryPage as any, page: 1 })
+      const respon = await apiGetAllNotifikasiByCategory({
-    );
+        category: categoryPage as any,
-    const data = await loadData.json().then((res) => res.data as any);
+        page: 1,
-    setData(data);
+      });
+
+      if (respon.success) {
+        setData(respon.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get notifikasi", error);
+    }
   }
 
   return (
@@ -52,16 +60,19 @@ export default function Notifikasi_UiEvent() {
             data={data}
             setData={setData as any}
             moreData={async () => {
-              const loadData = await fetch(
+              try {
-                API_RouteNotifikasi.get_all_by_category({
+                const respon = await apiGetAllNotifikasiByCategory({
                   category: categoryPage as any,
                   page: activePage + 1,
-                })
+                });
-              );
-              const data = await loadData.json().then((res) => res.data as any);
 
-              setActivePage((val) => val + 1);
+                if (respon.success) {
-              return data;
+                  setActivePage((val) => val + 1);
+                  return respon.data;
+                }
+              } catch (error) {
+                clientLogger.error("Error get notifikasi", error);
+              }
             }}
           >
             {(item) => (

src/app_modules/notifikasi/_ui/ui_voting_notifikasi.tsx

@@ -1,61 +0,0 @@
-"use client";
-
-import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
-import { Box, Center } from "@mantine/core";
-import { useAtom } from "jotai";
-import _ from "lodash";
-import { ScrollOnly } from "next-scroll-loader";
-import { useState } from "react";
-import { ComponentNotifiaksi_CardView } from "../component";
-import notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
-import { gs_notifikasi_kategori_app } from "../lib";
-import { MODEL_NOTIFIKASI } from "../model/interface";
-
-export default function Notifikasi_UiVoting({
-  listNotifikasi,
-}: {
-  listNotifikasi: any[];
-}) {
-  const [data, setData] = useState<MODEL_NOTIFIKASI[]>(listNotifikasi);
-  const [activePage, setActivePage] = useState(1);
-  const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
-
-  return (
-    <>
-      <Box>
-        {_.isEmpty(data) ? (
-          <ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />
-        ) : (
-          <ScrollOnly
-            height="85vh"
-            renderLoading={() => (
-              <Center mt={"lg"}>
-                <ComponentGlobal_Loader />
-              </Center>
-            )}
-            data={data}
-            setData={setData}
-            moreData={async () => {
-              const loadData = await notifikasi_getByUserId({
-                page: activePage + 1,
-                kategoriApp: categoryPage as any,
-              });
-
-              setActivePage((val) => val + 1);
-              return loadData;
-            }}
-          >
-            {(item) => (
-              <ComponentNotifiaksi_CardView
-                data={item}
-                onLoadData={setData}
-                categoryPage={categoryPage}
-              />
-            )}
-          </ScrollOnly>
-        )}
-      </Box>
-    </>
-  );
-}

src/app_modules/notifikasi/lib/api_notifikasi.ts

@@ -0,0 +1,10 @@
+import { API_RouteNotifikasi } from "@/app/lib/api_user_router/route_api_notifikasi";
+import { ICategoryapp } from "../model/interface";
+
+export const apiGetAllNotifikasiByCategory = async ({category, page}: {category: ICategoryapp; page: number}) => {
+    const respone = await fetch(
+      `/api/notifikasi/get-all-by-category?category=${category}&page=${page}`
+    );
+
+    return await respone.json().catch(() => null);
+}

src/app_modules/notifikasi/ui/index.ts

@@ -1,5 +0,0 @@
-import { Notifikasi_UiLayout } from "./ui_layout_notifikasi";
-import { Notifikasi_UiView } from "./ui_notifiaksi";
-
-export { Notifikasi_UiLayout };
-export { Notifikasi_UiView };

src/app_modules/notifikasi/ui/ui_layout_notifikasi.tsx

@@ -1,91 +0,0 @@
-"use client";
-
-import { MainColor } from "@/app_modules/_global/color/color_pallet";
-import {
-  BackgroundImage,
-  Box,
-  Container,
-  Footer,
-  rem,
-  ScrollArea,
-} from "@mantine/core";
-import React from "react";
-
-export function Notifikasi_UiLayout({
-  children,
-  header,
-  footer,
-}: {
-  children: React.ReactNode;
-  header?: React.ReactNode;
-  footer?: React.ReactNode;
-}) {
-  return (
-    <>
-      <Box
-        w={"100%"}
-        h={"100%"}
-        style={{
-          backgroundColor: MainColor.black,
-          overflowX: "auto",
-          overflowY: "auto",
-          position: "fixed",
-        }}
-      >
-        <Container mih={"100vh"} p={0} size={rem(500)} bg={MainColor.darkblue}>
-          <BackgroundImage
-            src={"/aset/global/main_background.png"}
-            h={"100vh"}
-            style={{ position: "relative" }}
-          >
-            <UIHeader header={header} />
-
-            <UIChildren footer={footer}>{children}</UIChildren>
-          </BackgroundImage>
-        </Container>
-      </Box>
-    </>
-  );
-}
-
-function UIHeader({ header }: { header: React.ReactNode }) {
-  return (
-    <>
-      {header ? (
-        <Box
-          h={"8vh"}
-          style={{
-            zIndex: 10,
-          }}
-          w={"100%"}
-          pos={"sticky"}
-          top={0}
-        >
-          {header}
-        </Box>
-      ) : (
-        ""
-      )}
-    </>
-  );
-}
-
-function UIChildren({
-  children,
-  footer,
-}: {
-  children: React.ReactNode;
-  footer: React.ReactNode;
-}) {
-  return (
-    <>
-      <Box style={{ zIndex: 0 }} h={"92vh"} px={"md"} pos={"static"}>
-        {children}
-        {/* <ScrollArea h={"100%"} px={"md"}>
-        </ScrollArea> */}
-      </Box>
-    </>
-  );
-}
-
-

src/app_modules/notifikasi/ui/ui_notifiaksi.tsx

@@ -1,176 +0,0 @@
-"use client";
-
-import { MainColor } from "@/app_modules/_global/color/color_pallet";
-import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
-import {
-  gs_donasi_hot_menu,
-  gs_donasi_tabs_posting,
-} from "@/app_modules/donasi/global_state";
-import {
-  gs_event_hotMenu,
-  gs_event_status,
-} from "@/app_modules/event/global_state";
-import {
-  gs_investas_menu,
-  gs_investasi_status,
-} from "@/app_modules/investasi/g_state";
-import {
-  gs_vote_hotMenu,
-  gs_vote_status,
-} from "@/app_modules/vote/global_state";
-import { Box, Button, Center, Flex, Stack } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
-import { useAtom } from "jotai";
-import _ from "lodash";
-import { ScrollOnly } from "next-scroll-loader";
-import { useState } from "react";
-import { ComponentNotifiaksi_CardView } from "../component/card_view";
-import notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
-import { gs_notifikasi_kategori_app } from "../lib";
-import { MODEL_NOTIFIKASI } from "../model/interface";
-
-export function Notifikasi_UiView({
-  listNotifikasi,
-  masterKategori,
-}: {
-  listNotifikasi: any[];
-  masterKategori: any[];
-}) {
-  const [data, setData] = useState<MODEL_NOTIFIKASI[]>(listNotifikasi);
-  const [activePage, setActivePage] = useState(1);
-  const [mstrKategori, setMstrKategori] = useState(masterKategori);
-  const [activeKategori, setActiveKategori] = useAtom(
-    gs_notifikasi_kategori_app
-  );
-
-  // Kategori App
-  // const [voteMenu, setVoteMenu] = useAtom(gs_vote_hotMenu);
-  // const [voteStatus, setVoteStatus] = useAtom(gs_vote_status);
-  // const [eventMenu, setEventMenu] = useAtom(gs_event_hotMenu);
-  // const [eventStatus, setEventStatus] = useAtom(gs_event_status);
-  // const [donasiMenu, setDonasiMenu] = useAtom(gs_donasi_hot_menu);
-  // const [donasiStatus, setDonasiStatus] = useAtom(gs_donasi_tabs_posting);
-  // const [investasiMenu, setInvestasiMenu] = useAtom(gs_investas_menu);
-  // const [investasiStatus, setInvestasiStatus] = useAtom(gs_investasi_status);
-
-  useShallowEffect(() => {
-    onLoadDataNotifikasi({ kategoriApp: activeKategori });
-  }, [activeKategori]);
-
-  async function onLoadDataNotifikasi({
-    kategoriApp,
-  }: {
-    kategoriApp: string;
-  }) {
-    const loadNotifikasi = await notifikasi_getByUserId({
-      page: 1,
-      kategoriApp: "Semua",
-    });
-
-    setData(loadNotifikasi as any);
-  }
-
-
-  return (
-    <>
-      <Stack spacing={"xs"}>
-        <Box
-          style={{
-            display: "flex",
-            gap: "20px",
-            position: "relative",
-            overflowX: "scroll",
-            scrollbarWidth: "none",
-          }}
-        >
-          <Flex gap={"md"}>
-            {mstrKategori.map((e, i) => (
-              <Button
-                radius={"xl"}
-                key={i}
-                c={activeKategori === e.name ? "black" : "gray.5"}
-                style={{
-                  transition: "0.3s",
-                  backgroundColor:
-                    activeKategori === e.name ? MainColor.yellow : "GrayText",
-                }}
-                onClick={() => {
-
-                  // setActiveKategori(e.name);
-                  // onLoadDataNotifikasi(e.name);
-                }}
-              >
-                {e.name}
-              </Button>
-            ))}
-          </Flex>
-        </Box>
-
-        {/* <Box>
-          {_.isEmpty(data) ? (
-            <ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />
-          ) : (
-            <ScrollOnly
-              height="85vh"
-              renderLoading={() => (
-                <Center mt={"lg"}>
-                  <ComponentGlobal_Loader />
-                </Center>
-              )}
-              data={data}
-              setData={setData}
-              moreData={async () => {
-                const loadData = await notifikasi_getByUserId({
-                  page: activePage + 1,
-                  kategoriApp: activeKategori,
-                });
-                // console.log(loadData);
-
-                setActivePage((val) => val + 1);
-
-                return loadData;
-              }}
-            >
-              {(item) => (
-                <ComponentNotifiaksi_CardView
-                  data={item}
-                  onLoadData={setData}
-                  activePage={activePage}
-                  activeKategori={activeKategori}
-                  // onSetMenu={(val) => {
-                  //   if (item?.kategoriApp === "JOB") {
-
-                  //     setJobMenuId(val.menuId);
-                  //     // setJobStatus(val.status);
-                  //   }
-
-                  //   // if (item?.kategoriApp === "VOTING") {
-                  //   //   setVoteMenu(val.menuId);
-                  //   //   setVoteStatus(val.status);
-                  //   // }
-
-                  //   // if (item?.kategoriApp === "EVENT") {
-                  //   //   setEventMenu(val.menuId);
-                  //   //   setEventStatus(val.status);
-                  //   // }
-
-                  //   // if (item?.kategoriApp === "DONASI") {
-                  //   //   setDonasiMenu(val.menuId);
-                  //   //   setDonasiStatus(val.status);
-                  //   // }
-
-                  //   // if (item?.kategoriApp === "INVESTASI") {
-                  //   //   setInvestasiMenu(val.menuId);
-                  //   //   setInvestasiStatus(val.status);
-                  //   // }
-                  // }}
-                />
-              )}
-            </ScrollOnly>
-          )}
-        </Box> */}
-      </Stack>
-    </>
-  );
-}

src/app_modules/notifikasi/view/index.ts

@@ -1,3 +0,0 @@
-import Notifikasi_MainView from "./view_notifikasi";
-
-export { Notifikasi_MainView };

src/app_modules/notifikasi/view/view_notifikasi.tsx

@@ -1,25 +0,0 @@
-import UIGlobal_LayoutHeaderTamplate from "../../_global/ui/ui_header_tamplate";
-import { Notifikasi_UiLayout, Notifikasi_UiView } from "../ui";
-
-export default function Notifikasi_MainView({
-  listNotifikasi,
-  masterKategori,
-  kategoriName,
-}: {
-  listNotifikasi: any[];
-  masterKategori: any[];
-  kategoriName: string
-}) {
-  return (
-    <>
-      <Notifikasi_UiLayout
-        header={<UIGlobal_LayoutHeaderTamplate title="Notifikasi" />}
-      >
-        <Notifikasi_UiView
-          listNotifikasi={listNotifikasi}
-          masterKategori={masterKategori}
-        />
-      </Notifikasi_UiLayout>
-    </>
-  );
-}

src/middleware.ts

@@ -19,6 +19,7 @@ const middlewareConfig: MiddlewareConfig = {
   userPath: "/dev/home",
   publicRoutes: [
     "/",
+    "/api/collaboration/*",
     "/api/notifikasi/*",
     "/api/logs/*",
     "/api/image/*",