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
parent
0054b93d3c
commit
51ce3e61c7
1 changed files with 52 additions and 50 deletions
|
|
@ -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,51 +508,54 @@ 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-[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">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>
|
||||
<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">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">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">Ações</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{!emprestimos ? (
|
||||
// Skeleton rows durante o loading
|
||||
Array.from({ length: 5 }).map((_, idx) => (
|
||||
<TableRow key={`skeleton-${idx}`} className="animate-pulse">
|
||||
<TableCell className="text-center"><Skeleton className="mx-auto h-4 w-8" /></TableCell>
|
||||
<TableCell className="text-center"><Skeleton className="mx-auto h-4 w-24" /></TableCell>
|
||||
<TableCell className="text-center"><Skeleton className="mx-auto h-4 w-20" /></TableCell>
|
||||
<TableCell className="text-center"><Skeleton className="mx-auto h-4 w-28" /></TableCell>
|
||||
<TableCell className="text-center"><Skeleton className="mx-auto h-4 w-16" /></TableCell>
|
||||
<TableCell className="text-center"><Skeleton className="mx-auto h-4 w-16" /></TableCell>
|
||||
<TableCell className="text-center"><Skeleton className="mx-auto h-4 w-14" /></TableCell>
|
||||
<TableCell className="text-center"><Skeleton className="mx-auto h-4 w-16" /></TableCell>
|
||||
<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>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{!emprestimos ? (
|
||||
// Skeleton rows durante o loading
|
||||
Array.from({ length: 5 }).map((_, idx) => (
|
||||
<TableRow key={`skeleton-${idx}`} className="animate-pulse">
|
||||
<TableCell className="text-center"><Skeleton className="mx-auto h-4 w-8" /></TableCell>
|
||||
<TableCell className="text-center"><Skeleton className="mx-auto h-4 w-24" /></TableCell>
|
||||
<TableCell className="text-center"><Skeleton className="mx-auto h-4 w-20" /></TableCell>
|
||||
<TableCell className="text-center"><Skeleton className="mx-auto h-4 w-28" /></TableCell>
|
||||
<TableCell className="text-center"><Skeleton className="mx-auto h-4 w-16" /></TableCell>
|
||||
<TableCell className="text-center"><Skeleton className="mx-auto h-4 w-16" /></TableCell>
|
||||
<TableCell className="text-center"><Skeleton className="mx-auto h-4 w-14" /></TableCell>
|
||||
<TableCell className="text-center"><Skeleton className="mx-auto h-4 w-16" /></TableCell>
|
||||
<TableCell className="text-center"><Skeleton className="mx-auto h-8 w-20 rounded-full" /></TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : filteredEmprestimos.map((emp) => (
|
||||
) : filteredEmprestimos.map((emp) => (
|
||||
<TableRow
|
||||
key={emp.id}
|
||||
className="cursor-pointer transition-colors hover:bg-cyan-50/30"
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue