Merge pull request #125 from bipproduction/notifikasi/ui

Notifikasi/UI

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hipmi",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "private": true,
   "prisma": {
     "seed": "npx tsx prisma/seed.ts"

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

@@ -0,0 +1,17 @@
+import {
+  Notifikasi_UiCollaboration
+} 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} />
+    </>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { Notifikasi_UiDonasi } 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} />
+    </>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { Notifikasi_UiEvent } 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: "Event",
+   });
+
+  return (
+    <>
+      <Notifikasi_UiEvent listNotifikasi={listNotifikasi} />
+    </>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { Notifikasi_UiForum } 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} />
+    </>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { Notifikasi_UiDonasi, Notifikasi_UiInvestasi } 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} />
+    </>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { Notifikasi_UiJob } 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} />
+    </>
+  );
+}

src/app/dev/notifikasi/layout.tsx

@@ -0,0 +1,22 @@
+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/page.tsx

@@ -1,24 +0,0 @@
-import { ComponentNotifikasi_CardSkeleton } from "@/app_modules/notifikasi/component";
-import { notifikasi_funGetKategoriApp } from "@/app_modules/notifikasi/fun/get/fun_get_kategori_app";
-import notifikasi_getByUserId from "@/app_modules/notifikasi/fun/get/get_notifiaksi_by_id";
-import { Notifikasi_MainView } from "@/app_modules/notifikasi/view";
-import { Suspense } from "react";
-
-export default async function Page() {
-  const listNotifikasi = await notifikasi_getByUserId({
-    page: 1,
-    kategoriApp: "Semua",
-  });
-  const masterKategori = await notifikasi_funGetKategoriApp();
-
-  return (
-    <>
-      <Suspense fallback={<ComponentNotifikasi_CardSkeleton />}>
-        <Notifikasi_MainView
-          listNotifikasi={listNotifikasi as any}
-          masterKategori={masterKategori}
-        />
-      </Suspense>
-    </>
-  );
-}

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

@@ -0,0 +1,15 @@
+import { Notifikasi_UiAll } 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: "Semua",
+  });
+
+  return (
+    <>
+      <Notifikasi_UiAll listNotifikasi={listNotifikasi} />
+    </>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { Notifikasi_UiVoting } 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} />
+    </>
+  );
+}

src/app/lib/router_hipmi/router_notifikasi.ts

@@ -1,3 +1,4 @@
 export const RouterNotifikasi = {
-  main: "/dev/notifikasi",
+  // main: ({ name }: { name: string }) => `/dev/notifikasi/${name}`,
+  categoryApp: ({ name }: { name: string }) => `/dev/notifikasi/${name}`,
 };

src/app_modules/home/component/button_header.tsx

@@ -59,13 +59,11 @@ export function ComponentHome_ButtonHeaderRight({
 }) {
   const router = useRouter();
   const [isLoadingBell, setIsLoadingBell] = useState(false);
-  const [activeKategori, setActiveKategori] = useAtom(
-    gs_notifikasi_kategori_app
-  );
 
   // Notifikasi
   const [countNtf, setCountNtf] = useState(countNotifikasi);
   const [newUserNtf, setNewUserNtf] = useAtom(gs_user_ntf);
+  const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
 
   useShallowEffect(() => {
     // console.log(newUserNtf, "new notif");
@@ -113,9 +111,12 @@ export function ComponentHome_ButtonHeaderRight({
           if (dataUser?.Profile === null) {
             ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
           } else {
-            router.push(RouterNotifikasi.main, { scroll: false });
+            router.push(RouterNotifikasi.categoryApp({ name: "semua" }), {
+              scroll: false,
+            });
+            setCategoryPage("Semua");
             setIsLoadingBell(true);
-            setActiveKategori("Semua");
+            // setActiveKategori("Semua");
           }
         }}
       >

src/app_modules/notifikasi/_ui/index.ts

@@ -0,0 +1,21 @@
+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_UiVoting from "./ui_voting_notifikasi";
+
+export { Notifikasi_UiNewMain };
+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

@@ -0,0 +1,78 @@
+"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 _ 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 { MODEL_NOTIFIKASI } from "../model/interface";
+import { useAtom } from "jotai";
+import { gs_notifikasi_kategori_app } from "../lib";
+import { useShallowEffect } from "@mantine/hooks";
+
+export default function Notifikasi_UiAll({
+  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({
+      onSetData(val: any) {
+        setData(val);
+      },
+    });
+  }, [setData]);
+
+  async function onLoadData({ onSetData }: { onSetData: any }) {
+    const loadData = await notifikasi_getByUserId({
+      page: 1,
+      kategoriApp: "Semua",
+    });
+    onSetData(loadData);
+  }
+
+  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_collaboration_notifikasi.tsx

@@ -0,0 +1,61 @@
+"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

@@ -0,0 +1,61 @@
+"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_event_notifikasi.tsx

@@ -0,0 +1,61 @@
+"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_UiEvent({
+  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

@@ -0,0 +1,61 @@
+"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

@@ -0,0 +1,61 @@
+"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

@@ -0,0 +1,61 @@
+"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_UiJob({
+  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_new_layout_notifikasi.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { RouterNotifikasi } from "@/app/lib/router_hipmi/router_notifikasi";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import {
+    BackgroundImage,
+    Box,
+    Button,
+    Container,
+    Flex,
+    rem,
+} 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";
+
+export default function Notifikasi_UiNewLayout({
+  children,
+  header,
+  masterKategori,
+}: {
+  children: React.ReactNode;
+  header?: React.ReactNode;
+  masterKategori: any[];
+}) {
+  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 masterKategori={masterKategori}>{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,
+  masterKategori,
+}: {
+  children: React.ReactNode;
+  masterKategori: any[];
+}) {
+  const router = useRouter();
+  const [mstrKategori, setMstrKategori] = useState(masterKategori);
+  const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
+
+  return (
+    <>
+      <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);
+                  // onLoadDataNotifikasi(e.name);
+                }}
+              >
+                {e.name}
+              </Button>
+            ))}
+          </Flex>
+        </Box>
+        {children}
+      </Box>
+    </>
+  );
+}

src/app_modules/notifikasi/_ui/ui_new_notifikasi.tsx

@@ -0,0 +1,80 @@
+"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_voting_notifikasi.tsx

@@ -0,0 +1,61 @@
+"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/_view/index.ts

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

src/app_modules/notifikasi/_view/view_new_notifikasi.tsx

@@ -0,0 +1,6 @@
+export default function Notifikasi_ViewNewMain(){
+    return<>
+    
+    
+    </>
+}

src/app_modules/notifikasi/component/card_view.tsx

@@ -5,35 +5,26 @@ import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
 import { gs_job_hot_menu } from "@/app_modules/job/global_state";
 import { Badge, Card, Divider, Group, Stack, Text } from "@mantine/core";
 import { IconCheck, IconChecks } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
-import notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
-import { MODEL_NOTIFIKASI } from "../model/interface";
-import { redirectDetailCollaborationPage } from "./path/collaboration";
-import { redirectDonasiPage } from "./path/donasi";
-import { redirectEventPage } from "./path/event";
-import { redirectDetailForumPage } from "./path/forum";
-import { redirectInvestasiPage } from "./path/investasi";
-import { notifikasi_jobCheckStatus } from "./path/job";
-import { redirectVotingPage } from "./path/voting";
 import { useState } from "react";
-import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/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 { notifikasi_jobCheckStatus } from "./path/job";
 
 export function ComponentNotifiaksi_CardView({
   data,
   onLoadData,
-  activePage,
-  // onSetMenu,
-  activeKategori,
+  categoryPage,
 }: {
   data: MODEL_NOTIFIKASI;
   onLoadData: (val: any) => void;
-  activePage: number;
-  // onSetMenu: (val: any) => void;
-  activeKategori: string;
+  categoryPage: any;
 }) {
   const router = useRouter();
   const [visible, setVisible] = useState(false);
@@ -64,7 +55,7 @@ export function ComponentNotifiaksi_CardView({
             if (checkStatus?.success) {
               const loadListNotifikasi = await notifikasi_getByUserId({
                 page: 1,
-                kategoriApp: activeKategori,
+                kategoriApp: "Job",
               });
 
               onLoadData(loadListNotifikasi);

src/app_modules/notifikasi/fun/get/get_notifiaksi_by_id.ts

@@ -4,12 +4,22 @@ import prisma from "@/app/lib/prisma";
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import _ from "lodash";
 
+type ICategoryapp =
+  | "Semua"
+  | "Event"
+  | "Job"
+  | "Voting"
+  | "Donasi"
+  | "Investasi"
+  | "Forum"
+  | "Collaboration";
+
 export default async function notifikasi_getByUserId({
   page,
   kategoriApp,
 }: {
   page: number;
-  kategoriApp?: string;
+  kategoriApp?: ICategoryapp
 }) {
   console.log(page, "ini page");
   console.log(kategoriApp, "ini kategori");

src/app_modules/notifikasi/lib/global_state.ts

@@ -1,6 +1,9 @@
+import { atom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
 
 export const gs_notifikasi_kategori_app = atomWithStorage(
   "gs_notifikasi_kategori_app",
-  "Semua"
-)
+  ""
+);
+
+// export const gs_notifikasi_page = atom<string>("");

src/app_modules/notifikasi/ui/ui_notifiaksi.tsx

@@ -45,14 +45,14 @@ export function Notifikasi_UiView({
   );
 
   // 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);
+  // 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 });
@@ -65,7 +65,7 @@ export function Notifikasi_UiView({
   }) {
     const loadNotifikasi = await notifikasi_getByUserId({
       page: 1,
-      kategoriApp: kategoriApp,
+      kategoriApp: "Semua",
     });
 
     setData(loadNotifikasi as any);
@@ -96,7 +96,8 @@ export function Notifikasi_UiView({
                     activeKategori === e.name ? MainColor.yellow : "GrayText",
                 }}
                 onClick={() => {
-                  setActiveKategori(e.name);
+
+                  // setActiveKategori(e.name);
                   // onLoadDataNotifikasi(e.name);
                 }}
               >
@@ -106,7 +107,7 @@ export function Notifikasi_UiView({
           </Flex>
         </Box>
 
-        <Box>
+        {/* <Box>
           {_.isEmpty(data) ? (
             <ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />
           ) : (
@@ -168,7 +169,7 @@ export function Notifikasi_UiView({
               )}
             </ScrollOnly>
           )}
-        </Box>
+        </Box> */}
       </Stack>
     </>
   );

src/app_modules/notifikasi/view/view_notifikasi.tsx

@@ -4,9 +4,11 @@ import { Notifikasi_UiLayout, Notifikasi_UiView } from "../ui";
 export default function Notifikasi_MainView({
   listNotifikasi,
   masterKategori,
+  kategoriName,
 }: {
   listNotifikasi: any[];
   masterKategori: any[];
+  kategoriName: string
 }) {
   return (
     <>