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,9 +435,22 @@ 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"
@@ -444,15 +460,28 @@ function EditModal({ artefact, onClose }: { artefact: ExtendedArtefact; onClose:
 				<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 && (
-						<div className="mb-2">
-							<Image
-								src={`/artefactImages/${artefact.imageName || "NoImageFound.PNG"}`}
-								alt="Artefact"
-								width={200}
-								height={200}
-								className="object-cover mx-auto rounded-md"
-							/>
+					{(artefact.imageName || previewImage) && (
+						<div className="mb-2 flex justify-center">
+							<div className="relative group">
+								<Image
+									src={previewImage || `/artefactImages/${artefact.imageName || "NoImageFound.PNG"}`}
+									alt="Artefact"
+									width={200}
+									height={200}
+									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>
@@ -460,9 +489,10 @@ function EditModal({ artefact, onClose }: { artefact: ExtendedArtefact; onClose:
 							type="file"
 							accept="image/jpeg,image/png"
 							onChange={handleImageChange}
-							className="w-full p-1 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>