datastake-daf 0.6.441 → 0.6.443

package/dist/components/index.js

@@ -14536,206 +14536,149 @@ DAFFooter.propTypes = {
 };
 
 const PAGE_HEIGHT = 1587;
-const HEADER_HEIGHT = 100;
+// margin-top: 20, bottom: 20;
 const FOOTER_HEIGHT = 70;
-const GAP_BETWEEN_BLOCKS = 24;
-const FILL_RATIO = 0.80;
-const CONTENT_HEIGHT = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT;
+const HEADER_HEIGHT = 100;
 const Row = _ref => {
   let {
     widgets,
     i,
     onChangeHeight = () => {}
   } = _ref;
-  const ref = React.useRef(null);
+  const ref = React.useRef();
+  const [height, setHeight] = React.useState(0);
   React.useLayoutEffect(() => {
-    if (!ref.current) return;
-    const ro = new ResizeObserver(entries => {
-      var _entries$0$contentRec, _entries$;
-      const h = (_entries$0$contentRec = (_entries$ = entries[0]) === null || _entries$ === void 0 || (_entries$ = _entries$.contentRect) === null || _entries$ === void 0 ? void 0 : _entries$.height) !== null && _entries$0$contentRec !== void 0 ? _entries$0$contentRec : 0;
-      if (h) onChangeHeight(i, {
-        height: h,
+    const observer = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        setHeight(entry.contentRect.height);
+      }
+    });
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [ref]);
+  React.useEffect(() => {
+    if (height) {
+      onChangeHeight(i, {
+        height,
         ref
       });
-    });
-    ro.observe(ref.current);
-    return () => ro.disconnect();
-  }, [i, onChangeHeight]);
+    }
+  }, [height]);
   return /*#__PURE__*/jsxRuntime.jsx("section", {
     ref: ref,
     style: widgets.style,
-    children: typeof widgets.render === "function" ? widgets.render() : null
+    children: typeof widgets.render === 'function' ? widgets.render() : null
   });
 };
 function PdfView(_ref2) {
   let {
     config = [],
     customClassName,
-    title = "Title",
-    imgSrc = "",
-    userId = "IDD-0000000",
-    accountId = "IDD-0000000",
-    documentId = "IDD-0000000",
-    downloadId = "DWL-00000123"
+    title = 'Title',
+    imgSrc = '',
+    userId = 'IDD-0000000',
+    accountId = 'IDD-0000000',
+    documentId = 'IDD-0000000',
+    downloadId = 'DWL-00000123'
   } = _ref2;
-  // Config actually used for rendering (may expand if we split big blocks)
-  const [expandedConfig, setExpandedConfig] = React.useState(config);
-  // index -> {height, ref}
-  const [sections, setSections] = React.useState({});
-  // [[indices for page 1], [indices for page 2], ...]
-  const [pageMap, setPageMap] = React.useState([]);
-
-  // Reset expansion when the external config changes
-  React.useEffect(() => {
-    setExpandedConfig(config);
-    setSections({});
-    setPageMap([]);
-  }, [config]);
-  const onChangeHeight = React.useCallback((index, conf) => {
-    setSections(prev => {
-      var _prev$index;
-      return ((_prev$index = prev[index]) === null || _prev$index === void 0 ? void 0 : _prev$index.height) === conf.height ? prev : _objectSpread2(_objectSpread2({}, prev), {}, {
-        [index]: conf
+  const [sectionsConfig, setSectionsConfig] = React.useState({});
+  const [pages, setPages] = React.useState([1]);
+  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';
       });
-    });
-  }, []);
-
-  // --- Step 1: After measurement, split any oversized splittable blocks (one per pass) ---
-  React.useEffect(() => {
-    const keys = Object.keys(sections).map(k => Number(k)).sort((a, b) => a - b);
-    if (keys.length !== expandedConfig.length) return; // not all measured yet
-
-    for (const idx of keys) {
-      var _sections$idx$height, _sections$idx;
-      const h = (_sections$idx$height = (_sections$idx = sections[idx]) === null || _sections$idx === void 0 ? void 0 : _sections$idx.height) !== null && _sections$idx$height !== void 0 ? _sections$idx$height : 0;
-      const item = expandedConfig[idx];
-      const canSplit = (item === null || item === void 0 ? void 0 : item.splittable) && typeof (item === null || item === void 0 ? void 0 : item.splitInto) === "function";
-      if (canSplit && h > CONTENT_HEIGHT) {
-        // Split it and re-measure
-        const chunks = item.splitInto(CONTENT_HEIGHT);
-        const next = [...expandedConfig.slice(0, idx), ...chunks, ...expandedConfig.slice(idx + 1)];
-        setExpandedConfig(next);
-        setSections({}); // force re-measure since indices changed
-        setPageMap([]);
-        return; // do one split per layout pass to avoid loops
-      }
-    }
-  }, [sections, expandedConfig]);
-
-  // --- Step 2: Paginate with per-block hints (priority + keepWithNext) ---
-  const paginate = React.useCallback(() => {
-    const keys = Object.keys(sections).map(k => Number(k)).sort((a, b) => a - b);
-    if (keys.length !== expandedConfig.length) return;
-
-    // Build meta (read hints from config)
-    const meta = keys.map(i => {
-      var _expandedConfig$i$pri, _expandedConfig$i, _expandedConfig$i2;
-      return {
-        i,
-        h: sections[i].height,
-        priority: (_expandedConfig$i$pri = (_expandedConfig$i = expandedConfig[i]) === null || _expandedConfig$i === void 0 ? void 0 : _expandedConfig$i.priority) !== null && _expandedConfig$i$pri !== void 0 ? _expandedConfig$i$pri : 2,
-        // 1 > 2 > 3 (1 is most important)
-        keepWithNext: !!((_expandedConfig$i2 = expandedConfig[i]) !== null && _expandedConfig$i2 !== void 0 && _expandedConfig$i2.keepWithNext)
-      };
-    });
-    const threshold = Math.floor(CONTENT_HEIGHT * FILL_RATIO);
-    const pages = [];
-    let current = [];
-    let used = 0;
-    let carryKeep = false;
-    for (let k = 0; k < meta.length; k++) {
-      const curr = meta[k];
-      const hWithGap = (current.length === 0 ? 0 : GAP_BETWEEN_BLOCKS) + curr.h;
-
-      // Honor keep-with-next from the previous block
-      if (carryKeep) {
-        // start current on a fresh page
-        if (current.length) pages.push(current);
-        current = [curr.i];
-        used = curr.h;
-        carryKeep = false;
-        if (curr.keepWithNext) carryKeep = true;
-        continue;
-      }
-
-      // Oversized singleton: own page
-      if (curr.h > threshold && current.length === 0) {
-        pages.push([curr.i]);
-        current = [];
-        used = 0;
-        carryKeep = false;
-        continue;
-      }
-
-      // Fits on current page?
-      if (current.length === 0 || used + hWithGap <= threshold) {
-        current.push(curr.i);
-        used += hWithGap;
-      } else {
-        // Rebalance: try pushing a lower-priority block from current to next page to make room
-        let moved = false;
-        for (let j = current.length - 1; j >= 0; j--) {
-          const prevIdx = current[j];
-          const prev = meta.find(m => m.i === prevIdx);
-          if (prev.priority > curr.priority) {
-            // lower priority number = higher importance
-            const tentativeUsed = used - (j === 0 ? prev.h : prev.h + GAP_BETWEEN_BLOCKS);
-            if (tentativeUsed + hWithGap <= threshold) {
-              // move prev off this page
-              current.splice(j, 1);
-              used = tentativeUsed;
-              moved = true;
-              break;
-            }
+      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);
           }
-        }
-        if (!moved) {
-          pages.push(current);
-          current = [curr.i];
-          used = curr.h; // first element on new page (no top gap)
         } else {
-          // we made space; place current here
-          current.push(curr.i);
-          used += hWithGap;
+          incrHeight = newHeight + 24;
         }
-      }
-      if (curr.keepWithNext) carryKeep = true;
+        // console.groupEnd();
+      });
+      setPages(_pages);
     }
-    if (current.length) pages.push(current);
-    setPageMap(pages); // <-- unlimited pages; grows as needed
-  }, [expandedConfig, sections]);
+  }, [sectionsConfig]);
   React.useEffect(() => {
-    paginate();
-  }, [paginate]);
-  const contClassName = formatClassname(["daf-analysis daf-pdf-view", customClassName]);
-
-  // Measurement layer (only shown until we have a pageMap)
-  const MeasurementLayer = React.useMemo(() => /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "view-content",
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "daf-analysis-layout",
+    doSizing();
+  }, [doSizing]);
+  const onChangeHeight = React.useCallback((index, conf) => {
+    setSectionsConfig(prev => _objectSpread2(_objectSpread2({}, prev), {}, {
+      [index]: conf
+    }));
+  }, []);
+  const contClassName = formatClassname(['daf-analysis daf-pdf-view', customClassName]);
+  const renderDashboard = React.useCallback(() => {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "view-content",
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "sections-cont",
-        children: expandedConfig.map((widgets, i) => /*#__PURE__*/jsxRuntime.jsx(Row, {
-          widgets: widgets,
-          i: i,
-          onChangeHeight: onChangeHeight
-        }, "measure-".concat(i)))
+        className: "daf-analysis-layout",
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "sections-cont",
+          children: config.map((widgets, i) => /*#__PURE__*/jsxRuntime.jsx(Row, {
+            widgets: widgets,
+            i: i,
+            onChangeHeight: onChangeHeight
+          }, "dashboard-sections=".concat(i + 1)))
+        })
       })
-    })
-  }), [expandedConfig, onChangeHeight]);
-  return /*#__PURE__*/jsxRuntime.jsx("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 /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: contClassName,
-    children: pageMap.length > 0 ? pageMap.map((indices, pageIdx) => /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "pdf-page",
-      style: {
-        height: PAGE_HEIGHT,
-        position: "relative",
-        overflow: "hidden"
-      },
+    style: {
+      position: 'relative'
+    },
+    children: [renderDashboard(), pages.map(page => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         style: {
-          height: HEADER_HEIGHT
+          top: (page - 1) * PAGE_HEIGHT,
+          width: '100%',
+          height: HEADER_HEIGHT - 24,
+          position: 'absolute',
+          left: 0,
+          zIndex: 1000000
         },
         className: "flex-row dashboard-header",
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -14750,51 +14693,39 @@ function PdfView(_ref2) {
             alt: "logo"
           })
         })]
-      }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "pdf-body",
+      }, "headers-".concat(page)), /*#__PURE__*/jsxRuntime.jsxs("div", {
         style: {
-          minHeight: CONTENT_HEIGHT
-        },
-        children: /*#__PURE__*/jsxRuntime.jsx("div", {
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            gap: GAP_BETWEEN_BLOCKS
-          },
-          children: indices.map(i => /*#__PURE__*/jsxRuntime.jsx(Row, {
-            widgets: expandedConfig[i],
-            i: i,
-            onChangeHeight: onChangeHeight
-          }, "row-".concat(i)))
-        })
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        style: {
-          height: FOOTER_HEIGHT
+          top: page * PAGE_HEIGHT - FOOTER_HEIGHT,
+          width: '100%',
+          height: FOOTER_HEIGHT,
+          position: 'absolute',
+          left: 0,
+          zIndex: 1000000
         },
         className: "dashboard-footer flex-row",
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
           className: "flex flex-column justify-center",
           children: /*#__PURE__*/jsxRuntime.jsx("h5", {
-            children: moment__default["default"]().format("DD MMM YYYY")
+            children: moment__default["default"]().format('DD MMM YYYY')
           })
         }), /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "flex flex-column justify-center",
           children: /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "flex gap-2",
             children: [/*#__PURE__*/jsxRuntime.jsxs("h5", {
-              children: ["User ID: ", /*#__PURE__*/jsxRuntime.jsx("strong", {
+              children: ["User ID:", ' ', /*#__PURE__*/jsxRuntime.jsx("strong", {
                 children: userId
               })]
             }), /*#__PURE__*/jsxRuntime.jsxs("h5", {
-              children: ["Account ID: ", /*#__PURE__*/jsxRuntime.jsx("strong", {
+              children: ["Account ID:", ' ', /*#__PURE__*/jsxRuntime.jsx("strong", {
                 children: accountId
               })]
             }), /*#__PURE__*/jsxRuntime.jsxs("h5", {
-              children: ["Document ID: ", /*#__PURE__*/jsxRuntime.jsx("strong", {
+              children: ["Document ID:", ' ', /*#__PURE__*/jsxRuntime.jsx("strong", {
                 children: documentId
               })]
             }), /*#__PURE__*/jsxRuntime.jsxs("h5", {
-              children: ["Download ID: ", /*#__PURE__*/jsxRuntime.jsx("strong", {
+              children: ["Download ID:", ' ', /*#__PURE__*/jsxRuntime.jsx("strong", {
                 children: downloadId
               })]
             })]
@@ -14802,29 +14733,21 @@ function PdfView(_ref2) {
         }), /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "flex flex-column justify-center",
           children: /*#__PURE__*/jsxRuntime.jsx("h5", {
-            children: pageIdx + 1
+            children: page
           })
         })]
-      })]
-    }, "page-".concat(pageIdx))) : MeasurementLayer
+      }, "footers-".concat(page))]
+    }))]
   });
 }
 PdfView.propTypes = {
-  config: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
-    render: PropTypes__default["default"].func.isRequired,
-    style: PropTypes__default["default"].object,
-    priority: PropTypes__default["default"].oneOf([1, 2, 3]),
-    keepWithNext: PropTypes__default["default"].bool,
-    splittable: PropTypes__default["default"].bool,
-    splitInto: PropTypes__default["default"].func // (maxHeightPx) => WidgetConfig[]
-  })),
+  config: PropTypes__default["default"].array,
   customClassName: PropTypes__default["default"].any,
   title: PropTypes__default["default"].string,
   imgSrc: PropTypes__default["default"].string,
   userId: PropTypes__default["default"].string,
   accountId: PropTypes__default["default"].string,
-  documentId: PropTypes__default["default"].string,
-  downloadId: PropTypes__default["default"].string
+  documentId: PropTypes__default["default"].string
 };
 
 const ajaxSelectFieldData = async (value, config, getApiBaseUrl = () => {}, getAppHeader = () => {}, app, formValues = {}) => {

package/package.json

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

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

@@ -1,267 +1,207 @@
 import moment from "moment";
-import PropTypes from "prop-types";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import PropTypes from 'prop-types';
+import { useCallback, useEffect, useRef, useState, useLayoutEffect } from "react";
 import { formatClassname } from "../../../../../helpers/ClassesHelper";
 
 const PAGE_HEIGHT = 1587;
-const HEADER_HEIGHT = 100;
+// margin-top: 20, bottom: 20;
 const FOOTER_HEIGHT = 70;
-const GAP_BETWEEN_BLOCKS = 24;
-const FILL_RATIO = 0.80;
-
-const CONTENT_HEIGHT = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT;
+const HEADER_HEIGHT = 100;
 
-const Row = ({ widgets, i, onChangeHeight = () => {} }) => {
-  const ref = useRef(null);
+const Row = ({ widgets, i, onChangeHeight = () => { } }) => {
+  const ref = useRef();
+  const [height, setHeight] = useState(0);
 
   useLayoutEffect(() => {
-    if (!ref.current) return;
-    const ro = new ResizeObserver((entries) => {
-      const h = entries[0]?.contentRect?.height ?? 0;
-      if (h) onChangeHeight(i, { height: h, ref });
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setHeight(entry.contentRect.height);
+      }
     });
-    ro.observe(ref.current);
-    return () => ro.disconnect();
-  }, [i, onChangeHeight]);
+
+    observer.observe(ref.current);
+
+    return () => observer.disconnect();
+  }, [ref]);
+
+  useEffect(() => {
+    if (height) {
+      onChangeHeight(i, { height, ref });
+    }
+  }, [height])
 
   return (
     <section ref={ref} style={widgets.style}>
-      {typeof widgets.render === "function" ? widgets.render() : null}
+      {typeof widgets.render === 'function' ? widgets.render() : null}
     </section>
-  );
+  )
 };
 
 export default function PdfView({
   config = [],
   customClassName,
-  title = "Title",
-  imgSrc = "",
-  userId = "IDD-0000000",
-  accountId = "IDD-0000000",
-  documentId = "IDD-0000000",
-  downloadId = "DWL-00000123",
+  title = 'Title',
+  imgSrc = '',
+  userId = 'IDD-0000000',
+  accountId = 'IDD-0000000',
+  documentId = 'IDD-0000000',
+  downloadId = 'DWL-00000123',
 }) {
-  // Config actually used for rendering (may expand if we split big blocks)
-  const [expandedConfig, setExpandedConfig] = useState(config);
-  // index -> {height, ref}
-  const [sections, setSections] = useState({});
-  // [[indices for page 1], [indices for page 2], ...]
-  const [pageMap, setPageMap] = useState([]);
-
-  // Reset expansion when the external config changes
-  useEffect(() => {
-    setExpandedConfig(config);
-    setSections({});
-    setPageMap([]);
-  }, [config]);
+  const [sectionsConfig, setSectionsConfig] = useState({});
+  const [pages, setPages] = useState([1]);
 
-  const onChangeHeight = useCallback((index, conf) => {
-    setSections((prev) => (prev[index]?.height === conf.height ? prev : { ...prev, [index]: conf }));
-  }, []);
+  const doSizing = useCallback(() => {
+    const keys = Object.keys(sectionsConfig);
+    let _pages = [1];
+    let _page = 1;
 
-  // --- Step 1: After measurement, split any oversized splittable blocks (one per pass) ---
-  useEffect(() => {
-    const keys = Object.keys(sections)
-      .map((k) => Number(k))
-      .sort((a, b) => a - b);
+    if (keys.length === config.length) {
+      let incrHeight = 0;
 
-    if (keys.length !== expandedConfig.length) return; // not all measured yet
+      keys.forEach(k => {
+        const { ref } = sectionsConfig[k];
+        ref.current.style.marginBottom = '0px';
+        // ref.current.style.marginTop = '15px';
+      })
 
-    for (const idx of keys) {
-      const h = sections[idx]?.height ?? 0;
-      const item = expandedConfig[idx];
-      const canSplit = item?.splittable && typeof item?.splitInto === "function";
-      if (canSplit && h > CONTENT_HEIGHT) {
-        // Split it and re-measure
-        const chunks = item.splitInto(CONTENT_HEIGHT);
-        const next = [
-          ...expandedConfig.slice(0, idx),
-          ...chunks,
-          ...expandedConfig.slice(idx + 1),
-        ];
-        setExpandedConfig(next);
-        setSections({});    // force re-measure since indices changed
-        setPageMap([]);
-        return;             // do one split per layout pass to avoid loops
-      }
-    }
-  }, [sections, expandedConfig]);
+      keys.forEach((k, i) => {
+        const { height, ref } = sectionsConfig[k];
 
-  // --- Step 2: Paginate with per-block hints (priority + keepWithNext) ---
-  const paginate = useCallback(() => {
-    const keys = Object.keys(sections)
-      .map((k) => Number(k))
-      .sort((a, b) => a - b);
-    if (keys.length !== expandedConfig.length) return;
-
-    // Build meta (read hints from config)
-    const meta = keys.map((i) => ({
-      i,
-      h: sections[i].height,
-      priority: expandedConfig[i]?.priority ?? 2,      // 1 > 2 > 3 (1 is most important)
-      keepWithNext: !!expandedConfig[i]?.keepWithNext,
-    }));
-
-    const threshold = Math.floor(CONTENT_HEIGHT * FILL_RATIO);
-    const pages = [];
-    let current = [];
-    let used = 0;
-    let carryKeep = false;
-
-    for (let k = 0; k < meta.length; k++) {
-      const curr = meta[k];
-      const hWithGap = (current.length === 0 ? 0 : GAP_BETWEEN_BLOCKS) + curr.h;
+        if (i === 0) {
+          ref.current.style.marginTop = `${HEADER_HEIGHT}px`;
+          incrHeight += HEADER_HEIGHT;
+        }
 
-      // Honor keep-with-next from the previous block
-      if (carryKeep) {
-        // start current on a fresh page
-        if (current.length) pages.push(current);
-        current = [curr.i];
-        used = curr.h;
-        carryKeep = false;
-        if (curr.keepWithNext) carryKeep = true;
-        continue;
-      }
+        const newHeight = incrHeight + height;
 
-      // Oversized singleton: own page
-      if (curr.h > threshold && current.length === 0) {
-        pages.push([curr.i]);
-        current = [];
-        used = 0;
-        carryKeep = false;
-        continue;
-      }
+        if (i === keys.length - 1) {
+          ref.current.style.paddingBottom = '30px';
+        }
 
-      // Fits on current page?
-      if (current.length === 0 || used + hWithGap <= threshold) {
-        current.push(curr.i);
-        used += hWithGap;
-      } else {
-        // Rebalance: try pushing a lower-priority block from current to next page to make room
-        let moved = false;
-        for (let j = current.length - 1; j >= 0; j--) {
-          const prevIdx = current[j];
-          const prev = meta.find((m) => m.i === prevIdx);
-          if (prev.priority > curr.priority) { // lower priority number = higher importance
-            const tentativeUsed = used - (j === 0 ? prev.h : (prev.h + GAP_BETWEEN_BLOCKS));
-            if (tentativeUsed + hWithGap <= threshold) {
-              // move prev off this page
-              current.splice(j, 1);
-              used = tentativeUsed;
-              moved = true;
-              break;
-            }
+        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);
           }
-        }
-        if (!moved) {
-          pages.push(current);
-          current = [curr.i];
-          used = curr.h; // first element on new page (no top gap)
         } else {
-          // we made space; place current here
-          current.push(curr.i);
-          used += hWithGap;
+          incrHeight = newHeight + 24;
         }
-      }
-
-      if (curr.keepWithNext) carryKeep = true;
+        // console.groupEnd();
+      })
+      setPages(_pages);
     }
-
-    if (current.length) pages.push(current);
-    setPageMap(pages); // <-- unlimited pages; grows as needed
-  }, [expandedConfig, sections]);
+  }, [sectionsConfig]);
 
   useEffect(() => {
-    paginate();
-  }, [paginate]);
+    doSizing();
+  }, [doSizing]);
 
-  const contClassName = formatClassname(["daf-analysis daf-pdf-view", customClassName]);
+  const onChangeHeight = useCallback((index, conf) => {
+    setSectionsConfig((prev) => ({ ...prev, [index]: conf }))
+  }, []);
+
+  const contClassName = formatClassname(['daf-analysis daf-pdf-view', customClassName]);
 
-  // Measurement layer (only shown until we have a pageMap)
-  const MeasurementLayer = useMemo(
-    () => (
+  const renderDashboard = useCallback(() => {
+    return (
       <div className="view-content">
         <div className="daf-analysis-layout">
-          <div className="sections-cont">
-            {expandedConfig.map((widgets, i) => (
-              <Row key={`measure-${i}`} widgets={widgets} i={i} onChangeHeight={onChangeHeight} />
+          <div className='sections-cont'>
+            {config.map((widgets, i) => (
+              <Row
+                widgets={widgets}
+                key={`dashboard-sections=${i + 1}`}
+                i={i}
+                onChangeHeight={onChangeHeight}
+              />
             ))}
           </div>
         </div>
       </div>
-    ),
-    [expandedConfig, onChangeHeight]
-  );
+    );
+  }, [config, onChangeHeight]);
 
-  return (
-    <div className={contClassName}>
-      {/* Render paginated pages (unlimited) */}
-      {pageMap.length > 0
-        ? pageMap.map((indices, pageIdx) => (
-            <div
-              key={`page-${pageIdx}`}
-              className="pdf-page"
-              style={{ height: PAGE_HEIGHT, position: "relative", overflow: "hidden" }}
-            >
-              {/* Header */}
-              <div style={{ height: HEADER_HEIGHT }} className="flex-row dashboard-header">
-                <div className="flex flex-column justify-center flex-1">
-                  <h2>{title}</h2>
-                </div>
-                <div className="flex flex-column justify-center">
-                  <img src={imgSrc} alt="logo" />
-                </div>
-              </div>
+  // <div className="daf-analysis">
+  // <Header title={t('Dashboard Title')} />
 
-              {/* Body */}
-              <div className="pdf-body" style={{ minHeight: CONTENT_HEIGHT }}>
-                <div style={{ display: "flex", flexDirection: "column", gap: GAP_BETWEEN_BLOCKS }}>
-                  {indices.map((i) => (
-                    <Row key={`row-${i}`} widgets={expandedConfig[i]} i={i} onChangeHeight={onChangeHeight} />
-                  ))}
-                </div>
-              </div>
+  // <div className="content">
+  //   <div className="view-content">
+  //     <div className="daf-analysis-layout">
+  //       <div className='sections-cont w-pt'>
+  //         <section>
 
-              {/* Footer */}
-              <div style={{ height: FOOTER_HEIGHT }} className="dashboard-footer flex-row">
-                <div className="flex flex-column justify-center">
-                  <h5>{moment().format("DD MMM YYYY")}</h5>
-                </div>
-                <div className="flex flex-column justify-center">
-                  <div className="flex gap-2">
-                    <h5>User ID: <strong>{userId}</strong></h5>
-                    <h5>Account ID: <strong>{accountId}</strong></h5>
-                    <h5>Document ID: <strong>{documentId}</strong></h5>
-                    <h5>Download ID: <strong>{downloadId}</strong></h5>
-                  </div>
-                </div>
-                <div className="flex flex-column justify-center">
-                  <h5>{pageIdx + 1}</h5>
-                </div>
+  return (
+    <div className={contClassName} style={{ position: 'relative' }}>
+      {renderDashboard()}
+      {pages.map((page) => (
+        <>
+          <div
+            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">
+              <h2>{title}</h2>
+            </div>
+            <div className="flex flex-column justify-center">
+              <img src={imgSrc} alt="logo" />
+            </div>
+          </div>
+          <div
+            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">
+              <h5>{moment().format('DD MMM YYYY')}</h5>
+            </div>
+            <div className="flex flex-column justify-center">
+              <div className="flex gap-2">
+                <h5>
+                  User ID:
+                  {' '}
+                  <strong>{userId}</strong>
+                </h5>
+                <h5>
+                  Account ID:
+                  {' '}
+                  <strong>{accountId}</strong>
+                </h5>
+                <h5>
+                  Document ID:
+                  {' '}
+                  <strong>{documentId}</strong>
+                </h5>
+                <h5>
+                  Download ID:
+                  {' '}
+                  <strong>{downloadId}</strong>
+                </h5>
               </div>
             </div>
-          ))
-        : MeasurementLayer}
+            <div className="flex flex-column justify-center">
+              <h5>{page}</h5>
+            </div>
+          </div>
+        </>
+      ))}
     </div>
   );
 }
 
 PdfView.propTypes = {
-  config: PropTypes.arrayOf(
-    PropTypes.shape({
-      render: PropTypes.func.isRequired,
-      style: PropTypes.object,
-      priority: PropTypes.oneOf([1, 2, 3]),
-      keepWithNext: PropTypes.bool,
-      splittable: PropTypes.bool,
-      splitInto: PropTypes.func, // (maxHeightPx) => WidgetConfig[]
-    })
-  ),
+  config: PropTypes.array,
   customClassName: PropTypes.any,
   title: PropTypes.string,
   imgSrc: PropTypes.string,
   userId: PropTypes.string,
   accountId: PropTypes.string,
   documentId: PropTypes.string,
-  downloadId: PropTypes.string,
-};
+}