Fix emprestimos page accents and table layout

- Fix Portuguese accents in UI text (devolucao -> devolução, emprestimo -> empréstimo, etc.)
- Restructure table to always show header with fixed column widths
- Move empty state inside TableBody with colSpan to maintain layout consistency
- Column widths now stay consistent regardless of filter selection

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
rever-tecnologia 2025-12-05 13:40:18 -03:00
parent 0054b93d3c
commit 51ce3e61c7

View file

@ -358,14 +358,14 @@ export function EmprestimosPageClient() {
observacoes: observacoes || undefined,
}),
{
loading: "Registrando devolucao...",
loading: "Registrando devolução...",
success: (result) => {
if (result.multaCalculada) {
return `Emprestimo devolvido com multa de R$ ${result.multaCalculada.toFixed(2)}.`
return `Empréstimo devolvido com multa de R$ ${result.multaCalculada.toFixed(2)}.`
}
return "Emprestimo devolvido com sucesso."
return "Empréstimo devolvido com sucesso."
},
error: "Falha ao registrar devolucao.",
error: "Falha ao registrar devolução.",
}
)
}, [selectedEmprestimoId, convexUserId, formObservacoes, devolverEmprestimo])
@ -508,32 +508,19 @@ export function EmprestimosPageClient() {
{/* Table Section */}
<section className="rounded-3xl border border-slate-200 bg-white/90 shadow-sm overflow-hidden">
{emprestimos && filteredEmprestimos.length === 0 ? (
<Empty className="m-4 border-dashed">
<EmptyHeader>
<EmptyMedia variant="icon" className="bg-slate-100 text-slate-600">
<IconPackage className="size-5" />
</EmptyMedia>
<EmptyTitle>Nenhum emprestimo encontrado</EmptyTitle>
<EmptyDescription>
Ajuste os filtros ou crie um novo emprestimo para comecar.
</EmptyDescription>
</EmptyHeader>
</Empty>
) : (
<div className="overflow-x-auto">
<Table className="w-full table-fixed">
<TableHeader className="bg-slate-100/80">
<TableRow className="bg-transparent text-[11px] uppercase tracking-wide text-neutral-600 hover:bg-transparent">
<TableHead className="w-[6%] px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Ref</TableHead>
<TableHead className="w-[14%] border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Cliente</TableHead>
<TableHead className="w-[12%] border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Responsavel</TableHead>
<TableHead className="w-[12%] border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Responsável</TableHead>
<TableHead className="w-[16%] border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Equipamentos</TableHead>
<TableHead className="w-[11%] border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Emprestimo</TableHead>
<TableHead className="w-[11%] border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Empréstimo</TableHead>
<TableHead className="w-[11%] border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Prevista</TableHead>
<TableHead className="w-[9%] border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Status</TableHead>
<TableHead className="w-[10%] border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Valor</TableHead>
<TableHead className="w-[11%] border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Acoes</TableHead>
<TableHead className="w-[11%] border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Ações</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@ -552,6 +539,22 @@ export function EmprestimosPageClient() {
<TableCell className="text-center"><Skeleton className="mx-auto h-8 w-20 rounded-full" /></TableCell>
</TableRow>
))
) : filteredEmprestimos.length === 0 ? (
<TableRow>
<TableCell colSpan={9} className="py-12">
<Empty className="border-dashed">
<EmptyHeader>
<EmptyMedia variant="icon" className="bg-slate-100 text-slate-600">
<IconPackage className="size-5" />
</EmptyMedia>
<EmptyTitle>Nenhum empréstimo encontrado</EmptyTitle>
<EmptyDescription>
Ajuste os filtros ou crie um novo empréstimo para começar.
</EmptyDescription>
</EmptyHeader>
</Empty>
</TableCell>
</TableRow>
) : filteredEmprestimos.map((emp) => (
<TableRow
key={emp.id}
@ -603,7 +606,6 @@ export function EmprestimosPageClient() {
</TableBody>
</Table>
</div>
)}
</section>
{/* Create Dialog */}
@ -829,7 +831,7 @@ export function EmprestimosPageClient() {
</Button>
<Button onClick={handleDevolver}>
<IconCircleCheck className="size-4" />
Confirmar devolucao
Confirmar devolução
</Button>
</DialogFooter>
</DialogContent>