From 1fde3708906cc8c7951e0f56844745b7139bf9ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roman=20Kr=C4=8Dek?= <roman.krcek@tietoevry.com>
Date: Tue, 29 Jul 2025 15:56:42 +0200
Subject: [PATCH] Rework generation page and settings

---
 src/fontkit.d.ts                              |    1 +
 src/lib/components/wizard/StepGenerate.svelte | 1042 +++++++++--------
 .../wizard/subcomponents/PhotoCard.svelte     |    6 +-
 src/lib/pdfLayout.ts                          |  202 ++--
 src/lib/pdfSettings.ts                        |   96 ++
 5 files changed, 711 insertions(+), 636 deletions(-)
 create mode 100644 src/fontkit.d.ts
 create mode 100644 src/lib/pdfSettings.ts

diff --git a/src/fontkit.d.ts b/src/fontkit.d.ts
new file mode 100644
index 0000000..04e531f
--- /dev/null
+++ b/src/fontkit.d.ts
@@ -0,0 +1 @@
+declare module 'fontkit';
diff --git a/src/lib/components/wizard/StepGenerate.svelte b/src/lib/components/wizard/StepGenerate.svelte
index cffde98..82ddfdf 100644
--- a/src/lib/components/wizard/StepGenerate.svelte
+++ b/src/lib/components/wizard/StepGenerate.svelte
@@ -1,523 +1,561 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-  import { filteredSheetData, currentStep, pictures, cropRects } from '$lib/stores';
-  import { PDFDocument, StandardFonts, rgb } from 'pdf-lib';
-  import * as fontkit from 'fontkit';
-  import {
-    PDF_DIMENSIONS,
-    TEXT_PDF_GRID,
-    PHOTO_PDF_GRID,
-    TEXT_FIELD_LAYOUT,
-    PHOTO_FIELD_LAYOUT,
-    BORDER_CONFIG,
-    TEXT_CONFIG,
-    PLACEHOLDER_CONFIG,
-    calculateGridLayout,
-    getAbsolutePosition,
-    getAbsolutePhotoDimensions
-  } from '$lib/pdfLayout';
+	import { onMount } from 'svelte';
+	import { filteredSheetData, currentStep, pictures, cropRects } from '$lib/stores';
+	import { PDFDocument, StandardFonts, rgb } from 'pdf-lib';
+	import * as fontkit from 'fontkit';
+	import {
+		BORDER_CONFIG,
+		TEXT_CONFIG,
+		PLACEHOLDER_CONFIG,
+		calculateGrid,
+		getAbsolutePositionPt,
+		getAbsolutePhotoDimensionsPt,
+		MM_TO_PT
+	} from '$lib/pdfLayout';
+	import {
+		PAGE_SETTINGS,
+		TEXT_CARD_DIMENSIONS,
+		PHOTO_CARD_DIMENSIONS,
+		TEXT_FIELD_LAYOUT,
+		PHOTO_FIELD_LAYOUT
+	} from '$lib/pdfSettings';
 
-  let isGenerating = $state(false);
-  let progress = $state({ stage: '', current: 0, total: 0 });
-  let generatedFiles = $state<{ name: string; url: string; size: number }[]>([]);
+	type FileGenerationState = 'idle' | 'generating' | 'done' | 'error';
 
-  // Load Roboto font
-  async function loadRobotoFont() {
-    try {
-      const fontResponse = await fetch('/fonts/Roboto-Regular.ttf');
-      if (!fontResponse.ok) {
-        throw new Error('Failed to load Roboto font');
-      }
-      return await fontResponse.arrayBuffer();
-    } catch (error) {
-      console.warn('Could not load Roboto font, falling back to standard font:', error);
-      return null;
-    }
-  }
+	type GeneratedFile = {
+		name: string;
+		displayName: string;
+		state: FileGenerationState;
+		url: string | null;
+		size: number | null;
+		error: string | null;
+	};
 
-  // Crop image using canvas
-  async function cropImage(imageBlob: Blob, crop: { x: number; y: number; width: number; height: number }): Promise<Uint8Array> {
-    return new Promise((resolve, reject) => {
-      const img = new Image();
-      const canvas = document.createElement('canvas');
-      const ctx = canvas.getContext('2d');
-      
-      if (!ctx) {
-        reject(new Error('Could not get canvas context'));
-        return;
-      }
-      
-      img.onload = () => {
-        // Set canvas size to crop dimensions
-        canvas.width = crop.width;
-        canvas.height = crop.height;
-        
-        // Draw the cropped portion of the image
-        ctx.drawImage(
-          img,
-          crop.x, crop.y, crop.width, crop.height,  // Source rectangle
-          0, 0, crop.width, crop.height             // Destination rectangle
-        );
-        
-        // Convert canvas to blob then to array buffer
-        canvas.toBlob((blob) => {
-          if (blob) {
-            blob.arrayBuffer().then(buffer => {
-              resolve(new Uint8Array(buffer));
-            }).catch(reject);
-          } else {
-            reject(new Error('Failed to create blob from canvas'));
-          }
-        }, 'image/jpeg', 0.9);
-      };
-      
-      img.onerror = () => reject(new Error('Failed to load image'));
-      img.src = URL.createObjectURL(imageBlob);
-    });
-  }
+	const initialFiles: GeneratedFile[] = [
+		{
+			name: 'people_data.pdf',
+			displayName: 'Text PDF',
+			state: 'idle',
+			url: null,
+			size: null,
+			error: null
+		},
+		{
+			name: 'people_photos.pdf',
+			displayName: 'Photos PDF',
+			state: 'idle',
+			url: null,
+			size: null,
+			error: null
+		}
+	];
 
-  // PDF generation function
-  async function generatePDFs() {
-    if (isGenerating) return;
-    
-    isGenerating = true;
-    generatedFiles = [];
-    
-    try {
-      console.log("starting PDF generation...");
-      console.log("filteredSheetData:", $filteredSheetData);
-      console.log("valid rows:", $filteredSheetData.filter(row => row._isValid));
-      
-      // Generate text PDF
-      progress = { stage: 'Generating text PDF...', current: 1, total: 3 };
-      const textPdfBytes = await generateTextPDF();
-      const textBlob = new Blob([textPdfBytes], { type: 'application/pdf' });
-      const textUrl = URL.createObjectURL(textBlob);
-      generatedFiles.push({
-        name: 'people_data.pdf',
-        url: textUrl,
-        size: textPdfBytes.length
-      });
+	let files = $state<GeneratedFile[]>(JSON.parse(JSON.stringify(initialFiles)));
 
-      console.log("Text PDF generated:", textUrl);
+	onMount(() => {
+		// Start generation automatically when the component mounts
+		handleGenerate('people_data.pdf');
+		handleGenerate('people_photos.pdf');
+	});
 
-      console.log("starting photo PDF generation...");
+	// Load Roboto font
+	async function loadRobotoFont() {
+		try {
+			const fontResponse = await fetch('/fonts/Roboto-Regular.ttf');
+			if (!fontResponse.ok) {
+				throw new Error('Failed to load Roboto font');
+			}
+			return await fontResponse.arrayBuffer();
+		} catch (error: any) {
+			console.warn('Could not load Roboto font, falling back to standard font:', error);
+			return null;
+		}
+	}
 
-      // Generate photo PDF
-      progress = { stage: 'Generating photo PDF...', current: 2, total: 3 };
-      const photoPdfBytes = await generatePhotoPDF();
-      const photoBlob = new Blob([photoPdfBytes], { type: 'application/pdf' });
-      const photoUrl = URL.createObjectURL(photoBlob);
-      generatedFiles.push({
-        name: 'people_photos.pdf',
-        url: photoUrl,
-        size: photoPdfBytes.length
-      });
+	// Crop image using canvas
+	async function cropImage(
+		imageBlob: Blob,
+		crop: { x: number; y: number; width: number; height: number }
+	): Promise<Uint8Array> {
+		return new Promise((resolve, reject) => {
+			const img = new Image();
+			const canvas = document.createElement('canvas');
+			const ctx = canvas.getContext('2d');
 
-      progress = { stage: 'Complete!', current: 3, total: 3 };
-    } catch (error) {
-      console.error('PDF generation failed:', error);
-      console.error('Error stack:', error.stack);
-      console.error('Error details:', {
-        message: error.message,
-        name: error.name,
-        stack: error.stack
-      });
-      alert('Failed to generate PDFs: ' + error.message);
-    } finally {
-      isGenerating = false;
-      console.log("PDF generation completed.");
-    }
-  }
+			if (!ctx) {
+				reject(new Error('Could not get canvas context'));
+				return;
+			}
 
-  async function generateTextPDF() {
-    const pdfDoc = await PDFDocument.create();
-    
-    // Register fontkit to enable custom font embedding
-    pdfDoc.registerFontkit(fontkit);
-    
-    // Load custom Roboto font or fallback to standard font
-    const robotoFontBytes = await loadRobotoFont();
-    const font = robotoFontBytes 
-      ? await pdfDoc.embedFont(robotoFontBytes)
-      : await pdfDoc.embedFont(StandardFonts.TimesRoman);
-    
-    // Calculate grid layout using configuration
-    const gridLayout = calculateGridLayout(PDF_DIMENSIONS, TEXT_PDF_GRID);
-    
-    let page = pdfDoc.addPage([PDF_DIMENSIONS.pageWidth, PDF_DIMENSIONS.pageHeight]);
-    let currentRow = 0;
-    let currentCol = 0;
-    
-    const validRows = $filteredSheetData.filter(row => row._isValid);
-    
-    for (let i = 0; i < validRows.length; i++) {
-      const row = validRows[i];
-      
-      console.log(`Processing row ${i}:`, row);
-      
-      // Calculate cell position
-      const cellX = PDF_DIMENSIONS.margin + currentCol * gridLayout.cellWidth;
-      const cellY = PDF_DIMENSIONS.pageHeight - PDF_DIMENSIONS.margin - (currentRow + 1) * gridLayout.cellHeight;
-      
-      // Get field values safely
-      const name = row.name || row.Name || '';
-      const surname = row.surname || row.Surname || row.lastname || row.LastName || '';
-      const nationality = row.nationality || row.Nationality || row.country || row.Country || '';
-      const birthday = row.birthday || row.Birthday || row.birthdate || row.Birthdate || row.birth_date || '';
-      
-      // Draw name using absolute positioning
-      const namePos = getAbsolutePosition(cellX, cellY, gridLayout.cellHeight, TEXT_FIELD_LAYOUT.name);
-      page.drawText(`${name} ${surname}`, {
-        x: namePos.x,
-        y: namePos.y,
-        size: namePos.size,
-        font: font,
-        color: rgb(TEXT_CONFIG.color.r, TEXT_CONFIG.color.g, TEXT_CONFIG.color.b)
-      });
-      
-      // Draw nationality
-      const nationalityPos = getAbsolutePosition(cellX, cellY, gridLayout.cellHeight, TEXT_FIELD_LAYOUT.nationality);
-      page.drawText(`Nationality: ${nationality}`, {
-        x: nationalityPos.x,
-        y: nationalityPos.y,
-        size: nationalityPos.size,
-        font: font,
-        color: rgb(TEXT_CONFIG.color.r, TEXT_CONFIG.color.g, TEXT_CONFIG.color.b)
-      });
-      
-      // Draw birthday
-      const birthdayPos = getAbsolutePosition(cellX, cellY, gridLayout.cellHeight, TEXT_FIELD_LAYOUT.birthday);
-      page.drawText(`Birthday: ${birthday}`, {
-        x: birthdayPos.x,
-        y: birthdayPos.y,
-        size: birthdayPos.size,
-        font: font,
-        color: rgb(TEXT_CONFIG.color.r, TEXT_CONFIG.color.g, TEXT_CONFIG.color.b)
-      });
-      
-      // Draw cell border
-      page.drawRectangle({
-        x: cellX,
-        y: cellY,
-        width: gridLayout.cellWidth,
-        height: gridLayout.cellHeight,
-        borderColor: rgb(BORDER_CONFIG.color.r, BORDER_CONFIG.color.g, BORDER_CONFIG.color.b),
-        borderWidth: BORDER_CONFIG.width
-      });
-      
-      // Move to next cell
-      currentCol++;
-      if (currentCol >= gridLayout.cols) {
-        currentCol = 0;
-        currentRow++;
-        if (currentRow >= gridLayout.rows) {
-          // Add new page
-          page = pdfDoc.addPage([PDF_DIMENSIONS.pageWidth, PDF_DIMENSIONS.pageHeight]);
-          currentRow = 0;
-        }
-      }
-    }
-    
-    return await pdfDoc.save();
-  }
+			img.onload = () => {
+				// Set canvas size to crop dimensions
+				canvas.width = crop.width;
+				canvas.height = crop.height;
 
-    async function generatePhotoPDF() {
-    const pdfDoc = await PDFDocument.create();
-    
-    // Register fontkit to enable custom font embedding
-    pdfDoc.registerFontkit(fontkit);
-    
-    // Load custom Roboto font or fallback to standard font
-    const robotoFontBytes = await loadRobotoFont();
-    const font = robotoFontBytes 
-      ? await pdfDoc.embedFont(robotoFontBytes)
-      : await pdfDoc.embedFont(StandardFonts.TimesRoman);
-    
-    // Calculate grid layout using configuration
-    const gridLayout = calculateGridLayout(PDF_DIMENSIONS, PHOTO_PDF_GRID);
-    
-    let page = pdfDoc.addPage([PDF_DIMENSIONS.pageWidth, PDF_DIMENSIONS.pageHeight]);
-    let currentRow = 0;
-    let currentCol = 0;
-    
-    const validRows = $filteredSheetData.filter(row => row._isValid);
-    
-    for (let i = 0; i < validRows.length; i++) {
-      const row = validRows[i];
-      
-      // Calculate cell position
-      const cellX = PDF_DIMENSIONS.margin + currentCol * gridLayout.cellWidth;
-      const cellY = PDF_DIMENSIONS.pageHeight - PDF_DIMENSIONS.margin - (currentRow + 1) * gridLayout.cellHeight;
-      
-      // Get photo dimensions using configuration
-      const photoDims = getAbsolutePhotoDimensions(
-        cellX, cellY, gridLayout.cellWidth, gridLayout.cellHeight, 
-        PHOTO_FIELD_LAYOUT.photo
-      );
-      
-      // Try to get and embed the actual photo
-      // Use picture URL as the key to lookup data
-      const pictureUrl = row.pictureUrl || row.picture_url || row.Picture || row.PictureUrl;
-      const pictureInfo = $pictures[pictureUrl];
-      const cropData = $cropRects[pictureUrl];
-      
-      console.log(`Row ${i} (${row.name}):`, {
-        rowId: row.id,
-        pictureUrl: pictureUrl,
-        pictureInfo: pictureInfo ? 'Found' : 'Missing',
-        cropData: cropData ? cropData : 'Missing',
-        allPictureIds: Object.keys($pictures),
-        allCropIds: Object.keys($cropRects)
-      });
-      
-      if (pictureInfo && cropData) {
-        try {
-          console.log(`Cropping and embedding photo for ${row.name} ${row.surname}`);
-          
-          // Crop the image
-          const croppedImageBytes = await cropImage(pictureInfo.blob, cropData);
-          
-          // Embed the cropped image in the PDF
-          const image = await pdfDoc.embedJpg(croppedImageBytes);
-          
-          // Calculate image dimensions to fit within the photo area while maintaining aspect ratio
-          const imageAspectRatio = image.width / image.height;
-          const photoAspectRatio = photoDims.width / photoDims.height;
-          
-          let imageWidth, imageHeight;
-          if (imageAspectRatio > photoAspectRatio) {
-            // Image is wider - fit to width
-            imageWidth = photoDims.width;
-            imageHeight = photoDims.width / imageAspectRatio;
-          } else {
-            // Image is taller - fit to height
-            imageHeight = photoDims.height;
-            imageWidth = photoDims.height * imageAspectRatio;
-          }
-          
-          // Center the image within the photo area
-          const imageX = photoDims.x + (photoDims.width - imageWidth) / 2;
-          const imageY = photoDims.y + (photoDims.height - imageHeight) / 2;
-          
-          // Draw the image
-          page.drawImage(image, {
-            x: imageX,
-            y: imageY,
-            width: imageWidth,
-            height: imageHeight
-          });
-          
-        } catch (error) {
-          console.error(`Failed to embed photo for ${row.name}:`, error);
-          
-          // Fall back to placeholder if photo embedding fails
-          page.drawRectangle({
-            x: photoDims.x,
-            y: photoDims.y,
-            width: photoDims.width,
-            height: photoDims.height,
-            borderColor: rgb(BORDER_CONFIG.color.r, BORDER_CONFIG.color.g, BORDER_CONFIG.color.b),
-            borderWidth: BORDER_CONFIG.width
-          });
-          
-          page.drawText('Photo failed', {
-            x: cellX + gridLayout.cellWidth / 2 - 30,
-            y: cellY + gridLayout.cellHeight / 2,
-            size: PLACEHOLDER_CONFIG.size,
-            font: font,
-            color: rgb(PLACEHOLDER_CONFIG.color.r, PLACEHOLDER_CONFIG.color.g, PLACEHOLDER_CONFIG.color.b)
-          });
-        }
-      } else {
-        // No photo or crop data available - draw placeholder
-        page.drawRectangle({
-          x: photoDims.x,
-          y: photoDims.y,
-          width: photoDims.width,
-          height: photoDims.height,
-          borderColor: rgb(BORDER_CONFIG.color.r, BORDER_CONFIG.color.g, BORDER_CONFIG.color.b),
-          borderWidth: BORDER_CONFIG.width
-        });
-        
-        page.drawText(PLACEHOLDER_CONFIG.text, {
-          x: cellX + gridLayout.cellWidth / 2 - 40,
-          y: cellY + gridLayout.cellHeight / 2,
-          size: PLACEHOLDER_CONFIG.size,
-          font: font,
-          color: rgb(PLACEHOLDER_CONFIG.color.r, PLACEHOLDER_CONFIG.color.g, PLACEHOLDER_CONFIG.color.b)
-        });
-      }
-      
-      // Get field values safely
-      const name = row.name || row.Name || '';
-      const surname = row.surname || row.Surname || row.lastname || row.LastName || '';
-      
-      // Draw name using absolute positioning
-      const namePos = getAbsolutePosition(cellX, cellY, gridLayout.cellHeight, PHOTO_FIELD_LAYOUT.name);
-      page.drawText(`${name} ${surname}`, {
-        x: namePos.x,
-        y: namePos.y,
-        size: namePos.size,
-        font: font,
-        color: rgb(TEXT_CONFIG.color.r, TEXT_CONFIG.color.g, TEXT_CONFIG.color.b)
-      });
-      
-      // Move to next cell
-      currentCol++;
-      if (currentCol >= gridLayout.cols) {
-        currentCol = 0;
-        currentRow++;
-        if (currentRow >= gridLayout.rows) {
-          // Add new page
-          page = pdfDoc.addPage([PDF_DIMENSIONS.pageWidth, PDF_DIMENSIONS.pageHeight]);
-          currentRow = 0;
-        }
-      }
-    }
-    
-    return await pdfDoc.save();
-  }
+				// Draw the cropped portion of the image
+				ctx.drawImage(
+					img,
+					crop.x,
+					crop.y,
+					crop.width,
+					crop.height, // Source rectangle
+					0,
+					0,
+					crop.width,
+					crop.height // Destination rectangle
+				);
 
-  function downloadFile(file: { name: string; url: string }) {
-    const link = document.createElement('a');
-    link.href = file.url;
-    link.download = file.name;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  }
+				// Convert canvas to blob then to array buffer
+				canvas.toBlob(
+					(blob) => {
+						if (blob) {
+							blob
+								.arrayBuffer()
+								.then((buffer) => {
+									resolve(new Uint8Array(buffer));
+								})
+								.catch(reject);
+						} else {
+							reject(new Error('Failed to create blob from canvas'));
+						}
+					},
+					'image/jpeg',
+					0.9
+				);
+			};
 
-  function formatFileSize(bytes: number): string {
-    if (bytes === 0) return '0 Bytes';
-    const k = 1024;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-  }
+			img.onerror = () => reject(new Error('Failed to load image'));
+			img.src = URL.createObjectURL(imageBlob);
+		});
+	}
+
+	async function handleGenerate(fileName: string) {
+		const fileToUpdate = files.find((f) => f.name === fileName);
+		if (!fileToUpdate || fileToUpdate.state === 'generating') return;
+
+		fileToUpdate.state = 'generating';
+		fileToUpdate.error = null;
+
+		try {
+			const pdfBytes =
+				fileName === 'people_data.pdf' ? await generateTextPDF() : await generatePhotoPDF();
+
+			const blob = new Blob([pdfBytes], { type: 'application/pdf' });
+
+			// Revoke old URL if it exists
+			if (fileToUpdate.url) {
+				URL.revokeObjectURL(fileToUpdate.url);
+			}
+
+			fileToUpdate.url = URL.createObjectURL(blob);
+			fileToUpdate.size = pdfBytes.length;
+			fileToUpdate.state = 'done';
+		} catch (error: any) {
+			console.error(`PDF generation failed for ${fileName}:`, error);
+			fileToUpdate.state = 'error';
+			fileToUpdate.error = error.message || 'An unknown error occurred';
+		}
+	}
+
+	async function generateTextPDF() {
+		const pdfDoc = await PDFDocument.create();
+		pdfDoc.registerFontkit(fontkit);
+
+		const robotoFontBytes = await loadRobotoFont();
+		const font = robotoFontBytes
+			? await pdfDoc.embedFont(robotoFontBytes)
+			: await pdfDoc.embedFont(StandardFonts.TimesRoman);
+
+		const gridLayout = calculateGrid(
+			PAGE_SETTINGS.pageWidth,
+			PAGE_SETTINGS.pageHeight,
+			PAGE_SETTINGS.margin,
+			TEXT_CARD_DIMENSIONS.width,
+			TEXT_CARD_DIMENSIONS.height
+		);
+		const pageDimsPt = {
+			width: PAGE_SETTINGS.pageWidth * MM_TO_PT,
+			height: PAGE_SETTINGS.pageHeight * MM_TO_PT
+		};
+
+		let page = pdfDoc.addPage([pageDimsPt.width, pageDimsPt.height]);
+		let currentRow = 0;
+		let currentCol = 0;
+
+		const validRows = $filteredSheetData.filter((row) => row._isValid);
+
+		for (let i = 0; i < validRows.length; i++) {
+			const row = validRows[i];
+
+			// Calculate cell position in mm
+			const cellX_mm = PAGE_SETTINGS.margin + currentCol * gridLayout.cellWidth;
+			const cellY_mm = PAGE_SETTINGS.margin + currentRow * gridLayout.cellHeight;
+
+			// Get field values
+			const name = row.name || row.Name || '';
+			const surname = row.surname || row.Surname || row.lastname || row.LastName || '';
+			const nationality = row.nationality || row.Nationality || row.country || row.Country || '';
+			const birthday =
+				row.birthday || row.Birthday || row.birthdate || row.Birthdate || row.birth_date || '';
+
+			// Draw name
+			const namePos = getAbsolutePositionPt(
+				cellX_mm,
+				cellY_mm,
+				PAGE_SETTINGS.pageHeight,
+				TEXT_FIELD_LAYOUT.name
+			);
+			page.drawText(`${name} ${surname}`, {
+				...namePos,
+				font,
+				color: rgb(TEXT_CONFIG.color.r, TEXT_CONFIG.color.g, TEXT_CONFIG.color.b)
+			});
+
+			// Draw nationality
+			const natPos = getAbsolutePositionPt(
+				cellX_mm,
+				cellY_mm,
+				PAGE_SETTINGS.pageHeight,
+				TEXT_FIELD_LAYOUT.nationality
+			);
+			page.drawText(`Nationality: ${nationality}`, {
+				...natPos,
+				font,
+				color: rgb(TEXT_CONFIG.color.r, TEXT_CONFIG.color.g, TEXT_CONFIG.color.b)
+			});
+
+			// Draw birthday
+			const bdayPos = getAbsolutePositionPt(
+				cellX_mm,
+				cellY_mm,
+				PAGE_SETTINGS.pageHeight,
+				TEXT_FIELD_LAYOUT.birthday
+			);
+			page.drawText(`Birthday: ${birthday}`, {
+				...bdayPos,
+				font,
+				color: rgb(TEXT_CONFIG.color.r, TEXT_CONFIG.color.g, TEXT_CONFIG.color.b)
+			});
+
+			// Draw cell border in points
+			page.drawRectangle({
+				x: cellX_mm * MM_TO_PT,
+				y: pageDimsPt.height - (cellY_mm + gridLayout.cellHeight) * MM_TO_PT,
+				width: gridLayout.cellWidth * MM_TO_PT,
+				height: gridLayout.cellHeight * MM_TO_PT,
+				borderColor: rgb(BORDER_CONFIG.color.r, BORDER_CONFIG.color.g, BORDER_CONFIG.color.b),
+				borderWidth: BORDER_CONFIG.width
+			});
+
+			// Move to next cell
+			currentCol++;
+			if (currentCol >= gridLayout.cols) {
+				currentCol = 0;
+				currentRow++;
+				if (currentRow >= gridLayout.rows) {
+					page = pdfDoc.addPage([pageDimsPt.width, pageDimsPt.height]);
+					currentRow = 0;
+				}
+			}
+		}
+
+		return await pdfDoc.save();
+	}
+
+	async function generatePhotoPDF() {
+		const pdfDoc = await PDFDocument.create();
+		pdfDoc.registerFontkit(fontkit);
+
+		const robotoFontBytes = await loadRobotoFont();
+		const font = robotoFontBytes
+			? await pdfDoc.embedFont(robotoFontBytes)
+			: await pdfDoc.embedFont(StandardFonts.TimesRoman);
+
+		const gridLayout = calculateGrid(
+			PAGE_SETTINGS.pageWidth,
+			PAGE_SETTINGS.pageHeight,
+			PAGE_SETTINGS.margin,
+			PHOTO_CARD_DIMENSIONS.width,
+			PHOTO_CARD_DIMENSIONS.height
+		);
+		const pageDimsPt = {
+			width: PAGE_SETTINGS.pageWidth * MM_TO_PT,
+			height: PAGE_SETTINGS.pageHeight * MM_TO_PT
+		};
+
+		let page = pdfDoc.addPage([pageDimsPt.width, pageDimsPt.height]);
+		let currentRow = 0;
+		let currentCol = 0;
+
+		const validRows = $filteredSheetData.filter((row) => row._isValid);
+
+		for (let i = 0; i < validRows.length; i++) {
+			const row = validRows[i];
+
+			// Calculate cell position in mm
+			const cellX_mm = PAGE_SETTINGS.margin + currentCol * gridLayout.cellWidth;
+			const cellY_mm = PAGE_SETTINGS.margin + currentRow * gridLayout.cellHeight;
+
+			// Get photo dimensions in points
+			const photoDimsPt = getAbsolutePhotoDimensionsPt(
+				cellX_mm,
+				cellY_mm,
+				PAGE_SETTINGS.pageHeight,
+				PHOTO_FIELD_LAYOUT.photo
+			);
+
+			const pictureUrl = row.pictureUrl || row.picture_url || row.Picture || row.PictureUrl;
+			const pictureInfo = $pictures[pictureUrl];
+			const cropData = $cropRects[pictureUrl];
+
+			if (pictureInfo && cropData) {
+				try {
+					const croppedImageBytes = await cropImage(pictureInfo.blob, cropData);
+					const embeddedImage = await pdfDoc.embedJpg(croppedImageBytes);
+
+					const imageAspectRatio = embeddedImage.width / embeddedImage.height;
+					const photoBoxAspectRatio = photoDimsPt.width / photoDimsPt.height;
+
+					let imageWidth, imageHeight;
+					if (imageAspectRatio > photoBoxAspectRatio) {
+						imageWidth = photoDimsPt.width;
+						imageHeight = photoDimsPt.width / imageAspectRatio;
+					} else {
+						imageHeight = photoDimsPt.height;
+						imageWidth = photoDimsPt.height * imageAspectRatio;
+					}
+
+					const imageX = photoDimsPt.x + (photoDimsPt.width - imageWidth) / 2;
+					const imageY = photoDimsPt.y + (photoDimsPt.height - imageHeight) / 2;
+
+					page.drawImage(embeddedImage, {
+						x: imageX,
+						y: imageY,
+						width: imageWidth,
+						height: imageHeight
+					});
+				} catch (error: any) {
+					console.error(`Failed to embed photo for ${row.name}:`, error);
+					// Draw placeholder on error
+					page.drawRectangle({
+						...photoDimsPt,
+						borderColor: rgb(BORDER_CONFIG.color.r, BORDER_CONFIG.color.g, BORDER_CONFIG.color.b),
+						borderWidth: BORDER_CONFIG.width
+					});
+				}
+			} else {
+				// Draw placeholder if no photo
+				page.drawRectangle({
+					...photoDimsPt,
+					borderColor: rgb(BORDER_CONFIG.color.r, BORDER_CONFIG.color.g, BORDER_CONFIG.color.b),
+					borderWidth: BORDER_CONFIG.width
+				});
+			}
+
+			// Draw name
+			const name = row.name || row.Name || '';
+			const surname = row.surname || row.Surname || row.lastname || row.LastName || '';
+			const namePos = getAbsolutePositionPt(
+				cellX_mm,
+				cellY_mm,
+				PAGE_SETTINGS.pageHeight,
+				PHOTO_FIELD_LAYOUT.name
+			);
+			page.drawText(`${name} ${surname}`, {
+				...namePos,
+				font,
+				color: rgb(TEXT_CONFIG.color.r, TEXT_CONFIG.color.g, TEXT_CONFIG.color.b)
+			});
+
+			// Move to next cell
+			currentCol++;
+			if (currentCol >= gridLayout.cols) {
+				currentCol = 0;
+				currentRow++;
+				if (currentRow >= gridLayout.rows) {
+					page = pdfDoc.addPage([pageDimsPt.width, pageDimsPt.height]);
+					currentRow = 0;
+				}
+			}
+		}
+
+		return await pdfDoc.save();
+	}
+
+	function downloadFile(file: GeneratedFile) {
+		if (!file.url) return;
+		const link = document.createElement('a');
+		link.href = file.url;
+		link.download = file.name;
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+	}
+
+	function resetAndStartOver() {
+		files.forEach((file) => {
+			if (file.url) {
+				URL.revokeObjectURL(file.url);
+			}
+		});
+		files = JSON.parse(JSON.stringify(initialFiles));
+		currentStep.set(0);
+	}
+
+	function formatFileSize(bytes: number | null): string {
+		if (bytes === null || bytes === 0) return '0 Bytes';
+		const k = 1024;
+		const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+		const i = Math.floor(Math.log(bytes) / Math.log(k));
+		return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+	}
 </script>
 
 <div class="p-6">
-  <div class="max-w-4xl mx-auto">
-    <div class="mb-6">
-      <h2 class="text-xl font-semibold text-gray-900 mb-2">
-        Generate PDFs
-      </h2>
-      
-      <p class="text-sm text-gray-700 mb-4">
-        Create two PDF documents: one with text data and one with photos.
-      </p>
-    </div>
+	<div class="max-w-4xl mx-auto">
+		<div class="mb-6">
+			<h2 class="text-xl font-semibold text-gray-900 mb-2">
+				Generating PDFs
+			</h2>
+			
+			<p class="text-sm text-gray-700 mb-4">
+				Create two PDF documents: one with text data and one with photos.
+			</p>
+		</div>
 
-    <!-- Summary -->
-    <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 mb-6">
-      <h3 class="text-sm font-medium text-gray-700 mb-3">Generation Summary</h3>
-      
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
-        <div class="text-center">
-          <div class="text-2xl font-bold text-gray-900">
-            {$filteredSheetData.filter(row => row._isValid).length}
-          </div>
-          <div class="text-gray-600">Records to Process</div>
-        </div>
-        
-        <div class="text-center">
-          <div class="text-2xl font-bold text-blue-600">2</div>
-          <div class="text-gray-600">PDFs to Generate</div>
-        </div>
-        
-        <div class="text-center">
-          <div class="text-2xl font-bold text-green-600">
-            {generatedFiles.length}
-          </div>
-          <div class="text-gray-600">Files Ready</div>
-        </div>
-      </div>
-    </div>
-  
-    <!-- Generation Status -->
-    {#if isGenerating}
-      <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
-        <div class="flex items-center justify-between mb-3">
-          <div class="flex items-center">
-            <div class="w-5 h-5 border-2 border-blue-600 border-t-transparent rounded-full animate-spin mr-3"></div>
-            <span class="text-sm text-blue-800">{progress.stage}</span>
-          </div>
-          <span class="text-sm text-blue-600">
-            {progress.current} / {progress.total}
-          </span>
-        </div>
-        
-        <div class="w-full bg-blue-200 rounded-full h-2">
-          <div 
-            class="bg-blue-600 h-2 rounded-full transition-all duration-300" 
-            style="width: {(progress.current / progress.total) * 100}%"
-          ></div>
-        </div>
-      </div>
-    {/if}
+		<!-- Summary -->
+		<div class="bg-gray-50 border border-gray-200 rounded-lg p-4 mb-4">
+			<h3 class="text-sm font-medium text-gray-700 mb-3">Generation Summary</h3>
 
-    <!-- Generate Button -->
-    {#if !isGenerating && generatedFiles.length === 0}
-      <div class="text-center mb-6">
-        <button
-          onclick={generatePDFs}
-          class="px-6 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
-        >
-          Generate PDFs
-        </button>
-      </div>
-    {/if}
+			<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
+				<div class="text-center">
+					<div class="text-2xl font-bold text-gray-900">
+						{$filteredSheetData.filter((row) => row._isValid).length}
+					</div>
+					<div class="text-gray-600">Records to Process</div>
+				</div>
 
-    <!-- Generated Files -->
-    {#if generatedFiles.length > 0}
-      <div class="bg-white border border-gray-200 rounded-lg overflow-hidden mb-6">
-        <div class="p-4 border-b border-gray-200">
-          <h3 class="text-lg font-medium text-gray-900">Generated Files</h3>
-        </div>
-        
-        <div class="divide-y divide-gray-200">
-          {#each generatedFiles as file}
-            <div class="p-4 flex items-center justify-between">
-              <div class="flex items-center">
-                <svg class="w-8 h-8 text-red-600 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
-                </svg>
-                <div>
-                  <h4 class="text-sm font-medium text-gray-900">{file.name}</h4>
-                  <p class="text-xs text-gray-500">{formatFileSize(file.size)}</p>
-                </div>
-              </div>
-              
-              <button
-                onclick={() => downloadFile(file)}
-                class="px-4 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700"
-              >
-                Download
-              </button>
-            </div>
-          {/each}
-        </div>
-      </div>
-    {/if}
+				<div class="text-center">
+					<div class="text-2xl font-bold text-blue-600">{files.length}</div>
+					<div class="text-gray-600">PDFs to Generate</div>
+				</div>
 
-    <!-- Navigation -->
-    <div class="flex justify-between">
-      <button
-        onclick={() => currentStep.set(5)}
-        class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300"
-      >
-        ← Back to Gallery
-      </button>
-      
-      {#if generatedFiles.length > 0}
-        <button
-          onclick={() => currentStep.set(0)}
-          class="px-4 py-2 bg-green-600 text-white rounded-lg font-medium hover:bg-green-700"
-        >
-          Start Over
-        </button>
-      {/if}
-    </div>
-  </div>
+				<div class="text-center">
+					<div class="text-2xl font-bold text-green-600">
+						{files.filter((f) => f.state === 'done').length}
+					</div>
+					<div class="text-gray-600">Files Ready</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Generated Files -->
+		<div class="bg-white border border-gray-200 rounded-lg overflow-hidden mb-6">
+			<div class="p-4 border-b border-gray-200">
+				<h3 class="text-lg font-medium text-gray-900">Available Downloads</h3>
+			</div>
+
+			<div class="divide-y divide-gray-200">
+				{#each files as file (file.name)}
+					<div class="p-4 flex items-center justify-between">
+						<div class="flex items-center">
+							{#if file.displayName === 'Text PDF'}
+								<svg
+									class="w-8 h-8 text-red-600 mr-3"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								>
+									<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+									<polyline points="14 2 14 8 20 8"></polyline>
+									<line x1="12" y1="18" x2="12" y2="12"></line>
+									<line x1="9" y1="12" x2="15" y2="12"></line>
+								</svg>
+							{:else if file.displayName === 'Photos PDF'}
+								<svg
+									class="w-8 h-8 text-red-600 mr-3"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								>
+									<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+									<polyline points="14 2 14 8 20 8"></polyline>
+									<circle cx="12" cy="13" r="2"></circle>
+									<path d="M15 17.5c-1.5-1-4.5-1-6 0"></path>
+								</svg>
+							{/if}
+							<div>
+								<h4 class="text-sm font-medium text-gray-900">{file.displayName}</h4>
+								{#if file.state === 'done' && file.size}
+									<p class="text-xs text-gray-500">{formatFileSize(file.size)}</p>
+								{:else if file.state === 'error'}
+									<p class="text-xs text-red-500">Error: {file.error}</p>
+								{/if}
+							</div>
+						</div>
+
+						{#if file.state === 'idle'}
+							<button
+								onclick={() => handleGenerate(file.name)}
+								class="px-4 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700"
+							>
+								Generate
+							</button>
+						{:else if file.state === 'generating'}
+							<button
+								disabled
+								class="px-4 py-2 bg-gray-400 text-white rounded-md text-sm font-medium cursor-wait"
+							>
+								<div class="flex items-center">
+									<div
+										class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"
+									></div>
+									Generating...
+								</div>
+							</button>
+						{:else if file.state === 'done'}
+							<button
+								onclick={() => downloadFile(file)}
+								class="px-4 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700"
+							>
+								Download
+							</button>
+						{:else if file.state === 'error'}
+							<button
+								onclick={() => handleGenerate(file.name)}
+								class="px-4 py-2 bg-red-600 text-white rounded-md text-sm font-medium hover:bg-red-700"
+							>
+								Retry
+							</button>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		</div>
+
+		<!-- Navigation -->
+		<div class="flex justify-between">
+			<button
+				onclick={() => currentStep.set(5)}
+				class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300"
+			>
+				← Back to Gallery
+			</button>
+
+			{#if files.some((f) => f.state === 'done' || f.state === 'error')}
+				<button
+					onclick={resetAndStartOver}
+					class="px-4 py-2 bg-green-600 text-white rounded-lg font-medium hover:bg-green-700"
+				>
+					Start Over
+				</button>
+			{/if}
+		</div>
+	</div>
 </div>
diff --git a/src/lib/components/wizard/subcomponents/PhotoCard.svelte b/src/lib/components/wizard/subcomponents/PhotoCard.svelte
index d84201c..78e54b3 100644
--- a/src/lib/components/wizard/subcomponents/PhotoCard.svelte
+++ b/src/lib/components/wizard/subcomponents/PhotoCard.svelte
@@ -78,7 +78,7 @@
 
 {#if photo.status === 'loading'}
 	<div class="border border-gray-200 rounded-lg overflow-hidden bg-white shadow-sm">
-		<div class="h-48 bg-gray-100 flex items-center justify-center">
+		<div class="h-48 bg-gray-200 flex items-center justify-center">
 			<div class="flex flex-col items-center">
 				<div
 					class="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin mb-2"
@@ -94,7 +94,7 @@
 {:else if photo.status === 'success' && photo.objectUrl}
 	<div class="border border-gray-200 rounded-lg overflow-hidden bg-white shadow-sm relative">
 		<div
-			class="h-48 bg-gray-100 flex items-center justify-center relative overflow-hidden"
+			class="h-48 bg-gray-200 flex items-center justify-center relative overflow-hidden"
 			bind:this={imageContainer}
 		>
 			<img
@@ -152,7 +152,7 @@
 	</div>
 {:else if photo.status === 'error'}
 	<div class="border border-gray-200 rounded-lg overflow-hidden bg-white shadow-sm">
-		<div class="h-48 bg-gray-100 flex items-center justify-center">
+		<div class="h-48 bg-gray-200 flex items-center justify-center">
 			<div class="flex flex-col items-center text-center p-4">
 				<svg
 					class="w-12 h-12 text-red-400 mb-2"
diff --git a/src/lib/pdfLayout.ts b/src/lib/pdfLayout.ts
index b2e95da..453d396 100644
--- a/src/lib/pdfLayout.ts
+++ b/src/lib/pdfLayout.ts
@@ -1,157 +1,97 @@
 // PDF Layout Configuration Module
-// Centralized configuration for PDF generation layouts
+// Centralized configuration for PDF generation layouts, using millimeters.
 
-export interface PDFDimensions {
-  pageWidth: number;
-  pageHeight: number;
-  margin: number;
-}
+import {
+	PHOTO_DIMENSIONS,
+	TEXT_FIELD_LAYOUT,
+	PHOTO_FIELD_LAYOUT
+} from './pdfSettings';
+
+// Conversion factor from millimeters to points (1 inch = 72 points, 1 inch = 25.4 mm)
+export const MM_TO_PT = 72 / 25.4;
 
 export interface GridLayout {
-  cols: number;
-  rows: number;
-  cellWidth: number;
-  cellHeight: number;
+	cols: number;
+	rows: number;
+	cellWidth: number; // mm
+	cellHeight: number; // mm
 }
 
-export interface TextPosition {
-  x: number;
-  y: number;
-  size: number;
-}
-
-export interface PhotoPosition {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-export interface TextFieldLayout {
-  name: TextPosition;
-  nationality: TextPosition;
-  birthday: TextPosition;
-}
-
-export interface PhotoFieldLayout {
-  photo: PhotoPosition;
-  name: TextPosition;
-}
-
-// A4 dimensions in points
-export const PDF_DIMENSIONS: PDFDimensions = {
-  pageWidth: 595.28,
-  pageHeight: 841.89,
-  margin: 40
-};
-
-// Text PDF Layout (3x7 grid)
-export const TEXT_PDF_GRID = {
-  cols: 3,
-  rows: 7
-};
-
-// Photo PDF Layout (3x5 grid)
-export const PHOTO_PDF_GRID = {
-  cols: 3,
-  rows: 5
-};
-
-// Calculate grid layout
-export function calculateGridLayout(
-  dimensions: PDFDimensions, 
-  grid: { cols: number; rows: number }
+// Calculate how many cards can fit on a page.
+export function calculateGrid(
+	pageWidth: number,
+	pageHeight: number,
+	margin: number,
+	cardWidth: number,
+	cardHeight: number
 ): GridLayout {
-  const cellWidth = (dimensions.pageWidth - 2 * dimensions.margin) / grid.cols;
-  const cellHeight = (dimensions.pageHeight - 2 * dimensions.margin) / grid.rows;
-  
-  return {
-    cols: grid.cols,
-    rows: grid.rows,
-    cellWidth,
-    cellHeight
-  };
+	const printableWidth = pageWidth - 2 * margin;
+	const printableHeight = pageHeight - 2 * margin;
+
+	const cols = Math.floor(printableWidth / cardWidth);
+	const rows = Math.floor(printableHeight / cardHeight);
+
+	return {
+		cols,
+		rows,
+		cellWidth: cardWidth,
+		cellHeight: cardHeight
+	};
 }
 
-// Text PDF Field Positions (relative to cell)
-export const TEXT_FIELD_LAYOUT: TextFieldLayout = {
-  name: {
-    x: 5,        // 5pt from left edge of cell
-    y: -15,      // 15pt from top of cell (negative because PDF coords are bottom-up)
-    size: 10
-  },
-  nationality: {
-    x: 5,        // 5pt from left edge of cell
-    y: -29,      // 29pt from top of cell (15 + 14 line height)
-    size: 10
-  },
-  birthday: {
-    x: 5,        // 5pt from left edge of cell
-    y: -43,      // 43pt from top of cell (15 + 14 + 14 line height)
-    size: 10
-  }
-};
-
-// Photo PDF Field Positions (relative to cell)
-export const PHOTO_FIELD_LAYOUT: PhotoFieldLayout = {
-  photo: {
-    x: 10,       // 10pt from left edge of cell
-    y: 40,       // 40pt from bottom of cell
-    width: -20,  // cell width minus 20pt (10pt margin on each side)
-    height: -60  // cell height minus 60pt (40pt bottom margin + 20pt top margin)
-  },
-  name: {
-    x: 10,       // 10pt from left edge of cell
-    y: 20,       // 20pt from bottom of cell
-    size: 10
-  }
-};
-
-// Helper function to get absolute position within a cell
-export function getAbsolutePosition(
-  cellX: number,
-  cellY: number,
-  cellHeight: number,
-  relativePos: TextPosition
+// Helper function to get absolute position in points for pdf-lib
+export function getAbsolutePositionPt(
+	cellX_mm: number,
+	cellY_mm: number,
+	pageHeight_mm: number,
+	relativePos_mm: any
 ): { x: number; y: number; size: number } {
-  return {
-    x: cellX + relativePos.x,
-    y: cellY + cellHeight + relativePos.y, // Convert relative Y to absolute
-    size: relativePos.size
-  };
+	const absoluteX_mm = cellX_mm + relativePos_mm.x;
+	// pdf-lib Y-coordinate is from bottom, so we invert
+	const absoluteY_mm = pageHeight_mm - (cellY_mm + relativePos_mm.y);
+
+	return {
+		x: absoluteX_mm * MM_TO_PT,
+		y: absoluteY_mm * MM_TO_PT,
+		size: relativePos_mm.size // size is already in points
+	};
 }
 
-// Helper function to get absolute photo dimensions
-export function getAbsolutePhotoDimensions(
-  cellX: number,
-  cellY: number,
-  cellWidth: number,
-  cellHeight: number,
-  relativePhoto: PhotoPosition
+// Helper function to get absolute photo dimensions in points for pdf-lib
+export function getAbsolutePhotoDimensionsPt(
+	cellX_mm: number,
+	cellY_mm: number,
+	pageHeight_mm: number,
+	relativePhoto_mm: any
 ): { x: number; y: number; width: number; height: number } {
-  return {
-    x: cellX + relativePhoto.x,
-    y: cellY + relativePhoto.y,
-    width: relativePhoto.width < 0 ? cellWidth + relativePhoto.width : relativePhoto.width,
-    height: relativePhoto.height < 0 ? cellHeight + relativePhoto.height : relativePhoto.height
-  };
+	const absoluteX_mm = cellX_mm + relativePhoto_mm.x;
+	// pdf-lib Y-coordinate is from bottom, so we invert and account for height
+	const absoluteY_mm = pageHeight_mm - (cellY_mm + relativePhoto_mm.y + relativePhoto_mm.height);
+
+	return {
+		x: absoluteX_mm * MM_TO_PT,
+		y: absoluteY_mm * MM_TO_PT,
+		width: relativePhoto_mm.width * MM_TO_PT,
+		height: relativePhoto_mm.height * MM_TO_PT
+	};
 }
 
 // Border configuration
 export const BORDER_CONFIG = {
-  color: { r: 0.8, g: 0.8, b: 0.8 },
-  width: 1
+	color: { r: 0.8, g: 0.8, b: 0.8 },
+	width: 1 // in points
 };
 
 // Text configuration
 export const TEXT_CONFIG = {
-  color: { r: 0, g: 0, b: 0 },
-  lineHeight: 14
+	color: { r: 0, g: 0, b: 0 },
+	lineHeight: 14 // in points
 };
 
 // Placeholder text configuration
 export const PLACEHOLDER_CONFIG = {
-  text: 'Photo placeholder',
-  color: { r: 0.5, g: 0.5, b: 0.5 },
-  size: 8
+	text: 'Photo placeholder',
+	color: { r: 0.5, g: 0.5, b: 0.5 },
+	size: 8 // in points
 };
+
diff --git a/src/lib/pdfSettings.ts b/src/lib/pdfSettings.ts
new file mode 100644
index 0000000..8d5ec72
--- /dev/null
+++ b/src/lib/pdfSettings.ts
@@ -0,0 +1,96 @@
+// User-configurable settings for PDF generation
+
+export interface PageSettings {
+	pageWidth: number; // mm
+	pageHeight: number; // mm
+	margin: number; // mm
+}
+
+export interface CardDimensions {
+	width: number; // mm
+	height: number; // mm
+}
+
+// A4 Page dimensions in millimeters
+export const PAGE_SETTINGS: PageSettings = {
+	pageWidth: 210,
+	pageHeight: 297,
+	margin: 10
+};
+
+// Dimensions for a single card in the text PDF.
+// These dimensions will be used to calculate how many cards can fit on a page.
+export const TEXT_CARD_DIMENSIONS: CardDimensions = {
+	width: 63,
+	height: 40
+};
+
+// Dimensions for a single card in the photo PDF.
+export const PHOTO_CARD_DIMENSIONS: CardDimensions = {
+	width: 25,
+	height: 35
+};
+
+// Photo dimensions within the photo card
+export const PHOTO_DIMENSIONS = {
+	width: 20, // mm
+	height: 35 // mm
+};
+
+export interface TextPosition {
+	x: number; // mm, relative to cell top-left
+	y: number; // mm, relative to cell top-left
+	size: number; // font size in points
+}
+
+export interface PhotoPosition {
+	x: number; // mm, relative to cell top-left
+	y: number; // mm, relative to cell top-left
+	width: number; // mm
+	height: number; // mm
+}
+
+export interface TextFieldLayout {
+	name: TextPosition;
+	nationality: TextPosition;
+	birthday: TextPosition;
+}
+
+export interface PhotoFieldLayout {
+	photo: PhotoPosition;
+	name: TextPosition;
+}
+
+// Text PDF Field Positions (in mm, relative to cell top-left)
+export const TEXT_FIELD_LAYOUT: TextFieldLayout = {
+	name: {
+		x: 2,
+		y: 5,
+		size: 10 // font size in points
+	},
+	nationality: {
+		x: 2,
+		y: 10,
+		size: 10
+	},
+	birthday: {
+		x: 2,
+		y: 15,
+		size: 10
+	}
+};
+
+// Photo PDF Field Positions (in mm, relative to cell top-left)
+export const PHOTO_FIELD_LAYOUT: PhotoFieldLayout = {
+	photo: {
+		x: 2, // 2mm from left of cell
+		y: 2, // 2mm from top of cell
+		width: PHOTO_DIMENSIONS.width,
+		height: PHOTO_DIMENSIONS.height
+	},
+	name: {
+		x: 2, // 2mm from left of cell
+		y: PHOTO_DIMENSIONS.height + 0, // Below the photo + 5mm gap
+		size: 5 // font size in points
+	}
+};