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.

docs/MAP_LAYERS.md

@@ -0,0 +1,197 @@
+# Map Layers Configuration
+
+This document explains how to add and configure map layers using proper WMTS GetCapabilities discovery.
+
+## Current Implementation
+
+The map system supports multiple base layers using Leaflet and React-Leaflet with proper WMTS service discovery via GetCapabilities requests.
+
+### File Structure
+- **`ProjectMap.js`**: Main map component used in the project pages
+- **`LeafletMap.js`**: Core Leaflet map component with layer support
+- **`mapLayers.js`**: Configuration file for all available layers
+- **`wmtsCapabilities.js`**: WMTS service discovery and configuration utilities
+
+## Using GetCapabilities for WMTS Services
+
+Instead of hardcoding WMTS URLs, we use the standard OGC approach:
+
+### 1. Query Service Capabilities
+```javascript
+// Get capabilities for Polish Geoportal Orthophoto
+const capabilitiesUrl = "https://mapy.geoportal.gov.pl/wss/service/PZGIK/ORTO/WMTS/StandardResolution?Service=WMTS&Request=GetCapabilities";
+```
+
+### 2. Parse Available Layers
+The GetCapabilities response provides:
+- Available layers and their identifiers
+- Supported coordinate reference systems (TileMatrixSets)
+- Available formats (image/png, image/jpeg, etc.)
+- Supported styles
+- Zoom level ranges
+- Service metadata
+
+### 3. Build Proper WMTS URLs
+```javascript
+// Standard WMTS RESTful URL pattern
+const tileUrl = `${baseUrl}/tile/{version}/{layer}/{style}/{tilematrixSet}/{z}/{y}/{x}.{format}`;
+```
+
+### Base Layers (Mutually Exclusive)
+- **OpenStreetMap**: Standard street map
+- **Polish Geoportal Orthophoto**: Aerial imagery from Polish national geoportal
+- **Polish Land Records Integration**: Land records and cadastral data from GUGiK
+- **Satellite (Esri)**: High-resolution satellite imagery
+- **Topographic**: Topographic style map
+
+### Layer Control
+Users can switch between layers using the layer control widget (📚 icon) in the top-right corner of the map.
+
+## Adding New Layers
+
+### 1. Standard Tile Layers (XYZ)
+
+To add a new tile layer, edit `src/components/ui/mapLayers.js`:
+
+```javascript
+// Add to the base array
+{
+  name: "Your Layer Name",
+  attribution: '&copy; <a href="https://example.com">Provider</a>',
+  url: "https://example.com/{z}/{x}/{y}.png",
+  maxZoom: 19
+}
+```
+
+### 2. WMTS Layers
+
+For WMTS (Web Map Tile Service) layers like the Polish Geoportal:
+
+```javascript
+{
+  name: "WMTS Layer",
+  attribution: '&copy; <a href="https://provider.com">Provider</a>',
+  url: "https://provider.com/wmts/service/Layer/{z}/{y}/{x}.jpg",
+  maxZoom: 19,
+  tileSize: 256
+}
+```
+
+### 3. WMS Overlay Layers
+
+For WMS (Web Map Service) overlay layers:
+
+```javascript
+// Add to the overlay array in mapLayers.js
+{
+  name: "Overlay Layer",
+  attribution: '&copy; <a href="https://provider.com">Provider</a>',
+  url: "https://provider.com/wms",
+  format: "image/png",
+  transparent: true,
+  layers: "layer_name"
+}
+```
+
+## Discovering New WMTS Services
+
+### Step 1: Find the GetCapabilities URL
+```
+https://your-wmts-service.com/wmts?Service=WMTS&Request=GetCapabilities
+```
+
+### Step 2: Analyze the Response
+Look for these key elements in the XML:
+- `<Layer>` elements with their `<ows:Identifier>`
+- `<TileMatrixSet>` supported coordinate systems
+- `<Format>` supported image formats
+- `<Style>` available styling options
+
+### Step 3: Build the Configuration
+```javascript
+{
+  name: "Your Service Name",
+  attribution: '&copy; <a href="https://provider.com">Provider</a>',
+  url: buildWMTSTileUrl({
+    baseUrl: "https://your-wmts-service.com/wmts",
+    layer: "LayerIdentifier", // from GetCapabilities
+    style: "default",
+    tilematrixSet: "EPSG:3857", // or EPSG:2180 for Polish services
+    format: "image/png"
+  }),
+  maxZoom: 19
+}
+```
+
+### Polish Services Discovery
+
+**Polish Geoportal Orthophoto:**
+```
+https://mapy.geoportal.gov.pl/wss/service/PZGIK/ORTO/WMTS/StandardResolution?Service=WMTS&Request=GetCapabilities
+```
+
+**GUGiK Land Records** (Note: This is actually WMS, not WMTS):
+```
+https://integracja.gugik.gov.pl/cgi-bin/KrajowaIntegracjaEwidencjiGruntow?Service=WMS&Request=GetCapabilities
+```
+
+## Usage Examples
+
+### Basic Map with Default Layers
+```jsx
+<ProjectMap 
+  coordinates="50.0647,19.9450" 
+  projectName="Sample Project" 
+/>
+```
+
+### Map with Custom Default Layer
+```jsx
+<ProjectMap 
+  coordinates="50.0647,19.9450" 
+  projectName="Sample Project"
+  defaultLayer="Polish Geoportal Orthophoto"
+  showLayerControl={true}
+  mapHeight="h-96"
+/>
+```
+
+### Map without Layer Control
+```jsx
+<ProjectMap 
+  coordinates="50.0647,19.9450" 
+  projectName="Sample Project"
+  showLayerControl={false}
+/>
+```
+
+## Technical Notes
+
+1. **WMTS vs XYZ**: WMTS follows OGC standards but can often be accessed via XYZ tile patterns
+2. **CRS Support**: Polish layers use EPSG:2180, while international layers use EPSG:3857 (Web Mercator)
+3. **Attribution**: Always include proper attribution for map data providers
+4. **CORS**: Some services may require proxy configuration for CORS issues
+
+## Adding More Polish Services
+
+To add more services from the Polish National Geoportal:
+
+1. Visit: https://www.geoportal.gov.pl/
+2. Check their WMS/WMTS services documentation
+3. Test the service URLs in the browser
+4. Add to the layer configuration following the patterns above
+
+## Example: Adding a New GUGiK WMTS Layer
+
+```javascript
+// In mapLayers.js base array
+{
+  name: "Polish Land Records",
+  attribution: '&copy; <a href="https://www.gugik.gov.pl/">GUGiK</a>',
+  url: "https://integracja.gugik.gov.pl/cgi-bin/KrajowaIntegracjaEwidencjiGruntow/wmts.cgi?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=EGiB&STYLE=default&TILEMATRIXSET=EPSG:2180&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image/png",
+  maxZoom: 19,
+  tileSize: 256
+}
+```
+
+**Important**: Polish services use EPSG:2180 coordinate system, not the standard Web Mercator EPSG:3857.

package.json

@@ -6,19 +6,34 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
     "better-sqlite3": "^11.10.0",
     "date-fns": "^4.1.0",
+    "leaflet": "^1.9.4",
     "next": "15.1.8",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-leaflet": "^5.0.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@playwright/test": "^1.40.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.0",
+    "@types/leaflet": "^1.9.18",
     "eslint": "^9",
     "eslint-config-next": "15.1.8",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8",
     "tailwindcss": "^3.4.1"
   }

scripts/create-additional-test-data.js

@@ -0,0 +1,21 @@
+import db from '../src/lib/db.js';
+
+// Create another test project with coordinates in a different location
+const project = db.prepare(`
+  INSERT INTO projects (
+    contract_id, project_name, project_number, address, city, coordinates, 
+    project_type, project_status
+  ) VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+`).run(
+  3, // Using the existing contract
+  'Test Project in Warsaw',
+  '2/TEST/2025',
+  'Warsaw Center, Poland',
+  'Warsaw',
+  '52.2297,21.0122', // Warsaw coordinates
+  'construction',
+  'in_progress_construction'
+);
+
+console.log('Additional test project created!');
+console.log('Project ID:', project.lastInsertRowid);

scripts/create-test-data.js

@@ -0,0 +1,32 @@
+import db from '../src/lib/db.js';
+import initializeDatabase from '../src/lib/init-db.js';
+
+// Initialize the database
+initializeDatabase();
+
+// Create a test contract
+const contract = db.prepare(`
+  INSERT INTO contracts (contract_number, contract_name, customer, investor, date_signed, finish_date)
+  VALUES (?, ?, ?, ?, ?, ?)
+`).run('TEST/2025', 'Test Contract', 'Test Customer', 'Test Investor', '2025-01-01', '2025-12-31');
+
+// Create a test project with coordinates
+const project = db.prepare(`
+  INSERT INTO projects (
+    contract_id, project_name, project_number, address, city, coordinates, 
+    project_type, project_status
+  ) VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+`).run(
+  contract.lastInsertRowid,
+  'Test Project with Location',
+  '1/TEST/2025',
+  'Test Address, Krakow',
+  'Krakow',
+  '50.0647,19.9450', // Krakow coordinates
+  'design',
+  'registered'
+);
+
+console.log('Test data created successfully!');
+console.log('Contract ID:', contract.lastInsertRowid);
+console.log('Project ID:', project.lastInsertRowid);

src/app/projects/[id]/page.js

@@ -12,15 +12,13 @@ import { differenceInCalendarDays, parseISO } from "date-fns";
 import PageContainer from "@/components/ui/PageContainer";
 import PageHeader from "@/components/ui/PageHeader";
 import ProjectStatusDropdown from "@/components/ProjectStatusDropdown";
+import ProjectMap from "@/components/ui/ProjectMap";
 
-export default function ProjectViewPage({ params }) {
+export default async function ProjectViewPage({ params }) {
-	const { id } = params;
+	const { id } = await params;
 	const project = getProjectWithContract(id);
 	const notes = getNotesForProject(id);
-	const daysRemaining = differenceInCalendarDays(
+	
-		parseISO(project.finish_date),
-		new Date()
-	);
 	if (!project) {
 		return (
 			<PageContainer>
@@ -36,6 +34,10 @@ export default function ProjectViewPage({ params }) {
 		);
 	}
 
+	const daysRemaining = project.finish_date 
+		? differenceInCalendarDays(parseISO(project.finish_date), new Date())
+		: null;
+
 	const getDeadlineVariant = (days) => {
 		if (days < 0) return "danger";
 		if (days <= 7) return "warning";
@@ -130,11 +132,15 @@ export default function ProjectViewPage({ params }) {
 								</span>
 								<p className="text-gray-900">{project.investment_number}</p>
 							</div>
-						</div>
+						</div>						<div>
-						<div>
 							<span className="text-sm font-medium text-gray-500">Contact</span>
 							<p className="text-gray-900">{project.contact}</p>
+						</div>						{project.coordinates && (
+							<div>
+								<span className="text-sm font-medium text-gray-500">Coordinates</span>
+								<p className="text-gray-900">{project.coordinates}</p>
 							</div>
+						)}
 						{project.notes && (
 							<div>
 								<span className="text-sm font-medium text-gray-500">Notes</span>
@@ -207,9 +213,26 @@ export default function ProjectViewPage({ params }) {
 							</span>
 							<p className="text-gray-900">{project.investor}</p>
 						</div>
+					</CardContent>				</Card>{" "}
+			</div>			{/* Project Location Map */}
+			{project.coordinates && (
+				<Card>
+					<CardHeader>
+						<h2 className="text-xl font-semibold text-gray-900">
+							Project Location
+						</h2>
+					</CardHeader>
+					<CardContent>
+						<ProjectMap 
+							coordinates={project.coordinates} 
+							projectName={project.project_name}
+							showLayerControl={true}
+							mapHeight="h-80"
+							defaultLayer="Polish Geoportal Orthophoto"
+						/>
 					</CardContent>
-				</Card>{" "}
+				</Card>
-			</div>
+			)}
 
 			<ProjectTasksSection projectId={id} />
 

src/components/ProjectForm.js

@@ -15,8 +15,8 @@ export default function ProjectForm({ initialData = null }) {
 		investment_number: "",
 		finish_date: "",
 		wp: "",
-		contact: "",
+		contact: "",		notes: "",
-		notes: "",
+		coordinates: "",
 		project_type: initialData?.project_type || "design",
 		// project_status is not included in the form for creation or editing
 		...initialData,
@@ -94,8 +94,7 @@ export default function ProjectForm({ initialData = null }) {
 				</select>
 			</div>
 
-			{/* Other fields */}
+			{/* Other fields */}			{[
-			{[
 				["project_name", "Nazwa projektu"],
 				["address", "Lokalizacja"],
 				["plot", "Działka"],
@@ -104,8 +103,8 @@ export default function ProjectForm({ initialData = null }) {
 				["city", "Miejscowość"],
 				["investment_number", "Numer inwestycjny"],
 				["finish_date", "Termin realizacji"],
-				["wp", "WP"],
+				["wp", "WP"],				["contact", "Dane kontaktowe"],
-				["contact", "Dane kontaktowe"],
+				["coordinates", "Coordinates"],
 				["notes", "Notatki"],
 			].map(([name, label]) => (
 				<div key={name}>
@@ -116,6 +115,7 @@ export default function ProjectForm({ initialData = null }) {
 						value={form[name] || ""}
 						onChange={handleChange}
 						className="border p-2 w-full"
+						placeholder={name === "coordinates" ? "e.g., 49.622958,20.629562" : ""}
 					/>
 				</div>
 			))}

src/components/ui/CustomWMTSMap.js

@@ -0,0 +1,80 @@
+"use client";
+
+import { MapContainer, TileLayer, Marker, Popup, LayersControl } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+import { useEffect } from 'react';
+
+// Custom WMTS layer component using Leaflet directly
+function CustomWMTSLayer({ url, layer, style = 'default', tilematrixSet = 'EPSG:3857', format = 'image/jpeg' }) {
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const L = require('leaflet');
+      
+      // Create WMTS layer using Leaflet's built-in capabilities
+      const wmtsUrl = `${url}/tile/1.0.0/${layer}/${style}/${tilematrixSet}/{z}/{y}/{x}.${format.split('/')[1]}`;
+      
+      return () => {
+        // Cleanup if needed
+      };
+    }
+  }, [url, layer, style, tilematrixSet, format]);
+
+  const wmtsUrl = `${url}/tile/1.0.0/${layer}/${style}/${tilematrixSet}/{z}/{y}/{x}.${format.split('/')[1]}`;
+  
+  return (
+    <TileLayer
+      url={wmtsUrl}
+      attribution='&copy; <a href="https://www.geoportal.gov.pl/">Geoportal</a>'
+      maxZoom={19}
+    />
+  );
+}
+
+// Example map with custom WMTS integration
+export default function CustomWMTSMap({ center, zoom = 13, markers = [] }) {
+  const { BaseLayer } = LayersControl;
+
+  return (
+    <MapContainer 
+      center={center} 
+      zoom={zoom} 
+      style={{ height: '100%', width: '100%' }}
+      scrollWheelZoom={true}
+    >
+      <LayersControl position="topright">
+        <BaseLayer checked name="OpenStreetMap">
+          <TileLayer
+            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          />
+        </BaseLayer>
+        
+        <BaseLayer name="Polish Geoportal ORTO (WMTS)">
+          <CustomWMTSLayer
+            url="https://mapy.geoportal.gov.pl/wss/service/PZGIK/ORTO/WMTS/StandardResolution"
+            layer="ORTO"
+            style="default"
+            tilematrixSet="EPSG:3857"
+            format="image/jpeg"
+          />
+        </BaseLayer>
+
+        <BaseLayer name="Polish Geoportal Topo (WMTS)">
+          <CustomWMTSLayer
+            url="https://mapy.geoportal.gov.pl/wss/service/PZGIK/BDOO/WMTS/StandardResolution"
+            layer="BDOO"
+            style="default"
+            tilematrixSet="EPSG:3857"
+            format="image/png"
+          />
+        </BaseLayer>
+      </LayersControl>
+
+      {markers.map((marker, index) => (
+        <Marker key={index} position={marker.position}>
+          {marker.popup && <Popup>{marker.popup}</Popup>}
+        </Marker>
+      ))}
+    </MapContainer>
+  );
+}

src/components/ui/EnhancedLeafletMap.js

@@ -0,0 +1,74 @@
+"use client";
+
+import { MapContainer, TileLayer, Marker, Popup, LayersControl } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+import { useEffect } from 'react';
+import { mapLayers } from './mapLayers';
+
+// Fix for default markers in react-leaflet
+const fixLeafletIcons = () => {
+  if (typeof window !== 'undefined') {
+    const L = require('leaflet');
+    
+    delete L.Icon.Default.prototype._getIconUrl;
+    L.Icon.Default.mergeOptions({
+      iconRetinaUrl: '/leaflet/marker-icon-2x.png',
+      iconUrl: '/leaflet/marker-icon.png',
+      shadowUrl: '/leaflet/marker-shadow.png',
+    });
+  }
+};
+
+export default function EnhancedLeafletMap({ 
+  center, 
+  zoom = 13, 
+  markers = [], 
+  showLayerControl = true,
+  defaultLayer = 'OpenStreetMap'
+}) {
+  useEffect(() => {
+    fixLeafletIcons();
+  }, []);
+
+  const { BaseLayer } = LayersControl;
+
+  return (
+    <MapContainer 
+      center={center} 
+      zoom={zoom} 
+      style={{ height: '100%', width: '100%' }}
+      scrollWheelZoom={true}
+    >
+      {showLayerControl ? (
+        <LayersControl position="topright">
+          {mapLayers.base.map((layer, index) => (
+            <BaseLayer 
+              key={index} 
+              checked={layer.checked || layer.name === defaultLayer} 
+              name={layer.name}
+            >
+              <TileLayer
+                attribution={layer.attribution}
+                url={layer.url}
+                maxZoom={layer.maxZoom}
+                tileSize={layer.tileSize || 256}
+              />
+            </BaseLayer>
+          ))}
+        </LayersControl>
+      ) : (
+        // Default layer when no layer control
+        <TileLayer
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+      )}
+
+      {markers.map((marker, index) => (
+        <Marker key={index} position={marker.position}>
+          {marker.popup && <Popup>{marker.popup}</Popup>}
+        </Marker>
+      ))}
+    </MapContainer>
+  );
+}

src/components/ui/LeafletMap.js

@@ -0,0 +1,74 @@
+"use client";
+
+import { MapContainer, TileLayer, Marker, Popup, LayersControl } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+import { useEffect } from 'react';
+import { mapLayers } from './mapLayers';
+
+// Fix for default markers in react-leaflet
+const fixLeafletIcons = () => {
+  if (typeof window !== 'undefined') {
+    const L = require('leaflet');
+    
+    delete L.Icon.Default.prototype._getIconUrl;
+    L.Icon.Default.mergeOptions({
+      iconRetinaUrl: '/leaflet/marker-icon-2x.png',
+      iconUrl: '/leaflet/marker-icon.png',
+      shadowUrl: '/leaflet/marker-shadow.png',
+    });
+  }
+};
+
+export default function EnhancedLeafletMap({ 
+  center, 
+  zoom = 13, 
+  markers = [], 
+  showLayerControl = true,
+  defaultLayer = 'OpenStreetMap'
+}) {
+  useEffect(() => {
+    fixLeafletIcons();
+  }, []);
+
+  const { BaseLayer } = LayersControl;
+
+  return (
+    <MapContainer 
+      center={center} 
+      zoom={zoom} 
+      style={{ height: '100%', width: '100%' }}
+      scrollWheelZoom={true}
+    >
+      {showLayerControl ? (
+        <LayersControl position="topright">
+          {mapLayers.base.map((layer, index) => (
+            <BaseLayer 
+              key={index} 
+              checked={layer.checked || layer.name === defaultLayer} 
+              name={layer.name}
+            >
+              <TileLayer
+                attribution={layer.attribution}
+                url={layer.url}
+                maxZoom={layer.maxZoom}
+                tileSize={layer.tileSize || 256}
+              />
+            </BaseLayer>
+          ))}
+        </LayersControl>
+      ) : (
+        // Default layer when no layer control
+        <TileLayer
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+      )}
+
+      {markers.map((marker, index) => (
+        <Marker key={index} position={marker.position}>
+          {marker.popup && <Popup>{marker.popup}</Popup>}
+        </Marker>
+      ))}
+    </MapContainer>
+  );
+}

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>
+  );
+}

src/components/ui/mapLayers.js

@@ -0,0 +1,65 @@
+// Map layer configurations
+import { generateLayerConfig } from './wmtsCapabilities';
+
+// Generate layer configurations from WMTS capabilities
+const polishOrthophoto = generateLayerConfig('orthophoto');
+
+export const mapLayers = {
+  base: [
+    {
+      name: "OpenStreetMap",
+      checked: true,
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+      maxZoom: 19
+    },
+    polishOrthophoto,
+    {
+      name: "Polish Land Records (WMS)",
+      attribution: '&copy; <a href="https://www.gugik.gov.pl/">GUGiK</a>',
+      // This is actually a WMS service, not WMTS as discovered from GetCapabilities
+      url: "https://integracja.gugik.gov.pl/cgi-bin/KrajowaIntegracjaEwidencjiGruntow?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&BBOX={bbox-epsg-3857}&CRS=EPSG:3857&WIDTH=256&HEIGHT=256&LAYERS=EGiB&STYLES=&FORMAT=image/png",
+      maxZoom: 19,
+      tileSize: 256
+    },
+    {
+      name: "Satellite (Esri)",
+      attribution: '&copy; <a href="https://www.esri.com/">Esri</a> &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
+      url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+      maxZoom: 19
+    },
+    {
+      name: "Topographic",
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attributions">CARTO</a>',
+      url: "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png",
+      maxZoom: 19
+    }
+  ].filter(Boolean) // Remove any null entries
+};
+
+// WMTS services configuration with GetCapabilities URLs
+export const wmtsServices = {
+  polishOrthophoto: {
+    capabilitiesUrl: "https://mapy.geoportal.gov.pl/wss/service/PZGIK/ORTO/WMTS/StandardResolution?Service=WMTS&Request=GetCapabilities",
+    layer: "ORTO",
+    style: "default",
+    tilematrixSet: "EPSG:2180",
+    format: "image/jpeg"
+  }
+};
+
+// Helper function to check WMTS capabilities
+export async function checkWMTSCapabilities(serviceKey) {
+  const service = wmtsServices[serviceKey];
+  if (!service) return null;
+  
+  try {
+    const response = await fetch(service.capabilitiesUrl);
+    const xml = await response.text();
+    console.log(`WMTS Capabilities for ${serviceKey}:`, xml);
+    return xml;
+  } catch (error) {
+    console.error(`Failed to fetch WMTS capabilities for ${serviceKey}:`, error);
+    return null;
+  }
+}

src/components/ui/wmtsCapabilities.js

@@ -0,0 +1,88 @@
+// WMTS Capabilities Helper
+// This file contains utilities for working with WMTS GetCapabilities responses
+
+/**
+ * Parse WMTS GetCapabilities XML to extract layer information
+ * @param {string} capabilitiesUrl - Base WMTS service URL
+ * @returns {Object} Parsed layer information
+ */
+export async function getWMTSCapabilities(capabilitiesUrl) {
+  try {
+    const response = await fetch(`${capabilitiesUrl}?Service=WMTS&Request=GetCapabilities`);
+    const xml = await response.text();
+    
+    // In a real implementation, you'd parse the XML to extract:
+    // - Available layers
+    // - Supported formats (image/png, image/jpeg, etc.)
+    // - Tile matrix sets (coordinate systems)
+    // - Available styles
+    // - Zoom level ranges
+    
+    console.log('WMTS Capabilities XML:', xml);
+    
+    // For now, return the XML for manual inspection
+    return { xml, url: capabilitiesUrl };
+  } catch (error) {
+    console.error('Failed to fetch WMTS capabilities:', error);
+    return null;
+  }
+}
+
+/**
+ * Build proper WMTS tile URL from capabilities information
+ * @param {Object} config - WMTS configuration
+ * @returns {string} Tile URL template
+ */
+export function buildWMTSTileUrl(config) {
+  const {
+    baseUrl,
+    layer,
+    style = 'default',
+    tilematrixSet = 'EPSG:3857',
+    format = 'image/png',
+    version = '1.0.0'
+  } = config;
+  
+  // Standard WMTS RESTful URL template
+  return `${baseUrl}/tile/${version}/${layer}/${style}/${tilematrixSet}/{z}/{y}/{x}.${format.split('/')[1]}`;
+}
+
+/**
+ * Polish Geoportal WMTS services with proper GetCapabilities URLs
+ */
+export const polishWMTSServices = {
+  orthophoto: {
+    name: "Polish Geoportal Orthophoto",
+    capabilitiesUrl: "https://mapy.geoportal.gov.pl/wss/service/PZGIK/ORTO/WMTS/StandardResolution",
+    layer: "ORTO",
+    style: "default",
+    tilematrixSet: "EPSG:2180",
+    format: "image/jpeg",
+    attribution: '&copy; <a href="https://www.geoportal.gov.pl/">Geoportal</a>',
+    maxZoom: 19
+  }
+};
+
+/**
+ * Generate layer configuration from WMTS capabilities
+ * @param {string} serviceName - Key from polishWMTSServices
+ * @returns {Object} Layer configuration for mapLayers
+ */
+export function generateLayerConfig(serviceName) {
+  const service = polishWMTSServices[serviceName];
+  if (!service) return null;
+  
+  return {
+    name: service.name,
+    attribution: service.attribution,
+    url: buildWMTSTileUrl({
+      baseUrl: service.capabilitiesUrl,
+      layer: service.layer,
+      style: service.style,
+      tilematrixSet: service.tilematrixSet,
+      format: service.format
+    }),
+    maxZoom: service.maxZoom,
+    tileSize: 256
+  };
+}

src/lib/init-db.js

@@ -1,4 +1,4 @@
-import db from "./db";
+import db from "./db.js";
 
 export default function initializeDatabase() {
 	db.exec(`
@@ -118,4 +118,24 @@ export default function initializeDatabase() {
 	} catch (e) {
 		// Column already exists, ignore error
 	}
+	// Migration: Add coordinates column to projects table
+	try {
+		db.exec(`
+      ALTER TABLE projects ADD COLUMN coordinates TEXT;
+    `);
+	} catch (e) {
+		// Column already exists, ignore error
+	}
+
+	// Migration: Copy data from geo_info to coordinates and drop geo_info
+	try {
+		db.exec(`
+      UPDATE projects SET coordinates = geo_info WHERE geo_info IS NOT NULL;
+    `);
+		db.exec(`
+      ALTER TABLE projects DROP COLUMN geo_info;
+    `);
+	} catch (e) {
+		// Column migration already done or geo_info doesn't exist, ignore error
+	}
 }

src/lib/queries/projects.js

@@ -37,15 +37,12 @@ export function createProject(data) {
 
 	// 2. Generate sequential number and project number
 	const sequentialNumber = (contractInfo.project_count || 0) + 1;
-	const projectNumber = `${sequentialNumber}/${contractInfo.contract_number}`;
+	const projectNumber = `${sequentialNumber}/${contractInfo.contract_number}`;	const stmt = db.prepare(`
-
-	const stmt = db.prepare(`
     INSERT INTO projects (
       contract_id, project_name, project_number, address, plot, district, unit, city, investment_number, finish_date,
-      wp, contact, notes, project_type, project_status
+      wp, contact, notes, project_type, project_status, coordinates
-    ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+    ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
-  `);
+  `);stmt.run(
-	stmt.run(
 		data.contract_id,
 		data.project_name,
 		projectNumber,
@@ -58,17 +55,16 @@ export function createProject(data) {
 		data.finish_date,
 		data.wp,
 		data.contact,
-		data.notes,
+		data.notes,		data.project_type || "design",
-		data.project_type || "design",
+		data.project_status || "registered",
-		data.project_status || "registered"
+		data.coordinates || null
 	);
 }
 
-export function updateProject(id, data) {
+export function updateProject(id, data) {	const stmt = db.prepare(`
-	const stmt = db.prepare(`
     UPDATE projects SET
       contract_id = ?, project_name = ?, project_number = ?, address = ?, plot = ?, district = ?, unit = ?, city = ?,
-      investment_number = ?, finish_date = ?, wp = ?, contact = ?, notes = ?, project_type = ?, project_status = ?
+      investment_number = ?, finish_date = ?, wp = ?, contact = ?, notes = ?, project_type = ?, project_status = ?, coordinates = ?
     WHERE project_id = ?
   `);
 	stmt.run(
@@ -84,9 +80,9 @@ export function updateProject(id, data) {
 		data.finish_date,
 		data.wp,
 		data.contact,
-		data.notes,
+		data.notes,		data.project_type || "design",
-		data.project_type || "design",
 		data.project_status || "registered",
+		data.coordinates || null,
 		id
 	);
 }

src/lib/utils.js

@@ -0,0 +1,40 @@
+// Test utilities for deadline and status formatting
+export const getDeadlineVariant = (days) => {
+  if (days < 0) return "danger";
+  if (days <= 7) return "warning";
+  return "success";
+};
+
+export const formatProjectStatus = (status) => {
+  switch (status) {
+    case "registered":
+      return "Zarejestrowany";
+    case "in_progress_design":
+      return "W realizacji (projektowanie)";
+    case "in_progress_construction":
+      return "W realizacji (realizacja)";
+    case "fulfilled":
+      return "Zakończony";
+    default:
+      return "-";
+  }
+};
+
+export const formatProjectType = (type) => {
+  switch (type) {
+    case "design":
+      return "Projektowanie";
+    case "construction":
+      return "Realizacja";
+    case "design+construction":
+      return "Projektowanie + Realizacja";
+    default:
+      return "-";
+  }
+};
+
+export const getDeadlineText = (daysRemaining) => {
+  if (daysRemaining === 0) return "Due Today";
+  if (daysRemaining > 0) return `${daysRemaining} days left`;
+  return `${Math.abs(daysRemaining)} days overdue`;
+};