logging for observatories big slay

src/app/observatories/page.tsx

@@ -8,11 +8,38 @@ import { fetcher } from "@utils/axiosHelpers";
 import { Observatory } from "@prismaclient";
 import { getRelativeDate } from "@utils/formatters";
 import GeologicalEvent from "@appTypes/Event";
+import { useStoreState } from "@hooks/store";
+
+function NoAccessModal({ open, onClose }) {
+    if (!open) return null;
+    return (
+        <div className="fixed z-50 inset-0 bg-black/40 flex items-center justify-center">
+            <div className="bg-white rounded-lg shadow-lg p-8 max-w-xs w-full text-center relative">
+                <button 
+                    onClick={onClose} 
+                    className="absolute right-4 top-4 text-gray-500 hover:text-black text-lg"
+                    aria-label="Close"
+                >&times;</button>
+                <h2 className="font-bold text-xl mb-4">No Access</h2>
+                <p className="text-gray-600 mb-3">Sorry, You do not have access rights, please log in or contact an Admin.</p>
+                <button 
+                    onClick={onClose} 
+                    className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 mt-2"
+                >OK</button>
+            </div>
+        </div>
+    );
+}
 
 export default function Observatories() {
   const [selectedEventId, setSelectedEventId] = useState("");
   const [hoveredEventId, setHoveredEventId] = useState("");
   const [logModalOpen, setLogModalOpen] = useState(false);
+  const [noAccessModalOpen, setNoAccessModalOpen] = useState(false);
+    
+  const user = useStoreState((state) => state.user);
+  const role: "GUEST" | "SCIENTIST" | "ADMIN" = user?.role ?? "GUEST";
+  const canLogObservatory = role === "SCIENTIST" || role === "ADMIN";
 
   const { data, error, isLoading, mutate } = useSWR(
     "/api/observatories",
@@ -41,6 +68,14 @@ export default function Observatories() {
     [data]
   );
 
+  const handleLogClick = () => {
+    if (canLogObservatory) {
+        setLogModalOpen(true);
+    } else {
+        setNoAccessModalOpen(true);
+    }
+  };
+
   return (
     <div className="flex h-[calc(100vh-3.5rem)] w-full overflow-hidden">
       <div className="flex-grow h-full">
@@ -64,13 +99,18 @@ export default function Observatories() {
         setHoveredEventId={setHoveredEventId}
         button1Name="Log a New Observatory"
         button2Name="Search Observatories"
-        onButton1Click={() => setLogModalOpen(true)}
+        onButton1Click={handleLogClick}
+        button1Disabled={!canLogObservatory}
       />
       <LogObservatoryModal
         open={logModalOpen}
         onClose={() => setLogModalOpen(false)}
         onSuccess={() => mutate()}
       />
+      <NoAccessModal
+        open={noAccessModalOpen}
+        onClose={() => setNoAccessModalOpen(false)}
+      />
     </div>
   );
 }

src/components/Sidebar.tsx

@@ -2,7 +2,6 @@ import React, { Dispatch, SetStateAction, useEffect, useRef } from "react";
 import { TbHexagon } from "react-icons/tb";
 import GeologicalEvent from "@appTypes/Event";
 import getMagnitudeColor from "@utils/getMagnitudeColour";
-
 interface SidebarProps {
     logTitle: string;
     logSubtitle: string;