fix: header da tabela analitica

src/app/DRE/analitico.tsx

@@ -956,18 +956,43 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
               sx={{
                 overflowAnchor: 'none',
                 "& .MuiDataGrid-root": {
-                  overflowX: "auto",
+                  display: "flex",
+                  flexDirection: "column",
+                  height: "100%",
                 },
                 "& .MuiDataGrid-main": {
-                  overflowX: "auto",
+                  overflow: "visible",
+                  position: "relative",
+                  height: "100%",
                 },
                 "& .MuiDataGrid-columnHeaders": {
                   position: "sticky",
                   top: 0,
-                  backgroundColor: "#f9fafb",
+                  backgroundColor: "#f9fafb !important",
-                  zIndex: 2,
+                  zIndex: 100,
                   borderBottom: "1px solid #e5e7eb",
                 },
+                "& .MuiDataGrid-columnHeader": {
+                  backgroundColor: "#f9fafb !important",
+                },
+                "& .MuiDataGrid-columnHeaderRow": {
+                  position: "sticky",
+                  top: 0,
+                  zIndex: 100,
+                  backgroundColor: "#f9fafb !important",
+                },
+                "& .MuiDataGrid-columnHeadersInner": {
+                  position: "sticky",
+                  top: 0,
+                  zIndex: 100,
+                  backgroundColor: "#f9fafb !important",
+                },
+                // Garantir que o container dos headers não seja cortado
+                "& .MuiDataGrid-container--top": {
+                  overflow: "visible",
+                  position: "relative",
+                  zIndex: 100,
+                },
                 "& .MuiDataGrid-cell": { 
                   borderBottom: "1px solid #f0f0f0",
                   fontSize: "0.875rem",
@@ -1005,6 +1030,12 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
                   borderBottom: "1px solid #e5e7eb",
                   padding: "8px 16px",
                 },
+                "& .MuiDataGrid-container--bottom": {
+                  overflow: "hidden",
+                },
+                "& .MuiDataGrid-scrollbar": {
+                  display: "none",
+                },
                 // Ocultar todos os ícones nativos das colunas
                 "& .MuiDataGrid-columnHeaderMenuContainer": {
                   display: "none !important",

src/app/DRE/teste.tsx

@@ -2371,7 +2371,7 @@ export default function Teste() {
                 Filtros
               </Button>
             </SheetTrigger>
-            <SheetContent className="w-[400px] sm:w-[540px]">
+            <SheetContent className="w-[400px] sm:w-[540px] flex flex-col">
               <SheetHeader>
                 <SheetTitle>Filtros</SheetTitle>
                 <SheetDescription>
@@ -2379,7 +2379,8 @@ export default function Teste() {
                 </SheetDescription>
               </SheetHeader>
               
-              <div className="grid flex-1 auto-rows-min gap-3 py-2">
+              <div className="flex-1 overflow-y-auto pr-2">
+                <div className="grid gap-3 py-2">
                 {/* Período */}
                 <div className="grid gap-2">
                   <Label>Período</Label>
@@ -2698,8 +2699,9 @@ export default function Teste() {
                   </div>
                   </div>
                 </div>
+              </div>
 
-              <SheetFooter className="flex gap-2">
+              <SheetFooter className="flex gap-2 mt-4 border-t pt-4">
                 <Button variant="outline" onClick={limparFiltros} className="flex-1">
                   Limpar Filtros
                 </Button>
@@ -2779,31 +2781,31 @@ export default function Teste() {
 
       {/* Table Container */}
       {filtrosAplicados && !loading && !error && (
-        <div className="bg-white rounded-xl shadow-lg border border-gray-200">
+        <div className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
-          {/* Scroll Container */}
+          {/* Scroll Container - Apenas um container com scroll */}
-          <div className="overflow-x-auto overflow-y-auto max-h-[500px]">
+          <div className="overflow-auto max-h-[500px]" style={{ scrollbarWidth: 'thin' }}>
             {/* Table */}
             <table className="w-full border-collapse">
               {/* Table Header */}
-              <thead>
+              <thead className="sticky top-0 z-10 bg-gradient-to-r from-blue-50 to-indigo-50">
-                <tr className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200">
+                <tr className="border-b border-gray-200">
-                  <th className="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wide w-[300px] min-w-[300px]">
+                  <th className="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wide w-[300px] min-w-[300px] bg-gradient-to-r from-blue-50 to-indigo-50">
                     Descrição
                   </th>
                   {mesesDisponiveis.map((mes) => (
                     <React.Fragment key={mes}>
-                      <th className="px-2 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide w-[120px] min-w-[120px]">
+                      <th className="px-2 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide w-[120px] min-w-[120px] bg-gradient-to-r from-blue-50 to-indigo-50">
                         {mes}
                       </th>
-                      <th className="px-2 py-2 text-center text-xs font-semibold text-gray-500 uppercase tracking-wide w-[100px] min-w-[100px]">
+                      <th className="px-2 py-2 text-center text-xs font-semibold text-gray-500 uppercase tracking-wide w-[100px] min-w-[100px] bg-gradient-to-r from-blue-50 to-indigo-50">
                         %
                       </th>
                     </React.Fragment>
                   ))}
-                  <th className="px-4 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide w-[120px] min-w-[120px]">
+                  <th className="px-4 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide w-[120px] min-w-[120px] bg-gradient-to-r from-blue-50 to-indigo-50">
                     Total
                   </th>
-                  <th className="px-2 py-2 text-center text-xs font-semibold text-gray-500 uppercase tracking-wide w-[100px] min-w-[100px]">
+                  <th className="px-2 py-2 text-center text-xs font-semibold text-gray-500 uppercase tracking-wide w-[100px] min-w-[100px] bg-gradient-to-r from-blue-50 to-indigo-50">
                     %
                   </th>
                 </tr>