src/app/api/new/home/route.ts

@@ -0,0 +1,68 @@
+import { prisma } from "@/app/lib";
+import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
+import { NextResponse } from "next/server";
+
+
+// GET DATA HOME
+export async function GET(request: Request) {
+   try {
+      let fixData
+      const { searchParams } = new URL(request.url)
+      const kategori = searchParams.get("cat")
+
+      const userLoginId = await funGetUserIdByToken()
+      if (userLoginId == null) {
+         return NextResponse.json({ success: false, message: "Gagal mendapatkan data, user id tidak ada" }, { status: 500 });
+      }
+
+      if (kategori == "job") {
+         fixData = await prisma.job.findMany({
+            take: 2,
+            orderBy: {
+               createdAt: "desc",
+            },
+            where: {
+               isActive: true,
+               masterStatusId: "1"
+            },
+            select: {
+               id: true,
+               Author: {
+                  select: {
+                     id: true,
+                     username: true,
+                  },
+               },
+               title: true,
+               deskripsi: true
+            },
+         });
+      } else if (kategori == "cek_profile") {
+         const data = await prisma.user.findUnique({
+            where: {
+               id: userLoginId,
+            },
+            select: {
+               Profile: {
+                  select: {
+                     id: true,
+                     imageId: true,
+                  }
+               }
+            }
+         });
+
+         fixData = {
+            profile: data?.Profile?.id,
+            imageId: data?.Profile?.imageId
+         }
+
+      }
+
+      return NextResponse.json({ success: true, message: "Berhasil mendapatkan data", data: fixData }, { status: 200 });
+
+   } catch (error) {
+      console.error(error);
+      return NextResponse.json({ success: false, message: "Gagal mendapatkan data, coba lagi nanti ", reason: (error as Error).message, }, { status: 500 });
+   }
+}

src/app/api/new/portofolio/route.ts

@@ -0,0 +1,55 @@
+import { prisma } from "@/app/lib";
+import { NextResponse } from "next/server";
+
+
+// GET  ALL DATA PORTOFOLIO BY PROFILE ID
+export async function GET(request: Request) {
+   try {
+      let fixData
+      const { searchParams } = new URL(request.url)
+      const profile = searchParams.get("profile")
+      const page = searchParams.get("page")
+
+      if (page == "profile") {
+         fixData = await prisma.portofolio.findMany({
+            take: 2,
+            orderBy: {
+               createdAt: "desc",
+            },
+            where: {
+               profileId: profile,
+               active: true,
+            },
+            select: {
+               id: true,
+               id_Portofolio: true,
+               namaBisnis: true,
+               profileId: true,
+            },
+         });
+      } else if (page == "portofolio") {
+         fixData = await prisma.portofolio.findMany({
+            orderBy: {
+               createdAt: "desc",
+            },
+            where: {
+               profileId: profile,
+               active: true,
+            },
+            select: {
+               id: true,
+               id_Portofolio: true,
+               namaBisnis: true,
+               profileId: true,
+            },
+         });
+      }
+
+      return NextResponse.json({ success: true, message: "Berhasil mendapatkan data", data: fixData }, { status: 200 });
+
+   }
+   catch (error) {
+      console.error(error);
+      return NextResponse.json({ success: false, message: "Gagal mendapatkan data, coba lagi nanti ", reason: (error as Error).message, }, { status: 500 });
+   }
+}

src/app/api/new/user/route.ts

@@ -0,0 +1,58 @@
+import { prisma } from "@/app/lib";
+import { NextResponse } from "next/server";
+
+
+// GET ONE DATA USER PROFILE BY PROFILE ID
+export async function GET(request: Request) {
+   try {
+      const { searchParams } = new URL(request.url)
+      const profile = searchParams.get("profile")
+
+      const data = await prisma.profile.findUnique({
+         where: {
+            id: String(profile),
+         },
+         select: {
+            id: true,
+            name: true,
+            email: true,
+            alamat: true,
+            jenisKelamin: true,
+            imageId: true,
+            imageBackgroundId: true,
+            userId: true,
+            User: {
+               select: {
+                  username: true,
+                  nomor: true,
+                  active: true,
+                  masterUserRoleId: true
+               }
+            }
+         }
+      });
+
+      const dataFix = {
+         id: data?.userId,
+         username: data?.User?.username,
+         nomor: data?.User?.nomor,
+         active: data?.User?.active,
+         masterUserRoleId: data?.User?.masterUserRoleId,
+         idProfile: data?.id,
+         name: data?.name,
+         email: data?.email,
+         alamat: data?.alamat,
+         jenisKelamin: data?.jenisKelamin,
+         imageId: data?.imageId,
+         imageBackgroundId: data?.imageBackgroundId
+
+      }
+
+      return NextResponse.json({ success: true, message: "Berhasil mendapatkan data", data: dataFix, }, { status: 200 });
+
+   }
+   catch (error) {
+      console.error(error);
+      return NextResponse.json({ success: false, message: "Gagal mendapatkan data, coba lagi nanti ", reason: (error as Error).message, }, { status: 500 });
+   }
+}

src/app/dev/(user)/home/page.tsx

@@ -1,23 +1,21 @@
-import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
-import { HomeView } from "@/app_modules/home";
-import { user_getOneByUserId } from "@/app_modules/home/fun/get/get_one_user_by_id";
-import { job_getTwoForHomeView } from "@/app_modules/job/fun/get/get_two_for_home_view";
+import { HomeViewNew } from "@/app_modules/home";
 import notifikasi_countUserNotifikasi from "@/app_modules/notifikasi/fun/count/fun_count_by_id";
 
 export default async function PageHome() {
-  const userLoginId = await funGetUserIdByToken();
-  const dataUser = await user_getOneByUserId(userLoginId as string);
-  const dataJob = await job_getTwoForHomeView();
+  // const userLoginId = await funGetUserIdByToken();
+  // const dataUser = await user_getOneByUserId(userLoginId as string);
+  // const dataJob = await job_getTwoForHomeView();
   const countNotifikasi = await notifikasi_countUserNotifikasi();
 
 
   return (
     <>
-      <HomeView
+      {/* <HomeView
         dataUser={dataUser as any}
         dataJob={dataJob as any}
         countNotifikasi={countNotifikasi}
-      />
+      /> */}
+      <HomeViewNew countNotifikasi={countNotifikasi} />
     </>
   );
 }

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

@@ -1,5 +1,5 @@
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
-import { Katalog_MainView } from "@/app_modules/katalog";
+import { Katalog_MainView, ViewKatalogNew } from "@/app_modules/katalog";
 import { funGetListPortofolio } from "@/app_modules/katalog/portofolio/fun/get/get_list_portofolio";
 import { Profile_getOneProfileAndUserById } from "@/app_modules/katalog/profile/fun/get/get_one_user_profile";
 
@@ -12,11 +12,13 @@ export default async function Page({ params }: { params: { id: string } }) {
 
   return (
     <>
-      <Katalog_MainView
+      {/* <Katalog_MainView
         profile={dataProfile as any}
         listPorto={listPorto as any}
         userLoginId={userLoginId as any}
-      />
+      /> */}
+
+      <ViewKatalogNew />
     </>
   );
 }

src/app_modules/home/component/body_home.tsx

@@ -0,0 +1,193 @@
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
+import { ActionIcon, Box, Group, Image, Paper, SimpleGrid, Skeleton, Stack, Text } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconUserSearch } from "@tabler/icons-react";
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { apiGetDataHome } from "../fun/get/api_home";
+import { listMenuHomeBody, menuHomeJob } from "./list_menu_home";
+
+export default function BodyHome() {
+   const router = useRouter()
+   const [dataUser, setDataUser] = useState<any>({})
+   const [dataJob, setDataJob] = useState<any[]>([])
+   const [loadingJob, setLoadingJob] = useState(true)
+
+   useShallowEffect(() => {
+      cekUserLogin()
+      getHomeJob()
+   }, []);
+
+
+   async function cekUserLogin() {
+      try {
+         const response = await apiGetDataHome("?cat=cek_profile")
+         if (response.success) {
+            setDataUser(response.data);
+         }
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   async function getHomeJob() {
+      try {
+         setLoadingJob(true)
+         const response = await apiGetDataHome("?cat=job")
+         if (response.success) {
+            setDataJob(response.data);
+         }
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoadingJob(false)
+      }
+   }
+
+   return (
+      <Box>
+         <Paper
+            radius={"xl"}
+            mb={"xs"}
+            style={{
+               borderRadius: "10px 10px 10px 10px",
+               border: `2px solid ${AccentColor.blue}`,
+            }}
+         >
+            <Image radius={"lg"} alt="logo" src={"/aset/home/home-hipmi-new.png"} />
+         </Paper>
+
+         <Stack my={"sm"}>
+            <SimpleGrid
+               cols={2}
+               spacing="md"
+            >
+               {listMenuHomeBody.map((e, i) => (
+                  <Paper
+                     key={e.id}
+                     h={150}
+                     bg={MainColor.darkblue}
+                     style={{
+                        borderRadius: "10px 10px 10px 10px",
+                        border: `2px solid ${AccentColor.blue}`,
+                     }}
+                     onClick={() => {
+                        if (dataUser.profile === undefined || dataUser?.profile === null) {
+                           return ComponentGlobal_NotifikasiPeringatan(
+                              "Lengkapi Profile"
+                           );
+                        } else {
+                           if (e.link === "") {
+                              return ComponentGlobal_NotifikasiPeringatan(
+                                 "Cooming Soon !!"
+                              );
+                           } else {
+                              router.push(e.link, { scroll: false });
+                           }
+                        }
+                     }}
+                  >
+                     <Stack align="center" justify="center" h={"100%"}>
+                        <ActionIcon
+                           size={50}
+                           variant="transparent"
+                           c={e.link === "" ? "gray.3" : "white"}
+                        >
+                           {e.icon}
+                        </ActionIcon>
+                        <Text c={e.link === "" ? "gray.3" : "white"} fz={"xs"}>
+                           {e.name}
+                        </Text>
+                     </Stack>
+                  </Paper>
+               ))}
+            </SimpleGrid>
+
+            {/* Job View */}
+            <Paper
+               p={"md"}
+               w={"100%"}
+               bg={MainColor.darkblue}
+               style={{
+                  borderRadius: "10px 10px 10px 10px",
+                  border: `2px solid ${AccentColor.blue}`,
+               }}
+            >
+               <Stack
+                  onClick={() => {
+                     if (dataUser.profile === undefined || dataUser?.profile === null) {
+                        return ComponentGlobal_NotifikasiPeringatan(
+                           "Lengkapi Profile"
+                        );
+                     } else {
+                        if (menuHomeJob.link === "") {
+                           return ComponentGlobal_NotifikasiPeringatan(
+                              "Cooming Soon !!"
+                           );
+                        } else {
+                           return router.push(menuHomeJob.link, { scroll: false });
+                        }
+                     }
+                  }}
+               >
+                  <Group>
+                     <ActionIcon
+                        variant="transparent"
+                        size={40}
+                        c={menuHomeJob.link === "" ? "gray.3" : "white"}
+                     >
+                        {menuHomeJob.icon}
+                     </ActionIcon>
+                     <Text c={menuHomeJob.link === "" ? "gray.3" : "white"}>
+                        {menuHomeJob.name}
+                     </Text>
+                  </Group>
+                  {
+                     loadingJob ?
+                        Array(2)
+                           .fill(null)
+                           .map((_, i) => (
+                              <Box key={i} mb={"md"}>
+                                 <Skeleton height={10} mt={0} radius="xl" width={"50%"} />
+                                 <Skeleton height={10} mt={10} radius="xl" />
+                                 <Skeleton height={10} mt={10} radius="xl" />
+                              </Box>
+                           ))
+                        : _.isEmpty(dataJob) ?
+                           (<ComponentGlobal_IsEmptyData text="Tidak ada data" height={10} />)
+                           : (
+                              <SimpleGrid cols={2} spacing="md">
+                                 {dataJob.map((e, i) => (
+                                    <Stack key={e.id}>
+                                       <Group spacing={"xs"}>
+                                          <Stack h={"100%"} align="center" justify="flex-start">
+                                             <IconUserSearch size={20} color="white" />
+                                          </Stack>
+                                          <Stack spacing={0} w={"60%"}>
+                                             <Text
+                                                lineClamp={1}
+                                                fz={"sm"}
+                                                c={MainColor.yellow}
+                                                fw={"bold"}
+                                             >
+                                                {e?.Author.username}
+                                             </Text>
+                                             <Text fz={"sm"} c={"white"} lineClamp={2}>
+                                                {e?.title}
+                                             </Text>
+                                          </Stack>
+                                       </Group>
+                                    </Stack>
+                                 ))}
+                              </SimpleGrid>
+                           )
+                  }
+               </Stack>
+            </Paper>
+         </Stack>
+      </Box>
+   );
+}

src/app_modules/home/component/footer_home.tsx

@@ -0,0 +1,113 @@
+import { APIs } from "@/app/lib";
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
+import { ActionIcon, Box, Center, SimpleGrid, Stack, Text } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconUserCircle } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { apiGetDataHome } from "../fun/get/api_home";
+import { Home_ComponentAvatarProfile } from "./comp_avatar_profile";
+import { listMenuHomeFooter } from "./list_menu_home";
+
+export default function FooterHome() {
+   const router = useRouter()
+   const [dataUser, setDataUser] = useState<any>({})
+
+   useShallowEffect(() => {
+      cekUserLogin();
+   }, []);
+
+
+   async function cekUserLogin() {
+      try {
+         const response = await apiGetDataHome("?cat=cek_profile")
+         if (response.success) {
+            setDataUser(response.data);
+         }
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   return (
+      <Box
+         style={{
+            zIndex: 99,
+            borderRadius: "20px 20px 0px 0px",
+         }}
+         w={"100%"}
+         bottom={0}
+         h={"9vh"}
+      >
+         <SimpleGrid cols={listMenuHomeFooter.length + 1}>
+            {listMenuHomeFooter.map((e) => (
+               <Center h={"9vh"} key={e.id}>
+                  <Stack align="center" spacing={0}
+                     onClick={() => {
+                        if (dataUser.profile === undefined || dataUser?.profile === null) {
+                           ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
+                        } else {
+                           if (e.link == "") {
+                              ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
+                           } else {
+                              router.push(e.link, { scroll: false })
+                           }
+                        }
+                     }}
+                  >
+                     <ActionIcon
+                        radius={"xl"}
+                        c={e.link === "" ? "gray" : "white"}
+                        variant="transparent"
+                     >
+                        {e.icon}
+                     </ActionIcon>
+                     <Text
+                        lineClamp={1}
+                        c={e.link === "" ? "gray" : "white"}
+                        fz={12}
+                     >
+                        {e.name}
+                     </Text>
+                  </Stack>
+               </Center>
+            ))}
+
+            <Center h={"9vh"}>
+               <Stack
+                  align="center"
+                  spacing={2}
+                  onClick={() => {
+                     if (dataUser.profile === undefined || dataUser?.profile === null) {
+                        router.push(RouterProfile.create, { scroll: false });
+                     } else {
+                        router.push(
+                           RouterProfile.katalogOLD + `${dataUser?.profile}`,
+                           { scroll: false }
+                        );
+                     }
+                  }}
+               >
+                  <ActionIcon variant={"transparent"}>
+                     {dataUser.profile === undefined || dataUser?.profile === null
+                        ?
+                        <IconUserCircle color="white" />
+                        :
+                        <Home_ComponentAvatarProfile
+                           url={APIs.GET({
+                              fileId: dataUser?.imageId as string,
+                              size: "50"
+                           })}
+                        />
+                     }
+                  </ActionIcon>
+                  <Text fz={10} c={"white"}>
+                     Profile
+                  </Text>
+               </Stack>
+            </Center>
+         </SimpleGrid>
+      </Box>
+   );
+}

src/app_modules/home/component/list_menu_home.tsx

@@ -0,0 +1,67 @@
+import { RouterColab } from '@/app/lib/router_hipmi/router_colab';
+import { RouterEvent } from '@/app/lib/router_hipmi/router_event';
+import { RouterForum } from '@/app/lib/router_hipmi/router_forum';
+import { RouterJob } from '@/app/lib/router_hipmi/router_job';
+import { RouterMap } from '@/app/lib/router_hipmi/router_map';
+import { RouterVote } from '@/app/lib/router_hipmi/router_vote';
+import { IconAffiliate, IconBriefcase, IconHeartHandshake, IconMap2, IconMessages, IconPackageImport, IconPresentation, IconShoppingBag } from '@tabler/icons-react';
+
+
+// yg ada di footer home
+export const listMenuHomeFooter = [
+  {
+    id: 1,
+    name: "Forums",
+    icon: <IconMessages />,
+    link: RouterForum.splash,
+  },
+  {
+    id: 2,
+    name: "MarketPlace",
+    icon: <IconShoppingBag />,
+    link: "",
+  },
+  {
+    id: 3,
+    name: "Business Maps",
+    icon: <IconMap2 />,
+    link: RouterMap.splash,
+  },
+];
+
+
+// yg ada di kotak2 home (body)
+export const listMenuHomeBody = [
+  {
+    id: 1,
+    name: "Event",
+    icon: <IconPresentation size={50} />,
+    link: RouterEvent.splash,
+  },
+  {
+    id: 2,
+    name: "Collaboration",
+    icon: <IconAffiliate size={50} />,
+    link: RouterColab.splash,
+  },
+
+  {
+    id: 3,
+    name: "Voting",
+    icon: <IconPackageImport size={50} />,
+    link: RouterVote.splash,
+  },
+
+  {
+    id: 4,
+    name: "Crowd Funding",
+    icon: <IconHeartHandshake size={50} />,
+    link: `/dev/crowd/splash`,
+  },
+];
+
+export const menuHomeJob = {
+  name: "Job Vacancy",
+  icon: <IconBriefcase size={50} />,
+  link: RouterJob.spalsh,
+};

src/app_modules/home/fun/get/api_home.ts

@@ -0,0 +1,4 @@
+export const apiGetDataHome = async (path?: string) => {
+   const response = await fetch(`/api/new/home${(path) ? path : ''}`)
+   return await response.json().catch(() => null)
+}

src/app_modules/home/index.ts

@@ -1,4 +1,6 @@
+import { listMenuHomeFooter } from './component/list_menu_home';
 import HomeView from "./view_home";
+import HomeViewNew from "./view_home_new";
 import Home_UserNotActive from "./user_non_active";
 
-export { HomeView, Home_UserNotActive as Home_UserNonActive };
+export { HomeView, HomeViewNew, listMenuHomeFooter, Home_UserNotActive as Home_UserNonActive };

src/app_modules/home/view_home_new.tsx

@@ -0,0 +1,127 @@
+"use client";
+import { gs_count_ntf, gs_user_ntf } from "@/app/lib/global_state";
+import { RouterNotifikasi } from "@/app/lib/router_hipmi/router_notifikasi";
+import { RouterUserSearch } from "@/app/lib/router_hipmi/router_user_search";
+import { ActionIcon, Indicator, Text } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconBell, IconUserSearch } from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { MainColor } from "../_global/color";
+import { ComponentGlobal_NotifikasiPeringatan } from "../_global/notif_global";
+import UIGlobal_LayoutHeaderTamplate from "../_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "../_global/ui/ui_layout_tamplate";
+import notifikasi_countUserNotifikasi from "../notifikasi/fun/count/fun_count_by_id";
+import BodyHome from "./component/body_home";
+import FooterHome from "./component/footer_home";
+import { apiGetDataHome } from "./fun/get/api_home";
+
+export default function HomeViewNew({ countNotifikasi }: { countNotifikasi: number; }) {
+   const [countNtf, setCountNtf] = useState(countNotifikasi);
+   const [newUserNtf, setNewUserNtf] = useAtom(gs_user_ntf);
+   const [countLoadNtf, setCountLoadNtf] = useAtom(gs_count_ntf);
+   const [dataUser, setDataUser] = useState<any>({})
+   const router = useRouter();
+
+
+   useShallowEffect(() => {
+      onLoadNotifikasi({
+         onLoad(val) {
+            setCountNtf(val);
+         },
+      });
+
+      setCountNtf(countLoadNtf as any);
+   }, [countLoadNtf, setCountNtf]);
+
+   useShallowEffect(() => {
+      setCountNtf(countNtf + newUserNtf);
+      setNewUserNtf(0);
+   }, [newUserNtf, setCountNtf]);
+
+   async function onLoadNotifikasi({ onLoad }: { onLoad: (val: any) => void }) {
+      const loadNotif = await notifikasi_countUserNotifikasi();
+      onLoad(loadNotif);
+   }
+
+   useShallowEffect(() => {
+      cekUserLogin();
+   }, []);
+
+
+   async function cekUserLogin() {
+      try {
+         const response = await apiGetDataHome("?cat=cek_profile")
+         if (response.success) {
+            setDataUser(response.data);
+         }
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   return (
+      <>
+         <UIGlobal_LayoutTamplate
+            header={
+               <UIGlobal_LayoutHeaderTamplate
+                  title="HIPMI"
+                  customButtonLeft={
+                     <ActionIcon
+                        radius={"xl"}
+                        variant={"transparent"}
+                        onClick={() => {
+                           if (dataUser.profile === undefined || dataUser?.profile === null) {
+                              ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
+                           } else {
+                              router.push(RouterUserSearch.main, { scroll: false });
+                           }
+                        }}
+                     >
+                        <IconUserSearch color="white" />
+                     </ActionIcon>
+                  }
+                  customButtonRight={
+                     <ActionIcon
+                        variant="transparent"
+                        onClick={() => {
+                           if (dataUser.profile === undefined || dataUser?.profile === null) {
+                              ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
+                           } else {
+                              router.push(RouterNotifikasi.categoryApp({ name: "semua" }), {
+                                 scroll: false,
+                              });
+                           }
+                        }}
+                     >
+                        {
+                           countNotifikasi > 0
+                              ?
+                              <Indicator
+                                 processing
+                                 color={MainColor.yellow}
+                                 label={
+                                    <Text fz={10} c={MainColor.darkblue}>
+                                       {countNotifikasi > 99 ? "99+" : countNotifikasi}
+                                    </Text>
+                                 }
+                              >
+                                 <IconBell color="white" />
+                              </Indicator>
+                              :
+                              <IconBell color="white" />
+                        }
+
+                     </ActionIcon>
+                  }
+               />
+            }
+
+            footer={<FooterHome />}
+         >
+            <BodyHome />
+         </UIGlobal_LayoutTamplate>
+      </>
+   );
+}

src/app_modules/katalog/index.ts

@@ -1,2 +1,4 @@
+import ViewKatalogNew from "./view_katalog_new";
 
 export { Katalog_MainView } from "./view_katalog";
+export { ViewKatalogNew }

src/app_modules/katalog/portofolio/index.ts

@@ -1,3 +1,5 @@
+import { IListPortofolio } from './lib/type_portofolio';
+import { apiGetPortofolioByProfile } from './lib/api_portofolio';
 import CreatePortofolio from "./create/view";
 import CreatePortofolioLayout from "./create/layout";
 import PortofolioLayout from "./ui/ui_layout";
@@ -20,6 +22,8 @@ export {
   LayoutPortofolio_EditDataBisnis,
   LayoutPortofolio_EditLogoBisnis,
   LayoutPortofolio_EditMedsosBisnis,
+  apiGetPortofolioByProfile
 };
+export type { IListPortofolio };
 export { Portofolio_ViewListDetail } from "./view/view_list_detail_portofolio";
 

src/app_modules/katalog/portofolio/lib/api_portofolio.ts

@@ -0,0 +1,4 @@
+export const apiGetPortofolioByProfile = async (path?: string) => {
+   const response = await fetch(`/api/new/portofolio${(path) ? path : ''}`)
+   return await response.json().catch(() => null)
+}

src/app_modules/katalog/portofolio/lib/type_portofolio.ts

@@ -0,0 +1,6 @@
+export interface IListPortofolio {
+   id: string
+   id_Portofolio: string
+   profileId: string
+   namaBisnis: string
+}

src/app_modules/katalog/ui/list_portolio_new.tsx

@@ -0,0 +1,139 @@
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
+import { Box, Center, Group, Paper, Skeleton, Stack, Text, Title } from "@mantine/core";
+import { apiGetPortofolioByProfile, IListPortofolio } from "../portofolio";
+import { useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { useShallowEffect } from "@mantine/hooks";
+import _ from "lodash";
+import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
+import { IconCaretRight } from "@tabler/icons-react";
+
+export default function ListPortofolioProfileNew() {
+   const router = useRouter();
+   const param = useParams<{ id: string }>()
+   const [loading, setLoading] = useState(true)
+   const [dataPortofolio, setDataPortofolio] = useState<IListPortofolio[]>([])
+
+   async function getPortofolio() {
+      try {
+         setLoading(true)
+         const response = await apiGetPortofolioByProfile(`?profile=${param.id}&page=profile`)
+         if (response.success) {
+            setDataPortofolio(response.data);
+         }
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoading(false)
+      }
+   }
+
+
+   useShallowEffect(() => {
+      getPortofolio()
+   }, []);
+
+
+   return (
+      <>
+         <Box
+            style={{
+               backgroundColor: AccentColor.darkblue,
+               border: `2px solid ${AccentColor.blue}`,
+               borderRadius: "10px ",
+               padding: "15px",
+               color: "white",
+            }}
+         >
+            <Stack spacing={"sm"}>
+               <Group position="center">
+                  <Title order={4}>Portofolio</Title>
+               </Group>
+
+               <Stack
+                  style={{
+                     height: "auto",
+                  }}
+               >
+                  {
+                     loading ?
+                        <>
+                           <Skeleton height={70} radius={"md"} width={"100%"} />
+                           <Skeleton height={70} radius={"md"} width={"100%"} />
+                        </>
+                        :
+
+                        _.isEmpty(dataPortofolio) ? (
+                           <Center>
+                              <Text fs={"italic"} fz={"xs"} c={"gray"}>
+                                 - Belum Ada Portofolio -
+                              </Text>
+                           </Center>
+                        ) : (
+                           <Stack>
+                              {dataPortofolio.map((e, i) => (
+                                 <Paper
+                                    shadow="sm"
+                                    key={i}
+                                    radius={"md"}
+                                    onClick={() => {
+                                       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">
+                                       <Stack spacing={0} w={"80%"}>
+                                          <Text fw={"bold"} lineClamp={1}>
+                                             {e?.namaBisnis}
+                                          </Text>
+                                          <Text fz={10} c={MainColor.yellow}>
+                                             #{e.id_Portofolio}
+                                          </Text>
+                                       </Stack>
+                                       <Stack>
+                                          <IconCaretRight color="white" size={25} />
+                                       </Stack>
+                                    </Group>
+                                 </Paper>
+                              ))}
+                           </Stack>
+                        )
+                  }
+
+                  {
+                     loading ? <></>
+                        :
+                        _.isEmpty(dataPortofolio) ? (
+                           ""
+                        ) : (
+                           <Group position="right">
+                              <Text
+                                 style={{
+                                    cursor: "pointer",
+                                 }}
+                                 onClick={() =>
+                                    router.push(
+                                       RouterPortofolio.daftar_portofolio + param.id,
+                                       { scroll: false }
+                                    )
+                                 }
+                                 fw={"bold"}
+                                 fz={"sm"}
+                              >
+                                 Lihat semua
+                              </Text>
+                           </Group>
+                        )
+                  }
+               </Stack>
+            </Stack>
+         </Box>
+      </>
+   )
+}

src/app_modules/katalog/ui/profile_detail.tsx

@@ -0,0 +1,131 @@
+import { AccentColor } from "@/app_modules/_global/color";
+import { apiGetUserProfile, IUserProfile } from "@/app_modules/user";
+import { Box, Center, Group, Stack, Text, ThemeIcon } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconBrandGmail, IconGenderFemale, IconGenderMale, IconHome, IconPhone } from "@tabler/icons-react";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import { Profile_ComponentAvatarProfile, Profile_ComponentLoadBackgroundImage } from "../profile/_component";
+import SkeletonProfile from "./skeleton_profile";
+
+export default function ProfileDetail() {
+   const param = useParams<{ id: string }>()
+   const [loading, setLoading] = useState(true)
+   const [dataProfile, setDataProfile] = useState<IUserProfile>()
+   const listInformation = [
+      {
+         icon: <IconPhone />,
+         value: "+" + dataProfile?.nomor,
+      },
+      {
+         icon: <IconBrandGmail />,
+         value: dataProfile?.email,
+      },
+      {
+         icon: <IconHome />,
+         value: dataProfile?.alamat,
+      },
+      {
+         icon:
+            dataProfile?.jenisKelamin === "Laki-laki" ? (
+               <IconGenderMale />
+            ) : (
+               <IconGenderFemale />
+            ),
+         value: dataProfile?.jenisKelamin,
+      },
+   ];
+
+
+   async function getProfile() {
+      try {
+         setLoading(true)
+         const response = await apiGetUserProfile(`?profile=${param.id}`)
+         if (response.success) {
+            setDataProfile(response.data);
+         }
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoading(false)
+      }
+   }
+
+
+   useShallowEffect(() => {
+      getProfile()
+   }, []);
+
+   return <>
+      <Stack
+         spacing={0}
+         style={{
+            backgroundColor: AccentColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+            borderRadius: "10px ",
+            padding: "15px",
+            color: "white",
+         }}
+      >
+         {
+            loading ?
+               <SkeletonProfile /> :
+               <>
+                  <Box>
+                     <Profile_ComponentLoadBackgroundImage
+                        fileId={dataProfile?.imageBackgroundId as any}
+                        size={500}
+                     />
+
+                     <Box
+                        sx={{
+                           position: "relative",
+                           bottom: 60,
+                           margin: "auto",
+                           width: "100%",
+                           marginBottom: -30,
+                        }}
+                     >
+                        <Center>
+                           <Profile_ComponentAvatarProfile
+                              fileId={dataProfile?.imageId as any}
+                              style={{
+                                 borderStyle: "solid",
+                                 borderColor: AccentColor.darkblue,
+                                 borderWidth: "2px",
+                              }}
+                           />
+                        </Center>
+                        <Stack align="center" c={"white"} mt={"xs"} spacing={0}>
+                           <Text fw={"bold"} lineClamp={1}>
+                              {dataProfile?.name}
+                           </Text>
+                           <Text fs={"italic"} fz={"sm"} lineClamp={1}>
+                              @{dataProfile?.username}
+                           </Text>
+                        </Stack>
+                     </Box>
+                  </Box>
+                  <Box>
+                     <Stack spacing={"xs"}>
+                        {listInformation.map((e, i) => (
+                           <Group key={i} align="flex-start">
+                              <ThemeIcon
+                                 style={{
+                                    backgroundColor: "transparent",
+                                 }}
+                              >
+                                 {e.icon}
+                              </ThemeIcon>
+                              <Box w={"85%"}>
+                                 <Text fw={"bold"}>{e?.value}</Text>
+                              </Box>
+                           </Group>
+                        ))}
+                     </Stack>
+                  </Box>
+               </>
+         }
+      </Stack>
+   </>;
+}

src/app_modules/katalog/ui/skeleton_profile.tsx

@@ -0,0 +1,42 @@
+import { Avatar, Box, Center, Grid, Skeleton, Stack } from "@mantine/core";
+
+export default function SkeletonProfile() {
+   return (
+      <>
+         <Box mb={"lg"}>
+            <Skeleton height={200} radius={"md"} />
+            <Box
+               sx={{
+                  position: "relative",
+                  bottom: 60,
+                  width: "100%",
+                  marginBottom: -30,
+               }}
+            >
+               <Center>
+                  <Avatar radius={"50%"} size={100} bg={"gray"} />
+               </Center>
+            </Box>
+            <Stack align="center" justify="center" spacing={"xs"}>
+               <Skeleton height={15} radius={"md"} width={"50%"} />
+               <Skeleton height={15} radius={"md"} width={"20%"} />
+            </Stack>
+
+            <Box mt={"lg"}>
+               {[...Array(4)].map((_, index) => (
+                  <Box key={index} py={5}>
+                     <Grid align="center">
+                        <Grid.Col span={1}>
+                           <Skeleton w={25} h={25} />
+                        </Grid.Col>
+                        <Grid.Col span={11}>
+                           <Skeleton w={"100%"} h={15} />
+                        </Grid.Col>
+                     </Grid>
+                  </Box>
+               ))}
+            </Box>
+         </Box>
+      </>
+   )
+}

src/app_modules/katalog/view_katalog_new.tsx

@@ -0,0 +1,20 @@
+'use client'
+import { Stack } from "@mantine/core";
+import ProfileDetail from "./ui/profile_detail";
+import ListPortofolioProfileNew from "./ui/list_portolio_new";
+
+export default function ViewKatalogNew() {
+   return (
+      <>
+         <Stack mb={"lg"}>
+            <ProfileDetail />
+            {/* <Portofolio_UiListView
+               listPorto={listPorto as any}
+               profile={profile}
+               userLoginId={userLoginId}
+            /> */}
+            <ListPortofolioProfileNew />
+         </Stack>
+      </>
+   )
+}

src/app_modules/user/index.ts

@@ -0,0 +1,5 @@
+import { IUserProfile } from './lib/type_user';
+import { apiGetUserProfile } from "./lib/api_user";
+
+export { apiGetUserProfile };
+export type { IUserProfile };

src/app_modules/user/lib/api_user.ts

@@ -0,0 +1,4 @@
+export const apiGetUserProfile = async (path?: string) => {
+   const response = await fetch(`/api/new/user${(path) ? path : ''}`)
+   return await response.json().catch(() => null)
+}

src/app_modules/user/lib/type_user.ts

@@ -0,0 +1,14 @@
+export interface IUserProfile {
+   id: string
+   username: string
+   nomor: string
+   active:boolean
+   masterUserRoleId: string
+   idProfile: string
+   name: string
+   email: string
+   alamat: string
+   jenisKelamin: string
+   imageId: string
+   imageBackgroundId: string
+}

src/middleware.ts

@@ -32,6 +32,7 @@ const middlewareConfig: MiddlewareConfig = {
     "/auth/api/login",
     "/aset/global/main_background.png",
     "/aset/logo/logo-hipmi.png",
+    "/api/new/*"
   ],
   encodedKey: process.env.NEXT_PUBLIC_BASE_TOKEN_KEY!,
   sessionKey: process.env.NEXT_PUBLIC_BASE_SESSION_KEY!,