feat: Add Leaflet map integration and project coordinates handling

- Updated package.json to include dependencies for Leaflet and Playwright testing.
- Added new images for Leaflet markers and layers.
- Created scripts for generating test data with project coordinates.
- Enhanced ProjectViewPage to display project coordinates and integrated ProjectMap component.
- Modified ProjectForm to include coordinates input field.
- Implemented CustomWMTSMap and EnhancedLeafletMap components for improved map functionality.
- Created ProjectMap component to dynamically render project location on the map.
- Added mapLayers configuration for various base layers including Polish Geoportal.
- Implemented WMTS capabilities handling for dynamic layer loading.
- Updated database initialization to include coordinates column in projects table.
- Modified project creation and update functions to handle coordinates.
- Added utility functions for formatting project status and deadlines.

src/components/ui/ProjectMap.js

@@ -0,0 +1,65 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import dynamic from 'next/dynamic';
+
+// Dynamically import the map component to avoid SSR issues
+const DynamicMap = dynamic(() => import('./LeafletMap'), {
+  ssr: false,
+  loading: () => <div className="w-full h-64 bg-gray-100 animate-pulse rounded-lg flex items-center justify-center">
+    <span className="text-gray-500">Loading map...</span>
+  </div>
+});
+
+export default function ProjectMap({ 
+  coordinates, 
+  projectName, 
+  showLayerControl = true,
+  mapHeight = 'h-64',
+  defaultLayer = 'OpenStreetMap'
+}) {
+  const [coords, setCoords] = useState(null);
+
+  useEffect(() => {
+    if (coordinates) {
+      // Parse coordinates string (e.g., "49.622958,20.629562")
+      const [lat, lng] = coordinates.split(',').map(coord => parseFloat(coord.trim()));
+      
+      if (!isNaN(lat) && !isNaN(lng)) {
+        setCoords({ lat, lng });
+      }
+    }
+  }, [coordinates]);
+
+  if (!coords) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-medium text-gray-700">Project Location</h3>
+        {showLayerControl && (
+          <div className="text-xs text-gray-500">
+            Use the layer control (📚) to switch map views
+          </div>
+        )}
+      </div>
+      <div className={`w-full ${mapHeight} rounded-lg overflow-hidden border border-gray-200`}>
+        <DynamicMap 
+          center={[coords.lat, coords.lng]} 
+          zoom={15}
+          markers={[{
+            position: [coords.lat, coords.lng],
+            popup: projectName || 'Project Location'
+          }]}
+          showLayerControl={showLayerControl}
+          defaultLayer={defaultLayer}
+        />
+      </div>
+      <p className="text-xs text-gray-500">
+        Coordinates: {coords.lat.toFixed(6)}, {coords.lng.toFixed(6)}
+      </p>
+    </div>
+  );
+}