fix: Map

Deskripsi:
- Tampilan map
- Tampilan portofolio
- Kirim file ke wibu storage
## No Image

prisma/schema.prisma

@@ -113,8 +113,6 @@ model Images {
   Donasi_Kabar           Donasi_Kabar[]
   Donasi_PencairanDana   Donasi_PencairanDana[]
   Donasi_Invoice         Donasi_Invoice[]
-  Image_Map              BusinessMaps[]           @relation("ImageMap")
-  Image_Pin              BusinessMaps[]           @relation("ImagePin")
   Investasi_Invoice      Investasi_Invoice[]
 }
 
@@ -926,10 +924,8 @@ model BusinessMaps {
   authorId     String?
   Portofolio   Portofolio? @relation(fields: [portofolioId], references: [id])
   portofolioId String?     @unique
-  ImageMap     Images?     @relation("ImageMap", fields: [imageMapId], references: [id], map: "MapImage")
+  imageId      String?
-  imageMapId   String?
+  pinId       String?
-  ImagePin     Images?     @relation("ImagePin", fields: [imagePinId], references: [id], map: "PinImage")
-  imagePinId   String?
 }
 
 // Kategori App

public/aset/global/no-image.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" id="icon" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:none;}</style></defs><title>no-image</title><path d="M30,3.4141,28.5859,2,2,28.5859,3.4141,30l2-2H26a2.0027,2.0027,0,0,0,2-2V5.4141ZM26,26H7.4141l7.7929-7.793,2.3788,2.3787a2,2,0,0,0,2.8284,0L22,19l4,3.9973Zm0-5.8318-2.5858-2.5859a2,2,0,0,0-2.8284,0L19,19.1682l-2.377-2.3771L26,7.4141Z"/><path d="M6,22V19l5-4.9966,1.3733,1.3733,1.4159-1.416-1.375-1.375a2,2,0,0,0-2.8284,0L6,16.1716V6H22V4H6A2.002,2.002,0,0,0,4,6V22Z"/><rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1" width="32" height="32"/></svg>

src/app/contoh/page.tsx

@@ -1,51 +1,53 @@
 "use client";
-import { ComponentNotifikasi_CardSkeleton } from "@/app_modules/notifikasi/component";
+import { Box, Center, Image, Loader, Text } from "@mantine/core";
-import Coba_UploadFile from "@/app_modules/zCoba/ui_coba_upload_file";
+import { useShallowEffect } from "@mantine/hooks";
-import { Box, Button, Flex, Paper, Stack, Title } from "@mantine/core";
+import { useState } from "react";
 
 export default function Page() {
   return (
     <>
-      <Coba_UploadFile />
+      <LoadImage
+        url={
+          "https://wibu-storage.wibudev.com/api/files/cm192febp004jkp7j2x1fgekw"
+        }
+      />
     </>
   );
-
+}
-  return (
+
-    <Stack
+function LoadImage({ url }: { url: string }) {
-      bg={"gray"}
+  const [ada, setAda] = useState<boolean | null>(null);
-      h={"100vh"}
+
-      style={{
+  useShallowEffect(() => {
-        position: "relative",
+    load();
-        width: "100%",
+  }, []);
-        overflow: "scroll",
+
-      }}
+  async function load() {
-    >
+    try {
-      <Box
+      const res = await fetch(url);
-        p={"md"}
+      if (res.ok) {
-        style={{
+        return setAda(true);
-          display: "flex",
+      }
-          //   width: "700px",
+      setAda(false);
-          gap: "20px",
+    } catch (error) {
-          position: "relative",
+      console.log("");
-          overflowX: "scroll",
+    }
-          //   scrollSnapType: "x",
+  }
-          //   scrollbarGutter: "unset",
+
-          scrollbarWidth: "none",
+  if (ada === null)
-          backgroundColor: "red",
+    return (
-        }}
+      <Box w={100}>
-      >
+        <Image w={"100%"} src={"/aset/global/loading.gif"} alt="" />
-        <Flex gap={"md"} bg={"cyan"}>
+      </Box>
-          {Array.from(new Array(10), (_, i) => (
+    );
-            <Paper component={Button} w={"200px"} px={"md"} key={i}>
+  if (!ada)
-              Contoh
+    return (
-            </Paper>
+      <Image
-          ))}
+        src={
-        </Flex>
+          "https://cdn.idntimes.com/content-images/community/2021/06/2318629899-0991efc170-o-cropped-56965fbaa68adf470a17cc45ea5d328d-321a5127ded916230393dbb7bf7d130e_600x400.jpg"
-      </Box>
+        }
-
+        alt=""
-      <Stack>
+      />
-        <Title>Ini Bagian Yang Gak Ikut</Title>
+    );
-      </Stack>
+  return <Image src={url} alt="" />;
-    </Stack>
-  );
 }

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

@@ -4,14 +4,14 @@ import { portofolio_getOneById } from "@/app_modules/katalog/portofolio/fun/get/
 
 const mapboxToken = process.env.MAPBOX_TOKEN!;
 export default async function Page({ params }: { params: { id: string } }) {
-  const getPorto = await portofolio_getOneById(params.id);
+  const portofolioId = params.id;
+  const dataPortofolio = await portofolio_getOneById(portofolioId);
   const userLoginId = await funGetUserIdByToken();
 
   return (
     <>
-      {/* <pre style={{ color: "white" }}>{JSON.stringify(getPorto, null, 2)}</pre> */}
       <ViewPortofolio
-        dataPorto={getPorto as any}
+        dataPorto={dataPortofolio as any}
         userLoginId={userLoginId as any}
         mapboxToken={mapboxToken}
       />

src/app_modules/_global/component/comp_load_image.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { AspectRatio, Box, Center, Image } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useState } from "react";
+import ComponentGlobal_Loader from "./loader";
+
+export function ComponentGlobal_LoadImage({
+  url,
+  maw,
+  h,
+}: {
+  url: string;
+  maw?: number;
+  h?: number;
+}) {
+  const [isImage, setIsImage] = useState<boolean | null>(null);
+
+  useShallowEffect(() => {
+    onLoadImage();
+  }, []);
+
+  async function onLoadImage() {
+    try {
+      const res = await fetch(url);
+      if (res.ok) {
+        return setIsImage(true);
+      }
+      setIsImage(false);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  if (isImage === null)
+    return (
+      <Center h={h ? h : 250}>
+        <ComponentGlobal_Loader variant="dots" size={50} />
+      </Center>
+    );
+
+  if (!isImage)
+    return (
+      <>
+        <Center h={250}>
+          <Image
+            alt="No Image"
+            maw={150}
+            m={"auto"}
+            p={"xs"}
+            src={"/aset/global/no-image.svg"}
+          />
+        </Center>
+      </>
+    );
+
+  return (
+    <>
+      {h ? (
+        <Image
+          height={h}
+          alt="Image"
+          maw={maw ? maw : 200}
+          m={"auto"}
+          p={"xs"}
+          src={url}
+        />
+      ) : (
+        <Image
+          alt="Image"
+          maw={maw ? maw : 200}
+          m={"auto"}
+          p={"xs"}
+          src={url}
+        />
+      )}
+    </>
+  );
+}

src/app_modules/_global/component/index.ts

@@ -2,6 +2,7 @@ import ComponentGlobal_BoxInformation from "./box_information";
 import ComponentGlobal_AvatarAndAuthorName from "./comp_author_name_and_avatar";
 import { ComponentGlobal_BoxUploadImage } from "./comp_box_upload_image";
 import { ComponentGlobal_CardStyles } from "./comp_card_box_and_background";
+import { ComponentGlobal_LoadImage } from "./comp_load_image";
 import ComponentGlobal_CardLoadingOverlay from "./comp_loading_card";
 import ComponentGlobal_TampilanAngkaRatusan from "./comp_tampilan_angka_ratusan";
 import ComponentGlobal_TampilanRupiah from "./comp_tampilan_rupiah";
@@ -15,3 +16,4 @@ export { ComponentGlobal_BoxInformation };
 export { ComponentGlobal_InputCountDown };
 export { ComponentGlobal_CardStyles };
 export { ComponentGlobal_BoxUploadImage };
+export { ComponentGlobal_LoadImage };

src/app_modules/admin/map/component/comp_detail_data_drawer.tsx

@@ -1,21 +1,21 @@
-import { RouterMap } from "@/app/lib/router_hipmi/router_map";
+import { APIs } from "@/app/lib";
 import { MODEL_MAP } from "@/app_modules/map/lib/interface";
 import {
-  Stack,
   AspectRatio,
   Box,
-  Grid,
-  Image,
-  Text,
   Button,
   Center,
+  Grid,
+  Image,
+  Stack,
+  Text,
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import {
   IconBuildingSkyscraper,
   IconListDetails,
-  IconPhoneCall,
   IconMapPin,
+  IconPhoneCall,
   IconPinned,
 } from "@tabler/icons-react";
 import { useState } from "react";
@@ -48,8 +48,8 @@ export function ComponentAdminMap_DetailDataDrawer({
           <Image
             radius={"md"}
             width={300}
-            alt="Foto"
+            alt="Photo"
-            src={RouterMap.api_foto + data?.imageMapId}
+            src={APIs.GET + data?.imageId}
           />
         </AspectRatio>
 

src/app_modules/admin/map/fun/fun_get_all_maps.ts

@@ -11,7 +11,6 @@ export async function adminMap_funGetAllMaps() {
       isActive: true,
     },
     include: {
-      ImagePin: true,
       Portofolio: true,
     },
   });

src/app_modules/admin/map/fun/fun_get_one_by_id.ts

@@ -8,8 +8,6 @@ export async function adminMap_funGetOneById({ mapId }: { mapId: string }) {
       id: mapId,
     },
     include: {
-      ImageMap: true,
-      ImagePin: true,
       Author: true,
       Portofolio: {
         include: {

src/app_modules/admin/map/ui/ui_map_view.tsx

@@ -19,6 +19,7 @@ import { ComponentAdminMap_Drawer } from "../component";
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
 import { RouterMap } from "@/app/lib/router_hipmi/router_map";
+import { APIs } from "@/app/lib";
 
 export function UiAdminMap_MapBoxView({
   mapboxToken,
@@ -88,9 +89,9 @@ export function UiAdminMap_MapBoxView({
                       backgroundColor: "white",
                     }}
                     src={
-                      e.imagePinId === null
+                      e.pinId === null
-                        ? RouterPortofolio.api_logo_porto + e.Portofolio.logoId
+                        ? APIs.GET + e.Portofolio.logoId
-                        : RouterMap.api_custom_pin + e.imagePinId
+                        : APIs.GET + e.pinId
                     }
                   />
                 </Stack>

src/app_modules/job/component/detail/detail_data.tsx

@@ -18,6 +18,7 @@ import {
 import { MODEL_JOB } from "../../model/interface";
 import { useState } from "react";
 import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { ComponentGlobal_LoadImage } from "@/app_modules/_global/component";
 
 export default function ComponentJob_DetailData({
   data,
@@ -44,36 +45,37 @@ export default function ComponentJob_DetailData({
           <Card.Section px={"xs"} pb={"lg"}>
             <Stack spacing={"xl"}>
               {data.imageId ? (
-                <Stack align="center">
+                <ComponentGlobal_LoadImage url={APIs.GET + data?.imageId} />
-                  {isLoading ? (
-                    <Paper
-                      style={{ zIndex: 1, position: "relative" }}
-                      w={200}
-                      h={300}
-                      bg={AccentColor.blackgray}
-                    >
-                      <Center h={"100%"}>
-                        <ComponentGlobal_Loader size={30} variant="dots" />
-                      </Center>
-                    </Paper>
-                  ) : (
-                    ""
-                  )}
-
-                  <Image
-                    style={{ zIndex: 2, position: "relative" }}
-                    onLoad={() => {
-                      setIsLoading(false);
-                    }}
-                    onError={() => {
-                      setIsLoading(false);
-                    }}
-                    alt="Image"
-                    src={APIs.GET + data?.imageId}
-                    maw={200}
-                  />
-                </Stack>
               ) : (
+                // <Stack align="center">
+                //   {isLoading ? (
+                //     <Paper
+                //       style={{ zIndex: 1, position: "relative" }}
+                //       w={200}
+                //       h={300}
+                //       bg={AccentColor.blackgray}
+                //     >
+                //       <Center h={"100%"}>
+                //         <ComponentGlobal_Loader size={30} variant="dots" />
+                //       </Center>
+                //     </Paper>
+                //   ) : (
+                //     ""
+                //   )}
+
+                //   <Image
+                //     style={{ zIndex: 2, position: "relative" }}
+                //     onLoad={() => {
+                //       setIsLoading(false);
+                //     }}
+                //     onError={() => {
+                //       setIsLoading(false);
+                //     }}
+                //     alt="Image"
+                //     src={APIs.GET + data?.imageId}
+                //     maw={200}
+                //   />
+                // </Stack>
                 ""
               )}
 

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

@@ -0,0 +1,72 @@
+"use client";
+
+import { AccentColor, 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 { useState } from "react";
+import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+import { DIRECTORY_ID } from "@/app/lib";
+import { portofolio_funEditLogoBisnisById } from "../../fun";
+
+export function ComponentPortofolio_ButtonEditLogoBisnis({
+  file,
+  portofolioId,
+}: {
+  file: File;
+  portofolioId: 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) {
+      setLoading(true);
+      ComponentGlobal_NotifikasiBerhasil(res.message);
+      router.back();
+    } else {
+      ComponentGlobal_NotifikasiGagal(res.message);
+    }
+  }
+  return (
+    <>
+      {file ? (
+        <Button
+          loaderPosition="center"
+          loading={loading ? true : false}
+          radius={"xl"}
+          onClick={() => onUpdate()}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
+          style={{
+            transition: "0.5s",
+            border: `1px solid ${AccentColor.yellow}`,
+          }}
+        >
+          Simpan
+        </Button>
+      ) : (
+        <Button disabled radius={"xl"}>
+          Simpan
+        </Button>
+      )}
+    </>
+  );
+}

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

@@ -1,6 +1,7 @@
 import { RouterMap } from "@/app/lib/router_hipmi/router_map";
 import { MainColor } from "@/app_modules/_global/color";
 import {
+    ComponentGlobal_NotifikasiBerhasil,
   ComponentGlobal_NotifikasiGagal,
   ComponentGlobal_NotifikasiPeringatan,
 } from "@/app_modules/_global/notif_global";
@@ -42,23 +43,23 @@ export function Portofolio_ComponentButtonSelanjutnya({
     if (_.values(porto).includes(""))
       return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
 
-    const uploadFile = await funGlobal_UploadToStorage({
+    const uploadFileToStorage = await funGlobal_UploadToStorage({
       file: file,
       dirId: DIRECTORY_ID.portofolio_logo,
     });
 
-    if (!uploadFile.success)
+    if (!uploadFileToStorage.success)
       return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
 
     const res = await funCreatePortofolio({
       profileId: profileId,
       data: dataPortofolio as any,
       medsos: dataMedsos,
-      fileId: uploadFile.data.id,
+      fileId: uploadFileToStorage.data.id,
     });
     if (res.status === 201) {
       setLoading(true);
-      // ComponentGlobal_NotifikasiBerhasil("Berhasil disimpan");
+      ComponentGlobal_NotifikasiBerhasil("Berhasil disimpan");
       router.replace(RouterMap.create + res.id, { scroll: false });
     } else {
       ComponentGlobal_NotifikasiGagal("Gagal disimpan");

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

@@ -1,8 +1,10 @@
 "use client";
 
+import { APIs } from "@/app/lib";
 import { RouterMap } from "@/app/lib/router_hipmi/router_map";
 import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
 import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_LoadImage } from "@/app_modules/_global/component";
 import { ComponentMap_SkeletonDrawerDetailData } from "@/app_modules/map/_component";
 import { map_funGetOneById } from "@/app_modules/map/fun/get/fun_get_one_by_id";
 import { MODEL_MAP } from "@/app_modules/map/lib/interface";
@@ -14,7 +16,7 @@ import {
   Image,
   SimpleGrid,
   Stack,
-  Text
+  Text,
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import {
@@ -39,7 +41,7 @@ export function ComponentPortofolio_DetailDataMap({ mapId }: { mapId: any }) {
     setData(res);
   }
 
-  if(!data) return <ComponentMap_SkeletonDrawerDetailData/>
+  if (!data) return <ComponentMap_SkeletonDrawerDetailData />;
 
   return (
     <>
@@ -59,13 +61,14 @@ export function ComponentPortofolio_DetailDataMap({ mapId }: { mapId: any }) {
             { maxWidth: 600, cols: 1, spacing: "sm" },
           ]}
         >
-          <Image
+          <ComponentGlobal_LoadImage  maw={200}  url={APIs.GET + data.imageId} />
+          {/* <Image
             radius={"sm"}
             mah={300}
             maw={200}
-            alt="Foto"
+            alt="Photo"
-            src={RouterMap.api_foto + data?.imageMapId}
+            src={APIs.GET + data.imageId}
-          />
+          /> */}
           <Box>
             <Grid>
               <Grid.Col span={2}>
@@ -114,8 +117,6 @@ export function ComponentPortofolio_DetailDataMap({ mapId }: { mapId: any }) {
           <Box />
 
           <Group position="center">
-           
-
             <Button
               radius={"xl"}
               bg={MainColor.yellow}

src/app_modules/katalog/portofolio/component/index.ts

@@ -1,4 +1,6 @@
+import { ComponentPortofolio_ButtonEditLogoBisnis } from "./button/comp_button_edit_logo_bisnis";
 import { Portofolio_ComponentButtonSelanjutnya } from "./button/comp_button_selanjutnya";
 
 export { ComponentPortofolio_DetailDataMap } from "./detail_data_drawer_map";
 export { Portofolio_ComponentButtonSelanjutnya };
+export { ComponentPortofolio_ButtonEditLogoBisnis };

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

@@ -1,26 +1,17 @@
 "use client";
 
-import { RouterMap } from "@/app/lib/router_hipmi/router_map";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
-import {
+import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
 import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import {
+import { BIDANG_BISNIS_OLD } from "@/app_modules/model_global/portofolio";
-  BIDANG_BISNIS_OLD,
-  MODEL_PORTOFOLIO_OLD,
-} from "@/app_modules/model_global/portofolio";
 import {
   AspectRatio,
-  Box,
   Button,
   Center,
   FileButton,
   Image,
-  Paper,
   Select,
   Stack,
   Text,
@@ -30,12 +21,8 @@ import {
 } from "@mantine/core";
 import { IconCamera } from "@tabler/icons-react";
 import _ from "lodash";
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
-import { useRouter } from "next/navigation";
 import { useState } from "react";
-import funCreatePortofolio from "../fun/fun_create_portofolio";
 import { Portofolio_ComponentButtonSelanjutnya } from "../component";
-import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
 
 export default function CreatePortofolio({
   bidangBisnis,
@@ -172,16 +159,6 @@ export default function CreatePortofolio({
 
         <Stack>
           <ComponentGlobal_BoxInformation informasi="Upload Logo Bisnis Anda!" />
-          {/* <AspectRatio ratio={16 / 9}>
-            <Paper radius={"md"} withBorder>
-              <Image alt="Foto" src={img ? img : "/aset/no-img.png"} />
-            </Paper>
-          </AspectRatio>
-
-          
-
-          {isFile ? <ComponentGlobal_ErrorInput text="Upload gambar" /> : ""} */}
-
           <ComponentGlobal_BoxUploadImage>
             {img ? (
               <AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>

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

@@ -1,39 +1,25 @@
 "use client";
 
-import {
+import { APIs } from "@/app/lib";
-  RouterPortofolio
-} from "@/app/lib/router_hipmi/router_katalog";
 import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_LoadImage } from "@/app_modules/_global/component";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import { Button, Center, FileButton, Image, Paper, Stack } from "@mantine/core";
-import {
-  AspectRatio,
-  Button,
-  Center,
-  FileButton,
-  Image,
-  Paper,
-  Stack
-} from "@mantine/core";
 import { IconCamera } from "@tabler/icons-react";
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
-import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { Portofolio_funEditLogoBisnisById } from "../../fun/edit/fun_edit_logo_bisnis_by_id";
 import { MODEL_PORTOFOLIO } from "../../model/interface";
+import { ComponentPortofolio_ButtonEditLogoBisnis } from "../../component";
 
 export default function Portofolio_EditLogoBisnis({
   dataPorto,
 }: {
   dataPorto: MODEL_PORTOFOLIO;
 }) {
-  const router = useRouter();
   const [file, setFile] = useState<File | null>(null);
-  const [image, setImage] = useState<any | null>(null);
+  const [img, setImg] = useState<any | null>(null);
-  const [loading, setLoading] = useState(false);
+
   return (
     <>
       <Stack spacing={"xl"} px={"sm"}>
@@ -47,17 +33,13 @@ export default function Portofolio_EditLogoBisnis({
             color: "white",
           }}
         >
-          <Stack>
+          <Stack align="center">
-            <AspectRatio ratio={1 / 1}>
+            {img ? (
-              <Image
+              <Image maw={250} alt="Image" src={img} />
-                alt="Foto"
+            ) : (
-                src={
+              <ComponentGlobal_LoadImage url={APIs.GET + dataPorto.logoId} />
-                  image
+            )}
-                    ? image
+
-                    : RouterPortofolio.api_logo_porto + `${dataPorto.logoId}`
-                }
-              />
-            </AspectRatio>
             <Center>
               <FileButton
                 onChange={async (files: any | null) => {
@@ -65,9 +47,7 @@ export default function Portofolio_EditLogoBisnis({
                     const buffer = URL.createObjectURL(
                       new Blob([new Uint8Array(await files.arrayBuffer())])
                     );
-                    // console.log(buffer, "ini buffer");
+                    setImg(buffer);
-                    // console.log(files, " ini file");
-                    setImage(buffer);
                     setFile(files);
                   } catch (error) {
                     console.log(error);
@@ -91,54 +71,11 @@ export default function Portofolio_EditLogoBisnis({
             </Center>
           </Stack>
         </Paper>
-
+        <ComponentPortofolio_ButtonEditLogoBisnis
-        {file ? (
+          file={file as any}
-          <Button
+          portofolioId={dataPorto.id}
-            radius={"xl"}
+        />
-            onClick={() =>
-              // onUpdate(router, dataPorto.id, file as any, setLoading)
-              console.log("apa")
-            }
-            bg={MainColor.yellow}
-            color="yellow"
-            c={"black"}
-            style={{
-              transition: "0.5s",
-              border: `1px solid ${AccentColor.yellow}`,
-            }}
-          >
-            Simpan
-          </Button>
-        ) : (
-          <Button
-            disabled
-            radius={"xl"}
-           
-          >
-            Simpan
-          </Button>
-        )}
       </Stack>
     </>
   );
 }
-
-async function onUpdate(
-  router: AppRouterInstance,
-  portoId: string,
-  file: FormData,
-  setLoading: any
-) {
-  const gambar = new FormData();
-  gambar.append("file", file as any);
-
-  await Portofolio_funEditLogoBisnisById(portoId, gambar).then((res) => {
-    if (res.status === 200) {
-      setLoading(true);
-      ComponentGlobal_NotifikasiBerhasil(res.message);
-      router.back();
-    } else {
-      ComponentGlobal_NotifikasiGagal(res.message);
-    }
-  });
-}

src/app_modules/katalog/portofolio/fun/edit/fun_edit_logo_bisnis_by_id.ts

@@ -1,41 +1,21 @@
 "use server";
 
 import prisma from "@/app/lib/prisma";
-import _ from "lodash";
-import { v4 } from "uuid";
-import fs from "fs";
 import { revalidatePath } from "next/cache";
 
-export async function Portofolio_funEditLogoBisnisById(
+export async function portofolio_funEditLogoBisnisById({
-  portoId: string,
+  portofolioId,
-  file: FormData
+  logoId,
-) {
+}: {
-  const gambar: any = file.get("file");
+  portofolioId: string;
-  const fileName = gambar.name;
+  logoId: string;
-  const fileExtension = _.lowerCase(gambar.name.split(".").pop());
+}) {
-  const randomNameFile = v4(fileName) + "." + fileExtension;
-
-  const upload = await prisma.images.create({
-    data: {
-      url: randomNameFile,
-      label: "PORTOFOLIO_LOGO",
-    },
-    select: {
-      id: true,
-      url: true,
-    },
-  });
-
-  if (!upload) return { status: 400, message: "Gagal upload gambar" };
-  const upload_toFolder = Buffer.from(await gambar.arrayBuffer());
-  fs.writeFileSync(`./public/portofolio/logo/${upload.url}`, upload_toFolder);
-
   const updatePorto = await prisma.portofolio.update({
     where: {
-      id: portoId,
+      id: portofolioId,
     },
     data: {
-      logoId: upload.id,
+      logoId: logoId,
     },
   });
 

src/app_modules/katalog/portofolio/fun/get/get_one_portofolio.ts

@@ -9,7 +9,6 @@ export async function portofolio_getOneById(portoId: string) {
       id: portoId,
     },
     include: {
-      Logo: true,
       MasterBidangBisnis: {
         select: {
           id: true,
@@ -31,8 +30,6 @@ export async function portofolio_getOneById(portoId: string) {
       BusinessMaps: {
         include: {
           Author: true,
-          ImageMap: true,
-          ImagePin: true,
         },
       },
     },

src/app_modules/katalog/portofolio/fun/index.ts

@@ -0,0 +1,3 @@
+import { portofolio_funEditLogoBisnisById } from "./edit/fun_edit_logo_bisnis_by_id";
+
+export { portofolio_funEditLogoBisnisById };

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

@@ -1,29 +1,30 @@
-import {
+import { APIs } from "@/app/lib";
-  Paper,
-  Title,
-  Stack,
-  Grid,
-  Text,
-  SimpleGrid,
-  Box,
-  AspectRatio,
-  Image,
-  Group,
-  Divider,
-} from "@mantine/core";
-import {
-  IconBuildingSkyscraper,
-  IconPhoneCall,
-  IconMapPin,
-  IconListDetails,
-  IconPinned,
-} from "@tabler/icons-react";
-import { MODEL_PORTOFOLIO } from "../model/interface";
 import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
-import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
+import {
+  AspectRatio,
+  Box,
+  Divider,
+  Grid,
+  Group,
+  Image,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import {
+  IconBuildingSkyscraper,
+  IconListDetails,
+  IconMapPin,
+  IconPhoneCall,
+  IconPinned,
+} from "@tabler/icons-react";
+import { MODEL_PORTOFOLIO } from "../model/interface";
+import { ComponentGlobal_LoadImage } from "@/app_modules/_global/component";
 
 export function Portofolio_UiDetailData({
   dataPorto,
@@ -47,7 +48,9 @@ export function Portofolio_UiDetailData({
             <Title order={6}>Data Bisnis</Title>
             <Text color={MainColor.yellow} fw={"bold"}>
               id: {"  "}
-              <Text span inherit>#{dataPorto.id_Portofolio}</Text>
+              <Text span inherit>
+                #{dataPorto.id_Portofolio}
+              </Text>
             </Text>
           </Group>
           <Stack>
@@ -61,17 +64,19 @@ export function Portofolio_UiDetailData({
               ]}
             >
               <Box>
-                <AspectRatio ratio={1 / 1} mah={200}>
+                <Paper>
-                  <Paper>
+                  <ComponentGlobal_LoadImage url={APIs.GET + dataPorto.logoId}/>
+                  {/* <AspectRatio ratio={1 / 1} mah={250} mx={"auto"}>
                     <Image
-                      width={200}
+                      // style={{ maxHeight: 200, margin: "auto", padding: "5px" }}
                       alt="Foto"
-                      src={
+                      h={200}
-                        RouterPortofolio.api_logo_porto + `${dataPorto?.logoId}`
+                      m={"auto"}
-                      }
+                      p={"xs"}
+                      src={APIs.GET + dataPorto.logoId }
                     />
-                  </Paper>
+                  </AspectRatio> */}
-                </AspectRatio>
+                </Paper>
               </Box>
 
               <Box>

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

@@ -1,12 +1,11 @@
 "use client";
 
-import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
+import { APIs } from "@/app/lib";
-import { RouterMap } from "@/app/lib/router_hipmi/router_map";
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 import { ComponentMap_DrawerDetailData } from "@/app_modules/map/_component";
 import { defaultMapZoom } from "@/app_modules/map/lib/default_lat_long";
 import { MODEL_MAP } from "@/app_modules/map/lib/interface";
-import { Image, Paper, Stack, Title } from "@mantine/core";
+import { Avatar, Image, Paper, Stack, Title } from "@mantine/core";
 import "mapbox-gl/dist/mapbox-gl.css";
 import { useState } from "react";
 import {
@@ -17,7 +16,7 @@ import {
   ScaleControl,
 } from "react-map-gl";
 import { ComponentPortofolio_DetailDataMap } from "../component";
-import { MODEL_LOGO, MODEL_PORTOFOLIO } from "../model/interface";
+import { MODEL_PORTOFOLIO } from "../model/interface";
 
 export function Portofolio_UiMap({
   mapboxToken,
@@ -45,7 +44,7 @@ export function Portofolio_UiMap({
         <MapView
           data={data.BusinessMaps}
           mapboxToken={mapboxToken}
-          dataLogo={data.Logo}
+          logoId={data.logoId}
         />
       </Stack>
     </Paper>
@@ -55,11 +54,11 @@ export function Portofolio_UiMap({
 function MapView({
   mapboxToken,
   data,
-  dataLogo,
+  logoId,
 }: {
   mapboxToken: string;
   data: MODEL_MAP;
-  dataLogo: MODEL_LOGO;
+  logoId: string;
 }) {
   const [openDrawer, setOpenDrawer] = useState(false);
 
@@ -98,17 +97,14 @@ function MapView({
           pitchAlignment="auto"
         >
           <Stack spacing={0} align="center">
-            <Image
+            <Avatar
-              width={"100%"}
-              alt="image"
               src={
-                data.ImagePin === null
+                data.pinId === null ? APIs.GET + logoId : APIs.GET + data.pinId
-                  ? RouterPortofolio.api_logo_porto + dataLogo.id
-                  : RouterMap.api_custom_pin + data.ImagePin.id
               }
-              radius={"xl"}
+              alt="Logo"
               style={{
                 border: `2px solid ${AccentColor.softblue}`,
+                backgroundColor: "white",
                 borderRadius: "100%",
               }}
             />

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

@@ -22,7 +22,6 @@ export default function Portofolio_UiDetail({
       <Stack mb={"lg"}>
         <Portofolio_UiDetailData dataPorto={dataPorto} />
         <Portofolio_UiMap mapboxToken={mapboxToken} data={dataPorto} />
-        {/* <Portofolio_UiDetailLogo dataPorto={dataPorto} /> */}
         <Portofolio_UiSosialMedia dataPorto={dataPorto} />
 
         <ComponentPortofolio_ButtonDelete

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>
+    </>
+  );
+}

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>
+    </>
+  );
+}

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
+          <ComponentGlobal_LoadImage url={APIs.GET + data?.imageId} />
-            radius={"sm"}
+          {/* <Image radius={"sm"} mah={300} maw={200} alt="Photo" src={} /> */}
-            mah={300}
-            maw={200}
-            alt="Foto"
-            src={RouterMap.api_foto + data?.imageMapId}
-          />
           <Box>
             <Grid>
               <Grid.Col span={2}>

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 };

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 { Prisma } from "@prisma/client";
-import _ from "lodash";
 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,
+      latitude: data.latitude,
-      longitude: data.long,
+      longitude: data.longitude,
       namePin: data.namePin,
-      portofolioId: data?.portofolioId,
+      portofolioId: data.Portofolio?.create?.id,
       authorId: userLoginId,
-      imageMapId: uploadImage.id,
+      imageId: data.imageId,
     },
   });
 

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" };
 }

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);
+  if (fileId === undefined || fileId === null) {
-
-  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);
-
     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" };
 }

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,

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
         }
       }

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
+  Portofolio: MODEL_PORTOFOLIO;
-  imageMapId: string
+  imageId: string;
-  ImageMap: any
+  pinId: string;
-  imagePinId: string
-  ImagePin: any
 }

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

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 {
+import { Avatar, Button, Center, FileButton, Stack } from "@mantine/core";
-  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
+                  data.pinId === null
-                    ? RouterPortofolio.api_logo_porto + data.Portofolio.logoId
+                    ? APIs.GET + data.Portofolio.logoId
-                    : RouterMap.api_custom_pin + data.imagePinId
+                    : APIs.GET + data.pinId
                 }
                 style={{
                   border: `2px solid ${AccentColor.skyblue}`,
@@ -158,9 +154,9 @@ export function UiMap_CustomPin({
               src={
                 imgPin
                   ? imgPin
-                  : data.imagePinId === null
+                  : data.pinId === null
-                    ? RouterPortofolio.api_logo_porto + data.Portofolio.logoId
+                    ? APIs.GET + data.Portofolio.logoId
-                    : RouterMap.api_custom_pin + data.imagePinId
+                    : APIs.GET + data.pinId
               }
               style={{
                 border: `2px solid ${AccentColor.softblue}`,
@@ -180,23 +176,27 @@ export function UiMap_CustomPin({
   );
 }
 
-function ButtonSimpan({
+function ButtonSimpan({ mapId, filePin }: { mapId: string; filePin: File }) {
-  mapId,
-  filePin,
-}: {
-  mapId: string;
-  filePin: FormData;
-}) {
   const router = useRouter();
   const [isLoading, setLoading] = useState(false);
 
   async function onCustom() {
-    const file = new FormData();
+    const uploadFileToStorage = await funGlobal_UploadToStorage({
-    file.append("file", filePin as any);
+      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);
   }
 

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
+                data.pinId === null
-                  ? RouterPortofolio.api_logo_porto + dataMap.Portofolio.logoId
+                  ? APIs.GET + dataMap.Portofolio.logoId
-                  : RouterMap.api_custom_pin + data.imagePinId
+                  : 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"
+                  alt="Photo"
-                  src={RouterMap.api_foto + data.imageMapId}
+                  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>
-    </>
-  );
-}

src/app_modules/map/ui/ui_map.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
+import { APIs } from "@/app/lib";
-import { RouterMap } from "@/app/lib/router_hipmi/router_map";
 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
+                      e.pinId === null
-                        ? RouterPortofolio.api_logo_porto + e.Portofolio.logoId
+                        ? APIs.GET + e.Portofolio.logoId
-                        : RouterMap.api_custom_pin + e.imagePinId
+                        : APIs.GET + e.pinId
                     }
                   />
                 </Stack>

src/lib/routes.ts

@@ -1,3 +1,4 @@
+
 export const pages = {
   "/": "/",
   "/zCoba": "/zCoba",