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/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 }) {
-	const { id } = params;
+export default async function ProjectViewPage({ 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>
+						</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>{" "}
-			</div>
+				</Card>
+			)}
 
 			<ProjectTasksSection projectId={id} />
 

src/components/ProjectForm.js

@@ -15,8 +15,8 @@ export default function ProjectForm({ initialData = null }) {
 		investment_number: "",
 		finish_date: "",
 		wp: "",
-		contact: "",
-		notes: "",
+		contact: "",		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"],
-				["contact", "Dane kontaktowe"],
+				["wp", "WP"],				["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 stmt = db.prepare(`
+	const projectNumber = `${sequentialNumber}/${contractInfo.contract_number}`;	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
-    ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
-  `);
-	stmt.run(
+      wp, contact, notes, project_type, project_status, coordinates
+    ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+  `);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.project_type || "design",
-		data.project_status || "registered"
+		data.notes,		data.project_type || "design",
+		data.project_status || "registered",
+		data.coordinates || null
 	);
 }
 
-export function updateProject(id, data) {
-	const stmt = db.prepare(`
+export function updateProject(id, data) {	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.project_type || "design",
+		data.notes,		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`;
+};