Merge branch 'feature/csv-cajas-trailers' into feature/faltantes-csv

frontend/src/lib/components/dashboard/csv-upload/ProcessingResultModal.svelte

@@ -143,17 +143,53 @@
 
 				{#if scanResults.error_count > 0}
 					<div
-						class="rounded-md bg-destructive/5 border border-destructive/10 p-4 flex items-start gap-3"
+						class="rounded-md bg-destructive/5 border border-destructive/10 p-4 flex items-start gap-3 mb-4"
 					>
 						<XCircle class="w-5 h-5 text-destructive mt-0.5 shrink-0" />
 						<div class="text-sm text-destructive-foreground/90">
 							<p class="font-semibold mb-1">Se detectaron problemas en el archivo</p>
 							<p>
-								Las filas con errores serán omitidas automáticamente. Solo se importarán los
-								registros válidos.
+								Corrija los datos indicados abajo en su CSV y vuelva a subir, o confirme para
+								importar solo las filas válidas (las erróneas se omitirán).
 							</p>
 						</div>
 					</div>
+					{#if scanResults.errors && scanResults.errors.length > 0}
+						<div class="border rounded-lg overflow-hidden shadow-sm">
+							<div class="bg-muted/50 px-4 py-2 border-b flex justify-between items-center">
+								<h5 class="text-xs font-bold text-foreground uppercase tracking-wide">
+									Detalle de errores (para corregir en el CSV)
+								</h5>
+								<span
+									class="text-[10px] bg-secondary text-secondary-foreground px-2 py-0.5 rounded-full border"
+								>
+									{scanResults.errors.length} error(es)
+								</span>
+							</div>
+							<div class="max-h-60 overflow-y-auto bg-card relative">
+								<table class="w-full text-xs text-left">
+									<thead
+										class="text-muted-foreground font-medium bg-muted/30 sticky top-0 z-10 shadow-sm backdrop-blur-sm"
+									>
+										<tr>
+											<th class="px-4 py-2 w-16">Línea</th>
+											<th class="px-4 py-2 w-40">Columna</th>
+											<th class="px-4 py-2">Mensaje</th>
+										</tr>
+									</thead>
+									<tbody class="divide-y">
+										{#each scanResults.errors as err}
+											<tr class="hover:bg-muted/30 transition-colors">
+												<td class="px-4 py-2 font-mono text-muted-foreground">{err.line}</td>
+												<td class="px-4 py-2 font-mono font-medium text-foreground">{err.col || '-'}</td>
+												<td class="px-4 py-2 text-destructive">{err.msg || '-'}</td>
+											</tr>
+										{/each}
+									</tbody>
+								</table>
+							</div>
+						</div>
+					{/if}
 				{:else}
 					<div class="rounded-md bg-primary/5 border border-primary/10 p-4 flex items-start gap-3">
 						<CheckCircle2 class="w-5 h-5 text-primary mt-0.5 shrink-0" />

frontend/src/lib/components/dashboard/csv-upload/UploadLauncherGrid.svelte

@@ -123,7 +123,7 @@
 					ondragover={(e) => handleDragOver(e, item.disabled)}
 					ondrop={(e) => handleDrop(e, item)}
 					oncontextmenu={(e) => handleContextMenu(e, item)}
-					roles="button"
+					role="button"
 					tabindex={item.disabled ? -1 : 0}
 					onclick={() => handleClick(item.id, item.disabled)}
 					onkeydown={(e) => !item.disabled && e.key === 'Enter' && handleClick(item.id)}

frontend/src/lib/components/dashboard/customs_brokers/columns.ts

@@ -8,6 +8,20 @@ export type { CustomsBroker };
 
 export function createColumns(onSuccess?: () => void): ColumnDef<CustomsBroker>[] {
 	return [
+		{
+			accessorKey: "id",
+			header: "ID",
+			cell: ({ row }) => {
+				const idSnippet = createRawSnippet<[{ id: number }]>((getId) => {
+					const { id } = getId();
+					return {
+						render: () =>
+							`<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">${id}</code>`
+					};
+				});
+				return renderSnippet(idSnippet, { id: row.original.id });
+			}
+		},
 		{
 			accessorKey: "broker_key",
 			header: "Clave",