diff --git a/src/app/api/image/delete/route.ts b/src/app/api/image/delete/route.ts
index dcf3f89b..42d360e3 100644
--- a/src/app/api/image/delete/route.ts
+++ b/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;
 
diff --git a/src/app/api/new/investasi/route.ts b/src/app/api/new/investasi/route.ts
index ea13150c..3f7a3592 100644
--- a/src/app/api/new/investasi/route.ts
+++ b/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,28 +101,28 @@ export async function GET(request: Request) {
          }
 
          const data = await prisma.investasi.findMany({
-            take: 5,
-            skip: dataSkip,
-            orderBy: {
-               updatedAt: "desc",
-            },
-            where: {
-               authorId: userLoginId,
-               masterStatusInvestasiId: status,
-            },
-            select: {
-               id: true,
-               title: true,
-               targetDana: true,
-               imageId: true,
-               countDown: true,
-               updatedAt: true,
-               MasterPencarianInvestor: {
-                  select: {
-                     name: true
-                  }
-               }
-            }
+           take: dataTake,
+           skip: dataSkip,
+           orderBy: {
+             updatedAt: "desc",
+           },
+           where: {
+             authorId: userLoginId,
+             masterStatusInvestasiId: status,
+           },
+           select: {
+             id: true,
+             title: true,
+             targetDana: true,
+             imageId: true,
+             countDown: true,
+             updatedAt: true,
+             MasterPencarianInvestor: {
+               select: {
+                 name: true,
+               },
+             },
+           },
          });
 
          dataFix = data.map((v: any) => ({
diff --git a/src/app/dev/katalog/[id]/layout.tsx b/src/app/dev/katalog/[id]/layout.tsx
index 98b718f6..79911004 100644
--- a/src/app/dev/katalog/[id]/layout.tsx
+++ b/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 } }) {
-  // const profileId = params.id;
-  // const dataProfile = await Profile_getOneProfileAndUserById(profileId);
-  // const authorId = dataProfile?.userId;
-
-  // const userLoginId = await funGetUserIdByToken();
-  // const userRoleId = dataProfile?.User?.masterUserRoleId;
+export default async function Layout({ children }: { children: any }) {
+  const userLoginId = await funGetUserIdByToken();
 
   return (
     <>
-      {/* <KatalogLayout
-        profileId={profileId}
-        userLoginId={userLoginId as string}
-        authorId={authorId as any}
-        userRoleId={userRoleId as string}
-      >
-        {children}
-      </KatalogLayout> */}
-      <LayoutKatalogNew>{children}</LayoutKatalogNew>
+      <LayoutKatalogNew userLoginId={userLoginId}>{children}</LayoutKatalogNew>
     </>
   );
 }
diff --git a/src/app/dev/portofolio/main/[id]/layout.tsx b/src/app/dev/portofolio/main/[id]/layout.tsx
index 1be53c84..b6c68e76 100644
--- a/src/app/dev/portofolio/main/[id]/layout.tsx
+++ b/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 }; }) {
-  // let portoId = params.id;
-  // const getPorto = await portofolio_getOneById(portoId);
-  // const userLoginId = await funGetUserIdByToken();
+export default async function Layout({ children, }: { children: any;  }) {
+  const userLoginId = await funGetUserIdByToken();
 
   return (
     <>
-      {/* <PortofolioLayout
-        portoId={portoId}
-        userLoginId={userLoginId as string}
-        authorId={getPorto?.Profile?.User?.id as any}
-      >
+      <PortofolioLayoutNew userLoginId={userLoginId}>
         {children}
-      </PortofolioLayout> */}
-      <PortofolioLayoutNew>{children}</PortofolioLayoutNew>
+      </PortofolioLayoutNew>
     </>
   );
 }
diff --git a/src/app/lib/id-derectory.ts b/src/app/lib/id-derectory.ts
index dc430470..f2c1303f 100644
--- a/src/app/lib/id-derectory.ts
+++ b/src/app/lib/id-derectory.ts
@@ -1,6 +1,6 @@
 const DIRECTORY_ID = {
-  profile_foto: "cm0x93rgo000jbp5tj8baoaus",
-  profile_background: "cm0x93ze8000lbp5t1a8uc9wl",
+  profile_foto: "cm5ni43ub001pxpug0qw4p11e",
+  profile_background: "cm5ni4hnq001l12p9gpagxgtv",
   portofolio_logo: "cm0yjl6ug000310njwmk6j0tx",
   map_pin: "cm0yjq8up000710njv5klra32",
   map_image: "cm0yjqnxl000910njplqho07w",
diff --git a/src/app_modules/_global/fun/delete/fun_delete_file_by_id.tsx b/src/app_modules/_global/fun/delete/fun_delete_file_by_id.tsx
index cb3d48be..27e9c8a0 100644
--- a/src/app_modules/_global/fun/delete/fun_delete_file_by_id.tsx
+++ b/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" };
-  // }
 }
diff --git a/src/app_modules/donasi/lib/api_donasi.ts b/src/app_modules/donasi/lib/api_donasi.ts
index a04b7563..c46cfc0b 100644
--- a/src/app_modules/donasi/lib/api_donasi.ts
+++ b/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 : ''}`)
-   return await response.json().catch(() => null)
-}
+  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/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 : ''}`)
-   return await response.json().catch(() => null)
-}
+  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/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 : ''}`)
-   return await response.json().catch(() => null)
-}
+  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/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}`)
-   return await response.json().catch(() => null)
-}
\ No newline at end of file
+  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/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);
+};
diff --git a/src/app_modules/home/component/footer_home.tsx b/src/app_modules/home/component/footer_home.tsx
index de65b7db..696acbd4 100644
--- a/src/app_modules/home/component/footer_home.tsx
+++ b/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}>
-        {listMenuHomeFooter.map((e) => (
-          <Center h={"9vh"} key={e.id}>
+      {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}>
+              <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 == "") {
-                    ComponentGlobal_NotifikasiPeringatan("Cooming Soon");
-                  } else {
-                    router.push(e.link, { scroll: false });
-                  }
+                  router.push(
+                    RouterProfile.katalogOLD + `${dataUser?.profile}`,
+                    {
+                      scroll: false,
+                    }
+                  );
                 }
               }}
             >
-              <ActionIcon
-                radius={"xl"}
-                c={e.link === "" ? "gray" : MainColor.white}
-                variant="transparent"
-              >
-                {e.icon}
+              <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 lineClamp={1} c={e.link === "" ? "gray" : MainColor.white} fz={12}>
-                {e.name}
+              <Text fz={10} c={MainColor.white}>
+                Profile
               </Text>
             </Stack>
           </Center>
-        ))}
-
-        <Center h={"9vh"}>
-          <Stack
-            align="center"
-            spacing={2}
-            onClick={() => {
-              if (
-                dataUser.profile === undefined ||
-                dataUser?.profile === null
-              ) {
-                router.push(RouterProfile.create, { scroll: false });
-              } else {
-                router.push(RouterProfile.katalogOLD + `${dataUser?.profile}`, {
-                  scroll: false,
-                });
-              }
-            }}
-          >
-            <ActionIcon 
-            
-            
-            variant={"transparent"}>
-              {dataUser.profile === undefined || dataUser?.profile === null ? (
-                <IconUserCircle color={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>
+        </SimpleGrid>
+      )}
     </Box>
   );
 }
diff --git a/src/app_modules/home/view_home_new.tsx b/src/app_modules/home/view_home_new.tsx
index b2dd7fda..c632663a 100644
--- a/src/app_modules/home/view_home_new.tsx
+++ b/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
-                radius={"xl"}
-                disabled={countNtf == null}
-                variant={"transparent"}
-                onClick={() => {
-                  if (
-                    dataUser.profile != undefined ||
-                    dataUser?.profile != null
-                  ) {
-                    router.push(RouterUserSearch.main, { scroll: false });
-                  } else {
-                    router.push(RouterProfile.create, { scroll: false });
-                  }
-                }}
-              >
-                <IconUserSearch color={MainColor.white} />
-              </ActionIcon>
+              dataUser?.profile == null ? (
+                <CustomSkeleton width={20} height={20} circle />
+              ) : (
+                <ActionIcon
+                  radius={"xl"}
+                  disabled={countNtf == null}
+                  variant={"transparent"}
+                  onClick={() => {
+                    if (
+                      dataUser.profile != undefined ||
+                      dataUser?.profile != null
+                    ) {
+                      router.push(RouterUserSearch.main, { scroll: false });
+                    } else {
+                      router.push(RouterProfile.create, { scroll: false });
+                    }
+                  }}
+                >
+                  <IconUserSearch color={MainColor.white} />
+                </ActionIcon>
+              )
             }
             customButtonRight={
-              <ActionIcon
-                variant="transparent"
-                disabled={countNtf == null}
-                onClick={() => {
-                  if (
-                    dataUser.profile != undefined ||
-                    dataUser?.profile != null
-                  ) {
-                    setCategoryPage("Semua");
-                    router.push(
-                      RouterNotifikasi.categoryApp({ name: "semua" }),
-                      {
-                        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>
+              dataUser?.profile == null ? (
+                <CustomSkeleton width={20} height={20} circle />
+              ) : (
+                <ActionIcon
+                  variant="transparent"
+                  disabled={countNtf == null}
+                  onClick={() => {
+                    if (
+                      dataUser.profile != undefined ||
+                      dataUser?.profile != null
+                    ) {
+                      setCategoryPage("Semua");
+                      router.push(
+                        RouterNotifikasi.categoryApp({ name: "semua" }),
+                        {
+                          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>
+                      }
+                    >
+                      <IconBell color={MainColor.white} />
+                    </Indicator>
+                  ) : (
                     <IconBell color={MainColor.white} />
-                  </Indicator>
-                ) : (
-                  <IconBell color={MainColor.white} />
-                )}
-              </ActionIcon>
+                  )}
+                </ActionIcon>
+              )
             }
           />
         }
diff --git a/src/app_modules/investasi/_lib/api_interface.ts b/src/app_modules/investasi/_lib/api_interface.ts
index a1475cff..a31133b6 100644
--- a/src/app_modules/investasi/_lib/api_interface.ts
+++ b/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 : ''}`)
-   return await response.json().catch(() => null)
-}
+  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/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}`)
-   return await response.json().catch(() => null)
-}
+  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/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 : ''}`)
-   return await response.json().catch(() => null)
-}
+  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/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 : ''}`)
-   return await response.json().catch(() => null)
-}
\ No newline at end of file
+  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/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);
+};
diff --git a/src/app_modules/katalog/component/regular_expressions.ts b/src/app_modules/katalog/component/regular_expressions.ts
index bb809be0..e4e9d38b 100644
--- a/src/app_modules/katalog/component/regular_expressions.ts
+++ b/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$/;
\ No newline at end of file
+export const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
\ No newline at end of file
diff --git a/src/app_modules/katalog/main/layout_new.tsx b/src/app_modules/katalog/main/layout_new.tsx
index e96ae293..5fe1b898 100644
--- a/src/app_modules/katalog/main/layout_new.tsx
+++ b/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 }) {
-   const param = useParams<{ id: string }>()
-   const [authorId, setAuthorId] = useState("")
-   const [userRoleId, setUserRoleId] = useState("")
-   const [userLoginId, setUserLoginId] = useState("")
-   const [opened, { open, close }] = useDisclosure()
-   const [loading, setLoading] = useState(true);
+export default function LayoutKatalogNew({
+  children,
+  userLoginId,
+}: {
+  children: any;
+  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)
-         const response = await apiGetUserProfile(`?profile=${param.id}`)
-         const response2 = await funGetUserIdByToken()
-         if (response) {
-            setAuthorId(response.data.id)
-            setUserRoleId(response.data.masterUserRoleId)
-            setUserLoginId(response2)
-         }
-      } catch (error) {
-         console.error(error);
-      } finally {
-         setLoading(false)
+  async function getProfile() {
+    try {
+      setLoading(true);
+      const response = await apiGetUserProfile(`?profile=${param.id}`);
+
+      if (response) {
+        setAuthorId(response.data.id);
+        setUserRoleId(response.data.masterUserRoleId);
       }
-   }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  }
 
-   useShallowEffect(() => {
-      getProfile()
-   }, [])
+  useShallowEffect(() => {
+    getProfile();
+  }, []);
 
-   return (
-      <>
-         <UIGlobal_LayoutTamplate
-            header={
-               <UIGlobal_LayoutHeaderTamplate
-                  title="KATALOG"
-                  customButtonRight={
-                     loading ?
-                        <ActionIcon disabled variant="transparent"></ActionIcon> :
-                        authorId == userLoginId ? (
-                           <ActionIcon c="white" variant="transparent" onClick={() => open()}>
-                              <IconDotsVertical />
-                           </ActionIcon>
-                        ) : (
-                           <ActionIcon disabled variant="transparent"></ActionIcon>
-                        )
-                  }
-               />
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={
+          <UIGlobal_LayoutHeaderTamplate
+            title="KATALOG"
+            customButtonRight={
+              loading ? (
+                <ActionIcon disabled variant="transparent">
+                  <CustomSkeleton h={20} w={20} radius={"100%"} />
+                </ActionIcon>
+              ) : authorId == userLoginId ? (
+                <ActionIcon
+                  c="white"
+                  variant="transparent"
+                  onClick={() => open()}
+                >
+                  <IconDotsVertical />
+                </ActionIcon>
+              ) : (
+                <ActionIcon disabled variant="transparent"></ActionIcon>
+              )
             }
-         >
-            {children}
-            <DrawerKatalogNew opened={opened} close={() => close()} userRoleId={userRoleId} userId={userLoginId} />
-         </UIGlobal_LayoutTamplate>
-      </>
-   )
-}
\ No newline at end of file
+          />
+        }
+      >
+        {children}
+        <DrawerKatalogNew
+          opened={opened}
+          close={() => close()}
+          userRoleId={userRoleId}
+          userId={userLoginId}
+        />
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}
diff --git a/src/app_modules/katalog/portofolio/component/button/comp_button_edit_logo_bisnis.tsx b/src/app_modules/katalog/portofolio/component/button/comp_button_edit_logo_bisnis.tsx
index a5600ad7..c6c85b60 100644
--- a/src/app_modules/katalog/portofolio/component/button/comp_button_edit_logo_bisnis.tsx
+++ b/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({
-      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) {
+    try {
       setLoading(true);
-      ComponentGlobal_NotifikasiBerhasil(res.message);
-      router.back();
-    } else {
-      ComponentGlobal_NotifikasiGagal(res.message);
+
+      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) {
+        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}
diff --git a/src/app_modules/katalog/portofolio/component/button_delete_new.tsx b/src/app_modules/katalog/portofolio/component/button_delete_new.tsx
index 384678dc..342d0bbe 100644
--- a/src/app_modules/katalog/portofolio/component/button_delete_new.tsx
+++ b/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);
     }
   }
 
diff --git a/src/app_modules/katalog/portofolio/component/button_more_new.tsx b/src/app_modules/katalog/portofolio/component/button_more_new.tsx
index 96655db3..d4b49e42 100644
--- a/src/app_modules/katalog/portofolio/component/button_more_new.tsx
+++ b/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() {
-   const param = useParams<{ id: string }>()
-   const [userLoginId, setUserLoginId] = useState("")
-   const [authorId, setAuthorId] = useState("")
-   const [mapId, setMapId] = useState(true)
-   const [openDrawer, setOpenDrawer] = useState(false)
+export default function ComponentPortofolio_ButtonMoreNew({
+  userLoginId,
+}: {
+  userLoginId: string;
+}) {
+  const param = useParams<{ id: string }>();
+  const [authorId, setAuthorId] = useState("");
+  const [mapId, setMapId] = useState(true);
+  const [openDrawer, setOpenDrawer] = useState(false);
 
-   const listPage = [
-      {
-         id: "1",
-         name: "Edit detail ",
-         icon: <IconEdit color={MainColor.white} />,
-         path: RouterPortofolio.edit_data_bisnis + `${param.id}`,
-      },
-      {
-         id: "2",
-         name: "Edit logo ",
-         icon: <IconPhotoEdit color={MainColor.white} />,
-         path: RouterPortofolio.edit_logo_bisnis + `${param.id}`,
-      },
-      {
-         id: "3",
-         name: "Edit sosial media",
-         icon: <IconId color={MainColor.white} />,
-         path: RouterPortofolio.edit_medsos_bisnis + `${param.id}`,
-      },
-      {
-         id: "4",
-         name: "Edit data map",
-         icon: <IconMapPin2 color={MainColor.white} />,
-         path: RouterMap.edit + `${param.id}`,
-      },
-      {
-         id: "5",
-         name: "Custom pin map",
-         icon: <IconMapPin color={MainColor.white} />,
-         path: RouterMap.custom_pin + `${param.id}`,
-      },
-   ];
+  const listPage = [
+    {
+      id: "1",
+      name: "Edit detail ",
+      icon: <IconEdit color={MainColor.white} />,
+      path: RouterPortofolio.edit_data_bisnis + `${param.id}`,
+    },
+    {
+      id: "2",
+      name: "Edit logo ",
+      icon: <IconPhotoEdit color={MainColor.white} />,
+      path: RouterPortofolio.edit_logo_bisnis + `${param.id}`,
+    },
+    {
+      id: "3",
+      name: "Edit sosial media",
+      icon: <IconId color={MainColor.white} />,
+      path: RouterPortofolio.edit_medsos_bisnis + `${param.id}`,
+    },
+    {
+      id: "4",
+      name: "Edit data map",
+      icon: <IconMapPin2 color={MainColor.white} />,
+      path: RouterMap.edit + `${param.id}`,
+    },
+    {
+      id: "5",
+      name: "Custom pin map",
+      icon: <IconMapPin color={MainColor.white} />,
+      path: RouterMap.custom_pin + `${param.id}`,
+    },
+  ];
 
-   const listPage2 = [
-      {
-         id: "1",
-         name: "Edit detail ",
-         icon: <IconEdit color={MainColor.white} />,
-         path: RouterPortofolio.edit_data_bisnis + `${param.id}`,
-      },
-      {
-         id: "2",
-         name: "Edit logo ",
-         icon: <IconPhotoEdit color={MainColor.white} />,
-         path: RouterPortofolio.edit_logo_bisnis + `${param.id}`,
-      },
-      {
-         id: "3",
-         name: "Edit sosial media",
-         icon: <IconId color={MainColor.white} />,
-         path: RouterPortofolio.edit_medsos_bisnis + `${param.id}`,
-      },
-      {
-         id: "4",
-         name: "Edit data map",
-         icon: <IconMapPin2 color={MainColor.white} />,
-         path: RouterMap.create + `${param.id}`,
-      },
-      {
-         id: "5",
-         name: "Custom pin map",
-         icon: <IconMapPin color={MainColor.white} />,
-         path: RouterMap.custom_pin + `${param.id}`,
-      },
-   ];
+  const listPage2 = [
+    {
+      id: "1",
+      name: "Edit detail ",
+      icon: <IconEdit color={MainColor.white} />,
+      path: RouterPortofolio.edit_data_bisnis + `${param.id}`,
+    },
+    {
+      id: "2",
+      name: "Edit logo ",
+      icon: <IconPhotoEdit color={MainColor.white} />,
+      path: RouterPortofolio.edit_logo_bisnis + `${param.id}`,
+    },
+    {
+      id: "3",
+      name: "Edit sosial media",
+      icon: <IconId color={MainColor.white} />,
+      path: RouterPortofolio.edit_medsos_bisnis + `${param.id}`,
+    },
+    {
+      id: "4",
+      name: "Edit data map",
+      icon: <IconMapPin2 color={MainColor.white} />,
+      path: RouterMap.create + `${param.id}`,
+    },
+    {
+      id: "5",
+      name: "Custom pin map",
+      icon: <IconMapPin color={MainColor.white} />,
+      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() {
-      try {
-         const response = await apiGetOnePortofolioById(param.id, "bisnis")
-         const response3 = await apiGetOnePortofolioById(param.id, "lokasi")
-         const response2 = await funGetUserIdByToken()
-         if (response) {
-            setAuthorId(response.data.authorId)
-            setMapId((response3 !== null && response3.data?.mapId !== undefined) ? true : false)
-            setUserLoginId(response2)
-         }
-      } catch (error) {
-         console.error(error);
+      if (response) {
+        setAuthorId(response.data.authorId);
+        setMapId(
+          response3 !== null && response3.data?.mapId !== undefined
+            ? true
+            : false
+        );
       }
-   }
+    } catch (error) {
+      console.error(error);
+    }
+  }
 
-   useShallowEffect(() => {
-      funGetPortofolio()
-   }, []);
+  useShallowEffect(() => {
+    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 (
-      <>
-         {userLoginId === authorId ? (
-            <ActionIcon variant="transparent" onClick={() => setOpenDrawer(true)}>
-               <IconDotsVertical color={MainColor.white} />
-            </ActionIcon>
-         ) : (
-            <ActionIcon disabled variant="transparent"></ActionIcon>
-         )}
-
-         <UIGlobal_Drawer
-            opened={openDrawer}
-            close={() => setOpenDrawer(false)}
-            component={mapId ? listPage : listPage2}
-         />
-      </>
-   )
-}
\ No newline at end of file
+      <UIGlobal_Drawer
+        opened={openDrawer}
+        close={() => setOpenDrawer(false)}
+        component={mapId ? listPage : listPage2}
+      />
+    </>
+  );
+}
diff --git a/src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx b/src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx
index b6971b41..cae4cb08 100644
--- a/src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx
+++ b/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>
     </>
diff --git a/src/app_modules/katalog/portofolio/lib/api_portofolio.ts b/src/app_modules/katalog/portofolio/lib/api_portofolio.ts
index 7e30afa6..94d9e10f 100644
--- a/src/app_modules/katalog/portofolio/lib/api_portofolio.ts
+++ b/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);
 };
diff --git a/src/app_modules/katalog/portofolio/ui/ui_layout_new.tsx b/src/app_modules/katalog/portofolio/ui/ui_layout_new.tsx
index 9f6b5d75..6a1921bb 100644
--- a/src/app_modules/katalog/portofolio/ui/ui_layout_new.tsx
+++ b/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 }) {
-   return (
-      <>
-         <UIGlobal_LayoutTamplate
-            header={
-               <UIGlobal_LayoutHeaderTamplate
-                  title="Detail Portofolio"
-                  customButtonRight={<ComponentPortofolio_ButtonMoreNew />}
-               />
+export default function PortofolioLayoutNew({
+  children,
+  userLoginId,
+}: {
+  children: any;
+  userLoginId: string
+}) {
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={
+          <UIGlobal_LayoutHeaderTamplate
+            title="Detail Portofolio"
+            customButtonRight={
+              <ComponentPortofolio_ButtonMoreNew userLoginId={userLoginId} />
             }
-         >
-            {children}
-         </UIGlobal_LayoutTamplate>
-      </>
-   )
+          />
+        }
+      >
+        {children}
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
 }
\ No newline at end of file
diff --git a/src/app_modules/katalog/profile/_component/button/comp_button_update_background_profile.tsx b/src/app_modules/katalog/profile/_component/button/comp_button_update_background_profile.tsx
index bb947e84..59d5f371 100644
--- a/src/app_modules/katalog/profile/_component/button/comp_button_update_background_profile.tsx
+++ b/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(
-          "Gagal upload background"
-        );
+        ComponentGlobal_NotifikasiPeringatan("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);
     }
   }
 
diff --git a/src/app_modules/katalog/profile/_component/button/comp_button_update_photo_profile.tsx b/src/app_modules/katalog/profile/_component/button/comp_button_update_photo_profile.tsx
index ac721d40..a36365f2 100644
--- a/src/app_modules/katalog/profile/_component/button/comp_button_update_photo_profile.tsx
+++ b/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,41 +31,45 @@ 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,
       });
-      
+
       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 (
diff --git a/src/app_modules/katalog/profile/_component/button/comp_create_new_profile.tsx b/src/app_modules/katalog/profile/_component/button/comp_create_new_profile.tsx
index ccb8fc6a..08f2fcc9 100644
--- a/src/app_modules/katalog/profile/_component/button/comp_create_new_profile.tsx
+++ b/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 == "")
diff --git a/src/app_modules/katalog/profile/create/view.tsx b/src/app_modules/katalog/profile/create/view.tsx
index 77feb0b2..7751a451 100644
--- a/src/app_modules/katalog/profile/create/view.tsx
+++ b/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" />
               ) : (
                 ""
diff --git a/src/app_modules/katalog/profile/edit/view.tsx b/src/app_modules/katalog/profile/edit/view.tsx
index 6cbce3dd..8ac1e38e 100644
--- a/src/app_modules/katalog/profile/edit/view.tsx
+++ b/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 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 { emailRegex } 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 {
+      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"
@@ -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> */}
     </>
   );
 }
diff --git a/src/app_modules/map/_component/button/comp_button_update_data_map.tsx b/src/app_modules/map/_component/button/comp_button_update_data_map.tsx
index 749f0efa..e0d5f1fa 100644
--- a/src/app_modules/map/_component/button/comp_button_update_data_map.tsx
+++ b/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) {
-      const uploadFileToStorage = await funGlobal_UploadToStorage({
-        file: file,
-        dirId: DIRECTORY_ID.map_image,
-      });
-      if (!uploadFileToStorage.success)
-        return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+    try {
+      setIsLoading(true);
 
-      const res = await map_funEditMap({
-        data: data,
-        fileId: uploadFileToStorage.data.id,
-      });
-      res.status === 200
-        ? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
-        : ComponentGlobal_NotifikasiGagal(res.message);
-    } else {
-      const res = await map_funEditMap({
-        data: data,
-      });
-      res.status === 200
-        ? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
-        : ComponentGlobal_NotifikasiGagal(res.message);
+      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) {
+          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 (
diff --git a/src/app_modules/map/lib/api_map.ts b/src/app_modules/map/lib/api_map.ts
index e274279c..feb650b5 100644
--- a/src/app_modules/map/lib/api_map.ts
+++ b/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 response = await fetch(`/api/new/map/${path}`);
+  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}`, {
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
   return await response.json().catch(() => null);
 };
diff --git a/src/app_modules/map/ui/ui_custom_pin.tsx b/src/app_modules/map/ui/ui_custom_pin.tsx
index d9799565..93ccb1b7 100644
--- a/src/app_modules/map/ui/ui_custom_pin.tsx
+++ b/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({
-      file: filePin,
-      dirId: DIRECTORY_ID.map_pin,
-    });
+    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);
+      }
 
-    if (!uploadFileToStorage.success)
-      return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+      const uploadFileToStorage = await funGlobal_UploadToStorage({
+        file: filePin,
+        dirId: DIRECTORY_ID.map_pin,
+      });
 
-    const res = await map_funCustomPinMap({
-      mapId: mapId,
-      fileId: uploadFileToStorage.data.id,
-    });
-    res.status === 200
-      ? (ComponentGlobal_NotifikasiBerhasil(res.message),
-        setLoading(true),
-        router.back())
-      : ComponentGlobal_NotifikasiGagal(res.message);
+      if (!uploadFileToStorage.success) {
+        setLoading(false);
+        ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+        return;
+      }
+
+      const res = await map_funCustomPinMap({
+        mapId: mapId,
+        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 (