datastake-daf 0.6.132 → 0.6.133

package/dist/components/index.js

@@ -12956,13 +12956,9 @@ DAFFooter.propTypes = {
 };
 
 const PAGE_HEIGHT = 1587;
+// margin-top: 20, bottom: 20;
 const FOOTER_HEIGHT = 70;
-const HEADER_HEIGHT = 100; // Total area reserved for header (could be slightly more than actual div height)
-const HEADER_DIV_HEIGHT = HEADER_HEIGHT - 24; // Actual height of the absolute header div
-
-const FIRST_CONTENT_TOP_MARGIN = 30; // Desired margin-top for the very first content section on any given page.
-const SECTION_NORMAL_MARGIN = 24; // Default margin-top for subsequent sections on the same page.
-
+const HEADER_HEIGHT = 100;
 const Row = _ref => {
   let {
     widgets,
@@ -13012,89 +13008,48 @@ function PdfView(_ref2) {
     let _pages = [1];
     let _page = 1;
     if (keys.length === config.length) {
-      // `currentContentHeightAccumulated` tracks the height used by content sections *plus their top margins*,
-      // relative to the top of the *usable content area* on the current page.
-      let currentContentHeightAccumulated = 0;
-
-      // The total vertical space available for content sections *between* the absolute header and footer.
-      const USABLE_PAGE_CONTENT_HEIGHT = PAGE_HEIGHT - HEADER_DIV_HEIGHT - FOOTER_HEIGHT;
-
-      // Reset margins/padding for all sections before recalculating
+      let incrHeight = 0;
       keys.forEach(k => {
         const {
           ref
         } = sectionsConfig[k];
-        if (ref.current) {
-          ref.current.style.marginBottom = '0px';
-          ref.current.style.marginTop = '0px';
-          ref.current.style.paddingBottom = '0px';
-        }
+        ref.current.style.marginBottom = '0px';
+        // ref.current.style.marginTop = '15px';
       });
       keys.forEach((k, i) => {
         const {
           height,
           ref
         } = sectionsConfig[k];
-        if (!ref.current) return; // Skip if ref.current is null (e.g., component unmounted or not yet rendered)
-
-        let sectionTopMargin = 0;
-
-        // Determine the top margin for the current section
-        if (currentContentHeightAccumulated === 0) {
-          // This is the very first content section on the current virtual page
-          sectionTopMargin = FIRST_CONTENT_TOP_MARGIN;
-        } else {
-          // Subsequent content sections on the same virtual page
-          sectionTopMargin = SECTION_NORMAL_MARGIN;
+        if (i === 0) {
+          ref.current.style.marginTop = "".concat(HEADER_HEIGHT, "px");
+          incrHeight += HEADER_HEIGHT;
         }
-
-        // Calculate the total space this section *would take* on the current page, including its own top margin.
-        const spaceNeededByThisSection = sectionTopMargin + height;
-
-        // Check if adding this section (with its top margin) would exceed the usable content area.
-        if (currentContentHeightAccumulated + spaceNeededByThisSection > USABLE_PAGE_CONTENT_HEIGHT) {
-          // This section overflows, so it must start on a new page.
+        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 there was a previous section on the *old* page, we need to fill the remaining space
-          // on that page by adding a bottom margin to the last section that fit.
-          if (i > 0) {
-            var _sectionsConfig$keys;
-            const prevSectionRef = (_sectionsConfig$keys = sectionsConfig[keys[i - 1]]) === null || _sectionsConfig$keys === void 0 ? void 0 : _sectionsConfig$keys.ref;
-            if (prevSectionRef !== null && prevSectionRef !== void 0 && prevSectionRef.current) {
-              // Calculate remaining space on the previous page
-              const spaceLeftOnPrevPage = USABLE_PAGE_CONTENT_HEIGHT - currentContentHeightAccumulated;
-              if (spaceLeftOnPrevPage > 0) {
-                prevSectionRef.current.style.marginBottom = "".concat(spaceLeftOnPrevPage, "px");
-              }
-            }
+          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);
           }
-
-          // For the current section (which is now the first on a new page), apply the `FIRST_CONTENT_TOP_MARGIN`.
-          ref.current.style.marginTop = "".concat(FIRST_CONTENT_TOP_MARGIN, "px");
-          currentContentHeightAccumulated = FIRST_CONTENT_TOP_MARGIN + height; // Reset and update accumulated height for the *new* page
         } else {
-          // This section fits on the current page. Apply its calculated top margin.
-          ref.current.style.marginTop = "".concat(sectionTopMargin, "px");
-          currentContentHeightAccumulated += spaceNeededByThisSection; // Add its height and its own top margin to accumulated height
-        }
-
-        // Add the standard margin between sections (for the *next* section, if there is one).
-        // This is important because `currentContentHeightAccumulated` needs to reflect the space used *up to the bottom of this section*,
-        // plus any necessary space for the next section's margin *before* it gets evaluated.
-        if (i < keys.length - 1) {
-          currentContentHeightAccumulated += SECTION_NORMAL_MARGIN;
-        }
-
-        // For the very last section of the entire document, add extra padding to the bottom.
-        if (i === keys.length - 1) {
-          ref.current.style.paddingBottom = '30px';
+          incrHeight = newHeight + 24;
         }
+        // console.groupEnd();
       });
       setPages(_pages);
     }
-  }, [sectionsConfig, config.length]);
+  }, [sectionsConfig]);
   React.useEffect(() => {
     doSizing();
   }, [doSizing]);
@@ -13120,6 +13075,16 @@ function PdfView(_ref2) {
       })
     });
   }, [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: {
@@ -13130,7 +13095,7 @@ function PdfView(_ref2) {
         style: {
           top: (page - 1) * PAGE_HEIGHT,
           width: '100%',
-          height: HEADER_DIV_HEIGHT,
+          height: HEADER_HEIGHT - 24,
           position: 'absolute',
           left: 0,
           zIndex: 1000000
@@ -14982,9 +14947,31 @@ const PdfFormContent = _ref2 => {
     getAppHeader = () => {},
     app
   } = _ref2;
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "pdf-form-content",
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "document-header",
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "header-left",
+        children: /*#__PURE__*/jsxRuntime.jsx("h1", {
+          className: "company-name",
+          children: title
+        })
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "header-right",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "meta-info",
+          children: [t('Source'), ": ", /*#__PURE__*/jsxRuntime.jsx("b", {
+            children: source
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "meta-info",
+          children: [t('Version'), ": ", /*#__PURE__*/jsxRuntime.jsx("b", {
+            children: version
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "pdf-tree",
       children: Object.keys(form).filter(sectionKey => {
         const section = form[sectionKey];
@@ -15015,7 +15002,7 @@ const PdfFormContent = _ref2 => {
           getAppHeader: getAppHeader
         }, sectionKey);
       })
-    })
+    })]
   });
 };
 const PdfForm = _ref3 => {
@@ -15038,6 +15025,7 @@ const PdfForm = _ref3 => {
     getAppHeader = () => {},
     app
   } = _ref3;
+  // Group objects under headers based on position
   const organizeFormByHeaders = formData => {
     const organizedSections = {};
     Object.keys(formData).forEach(sectionKey => {
@@ -15045,6 +15033,8 @@ const PdfForm = _ref3 => {
       if (typeof section !== 'object' || !section.label) {
         return;
       }
+
+      // Get all objects from this section and sort by position
       const allObjects = Object.keys(section).filter(key => {
         return !(key === 'id' || key === 'label' || key === 'position' || key === 'subTitle');
       }).map(key => _objectSpread2({
@@ -15054,13 +15044,18 @@ const PdfForm = _ref3 => {
         const positionB = b.position || 0;
         return positionA - positionB;
       });
+
+      // Identify headers and regular objects
       const headers = allObjects.filter(obj => obj.type === 'header');
       const nonHeaders = allObjects.filter(obj => obj.type !== 'header');
       if (headers.length === 0) {
+        // No headers found, keep original structure
         organizedSections[sectionKey] = section;
         return;
       }
       const organizedSection = _objectSpread2({}, section);
+
+      // Clear the section of its original objects
       Object.keys(section).forEach(key => {
         if (!(key === 'id' || key === 'label' || key === 'position' || key === 'subTitle')) {
           delete organizedSection[key];
@@ -15069,23 +15064,30 @@ const PdfForm = _ref3 => {
       headers.forEach((header, index) => {
         const headerPosition = header.position || 0;
         const nextHeaderPosition = index < headers.length - 1 ? headers[index + 1].position || 0 : Infinity;
+
+        // Find objects that belong under this header
         const childrenObjects = nonHeaders.filter(obj => {
           const objPosition = obj.position || 0;
           return objPosition > headerPosition && objPosition < nextHeaderPosition;
         });
+
+        // Create the header structure with children as inputs
         const headerWithChildren = _objectSpread2({}, header);
-        delete headerWithChildren.key;
+        delete headerWithChildren.key; // Remove the key we added temporarily
+
         if (childrenObjects.length > 0) {
           headerWithChildren.inputs = {};
           childrenObjects.forEach(child => {
             const childKey = child.key;
             const childData = _objectSpread2({}, child);
-            delete childData.key;
+            delete childData.key; // Remove the temporary key
             headerWithChildren.inputs[childKey] = childData;
           });
         }
         organizedSection[header.key] = headerWithChildren;
       });
+
+      // Add any remaining objects that don't fall under any header
       const uncategorizedObjects = nonHeaders.filter(obj => {
         const objPosition = obj.position || 0;
         return !headers.some((header, index) => {
@@ -15107,243 +15109,39 @@ const PdfForm = _ref3 => {
   const organizedForm = React.useMemo(() => organizeFormByHeaders(form), [form]);
   const pdfConfig = React.useMemo(() => {
     const sections = [];
-
-    // Calculate available page space (from PdfView component)
-    const PAGE_HEIGHT = 1587;
-    const HEADER_HEIGHT = 100;
-    const FOOTER_HEIGHT = 70;
-    const USABLE_PAGE_HEIGHT = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT; // 1417
-    const TARGET_FILL_HEIGHT = USABLE_PAGE_HEIGHT * 0.8; // 80% = ~1133px
-    const MAX_INPUTS_PER_SECTION = 4; // 3-4 inputs max per section
-
-    // Function to estimate the height of a form element
-    const estimateElementHeight = function (config) {
-      let level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-      let height = 0;
-
-      // Base height for each element (label + value + margins)
-      const baseElementHeight = 25; // Rough estimate for a simple field
-      const nestedElementHeight = 20; // Slightly less for nested elements
-      const headerHeight = 30; // Headers take more space
-
-      // Add base height
-      if (config.type === 'header') {
-        height += headerHeight;
-      } else {
-        height += level === 0 ? baseElementHeight : nestedElementHeight;
-      }
-
-      // If it has inputs, recursively calculate their height
-      if (config.inputs) {
-        Object.values(config.inputs).forEach(inputConfig => {
-          // Check showIf condition
-          if (inputConfig !== null && inputConfig !== void 0 && inputConfig.showIf && !evaluateShowIfCondition(inputConfig.showIf, data)) {
-            return;
-          }
-          height += estimateElementHeight(inputConfig, level + 1);
-        });
-      }
-      return height;
-    };
-
-    // Function to flatten nested inputs into a flat array
-    const flattenInputs = function (parentKey, config) {
-      let parentLabel = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-      if (!config.inputs) {
-        // No nested inputs, return as single item
-        return [{
-          key: parentKey,
-          config: config,
-          parentLabel: parentLabel,
-          isNested: false
-        }];
-      }
-
-      // Has nested inputs, flatten them
-      const flatItems = [];
-      const inputKeys = Object.keys(config.inputs).filter(key => {
-        const inputConfig = config.inputs[key];
-        if (inputConfig !== null && inputConfig !== void 0 && inputConfig.showIf && !evaluateShowIfCondition(inputConfig.showIf, data)) {
-          return false;
-        }
-        return true;
-      }).sort((a, b) => {
-        var _config$inputs$a3, _config$inputs$b3;
-        const positionA = ((_config$inputs$a3 = config.inputs[a]) === null || _config$inputs$a3 === void 0 ? void 0 : _config$inputs$a3.position) || 0;
-        const positionB = ((_config$inputs$b3 = config.inputs[b]) === null || _config$inputs$b3 === void 0 ? void 0 : _config$inputs$b3.position) || 0;
-        return positionA - positionB;
-      });
-      inputKeys.forEach(inputKey => {
-        const inputConfig = config.inputs[inputKey];
-        const fullLabel = parentLabel ? "".concat(parentLabel, " - ").concat(config.label) : config.label;
-
-        // Recursively flatten if this input also has nested inputs
-        if (inputConfig.inputs) {
-          const nestedItems = flattenInputs(inputKey, inputConfig, fullLabel);
-          flatItems.push(...nestedItems);
-        } else {
-          flatItems.push({
-            key: inputKey,
-            config: inputConfig,
-            parentKey: parentKey,
-            parentConfig: config,
-            parentLabel: fullLabel,
-            isNested: true
-          });
-        }
-      });
-      return flatItems;
-    };
-
-    // Function to group flattened items into chunks
-    const groupItemsIntoChunks = (flatItems, sectionLabel) => {
-      const chunks = [];
-      let currentChunk = [];
-      let currentChunkHeight = 40; // Base height for section header
-
-      flatItems.forEach((item, index) => {
-        const itemHeight = estimateElementHeight(item.config);
-
-        // Check if we should start a new chunk
-        const shouldStartNewChunk = currentChunk.length >= MAX_INPUTS_PER_SECTION || currentChunkHeight + itemHeight > TARGET_FILL_HEIGHT && currentChunk.length > 0;
-        if (shouldStartNewChunk) {
-          chunks.push([...currentChunk]);
-          currentChunk = [];
-          currentChunkHeight = 40; // Reset for new chunk
-        }
-        currentChunk.push(item);
-        currentChunkHeight += itemHeight;
-
-        // If this is the last item, add the current chunk
-        if (index === flatItems.length - 1 && currentChunk.length > 0) {
-          chunks.push([...currentChunk]);
-        }
-      });
-      return chunks;
-    };
-
-    // Function to create a section from a chunk of items
-    const createSectionFromChunk = (chunk, sectionKey, sectionLabel, chunkIndex) => {
-      const chunkSection = {
-        id: sectionKey,
-        label: sectionLabel,
-        position: 0
-      };
-
-      // Group items by their parent if they're nested
-      const itemsByParent = {};
-      chunk.forEach(item => {
-        if (item.isNested && item.parentKey) {
-          if (!itemsByParent[item.parentKey]) {
-            itemsByParent[item.parentKey] = {
-              config: _objectSpread2({}, item.parentConfig),
-              inputs: {}
-            };
-          }
-          itemsByParent[item.parentKey].inputs[item.key] = item.config;
-        } else {
-          // Direct child of section
-          chunkSection[item.key] = item.config;
-        }
-      });
-
-      // Add grouped parent items to section
-      Object.keys(itemsByParent).forEach(parentKey => {
-        chunkSection[parentKey] = itemsByParent[parentKey].config;
-        chunkSection[parentKey].inputs = itemsByParent[parentKey].inputs;
-      });
-      return chunkSection;
-    };
-    let isFirstSection = true;
-    let globalChunkIndex = 0;
     Object.keys(organizedForm).forEach(sectionKey => {
       const section = organizedForm[sectionKey];
       if (typeof section !== 'object' || !section.label) {
         return;
       }
-
-      // Get all inputs from this section
-      const sectionInputKeys = Object.keys(section).filter(key => !(key === 'id' || key === 'label' || key === 'position' || key === 'subTitle')).sort((a, b) => {
-        var _section$a, _section$b;
-        const positionA = ((_section$a = section[a]) === null || _section$a === void 0 ? void 0 : _section$a.position) || 0;
-        const positionB = ((_section$b = section[b]) === null || _section$b === void 0 ? void 0 : _section$b.position) || 0;
-        return positionA - positionB;
-      });
-
-      // Flatten all nested inputs in this section
-      let allFlatItems = [];
-      sectionInputKeys.forEach(inputKey => {
-        const inputConfig = section[inputKey];
-        const flatItems = flattenInputs(inputKey, inputConfig);
-        allFlatItems.push(...flatItems);
-      });
-
-      // Group flat items into chunks
-      const chunks = groupItemsIntoChunks(allFlatItems, section.label);
-
-      // Create sections from chunks
-      chunks.forEach((chunk, chunkIndex) => {
-        const chunkSection = createSectionFromChunk(chunk, sectionKey, section.label);
-        const chunkKey = "".concat(sectionKey, "_chunk_").concat(globalChunkIndex);
-        sections.push({
-          render: () => /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "pdf-form-section",
-            children: /*#__PURE__*/jsxRuntime.jsx(PdfFormContent, {
-              form: {
-                [chunkKey]: chunkSection
-              },
-              data: data,
-              t: t,
-              user: user,
-              title: isFirstSection && chunkIndex === 0 ? formName : '',
-              source: isFirstSection && chunkIndex === 0 ? source : '',
-              version: isFirstSection && chunkIndex === 0 ? version : '',
-              getApiBaseUrl: getApiBaseUrl,
-              getAppHeader: getAppHeader,
-              app: app
-            })
-          }, chunkKey),
-          style: {
-            marginBottom: '10px',
-            padding: '0 20px'
-          }
-        });
-        globalChunkIndex++;
-        if (chunkIndex === 0) isFirstSection = false;
+      sections.push({
+        render: () => /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "pdf-form-section",
+          children: /*#__PURE__*/jsxRuntime.jsx(PdfFormContent, {
+            form: {
+              [sectionKey]: section
+            },
+            data: data,
+            t: t,
+            user: user,
+            title: formName,
+            source: source,
+            version: version,
+            getApiBaseUrl: getApiBaseUrl,
+            getAppHeader: getAppHeader,
+            app: app
+          })
+        }, sectionKey),
+        style: {
+          marginBottom: '20px',
+          padding: '0 20px'
+        }
       });
     });
     return sections;
   }, [organizedForm, data, t, getApiBaseUrl, getAppHeader, app, formName, source, version]);
-  console.log({
-    pdfConfig
-  });
-  const _pdfConfig = [{
-    render: () => /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "document-header",
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "header-left",
-        children: /*#__PURE__*/jsxRuntime.jsx("h1", {
-          className: "company-name",
-          children: title
-        })
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "header-right",
-        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "meta-info",
-          children: [t('Source'), ": ", /*#__PURE__*/jsxRuntime.jsx("b", {
-            children: source
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "meta-info",
-          children: [t('Version'), ": ", /*#__PURE__*/jsxRuntime.jsx("b", {
-            children: version
-          })]
-        })]
-      })]
-    })
-  }, ...pdfConfig];
   return /*#__PURE__*/jsxRuntime.jsx(PdfView, {
-    config: _pdfConfig,
+    config: pdfConfig,
     customClassName: "pdf-form ".concat(customClassName),
     title: title,
     imgSrc: imgSrc,

package/package.json

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

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

@@ -1,16 +1,12 @@
-// Dashboard/PdfView/index.jsx
 import moment from "moment";
 import PropTypes from 'prop-types';
 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; // Total area reserved for header (could be slightly more than actual div height)
-const HEADER_DIV_HEIGHT = HEADER_HEIGHT - 24; // Actual height of the absolute header div
-
-const FIRST_CONTENT_TOP_MARGIN = 30; // Desired margin-top for the very first content section on any given page.
-const SECTION_NORMAL_MARGIN = 24; // Default margin-top for subsequent sections on the same page.
+const HEADER_HEIGHT = 100;
 
 const Row = ({ widgets, i, onChangeHeight = () => { } }) => {
   const ref = useRef();
@@ -60,84 +56,48 @@ export default function PdfView({
     let _page = 1;
 
     if (keys.length === config.length) {
-      // `currentContentHeightAccumulated` tracks the height used by content sections *plus their top margins*,
-      // relative to the top of the *usable content area* on the current page.
-      let currentContentHeightAccumulated = 0; 
-      
-      // The total vertical space available for content sections *between* the absolute header and footer.
-      const USABLE_PAGE_CONTENT_HEIGHT = PAGE_HEIGHT - HEADER_DIV_HEIGHT - FOOTER_HEIGHT;
-
-      // Reset margins/padding for all sections before recalculating
+      let incrHeight = 0;
+
       keys.forEach(k => {
         const { ref } = sectionsConfig[k];
-        if (ref.current) {
-          ref.current.style.marginBottom = '0px';
-          ref.current.style.marginTop = '0px'; 
-          ref.current.style.paddingBottom = '0px';
-        }
-      });
+        ref.current.style.marginBottom = '0px';
+        // ref.current.style.marginTop = '15px';
+      })
 
       keys.forEach((k, i) => {
         const { height, ref } = sectionsConfig[k];
-        if (!ref.current) return; // Skip if ref.current is null (e.g., component unmounted or not yet rendered)
 
-        let sectionTopMargin = 0;
+        if (i === 0) {
+          ref.current.style.marginTop = `${HEADER_HEIGHT}px`;
+          incrHeight += HEADER_HEIGHT;
+        }
+
+        const newHeight = incrHeight + height;
 
-        // Determine the top margin for the current section
-        if (currentContentHeightAccumulated === 0) {
-          // This is the very first content section on the current virtual page
-          sectionTopMargin = FIRST_CONTENT_TOP_MARGIN;
-        } else {
-          // Subsequent content sections on the same virtual page
-          sectionTopMargin = SECTION_NORMAL_MARGIN;
+        if (i === keys.length - 1) {
+          ref.current.style.paddingBottom = '30px';
         }
-        
-        // Calculate the total space this section *would take* on the current page, including its own top margin.
-        const spaceNeededByThisSection = sectionTopMargin + height;
 
-        // Check if adding this section (with its top margin) would exceed the usable content area.
-        if (currentContentHeightAccumulated + spaceNeededByThisSection > USABLE_PAGE_CONTENT_HEIGHT) {
-          // This section overflows, so it must start on a new page.
+        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 there was a previous section on the *old* page, we need to fill the remaining space
-          // on that page by adding a bottom margin to the last section that fit.
-          if (i > 0) { 
-            const prevSectionRef = sectionsConfig[keys[i - 1]]?.ref;
-            if (prevSectionRef?.current) {
-              // Calculate remaining space on the previous page
-              const spaceLeftOnPrevPage = USABLE_PAGE_CONTENT_HEIGHT - currentContentHeightAccumulated;
-              if (spaceLeftOnPrevPage > 0) {
-                prevSectionRef.current.style.marginBottom = `${spaceLeftOnPrevPage}px`;
-              }
-            }
+          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);
           }
-
-          // For the current section (which is now the first on a new page), apply the `FIRST_CONTENT_TOP_MARGIN`.
-          ref.current.style.marginTop = `${FIRST_CONTENT_TOP_MARGIN}px`;
-          currentContentHeightAccumulated = FIRST_CONTENT_TOP_MARGIN + height; // Reset and update accumulated height for the *new* page
         } else {
-          // This section fits on the current page. Apply its calculated top margin.
-          ref.current.style.marginTop = `${sectionTopMargin}px`;
-          currentContentHeightAccumulated += spaceNeededByThisSection; // Add its height and its own top margin to accumulated height
+          incrHeight = newHeight + 24;
         }
-
-        // Add the standard margin between sections (for the *next* section, if there is one).
-        // This is important because `currentContentHeightAccumulated` needs to reflect the space used *up to the bottom of this section*,
-        // plus any necessary space for the next section's margin *before* it gets evaluated.
-        if (i < keys.length - 1) {
-            currentContentHeightAccumulated += SECTION_NORMAL_MARGIN;
-        }
-
-        // For the very last section of the entire document, add extra padding to the bottom.
-        if (i === keys.length - 1) {
-          ref.current.style.paddingBottom = '30px'; 
-        }
-      });
+        // console.groupEnd();
+      })
       setPages(_pages);
     }
-  }, [sectionsConfig, config.length]);
+  }, [sectionsConfig]);
 
   useEffect(() => {
     doSizing();
@@ -168,13 +128,22 @@ export default function PdfView({
     );
   }, [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) => (
         <>
           <div
-            style={{ top: ((page - 1) * PAGE_HEIGHT), width: '100%', height: HEADER_DIV_HEIGHT, position: 'absolute', left: 0, zIndex: 1000000 }}
+            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"
           >
@@ -235,4 +204,4 @@ PdfView.propTypes = {
   userId: PropTypes.string,
   accountId: PropTypes.string,
   documentId: PropTypes.string,
-}
+}

package/src/@daf/core/components/PdfForm/index.js

@@ -340,6 +340,15 @@ const PdfFormContent = ({
 }) => {
   return (
     <div className="pdf-form-content">
+      <div className="document-header">
+        <div className="header-left">
+          <h1 className="company-name">{title}</h1>
+        </div>
+        <div className="header-right">
+          <div className="meta-info">{t('Source')}: <b>{source}</b></div>
+          <div className="meta-info">{t('Version')}: <b>{version}</b></div>
+        </div>
+      </div>
       <div className="pdf-tree">
         {Object.keys(form)
           .filter(sectionKey => {
@@ -400,6 +409,7 @@ const PdfForm = ({
   getAppHeader = () => {},
   app
 }) => {
+  // Group objects under headers based on position
   const organizeFormByHeaders = (formData) => {
     const organizedSections = {};
     
@@ -410,6 +420,7 @@ const PdfForm = ({
         return;
       }
 
+      // Get all objects from this section and sort by position
       const allObjects = Object.keys(section)
         .filter(key => {
           return !(key === 'id' || key === 'label' || key === 'position' || key === 'subTitle');
@@ -424,18 +435,22 @@ const PdfForm = ({
           return positionA - positionB;
         });
 
+      // Identify headers and regular objects
       const headers = allObjects.filter(obj => obj.type === 'header');
       const nonHeaders = allObjects.filter(obj => obj.type !== 'header');
 
       if (headers.length === 0) {
+        // No headers found, keep original structure
         organizedSections[sectionKey] = section;
         return;
       }
 
       const organizedSection = {
         ...section,
+        // Keep the section-level properties
       };
 
+      // Clear the section of its original objects
       Object.keys(section).forEach(key => {
         if (!(key === 'id' || key === 'label' || key === 'position' || key === 'subTitle')) {
           delete organizedSection[key];
@@ -448,20 +463,22 @@ const PdfForm = ({
           ? (headers[index + 1].position || 0) 
           : Infinity;
 
+        // Find objects that belong under this header
         const childrenObjects = nonHeaders.filter(obj => {
           const objPosition = obj.position || 0;
           return objPosition > headerPosition && objPosition < nextHeaderPosition;
         });
 
+        // Create the header structure with children as inputs
         const headerWithChildren = { ...header };
-        delete headerWithChildren.key;
+        delete headerWithChildren.key; // Remove the key we added temporarily
 
         if (childrenObjects.length > 0) {
           headerWithChildren.inputs = {};
           childrenObjects.forEach(child => {
             const childKey = child.key;
             const childData = { ...child };
-            delete childData.key;
+            delete childData.key; // Remove the temporary key
             headerWithChildren.inputs[childKey] = childData;
           });
         }
@@ -469,6 +486,7 @@ const PdfForm = ({
         organizedSection[header.key] = headerWithChildren;
       });
 
+      // Add any remaining objects that don't fall under any header
       const uncategorizedObjects = nonHeaders.filter(obj => {
         const objPosition = obj.position || 0;
         return !headers.some((header, index) => {
@@ -498,166 +516,6 @@ const PdfForm = ({
   const pdfConfig = useMemo(() => {
     const sections = [];
     
-    // Calculate available page space (from PdfView component)
-    const PAGE_HEIGHT = 1587;
-    const HEADER_HEIGHT = 100;
-    const FOOTER_HEIGHT = 70;
-    const USABLE_PAGE_HEIGHT = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT; // 1417
-    const TARGET_FILL_HEIGHT = USABLE_PAGE_HEIGHT * 0.8; // 80% = ~1133px
-    const MAX_INPUTS_PER_SECTION = 4; // 3-4 inputs max per section
-    
-    // Function to estimate the height of a form element
-    const estimateElementHeight = (config, level = 0) => {
-      let height = 0;
-      
-      // Base height for each element (label + value + margins)
-      const baseElementHeight = 25; // Rough estimate for a simple field
-      const nestedElementHeight = 20; // Slightly less for nested elements
-      const headerHeight = 30; // Headers take more space
-      
-      // Add base height
-      if (config.type === 'header') {
-        height += headerHeight;
-      } else {
-        height += level === 0 ? baseElementHeight : nestedElementHeight;
-      }
-      
-      // If it has inputs, recursively calculate their height
-      if (config.inputs) {
-        Object.values(config.inputs).forEach(inputConfig => {
-          // Check showIf condition
-          if (inputConfig?.showIf && !evaluateShowIfCondition(inputConfig.showIf, data)) {
-            return;
-          }
-          height += estimateElementHeight(inputConfig, level + 1);
-        });
-      }
-      
-      return height;
-    };
-    
-    // Function to flatten nested inputs into a flat array
-    const flattenInputs = (parentKey, config, parentLabel = '') => {
-      if (!config.inputs) {
-        // No nested inputs, return as single item
-        return [{
-          key: parentKey,
-          config: config,
-          parentLabel: parentLabel,
-          isNested: false
-        }];
-      }
-
-      // Has nested inputs, flatten them
-      const flatItems = [];
-      const inputKeys = Object.keys(config.inputs)
-        .filter(key => {
-          const inputConfig = config.inputs[key];
-          if (inputConfig?.showIf && !evaluateShowIfCondition(inputConfig.showIf, data)) {
-            return false;
-          }
-          return true;
-        })
-        .sort((a, b) => {
-          const positionA = config.inputs[a]?.position || 0;
-          const positionB = config.inputs[b]?.position || 0;
-          return positionA - positionB;
-        });
-
-      inputKeys.forEach(inputKey => {
-        const inputConfig = config.inputs[inputKey];
-        const fullLabel = parentLabel ? `${parentLabel} - ${config.label}` : config.label;
-        
-        // Recursively flatten if this input also has nested inputs
-        if (inputConfig.inputs) {
-          const nestedItems = flattenInputs(inputKey, inputConfig, fullLabel);
-          flatItems.push(...nestedItems);
-        } else {
-          flatItems.push({
-            key: inputKey,
-            config: inputConfig,
-            parentKey: parentKey,
-            parentConfig: config,
-            parentLabel: fullLabel,
-            isNested: true
-          });
-        }
-      });
-
-      return flatItems;
-    };
-    
-    // Function to group flattened items into chunks
-    const groupItemsIntoChunks = (flatItems, sectionLabel) => {
-      const chunks = [];
-      let currentChunk = [];
-      let currentChunkHeight = 40; // Base height for section header
-      
-      flatItems.forEach((item, index) => {
-        const itemHeight = estimateElementHeight(item.config);
-        
-        // Check if we should start a new chunk
-        const shouldStartNewChunk = (
-          currentChunk.length >= MAX_INPUTS_PER_SECTION ||
-          (currentChunkHeight + itemHeight > TARGET_FILL_HEIGHT && currentChunk.length > 0)
-        );
-        
-        if (shouldStartNewChunk) {
-          chunks.push([...currentChunk]);
-          currentChunk = [];
-          currentChunkHeight = 40; // Reset for new chunk
-        }
-        
-        currentChunk.push(item);
-        currentChunkHeight += itemHeight;
-        
-        // If this is the last item, add the current chunk
-        if (index === flatItems.length - 1 && currentChunk.length > 0) {
-          chunks.push([...currentChunk]);
-        }
-      });
-      
-      return chunks;
-    };
-    
-    // Function to create a section from a chunk of items
-    const createSectionFromChunk = (chunk, sectionKey, sectionLabel, chunkIndex) => {
-      const chunkSection = {
-        id: sectionKey,
-        label: sectionLabel,
-        position: 0
-      };
-      
-      // Group items by their parent if they're nested
-      const itemsByParent = {};
-      
-      chunk.forEach(item => {
-        if (item.isNested && item.parentKey) {
-          if (!itemsByParent[item.parentKey]) {
-            itemsByParent[item.parentKey] = {
-              config: { ...item.parentConfig },
-              inputs: {}
-            };
-          }
-          itemsByParent[item.parentKey].inputs[item.key] = item.config;
-        } else {
-          // Direct child of section
-          chunkSection[item.key] = item.config;
-        }
-      });
-      
-      // Add grouped parent items to section
-      Object.keys(itemsByParent).forEach(parentKey => {
-        chunkSection[parentKey] = itemsByParent[parentKey].config;
-        chunkSection[parentKey].inputs = itemsByParent[parentKey].inputs;
-      });
-      
-      return chunkSection;
-    };
-    
-    let isFirstSection = true;
-    let globalChunkIndex = 0;
-
     Object.keys(organizedForm).forEach((sectionKey) => {
       const section = organizedForm[sectionKey];
       
@@ -665,85 +523,36 @@ const PdfForm = ({
         return;
       }
 
-      // Get all inputs from this section
-      const sectionInputKeys = Object.keys(section)
-        .filter(key => !(key === 'id' || key === 'label' || key === 'position' || key === 'subTitle'))
-        .sort((a, b) => {
-          const positionA = section[a]?.position || 0;
-          const positionB = section[b]?.position || 0;
-          return positionA - positionB;
-        });
-
-      // Flatten all nested inputs in this section
-      let allFlatItems = [];
-      sectionInputKeys.forEach(inputKey => {
-        const inputConfig = section[inputKey];
-        const flatItems = flattenInputs(inputKey, inputConfig);
-        allFlatItems.push(...flatItems);
-      });
-
-      // Group flat items into chunks
-      const chunks = groupItemsIntoChunks(allFlatItems, section.label);
-      
-      // Create sections from chunks
-      chunks.forEach((chunk, chunkIndex) => {
-        const chunkSection = createSectionFromChunk(chunk, sectionKey, section.label, chunkIndex);
-        const chunkKey = `${sectionKey}_chunk_${globalChunkIndex}`;
-        
-        sections.push({
-          render: () => (
-            <div key={chunkKey} className="pdf-form-section">
-              <PdfFormContent
-                form={{ [chunkKey]: chunkSection }}
-                data={data}
-                t={t}
-                user={user}
-                title={isFirstSection && chunkIndex === 0 ? formName : ''}
-                source={isFirstSection && chunkIndex === 0 ? source : ''}
-                version={isFirstSection && chunkIndex === 0 ? version : ''}
-                getApiBaseUrl={getApiBaseUrl}
-                getAppHeader={getAppHeader}
-                app={app}
-              />
-            </div>
-          ),
-          style: {
-            marginBottom: '10px',
-            padding: '0 20px'
-          }
-        });
-        
-        globalChunkIndex++;
-        if (chunkIndex === 0) isFirstSection = false;
+      sections.push({
+        render: () => (
+          <div key={sectionKey} className="pdf-form-section">
+            <PdfFormContent
+              form={{ [sectionKey]: section }}
+              data={data}
+              t={t}
+              user={user}
+              title={formName}
+              source={source}
+              version={version}
+              getApiBaseUrl={getApiBaseUrl}
+              getAppHeader={getAppHeader}
+              app={app}
+            />
+          </div>
+        ),
+        style: {
+          marginBottom: '20px',
+          padding: '0 20px'
+        }
       });
     });
-    
+
     return sections;
   }, [organizedForm, data, t, getApiBaseUrl, getAppHeader, app, formName, source, version]);
 
-  console.log({pdfConfig});
-
-
-const _pdfConfig = [
-  {
-    render: () => (
-        <div className="document-header">
-        <div className="header-left">
-          <h1 className="company-name">{title}</h1>
-        </div>
-        <div className="header-right">
-          <div className="meta-info">{t('Source')}: <b>{source}</b></div>
-          <div className="meta-info">{t('Version')}: <b>{version}</b></div>
-        </div>
-        </div>
-    ),
-  },
-  ...pdfConfig
-]
-
   return (
     <PdfView
-      config={_pdfConfig}
+      config={pdfConfig}
       customClassName={`pdf-form ${customClassName}`}
       title={title}
       imgSrc={imgSrc}