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

fix: rolagem horizontal da da da tabela analitica

This commit is contained in:
Alessandro Gonçaalves 2025-10-20 17:07:31 -03:00
parent 88c334959d
commit 6e9a3ad4b9
1 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -358,7 +358,8 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
</div> </div>
{/* Table Container */} {/* Table Container */}
<div className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden"> <div className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-x-auto">
<div className="min-w-[1200px]">
{/* Table Header */} {/* Table Header */}
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200 sticky top-0 z-20"> <div className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200 sticky top-0 z-20">
<div className="grid grid-cols-12 gap-4 px-4 py-3 text-xs font-semibold text-gray-700 uppercase tracking-wide"> <div className="grid grid-cols-12 gap-4 px-4 py-3 text-xs font-semibold text-gray-700 uppercase tracking-wide">
@ -378,7 +379,11 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
{/* Table Body */} {/* Table Body */}
<div <div
ref={parentRef} ref={parentRef}
className="max-h-[500px] overflow-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100" className="max-h-[500px] overflow-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100 hover:scrollbar-thumb-gray-400"
style={{
scrollbarWidth: 'thin',
scrollbarColor: '#cbd5e0 #f7fafc'
}}
> >
{loading ? ( {loading ? (
<div className="flex items-center justify-center h-64"> <div className="flex items-center justify-center h-64">
@ -426,6 +431,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
</div> </div>
)} )}
</div> </div>
</div>
</div> </div>
{/* Summary Footer */} {/* Summary Footer */}
{data.length > 0 && ( {data.length > 0 && (
@ -437,10 +443,10 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
<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>
@ -451,7 +457,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
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>