#style: UI Katalog

Deskripsi:
- UI Katalog selesai
- UI Portofolio selesai
- UI Profile selesa
## NO Isuuee

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}) {
-    return<>
-    <LayoutProfile_UpdateFotoBackground>{children}</LayoutProfile_UpdateFotoBackground>
+export default async function Layout({
+  children,
+}: {
+  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}}) {
-    let profileId = params.id 
-    return <>
-    <UploadFotoProfileLayout profileId={profileId} >{children}</UploadFotoProfileLayout>
+export default async function Layout({
+  children,
+}: {
+  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/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/zCoba/page.tsx

@@ -1,5 +1,5 @@
 import ComponentGlobal_HeaderTamplate from "@/app_modules/component_global/header_tamplate";
-import LayoutGlobal_UI_Tamplate 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/component_global/splash/splash_global.tsx

@@ -1,20 +1,20 @@
 "use client";
 
 import { Stack, Loader, ActionIcon, ThemeIcon } from "@mantine/core";
-import LayoutGlobal_UI_Tamplate 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 (
     <>
-      <LayoutGlobal_UI_Tamplate>
+      <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>
-      </LayoutGlobal_UI_Tamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/component_global/ui/ui_drawer.tsx

@@ -1,16 +1,16 @@
 import {
-  Drawer,
-  Stack,
-  Group,
   ActionIcon,
+  Drawer,
+  Group,
   SimpleGrid,
+  Stack,
   Text,
-  Box,
 } from "@mantine/core";
-import { IconX, IconEdit } from "@tabler/icons-react";
-import { MainColor, AccentColor } from "../color/color_pallet";
-import React from "react";
+import { IconX } from "@tabler/icons-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;
@@ -25,9 +25,19 @@ export default function ComponentGlobal_UI_Drawer({
 }: {
   opened: boolean;
   close: () => void;
-  component: MODEL_DRAWER[] | 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
@@ -69,12 +79,20 @@ export default function ComponentGlobal_UI_Drawer({
                 <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 align="center" color="white">
-                  {e.name}
+                  {e?.name}
                 </Text>
               </Stack>
             ))}

src/app_modules/component_global/ui/ui_header_tamplate.tsx

@@ -14,7 +14,7 @@ import { useRouter } from "next/navigation";
 import React, { useState } from "react";
 import { AccentColor, MainColor } from "../color/color_pallet";
 
-export default function LayoutGlobal_UI_HeaderTamplate({
+export default function UIGlobal_LayoutHeaderTamplate({
   title,
   posotion,
   // left button

src/app_modules/component_global/ui/ui_layout_tamplate.tsx

@@ -11,7 +11,7 @@ import {
 import { AccentColor, MainColor } from "../color/color_pallet";
 import React from "react";
 
-export default function LayoutGlobal_UI_Tamplate({
+export default function UIGlobal_LayoutTamplate({
   children,
   header,
   footer,

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

src/app_modules/forum/detail/detail_report_komentar.tsx

@@ -1,5 +1,5 @@
-import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import 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";
 
 
@@ -10,11 +10,11 @@ export default function Forum_DetailReportKomentar({
 }) {
   return (
     <>
-      <LayoutGlobal_UI_Tamplate
-        header={<LayoutGlobal_UI_HeaderTamplate title="Report Komentar" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Report Komentar" />}
       >
         {<ComponentForum_UiDetailReportKomentar dataKomentar={dataKomentar} />}
-      </LayoutGlobal_UI_Tamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/forum/detail/detail_report_posting.tsx

@@ -1,5 +1,5 @@
-import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import { Stack, Text } from "@mantine/core";
 import { ComponentForum_UiDetailReportPosting } from "../component/detail_component/ui_report_posting";
 
@@ -10,11 +10,11 @@ export default function Forum_DetailReportPosting({
 }) {
   return (
     <>
-      <LayoutGlobal_UI_Tamplate
-        header={<LayoutGlobal_UI_HeaderTamplate title="Report Posting" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Report Posting" />}
       >
         <ComponentForum_UiDetailReportPosting dataPosting={dataPosting} />
-      </LayoutGlobal_UI_Tamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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 LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_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 (
     <>
-      <LayoutGlobal_UI_Tamplate
-        header={<LayoutGlobal_UI_HeaderTamplate title="Postingan" posotion={"left"} />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Postingan" posotion={"left"} />}
       >
         {children}
-      </LayoutGlobal_UI_Tamplate>
+      </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 LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_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 (
     <>
-      <LayoutGlobal_UI_Tamplate
-        header={<LayoutGlobal_UI_HeaderTamplate title="Edit Postingan" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Edit Postingan" />}
       >
         {children}
-      </LayoutGlobal_UI_Tamplate>
+      </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 LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_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 (
     <>
-      <LayoutGlobal_UI_Tamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <LayoutGlobal_UI_HeaderTamplate
+          <UIGlobal_LayoutHeaderTamplate
             title={`${username}`}
             iconLeft={<IconX />}
           />
         }
       >
         {children}
-      </LayoutGlobal_UI_Tamplate>
+      </UIGlobal_LayoutTamplate>
 
       {/* <AppComponentGlobal_LayoutTamplate
         header={

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 LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_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 (
     <>
-      <LayoutGlobal_UI_Tamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <LayoutGlobal_UI_HeaderTamplate
+          <UIGlobal_LayoutHeaderTamplate
             title="FORUM"
             iconRight={
               <ActionIcon
@@ -80,7 +80,7 @@ export default function LayoutForum_Main({
         }
       >
         {children}
-      </LayoutGlobal_UI_Tamplate>
+      </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 LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_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 (
     <>
-      <LayoutGlobal_UI_Tamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <LayoutGlobal_UI_HeaderTamplate title="Mengumpulkan Informasi Komentar" />
+          <UIGlobal_LayoutHeaderTamplate title="Mengumpulkan Informasi Komentar" />
         }
       >
         {children}
-      </LayoutGlobal_UI_Tamplate>
+      </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 LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_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 (
     <>
-      <LayoutGlobal_UI_Tamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <LayoutGlobal_UI_HeaderTamplate title="Mengumpulkan Informasi Posting" />
+          <UIGlobal_LayoutHeaderTamplate title="Mengumpulkan Informasi Posting" />
         }
       >
         {children}
-      </LayoutGlobal_UI_Tamplate>
+      </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 LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import {
   Avatar,
   Center,

src/app_modules/home/component/button_header.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+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";

src/app_modules/home/view_home.tsx

@@ -1,5 +1,5 @@
-import LayoutGlobal_UI_HeaderTamplate from "../component_global/ui/ui_header_tamplate";
-import LayoutGlobal_UI_Tamplate from "../component_global/ui/ui_layout_tamplate";
+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,
@@ -19,9 +19,9 @@ export default function HomeView({
 }) {
   return (
     <>
-      <LayoutGlobal_UI_Tamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <LayoutGlobal_UI_HeaderTamplate
+          <UIGlobal_LayoutHeaderTamplate
             title="HIPMI"
             customButtonLeft={
               <ComponentHome_ButtonHeaderLeft dataUser={dataUser} />
@@ -37,7 +37,7 @@ export default function HomeView({
         footer={<Home_UiFooter dataUser={dataUser} />}
       >
         <Home_UiView dataJob={dataJob} dataUser={dataUser} />
-      </LayoutGlobal_UI_Tamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/job/create/layout.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_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 (
     <>
-      <LayoutGlobal_UI_Tamplate
-        header={<LayoutGlobal_UI_HeaderTamplate title="Tambah Job" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Tambah Job" />}
       >
         {children}
-      </LayoutGlobal_UI_Tamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -1,7 +1,7 @@
 "use client";
 
-import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_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 (
     <>
-      <LayoutGlobal_UI_Tamplate
-        header={<LayoutGlobal_UI_HeaderTamplate title="Detail Arsip" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Arsip" />}
       >
         {children}
-      </LayoutGlobal_UI_Tamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -17,8 +17,8 @@ import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
 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 LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_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,9 +48,9 @@ export default function LayoutJob_DetailDraft({
 
   return (
     <>
-      <LayoutGlobal_UI_Tamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <LayoutGlobal_UI_HeaderTamplate
+          <UIGlobal_LayoutHeaderTamplate
             title="Detail Draft"
             iconRight={
               <ActionIcon variant="transparent" onClick={() => open()}>
@@ -62,7 +62,7 @@ export default function LayoutJob_DetailDraft({
         }
       >
         {children}
-      </LayoutGlobal_UI_Tamplate>
+      </UIGlobal_LayoutTamplate>
 
       <ComponentGlobal_UI_Drawer
         opened={opened}

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

@@ -1,7 +1,7 @@
 "use client";
 
-import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_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 (
     <>
-      <LayoutGlobal_UI_Tamplate
-        header={<LayoutGlobal_UI_HeaderTamplate title="Detail Job" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Job" />}
       >
         {children}
-      </LayoutGlobal_UI_Tamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -1,7 +1,7 @@
 "use client";
 
-import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_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 (
     <>
-      <LayoutGlobal_UI_Tamplate
-        header={<LayoutGlobal_UI_HeaderTamplate title="Detail Publish" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Publish" />}
       >
         {children}
-      </LayoutGlobal_UI_Tamplate>
+      </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 LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_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 (
     <>
-      <LayoutGlobal_UI_Tamplate
-        header={<LayoutGlobal_UI_HeaderTamplate title="Detail Reject" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Reject" />}
       >
         {children}
-      </LayoutGlobal_UI_Tamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -1,7 +1,7 @@
 "use client";
 
-import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_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 (
     <>
-      <LayoutGlobal_UI_Tamplate
-        header={<LayoutGlobal_UI_HeaderTamplate title="Detail Review" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Review" />}
       >
         {children}
-      </LayoutGlobal_UI_Tamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/job/edit/layout.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_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 (
     <>
-      <LayoutGlobal_UI_Tamplate
-        header={<LayoutGlobal_UI_HeaderTamplate title="Edit Job" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Edit Job" />}
       >
         {children}
-      </LayoutGlobal_UI_Tamplate>
+      </UIGlobal_LayoutTamplate>
 
     </>
   );

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

src/app_modules/katalog/main/index.ts

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

src/app_modules/katalog/main/layout.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
-import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import 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_ButtonHeaderRight } from "../component/button_header_right";
 
 export default function KatalogLayout({
@@ -17,9 +17,9 @@ export default function KatalogLayout({
 }) {
   return (
     <>
-      <LayoutGlobal_UI_Tamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <LayoutGlobal_UI_HeaderTamplate
+          <UIGlobal_LayoutHeaderTamplate
             title="KATALOG"
             customButtonRight={
               <ComponentKatalog_ButtonHeaderRight
@@ -32,7 +32,7 @@ export default function KatalogLayout({
         }
       >
         {children}
-      </LayoutGlobal_UI_Tamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/katalog/main/view_katalog.tsx

@@ -1,33 +0,0 @@
-"use client";
-
-import Component_Logout from "@/app_modules/auth/logout/view";
-import {
-  Stack
-} from "@mantine/core";
-import { MODEL_PORTOFOLIO } from "../portofolio/model/interface";
-import { Portofolio_UiView } from "../portofolio/ui_portofolio";
-import { MODEL_PROFILE } from "../profile/model/interface";
-import { Profile_UiView } from "../profile/ui_profile";
-
-export default function KatalogView({
-  profile,
-  listPorto,
-  userLoginId,
-}: {
-  profile: MODEL_PROFILE;
-  listPorto: MODEL_PORTOFOLIO;
-  userLoginId: string;
-}) {
-  return (
-    <>
-      <Stack>
-        <Profile_UiView profile={profile as any} userLoginId={userLoginId} />
-        <Portofolio_UiView
-          listPorto={listPorto as any}
-          profile={profile}
-          userLoginId={userLoginId}
-        />
-      </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 { IconArrowLeft } from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-import ComponentKatalog_HeaderTamplate from "../../component/header_tamplate";
-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";
 
 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

@@ -20,7 +20,7 @@ import {
   Select,
   Stack,
   TextInput,
-  Textarea
+  Textarea,
 } from "@mantine/core";
 import { IconCamera } from "@tabler/icons-react";
 import _ from "lodash";
@@ -29,6 +29,11 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import ComponentKatalog_NotedBox from "../../component/noted_box";
 import funCreatePortofolio from "../fun/fun_create_portofolio";
+import ComponentGlobal_BoxInformation from "@/app_modules/component_global/box_information";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
 
 export default function CreatePortofolio({
   bidangBisnis,
@@ -63,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"
@@ -79,6 +89,11 @@ export default function CreatePortofolio({
             }}
           />
           <Select
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             label="Bidang Bisnis"
             placeholder="Pilih salah satu bidang bisnis"
@@ -94,6 +109,11 @@ export default function CreatePortofolio({
             }}
           />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             label="Alamat Kantor"
             placeholder="Alamat kantor"
@@ -106,6 +126,11 @@ export default function CreatePortofolio({
             }}
           />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             label="Nomor Telepon Kantor"
             placeholder="Nomor telepon kantor"
@@ -119,6 +144,11 @@ export default function CreatePortofolio({
           />
           <Stack spacing={5}>
             <Textarea
+              styles={{
+                label: {
+                  color: "white",
+                },
+              }}
               maxLength={150}
               autosize
               minRows={2}
@@ -141,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"} />
@@ -176,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>
@@ -191,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"
@@ -202,6 +237,11 @@ export default function CreatePortofolio({
             }}
           />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             label="Instagram"
             maxLength={100}
             placeholder="Instagram"
@@ -213,6 +253,11 @@ export default function CreatePortofolio({
             }}
           />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             label="Tiktok"
             maxLength={100}
             placeholder="Tiktok"
@@ -224,6 +269,11 @@ export default function CreatePortofolio({
             }}
           />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             label="Twitter"
             maxLength={100}
             placeholder="Twitter"
@@ -235,6 +285,11 @@ export default function CreatePortofolio({
             }}
           />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             label="Youtube"
             maxLength={100}
             placeholder="Youtube"
@@ -250,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={() => {
@@ -265,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 ComponentKatalog_HeaderTamplate from "@/app_modules/katalog/component/header_tamplate";
-import { AppShell } from "@mantine/core";
+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 React from "react";
 
 
@@ -13,11 +12,11 @@ export default function LayoutPortofolio_EditDataBisnis({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentKatalog_HeaderTamplate title="Edit Data Bisnis" />}
+      <UIGlobal_LayoutTamplate
+        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
-        header={<ComponentKatalog_HeaderTamplate title="Edit Logo Bisnis" />}
+      <UIGlobal_LayoutTamplate
+        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,
-  RouterProfile,
+  RouterPortofolio
 } 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 { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
+import { MODEL_PORTOFOLIO } from "../../model/interface";
 
 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 ComponentKatalog_HeaderTamplate from "@/app_modules/katalog/component/header_tamplate";
-import { AppShell } from "@mantine/core";
+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 React from "react";
 
 export default function LayoutPortofolio_EditMedsosBisnis({
@@ -12,11 +11,11 @@ export default function LayoutPortofolio_EditMedsosBisnis({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentKatalog_HeaderTamplate title="Edit Media Sosial" />}
+      <UIGlobal_LayoutTamplate
+        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 "./main/layout";
-import ViewPortofolio from "./main/view";
-import Portofolio_EditDataBisnis from "./edit/data";
-import Portofolio_EditLogoBisnis from "./edit/logo";
-import Portofolio_EditMedsosBisnis from "./edit/medsos";
+import PortofolioLayout from "./ui/ui_layout";
+import Portofolio_UiDetail from "./ui/ui_detail_portofolio";
+import Portofolio_EditDataBisnis from "./edit/data/ui_edit_data";
+import Portofolio_EditLogoBisnis from "./edit/logo/ui_edit_logo";
+import Portofolio_EditMedsosBisnis from "./edit/medsos/ui_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,138 +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 [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/ui_portofolio.tsx

@@ -1,141 +0,0 @@
-import { useRouter } from "next/navigation";
-import { MODEL_PROFILE } from "../profile/model/interface";
-import { MODEL_PORTOFOLIO } from "./model/interface";
-import { useState } from "react";
-import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
-import { Warna } from "@/app/lib/warna";
-import {
-  Paper,
-  Stack,
-  Group,
-  ActionIcon,
-  Title,
-  Box,
-  ScrollArea,
-  Center,
-  SimpleGrid,
-  Grid,
-  Loader,
-  Text,
-} from "@mantine/core";
-import { IconPencilPlus, IconCaretRight } from "@tabler/icons-react";
-import _ from "lodash";
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/component_global/color/color_pallet";
-import ComponentGlobal_UI_Loader from "@/app_modules/component_global/ui/ui_loader";
-
-export function Portofolio_UiView({
-  listPorto,
-  profile,
-  userLoginId,
-}: {
-  listPorto: MODEL_PORTOFOLIO[];
-  profile: MODEL_PROFILE;
-  userLoginId: string;
-}) {
-  const router = useRouter();
-  const [loading, setLoading] = useState(false);
-  const [loadingPorto, setLoadingPorto] = useState(false);
-  const [idPorto, setIdPorto] = useState("");
-  return (
-    <>
-      <Box
-        style={{
-          backgroundColor: AccentColor.darkblue,
-          border: `2px solid ${AccentColor.blue}`,
-          borderRadius: "10px ",
-          padding: "15px",
-          color: "white",
-        }}
-      >
-        <Stack spacing={"sm"}>
-          <Group position="apart">
-            <ActionIcon variant="transparent" disabled></ActionIcon>
-            <Title order={4}>Portofolio</Title>
-            {profile?.User.id === userLoginId ? (
-              <ActionIcon
-                variant="transparent"
-                onClick={() => {
-                  router.push(RouterPortofolio.create + `${profile.id}`);
-                  setLoading(true);
-                }}
-              >
-                {loading ? (
-                  <ComponentGlobal_UI_Loader />
-                ) : (
-                  <IconPencilPlus color={AccentColor.yellow} />
-                )}
-              </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>
-      </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>
+    </>
+  );
+}

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

@@ -1,27 +1,15 @@
-"use client";
 
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
-import ComponentGlobal_HeaderTamplate from "@/app_modules/component_global/header_tamplate";
-import {
-  ActionIcon,
-  AppShell,
-  Group,
-  Header,
-  Text,
-  Title,
-} from "@mantine/core";
-import { IconArrowLeft } from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 
 export default function ProfileLayout({ children }: { children: any }) {
-  const router = useRouter();
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentGlobal_HeaderTamplate title="Buat Profile" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Buat Profile" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -1,8 +1,12 @@
 "use client";
 
-import { myConsole } from "@/app/fun/my_console";
-import { ApiHipmi } from "@/app/lib/api";
-import { Warna } from "@/app/lib/warna";
+import { RouterHome } from "@/app/lib/router_hipmi/router_home";
+import ComponentGlobal_BoxInformation from "@/app_modules/component_global/box_information";
+import { AccentColor, MainColor } from "@/app_modules/component_global/color/color_pallet";
+import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
+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 {
   AspectRatio,
   Avatar,
@@ -17,25 +21,13 @@ import {
   Text,
   TextInput,
 } from "@mantine/core";
-import { useAtom } from "jotai";
+import { IconAt, IconCamera, IconUpload } from "@tabler/icons-react";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import toast from "react-simple-toasts";
-import funCreateNewProfile from "../fun/fun_create_profile";
-import { IconAt, IconCamera, IconUpload } from "@tabler/icons-react";
-import ComponentKatalog_NotedBox from "../../component/noted_box";
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
-import { MODEL_PROFILE } from "../model/interface";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
-import { RouterHome } from "@/app/lib/router_hipmi/router_home";
-import { useForm } from "@mantine/form";
-import { useTimeout } from "@mantine/hooks";
 import { validRegex } from "../../component/regular_expressions";
-import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
+import funCreateNewProfile from "../fun/fun_create_profile";
+import { MODEL_PROFILE } from "../model/interface";
 
 export default function CreateProfile({ userId }: { userId: any }) {
   const [filePP, setFilePP] = useState<File | null>(null);
@@ -55,7 +47,7 @@ export default function CreateProfile({ userId }: { userId: any }) {
       <Stack px={"sm"} spacing={"xl"}>
         <Box>
           <Stack>
-            <ComponentKatalog_NotedBox informasi="Upload foto profile anda." />
+            <ComponentGlobal_BoxInformation informasi="Upload foto profile anda." />
             <Center>
               {imgPP ? (
                 <Paper shadow="lg" radius={"100%"}>
@@ -100,8 +92,6 @@ export default function CreateProfile({ userId }: { userId: any }) {
                       setImgPP(buffer);
                       setFilePP(files);
                     }
-                    // console.log(buffer, "ini buffer");
-                    // console.log(files, " ini file");
                   } catch (error) {
                     console.log(error);
                   }
@@ -112,10 +102,10 @@ export default function CreateProfile({ userId }: { userId: any }) {
                   <Button
                     {...props}
                     radius={"xl"}
-                    variant="outline"
-                    w={150}
                     leftIcon={<IconCamera />}
-                    compact
+                    bg={MainColor.yellow}
+                    color="yellow"
+                    c={"black"}
                   >
                     Upload
                   </Button>
@@ -127,7 +117,7 @@ export default function CreateProfile({ userId }: { userId: any }) {
 
         <Box>
           <Stack>
-            <ComponentKatalog_NotedBox informasi="Upload foto latar belakang profile anda." />
+            <ComponentGlobal_BoxInformation informasi="Upload foto latar belakang profile anda." />
             <AspectRatio ratio={16 / 9}>
               <Paper radius={"md"} withBorder shadow="lg" bg={"gray.2"}>
                 {imgBG ? (
@@ -171,10 +161,10 @@ export default function CreateProfile({ userId }: { userId: any }) {
                   <Button
                     {...props}
                     radius={"xl"}
-                    variant="outline"
-                    w={150}
                     leftIcon={<IconCamera />}
-                    compact
+                    bg={MainColor.yellow}
+                    color="yellow"
+                    c={"black"}
                   >
                     Upload
                   </Button>
@@ -186,8 +176,11 @@ export default function CreateProfile({ userId }: { userId: any }) {
 
         <Stack mb={"lg"}>
           <TextInput
+            styles={{
+              label: { color: "white" },
+            }}
             withAsterisk
-            label="Nama"
+            label={"Nama"}
             maxLength={50}
             placeholder="Nama lengkap"
             onChange={(val) => {
@@ -198,6 +191,9 @@ export default function CreateProfile({ userId }: { userId: any }) {
             }}
           />
           <TextInput
+            styles={{
+              label: { color: "white" },
+            }}
             withAsterisk
             icon={<IconAt size={15} />}
             label="Email"
@@ -218,6 +214,9 @@ export default function CreateProfile({ userId }: { userId: any }) {
             }}
           />
           <TextInput
+            styles={{
+              label: { color: "white" },
+            }}
             withAsterisk
             label="Alamat"
             maxLength={100}
@@ -231,6 +230,9 @@ export default function CreateProfile({ userId }: { userId: any }) {
           />
 
           <Select
+            styles={{
+              label: { color: "white" },
+            }}
             withAsterisk
             label="Jenis Kelamin"
             placeholder="Pilih satu"
@@ -315,11 +317,15 @@ function ButtonAction({
         loaderPosition="center"
         mt={"md"}
         radius={50}
-        bg={Warna.hijau_muda}
-        color="green"
+        bg={MainColor.yellow}
+        color="yellow"
         onClick={() => {
           onSubmit();
         }}
+        style={{
+          border: `2px solid ${AccentColor.yellow}`,
+          color: "black",
+        }}
       >
         Simpan
       </Button>

src/app_modules/katalog/profile/edit/layout.tsx

@@ -1,27 +1,14 @@
-"use client";
-
-import {
-  ActionIcon,
-  AppShell,
-  Group,
-  Header,
-  Text,
-  Title,
-} from "@mantine/core";
-import { IconArrowLeft } from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-import ComponentKatalog_HeaderTamplate from "../../component/header_tamplate";
-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";
 
 export default function EditProfileLayout({ children }: { children: any }) {
-  const router = useRouter();
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentKatalog_HeaderTamplate title="Edit Profile" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Edit Profile" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/katalog/profile/edit/view.tsx

@@ -12,6 +12,7 @@ import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/
 import { validRegex } from "../../component/regular_expressions";
 import { Profile_funEditById } from "../fun/update/fun_edit_profile_by_id";
 import { MODEL_PROFILE } from "../model/interface";
+import { MainColor } from "@/app_modules/component_global/color/color_pallet";
 
 export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
   const router = useRouter();
@@ -50,6 +51,11 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
       {/* <pre>{JSON.stringify(dataProfile, null, 2)}</pre> */}
       <Stack px={"sm"}>
         <TextInput
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           withAsterisk
           label="Nomor"
           disabled
@@ -57,6 +63,11 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
         />
 
         <TextInput
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           withAsterisk
           label="Username"
           error={
@@ -78,6 +89,11 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
         />
 
         <TextInput
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           withAsterisk
           label="Nama"
           placeholder="nama"
@@ -99,6 +115,11 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
         />
 
         <TextInput
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           withAsterisk
           label="Email"
           placeholder="email"
@@ -122,6 +143,11 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
         />
 
         <TextInput
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           withAsterisk
           label="Alamat"
           placeholder="alamat"
@@ -143,6 +169,11 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
         />
 
         <Select
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           withAsterisk
           label="Jenis Kelamin"
           value={dataProfile?.jenisKelamin}
@@ -161,8 +192,9 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
         <Button
           mt={"md"}
           radius={50}
-          bg={Warna.biru}
-          color="cyan"
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
           loading={loading ? true : false}
           loaderPosition="center"
           onClick={() => onUpdate()}

src/app_modules/katalog/profile/upload/foto_background/index.tsx

@@ -8,21 +8,23 @@ import {
   Image,
   Paper,
   Stack,
-  Title,
 } from "@mantine/core";
 
 import { useState } from "react";
 
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import { MODEL_PROFILE } from "../../model/interface";
+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 { IconCamera } from "@tabler/icons-react";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
 import { useRouter } from "next/navigation";
-import { Profile_funUpdateFoto } from "../../fun/update/fun_update_foto_profile";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
-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 { Profile_funUpdateBackground } from "../../fun/update/fun_update_background";
+import { MODEL_PROFILE } from "../../model/interface";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
 
 export default function Profile_UpdateFotoBackground({
   dataProfile,
@@ -38,7 +40,14 @@ export default function Profile_UpdateFotoBackground({
   return (
     <>
       <Stack spacing={"xl"}>
-        <Paper p={"sm"} withBorder radius={"sm"} shadow="">
+        <Paper
+          p={"sm"}
+          radius={"sm"}
+          style={{
+            backgroundColor: AccentColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+          }}
+        >
           <Stack>
             <AspectRatio ratio={16 / 9}>
               <Image
@@ -77,10 +86,10 @@ export default function Profile_UpdateFotoBackground({
                   <Button
                     {...props}
                     radius={"xl"}
-                    variant="outline"
-                    w={150}
                     leftIcon={<IconCamera />}
-                    compact
+                    bg={MainColor.yellow}
+                    color="yellow"
+                    c={"black"}
                   >
                     Upload
                   </Button>
@@ -96,6 +105,10 @@ export default function Profile_UpdateFotoBackground({
           loaderPosition="center"
           radius={"xl"}
           onClick={() => onUpdate(router, profile.id, file as any, setLoading)}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
+         
         >
           Update
         </Button>

src/app_modules/katalog/profile/upload/foto_background/layout.tsx

@@ -1,38 +1,18 @@
-"use client";
-
-import {
-  ActionIcon,
-  AppShell,
-  FileButton,
-  Flex,
-  Footer,
-  Group,
-  Header,
-  Text,
-} from "@mantine/core";
-
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import ComponentKatalog_HeaderTamplate from "@/app_modules/katalog/component/header_tamplate";
-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";
 
 export default function LayoutProfile_UpdateFotoBackground({
   children,
-
 }: {
   children: any;
-
 }) {
-  const router = useRouter();
-
-
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentKatalog_HeaderTamplate title="Update Background" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Update Background" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/katalog/profile/upload/foto_profile/index.tsx

@@ -20,6 +20,10 @@ import { Profile_funUpdateFoto } from "../../fun/update/fun_update_foto_profile"
 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 {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
 
 export default function UploadFotoProfile({
   dataProfile,
@@ -35,7 +39,14 @@ export default function UploadFotoProfile({
   return (
     <>
       <Stack spacing={"xl"}>
-        <Paper p={"sm"} withBorder radius={"sm"} shadow="">
+        <Paper
+          p={"sm"}
+          radius={"sm"}
+          style={{
+            backgroundColor: AccentColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+          }}
+        >
           <Stack>
             <AspectRatio ratio={1 / 1}>
               <Image
@@ -73,10 +84,10 @@ export default function UploadFotoProfile({
                   <Button
                     {...props}
                     radius={"xl"}
-                    variant="outline"
-                    w={150}
                     leftIcon={<IconCamera />}
-                    compact
+                    bg={MainColor.yellow}
+                    color="yellow"
+                    c={"black"}
                   >
                     Upload
                   </Button>
@@ -94,6 +105,9 @@ export default function UploadFotoProfile({
           onClick={() => {
             onUpdate(router, profile.id, file as any, setLoading);
           }}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
         >
           Update
         </Button>

src/app_modules/katalog/profile/upload/foto_profile/layout.tsx

@@ -1,38 +1,20 @@
-"use client";
-
-import {
-  ActionIcon,
-  AppShell,
-  FileButton,
-  Flex,
-  Footer,
-  Group,
-  Header,
-  Text,
-} from "@mantine/core";
-
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import ComponentKatalog_HeaderTamplate from "@/app_modules/katalog/component/header_tamplate";
-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";
 
 export default function UploadFotoProfileLayout({
   children,
-  profileId,
 }: {
   children: any;
-  profileId: any;
 }) {
-  const router = useRouter();
-  const [profile, setProfile] = useState(profileId);
+ 
 
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentKatalog_HeaderTamplate title="Update Foto" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Update Foto" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/katalog/ui/ui_katalog.tsx

@@ -1,8 +1,8 @@
 "use client"
 
 import { Stack } from "@mantine/core";
-import { Portofolio_UiView } from "../portofolio/ui_portofolio";
-import { Profile_UiView } from "../profile/ui_profile";
+import { Portofolio_UiListView } from "./ui_list_portofolio";
+import { Profile_UiView } from "./ui_profile"; 
 import { MODEL_PORTOFOLIO } from "../portofolio/model/interface";
 import { MODEL_PROFILE } from "../profile/model/interface";
 
@@ -18,9 +18,9 @@ export function Katalog_UiView({
 }) {
   return (
     <>
-      <Stack>
+      <Stack mb={"lg"}>
         <Profile_UiView profile={profile as any} userLoginId={userLoginId} />
-        <Portofolio_UiView
+        <Portofolio_UiListView
           listPorto={listPorto as any}
           profile={profile}
           userLoginId={userLoginId}

src/app_modules/katalog/ui/ui_list_portofolio.tsx

@@ -0,0 +1,146 @@
+"use cleint";
+
+import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
+import ComponentGlobal_UI_Loader from "@/app_modules/component_global/ui/ui_loader";
+import {
+  ActionIcon,
+  Box,
+  Center,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { IconCaretRight, IconPencilPlus } from "@tabler/icons-react";
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { MODEL_PORTOFOLIO } from "../portofolio/model/interface";
+import { MODEL_PROFILE } from "../profile/model/interface";
+
+export function Portofolio_UiListView({
+  listPorto,
+  profile,
+  userLoginId,
+}: {
+  listPorto: MODEL_PORTOFOLIO[];
+  profile: MODEL_PROFILE;
+  userLoginId: string;
+}) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [loadingPorto, setLoadingPorto] = useState(false);
+  const [idPorto, setIdPorto] = useState("");
+  return (
+    <>
+      <Box
+        style={{
+          backgroundColor: AccentColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          borderRadius: "10px ",
+          padding: "15px",
+          color: "white",
+        }}
+      >
+        <Stack spacing={"sm"}>
+          <Group position="apart">
+            <ActionIcon variant="transparent" disabled></ActionIcon>
+            <Title order={4}>Portofolio</Title>
+            {profile?.User.id === userLoginId ? (
+              <ActionIcon
+                variant="transparent"
+                onClick={() => {
+                  router.push(RouterPortofolio.create + `${profile.id}`);
+                  setLoading(true);
+                }}
+              >
+                {loading ? (
+                  <ComponentGlobal_UI_Loader />
+                ) : (
+                  <IconPencilPlus color={AccentColor.yellow} />
+                )}
+              </ActionIcon>
+            ) : (
+              <ActionIcon variant="transparent" disabled></ActionIcon>
+            )}
+          </Group>
+
+          <Stack
+            style={{
+              height: "auto",
+            }}
+          >
+            {_.isEmpty(listPorto) ? (
+              <Center>
+                <Text fs={"italic"} fz={"xs"} c={"gray"}>
+                  - Belum Ada Portofolio -
+                </Text>
+              </Center>
+            ) : (
+              <Stack>
+                {listPorto.map((e, i) => (
+                  <Paper
+                    shadow="sm"
+                    key={i}
+                    radius={"md"}
+                    onClick={() => {
+                      setIdPorto(e?.id);
+                      setLoadingPorto(true);
+                      router.push(RouterPortofolio.main_detail + e?.id);
+                    }}
+                    style={{
+                      backgroundColor: MainColor.darkblue,
+                      border: `2px solid ${AccentColor.blue}`,
+                      borderRadius: "10px ",
+                      padding: "15px",
+                      color: "white",
+                    }}
+                  >
+                    <Group position="apart">
+                      <Text fw={"bold"} lineClamp={1} w={"80%"}>
+                        {e?.namaBisnis}
+                      </Text>
+                      <Stack>
+                        {idPorto === e?.id && loadingPorto ? (
+                          <ComponentGlobal_UI_Loader />
+                        ) : (
+                          <IconCaretRight color="white" size={25} />
+                        )}
+                      </Stack>
+                    </Group>
+                  </Paper>
+                ))}
+              </Stack>
+            )}
+            {_.isEmpty(listPorto) ? (
+              ""
+            ) : (
+              <Group position="right">
+                <Text
+                  style={{
+                    cursor: "pointer",
+                  }}
+                  onClick={() =>
+                    router.push(
+                      RouterPortofolio.daftar_portofolio + profile.id,
+                      { scroll: false }
+                    )
+                  }
+                  fw={"bold"}
+                  fz={"sm"}
+                >
+                  Lihat semua
+                </Text>
+              </Group>
+            )}
+          </Stack>
+        </Stack>
+      </Box>
+    </>
+  );
+}

src/app_modules/katalog/ui/ui_profile.tsx

@@ -15,7 +15,7 @@ import {
   Text,
   ThemeIcon,
 } from "@mantine/core";
-import { MODEL_PROFILE } from "./model/interface";
+import { MODEL_PROFILE } from "../profile/model/interface";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";

src/app_modules/notifikasi/fun/get/get_notifiaksi_by_id.ts

@@ -12,7 +12,7 @@ export default async function notifikasi_getByUserId({page}: {page: number }) {
     take: takeData,
     skip: skipData,
     orderBy: {
-      createdAt: "desc",
+      isRead: "asc"
     },
     where: {
       userId: userId,

src/app_modules/notifikasi/view_notifikasi.tsx

@@ -1,5 +1,5 @@
-import LayoutGlobal_UI_HeaderTamplate from "../component_global/ui/ui_header_tamplate";
-import LayoutGlobal_UI_Tamplate from "../component_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "../component_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "../component_global/ui/ui_layout_tamplate";
 import { Notifikasi_UiView } from "./component/ui_notifiaksi";
 
 export default function Notifikasi_MainView({
@@ -9,11 +9,11 @@ export default function Notifikasi_MainView({
 }) {
   return (
     <>
-      <LayoutGlobal_UI_Tamplate
-        header={<LayoutGlobal_UI_HeaderTamplate title="Notifikasi" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Notifikasi" />}
       >
         <Notifikasi_UiView listNotifikasi={listNotifikasi} />
-      </LayoutGlobal_UI_Tamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/user_search/view_user_seach.tsx

@@ -1,7 +1,7 @@
 
 import { MODEL_USER } from "@/app_modules/home/model/interface";
-import LayoutGlobal_UI_HeaderTamplate from "../component_global/ui/ui_header_tamplate";
-import LayoutGlobal_UI_Tamplate from "../component_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "../component_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "../component_global/ui/ui_layout_tamplate";
 import { UserSearch_UiView } from "./component/ui_user_search";
 
 export default function UserSearch_MainView({
@@ -11,11 +11,11 @@ export default function UserSearch_MainView({
 }) {
   return (
     <>
-      <LayoutGlobal_UI_Tamplate
-        header={<LayoutGlobal_UI_HeaderTamplate title="Pencarian Pengguna" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Pencarian Pengguna" />}
       >
         <UserSearch_UiView listUser={listUser} />
-      </LayoutGlobal_UI_Tamplate>
+      </UIGlobal_LayoutTamplate>
       {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
     </>
   );

src/app_modules/zCoba/index.tsx

@@ -10,7 +10,7 @@ import { useState } from "react";
 
 import { IconPencilPlus } from "@tabler/icons-react";
 import _ from "lodash";
-import LayoutGlobal_UI_Tamplate from "../component_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutTamplate from "../component_global/ui/ui_layout_tamplate";
 
 
 const newData = Array(20)
@@ -41,10 +41,10 @@ export default function Coba_TestLoading() {
 
   return (
     <>
-      <LayoutGlobal_UI_Tamplate>
+      <UIGlobal_LayoutTamplate>
         {/* <CreateButton /> */}
         <Button onClick={() => setOpenDrawer(true)}>Click</Button>
-      </LayoutGlobal_UI_Tamplate>
+      </UIGlobal_LayoutTamplate>
 
     </>
   );