Notifikas Job

# fix
- Notifikasi to admin
- Notifikasi to user
- Perubahan tampilan admin
## No issue

src/app_modules/home/layout.tsx

@@ -10,6 +10,7 @@ import {
   Grid,
   Group,
   Header,
+  Indicator,
   Loader,
   SimpleGrid,
   Stack,
@@ -34,116 +35,46 @@ import { ComponentGlobal_NotifikasiPeringatan } from "../component_global/notif_
 import { ComponentGlobal_NotifikasiBerhasil } from "../component_global/notif_global/notifikasi_berhasil";
 import { RouterUserSearch } from "@/app/lib/router_hipmi/router_user_search";
 import { RouterNotifikasi } from "@/app/lib/router_hipmi/router_notifikasi";
+import { useShallowEffect } from "@mantine/hooks";
+import notifikasi_countUserNotifikasi from "../notifikasi/fun/count/fun_count_by_id";
+import mqtt_client from "@/util/mqtt_client";
 
 export default function HomeLayout({
   dataUser,
   children,
+  countNotifikasi,
 }: {
   dataUser: MODEL_USER;
   children: React.ReactNode;
+  countNotifikasi: number;
 }) {
   const router = useRouter();
   // const [user, setUser] = useState(dataUser);
   const [loadingProfil, setLoadingProfile] = useState(false);
   const [loadingUS, setLoadingUS] = useState(false);
-  const listFooter = [
-    {
-      id: 1,
-      name: "Temukan user",
-      icon: <IconUserSearch />,
-      link: ``,
-    },
-    {
-      id: 2,
-      name: "Profile",
-      icon: <IconUserCircle />,
-      link: RouterProfile.katalog,
-    },
-  ];
+  const [countNotif, setCountNotif] = useState(countNotifikasi);
 
-  const Compo_Footer = (
-    <Footer height={70} w={"100%"} bg={"black"}>
-      <Grid p={"xs"}>
-        <Grid.Col span={"auto"}>
-          {loadingUS ? (
-            <Center>
-              <Loader />
-            </Center>
-          ) : (
-            <Center>
-              <Stack
-                align="center"
-                spacing={0}
-                onClick={() => {
-                  if (dataUser?.Profile === null) {
-                    ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
-                  } else {
-                    setLoadingUS(true);
-                    // router.push(RouterProfile.katalog + `${user.Profile.id}`);
-                    router.push(RouterUserSearch.main);
-                  }
-                }}
-              >
-                <ActionIcon variant={"transparent"}>
-                  <IconUserSearch color="white" />
-                </ActionIcon>
-                <Text fz={"xs"} c={"white"}>
-                  Temukan pengguna
-                </Text>
-              </Stack>
-            </Center>
-          )}
-        </Grid.Col>
-        <Grid.Col span={"auto"}>
-          {loadingProfil ? (
-            <Center>
-              <Loader />
-            </Center>
-          ) : (
-            <Center>
-              <Stack
-                align="center"
-                spacing={2}
-                onClick={() => {
-                  setLoadingProfile(true);
-                  if (dataUser?.Profile === null) {
-                    router.push(RouterProfile.create + `${dataUser.id}`);
-                  } else {
-                    router.push(
-                      RouterProfile.katalog + `${dataUser.Profile.id}`
-                    );
-                  }
-                }}
-              >
-                <ActionIcon variant={"transparent"}>
-                  {dataUser?.Profile === null ? (
-                    <IconUserCircle color="white" />
-                  ) : (
-                    <Avatar
-                      radius={"xl"}
-                      size={25}
-                      sx={{
-                        borderStyle: "solid",
-                        borderWidth: "0.5px",
-                        borderColor: "white",
-                      }}
-                      src={
-                        RouterProfile.api_foto_profile +
-                        `${dataUser?.Profile.imagesId}`
-                      }
-                    />
-                  )}
-                </ActionIcon>
-                <Text fz={"xs"} c={"white"}>
-                  Profile
-                </Text>
-              </Stack>
-            </Center>
-          )}
-        </Grid.Col>
-      </Grid>
-    </Footer>
-  );
+  useShallowEffect(() => {
+    mqtt_client.subscribe("USER");
+
+    mqtt_client.on("message", (topic: any, message: any) => {
+      const data = JSON.parse(message.toString());
+      if (data.userId === dataUser.id) {
+        setCountNotif(countNotif + data.count);
+      }
+    });
+
+    onLoadNotifikasi({
+      onLoad(val) {
+        setCountNotif(val);
+      },
+    });
+  }, [countNotif]);
+
+  async function onLoadNotifikasi({ onLoad }: { onLoad: (val: any) => void }) {
+    const loadNotif = await notifikasi_countUserNotifikasi();
+    onLoad(loadNotif);
+  }
 
   return (
     <>
@@ -172,7 +103,9 @@ export default function HomeLayout({
                 router.push(RouterNotifikasi.main);
               }}
             >
-              <IconBell />
+              <Indicator processing label={<Text fz={10}>{countNotif}</Text>}>
+                <IconBell />
+              </Indicator>
             </ActionIcon>
           </Group>
         </Box>