d

src/app/administrator/page.tsx

@@ -1,34 +1,269 @@
 "use client";
 import React, { useState, useRef } from "react";
-type Role = "admin" | "user" | "editor";
-type User = {
-  email: string;
+
+// The roles in UserSeed are ALL CAPS as per your data
+type Role = "ADMIN" | "GUEST" | "SCIENTIST";
+// Forward declarations if you don't have these yet
+// You can replace Scientist or User with real types if you have them
+
+type Scientist = {
+    id: number;
+    createdAt: Date | string;
     name: string;
-  role: Role;
-  password: string;
+    level: string; // "JUNIOR" | "SENIOR"
+    userId: number;
+    user: User;
+    superiorId?: number | null;
+    superior?: Scientist | null;
+    subordinates: Scientist[];
+    earthquakes: Earthquake[];
+    observatories: Observatory[];
+    artefacts: Artefact[];
+  };
+
+type Earthquake = {
+  id: number;
+  createdAt: Date | string;
+  updatedAt: Date | string;
+  date: Date | string;
+  location: string;
+  latitude: string;
+  longitude: string;
+  magnitude: number;
+  depth: number;
+  creatorId?: number | null;
+  creator?: Scientist | null;
+  artefacts: Artefact[];
+  observatories: Observatory[];
 };
 
-const initialUsers: User[] = [ // todo - add user reading function
-  { email: "john@example.com", name: "John Doe", role: "admin", password: "secret1" },
-  { email: "jane@example.com", name: "Jane Smith", role: "user", password: "secret2" },
-  { email: "bob@example.com", name: "Bob Brown", role: "editor", password: "secret3" },
-  { email: "alice@example.com", name: "Alice Johnson", role: "user", password: "secret4" },
-  { email: "eve@example.com", name: "Eve Black", role: "admin", password: "secret5" },
-  { email: "dave@example.com", name: "Dave Clark", role: "user", password: "pw" },
-  { email: "fred@example.com", name: "Fred Fox", role: "user", password: "pw" },
-  { email: "ginny@example.com", name: "Ginny Hall", role: "editor", password: "pw" },
-  { email: "harry@example.com", name: "Harry Lee", role: "admin", password: "pw" },
-  { email: "ivy@example.com", name: "Ivy Volt", role: "admin", password: "pw" },
-  { email: "kate@example.com", name: "Kate Moss", role: "editor", password: "pw" },
-  { email: "leo@example.com", name: "Leo Garrison", role: "user", password: "pw" },
-  { email: "isaac@example.com", name: "Isaac Yang", role: "user", password: "pw" },
-];
-const sortFields = [ // Sort box options
-  { label: "Name", value: "name" },
-  { label: "Email", value: "email" },
-] as const;
+type Observatory = {
+  id: number;
+  createdAt: Date | string;
+  updatedAt: Date | string;
+  name: string;
+  location: string;
+  longitude: string;
+  latitude: string;
+  dateEstablished?: number | null;
+  functional: boolean;
+  seismicSensorOnline: boolean;
+  creatorId?: number | null;
+  creator?: Scientist | null;
+  earthquakes: Earthquake[];
+};
+type Artefact = {
+    id: number;
+    createdAt: Date | string; 
+    updatedAt: Date | string;
+    type: string;
+    warehouseArea: string;
+    earthquakeId: number;
+    earthquake: Earthquake;
+    creatorId?: number | null;
+    creator?: Scientist | null;
+    required: boolean;
+    shopPrice?: number | null;
+    purchasedById?: number | null;
+    purchasedBy?: User | null;
+    pickedUp: boolean;
+  };
 
-type SortField = typeof sortFields[number]["value"];
+type User= {
+  id: number;
+  createdAt: string;
+  name: string;
+  email: string;
+  passwordHash: string;
+  role: Role; // "ADMIN" | "GUEST" | "SCIENTIST"
+  scientist : Scientist | null
+  purchasedArtefacts: Artefact[];
+};
+
+// Example users with scientist references
+
+const initialUsers: User[] = [
+    {
+      id: 1,
+      createdAt: "2024-06-20T08:00:00Z",
+      name: "Dr. Alice Volcano",
+      email: "alice.volcano@example.com",
+      passwordHash: "hashed_password_1",
+      role: "SCIENTIST",
+      scientist: {
+        id: 101,
+        createdAt: "2024-06-18T09:00:00Z",
+        name: "Dr. Alice Volcano",
+        level: "SENIOR",
+        userId: 1,
+        user: null as any, // Will be populated after object creation to avoid circular reference, see note below
+        superiorId: null,
+        superior: null,
+        subordinates: [],
+        earthquakes: [
+          {
+            id: 201,
+            createdAt: "2024-06-01T04:00:00Z",
+            updatedAt: "2024-06-10T10:00:00Z",
+            date: "2024-06-01T05:00:00Z",
+            location: "Fuego Ridge",
+            latitude: "14.23",
+            longitude: "-90.88",
+            magnitude: 7.2,
+            depth: 10.1,
+            creatorId: 101,
+            creator: null,
+            artefacts: [],
+            observatories: [],
+          }
+        ],
+        observatories: [
+          {
+            id: 301,
+            createdAt: "2024-01-01T08:00:00Z",
+            updatedAt: "2024-06-05T16:30:00Z",
+            name: "Central Vulcanology Lab",
+            location: "Fuego City",
+            longitude: "-90.88",
+            latitude: "14.23",
+            dateEstablished: 2011,
+            functional: true,
+            seismicSensorOnline: true,
+            creatorId: 101,
+            creator: null,
+            earthquakes: [],
+          }
+        ],
+        artefacts: [
+          {
+            id: 401,
+            createdAt: "2024-06-11T09:00:00Z",
+            updatedAt: "2024-06-12T10:45:00Z",
+            type: "Lava",
+            warehouseArea: "ZoneA-Shelf1",
+            earthquakeId: 201,
+            earthquake: {
+              id: 201,
+              createdAt: "2024-06-01T04:00:00Z",
+              updatedAt: "2024-06-10T10:00:00Z",
+              date: "2024-06-01T05:00:00Z",
+              location: "Fuego Ridge",
+              latitude: "14.23",
+              longitude: "-90.88",
+              magnitude: 7.2,
+              depth: 10.1,
+              creatorId: 101,
+              creator: null,
+              artefacts: [],
+              observatories: [],
+            },
+            creatorId: 101,
+            creator: null,
+            required: true,
+            shopPrice: 500.0,
+            purchasedById: null,
+            purchasedBy: null,
+            pickedUp: false,
+          }
+        ],
+      },
+      purchasedArtefacts: [],
+    },
+    {
+      id: 2,
+      createdAt: "2024-06-21T08:00:00Z",
+      name: "Dr. Bob Lava",
+      email: "bob.lava@example.com",
+      passwordHash: "hashed_password_2",
+      role: "SCIENTIST",
+      scientist: {
+        id: 102,
+        createdAt: "2024-06-19T13:00:00Z",
+        name: "Dr. Bob Lava",
+        level: "JUNIOR",
+        userId: 2,
+        user: null as any, // Populated after object creation if circular needed
+        superiorId: 101,
+        superior: null,
+        subordinates: [],
+        earthquakes: [],
+        observatories: [],
+        artefacts: [],
+      },
+      purchasedArtefacts: [],
+    }
+  ];
+  
+  // Optionally, populate the scientist.user field with the parent user (avoiding circular reference on first creation):
+if (initialUsers[0].scientist && initialUsers[1].scientist){
+    initialUsers[0].scientist.user = initialUsers[0];
+    initialUsers[1].scientist.user = initialUsers[1];
+    initialUsers[1].scientist.superior = initialUsers[1].scientist;}
+
+  const allArtefacts: Artefact[] = [
+    {
+      id: 401,
+      createdAt: "2024-06-11T09:00:00Z",
+      updatedAt: "2024-06-12T10:45:00Z",
+      type: "Lava",
+      warehouseArea: "ZoneA-Shelf1",
+      earthquakeId: 201,
+      earthquake: {
+        id: 201,
+        createdAt: "2024-06-01T04:00:00Z",
+        updatedAt: "2024-06-10T10:00:00Z",
+        date: "2024-06-01T05:00:00Z",
+        location: "Fuego Ridge",
+        latitude: "14.23",
+        longitude: "-90.88",
+        magnitude: 7.2,
+        depth: 10.1,
+        creatorId: 101,
+        creator: null,
+        artefacts: [],
+        observatories: [],
+      },
+      creatorId: 101,
+      creator: null,
+      required: true,
+      shopPrice: 500.0,
+      purchasedById: null,
+      purchasedBy: null,
+      pickedUp: false,
+    }
+  ];
+  const allEarthquakes: Earthquake[] = [
+    {
+      id: 201,
+      createdAt: "2024-06-01T04:00:00Z",
+      updatedAt: "2024-06-10T10:00:00Z",
+      date: "2024-06-01T05:00:00Z",
+      location: "Fuego Ridge",
+      latitude: "14.23",
+      longitude: "-90.88",
+      magnitude: 7.2,
+      depth: 10.1,
+      creatorId: 101,
+      creator: null,
+      artefacts: [],
+      observatories: [],
+    }
+  ];
+  const allScientists: Scientist[] = initialUsers.map(u => u.scientist as Scientist).filter(Boolean);
+
+// Human readable role labels
+const roleLabels: Record<Role, string> = {
+  ADMIN: "Admin",
+  GUEST: "Guest",
+  SCIENTIST: "Scientist"
+};
+const allRoles: Role[] = ["ADMIN", "GUEST", "SCIENTIST"];
+
+const sortFields = [
+  { label: "Name", value: "name" },
+  { label: "Email", value: "email" }
+] as const;
+type SortField = (typeof sortFields)[number]["value"];
 type SortDir = "asc" | "desc";
 const dirLabels: Record<SortDir, string> = { asc: "ascending", desc: "descending" };
 const fieldLabels: Record<SortField, string> = { name: "Name", email: "Email" };
@@ -36,30 +271,32 @@ const fieldLabels: Record<SortField, string> = { name: "Name", email: "Email" };
 export default function AdminPage() {
     const [users, setUsers] = useState<User[]>(initialUsers);
     const [selectedEmail, setSelectedEmail] = useState<string | null>(null);
+    const [editUser, setEditUser] = useState<User & { password?: string } | null>(null);
+    const [showPassword, setShowPassword] = useState(false);
+    const [showAssignmentPanel, setShowAssignmentPanel] = useState<null | 'artefact' | 'earthquake' | 'scientist'>(null);
 
-  // Local edit state for editor form
-  const [editUser, setEditUser] = useState<User | null>(null);
-  // Reset editUser when the selected user changes
   React.useEffect(() => {
     if (!selectedEmail) setEditUser(null);
     else {
       const user = users.find(u => u.email === selectedEmail);
-      setEditUser(user ? { ...user } : null);
+      // Add a dummy password field just for edit box (not stored)
+      setEditUser(user ? { ...user, password: "" } : null);
     }
   }, [selectedEmail, users]);
 
   // Search/filter/sort state
-  const [searchField, setSearchField] = useState<"name" | "email">("name");
+  const [searchField, setSearchField] = useState<SortField>("name");
   const [searchText, setSearchText] = useState("");
+  // The filter UI must use ALL CAPS for roles in UserSeed
   const [roleFilter, setRoleFilter] = useState<Role | "all">("all");
   const [sortField, setSortField] = useState<SortField>("name");
   const [sortDir, setSortDir] = useState<SortDir>("asc");
-  // Dropdown states
   const [filterDropdownOpen, setFilterDropdownOpen] = useState(false);
   const [sortDropdownOpen, setSortDropdownOpen] = useState(false);
   const filterDropdownRef = useRef<HTMLDivElement>(null);
   const sortDropdownRef = useRef<HTMLDivElement>(null);
 
+  // Dropdown auto-close
   React.useEffect(() => {
     const handleClick = (e: MouseEvent) => {
       if (
@@ -73,7 +310,17 @@ export default function AdminPage() {
     return () => document.removeEventListener("mousedown", handleClick);
   }, []);
 
-  // Filtering, searching, sorting logic
+  // Handler: assign/unassign scientist
+  const handleAssignScientist = (scientistId: number) => {
+    setEditUser(prev =>
+      prev ? {
+        ...prev,
+        scientist: allScientists.find(s => s.id === scientistId) || null,
+      } : null
+    );
+  };
+
+  // Filter, search, sort logic
   const filteredUsers = users.filter(
     (user) => roleFilter === "all" || user.role === roleFilter
   );
@@ -85,7 +332,7 @@ export default function AdminPage() {
     return sortDir === "asc" ? cmp : -cmp;
   });
 
-  // Form input change handler
+  // Edit form handler (special-case password, don't modify passwordHash)
   const handleEditChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
     if (!editUser) return;
     const { name, value } = e.target;
@@ -94,15 +341,14 @@ export default function AdminPage() {
     );
   };
 
-  // Update button logic (compare original selectedUser and editUser)
-  const selectedUser = users.find((u) => u.email === selectedEmail);
+  // Selected "actual" user object
+  const selectedUser = users.find(u => u.email === selectedEmail);
   const isEditChanged = React.useMemo(() => {
     if (!editUser || !selectedUser) return false;
-    // Compare primitive fields
     return (
       editUser.name !== selectedUser.name ||
       editUser.role !== selectedUser.role ||
-      editUser.password !== selectedUser.password
+      (editUser.password && editUser.password !== "") // Only trigger update if changed
     );
   }, [editUser, selectedUser]);
 
@@ -112,14 +358,14 @@ export default function AdminPage() {
     if (!editUser) return;
     setUsers(prev =>
       prev.map(u =>
-        u.email === editUser.email ? { ...editUser } : u
+        u.email === editUser.email
+          ? { ...editUser } // Copies ALL user properties, including scientist, artefacts, etc.
+          : u
       )
     );
-    // After successful update, update selectedUser local state
-    // (editUser will auto-sync due to useEffect on users)
   };
 
-  // Delete user logic
+  // Delete user
   const handleDelete = () => {
     if (!selectedUser) return;
     if (!window.confirm(`Are you sure you want to delete "${selectedUser.name}"? This cannot be undone.`)) return;
@@ -128,16 +374,13 @@ export default function AdminPage() {
     setEditUser(null);
   };
 
-  const allRoles: Role[] = ["admin", "user", "editor"];
-
-  // Tooltip handling for email field
   const [showEmailTooltip, setShowEmailTooltip] = useState(false);
 
   return (
     <div className="flex flex-col h-full">
       <div className="flex h-full overflow-hidden bg-gray-50">
         {/* SIDEBAR */}
-        <div className="w-80 h-full border-r border-neutral-200 bg-neutral-100 flex flex-col rounded-l-xl shadow-sm">
+        <div className=" w-80 h-full border-r border-neutral-200 bg-neutral-100 flex flex-col rounded-3xl shadow-sm">
           <div className="p-4 flex flex-col h-full">
             {/* Search Bar */}
             <div className="mb-3 flex gap-2">
@@ -149,7 +392,7 @@ export default function AdminPage() {
               />
               <select
                 value={searchField}
-                onChange={e => setSearchField(e.target.value as "name" | "email")}
+                onChange={e => setSearchField(e.target.value as SortField)}
                 className="border rounded-lg px-2 py-1 text-sm"
               >
                 <option value="name">Name</option>
@@ -169,14 +412,15 @@ export default function AdminPage() {
                   onClick={() => setFilterDropdownOpen(v => !v)}
                   type="button"
                 >
-                  Filter <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" /></svg>
+                  Filter <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" /></svg>
                 </button>
                 {filterDropdownOpen && (
                   <div className="absolute z-10 mt-1 left-0 bg-white border rounded-lg shadow-sm w-28 py-1">
                     <button
                       onClick={() => { setRoleFilter("all"); setFilterDropdownOpen(false); }}
                       className={`w-full text-left px-3 py-1 hover:bg-blue-50 border-b border-gray-100 last:border-0
-                        ${roleFilter==="all" ? "font-bold text-blue-600" : ""}`}
+                        ${roleFilter === "all" ? "font-bold text-blue-600" : ""}`}
                     >
                       All
                     </button>
@@ -185,9 +429,9 @@ export default function AdminPage() {
                         key={role}
                         onClick={() => { setRoleFilter(role); setFilterDropdownOpen(false); }}
                         className={`w-full text-left px-3 py-1 hover:bg-blue-50 border-b border-gray-100 last:border-0
-                          ${roleFilter===role ? "font-bold text-blue-600" : ""}`}
+                          ${roleFilter === role ? "font-bold text-blue-600" : ""}`}
                       >
-                        {role}
+                        {roleLabels[role]}
                       </button>
                     ))}
                   </div>
@@ -212,7 +456,7 @@ export default function AdminPage() {
                           setSortDropdownOpen(false);
                         }}
                         className={`w-full text-left px-3 py-2 hover:bg-blue-50 border-b border-gray-100 last:border-0
-                          ${sortField===opt.value ? "font-bold text-blue-600" : ""}`}
+                          ${sortField === opt.value ? "font-bold text-blue-600" : ""}`}
                       >
                         {opt.label}
                       </button>
@@ -246,7 +490,7 @@ export default function AdminPage() {
                 >
                   <div className="flex items-center justify-between">
                     <span className="text-sm font-medium truncate">{user.name}</span>
-                    <span className="ml-1 text-xs px-2 py-0.5 rounded-lg bg-gray-200 text-gray-700">{user.role}</span>
+                    <span className="ml-1 text-xs px-2 py-0.5 rounded-lg bg-gray-200 text-gray-700">{roleLabels[user.role]}</span>
                   </div>
                   <div className="flex items-center justify-between mt-0.5">
                     <span className="text-xs text-gray-600 truncate">{user.email}</span>
@@ -262,9 +506,15 @@ export default function AdminPage() {
         {/* MAIN PANEL */}
         <div className="flex-1 p-10 bg-white overflow-y-auto">
           {editUser ? (
-            <div className="max-w-lg mx-auto bg-white p-6 rounded-lg shadow">
+            <div className="max-w-2xl mx-auto bg-white p-6 rounded-lg shadow">
               <h2 className="text-lg font-bold mb-6">Edit User</h2>
-              <form className="space-y-4" onSubmit={handleUpdate}>
+              <form className="space-y-4" onSubmit={e => { e.preventDefault(); }}>
+                {/* Creation Time */}
+                <div className="flex items-center gap-2 mb-2">
+                  <label className="text-sm font-medium text-gray-700">Account Creation Time:</label>
+                  <span className="text-sm text-gray-500">{editUser.createdAt}</span>
+                </div>
+                {/* Email */}
                 <div className="relative">
                   <label className="block text-sm font-medium text-gray-700 mb-1">
                     Email (unique):
@@ -275,17 +525,9 @@ export default function AdminPage() {
                     name="email"
                     value={editUser.email}
                     readOnly
-                    onMouseEnter={() => setShowEmailTooltip(true)}
-                    onMouseLeave={() => setShowEmailTooltip(false)}
                   />
-                  {/* Custom tooltip */}
-                  {showEmailTooltip && (
-                    <div className="absolute left-0 top-full mt-1 z-10 w-max max-w-xs bg-gray-800 text-gray-100 text-xs px-3 py-2 rounded-md shadow-lg border border-gray-700">
-                      This field cannot be changed. <br />
-                      To change the email, delete and re-add the user.
-                    </div>
-                  )}
                 </div>
+                {/* Name */}
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-1">
                     Name:
@@ -295,36 +537,118 @@ export default function AdminPage() {
                     type="text"
                     name="name"
                     value={editUser.name}
-                    onChange={handleEditChange}
+                    onChange={e => setEditUser(prev => prev ? { ...prev, name: e.target.value } : null)}
                   />
                 </div>
+                {/* Role */}
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
-                    Role:
-                  </label>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">Role:</label>
                   <select
                     className="w-full border px-3 py-2 rounded-lg outline-none focus:ring-2 focus:ring-blue-300"
                     name="role"
                     value={editUser.role}
-                    onChange={handleEditChange}
+                    onChange={e => setEditUser(prev => prev ? { ...prev, role: e.target.value as Role } : null)}
                   >
                     {allRoles.map((role) => (
-                      <option key={role} value={role}>{role}</option>
+                      <option key={role} value={role}>{roleLabels[role]}</option>
                     ))}
                   </select>
                 </div>
+                {/* Scientist assignment */}
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
-                    Password:
-                  </label>
-                  <input
-                    className="w-full border px-3 py-2 rounded-lg outline-none focus:ring-2 focus:ring-blue-300"
-                    type="text"
-                    name="password"
-                    value={editUser.password}
-                    onChange={handleEditChange}
-                  />
+                  <label className="block text-sm font-medium text-gray-700 mb-1">Scientist:</label>
+                  <select
+                    className="w-full border px-3 py-2 rounded-lg"
+                    value={editUser.scientist?.id ?? ""}
+                    onChange={e => handleAssignScientist(Number(e.target.value))}
+                  >
+                    <option value={""}>None</option>
+                    {allScientists.map(sc => (
+                      <option key={sc.id} value={sc.id}>{sc.name}</option>
+                    ))}
+                  </select>
+                  {/* Show all scientist data */}
+                    {editUser.scientist && (
+                    <div className="flex items-center gap-2 py-6">
+                    <label className="block text-sm font-medium text-gray-700">Scientist:</label>
+                    <div className="flex-1">
+                        {editUser.scientist
+                        ? `${editUser.scientist.name} (${editUser.scientist.level})`
+                        : <span className="text-gray-400">None</span>
+                        }
                     </div>
+                    <button
+                        type="button"
+                        className="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 shadow text-sm"
+                        onClick={() => setShowAssignmentPanel("scientist")}
+                    >
+                        Edit Scientist
+                    </button>
+                    </div>
+                    )}
+                </div>
+                {/* Password - eye toggle only (view, not edit) */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">Password:</label>
+                  <div className="flex items-center gap-2">
+                    <input
+                      className="w-full border px-3 py-2 rounded-lg outline-none bg-gray-100"
+                      type={showPassword ? "text" : "password"}
+                      value={editUser.passwordHash || ""}
+                      readOnly
+                      autoComplete="off"
+                    />
+                    <button
+                      type="button"
+                      title={showPassword ? "Hide password" : "Show password"}
+                      className="text-gray-500 hover:text-gray-800"
+                      onClick={() => setShowPassword(s => !s)}
+                    >
+                      {showPassword ? (
+                        <svg className="h-5 w-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-5.523 0-10-4.477-10-10a9.953 9.953 0 013.37-7.53M4.22 4.22l15.56 15.56M19.77 19.77L4.22 4.22M19.77 19.77l.01-.01M21 12a9.953 9.953 0 01-3.37 7.53M4.22 19.77l.01-.01" />
+                        </svg>
+                      ) : (
+                        <svg className="h-5 w-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0zm6 0C21 7.03 16.97 3 12 3S3 7.03 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9z" />
+                        </svg>
+                      )}
+                    </button>
+                  </div>
+                </div>
+                {/* Trigger artefact assignment panel */}
+                <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Purchased Artefacts:</label>
+                <button
+                    type="button"
+                    className="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 shadow"
+                    onClick={() => setShowAssignmentPanel('artefact')}
+                >
+                    Assign Artefacts
+                </button>
+                <div className="mt-1 text-xs text-gray-500">
+                    Currently assigned: {editUser.purchasedArtefacts.map(a => a.type).join(", ") || "None"}
+                </div>
+                </div>
+
+                {/* Trigger earthquake assignment panel */}
+                <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Scientist's Earthquakes:</label>
+                <button
+                    type="button"
+                    className="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 shadow"
+                    onClick={() => setShowAssignmentPanel('earthquake')}
+                    disabled={!editUser.scientist}
+                >
+                    Assign Earthquakes
+                </button>
+                <div className="mt-1 text-xs text-gray-500">
+                    {editUser.scientist
+                    ? "Current: " + (editUser.scientist.earthquakes.map(e => e.location).join(", ") || "None")
+                    : "Assign a scientist to manage earthquakes"}
+                </div>
+                </div>
+                
                 <div className="flex gap-2 justify-end pt-6">
                   <button
                     type="button"
@@ -336,11 +660,9 @@ export default function AdminPage() {
                   <button
                     type="submit"
                     className={`px-4 py-2 rounded-lg font-semibold transition
-                      ${isEditChanged
-                        ? "bg-blue-600 hover:bg-blue-700 text-white shadow"
-                        : "bg-gray-300 text-gray-500 cursor-not-allowed"
-                      }`}
-                    disabled={!isEditChanged}
+                      bg-blue-600 hover:bg-blue-700 text-white shadow
+                    `}
+                    onClick={handleUpdate}
                   >
                     Update
                   </button>
@@ -352,6 +674,166 @@ export default function AdminPage() {
               Select a user...
             </div>
           )}
+        
+        {/* Right-side assignment panel */}
+        {showAssignmentPanel && editUser &&(
+        <div className="fixed z-50 right-6 top-6 bottom-6 w-96 rounded-3xl bg-white shadow-2xl border border-gray-200 flex flex-col">
+            <div className="flex justify-between items-center p-4 border-b rounded-t-3xl">
+            <span className="font-bold text-lg">
+                {showAssignmentPanel === 'artefact' ? 'Assign Artefacts' : 'Assign Earthquakes'}
+            </span>
+            <button
+                onClick={() => setShowAssignmentPanel(null)}
+                className="text-gray-500 hover:text-black text-xl px-3 py-1"
+                title="Close"
+            >
+                &times;
+            </button>
+            </div>
+            <div className="flex-1 overflow-y-auto p-4">
+            {showAssignmentPanel === 'artefact' && (
+                <>
+                {allArtefacts.map(a => (
+                    <label key={a.id} className="flex items-center gap-2 mb-2">
+                    <input
+                        type="checkbox"
+                        checked={!!editUser.purchasedArtefacts.find(b => b.id === a.id)}
+                        onChange={e => {
+                        const has = !!editUser.purchasedArtefacts.find(b => b.id === a.id)
+                        setEditUser(prev => prev ? {
+                            ...prev,
+                            purchasedArtefacts: has
+                            ? prev.purchasedArtefacts.filter(b => b.id !== a.id)
+                            : [...prev.purchasedArtefacts, a]
+                        } : null)
+                        }}
+                    />
+                    <span>
+                        {a.type} <span className="text-xs text-gray-400">({a.warehouseArea})</span>
+                    </span>
+                    </label>
+                ))}
+                </>
+            )}
+            {showAssignmentPanel === 'earthquake' && editUser &&(
+                <>
+                {!editUser.scientist
+                    ? <div className="text-sm text-gray-400 mt-8">Assign a scientist first.</div>
+                    : allEarthquakes.map(eq => (
+                    <label key={eq.id} className="flex items-center gap-2 mb-2">
+                    {editUser.scientist &&
+                    <input
+                        type="checkbox"
+                        checked={!!editUser.scientist.earthquakes.find(e => e.id === eq.id)}
+                        onChange={e => {
+                        if (!editUser.scientist) return;
+                        const has = !!editUser.scientist.earthquakes.find(x => x.id === eq.id);
+                        setEditUser(prev => prev ? {
+                            ...prev,
+                            scientist: {
+                            ...prev.scientist!,
+                            earthquakes: has
+                                ? prev.scientist!.earthquakes.filter(x => x.id !== eq.id)
+                                : [...prev.scientist!.earthquakes, eq]
+                            }
+                        } : null)
+                        }}
+                        disabled={!editUser.scientist}
+                    />}
+                    <span>
+                        {eq.location} <span className="text-xs text-gray-400">(Mag {eq.magnitude})</span>
+                    </span>
+                    </label>
+                ))}
+                </>
+            )}
+            {showAssignmentPanel === 'scientist' && editUser.scientist &&(
+                <>
+                    {/* Scientist edit form */}
+                    <div className="space-y-5">
+                    {/* Name */}
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">Name:</label>
+                        <input
+                        className="w-full border px-3 py-2 rounded-lg outline-none"
+                        type="text"
+                        value={editUser.scientist.name}
+                        onChange={e =>
+                            setEditUser(prev => prev && prev.scientist ? {
+                            ...prev,
+                            scientist: { ...prev.scientist, name: e.target.value }
+                            } : prev)
+                        }
+                        />
+                    </div>
+                    {/* Level */}
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">Level:</label>
+                        <select
+                        className="w-full border px-3 py-2 rounded-lg outline-none"
+                        value={editUser.scientist.level}
+                        onChange={e =>
+                            setEditUser(prev => prev && prev.scientist ? {
+                            ...prev,
+                            scientist: { ...prev.scientist, level: e.target.value }
+                            } : prev)
+                        }
+                        >
+                        <option value="SENIOR">Senior</option>
+                        <option value="JUNIOR">Junior</option>
+                        </select>
+                    </div>
+                    {/* Assign/Remove Superior */}
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">Senior Scientist:</label>
+                        <select
+                        className="w-full border px-3 py-2 rounded-lg outline-none"
+                        value={editUser.scientist.superiorId || ""}
+                        onChange={e => {
+                            const val = e.target.value ? Number(e.target.value) : null;
+                            setEditUser(prev => prev && prev.scientist ? {
+                            ...prev,
+                            scientist: { 
+                                ...prev.scientist,
+                                superiorId: val,
+                                superior: val ? allScientists.find(sc => sc.id === val) || null : null
+                            }
+                            } : prev)
+                        }}
+                        >
+                        <option value="">None</option>
+                        {allScientists
+                            .filter(sc => sc.id !== editUser.scientist!.id)
+                            .map(sc => (
+                            <option key={sc.id} value={sc.id}>
+                                {sc.name} ({sc.level})
+                            </option>
+                        ))}
+                        </select>
+                    </div>
+                    {/* Subordinates readonly */}
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">Subordinates:</label>
+                        <div className="text-sm text-gray-700 pl-2">
+                        {editUser.scientist.subordinates.length
+                            ? editUser.scientist.subordinates.map(sc => sc.name).join(", ")
+                            : <span className="text-gray-400">None</span>}
+                        </div>
+                    </div>
+                    </div>
+                </>
+                )}
+            </div>
+            <div className="p-4 border-t flex justify-end rounded-b-3xl">
+            <button
+                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+                onClick={() => setShowAssignmentPanel(null)}
+            >
+                Done
+            </button>
+            </div>
+        </div>
+        )}
       </div>
     </div>
     </div>