Merge pull request #71 from bipproduction/ui/profile

UI/profile

src/app/dev/home/layout.tsx

@@ -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>
-    </>
-  );
-}

src/app/dev/home/loading.tsx

@@ -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 /> */}
-    </>
-  );
-}

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}
+      />
     </>
   );
 }

src/app/dev/katalog/[id]/layout.tsx

@@ -1,10 +1,29 @@
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 import { KatalogLayout } from "@/app_modules/katalog/main";
+import { Profile_getOneProfileAndUserById } from "@/app_modules/katalog/profile/fun/get/get_one_user_profile";
+
+export default async function Layout({
+  children,
+  params,
+}: {
+  children: any;
+  params: { id: string };
+}) {
+  const profileId = params.id;
+  const dataProfile = await Profile_getOneProfileAndUserById(profileId)
+  const authorId = dataProfile?.userId;
+  const userLoginId = await user_getOneUserId();
+
 
-export default async function Layout({ children, params }: { children: any, params: {id: string} }) {
-  // const a = atob(params.id.toString())
   return (
     <>
-      <KatalogLayout profileId={params.id}>{children}</KatalogLayout>
+      <KatalogLayout
+        profileId={profileId}
+        userLoginId={userLoginId}
+        authorId={authorId as any}
+      >
+        {children}
+      </KatalogLayout>
     </>
   );
 }

src/app/dev/katalog/[id]/loading.tsx

@@ -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 />
-    </>
-  );
-}

src/app/dev/katalog/[id]/page.tsx

@@ -1,37 +1,21 @@
-import prisma from "@/app/lib/prisma";
-import { KatalogView } from "@/app_modules/katalog/main";
-import { url } from "inspector";
-import { unsealData } from "iron-session";
-import _ from "lodash";
-import { cookies } from "next/headers";
-import { redirect } from "next/navigation";
-import { funGetUserProfile } from "@/app_modules/fun_global/get_user_profile";
-import yaml from "yaml";
-import fs from "fs";
-import { funGetListPortofolio } from "@/app_modules/katalog/portofolio/fun/get/get_list_portofolio";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
-import { Profile_getOneById } from "@/app_modules/katalog/profile/fun/get/get_one_profile";
+import { Katalog_MainView } from "@/app_modules/katalog";
+import { funGetListPortofolio } from "@/app_modules/katalog/portofolio/fun/get/get_list_portofolio";
 import { Profile_getOneProfileAndUserById } from "@/app_modules/katalog/profile/fun/get/get_one_user_profile";
-import { user_getOneByUserId } from "@/app_modules/home/fun/get/get_one_user_by_id";
+
-const config = yaml.parse(fs.readFileSync("config.yaml").toString());
 
 export default async function Page({ params }: { params: { id: string } }) {
   let profileId = params.id;
-  const authorId = await user_getOneUserId();
+  const userLoginId = await user_getOneUserId();
-  const dataUser = await user_getOneByUserId(authorId)
   const listPorto = await funGetListPortofolio(profileId);
   const dataProfile = await Profile_getOneProfileAndUserById(profileId);
 
-  // await new Promise((a, b) => {
-  //   setTimeout(a, 1000);
-  // });
-
   return (
     <>
-      <KatalogView
+      <Katalog_MainView
         profile={dataProfile as any}
         listPorto={listPorto as any}
-        userLoginId={authorId}
+        userLoginId={userLoginId}
       />
     </>
   );

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 (
     <>

src/app/dev/portofolio/create/[id]/loading.tsx

@@ -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 />
-    </>
-  );
-}

src/app/dev/portofolio/daftar-portofolio/[id]/page.tsx

@@ -0,0 +1,17 @@
+import { Portofolio_ViewListDetail } from "@/app_modules/katalog/portofolio";
+import { portofolio_funGetAllDaftarByid } from "@/app_modules/katalog/portofolio/fun/get/get_all_portofolio";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const profileId = params.id;
+  const dataPortofolio = await portofolio_funGetAllDaftarByid({
+    profileId,
+    page: 1,
+  });
+
+
+  return (
+    <>
+      <Portofolio_ViewListDetail dataPortofolio={dataPortofolio as any} profileId={profileId} />
+    </>
+  );
+}

src/app/dev/portofolio/edit/data/[id]/loading.tsx

@@ -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 />
-    </>
-  );
-}

src/app/dev/portofolio/edit/logo/[id]/loading.tsx

@@ -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 />
-    </>
-  );
-}

src/app/dev/portofolio/edit/medsos/[id]/loading.tsx

@@ -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 />
-    </>
-  );
-}

src/app/dev/portofolio/main/[id]/loading.tsx

@@ -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 />
-    </>
-  );
-}

src/app/dev/portofolio/main/[id]/page.tsx

@@ -4,14 +4,15 @@ import { portofolio_getOneById } from "@/app_modules/katalog/portofolio/fun/get/
 
 export default async function Page({ params }: { params: { id: string } }) {
   const getPorto = await portofolio_getOneById(params.id);
-  const userLoginId = await user_getOneUserId()
+  const userLoginId = await user_getOneUserId();
-
-
 
   return (
     <>
       {/* {JSON.stringify(getPorto)} */}
-      <ViewPortofolio dataPorto={getPorto as any} userLoginId={userLoginId as any} />
+      <ViewPortofolio
+        dataPorto={getPorto as any}
+        userLoginId={userLoginId as any}
+      />
     </>
   );
 }

src/app/dev/profile/create/loading.tsx

@@ -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 />
-    </>
-  );
-}

src/app/dev/profile/edit/[id]/loading.tsx

@@ -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 />
-    </>
-  );
-}

src/app/dev/profile/upload/background/[id]/layout.tsx

@@ -1,8 +1,16 @@
 import LayoutProfile_UpdateFotoBackground from "@/app_modules/katalog/profile/upload/foto_background/layout";
 import React from "react";
 
-export default async function Layout({children}: {children: React.ReactNode}) {
+export default async function Layout({
-    return<>
+  children,
-    <LayoutProfile_UpdateFotoBackground>{children}</LayoutProfile_UpdateFotoBackground>
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutProfile_UpdateFotoBackground>
+        {children}
+      </LayoutProfile_UpdateFotoBackground>
     </>
+  );
 }

src/app/dev/profile/upload/background/[id]/loading.tsx

@@ -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 />
-    </>
-  );
-}

src/app/dev/profile/upload/foto/[id]/layout.tsx

@@ -1,9 +1,14 @@
 import { UploadFotoProfileLayout } from "@/app_modules/katalog/profile";
 import React from "react";
 
-export default async function Layout({children, params}: {children: React.ReactNode, params: {id: string}}) {
+export default async function Layout({
-    let profileId = params.id 
+  children,
-    return <>
+}: {
-    <UploadFotoProfileLayout profileId={profileId} >{children}</UploadFotoProfileLayout>
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <UploadFotoProfileLayout>{children}</UploadFotoProfileLayout>
     </>
+  );
 }

src/app/dev/profile/upload/foto/[id]/loading.tsx

@@ -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 />
-    </>
-  );
-}

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} />;
 }

src/app/dev/user_search/main/layout.tsx

@@ -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>;
-}

src/app/lib/router_hipmi/router_katalog.ts

@@ -19,9 +19,13 @@ export const RouterProfile = {
 };
 
 export const RouterPortofolio = {
+  main_detail: "/dev/portofolio/main/",
+
   api_logo_porto: "/api/portofolio/logo/",
   create: "/dev/portofolio/create/",
 
+  daftar_portofolio: "/dev/portofolio/daftar-portofolio/",
+
   //edit
   edit_data_bisnis: "/dev/portofolio/edit/data/",
   edit_logo_bisnis: "/dev/portofolio/edit/logo/",

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"
 }

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 UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import Coba_TestLoading from "@/app_modules/zCoba";
 import { Text } from "@mantine/core";
 

src/app_modules/auth/index.ts

@@ -2,12 +2,12 @@ import SplashScreen from "./splash/view";
 import Login from "./login/view";
 import Validasi from "./validasi/view";
 import Register from "./register/view";
-import User_Logout from "./logout/view";
+import Component_Logout from "./logout/view";
 
 export {
   SplashScreen,
   Login,
   Validasi,
   Register,
-  User_Logout as Logout,
+  Component_Logout as Logout,
 };

src/app_modules/auth/logout/view.tsx

@@ -1,6 +1,14 @@
 "use client";
 
-import { ActionIcon, Button, Group, Modal, Stack, Title } from "@mantine/core";
+import {
+  ActionIcon,
+  Button,
+  Group,
+  Modal,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { useAtom } from "jotai";
 import { gs_kodeId, gs_nomor, gs_otp } from "../state/state";
@@ -12,13 +20,13 @@ import { auth_Logout } from "../fun/fun_logout";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
 import { RouterAuth } from "@/app/lib/router_hipmi/router_auth";
 import { useState } from "react";
+import ComponentGlobal_UI_Modal from "@/app_modules/component_global/ui/ui_modal";
 
-export default function User_Logout() {
+export default function Component_Logout() {
   const router = useRouter();
-  const [opened, { toggle }] = useDisclosure(false);
+  const [opened, setOpened] = useState(false);
   const [kodeId, setKodeId] = useAtom(gs_kodeId);
   const [loading, setLoading] = useState(false);
-  const [loading2, setLoading2] = useState(false);
 
   async function onClickLogout() {
     // await auth_Logout(kodeId).then((res) => {
@@ -36,50 +44,52 @@ export default function User_Logout() {
 
   return (
     <>
-      <Modal opened={opened} onClose={toggle} centered withCloseButton={false}>
+      <ComponentGlobal_UI_Modal
-        <Stack>
+        title={"Anda yakin ingin keluar ?"}
-          <Title order={6}>Anda yakin ingin keluar ?</Title>
+        buttonKiri={
-          <Group align="center" position="center">
+          <Button
-            <Button
+            onClick={() => {
-              onClick={() => {
+              setLoading(false);
-                setLoading(false);
+              setOpened(false);
-                toggle();
+            }}
-              }}
+            radius={50}
-              radius={50}
+          >
-            >
+            Batal
-              Batal
+          </Button>
-            </Button>
+        }
-            <Button
+        buttonKanan={
-              loaderPosition="center"
+          <Button
-              loading={loading2 ? true : false}
+            loaderPosition="center"
-              radius={50}
+            loading={loading ? true : false}
-              bg={Warna.merah}
+            radius={50}
-              color="red"
+            bg={Warna.merah}
-              onClick={() => {
+            color="red"
-                setLoading2(true);
+            onClick={() => {
-                onClickLogout();
+              setLoading(true);
-              }}
+              onClickLogout();
-            >
+            }}
-              Keluar
+          >
-            </Button>
+            Keluar
-          </Group>
+          </Button>
-        </Stack>
+        }
-      </Modal>
+        opened={opened}
-      {/* <ActionIcon variant="transparent">
+        close={() => setOpened(false)}
-        <IconLogout color={Warna.merah} onClick={toggle} />
+      />
-      </ActionIcon> */}
+
-      <Button
+      <Stack align="center" spacing={"xs"}>
-        loading={loading ? true : false}
+        <ActionIcon
-        loaderPosition="center"
+          variant="transparent"
-        radius={"xl"}
+          c="white"
-        color={"red"}
+          onClick={() => {
-        onClick={() => {
+            setOpened(true);
-          setLoading(true);
+          }}
-          toggle();
+        >
-        }}
+          <IconLogout color="red" />
-      >
+        </ActionIcon>
-        Logout
+        <Text fw={"bold"} align="center" color="red">
-      </Button>
+          Keluar
+        </Text>
+      </Stack>
     </>
   );
 }

src/app_modules/auth/register/view.tsx

@@ -66,7 +66,7 @@ export default function Register({ dataOtp }: { dataOtp: any }) {
           if (val.status === 200) {
             ComponentGlobal_NotifikasiBerhasil(res.message);
             setLoading(true);
-            router.push(RouterHome.main_home);
+            router.push(RouterHome.main_home, { scroll: false });
           } else {
             ComponentGlobal_NotifikasiPeringatan(val.message);
           }

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");
+        return router.push("/dev/auth/login", { scroll: false });
-      }, 2000);
+      }, 1000);
     } else {
       setTimeout(() => {
-        return router.push("/dev/home");
+        return router.push("/dev/home", { scroll: false });
-      }, 2000);
+      }, 1000);
     }
   }, []);
 

src/app_modules/auth/validasi/view.tsx

@@ -48,7 +48,7 @@ export default function Validasi({ dataOtp }: { dataOtp: any }) {
             if (res.role === "1") {
               ComponentGlobal_NotifikasiBerhasil(res.message);
               setLoading(true);
-              router.push(RouterHome.main_home);
+              router.push(RouterHome.main_home, {scroll: false});
             } else {
               router.push(RouterAdminDashboard.splash_admin);
             }

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 UIGlobal_LayoutTamplate from "../ui/ui_layout_tamplate";
 import { IconMessages, IconX } from "@tabler/icons-react";
 
 export default function ComponentGlobal_SplashScreen({ icon }: { icon: any }) {
   return (
     <>
-      <ComponentGlobal_UI_LayoutTamplate>
+      <UIGlobal_LayoutTamplate>
         <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>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/component_global/ui/ui_drawer.tsx

@@ -1,17 +1,23 @@
 import {
-  Drawer,
-  Stack,
-  Group,
   ActionIcon,
+  Drawer,
+  Group,
   SimpleGrid,
+  Stack,
   Text,
-  Box,
 } from "@mantine/core";
-import { IconX, IconEdit } from "@tabler/icons-react";
+import { IconX } from "@tabler/icons-react";
-import { MainColor, AccentColor } from "../color/color_pallet";
-import React from "react";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { AccentColor } from "../color/color_pallet";
+import ComponentGlobal_UI_Loader from "./ui_loader";
 
+interface MODEL_DRAWER {
+  id: string;
+  name: string;
+  icon: string;
+  path: string;
+}
 export default function ComponentGlobal_UI_Drawer({
   opened,
   close,
@@ -19,9 +25,19 @@ export default function ComponentGlobal_UI_Drawer({
 }: {
   opened: boolean;
   close: () => void;
-  component: any[];
+  component:
+    | {
+        id: string;
+        name: string;
+        icon: string;
+        path: string;
+      }[]
+    | any[];
 }) {
   const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [pageId, setPageId] = useState("");
+
   return (
     <>
       <Drawer
@@ -32,10 +48,16 @@ export default function ComponentGlobal_UI_Drawer({
         withCloseButton={false}
         styles={{
           content: {
+            padding: 0,
+            position: "absolute",
+            margin: "auto",
             backgroundColor: "transparent",
+            left: 0,
+            right: 0,
+            width: 500,
           },
           body: {
-            backgroundColor: MainColor.darkblue,
+            backgroundColor: AccentColor.darkblue,
             borderTop: `2px solid ${AccentColor.blue}`,
             borderRight: `1px solid ${AccentColor.blue}`,
             borderLeft: `1px solid ${AccentColor.blue}`,
@@ -51,17 +73,27 @@ export default function ComponentGlobal_UI_Drawer({
               <IconX color="white" />
             </ActionIcon>
           </Group>
-          <SimpleGrid cols={4}>
+          <SimpleGrid cols={component.length < 4 ? component.length : 4}>
             {component.map((e, i) => (
               <Stack key={i} align="center" spacing={"xs"}>
                 <ActionIcon
                   variant="transparent"
                   c="white"
-                  onClick={() => router.push(e.path)}
+                  onClick={() => {
+                    setPageId(e?.id);
+                    setIsLoading(true);
+                    router.push(e?.path);
+                  }}
                 >
-                  {e.icon}
+                  {isLoading && e?.id === pageId ? (
+                    <ComponentGlobal_UI_Loader />
+                  ) : (
+                    e?.icon
+                  )}
                 </ActionIcon>
-                <Text color="white">{e.name}</Text>
+                <Text align="center" color="white">
+                  {e?.name}
+                </Text>
               </Stack>
             ))}
           </SimpleGrid>

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 UIGlobal_LayoutHeaderTamplate({
   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>

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 UIGlobal_LayoutTamplate({
   children,
   header,
   footer,
@@ -18,56 +22,105 @@ export default function ComponentGlobal_UI_LayoutTamplate({
 }) {
   return (
     <>
-      <BackgroundImage src={"/aset/global/main_background.png"} h={"100vh"} style={{position: "relative"}}>
+      <Box
-        {/* Header */}
+        w={"100%"}
-        {header ? (
+        h={"100%"}
-          <Box
+        style={{
-            h={"8vh"}
+          overflowY: "auto",
-            style={{
+          overflowX: "auto",
-              zIndex: 10,
+          backgroundColor: MainColor.black,
-            }}
+          position: "fixed",
-            w={"100%"}
+        }}
-            pos={"sticky"}
+      >
-            top={0}
+        <Container mih={"100vh"} p={0} size={rem(500)} bg={MainColor.darkblue} >
+          <BackgroundImage
+            src={"/aset/global/main_background.png"}
+            h={"100vh"}
+            style={{ position: "relative" }}
           >
-            {header}
+            <UIHeader header={header} />
-          </Box>
-        ) : (
-          ""
-        )}
 
-        {/* Children */}
+            <UIChildren footer={footer}>{children}</UIChildren>
-        <Box style={{zIndex: 0}} h={footer ? "82vh" : "92vh"} pos={"static"}>
-          <ScrollArea h={"100%"} px={"md"}>
-            {children}
-          </ScrollArea>
-        </Box>
 
-        {/* Footer */}
+            <UIFooter footer={footer} />
-        {footer ? (
+          </BackgroundImage>
-          <Box style={{ position: "relative", bottom: 0 }} >
+        </Container>
-            <Box
+      </Box>
-              style={{
+    </>
-                zIndex: 10,
+  );
-                borderRadius: "20px 20px 0px 0px",
+}
-                borderTop: `2px solid ${AccentColor.blue}`,
+
-                borderRight: `1px solid ${AccentColor.blue}`,
+function UIHeader({ header }: { header: React.ReactNode }) {
-                borderLeft: `1px solid ${AccentColor.blue}`,
+  return (
-                width: "100%",
+    <>
-              }}
+      {header ? (
-              bg={AccentColor.darkblue}
+        <Box
-              color="blue"
+          h={"8vh"}
-              pos={"absolute"}
+          style={{
-              // bottom={0}
+            zIndex: 10,
-              h={"10vh"}
+          }}
-            >
+          w={"100%"}
-              {footer}
+          pos={"sticky"}
-            </Box>
+          top={0}
-          </Box>
+        >
-        ) : (
+          {header}
-          ""
+        </Box>
-        )}
+      ) : (
-      </BackgroundImage>
+        ""
+      )}
+    </>
+  );
+}
+
+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>
+      ) : (
+        ""
+      )}
     </>
   );
 }

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} />
+    </>
+  );
+}

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>
+    </>
+  );
+}

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>
+    </>
+  );
+}

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 UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutHeaderTamplate 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
+    <UIGlobal_LayoutTamplate
-    header={<ComponentGlobal_UI_HeaderTamplate title="Tambah Postingan"/>}
+    header={<UIGlobal_LayoutHeaderTamplate title="Tambah Postingan"/>}
     >
       {children}
-    </ComponentGlobal_UI_LayoutTamplate>
+    </UIGlobal_LayoutTamplate>
 
 
       {/* <AppComponentGlobal_LayoutTamplate header={<ComponentForum_HeaderTamplate title="Tambah Postingan" />}>

src/app_modules/forum/detail/detail_report_komentar.tsx

@@ -1,19 +1,7 @@
-"use client";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate 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
+      <UIGlobal_LayoutTamplate
-        header={<ComponentForum_HeaderTamplate title="Report Komentar" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Report Komentar" />}
       >
-        {<View dataKomentar={dataKomentar} />}
+        {<ComponentForum_UiDetailReportKomentar dataKomentar={dataKomentar} />}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }
 
-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>
-    </>
-  );
-}

src/app_modules/forum/detail/detail_report_posting.tsx

@@ -1,10 +1,7 @@
-"use client";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-
+import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
+import { Stack, Text } from "@mantine/core";
-import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
+import { ComponentForum_UiDetailReportPosting } from "../component/detail_component/ui_report_posting";
-import { List, Paper, Stack, Text } from "@mantine/core";
-import { MODEL_FORUM_POSTING } from "../model/interface";
-import { useState } from "react";
 
 export default function Forum_DetailReportPosting({
   dataPosting,
@@ -13,49 +10,11 @@ export default function Forum_DetailReportPosting({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
-        header={<ComponentForum_HeaderTamplate title="Report Posting" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Report Posting" />}
       >
-        <View dataPosting={dataPosting} />
+        <ComponentForum_UiDetailReportPosting dataPosting={dataPosting} />
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_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>
     </>
   );
 }

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 UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutHeaderTamplate 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
+      <UIGlobal_LayoutTamplate
-        header={<ComponentGlobal_UI_HeaderTamplate title="Postingan" posotion={"left"} />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Postingan" posotion={"left"} />}
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
 
       {/* <AppComponentGlobal_LayoutTamplate
         header={

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 UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutHeaderTamplate 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
+      <UIGlobal_LayoutTamplate
-        header={<ComponentGlobal_UI_HeaderTamplate title="Edit Postingan" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Edit Postingan" />}
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
 
       {/* <AppComponentGlobal_LayoutTamplate
         header={<ComponentForum_HeaderTamplate title="Edit Postingan" />}

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 UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutHeaderTamplate 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
+      <UIGlobal_LayoutTamplate
         header={
-          <ComponentGlobal_UI_HeaderTamplate
+          <UIGlobal_LayoutHeaderTamplate
             title={`${username}`}
             iconLeft={<IconX />}
           />
         }
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
 
       {/* <AppComponentGlobal_LayoutTamplate
         header={

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"} />

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 UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutHeaderTamplate 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
+      <UIGlobal_LayoutTamplate
         header={
-          <ComponentGlobal_UI_HeaderTamplate
+          <UIGlobal_LayoutHeaderTamplate
             title="FORUM"
             iconRight={
               <ActionIcon
@@ -80,7 +80,7 @@ export default function LayoutForum_Main({
         }
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
 
       {/* <AppComponentGlobal_LayoutTamplate
         header={

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 UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutHeaderTamplate 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
+      <UIGlobal_LayoutTamplate
         header={
-          <ComponentGlobal_UI_HeaderTamplate title="Mengumpulkan Informasi Komentar" />
+          <UIGlobal_LayoutHeaderTamplate title="Mengumpulkan Informasi Komentar" />
         }
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
       {/* <AppComponentGlobal_LayoutTamplate
         header={
           <ComponentForum_HeaderRataKiri title="Mengumpulkan Informasi Komentar"/>

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 UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutTamplate 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
+      <UIGlobal_LayoutTamplate
         header={
-          <ComponentGlobal_UI_HeaderTamplate title="Mengumpulkan Informasi Posting" />
+          <UIGlobal_LayoutHeaderTamplate title="Mengumpulkan Informasi Posting" />
         }
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
 
   
     </>

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 UIGlobal_LayoutTamplate 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);
   }, []);
 

src/app_modules/home/component/button_header.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import UIGlobal_LayoutHeaderTamplate 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>
+    </>
+  );
+}

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 { MODEL_USER } from "../model/interface";
-import ComponentGlobal_IsEmptyData from "../component_global/is_empty_data";
+import { MODEL_JOB } from "@/app_modules/job/model/interface";
-import { ComponentGlobal_NotifikasiPeringatan } from "../component_global/notif_global/notifikasi_peringatan";
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
-import { MODEL_JOB } from "../job/model/interface";
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import { MODEL_USER } from "./model/interface";
 
-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>
+    </>
+  );
+}

src/app_modules/home/index.ts

@@ -1,5 +1,4 @@
-import HomeView from "./view";
+import HomeView from "./view_home";
-import HomeLayout from "./layout";
 import Home_UserNotActive from "./user_non_active";
 
-export { HomeView, HomeLayout, Home_UserNotActive as Home_UserNonActive };
+export { HomeView, Home_UserNotActive as Home_UserNonActive };

src/app_modules/home/layout.tsx

@@ -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>
-    </>
-  );
-}

src/app_modules/home/user_non_active/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Logout } from "@/app_modules/auth";
-import User_Logout from "@/app_modules/auth/logout/view";
+import Component_Logout from "@/app_modules/auth/logout/view";
 import { Center, Group, Skeleton, Stack, Text, Title } from "@mantine/core";
 
 export default function Home_UserNotActive() {
@@ -44,7 +44,7 @@ export default function Home_UserNotActive() {
           <Title order={4} c={"gray"}>
             Tunggu Konfirmasi Admin !
           </Title>
-          <User_Logout />
+          <Component_Logout />
         </Stack>
       </Center>
     </>

src/app_modules/home/view_home.tsx

@@ -0,0 +1,43 @@
+import UIGlobal_LayoutHeaderTamplate from "../component_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate 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 (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={
+          <UIGlobal_LayoutHeaderTamplate
+            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} />
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}

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 UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutTamplate 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
+      <UIGlobal_LayoutTamplate
-        header={<ComponentGlobal_UI_HeaderTamplate title="Tambah Job" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Tambah Job" />}
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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 UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutTamplate 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
+      <UIGlobal_LayoutTamplate
-        header={<ComponentGlobal_UI_HeaderTamplate title="Detail Arsip" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Arsip" />}
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/job/detail/draft/layout.tsx

@@ -14,11 +14,11 @@ import {
 } from "@mantine/core";
 import React from "react";
 import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
-import { IconDots, IconEdit, IconX } from "@tabler/icons-react";
+import { IconDots, IconDotsVertical, 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 UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
 import { useRouter } from "next/navigation";
 import { useDisclosure } from "@mantine/hooks";
 import {
@@ -48,13 +48,13 @@ export default function LayoutJob_DetailDraft({
 
   return (
     <>
-      <ComponentGlobal_UI_LayoutTamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <ComponentGlobal_UI_HeaderTamplate
+          <UIGlobal_LayoutHeaderTamplate
             title="Detail Draft"
             iconRight={
               <ActionIcon variant="transparent" onClick={() => open()}>
-                <IconDots color="white" />
+                <IconDotsVertical color="white" />
               </ActionIcon>
             }
             // routerRight={}
@@ -62,7 +62,7 @@ export default function LayoutJob_DetailDraft({
         }
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
 
       <ComponentGlobal_UI_Drawer
         opened={opened}

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 UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutTamplate 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
+      <UIGlobal_LayoutTamplate
-        header={<ComponentGlobal_UI_HeaderTamplate title="Detail Job" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Job" />}
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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 UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutTamplate 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
+      <UIGlobal_LayoutTamplate
-        header={<ComponentGlobal_UI_HeaderTamplate title="Detail Publish" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Publish" />}
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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 UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutTamplate 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
+      <UIGlobal_LayoutTamplate
-        header={<ComponentGlobal_UI_HeaderTamplate title="Detail Reject" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Reject" />}
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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 UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutTamplate 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
+      <UIGlobal_LayoutTamplate
-        header={<ComponentGlobal_UI_HeaderTamplate title="Detail Review" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Review" />}
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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 UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutTamplate 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
+      <UIGlobal_LayoutTamplate
-        header={<ComponentGlobal_UI_HeaderTamplate title="Edit Job" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Edit Job" />}
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
 
     </>
   );

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);

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 UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutTamplate 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
+      <UIGlobal_LayoutTamplate
         header={
-          <ComponentGlobal_UI_HeaderTamplate
+          <UIGlobal_LayoutHeaderTamplate
             title="JOB"
             routerLeft={RouterHome.main_home}
           />
@@ -118,7 +118,7 @@ export default function LayoutJob_Main({
         }
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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 UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutHeaderTamplate 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
+      <UIGlobal_LayoutTamplate
-        header={<ComponentGlobal_UI_HeaderTamplate title="Job Vacancy" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Job Vacancy" />}
       >
         {children}
-      </ComponentGlobal_UI_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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 (

src/app_modules/katalog/component/button_header_right.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import ComponentGlobal_UI_Drawer from "@/app_modules/component_global/ui/ui_drawer";
+import { ActionIcon, Box } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import {
+  IconDots,
+  IconDotsVertical,
+  IconEdit,
+  IconPhotoEdit,
+  IconPolaroid,
+} from "@tabler/icons-react";
+import { ComponentKatalog_DrawerKatalog } from "./drawer_katalog";
+
+export function ComponentKatalog_ButtonHeaderRight({
+  profileId,
+  userLoginId,
+  authorId,
+}: {
+  profileId: string;
+  userLoginId: string;
+  authorId: string;
+}) {
+  const [opened, { open, close }] = useDisclosure();
+
+  return (
+    <>
+      {authorId !== userLoginId ? (
+        <ActionIcon disabled variant="transparent"></ActionIcon>
+      ) : (
+        <ActionIcon c="white" variant="transparent" onClick={() => open()}>
+          <IconDotsVertical />
+        </ActionIcon>
+      )}
+
+      <ComponentKatalog_DrawerKatalog
+        opened={opened}
+        close={() => close()}
+        profileId={profileId}
+      />
+    </>
+  );
+}

src/app_modules/katalog/component/drawer_katalog.tsx

@@ -0,0 +1,118 @@
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import Component_Logout from "@/app_modules/auth/logout/view";
+import { AccentColor } from "@/app_modules/component_global/color/color_pallet";
+import ComponentGlobal_UI_Loader from "@/app_modules/component_global/ui/ui_loader";
+import {
+  ActionIcon,
+  Drawer,
+  Group,
+  SimpleGrid,
+  Stack,
+  Text,
+} from "@mantine/core";
+import {
+  IconEdit,
+  IconLogout,
+  IconLogout2,
+  IconPhotoEdit,
+  IconPolaroid,
+  IconX,
+} from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function ComponentKatalog_DrawerKatalog({
+  opened,
+  close,
+  profileId,
+}: {
+  opened: boolean;
+  close: () => void;
+  profileId: string;
+}) {
+  const router = useRouter();
+  const [pageId, setPageId] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const listPage = [
+    {
+      id: "1",
+      name: "Edit profile",
+      icon: <IconEdit />,
+      path: RouterProfile.edit + profileId,
+    },
+    {
+      id: "2",
+      name: "Ubah Foto Profile",
+      icon: <IconPhotoEdit />,
+      path: RouterProfile.update_foto_profile + profileId,
+    },
+    {
+      id: "3",
+      name: "Ubah Latar Belakang",
+      icon: <IconPolaroid />,
+      path: RouterProfile.update_foto_background + profileId,
+    },
+  ];
+
+  return (
+    <>
+      <Drawer
+        opened={opened}
+        onClose={() => close()}
+        position={"bottom"}
+        size={"auto"}
+        withCloseButton={false}
+        styles={{
+          content: {
+            padding: 0,
+            position: "absolute",
+            margin: "auto",
+            backgroundColor: "transparent",
+            left: 0,
+            right: 0,
+            width: 500,
+          },
+          body: {
+            backgroundColor: AccentColor.darkblue,
+            borderTop: `2px solid ${AccentColor.blue}`,
+            borderRight: `1px solid ${AccentColor.blue}`,
+            borderLeft: `1px solid ${AccentColor.blue}`,
+            borderRadius: "20px 20px 0px 0px",
+            color: "white",
+            paddingBottom: "5%",
+          },
+        }}
+      >
+        <Stack spacing={"xs"}>
+          <Group position="right">
+            <ActionIcon onClick={close} variant="transparent">
+              <IconX color="white" />
+            </ActionIcon>
+          </Group>
+          <SimpleGrid cols={4}>
+            {listPage.map((e, i) => (
+              <Stack key={i} align="center" spacing={"xs"}>
+                <ActionIcon
+                  variant="transparent"
+                  c="white"
+                  onClick={() => {
+                    router.push(e.path);
+                    setPageId(e?.id);
+                    setIsLoading(true)
+                  }}
+                >
+                  {isLoading && e.id === pageId ? <ComponentGlobal_UI_Loader /> :  e.icon}
+                </ActionIcon>
+                <Text align="center" color="white">
+                  {e.name}
+                </Text>
+              </Stack>
+            ))}
+            <Component_Logout />
+          </SimpleGrid>
+        </Stack>
+      </Drawer>
+    </>
+  );
+}

src/app_modules/katalog/index.ts

@@ -1,3 +1,4 @@
 import HeaderTransparent from "./component/header_transparent";
 
-export {HeaderTransparent as headerTransparent}
+export { HeaderTransparent as headerTransparent };
+export { Katalog_MainView } from "./view_katalog";

src/app_modules/katalog/main/index.ts

@@ -1,4 +1,3 @@
-import KatalogView from "./view";
 import KatalogLayout from "./layout";
 
-export {KatalogView, KatalogLayout}
+export { KatalogLayout };

src/app_modules/katalog/main/layout.tsx

@@ -1,103 +1,38 @@
 "use client";
 
-import { Logout } from "@/app_modules/auth";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import {
+import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-  ActionIcon,
+import { ComponentKatalog_ButtonHeaderRight } from "../component/button_header_right";
-  AppShell,
-  Group,
-  Header,
-  Text,
-  Title,
-} from "@mantine/core";
-import {
-  IconUserSearch,
-  IconAward,
-  IconQrcode,
-  IconArrowLeft,
-  IconPencilPlus,
-  IconChevronLeft,
-  IconDashboard,
-} from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-import ComponentKatalog_HeaderTamplate from "../component/header_tamplate";
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import { RouterHome } from "@/app/lib/router_hipmi/router_home";
-import { title } from "process";
-import { RouterAdminDashboard } from "@/app/lib/router_hipmi/router_admin";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
 
 export default function KatalogLayout({
   children,
   profileId,
+  userLoginId,
+  authorId,
 }: {
   children: any;
   profileId: any;
+  userLoginId: string;
+  authorId: string;
 }) {
-  const router = useRouter();
-
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <Header height={50} sx={{ borderStyle: "none" }} bg={"black"}>
+          <UIGlobal_LayoutHeaderTamplate
-            <Group h={50} position="apart" px={"md"}>
+            title="KATALOG"
-              <ActionIcon
+            customButtonRight={
-                variant="transparent"
+              <ComponentKatalog_ButtonHeaderRight
-                onClick={() => {
+                profileId={profileId}
-                  router.back();
+                userLoginId={userLoginId}
-                }}
+                authorId={authorId as any}
-              >
+              />
-                <IconChevronLeft />
+            }
-              </ActionIcon>
+          />
-              <Title order={5} c={"white"}>
-                Katalog
-              </Title>
-              <ActionIcon variant="transparent" disabled></ActionIcon>
-              {/* <ActionIcon
-                variant="transparent"
-                onClick={() => router.push(RouterAdminDashboard.splash_admin)}
-              >
-                <IconDashboard />
-              </ActionIcon> */}
-            </Group>
-          </Header>
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
-    </>
-  );
-
-  return (
-    <>
-      <AppShell
-        header={
-          <Header height={50} sx={{ borderStyle: "none" }} bg={"black"}>
-            <Group h={50} position="apart" px={"md"}>
-              <ActionIcon
-                variant="transparent"
-                onClick={() => {
-                  router.back();
-                }}
-              >
-                <IconChevronLeft />
-              </ActionIcon>
-              <Title order={5} c={"white"}>
-                Katalog
-              </Title>
-              <ActionIcon variant="transparent" disabled></ActionIcon>
-              {/* <ActionIcon
-                variant="transparent"
-                onClick={() => router.push(RouterAdminDashboard.splash_admin)}
-              >
-                <IconDashboard />
-              </ActionIcon> */}
-            </Group>
-          </Header>
-        }
-      >
-        {children}
-      </AppShell>
     </>
   );
 }

src/app_modules/katalog/main/view.tsx

@@ -1,49 +0,0 @@
-"use client";
-
-import { Warna } from "@/app/lib/warna";
-import {
-  ActionIcon,
-  BackgroundImage,
-  Box,
-  Center,
-  Flex,
-  Grid,
-  Group,
-  Image,
-  Paper,
-  Stack,
-  Text,
-} from "@mantine/core";
-import { ProfileView } from "../profile";
-import { ListPortofolioView } from "../portofolio";
-import { MODEL_PROFILE_OLD } from "@/app_modules/home/model/user_profile";
-import { MODEL_PORTOFOLIO_Lama } from "@/app_modules/model_global/portofolio";
-import User_Logout from "@/app_modules/auth/logout/view";
-import { MODEL_PORTOFOLIO } from "../portofolio/model/interface";
-import { MODEL_PROFILE } from "../profile/model/interface";
-
-export default function KatalogView({
-  profile,
-  listPorto,
-  userLoginId,
-}: {
-  profile: MODEL_PROFILE;
-  listPorto: MODEL_PORTOFOLIO;
-  userLoginId: string;
-}) {
-  return (
-    <>
-      <Stack>
-        <ProfileView profile={profile as any} userLoginId={userLoginId} />
-        <ListPortofolioView
-          listPorto={listPorto as any}
-          profile={profile}
-          userLoginId={userLoginId}
-        />
-        <Stack my={"lg"} w={"100%"}>
-          {profile?.User.id === userLoginId ? <User_Logout /> : ""}
-        </Stack>
-      </Stack>
-    </>
-  );
-}

src/app_modules/katalog/portofolio/component/button_delete.tsx

@@ -0,0 +1,80 @@
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
+import { Button, Group, Modal, Stack, Title } from "@mantine/core";
+import { IconTrash } from "@tabler/icons-react";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import router from "next/router";
+import { useState } from "react";
+import { Portofolio_funDeletePortofolioById } from "../fun/delete/fun_delete_by_id";
+import { MODEL_PORTOFOLIO } from "../model/interface";
+import { useRouter } from "next/navigation";
+import ComponentGlobal_UI_Modal from "@/app_modules/component_global/ui/ui_modal";
+
+export function ComponentPortofolio_ButtonDelete({
+  userLoginId,
+  dataPorto,
+}: {
+  userLoginId: string;
+  dataPorto: MODEL_PORTOFOLIO;
+}) {
+  const router = useRouter();
+  const [openModal, setModal] = useState(false);
+  const [loadingDel, setLoadingDel] = useState(false);
+
+  return (
+    <>
+      {userLoginId === dataPorto?.Profile.userId ? (
+        <Button
+          radius={"xl"}
+          bg={"red"}
+          color="red"
+          onClick={() => {
+            setModal(true)
+          }}
+        >
+          <IconTrash />
+        </Button>
+      ) : (
+        ""
+      )}
+
+      <ComponentGlobal_UI_Modal
+        title={"Anda yakin menghapus portofolio ini ?"}
+        opened={openModal}
+        close={() => setModal(false)}
+        buttonKiri={
+          <Button radius={"xl"} onClick={() => setModal(false)}>
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button
+            radius={"xl"}
+            color="red"
+            loaderPosition="center"
+            loading={loadingDel ? true : false}
+            onClick={() => onDelete(router, dataPorto as any, setLoadingDel)}
+          >
+            Hapus
+          </Button>
+        }
+      />
+    </>
+  );
+}
+
+async function onDelete(
+  router: AppRouterInstance,
+  dataPorto: MODEL_PORTOFOLIO,
+  setLoadingDel: any
+) {
+  await Portofolio_funDeletePortofolioById(dataPorto).then((res) => {
+    if (res.status === 200) {
+      setLoadingDel(true);
+      ComponentGlobal_NotifikasiBerhasil(res.message);
+      router.back();
+    } else {
+      ComponentGlobal_NotifikasiGagal(res.message);
+    }
+  });
+}

src/app_modules/katalog/portofolio/component/button_more.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
+import ComponentGlobal_UI_Drawer from "@/app_modules/component_global/ui/ui_drawer";
+import { ActionIcon } from "@mantine/core";
+import {
+  IconDots,
+  IconDotsVertical,
+  IconEdit,
+  IconId,
+  IconPhotoEdit,
+} from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function ComponentPortofolio_ButtonMore({
+  portoId,
+  userLoginId,
+  authorId,
+}: {
+  portoId: string;
+  userLoginId: string;
+  authorId: string;
+}) {
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const listPage = [
+    {
+      id: "1",
+      name: "Update detail bisnis",
+      icon: <IconEdit />,
+      path: RouterPortofolio.edit_data_bisnis + `${portoId}`,
+    },
+    {
+      id: "2",
+      name: "Update logo ",
+      icon: <IconPhotoEdit />,
+      path: RouterPortofolio.edit_logo_bisnis + `${portoId}`,
+    },
+    {
+      id: "3",
+      name: "Update sosial media",
+      icon: <IconId />,
+      path: RouterPortofolio.edit_medsos_bisnis + `${portoId}`,
+    },
+  ];
+
+  return (
+    <>
+      {userLoginId === authorId ? (
+        <ActionIcon variant="transparent" onClick={() => setOpenDrawer(true)}>
+          <IconDotsVertical color="white" />
+        </ActionIcon>
+      ) : (
+        <ActionIcon disabled variant="transparent"></ActionIcon>
+      )}
+
+      <ComponentGlobal_UI_Drawer
+        opened={openDrawer}
+        close={() => setOpenDrawer(false)}
+        component={listPage}
+      />
+    </>
+  );
+}

src/app_modules/katalog/portofolio/component/card_view_daftar.tsx

@@ -0,0 +1,50 @@
+import { Group, Paper, Stack, Text } from "@mantine/core";
+import { MODEL_PORTOFOLIO } from "../model/interface";
+import { AccentColor } from "@/app_modules/component_global/color/color_pallet";
+import ComponentGlobal_UI_Loader from "@/app_modules/component_global/ui/ui_loader";
+import { IconCaretRight } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
+
+export function ComponentPortofolio_DaftarBoxView({
+  data,
+}: {
+  data: MODEL_PORTOFOLIO;
+}) {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  return (
+    <>
+      <Paper
+        shadow="sm"
+        radius={"md"}
+        mb={"lg"}
+        onClick={() => {
+          setIsLoading(true);
+          router.push(RouterPortofolio.main_detail + data.id);
+        }}
+        style={{
+          backgroundColor: AccentColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          borderRadius: "10px ",
+          padding: "15px",
+          color: "white",
+        }}
+      >
+        <Group position="apart">
+          <Text fw={"bold"} lineClamp={1} w={"80%"}>
+            {data?.namaBisnis}
+          </Text>
+          <Stack>
+            {isLoading ? (
+              <ComponentGlobal_UI_Loader />
+            ) : (
+              <IconCaretRight color="white" size={25} />
+            )}
+          </Stack>
+        </Group>
+      </Paper>
+    </>
+  );
+}

src/app_modules/katalog/portofolio/create/layout.tsx

@@ -1,22 +1,18 @@
 "use client";
 
-import { ActionIcon, AppShell, Group, Header, Text } from "@mantine/core";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import { IconArrowLeft } from "@tabler/icons-react";
+import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import { useRouter } from "next/navigation";
-import ComponentKatalog_HeaderTamplate from "../../component/header_tamplate";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
 
 export default function CreatePortofolioLayout({ children, profileId }: { children: any, profileId: any }) {
-  const router = useRouter();
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <ComponentKatalog_HeaderTamplate title="Buat Portofolio"/>
+          <UIGlobal_LayoutHeaderTamplate title="Buat Portofolio"/>
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/katalog/portofolio/create/view.tsx

@@ -1,8 +1,11 @@
 "use client";
 
-import { myConsole } from "@/app/fun/my_console";
-import { ApiHipmi } from "@/app/lib/api";
 import { Warna } from "@/app/lib/warna";
+import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
+import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
 import {
   BIDANG_BISNIS_OLD,
   MODEL_PORTOFOLIO_OLD,
@@ -16,25 +19,21 @@ import {
   Paper,
   Select,
   Stack,
-  Text,
   TextInput,
   Textarea,
-  Title,
 } from "@mantine/core";
+import { IconCamera } from "@tabler/icons-react";
 import _ from "lodash";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import toast from "react-simple-toasts";
-import funCreatePortofolio from "../fun/fun_create_portofolio";
-import { IconCamera } from "@tabler/icons-react";
 import ComponentKatalog_NotedBox from "../../component/noted_box";
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import funCreatePortofolio from "../fun/fun_create_portofolio";
-import { NotifPeringatan } from "@/app_modules/donasi/component/notifikasi/notif_peringatan";
+import ComponentGlobal_BoxInformation from "@/app_modules/component_global/box_information";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import {
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
+  AccentColor,
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
+  MainColor,
-import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
+} from "@/app_modules/component_global/color/color_pallet";
-import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
 
 export default function CreatePortofolio({
   bidangBisnis,
@@ -69,10 +68,15 @@ export default function CreatePortofolio({
     <>
       {/* {JSON.stringify(profileId)} */}
 
-      <Stack px={"sm"} spacing={50}>
+      <Stack px={"sm"} mb={"lg"} spacing={50}>
         <Stack spacing={"sm"}>
-          <ComponentKatalog_NotedBox informasi="Lengkapi Data Bisnis" />
+          <ComponentGlobal_BoxInformation informasi="Lengkapi Data Bisnis" />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             label="Nama Bisnis"
             placeholder="Nama bisnis"
@@ -85,6 +89,11 @@ export default function CreatePortofolio({
             }}
           />
           <Select
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             label="Bidang Bisnis"
             placeholder="Pilih salah satu bidang bisnis"
@@ -100,6 +109,11 @@ export default function CreatePortofolio({
             }}
           />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             label="Alamat Kantor"
             placeholder="Alamat kantor"
@@ -112,6 +126,11 @@ export default function CreatePortofolio({
             }}
           />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             label="Nomor Telepon Kantor"
             placeholder="Nomor telepon kantor"
@@ -125,6 +144,11 @@ export default function CreatePortofolio({
           />
           <Stack spacing={5}>
             <Textarea
+              styles={{
+                label: {
+                  color: "white",
+                },
+              }}
               maxLength={150}
               autosize
               minRows={2}
@@ -147,7 +171,7 @@ export default function CreatePortofolio({
         </Stack>
 
         <Stack>
-          <ComponentKatalog_NotedBox informasi="Upload Logo Bisnis Anda!" />
+          <ComponentGlobal_BoxInformation informasi="Upload Logo Bisnis Anda!" />
           <AspectRatio ratio={16 / 9}>
             <Paper radius={"md"} withBorder>
               <Image alt="Foto" src={img ? img : "/aset/no-img.png"} />
@@ -182,10 +206,10 @@ export default function CreatePortofolio({
                 <Button
                   {...props}
                   radius={"xl"}
-                  variant="outline"
-                  w={150}
                   leftIcon={<IconCamera />}
-                  compact
+                  bg={MainColor.yellow}
+                  color="yellow"
+                  c={"black"}
                 >
                   Upload
                 </Button>
@@ -197,6 +221,11 @@ export default function CreatePortofolio({
         <Stack>
           <ComponentKatalog_NotedBox informasi="Isi hanya pada sosial media yang anda miliki" />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             label="Facebook"
             maxLength={100}
             placeholder="Facebook"
@@ -208,6 +237,11 @@ export default function CreatePortofolio({
             }}
           />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             label="Instagram"
             maxLength={100}
             placeholder="Instagram"
@@ -219,6 +253,11 @@ export default function CreatePortofolio({
             }}
           />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             label="Tiktok"
             maxLength={100}
             placeholder="Tiktok"
@@ -230,6 +269,11 @@ export default function CreatePortofolio({
             }}
           />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             label="Twitter"
             maxLength={100}
             placeholder="Twitter"
@@ -241,6 +285,11 @@ export default function CreatePortofolio({
             }}
           />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             label="Youtube"
             maxLength={100}
             placeholder="Youtube"
@@ -256,8 +305,6 @@ export default function CreatePortofolio({
         <Button
           mt={"md"}
           radius={50}
-          bg={Warna.hijau_muda}
-          color="green"
           loading={loading ? true : false}
           loaderPosition="center"
           onClick={() => {
@@ -271,6 +318,12 @@ export default function CreatePortofolio({
               setIsFile
             );
           }}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
+          style={{
+            border: `2px solid ${AccentColor.yellow}`,
+          }}
         >
           Simpan
         </Button>

src/app_modules/katalog/portofolio/edit/data/layout.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import ComponentKatalog_HeaderTamplate from "@/app_modules/katalog/component/header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import { AppShell } from "@mantine/core";
 import React from "react";
 
 
@@ -13,11 +12,11 @@ export default function LayoutPortofolio_EditDataBisnis({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
-        header={<ComponentKatalog_HeaderTamplate title="Edit Data Bisnis" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Edit Data Bisnis" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/katalog/portofolio/edit/data/ui_edit_data.tsx

@@ -1,20 +1,22 @@
 "use client";
 
-import { Box, Button, Select, Stack, TextInput, Textarea } from "@mantine/core";
+import {
+  MainColor
+} from "@/app_modules/component_global/color/color_pallet";
+import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
+import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
+import { Button, Select, Stack, TextInput, Textarea } from "@mantine/core";
+import _ from "lodash";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { Portofolio_funEditDataBisnis } from "../../fun/edit/fun_edit_data_bisnis_by_id";
 import {
   MODEL_PORTOFOLIO,
   MODEL_PORTOFOLIO_BIDANG_BISNIS,
 } from "../../model/interface";
-import { useState } from "react";
-import _ from "lodash";
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
-import { useRouter } from "next/navigation";
-import { Portofolio_funEditDataBisnis } from "../../fun/edit/fun_edit_data_bisnis_by_id";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
-import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
-import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
 
 export default function Portofolio_EditDataBisnis({
   dataPorto,
@@ -30,9 +32,14 @@ export default function Portofolio_EditDataBisnis({
   return (
     <>
       {/* <pre>{JSON.stringify(porto, null, 2)}</pre> */}
-      <Stack spacing={50} p={"md"}>
+      <Stack spacing={50} p={"sm"}>
         <Stack>
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             value={value.namaBisnis}
             label="Nama Bisnis"
@@ -53,6 +60,11 @@ export default function Portofolio_EditDataBisnis({
             }}
           />
           <Select
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             value={value.MasterBidangBisnis.id}
             label="Bidang Bisnis"
@@ -71,6 +83,11 @@ export default function Portofolio_EditDataBisnis({
             }}
           />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             value={value.alamatKantor}
             label="Alamat Kantor"
@@ -91,6 +108,11 @@ export default function Portofolio_EditDataBisnis({
             }}
           />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             value={value.tlpn}
             label="Nomor Telepon Kantor"
@@ -113,6 +135,11 @@ export default function Portofolio_EditDataBisnis({
           />
           <Stack spacing={5}>
             <Textarea
+              styles={{
+                label: {
+                  color: "white",
+                },
+              }}
               autosize
               minRows={2}
               maxRows={5}
@@ -142,12 +169,19 @@ export default function Portofolio_EditDataBisnis({
           </Stack>
         </Stack>
         <Button
+          disabled={_.values(value).includes("") ? true : false}
           radius={"xl"}
           loading={loading ? true : false}
           loaderPosition="center"
           onClick={() => {
             onUpdate(router, value as any, setLoading);
           }}
+          bg={MainColor.yellow}
+          color={"yellow"}
+          c={"black"}
+          style={{
+            transition: "0.5s",
+          }}
         >
           Update
         </Button>

src/app_modules/katalog/portofolio/edit/logo/layout.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import ComponentKatalog_HeaderTamplate from "@/app_modules/katalog/component/header_tamplate";
 import { AppShell } from "@mantine/core";
 import React from "react";
@@ -12,11 +14,11 @@ export default function LayoutPortofolio_EditLogoBisnis({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
-        header={<ComponentKatalog_HeaderTamplate title="Edit Logo Bisnis" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Edit Logo Bisnis" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx

@@ -1,30 +1,29 @@
 "use client";
 
 import {
-  RouterPortofolio,
+  RouterPortofolio
-  RouterProfile,
 } from "@/app/lib/router_hipmi/router_katalog";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 import {
   AspectRatio,
-  Box,
   Button,
   Center,
   FileButton,
   Image,
   Paper,
-  Stack,
+  Stack
 } from "@mantine/core";
 import { IconCamera } from "@tabler/icons-react";
-import { profile } from "console";
-import image from "next/image";
-import { useRouter } from "next/navigation";
-import router from "next/router";
-import { useState } from "react";
-import { MODEL_PORTOFOLIO } from "../../model/interface";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 import { Portofolio_funEditLogoBisnisById } from "../../fun/edit/fun_edit_logo_bisnis_by_id";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { MODEL_PORTOFOLIO } from "../../model/interface";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 
 export default function Portofolio_EditLogoBisnis({
   dataPorto,
@@ -38,7 +37,16 @@ export default function Portofolio_EditLogoBisnis({
   return (
     <>
       <Stack spacing={"xl"} px={"sm"}>
-        <Paper p={"sm"} withBorder radius={"sm"} shadow="lg">
+        <Paper
+          p={"sm"}
+          style={{
+            backgroundColor: AccentColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+            borderRadius: "10px ",
+            padding: "15px",
+            color: "white",
+          }}
+        >
           <Stack>
             <AspectRatio ratio={1 / 1}>
               <Image
@@ -71,10 +79,10 @@ export default function Portofolio_EditLogoBisnis({
                   <Button
                     {...props}
                     radius={"xl"}
-                    variant="outline"
-                    w={150}
                     leftIcon={<IconCamera />}
-                    compact
+                    bg={MainColor.yellow}
+                    color="yellow"
+                    c={"black"}
                   >
                     Upload
                   </Button>
@@ -88,8 +96,16 @@ export default function Portofolio_EditLogoBisnis({
           <Button
             radius={"xl"}
             onClick={() =>
-              onUpdate(router, dataPorto.id, file as any, setLoading)
+              // onUpdate(router, dataPorto.id, file as any, setLoading)
+              console.log("apa")
             }
+            bg={MainColor.yellow}
+            color="yellow"
+            c={"black"}
+            style={{
+              transition: "0.5s",
+              border: `1px solid ${AccentColor.yellow}`,
+            }}
           >
             Simpan
           </Button>
@@ -97,11 +113,7 @@ export default function Portofolio_EditLogoBisnis({
           <Button
             disabled
             radius={"xl"}
-            loading={loading ? true : false}
+           
-            loaderPosition="center"
-            onClick={() =>
-              onUpdate(router, dataPorto.id, file as any, setLoading)
-            }
           >
             Simpan
           </Button>

src/app_modules/katalog/portofolio/edit/medsos/layout.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import ComponentKatalog_HeaderTamplate from "@/app_modules/katalog/component/header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import { AppShell } from "@mantine/core";
 import React from "react";
 
 export default function LayoutPortofolio_EditMedsosBisnis({
@@ -12,11 +11,11 @@ export default function LayoutPortofolio_EditMedsosBisnis({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
-        header={<ComponentKatalog_HeaderTamplate title="Edit Media Sosial" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Edit Media Sosial" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/katalog/portofolio/edit/medsos/ui_edit_medsos.tsx

@@ -10,6 +10,10 @@ import { useRouter } from "next/navigation";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
 
 export default function Portofolio_EditMedsosBisnis({
   dataMedsos,
@@ -23,9 +27,23 @@ export default function Portofolio_EditMedsosBisnis({
   return (
     <>
       {/* <pre>{JSON.stringify(dataMedsos, null, 2)}</pre> */}
-      <Paper shadow="lg" p={"sm"}>
+      <Paper
+        p={"sm"}
+        style={{
+          backgroundColor: AccentColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          borderRadius: "10px ",
+          padding: "15px",
+          color: "white",
+        }}
+      >
         <Stack px={"sm"}>
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             label="Facebook"
             value={medsos.facebook}
             placeholder="Facebook"
@@ -37,6 +55,11 @@ export default function Portofolio_EditMedsosBisnis({
             }}
           />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             label="Instagram"
             value={medsos.instagram}
             placeholder="Instagram"
@@ -48,6 +71,11 @@ export default function Portofolio_EditMedsosBisnis({
             }}
           />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             label="Tiktok"
             value={medsos.tiktok}
             placeholder="Tiktok"
@@ -59,6 +87,11 @@ export default function Portofolio_EditMedsosBisnis({
             }}
           />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             label="Twitter"
             value={medsos.twitter}
             placeholder="Twitter"
@@ -70,6 +103,11 @@ export default function Portofolio_EditMedsosBisnis({
             }}
           />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             label="Youtube"
             value={medsos.youtube}
             placeholder="Youtube"
@@ -87,6 +125,12 @@ export default function Portofolio_EditMedsosBisnis({
             loading={loading ? true : false}
             loaderPosition="center"
             onClick={() => onUpdate(router, medsos, setLoading)}
+            style={{
+              backgroundColor: MainColor.yellow,
+              border: `2px solid ${AccentColor.yellow}`,
+              transition: "0.5s",
+              color: "black",
+            }}
           >
             Update
           </Button>

src/app_modules/katalog/portofolio/fun/get/get_all_portofolio.tsx

@@ -0,0 +1,28 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export async function portofolio_funGetAllDaftarByid({
+  profileId,
+  page,
+}: {
+  profileId: string;
+  page: number;
+}) {
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
+
+  const data = await prisma.portofolio.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      createdAt: "desc",
+    },
+    where: {
+      profileId: profileId,
+      active: true,
+    },
+  });
+
+  return data
+}

src/app_modules/katalog/portofolio/fun/get/get_list_portofolio.ts

@@ -4,19 +4,20 @@ import prisma from "@/app/lib/prisma";
 
 export async function funGetListPortofolio(profileId: any) {
   const data = await prisma.portofolio.findMany({
+    take: 2,
     orderBy: {
-      createdAt: "desc"
+      createdAt: "desc",
     },
     where: {
       profileId: profileId,
-      active: true
+      active: true,
     },
     select: {
       id: true,
       namaBisnis: true,
-      profileId: true
+      profileId: true,
     },
   });
 
-  return data
+  return data;
 }

src/app_modules/katalog/portofolio/fun/get/get_one_portofolio.ts

@@ -29,6 +29,7 @@ export async function portofolio_getOneById(portoId: string) {
       Portofolio_MediaSosial: true,
       Profile: {
         select: {
+          userId: true,
           User: {
             select: {
               id: true,

src/app_modules/katalog/portofolio/index.ts

@@ -1,11 +1,10 @@
 import CreatePortofolio from "./create/view";
 import CreatePortofolioLayout from "./create/layout";
-import ListPortofolioView from "./list_view/view";
+import PortofolioLayout from "./ui/ui_layout";
-import PortofolioLayout from "./main/layout";
+import Portofolio_UiDetail from "./ui/ui_detail_portofolio";
-import ViewPortofolio from "./main/view";
+import Portofolio_EditDataBisnis from "./edit/data/ui_edit_data";
-import Portofolio_EditDataBisnis from "./edit/data";
+import Portofolio_EditLogoBisnis from "./edit/logo/ui_edit_logo";
-import Portofolio_EditLogoBisnis from "./edit/logo";
+import Portofolio_EditMedsosBisnis from "./edit/medsos/ui_edit_medsos";
-import Portofolio_EditMedsosBisnis from "./edit/medsos";
 import LayoutPortofolio_EditBisnis from "./edit/layout";
 import LayoutPortofolio_EditDataBisnis from "./edit/data/layout";
 import LayoutPortofolio_EditLogoBisnis from "./edit/logo/layout";
@@ -14,9 +13,8 @@ import LayoutPortofolio_EditMedsosBisnis from "./edit/medsos/layout";
 export {
   CreatePortofolio,
   CreatePortofolioLayout,
-  ListPortofolioView,
   PortofolioLayout,
-  ViewPortofolio,
+  Portofolio_UiDetail as ViewPortofolio,
   Portofolio_EditDataBisnis,
   Portofolio_EditLogoBisnis,
   Portofolio_EditMedsosBisnis,
@@ -25,3 +23,5 @@ export {
   LayoutPortofolio_EditLogoBisnis,
   LayoutPortofolio_EditMedsosBisnis,
 };
+export { Portofolio_ViewListDetail } from "./view/view_list_detail_portofolio";
+

src/app_modules/katalog/portofolio/list_view/view.tsx

@@ -1,139 +0,0 @@
-"use client";
-import {
-  ActionIcon,
-  Box,
-  Center,
-  Grid,
-  Group,
-  Loader,
-  Paper,
-  ScrollArea,
-  SimpleGrid,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
-import { useState } from "react";
-import _ from "lodash";
-import {
-  IconCaretRight,
-  IconCaretRightFilled,
-  IconChevronRight,
-  IconCirclePlus,
-  IconEyeCheck,
-  IconPencilPlus,
-} from "@tabler/icons-react";
-
-import { MODEL_PORTOFOLIO_Lama } from "@/app_modules/model_global/portofolio";
-import { useRouter } from "next/navigation";
-import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
-import { Warna } from "@/app/lib/warna";
-import { MODEL_PROFILE } from "../../profile/model/interface";
-import { MODEL_PORTOFOLIO } from "../model/interface";
-
-export default function ListPortofolioView({
-  listPorto,
-  profile,
-  userLoginId,
-}: {
-  listPorto: MODEL_PORTOFOLIO[];
-  profile: MODEL_PROFILE;
-  userLoginId: string;
-}) {
-  const router = useRouter();
-  // const [porto, setPorto] = useState(listPorto);
-  const [loading, setLoading] = useState(false);
-  const [loadingPorto, setLoadingPorto] = useState(false);
-  const [idPorto, setIdPorto] = useState("");
-
-  return (
-    <>
-      {/* <pre>{JSON.stringify(porto, null, 2)}</pre> */}
-      <Paper p={"md"} shadow="lg" withBorder bg={"gray.1"}>
-        <Stack spacing={"sm"}>
-          <Group position="apart">
-            <ActionIcon variant="transparent" disabled></ActionIcon>
-            <Title order={4}>Portofolio</Title>
-            {profile?.User.id === userLoginId ? (
-              <ActionIcon
-                loading={loading ? true : false}
-                variant="transparent"
-                onClick={() => {
-                  router.push(RouterPortofolio.create + `${profile.id}`);
-                  setLoading(true);
-                }}
-              >
-                <IconPencilPlus color={Warna.biru} />
-              </ActionIcon>
-            ) : (
-              <ActionIcon variant="transparent" disabled></ActionIcon>
-            )}
-          </Group>
-          <Box
-            h={
-              _.isEmpty(listPorto)
-                ? 50
-                : listPorto.length === 1
-                ? 100
-                : listPorto.length === 2
-                ? 150
-                : 200
-            }
-          >
-            <ScrollArea h={"100%"} scrollbarSize={10}>
-              {_.isEmpty(listPorto) ? (
-                <Center>
-                  <Text fs={"italic"} fz={"xs"} c={"gray"}>
-                    - Belum Ada Portofolio -
-                  </Text>
-                </Center>
-              ) : (
-                <SimpleGrid
-                  cols={4}
-                  spacing="md"
-                  breakpoints={[
-                    { maxWidth: "md", cols: 3, spacing: "md" },
-                    { maxWidth: "sm", cols: 2, spacing: "sm" },
-                    { maxWidth: "xs", cols: 1, spacing: "sm" },
-                  ]}
-                >
-                  {listPorto.map((e, i) => (
-                    <Paper
-                      shadow="sm"
-                      key={i}
-                      bg={"gray.5"}
-                      radius={"md"}
-                      onClick={() => {
-                        setIdPorto(e?.id);
-                        setLoadingPorto(true);
-                        router.push(`/dev/portofolio/main/${e?.id}/`);
-                      }}
-                    >
-                      <Grid align="center" p={"sm"}>
-                        <Grid.Col span={"auto"}>
-                          <Text fw={"bold"} lineClamp={1}>
-                            {e?.namaBisnis}
-                          </Text>
-                        </Grid.Col>
-                        <Grid.Col span={"content"}>
-                          <Stack>
-                            {idPorto === e?.id && loadingPorto ? (
-                              <Loader color="gray" size={25} />
-                            ) : (
-                              <IconCaretRight color="black" size={25} />
-                            )}
-                          </Stack>
-                        </Grid.Col>
-                      </Grid>
-                    </Paper>
-                  ))}
-                </SimpleGrid>
-              )}
-            </ScrollArea>
-          </Box>
-        </Stack>
-      </Paper>
-    </>
-  );
-}

src/app_modules/katalog/portofolio/main/layout.tsx

@@ -1,114 +0,0 @@
-"use client";
-
-import {
-  ActionIcon,
-  AppShell,
-  Button,
-  Group,
-  Header,
-  Modal,
-  Stack,
-  Title,
-} from "@mantine/core";
-import HeaderTransparent from "../../component/header_transparent";
-
-import { useRouter } from "next/navigation";
-import { IconArrowLeft, IconChevronLeft, IconEdit } from "@tabler/icons-react";
-import ComponentKatalog_HeaderTamplate from "../../component/header_tamplate";
-import { title } from "process";
-import { useDisclosure } from "@mantine/hooks";
-import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
-import { useState } from "react";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
-
-export default function PortofolioLayout({
-  children,
-  portoId,
-  userLoginId,
-  authorId,
-}: {
-  children: any;
-  portoId: any;
-  userLoginId: string;
-  authorId: string;
-}) {
-  const router = useRouter();
-  const [opened, { open, close }] = useDisclosure(false);
-  const [loadingData, setLoadingData] = useState(false);
-  const [loadingLogo, setLoadingLogo] = useState(false);
-  const [loadingMedia, setLoadingMedia] = useState(false);
-
-  return (
-    <>
-      <AppComponentGlobal_LayoutTamplate
-        header={
-          <Header height={50} sx={{ borderStyle: "none" }}>
-            <Group h={50} position="apart" px={"md"}>
-              <ActionIcon
-                variant="transparent"
-                onClick={() => {
-                  router.back();
-                }}
-              >
-                <IconChevronLeft />
-              </ActionIcon>
-              <Title order={5}>Detail Portofolio</Title>
-              {userLoginId === authorId ? (
-                <ActionIcon variant="transparent" onClick={() => open()}>
-                  <IconEdit />
-                </ActionIcon>
-              ) : (
-                <ActionIcon disabled variant="transparent"></ActionIcon>
-              )}
-            </Group>
-          </Header>
-        }
-      >
-        <Modal opened={opened} onClose={close} centered withCloseButton={false}>
-          <Stack>
-            <Title order={6}>Anda ingin mengupdate Detail Bisnis ?</Title>
-            <Button
-              radius={"xl"}
-              variant="outline"
-              loaderPosition="center"
-              loading={loadingData ? true : false}
-              onClick={() => {
-                setLoadingData(true);
-                router.push(RouterPortofolio.edit_data_bisnis + `${portoId}`);
-              }}
-            >
-              Data Bisnis
-            </Button>
-            <Button
-              radius={"xl"}
-              variant="outline"
-              color="green"
-              loaderPosition="center"
-              loading={loadingLogo ? true : false}
-              onClick={() => {
-                setLoadingLogo(true);
-                router.push(RouterPortofolio.edit_logo_bisnis + `${portoId}`);
-              }}
-            >
-              Logo Bisnis
-            </Button>
-            <Button
-              radius={"xl"}
-              variant="outline"
-              color="orange"
-              loaderPosition="center"
-              loading={loadingMedia ? true : false}
-              onClick={() => {
-                setLoadingMedia(true);
-                router.push(RouterPortofolio.edit_medsos_bisnis + `${portoId}`);
-              }}
-            >
-              Media Sosial
-            </Button>
-          </Stack>
-        </Modal>
-        {children}
-      </AppComponentGlobal_LayoutTamplate>
-    </>
-  );
-}

src/app_modules/katalog/portofolio/main/view.tsx

@@ -1,241 +0,0 @@
-"use client";
-
-import {
-  RouterPortofolio,
-  RouterProfile,
-} from "@/app/lib/router_hipmi/router_katalog";
-import { Warna } from "@/app/lib/warna";
-import { MODEL_PORTOFOLIO_OLD } from "@/app_modules/model_global/portofolio";
-import {
-  AspectRatio,
-  Box,
-  Button,
-  Center,
-  Grid,
-  Group,
-  Image,
-  Modal,
-  Paper,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
-import {
-  IconBrandFacebook,
-  IconBrandInstagram,
-  IconBrandTiktok,
-  IconBrandTwitter,
-  IconBrandYoutube,
-  IconBuilding,
-  IconBuildingSkyscraper,
-  IconListDetails,
-  IconMapPin,
-  IconNotes,
-  IconPhoneCall,
-  IconPinned,
-  IconTrash,
-} from "@tabler/icons-react";
-import { redirect, useRouter } from "next/navigation";
-import { useState } from "react";
-import { MODEL_PORTOFOLIO } from "../model/interface";
-import { useDisclosure, useShallowEffect } from "@mantine/hooks";
-import { portofolio_getOneById } from "../fun/get/get_one_portofolio";
-import _ from "lodash";
-import { Portofolio_funDeletePortofolioById } from "../fun/delete/fun_delete_by_id";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
-
-export default function ViewPortofolio({
-  dataPorto,
-  userLoginId,
-}: {
-  dataPorto: MODEL_PORTOFOLIO;
-  userLoginId: string;
-}) {
-  const router = useRouter();
-  const [porto, setPorto] = useState(dataPorto);
-  const [opened, { open, close }] = useDisclosure(false);
-  const [loadingDel, setLoadingDel] = useState(false);
-
-  return (
-    <>
-      {/* <pre>{JSON.stringify(porto, null, 2)}</pre> */}
-      <Stack>
-        <Paper p={"sm"} withBorder shadow="lg">
-          <Title order={6}>Data Bisnis</Title>
-          <Stack p={"sm"}>
-            <Grid>
-              <Grid.Col span={2}>
-                <IconBuildingSkyscraper />
-              </Grid.Col>
-              <Grid.Col span={"auto"}>
-                <Text>{dataPorto?.namaBisnis}</Text>
-              </Grid.Col>
-            </Grid>
-            <Grid>
-              <Grid.Col span={2}>
-                <IconPhoneCall />
-              </Grid.Col>
-              <Grid.Col span={"auto"}>
-                <Text>+{dataPorto?.tlpn}</Text>
-              </Grid.Col>
-            </Grid>
-            <Grid>
-              <Grid.Col span={2}>
-                <IconMapPin />
-              </Grid.Col>
-              <Grid.Col span={"auto"}>
-                <Text>{dataPorto?.alamatKantor}</Text>
-              </Grid.Col>
-            </Grid>
-            <Grid>
-              <Grid.Col span={2}>
-                <IconListDetails />
-              </Grid.Col>
-              <Grid.Col span={"auto"}>
-                <Text>{dataPorto?.MasterBidangBisnis.name}</Text>
-              </Grid.Col>
-            </Grid>
-            <Grid>
-              <Grid.Col span={2}>
-                <IconPinned />
-              </Grid.Col>
-              <Grid.Col span={"auto"}>
-                <Text>{dataPorto?.deskripsi}</Text>
-              </Grid.Col>
-            </Grid>
-          </Stack>
-        </Paper>
-        <Paper p={"sm"} withBorder shadow="lg">
-          <Title order={6}>Logo Bisnis</Title>
-
-          <AspectRatio ratio={1 / 1}>
-            <Paper>
-              <Image
-                alt="Foto"
-                src={RouterPortofolio.api_logo_porto + `${dataPorto?.logoId}`}
-              />
-            </Paper>
-          </AspectRatio>
-        </Paper>
-        <Paper p={"sm"} withBorder shadow="lg">
-          <Title order={6}>Media Sosial Bisnis</Title>
-
-          <Stack p={"sm"}>
-            <Grid>
-              <Grid.Col span={2}>
-                <IconBrandFacebook />
-              </Grid.Col>
-              <Grid.Col span={"auto"}>
-                {dataPorto?.Portofolio_MediaSosial.facebook ? (
-                  <Text>{dataPorto?.Portofolio_MediaSosial.facebook}</Text>
-                ) : (
-                  "-"
-                )}
-              </Grid.Col>
-            </Grid>
-            <Grid>
-              <Grid.Col span={2}>
-                <IconBrandInstagram />
-              </Grid.Col>
-              <Grid.Col span={"auto"}>
-                {dataPorto?.Portofolio_MediaSosial.instagram ? (
-                  <Text>{dataPorto?.Portofolio_MediaSosial.instagram}</Text>
-                ) : (
-                  "-"
-                )}
-              </Grid.Col>
-            </Grid>
-            <Grid>
-              <Grid.Col span={2}>
-                <IconBrandTiktok />
-              </Grid.Col>
-              <Grid.Col span={"auto"}>
-                {dataPorto?.Portofolio_MediaSosial.tiktok ? (
-                  <Text>{dataPorto?.Portofolio_MediaSosial.tiktok}</Text>
-                ) : (
-                  "-"
-                )}
-              </Grid.Col>
-            </Grid>
-            <Grid>
-              <Grid.Col span={2}>
-                <IconBrandTwitter />
-              </Grid.Col>
-              <Grid.Col span={"auto"}>
-                {dataPorto?.Portofolio_MediaSosial.twitter ? (
-                  <Text>{dataPorto?.Portofolio_MediaSosial.twitter}</Text>
-                ) : (
-                  "-"
-                )}
-              </Grid.Col>
-            </Grid>
-            <Grid>
-              <Grid.Col span={2}>
-                <IconBrandYoutube />
-              </Grid.Col>
-              <Grid.Col span={"auto"}>
-                {dataPorto?.Portofolio_MediaSosial.youtube ? (
-                  <Text>{dataPorto?.Portofolio_MediaSosial.youtube}</Text>
-                ) : (
-                  "-"
-                )}
-              </Grid.Col>
-            </Grid>
-          </Stack>
-        </Paper>
-        {userLoginId === dataPorto?.Profile?.User?.id ? (
-          <Button
-            radius={"xl"}
-            bg={"red"}
-            color="red"
-            onClick={() => {
-              open();
-            }}
-          >
-            <IconTrash />
-          </Button>
-        ) : (
-          ""
-        )}
-      </Stack>
-
-      <Modal opened={opened} onClose={close} centered withCloseButton={false}>
-        <Stack>
-          <Title order={6}>Anda yakin menghapus portofolio ini ?</Title>
-          <Group position="center">
-            <Button radius={"xl"} onClick={() => close()}>
-              Batal
-            </Button>
-            <Button
-              radius={"xl"}
-              color="red"
-              loaderPosition="center"
-              loading={loadingDel ? true : false}
-              onClick={() => onDelete(router, dataPorto as any, setLoadingDel)}
-            >
-              Hapus
-            </Button>
-          </Group>
-        </Stack>
-      </Modal>
-    </>
-  );
-}
-
-async function onDelete(
-  router: AppRouterInstance,
-  dataPorto: MODEL_PORTOFOLIO,
-  setLoadingDel: any
-) {
-  await Portofolio_funDeletePortofolioById(dataPorto).then((res) => {
-    if (res.status === 200) {
-      setLoadingDel(true);
-      ComponentGlobal_NotifikasiBerhasil(res.message);
-      router.back();
-    } else {
-      ComponentGlobal_NotifikasiGagal(res.message);
-    }
-  });
-}

src/app_modules/katalog/portofolio/ui/ui_detail_data.tsx

@@ -0,0 +1,75 @@
+import { Paper, Title, Stack, Grid, Text } from "@mantine/core";
+import {
+  IconBuildingSkyscraper,
+  IconPhoneCall,
+  IconMapPin,
+  IconListDetails,
+  IconPinned,
+} from "@tabler/icons-react";
+import { MODEL_PORTOFOLIO } from "../model/interface";
+import { AccentColor } from "@/app_modules/component_global/color/color_pallet";
+
+export function Portofolio_UiDetailData({
+  dataPorto,
+}: {
+  dataPorto: MODEL_PORTOFOLIO;
+}) {
+  return (
+    <>
+      <Paper
+        p={"sm"}
+        style={{
+          backgroundColor: AccentColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          borderRadius: "10px ",
+          padding: "15px",
+          color: "white",
+        }}
+      >
+        <Title order={6}>Data Bisnis</Title>
+        <Stack p={"sm"}>
+          <Grid>
+            <Grid.Col span={2}>
+              <IconBuildingSkyscraper />
+            </Grid.Col>
+            <Grid.Col span={"auto"}>
+              <Text>{dataPorto?.namaBisnis}</Text>
+            </Grid.Col>
+          </Grid>
+          <Grid>
+            <Grid.Col span={2}>
+              <IconPhoneCall />
+            </Grid.Col>
+            <Grid.Col span={"auto"}>
+              <Text>+{dataPorto?.tlpn}</Text>
+            </Grid.Col>
+          </Grid>
+          <Grid>
+            <Grid.Col span={2}>
+              <IconMapPin />
+            </Grid.Col>
+            <Grid.Col span={"auto"}>
+              <Text>{dataPorto?.alamatKantor}</Text>
+            </Grid.Col>
+          </Grid>
+          <Grid>
+            <Grid.Col span={2}>
+              <IconListDetails />
+            </Grid.Col>
+            <Grid.Col span={"auto"}>
+              <Text>{dataPorto?.MasterBidangBisnis.name}</Text>
+            </Grid.Col>
+          </Grid>
+          <Grid>
+            <Grid.Col span={2}>
+              <IconPinned />
+            </Grid.Col>
+            <Grid.Col span={"auto"}>
+              <Text>{dataPorto?.deskripsi}</Text>
+            </Grid.Col>
+          </Grid>
+        </Stack>
+      </Paper>
+    </>
+  );
+}

src/app_modules/katalog/portofolio/ui/ui_detail_logo.tsx

@@ -0,0 +1,36 @@
+import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
+import { Paper, Title, AspectRatio, Image } from "@mantine/core";
+import { MODEL_PORTOFOLIO } from "../model/interface";
+import { AccentColor } from "@/app_modules/component_global/color/color_pallet";
+
+export function Portofolio_UiDetailLogo({
+  dataPorto,
+}: {
+  dataPorto: MODEL_PORTOFOLIO;
+}) {
+  return (
+    <>
+      <Paper
+        p={"sm"}
+        style={{
+          backgroundColor: AccentColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          borderRadius: "10px ",
+          padding: "15px",
+          color: "white",
+        }}
+      >
+        <Title mb={"lg"} order={6}>Logo Bisnis</Title>
+
+        <AspectRatio ratio={1 / 1}>
+          <Paper>
+            <Image
+              alt="Foto"
+              src={RouterPortofolio.api_logo_porto + `${dataPorto?.logoId}`}
+            />
+          </Paper>
+        </AspectRatio>
+      </Paper>
+    </>
+  );
+}

src/app_modules/katalog/portofolio/ui/ui_detail_media.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { Paper, Title, Stack, Grid, Text } from "@mantine/core";
+import {
+  IconBrandFacebook,
+  IconBrandInstagram,
+  IconBrandTiktok,
+  IconBrandTwitter,
+  IconBrandYoutube,
+} from "@tabler/icons-react";
+import { MODEL_PORTOFOLIO } from "../model/interface";
+import { AccentColor } from "@/app_modules/component_global/color/color_pallet";
+
+export function Portofolio_UiSosialMedia({
+  dataPorto,
+}: {
+  dataPorto: MODEL_PORTOFOLIO;
+}) {
+  return (
+    <>
+      <Paper
+        p={"sm"}
+        style={{
+          backgroundColor: AccentColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          borderRadius: "10px ",
+          padding: "15px",
+          color: "white",
+        }}
+      >
+        <Title order={6}>Media Sosial Bisnis</Title>
+
+        <Stack p={"sm"}>
+          <Grid>
+            <Grid.Col span={2}>
+              <IconBrandFacebook />
+            </Grid.Col>
+            <Grid.Col span={"auto"}>
+              {dataPorto?.Portofolio_MediaSosial.facebook ? (
+                <Text>{dataPorto?.Portofolio_MediaSosial.facebook}</Text>
+              ) : (
+                "-"
+              )}
+            </Grid.Col>
+          </Grid>
+          <Grid>
+            <Grid.Col span={2}>
+              <IconBrandInstagram />
+            </Grid.Col>
+            <Grid.Col span={"auto"}>
+              {dataPorto?.Portofolio_MediaSosial.instagram ? (
+                <Text>{dataPorto?.Portofolio_MediaSosial.instagram}</Text>
+              ) : (
+                "-"
+              )}
+            </Grid.Col>
+          </Grid>
+          <Grid>
+            <Grid.Col span={2}>
+              <IconBrandTiktok />
+            </Grid.Col>
+            <Grid.Col span={"auto"}>
+              {dataPorto?.Portofolio_MediaSosial.tiktok ? (
+                <Text>{dataPorto?.Portofolio_MediaSosial.tiktok}</Text>
+              ) : (
+                "-"
+              )}
+            </Grid.Col>
+          </Grid>
+          <Grid>
+            <Grid.Col span={2}>
+              <IconBrandTwitter />
+            </Grid.Col>
+            <Grid.Col span={"auto"}>
+              {dataPorto?.Portofolio_MediaSosial.twitter ? (
+                <Text>{dataPorto?.Portofolio_MediaSosial.twitter}</Text>
+              ) : (
+                "-"
+              )}
+            </Grid.Col>
+          </Grid>
+          <Grid>
+            <Grid.Col span={2}>
+              <IconBrandYoutube />
+            </Grid.Col>
+            <Grid.Col span={"auto"}>
+              {dataPorto?.Portofolio_MediaSosial.youtube ? (
+                <Text>{dataPorto?.Portofolio_MediaSosial.youtube}</Text>
+              ) : (
+                "-"
+              )}
+            </Grid.Col>
+          </Grid>
+        </Stack>
+      </Paper>
+    </>
+  );
+}

src/app_modules/katalog/portofolio/ui/ui_detail_portofolio.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import {
+  Stack
+} from "@mantine/core";
+import { ComponentPortofolio_ButtonDelete } from "../component/button_delete";
+import { MODEL_PORTOFOLIO } from "../model/interface";
+import { Portofolio_UiDetailData } from "./ui_detail_data";
+import { Portofolio_UiDetailLogo } from "./ui_detail_logo";
+import { Portofolio_UiSosialMedia } from "./ui_detail_media";
+
+export default function Portofolio_UiDetail({
+  dataPorto,
+  userLoginId,
+}: {
+  dataPorto: MODEL_PORTOFOLIO;
+  userLoginId: string;
+}) {
+
+  return (
+    <>
+      <Stack mb={"lg"}>
+        <Portofolio_UiDetailData dataPorto={dataPorto} />
+        <Portofolio_UiDetailLogo dataPorto={dataPorto} />
+        <Portofolio_UiSosialMedia dataPorto={dataPorto} />
+
+        <ComponentPortofolio_ButtonDelete
+          dataPorto={dataPorto}
+          userLoginId={userLoginId}
+        />
+      </Stack>
+    </>
+  );
+}

src/app_modules/katalog/portofolio/ui/ui_layout.tsx

@@ -0,0 +1,36 @@
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import { ComponentPortofolio_ButtonMore } from "../component/button_more";
+
+export default function PortofolioLayout({
+  children,
+  portoId,
+  userLoginId,
+  authorId,
+}: {
+  children: any;
+  portoId: any;
+  userLoginId: string;
+  authorId: string;
+}) {
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={
+          <UIGlobal_LayoutHeaderTamplate
+            title="Detail Portofolio"
+            customButtonRight={
+              <ComponentPortofolio_ButtonMore
+                portoId={portoId}
+                authorId={authorId}
+                userLoginId={userLoginId}
+              />
+            }
+          />
+        }
+      >
+        {children}
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}

src/app_modules/katalog/portofolio/ui/ui_list_detail_portofolio.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import ComponentGlobal_UI_Loader from "@/app_modules/component_global/ui/ui_loader";
+import { Box, Center } from "@mantine/core";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
+import { ComponentPortofolio_DaftarBoxView } from "../component/card_view_daftar";
+import { portofolio_funGetAllDaftarByid } from "../fun/get/get_all_portofolio";
+import { MODEL_PORTOFOLIO } from "../model/interface";
+
+export function Portofolio_UiListDetail({
+  dataPortofolio,
+  profileId,
+}: {
+  dataPortofolio: MODEL_PORTOFOLIO[];
+  profileId: string;
+}) {
+  const [data, setData] = useState(dataPortofolio);
+  const [activePage, setActivePage] = useState(1);
+
+  return (
+    <>
+      <Box py={5}>
+        <ScrollOnly
+          height="90vh"
+          renderLoading={() => (
+            <Center mt={"lg"}>
+              <ComponentGlobal_UI_Loader />
+            </Center>
+          )}
+          data={data}
+          setData={setData}
+          moreData={async () => {
+            const loadData = await portofolio_funGetAllDaftarByid({
+              profileId,
+              page: activePage + 1,
+            });
+            setActivePage((val) => val + 1);
+
+            return loadData;
+          }}
+        >
+          {(item) => <ComponentPortofolio_DaftarBoxView data={item} />}
+        </ScrollOnly>
+      </Box>
+    </>
+  );
+}

src/app_modules/katalog/portofolio/view/view_list_detail_portofolio.tsx

@@ -0,0 +1,23 @@
+import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import React from "react";
+import { Portofolio_UiListDetail } from "../ui/ui_list_detail_portofolio";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import { MODEL_PORTOFOLIO } from "../model/interface";
+
+export async function Portofolio_ViewListDetail({
+  dataPortofolio,
+  profileId
+}: {
+  dataPortofolio: MODEL_PORTOFOLIO[]
+  profileId: string
+}) {
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Daftar Portofolio" />}
+      >
+        <Portofolio_UiListDetail dataPortofolio={dataPortofolio} profileId={profileId} />
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}