added grafana, map react-leaflet

apps/dispatch/app/(dispatch)/_components/map/BaseMaps.tsx

@@ -0,0 +1,13 @@
+"use client";
+import { TileLayer } from "react-leaflet";
+
+export const BaseMaps = () => {
+	return (
+		<>
+			<TileLayer
+				attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+				url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+			/>
+		</>
+	);
+};

apps/dispatch/app/(dispatch)/_components/map/ContextMenu.tsx

@@ -0,0 +1,24 @@
+import { useMapStore } from "_store/mapStore";
+import { useEffect } from "react";
+import { Popup, useMap } from "react-leaflet";
+
+export const ContextMenu = () => {
+	const map = useMap();
+	const { popup, map: mapStore, setPopup } = useMapStore();
+
+	useEffect(() => {
+		map.on("contextmenu", (e) => {
+			setPopup({ isOpen: true, lat: e.latlng.lat, lng: e.latlng.lng });
+		});
+	}, [popup]);
+
+	if (!popup) return null;
+
+	return (
+		<Popup position={[popup.lat, popup.lng]}>
+			<div className="w-60">
+				<h1>Context Menu</h1>
+			</div>
+		</Popup>
+	);
+};

apps/dispatch/app/(dispatch)/_components/map/Map.tsx

@@ -0,0 +1,27 @@
+"use client";
+import { useEffect, useRef } from "react";
+
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+import ToastCard from "../toast/ToastCard";
+import { Toast, ToastBar, Toaster, toast } from "react-hot-toast";
+import { useMapStore } from "_store/mapStore";
+import { MapContainer } from "react-leaflet";
+import { BaseMaps } from "(dispatch)/_components/map/BaseMaps";
+import { ContextMenu } from "(dispatch)/_components/map/ContextMenu";
+
+export default () => {
+	const { map } = useMapStore();
+
+	return (
+		<MapContainer
+			className="h-full w-full"
+			center={map.center}
+			zoom={map.zoom}
+			scrollWheelZoom={true}
+		>
+			<BaseMaps />
+			<ContextMenu />
+		</MapContainer>
+	);
+};