joelson
/
vendaweb-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix: estilização da tabela

This commit is contained in:
Alessandro Gonçaalves 2025-10-20 15:13:54 -03:00
parent ab348845ea
commit 6a834f1118
1 changed files with 109 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

213
src/app/DRE/analitico.tsx
View File

@ -325,8 +325,8 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
}; };
return ( return (
<Card className="w-full h-[85vh] shadow-xl rounded-2xl border-0 bg-gradient-to-br from-white to-gray-50/30"> <Card className="w-full h-[85vh] shadow-xl rounded-2xl border-0 bg-gradient-to-br from-white to-gray-50/30 flex flex-col">
<CardContent className="p-6 h-full flex flex-col"> <CardContent className="p-6 flex-1 flex flex-col">
<div className="flex justify-between mb-6 flex-wrap gap-4"> <div className="flex justify-between mb-6 flex-wrap gap-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-10 h-10 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg flex items-center justify-center"> <div className="w-10 h-10 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg flex items-center justify-center">
@ -367,51 +367,55 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
</div> </div>
</div> </div>
<div className="relative flex-1 bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden"> <div className="relative flex-1 bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden flex flex-col">
<table className="min-w-full border-collapse table-fixed"> <div
<thead ref={parentRef}
className={`bg-gradient-to-r from-blue-50 to-indigo-50 sticky top-0 z-20 transition-all duration-200 ${isScrolled ? "shadow-lg" : "shadow-sm"}`} className="flex-1 overflow-auto bg-white scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100 hover:scrollbar-thumb-gray-400"
> style={{
{table.getHeaderGroups().map((hg) => ( scrollbarWidth: 'thin',
<tr key={hg.id}> scrollbarColor: '#cbd5e0 #f7fafc'
{hg.headers.map((header) => { }}
const sorted = header.column.getIsSorted(); >
return ( <table className="min-w-full border-collapse">
<th <thead
key={header.id} className={`bg-gradient-to-r from-blue-50 to-indigo-50 sticky top-0 z-20 transition-all duration-200 ${isScrolled ? "shadow-lg" : "shadow-sm"}`}
onClick={header.column.getToggleSortingHandler()} >
className="text-left px-4 py-4 border-b border-gray-200 cursor-pointer select-none group hover:bg-blue-100/50 transition-colors duration-150 whitespace-nowrap" {table.getHeaderGroups().map((hg) => (
> <tr key={hg.id}>
<div className="flex items-center justify-between gap-2"> {hg.headers.map((header) => {
<span className="font-semibold text-gray-800 text-sm uppercase tracking-wide truncate"> const sorted = header.column.getIsSorted();
{flexRender(header.column.columnDef.header, header.getContext())} return (
</span> <th
<div className="flex flex-col flex-shrink-0"> key={header.id}
{sorted === "asc" ? ( onClick={header.column.getToggleSortingHandler()}
<ChevronUp className="w-4 h-4 text-blue-600" /> className="text-left px-4 py-4 border-b border-gray-200 cursor-pointer select-none group hover:bg-blue-100/50 transition-colors duration-150 whitespace-nowrap min-w-[150px]"
) : sorted === "desc" ? ( >
<ChevronDown className="w-4 h-4 text-blue-600" /> <div className="flex items-center justify-between gap-2">
) : ( <span className="font-semibold text-gray-800 text-sm uppercase tracking-wide truncate">
<div className="flex flex-col opacity-30 group-hover:opacity-60 transition-opacity"> {flexRender(header.column.columnDef.header, header.getContext())}
<ChevronUp className="w-3 h-3 -mb-1" /> </span>
<ChevronDown className="w-3 h-3" /> <div className="flex flex-col flex-shrink-0">
</div> {sorted === "asc" ? (
)} <ChevronUp className="w-4 h-4 text-blue-600" />
</div> ) : sorted === "desc" ? (
</div> <ChevronDown className="w-4 h-4 text-blue-600" />
</th> ) : (
); <div className="flex flex-col opacity-30 group-hover:opacity-60 transition-opacity">
})} <ChevronUp className="w-3 h-3 -mb-1" />
</tr> <ChevronDown className="w-3 h-3" />
))} </div>
</thead> )}
</table> </div>
</div>
<div ref={parentRef} className="overflow-auto h-full bg-white"> </th>
<table className="min-w-full border-collapse table-fixed"> );
<tbody })}
style={{ height: `${rowVirtualizer.getTotalSize()}px`, position: "relative" }} </tr>
> ))}
</thead>
<tbody
style={{ height: `${rowVirtualizer.getTotalSize()}px`, position: "relative" }}
>
{loading ? ( {loading ? (
<tr> <tr>
<td colSpan={columns.length} className="p-12 text-center"> <td colSpan={columns.length} className="p-12 text-center">
@ -441,70 +445,69 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
<tr <tr
key={row.id} key={row.id}
className="hover:bg-gradient-to-r hover:from-blue-50/30 hover:to-indigo-50/30 transition-all duration-150 border-b border-gray-100" className="hover:bg-gradient-to-r hover:from-blue-50/30 hover:to-indigo-50/30 transition-all duration-150 border-b border-gray-100"
style={{ style={{
position: "absolute", position: "absolute",
top: 0, top: 0,
left: 0, left: 0,
transform: `translateY(${virtualRow.start}px)`, transform: `translateY(${virtualRow.start}px)`,
display: "table", display: "table",
width: "100%", width: "100%",
tableLayout: "fixed", }}
}}
> >
{row.getVisibleCells().map((cell, cellIndex) => ( {row.getVisibleCells().map((cell, cellIndex) => (
<td <td
key={cell.id} key={cell.id}
className={`px-4 py-3 text-sm whitespace-nowrap overflow-hidden ${ className={`px-4 py-3 text-sm whitespace-nowrap overflow-hidden min-w-[150px] ${
cellIndex === 0 ? 'font-medium text-gray-900' : 'text-gray-700' cellIndex === 0 ? 'font-medium text-gray-900' : 'text-gray-700'
} ${ } ${
cell.column.id === 'valor' ? 'text-right font-semibold' : '' cell.column.id === 'valor' ? 'text-right font-semibold' : ''
}`} }`}
title={String(cell.getValue())} title={String(cell.getValue())}
> >
<div className="truncate"> <div className="truncate">
{flexRender(cell.column.columnDef.cell, cell.getContext())} {flexRender(cell.column.columnDef.cell, cell.getContext())}
</div> </div>
</td> </td>
))} ))}
</tr> </tr>
); );
}) })
)} )}
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
{data.length > 0 && ( {data.length > 0 && (
<div className="mt-1 p-6 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-xl shadow-sm"> <div className="flex-shrink-0 p-6 bg-gradient-to-r from-blue-50 to-indigo-50 border-t border-blue-200">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg flex items-center justify-center"> <div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg flex items-center justify-center">
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg> </svg>
</div> </div>
<div> <div>
<h3 className="text-lg font-bold text-gray-900"> <h3 className="text-lg font-bold text-gray-900">
Total de Registros: <span className="text-blue-600">{table.getRowModel().rows.length}</span> Total de Registros: <span className="text-blue-600">{table.getRowModel().rows.length}</span>
</h3> </h3>
<p className="text-sm text-gray-600">Transações encontradas</p> <p className="text-sm text-gray-600">Transações encontradas</p>
</div> </div>
</div> </div>
<div className="text-right"> <div className="text-right">
<h3 className="text-lg font-bold"> <h3 className="text-lg font-bold">
<span className={totalValor < 0 ? 'text-red-600' : 'text-green-600'}> <span className={totalValor < 0 ? 'text-red-600' : 'text-green-600'}>
Valor Total: {new Intl.NumberFormat('pt-BR', { Valor Total: {new Intl.NumberFormat('pt-BR', {
style: 'currency', style: 'currency',
currency: 'BRL', currency: 'BRL',
}).format(totalValor)} }).format(totalValor)}
</span> </span>
</h3> </h3>
<p className="text-sm text-gray-600">Soma de todos os valores</p> <p className="text-sm text-gray-600">Soma de todos os valores</p>
</div> </div>
</div> </div>
</div> </div>
)} )}
</div>
<Dialog open={open} onOpenChange={setOpen}> <Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="max-w-2xl w-full mx-4 bg-white"> <DialogContent className="max-w-2xl w-full mx-4 bg-white">