feature/us-y-7-mejora-tabla-lateral

frontend/src/lib/components/dashboard/goods/fractions/SitarFractionTabs.svelte

@@ -21,7 +21,10 @@
 	type TabKey = 'descripcion' | 'tlcs' | 'prosec' | 'aladi' | 'immex' | 'acuerdos';
 	type NonDescTabKey = Exclude<TabKey, 'descripcion'>;
 
-	let { selectedFraction }: { selectedFraction: TariffFraction | null } = $props();
+	let { selectedFraction, catalog = 'mex' }: {
+		selectedFraction: TariffFraction | null;
+		catalog?: string;
+	} = $props();
 
 	let activeTab = $state<TabKey>('descripcion');
 	let isResolvingTabs = $state(false);
@@ -53,14 +56,18 @@
 	let resolveToken = 0;
 
 	const fractionDigits = $derived(
-		selectedFraction ? splitMexTariffDigitsForSitar(buildMexTariffDigitsFromCatalogRow(selectedFraction)) : null
+		catalog === 'mex' && selectedFraction
+			? splitMexTariffDigitsForSitar(buildMexTariffDigitsFromCatalogRow(selectedFraction))
+			: null
 	);
 
 	const hasSelection = $derived(!!selectedFraction);
 
 	const headerFraction = $derived(
-		selectedFraction && fractionDigits
-			? formatMexTariffDigitsForDisplay(buildMexTariffDigitsFromCatalogRow(selectedFraction))
+		selectedFraction
+			? catalog === 'mex' && fractionDigits
+				? formatMexTariffDigitsForDisplay(buildMexTariffDigitsFromCatalogRow(selectedFraction))
+				: selectedFraction.fraction || selectedFraction.code || ''
 			: ''
 	);
 
@@ -140,6 +147,12 @@
 		sitarAcuerdosData = [];
 		activeError = '';
 
+		if (catalog !== 'mex') {
+			isResolvingTabs = false;
+			noDataTabs = { descripcion: false, tlcs: true, prosec: true, aladi: true, immex: true, acuerdos: true };
+			return;
+		}
+
 		if (!frac || !fracDigits) {
 			isResolvingTabs = false;
 			noDataTabs = { descripcion: false, tlcs: true, prosec: true, aladi: true, immex: true, acuerdos: true };
@@ -192,13 +205,26 @@
 			</div>
 		</div>
 
-		{#if !hasSelection}
-			<div class="flex-1 rounded-xl border border-dashed bg-muted/10 p-4 text-xs text-muted-foreground">
-				Selecciona una fracción de la tabla para ver su detalle SITAR (Descripción, TLCS, PROSEC, ALADI).
-			</div>
-		{:else}
-		<div class="flex-1 min-h-0">
-		<Tabs.Root value={activeTab} onValueChange={(v) => (activeTab = v as TabKey)} class="h-full w-full flex flex-col">
+	{#if !hasSelection}
+		<div class="flex-1 rounded-xl border border-dashed bg-muted/10 p-4 text-xs text-muted-foreground">
+			{catalog === 'mex'
+				? 'Selecciona una fracción de la tabla para ver su detalle SITAR (Descripción, TLCS, PROSEC, ALADI).'
+				: 'Selecciona una fracción de la tabla para ver su descripción.'}
+		</div>
+	{:else if catalog !== 'mex'}
+	<div class="flex-1 min-h-0 overflow-hidden rounded-xl border bg-card">
+		<div class="flex items-center justify-between border-b bg-muted/30 p-3">
+			<h3 class="flex items-center gap-2 text-xs font-bold tracking-wider text-muted-foreground uppercase">
+				<FileText class="h-4 w-4" /> Descripción de la Fracción
+			</h3>
+		</div>
+		<div class="p-4 text-sm leading-relaxed font-medium whitespace-pre-wrap text-slate-600 dark:text-slate-400">
+			{selectedFraction?.description || 'No hay descripción disponible para esta fracción.'}
+		</div>
+	</div>
+	{:else}
+	<div class="flex-1 min-h-0">
+	<Tabs.Root value={activeTab} onValueChange={(v) => (activeTab = v as TabKey)} class="h-full w-full flex flex-col">
 			<Tabs.List class="mb-2 grid w-full grid-cols-6">
 				<Tabs.Trigger value="descripcion" class="text-[10px] font-bold uppercase">Descripción</Tabs.Trigger>
 				<Tabs.Trigger value="tlcs" class="text-[10px] font-bold uppercase" disabled={noDataTabs.tlcs || isResolvingTabs}>TLCS</Tabs.Trigger>

frontend/src/lib/components/dashboard/goods/fractions/TariffFractionList.svelte

@@ -185,7 +185,7 @@
 	}
 
 	function selectFractionDetail(fraction: TariffFraction) {
-		if (!showSitarTabsOnSelect || catalog !== 'mex') return;
+		if (!showSitarTabsOnSelect) return;
 		selectedDetailFraction = fraction;
 	}
 
@@ -368,9 +368,9 @@
 				</div>
 			</Card.Content>
 		</Card.Root>
-		{#if showSitarTabsOnSelect && catalog === 'mex'}
+		{#if showSitarTabsOnSelect}
 			<div class="min-h-0 xl:col-span-4 flex flex-col overflow-hidden">
-				<SitarFractionTabs selectedFraction={selectedDetailFraction} />
+				<SitarFractionTabs selectedFraction={selectedDetailFraction} {catalog} />
 			</div>
 		{/if}
 		</div>

frontend/src/routes/dashboard/general_catalogs/tariff-fractions/seventh-amendment/+page.svelte

@@ -9,4 +9,5 @@
 	levelFilter={5}
 	readOnly={true}
 	basePerm="frac_sitar_7"
+	showSitarTabsOnSelect={true}
 />

frontend/src/routes/dashboard/general_catalogs/tariff-fractions/us/+page.svelte

@@ -3,4 +3,4 @@
 	import { m } from '$lib/i18n/messages';
 </script>
 
-<TariffFractionList title={m['sidebar.fractions.sitar_us']()} catalog="usa" readOnly={true} />
+<TariffFractionList title={m['sidebar.fractions.sitar_us']()} catalog="usa" readOnly={true} showSitarTabsOnSelect={true} />