#style: Tampilan home

Deskripsi:
- Tampilan tamplate layout positionnya di ganti fixed ( tidak bisa di tarik ke bawah jika sudah menjadi aplikasi )
- UI Home selesai
- UI User search selesai
- UI Notifikasi selesai
## No issuee

src/app_modules/notifikasi/component/card_view.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { Badge, Card, Divider, Group, Stack, Text } from "@mantine/core";
+import { IconCheck, IconChecks } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import notifikasi_funUpdateIsReadById from "../fun/update/fun_update_is_read_by_user_id";
+import { MODEL_NOTIFIKASI } from "../model/interface";
+import { redirectDetailForumPage } from "./path/forum";
+import { redirectJobPage } from "./path/job";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
+import notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
+
+export function ComponentNotifiaksi_CardView({
+  data,
+  onLoadData,
+  activePage,
+  onSetJob,
+}: {
+  data: MODEL_NOTIFIKASI;
+  onLoadData: (val: any) => void;
+  activePage: number;
+  onSetJob: (val: any) => void;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <Card
+        style={{
+          backgroundColor: data?.isRead
+            ? MainColor.darkblue
+            : AccentColor.darkblue,
+          color: data?.isRead ? "gray" : "white",
+          border: data?.isRead
+            ? `2px solid ${AccentColor.darkblue}`
+            : `2px solid ${AccentColor.blue}`,
+          borderRadius: "10px 10px 10px 10px",
+        }}
+        my={"xs"}
+        onClick={async () => {
+          data?.kategoriApp === "JOB" &&
+            redirectJobPage({
+              data: data,
+              router: router,
+              onSetPage(val) {
+                onSetJob(val);
+              },
+            });
+
+          data?.kategoriApp === "FORUM" &&
+            redirectDetailForumPage({
+              data: data,
+              router: router,
+            });
+
+          const updateIsRead = await notifikasi_funUpdateIsReadById({
+            notifId: data?.id,
+          });
+
+          if (updateIsRead.status === 200) {
+            // console.log(updateIsRead.status);
+            // const loadData = await notifikasi_getByUserId({ page: activePage });
+            // onLoadData(loadData);
+            // console.log("berhasil load")
+          }
+        }}
+      >
+        {/* <pre>{JSON.stringify(e, null, 2)}</pre> */}
+        <Card.Section p={"sm"}>
+          <Stack spacing={"xs"}>
+            <Group position="apart">
+              <Text fw={"bold"} fz={10}>
+                # {data?.kategoriApp}
+              </Text>
+              {data?.status ? (
+                <Badge
+                  //   fz={10}
+                  variant="outline"
+                  color={data?.isRead ? "gray" : "teal"}
+                >
+                  {data?.status}
+                </Badge>
+              ) : (
+                ""
+              )}
+            </Group>
+            <Divider color={data?.isRead ? "gray" : "white"} />
+          </Stack>
+        </Card.Section>
+        <Card.Section px={"sm"} pb={"sm"}>
+          <Stack spacing={data.kategoriApp === "FORUM" ? 0 : "xs"}>
+            <Text lineClamp={2} fw={"bold"}>
+              {data?.title}
+            </Text>
+            {data.kategoriApp === "FORUM" ? (
+              <div
+                style={{ fontSize: 12 }}
+                dangerouslySetInnerHTML={{ __html: data?.pesan }}
+              />
+            ) : (
+              <Text lineClamp={2}>{data?.pesan}</Text>
+            )}
+          </Stack>
+        </Card.Section>
+        <Card.Section p={"sm"}>
+          <Group position="apart">
+            <Text fz={10} color="gray">
+              {new Intl.DateTimeFormat("id-ID", {
+                dateStyle: "long",
+              }).format(data?.createdAt)}
+
+              <Text span inherit fz={10} color="gray">
+                {", "}
+                {new Intl.DateTimeFormat("id-ID", {
+                  timeStyle: "short",
+                }).format(data?.createdAt)}
+              </Text>
+            </Text>
+            {data?.isRead ? (
+              <Group spacing={5}>
+                <IconChecks color="gray" size={10} />
+                <Text fz={10} color="gray">
+                  Sudah dilihat
+                </Text>
+              </Group>
+            ) : (
+              <Group spacing={5}>
+                <IconCheck color="gray" size={10} />
+                <Text fz={10} color="gray">
+                  Belum dilihat
+                </Text>
+              </Group>
+            )}
+          </Group>
+        </Card.Section>
+      </Card>
+    </>
+  );
+}

src/app_modules/notifikasi/component/path/forum.ts

@@ -0,0 +1,26 @@
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { MODEL_NOTIFIKASI } from "../../model/interface";
+
+export function redirectDetailForumPage({
+  data,
+  router,
+}: {
+  data: MODEL_NOTIFIKASI;
+  router: AppRouterInstance;
+}) {
+  if (data.status === null) {
+    const path = RouterForum.main_detail + data.appId;
+    router.push(path, { scroll: false });
+  }
+
+  if (data.status === "Report Komentar") {
+    const path = RouterForum.detail_report_komentar + data.appId;
+    router.push(path, { scroll: false });
+  }
+
+  if (data.status === "Report Posting") {
+    const path = RouterForum.detail_report_posting + data.appId;
+    router.push(path, { scroll: false });
+  }
+}

src/app_modules/notifikasi/component/path/job.ts

@@ -0,0 +1,31 @@
+import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { MODEL_NOTIFIKASI } from "../../model/interface";
+
+export function redirectJobPage({
+  data,
+  router,
+  onSetPage,
+}: {
+  data: MODEL_NOTIFIKASI;
+  router: AppRouterInstance;
+  onSetPage: (val: any) => void;
+}) {
+  const path = RouterJob.status;
+
+  if (data.status === "Publish") {
+    onSetPage({
+      menuId: 2,
+      status: data.status,
+    });
+  }
+
+  if (data.status === "Reject") {
+    onSetPage({
+      menuId: 2,
+      status: data.status,
+    });
+  }
+
+  router.push(path, {scroll: false});
+}

src/app_modules/notifikasi/component/ui_notifiaksi.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import ComponentGlobal_IsEmptyData from "@/app_modules/component_global/is_empty_data";
+import ComponentGlobal_UI_Loader from "@/app_modules/component_global/ui/ui_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";
+
+export function Notifikasi_UiView({
+  listNotifikasi,
+}: {
+  listNotifikasi: MODEL_NOTIFIKASI[];
+}) {
+  const [data, setData] = useState(listNotifikasi);
+  const [activePage, setActivePage] = useState(1);
+
+  // JOB
+  const [jobMenuId, setJobMenuId] = useAtom(gs_job_hot_menu);
+  const [jobStatus, setJobStatus] = useAtom(gs_job_status);
+
+    useShallowEffect(() => {
+      onLoadData({
+        onLoad(val) {
+          setData(val);
+        },
+      });
+    }, []);
+
+    async function onLoadData({ onLoad }: { onLoad: (val: any) => void }) {
+      const loadData = await notifikasi_getByUserId({ page: 1 });
+      onLoad(loadData);
+    }
+
+  return (
+    <>
+      <Box>
+        {_.isEmpty(data) ? (
+          <ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />
+        ) : (
+          <ScrollOnly
+            height="92vh"
+            renderLoading={() => (
+              <Center mt={"lg"}>
+                <ComponentGlobal_UI_Loader />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await notifikasi_getByUserId({
+                page: activePage + 1,
+              });
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
+              <ComponentNotifiaksi_CardView
+                data={item}
+                onLoadData={(val) => setData(val)}
+                activePage={activePage}
+                onSetJob={(val) => {
+                  setJobMenuId(val.menuId);
+                  setJobStatus(val.status);
+                }}
+              />
+            )}
+          </ScrollOnly>
+        )}
+      </Box>
+    </>
+  );
+}

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

@@ -3,10 +3,14 @@
 import prisma from "@/app/lib/prisma";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 
-export default async function notifikasi_getByUserId() {
+export default async function notifikasi_getByUserId({page}: {page: number }) {
   const userId = await user_getOneUserId();
+   const takeData = 10;
+   const skipData = page * takeData - takeData;
 
   const data = await prisma.notifikasi.findMany({
+    take: takeData,
+    skip: skipData,
     orderBy: {
       createdAt: "desc",
     },

src/app_modules/notifikasi/index.ts

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

src/app_modules/notifikasi/main/index.tsx

@@ -1,236 +0,0 @@
-"use client";
-
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
-import ComponentGlobal_HeaderTamplate from "@/app_modules/component_global/header_tamplate";
-import {
-  Badge,
-  Card,
-  Divider,
-  Group,
-  Paper,
-  SimpleGrid,
-  Stack,
-  Text,
-} from "@mantine/core";
-import { MODEL_NOTIFIKASI } from "../model/interface";
-import { useState } from "react";
-import adminNotifikasi_countNotifikasi from "@/app_modules/admin/notifikasi/fun/count/count_is_read";
-import adminNotifikasi_getByUserId from "@/app_modules/admin/notifikasi/fun/get/get_notifikasi_by_user_id";
-import adminNotifikasi_funUpdateIsReadById from "@/app_modules/admin/notifikasi/fun/update/fun_update_is_read_by_id";
-import { IconChecks, IconCheck } from "@tabler/icons-react";
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
-import { useRouter } from "next/navigation";
-import { RouterJob } from "@/app/lib/router_hipmi/router_job";
-import notifikasi_funUpdateIsReadById from "../fun/update/fun_update_is_read_by_user_id";
-import { useAtom } from "jotai";
-import { gs_job_hot_menu, gs_job_status } from "@/app_modules/job/global_state";
-import _ from "lodash";
-import ComponentGlobal_IsEmptyData from "@/app_modules/component_global/is_empty_data";
-import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
-import notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
-import { useShallowEffect } from "@mantine/hooks";
-import { data } from "autoprefixer";
-
-export default function Notifikasi_MainView({
-  listNotifikasi,
-}: {
-  listNotifikasi: any[];
-}) {
-  return (
-    <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentGlobal_HeaderTamplate title="Notifikasi" />}
-      >
-        <MainView listNotifikasi={listNotifikasi} />
-      </AppComponentGlobal_LayoutTamplate>
-    </>
-  );
-}
-
-function MainView({ listNotifikasi }: { listNotifikasi: MODEL_NOTIFIKASI[] }) {
-  const router = useRouter();
-  const [data, setData] = useState(listNotifikasi);
-
-  // JOB
-  const [jobMenuId, setJobMenuId] = useAtom(gs_job_hot_menu);
-  const [jobStatus, setJobStatus] = useAtom(gs_job_status);
-
-  useShallowEffect(() => {
-    onLoadData({
-      onLoad(val) {
-        setData(val);
-      },
-    });
-  }, []);
-
-  async function onLoadData({ onLoad }: { onLoad: (val: any) => void }) {
-    const loadData = await notifikasi_getByUserId();
-    onLoad(loadData);
-  }
-
-  if (_.isEmpty(data)) {
-    return <ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />;
-  }
-  return (
-    <>
-      <SimpleGrid
-        cols={1}
-        spacing="lg"
-        breakpoints={[
-          { maxWidth: "md", cols: 2, spacing: "md" },
-          { maxWidth: "sm", cols: 2, spacing: "sm" },
-          { maxWidth: "xs", cols: 1, spacing: "sm" },
-        ]}
-      >
-        {data.map((e, i) => (
-          <Card
-            key={e?.id}
-            // withBorder
-            bg={e?.isRead ? "gray.1" : "gray.4"}
-            sx={{
-              borderColor: "gray",
-              borderStyle: "solid",
-              borderWidth: "0.5px",
-            }}
-            onClick={async () => {
-              e?.kategoriApp === "JOB" &&
-                redirectJobPage({
-                  data: e,
-                  router: router,
-                  onSetPage(val) {
-                    setJobMenuId(val.menuId);
-                    setJobStatus(val.status);
-                  },
-                });
-
-              e?.kategoriApp === "FORUM" &&
-                redirectDetailForumPage({
-                  data: e,
-                  router: router,
-                });
-
-              const updateIsRead = await notifikasi_funUpdateIsReadById({
-                notifId: e?.id,
-              });
-              if (updateIsRead.status === 200) return null;
-            }}
-          >
-            {/* <pre>{JSON.stringify(e, null, 2)}</pre> */}
-            <Card.Section p={"sm"}>
-              <Stack spacing={"xs"}>
-                <Group position="apart">
-                  <Text fw={"bold"} fz={10}>
-                    # {e?.kategoriApp}
-                  </Text>
-                  {e?.status ? <Badge fz={10}>{e?.status}</Badge> : ""}
-                </Group>
-                <Divider color="gray.3" />
-              </Stack>
-            </Card.Section>
-            <Card.Section px={"sm"} pb={"sm"}>
-              <Stack spacing={e.kategoriApp === "FORUM" ? 0 : "xs"}>
-                <Text lineClamp={2} fw={"bold"} fz={"xs"}>
-                  {e?.title}
-                </Text>
-                {e.kategoriApp === "FORUM" ? (
-                  <div
-                    style={{ fontSize: 12 }}
-                    dangerouslySetInnerHTML={{ __html: e?.pesan }}
-                  />
-                ) : (
-                  // <Text >
-                  // </Text>
-                  <Text lineClamp={2} fz={"xs"}>
-                    {e?.pesan}
-                  </Text>
-                )}
-              </Stack>
-            </Card.Section>
-            <Card.Section p={"sm"}>
-              <Group position="apart">
-                <Text fz={10} color="gray">
-                  {new Intl.DateTimeFormat("id-ID", {
-                    dateStyle: "long",
-                  }).format(e?.createdAt)}
-
-                  <Text span inherit fz={10} color="gray">
-                    {", "}
-                    {new Intl.DateTimeFormat("id-ID", {
-                      timeStyle: "short",
-                    }).format(e?.createdAt)}
-                  </Text>
-                </Text>
-                {e?.isRead ? (
-                  <Group spacing={5}>
-                    <IconChecks color="gray" size={10} />
-                    <Text fz={10} color="gray">
-                      Sudah dilihat
-                    </Text>
-                  </Group>
-                ) : (
-                  <Group spacing={5}>
-                    <IconCheck color="gray" size={10} />
-                    <Text fz={10} color="gray">
-                      Belum dilihat
-                    </Text>
-                  </Group>
-                )}
-              </Group>
-            </Card.Section>
-          </Card>
-        ))}
-      </SimpleGrid>
-    </>
-  );
-}
-
-function redirectJobPage({
-  data,
-  router,
-  onSetPage,
-}: {
-  data: MODEL_NOTIFIKASI;
-  router: AppRouterInstance;
-  onSetPage: (val: any) => void;
-}) {
-  const path = RouterJob.status;
-
-  if (data.status === "Publish") {
-    onSetPage({
-      menuId: 2,
-      status: data.status,
-    });
-  }
-
-  if (data.status === "Reject") {
-    onSetPage({
-      menuId: 2,
-      status: data.status,
-    });
-  }
-
-  router.push(path);
-}
-
-function redirectDetailForumPage({
-  data,
-  router,
-}: {
-  data: MODEL_NOTIFIKASI;
-  router: AppRouterInstance;
-}) {
-  if (data.status === null) {
-    const path = RouterForum.main_detail + data.appId;
-    router.push(path);
-  }
-
-  if (data.status === "Report Komentar") {
-    const path = RouterForum.detail_report_komentar + data.appId;
-    router.push(path);
-  }
-
-  if (data.status === "Report Posting") {
-    const path = RouterForum.detail_report_posting + data.appId;
-    router.push(path);
-  }
-}

src/app_modules/notifikasi/view_notifikasi.tsx

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