feat: enhance point registration and management features

- Added functionality to capture and display images during point registration, improving user experience.
- Implemented error handling for image uploads and webcam access, ensuring smoother operation.
- Introduced a justification field for point registration, allowing users to provide context for their entries.
- Enhanced the backend to support new features, including image handling and justification storage.
- Updated UI components for better layout and responsiveness, improving overall usability.

apps/web/src/lib/components/ponto/ComprovantePonto.svelte

@@ -169,6 +169,91 @@
 				}
 			}
 
+			// Imagem capturada (se disponível)
+			if (registro.imagemUrl) {
+				yPosition += 10;
+				// Verificar se precisa de nova página
+				if (yPosition > 200) {
+					doc.addPage();
+					yPosition = 20;
+				}
+
+				doc.setFont('helvetica', 'bold');
+				doc.text('FOTO CAPTURADA', 105, yPosition, { align: 'center' });
+				doc.setFont('helvetica', 'normal');
+				yPosition += 10;
+
+				try {
+					// Carregar imagem usando fetch para evitar problemas de CORS
+					const response = await fetch(registro.imagemUrl);
+					if (!response.ok) {
+						throw new Error('Erro ao carregar imagem');
+					}
+					
+					const blob = await response.blob();
+					const reader = new FileReader();
+					
+					// Converter blob para base64
+					const base64 = await new Promise<string>((resolve, reject) => {
+						reader.onloadend = () => {
+							if (typeof reader.result === 'string') {
+								resolve(reader.result);
+							} else {
+								reject(new Error('Erro ao converter imagem'));
+							}
+						};
+						reader.onerror = () => reject(new Error('Erro ao ler imagem'));
+						reader.readAsDataURL(blob);
+					});
+
+					// Criar elemento de imagem para obter dimensões
+					const img = new Image();
+					await new Promise<void>((resolve, reject) => {
+						img.onload = () => resolve();
+						img.onerror = () => reject(new Error('Erro ao processar imagem'));
+						img.src = base64;
+						setTimeout(() => reject(new Error('Timeout ao processar imagem')), 10000);
+					});
+
+					// Calcular dimensões para caber na página (largura máxima 80mm, manter proporção)
+					const maxWidth = 80;
+					const maxHeight = 60;
+					let imgWidth = img.width;
+					let imgHeight = img.height;
+					const aspectRatio = imgWidth / imgHeight;
+
+					if (imgWidth > maxWidth || imgHeight > maxHeight) {
+						if (aspectRatio > 1) {
+							// Imagem horizontal
+							imgWidth = maxWidth;
+							imgHeight = maxWidth / aspectRatio;
+						} else {
+							// Imagem vertical
+							imgHeight = maxHeight;
+							imgWidth = maxHeight * aspectRatio;
+						}
+					}
+
+					// Centralizar imagem
+					const xPosition = (doc.internal.pageSize.getWidth() - imgWidth) / 2;
+					
+					// Verificar se cabe na página atual
+					if (yPosition + imgHeight > doc.internal.pageSize.getHeight() - 20) {
+						doc.addPage();
+						yPosition = 20;
+					}
+
+					// Adicionar imagem ao PDF usando base64
+					doc.addImage(base64, 'JPEG', xPosition, yPosition, imgWidth, imgHeight);
+					yPosition += imgHeight + 10;
+				} catch (error) {
+					console.warn('Erro ao adicionar imagem ao PDF:', error);
+					doc.setFontSize(10);
+					doc.text('Foto não disponível para impressão', 105, yPosition, { align: 'center' });
+					yPosition += 6;
+				}
+			}
+
 			// Rodapé
 			const pageCount = doc.getNumberOfPages();
 			for (let i = 1; i <= pageCount; i++) {
@@ -248,6 +333,26 @@
 					</div>
 				</div>
 
+				<!-- Imagem Capturada -->
+				{#if registro.imagemUrl}
+					<div class="card bg-base-200">
+						<div class="card-body">
+							<h4 class="font-bold mb-2">Foto Capturada</h4>
+							<div class="flex justify-center">
+								<img
+									src={registro.imagemUrl}
+									alt="Foto do registro de ponto"
+									class="max-w-full max-h-96 rounded-lg border-2 border-primary object-contain"
+									onerror={(e) => {
+										console.error('Erro ao carregar imagem:', e);
+										(e.target as HTMLImageElement).style.display = 'none';
+									}}
+								/>
+							</div>
+						</div>
+					</div>
+				{/if}
+
 				<!-- Ações -->
 				<div class="flex justify-end gap-2">
 					<button class="btn btn-primary" onclick={gerarPDF} disabled={gerando}>