# feat

## Deskripsi:
- Tampilan Map
- Tambah pin map
### No Issue

src/app_modules/map/_component/detail_data.tsx

@@ -0,0 +1,54 @@
+"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 ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
+
+export function ComponentMap_DetailData({ mapId }: { mapId: string }) {
+  const [data, setData] = useState<MODEL_MAP>();
+
+  useShallowEffect(() => {
+    onLoadData(mapId);
+  }, [mapId]);
+
+  async function onLoadData(mapId: string) {
+    const res: any = await map_funGetOneById({ mapId: mapId });
+    setData(res);
+  }
+
+  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> */}
+
+        <ComponentGlobal_AuthorNameOnHeader
+          authorName={data?.Author?.username}
+          imagesId={data?.Author?.Profile?.imagesId}
+          profileId={data?.Author?.Profile?.id}
+        />
+
+        {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
+      </Stack>
+    </>
+  );
+}

src/app_modules/map/_component/drawer.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  ActionIcon,
+  Drawer,
+  Group,
+  Skeleton,
+  Stack,
+  Title,
+} from "@mantine/core";
+import { IconX } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { Suspense, useState } from "react";
+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;
+  name: string;
+  icon: string;
+  path: string;
+}
+export function ComponentMap_DrawerDetailData({
+  opened,
+  close,
+  mapId,
+}: {
+  opened: boolean;
+  close: () => void;
+  mapId: string;
+}) {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [data, setData] = useState<MODEL_MAP>();
+
+  return (
+    <>
+      <Drawer
+        opened={opened}
+        onClose={() => close()}
+        position={"bottom"}
+        size={"auto"}
+        withCloseButton={false}
+        styles={{
+          content: {
+            padding: 0,
+            position: "absolute",
+            margin: "auto",
+            backgroundColor: "transparent",
+            left: 0,
+            right: 0,
+            width: 500,
+          },
+          body: {
+            backgroundColor: AccentColor.darkblue,
+            borderTop: `2px solid ${AccentColor.blue}`,
+            borderRight: `1px solid ${AccentColor.blue}`,
+            borderLeft: `1px solid ${AccentColor.blue}`,
+            borderRadius: "20px 20px 0px 0px",
+            color: "white",
+            paddingBottom: "5%",
+          },
+        }}
+      >
+        <Stack spacing={"xs"}>
+          <Group position="apart">
+            <Title order={5}>Detail Map</Title>
+            <ActionIcon onClick={close} variant="transparent">
+              <IconX color="white" />
+            </ActionIcon>
+          </Group>
+          <Suspense fallback={<ComponentGlobal_Loader />}>
+            <ComponentMap_DetailData mapId={mapId} />
+          </Suspense>
+        </Stack>
+      </Drawer>
+    </>
+  );
+}

src/app_modules/map/_component/header.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { RouterMap } from "@/app/lib/router_hipmi/router_map";
+import UIGlobal_Drawer from "@/app_modules/_global/ui/ui_drawer";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import { ActionIcon } from "@mantine/core";
+import { IconDotsVertical, IconMapPlus } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function ComponentMap_Header() {
+  const router = useRouter();
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  const listPage = [
+    {
+      id: "1",
+      name: "Tambah Pin",
+      icon: <IconMapPlus />,
+      path: RouterMap.create,
+    },
+  ];
+
+  return (
+    <>
+      <UIGlobal_LayoutHeaderTamplate
+        title="Business Maps"
+        customButtonRight={
+          <ActionIcon variant="transparent" onClick={() => setOpenDrawer(true)}>
+            <IconDotsVertical color="white" />
+          </ActionIcon>
+        }
+      />
+
+      <UIGlobal_Drawer
+        opened={openDrawer}
+        close={() => setOpenDrawer(false)}
+        component={listPage}
+      />
+    </>
+  );
+}

src/app_modules/map/_component/index.ts

@@ -0,0 +1,2 @@
+export { ComponentMap_Header } from "./header";
+export { ComponentMap_DrawerDetailData } from "./drawer";