From af133c1d5f61a58c060231065b4f0a584d506f5d Mon Sep 17 00:00:00 2001
From: RKWojs <rkwojs@gmail.com>
Date: Tue, 24 Jun 2025 13:41:47 +0200
Subject: [PATCH] feat: Add tool panel with multiple map interaction tools in
 ProjectsMapPage

---
 src/app/projects/map/page.js        | 154 +++++++++++++++++++++++++++-
 src/app/projects/map/page_backup.js |   0
 2 files changed, 152 insertions(+), 2 deletions(-)
 create mode 100644 src/app/projects/map/page_backup.js

diff --git a/src/app/projects/map/page.js b/src/app/projects/map/page.js
index abe74cf..79a23a2 100644
--- a/src/app/projects/map/page.js
+++ b/src/app/projects/map/page.js
@@ -29,10 +29,10 @@ export default function ProjectsMapPage() {
 		in_progress_design: true,
 		in_progress_construction: true,
 		fulfilled: true,
-	});
-	const [activeBaseLayer, setActiveBaseLayer] = useState("Polish Geoportal Orthophoto");
+	});	const [activeBaseLayer, setActiveBaseLayer] = useState("Polish Geoportal Orthophoto");
 	const [activeOverlays, setActiveOverlays] = useState([]);
 	const [showLayerPanel, setShowLayerPanel] = useState(true);
+	const [currentTool, setCurrentTool] = useState("move"); // Current map tool
 
 	// Status configuration with colors and labels
 	const statusConfig = {
@@ -389,6 +389,156 @@ export default function ProjectsMapPage() {
 						title="Zoom Out"
 					>
 						−
+					</button>				</div>
+			</div>			{/* Tool Panel - Below Zoom Controls */}
+			<div className="absolute top-48 left-4 z-[1000]">				<div className="bg-white/95 backdrop-blur-sm rounded-lg shadow-lg border border-gray-200 flex flex-col">					{/* Move Tool */}
+					<button 
+						className={`p-3 transition-colors duration-200 border-b border-gray-200 ${
+							currentTool === "move" 
+								? "bg-blue-100 text-blue-700" 
+								: "text-gray-700 hover:bg-gray-50"
+						}`}
+						onClick={() => setCurrentTool("move")}
+						title="Move Tool (Pan Map)"
+					>
+						<svg 
+							className="w-5 h-5" 
+							fill="currentColor" 
+							viewBox="0 0 512 512"
+						>
+							<path d="M256 0c-25.3 0-47.2 14.7-57.6 36c-7-2.6-14.5-4-22.4-4c-35.3 0-64 28.7-64 64l0 165.5-2.7-2.7c-25-25-65.5-25-90.5 0s-25 65.5 0 90.5L106.5 437c48 48 113.1 75 181 75l8.5 0 8 0c1.5 0 3-.1 4.5-.4c91.7-6.2 165-79.4 171.1-171.1c.3-1.5 .4-3 .4-4.5l0-176c0-35.3-28.7-64-64-64c-5.5 0-10.9 .7-16 2l0-2c0-35.3-28.7-64-64-64c-7.9 0-15.4 1.4-22.4 4C303.2 14.7 281.3 0 256 0zM240 96.1l0-.1 0-32c0-8.8 7.2-16 16-16s16 7.2 16 16l0 31.9 0 .1 0 136c0 13.3 10.7 24 24 24s24-10.7 24-24l0-136c0 0 0 0 0-.1c0-8.8 7.2-16 16-16s16 7.2 16 16l0 55.9c0 0 0 .1 0 .1l0 80c0 13.3 10.7 24 24 24s24-10.7 24-24l0-71.9c0 0 0-.1 0-.1c0-8.8 7.2-16 16-16s16 7.2 16 16l0 172.9c-.1 .6-.1 1.3-.2 1.9c-3.4 69.7-59.3 125.6-129 129c-.6 0-1.3 .1-1.9 .2l-4.9 0-8.5 0c-55.2 0-108.1-21.9-147.1-60.9L52.7 315.3c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L119 336.4c6.9 6.9 17.2 8.9 26.2 5.2s14.8-12.5 14.8-22.2L160 96c0-8.8 7.2-16 16-16c8.8 0 16 7.1 16 15.9L192 232c0 13.3 10.7 24 24 24s24-10.7 24-24l0-135.9z"/>
+						</svg>
+					</button>
+
+					{/* Select Tool */}
+					<button 
+						className={`p-3 transition-colors duration-200 border-b border-gray-200 ${
+							currentTool === "select" 
+								? "bg-blue-100 text-blue-700" 
+								: "text-gray-700 hover:bg-gray-50"
+						}`}
+						onClick={() => setCurrentTool("select")}
+						title="Select Tool"
+					>
+						<svg 
+							className="w-5 h-5" 
+							fill="none" 
+							stroke="currentColor" 
+							viewBox="0 0 24 24"
+						>
+							<path 
+								strokeLinecap="round" 
+								strokeLinejoin="round" 
+								strokeWidth={2} 
+								d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" 
+							/>
+						</svg>
+					</button>
+
+					{/* Measure Tool */}
+					<button 
+						className={`p-3 transition-colors duration-200 border-b border-gray-200 ${
+							currentTool === "measure" 
+								? "bg-blue-100 text-blue-700" 
+								: "text-gray-700 hover:bg-gray-50"
+						}`}
+						onClick={() => setCurrentTool("measure")}
+						title="Measure Distance"
+					>
+						<svg 
+							className="w-5 h-5" 
+							fill="none" 
+							stroke="currentColor" 
+							viewBox="0 0 24 24"
+						>
+							<path 
+								strokeLinecap="round" 
+								strokeLinejoin="round" 
+								strokeWidth={2} 
+								d="M7 21l10-10M7 21H3v-4l10-10 4 4M7 21l4-4M17 7l4-4M17 7l-4-4M17 7l-4 4" 
+							/>
+						</svg>
+					</button>
+
+					{/* Draw Tool */}
+					<button 
+						className={`p-3 transition-colors duration-200 border-b border-gray-200 ${
+							currentTool === "draw" 
+								? "bg-blue-100 text-blue-700" 
+								: "text-gray-700 hover:bg-gray-50"
+						}`}
+						onClick={() => setCurrentTool("draw")}
+						title="Draw/Markup"
+					>
+						<svg 
+							className="w-5 h-5" 
+							fill="none" 
+							stroke="currentColor" 
+							viewBox="0 0 24 24"
+						>
+							<path 
+								strokeLinecap="round" 
+								strokeLinejoin="round" 
+								strokeWidth={2} 
+								d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" 
+							/>
+						</svg>
+					</button>
+
+					{/* Pin/Marker Tool */}
+					<button 
+						className={`p-3 transition-colors duration-200 border-b border-gray-200 ${
+							currentTool === "pin" 
+								? "bg-blue-100 text-blue-700" 
+								: "text-gray-700 hover:bg-gray-50"
+						}`}
+						onClick={() => setCurrentTool("pin")}
+						title="Add Pin/Marker"
+					>
+						<svg 
+							className="w-5 h-5" 
+							fill="none" 
+							stroke="currentColor" 
+							viewBox="0 0 24 24"
+						>
+							<path 
+								strokeLinecap="round" 
+								strokeLinejoin="round" 
+								strokeWidth={2} 
+								d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" 
+							/>
+							<path 
+								strokeLinecap="round" 
+								strokeLinejoin="round" 
+								strokeWidth={2} 
+								d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" 
+							/>
+						</svg>
+					</button>
+
+					{/* Area Tool */}
+					<button 
+						className={`p-3 transition-colors duration-200 ${
+							currentTool === "area" 
+								? "bg-blue-100 text-blue-700" 
+								: "text-gray-700 hover:bg-gray-50"
+						}`}
+						onClick={() => setCurrentTool("area")}
+						title="Measure Area"
+					>
+						<svg 
+							className="w-5 h-5" 
+							fill="none" 
+							stroke="currentColor" 
+							viewBox="0 0 24 24"
+						>
+							<path 
+								strokeLinecap="round" 
+								strokeLinejoin="round" 
+								strokeWidth={2} 
+								d="M4 8V6a2 2 0 012-2h2M4 16v2a2 2 0 002 2h2m8-16h2a2 2 0 012 2v2m-4 12h2a2 2 0 002-2v-2" 
+							/>
+						</svg>
 					</button>
 				</div>
 			</div>
diff --git a/src/app/projects/map/page_backup.js b/src/app/projects/map/page_backup.js
new file mode 100644
index 0000000..e69de29