From 9068631c33450520a7736547effee18bdcda7e76 Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Tue, 9 Jul 2024 10:25:18 +0800
Subject: [PATCH] #style: Tampilan home Deskripsi: - Tampilan tamplate layout
 positionnya di ganti fixed ( tidak bisa di tarik ke bawah jika sudah menjadi
 aplikasi ) - UI Home selesai - UI User search selesai - UI Notifikasi selesai
 ## No issuee

---
 src/app/dev/home/layout.tsx                   |  20 --
 src/app/dev/home/loading.tsx                  |   9 -
 src/app/dev/home/page.tsx                     |   9 +-
 src/app/dev/notifikasi/page.tsx               |   3 +-
 .../main => user-search}/page.tsx             |   4 +-
 src/app/dev/user_search/main/layout.tsx       |  10 -
 .../lib/router_hipmi/router_user_search.ts    |   2 +-
 src/app/zCoba/page.tsx                        |   2 +-
 src/app_modules/auth/splash/view.tsx          |   9 +-
 .../component_global/splash/splash_global.tsx |   6 +-
 .../ui/ui_header_tamplate.tsx                 |  16 +-
 .../ui/ui_layout_tamplate.tsx                 | 148 ++++++---
 .../component_global/ui/ui_loader.tsx         |  10 +
 .../detail_component/ui_report_komentar.tsx   |  66 ++++
 .../detail_component/ui_report_posting.tsx    |  61 ++++
 src/app_modules/forum/create/layout.tsx       |  10 +-
 .../forum/detail/detail_report_komentar.tsx   |  71 +---
 .../forum/detail/detail_report_posting.tsx    |  57 +---
 src/app_modules/forum/detail/layout.tsx       |  10 +-
 src/app_modules/forum/edit/posting/layout.tsx |  10 +-
 src/app_modules/forum/forumku/layout.tsx      |  10 +-
 src/app_modules/forum/main/beranda.tsx        |   4 +-
 src/app_modules/forum/main/layout.tsx         |  10 +-
 .../forum/report/komentar/layout.tsx          |  10 +-
 .../forum/report/posting/layout.tsx           |  10 +-
 src/app_modules/forum/splash/index.tsx        |   4 +-
 .../home/component/button_header.tsx          | 106 ++++++
 .../home/{view.tsx => component/ui_home.tsx}  | 193 +++++++++--
 src/app_modules/home/index.ts                 |   5 +-
 src/app_modules/home/layout.tsx               | 310 ------------------
 src/app_modules/home/view_home.tsx            |  43 +++
 src/app_modules/job/create/layout.tsx         |  10 +-
 src/app_modules/job/detail/arsip/layout.tsx   |  10 +-
 src/app_modules/job/detail/draft/layout.tsx   |  10 +-
 src/app_modules/job/detail/main/layout.tsx    |  10 +-
 src/app_modules/job/detail/publish/layout.tsx |  10 +-
 src/app_modules/job/detail/reject/layout.tsx  |  10 +-
 src/app_modules/job/detail/review/layout.tsx  |  10 +-
 src/app_modules/job/edit/layout.tsx           |  10 +-
 .../job/main/beranda/ui_beranda.tsx           |   3 +
 src/app_modules/job/main/layout.tsx           |  10 +-
 src/app_modules/job/non_user_view/layout.tsx  |  10 +-
 src/app_modules/job/splash/ui_splash.tsx      |   2 +-
 .../notifikasi/component/card_view.tsx        | 141 ++++++++
 .../notifikasi/component/path/forum.ts        |  26 ++
 .../notifikasi/component/path/job.ts          |  31 ++
 .../notifikasi/component/ui_notifiaksi.tsx    |  81 +++++
 .../fun/get/get_notifiaksi_by_id.ts           |   6 +-
 src/app_modules/notifikasi/index.ts           |   2 +-
 src/app_modules/notifikasi/main/index.tsx     | 236 -------------
 .../notifikasi/view_notifikasi.tsx            |  19 ++
 .../user_search/component/is_empty_data.tsx   |  13 -
 .../user_search/component/ui_user_search.tsx  | 310 ++++++++++++++++++
 .../user_search/fun/get/get_all_user.ts       |  58 ++++
 .../user_search/fun/get/get_list_user.ts      |  59 ----
 .../fun/search/fun_search_by_name.ts          |  28 --
 src/app_modules/user_search/index.ts          |   8 +-
 src/app_modules/user_search/main/index.tsx    | 131 --------
 src/app_modules/user_search/main/layout.tsx   |  22 --
 .../user_search/view_user_seach.tsx           |  22 ++
 src/app_modules/zCoba/index.tsx               |  10 +-
 61 files changed, 1390 insertions(+), 1156 deletions(-)
 delete mode 100644 src/app/dev/home/layout.tsx
 delete mode 100644 src/app/dev/home/loading.tsx
 rename src/app/dev/{user_search/main => user-search}/page.tsx (52%)
 delete mode 100644 src/app/dev/user_search/main/layout.tsx
 create mode 100644 src/app_modules/component_global/ui/ui_loader.tsx
 create mode 100644 src/app_modules/forum/component/detail_component/ui_report_komentar.tsx
 create mode 100644 src/app_modules/forum/component/detail_component/ui_report_posting.tsx
 create mode 100644 src/app_modules/home/component/button_header.tsx
 rename src/app_modules/home/{view.tsx => component/ui_home.tsx} (58%)
 delete mode 100644 src/app_modules/home/layout.tsx
 create mode 100644 src/app_modules/home/view_home.tsx
 create mode 100644 src/app_modules/notifikasi/component/card_view.tsx
 create mode 100644 src/app_modules/notifikasi/component/path/forum.ts
 create mode 100644 src/app_modules/notifikasi/component/path/job.ts
 create mode 100644 src/app_modules/notifikasi/component/ui_notifiaksi.tsx
 delete mode 100644 src/app_modules/notifikasi/main/index.tsx
 create mode 100644 src/app_modules/notifikasi/view_notifikasi.tsx
 delete mode 100644 src/app_modules/user_search/component/is_empty_data.tsx
 create mode 100644 src/app_modules/user_search/component/ui_user_search.tsx
 create mode 100644 src/app_modules/user_search/fun/get/get_all_user.ts
 delete mode 100644 src/app_modules/user_search/fun/get/get_list_user.ts
 delete mode 100644 src/app_modules/user_search/fun/search/fun_search_by_name.ts
 delete mode 100644 src/app_modules/user_search/main/index.tsx
 delete mode 100644 src/app_modules/user_search/main/layout.tsx
 create mode 100644 src/app_modules/user_search/view_user_seach.tsx

diff --git a/src/app/dev/home/layout.tsx b/src/app/dev/home/layout.tsx
deleted file mode 100644
index 4e254330..00000000
--- a/src/app/dev/home/layout.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
-import { HomeLayout } from "@/app_modules/home";
-import { user_getOneByUserId } from "@/app_modules/home/fun/get/get_one_user_by_id";
-import notifikasi_countUserNotifikasi from "@/app_modules/notifikasi/fun/count/fun_count_by_id";
-import { redirect } from "next/navigation";
-
-export default async function Layout({ children }: { children: any }) {
-  const userId = await user_getOneUserId();
-  const dataUser = await user_getOneByUserId(userId);
-
-  const countNotifikasi = await notifikasi_countUserNotifikasi();
-
-  return (
-    <>
-      <HomeLayout dataUser={dataUser as any} countNotifikasi={countNotifikasi}>
-        {children}
-      </HomeLayout>
-    </>
-  );
-}
diff --git a/src/app/dev/home/loading.tsx b/src/app/dev/home/loading.tsx
deleted file mode 100644
index 623b464d..00000000
--- a/src/app/dev/home/loading.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      {/* <ComponentGlobal_V2_LoadingPage /> */}
-    </>
-  );
-}
diff --git a/src/app/dev/home/page.tsx b/src/app/dev/home/page.tsx
index 3469f504..aa3e2356 100644
--- a/src/app/dev/home/page.tsx
+++ b/src/app/dev/home/page.tsx
@@ -4,6 +4,7 @@ import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 import { HomeView } from "@/app_modules/home";
 import { user_getOneByUserId } from "@/app_modules/home/fun/get/get_one_user_by_id";
 import { job_getTwoForHomeView } from "@/app_modules/job/fun/get/get_two_for_home_view";
+import notifikasi_countUserNotifikasi from "@/app_modules/notifikasi/fun/count/fun_count_by_id";
 import { redirect } from "next/navigation";
 
 export default async function Page() {
@@ -24,9 +25,15 @@ export default async function Page() {
   //   setTimeout(a, 3000);
   // });
 
+  const countNotifikasi = await notifikasi_countUserNotifikasi();
+
   return (
     <>
-      <HomeView dataUser={dataUser as any} dataJob={dataJob as any} />
+      <HomeView
+        dataUser={dataUser as any}
+        dataJob={dataJob as any}
+        countNotifikasi={countNotifikasi}
+      />
     </>
   );
 }
diff --git a/src/app/dev/notifikasi/page.tsx b/src/app/dev/notifikasi/page.tsx
index 2ee83bdc..de986f62 100644
--- a/src/app/dev/notifikasi/page.tsx
+++ b/src/app/dev/notifikasi/page.tsx
@@ -1,9 +1,8 @@
 import { Notifikasi_MainView } from "@/app_modules/notifikasi";
 import notifikasi_getByUserId from "@/app_modules/notifikasi/fun/get/get_notifiaksi_by_id";
 
-
 export default async function Page() {
-  const listNotifikasi = await notifikasi_getByUserId()
+  const listNotifikasi = await notifikasi_getByUserId({ page: 1 });
 
   return (
     <>
diff --git a/src/app/dev/user_search/main/page.tsx b/src/app/dev/user-search/page.tsx
similarity index 52%
rename from src/app/dev/user_search/main/page.tsx
rename to src/app/dev/user-search/page.tsx
index 58f343db..7305259d 100644
--- a/src/app/dev/user_search/main/page.tsx
+++ b/src/app/dev/user-search/page.tsx
@@ -1,8 +1,8 @@
 import { UserSearch_MainView } from "@/app_modules/user_search";
-import { UserSearch_getListUser } from "@/app_modules/user_search/fun/get/get_list_user";
+import { userSearch_getAllUser } from "@/app_modules/user_search/fun/get/get_all_user";
 
 export default async function Page() {
-  const listUser = await UserSearch_getListUser({ name: "" });
+  const listUser = await userSearch_getAllUser({ page: 1 });
 
   return <UserSearch_MainView listUser={listUser as any} />;
 }
diff --git a/src/app/dev/user_search/main/layout.tsx b/src/app/dev/user_search/main/layout.tsx
deleted file mode 100644
index 31218acb..00000000
--- a/src/app/dev/user_search/main/layout.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { LayoutUserSearch_MainView } from "@/app_modules/user_search";
-import React from "react";
-
-export default async function Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return <LayoutUserSearch_MainView>{children}</LayoutUserSearch_MainView>;
-}
diff --git a/src/app/lib/router_hipmi/router_user_search.ts b/src/app/lib/router_hipmi/router_user_search.ts
index 7aa2c19e..8b64a9f1 100644
--- a/src/app/lib/router_hipmi/router_user_search.ts
+++ b/src/app/lib/router_hipmi/router_user_search.ts
@@ -1,3 +1,3 @@
 export const RouterUserSearch = {
-    main: "/dev/user_search/main"
+    main: "/dev/user-search"
 }
\ No newline at end of file
diff --git a/src/app/zCoba/page.tsx b/src/app/zCoba/page.tsx
index 6cccd737..be966c64 100644
--- a/src/app/zCoba/page.tsx
+++ b/src/app/zCoba/page.tsx
@@ -1,5 +1,5 @@
 import ComponentGlobal_HeaderTamplate from "@/app_modules/component_global/header_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import Coba_TestLoading from "@/app_modules/zCoba";
 import { Text } from "@mantine/core";
 
diff --git a/src/app_modules/auth/splash/view.tsx b/src/app_modules/auth/splash/view.tsx
index 5ca2f9d8..0e84fa70 100644
--- a/src/app_modules/auth/splash/view.tsx
+++ b/src/app_modules/auth/splash/view.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { MainColor } from "@/app_modules/component_global/color/color_pallet";
+import ComponentGlobal_SplashScreen from "@/app_modules/component_global/splash/splash_global";
 import { BackgroundImage, Center, Image, Paper, Stack } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
@@ -11,12 +12,12 @@ export default function SplashScreen({ data }: { data: any }) {
   useShallowEffect(() => {
     if (!data) {
       setTimeout(() => {
-        return router.push("/dev/auth/login");
-      }, 2000);
+        return router.push("/dev/auth/login", { scroll: false });
+      }, 1000);
     } else {
       setTimeout(() => {
-        return router.push("/dev/home");
-      }, 2000);
+        return router.push("/dev/home", { scroll: false });
+      }, 1000);
     }
   }, []);
 
diff --git a/src/app_modules/component_global/splash/splash_global.tsx b/src/app_modules/component_global/splash/splash_global.tsx
index 97463ec2..2f969605 100644
--- a/src/app_modules/component_global/splash/splash_global.tsx
+++ b/src/app_modules/component_global/splash/splash_global.tsx
@@ -1,20 +1,20 @@
 "use client";
 
 import { Stack, Loader, ActionIcon, ThemeIcon } from "@mantine/core";
-import ComponentGlobal_UI_LayoutTamplate from "../ui/ui_layout_tamplate";
+import LayoutGlobal_UI_Tamplate from "../ui/ui_layout_tamplate";
 import { IconMessages, IconX } from "@tabler/icons-react";
 
 export default function ComponentGlobal_SplashScreen({ icon }: { icon: any }) {
   return (
     <>
-      <ComponentGlobal_UI_LayoutTamplate>
+      <LayoutGlobal_UI_Tamplate>
         <Stack h={"90vh"} align="center" justify="center" spacing={"xl"}>
           <ThemeIcon variant="transparent" size={300} c="white">
             {icon}
           </ThemeIcon>
           <Loader variant="dots" color="white" />
         </Stack>
-      </ComponentGlobal_UI_LayoutTamplate>
+      </LayoutGlobal_UI_Tamplate>
     </>
   );
 }
diff --git a/src/app_modules/component_global/ui/ui_header_tamplate.tsx b/src/app_modules/component_global/ui/ui_header_tamplate.tsx
index fdeab7d9..00df1c10 100644
--- a/src/app_modules/component_global/ui/ui_header_tamplate.tsx
+++ b/src/app_modules/component_global/ui/ui_header_tamplate.tsx
@@ -11,19 +11,21 @@ import {
 } from "@mantine/core";
 import { IconArrowLeft, IconChevronLeft } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import React, { useState } from "react";
 import { AccentColor, MainColor } from "../color/color_pallet";
 
-export default function ComponentGlobal_UI_HeaderTamplate({
+export default function LayoutGlobal_UI_HeaderTamplate({
   title,
   posotion,
   // left button
   hideButtonLeft,
   iconLeft,
   routerLeft,
+  customButtonLeft,
   // right button
   iconRight,
   routerRight,
+  customButtonRight,
 }: {
   title: string;
   posotion?: any;
@@ -31,9 +33,11 @@ export default function ComponentGlobal_UI_HeaderTamplate({
   hideButtonLeft?: boolean;
   iconLeft?: any;
   routerLeft?: any;
+  customButtonLeft?: React.ReactNode;
   // right button
   iconRight?: any;
   routerRight?: any;
+  customButtonRight?: React.ReactNode;
 }) {
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
@@ -53,6 +57,8 @@ export default function ComponentGlobal_UI_HeaderTamplate({
         <Group h={"100%"} position={posotion ? posotion : "apart"} px={"md"}>
           {hideButtonLeft ? (
             <ActionIcon disabled variant="transparent"></ActionIcon>
+          ) : customButtonLeft ? (
+            customButtonLeft
           ) : (
             <ActionIcon
               c={"white"}
@@ -62,7 +68,7 @@ export default function ComponentGlobal_UI_HeaderTamplate({
                 setIsLoading(true);
                 routerLeft === undefined
                   ? router.back()
-                  : router.push(routerLeft);
+                  : router.push(routerLeft, { scroll: false });
               }}
             >
               {isLoading ? (
@@ -79,7 +85,9 @@ export default function ComponentGlobal_UI_HeaderTamplate({
             {title}
           </Title>
 
-          {iconRight === undefined ? (
+          {customButtonRight ? (
+            customButtonRight
+          ) : iconRight === undefined ? (
             <ActionIcon disabled variant="transparent"></ActionIcon>
           ) : routerRight === undefined ? (
             <Box>{iconRight}</Box>
diff --git a/src/app_modules/component_global/ui/ui_layout_tamplate.tsx b/src/app_modules/component_global/ui/ui_layout_tamplate.tsx
index 652254b1..d9823a7a 100644
--- a/src/app_modules/component_global/ui/ui_layout_tamplate.tsx
+++ b/src/app_modules/component_global/ui/ui_layout_tamplate.tsx
@@ -1,13 +1,17 @@
+"use client";
+
 import {
   BackgroundImage,
   Box,
   Container,
   Footer,
+  rem,
   ScrollArea,
 } from "@mantine/core";
 import { AccentColor, MainColor } from "../color/color_pallet";
+import React from "react";
 
-export default function ComponentGlobal_UI_LayoutTamplate({
+export default function LayoutGlobal_UI_Tamplate({
   children,
   header,
   footer,
@@ -18,56 +22,104 @@ export default function ComponentGlobal_UI_LayoutTamplate({
 }) {
   return (
     <>
-      <BackgroundImage src={"/aset/global/main_background.png"} h={"100vh"} style={{position: "relative"}}>
-        {/* Header */}
-        {header ? (
-          <Box
-            h={"8vh"}
-            style={{
-              zIndex: 10,
-            }}
-            w={"100%"}
-            pos={"sticky"}
-            top={0}
+      <Box
+        w={"100%"}
+        h={"100%"}
+        style={{
+          overflowY: "auto",
+          backgroundColor: MainColor.black,
+          position: "fixed",
+        }}
+      >
+        <Container mih={"100vh"} p={0} size={rem(500)} bg={MainColor.darkblue}>
+          <BackgroundImage
+            src={"/aset/global/main_background.png"}
+            h={"100vh"}
+            style={{ position: "relative" }}
           >
-            {header}
-          </Box>
-        ) : (
-          ""
-        )}
+            <UIHeader header={header} />
 
-        {/* Children */}
-        <Box style={{zIndex: 0}} h={footer ? "82vh" : "92vh"} pos={"static"}>
-          <ScrollArea h={"100%"} px={"md"}>
-            {children}
-          </ScrollArea>
-        </Box>
+            <UIChildren footer={footer}>{children}</UIChildren>
 
-        {/* Footer */}
-        {footer ? (
-          <Box style={{ position: "relative", bottom: 0 }} >
-            <Box
-              style={{
-                zIndex: 10,
-                borderRadius: "20px 20px 0px 0px",
-                borderTop: `2px solid ${AccentColor.blue}`,
-                borderRight: `1px solid ${AccentColor.blue}`,
-                borderLeft: `1px solid ${AccentColor.blue}`,
-                width: "100%",
-              }}
-              bg={AccentColor.darkblue}
-              color="blue"
-              pos={"absolute"}
-              // bottom={0}
-              h={"10vh"}
-            >
-              {footer}
-            </Box>
-          </Box>
-        ) : (
-          ""
-        )}
-      </BackgroundImage>
+            <UIFooter footer={footer} />
+          </BackgroundImage>
+        </Container>
+      </Box>
+    </>
+  );
+}
+
+function UIHeader({ header }: { header: React.ReactNode }) {
+  return (
+    <>
+      {header ? (
+        <Box
+          h={"8vh"}
+          style={{
+            zIndex: 10,
+          }}
+          w={"100%"}
+          pos={"sticky"}
+          top={0}
+        >
+          {header}
+        </Box>
+      ) : (
+        ""
+      )}
+    </>
+  );
+}
+
+function UIChildren({
+  children,
+  footer,
+}: {
+  children: React.ReactNode;
+  footer: React.ReactNode;
+}) {
+  return (
+    <>
+      <Box style={{ zIndex: 0 }} h={footer ? "82vh" : "92vh"} pos={"static"}>
+        <ScrollArea h={"100%"} px={"md"}>
+          {children}
+        </ScrollArea>
+      </Box>
+    </>
+  );
+}
+
+function UIFooter({ footer }: { footer: React.ReactNode }) {
+  return (
+    <>
+      {footer ? (
+        <Box
+          style={{
+            position: "relative",
+            bottom: 0,
+            height: "10vh",
+            zIndex: 10,
+            borderRadius: "20px 20px 0px 0px",
+            borderTop: `2px solid ${AccentColor.blue}`,
+            borderRight: `1px solid ${AccentColor.blue}`,
+            borderLeft: `1px solid ${AccentColor.blue}`,
+          }}
+          bg={AccentColor.darkblue}
+        >
+          <Box
+            h={"100%"}
+            style={{
+              borderRadius: "20px 20px 0px 0px",
+              width: "100%",
+            }}
+            pos={"absolute"}
+          >
+            {footer}
+          </Box>
+        </Box>
+      ) : (
+        ""
+      )}
     </>
   );
 }
diff --git a/src/app_modules/component_global/ui/ui_loader.tsx b/src/app_modules/component_global/ui/ui_loader.tsx
new file mode 100644
index 00000000..54333cf3
--- /dev/null
+++ b/src/app_modules/component_global/ui/ui_loader.tsx
@@ -0,0 +1,10 @@
+import { Loader } from "@mantine/core";
+import { MainColor } from "../color/color_pallet";
+
+export default function ComponentGlobal_UI_Loader({ size }: { size?: number }) {
+  return (
+    <>
+      <Loader color={MainColor.yellow} size={size ? size : 20} />
+    </>
+  );
+}
diff --git a/src/app_modules/forum/component/detail_component/ui_report_komentar.tsx b/src/app_modules/forum/component/detail_component/ui_report_komentar.tsx
new file mode 100644
index 00000000..7a1aaae2
--- /dev/null
+++ b/src/app_modules/forum/component/detail_component/ui_report_komentar.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import { Stack, Paper, Text, List, Box } from "@mantine/core";
+import { useState } from "react";
+import { MODEL_FORUM_KOMENTAR } from "../../model/interface";
+import { AccentColor, MainColor } from "@/app_modules/component_global/color/color_pallet";
+
+export function ComponentForum_UiDetailReportKomentar({
+  dataKomentar,
+}: {
+  dataKomentar: any;
+}) {
+  const [data, setData] = useState<MODEL_FORUM_KOMENTAR>(dataKomentar.data);
+  const [list, setList] = useState<any[]>(dataKomentar.list);
+  return (
+    <>
+      <Box
+        p={"md"}
+        style={{
+          backgroundColor: MainColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          borderRadius: "10px 10px 10px 10px",
+        }}
+      >
+        <Stack c="white">
+          <Text fw={"bold"} align="center" mb={"lg"}>
+            Komentar anda telah dihapus dari sebuah postingan oleh ADMIN, karena
+            memiliki beberapa laporan dari pengguna lain !
+          </Text>
+
+          <Stack spacing={"xs"}>
+            <Text fw={"bold"}>Komentar anda</Text>
+            <Paper withBorder p={"sm"}>
+              <Text>
+                <div dangerouslySetInnerHTML={{ __html: data.komentar }} />
+              </Text>
+            </Paper>
+          </Stack>
+
+          <Stack spacing={"xs"}>
+            <Text fw={"bold"}>
+              Pada postingan : {data.Forum_Posting.Author.username}
+            </Text>
+            <Paper withBorder p={"sm"}>
+              <Text>
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: data.Forum_Posting.diskusi,
+                  }}
+                />
+              </Text>
+            </Paper>
+          </Stack>
+          <Stack spacing={"xs"}>
+            <Text fw={"bold"}>Laporan yang diterima :</Text>
+            <List withPadding>
+              {list.map((x, i) => (
+                <List.Item c={"white"} key={i}>{x}</List.Item>
+              ))}
+            </List>
+          </Stack>
+        </Stack>
+      </Box>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/app_modules/forum/component/detail_component/ui_report_posting.tsx b/src/app_modules/forum/component/detail_component/ui_report_posting.tsx
new file mode 100644
index 00000000..84de8f62
--- /dev/null
+++ b/src/app_modules/forum/component/detail_component/ui_report_posting.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { Stack, Paper, Text, List, Box } from "@mantine/core";
+import { useState } from "react";
+import { MODEL_FORUM_POSTING } from "../../model/interface";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
+
+export function ComponentForum_UiDetailReportPosting({
+  dataPosting,
+}: {
+  dataPosting: any;
+}) {
+  const [data, setData] = useState<MODEL_FORUM_POSTING>(dataPosting.data);
+  const [list, setList] = useState<any[]>(dataPosting.list);
+
+  return (
+    <>
+      <Box
+        p={"md"}
+        style={{
+          backgroundColor: MainColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          borderRadius: "10px 10px 10px 10px",
+        }}
+      >
+        <Stack c="white">
+          <Text fw={"bold"} align="center" mb={"lg"}>
+            Postingan anda telah dihapus dari beranda oleh ADMIN, karena
+            memiliki beberapa laporan dari pengguna lain !
+          </Text>
+          <Stack spacing={"xs"}>
+            <Text fw={"bold"}>Pada postingan</Text>
+            <Paper withBorder p={"sm"}>
+              <Text>
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: data.diskusi,
+                  }}
+                />
+              </Text>
+            </Paper>
+          </Stack>
+
+          <Stack spacing={"xs"}>
+            <Text fw={"bold"}>Laporan yang diterima :</Text>
+            <List withPadding>
+              {list.map((x, i) => (
+                <List.Item c={"white"} key={i}>
+                  {x}
+                </List.Item>
+              ))}
+            </List>
+          </Stack>
+        </Stack>
+      </Box>
+    </>
+  );
+}
diff --git a/src/app_modules/forum/create/layout.tsx b/src/app_modules/forum/create/layout.tsx
index 5b9be6e3..121dad16 100644
--- a/src/app_modules/forum/create/layout.tsx
+++ b/src/app_modules/forum/create/layout.tsx
@@ -4,8 +4,8 @@ import { AppShell } from "@mantine/core";
 import React from "react";
 import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
 
 export default function LayoutForum_Create({
   children,
@@ -14,11 +14,11 @@ export default function LayoutForum_Create({
 }) {
   return (
     <>
-    <ComponentGlobal_UI_LayoutTamplate
-    header={<ComponentGlobal_UI_HeaderTamplate title="Tambah Postingan"/>}
+    <LayoutGlobal_UI_Tamplate
+    header={<LayoutGlobal_UI_HeaderTamplate title="Tambah Postingan"/>}
     >
       {children}
-    </ComponentGlobal_UI_LayoutTamplate>
+    </LayoutGlobal_UI_Tamplate>
 
 
       {/* <AppComponentGlobal_LayoutTamplate header={<ComponentForum_HeaderTamplate title="Tambah Postingan" />}>
diff --git a/src/app_modules/forum/detail/detail_report_komentar.tsx b/src/app_modules/forum/detail/detail_report_komentar.tsx
index 85bc8a68..f3c1e417 100644
--- a/src/app_modules/forum/detail/detail_report_komentar.tsx
+++ b/src/app_modules/forum/detail/detail_report_komentar.tsx
@@ -1,19 +1,7 @@
-"use client";
+import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import { ComponentForum_UiDetailReportKomentar } from "../component/detail_component/ui_report_komentar";
 
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
-import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
-import {
-  Box,
-  Center,
-  Group,
-  List,
-  Paper,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
-import { MODEL_FORUM_KOMENTAR, MODEL_FORUM_POSTING } from "../model/interface";
-import { useState } from "react";
 
 export default function Forum_DetailReportKomentar({
   dataKomentar,
@@ -22,58 +10,13 @@ export default function Forum_DetailReportKomentar({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentForum_HeaderTamplate title="Report Komentar" />}
+      <LayoutGlobal_UI_Tamplate
+        header={<LayoutGlobal_UI_HeaderTamplate title="Report Komentar" />}
       >
-        {<View dataKomentar={dataKomentar} />}
-      </AppComponentGlobal_LayoutTamplate>
+        {<ComponentForum_UiDetailReportKomentar dataKomentar={dataKomentar} />}
+      </LayoutGlobal_UI_Tamplate>
     </>
   );
 }
 
-function View({ dataKomentar }: { dataKomentar: any }) {
-  const [data, setData] = useState<MODEL_FORUM_KOMENTAR>(dataKomentar.data);
-  const [list, setList] = useState<any[]>(dataKomentar.list);
-  return (
-    <>
-      <Stack>
-        <Text fw={"bold"} align="center" mb={"lg"}>
-          Komentar anda telah dihapus dari sebuah postingan oleh ADMIN, karena
-          memiliki beberapa laporan dari pengguna lain !
-        </Text>
 
-        <Stack spacing={"xs"}>
-          <Text fw={"bold"}>Komentar anda</Text>
-          <Paper withBorder p={"sm"}>
-            <Text>
-              <div dangerouslySetInnerHTML={{ __html: data.komentar }} />
-            </Text>
-          </Paper>
-        </Stack>
-
-        <Stack spacing={"xs"}>
-          <Text fw={"bold"}>
-            Pada postingan : {data.Forum_Posting.Author.username}
-          </Text>
-          <Paper withBorder p={"sm"}>
-            <Text>
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: data.Forum_Posting.diskusi,
-                }}
-              />
-            </Text>
-          </Paper>
-        </Stack>
-        <Stack spacing={"xs"}>
-          <Text fw={"bold"}>Laporan yang diterima :</Text>
-          <List withPadding>
-            {list.map((x, i) => (
-              <List.Item key={i}>{x}</List.Item>
-            ))}
-          </List>
-        </Stack>
-      </Stack>
-    </>
-  );
-}
diff --git a/src/app_modules/forum/detail/detail_report_posting.tsx b/src/app_modules/forum/detail/detail_report_posting.tsx
index 0f3f993c..0322485b 100644
--- a/src/app_modules/forum/detail/detail_report_posting.tsx
+++ b/src/app_modules/forum/detail/detail_report_posting.tsx
@@ -1,10 +1,7 @@
-"use client";
-
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
-import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
-import { List, Paper, Stack, Text } from "@mantine/core";
-import { MODEL_FORUM_POSTING } from "../model/interface";
-import { useState } from "react";
+import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import { Stack, Text } from "@mantine/core";
+import { ComponentForum_UiDetailReportPosting } from "../component/detail_component/ui_report_posting";
 
 export default function Forum_DetailReportPosting({
   dataPosting,
@@ -13,49 +10,11 @@ export default function Forum_DetailReportPosting({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentForum_HeaderTamplate title="Report Posting" />}
+      <LayoutGlobal_UI_Tamplate
+        header={<LayoutGlobal_UI_HeaderTamplate title="Report Posting" />}
       >
-        <View dataPosting={dataPosting} />
-      </AppComponentGlobal_LayoutTamplate>
-    </>
-  );
-}
-
-function View({ dataPosting }: { dataPosting: any }) {
-  const [data, setData] = useState<MODEL_FORUM_POSTING>(dataPosting.data);
-  const [list, setList] = useState<any[]>(dataPosting.list);
-
-  return (
-    <>
-      <Stack>
-        <Text fw={"bold"} align="center" mb={"lg"}>
-          Postingan anda telah dihapus dari beranda oleh ADMIN, karena memiliki
-          beberapa laporan dari pengguna lain !
-        </Text>
-
-        <Stack spacing={"xs"}>
-          <Text fw={"bold"}>Pada postingan</Text>
-          <Paper withBorder p={"sm"}>
-            <Text>
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: data.diskusi,
-                }}
-              />
-            </Text>
-          </Paper>
-        </Stack>
-
-        <Stack spacing={"xs"}>
-          <Text fw={"bold"}>Laporan yang diterima :</Text>
-          <List withPadding>
-            {list.map((x, i) => (
-              <List.Item key={i}>{x}</List.Item>
-            ))}
-          </List>
-        </Stack>
-      </Stack>
+        <ComponentForum_UiDetailReportPosting dataPosting={dataPosting} />
+      </LayoutGlobal_UI_Tamplate>
     </>
   );
 }
diff --git a/src/app_modules/forum/detail/layout.tsx b/src/app_modules/forum/detail/layout.tsx
index 51745523..e3339f95 100644
--- a/src/app_modules/forum/detail/layout.tsx
+++ b/src/app_modules/forum/detail/layout.tsx
@@ -8,8 +8,8 @@ import { IconChevronLeft } from "@tabler/icons-react";
 import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
 import { revalidatePath } from "next/cache";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
 
 export const dynamic = "force-dynamic";
 export default function LayoutForum_Detail({
@@ -24,11 +24,11 @@ export default function LayoutForum_Detail({
 
   return (
     <>
-      <ComponentGlobal_UI_LayoutTamplate
-        header={<ComponentGlobal_UI_HeaderTamplate title="Postingan" posotion={"left"} />}
+      <LayoutGlobal_UI_Tamplate
+        header={<LayoutGlobal_UI_HeaderTamplate title="Postingan" posotion={"left"} />}
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </LayoutGlobal_UI_Tamplate>
 
       {/* <AppComponentGlobal_LayoutTamplate
         header={
diff --git a/src/app_modules/forum/edit/posting/layout.tsx b/src/app_modules/forum/edit/posting/layout.tsx
index 9e6c286b..a93b0a08 100644
--- a/src/app_modules/forum/edit/posting/layout.tsx
+++ b/src/app_modules/forum/edit/posting/layout.tsx
@@ -4,8 +4,8 @@ import { AppShell } from "@mantine/core";
 import React from "react";
 import ComponentForum_HeaderTamplate from "../../component/header/header_tamplate";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
 
 export default function LayoutForum_EditPosting({
   children,
@@ -14,11 +14,11 @@ export default function LayoutForum_EditPosting({
 }) {
   return (
     <>
-      <ComponentGlobal_UI_LayoutTamplate
-        header={<ComponentGlobal_UI_HeaderTamplate title="Edit Postingan" />}
+      <LayoutGlobal_UI_Tamplate
+        header={<LayoutGlobal_UI_HeaderTamplate title="Edit Postingan" />}
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </LayoutGlobal_UI_Tamplate>
 
       {/* <AppComponentGlobal_LayoutTamplate
         header={<ComponentForum_HeaderTamplate title="Edit Postingan" />}
diff --git a/src/app_modules/forum/forumku/layout.tsx b/src/app_modules/forum/forumku/layout.tsx
index 2ea05fa3..8281d194 100644
--- a/src/app_modules/forum/forumku/layout.tsx
+++ b/src/app_modules/forum/forumku/layout.tsx
@@ -6,8 +6,8 @@ import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
 import { MODEL_USER } from "@/app_modules/home/model/interface";
 import { IconX } from "@tabler/icons-react";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
 
 export default function LayoutForum_Forumku({
   children,
@@ -18,16 +18,16 @@ export default function LayoutForum_Forumku({
 }) {
   return (
     <>
-      <ComponentGlobal_UI_LayoutTamplate
+      <LayoutGlobal_UI_Tamplate
         header={
-          <ComponentGlobal_UI_HeaderTamplate
+          <LayoutGlobal_UI_HeaderTamplate
             title={`${username}`}
             iconLeft={<IconX />}
           />
         }
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </LayoutGlobal_UI_Tamplate>
 
       {/* <AppComponentGlobal_LayoutTamplate
         header={
diff --git a/src/app_modules/forum/main/beranda.tsx b/src/app_modules/forum/main/beranda.tsx
index e3842721..cda00f5e 100644
--- a/src/app_modules/forum/main/beranda.tsx
+++ b/src/app_modules/forum/main/beranda.tsx
@@ -158,7 +158,7 @@ export default function Forum_Beranda({
         </ActionIcon>
       </Affix>
 
-      <Stack spacing={"xl"}>
+      <Stack spacing={"xl"} >
         <TextInput
           radius={"xl"}
           placeholder="Topik forum apa yang anda cari hari ini ?"
@@ -179,7 +179,7 @@ export default function Forum_Beranda({
         ) : (
           // --- Main component --- //
           <ScrollOnly
-            height="83vh"
+            height="85vh"
             renderLoading={() => (
               <Center mt={"lg"}>
                 <Loader color={"yellow"} />
diff --git a/src/app_modules/forum/main/layout.tsx b/src/app_modules/forum/main/layout.tsx
index 39e9266e..798a58e5 100644
--- a/src/app_modules/forum/main/layout.tsx
+++ b/src/app_modules/forum/main/layout.tsx
@@ -26,8 +26,8 @@ import { MODEL_USER } from "@/app_modules/home/model/interface";
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
 
 export default function LayoutForum_Main({
   children,
@@ -43,9 +43,9 @@ export default function LayoutForum_Main({
 
   return (
     <>
-      <ComponentGlobal_UI_LayoutTamplate
+      <LayoutGlobal_UI_Tamplate
         header={
-          <ComponentGlobal_UI_HeaderTamplate
+          <LayoutGlobal_UI_HeaderTamplate
             title="FORUM"
             iconRight={
               <ActionIcon
@@ -80,7 +80,7 @@ export default function LayoutForum_Main({
         }
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </LayoutGlobal_UI_Tamplate>
 
       {/* <AppComponentGlobal_LayoutTamplate
         header={
diff --git a/src/app_modules/forum/report/komentar/layout.tsx b/src/app_modules/forum/report/komentar/layout.tsx
index f131b935..38fe8b0c 100644
--- a/src/app_modules/forum/report/komentar/layout.tsx
+++ b/src/app_modules/forum/report/komentar/layout.tsx
@@ -3,8 +3,8 @@
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
 import React from "react";
 import ComponentForum_HeaderRataKiri from "../../component/header/header_rata_kiri";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
 
 export default function LayoutForum_ReportKomentar({
   children,
@@ -13,13 +13,13 @@ export default function LayoutForum_ReportKomentar({
 }) {
   return (
     <>
-      <ComponentGlobal_UI_LayoutTamplate
+      <LayoutGlobal_UI_Tamplate
         header={
-          <ComponentGlobal_UI_HeaderTamplate title="Mengumpulkan Informasi Komentar" />
+          <LayoutGlobal_UI_HeaderTamplate title="Mengumpulkan Informasi Komentar" />
         }
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </LayoutGlobal_UI_Tamplate>
       {/* <AppComponentGlobal_LayoutTamplate
         header={
           <ComponentForum_HeaderRataKiri title="Mengumpulkan Informasi Komentar"/>
diff --git a/src/app_modules/forum/report/posting/layout.tsx b/src/app_modules/forum/report/posting/layout.tsx
index 0b9b250b..784e3d60 100644
--- a/src/app_modules/forum/report/posting/layout.tsx
+++ b/src/app_modules/forum/report/posting/layout.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import React from "react";
 
 export default function LayoutForum_ReportPosting({
@@ -11,13 +11,13 @@ export default function LayoutForum_ReportPosting({
 }) {
   return (
     <>
-      <ComponentGlobal_UI_LayoutTamplate
+      <LayoutGlobal_UI_Tamplate
         header={
-          <ComponentGlobal_UI_HeaderTamplate title="Mengumpulkan Informasi Posting" />
+          <LayoutGlobal_UI_HeaderTamplate title="Mengumpulkan Informasi Posting" />
         }
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </LayoutGlobal_UI_Tamplate>
 
   
     </>
diff --git a/src/app_modules/forum/splash/index.tsx b/src/app_modules/forum/splash/index.tsx
index 195c03db..03f44677 100644
--- a/src/app_modules/forum/splash/index.tsx
+++ b/src/app_modules/forum/splash/index.tsx
@@ -2,7 +2,7 @@
 
 import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
 import ComponentGlobal_SplashScreen from "@/app_modules/component_global/splash/splash_global";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import {
   Avatar,
   Center,
@@ -20,7 +20,7 @@ export default function Forum_Splash() {
   const router = useRouter();
   useShallowEffect(() => {
     setTimeout(() => {
-      router.replace(RouterForum.beranda);
+      router.replace(RouterForum.beranda, { scroll: false });
     }, 1000);
   }, []);
 
diff --git a/src/app_modules/home/component/button_header.tsx b/src/app_modules/home/component/button_header.tsx
new file mode 100644
index 00000000..05e5898f
--- /dev/null
+++ b/src/app_modules/home/component/button_header.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_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/component_global/notif_global/notifikasi_peringatan";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { RouterUserSearch } from "@/app/lib/router_hipmi/router_user_search";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_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 notifikasi_countUserNotifikasi from "@/app_modules/notifikasi/fun/count/fun_count_by_id";
+
+export function ComponentHome_ButtonHeaderLeft({
+  dataUser,
+}: {
+  dataUser: MODEL_USER;
+}) {
+  const router = useRouter();
+  const [isLoadingUS, setIsLoadingUS] = useState(false);
+
+  return (
+    <>
+      <ActionIcon
+        radius={"xl"}
+        variant={"transparent"}
+        onClick={() => {
+          if (dataUser?.Profile === null) {
+            ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
+          } else {
+            setIsLoadingUS(true);
+            router.push(RouterUserSearch.main, { scroll: false });
+          }
+        }}
+      >
+        {isLoadingUS ? (
+          <Loader color={AccentColor.yellow} size={20} />
+        ) : (
+          <IconUserSearch color="white" />
+        )}
+      </ActionIcon>
+    </>
+  );
+}
+
+export function ComponentHome_ButtonHeaderRight({
+  dataUser,
+  countNotifikasi,
+}: {
+  dataUser: MODEL_USER;
+  countNotifikasi: number;
+}) {
+  const router = useRouter();
+  const [count, setCount] = useState(countNotifikasi);
+  const [isLoadingBell, setIsLoadingBell] = useState(false);
+
+  useShallowEffect(() => {
+    onLoadNotifkasi({
+      onLoad(val) {
+        setCount(val);
+      },
+    });
+  }, []);
+
+  async function onLoadNotifkasi({ onLoad }: { onLoad: (val: any) => void }) {
+    const loadNotifikasi = await notifikasi_countUserNotifikasi();
+    onLoad(loadNotifikasi);
+  }
+
+  return (
+    <>
+      <ActionIcon
+        variant="transparent"
+        onClick={() => {
+          if (dataUser?.Profile === null) {
+            ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
+          } else {
+            router.push(RouterNotifikasi.main, { scroll: false });
+            setIsLoadingBell(true);
+          }
+        }}
+      >
+        {isLoadingBell ? (
+          <Loader color={AccentColor.yellow} size={20} />
+        ) : (
+          <Indicator
+            processing
+            color={MainColor.yellow}
+            label={
+              <Text fz={10} c={MainColor.darkblue}>
+                {count > 99 ? "99+" : count}
+              </Text>
+            }
+          >
+            <IconBell color="white" />
+          </Indicator>
+        )}
+      </ActionIcon>
+    </>
+  );
+}
diff --git a/src/app_modules/home/view.tsx b/src/app_modules/home/component/ui_home.tsx
similarity index 58%
rename from src/app_modules/home/view.tsx
rename to src/app_modules/home/component/ui_home.tsx
index bd984546..935c09fc 100644
--- a/src/app_modules/home/view.tsx
+++ b/src/app_modules/home/component/ui_home.tsx
@@ -1,43 +1,49 @@
 "use client";
 
-import {
-  ActionIcon,
-  Box,
-  Center,
-  Group,
-  Image,
-  Loader,
-  LoadingOverlay,
-  Overlay,
-  Paper,
-  SimpleGrid,
-  Stack,
-  Text,
-} from "@mantine/core";
-
-import {
-  IconAffiliate,
-  IconBriefcase,
-  IconHeartHandshake,
-  IconPackageImport,
-  IconPresentation,
-  IconUserSearch,
-} from "@tabler/icons-react";
-
 import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
 import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
+import ComponentGlobal_IsEmptyData from "@/app_modules/component_global/is_empty_data";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
+import {
+  Box,
+  Paper,
+  Stack,
+  SimpleGrid,
+  ActionIcon,
+  Loader,
+  Group,
+  Image,
+  Text,
+  Avatar,
+  Center,
+} from "@mantine/core";
+import {
+  IconPresentation,
+  IconAffiliate,
+  IconPackageImport,
+  IconHeartHandshake,
+  IconBriefcase,
+  IconUserSearch,
+  IconMap2,
+  IconMessages,
+  IconShoppingBag,
+  IconUserCircle,
+} from "@tabler/icons-react";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { AccentColor, MainColor } from "../component_global/color/color_pallet";
-import ComponentGlobal_IsEmptyData from "../component_global/is_empty_data";
-import { ComponentGlobal_NotifikasiPeringatan } from "../component_global/notif_global/notifikasi_peringatan";
-import { MODEL_JOB } from "../job/model/interface";
-import { MODEL_USER } from "./model/interface";
+import { MODEL_USER } from "../model/interface";
+import { MODEL_JOB } from "@/app_modules/job/model/interface";
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 
-export default function HomeView({
+export function Home_UiView({
   dataUser,
   dataJob,
 }: {
@@ -86,7 +92,7 @@ export default function HomeView({
 
   return (
     <>
-      <Box p={"md"}>
+      <Box>
         <Paper
           radius={"xl"}
           mb={"xs"}
@@ -130,7 +136,7 @@ export default function HomeView({
                     } else {
                       setIsLoading(true);
                       setPageId(e.id);
-                      router.push(e.link);
+                      router.push(e.link, { scroll: false });
                     }
                   }
                 }}
@@ -179,13 +185,14 @@ export default function HomeView({
                     );
                   } else {
                     setLoadingJob(true);
-                    return router.push(routePageJob.link);
+                    return router.push(routePageJob.link, { scroll: false });
                   }
                 }
               }}
             >
               <Group>
                 <ActionIcon
+                  variant="transparent"
                   size={40}
                   c={routePageJob.link === "" ? "gray.3" : "white"}
                 >
@@ -230,3 +237,123 @@ export default function HomeView({
     </>
   );
 }
+
+const listHalamanFooter = [
+  {
+    id: 1,
+    name: "Forums",
+    icon: <IconMessages />,
+    link: RouterForum.splash,
+  },
+
+  {
+    id: 2,
+    name: "MarketPlace",
+    icon: <IconShoppingBag />,
+    link: "",
+  },
+  {
+    id: 3,
+    name: "Business Maps",
+    icon: <IconMap2 />,
+    link: "",
+  },
+];
+
+export function Home_UiFooter({ dataUser }: { dataUser: MODEL_USER }) {
+  const router = useRouter();
+  const [isLoadingProfil, setIsLoadingProfile] = useState(false);
+  const [isLoadingPage, setIsLoadingPage] = useState(false);
+  const [pageId, setPageId] = useState(0);
+  return (
+    <>
+      <Box
+        style={{
+          zIndex: 99,
+          borderRadius: "20px 20px 0px 0px",
+        }}
+        w={"100%"}
+        bottom={0}
+        h={"10vh"}
+      >
+        <SimpleGrid cols={4}>
+          {listHalamanFooter.map((e, i) => (
+            <Center h={"10vh"} key={e.id}>
+              <Stack align="center" spacing={0}>
+                <ActionIcon
+                  radius={"xl"}
+                  // loading={isLoadingPage && e.id === pageId ? true : false}
+                  c={e.link === "" ? "gray" : "white"}
+                  variant="transparent"
+                  onClick={() => {
+                    if (dataUser?.Profile === null) {
+                      ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
+                    } else {
+                      e.link === ""
+                        ? ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
+                        : (router.push(e.link, { scroll: false }),
+                          setIsLoadingPage(true),
+                          setPageId(e?.id));
+                    }
+                  }}
+                >
+                  {isLoadingPage && e.id === pageId ? (
+                    <Loader color={AccentColor.yellow} size={20} />
+                  ) : (
+                    e.icon
+                  )}
+                </ActionIcon>
+                <Text c={e.link === "" ? "gray" : "white"} fz={"xs"}>
+                  {e.name}
+                </Text>
+              </Stack>
+            </Center>
+          ))}
+
+          <Center h={"10vh"}>
+            <Stack
+              align="center"
+              spacing={2}
+              onClick={() => {
+                setIsLoadingProfile(true);
+                if (dataUser?.Profile === null) {
+                  router.push(RouterProfile.create, { scroll: false });
+                } else {
+                  router.push(
+                    RouterProfile.katalog + `${dataUser?.Profile?.id}`,
+                    { scroll: false }
+                  );
+                }
+              }}
+            >
+              <ActionIcon variant={"transparent"}>
+                {dataUser?.Profile === null ? (
+                  <IconUserCircle color="white" />
+                ) : isLoadingProfil ? (
+                  <Loader color={AccentColor.yellow} size={20} />
+                ) : (
+                  <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>
+        </SimpleGrid>
+      </Box>
+    </>
+  );
+}
diff --git a/src/app_modules/home/index.ts b/src/app_modules/home/index.ts
index 713cdd1b..07785dd4 100644
--- a/src/app_modules/home/index.ts
+++ b/src/app_modules/home/index.ts
@@ -1,5 +1,4 @@
-import HomeView from "./view";
-import HomeLayout from "./layout";
+import HomeView from "./view_home";
 import Home_UserNotActive from "./user_non_active";
 
-export { HomeView, HomeLayout, Home_UserNotActive as Home_UserNonActive };
+export { HomeView, Home_UserNotActive as Home_UserNonActive };
diff --git a/src/app_modules/home/layout.tsx b/src/app_modules/home/layout.tsx
deleted file mode 100644
index ba42b607..00000000
--- a/src/app_modules/home/layout.tsx
+++ /dev/null
@@ -1,310 +0,0 @@
-"use client";
-import {
-  ActionIcon,
-  AppShell,
-  Avatar,
-  BackgroundImage,
-  Box,
-  Center,
-  Flex,
-  Footer,
-  Grid,
-  Group,
-  Header,
-  Indicator,
-  Loader,
-  Paper,
-  ScrollArea,
-  SimpleGrid,
-  Stack,
-  Text,
-  ThemeIcon,
-  Title,
-} from "@mantine/core";
-import { HomeView } from ".";
-import {
-  IconUserSearch,
-  IconAward,
-  IconQrcode,
-  IconUserCircle,
-  IconBell,
-  IconMessages,
-  IconShoppingBag,
-  IconMap2,
-} from "@tabler/icons-react";
-import { Logout } from "../auth";
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import { MODEL_USER } from "./model/interface";
-import React, { useState } from "react";
-import { useRouter } from "next/navigation";
-import { ComponentGlobal_NotifikasiPeringatan } from "../component_global/notif_global/notifikasi_peringatan";
-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";
-import { AccentColor, MainColor } from "../component_global/color/color_pallet";
-import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
-
-export default function HomeLayout({
-  dataUser,
-  children,
-  countNotifikasi,
-}: {
-  dataUser: MODEL_USER;
-  children: React.ReactNode;
-  countNotifikasi: number;
-}) {
-  const router = useRouter();
-  // const [user, setUser] = useState(dataUser);
-  const [isLoadingProfil, setIsLoadingProfile] = useState(false);
-  const [isLoadingUS, setIsLoadingUS] = useState(false);
-  const [isLoadingBell, setIsLoadingBell] = useState(false);
-  const [isLoadingPage, setIsLoadingPage] = useState(false);
-  const [pageId, setPageId] = useState(0);
-
-  const [countNotif, setCountNotif] = useState(countNotifikasi);
-
-  const listHalamanFooter = [
-    {
-      id: 1,
-      name: "Forums",
-      icon: <IconMessages />,
-      link: RouterForum.splash,
-    },
-
-    {
-      id: 2,
-      name: "MarketPlace",
-      icon: <IconShoppingBag />,
-      link: "",
-    },
-    {
-      id: 3,
-      name: "Business Maps",
-      icon: <IconMap2 />,
-      link: "",
-    },
-  ];
-
-  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) {
-        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 (
-    <>
-      <BackgroundImage
-        src={"/aset/global/main_background.png"}
-        h={"100vh"}
-        pos={"static"}
-      >
-        {/* Header */}
-        <Box
-          style={{
-            zIndex: 98,
-          }}
-          w={"100%"}
-          bg={MainColor.darkblue}
-          pos={"sticky"}
-          top={0}
-          h={"8vh"}
-        >
-          <Group position="apart" h={"100%"} px={"md"}>
-            <ActionIcon
-              radius={"xl"}
-              variant={"transparent"}
-              onClick={() => {
-                if (dataUser?.Profile === null) {
-                  ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
-                } else {
-                  setIsLoadingUS(true);
-                  router.push(RouterUserSearch.main);
-                }
-              }}
-            >
-              {isLoadingUS ? (
-                <Loader color={AccentColor.yellow} size={20} />
-              ) : (
-                <IconUserSearch color="white" />
-              )}
-            </ActionIcon>
-
-            <Center>
-              <Title order={4} c={MainColor.yellow}>
-                HIPMI
-              </Title>
-            </Center>
-            <ActionIcon
-              variant="transparent"
-              onClick={() => {
-                if (dataUser?.Profile === null) {
-                  ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
-                } else {
-                  router.push(RouterNotifikasi.main);
-                  setIsLoadingBell(true);
-                }
-              }}
-            >
-              {isLoadingBell ? (
-                <Loader color={AccentColor.yellow} size={20} />
-              ) : (
-                <Indicator
-                  processing
-                  color={MainColor.yellow}
-                  label={
-                    <Text fz={10} c={MainColor.darkblue}>
-                      {countNotif}
-                    </Text>
-                  }
-                >
-                  <IconBell color="white" />
-                </Indicator>
-              )}
-            </ActionIcon>
-          </Group>
-        </Box>
-
-        {/* Children */}
-        <Box h={"82vh"} pos={"static"}>
-          <ScrollArea h={"100%"}>
-            {/* {Array(10)
-              .fill(0)
-              .map((e, i) => (
-                <Paper key={i} withBorder p={"lg"} h={100}>
-                  {i + 1}
-                </Paper>
-              ))} */}
-            {children}
-          </ScrollArea>
-          <Box
-            style={{
-              height: "10vh",
-            }}
-          />
-        </Box>
-
-
-        {/* Footer */}
-        <Box
-          style={{
-            zIndex: 99,
-            borderRadius: "20px 20px 0px 0px",
-          }}
-          // bg={MainColor.darkblue}
-          w={"100%"}
-          // color="blue"
-          pos={"fixed"}
-          bottom={0}
-          h={"10vh"}
-        >
-          <SimpleGrid
-            bg={AccentColor.darkblue}
-            cols={4}
-            style={{
-              borderRadius: "20px 20px 0px 0px",
-              borderTop: `2px solid ${AccentColor.blue}`,
-            }}
-          >
-            {listHalamanFooter.map((e, i) => (
-              <Center h={"10vh"} key={e.id}>
-                <Stack align="center" spacing={0}>
-                  <ActionIcon
-                    radius={"xl"}
-                    // loading={isLoadingPage && e.id === pageId ? true : false}
-                    c={e.link === "" ? "gray" : "white"}
-                    variant="transparent"
-                    onClick={() => {
-                      if (dataUser?.Profile === null) {
-                        ComponentGlobal_NotifikasiPeringatan(
-                          "Lengkapi Profile"
-                        );
-                      } else {
-                        e.link === ""
-                          ? ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
-                          : (router.push(e.link),
-                            setIsLoadingPage(true),
-                            setPageId(e?.id));
-                      }
-                    }}
-                  >
-                    {isLoadingPage && e.id === pageId ? (
-                      <Loader color={AccentColor.yellow} size={20} />
-                    ) : (
-                      e.icon
-                    )}
-                  </ActionIcon>
-                  <Text c={e.link === "" ? "gray" : "white"} fz={"xs"}>
-                    {e.name}
-                  </Text>
-                </Stack>
-              </Center>
-            ))}
-
-            <Center h={"10vh"}>
-              <Stack
-                align="center"
-                spacing={2}
-                onClick={() => {
-                  setIsLoadingProfile(true);
-                  if (dataUser?.Profile === null) {
-                    router.push(RouterProfile.create);
-                  } else {
-                    router.push(
-                      RouterProfile.katalog + `${dataUser.Profile.id}`
-                    );
-                  }
-                }}
-              >
-                <ActionIcon variant={"transparent"}>
-                  {dataUser?.Profile === null ? (
-                    <IconUserCircle color="white" />
-                  ) : isLoadingProfil ? (
-                    <Loader color={AccentColor.yellow} size={20} />
-                  ) : (
-                    <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>
-          </SimpleGrid>
-        </Box>
-      </BackgroundImage>
-    </>
-  );
-}
diff --git a/src/app_modules/home/view_home.tsx b/src/app_modules/home/view_home.tsx
new file mode 100644
index 00000000..78708e1a
--- /dev/null
+++ b/src/app_modules/home/view_home.tsx
@@ -0,0 +1,43 @@
+import LayoutGlobal_UI_HeaderTamplate from "../component_global/ui/ui_header_tamplate";
+import LayoutGlobal_UI_Tamplate from "../component_global/ui/ui_layout_tamplate";
+import { MODEL_JOB } from "../job/model/interface";
+import {
+  ComponentHome_ButtonHeaderLeft,
+  ComponentHome_ButtonHeaderRight,
+} from "./component/button_header";
+import { Home_UiFooter, Home_UiView } from "./component/ui_home";
+import { MODEL_USER } from "./model/interface";
+
+export default function HomeView({
+  dataUser,
+  dataJob,
+  countNotifikasi,
+}: {
+  dataUser: MODEL_USER;
+  dataJob: MODEL_JOB[];
+  countNotifikasi: number;
+}) {
+  return (
+    <>
+      <LayoutGlobal_UI_Tamplate
+        header={
+          <LayoutGlobal_UI_HeaderTamplate
+            title="HIPMI"
+            customButtonLeft={
+              <ComponentHome_ButtonHeaderLeft dataUser={dataUser} />
+            }
+            customButtonRight={
+              <ComponentHome_ButtonHeaderRight
+                dataUser={dataUser}
+                countNotifikasi={countNotifikasi}
+              />
+            }
+          />
+        }
+        footer={<Home_UiFooter dataUser={dataUser} />}
+      >
+        <Home_UiView dataJob={dataJob} dataUser={dataUser} />
+      </LayoutGlobal_UI_Tamplate>
+    </>
+  );
+}
diff --git a/src/app_modules/job/create/layout.tsx b/src/app_modules/job/create/layout.tsx
index 5b6760db..2909f632 100644
--- a/src/app_modules/job/create/layout.tsx
+++ b/src/app_modules/job/create/layout.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import React from "react";
 
 export default function LayoutJob_Create({
@@ -11,11 +11,11 @@ export default function LayoutJob_Create({
 }) {
   return (
     <>
-      <ComponentGlobal_UI_LayoutTamplate
-        header={<ComponentGlobal_UI_HeaderTamplate title="Tambah Job" />}
+      <LayoutGlobal_UI_Tamplate
+        header={<LayoutGlobal_UI_HeaderTamplate title="Tambah Job" />}
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </LayoutGlobal_UI_Tamplate>
     </>
   );
 }
diff --git a/src/app_modules/job/detail/arsip/layout.tsx b/src/app_modules/job/detail/arsip/layout.tsx
index ba6f7284..de2c7329 100644
--- a/src/app_modules/job/detail/arsip/layout.tsx
+++ b/src/app_modules/job/detail/arsip/layout.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import React from "react";
 
 export default function LayoutJob_DetailArsip({
@@ -11,11 +11,11 @@ export default function LayoutJob_DetailArsip({
 }) {
   return (
     <>
-      <ComponentGlobal_UI_LayoutTamplate
-        header={<ComponentGlobal_UI_HeaderTamplate title="Detail Arsip" />}
+      <LayoutGlobal_UI_Tamplate
+        header={<LayoutGlobal_UI_HeaderTamplate title="Detail Arsip" />}
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </LayoutGlobal_UI_Tamplate>
     </>
   );
 }
diff --git a/src/app_modules/job/detail/draft/layout.tsx b/src/app_modules/job/detail/draft/layout.tsx
index 6d8946e2..90dc406a 100644
--- a/src/app_modules/job/detail/draft/layout.tsx
+++ b/src/app_modules/job/detail/draft/layout.tsx
@@ -17,8 +17,8 @@ import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
 import { IconDots, IconEdit, IconX } from "@tabler/icons-react";
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
 import { useRouter } from "next/navigation";
 import { useDisclosure } from "@mantine/hooks";
 import {
@@ -48,9 +48,9 @@ export default function LayoutJob_DetailDraft({
 
   return (
     <>
-      <ComponentGlobal_UI_LayoutTamplate
+      <LayoutGlobal_UI_Tamplate
         header={
-          <ComponentGlobal_UI_HeaderTamplate
+          <LayoutGlobal_UI_HeaderTamplate
             title="Detail Draft"
             iconRight={
               <ActionIcon variant="transparent" onClick={() => open()}>
@@ -62,7 +62,7 @@ export default function LayoutJob_DetailDraft({
         }
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </LayoutGlobal_UI_Tamplate>
 
       <ComponentGlobal_UI_Drawer
         opened={opened}
diff --git a/src/app_modules/job/detail/main/layout.tsx b/src/app_modules/job/detail/main/layout.tsx
index 2772766a..91bf448a 100644
--- a/src/app_modules/job/detail/main/layout.tsx
+++ b/src/app_modules/job/detail/main/layout.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import React from "react";
 
 export default function LayoutJob_MainDetail({
@@ -11,11 +11,11 @@ export default function LayoutJob_MainDetail({
 }) {
   return (
     <>
-      <ComponentGlobal_UI_LayoutTamplate
-        header={<ComponentGlobal_UI_HeaderTamplate title="Detail Job" />}
+      <LayoutGlobal_UI_Tamplate
+        header={<LayoutGlobal_UI_HeaderTamplate title="Detail Job" />}
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </LayoutGlobal_UI_Tamplate>
     </>
   );
 }
diff --git a/src/app_modules/job/detail/publish/layout.tsx b/src/app_modules/job/detail/publish/layout.tsx
index ef1caf7c..2b98cf44 100644
--- a/src/app_modules/job/detail/publish/layout.tsx
+++ b/src/app_modules/job/detail/publish/layout.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import React from "react";
 
 export default function LayoutJob_DetailPublish({
@@ -11,11 +11,11 @@ export default function LayoutJob_DetailPublish({
 }) {
   return (
     <>
-      <ComponentGlobal_UI_LayoutTamplate
-        header={<ComponentGlobal_UI_HeaderTamplate title="Detail Publish" />}
+      <LayoutGlobal_UI_Tamplate
+        header={<LayoutGlobal_UI_HeaderTamplate title="Detail Publish" />}
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </LayoutGlobal_UI_Tamplate>
     </>
   );
 }
diff --git a/src/app_modules/job/detail/reject/layout.tsx b/src/app_modules/job/detail/reject/layout.tsx
index e8d3e8b8..42eb63df 100644
--- a/src/app_modules/job/detail/reject/layout.tsx
+++ b/src/app_modules/job/detail/reject/layout.tsx
@@ -5,8 +5,8 @@ import React from "react";
 import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
-import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import { IconEdit } from "@tabler/icons-react";
 
 export default function LayoutJob_DetailReject({
@@ -16,11 +16,11 @@ export default function LayoutJob_DetailReject({
 }) {
   return (
     <>
-      <ComponentGlobal_UI_LayoutTamplate
-        header={<ComponentGlobal_UI_HeaderTamplate title="Detail Reject" />}
+      <LayoutGlobal_UI_Tamplate
+        header={<LayoutGlobal_UI_HeaderTamplate title="Detail Reject" />}
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </LayoutGlobal_UI_Tamplate>
     </>
   );
 }
diff --git a/src/app_modules/job/detail/review/layout.tsx b/src/app_modules/job/detail/review/layout.tsx
index ccf9cc7d..dd7bf43d 100644
--- a/src/app_modules/job/detail/review/layout.tsx
+++ b/src/app_modules/job/detail/review/layout.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import React from "react";
 
 export default function LayoutJob_DetailReview({
@@ -11,11 +11,11 @@ export default function LayoutJob_DetailReview({
 }) {
   return (
     <>
-      <ComponentGlobal_UI_LayoutTamplate
-        header={<ComponentGlobal_UI_HeaderTamplate title="Detail Review" />}
+      <LayoutGlobal_UI_Tamplate
+        header={<LayoutGlobal_UI_HeaderTamplate title="Detail Review" />}
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </LayoutGlobal_UI_Tamplate>
     </>
   );
 }
diff --git a/src/app_modules/job/edit/layout.tsx b/src/app_modules/job/edit/layout.tsx
index 4d08b611..7b9b8763 100644
--- a/src/app_modules/job/edit/layout.tsx
+++ b/src/app_modules/job/edit/layout.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import React from "react";
 
 export default function LayoutJob_Edit({
@@ -11,11 +11,11 @@ export default function LayoutJob_Edit({
 }) {
   return (
     <>
-      <ComponentGlobal_UI_LayoutTamplate
-        header={<ComponentGlobal_UI_HeaderTamplate title="Edit Job" />}
+      <LayoutGlobal_UI_Tamplate
+        header={<LayoutGlobal_UI_HeaderTamplate title="Edit Job" />}
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </LayoutGlobal_UI_Tamplate>
 
     </>
   );
diff --git a/src/app_modules/job/main/beranda/ui_beranda.tsx b/src/app_modules/job/main/beranda/ui_beranda.tsx
index 0d282dd7..37ffff7f 100644
--- a/src/app_modules/job/main/beranda/ui_beranda.tsx
+++ b/src/app_modules/job/main/beranda/ui_beranda.tsx
@@ -9,6 +9,7 @@ import { ScrollOnly } from "next-scroll-loader";
 import ComponentJob_BerandaCardView from "../../component/beranda/card_view";
 import { job_getAllListPublish } from "../../fun/get/get_all_publish";
 import ComponentJob_CreateButton from "../../component/button/create_button";
+import { IconSearch } from "@tabler/icons-react";
 
 export function Job_UiBeranda({ listData }: { listData: MODEL_JOB[] }) {
   const [data, setData] = useState(listData);
@@ -31,12 +32,14 @@ export function Job_UiBeranda({ listData }: { listData: MODEL_JOB[] }) {
         <ComponentJob_CreateButton />
 
         <TextInput
+
           style={{
             position: "sticky",
             top: 0,
             zIndex: 99,
           }}
           radius={"xl"}
+          icon={<IconSearch/>}
           placeholder="Pekerjaan apa yang anda cari ?"
           onChange={(val) => {
             onSearch(val.currentTarget.value);
diff --git a/src/app_modules/job/main/layout.tsx b/src/app_modules/job/main/layout.tsx
index 3c65fff7..e7e05fa9 100644
--- a/src/app_modules/job/main/layout.tsx
+++ b/src/app_modules/job/main/layout.tsx
@@ -3,8 +3,8 @@
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 import { MainColor } from "@/app_modules/component_global/color/color_pallet";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
-import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import { ActionIcon, SimpleGrid, Stack, Text } from "@mantine/core";
 import { IconHistory, IconHome, IconReservedLine } from "@tabler/icons-react";
 import { useAtom } from "jotai";
@@ -46,9 +46,9 @@ export default function LayoutJob_Main({
 
   return (
     <>
-      <ComponentGlobal_UI_LayoutTamplate
+      <LayoutGlobal_UI_Tamplate
         header={
-          <ComponentGlobal_UI_HeaderTamplate
+          <LayoutGlobal_UI_HeaderTamplate
             title="JOB"
             routerLeft={RouterHome.main_home}
           />
@@ -118,7 +118,7 @@ export default function LayoutJob_Main({
         }
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </LayoutGlobal_UI_Tamplate>
     </>
   );
 }
diff --git a/src/app_modules/job/non_user_view/layout.tsx b/src/app_modules/job/non_user_view/layout.tsx
index 24906397..2d32cd54 100644
--- a/src/app_modules/job/non_user_view/layout.tsx
+++ b/src/app_modules/job/non_user_view/layout.tsx
@@ -4,8 +4,8 @@ import { AppShell, Center } from "@mantine/core";
 import React from "react";
 import ComponentJob_HeaderTamplate from "../component/header_tamplate";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
 
 export default function LayoutJob_NonUserView({
   children,
@@ -14,11 +14,11 @@ export default function LayoutJob_NonUserView({
 }) {
   return (
     <>
-      <ComponentGlobal_UI_LayoutTamplate
-        header={<ComponentGlobal_UI_HeaderTamplate title="Job Vacancy" />}
+      <LayoutGlobal_UI_Tamplate
+        header={<LayoutGlobal_UI_HeaderTamplate title="Job Vacancy" />}
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </LayoutGlobal_UI_Tamplate>
     </>
   );
 }
diff --git a/src/app_modules/job/splash/ui_splash.tsx b/src/app_modules/job/splash/ui_splash.tsx
index c5f3ac6e..af1322e6 100644
--- a/src/app_modules/job/splash/ui_splash.tsx
+++ b/src/app_modules/job/splash/ui_splash.tsx
@@ -18,7 +18,7 @@ export function Job_UiSplash() {
     setTimeout(() => {
       setHotMenu(1);
       setStatus("Publish");
-      router.replace(RouterJob.beranda);
+      router.replace(RouterJob.beranda, { scroll: false });
     }, 1000);
   }, []);
   return (
diff --git a/src/app_modules/notifikasi/component/card_view.tsx b/src/app_modules/notifikasi/component/card_view.tsx
new file mode 100644
index 00000000..7bed821c
--- /dev/null
+++ b/src/app_modules/notifikasi/component/card_view.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import { Badge, Card, Divider, Group, Stack, Text } from "@mantine/core";
+import { IconCheck, IconChecks } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import notifikasi_funUpdateIsReadById from "../fun/update/fun_update_is_read_by_user_id";
+import { MODEL_NOTIFIKASI } from "../model/interface";
+import { redirectDetailForumPage } from "./path/forum";
+import { redirectJobPage } from "./path/job";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
+import notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
+
+export function ComponentNotifiaksi_CardView({
+  data,
+  onLoadData,
+  activePage,
+  onSetJob,
+}: {
+  data: MODEL_NOTIFIKASI;
+  onLoadData: (val: any) => void;
+  activePage: number;
+  onSetJob: (val: any) => void;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <Card
+        style={{
+          backgroundColor: data?.isRead
+            ? MainColor.darkblue
+            : AccentColor.darkblue,
+          color: data?.isRead ? "gray" : "white",
+          border: data?.isRead
+            ? `2px solid ${AccentColor.darkblue}`
+            : `2px solid ${AccentColor.blue}`,
+          borderRadius: "10px 10px 10px 10px",
+        }}
+        my={"xs"}
+        onClick={async () => {
+          data?.kategoriApp === "JOB" &&
+            redirectJobPage({
+              data: data,
+              router: router,
+              onSetPage(val) {
+                onSetJob(val);
+              },
+            });
+
+          data?.kategoriApp === "FORUM" &&
+            redirectDetailForumPage({
+              data: data,
+              router: router,
+            });
+
+          const updateIsRead = await notifikasi_funUpdateIsReadById({
+            notifId: data?.id,
+          });
+
+          if (updateIsRead.status === 200) {
+            // console.log(updateIsRead.status);
+            // const loadData = await notifikasi_getByUserId({ page: activePage });
+            // onLoadData(loadData);
+            // console.log("berhasil load")
+          }
+        }}
+      >
+        {/* <pre>{JSON.stringify(e, null, 2)}</pre> */}
+        <Card.Section p={"sm"}>
+          <Stack spacing={"xs"}>
+            <Group position="apart">
+              <Text fw={"bold"} fz={10}>
+                # {data?.kategoriApp}
+              </Text>
+              {data?.status ? (
+                <Badge
+                  //   fz={10}
+                  variant="outline"
+                  color={data?.isRead ? "gray" : "teal"}
+                >
+                  {data?.status}
+                </Badge>
+              ) : (
+                ""
+              )}
+            </Group>
+            <Divider color={data?.isRead ? "gray" : "white"} />
+          </Stack>
+        </Card.Section>
+        <Card.Section px={"sm"} pb={"sm"}>
+          <Stack spacing={data.kategoriApp === "FORUM" ? 0 : "xs"}>
+            <Text lineClamp={2} fw={"bold"}>
+              {data?.title}
+            </Text>
+            {data.kategoriApp === "FORUM" ? (
+              <div
+                style={{ fontSize: 12 }}
+                dangerouslySetInnerHTML={{ __html: data?.pesan }}
+              />
+            ) : (
+              <Text lineClamp={2}>{data?.pesan}</Text>
+            )}
+          </Stack>
+        </Card.Section>
+        <Card.Section p={"sm"}>
+          <Group position="apart">
+            <Text fz={10} color="gray">
+              {new Intl.DateTimeFormat("id-ID", {
+                dateStyle: "long",
+              }).format(data?.createdAt)}
+
+              <Text span inherit fz={10} color="gray">
+                {", "}
+                {new Intl.DateTimeFormat("id-ID", {
+                  timeStyle: "short",
+                }).format(data?.createdAt)}
+              </Text>
+            </Text>
+            {data?.isRead ? (
+              <Group spacing={5}>
+                <IconChecks color="gray" size={10} />
+                <Text fz={10} color="gray">
+                  Sudah dilihat
+                </Text>
+              </Group>
+            ) : (
+              <Group spacing={5}>
+                <IconCheck color="gray" size={10} />
+                <Text fz={10} color="gray">
+                  Belum dilihat
+                </Text>
+              </Group>
+            )}
+          </Group>
+        </Card.Section>
+      </Card>
+    </>
+  );
+}
diff --git a/src/app_modules/notifikasi/component/path/forum.ts b/src/app_modules/notifikasi/component/path/forum.ts
new file mode 100644
index 00000000..e31c9f88
--- /dev/null
+++ b/src/app_modules/notifikasi/component/path/forum.ts
@@ -0,0 +1,26 @@
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { MODEL_NOTIFIKASI } from "../../model/interface";
+
+export function redirectDetailForumPage({
+  data,
+  router,
+}: {
+  data: MODEL_NOTIFIKASI;
+  router: AppRouterInstance;
+}) {
+  if (data.status === null) {
+    const path = RouterForum.main_detail + data.appId;
+    router.push(path, { scroll: false });
+  }
+
+  if (data.status === "Report Komentar") {
+    const path = RouterForum.detail_report_komentar + data.appId;
+    router.push(path, { scroll: false });
+  }
+
+  if (data.status === "Report Posting") {
+    const path = RouterForum.detail_report_posting + data.appId;
+    router.push(path, { scroll: false });
+  }
+}
diff --git a/src/app_modules/notifikasi/component/path/job.ts b/src/app_modules/notifikasi/component/path/job.ts
new file mode 100644
index 00000000..03efdb2b
--- /dev/null
+++ b/src/app_modules/notifikasi/component/path/job.ts
@@ -0,0 +1,31 @@
+import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { MODEL_NOTIFIKASI } from "../../model/interface";
+
+export function redirectJobPage({
+  data,
+  router,
+  onSetPage,
+}: {
+  data: MODEL_NOTIFIKASI;
+  router: AppRouterInstance;
+  onSetPage: (val: any) => void;
+}) {
+  const path = RouterJob.status;
+
+  if (data.status === "Publish") {
+    onSetPage({
+      menuId: 2,
+      status: data.status,
+    });
+  }
+
+  if (data.status === "Reject") {
+    onSetPage({
+      menuId: 2,
+      status: data.status,
+    });
+  }
+
+  router.push(path, {scroll: false});
+}
diff --git a/src/app_modules/notifikasi/component/ui_notifiaksi.tsx b/src/app_modules/notifikasi/component/ui_notifiaksi.tsx
new file mode 100644
index 00000000..827da9c2
--- /dev/null
+++ b/src/app_modules/notifikasi/component/ui_notifiaksi.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import ComponentGlobal_IsEmptyData from "@/app_modules/component_global/is_empty_data";
+import ComponentGlobal_UI_Loader from "@/app_modules/component_global/ui/ui_loader";
+import { gs_job_hot_menu, gs_job_status } from "@/app_modules/job/global_state";
+import { Box, Center } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useAtom } from "jotai";
+import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
+import notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
+import { MODEL_NOTIFIKASI } from "../model/interface";
+import { ComponentNotifiaksi_CardView } from "./card_view";
+
+export function Notifikasi_UiView({
+  listNotifikasi,
+}: {
+  listNotifikasi: MODEL_NOTIFIKASI[];
+}) {
+  const [data, setData] = useState(listNotifikasi);
+  const [activePage, setActivePage] = useState(1);
+
+  // JOB
+  const [jobMenuId, setJobMenuId] = useAtom(gs_job_hot_menu);
+  const [jobStatus, setJobStatus] = useAtom(gs_job_status);
+
+    useShallowEffect(() => {
+      onLoadData({
+        onLoad(val) {
+          setData(val);
+        },
+      });
+    }, []);
+
+    async function onLoadData({ onLoad }: { onLoad: (val: any) => void }) {
+      const loadData = await notifikasi_getByUserId({ page: 1 });
+      onLoad(loadData);
+    }
+
+  return (
+    <>
+      <Box>
+        {_.isEmpty(data) ? (
+          <ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />
+        ) : (
+          <ScrollOnly
+            height="92vh"
+            renderLoading={() => (
+              <Center mt={"lg"}>
+                <ComponentGlobal_UI_Loader />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await notifikasi_getByUserId({
+                page: activePage + 1,
+              });
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
+              <ComponentNotifiaksi_CardView
+                data={item}
+                onLoadData={(val) => setData(val)}
+                activePage={activePage}
+                onSetJob={(val) => {
+                  setJobMenuId(val.menuId);
+                  setJobStatus(val.status);
+                }}
+              />
+            )}
+          </ScrollOnly>
+        )}
+      </Box>
+    </>
+  );
+}
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 9ba18fb9..856710b1 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
@@ -3,10 +3,14 @@
 import prisma from "@/app/lib/prisma";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 
-export default async function notifikasi_getByUserId() {
+export default async function notifikasi_getByUserId({page}: {page: number }) {
   const userId = await user_getOneUserId();
+   const takeData = 10;
+   const skipData = page * takeData - takeData;
 
   const data = await prisma.notifikasi.findMany({
+    take: takeData,
+    skip: skipData,
     orderBy: {
       createdAt: "desc",
     },
diff --git a/src/app_modules/notifikasi/index.ts b/src/app_modules/notifikasi/index.ts
index a347a8b2..25af39f6 100644
--- a/src/app_modules/notifikasi/index.ts
+++ b/src/app_modules/notifikasi/index.ts
@@ -1,3 +1,3 @@
-import Notifikasi_MainView from "./main";
+import Notifikasi_MainView from "./view_notifikasi";
 
 export { Notifikasi_MainView };
\ No newline at end of file
diff --git a/src/app_modules/notifikasi/main/index.tsx b/src/app_modules/notifikasi/main/index.tsx
deleted file mode 100644
index 8ca7e69a..00000000
--- a/src/app_modules/notifikasi/main/index.tsx
+++ /dev/null
@@ -1,236 +0,0 @@
-"use client";
-
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
-import ComponentGlobal_HeaderTamplate from "@/app_modules/component_global/header_tamplate";
-import {
-  Badge,
-  Card,
-  Divider,
-  Group,
-  Paper,
-  SimpleGrid,
-  Stack,
-  Text,
-} from "@mantine/core";
-import { MODEL_NOTIFIKASI } from "../model/interface";
-import { useState } from "react";
-import adminNotifikasi_countNotifikasi from "@/app_modules/admin/notifikasi/fun/count/count_is_read";
-import adminNotifikasi_getByUserId from "@/app_modules/admin/notifikasi/fun/get/get_notifikasi_by_user_id";
-import adminNotifikasi_funUpdateIsReadById from "@/app_modules/admin/notifikasi/fun/update/fun_update_is_read_by_id";
-import { IconChecks, IconCheck } from "@tabler/icons-react";
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
-import { useRouter } from "next/navigation";
-import { RouterJob } from "@/app/lib/router_hipmi/router_job";
-import notifikasi_funUpdateIsReadById from "../fun/update/fun_update_is_read_by_user_id";
-import { useAtom } from "jotai";
-import { gs_job_hot_menu, gs_job_status } from "@/app_modules/job/global_state";
-import _ from "lodash";
-import ComponentGlobal_IsEmptyData from "@/app_modules/component_global/is_empty_data";
-import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
-import notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
-import { useShallowEffect } from "@mantine/hooks";
-import { data } from "autoprefixer";
-
-export default function Notifikasi_MainView({
-  listNotifikasi,
-}: {
-  listNotifikasi: any[];
-}) {
-  return (
-    <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentGlobal_HeaderTamplate title="Notifikasi" />}
-      >
-        <MainView listNotifikasi={listNotifikasi} />
-      </AppComponentGlobal_LayoutTamplate>
-    </>
-  );
-}
-
-function MainView({ listNotifikasi }: { listNotifikasi: MODEL_NOTIFIKASI[] }) {
-  const router = useRouter();
-  const [data, setData] = useState(listNotifikasi);
-
-  // JOB
-  const [jobMenuId, setJobMenuId] = useAtom(gs_job_hot_menu);
-  const [jobStatus, setJobStatus] = useAtom(gs_job_status);
-
-  useShallowEffect(() => {
-    onLoadData({
-      onLoad(val) {
-        setData(val);
-      },
-    });
-  }, []);
-
-  async function onLoadData({ onLoad }: { onLoad: (val: any) => void }) {
-    const loadData = await notifikasi_getByUserId();
-    onLoad(loadData);
-  }
-
-  if (_.isEmpty(data)) {
-    return <ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />;
-  }
-  return (
-    <>
-      <SimpleGrid
-        cols={1}
-        spacing="lg"
-        breakpoints={[
-          { maxWidth: "md", cols: 2, spacing: "md" },
-          { maxWidth: "sm", cols: 2, spacing: "sm" },
-          { maxWidth: "xs", cols: 1, spacing: "sm" },
-        ]}
-      >
-        {data.map((e, i) => (
-          <Card
-            key={e?.id}
-            // withBorder
-            bg={e?.isRead ? "gray.1" : "gray.4"}
-            sx={{
-              borderColor: "gray",
-              borderStyle: "solid",
-              borderWidth: "0.5px",
-            }}
-            onClick={async () => {
-              e?.kategoriApp === "JOB" &&
-                redirectJobPage({
-                  data: e,
-                  router: router,
-                  onSetPage(val) {
-                    setJobMenuId(val.menuId);
-                    setJobStatus(val.status);
-                  },
-                });
-
-              e?.kategoriApp === "FORUM" &&
-                redirectDetailForumPage({
-                  data: e,
-                  router: router,
-                });
-
-              const updateIsRead = await notifikasi_funUpdateIsReadById({
-                notifId: e?.id,
-              });
-              if (updateIsRead.status === 200) return null;
-            }}
-          >
-            {/* <pre>{JSON.stringify(e, null, 2)}</pre> */}
-            <Card.Section p={"sm"}>
-              <Stack spacing={"xs"}>
-                <Group position="apart">
-                  <Text fw={"bold"} fz={10}>
-                    # {e?.kategoriApp}
-                  </Text>
-                  {e?.status ? <Badge fz={10}>{e?.status}</Badge> : ""}
-                </Group>
-                <Divider color="gray.3" />
-              </Stack>
-            </Card.Section>
-            <Card.Section px={"sm"} pb={"sm"}>
-              <Stack spacing={e.kategoriApp === "FORUM" ? 0 : "xs"}>
-                <Text lineClamp={2} fw={"bold"} fz={"xs"}>
-                  {e?.title}
-                </Text>
-                {e.kategoriApp === "FORUM" ? (
-                  <div
-                    style={{ fontSize: 12 }}
-                    dangerouslySetInnerHTML={{ __html: e?.pesan }}
-                  />
-                ) : (
-                  // <Text >
-                  // </Text>
-                  <Text lineClamp={2} fz={"xs"}>
-                    {e?.pesan}
-                  </Text>
-                )}
-              </Stack>
-            </Card.Section>
-            <Card.Section p={"sm"}>
-              <Group position="apart">
-                <Text fz={10} color="gray">
-                  {new Intl.DateTimeFormat("id-ID", {
-                    dateStyle: "long",
-                  }).format(e?.createdAt)}
-
-                  <Text span inherit fz={10} color="gray">
-                    {", "}
-                    {new Intl.DateTimeFormat("id-ID", {
-                      timeStyle: "short",
-                    }).format(e?.createdAt)}
-                  </Text>
-                </Text>
-                {e?.isRead ? (
-                  <Group spacing={5}>
-                    <IconChecks color="gray" size={10} />
-                    <Text fz={10} color="gray">
-                      Sudah dilihat
-                    </Text>
-                  </Group>
-                ) : (
-                  <Group spacing={5}>
-                    <IconCheck color="gray" size={10} />
-                    <Text fz={10} color="gray">
-                      Belum dilihat
-                    </Text>
-                  </Group>
-                )}
-              </Group>
-            </Card.Section>
-          </Card>
-        ))}
-      </SimpleGrid>
-    </>
-  );
-}
-
-function redirectJobPage({
-  data,
-  router,
-  onSetPage,
-}: {
-  data: MODEL_NOTIFIKASI;
-  router: AppRouterInstance;
-  onSetPage: (val: any) => void;
-}) {
-  const path = RouterJob.status;
-
-  if (data.status === "Publish") {
-    onSetPage({
-      menuId: 2,
-      status: data.status,
-    });
-  }
-
-  if (data.status === "Reject") {
-    onSetPage({
-      menuId: 2,
-      status: data.status,
-    });
-  }
-
-  router.push(path);
-}
-
-function redirectDetailForumPage({
-  data,
-  router,
-}: {
-  data: MODEL_NOTIFIKASI;
-  router: AppRouterInstance;
-}) {
-  if (data.status === null) {
-    const path = RouterForum.main_detail + data.appId;
-    router.push(path);
-  }
-
-  if (data.status === "Report Komentar") {
-    const path = RouterForum.detail_report_komentar + data.appId;
-    router.push(path);
-  }
-
-  if (data.status === "Report Posting") {
-    const path = RouterForum.detail_report_posting + data.appId;
-    router.push(path);
-  }
-}
diff --git a/src/app_modules/notifikasi/view_notifikasi.tsx b/src/app_modules/notifikasi/view_notifikasi.tsx
new file mode 100644
index 00000000..2cb64dbf
--- /dev/null
+++ b/src/app_modules/notifikasi/view_notifikasi.tsx
@@ -0,0 +1,19 @@
+import LayoutGlobal_UI_HeaderTamplate from "../component_global/ui/ui_header_tamplate";
+import LayoutGlobal_UI_Tamplate from "../component_global/ui/ui_layout_tamplate";
+import { Notifikasi_UiView } from "./component/ui_notifiaksi";
+
+export default function Notifikasi_MainView({
+  listNotifikasi,
+}: {
+  listNotifikasi: any[];
+}) {
+  return (
+    <>
+      <LayoutGlobal_UI_Tamplate
+        header={<LayoutGlobal_UI_HeaderTamplate title="Notifikasi" />}
+      >
+        <Notifikasi_UiView listNotifikasi={listNotifikasi} />
+      </LayoutGlobal_UI_Tamplate>
+    </>
+  );
+}
diff --git a/src/app_modules/user_search/component/is_empty_data.tsx b/src/app_modules/user_search/component/is_empty_data.tsx
deleted file mode 100644
index ccfd8217..00000000
--- a/src/app_modules/user_search/component/is_empty_data.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-"use client";
-
-import { Center } from "@mantine/core";
-
-export default function ComponentUserSearch_IsEmptyData({ text }: { text: string }) {
-  return (
-    <>
-      <Center h={"50vh"} fz={"sm"} c="gray" fw={"bold"} style={{ zIndex: 1 }}>
-        {text}
-      </Center>
-    </>
-  );
-}
diff --git a/src/app_modules/user_search/component/ui_user_search.tsx b/src/app_modules/user_search/component/ui_user_search.tsx
new file mode 100644
index 00000000..7803fb89
--- /dev/null
+++ b/src/app_modules/user_search/component/ui_user_search.tsx
@@ -0,0 +1,310 @@
+"use client";
+
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import ComponentGlobal_IsEmptyData from "@/app_modules/component_global/is_empty_data";
+import { MODEL_USER } from "@/app_modules/home/model/interface";
+import {
+  ActionIcon,
+  Avatar,
+  Box,
+  Center,
+  Grid,
+  Group,
+  Loader,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { IconChevronRight, IconSearch } from "@tabler/icons-react";
+import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { userSearch_getAllUser } from "../fun/get/get_all_user";
+import { MainColor } from "@/app_modules/component_global/color/color_pallet";
+import ComponentGlobal_UI_Loader from "@/app_modules/component_global/ui/ui_loader";
+
+export function UserSearch_UiView({ listUser }: { listUser: MODEL_USER[] }) {
+  const [data, setData] = useState(listUser);
+  const [activePage, setActivePage] = useState(1);
+  const [isSearch, setIsSearch] = useState("");
+
+  async function onSearch(name: string) {
+    setIsSearch(name);
+    const loadData = await userSearch_getAllUser({
+      page: activePage,
+      search: name,
+    });
+    setData(loadData as any);
+    setActivePage(1);
+  }
+
+  return (
+    <>
+      <Stack spacing={"xl"}>
+        <TextInput
+          radius={"xl"}
+          style={{ zIndex: 99 }}
+          icon={<IconSearch size={20} />}
+          placeholder="Masukan username "
+          onChange={(val) => onSearch(val.target.value)}
+        />
+        <Box>
+          {_.isEmpty(data) ? (
+            <ComponentGlobal_IsEmptyData text="Tidak ada pengguna lain" />
+          ) : (
+            <ScrollOnly
+              height="84vh"
+              renderLoading={() => (
+                <Center mt={"lg"}>
+                  <Loader color={"yellow"} />
+                </Center>
+              )}
+              data={data}
+              setData={setData}
+              moreData={async () => {
+                const loadData = await userSearch_getAllUser({
+                  page: activePage + 1,
+                  search: isSearch,
+                });
+                setActivePage((val) => val + 1);
+
+                return loadData;
+              }}
+            >
+              {(item) => <CardView data={item} />}
+            </ScrollOnly>
+          )}
+        </Box>
+      </Stack>
+      {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
+    </>
+  );
+}
+
+function CardView({ data }: { data: MODEL_USER }) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <>
+      <Stack
+        spacing={"xs"}
+        c="white"
+
+        py={"xs"}
+        onClick={() => {
+          setLoading(true);
+          router.push(RouterProfile.katalog + `${data?.Profile?.id}`);
+        }}
+      >
+        <Group position="apart">
+          <Group position="left">
+            <Avatar
+              sx={{
+                borderStyle: "solid",
+                borderWidth: "0.5px",
+              }}
+              radius={"xl"}
+              size={"md"}
+              src={
+                RouterProfile?.api_foto_profile + `${data?.Profile?.imagesId}`
+              }
+            />
+            <Stack spacing={0}>
+              <Text fw={"bold"} lineClamp={1}>
+                {data?.username}
+              </Text>
+              <Text fz={"sm"} fs={"italic"}>
+                +{data?.nomor}
+              </Text>
+            </Stack>
+          </Group>
+
+          <Group position="right">
+            <Center>
+              <ActionIcon variant="transparent">
+                {loading ? (
+                  <ComponentGlobal_UI_Loader />
+                ) : (
+                  <IconChevronRight color="white" />
+                )}
+              </ActionIcon>
+            </Center>
+          </Group>
+        </Group>
+      </Stack>
+    </>
+  );
+}
+
+let dataDummy = [
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 1",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 2",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 1",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 2",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 1",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 2",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 1",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 2",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 1",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 2",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 1",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 2",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 1",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 2",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+];
diff --git a/src/app_modules/user_search/fun/get/get_all_user.ts b/src/app_modules/user_search/fun/get/get_all_user.ts
new file mode 100644
index 00000000..0eb2ac43
--- /dev/null
+++ b/src/app_modules/user_search/fun/get/get_all_user.ts
@@ -0,0 +1,58 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+
+export async function userSearch_getAllUser({
+  page,
+  search,
+}: {
+  page: number;
+  search?: string;
+}) {
+  const userLoginId = await user_getOneUserId();
+  const takeData = 20;
+  const skipData = page * takeData - takeData;
+
+  const data = await prisma.user.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      username: "asc",
+    },
+    where: {
+      active: true,
+      masterUserRoleId: "1",
+      username: {
+        contains: search,
+        mode: "insensitive",
+      },
+      NOT: {
+        Profile: null,
+      },
+      OR: [
+        {
+          NOT: {
+            id: userLoginId,
+          },
+        },
+      ],
+    },
+    select: {
+      id: true,
+      username: true,
+      nomor: true,
+      active: true,
+      masterUserRoleId: true,
+      Profile: {
+        select: {
+          id: true,
+          name: true,
+          imagesId: true,
+        },
+      },
+    },
+  });
+
+  return data;
+}
diff --git a/src/app_modules/user_search/fun/get/get_list_user.ts b/src/app_modules/user_search/fun/get/get_list_user.ts
deleted file mode 100644
index 447332b3..00000000
--- a/src/app_modules/user_search/fun/get/get_list_user.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-"use server";
-
-import prisma from "@/app/lib/prisma";
-import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
-
-export async function UserSearch_getListUser({ name }: { name: string }) {
-  const userLoginId = await user_getOneUserId();
-
-  if (name === "") {
-    const data = await prisma.user.findMany({
-      where: {
-        masterUserRoleId: "1",
-        NOT: {
-          id: userLoginId,
-        },
-      },
-      select: {
-        id: true,
-        username: true,
-        nomor: true,
-        active: true,
-        masterUserRoleId: true,
-        Profile: {
-          select: {
-            id: true,
-            name: true,
-            imagesId: true,
-          },
-        },
-      },
-    });
-    return data;
-  }
-
-  const getDataCari = await prisma.user.findMany({
-    where: {
-      masterUserRoleId: "1",
-      Profile: {
-        name: {
-          contains: name,
-          mode: "insensitive",
-        },
-      },
-      NOT: {
-        id: userLoginId,
-      },
-    },
-    select: {
-      id: true,
-      username: true,
-      nomor: true,
-      active: true,
-      masterUserRoleId: true,
-      Profile: true,
-    },
-  });
-
-  return getDataCari;
-}
diff --git a/src/app_modules/user_search/fun/search/fun_search_by_name.ts b/src/app_modules/user_search/fun/search/fun_search_by_name.ts
deleted file mode 100644
index cf7ed1fd..00000000
--- a/src/app_modules/user_search/fun/search/fun_search_by_name.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-"use server";
-
-import prisma from "@/app/lib/prisma";
-import { useSearchParams } from "next/navigation";
-import { NextRequest } from "next/server";
-
-export async function UserSearch_searchByName(name: string) {
-  const data = await prisma.user.findMany({
-    where: {
-      Profile: {
-        name: {
-          contains: name,
-          mode: "insensitive",
-        },
-      },
-    },
-    select: {
-      id: true,
-      username: true,
-      nomor: true,
-      active: true,
-      masterUserRoleId: true,
-      Profile: true,
-    },
-  });
-
-  return data;
-}
diff --git a/src/app_modules/user_search/index.ts b/src/app_modules/user_search/index.ts
index 06d26ed9..a3b7ce39 100644
--- a/src/app_modules/user_search/index.ts
+++ b/src/app_modules/user_search/index.ts
@@ -1,7 +1,3 @@
-import UserSearch_MainView from "./main";
-import LayoutUserSearch_MainView from "./main/layout";
+import UserSearch_MainView from "./view_user_seach";
 
-export {
-    UserSearch_MainView,
-    LayoutUserSearch_MainView,
-}
\ No newline at end of file
+export { UserSearch_MainView };
diff --git a/src/app_modules/user_search/main/index.tsx b/src/app_modules/user_search/main/index.tsx
deleted file mode 100644
index 1ef06bf1..00000000
--- a/src/app_modules/user_search/main/index.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-"use client";
-
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import { MODEL_USER } from "@/app_modules/home/model/interface";
-import {
-  ActionIcon,
-  Avatar,
-  Box,
-  Center,
-  Divider,
-  Grid,
-  Paper,
-  Stack,
-  Text,
-  TextInput,
-  Title,
-} from "@mantine/core";
-import { IconChevronRight, IconSearch } from "@tabler/icons-react";
-import { useState } from "react";
-import { UserSearch_searchByName } from "../fun/search/fun_search_by_name";
-import { useRouter } from "next/navigation";
-import ComponentGlobal_MaintenanceInformation from "@/app_modules/component_global/maintenance_information";
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-import { data } from "autoprefixer";
-import { UserSearch_getListUser } from "../fun/get/get_list_user";
-import _ from "lodash";
-import ComponentUserSearch_IsEmptyData from "../component/is_empty_data";
-
-export default function UserSearch_MainView({
-  listUser,
-}: {
-  listUser: MODEL_USER[];
-}) {
-  const router = useRouter();
-  const [data, setData] = useState(listUser);
-  const [loading, setLoading] = useState(false);
-
-  async function onSearch(name: string) {
-    await UserSearch_getListUser({ name: name }).then((res) =>
-      setData(res as any)
-    );
-  }
-
-  // return (
-  //   <>
-  //     <Center h={"50vh"}>
-  //      <ComponentGlobal_MaintenanceInformation/>
-  //     </Center>
-  //   </>
-  // );
-
-  if (loading) return <ComponentGlobal_V2_LoadingPage />;
-
-  return (
-    <>
-      <Box>
-        <Stack spacing={"md"}>
-          <TextInput
-            style={{ zIndex: 99 }}
-            pos={"sticky"}
-            top={"6vh"}
-            icon={<IconSearch size={20} />}
-            placeholder="Masukan nama pegguna"
-            onChange={(val) => onSearch(val.target.value)}
-          />
-          <Box>
-            {_.isEmpty(data) ? (
-              <ComponentUserSearch_IsEmptyData text="Tidak ada pengguna" />
-            ) : (
-              <Box>
-                {data?.map((e, i) =>
-                  e?.Profile === null ? (
-                    ""
-                  ) : (
-                    <Stack key={i} spacing={"xs"} mt={"xs"}>
-                      <Grid>
-                        <Grid.Col span={2}>
-                          <Center h={"100%"}>
-                            <Avatar
-                              sx={{
-                                borderStyle: "solid",
-                                borderWidth: "0.5px",
-                              }}
-                              radius={"xl"}
-                              size={"md"}
-                              src={
-                                RouterProfile?.api_foto_profile +
-                                `${e?.Profile?.imagesId}`
-                              }
-                            />
-                          </Center>
-                        </Grid.Col>
-                        <Grid.Col span={"auto"}>
-                          <Stack spacing={0}>
-                            <Text fw={"bold"} lineClamp={1}>
-                              {e?.Profile?.name}
-                            </Text>
-                            <Text fz={"sm"} fs={"italic"}>
-                              +{e?.nomor}
-                            </Text>
-                          </Stack>
-                        </Grid.Col>
-                        <Grid.Col span={2}>
-                          <Center h={"100%"}>
-                            <ActionIcon
-                              variant="transparent"
-                              onClick={() => {
-                                setLoading(true);
-                                router.push(
-                                  RouterProfile.katalog + `${e?.Profile?.id}`
-                                );
-                              }}
-                            >
-                              <IconChevronRight />
-                            </ActionIcon>
-                          </Center>
-                        </Grid.Col>
-                      </Grid>
-                      <Divider />
-                    </Stack>
-                  )
-                )}
-              </Box>
-            )}
-          </Box>
-        </Stack>
-      </Box>
-      {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
-    </>
-  );
-}
diff --git a/src/app_modules/user_search/main/layout.tsx b/src/app_modules/user_search/main/layout.tsx
deleted file mode 100644
index 90a09ba4..00000000
--- a/src/app_modules/user_search/main/layout.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-"use client";
-
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
-import ComponentGlobal_HeaderTamplate from "@/app_modules/component_global/header_tamplate";
-import { AppShell } from "@mantine/core";
-import React from "react";
-
-export default function LayoutUserSearch_MainView({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentGlobal_HeaderTamplate title="Temukan Pengguna" />}
-      >
-        {children}
-      </AppComponentGlobal_LayoutTamplate>
-    </>
-  );
-}
diff --git a/src/app_modules/user_search/view_user_seach.tsx b/src/app_modules/user_search/view_user_seach.tsx
new file mode 100644
index 00000000..371cf957
--- /dev/null
+++ b/src/app_modules/user_search/view_user_seach.tsx
@@ -0,0 +1,22 @@
+
+import { MODEL_USER } from "@/app_modules/home/model/interface";
+import LayoutGlobal_UI_HeaderTamplate from "../component_global/ui/ui_header_tamplate";
+import LayoutGlobal_UI_Tamplate from "../component_global/ui/ui_layout_tamplate";
+import { UserSearch_UiView } from "./component/ui_user_search";
+
+export default function UserSearch_MainView({
+  listUser,
+}: {
+  listUser: MODEL_USER[];
+}) {
+  return (
+    <>
+      <LayoutGlobal_UI_Tamplate
+        header={<LayoutGlobal_UI_HeaderTamplate title="Pencarian Pengguna" />}
+      >
+        <UserSearch_UiView listUser={listUser} />
+      </LayoutGlobal_UI_Tamplate>
+      {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
+    </>
+  );
+}
diff --git a/src/app_modules/zCoba/index.tsx b/src/app_modules/zCoba/index.tsx
index aabf6483..50213dba 100644
--- a/src/app_modules/zCoba/index.tsx
+++ b/src/app_modules/zCoba/index.tsx
@@ -28,8 +28,8 @@ import { useShallowEffect } from "@mantine/hooks";
 import { ScrollOnly } from "next-scroll-loader";
 import _ from "lodash";
 import ComponentGlobal_V2_LoadingPage from "../component_global/loading_page_v2";
-import ComponentGlobal_UI_LayoutTamplate from "../component_global/ui/ui_layout_tamplate";
-import ComponentGlobal_UI_HeaderTamplate from "../component_global/ui/ui_header_tamplate";
+import LayoutGlobal_UI_Tamplate from "../component_global/ui/ui_layout_tamplate";
+import LayoutGlobal_UI_HeaderTamplate from "../component_global/ui/ui_header_tamplate";
 import { Icon123, IconPencilPlus, IconX } from "@tabler/icons-react";
 import { AccentColor, MainColor } from "../component_global/color/color_pallet";
 
@@ -83,9 +83,9 @@ export default function Coba_TestLoading() {
 
   return (
     <>
-      <ComponentGlobal_UI_LayoutTamplate>
+      <LayoutGlobal_UI_Tamplate>
         <CreateButton />
-      </ComponentGlobal_UI_LayoutTamplate>
+      </LayoutGlobal_UI_Tamplate>
     </>
   );
 
@@ -203,7 +203,7 @@ function BackgroundImageComponent() {
           pos={"sticky"}
           top={0}
         >
-          <ComponentGlobal_UI_HeaderTamplate title="Coba" />
+          <LayoutGlobal_UI_HeaderTamplate title="Coba" />
         </Box>
 
         {/* Children */}