fix (upload image)

deskripsi:
- upload image di portofolio

src/app/api/image/delete/route.ts

@@ -4,8 +4,6 @@ import { NextResponse } from "next/server";
 
 export async function DELETE(req: Request) {
   const data = await req.json();
-
-  console.log("data request =>", data);
   const id = data.fileId;
   const dirId = data.dirId;
 

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

@@ -1,24 +1,12 @@
+import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { LayoutKatalogNew } from "@/app_modules/katalog/main";
 
-export default async function Layout({ children, params, }: { children: any; params: { id: string } }) {
+export default async function Layout({ children }: { children: any }) {
-  // const profileId = params.id;
+  const userLoginId = await funGetUserIdByToken();
-  // const dataProfile = await Profile_getOneProfileAndUserById(profileId);
-  // const authorId = dataProfile?.userId;
-
-  // const userLoginId = await funGetUserIdByToken();
-  // const userRoleId = dataProfile?.User?.masterUserRoleId;
 
   return (
     <>
-      {/* <KatalogLayout
+      <LayoutKatalogNew userLoginId={userLoginId}>{children}</LayoutKatalogNew>
-        profileId={profileId}
-        userLoginId={userLoginId as string}
-        authorId={authorId as any}
-        userRoleId={userRoleId as string}
-      >
-        {children}
-      </KatalogLayout> */}
-      <LayoutKatalogNew>{children}</LayoutKatalogNew>
     </>
   );
 }

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

@@ -1,20 +1,14 @@
+import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { PortofolioLayoutNew } from "@/app_modules/katalog/portofolio";
 
-export default async function Layout({ children, params, }: { children: any; params: { id: string }; }) {
+export default async function Layout({ children, }: { children: any;  }) {
-  // let portoId = params.id;
+  const userLoginId = await funGetUserIdByToken();
-  // const getPorto = await portofolio_getOneById(portoId);
-  // const userLoginId = await funGetUserIdByToken();
 
   return (
     <>
-      {/* <PortofolioLayout
+      <PortofolioLayoutNew userLoginId={userLoginId}>
-        portoId={portoId}
-        userLoginId={userLoginId as string}
-        authorId={getPorto?.Profile?.User?.id as any}
-      >
         {children}
-      </PortofolioLayout> */}
+      </PortofolioLayoutNew>
-      <PortofolioLayoutNew>{children}</PortofolioLayoutNew>
     </>
   );
 }

src/app/lib/id-derectory.ts

@@ -1,6 +1,6 @@
 const DIRECTORY_ID = {
-  profile_foto: "cm0x93rgo000jbp5tj8baoaus",
+  profile_foto: "cm5ni43ub001pxpug0qw4p11e",
-  profile_background: "cm0x93ze8000lbp5t1a8uc9wl",
+  profile_background: "cm5ni4hnq001l12p9gpagxgtv",
   portofolio_logo: "cm0yjl6ug000310njwmk6j0tx",
   map_pin: "cm0yjq8up000710njv5klra32",
   map_image: "cm0yjqnxl000910njplqho07w",

src/app_modules/_global/fun/delete/fun_delete_file_by_id.tsx

@@ -22,29 +22,7 @@ export async function funGlobal_DeleteFileById({
       return { success: false, message: data.message };
     }
   } catch (error) {
-    console.error("Upload error:", error);
+    clientLogger.error("Upload error:", error);
     return { success: false, message: "An unexpected error occurred" };
   }
-  // try {
-  //   const res = await fetch(
-  //     `https://wibu-storage.wibudev.com/api/files/${fileId}/delete`,
-  //     {
-  //       method: "DELETE",
-  //       headers: {
-  //         Authorization: `Bearer ${process.env.WS_APIKEY}`,
-  //       },
-  //     }
-  //   );
-
-  //   if (res.ok) {
-  //     const hasil = await res.json();
-  //     return { success: true, message: "File berhasil dihapus" };
-  //   } else {
-  //     const errorText = await res.json();
-  //     return { success: false, message: errorText.message };
-  //   }
-  // } catch (error) {
-  //   console.error("Upload error:", error);
-  //   return { success: false, message: "An unexpected error occurred" };
-  // }
 }

src/app_modules/home/component/footer_home.tsx

@@ -18,10 +18,11 @@ import { Home_ComponentAvatarProfile } from "./comp_avatar_profile";
 import { listMenuHomeFooter } from "./list_menu_home";
 import { MainColor } from "@/app_modules/_global/color";
 import { clientLogger } from "@/util/clientLogger";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
 export default function FooterHome() {
   const router = useRouter();
-  const [dataUser, setDataUser] = useState<any>({});
+  const [dataUser, setDataUser] = useState<any | null>(null);
 
   useShallowEffect(() => {
     cekUserLogin();
@@ -36,7 +37,7 @@ export default function FooterHome() {
         setDataUser(response.data);
       }
     } catch (error) {
-      clientLogger.error("Error get data profile",error);
+      clientLogger.error("Error get data profile", error);
     }
   }
 
@@ -50,84 +51,101 @@ export default function FooterHome() {
       bottom={0}
       h={"9vh"}
     >
-      <SimpleGrid cols={listMenuHomeFooter.length + 1}>
+      {dataUser?.profile === undefined || dataUser?.profile === null ? (
-        {listMenuHomeFooter.map((e) => (
+        <SimpleGrid cols={4}>
-          <Center h={"9vh"} key={e.id}>
+          {Array.from(new Array(4)).map((_, i) => (
+            <Center h={"9vh"} key={i}>
+              <Stack align="center">
+                <CustomSkeleton radius={"lg"} height={40} w={40} />
+              </Stack>
+            </Center>
+          ))}
+        </SimpleGrid>
+      ) : (
+        <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
+                  ) {
+                    return null;
+                  } else if (
+                    dataUser.profile === undefined ||
+                    dataUser?.profile === null
+                  ) {
+                    router.push(RouterProfile.create, { scroll: false });
+                  } else {
+                    if (e.link == "") {
+                      ComponentGlobal_NotifikasiPeringatan("Cooming Soon");
+                    } else {
+                      router.push(e.link, { scroll: false });
+                    }
+                  }
+                }}
+              >
+                <ActionIcon
+                  radius={"xl"}
+                  c={e.link === "" ? "gray" : MainColor.white}
+                  variant="transparent"
+                >
+                  {e.icon}
+                </ActionIcon>
+                <Text
+                  lineClamp={1}
+                  c={e.link === "" ? "gray" : MainColor.white}
+                  fz={12}
+                >
+                  {e.name}
+                </Text>
+              </Stack>
+            </Center>
+          ))}
+
+          <Center h={"9vh"}>
             <Stack
               align="center"
-              spacing={0}
+              spacing={2}
               onClick={() => {
                 if (
                   dataUser.profile === undefined ||
                   dataUser?.profile === null
-                ) {
-                  return null;
-                } else if (
-                  dataUser.profile === undefined ||
-                  dataUser?.profile === null
                 ) {
                   router.push(RouterProfile.create, { scroll: false });
                 } else {
-                  if (e.link == "") {
+                  router.push(
-                    ComponentGlobal_NotifikasiPeringatan("Cooming Soon");
+                    RouterProfile.katalogOLD + `${dataUser?.profile}`,
-                  } else {
+                    {
-                    router.push(e.link, { scroll: false });
+                      scroll: false,
-                  }
+                    }
+                  );
                 }
               }}
             >
-              <ActionIcon
+              <ActionIcon variant={"transparent"}>
-                radius={"xl"}
+                {dataUser.profile === undefined ||
-                c={e.link === "" ? "gray" : MainColor.white}
+                dataUser?.profile === null ? (
-                variant="transparent"
+                  <IconUserCircle color={MainColor.white} />
-              >
+                ) : (
-                {e.icon}
+                  <Home_ComponentAvatarProfile
+                    url={APIs.GET({
+                      fileId: dataUser?.imageId as string,
+                      size: "50",
+                    })}
+                  />
+                )}
               </ActionIcon>
-              <Text lineClamp={1} c={e.link === "" ? "gray" : MainColor.white} fz={12}>
+              <Text fz={10} c={MainColor.white}>
-                {e.name}
+                Profile
               </Text>
             </Stack>
           </Center>
-        ))}
+        </SimpleGrid>
-
+      )}
-        <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={MainColor.white} />
-              ) : (
-                <Home_ComponentAvatarProfile
-                  url={APIs.GET({
-                    fileId: dataUser?.imageId as string,
-                    size: "50",
-                  })}
-                />
-              )}
-            </ActionIcon>
-            <Text fz={10} c={MainColor.white}>
-              Profile
-            </Text>
-          </Stack>
-        </Center>
-      </SimpleGrid>
     </Box>
   );
 }

src/app_modules/home/view_home_new.tsx

@@ -18,11 +18,12 @@ import BodyHome from "./component/body_home";
 import FooterHome from "./component/footer_home";
 import { apiGetDataHome } from "./fun/get/api_home";
 import { clientLogger } from "@/util/clientLogger";
+import CustomSkeleton from "../components/CustomSkeleton";
 
 export default function HomeViewNew() {
   const [countNtf, setCountNtf] = useAtom(gs_count_ntf);
   const [newUserNtf, setNewUserNtf] = useAtom(gs_user_ntf);
-  const [dataUser, setDataUser] = useState<any>({});
+  const [dataUser, setDataUser] = useState<any | null>(null);
   const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
   const router = useRouter();
 
@@ -67,61 +68,69 @@ export default function HomeViewNew() {
           <UIGlobal_LayoutHeaderTamplate
             title="HIPMI"
             customButtonLeft={
-              <ActionIcon
+              dataUser?.profile == null ? (
-                radius={"xl"}
+                <CustomSkeleton width={20} height={20} circle />
-                disabled={countNtf == null}
+              ) : (
-                variant={"transparent"}
+                <ActionIcon
-                onClick={() => {
+                  radius={"xl"}
-                  if (
+                  disabled={countNtf == null}
-                    dataUser.profile != undefined ||
+                  variant={"transparent"}
-                    dataUser?.profile != null
+                  onClick={() => {
-                  ) {
+                    if (
-                    router.push(RouterUserSearch.main, { scroll: false });
+                      dataUser.profile != undefined ||
-                  } else {
+                      dataUser?.profile != null
-                    router.push(RouterProfile.create, { scroll: false });
+                    ) {
-                  }
+                      router.push(RouterUserSearch.main, { scroll: false });
-                }}
+                    } else {
-              >
+                      router.push(RouterProfile.create, { scroll: false });
-                <IconUserSearch color={MainColor.white} />
+                    }
-              </ActionIcon>
+                  }}
+                >
+                  <IconUserSearch color={MainColor.white} />
+                </ActionIcon>
+              )
             }
             customButtonRight={
-              <ActionIcon
+              dataUser?.profile == null ? (
-                variant="transparent"
+                <CustomSkeleton width={20} height={20} circle />
-                disabled={countNtf == null}
+              ) : (
-                onClick={() => {
+                <ActionIcon
-                  if (
+                  variant="transparent"
-                    dataUser.profile != undefined ||
+                  disabled={countNtf == null}
-                    dataUser?.profile != null
+                  onClick={() => {
-                  ) {
+                    if (
-                    setCategoryPage("Semua");
+                      dataUser.profile != undefined ||
-                    router.push(
+                      dataUser?.profile != null
-                      RouterNotifikasi.categoryApp({ name: "semua" }),
+                    ) {
-                      {
+                      setCategoryPage("Semua");
-                        scroll: false,
+                      router.push(
-                      }
+                        RouterNotifikasi.categoryApp({ name: "semua" }),
-                    );
+                        {
-                  } else {
+                          scroll: false,
-                    router.push(RouterProfile.create, { scroll: false });
+                        }
-                  }
+                      );
-                }}
+                    } else {
-              >
+                      router.push(RouterProfile.create, { scroll: false });
-                {countNtf != null && countNtf > 0 ? (
-                  <Indicator
-                    processing
-                    color={MainColor.yellow}
-                    label={
-                      <Text fz={10} c={MainColor.darkblue}>
-                        {countNtf > 99 ? "99+" : countNtf}
-                      </Text>
                     }
-                  >
+                  }}
+                >
+                  {countNtf != null && countNtf > 0 ? (
+                    <Indicator
+                      processing
+                      color={MainColor.yellow}
+                      label={
+                        <Text fz={10} c={MainColor.darkblue}>
+                          {countNtf > 99 ? "99+" : countNtf}
+                        </Text>
+                      }
+                    >
+                      <IconBell color={MainColor.white} />
+                    </Indicator>
+                  ) : (
                     <IconBell color={MainColor.white} />
-                  </Indicator>
+                  )}
-                ) : (
+                </ActionIcon>
-                  <IconBell color={MainColor.white} />
+              )
-                )}
-              </ActionIcon>
             }
           />
         }

src/app_modules/katalog/main/layout_new.tsx

@@ -1,66 +1,85 @@
-'use client'
+"use client";
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
-import { UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate } from "@/app_modules/_global/ui";
+import {
+  UIGlobal_LayoutHeaderTamplate,
+  UIGlobal_LayoutTamplate,
+} from "@/app_modules/_global/ui";
 import { apiGetUserProfile } from "@/app_modules/user";
-import { ActionIcon } from "@mantine/core";
+import { ActionIcon, Skeleton } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import { IconDotsVertical } from "@tabler/icons-react";
 import { useParams } from "next/navigation";
 import { useState } from "react";
 import DrawerKatalogNew from "../component/drawer_katalog_new";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
-export default function LayoutKatalogNew({ children }: { children: any }) {
+export default function LayoutKatalogNew({
-   const param = useParams<{ id: string }>()
+  children,
-   const [authorId, setAuthorId] = useState("")
+  userLoginId,
-   const [userRoleId, setUserRoleId] = useState("")
+}: {
-   const [userLoginId, setUserLoginId] = useState("")
+  children: any;
-   const [opened, { open, close }] = useDisclosure()
+  userLoginId: string;
-   const [loading, setLoading] = useState(true);
+}) {
+  const param = useParams<{ id: string }>();
+  const [authorId, setAuthorId] = useState("");
+  const [userRoleId, setUserRoleId] = useState("");
+  const [opened, { open, close }] = useDisclosure();
+  const [loading, setLoading] = useState(true);
 
-   async function getProfile() {
+  async function getProfile() {
-      try {
+    try {
-         setLoading(true)
+      setLoading(true);
-         const response = await apiGetUserProfile(`?profile=${param.id}`)
+      const response = await apiGetUserProfile(`?profile=${param.id}`);
-         const response2 = await funGetUserIdByToken()
+
-         if (response) {
+      if (response) {
-            setAuthorId(response.data.id)
+        setAuthorId(response.data.id);
-            setUserRoleId(response.data.masterUserRoleId)
+        setUserRoleId(response.data.masterUserRoleId);
-            setUserLoginId(response2)
-         }
-      } catch (error) {
-         console.error(error);
-      } finally {
-         setLoading(false)
       }
-   }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  }
 
-   useShallowEffect(() => {
+  useShallowEffect(() => {
-      getProfile()
+    getProfile();
-   }, [])
+  }, []);
 
-   return (
+  return (
-      <>
+    <>
-         <UIGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
-            header={
+        header={
-               <UIGlobal_LayoutHeaderTamplate
+          <UIGlobal_LayoutHeaderTamplate
-                  title="KATALOG"
+            title="KATALOG"
-                  customButtonRight={
+            customButtonRight={
-                     loading ?
+              loading ? (
-                        <ActionIcon disabled variant="transparent"></ActionIcon> :
+                <ActionIcon disabled variant="transparent">
-                        authorId == userLoginId ? (
+                  <CustomSkeleton h={20} w={20} radius={"100%"} />
-                           <ActionIcon c="white" variant="transparent" onClick={() => open()}>
+                </ActionIcon>
-                              <IconDotsVertical />
+              ) : authorId == userLoginId ? (
-                           </ActionIcon>
+                <ActionIcon
-                        ) : (
+                  c="white"
-                           <ActionIcon disabled variant="transparent"></ActionIcon>
+                  variant="transparent"
-                        )
+                  onClick={() => open()}
-                  }
+                >
-               />
+                  <IconDotsVertical />
+                </ActionIcon>
+              ) : (
+                <ActionIcon disabled variant="transparent"></ActionIcon>
+              )
             }
-         >
+          />
-            {children}
+        }
-            <DrawerKatalogNew opened={opened} close={() => close()} userRoleId={userRoleId} userId={userLoginId} />
+      >
-         </UIGlobal_LayoutTamplate>
+        {children}
-      </>
+        <DrawerKatalogNew
-   )
+          opened={opened}
-}
+          close={() => close()}
+          userRoleId={userRoleId}
+          userId={userLoginId}
+        />
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}

src/app_modules/katalog/portofolio/component/button/comp_button_edit_logo_bisnis.tsx

@@ -10,46 +10,73 @@ import { Button } from "@mantine/core";
 
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+import {
+  funGlobal_DeleteFileById,
+  funGlobal_UploadToStorage,
+} from "@/app_modules/_global/fun";
 import { DIRECTORY_ID } from "@/app/lib";
 import { portofolio_funEditLogoBisnisById } from "../../fun";
+import { clientLogger } from "@/util/clientLogger";
 
 export function ComponentPortofolio_ButtonEditLogoBisnis({
   file,
   portofolioId,
+  fileRemoveId,
 }: {
   file: File;
   portofolioId: string;
+  fileRemoveId: string;
 }) {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
   async function onUpdate() {
-    const uploadFileToStorage = await funGlobal_UploadToStorage({
+    try {
-      file: file,
-      dirId: DIRECTORY_ID.portofolio_logo,
-    });
-
-    if (!uploadFileToStorage.success)
-      return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
-
-    const res = await portofolio_funEditLogoBisnisById({
-      portofolioId: portofolioId,
-      logoId: uploadFileToStorage.data.id,
-    });
-    if (res.status === 200) {
       setLoading(true);
-      ComponentGlobal_NotifikasiBerhasil(res.message);
+
-      router.back();
+      const deleteLogo = await funGlobal_DeleteFileById({
-    } else {
+        fileId: fileRemoveId,
-      ComponentGlobal_NotifikasiGagal(res.message);
+        dirId: DIRECTORY_ID.portofolio_logo,
+      });
+
+      if (!deleteLogo.success) {
+        setLoading(false);
+        clientLogger.error("Error delete logo", deleteLogo.message);
+      }
+
+      const uploadFileToStorage = await funGlobal_UploadToStorage({
+        file: file,
+        dirId: DIRECTORY_ID.portofolio_logo,
+      });
+
+      if (!uploadFileToStorage.success) {
+        setLoading(false);
+        ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+        return;
+      }
+      const res = await portofolio_funEditLogoBisnisById({
+        portofolioId: portofolioId,
+        logoId: uploadFileToStorage.data.id,
+      });
+
+      if (res.status === 200) {
+        ComponentGlobal_NotifikasiBerhasil(res.message);
+        router.back();
+      } else {
+        setLoading(false);
+        ComponentGlobal_NotifikasiGagal(res.message);
+      }
+    } catch (error) {
+      setLoading(false);
+      clientLogger.error("Error update logo", error);
     }
   }
+
   return (
     <>
       {file ? (
         <Button
           loaderPosition="center"
-          loading={loading ? true : false}
+          loading={loading}
           radius={"xl"}
           onClick={() => onUpdate()}
           bg={MainColor.yellow}

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

@@ -37,13 +37,13 @@ export default function ComponentPortofolio_ButtonDeleteNew({
         ComponentGlobal_NotifikasiBerhasil(response.message);
         router.back();
       } else {
+        setLoadingDel(false);
         ComponentGlobal_NotifikasiGagal(response?.message);
       }
     } catch (error) {
+      setLoadingDel(false);
       clientLogger.error("Error delete portofolio", error);
       ComponentGlobal_NotifikasiGagal("Gagal menghapus portofolio");
-    } finally {
-      setLoadingDel(false);
     }
   }
 

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

@@ -3,122 +3,136 @@ import { RouterMap } from "@/app/lib/router_hipmi/router_map";
 import { UIGlobal_Drawer } from "@/app_modules/_global/ui";
 import { ActionIcon } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
-import { IconEdit, IconPhotoEdit, IconId, IconMapPin2, IconMapPin, IconDotsVertical } from "@tabler/icons-react";
+import {
+  IconEdit,
+  IconPhotoEdit,
+  IconId,
+  IconMapPin2,
+  IconMapPin,
+  IconDotsVertical,
+} from "@tabler/icons-react";
 import { useParams } from "next/navigation";
 import { useState } from "react";
 import { apiGetOnePortofolioById } from "../lib/api_portofolio";
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { MainColor } from "@/app_modules/_global/color";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
-export default function ComponentPortofolio_ButtonMoreNew() {
+export default function ComponentPortofolio_ButtonMoreNew({
-   const param = useParams<{ id: string }>()
+  userLoginId,
-   const [userLoginId, setUserLoginId] = useState("")
+}: {
-   const [authorId, setAuthorId] = useState("")
+  userLoginId: string;
-   const [mapId, setMapId] = useState(true)
+}) {
-   const [openDrawer, setOpenDrawer] = useState(false)
+  const param = useParams<{ id: string }>();
+  const [authorId, setAuthorId] = useState("");
+  const [mapId, setMapId] = useState(true);
+  const [openDrawer, setOpenDrawer] = useState(false);
 
-   const listPage = [
+  const listPage = [
-      {
+    {
-         id: "1",
+      id: "1",
-         name: "Edit detail ",
+      name: "Edit detail ",
-         icon: <IconEdit color={MainColor.white} />,
+      icon: <IconEdit color={MainColor.white} />,
-         path: RouterPortofolio.edit_data_bisnis + `${param.id}`,
+      path: RouterPortofolio.edit_data_bisnis + `${param.id}`,
-      },
+    },
-      {
+    {
-         id: "2",
+      id: "2",
-         name: "Edit logo ",
+      name: "Edit logo ",
-         icon: <IconPhotoEdit color={MainColor.white} />,
+      icon: <IconPhotoEdit color={MainColor.white} />,
-         path: RouterPortofolio.edit_logo_bisnis + `${param.id}`,
+      path: RouterPortofolio.edit_logo_bisnis + `${param.id}`,
-      },
+    },
-      {
+    {
-         id: "3",
+      id: "3",
-         name: "Edit sosial media",
+      name: "Edit sosial media",
-         icon: <IconId color={MainColor.white} />,
+      icon: <IconId color={MainColor.white} />,
-         path: RouterPortofolio.edit_medsos_bisnis + `${param.id}`,
+      path: RouterPortofolio.edit_medsos_bisnis + `${param.id}`,
-      },
+    },
-      {
+    {
-         id: "4",
+      id: "4",
-         name: "Edit data map",
+      name: "Edit data map",
-         icon: <IconMapPin2 color={MainColor.white} />,
+      icon: <IconMapPin2 color={MainColor.white} />,
-         path: RouterMap.edit + `${param.id}`,
+      path: RouterMap.edit + `${param.id}`,
-      },
+    },
-      {
+    {
-         id: "5",
+      id: "5",
-         name: "Custom pin map",
+      name: "Custom pin map",
-         icon: <IconMapPin color={MainColor.white} />,
+      icon: <IconMapPin color={MainColor.white} />,
-         path: RouterMap.custom_pin + `${param.id}`,
+      path: RouterMap.custom_pin + `${param.id}`,
-      },
+    },
-   ];
+  ];
 
-   const listPage2 = [
+  const listPage2 = [
-      {
+    {
-         id: "1",
+      id: "1",
-         name: "Edit detail ",
+      name: "Edit detail ",
-         icon: <IconEdit color={MainColor.white} />,
+      icon: <IconEdit color={MainColor.white} />,
-         path: RouterPortofolio.edit_data_bisnis + `${param.id}`,
+      path: RouterPortofolio.edit_data_bisnis + `${param.id}`,
-      },
+    },
-      {
+    {
-         id: "2",
+      id: "2",
-         name: "Edit logo ",
+      name: "Edit logo ",
-         icon: <IconPhotoEdit color={MainColor.white} />,
+      icon: <IconPhotoEdit color={MainColor.white} />,
-         path: RouterPortofolio.edit_logo_bisnis + `${param.id}`,
+      path: RouterPortofolio.edit_logo_bisnis + `${param.id}`,
-      },
+    },
-      {
+    {
-         id: "3",
+      id: "3",
-         name: "Edit sosial media",
+      name: "Edit sosial media",
-         icon: <IconId color={MainColor.white} />,
+      icon: <IconId color={MainColor.white} />,
-         path: RouterPortofolio.edit_medsos_bisnis + `${param.id}`,
+      path: RouterPortofolio.edit_medsos_bisnis + `${param.id}`,
-      },
+    },
-      {
+    {
-         id: "4",
+      id: "4",
-         name: "Edit data map",
+      name: "Edit data map",
-         icon: <IconMapPin2 color={MainColor.white} />,
+      icon: <IconMapPin2 color={MainColor.white} />,
-         path: RouterMap.create + `${param.id}`,
+      path: RouterMap.create + `${param.id}`,
-      },
+    },
-      {
+    {
-         id: "5",
+      id: "5",
-         name: "Custom pin map",
+      name: "Custom pin map",
-         icon: <IconMapPin color={MainColor.white} />,
+      icon: <IconMapPin color={MainColor.white} />,
-         path: RouterMap.custom_pin + `${param.id}`,
+      path: RouterMap.custom_pin + `${param.id}`,
-      },
+    },
-   ];
+  ];
 
+  async function funGetPortofolio() {
+    try {
+      const response = await apiGetOnePortofolioById(param.id, "bisnis");
+      const response3 = await apiGetOnePortofolioById(param.id, "lokasi");
 
-   async function funGetPortofolio() {
+      if (response) {
-      try {
+        setAuthorId(response.data.authorId);
-         const response = await apiGetOnePortofolioById(param.id, "bisnis")
+        setMapId(
-         const response3 = await apiGetOnePortofolioById(param.id, "lokasi")
+          response3 !== null && response3.data?.mapId !== undefined
-         const response2 = await funGetUserIdByToken()
+            ? true
-         if (response) {
+            : false
-            setAuthorId(response.data.authorId)
+        );
-            setMapId((response3 !== null && response3.data?.mapId !== undefined) ? true : false)
-            setUserLoginId(response2)
-         }
-      } catch (error) {
-         console.error(error);
       }
-   }
+    } catch (error) {
+      console.error(error);
+    }
+  }
 
-   useShallowEffect(() => {
+  useShallowEffect(() => {
-      funGetPortofolio()
+    funGetPortofolio();
-   }, []);
+  }, []);
 
+  return (
+    <>
+      {userLoginId === authorId ? (
+        <ActionIcon variant="transparent" onClick={() => setOpenDrawer(true)}>
+          <IconDotsVertical color={MainColor.white} />
+        </ActionIcon>
+      ) : (
+        <ActionIcon disabled variant="transparent">
+          <CustomSkeleton h={20} w={20} radius={"100%"} />
+        </ActionIcon>
+      )}
 
-   return (
+      <UIGlobal_Drawer
-      <>
+        opened={openDrawer}
-         {userLoginId === authorId ? (
+        close={() => setOpenDrawer(false)}
-            <ActionIcon variant="transparent" onClick={() => setOpenDrawer(true)}>
+        component={mapId ? listPage : listPage2}
-               <IconDotsVertical color={MainColor.white} />
+      />
-            </ActionIcon>
+    </>
-         ) : (
+  );
-            <ActionIcon disabled variant="transparent"></ActionIcon>
+}
-         )}
-
-         <UIGlobal_Drawer
-            opened={openDrawer}
-            close={() => setOpenDrawer(false)}
-            component={mapId ? listPage : listPage2}
-         />
-      </>
-   )
-}

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

@@ -84,6 +84,7 @@ export default function Portofolio_EditLogoBisnis({
         <ComponentPortofolio_ButtonEditLogoBisnis
           file={file as any}
           portofolioId={dataPorto.id}
+          fileRemoveId={dataPorto.logoId}
         />
       </Stack>
     </>

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

@@ -2,19 +2,27 @@
 import { UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate } from "@/app_modules/_global/ui";
 import ComponentPortofolio_ButtonMoreNew from "../component/button_more_new";
 
-export default function PortofolioLayoutNew({ children }: { children: any }) {
+export default function PortofolioLayoutNew({
-   return (
+  children,
-      <>
+  userLoginId,
-         <UIGlobal_LayoutTamplate
+}: {
-            header={
+  children: any;
-               <UIGlobal_LayoutHeaderTamplate
+  userLoginId: string
-                  title="Detail Portofolio"
+}) {
-                  customButtonRight={<ComponentPortofolio_ButtonMoreNew />}
+  return (
-               />
+    <>
+      <UIGlobal_LayoutTamplate
+        header={
+          <UIGlobal_LayoutHeaderTamplate
+            title="Detail Portofolio"
+            customButtonRight={
+              <ComponentPortofolio_ButtonMoreNew userLoginId={userLoginId} />
             }
-         >
+          />
-            {children}
+        }
-         </UIGlobal_LayoutTamplate>
+      >
-      </>
+        {children}
-   )
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
 }

src/app_modules/katalog/profile/_component/button/comp_button_update_photo_profile.tsx

@@ -37,8 +37,8 @@ export function Profile_ComponentButtonUpdatePhotoProfile({
       });
 
       if (!deletePhoto.success) {
-        ComponentGlobal_NotifikasiPeringatan("Gagal update foto profile");
+        setLoading(false);
-        return;
+        clientLogger.error("Error delete logo", deletePhoto.message);
       }
 
       const uploadPhoto = await funGlobal_UploadToStorage({
@@ -47,6 +47,7 @@ export function Profile_ComponentButtonUpdatePhotoProfile({
       });
 
       if (!uploadPhoto.success) {
+        setLoading(false);
         ComponentGlobal_NotifikasiPeringatan("Gagal upload foto profile");
         return;
       }
@@ -55,17 +56,17 @@ export function Profile_ComponentButtonUpdatePhotoProfile({
         fileId: uploadPhoto.data.id,
         profileId: profileId,
       });
-      
+
       if (res.status === 200) {
         ComponentGlobal_NotifikasiBerhasil(res.message);
         router.back();
       } else {
+        setLoading(false);
         ComponentGlobal_NotifikasiGagal(res.message);
       }
     } catch (error) {
-      clientLogger.error("Error update photo profile", error);
-    } finally {
       setLoading(false);
+      clientLogger.error("Error update photo profile", error);
     }
   }
   return (

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

@@ -1,17 +1,18 @@
 "use client";
 
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import { clientLogger } from "@/util/clientLogger";
 import { Button, Loader, Select, Stack, TextInput } from "@mantine/core";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import { gmailRegex } from "../../component/regular_expressions";
-import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import { gmailRegex, validRegex } from "../../component/regular_expressions";
 import { Profile_funEditById } from "../fun/update/fun_edit_profile_by_id";
 import { MODEL_PROFILE } from "../model/interface";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
 
 export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
   const router = useRouter();
@@ -29,15 +30,20 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
     if (!body.email.match(gmailRegex))
       return ComponentGlobal_NotifikasiPeringatan("Format email salah");
 
-    await Profile_funEditById(body).then((res) => {
+    try {
+      setLoading(true);
+      const res = await Profile_funEditById(body);
       if (res.status === 200) {
-        setLoading(true);
         ComponentGlobal_NotifikasiBerhasil(res.message);
-        setTimeout(() => router.back(), 1000);
+        router.back();
       } else {
+        setLoading(false);
         ComponentGlobal_NotifikasiGagal(res.message);
       }
-    });
+    } catch (error) {
+      setLoading(false);
+      clientLogger.error("Error update foto profile", error);
+    }
   }
 
   if (!dataProfile)
@@ -49,7 +55,6 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
 
   return (
     <>
-      {/* <pre>{JSON.stringify(dataProfile, null, 2)}</pre> */}
       <Stack px={"sm"}>
         <TextInput
           styles={{
@@ -96,7 +101,7 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
             },
             input: {
               backgroundColor: MainColor.white,
-            }
+            },
           }}
           withAsterisk
           label="Nama"
@@ -125,7 +130,7 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
             },
             input: {
               backgroundColor: MainColor.white,
-            }
+            },
           }}
           withAsterisk
           label="Email"
@@ -156,7 +161,7 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
             },
             input: {
               backgroundColor: MainColor.white,
-            }
+            },
           }}
           withAsterisk
           label="Alamat"
@@ -185,7 +190,7 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
             },
             input: {
               backgroundColor: MainColor.white,
-            }
+            },
           }}
           withAsterisk
           label="Jenis Kelamin"
@@ -216,7 +221,6 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
         </Button>
       </Stack>
 
-      {/* <pre>{JSON.stringify(dataProfile, null, 2)}</pre> */}
     </>
   );
 }

src/app_modules/map/_component/button/comp_button_update_data_map.tsx

@@ -8,12 +8,16 @@ import {
 } from "@/app_modules/_global/notif_global";
 import { Button } from "@mantine/core";
 
+import { DIRECTORY_ID } from "@/app/lib";
+import {
+  funGlobal_DeleteFileById,
+  funGlobal_UploadToStorage,
+} from "@/app_modules/_global/fun";
+import { clientLogger } from "@/util/clientLogger";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 import { map_funEditMap } from "../../fun/edit/fun_edit_map";
 import { MODEL_MAP } from "../../lib/interface";
-import { useRouter } from "next/navigation";
-import { DIRECTORY_ID } from "@/app/lib";
-import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
-import { useState } from "react";
 
 export function ComponentMap_ButtonUpdateDataMap({
   data,
@@ -25,30 +29,59 @@ export function ComponentMap_ButtonUpdateDataMap({
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
   async function onSavePin() {
-    if (file !== null) {
+    try {
-      const uploadFileToStorage = await funGlobal_UploadToStorage({
+      setIsLoading(true);
-        file: file,
-        dirId: DIRECTORY_ID.map_image,
-      });
-      if (!uploadFileToStorage.success)
-        return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
 
-      const res = await map_funEditMap({
+      if (file !== null) {
-        data: data,
+        const deleteLogo = await funGlobal_DeleteFileById({
-        fileId: uploadFileToStorage.data.id,
+          fileId: data.imageId,
-      });
+          dirId: DIRECTORY_ID.map_image,
-      res.status === 200
+        });
-        ? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
+
-        : ComponentGlobal_NotifikasiGagal(res.message);
+        if (!deleteLogo.success) {
-    } else {
+          setIsLoading(false);
-      const res = await map_funEditMap({
+          clientLogger.error("Error delete logo", deleteLogo.message);
-        data: data,
+        }
-      });
+
-      res.status === 200
+        const uploadFileToStorage = await funGlobal_UploadToStorage({
-        ? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
+          file: file,
-        : ComponentGlobal_NotifikasiGagal(res.message);
+          dirId: DIRECTORY_ID.map_image,
+        });
+        if (!uploadFileToStorage.success) {
+          setIsLoading(false);
+          ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+          return;
+        }
+
+        const res = await map_funEditMap({
+          data: data,
+          fileId: uploadFileToStorage.data.id,
+        });
+
+        if (res.status === 200) {
+          ComponentGlobal_NotifikasiBerhasil(res.message);
+          router.back();
+        } else {
+          setIsLoading(false);
+          ComponentGlobal_NotifikasiGagal(res.message);
+        }
+      } else {
+        const res = await map_funEditMap({
+          data: data,
+        });
+
+        if (res.status === 200) {
+          ComponentGlobal_NotifikasiBerhasil(res.message);
+          router.back();
+        } else {
+          setIsLoading(false);
+          ComponentGlobal_NotifikasiGagal(res.message);
+        }
+      }
+    } catch (error) {
+      setIsLoading(false);
+      clientLogger.error("Error update logo", error);
     }
-    setIsLoading(true);
   }
 
   return (

src/app_modules/map/ui/ui_custom_pin.tsx

@@ -26,9 +26,13 @@ import { map_funCustomPinMap } from "../fun";
 import { defaultMapZoom } from "../lib/default_lat_long";
 import { MODEL_MAP } from "../lib/interface";
 import { APIs, DIRECTORY_ID } from "@/app/lib";
-import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+import {
+  funGlobal_DeleteFileById,
+  funGlobal_UploadToStorage,
+} from "@/app_modules/_global/fun";
 import { MAX_SIZE } from "@/app_modules/_global/lib";
 import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
+import { clientLogger } from "@/util/clientLogger";
 
 export function UiMap_CustomPin({
   dataMap,
@@ -172,34 +176,67 @@ export function UiMap_CustomPin({
           <AttributionControl customAttribution="Map design by PT. Bali Interaktif Perkasa" />
         </Map>
 
-        <ButtonSimpan mapId={data.id} filePin={filePin} />
+        <ButtonSimpan
+          mapId={data.id}
+          filePin={filePin}
+          fileRemoveId={data.pinId}
+        />
       </Stack>
     </>
   );
 }
 
-function ButtonSimpan({ mapId, filePin }: { mapId: string; filePin: File }) {
+function ButtonSimpan({
+  mapId,
+  filePin,
+  fileRemoveId,
+}: {
+  mapId: string;
+  filePin: File;
+  fileRemoveId: string;
+}) {
   const router = useRouter();
   const [isLoading, setLoading] = useState(false);
 
   async function onCustom() {
-    const uploadFileToStorage = await funGlobal_UploadToStorage({
+    try {
-      file: filePin,
+      setLoading(true);
-      dirId: DIRECTORY_ID.map_pin,
+      const deletePin = await funGlobal_DeleteFileById({
-    });
+        fileId: fileRemoveId,
+        dirId: DIRECTORY_ID.map_pin,
+      });
+      if (!deletePin.success) {
+        setLoading(false);
+        clientLogger.error("Error delete logo", deletePin.message);
+      }
 
-    if (!uploadFileToStorage.success)
+      const uploadFileToStorage = await funGlobal_UploadToStorage({
-      return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+        file: filePin,
+        dirId: DIRECTORY_ID.map_pin,
+      });
 
-    const res = await map_funCustomPinMap({
+      if (!uploadFileToStorage.success) {
-      mapId: mapId,
+        setLoading(false);
-      fileId: uploadFileToStorage.data.id,
+        ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
-    });
+        return;
-    res.status === 200
+      }
-      ? (ComponentGlobal_NotifikasiBerhasil(res.message),
+
-        setLoading(true),
+      const res = await map_funCustomPinMap({
-        router.back())
+        mapId: mapId,
-      : ComponentGlobal_NotifikasiGagal(res.message);
+        fileId: uploadFileToStorage.data.id,
+      });
+
+      if (res.status === 200) {
+        ComponentGlobal_NotifikasiBerhasil(res.message);
+        router.back();
+      } else {
+        setLoading(false);
+        ComponentGlobal_NotifikasiGagal(res.message);
+      }
+    } catch (error) {
+      setLoading(false);
+      clientLogger.error("Error custom pin", error);
+    }
   }
 
   return (