From ec6ba1d95fe5388fbcbf4b2e72dab0ac29b93433 Mon Sep 17 00:00:00 2001
From: killer-cf <costa.kilder@live.com>
Date: Mon, 12 Jan 2026 14:52:46 -0300
Subject: [PATCH] fix some errors

---
 .../almoxarifado/materiais/+page.svelte       |  78 +-
 .../almoxarifado/movimentacoes/+page.svelte   | 442 ++++++----
 .../almoxarifado/requisicoes/+page.svelte     | 759 +++++++++++-------
 3 files changed, 771 insertions(+), 508 deletions(-)

diff --git a/apps/web/src/routes/(dashboard)/almoxarifado/materiais/+page.svelte b/apps/web/src/routes/(dashboard)/almoxarifado/materiais/+page.svelte
index aa9ed14..9d8952e 100644
--- a/apps/web/src/routes/(dashboard)/almoxarifado/materiais/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/almoxarifado/materiais/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { api } from '@sgse-app/backend/convex/_generated/api';
-	import type { Doc, Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import type { Doc } from '@sgse-app/backend/convex/_generated/dataModel';
 	import { useConvexClient, useQuery } from 'convex-svelte';
 	import { goto } from '$app/navigation';
 	import { resolve } from '$app/paths';
@@ -14,8 +14,7 @@
 		Trash2,
 		Info,
 		X,
-		Filter,
-		Barcode
+		Filter
 	} from 'lucide-svelte';
 	import BarcodeScanner from '$lib/components/almoxarifado/BarcodeScanner.svelte';
 
@@ -36,7 +35,20 @@
 			return [];
 		}
 	});
-	let filtered = $state<Array<Doc<'materiais'>>>([]);
+	let filtered = $derived.by(() => {
+		const busca = filtroBusca.toLowerCase();
+		return materiais.filter((m) => {
+			const okBusca =
+				!busca ||
+				m.codigo.toLowerCase().includes(busca) ||
+				m.nome.toLowerCase().includes(busca) ||
+				(m.codigoBarras && m.codigoBarras.toLowerCase().includes(busca));
+			const okCategoria = !filtroCategoria || m.categoria === filtroCategoria;
+			const okAtivo = filtroAtivo === '' || m.ativo === filtroAtivo;
+			const okEstoqueBaixo = !filtroEstoqueBaixo || m.estoqueAtual <= m.estoqueMinimo;
+			return okBusca && okCategoria && okAtivo && okEstoqueBaixo;
+		});
+	});
 	let filtroBusca = $state('');
 	let filtroCategoria = $state('');
 	let filtroAtivo = $state<boolean | ''>('');
@@ -59,21 +71,6 @@
 		Array.from(new Set(materiais.map((m) => m.categoria).filter(Boolean))).sort()
 	);
 
-	function applyFilters() {
-		const busca = filtroBusca.toLowerCase();
-		filtered = materiais.filter((m) => {
-			const okBusca =
-				!busca ||
-				m.codigo.toLowerCase().includes(busca) ||
-				m.nome.toLowerCase().includes(busca) ||
-				(m.codigoBarras && m.codigoBarras.toLowerCase().includes(busca));
-			const okCategoria = !filtroCategoria || m.categoria === filtroCategoria;
-			const okAtivo = filtroAtivo === '' || m.ativo === filtroAtivo;
-			const okEstoqueBaixo = !filtroEstoqueBaixo || m.estoqueAtual <= m.estoqueMinimo;
-			return okBusca && okCategoria && okAtivo && okEstoqueBaixo;
-		});
-	}
-
 	async function buscarPorCodigoBarras(codigo: string) {
 		if (!codigo.trim() || codigo.trim().length < 8) {
 			return;
@@ -102,14 +99,6 @@
 		}
 	}
 
-	// Aplicar filtros sempre que materiais ou filtros mudarem
-	$effect(() => {
-		// Acessar materiais para criar dependência reativa
-		const _ = materiais;
-		// Aplicar filtros
-		applyFilters();
-	});
-
 	function navCadastro() {
 		goto(resolve('/almoxarifado/materiais/cadastro'));
 	}
@@ -179,9 +168,6 @@
 		try {
 			excluindo = true;
 
-			// Remover item da lista localmente imediatamente (otimistic update)
-			filtered = filtered.filter((m) => m._id !== materialId);
-
 			await client.mutation(api.almoxarifado.deletarMaterial, {
 				id: materialId
 			});
@@ -197,9 +183,6 @@
 				notice = null;
 			}, 5000);
 		} catch (error: unknown) {
-			// Se houver erro, recarregar a lista para garantir consistência
-			applyFilters();
-
 			const message = error instanceof Error ? error.message : 'Erro ao excluir material';
 
 			// Determinar tipo de erro e criar mensagem mais clara
@@ -287,13 +270,13 @@
 		<div class="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
 			<div class="flex items-center gap-4">
 				<div
-					class="from-primary/20 via-primary/10 to-primary/5 border-primary/20 rounded-2xl border bg-gradient-to-br p-4 shadow-lg"
+					class="from-primary/20 via-primary/10 to-primary/5 border-primary/20 rounded-2xl border bg-linear-to-br p-4 shadow-lg"
 				>
 					<Package class="text-primary h-10 w-10" strokeWidth={2.5} />
 				</div>
 				<div class="flex-1">
 					<h1
-						class="from-primary to-primary/70 bg-gradient-to-r bg-clip-text text-4xl font-bold tracking-tight text-transparent"
+						class="from-primary to-primary/70 bg-linear-to-r bg-clip-text text-4xl font-bold tracking-tight text-transparent"
 					>
 						Materiais
 					</h1>
@@ -337,7 +320,7 @@
 			</div>
 			<div class="grid grid-cols-1 gap-6 md:grid-cols-4">
 				<div class="form-control">
-					<label class="label pb-2">
+					<label class="label pb-2" for="busca-material">
 						<span class="label-text flex items-center gap-2 font-semibold">
 							<Search class="h-4 w-4" />
 							Buscar
@@ -346,6 +329,7 @@
 					<div class="relative">
 						<Search class="text-base-content/40 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2" />
 						<input
+							id="busca-material"
 							type="text"
 							placeholder="Código, nome ou código de barras..."
 							class="input input-bordered focus:input-primary h-12 w-full pl-10 transition-colors {buscandoPorCodigoBarras
@@ -367,25 +351,27 @@
 				</div>
 
 				<div class="form-control">
-					<label class="label pb-2">
+					<label class="label pb-2" for="filtro-categoria">
 						<span class="label-text font-semibold">Categoria</span>
 					</label>
 					<select
+						id="filtro-categoria"
 						class="select select-bordered focus:select-primary h-12 w-full transition-colors"
 						bind:value={filtroCategoria}
 					>
 						<option value="">Todas as categorias</option>
-						{#each categorias as cat}
+						{#each categorias as cat (cat)}
 							<option value={cat}>{cat}</option>
 						{/each}
 					</select>
 				</div>
 
 				<div class="form-control">
-					<label class="label pb-2">
+					<label class="label pb-2" for="filtro-status">
 						<span class="label-text font-semibold">Status</span>
 					</label>
 					<select
+						id="filtro-status"
 						class="select select-bordered focus:select-primary h-12 w-full transition-colors"
 						bind:value={filtroAtivo}
 					>
@@ -396,13 +382,14 @@
 				</div>
 
 				<div class="form-control">
-					<label class="label pb-2">
+					<label class="label pb-2" for="filtro-estoque-baixo">
 						<span class="label-text font-semibold">Filtros Adicionais</span>
 					</label>
 					<label
 						class="label border-base-300 hover:bg-base-200 cursor-pointer justify-start gap-3 rounded-lg border p-3 transition-colors"
 					>
 						<input
+							id="filtro-estoque-baixo"
 							type="checkbox"
 							class="checkbox checkbox-primary"
 							bind:checked={filtroEstoqueBaixo}
@@ -453,8 +440,8 @@
 								</td>
 							</tr>
 						{:else}
-							{#each filtered as material}
-								<tr class="hover:bg-base-200/50 transition-colors" key={material._id}>
+							{#each filtered as material (material._id)}
+								<tr class="hover:bg-base-200/50 transition-colors">
 									<td>
 										<div class="text-primary font-mono font-bold">{material.codigo}</div>
 									</td>
@@ -499,7 +486,8 @@
 											<button
 												class="btn btn-sm btn-ghost hover:btn-primary transition-all"
 												title="Visualizar detalhes"
-												onclick={() => goto(resolve('/almoxarifado/materiais/' + material._id))}
+												onclick={() =>
+													goto(resolve('/almoxarifado/materiais/' + material._id) as any)}
 											>
 												<Eye class="h-4 w-4" />
 											</button>
@@ -507,7 +495,9 @@
 												class="btn btn-sm btn-ghost hover:btn-info transition-all"
 												title="Editar material"
 												onclick={() =>
-													goto(resolve('/almoxarifado/materiais/' + material._id + '/editar'))}
+													goto(
+														resolve('/almoxarifado/materiais/' + material._id + '/editar') as any
+													)}
 											>
 												<Edit class="h-4 w-4" />
 											</button>
diff --git a/apps/web/src/routes/(dashboard)/almoxarifado/movimentacoes/+page.svelte b/apps/web/src/routes/(dashboard)/almoxarifado/movimentacoes/+page.svelte
index f7716ec..5f21e8c 100644
--- a/apps/web/src/routes/(dashboard)/almoxarifado/movimentacoes/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/almoxarifado/movimentacoes/+page.svelte
@@ -1,9 +1,22 @@
 <script lang="ts">
 	import { api } from '@sgse-app/backend/convex/_generated/api';
 	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import type { FunctionReturnType } from 'convex/server';
 	import { useConvexClient, useQuery } from 'convex-svelte';
 	import { resolve } from '$app/paths';
-	import { ArrowLeftRight, ArrowDown, ArrowUp, Settings, History, Package, FileText, User, Building2, AlertCircle } from 'lucide-svelte';
+	import {
+		ArrowLeftRight,
+		ArrowDown,
+		ArrowUp,
+		Settings,
+		History,
+		Package,
+		FileText,
+		User,
+		Building2,
+		AlertCircle
+	} from 'lucide-svelte';
+	import { SvelteMap } from 'svelte/reactivity';
 	import BarcodeScanner from '$lib/components/almoxarifado/BarcodeScanner.svelte';
 
 	const client = useConvexClient();
@@ -44,20 +57,26 @@
 	const setoresQuery = useQuery(api.setores.list, {});
 	const movimentacoesQuery = useQuery(api.almoxarifado.listarMovimentacoesComHistorico, {});
 
+	type FuncionariosQueryResult = FunctionReturnType<typeof api.funcionarios.getAll>;
+	type Funcionario = FuncionariosQueryResult[number];
+
 	// Criar mapa de funcionários para lookup eficiente
 	const funcionariosMap = $derived.by(() => {
-		if (!funcionariosQuery.data) return new Map();
-		const map = new Map();
+		const map = new SvelteMap<Id<'funcionarios'>, Funcionario>();
+		if (!funcionariosQuery.data) return map;
 		for (const funcionario of funcionariosQuery.data) {
 			map.set(funcionario._id, funcionario);
 		}
 		return map;
 	});
 
+	type MateriaisQueryResult = FunctionReturnType<typeof api.almoxarifado.listarMateriais>;
+	type Material = MateriaisQueryResult[number];
+
 	// Criar mapa de materiais para lookup eficiente
 	const materiaisMap = $derived.by(() => {
-		if (!materiaisQuery.data) return new Map();
-		const map = new Map();
+		const map = new SvelteMap<Id<'materiais'>, Material>();
+		if (!materiaisQuery.data) return map;
 		for (const material of materiaisQuery.data) {
 			map.set(material._id, material);
 		}
@@ -170,9 +189,7 @@
 				materialId: saidaMaterialId as Id<'materiais'>,
 				quantidade: saidaQuantidade,
 				motivo: saidaMotivo.trim(),
-				funcionarioId: saidaFuncionarioId
-					? (saidaFuncionarioId as Id<'funcionarios'>)
-					: undefined,
+				funcionarioId: saidaFuncionarioId ? (saidaFuncionarioId as Id<'funcionarios'>) : undefined,
 				setorId: saidaSetorId ? (saidaSetorId as Id<'setores'>) : undefined,
 				observacoes: saidaObservacoes.trim() || undefined
 			});
@@ -235,9 +252,7 @@
 	<div class="breadcrumbs mb-6 text-sm">
 		<ul>
 			<li>
-				<a href={resolve('/almoxarifado')} class="text-primary hover:underline"
-					>Almoxarifado</a
-				>
+				<a href={resolve('/almoxarifado')} class="text-primary hover:underline">Almoxarifado</a>
 			</li>
 			<li>Movimentações</li>
 		</ul>
@@ -246,14 +261,20 @@
 	<!-- Cabeçalho -->
 	<div class="mb-8">
 		<div class="flex items-center gap-4">
-			<div class="rounded-2xl bg-gradient-to-br from-info/20 via-info/10 to-info/5 p-4 shadow-lg border border-info/20">
-				<ArrowLeftRight class="h-10 w-10 text-info" strokeWidth={2.5} />
+			<div
+				class="from-info/20 via-info/10 to-info/5 border-info/20 rounded-2xl border bg-linear-to-br p-4 shadow-lg"
+			>
+				<ArrowLeftRight class="text-info h-10 w-10" strokeWidth={2.5} />
 			</div>
 			<div class="flex-1">
-				<h1 class="text-4xl font-bold tracking-tight bg-gradient-to-r from-info to-info/70 bg-clip-text text-transparent">
+				<h1
+					class="from-info to-info/70 bg-linear-to-r bg-clip-text text-4xl font-bold tracking-tight text-transparent"
+				>
 					Movimentações de Estoque
 				</h1>
-				<p class="text-base-content/70 text-lg mt-1">Registre entradas, saídas e ajustes de estoque do almoxarifado</p>
+				<p class="text-base-content/70 mt-1 text-lg">
+					Registre entradas, saídas e ajustes de estoque do almoxarifado
+				</p>
 			</div>
 		</div>
 	</div>
@@ -266,50 +287,55 @@
 	{/if}
 
 	<!-- Abas -->
-	<div class="tabs tabs-boxed mb-8 bg-base-200 shadow-lg rounded-xl p-1">
+	<div class="tabs tabs-boxed bg-base-200 mb-8 rounded-xl p-1 shadow-lg">
 		<button
-			class="tab {abaAtiva === 'entrada' ? 'tab-active' : ''} transition-all font-semibold"
+			class="tab {abaAtiva === 'entrada' ? 'tab-active' : ''} font-semibold transition-all"
 			onclick={() => (abaAtiva = 'entrada')}
 		>
-			<ArrowDown class="h-5 w-5 mr-2" />
+			<ArrowDown class="mr-2 h-5 w-5" />
 			Entrada
 		</button>
 		<button
-			class="tab {abaAtiva === 'saida' ? 'tab-active' : ''} transition-all font-semibold"
+			class="tab {abaAtiva === 'saida' ? 'tab-active' : ''} font-semibold transition-all"
 			onclick={() => (abaAtiva = 'saida')}
 		>
-			<ArrowUp class="h-5 w-5 mr-2" />
+			<ArrowUp class="mr-2 h-5 w-5" />
 			Saída
 		</button>
 		<button
-			class="tab {abaAtiva === 'ajuste' ? 'tab-active' : ''} transition-all font-semibold"
+			class="tab {abaAtiva === 'ajuste' ? 'tab-active' : ''} font-semibold transition-all"
 			onclick={() => (abaAtiva = 'ajuste')}
 		>
-			<Settings class="h-5 w-5 mr-2" />
+			<Settings class="mr-2 h-5 w-5" />
 			Ajuste
 		</button>
 		<button
-			class="tab {abaAtiva === 'historico' ? 'tab-active' : ''} transition-all font-semibold"
+			class="tab {abaAtiva === 'historico' ? 'tab-active' : ''} font-semibold transition-all"
 			onclick={() => (abaAtiva = 'historico')}
 		>
-			<History class="h-5 w-5 mr-2" />
+			<History class="mr-2 h-5 w-5" />
 			Histórico
 		</button>
 	</div>
 
 	<!-- Conteúdo das Abas -->
 	{#if abaAtiva === 'entrada'}
-		<div class="card bg-base-100 border border-base-300 shadow-2xl">
+		<div class="card bg-base-100 border-base-300 border shadow-2xl">
 			<div class="card-body p-8">
-				<div class="mb-8 flex items-center gap-3 border-b-2 border-success/20 pb-4">
-					<div class="rounded-lg bg-success/10 p-2.5">
-						<ArrowDown class="h-6 w-6 text-success" strokeWidth={2.5} />
+				<div class="border-success/20 mb-8 flex items-center gap-3 border-b-2 pb-4">
+					<div class="bg-success/10 rounded-lg p-2.5">
+						<ArrowDown class="text-success h-6 w-6" strokeWidth={2.5} />
 					</div>
-					<h2 class="text-2xl font-bold text-base-content">Registrar Entrada de Material</h2>
+					<h2 class="text-base-content text-2xl font-bold">Registrar Entrada de Material</h2>
 				</div>
-				<form onsubmit={(e) => { e.preventDefault(); registrarEntrada(); }}>
+				<form
+					onsubmit={(e) => {
+						e.preventDefault();
+						registrarEntrada();
+					}}
+				>
 					<!-- Leitor de Código de Barras -->
-					<div class="mb-6 rounded-xl border border-base-300 bg-base-200/50 p-4">
+					<div class="border-base-300 bg-base-200/50 mb-6 rounded-xl border p-4">
 						<BarcodeScanner
 							enabled={entradaScannerEnabled}
 							onScan={buscarMaterialPorCodigoBarrasEntrada}
@@ -320,8 +346,8 @@
 					<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
 						<!-- Material -->
 						<div class="form-control md:col-span-2">
-							<label class="label pb-2">
-								<span class="label-text font-semibold flex items-center gap-2">
+							<label for="entradaMaterialId" class="label pb-2">
+								<span class="label-text flex items-center gap-2 font-semibold">
 									<Package class="h-4 w-4" />
 									Material <span class="text-error">*</span>
 									{#if entradaBuscandoMaterial}
@@ -329,17 +355,24 @@
 									{/if}
 								</span>
 							</label>
-							<select class="select select-bordered w-full focus:select-primary transition-colors h-12 {entradaBuscandoMaterial ? 'input-info' : ''}" bind:value={entradaMaterialId} required>
+							<select
+								id="entradaMaterialId"
+								class="select select-bordered focus:select-primary h-12 w-full transition-colors {entradaBuscandoMaterial
+									? 'input-info'
+									: ''}"
+								bind:value={entradaMaterialId}
+								required
+							>
 								<option value="">Selecione um material</option>
 								{#if materiaisQuery.data}
-									{#each materiaisQuery.data as material}
+									{#each materiaisQuery.data as material (material._id)}
 										<option value={material._id}>
 											{material.codigo} - {material.nome} (Estoque: {material.estoqueAtual}{material.unidadeMedida})
 										</option>
 									{/each}
 								{/if}
 							</select>
-							<label class="label pt-1">
+							<div class="label pt-1">
 								<span class="label-text-alt text-base-content/60">
 									{#if entradaBuscandoMaterial}
 										<span class="text-info">Buscando material...</span>
@@ -347,17 +380,20 @@
 										Selecione manualmente ou use o leitor de código de barras acima
 									{/if}
 								</span>
-							</label>
+							</div>
 						</div>
 
 						<!-- Quantidade -->
 						<div class="form-control">
-							<label class="label pb-2">
-								<span class="label-text font-semibold">Quantidade <span class="text-error">*</span></span>
+							<label for="entradaQuantidade" class="label pb-2">
+								<span class="label-text font-semibold"
+									>Quantidade <span class="text-error">*</span></span
+								>
 							</label>
 							<input
+								id="entradaQuantidade"
 								type="number"
-								class="input input-bordered w-full focus:input-primary transition-colors h-12"
+								class="input input-bordered focus:input-primary h-12 w-full transition-colors"
 								min="1"
 								step="1"
 								bind:value={entradaQuantidade}
@@ -372,54 +408,65 @@
 									}
 								}}
 							/>
-							<label class="label pt-1">
-								<span class="label-text-alt text-base-content/60">Quantidade a ser adicionada ao estoque</span>
-							</label>
+							<div class="label pt-1">
+								<span class="label-text-alt text-base-content/60"
+									>Quantidade a ser adicionada ao estoque</span
+								>
+							</div>
 						</div>
 
 						<!-- Documento -->
 						<div class="form-control">
-							<label class="label pb-2">
-								<span class="label-text font-semibold flex items-center gap-2">
+							<label for="entradaDocumento" class="label pb-2">
+								<span class="label-text flex items-center gap-2 font-semibold">
 									<FileText class="h-4 w-4" />
 									Documento
 								</span>
 							</label>
 							<input
+								id="entradaDocumento"
 								type="text"
-								class="input input-bordered w-full focus:input-primary transition-colors h-12"
+								class="input input-bordered focus:input-primary h-12 w-full transition-colors"
 								placeholder="Número da nota fiscal"
 								bind:value={entradaDocumento}
 							/>
-							<label class="label pt-1">
-								<span class="label-text-alt text-base-content/60">NF, nota fiscal ou documento relacionado</span>
-							</label>
+							<div class="label pt-1">
+								<span class="label-text-alt text-base-content/60"
+									>NF, nota fiscal ou documento relacionado</span
+								>
+							</div>
 						</div>
 
 						<!-- Motivo -->
 						<div class="form-control md:col-span-2">
-							<label class="label pb-2">
-								<span class="label-text font-semibold">Motivo <span class="text-error">*</span></span>
+							<label for="entradaMotivo" class="label pb-2">
+								<span class="label-text font-semibold"
+									>Motivo <span class="text-error">*</span></span
+								>
 							</label>
 							<input
+								id="entradaMotivo"
 								type="text"
-								class="input input-bordered w-full focus:input-primary transition-colors h-12"
+								class="input input-bordered focus:input-primary h-12 w-full transition-colors"
 								placeholder="Ex: Compra, Doação, Devolução"
 								bind:value={entradaMotivo}
 								required
 							/>
-							<label class="label pt-1">
-								<span class="label-text-alt text-base-content/60">Razão da entrada do material no estoque</span>
-							</label>
+							<div class="label pt-1">
+								<span class="label-text-alt text-base-content/60"
+									>Razão da entrada do material no estoque</span
+								>
+							</div>
 						</div>
 
 						<!-- Observações -->
 						<div class="form-control md:col-span-2">
-							<label class="label pb-2">
+							<label for="entradaObservacoes" class="label pb-2">
 								<span class="label-text font-semibold">Observações</span>
 							</label>
 							<textarea
-								class="textarea textarea-bordered w-full focus:textarea-primary transition-colors min-h-[100px]"
+								id="entradaObservacoes"
+								class="textarea textarea-bordered focus:textarea-primary min-h-[100px] w-full transition-colors"
 								placeholder="Observações adicionais (opcional)"
 								bind:value={entradaObservacoes}
 								rows="3"
@@ -427,8 +474,12 @@
 						</div>
 					</div>
 
-					<div class="card-actions mt-8 justify-end gap-4 border-t-2 border-base-300 pt-6">
-						<button type="submit" class="btn btn-success btn-lg min-w-[180px] shadow-lg hover:shadow-xl transition-all" disabled={entradaLoading}>
+					<div class="card-actions border-base-300 mt-8 justify-end gap-4 border-t-2 pt-6">
+						<button
+							type="submit"
+							class="btn btn-success btn-lg min-w-[180px] shadow-lg transition-all hover:shadow-xl"
+							disabled={entradaLoading}
+						>
 							{#if entradaLoading}
 								<span class="loading loading-spinner loading-sm"></span>
 								Registrando...
@@ -442,17 +493,22 @@
 			</div>
 		</div>
 	{:else if abaAtiva === 'saida'}
-		<div class="card bg-base-100 border border-base-300 shadow-2xl">
+		<div class="card bg-base-100 border-base-300 border shadow-2xl">
 			<div class="card-body p-8">
-				<div class="mb-8 flex items-center gap-3 border-b-2 border-error/20 pb-4">
-					<div class="rounded-lg bg-error/10 p-2.5">
-						<ArrowUp class="h-6 w-6 text-error" strokeWidth={2.5} />
+				<div class="border-error/20 mb-8 flex items-center gap-3 border-b-2 pb-4">
+					<div class="bg-error/10 rounded-lg p-2.5">
+						<ArrowUp class="text-error h-6 w-6" strokeWidth={2.5} />
 					</div>
-					<h2 class="text-2xl font-bold text-base-content">Registrar Saída de Material</h2>
+					<h2 class="text-base-content text-2xl font-bold">Registrar Saída de Material</h2>
 				</div>
-				<form onsubmit={(e) => { e.preventDefault(); registrarSaida(); }}>
+				<form
+					onsubmit={(e) => {
+						e.preventDefault();
+						registrarSaida();
+					}}
+				>
 					<!-- Leitor de Código de Barras -->
-					<div class="mb-6 rounded-xl border border-base-300 bg-base-200/50 p-4">
+					<div class="border-base-300 bg-base-200/50 mb-6 rounded-xl border p-4">
 						<BarcodeScanner
 							enabled={saidaScannerEnabled}
 							onScan={buscarMaterialPorCodigoBarrasSaida}
@@ -463,8 +519,8 @@
 					<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
 						<!-- Material -->
 						<div class="form-control md:col-span-2">
-							<label class="label pb-2">
-								<span class="label-text font-semibold flex items-center gap-2">
+							<label for="saidaMaterialId" class="label pb-2">
+								<span class="label-text flex items-center gap-2 font-semibold">
 									<Package class="h-4 w-4" />
 									Material <span class="text-error">*</span>
 									{#if saidaBuscandoMaterial}
@@ -472,17 +528,24 @@
 									{/if}
 								</span>
 							</label>
-							<select class="select select-bordered w-full focus:select-primary transition-colors h-12 {saidaBuscandoMaterial ? 'input-info' : ''}" bind:value={saidaMaterialId} required>
+							<select
+								id="saidaMaterialId"
+								class="select select-bordered focus:select-primary h-12 w-full transition-colors {saidaBuscandoMaterial
+									? 'input-info'
+									: ''}"
+								bind:value={saidaMaterialId}
+								required
+							>
 								<option value="">Selecione um material</option>
 								{#if materiaisQuery.data}
-									{#each materiaisQuery.data as material}
+									{#each materiaisQuery.data as material (material._id)}
 										<option value={material._id}>
 											{material.codigo} - {material.nome} (Estoque: {material.estoqueAtual}{material.unidadeMedida})
 										</option>
 									{/each}
 								{/if}
 							</select>
-							<label class="label pt-1">
+							<div class="label pt-1">
 								<span class="label-text-alt text-base-content/60">
 									{#if saidaBuscandoMaterial}
 										<span class="text-info">Buscando material...</span>
@@ -490,17 +553,20 @@
 										Selecione manualmente ou use o leitor de código de barras acima
 									{/if}
 								</span>
-							</label>
+							</div>
 						</div>
 
 						<!-- Quantidade -->
 						<div class="form-control">
-							<label class="label pb-2">
-								<span class="label-text font-semibold">Quantidade <span class="text-error">*</span></span>
+							<label for="saidaQuantidade" class="label pb-2">
+								<span class="label-text font-semibold"
+									>Quantidade <span class="text-error">*</span></span
+								>
 							</label>
 							<input
+								id="saidaQuantidade"
 								type="number"
-								class="input input-bordered w-full focus:input-primary transition-colors h-12"
+								class="input input-bordered focus:input-primary h-12 w-full transition-colors"
 								min="1"
 								step="1"
 								bind:value={saidaQuantidade}
@@ -515,77 +581,97 @@
 									}
 								}}
 							/>
-							<label class="label pt-1">
-								<span class="label-text-alt text-base-content/60">Quantidade a ser retirada do estoque</span>
-							</label>
+							<div class="label pt-1">
+								<span class="label-text-alt text-base-content/60"
+									>Quantidade a ser retirada do estoque</span
+								>
+							</div>
 						</div>
 
 						<!-- Funcionário -->
 						<div class="form-control">
-							<label class="label pb-2">
-								<span class="label-text font-semibold flex items-center gap-2">
+							<label for="saidaFuncionarioId" class="label pb-2">
+								<span class="label-text flex items-center gap-2 font-semibold">
 									<User class="h-4 w-4" />
 									Funcionário
 								</span>
 							</label>
-							<select class="select select-bordered w-full focus:select-primary transition-colors h-12" bind:value={saidaFuncionarioId}>
+							<select
+								id="saidaFuncionarioId"
+								class="select select-bordered focus:select-primary h-12 w-full transition-colors"
+								bind:value={saidaFuncionarioId}
+							>
 								<option value="">Selecione (opcional)</option>
 								{#if funcionariosQuery.data}
-									{#each funcionariosQuery.data as funcionario}
+									{#each funcionariosQuery.data as funcionario (funcionario._id)}
 										<option value={funcionario._id}>{funcionario.nome}</option>
 									{/each}
 								{/if}
 							</select>
-							<label class="label pt-1">
-								<span class="label-text-alt text-base-content/60">Funcionário que receberá o material</span>
-							</label>
+							<div class="label pt-1">
+								<span class="label-text-alt text-base-content/60"
+									>Funcionário que receberá o material</span
+								>
+							</div>
 						</div>
 
 						<!-- Setor -->
 						<div class="form-control">
-							<label class="label pb-2">
-								<span class="label-text font-semibold flex items-center gap-2">
+							<label for="saidaSetorId" class="label pb-2">
+								<span class="label-text flex items-center gap-2 font-semibold">
 									<Building2 class="h-4 w-4" />
 									Setor
 								</span>
 							</label>
-							<select class="select select-bordered w-full focus:select-primary transition-colors h-12" bind:value={saidaSetorId}>
+							<select
+								id="saidaSetorId"
+								class="select select-bordered focus:select-primary h-12 w-full transition-colors"
+								bind:value={saidaSetorId}
+							>
 								<option value="">Selecione (opcional)</option>
 								{#if setoresQuery.data}
-									{#each setoresQuery.data as setor}
+									{#each setoresQuery.data as setor (setor._id)}
 										<option value={setor._id}>{setor.nome}</option>
 									{/each}
 								{/if}
 							</select>
-							<label class="label pt-1">
-								<span class="label-text-alt text-base-content/60">Setor que receberá o material</span>
-							</label>
+							<div class="label pt-1">
+								<span class="label-text-alt text-base-content/60"
+									>Setor que receberá o material</span
+								>
+							</div>
 						</div>
 
 						<!-- Motivo -->
 						<div class="form-control md:col-span-2">
-							<label class="label pb-2">
-								<span class="label-text font-semibold">Motivo <span class="text-error">*</span></span>
+							<label for="saidaMotivo" class="label pb-2">
+								<span class="label-text font-semibold"
+									>Motivo <span class="text-error">*</span></span
+								>
 							</label>
 							<input
+								id="saidaMotivo"
 								type="text"
-								class="input input-bordered w-full focus:input-primary transition-colors h-12"
+								class="input input-bordered focus:input-primary h-12 w-full transition-colors"
 								placeholder="Ex: Uso interno, Empréstimo, Descarte"
 								bind:value={saidaMotivo}
 								required
 							/>
-							<label class="label pt-1">
-								<span class="label-text-alt text-base-content/60">Razão da saída do material do estoque</span>
-							</label>
+							<div class="label pt-1">
+								<span class="label-text-alt text-base-content/60"
+									>Razão da saída do material do estoque</span
+								>
+							</div>
 						</div>
 
 						<!-- Observações -->
 						<div class="form-control md:col-span-2">
-							<label class="label pb-2">
+							<label for="saidaObservacoes" class="label pb-2">
 								<span class="label-text font-semibold">Observações</span>
 							</label>
 							<textarea
-								class="textarea textarea-bordered w-full focus:textarea-primary transition-colors min-h-[100px]"
+								id="saidaObservacoes"
+								class="textarea textarea-bordered focus:textarea-primary min-h-[100px] w-full transition-colors"
 								placeholder="Observações adicionais (opcional)"
 								bind:value={saidaObservacoes}
 								rows="3"
@@ -593,8 +679,12 @@
 						</div>
 					</div>
 
-					<div class="card-actions mt-8 justify-end gap-4 border-t-2 border-base-300 pt-6">
-						<button type="submit" class="btn btn-error btn-lg min-w-[180px] shadow-lg hover:shadow-xl transition-all" disabled={saidaLoading}>
+					<div class="card-actions border-base-300 mt-8 justify-end gap-4 border-t-2 pt-6">
+						<button
+							type="submit"
+							class="btn btn-error btn-lg min-w-[180px] shadow-lg transition-all hover:shadow-xl"
+							disabled={saidaLoading}
+						>
 							{#if saidaLoading}
 								<span class="loading loading-spinner loading-sm"></span>
 								Registrando...
@@ -608,32 +698,45 @@
 			</div>
 		</div>
 	{:else if abaAtiva === 'ajuste'}
-		<div class="card bg-base-100 border border-base-300 shadow-2xl">
+		<div class="card bg-base-100 border-base-300 border shadow-2xl">
 			<div class="card-body p-8">
-				<div class="mb-8 flex items-center gap-3 border-b-2 border-warning/20 pb-4">
-					<div class="rounded-lg bg-warning/10 p-2.5">
-						<Settings class="h-6 w-6 text-warning" strokeWidth={2.5} />
+				<div class="border-warning/20 mb-8 flex items-center gap-3 border-b-2 pb-4">
+					<div class="bg-warning/10 rounded-lg p-2.5">
+						<Settings class="text-warning h-6 w-6" strokeWidth={2.5} />
 					</div>
-					<h2 class="text-2xl font-bold text-base-content">Ajustar Estoque</h2>
+					<h2 class="text-base-content text-2xl font-bold">Ajustar Estoque</h2>
 				</div>
-				<div class="alert alert-warning mb-8 shadow-lg border-2 border-warning/30">
+				<div class="alert alert-warning border-warning/30 mb-8 border-2 shadow-lg">
 					<AlertCircle class="h-6 w-6" />
-					<span class="font-semibold">Atenção: Ajustes de estoque devem ser justificados e são registrados permanentemente no histórico.</span>
+					<span class="font-semibold"
+						>Atenção: Ajustes de estoque devem ser justificados e são registrados permanentemente no
+						histórico.</span
+					>
 				</div>
-				<form onsubmit={(e) => { e.preventDefault(); ajustarEstoque(); }}>
+				<form
+					onsubmit={(e) => {
+						e.preventDefault();
+						ajustarEstoque();
+					}}
+				>
 					<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
 						<!-- Material -->
 						<div class="form-control md:col-span-2">
-							<label class="label pb-2">
-								<span class="label-text font-semibold flex items-center gap-2">
+							<label for="ajusteMaterialId" class="label pb-2">
+								<span class="label-text flex items-center gap-2 font-semibold">
 									<Package class="h-4 w-4" />
 									Material <span class="text-error">*</span>
 								</span>
 							</label>
-							<select class="select select-bordered w-full focus:select-primary transition-colors h-12" bind:value={ajusteMaterialId} required>
+							<select
+								id="ajusteMaterialId"
+								class="select select-bordered focus:select-primary h-12 w-full transition-colors"
+								bind:value={ajusteMaterialId}
+								required
+							>
 								<option value="">Selecione um material</option>
 								{#if materiaisQuery.data}
-									{#each materiaisQuery.data as material}
+									{#each materiaisQuery.data as material (material._id)}
 										<option value={material._id}>
 											{material.codigo} - {material.nome} (Atual: {material.estoqueAtual}{material.unidadeMedida})
 										</option>
@@ -644,12 +747,15 @@
 
 						<!-- Nova Quantidade -->
 						<div class="form-control md:col-span-2">
-							<label class="label pb-2">
-								<span class="label-text font-semibold">Nova Quantidade <span class="text-error">*</span></span>
+							<label for="ajusteQuantidadeNova" class="label pb-2">
+								<span class="label-text font-semibold"
+									>Nova Quantidade <span class="text-error">*</span></span
+								>
 							</label>
 							<input
+								id="ajusteQuantidadeNova"
 								type="number"
-								class="input input-bordered w-full focus:input-primary transition-colors h-12"
+								class="input input-bordered focus:input-primary h-12 w-full transition-colors"
 								min="0"
 								step="1"
 								bind:value={ajusteQuantidadeNova}
@@ -664,35 +770,43 @@
 									}
 								}}
 							/>
-							<label class="label pt-1">
-								<span class="label-text-alt text-base-content/60">Quantidade correta após o ajuste</span>
-							</label>
+							<div class="label pt-1">
+								<span class="label-text-alt text-base-content/60"
+									>Quantidade correta após o ajuste</span
+								>
+							</div>
 						</div>
 
 						<!-- Justificativa -->
 						<div class="form-control md:col-span-2">
-							<label class="label pb-2">
-								<span class="label-text font-semibold">Justificativa <span class="text-error">*</span></span>
+							<label for="ajusteMotivo" class="label pb-2">
+								<span class="label-text font-semibold"
+									>Justificativa <span class="text-error">*</span></span
+								>
 							</label>
 							<input
+								id="ajusteMotivo"
 								type="text"
-								class="input input-bordered w-full focus:input-primary transition-colors h-12"
+								class="input input-bordered focus:input-primary h-12 w-full transition-colors"
 								placeholder="Ex: Inventário físico, Correção de erro, Perda"
 								bind:value={ajusteMotivo}
 								required
 							/>
-							<label class="label pt-1">
-								<span class="label-text-alt text-base-content/60">Razão para o ajuste de estoque</span>
-							</label>
+							<div class="label pt-1">
+								<span class="label-text-alt text-base-content/60"
+									>Razão para o ajuste de estoque</span
+								>
+							</div>
 						</div>
 
 						<!-- Observações -->
 						<div class="form-control md:col-span-2">
-							<label class="label pb-2">
+							<label for="ajusteObservacoes" class="label pb-2">
 								<span class="label-text font-semibold">Observações</span>
 							</label>
 							<textarea
-								class="textarea textarea-bordered w-full focus:textarea-primary transition-colors min-h-[100px]"
+								id="ajusteObservacoes"
+								class="textarea textarea-bordered focus:textarea-primary min-h-[100px] w-full transition-colors"
 								placeholder="Observações adicionais (opcional)"
 								bind:value={ajusteObservacoes}
 								rows="3"
@@ -700,8 +814,12 @@
 						</div>
 					</div>
 
-					<div class="card-actions mt-8 justify-end gap-4 border-t-2 border-base-300 pt-6">
-						<button type="submit" class="btn btn-warning btn-lg min-w-[180px] shadow-lg hover:shadow-xl transition-all" disabled={ajusteLoading}>
+					<div class="card-actions border-base-300 mt-8 justify-end gap-4 border-t-2 pt-6">
+						<button
+							type="submit"
+							class="btn btn-warning btn-lg min-w-[180px] shadow-lg transition-all hover:shadow-xl"
+							disabled={ajusteLoading}
+						>
 							{#if ajusteLoading}
 								<span class="loading loading-spinner loading-sm"></span>
 								Ajustando...
@@ -715,34 +833,36 @@
 			</div>
 		</div>
 	{:else if abaAtiva === 'historico'}
-		<div class="card bg-base-100 border border-base-300 shadow-2xl">
+		<div class="card bg-base-100 border-base-300 border shadow-2xl">
 			<div class="card-body p-8">
-				<div class="mb-8 flex items-center gap-3 border-b-2 border-info/20 pb-4">
-					<div class="rounded-lg bg-info/10 p-2.5">
-						<History class="h-6 w-6 text-info" strokeWidth={2.5} />
+				<div class="border-info/20 mb-8 flex items-center gap-3 border-b-2 pb-4">
+					<div class="bg-info/10 rounded-lg p-2.5">
+						<History class="text-info h-6 w-6" strokeWidth={2.5} />
 					</div>
-					<h2 class="text-2xl font-bold text-base-content">Histórico de Movimentações</h2>
+					<h2 class="text-base-content text-2xl font-bold">Histórico de Movimentações</h2>
 				</div>
-				<div class="overflow-x-auto rounded-lg border border-base-300">
-					<table class="table table-zebra">
+				<div class="border-base-300 overflow-x-auto rounded-lg border">
+					<table class="table-zebra table">
 						<thead>
 							<tr class="bg-base-200">
-								<th class="font-bold text-base-content">Data</th>
-								<th class="font-bold text-base-content">Material</th>
-								<th class="font-bold text-base-content">Tipo</th>
-								<th class="font-bold text-base-content">Quantidade</th>
-								<th class="font-bold text-base-content">Anterior</th>
-								<th class="font-bold text-base-content">Nova</th>
-								<th class="font-bold text-base-content">Funcionário</th>
-								<th class="font-bold text-base-content">Usuário</th>
-								<th class="font-bold text-base-content">Motivo</th>
+								<th class="text-base-content font-bold">Data</th>
+								<th class="text-base-content font-bold">Material</th>
+								<th class="text-base-content font-bold">Tipo</th>
+								<th class="text-base-content font-bold">Quantidade</th>
+								<th class="text-base-content font-bold">Anterior</th>
+								<th class="text-base-content font-bold">Nova</th>
+								<th class="text-base-content font-bold">Funcionário</th>
+								<th class="text-base-content font-bold">Usuário</th>
+								<th class="text-base-content font-bold">Motivo</th>
 							</tr>
 						</thead>
 						<tbody>
 							{#if movimentacoesQuery.data && movimentacoesQuery.data.length > 0}
-								{#each movimentacoesQuery.data.slice(0, 100) as item}
+								{#each movimentacoesQuery.data.slice(0, 100) as item (item.id)}
 									{@const material = materiaisMap.get(item.materialId)}
-									{@const funcionario = item.funcionarioId ? funcionariosMap.get(item.funcionarioId) : null}
+									{@const funcionario = item.funcionarioId
+										? funcionariosMap.get(item.funcionarioId)
+										: null}
 									{@const isMovimentacao = item.tipo === 'movimentacao'}
 									{@const isAlteracao = item.tipo === 'alteracao'}
 									<tr class="hover:bg-base-200/50 transition-colors">
@@ -751,17 +871,21 @@
 										</td>
 										<td>
 											{#if isAlteracao && item.tipoAlteracao === 'exclusao'}
-												<div class="font-medium text-base-content/60 italic">
+												<div class="text-base-content/60 font-medium italic">
 													Material excluído (ID: {item.materialId})
 												</div>
 											{:else if material}
 												<div class="font-medium">{material.nome}</div>
 												{#if material.codigo}
-													<div class="text-xs text-base-content/50 font-mono">{material.codigo}</div>
+													<div class="text-base-content/50 font-mono text-xs">
+														{material.codigo}
+													</div>
 												{/if}
 											{:else}
-												<div class="font-medium text-base-content/60">Material não encontrado</div>
-												<div class="text-xs text-base-content/50 font-mono">ID: {item.materialId}</div>
+												<div class="text-base-content/60 font-medium">Material não encontrado</div>
+												<div class="text-base-content/50 font-mono text-xs">
+													ID: {item.materialId}
+												</div>
 											{/if}
 										</td>
 										<td>
@@ -810,7 +934,9 @@
 											{#if funcionario}
 												<div class="font-medium">{funcionario.nome}</div>
 												{#if funcionario.matricula}
-													<div class="text-xs text-base-content/50">Mat: {funcionario.matricula}</div>
+													<div class="text-base-content/50 text-xs">
+														Mat: {funcionario.matricula}
+													</div>
 												{/if}
 											{:else}
 												<span class="text-base-content/50 text-sm italic">—</span>
@@ -820,7 +946,7 @@
 											{#if item.usuarioNome}
 												<div class="font-medium">{item.usuarioNome}</div>
 												{#if isAlteracao}
-													<div class="text-xs text-base-content/50">
+													<div class="text-base-content/50 text-xs">
 														{#if item.tipoAlteracao === 'criacao'}
 															Criou
 														{:else if item.tipoAlteracao === 'edicao'}
@@ -843,8 +969,10 @@
 								<tr>
 									<td colspan="9" class="text-center">
 										<div class="py-12">
-											<History class="mx-auto mb-4 h-16 w-16 text-base-content/30" />
-											<p class="text-base-content/70 text-lg font-medium">Nenhuma movimentação registrada</p>
+											<History class="text-base-content/30 mx-auto mb-4 h-16 w-16" />
+											<p class="text-base-content/70 text-lg font-medium">
+												Nenhuma movimentação registrada
+											</p>
 										</div>
 									</td>
 								</tr>
@@ -856,5 +984,3 @@
 		</div>
 	{/if}
 </main>
-
-
diff --git a/apps/web/src/routes/(dashboard)/almoxarifado/requisicoes/+page.svelte b/apps/web/src/routes/(dashboard)/almoxarifado/requisicoes/+page.svelte
index bcfdfd9..4a79ca7 100644
--- a/apps/web/src/routes/(dashboard)/almoxarifado/requisicoes/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/almoxarifado/requisicoes/+page.svelte
@@ -3,7 +3,22 @@
 	import type { Doc, Id } from '@sgse-app/backend/convex/_generated/dataModel';
 	import { useConvexClient, useQuery } from 'convex-svelte';
 	import { resolve } from '$app/paths';
-	import { ClipboardList, Plus, CheckCircle, XCircle, Package, Filter, User, Building2, Calendar, FileText, Search, Hash, Eye, AlertTriangle } from 'lucide-svelte';
+	import {
+		ClipboardList,
+		Plus,
+		CheckCircle,
+		XCircle,
+		Package,
+		Filter,
+		User,
+		Building2,
+		FileText,
+		Search,
+		Hash,
+		Eye,
+		AlertTriangle
+	} from 'lucide-svelte';
+	import type { FunctionReturnType } from 'convex/server';
 	import ErrorModal from '$lib/components/ErrorModal.svelte';
 
 	const client = useConvexClient();
@@ -47,11 +62,11 @@
 		if (kind === 'error') {
 			// Para erros, usar modal
 			errorModalTitle = 'Erro ao processar requisição';
-			
+
 			// Extrair mensagem de erro amigável
 			let mensagemAmigavel = text;
 			let detalhesTecnicos = '';
-			
+
 			// Remover prefixos técnicos do Convex se existirem
 			if (text.includes('[CONVEX') || text.includes('Request ID')) {
 				// Extrair apenas a parte da mensagem de erro após o último ']'
@@ -61,23 +76,28 @@
 				}
 				detalhesTecnicos = 'Detalhes técnicos:\n' + text;
 			}
-			
+
 			// Melhorar mensagens específicas
 			if (mensagemAmigavel.includes('Funcionário não encontrado para o usuário')) {
 				errorModalTitle = 'Erro: Funcionário não encontrado';
 				mensagemAmigavel = 'Não foi possível encontrar o funcionário associado ao seu usuário.';
-				detalhesTecnicos = 'Por favor, entre em contato com o suporte técnico.\n\n' + 
+				detalhesTecnicos =
+					'Por favor, entre em contato com o suporte técnico.\n\n' +
 					'1. Verifique se o seu usuário está associado a um funcionário no sistema\n' +
 					'2. Solicite a associação do seu usuário a um funcionário\n' +
 					'3. Entre em contato com a equipe de TI se o problema persistir\n\n' +
-					'Detalhes técnicos:\n' + text;
+					'Detalhes técnicos:\n' +
+					text;
 			} else if (mensagemAmigavel.includes('não encontrado')) {
-				mensagemAmigavel = mensagemAmigavel.replace(/não encontrado/gi, 'não foi encontrado no sistema');
+				mensagemAmigavel = mensagemAmigavel.replace(
+					/não encontrado/gi,
+					'não foi encontrado no sistema'
+				);
 			}
-			
+
 			errorModalMessage = mensagemAmigavel;
 			errorModalDetails = detalhesTecnicos;
-			
+
 			showErrorModal = true;
 		} else {
 			// Para sucesso, usar banner simples
@@ -100,7 +120,8 @@
 				const okStatus = !filtroStatus || r.status === filtroStatus;
 				const okSolicitante = !filtroSolicitante || r.solicitanteId === filtroSolicitante;
 				const okSetor = !filtroSetor || r.setorId === filtroSetor;
-				const okNumero = !filtroNumero || r.numero.toLowerCase().includes(filtroNumero.toLowerCase());
+				const okNumero =
+					!filtroNumero || r.numero.toLowerCase().includes(filtroNumero.toLowerCase());
 				return okStatus && okSolicitante && okSetor && okNumero;
 			});
 		}
@@ -144,8 +165,15 @@
 	}
 
 	async function criarRequisicao() {
-		if (!novaRequisicaoSolicitanteId || !novaRequisicaoSetorId || novaRequisicaoItens.length === 0) {
-			mostrarMensagem('error', 'Preencha todos os campos obrigatórios e adicione pelo menos um item');
+		if (
+			!novaRequisicaoSolicitanteId ||
+			!novaRequisicaoSetorId ||
+			novaRequisicaoItens.length === 0
+		) {
+			mostrarMensagem(
+				'error',
+				'Preencha todos os campos obrigatórios e adicione pelo menos um item'
+			);
 			return;
 		}
 
@@ -174,12 +202,14 @@
 
 	let requisicaoParaAprovar = $state<Id<'requisicoesMaterial'> | null>(null);
 	let showModalAprovar = $state(false);
-	let problemasEstoqueAprovar = $state<Array<{
-		materialNome: string;
-		quantidadeSolicitada: number;
-		estoqueAtual: number;
-		falta: number;
-	}>>([]);
+	let problemasEstoqueAprovar = $state<
+		Array<{
+			materialNome: string;
+			quantidadeSolicitada: number;
+			estoqueAtual: number;
+			falta: number;
+		}>
+	>([]);
 	let processandoAprovar = $state(false);
 
 	function abrirModalAprovar(id: Id<'requisicoesMaterial'>) {
@@ -187,15 +217,18 @@
 		problemasEstoqueAprovar = [];
 		showModalAprovar = true;
 		processandoAprovar = false;
-		
+
 		// Verificar estoque quando abrir o modal
-		client.query(api.almoxarifado.verificarEstoqueRequisicao, { id }).then((verificacao) => {
-			if (!verificacao.temEstoqueSuficiente) {
-				problemasEstoqueAprovar = verificacao.problemasEstoque;
-			}
-		}).catch(() => {
-			// Ignorar erros na verificação prévia
-		});
+		client
+			.query(api.almoxarifado.verificarEstoqueRequisicao, { id })
+			.then((verificacao) => {
+				if (!verificacao.temEstoqueSuficiente) {
+					problemasEstoqueAprovar = verificacao.problemasEstoque;
+				}
+			})
+			.catch(() => {
+				// Ignorar erros na verificação prévia
+			});
 	}
 
 	function fecharModalAprovar() {
@@ -207,12 +240,12 @@
 
 	async function confirmarAprovar() {
 		if (!requisicaoParaAprovar) return;
-		
+
 		// Não permitir aprovação se houver problemas de estoque
 		if (problemasEstoqueAprovar.length > 0) {
 			return;
 		}
-		
+
 		try {
 			processandoAprovar = true;
 			await client.mutation(api.almoxarifado.aprovarRequisicao, { id: requisicaoParaAprovar });
@@ -232,26 +265,29 @@
 
 	let requisicaoParaVisualizar = $state<Id<'requisicoesMaterial'> | null>(null);
 	let showModalVisualizar = $state(false);
-	let requisicaoDetalhes = $state<any>(null);
+	let requisicaoDetalhes = $state<FunctionReturnType<
+		typeof api.almoxarifado.obterRequisicao
+	> | null>(null);
 	let carregandoDetalhes = $state(false);
 	let erroDetalhes = $state<string | null>(null);
-	
+
 	// Usar $effect para buscar dados quando requisicaoParaVisualizar muda
 	$effect(() => {
 		const id = requisicaoParaVisualizar;
-		
+
 		if (!id) {
 			requisicaoDetalhes = null;
 			carregandoDetalhes = false;
 			erroDetalhes = null;
 			return;
 		}
-		
+
 		carregandoDetalhes = true;
 		erroDetalhes = null;
 		requisicaoDetalhes = null;
-		
-		client.query(api.almoxarifado.obterRequisicao, { id })
+
+		client
+			.query(api.almoxarifado.obterRequisicao, { id })
 			.then((data) => {
 				// Verificar se o ID ainda é o mesmo (evitar race conditions)
 				if (requisicaoParaVisualizar === id) {
@@ -301,7 +337,7 @@
 
 	async function confirmarReprovar() {
 		if (!requisicaoParaReprovar) return;
-		
+
 		if (!motivoReprovacao.trim()) {
 			mostrarMensagem('error', 'É necessário informar o motivo da reprovação');
 			return;
@@ -341,7 +377,7 @@
 
 	async function confirmarAtender() {
 		if (!requisicaoParaAtender) return;
-		
+
 		try {
 			processandoAtender = true;
 			await client.mutation(api.almoxarifado.atenderRequisicao, { id: requisicaoParaAtender });
@@ -395,9 +431,7 @@
 	<div class="breadcrumbs mb-6 text-sm">
 		<ul>
 			<li>
-				<a href={resolve('/almoxarifado')} class="text-primary hover:underline"
-					>Almoxarifado</a
-				>
+				<a href={resolve('/almoxarifado')} class="text-primary hover:underline">Almoxarifado</a>
 			</li>
 			<li>Requisições</li>
 		</ul>
@@ -407,17 +441,26 @@
 	<div class="mb-8">
 		<div class="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
 			<div class="flex items-center gap-4">
-				<div class="rounded-2xl bg-gradient-to-br from-primary/20 via-primary/10 to-primary/5 p-4 shadow-lg border border-primary/20">
-					<ClipboardList class="h-10 w-10 text-primary" strokeWidth={2.5} />
+				<div
+					class="from-primary/20 via-primary/10 to-primary/5 border-primary/20 rounded-2xl border bg-linear-to-br p-4 shadow-lg"
+				>
+					<ClipboardList class="text-primary h-10 w-10" strokeWidth={2.5} />
 				</div>
 				<div class="flex-1">
-					<h1 class="text-4xl font-bold tracking-tight bg-gradient-to-r from-primary to-primary/70 bg-clip-text text-transparent">
+					<h1
+						class="from-primary to-primary/70 bg-linear-to-r bg-clip-text text-4xl font-bold tracking-tight text-transparent"
+					>
 						Requisições de Material
 					</h1>
-					<p class="text-base-content/70 text-lg mt-1">Gerencie requisições de material dos funcionários</p>
+					<p class="text-base-content/70 mt-1 text-lg">
+						Gerencie requisições de material dos funcionários
+					</p>
 				</div>
 			</div>
-			<button class="btn btn-primary btn-lg shadow-lg hover:shadow-xl transition-all min-w-[200px]" onclick={abrirModalNova}>
+			<button
+				class="btn btn-primary btn-lg min-w-[200px] shadow-lg transition-all hover:shadow-xl"
+				onclick={abrirModalNova}
+			>
 				<Plus class="h-5 w-5" />
 				Nova Requisição
 			</button>
@@ -441,88 +484,104 @@
 	/>
 
 	<!-- Filtros -->
-	<div class="card bg-base-100 border border-base-300 mb-8 shadow-2xl">
+	<div class="card bg-base-100 border-base-300 mb-8 border shadow-2xl">
 		<div class="card-body p-8">
-			<div class="mb-6 flex items-center gap-3 border-b-2 border-primary/20 pb-4">
-				<div class="rounded-lg bg-primary/10 p-2.5">
-					<Filter class="h-5 w-5 text-primary" strokeWidth={2.5} />
+			<div class="border-primary/20 mb-6 flex items-center gap-3 border-b-2 pb-4">
+				<div class="bg-primary/10 rounded-lg p-2.5">
+					<Filter class="text-primary h-5 w-5" strokeWidth={2.5} />
 				</div>
-				<h3 class="text-xl font-bold text-base-content">Filtros de Busca</h3>
+				<h3 class="text-base-content text-xl font-bold">Filtros de Busca</h3>
 			</div>
 			<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
 				<!-- Filtro: Número do Requerimento -->
 				<div class="form-control">
-					<label class="label pb-2">
-						<span class="label-text font-semibold flex items-center gap-2">
+					<label class="label pb-2" for="filtro-numero">
+						<span class="label-text flex items-center gap-2 font-semibold">
 							<Hash class="h-4 w-4" />
 							Número do Requerimento
 						</span>
 					</label>
 					<div class="relative">
-						<Search class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-base-content/40" />
+						<Search class="text-base-content/40 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2" />
 						<input
+							id="filtro-numero"
 							type="text"
 							placeholder="Ex: REQ-001"
-							class="input input-bordered w-full pl-10 h-12 focus:input-primary transition-colors"
+							class="input input-bordered focus:input-primary h-12 w-full pl-10 transition-colors"
 							bind:value={filtroNumero}
 						/>
 					</div>
-					<label class="label pt-1">
-						<span class="label-text-alt text-base-content/60">Busque pelo número da requisição</span>
-					</label>
+					<div class="label pt-1">
+						<span class="label-text-alt text-base-content/60">Busque pelo número da requisição</span
+						>
+					</div>
 				</div>
 
 				<!-- Filtro: Solicitante -->
 				<div class="form-control">
-					<label class="label pb-2">
-						<span class="label-text font-semibold flex items-center gap-2">
+					<label class="label pb-2" for="filtro-solicitante">
+						<span class="label-text flex items-center gap-2 font-semibold">
 							<User class="h-4 w-4" />
 							Solicitante
 						</span>
 					</label>
-					<select class="select select-bordered w-full focus:select-primary transition-colors h-12" bind:value={filtroSolicitante}>
+					<select
+						id="filtro-solicitante"
+						class="select select-bordered focus:select-primary h-12 w-full transition-colors"
+						bind:value={filtroSolicitante}
+					>
 						<option value="">Todos os solicitantes</option>
 						{#if funcionariosQuery.data}
-							{#each funcionariosQuery.data as funcionario}
+							{#each funcionariosQuery.data as funcionario (funcionario._id)}
 								<option value={funcionario._id}>{funcionario.nome}</option>
 							{/each}
 						{/if}
 					</select>
-					<label class="label pt-1">
-						<span class="label-text-alt text-base-content/60">Filtre por funcionário solicitante</span>
-					</label>
+					<div class="label pt-1">
+						<span class="label-text-alt text-base-content/60"
+							>Filtre por funcionário solicitante</span
+						>
+					</div>
 				</div>
 
 				<!-- Filtro: Setor -->
 				<div class="form-control">
-					<label class="label pb-2">
-						<span class="label-text font-semibold flex items-center gap-2">
+					<label class="label pb-2" for="filtro-setor">
+						<span class="label-text flex items-center gap-2 font-semibold">
 							<Building2 class="h-4 w-4" />
 							Setor
 						</span>
 					</label>
-					<select class="select select-bordered w-full focus:select-primary transition-colors h-12" bind:value={filtroSetor}>
+					<select
+						id="filtro-setor"
+						class="select select-bordered focus:select-primary h-12 w-full transition-colors"
+						bind:value={filtroSetor}
+					>
 						<option value="">Todos os setores</option>
 						{#if setoresQuery.data}
-							{#each setoresQuery.data as setor}
+							{#each setoresQuery.data as setor (setor._id)}
 								<option value={setor._id}>{setor.nome}</option>
 							{/each}
 						{/if}
 					</select>
-					<label class="label pt-1">
+					<div class="label pt-1">
 						<span class="label-text-alt text-base-content/60">Filtre por setor</span>
-					</label>
+					</div>
 				</div>
 
 				<!-- Filtro: Status -->
 				<div class="form-control">
-					<label class="label pb-2">
-						<span class="label-text font-semibold flex items-center gap-2">
+					<label class="label pb-2" for="filtro-status">
+						<span class="label-text flex items-center gap-2 font-semibold">
 							<FileText class="h-4 w-4" />
 							Status
 						</span>
 					</label>
-					<select class="select select-bordered w-full focus:select-primary transition-colors h-12" bind:value={filtroStatus}>
+					<select
+						id="filtro-status"
+						class="select select-bordered focus:select-primary h-12 w-full transition-colors"
+						bind:value={filtroStatus}
+					>
 						<option value="">Todos os status</option>
 						<option value="pendente">Pendente</option>
 						<option value="aprovada">Aprovada</option>
@@ -530,33 +589,34 @@
 						<option value="rejeitada">Rejeitada</option>
 						<option value="cancelada">Cancelada</option>
 					</select>
-					<label class="label pt-1">
-						<span class="label-text-alt text-base-content/60">Filtre as requisições por status</span>
-					</label>
+					<div class="label pt-1">
+						<span class="label-text-alt text-base-content/60">Filtre as requisições por status</span
+						>
+					</div>
 				</div>
 			</div>
 		</div>
 	</div>
 
 	<!-- Lista de Requisições -->
-	<div class="card bg-base-100 border border-base-300 shadow-2xl">
+	<div class="card bg-base-100 border-base-300 border shadow-2xl">
 		<div class="card-body p-8">
-			<div class="mb-6 flex items-center gap-3 border-b-2 border-base-300 pb-4">
-				<div class="rounded-lg bg-info/10 p-2.5">
-					<ClipboardList class="h-5 w-5 text-info" strokeWidth={2.5} />
+			<div class="border-base-300 mb-6 flex items-center gap-3 border-b-2 pb-4">
+				<div class="bg-info/10 rounded-lg p-2.5">
+					<ClipboardList class="text-info h-5 w-5" strokeWidth={2.5} />
 				</div>
-				<h3 class="text-xl font-bold text-base-content">Lista de Requisições</h3>
+				<h3 class="text-base-content text-xl font-bold">Lista de Requisições</h3>
 			</div>
-			<div class="overflow-x-auto rounded-lg border border-base-300">
-				<table class="table table-zebra">
+			<div class="border-base-300 overflow-x-auto rounded-lg border">
+				<table class="table-zebra table">
 					<thead>
 						<tr class="bg-base-200">
-							<th class="font-bold text-base-content">Número</th>
-							<th class="font-bold text-base-content">Solicitante</th>
-							<th class="font-bold text-base-content">Setor</th>
-							<th class="font-bold text-base-content">Status</th>
-							<th class="font-bold text-base-content">Data</th>
-							<th class="font-bold text-base-content">Ações</th>
+							<th class="text-base-content font-bold">Número</th>
+							<th class="text-base-content font-bold">Solicitante</th>
+							<th class="text-base-content font-bold">Setor</th>
+							<th class="text-base-content font-bold">Status</th>
+							<th class="text-base-content font-bold">Data</th>
+							<th class="text-base-content font-bold">Ações</th>
 						</tr>
 					</thead>
 					<tbody>
@@ -564,19 +624,25 @@
 							<tr>
 								<td colspan="6" class="text-center">
 									<div class="py-16">
-										<ClipboardList class="mx-auto mb-4 h-20 w-20 text-base-content/30" />
-										<p class="text-base-content/80 text-xl font-semibold mb-2">Nenhuma requisição encontrada</p>
-										<p class="text-base-content/60 text-base">Tente ajustar os filtros ou criar uma nova requisição</p>
+										<ClipboardList class="text-base-content/30 mx-auto mb-4 h-20 w-20" />
+										<p class="text-base-content/80 mb-2 text-xl font-semibold">
+											Nenhuma requisição encontrada
+										</p>
+										<p class="text-base-content/60 text-base">
+											Tente ajustar os filtros ou criar uma nova requisição
+										</p>
 									</div>
 								</td>
 							</tr>
 						{:else}
-							{#each requisicoes as requisicao}
-								{@const solicitante = funcionariosQuery.data?.find(f => f._id === requisicao.solicitanteId)}
-								{@const setor = setoresQuery.data?.find(s => s._id === requisicao.setorId)}
+							{#each requisicoes as requisicao (requisicao._id)}
+								{@const solicitante = funcionariosQuery.data?.find(
+									(f) => f._id === requisicao.solicitanteId
+								)}
+								{@const setor = setoresQuery.data?.find((s) => s._id === requisicao.setorId)}
 								<tr class="hover:bg-base-200/50 transition-colors">
 									<td>
-										<div class="font-mono font-bold text-primary">{requisicao.numero}</div>
+										<div class="text-primary font-mono font-bold">{requisicao.numero}</div>
 									</td>
 									<td>
 										<div class="font-medium">{solicitante?.nome || 'Carregando...'}</div>
@@ -590,14 +656,20 @@
 												{getStatusLabel(requisicao.status)}
 											</span>
 											{#if requisicao.status === 'rejeitada' && requisicao.motivoReprovacao}
-												<div class="text-xs text-error mt-1 max-w-xs truncate" title={requisicao.motivoReprovacao}>
-													<strong>Motivo:</strong> {requisicao.motivoReprovacao}
+												<div
+													class="text-error mt-1 max-w-xs truncate text-xs"
+													title={requisicao.motivoReprovacao}
+												>
+													<strong>Motivo:</strong>
+													{requisicao.motivoReprovacao}
 												</div>
 											{/if}
 										</div>
 									</td>
 									<td>
-										<span class="text-sm">{new Date(requisicao.criadoEm).toLocaleDateString('pt-BR')}</span>
+										<span class="text-sm"
+											>{new Date(requisicao.criadoEm).toLocaleDateString('pt-BR')}</span
+										>
 									</td>
 									<td>
 										<div class="flex gap-2">
@@ -645,11 +717,14 @@
 			</div>
 
 			{#if requisicoes.length > 0}
-				<div class="mt-8 flex items-center justify-between border-t-2 border-base-300 pt-6">
-					<div class="text-base font-semibold text-base-content/80">
-						Mostrando <span class="text-primary font-bold">{requisicoes.length}</span> requisição{requisicoes.length !== 1 ? 'ões' : ''}
+				<div class="border-base-300 mt-8 flex items-center justify-between border-t-2 pt-6">
+					<div class="text-base-content/80 text-base font-semibold">
+						Mostrando <span class="text-primary font-bold">{requisicoes.length}</span>
+						requisição{requisicoes.length !== 1 ? 'ões' : ''}
 						{#if requisicoesQuery.data && requisicoesQuery.data.length !== requisicoes.length}
-							<span class="text-base-content/60"> de <span class="text-primary font-bold">{requisicoesQuery.data.length}</span> total</span>
+							<span class="text-base-content/60">
+								de <span class="text-primary font-bold">{requisicoesQuery.data.length}</span> total</span
+							>
 						{/if}
 					</div>
 				</div>
@@ -660,88 +735,104 @@
 	<!-- Modal Nova Requisição -->
 	{#if showModalNova}
 		<div class="modal modal-open backdrop-blur-sm">
-			<div class="modal-box max-w-4xl border border-base-300 shadow-2xl">
-				<div class="mb-6 flex items-center gap-4 border-b-2 border-primary/20 pb-4">
-					<div class="rounded-2xl bg-primary/20 p-3">
-						<ClipboardList class="h-8 w-8 text-primary" strokeWidth={2.5} />
+			<div class="modal-box border-base-300 max-w-4xl border shadow-2xl">
+				<div class="border-primary/20 mb-6 flex items-center gap-4 border-b-2 pb-4">
+					<div class="bg-primary/20 rounded-2xl p-3">
+						<ClipboardList class="text-primary h-8 w-8" strokeWidth={2.5} />
 					</div>
 					<div>
-						<h3 class="text-2xl font-bold text-base-content">Nova Requisição de Material</h3>
+						<h3 class="text-base-content text-2xl font-bold">Nova Requisição de Material</h3>
 						<p class="text-base-content/70 mt-1">Preencha os dados da requisição</p>
 					</div>
 				</div>
 
 				<!-- Seção: Informações Básicas -->
 				<div class="mb-8">
-					<div class="mb-6 flex items-center gap-3 border-b-2 border-info/20 pb-4">
-						<div class="rounded-lg bg-info/10 p-2.5">
-							<FileText class="h-5 w-5 text-info" strokeWidth={2.5} />
+					<div class="border-info/20 mb-6 flex items-center gap-3 border-b-2 pb-4">
+						<div class="bg-info/10 rounded-lg p-2.5">
+							<FileText class="text-info h-5 w-5" strokeWidth={2.5} />
 						</div>
-						<h4 class="text-lg font-bold text-base-content">Informações Básicas</h4>
+						<h4 class="text-base-content text-lg font-bold">Informações Básicas</h4>
 					</div>
 
 					<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
 						<div class="form-control">
-							<label class="label pb-2">
-								<span class="label-text font-semibold flex items-center gap-2">
+							<label class="label pb-2" for="nova-solicitante">
+								<span class="label-text flex items-center gap-2 font-semibold">
 									<User class="h-4 w-4" />
 									Solicitante <span class="text-error">*</span>
 								</span>
 							</label>
-							<select class="select select-bordered w-full focus:select-primary transition-colors h-12" bind:value={novaRequisicaoSolicitanteId} required>
+							<select
+								id="nova-solicitante"
+								class="select select-bordered focus:select-primary h-12 w-full transition-colors"
+								bind:value={novaRequisicaoSolicitanteId}
+								required
+							>
 								<option value="">Selecione um funcionário</option>
 								{#if funcionariosQuery.data}
-									{#each funcionariosQuery.data as funcionario}
+									{#each funcionariosQuery.data as funcionario (funcionario._id)}
 										<option value={funcionario._id}>{funcionario.nome}</option>
 									{/each}
 								{/if}
 							</select>
-							<label class="label pt-1">
-								<span class="label-text-alt text-base-content/60">Funcionário que está solicitando</span>
-							</label>
+							<div class="label pt-1">
+								<span class="label-text-alt text-base-content/60"
+									>Funcionário que está solicitando</span
+								>
+							</div>
 						</div>
 
 						<div class="form-control">
-							<label class="label pb-2">
-								<span class="label-text font-semibold flex items-center gap-2">
+							<label class="label pb-2" for="nova-setor">
+								<span class="label-text flex items-center gap-2 font-semibold">
 									<Building2 class="h-4 w-4" />
 									Setor <span class="text-error">*</span>
 								</span>
 							</label>
-							<select class="select select-bordered w-full focus:select-primary transition-colors h-12" bind:value={novaRequisicaoSetorId} required>
+							<select
+								id="nova-setor"
+								class="select select-bordered focus:select-primary h-12 w-full transition-colors"
+								bind:value={novaRequisicaoSetorId}
+								required
+							>
 								<option value="">Selecione um setor</option>
 								{#if setoresQuery.data}
-									{#each setoresQuery.data as setor}
+									{#each setoresQuery.data as setor (setor._id)}
 										<option value={setor._id}>{setor.nome}</option>
 									{/each}
 								{/if}
 							</select>
-							<label class="label pt-1">
+							<div class="label pt-1">
 								<span class="label-text-alt text-base-content/60">Setor do solicitante</span>
-							</label>
+							</div>
 						</div>
 					</div>
 				</div>
 
 				<!-- Seção: Itens da Requisição -->
 				<div class="mb-8">
-					<div class="mb-6 flex items-center gap-3 border-b-2 border-warning/20 pb-4">
-						<div class="rounded-lg bg-warning/10 p-2.5">
-							<Package class="h-5 w-5 text-warning" strokeWidth={2.5} />
+					<div class="border-warning/20 mb-6 flex items-center gap-3 border-b-2 pb-4">
+						<div class="bg-warning/10 rounded-lg p-2.5">
+							<Package class="text-warning h-5 w-5" strokeWidth={2.5} />
 						</div>
-						<h4 class="text-lg font-bold text-base-content">Itens da Requisição</h4>
+						<h4 class="text-base-content text-lg font-bold">Itens da Requisição</h4>
 					</div>
 
 					<!-- Adicionar Item -->
-					<div class="grid grid-cols-1 gap-6 md:grid-cols-3 mb-6">
+					<div class="mb-6 grid grid-cols-1 gap-6 md:grid-cols-3">
 						<div class="form-control">
-							<label class="label pb-2">
+							<label class="label pb-2" for="novo-item-material">
 								<span class="label-text font-semibold">Material</span>
 							</label>
-							<select class="select select-bordered w-full focus:select-primary transition-colors h-12" bind:value={novoItemMaterialId}>
+							<select
+								id="novo-item-material"
+								class="select select-bordered focus:select-primary h-12 w-full transition-colors"
+								bind:value={novoItemMaterialId}
+							>
 								<option value="">Selecione um material</option>
 								{#if materiaisQuery.data}
-									{#each materiaisQuery.data as material}
+									{#each materiaisQuery.data as material (material._id)}
 										<option value={material._id}>
 											{material.codigo} - {material.nome}
 										</option>
@@ -751,12 +842,13 @@
 						</div>
 
 						<div class="form-control">
-							<label class="label pb-2">
+							<label class="label pb-2" for="novo-item-quantidade">
 								<span class="label-text font-semibold">Quantidade</span>
 							</label>
 							<input
+								id="novo-item-quantidade"
 								type="number"
-								class="input input-bordered w-full focus:input-primary transition-colors h-12"
+								class="input input-bordered focus:input-primary h-12 w-full transition-colors"
 								min="1"
 								step="1"
 								bind:value={novoItemQuantidade}
@@ -774,10 +866,14 @@
 						</div>
 
 						<div class="form-control">
-							<label class="label pb-2">
+							<div class="label pb-2">
 								<span class="label-text font-semibold">Ações</span>
-							</label>
-							<button type="button" class="btn btn-primary w-full h-12 shadow-lg hover:shadow-xl transition-all" onclick={adicionarItem}>
+							</div>
+							<button
+								type="button"
+								class="btn btn-primary h-12 w-full shadow-lg transition-all hover:shadow-xl"
+								onclick={adicionarItem}
+							>
 								<Plus class="h-5 w-5" />
 								Adicionar Item
 							</button>
@@ -786,28 +882,32 @@
 
 					<!-- Lista de Itens -->
 					{#if novaRequisicaoItens.length > 0}
-						<div class="overflow-x-auto mb-6 rounded-lg border border-base-300">
-							<table class="table table-zebra">
+						<div class="border-base-300 mb-6 overflow-x-auto rounded-lg border">
+							<table class="table-zebra table">
 								<thead>
 									<tr class="bg-base-200">
-										<th class="font-bold text-base-content">Material</th>
-										<th class="font-bold text-base-content">Quantidade</th>
-										<th class="font-bold text-base-content">Ações</th>
+										<th class="text-base-content font-bold">Material</th>
+										<th class="text-base-content font-bold">Quantidade</th>
+										<th class="text-base-content font-bold">Ações</th>
 									</tr>
 								</thead>
 								<tbody>
-									{#each novaRequisicaoItens as item}
-										{@const material = materiaisQuery.data?.find(m => m._id === item.materialId)}
+									{#each novaRequisicaoItens as item (item.id)}
+										{@const material = materiaisQuery.data?.find((m) => m._id === item.materialId)}
 										<tr class="hover:bg-base-200/50 transition-colors">
 											<td>
 												<div class="font-medium">{material?.nome || 'Carregando...'}</div>
 												{#if material?.codigo}
-													<div class="text-xs text-base-content/50 font-mono">{material.codigo}</div>
+													<div class="text-base-content/50 font-mono text-xs">
+														{material.codigo}
+													</div>
 												{/if}
 											</td>
 											<td>
 												<span class="font-semibold">{item.quantidade}</span>
-												<span class="text-sm text-base-content/60 ml-1">{material?.unidadeMedida || ''}</span>
+												<span class="text-base-content/60 ml-1 text-sm"
+													>{material?.unidadeMedida || ''}</span
+												>
 											</td>
 											<td>
 												<button
@@ -824,11 +924,13 @@
 							</table>
 						</div>
 					{:else}
-						<div class="alert alert-info mb-6 border-info/30 bg-info/10">
-							<Package class="h-5 w-5 text-info" />
+						<div class="alert alert-info border-info/30 bg-info/10 mb-6">
+							<Package class="text-info h-5 w-5" />
 							<div>
-								<p class="font-semibold text-base-content">Nenhum item adicionado</p>
-								<p class="text-sm text-base-content/80 mt-1">Adicione pelo menos um item à requisição</p>
+								<p class="text-base-content font-semibold">Nenhum item adicionado</p>
+								<p class="text-base-content/80 mt-1 text-sm">
+									Adicione pelo menos um item à requisição
+								</p>
 							</div>
 						</div>
 					{/if}
@@ -836,34 +938,45 @@
 
 				<!-- Seção: Observações -->
 				<div class="mb-8">
-					<div class="mb-6 flex items-center gap-3 border-b-2 border-success/20 pb-4">
-						<div class="rounded-lg bg-success/10 p-2.5">
-							<FileText class="h-5 w-5 text-success" strokeWidth={2.5} />
+					<div class="border-success/20 mb-6 flex items-center gap-3 border-b-2 pb-4">
+						<div class="bg-success/10 rounded-lg p-2.5">
+							<FileText class="text-success h-5 w-5" strokeWidth={2.5} />
 						</div>
-						<h4 class="text-lg font-bold text-base-content">Observações</h4>
+						<h4 class="text-base-content text-lg font-bold">Observações</h4>
 					</div>
 
 					<div class="form-control">
-						<label class="label pb-2">
+						<label class="label pb-2" for="nova-observacoes">
 							<span class="label-text font-semibold">Observações Gerais</span>
 						</label>
 						<textarea
-							class="textarea textarea-bordered w-full focus:textarea-primary transition-colors"
+							id="nova-observacoes"
+							class="textarea textarea-bordered focus:textarea-primary w-full transition-colors"
 							placeholder="Observações gerais da requisição (opcional)"
 							bind:value={novaRequisicaoObservacoes}
 							rows="4"
 						></textarea>
-						<label class="label pt-1">
-							<span class="label-text-alt text-base-content/60">Informações adicionais sobre a requisição</span>
-						</label>
+						<div class="label pt-1">
+							<span class="label-text-alt text-base-content/60"
+								>Informações adicionais sobre a requisição</span
+							>
+						</div>
 					</div>
 				</div>
 
-				<div class="modal-action gap-3 border-t-2 border-base-300 pt-6">
-					<button class="btn btn-ghost btn-lg min-w-[140px]" onclick={fecharModalNova} disabled={criandoRequisicao}>
+				<div class="modal-action border-base-300 gap-3 border-t-2 pt-6">
+					<button
+						class="btn btn-ghost btn-lg min-w-[140px]"
+						onclick={fecharModalNova}
+						disabled={criandoRequisicao}
+					>
 						Cancelar
 					</button>
-					<button class="btn btn-primary btn-lg min-w-[200px] shadow-lg hover:shadow-xl" onclick={criarRequisicao} disabled={criandoRequisicao}>
+					<button
+						class="btn btn-primary btn-lg min-w-[200px] shadow-lg hover:shadow-xl"
+						onclick={criarRequisicao}
+						disabled={criandoRequisicao}
+					>
 						{#if criandoRequisicao}
 							<span class="loading loading-spinner loading-sm"></span>
 							Criando...
@@ -880,16 +993,20 @@
 	<!-- Modal Aprovar Requisição -->
 	{#if showModalAprovar}
 		<div class="modal modal-open backdrop-blur-sm">
-			<div class="modal-box max-w-2xl border border-base-300 shadow-2xl">
-				<div class="mb-6 flex items-center gap-4 border-b-2 border-success/20 pb-4">
-					<div class="rounded-2xl bg-success/20 p-3">
-						<CheckCircle class="h-8 w-8 text-success" strokeWidth={2.5} />
+			<div class="modal-box border-base-300 max-w-2xl border shadow-2xl">
+				<div class="border-success/20 mb-6 flex items-center gap-4 border-b-2 pb-4">
+					<div class="bg-success/20 rounded-2xl p-3">
+						<CheckCircle class="text-success h-8 w-8" strokeWidth={2.5} />
 					</div>
 					<div class="flex-1">
-						<h3 class="text-2xl font-bold text-base-content">Aprovar Requisição</h3>
+						<h3 class="text-base-content text-2xl font-bold">Aprovar Requisição</h3>
 						<p class="text-base-content/70 mt-1">Confirmar aprovação da requisição</p>
 					</div>
-					<button class="btn btn-ghost btn-sm" onclick={fecharModalAprovar} disabled={processandoAprovar}>
+					<button
+						class="btn btn-ghost btn-sm"
+						onclick={fecharModalAprovar}
+						disabled={processandoAprovar}
+					>
 						<XCircle class="h-5 w-5" />
 					</button>
 				</div>
@@ -897,20 +1014,21 @@
 				{#if problemasEstoqueAprovar.length > 0}
 					<div class="mb-6">
 						<div class="alert alert-warning border-warning/30 bg-warning/10">
-							<AlertTriangle class="h-5 w-5 text-warning" />
+							<AlertTriangle class="text-warning h-5 w-5" />
 							<div>
-								<h4 class="font-bold text-base-content">Estoque Insuficiente</h4>
-								<p class="text-sm text-base-content/80 mt-1">
+								<h4 class="text-base-content font-bold">Estoque Insuficiente</h4>
+								<p class="text-base-content/80 mt-1 text-sm">
 									A requisição contém materiais com estoque insuficiente:
 								</p>
-								<ul class="list-disc list-inside mt-2 text-sm text-base-content/80">
-									{#each problemasEstoqueAprovar as problema}
+								<ul class="text-base-content/80 mt-2 list-inside list-disc text-sm">
+									{#each problemasEstoqueAprovar as problema (problema.materialNome)}
 										<li>
-											{problema.materialNome}: solicitado {problema.quantidadeSolicitada}, disponível {problema.estoqueAtual} (faltam {problema.falta})
+											{problema.materialNome}: solicitado {problema.quantidadeSolicitada},
+											disponível {problema.estoqueAtual} (faltam {problema.falta})
 										</li>
 									{/each}
 								</ul>
-								<p class="text-sm text-base-content/80 mt-2">
+								<p class="text-base-content/80 mt-2 text-sm">
 									A aprovação permitirá atender apenas a quantidade disponível em estoque.
 								</p>
 							</div>
@@ -919,10 +1037,10 @@
 				{:else}
 					<div class="mb-6">
 						<div class="alert alert-info border-info/30 bg-info/10">
-							<CheckCircle class="h-5 w-5 text-info" />
+							<CheckCircle class="text-info h-5 w-5" />
 							<div>
-								<h4 class="font-bold text-base-content">Confirmar Aprovação</h4>
-								<p class="text-sm text-base-content/80 mt-1">
+								<h4 class="text-base-content font-bold">Confirmar Aprovação</h4>
+								<p class="text-base-content/80 mt-1 text-sm">
 									A requisição será aprovada e ficará disponível para atendimento.
 								</p>
 							</div>
@@ -930,17 +1048,17 @@
 					</div>
 				{/if}
 
-				<div class="modal-action gap-3 border-t-2 border-base-300 pt-6">
-					<button 
-						class="btn btn-ghost btn-lg min-w-[140px]" 
+				<div class="modal-action border-base-300 gap-3 border-t-2 pt-6">
+					<button
+						class="btn btn-ghost btn-lg min-w-[140px]"
 						onclick={fecharModalAprovar}
 						disabled={processandoAprovar}
 					>
 						Cancelar
 					</button>
 					{#if problemasEstoqueAprovar.length === 0}
-						<button 
-							class="btn btn-success btn-lg min-w-[200px] shadow-lg hover:shadow-xl" 
+						<button
+							class="btn btn-success btn-lg min-w-[200px] shadow-lg hover:shadow-xl"
 							onclick={confirmarAprovar}
 							disabled={processandoAprovar}
 						>
@@ -961,60 +1079,68 @@
 	<!-- Modal Reprovar Requisição -->
 	{#if showModalReprovar}
 		<div class="modal modal-open backdrop-blur-sm">
-			<div class="modal-box max-w-2xl border border-base-300 shadow-2xl">
-				<div class="mb-6 flex items-center gap-4 border-b-2 border-error/20 pb-4">
-					<div class="rounded-2xl bg-error/20 p-3">
-						<XCircle class="h-8 w-8 text-error" strokeWidth={2.5} />
+			<div class="modal-box border-base-300 max-w-2xl border shadow-2xl">
+				<div class="border-error/20 mb-6 flex items-center gap-4 border-b-2 pb-4">
+					<div class="bg-error/20 rounded-2xl p-3">
+						<XCircle class="text-error h-8 w-8" strokeWidth={2.5} />
 					</div>
 					<div class="flex-1">
-						<h3 class="text-2xl font-bold text-base-content">Reprovar Requisição</h3>
+						<h3 class="text-base-content text-2xl font-bold">Reprovar Requisição</h3>
 						<p class="text-base-content/70 mt-1">Informe o motivo da reprovação</p>
 					</div>
-					<button class="btn btn-ghost btn-sm" onclick={fecharModalReprovar} disabled={processandoReprovar}>
+					<button
+						class="btn btn-ghost btn-sm"
+						onclick={fecharModalReprovar}
+						disabled={processandoReprovar}
+					>
 						<XCircle class="h-5 w-5" />
 					</button>
 				</div>
 
 				<div class="mb-6">
 					<div class="alert alert-warning border-warning/30 bg-warning/10 mb-4">
-						<AlertTriangle class="h-5 w-5 text-warning" />
+						<AlertTriangle class="text-warning h-5 w-5" />
 						<div>
-							<h4 class="font-bold text-base-content">Confirmar Reprovação</h4>
-							<p class="text-sm text-base-content/80 mt-1">
-								O motivo informado será registrado e poderá ser visualizado pelo solicitante da requisição.
+							<h4 class="text-base-content font-bold">Confirmar Reprovação</h4>
+							<p class="text-base-content/80 mt-1 text-sm">
+								O motivo informado será registrado e poderá ser visualizado pelo solicitante da
+								requisição.
 							</p>
 						</div>
 					</div>
 					<div class="form-control">
-						<label class="label pb-2">
-							<span class="label-text font-semibold flex items-center gap-2">
+						<label class="label pb-2" for="motivo-reprovacao">
+							<span class="label-text flex items-center gap-2 font-semibold">
 								<FileText class="h-4 w-4" />
 								Motivo da Reprovação <span class="text-error">*</span>
 							</span>
 						</label>
 						<textarea
-							class="textarea textarea-bordered w-full focus:textarea-error transition-colors h-32"
+							id="motivo-reprovacao"
+							class="textarea textarea-bordered focus:textarea-error h-32 w-full transition-colors"
 							placeholder="Descreva o motivo da reprovação desta requisição..."
 							bind:value={motivoReprovacao}
 							rows="5"
 							disabled={processandoReprovar}
 						></textarea>
-						<label class="label pt-1">
-							<span class="label-text-alt text-base-content/60">Este motivo será registrado e poderá ser visualizado pelo solicitante</span>
-						</label>
+						<div class="label pt-1">
+							<span class="label-text-alt text-base-content/60"
+								>Este motivo será registrado e poderá ser visualizado pelo solicitante</span
+							>
+						</div>
 					</div>
 				</div>
 
-				<div class="modal-action gap-3 border-t-2 border-base-300 pt-6">
-					<button 
-						class="btn btn-ghost btn-lg min-w-[140px]" 
+				<div class="modal-action border-base-300 gap-3 border-t-2 pt-6">
+					<button
+						class="btn btn-ghost btn-lg min-w-[140px]"
 						onclick={fecharModalReprovar}
 						disabled={processandoReprovar}
 					>
 						Cancelar
 					</button>
-					<button 
-						class="btn btn-error btn-lg min-w-[200px] shadow-lg hover:shadow-xl" 
+					<button
+						class="btn btn-error btn-lg min-w-[200px] shadow-lg hover:shadow-xl"
 						onclick={confirmarReprovar}
 						disabled={!motivoReprovacao.trim() || processandoReprovar}
 					>
@@ -1034,19 +1160,23 @@
 	<!-- Modal Visualizar Requisição -->
 	{#if showModalVisualizar}
 		<div class="modal modal-open backdrop-blur-sm">
-			<div class="modal-box max-w-4xl border border-base-300 shadow-2xl">
-				<div class="mb-6 flex items-center gap-4 border-b-2 border-primary/20 pb-4">
-					<div class="rounded-2xl bg-primary/20 p-3">
-						<Eye class="h-8 w-8 text-primary" strokeWidth={2.5} />
+			<div class="modal-box border-base-300 max-w-4xl border shadow-2xl">
+				<div class="border-primary/20 mb-6 flex items-center gap-4 border-b-2 pb-4">
+					<div class="bg-primary/20 rounded-2xl p-3">
+						<Eye class="text-primary h-8 w-8" strokeWidth={2.5} />
 					</div>
 					<div class="flex-1">
-						<h3 class="text-2xl font-bold text-base-content">Detalhes da Requisição</h3>
+						<h3 class="text-base-content text-2xl font-bold">Detalhes da Requisição</h3>
 						{#if carregandoDetalhes}
 							<p class="text-base-content/70 mt-1">Carregando...</p>
 						{:else if erroDetalhes}
-							<p class="text-base-content/70 mt-1 text-error">Erro: {erroDetalhes}</p>
+							<p class="text-error mt-1">Erro: {erroDetalhes}</p>
 						{:else if requisicaoDetalhes}
-							<p class="text-base-content/70 mt-1">Número: <span class="font-mono font-bold text-primary">{requisicaoDetalhes.numero}</span></p>
+							<p class="text-base-content/70 mt-1">
+								Número: <span class="text-primary font-mono font-bold"
+									>{requisicaoDetalhes.numero}</span
+								>
+							</p>
 						{:else}
 							<p class="text-base-content/70 mt-1">Carregando...</p>
 						{/if}
@@ -1069,114 +1199,131 @@
 						</div>
 					</div>
 				{:else if requisicaoDetalhes}
-					{@const solicitanteDetalhes = funcionariosQuery?.data?.find(f => f._id === requisicaoDetalhes.solicitanteId)}
-					{@const setorDetalhes = setoresQuery?.data?.find(s => s._id === requisicaoDetalhes.setorId)}
+					{@const details = requisicaoDetalhes}
+					{@const solicitanteDetalhes = funcionariosQuery?.data?.find(
+						(f) => f._id === details.solicitanteId
+					)}
+					{@const setorDetalhes = setoresQuery?.data?.find((s) => s._id === details.setorId)}
 
 					<!-- Informações Básicas -->
 					<div class="mb-6">
-						<h4 class="mb-4 text-lg font-bold flex items-center gap-2">
+						<h4 class="mb-4 flex items-center gap-2 text-lg font-bold">
 							<FileText class="h-5 w-5" />
 							Informações Básicas
 						</h4>
 						<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-						<div class="card bg-base-200">
-							<div class="card-body p-4">
-								<div class="text-sm text-base-content/70">Solicitante</div>
-								<div class="font-semibold">{solicitanteDetalhes?.nome || 'Carregando...'}</div>
-							</div>
-						</div>
-						<div class="card bg-base-200">
-							<div class="card-body p-4">
-								<div class="text-sm text-base-content/70">Setor</div>
-								<div class="font-semibold">{setorDetalhes?.nome || 'Carregando...'}</div>
-							</div>
-						</div>
-						<div class="card bg-base-200">
-							<div class="card-body p-4">
-								<div class="text-sm text-base-content/70">Status</div>
-								<span class="badge {getStatusBadge(requisicaoDetalhes.status)} badge-lg">
-									{getStatusLabel(requisicaoDetalhes.status)}
-								</span>
-							</div>
-						</div>
-						<div class="card bg-base-200">
-							<div class="card-body p-4">
-								<div class="text-sm text-base-content/70">Data de Criação</div>
-								<div class="font-semibold">{new Date(requisicaoDetalhes.criadoEm).toLocaleString('pt-BR')}</div>
-							</div>
-						</div>
-						{#if requisicaoDetalhes.aprovadoPor}
-							{@const aprovador = funcionariosQuery.data?.find(f => f._id === requisicaoDetalhes.aprovadoPor)}
 							<div class="card bg-base-200">
 								<div class="card-body p-4">
-									<div class="text-sm text-base-content/70">Aprovado por</div>
-									<div class="font-semibold">{aprovador?.nome || 'Carregando...'}</div>
-									{#if requisicaoDetalhes.dataAprovacao}
-										<div class="text-xs text-base-content/60 mt-1">
-											{new Date(requisicaoDetalhes.dataAprovacao).toLocaleString('pt-BR')}
-										</div>
-									{/if}
+									<div class="text-base-content/70 text-sm">Solicitante</div>
+									<div class="font-semibold">{solicitanteDetalhes?.nome || 'Carregando...'}</div>
 								</div>
 							</div>
-						{/if}
-						{#if requisicaoDetalhes.reprovadoPor}
-							{@const reprovador = funcionariosQuery.data?.find(f => f._id === requisicaoDetalhes.reprovadoPor)}
 							<div class="card bg-base-200">
 								<div class="card-body p-4">
-									<div class="text-sm text-base-content/70">Reprovado por</div>
-									<div class="font-semibold">{reprovador?.nome || 'Carregando...'}</div>
-									{#if requisicaoDetalhes.dataReprovacao}
-										<div class="text-xs text-base-content/60 mt-1">
-											{new Date(requisicaoDetalhes.dataReprovacao).toLocaleString('pt-BR')}
-										</div>
-									{/if}
-									{#if requisicaoDetalhes.motivoReprovacao}
-										<div class="mt-2 text-sm">
-											<div class="text-xs text-base-content/70">Motivo:</div>
-											<div class="text-error">{requisicaoDetalhes.motivoReprovacao}</div>
-										</div>
-									{/if}
+									<div class="text-base-content/70 text-sm">Setor</div>
+									<div class="font-semibold">{setorDetalhes?.nome || 'Carregando...'}</div>
 								</div>
 							</div>
-						{/if}
+							<div class="card bg-base-200">
+								<div class="card-body p-4">
+									<div class="text-base-content/70 text-sm">Status</div>
+									<span class="badge {getStatusBadge(details.status)} badge-lg">
+										{getStatusLabel(details.status)}
+									</span>
+								</div>
+							</div>
+							<div class="card bg-base-200">
+								<div class="card-body p-4">
+									<div class="text-base-content/70 text-sm">Data de Criação</div>
+									<div class="font-semibold">
+										{new Date(details.criadoEm).toLocaleString('pt-BR')}
+									</div>
+								</div>
+							</div>
+							{#if details.aprovadoPor}
+								{@const aprovador = funcionariosQuery.data?.find(
+									(f) => f._id === details.aprovadoPor
+								)}
+								<div class="card bg-base-200">
+									<div class="card-body p-4">
+										<div class="text-base-content/70 text-sm">Aprovado por</div>
+										<div class="font-semibold">{aprovador?.nome || 'Carregando...'}</div>
+										{#if details.dataAprovacao}
+											<div class="text-base-content/60 mt-1 text-xs">
+												{new Date(details.dataAprovacao).toLocaleString('pt-BR')}
+											</div>
+										{/if}
+									</div>
+								</div>
+							{/if}
+							{#if details.reprovadoPor}
+								{@const reprovador = funcionariosQuery.data?.find(
+									(f) => f._id === details.reprovadoPor
+								)}
+								<div class="card bg-base-200">
+									<div class="card-body p-4">
+										<div class="text-base-content/70 text-sm">Reprovado por</div>
+										<div class="font-semibold">{reprovador?.nome || 'Carregando...'}</div>
+										{#if details.dataReprovacao}
+											<div class="text-base-content/60 mt-1 text-xs">
+												{new Date(details.dataReprovacao).toLocaleString('pt-BR')}
+											</div>
+										{/if}
+										{#if details.motivoReprovacao}
+											<div class="mt-2 text-sm">
+												<div class="text-base-content/70 text-xs">Motivo:</div>
+												<div class="text-error">{details.motivoReprovacao}</div>
+											</div>
+										{/if}
+									</div>
+								</div>
+							{/if}
 						</div>
 					</div>
 
 					<!-- Itens da Requisição -->
 					<div class="mb-6">
-						<h4 class="mb-4 text-lg font-bold flex items-center gap-2">
+						<h4 class="mb-4 flex items-center gap-2 text-lg font-bold">
 							<Package class="h-5 w-5" />
 							Itens da Requisição
 						</h4>
-						{#if requisicaoDetalhes.itens && requisicaoDetalhes.itens.length > 0}
-							<div class="overflow-x-auto rounded-lg border border-base-300">
-								<table class="table table-zebra">
+						{#if details.itens && details.itens.length > 0}
+							<div class="border-base-300 overflow-x-auto rounded-lg border">
+								<table class="table-zebra table">
 									<thead>
 										<tr class="bg-base-200">
-											<th class="font-bold text-base-content">Material</th>
-											<th class="font-bold text-base-content">Quantidade Solicitada</th>
-											<th class="font-bold text-base-content">Quantidade Atendida</th>
-											<th class="font-bold text-base-content">Observações</th>
+											<th class="text-base-content font-bold">Material</th>
+											<th class="text-base-content font-bold">Quantidade Solicitada</th>
+											<th class="text-base-content font-bold">Quantidade Atendida</th>
+											<th class="text-base-content font-bold">Observações</th>
 										</tr>
 									</thead>
 									<tbody>
-										{#each requisicaoDetalhes.itens as item}
-											{@const material = materiaisQuery.data?.find(m => m._id === item.materialId)}
+										{#each details.itens as item (item.materialId)}
+											{@const material = materiaisQuery.data?.find(
+												(m) => m._id === item.materialId
+											)}
 											<tr class="hover:bg-base-200/50 transition-colors">
 												<td>
 													<div class="font-medium">{material?.nome || 'Carregando...'}</div>
 													{#if material?.codigo}
-														<div class="text-xs text-base-content/50 font-mono">{material.codigo}</div>
+														<div class="text-base-content/50 font-mono text-xs">
+															{material.codigo}
+														</div>
 													{/if}
 												</td>
 												<td>
 													<span class="font-semibold">{item.quantidadeSolicitada}</span>
-													<span class="text-sm text-base-content/60 ml-1">{material?.unidadeMedida || ''}</span>
+													<span class="text-base-content/60 ml-1 text-sm"
+														>{material?.unidadeMedida || ''}</span
+													>
 												</td>
 												<td>
 													{#if item.quantidadeAtendida !== undefined}
 														<span class="font-semibold">{item.quantidadeAtendida}</span>
-														<span class="text-sm text-base-content/60 ml-1">{material?.unidadeMedida || ''}</span>
+														<span class="text-base-content/60 ml-1 text-sm"
+															>{material?.unidadeMedida || ''}</span
+														>
 													{:else}
 														<span class="text-base-content/50">-</span>
 													{/if}
@@ -1202,33 +1349,29 @@
 					</div>
 
 					<!-- Observações Gerais -->
-					{#if requisicaoDetalhes.observacoes}
+					{#if details.observacoes}
 						<div class="mb-6">
-							<h4 class="mb-4 text-lg font-bold flex items-center gap-2">
+							<h4 class="mb-4 flex items-center gap-2 text-lg font-bold">
 								<FileText class="h-5 w-5" />
 								Observações Gerais
 							</h4>
 							<div class="card bg-base-200">
 								<div class="card-body p-4">
-									<p class="text-sm whitespace-pre-wrap">{requisicaoDetalhes.observacoes}</p>
+									<p class="text-sm whitespace-pre-wrap">{details.observacoes}</p>
 								</div>
 							</div>
 						</div>
 					{/if}
 
 					<div class="modal-action">
-						<button class="btn btn-ghost" onclick={fecharModalVisualizar}>
-							Fechar
-						</button>
+						<button class="btn btn-ghost" onclick={fecharModalVisualizar}> Fechar </button>
 					</div>
 				{:else}
 					<div class="flex items-center justify-center py-16">
 						<span class="loading loading-spinner loading-lg"></span>
 					</div>
 					<div class="modal-action">
-						<button class="btn btn-ghost" onclick={fecharModalVisualizar}>
-							Fechar
-						</button>
+						<button class="btn btn-ghost" onclick={fecharModalVisualizar}> Fechar </button>
 					</div>
 				{/if}
 			</div>
@@ -1238,27 +1381,32 @@
 	<!-- Modal Atender Requisição -->
 	{#if showModalAtender}
 		<div class="modal modal-open backdrop-blur-sm">
-			<div class="modal-box max-w-2xl border border-base-300 shadow-2xl">
-				<div class="mb-6 flex items-center gap-4 border-b-2 border-primary/20 pb-4">
-					<div class="rounded-2xl bg-primary/20 p-3">
-						<Package class="h-8 w-8 text-primary" strokeWidth={2.5} />
+			<div class="modal-box border-base-300 max-w-2xl border shadow-2xl">
+				<div class="border-primary/20 mb-6 flex items-center gap-4 border-b-2 pb-4">
+					<div class="bg-primary/20 rounded-2xl p-3">
+						<Package class="text-primary h-8 w-8" strokeWidth={2.5} />
 					</div>
 					<div class="flex-1">
-						<h3 class="text-2xl font-bold text-base-content">Atender Requisição</h3>
+						<h3 class="text-base-content text-2xl font-bold">Atender Requisição</h3>
 						<p class="text-base-content/70 mt-1">Registrar saídas de material</p>
 					</div>
-					<button class="btn btn-ghost btn-sm" onclick={fecharModalAtender} disabled={processandoAtender}>
+					<button
+						class="btn btn-ghost btn-sm"
+						onclick={fecharModalAtender}
+						disabled={processandoAtender}
+					>
 						<XCircle class="h-5 w-5" />
 					</button>
 				</div>
 
 				<div class="mb-6">
 					<div class="alert alert-info border-info/30 bg-info/10">
-						<FileText class="h-5 w-5 text-info" />
+						<FileText class="text-info h-5 w-5" />
 						<div>
-							<h4 class="font-bold text-base-content">Confirmar Atendimento</h4>
-							<p class="text-sm text-base-content/80 mt-1">
-								Ao confirmar, serão registradas as saídas de material do estoque conforme os itens da requisição.
+							<h4 class="text-base-content font-bold">Confirmar Atendimento</h4>
+							<p class="text-base-content/80 mt-1 text-sm">
+								Ao confirmar, serão registradas as saídas de material do estoque conforme os itens
+								da requisição.
 							</p>
 						</div>
 					</div>
@@ -1266,20 +1414,21 @@
 
 				<div class="mb-6">
 					<p class="text-base-content">
-						Tem certeza que deseja atender esta requisição? Isso registrará as saídas de material no estoque.
+						Tem certeza que deseja atender esta requisição? Isso registrará as saídas de material no
+						estoque.
 					</p>
 				</div>
 
-				<div class="modal-action gap-3 border-t-2 border-base-300 pt-6">
-					<button 
-						class="btn btn-ghost btn-lg min-w-[140px]" 
+				<div class="modal-action border-base-300 gap-3 border-t-2 pt-6">
+					<button
+						class="btn btn-ghost btn-lg min-w-[140px]"
 						onclick={fecharModalAtender}
 						disabled={processandoAtender}
 					>
 						Cancelar
 					</button>
-					<button 
-						class="btn btn-primary btn-lg min-w-[200px] shadow-lg hover:shadow-xl" 
+					<button
+						class="btn btn-primary btn-lg min-w-[200px] shadow-lg hover:shadow-xl"
 						onclick={confirmarAtender}
 						disabled={processandoAtender}
 					>
@@ -1296,5 +1445,3 @@
 		</div>
 	{/if}
 </main>
-
-