Fix emprestimos table column widths consistency
- 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
parent
51ce3e61c7
commit
b5b74a674d
1 changed files with 32 additions and 19 deletions
|
|
@ -509,18 +509,29 @@ 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">
|
||||||
<div className="overflow-x-auto">
|
<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">
|
<TableHeader className="bg-slate-100/80">
|
||||||
<TableRow className="bg-transparent text-[11px] uppercase tracking-wide text-neutral-600 hover:bg-transparent">
|
<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="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="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="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="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="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="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="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="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="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>
|
</TableRow>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
|
|
@ -561,10 +572,10 @@ export function EmprestimosPageClient() {
|
||||||
className="cursor-pointer transition-colors hover:bg-cyan-50/30"
|
className="cursor-pointer transition-colors hover:bg-cyan-50/30"
|
||||||
onClick={() => openDetailsDialog(emp)}
|
onClick={() => openDetailsDialog(emp)}
|
||||||
>
|
>
|
||||||
<TableCell className="text-center font-semibold text-neutral-900">#{emp.reference}</TableCell>
|
<TableCell className="text-center font-semibold text-neutral-900 truncate">#{emp.reference}</TableCell>
|
||||||
<TableCell className="text-center font-medium">{emp.clienteNome}</TableCell>
|
<TableCell className="text-center font-medium truncate" title={emp.clienteNome}>{emp.clienteNome}</TableCell>
|
||||||
<TableCell className="text-center">{emp.responsavelNome}</TableCell>
|
<TableCell className="text-center truncate" title={emp.responsavelNome}>{emp.responsavelNome}</TableCell>
|
||||||
<TableCell className="text-center">
|
<TableCell className="text-center truncate">
|
||||||
<span className="text-sm text-neutral-600">
|
<span className="text-sm text-neutral-600">
|
||||||
{emp.quantidade} item(s):{" "}
|
{emp.quantidade} item(s):{" "}
|
||||||
{emp.equipamentos
|
{emp.equipamentos
|
||||||
|
|
@ -574,20 +585,20 @@ export function EmprestimosPageClient() {
|
||||||
{emp.equipamentos.length > 2 && "..."}
|
{emp.equipamentos.length > 2 && "..."}
|
||||||
</span>
|
</span>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell className="text-center">
|
<TableCell className="text-center truncate">
|
||||||
{format(new Date(emp.dataEmprestimo), "dd/MM/yyyy", { locale: ptBR })}
|
{format(new Date(emp.dataEmprestimo), "dd/MM/yyyy", { locale: ptBR })}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell className="text-center">
|
<TableCell className="text-center truncate">
|
||||||
{format(new Date(emp.dataFimPrevisto), "dd/MM/yyyy", { locale: ptBR })}
|
{format(new Date(emp.dataFimPrevisto), "dd/MM/yyyy", { locale: ptBR })}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell className="text-center">{getStatusText(emp.status, emp.dataFimPrevisto)}</TableCell>
|
<TableCell className="text-center truncate">{getStatusText(emp.status, emp.dataFimPrevisto)}</TableCell>
|
||||||
<TableCell className="text-center">
|
<TableCell className="text-center truncate">
|
||||||
{emp.valor
|
{emp.valor
|
||||||
? `R$ ${emp.valor.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}`
|
? `R$ ${emp.valor.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}`
|
||||||
: "—"}
|
: "—"}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell className="text-center">
|
<TableCell className="text-center">
|
||||||
{emp.status === "ATIVO" && (
|
{emp.status === "ATIVO" ? (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
|
|
@ -599,6 +610,8 @@ export function EmprestimosPageClient() {
|
||||||
<IconCircleCheck className="size-4" />
|
<IconCircleCheck className="size-4" />
|
||||||
Devolver
|
Devolver
|
||||||
</button>
|
</button>
|
||||||
|
) : (
|
||||||
|
<span className="text-neutral-400">—</span>
|
||||||
)}
|
)}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue