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,
|
observacoes: observacoes || undefined,
|
||||||
}),
|
}),
|
||||||
{
|
{
|
||||||
loading: "Registrando devolucao...",
|
loading: "Registrando devolução...",
|
||||||
success: (result) => {
|
success: (result) => {
|
||||||
if (result.multaCalculada) {
|
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])
|
}, [selectedEmprestimoId, convexUserId, formObservacoes, devolverEmprestimo])
|
||||||
|
|
@ -508,51 +508,54 @@ export function EmprestimosPageClient() {
|
||||||
|
|
||||||
{/* Table Section */}
|
{/* Table Section */}
|
||||||
<section className="rounded-3xl border border-slate-200 bg-white/90 shadow-sm overflow-hidden">
|
<section className="rounded-3xl border border-slate-200 bg-white/90 shadow-sm overflow-hidden">
|
||||||
{emprestimos && filteredEmprestimos.length === 0 ? (
|
<div className="overflow-x-auto">
|
||||||
<Empty className="m-4 border-dashed">
|
<Table className="w-full table-fixed">
|
||||||
<EmptyHeader>
|
<TableHeader className="bg-slate-100/80">
|
||||||
<EmptyMedia variant="icon" className="bg-slate-100 text-slate-600">
|
<TableRow className="bg-transparent text-[11px] uppercase tracking-wide text-neutral-600 hover:bg-transparent">
|
||||||
<IconPackage className="size-5" />
|
<TableHead className="w-[6%] px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Ref</TableHead>
|
||||||
</EmptyMedia>
|
<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>
|
||||||
<EmptyTitle>Nenhum emprestimo encontrado</EmptyTitle>
|
<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>
|
||||||
<EmptyDescription>
|
<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>
|
||||||
Ajuste os filtros ou crie um novo emprestimo para comecar.
|
<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>
|
||||||
</EmptyDescription>
|
<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>
|
||||||
</EmptyHeader>
|
<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>
|
||||||
</Empty>
|
<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>
|
||||||
<div className="overflow-x-auto">
|
</TableRow>
|
||||||
<Table className="w-full table-fixed">
|
</TableHeader>
|
||||||
<TableHeader className="bg-slate-100/80">
|
<TableBody>
|
||||||
<TableRow className="bg-transparent text-[11px] uppercase tracking-wide text-neutral-600 hover:bg-transparent">
|
{!emprestimos ? (
|
||||||
<TableHead className="w-[6%] px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Ref</TableHead>
|
// Skeleton rows durante o loading
|
||||||
<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>
|
Array.from({ length: 5 }).map((_, idx) => (
|
||||||
<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>
|
<TableRow key={`skeleton-${idx}`} className="animate-pulse">
|
||||||
<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>
|
<TableCell className="text-center"><Skeleton className="mx-auto h-4 w-8" /></TableCell>
|
||||||
<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>
|
<TableCell className="text-center"><Skeleton className="mx-auto h-4 w-24" /></TableCell>
|
||||||
<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>
|
<TableCell className="text-center"><Skeleton className="mx-auto h-4 w-20" /></TableCell>
|
||||||
<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>
|
<TableCell className="text-center"><Skeleton className="mx-auto h-4 w-28" /></TableCell>
|
||||||
<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>
|
<TableCell className="text-center"><Skeleton className="mx-auto h-4 w-16" /></TableCell>
|
||||||
<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>
|
<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>
|
</TableRow>
|
||||||
</TableHeader>
|
) : filteredEmprestimos.map((emp) => (
|
||||||
<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) => (
|
|
||||||
<TableRow
|
<TableRow
|
||||||
key={emp.id}
|
key={emp.id}
|
||||||
className="cursor-pointer transition-colors hover:bg-cyan-50/30"
|
className="cursor-pointer transition-colors hover:bg-cyan-50/30"
|
||||||
|
|
@ -603,7 +606,6 @@ export function EmprestimosPageClient() {
|
||||||
</TableBody>
|
</TableBody>
|
||||||
</Table>
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Create Dialog */}
|
{/* Create Dialog */}
|
||||||
|
|
@ -829,7 +831,7 @@ export function EmprestimosPageClient() {
|
||||||
</Button>
|
</Button>
|
||||||
<Button onClick={handleDevolver}>
|
<Button onClick={handleDevolver}>
|
||||||
<IconCircleCheck className="size-4" />
|
<IconCircleCheck className="size-4" />
|
||||||
Confirmar devolucao
|
Confirmar devolução
|
||||||
</Button>
|
</Button>
|
||||||
</DialogFooter>
|
</DialogFooter>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue