# feat

## Deskripsi:
- Edit map
- Sinkronisasi dengan data portofolio
### No Issue

src/app_modules/map/_component/detail_data.tsx

@@ -1,14 +1,34 @@
 "use client";
 
-import { Skeleton, Stack, Text, Title } from "@mantine/core";
-import { Suspense, useState } from "react";
-import { MODEL_MAP } from "../lib/interface";
-import { useShallowEffect } from "@mantine/hooks";
-import { map_funGetOneById } from "../fun/get/fun_get_one_by_id";
-import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { RouterMap } from "@/app/lib/router_hipmi/router_map";
 import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
+import {
+  Box,
+  Button,
+  Grid,
+  Group,
+  Image,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useState } from "react";
+import { map_funGetOneById } from "../fun/get/fun_get_one_by_id";
+import { MODEL_MAP } from "../lib/interface";
+import {
+  IconBuildingSkyscraper,
+  IconListDetails,
+  IconPhoneCall,
+  IconMapPin,
+} 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";
 
-export function ComponentMap_DetailData({ mapId }: { mapId: string }) {
+export function ComponentMap_DetailData({ mapId }: { mapId: any }) {
+  const router = useRouter();
   const [data, setData] = useState<MODEL_MAP>();
 
   useShallowEffect(() => {
@@ -22,31 +42,94 @@ export function ComponentMap_DetailData({ mapId }: { mapId: string }) {
 
   return (
     <>
-      <Stack>
-        <Stack spacing={0}>
-          <Text>
-            latitude:{"  "}
-            <Text fw={"bold"} span inherit>
-              {data?.latitude}
-            </Text>
-          </Text>
-          <Text>
-            longitude:{"  "}
-            <Text fw={"bold"} span inherit>
-              {data?.longitude}
-            </Text>
-          </Text>
-        </Stack>
-
-        <Title order={4}>{data?.namePin}</Title>
-        {/* <Text>{data?.Author?.username}</Text> */}
-
+      <Stack mt={"lg"} spacing={"xl"}>
         <ComponentGlobal_AuthorNameOnHeader
           authorName={data?.Author?.username}
           imagesId={data?.Author?.Profile?.imagesId}
           profileId={data?.Author?.Profile?.id}
         />
 
+        <SimpleGrid
+          cols={2}
+          spacing={"lg"}
+          breakpoints={[
+            { maxWidth: 980, cols: 2, spacing: "md" },
+            { maxWidth: 755, cols: 1, spacing: "sm" },
+            { maxWidth: 600, cols: 1, spacing: "sm" },
+          ]}
+        >
+          <Image
+            radius={"sm"}
+            mah={300}
+            maw={200}
+            alt="Foto"
+            src={RouterMap.api_foto + data?.imagesId}
+          />
+          <Box>
+            <Grid>
+              <Grid.Col span={2}>
+                <IconBuildingSkyscraper />
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Text>{data?.Portofolio.namaBisnis}</Text>
+              </Grid.Col>
+            </Grid>
+            <Grid>
+              <Grid.Col span={2}>
+                <IconListDetails />
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Text>{data?.Portofolio.MasterBidangBisnis.name}</Text>
+              </Grid.Col>
+            </Grid>
+            <Grid>
+              <Grid.Col span={2}>
+                <IconPhoneCall />
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Text>+{data?.Portofolio.tlpn}</Text>
+              </Grid.Col>
+            </Grid>
+            <Grid>
+              <Grid.Col span={2}>
+                <IconMapPin />
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Text>{data?.Portofolio.alamatKantor}</Text>
+              </Grid.Col>
+            </Grid>
+          </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"}
+              onClick={() => {
+                router.push(
+                  RouterPortofolio.main_detail + data?.Portofolio.id,
+                  { scroll: false }
+                );
+              }}
+              bg={MainColor.yellow}
+              color="yellow"
+              c={"black"}
+            >
+              Detail
+            </Button>
+          </Group>
+        </SimpleGrid>
+
         {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
       </Stack>
     </>

src/app_modules/map/_component/drawer.tsx

@@ -9,13 +9,12 @@ import {
   Stack,
   Title,
 } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import { IconX } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
-import { Suspense, useState } from "react";
+import React, { useState } from "react";
+import { map_funGetOneById } from "../fun/get/fun_get_one_by_id";
 import { MODEL_MAP } from "../lib/interface";
-import { useShallowEffect } from "@mantine/hooks";
-import { ComponentMap_DetailData } from "./detail_data";
-import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
 
 interface MODEL_DRAWER {
   id: string;
@@ -27,15 +26,27 @@ export function ComponentMap_DrawerDetailData({
   opened,
   close,
   mapId,
+  component,
 }: {
   opened: boolean;
   close: () => void;
   mapId: string;
+  component: React.ReactNode;
 }) {
   const router = useRouter();
-  const [isLoading, setIsLoading] = useState(false);
   const [data, setData] = useState<MODEL_MAP>();
 
+  useShallowEffect(() => {
+    onLoadData(mapId);
+  }, [mapId]);
+
+  async function onLoadData(mapId: string) {
+    const res: any = await map_funGetOneById({ mapId: mapId });
+    if (res !== null) {
+      setData(res);
+    }
+  }
+
   return (
     <>
       <Drawer
@@ -67,14 +78,18 @@ export function ComponentMap_DrawerDetailData({
       >
         <Stack spacing={"xs"}>
           <Group position="apart">
-            <Title order={5}>Detail Map</Title>
+            <Title order={5}>
+              {data?.namePin ? (
+                data?.namePin
+              ) : (
+                <Skeleton radius={"xl"} w={100} />
+              )}
+            </Title>
             <ActionIcon onClick={close} variant="transparent">
               <IconX color="white" />
             </ActionIcon>
           </Group>
-          <Suspense fallback={<ComponentGlobal_Loader />}>
-            <ComponentMap_DetailData mapId={mapId} />
-          </Suspense>
+          {component}
         </Stack>
       </Drawer>
     </>

src/app_modules/map/_component/header.tsx

@@ -25,11 +25,11 @@ export function ComponentMap_Header() {
     <>
       <UIGlobal_LayoutHeaderTamplate
         title="Business Maps"
-        customButtonRight={
-          <ActionIcon variant="transparent" onClick={() => setOpenDrawer(true)}>
-            <IconDotsVertical color="white" />
-          </ActionIcon>
-        }
+        // customButtonRight={
+        //   <ActionIcon variant="transparent" onClick={() => setOpenDrawer(true)}>
+        //     <IconDotsVertical color="white" />
+        //   </ActionIcon>
+        // }
       />
 
       <UIGlobal_Drawer