Merge pull request #229 from bipproduction/fix/bug/middleware

Fix/bug/middleware

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/api/new/investasi/route.ts

@@ -14,7 +14,8 @@ export async function GET(request: Request) {
       const kategori = searchParams.get("cat")
       const status = searchParams.get("status")
       const page = searchParams.get("page")
-      const dataSkip = Number(page) * 5 - 5;
+      const dataTake = 10
+      const dataSkip = Number(page) * dataTake - dataTake;
 
       if (kategori == "bursa") {
          const data = await prisma.investasi.findMany({
@@ -61,7 +62,7 @@ export async function GET(request: Request) {
          // cek data yang lewat
          // klo ada,  update status
          const dataAwal = await prisma.investasi.findMany({
-            take: 5,
+            take: dataTake,
             skip: dataSkip,
             orderBy: [
                {
@@ -100,7 +101,7 @@ export async function GET(request: Request) {
          }
 
          const data = await prisma.investasi.findMany({
-            take: 5,
+           take: dataTake,
            skip: dataSkip,
            orderBy: {
              updatedAt: "desc",
@@ -118,10 +119,10 @@ export async function GET(request: Request) {
              updatedAt: true,
              MasterPencarianInvestor: {
                select: {
-                     name: true
+                 name: true,
-                  }
+               },
-               }
+             },
-            }
+           },
          });
 
          dataFix = data.map((v: any) => ({

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/donasi/lib/api_donasi.ts

@@ -1,19 +1,59 @@
 export const apiGetAllDonasi = async (path?: string) => {
-   const response = await fetch(`/api/new/donasi${(path) ? path : ''}`)
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
-   return await response.json().catch(() => null)
+  if (!token) return await token.json().catch(() => null);
-}
+
+  const response = await fetch(`/api/new/donasi${path ? path : ""}`, {
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  return await response.json().catch(() => null);
+};
 
 export const apiGetMasterDonasi = async (path?: string) => {
-   const response = await fetch(`/api/new/donasi/master${(path) ? path : ''}`)
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
-   return await response.json().catch(() => null)
+  if (!token) return await token.json().catch(() => null);
-}
+
+  const response = await fetch(`/api/new/donasi/master${path ? path : ""}`, {
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  return await response.json().catch(() => null);
+};
 
 export const apiGetAllDonasiSaya = async (path?: string) => {
-   const response = await fetch(`/api/new/donasi/invoice${(path) ? path : ''}`)
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
-   return await response.json().catch(() => null)
+  if (!token) return await token.json().catch(() => null);
-}
+
+  const response = await fetch(`/api/new/donasi/invoice${path ? path : ""}`, {
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  return await response.json().catch(() => null);
+};
 
 export const apiGetOneDonasiById = async (path: string, kategori: string) => {
-   const response = await fetch(`/api/new/donasi/${path}?cat=${kategori}`)
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
-   return await response.json().catch(() => null)
+  if (!token) return await token.json().catch(() => null);
-}
+
+  const response = await fetch(`/api/new/donasi/${path}?cat=${kategori}`, {
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  return await response.json().catch(() => null);
+};

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,6 +51,17 @@ export default function FooterHome() {
       bottom={0}
       h={"9vh"}
     >
+      {dataUser?.profile === undefined || dataUser?.profile === null ? (
+        <SimpleGrid cols={4}>
+          {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}>
@@ -83,7 +95,11 @@ export default function FooterHome() {
                 >
                   {e.icon}
                 </ActionIcon>
-              <Text lineClamp={1} c={e.link === "" ? "gray" : MainColor.white} fz={12}>
+                <Text
+                  lineClamp={1}
+                  c={e.link === "" ? "gray" : MainColor.white}
+                  fz={12}
+                >
                   {e.name}
                 </Text>
               </Stack>
@@ -101,17 +117,18 @@ export default function FooterHome() {
                 ) {
                   router.push(RouterProfile.create, { scroll: false });
                 } else {
-                router.push(RouterProfile.katalogOLD + `${dataUser?.profile}`, {
+                  router.push(
+                    RouterProfile.katalogOLD + `${dataUser?.profile}`,
+                    {
                       scroll: false,
-                });
+                    }
+                  );
                 }
               }}
             >
-            <ActionIcon 
+              <ActionIcon variant={"transparent"}>
-            
+                {dataUser.profile === undefined ||
-            
+                dataUser?.profile === null ? (
-            variant={"transparent"}>
-              {dataUser.profile === undefined || dataUser?.profile === null ? (
                   <IconUserCircle color={MainColor.white} />
                 ) : (
                   <Home_ComponentAvatarProfile
@@ -128,6 +145,7 @@ export default function FooterHome() {
             </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,6 +68,9 @@ export default function HomeViewNew() {
           <UIGlobal_LayoutHeaderTamplate
             title="HIPMI"
             customButtonLeft={
+              dataUser?.profile == null ? (
+                <CustomSkeleton width={20} height={20} circle />
+              ) : (
                 <ActionIcon
                   radius={"xl"}
                   disabled={countNtf == null}
@@ -84,8 +88,12 @@ export default function HomeViewNew() {
                 >
                   <IconUserSearch color={MainColor.white} />
                 </ActionIcon>
+              )
             }
             customButtonRight={
+              dataUser?.profile == null ? (
+                <CustomSkeleton width={20} height={20} circle />
+              ) : (
                 <ActionIcon
                   variant="transparent"
                   disabled={countNtf == null}
@@ -122,6 +130,7 @@ export default function HomeViewNew() {
                     <IconBell color={MainColor.white} />
                   )}
                 </ActionIcon>
+              )
             }
           />
         }

src/app_modules/investasi/_lib/api_interface.ts

@@ -1,19 +1,64 @@
 export const apiGetMasterInvestasi = async (path?: string) => {
-   const response = await fetch(`/api/new/investasi/master${(path) ? path : ''}`)
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
-   return await response.json().catch(() => null)
+  if (!token) return await token.json().catch(() => null);
-}
+
+  const response = await fetch(`/api/new/investasi/master${path ? path : ""}`, {
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  return await response.json().catch(() => null);
+};
 
 export const apiGetOneInvestasiById = async (path: string) => {
-   const response = await fetch(`/api/new/investasi/${path}`)
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
-   return await response.json().catch(() => null)
+  if (!token) return await token.json().catch(() => null);
-}
+
+  const response = await fetch(`/api/new/investasi/${path}`, {
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  return await response.json().catch(() => null);
+};
 
 export const apiGetAllInvestasi = async (path?: string) => {
-   const response = await fetch(`/api/new/investasi${(path) ? path : ''}`)
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
-   return await response.json().catch(() => null)
+  if (!token) return await token.json().catch(() => null);
-}
+
+  const response = await fetch(`/api/new/investasi${path ? path : ""}`, {
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  return await response.json().catch(() => null);
+};
 
 export const apiGetAllSahamSaya = async (path?: string) => {
-   const response = await fetch(`/api/new/investasi/invoice${(path) ? path : ''}`)
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
-   return await response.json().catch(() => null)
+  if (!token) return await token.json().catch(() => null);
-}
+
+  const response = await fetch(
+    `/api/new/investasi/invoice${path ? path : ""}`,
+    {
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        "Access-Control-Allow-Origin": "*",
+        Authorization: `Bearer ${token}`,
+      },
+    }
+  );
+  return await response.json().catch(() => null);
+};

src/app_modules/katalog/component/regular_expressions.ts

@@ -1,3 +1,3 @@
 export var validRegex =
   /^([a-zA-Z0-9\.!#$%&'*+/=?^_`{|}~-]+)@([a-zA-Z0-9])+.([a-z]+)(.[a-z]+)?$/;
-export const gmailRegex = /^[a-zA-Z0-9._%+-]+@gmail\.com$/;
+export const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

src/app_modules/katalog/main/layout_new.tsx

@@ -1,42 +1,50 @@
-'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 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() {
     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) {
-            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)
+      setLoading(false);
     }
   }
 
   useShallowEffect(() => {
-      getProfile()
+    getProfile();
-   }, [])
+  }, []);
 
   return (
     <>
@@ -45,10 +53,16 @@ export default function LayoutKatalogNew({ children }: { children: any }) {
           <UIGlobal_LayoutHeaderTamplate
             title="KATALOG"
             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>
+              ) : authorId == userLoginId ? (
+                <ActionIcon
+                  c="white"
+                  variant="transparent"
+                  onClick={() => open()}
+                >
                   <IconDotsVertical />
                 </ActionIcon>
               ) : (
@@ -59,8 +73,13 @@ export default function LayoutKatalogNew({ children }: { children: any }) {
         }
       >
         {children}
-            <DrawerKatalogNew opened={opened} close={() => close()} userRoleId={userRoleId} userId={userLoginId} />
+        <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() {
+    try {
+      setLoading(true);
+
+      const deleteLogo = await funGlobal_DeleteFileById({
+        fileId: fileRemoveId,
+        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)
+      if (!uploadFileToStorage.success) {
-      return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+        setLoading(false);
-
+        ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+        return;
+      }
       const res = await portofolio_funEditLogoBisnisById({
         portofolioId: portofolioId,
         logoId: uploadFileToStorage.data.id,
       });
+
       if (res.status === 200) {
-      setLoading(true);
         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,19 +3,30 @@ 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 = [
     {
@@ -83,16 +94,18 @@ export default function ComponentPortofolio_ButtonMoreNew() {
     },
   ];
 
-
   async function funGetPortofolio() {
     try {
-         const response = await apiGetOnePortofolioById(param.id, "bisnis")
+      const response = await apiGetOnePortofolioById(param.id, "bisnis");
-         const response3 = await apiGetOnePortofolioById(param.id, "lokasi")
+      const response3 = await apiGetOnePortofolioById(param.id, "lokasi");
-         const response2 = await funGetUserIdByToken()
+
       if (response) {
-            setAuthorId(response.data.authorId)
+        setAuthorId(response.data.authorId);
-            setMapId((response3 !== null && response3.data?.mapId !== undefined) ? true : false)
+        setMapId(
-            setUserLoginId(response2)
+          response3 !== null && response3.data?.mapId !== undefined
+            ? true
+            : false
+        );
       }
     } catch (error) {
       console.error(error);
@@ -100,10 +113,9 @@ export default function ComponentPortofolio_ButtonMoreNew() {
   }
 
   useShallowEffect(() => {
-      funGetPortofolio()
+    funGetPortofolio();
   }, []);
 
-
   return (
     <>
       {userLoginId === authorId ? (
@@ -111,7 +123,9 @@ export default function ComponentPortofolio_ButtonMoreNew() {
           <IconDotsVertical color={MainColor.white} />
         </ActionIcon>
       ) : (
-            <ActionIcon disabled variant="transparent"></ActionIcon>
+        <ActionIcon disabled variant="transparent">
+          <CustomSkeleton h={20} w={20} radius={"100%"} />
+        </ActionIcon>
       )}
 
       <UIGlobal_Drawer
@@ -120,5 +134,5 @@ export default function ComponentPortofolio_ButtonMoreNew() {
         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/lib/api_portofolio.ts

@@ -1,6 +1,6 @@
 export const apiGetPortofolioByProfile = async (path?: string) => {
   const { token } = await fetch("/api/get-cookie").then((res) => res.json());
-  if (!token) return null;
+  if (!token) return await token.json().catch(() => null);
 
   const response = await fetch(`/api/new/portofolio${path ? path : ""}`, {
     headers: {
@@ -18,7 +18,7 @@ export const apiGetPortofolioByProfile = async (path?: string) => {
 
 export const apiGetOnePortofolioById = async (path: string, cat: string) => {
   const { token } = await fetch("/api/get-cookie").then((res) => res.json());
-  if (!token) return null;
+  if (!token) return await token.json().catch(() => null);
 
   const response = await fetch(`/api/new/portofolio/${path}?cat=${cat}`, {
     headers: {
@@ -36,7 +36,7 @@ export const apiGetOnePortofolioById = async (path: string, cat: string) => {
 
 export const apiDeletePortofolio = async (path: string) => {
   const { token } = await fetch("/api/get-cookie").then((res) => res.json());
-  if (!token) return null;
+  if (!token) return await token.json().catch(() => null);
 
   const response = await fetch(`/api/new/portofolio/${path}`, {
     method: "DELETE",
@@ -46,6 +46,5 @@ export const apiDeletePortofolio = async (path: string) => {
     },
   });
 
-
   return await response.json().catch(() => null);
 };

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({
+  children,
+  userLoginId,
+}: {
+  children: any;
+  userLoginId: string
+}) {
   return (
     <>
       <UIGlobal_LayoutTamplate
         header={
           <UIGlobal_LayoutHeaderTamplate
             title="Detail Portofolio"
-                  customButtonRight={<ComponentPortofolio_ButtonMoreNew />}
+            customButtonRight={
+              <ComponentPortofolio_ButtonMoreNew userLoginId={userLoginId} />
+            }
           />
         }
       >
         {children}
       </UIGlobal_LayoutTamplate>
     </>
-   )
+  );
 }

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

@@ -29,16 +29,8 @@ export function Profile_ComponentButtonUpdateBackgroundProfile({
   async function onUpdate() {
     try {
       setLoading(true);
-      const deletePhoto = await funGlobal_DeleteFileById({
-        fileId: fileId,
-        dirId: DIRECTORY_ID.profile_background,
-      });
-
-      if (!deletePhoto.success) {
-        ComponentGlobal_NotifikasiPeringatan("Gagal update background");
-        return;
-      }
 
+      // Upload gambar baru
       const uploadFile = await funGlobal_UploadToStorage({
         file: file,
         dirId: DIRECTORY_ID.profile_background,
@@ -46,9 +38,19 @@ export function Profile_ComponentButtonUpdateBackgroundProfile({
 
       if (!uploadFile.success) {
         setLoading(false);
-        return ComponentGlobal_NotifikasiPeringatan(
+        ComponentGlobal_NotifikasiPeringatan("Gagal upload background");
-          "Gagal upload background"
+        return;
-        );
+      }
+
+      // Hapus gambar lama
+      const deletePhoto = await funGlobal_DeleteFileById({
+        fileId: fileId,
+        dirId: DIRECTORY_ID.profile_background,
+      });
+
+      if (!deletePhoto.success) {
+        setLoading(false);
+        clientLogger.error("Error delete background", deletePhoto.message);
       }
 
       const res = await profile_funUpdateBackground({
@@ -60,12 +62,12 @@ export function Profile_ComponentButtonUpdateBackgroundProfile({
         ComponentGlobal_NotifikasiBerhasil(res.message);
         router.back();
       } else {
+        setLoading(false);
         ComponentGlobal_NotifikasiGagal(res.message);
       }
     } catch (error) {
-      clientLogger.error("Error upload background", error);
-    } finally {
       setLoading(false);
+      clientLogger.error("Error upload background", error);
     }
   }
 

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

@@ -1,21 +1,21 @@
 "use client";
 
+import { DIRECTORY_ID } from "@/app/lib";
 import { MainColor } from "@/app_modules/_global/color";
+import {
+  funGlobal_DeleteFileById,
+  funGlobal_UploadToStorage,
+} from "@/app_modules/_global/fun";
 import {
   ComponentGlobal_NotifikasiBerhasil,
   ComponentGlobal_NotifikasiGagal,
   ComponentGlobal_NotifikasiPeringatan,
 } from "@/app_modules/_global/notif_global";
-import { Box, Button, Center } from "@mantine/core";
+import { clientLogger } from "@/util/clientLogger";
+import { Box, Button } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { profile_funUpdatePhoto } from "../../fun";
-import {
-  funGlobal_DeleteFileById,
-  funGlobal_UploadToStorage,
-} from "@/app_modules/_global/fun";
-import { DIRECTORY_ID } from "@/app/lib";
-import { clientLogger } from "@/util/clientLogger";
 
 export function Profile_ComponentButtonUpdatePhotoProfile({
   file,
@@ -31,26 +31,30 @@ export function Profile_ComponentButtonUpdatePhotoProfile({
   async function onUpdate() {
     try {
       setLoading(true);
-      const deletePhoto = await funGlobal_DeleteFileById({
-        fileId: fileId,
-        dirId: DIRECTORY_ID.profile_foto,
-      });
-
-      if (!deletePhoto.success) {
-        ComponentGlobal_NotifikasiPeringatan("Gagal update foto profile");
-        return;
-      }
 
+      // Upload foto baru
       const uploadPhoto = await funGlobal_UploadToStorage({
         file: file,
         dirId: DIRECTORY_ID.profile_foto,
       });
 
       if (!uploadPhoto.success) {
+        setLoading(false);
         ComponentGlobal_NotifikasiPeringatan("Gagal upload foto profile");
         return;
       }
 
+      // Hapus gambar lama
+      const deletePhoto = await funGlobal_DeleteFileById({
+        fileId: fileId,
+        dirId: DIRECTORY_ID.profile_foto,
+      });
+
+      if (!deletePhoto.success) {
+        setLoading(false);
+        clientLogger.error("Error delete logo", deletePhoto.message);
+      }
+
       const res = await profile_funUpdatePhoto({
         fileId: uploadPhoto.data.id,
         profileId: profileId,
@@ -60,12 +64,12 @@ export function Profile_ComponentButtonUpdatePhotoProfile({
         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/_component/button/comp_create_new_profile.tsx

@@ -7,7 +7,7 @@ import {
   ComponentGlobal_NotifikasiGagal,
   ComponentGlobal_NotifikasiPeringatan,
 } from "@/app_modules/_global/notif_global";
-import { gmailRegex } from "@/app_modules/katalog/component/regular_expressions";
+import { emailRegex } from "@/app_modules/katalog/component/regular_expressions";
 import { Button } from "@mantine/core";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
@@ -36,7 +36,7 @@ export function Profile_ComponentCreateNewProfile({
     };
     if (_.values(newData).includes(""))
       return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
-    if (!newData.email.match(gmailRegex))
+    if (!newData.email.match(emailRegex))
       return ComponentGlobal_NotifikasiPeringatan("Format email salah");
 
     if (fotoProfileId == "")

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

@@ -4,7 +4,7 @@ import { ComponentGlobal_ErrorInput } from "@/app_modules/_global/component";
 import { Select, Stack, TextInput } from "@mantine/core";
 import { IconAt } from "@tabler/icons-react";
 import { useState } from "react";
-import { gmailRegex } from "../../component/regular_expressions";
+import { emailRegex } from "../../component/regular_expressions";
 import { Profile_ComponentCreateNewProfile } from "../_component";
 import Profile_ViewUploadBackground from "./view_upload_background";
 import Profile_ViewUploadFoto from "./view_upload_foto";
@@ -70,7 +70,7 @@ export default function CreateProfile() {
             maxLength={100}
             placeholder="Contoh: User@gmail.com"
             error={
-              value.email.length > 0 && !value.email.match(gmailRegex) ? (
+              value.email.length > 0 && !value.email.match(emailRegex) ? (
                 <ComponentGlobal_ErrorInput text="Invalid Email" />
               ) : (
                 ""

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 { emailRegex } 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();
@@ -26,18 +27,23 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
     // console.log(body)
     if (_.values(body).includes(""))
       return ComponentGlobal_NotifikasiPeringatan("Lengkapi data");
-    if (!body.email.match(gmailRegex))
+    if (!body.email.match(emailRegex))
       return ComponentGlobal_NotifikasiPeringatan("Format email salah");
 
-    await Profile_funEditById(body).then((res) => {
+    try {
-      if (res.status === 200) {
       setLoading(true);
+      const res = await Profile_funEditById(body);
+      if (res.status === 200) {
         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"
@@ -134,7 +139,7 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
             dataProfile?.email === "" ? (
               <ComponentGlobal_ErrorInput text="Masukan email " />
             ) : dataProfile?.email?.length > 0 &&
-              !dataProfile?.email.match(gmailRegex) ? (
+              !dataProfile?.email.match(emailRegex) ? (
               <ComponentGlobal_ErrorInput text="Invalid 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() {
+    try {
+      setIsLoading(true);
+
       if (file !== null) {
+        const deleteLogo = await funGlobal_DeleteFileById({
+          fileId: data.imageId,
+          dirId: DIRECTORY_ID.map_image,
+        });
+
+        if (!deleteLogo.success) {
+          setIsLoading(false);
+          clientLogger.error("Error delete logo", deleteLogo.message);
+        }
+
         const uploadFileToStorage = await funGlobal_UploadToStorage({
           file: file,
           dirId: DIRECTORY_ID.map_image,
         });
-      if (!uploadFileToStorage.success)
+        if (!uploadFileToStorage.success) {
-        return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+          setIsLoading(false);
+          ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+          return;
+        }
 
         const res = await map_funEditMap({
           data: data,
           fileId: uploadFileToStorage.data.id,
         });
-      res.status === 200
+
-        ? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
+        if (res.status === 200) {
-        : ComponentGlobal_NotifikasiGagal(res.message);
+          ComponentGlobal_NotifikasiBerhasil(res.message);
+          router.back();
+        } else {
+          setIsLoading(false);
+          ComponentGlobal_NotifikasiGagal(res.message);
+        }
       } else {
         const res = await map_funEditMap({
           data: data,
         });
-      res.status === 200
+
-        ? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
+        if (res.status === 200) {
-        : ComponentGlobal_NotifikasiGagal(res.message);
+          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/lib/api_map.ts

@@ -14,7 +14,17 @@ export const apiGetAllMap = async (path?: string) => {
 };
 
 export const apiGetOneMapById = async (path: string) => {
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  if (!token) return await token.json().catch(() => null);
 
-  const response = await fetch(`/api/new/map/${path}`);
+  
+  const response = await fetch(`/api/new/map/${path}`, {
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
   return await response.json().catch(() => null);
 };

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() {
+    try {
+      setLoading(true);
+      const deletePin = await funGlobal_DeleteFileById({
+        fileId: fileRemoveId,
+        dirId: DIRECTORY_ID.map_pin,
+      });
+      if (!deletePin.success) {
+        setLoading(false);
+        clientLogger.error("Error delete logo", deletePin.message);
+      }
+
       const uploadFileToStorage = await funGlobal_UploadToStorage({
         file: filePin,
         dirId: DIRECTORY_ID.map_pin,
       });
 
-    if (!uploadFileToStorage.success)
+      if (!uploadFileToStorage.success) {
-      return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+        setLoading(false);
+        ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+        return;
+      }
 
       const res = await map_funCustomPinMap({
         mapId: mapId,
         fileId: uploadFileToStorage.data.id,
       });
-    res.status === 200
+
-      ? (ComponentGlobal_NotifikasiBerhasil(res.message),
+      if (res.status === 200) {
-        setLoading(true),
+        ComponentGlobal_NotifikasiBerhasil(res.message);
-        router.back())
+        router.back();
-      : ComponentGlobal_NotifikasiGagal(res.message);
+      } else {
+        setLoading(false);
+        ComponentGlobal_NotifikasiGagal(res.message);
+      }
+    } catch (error) {
+      setLoading(false);
+      clientLogger.error("Error custom pin", error);
+    }
   }
 
   return (