Added warehouse EditModal image edit overlay

src/app/warehouse/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 import Image from "next/image";
+import { useRef } from "react";
 import axios from "axios";
 import useSWR from "swr";
 import { Dispatch, SetStateAction, useMemo, useState } from "react";
@@ -373,8 +374,10 @@ function EditModal({ artefact, onClose }: { artefact: ExtendedArtefact; onClose:
 	const [isSold, setIsSold] = useState(artefact.isSold);
 	const [isCollected, setIsCollected] = useState(artefact.isCollected);
 	const [image, setImage] = useState<File | null>(null);
+	const [previewImage, setPreviewImage] = useState<string | null>(null);
 	const [error, setError] = useState("");
 	const [isSubmitting, setIsSubmitting] = useState(false);
+	const fileInputRef = useRef<HTMLInputElement>(null);
 
 	function handleOverlayClick(e: { target: any; currentTarget: any }) {
 		if (e.target === e.currentTarget) {
@@ -432,38 +435,69 @@ function EditModal({ artefact, onClose }: { artefact: ExtendedArtefact; onClose:
 				return;
 			}
 			setImage(file);
+			setPreviewImage(URL.createObjectURL(file));
 		}
 	}
 
+	function handleRemoveImage() {
+		setImage(null);
+		setPreviewImage(null);
+		if (fileInputRef.current) {
+			fileInputRef.current.value = "";
+		}
+	}
+
+	function handleEditClick() {
+		fileInputRef.current?.click();
+	}
+
 	return (
 		<div
 			className="fixed inset-0 bg-neutral-900 bg-opacity-50 flex justify-center items-center z-50"
 			onClick={handleOverlayClick}
 		>
-			<div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6 border border-neutral-300">
+			<div className="bg-white rounded-lg shadow-xl max-w-lg w-full p-6 border border-neutral-300">
 				<h3 className="text-lg font-semibold mb-4 text-neutral-800">Edit Artefact</h3>
 				{error && <p className="text-red-600 text-sm mb-2">{error}</p>}
 				<div className="space-y-2">
-					{artefact.imageName && (
+					{(artefact.imageName || previewImage) && (
-						<div className="mb-2">
+						<div className="mb-2 flex justify-center">
+							<div className="relative group">
 								<Image
-								src={`/artefactImages/${artefact.imageName || "NoImageFound.PNG"}`}
+									src={previewImage || `/artefactImages/${artefact.imageName || "NoImageFound.PNG"}`}
 									alt="Artefact"
 									width={200}
 									height={200}
-								className="object-cover mx-auto rounded-md"
+									className="object-contain rounded-md"
 								/>
+								<div className="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center rounded-md">
+									{previewImage ? (
+										<button onClick={handleRemoveImage} className="text-white text-2xl" aria-label="Remove Image">
+											✕
+										</button>
+									) : (
+										<button onClick={handleEditClick} className="text-white text-2xl" aria-label="Edit Image">
+											✎
+										</button>
+									)}
+								</div>
+							</div>
 						</div>
 					)}
+					<div>
 						<input
 							type="file"
 							accept="image/jpeg,image/png"
 							onChange={handleImageChange}
-						className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
+							className="hidden"
 							aria-label="Artefact Image"
 							disabled={isSubmitting}
+							ref={fileInputRef}
 						/>
+					</div>
 					<p className="text-sm text-neutral-600">Created At: {new Date(artefact.createdAt).toLocaleDateString("en-GB")}</p>
+					<div>
+						<label className="text-sm font-medium text-neutral-600">Name</label>
 						<input
 							type="text"
 							placeholder="Name"
@@ -473,6 +507,9 @@ function EditModal({ artefact, onClose }: { artefact: ExtendedArtefact; onClose:
 							aria-label="Artefact Name"
 							disabled={isSubmitting}
 						/>
+					</div>
+					<div>
+						<label className="text-sm font-medium text-neutral-600">Type</label>
 						<input
 							type="text"
 							placeholder="Type (e.g., Lava, Tephra, Ash)"
@@ -482,6 +519,9 @@ function EditModal({ artefact, onClose }: { artefact: ExtendedArtefact; onClose:
 							aria-label="Artefact Type"
 							disabled={isSubmitting}
 						/>
+					</div>
+					<div>
+						<label className="text-sm font-medium text-neutral-600">Description</label>
 						<textarea
 							placeholder="Description"
 							value={description}
@@ -490,6 +530,9 @@ function EditModal({ artefact, onClose }: { artefact: ExtendedArtefact; onClose:
 							aria-label="Artefact Description"
 							disabled={isSubmitting}
 						/>
+					</div>
+					<div>
+						<label className="text-sm font-medium text-neutral-600">Earthquake Code</label>
 						<input
 							type="text"
 							placeholder="Earthquake Code (e.g., EC-3.9-Belgium-05467)"
@@ -499,6 +542,9 @@ function EditModal({ artefact, onClose }: { artefact: ExtendedArtefact; onClose:
 							aria-label="Earthquake ID"
 							disabled={isSubmitting}
 						/>
+					</div>
+					<div>
+						<label className="text-sm font-medium text-neutral-600">Warehouse Area</label>
 						<input
 							type="text"
 							placeholder="Warehouse Area (e.g., A-12)"
@@ -508,6 +554,7 @@ function EditModal({ artefact, onClose }: { artefact: ExtendedArtefact; onClose:
 							aria-label="Storage Location"
 							disabled={isSubmitting}
 						/>
+					</div>
 					<div className="flex items-center gap-2">
 						<input
 							type="checkbox"