Test foto server

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

@@ -26,6 +26,7 @@ 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";
 
 export function ComponentPortofolio_DetailDataMap({ mapId }: { mapId: any }) {
   const router = useRouter();
@@ -40,6 +41,8 @@ export function ComponentPortofolio_DetailDataMap({ mapId }: { mapId: any }) {
     setData(res);
   }
 
+  if(!data) return <ComponentMap_SkeletonDrawerDetailData/>
+
   return (
     <>
       <Stack mt={"lg"} spacing={"xl"}>

src/app_modules/katalog/portofolio/model/interface.ts

@@ -13,12 +13,21 @@ export interface MODEL_PORTOFOLIO {
   MasterBidangBisnis: MODEL_PORTOFOLIO_BIDANG_BISNIS;
   masterBidangBisnisId: string;
   profileId: string;
-  Logo: MODEL_IMAGES;
+  Logo: MODEL_LOGO;
   logoId: string;
   Portofolio_MediaSosial: MODEL_PORTOFOLIO_MEDSOS;
   Profile: MODEL_PROFILE;
   BusinessMaps: MODEL_MAP;
-  id_Portofolio: string
+  id_Portofolio: string;
+}
+
+export interface MODEL_LOGO {
+  id: string;
+  url: string;
+  label: string;
+  active: true;
+  createdAt: Date;
+  updatedAt: Date;
 }
 
 export interface MODEL_PORTOFOLIO_BIDANG_BISNIS {
@@ -28,14 +37,14 @@ export interface MODEL_PORTOFOLIO_BIDANG_BISNIS {
 }
 
 export interface MODEL_PORTOFOLIO_MEDSOS {
-  id: string
-  facebook: string
-  twitter: string
-  instagram: string
+  id: string;
+  facebook: string;
+  twitter: string;
+  instagram: string;
   tiktok: string;
-  youtube:string
-  active: boolean
-  createdAt: Date
-  updatedAt:Date
-  portofolioId: string
-};
+  youtube: string;
+  active: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+  portofolioId: string;
+}

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

@@ -2,9 +2,7 @@
 
 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 { 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 "mapbox-gl/dist/mapbox-gl.css";
@@ -17,14 +15,17 @@ import {
   ScaleControl,
 } 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,
   data,
 }: {
   mapboxToken: string;
-  data: MODEL_MAP;
+  data: MODEL_PORTOFOLIO;
 }) {
+  // console.log(data);
   return (
     <Paper
       p={"sm"}
@@ -41,7 +42,11 @@ export function Portofolio_UiMap({
           Lokasi Bisnis
         </Title>
 
-        <MapView data={data} mapboxToken={mapboxToken} />
+        <MapView
+          data={data.BusinessMaps}
+          mapboxToken={mapboxToken}
+          dataLogo={data.Logo}
+        />
       </Stack>
     </Paper>
   );
@@ -50,9 +55,11 @@ export function Portofolio_UiMap({
 function MapView({
   mapboxToken,
   data,
+  dataLogo,
 }: {
   mapboxToken: string;
   data: MODEL_MAP;
+  dataLogo: MODEL_LOGO;
 }) {
   const [openDrawer, setOpenDrawer] = useState(false);
 
@@ -73,7 +80,6 @@ function MapView({
           borderRadius: "10px",
         }}
         attributionControl={false}
-        
       >
         <Marker
           style={{
@@ -93,12 +99,17 @@ function MapView({
         >
           <Stack spacing={0} align="center">
             <Image
-              w={"100%"}
+              width={"100%"}
               alt="image"
-              src="https://cdn-icons-png.flaticon.com/512/5860/5860579.png"
+              src={RouterPortofolio.api_logo_porto + `${dataLogo.id}`}
+              radius={"xl"}
+              style={{
+                border: `2px solid ${AccentColor.softblue}`,
+                borderRadius: "100%"
+              }}
             />
 
-            <Text
+            {/* <Text
               fz={"xs"}
               bg={"dark"}
               c={"white"}
@@ -111,7 +122,7 @@ function MapView({
               lineClamp={2}
             >
               {data.namePin}
-            </Text>
+            </Text> */}
           </Stack>
         </Marker>
 

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

@@ -1,8 +1,6 @@
 "use client";
 
-import {
-  Stack
-} from "@mantine/core";
+import { Stack } from "@mantine/core";
 import { ComponentPortofolio_ButtonDelete } from "../component/button_delete";
 import { MODEL_PORTOFOLIO } from "../model/interface";
 import { Portofolio_UiDetailData } from "./ui_detail_data";
@@ -17,13 +15,13 @@ export default function Portofolio_UiDetail({
 }: {
   dataPorto: MODEL_PORTOFOLIO;
   userLoginId: string;
-  mapboxToken: string
+  mapboxToken: string;
 }) {
   return (
     <>
       <Stack mb={"lg"}>
         <Portofolio_UiDetailData dataPorto={dataPorto} />
-        <Portofolio_UiMap mapboxToken={mapboxToken} data={dataPorto.BusinessMaps} />
+        <Portofolio_UiMap mapboxToken={mapboxToken} data={dataPorto} />
         {/* <Portofolio_UiDetailLogo dataPorto={dataPorto} /> */}
         <Portofolio_UiSosialMedia dataPorto={dataPorto} />