map sheet and cancel button

src/app/api/servers/route.ts

@@ -65,6 +65,7 @@ export async function POST(request: Request) {
     name: body.name,
     ip: body.ip,
     coordinates: body.coordinates,
+    location: body.location,
   });
 
   servers.write();

src/app/dashboard/server.tsx

@@ -36,7 +36,7 @@ import {
 } from "lucide-react";
 import { useState } from "react";
 
-function UsageBar({
+export function UsageBar({
   value,
   Icon,
   text,

src/app/servers/Map.tsx

@@ -1,12 +1,23 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef, useEffect, useState } from "react";
 import maplibregl from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 import Server from "@/types/server";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import ServerComponent, { UsageBar } from "../dashboard/server";
+import { Cpu, HardDrive, MapPin, MemoryStick, Network } from "lucide-react";
 
 export default function Map({ servers }: { servers: Server[] }) {
   const mapContainer = useRef<HTMLDivElement | null>(null);
   const map = useRef<maplibregl.Map | null>(null);
   const markers = useRef<maplibregl.Marker[]>([]);
+  const [sheet, setSheet] = useState<Server | undefined>();
 
   // Initialize map only once
   useEffect(() => {
@@ -45,10 +56,8 @@ export default function Map({ servers }: { servers: Server[] }) {
           .setLngLat(server.coordinates)
           .addTo(map.current!);
 
-        // Optional: add popup or click event
         marker.getElement().addEventListener("click", () => {
-          // Your logic here
-          console.log("Clicked on server", server.name);
+          setSheet(server);
         });
 
         markers.current.push(marker);
@@ -56,5 +65,53 @@ export default function Map({ servers }: { servers: Server[] }) {
     });
   }, [servers]);
 
-  return <div ref={mapContainer} className="w-full h-full" />;
+  return (
+    <div ref={mapContainer} className="w-full h-full">
+      <Sheet open={sheet != undefined} onOpenChange={() => setSheet(undefined)}>
+        {sheet && (
+          <SheetContent>
+            <SheetHeader>
+              <SheetTitle>{sheet.name}</SheetTitle>
+              <SheetDescription className="flex gap-2">
+                {sheet.status[0].toUpperCase() + sheet.status.slice(1)} {" · "}
+                {sheet.ip}
+                {sheet.location && (
+                  <span className="flex items-center gap-0.5">
+                    <MapPin size={14} />
+                    {sheet.location}
+                  </span>
+                )}
+              </SheetDescription>
+            </SheetHeader>
+            <div className="px-4 gap-4 flex flex-col">
+              <UsageBar
+                value={sheet.cpu}
+                Icon={Cpu}
+                text="CPU"
+                color="var(--chart-2)"
+              />
+              <UsageBar
+                value={sheet.memory}
+                Icon={MemoryStick}
+                text="Memory"
+                color="var(--chart-1)"
+              />
+              <UsageBar
+                value={sheet.storage}
+                Icon={HardDrive}
+                text="Storage"
+                color="var(--chart-5)"
+              />
+              <UsageBar
+                value={sheet.network}
+                Icon={Network}
+                text="Network"
+                color="var(--chart-3)"
+              />
+            </div>
+          </SheetContent>
+        )}
+      </Sheet>
+    </div>
+  );
 }

src/app/servers/NewServerDialog.tsx

@@ -38,7 +38,7 @@ export default function NewServerDialog({
       >
         <Plus className="m-0 p-0" /> New
       </DialogTrigger>
-      <DialogContent>
+      <DialogContent className="max-h-[85vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>Add Server</DialogTitle>
         </DialogHeader>
@@ -73,6 +73,9 @@ export default function NewServerDialog({
         <Label className="mt-2">Server Location</Label>
         <MapSelect setLocation={setCoordinates} />
         <DialogFooter>
+          <Button variant="secondary" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
           <Button
             disabled={name == "" || ip == ""}
             onClick={() => {