From 51ce3e61c7d58293958d6882c3e655d788f6dadd Mon Sep 17 00:00:00 2001
From: rever-tecnologia <revertecnologia@gmail.com>
Date: Fri, 5 Dec 2025 13:40:18 -0300
Subject: [PATCH] Fix emprestimos page accents and table layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 .../emprestimos/emprestimos-page-client.tsx   | 102 +++++++++---------
 1 file changed, 52 insertions(+), 50 deletions(-)

diff --git a/src/app/emprestimos/emprestimos-page-client.tsx b/src/app/emprestimos/emprestimos-page-client.tsx
index 8b63966..b401088 100644
--- a/src/app/emprestimos/emprestimos-page-client.tsx
+++ b/src/app/emprestimos/emprestimos-page-client.tsx
@@ -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>