diff --git a/next.config.js b/next.config.js
index 983d7350..5c728631 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,8 +1,10 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+    reactStrictMode: false,
     experimental: {
         serverActions: true
-    }
+    },
+    
 }
 
 module.exports = nextConfig
diff --git a/package.json b/package.json
index 15651cf3..a6e33e51 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-simple-toasts": "^5.10.0",
+    "react-toastify": "^9.1.3",
+    "socket.io-client": "^4.7.2",
     "tailwindcss": "3.3.3",
     "typescript": "5.1.6",
     "uuid": "^9.0.1",
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 46f70188..fed69d0d 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -73,7 +73,7 @@ model Katalog {
   namaBisnis           String
   alamatKantor         String
   tlpn                 String
-  deskripssi           String
+  deskripsi           String
   active               Boolean            @default(true)
   createdAt            DateTime           @default(now())
   updatedAt            DateTime           @default(now()) @updatedAt
diff --git a/public/img/2ba722df-abd3-4b3a-b087-fc9f61b077ae.png b/public/img/2ba722df-abd3-4b3a-b087-fc9f61b077ae.png
new file mode 100644
index 00000000..6e04e0ec
Binary files /dev/null and b/public/img/2ba722df-abd3-4b3a-b087-fc9f61b077ae.png differ
diff --git a/src/app/api/portofolio/create/route.ts b/src/app/api/portofolio/create/route.ts
deleted file mode 100644
index 2a89f55e..00000000
--- a/src/app/api/portofolio/create/route.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { myConsole } from "@/app/fun/my_console";
-import prisma from "@/app/lib/prisma";
-import { NextResponse } from "next/server";
-
-export async function POST(req: Request) {
-  if (req.method === "POST") {
-    const body = await req.json();
-    // myConsole(body);
-
-    const data = await prisma.katalog.create({
-      data: {
-        profileId: body.profileId,
-        namaBisnis: body.namaBisnis,
-        alamatKantor: body.alamatKantor,
-        tlpn: body.tlpn,
-        deskripssi: body.deskripssi,
-        masterBidangBisnisId: body.masterBidangBisnisId,
-      },
-    });
-
-    return NextResponse.json({ status: 201, success: true });
-  }
-  return NextResponse.json({ success: false });
-}
diff --git a/src/app/api/profile/create/route.ts b/src/app/api/profile/create/route.ts
deleted file mode 100644
index 012231e5..00000000
--- a/src/app/api/profile/create/route.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { myConsole } from "@/app/fun/my_console";
-import prisma from "@/app/lib/prisma";
-import { NextResponse } from "next/server";
-
-export async function POST(req: Request) {
-  if (req.method === "POST") {
-    const body = await req.json();
-    // myConsole(body);
-
-    const data = await prisma.profile.create({
-      data: {
-        userId: body.userId,
-        name: body.name,
-        email: body.email,
-        alamat: body.alamat,
-        jenisKelamin: body.jenisKelamin,
-      },
-    });
-
-    if (data) return NextResponse.json({ status: 201 });
-
-    return NextResponse.json({ success: true });
-  }
-  return NextResponse.json({ success: false });
-}
diff --git a/src/app/api/profile/edit/route.ts b/src/app/api/profile/edit/route.ts
deleted file mode 100644
index d41cd1d4..00000000
--- a/src/app/api/profile/edit/route.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { myConsole } from "@/app/fun/my_console";
-import prisma from "@/app/lib/prisma";
-import { NextResponse } from "next/server";
-
-export async function POST(req: Request) {
-  if (req.method === "POST") {
-    const body = await req.json();
-    // myConsole(body);
-
-    const data = await prisma.profile.update({
-        where: {
-            id: body.id
-        },
-        data: {
-            name: body.name,
-            email: body.email,
-            alamat: body.alamat,
-            jenisKelamin: body.jenisKelamin
-        }
-    })
-
-    if(data) {
-        return NextResponse.json({status: 200})
-    } else {
-        return new Response("Error",{ status :401 });
-    }
-
-
-
-    return NextResponse.json({ success: true });
-  }
-  return NextResponse.json({ success: false });
-}
diff --git a/src/app/dev/home/page.tsx b/src/app/dev/home/page.tsx
index 98c88a72..499c6b37 100644
--- a/src/app/dev/home/page.tsx
+++ b/src/app/dev/home/page.tsx
@@ -6,6 +6,7 @@ import { redirect } from "next/navigation";
 
 import yaml from "yaml";
 import fs from "fs";
+import { funGetUserProfile } from "@/app_modules/fun/get_user_profile";
 const config = yaml.parse(fs.readFileSync("config.yaml").toString());
 
 export default async function Page() {
@@ -18,9 +19,13 @@ export default async function Page() {
     })
   );
 
+  const dataProfile = await funGetUserProfile(usr.id)
+
+
   return (
     <>
-      <HomeView user={usr} />
+    {/* {JSON.stringify(usr)} */}
+      <HomeView user={dataProfile as any} />
     </>
   );
 }
diff --git a/src/app/dev/katalog/[id]/layout.tsx b/src/app/dev/katalog/[id]/layout.tsx
new file mode 100644
index 00000000..62c2dc48
--- /dev/null
+++ b/src/app/dev/katalog/[id]/layout.tsx
@@ -0,0 +1,10 @@
+import { KatalogLayout } from "@/app_modules/katalog/main";
+
+export default async function Layout({ children, params }: { children: any, params: {id: string} }) {
+  // const a = atob(params.id.toString())
+  return (
+    <>
+      <KatalogLayout profileId={params.id}>{children}</KatalogLayout>
+    </>
+  );
+}
diff --git a/src/app/dev/katalog/view/page.tsx b/src/app/dev/katalog/[id]/page.tsx
similarity index 100%
rename from src/app/dev/katalog/view/page.tsx
rename to src/app/dev/katalog/[id]/page.tsx
diff --git a/src/app/dev/katalog/view/layout.tsx b/src/app/dev/katalog/view/layout.tsx
deleted file mode 100644
index 903dc27c..00000000
--- a/src/app/dev/katalog/view/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { KatalogLayout } from "@/app_modules/katalog/main";
-
-export default async function Layout({ children }: { children: any }) {
-  return (
-    <>
-      <KatalogLayout>{children}</KatalogLayout>
-    </>
-  );
-}
diff --git a/src/app/dev/portofolio/create/[id]/layout.tsx b/src/app/dev/portofolio/create/[id]/layout.tsx
new file mode 100644
index 00000000..be0a02bc
--- /dev/null
+++ b/src/app/dev/portofolio/create/[id]/layout.tsx
@@ -0,0 +1,8 @@
+import { CreatePortofolio, CreatePortofolioLayout, PortofolioLayout } from "@/app_modules/katalog/portofolio";
+import React from "react";
+
+export default async function Layout({children, params}: {children: React.ReactNode, params: {id: string}}) {
+    return<>
+    <CreatePortofolioLayout profileId={params.id}>{children}</CreatePortofolioLayout>
+    </>
+}
\ No newline at end of file
diff --git a/src/app/dev/portofolio/create/page.tsx b/src/app/dev/portofolio/create/[id]/page.tsx
similarity index 50%
rename from src/app/dev/portofolio/create/page.tsx
rename to src/app/dev/portofolio/create/[id]/page.tsx
index 92d01ad6..2bdd09e8 100644
--- a/src/app/dev/portofolio/create/page.tsx
+++ b/src/app/dev/portofolio/create/[id]/page.tsx
@@ -1,16 +1,16 @@
 import { myConsole } from "@/app/fun/my_console";
 import { CreatePortofolio } from "@/app_modules/katalog/portofolio";
-import { getBidangBisnis } from "@/app_modules/katalog/portofolio/fun/get_list_bidang_bisnis";
-import { getProfile } from "@/app_modules/katalog/profile";
+import { getBidangBisnis } from "@/app_modules/katalog/portofolio/fun/get_bidang_bisnis";
 
-export default async function Page() {
+export default async function Page({ params }: { params: { id: string } }) {
   const bidangBisnis = await getBidangBisnis();
-  const id = await getProfile();
-  const profileId = id?.id;
 
   return (
     <>
-      <CreatePortofolio data={bidangBisnis} profileId={profileId} />
+      <CreatePortofolio
+        bidangBisnis={bidangBisnis as any}
+        profileId={params.id}
+      />
     </>
   );
 }
diff --git a/src/app/dev/portofolio/create/layout.tsx b/src/app/dev/portofolio/create/layout.tsx
deleted file mode 100644
index 42df5deb..00000000
--- a/src/app/dev/portofolio/create/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { PortofolioLayout } from "@/app_modules/katalog/portofolio";
-import React from "react";
-
-export default async function Layout({children}: {children: React.ReactNode}) {
-    return<>
-    <PortofolioLayout>{children}</PortofolioLayout>
-    </>
-}
\ No newline at end of file
diff --git a/src/app/dev/portofolio/main/[id]/layout.tsx b/src/app/dev/portofolio/main/[id]/layout.tsx
new file mode 100644
index 00000000..f46699c1
--- /dev/null
+++ b/src/app/dev/portofolio/main/[id]/layout.tsx
@@ -0,0 +1,13 @@
+import { PortofolioLayout } from "@/app_modules/katalog/portofolio";
+import { getOnePortofolio } from "@/app_modules/katalog/portofolio/fun/get_one_portofolio";
+
+export default async function Layout({ children, params }: { children: any, params: {id: string} }) {
+  const getPorto = await getOnePortofolio(params.id)
+
+
+  return (
+    <>
+      <PortofolioLayout profileId={getPorto?.profileId}>{children}</PortofolioLayout>
+    </>
+  );
+}
diff --git a/src/app/dev/portofolio/main/[id]/page.tsx b/src/app/dev/portofolio/main/[id]/page.tsx
new file mode 100644
index 00000000..25e9a13e
--- /dev/null
+++ b/src/app/dev/portofolio/main/[id]/page.tsx
@@ -0,0 +1,15 @@
+import { ViewPortofolio } from "@/app_modules/katalog/portofolio";
+import { getOnePortofolio } from "@/app_modules/katalog/portofolio/fun/get_one_portofolio";
+
+export default async function Page({params}: {params: {id: string}}) {
+
+  const getPorto = await getOnePortofolio(params.id)
+  // console.log(getPorto)
+
+  return (
+    <>
+    {/* {JSON.stringify(getPorto)} */}
+      <ViewPortofolio dataPorto={getPorto as any} />
+    </>
+  );
+}
diff --git a/src/app/dev/profile/create/layout.tsx b/src/app/dev/profile/create/[id]/layout.tsx
similarity index 99%
rename from src/app/dev/profile/create/layout.tsx
rename to src/app/dev/profile/create/[id]/layout.tsx
index 30c363ec..a4737a19 100644
--- a/src/app/dev/profile/create/layout.tsx
+++ b/src/app/dev/profile/create/[id]/layout.tsx
@@ -7,3 +7,4 @@ export default function Layout({ children }: { children: any }) {
     </>
   );
 }
+
diff --git a/src/app/dev/profile/create/[id]/page.tsx b/src/app/dev/profile/create/[id]/page.tsx
new file mode 100644
index 00000000..fb1c2751
--- /dev/null
+++ b/src/app/dev/profile/create/[id]/page.tsx
@@ -0,0 +1,9 @@
+import { CreateProfile } from "@/app_modules/katalog/profile";
+
+export default async function Page({params}: {params: {id: string}}) {
+    // console.log(params.id)
+    
+    return <>
+    <CreateProfile userId={params.id}/>
+    </>
+}
\ No newline at end of file
diff --git a/src/app/dev/profile/create/page.tsx b/src/app/dev/profile/create/page.tsx
deleted file mode 100644
index 97c50e37..00000000
--- a/src/app/dev/profile/create/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { CreateProfile } from "@/app_modules/katalog/profile";
-
-export default async function Page() {
-    return <>
-    <CreateProfile/>
-    </>
-}
\ No newline at end of file
diff --git a/src/app/dev/profile/edit/[id]/layout.tsx b/src/app/dev/profile/edit/[id]/layout.tsx
new file mode 100644
index 00000000..34a5c84c
--- /dev/null
+++ b/src/app/dev/profile/edit/[id]/layout.tsx
@@ -0,0 +1,12 @@
+import { funGetUserProfile } from "@/app_modules/fun/get_user_profile";
+import { EditProfileLayout } from "@/app_modules/katalog/profile";
+
+export default async function Layout({ children, params }: { children: any, params: {id: string} }) {
+  const data = await funGetUserProfile(params.id)
+  const profileId = data?.Profile?.id
+  return (
+    <>
+      <EditProfileLayout profileId={profileId}>{children}</EditProfileLayout>
+    </>
+  );
+}
diff --git a/src/app/dev/profile/edit/[id]/page.tsx b/src/app/dev/profile/edit/[id]/page.tsx
new file mode 100644
index 00000000..dca06bfe
--- /dev/null
+++ b/src/app/dev/profile/edit/[id]/page.tsx
@@ -0,0 +1,14 @@
+import { funGetUserProfile } from "@/app_modules/fun/get_user_profile";
+import { getProfile } from "@/app_modules/katalog/profile";
+import EditProfile from "@/app_modules/katalog/profile/edit/view";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const data = await funGetUserProfile(params.id);
+
+  return (
+    <>
+      {/* {JSON.stringify(data)} */}
+      <EditProfile data={data as any} />
+    </>
+  );
+}
diff --git a/src/app/dev/profile/edit/layout.tsx b/src/app/dev/profile/edit/layout.tsx
deleted file mode 100644
index 9b8d49f1..00000000
--- a/src/app/dev/profile/edit/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { EditProfileLayout } from "@/app_modules/katalog/profile";
-
-export default function Layout({ children }: { children: any }) {
-  return (
-    <>
-      <EditProfileLayout>{children}</EditProfileLayout>
-    </>
-  );
-}
diff --git a/src/app/dev/profile/edit/page.tsx b/src/app/dev/profile/edit/page.tsx
deleted file mode 100644
index a1684084..00000000
--- a/src/app/dev/profile/edit/page.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { getProfile } from "@/app_modules/katalog/profile";
-import EditProfile from "@/app_modules/katalog/profile/edit/view";
-
-export default async function Page() {
-  const data = await getProfile();
-
-  return (
-    <>
-      {/* {JSON.stringify(data)} */}
-      <EditProfile data={data} />
-    </>
-  );
-}
diff --git a/src/app/dev/profile/upload/[id]/layout.tsx b/src/app/dev/profile/upload/[id]/layout.tsx
new file mode 100644
index 00000000..a204721f
--- /dev/null
+++ b/src/app/dev/profile/upload/[id]/layout.tsx
@@ -0,0 +1,13 @@
+import { UploadFotoProfileLayout } from "@/app_modules/katalog/profile";
+import { AppShell } from "@mantine/core";
+
+export default function Layout({ children, params }: { children: any, params: {id: string} }) {
+
+  return (
+    <>
+
+    <UploadFotoProfileLayout profileId={params.id}>{children}</UploadFotoProfileLayout>
+
+    </>
+  );
+}
diff --git a/src/app/dev/profile/upload/page.tsx b/src/app/dev/profile/upload/[id]/page.tsx
similarity index 79%
rename from src/app/dev/profile/upload/page.tsx
rename to src/app/dev/profile/upload/[id]/page.tsx
index fd388ea7..9c98a056 100644
--- a/src/app/dev/profile/upload/page.tsx
+++ b/src/app/dev/profile/upload/[id]/page.tsx
@@ -6,23 +6,20 @@ import fs from "fs";
 import { funGetUserProfile } from "@/app_modules/fun/get_user_profile";
 const config = yaml.parse(fs.readFileSync("config.yaml").toString());
 
-
 export default async function Page() {
-  const c = cookies().get("ssn")
+  const c = cookies().get("ssn");
   const usr = JSON.parse(
     await unsealData(c?.value as string, {
       password: config.server.password,
     })
   );
 
-  console.log(usr)
-
-  const imageUrl = await funGetUserProfile(usr.id).then((res) => res?.Profile?.ImageProfile?.url)
-
+  const imageUrl = await funGetUserProfile(usr.id).then(
+    (res) => res?.Profile?.ImageProfile?.url
+  );
 
   return (
     <>
-
       <UploadFotoProfile imageUrl={imageUrl} />
     </>
   );
diff --git a/src/app/dev/profile/upload/layout.tsx b/src/app/dev/profile/upload/layout.tsx
deleted file mode 100644
index 371d9700..00000000
--- a/src/app/dev/profile/upload/layout.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { UploadFotoProfileLayout } from "@/app_modules/katalog/profile";
-import { AppShell } from "@mantine/core";
-
-export default function Layout({ children }: { children: any }) {
-  return (
-    <>
-    <UploadFotoProfileLayout>{children}</UploadFotoProfileLayout>
-    </>
-  );
-}
diff --git a/src/app/emotion.tsx b/src/app/emotion.tsx
index 07deb7bf..940464e2 100644
--- a/src/app/emotion.tsx
+++ b/src/app/emotion.tsx
@@ -1,31 +1,40 @@
-'use client';
+"use client";
+import AppNotif from "@/app_modules/notif";
 // import './globals.css'
-import { CacheProvider } from '@emotion/react';
-import { MantineProvider, useEmotionCache } from '@mantine/core';
-import { useServerInsertedHTML } from 'next/navigation';
+import { CacheProvider } from "@emotion/react";
+import { MantineProvider, useEmotionCache } from "@mantine/core";
+import { useServerInsertedHTML } from "next/navigation";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
-export default function RootStyleRegistry({ children }: { children: React.ReactNode }) {
-    const cache = useEmotionCache();
-    cache.compat = true;
+export default function RootStyleRegistry({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const cache = useEmotionCache();
+  cache.compat = true;
 
-    useServerInsertedHTML(() => (
-        <style
-            data-emotion={`${cache.key} ${Object.keys(cache.inserted).join(' ')}`}
-            dangerouslySetInnerHTML={{
-                __html: Object.values(cache.inserted).join(' '),
-            }}
-        />
-    ));
+  useServerInsertedHTML(() => (
+    <style
+      data-emotion={`${cache.key} ${Object.keys(cache.inserted).join(" ")}`}
+      dangerouslySetInnerHTML={{
+        __html: Object.values(cache.inserted).join(" "),
+      }}
+    />
+  ));
 
-    return (
-        <html lang='en' data-theme="light" >
-            <body suppressHydrationWarning={true} >
-                <CacheProvider value={cache}>
-                    <MantineProvider withGlobalStyles withNormalizeCSS>
-                        {children}
-                    </MantineProvider>
-                </CacheProvider>
-            </body>
-        </html>
-    );
+  return (
+    <html lang="en" data-theme="light">
+      <body suppressHydrationWarning={true}>
+        <CacheProvider value={cache}>
+          <MantineProvider withGlobalStyles withNormalizeCSS>
+            {children}
+            <ToastContainer position="bottom-center" />
+            <AppNotif />
+          </MantineProvider>
+        </CacheProvider>
+      </body>
+    </html>
+  );
 }
diff --git a/src/app_modules/auth/register/view.tsx b/src/app_modules/auth/register/view.tsx
index 7a416909..da573f8d 100644
--- a/src/app_modules/auth/register/view.tsx
+++ b/src/app_modules/auth/register/view.tsx
@@ -10,6 +10,7 @@ import { myConsole } from "@/app/fun/my_console";
 import toast from "react-simple-toasts";
 import { ApiHipmi } from "@/app/lib/api";
 import { useRouter } from "next/navigation";
+import _ from "lodash";
 
 export default function Register() {
   const route = useRouter();
@@ -20,7 +21,7 @@ export default function Register() {
     myConsole(value);
 
     const body = {
-      username: value,
+      username: _.lowerCase(value),
       nomor: nomor,
     };
 
diff --git a/src/app_modules/home/view.tsx b/src/app_modules/home/view.tsx
index d2ebc483..0c708cbf 100644
--- a/src/app_modules/home/view.tsx
+++ b/src/app_modules/home/view.tsx
@@ -45,6 +45,7 @@ import { myConsole } from "@/app/fun/my_console";
 import { getFotoProfile } from "../katalog/profile/api/get-foto-profile";
 import { funGetUserProfile } from "../fun/get_user_profile";
 import { USER_PROFILE } from "../models/user_profile";
+import AppNotif from "../notif";
 
 const listHalaman = [
   {
@@ -96,29 +97,8 @@ export default function HomeView({ user }: { user: USER_PROFILE }) {
   const router = useRouter();
   const [stateUser, setStateUser] = useState(user);
 
-  // const [token, setToken] = useAtom(gs_token);
-  // useShallowEffect(() => {
-  //   getUserId();
-  // }, []);
-  // async function getUserId() {
-  //   const get = await getToken();
-  //   if (!get) return myConsole("Data Kosong");
-  //   setToken(get);
-  // }
-
-  // const [profile, setProfile] = useAtom(gs_profile);
-  // useShallowEffect(() => {
-  //   loadProfile();
-  // }, []);
-  // async function loadProfile() {
-  //   const get = await getProfile();
-  //   if (!get) return myConsole("Data Kosong");
-  //   setProfile(get);
-  // }
-
   return (
     <>
-      {/* <Center><Image src={ApiHipmi.get_foto + foto ?? ""} alt="" height={100} width={100}/></Center> */}
       <Box>
         <Flex align={"center"} gap={"sm"}>
           <ActionIcon
@@ -126,9 +106,9 @@ export default function HomeView({ user }: { user: USER_PROFILE }) {
             variant="transparent"
             onClick={() => {
               if (stateUser.Profile === null) {
-                return router.push("/dev/profile/create");
+                return router.push(`/dev/profile/create/${stateUser.id}`);
               } else {
-                return router.push("/dev/katalog/view");
+                return router.push(`/dev/katalog/${stateUser.Profile.id}`);
               }
             }}
           >
diff --git a/src/app_modules/katalog/component/header_transparent.tsx b/src/app_modules/katalog/component/header_transparent.tsx
index 05b1feb2..27c3c7e4 100644
--- a/src/app_modules/katalog/component/header_transparent.tsx
+++ b/src/app_modules/katalog/component/header_transparent.tsx
@@ -2,22 +2,28 @@
 
 import { Header, Group, ActionIcon, Text } from "@mantine/core";
 import { IconArrowLeft } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
 import React from "react";
 
-export default function headerTransparent({
-  icon1,
+export default function HeaderTransparent({
+  route,
   icon2,
   title,
 }: {
-  icon1: React.ReactNode;
-  icon2: React.ReactNode;
+  route: any;
+  icon2: any;
   title: string;
 }) {
+  const router = useRouter();
   return (
     <>
+
       <Header height={50} px={"sm"}>
         <Group position="apart" h={50}>
-          {icon1}
+          <ActionIcon variant="transparent" onClick={() => router.push(route)}>
+            <IconArrowLeft />
+          </ActionIcon>
+
           <Text>{title}</Text>
           {icon2}
         </Group>
diff --git a/src/app_modules/katalog/index.ts b/src/app_modules/katalog/index.ts
index 740fbc1b..215b6612 100644
--- a/src/app_modules/katalog/index.ts
+++ b/src/app_modules/katalog/index.ts
@@ -1,3 +1,3 @@
-import headerTransparent from "./component/header_transparent";
+import HeaderTransparent from "./component/header_transparent";
 
-export {headerTransparent}
\ No newline at end of file
+export {HeaderTransparent as headerTransparent}
\ No newline at end of file
diff --git a/src/app_modules/katalog/main/layout.tsx b/src/app_modules/katalog/main/layout.tsx
index d82a233f..6af092e6 100644
--- a/src/app_modules/katalog/main/layout.tsx
+++ b/src/app_modules/katalog/main/layout.tsx
@@ -5,7 +5,7 @@ import { ActionIcon, AppShell, Group, Header, Text } from "@mantine/core";
 import { IconUserSearch, IconAward, IconQrcode, IconArrowLeft, IconPencilPlus } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 
-export default function KatalogLayout({ children }: { children: any }) {
+export default function KatalogLayout({ children, profileId }: { children: any, profileId: any }) {
     const router = useRouter()
   return (
     <>
@@ -25,7 +25,7 @@ export default function KatalogLayout({ children }: { children: any }) {
                Katalog
               </Text>
               <Group spacing={"sm"}>
-                <ActionIcon variant="transparent" onClick={() => router.push("/dev/portofolio/create")}>
+                <ActionIcon variant="transparent" onClick={() => router.push(`/dev/portofolio/create/${profileId}`)}>
                   <IconPencilPlus />
                 </ActionIcon>
                 {/* <Logout /> */}
diff --git a/src/app_modules/katalog/portofolio/create/layout.tsx b/src/app_modules/katalog/portofolio/create/layout.tsx
index e5e6e58c..f8904e51 100644
--- a/src/app_modules/katalog/portofolio/create/layout.tsx
+++ b/src/app_modules/katalog/portofolio/create/layout.tsx
@@ -4,7 +4,7 @@ import { ActionIcon, AppShell, Group, Header, Text } from "@mantine/core";
 import { IconArrowLeft } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 
-export default function PortofolioLayout({ children }: { children: any }) {
+export default function CreatePortofolioLayout({ children, profileId }: { children: any, profileId: any }) {
   const router = useRouter();
   return (
     <>
@@ -14,7 +14,7 @@ export default function PortofolioLayout({ children }: { children: any }) {
             <Group position="apart" h={50}>
               <ActionIcon
                 variant="transparent"
-                onClick={() => router.push("/dev/katalog/view")}
+                onClick={() => router.push(`/dev/katalog/${profileId}`)}
               >
                 <IconArrowLeft />
               </ActionIcon>
diff --git a/src/app_modules/katalog/portofolio/create/view.tsx b/src/app_modules/katalog/portofolio/create/view.tsx
index f8863e4b..b28e96bd 100644
--- a/src/app_modules/katalog/portofolio/create/view.tsx
+++ b/src/app_modules/katalog/portofolio/create/view.tsx
@@ -3,17 +3,19 @@
 import { myConsole } from "@/app/fun/my_console";
 import { ApiHipmi } from "@/app/lib/api";
 import { Warna } from "@/app/lib/warna";
+import { BIDANG_BISNIS } from "@/app_modules/models/portofolio";
 import { Button, Select, Stack, TextInput, Title } from "@mantine/core";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-simple-toasts";
+import funCreatePortofolio from "../fun/fun_create_portofolio";
 
 export default function CreatePortofolio({
-  data,
+  bidangBisnis,
   profileId,
 }: {
-  data: any;
+  bidangBisnis: BIDANG_BISNIS;
   profileId: any;
 }) {
   const router = useRouter();
@@ -22,7 +24,7 @@ export default function CreatePortofolio({
     bidangBisnisId: "",
     alamatKantor: "",
     tlpn: "",
-    deskripssi: "",
+    deskripsi: "",
   });
 
   async function onSubmit() {
@@ -32,32 +34,24 @@ export default function CreatePortofolio({
       masterBidangBisnisId: value.bidangBisnisId,
       alamatKantor: value.alamatKantor,
       tlpn: value.tlpn,
-      deskripssi: value.deskripssi,
+      deskripsi: value.deskripsi,
     };
 
     if (_.values(body).includes("")) return toast("Lengkapi Data");
 
-    await fetch(ApiHipmi.create_portofolio, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(body),
-    })
-      .then((res) => res.json())
-      .then((val) => {
-        myConsole(val)
-        if (val.status == 201) {
-          toast("Berhasil disimpan");
-          return router.push("/dev/katalog/view");
-        } else {
-          return toast("Gagal disimpa");
-        }
-      });
+    await funCreatePortofolio(body as any).then((res) => {
+      if (res.status === 201) {
+        toast("Berhasil disimpan");
+        return setTimeout(() => router.push(`/dev/katalog/${profileId}`), 1000)
+      } else {
+        return toast("Gagal disimpan");
+      }
+    });
   }
 
   return (
     <>
+      {/* {JSON.stringify(profileId)} */}
 
       <Stack px={"sm"}>
         <TextInput
@@ -71,7 +65,10 @@ export default function CreatePortofolio({
         />
         <Select
           label="Bidang Bisnis"
-          data={_.map(data).map((e: any) => ({ label: e.name, value: e.id }))}
+          data={_.map(bidangBisnis as any).map((e: any) => ({
+            value: e.id,
+            label: e.name,
+          }))}
           onChange={(val) => {
             setValue({
               ...value,
@@ -103,7 +100,7 @@ export default function CreatePortofolio({
           onChange={(val) => {
             setValue({
               ...value,
-              deskripssi: val.target.value,
+              deskripsi: val.target.value,
             });
           }}
         />
diff --git a/src/app_modules/katalog/portofolio/fun/fun_create_portofolio.ts b/src/app_modules/katalog/portofolio/fun/fun_create_portofolio.ts
new file mode 100644
index 00000000..1cc3caf5
--- /dev/null
+++ b/src/app_modules/katalog/portofolio/fun/fun_create_portofolio.ts
@@ -0,0 +1,32 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { MODEL_PORTOFOLIO } from "@/app_modules/models/portofolio";
+import { revalidatePath } from "next/cache";
+
+export default async function funCreatePortofolio(data: MODEL_PORTOFOLIO) {
+  console.log(data);
+
+  const res = await prisma.katalog.create({
+    data: {
+      profileId: data.profileId,
+      namaBisnis: data.namaBisnis,
+      deskripsi: data.deskripsi,
+      tlpn: data.tlpn,
+      alamatKantor: data.alamatKantor,
+      masterBidangBisnisId: data.masterBidangBisnisId,
+    },
+  });
+
+  if (!res)
+    return {
+      status: 401,
+      success: false,
+    };
+
+  revalidatePath(`/dev/katalog/${data.profileId}`);
+  return {
+    status: 201,
+    success: true,
+  };
+}
diff --git a/src/app_modules/katalog/portofolio/fun/fun_get_all_portofolio.ts b/src/app_modules/katalog/portofolio/fun/fun_get_all_portofolio.ts
new file mode 100644
index 00000000..2a7f7de9
--- /dev/null
+++ b/src/app_modules/katalog/portofolio/fun/fun_get_all_portofolio.ts
@@ -0,0 +1,16 @@
+import toast from "react-simple-toasts";
+import { funGetListPortofolio } from "./get_list_portofolio";
+
+/**
+ * 
+ * @param id - profileId
+ * @returns load list portofolio by Id
+ */
+export async function loadListPortofolio(id: string) {
+  if (id === null) {
+    return toast("Id null");
+  } else {
+    const data = await funGetListPortofolio(id).then((res) => res);
+    return data
+  }
+}
diff --git a/src/app_modules/katalog/portofolio/fun/get_list_bidang_bisnis.ts b/src/app_modules/katalog/portofolio/fun/get_bidang_bisnis.ts
similarity index 100%
rename from src/app_modules/katalog/portofolio/fun/get_list_bidang_bisnis.ts
rename to src/app_modules/katalog/portofolio/fun/get_bidang_bisnis.ts
diff --git a/src/app_modules/katalog/portofolio/fun/get_list_portofolio.ts b/src/app_modules/katalog/portofolio/fun/get_list_portofolio.ts
index fa5a000f..7a4d6e38 100644
--- a/src/app_modules/katalog/portofolio/fun/get_list_portofolio.ts
+++ b/src/app_modules/katalog/portofolio/fun/get_list_portofolio.ts
@@ -12,9 +12,10 @@ export async function funGetListPortofolio(profileId: any) {
       namaBisnis: true,
       alamatKantor: true,
       tlpn: true,
-      deskripssi: true,
+      deskripsi: true,
       masterBidangBisnisId: true,
       active: true,
+      profileId: true
     },
   });
 
diff --git a/src/app_modules/katalog/portofolio/fun/get_one_portofolio.ts b/src/app_modules/katalog/portofolio/fun/get_one_portofolio.ts
new file mode 100644
index 00000000..91572a8c
--- /dev/null
+++ b/src/app_modules/katalog/portofolio/fun/get_one_portofolio.ts
@@ -0,0 +1,30 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export async function getOnePortofolio(id: string) {
+    // console.log(id)
+  const data = await prisma.katalog.findUnique({
+    where: {
+      id: id,
+    },
+    select: {
+      id: true,
+      namaBisnis: true,
+      alamatKantor: true,
+      deskripsi: true,
+      tlpn: true,
+      active: true,
+      MasterBidangBisnis: {
+        select: {
+          id: true,
+          name: true,
+          active: true,
+        },
+      },
+      profileId: true,
+    },
+  });
+
+  return data
+}
diff --git a/src/app_modules/katalog/portofolio/index.ts b/src/app_modules/katalog/portofolio/index.ts
index 3c257e8b..3f6834e9 100644
--- a/src/app_modules/katalog/portofolio/index.ts
+++ b/src/app_modules/katalog/portofolio/index.ts
@@ -1,5 +1,7 @@
 import CreatePortofolio from "./create/view";
-import PortofolioLayout from "./create/layout";
+import CreatePortofolioLayout from "./create/layout";
 import ListPortofolioView from "./list_view/view";
+import PortofolioLayout from "./main/layout";
+import ViewPortofolio from "./main/view";
 
-export {CreatePortofolio, PortofolioLayout, ListPortofolioView}
\ No newline at end of file
+export {CreatePortofolio, CreatePortofolioLayout, ListPortofolioView, PortofolioLayout, ViewPortofolio}
\ No newline at end of file
diff --git a/src/app_modules/katalog/portofolio/list_view/view.tsx b/src/app_modules/katalog/portofolio/list_view/view.tsx
index d838b565..08d2003e 100644
--- a/src/app_modules/katalog/portofolio/list_view/view.tsx
+++ b/src/app_modules/katalog/portofolio/list_view/view.tsx
@@ -11,14 +11,15 @@ import { gs_ListPortofolio } from "../state/global_state";
 import { myConsole } from "@/app/fun/my_console";
 import { getProfile } from "../../profile";
 import { LIST_PORTOFOLIO } from "@/app_modules/models/portofolio";
+import { useRouter } from "next/navigation";
 
 export default function ListPortofolioView({
   listPorto,
 }: {
   listPorto: LIST_PORTOFOLIO;
 }) {
+  const router = useRouter();
   const [porto, setPorto] = useState(listPorto);
-
   return (
     <>
       {/* <pre>{JSON.stringify(porto, null, 2)}</pre> */}
@@ -32,7 +33,14 @@ export default function ListPortofolioView({
               <>
                 {" "}
                 {_.map(porto as any).map((e: any) => (
-                  <Paper key={e.id} h={50} bg={"gray"} my={"md"}>
+                  <Paper
+                    key={e.id}
+                    h={50}
+                    bg={"gray"}
+                    my={"md"}
+                    radius={50}
+                    onClick={() => router.push(`/dev/portofolio/main/${e.id}/`)}
+                  >
                     <Grid h={50} align="center" px={"md"}>
                       <Grid.Col span={10}>
                         <Text fw={"bold"}>{e.namaBisnis}</Text>
diff --git a/src/app_modules/katalog/portofolio/main/layout.tsx b/src/app_modules/katalog/portofolio/main/layout.tsx
new file mode 100644
index 00000000..e19363c9
--- /dev/null
+++ b/src/app_modules/katalog/portofolio/main/layout.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { ActionIcon, AppShell } from "@mantine/core";
+import HeaderTransparent from "../../component/header_transparent";
+
+import { useRouter } from "next/navigation";
+import { IconArrowLeft, IconEdit } from "@tabler/icons-react";
+
+export default function PortofolioLayout({ children, profileId }: { children: any, profileId: any }) {
+  const router = useRouter();
+  return (
+    <>
+      <AppShell
+        header={
+          <HeaderTransparent
+            route={`/dev/katalog/${profileId}`}
+            title="Portofolio"
+            icon2={
+              <ActionIcon
+                variant="transparent"
+                onClick={() => router.push("/dev/portofolio/edit")}
+              >
+                <IconEdit />
+              </ActionIcon>
+            }
+          />
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}
diff --git a/src/app_modules/katalog/portofolio/main/view.tsx b/src/app_modules/katalog/portofolio/main/view.tsx
new file mode 100644
index 00000000..b667e1dd
--- /dev/null
+++ b/src/app_modules/katalog/portofolio/main/view.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { Warna } from "@/app/lib/warna";
+import { MODEL_PORTOFOLIO } from "@/app_modules/models/portofolio";
+import { Box, Button, Center, Text, Title } from "@mantine/core";
+import { IconTrash } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function ViewPortofolio({
+  dataPorto,
+}: {
+  dataPorto: MODEL_PORTOFOLIO;
+}) {
+  const router = useRouter();
+  const [porto, setPorto] = useState(dataPorto);
+
+  return (
+    <>
+      <Box>
+        <Text>{porto.namaBisnis}</Text>
+        <Text>{porto.alamatKantor}</Text>
+        <Text>+{porto.tlpn}</Text>
+        <Text>{porto.deskripsi}</Text>
+        <Text>{porto.MasterBidangBisnis.name}</Text>
+      </Box>
+      <Center mt={"md"}>
+        <Button bg={"red"} color="red" w={300} onClick={() => {}}>
+          <IconTrash />
+        </Button>{" "}
+      </Center>
+    </>
+  );
+}
diff --git a/src/app_modules/katalog/profile/create/view.tsx b/src/app_modules/katalog/profile/create/view.tsx
index ce8f9ffd..563ea13c 100644
--- a/src/app_modules/katalog/profile/create/view.tsx
+++ b/src/app_modules/katalog/profile/create/view.tsx
@@ -10,10 +10,10 @@ 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";
 
-export default function CreateProfile() {
+export default function CreateProfile({ userId }: { userId: any }) {
   const router = useRouter();
-  const [token, setToken] = useAtom(gs_token);
 
   const [value, setValue] = useState({
     name: "",
@@ -24,7 +24,7 @@ export default function CreateProfile() {
 
   async function onSubmit() {
     const body = {
-      userId: token?.id,
+      userId: userId,
       name: value.name,
       email: value.email,
       alamat: value.alamat,
@@ -36,22 +36,14 @@ export default function CreateProfile() {
     if (_.values(value).includes("")) return toast("Lengkapi data");
     // if(_.values(value.email).includes(`${/^\S+@\S+$/.test(value.email) ? null : "Invalid email"}`)){}
 
-    await fetch(ApiHipmi.create_profile, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(body),
-    })
-      .then((res) => res.json())
-      .then((val) => {
-        if (val.status == 201) {
-          toast("Data tersimpan")
-          return router.push("/dev/katalog/view");
-        } else {
-          return toast("Server Error!!!")
-        }
-      });
+   await funCreateNewProfile(body).then((res) => {
+      if (res.status === 201) {
+        toast("Data tersimpan");
+        return router.push("/dev/katalog/view");
+      } else {
+        toast("Gagal")
+      }
+    });
   }
 
   return (
diff --git a/src/app_modules/katalog/profile/edit/layout.tsx b/src/app_modules/katalog/profile/edit/layout.tsx
index eb33bac3..b15d0da8 100644
--- a/src/app_modules/katalog/profile/edit/layout.tsx
+++ b/src/app_modules/katalog/profile/edit/layout.tsx
@@ -11,7 +11,7 @@ import {
 import { IconArrowLeft } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 
-export default function EditProfileLayout({ children }: { children: any }) {
+export default function EditProfileLayout({ children, profileId }: { children: any, profileId: any }) {
   const router = useRouter()
   return (
     <>
@@ -20,7 +20,7 @@ export default function EditProfileLayout({ children }: { children: any }) {
         header={
           <Header height={50} px={"sm"}>
             <Group position="apart" h={50}>
-              <ActionIcon variant="transparent" onClick={() => router.push("/dev/katalog/view")}>
+              <ActionIcon variant="transparent" onClick={() => router.push(`/dev/katalog/${profileId}`)}>
                 <IconArrowLeft />
               </ActionIcon>
               <Text>Edit Profile</Text>
diff --git a/src/app_modules/katalog/profile/edit/view.tsx b/src/app_modules/katalog/profile/edit/view.tsx
index 9f7a80d5..72f88401 100644
--- a/src/app_modules/katalog/profile/edit/view.tsx
+++ b/src/app_modules/katalog/profile/edit/view.tsx
@@ -4,7 +4,7 @@ import { myConsole } from "@/app/fun/my_console";
 import { ApiHipmi } from "@/app/lib/api";
 import { Warna } from "@/app/lib/warna";
 import { gs_token } from "@/app_modules/home/state/global_state";
-import { Button, Select, Stack, TextInput } from "@mantine/core";
+import { Button, Loader, Select, Stack, TextInput } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useAtom } from "jotai";
 import _ from "lodash";
@@ -13,57 +13,53 @@ import { useState } from "react";
 import toast from "react-simple-toasts";
 import { gs_profile } from "../state/global_state";
 import { loadDataProfile } from "../fun/fun_get_profile";
+import { USER_PROFILE } from "@/app_modules/models/user_profile";
+import funEditProfile from "../fun/fun_edit_profile";
 
-export default function EditProfile({ data }: { data: any }) {
+export default function EditProfile({ data }: { data: USER_PROFILE }) {
   const router = useRouter();
 
   //Get data profile
-  const [profile, setProfile] = useAtom(gs_profile)
-  useShallowEffect(() => {
-    loadDataProfile(setProfile);
-  }, []);
+  const [dataProfile, setDataProfile] = useState(data);
 
   async function onUpdate() {
-    const body = profile;
+    const body = dataProfile;
     if (_.values(body).includes("")) return toast("Lengkapi data");
 
-    await fetch(ApiHipmi.edit_profile, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(body),
-    })
-      .then((res) => res.json())
-      .then((val) => {
-        myConsole(val);
-        if (val.status == 200) {
-          toast("Data tersimpan");
-          loadDataProfile(setProfile)
-          return setTimeout(() => router.push("/dev/katalog/view"), 1000);
-        } else {
-          return toast("Gagal update !!!");
-        }
-      });
+    await funEditProfile(body).then((res) => {
+      if (res.status === 200) {
+        toast("Update berhasil");
+        setTimeout(() => router.push(`/dev/katalog/${data.Profile?.id}`), 1000);
+      } else {
+        toast("Gagal update");
+      }
+    });
   }
 
-  if(!profile) return <></>
+  if (!dataProfile)
+    return (
+      <>
+        <Loader />
+      </>
+    );
 
   return (
     <>
-      {/* {JSON.stringify(profile)} */}
       <Stack px={"sm"}>
-        <TextInput label="Username" disabled value={profile?.User.username} />
-        <TextInput label="Nomor" disabled value={profile?.User.nomor} />
+        <TextInput label="Username" disabled value={dataProfile.username} />
+        <TextInput label="Nomor" disabled value={dataProfile.nomor} />
 
         <TextInput
           label="Nama"
           placeholder="username"
-          value={profile?.name}
+          value={dataProfile.Profile?.name}
           onChange={(val) => {
-            setProfile({
-              ...profile,
-              name: val.target.value,
+            setDataProfile({
+              ...(dataProfile as any),
+              Profile: {
+                ...dataProfile.Profile,
+                name: val.target.value,
+              },
             });
           }}
         />
@@ -71,12 +67,14 @@ export default function EditProfile({ data }: { data: any }) {
         <TextInput
           label="Email"
           placeholder="email"
-          value={profile?.email}
+          value={dataProfile.Profile?.email}
           onChange={(val) => {
-            myConsole(val.target.value);
-            setProfile({
-              ...profile,
-              email: val.target.value,
+            setDataProfile({
+              ...(dataProfile as any),
+              Profile: {
+                ...dataProfile.Profile,
+                email: val.target.value,
+              },
             });
           }}
         />
@@ -84,27 +82,32 @@ export default function EditProfile({ data }: { data: any }) {
         <TextInput
           label="Alamat"
           placeholder="alamat"
-          value={profile?.alamat}
+          value={dataProfile.Profile?.alamat}
           onChange={(val) => {
-            myConsole(val.target.value);
-            setProfile({
-              ...profile,
-              alamat: val.target.value,
+            setDataProfile({
+              ...(dataProfile as any),
+              Profile: {
+                ...dataProfile.Profile,
+                alamat: val.target.value,
+              },
             });
           }}
         />
 
         <Select
           label="Jenis Kelamin"
-          value={profile?.jenisKelamin}
+          value={dataProfile.Profile?.jenisKelamin}
           data={[
             { value: "Laki-laki", label: "Laki-laki" },
             { value: "Perempuan", label: "Perempuan" },
           ]}
           onChange={(val) => {
-            setProfile({
-              ...profile,
-              jenisKelamin: val as string,
+            setDataProfile({
+              ...(dataProfile as any),
+              Profile: {
+                ...dataProfile.Profile,
+                jenisKelamin: val,
+              },
             });
           }}
         />
@@ -119,6 +122,8 @@ export default function EditProfile({ data }: { data: any }) {
           Update
         </Button>
       </Stack>
+
+      {/* <pre>{JSON.stringify(dataProfile, null, 2)}</pre> */}
     </>
   );
 }
diff --git a/src/app_modules/katalog/profile/fun/fun_create_profile.ts b/src/app_modules/katalog/profile/fun/fun_create_profile.ts
new file mode 100644
index 00000000..8279d54b
--- /dev/null
+++ b/src/app_modules/katalog/profile/fun/fun_create_profile.ts
@@ -0,0 +1,25 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export default async function funCreateNewProfile(data: any) {
+  console.log(data);
+  const body = data;
+
+  const res = await prisma.profile.create({
+    data: {
+      userId: body.userId,
+      name: body.name,
+      email: body.email,
+      alamat: body.alamat,
+      jenisKelamin: body.jenisKelamin,
+    },
+  });
+
+  if (!res) return { status: 400 };
+
+  return {
+    status: 201,
+    success: true,
+  };
+}
diff --git a/src/app_modules/katalog/profile/fun/fun_edit_profile.ts b/src/app_modules/katalog/profile/fun/fun_edit_profile.ts
new file mode 100644
index 00000000..4c1c523d
--- /dev/null
+++ b/src/app_modules/katalog/profile/fun/fun_edit_profile.ts
@@ -0,0 +1,25 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { USER_PROFILE } from "@/app_modules/models/user_profile";
+
+export default async function funEditProfile(data: USER_PROFILE) {
+  const res = await prisma.profile.update({
+    where: {
+      id: data.Profile?.id,
+    },
+    data: {
+      name: data.Profile?.name,
+      email: data.Profile?.email,
+      alamat: data.Profile?.alamat,
+      jenisKelamin: data.Profile?.jenisKelamin,
+    },
+  });
+
+  if (!res) return { status: 400 };
+
+  return {
+    status: 200,
+    success: true,
+  };
+}
diff --git a/src/app_modules/katalog/profile/main/view.tsx b/src/app_modules/katalog/profile/main/view.tsx
index aeb56913..482f42c4 100644
--- a/src/app_modules/katalog/profile/main/view.tsx
+++ b/src/app_modules/katalog/profile/main/view.tsx
@@ -45,7 +45,6 @@ export default function ProfileView({ user }: { user: USER_PROFILE }) {
   if (!stateUser) return <></>;
   return (
     <>
-      {/* {JSON.stringify(stateUser)} */}
       {/* Background dan foto */}
       <Box>
         <Paper bg={"gray"} p={"md"}>
@@ -67,7 +66,6 @@ export default function ProfileView({ user }: { user: USER_PROFILE }) {
             }}
           >
             <Center h={101}>
-              {/* {stateUser.Profile?.ImageProfile?.url} */}
               {stateUser.Profile?.ImageProfile?.url && (
                 <Image
                   src={ApiHipmi.get_foto + stateUser.Profile?.ImageProfile?.url}
@@ -75,11 +73,6 @@ export default function ProfileView({ user }: { user: USER_PROFILE }) {
                   radius={100}
                   width={100}
                   height={100}
-                  sx={
-                    {
-                      // position: "fixed",
-                    }
-                  }
                 />
               )}
             </Center>
@@ -93,7 +86,7 @@ export default function ProfileView({ user }: { user: USER_PROFILE }) {
             variant="transparent"
             bg={"gray"}
             radius={50}
-            onClick={() => router.push("/dev/profile/upload")}
+            onClick={() => router.push(`/dev/profile/upload/${stateUser.Profile?.id}`)}
             sx={{ position: "relative" }}
           >
             <IconCamera color="black" size={20} />
@@ -112,7 +105,7 @@ export default function ProfileView({ user }: { user: USER_PROFILE }) {
         <ActionIcon
           variant="transparent"
           onClick={() => {
-            router.push("/dev/profile/edit");
+            router.push(`/dev/profile/edit/${stateUser.id}`);
           }}
         >
           <IconEditCircle color={Warna.hijau_muda} size={20} />
diff --git a/src/app_modules/katalog/profile/upload/layout.tsx b/src/app_modules/katalog/profile/upload/layout.tsx
index ad85d5ab..ca4d2b4b 100644
--- a/src/app_modules/katalog/profile/upload/layout.tsx
+++ b/src/app_modules/katalog/profile/upload/layout.tsx
@@ -18,27 +18,29 @@ import { useShallowEffect } from "@mantine/hooks";
 import { loadDataProfile } from "../fun/fun_get_profile";
 import { funUploadFoto } from "../fun/upload_foto";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
 
 export default function UploadFotoProfileLayout({
   children,
+  profileId
 }: {
   children: any;
+  profileId: any
 }) {
   const router = useRouter()
-  const [profile, setProfile] = useAtom(gs_profile);
-  useShallowEffect(() => {
-    loadDataProfile(setProfile);
-  }, []);
+  const [profile, setProfile] = useState(profileId)
+
 
   return (
     <>
+    {JSON.stringify(profileId)}
       <AppShell
         header={
           <Header height={50} px={"sm"}>
             <Group position="apart" h={50}>
               <ActionIcon
                 variant="transparent"
-                onClick={() => router.push("/dev/katalog/view")}
+                onClick={() => router.push(`/dev/katalog/${profile}`)}
               >
                 <IconArrowLeft />
               </ActionIcon>
@@ -54,7 +56,7 @@ export default function UploadFotoProfileLayout({
                 <Flex direction={"column"} align={"center"}>
                   <FileButton
                     onChange={async (files) => {
-                      const id = profile?.id
+                      const id =  profile
 
                       if (!files) return toast("File Kosong");
                       const fd = new FormData();
@@ -63,7 +65,7 @@ export default function UploadFotoProfileLayout({
                       const upFoto = await funUploadFoto(fd, id);
                       if (upFoto.success) {
                         toast("Upload berhasil");
-                        router.push("/dev/katalog/view")
+                        router.push(`/dev/katalog/${profile}`)
                         // loadDataProfile(valUser.id, setUser, setProfile);
                       }
                     }}
diff --git a/src/app_modules/models/portofolio.ts b/src/app_modules/models/portofolio.ts
index 0a169463..a7e6b01c 100644
--- a/src/app_modules/models/portofolio.ts
+++ b/src/app_modules/models/portofolio.ts
@@ -1,9 +1,28 @@
 export interface LIST_PORTOFOLIO {
-    id: string;
-    namaBisnis: string;
-    alamatKantor: string;
-    tlpn: string;
-    deskripssi: string;
-    masterBidangBisnisId: string;
-    active: boolean;
-}
\ No newline at end of file
+  id: string;
+  namaBisnis: string;
+  alamatKantor: string;
+  tlpn: string;
+  deskripssi: string;
+  masterBidangBisnisId: string;
+  active: boolean;
+  profileId: string
+}
+
+export interface BIDANG_BISNIS {
+  id: string;
+  name: string;
+  active: boolean;
+}
+
+export interface MODEL_PORTOFOLIO {
+  id: string;
+  namaBisnis: string;
+  alamatKantor: string;
+  deskripsi: string;
+  tlpn: string;
+  active: boolean;
+  MasterBidangBisnis: BIDANG_BISNIS;
+  masterBidangBisnisId: string
+  profileId: string,
+}
diff --git a/src/app_modules/notif/index.tsx b/src/app_modules/notif/index.tsx
new file mode 100644
index 00000000..6dc0240d
--- /dev/null
+++ b/src/app_modules/notif/index.tsx
@@ -0,0 +1,17 @@
+"use client";
+import { useShallowEffect } from "@mantine/hooks";
+import io from "socket.io-client";
+import { toast } from "react-toastify";
+// const socket = io("https://io.wibudev.com");
+
+export default function AppNotif() {
+  // useShallowEffect(() => {
+  //   socket.on("io", (data) => {
+  //       console.log(JSON.stringify(data))
+  //     if (data && data.id === "hipmi") {
+  //       toast.success(data.data);
+  //     }
+  //   });
+  // }, []);
+  return <></>;
+}
diff --git a/yarn.lock b/yarn.lock
index 401c63e6..f16faa0d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -545,6 +545,11 @@
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.3.2.tgz#31b9c510d8cada9683549e1dbb4284cca5001faf"
   integrity sha512-V+MvGwaHH03hYhY+k6Ef/xKd6RYlc4q8WBx+2ANmipHJcKuktNcI/NgEsJgdSUF6Lw32njT6OnrRsKYCdgHjYw==
 
+"@socket.io/component-emitter@~3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553"
+  integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
+
 "@swc/helpers@0.5.2":
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.2.tgz#85ea0c76450b61ad7d10a37050289eded783c27d"
@@ -1144,6 +1149,11 @@ clsx@1.1.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
   integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
 
+clsx@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -1240,7 +1250,7 @@ debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
+debug@^4.1.1, debug@^4.3.2, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -1371,6 +1381,22 @@ emoji-regex@^9.2.2:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
+engine.io-client@~6.5.2:
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-6.5.2.tgz#8709e22c291d4297ae80318d3c8baeae71f0e002"
+  integrity sha512-CQZqbrpEYnrpGqC07a9dJDz4gePZUgTPMU3NKJPSeQOyw27Tst4Pl3FemKoFGAlHzgZmKjoRmiJvbWfhCXUlIg==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+    engine.io-parser "~5.2.1"
+    ws "~8.11.0"
+    xmlhttprequest-ssl "~2.0.0"
+
+engine.io-parser@~5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.2.1.tgz#9f213c77512ff1a6cc0c7a86108a7ffceb16fcfb"
+  integrity sha512-9JktcM3u18nU9N2Lz3bWeBgxVgOKpw7yhRaoxQA3FUDZzzw+9WlA6p4G4u0RixNkg14fH7EfEc/RhpurtiROTQ==
+
 enhanced-resolve@^5.12.0:
   version "5.15.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz#1af946c7d93603eb88e9896cee4904dc012e9c35"
@@ -2939,6 +2965,13 @@ react-textarea-autosize@8.3.4:
     use-composed-ref "^1.3.0"
     use-latest "^1.2.1"
 
+react-toastify@^9.1.3:
+  version "9.1.3"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.1.3.tgz#1e798d260d606f50e0fab5ee31daaae1d628c5ff"
+  integrity sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg==
+  dependencies:
+    clsx "^1.1.1"
+
 react@18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -3130,6 +3163,24 @@ slash@^4.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
   integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
 
+socket.io-client@^4.7.2:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.7.2.tgz#f2f13f68058bd4e40f94f2a1541f275157ff2c08"
+  integrity sha512-vtA0uD4ibrYD793SOIAwlo8cj6haOeMHrGvwPxJsxH7CeIksqJ+3Zc06RvWTIFgiSqx4A3sOnTXpfAEE2Zyz6w==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.2"
+    engine.io-client "~6.5.2"
+    socket.io-parser "~4.2.4"
+
+socket.io-parser@~4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.4.tgz#c806966cf7270601e47469ddeec30fbdfda44c83"
+  integrity sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+
 source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
@@ -3596,6 +3647,16 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
+ws@~8.11.0:
+  version "8.11.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143"
+  integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==
+
+xmlhttprequest-ssl@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67"
+  integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==
+
 xtend@~2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-2.1.2.tgz#6efecc2a4dad8e6962c4901b337ce7ba87b5d28b"