fix: estilização da tabela
This commit is contained in:
Alessandro Gonçaalves
parent
ab348845ea
commit
6a834f1118
|
|
@ -325,8 +325,8 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
};
|
||||
|
||||
return (
|
||||
<Card className="w-full h-[85vh] shadow-xl rounded-2xl border-0 bg-gradient-to-br from-white to-gray-50/30">
|
||||
<CardContent className="p-6 h-full flex flex-col">
|
||||
<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 flex-1 flex flex-col">
|
||||
<div className="flex justify-between mb-6 flex-wrap gap-4">
|
||||
<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">
|
||||
|
|
@ -367,51 +367,55 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative flex-1 bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
|
||||
<table className="min-w-full border-collapse table-fixed">
|
||||
<thead
|
||||
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"}`}
|
||||
>
|
||||
{table.getHeaderGroups().map((hg) => (
|
||||
<tr key={hg.id}>
|
||||
{hg.headers.map((header) => {
|
||||
const sorted = header.column.getIsSorted();
|
||||
return (
|
||||
<th
|
||||
key={header.id}
|
||||
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"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="font-semibold text-gray-800 text-sm uppercase tracking-wide truncate">
|
||||
{flexRender(header.column.columnDef.header, header.getContext())}
|
||||
</span>
|
||||
<div className="flex flex-col flex-shrink-0">
|
||||
{sorted === "asc" ? (
|
||||
<ChevronUp className="w-4 h-4 text-blue-600" />
|
||||
) : sorted === "desc" ? (
|
||||
<ChevronDown className="w-4 h-4 text-blue-600" />
|
||||
) : (
|
||||
<div className="flex flex-col opacity-30 group-hover:opacity-60 transition-opacity">
|
||||
<ChevronUp className="w-3 h-3 -mb-1" />
|
||||
<ChevronDown className="w-3 h-3" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<div ref={parentRef} className="overflow-auto h-full bg-white">
|
||||
<table className="min-w-full border-collapse table-fixed">
|
||||
<tbody
|
||||
style={{ height: `${rowVirtualizer.getTotalSize()}px`, position: "relative" }}
|
||||
>
|
||||
<div className="relative flex-1 bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden flex flex-col">
|
||||
<div
|
||||
ref={parentRef}
|
||||
className="flex-1 overflow-auto bg-white scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100 hover:scrollbar-thumb-gray-400"
|
||||
style={{
|
||||
scrollbarWidth: 'thin',
|
||||
scrollbarColor: '#cbd5e0 #f7fafc'
|
||||
}}
|
||||
>
|
||||
<table className="min-w-full border-collapse">
|
||||
<thead
|
||||
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"}`}
|
||||
>
|
||||
{table.getHeaderGroups().map((hg) => (
|
||||
<tr key={hg.id}>
|
||||
{hg.headers.map((header) => {
|
||||
const sorted = header.column.getIsSorted();
|
||||
return (
|
||||
<th
|
||||
key={header.id}
|
||||
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 min-w-[150px]"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="font-semibold text-gray-800 text-sm uppercase tracking-wide truncate">
|
||||
{flexRender(header.column.columnDef.header, header.getContext())}
|
||||
</span>
|
||||
<div className="flex flex-col flex-shrink-0">
|
||||
{sorted === "asc" ? (
|
||||
<ChevronUp className="w-4 h-4 text-blue-600" />
|
||||
) : sorted === "desc" ? (
|
||||
<ChevronDown className="w-4 h-4 text-blue-600" />
|
||||
) : (
|
||||
<div className="flex flex-col opacity-30 group-hover:opacity-60 transition-opacity">
|
||||
<ChevronUp className="w-3 h-3 -mb-1" />
|
||||
<ChevronDown className="w-3 h-3" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<tbody
|
||||
style={{ height: `${rowVirtualizer.getTotalSize()}px`, position: "relative" }}
|
||||
>
|
||||
{loading ? (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="p-12 text-center">
|
||||
|
|
@ -441,70 +445,69 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
<tr
|
||||
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"
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
transform: `translateY(${virtualRow.start}px)`,
|
||||
display: "table",
|
||||
width: "100%",
|
||||
tableLayout: "fixed",
|
||||
}}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
transform: `translateY(${virtualRow.start}px)`,
|
||||
display: "table",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{row.getVisibleCells().map((cell, cellIndex) => (
|
||||
<td
|
||||
key={cell.id}
|
||||
className={`px-4 py-3 text-sm whitespace-nowrap overflow-hidden ${
|
||||
cellIndex === 0 ? 'font-medium text-gray-900' : 'text-gray-700'
|
||||
} ${
|
||||
cell.column.id === 'valor' ? 'text-right font-semibold' : ''
|
||||
}`}
|
||||
title={String(cell.getValue())}
|
||||
>
|
||||
<div className="truncate">
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</div>
|
||||
</td>
|
||||
))}
|
||||
{row.getVisibleCells().map((cell, cellIndex) => (
|
||||
<td
|
||||
key={cell.id}
|
||||
className={`px-4 py-3 text-sm whitespace-nowrap overflow-hidden min-w-[150px] ${
|
||||
cellIndex === 0 ? 'font-medium text-gray-900' : 'text-gray-700'
|
||||
} ${
|
||||
cell.column.id === 'valor' ? 'text-right font-semibold' : ''
|
||||
}`}
|
||||
title={String(cell.getValue())}
|
||||
>
|
||||
<div className="truncate">
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</div>
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{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 justify-between items-center">
|
||||
<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">
|
||||
<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" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-gray-900">
|
||||
Total de Registros: <span className="text-blue-600">{table.getRowModel().rows.length}</span>
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600">Transações encontradas</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<h3 className="text-lg font-bold">
|
||||
<span className={totalValor < 0 ? 'text-red-600' : 'text-green-600'}>
|
||||
Valor Total: {new Intl.NumberFormat('pt-BR', {
|
||||
style: 'currency',
|
||||
currency: 'BRL',
|
||||
}).format(totalValor)}
|
||||
</span>
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600">Soma de todos os valores</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{data.length > 0 && (
|
||||
<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 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">
|
||||
<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" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-gray-900">
|
||||
Total de Registros: <span className="text-blue-600">{table.getRowModel().rows.length}</span>
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600">Transações encontradas</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<h3 className="text-lg font-bold">
|
||||
<span className={totalValor < 0 ? 'text-red-600' : 'text-green-600'}>
|
||||
Valor Total: {new Intl.NumberFormat('pt-BR', {
|
||||
style: 'currency',
|
||||
currency: 'BRL',
|
||||
}).format(totalValor)}
|
||||
</span>
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600">Soma de todos os valores</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className="max-w-2xl w-full mx-4 bg-white">
|
||||
|
|
|
|||
Loading…
Reference in New Issue