diff --git a/package.json b/package.json
index ef27deb7..dcaedb90 100644
--- a/package.json
+++ b/package.json
@@ -88,6 +88,7 @@
     "utf-8-validate": "^6.0.3",
     "uuid": "^9.0.1",
     "wibu": "bipproduction/wibu",
+    "wibu-pkg": "^1.0.3",
     "yaml": "^2.3.2"
   }
 }
diff --git a/src/app/dev/admin/layout.tsx b/src/app/dev/admin/layout.tsx
index 40feb1d4..bc8fd499 100644
--- a/src/app/dev/admin/layout.tsx
+++ b/src/app/dev/admin/layout.tsx
@@ -13,9 +13,10 @@ export default async function Layout({
   const userLoginId = await funGetUserIdByToken();
 
   const dataUser = await funGlobal_getUserById({ userId: userLoginId });
-  const listNotif = await adminNotifikasi_getByUserId();
+  const listNotifikasi = await adminNotifikasi_getByUserId();
   const countNotifikasi = await adminNotifikasi_countNotifikasi();
 
+
   return (
     <>
       {/* <AdminLayout
@@ -25,7 +26,13 @@ export default async function Layout({
       >
         {children}
       </AdminLayout> */}
-      <Admin_NewLayout user={dataUser as any}>{children}</Admin_NewLayout>
+      <Admin_NewLayout
+        user={dataUser as any}
+        countNotifikasi={countNotifikasi as any}
+        listNotifikasi={listNotifikasi as []}
+      >
+        {children}
+      </Admin_NewLayout>
     </>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3da2327d..5b55d385 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import "./globals.css";
 import { TokenProvider } from "./lib/token";
 import dotenv from "dotenv";
 import { ServerEnv } from "./lib/server_env";
+import { RealtimeProvider } from "./lib";
 dotenv.config({
   path: ".env",
 });
@@ -45,6 +46,7 @@ export default function RootLayout({
     <RootStyleRegistry>
       <MqttLoader />
       <TokenProvider token={token} envObject={envObject} />
+      <RealtimeProvider />
       {children}
     </RootStyleRegistry>
   );
diff --git a/src/app/lib/global_state.ts b/src/app/lib/global_state.ts
new file mode 100644
index 00000000..63963eb7
--- /dev/null
+++ b/src/app/lib/global_state.ts
@@ -0,0 +1,23 @@
+import { atom } from "jotai";
+
+export type IRealtimeData = {
+  status?: "Publish" | "Review" | "Draft" | "Reject";
+  appId: string;
+  userId: string;
+  pesan: string;
+  title: string;
+  kategoriApp:
+    | "JOB"
+    | "VOTING"
+    | "EVENT"
+    | "DONASI"
+    | "INVESTASI"
+    | "COLLABORATION"
+    | "FORUM";
+  userRole?: "USER" | "ADMIN";
+};
+
+export const gs_realtimeData = atom<IRealtimeData | null>(null);
+export const gs_admin_ntf = atom<number>(0);
+export const gs_user_ntf = atom<number>(0);
+
diff --git a/src/app/lib/index.ts b/src/app/lib/index.ts
index 4d002a66..976acb98 100644
--- a/src/app/lib/index.ts
+++ b/src/app/lib/index.ts
@@ -4,11 +4,13 @@ import prisma from "./prisma";
 import { pathAssetImage } from "./path_asset_image";
 import { RouterImagePreview } from "./router_hipmi/router_image_preview";
 import { RouterAdminGlobal } from "./router_admin/router_admin_global";
+import RealtimeProvider from "./realtime_provider";
 
 export { DIRECTORY_ID };
 export { prisma };
 export { APIs };
 export { pathAssetImage };
+export { RealtimeProvider };
 
 // Router
 export { RouterImagePreview };
diff --git a/src/app/lib/realtime_provider.tsx b/src/app/lib/realtime_provider.tsx
new file mode 100644
index 00000000..361c4a43
--- /dev/null
+++ b/src/app/lib/realtime_provider.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { useShallowEffect } from "@mantine/hooks";
+import { useAtom } from "jotai";
+import { WibuRealtime } from "wibu-pkg";
+import {
+  gs_admin_ntf,
+  gs_realtimeData,
+  gs_user_ntf,
+  IRealtimeData,
+} from "./global_state";
+
+export type TypeNotification = {
+  type: "message" | "notification" 
+  pushNotificationTo: "ADMIN" | "USER";
+  dataMessage?: IRealtimeData;
+  userLoginId?: string;
+};
+
+const WIBU_REALTIME_TOKEN: any = process.env.NEXT_PUBLIC_WIBU_REALTIME_TOKEN;
+export default function RealtimeProvider() {
+  const [dataRealtime, setDataRealtime] = useAtom(gs_realtimeData);
+  const [newAdminNtf, setNewAdminNtf] = useAtom(gs_admin_ntf);
+  const [newUserNtf, setNewUserNtf] = useAtom(gs_user_ntf);
+
+  useShallowEffect(() => {
+    WibuRealtime.init({
+      onData(data: TypeNotification) {
+        if (data.type == "notification" && data.pushNotificationTo == "ADMIN") {
+          setNewAdminNtf((e) => e + 1);
+        }
+
+        if (data.type == "notification" && data.pushNotificationTo == "USER") {
+          setNewUserNtf((e) => e + 1);
+          setDataRealtime(data.dataMessage as any);
+        }
+
+        if (data.type == "message") {
+          // console.log(data.dataMessage);
+          setDataRealtime(data.dataMessage as any);
+        }
+      },
+      project: "hipmi",
+      WIBU_REALTIME_TOKEN: WIBU_REALTIME_TOKEN,
+    });
+  }, []);
+
+  return null;
+}
diff --git a/src/app/zCoba/test1/page.tsx b/src/app/zCoba/test1/page.tsx
new file mode 100644
index 00000000..4439d229
--- /dev/null
+++ b/src/app/zCoba/test1/page.tsx
@@ -0,0 +1,55 @@
+"use client";
+import {
+  gs_admin_ntf,
+  gs_realtimeData,
+  IRealtimeData,
+} from "@/app/lib/global_state";
+import { Button, Stack } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useAtom } from "jotai";
+import { WibuRealtime } from "wibu-pkg";
+import { v4 } from "uuid";
+import { useState } from "react";
+const angka = 10;
+export default function Page() {
+  const [dataRealtime, setDataRealtime] = useAtom(gs_realtimeData);
+  const [adminNtf, setAdminNtf] = useAtom(gs_admin_ntf);
+  const [notif, setNotif] = useState(angka);
+  
+  useShallowEffect(() => {
+    if (adminNtf) {
+      setNotif((e) => e + 1);
+    }
+  }, [adminNtf]);
+
+  async function onSend() {
+    const newData: IRealtimeData = {
+      appId: v4(),
+      status: "Publish",
+      userId: "user1",
+      pesan: "apa kabar",
+      title: "coba",
+      kategoriApp: "INVESTASI",
+      userRole: "ADMIN",
+    };
+
+    WibuRealtime.setData({
+      type: "message",
+      pushNotificationTo: "USER",
+      dataMessage: newData,
+    });
+  }
+
+  return (
+    <Stack p={"md"} align="center" justify="center" h={"80vh"}>
+      {notif}
+      <Button
+        onClick={() => {
+          onSend();
+        }}
+      >
+        Dari test 1
+      </Button>
+    </Stack>
+  );
+}
diff --git a/src/app/zCoba/test2/page.tsx b/src/app/zCoba/test2/page.tsx
new file mode 100644
index 00000000..e717b3f3
--- /dev/null
+++ b/src/app/zCoba/test2/page.tsx
@@ -0,0 +1,48 @@
+"use client";
+import { gs_realtimeData, IRealtimeData } from "@/app/lib/global_state";
+import { Button, Stack } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useAtom } from "jotai";
+import { WibuRealtime } from "wibu-pkg";
+import { v4 } from "uuid";
+
+export default function Page() {
+  const [dataRealtime, setDataRealtime] = useAtom(gs_realtimeData);
+
+  useShallowEffect(() => {
+    console.log(
+      dataRealtime?.userId == "user2"
+        ? console.log("")
+        : console.log(dataRealtime)
+    );
+  }, [dataRealtime]);
+
+  async function onSend() {
+    const newData: IRealtimeData = {
+      appId: v4(),
+      status: "Publish",
+      userId: "user2",
+      pesan: "apa kabar",
+      title: "coba",
+      kategoriApp: "INVESTASI",
+      userRole: "USER",
+    };
+
+    WibuRealtime.setData({
+      type: "notification",
+      pushNotificationTo: "ADMIN",
+    });
+  }
+
+  return (
+    <Stack p={"md"} align="center" justify="center" h={"80vh"}>
+      <Button
+        onClick={() => {
+          onSend();
+        }}
+      >
+        Dari test 2 cuma notif
+      </Button>
+    </Stack>
+  );
+}
diff --git a/src/app/zz-makuro/page.tsx b/src/app/zz-makuro/page.tsx
index a984807d..665c3a1f 100644
--- a/src/app/zz-makuro/page.tsx
+++ b/src/app/zz-makuro/page.tsx
@@ -1,13 +1,14 @@
 "use client";
-import { useShallowEffect } from "@mantine/hooks";
-import { useState } from "react";
+import { useHookstate } from "@hookstate/core";
+import { Button, Stack } from "@mantine/core";
+
 
 export default function Page() {
-  const [origin, setOrigin] = useState("");
-  useShallowEffect(() => {
-    if (typeof window !== "undefined") {
-      setOrigin(window.location.origin);
-    }
-  }, []);
-  return <div>{origin}</div>;
+
+  return (
+    <Stack>
+
+      <Button onClick={() => {}}>tekan</Button>
+    </Stack>
+  );
 }
diff --git a/src/app_modules/admin/_admin_global/_component/comp_button_user_on_navbar.tsx b/src/app_modules/admin/_admin_global/_component/comp_button_user_on_navbar.tsx
new file mode 100644
index 00000000..c9240494
--- /dev/null
+++ b/src/app_modules/admin/_admin_global/_component/comp_button_user_on_navbar.tsx
@@ -0,0 +1,75 @@
+import { AccentColor } from "@/app_modules/_global/color";
+import { MODEL_USER } from "@/app_modules/home/model/interface";
+import { Menu, ActionIcon, Stack, Grid, Center, Text } from "@mantine/core";
+import { IconUserCircle, IconUser, IconPhone } from "@tabler/icons-react";
+import { useState } from "react";
+import Admin_Logout from "../logout";
+
+export function Admin_ComponentButtonUserCircle({ dataUser }: { dataUser: MODEL_USER }) {
+  const [isOpenMenuUser, setOpenMenuUser] = useState(false);
+  return (
+    <>
+      <Menu
+        withArrow
+        arrowPosition="center"
+        opened={isOpenMenuUser}
+        onChange={setOpenMenuUser}
+        shadow="md"
+        width={250}
+        position="bottom-start"
+        styles={{
+          dropdown: {
+            backgroundColor: AccentColor.blue,
+            border: `1px solid ${AccentColor.skyblue}`,
+          },
+          item: {
+            color: "white",
+            ":hover": {
+              backgroundColor: "gray",
+            },
+          },
+          arrow: {
+            borderTopColor: AccentColor.skyblue,
+            borderLeftColor: AccentColor.skyblue,
+          },
+        }}
+      >
+        <Menu.Target>
+          <ActionIcon variant="transparent" onClick={() => console.log("test")}>
+            <IconUserCircle color="white" />
+          </ActionIcon>
+        </Menu.Target>
+
+        <Menu.Dropdown>
+          <Stack spacing={5} px={"xs"}>
+            <Menu.Item>
+              <Grid>
+                <Grid.Col span={2}>
+                  <IconUser />
+                </Grid.Col>
+                <Grid.Col span={"auto"}>
+                  <Text lineClamp={1}>{dataUser.username}</Text>
+                </Grid.Col>
+              </Grid>
+            </Menu.Item>
+            <Menu.Item>
+              <Grid>
+                <Grid.Col span={2}>
+                  <IconPhone />
+                </Grid.Col>
+                <Grid.Col span={"auto"}>
+                  <Text lineClamp={1}>+{dataUser.nomor}</Text>
+                </Grid.Col>
+              </Grid>
+            </Menu.Item>
+
+            <Menu.Divider />
+            <Center py={"xs"}>
+              <Admin_Logout />
+            </Center>
+          </Stack>
+        </Menu.Dropdown>
+      </Menu>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/app_modules/admin/_admin_global/_ui/ui_navbar_admin.tsx b/src/app_modules/admin/_admin_global/_ui/ui_navbar_admin.tsx
new file mode 100644
index 00000000..d71b65f8
--- /dev/null
+++ b/src/app_modules/admin/_admin_global/_ui/ui_navbar_admin.tsx
@@ -0,0 +1,203 @@
+import { MainColor } from "@/app_modules/_global/color";
+import { Box, NavLink, Text } from "@mantine/core";
+import { IconCircleDot, IconCircleDotFilled } from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { newListAdminPage } from "../../new_list_page";
+import { gs_admin_navbar_isActive_dropdown } from "../new_global_state";
+
+export default function Admin_UiNavbar({
+  userRoleId,
+  activeId,
+  activeChildId,
+  setActiveId,
+  setActiveChildId,
+}: {
+  userRoleId: string;
+  activeId: string;
+  activeChildId: string;
+  setActiveId: (val: any) => void;
+  setActiveChildId: (val: any) => void;
+}) {
+  const router = useRouter();
+  //   global state
+  const [openDropdown, setOpenDropdown] = useAtom(
+    gs_admin_navbar_isActive_dropdown
+  );
+
+  // const [activeId, setActiveId] = useAtom(gs_admin_navbar_menu);
+  // const [activeChildId, setActiveChildId] = useAtom(gs_admin_navbar_subMenu);
+
+  //   Kalau fix developer navbar, fix juga navbar admin, dan berlaku sebaliknya
+  const developerNavbar = newListAdminPage.map((parent) => (
+    <Box key={parent.id}>
+      <NavLink
+        opened={openDropdown && activeId === parent.id}
+        styles={{
+          icon: {
+            color: activeId === parent.id ? MainColor.yellow : "white",
+          },
+          label: {
+            color: activeId === parent.id ? MainColor.yellow : "white",
+          },
+        }}
+        style={{
+          color: "white",
+          transition: "0.5s",
+        }}
+        sx={{
+          ":hover": {
+            backgroundColor: "transparent",
+          },
+        }}
+        fw={activeId === parent.id ? "bold" : "normal"}
+        label={<Text>{parent.name}</Text>}
+        icon={parent.icon}
+        onClick={() => {
+          setActiveId(parent.id);
+          setActiveChildId("");
+
+          parent.path == "" ? setActiveChildId(parent.child[0].id) : "";
+          parent.path == ""
+            ? router.push(parent.child[0].path)
+            : router.push(parent.path);
+
+          openDropdown && activeId === parent.id
+            ? setOpenDropdown(false)
+            : setOpenDropdown(true);
+        }}
+        // active={activeId === parent.id}
+      >
+        {/* Navlink Children */}
+        {!_.isEmpty(parent.child) &&
+          parent.child.map((child) => (
+            <Box key={child.id}>
+              <NavLink
+                styles={{
+                  icon: {
+                    color:
+                      activeChildId === child.id ? MainColor.yellow : "white",
+                  },
+                  label: {
+                    color:
+                      activeChildId === child.id ? MainColor.yellow : "white",
+                  },
+                }}
+                style={{
+                  color: "white",
+                  transition: "0.5s",
+                }}
+                sx={{
+                  ":hover": {
+                    backgroundColor: "transparent",
+                  },
+                }}
+                fw={activeChildId === child.id ? "bold" : "normal"}
+                label={<Text>{child.name}</Text>}
+                icon={
+                  activeChildId === child.id ? (
+                    <IconCircleDotFilled size={10} />
+                  ) : (
+                    <IconCircleDot size={10} />
+                  )
+                }
+                onClick={() => {
+                  setActiveChildId(child.id);
+                  router.push(child.path);
+                }}
+                active={activeId === child.id}
+              />
+            </Box>
+          ))}
+      </NavLink>
+    </Box>
+  ));
+
+  const bukanDeveloper = newListAdminPage.slice(0, -1);
+  const adminNavbar = bukanDeveloper.map((parent) => (
+    <Box key={parent.id}>
+      <NavLink
+        opened={openDropdown && activeId === parent.id}
+        styles={{
+          icon: {
+            color: activeId === parent.id ? MainColor.yellow : "white",
+          },
+          label: {
+            color: activeId === parent.id ? MainColor.yellow : "white",
+          },
+        }}
+        style={{
+          color: "white",
+          transition: "0.5s",
+        }}
+        sx={{
+          ":hover": {
+            backgroundColor: "transparent",
+          },
+        }}
+        fw={activeId === parent.id ? "bold" : "normal"}
+        label={<Text>{parent.name}</Text>}
+        icon={parent.icon}
+        onClick={() => {
+          setActiveId(parent.id);
+          setActiveChildId("");
+
+          parent.path == "" ? setActiveChildId(parent.child[0].id) : "";
+          parent.path == ""
+            ? router.push(parent.child[0].path)
+            : router.push(parent.path);
+
+          openDropdown && activeId === parent.id
+            ? setOpenDropdown(false)
+            : setOpenDropdown(true);
+        }}
+        // active={activeId === parent.id}
+      >
+        {/* Navlink Children */}
+        {!_.isEmpty(parent.child) &&
+          parent.child.map((child) => (
+            <Box key={child.id}>
+              <NavLink
+                styles={{
+                  icon: {
+                    color:
+                      activeChildId === child.id ? MainColor.yellow : "white",
+                  },
+                  label: {
+                    color:
+                      activeChildId === child.id ? MainColor.yellow : "white",
+                  },
+                }}
+                style={{
+                  color: "white",
+                  transition: "0.5s",
+                }}
+                sx={{
+                  ":hover": {
+                    backgroundColor: "transparent",
+                  },
+                }}
+                fw={activeChildId === child.id ? "bold" : "normal"}
+                label={<Text>{child.name}</Text>}
+                icon={
+                  activeChildId === child.id ? (
+                    <IconCircleDotFilled size={10} />
+                  ) : (
+                    <IconCircleDot size={10} />
+                  )
+                }
+                onClick={() => {
+                  setActiveChildId(child.id);
+                  router.push(child.path);
+                }}
+                active={activeId === child.id}
+              />
+            </Box>
+          ))}
+      </NavLink>
+    </Box>
+  ));
+
+  return userRoleId == "2" ? adminNavbar : developerNavbar;
+}
diff --git a/src/app_modules/admin/_admin_global/index.ts b/src/app_modules/admin/_admin_global/index.ts
index 022101bc..0a0b68d1 100644
--- a/src/app_modules/admin/_admin_global/index.ts
+++ b/src/app_modules/admin/_admin_global/index.ts
@@ -1,5 +1,8 @@
 import { Admin_ComponentLoadImageLandscape } from "./_component/comp_admin_load_image";
 import { Admin_ComponentSkeletonNavbar } from "./_component/comp_admin_skeleton_navbar";
+import { Admin_ComponentButtonUserCircle } from "./_component/comp_button_user_on_navbar";
+import Admin_UiNavbar from "./_ui/ui_navbar_admin";
 
 export { Admin_ComponentLoadImageLandscape, Admin_ComponentSkeletonNavbar };
-
+export { Admin_UiNavbar };
+export {Admin_ComponentButtonUserCircle}
\ No newline at end of file
diff --git a/src/app_modules/admin/job/child/review/index.tsx b/src/app_modules/admin/job/child/review/index.tsx
index 7bc27680..1a897b0c 100644
--- a/src/app_modules/admin/job/child/review/index.tsx
+++ b/src/app_modules/admin/job/child/review/index.tsx
@@ -36,6 +36,8 @@ import { useState } from "react";
 import { AdminJob_funEditCatatanById } from "../../fun/edit/fun_edit_catatan_by_id";
 import { AdminJob_funEditStatusPublishById } from "../../fun/edit/fun_edit_status_publish_by_id";
 import adminJob_getListReview from "../../fun/get/get_list_review";
+import { IRealtimeData } from "@/app/lib/global_state";
+import { WibuRealtime } from "wibu-pkg";
 
 export default function AdminJob_TableReview({
   dataReview,
@@ -334,7 +336,7 @@ async function onPublish({
     const loadData = await adminJob_getListReview({ page: 1 });
     onLoadData(loadData);
 
-    const dataNotif = {
+    const dataNotifikasi: IRealtimeData = {
       appId: publish.data?.id as any,
       status: publish.data?.MasterStatus?.name as any,
       userId: publish.data?.authorId as any,
@@ -343,20 +345,16 @@ async function onPublish({
       title: "Job publish",
     };
 
-    const notif = await adminNotifikasi_funCreateToUser({
-      data: dataNotif as any,
+    const createNotifikasi = await adminNotifikasi_funCreateToUser({
+      data: dataNotifikasi as any,
     });
 
-    if (notif.status === 201) {
-      mqtt_client.publish(
-        "USER",
-        JSON.stringify({ userId: publish?.data?.authorId, count: 1 })
-      );
-
-      mqtt_client.publish(
-        "Job_new_post",
-        JSON.stringify({ isNewPost: true, count: 1 })
-      );
+    if (createNotifikasi.status === 201) {
+      WibuRealtime.setData({
+        type: "notification",
+        pushNotificationTo: "USER",
+        dataMessage: dataNotifikasi,
+      });
     }
 
     ComponentGlobal_NotifikasiBerhasil(publish.message);
@@ -382,24 +380,34 @@ async function onReject({
 
     ComponentGlobal_NotifikasiBerhasil(reject.message);
 
-    const dataNotif = {
+    // const dataNotif = {
+    //   appId: reject.data?.id as any,
+    //   status: reject.data?.MasterStatus?.name as any,
+    //   userId: reject.data?.authorId as any,
+    //   pesan: reject.data?.title as any,
+    //   kategoriApp: "JOB",
+    //   title: "Job anda ditolak !",
+    // };
+
+    const dataNotifikasi: IRealtimeData = {
       appId: reject.data?.id as any,
       status: reject.data?.MasterStatus?.name as any,
       userId: reject.data?.authorId as any,
       pesan: reject.data?.title as any,
       kategoriApp: "JOB",
-      title: "Job anda ditolak !",
+      title: "Job reject",
     };
 
-    const notif = await adminNotifikasi_funCreateToUser({
-      data: dataNotif as any,
+    const createRejectNotifikasi = await adminNotifikasi_funCreateToUser({
+      data: dataNotifikasi as any,
     });
 
-    if (notif.status === 201) {
-      mqtt_client.publish(
-        "USER",
-        JSON.stringify({ userId: dataNotif.userId, count: 1 })
-      );
+    if (createRejectNotifikasi.status === 201) {
+      WibuRealtime.setData({
+        type: "notification",
+        pushNotificationTo: "USER",
+        dataMessage: dataNotifikasi,
+      });
     }
   } else {
     ComponentGlobal_NotifikasiGagal(reject.message);
diff --git a/src/app_modules/admin/layout.tsx b/src/app_modules/admin/layout.tsx
index 20a1fbbc..b94357f0 100644
--- a/src/app_modules/admin/layout.tsx
+++ b/src/app_modules/admin/layout.tsx
@@ -326,7 +326,7 @@ export default function AdminLayout({
         position="right"
         size={"xs"}
       >
-        <ComponentAdmin_UIDrawerNotifikasi
+        {/* <ComponentAdmin_UIDrawerNotifikasi
           data={dataNotif}
           onLoadReadNotif={(val: any) => {
             setDataNotif(val);
@@ -339,7 +339,7 @@ export default function AdminLayout({
           onLoadCountNotif={(val: any) => {
             setCountNotif(val);
           }}
-        />
+        /> */}
       </Drawer>
     </>
   );
diff --git a/src/app_modules/admin/new_layout.tsx b/src/app_modules/admin/new_layout.tsx
index 443839b1..d4fbddce 100644
--- a/src/app_modules/admin/new_layout.tsx
+++ b/src/app_modules/admin/new_layout.tsx
@@ -1,62 +1,74 @@
 "use client";
 
+import { gs_admin_ntf } from "@/app/lib/global_state";
 import {
   ActionIcon,
   AppShell,
-  Box,
-  Center,
   Divider,
   Drawer,
   Grid,
   Group,
-  Menu,
+  Indicator,
   Navbar,
-  NavLink,
   ScrollArea,
   Stack,
   Text,
   Title,
 } from "@mantine/core";
-import { useMediaQuery } from "@mantine/hooks";
-import {
-  IconBell,
-  IconCircleDot,
-  IconCircleDotFilled,
-  IconPhone,
-  IconUser,
-  IconUserCircle,
-} from "@tabler/icons-react";
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
+import { IconBell } from "@tabler/icons-react";
 import { useAtom } from "jotai";
-import _ from "lodash";
-import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { AccentColor, MainColor } from "../_global/color";
+import { AccentColor } from "../_global/color";
 import { MODEL_USER } from "../home/model/interface";
-import Admin_Logout from "./_admin_global/logout";
+import { MODEL_NOTIFIKASI } from "../notifikasi/model/interface";
+import {
+  Admin_ComponentButtonUserCircle,
+  Admin_ComponentSkeletonNavbar,
+  Admin_UiNavbar,
+} from "./_admin_global";
 import {
-  gs_admin_navbar_isActive_dropdown,
   gs_admin_navbar_menu,
   gs_admin_navbar_subMenu,
 } from "./_admin_global/new_global_state";
-import { newListAdminPage } from "./new_list_page";
+import adminNotifikasi_getByUserId from "./notifikasi/fun/get/get_notifikasi_by_user_id";
 import { ComponentAdmin_UIDrawerNotifikasi } from "./notifikasi/ui_drawer_notifikasi";
-import { Admin_ComponentSkeletonNavbar } from "./_admin_global";
 
 export function Admin_NewLayout({
   children,
   user,
+  countNotifikasi,
+  listNotifikasi,
 }: {
   children: React.ReactNode;
   user: MODEL_USER;
+  countNotifikasi: number;
+  listNotifikasi: MODEL_NOTIFIKASI[];
 }) {
   const matches = useMediaQuery("(min-width: 1024px)");
   const [dataUser, setDataUser] = useState(user);
   const userRoleId = dataUser.masterUserRoleId;
   const [opened, setOpened] = useState(false);
+  const [activeId, setActiveId] = useAtom(gs_admin_navbar_menu);
+  const [activeChildId, setActiveChildId] = useAtom(gs_admin_navbar_subMenu);
+  const [dataNotifikasi, setDataNotifikasi] =
+    useState<MODEL_NOTIFIKASI[]>(listNotifikasi);
 
   // Notifikasi
   const [isDrawerNotifikasi, setDrawerNotifikasi] = useState(false);
-  const [isNavbarOpen, setIsNavbarOpen] = useState(false);
+  const [countNtf, setCountNtf] = useState(countNotifikasi);
+  const [newAdminNtf, setNewAdminNtf] = useAtom(gs_admin_ntf);
+
+  useShallowEffect(() => {
+    setCountNtf((e) => e + newAdminNtf), setNewAdminNtf(0);
+  }, [newAdminNtf, setNewAdminNtf]);
+
+  async function onLoadListNotifikasi() {
+    const loadNotifikasi = await adminNotifikasi_getByUserId();
+
+    setDataNotifikasi(loadNotifikasi as []);
+    setDrawerNotifikasi(true);
+  }
 
   return (
     <>
@@ -65,7 +77,7 @@ export function Admin_NewLayout({
         navbarOffsetBreakpoint={1024}
         navbar={
           <Navbar
-            height={"100vh"}
+            height={"100%"}
             width={{ base: 250 }}
             hiddenBreakpoint={1024}
             hidden={!opened}
@@ -88,13 +100,26 @@ export function Admin_NewLayout({
                       <Grid.Col span={5}>
                         <Stack h={"100%"} justify="center">
                           <Group position="right" spacing={5}>
-                            <ButtonUserCircle dataUser={dataUser} />
+                            <Admin_ComponentButtonUserCircle
+                              dataUser={dataUser}
+                            />
 
                             <ActionIcon
                               variant="transparent"
-                              onClick={() => setDrawerNotifikasi(true)}
+                              onClick={() => {
+                                onLoadListNotifikasi();
+                              }}
                             >
-                              <IconBell color="white" />
+                              {countNtf == 0 ? (
+                                <IconBell color="white" />
+                              ) : (
+                                <Indicator
+                                  processing
+                                  label={<Text fz={10}>{countNtf}</Text>}
+                                >
+                                  <IconBell color="white" />
+                                </Indicator>
+                              )}
                             </ActionIcon>
                           </Group>
                         </Stack>
@@ -110,7 +135,13 @@ export function Admin_NewLayout({
                   style={{ color: "white", transition: "0.5s" }}
                 >
                   <Stack style={{ color: "white" }}>
-                    <NavbarAdmin userRoleId={userRoleId} />
+                    <Admin_UiNavbar
+                      userRoleId={userRoleId}
+                      activeId={activeId}
+                      activeChildId={activeChildId as any}
+                      setActiveId={setActiveId}
+                      setActiveChildId={setActiveChildId}
+                    />
                   </Stack>
                 </Navbar.Section>
 
@@ -156,272 +187,20 @@ export function Admin_NewLayout({
         size={"xs"}
       >
         <ComponentAdmin_UIDrawerNotifikasi
-          data={[]}
-          onLoadReadNotif={(val: any) => {
-            // setDataNotif(val);
+          listNotifikasi={dataNotifikasi}
+          onChangeNavbar={(val: { id: string; childId: string }) => {
+            setActiveId(val.id);
+            setActiveChildId(val.childId);
           }}
-          onChangeNavbar={(val: any) => {
-            // setActiveId(val.id);
-            // setActiveChild(val.childId);
+          onToggleNavbar={(val: any) => {
+            // console.log(val, "toggle navbar");
+            // setDrawerNotifikasi(val);
           }}
-          onToggleNavbar={setIsNavbarOpen}
           onLoadCountNotif={(val: any) => {
-            // setCountNotif(val);
+            setCountNtf(val);
           }}
         />
       </Drawer>
     </>
   );
 }
-
-function NavbarAdmin({ userRoleId }: { userRoleId: string }) {
-  const router = useRouter();
-  //   global state
-  const [openDropdown, setOpenDropdown] = useAtom(
-    gs_admin_navbar_isActive_dropdown
-  );
-
-  const [activeId, setActiveId] = useAtom(gs_admin_navbar_menu);
-  const [activeChildId, setActiveChildId] = useAtom(gs_admin_navbar_subMenu);
-
-  //   Kalau fix developer navbar, fix juga navbar admin, dan berlaku sebaliknya
-  const developerNavbar = newListAdminPage.map((parent) => (
-    <Box key={parent.id}>
-      <NavLink
-        opened={openDropdown && activeId === parent.id}
-        styles={{
-          icon: {
-            color: activeId === parent.id ? MainColor.yellow : "white",
-          },
-          label: {
-            color: activeId === parent.id ? MainColor.yellow : "white",
-          },
-        }}
-        style={{
-          color: "white",
-          transition: "0.5s",
-        }}
-        sx={{
-          ":hover": {
-            backgroundColor: "transparent",
-          },
-        }}
-        fw={activeId === parent.id ? "bold" : "normal"}
-        label={<Text>{parent.name}</Text>}
-        icon={parent.icon}
-        onClick={() => {
-          setActiveId(parent.id);
-          setActiveChildId("");
-
-          parent.path == "" ? setActiveChildId(parent.child[0].id) : "";
-          parent.path == ""
-            ? router.push(parent.child[0].path)
-            : router.push(parent.path);
-
-          openDropdown && activeId === parent.id
-            ? setOpenDropdown(false)
-            : setOpenDropdown(true);
-        }}
-        // active={activeId === parent.id}
-      >
-        {/* Navlink Children */}
-        {!_.isEmpty(parent.child) &&
-          parent.child.map((child) => (
-            <Box key={child.id}>
-              <NavLink
-                styles={{
-                  icon: {
-                    color:
-                      activeChildId === child.id ? MainColor.yellow : "white",
-                  },
-                  label: {
-                    color:
-                      activeChildId === child.id ? MainColor.yellow : "white",
-                  },
-                }}
-                style={{
-                  color: "white",
-                  transition: "0.5s",
-                }}
-                sx={{
-                  ":hover": {
-                    backgroundColor: "transparent",
-                  },
-                }}
-                fw={activeChildId === child.id ? "bold" : "normal"}
-                label={<Text>{child.name}</Text>}
-                icon={
-                  activeChildId === child.id ? (
-                    <IconCircleDotFilled size={10} />
-                  ) : (
-                    <IconCircleDot size={10} />
-                  )
-                }
-                onClick={() => {
-                  setActiveChildId(child.id);
-                  router.push(child.path);
-                }}
-                active={activeId === child.id}
-              />
-            </Box>
-          ))}
-      </NavLink>
-    </Box>
-  ));
-
-  const bukanDeveloper = newListAdminPage.slice(0, -1);
-  const adminNavbar = bukanDeveloper.map((parent) => (
-    <Box key={parent.id}>
-      <NavLink
-        opened={openDropdown && activeId === parent.id}
-        styles={{
-          icon: {
-            color: activeId === parent.id ? MainColor.yellow : "white",
-          },
-          label: {
-            color: activeId === parent.id ? MainColor.yellow : "white",
-          },
-        }}
-        style={{
-          color: "white",
-          transition: "0.5s",
-        }}
-        sx={{
-          ":hover": {
-            backgroundColor: "transparent",
-          },
-        }}
-        fw={activeId === parent.id ? "bold" : "normal"}
-        label={<Text>{parent.name}</Text>}
-        icon={parent.icon}
-        onClick={() => {
-          setActiveId(parent.id);
-          setActiveChildId("");
-
-          parent.path == "" ? setActiveChildId(parent.child[0].id) : "";
-          parent.path == ""
-            ? router.push(parent.child[0].path)
-            : router.push(parent.path);
-
-          openDropdown && activeId === parent.id
-            ? setOpenDropdown(false)
-            : setOpenDropdown(true);
-        }}
-        // active={activeId === parent.id}
-      >
-        {/* Navlink Children */}
-        {!_.isEmpty(parent.child) &&
-          parent.child.map((child) => (
-            <Box key={child.id}>
-              <NavLink
-                styles={{
-                  icon: {
-                    color:
-                      activeChildId === child.id ? MainColor.yellow : "white",
-                  },
-                  label: {
-                    color:
-                      activeChildId === child.id ? MainColor.yellow : "white",
-                  },
-                }}
-                style={{
-                  color: "white",
-                  transition: "0.5s",
-                }}
-                sx={{
-                  ":hover": {
-                    backgroundColor: "transparent",
-                  },
-                }}
-                fw={activeChildId === child.id ? "bold" : "normal"}
-                label={<Text>{child.name}</Text>}
-                icon={
-                  activeChildId === child.id ? (
-                    <IconCircleDotFilled size={10} />
-                  ) : (
-                    <IconCircleDot size={10} />
-                  )
-                }
-                onClick={() => {
-                  setActiveChildId(child.id);
-                  router.push(child.path);
-                }}
-                active={activeId === child.id}
-              />
-            </Box>
-          ))}
-      </NavLink>
-    </Box>
-  ));
-
-  return userRoleId == "2" ? adminNavbar : developerNavbar;
-}
-
-function ButtonUserCircle({ dataUser }: { dataUser: MODEL_USER }) {
-  const [isOpenMenuUser, setOpenMenuUser] = useState(false);
-  return (
-    <>
-      <Menu
-        withArrow
-        arrowPosition="center"
-        opened={isOpenMenuUser}
-        onChange={setOpenMenuUser}
-        shadow="md"
-        width={250}
-        position="bottom-start"
-        styles={{
-          dropdown: {
-            backgroundColor: AccentColor.blue,
-            border: `1px solid ${AccentColor.skyblue}`,
-          },
-          item: {
-            color: "white",
-            ":hover": {
-              backgroundColor: "gray",
-            },
-          },
-          arrow: {
-            borderTopColor: AccentColor.skyblue,
-            borderLeftColor: AccentColor.skyblue,
-          },
-        }}
-      >
-        <Menu.Target>
-          <ActionIcon variant="transparent" onClick={() => console.log("test")}>
-            <IconUserCircle color="white" />
-          </ActionIcon>
-        </Menu.Target>
-
-        <Menu.Dropdown>
-          <Stack spacing={5} px={"xs"}>
-            <Menu.Item>
-              <Grid>
-                <Grid.Col span={2}>
-                  <IconUser />
-                </Grid.Col>
-                <Grid.Col span={"auto"}>
-                  <Text lineClamp={1}>{dataUser.username}</Text>
-                </Grid.Col>
-              </Grid>
-            </Menu.Item>
-            <Menu.Item>
-              <Grid>
-                <Grid.Col span={2}>
-                  <IconPhone />
-                </Grid.Col>
-                <Grid.Col span={"auto"}>
-                  <Text lineClamp={1}>+{dataUser.nomor}</Text>
-                </Grid.Col>
-              </Grid>
-            </Menu.Item>
-
-            <Menu.Divider />
-            <Center py={"xs"}>
-              <Admin_Logout />
-            </Center>
-          </Stack>
-        </Menu.Dropdown>
-      </Menu>
-    </>
-  );
-}
diff --git a/src/app_modules/admin/new_list_page.tsx b/src/app_modules/admin/new_list_page.tsx
index 44486733..a8f22300 100644
--- a/src/app_modules/admin/new_list_page.tsx
+++ b/src/app_modules/admin/new_list_page.tsx
@@ -67,33 +67,33 @@ export const newListAdminPage = [
 
   //Donasi
   {
-    id: "Donaasi",
+    id: "Donasi",
     name: "Donasi",
     path: "",
     icon: <IconHeartHandshake />,
     child: [
       {
-        id: "Donaasi_1",
+        id: "Donasi_1",
         name: "Dashboard",
         path: RouterAdminDonasi.main,
       },
       {
-        id: "Donaasi_2",
+        id: "Donasi_2",
         name: "Table Publish",
         path: RouterAdminDonasi.table_publish,
       },
       {
-        id: "Donaasi_3",
+        id: "Donasi_3",
         name: "Table Review",
         path: RouterAdminDonasi.table_review,
       },
       {
-        id: "Donaasi_4",
+        id: "Donasi_4",
         name: "Table Reject",
         path: RouterAdminDonasi.table_reject,
       },
       {
-        id: "Donaasi_5",
+        id: "Donasi_5",
         name: "Table Kategori",
         path: RouterAdminDonasi.table_kategori,
       },
diff --git a/src/app_modules/admin/notifikasi/fun/create/fun_create_notif_user.ts b/src/app_modules/admin/notifikasi/fun/create/fun_create_notif_user.ts
index 2bc156fa..6642244d 100644
--- a/src/app_modules/admin/notifikasi/fun/create/fun_create_notif_user.ts
+++ b/src/app_modules/admin/notifikasi/fun/create/fun_create_notif_user.ts
@@ -23,6 +23,7 @@ export default async function adminNotifikasi_funCreateToUser({
       userRoleId: "1",
     },
   });
-
+  
+  if (!create) return { status: 400, message: "Gagal mengirim notifikasi" };
   return { status: 201, message: "Berhasil mengirim notifikasi" };
 }
diff --git a/src/app_modules/admin/notifikasi/fun/get/fun_check_status_job.ts b/src/app_modules/admin/notifikasi/fun/get/fun_check_status_job.ts
new file mode 100644
index 00000000..00758a42
--- /dev/null
+++ b/src/app_modules/admin/notifikasi/fun/get/fun_check_status_job.ts
@@ -0,0 +1,20 @@
+"use server";
+
+import { prisma } from "@/app/lib";
+
+export async function admin_funCheckStatusJob({ id }: { id: string }) {
+  const data = await prisma.job.findUnique({
+    where: {
+      id: id,
+    },
+    select: {
+      MasterStatus: true,
+    },
+  });
+
+  if (data?.MasterStatus?.name === "Review") {
+    return true;
+  } else {
+    return false;
+  }
+}
diff --git a/src/app_modules/admin/notifikasi/fun/get/get_notifikasi_by_user_id.ts b/src/app_modules/admin/notifikasi/fun/get/get_notifikasi_by_user_id.ts
index f06f543b..dbac4de0 100644
--- a/src/app_modules/admin/notifikasi/fun/get/get_notifikasi_by_user_id.ts
+++ b/src/app_modules/admin/notifikasi/fun/get/get_notifikasi_by_user_id.ts
@@ -20,5 +20,6 @@ export default async function adminNotifikasi_getByUserId() {
       userRoleId: "2",
     },
   });
+  
   return data;
 }
diff --git a/src/app_modules/admin/notifikasi/route_setting/job.ts b/src/app_modules/admin/notifikasi/route_setting/job.ts
index badc572e..6509eb72 100644
--- a/src/app_modules/admin/notifikasi/route_setting/job.ts
+++ b/src/app_modules/admin/notifikasi/route_setting/job.ts
@@ -1,35 +1,26 @@
 import { MODEL_NOTIFIKASI } from "@/app_modules/notifikasi/model/interface";
-import _ from "lodash";
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { ComponentAdminGlobal_NotifikasiPeringatan } from "../../_admin_global/admin_notifikasi/notifikasi_peringatan";
+import { admin_funCheckStatusJob } from "../fun/get/fun_check_status_job";
+import adminNotifikasi_funUpdateIsReadById from "../fun/update/fun_update_is_read_by_id";
 
-export default async function adminNotifikasi_findRouterJob({
+export async function adminNotifikasi_findRouterJob({
   data,
-  router,
-  onChangeNavbar,
-  onToggleNavbar,
 }: {
   data: MODEL_NOTIFIKASI;
-  router: AppRouterInstance;
-  onChangeNavbar: (val: any) => void;
-  onToggleNavbar: (val: any) => void;
 }) {
-  const routeName = "/dev/admin/job/child/";
+  const check = await admin_funCheckStatusJob({ id: data.appId });
 
-  if (data.status === "Review") {
-    router.push(routeName + _.lowerCase(data.status));
-    onChangeNavbar({
-      id: 6,
-      childId: 63,
+  if (check) {
+    const udpateReadNotifikasi = await adminNotifikasi_funUpdateIsReadById({
+      notifId: data?.id,
     });
-  }
 
-  if (data.status === "Draft") {
-    router.push(routeName + "review");
-    onChangeNavbar({
-      id: 6,
-      childId: 63,
-    });
+    if (udpateReadNotifikasi.status == 200) {
+      return true;
+    } else {
+      return false;
+    }
+  } else {
+    ComponentAdminGlobal_NotifikasiPeringatan("Status telah dirubah oleh user");
   }
-
-  onToggleNavbar(true);
 }
diff --git a/src/app_modules/admin/notifikasi/route_setting/type_of_select_page.ts b/src/app_modules/admin/notifikasi/route_setting/type_of_select_page.ts
new file mode 100644
index 00000000..5eb953ef
--- /dev/null
+++ b/src/app_modules/admin/notifikasi/route_setting/type_of_select_page.ts
@@ -0,0 +1,36 @@
+export type IAdmin_ActivePage = "Investasi" | "Donasi" | "Event" | "Vote" | "Job" | "Forum" | "Collaboration"
+export type IAdmin_ActiveChildId =
+  | "Investasi_1"
+  | "Investasi_2"
+  | "Investasi_3"
+  | "Investasi_4"
+  | "Donasi_1"
+  | "Donasi_2"
+  | "Donasi_3"
+  | "Donasi_4"
+  | "Donasi_5"
+  | "Event_1"
+  | "Event_2"
+  | "Event_3"
+  | "Event_4"
+  | "Event_5"
+  | "Event_6"
+  | "Voting_1"
+  | "Voting_2"
+  | "Voting_3"
+  | "Voting_4"
+  | "Voting_5"
+  | "Job_1"
+  | "Job_2"
+  | "Job_3"
+  | "Job_4"
+  | "Forum_1"
+  | "Forum_2"
+  | "Forum_3"
+  | "Forum_4"
+  | "Collaboration_1"
+  | "Collaboration_2"
+  | "Collaboration_3"
+  | "Collaboration_4";
+
+
diff --git a/src/app_modules/admin/notifikasi/ui_drawer_notifikasi.tsx b/src/app_modules/admin/notifikasi/ui_drawer_notifikasi.tsx
index aa8e168d..44b517d5 100644
--- a/src/app_modules/admin/notifikasi/ui_drawer_notifikasi.tsx
+++ b/src/app_modules/admin/notifikasi/ui_drawer_notifikasi.tsx
@@ -1,41 +1,142 @@
+import { AccentColor } from "@/app_modules/_global/color";
+import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
 import { MODEL_NOTIFIKASI } from "@/app_modules/notifikasi/model/interface";
 import {
+  Badge,
+  Card,
   Center,
+  Divider,
+  Group,
   Paper,
   Stack,
-  Card,
-  Group,
-  Badge,
-  Divider,
   Text,
 } from "@mantine/core";
-import { IconChecks, IconCheck } from "@tabler/icons-react";
+import { IconCheck, IconChecks } from "@tabler/icons-react";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
 import adminNotifikasi_countNotifikasi from "./fun/count/count_is_read";
 import adminNotifikasi_getByUserId from "./fun/get/get_notifikasi_by_user_id";
-import adminNotifikasi_funUpdateIsReadById from "./fun/update/fun_update_is_read_by_id";
-import adminNotifikasi_findRouterDonasi from "./route_setting/donasi";
-import { adminNotifikasi_findRouterEvent } from "./route_setting/event";
-import adminNotifikasi_findRouterForum from "./route_setting/forum";
-import adminNotifikasi_findRouterJob from "./route_setting/job";
-import { adminNotifikasi_findRouterVoting } from "./route_setting/voting";
-import adminNotifikasi_findRouterInvestasi from "./route_setting/investasi";
+import { adminNotifikasi_findRouterJob } from "./route_setting/job";
+import {
+  IAdmin_ActiveChildId,
+  IAdmin_ActivePage,
+} from "./route_setting/type_of_select_page";
 
 export function ComponentAdmin_UIDrawerNotifikasi({
-  data,
-  onLoadReadNotif,
+  listNotifikasi,
   onChangeNavbar,
   onToggleNavbar,
   onLoadCountNotif,
 }: {
-  data: MODEL_NOTIFIKASI[];
-  onLoadReadNotif: (val: any) => void;
-  onChangeNavbar: (val: any) => void;
+  listNotifikasi: MODEL_NOTIFIKASI[];
+  onChangeNavbar: (val: {
+    id: IAdmin_ActivePage;
+    childId: IAdmin_ActiveChildId;
+  }) => void;
   onToggleNavbar: (val: any) => void;
   onLoadCountNotif: (val: any) => void;
 }) {
   const router = useRouter();
+  const [data, setData] = useState<MODEL_NOTIFIKASI[]>(listNotifikasi);
+  const [visible, setVisible] = useState(false);
+  const [dataId, setDataId] = useState<string>("");
+
+  async function onRead({ data }: { data: MODEL_NOTIFIKASI }) {
+    // JOB
+    if (data?.kategoriApp === "JOB") {
+      const checkJob = await adminNotifikasi_findRouterJob({
+        data: data,
+      });
+
+      if (checkJob) {
+        setVisible(true);
+        setDataId(data.id);
+
+        const loadCountNotif = await adminNotifikasi_countNotifikasi();
+        onLoadCountNotif(loadCountNotif);
+
+        const loadListNotifikasi = await adminNotifikasi_getByUserId();
+        setData(loadListNotifikasi as any);
+
+        if (loadCountNotif && loadListNotifikasi) {
+          onChangeNavbar({
+            id: "Job",
+            childId: "Job_3",
+          });
+
+          router.push("/dev/admin/job/child/review");
+          setVisible(false);
+          setDataId("");
+        }
+      }
+    }
+
+    // // FORUM
+    // e?.kategoriApp === "FORUM" &&
+    //   adminNotifikasi_findRouterForum({
+    //     data: e,
+    //     router: router,
+    //     onChangeNavbar(val) {
+    //       onChangeNavbar(val);
+    //     },
+    //     onToggleNavbar(val) {
+    //       onToggleNavbar(val);
+    //     },
+    //   });
+
+    // // VOTE
+    // e?.kategoriApp === "VOTING" &&
+    //   adminNotifikasi_findRouterVoting({
+    //     data: e,
+    //     router: router,
+    //     onChangeNavbar(val) {
+    //       onChangeNavbar(val);
+    //     },
+    //     onToggleNavbar(val) {
+    //       onToggleNavbar(val);
+    //     },
+    //   });
+
+    // //   EVENT
+    // e?.kategoriApp === "EVENT" &&
+    //   adminNotifikasi_findRouterEvent({
+    //     data: e,
+    //     router: router,
+    //     onChangeNavbar(val) {
+    //       onChangeNavbar(val);
+    //     },
+    //     onToggleNavbar(val) {
+    //       onToggleNavbar(val);
+    //     },
+    //   });
+
+    // // DONASI
+    // e.kategoriApp === "DONASI" &&
+    //   adminNotifikasi_findRouterDonasi({
+    //     data: e,
+    //     router: router,
+    //     onChangeNavbar(val) {
+    //       onChangeNavbar(val);
+    //     },
+    //     onToggleNavbar(val) {
+    //       onToggleNavbar(val);
+    //     },
+    //   });
+
+    // // INVESTASI
+    // e.kategoriApp === "INVESTASI" &&
+    //   adminNotifikasi_findRouterInvestasi({
+    //     data: e,
+    //     router: router,
+    //     onChangeNavbar(val) {
+    //       onChangeNavbar(val);
+    //     },
+    //     onToggleNavbar(val) {
+    //       onToggleNavbar(val);
+    //     },
+    //   });
+  }
 
   if (_.isEmpty(data)) {
     return (
@@ -58,109 +159,22 @@ export function ComponentAdmin_UIDrawerNotifikasi({
               style={{
                 transition: "0.5s",
               }}
+              c={"white"}
               key={e?.id}
-              // withBorder
-              bg={e?.isRead ? "gray.1" : "gray.4"}
+              bg={e?.isRead ? "gray" : AccentColor.darkblue}
               sx={{
-                borderColor: "gray",
+                borderColor: AccentColor.blue,
                 borderStyle: "solid",
-                borderWidth: "0.5px",
+                borderWidth: "2px",
                 ":hover": {
-                  backgroundColor: "#C1C2C5",
+                  backgroundColor: AccentColor.blue,
+                  borderColor: AccentColor.softblue,
+                  borderStyle: "solid",
+                  borderWidth: "2px",
                 },
               }}
               onClick={async () => {
-                // JOB
-                e?.kategoriApp === "JOB" &&
-                  adminNotifikasi_findRouterJob({
-                    data: e,
-                    router: router,
-                    onChangeNavbar: (val: any) => {
-                      onChangeNavbar(val);
-                    },
-                    onToggleNavbar: onToggleNavbar,
-                  });
-
-                // FORUM
-                e?.kategoriApp === "FORUM" &&
-                  adminNotifikasi_findRouterForum({
-                    data: e,
-                    router: router,
-                    onChangeNavbar(val) {
-                      onChangeNavbar(val);
-                    },
-                    onToggleNavbar(val) {
-                      onToggleNavbar(val);
-                    },
-                  });
-
-                // VOTE
-                e?.kategoriApp === "VOTING" &&
-                  adminNotifikasi_findRouterVoting({
-                    data: e,
-                    router: router,
-                    onChangeNavbar(val) {
-                      onChangeNavbar(val);
-                    },
-                    onToggleNavbar(val) {
-                      onToggleNavbar(val);
-                    },
-                  });
-
-                //   EVENT
-                e?.kategoriApp === "EVENT" &&
-                  adminNotifikasi_findRouterEvent({
-                    data: e,
-                    router: router,
-                    onChangeNavbar(val) {
-                      onChangeNavbar(val);
-                    },
-                    onToggleNavbar(val) {
-                      onToggleNavbar(val);
-                    },
-                  });
-
-                // DONASI
-                e.kategoriApp === "DONASI" &&
-                  adminNotifikasi_findRouterDonasi({
-                    data: e,
-                    router: router,
-                    onChangeNavbar(val) {
-                      onChangeNavbar(val);
-                    },
-                    onToggleNavbar(val) {
-                      onToggleNavbar(val);
-                    },
-                  });
-
-                // INVESTASI
-                e.kategoriApp === "INVESTASI" &&
-                  adminNotifikasi_findRouterInvestasi({
-                    data: e,
-                    router: router,
-                    onChangeNavbar(val) {
-                      onChangeNavbar(val);
-                    },
-                    onToggleNavbar(val) {
-                      onToggleNavbar(val);
-                    },
-                  });
-
-                const updateIsRead = await adminNotifikasi_funUpdateIsReadById({
-                  notifId: e?.id,
-                });
-
-                if (updateIsRead) {
-                  const loadCountNotif =
-                    await adminNotifikasi_countNotifikasi();
-                  onLoadCountNotif(loadCountNotif);
-
-                  const loadDataNotif = await adminNotifikasi_getByUserId();
-                  onLoadReadNotif(loadDataNotif);
-                } else {
-                  return null;
-                }
-
+                onRead({ data: e });
                 // callBackIsNotifikasi(false);
               }}
             >
@@ -193,12 +207,12 @@ export function ComponentAdmin_UIDrawerNotifikasi({
               </Card.Section>
               <Card.Section p={"sm"}>
                 <Group position="apart">
-                  <Text fz={10} color="gray">
+                  <Text fz={10}>
                     {new Intl.DateTimeFormat("id-ID", {
                       dateStyle: "long",
                     }).format(e?.createdAt)}
 
-                    <Text span inherit fz={10} color="gray">
+                    <Text span inherit fz={10}>
                       {", "}
                       {new Intl.DateTimeFormat("id-ID", {
                         timeStyle: "short",
@@ -207,20 +221,19 @@ export function ComponentAdmin_UIDrawerNotifikasi({
                   </Text>
                   {e?.isRead ? (
                     <Group spacing={5}>
-                      <IconChecks color="gray" size={10} />
-                      <Text fz={10} color="gray">
-                        Sudah dilihat
-                      </Text>
+                      <IconChecks size={10} />
+                      <Text fz={10}>Sudah dilihat</Text>
                     </Group>
                   ) : (
                     <Group spacing={5}>
-                      <IconCheck color="gray" size={10} />
-                      <Text fz={10} color="gray">
-                        Belum dilihat
-                      </Text>
+                      <IconCheck size={10} />
+                      <Text fz={10}>Belum dilihat</Text>
                     </Group>
                   )}
                 </Group>
+                {visible && dataId === e?.id && (
+                  <ComponentGlobal_CardLoadingOverlay />
+                )}
               </Card.Section>
             </Card>
           ))}
diff --git a/src/app_modules/home/component/button_header.tsx b/src/app_modules/home/component/button_header.tsx
index 080f9c7c..a1dc8ac2 100644
--- a/src/app_modules/home/component/button_header.tsx
+++ b/src/app_modules/home/component/button_header.tsx
@@ -1,23 +1,22 @@
 "use client";
 
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import { ActionIcon, Indicator, Loader, Text } from "@mantine/core";
-import { MODEL_USER } from "../model/interface";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import { useState } from "react";
-import { useRouter } from "next/navigation";
+import { gs_realtimeData, gs_user_ntf } from "@/app/lib/global_state";
+import { RouterNotifikasi } from "@/app/lib/router_hipmi/router_notifikasi";
 import { RouterUserSearch } from "@/app/lib/router_hipmi/router_user_search";
 import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
-import { IconBell, IconUserSearch } from "@tabler/icons-react";
-import { RouterNotifikasi } from "@/app/lib/router_hipmi/router_notifikasi";
-import { useShallowEffect } from "@mantine/hooks";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import notifikasi_countUserNotifikasi from "@/app_modules/notifikasi/fun/count/fun_count_by_id";
-import mqtt_client from "@/util/mqtt_client";
-import { useAtom } from "jotai";
 import { gs_notifikasi_kategori_app } from "@/app_modules/notifikasi/lib";
+import { ActionIcon, Indicator, Loader, 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 { MODEL_USER } from "../model/interface";
 
 export function ComponentHome_ButtonHeaderLeft({
   dataUser,
@@ -59,30 +58,46 @@ export function ComponentHome_ButtonHeaderRight({
   countNotifikasi: number;
 }) {
   const router = useRouter();
-  const [count, setCount] = useState(countNotifikasi);
   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 [dataRealtime, setDataRealtime] = useAtom(gs_realtimeData);
+
   useShallowEffect(() => {
-    mqtt_client.subscribe("USER");
-
-    mqtt_client.on("message", (topic: any, message: any) => {
-      // console.log(topic);
-      const data = JSON.parse(message.toString());
-
-      if (data.userId === dataUser.id) {
-        setCount(count + data.count);
-      }
-    });
+    if (dataRealtime?.userId == dataUser.id) {
+      setCountNtf((e) => e + newUserNtf), setNewUserNtf(0);
+    }
 
     onLoadNotifikasi({
       onLoad(val) {
-        setCount(val);
+        setCountNtf(val);
       },
     });
-  }, [count]);
+  }, [newUserNtf, setCountNtf]);
+
+  // useShallowEffect(() => {
+  //   mqtt_client.subscribe("USER");
+
+  //   mqtt_client.on("message", (topic: any, message: any) => {
+  //     // console.log(topic);
+  //     const data = JSON.parse(message.toString());
+
+  //     if (data.userId === dataUser.id) {
+  //       setCountNtf(countNtf + data.count);
+  //     }
+  //   });
+
+  //   onLoadNotifikasi({
+  //     onLoad(val) {
+  //       setCountNtf(val);
+  //     },
+  //   });
+  // }, [countNtf]);
 
   async function onLoadNotifikasi({ onLoad }: { onLoad: (val: any) => void }) {
     const loadNotif = await notifikasi_countUserNotifikasi();
@@ -99,13 +114,13 @@ export function ComponentHome_ButtonHeaderRight({
           } else {
             router.push(RouterNotifikasi.main, { scroll: false });
             setIsLoadingBell(true);
-            setActiveKategori("Semua")
+            setActiveKategori("Semua");
           }
         }}
       >
         {isLoadingBell ? (
           <Loader color={AccentColor.yellow} size={20} />
-        ) : count === 0 ? (
+        ) : countNtf === 0 ? (
           <IconBell color="white" />
         ) : (
           <Indicator
@@ -113,7 +128,7 @@ export function ComponentHome_ButtonHeaderRight({
             color={MainColor.yellow}
             label={
               <Text fz={10} c={MainColor.darkblue}>
-                {count > 99 ? "99+" : count}
+                {countNtf > 99 ? "99+" : countNtf}
               </Text>
             }
           >
diff --git a/src/app_modules/home/view_home.tsx b/src/app_modules/home/view_home.tsx
index 19e6bfea..11d62774 100644
--- a/src/app_modules/home/view_home.tsx
+++ b/src/app_modules/home/view_home.tsx
@@ -17,6 +17,9 @@ export default function HomeView({
   dataJob: MODEL_JOB[];
   countNotifikasi: number;
 }) {
+  
+
+
   return (
     <>
       <UIGlobal_LayoutTamplate
diff --git a/src/app_modules/job/component/button/comp_button_save_create.tsx b/src/app_modules/job/component/button/comp_button_save_create.tsx
index f566b851..2f252609 100644
--- a/src/app_modules/job/component/button/comp_button_save_create.tsx
+++ b/src/app_modules/job/component/button/comp_button_save_create.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { DIRECTORY_ID } from "@/app/lib";
+import { IRealtimeData } from "@/app/lib/global_state";
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 import { AccentColor, MainColor } from "@/app_modules/_global/color";
 import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
@@ -10,13 +11,13 @@ import {
   ComponentGlobal_NotifikasiPeringatan,
 } from "@/app_modules/_global/notif_global";
 import { notifikasiToAdmin_funCreate } from "@/app_modules/notifikasi/fun";
-import mqtt_client from "@/util/mqtt_client";
 import { Button } from "@mantine/core";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+import { WibuRealtime } from "wibu-pkg";
 import { job_funCreateNoFile, job_funCreateWithFile } from "../../fun";
-import { gs_job_hot_menu, gs_job_status } from "../../global_state";
+import { gs_job_hot_menu } from "../../global_state";
 import { MODEL_JOB } from "../../model/interface";
 
 function Job_ComponentButtonSaveCreate({
@@ -28,9 +29,7 @@ function Job_ComponentButtonSaveCreate({
 }) {
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
-
   const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu);
-  const [status, setStatus] = useAtom(gs_job_status);
 
   async function onCreate() {
     if (file === null) {
@@ -39,7 +38,8 @@ function Job_ComponentButtonSaveCreate({
       });
 
       if (createNoFile.status === 201) {
-        const dataNotif: any = {
+        const dataNotifikasi: IRealtimeData = {
+          userRole: "ADMIN",
           appId: createNoFile.data?.id as any,
           status: createNoFile.data?.MasterStatus?.name as any,
           userId: createNoFile.data?.authorId as any,
@@ -49,18 +49,16 @@ function Job_ComponentButtonSaveCreate({
         };
 
         const notif = await notifikasiToAdmin_funCreate({
-          data: dataNotif as any,
+          data: dataNotifikasi as any,
         });
 
         if (notif.status === 201) {
-          mqtt_client.publish(
-            "ADMIN",
-            JSON.stringify({
-              count: 1,
-            })
-          );
+          WibuRealtime.setData({
+            type: "notification",
+            pushNotificationTo: "ADMIN",
+          });
+
           setHotMenu(2);
-          setStatus("Review");
           router.replace(RouterJob.status({ id: "2" }));
           setIsLoading(true);
           ComponentGlobal_NotifikasiBerhasil(createNoFile.message);
@@ -83,9 +81,10 @@ function Job_ComponentButtonSaveCreate({
       });
 
       if (createWithFile.status === 201) {
-        const dataNotif: any = {
+        const dataNotifikasi: IRealtimeData = {
+          userRole: "ADMIN",
           appId: createWithFile.data?.id as any,
-          status: createWithFile.data?.MasterStatus?.name as any,
+          status: "Review",
           userId: createWithFile.data?.authorId as any,
           pesan: createWithFile.data?.title as any,
           kategoriApp: "JOB",
@@ -93,18 +92,16 @@ function Job_ComponentButtonSaveCreate({
         };
 
         const notif = await notifikasiToAdmin_funCreate({
-          data: dataNotif as any,
+          data: dataNotifikasi as any,
         });
 
         if (notif.status === 201) {
-          mqtt_client.publish(
-            "ADMIN",
-            JSON.stringify({
-              count: 1,
-            })
-          );
+          WibuRealtime.setData({
+            type: "notification",
+            pushNotificationTo: "ADMIN",
+          });
+
           setHotMenu(2);
-          setStatus("Review");
           router.replace(RouterJob.status({ id: "2" }));
           setIsLoading(true);
           ComponentGlobal_NotifikasiBerhasil(createWithFile.message);
diff --git a/src/app_modules/job/create/view.tsx b/src/app_modules/job/create/view.tsx
index c111b3ee..9b836c0f 100644
--- a/src/app_modules/job/create/view.tsx
+++ b/src/app_modules/job/create/view.tsx
@@ -41,7 +41,6 @@ export default function Job_Create() {
     content: "",
     deskripsi: "",
   });
-  const [reload, setReload] = useState(false);
   const [file, setFile] = useState<File | null>(null);
   const [img, setImg] = useState<any | null>();
 
diff --git a/src/app_modules/job/detail/arsip/view.tsx b/src/app_modules/job/detail/arsip/view.tsx
index 216e17bf..bdf07d5f 100644
--- a/src/app_modules/job/detail/arsip/view.tsx
+++ b/src/app_modules/job/detail/arsip/view.tsx
@@ -9,7 +9,7 @@ import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import { useAtom } from "jotai";
 import { Job_funEditArsipById } from "../../fun/edit/fun_edit_arsip_by_id";
-import { gs_job_status, gs_job_hot_menu } from "../../global_state";
+import { gs_job_hot_menu } from "../../global_state";
 import { useState } from "react";
 import { useDisclosure } from "@mantine/hooks";
 import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
@@ -28,14 +28,12 @@ export default function Job_DetailArsip({ dataJob }: { dataJob: MODEL_JOB }) {
 function ButtonAction({ jobId }: { jobId: string }) {
   const router = useRouter();
   const [isLoading, setLoading] = useState(false);
-  const [status, setStatus] = useAtom(gs_job_status);
   const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu);
   const [opened, { open, close }] = useDisclosure();
 
   async function onPublish() {
     await Job_funEditArsipById(jobId, false).then((res) => {
       if (res.status === 200) {
-        setStatus("Publish");
         setHotMenu(1);
         ComponentGlobal_NotifikasiBerhasil("Berhasil Dipublish");
         setLoading(true);
diff --git a/src/app_modules/job/detail/publish/view.tsx b/src/app_modules/job/detail/publish/view.tsx
index df9314f6..c6ce14d8 100644
--- a/src/app_modules/job/detail/publish/view.tsx
+++ b/src/app_modules/job/detail/publish/view.tsx
@@ -14,7 +14,7 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import ComponentJob_DetailData from "../../component/detail/detail_data";
 import { Job_funEditArsipById } from "../../fun/edit/fun_edit_arsip_by_id";
-import { gs_job_hot_menu, gs_job_status } from "../../global_state";
+import { gs_job_hot_menu,  } from "../../global_state";
 import { MODEL_JOB } from "../../model/interface";
 import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
 
@@ -34,13 +34,13 @@ function ButtonAction({ jobId }: { jobId: string }) {
   const [isLoading, setLoading] = useState(false);
   const [opened, { open, close }] = useDisclosure();
 
-  const [status, setStatus] = useAtom(gs_job_status);
+
   const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu);
 
   async function onArsipkan() {
     await Job_funEditArsipById(jobId, true).then((res) => {
       if (res.status === 200) {
-        setStatus("Publish");
+
         setHotMenu(3);
         ComponentGlobal_NotifikasiBerhasil("Berhasil Diarsipkan");
         setLoading(true);
diff --git a/src/app_modules/job/fun/create/fun_create_with_file.ts b/src/app_modules/job/fun/create/fun_create_with_file.ts
index 031cc2a9..8b5133dd 100644
--- a/src/app_modules/job/fun/create/fun_create_with_file.ts
+++ b/src/app_modules/job/fun/create/fun_create_with_file.ts
@@ -35,90 +35,10 @@ export async function job_funCreateWithFile({
   });
 
   if (!createDataWithoutImg) return { status: 400, message: "Gagal Disimpan" };
-  revalidatePath("/dev/job/main/status");
+  revalidatePath("/dev/job/main/status/2");
   return {
     data: createDataWithoutImg,
     status: 201,
     message: "Berhasil Disimpan",
   };
-
-  // const dataImage: any = file.get("file");
-  // if (dataImage !== "null") {
-  //   const fileName = dataImage.name;
-  //   const fileExtension = _.lowerCase(dataImage.name.split(".").pop());
-  //   const fRandomName = v4(fileName) + "." + fileExtension;
-
-  //   const upload = await prisma.images.create({
-  //     data: {
-  //       url: fRandomName,
-  //       label: "JOB",
-  //     },
-  //     select: {
-  //       id: true,
-  //       url: true,
-  //     },
-  //   });
-
-  //   if (!upload) return { status: 400, message: "Gagal upload gambar" };
-  //   const uploadFolder = Buffer.from(await dataImage.arrayBuffer());
-  //   fs.writeFileSync(
-  //     path.join(root, `public/job/${upload.url}`),
-  //     uploadFolder
-  //   );
-  //   const createDataWithImg = await prisma.job.create({
-  //     data: {
-  //       title: req.title,
-  //       content: req.content,
-  //       deskripsi: req.deskripsi,
-  //       authorId: authorId,
-  //       imagesId: upload.id,
-  //     },
-  //     select: {
-  //       id: true,
-  //       authorId: true,
-  //       MasterStatus: {
-  //         select: {
-  //           name: true,
-  //         },
-  //       },
-  //       title: true,
-  //     },
-  //   });
-
-  //   if (!createDataWithImg) return { status: 400, message: "Gagal Disimpan" };
-  //   revalidatePath("/dev/job/main/status");
-  //   return {
-  //     data: createDataWithImg,
-  //     status: 201,
-  //     message: "Berhasil Disimpan",
-  //   };
-  // } else {
-  //   const createDataWithoutImg = await prisma.job.create({
-  //     data: {
-  //       title: req.title,
-  //       content: req.content,
-  //       deskripsi: req.deskripsi,
-  //       authorId: authorId,
-  //     },
-  //     select: {
-  //       id: true,
-  //       authorId: true,
-  //       MasterStatus: {
-  //         select: {
-  //           name: true,
-  //         },
-  //       },
-  //       title: true,
-  //     },
-  //   });
-
-  //   if (!createDataWithoutImg)
-  //     return { status: 400, message: "Gagal Disimpan" };
-  //   revalidatePath("/dev/job/main/status");
-  //   return {
-  //     data: createDataWithoutImg,
-  //     status: 201,
-  //     message: "Berhasil Disimpan",
-  //   };
-  // }
 }
diff --git a/src/app_modules/job/global_state/index.ts b/src/app_modules/job/global_state/index.ts
index bd83c615..1a1bdf23 100644
--- a/src/app_modules/job/global_state/index.ts
+++ b/src/app_modules/job/global_state/index.ts
@@ -5,5 +5,3 @@ import { atomWithStorage } from "jotai/utils";
  * @returns halaman pada layout
  */
 export const gs_job_hot_menu = atomWithStorage("gs_jobs_hot_menu", 1);
-
-export const gs_job_status = atomWithStorage<any>("gs_job_status", "Publish");
diff --git a/src/app_modules/job/splash/ui_splash.tsx b/src/app_modules/job/splash/ui_splash.tsx
index 15c6418c..bdb2ab6c 100644
--- a/src/app_modules/job/splash/ui_splash.tsx
+++ b/src/app_modules/job/splash/ui_splash.tsx
@@ -5,19 +5,18 @@ import { useShallowEffect } from "@mantine/hooks";
 import { IconBriefcase } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 
-import { gs_job_hot_menu, gs_job_status } from "../global_state";
-import { useRouter } from "next/navigation";
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+import { useRouter } from "next/navigation";
+import { gs_job_hot_menu } from "../global_state";
 
 export function Job_UiSplash() {
   const router = useRouter();
   const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu);
-  const [status, setStatus] = useAtom(gs_job_status);
+
 
   useShallowEffect(() => {
     setTimeout(() => {
       setHotMenu(1);
-      setStatus("Publish");
       router.replace(RouterJob.beranda, { scroll: false });
     }, 1000);
   }, []);
diff --git a/src/app_modules/notifikasi/component/card_view.tsx b/src/app_modules/notifikasi/component/card_view.tsx
index 7115bdc3..b7c1af20 100644
--- a/src/app_modules/notifikasi/component/card_view.tsx
+++ b/src/app_modules/notifikasi/component/card_view.tsx
@@ -1,35 +1,45 @@
 "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 { RouterJob } from "@/app/lib/router_hipmi/router_job";
 import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
+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 { redirectVotingPage } from "./path/voting";
-import { redirectEventPage } from "./path/event";
+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";
 
 export function ComponentNotifiaksi_CardView({
   data,
   onLoadData,
   activePage,
-  onSetMenu,
+  // onSetMenu,
+  activeKategori,
 }: {
   data: MODEL_NOTIFIKASI;
   onLoadData: (val: any) => void;
   activePage: number;
-  onSetMenu: (val: any) => void;
+  // onSetMenu: (val: any) => void;
+  activeKategori: string;
 }) {
   const router = useRouter();
+  const [visible, setVisible] = useState(false);
+
+  const [jobMenuId, setJobMenuId] = useAtom(gs_job_hot_menu);
+
   return (
     <>
       <Card
@@ -45,73 +55,77 @@ export function ComponentNotifiaksi_CardView({
         }}
         my={"xs"}
         onClick={async () => {
-          await notifikasi_funUpdateIsReadById({
-            notifId: data?.id,
-          });
+          if (data?.kategoriApp === "JOB") {
+            const checkStatus = await notifikasi_jobCheckStatus({
+              appId: data.appId,
+              dataId: data.id,
+            });
 
-          // if (updateIsRead.status === 200) {
-          //   const loadData = await notifikasi_getByUserId({
-          //     page: activePage + 1,
+            if (checkStatus?.success) {
+              const loadListNotifikasi = await notifikasi_getByUserId({
+                page: 1,
+                kategoriApp: activeKategori,
+              });
+
+              onLoadData(loadListNotifikasi);
+
+              const path = RouterJob.status({
+                id: checkStatus.statusId as string,
+              });
+
+              setJobMenuId(2);
+              router.push(path);
+              setVisible(true);
+            }
+          }
+
+          // data?.kategoriApp === "FORUM" &&
+          //   redirectDetailForumPage({
+          //     data: data,
+          //     router: router,
           //   });
-          //   onLoadData(loadData);
-          // }
 
-          data?.kategoriApp === "JOB" &&
-            redirectJobPage({
-              data: data,
-              router: router,
-              onSetPage(val) {
-                onSetMenu(val);
-              },
-            });
+          // data?.kategoriApp === "VOTING" &&
+          //   redirectVotingPage({
+          //     data: data,
+          //     router: router,
+          //     onSetPage(val) {
+          //       // onSetMenu(val);
+          //     },
+          //   });
 
-          data?.kategoriApp === "FORUM" &&
-            redirectDetailForumPage({
-              data: data,
-              router: router,
-            });
+          // data?.kategoriApp === "EVENT" &&
+          //   redirectEventPage({
+          //     data: data,
+          //     router: router,
+          //     onSetPage(val) {
+          //       // onSetMenu(val);
+          //     },
+          //   });
 
-          data?.kategoriApp === "VOTING" &&
-            redirectVotingPage({
-              data: data,
-              router: router,
-              onSetPage(val) {
-                onSetMenu(val);
-              },
-            });
+          // data?.kategoriApp === "COLLABORATION" &&
+          //   redirectDetailCollaborationPage({
+          //     data: data,
+          //     router: router,
+          //   });
 
-          data?.kategoriApp === "EVENT" &&
-            redirectEventPage({
-              data: data,
-              router: router,
-              onSetPage(val) {
-                onSetMenu(val);
-              },
-            });
+          // data.kategoriApp === "DONASI" &&
+          //   redirectDonasiPage({
+          //     data: data,
+          //     router: router,
+          //     onSetPage(val) {
+          //       // onSetMenu(val);
+          //     },
+          //   });
 
-          data?.kategoriApp === "COLLABORATION" &&
-            redirectDetailCollaborationPage({
-              data: data,
-              router: router,
-            });
-
-          data.kategoriApp === "DONASI" &&
-            redirectDonasiPage({
-              data: data,
-              router: router,
-              onSetPage(val) {
-                onSetMenu(val);
-              },
-            });
-
-          data.kategoriApp === "INVESTASI" &&
-            redirectInvestasiPage({
-              data: data,
-              router: router,
-              onSetPage(val) {
-                onSetMenu(val);
-              },
-            });
+          // data.kategoriApp === "INVESTASI" &&
+          //   redirectInvestasiPage({
+          //     data: data,
+          //     router: router,
+          //     onSetPage(val) {
+          //       // onSetMenu(val);
+          //     },
+          //   });
         }}
       >
         {/* <pre>{JSON.stringify(e, null, 2)}</pre> */}
@@ -181,6 +195,7 @@ export function ComponentNotifiaksi_CardView({
               </Group>
             )}
           </Group>
+          {visible && <ComponentGlobal_CardLoadingOverlay />}
         </Card.Section>
       </Card>
     </>
diff --git a/src/app_modules/notifikasi/component/path/job.ts b/src/app_modules/notifikasi/component/path/job.ts
index dcf4beef..df201050 100644
--- a/src/app_modules/notifikasi/component/path/job.ts
+++ b/src/app_modules/notifikasi/component/path/job.ts
@@ -1,31 +1,36 @@
-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";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
+import { notifikasi_funJobCheckStatus } from "../../fun/check/fun_check_job_status";
+import notifikasi_funUpdateIsReadById from "../../fun/update/fun_update_is_read_by_user_id";
 
-export function redirectJobPage({
-  data,
-  router,
-  onSetPage,
+export async function notifikasi_jobCheckStatus({
+  appId,
+  dataId,
 }: {
-  data: MODEL_NOTIFIKASI;
-  router: AppRouterInstance;
-  onSetPage: (val: any) => void;
+  appId: string;
+  dataId: string;
 }) {
-  const path = RouterJob.status({id: "1"});
+  const check = await notifikasi_funJobCheckStatus({
+    id: appId,
+  });
 
-  if (data.status === "Publish") {
-    onSetPage({
-      menuId: 2,
-      status: data.status,
+  console.log(check);
+
+  if (check) {
+    const updateReadNotifikasi = await notifikasi_funUpdateIsReadById({
+      notifId: dataId,
     });
-  }
 
-  if (data.status === "Reject") {
-    onSetPage({
-      menuId: 2,
-      status: data.status,
-    });
+    if (updateReadNotifikasi.status == 200) {
+      return {
+        success: true,
+        statusId: check.statusId,
+      };
+    } else {
+      return {
+        success: false,
+      };
+    }
+  } else {
+    ComponentGlobal_NotifikasiPeringatan("Status tidak ditemukan");
   }
-
-  router.push(path, {scroll: false});
 }
diff --git a/src/app_modules/notifikasi/fun/check/fun_check_job_status.ts b/src/app_modules/notifikasi/fun/check/fun_check_job_status.ts
new file mode 100644
index 00000000..d6b9eaa9
--- /dev/null
+++ b/src/app_modules/notifikasi/fun/check/fun_check_job_status.ts
@@ -0,0 +1,25 @@
+"use server";
+
+"use server";
+
+import { prisma } from "@/app/lib";
+
+export async function notifikasi_funJobCheckStatus({ id }: { id: string }) {
+  const data = await prisma.job.findUnique({
+    where: {
+      id: id,
+    },
+    select: {
+      masterStatusId: true
+    },
+  });
+
+  if (!data)
+    return { status: 400, message: "Job tidak ditemukan", statusId: "" };
+  return {
+    status: 200,
+    message: "Berhasil di cek",
+    statusId: data.masterStatusId,
+  };
+
+}
diff --git a/src/app_modules/notifikasi/fun/create/create_notif_to_admin.ts b/src/app_modules/notifikasi/fun/create/create_notif_to_admin.ts
index 08ee88ab..c7bda3e1 100644
--- a/src/app_modules/notifikasi/fun/create/create_notif_to_admin.ts
+++ b/src/app_modules/notifikasi/fun/create/create_notif_to_admin.ts
@@ -8,12 +8,11 @@ export default async function notifikasiToAdmin_funCreate({
 }: {
   data: MODEL_NOTIFIKASI;
 }) {
+
   const getAdmin = await prisma.user.findMany({
     where: {
       active: true,
-      NOT: {
-        masterUserRoleId: "1",
-      },
+      masterUserRoleId: "2",
     },
   });
 
diff --git a/src/app_modules/notifikasi/fun/get/get_notifiaksi_by_id.ts b/src/app_modules/notifikasi/fun/get/get_notifiaksi_by_id.ts
index c6dc2569..a7584036 100644
--- a/src/app_modules/notifikasi/fun/get/get_notifiaksi_by_id.ts
+++ b/src/app_modules/notifikasi/fun/get/get_notifiaksi_by_id.ts
@@ -15,7 +15,7 @@ export default async function notifikasi_getByUserId({
   const takeData = 10;
   const skipData = page * takeData - takeData;
 
-  if (kategoriApp === "Semua") {
+  if (kategoriApp ===  "Semua" ) {
     const data = await prisma.notifikasi.findMany({
       take: takeData,
       skip: skipData,
diff --git a/src/app_modules/notifikasi/ui/ui_notifiaksi.tsx b/src/app_modules/notifikasi/ui/ui_notifiaksi.tsx
index 8a6c84ba..c2fa6a7e 100644
--- a/src/app_modules/notifikasi/ui/ui_notifiaksi.tsx
+++ b/src/app_modules/notifikasi/ui/ui_notifiaksi.tsx
@@ -15,7 +15,7 @@ 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_job_hot_menu } from "@/app_modules/job/global_state";
 import {
   gs_vote_hotMenu,
   gs_vote_status,
@@ -46,8 +46,6 @@ export function Notifikasi_UiView({
   );
 
   // Kategori App
-  const [jobMenuId, setJobMenuId] = useAtom(gs_job_hot_menu);
-  const [jobStatus, setJobStatus] = useAtom(gs_job_status);
   const [voteMenu, setVoteMenu] = useAtom(gs_vote_hotMenu);
   const [voteStatus, setVoteStatus] = useAtom(gs_vote_status);
   const [eventMenu, setEventMenu] = useAtom(gs_event_hotMenu);
@@ -133,32 +131,34 @@ export function Notifikasi_UiView({
                 data={item}
                 onLoadData={setData}
                 activePage={activePage}
-                onSetMenu={(val) => {
-                  if (item?.kategoriApp === "JOB") {
-                    setJobMenuId(val.menuId);
-                    setJobStatus(val.status);
-                  }
+                activeKategori={activeKategori}
+                // onSetMenu={(val) => {
+                //   if (item?.kategoriApp === "JOB") {
 
-                  if (item?.kategoriApp === "VOTING") {
-                    setVoteMenu(val.menuId);
-                    setVoteStatus(val.status);
-                  }
+                //     setJobMenuId(val.menuId);
+                //     // setJobStatus(val.status);
+                //   }
 
-                  if (item?.kategoriApp === "EVENT") {
-                    setEventMenu(val.menuId);
-                    setEventStatus(val.status);
-                  }
+                //   // if (item?.kategoriApp === "VOTING") {
+                //   //   setVoteMenu(val.menuId);
+                //   //   setVoteStatus(val.status);
+                //   // }
 
-                  if (item?.kategoriApp === "DONASI") {
-                    setDonasiMenu(val.menuId);
-                    setDonasiStatus(val.status);
-                  }
+                //   // if (item?.kategoriApp === "EVENT") {
+                //   //   setEventMenu(val.menuId);
+                //   //   setEventStatus(val.status);
+                //   // }
 
-                  if (item?.kategoriApp === "INVESTASI") {
-                    setInvestasiMenu(val.menuId);
-                    setInvestasiStatus(val.status);
-                  }
-                }}
+                //   // if (item?.kategoriApp === "DONASI") {
+                //   //   setDonasiMenu(val.menuId);
+                //   //   setDonasiStatus(val.status);
+                //   // }
+
+                //   // if (item?.kategoriApp === "INVESTASI") {
+                //   //   setInvestasiMenu(val.menuId);
+                //   //   setInvestasiStatus(val.status);
+                //   // }
+                // }}
               />
             )}
           </ScrollOnly>
diff --git a/src/app_modules/zCoba/coba_realtime.tsx b/src/app_modules/zCoba/coba_realtime.tsx
index 30376aa6..45ea55ba 100644
--- a/src/app_modules/zCoba/coba_realtime.tsx
+++ b/src/app_modules/zCoba/coba_realtime.tsx
@@ -1,38 +1,40 @@
 "use client";
-
-import { useWibuRealtime, WibuRealtime } from "wibu";
+import { WibuRealtime } from "wibu-pkg";
 import { v4 } from "uuid";
 import { Stack, Title, Button } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import Countdown from "react-countdown";
+import { useHookstate } from "@hookstate/core";
+
+const WIBU_REALTIME_TOKEN: any = process.env.NEXT_PUBLIC_WIBU_REALTIME_TOKEN;
 
 export function CobaRealtime({ userLoginId }: { userLoginId: string }) {
-  const WIBU_REALTIME_TOKEN: any = process.env.NEXT_PUBLIC_WIBU_REALTIME_TOKEN;
 
   //   const [dataRealTime, setDataRealTime] = useWibuRealtime({
   //     WIBU_REALTIME_TOKEN: WIBU_REALTIME_TOKEN,
   //     project: "hipmi",
   //   });
 
+
   useShallowEffect(() => {
-    // WibuRealtime.init({
-    //   WIBU_REALTIME_TOKEN: WIBU_REALTIME_TOKEN,
-    //   project: "hipmi",
-    //   onData(data) {
-    //     console.log(data);
-    //   },
-    // });
-    // return () => {
-    //   WibuRealtime.cleanup();
-    // };
+    WibuRealtime.init({
+      onData: (data) => {
+
+        console.log(data)
+      },
+      project: "hipmi",
+      WIBU_REALTIME_TOKEN: WIBU_REALTIME_TOKEN,
+    });
   }, []);
 
   return (
     <>
       <Stack w={200} p={"lg"}>
         <Title order={6}>User {userLoginId}</Title>
+
         <Button
           onClick={() => {
+
             // WibuRealtime.setData({
             //   id: v4(),
             //   name: "bagas",
@@ -46,3 +48,7 @@ export function CobaRealtime({ userLoginId }: { userLoginId: string }) {
     </>
   );
 }
+
+
+
+
diff --git a/src/app_modules/zCoba/ui_coba_upload_file.tsx b/src/app_modules/zCoba/ui_coba_upload_file.tsx
index 7877bef7..091a09fa 100644
--- a/src/app_modules/zCoba/ui_coba_upload_file.tsx
+++ b/src/app_modules/zCoba/ui_coba_upload_file.tsx
@@ -1,8 +1,7 @@
+import { DIRECTORY_ID } from "@/app/lib";
 import { TokenStorage } from "@/app/lib/token";
 import {
-  Box,
   Button,
-  Card,
   Center,
   FileButton,
   Image,
@@ -14,12 +13,8 @@ import { useShallowEffect } from "@mantine/hooks";
 import { IconCamera, IconUpload } from "@tabler/icons-react";
 import { useState } from "react";
 import { AccentColor, MainColor } from "../_global/color";
-import {
-  ComponentGlobal_NotifikasiBerhasil,
-  ComponentGlobal_NotifikasiPeringatan,
-} from "../_global/notif_global";
-import { DIRECTORY_ID } from "@/app/lib";
 import { funGlobal_UploadToStorage } from "../_global/fun";
+import { ComponentGlobal_NotifikasiPeringatan } from "../_global/notif_global";
 
 export default function Coba_UploadFile() {
   const [data, setData] = useState<any>();
diff --git a/src/bin/seeder/user_seeder.json b/src/bin/seeder/user_seeder.json
index ce89edb2..afefe855 100644
--- a/src/bin/seeder/user_seeder.json
+++ b/src/bin/seeder/user_seeder.json
@@ -2,7 +2,7 @@
   {
     "name": "bagas_admin",
     "nomor": "6282340374412",
-    "masterUserRoleId": "3"
+    "masterUserRoleId": "2"
   },
   {
     "name": "fahmi_admin",
diff --git a/src/util/mqtt_loader.tsx b/src/util/mqtt_loader.tsx
index 7fec82da..eb47c73b 100644
--- a/src/util/mqtt_loader.tsx
+++ b/src/util/mqtt_loader.tsx
@@ -3,7 +3,7 @@
 import { useEffect } from "react";
 import mqtt_client from "./mqtt_client";
 
-export default function MqttLoader() {
+export default function   MqttLoader() {
   useEffect(() => {
     mqtt_client.on("connect", () => {
       console.log("connected");
diff --git a/yarn.lock b/yarn.lock
index 689b9e6c..e3a222f5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1411,6 +1411,13 @@
   dependencies:
     "@supabase/node-fetch" "^2.6.14"
 
+"@supabase/auth-js@2.65.1":
+  version "2.65.1"
+  resolved "https://registry.yarnpkg.com/@supabase/auth-js/-/auth-js-2.65.1.tgz#4f6ab9ece2e6613d2648ecf5482800f3766479ea"
+  integrity sha512-IA7i2Xq2SWNCNMKxwmPlHafBQda0qtnFr8QnyyBr+KaSxoXXqEzFCnQ1dGTy6bsZjVBgXu++o3qrDypTspaAPw==
+  dependencies:
+    "@supabase/node-fetch" "^2.6.14"
+
 "@supabase/functions-js@2.4.1":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@supabase/functions-js/-/functions-js-2.4.1.tgz#373e75f8d3453bacd71fb64f88d7a341d7b53ad7"
@@ -1418,6 +1425,13 @@
   dependencies:
     "@supabase/node-fetch" "^2.6.14"
 
+"@supabase/functions-js@2.4.3":
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/@supabase/functions-js/-/functions-js-2.4.3.tgz#ac1c696d3a1ebe00f60d5cea69b208078678ef8b"
+  integrity sha512-sOLXy+mWRyu4LLv1onYydq+10mNRQ4rzqQxNhbrKLTLTcdcmS9hbWif0bGz/NavmiQfPs4ZcmQJp4WqOXlR4AQ==
+  dependencies:
+    "@supabase/node-fetch" "^2.6.14"
+
 "@supabase/node-fetch@2.6.15", "@supabase/node-fetch@^2.6.14":
   version "2.6.15"
   resolved "https://registry.yarnpkg.com/@supabase/node-fetch/-/node-fetch-2.6.15.tgz#731271430e276983191930816303c44159e7226c"
@@ -1432,6 +1446,13 @@
   dependencies:
     "@supabase/node-fetch" "^2.6.14"
 
+"@supabase/postgrest-js@1.16.3":
+  version "1.16.3"
+  resolved "https://registry.yarnpkg.com/@supabase/postgrest-js/-/postgrest-js-1.16.3.tgz#d8e009e63b9152e46715982a6d706f1450c0af0d"
+  integrity sha512-HI6dsbW68AKlOPofUjDTaosiDBCtW4XAm0D18pPwxoW3zKOE2Ru13Z69Wuys9fd6iTpfDViNco5sgrtnP0666A==
+  dependencies:
+    "@supabase/node-fetch" "^2.6.14"
+
 "@supabase/realtime-js@2.10.2":
   version "2.10.2"
   resolved "https://registry.yarnpkg.com/@supabase/realtime-js/-/realtime-js-2.10.2.tgz#c2b42d17d723d2d2a9146cfad61dc3df1ce3127e"
@@ -1442,6 +1463,16 @@
     "@types/ws" "^8.5.10"
     ws "^8.14.2"
 
+"@supabase/realtime-js@2.10.7":
+  version "2.10.7"
+  resolved "https://registry.yarnpkg.com/@supabase/realtime-js/-/realtime-js-2.10.7.tgz#9e0cbecdffbfda3ae94639dbe0e55b06c6f79290"
+  integrity sha512-OLI0hiSAqQSqRpGMTUwoIWo51eUivSYlaNBgxsXZE7PSoWh12wPRdVt0psUMaUzEonSB85K21wGc7W5jHnT6uA==
+  dependencies:
+    "@supabase/node-fetch" "^2.6.14"
+    "@types/phoenix" "^1.5.4"
+    "@types/ws" "^8.5.10"
+    ws "^8.14.2"
+
 "@supabase/storage-js@2.7.0":
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/@supabase/storage-js/-/storage-js-2.7.0.tgz#9ff322d2c3b141087aa34115cf14205e4980ce75"
@@ -1449,6 +1480,13 @@
   dependencies:
     "@supabase/node-fetch" "^2.6.14"
 
+"@supabase/storage-js@2.7.1":
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/@supabase/storage-js/-/storage-js-2.7.1.tgz#761482f237deec98a59e5af1ace18c7a5e0a69af"
+  integrity sha512-asYHcyDR1fKqrMpytAS1zjyEfvxuOIp1CIXX7ji4lHHcJKqyk+sLl/Vxgm4sN6u8zvuUtae9e4kDxQP2qrwWBA==
+  dependencies:
+    "@supabase/node-fetch" "^2.6.14"
+
 "@supabase/supabase-js@^2.45.4":
   version "2.45.4"
   resolved "https://registry.yarnpkg.com/@supabase/supabase-js/-/supabase-js-2.45.4.tgz#0bcf8722f1732dfe3e4c5190d23e3938dcc689c3"
@@ -1461,6 +1499,18 @@
     "@supabase/realtime-js" "2.10.2"
     "@supabase/storage-js" "2.7.0"
 
+"@supabase/supabase-js@^2.46.1":
+  version "2.46.1"
+  resolved "https://registry.yarnpkg.com/@supabase/supabase-js/-/supabase-js-2.46.1.tgz#4d23cdf7b6aab45686dfe87577ca7d1371afd341"
+  integrity sha512-HiBpd8stf7M6+tlr+/82L8b2QmCjAD8ex9YdSAKU+whB/SHXXJdus1dGlqiH9Umy9ePUuxaYmVkGd9BcvBnNvg==
+  dependencies:
+    "@supabase/auth-js" "2.65.1"
+    "@supabase/functions-js" "2.4.3"
+    "@supabase/node-fetch" "2.6.15"
+    "@supabase/postgrest-js" "1.16.3"
+    "@supabase/realtime-js" "2.10.7"
+    "@supabase/storage-js" "2.7.1"
+
 "@swc/counter@^0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@swc/counter/-/counter-0.1.3.tgz#cc7463bd02949611c6329596fccd2b0ec782b0e9"
@@ -7790,6 +7840,13 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
+wibu-pkg@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/wibu-pkg/-/wibu-pkg-1.0.3.tgz#96074f2acddefc3720937d682cd4d9e6d377d587"
+  integrity sha512-52zxelH4SizSbkTtcphsnQV/F4bVz1zdSwdkhSlIKt08pWreFKpdfAx8bvYRmDiIgGXtsLXx7qvn9DFoQSosVw==
+  dependencies:
+    "@supabase/supabase-js" "^2.46.1"
+
 wibu@bipproduction/wibu:
   version "0.2.84"
   resolved "https://codeload.github.com/bipproduction/wibu/tar.gz/bb8dcee89d743d26e79345a1ee74fba77db8cee3"