esdras/sistema-de-chamados
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix emprestimos table column widths consistency

Browse source 
- Use colgroup with fixed pixel widths instead of percentages
- Add tableLayout: fixed with minWidth for stable layout
- Add truncate to cells to prevent content overflow
- Show placeholder in Actions column for non-active items
- Column widths now stay consistent across all filter states

🤖 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:44:55 -03:00
parent 51ce3e61c7
commit b5b74a674d
1 changed files with 32 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/app/emprestimos/emprestimos-page-client.tsx
View file

@ -509,18 +509,29 @@ export function EmprestimosPageClient() {
{/* Table Section */}
<section className="rounded-3xl border border-slate-200 bg-white/90 shadow-sm overflow-hidden">
<div className="overflow-x-auto">
<Table className="w-full table-fixed">
<Table className="w-full" style={{ tableLayout: "fixed", minWidth: "900px" }}>
<colgroup>
<col style={{ width: "60px" }} />
<col style={{ width: "140px" }} />
<col style={{ width: "120px" }} />
<col style={{ width: "180px" }} />
<col style={{ width: "100px" }} />
<col style={{ width: "100px" }} />
<col style={{ width: "90px" }} />
<col style={{ width: "100px" }} />
<col style={{ width: "120px" }} />
</colgroup>
<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>
<TableHead className="px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Ref</TableHead>
<TableHead className="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="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="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="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="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="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="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="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>
@ -561,10 +572,10 @@ export function EmprestimosPageClient() {
className="cursor-pointer transition-colors hover:bg-cyan-50/30"
onClick={() => openDetailsDialog(emp)}
>
<TableCell className="text-center font-semibold text-neutral-900">#{emp.reference}</TableCell>
<TableCell className="text-center font-medium">{emp.clienteNome}</TableCell>
<TableCell className="text-center">{emp.responsavelNome}</TableCell>
<TableCell className="text-center">
<TableCell className="text-center font-semibold text-neutral-900 truncate">#{emp.reference}</TableCell>
<TableCell className="text-center font-medium truncate" title={emp.clienteNome}>{emp.clienteNome}</TableCell>
<TableCell className="text-center truncate" title={emp.responsavelNome}>{emp.responsavelNome}</TableCell>
<TableCell className="text-center truncate">
<span className="text-sm text-neutral-600">
{emp.quantidade} item(s):{" "}
{emp.equipamentos
@ -574,20 +585,20 @@ export function EmprestimosPageClient() {
{emp.equipamentos.length > 2 && "..."}
</span>
</TableCell>
<TableCell className="text-center">
<TableCell className="text-center truncate">
{format(new Date(emp.dataEmprestimo), "dd/MM/yyyy", { locale: ptBR })}
</TableCell>
<TableCell className="text-center">
<TableCell className="text-center truncate">
{format(new Date(emp.dataFimPrevisto), "dd/MM/yyyy", { locale: ptBR })}
</TableCell>
<TableCell className="text-center">{getStatusText(emp.status, emp.dataFimPrevisto)}</TableCell>
<TableCell className="text-center">
<TableCell className="text-center truncate">{getStatusText(emp.status, emp.dataFimPrevisto)}</TableCell>
<TableCell className="text-center truncate">
{emp.valor
? `R$ ${emp.valor.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}`
: "—"}
</TableCell>
<TableCell className="text-center">
{emp.status === "ATIVO" && (
{emp.status === "ATIVO" ? (
<button
type="button"
onClick={(e) => {
@ -599,6 +610,8 @@ export function EmprestimosPageClient() {
<IconCircleCheck className="size-4" />
Devolver
</button>
) : (
<span className="text-neutral-400">—</span>
)}
</TableCell>
</TableRow>