datastake-daf 0.6.423 → 0.6.425

package/dist/components/index.js

@@ -13303,14 +13303,41 @@ DAFFooter.propTypes = {
 };
 
 const PAGE_HEIGHT = 1587;
+// margin-top: 20, bottom: 20;
 const FOOTER_HEIGHT = 70;
 const HEADER_HEIGHT = 100;
-const PAGE_MARGIN_TOP = 20;
-const PAGE_MARGIN_BOTTOM = 20;
-const CONTENT_HEIGHT = 1200; // 1397px
-const SECTION_GAP = 24;
-const isHTMLElement = node => node instanceof HTMLElement;
-function PdfView(_ref) {
+const Row = _ref => {
+  let {
+    widgets,
+    i,
+    onChangeHeight = () => {}
+  } = _ref;
+  const ref = React.useRef();
+  const [height, setHeight] = React.useState(0);
+  React.useEffect(() => {
+    const observer = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        setHeight(entry.contentRect.height);
+      }
+    });
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, []);
+  React.useEffect(() => {
+    if (height) {
+      onChangeHeight(i, {
+        height,
+        ref
+      });
+    }
+  }, [height]);
+  return /*#__PURE__*/jsxRuntime.jsx("section", {
+    ref: ref,
+    style: widgets.style,
+    children: typeof widgets.render === 'function' ? widgets.render() : null
+  });
+};
+function PdfView(_ref2) {
   let {
     config = [],
     customClassName,
@@ -13320,224 +13347,105 @@ function PdfView(_ref) {
     accountId = 'IDD-0000000',
     documentId = 'IDD-0000000',
     downloadId = 'DWL-00000123'
-  } = _ref;
+  } = _ref2;
+  const [sectionsConfig, setSectionsConfig] = React.useState({});
   const [pages, setPages] = React.useState([1]);
-  const contentRef = React.useRef(null);
-  const sectionsRef = React.useRef([]);
-  const resizeTimeoutRef = React.useRef(null);
-  const isCalculatingRef = React.useRef(false);
-  const resetPaginationStyles = React.useCallback(sections => {
-    sections.forEach(section => {
-      if (!section) return;
-      section.style.marginTop = '';
-      section.style.marginBottom = '';
-      section.style.pageBreakBefore = '';
-      section.style.breakBefore = '';
-      section.removeAttribute('data-pdf-page');
-
-      // Reset all children
-      const allElements = section.querySelectorAll('*');
-      allElements.forEach(el => {
-        if (!isHTMLElement(el)) return;
-        el.style.marginTop = '';
-        el.style.marginBottom = '';
-        el.style.pageBreakBefore = '';
-        el.style.breakBefore = '';
-        el.removeAttribute('data-pdf-page');
-      });
-    });
-  }, []);
-  const getAllBreakableElements = React.useCallback(section => {
-    const elements = [];
-    const shouldInclude = el => {
-      if (!isHTMLElement(el)) return false;
-      const style = window.getComputedStyle(el);
-      if (style.display === 'inline' || style.display === 'contents') return false;
-      if (style.position === 'absolute' || style.position === 'fixed') return false;
-      if (el.offsetHeight === 0) return false;
-      return true;
-    };
-    const traverse = parent => {
-      Array.from(parent.children).forEach(child => {
-        if (shouldInclude(child)) {
-          elements.push(child);
-          traverse(child);
-        }
+  const doSizing = React.useCallback(() => {
+    const keys = Object.keys(sectionsConfig);
+    let _pages = [1];
+    let _page = 1;
+    if (keys.length === config.length) {
+      let incrHeight = 0;
+      keys.forEach(k => {
+        const {
+          ref
+        } = sectionsConfig[k];
+        ref.current.style.marginBottom = '0px';
+        // ref.current.style.marginTop = '15px';
       });
-    };
-    traverse(section);
-    return elements;
-  }, []);
-  const paginateContent = React.useCallback(() => {
-    // Prevent recursive calls
-    if (isCalculatingRef.current) return;
-    const sections = sectionsRef.current.filter(Boolean);
-    if (sections.length === 0) return;
-    isCalculatingRef.current = true;
-    resetPaginationStyles(sections);
-
-    // Force layout recalc
-    sections.forEach(s => s.offsetHeight);
-    let currentPage = 1;
-    let currentPageHeight = 0;
-    sections.forEach((section, sectionIndex) => {
-      // Measure height after reset
-      const sectionHeight = section.offsetHeight;
-      const isFirstOnPage = currentPageHeight === 0;
-      const gapBefore = isFirstOnPage ? 0 : SECTION_GAP;
-      if (currentPageHeight + gapBefore + sectionHeight <= CONTENT_HEIGHT) {
-        // Fits in current page
-        section.setAttribute('data-pdf-page', currentPage.toString());
-        if (isFirstOnPage) {
-          // First item on page
-          if (currentPage === 1) {
-            // Very first section on first page - needs to be below header
-            section.style.marginTop = '0px'; // Container padding handles this
-          } else {
-            // First section on subsequent pages - no margin (container padding handles it)
-            section.style.marginTop = '0px';
+      keys.forEach((k, i) => {
+        const {
+          height,
+          ref
+        } = sectionsConfig[k];
+        if (i === 0) {
+          ref.current.style.marginTop = "".concat(HEADER_HEIGHT, "px");
+          incrHeight += HEADER_HEIGHT;
+        }
+        const newHeight = incrHeight + height;
+        if (i === keys.length - 1) {
+          ref.current.style.paddingBottom = '30px';
+        }
+        if (newHeight > PAGE_HEIGHT - 30 - FOOTER_HEIGHT - HEADER_HEIGHT) {
+          const dif = Math.abs(PAGE_HEIGHT - incrHeight);
+          ref.current.style.marginTop = '30px';
+          _page += 1;
+          _pages.push(_page);
+          if (sectionsConfig[keys[i - 1]]) {
+            const {
+              ref: topRef
+            } = sectionsConfig[keys[i - 1]];
+            topRef.current.style.marginBottom = "".concat(dif + HEADER_HEIGHT - 24, "px");
+            incrHeight = height + 24 + HEADER_HEIGHT;
+            // console.log('margin', dif);
           }
         } else {
-          // Not first item on page - add gap
-          section.style.marginTop = "".concat(SECTION_GAP, "px");
+          incrHeight = newHeight + 24;
         }
-        currentPageHeight += gapBefore + sectionHeight;
-      } else {
-        // Doesn't fit - need to move to next page
-        const remainingSpace = CONTENT_HEIGHT - currentPageHeight;
-
-        // Calculate margin needed to push this section to the next page
-        // remainingSpace = space left on current page
-        // Then we need to skip: footer margin + footer + header margin + header
-        const pushMargin = remainingSpace + PAGE_MARGIN_BOTTOM + FOOTER_HEIGHT + PAGE_MARGIN_TOP + HEADER_HEIGHT;
-
-        // Move entire section to next page
-        currentPage += 1;
-        section.setAttribute('data-pdf-page', currentPage.toString());
-        section.style.pageBreakBefore = 'always';
-        section.style.breakBefore = 'page';
-        section.style.marginTop = "".concat(pushMargin, "px");
-
-        // Start fresh height counter for new page
-        currentPageHeight = sectionHeight;
-
-        // Check if section is too tall and needs internal breaks
-        if (sectionHeight > CONTENT_HEIGHT) {
-          // Try to break within section
-          const innerElements = getAllBreakableElements(section);
-          let pageHeightInSection = 0;
-          let sectionPage = currentPage;
-          for (const el of innerElements) {
-            const rect = el.getBoundingClientRect();
-            const sectionRect = section.getBoundingClientRect();
-            const relativeTop = rect.top - sectionRect.top;
-            const elHeight = rect.height;
-
-            // Check if this element would exceed the page
-            if (pageHeightInSection + elHeight > CONTENT_HEIGHT && relativeTop > 50) {
-              // Calculate remaining space on this page within the section
-              const remainingInSection = CONTENT_HEIGHT - pageHeightInSection;
-              const pushMarginInner = remainingInSection + PAGE_MARGIN_BOTTOM + FOOTER_HEIGHT + PAGE_MARGIN_TOP + HEADER_HEIGHT;
-              sectionPage += 1;
-              el.setAttribute('data-pdf-page', sectionPage.toString());
-              el.style.pageBreakBefore = 'always';
-              el.style.breakBefore = 'page';
-              el.style.marginTop = "".concat(pushMarginInner, "px");
-
-              // Reset page height for new page within section
-              pageHeightInSection = elHeight;
-            } else {
-              pageHeightInSection += elHeight;
-            }
-          }
-
-          // Update current page if we created additional pages
-          if (sectionPage > currentPage) {
-            currentPage = sectionPage;
-            currentPageHeight = pageHeightInSection;
-          }
-        }
-      }
-    });
-    setPages(Array.from({
-      length: currentPage
-    }, (_, idx) => idx + 1));
-
-    // Reset flag after a brief delay to allow next calculation
-    setTimeout(() => {
-      isCalculatingRef.current = false;
-    }, 100);
-  }, [getAllBreakableElements, resetPaginationStyles]);
-  React.useLayoutEffect(() => {
-    // Use requestAnimationFrame to ensure DOM is painted
-    const rafId = requestAnimationFrame(() => {
-      paginateContent();
-    });
-    return () => cancelAnimationFrame(rafId);
-  }, [paginateContent, config]);
+        // console.groupEnd();
+      });
+      setPages(_pages);
+    }
+  }, [sectionsConfig]);
   React.useEffect(() => {
-    const sections = sectionsRef.current.filter(Boolean);
-    if (sections.length === 0) return undefined;
-    const observer = new ResizeObserver(() => {
-      // Debounce the pagination calculation
-      if (resizeTimeoutRef.current) {
-        clearTimeout(resizeTimeoutRef.current);
-      }
-      resizeTimeoutRef.current = setTimeout(() => {
-        // Use requestAnimationFrame to avoid ResizeObserver loop warning
-        requestAnimationFrame(() => {
-          paginateContent();
-        });
-      }, 150);
-    });
-    sections.forEach(section => observer.observe(section));
-    return () => {
-      observer.disconnect();
-      if (resizeTimeoutRef.current) {
-        clearTimeout(resizeTimeoutRef.current);
-      }
-    };
-  }, [paginateContent, config.length]);
+    doSizing();
+  }, [doSizing]);
+  const onChangeHeight = React.useCallback((index, conf) => {
+    setSectionsConfig(prev => _objectSpread2(_objectSpread2({}, prev), {}, {
+      [index]: conf
+    }));
+  }, []);
   const contClassName = formatClassname(['daf-analysis daf-pdf-view', customClassName]);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: contClassName,
-    style: {
-      position: 'relative',
-      minHeight: "".concat(PAGE_HEIGHT, "px")
-    },
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+  const renderDashboard = React.useCallback(() => {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "view-content",
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "daf-analysis-layout",
         children: /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "sections-cont",
-          ref: contentRef,
-          "data-pdf-content-root": "true",
-          style: {
-            marginTop: "".concat(HEADER_HEIGHT + PAGE_MARGIN_TOP, "px"),
-            // paddingBottom: `${FOOTER_HEIGHT + PAGE_MARGIN_BOTTOM}px !important`,
-            position: 'relative'
-          },
-          children: config.map((widgets, index) => /*#__PURE__*/jsxRuntime.jsx("section", {
-            ref: el => {
-              sectionsRef.current[index] = el;
-            },
-            style: widgets.style,
-            "data-pdf-section": "true",
-            children: typeof widgets.render === 'function' ? widgets.render() : null
-          }, "dashboard-section-".concat(index + 1)))
+          children: config.map((widgets, i) => /*#__PURE__*/jsxRuntime.jsx(Row, {
+            widgets: widgets,
+            i: i,
+            onChangeHeight: onChangeHeight
+          }, "dashboard-sections=".concat(i + 1)))
         })
       })
-    }), pages.map(page => /*#__PURE__*/jsxRuntime.jsxs(React.Fragment, {
+    });
+  }, [config, onChangeHeight]);
+
+  // <div className="daf-analysis">
+  // <Header title={t('Dashboard Title')} />
+
+  // <div className="content">
+  //   <div className="view-content">
+  //     <div className="daf-analysis-layout">
+  //       <div className='sections-cont w-pt'>
+  //         <section>
+
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: contClassName,
+    style: {
+      position: 'relative'
+    },
+    children: [renderDashboard(), pages.map(page => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         style: {
-          top: (page - 1) * PAGE_HEIGHT + PAGE_MARGIN_TOP,
+          top: (page - 1) * PAGE_HEIGHT,
           width: '100%',
-          height: HEADER_HEIGHT,
+          height: HEADER_HEIGHT - 24,
           position: 'absolute',
           left: 0,
-          zIndex: 1000000,
-          pointerEvents: 'none'
+          zIndex: 1000000
         },
         className: "flex-row dashboard-header",
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -13552,15 +13460,14 @@ function PdfView(_ref) {
             alt: "logo"
           })
         })]
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      }, "headers-".concat(page)), /*#__PURE__*/jsxRuntime.jsxs("div", {
         style: {
-          top: page * PAGE_HEIGHT - FOOTER_HEIGHT - PAGE_MARGIN_BOTTOM,
+          top: page * PAGE_HEIGHT - FOOTER_HEIGHT,
           width: '100%',
           height: FOOTER_HEIGHT,
           position: 'absolute',
           left: 0,
-          zIndex: 1000000,
-          pointerEvents: 'none'
+          zIndex: 1000000
         },
         className: "dashboard-footer flex-row",
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -13596,8 +13503,8 @@ function PdfView(_ref) {
             children: page
           })
         })]
-      })]
-    }, "pdf-decor-".concat(page)))]
+      }, "footers-".concat(page))]
+    }))]
   });
 }
 PdfView.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.423",
+	"version": "0.6.425",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/Dashboard/PdfView/PdfView.stories.js

@@ -189,15 +189,5 @@ export const Primary = {
       },
     ],
   },
-  render: (args) => (
-    <div style={{
-      height: '100vh',
-      overflowY: 'auto',
-        background: "#f8f8f8",
-        padding: "20px",
-      }}
-    >
-      <PdfView {...args} />
-    </div>
-  ),
-};
+}
+

package/src/@daf/core/components/Dashboard/PdfView/index.jsx

@@ -1,17 +1,41 @@
 import moment from "moment";
 import PropTypes from 'prop-types';
-import { Fragment, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { formatClassname } from "../../../../../helpers/ClassesHelper";
 
 const PAGE_HEIGHT = 1587;
+// margin-top: 20, bottom: 20;
 const FOOTER_HEIGHT = 70;
 const HEADER_HEIGHT = 100;
-const PAGE_MARGIN_TOP = 20;
-const PAGE_MARGIN_BOTTOM = 20;
-const CONTENT_HEIGHT = 1200; // 1397px
-const SECTION_GAP = 24;
 
-const isHTMLElement = (node) => node instanceof HTMLElement;
+const Row = ({ widgets, i, onChangeHeight = () => { } }) => {
+  const ref = useRef();
+  const [height, setHeight] = useState(0);
+
+  useEffect(() => {
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setHeight(entry.contentRect.height);
+      }
+    });
+
+    observer.observe(ref.current);
+
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (height) {
+      onChangeHeight(i, { height, ref });
+    }
+  }, [height])
+
+  return (
+    <section ref={ref} style={widgets.style}>
+      {typeof widgets.render === 'function' ? widgets.render() : null}
+    </section>
+  )
+};
 
 export default function PdfView({
   config = [],
@@ -23,251 +47,104 @@ export default function PdfView({
   documentId = 'IDD-0000000',
   downloadId = 'DWL-00000123',
 }) {
+  const [sectionsConfig, setSectionsConfig] = useState({});
   const [pages, setPages] = useState([1]);
-  const contentRef = useRef(null);
-  const sectionsRef = useRef([]);
-  const resizeTimeoutRef = useRef(null);
-  const isCalculatingRef = useRef(false);
-
-  const resetPaginationStyles = useCallback((sections) => {
-    sections.forEach((section) => {
-      if (!section) return;
-      section.style.marginTop = '';
-      section.style.marginBottom = '';
-      section.style.pageBreakBefore = '';
-      section.style.breakBefore = '';
-      section.removeAttribute('data-pdf-page');
-      
-      // Reset all children
-      const allElements = section.querySelectorAll('*');
-      allElements.forEach((el) => {
-        if (!isHTMLElement(el)) return;
-        el.style.marginTop = '';
-        el.style.marginBottom = '';
-        el.style.pageBreakBefore = '';
-        el.style.breakBefore = '';
-        el.removeAttribute('data-pdf-page');
-      });
-    });
-  }, []);
-
-  const getAllBreakableElements = useCallback((section) => {
-    const elements = [];
-    
-    const shouldInclude = (el) => {
-      if (!isHTMLElement(el)) return false;
-      const style = window.getComputedStyle(el);
-      if (style.display === 'inline' || style.display === 'contents') return false;
-      if (style.position === 'absolute' || style.position === 'fixed') return false;
-      if (el.offsetHeight === 0) return false;
-      return true;
-    };
 
-    const traverse = (parent) => {
-      Array.from(parent.children).forEach((child) => {
-        if (shouldInclude(child)) {
-          elements.push(child);
-          traverse(child);
-        }
-      });
-    };
+  const doSizing = useCallback(() => {
+    const keys = Object.keys(sectionsConfig);
+    let _pages = [1];
+    let _page = 1;
 
-    traverse(section);
-    return elements;
-  }, []);
+    if (keys.length === config.length) {
+      let incrHeight = 0;
 
-  const paginateContent = useCallback(() => {
-    // Prevent recursive calls
-    if (isCalculatingRef.current) return;
-    
-    const sections = sectionsRef.current.filter(Boolean);
-    if (sections.length === 0) return;
+      keys.forEach(k => {
+        const { ref } = sectionsConfig[k];
+        ref.current.style.marginBottom = '0px';
+        // ref.current.style.marginTop = '15px';
+      })
 
-    isCalculatingRef.current = true;
+      keys.forEach((k, i) => {
+        const { height, ref } = sectionsConfig[k];
 
-    resetPaginationStyles(sections);
+        if (i === 0) {
+          ref.current.style.marginTop = `${HEADER_HEIGHT}px`;
+          incrHeight += HEADER_HEIGHT;
+        }
 
-    // Force layout recalc
-    sections.forEach(s => s.offsetHeight);
+        const newHeight = incrHeight + height;
 
-    let currentPage = 1;
-    let currentPageHeight = 0;
-    const breaks = [];
+        if (i === keys.length - 1) {
+          ref.current.style.paddingBottom = '30px';
+        }
 
-    sections.forEach((section, sectionIndex) => {
-      // Measure height after reset
-      const sectionHeight = section.offsetHeight;
-      const isFirstOnPage = currentPageHeight === 0;
-      const gapBefore = isFirstOnPage ? 0 : SECTION_GAP;
-      
-      if (currentPageHeight + gapBefore + sectionHeight <= CONTENT_HEIGHT) {
-        // Fits in current page
-        section.setAttribute('data-pdf-page', currentPage.toString());
-        
-        if (isFirstOnPage) {
-          // First item on page
-          if (currentPage === 1) {
-            // Very first section on first page - needs to be below header
-            section.style.marginTop = '0px'; // Container padding handles this
-          } else {
-            // First section on subsequent pages - no margin (container padding handles it)
-            section.style.marginTop = '0px';
+        if (newHeight > PAGE_HEIGHT - 30 - FOOTER_HEIGHT - HEADER_HEIGHT) {
+          const dif = Math.abs(PAGE_HEIGHT - incrHeight);
+          ref.current.style.marginTop = '30px';
+          _page += 1;
+          _pages.push(_page);
+
+          if (sectionsConfig[keys[i - 1]]) {
+            const { ref: topRef } = sectionsConfig[keys[i - 1]];
+            topRef.current.style.marginBottom = `${dif + HEADER_HEIGHT - 24}px`;
+            incrHeight = height + 24 + HEADER_HEIGHT;
+            // console.log('margin', dif);
           }
         } else {
-          // Not first item on page - add gap
-          section.style.marginTop = `${SECTION_GAP}px`;
-        }
-        currentPageHeight += gapBefore + sectionHeight;
-      } else {
-        // Doesn't fit - need to move to next page
-        const remainingSpace = CONTENT_HEIGHT - currentPageHeight;
-        
-        // Calculate margin needed to push this section to the next page
-        // remainingSpace = space left on current page
-        // Then we need to skip: footer margin + footer + header margin + header
-        const pushMargin = remainingSpace + PAGE_MARGIN_BOTTOM + FOOTER_HEIGHT + PAGE_MARGIN_TOP + HEADER_HEIGHT;
-        
-        // Move entire section to next page
-        currentPage += 1;
-        breaks.push({ section, type: 'section', page: currentPage });
-        section.setAttribute('data-pdf-page', currentPage.toString());
-        section.style.pageBreakBefore = 'always';
-        section.style.breakBefore = 'page';
-        section.style.marginTop = `${pushMargin}px`;
-        
-        // Start fresh height counter for new page
-        currentPageHeight = sectionHeight;
-        
-        // Check if section is too tall and needs internal breaks
-        if (sectionHeight > CONTENT_HEIGHT) {
-          // Try to break within section
-          const innerElements = getAllBreakableElements(section);
-          let pageHeightInSection = 0;
-          let sectionPage = currentPage;
-          
-          for (const el of innerElements) {
-            const rect = el.getBoundingClientRect();
-            const sectionRect = section.getBoundingClientRect();
-            const relativeTop = rect.top - sectionRect.top;
-            const elHeight = rect.height;
-            
-            // Check if this element would exceed the page
-            if (pageHeightInSection + elHeight > CONTENT_HEIGHT && relativeTop > 50) {
-              // Calculate remaining space on this page within the section
-              const remainingInSection = CONTENT_HEIGHT - pageHeightInSection;
-              const pushMarginInner = remainingInSection + PAGE_MARGIN_BOTTOM + FOOTER_HEIGHT + PAGE_MARGIN_TOP + HEADER_HEIGHT;
-              
-              sectionPage += 1;
-              breaks.push({ element: el, type: 'inner', page: sectionPage });
-              el.setAttribute('data-pdf-page', sectionPage.toString());
-              el.style.pageBreakBefore = 'always';
-              el.style.breakBefore = 'page';
-              el.style.marginTop = `${pushMarginInner}px`;
-              
-              // Reset page height for new page within section
-              pageHeightInSection = elHeight;
-            } else {
-              pageHeightInSection += elHeight;
-            }
-          }
-          
-          // Update current page if we created additional pages
-          if (sectionPage > currentPage) {
-            currentPage = sectionPage;
-            currentPageHeight = pageHeightInSection;
-          }
+          incrHeight = newHeight + 24;
         }
-      }
-    });
-
-    setPages(Array.from({ length: currentPage }, (_, idx) => idx + 1));
-    
-    // Reset flag after a brief delay to allow next calculation
-    setTimeout(() => {
-      isCalculatingRef.current = false;
-    }, 100);
-  }, [getAllBreakableElements, resetPaginationStyles]);
-
-  useLayoutEffect(() => {
-    // Use requestAnimationFrame to ensure DOM is painted
-    const rafId = requestAnimationFrame(() => {
-      paginateContent();
-    });
-    
-    return () => cancelAnimationFrame(rafId);
-  }, [paginateContent, config]);
+        // console.groupEnd();
+      })
+      setPages(_pages);
+    }
+  }, [sectionsConfig]);
 
   useEffect(() => {
-    const sections = sectionsRef.current.filter(Boolean);
-    if (sections.length === 0) return undefined;
-
-    const observer = new ResizeObserver(() => {
-      // Debounce the pagination calculation
-      if (resizeTimeoutRef.current) {
-        clearTimeout(resizeTimeoutRef.current);
-      }
-      
-      resizeTimeoutRef.current = setTimeout(() => {
-        // Use requestAnimationFrame to avoid ResizeObserver loop warning
-        requestAnimationFrame(() => {
-          paginateContent();
-        });
-      }, 150);
-    });
+    doSizing();
+  }, [doSizing]);
 
-    sections.forEach(section => observer.observe(section));
-
-    return () => {
-      observer.disconnect();
-      if (resizeTimeoutRef.current) {
-        clearTimeout(resizeTimeoutRef.current);
-      }
-    };
-  }, [paginateContent, config.length]);
+  const onChangeHeight = useCallback((index, conf) => {
+    setSectionsConfig((prev) => ({ ...prev, [index]: conf }))
+  }, []);
 
   const contClassName = formatClassname(['daf-analysis daf-pdf-view', customClassName]);
 
-  return (
-    <div className={contClassName} style={{ position: 'relative', minHeight: `${PAGE_HEIGHT}px` }}>
+  const renderDashboard = useCallback(() => {
+    return (
       <div className="view-content">
         <div className="daf-analysis-layout">
-          <div
-            className='sections-cont'
-            ref={contentRef}
-            data-pdf-content-root="true"
-            style={{
-              marginTop: `${HEADER_HEIGHT + PAGE_MARGIN_TOP}px`,
-              // paddingBottom: `${FOOTER_HEIGHT + PAGE_MARGIN_BOTTOM}px !important`,
-              position: 'relative',
-            }}
-          >
-            {config.map((widgets, index) => (
-              <section
-                key={`dashboard-section-${index + 1}`}
-                ref={(el) => {
-                  sectionsRef.current[index] = el;
-                }}
-                style={widgets.style}
-                data-pdf-section="true"
-              >
-                {typeof widgets.render === 'function' ? widgets.render() : null}
-              </section>
+          <div className='sections-cont'>
+            {config.map((widgets, i) => (
+              <Row
+                widgets={widgets}
+                key={`dashboard-sections=${i + 1}`}
+                i={i}
+                onChangeHeight={onChangeHeight}
+              />
             ))}
           </div>
         </div>
       </div>
+    );
+  }, [config, onChangeHeight]);
+
+  // <div className="daf-analysis">
+  // <Header title={t('Dashboard Title')} />
+
+  // <div className="content">
+  //   <div className="view-content">
+  //     <div className="daf-analysis-layout">
+  //       <div className='sections-cont w-pt'>
+  //         <section>
+
+  return (
+    <div className={contClassName} style={{ position: 'relative' }}>
+      {renderDashboard()}
       {pages.map((page) => (
-        <Fragment key={`pdf-decor-${page}`}>
+        <>
           <div
-            style={{ 
-              top: ((page - 1) * PAGE_HEIGHT) + PAGE_MARGIN_TOP, 
-              width: '100%', 
-              height: HEADER_HEIGHT, 
-              position: 'absolute', 
-              left: 0, 
-              zIndex: 1000000,
-              pointerEvents: 'none'
-            }}
+            style={{ top: ((page - 1) * PAGE_HEIGHT), width: '100%', height: HEADER_HEIGHT - 24, position: 'absolute', left: 0, zIndex: 1000000 }}
+            key={`headers-${page}`}
             className="flex-row dashboard-header"
           >
             <div className="flex flex-column justify-center flex-1">
@@ -278,15 +155,8 @@ export default function PdfView({
             </div>
           </div>
           <div
-            style={{ 
-              top: (page * PAGE_HEIGHT) - FOOTER_HEIGHT - PAGE_MARGIN_BOTTOM, 
-              width: '100%', 
-              height: FOOTER_HEIGHT, 
-              position: 'absolute', 
-              left: 0, 
-              zIndex: 1000000,
-              pointerEvents: 'none'
-            }}
+            style={{ top: (page * PAGE_HEIGHT) - FOOTER_HEIGHT, width: '100%', height: FOOTER_HEIGHT, position: 'absolute', left: 0, zIndex: 1000000 }}
+            key={`footers-${page}`}
             className="dashboard-footer flex-row"
           >
             <div className="flex flex-column justify-center">
@@ -320,7 +190,7 @@ export default function PdfView({
               <h5>{page}</h5>
             </div>
           </div>
-        </Fragment>
+        </>
       ))}
     </div>
   );