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

29
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,8 +367,16 @@ 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
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 <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"}`} 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"}`}
> >
@ -380,7 +388,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
<th <th
key={header.id} key={header.id}
onClick={header.column.getToggleSortingHandler()} 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" 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"> <div className="flex items-center justify-between gap-2">
<span className="font-semibold text-gray-800 text-sm uppercase tracking-wide truncate"> <span className="font-semibold text-gray-800 text-sm uppercase tracking-wide truncate">
@ -405,10 +413,6 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
</tr> </tr>
))} ))}
</thead> </thead>
</table>
<div ref={parentRef} className="overflow-auto h-full bg-white">
<table className="min-w-full border-collapse table-fixed">
<tbody <tbody
style={{ height: `${rowVirtualizer.getTotalSize()}px`, position: "relative" }} style={{ height: `${rowVirtualizer.getTotalSize()}px`, position: "relative" }}
> >
@ -448,13 +452,12 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
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' : ''
@ -473,10 +476,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
</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">
@ -505,6 +507,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
</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">