tanapa env

src/app_modules/admin/map/component/drawer.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { Drawer, Group, Text } from "@mantine/core";
+import { ComponentAdmin_UIDrawerNotifikasi } from "../../notifikasi/ui_drawer_notifikasi";
+import { MODEL_MAP } from "@/app_modules/map/lib/interface";
+
+export function ComponentAdminMap_Drawer({
+  opened,
+  onClose,
+  data,
+}: {
+  opened: boolean;
+  onClose: () => void;
+  data: MODEL_MAP | any;
+}) {
+  return (
+    <>
+      <Drawer
+        title={
+          <Group position="apart">
+            <Text fw={"bold"} fz={"lg"}>
+              Detail Map
+            </Text>
+          </Group>
+        }
+        opened={opened}
+        onClose={onClose}
+        position="right"
+        size={"xs"}
+        transitionProps={{transition: "fade", duration: 500}}
+      >
+        <Text>Detail Map</Text>
+        <Text>{data}</Text>
+      </Drawer>
+    </>
+  );
+}

src/app_modules/admin/map/component/index.ts

@@ -0,0 +1,3 @@
+import { ComponentAdminMap_Drawer } from "./drawer";
+
+export { ComponentAdminMap_Drawer };

src/app_modules/admin/map/fun/fun_get_all_maps.ts

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

src/app_modules/admin/map/fun/index.ts

@@ -0,0 +1,3 @@
+import { adminMap_funGetAllMaps } from "./fun_get_all_maps";
+
+export { adminMap_funGetAllMaps };

src/app_modules/admin/map/ui/index.ts

@@ -0,0 +1,3 @@
+import { UiAdminMap_MapBoxView } from "./ui_map_view";
+
+export { UiAdminMap_MapBoxView };

src/app_modules/admin/map/ui/ui_map_view.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { MODEL_MAP } from "@/app_modules/map/lib/interface";
+import ComponentAdminGlobal_IsEmptyData from "../../_admin_global/is_empty_data";
+import { useState } from "react";
+import {
+  defaultLatLong,
+  defaultMapZoom,
+} from "@/app_modules/map/lib/default_lat_long";
+import { Image, Paper, Stack, Text } from "@mantine/core";
+import "mapbox-gl/dist/mapbox-gl.css";
+import Map, {
+  AttributionControl,
+  Marker,
+  NavigationControl,
+  ScaleControl,
+} from "react-map-gl";
+import { ComponentAdminMap_Drawer } from "../component";
+
+export function UiAdminMap_MapBoxView({
+  mapboxToken,
+  dataMap,
+}: {
+  mapboxToken: string;
+  dataMap: MODEL_MAP[];
+}) {
+  const [mapId, setMapId] = useState("");
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [data, setData] = useState(dataMap);
+
+  if (!mapboxToken)
+    return <ComponentAdminGlobal_IsEmptyData text="Mapbox token not found" />;
+
+  return (
+    <>
+      <Stack
+        style={{
+          marginTop: "10px",
+          borderRadius: "5px",
+          backgroundColor: "gray",
+        }}
+      >
+        <Map
+          mapboxAccessToken={mapboxToken}
+          mapStyle={"mapbox://styles/mapbox/streets-v11"}
+          initialViewState={{
+            latitude: defaultLatLong[0],
+            longitude: defaultLatLong[1],
+            zoom: defaultMapZoom,
+          }}
+          style={{
+            cursor: "pointer",
+            width: "auto",
+            height: "82vh",
+            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: 50,
+                    }}
+                    lineClamp={2}
+                  >
+                    {e.namePin}
+                  </Text>
+                </Stack>
+              </Marker>
+            </Stack>
+          ))}
+
+          <NavigationControl />
+          <ScaleControl position="top-left" />
+          <AttributionControl customAttribution="Map design by PT. Bali Interaktif Perkasa" />
+        </Map>
+      </Stack>
+
+      <ComponentAdminMap_Drawer
+      opened={openDrawer}
+      onClose={() => setOpenDrawer(false)}
+      data={mapId as any}
+      />
+    </>
+  );
+}

src/app_modules/admin/map/view/index.ts

@@ -0,0 +1,3 @@
+import { AdminMap_View } from "./view";
+
+export { AdminMap_View }

src/app_modules/admin/map/view/view.tsx

@@ -0,0 +1,19 @@
+import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
+import { adminMap_funGetAllMaps } from "../fun/fun_get_all_maps";
+import { UiAdminMap_MapBoxView } from "../ui";
+
+
+const mapboxToken = process.env.MAPBOX_TOKEN!;
+export async function AdminMap_View() {
+  const dataMap = await adminMap_funGetAllMaps();
+  return (
+    <>
+      <ComponentAdminGlobal_HeaderTamplate name="Maps" />
+
+      <UiAdminMap_MapBoxView
+        mapboxToken={mapboxToken}
+        dataMap={dataMap as any}
+      />
+    </>
+  );
+}