# fix

## Deskripsi:
- Perubahan tampilan notifikasi
- Pin map sesuai logo
- Pin map bisa custom
### No Issue

src/app_modules/notifikasi/component/card_skeleton.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import {
+  Box,
+  Card,
+  Divider,
+  Group,
+  Skeleton,
+  Stack,
+  Text,
+} from "@mantine/core";
+
+export function ComponentNotifikasi_CardSkeleton() {
+  return (
+    <>
+      {Array.from(new Array(10)).map((e, i) => (
+        <Card
+          key={i}
+          py={30}
+          style={{
+            backgroundColor: MainColor.darkblue,
+            color: "gray",
+            border: `2px solid ${AccentColor.darkblue}`,
+            borderRadius: "10px 10px 10px 10px",
+          }}
+          mb={"xs"}
+        >
+          <Card.Section px={"lg"}>
+            <Stack>
+              <Group position="apart">
+                <Skeleton h={20} w={100} radius={"xl"} />
+                <Skeleton h={20} w={100} radius={"xl"} />
+              </Group>
+              <Divider color="gray" />
+            </Stack>
+          </Card.Section>
+
+          <Card.Section p={"lg"}>
+            <Stack>
+              <Skeleton h={20} radius={"xl"} />
+              <Skeleton h={20} radius={"xl"} />
+            </Stack>
+          </Card.Section>
+
+          <Card.Section px={"lg"}>
+            <Stack>
+              
+              <Group position="apart">
+                <Skeleton h={20} w={100} radius={"xl"} />
+                <Skeleton h={20} w={100} radius={"xl"} />
+              </Group>
+            </Stack>
+          </Card.Section>
+        </Card>
+      ))}
+    </>
+  );
+}

src/app_modules/notifikasi/component/index.ts

@@ -0,0 +1,5 @@
+import { ComponentNotifikasi_CardSkeleton } from "./card_skeleton";
+import { ComponentNotifiaksi_CardView } from "./card_view";
+
+export { ComponentNotifiaksi_CardView };
+export { ComponentNotifikasi_CardSkeleton };

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

@@ -0,0 +1,17 @@
+"use server";
+
+import { funGlobal_getMasterKategoriApp } from "@/app_modules/_global/fun/get";
+
+export async function notifikasi_funGetKategoriApp() {
+  const data = await funGlobal_getMasterKategoriApp();
+  data.unshift({
+    id: "0",
+    isActive: true,
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    name: "Semua",
+    value: null,
+  });
+
+  return data;
+}

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

@@ -2,17 +2,39 @@
 
 import prisma from "@/app/lib/prisma";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+import _ from "lodash";
 
 export default async function notifikasi_getByUserId({
   page,
+  kategoriApp,
 }: {
   page: number;
+  kategoriApp?: string;
 }) {
   const userId = await user_getOneUserId();
   const takeData = 10;
   const skipData = page * takeData - takeData;
 
-  const data = await prisma.notifikasi.findMany({
+  if (kategoriApp === "Semua") {
+    const data = await prisma.notifikasi.findMany({
+      take: takeData,
+      skip: skipData,
+      orderBy: [
+        {
+          isRead: "asc",
+        },
+        { createdAt: "desc" },
+      ],
+      where: {
+        userId: userId,
+        userRoleId: "1",
+      },
+    });
+
+    return data;
+  }
+
+  const allData = await prisma.notifikasi.findMany({
     take: takeData,
     skip: skipData,
     orderBy: [
@@ -24,8 +46,9 @@ export default async function notifikasi_getByUserId({
     where: {
       userId: userId,
       userRoleId: "1",
+      kategoriApp: _.upperCase(kategoriApp),
     },
   });
 
-  return data;
+  return allData;
 }

src/app_modules/notifikasi/lib/dummy_data_kategori.ts

@@ -0,0 +1,30 @@
+export const kategoriApp = [
+  {
+    id: "1",
+    name: "Event",
+  },
+  {
+    id: "2",
+    name: "Job",
+  },
+  {
+    id: "3",
+    name: "Voting",
+  },
+  {
+    id: "4",
+    name: "Donasi",
+  },
+  {
+    id: "5",
+    name: "Investasi",
+  },
+  {
+    id: "6",
+    name: "Forum",
+  },
+  {
+    id: "7",
+    name: "Collaboration",
+  },
+];

src/app_modules/notifikasi/lib/global_state.ts

@@ -0,0 +1,6 @@
+import { atomWithStorage } from "jotai/utils";
+
+export const gs_notifikasi_kategori_app = atomWithStorage(
+  "gs_notifikasi_kategori_app",
+  "Semua"
+)

src/app_modules/notifikasi/lib/index.ts

@@ -0,0 +1,5 @@
+
+import { gs_notifikasi_kategori_app } from "./global_state";
+
+export { gs_notifikasi_kategori_app };
+

src/app_modules/notifikasi/ui/index.ts

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

@@ -0,0 +1,91 @@
+"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,43 +1,53 @@
 "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_job_hot_menu, gs_job_status } from "@/app_modules/job/global_state";
-import { Box, Center } 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 notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
-import { MODEL_NOTIFIKASI } from "../model/interface";
-import { ComponentNotifiaksi_CardView } from "./card_view";
-import {
-  gs_vote_hotMenu,
-  gs_vote_status,
-} from "@/app_modules/vote/global_state";
-import {
-  gs_event_hotMenu,
-  gs_event_status,
-} from "@/app_modules/event/global_state";
 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_job_hot_menu, gs_job_status } from "@/app_modules/job/global_state";
+import {
+  gs_vote_hotMenu,
+  gs_vote_status,
+} from "@/app_modules/vote/global_state";
+import { Box, Button, Center, Flex, Stack } from "@mantine/core";
+import { useAtom } from "jotai";
+import _, { find } from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
+import { ComponentNotifikasi_CardSkeleton } from "../component";
+import { ComponentNotifiaksi_CardView } from "../component/card_view";
+import notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
+import { MODEL_NOTIFIKASI } from "../model/interface";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import { gs_notifikasi_kategori_app } from "../lib";
+import { useShallowEffect } from "@mantine/hooks";
 
 export function Notifikasi_UiView({
   listNotifikasi,
+  masterKategori,
 }: {
-  listNotifikasi: MODEL_NOTIFIKASI[];
+  listNotifikasi: any[];
+  masterKategori: any[];
 }) {
-  const [data, setData] = useState(listNotifikasi);
+  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
+  );
 
-  // JOB
+  // Kategori App
   const [jobMenuId, setJobMenuId] = useAtom(gs_job_hot_menu);
   const [jobStatus, setJobStatus] = useAtom(gs_job_status);
   const [voteMenu, setVoteMenu] = useAtom(gs_vote_hotMenu);
@@ -49,27 +59,61 @@ export function Notifikasi_UiView({
   const [investasiMenu, setInvestasiMenu] = useAtom(gs_investas_menu);
   const [investasiStatus, setInvestasiStatus] = useAtom(gs_investasi_status);
 
-  // useShallowEffect(() => {
-  //   onLoadData({
-  //     onLoad(val) {
-  //       setData(val);
-  //     },
-  //   });
-  // }, []);
+  useShallowEffect(() => {
+    onLoadDataNotifikasi({ kategoriApp: activeKategori });
+  }, [activeKategori]);
 
-  // async function onLoadData({ onLoad }: { onLoad: (val: any) => void }) {
-  //   const loadData = await notifikasi_getByUserId({ page: 1 });
-  //   onLoad(loadData);
-  // }
+  async function onLoadDataNotifikasi({
+    kategoriApp,
+  }: {
+    kategoriApp: string;
+  }) {
+    const loadNotifikasi = await notifikasi_getByUserId({
+      page: 1,
+      kategoriApp: kategoriApp,
+    });
+
+    setData(loadNotifikasi as any);
+  }
 
   return (
     <>
-      <Box>
+      <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);
+                }}
+              >
+                {e.name}
+              </Button>
+            ))}
+          </Flex>
+        </Box>
+
         {_.isEmpty(data) ? (
           <ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />
         ) : (
           <ScrollOnly
-            height="92vh"
+            height="85vh"
             renderLoading={() => (
               <Center mt={"lg"}>
                 <ComponentGlobal_Loader />
@@ -121,7 +165,7 @@ export function Notifikasi_UiView({
             )}
           </ScrollOnly>
         )}
-      </Box>
+      </Stack>
     </>
   );
 }

src/app_modules/notifikasi/view/view_notifikasi.tsx

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

src/app_modules/notifikasi/view_notifikasi.tsx

@@ -1,19 +0,0 @@
-import UIGlobal_LayoutHeaderTamplate from "../_global/ui/ui_header_tamplate";
-import UIGlobal_LayoutTamplate from "../_global/ui/ui_layout_tamplate";
-import { Notifikasi_UiView } from "./component/ui_notifiaksi";
-
-export default function Notifikasi_MainView({
-  listNotifikasi,
-}: {
-  listNotifikasi: any[];
-}) {
-  return (
-    <>
-      <UIGlobal_LayoutTamplate
-        header={<UIGlobal_LayoutHeaderTamplate title="Notifikasi" />}
-      >
-        <Notifikasi_UiView listNotifikasi={listNotifikasi} />
-      </UIGlobal_LayoutTamplate>
-    </>
-  );
-}