fix: Map

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

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"
-            src={RouterMap.api_foto + data?.imageMapId}
-          />
+            alt="Photo"
+            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 {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
 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 {
-  BIDANG_BISNIS_OLD,
-  MODEL_PORTOFOLIO_OLD,
-} from "@/app_modules/model_global/portofolio";
+import { BIDANG_BISNIS_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 {
-  RouterPortofolio
-} from "@/app/lib/router_hipmi/router_katalog";
+import { APIs } from "@/app/lib";
 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 {
-  AspectRatio,
-  Button,
-  Center,
-  FileButton,
-  Image,
-  Paper,
-  Stack
-} from "@mantine/core";
+import { ComponentGlobal_LoadImage } from "@/app_modules/_global/component";
+import { 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 [loading, setLoading] = useState(false);
+  const [img, setImg] = useState<any | null>(null);
+
   return (
     <>
       <Stack spacing={"xl"} px={"sm"}>
@@ -47,17 +33,13 @@ export default function Portofolio_EditLogoBisnis({
             color: "white",
           }}
         >
-          <Stack>
-            <AspectRatio ratio={1 / 1}>
-              <Image
-                alt="Foto"
-                src={
-                  image
-                    ? image
-                    : RouterPortofolio.api_logo_porto + `${dataPorto.logoId}`
-                }
-              />
-            </AspectRatio>
+          <Stack align="center">
+            {img ? (
+              <Image maw={250} alt="Image" src={img} />
+            ) : (
+              <ComponentGlobal_LoadImage url={APIs.GET + dataPorto.logoId} />
+            )}
+
             <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");
-                    // console.log(files, " ini file");
-                    setImage(buffer);
+                    setImg(buffer);
                     setFile(files);
                   } catch (error) {
                     console.log(error);
@@ -91,54 +71,11 @@ export default function Portofolio_EditLogoBisnis({
             </Center>
           </Stack>
         </Paper>
-
-        {file ? (
-          <Button
-            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>
-        )}
+        <ComponentPortofolio_ButtonEditLogoBisnis
+          file={file as any}
+          portofolioId={dataPorto.id}
+        />
       </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(
-  portoId: string,
-  file: FormData
-) {
-  const gambar: any = file.get("file");
-  const fileName = gambar.name;
-  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);
-
+export async function portofolio_funEditLogoBisnisById({
+  portofolioId,
+  logoId,
+}: {
+  portofolioId: string;
+  logoId: string;
+}) {
   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 {
-  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 { APIs } from "@/app/lib";
 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={
-                        RouterPortofolio.api_logo_porto + `${dataPorto?.logoId}`
-                      }
+                      h={200}
+                      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 { RouterMap } from "@/app/lib/router_hipmi/router_map";
+import { APIs } from "@/app/lib";
 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
-              width={"100%"}
-              alt="image"
+            <Avatar
               src={
-                data.ImagePin === null
-                  ? RouterPortofolio.api_logo_porto + dataLogo.id
-                  : RouterMap.api_custom_pin + data.ImagePin.id
+                data.pinId === null ? APIs.GET + logoId : APIs.GET + data.pinId
               }
-              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