Donasi Info Admni

# feat
- info admin
- hapus admin
## Issue: Loading data belum untuk versi alfa

src/app_modules/donasi/main/layout.tsx

@@ -14,7 +14,7 @@ import {
   Title,
 } from "@mantine/core";
 import React, { useState } from "react";
-import HeaderTamplateDonasi from "../component/header_tamplate";
+import ComponentDonasi_HeaderTamplate from "../component/header_tamplate";
 
 import {
   IconBell,
@@ -33,11 +33,16 @@ import { useAtom } from "jotai";
 import { gs_donasi_hot_menu } from "../global_state";
 import { RouterCrowd } from "@/app/lib/router_hipmi/router_crowd";
 import { title } from "process";
+import _ from "lodash";
 
 export default function LayoutDonasi({
   children,
+  userId,
+  isRead,
 }: {
   children: React.ReactNode;
+  userId: string;
+  isRead: boolean[];
 }) {
   const router = useRouter();
   const [active, setActive] = useAtom(gs_donasi_hot_menu);
@@ -72,10 +77,22 @@ export default function LayoutDonasi({
                 <IconChevronLeft />
               </ActionIcon>
               <Title order={5}>Donasi</Title>
-              <ActionIcon radius={"md"}  variant="transparent" onClick={() => router.push(RouterDonasi.notif_page + `${"123"}`)}>
-                <Indicator processing color="orange" >
+              <ActionIcon
+                radius={"md"}
+                variant="transparent"
+                onClick={() =>
+                  router.push(RouterDonasi.notif_page + `${userId}`)
+                }
+              >
+                {_.isEmpty(isRead) ? (
                   <IconBell />
-                </Indicator>
+                ) : isRead.includes(false) ? (
+                  <Indicator processing color="orange">
+                    <IconBell />
+                  </Indicator>
+                ) : (
+                  <IconBell />
+                )}
               </ActionIcon>
             </Group>
           </Header>
@@ -112,6 +129,7 @@ export default function LayoutDonasi({
           </Footer>
         }
       >
+        {/* {JSON.stringify(isRead)} */}
         {children}
       </AppShell>
     </>

src/app_modules/donasi/main/notif/layout.tsx

@@ -2,12 +2,12 @@
 
 import { AppShell } from "@mantine/core"
 import React from "react"
-import HeaderTamplateDonasi from "../../component/header_tamplate"
+import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate"
 
 export default function LayoutDonasi_NotifPage({children}: {children: React.ReactNode}){
     return<>
     <AppShell
-    header={<HeaderTamplateDonasi title="Pemberitahuan"/>}
+    header={<ComponentDonasi_HeaderTamplate title="Pemberitahuan"/>}
     >
 
         {children}

src/app_modules/donasi/main/notif/notif_page.tsx

@@ -1,8 +1,90 @@
-"use client"
+"use client";
 
-export default function Donasi_NotifPage() {
-    return<>
-    ini halaman notif
-    
+import { useState } from "react";
+import { MODEL_DONASI_NOTIF } from "../../model/interface";
+import {
+  Box,
+  Group,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import moment from "moment";
+
+import kabar from "../../detail/detail_main/kabar";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { Donasi_funUpdateNotifById } from "../../fun/update/fun_update_notif_by_user_id";
+import { NotifGagal } from "../../component/notifikasi/notif_gagal";
+import { useRouter } from "next/navigation";
+
+export default function Donasi_NotifPage({
+  dataNotif,
+}: {
+  dataNotif: MODEL_DONASI_NOTIF[];
+}) {
+  const router = useRouter();
+  const [notif, setNotif] = useState(dataNotif);
+  return (
+    <>
+      <Box>
+        {/* <pre>{JSON.stringify(notif, null, 2)}</pre> */}
+        <SimpleGrid
+          cols={4}
+          spacing="lg"
+          breakpoints={[
+            { maxWidth: "md", cols: 3, spacing: "md" },
+            { maxWidth: "sm", cols: 2, spacing: "sm" },
+            { maxWidth: "xs", cols: 1, spacing: "sm" },
+          ]}
+        >
+          {notif.map((e) => (
+            <Paper
+              key={e.id}
+              bg={e.isRead === false ? "gray.5" : "gray.1"}
+              p={"sm"}
+            >
+              <Stack spacing={"xs"}>
+                <Stack>
+                  <Group position="apart">
+                    <Text fw={"bold"} truncate>
+                      {e.Donasi_Kabar.title}
+                    </Text>
+                    <Text fz={"xs"}>{moment(e.createdAt).format("ll")}</Text>
+                  </Group>
+                  <Stack spacing={0}>
+                    <Text lineClamp={2}>{e.Donasi_Kabar.deskripsi}</Text>
+                    <Text
+                      c={"blue"}
+                      onClick={() =>
+                        onClick(router as any, e.Donasi_Kabar.id, e.id)
+                      }
+                    >
+                      Buka Kabar
+                    </Text>
+                  </Stack>
+                </Stack>
+              </Stack>
+            </Paper>
+          ))}
+        </SimpleGrid>
+      </Box>
     </>
-}
+  );
+}
+
+async function onClick(
+  router: AppRouterInstance,
+  kabarId: string,
+  notifId: string
+) {
+  await Donasi_funUpdateNotifById(notifId).then((res) => {
+    if (res.status === 200) {
+      router.push(RouterDonasi.detail_notif + `${kabarId}`);
+    } else {
+      NotifGagal("Server Error");
+    }
+  });
+}