feat: add PhotoOverlay component for visualizing and editing impact coordinates

backendia/dashboard/src/components/PhotoOverlay.tsx

@@ -22,12 +22,12 @@ interface PhotoOverlayProps {
   onImpactsChange?: (impacts: Impact[]) => void;
 }
 
-export default function PhotoOverlay({ 
-  imageUrl, 
-  impacts, 
-  targetCorners, 
+export default function PhotoOverlay({
+  imageUrl,
+  impacts,
+  targetCorners,
   isEditing = false,
-  onImpactsChange 
+  onImpactsChange
 }: PhotoOverlayProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
@@ -95,8 +95,8 @@ export default function PhotoOverlay({
   };
 
   return (
-    <div 
-      ref={containerRef} 
+    <div
+      ref={containerRef}
       className={`relative w-full flex items-center justify-center bg-slate-900 rounded-2xl overflow-hidden border border-slate-800 shadow-2xl min-h-[400px] ${isEditing ? 'cursor-crosshair' : ''}`}
       onClick={handleImageClick}
       onMouseMove={handleMouseMove}
@@ -104,9 +104,9 @@ export default function PhotoOverlay({
       onMouseLeave={() => setDragIndex(null)}
     >
       {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img 
-        src={imageUrl} 
-        alt="Target Analysis" 
+      <img
+        src={imageUrl}
+        alt="Target Analysis"
         className="max-w-full max-h-[80vh] object-contain select-none"
         draggable={false}
         onLoad={(e) => {
@@ -114,9 +114,9 @@ export default function PhotoOverlay({
           setDimensions({ width: img.clientWidth, height: img.clientHeight });
         }}
       />
-      
+
       {dimensions.width > 0 && (
-        <svg 
+        <svg
           className="absolute pointer-events-none"
           viewBox={`0 0 ${dimensions.width} ${dimensions.height}`}
           style={{ width: dimensions.width, height: dimensions.height }}
@@ -172,7 +172,7 @@ export default function PhotoOverlay({
           ))}
         </svg>
       )}
-      
+
       {isEditing && (
         <div className="absolute bottom-4 right-4 bg-slate-950/80 backdrop-blur-md px-3 py-1.5 rounded-full text-[10px] font-bold text-indigo-400 border border-indigo-500/30">
           MODE ÉDITION : CLIC POUR AJOUTER • DRAG POUR DÉPLACER • CLIC DROIT POUR SUPPRIMER