# fix

## Deskripsi:
- Perubahan tampilan notifikasi
- Pin map sesuai logo
- Pin map bisa custom
### No Issue

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

@@ -9,6 +9,8 @@ import {
   IconDotsVertical,
   IconEdit,
   IconId,
+  IconMapPin,
+  IconMapPin2,
   IconMapPinMinus,
   IconPhotoEdit,
 } from "@tabler/icons-react";
@@ -46,10 +48,16 @@ export function ComponentPortofolio_ButtonMore({
     },
     {
       id: "4",
-      name: "Edit pin map",
-      icon: <IconMapPinMinus />,
+      name: "Edit data map",
+      icon: <IconMapPin2 />,
       path: RouterMap.edit + `${portoId}`,
     },
+    {
+      id: "5",
+      name: "Custom pin map",
+      icon: <IconMapPin />,
+      path: RouterMap.custom_pin + `${portoId}`,
+    },
   ];
 
   return (

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

@@ -2,6 +2,10 @@
 
 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 { 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";
 import {
   Box,
   Button,
@@ -10,23 +14,17 @@ import {
   Image,
   SimpleGrid,
   Stack,
-  Text,
-  Title,
+  Text
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
-import { useState } from "react";
 import {
   IconBuildingSkyscraper,
   IconListDetails,
-  IconPhoneCall,
   IconMapPin,
+  IconPhoneCall,
 } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
-import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
-import { MainColor } from "@/app_modules/_global/color/color_pallet";
-import { MODEL_MAP } from "@/app_modules/map/lib/interface";
-import { map_funGetOneById } from "@/app_modules/map/fun/get/fun_get_one_by_id";
-import { ComponentMap_SkeletonDrawerDetailData } from "@/app_modules/map/_component";
+import { useState } from "react";
 
 export function ComponentPortofolio_DetailDataMap({ mapId }: { mapId: any }) {
   const router = useRouter();
@@ -45,7 +43,7 @@ export function ComponentPortofolio_DetailDataMap({ mapId }: { mapId: any }) {
 
   return (
     <>
-      <Stack mt={"lg"} spacing={"xl"}>
+      <Stack mt={"lg"} spacing={"xl"} px={"md"}>
         <ComponentGlobal_AuthorNameOnHeader
           authorName={data?.Author?.username}
           imagesId={data?.Author?.Profile?.imagesId}
@@ -66,7 +64,7 @@ export function ComponentPortofolio_DetailDataMap({ mapId }: { mapId: any }) {
             mah={300}
             maw={200}
             alt="Foto"
-            src={RouterMap.api_foto + data?.imagesId}
+            src={RouterMap.api_foto + data?.imageMapId}
           />
           <Box>
             <Grid>
@@ -104,6 +102,38 @@ export function ComponentPortofolio_DetailDataMap({ mapId }: { mapId: any }) {
           </Box>
         </SimpleGrid>
 
+        <SimpleGrid
+          cols={2}
+          spacing={"lg"}
+          breakpoints={[
+            { maxWidth: 980, cols: 2, spacing: "md" },
+            { maxWidth: 755, cols: 1, spacing: "sm" },
+            { maxWidth: 600, cols: 1, spacing: "sm" },
+          ]}
+        >
+          <Box />
+
+          <Group position="center">
+           
+
+            <Button
+              radius={"xl"}
+              bg={MainColor.yellow}
+              color="yellow"
+              c={"black"}
+              onClick={() => {
+                window.open(
+                  `https://maps.google.com?q=${data?.latitude},${data?.longitude}`,
+                  "_blank",
+                  "width=800,height=600,noopener,noreferrer"
+                );
+              }}
+            >
+              Buka Maps
+            </Button>
+          </Group>
+        </SimpleGrid>
+
         {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
       </Stack>
     </>

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

@@ -8,18 +8,8 @@ export async function portofolio_getOneById(portoId: string) {
     where: {
       id: portoId,
     },
-    select: {
-      id: true,
-      id_Portofolio: true,
-      namaBisnis: true,
-      alamatKantor: true,
-      deskripsi: true,
-      tlpn: true,
-      active: true,
-      profileId: true,
+    include: {
       Logo: true,
-      logoId: true,
-      masterBidangBisnisId: true,
       MasterBidangBisnis: {
         select: {
           id: true,
@@ -41,6 +31,8 @@ export async function portofolio_getOneById(portoId: string) {
       BusinessMaps: {
         include: {
           Author: true,
+          ImageMap: true,
+          ImagePin: true,
         },
       },
     },

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

@@ -1,10 +1,12 @@
 "use client";
 
+import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
+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, Text, Title } from "@mantine/core";
+import { Image, Paper, Stack, Title } from "@mantine/core";
 import "mapbox-gl/dist/mapbox-gl.css";
 import { useState } from "react";
 import {
@@ -16,7 +18,6 @@ import {
 } from "react-map-gl";
 import { ComponentPortofolio_DetailDataMap } from "../component";
 import { MODEL_LOGO, MODEL_PORTOFOLIO } from "../model/interface";
-import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
 
 export function Portofolio_UiMap({
   mapboxToken,
@@ -25,7 +26,6 @@ export function Portofolio_UiMap({
   mapboxToken: string;
   data: MODEL_PORTOFOLIO;
 }) {
-  // console.log(data);
   return (
     <Paper
       p={"sm"}
@@ -101,28 +101,17 @@ function MapView({
             <Image
               width={"100%"}
               alt="image"
-              src={RouterPortofolio.api_logo_porto + `${dataLogo.id}`}
+              src={
+                data.ImagePin === null
+                  ? RouterPortofolio.api_logo_porto + dataLogo.id
+                  : RouterMap.api_custom_pin + data.ImagePin.id
+              }
               radius={"xl"}
               style={{
                 border: `2px solid ${AccentColor.softblue}`,
-                borderRadius: "100%"
+                borderRadius: "100%",
               }}
             />
-
-            {/* <Text
-              fz={"xs"}
-              bg={"dark"}
-              c={"white"}
-              align="center"
-              style={{
-                borderRadius: "5px",
-                padding: "5px",
-                width: 50,
-              }}
-              lineClamp={2}
-            >
-              {data.namePin}
-            </Text> */}
           </Stack>
         </Marker>