fix: Map

Deskripsi: - Tampilan map - Tampilan portofolio - Kirim file ke wibu storage ## No Image
2024-09-21 04:53:19 +08:00
parent 128da1eb32
commit 56548b4258
43 changed files with 620 additions and 589 deletions
--- a/src/app_modules/map/_component/button/comp_button_save_pin.tsx
+++ b/src/app_modules/map/_component/button/comp_button_save_pin.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import { MainColor } from "@/app_modules/_global/color";
+import {
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiGagal,
+  ComponentGlobal_NotifikasiPeringatan,
+} from "@/app_modules/_global/notif_global";
+import { Button } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { map_funCreatePin } from "../../fun/create/fun_create_pin";
+import { DIRECTORY_ID } from "@/app/lib";
+import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+
+export function ComponentMap_ButtonSavePin({
+  namePin,
+  lat,
+  long,
+  portofolioId,
+  file,
+}: {
+  namePin: string;
+  lat: string;
+  long: string;
+  portofolioId: string;
+  file: File;
+}) {
+  const router = useRouter();
+  async function onSavePin() {
+    const uploadFileToStorage = await funGlobal_UploadToStorage({
+      file: file,
+      dirId: DIRECTORY_ID.map_image,
+    });
+
+    if (!uploadFileToStorage.success)
+      return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+
+    const res = await map_funCreatePin({
+      data: {
+        latitude: lat as any,
+        longitude: long as any,
+        namePin: namePin as any,
+        imageId: uploadFileToStorage.data.id,
+        Portofolio: {
+          create: { id: portofolioId } as any,
+        },
+      },
+    });
+    res.status === 200
+      ? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
+      : ComponentGlobal_NotifikasiGagal(res.message);
+  }
+
+  return (
+    <>
+      <Button
+        my={"xl"}
+        style={{ transition: "0.5s" }}
+        disabled={namePin === "" || file === null ? true : false}
+        radius={"xl"}
+        bg={MainColor.yellow}
+        color="yellow"
+        c={"black"}
+        onClick={() => onSavePin()}
+      >
+        Simpan
+      </Button>
+    </>
+  );
+}
--- 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
@@ -0,0 +1,72 @@
+"use client";
+
+import { MainColor } from "@/app_modules/_global/color";
+import {
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiGagal,
+  ComponentGlobal_NotifikasiPeringatan,
+} from "@/app_modules/_global/notif_global";
+import { Button } from "@mantine/core";
+
+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,
+  file,
+}: {
+  data: MODEL_MAP;
+  file: File;
+}) {
+  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");
+
+      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);
+    }
+    setIsLoading(true);
+  }
+
+  return (
+    <>
+      <Button
+        loaderPosition="center"
+        loading={isLoading}
+        mb={"xl"}
+        style={{ transition: "0.5s" }}
+        disabled={data.namePin === "" ? true : false}
+        radius={"xl"}
+        bg={MainColor.yellow}
+        color="yellow"
+        c={"black"}
+        onClick={() => onSavePin()}
+      >
+        Simpan
+      </Button>
+    </>
+  );
+}
--- a/src/app_modules/map/_component/detail_data.tsx
+++ b/src/app_modules/map/_component/detail_data.tsx
@@ -25,6 +25,8 @@ import { useState } from "react";
 import { map_funGetOneById } from "../fun/get/fun_get_one_by_id";
 import { MODEL_MAP } from "../lib/interface";
 import { ComponentMap_SkeletonDrawerDetailData } from "./skeleton_detail_data";
+import { APIs } from "@/app/lib";
+import { ComponentGlobal_LoadImage } from "@/app_modules/_global/component";

 export function ComponentMap_DetailData({ mapId }: { mapId: any }) {
  const router = useRouter();
@@ -59,13 +61,8 @@ export function ComponentMap_DetailData({ mapId }: { mapId: any }) {
            { maxWidth: 600, cols: 1, spacing: "sm" },
          ]}
        >
-          <Image
-            radius={"sm"}
-            mah={300}
-            maw={200}
-            alt="Foto"
-            src={RouterMap.api_foto + data?.imageMapId}
-          />
+          <ComponentGlobal_LoadImage url={APIs.GET + data?.imageId} />
+          {/* <Image radius={"sm"} mah={300} maw={200} alt="Photo" src={} /> */}
          <Box>
            <Grid>
              <Grid.Col span={2}>
--- a/src/app_modules/map/_component/index.ts
+++ b/src/app_modules/map/_component/index.ts
@@ -1,3 +1,8 @@
+import { ComponentMap_ButtonSavePin } from "./button/comp_button_save_pin";
+import { ComponentMap_ButtonUpdateDataMap } from "./button/comp_button_update_data_map";
+
 export { ComponentMap_Header } from "./header";
 export { ComponentMap_DrawerDetailData } from "./drawer";
 export { ComponentMap_SkeletonDrawerDetailData } from "./skeleton_detail_data";
+export { ComponentMap_ButtonSavePin };
+export { ComponentMap_ButtonUpdateDataMap };
--- a/src/app_modules/map/fun/create/fun_create_pin.ts
+++ b/src/app_modules/map/fun/create/fun_create_pin.ts
@@ -3,42 +3,24 @@
 import prisma from "@/app/lib/prisma";
 import { RouterMap } from "@/app/lib/router_hipmi/router_map";
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
-import fs from "fs";
-import _ from "lodash";
+import { Prisma } from "@prisma/client";
 import { revalidatePath } from "next/cache";
-import { v4 } from "uuid";

-export async function map_funCreatePin({ data }: { data: any }) {
+export async function map_funCreatePin({
+  data,
+}: {
+  data: Prisma.BusinessMapsCreateInput;
+}) {
  const userLoginId = await funGetUserIdByToken();

-  const gambar: any = data.gambar.get("file");
-  const fileName = gambar.name;
-  const fileExtension = _.lowerCase(gambar.name.split(".").pop());
-  const fRandomName = v4(fileName) + "." + fileExtension;
-
-  const uploadImage = await prisma.images.create({
-    data: {
-      url: fRandomName,
-      label: "MAP_PHOTO",
-    },
-    select: {
-      id: true,
-      url: true,
-    },
-  });
-
-  if (!uploadImage) return { status: 400, message: "Gagal upload foto lokasi" };
-  const upload_Folder = Buffer.from(await gambar.arrayBuffer());
-  fs.writeFileSync(`./public/map/foto/${uploadImage.url}`, upload_Folder);
-
  const create = await prisma.businessMaps.create({
    data: {
-      latitude: data.lat,
-      longitude: data.long,
+      latitude: data.latitude,
+      longitude: data.longitude,
      namePin: data.namePin,
-      portofolioId: data?.portofolioId,
+      portofolioId: data.Portofolio?.create?.id,
      authorId: userLoginId,
-      imageMapId: uploadImage.id,
+      imageId: data.imageId,
    },
  });

--- a/src/app_modules/map/fun/edit/fun_custom_pin_map.ts
+++ b/src/app_modules/map/fun/edit/fun_custom_pin_map.ts
@@ -1,50 +1,26 @@
 "use server";

 import prisma from "@/app/lib/prisma";
-import _ from "lodash";
-import { v4 } from "uuid";
-import fs from "fs";
-import { revalidatePath } from "next/cache";
 import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
+import { revalidatePath } from "next/cache";

 export async function map_funCustomPinMap({
  mapId,
-  file,
+  fileId,
 }: {
  mapId: string;
-  file: FormData;
+  fileId: string;
 }) {
-
-  const newPin: any = file.get("file");
-  const fileName = newPin.name;
-  const fileExtension = _.lowerCase(newPin.name.split(".").pop());
-  const fileRandomName = v4(fileName) + "." + fileExtension;
-
-  const uploadPin = await prisma.images.create({
-    data: {
-      url: fileRandomName,
-      label: "MAP_CUSTOM_PIN",
-    },
-    select: {
-      id: true,
-      url: true,
-    },
-  });
-
-  if (!uploadPin) return { status: 400, message: "Gagal upload foto lokasi" };
-  const upload_Folder = Buffer.from(await newPin.arrayBuffer());
-  fs.writeFileSync(`./public/map/pin/${uploadPin.url}`, upload_Folder);
-
  const updt = await prisma.businessMaps.update({
    where: {
      id: mapId,
    },
    data: {
-      imagePinId: uploadPin.id,
+      pinId: fileId,
    },
  });

  if (!updt) return { status: 400, message: "Gagal update pin" };
-  revalidatePath(RouterPortofolio.main_detail)
+  revalidatePath(RouterPortofolio.main_detail);
  return { status: 200, message: "Berhasil update pin" };
 }
--- a/src/app_modules/map/fun/edit/fun_edit_map.ts
+++ b/src/app_modules/map/fun/edit/fun_edit_map.ts
@@ -1,45 +1,18 @@
 "use server";

-import _, { update } from "lodash";
-import { MODEL_MAP } from "../../lib/interface";
-import { v4 } from "uuid";
 import prisma from "@/app/lib/prisma";
-import fs from "fs";
-import { revalidatePath } from "next/cache";
 import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
+import { revalidatePath } from "next/cache";
+import { MODEL_MAP } from "../../lib/interface";

 export async function map_funEditMap({
  data,
-  file,
-
+  fileId,
 }: {
  data: MODEL_MAP;
-  file: FormData;
+  fileId?: string;
 }) {
-  // console.log(data, file);
-
-  const gambar: any = file.get("file");
-  if (gambar !== "null") {
-    const fileName = gambar.name;
-    const fileExtension = _.lowerCase(gambar.name.split(".").pop());
-    const fRandomName = v4(fileName) + "." + fileExtension;
-
-    const uploadImage = await prisma.images.create({
-      data: {
-        url: fRandomName,
-        label: "MAP_PHOTO",
-      },
-      select: {
-        id: true,
-        url: true,
-      },
-    });
-
-    if (!uploadImage)
-      return { status: 400, message: "Gagal upload foto lokasi" };
-    const upload_Folder = Buffer.from(await gambar.arrayBuffer());
-    fs.writeFileSync(`./public/map/foto/${uploadImage.url}`, upload_Folder);
-
+  if (fileId === undefined || fileId === null) {
    const updt = await prisma.businessMaps.update({
      where: {
        id: data.id,
@@ -48,25 +21,25 @@ export async function map_funEditMap({
        latitude: data.latitude,
        longitude: data.longitude,
        namePin: data.namePin,
-        imageMapId: uploadImage.id,
      },
    });
-
    if (!updt) return { status: 400, message: "Gagal update data" };
+    revalidatePath(RouterPortofolio.main_detail);
+    return { status: 200, message: "Berhasil update" };
+  } else {
+    const updt = await prisma.businessMaps.update({
+      where: {
+        id: data.id,
+      },
+      data: {
+        latitude: data.latitude,
+        longitude: data.longitude,
+        namePin: data.namePin,
+        imageId: fileId,
+      },
+    });
+    if (!updt) return { status: 400, message: "Gagal update data" };
+    revalidatePath(RouterPortofolio.main_detail);
+    return { status: 200, message: "Berhasil update" };
  }
-
-  const updt = await prisma.businessMaps.update({
-    where: {
-      id: data.id,
-    },
-    data: {
-      latitude: data.latitude,
-      longitude: data.longitude,
-      namePin: data.namePin,
-    },
-  });
-  if (!updt) return { status: 400, message: "Gagal update data" };
-
-  revalidatePath(RouterPortofolio.main_detail);
-  return { status: 200, message: "Berhasil update" };
 }
--- a/src/app_modules/map/fun/get/fun_get_one_by_id.ts
+++ b/src/app_modules/map/fun/get/fun_get_one_by_id.ts
@@ -7,7 +7,7 @@ export async function map_funGetOneById({ mapId }: { mapId: string }) {
    where: {
      id: mapId,
    },
-    select: {
+    include: {
      Author: {
        select: {
          id: true,
@@ -20,15 +20,6 @@ export async function map_funGetOneById({ mapId }: { mapId: string }) {
          },
        },
      },
-      id: true,
-      isActive: true,
-      createdAt: true,
-      updatedAt: true,
-      namePin: true,
-      latitude: true,
-      longitude: true,
-      authorId: true,
-      imageMapId: true,
      Portofolio: {
        select: {
          id: true,
--- a/src/app_modules/map/fun/get/fun_get_one_by_portofolio_id.ts
+++ b/src/app_modules/map/fun/get/fun_get_one_by_portofolio_id.ts
@@ -12,12 +12,9 @@ export async function map_funGetOneBusinessMapByPortofolioId({
      portofolioId: portofolioId,
    },
    include: {
-      ImageMap: true,
-      ImagePin: true,
      Portofolio: {
        select: {
          id: true,
-          Logo: true,
          logoId: true
        }
      }
--- a/src/app_modules/map/lib/interface.ts
+++ b/src/app_modules/map/lib/interface.ts
@@ -12,9 +12,7 @@ export interface MODEL_MAP {
  authorId: string;
  Author: MODEL_USER;
  portofolioId: string;
-  Portofolio: MODEL_PORTOFOLIO
-  imageMapId: string
-  ImageMap: any
-  imagePinId: string
-  ImagePin: any
+  Portofolio: MODEL_PORTOFOLIO;
+  imageId: string;
+  pinId: string;
 }
--- a/src/app_modules/map/ui/ui_create_pin.tsx
+++ b/src/app_modules/map/ui/ui_create_pin.tsx
@@ -4,12 +4,10 @@ import {
  AccentColor,
  MainColor,
 } from "@/app_modules/_global/color/color_pallet";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import {
  AspectRatio,
-  Box,
  Button,
  Center,
  FileButton,
@@ -22,7 +20,6 @@ import {
 } from "@mantine/core";
 import { IconCamera } from "@tabler/icons-react";
 import _ from "lodash";
-import { useRouter } from "next/navigation";
 import { useState } from "react";
 import Map, {
  AttributionControl,
@@ -30,7 +27,7 @@ import Map, {
  NavigationControl,
  ScaleControl,
 } from "react-map-gl";
-import { map_funCreatePin } from "../fun/create/fun_create_pin";
+import { ComponentMap_ButtonSavePin } from "../_component";
 import { defaultLatLong, defaultMapZoom } from "../lib/default_lat_long";

 export function UiMap_CreatePin({
@@ -116,52 +113,26 @@ export function UiMap_CreatePin({
        </Paper>

        <Stack>
-          {img ? (
-            <AspectRatio ratio={1 / 1} mah={300}>
-              <Paper
-                style={{
-                  border: `2px solid ${AccentColor.blue}`,
-                  backgroundColor: AccentColor.darkblue,
-                  padding: "10px",
-                  borderRadius: "10px",
-                }}
-              >
+          <ComponentGlobal_BoxUploadImage>
+            {img ? (
+              <AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
                <Image
-                  radius={"sm"}
+                  style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
                  alt="Foto"
-                  src={img ? img : "/aset/no-img.png"}
-                  maw={200}
+                  height={250}
+                  src={img}
                />
-              </Paper>
-            </AspectRatio>
-          ) : (
-            <AspectRatio ratio={1 / 1} mah={300}>
-              <Paper
-                style={{
-                  border: `2px solid ${AccentColor.blue}`,
-                  backgroundColor: AccentColor.darkblue,
-                  padding: "10px",
-                  borderRadius: "10px",
-                }}
-              >
-                <Box
-                  h={250}
-                  w={200}
-                  style={{
-                    color: "white",
-                  }}
-                >
-                  <Stack spacing={5} justify="center" align="center" h={"100%"}>
-                    <Title order={3}>Foto Lokasi Bisnis</Title>
-                    <Text fs={"italic"} fz={10} align="center">
-                      Upload foto lokasi bisnis anda untuk ditampilkan dalam
-                      detail map
-                    </Text>
-                  </Stack>
-                </Box>
-              </Paper>
-            </AspectRatio>
-          )}
+              </AspectRatio>
+            ) : (
+              <Stack spacing={5} justify="center" align="center" h={"100%"}>
+                <Title order={3}>Foto Lokasi Bisnis</Title>
+                <Text fs={"italic"} fz={10} align="center">
+                  Upload foto lokasi bisnis anda untuk ditampilkan dalam detail
+                  map
+                </Text>
+              </Stack>
+            )}
+          </ComponentGlobal_BoxUploadImage>

          <Center>
            <FileButton
@@ -202,7 +173,7 @@ export function UiMap_CreatePin({
          </Center>
        </Stack>

-        <ButtonSavePin
+        <ComponentMap_ButtonSavePin
          namePin={namePin}
          lat={lat as any}
          long={long as any}
@@ -213,47 +184,3 @@ export function UiMap_CreatePin({
    </>
  );
 }
-
-function ButtonSavePin({
-  namePin,
-  lat,
-  long,
-  portofolioId,
-  file,
-}: {
-  namePin: string;
-  lat: string;
-  long: string;
-  portofolioId: string;
-  file: FormData;
-}) {
-  const router = useRouter();
-  async function onSavePin() {
-    const gambar = new FormData();
-    gambar.append("file", file as any);
-
-    const res = await map_funCreatePin({
-      data: { namePin, lat, long, portofolioId, gambar },
-    });
-    res.status === 200
-      ? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
-      : ComponentGlobal_NotifikasiGagal(res.message);
-  }
-
-  return (
-    <>
-      <Button
-        mt={"xl"}
-        style={{ transition: "0.5s" }}
-        disabled={namePin === "" || file === null ? true : false}
-        radius={"xl"}
-        bg={MainColor.yellow}
-        color="yellow"
-        c={"black"}
-        onClick={() => onSavePin()}
-      >
-        Simpan
-      </Button>
-    </>
-  );
-}
--- a/src/app_modules/map/ui/ui_custom_pin.tsx
+++ b/src/app_modules/map/ui/ui_custom_pin.tsx
@@ -11,13 +11,7 @@ import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empt
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import {
-  Avatar,
-  Button,
-  Center,
-  FileButton,
-  Stack
-} from "@mantine/core";
+import { Avatar, Button, Center, FileButton, Stack } from "@mantine/core";
 import { IconCamera } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -31,6 +25,8 @@ import {
 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";

 export function UiMap_CustomPin({
  dataMap,
@@ -62,7 +58,7 @@ export function UiMap_CustomPin({
              <Avatar
                size={200}
                radius={"100%"}
-                src={imgPin ? imgPin : "/aset/no-img.png"}
+                src={imgPin ? imgPin : "/aset/global/no-image.svg"}
                style={{
                  border: `2px solid ${AccentColor.skyblue}`,
                  backgroundColor: AccentColor.darkblue,
@@ -75,9 +71,9 @@ export function UiMap_CustomPin({
                size={200}
                radius={"100%"}
                src={
-                  data.imagePinId === null
-                    ? RouterPortofolio.api_logo_porto + data.Portofolio.logoId
-                    : RouterMap.api_custom_pin + data.imagePinId
+                  data.pinId === null
+                    ? APIs.GET + data.Portofolio.logoId
+                    : APIs.GET + data.pinId
                }
                style={{
                  border: `2px solid ${AccentColor.skyblue}`,
@@ -158,9 +154,9 @@ export function UiMap_CustomPin({
              src={
                imgPin
                  ? imgPin
-                  : data.imagePinId === null
-                    ? RouterPortofolio.api_logo_porto + data.Portofolio.logoId
-                    : RouterMap.api_custom_pin + data.imagePinId
+                  : data.pinId === null
+                    ? APIs.GET + data.Portofolio.logoId
+                    : APIs.GET + data.pinId
              }
              style={{
                border: `2px solid ${AccentColor.softblue}`,
@@ -180,23 +176,27 @@ export function UiMap_CustomPin({
  );
 }

-function ButtonSimpan({
-  mapId,
-  filePin,
-}: {
-  mapId: string;
-  filePin: FormData;
-}) {
+function ButtonSimpan({ mapId, filePin }: { mapId: string; filePin: File }) {
  const router = useRouter();
  const [isLoading, setLoading] = useState(false);

  async function onCustom() {
-    const file = new FormData();
-    file.append("file", filePin as any);
+    const uploadFileToStorage = await funGlobal_UploadToStorage({
+      file: filePin,
+      dirId: DIRECTORY_ID.map_pin,
+    });

-    const res = await map_funCustomPinMap({ mapId: mapId, file: file });
+    if (!uploadFileToStorage.success)
+      return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+
+    const res = await map_funCustomPinMap({
+      mapId: mapId,
+      fileId: uploadFileToStorage.data.id,
+    });
    res.status === 200
-      ? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
+      ? (ComponentGlobal_NotifikasiBerhasil(res.message),
+        setLoading(true),
+        router.back())
      : ComponentGlobal_NotifikasiGagal(res.message);
  }

--- a/src/app_modules/map/ui/ui_edit_map.tsx
+++ b/src/app_modules/map/ui/ui_edit_map.tsx
@@ -19,7 +19,9 @@ import {
  Image,
  Paper,
  Stack,
+  Text,
  TextInput,
+  Title,
 } from "@mantine/core";
 import { IconCamera } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
@@ -33,6 +35,9 @@ import Map, {
 import { map_funEditMap } from "../fun/edit/fun_edit_map";
 import { defaultMapZoom } from "../lib/default_lat_long";
 import { MODEL_MAP } from "../lib/interface";
+import { APIs } from "@/app/lib";
+import { ComponentGlobal_BoxUploadImage, ComponentGlobal_LoadImage } from "@/app_modules/_global/component";
+import { ComponentMap_ButtonUpdateDataMap } from "../_component";

 export function UiMap_EditMap({
  mapboxToken,
@@ -84,9 +89,9 @@ export function UiMap_EditMap({
          >
            <Avatar
              src={
-                data.ImagePin === null
-                  ? RouterPortofolio.api_logo_porto + dataMap.Portofolio.logoId
-                  : RouterMap.api_custom_pin + data.imagePinId
+                data.pinId === null
+                  ? APIs.GET + dataMap.Portofolio.logoId
+                  : APIs.GET + data.pinId
              }
              alt="Logo"
              style={{
@@ -127,11 +132,29 @@ export function UiMap_EditMap({
          />
        </Paper>

-        {/* Foto Usaha */}
+        {/* Photo Usaha */}
        <Stack spacing={"xs"}>
-          <ComponentGlobal_BoxInformation informasi="Masukan foto toko atau tempat usaha anda !" />
+          <ComponentGlobal_BoxInformation informasi="Masukan photo toko atau tempat usaha anda !" />

-          {img ? (
+          <ComponentGlobal_BoxUploadImage>
+            {img ? (
+              <AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
+                <Image
+                  style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
+                  alt="Photo"
+                  height={250}
+                  src={img}
+                />
+              </AspectRatio>
+            ) : (
+              <ComponentGlobal_LoadImage
+
+                url={APIs.GET + data.imageId}
+              />
+            )}
+          </ComponentGlobal_BoxUploadImage>
+
+          {/* {img ? (
            <AspectRatio ratio={1 / 1} mah={300}>
              <Paper
                style={{
@@ -143,7 +166,7 @@ export function UiMap_EditMap({
              >
                <Image
                  radius={"sm"}
-                  alt="Foto"
+                  alt="Photo"
                  src={img ? img : "/aset/no-img.png"}
                  maw={250}
                />
@@ -161,13 +184,13 @@ export function UiMap_EditMap({
              >
                <Image
                  radius={"sm"}
-                  alt="Foto"
-                  src={RouterMap.api_foto + data.imageMapId}
+                  alt="Photo"
+                  src={RouterMap.api_foto + data.imageId}
                  maw={250}
                />
              </Paper>
            </AspectRatio>
-          )}
+          )} */}

          <Center>
            <FileButton
@@ -207,41 +230,10 @@ export function UiMap_EditMap({
          </Center>
        </Stack>

-        <ButtonSavePin data={data as any} file={file} />
+        <ComponentMap_ButtonUpdateDataMap data={data as any} file={file} />
      </Stack>
    </>
  );
 }

-function ButtonSavePin({ data, file }: { data: MODEL_MAP; file: FormData }) {
-  const router = useRouter();
-  async function onSavePin() {
-    const gambar = new FormData();
-    gambar.append("file", file as any);

-    const res = await map_funEditMap({
-      data: data,
-      file: gambar,
-    });
-    res.status === 200
-      ? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
-      : ComponentGlobal_NotifikasiGagal(res.message);
-  }
-
-  return (
-    <>
-      <Button
-        mb={"xl"}
-        style={{ transition: "0.5s" }}
-        disabled={data.namePin === "" ? true : false}
-        radius={"xl"}
-        bg={MainColor.yellow}
-        color="yellow"
-        c={"black"}
-        onClick={() => onSavePin()}
-      >
-        Simpan
-      </Button>
-    </>
-  );
-}
--- a/src/app_modules/map/ui/ui_map.tsx
+++ b/src/app_modules/map/ui/ui_map.tsx
@@ -1,8 +1,8 @@
 "use client";

-import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
-import { RouterMap } from "@/app/lib/router_hipmi/router_map";
+import { APIs } from "@/app/lib";
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 import { Avatar, Stack } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import "mapbox-gl/dist/mapbox-gl.css";
@@ -18,7 +18,6 @@ import { ComponentMap_DetailData } from "../_component/detail_data";
 import { map_funGetAllMap } from "../fun/get/fun_get_all_map";
 import { defaultLatLong, defaultMapZoom } from "../lib/default_lat_long";
 import { MODEL_MAP } from "../lib/interface";
-import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";

 export function UiMap_MapBoxView({
  mapboxToken,
@@ -91,9 +90,9 @@ export function UiMap_MapBoxView({
                      backgroundColor: "white",
                    }}
                    src={
-                      e.imagePinId === null
-                        ? RouterPortofolio.api_logo_porto + e.Portofolio.logoId
-                        : RouterMap.api_custom_pin + e.imagePinId
+                      e.pinId === null
+                        ? APIs.GET + e.Portofolio.logoId
+                        : APIs.GET + e.pinId
                    }
                  />
                </Stack>