Merge pull request #9 from JurunenseDevInterno/fix-tabela-analitica-customizar-filtro

fix: rodapé

src/app/DRE/analitico.tsx

@@ -274,6 +274,8 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
   const [open, setOpen] = React.useState(false);
   const [columnFilters, setColumnFilters] = React.useState<Record<string, string[]>>({});
   const [columnSorts, setColumnSorts] = React.useState<Record<string, 'asc' | 'desc' | null>>({});
+  const [isFooterAnchored, setIsFooterAnchored] = React.useState(false);
+  const footerRef = React.useRef<HTMLDivElement>(null);
   const [conditions, setConditions] = React.useState([
     { column: "", operator: "contains", value: "" },
   ]);
@@ -628,6 +630,29 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
     });
   }, [filteredData, columnSorts]);
 
+  // Detectar se o footer está sendo coberto e ancorá-lo na base da tela
+  React.useEffect(() => {
+    if (!footerRef.current) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const [entry] = entries;
+        // Se o footer não está visível (está sendo coberto), ancora na base
+        setIsFooterAnchored(!entry.isIntersecting);
+      },
+      {
+        threshold: 0.1, // Detectar quando 10% do footer está visível
+        rootMargin: '0px 0px -50px 0px' // Margem para detectar antes de ser completamente coberto
+      }
+    );
+
+    observer.observe(footerRef.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [sortedAndFilteredData.length]); // Re-executar quando os dados mudarem
+
   // Calcular totais das colunas de valores (usando dados filtrados)
   const columnTotals = React.useMemo(() => {
     if (!sortedAndFilteredData || sortedAndFilteredData.length === 0) {
@@ -940,13 +965,14 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
             {/* Footer com Totalizadores - Posicionado no lugar do footer nativo */}
             {sortedAndFilteredData.length > 0 && (
               <div 
-                className="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-2"
+                ref={footerRef}
+                className={`${isFooterAnchored ? 'fixed bottom-0 left-0 right-0 z-50' : 'absolute bottom-0 left-0 right-0'} bg-white border-t border-gray-200 px-4 py-2`}
                 style={{ 
                   height: "48px",
                   display: "flex",
                   alignItems: "center",
                   fontSize: "0.75rem",
-                  zIndex: 1
+                  zIndex: isFooterAnchored ? 50 : 1
                 }}
               >
                 <div className="flex items-center w-full">