Implement automatic versioning and display in the application

- Added a step in the CI/CD pipeline to generate a version based on the branch and commit history.
- Updated Dockerfile to accept the application version as an argument.
- Modified the configuration to retrieve the application version from the environment variable.
- Created a new API endpoint to expose the application version.
- Added a new Svelte component to display the application version in the UI.

frontend/src/lib/components/app-version.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { api } from '$lib/api';
+
+	/**
+	 * Componente para mostrar la versión de la aplicación
+	 * Consume el endpoint /api/version del backend para obtener información de versión
+	 */
+
+	interface VersionInfo {
+		service: string;
+		version: string;
+		environment: string;
+		debug: boolean;
+	}
+
+	let versionInfo: VersionInfo | null = $state(null);
+	let loading: boolean = $state(true);
+	let error: string | null = $state(null);
+
+	/**
+	 * Obtener información de versión desde el backend
+	 */
+	async function fetchVersion() {
+		try {
+			loading = true;
+			error = null;
+
+			const response = await api.get<VersionInfo>('/version');
+
+			if (response.error) {
+				throw new Error(response.error);
+			}
+
+			if (response.data) {
+				versionInfo = response.data;
+			}
+		} catch (err) {
+			console.error('Error al obtener versión:', err);
+			error = err instanceof Error ? err.message : 'Error desconocido';
+		} finally {
+			loading = false;
+		}
+	}
+
+	// Cargar versión al montar el componente
+	onMount(() => {
+		fetchVersion();
+	});
+
+	/**
+	 * Obtener color del badge según el entorno
+	 */
+	function getEnvironmentColor(env: string): string {
+		switch (env?.toLowerCase()) {
+			case 'production':
+				return 'bg-green-600 text-white';
+			case 'development':
+				return 'bg-yellow-600 text-white';
+			case 'staging':
+				return 'bg-blue-600 text-white';
+			default:
+				return 'bg-gray-600 text-white';
+		}
+	}
+</script>
+
+<!-- Componente de versión -->
+<div class="flex items-center app-version">
+	{#if loading}
+		<div class="text-xs text-muted-foreground">Cargando versión...</div>
+	{:else if error}
+		<div class="text-xs text-destructive">Error: {error}</div>
+	{:else if versionInfo}
+		<div class="flex items-center gap-2 text-xs">			
+
+			<!-- Versión -->
+			<span class="font-mono font-semibold text-foreground">
+				v{versionInfo.version}
+			</span>
+
+			<!-- Indicador de debug (solo si está activo) -->
+			{#if versionInfo.debug}
+				<span class="rounded bg-orange-600 px-2 py-0.5 text-xs font-medium text-white">
+					DEBUG
+				</span>
+			{/if}
+		</div>
+	{/if}
+</div>

frontend/src/lib/components/sidebar/nav-user.svelte

@@ -17,6 +17,7 @@
 	import { goto } from "$app/navigation";
 	import { browser } from "$app/environment";
 	import { getBackendAssetUrl } from "$lib/utils";
+	import AppVersion from "$lib/components/app-version.svelte";
 
 	let { user }: { user: { name: string; email: string; avatar: string } } = $props();
 	const sidebar = useSidebar();
@@ -172,6 +173,10 @@
 					<LogOutIcon />
 					Log out
 				</DropdownMenu.Item>
+				<DropdownMenu.Separator />
+				<div class="px-2 py-2">
+					<AppVersion />
+				</div>
 			</DropdownMenu.Content>
 		</DropdownMenu.Root>
 	</Sidebar.MenuItem>