# 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";

src/app_modules/map/fun/create/fun_create_pin.ts

@@ -0,0 +1,25 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { RouterMap } from "@/app/lib/router_hipmi/router_map";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+import { revalidatePath } from "next/cache";
+
+export async function map_funCreatePin({ data }: { data: any }) {
+  const authorId = await user_getOneUserId();
+  // console.log(data);
+
+  const create = await prisma.businessMaps.create({
+    data: {
+      latitude: data.lat,
+      longitude: data.long,
+      namePin: data.namePin,
+      authorId: authorId,
+    },
+  });
+
+  if (!create) return { status: 400, message: "Gagal menambahkan" };
+
+  revalidatePath(RouterMap.main_view)
+  return { status: 200, message: "Berhasil menambahkan" };
+}

src/app_modules/map/fun/get/fun_get_all_by_id.ts

@@ -0,0 +1,5 @@
+"use server"
+
+export async function map_funGetAllByUserId({}) {
+    
+}

src/app_modules/map/fun/get/fun_get_all_map.ts

@@ -0,0 +1,13 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export async function map_funGetAllMap() {
+  const data = await prisma.businessMaps.findMany({
+    where: {
+      isActive: true,
+    },
+  });
+
+  return data;
+}

src/app_modules/map/fun/get/fun_get_one_by_id.ts

@@ -0,0 +1,28 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export async function map_funGetOneById({ mapId }: { mapId: string }) {
+  const data = await prisma.businessMaps.findFirst({
+    where: {
+      id: mapId,
+    },
+    select: {
+      Author: {
+        include: {
+          Profile: true,
+        },
+      },
+      id: true,
+      isActive: true,
+      createdAt: true,
+      updatedAt: true,
+      namePin: true,
+      latitude: true,
+      longitude: true,
+      authorId: true,
+    },
+  });
+
+  return data;
+}

src/app_modules/map/lib/default_lat_long.ts

@@ -0,0 +1,2 @@
+export const defaultLatLong = [-8.723606930462012, 115.17496509980654];
+export const defaultMapZoom = 14;

src/app_modules/map/lib/interface.ts

@@ -0,0 +1,13 @@
+import { MODEL_USER } from "@/app_modules/home/model/interface";
+
+export interface MODEL_MAP {
+  id: string;
+  isActive: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+  namePin: string;
+  latitude: number;
+  longitude: number;
+  authorId: string;
+  Author: MODEL_USER
+}

src/app_modules/map/ui/index.ts

@@ -0,0 +1,3 @@
+export { UiMap_MapBoxView } from "./ui_map";
+export { UiMap_SplashView } from "./ui_splash";
+export { UiMap_CreatePin } from "./ui_create_pin"

src/app_modules/map/ui/ui_create_pin.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+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 {
+  Button,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  TextInput
+} from "@mantine/core";
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import Map, { Marker } from "react-map-gl";
+import { map_funCreatePin } from "../fun/create/fun_create_pin";
+import { defaultLatLong, defaultMapZoom } from "../lib/default_lat_long";
+
+export function UiMap_CreatePin({ mapboxToken }: { mapboxToken: string }) {
+  const [[lat, long], setLatLong] = useState([0, 0]);
+  const [isPin, setIsPin] = useState(false);
+  const [namePin, setNamePin] = useState("");
+
+  return (
+    <>
+      <Stack style={{ borderRadius: "10px" }}>
+        <Map
+          mapboxAccessToken={mapboxToken}
+          mapStyle={"mapbox://styles/mapbox/streets-v11"}
+          initialViewState={{
+            latitude: defaultLatLong[0],
+            longitude: defaultLatLong[1],
+            zoom: defaultMapZoom,
+          }}
+          style={{
+            cursor: "pointer",
+            width: "100%",
+            height: "60vh",
+            borderRadius: "10px",
+          }}
+          onClick={(a) => {
+            setLatLong([a.lngLat.lat, a.lngLat.lng]);
+            setIsPin(true);
+          }}
+        >
+          <Marker
+            style={{
+              color: "red",
+              width: 40,
+              // height: 40,
+              cursor: "pointer",
+            }}
+            latitude={lat}
+            longitude={long}
+            anchor="bottom"
+          >
+            <Stack spacing={0}>
+              <Image
+                w={"100%"}
+                alt="image"
+                src="https://cdn-icons-png.flaticon.com/512/5860/5860579.png"
+              />
+            </Stack>
+          </Marker>
+        </Map>
+
+        <Paper
+          style={{
+            padding: "15px",
+            backgroundColor: AccentColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+            borderRadius: "10px",
+            color: "white",
+          }}
+        >
+          <Stack>
+            <TextInput
+              disabled={isPin ? false : true}
+              style={{ transition: "0.5s" }}
+              styles={{ label: { color: isPin ? "white" : "gray" } }}
+              label="Nama Pin"
+              placeholder="Masukan nama pin map"
+              withAsterisk
+              onChange={(val) => {
+                setNamePin(_.startCase(val.currentTarget.value));
+              }}
+            />
+            <ButtonSavePin
+              namePin={namePin}
+              lat={lat as any}
+              long={long as any}
+            />
+          </Stack>
+        </Paper>
+      </Stack>
+    </>
+  );
+}
+
+function ButtonSavePin({
+  namePin,
+  lat,
+  long,
+}: {
+  namePin: string;
+  lat: string;
+  long: string;
+}) {
+  const router = useRouter();
+  async function onSavePin() {
+    const res = await map_funCreatePin({ data: { namePin, lat, long } });
+    res.status === 200
+      ? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
+      : ComponentGlobal_NotifikasiGagal(res.message);
+  }
+
+  return (
+    <>
+      <Group position="right">
+        <Button
+          style={{ transition: "0.5s" }}
+          disabled={namePin === "" ? true : false}
+          radius={"xl"}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
+          onClick={() => onSavePin()}
+        >
+          Simpan
+        </Button>
+      </Group>
+    </>
+  );
+}

src/app_modules/map/ui/ui_map.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import "mapbox-gl/dist/mapbox-gl.css";
+import { Image, Stack, Text, Tooltip } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useRef, useState } from "react";
+import Map, {
+  AttributionControl,
+  GeolocateControl,
+  Marker,
+  NavigationControl,
+  Popup,
+  ScaleControl,
+} from "react-map-gl";
+import { defaultLatLong, defaultMapZoom } from "../lib/default_lat_long";
+import { MODEL_MAP } from "../lib/interface";
+import { ComponentMap_DrawerDetailData } from "../_component";
+import { map_funGetAllMap } from "../fun/get/fun_get_all_map";
+
+export function UiMap_MapBoxView({
+  mapboxToken,
+  dataMap,
+}: {
+  mapboxToken: string;
+  dataMap: MODEL_MAP[];
+}) {
+  const [mapId, setMapId] = useState("");
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [data, setData] = useState(dataMap);
+
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    const loadData = await map_funGetAllMap();
+    setData(loadData as any);
+  }
+
+  return (
+    <>
+      <Stack style={{ borderRadius: "10px" }}>
+        <Map
+          mapboxAccessToken={mapboxToken}
+          mapStyle={"mapbox://styles/mapbox/streets-v11"}
+          initialViewState={{
+            latitude: defaultLatLong[0],
+            longitude: defaultLatLong[1],
+            zoom: defaultMapZoom,
+          }}
+          style={{
+            cursor: "pointer",
+            width: "auto",
+            height: "90vh",
+            borderRadius: "5px",
+          }}
+          attributionControl={false}
+        >
+          {data.map((e, i) => (
+            <Stack key={i}>
+              <Marker
+                style={{
+                  width: 40,
+                  cursor: "pointer",
+                }}
+                latitude={e.latitude}
+                longitude={e.longitude}
+                anchor="bottom"
+                offset={[0, 0]}
+                scale={1}
+              >
+                <Stack
+                  spacing={0}
+                  align="center"
+                  onClick={() => {
+                    setMapId(e.id);
+                    setOpenDrawer(true);
+                  }}
+                >
+                  <Image
+                    w={"100%"}
+                    alt="image"
+                    src="https://cdn-icons-png.flaticon.com/512/5860/5860579.png"
+                  />
+                  <Text
+                    fz={"xs"}
+                    bg={"dark"}
+                    c={"white"}
+                    align="center"
+                    style={{
+                      borderRadius: "5px",
+                      padding: "5px",
+                      width: "auto",
+                    }}
+                    lineClamp={2}
+                  >
+                    {e.namePin}
+                  </Text>
+                </Stack>
+              </Marker>
+            </Stack>
+          ))}
+
+          <NavigationControl />
+          <ScaleControl position="top-left" />
+          <AttributionControl customAttribution="Map design by PT. Bali Interaktif Perkasa" />
+        </Map>
+      </Stack>
+
+      <ComponentMap_DrawerDetailData
+        opened={openDrawer}
+        close={() => setOpenDrawer(false)}
+        mapId={mapId}
+      />
+    </>
+  );
+}

src/app_modules/map/ui/ui_splash.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { RouterMap } from "@/app/lib/router_hipmi/router_map";
+import UIGlobal_SplashScreen from "@/app_modules/_global/ui/ui_splash";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconMap2 } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+export function UiMap_SplashView() {
+  const router = useRouter();
+
+  useShallowEffect(() => {
+    setTimeout(() => {
+      router.replace(RouterMap.main_view, { scroll: false }), 1000;
+    });
+  }, []);
+  return (
+    <>
+      <UIGlobal_SplashScreen icon={<IconMap2 size={300} />} />
+    </>
+  );
+}

src/app_modules/map/view/create.tsx

@@ -0,0 +1,20 @@
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { UiMap_CreatePin } from "../ui/ui_create_pin";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+
+const mapboxToken = process.env.MAPBOX_TOKEN!;
+export async function Map_CreateNewPin() {
+  if (!mapboxToken)
+    return <ComponentGlobal_IsEmptyData text="Mapbox token not found" />;
+
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Tambah Pin" />}
+      >
+        <UiMap_CreatePin mapboxToken={mapboxToken} />
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}

src/app_modules/map/view/index.ts

@@ -0,0 +1,3 @@
+export { Map_View } from "./main_view";
+export { Map_Splash } from "./splash";
+export { Map_CreateNewPin } from "./create";

src/app_modules/map/view/main_view.tsx

@@ -0,0 +1,16 @@
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { ComponentMap_Header } from "../_component";
+import { UiMap_MapBoxView } from "../ui";
+import { map_funGetAllMap } from "../fun/get/fun_get_all_map";
+
+export async function Map_View({ mapboxToken }: { mapboxToken: string }) {
+  const dataMap = await map_funGetAllMap();
+  
+  return (
+    <>
+      <UIGlobal_LayoutTamplate header={<ComponentMap_Header />}>
+        <UiMap_MapBoxView mapboxToken={mapboxToken} dataMap={dataMap as any} />
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}

src/app_modules/map/view/splash.tsx

@@ -0,0 +1,9 @@
+import { UiMap_SplashView } from "../ui/ui_splash";
+
+export async function Map_Splash() {
+  return (
+    <>
+      <UiMap_SplashView />
+    </>
+  );
+}