feat: Implement batch item removal and pedido splitting for pedidos, and add document management for atas.

2025-12-03 23:37:26 -03:00
parent fb78866a0e
commit 7746dce25a
6 changed files with 796 additions and 100 deletions
--- a/apps/web/src/routes/(dashboard)/compras/atas/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/compras/atas/+page.svelte
@@ -37,6 +37,14 @@
 		objetos.filter((obj) => obj.nome.toLowerCase().includes(searchObjeto.toLowerCase()))
 	);

+	// Document state
+	let mainPdfFile: File | null = $state(null);
+	let attachmentFiles: File[] = $state([]);
+	let attachments = $state<Array<{ _id: Id<'atasDocumentos'>; nome: string; url: string | null }>>(
+		[]
+	);
+	let uploading = $state(false);
+
 	async function openModal(ata?: Doc<'atas'>) {
 		if (ata) {
 			editingId = ata._id;
@@ -50,6 +58,9 @@
 			// Fetch linked objects
 			const linkedObjetos = await client.query(api.atas.getObjetos, { id: ata._id });
 			selectedObjetos = linkedObjetos.map((o) => o._id);
+
+			// Fetch attachments
+			attachments = await client.query(api.atas.getDocumentos, { ataId: ata._id });
 		} else {
 			editingId = null;
 			formData = {
@@ -60,7 +71,10 @@
 				dataFim: ''
 			};
 			selectedObjetos = [];
+			attachments = [];
 		}
+		mainPdfFile = null;
+		attachmentFiles = [];
 		searchObjeto = '';
 		showModal = true;
 	}
@@ -78,6 +92,17 @@
 		}
 	}

+	async function uploadFile(file: File) {
+		const uploadUrl = await client.mutation(api.atas.generateUploadUrl, {});
+		const result = await fetch(uploadUrl, {
+			method: 'POST',
+			headers: { 'Content-Type': file.type },
+			body: file
+		});
+		const { storageId } = await result.json();
+		return storageId;
+	}
+
 	async function handleSubmit(e: Event) {
 		e.preventDefault();
 		if (!formData.empresaId) {
@@ -86,28 +111,53 @@
 		}
 		saving = true;
 		try {
+			let pdfStorageId = undefined;
+			if (mainPdfFile) {
+				pdfStorageId = await uploadFile(mainPdfFile);
+			}
+
 			const payload = {
 				numero: formData.numero,
 				numeroSei: formData.numeroSei,
 				empresaId: formData.empresaId as Id<'empresas'>,
 				dataInicio: formData.dataInicio || undefined,
 				dataFim: formData.dataFim || undefined,
-				objetosIds: selectedObjetos
+				objetosIds: selectedObjetos,
+				pdf: pdfStorageId
 			};

+			let ataId: Id<'atas'>;
 			if (editingId) {
 				await client.mutation(api.atas.update, {
 					id: editingId as Id<'atas'>,
 					...payload
 				});
+				ataId = editingId as Id<'atas'>;
 			} else {
-				await client.mutation(api.atas.create, payload);
+				ataId = await client.mutation(api.atas.create, payload);
 			}
+
+			// Upload attachments
+			if (attachmentFiles.length > 0) {
+				uploading = true;
+				for (const file of attachmentFiles) {
+					const storageId = await uploadFile(file);
+					await client.mutation(api.atas.saveDocumento, {
+						ataId,
+						nome: file.name,
+						storageId,
+						tipo: file.type,
+						tamanho: file.size
+					});
+				}
+			}
+
 			closeModal();
 		} catch (e) {
 			alert('Erro ao salvar: ' + (e as Error).message);
 		} finally {
 			saving = false;
+			uploading = false;
 		}
 	}

@@ -120,9 +170,38 @@
 		}
 	}

+	async function handleDeleteAttachment(docId: Id<'atasDocumentos'>) {
+		if (!confirm('Tem certeza que deseja excluir este anexo?')) return;
+		try {
+			await client.mutation(api.atas.removeDocumento, { id: docId });
+			// Refresh attachments list
+			if (editingId) {
+				attachments = await client.query(api.atas.getDocumentos, {
+					ataId: editingId as Id<'atas'>
+				});
+			}
+		} catch (e) {
+			alert('Erro ao excluir anexo: ' + (e as Error).message);
+		}
+	}
+
 	function getEmpresaNome(id: Id<'empresas'>) {
 		return empresas.find((e) => e._id === id)?.razao_social || 'Empresa não encontrada';
 	}
+
+	function handleFileSelect(e: Event) {
+		const input = e.target as HTMLInputElement;
+		if (input.files && input.files.length > 0) {
+			mainPdfFile = input.files[0];
+		}
+	}
+
+	function handleAttachmentsSelect(e: Event) {
+		const input = e.target as HTMLInputElement;
+		if (input.files && input.files.length > 0) {
+			attachmentFiles = Array.from(input.files);
+		}
+	}
 </script>

 <div class="container mx-auto p-6">
@@ -173,7 +252,12 @@
 						<tr>
 							<td class="px-6 py-4 font-medium whitespace-nowrap">{ata.numero}</td>
 							<td class="px-6 py-4 whitespace-nowrap">{ata.numeroSei}</td>
-							<td class="px-6 py-4 whitespace-nowrap">{getEmpresaNome(ata.empresaId)}</td>
+							<td
+								class="max-w-md truncate px-6 py-4 whitespace-nowrap"
+								title={getEmpresaNome(ata.empresaId)}
+							>
+								{getEmpresaNome(ata.empresaId)}
+							</td>
 							<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-500">
 								{ata.dataInicio || '-'} a {ata.dataFim || '-'}
 							</td>
@@ -209,7 +293,7 @@
 		<div
 			class="fixed inset-0 z-50 flex h-full w-full items-center justify-center overflow-y-auto bg-black/40"
 		>
-			<div class="relative w-full max-w-2xl rounded-lg bg-white p-8 shadow-xl">
+			<div class="relative my-8 w-full max-w-2xl rounded-lg bg-white p-8 shadow-xl">
 				<button
 					onclick={closeModal}
 					class="absolute top-4 right-4 text-gray-400 hover:text-gray-600"
@@ -288,6 +372,19 @@
 									/>
 								</div>
 							</div>
+
+							<div class="mb-4">
+								<label class="mb-2 block text-sm font-bold text-gray-700" for="pdf">
+									PDF da Ata {editingId ? '(Deixe em branco para manter o atual)' : ''}
+								</label>
+								<input
+									class="focus:shadow-outline w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
+									id="pdf"
+									type="file"
+									accept=".pdf"
+									onchange={handleFileSelect}
+								/>
+							</div>
 						</div>

 						<div class="flex flex-col">
@@ -308,8 +405,8 @@
 							</div>

 							<div
-								class="flex-1 overflow-y-auto rounded border bg-gray-50 p-2"
-								style="max-height: 300px;"
+								class="mb-4 flex-1 overflow-y-auto rounded border bg-gray-50 p-2"
+								style="max-height: 200px;"
 							>
 								{#if filteredObjetos.length === 0}
 									<p class="py-4 text-center text-sm text-gray-500">Nenhum objeto encontrado.</p>
@@ -334,9 +431,45 @@
 									</div>
 								{/if}
 							</div>
-							<p class="mt-1 text-xs text-gray-500">
-								Selecione os objetos que fazem parte desta Ata.
-							</p>
+
+							<div class="border-t pt-4">
+								<label class="mb-2 block text-sm font-bold text-gray-700" for="anexos">
+									Anexos
+								</label>
+								<input
+									class="focus:shadow-outline mb-2 w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
+									id="anexos"
+									type="file"
+									multiple
+									onchange={handleAttachmentsSelect}
+								/>
+
+								{#if attachments.length > 0}
+									<div class="mt-2 max-h-40 space-y-2 overflow-y-auto">
+										{#each attachments as doc (doc._id)}
+											<div
+												class="flex items-center justify-between rounded bg-gray-100 p-2 text-sm"
+											>
+												<a
+													href={doc.url}
+													target="_blank"
+													rel="noopener noreferrer"
+													class="max-w-[150px] truncate text-blue-600 hover:underline"
+												>
+													{doc.nome}
+												</a>
+												<button
+													type="button"
+													onclick={() => handleDeleteAttachment(doc._id)}
+													class="text-red-500 hover:text-red-700"
+												>
+													<X size={16} />
+												</button>
+											</div>
+										{/each}
+									</div>
+								{/if}
+							</div>
 						</div>
 					</div>

@@ -350,10 +483,10 @@
 						</button>
 						<button
 							type="submit"
-							disabled={saving}
+							disabled={saving || uploading}
 							class="focus:shadow-outline rounded bg-blue-600 px-4 py-2 font-bold text-white hover:bg-blue-700 focus:outline-none disabled:opacity-50"
 						>
-							{saving ? 'Salvando...' : 'Salvar'}
+							{saving || uploading ? 'Salvando...' : 'Salvar'}
 						</button>
 					</div>
 				</form>
--- a/apps/web/src/routes/(dashboard)/pedidos/[id]/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/pedidos/[id]/+page.svelte
@@ -2,6 +2,7 @@
 	import { api } from '@sgse-app/backend/convex/_generated/api';
 	import type { Doc, Id } from '@sgse-app/backend/convex/_generated/dataModel';
 	import { useConvexClient, useQuery } from 'convex-svelte';
+	import { SvelteSet } from 'svelte/reactivity';
 	import {
 		AlertTriangle,
 		CheckCircle,
@@ -15,18 +16,20 @@
 		X,
 		XCircle
 	} from 'lucide-svelte';
-	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
+	import { page } from '$app/state';
 	import { maskCurrencyBRL } from '$lib/utils/masks';

-	const pedidoId = $page.params.id as Id<'pedidos'>;
+	const pedidoId = $derived(page.params.id as Id<'pedidos'>);
 	const client = useConvexClient();

 	// Reactive queries
-	const pedidoQuery = useQuery(api.pedidos.get, { id: pedidoId });
-	const itemsQuery = useQuery(api.pedidos.getItems, { pedidoId });
-	const historyQuery = useQuery(api.pedidos.getHistory, { pedidoId });
-	const objetosQuery = useQuery(api.objetos.list, {});
-	const acoesQuery = useQuery(api.acoes.list, {});
+	const pedidoQuery = $derived.by(() => useQuery(api.pedidos.get, { id: pedidoId }));
+	const itemsQuery = $derived.by(() => useQuery(api.pedidos.getItems, { pedidoId }));
+	const historyQuery = $derived.by(() => useQuery(api.pedidos.getHistory, { pedidoId }));
+	const objetosQuery = $derived.by(() => useQuery(api.objetos.list, {}));
+	const acoesQuery = $derived.by(() => useQuery(api.acoes.list, {}));

 	// Derived state
 	let pedido = $derived(pedidoQuery.data);
@@ -35,11 +38,7 @@
 	let objetos = $derived(objetosQuery.data || []);
 	let acoes = $derived(acoesQuery.data || []);

-	type Modalidade =
-		| 'dispensa'
-		| 'inexgibilidade'
-		| 'adesao'
-		| 'consumo';
+	type Modalidade = 'dispensa' | 'inexgibilidade' | 'adesao' | 'consumo';

 	type EditingItem = {
 		valorEstimado: string;
@@ -62,6 +61,28 @@

 	let editingItems = $state<Record<string, EditingItem>>({});

+	// Seleção de itens para ações em lote
+	let selectedItemIds = new SvelteSet<Id<'objetoItems'>>();
+
+	function isItemSelected(itemId: Id<'objetoItems'>) {
+		return selectedItemIds.has(itemId);
+	}
+
+	function toggleItemSelection(itemId: Id<'objetoItems'>) {
+		if (selectedItemIds.has(itemId)) {
+			selectedItemIds.delete(itemId);
+		} else {
+			selectedItemIds.add(itemId);
+		}
+	}
+
+	function clearSelection() {
+		selectedItemIds.clear();
+	}
+
+	let selectedCount = $derived(selectedItemIds.size);
+	let hasSelection = $derived(selectedCount > 0);
+
 	// Garante que, para todos os itens existentes, as atas do respectivo objeto
 	// sejam carregadas independentemente do formulário de criação.
 	$effect(() => {
@@ -145,7 +166,7 @@
 		if (hasAppliedPrefill) return;
 		if (objetosQuery.isLoading || acoesQuery.isLoading) return;

-		const url = $page.url;
+		const url = page.url;
 		const obj = url.searchParams.get('obj');
 		const qtdStr = url.searchParams.get('qtd');
 		const mod = url.searchParams.get('mod') as Modalidade | null;
@@ -496,6 +517,61 @@
 			return `${entry.usuarioNome} - ${entry.acao}`;
 		}
 	}
+
+	async function handleRemoveSelectedItems() {
+		if (!hasSelection) return;
+		if (
+			!confirm(
+				selectedCount === 1
+					? 'Remover o item selecionado deste pedido?'
+					: `Remover os ${selectedCount} itens selecionados deste pedido?`
+			)
+		)
+			return;
+
+		try {
+			const itemIds = Array.from(selectedItemIds) as Id<'objetoItems'>[];
+			await client.mutation(api.pedidos.removeItemsBatch, {
+				itemIds
+			});
+			clearSelection();
+		} catch (e) {
+			alert('Erro ao remover itens selecionados: ' + (e as Error).message);
+		}
+	}
+
+	let showSplitResultModal = $state(false);
+	let novoPedidoIdParaNavegar = $state<Id<'pedidos'> | null>(null);
+	let quantidadeItensMovidos = $state(0);
+
+	// Split Confirmation Modal State
+	let showSplitConfirmationModal = $state(false);
+	let newPedidoSei = $state('');
+
+	function handleSplitPedidoFromSelection() {
+		if (!hasSelection) return;
+		newPedidoSei = '';
+		showSplitConfirmationModal = true;
+	}
+
+	async function confirmSplitPedido() {
+		try {
+			const itemIds = Array.from(selectedItemIds) as Id<'objetoItems'>[];
+			const novoPedidoId = await client.mutation(api.pedidos.splitPedido, {
+				pedidoId,
+				itemIds,
+				numeroSei: newPedidoSei.trim() || undefined
+			});
+
+			novoPedidoIdParaNavegar = novoPedidoId;
+			quantidadeItensMovidos = itemIds.length;
+			showSplitConfirmationModal = false;
+			showSplitResultModal = true;
+			clearSelection();
+		} catch (e) {
+			alert('Erro ao dividir pedido: ' + (e as Error).message);
+		}
+	}
 </script>

 <div class="container mx-auto p-6">
@@ -729,6 +805,47 @@
 			{/if}

 			<div class="flex flex-col">
+				{#if hasSelection}
+					<div
+						class="flex items-center justify-between border-b border-blue-100 bg-blue-50 px-6 py-3 text-sm text-blue-900"
+					>
+						<div class="flex items-center gap-2">
+							<span
+								class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-blue-600 text-xs font-semibold text-white"
+							>
+								{selectedCount}
+							</span>
+							<span
+								>{selectedCount === 1
+									? '1 item selecionado'
+									: `${selectedCount} itens selecionados`}</span
+							>
+						</div>
+						<div class="flex flex-wrap items-center gap-2">
+							<button
+								type="button"
+								class="rounded border border-transparent bg-blue-600 px-3 py-1.5 text-xs font-medium text-white shadow-sm hover:bg-blue-700"
+								onclick={() => handleSplitPedidoFromSelection()}
+							>
+								Criar novo pedido com selecionados
+							</button>
+							<button
+								type="button"
+								class="rounded border border-red-200 bg-red-50 px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-100"
+								onclick={() => handleRemoveSelectedItems()}
+							>
+								Excluir selecionados
+							</button>
+							<button
+								type="button"
+								class="rounded border border-transparent px-2 py-1 text-xs font-medium text-blue-700 hover:bg-blue-100"
+								onclick={clearSelection}
+							>
+								Limpar seleção
+							</button>
+						</div>
+					</div>
+				{/if}
 				{#each groupedItems as group (group.name)}
 					<div class="border-b border-gray-200 bg-gray-100 px-6 py-2 font-medium text-gray-700">
 						Adicionado por: {group.name}
@@ -736,9 +853,31 @@
 					<table class="min-w-full divide-y divide-gray-200">
 						<thead class="bg-gray-50">
 							<tr>
+								{#if pedido.status === 'em_rascunho' || pedido.status === 'precisa_ajustes'}
+									<th
+										class="px-4 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+									>
+										<input
+											type="checkbox"
+											class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+											onchange={(e) => {
+												const checked = e.currentTarget.checked;
+												for (const groupItem of group.items) {
+													if (checked) {
+														selectedItemIds.add(groupItem._id);
+													} else {
+														selectedItemIds.delete(groupItem._id);
+													}
+												}
+											}}
+											aria-label={`Selecionar todos os itens de ${group.name}`}
+										/>
+									</th>
+								{/if}
 								<th
 									class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
-									>Objeto</th
+								>
+									Objeto</th
 								>
 								<th
 									class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
@@ -772,7 +911,18 @@
 						</thead>
 						<tbody class="divide-y divide-gray-200 bg-white">
 							{#each group.items as item (item._id)}
-								<tr>
+								<tr class:selected={isItemSelected(item._id)}>
+									{#if pedido.status === 'em_rascunho' || pedido.status === 'precisa_ajustes'}
+										<td class="px-4 py-4 whitespace-nowrap">
+											<input
+												type="checkbox"
+												class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+												checked={isItemSelected(item._id)}
+												onchange={() => toggleItemSelection(item._id)}
+												aria-label={`Selecionar item ${getObjetoName(item.objetoId)}`}
+											/>
+										</td>
+									{/if}
 									<td class="px-6 py-4 whitespace-nowrap">{getObjetoName(item.objetoId)}</td>
 									<td class="px-6 py-4 whitespace-nowrap">
 										{#if pedido.status === 'em_rascunho' || pedido.status === 'precisa_ajustes'}
@@ -864,16 +1014,14 @@
 													<option value={ata._id}>Ata {ata.numero} (SEI: {ata.numeroSei})</option>
 												{/each}
 											</select>
+										{:else if item.ataId}
+											{#each getAtasForObjeto(item.objetoId) as ata (ata._id)}
+												{#if ata._id === item.ataId}
+													Ata {ata.numero}
+												{/if}
+											{/each}
 										{:else}
-											{#if item.ataId}
-												{#each getAtasForObjeto(item.objetoId) as ata (ata._id)}
-													{#if ata._id === item.ataId}
-														Ata {ata.numero}
-													{/if}
-												{/each}
-											{:else}
-												-
-											{/if}
+											-
 										{/if}
 									</td>
 									<td class="px-6 py-4 text-right font-medium whitespace-nowrap">
@@ -971,9 +1119,9 @@
 						</div>

 						<div>
-							<div class="block text-xs font-bold text-gray-500 uppercase"
-								>Valor Estimado (Unitário)</div
-							>
+							<div class="block text-xs font-bold text-gray-500 uppercase">
+								Valor Estimado (Unitário)
+							</div>
 							<p class="text-gray-900">
 								{maskCurrencyBRL(selectedObjeto.valorEstimado || '') || 'R$ 0,00'}
 							</p>
@@ -1026,4 +1174,112 @@
 			</div>
 		</div>
 	{/if}
+
+	{#if showSplitResultModal && novoPedidoIdParaNavegar}
+		<div
+			class="fixed inset-0 z-50 flex h-full w-full items-center justify-center overflow-y-auto bg-black/40"
+		>
+			<div class="relative w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
+				<button
+					onclick={() => {
+						showSplitResultModal = false;
+					}}
+					class="absolute top-4 right-4 text-gray-400 hover:text-gray-600"
+				>
+					<X size={20} />
+				</button>
+				<h2 class="mb-3 text-lg font-semibold text-gray-900">Novo pedido criado</h2>
+				<p class="mb-4 text-sm text-gray-700">
+					{quantidadeItensMovidos === 1
+						? '1 item foi movido para um novo pedido em rascunho.'
+						: `${quantidadeItensMovidos} itens foram movidos para um novo pedido em rascunho.`}
+				</p>
+				<p class="mb-6 text-xs text-gray-500">
+					Os itens não foram copiados, e sim movidos deste pedido para o novo.
+				</p>
+				<div class="flex justify-end gap-2">
+					<button
+						type="button"
+						class="rounded bg-gray-200 px-3 py-1.5 text-xs font-medium text-gray-800 hover:bg-gray-300"
+						onclick={() => {
+							showSplitResultModal = false;
+						}}
+					>
+						Continuar neste pedido
+					</button>
+					<button
+						type="button"
+						class="rounded bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-700"
+						onclick={async () => {
+							const id = novoPedidoIdParaNavegar;
+							showSplitResultModal = false;
+							if (id) {
+								await goto(resolve(`/pedidos/${id}`));
+							}
+						}}
+					>
+						Ir para o novo pedido
+					</button>
+				</div>
+			</div>
+		</div>
+	{/if}
+
+	{#if showSplitConfirmationModal}
+		<div
+			class="fixed inset-0 z-50 flex h-full w-full items-center justify-center overflow-y-auto bg-black/40"
+		>
+			<div class="relative w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
+				<button
+					onclick={() => {
+						showSplitConfirmationModal = false;
+					}}
+					class="absolute top-4 right-4 text-gray-400 hover:text-gray-600"
+				>
+					<X size={20} />
+				</button>
+				<h2 class="mb-3 text-lg font-semibold text-gray-900">Criar novo pedido</h2>
+				<p class="mb-4 text-sm text-gray-700">
+					{selectedCount === 1
+						? 'Criar um novo pedido movendo o item selecionado para ele?'
+						: `Criar um novo pedido movendo os ${selectedCount} itens selecionados para ele?`}
+				</p>
+
+				<div class="mb-4">
+					<label for="new-sei" class="mb-1 block text-sm font-medium text-gray-700"
+						>Número SEI (Opcional)</label
+					>
+					<input
+						id="new-sei"
+						type="text"
+						bind:value={newPedidoSei}
+						class="w-full rounded-md border-gray-300 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500"
+						placeholder="Ex: 12345.000000/2023-00"
+					/>
+					<p class="mt-1 text-xs text-gray-500">
+						Se deixado em branco, o novo pedido será criado sem número SEI.
+					</p>
+				</div>
+
+				<div class="flex justify-end gap-2">
+					<button
+						type="button"
+						class="rounded bg-gray-200 px-3 py-1.5 text-xs font-medium text-gray-800 hover:bg-gray-300"
+						onclick={() => {
+							showSplitConfirmationModal = false;
+						}}
+					>
+						Cancelar
+					</button>
+					<button
+						type="button"
+						class="rounded bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-700"
+						onclick={confirmSplitPedido}
+					>
+						Confirmar e Criar
+					</button>
+				</div>
+			</div>
+		</div>
+	{/if}
 </div>
--- a/apps/web/src/routes/(dashboard)/pedidos/novo/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/pedidos/novo/+page.svelte
@@ -37,6 +37,9 @@

 	let selectedItems = $state<SelectedItem[]>([]);
 	let selectedObjetoIds = $derived(selectedItems.map((i) => i.objeto._id));
+	let hasMixedModalidades = $derived(
+		new Set(selectedItems.map((i) => i.modalidade)).size > 1
+	);

 	// Item configuration modal
 	let showItemModal = $state(false);
@@ -153,6 +156,36 @@
 		}
 	}

+	function formatModalidade(modalidade: SelectedItem['modalidade']) {
+		switch (modalidade) {
+			case 'consumo':
+				return 'Consumo';
+			case 'dispensa':
+				return 'Dispensa';
+			case 'inexgibilidade':
+				return 'Inexigibilidade';
+			case 'adesao':
+				return 'Adesão';
+			default:
+				return modalidade;
+		}
+	}
+
+	function getModalidadeBadgeClasses(modalidade: SelectedItem['modalidade']) {
+		switch (modalidade) {
+			case 'consumo':
+				return 'bg-blue-100 text-blue-800';
+			case 'dispensa':
+				return 'bg-yellow-100 text-yellow-800';
+			case 'inexgibilidade':
+				return 'bg-purple-100 text-purple-800';
+			case 'adesao':
+				return 'bg-green-100 text-green-800';
+			default:
+				return 'bg-gray-100 text-gray-800';
+		}
+	}
+
 	function getAcaoNome(acaoId: Id<'acoes'> | undefined) {
 		if (!acaoId) return '-';
 		const acao = acoes.find((a) => a._id === acaoId);
@@ -172,7 +205,8 @@
 			.map((match) => {
 				// Find name from selected items (might be multiple with same object, just pick one name)
 				const item = selectedItems.find((p) => p.objeto._id === match.objetoId);
-				return `${item?.objeto.nome}: ${match.quantidade} un.`;
+				const modalidadeLabel = formatModalidade(match.modalidade);
+				return `${item?.objeto.nome} (${modalidadeLabel}): ${match.quantidade} un.`;
 			})
 			.join(', ');

@@ -226,6 +260,8 @@

 		checking = true;
 		try {
+			// Importante: ação (acaoId) NÃO entra no filtro de similaridade.
+			// O filtro considera apenas combinação de objeto + modalidade.
 			const itensFiltro =
 				selectedItems.length > 0
 					? selectedItems.map((item) => ({
@@ -255,6 +291,11 @@

 	async function handleSubmit(e: Event) {
 		e.preventDefault();
+		if (hasMixedModalidades) {
+			error =
+				'Não é possível criar o pedido com itens de modalidades diferentes. Ajuste os itens antes de continuar.';
+			return;
+		}
 		creating = true;
 		error = null;
 		try {
@@ -369,32 +410,44 @@
 						<div class="space-y-3">
 							{#each selectedItems as item, index (index)}
 								<div
-									class="rounded-lg border border-gray-200 bg-gray-50 p-4 transition hover:shadow-md"
+									class="rounded-xl border border-gray-200 bg-gray-50 p-4 transition hover:shadow-md"
 								>
-									<div class="flex items-start justify-between">
-										<div class="flex-1">
-											<div class="flex items-center gap-2">
+									<div class="flex items-start justify-between gap-4">
+										<div class="flex-1 space-y-2">
+											<div class="flex flex-wrap items-center gap-2">
 												<p class="font-semibold text-gray-900">{item.objeto.nome}</p>
+												<span
+													class={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${getModalidadeBadgeClasses(
+														item.modalidade
+													)}`}
+												>
+													{formatModalidade(item.modalidade)}
+												</span>
 												{#if item.ataNumero}
 													<span
-														class="rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800"
+														class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800"
 													>
 														Ata {item.ataNumero}
 													</span>
 												{/if}
-											</div>
-											<div class="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-sm text-gray-600">
-												<span><strong>Qtd:</strong> {item.quantidade} {item.objeto.unidade}</span>
-												<span><strong>Modalidade:</strong> {item.modalidade}</span>
 												{#if item.acaoId}
-													<span><strong>Ação:</strong> {getAcaoNome(item.acaoId)}</span>
+													<span
+														class="inline-flex items-center rounded-full bg-indigo-100 px-2.5 py-0.5 text-xs font-medium text-indigo-800"
+													>
+														Ação: {getAcaoNome(item.acaoId)}
+													</span>
 												{/if}
 											</div>
+											<div class="flex flex-wrap gap-x-4 gap-y-1 text-sm text-gray-600">
+												<span>
+													<strong>Qtd:</strong> {item.quantidade} {item.objeto.unidade}
+												</span>
+											</div>
 										</div>
-										<div class="ml-4 flex items-center gap-2">
+										<div class="flex items-center gap-2">
 											<button
 												type="button"
-												class="rounded p-2 text-blue-600 transition hover:bg-blue-50"
+												class="rounded-lg p-2 text-blue-600 transition hover:bg-blue-50"
 												onclick={() => openDetails(item)}
 												aria-label="Ver detalhes"
 											>
@@ -402,7 +455,7 @@
 											</button>
 											<button
 												type="button"
-												class="rounded p-2 text-red-600 transition hover:bg-red-50"
+												class="rounded-lg p-2 text-red-600 transition hover:bg-red-50"
 												onclick={() => removeItem(index)}
 												aria-label="Remover item"
 											>
@@ -424,6 +477,18 @@
 			</div>

 			<!-- Warnings Section -->
+			{#if hasMixedModalidades}
+				<div
+					class="mb-3 rounded-lg border border-red-400 bg-red-50 px-4 py-3 text-sm text-red-800"
+				>
+					<p class="font-semibold">Modalidades diferentes detectadas</p>
+					<p>
+						Não é possível criar o pedido com itens de modalidades diferentes. Ajuste os itens para
+						usar uma única modalidade.
+					</p>
+				</div>
+			{/if}
+
 			{#if warning}
 				<div
 					class="rounded-lg border border-yellow-400 bg-yellow-50 px-4 py-3 text-sm text-yellow-800"
@@ -443,11 +508,25 @@
 					<ul class="space-y-2">
 						{#each existingPedidos as pedido (pedido._id)}
 							<li class="flex flex-col rounded-lg bg-white px-4 py-3 shadow-sm">
-								<div class="flex items-center justify-between">
-									<div>
+								<div class="flex items-center justify-between gap-3">
+									<div class="space-y-1">
 										<p class="text-sm font-medium text-gray-900">
 											Pedido {pedido.numeroSei || 'sem número SEI'} — {formatStatus(pedido.status)}
 										</p>
+										{#if getFirstMatchingSelectedItem(pedido)}
+											{#key pedido._id}
+												{#if getFirstMatchingSelectedItem(pedido)}
+													<span
+														class={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${getModalidadeBadgeClasses(
+															getFirstMatchingSelectedItem(pedido).modalidade
+														)}`}
+													>
+														Modalidade:{' '}
+														{formatModalidade(getFirstMatchingSelectedItem(pedido).modalidade)}
+													</span>
+												{/if}
+											{/key}
+										{/if}
 										{#if getMatchingInfo(pedido)}
 											<p class="mt-1 text-xs text-blue-700">
 												{getMatchingInfo(pedido)}
@@ -477,7 +556,7 @@
 				</a>
 				<button
 					type="submit"
-					disabled={creating || selectedItems.length === 0}
+					disabled={creating || selectedItems.length === 0 || hasMixedModalidades}
 					class="rounded-lg bg-blue-600 px-6 py-2.5 font-semibold text-white shadow-md transition hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
 				>
 					{creating ? 'Criando...' : 'Criar Pedido'}