#style: UI Katalog

Desc:
- Tampilan UI katalog selesai diubah
## No Issuee

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

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

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

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

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

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

src/app_modules/auth/index.ts

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

src/app_modules/auth/logout/view.tsx

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

src/app_modules/auth/register/view.tsx

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

src/app_modules/auth/validasi/view.tsx

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

src/app_modules/component_global/ui/ui_drawer.tsx

@@ -12,6 +12,12 @@ import { MainColor, AccentColor } from "../color/color_pallet";
 import React from "react";
 import { useRouter } from "next/navigation";
 
+interface MODEL_DRAWER {
+  id: string;
+  name: string;
+  icon: string;
+  path: string;
+}
 export default function ComponentGlobal_UI_Drawer({
   opened,
   close,
@@ -19,7 +25,7 @@ export default function ComponentGlobal_UI_Drawer({
 }: {
   opened: boolean;
   close: () => void;
-  component: any[];
+  component: MODEL_DRAWER[] | any[];
 }) {
   const router = useRouter();
   return (
@@ -32,10 +38,16 @@ export default function ComponentGlobal_UI_Drawer({
         withCloseButton={false}
         styles={{
           content: {
+            padding: 0,
+            position: "absolute",
+            margin: "auto",
             backgroundColor: "transparent",
+            left: 0,
+            right: 0,
+            width: 500,
           },
           body: {
-            backgroundColor: MainColor.darkblue,
+            backgroundColor: AccentColor.darkblue,
             borderTop: `2px solid ${AccentColor.blue}`,
             borderRight: `1px solid ${AccentColor.blue}`,
             borderLeft: `1px solid ${AccentColor.blue}`,
@@ -51,7 +63,7 @@ export default function ComponentGlobal_UI_Drawer({
               <IconX color="white" />
             </ActionIcon>
           </Group>
-          <SimpleGrid cols={4}>
+          <SimpleGrid cols={component.length < 4 ? component.length : 4}>
             {component.map((e, i) => (
               <Stack key={i} align="center" spacing={"xs"}>
                 <ActionIcon
@@ -61,7 +73,9 @@ export default function ComponentGlobal_UI_Drawer({
                 >
                   {e.icon}
                 </ActionIcon>
-                <Text color="white">{e.name}</Text>
+                <Text align="center" color="white">
+                  {e.name}
+                </Text>
               </Stack>
             ))}
           </SimpleGrid>

src/app_modules/component_global/ui/ui_layout_tamplate.tsx

@@ -27,11 +27,12 @@ export default function LayoutGlobal_UI_Tamplate({
         h={"100%"}
         style={{
           overflowY: "auto",
+          overflowX: "auto",
           backgroundColor: MainColor.black,
           position: "fixed",
         }}
       >
-        <Container mih={"100vh"} p={0} size={rem(500)} bg={MainColor.darkblue}>
+        <Container mih={"100vh"} p={0} size={rem(500)} bg={MainColor.darkblue} >
           <BackgroundImage
             src={"/aset/global/main_background.png"}
             h={"100vh"}

src/app_modules/home/user_non_active/index.tsx

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

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

@@ -14,7 +14,7 @@ import {
 } from "@mantine/core";
 import React from "react";
 import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
-import { IconDots, IconEdit, IconX } from "@tabler/icons-react";
+import { IconDots, IconDotsVertical, IconEdit, IconX } from "@tabler/icons-react";
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
 import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
@@ -54,7 +54,7 @@ export default function LayoutJob_DetailDraft({
             title="Detail Draft"
             iconRight={
               <ActionIcon variant="transparent" onClick={() => open()}>
-                <IconDots color="white" />
+                <IconDotsVertical color="white" />
               </ActionIcon>
             }
             // routerRight={}

src/app_modules/katalog/component/button_header_right.tsx

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

src/app_modules/katalog/component/drawer_katalog.tsx

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

src/app_modules/katalog/index.ts

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

src/app_modules/katalog/main/index.ts

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

src/app_modules/katalog/main/layout.tsx

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

src/app_modules/katalog/main/view.tsx

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

src/app_modules/katalog/main/view_katalog.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import Component_Logout from "@/app_modules/auth/logout/view";
+import {
+  Stack
+} from "@mantine/core";
+import { MODEL_PORTOFOLIO } from "../portofolio/model/interface";
+import { Portofolio_UiView } from "../portofolio/ui_portofolio";
+import { MODEL_PROFILE } from "../profile/model/interface";
+import { Profile_UiView } from "../profile/ui_profile";
+
+export default function KatalogView({
+  profile,
+  listPorto,
+  userLoginId,
+}: {
+  profile: MODEL_PROFILE;
+  listPorto: MODEL_PORTOFOLIO;
+  userLoginId: string;
+}) {
+  return (
+    <>
+      <Stack>
+        <Profile_UiView profile={profile as any} userLoginId={userLoginId} />
+        <Portofolio_UiView
+          listPorto={listPorto as any}
+          profile={profile}
+          userLoginId={userLoginId}
+        />
+      </Stack>
+    </>
+  );
+}

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

@@ -1,8 +1,11 @@
 "use client";
 
-import { myConsole } from "@/app/fun/my_console";
-import { ApiHipmi } from "@/app/lib/api";
 import { Warna } from "@/app/lib/warna";
+import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
+import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
 import {
   BIDANG_BISNIS_OLD,
   MODEL_PORTOFOLIO_OLD,
@@ -16,25 +19,16 @@ import {
   Paper,
   Select,
   Stack,
-  Text,
   TextInput,
-  Textarea,
+  Textarea
-  Title,
 } from "@mantine/core";
+import { IconCamera } from "@tabler/icons-react";
 import _ from "lodash";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import toast from "react-simple-toasts";
-import funCreatePortofolio from "../fun/fun_create_portofolio";
-import { IconCamera } from "@tabler/icons-react";
 import ComponentKatalog_NotedBox from "../../component/noted_box";
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import funCreatePortofolio from "../fun/fun_create_portofolio";
-import { NotifPeringatan } from "@/app_modules/donasi/component/notifikasi/notif_peringatan";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
-import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
-import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
 
 export default function CreatePortofolio({
   bidangBisnis,

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

@@ -42,7 +42,6 @@ export default function ListPortofolioView({
   userLoginId: string;
 }) {
   const router = useRouter();
-  // const [porto, setPorto] = useState(listPorto);
   const [loading, setLoading] = useState(false);
   const [loadingPorto, setLoadingPorto] = useState(false);
   const [idPorto, setIdPorto] = useState("");

src/app_modules/katalog/portofolio/ui_portofolio.tsx

@@ -0,0 +1,141 @@
+import { useRouter } from "next/navigation";
+import { MODEL_PROFILE } from "../profile/model/interface";
+import { MODEL_PORTOFOLIO } from "./model/interface";
+import { useState } from "react";
+import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
+import { Warna } from "@/app/lib/warna";
+import {
+  Paper,
+  Stack,
+  Group,
+  ActionIcon,
+  Title,
+  Box,
+  ScrollArea,
+  Center,
+  SimpleGrid,
+  Grid,
+  Loader,
+  Text,
+} from "@mantine/core";
+import { IconPencilPlus, IconCaretRight } from "@tabler/icons-react";
+import _ from "lodash";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
+import ComponentGlobal_UI_Loader from "@/app_modules/component_global/ui/ui_loader";
+
+export function Portofolio_UiView({
+  listPorto,
+  profile,
+  userLoginId,
+}: {
+  listPorto: MODEL_PORTOFOLIO[];
+  profile: MODEL_PROFILE;
+  userLoginId: string;
+}) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [loadingPorto, setLoadingPorto] = useState(false);
+  const [idPorto, setIdPorto] = useState("");
+  return (
+    <>
+      <Box
+        style={{
+          backgroundColor: AccentColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          borderRadius: "10px ",
+          padding: "15px",
+          color: "white",
+        }}
+      >
+        <Stack spacing={"sm"}>
+          <Group position="apart">
+            <ActionIcon variant="transparent" disabled></ActionIcon>
+            <Title order={4}>Portofolio</Title>
+            {profile?.User.id === userLoginId ? (
+              <ActionIcon
+                variant="transparent"
+                onClick={() => {
+                  router.push(RouterPortofolio.create + `${profile.id}`);
+                  setLoading(true);
+                }}
+              >
+                {loading ? (
+                  <ComponentGlobal_UI_Loader />
+                ) : (
+                  <IconPencilPlus color={AccentColor.yellow} />
+                )}
+              </ActionIcon>
+            ) : (
+              <ActionIcon variant="transparent" disabled></ActionIcon>
+            )}
+          </Group>
+          <Box
+            h={
+              _.isEmpty(listPorto)
+                ? 50
+                : listPorto.length === 1
+                  ? 100
+                  : listPorto.length === 2
+                    ? 150
+                    : 200
+            }
+          >
+            <ScrollArea h={"100%"} scrollbarSize={10}>
+              {_.isEmpty(listPorto) ? (
+                <Center>
+                  <Text fs={"italic"} fz={"xs"} c={"gray"}>
+                    - Belum Ada Portofolio -
+                  </Text>
+                </Center>
+              ) : (
+                <SimpleGrid
+                  cols={4}
+                  spacing="md"
+                  breakpoints={[
+                    { maxWidth: "md", cols: 3, spacing: "md" },
+                    { maxWidth: "sm", cols: 2, spacing: "sm" },
+                    { maxWidth: "xs", cols: 1, spacing: "sm" },
+                  ]}
+                >
+                  {listPorto.map((e, i) => (
+                    <Paper
+                      shadow="sm"
+                      key={i}
+                      bg={"gray.5"}
+                      radius={"md"}
+                      onClick={() => {
+                        setIdPorto(e?.id);
+                        setLoadingPorto(true);
+                        router.push(`/dev/portofolio/main/${e?.id}/`);
+                      }}
+                    >
+                      <Grid align="center" p={"sm"}>
+                        <Grid.Col span={"auto"}>
+                          <Text fw={"bold"} lineClamp={1}>
+                            {e?.namaBisnis}
+                          </Text>
+                        </Grid.Col>
+                        <Grid.Col span={"content"}>
+                          <Stack>
+                            {idPorto === e?.id && loadingPorto ? (
+                              <Loader color="gray" size={25} />
+                            ) : (
+                              <IconCaretRight color="black" size={25} />
+                            )}
+                          </Stack>
+                        </Grid.Col>
+                      </Grid>
+                    </Paper>
+                  ))}
+                </SimpleGrid>
+              )}
+            </ScrollArea>
+          </Box>
+        </Stack>
+      </Box>
+    </>
+  );
+}

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

@@ -1,25 +1,17 @@
 "use client";
 
-import { myConsole } from "@/app/fun/my_console";
-import { ApiHipmi } from "@/app/lib/api";
 import { Warna } from "@/app/lib/warna";
 import { Button, Loader, Select, Stack, TextInput } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
-import { useAtom } from "jotai";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import toast from "react-simple-toasts";
 
-import funEditProfile from "../fun/fun_edit_profile";
+import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
-import { MODEL_PROFILE } from "../model/interface";
-import { Profile_funEditById } from "../fun/update/fun_edit_profile_by_id";
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import { validRegex } from "../../component/regular_expressions";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
+import { Profile_funEditById } from "../fun/update/fun_edit_profile_by_id";
-import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
+import { MODEL_PROFILE } from "../model/interface";
 
 export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
   const router = useRouter();

src/app_modules/katalog/profile/fun/get/get_one_user_profile.ts

@@ -8,21 +8,18 @@ export async function Profile_getOneProfileAndUserById(profileId: string) {
       id: profileId,
     },
     select: {
-        userId: true,
+      userId: true,
-        User: true,
+      User: true,
-        id: true,
+      id: true,
-        name: true,
+      name: true,
-        email: true,
+      email: true,
-        alamat: true,
+      alamat: true,
-        jenisKelamin: true,
+      jenisKelamin: true,
-        imagesId: true,
+      imagesId: true,
-        imagesBackgroundId: true,
+      imagesBackgroundId: true,
-        ImageProfile: true,
+      ImageProfile: true,
-        ImagesBackground: true
+      ImagesBackground: true,
-        
+    },
-
-
-    }
   });
   // console.log(data)
   return data;

src/app_modules/katalog/profile/index.ts

@@ -2,18 +2,12 @@ import ProfileLayout from "./create/layout";
 import CreateProfile from "./create/view";
 import EditProfileLayout from "./edit/layout";
 import EditProfileView from "./edit/view";
+import ProfileView from "./main/view_profile";
 import UploadFotoProfile from "./upload/foto_profile";
-import UploadFotoProfileLayout from "./upload/foto_profile/layout"
+import UploadFotoProfileLayout from "./upload/foto_profile/layout";
-import ProfileView from "./main/view";
-import Profile_UpdateFotoBackground from "./upload/foto_background";
-import LayoutProfile_UpdateFotoBackground from "./upload/foto_background/layout";
 
 export {
-  ProfileLayout,
+  CreateProfile, EditProfileLayout, EditProfileView, ProfileLayout, ProfileView, UploadFotoProfile,
-  CreateProfile,
+  UploadFotoProfileLayout
-  EditProfileView,
-  EditProfileLayout,
-  UploadFotoProfile,
-  UploadFotoProfileLayout,
-  ProfileView
 };
+

src/app_modules/katalog/profile/main/view_profile.tsx

@@ -31,6 +31,7 @@ import { useState } from "react";
 import { MODEL_PROFILE_OLD } from "@/app_modules/home/model/user_profile";
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import { MODEL_PROFILE } from "../model/interface";
+import { AccentColor, MainColor } from "@/app_modules/component_global/color/color_pallet";
 
 export default function ProfileView({
   profile,
@@ -44,16 +45,14 @@ export default function ProfileView({
   const [loadingBG, setLoadingBG] = useState(false);
   const [loadingEdit, setLoadingEdit] = useState(false);
 
-  // const [data, setData] = useState(profile);
-  // useShallowEffect(() => {
-  //   funGetUserProfile(user.id ?? "").then(setProfile as any);
-  // }, []);
 
-  // if (!profile) return <></>;
   return (
     <>
       {/* <pre>{JSON.stringify(profile, null,2)}</pre> */}
-      <Paper px={"md"} py={"sm"} bg={"gray.1"} shadow="lg" withBorder>
+      <Paper px={"md"} py={"sm"} shadow="lg" style={{
+        backgroundColor: MainColor.darkblue,
+        border: `2px solid ${AccentColor.blue}`,
+      }}>
         {/* Background dan foto */}
 
         {/* Upload Background Profile */}

src/app_modules/katalog/profile/ui_profile.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import {
+  MainColor,
+  AccentColor,
+} from "@/app_modules/component_global/color/color_pallet";
+import {
+  Avatar,
+  Box,
+  Center,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  ThemeIcon,
+} from "@mantine/core";
+import { MODEL_PROFILE } from "./model/interface";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import {
+  IconBrandGmail,
+  IconGenderFemale,
+  IconGenderMale,
+  IconHome,
+  IconPhone,
+} from "@tabler/icons-react";
+
+export function Profile_UiView({
+  profile,
+  userLoginId,
+}: {
+  profile: MODEL_PROFILE;
+  userLoginId: string;
+}) {
+  const router = useRouter();
+  const [loadingPP, setLoadingPP] = useState(false);
+  const [loadingBG, setLoadingBG] = useState(false);
+  const [loadingEdit, setLoadingEdit] = useState(false);
+
+  const listInformation = [
+    {
+      icon: <IconPhone />,
+      value: profile?.User.nomor,
+    },
+    {
+      icon: <IconBrandGmail />,
+      value: profile?.email,
+    },
+    {
+      icon: <IconHome />,
+      value: profile?.alamat,
+    },
+    {
+      icon:
+        profile.jenisKelamin === "Laki-laki" ? (
+          <IconGenderMale />
+        ) : (
+          <IconGenderFemale />
+        ),
+      value: profile?.jenisKelamin,
+    },
+  ];
+
+  return (
+    <>
+      <Stack
+        spacing={0}
+        style={{
+          backgroundColor: AccentColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          borderRadius: "10px ",
+          padding: "15px",
+          color: "white",
+        }}
+      >
+        <Box>
+          <Image
+            radius={"sm"}
+            height={200}
+            alt="Background"
+            src={
+              profile?.ImagesBackground.url
+                ? RouterProfile.api_url_background +
+                  `${profile?.ImagesBackground.url}`
+                : "/aset/no-image.png"
+            }
+          />
+          <Box
+            sx={{
+              position: "relative",
+              bottom: 60,
+              margin: "auto",
+              width: "100%",
+              marginBottom: -30,
+            }}
+          >
+            <Center>
+              <Avatar
+                bg={"gray.2"}
+                sx={{
+                  borderStyle: "solid",
+                  borderColor: "gray",
+                  borderWidth: "0.5px",
+                }}
+                src={
+                  profile?.ImageProfile?.url
+                    ? RouterProfile.api_url_foto +
+                      `${profile?.ImageProfile.url}`
+                    : "/aset/global/avatar.png"
+                }
+                size={100}
+                radius={"100%"}
+              />
+            </Center>
+            <Stack align="center" c={"white"} mt={"xs"} spacing={0}>
+              <Text fw={"bold"} lineClamp={1}>
+                {profile?.name}
+              </Text>
+              <Text fs={"italic"} fz={"sm"} lineClamp={1}>
+                @{profile?.User?.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>
+        {/* <pre
+          style={{
+            color: "white",
+          }}
+        >
+          {JSON.stringify(profile, null, 2)}
+        </pre> */}
+      </Stack>
+    </>
+  );
+}

src/app_modules/katalog/ui/ui_katalog.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { Stack } from "@mantine/core";
+import { Portofolio_UiView } from "../portofolio/ui_portofolio";
+import { Profile_UiView } from "../profile/ui_profile";
+import { MODEL_PORTOFOLIO } from "../portofolio/model/interface";
+import { MODEL_PROFILE } from "../profile/model/interface";
+
+
+export function Katalog_UiView({
+  profile,
+  listPorto,
+  userLoginId,
+}: {
+  profile: MODEL_PROFILE;
+  listPorto: MODEL_PORTOFOLIO;
+  userLoginId: string;
+}) {
+  return (
+    <>
+      <Stack>
+        <Profile_UiView profile={profile as any} userLoginId={userLoginId} />
+        <Portofolio_UiView
+          listPorto={listPorto as any}
+          profile={profile}
+          userLoginId={userLoginId}
+        />
+      </Stack>
+    </>
+  );
+}

src/app_modules/katalog/view_katalog.tsx

@@ -0,0 +1,23 @@
+import { MODEL_PORTOFOLIO } from "./portofolio/model/interface";
+import { MODEL_PROFILE } from "./profile/model/interface";
+import { Katalog_UiView } from "./ui/ui_katalog";
+
+export async function Katalog_MainView({
+  profile,
+  listPorto,
+  userLoginId,
+}: {
+  profile: MODEL_PROFILE;
+  listPorto: MODEL_PORTOFOLIO;
+  userLoginId: string;
+}) {
+  return (
+    <>
+      <Katalog_UiView
+        listPorto={listPorto}
+        profile={profile}
+        userLoginId={userLoginId}
+      />
+    </>
+  );
+}

src/app_modules/zCoba/index.tsx

@@ -2,36 +2,16 @@
 
 import {
   ActionIcon,
-  Affix,
-  BackgroundImage,
   Box,
   Button,
-  Center,
+  Stack
-  Group,
-  LoadingOverlay,
-  Paper,
-  ScrollArea,
-  SimpleGrid,
-  Skeleton,
-  Stack,
-  Text,
-  rem,
 } from "@mantine/core";
 import { useState } from "react";
 
-import useInfiniteScroll, {
+import { IconPencilPlus } from "@tabler/icons-react";
-  ScrollDirection,
-} from "react-easy-infinite-scroll-hook";
-import { createItems, loadMore } from "./utils";
-import { v4 as uuidv4 } from "uuid";
-import { useShallowEffect } from "@mantine/hooks";
-import { ScrollOnly } from "next-scroll-loader";
 import _ from "lodash";
-import ComponentGlobal_V2_LoadingPage from "../component_global/loading_page_v2";
 import LayoutGlobal_UI_Tamplate from "../component_global/ui/ui_layout_tamplate";
-import LayoutGlobal_UI_HeaderTamplate from "../component_global/ui/ui_header_tamplate";
+
-import { Icon123, IconPencilPlus, IconX } from "@tabler/icons-react";
-import { AccentColor, MainColor } from "../component_global/color/color_pallet";
 
 const newData = Array(20)
   .fill(0)
@@ -56,49 +36,16 @@ const data2 = [
 ];
 
 export default function Coba_TestLoading() {
-  // const [data, setData] = useState<any[]>(newData);
-  // const [isLoading, setIsLoading] = useState(false);
-
-  // return (
-  //   <>
-  //     <ScrollOnly
-  //       height="90vh"
-  //       data={data}
-  //       setData={setData}
-  //       moreData={async () => {
-  //         const newData = Array.from(
-  //           { length: 50 },
-  //           (_, i) => i + data.length + 1
-  //         );
-  //         await new Promise((resolve) => setTimeout(resolve, 2000));
-  //         return newData;
-  //       }}
-  //     >
-  //       {(item) => <div style={{height: 50}}> {item}</div>}
-  //     </ScrollOnly>
-  //   </>
-  // );
-
   const [data, setData] = useState(data2);
+  const [openDrawer, setOpenDrawer] = useState(false);
 
   return (
     <>
       <LayoutGlobal_UI_Tamplate>
-        <CreateButton />
+        {/* <CreateButton /> */}
+        <Button onClick={() => setOpenDrawer(true)}>Click</Button>
       </LayoutGlobal_UI_Tamplate>
-    </>
-  );
 
-  return (
-    <>
-      <Box h={"100%"} bg={"blue"}>
-        {Array(50)
-          .fill(0)
-          .map((e, i) => (
-            <Text key={i}>{i + 1}</Text>
-          ))}
-        <ComponentGlobal_V2_LoadingPage />
-      </Box>
     </>
   );
 
@@ -174,71 +121,3 @@ function CreateButton() {
     </>
   );
 }
-
-function BackgroundImageComponent() {
-  const footer = (
-    <SimpleGrid cols={4}>
-      {Array.from({ length: 4 }).map((e, i) => (
-        <Center key={i} h={"10vh"}>
-          <Stack align="center" c={"white"} spacing={0}>
-            <ActionIcon>
-              <IconX color="white" />
-            </ActionIcon>
-            <Text>Apa</Text>
-          </Stack>
-        </Center>
-      ))}
-    </SimpleGrid>
-  );
-  return (
-    <>
-      <BackgroundImage src={"/aset/global/main_background.png"} h={"100vh"}>
-        {/* Header */}
-        <Box
-          h={"8vh"}
-          style={{
-            zIndex: 98,
-          }}
-          w={"100%"}
-          pos={"sticky"}
-          top={0}
-        >
-          <LayoutGlobal_UI_HeaderTamplate title="Coba" />
-        </Box>
-
-        {/* Children */}
-        <Box h={"82vh"} pos={"static"}>
-          <ScrollArea h={"100%"} px={"md"}>
-            {Array.from({ length: 10 }).map((e, i) => (
-              <Box bg={"blue"} key={i} mb={"md"} py={"lg"}>
-                {i + 1}
-              </Box>
-            ))}
-          </ScrollArea>
-        </Box>
-
-        {/* Footer */}
-        <Box style={{ position: "relative", bottom: 0 }} bg={"red"}>
-          <Box
-            style={{
-              zIndex: 1,
-              borderRadius: "20px 20px 0px 0px",
-              borderTop: `2px solid ${AccentColor.blue}`,
-              borderRight: `1px solid ${AccentColor.blue}`,
-              borderLeft: `1px solid ${AccentColor.blue}`,
-              position: "absolute",
-              width: "100%",
-              backgroundColor: MainColor.darkblue,
-            }}
-            color="blue"
-            // pos={"fixed"}
-            // bottom={0}
-            h={"10vh"}
-          >
-            {footer}
-          </Box>
-        </Box>
-      </BackgroundImage>
-    </>
-  );
-}